/* ============================================================================
   DOCUMENTO — privacidad, borrado de cuenta y 404.

   La fuente, la paleta, el reinicio y el cuerpo de texto viven en `base.css`,
   que esta hoja da por cargada. Antes esto era `styles.css` y era autónoma —y
   por eso NO tenía `@font-face`: pedía Inter, el navegador no la tenía, y estas
   páginas caían a la fuente del sistema. Llegar aquí desde el pie de la portada
   se sentía como cambiar de sitio.

   Lo que queda aquí es lo que de verdad distingue a un documento: columna
   estrecha, numeración, tablas, listas. La maquetación de documento se conserva
   entera; lo que se unifica es de qué está hecho el texto.

   Y NO se suaviza el contenido: una política de privacidad que suena a folleto
   pierde justo lo que la hace valiosa —que es comprobable—. La voz se consigue
   con la entrada, la tipografía y los títulos, nunca ablandando las cláusulas.
   ========================================================================== */

/* `--col` es el ancho de columna del documento; en `base.css` se llama
   `--col-doc` para no chocar con la retícula ancha de la portada. */
:root { --col: var(--col-doc); }

/* El fondo y el color SÍ son de esta capa: estas páginas siguen el modo claro
   del sistema y la portada es oscura siempre. La línea de lectura va un punto
   más suelta que en la portada — aquí se leen párrafos largos, no titulares. */
html, body { background: var(--bg); }
body { color: var(--ink); line-height: 1.65; }

/* ---------- estructura ------------------------------------------------ */

.shell { max-width: var(--col); margin: 0 auto; padding: 0 1.5rem; }

/* `overflow-x: clip` y no `hidden`: clip NO crea contenedor de scroll, así que no
   rompe `position: sticky` ni el salto a anclas. Red de seguridad para que solo el
   carril de la galería pueda desplazarse en horizontal, nunca la página entera. */
main    { display: block; overflow-x: clip; }
section { padding-block: 3.5rem; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }

.stack       { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.stack > *   { margin: 0; }
.stack--tight{ gap: 0.5rem; }

/* ---------- tipografía ------------------------------------------------ */

h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.022em; line-height: 1.12; }
h1 { font-size: clamp(2.15rem, 6.2vw, 3.35rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3.6vw, 1.95rem); font-weight: 800; line-height: 1.2; }
h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }

p, li { margin: 0; color: var(--muted); max-width: var(--measure); }
p + p { margin-top: 0.9rem; }

.lead {
  font-size: clamp(1.125rem, 2.4vw, 1.3rem);
  color: var(--ink);
  opacity: 0.9;
  line-height: 1.5;
}

strong { color: var(--ink); font-weight: 700; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.45rem; }
ul.plain { list-style: none; padding-left: 0; }

/* Marcador de sección: el desfase del isotipo, en miniatura.
   No es decoración — es la misma traslación paralela de la marca. */
.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent);
  max-width: none;
  /* Sin margin-bottom: dentro de .stack lo da el `gap` y dentro de .doc el
     ritmo vertical. Tenerlo aquí sumaba las dos separaciones. */
}
.eyebrow::before {
  content: ""; flex: none; width: 22px; height: 11px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 14px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 8px 7px / 14px 4px no-repeat;
  opacity: 0.9;
}

/* ---------- cabecera / logotipo --------------------------------------- */

/* La cabecera ENVUELVE en vez de desbordar. Con cuatro enlaces y el logotipo no cabe
   en 375 px, y antes eso obligaba a desplazar la página en horizontal — el peor
   resultado posible en el móvil, que es de donde vendrá la mayoría del tráfico.
   Al envolver, la navegación baja a su propia línea y ocupa el ancho completo:
   sin menú desplegable, sin JavaScript y sin esconder nada. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem; padding-block: 1.6rem;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.035em;
  color: var(--ink); text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark .dot { color: var(--accent); }

.mark { flex: none; width: 1.55em; height: 1.55em; overflow: visible; }
.mark rect { fill: var(--accent); }

/* Las barras nacen superpuestas y se trasladan en paralelo hasta su desfase
   (mismo gesto que el splash de la app, ~560ms). */
@keyframes slide-right { from { transform: translateX(6.25px); } to { transform: translateX(0); } }
@keyframes slide-left  { from { transform: translateX(-6.25px); } to { transform: translateX(0); } }
.mark--animate .bar-top { animation: slide-right 560ms cubic-bezier(0.65, 0, 0.35, 1) both; }
.mark--animate .bar-bot { animation: slide-left  560ms cubic-bezier(0.65, 0, 0.35, 1) both; }

/* `flex: 1` la empuja a una línea propia en cuanto no cabe junto al logotipo, y
   `row-gap` evita que los enlaces se peguen si llegaran a envolver entre ellos. */
