/* ==========================================================================
   Zelve — hoja de estilo
   Identidad: monograma LZ, azules suaves + azul marino, dorado como único
   acento. Serif para títulos, caligráfica solo para el lema, sans para el
   cuerpo. Las hojas en acuarela son ornamento, con mesura.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* color */
  --tinta:#16212c;          /* texto principal */
  --marino:#24405c;         /* azul marino de marca */
  --marino-h:#1a3148;       /* marino en hover */
  --azul:#4d7ca3;
  --azul-cl:#8fb4d0;
  --bruma:#cfe0ee;
  --niebla:#e2ecf5;
  --nube:#f8fbfd;           /* superficies */
  --lienzo:#eaf1f8;         /* fondo general */
  --suave:#566a7e;          /* texto secundario (5.3:1 sobre --nube) */
  --oro:#b08d5b;            /* líneas, estrellas, filetes */
  --oro-cl:#d9c29a;
  --oro-txt:#7f6238;        /* dorado legible: 5,4:1 sobre --nube */
  --hero-sub:#37485a;       /* el subtítulo del hero va sobre cabello */
  --blanco:#ffffff;
  color-scheme:light;

  /* Tokens de papel: lo que cambia entre día y noche. Van aparte de los
     de marca para que el tema oscuro no tenga que tocar la identidad. */
  --accion:#24405c;         /* botón principal */
  --accion-h:#1a3148;
  --sobre-accion:#ffffff;
  --titulos:#24405c;        /* titulares de tarjeta, iconos, marca */
  --marco:#ffffff;          /* el filete blanco de las fotos */
  --vidrio-rgb:248,251,253; /* barra y botones translúcidos */
  --velo-rgb:248,251,253;   /* la neblina del hero */
  --claro-rgb:255,255,255;
  --reel-fondo:#0f1a24;
  --hoja-mezcla:multiply;
  --hoja-opacidad:.5;
  --pie-fondo:#24405c;
  --pie-texto:#e8eff6;
  --pie-nombre:#ffffff;
  --pie-lema:#d9c29a;
  --pie-enlace:#cfe0ee;
  --sombra-1:0 1px 2px rgba(22,33,44,.05),0 4px 14px rgba(22,33,44,.055);
  --sombra-2:0 2px 6px rgba(22,33,44,.07),0 14px 38px rgba(22,33,44,.10);
  --sombra-3:0 20px 60px rgba(22,33,44,.16);

  /* tipografía */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --caligrafia:"Great Vibes",cursive;

  /* espacio (escala de 4) */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px;
  --ancho:1120px;
  --seccion:clamp(72px,11vw,128px);

  /* forma y profundidad */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;

  /* movimiento */
  --rapido:160ms; --medio:260ms; --lento:420ms;
  --curva:cubic-bezier(.22,.61,.36,1);

  /* capas */
  --z-hoja:1; --z-contenido:2; --z-barra:40; --z-intro:1000;
}

/* ---------- 1b. Modo noche ----------
   Mismo sistema, otro papel: fondos de tinta azul, texto claro y el dorado
   pasando a primer plano. El botón principal se vuelve dorado porque un
   azul marino sobre fondo oscuro se pierde. */
:root[data-tema="noche"]{
  --tinta:#e9eff6;
  --marino:#bcd4e8;
  --marino-h:#d6e5f2;
  --bruma:#2f4457;
  --niebla:#223141;
  --nube:#15202c;
  --lienzo:#0d151f;
  --suave:#a9bdd0;
  --oro:#c9a96f;
  --oro-cl:#e2cda6;
  --oro-txt:#d6bb8a;
  --hero-sub:#a9bdd0;

  --accion:#d9c29a;
  --accion-h:#e7d4b4;
  --sobre-accion:#13202c;
  --titulos:#cfe0ee;
  --marco:#26384a;
  --vidrio-rgb:17,26,37;
  --velo-rgb:13,21,31;
  --claro-rgb:226,236,246;
  --reel-fondo:#0a111a;
  --hoja-mezcla:screen;
  --hoja-opacidad:.26;
  --pie-fondo:#080e16;
  --pie-texto:#c3d6e8;
  --pie-nombre:#ffffff;
  --pie-lema:#e2cda6;
  --pie-enlace:#bcd4e8;
  --hero-fondo:
    radial-gradient(72% 46% at 50% 40%,#1c2c3e 0%,#131f2c 56%,transparent 100%),
    linear-gradient(180deg,#111c28 0%,#0d151f 48%,#0a121b 100%);
  --sombra-1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.32);
  --sombra-2:0 2px 6px rgba(0,0,0,.36),0 14px 38px rgba(0,0,0,.42);
  --sombra-3:0 20px 60px rgba(0,0,0,.55);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}

body{
  margin:0;
  background:var(--lienzo);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}

a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,dl,dd,figure,blockquote{margin:0}

/* foco siempre visible, en dorado para que no choque con la marca */
:focus-visible{
  outline:3px solid var(--oro);
  outline-offset:3px;
  border-radius:4px;
}

/* sólo para lectores de pantalla */
.vo{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.saltar{
  position:absolute;left:var(--e4);top:-60px;z-index:calc(var(--z-intro) + 1);
  background:var(--accion);color:var(--sobre-accion);
  padding:12px 18px;border-radius:var(--r-sm);font-size:15px;
  transition:top var(--rapido) var(--curva);
}
.saltar:focus{top:var(--e4)}

/* ---------- 2. Tipografía compartida ---------- */
.titulo{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,6.4vw,58px);
  line-height:1.08;
  letter-spacing:.005em;
  text-wrap:balance;
  color:var(--tinta);
}

.rotulo{
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--suave);
  font-weight:500;
  margin-bottom:var(--e3);
}

