/* ════════════════════════════════════════════════════════════
   MONTAMOS TU WEB · hoja de estilo compartida por todas las páginas
   Fuentes autoalojadas (RGPD): nunca el CDN de Google.
   ════════════════════════════════════════════════════════════ */
@font-face{font-family:'Fraunces';src:url(fonts/fraunces-var.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(fonts/fraunces-italica-var.woff2) format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken';src:url(fonts/hanken-var.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --papel:#FAFAF7; --papel-2:#F2F0E9; --blanco:#FFFFFF;
  --tinta:#0A0A0A; --tinta-2:#161616;
  --cobalto:#1E3A8A; --cobalto-cl:#2D4FAD;
  --oro:#C9A961; --oro-t:#86692A; --oro-humo:rgba(201,169,97,.16);
  --texto:#4B5160; --gris:#666C78;
  --linea:rgba(10,10,10,.1); --linea-cl:rgba(250,250,247,.16);
  --wa:#25D366;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --t:.38s cubic-bezier(.22,.72,.26,1);
  --r:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--texto);font-family:var(--sans);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
section{position:relative;padding-block:clamp(4rem,9vw,7rem)}
section.wrap{padding-top:clamp(4rem,9vw,7rem);padding-bottom:clamp(4rem,9vw,7rem)}

/* ════════ TIPOGRAFÍA · el juego de mayúsculas y minúsculas ════════ */
h1,h2,h3{margin:0;color:var(--tinta);font-weight:400;text-wrap:balance}

/* Mayúscula: pesada, apretada, sans. Minúscula: fina, cursiva, serif. */
.may{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;
  font-style:normal;line-height:.88}
.min{font-family:var(--serif);font-weight:300;font-style:italic;text-transform:none;
  letter-spacing:-.02em;line-height:.9;color:var(--cobalto)}
.min--oro{color:var(--oro)}

.mega{font-size:clamp(3rem,10.5vw,8.6rem);line-height:.9;letter-spacing:-.03em}
.mega .may,.mega .min{display:inline}
.grande{font-size:clamp(2.3rem,6.2vw,4.6rem);line-height:.95}

h2{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.04;letter-spacing:-.02em;font-weight:350}
h2 em{font-style:italic;font-weight:300;color:var(--cobalto)}
h3{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.2;font-weight:450;letter-spacing:-.01em}

.etiqueta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);
  font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-t);margin:0 0 1.3rem}
.etiqueta::before{content:"";width:22px;height:1px;background:currentColor}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.75;max-width:58ch}

.cab{max-width:62ch;margin-bottom:clamp(2.6rem,5vw,3.8rem)}
.cab--centro{margin-left:auto;margin-right:auto;text-align:center}
.cab--centro .etiqueta{justify-content:center}
.cab p{margin-top:1.1rem}

/* ════════ BOTONES ════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.7rem;border-radius:100px;font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t)}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn--tinta{background:var(--tinta);color:var(--papel)}
.btn--tinta:hover{background:var(--cobalto)}
.btn--wa{background:var(--wa);color:#062B14}
.btn--wa:hover{background:#1FBE5A}
.btn--linea{border-color:var(--tinta);color:var(--tinta)}
.btn--linea:hover{background:var(--tinta);color:var(--papel)}
.btn--claro{background:var(--papel);color:var(--tinta)}
.btn--claro:hover{background:var(--oro);color:var(--tinta)}
.btn--linea-cl{border-color:rgba(250,250,247,.4);color:var(--papel)}
.btn--linea-cl:hover{background:var(--papel);color:var(--tinta)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem}

.enlace{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);border-bottom:1.5px solid var(--oro);
  padding-bottom:.25rem;transition:gap var(--t),color var(--t)}
.enlace:hover{gap:.85rem;color:var(--cobalto)}

/* ════════ BARRA ════════ */
.barra{position:sticky;top:0;z-index:80;background:rgba(250,250,247,.9);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:border-color var(--t)}
.barra.on{border-bottom-color:var(--linea)}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding-block:.9rem}
.logo{display:flex;flex-direction:column;line-height:1;gap:.3rem}
.logo b{font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--tinta);letter-spacing:-.01em}
.logo b span{color:var(--oro)}
.logo i{font-style:normal;font-size:.5rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--oro-t)}
.menu{display:flex;align-items:center;gap:1.9rem}
.menu a{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--texto);
  position:relative;transition:color var(--t)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--oro);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.menu a:hover{color:var(--tinta)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:var(--tinta)}
.menu .btn{padding:.75rem 1.3rem;font-size:.66rem}
.menu .btn::after{display:none}
.hamburguesa{display:none;background:none;border:0;padding:.4rem;cursor:pointer;color:var(--tinta)}
.hamburguesa svg{width:26px;height:26px}

@media(max-width:940px){
  .hamburguesa{display:block}
  .menu{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);flex-direction:column;align-items:flex-start;
    gap:1.4rem;padding:5.5rem 2rem 2rem;background:var(--papel);box-shadow:-20px 0 60px rgba(0,0,0,.14);
    transform:translateX(105%);transition:transform var(--t);z-index:90}
  .menu.abierto{transform:none}
  .menu a{font-size:.92rem}
  .menu .btn{margin-top:.6rem;padding:1rem 1.5rem;font-size:.72rem}
  .cerrar-menu{position:absolute;top:1.3rem;right:1.3rem;background:none;border:0;cursor:pointer;color:var(--tinta)}
  .cerrar-menu svg{width:26px;height:26px}
}
@media(min-width:941px){.cerrar-menu{display:none}}
.velo-menu{position:fixed;inset:0;background:rgba(10,10,10,.4);z-index:85;opacity:0;pointer-events:none;transition:opacity var(--t)}
.velo-menu.on{opacity:1;pointer-events:auto}

/* ════════ HERO DE INICIO ════════ */
.hero{padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3.5rem,7vw,5rem);overflow:hidden}
.hero .etiqueta{margin-bottom:1.6rem}
.hero-sub{display:grid;grid-template-columns:1fr auto;gap:2rem 3rem;align-items:end;
  margin-top:clamp(2rem,4vw,3rem);padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--linea)}
