/* ── Estilo de la portada ──
   La base es la de Hanasuka (jsf_llengua/web/estilo.css): barra flotante, hero
   de color, secciones que alternan y cero JavaScript. Lo que cambia es la marca:
   aquí NO hay paleta propia. Los colores son los tokens semánticos de
   design/tokens.css (que la cabecera carga antes que esto), así que la portada
   tiene los mismos tres temas que la app y un cambio de paleta en design/ llega
   aquí sin tocar nada. Ni un color escrito a mano: hay una prueba.

   Diseño base: el teléfono. Lo de las media queries solo añade. */

/* ── La sombra de los dibujos ──
   Una sombra en `texto` es tinta en claro y un halo claro en oscuro. En oscuro
   la sombra es el `fondo`, lo más oscuro del tema. Se declara también en cada
   [data-tema]: una variable que usa otra se resuelve donde se declara, y sin
   eso las secciones con tema fijo heredarían la del tema de la página. */
:root, [data-tema] { --dib-sombra: var(--texto); }
[data-tema="oscuro"] { --dib-sombra: var(--fondo); }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) { --dib-sombra: var(--fondo); } }

:root {
  /* Lo que mide la barra flotante con su aire: 12 arriba, 60 de pastilla y 12
     abajo. Va con `fixed` (el color del hero empieza DEBAJO de la pastilla), y
     este número es lo único que la une con el hero. */
  --barra: 84px;
  --ancho: 1180px;
  /* Dónde caen los dibujos de fondo: por dentro de la columna de contenido y no
     contra el borde de la ventana, donde se despegaban del texto al crecer. */
  --dibujo-x: max(16px, calc(50% - var(--ancho) / 2 + 24px));
}

/* ── Base ── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* clip y no hidden: hidden convierte el body en contenedor de desplazamiento. */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra-interfaz);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--marca); }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 16px; }

/* Un icono ocupa lo que la letra que acompaña. */
.ic { width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; flex: none; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 8px; }

/* Lo que se esconde de la vista y no del oído. */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.saltar {
  position: absolute; left: -9999px; top: 8px; z-index: 60;
  background: var(--marca); color: var(--sobre-marca); padding: 10px 16px;
  border-radius: var(--radio-m); font-weight: 700; text-decoration: none;
}
.saltar:focus { left: 8px; }

.env { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: 20px; }

/* La barra fija tapa lo que hay debajo de un ancla: el salto se queda corto. */
section[id] { scroll-margin-top: calc(var(--barra) - 4px); }

/* ── Títulos ──
   Bricolage Grotesque, la letra de títulos de la app, algo estrecha: es la que
   mete un titular largo en dos líneas en un móvil. */
h1, h2 {
  font-family: var(--letra-titulos);
  font-weight: 760;
  font-stretch: 90%;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h2 { font-size: 2.05rem; line-height: 1.06; margin-bottom: 16px; }
h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }

.entradilla { font-size: 1.125rem; color: var(--texto-2); max-width: 54ch; }

/* ── El antetítulo ──
   En la letra de cifras, en mayúsculas espaciadas, con el punto delante: es la
   etiqueta de un mapa, no un titular. */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--letra-mono); font-size: .8rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--marca); margin: 0 0 16px;
}
.kicker .punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
/* Sobre el petróleo, en ámbar: el punto es el nodo del símbolo. */
.kicker-claro { color: var(--acento); }
/* En ruta: la pastilla de la app, tal cual. */
.kicker-vivo {
  background: var(--vivo); color: var(--sobre-vivo);
  font-family: var(--letra-interfaz); font-size: .95rem; letter-spacing: 0; text-transform: none;
  padding: 9px 16px 9px 14px; border-radius: var(--radio-pastilla);
}

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 24px;
  border: 2px solid transparent; border-radius: 14px;
  font-family: var(--letra-interfaz); font-size: 1.02rem; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--mov-rapido) var(--mov-curva), transform var(--mov-rapido) var(--mov-curva), border-color var(--mov-rapido);
}
.btn-1 { background: var(--marca); color: var(--sobre-marca); }
.btn-s { min-height: 44px; padding: 0 16px; font-size: .95rem; border-radius: 12px; }
/* Ámbar con tinta: el acento es «lo que hay que mirar», y en el hero es el único
   botón que puede existir (un petróleo sobre el petróleo daría 1:1). */
