/* ═══════════════════════════════════════════════════════════════
   SNUGPORT — landing (snugport.app)

   Misma disciplina que el panel: sin build, sin dependencias, sin CDN.
   Todo asset vive en el repo.

   LOS COLORES NO SE INVENTAN AQUÍ. Salen medidos del panel: el modo claro
   es su tema Daybreak y el oscuro su Nightwatch, con los contrastes ya
   verificados contra AA en su día. Si hay que tocar uno, se mira antes
   `css/styles.css` del panel — no al revés.

   UN SOLO ASPECTO, EN DOS LUCES. El panel tiene cuatro temas porque es un
   sitio donde se vive; una landing se lee una vez. Va claro por defecto
   (que es el defecto del panel) y oscuro si el sistema lo pide.

   EL AZUL SÍ ENTRA AQUÍ, y solo aquí: la decisión de marca del 2026-07-27
   lo retiró de la app —dos colores de "esto se toca" emborronan el
   acento— y lo reservó para la landing. Se usa como AGUA (fondos), nunca
   como enlace. El acento es la lámpara, no el mar.

   ── LA COMPOSICIÓN, EN UNA FRASE ────────────────────────────────
   El agua arriba y abajo, el muelle en medio. El mástil y el héroe van
   sobre Deepwater; el contenido sube a la luz; el cierre y el pie vuelven
   al agua. En modo oscuro las tres zonas son casi una sola noche, que es
   justo lo que tiene que pasar.

   Todo lo que va sobre agua se marca con `.on-water` y hereda de ahí. No
   hay una sola regla que mire `prefers-color-scheme` fuera del bloque de
   tokens: los componentes se pintan SIEMPRE con variables, que es lo que
   impide que un modo se quede a medias.
   ═══════════════════════════════════════════════════════════════ */

/* Outfit variable, local (OFL en fonts/). El eje wght trae 100 por
   defecto: sin este `font-weight: 100 900` el texto sale en Thin. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --bg: #eff1f5;
  --bg-raised: #ffffff;
  --bg-sunken: #e6e9f0;          /* la banda hundida, entre bg y el borde */
  --bg-tint: rgba(148, 48, 179, 0.05);

  /* El agua. Los cuatro valores son de Nightwatch y NO cambian con el
     modo: el mar es el mismo de día y de noche, y por eso las zonas
     `.on-water` se ven igual en las dos luces. */
  --water: #0c1f30;              /* Deepwater: la base oscura de la marca */
  --water-deep: #061420;         /* el fondo del degradado, más hondo */
  --water-raised: #12293c;       /* la superficie que flota sobre el agua */
  --water-border: rgba(209, 218, 230, 0.14);
  --on-water: #d1dae6;           /* 12,86:1 sobre el agua */
  --on-water-strong: #f5e0dc;
  --on-water-dim: #91a3b8;       /* 6,43:1 — el secundario del pie */
  --accent-on-water: #daa8ec;    /* 8,86:1 — la lámpara. El acento claro
                                    (#9430b3) sobre el agua sería morado
                                    sobre azul marino: se apaga. */

  --text: #4c4f69;
  --text-strong: #0c1f30;
  --text-muted: #53566f;         /* 5,98:1 — medido en el panel */

  --accent: #9430b3;             /* Lamplight */
  --accent-hover: #7c1499;
  --on-accent: #ffffff;          /* 6,30:1 sobre el acento */
  --accent-soft: rgba(148, 48, 179, 0.08);

  --border: #dce0e8;
  --shadow-card: 0 1px 3px rgba(76, 79, 105, 0.09), 0 4px 14px rgba(76, 79, 105, 0.07);
  --shadow-pop: 0 8px 28px rgba(76, 79, 105, 0.2);
  /* La sombra del panel que flota sobre el agua. Es la ÚNICA sombra
     grande de la página: si todo flota, no flota nada. */
  --shadow-float: 0 2px 6px rgba(6, 20, 32, 0.4), 0 24px 60px rgba(6, 20, 32, 0.5);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --radius: 8px;                 /* la esquina de la marca, en todo */
  --measure: 64ch;               /* ancho máximo de un párrafo */
  --gap: 24px;
  --section-y: 104px;            /* el aire vertical de una sección */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #0c1f30;
    --bg-raised: #12293c;
    --bg-sunken: #081a29;
    --bg-tint: rgba(218, 168, 236, 0.06);

    /* El agua NO se redefine (ver arriba), salvo el borde, que en modo
       oscuro tiene que separarse de un fondo que ya es agua. */
    --water-border: rgba(209, 218, 230, 0.16);

    --text: #d1dae6;             /* 11,87:1 */
    --text-strong: #f5e0dc;      /* 13,22:1 */
    --text-muted: #a2adbb;       /* 6,74:1 */

    --accent: #daa8ec;
    --accent-hover: #e8c4f4;
    --on-accent: #0c1f30;
    --accent-soft: rgba(218, 168, 236, 0.1);

    --border: #16354c;
    --shadow-card: 0 1px 3px rgba(6, 20, 32, 0.3), 0 4px 14px rgba(6, 20, 32, 0.22);
    --shadow-pop: 0 8px 28px rgba(6, 20, 32, 0.5);
    --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.45);
  }
}