.hero-sub .lead{margin:0}
.confianza{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem;font-size:.86rem;color:var(--gris)}
.estrellas{display:flex;gap:2px;color:var(--oro)}
.estrellas svg{width:14px;height:14px}
.confianza b{color:var(--tinta);font-weight:700}
@media(max-width:780px){.hero-sub{grid-template-columns:1fr}}

/* ════════ CABECERA DE PÁGINA INTERIOR ════════ */
.cab-pag{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(2.6rem,5vw,3.6rem);border-bottom:1px solid var(--linea)}
.cab-pag .mega{font-size:clamp(2.7rem,8.6vw,7rem)}
.cab-pag .lead{margin-top:clamp(1.6rem,3vw,2.2rem)}
.miga{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:1.4rem}
.miga a:hover{color:var(--tinta)}

/* ════════ CINTA DE CLIENTES ════════ */
.cinta{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--blanco);
  overflow:hidden;padding-block:1.3rem}
.cinta-pista{display:flex;gap:3.4rem;width:max-content;animation:desliza 38s linear infinite}
.cinta span{font-family:var(--serif);font-size:1.25rem;font-style:italic;font-weight:300;color:var(--tinta);white-space:nowrap}
.cinta span b{font-family:var(--sans);font-style:normal;font-weight:800;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro-t);margin-left:.7rem;vertical-align:middle}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ════════ LAS DOS PUERTAS ════════ */
.puertas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
.puerta{position:relative;display:flex;flex-direction:column;padding:clamp(2rem,4vw,3rem);border-radius:var(--r);
  overflow:hidden;min-height:420px;transition:transform var(--t)}
.puerta:hover{transform:translateY(-4px)}
.puerta--webs{background:var(--tinta);color:rgba(250,250,247,.72)}
.puerta--redes{background:var(--cobalto);color:rgba(250,250,247,.78)}
.puerta .num{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.2em;color:var(--oro)}
.puerta h3{margin:1.4rem 0 1rem;color:var(--papel)}
.puerta h3 .may{font-size:clamp(2.4rem,5vw,3.8rem);display:block}
.puerta h3 .min{font-size:clamp(2rem,4.2vw,3.1rem);color:var(--oro);display:block;margin-top:.1em}
.puerta ul{list-style:none;margin:0 0 2rem;padding:0}
.puerta li{position:relative;padding-left:1.4rem;margin-bottom:.55rem;font-size:.95rem}
.puerta li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--oro)}
.puerta .btn{margin-top:auto;align-self:flex-start}
@media(max-width:820px){.puertas{grid-template-columns:1fr}.puerta{min-height:0}}

/* ════════ LO NORMAL / LO NUESTRO ════════ */
.duelos{border-top:1px solid var(--linea)}
.duelo{display:grid;grid-template-columns:auto 1fr 1.15fr;gap:clamp(1rem,3vw,3rem);align-items:start;
  padding-block:clamp(1.6rem,3vw,2.2rem);border-bottom:1px solid var(--linea)}
.duelo-n{font-family:var(--serif);font-size:1rem;font-style:italic;color:var(--oro-t);padding-top:.2rem;min-width:2rem}
.duelo-mal{font-size:.95rem;color:var(--gris);text-decoration:line-through;text-decoration-color:rgba(10,10,10,.28)}
.duelo-mal small{display:block;text-decoration:none;font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.45rem}
.duelo-bien h3{margin-bottom:.4rem}
.duelo-bien p{font-size:.95rem;margin:0}
@media(max-width:760px){.duelo{grid-template-columns:1fr;gap:.6rem}}

/* ════════ INCLUYE ════════ */
.incluye{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.inc{background:var(--papel);padding:clamp(1.6rem,3vw,2.2rem);transition:background var(--t)}
.inc:hover{background:var(--blanco)}
.inc-n{font-family:var(--sans);font-size:.64rem;font-weight:800;letter-spacing:.2em;color:var(--oro-t);display:block;margin-bottom:1rem}
.inc h3{margin-bottom:.5rem}
.inc p{font-size:.93rem;margin:0}

/* ════════ TRABAJOS ════════ */
.trabajos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.trabajo{display:flex;flex-direction:column;justify-content:space-between;gap:2.2rem;min-height:260px;
  padding:clamp(1.7rem,3vw,2.3rem);border-radius:var(--r);background:var(--blanco);border:1px solid var(--linea);
  transition:border-color var(--t),transform var(--t),background var(--t)}
.trabajo:hover{border-color:var(--tinta);transform:translateY(-4px)}
.trabajo-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.trabajo .sector{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-t)}
.trabajo .flecha{width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;
  transition:background var(--t),color var(--t),border-color var(--t);flex-shrink:0}
.trabajo:hover .flecha{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.trabajo .flecha svg{width:15px;height:15px}
.trabajo h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.35rem}
.trabajo .dominio{font-size:.84rem;color:var(--gris)}
@media(max-width:700px){.trabajos{grid-template-columns:1fr}.trabajo{min-height:0}}