.btn-acento { background: var(--acento); color: var(--sobre-acento); box-shadow: var(--sombra-flotante); }
.btn-claro { background: transparent; color: var(--sobre-marca); border-color: color-mix(in srgb, var(--sobre-marca) 45%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .btn-1:hover { background: var(--marca-honda); }
  .btn-acento:hover { transform: translateY(-2px); }
  .btn-claro:hover { border-color: var(--sobre-marca); }
}

/* ── Barra de arriba ──
   Una pastilla que flota por encima del color. `pointer-events: none` en el
   hueco de alrededor para que no se trague clics. */
.barra { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 12px 12px 0; pointer-events: none; }
.barra .env {
  pointer-events: auto;
  display: flex; align-items: center; gap: 6px;
  max-width: min(var(--ancho), 100%); min-height: 60px;
  padding: 0 8px 0 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-pastilla);
  box-shadow: var(--sombra-flotante);
}
.marca { display: flex; align-items: center; gap: 9px; flex: none; min-height: 44px; text-decoration: none; color: var(--texto); }
.marca img { width: 32px; height: 32px; display: block; }
.marca span { font-family: var(--letra-titulos); font-weight: 760; font-size: 1.4rem; letter-spacing: -0.02em; }
.menu { display: none; align-items: center; gap: 2px; margin-left: 18px; }
.menu a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--texto); text-decoration: none; font-size: .95rem; font-weight: 700; padding: 0 11px; border-radius: 10px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { background: var(--marca-lavado); color: var(--marca); } }
/* La página en la que ya se está (hoy, solo Contacto es una página aparte). */
.menu a[aria-current] { color: var(--marca); }
.empuje { flex: 1; }
.barra .btn { flex: none; }

/* Los dos desplegables (idioma y secciones) son <details>: los abre el navegador. */
.desplegable { position: relative; flex: none; }
.desplegable summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  color: var(--texto); font-size: 1.15rem;
}
.desplegable summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .desplegable summary:hover { background: var(--superficie-honda); } }
.desplegable ul {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  margin: 0; padding: 6px; list-style: none; min-width: 210px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  box-shadow: var(--sombra-flotante);
}
.desplegable li a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; text-decoration: none; color: var(--texto); font-weight: 700; }
.desplegable li a[aria-current] { color: var(--marca); }
@media (hover: hover) and (pointer: fine) { .desplegable li a:hover { background: var(--fondo); } }
/* Por debajo de 360 no caben el nombre y el botón: queda el símbolo. */
@media (max-width: 359px) { .marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ═══ El hero ═══ */
.hero {
  position: relative; overflow: hidden;
  background: var(--marca); color: var(--sobre-marca);
  padding: calc(var(--barra) + 36px) 0 56px;
}
.hero :focus-visible { outline-color: var(--acento); }
.relieve { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .1; pointer-events: none; }
.hero-rejilla { position: relative; z-index: 1; display: grid; gap: 44px; }
.hero h1 { font-size: 2.6rem; line-height: 1.02; max-width: 15ch; margin-bottom: 20px; }
.hero .lead { font-size: 1.15rem; color: var(--marca-lavado); max-width: 50ch; }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 22px; }
.hero .nota { display: flex; align-items: center; gap: 10px; color: var(--marca-lavado); font-size: .95rem; margin: 0; }
.hero .nota .ic { color: var(--acento); }

/* ── El escaparate: el móvil y sus tarjetas ── */
/* En el teléfono el móvil dibujado deja 48 px por lado: es lo que asoman las
   tarjetas (-14 %), y con más ancho se salían de la pantalla y el hero las
   recortaba. */