/* ── BASE ──────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* La raíz sube a 17px como en el panel: casi todo mide en rem, así que un
   solo número levanta el cuerpo entero. La escala son SIETE peldaños y no
   hay más — 0.75 · 0.875 · 1 · 1.125 · 1.375 · 1.75 · 2.5 rem. */
html {
  font-size: 17px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* solo `anywhere` reduce además el min-content, que es lo que impide que
     una palabra larga ensanche el contenedor. `break-word` no lo hace. */
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

h1, h2, h3 {
  color: var(--text-strong);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
/* El h1 se queda en el peldaño 7 (2.5rem) porque la escala es la escala.
   La presencia la dan el peso, el tracking cerrado y la medida corta: tres
   líneas apretadas pesan más que una línea enorme y suelta. */
h1 {
  font-size: 2.5rem;
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
h2 { font-size: 1.75rem; letter-spacing: -0.028em; }
h3 { font-size: 1.125rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-water :focus-visible { outline-color: var(--accent-on-water); }

img, svg { max-width: 100%; }

.wrap {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto;
}

.narrow { max-width: 720px; }

section { padding: var(--section-y) 0; }
/* el mástil es pegajoso: sin esto, un salto a #faq deja el título debajo */
[id] { scroll-margin-top: 88px; }

/* Salta al contenido. Vive escondido hasta que el teclado lo pide. */
.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; color: var(--on-accent); }

/* ── SOBRE EL AGUA ─────────────────────────────────────────────── */
/* Una sola clase gobierna las tres zonas oscuras (mástil, héroe, cierre
   y pie). Todo lo de dentro se repinta AQUÍ y no en cada componente: es
   lo que evita tener una variante `-dark` de cada cosa. */

.on-water {
  background: var(--water);
  color: var(--on-water);
}
.on-water h1, .on-water h2, .on-water h3 { color: var(--on-water-strong); }
.on-water a { color: var(--accent-on-water); }
.on-water a:hover { color: var(--on-water-strong); }

/* ── ETIQUETA DE SECCIÓN ───────────────────────────────────────── */
/* El mono del sistema, que no se descarga. Es la segunda voz de la
   página: la del instrumento, frente a la de Outfit. La marquita de
   antes es una lectura de aguja, no un adorno. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: none;
}
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.on-water .eyebrow { color: var(--on-water-dim); }
.on-water .eyebrow::before { background: var(--accent-on-water); }

.lede {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 56ch;
}
.on-water .lede { color: var(--on-water); }

/* ── MÁSTIL ────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--water-border);
  /* OPACO, y probado: con el mástil translúcido lo que se transparenta
     arriba del todo es el fondo CLARO del body, no el héroe, así que la
     barra salía más clara que el agua de debajo y dejaba una costura
     justo en lo primero que se ve. Un desenfoque que nadie nota no vale
     una junta visible. */
  background: var(--water);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 15px 0;
  flex-wrap: wrap;
}

/* El lockup va INLINE y con las tintas reescritas a currentColor, nunca en
   un <img>: un SVG cargado como imagen es otro documento y no hereda el
   `color`, así que el mono saldría negro. El grupo .lw-symbol lleva el
   acento y la palabra sigue al texto. */
/* Va como `a.brand` y no como `.brand` a propósito: `.on-water a` de arriba
   ya es (0,1,1) y le ganaría a una clase sola, así que el wordmark saldría
   malva en vez de la tinta clara. Es la colisión típica de un bloque
   temático que pinta TODOS los enlaces. */
a.brand { display: inline-flex; align-items: center; color: var(--on-water-strong); text-decoration: none; }
a.brand:hover { color: var(--on-water-strong); }
.brand svg { height: 25px; width: auto; display: block; }
.lw-symbol { color: var(--accent-on-water); transition: color 0.2s; }
a.brand:hover .lw-symbol { color: var(--on-water-strong); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.site-nav a {
  color: var(--on-water-dim);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}
.site-nav a:hover { color: var(--on-water-strong); }

/* ── BOTONES ───────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { border-color: var(--border); color: var(--accent); background: transparent; }
.btn-ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }
.btn-lg { padding: 15px 30px; font-size: 1rem; }

/* Sobre el agua el botón se enciende: la lámpara es lo único claro que
   hay en el mar, y el acento oscuro de Daybreak ahí no se vería. */
.on-water .btn-primary { background: var(--accent-on-water); color: var(--water); }
.on-water .btn-primary:hover { background: var(--on-water-strong); color: var(--water); }
.on-water .btn-ghost { border-color: var(--water-border); color: var(--on-water); background: transparent; }
.on-water .btn-ghost:hover { background: rgba(218, 168, 236, 0.1); border-color: var(--accent-on-water); color: var(--on-water-strong); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ── HÉROE ─────────────────────────────────────────────────────── */
/* El agua: el único sitio donde el azul es protagonista. Encima flota el
   panel, y el resplandor de arriba es la lámpara. Un solo foco, muy
   suave: si se ve el degradado, está mal puesto. */

.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 108px;
  background: linear-gradient(180deg, var(--water) 0%, var(--water-deep) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto -10%;
  height: 90%;
  background: radial-gradient(60% 70% at 62% 28%, rgba(218, 168, 236, 0.13), transparent 70%);
  pointer-events: none;
}
/* La línea de agua: el muelle iluminado donde termina el mar y empieza la
   página. Se apaga hacia los bordes para no leerse como un borde. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-on-water) 30%, var(--accent-on-water) 70%, transparent);
  opacity: 0.45;
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  gap: 56px var(--gap);
  grid-template-columns: 1fr;
  align-items: center;
}
/* Sin esto la maqueta no puede encoger por debajo de su min-content y
   ensancha la columna: en el móvil el héroe entero se sale de la caja y
   `overflow: hidden` lo recorta por la derecha. Es la misma guarda que
   llevan el resto de las rejillas de este archivo. */
.hero-grid > * { min-width: 0; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; }
}

.hero h1 { max-width: 15ch; }
.hero .lede { margin-bottom: 32px; }
.hero .fineprint {
  font-size: 0.875rem;
  color: var(--on-water-dim);
  margin: 22px 0 0;
  font-family: var(--mono);
  letter-spacing: 0.01em;
}

/* La entrada: un solo gesto orquestado, escalonado de arriba abajo. Nada
   más se mueve en toda la página. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
.hero-copy > :nth-child(1) { animation-delay: 0.02s; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.14s; }
.hero-copy > :nth-child(4) { animation-delay: 0.2s; }
.hero-copy > :nth-child(5) { animation-delay: 0.26s; }
.hero-figure { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.18s backwards; }

/* ── EL PANEL QUE FLOTA ────────────────────────────────────────── */
/* Es el producto, dibujado con HTML y CSS en vez de una captura: no hay
   PNG que se quede viejo, pesa cero y se ve nítido en cualquier pantalla.
   Va SIEMPRE en Nightwatch porque siempre está sobre el agua.
   Los números son de ejemplo — es una maqueta, no un dato real. */

.panel-mock {
  background: var(--water-raised);
  border: 1px solid var(--water-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  /* el filo de luz de arriba, que es lo que le da el grosor */
  background-image: linear-gradient(180deg, rgba(245, 224, 220, 0.06), transparent 120px);
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--water-border);
}
.mock-bar .lw-symbol { color: var(--accent-on-water); }
.mock-bar svg.mock-mark { height: 17px; width: auto; display: block; flex: 0 0 auto; }
.mock-tabs { display: flex; gap: 4px; margin-left: 4px; overflow: hidden; }
.mock-tabs .sec-icon {
  width: 15px; height: 15px;
  margin: 0;
  color: var(--on-water-dim);
  opacity: 0.65;
}
.mock-tab {
  display: flex;
  padding: 6px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.mock-tab.is-on { background: rgba(218, 168, 236, 0.16); }
.mock-tab.is-on .sec-icon { color: var(--accent-on-water); opacity: 1; }
.mock-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--on-water-dim);
  flex: 0 0 auto;
}
.mock-live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-on-water);
}

