/* Storyfeel — shared styles for the public legal pages (privacy / terms / refund).
   Ports the app's template system: the page adopts the reader's selected theme
   (Classic / Dark Academia / Romance / Cozy Cottage / Slick Modern / Daybreak / Desert / Seashore / Forest / Mountain / Taiga / Slow Burn / One More Chapter / Whodunit / Space Opera),
   defaulting to Daybreak. Palettes mirror styles.css :root[data-theme] — keep in
   sync if the app's theme colors change. */

/* ---- Theme palettes (subset mirrored from styles.css) ---- */
/* ⚑ Texto del botón CTA. Siempre fue #fff, lo cual es correcto mientras --rose-deep sea oscuro.
   En un tema OSCURO --rose-deep es CLARO (es el color de los enlaces sobre fondo oscuro), así que
   el blanco encima queda ilegible: dark-academia lleva tiempo en 1.9:1 y forest habría salido a
   1.77:1. Se convierte en un token con valor por defecto blanco, y los dos temas oscuros lo
   sobreescriben con tinta oscura — forest queda en 9.47:1. */
:root{ --cta-ink:#fff; }
/* ⚑ Fondo del botón CTA. El texto por sí solo NO basta: en un acento de tono MEDIO fallan los dos
   extremos a la vez — el rosa de Clásico (#B97C82) da 3.35:1 con blanco y 5.18:1 con tinta oscura,
   pero el de Romance (#C64F6D) da 4.43:1 con blanco y 3.34:1 con su propia tinta, y Cozy 4.20:1 y
   2.95:1. Cuando ningún color de texto pasa, lo que tiene que moverse es el FONDO. Por defecto es
   el acento; los tres temas que no llegaban lo oscurecen manteniendo tono y saturación. */
:root{ --cta-bg:var(--rose-deep); }
:root{ /* Classic (default) */
  --bg:#F1ECE3; --surface:#FBF9F5; --ink:#1C1A17; --ink-soft:#706A62; --ink-faint:#8A8279;
  --rose:#D89AA0; --rose-deep:#A0555D; --line:#E2DACC; --radius:14px;
  --card-shadow:0 1px 2px rgba(28,26,23,.04), 0 10px 24px rgba(28,26,23,.05);
  --font-display:'Source Serif 4',Georgia,serif;
  --font-body:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --app-gradient:
    radial-gradient(ellipse 66% 66% at 0% 0%, rgba(240,184,168,0.62) 0%, transparent 72%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(240,184,168,0.72) 0%, transparent 72%),
    #F1ECE3;
}
/* ⚑ El override de Clásico va AQUÍ y no dentro del bloque de arriba. La paleta de Clásico vive en
   un `:root` PELADO, así que cualquier token que se meta ahí lo heredan TODOS los temas que no lo
   sobreescriban — puse este valor ahí primero y los cinco temas oscuros se quedaron con el botón
   rosa de Clásico y su propia tinta oscura encima: 3.39–3.76:1. Con el selector acotado sólo
   afecta a Clásico, y `:not([data-theme])` cubre el instante anterior a que legal.js ponga el
   atributo, que es cuando la página también se pinta en Clásico. */
:root:not([data-theme]), :root[data-theme="default"]{ --cta-bg:#A55A61; }
:root[data-theme="dark-academia"]{
  --bg:#1d1a15; --surface:#272219; --ink:#ece3d2; --ink-soft:#a99f8a; --ink-faint:#6f6857;
  --rose:#8f7350; --rose-deep:#c2a063; --line:#39332a;
  --cta-ink:#1d1a15;   /* mismo motivo que forest: --rose-deep es claro en un tema oscuro */
  --card-shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.42);
  --app-gradient:
    radial-gradient(ellipse 66% 66% at 0% 0%, rgba(74,56,40,0.62) 0%, transparent 72%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(61,42,24,0.72) 0%, transparent 72%),
    #1d1a15;
}
:root[data-theme="romance"]{
  --bg:#fbedf0; --surface:#fff7f8; --ink:#3c1f29; --ink-soft:#8d6a73; --ink-faint:#c2a3ab;
  --rose:#e98a9b; --rose-deep:#C03E5F; --line:#f3d8de;
  --cta-bg:#C44968;   /* 2 puntos más oscuro basta: 4.67:1 */
  --card-shadow:0 1px 2px rgba(150,50,75,.05), 0 10px 24px rgba(150,50,75,.09);
  --app-gradient:
    radial-gradient(ellipse 66% 66% at 0% 0%, rgba(212,176,212,0.62) 0%, transparent 72%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(196,154,196,0.72) 0%, transparent 72%),
    #fbedf0;
}
:root[data-theme="cozy"]{
  --bg:#f1ecdb; --surface:#faf6ea; --ink:#393426; --ink-soft:#7b735d; --ink-faint:#a79e84;
  --rose:#c08a68; --rose-deep:#985C3E; --line:#e3dabf;
  --cta-bg:#A56344;   /* 3 puntos más oscuro: 4.70:1 */
  --card-shadow:0 1px 2px rgba(80,60,30,.05), 0 10px 24px rgba(80,60,30,.08);
  --app-gradient:
    radial-gradient(ellipse 66% 66% at 0% 0%, rgba(192,138,104,0.62) 0%, transparent 72%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(192,138,104,0.72) 0%, transparent 72%),
    #f1ecdb;
}
:root[data-theme="slick"]{
  --bg:#f3f5f8; --surface:#ffffff; --ink:#0f1318; --ink-soft:#58616c; --ink-faint:#818991;
  --rose:#5b8def; --rose-deep:#2A6BDF; --line:#e7eaef; --radius:9px;
  --card-shadow:0 1px 2px rgba(15,19,24,.04), 0 8px 22px rgba(15,19,24,.07);
  --app-gradient:
    radial-gradient(ellipse 66% 66% at 0% 0%, rgba(200,216,240,0.62) 0%, transparent 72%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(176,200,232,0.72) 0%, transparent 72%),
    #f3f5f8;
}
:root[data-theme="slowburn"]{
  --bg:#1E1013; --surface:#2A181C; --ink:#F0DCD8; --ink-soft:#C0989A; --ink-faint:#8E6A6D;
  --rose:#BE4B52; --rose-deep:#E8827A; --line:#3D2429; --radius:14px;
  --cta-ink:#200F12;
  --card-shadow:0 1px 2px rgba(0,0,0,.40), 0 12px 28px rgba(0,0,0,.48);
  --app-gradient:
    radial-gradient(ellipse 58% 52% at 8% 0%, rgba(190,75,82,0.20) 0%, transparent 68%),
    radial-gradient(ellipse 60% 56% at 100% 100%, rgba(90,30,36,0.55) 0%, transparent 72%),
    #1E1013;
}
:root[data-theme="onemore"]{
  --bg:#0F1424; --surface:#171D31; --ink:#E4E7F2; --ink-soft:#A8AECB; --ink-faint:#767D9C;
  --rose:#C98A3C; --rose-deep:#F0B45E; --line:#262D45; --radius:14px;
  --cta-ink:#12172A;
  --card-shadow:0 1px 2px rgba(0,0,0,.42), 0 12px 28px rgba(0,0,0,.50);
  --app-gradient:
    radial-gradient(ellipse 52% 46% at 6% 0%, rgba(240,180,94,0.16) 0%, transparent 66%),
    radial-gradient(ellipse 62% 58% at 100% 100%, rgba(20,26,54,0.70) 0%, transparent 72%),
    #0F1424;
}
:root[data-theme="whodunit"]{
  --bg:#E6E6E4; --surface:#FAFAF9; --ink:#191919; --ink-soft:#565654; --ink-faint:#8C8C89;
  --rose:#B0201E; --rose-deep:#8E1512; --line:#D2D2CF; --radius:9px;
  --card-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.10);
  --app-gradient:
    radial-gradient(ellipse 64% 56% at 4% 0%, rgba(255,255,255,0.90) 0%, transparent 68%),
    radial-gradient(ellipse 62% 58% at 100% 100%, rgba(150,150,146,0.30) 0%, transparent 72%),
    #E6E6E4;
}
/* scifi: tema OSCURO -> --rose-deep es claro (es el color de los enlaces), así que el blanco
   encima del CTA quedaría ilegible; --cta-ink lo pone en tinta oscura, 7.93:1. */