.escaparate { position: relative; width: min(100% - 96px, 300px); margin: 0 auto; }
.movil { display: block; width: 100%; height: auto; transform: rotate(-3deg); }
.chip {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: var(--superficie); color: var(--texto);
  border-radius: 16px; box-shadow: var(--sombra-flotante);
  line-height: 1.25; white-space: nowrap;
  animation: flota 4.8s ease-in-out infinite alternate;
}
.chip strong { display: block; font-size: .92rem; }
.chip small { display: block; font-size: .8rem; color: var(--texto-2); }
.chip-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 1.05rem; flex: none; }
.chip-vivo { background: var(--vivo); color: var(--sobre-vivo); }
.chip-marca { background: var(--marca); color: var(--sobre-marca); }
.chip-ia-color { background: var(--ia); color: var(--superficie); }
/* Colocadas donde el móvil no tiene nada que tapar: la del plan sobre la
   barra del título, la de la IA a la derecha entre el parque y la comida, y la
   del aviso sobre el agua, debajo de la Torre. */
.chip-plan { top: 16%; left: -14%; }
.chip-ia { top: 33%; right: -14%; animation-delay: -1.6s; }
.chip-aviso { top: 68%; left: -16%; animation-delay: -3.2s; }

/* ═══ La franja ═══ */
.franja { background: var(--superficie); border-bottom: 1px solid var(--borde); padding: 18px 0; }
.franja ul { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.franja li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.franja .ic { color: var(--marca); font-size: 1.15rem; }

/* ═══ Los apartados ═══ */
.apartado { position: relative; overflow: hidden; padding: 68px 0; }
.apartado > .env { position: relative; z-index: 1; }
.apartado-hondo { background: var(--superficie-honda); }
.apartado-noche { background: var(--fondo); color: var(--texto); }

.bloque { display: grid; gap: 40px; align-items: center; }
.bloque-texto { min-width: 0; }
.bloque-ancho { grid-column: 1 / -1; min-width: 0; }
.bloque-dibujo { margin: 0; min-width: 0; }
.bloque-dibujo svg { display: block; width: 100%; max-width: 580px; height: auto; margin: 0 auto; }

/* ── Las ventajas ── */
.ventajas { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 20px; }
.ventajas li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.ventajas h3 { margin: 2px 0 3px; }
.ventajas p { margin: 0; color: var(--texto-2); font-size: 1rem; }
.ventaja-icono {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--marca-lavado); color: var(--marca); font-size: 1.15rem;
}
.apartado-ia .kicker { color: var(--ia); }
.apartado-ia .ventaja-icono { background: var(--ia-fondo); color: var(--ia); }
.apartado-noche .ventaja-icono { background: var(--vivo-fondo); color: var(--vivo); }
.apartado-noche .ventajas { margin-top: 8px; }

/* ── «Ya», «Pronto», «Después» ── */
.estado {
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 8px; border-radius: var(--radio-pastilla); white-space: nowrap;
}
.estado-ya { background: var(--exito-fondo); color: var(--exito); }
.estado-pronto { background: var(--atencion-fondo); color: var(--atencion); }
.estado-despues { background: var(--fondo); color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--borde); }

/* ── Tarjetas ── */
.rejilla { display: grid; gap: 16px; margin-top: 34px; }
.rejilla-3 { grid-template-columns: minmax(0, 1fr); }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  padding: 22px; box-shadow: var(--sombra-tarjeta);
}
.tarjeta .ventaja-icono { margin-bottom: 16px; }
.tarjeta h3 { margin-bottom: 6px; }
.tarjeta p { margin: 0; color: var(--texto-2); font-size: 1rem; }

/* ── Plataformas ── */
.plataformas { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 10px; }
.plataformas li {
  display: flex; align-items: center; gap: 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px;
}
.plataformas strong { display: block; }
.plataformas small { display: block; color: var(--texto-2); font-size: .92rem; line-height: 1.35; }
.plataformas .estado { margin-left: auto; }