.mock-body {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  padding: 20px 18px 18px;
}
.mock-body > * { min-width: 0; }
@media (min-width: 520px) {
  .mock-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; }
}

.mock-label {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-water-dim);
  max-width: none;
}
.mock-time {
  margin: 0 0 4px;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-water-strong);
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.mock-project {
  margin: 0 0 16px;
  font-size: 0.875rem;
  color: var(--on-water);
  max-width: none;
}
.mock-goal {
  height: 6px;
  border-radius: 999px;
  background: rgba(209, 218, 230, 0.14);
  overflow: hidden;
}
.mock-goal span {
  display: block;
  height: 100%;
  width: 71%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(218, 168, 236, 0.55), var(--accent-on-water));
}
.mock-goal-text {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--on-water-dim);
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.mock-stats { display: grid; gap: 8px; align-content: start; }
.mock-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(209, 218, 230, 0.05);
}
.mock-stat-k {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--on-water-dim);
}
.mock-stat-v {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-water-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mock-stat-v.is-late { color: var(--accent-on-water); }

.mock-list {
  list-style: none;
  margin: 0;
  padding: 4px 18px 18px;
}
.mock-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--water-border);
  font-size: 0.875rem;
}
.mock-list .mock-when {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--on-water-dim);
  font-variant-numeric: tabular-nums;
}