/* la caligráfica SOLO para el lema */
.lema{
  font-family:var(--caligrafia);
  font-size:clamp(25px,4.6vw,34px);
  line-height:1.45;
  color:var(--oro-txt);
  font-weight:400;
}
.lema--grande{font-size:clamp(29px,5.6vw,42px)}

.filigrana{
  display:flex;align-items:center;justify-content:center;
  gap:var(--e3);
  margin:var(--e4) 0 var(--e5);
  color:var(--oro);
}
.filigrana::before,.filigrana::after{
  content:"";height:1px;width:clamp(36px,9vw,80px);
  background:linear-gradient(90deg,transparent,var(--oro-cl),transparent);
}
.filigrana span{font-size:12px;line-height:1}

.cabecera{max-width:640px;margin:0 auto var(--e7);text-align:center}
.cabecera__bajada{color:var(--suave);font-size:16.5px;max-width:52ch;margin:0 auto}

.seccion{
  position:relative;
  padding:var(--seccion) var(--e5);
  z-index:var(--z-contenido);
}
.seccion > *:not(.hoja){position:relative;z-index:var(--z-contenido)}

/* ---------- 3. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 26px;
  background:var(--accion);color:var(--sobre-accion);
  font-family:var(--sans);font-size:15.5px;font-weight:500;
  letter-spacing:.015em;
  border:1px solid var(--accion);border-radius:var(--r-pill);
  box-shadow:var(--sombra-1);
  cursor:pointer;
  text-align:center;
  transition:background var(--medio) var(--curva),
             transform var(--rapido) var(--curva),
             box-shadow var(--medio) var(--curva);
}
.btn:hover{background:var(--accion-h);border-color:var(--accion-h);box-shadow:var(--sombra-2)}
.btn:active{transform:scale(.975)}
.btn__ico{width:19px;height:19px;flex:none;fill:currentColor}

.btn--sm{min-height:44px;padding:10px 18px;font-size:14.5px}
.btn--sm .btn__ico{width:17px;height:17px}

.btn--lg{min-height:54px;padding:16px 34px;font-size:16.5px}
.btn--xl{
  min-height:62px;padding:18px 40px;font-size:19px;letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  box-shadow:var(--sombra-2);
}
.btn--xl .btn__ico{width:23px;height:23px}

/* botón secundario: contorno fino, dorado al pasar */
.btn--linea{
  background:transparent;color:var(--titulos);
  border:1px solid var(--bruma);
  box-shadow:none;font-weight:500;
  min-height:46px;padding:11px 20px;font-size:14.5px;
}
.btn--linea:hover{
  background:rgba(var(--claro-rgb),.5);
  border-color:var(--oro-cl);
  color:var(--marino-h);
  box-shadow:var(--sombra-1);
}

/* ---------- 4. Hojas de acuarela (ornamento) ---------- */
.hoja{
  position:absolute;
  mix-blend-mode:var(--hoja-mezcla);
  opacity:var(--hoja-opacidad);
  z-index:var(--z-hoja);
  pointer-events:none;
  /* el recorte es rectangular; la máscara tiene que apagar el borde del
     rectángulo o se ve el canto de la foto sobre el fondo claro */
  /* El recorte es rectangular. Para que no se vea el canto de la foto
     sobre el fondo claro, la máscara va centrada y su radio transparente
     (60%) cae ANTES del borde más cercano (50/74 = 68% y 50/64 = 78%).
     Con el centro desplazado el borde opuesto siempre asomaba. */
  -webkit-mask-image:radial-gradient(74% 64% at 50% 50%,#000 2%,rgba(0,0,0,.5) 36%,transparent 60%);
          mask-image:radial-gradient(74% 64% at 50% 50%,#000 2%,rgba(0,0,0,.5) 36%,transparent 60%);
}
.hoja--si{top:-10px;left:-34px;width:min(31vw,210px)}
.hoja--sd{top:-16px;right:-28px;width:min(25vw,170px)}
.hoja--id{bottom:-30px;right:-40px;width:min(30vw,215px)}
.hoja--ii{bottom:-30px;left:-40px;width:min(30vw,215px)}
@media (max-width:600px){ .hoja{opacity:calc(var(--hoja-opacidad) * .76)} }

/* ---------- 5. Barra ---------- */
.barra{
  position:sticky;top:0;z-index:var(--z-barra);
  display:flex;align-items:center;gap:var(--e4);
  padding:10px clamp(14px,3.4vw,28px);
  padding-top:max(10px,env(safe-area-inset-top));
  background:rgba(var(--vidrio-rgb),.78);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  transition:background var(--medio) var(--curva),
             border-color var(--medio) var(--curva),
             box-shadow var(--medio) var(--curva);
}
.barra.es-fija{
  background:rgba(var(--vidrio-rgb),.94);
  border-bottom-color:var(--niebla);
  box-shadow:var(--sombra-1);
}
.barra__marca{display:flex;align-items:center;gap:9px;flex:none;min-height:44px}
.barra__marca img{width:32px;height:auto}
.barra__marca span{
  font-family:var(--serif);font-size:23px;font-weight:500;
  letter-spacing:.17em;color:var(--titulos);
}
.barra__nav{display:none;margin-left:auto;gap:var(--e5)}
.barra__nav a{
  font-size:14.5px;color:var(--suave);
  padding:8px 2px;position:relative;
  transition:color var(--medio) var(--curva);
}
.barra__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
  background:var(--oro);transform:scaleX(0);transform-origin:left;
  transition:transform var(--medio) var(--curva);
}
.barra__nav a:hover{color:var(--titulos)}
.barra__nav a:hover::after{transform:scaleX(1)}
.barra__acciones{display:flex;align-items:center;gap:var(--e2);margin-left:auto}
.barra__nav + .barra__acciones{margin-left:var(--e5)}

.icono-enlace{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:var(--r-pill);
  color:var(--titulos);
  transition:background var(--medio) var(--curva),color var(--medio) var(--curva);
}
.icono-enlace svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}
.icono-enlace:hover{background:var(--niebla);color:var(--marino-h)}

