/* =========================================================
   DORSEY REINFORCEMENT
   INSTITUTO DORSEY

   PALETA OFICIAL
   #0a1128
   #001f54
   #034078
   #1282a2
   #fefcfb

   IMPORTANTE:
   EL HERO SE CONTROLA ÚNICAMENTE DESDE:
   assets/css/hero-global.css

   SIN ANIMACIONES DE ENTRADA.
   SOLO EFECTOS HOVER.
   ========================================================= */


/* =========================================================
   SECCIONES
   ========================================================= */

.section {
  width: 100%;

  padding:
    90px
    0;

  background:
    #fefcfb;
}


/* =========================================================
   INTRODUCCIÓN
   ========================================================= */

.section--intro {
  padding:
    96px
    0
    82px;

  background:
    #fefcfb;
}


/* =========================================================
   ENCABEZADO DE SECCIÓN
   ========================================================= */

.section__header {
  width: 100%;
  max-width: 820px;

  margin:
    0
    auto
    48px;

  text-align: center;
}


.section__header .mini {
  display: block;

  margin:
    0
    0
    10px;

  color:
    #1282a2;

  font-size:
    0.875rem;

  font-weight:
    700;

  line-height:
    1.4;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


/* =========================================================
   H2
   Desktop: 36px – 48px
   ========================================================= */

.section__header h2 {
  margin: 0;

  color:
    #001f54;

  font-size:
    clamp(
      2.25rem,
      3.2vw,
      3rem
    );

  font-weight:
    700;

  line-height:
    1.25;

  letter-spacing:
    -0.02em;
}


/* =========================================================
   TEXTO INTRODUCTORIO
   ========================================================= */

.section__intro {
  width: 100%;
  max-width: 860px;

  margin:
    0
    auto;

  color:
    #034078;

  font-size:
    1rem;

  line-height:
    1.7;

  text-align:
    center;
}


/* =========================================================
   SECCIÓN DE PROGRAMAS
   ========================================================= */

.section--programs {
  padding:
    12px
    0
    100px;

  background:
    #fefcfb;
}


/* =========================================================
   PROGRAMA
   ========================================================= */

.program {
  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);

  align-items:
    center;

  gap:
    64px;

  width:
    100%;

  padding:
    68px
    0;

  border-bottom:
    1px solid
    rgba(18, 130, 162, 0.22);
}


.program:first-child {
  padding-top:
    38px;
}


.program:last-child {
  padding-bottom:
    36px;

  border-bottom:
    0;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.program__content {
  min-width:
    0;
}


/* =========================================================
   H3
   Desktop: 28px – 32px
   ========================================================= */

.program__content h3 {
  margin:
    0
    0
    14px;

  color:
    #001f54;

  font-size:
    clamp(
      1.75rem,
      2vw,
      2rem
    );

  font-weight:
    700;

  line-height:
    1.3;

  letter-spacing:
    -0.015em;
}


/* =========================================================
   TEXTO PROGRAMA
   ========================================================= */

.program__text {
  margin:
    0;

  color:
    #034078;

  font-size:
    1rem;

  line-height:
    1.7;
}


/* =========================================================
   MEDIA
   ========================================================= */

.program__media {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    0;
}


/* =========================================================
   PLACEHOLDER / IMAGEN DE PROGRAMA
   ========================================================= */

.program__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(18, 130, 162, 0.16);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(10, 17, 40, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* =========================================================
   HOVER MEDIA
   ========================================================= */

.image-placeholder:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(18, 130, 162, 0.28);

  box-shadow:
    0 20px 42px
    rgba(10, 17, 40, 0.16);
}


/* =========================================================
   TABLET GRANDE
   981px – 1180px
   ========================================================= */

@media (min-width: 981px) and (max-width: 1180px) {

  .section {
    padding:
      82px
      0;
  }


  .section--intro {
    padding:
      84px
      0
      72px;
  }


  .section--programs {
    padding:
      10px
      0
      88px;
  }


  .section__header {
    margin-bottom:
      44px;
  }


  .section__header h2 {
    font-size:
      clamp(
        2.15rem,
        3.4vw,
        2.6rem
      );
  }


  .program {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.85fr);

    gap:
      48px;

    padding:
      60px
      0;
  }


  .program__content h3 {
    font-size:
      1.75rem;
  }

}


