/* ============================================================================
   Sobre mí — Dirección A «La Carta»
   ----------------------------------------------------------------------------
   La marca personal ES el producto, así que esta es la página donde «La Carta»
   se estira más hacia lo editorial: Arapey lleva el lema, la cita y los hitos
   de la línea de tiempo. Young Serif se reserva para los titulares del sitio;
   Arapey es la voz de Janice.
   ========================================================================= */

.bk-janice {
  background: var(--papel);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
}

/* ⚠️ LAS CINCO REGLAS DE ESPACIADO DE ESTA PÁGINA (pedido de Ignacio, 31-08)
   —cabecera, intro, promesas, FAQ y cierre— van todas con CLASE REPETIDA
   (0,3,0), y no es adorno: el «RITMO VERTICAL ÚNICO» de `components.css` es
   `:is(…) > *` y su `:is()` pesa (0,2,1) por `.wrap--reading.section >
   article`, su argumento más alto. Una regla de clase simple o doble no se
   aplica por más abajo que esté en la cascada.
   Ninguna de las cinco es primer ni último hijo de `.bk-janice` en el eje que
   se toca, así que tres clases alcanzan: contra `:first-child` o `:last-child`
   —que suman una clase más— harían falta cuatro.

   El bloque de cabecera cerraba pegado a la foto con 6px (pedido anterior de
   Ignacio): el ritmo de sección separaba de más al titular de la imagen que lo
   ilustra. Ahora pasa a 30px, el mismo aire que el resto de la página. */
.jan-head { padding-inline: var(--edge); }
.jan-head.jan-head.jan-head { padding-bottom: 30px; }

/* 30px y no 40.
   El titular pasó de «Hola, soy Janice» (15 caracteres) a «¡Hola! mi nombre es
   Janice Del Aguila» (39). A 40px eso son cuatro líneas en un teléfono y el
   nombre queda partido; a 30px entran tres y «Del Aguila» viaja junto. El
   escalón grande se conserva en escritorio, donde el ancho lo permite.
   `text-wrap: balance` reparte las líneas en vez de dejar una huérfana. */
.jan-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.08;
  margin: 9px 0 0;
  text-wrap: balance;
}

/* El lema baja de 23 a 20px: con el titular más alto y más largo, a 23 los dos
   competían — el subtítulo tiene que leerse como bajada, no como segundo
   titular. */
.jan-lema {
  font-family: var(--script);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--wine);
  margin: 11px 0 0;
  text-wrap: pretty;
}

/* La foto va a sangre y PEGADA: sin espacio de sección arriba ni abajo, para
   que quede contra el titular y flush contra la franja de datos.

   ⚠️ Clase repetida (0,3,0) a propósito. El RITMO VERTICAL ÚNICO de
   `components.css` pesa (0,2,1) —se lo da `.wrap--reading.section > article`—,
   así que un `.jan-foto { padding-block: 0 }` (0,1,0) NO le gana por más abajo
   que esté. Es la misma trampa de especificidad de siempre: contar, no confiar
   en el orden.

   Y ese padding era exactamente el bug de los «bordes amarillos»: los 10px
   quedaban DENTRO de la caja, la imagen (`height: 100%`) medía 20px menos que
   su contenedor y el `background: var(--sand)` asomaba como dos franjas arena
   arriba y abajo. El fondo se elimina: con `object-fit: cover` no hay nada que
   pueda asomar, y un fondo de color bajo una foto a sangre solo puede aparecer
   cuando algo ya salió mal. */
.jan-foto.jan-foto.jan-foto {
  padding-block: 0;
  height: 400px;
  overflow: hidden;
  background: none;
  /* Sin esquinas rectas (30-08). El radio va en la CAJA, que ya tiene
     `overflow: hidden`: así el recorte es uno solo y la foto no puede asomar
     por una esquina.

     ⚠️ SOLO LAS DOS DE ARRIBA. Apilada, la foto queda pegada a la ficha de
     datos y las dos son UNA pieza —el retrato y su pie—: redondeando las
     cuatro esquinas de cada una, el punto donde se tocan queda pellizcado.
     Cada una redondea por fuera y la unión queda recta. En escritorio dejan de
     estar apiladas y ahí sí van las cuatro (ver `escritorio.css`). */
  border-radius: var(--r-caja) var(--r-caja) 0 0;
}

/* Anclado al centro de la cabeza (y=0,417 del original de 792x1400) por la
   misma cuenta que documenta `home-brooklyn.css`. Para 342x400 da 25%. */
.jan-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }

/* Cuatro columnas parejas. El padding lateral es fijo y chico —no `--edge`—
   porque ahora hay cuatro celdas y no dos: con 24px por lado la cifra de la
   última quedaba pegada al borde de la pantalla. */
.jan-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ink);
  color: var(--papel);
  text-align: center;
  /* Es una caja tintada, no una banda: en escritorio mide 500px dentro de la
     columna de lectura. `overflow: hidden` para que los filetes verticales
     entre celdas no se salgan por las esquinas. */
  border-radius: 0 0 var(--r-caja) var(--r-caja);
  overflow: hidden;
}

.jan-stats > div { padding: 18px 4px; }

/* La línea va entre celdas, no después de la primera: con dos columnas
   `:first-child` alcanzaba, con cuatro dejaba tres celdas pegadas. */
.jan-stats > div + div { border-left: 1px solid rgba(251, 247, 242, .18); }

.jan-stats b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}

.jan-stats span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: rgba(251, 247, 242, .7);
  margin-top: 5px;
}

@media (min-width: 560px) {
  .jan-stats > div { padding: 22px 10px; }
  .jan-stats b { font-size: 28px; }
  .jan-stats span { font-size: 10.5px; letter-spacing: .08em; }
}

.jan-intro { padding-inline: var(--edge); }
/* 30px arriba y abajo, contra los 20 del ritmo. Ver la nota de `.jan-head`. */
.jan-intro.jan-intro.jan-intro { padding-block: 30px; }
.jan-intro p:last-child { margin: 12px 0 0; font-size: 16px; line-height: var(--lh-texto); }

.jan-cita {
  margin-inline: var(--edge);
  border-top: 1px solid rgba(121, 87, 87, .25);
  border-bottom: 1px solid rgba(121, 87, 87, .25);
  font-family: var(--script);
  font-style: italic;
  font-size: 26px;
  line-height: 1.38;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- Línea de tiempo ---------- */

.jan-linea { padding-inline: var(--edge); }

.jan-linea ol { margin: 18px 0 0; padding: 0; list-style: none; }

.jan-linea li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.jan-linea li:not(:last-child) > div { padding-bottom: 22px; }

/* El punto y la línea que lo une con el siguiente hito. El último no lleva
   línea: se corta sola porque el pseudo-elemento vive en :not(:last-child). */
.jan-punto {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--wine);
  margin: 6px auto 0;
}

.jan-linea li:not(:last-child) .jan-punto::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 1px;
  height: calc(100% + 100px);
  background: rgba(121, 87, 87, .3);
}

.jan-linea h2 {
  font-family: var(--script);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: var(--wine);
  margin: 0;
}

.jan-linea p { margin: 7px 0 0; font-size: 15.5px; line-height: var(--lh-texto); color: var(--tinta-2); }

/* ---------- Texto largo ---------- */

.jan-texto { padding-inline: var(--edge); }

/* Sin espacio de sección arriba (pedido de Ignacio): este bloque continúa el
   texto que viene justo antes, no abre una sección nueva. Clase repetida
   (0,3,0) porque el RITMO VERTICAL ÚNICO de `components.css` pesa (0,2,1). */
.jan-texto.jan-texto.jan-texto { padding-top: 0; }
.jan-texto p { margin: 0; font-size: 16px; line-height: var(--lh-texto); }
.jan-texto p + p { margin-top: 14px; }

/* ---------- Promesas ---------- */

.jan-promesas { padding-inline: var(--edge); display: flex; flex-direction: column; gap: 11px; }
/* 30px abajo, contra los 20 del ritmo. Ver la nota de `.jan-head`.
   Las tarjetas tienen fondo propio pero el padding va en la SECCIÓN, que no lo
   tiene: estos 30px son espacio en blanco real bajo la última tarjeta. */
.jan-promesas.jan-promesas.jan-promesas { padding-bottom: 30px; }

.jan-promesa {
  background: var(--white);
  color: var(--ink);
  padding: 15px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

.jan-promesa h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.14;
  margin: 0;
}

.jan-promesa p { margin: 6px 0 0; font-size: 15px; line-height: var(--lh-texto); color: var(--tinta-2); }

/* ---------- Testimonios ---------- */

/* La franja de testimonios es `.bk-testi`, en components.css — el mismo
   componente que el home, no una copia con otras medidas. */
/* El ritmo lo pone components.css; acá no va nada. */

/* ---------- FAQ ---------- */

.jan-faq { padding-inline: var(--edge); }
/* 30px arriba y abajo, contra los 20 del ritmo. Ver la nota de `.jan-head`. */
.jan-faq.jan-faq.jan-faq { padding-block: 30px; }
.jan-faq .faq-item:first-of-type { margin-top: 12px; }

