/*
 * Estilo de las páginas PÚBLICAS de cuidiario.com: `/`, `/privacidad` y `/soporte`.
 *
 * ⚠️ No confundir con `base.css`, que es el de las dos páginas de trámite (`/verify-email`
 * y `/i/<token>`). Aquel centra el `body` con flex dentro de una `.card` de 420px: perfecto
 * para resolver un trámite, inservible para una landing o para un texto legal largo. Los dos
 * ficheros están separados a propósito para que tocar esto NUNCA pueda romper los dos enlaces
 * que el backend manda por correo (PLAN-FASE-2.md, paso 3).
 *
 * Fuente de verdad de colores, tipografía, espaciado y formas:
 * `postcare-mobile/src/theme/tokens.ts`. Aquí se repiten a mano — duplicar unas variables es
 * más barato que un `@import` que bloquea el render, y este repo no tiene paso de build.
 *
 * Sobre las fuentes: Plus Jakarta Sans va AUTO-ALOJADA en `/assets/fonts/` (subconjunto
 * latino, ~10 KB por peso), nunca desde el CDN de Google — eso mandaría la IP de cada
 * visitante a un tercero fuera de la UE, y en la propia página de privacidad sería absurdo.
 * Con `font-display: swap` el texto se lee desde el primer instante con la fuente del
 * sistema: si la web no llega, no hay ni un milisegundo de texto invisible.
 */

/* ============================================================
   Fuente de marca — Plus Jakarta Sans (subconjunto latino)
   ============================================================ */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Tokens — copiados de postcare-mobile/src/theme/tokens.ts
   ============================================================ */
:root {
  /* Las cinco de base.css, idénticas */
  --ink: #144c63;
  --ink-soft: #2f5a70;
  --bg: #eaf2f4;
  --card: #ffffff;
  --line: rgba(20, 76, 99, 0.14);

  /* El resto de la paleta de marca (`palette` y `tints` en tokens.ts) */
  --ink-faint: rgba(20, 76, 99, 0.42);
  --line-strong: rgba(20, 76, 99, 0.24);
  --lavender: #cecdf2;
  --mauve: #ae84ab;
  --pink: #edcaea;
  --sky: #cee5f2;
  --sky-mid: #9dd1e5;
  --mint: #d5f0ca;
  --butter: #fffabf;
  --peach: #ffe0b0;
  --focus-ring: rgba(157, 209, 229, 0.55);

  /* Rejilla de 4px (`space`) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;

  /* Esquinas (`radius`) — sin ángulos rectos en ninguna parte */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Elevación (`shadow`) — tinte anchor, nunca negro puro */
  --shadow-soft: 0 8px 16px rgba(20, 76, 99, 0.1);
  --shadow-lift: 0 14px 22px rgba(20, 76, 99, 0.16);

  --measure: 66ch; /* ancho de lectura cómodo para los textos largos */
}

/* ============================================================
   Base
   ============================================================ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Que un ancla (#eliminar-cuenta) no deje el título pegado al borde de arriba */
  scroll-padding-top: var(--s6);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  font-size: 16px;
  line-height: 1.625; /* type.body: 16/26 */
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--s5);
}

/* El ancho del `.wrap` es el mismo en cabecera, contenido y pie: así todo comparte el
   mismo margen izquierdo. Los textos largos NO se estrechan con un wrap más pequeño
   (eso los centraría y los descolocaría respecto al logo), sino con `--measure` en el
   propio bloque de texto. */

/* Tipografía — rampa de `type` en tokens.ts */
h1,
h2,
h3 {
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.28px;
}

h2 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
}

h3 {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
}

p {
  margin: 0 0 var(--s4);
}

a {
  color: var(--ink);
  text-decoration-color: var(--sky-mid);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--ink);
}

/* Foco visible y con el color de la app (`colors.focusRing`). No se quita nunca:
   estas páginas se recorren con teclado más de lo que parece. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Cabecera y pie — `app/components/`
   ============================================================ */
.site-head {
  padding: var(--s5) 0;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.brand {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: var(--s5);
  font-size: 15px;
  font-weight: 600;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--ink);
}

.site-foot {
  margin-top: var(--s16);
  padding: var(--s8) 0 var(--s12);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
}

.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  align-items: baseline;
  justify-content: space-between;
}

.site-foot p {
  margin: 0;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
}

/* ============================================================
   Piezas — traducción a HTML de los componentes de `src/components/ui`
   ============================================================ */

/* Card.tsx: superficie blanca, 24px de esquina, sombra con tinte anchor */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-soft);
}

.card.tone-sky {
  background: var(--sky);
  box-shadow: none;
}
.card.tone-lavender {
  background: var(--lavender);
  box-shadow: none;
}
.card.tone-mint {
  background: var(--mint);
  box-shadow: none;
}
.card.tone-pink {
  background: var(--pink);
  box-shadow: none;
}
.card.tone-butter {
  background: var(--butter);
  box-shadow: none;
}
.card.tone-peach {
  background: var(--peach);
  box-shadow: none;
}

/* Button.tsx: relleno anchor, 16px de esquina, 48px de alto mínimo */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s3) var(--s6);
  border-radius: var(--r-md);
  background: var(--ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 150ms ease;
}

.btn:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: none;
}

/* Chip.tsx: etiqueta pequeña sobre pastel. `type.caption` en mayúsculas. */
.chip {
  display: inline-block;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  background: var(--sky);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26px;
  text-transform: uppercase;
}

/* Solo para lectores de pantalla (p. ej. el <caption> de la tabla de encargados) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.26px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s2);
}

/* ============================================================
   Landing
   ============================================================ */