/* idioma y tema: solo existen si hay JavaScript, porque sin él no harían
   nada. Los enseña la clase .js que pone el script del <head>. */
.barra__opciones{display:none;align-items:center;gap:6px}
.js .barra__opciones{display:flex}

.pildora{
  display:grid;place-items:center;
  width:44px;height:44px;padding:0;
  background:transparent;
  border:1px solid var(--niebla);
  border-radius:var(--r-pill);
  color:var(--titulos);
  cursor:pointer;
  transition:background var(--medio) var(--curva),
             border-color var(--medio) var(--curva),
             color var(--medio) var(--curva);
}
.pildora:hover{background:var(--niebla);border-color:var(--bruma)}
.pildora__txt{
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;line-height:1;
}
.pildora__ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.ico-dia{display:none}
:root[data-tema="noche"] .ico-dia{display:block}
:root[data-tema="noche"] .ico-noche{display:none}

/* en pantallas estrechas el Instagram de la barra sobra: está en la
   sección de cita y en el pie, y aquí hace falta el sitio */
@media (max-width:559px){ .barra__ig{display:none} }

/* El rótulo "Zelve" de la barra se retira antes de que algo se salga.
   El umbral es 420 y no 360 porque en español el botón dice "Agendar",
   que es más ancho que "Book": si se mide solo en inglés, no se ve. */
@media (max-width:419px){
  .barra__marca span{display:none}
  .barra{gap:var(--e3);padding-inline:12px}
}
@media (max-width:359px){
  .barra{gap:8px;padding-inline:10px}
  .btn--sm{padding:10px 13px}
  .pildora{width:40px;height:44px}
}
@media (min-width:900px){ .barra__nav{display:flex} }

/* ---------- 6. Portada ---------- */
.hero{
  position:relative;
  min-height:min(100svh,860px);
  display:grid;
  place-items:center;
  padding:clamp(40px,7vh,74px) var(--e5) clamp(104px,13vh,128px);
  overflow:hidden;
  isolation:isolate;
}

