/* ==========================================================================
   KATERO EN LA WEB — v3.
   Dirección: docs/plans/landing-direccion-arte.md + BRAND_IDENTITY.md.

   La narrativa (v3): la página presenta UNA IDEA, no una lista de funciones.
     apertura (el titular que nadie más puede firmar: meses que se cierran)
     → el problema (uno lleva las cuentas) + LA ESCENA (una pregunta de la
       vida respondida por una cifra)
     → la idea (tres decisiones que hicieron nacer Katero)
     → el producto en grande (registrar · plata con nombre)
     → seguridad (antes del clímax: es la duda que trae cualquier visitante)
     → EL CLÍMAX: la revisión del mes — la sección de luz, la más pesada
     → cierre.
   Los gestos de siempre: el desfase, la sección de luz (una vez), la cifra
   habla, el teléfono protagonista.
   ========================================================================== */

/* La fuente, la paleta, el reinicio y el cuerpo de texto viven en `base.css`,
   que esta hoja da por cargada. Aquí queda SOLO la maquetación de la portada. */

html, body { background: var(--obsidiana); color: var(--hueso); }
body { overflow-x: clip; }

.col  { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.leer { max-width: 40rem; }

.rotulo {
  font-size: .7rem; font-weight: 650; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bruma);
}
.rotulo b { color: var(--indigo); font-weight: 650; }

/* ---------- el par desfasado — EL gesto ---------------------------------- */

.duo { display: flex; justify-content: center; align-items: flex-start; gap: clamp(1rem, 3.5vw, 2.5rem); }
.duo figure { width: min(20rem, 43vw); margin: 0; }
.duo figure + figure { margin-top: var(--desfase); }
.duo img { width: 100%; border-radius: clamp(18px, 3vw, 30px); }
.duo img { border: 1px solid var(--velo); }
.duo figcaption { margin-top: .8rem; font-size: .8rem; color: var(--bruma); }

@keyframes traslacion { from { transform: translateY(calc(-1 * var(--desfase))); } to { transform: translateY(0); } }
.duo--nace figure + figure { animation: traslacion 560ms cubic-bezier(0.2, 0, 0, 1) both; animation-delay: 180ms; }


/* ---------- apertura ------------------------------------------------------ */

header.top { padding: 1.5rem 0; }
header.top .col { display: flex; justify-content: space-between; align-items: baseline; }
/* EL ISOTIPO VIAJA CON EL NOMBRE. La portada llevaba solo la palabra y las
   páginas legales el par de barras delante: dos marcas para el mismo sitio. Las
   proporciones del isotipo son las del favicon y no se tocan (x17/y31.5 y
   x29.5/y52.5, rx 3.2): son el gesto del desfase, no un adorno. */
.wordmark {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; text-decoration: none;
}
.wordmark i { font-style: normal; color: var(--indigo); }
.mark { flex: none; width: 1.35em; height: 1.35em; }
.mark rect { fill: var(--indigo); }   /* las dos barras, como el favicon y como las legales */
header.top .rotulo { letter-spacing: .14em; }

/* El producto invade el hero: los teléfonos van GRANDES, la vista llega a
   ellos antes que al texto, y el par cruza la frontera hacia la siguiente
   sección (margen negativo + z-index) — el gesto atrevido de la página. */
.apertura { padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(2.5rem, 6vh, 4rem); }
.apertura .col { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 56rem) { .apertura .col { grid-template-columns: 1fr; } }
.apertura h1 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  font-weight: 880; letter-spacing: -.034em; line-height: 1.06; text-wrap: balance;
}
.apertura h1 em { font-style: normal; color: var(--indigo); }
.apertura .sub { margin-top: 1.4rem; color: var(--bruma); font-size: clamp(1.05rem, 2.2vw, 1.2rem); max-width: 30rem; }
.apertura .sub strong { color: var(--hueso); font-weight: 600; }
.cta {
  display: inline-block; margin-top: 2rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta); background: var(--indigo); border-radius: 999px; padding: .6rem 1.35rem;
}
/* MIENTRAS NO HAYA FICHA, EL DE ARRIBA NO ES UN BOTÓN.
   «Próximamente en Google Play» aparecía dos veces con forma de botón y ninguna
   respondía. Un elemento con forma de botón que no hace nada enseña a desconfiar
   del resto de la página, y encima ocupa el sitio del único gesto que la landing
   quiere provocar. El de la apertura pasa a rótulo —mismo texto, sin cápsula— y
   la cápsula se reserva para el cierre, que es donde el gesto tiene sentido.
   Cuando exista la ficha, los dos vuelven a ser botones y enlazan. */