/* ⚠️ Estos bloques SON el `.wrap` (`class="wrap hero"`), así que el aire vertical se pone
   con `padding-top`/`padding-bottom`, NUNCA con el atajo `padding`: el atajo pondría a
   cero el padding horizontal del `.wrap` y el texto dejaría de cuadrar con el logo de la
   cabecera. En móvil, además, se pegaría al borde de la pantalla. */
.hero {
  padding-top: var(--s12);
  padding-bottom: var(--s8);
}

.hero h1 {
  font-size: 38px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.38px;
  max-width: 15ch;
}

.hero .lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: var(--s5) 0 var(--s6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}

/* Dos columnas en pantalla ancha y una en móvil. El `minmax` está calculado para que
   NUNCA salgan tres: con cuatro tarjetas, tres columnas dejan una huérfana debajo. */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s4);
  padding: var(--s6) 0;
  list-style: none;
  margin: 0;
}

.features h2 {
  font-size: 17px;
  margin: 0 0 var(--s2);
}

.features p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.section {
  padding-top: var(--s12);
}

.section > h2 {
  margin-bottom: var(--s4);
}

.section .lead {
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* La línea de «no es un dispositivo sanitario»: se lee, no es letra pequeña */
.disclaimer {
  margin-top: var(--s8);
  border-left: 4px solid var(--mauve);
  padding: var(--s2) 0 var(--s2) var(--s5);
  color: var(--ink-soft);
  max-width: var(--measure);
}

.disclaimer strong {
  color: var(--ink);
}

/* ============================================================
   Páginas de texto — /privacidad y /soporte
   ============================================================ */
/* Igual que `.hero`: `.doc` es el propio `.wrap`, así que nada de atajo `padding`. */
.doc {
  padding-top: var(--s8);
}

/* Ancho de lectura, sin centrar: el texto arranca donde arranca el logo */
.doc > * {
  max-width: var(--measure);
}

.doc h1 {
  font-size: 32px;
  letter-spacing: -0.32px;
}

.doc .updated {
  color: var(--ink-faint);
  font-size: 14px;
  margin: var(--s2) 0 var(--s6);
}

.doc section {
  margin-bottom: var(--s8);
}

.doc h2 {
  margin-bottom: var(--s3);
}

.doc h3 {
  margin: var(--s6) 0 var(--s2);
}

.doc ul {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
}

.doc li {
  margin-bottom: var(--s2);
}

.doc li::marker {
  color: var(--mauve);
}

/* Índice de la página */
.toc {
  margin: 0 0 var(--s8);
}

.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
}

.toc a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Preguntas frecuentes */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s4) var(--s8) var(--s4) 0;
  font-size: 17px;
  font-weight: 600;
  position: relative;
  min-height: 44px; /* `touchMin` de tokens.ts */
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: var(--s3);
  font-size: 24px;
  font-weight: 400;
  color: var(--mauve);
}

.faq details[open] summary::after {
  content: '−';
}

.faq details > *:not(summary) {
  color: var(--ink-soft);
}

.faq details > *:last-child {
  margin-bottom: var(--s4);
}

/* Tabla de encargados del tratamiento. En pantalla ancha es una tabla normal; en móvil
   se convierte en tarjetas apiladas (ver el @media del final). No se deja con desplazamiento
   lateral a propósito: media tabla escondida detrás de un gesto que hay que adivinar es,
   en la práctica, información que no se lee. */
.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 480px;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.26px;
  text-transform: uppercase;
  background: var(--card);
}

tr:last-child td {
  border-bottom: 0;
}

/* Datos que faltan por decidir. Se ven a propósito: un hueco marcado es honesto,
   un dato inventado en una política de privacidad no lo es.
   ⚠️ Buscar «PENDIENTE_» en todo el repo antes de la primera subida a las tiendas. */
.pendiente {
  background: var(--butter);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-weight: 600;
  white-space: nowrap;
}

/* Aviso de borrador. Bloque entero para borrar cuando cierre la revisión legal. */
.aviso {
  background: var(--peach);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s8);
  font-size: 15px;
  max-width: var(--measure);
}

.aviso p:last-child {
  margin-bottom: 0;
}

/* Bloque de contacto destacado */
.contacto {
  background: var(--card);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-soft);
  max-width: var(--measure);
}

.contacto p:last-child {
  margin-bottom: 0;
}

.mail {
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   404 — lo que Cloudflare Pages sirve ante una ruta que no existe
   ============================================================ */
/* La genera `app/not-found.tsx` y sale como `404.html` en el artefacto; no es un
   fichero de `public/`. Usa el mismo `.doc` que /privacidad y /soporte, pero esas
   dos separan el h1 del texto con `.updated` y aquí no hay fecha que enseñar. */
.doc .intro {
  margin-top: var(--s5);
  color: var(--ink-soft);
}

/* ============================================================
   Móvil
   ============================================================ */
@media (max-width: 640px) {
  .hero {
    padding-top: var(--s8);
  }

  .hero h1 {
    font-size: 32px;
  }

  .doc h1 {
    font-size: 28px;
  }

  .site-foot .wrap {
    flex-direction: column;
  }

  /* La tabla de encargados, en tarjetas: cada fila con sus etiquetas delante. El
     `data-label` de cada celda lleva el título de la columna (ver privacidad/index.html). */
  .table-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  table {
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody,
  tr,
  td {
    display: block;
  }

  tr {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--s4);
    margin-bottom: var(--s3);
  }

  td {
    border-bottom: 0;
    padding: 0 0 var(--s3);
  }

  tr td:last-child {
    padding-bottom: 0;
  }

  td::before {
    content: attr(data-label);
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.26px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--s1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }
}