:root[data-theme="scifi"]{
  --bg:#0C0B12; --surface:#15131F; --ink:#E9E7F7; --ink-soft:#A9A3C8; --ink-faint:#7B7599;
  --rose:#7A5AF0; --rose-deep:#AE9BFF; --line:#282341; --radius:14px;
  --cta-ink:#140F26;
  --card-shadow:0 1px 2px rgba(0,0,0,.42), 0 12px 30px rgba(0,0,0,.52);
  --app-gradient:
    radial-gradient(ellipse 58% 52% at 6% 0%, rgba(122,90,240,0.22) 0%, transparent 68%),
    radial-gradient(ellipse 62% 58% at 100% 100%, rgba(24,74,92,0.42) 0%, transparent 72%),
    #0C0B12;
}
:root[data-theme="taiga"]{
  --bg:#DEE4E2; --surface:#F7F9F8; --ink:#1E2B2C; --ink-soft:#4F7072; --ink-faint:#729092;
  --rose:#54808E; --rose-deep:#356171; --line:#C9D3D1; --radius:14px;
  --card-shadow:0 6px 18px rgba(30,43,44,.09);
  --app-gradient:
    radial-gradient(ellipse 64% 56% at 4% 0%, rgba(236,241,242,0.90) 0%, transparent 68%),
    radial-gradient(ellipse 62% 58% at 100% 100%, rgba(96,124,120,0.30) 0%, transparent 72%),
    #DEE4E2;
}
:root[data-theme="mountain"]{
  --bg:#E7E6F1; --surface:#FBFBFE; --ink:#232946; --ink-soft:#515A85; --ink-faint:#8389A5;
  --rose:#CE9331; --rose-deep:#8C5F18; --line:#D8D7E6; --radius:14px;
  --card-shadow:0 6px 18px rgba(35,41,70,.09);
  --app-gradient:
    radial-gradient(ellipse 62% 55% at 4% 0%, rgba(246,222,180,0.62) 0%, transparent 68%),
    radial-gradient(ellipse 64% 60% at 100% 100%, rgba(150,148,190,0.45) 0%, transparent 72%),
    #E7E6F1;
}
:root[data-theme="forest"]{
  --bg:#121A13; --surface:#1C271D; --ink:#E9EDD9; --ink-soft:#AFBD9C; --ink-faint:#7C8C6F;
  --rose:#6FA83A; --rose-deep:#9CD34F; --line:#2D3B2D; --radius:14px;
  --cta-ink:#12210F;   /* dark text on a light-green button — see the note at .pn-cta */
  --card-shadow:0 1px 2px rgba(0,0,0,.38), 0 12px 28px rgba(0,0,0,.45);
  --app-gradient:
    radial-gradient(ellipse 58% 52% at 6% 0%, rgba(154,186,86,0.22) 0%, transparent 68%),
    radial-gradient(ellipse 62% 58% at 100% 100%, rgba(58,44,26,0.55) 0%, transparent 72%),
    #121A13;
}
:root[data-theme="seashore"]{
  --bg:#E0F0EE; --surface:#FAFCFB; --ink:#0F4A52; --ink-soft:#3D747B; --ink-faint:#6C979D;
  --rose:#F09257; --rose-deep:#AF4F24; --line:#CBE3DF; --radius:14px;
  --card-shadow:0 6px 18px rgba(15,74,82,.09);
  --app-gradient:
    radial-gradient(ellipse 66% 58% at 0% 0%, rgba(150,220,214,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 62% 58% at 100% 100%, rgba(240,220,186,0.80) 0%, transparent 72%),
    #E0F0EE;
}
:root[data-theme="desert"]{
  --bg:#EFDCBE; --surface:#FBF4E7; --ink:#17456E; --ink-soft:#436889; --ink-faint:#7690A7;
  --rose:#C2673A; --rose-deep:#9E4A22; --line:#E2CDA9; --radius:14px;
  --card-shadow:0 6px 18px rgba(94,58,24,.10);
  --app-gradient:
    radial-gradient(ellipse 70% 60% at 8% 0%, rgba(247,226,190,0.85) 0%, transparent 70%),
    radial-gradient(ellipse 60% 55% at 100% 100%, rgba(196,146,90,0.42) 0%, transparent 72%),
    #EFDCBE;
}
:root[data-theme="daybreak"]{
  --bg:#FCEFDF; --surface:#FFFDFA; --ink:#082B57; --ink-soft:#2E5480; --ink-faint:#4F6D8E;
  --rose:#FF5F00; --rose-deep:#BE4700; --line:#F2E5D3; --radius:14px;
  --card-shadow:0 6px 18px rgba(8,43,87,.07);
  --app-gradient:
    radial-gradient(circle at 10% 0%, #FBD2A8 0%, transparent 55%),
    radial-gradient(circle at 95% 100%, #FDE3D6 0%, transparent 50%),
    #FCEFDF;
}

/* ---- Page layout ---- */
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--app-gradient); background-attachment:fixed; min-height:100vh;
  color:var(--ink); font-family:var(--font-body); line-height:1.65; font-size:17px;
}
.wrap{ max-width:720px; margin:0 auto; padding:32px 20px 64px; }
.brand{ display:flex; align-items:center; gap:8px; justify-content:center; }
/* El logotipo lleva a la portada. Es donde la gente ya pulsa esperando volver al principio, y en
   las paginas legales — a las que se llega desde un pie de pagina o desde un correo — era la unica
   salida que faltaba: se podia leer la privacidad y no tener por donde volver. */
.brand-home{ display:inline-block; text-decoration:none; border-radius:6px; transition:opacity .15s ease; }
.brand-home:hover{ opacity:.75; }
.brand-home:focus-visible{ outline:2px solid var(--rose-deep); outline-offset:4px; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--ink); }
/* ===== El logotipo de Laura, igual que en la app =====
   Misma tecnica y por la misma razon: el SVG se usa de MASCARA y el color lo pone la hoja, asi que
   el logotipo sigue a --ink en vez de necesitar un archivo por color. Aqui las publicas van fijadas
   a Clasico, pero el dia que dejen de estarlo esto ya funciona.
   La palabra "Storyfeel" se queda en el HTML y solo se vuelve transparente: es el nombre del sitio
   y quien lo lee no es solo una persona, tambien es un buscador. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))){
  .brand-name{
    display:block; width:168px; height:32px; color:transparent; user-select:none;
    background-color:var(--ink);
    -webkit-mask:url("../brand/wordmark.svg") center/contain no-repeat;
            mask:url("../brand/wordmark.svg") center/contain no-repeat;
  }
}
@media(max-width:600px){ .brand-name{ width:140px; height:27px; } }
/* Language: the same control the Create-account screen uses (.auth-lang in styles.css), so the
   public pages and the app agree on how you change language. A native <select> with the arrow
   suppressed — which also means a phone gets its own picker, something a row of pills never did,
   and the row stops wrapping to two lines on a narrow screen. */
