/* ============================================================
   iMP · Las tres fases, cierre en rojo y pie
   ============================================================ */

.fases { padding-block: var(--sec-media); }

/* "que veras" hace de tagline y la introduccion de las fases de titular */
.fases__tagline {
  font-family: var(--ff-display);
  font-weight: var(--fw-semi);
  font-size: .84rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-accent);
  text-align: center;
}

/* Medida ancha a proposito: en escritorio cae en dos lineas */
.fases__intro {
  max-width: 24ch;
  margin: clamp(.9rem, 1.6vw, 1.25rem) auto 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.45rem, 1.6vw + .7rem, 2.2rem);
  line-height: 1.14;
  letter-spacing: -.022em;
  color: var(--c-text);
  text-align: center;
}
.fases__intro .cifra { color: var(--c-accent); font-size: 1em; }

.fases__rejilla {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* --- Tarjeta de fase ----------------------------------------- */
.tarjeta-fase {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  border-radius: clamp(16px, 1.6vw, 22px);
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(165deg, #161616 0%, #101010 100%);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.tarjeta-fase:hover { transform: translateY(-3px); }

/* --- Foto de la sesion, arriba de la tarjeta -------------------
   Sustituye al icono que habia antes. Va apaisada y NO recortada a
   vertical porque en cada foto hay dos cosas que importan y estan en
   extremos opuestos del encuadre: el mentorizado a la izquierda y el
   papelografo a la derecha. En vertical se pierde una de las dos.

   A este tamano no se lee lo que pone el papelografo, y no hace falta:
   lo que prueba es la escena (uno explicando de pie, otro escuchando),
   no el texto. */
.tarjeta-fase__foto {
  margin: 0 0 clamp(1.2rem, 2.2vw, 1.6rem);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #0C0C0C;
  isolation: isolate;
}
/* SIN recorte, a proposito y por peticion del cliente: en las tres fotos uno
   de los dos esta pegado a un borde del encuadre (el mentorizado a la
   izquierda, el que explica a la derecha), asi que cualquier object-fit:
   cover corta a alguien. La imagen entra entera y la tarjeta se adapta.
   Las tres miden lo mismo, asi que las tarjetas siguen alineadas; el script
   que las genera se para si alguna llega con otro tamano. */
.tarjeta-fase__foto img {
  width: 100%;
  height: auto;
  transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.tarjeta-fase:hover .tarjeta-fase__foto img { transform: scale(1.04); }

/* El filo que sigue al raton (.glow) vive en base.css: lo usan tambien
   las tarjetas de la pagina de gracias */

/* El titulo entero es "1o Fase: Contruir tu estrategia a medida":
   el numeral, la etiqueta y el nombre son partes del mismo copy */
.tarjeta-fase__tit { font-weight: var(--fw-regular); }
.tarjeta-fase__num {
  display: block;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.4rem, 1.8vw + 1.6rem, 3.1rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.tarjeta-fase__num sup {
  font-size: .42em;
  vertical-align: .9em;
  margin-left: .02em;
}
.tarjeta-fase__lab {
  display: block;
  margin-top: 10px;
  font-size: .82rem;
  font-weight: var(--fw-semi);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.tarjeta-fase__nom {
  display: block;
  margin-top: 8px;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.15rem, .5vw + 1.02rem, 1.35rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--c-text);
}
.tarjeta-fase__desc {
  margin-top: clamp(.85rem, 1.4vw, 1.1rem);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-text-muted);
}

/* ============================================================
   Cierre: tarjeta roja con el regalo del registro
   Mockup a la izquierda, texto a la derecha.
   ============================================================ */
.cierre { padding-block: var(--sec-media); }

.cierre__tarjeta {
  position: relative;
  /* SIN overflow: hidden, que el cuaderno tiene que poder salirse del borde.
     Los gradientes del fondo respetan el border-radius por su cuenta, y el
     overflow-x: clip de la pagina evita cualquier barra horizontal. */
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  /* el relleno vertical va en variable porque el cuaderno lo necesita para
     calcular cuanto tiene que asomar por debajo en movil */
  --pad-tarjeta-y: clamp(1.75rem, 4vw, 3.25rem);
  padding: var(--pad-tarjeta-y) clamp(1.5rem, 4vw, 3.25rem);
  border-radius: clamp(18px, 2vw, 28px);
  /* Rojo con texto blanco: ver --c-accent-fill en tokens.css. Los gradientes
     de cristal van bajos a proposito: al 16%/18% aclaraban el rojo lo justo
     para tumbar el contraste del texto que arranca ahi arriba. */
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 42%),
    radial-gradient(120% 100% at 50% -20%, rgba(255, 255, 255, .10), transparent 60%),
    var(--c-accent-fill);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 30px 70px rgba(214, 23, 108, .28), inset 0 1px 0 rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* El cuaderno ya trae su sombra en el alfa, asi que flota sobre el rojo sin
   que haya que anadirle nada */
.cierre__media {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin-inline: auto;
}
.cierre__media img {
  width: 100%;
  transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.cierre__tarjeta:hover .cierre__media img { transform: translateY(-6px) rotate(-1deg); }

.cierre__caja { position: relative; z-index: 1; min-width: 0; }

.cierre__eyebrow {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: .82rem;
  letter-spacing: .16em;
  color: #FFFFFF;
}
.cierre__tit {
  margin-top: clamp(.6rem, 1.2vw, .9rem);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.9rem, 2.2vw + .9rem, 3rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  color: #FFFFFF;
}
.cierre__resto {
  margin-top: clamp(.7rem, 1.4vw, 1.1rem);
  max-width: 46ch;
  font-weight: var(--fw-medium);
  font-size: clamp(1rem, .4vw + .92rem, 1.15rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .96);
}

/* Boton de la tarjeta roja: sube al formulario del hero */
.cierre__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin-top: clamp(1.4rem, 2.8vw, 2rem);
  padding-inline: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-full);
  background: #101010;
  color: #FFFFFF;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: 1.08rem;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  transition: background var(--t-fast), transform var(--t-fast);
}
.cierre__boton:hover { background: #000000; transform: translateY(-2px); }
.cierre__boton:active { transform: translateY(0); }
.cierre__boton:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

.cierre__nota {
  margin-top: clamp(.7rem, 1.2vw, .95rem);
  max-width: 40ch;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .95);
}

/* --- Movil: texto centrado y el cuaderno DEBAJO ----------------
   Tres decisiones, por este orden de importancia:

   1. El cuaderno se va debajo del boton. Arriba obligaba a pasar por una
      imagen grande antes de saber que es, y empujaba el CTA fuera de la
      pantalla. Ademas la portada dice lo mismo que el titular, asi que
      encima quedaba repetido.
   2. Asoma por el borde de abajo de la tarjeta, como en escritorio: las dos
      versiones se leen como el mismo diseno y la tarjeta deja de parecer una
      caja con una foto dentro.
   3. Texto centrado. Aqui no hay nada mas con lo que alinearse a la
      izquierda: es un panel cerrado. Al parrafo se le pone text-wrap:
      balance, que centrado y a cuatro lineas el rio se nota.
   ------------------------------------------------------------------ */
@media (max-width: 899px) {
  .cierre__caja { text-align: center; }
  .cierre__resto,
  .cierre__nota { margin-inline: auto; }
  .cierre__resto { text-wrap: balance; }
  /* el letter-spacing deja un hueco fantasma detras de la ultima letra y
     descentra la linea un pelo: se compensa */
  .cierre__eyebrow { margin-right: -.16em; }

  .cierre__media {
    order: 2;
    margin-top: clamp(.75rem, 3vw, 1.25rem);
    /* Lo que asoma por debajo del borde. El margen negativo tiene que
       comerse PRIMERO el relleno de la tarjeta, asi que se le suma: si no,
       con -2rem asomaban 2px y parecia que no hacia nada.
       El tope de --asoma es de seguridad: la seccion solo pone 56px de
       relleno inferior en movil y pasarse mete el cuaderno en el pie. */
    --asoma: clamp(1.5rem, 8vw, 2.25rem);
    margin-bottom: calc(-1 * (var(--pad-tarjeta-y) + var(--asoma)));
  }
}

/* El pie vive en base.css: es el mismo en las dos paginas */

/* ============================================================
   Escritorio
   ============================================================ */
@media (min-width: 760px) {
  .fases__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fases__intro { max-width: 34ch; }
}

@media (min-width: 900px) {
  /* Cuaderno a la izquierda, texto a la derecha */
  .cierre__tarjeta { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }

  /* LA ALTURA DE LA TARJETA LA MANDA EL TEXTO, no el cuaderno.
     Con el cuaderno en el flujo, la fila crecia hasta su alto (~620px) y la
     tarjeta quedaba enorme con media columna de rojo vacio. Se le da altura
     cero a la columna y el cuaderno se coloca en absoluto: asi no cuenta para
     la fila y sobresale por arriba y por abajo, igual que por la izquierda.

     El tope de 5rem de salida no es estetico: entre 900 y 1300 px el
     contenedor todavia no esta centrado y a la izquierda de la tarjeta solo
     hay 4vw de aire. Si se pasa, el cuaderno acaba pegado a la ventana. */
  .cierre__media {
    --salida: clamp(2.5rem, 5.5vw, 5rem);
    position: relative;
    height: 0;
    max-width: none;
    margin-inline: 0;
  }
  .cierre__media img {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--salida));
    width: calc(100% + var(--salida));
    /* el max-width: 100% que base.css pone a TODAS las imagenes recortaba
       justo el ensanchado, y el cuaderno se quedaba al ancho de la columna */
    max-width: none;
    /* el centrado va DENTRO del transform para que el hover lo componga en
       vez de pisarlo */
    transform: translateY(-50%);
  }
  .cierre__tarjeta:hover .cierre__media img {
    transform: translateY(calc(-50% - 6px)) rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-fase:hover { transform: none; }
  .cierre__tarjeta:hover .cierre__media img { transform: none; }
}