/* ── Preguntas ── */
.faq { max-width: 820px; margin-top: 28px; }
.faq details { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); margin-bottom: 10px; }
.faq summary {
  list-style: none; cursor: pointer; min-height: 44px; padding: 17px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-weight: 700; font-size: 1.05rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--marca); transition: transform var(--mov-normal) var(--mov-curva); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { padding: 0 20px 20px; margin: 0; color: var(--texto-2); }

/* ═══ El final, dentro del bucle ═══ */
.final { position: relative; overflow: hidden; text-align: center; padding: 96px 0; }
.final > .env { position: relative; z-index: 1; }
.final h2 { font-size: 2.6rem; }
.final p { color: var(--texto-2); font-size: 1.15rem; max-width: 40ch; margin: 0 auto 28px; }
.bucle-final {
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: 970px; max-width: none; height: auto; transform: translate(-50%, -50%);
  color: var(--marca);
}
.bucle-firme { stroke-opacity: .15; }
.bucle-raya { stroke: var(--fondo); }
.bucle-nodo { fill: var(--acento); stroke: var(--fondo); }

/* ── 404, y la cabecera de los textos legales, que es la misma ── */
.perdido, .legal-cabecera { background: var(--marca); color: var(--sobre-marca); padding: calc(var(--barra) + 36px) 0 40px; }
.perdido h1, .legal-cabecera h1 { font-size: 2.4rem; line-height: 1.05; margin-bottom: 14px; }
.perdido .lead, .legal-cabecera .lead { color: var(--marca-lavado); margin: 0; max-width: 60ch; }
.perdido + .hero { padding-top: 32px; border-top: 1px solid color-mix(in srgb, var(--sobre-marca) 18%, transparent); }

/* ── Textos legales y autor (secciones/legal.php) ──
   Cada apartado en su tarjeta, a lo ancho de una columna de lectura. Las mismas
   piezas que src/legal/legal.css en la app: párrafo, lista, nota y tabla. */
.env-legal { max-width: 800px; }
/* Con las dos clases: la regla de .apartado de la tableta va más abajo y ganaría. */
.apartado.apartado-legal { padding: 36px 0 64px; }
/* minmax(0, 1fr): sin él, una tabla ancha estiraba la rejilla y las tarjetas se
   salían por la derecha en el móvil, cortadas por el overflow del apartado. */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.legal-bloque[id] { scroll-margin-top: calc(var(--barra) + 8px); }
.legal-bloque h2 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 12px; }
.tarjeta.legal-bloque p { color: var(--texto); margin: 0 0 12px; max-width: 70ch; }
.legal-bloque > :last-child { margin-bottom: 0; }
.legal-lista { margin: 0 0 12px; padding-left: 1.2em; max-width: 70ch; }
.legal-lista li { margin: 0 0 6px; line-height: 1.55; }
.tarjeta .legal-nota { display: flex; gap: 10px; background: var(--superficie-honda); border-radius: var(--radio-m); padding: 12px 14px; }
.legal-nota .ic { color: var(--marca); flex: none; margin-top: .3em; }
.legal-tabla { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--borde); border-radius: var(--radio-m); }
.legal-tabla table { width: 100%; border-collapse: collapse; }
/* Las de tres y cuatro columnas no caben en un móvil: se desplazan en su caja.
   Las de dos (la ficha del titular) caben siempre. */
.legal-tabla table:has(th:nth-child(3)) { min-width: 26rem; }
.legal-tabla th { background: var(--marca); color: var(--sobre-marca); text-align: left; padding: 8px 10px; font-size: .9rem; }
.legal-tabla td { padding: 8px 10px; font-size: .95rem; line-height: 1.5; border-top: 1px solid var(--borde); vertical-align: top; }
.legal-tabla td:first-child { font-weight: 700; }
.legal-fecha { color: var(--texto-2); font-size: .9rem; margin: 6px 0 0; }
.legal-enlace { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--marca); font-weight: 700; }
.legal-fuera { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.legal-fuera > .ic { color: var(--marca); flex: none; }
.legal-fuera strong { display: block; color: var(--marca); }
.legal-fuera span span { display: block; color: var(--texto-2); font-size: .92rem; }

/* ── Contacto (secciones/contacto.php) ──
   Dos medias pantallas que se encuentran en el centro, como en Hanasuka: el
   petróleo con su relieve a la izquierda (tema claro fijado, como el hero) y el
   formulario en papel a la derecha. En el móvil se apilan con el texto arriba:
   un formulario antes de saber para qué es no lo rellena nadie. */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr); }