.langsel{ position:relative; display:flex; align-items:center; width:fit-content; margin:18px auto 26px; }
.langsel .ls-globe{ position:absolute; left:12px; width:16px; height:16px; color:var(--ink-faint); pointer-events:none; }
.langsel .ls-chev{ position:absolute; right:11px; width:15px; height:15px; color:var(--ink-faint); pointer-events:none; }
.langsel select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:1.5px solid var(--line); background:var(--surface); border-radius:999px;
  padding:8px 32px 8px 34px; font-family:inherit; font-size:.84375rem; font-weight:600;
  color:var(--ink); cursor:pointer; transition:.15s;
}
.langsel select:hover{ border-color:var(--rose); }
.langsel select:focus{ outline:none; border-color:var(--rose-deep); box-shadow:0 0 0 3px var(--line); }
/* public header: language + the three ways out of this page. Outside .doc on every page, so the
   `.doc a` colour rule cannot reach these links. */
.pubnav{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:18px 0 26px; }
.pubnav .langsel{ margin:0; }
.pn-link{ font-size:.88rem; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:8px 12px; border-radius:999px; }
.pn-link:hover{ color:var(--rose-deep); }
.pn-link[aria-current="page"]{ color:var(--ink); }
.pn-cta{ font-size:.84375rem; font-weight:700; color:var(--cta-ink); background:var(--cta-bg);
  border:1.5px solid var(--cta-bg); border-radius:999px; padding:8px 18px; text-decoration:none; }