/* ── LAS TRECE SECCIONES ───────────────────────────────────────── */
/* Un tablero, no una lista: diez encendidas y tres apagadas dicen de un
   vistazo lo que el párrafo tarda dos frases en explicar — que el panel
   se enciende a trozos y los eliges tú.
   Los iconos son los MISMOS trece del panel, copiados de su SECTIONS: no
   se dibujan otros. Geometría pelada, sin pintura propia — todo el trazo
   lo pone .sec-icon, igual que allí. */

.sec-icon {
  width: 20px;
  height: 20px;
  display: block;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.board {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}
/* CINCO columnas fijas en pantalla ancha, y no es capricho: con cinco, las
   diez encendidas llenan dos filas exactas y las tres apagadas caen solas
   en la tercera. La rejilla acaba diciendo lo mismo que el párrafo. */
@media (min-width: 980px) {
  .board { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.board > * { min-width: 0; }

.tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-strong);
  transition: border-color 0.15s, transform 0.15s;
}
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
/* Las tres que vienen apagadas: mismo dibujo, sin encender. El borde de
   trazos es la diferencia que se lee sin leyenda. */
.tile.is-off {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted);
  font-weight: 400;
}
.tile.is-off .sec-icon { color: var(--text-muted); }

.board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 20px 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: none;
}
.board-legend span { display: flex; align-items: center; gap: 8px; }
.board-legend span::before {
  content: "";
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  flex: 0 0 auto;
}
.board-legend span.off::before { background: transparent; border-style: dashed; }