.contacto-lado { position: relative; overflow: hidden; }
.contacto-dentro { position: relative; z-index: 1; max-width: 34rem; margin: 0 auto; }
.contacto-color { background: var(--marca); color: var(--sobre-marca); padding: calc(var(--barra) + 36px) 20px 44px; }
.contacto-color :focus-visible { outline-color: var(--acento); }
.contacto-color h1 { font-size: 2.4rem; line-height: 1.05; margin-bottom: 14px; }
.contacto-color .lead { color: var(--marca-lavado); margin: 0 0 28px; }
.contacto-antes { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.contacto-antes li { display: flex; gap: 14px; color: var(--marca-lavado); line-height: 1.5; }
.contacto-antes strong { display: block; color: var(--sobre-marca); }
.contacto-antes a { display: flex; width: fit-content; align-items: center; min-height: 44px; color: var(--sobre-marca); font-weight: 700; }
.contacto-antes-icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--sobre-marca) 12%, transparent); color: var(--acento); }
/* El ancla de la vuelta cae aquí: con aire para la barra fija. */
.contacto-papel { background: var(--fondo); padding: 32px 20px 64px; scroll-margin-top: var(--barra); }

.formulario {
  position: relative; display: grid; gap: 18px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  padding: 22px; box-shadow: var(--sombra-tarjeta);
}
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 700; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: var(--radio-m);
  background: var(--fondo); color: var(--texto); font: inherit;
}
.campo textarea { min-height: 9.5rem; line-height: 1.5; resize: vertical; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { border-color: var(--marca); outline-offset: 1px; }
.pista { color: var(--texto-2); font-size: .9rem; line-height: 1.45; }
.pista-captcha { margin: 0; }
.acepta { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; line-height: 1.5; cursor: pointer; }
.acepta input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--marca); }
.formulario .btn { justify-self: start; }
/* El cebo, fuera de la pantalla y no con display:none: algunos robots se saltan
   los campos que no se pintan. */
.cebo { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contacto-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radio-m); line-height: 1.5; font-weight: 700; }
.contacto-aviso .ic { flex: none; margin-top: .25em; }
.contacto-aviso a { color: inherit; }
.contacto-aviso-ok { background: var(--exito-fondo); color: var(--exito); }
.contacto-aviso-mal { background: var(--error-fondo); color: var(--error); }

/* ═══ Pie ═══ */
footer {
  position: relative; overflow: hidden;
  background: var(--superficie-honda); border-top: 1px solid var(--borde);
  padding: 34px 0 44px; color: var(--texto-2); font-size: .92rem;
}
footer > .env { position: relative; z-index: 1; }
.pie-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pie-marca p { margin: 0; }
.pie-marca strong { color: var(--texto); font-family: var(--letra-titulos); font-size: 1.1rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin-bottom: 8px; }
footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--texto-2); }
footer nav a[aria-current] { color: var(--texto); font-weight: 700; text-decoration: none; }

/* ── Estadísticas de visitas: el aviso y el pie (partes/analitica.php) ──
   Solo existen con KOKAI_GA_ID. El aviso va fijo abajo, por debajo de la
   barra y sus menús; la franja que lo lleva no atrapa los toques, solo la caja. */
.consentimiento { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.consentimiento-caja {
  pointer-events: auto; max-width: 34rem; margin-left: auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l);
  box-shadow: var(--sombra-flotante); padding: 18px 20px;
}
.consentimiento-caja p { margin: 0 0 12px; font-size: .95rem; line-height: 1.5; }
.consentimiento-titulo { font-weight: 700; }
/* Los dos del mismo ancho: rechazar no pesa menos que aceptar. */
.consentimiento-botones { display: flex; gap: 10px; }
.consentimiento-botones .btn { flex: 1 1 0; }
.pie-analitica { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 0 8px; }
.pie-enlace { min-height: 44px; padding: 0; border: 0; background: none; color: var(--texto); font: inherit; text-decoration: underline; cursor: pointer; }