.pn-cta:hover{ filter:brightness(.95); }

/* contact form */
.cform{ background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
  padding:24px 26px 26px; box-shadow:var(--card-shadow); margin-top:18px; }
.cform label{ display:block; font-size:.85rem; font-weight:700; color:var(--ink); margin:14px 0 6px; }
.cform label:first-child{ margin-top:0; }
.cform input, .cform textarea{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:.94rem; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:11px 13px;
  transition:.15s; resize:vertical;
}
.cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--rose-deep); }
/* the honeypot: gone for people, present for a bot reading the DOM */
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* ⚑⚑ --cta-bg/--cta-ink, NO --rose-deep/#fff. Es la misma trampa que ya estaba anotada para el
   boton del encabezado y para los planes, y este boton se habia quedado fuera: --rose-deep es el
   color de los ENLACES, y en un tema oscuro es el tono CLARO. De noche quedaba #E9A7B4 con blanco
   encima = 1.97:1 medido, un boton rosa con el texto invisible. Con el par de siempre da 8.89:1
   de noche y, de dia, el mismo #A55A61 con blanco que ya lleva "Crear cuenta" tres dedos mas
   arriba en esta misma pagina. */
.cf-send{ margin-top:18px; background:var(--cta-bg); color:var(--cta-ink); border:1.5px solid var(--cta-bg);
  border-radius:999px; padding:12px 30px; font-family:inherit; font-size:.94rem; font-weight:700;
  cursor:pointer; transition:.15s; }
.cf-send:hover{ filter:brightness(.95); }
.cf-send:disabled{ opacity:.55; cursor:default; filter:none; }
/* ⚑⚑ --ink-soft, NO --ink-faint. Sobre el --surface del formulario, --ink-faint da 3.60:1 de
   dia (#8A8279 sobre #FBF9F5) y el minimo son 4.5. Curiosamente de NOCHE ese mismo token pasa
   —5.34:1— asi que el fallo solo existia en la mitad clara y por eso costaba verlo. --ink-soft
   deja 5.09:1 de dia y 8.23:1 de noche, y ademas es el token que le toca: esto es texto
   secundario que hay que poder leer, no una pista tenue.
   ⚑ Dos escalones arriba en la escala de 1.125, como el otro sitio donde se hizo lo mismo:
   0.8 x 1.125^2 = 1.0125rem -> 1.01rem, o sea 16.2px. Va en valor fijo y no en clamp a proposito:
   aqui el cuerpo es `font-size:17px` FIJO y ninguna media query lo encoge, asi que la nota se
   queda por debajo del texto normal en todos los anchos. El clamp del otro caso hacia falta
   porque alli el cuerpo es fluido y en movil la letra pequenia acababa siendo la mas grande. */
/* ============================================================================
   EL BUZON DE LA PAGINA DE CONTACTO
   ----------------------------------------------------------------------------
   ⚑⚑ ES UNA MASCARA, NO UNA IMAGEN. El dibujo original es un lapiz sobre papel beige; del
   papel no queda nada — el webp solo lleva la DENSIDAD DEL TRAZO en el canal alfa y el color lo
   pone `background-color` desde aqui. Por eso funciona en los dos temas con un solo fichero:
   grafito sobre la crema de dia, tiza sobre el azul de noche. Un `<img>` con el lapiz oscuro
   quemado dentro se perderia entero en el tema oscuro, que es exactamente el problema que ya
   resolvio asi el logotipo de la app.
   ⚑⚑ TINTA PLENA CON OPACIDAD, no `--ink-soft`. Se probaron las dos y no son lo mismo: con la
   tinta suave el trazo mas oscuro del dibujo ya sale gris medio, asi que TODO el rango tonal se
   aplasta y el buzon se ve lavado. Con `--ink` y opacidad baja se conserva la diferencia entre el
   trazo fuerte y el suave —que es lo unico que tiene un dibujo a lapiz— y aun asi el conjunto
   pesa menos que el formulario, que es lo que se busca.

   ⚑⚑ EL BUZON VA AL LADO DEL FORMULARIO, no en una columna suya. Estuvo primero en una
   rejilla de dos columnas y aquello empujaba el formulario a la izquierda: la pagina dejaba de
   estar centrada para hacerle sitio a un adorno. El formulario se queda en sus 720px centrados y
   el dibujo se coloca en ABSOLUTO pegado a su borde derecho, con 20px de separacion.
   ⚑ `left:calc(100% + 20px)` cuelga de `.ccols`, no de `.wrap`: `.wrap` empieza arriba del todo
   con la marca y la barra dentro, asi que un `top` medido desde ahi habria que ajustarlo a mano
   cada vez que cambie la cabecera. Desde `.ccols`, `top:0` ES el borde de la primera tarjeta y se
   alinea solo.

   ⚑⚑ EL ANCHO TIENE TOPE Y ADEMAS SE ENCOGE, y las dos cosas hacen falta. Pegado al
   formulario, lo que queda a la derecha es (100vw - 680) / 2 - 20, y eso NO da los 414px hasta
   una ventana de ~1580: a 1400 caben 328 y a 1500, 378. Con el ancho fijo el dibujo se saldria
   por la derecha y apareceria una barra de desplazamiento horizontal en toda la pagina — por un
   adorno. Con `min()` mide 414 cuando cabe y lo que haya cuando no, y nunca empuja nada.
   El `50%` de dentro del calc es la mitad de `.ccols`, o sea la distancia de su centro a su
   borde; el resto es la cuenta de arriba puesta en CSS.

   ⚑⚑ SOLO SI CABE. Por debajo de 1300px la ilustracion no se encoge mas: se QUITA (ahi ya
   quedarian menos de 280px). Un dibujo con este detalle —los relieves, las letras del buzon— a
   200px no es un dibujo pequenio, es una mancha; y en el movil solo seria peso que descargar
   antes de llegar al formulario. `display:none` en el elemento de la mascara evita tambien la
   peticion del fichero, comprobado en el registro de red.
   ============================================================================ */
.conilus > .doc, .conilus > .cform{ min-width:0; }
.ilus{ display:none; }
/* ⚑ Cada pagina dice solo QUE dibujo y como de grande; todo lo demas —colocacion, mascara,
   tinta, cuando aparece— es comun a las dos y vive en la regla `.ilus` de abajo. */
.ilus-buzon  { --ilus:url("/images/web/mailbox-760.webp");      --ilus-noche:url("/images/web/mailbox-760-noche.webp");      --ilus-prop:760 / 806; --ilus-max:331px; --ilus-op:1; }
.ilus-cartero{ --ilus:url("/images/web/postman-520.webp");      --ilus-noche:url("/images/web/postman-520-noche.webp");      --ilus-prop:520 / 720; --ilus-max:330px; --ilus-op:1; }
.ilus-firma  { --ilus:url("/images/web/signing-520.webp");      --ilus-noche:url("/images/web/signing-520-noche.webp");      --ilus-prop:520 / 598; --ilus-max:340px; --ilus-op:1; }
.ilus-reloj  { --ilus:url("/images/web/refund-watch-600.webp"); --ilus-noche:url("/images/web/refund-watch-600-noche.webp"); --ilus-prop:600 / 571; --ilus-max:330px; --ilus-op:1; }
.ilus-palma  { --ilus:url("/images/web/refund-palm-600.webp");  --ilus-noche:url("/images/web/refund-palm-600-noche.webp");  --ilus-prop:600 / 340; --ilus-max:330px; --ilus-op:1; }
/* ⚑ La unica que sale entera de un PNG de tiza: mismo dibujo y mismo encuadre en los dos temas,
   una mascara de tinta y otra de tiza. Ni ovalo ni inversion. */
.ilus-lectora{ --ilus:url("/images/web/privacy-520.webp");      --ilus-noche:url("/images/web/privacy-520-noche.webp");      --ilus-prop:520 / 673; --ilus-max:386px; --ilus-op:1; }
/* ⚑ Los dos de precios son APAISADOS (1300x900), al reves que los demas. */
.ilus-ella   { --ilus:url("/images/web/pricing-her-700.webp");  --ilus-noche:url("/images/web/pricing-her-700-noche.webp");  --ilus-prop:700 / 627; --ilus-max:380px; --ilus-op:1; }
.ilus-el     { --ilus:url("/images/web/pricing-him-700.webp");  --ilus-noche:url("/images/web/pricing-him-700-noche.webp");  --ilus-prop:700 / 622; --ilus-max:380px; --ilus-op:1; }

/* ⚑⚑ LA VERSION DE MOVIL VA EN EL FLUJO, no colgada de un canto. Se intento una vez pegar un
   dibujo a una esquina en pantalla estrecha y no habia manera de que quedara bien: no sobra
   sitio a los lados, que es justo lo que necesita un dibujo colgado. Metido en la columna,
   debajo de la linea de "ultima actualizacion" y centrado, si cabe — ocupa su propio hueco en
   vez de pelearse por el que no hay.

   ⚑ Lleva `ilus-lectora` para heredar el fichero y la proporcion, pero NO lleva `ilus`: asi no
   le llega nada de la maquinaria de posicion absoluta de abajo y las dos versiones no tienen
   que deshacerse la una a la otra. La de escritorio sigue apareciendo solo a partir de 1300 y
   esta desaparece justo ahi, asi que nunca se ven las dos. */
.ilus-movil{ display:none; }
@media (max-width:1299px){
  .ilus-movil{
    display:block;
    width:min(300px, 76%);
    aspect-ratio:var(--ilus-prop);
    margin:20px auto 6px;
    background-color:var(--ink);
    -webkit-mask:var(--ilus) center top / contain no-repeat;
            mask:var(--ilus) center top / contain no-repeat;
    opacity:var(--ilus-op, .72);
    pointer-events:none;
  }
  /* ⚑ El cartero, un 10% mas pequenio que los demas: es el unico que cae ENTRE el texto y el
     formulario, y a tamanio completo separaba demasiado las dos cosas. 270 = 300 x 0.9 y 68.4%
     = 76% x 0.9, para que encoja lo mismo por las dos ramas del `min()`; con 68% redondo se
     quedaba en el 89.3% y la cuenta no cuadraba. */
  .ilus-movil.ilus-cartero{ width:min(270px, 68.4%); }
  :root[data-sky="night"] .ilus-movil{ --ilus:var(--ilus-noche); opacity:.62; }
}

@media (min-width:1300px){
  .conilus{ position:relative; }
  .ilus{
    display:block; position:absolute;
    aspect-ratio:var(--ilus-prop);
    background-color:var(--ink);
    -webkit-mask:var(--ilus) center top / contain no-repeat;
            mask:var(--ilus) center top / contain no-repeat;
    /* ⚑ Los dibujos de tiza traen su propio tono y NO se igualan en densidad, asi que salen
       mas claros de media; se pintan a opacidad plena (`--ilus-op:1`) para que los oscuros
       lleguen a oscuros. Los antiguos, que si se igualan, se quedan en .72 para no gritar. */
    opacity:var(--ilus-op, .72); pointer-events:none;
  }
  /* --- a la DERECHA, arriba del contenido --- */
  .conilus > .ilus{
    top:0; left:calc(100% + 20px);
    width:min(var(--ilus-max), calc(50vw - 50% - 32px));
  }
  /* --- a la IZQUIERDA, a la altura de un parrafo concreto ---
     ⚑⚑ El ancla es un div de alto CERO metido en el flujo justo detras del parrafo con el que
     tiene que ir. Es la unica forma de atar el dibujo a un punto del TEXTO sin numeros a mano: el
     parrafo mide distinto en cada idioma, asi que un `top` fijo solo acertaria en uno.
     ⚑ `translateY(-50%)` lo centra sobre ese punto en vez de colgarlo hacia abajo, y no depende
     de cuanto mida el dibujo.
     ⚑⚑ El `+47px` son 26 del relleno de `.doc`, 1 de su borde y los 20 de separacion pedidos. El ancla vive
     DENTRO de la caja de contenido de la tarjeta, asi que `100%` es su borde de texto, no el de la
     tarjeta; sin sumar el relleno el dibujo se metia 26px por debajo del borde visible. Si cambia
     el `padding` de `.doc`, cambia este numero.
     ⚑ Y el ancho se calcula contra ESE ancla, que es mas estrecha que `.conilus` — de ahi que la
     resta sea 58 y no 32: 26 de relleno + 20 de hueco + 12 de aire hasta el borde de la ventana. */
  .ilus-ancla{ position:relative; }
  .ilus-ancla > .ilus{
    top:0; transform:translateY(-50%);
    right:calc(100% + 47px);
    width:min(var(--ilus-max), calc(50vw - 50% - 59px));
  }
  /* --- cambios de lado, de altura y de sangrado, para no repetir las dos reglas de arriba --- */
  .conilus > .ilus.ilus-izq  { left:auto; right:calc(100% + 20px); }
  /* ⚑ Al PIE de la caja en vez de a la cabeza. En contacto eso es el pie del formulario sin
     tener que medirlo: `.cform` es el ultimo hijo en flujo de `.conilus` y no lleva margen
     abajo, asi que los dos fondos coinciden — comprobado en los cuatro idiomas, diferencia 0. */
  .conilus > .ilus.ilus-pie  { top:auto; bottom:0; }

  /* ⚑⚑ DE NOCHE VA OTRO FICHERO, no el mismo con otra tinta.
     La mascara guarda DENSIDAD DE LAPIZ, asi que pintada en claro sobre el azul oscuro sale una
     radiografia: brillan las sombras —pelo, ropa oscura, cuencas de los ojos— y la cara iluminada
     se va a negro. En la lectora de privacidad se ve de un vistazo. El fichero `-noche` lleva el
     dibujo INVERTIDO desde el generador, asi que el claro vuelve a ser claro y se lee como tiza
     sobre pizarra. Una sola regla los cambia los siete: `--ilus` se redefine sobre el elemento y
     `mask` la lee al usarla. (0,2,0) gana a `.ilus-buzon` (0,1,0), que es lo que hace falta.
     ⚑ Y baja la opacidad: invertida la mancha media pasa de 0.17 a ~0.38, o sea el doble de luz
     en la pagina; con el .72 del dia el dibujo grita mas que el texto. */
  :root[data-sky="night"] .ilus{
    --ilus:var(--ilus-noche);
    opacity:.62;
    /* ⚑ Si el dibujo de noche viene con otro encuadre, la caja lo sigue; el resto se quedan
       con el suyo de dia, que es lo que dice el `var()` de respaldo. */
  }
}
.cf-note{ font-size:1.01rem; color:var(--ink-soft); margin:12px 0 0; font-style:italic; }
/* ⚑ El asterisco lo pone el CSS y no el HTML porque el texto de esta nota lo REESCRIBE
   `contact.js` al cargar, en los cuatro idiomas (`[data-cf="note"]`): un asterisco escrito en el
   marcado desaparece en cuanto corre el script, y metido en las cuatro cadenas serian cuatro
   sitios donde mantenerlo. Aqui es uno solo y vale para los cuatro.
   ⚑ Va pegado a la frase —sin espacio— porque es una marca de nota al pie, no una vinieta. */
.cf-note::before{ content:"*"; }
.cf-status{ font-size:.88rem; margin:10px 0 0; min-height:1.2em; color:var(--ink-soft); }
.cf-status.good{ color:var(--rose-deep); font-weight:600; }
.cf-status.bad{ color:#b3261e; font-weight:600; }
.doc{
  background:var(--surface); border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px); padding:28px 26px; box-shadow:var(--card-shadow);
}
.doc[hidden]{ display:none; }
.doc h1{ font-family:var(--font-display); font-weight:600; font-size:1.9rem; margin:0 0 .1em; color:var(--ink); }
.doc h4{ font-family:var(--font-display); font-weight:600; font-size:1.06rem; margin:1.4em 0 .3em; color:var(--ink); }
.doc p, .doc li{ color:var(--ink); }
.doc ul{ padding-left:1.2em; }
.doc a{ color:var(--rose-deep); }
.updated{ color:var(--ink-soft); font-size:.9rem; margin:0 0 1.2em; }
/* Translation notice — French and German sections only. Nobody here reads either language well
   enough to vouch for the wording, so the documents say so instead of pretending otherwise. It sits
   between the title and the date, so it is read BEFORE the text rather than discovered after it.
   Deliberately quiet: this is a caveat about wording, not a warning about the terms themselves.
   ⚑ El filete CUELGA en el margen: antes iba con `padding-left`, que empujaba el texto ~13px
   fuera de la columna y dejaba esta línea desalineada del <h1> y de los párrafos. Como
   pseudo-elemento absoluto marca igual y no ocupa sitio en el flujo, así que el texto arranca
   exactamente donde arranca el del cuerpo. No se puede hacer con `margin-left` negativo: en
   pricing.css esta línea necesita `margin-left:auto` para centrarse en la columna de prosa. */
.xlate{
  position:relative;
  color:var(--ink-faint); font-size:.82rem; line-height:1.5; font-style:italic;
  margin:.2em 0 1.2em;
}
.xlate::before{
  content:""; position:absolute; left:calc(-.7em - 2px); top:.15em; bottom:.15em;
  width:2px; border-radius:1px; background:var(--line);
}
.xlate + .updated{ margin-top:-.6em; }
.foot{ margin-top:22px; text-align:center; color:var(--ink-soft); font-size:.9rem; }
.foot a{ color:var(--rose-deep); text-decoration:none; margin:0 6px; white-space:nowrap; }
.backlink{ display:inline-block; margin-top:16px; }