/* =========================================================
   TABLET
   701px – 980px
   ========================================================= */

@media (min-width: 701px) and (max-width: 980px) {

  .section .container {
    width:
      min(
        100% - 48px,
        760px
      );

    margin-right:
      auto;

    margin-left:
      auto;
  }


  .section {
    padding:
      72px
      0;
  }


  .section--intro {
    padding:
      76px
      0
      64px;
  }


  .section--programs {
    padding:
      6px
      0
      76px;
  }


  /* HEADER */

  .section__header {
    max-width:
      690px;

    margin-bottom:
      38px;
  }


  .section__header .mini {
    font-size:
      0.8125rem;

    letter-spacing:
      0.13em;
  }


  .section__header h2 {
    font-size:
      clamp(
        2rem,
        5vw,
        2.35rem
      );

    line-height:
      1.25;
  }


  .section__intro {
    max-width:
      720px;

    font-size:
      1rem;

    line-height:
      1.7;
  }


  /* PROGRAMAS */

  .program {
    grid-template-columns:
      1fr;

    gap:
      30px;

    padding:
      54px
      0;
  }


  .program:first-child {
    padding-top:
      28px;
  }


  .program:last-child {
    padding-bottom:
      28px;
  }


  .program__content {
    max-width:
      680px;
  }


  .program__content h3 {
    font-size:
      clamp(
        1.65rem,
        4vw,
        1.9rem
      );
  }


  .program__text {
    font-size:
      1rem;

    line-height:
      1.68;
  }


  .program__media {
    width:
      100%;
  }


  .program__image {
    width:
      min(
        100%,
        620px
      );

    margin:
      0
      auto;

    font-size:
      0.8125rem;

    letter-spacing:
      0.09em;
  }

}


/* =========================================================
   CELULAR
   HASTA 700px
   ========================================================= */

@media (max-width: 700px) {

  /* ---------------------------------------------------------
     SEGURIDAD DE LAYOUT
     --------------------------------------------------------- */

  .section {
    width:
      100%;

    overflow-x:
      hidden;
  }


  .section * {
    box-sizing:
      border-box;
  }


  /* ---------------------------------------------------------
     CONTENEDOR
     --------------------------------------------------------- */

  .section .container {
    width:
      100%;

    max-width:
      none;

    margin-right:
      auto;

    margin-left:
      auto;

    padding-right:
      20px;

    padding-left:
      20px;
  }


  /* ---------------------------------------------------------
     SECCIONES
     --------------------------------------------------------- */

  .section {
    padding:
      58px
      0;
  }


  .section--intro {
    padding:
      60px
      0
      52px;
  }


  .section--programs {
    padding:
      0
      0
      62px;
  }


  /* ---------------------------------------------------------
     HEADER
     --------------------------------------------------------- */

  .section__header {
    width:
      100%;

    max-width:
      100%;

    margin:
      0
      0
      28px;

    text-align:
      left;
  }


  .section__header .mini {
    margin-bottom:
      8px;

    font-size:
      0.75rem;

    line-height:
      1.4;

    letter-spacing:
      0.12em;
  }


  /* H2 móvil: 28px – 32px */

  .section__header h2 {
    font-size:
      clamp(
        1.75rem,
        7.5vw,
        2rem
      );

    line-height:
      1.25;

    letter-spacing:
      -0.015em;
  }


  /* ---------------------------------------------------------
     INTRO
     --------------------------------------------------------- */

  .section__intro {
    max-width:
      100%;

    margin:
      0;

    color:
      #034078;

    font-size:
      1rem;

    line-height:
      1.7;

    text-align:
      left;
  }


  /* ---------------------------------------------------------
     PROGRAMA
     --------------------------------------------------------- */

  .program {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      24px;

    width:
      100%;

    padding:
      44px
      0;

    border-bottom:
      1px solid
      rgba(18, 130, 162, 0.20);
  }


  .program:first-child {
    padding-top:
      26px;
  }


  .program:last-child {
    padding-bottom:
      20px;

    border-bottom:
      0;
  }


  /* ---------------------------------------------------------
     CONTENIDO
     --------------------------------------------------------- */

  .program__content {
    order:
      1;

    width:
      100%;
  }


  /* H3 móvil: 24px – 28px */

  .program__content h3 {
    margin-bottom:
      11px;

    font-size:
      clamp(
        1.5rem,
        6.3vw,
        1.75rem
      );

    line-height:
      1.3;
  }


  .program__text {
    color:
      #034078;

    font-size:
      1rem;

    line-height:
      1.68;
  }


  /* ---------------------------------------------------------
     MEDIA
     --------------------------------------------------------- */

  .program__media {
    order:
      2;

    width:
      100%;
  }


  .program__image {
    width:
      100%;

    max-width:
      100%;

    aspect-ratio:
      16 / 9;

    border-radius:
      10px;

    font-size:
      0.75rem;

    line-height:
      1.4;

    letter-spacing:
      0.08em;

    box-shadow:
      0 10px 26px
      rgba(10, 17, 40, 0.10);
  }


  /* SIN MOVIMIENTO HOVER EN MÓVIL */

  .program__image:hover {
    transform:
      none;

    border-color:
      rgba(18, 130, 162, 0.16);

    box-shadow:
      0 10px 26px
      rgba(10, 17, 40, 0.10);
  }

}