/* ── Los kanji de la marca ──
   Trazados que pintan con currentColor (h_kanji): se les da alto y el ancho sale
   de su caja. En el antetítulo, en el sitio del punto y a la altura de la letra. */
.kicker-kanji { height: 1.35em; width: auto; flex: none; margin-right: 2px; }

/* ── El nombre ──
   El cartel: 航海 en vertical sobre el petróleo con curvas de nivel (el mismo
   papel que el hero) y el nodo ámbar debajo, como el del símbolo. Tema claro
   fijo, como el hero. */
.cartel-nombre {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; justify-items: center; align-content: center; gap: 14px;
  width: 100%; max-width: 260px; aspect-ratio: 3 / 4; margin: 0 auto;
  padding: 36px 24px;
  background: var(--marca); color: var(--sobre-marca);
  border-radius: 28px; box-shadow: var(--sombra-flotante);
}
.cartel-nombre .cartel-relieve { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; opacity: .12; color: var(--sobre-marca); }
.cartel-nombre .cartel-kanji { height: min(62%, 260px); width: auto; color: var(--sobre-marca); }
.cartel-lectura { font-family: var(--letra-mono); font-weight: 700; font-size: .95rem; letter-spacing: .3em; text-transform: uppercase; color: var(--acento); }
.cartel-nodo { width: 18px; height: 18px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 5px var(--marca), 0 0 0 7px color-mix(in srgb, var(--acento) 55%, transparent); }

.kanji-pareja { display: grid; gap: 12px; margin: 26px 0 0; }
.kanji-ficha {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-l); padding: 14px 16px;
}
.kanji-ficha-glifo { width: 56px; height: auto; color: var(--marca); justify-self: center; }
.kanji-ficha h3 { margin: 0 0 2px; }
.kanji-ficha p { margin: 0; color: var(--texto-2); font-size: 1rem; }
.kanji-juego { margin: 26px 0 12px; color: var(--texto-2); max-width: 54ch; }
.kanji-frase {
  margin: 0; padding: 20px 22px;
  display: grid; gap: 8px; justify-items: start;
  background: var(--superficie); border-left: 4px solid var(--acento); border-radius: 0 var(--radio-l) var(--radio-l) 0;
}
.kanji-frase-glifo { width: min(100%, 360px); height: auto; color: var(--marca); }
.kanji-frase-lectura { font-family: var(--letra-mono); font-size: .9rem; color: var(--texto-2); letter-spacing: .04em; }
.kanji-frase-traduccion { font-family: var(--letra-titulos); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }

/* La frase debajo del último botón, pequeña: la firma de la página. */
.final .final-frase { display: grid; justify-items: center; gap: 6px; margin: 30px auto 0; color: var(--texto-2); font-size: .98rem; }
.final-frase-glifo { width: 190px; height: auto; color: var(--marca); }

/* ── Los dibujos de fondo: a una tinta, tenues y detrás ── */
.dibujo-fondo { position: absolute; z-index: 0; pointer-events: none; height: auto; }
/* Arriba a la derecha, a la altura del titular: más abajo quedaba detrás de
   las tarjetas, que son opacas, y solo asomaba el asa. */
.maleta-mas { right: var(--dibujo-x); top: 44px; width: 96px; color: var(--marca); opacity: .09; transform: rotate(8deg); }
.brujula-faq { right: var(--dibujo-x); top: 50%; width: 300px; color: var(--marca); opacity: .08; transform: translateY(-50%) rotate(14deg); }
.matasellos-pie { right: var(--dibujo-x); top: 50%; width: 230px; color: var(--texto-2); opacity: .16; transform: translateY(-50%) rotate(-8deg); }
@media (max-width: 1099px) { .maleta-mas, .brujula-faq { display: none; } }
@media (max-width: 899px) { .matasellos-pie { display: none; } }