.topbar nav {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.35rem;
  font-size: 0.9375rem; font-weight: 600;
}
@media (max-width: 30rem) {
  .topbar nav { flex-basis: 100%; gap: 0.35rem 1.1rem; font-size: 0.875rem; }
}
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }

/* ---------- hero ------------------------------------------------------ */

.hero { padding-block: 3.5rem 4rem; }
.hero .mark { width: 3.4rem; height: 3.4rem; margin-bottom: 0.9rem; }

.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent-dim); color: var(--accent);
  border-radius: 999px; padding: 0.35rem 0.85rem;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em;
  max-width: none;
}

/* ---------- tarjetas -------------------------------------------------- */

.cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  background: var(--bg-elev); border-radius: var(--r);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.card p { max-width: none; font-size: 0.9375rem; }

/* Listas con marcador de dos barras (garantías y límites).
   El marcador va POSICIONADO EN ABSOLUTO, no como celda de un grid: si el <li>
   fuera grid, cada <strong> del texto se convertiría en su propio ítem de la
   cuadrícula y caería en la columna del marcador. El contenido queda inline. */
.claims, .limits { list-style: none; padding: 0; gap: 0.9rem; }
.claims li, .limits li {
  position: relative;
  padding-left: 1.95rem;
  max-width: var(--measure);
}
.claims li::before, .limits li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 1.15rem; height: 0.5rem;
}

/* Garantías verificadas. */
.claims li::before {
  background:
    linear-gradient(var(--jade), var(--jade)) 0 0 / 0.72rem 0.19rem no-repeat,
    linear-gradient(var(--jade), var(--jade)) 0.43rem 0.31rem / 0.72rem 0.19rem no-repeat;
}

/* Los límites declarados NO se esconden: mismo peso visual que las garantías. */
.limits li::before {
  background:
    linear-gradient(var(--amber), var(--amber)) 0 0 / 0.72rem 0.19rem no-repeat,
    linear-gradient(var(--amber), var(--amber)) 0.43rem 0.31rem / 0.72rem 0.19rem no-repeat;
}

/* ---------- documento legal ------------------------------------------- */

/* Ritmo vertical UNIFORME: todo hermano recibe separación, sin depender de
   reglas `+` por pareja (que dejaban sin espacio a h1+p, ul+p, .actions+p…). */
.doc { padding-block: 2rem 1rem; }
.doc > * + *  { margin-top: 1.05rem; }
.doc > h1     { margin-top: 0.85rem; }
.doc > h2     { margin-top: 3rem; }
.doc > h3     { margin-top: 2.1rem; }
.doc > h2 + p, .doc > h2 + ul, .doc > h2 + ol,
.doc > h3 + p, .doc > h3 + ul, .doc > h3 + ol { margin-top: 0.75rem; }
/* LA ENTRADA — una frase de Katero antes del aparato legal.
   Estas páginas abrían con «Última actualización · Responsable · Contacto»: la
   convención legal, y también el momento en que el documento dejaba de sonar a
   producto. La entrada no sustituye nada, precede; y los metadatos se quedan
   donde estaban, cumpliendo su función, pero ya no son lo primero que se lee.
   La frase no ablanda ninguna cláusula: dice lo mismo que el §1, arriba. */
.doc .entrada {
  margin-top: 1.1rem; max-width: var(--measure);
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.3;
  color: var(--ink); text-wrap: balance;
}
.doc .entrada span { display: inline-block; margin-top: .45rem; font-size: 1rem; font-weight: 450; color: var(--muted); }

.doc .meta { font-size: 0.875rem; margin-top: 1.2rem; }

/* El rótulo de la derecha de la cabecera, igual que en la portada. Antes había
   un enlace «Inicio» que llevaba al mismo sitio que el wordmark: dos enlaces al
   mismo destino y dos cabeceras distintas para el mismo sitio. */
.topbar .rotulo-top {
  font-size: .7rem; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0;
}

