/* ============================================================================
   STORYFEEL — LO QUE COMPARTEN LAS SIETE PAGINAS PUBLICAS
   ----------------------------------------------------------------------------
   Portada, contacto, la baja de correo y los cuatro legales. NO la pantalla de entrada:
   `story-feel-app.html` ya es la app y conserva sus quince temas.

   Aqui viven dos cosas, y las dos estaban antes en `landing.css`, que solo lleva la portada:

   1. LA NOCHE. Las paginas publicas no tienen los quince temas de la app: tienen DOS estados.
      El dia no define nada —`legal.css` pinta Clasico sobre `:root` pelado y Clasico ES el dia—
      asi que solo la noche necesita tokens propios. `[data-sky]` es (0,1,0) y gana al `:root`
      (0,0,0) de `legal.css` sin tener que tocar aquel fichero.
   2. LA BARRA DE ARRIBA. Redes a la izquierda, menu centrado, dia/noche a la derecha, y por
      debajo de 640 el menu se convierte en panel. Estaba escrita para la portada; moverla aqui
      es lo que permite que las otras seis la tengan sin duplicar una linea.

   ⚑⚑ ORDEN DE CARGA. En la portada esta hoja va ANTES de `landing.css`, porque alli la barra
   flota (`position:fixed`) y esa regla tiene que ganar a la `position:relative` de aqui. Misma
   especificidad, decide el orden. En las otras seis da igual: no cargan `landing.css`.

   ⚑ Los tokens `--sky-ink` / `--sky-soft` / `--sky-rule` son la tinta de la barra. Se eligieron
   para sobrevivir SOBRE LA FOTO del hero, pero funcionan igual sobre la crema y sobre el azul de
   la noche, que es lo unico que hay detras en las otras seis. No hay una segunda paleta.
   ============================================================================ */

/* ============================================================================
   EL CIELO — dia y noche en las paginas publicas
   ----------------------------------------------------------------------------
   ⚑ Las paginas publicas dejan de llevar los quince temas de la app: aqui solo hay DOS estados,
   dia y noche, y los elige quien visita. La app conserva sus quince, y la pantalla de entrada
   tambien, porque esa ya es la app.
   ⚑ El dia NO redefine nada: legal.css ya pinta Clasico sobre :root pelado, y Clasico ES el dia.
   Solo la noche necesita tokens propios, y [data-sky] (0,1,0) gana al :root (0,0,0) de legal.css
   sin tener que tocar aquel fichero.
   ⚑⚑ --cta-ink NO es opcional aqui. El boton de "Crear cuenta" es --cta-bg (=--rose-deep) con
   --cta-ink encima, y en un tema oscuro --rose-deep es el color CLARO de los enlaces: heredar el
   blanco de Clasico daria 1.97:1 — un boton rosa con el texto invisible. Medido, no supuesto, y
   es la trampa que LANDING.md ya tenia anotada.
   Contrastes de la noche: ink 17.03 · ink-soft 9.25 · ink-faint 6.01 · rose-deep como enlace
   9.77 sobre --bg y 8.69 sobre --surface · cta-ink sobre cta-bg 8.89.
   ============================================================================ */