.cta--rotulo {
  background: none; padding: 0; border-radius: 0;
  color: var(--bruma);
}

/* EL PAR YA NO CRUZA A LA SECCIÓN SIGUIENTE, y conviene decir por qué se
   abandona un gesto que era deliberado.
   El cruce se hacía con un margen inferior negativo en `.escena`, que recorta
   la altura de la sección por abajo. Pero el pie de foto es el ÚLTIMO hijo de
   `.escena`, así que lo que se salía no eran los teléfonos: era el texto. «Dos
   teléfonos, un solo espacio» aterrizaba sobre el fondo de la sección de abajo,
   como si perteneciera a otra cosa. Y no hay forma de que el cruce se lleve
   solo a los teléfonos mientras el pie viva dentro del mismo bloque.
   Entre el gesto y que el pie esté donde debe, manda lo segundo: un pie de foto
   flotando en la sección equivocada se lee como un fallo, y un fallo cuesta más
   que lo que aporta el atrevimiento. */
.apertura .escena { position: relative; z-index: 2; }
.apertura .duo figure { width: min(22rem, 42vw); }
.apertura .duo img { box-shadow: 0 46px 130px -48px rgba(125, 123, 245, .45); }
.apertura .pie { text-align: center; margin-top: 1.4rem; font-size: .85rem; color: var(--bruma); }
/* «Así se ve Katero hoy»: el producto EXISTE, y con un CTA que dice «próximamente» eso no se da por
   sabido. Va más tenue que la línea narrativa porque es un dato, no una promesa. */
.apertura .pie span { color: #55566B; }

/* ---------- el problema + la escena --------------------------------------- */

/* SIN BORDE ARRIBA: la línea se dibujaba POR ENCIMA de los teléfonos que
   cruzan, y una raya de un píxel atravesando el producto se lee como un fallo
   de maquetación, no como una separación. El cambio de fondo ya separa las dos
   secciones, que es para lo que estaba la línea. */
/* Sin borde arriba: el cambio de fondo ya separa, y la línea sobraba desde que
   la sección de arriba dejó de invadir esta. El relleno superior vuelve a ser el
   de una sección normal — el hueco grande existía para dejar sitio al cruce. */
.pregunta { background: var(--tinta); border-bottom: 1px solid var(--velo); padding: clamp(4.5rem, 11vh, 7.5rem) 0 clamp(4rem, 11vh, 7rem); }
.pregunta p.linea {
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  font-weight: 650; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance;
}
.pregunta p.linea + p.linea { margin-top: 1.3rem; }
.pregunta .gris { color: var(--bruma); font-weight: 500; }
.pregunta .giro { color: var(--indigo); }

/* LA ESCENA: una pregunta de la vida, respondida por una cifra.
   No es un chat — es la app contestando. La respuesta lleva el desfase. */
.escena-vida { margin-top: clamp(3.5rem, 9vh, 5.5rem); border-top: 1px solid var(--velo); padding-top: clamp(2.5rem, 6vh, 4rem); }
.escena-vida .q {
  font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 550; color: var(--bruma);
  letter-spacing: -.015em;
}
.escena-vida .respuesta { margin-top: 1.8rem; margin-left: var(--desfase); }
.escena-vida .de-donde { font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--bruma); }
.escena-vida .monto {
  font-size: clamp(3rem, 10vw, 6rem); font-weight: 900; letter-spacing: -.04em;
  line-height: 1.05; color: var(--indigo);
}
.escena-vida .si { margin-top: .6rem; font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 700; }