/* ════════ OPINIONES ════════ */
.opiniones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.4rem)}
.op{display:flex;flex-direction:column;padding:clamp(1.7rem,3vw,2.2rem);border-radius:var(--r);background:var(--blanco);border:1px solid var(--linea)}
.op .estrellas{margin-bottom:1.2rem}
.op blockquote{margin:0 0 1.6rem;font-family:var(--serif);font-size:1.08rem;line-height:1.55;color:var(--tinta);font-weight:350}
.op blockquote em{font-style:italic;color:var(--cobalto)}
.op figcaption{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--linea);font-size:.84rem}
.op figcaption b{display:block;color:var(--tinta);font-weight:700}
.nota-google{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.nota-google .grande-nota{display:flex;align-items:baseline;gap:.8rem}
.nota-google .grande-nota b{font-family:var(--serif);font-size:3rem;font-weight:400;color:var(--tinta);line-height:1}
.nota-google span{font-size:.88rem;color:var(--gris)}
@media(max-width:900px){.opiniones{grid-template-columns:1fr}}

/* ════════ GARANTÍA ════════ */
.garantia{background:var(--tinta);color:rgba(250,250,247,.72);border-radius:calc(var(--r) + 6px);
  padding:clamp(2.4rem,5vw,4rem);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.garantia .etiqueta{color:var(--oro)}
.garantia h2{color:var(--papel)}
.garantia h2 .may{font-size:clamp(2.6rem,6vw,4.4rem);display:block}
.garantia h2 .min{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--oro);display:block}
.garantia ul{list-style:none;margin:0;padding:0}
.garantia li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding-block:1.1rem;border-bottom:1px solid var(--linea-cl);font-size:.96rem}
.garantia li:last-child{border-bottom:0}
.garantia li b{font-family:var(--serif);font-size:1.9rem;color:var(--oro);font-weight:400;line-height:1;min-width:3.4rem}
.garantia li strong{color:var(--papel);font-weight:600}
@media(max-width:860px){.garantia{grid-template-columns:1fr}}

/* ════════ VÍDEO ════════ */
.video-bloque{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.video-marco{border-radius:var(--r);overflow:hidden;background:var(--papel-2);border:1px solid var(--linea)}
.video-marco video{width:100%;height:auto}
@media(max-width:860px){.video-bloque{grid-template-columns:1fr}}

/* ════════ PASOS ════════ */
.pasos{list-style:none;margin:0;padding:0;counter-reset:p}
.paso{counter-increment:p;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.6rem);
  align-items:baseline;padding-block:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--linea)}
.paso:last-child{border-bottom:1px solid var(--linea)}
.paso::before{content:counter(p,decimal-leading-zero);font-family:var(--sans);font-weight:800;
  font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.04em;color:var(--tinta);line-height:.9;min-width:3.4ch}
.paso h3{font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:.4rem}
.paso p{margin:0;font-size:.97rem;max-width:56ch}
.paso .cuando{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-t);white-space:nowrap}
@media(max-width:700px){.paso{grid-template-columns:auto 1fr}.paso .cuando{grid-column:2}}

/* ════════ REPARTO (redes) ════════ */
.reparto{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1rem,2vw,1.4rem)}
.rep{padding:clamp(1.8rem,3.5vw,2.6rem);border-radius:var(--r)}
.rep--tuyo{background:var(--papel-2)}
.rep--nuestro{background:var(--tinta);color:rgba(250,250,247,.74)}
.rep--nuestro h3,.rep--nuestro .rep-tiempo{color:var(--papel)}
.rep .etiqueta{margin-bottom:1rem}
.rep--nuestro .etiqueta{color:var(--oro)}
.rep h3{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:.4rem}
.rep-tiempo{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--cobalto);margin-bottom:1.4rem}
.rep ul{list-style:none;margin:0;padding:0}
.rep li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;font-size:.95rem}
.rep li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--oro)}
@media(max-width:820px){.reparto{grid-template-columns:1fr}}

/* ════════ LO QUE NO PROMETEMOS ════════ */
.honesto{background:var(--papel-2);border-radius:var(--r);padding:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.honesto .may{font-size:clamp(3.4rem,8vw,6rem);color:var(--oro);line-height:.8}
.honesto p{font-size:1.02rem}
@media(max-width:700px){.honesto{grid-template-columns:1fr}}

/* ════════ PREGUNTAS ════════ */
.dudas{border-top:1px solid var(--linea)}
.duda{border-bottom:1px solid var(--linea)}
.duda summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding-block:1.4rem;font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.35rem);color:var(--tinta);font-weight:400}
.duda summary::-webkit-details-marker{display:none}
.duda summary::after{content:"";flex-shrink:0;width:14px;height:14px;
  background:linear-gradient(var(--tinta),var(--tinta)) center/100% 1.5px no-repeat,
             linear-gradient(var(--tinta),var(--tinta)) center/1.5px 100% no-repeat;
  transition:transform var(--t)}
.duda[open] summary::after{transform:rotate(45deg)}
.duda p{padding-bottom:1.5rem;max-width:66ch;font-size:.97rem}

/* ════════ CONTACTO ════════ */
.contacto{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1rem,2vw,1.5rem)}
.canal{border-radius:var(--r);padding:clamp(2rem,4vw,3rem);display:flex;flex-direction:column}
.canal--wa{background:var(--tinta);color:rgba(250,250,247,.74)}
.canal--wa h2{color:var(--papel)}
.canal--wa .etiqueta{color:var(--oro)}
.canal--tel{background:var(--blanco);border:1px solid var(--linea)}
.canal ol{margin:1.4rem 0 2rem;padding-left:1.2rem}
.canal li{margin-bottom:.5rem}
.canal .btn{margin-top:auto;align-self:flex-start}
.tel-grande{font-family:var(--sans);font-weight:800;font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-.035em;color:var(--tinta);
  line-height:1;margin:.6rem 0 1.2rem;display:block}
@media(max-width:860px){.contacto{grid-template-columns:1fr}}

/* ════════ BANDA FINAL ════════ */
.banda{background:var(--tinta);color:rgba(250,250,247,.72);overflow:hidden}
.banda-in{display:grid;grid-template-columns:1.3fr auto;gap:2rem 3rem;align-items:end}
.banda .etiqueta{color:var(--oro)}
.banda h2{color:var(--papel)}
.banda h2 .may{font-size:clamp(2.6rem,7.4vw,6.2rem);display:block}
.banda h2 .min{font-size:clamp(2.3rem,6.4vw,5.4rem);color:var(--oro);display:block}
.banda p{margin-top:1.3rem;max-width:48ch}
.banda .btns{flex-direction:column;align-items:stretch}
@media(max-width:820px){.banda-in{grid-template-columns:1fr}.banda .btns{flex-direction:row;align-items:center}}

