/* ══════════════════════════════════════════════════════════════════
   LUJO · 11 oct 2026
   Negro mate como las páginas de producto de Apple, en TODAS las páginas.
   Va después de estilo.css. Sustituye los colores del modo tinta, que ahora es el único.
   Las piezas nuevas llevan el prefijo l- y cada una trae su animación.
   ══════════════════════════════════════════════════════════════════ */

:root,:root[data-tema="tinta"]{
  --papel:#0A0A0B; --papel-2:#111113; --blanco:#161618;
  --tinta:#F5F5F7; --tinta-2:#000;
  --texto:#A1A1A6; --gris:#86868B; --gris-2:#6E6E73;
  --linea:rgba(255,255,255,.08); --linea-cl:rgba(255,255,255,.12);
  --cobalto:#D9BE84; --cobalto-cl:#E8D2A0;
  --oro:#C9A961; --oro-t:#D9BE84; --oro-cl:#E8CF94; --oro-os:#8A6828;
  --reticula:rgba(255,255,255,.06);
  --r:28px; --l-ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
html,body{background:#0A0A0B}
body{color:var(--texto);letter-spacing:-.005em}
::selection{background:rgba(201,169,97,.38);color:#fff}
.tema{display:none!important}

/* ── Tipografía: titulares grandes y apretados, cursiva dorada ── */
h1,h2,h3,h4{color:var(--tinta)}
h2{font-family:var(--sans);font-weight:700;font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.045em}
h2 em,.min{color:var(--oro-t)}
h2 em{font-family:var(--serif);font-weight:300;letter-spacing:-.02em}
h3{font-family:var(--sans);font-weight:650;letter-spacing:-.025em}
.may{color:var(--tinta)}
.etiqueta{color:var(--oro-t);letter-spacing:.2em}
.lead{color:var(--texto);font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5}
.mega{letter-spacing:-.05em}

/* ── Botones: píldoras como Apple ── */
.btn{border-radius:980px;text-transform:none;letter-spacing:-.01em;font-weight:500;font-size:1rem;padding:.9rem 1.6rem;border-width:1px}
.btn--tinta,.btn--claro,.btn--wa{background:#F5F5F7;color:#0A0A0B;border-color:transparent}
.btn--tinta:hover,.btn--claro:hover,.btn--wa:hover{background:#fff;color:#000}
.btn--wa svg{color:#1FAF54}
.btn--linea,.btn--linea-cl{background:transparent;border-color:rgba(255,255,255,.28);color:#F5F5F7}
.btn--linea:hover,.btn--linea-cl:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.5)}
.enlace{color:var(--oro-t)}

/* ── Cabecera translúcida ── */
.barra,[data-tema="tinta"] .barra{background:rgba(10,10,11,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.06)}
.barra-in{padding-block:.7rem}
.logo b{color:#F5F5F7}
.logo i{color:var(--gris)}
.menu a{text-transform:none;letter-spacing:-.005em;font-size:.86rem;font-weight:450;color:var(--texto)}
.menu a:hover,.menu a[aria-current="page"]{color:#F5F5F7}
.menu .btn{font-size:.82rem;padding:.55rem 1.05rem;color:#0A0A0B}
.progreso{background:linear-gradient(90deg,var(--oro-os),var(--oro-cl))}

/* ── Fondos de sección y tarjetas de las páginas interiores ── */
.fondo-blanco{background:#111113}
.fondo-2{background:#0D0D0F}
.cab-pag{border-bottom:0;position:relative;overflow:hidden}
.cab-pag::before{content:"";position:absolute;inset:-30% 10% auto;height:120%;background:radial-gradient(closest-side,rgba(201,169,97,.13),transparent);pointer-events:none;animation:l-respira 9s ease-in-out infinite alternate}
@keyframes l-respira{from{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1.08)}}
.miga{color:var(--gris-2)}
.incluye{gap:12px;background:none;border:0}
.inc{background:#161618;border-radius:24px;transition:background .3s,transform .4s var(--l-ease)}
.inc:hover{background:#1C1C1F;transform:translateY(-4px)}
.op,.trabajo{background:#161618;border:0;border-radius:28px}
.trabajo:hover{border-color:transparent}
.trabajo:hover .flecha,[data-tema="tinta"] .trabajo:hover .flecha{background:#F5F5F7;color:#0A0A0B}
.garantia,.rep--nuestro,.canal--wa,[data-tema="tinta"] .garantia,[data-tema="tinta"] .rep--nuestro,[data-tema="tinta"] .canal--wa{background:#161618;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);border-radius:32px}
.canal{background:#111113;border-radius:32px}
.video-marco{background:#111113;border:0;border-radius:28px}
.dudas{border-top:1px solid rgba(255,255,255,.08)}
.duda{border-bottom:1px solid rgba(255,255,255,.08)}
.pantalla,[data-tema="tinta"] .pantalla{box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}

/* ── Banda final: centrada y enorme ── */
.banda,[data-tema="tinta"] .banda{background:#000;box-shadow:none;text-align:center;position:relative}
.banda::before{content:"";position:absolute;inset:auto 0 0;height:80%;background:radial-gradient(50% 80% at 50% 100%,rgba(201,169,97,.18),transparent 70%);pointer-events:none}
.banda-in{grid-template-columns:1fr;justify-items:center;position:relative}
.banda h2 .may{font-size:clamp(3rem,9vw,7.4rem);color:#F5F5F7;letter-spacing:-.05em}
.banda h2 .min{font-size:clamp(2.6rem,7.6vw,6.2rem)}
.banda p{margin-inline:auto;color:var(--texto)}
.banda .etiqueta{justify-content:center}
.banda .btns{flex-direction:row;justify-content:center;flex-wrap:wrap}

/* ── Pie: negro puro, letra pequeña gris, la marca gigante apagada ── */
.pie,[data-tema="tinta"] .pie{background:#000;border-top:1px solid rgba(255,255,255,.06)}
.pie h4{color:#F5F5F7}
.gigante .may,[data-tema="tinta"] .gigante .may{color:#1C1C1E}
.gigante .min{color:rgba(201,169,97,.35)}

/* ── Aviso de cookies y WhatsApp flotante, en cristal oscuro ── */
.ck{background:rgba(22,22,24,.92);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#F5F5F7;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.8);border-radius:22px}
.ck button{border-radius:980px}
.wa-flotante{background:#161618;color:#25D366;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 20px 40px -16px rgba(0,0,0,.9)}

/* ══════════════ PIEZAS NUEVAS (l-) ══════════════ */
.l-sec{padding:clamp(5rem,11vw,9.5rem) 0}
.l-sec--ajust{padding-top:clamp(1rem,3vw,2rem)}
.l-sec--gris{background:#111113}
.l-sec--negro{background:#000}
.l-anchowrap{width:min(1440px,100% - 24px);margin-inline:auto}

.l-eti{display:inline-block;font:600 .8rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.l-eti--oro{color:var(--oro-t)}
.l-h2{font-size:clamp(2.6rem,5.6vw,4.8rem);margin-top:1rem}
.l-h2--xl{font-size:clamp(3.2rem,7.6vw,6.6rem)}
.l-oro{color:var(--oro-t)}

/* Hero centrado */
.l-hero{text-align:center;padding:clamp(3.5rem,9vh,6.5rem) 0 clamp(4.5rem,11vh,8rem);background:radial-gradient(55% 45% at 50% 0%,rgba(201,169,97,.14),transparent 70%),#0A0A0B;overflow:hidden}
.l-hero::after{content:"";position:absolute;left:50%;top:0;width:min(900px,90vw);aspect-ratio:2/1;translate:-50% -55%;background:radial-gradient(closest-side,rgba(232,207,148,.12),transparent);animation:l-respira 8s ease-in-out infinite alternate;pointer-events:none}
.l-mega{font:700 clamp(3.2rem,8.4vw,7.6rem)/.94 var(--sans);letter-spacing:-.06em;color:#F5F5F7;margin:1.4rem auto 0;max-width:13ch}
.l-mega .linea{display:block}
.l-mega .rota-in{color:var(--oro-t)}
.l-sub{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;color:var(--texto);max-width:30ch;margin:1.4rem auto 0;letter-spacing:-.015em}
.l-ctas{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:center;align-items:center;margin-top:2.2rem}
.l-ctas--izq{justify-content:flex-start}
.l-confianza{margin-top:2.4rem;color:var(--gris);font-size:.92rem}
.l-confianza .estrellas{color:var(--oro);margin-right:.5rem;display:inline-flex;vertical-align:-2px}
.l-confianza .estrellas svg{width:14px;height:14px}
.l-confianza b{color:#F5F5F7}

/* Píldora y enlace «›» */
.l-pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:#F5F5F7;color:#0A0A0B;border-radius:980px;padding:1rem 1.8rem;font:500 1.04rem/1 var(--sans);letter-spacing:-.01em;text-decoration:none;position:relative;overflow:hidden;transition:background .25s,transform .35s var(--l-ease)}
.l-pill:hover{background:#fff;transform:scale(1.04)}
.l-pill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(201,169,97,.45) 50%,transparent 62%);translate:-120% 0;animation:l-destello 5s ease-in-out infinite}
@keyframes l-destello{0%,65%{translate:-120% 0}85%,100%{translate:120% 0}}
.l-pill--peq{padding:.72rem 1.25rem;font-size:.94rem}
.l-pill--oscuro{background:#0A0A0B;color:#F5F5F7}
.l-pill--oscuro:hover{background:#000}
.l-enlace{color:var(--oro-t);font-size:1.06rem;text-decoration:none;letter-spacing:-.01em}
.l-enlace::after{content:" ›";display:inline-block;transition:translate .3s var(--l-ease)}
.l-enlace:hover{text-decoration:underline;text-underline-offset:.2em}
.l-enlace:hover::after{translate:4px 0}
.l-enlace--claro{color:var(--oro-t)}
:focus-visible{outline:2px solid var(--oro-t);outline-offset:3px}

/* Encabezado de sección centrado */
.l-cab{text-align:center;margin-inline:auto;max-width:54rem}
.l-cab .etiqueta{justify-content:center}
.l-cab p{margin:1.2rem auto 0;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;max-width:40ch;color:var(--texto)}

/* Tarjetas grandes (como las de la portada de Apple) */
.l-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.l-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:min(88vh,780px);border-radius:32px;overflow:hidden;text-decoration:none;text-align:center;padding:clamp(2.8rem,5vw,4.2rem) clamp(1.4rem,3vw,2.8rem) 0;isolation:isolate}
.l-tile--claro{background:#F5F5F7;color:#1D1D1F}
.l-tile--claro .l-h2,.l-tile--claro h2{color:#1D1D1F}
.l-tile--claro h2 em{color:var(--oro-os)}
.l-tile--claro p{color:#515154}
.l-tile--claro .l-eti{color:#6E6E73}
.l-tile--claro .l-pill{background:#1D1D1F;color:#F5F5F7}
.l-tile--claro .l-enlace{color:var(--oro-os)}
.l-tile--oscuro{background:#161618}
.l-tile p{max-width:28ch;margin:1rem auto 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.45}
.l-tile-ctas{display:flex;gap:1.4rem;justify-content:center;align-items:center;margin-top:1.8rem;flex-wrap:wrap}
.l-tile-media{margin-top:2.4rem;display:flex;justify-content:center;align-items:flex-end;transition:transform .9s var(--l-ease)}
.l-tile:hover .l-tile-media{transform:translateY(-8px) scale(1.02)}
.l-tile-media video{width:100%;max-width:600px;height:auto}
/* El móvil de redes: las publicaciones van apareciendo una a una */
.l-movil{width:min(250px,64%);aspect-ratio:9/19;border-radius:42px;background:#0A0A0B;box-shadow:inset 0 0 0 2px #2C2C2E,0 50px 90px -40px rgba(201,169,97,.4);padding:11px;margin-bottom:-70px}
.l-movil-pant{height:100%;border-radius:32px;background:#1D1D1F;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:46px 6px 6px;align-content:start;position:relative}
.l-movil-pant::before{content:"";position:absolute;top:12px;left:50%;width:34%;height:20px;translate:-50% 0;border-radius:20px;background:#000}
.l-movil-pant i{aspect-ratio:1;border-radius:5px;background:#2A2A2C;animation:l-post 6s ease-in-out infinite}
.l-movil-pant i:nth-child(1){animation-delay:0s}.l-movil-pant i:nth-child(2){animation-delay:.6s}.l-movil-pant i:nth-child(3){animation-delay:1.2s}
.l-movil-pant i:nth-child(4){animation-delay:1.8s}.l-movil-pant i:nth-child(5){animation-delay:2.4s}.l-movil-pant i:nth-child(6){animation-delay:3s}
.l-movil-pant i:nth-child(7){animation-delay:3.6s}.l-movil-pant i:nth-child(8){animation-delay:4.2s}.l-movil-pant i:nth-child(9){animation-delay:4.8s}
@keyframes l-post{0%,8%{background:#2A2A2C;scale:1}14%{background:linear-gradient(135deg,#E8CF94,#8A6828);scale:1.06}22%,100%{background:linear-gradient(135deg,#3a3326,#2A2A2C);scale:1}}

/* Bloque del diferencial con la gráfica que se dibuja */
.l-datos-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center;background:#000;border-radius:32px;padding:clamp(2.6rem,6vw,5.5rem);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);position:relative;overflow:hidden}
.l-datos-in::before{content:"";position:absolute;right:-10%;bottom:-40%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(201,169,97,.2),transparent);pointer-events:none}
.l-datos-txt{position:relative}
.l-datos-txt p{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;margin-top:1.2rem;max-width:30ch}
.l-grafica{position:relative}
.l-grafica svg{width:100%;height:auto;aspect-ratio:520/300;overflow:visible}
.l-rejilla path{stroke:rgba(255,255,255,.07);stroke-width:1}
.l-linea{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--l-ease) .3s}
.in .l-linea{stroke-dashoffset:0}
.l-area{opacity:0;transition:opacity 1.2s 1.4s}
.in .l-area{opacity:1}
.l-punto{opacity:0;transition:opacity .4s 2.5s}
.in .l-punto{opacity:1;animation:l-latido 2.2s 2.9s ease-in-out infinite}
@keyframes l-latido{50%{r:11}}
.l-etiquetas{list-style:none;display:flex;gap:1.6rem;flex-wrap:wrap;padding:0;margin:1.4rem 0 0;font-size:.86rem;color:var(--gris)}
.l-etiquetas li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--oro);margin-right:.5rem;vertical-align:1px}

/* Rejilla de tarjetas con número (razones, servicios incluidos, pasos cortos…) */
.l-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin-top:clamp(2.8rem,5vw,3.8rem)}
.l-tarjetas--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr))}
.l-tarjeta{background:#161618;border-radius:28px;padding:clamp(2rem,3.6vw,2.8rem);position:relative;overflow:hidden;transition:transform .5s var(--l-ease),background .3s}
.l-tarjeta:hover{transform:translateY(-6px);background:#1A1A1D}
.l-tarjeta::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--oro),transparent);scale:0 1;transition:scale 1s var(--l-ease) .2s}
.l-tarjeta.in::before,.in .l-tarjeta::before{scale:1 1}
.l-n{font:italic 300 3.2rem/1 var(--serif);color:var(--oro-t);display:block;margin-bottom:1.2rem}
.l-ico{width:44px;height:44px;color:var(--oro-t);margin-bottom:1.3rem}
.l-ico svg{width:100%;height:100%}
.l-tarjeta h3{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.15}
.l-tarjeta p{margin-top:.7rem;font-size:1.02rem;line-height:1.5}
.l-tarjeta small{display:block;margin-top:1.2rem;font-size:.84rem;color:var(--gris-2)}

/* Números grandes que cuentan */
.l-numeros{list-style:none;padding:0;margin:clamp(3rem,5vw,4rem) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.l-numeros li{background:#111113;border-radius:28px;padding:2.4rem 2rem;text-align:center}
.l-numeros b{display:block;font:700 clamp(4.4rem,9vw,7.6rem)/.9 var(--sans);letter-spacing:-.06em;background:linear-gradient(180deg,#F1DCA8,#8A6828);-webkit-background-clip:text;background-clip:text;color:transparent}
.l-numeros span{display:block;margin-top:1.1rem;font-size:1rem;line-height:1.45}
.l-numeros strong{color:#F5F5F7;font-weight:600}

/* Nota grande y opiniones */
.l-nota{text-align:center}
.l-nota b{display:block;font:700 clamp(6rem,17vw,12.5rem)/.88 var(--sans);letter-spacing:-.07em;background:linear-gradient(180deg,#FFFFFF 20%,#7C7C80);-webkit-background-clip:text;background-clip:text;color:transparent}
.l-nota .estrellas{color:var(--oro);display:inline-flex;gap:4px;margin-top:1rem}
.l-nota .estrellas svg{width:20px;height:20px}
.l-nota p{color:var(--gris);margin-top:.6rem}
.l-opis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin-top:clamp(3rem,5vw,3.8rem)}
.l-op{margin:0;background:#161618;border-radius:28px;padding:2.2rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem}
.l-op blockquote{margin:0;font:400 1.32rem/1.4 var(--serif);color:#F5F5F7;letter-spacing:-.01em}
.l-op em{color:var(--oro-t)}
.l-op figcaption{font-size:.88rem;color:var(--gris)}
.l-op figcaption b{color:#F5F5F7;font-weight:600}

/* Lista con marcas doradas que se dibujan */
.l-lista{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.9rem}
.l-lista li{position:relative;padding-left:2rem;font-size:1.06rem;color:#D2D2D7}
.l-lista li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:9px;border-left:2px solid var(--oro);border-bottom:2px solid var(--oro);rotate:-45deg;scale:0;transition:scale .5s var(--l-ease)}
.in .l-lista li::before,.l-lista.in li::before{scale:1}
.l-lista li:nth-child(2)::before{transition-delay:.12s}.l-lista li:nth-child(3)::before{transition-delay:.24s}.l-lista li:nth-child(4)::before{transition-delay:.36s}.l-lista li:nth-child(5)::before{transition-delay:.48s}.l-lista li:nth-child(6)::before{transition-delay:.6s}

/* Pasos con una línea dorada que avanza */
.l-pasos{list-style:none;padding:0;margin:clamp(3rem,5vw,4rem) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;position:relative}
.l-paso{background:#161618;border-radius:24px;padding:1.8rem 1.6rem;position:relative}
.l-paso b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#0A0A0B;box-shadow:inset 0 0 0 1px rgba(201,169,97,.5);color:var(--oro-t);font:600 1rem/1 var(--sans);margin-bottom:1.2rem;transition:background .5s,color .5s}
.in .l-paso b,.l-paso.in b{background:linear-gradient(135deg,var(--oro-cl),var(--oro-os));color:#0A0A0B}
.l-paso h3{font-size:1.25rem}
.l-paso p{margin-top:.5rem;font-size:.96rem;line-height:1.45}
.l-paso small{display:block;margin-top:.9rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-t)}

/* Preguntas: acordeón limpio */
.l-faq{max-width:52rem;margin:clamp(2.6rem,5vw,3.6rem) auto 0}
.l-faq details{border-bottom:1px solid rgba(255,255,255,.1)}
.l-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.5rem 0;font:600 1.2rem/1.3 var(--sans);color:#F5F5F7;letter-spacing:-.02em}
.l-faq summary::-webkit-details-marker{display:none}
.l-faq summary::after{content:"+";font:300 1.8rem/1 var(--sans);color:var(--oro-t);transition:rotate .35s var(--l-ease)}
.l-faq details[open] summary::after{rotate:45deg}
.l-faq details p{padding-bottom:1.5rem;margin:0;font-size:1.04rem;line-height:1.55;animation:l-abre .45s var(--l-ease)}
@keyframes l-abre{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}

/* Marco de vídeo grande */
.l-video{border-radius:32px;overflow:hidden;background:#111113;box-shadow:0 60px 120px -60px rgba(201,169,97,.25)}
.l-video video{width:100%;height:auto;display:block}

/* Botón flotante que acompaña la bajada */
.l-flota{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:1rem;padding:.5rem .5rem .5rem 1.3rem;border-radius:980px;background:rgba(22,22,24,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 50px -20px rgba(0,0,0,.85);color:var(--texto);font-size:.92rem;translate:-50% 150%;opacity:0;transition:translate .55s var(--l-ease),opacity .4s;white-space:nowrap}
.l-flota.ver{translate:-50% 0;opacity:1}
.l-flota b{color:#F5F5F7;font-weight:600}

/* Con el scroll, donde el navegador lo hace solo: cada bloque grande «se acerca» */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .l-tile,.l-datos-in,.l-video,.garantia,.canal{animation:l-acerca linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    @keyframes l-acerca{from{scale:.93;opacity:.35}to{scale:1;opacity:1}}
    .l-tile-media{animation:l-sube linear both;animation-timeline:view();animation-range:cover}
    @keyframes l-sube{from{translate:0 60px}to{translate:0 -30px}}
    .l-n,.l-numeros b{animation:mtw-flota linear both;animation-timeline:view();animation-range:cover}
  }
}

/* ── Móvil ── */
@media(max-width:860px){
  .l-tiles,.l-datos-in{grid-template-columns:1fr}
  .l-tile{min-height:auto}
  .l-tile-media{margin-top:2rem}
  .l-datos-in{padding:2.4rem 1.6rem}
  .banda h2 .may{font-size:clamp(2.6rem,11vw,4rem)}
}
@media(max-width:520px){
  .l-flota span{display:none}
  .l-flota{padding:.4rem}
  .l-anchowrap{width:calc(100% - 16px)}
}
@media(prefers-reduced-motion:reduce){
  .l-pill::after,.l-movil-pant i,.cab-pag::before,.l-hero::after{animation:none}
  .l-linea{stroke-dashoffset:0}.l-area,.l-punto{opacity:1}
  .l-lista li::before{scale:1}
}

/* ── Ajustes tras reescribir las páginas interiores ── */
/* Escalonado: cada pieza con style="--d:N" aparece un poco después que la anterior */
.js .rv{transition-delay:calc(var(--d,0) * 110ms)}
/* Iconos dentro de las píldoras (WhatsApp, teléfono) */
.l-pill svg{width:18px;height:18px;flex-shrink:0}
.btn.l-pill{border:0}
/* Cabeceras de las páginas interiores, centradas como en Apple */
.cab-pag{text-align:center}
.cab-pag .lead,.cab-pag .l-sub{margin-inline:auto}
.cab-pag .l-ctas{justify-content:center}
.cab-pag .miga{justify-content:center}

/* Portátil al entrar, ahora sobre negro mate (fotogramas nuevos del 11 oct) */
.hv-pin{background:#0A0A0B}
.hv-abrir{background:#F5F5F7;color:#0A0A0B;text-transform:none;letter-spacing:-.01em;font-size:1rem;font-weight:500;padding:1rem 1.8rem}
.hv-abrir::after{border-color:rgba(232,207,148,.7)}
.hv-pista{color:var(--gris)}

/* ══════════════════════════════════════════════════════════════════
   PORTADA v3 · 11 oct 2026 · mezcla: el diseño de antes + el negro mate y el lujo
   ══════════════════════════════════════════════════════════════════ */
/* Titulares: vuelve la serifa fina de antes (en toda la web), más grande y con la cursiva en oro */
h2{font-family:var(--serif);font-weight:350;font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.04;letter-spacing:-.025em}
h2 em{font-weight:300;color:var(--oro-t)}
.min{color:var(--oro-t)}
/* Palabras clave: en oro, con un subrayado que se dibuja cuando llegas */
.dest{color:var(--oro-cl);font-weight:600;text-shadow:0 0 28px rgba(201,169,97,.28);background-image:linear-gradient(90deg,var(--oro-os),var(--oro-cl));background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;transition:background-size 1.2s var(--l-ease) .4s;padding-bottom:1px}
.in .dest,.dest.in,.hero .dest{background-size:100% 1px}
.hero .dest{transition-delay:1.4s}

/* ── 1 · HERO de antes, con un foco de luz dorada que sigue al ratón ── */
.hero-lujo{position:relative;overflow:hidden;isolation:isolate}
.hero-lujo .wrap{position:relative;z-index:1}
.foco{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--fx,50%) var(--fy,30%),rgba(201,169,97,.16),transparent 62%)}
.con-foco > .foco{opacity:1}
.hero-lujo::before{content:"";position:absolute;inset:-20% -10% auto;height:90%;z-index:0;pointer-events:none;background:radial-gradient(50% 60% at 30% 0%,rgba(201,169,97,.12),transparent 70%);animation:l-respira 9s ease-in-out infinite alternate}
.hero .mega .may{color:#F5F5F7}
.hero .rota-in{color:var(--oro-cl);text-shadow:0 0 60px rgba(201,169,97,.35)}
.hero .sello{background:#111113;box-shadow:0 0 0 1px rgba(201,169,97,.35),0 20px 60px -20px rgba(201,169,97,.35)}
.hero .sello text{fill:var(--oro-t)}
.hero .sello-m{color:#F5F5F7}
.hero .lead{color:var(--texto)}

/* ── 2 · Cinta de clientes: se inclina con la velocidad a la que bajas ── */
.cinta{background:#000;border-color:rgba(255,255,255,.06);transform:skewX(var(--sk,0deg));transition:transform .1s linear}
.cinta-pista span{color:#F5F5F7}
.cinta-pista+.cinta-pista{background:#0A0A0B;border-color:rgba(255,255,255,.06)}

/* ── 3 · Las dos puertas: luz que sigue al ratón y borde que se enciende ── */
.puerta{background:#161618;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden;isolation:isolate}
.puerta--webs,[data-tema="tinta"] .puerta--webs{background:linear-gradient(160deg,#1A1A1C,#0F0F11)}
.puerta--redes,[data-tema="tinta"] .puerta--redes{background:linear-gradient(160deg,#1B2C66,#0C1636)}
.foco-tarjeta::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),rgba(232,207,148,.18),transparent 58%)}
.foco-tarjeta:hover::after{opacity:1}
.foco-tarjeta:hover{box-shadow:inset 0 0 0 1px rgba(201,169,97,.45),0 40px 80px -40px rgba(201,169,97,.35)}
.puerta h3 .may{color:#F5F5F7}
.puerta li{color:#C7C7CC}

/* ── 4 · Decidimos con datos: la búsqueda que se escribe sola y tu negocio que sube ── */
.datos-lujo{background:#0A0A0B;overflow:hidden}
.datos-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.datos-txt h2{font-size:clamp(2.8rem,6.2vw,5.2rem)}
.datos-txt .lead{margin-top:1.3rem}
.datos-txt .btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.buscador{background:#161618;border-radius:28px;padding:clamp(1.2rem,2.4vw,1.8rem);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 60px 120px -60px rgba(201,169,97,.4);position:relative}
.busc-barra{display:flex;align-items:center;gap:.8rem;background:#0A0A0B;border-radius:980px;padding:.95rem 1.25rem;color:#F5F5F7;font-size:1.06rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);min-height:3.3rem}
.busc-barra svg{width:18px;height:18px;color:var(--gris);flex-shrink:0}
.busc-cursor{width:2px;height:1.2em;background:var(--oro);animation:parpadeo 1s steps(1) infinite;margin-left:-.5rem}
@keyframes parpadeo{50%{opacity:0}}
.busc-lista{list-style:none;padding:0;margin:1.2rem 0 0;position:relative;height:calc(4 * 66px + 3 * 10px)}
.busc-lista li{position:absolute;left:0;right:0;top:0;height:66px;display:flex;align-items:center;gap:1rem;padding:0 1.1rem;border-radius:16px;background:#1C1C1F;transform:translateY(calc(var(--p,0) * 76px));transition:transform .85s var(--l-ease),background .6s,box-shadow .6s}
.busc-lista li b{width:36px;height:36px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:#2A2A2C;color:var(--gris);font:600 .9rem/1 var(--sans)}
.busc-lista li span{display:grid;gap:7px;flex:1}
.busc-lista li em{display:block;height:8px;border-radius:4px;background:#2C2C2F;width:72%}
.busc-lista li em+em{width:46%}
.busc-lista .tuyo{background:linear-gradient(90deg,rgba(201,169,97,.2),rgba(201,169,97,.05));box-shadow:inset 0 0 0 1px rgba(201,169,97,.5);z-index:2}
.busc-lista .tuyo b{background:linear-gradient(135deg,var(--oro-cl),var(--oro-os));color:#0A0A0B}
.busc-lista .tuyo strong{color:#F5F5F7;font-size:1.02rem;font-weight:600}
.buscador.arriba .tuyo{box-shadow:inset 0 0 0 1px var(--oro-cl),0 0 40px -6px rgba(232,207,148,.55)}
.busc-pie{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.3rem;font-size:.82rem;color:var(--gris)}
.busc-pie span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--oro);margin-right:.5rem;vertical-align:1px}

/* ── 5 · Lo normal / lo nuestro: el diseño de antes, con la parte buena encendida ── */
.duelos-lujo{background:#0D0D0F}
.duelo{border-color:rgba(255,255,255,.08)}
.duelo-n{color:var(--oro-t)}
.duelo-bien h3{color:#F5F5F7;transition:color .4s,text-shadow .4s}
.duelo:hover .duelo-bien h3{color:var(--oro-cl);text-shadow:0 0 30px rgba(201,169,97,.35)}
.duelo-mal{color:var(--gris-2)}

/* ── 6 · Trabajos: un carril que se arrastra, con flechas ── */
.carril{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:min(420px,82%);gap:20px!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:.4rem .2rem 1.4rem;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.carril::-webkit-scrollbar{display:none}
.carril > *{scroll-snap-align:start}
.carril.arrastrando{cursor:grabbing;scroll-snap-type:none}
.carril.arrastrando *{pointer-events:none}
.carril-mandos{display:flex;gap:.6rem;justify-content:flex-end;margin:0 0 1.2rem}
.carril-btn{width:50px;height:50px;border-radius:50%;background:#161618;color:#F5F5F7;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer;font-size:1.15rem;transition:background .25s,color .25s,transform .25s}
.carril-btn:hover{background:var(--oro-cl);color:#0A0A0B;transform:scale(1.06)}

/* ── 7 · Opiniones: las estrellas se encienden una a una ── */
.opiniones-lujo .op .estrellas svg{opacity:.15;scale:.5;transition:opacity .4s,scale .5s var(--l-ease)}
.opiniones-lujo .op.in .estrellas svg{opacity:1;scale:1}
.opiniones-lujo .op .estrellas svg:nth-child(2){transition-delay:.12s}.opiniones-lujo .op .estrellas svg:nth-child(3){transition-delay:.24s}.opiniones-lujo .op .estrellas svg:nth-child(4){transition-delay:.36s}.opiniones-lujo .op .estrellas svg:nth-child(5){transition-delay:.48s}
.opiniones-lujo .op blockquote em{color:var(--oro-cl)}
.opiniones-lujo .op{transition:transform .5s var(--l-ease),box-shadow .5s}
.opiniones-lujo .op:hover{transform:translateY(-6px);box-shadow:0 40px 80px -40px rgba(201,169,97,.3)}
.nota-google .grande-nota b{color:#F5F5F7}

/* ── 8 · Garantía: un sello que gira ── */
.garantia{position:relative;overflow:hidden}
.sello-garantia{position:absolute;right:clamp(1rem,3vw,2.4rem);top:clamp(1rem,3vw,2.4rem);width:clamp(92px,11vw,128px);aspect-ratio:1;pointer-events:none}
.sello-garantia svg{position:absolute;inset:0;width:100%;height:100%;animation:gira 24s linear infinite;overflow:visible}
.sello-garantia text{font:600 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;fill:var(--oro-t)}
.sello-garantia b{position:absolute;inset:0;display:grid;place-items:center;font:300 italic clamp(2rem,3.4vw,2.8rem)/1 var(--serif);color:var(--oro-cl)}
.garantia h2 .may{color:#F5F5F7}

/* ── 9 · Banda final: el foco dorado también aquí ── */
.banda{overflow:hidden;isolation:isolate}
.banda .wrap{position:relative;z-index:1}

@media(max-width:860px){
  .datos-in{grid-template-columns:1fr}
  .busc-lista{height:calc(4 * 58px + 3 * 8px)}
  .busc-lista li{height:58px;transform:translateY(calc(var(--p,0) * 66px))}
  .sello-garantia{width:84px;top:1rem;right:1rem}
  .carril{grid-auto-columns:84%}
}
@media(prefers-reduced-motion:reduce){
  .cinta{transform:none}
  .sello-garantia svg{animation:none}
  .opiniones-lujo .op .estrellas svg{opacity:1;scale:1}
  .dest{background-size:100% 1px}
}
/* El sello de la garantía, abajo a la izquierda (arriba tapaba el «50 €») */
.sello-garantia{right:auto;top:auto;left:clamp(1.6rem,4vw,3.2rem);bottom:clamp(1.4rem,3.4vw,2.6rem)}
.garantia > div:first-of-type + div{padding-bottom:0}
@media(max-width:860px){.sello-garantia{left:auto;bottom:auto;right:1rem;top:1rem;width:76px}.garantia .etiqueta{padding-right:88px}}
/* Sello de la garantía dentro del bloque, debajo de «Sin excusas» */
.sello-garantia,.sello-garantia[class]{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;margin-top:1.8rem;width:clamp(96px,10vw,124px)}
.garantia .etiqueta{padding-right:0}

/* El vuelo (cuatro escenas en negro y oro): textos claros, titulares en la serif de la casa y con aire entre letras */
.vuelo.sw-root{--sw-bg:#0A0A0B;--sw-ink:#F5F5F7;--sw-ink-soft:#86868B}
.vuelo .sw-copy__title,.vuelo .sw-copy__title *{color:#F5F5F7;font-family:var(--serif);font-weight:350;letter-spacing:-.01em;font-size:clamp(2.2rem,4.4vw,3.7rem);line-height:1.06}
.vuelo .sw-copy__body{color:#A1A1A6;margin-top:1rem}
.vuelo .sw-copy__eyebrow{color:var(--oro-t);font-family:var(--sans);letter-spacing:.2em}
.vuelo .sw-copy__num{color:#6E6E73}
.vuelo .sw-copy__tags li{color:var(--oro-cl);background:rgba(201,169,97,.08);border-color:rgba(201,169,97,.3)}
.vuelo .sw-btn--primary{color:#0A0A0B;background:#F5F5F7}
.vuelo .sw-btn--ghost{color:#F5F5F7;background:transparent;border:1px solid rgba(201,169,97,.55)}
.vuelo .sw-btn--ghost:hover{border-color:var(--oro-cl);color:var(--oro-cl)}
.vuelo .sw-route__label{color:#F5F5F7;background:rgba(22,22,24,.85)}
@media(max-width:860px){.vuelo .sw-copy__title,.vuelo .sw-copy__title *{font-size:clamp(1.9rem,7.6vw,2.7rem)}}

/* ══════════ CUESTIONARIO (12 oct 2026) · tres pasos, se abre WhatsApp con el mensaje ══════════ */
.cues-sec{background:#0A0A0B}
.cues-cab{text-align:center;max-width:46rem;margin-inline:auto}
.cues-cab .etiqueta{justify-content:center}
.cues-cab .lead{margin:1rem auto 0}
.cues{max-width:880px;margin:clamp(2.4rem,5vw,3.4rem) auto 0;background:#111113;border-radius:32px;padding:clamp(1.5rem,4vw,3rem);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 60px 120px -70px rgba(201,169,97,.45);position:relative;overflow:hidden}
.cues::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(201,169,97,.12),transparent);pointer-events:none}
.cues-progreso{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.cues-progreso span{display:block;height:100%;background:linear-gradient(90deg,var(--oro-os),var(--oro-cl));transform-origin:0 50%;transform:scaleX(.33);transition:transform .6s var(--l-ease)}
.cues-paso-txt{margin:.9rem 0 0;font:600 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);position:relative}
.cues-paso{border:0;margin:0;padding:0;min-width:0;position:relative}
.cues-paso.entra{animation:cues-entra .5s var(--l-ease)}
@keyframes cues-entra{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.cues-pregunta{display:block;font:350 clamp(1.9rem,3.6vw,2.7rem)/1.1 var(--serif);color:#F5F5F7;margin:1.4rem 0 0;padding:0;outline:0;letter-spacing:-.02em}
.cues-ayuda{margin:.5rem 0 0;color:var(--gris);font-size:.95rem}
.cues-opciones{display:grid;gap:12px;margin-top:1.6rem}
.cues-opciones--2{grid-template-columns:1fr 1fr}
.cues-opciones--3{grid-template-columns:repeat(3,1fr)}
.cues-op{position:relative;cursor:pointer;display:block}
.cues-op input{position:absolute;opacity:0;pointer-events:none}
.cues-op-in{position:relative;display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.5rem 1.4rem;border-radius:22px;background:#161618;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .3s,background .3s,transform .35s var(--l-ease)}
.cues-op:hover .cues-op-in{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(201,169,97,.45)}
.cues-op input:checked + .cues-op-in{background:linear-gradient(160deg,rgba(201,169,97,.17),rgba(201,169,97,.04));box-shadow:inset 0 0 0 1.5px var(--oro-cl),0 22px 50px -24px rgba(201,169,97,.6)}
.cues-op input:focus-visible + .cues-op-in{outline:2px solid var(--oro-t);outline-offset:3px}
.cues-op b{font:650 1.25rem/1.2 var(--sans);color:#F5F5F7;letter-spacing:-.02em}
.cues-op small{color:var(--gris);font-size:.88rem}
.cues-ico{width:40px;height:40px;color:var(--oro-t);margin-bottom:.5rem}
.cues-precio{display:flex;flex-direction:column;font:300 2.1rem/1 var(--serif);color:var(--oro-cl);margin-top:.5rem}
.cues-precio small{font:500 .86rem/1.4 var(--sans);color:var(--texto);margin-top:.4rem}
.cues-precio--txt{font-size:1.35rem;font-style:italic}
.cues-sello{position:absolute;top:-10px;left:1.4rem;font:600 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#0A0A0B;background:linear-gradient(135deg,var(--oro-cl),var(--oro));padding:.42rem .75rem;border-radius:980px}
.cues-check{position:absolute;right:1.1rem;top:1.1rem;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);transition:background .3s,box-shadow .3s}
.cues-check::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #0A0A0B;border-width:0 2px 2px 0;rotate:45deg;scale:0;transition:scale .3s var(--l-ease)}
.cues-op input:checked + .cues-op-in .cues-check{background:var(--oro-cl);box-shadow:none}
.cues-op input:checked + .cues-op-in .cues-check::after{scale:1}
.cues-campos{display:grid;gap:14px;margin-top:1.6rem}
.cues-campo{display:grid;gap:.5rem}
.cues-campo span{font:600 .76rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--oro-t)}
.cues-campo input{font:400 1.08rem/1.4 var(--sans);color:#F5F5F7;background:#0A0A0B;border:0;border-radius:16px;padding:1rem 1.2rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .25s}
.cues-campo input::placeholder{color:#5F5F64}
.cues-campo input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--oro-cl),0 0 0 4px rgba(201,169,97,.15)}
.cues-error{margin:.9rem 0 0;color:#FF9A8F;font-size:.92rem}
.cues-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.8rem;flex-wrap:wrap}
.cues-nav > .btn:first-child{margin-left:auto}
.cues-atras{background:none;border:0;color:var(--texto);font:500 .98rem/1 var(--sans);cursor:pointer;padding:.6rem 0}
.cues-atras:hover{color:#F5F5F7}
.cues-nota{margin:1rem 0 0;font-size:.84rem;color:var(--gris)}
@media(max-width:700px){
  .cues-opciones--2,.cues-opciones--3{grid-template-columns:1fr}
  .cues-nav .btn{flex:1;justify-content:center}
}

/* ── Webs · «En todos los dispositivos»: la web de JessMara en portátil y móvil, movida con el scroll ──
   Sin JavaScript (o con «menos movimiento»): una sección normal con la imagen final y los tres pasos.
   Con .dp-vivo (lo pone web.js §10): la sección se alarga, se queda fija y el scroll mueve la escena. */
.dp{position:relative;background:#0A0A0B;padding-block:clamp(4rem,9vw,7rem);overflow:clip}
.dp-pin{position:relative;max-width:1180px;margin-inline:auto;padding-inline:24px;display:grid;gap:2.5rem}
.dp-texto{position:relative;z-index:2}
.dp-texto h2{font-size:clamp(2.2rem,4.2vw,3.6rem);margin:0}
.dp-pasos{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.5rem}
.dp-paso{display:flex;gap:1rem;align-items:flex-start;transition:opacity .7s var(--l-ease),transform .7s var(--l-ease)}
.dp-n{flex:none;min-width:2.4em;padding-top:.32em;font:600 .74rem/1 var(--sans);letter-spacing:.2em;color:var(--oro-t)}
.dp-paso b{display:block;font-family:var(--serif);font-weight:350;font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.15;letter-spacing:-.015em;color:var(--tinta)}
.dp-paso p{margin:.45rem 0 0;font-size:1rem;line-height:1.5;color:var(--texto);max-width:34ch}
.dp-paso .dest{background-size:100% 1px}
.dp-barra{margin-top:2.2rem;height:1px;background:rgba(245,245,247,.14);overflow:hidden;max-width:360px}
.dp-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--oro-os),var(--oro-cl));transform-origin:0 50%;transform:scaleX(var(--p,1))}
.dp-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:2rem}
.dp-escena{position:relative}
.dp-poster img{display:block;width:100%;height:auto}
.dp-lienzo{display:none}

/* Con la animación: fija bajo la barra, unas tres pantallas de recorrido */
.dp.dp-vivo{height:330vh;padding:0;overflow:visible}
.dp-vivo .dp-pin{position:sticky;top:var(--dpb,0px);height:calc(100svh - var(--dpb,0px));max-width:none;padding:0;display:block;overflow:hidden}
.dp-vivo .dp-escena{position:absolute;inset:0}
.dp-vivo .dp-poster{position:absolute;inset:0;transition:opacity .5s}
.dp-vivo .dp-poster img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.dp-vivo.listo .dp-poster{opacity:0}
.dp-vivo .dp-lienzo{display:block;position:absolute;inset:0;width:100%;height:100%}
.dp-vivo .dp-texto{position:absolute;left:max(24px,5vw,calc((100vw - 1180px) / 2 + 24px));top:50%;transform:translateY(-50%);width:min(400px,30vw)}
.dp-vivo .dp-paso{opacity:.32}
.dp-vivo .dp-paso .dest{background-size:0% 1px}
.dp-vivo .dp-paso.activo{opacity:1}
.dp-vivo .dp-paso.activo .dest{background-size:100% 1px}
.dp-vivo .dp-paso.activo .dp-n{color:var(--oro-cl)}
.dp-vivo .dp-barra i{transform:scaleX(var(--p,0))}
/* Entrada del texto: sube y se aclara cuando la escena llega */
.dp-vivo .dp-texto>*{transition:opacity .9s var(--l-ease),transform .9s var(--l-ease)}
.dp-vivo:not(.dentro) .dp-texto>*{opacity:0;transform:translateY(18px)}
.dp-vivo .dp-texto>:nth-child(2){transition-delay:.08s}.dp-vivo .dp-texto>:nth-child(3){transition-delay:.16s}
.dp-vivo .dp-texto>:nth-child(4){transition-delay:.24s}.dp-vivo .dp-texto>:nth-child(5){transition-delay:.32s}

/* Pantallas estrechas o casi cuadradas: texto arriba, escena vertical debajo, un paso cada vez */
@media (max-width:1100px),(max-aspect-ratio:3/2){
  .dp-vivo{height:300vh}
  .dp-vivo .dp-pin{display:flex;flex-direction:column}
  .dp-vivo .dp-texto{position:relative;left:auto;top:auto;transform:none;width:auto;padding:clamp(1.2rem,4vh,2.2rem) 24px 0;max-width:620px;margin-inline:auto;text-align:center}
  .dp-vivo .dp-texto .etiqueta{justify-content:center}
  .dp-vivo .dp-texto h2{font-size:clamp(1.9rem,7.4vw,2.8rem)}
  .dp-vivo .dp-pasos{display:grid;margin-top:1.1rem}
  .dp-vivo .dp-paso{grid-area:1/1;justify-content:center;text-align:center;opacity:0;transform:translateY(10px)}
  .dp-vivo .dp-paso.activo{opacity:1;transform:none}
  .dp-vivo .dp-n{display:none}
  .dp-vivo .dp-paso p{margin-inline:auto;font-size:.95rem}
  .dp-vivo .dp-barra{margin:1rem auto 0;max-width:180px}
  .dp-vivo .dp-ctas{display:none}
  .dp-vivo .dp-escena{position:relative;inset:auto;flex:1;min-height:0}
  .dp-vivo .dp-poster img{object-fit:contain;object-position:50% 50%}
}

/* ── Móvil (12 oct): el brillo de la palabra que rota sin rectángulo y el sello sin tapar «Pide tu web» ──
   El text-shadow quedaba recortado por el overflow de .rota y se veía una caja; el drop-shadow va por fuera. */
.hero .rota-in{text-shadow:none}
/* el brillo va en la línea entera: la propia línea también recorta (overflow de la animación de entrada) */
.hero .mega .linea:nth-child(2){filter:drop-shadow(0 0 24px rgba(201,169,97,.3))}
@media(max-width:899px){
  .hero-lujo .sello{left:auto;right:18px;bottom:auto;top:3.4rem;width:92px;height:92px}
  .hero-lujo .sello-m{font-size:1.8rem}
}
@media(max-width:380px){.hero-lujo .sello{right:12px;width:80px;height:80px}.hero-lujo .sello-m{font-size:1.55rem}}