/* =========================================================
   CELULAR MEDIANO
   HASTA 480px
   ========================================================= */

@media (max-width: 480px) {

  .section .container {
    padding-right:
      18px;

    padding-left:
      18px;
  }


  .section--intro {
    padding:
      54px
      0
      48px;
  }


  .section--programs {
    padding-bottom:
      56px;
  }


  .section__header {
    margin-bottom:
      25px;
  }


  .section__header h2 {
    font-size:
      clamp(
        1.75rem,
        8vw,
        1.95rem
      );
  }


  .section__intro {
    font-size:
      1rem;

    line-height:
      1.68;
  }


  .program {
    gap:
      21px;

    padding:
      39px
      0;
  }


  .program:first-child {
    padding-top:
      24px;
  }


  .program__content h3 {
    font-size:
      clamp(
        1.5rem,
        7vw,
        1.65rem
      );
  }


  .program__text {
    font-size:
      1rem;

    line-height:
      1.68;
  }


  .program__image {
    border-radius:
      9px;

    font-size:
      0.72rem;

    letter-spacing:
      0.07em;
  }

}


/* =========================================================
   CELULAR PEQUEÑO
   HASTA 390px
   ========================================================= */

@media (max-width: 390px) {

  .section .container {
    padding-right:
      16px;

    padding-left:
      16px;
  }


  .section--intro {
    padding:
      50px
      0
      44px;
  }


  .section--programs {
    padding-bottom:
      50px;
  }


  .section__header h2 {
    font-size:
      1.75rem;
  }


  .section__intro {
    font-size:
      1rem;
  }


  .program {
    gap:
      19px;

    padding:
      36px
      0;
  }


  .program__content h3 {
    font-size:
      1.5rem;
  }


  .program__text {
    font-size:
      1rem;
  }

}


/* =========================================================
   CELULAR MUY PEQUEÑO
   HASTA 340px
   ========================================================= */

@media (max-width: 340px) {

  .section .container {
    padding-right:
      14px;

    padding-left:
      14px;
  }


  .section--intro {
    padding:
      46px
      0
      42px;
  }


  .section__header h2 {
    font-size:
      1.7rem;
  }


  .program {
    padding:
      32px
      0;
  }


  .program__content h3 {
    font-size:
      1.45rem;
  }

}


/* =========================================================
   DISPOSITIVOS TÁCTILES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  .program__image:hover {
    transform:
      none;
  }

}