/* ═══ Movimiento ═══
   Poco y lento: la ruta del plan avanza, el recorrido se dibuja, la posición
   late y el aviso manda ondas. Cero si el sistema pide menos movimiento. */
@keyframes flota { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes marcha { to { stroke-dashoffset: -36; } }
@keyframes dibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pulso { from { transform: scale(.55); opacity: .5; } to { transform: scale(1.9); opacity: 0; } }
@keyframes onda { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }

.dib-marcha { animation: marcha 1.8s linear infinite; }
.dib-dibuja { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero .dib-dibuja { animation: dibuja 2.6s var(--mov-curva) .4s both; }
.dib-pulso { transform-box: fill-box; transform-origin: center; animation: pulso 2.4s ease-out infinite; }
.dib-onda { transform-box: fill-box; transform-origin: center; animation: onda 3.2s ease-out infinite; }
.dib-onda-2 { animation-delay: 1.6s; }
.dib-flota { animation: flota 4.2s ease-in-out infinite alternate; }
/* Fuera del hero, el recorrido se dibuja al llegar a él, donde el navegador sabe
   atar una animación al desplazamiento. Donde no, se ve entero y quieto. */
@supports (animation-timeline: view()) {
  .apartado .dib-dibuja { animation: dibuja linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══ A partir de la tableta ═══ */
@media (min-width: 700px) {
  body { font-size: 1.09rem; }
  h2 { font-size: 2.6rem; }
  .apartado { padding: 92px 0; }
  .hero { padding: calc(var(--barra) + 56px) 0 80px; }
  .hero h1 { font-size: 3.6rem; }
  .escaparate { width: 360px; }
  .franja ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloque-ancho .ventajas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
  .final { padding: 130px 0; }
  .final h2 { font-size: 3.4rem; }
  .bucle-final { width: 1240px; }
  .perdido h1, .legal-cabecera h1 { font-size: 3rem; }
}

/* ── El menú a la vista ──
   Desde 900 px. Con seis destinos era desde 860 (y antes desde 1180, con media
   barra vacía); el 15/09/2026 entró Contacto y se volvió a medir con las letras
   cargadas: la pastilla necesita 837 px con los enlaces juntos (8 px de relleno)
   y 881 con el relleno de siempre, y mide la ventana menos 24. Desde 900 caben
   con 39 px de aire, y hasta 1040 los enlaces van juntos para que no se toquen
   con la marca ni con el botón (a 1040, 1016 px de pastilla contra 881). Si se
   añade un destino, se vuelve a medir, y se cambia también en src/cuenta/acceso.css. */
@media (min-width: 900px) {
  .menu { display: flex; }
  .secciones { display: none; }
}
@media (min-width: 900px) and (max-width: 1039px) {
  .menu { margin-left: 10px; }
  .menu a { padding: 0 8px; }
}

/* ═══ Escritorio: dos columnas ═══ */
@media (min-width: 700px) {
  .kanji-pareja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
  .apartado-nombre .bloque { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .cartel-nombre { max-width: 340px; }
  .hero-rejilla { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 48px; }
  .hero h1 { font-size: 4.1rem; }
  .escaparate { width: 350px; margin-right: 40px; }
  .bloque { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; }
  .bloque-reves .bloque-texto { order: 2; }
  .bloque-privacidad { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .bloque-privacidad .bloque-dibujo svg { max-width: 340px; }
  .bloque-ancho .ventajas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Contacto: las dos mitades, cada una con su contenido pegado a la juntura. */
  .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
  .contacto-color { padding: calc(var(--barra) + 64px) 56px 72px; }
  .contacto-papel { padding: calc(var(--barra) + 40px) 56px 72px; }
  .contacto-color .contacto-dentro { margin: 0 0 0 auto; }
  .contacto-papel .contacto-dentro { margin: 0 auto 0 0; }
  .contacto-color h1 { font-size: 3.2rem; }
}

@media (min-width: 1180px) {
  .hero h1 { font-size: 4.6rem; }
  .escaparate { width: 370px; }
}