/* ════════ PIE ════════ */
.pie{background:var(--tinta-2);color:rgba(250,250,247,.6);padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.88rem}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.2rem}
.pie .logo b{color:var(--papel)}
.pie .logo i{color:var(--oro)}
.pie h4{margin:0 0 1rem;font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--papel)}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:.55rem}
.pie a:hover{color:var(--papel)}
.pie-fin{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;
  border-top:1px solid var(--linea-cl);font-size:.78rem}
@media(max-width:820px){.pie-rejilla{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.pie-rejilla{grid-template-columns:1fr}}

/* ════════ WHATSAPP FLOTANTE ════════ */
.wa-flotante{position:fixed;right:18px;bottom:18px;z-index:70;width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform var(--t)}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:28px;height:28px}

/* ════════ COOKIES · tres botones iguales ════════ */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);padding:1.4rem;max-width:620px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.16)}
.ck[hidden]{display:none!important}
.ck p{font-size:.86rem;margin:0 0 1.1rem}
.ck-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.ck-btns button{padding:.75rem .5rem;border-radius:100px;border:1.5px solid var(--tinta);background:var(--blanco);
  color:var(--tinta);font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;transition:background var(--t),color var(--t)}
.ck-btns button:hover{background:var(--tinta);color:var(--papel)}
@media(max-width:480px){.ck-btns{grid-template-columns:1fr}}

/* ════════ APARICIONES · solo si hay JS ════════ */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.72,.26,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
.fondo-2{background:var(--papel-2)}
.fondo-blanco{background:var(--blanco)}
:focus-visible{outline:2px solid var(--cobalto);outline-offset:3px}
.salto{position:absolute;left:-9999px;top:0;background:var(--tinta);color:var(--papel);padding:.8rem 1.2rem;z-index:200}
.salto:focus{left:1rem;top:1rem}

/* ════════ ARREGLO · el botón del menú ════════
   .menu a (0,1,1) ganaba a .btn--tinta (0,1,0): el texto salía gris sobre negro,
   y en Contacto, con aria-current, negro sobre negro. Va al final a propósito. */
.menu a.btn--tinta,
.menu a.btn--tinta:hover,
.menu a.btn--tinta[aria-current="page"]{color:var(--papel)}
.menu a.btn--tinta[aria-current="page"]{background:var(--cobalto)}

/* ════════ ARREGLO · el menú de móvil estiraba la página ════════
   Cerrado quedaba fuera de pantalla a la derecha y ensanchaba el documento
   hasta 693 px en un móvil de 375. Además sus enlaces se podían tabular sin verse.
   overflow-x:clip (no hidden) para no romper la barra sticky. */
html{overflow-x:clip}
@media(max-width:940px){
  .menu{visibility:hidden;transition:transform var(--t),visibility 0s linear .38s}
  .menu.abierto{visibility:visible;transition:transform var(--t),visibility 0s linear 0s}
}

/* ════════════════════════════════════════════════════════════════
   DETALLES · segunda pasada (16 sep 2026)
   Todo al final de la hoja a propósito: gana en los empates.
   Solo se anima transform y opacity, que van por la tarjeta gráfica.
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · Barra de progreso de lectura: CSS nativo, cero JavaScript ── */
.progreso{position:fixed;top:0;left:0;right:0;height:2px;z-index:130;pointer-events:none;
  background:linear-gradient(90deg,var(--oro),var(--cobalto));transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  .progreso{animation:progreso linear both;animation-timeline:scroll(root)}
}
@keyframes progreso{to{transform:scaleX(1)}}

/* ── 2 · Titulares que suben línea a línea desde una máscara ── */
.linea{display:block;overflow:hidden;padding:0 .14em .16em;margin:0 -.14em -.16em}
.linea-in{display:inline-block}
.js .linea-in{transform:translateY(112%);animation:sube 1s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay:calc(var(--i,0) * .11s + .12s)}
@keyframes sube{to{transform:none}}

/* ── 3 · El subrayado dorado que se dibuja solo ── */
.subrayado{position:relative;display:inline-block}
.trazo{position:absolute;left:-2%;bottom:-.02em;width:104%;height:.26em;overflow:visible;pointer-events:none}
.trazo path{fill:none;stroke:var(--oro);stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:0}
.js .trazo path{stroke-dashoffset:1;animation:traza 1.1s cubic-bezier(.65,0,.35,1) forwards 1.05s}
@keyframes traza{to{stroke-dashoffset:0}}

/* ── 4 · El sello que gira, a caballo entre el hero y la cinta ── */
.hero{overflow:visible;position:relative}
.sello{position:absolute;right:max(24px,calc((100vw - 1180px) / 2 + 24px));bottom:-66px;width:132px;height:132px;
  z-index:6;border-radius:50%;background:var(--papel);display:grid;place-items:center;
  box-shadow:0 0 0 1px var(--linea),0 14px 40px -16px rgba(10,10,10,.28)}
.sello svg{position:absolute;inset:0;width:100%;height:100%;animation:gira 22s linear infinite}
.sello text{font-family:var(--sans);font-size:10.4px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;fill:var(--tinta)}
.sello-m{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:var(--tinta);line-height:1}
.sello-m i{font-style:normal;color:var(--oro)}
.sello:hover svg{animation-duration:6s}
@keyframes gira{to{transform:rotate(360deg)}}
@media(max-width:780px){.sello{width:104px;height:104px;bottom:-52px;right:18px}.sello-m{font-size:2rem}.sello text{font-size:10px}}

/* ── 5 · La cinta: dos filas en sentidos contrarios, se para al pasar el ratón ── */
.cinta{padding-block:0}
.cinta-pista{padding-block:1.15rem}
.cinta-pista+.cinta-pista{border-top:1px solid var(--linea);background:var(--papel)}
.cinta-pista--inversa{animation-direction:reverse;animation-duration:46s}
.cinta-pista--inversa span{font-family:var(--sans);font-style:normal;font-weight:800;font-size:.8rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.cinta-pista--inversa span b{color:var(--oro);font-size:.9rem;letter-spacing:0;margin-left:3.4rem}
.cinta:hover .cinta-pista,.cinta.quieta .cinta-pista{animation-play-state:paused}

/* ── 6 · Los titulares de sección suben palabra a palabra ── */
.palabra{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .12em;margin:0 -.08em -.12em}
.palabra-in{display:inline-block}
.js .cab .palabra-in{transform:translateY(105%);transition:transform .85s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i,0) * .045s)}
.js .cab.in .palabra-in{transform:none}