/* ---------- la idea: tres decisiones como MANIFIESTOS --------------------- */
/* Cada decisión ocupa casi una pantalla: una frase enorme, muchísimo aire.
   Aquí vive la identidad — se lee despacio a propósito. La numeración es
   real: son decisiones enumeradas, en orden. */

.idea { padding: clamp(3.5rem, 9vh, 6rem) 0 0; }
.idea h2 { margin-top: .9rem; font-size: clamp(1.8rem, 4.8vw, 2.7rem); font-weight: 850; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.manifiesto {
  min-height: min(85vh, 44rem);
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: clamp(3rem, 8vh, 5rem) 0;
  border-top: 1px solid var(--velo);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.manifiesto + .manifiesto { margin-top: 0; }
.manifiesto .rotulo { letter-spacing: .22em; }
.manifiesto h3 {
  margin-top: 1.4rem;
  font-size: clamp(2.2rem, 7.4vw, 4.6rem);
  font-weight: 890; letter-spacing: -.036em; line-height: 1.04;
  text-wrap: balance; max-width: 17ch;
}
.manifiesto p { margin-top: 1.7rem; color: var(--bruma); max-width: 30rem; font-size: 1.05rem; }
.manifiesto p strong { color: var(--hueso); font-weight: 600; }

/* EN MÓVIL EL AIRE DEJA DE SER INTENCIÓN Y PASA A SER VACÍO.
   A pantalla completa, entre la Decisión 01 y la 02 se recorrían casi dos alturas de pantalla sin
   nada — y una página que no dice nada durante dos scrolls parece rota, no premium. Aquí el bloque
   se ajusta a su contenido con aire generoso pero finito: los tres golpes caben casi seguidos y el
   paralelismo, que es lo que hace que se lean como tres decisiones, POR FIN SE VE.

   Y el párrafo se alinea a la izquierda. El título sí se lee de golpe y sigue centrado; un párrafo
   de cuatro líneas no, y el ojo necesita una columna (CANON_VISUAL §6). Centrarlo en 390 px deja
   los dos bordes irregulares y cansa. */
@media (max-width: 40rem) {
  .manifiesto {
    min-height: 0;
    padding: clamp(3rem, 9vh, 4.5rem) 0;
    justify-items: stretch;
  }
  /* Dos alineaciones, no tres: el rótulo pertenece al bloque de display y se centra con el título;
     solo el párrafo se va a la izquierda. Al estirar los hijos, el rótulo se quedaba a la izquierda
     por su cuenta y el bloque pasaba a tener tres ejes distintos, que es peor que el problema. */
  .manifiesto .rotulo { text-align: center; }
  .manifiesto h3 { max-width: none; }
  .manifiesto p { text-align: left; max-width: none; }
}

/* ---------- producto ------------------------------------------------------ */

.momento { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.momento .col { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.momento.inv .col { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
.momento.inv .texto { order: 2; }
@media (max-width: 52rem) {
  .momento .col, .momento.inv .col { grid-template-columns: 1fr; }
  .momento.inv .texto { order: 0; }
}
.momento h2 { margin-top: .9rem; font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 830; letter-spacing: -.028em; line-height: 1.1; text-wrap: balance; }
.momento .texto p { margin-top: 1rem; color: var(--bruma); max-width: 28rem; }
.momento .texto strong { color: var(--hueso); font-weight: 600; }

.cifra { margin-top: 1.8rem; border-left: 2px solid var(--indigo); padding-left: 1.1rem; }
.cifra .contexto { font-size: .74rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--bruma); }
.cifra .monto { font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 850; letter-spacing: -.02em; line-height: 1.25; }
.cifra .monto b { color: var(--indigo); font-weight: 850; }

.momento figure.solo { width: min(22rem, 84vw); margin: 0 auto; }
.momento figure.solo img { width: 100%; border-radius: clamp(18px, 3vw, 30px); }
.momento figure.solo img { border: 1px solid var(--velo); }
.momento figure.solo figcaption { margin-top: .8rem; font-size: .8rem; color: var(--bruma); text-align: center; }

.banda { border-block: 1px solid var(--velo); padding: 1.6rem 0; }
.banda .col { display: flex; flex-wrap: wrap; gap: .8rem 2.5rem; align-items: baseline; }
.banda p { font-size: 1rem; color: var(--bruma); }
.banda p strong { color: var(--hueso); font-weight: 600; }
.banda .estado { font-size: .72rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.banda .pagado { color: var(--jade); }
.banda .pendiente { color: #CBA34E; }

/* ---------- seguridad (antes del clímax) ---------------------------------- */

/* Condensada a tres claims y un enlace: la evidencia completa vive en la
   política. El titular memorable de la página trabaja aquí. */
.datos { background: var(--tinta); border-block: 1px solid var(--velo); padding: clamp(3.5rem, 9vh, 6rem) 0; }
.datos .col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 56rem) { .datos .col { grid-template-columns: 1fr; } }
.datos h2 { margin-top: .9rem; font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 860; letter-spacing: -.032em; line-height: 1.08; text-wrap: balance; }
.datos h2 span { color: var(--bruma); }
.claves { margin-top: 1.8rem; border-top: 1px solid var(--velo); max-width: 34rem; }
.claves > div { border-bottom: 1px solid var(--velo); padding: 1.15rem 0; }
.claves h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 760; letter-spacing: -.015em; }
.claves p { margin-top: .3rem; color: var(--bruma); font-size: .95rem; }
/* LA FRASE DE 12 PALABRAS, SUELTA. Era el tercer claim con la misma forma que los
   otros dos —titular en negrita y párrafo—, y tres bloques idénticos seguidos de
   un cuarto párrafo son donde aparece el cansancio, justo antes del clímax. Como
   línea suelta dice lo mismo y además respira: cambia de registro sin perder una
   palabra. */
.suelta {
  margin-top: 1.3rem; max-width: 34rem;
  font-size: clamp(1.02rem, 2.2vw, 1.15rem); font-weight: 620; letter-spacing: -.012em;
  color: var(--hueso);
}
.limites { margin-top: 1.4rem; }
.limites p { font-size: .88rem; color: var(--bruma); max-width: 34rem; }
.limites strong { color: var(--hueso); font-weight: 600; }
.ver {
  display: inline-block; margin-top: 1.6rem;
  border: 1px solid var(--velo); border-radius: 999px; padding: .55rem 1.25rem;
  font-size: .74rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hueso); text-decoration: none;
}
.ver:hover { border-color: var(--indigo); color: var(--indigo); }
.datos aside figure { width: min(17rem, 70vw); margin: 0 auto; }
.datos aside img { width: 100%; border-radius: clamp(16px, 2.5vw, 24px); border: 1px solid var(--velo); }
.datos aside figcaption { margin-top: .7rem; font-size: .8rem; color: var(--bruma); text-align: center; }

/* ---------- EL CLÍMAX: la revisión — la sección de luz -------------------- */
/* La sección más pesada de la página: más alta, más grande, con el acuerdo
   como objeto tangible. El pago de la promesa «el mes termina». */

.ritual { background: var(--hueso); color: var(--tinta); padding: clamp(5rem, 14vh, 9rem) 0; }
.ritual .rotulo { color: #55566B; }
.ritual .rotulo b { color: var(--indigo-p); }
.ritual h2 {
  margin-top: 1.1rem;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 890; letter-spacing: -.036em; line-height: 1.02; text-wrap: balance;
}
.ritual .leer p { margin-top: 1.3rem; color: #43454F; font-size: clamp(1.05rem, 2.2vw, 1.2rem); }
.ritual .leer strong { color: var(--tinta); font-weight: 650; }

/* el acuerdo: un objeto, no un párrafo */
.acuerdo {
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  width: fit-content; max-width: 100%;
  border: 1.5px solid var(--tinta); border-radius: 20px;
  padding: 1.3rem 1.8rem;
  box-shadow: 6px 6px 0 rgba(91, 89, 214, .25);
}
.acuerdo .de { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #55566B; }
.acuerdo .que { margin-top: .4rem; font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; }
.acuerdo .que b { color: var(--indigo-p); }

.ritual .sello-mes {
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  font-size: clamp(1.35rem, 3.4vw, 2rem); font-weight: 780; letter-spacing: -.022em;
  line-height: 1.25; text-wrap: balance; max-width: 30ch;
}
.ritual .sello-mes span { color: #55566B; }

.ritual .tres { display: flex; gap: clamp(1rem, 3vw, 2.2rem); justify-content: center; margin-top: clamp(3rem, 8vh, 5rem); }
.ritual .tres figure { width: min(17.5rem, 44vw); margin: 0; }
.ritual .tres figure:nth-child(2) { margin-top: var(--desfase); }
.ritual .tres figure:nth-child(3) { margin-top: calc(var(--desfase) * 2); }
.ritual .tres img { width: 100%; border-radius: clamp(16px, 2.5vw, 26px); }
.ritual .tres img { border: 1px solid var(--velo-tinta); box-shadow: 0 28px 70px -34px rgba(14,16,22,.4); }
.ritual .tres figcaption { margin-top: .7rem; font-size: .8rem; color: #55566B; }
/* EN MÓVIL SE APILAN, Y ES LO CONTRARIO DE UN DETALLE.
   A `30vw` cada una medía unos 117 px: dos rectángulos oscuros donde no se leía
   una sola cifra, en la sección que existe justamente para que se lean. Y en el
   dispositivo prioritario. Contradecía además el principio de la dirección de
   arte —el teléfono protagonista, capturas grandes o ninguna—, así que dos
   ilegibles valían menos que una legible.
   El desfase no se pierde: deja de ser vertical y pasa a ser lateral, que
   conserva el gesto del isotipo sin estirar la sección hacia abajo. */
@media (max-width: 40rem) {
  .ritual .tres { flex-direction: column; align-items: center; gap: clamp(1.8rem, 6vw, 2.6rem); }
  .ritual .tres figure { width: min(78vw, 20rem); }
  .ritual .tres figure:nth-child(2) { margin-top: 0; transform: translateX(clamp(.7rem, 3.5vw, 1.5rem)); }
  .ritual .tres figure:nth-child(3) { margin-top: 0; transform: translateX(clamp(1.4rem, 7vw, 3rem)); }
}
.ritual .sorpresa { margin-top: clamp(3rem, 7vh, 4.2rem); border-top: 1px solid var(--velo-tinta); padding-top: 1.6rem; }
.ritual .sorpresa p { color: #43454F; max-width: 36rem; }
.ritual .sorpresa strong { color: var(--tinta); font-weight: 650; }
.ritual .gratis { margin-top: 1.2rem; font-size: .9rem; color: #55566B; }

/* ---------- cierre -------------------------------------------------------- */

.cierre { padding: clamp(4.5rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5rem); text-align: center; }
.cierre h2 { font-size: clamp(2.2rem, 6.6vw, 4rem); font-weight: 890; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
.cierre h2 span { color: var(--indigo); }
.cierre p { margin: 1.4rem auto 0; color: var(--bruma); max-width: 30rem; }
.cierre .negocio { margin-top: 2.6rem; font-size: .85rem; max-width: 28rem; }

footer.site { border-top: 1px solid var(--velo); padding: 2rem 0 3rem; }
/* El pie, centrado: la última línea de la página es una firma, y una firma
   alineada a la izquierda con cuatro elementos sueltos se lee como un menú. */
footer.site .col {
  display: flex; flex-wrap: wrap; gap: .8rem 2rem;
  align-items: center; justify-content: center; text-align: center;
  font-size: .9rem; color: var(--bruma);
}
footer.site .marca { display: inline-flex; align-items: center; gap: .5rem; }
footer.site .marca .mark { width: 1.1em; height: 1.1em; }
footer.site a { color: var(--hueso); font-weight: 600; text-decoration-color: var(--indigo); text-underline-offset: 3px; }