.hero__lienzo{
  position:absolute;inset:0;z-index:0;
  /* el mismo degradado que antes pintaba el canvas: hacerlo en CSS ahorra
     una pasada de lienzo completo en cada fotograma */
  background:var(--hero-fondo,linear-gradient(180deg,#f6fafd 0%,#e9f1f8 45%,#dbe8f3 100%));
}
.hero__lienzo > *{pointer-events:none}
.hero__estatica{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
}
.hero__canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0;transition:opacity 700ms var(--curva);
}
/* El respaldo estático tiene dos versiones. La nocturna va como fondo CSS
   en una capa aparte: así el navegador solo la descarga cuando el tema es
   noche, y nunca se bajan las dos. */
.hero__noche{position:absolute;inset:0;opacity:0}
.hero__estatica,.hero__noche{transition:opacity 700ms var(--curva)}
:root[data-tema="noche"] .hero__estatica{opacity:0}

/* El canvas es transparente (su fondo lo pone el CSS), así que si la
   imagen de respaldo se quedara encendida debajo se verían DOS cabellos
   superpuestos: el del canvas y el de la imagen, a distinta escala. Eso
   dibujaba bandas verticales de borde duro. Mientras el canvas esté vivo,
   la imagen se apaga; si el canvas se rinde, vuelve. */
:root.pelo-vivo .hero__estatica,
:root.pelo-vivo[data-tema="noche"] .hero__noche{opacity:0}
:root[data-tema="noche"] .hero__noche{
  opacity:1;
  background:url("media/hero-noche-1440.webp") center top / cover no-repeat;
  background:image-set(url("media/hero-noche-1440.avif") type("image/avif"),
                       url("media/hero-noche-1440.webp") type("image/webp"))
             center top / cover no-repeat;
  background:-webkit-image-set(url("media/hero-noche-1440.avif") type("image/avif"),
                               url("media/hero-noche-1440.webp") type("image/webp"))
             center top / cover no-repeat;
}
@media (max-width:699px){
  :root[data-tema="noche"] .hero__noche{
    background:url("media/hero-noche-720.webp") center top / cover no-repeat;
    background:image-set(url("media/hero-noche-720.avif") type("image/avif"),
                         url("media/hero-noche-720.webp") type("image/webp"))
               center top / cover no-repeat;
    background:-webkit-image-set(url("media/hero-noche-720.avif") type("image/avif"),
                                 url("media/hero-noche-720.webp") type("image/webp"))
               center top / cover no-repeat;
  }
}
.hero__canvas.esta-vivo{opacity:1}

/* Velo: mantiene el texto legible sobre CUALQUIER tono de cabello.
   Es neblina de marca, no un rectángulo gris. */
.hero__velo{
  position:absolute;inset:0;
  background:
    radial-gradient(66% 46% at 50% 44%,rgba(var(--velo-rgb),.6) 0%,rgba(var(--velo-rgb),.5) 44%,rgba(var(--velo-rgb),.18) 74%,transparent 100%),
    linear-gradient(180deg,rgba(var(--velo-rgb),.6) 0%,rgba(var(--velo-rgb),0) 11%),
    linear-gradient(0deg,var(--lienzo) 0%,rgba(234,241,248,0) 17%);
}

.hero__texto{
  position:relative;z-index:var(--z-contenido);
  text-align:center;max-width:620px;
  display:flex;flex-direction:column;align-items:center;
}
/* Neblina propia del bloque de texto. El velo general es suave a
   propósito, para que el cabello se vea; el contraste del texto no puede
   depender de él, porque detrás puede haber una hebra clara o una oscura.
   Esto lo garantiza sin tapar el cabello de los lados. */
.hero__texto::before{
  content:"";
  position:absolute;
  inset:-9% -16% -7%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(62% 58% at 50% 52%,
    rgba(var(--velo-rgb),.95) 0%,
    rgba(var(--velo-rgb),.93) 54%,
    rgba(var(--velo-rgb),.86) 72%,
    rgba(var(--velo-rgb),.4) 88%,
    rgba(var(--velo-rgb),0) 100%);
}
@media (max-width:600px){ .hero__texto::before{inset:-7% -22% -6%} }
.hero__marca{width:clamp(78px,15vw,112px);height:auto;margin-bottom:var(--e2)}
.hero__nombre{
  font-family:var(--serif);
  font-size:clamp(39px,8.6vw,64px);
  line-height:1;font-weight:400;
  letter-spacing:.2em;text-indent:.2em;
  color:var(--titulos);
}
.hero__texto .lema{margin-top:var(--e2)}
.hero__titular{
  font-family:var(--serif);
  font-size:clamp(25px,4.6vw,37px);
  font-weight:300;line-height:1.16;
  margin-top:var(--e3);
  color:var(--tinta);
  text-wrap:balance;
}
.hero__sub{
  margin-top:var(--e3);
  color:var(--hero-sub);font-size:15.5px;max-width:44ch;
}
.hero__texto .btn{margin-top:var(--e5)}

/* etiqueta del tono */
.tono{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(28px,env(safe-area-inset-bottom));
  z-index:var(--z-contenido);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;width:min(92vw,420px);
}
.tono__btn{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:9px 18px;
  background:rgba(var(--vidrio-rgb),.8);
  border:1px solid var(--bruma);border-radius:var(--r-pill);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--titulos);cursor:pointer;
  transition:background var(--medio) var(--curva),border-color var(--medio) var(--curva);
}
.tono__btn:hover{background:rgba(var(--vidrio-rgb),.96);border-color:var(--oro-cl)}
.tono__punto{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:1px solid var(--bruma);
  background:linear-gradient(160deg,#241a13,#c49a6a);
  transition:background var(--lento) var(--curva);
}
.tono__pista{font-size:12.5px;color:var(--suave);letter-spacing:.04em}

/* ---------- 7. Entradas por sección ---------- */
.js .entra{opacity:0;transform:translateY(18px)}
.js .entra.se-ve{
  opacity:1;transform:none;
  transition:opacity 620ms var(--curva),transform 620ms var(--curva);
}

/* ---------- 8. Lauren ---------- */
.lauren{background:var(--nube);border-top:1px solid var(--niebla);border-bottom:1px solid var(--niebla)}
.lauren__caja{
  max-width:var(--ancho);margin:0 auto;
  display:grid;gap:clamp(28px,5vw,64px);
  align-items:center;
}
.lauren__foto{position:relative}
.lauren__texto .rotulo{text-align:left}
.lauren__texto .filigrana{justify-content:flex-start;margin-left:0}
.lauren__texto .filigrana::before{display:none}
.lauren__intro{color:var(--suave);margin-top:var(--e2);max-width:46ch}
.lauren__firma{margin-top:var(--e5)}

/* marcadores de contenido pendiente */
.marcador{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:var(--e5);
  border:1.5px dashed var(--oro-cl);
  border-radius:var(--r-md);
  background:
    repeating-linear-gradient(135deg,rgba(217,194,154,.11) 0 10px,transparent 10px 20px),
    var(--lienzo);
  color:var(--suave);
}
.marcador strong{
  font-family:var(--sans);font-weight:600;font-size:13px;
  letter-spacing:.14em;color:var(--oro-txt);
}
.marcador span{font-size:14.5px;line-height:1.55}
.marcador svg{
  width:30px;height:30px;margin-bottom:var(--e2);
  fill:none;stroke:var(--oro);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
}
.marcador--foto{
  aspect-ratio:4/5;
  align-items:center;justify-content:center;text-align:center;
  border-radius:clamp(60px,16vw,120px) clamp(60px,16vw,120px) var(--r-md) var(--r-md);
}
.marcador--texto{margin-top:var(--e5);max-width:52ch}

@media (min-width:860px){
  .lauren__caja{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
}

/* ---------- 9. Servicios ---------- */
.servicios__lista{
  max-width:var(--ancho);margin:0 auto;
  display:grid;gap:var(--e5);
  grid-template-columns:repeat(auto-fit,minmax(282px,1fr));
}
.tarjeta{
  display:flex;flex-direction:column;
  padding:var(--e6) var(--e5) var(--e5);
  background:var(--nube);
  border:1px solid var(--niebla);
  border-radius:var(--r-lg);
  box-shadow:var(--sombra-1);
  position:relative;overflow:hidden;
  transition:transform var(--medio) var(--curva),
             box-shadow var(--medio) var(--curva),
             border-color var(--medio) var(--curva);
}
.tarjeta::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,var(--oro-cl),transparent);
  opacity:0;transition:opacity var(--medio) var(--curva);
}
.tarjeta:hover{transform:translateY(-4px);box-shadow:var(--sombra-2);border-color:var(--bruma)}
.tarjeta:hover::before{opacity:1}
.tarjeta__ico{
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;background:var(--lienzo);border:1px solid var(--niebla);
  margin-bottom:var(--e4);
}
.tarjeta__ico svg{
  width:25px;height:25px;fill:none;stroke:var(--titulos);
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;
}
.tarjeta h3{
  font-family:var(--serif);font-size:27px;font-weight:500;
  line-height:1.15;color:var(--titulos);margin-bottom:var(--e4);
}
.tarjeta__detalle{display:grid;gap:var(--e3);margin-bottom:var(--e5)}
.tarjeta__detalle dt{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-txt);font-weight:600;
}
.tarjeta__detalle dd{
  margin:2px 0 0;color:var(--suave);font-size:15.5px;line-height:1.6;
}
.tarjeta .btn--linea{margin-top:auto;align-self:flex-start}

/* ---------- 10. Antes y después ---------- */
.cambio{overflow:hidden}
.cambio__caja{
  max-width:var(--ancho);margin:0 auto;
  display:grid;gap:clamp(28px,5vw,56px);align-items:center;
}

.comparar{margin:0}
.comparar__marco{
  position:relative;
  aspect-ratio:2/3;
  max-width:460px;margin:0 auto;
  border-radius:clamp(70px,18vw,140px) clamp(70px,18vw,140px) var(--r-md) var(--r-md);
  overflow:hidden;
  border:5px solid var(--marco);
  box-shadow:var(--sombra-3);
  background:var(--niebla);
  --p:50%;
  touch-action:pan-y;
}
.comparar__img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center top;
}
/* se recorta con clip-path: la imagen nunca se encoge ni se deforma */
.comparar__tapa{
  position:absolute;inset:0;
  -webkit-clip-path:inset(0 calc(100% - var(--p)) 0 0);
          clip-path:inset(0 calc(100% - var(--p)) 0 0);
  will-change:clip-path;
}
.comparar__eti{
  position:absolute;bottom:var(--e4);
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  background:rgba(8,14,22,.68);color:#fff;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  pointer-events:none;
}
.comparar__eti--d{left:var(--e4)}
.comparar__eti--a{right:var(--e4)}
.comparar__linea{
  position:absolute;top:0;bottom:0;left:var(--p);
  width:2px;margin-left:-1px;
  background:linear-gradient(180deg,rgba(var(--claro-rgb),.65),rgb(var(--claro-rgb)) 18%,rgb(var(--claro-rgb)) 82%,rgba(var(--claro-rgb),.65));
  box-shadow:0 0 14px rgba(22,33,44,.35);
  pointer-events:none;
}
.comparar__tirador{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(var(--claro-rgb),.96);
  border:1px solid var(--oro-cl);
  box-shadow:0 4px 18px rgba(22,33,44,.3);
}
.comparar__tirador::before,.comparar__tirador::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.comparar__tirador::before{left:12px;transform:translateY(-50%);border-right:7px solid #24405c}
.comparar__tirador::after{right:12px;transform:translateY(-50%);border-left:7px solid #24405c}

/* el input es el mando real: teclado, arrastre y lector de pantalla */
.comparar__rango{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;padding:0;
  background:transparent;border:0;
  -webkit-appearance:none;appearance:none;
  cursor:ew-resize;
  touch-action:pan-y;
}
.comparar__rango::-webkit-slider-runnable-track{background:transparent;height:100%}
.comparar__rango::-moz-range-track{background:transparent;height:100%}
.comparar__rango::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:48px;height:100%;background:transparent;border:0;cursor:ew-resize;
}
.comparar__rango::-moz-range-thumb{
  width:48px;height:100%;background:transparent;border:0;cursor:ew-resize;
}
.comparar__rango:focus-visible{outline:3px solid var(--oro);outline-offset:-3px;border-radius:0}

.comparar figcaption{
  margin-top:var(--e4);text-align:center;
  font-size:14px;color:var(--suave);max-width:44ch;margin-inline:auto;
}

.cambio__nota{display:flex;flex-direction:column;gap:var(--e5);max-width:46ch}
.cambio__nota p{color:var(--suave);font-size:16.5px}
.cambio__nota .btn--linea{align-self:flex-start}
.cambio__proceso{margin:0}
.cambio__proceso img{
  width:100%;border-radius:var(--r-lg);
  border:5px solid var(--marco);box-shadow:var(--sombra-2);
  aspect-ratio:4/5;object-fit:cover;object-position:center;
}
.cambio__proceso figcaption{
  margin-top:var(--e3);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave);
}

@media (min-width:880px){
  .cambio__caja{grid-template-columns:minmax(0,1fr) minmax(0,.88fr)}
  .cambio__proceso{max-width:286px}
}

/* ---------- 11. Resultados: carrusel protagonista + visor ---------- */
/* Las piezas laterales del carrusel se salen a propósito (es lo que hace
   la profundidad), así que la sección las recorta: si no, empujarían el
   ancho de la página y aparecería scroll horizontal. */
.resultados{background:var(--nube);border-top:1px solid var(--niebla);overflow:hidden}

.escena{
  position:relative;
  max-width:1120px;margin:0 auto;
  --alto:clamp(330px,54vh,470px);
  --paso:60%;
}
@media (min-width:900px){ .escena{--alto:clamp(410px,62vh,540px);--paso:56%} }

/* --- sin JavaScript: una fila que se desliza, con los controles nativos
       del navegador. Es el estado de partida; app.js lo transforma. --- */
.pista{
  display:flex;gap:var(--e4);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:var(--e2) var(--e5) var(--e6);
  margin-inline:calc(var(--e5) * -1);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--bruma) transparent;
}
.pieza{
  position:relative;flex:none;
  width:clamp(186px,56vw,236px);aspect-ratio:9/16;
  scroll-snap-align:start;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--reel-fondo);
  box-shadow:var(--sombra-1);
}
.pieza__video{width:100%;height:100%;object-fit:cover;display:block;background:var(--reel-fondo)}
.pieza__btn{display:none}

/* --- con JavaScript: el protagonista en el centro y los satélites --- */
.escena.viva{perspective:1600px}
.escena.viva .pista{
  display:block;position:relative;
  height:var(--alto);
  overflow:visible;
  margin:0;padding:0;
  transform-style:preserve-3d;
  touch-action:pan-y;            /* el deslizar lateral lo lleva el JS */
}
.escena.viva .pieza{
  position:absolute;top:0;left:50%;
  width:calc(var(--alto) * 0.5625);
  height:var(--alto);
  aspect-ratio:auto;
  z-index:calc(10 - var(--ad,0));
  opacity:calc(1 - var(--ad,0) * 0.34);
  transform:
    translate3d(calc(-50% + var(--d,0) * var(--paso)),0,calc(var(--ad,0) * -170px))
    rotateY(calc(var(--d,0) * -14deg))
    scale(calc(1 - var(--ad,0) * 0.05));
  transition:transform 620ms var(--curva),opacity 620ms var(--curva),box-shadow 620ms var(--curva);
  will-change:transform;
}
.escena.viva .pieza.esta-lejos{opacity:0;pointer-events:none}
.escena.viva .pieza.es-activa{box-shadow:var(--sombra-3)}
.escena.viva .pieza__btn{
  display:block;position:absolute;inset:0;
  width:100%;height:100%;padding:0;margin:0;
  border:0;background:transparent;cursor:pointer;
  border-radius:inherit;
}
.pieza__marco{
  position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 -70px 80px -46px rgba(6,11,18,.72);
  transition:border-color var(--medio) var(--curva);
}
.es-activa .pieza__marco{border-color:var(--oro-cl)}
.pieza__lupa{
  position:absolute;right:10px;bottom:10px;
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(8,14,22,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:scale(.8);
  transition:opacity var(--medio) var(--curva),transform var(--medio) var(--curva);
}
.pieza__lupa svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.es-activa .pieza__lupa{opacity:1;transform:scale(1)}
.pieza__btn:hover .pieza__lupa{transform:scale(1.08)}
.pieza__btn:focus-visible{outline:3px solid var(--oro);outline-offset:3px}

.escena__flecha{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:20;
  display:none;place-items:center;
  width:48px;height:48px;border-radius:50%;
  background:rgba(var(--vidrio-rgb),.92);
  border:1px solid var(--bruma);
  box-shadow:var(--sombra-2);
  cursor:pointer;
  transition:background var(--medio) var(--curva),border-color var(--medio) var(--curva);
}
.escena__flecha svg{width:22px;height:22px;fill:none;stroke:var(--titulos);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.escena__flecha:hover{background:rgba(var(--vidrio-rgb),1);border-color:var(--oro-cl)}
.escena__flecha--izq{left:-6px}
.escena__flecha--der{right:-6px}
@media (min-width:560px){ .escena.viva .escena__flecha{display:grid} }
@media (min-width:1260px){ .escena__flecha--izq{left:-30px} .escena__flecha--der{right:-30px} }

.escena__pie{
  display:flex;align-items:center;justify-content:center;
  gap:var(--e4);margin-top:var(--e6);
}
.escena__pausa{
  display:grid;place-items:center;
  width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--niebla);border-radius:var(--r-pill);
  color:var(--titulos);cursor:pointer;
  transition:background var(--medio) var(--curva),border-color var(--medio) var(--curva);
}
.escena__pausa:hover{background:var(--niebla);border-color:var(--bruma)}
.escena__pausa svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.escena__pausa .ico-play{fill:currentColor;stroke:none}
.escena__pausa .ico-play{display:none}
.escena__pausa.esta-quieto .ico-pausa{display:none}
.escena__pausa.esta-quieto .ico-play{display:block}

.puntos{display:flex;align-items:center;gap:0}
.punto{
  width:24px;height:44px;padding:0;
  background:none;border:0;cursor:pointer;
  display:grid;place-items:center;
}
.punto::before{
  content:"";display:block;
  width:7px;height:7px;border-radius:var(--r-pill);
  background:var(--bruma);
  transition:width var(--medio) var(--curva),background var(--medio) var(--curva);
}
.punto[aria-current="true"]::before{width:20px;background:var(--oro)}
.punto:hover::before{background:var(--oro-cl)}

/* ---------- 11b. Visor a pantalla completa ---------- */
.visor{
  position:fixed;inset:0;z-index:1200;
  width:100%;max-width:100%;height:100%;max-height:100%;
  margin:0;padding:0;border:0;
  background:#05090f;color:#fff;
  overflow:hidden;
}
.visor:not([open]){display:none}
.visor[open]{display:flex;align-items:center;justify-content:center}
.visor::backdrop{background:rgba(4,8,13,.96)}
.visor-abierto{overflow:hidden}

.visor__barras{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;gap:3px;
  padding:12px 14px;
  padding-top:max(12px,env(safe-area-inset-top));
}
.visor__barra{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.26);overflow:hidden}
.visor__barra i{display:block;height:100%;width:var(--p,0%);background:#fff;border-radius:2px}

.visor__cerrar{
  position:absolute;z-index:6;
  top:max(26px,calc(env(safe-area-inset-top) + 16px));right:14px;
  display:grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.14);border:0;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.visor__cerrar svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round}