.table-wrap { overflow-x: auto; margin-top: 1rem; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
th { color: var(--ink); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }

.callout {
  background: var(--bg-elev); border-radius: var(--r);
  padding: 1.15rem 1.35rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.callout p, .callout li { max-width: none; font-size: 0.9375rem; }
.callout--accent { background: var(--accent-dim); }

/* ---------- acciones -------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 999px; padding: 0.7rem 1.35rem;
  font-size: 0.9375rem; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; transition: opacity 120ms ease;
}
.btn:hover { text-decoration: none; opacity: 0.87; }
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--ghost   { border-color: var(--line); color: var(--ink); }

/* Mismo motivo que .claims: marcador absoluto para no romper el texto inline. */
.steps { counter-reset: step; list-style: none; padding: 0; gap: 1rem; }
.steps li { position: relative; padding-left: 2.5rem; min-height: 1.6rem; max-width: var(--measure); }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0.08em;
  font-size: 0.8125rem; font-weight: 800; line-height: 1.6rem; text-align: center;
  color: var(--accent); background: var(--accent-dim); border-radius: 50%;
  width: 1.6rem; height: 1.6rem;
}

/* ---------- pie ------------------------------------------------------- */

footer.site {
  border-top: 1px solid var(--line);
  padding-block: 2.25rem 3.5rem;
  display: flex; flex-wrap: wrap; gap: 0.85rem 1.5rem;
  align-items: baseline; justify-content: space-between;
  font-size: 0.875rem;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
footer.site a { color: var(--muted); text-decoration: none; font-weight: 600; }
footer.site a:hover { color: var(--ink); }
footer.site p { font-size: 0.875rem; }

/* ---------- preguntas frecuentes ------------------------------------- */
/* Contenido real, no relleno: son las consultas con las que la gente llega
   buscando ("cómo dividir gastos si ganamos distinto"). Van en HTML plano y
   no en un acordeón porque un <details> cerrado se indexa peor y aquí el
   texto ES el activo. */
.faq { display: flex; flex-direction: column; gap: 1.6rem; align-self: stretch; }
.faq article { display: flex; flex-direction: column; gap: 0.45rem; }
.faq h3 { color: var(--ink); }

/* ---------- galería de capturas reales -------------------------------- */
/*
   LAS FUENTES TIENEN DOS PROPORCIONES NATIVAS: 9:16.1 (las cuatro .jpg, 768x1376)
   y 9:20.1 (las cuatro .png, 687x1536). Son teléfonos distintos, no un error.

   Por eso se igualan por ANCHURA y nunca por altura. Igualar por altura hacía que
   las 9:16 salieran un 25% más anchas que las 9:20, y al lado de una pantalla
   alargada eso se lee como "estirada" aunque la proporción sea exacta.

   Con la anchura fijada y `height: auto`, la proporción la calcula el navegador a
   partir de los atributos width/height de cada <img>: es imposible deformarla.
   Las alturas quedan desiguales a propósito — hay teléfonos más largos que otros—
   y ese hueco se deja, que es preferible a recortar o deformar interfaz real.
*/
.gallery { align-self: stretch; }

.shots {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  align-items: flex-start;
  scroll-snap-type: x mandatory;
  /* Sangra hasta el borde de la pantalla para que la primera captura no nazca
     encajonada y la siguiente pueda asomar. */
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
  scroll-padding-inline: 1.5rem;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.shots::-webkit-scrollbar { display: none; }

.shots figure {
  flex: none;
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  /* Anchura de teléfono, no "lo que quepa": una captura no debe ensancharse solo
     porque haya sitio. En móvil deja asomar la siguiente. */
  width: min(74vw, 17.5rem);
}

/* Las seis capturas comparten ahora UNA proporción (1080x2340), así que la placa
   coincide exactamente con ellas y no queda paspartú: las tarjetas son idénticas y
   las capturas las llenan por completo.

   La caja se mantiene, y no es decorativa: fija la proporción antes de que la imagen
   cargue, así que la página no da el salto de maquetación al aparecer. `contain` se
   conserva como red de seguridad — si algún día entra una captura con otro encuadre,
   se verá con margen en lugar de deformada o recortada. */
.shots picture {
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 2340;
  background: var(--bg-elev);
  border-radius: 18px;
  overflow: hidden;
}

.shots img {
  display: block;
  width: 100%;
  /* `contain` conserva la proporción NATIVA de cada captura dentro de la placa. */
  height: 100%;
  object-fit: contain;   /* encaja entera; nunca recorta ni estira */
}

/* El pie sigue la anchura de SU captura, nunca se extiende bajo las vecinas. */
.shots figcaption {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
  max-width: 100%;
}

@media (min-width: 48rem) {
  .shots figure { width: 17.5rem; }  /* 280px: ancho de teléfono real */
  .shots { gap: 1.5rem; }
}

@media (min-width: 64rem) {
  /* Escaparate: algo más ancho que la columna de texto para que quepan TRES
     completas con aire y la cuarta asomando — no las ocho a la vez, que era lo
     que convertía la sección en una tira. No va a sangre completa: así no rompe
     el ancho general de la página ni necesita recortes con `100vw`. */
  .gallery {
    width: 58rem;
    margin-inline: calc(50% - 29rem);
  }
  .shots {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

/* Sin botones y sin JavaScript: la CSP del sitio es `default-src 'none'` y no
   merece la pena abrir `script-src` por dos flechas. El carril es una región
   enfocable, así que con teclado se recorre con las flechas del cursor, y el
   asomo de la siguiente captura ya comunica que hay más. */
.shots:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }