/* Versión final (31 oct 2026) · «súbele el nivel, puedes usar más colores o tonos; elegante, entendible, que impresione».
   Se carga al último y sólo afina: cada capítulo de la casa tiene su tono, el nombre mezcla letras
   y el war room separa por color lo falso (rojo señal), lo original (platino) y la forma (el rosa de Natalia). */

:root{
 --medianoche:#0a1120;--medianoche-2:#101a31;--zafiro:#8fa6d8;
 --rojo-senal:#e5484d;--rojo-suave:#f08a8d;
 --vino:#2a0e1b;--vino-2:#3a1427;
 --ciruela:#160d18;
 --tinta-2:#4a424d;
}

/* ——— La barra: una banda limpia que funciona sobre cualquier tono ——— */
.barra::before{inset:0;background:rgb(11 10 12/.9);border-bottom:1px solid rgb(236 232 226/.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.barra-nombre{font-size:18px;letter-spacing:-.005em}
.barra-nombre i{font-style:italic;color:var(--rosa-suave)}

/* ——— El nombre: Bodoni que se queda, itálica que se mueve, una palo seco ancha que firma ——— */
.nombre-marca .aire-nm-1{letter-spacing:-.035em}
.aire-nm-2>span{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.32em}
.nm-b{font-style:italic;color:var(--rosa-perla)}
/* Campillo es el apellido de su madre: mismo rango que Briseño, en redonda; el hilo rosa nace en su C */
.nm-c{font-family:var(--didona);font-size:1em;font-weight:400;font-style:normal;letter-spacing:-.012em;color:var(--texto)}
.nm-c .aire-c{color:var(--rosa-suave)}
.enye{position:relative;display:inline-block}
.tilde{position:absolute;left:.06em;top:-.04em;width:.56em;height:.2em;overflow:visible;pointer-events:none}
.tilde path{fill:none;stroke:var(--rosa-hilo);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
 .tilde path{animation:tilde-traza 1.1s var(--ease,cubic-bezier(.2,.7,.2,1)) .55s both}
}
@keyframes tilde-traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pie-nombre .nm-c{font-size:1em}
.pie-nombre{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em}


/* ——— Capítulo 5 · El war room, de noche: azul medianoche; lo falso en rojo, lo original en platino ——— */
.wr{background:linear-gradient(var(--medianoche) 0,var(--medianoche) calc(100% - 26svh),var(--onix) 100%);--wr-carta:rgb(16 26 49/.94);--wr-linea:rgb(143 166 216/.2)}
.wr .wr-cabeza .etq{color:var(--zafiro)}
.wr .titular em{color:var(--rosa-suave)}
.wr-vivo .wr-tapa{background:linear-gradient(var(--medianoche) 0,var(--medianoche) calc(100% - 22px),rgb(10 17 32/0))}
.wr-riel li{background:var(--medianoche)}
.wr-n,.wr-v-falso{color:var(--rojo-senal)}
.wr-play{border-left-color:var(--rojo-senal)}
.wr-onda rect.mal{fill:var(--rojo-senal)}
.wr-onda .caja{stroke:var(--rojo-senal)}
.wr-v-real{color:#e9ecf5}
.wr-tel,.wr-fila,.wr-visor,.wr-orden,.wr-pruebas span{background-color:rgb(10 17 32/.86)}
.wr-subt{background:rgb(10 17 32/.9)}
.wr-c-negar{stroke:var(--rojo-senal)}
.wr-c-n-negar{fill:var(--rojo-suave)!important}
.wr-rec span{background:var(--rojo-senal)}
.wr-vivo .wr-paso{border-left-color:var(--zafiro)}
.wr-cuando{color:var(--zafiro)}
/* Leyenda: qué significa cada color de la red */
.wr-leyenda{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 14px);margin:0;display:flex;gap:14px;font:600 8.5px/1 var(--sans);font-stretch:118%;letter-spacing:.14em;text-transform:uppercase;color:var(--sutil);opacity:.9}
.wr-leyenda span{display:inline-flex;align-items:center;gap:6px}
.wr-leyenda i{width:7px;height:7px;border-radius:50%}
.wr-leyenda .l-f i{background:var(--rojo-senal)}
.wr-leyenda .l-o i{background:#d9d7dc}
.wr-leyenda .l-r i{background:var(--rosa-hilo)}
@media (max-width:899px){.wr-leyenda{display:none}}
@media (min-width:900px){.wr-leyenda{left:48%}}

/* ——— Capítulo 3 · El detalle, en ciruela ——— */
.detalle{background:linear-gradient(var(--onix) 0,var(--ciruela) 22svh,var(--ciruela) calc(100% - 22svh),var(--onix) 100%)}

/* ——— Capítulo 8 · Hablemos, en vino ——— */
.conversacion{background:linear-gradient(var(--onix) 0,var(--vino) 30svh,var(--vino-2) 100%)}
.pie-n{background:var(--vino-2);border-top-color:rgb(243 221 228/.12)}
.pie-n .nota{color:rgb(236 232 226/.6)}

/* ——— 31 oct, noche · la casa se despliega: primero te informa, al final te dice quién ——— */
[hidden]{display:none!important}


/* El war room abre con una toma del cuarto de noche (video sin personas) */
.wr{padding-top:0}
.wr-cine{position:absolute;left:0;right:0;top:0;height:92svh;overflow:hidden;z-index:1;pointer-events:none}
.wr-cine img,.wr-cine video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.wr-cine::after{content:"";position:absolute;inset:0;background:linear-gradient(rgb(10 17 32/.62) 0,rgb(10 17 32/.38) 38%,rgb(10 17 32/.7) 72%,var(--medianoche) 100%)}
.wr .wr-cabeza{min-height:92svh;display:grid;align-content:end;padding-bottom:8svh}
.wr .wr-cabeza>.nudo{top:auto;bottom:calc(8svh + 4.6em)}
.wr .wr-cabeza .sub{color:#d5d9e6}
@media (prefers-reduced-motion:reduce){.wr-cine video{display:none}}

/* Ktarsis: la mano sale del mar cuando la portada ya se juntó (video sin sonido, una vez) */
.k-cine{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%;opacity:0;transition:opacity .5s ease;z-index:3}
.p-ktarsis.sale .k-cine{opacity:1}

/* Revisión de Astra (31 oct): una señal discreta hacia «Lo que pasa» y un war room más corto */
.aire-baja{display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:40px;font:600 10.5px/1 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--rosa-suave);text-decoration:none;border-bottom:1px solid rgb(196 92 124/.6)}
.aire-baja span{display:inline-block}
@media (prefers-reduced-motion:no-preference){.aire-baja span{animation:baja 2.4s var(--ease) 2s infinite}}
@keyframes baja{0%,60%,100%{transform:none}30%{transform:translateY(4px)}}
.wr-vivo .wr-pasos{gap:40svh}
@media (min-width:900px){.wr-vivo .wr-pasos{gap:36svh}}

/* Ktarsis (31 oct): se deja caer al mar, se rompe y sale con ironía. La primera imagen es el mismo primer cuadro del video. */
.k-cine{opacity:1;object-position:50% 50%}
.p-ktarsis .p-arte img{object-position:50% 50%}

/* ——— 1 nov · De vuelta a los colores de Natalia: ónix, su rosa y platino. Los tonos de capítulo se retiran. ——— */
:root{--medianoche:#0b0a0c;--medianoche-2:#141216;--zafiro:#d9d7dc;--rojo-senal:#c45c7c;--rojo-suave:#e6b4c2;--vino:#0b0a0c;--vino-2:#0b0a0c;--ciruela:#0b0a0c}
.wr{background:var(--onix)}
.wr-cine img,.wr-cine video{filter:grayscale(1) contrast(1.05)}
.wr-cine::after{background:linear-gradient(rgb(11 10 12/.6) 0,rgb(11 10 12/.35) 38%,rgb(11 10 12/.72) 72%,var(--onix) 100%)}
.wr .wr-cabeza .sub{color:var(--sutil)}
.wr-v-falso,.wr-n{color:var(--rosa-hilo)}
.wr-c-negar{stroke:var(--rosa-tinta)}
.conversacion,.pie-n{background:var(--onix)}
.pie-n{border-top-color:var(--linea-n)}
.wr{--wr-carta:rgb(20 18 22/.94);--wr-linea:var(--linea-n)}