.visor__cerrar:hover{background:rgba(255,255,255,.24)}

.visor__marco{
  position:relative;
  width:min(100%,calc(100vh * 0.5625));
  height:100%;
  display:grid;place-items:center;
}
.visor__video{width:100%;height:100%;object-fit:contain;background:#05090f}
.visor__zona{
  position:absolute;top:0;bottom:0;z-index:3;
  border:0;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.visor__zona--izq{left:0;width:32%}
.visor__zona--centro{left:32%;width:36%}
.visor__zona--der{right:0;width:32%}
.visor__zona:focus-visible{outline:3px solid var(--oro);outline-offset:-6px}

.visor__estadoIco{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);
  z-index:2;display:grid;place-items:center;
  width:84px;height:84px;border-radius:50%;
  background:rgba(8,14,22,.5);
  opacity:0;pointer-events:none;
  transition:opacity 260ms var(--curva),transform 260ms var(--curva);
}
.visor__estadoIco svg{width:34px;height:34px;fill:#fff}
.visor.esta-quieto .visor__estadoIco{opacity:1;transform:translate(-50%,-50%) scale(1)}

.visor__aviso{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));
  z-index:5;
  padding:9px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:13.5px;letter-spacing:.04em;color:#fff;
}

/* ---------- 12. Cita ---------- */
.cita{
  text-align:center;overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 0%,var(--nube),transparent 70%),
    var(--lienzo);
  border-top:1px solid var(--niebla);
}
.cita > *{max-width:620px;margin-inline:auto}
.cita .titulo{margin-top:var(--e2)}
.cita__texto{color:var(--suave);max-width:46ch;margin-bottom:var(--e7)}

.horario{
  margin-top:var(--e6);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.horario__rotulo{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--oro-txt);font-weight:600;
}
.horario em{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--tinta)}

.enlaces{
  margin-top:var(--e7);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e3) var(--e5);
}
.enlaces a{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:9px 16px;border-radius:var(--r-pill);
  font-size:15px;color:var(--suave);
  transition:color var(--medio) var(--curva),background var(--medio) var(--curva);
  overflow-wrap:anywhere;
}
.enlaces svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5}
.enlaces a:hover{color:var(--titulos);background:var(--nube)}