/* ── 7 · "Lo normal" se tacha solo cuando entra en pantalla ── */
.duelo-mal{text-decoration:none}
.tachado{background-image:linear-gradient(rgba(10,10,10,.42),rgba(10,10,10,.42));background-repeat:no-repeat;
  background-position:0 58%;background-size:100% 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .tachado{background-size:0% 1.5px;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .35s}
.js .duelo.in .tachado{background-size:100% 1.5px}
.js .duelo-bien{opacity:.35;transition:opacity .7s ease 1.1s}
.js .duelo.in .duelo-bien{opacity:1}

/* ── 8 · Tarjetas de trabajo: se llenan de tinta desde abajo ── */
.trabajo{position:relative;overflow:hidden;isolation:isolate}
.trabajo::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinta);
  transform:translateY(101%);transition:transform .6s cubic-bezier(.7,0,.2,1)}
.trabajo:hover::before,.trabajo:focus-visible::before{transform:none}
.trabajo h3,.trabajo .dominio,.trabajo .sector{transition:color .35s ease .08s}
.trabajo:hover h3,.trabajo:focus-visible h3{color:var(--papel)}
.trabajo:hover .dominio,.trabajo:focus-visible .dominio{color:rgba(250,250,247,.66)}
.trabajo:hover .sector,.trabajo:focus-visible .sector{color:var(--oro)}
.trabajo .flecha svg{transition:transform .5s cubic-bezier(.19,1,.22,1)}
.trabajo:hover .flecha{background:var(--oro);border-color:var(--oro);color:var(--tinta)}
.trabajo:hover .flecha svg{transform:rotate(45deg)}

/* ── 9 · Las puertas: la palabra grande se abre un poco al pasar ── */
.puerta h3 .may{transition:letter-spacing .6s cubic-bezier(.19,1,.22,1)}
.puerta:hover h3 .may{letter-spacing:-.005em}
.puerta::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  border:1px solid rgba(201,169,97,.22);transition:transform .9s cubic-bezier(.19,1,.22,1);pointer-events:none}
.puerta:hover::after{transform:scale(1.35)}

/* ── 10 · Botones magnéticos (solo con ratón) ── */
.iman{transform:translate3d(var(--mx,0px),var(--my,0px),0)}
.iman:hover{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 2px),0)}