/* ── LAS TRES PREGUNTAS ────────────────────────────────────────── */
/* Sin tarjetas: tres columnas separadas por un pelo de línea. La pregunta
   va en el acento porque es lo único que el lector está buscando. */

.band { background: var(--bg-sunken); }

.qa-row {
  display: grid;
  gap: 36px var(--gap);
  grid-template-columns: 1fr;
  margin-top: 44px;
}
@media (min-width: 800px) {
  .qa-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .qa { padding: 0 32px; border-left: 1px solid var(--border); }
  .qa:first-child { padding-left: 0; border-left: none; }
  .qa:last-child { padding-right: 0; }
}
.qa > * { min-width: 0; }
.qa h3 {
  font-size: 1.375rem;
  color: var(--accent);
  margin-bottom: 0.55em;
}
.qa p { font-size: 0.875rem; color: var(--text-muted); margin: 0; max-width: 40ch; }

/* ── LA CELOSÍA ────────────────────────────────────────────────── */
/* Seis hechos en una sola pieza, divididos por un pelo de línea. Es una
   rejilla con `gap: 1px` sobre fondo de borde: las líneas salen perfectas
   y sin doblarse en los cruces, que es lo que pasa con seis tarjetas. */

.lattice {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 40px;
}
.lattice > * { min-width: 0; }
.cell {
  background: var(--bg-raised);
  padding: 24px 22px;
}
.cell .sec-icon { margin-bottom: 12px; }
.cell h3 { font-size: 1rem; margin-bottom: 0.35em; }
.cell p { margin: 0; font-size: 0.875rem; color: var(--text-muted); max-width: 34ch; }

/* ── LA PRUEBA ─────────────────────────────────────────────────── */
/* Tres números que se pueden comprobar. El primero lo verifica
   `scripts/verificar-web.py` en cada despliegue: si algún día esta página
   carga algo de otro servidor, el arnés se pone rojo ANTES de que el cero
   se convierta en mentira. */

.proof {
  display: grid;
  gap: 28px var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--border);
}
.proof > div { min-width: 0; }
.proof dt {
  font-size: 2.5rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.proof dd {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 30ch;
}
.on-water .proof { border-top-color: var(--water-border); }
.on-water .proof dt { color: var(--accent-on-water); }
.on-water .proof dd { color: var(--on-water-dim); }

/* ── SPLIT ─────────────────────────────────────────────────────── */
/* Texto a la izquierda, contenido a la derecha, y el texto se queda
   pegado al hacer scroll en pantallas anchas. */

.split {
  display: grid;
  gap: 44px var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; }
  .split-aside { position: sticky; top: 116px; align-self: start; }
}
.split > * { min-width: 0; }

/* ── PRECIOS ───────────────────────────────────────────────────── */

.plans { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; margin-top: 44px; }
.plans > * { min-width: 0; }
.plan {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.plan.is-featured { border-color: var(--accent); box-shadow: var(--shadow-pop); }
.plan h3 { font-size: 1.375rem; margin-bottom: 0.15em; }
.plan .price { font-size: 2.5rem; color: var(--text-strong); font-weight: 650; line-height: 1.1; letter-spacing: -0.035em; margin: 0.25em 0 0; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 1rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.plan .vat { font-size: 0.75rem; color: var(--text-muted); margin: 0.5em 0 1.4em; }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.6em; font-size: 0.875rem; }
.plan li { padding-left: 26px; position: relative; margin-bottom: 9px; }
.plan li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.5em;
  width: 10px; height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; text-align: center; }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 14px;
}

/* ── FAQ ───────────────────────────────────────────────────────── */

.faq-list { margin-top: 40px; border-top: 1px solid var(--border); }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-strong);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.15s;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.375rem;
  line-height: 1;
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0.8em 0 0; font-size: 0.875rem; color: var(--text-muted); }

/* ── CIERRE ────────────────────────────────────────────────────── */
/* La segunda banda de agua. La página abre en el mar y cierra en el mar;
   lo de en medio es el muelle. */

.closing {
  position: relative;
  padding: 96px 0;
}
/* El mismo filo iluminado que cierra el héroe, ahora abriendo el cierre.
   En modo claro es un detalle; en modo OSCURO es lo único que separa esta
   banda del fondo, porque allí --bg y --water son el mismo azul. */