:root[data-sky="night"]{
  --bg:#0A0E1A; --surface:#141B2E; --ink:#EEF1F8; --ink-soft:#AAB4CA; --ink-faint:#8590A8;
  --rose:#C97F92; --rose-deep:#E9A7B4; --line:#232B40;
  --cta-bg:var(--rose-deep); --cta-ink:#2A1218;
  /* ⚑⚑ --rose-tint HACE FALTA AQUI. Lo usa el boton de los planes que NO son el destacado
     (`.plan .cta` en legal/pricing.css): fondo --rose-tint con --rose-deep encima. Ese token lo
     definen los quince temas de `styles.css`, que es la APP — `legal.css` no lo define, asi que
     en las paginas publicas siempre caia en el literal de reserva `#f3e6e8`, un rosa palido de
     tema claro. De dia no se nota; de noche --rose-deep es el rosa CLARO (#E9A7B4) y quedaba
     claro sobre claro: 1.62:1 medido, cuando el minimo son 4.5. Un boton con el texto invisible.
     #352D40 lo deja en 6.65:1, y ademas a 1.31:1 del --surface de la tarjeta, que es lo que hace
     que la pastilla se siga viendo COMO pastilla. Bajarlo mas sube el texto pero funde el boton
     con la tarjeta: son los dos contrastes a la vez, no solo el del texto. */
  --rose-tint:#352D40;
  --card-shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.38);
  --app-gradient:
    radial-gradient(circle at 12% 0%, #17203A 0%, transparent 55%),
    radial-gradient(circle at 92% 100%, #1B1430 0%, transparent 50%),
    #0A0E1A;
  color-scheme:dark;
}


:root:not([data-sky="night"]){ --sky-ink:#14243D; --sky-soft:#33506F; --sky-rule:rgba(20,36,61,.28); }
:root[data-sky="night"]      { --sky-ink:#F4F1E8; --sky-soft:#C3CADB; --sky-rule:rgba(244,241,232,.32); }

/* ===== el interruptor dia/noche ===== */
.sky-toggle{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px;
  border:1px solid var(--sky-rule); background:rgba(255,255,255,.16); backdrop-filter:blur(8px); }
:root[data-sky="night"] .sky-toggle{ background:rgba(255,255,255,.10); }
.sky-toggle button{ width:30px; height:30px; border:none; border-radius:50%; cursor:pointer;
  background:none; color:var(--sky-ink); display:flex; align-items:center; justify-content:center;
  font:inherit; padding:0; transition:background .15s ease, color .15s ease; }
.sky-toggle button svg{ width:17px; height:17px; }
.sky-toggle button[aria-pressed="true"]{ background:var(--sky-ink); color:var(--surface); }
/* ⚑ El boton del menu: misma pastilla que el interruptor y las redes. Solo aparece en el
   telefono; por encima de 640 no existe.
   ⚑⚑ VA AQUI ARRIBA, ANTES DE LAS MEDIA QUERIES, y no junto a los retoques del final. Lo puse
   alla y el boton no salia NUNCA: este `display:none` tiene la misma especificidad que el
   `display:inline-flex` del tramo de 640 y, estando mas abajo en el fichero, ganaba siempre. Es la
   segunda vez hoy que un bloque colocado al final gana por orden a una media query. */
.sky-burger{ display:none; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border-radius:999px; cursor:pointer;
  border:1px solid var(--sky-rule); background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--sky-ink); }
.sky-burger svg{ width:18px; height:18px; }
:root[data-sky="night"] .sky-burger{ background:rgba(255,255,255,.10); }


/* ⚑ Las redes en la barra de arriba: MISMA pastilla que el interruptor de dia/noche —mismo
   borde, mismo fondo translucido, mismo desenfoque y mismo tamanio de boton— para que las dos
   esquinas se lean como la misma pieza. Lo unico que cambia es el lado. */
.sky-social{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px;
  border:1px solid var(--sky-rule); background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
:root[data-sky="night"] .sky-social{ background:rgba(255,255,255,.10); }
.sky-social a{ width:30px; height:30px; border-radius:50%; color:var(--sky-ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease; }
.sky-social a svg{ width:17px; height:17px; fill:currentColor; }
.sky-social a:hover{ background:rgba(255,255,255,.22); }
:root[data-sky="night"] .sky-social a:hover{ background:rgba(255,255,255,.12); }


/* ===== la barra de arriba =====
   Flota sobre la foto y no ocupa sitio: el hero mide una pantalla entera y una barra en flujo le
   robaria ese alto. pointer-events se devuelve solo a los hijos, o la franja transparente se
   comeria los clics de todo lo que pasa por debajo. */
/* ⚑⚑ TRES COLUMNAS, Y LA DEL MEDIO SIEMPRE CENTRADA. `1fr auto 1fr`: las dos laterales se
   reparten el sobrante A PARTES IGUALES, asi que la del medio queda centrada en la ventana pase lo
   que pase a los lados — da igual que las redes midan 88 y el interruptor 60.
   ⚑ Sustituye a `flex` + `position:absolute` en los dos lados. Con aquello el menu solo estaba
   centrado por encima de 900; por debajo la barra pasaba a `flex-start` y el menu se pegaba a la
   izquierda, detras de las redes. Centrar y no solaparse eran el mismo problema. */
.skybar{ position:relative; z-index:60;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:18px 24px; pointer-events:none; }
.sky-social{ justify-self:start; }
.skynav{ justify-self:center; }
.sky-toggle{ justify-self:end; }
.skybar > *{ pointer-events:auto; }
.skynav{ display:flex; align-items:center; gap:4px; padding:5px 5px 5px 12px; border-radius:999px;
  border:1px solid var(--sky-rule); background:rgba(255,255,255,.58); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); box-shadow:0 6px 22px rgba(0,0,0,.10); }
/* ⚑⚑ El cristal al 58%, no al 20%. La tinta de los enlaces es --sky-ink (azul marino) y la
   pastilla flota sobre la parte ALTA de la foto de dia, que es el azul mas oscuro del cielo y
   ademas donde el velo aprieta mas (0.30): con un 20% de blanco quedaba tinta oscura sobre fondo
   oscuro. Y no se puede arreglar aclarando la tinta, porque la pastilla ya no se vuelve solida al
   bajar y mas abajo tiene detras la pagina en crema, donde una tinta clara desapareceria. Lo unico
   que sirve para los dos fondos es darle SUELO al cristal: 58% de blanco deja la misma tinta
   legible sobre el cielo y sobre la crema. Sigue siendo cristal — el desenfoque no se toca. */
:root[data-sky="night"] .skynav{ background:rgba(255,255,255,.14); box-shadow:0 6px 22px rgba(0,0,0,.34); }
.skybar .pn-link{ color:var(--sky-ink); padding:7px 12px; border-radius:999px; font-size:0.8125rem;
  font-weight:600; text-decoration:none; white-space:nowrap; }
.skybar .pn-link:hover{ background:rgba(255,255,255,.22); }
:root[data-sky="night"] .skybar .pn-link:hover{ background:rgba(255,255,255,.12); }
.skybar .pn-cta{ padding:8px 15px; border-radius:999px; font-size:0.8125rem; font-weight:700;
  text-decoration:none; white-space:nowrap; background:var(--cta-bg); color:var(--cta-ink); }
.skybar .langsel{ color:var(--sky-ink); }
.skybar .langsel select{ color:var(--sky-ink); }

/* ⚑⚑ ESMERILADA TODO EL RECORRIDO. Antes se volvia solida al pasar el hero — la idea era darle
   suelo cuando ya no hay foto detras — y el efecto era el contrario: la pastilla cambiaba de
   material a mitad de pagina, justo al llegar al logotipo, y se notaba como un salto. El desenfoque
   sobre el fondo de la pagina sigue funcionando: no hay nada que arreglar, habia que quitar el
   arreglo. La tinta se queda en --sky-ink, que ya contrasta con los dos fondos (navy sobre crema
   de dia, crema sobre azul noche). */

@media (max-width:900px){
  .skybar{ padding:12px 14px; }
  .skynav{ gap:2px; padding:4px 4px 4px 8px; }
  .skybar .pn-link{ padding:6px 8px; font-size:0.75rem; }
  .skybar .pn-cta{ padding:7px 11px; font-size:0.75rem; }
}
/* ⚑⚑ En un movil el menu ENTERO no cabe: medido, la pastilla pide 381px dentro de una pantalla
   de 375. Como se pidio el menu completo, no se quita nada — la barra pasa a ser una tira que se
   desplaza a lo ancho y el interruptor entra en el flujo detras de ella. Asi no se recorta ni se
   pierde ningun destino.
   ⚑ Sigue siendo la decision pendiente del telefono: una tira que se desplaza es honrada pero
   no es un menu de movil de verdad. Cuando se refine, aqui es donde va. */
@media (max-width:640px){
  /* ⚑⚑ AQUI EL MENU DEJA DE SER UNA TIRA Y PASA A SER UN PANEL. Lo que se abre es LA MISMA
     `.skynav` de arriba, recolocada en vertical: no hay un segundo juego de enlaces que mantener.
     La barra se queda con dos cosas a los lados —el boton a la izquierda, el dia/noche a la
     derecha— y ya no necesita desplazarse a lo ancho.
     ⚑⚑ EL PANEL SE VE POR DEFECTO Y LO CIERRA EL JS, nunca al reves. Si `sky.js` no llegara a
     correr, quien entre desde un telefono se encuentra la lista desplegada —fea, pero entera y
     navegable— en vez de un boton que no hace nada y un menu inalcanzable. Es la misma regla que
     el resto de la pagina: lo que esconde es el JS, no la hoja de estilos. */
  /* ⚑ Aqui vuelve a `flex`: el menu sale del flujo (es el panel), asi que en la barra solo
     quedan el boton, las redes y el dia/noche. Con la rejilla de tres columnas no cuadrarian. */
  .skybar{ display:flex; justify-content:space-between; }
  .sky-burger{ display:inline-flex; }
  /* ⚑ Las redes VUELVEN al telefono ahora que el menu se ha ido a un panel y la barra tiene
     sitio: en 375 px caben el boton (32), las redes (88) y el dia/noche (60) con aire de sobra.
     Antes se ocultaban porque la barra era una tira desbordada y las mandaba fuera de la vista.
     ⚑ `margin-left:auto` es lo que las lleva a la derecha PEGADAS al dia/noche; con
     `space-between` a secas se habrian quedado en el centro, separadas de el. */
  .sky-social{ display:inline-flex; margin-left:auto; margin-right:8px; }
  .sky-toggle{ position:static; transform:none; flex-shrink:0; }

  /* ⚑⚑ `justify-self:stretch` HACE FALTA, aunque parezca que `left` y `right` ya lo dicen todo.
     Arriba el menu lleva `justify-self:center` para la rejilla de tres columnas, y sobre una caja
     ABSOLUTA eso no es inocuo: cuando `justify-self` no es `normal`/`stretch`, la caja se
     dimensiona a su CONTENIDO y luego se alinea dentro del hueco que dejan los `inset` — en vez de
     estirarse de un lado a otro. El panel salia de 155 px centrado en lugar de ir de 14 a 14.
     Devolviendolo a `stretch` vuelve a mandar el par `left`/`right`. */
  .skynav{ position:absolute; top:calc(100% - 4px); left:14px; right:14px; justify-self:stretch;
    flex-direction:column; align-items:stretch; gap:6px;
    padding:10px; border-radius:18px; }
  .skybar[data-menu="cerrado"] .skynav{ display:none; }

  .skybar .pn-link{ padding:11px 12px; font-size:0.95rem; text-align:center; }
  .skybar .pn-cta{ padding:12px 14px; font-size:0.95rem; text-align:center; }
  /* ⚑ El selector de idioma se queda con su ancho y se CENTRA; no se estira como los enlaces.
     Estirado quedaba el globo pegado a un borde, la lista en medio y la flechita en el otro borde
     —sus tres piezas van colocadas contra los extremos de la fila— y se leia como tres cosas
     sueltas en vez de un control. Compacto y centrado se lee como lo que es. */
  .skybar .langsel{ align-self:center; }
}



/* ===== la barra de arriba, un 20% mas baja =====
   ⚑⚑ .langsel trae `margin:18px auto 26px` de legal.css — 44px de margen vertical — y en un
   contenedor flex el MARGEN cuenta para el alto de la linea. Por eso la pastilla media 88px con la
   caja mas alta de dentro en 36: no se veia el hueco, pero estaba. legal.css ya tenia el arreglo
   escrito para la barra anterior (`.pubnav .langsel{margin:0}`); al renombrar la barra a .skynav
   esa regla dejo de aplicar y el margen volvio. Renombrar algo hereda sus parches o los pierde. */
.skybar .langsel{ margin:0; }
/* El desplegable manda el alto de la pastilla, asi que bajarlo es lo unico que la baja de verdad. */
.skybar .langsel select{ height:28px; padding-top:0; padding-bottom:0; font-size:0.75rem; }
.skynav{ padding:3px 3px 3px 10px; }
.skybar .pn-link{ padding:5px 11px; }
.skybar .pn-cta{ padding:6px 14px; }
.sky-toggle{ padding:2px; }
.sky-toggle button{ width:26px; height:26px; }
/* ⚑⚑ Las redes van AQUI PEGADAS al interruptor, y no arriba con el resto de su regla, porque
   estas dos lineas son las que mandan de verdad: la regla base del interruptor dice 30 px y 3 de
   relleno, y este repaso posterior lo deja en 26 y 2. Puse las redes a 30/3 copiando la regla base
   y quedaron 6 px mas altas que el interruptor — dos pastillas distintas en las dos esquinas.
   Juntas, quien cambie una ve la otra. */
.sky-social{ padding:2px; }
.sky-social a{ width:26px; height:26px; }



/* ============================================================================
   LA BARRA EN FLUJO — las seis paginas que no son la portada
   ----------------------------------------------------------------------------
   En la portada la barra flota sobre una foto de pantalla completa. Aqui no hay foto: hay un
   documento que empieza arriba del todo, asi que la barra ocupa su sitio en el flujo, justo
   donde estaba la vieja `.pubnav` — debajo del logotipo y encima del texto. Flotando taparia
   las primeras lineas de un documento legal, que es exactamente lo que nadie quiere de un
   documento legal.
   El cristal ya estaba resuelto para este fondo: la pastilla del menu se dejo al 58% de blanco
   precisamente porque mas abajo de la portada tiene detras la pagina en crema. Es el mismo
   fondo que hay aqui desde el primer pixel.
   ============================================================================ */
body:has(> .wrap) .skybar{ margin:14px 0 26px; padding-inline:0; }

/* ⚑ `.wrap` recorta a 720px y la barra va DENTRO, asi que las tres columnas se reparten ese
   ancho y no la ventana entera. Es lo correcto: el menu queda centrado sobre la columna de
   texto, que es lo que se esta leyendo. */

/* ⚑⚑ EL PANEL DEL TELEFONO NECESITA QUE LA BARRA ESTE POSICIONADA. Se abre con
   `position:absolute; left:14px; right:14px`, y una caja absoluta se cuelga del ANCESTRO
   POSICIONADO mas cercano. En la portada eso es la propia barra, que va `fixed`. Aqui la barra
   es `relative` por la regla base de arriba — si alguien la devuelve a `static`, el panel se
   colgaria del `.wrap` o del documento y saldria descolocado. Esa es la razon de que la base
   sea `relative` y no `static`. */

/* ============================================================
   MODO DE SERVICIO — la tapa de las paginas publicas.
   ⚑⚑ `.svc-dark[hidden]` no es opcional: `display:grid` gana al atributo `hidden`, asi que sin
   esta regla la tapa se queda puesta para siempre en cuanto se ensenie una vez — es decir, justo
   cuando el mantenimiento TERMINA. Misma regla y mismo motivo que en `styles.css`.
   ============================================================ */
.svc-dark{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--bg); padding:24px; }
.svc-dark[hidden]{ display:none; }
.svc-dark-in{ max-width:36ch; text-align:center; }
.svc-dark-in h2{
  font-family:var(--font-display); font-weight:600; font-size:1.7rem;
  margin:0 0 0.5em; color:var(--ink); }
.svc-dark-in p{ color:var(--ink-soft); line-height:1.6; margin:0; }