/* ---------- 13. Pie ---------- */
.pie{
  position:relative;overflow:hidden;
  padding:var(--e8) var(--e5) calc(var(--e7) + env(safe-area-inset-bottom));
  text-align:center;
  background:var(--pie-fondo);
  color:var(--pie-texto);
}
.pie .hoja{opacity:.22;mix-blend-mode:screen}
.pie > *:not(.hoja){position:relative;z-index:var(--z-contenido)}
.pie__marca{width:62px;height:auto;margin:0 auto var(--e4);opacity:.95;filter:brightness(0) invert(1) opacity(.9)}
.pie__nombre{
  font-family:var(--serif);font-size:33px;font-weight:400;
  letter-spacing:.24em;text-indent:.24em;color:var(--pie-nombre);
}
.pie .lema{color:var(--pie-lema);font-size:25px;margin-top:2px}
.pie__ig{margin-top:var(--e5)}
.pie__ig a{
  display:inline-block;min-height:44px;padding:11px 18px;border-radius:var(--r-pill);
  font-size:14.5px;letter-spacing:.1em;color:var(--pie-enlace);
  transition:color var(--medio) var(--curva),background var(--medio) var(--curva);
}
.pie__ig a:hover{color:#fff;background:rgba(255,255,255,.1)}

/* ---------- 14. Pantalla de carga ---------- */
.intro{
  position:fixed;inset:0;z-index:var(--z-intro);
  background:var(--lienzo);
  display:grid;place-items:center;
  overflow:hidden;
}
.intro__mitad{
  position:absolute;top:0;bottom:0;width:50.6%;
  background:linear-gradient(180deg,var(--nube),var(--lienzo) 55%,var(--niebla));
  will-change:transform;
}
.intro__mitad--izq{left:0;transform-origin:left center}
.intro__mitad--der{right:0;transform-origin:right center}
.intro__centro{position:relative;display:grid;place-items:center}
.intro__lz{width:min(46vw,190px);height:auto;overflow:visible}
.intro__trazo{
  fill:none;stroke:var(--oro);stroke-width:4.2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:268;stroke-dashoffset:268;
}
.intro__estrella{fill:var(--oro-cl);opacity:0}
.intro__tijera{
  position:absolute;width:40px;height:40px;
  left:50%;top:50%;
  fill:none;stroke:var(--oro-txt);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;
  transform:translate(-50%,-50%) translateX(-130px);
}
.intro__pie{
  font-family:var(--caligrafia);font-size:26px;color:var(--oro-txt);
  opacity:0;
}

.intro.anima .intro__estrella{animation:lz-chispa 620ms ease-out 1040ms forwards}
.intro.anima .intro__pie{animation:lz-pie 620ms ease-out 980ms forwards}
.intro.anima .intro__tijera{animation:lz-tijera 740ms cubic-bezier(.5,0,.2,1) 1280ms forwards}
.intro.anima .intro__mitad--izq{animation:lz-abre-izq 760ms cubic-bezier(.65,0,.3,1) 1680ms forwards}
.intro.anima .intro__mitad--der{animation:lz-abre-der 760ms cubic-bezier(.65,0,.3,1) 1680ms forwards}
.intro.anima .intro__centro{animation:lz-sale 400ms ease-in 1680ms forwards}

/* el trazo dorado dibuja el monograma y, al cerrarse, deja paso al logo
   de verdad: el de ella, con sus estrellas y su tijera */
.intro__logo{
  position:absolute;left:50%;top:50%;
  width:min(40vw,166px);height:auto;
  transform:translate(-50%,-50%) scale(.88);
  opacity:0;
}
.intro.anima .intro__logo{animation:lz-logo 560ms var(--curva) 1060ms forwards}
.intro.anima .intro__trazo{
  animation:lz-trazo 1100ms var(--curva) forwards,
            lz-apaga 420ms ease-in 1120ms forwards;
}
.intro.quieta .intro__logo{opacity:1;transform:translate(-50%,-50%) scale(1)}
.intro.quieta .intro__trazo{opacity:0}

@keyframes lz-trazo{ to{stroke-dashoffset:0} }
@keyframes lz-apaga{ to{opacity:0} }
@keyframes lz-logo{
  from{opacity:0;transform:translate(-50%,-50%) scale(.88)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes lz-chispa{
  0%{opacity:0;transform:scale(.4)}
  55%{opacity:1;transform:scale(1.18)}
  100%{opacity:.92;transform:scale(1)}
}
@keyframes lz-pie{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes lz-tijera{
  0%{opacity:0;transform:translate(-50%,-50%) translateX(-130px) rotate(-8deg)}
  18%{opacity:1}
  50%{opacity:1;transform:translate(-50%,-50%) translateX(0) rotate(0deg) scale(1.1)}
  82%{opacity:1;transform:translate(-50%,-50%) translateX(118px) rotate(8deg)}
  100%{opacity:0;transform:translate(-50%,-50%) translateX(150px) rotate(10deg)}
}
@keyframes lz-sale{ to{opacity:0;transform:scale(.94)} }
@keyframes lz-abre-izq{ to{transform:translateX(-101%)} }
@keyframes lz-abre-der{ to{transform:translateX(101%)} }

/* versión sin movimiento: el monograma aparece y se desvanece */
.intro.quieta .intro__trazo{stroke-dashoffset:0}
.intro.quieta .intro__estrella{opacity:.92}
.intro.quieta .intro__pie{opacity:1}
.intro.quieta{animation:lz-fin 600ms ease-out 260ms forwards}
@keyframes lz-fin{ to{opacity:0;visibility:hidden} }

/* mientras la portada de carga está puesta, nada de scroll por detrás */
.intro-puesta{overflow:hidden}

/* ---------- 15. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js .entra{opacity:1;transform:none}
  .intro.quieta{animation:lz-fin 600ms ease-out 200ms forwards!important}
  .tarjeta:hover{transform:none}
  .escena.viva .pieza{transition:opacity .01ms}
}

:root[data-tema="noche"] .comparar__img,
:root[data-tema="noche"] .cambio__proceso img,
:root[data-tema="noche"] .pieza__video{filter:brightness(.94)}

/* El monograma de Lauren está dibujado en tinta oscura: sobre fondo de
   noche desaparecía. Se pasa a claro conservando su forma, estrellas y
   tijera incluidas. */
:root[data-tema="noche"] .barra__marca img,
:root[data-tema="noche"] .hero__marca,
:root[data-tema="noche"] .intro__logo{
  filter:brightness(0) invert(1) sepia(.22) saturate(1.5) hue-rotate(-8deg) opacity(.94);
}
:root[data-tema="noche"] .pie__marca{opacity:.8}

/* ---------- 16. Impresión ---------- */
@media print{
  /* se imprime siempre en claro, aunque se esté viendo en modo noche */
  :root,:root[data-tema="noche"]{
    --tinta:#16212c; --marino:#24405c; --titulos:#24405c;
    --suave:#4a5c6e; --nube:#fff; --lienzo:#fff; --niebla:#dde6ef;
    --bruma:#c8d8e6; --oro-txt:#7a5f36; --oro:#a0804f; --oro-cl:#c8b08a;
    --pie-fondo:#fff; --pie-texto:#16212c; --pie-nombre:#16212c;
    --pie-lema:#7a5f36; --pie-enlace:#24405c; --marco:#fff;
  }
  .barra,.hero__canvas,.tono,.escena__flecha,.escena__pie,.intro,.hero__noche,.visor{display:none!important}
  body{background:#fff;color:#16212c}
  .pie .hoja,.hoja{display:none!important}
}