.closing::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-on-water) 30%, var(--accent-on-water) 70%, transparent);
  opacity: 0.45;
}
.closing .wrap { max-width: 780px; }
.closing h2 { max-width: 20ch; }

/* ── DOCUMENTOS LEGALES ────────────────────────────────────────── */

.legal { padding: 72px 0 96px; }
.legal h1 { font-size: 1.75rem; letter-spacing: -0.028em; }
.legal h2 { font-size: 1.375rem; margin-top: 2em; letter-spacing: -0.02em; }
.legal h3 { font-size: 1.125rem; margin-top: 1.5em; }
.legal p, .legal li { font-size: 1rem; max-width: var(--measure); }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 0.5em; }
.legal .updated { font-size: 0.875rem; color: var(--text-muted); }
/* la dirección de contacto, que en esa página es el contenido principal */
.legal .big-link { font-size: 1.375rem; }
.legal dl { margin: 0 0 1.5em; }
.legal dt { font-weight: 600; color: var(--text-strong); font-size: 0.875rem; }
.legal dd { margin: 0 0 0.8em; }

/* Los datos que Fritz tiene que rellenar. Salta a la vista a propósito:
   una landing publicada con un [PENDIENTE] dentro es peor que una rota,
   porque nadie la mira. */
.todo-fill {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px dashed currentColor;
  border-radius: 3px;
  padding: 0 6px;
  font-weight: 600;
  font-size: 0.875rem;
}
.on-water .todo-fill { background: rgba(218, 168, 236, 0.12); color: var(--accent-on-water); }

/* ── PIE ───────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--water-border);
  padding: 52px 0 44px;
  font-size: 0.875rem;
  color: var(--on-water-dim);
}
.site-footer .wrap { display: flex; gap: 32px; flex-wrap: wrap; justify-content: space-between; }
.site-footer .foot-brand { display: block; margin-bottom: 18px; }
.site-footer .foot-brand svg { height: 22px; width: auto; display: block; }
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: var(--on-water-dim); text-decoration: none; }
.site-footer a:hover { color: var(--on-water-strong); text-decoration: underline; }
.site-footer nav { display: flex; flex-direction: column; gap: 9px; }
.site-footer .foot-head {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-water-dim);
  opacity: 0.7;
  margin-bottom: 14px;
}
.site-footer .legal-id { font-size: 0.75rem; max-width: 46ch; line-height: 1.6; }

/* ── MÓVIL ─────────────────────────────────────────────────────── */
/* Va el último a propósito, para ganar por orden a las reglas de arriba
   que comparten especificidad. */

@media (max-width: 900px) {
  :root { --section-y: 76px; }
}

@media (max-width: 640px) {
  html { font-size: 16px; }
  :root { --section-y: 60px; --gap: 18px; }
  h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
  h2 { font-size: 1.375rem; }
  .wrap { width: 88%; }
  .hero { padding: 56px 0 64px; }
  .hero h1 { max-width: none; }
  .hero-grid { gap: 40px; }
  .lede { font-size: 1rem; }
  .site-header .wrap { padding: 11px 0; gap: 12px; }
  .brand svg { height: 22px; }
  .site-nav { gap: 16px; }
  /* En el móvil el menú entero se parte en dos líneas y el mástil, que es
     pegajoso, se come 110px de pantalla en todos los scrolls. Se caen los
     enlaces a secciones —que son los que llevan `#`— y quedan Pricing y el
     botón en una sola línea. A las secciones se llega bajando, y el pie
     las lleva todas. Sin hamburguesa: eso pediría JavaScript. */
  .site-nav a[href*="#"] { display: none; }
  .btn { width: 100%; text-align: center; }
  .site-nav .btn { width: auto; padding: 9px 16px; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-lg { padding: 13px 24px; }
  .closing { padding: 64px 0; }
  .mock-tabs { display: none; }
  .proof dt { font-size: 1.75rem; }
  .site-footer .wrap { gap: 26px; }
}