/* ---------- Captura del taller ---------- */

/* 30px abajo, contra los 20 del ritmo (pedido de Ignacio, 31-08).

   ⚠️ VA ACOTADO A ESTA PÁGINA, al revés que el `padding-top: 30px` del mismo
   bloque, que vive en `components.css` y aplica en las tres superficies. El
   motivo es que acá abajo NO es lo mismo en cada una: en «Sobre mí» la captura
   es una sección más —abajo sigue el cierre en vino— mientras que en el home
   CIERRA la página, y en la colección es la última antes de la barra fija. En
   esas dos el aire contra el footer es `--sec-borde` (40px), que es la ley del
   sitio y no se toca.
   Lo que se ajusta acá es el espacio de sección en esta página, no el
   componente: la caja gris queda idéntica en las tres.

   (0,3,0) explícito y no un empate resuelto por orden de archivo: en la
   colección `:has(+ [data-barra-fija])` también pesa (0,3,0), así que una
   regla global tendría que ganar por estar más abajo, que es justo lo que este
   proyecto ya aprendió a no hacer.) */
.bk-janice.bk-janice > .home-taller { padding-bottom: 30px; }

/* ---------- Cierre ---------- */

/* Banda a sangre: el padding lateral lo pone components.css. */
.jan-cierre { background: var(--wine); color: var(--papel); }

/* 30px arriba, contra los 20 del ritmo. Ver la nota de `.jan-head`.
   ⚠️ La banda tiene fondo vino, así que este padding se pinta DENTRO del color:
   no abre papel entre los testimonios y el cierre, abre aire interior sobre la
   frase. Es lo mismo que ya pasa con el sello, el puente y la franja de
   testimonios. */
.jan-cierre.jan-cierre.jan-cierre { padding-top: 30px; }

.jan-cierre-frase {
  font-family: var(--script);
  font-style: italic;
  font-size: 26px;
  line-height: 1.32;
  color: var(--papel);
  margin: 0;
  text-wrap: pretty;
}

.jan-cierre > p:nth-of-type(2) {
  margin: 11px 0 0;
  font-size: 15.5px;
  line-height: var(--lh-texto);
  color: rgba(251, 247, 242, .88);
}

.jan-cierre .btn--light { margin-top: 16px; }
.jan-cierre .btn--ghost-light { margin-top: 9px; }

/* Secundario sobre fondo vino: declara su propio color, no lo hereda. */
.btn--ghost-light {
  background: transparent;
  border-color: rgba(251, 247, 242, .65);
  color: var(--papel);
  min-height: 48px;
}

.btn--ghost-light:hover { background: rgba(251, 247, 242, .12); color: var(--papel); }

/*
 * La foto es 792x1400, o sea vertical.
 *
 * A sangre completa caía en una caja apaisada —1280x560 en escritorio, 768x400
 * en tablet— y `object-fit: cover` la ampliaba para llenarla: se veía el 25% de
 * la imagen en escritorio y el 29% en tablet, un primerísimo plano con la
 * cabeza cortada. En la página que sostiene la credibilidad de la marca eso
 * sale caro.
 *
 * Desde 640px pasa a ser una placa de retrato centrada, que además es el
 * lenguaje editorial de «La Carta». Así se ve ~70% de la foto original. Debajo
 * de 640 la caja ya es casi vertical y el recorte a sangre funciona bien.
 */
@media (min-width: 640px) {
  /* Clase repetida: la base ahora pesa (0,3,0) para ganarle al ritmo vertical,
     así que el escalón de escritorio tiene que igualarla o no se aplica. */
  .jan-foto.jan-foto.jan-foto {
    height: 700px;
    max-width: 560px;
    margin-inline: auto;
  }

  /* La caja pasa a 560x700, o sea recorta menos: el mismo punto de la foto
     necesita 22%, no 25%. Con el 32% anterior la cabeza salía alta y sobraba
     torso abajo. */
  .jan-foto img { object-position: 50% 22%; }
}

@media (min-width: 900px) {
  .jan-head,
  .jan-intro,
  .jan-linea,
  .jan-texto,
  .jan-promesas,
  .jan-faq { max-width: var(--reading); margin-inline: auto; }

  .jan-cita { max-width: var(--reading); margin-inline: auto; }
  .jan-head h1 { font-size: 54px; }
  .jan-lema { font-size: 26px; }
  .jan-promesas { flex-direction: row; max-width: var(--container); }
  .jan-promesa { flex: 1; }
  .jan-cierre { text-align: center; }
  .jan-cierre .btn { max-width: 420px; margin-inline: auto; }
}