/* ── 11 · Grano de papel en las cabeceras (se rasteriza una vez, no se repinta) ── */
.hero,.cab-pag{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* ── 12 · La parte de abajo: la marca gigante ── */
.pie{padding-bottom:0;overflow:hidden}
.gigante{margin-top:clamp(3rem,6vw,5rem);padding-inline:clamp(12px,2vw,24px);color:var(--papel);
  user-select:none;text-align:center}
.gigante .linea{padding-bottom:.02em;margin-bottom:0}
.gigante .may{font-size:clamp(3.6rem,16.4vw,15.5rem);letter-spacing:-.055em;line-height:.78;display:block;color:var(--papel)}
.gigante .min{font-size:clamp(3rem,12.4vw,11.5rem);color:var(--oro);display:block;line-height:.9;margin-top:-.06em}
.js .gigante .linea-in{animation:none;transform:translateY(105%);transition:transform 1.2s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i,0) * .14s)}
.js .gigante.in .linea-in{transform:none}
.js .gigante.rv{opacity:1;transform:none}
.pie-fin{align-items:center}
.arriba{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;color:var(--papel)}
.arriba span{display:inline-block;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.arriba:hover span{transform:translateY(-4px)}
.reloj{display:flex;align-items:center;gap:.55rem;margin-top:1rem;color:rgba(250,250,247,.62)}
.punto{width:7px;height:7px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:late 2.4s ease-out infinite}
@keyframes late{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* ── 13 · La banda final: el botón de WhatsApp respira ── */
.banda .btn--wa{position:relative}
.banda .btn--wa::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:1.5px solid var(--wa);
  opacity:0;animation:aro 2.8s ease-out infinite;pointer-events:none}
@keyframes aro{0%{opacity:.7;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}

/* ── 14 · Pasos e "incluye": un detalle dorado al pasar ── */
.paso::before{transition:color .45s ease}
.paso:hover::before{color:var(--oro)}
.inc{position:relative}
.inc::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--oro);
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.inc:hover::after{transform:scaleX(1)}

/* ── Sin movimiento para quien lo pide: todo quieto y visible ── */
@media(prefers-reduced-motion:reduce){
  .js .linea-in,.js .palabra-in,.js .gigante .linea-in{transform:none!important;animation:none!important}
  .js .trazo path{stroke-dashoffset:0!important;animation:none!important}
  .js .tachado{background-size:100% 1.5px!important}
  .js .duelo-bien{opacity:1!important}
  .sello svg,.cinta-pista,.punto,.banda .btn--wa::after{animation:none!important}
  .progreso{display:none}
}

/* ════════ BLINDAJE · que nunca se quede nada escondido ════════
   El estado de partida va dentro de la animación (fill both), no fijo en la regla.
   Si un navegador no anima, el titular se ve en su sitio en vez de quedarse oculto. */
.js .linea-in{transform:none;animation:sube 1s cubic-bezier(.19,1,.22,1) both;
  animation-delay:calc(var(--i,0) * .11s + .12s)}
@keyframes sube{from{transform:translateY(112%)}to{transform:none}}
.js .trazo path{stroke-dashoffset:0;animation:traza 1.1s cubic-bezier(.65,0,.35,1) 1.05s both}
@keyframes traza{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* El número dorado grande de Redes: el oro normal se quedaba en 2,15 sobre el papel */
.honesto .may{color:#A0803A}

/* ════════════════════════════════════════════════════════════════
   TERCERA PASADA · "una web de 10" (17 sep 2026)
   Ideas vistas en la competencia, hechas desde cero y a nuestra manera.
   Va al final de la hoja: gana en los empates.
   ════════════════════════════════════════════════════════════════ */

:root{--reticula:rgba(10,10,10,.11);color-scheme:light}

/* ── A · Barra: logo · menú · acciones ── */
.barra-in{justify-content:flex-start}
.menu{margin-left:auto}
.barra-acciones{display:flex;align-items:center;gap:.35rem;margin-left:1.1rem}
@media(max-width:940px){.barra-acciones{margin-left:auto}}
.tema{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--linea);background:transparent;color:var(--tinta);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:border-color var(--t),transform .5s cubic-bezier(.19,1,.22,1)}
.tema:hover{border-color:var(--tinta);transform:rotate(-14deg)}
.tema svg{width:18px;height:18px}
.tema .gota{fill:transparent;transition:fill .35s ease}
[data-tema="tinta"] .tema .gota{fill:currentColor}

/* ── B · La intro: el logo se MONTA pieza a pieza (CSS puro: no se puede atascar) ── */
.intro{display:none}
html.con-intro .intro{display:grid;place-items:center;position:fixed;inset:0;z-index:300;background:#0A0A0A;color:#FAFAF7;
  animation:telon .75s cubic-bezier(.76,0,.24,1) 1.5s forwards}
.intro-marca{display:flex;flex-direction:column;align-items:center;gap:1.1rem;padding-inline:24px}
.intro-letras{display:flex;overflow:hidden;padding:.12em .06em;font-family:var(--serif);font-weight:600;
  font-size:clamp(2.2rem,8vw,4.8rem);letter-spacing:-.02em;line-height:1}
.intro-letras span{display:inline-block;opacity:0;transform:translateY(115%) rotate(9deg);
  animation:pieza .6s cubic-bezier(.2,.9,.25,1.2) forwards;animation-delay:calc(var(--i) * .045s + .1s)}
.intro-letras .intro-punto{color:#C9A961}
.intro-linea{display:block;width:min(340px,62vw);height:1.5px;background:#C9A961;transform:scaleX(0);transform-origin:left;
  animation:regla .6s cubic-bezier(.65,0,.35,1) .85s forwards}
.intro-lema{font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(250,250,247,.62);opacity:0;animation:aparece .5s ease 1s forwards}
@keyframes pieza{to{opacity:1;transform:none}}
@keyframes regla{to{transform:scaleX(1)}}
@keyframes aparece{to{opacity:1}}
@keyframes telon{to{transform:translateY(-100%);visibility:hidden}}
/* Con intro, el hero espera a que suba el telón */
html.con-intro .linea-in{animation-delay:calc(var(--i,0) * .11s + 1.8s)}
html.con-intro .trazo path{animation-delay:2.75s}
html.con-intro .hero .rv,html.con-intro .cab-pag .rv{transition-delay:1.75s}
html.con-intro .sello{opacity:0;animation:aparece .6s ease 2.3s forwards}

/* ── C · La palabra que rota, como un marcador ── */
.rota{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;text-align:left;
  padding-bottom:.08em;margin-bottom:-.08em}
.rota-in{display:inline-block}
.rota-in.sale{position:absolute;left:0;top:0;animation:rota-sale .75s cubic-bezier(.76,0,.24,1) forwards}
.rota-in.entra{animation:rota-entra .75s cubic-bezier(.76,0,.24,1) forwards}
@keyframes rota-sale{to{transform:translateY(-108%)}}
@keyframes rota-entra{from{transform:translateY(108%)}to{transform:none}}

/* ── D · Retícula de cruces de dibujo técnico, detrás del hero ── */
.hero{isolation:isolate}
.reticula{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

/* ── E · Cursor propio (solo ratón; si falla el JS, el de siempre) ── */
html.cursor-propio,html.cursor-propio *{cursor:none!important}
.cursor-punto,.cursor-anillo{position:fixed;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .3s ease}
.cursor-punto{z-index:260;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;mix-blend-mode:difference}
.cursor-anillo{z-index:259;mix-blend-mode:difference}
.cursor-forma{position:absolute;left:0;top:0;width:36px;height:36px;transform:translate(-50%,-50%);border-radius:50%;
  border:1.5px solid #fff;display:grid;place-items:center;
  transition:width .5s cubic-bezier(.19,1,.22,1),height .5s cubic-bezier(.19,1,.22,1),background-color .3s,border-color .3s}
.cursor-texto{font-family:var(--sans);font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#0A0A0A;white-space:nowrap;opacity:0;transition:opacity .2s}
html.cursor-activo .cursor-punto,html.cursor-activo .cursor-anillo{opacity:1}
html.cursor-enlace .cursor-forma{width:58px;height:58px}
html.cursor-ver .cursor-anillo{mix-blend-mode:normal}
html.cursor-ver .cursor-forma{width:98px;height:98px;background:#C9A961;border-color:#C9A961}
html.cursor-ver .cursor-texto{opacity:1;transition-delay:.12s}
html.cursor-ver .cursor-punto{opacity:0}
html.cursor-pulsa .cursor-forma{width:26px;height:26px}

/* ── F · Trabajos: la web del cliente dentro de una ventana 3D ── */
.trabajo--captura{padding:0;min-height:0;gap:0;background:transparent;border:0;border-radius:0;overflow:visible;isolation:auto}
.trabajo--captura::before{display:none}
.trabajo--captura:hover{border-color:transparent}
.pantalla{position:relative;border-radius:16px;overflow:hidden;background:var(--blanco);border:1px solid var(--linea);
  box-shadow:0 30px 60px -36px rgba(10,10,10,.38);
  transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .7s cubic-bezier(.19,1,.22,1),box-shadow .6s ease}
.trabajo--captura:hover .pantalla{box-shadow:0 48px 90px -40px rgba(10,10,10,.5)}
.pantalla-barra{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:var(--papel-2);border-bottom:1px solid var(--linea)}
.pantalla-barra i{width:8px;height:8px;border-radius:50%;background:var(--linea);flex-shrink:0}
.pantalla-barra i:first-child{background:var(--oro)}
.pantalla-barra span{margin-left:10px;min-width:0;font-size:.66rem;font-weight:600;color:var(--gris);background:var(--papel);
  padding:.22rem .8rem;border-radius:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pantalla-vista{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--papel-2)}
.pantalla-vista img{display:block;width:100%;height:auto;transform:translateY(0);
  transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
.trabajo--captura:hover .pantalla-vista img,.trabajo--captura:focus-visible .pantalla-vista img{
  transform:translateY(calc(var(--recorrido,0px) * -1));transition-duration:var(--dur,5s);transition-timing-function:cubic-bezier(.45,0,.55,1)}
.pantalla-brillo{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(460px circle at var(--bx,50%) var(--by,40%),rgba(255,247,226,.3),transparent 62%)}
.trabajo--captura:hover .pantalla-brillo{opacity:1}
.trabajo-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:1.25rem .25rem 0}
.trabajo--captura h3{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-top:.35rem}
.trabajo--captura:hover h3,.trabajo--captura:focus-visible h3{color:var(--tinta)}
.trabajo--captura:hover .sector,.trabajo--captura:focus-visible .sector{color:var(--oro-t)}
.trabajos{gap:clamp(1.6rem,3vw,2.6rem) clamp(1.2rem,2.4vw,2rem)}

/* ── G · Los pasos: la línea dorada se dibuja al bajar ── */
.paso{position:relative}
.paso::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--oro);
  transform:scaleX(0);transform-origin:left;pointer-events:none}
@supports (animation-timeline: view()){
  .paso::after{animation:llena linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
}
@supports not (animation-timeline: view()){
  .paso::after{transition:transform 1s cubic-bezier(.65,0,.35,1) .2s}
  .paso.in::after{transform:scaleX(1)}
}
@keyframes llena{to{transform:scaleX(1)}}

/* ── H · Cambio de tema con círculo que se expande ── */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* ══════════════ MODO TINTA ══════════════
   Las superficies de la página se oscurecen; los bloques que ya eran oscuros
   siguen oscuros (un punto más claros para que se distingan), con su texto claro. */
:root[data-tema="tinta"]{
  --papel:#0D0D0C; --papel-2:#151513; --blanco:#1A1A18;
  --tinta:#F2EFE8; --tinta-2:#050505;
  --texto:#B9B5AC; --gris:#928E86;
  --linea:rgba(242,239,232,.12); --linea-cl:rgba(242,239,232,.16);
  --cobalto:#93AAFF; --cobalto-cl:#AEBFFF;
  --oro-t:#D5BA7C;
  --reticula:rgba(242,239,232,.10);
  color-scheme:dark;
}
[data-tema="tinta"] .barra{background:rgba(13,13,12,.86)}
[data-tema="tinta"] .banda,
[data-tema="tinta"] .garantia,
[data-tema="tinta"] .puerta--webs,
[data-tema="tinta"] .rep--nuestro,
[data-tema="tinta"] .canal--wa{background:#1D1C1A;box-shadow:inset 0 0 0 1px rgba(242,239,232,.07)}
[data-tema="tinta"] .puerta--redes{background:#1E3A8A}
[data-tema="tinta"] .banda h2,
[data-tema="tinta"] .garantia h2,
[data-tema="tinta"] .garantia li strong,
[data-tema="tinta"] .puerta h3,
[data-tema="tinta"] .rep--nuestro h3,
[data-tema="tinta"] .canal--wa h2{color:#FAFAF7}
[data-tema="tinta"] .btn--claro{background:#FAFAF7;color:#0A0A0A}
[data-tema="tinta"] .pie{background:#050505}
[data-tema="tinta"] .pie .logo b,
[data-tema="tinta"] .pie h4,
[data-tema="tinta"] .arriba,
[data-tema="tinta"] .gigante .may{color:#FAFAF7}
[data-tema="tinta"] .tachado{background-image:linear-gradient(rgba(242,239,232,.5),rgba(242,239,232,.5))}
[data-tema="tinta"] .pantalla{box-shadow:0 30px 60px -36px rgba(0,0,0,.8)}
[data-tema="tinta"] .sello{box-shadow:0 0 0 1px var(--linea),0 14px 40px -16px rgba(0,0,0,.7)}

/* ── Sin movimiento: nada de esto se mueve ── */
@media(prefers-reduced-motion:reduce){
  html.con-intro .intro{display:none!important}
  .rota-in.sale{display:none}
  .pantalla{transform:none!important}
  .pantalla-vista img{transition:none!important;transform:none!important}
  .paso::after{animation:none!important;transition:none!important;transform:scaleX(1)!important}
  .tema:hover{transform:none}
}

/* ── Modo tinta: botones y enlaces que usaban el color del papel sobre fondo oscuro ── */
[data-tema="tinta"] .btn--linea-cl{color:#FAFAF7}
[data-tema="tinta"] .btn--linea-cl:hover{background:#FAFAF7;color:#0A0A0A}
[data-tema="tinta"] .btn--claro:hover{color:#0A0A0A}
[data-tema="tinta"] .trabajo:hover .flecha{color:#0A0A0A}
[data-tema="tinta"] .pie a:hover{color:#FAFAF7}

/* ═══ CUARTA PASADA · retoques del hero ═══ */
/* El subrayado no se parte en dos líneas: «que te traen» baja entero */
.mega .subrayado{display:inline-block;white-space:nowrap}
/* El sello, al lado del titular: no pisa la cinta ni el botón de WhatsApp */
@media(min-width:900px){.sello{top:clamp(8rem,14.5vw,12.4rem);bottom:auto}}
/* En el móvil, las estrellas encima y el texto debajo, alineados */
@media(max-width:520px){.confianza{flex-wrap:wrap;gap:.45rem .8rem}.confianza>span:last-child{flex-basis:100%}}
.mega .subrayado .trazo{bottom:-.165em}
/* Tableta y móvil: el sello abajo a la izquierda, lejos del botón de WhatsApp */
@media(max-width:899px){.hero{padding-bottom:5.5rem}.sello{right:auto;left:24px}}
@media(max-width:780px){.sello{left:18px}}
@media(max-width:899px){.mega .subrayado{margin-bottom:.13em}}
/* Enlace a la experiencia (experiencia.html) bajo las opiniones del inicio */
.hero-exp{margin:1rem 0 0;font-size:.95rem}
.hero-exp a{color:var(--cobalto,#1E3A8A);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.hero-exp a:hover{text-decoration-thickness:2px}

/* ════════ 10 oct 2026 · Animaciones que acompañan la bajada ════════ */
/* body con overflow-x:hidden convierte el body en contenedor de scroll y rompe todo lo sticky
   (la barra, el portátil). clip recorta igual lo que se sale por los lados y no lo rompe. */
body{overflow-x:clip}

/* Portátil al entrar (web.js §7): sección alta con una capa fija; se pinta una secuencia de
   imágenes en un lienzo según el scroll. Solapa 100vh con el hero, que queda debajo y aparece al final. */
.hv{position:relative;height:380vh;margin-bottom:-100vh;padding:0;z-index:2;pointer-events:none}
.hv-pin{position:sticky;top:var(--hvb,0px);height:calc(100vh - var(--hvb,0px));height:calc(100svh - var(--hvb,0px));overflow:hidden;background:#0A0A0B}
.hv-capa{position:absolute;inset:0;will-change:opacity,scale}
.hv-poster,.hv-lienzo{position:absolute;inset:0;width:100%;height:100%}
.hv-poster{object-fit:cover}
.hv-lienzo{opacity:0}
.hv.listo .hv-lienzo{opacity:1}
/* Mientras espera, el portátil cerrado flota: invita a abrirlo */
.hv:not(.empezado) .hv-capa{animation:hv-flota 3.4s ease-in-out infinite alternate}
@keyframes hv-flota{from{translate:0 6px}to{translate:0 -8px}}
.hv-invita{position:absolute;left:0;right:0;top:clamp(20px,7vh,72px);display:flex;flex-direction:column;align-items:center;gap:.7rem;transition:opacity .4s,visibility 0s}
.hv.empezado .hv-invita{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.hv-abrir{pointer-events:auto;cursor:pointer;font:600 .82rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#FAFAF7;background:#0A0A0A;border:0;border-radius:100px;padding:1.05rem 1.9rem;position:relative;transition:transform .25s}
.hv-abrir:hover{transform:translateY(-2px)}
.hv-abrir:focus-visible{outline:3px solid var(--cobalto);outline-offset:4px}
.hv-abrir::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:1px solid rgba(201,169,97,.75);animation:hv-aro 2.2s ease-out infinite}
@keyframes hv-aro{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.18}}
.hv-pista{font:500 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#6A6A64}
.hv + .hero{position:relative;z-index:1}
@media(max-width:860px) and (orientation:portrait){.hv-poster{object-fit:contain}}
@media(prefers-reduced-motion:reduce){.hv{display:none}}

/* Vuelo de las 6 escenas (cómo trabajamos): la cabecera se pega al vuelo */
section.vuelo-cab{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.vuelo{--sw-bg:#FAFAF7;--sw-ink:#0A0A0A;--sw-ink-soft:#4A4A46;--sw-accent:#1E3A8A;--sw-font-display:var(--sans);--sw-font-body:var(--sans)}
.vuelo .sw-copy__title{font-weight:800;letter-spacing:-.02em}

/* Detalles con el scroll: solo donde el navegador lo hace solo (CSS scroll-driven), sin JS.
   Se usan translate/scale sueltos para no pisar los transform de .rv ni el giro de las capturas. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* 1 · las palabras en cursiva de los títulos se subrayan en oro al llegar, como el del hero */
    .cab h2 em{background:linear-gradient(var(--oro),var(--oro)) no-repeat 0 94%/0% 2px;
      animation:mtw-subraya linear both;animation-timeline:view();animation-range:entry 60% cover 42%}
    @keyframes mtw-subraya{to{background-size:100% 2px}}
    /* 2 · la rayita de cada etiqueta crece */
    .cab .etiqueta::before{animation:mtw-raya linear both;animation-timeline:view();animation-range:entry 30% cover 35%}
    @keyframes mtw-raya{from{width:0}to{width:22px}}
    /* 3 · los números flotan a otra velocidad que el resto (profundidad) */
    .duelo-n,.puerta .num{animation:mtw-flota linear both;animation-timeline:view();animation-range:cover}
    @keyframes mtw-flota{from{translate:0 26px}to{translate:0 -26px}}
    /* 4 · las capturas de los trabajos suben un poco más despacio */
    .trabajo--captura .pantalla{animation:mtw-flota-suave linear both;animation-timeline:view();animation-range:cover}
    @keyframes mtw-flota-suave{from{translate:0 34px}to{translate:0 -34px}}
    /* 5 · el bloque negro del final se abre como una tarjeta */
    .banda{animation:mtw-abre linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes mtw-abre{from{scale:.94;border-radius:32px}to{scale:1;border-radius:0}}
  }
}
/* Los estilos del motor del vuelo van en una capa (@layer) y los de la web les ganan:
   devolvemos lo que la web pisa (el color de los enlaces dejaba el botón negro sobre negro). */
.vuelo .sw-btn{text-decoration:none}
.vuelo .sw-btn--primary{color:#FAFAF7;background:#0A0A0A}
.vuelo .sw-btn--ghost{color:#0A0A0A;background:rgba(250,250,247,.7)}
.vuelo .sw-copy__tags{list-style:none;padding:0}
.vuelo .sw-copy__tags li{margin:0}