/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Verane · clon de estructura

   PALETA MEDIDA en el original (extract_design, área de TODA la página, no del primer viewport):
     fondos  #ffffff 35 % · #e6e0dc 24 % · #041a15 12 % · #000000 10 %
     tintas  #4c4c4c 40 % · #ffffff 33 % · #041a15 27 %
     acento  ninguno: ni un color llega a croma 0,12. La página es estrictamente neutra.
   Los verdes de apoyo (#3c4433, #eaeee6, #f2f3ee) salen de los fotogramas, no del muestreo,
   porque el muestreo los cuenta como fondo de sección y no como color.

   RITMO MEDIDO: espaciados 12/20/24/28/32/36 · radios 0/3/6/50 · filete 1px #d9d9d9.
   ESCALA MEDIDA: 60/50/42/30/24/20/18/16, con el 65 % del texto a 16 px (ratio 3,13).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --blanco:#fff;
  --hueso:#f2f3ee;
  --arena:#e6e0dc;
  --salvia:#eaeee6;
  --oliva:#3c4433;
  --bosque:#041a15;
  --tinta:#0d1f1a;
  --gris:#4c4c4c;
  --gris2:#2b312a;
  --filete:#d9d9d9;
  --cobre:#c98b6b;
  --barra:73px;
  --r:6px;
  --e1:12px; --e2:20px; --e3:24px; --e4:28px; --e5:32px; --e6:36px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:"Outfit",system-ui,sans-serif; font-size:16px; font-weight:400;
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em;line-height:1.1}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.marco{max-width:1280px;margin-inline:auto;padding-inline:16px}

/* ── escala ─────────────────────────────────────────────────────────────────────────────── */
.t-42{font-size:42px;line-height:1.14}
.t-c{text-align:center;text-wrap:balance}
.t-42{text-wrap:balance}
.sub{font-size:19px;line-height:1.55;color:var(--gris2);max-width:56ch}
.sub--claro{color:rgba(255,255,255,.72)}
.epi{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--tinta)}
.epi b{width:6px;height:6px;background:currentColor;display:block;flex:0 0 auto}
.epi--c{justify-content:center}
.epi--claro{color:rgba(255,255,255,.86)}
.enlace{display:inline-flex;align-items:center;gap:8px;font-size:17px;padding-bottom:3px;
  border-bottom:1px solid currentColor;transition:opacity .25s}
.enlace svg{width:15px;height:15px;transition:transform .3s}
.enlace:hover svg{transform:translate(2px,-2px)}

/* ── botones · el rótulo va DUPLICADO y rueda al hover ───────────────────────────────────────
   El DOM del original trae el texto de cada botón dos veces ("Book appointmentBook appointment"):
   es la firma del roll de Webflow, dos copias apiladas y una que sube. Ver la nota de autor. */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:50px;font-size:16px;font-weight:500;
  border:1px solid transparent;transition:background .3s,color .3s,border-color .3s;
  white-space:nowrap;
}
.btn__f{width:15px;height:15px;flex:0 0 auto;transition:transform .3s}
.btn:hover .btn__f{transform:translate(2px,-2px)}
.btn--linea{border-color:rgba(255,255,255,.55);color:#fff}
.btn--linea:hover{background:#fff;color:var(--bosque);border-color:#fff}
.btn--claro{background:rgba(255,255,255,.92);color:var(--bosque)}
.btn--claro:hover{background:#fff}
.btn--oscuro{background:var(--oliva);color:#fff}
.btn--oscuro:hover{background:var(--bosque)}
.btn--ancho{width:100%;justify-content:space-between}
.rueda__pista{position:relative;display:block;overflow:hidden;height:1.5em}
.rueda__a,.rueda__b{display:block;transition:transform .32s cubic-bezier(.6,0,.2,1)}
.rueda__b{position:absolute;inset:0;transform:translateY(100%)}
.rueda:hover .rueda__a{transform:translateY(-100%)}
.rueda:hover .rueda__b{transform:translateY(0)}

/* ── revelado · fade + subida, DISPARA UNA VEZ ───────────────────────────────────────────────
   Lo dice la pasada de vuelta: bajando, las tarjetas de cifra ponen 00 a media opacidad
   (frame 07); subiendo, en la MISMA fracción, ponen 53k a opacidad plena (frame 39). Lo que
   entró se queda puesto. */
.reveal{opacity:0;transform:translateY(46px);transition:opacity .26s ease-out,transform .26s cubic-bezier(.22,.7,.28,1)}
.reveal.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
}

/* ══ BARRA ══════════════════════════════════════════════════════════════════════════════════ */
.barra{position:fixed;inset:0 0 auto;z-index:60;height:var(--barra);background:transparent;transition:background .18s}
.barra.solida{background:var(--bosque)}
.barra__caja{max-width:1280px;margin-inline:auto;padding:0 16px;height:var(--barra);display:flex;align-items:center;gap:var(--e3)}
.marca{display:flex;align-items:center;gap:8px;color:#fff}
.marca__llama{width:22px;height:22px;color:var(--cobre);flex:0 0 auto}
.marca__nombre{font-size:28px;font-weight:500;letter-spacing:.01em;line-height:1}
.menu{flex:1;display:flex;align-items:center;justify-content:center;gap:4px}
.menu__it{padding:11px 26px;border-radius:50px;color:#fff;font-size:16px;transition:background .28s,color .28s}
.menu__it:hover{background:rgba(255,255,255,.12)}
.menu__it--on{background:#8f947f;color:#1d2419}
.menu__it--on:hover{background:#8f947f}
.hamb{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:5px}
.hamb span{display:block;height:1.5px;background:#fff;border-radius:2px}

/* ══ 0 · HERO ══════════════════════════════════════════════════════════════════════════════ */
.s0{position:relative;background:var(--arena)}
.s0__foto{position:relative;height:800px;background:#050b09}
.s0__foto>img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.s0__vela{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,12,9,.86) 0%,rgba(4,12,9,.34) 42%,rgba(4,12,9,.1) 70%,rgba(4,12,9,.5) 100%)}
.s0__sobre{position:absolute;inset:auto 0 0;padding-bottom:150px;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e6)}
.s0__t{font-size:76px;line-height:1.02;color:#fff;letter-spacing:-.03em;font-weight:600}
.s0__b{margin:var(--e2) 0 var(--e4);color:rgba(255,255,255,.88);font-size:18px}
.s0__lista{display:flex;flex-direction:column;gap:var(--e2);padding-bottom:var(--e2)}
.s0__lista li{display:flex;align-items:center;gap:14px;color:#fff;font-size:20px}
.s0__lista i{width:22px;height:1.5px;background:#fff;display:block;flex:0 0 auto}

.s0__panel{position:relative;display:flow-root;margin-top:-85px;background:var(--arena)}
.s0__cab{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--e1);width:100%}
.s0__cab .t-42{max-width:38ch}
.s0__pista{height:1690px}
.s0__peg{position:sticky;top:var(--barra);min-height:calc(100vh - var(--barra))}
.s0__video{position:relative;z-index:2;margin:30px 0 0;width:100%;border-radius:var(--r);
  overflow:hidden;box-shadow:0 0 0 20px var(--arena);
  /* El descenso va en transform y NO en margin-top. Con margin cada evento de scroll obligaba a
     recalcular la maquetacion del bloque pegajoso entero; en transform lo mueve el compositor y
     el radio de esquina sigue sin escalarse, que era la razon de no usar scale. El reposo (30px)
     es exactamente el que daba el margen al final del recorrido, asi que no se mueve nada. */
  transform:translate3d(0,var(--dy,-350px),0);will-change:transform}
.s0__video::after{content:"";display:block;padding-top:43%}
.s0__video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s0__pausa{position:absolute;left:26px;bottom:26px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);color:#fff;display:grid;place-items:center;backdrop-filter:blur(2px)}
.s0__pausa svg{width:20px;height:20px}
#pistaVideo .s0__peg{position:sticky;padding-inline:var(--ins,17.6%)}
.s0__cab--peg{padding-top:59px}

/* ══ 1 · TITULAR + MARQUESINA ══════════════════════════════════════════════════════════════ */
.s1{background:var(--arena);padding-top:132px}
.s1__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e6);padding-bottom:104px}
.s1__t{max-width:58ch;font-size:42px}
.s1 .btn{flex:0 0 auto}

/* las tres marquesinas van por TIEMPO, en bucle, no atadas al scroll: comparar 04-baja-f0.174
   con 42-sube-f0.174 y 10-baja-f0.435 con 36-sube-f0.435, misma fracción y posición distinta. */
.cinta{overflow:hidden;width:100%}
.cinta__tren{display:flex;gap:var(--e3);width:max-content;will-change:transform;
  animation:rodar var(--dur,60s) linear infinite}
.cinta:hover .cinta__tren{animation-play-state:paused}
@keyframes rodar{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--e3,24px)/2))}}
@media (prefers-reduced-motion:reduce){.cinta__tren{animation:none}}

.ficha{width:349px;flex:0 0 auto;text-align:center}
.ficha__caja{background:#f7f6f2;border-radius:var(--r);padding:var(--e2);
  transition:background .45s,box-shadow .45s}
.ficha{opacity:var(--vivo,.62);transition:opacity .45s}
.ficha--centro{--vivo:1}
.ficha--centro .ficha__caja{background:#fff;box-shadow:0 10px 30px rgba(20,26,18,.07)}
.ficha figure{margin:0 0 var(--e2);border-radius:4px;overflow:hidden;aspect-ratio:309/375}
.ficha img{width:100%;height:100%;object-fit:cover}
.ficha h3{font-size:24px;line-height:1.15;min-height:2.5em;display:flex;align-items:center;justify-content:center;padding:0 6px}
.ficha p{font-size:17px;color:var(--gris2);line-height:1.5;padding:var(--e2) 22px 0;min-height:5.4em}

.s1__banda{position:relative;margin-top:128px;height:800px;overflow:hidden}
.s1__banda>img{width:100%;height:100%;object-fit:cover}
.s1__banda-vela{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,14,10,.82) 0%,rgba(6,14,10,.62) 34%,rgba(6,14,10,.18) 56%,rgba(6,14,10,0) 74%)}
.s1__banda-txt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:var(--e2);color:#fff}
.s1__banda-txt .t-42{max-width:16ch;color:#fff}
.s1__banda-txt .sub{max-width:40ch}
.s1__banda-txt .btn{margin-top:var(--e2)}

.s1__cierre{background:var(--arena);padding:290px 0 310px}
.s1__cierre-caja{display:flex;flex-direction:column;align-items:center;gap:var(--e3);text-align:center}
.s1__cierre-caja .t-42{max-width:30ch}
.sub--c{text-align:center;max-width:52ch}
.s1__cierre-caja .btn{margin-top:var(--e1)}

/* ══ 2 · CIFRAS + ACORDEÓN ═════════════════════════════════════════════════════════════════ */
.s2{background:#fff;padding:200px 0 150px}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5)}
.cifra{border-radius:var(--r);padding:var(--e5);min-height:268px;display:flex;flex-direction:column}
.cifra--foto{position:relative;overflow:hidden;padding:0;justify-content:flex-end;background:#0d1410}
.cifra--foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}
.cifra__pie{position:relative;display:flex;align-items:center;gap:var(--e2);padding:var(--e5);color:#fff;
  background:linear-gradient(0deg,rgba(5,12,9,.82) 0%,rgba(5,12,9,.45) 55%,rgba(5,12,9,0) 100%)}
.cifra__pie p{font-size:16px;font-weight:500;line-height:1.35}
.cifra--verde{background:#dfe5d8}
.cifra--arena{background:var(--arena)}
.cifra__ico{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-bottom:var(--e5)}
.cifra__ico svg{width:22px;height:22px}
.cont{font-size:50px;font-weight:600;letter-spacing:-.03em;line-height:1;display:block}
.cifra--verde .cont,.cifra--arena .cont{margin-bottom:var(--e2)}
.cifra p{font-size:17px;color:var(--gris2);max-width:30ch;line-height:1.5}
.cifra--foto .cifra__pie p{color:rgba(255,255,255,.88)}
.cifra--foto .cifra__pie .cont{font-size:44px;margin:0}

.mision{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5);margin-top:120px;align-items:start}
.mision__izq{padding-top:6px}
.acord{margin-top:104px;border-top:1px solid var(--filete)}
.acord__it{border-bottom:1px solid var(--filete);padding:var(--e3) 0;cursor:pointer}
.acord__t{font-size:24px;font-weight:600;transition:color .3s}
.acord__c{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .42s cubic-bezier(.5,0,.2,1),opacity .3s;opacity:0}
.acord__c>*{min-height:0}
.acord__c>p{overflow:hidden;font-size:17px;line-height:1.55;color:var(--gris2);padding-top:0}
.acord__img{display:none}
.acord__it--on .acord__c{grid-template-rows:1fr;opacity:1}
.acord__it--on .acord__c>p{padding-top:14px}
.mision__der .t-42{max-width:15ch}
/* el acordeón CAMBIA la foto: comparar el frame 38 (suero en el cuero cabelludo) con el 48
   (rostro entre hojas), misma sección y misma fracción, distinto ítem abierto. */
.mision__foto{position:relative;margin-top:var(--e6);aspect-ratio:610/474;border-radius:var(--r);overflow:hidden}
.mision__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .55s,transform .8s}
.mision__foto img.on{opacity:1;transform:none}

/* ══ 3 · MÁS SOLICITADOS ═══════════════════════════════════════════════════════════════════ */
.s3{background:var(--salvia);padding:110px 0 115px}
.s3__cab{margin-bottom:var(--e6);display:flex;flex-direction:column;align-items:center;gap:var(--e2)}
.s3__cab .t-42{max-width:30ch}
.pop{position:relative;width:567px;flex:0 0 auto;border-radius:var(--r);overflow:hidden;aspect-ratio:567/440}
.pop img{width:100%;height:100%;object-fit:cover}
.pop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,14,10,.86) 0%,rgba(6,14,10,.62) 22%,rgba(6,14,10,.12) 46%,rgba(6,14,10,0) 62%)}
.pop__txt{position:absolute;inset:auto 0 0;padding:var(--e5);color:#fff;z-index:2}
.pop__txt h3{font-size:30px;margin-bottom:8px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.pop__txt p{font-size:17px;font-weight:400;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.45)}
.pastilla{display:flex;align-items:center;gap:16px;margin:var(--e6) auto 0;max-width:770px;
  background:#fff;border-radius:50px;padding:12px 30px 12px 12px;font-size:16px}
.pastilla__ico{width:52px;height:52px;border-radius:50%;background:var(--salvia);display:grid;place-items:center;flex:0 0 auto}
.pastilla__ico svg{width:22px;height:22px}

/* ══ 4 · BENTO ═════════════════════════════════════════════════════════════════════════════ */
.s4{background:#fff;padding:96px 0 0}
.s4 .epi{margin-bottom:var(--e2)}
.s4 .t-42{max-width:28ch;margin:0 auto var(--e6)}
.bento{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--e4);align-items:start}
.bento__col{display:flex;flex-direction:column;gap:var(--e4)}
.caja{border-radius:var(--r);padding:var(--e6)}
.caja--arena{background:var(--arena)}
.caja--hueso{background:var(--hueso)}
.caja__cifra{display:flex;align-items:baseline;gap:10px}
.caja__cifra .cont{font-size:50px}
.caja__cifra em{font-style:normal;font-size:18px;color:var(--gris)}
.caja__d{margin:var(--e2) 0 var(--e4);font-size:18px;max-width:26ch}
.caja__l li{padding:12px 0;border-top:1px solid rgba(0,0,0,.1);font-size:17px;color:var(--gris2)}
.caja__epi{font-size:16px;color:var(--gris);text-align:center}
.caja__t{font-size:24px;text-align:center;margin-top:4px}
.caja__epi--c,.caja__t--c{text-align:center}
.collage{position:relative;height:150px;margin-top:var(--e3)}
.cel{position:absolute;width:74px;height:74px;object-fit:cover;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.1)}
.cel:nth-child(1){left:8%;top:26%;transform:rotate(-6deg)}
.cel:nth-child(2){left:30%;top:16%;transform:rotate(-2deg)}
.cel:nth-child(3){left:52%;top:16%;transform:rotate(2deg)}
.cel:nth-child(4){left:74%;top:26%;transform:rotate(6deg)}
.cel:nth-child(5){display:none}

/* comparador arrastrable (frame 34: divisor vertical con manecilla circular) */
.comp{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:397/615;user-select:none;touch-action:none}
.comp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Las dos tomas salieron del mismo prompt y la misma persona, pero el generador dejó la mitad
   de la derecha un punto más fría. Aquí se igualan a ojo para que la costura no se lea. */
.comp__b{filter:saturate(1.06) sepia(.05)}
.comp__a{position:absolute;inset:0;width:50%;overflow:hidden}
.comp__a img{position:absolute;left:0;top:0;height:100%;max-width:none;width:var(--anchoTotal,397px)}
.comp__div{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.85);cursor:ew-resize}
.comp__tira{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;
  border-radius:50%;background:rgba(255,255,255,.92);color:#1d2419;display:grid;place-items:center;cursor:ew-resize}
.comp__tira svg{width:20px;height:20px}
.bento__col--centro{gap:var(--e4)}
.comp{flex:0 0 auto}
.comp__pie{background:#c9b7a4;border-radius:var(--r);padding:var(--e4) var(--e3);text-align:center;color:#1d2419}
.comp__pie h3{font-size:24px;line-height:1.2;text-wrap:balance}
.comp__pie p{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:16px;color:#3a3226}
.comp__pie svg{width:17px;height:17px}

.caja--oferta{background:var(--hueso);text-align:center;display:flex;flex-direction:column;align-items:center}
.oferta__fila{display:flex;align-items:center;justify-content:center;gap:14px;font-size:16px;color:var(--gris);margin-bottom:var(--e2)}
.oferta__sello{width:66px;height:66px;flex:0 0 auto;display:grid;place-items:center;font-size:20px;font-weight:600;color:var(--tinta);background:#fff;
  clip-path:polygon(50% 0,61% 9%,75% 5%,81% 18%,95% 20%,95% 34%,100% 50%,95% 66%,95% 80%,81% 82%,75% 95%,61% 91%,50% 100%,39% 91%,25% 95%,19% 82%,5% 80%,5% 66%,0 50%,5% 34%,5% 20%,19% 18%,25% 5%,39% 9%)}
.caja--oferta .btn{margin-top:var(--e3)}
.pila{display:flex;margin-top:var(--e3)}
.pila .cara{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-11px;object-fit:cover}
.pila .cara:first-child{margin-left:0}
.oferta__pie{margin-top:12px;font-size:16px;color:var(--gris2)}
.caja--suma{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.suma__ico{width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 auto}
.suma__ico svg{width:26px;height:26px}
.caja--suma b{font-size:20px;font-weight:500;color:var(--gris)}
.caja--suma p{flex:1;min-width:150px;font-size:18px;font-weight:500;line-height:1.3}

.cinta--marcas{margin-top:96px;padding-bottom:96px}
.cinta--marcas .cinta__tren{gap:var(--e6)}
.marca-t{flex:0 0 auto;display:flex;align-items:center;gap:12px;width:217px;height:112px;justify-content:center;
  border:1px solid var(--filete);border-radius:var(--r);font-size:20px;color:var(--tinta)}
.marca-t svg{width:22px;height:22px;color:var(--gris)}
.marca-t--vers{font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.marca-t--fino{font-size:24px;font-weight:300;letter-spacing:-.02em}
.marca-t--cursiva{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:25px}
.marca-t--cursiva sup{font-size:.42em;vertical-align:super;font-style:normal}
.marca-t--dos{font-size:19px;font-weight:300}
.marca-t--dos b{font-weight:700}
.marca-t--gordo{font-size:21px;font-weight:700;letter-spacing:-.03em}
.marca-t--espaciada{font-size:15px;font-weight:500;letter-spacing:.2em}

/* ══ 5 · PANEL OLIVA ═══════════════════════════════════════════════════════════════════════ */
.s5{background:var(--oliva);color:#fff;padding:100px 0}
.s5__rej{display:grid;grid-template-columns:610px 1fr;gap:var(--e5);align-items:stretch}
.s5__foto{margin:0;border-radius:var(--r);overflow:hidden;height:100%;min-height:640px}
.s5__foto img{width:100%;height:100%;object-fit:cover}
.s5__txt .t-42{margin:var(--e2) 0 var(--e3);max-width:16ch}
.s5__txt .btn{margin-top:var(--e4)}
.s5__l{margin-top:76px}
.s5__l li{display:flex;align-items:center;gap:16px;padding:var(--e4) 0;border-bottom:1px solid rgba(255,255,255,.22);font-size:24px;font-weight:600}
.s5__l li:first-child{border-top:1px solid rgba(255,255,255,.22)}
.s5__l svg{width:22px;height:22px;flex:0 0 auto;opacity:.85}

/* ══ 6 · EQUIPO ════════════════════════════════════════════════════════════════════════════ */
.s6{background:var(--arena);padding:138px 0}
.s6__rej{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e6)}
.s6__izq{position:sticky;top:120px;align-self:start}
.s6__izq .t-42{margin:var(--e2) 0 var(--e4);max-width:22ch}
.s6__dato{display:flex;align-items:center;gap:var(--e2);margin-top:96px;padding-top:var(--e4);border-top:1px solid rgba(0,0,0,.14)}
.s6__dato .pila{margin:0}
.s6__dato .pila .cara{width:52px;height:52px;margin-left:-18px}
.cont--g{font-size:42px}
.s6__dato em{font-style:normal;font-size:16px;color:var(--gris)}
.s6__rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2)}
.cara-g{width:100%;aspect-ratio:1;border-radius:4px;object-fit:cover;object-position:50% 30%}

/* ══ 7 · CASOS ═════════════════════════════════════════════════════════════════════════════ */
.s7{background:#fff;padding:110px 0 40px}
.s7__cab{position:sticky;top:var(--barra);z-index:4;background:#fff;padding:var(--e6) 0 44px;
  display:flex;flex-direction:column;align-items:center}
.s7__cab .marco{display:flex;flex-direction:column;align-items:center;gap:var(--e2);width:100%}
.s7__cab .t-42{max-width:26ch}
.caso{position:relative;z-index:1;padding-bottom:52px}
.caso figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:1248/470}
.caso:nth-child(3) figure{aspect-ratio:1248/560}
.caso:nth-child(4) figure{aspect-ratio:1248/400}
.caso img{width:100%;height:100%;object-fit:cover}
.caso h3{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  padding:var(--e4) 0;border-bottom:1px solid var(--filete);font-size:30px}
.caso h3 span{width:38px;height:38px;border-radius:50%;border:1px solid var(--filete);display:grid;place-items:center;flex:0 0 auto;transition:background .3s,color .3s}
.caso h3 span svg{width:16px;height:16px}
.caso:hover h3 span{background:var(--oliva);color:#fff;border-color:var(--oliva)}

/* ══ 8 · PRECIOS ═══════════════════════════════════════════════════════════════════════════ */
.s8{background:var(--hueso);padding:158px 0}
.s8 .t-42{max-width:27ch;margin:var(--e2) auto var(--e6)}
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5);align-items:stretch}
.plan{position:relative;overflow:hidden;background:#fff;border-radius:var(--r);padding:var(--e6)}
.plan h3{font-size:24px}
.plan__d{margin:10px 0 var(--e3);font-size:16px;color:var(--gris2)}
.plan__p{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--e4)}
.plan__p b{font-size:42px;font-weight:600;letter-spacing:-.03em}
.plan__p em{font-style:normal;font-size:16px;color:var(--gris)}
.plan__i{margin:var(--e4) 0 var(--e2);font-size:18px;font-weight:600}
.plan ul li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:17px;color:var(--gris2)}
.plan ul svg{width:18px;height:18px;flex:0 0 auto}
.plan--on{background:var(--oliva);color:#fff}
.plan--on .plan__d,.plan--on .plan__p em,.plan--on ul li{color:rgba(255,255,255,.82)}
.plan--on .plan__destello{position:absolute;right:-70px;bottom:-70px;width:300px;height:300px;
  background:conic-gradient(from 20deg,rgba(255,255,255,.09) 0 12deg,transparent 12deg 30deg,rgba(255,255,255,.09) 30deg 42deg,transparent 42deg 60deg,rgba(255,255,255,.09) 60deg 72deg,transparent 72deg 90deg,rgba(255,255,255,.09) 90deg 102deg,transparent 102deg 360deg);
  border-radius:50%;pointer-events:none}

/* ══ 9 · PANEL VERDE ═══════════════════════════════════════════════════════════════════════ */
.s9{background:var(--hueso);padding:0 0 190px}
.s9__caja{position:relative;overflow:hidden;background:var(--oliva);color:#fff;border-radius:20px;
  padding:80px var(--e6) 84px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--e5)}
.s9__rayos{position:absolute;left:50%;top:-140px;width:900px;height:900px;transform:translateX(-50%);
  background:conic-gradient(from 0deg,rgba(255,255,255,.05) 0 10deg,transparent 10deg 28deg,rgba(255,255,255,.05) 28deg 38deg,transparent 38deg 56deg,rgba(255,255,255,.05) 56deg 66deg,transparent 66deg 84deg,rgba(255,255,255,.05) 84deg 94deg,transparent 94deg 360deg);
  border-radius:50%;pointer-events:none}
.s9__caja>:not(.s9__rayos){position:relative}
.s9__caja .t-42{max-width:26ch}
.s9__fila{display:flex;gap:var(--e5)}
.cara-m{width:118px;height:162px;border-radius:6px;object-fit:cover;object-position:50% 28%}
.s9__b{max-width:52ch;color:rgba(255,255,255,.82);font-size:16px}

/* ══ 10 · FAQ ══════════════════════════════════════════════════════════════════════════════ */
.s10{background:#fff;padding:100px 0}
.s10__rej{display:grid;grid-template-columns:610px 1fr;gap:var(--e6)}
.s10__foto{margin:var(--e3) 0 0;border-radius:var(--r);overflow:hidden;aspect-ratio:610/620}
.s10__foto img{width:100%;height:100%;object-fit:cover}
.faq .t-42{margin-bottom:var(--e5)}
.faq__it{border-bottom:1px solid var(--filete);padding:var(--e4) 0;cursor:pointer}
.faq__t{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);font-size:19px;font-weight:600;line-height:1.35}
.faq__t svg{width:20px;height:20px;flex:0 0 auto;transition:transform .35s}
.faq__it--on .faq__t svg{transform:rotate(180deg)}
.faq__c{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.5,0,.2,1),opacity .3s;opacity:0}
.faq__c>p{overflow:hidden;font-size:17px;line-height:1.55;color:var(--gris2);max-width:56ch}
.faq__it--on .faq__c{grid-template-rows:1fr;opacity:1}
.faq__it--on .faq__c>p{padding-top:12px}

/* ══ 11 · TIRA ═════════════════════════════════════════════════════════════════════════════ */
.s11{background:#fff;padding:0 0 190px}
.s11__cab{display:flex;flex-direction:column;align-items:center;gap:var(--e3);margin-bottom:var(--e6)}
.s11__ig{width:52px;height:52px;border-radius:50%;border:1px solid var(--filete);display:grid;place-items:center;color:var(--gris)}
.s11__ig svg{width:24px;height:24px}
.s11__cab .t-42{max-width:24ch}
.cinta--tira .cinta__tren{gap:var(--e2);align-items:flex-start}
.cinta--tira .tira{margin-top:0}
.tira{flex:0 0 auto;width:300px;height:340px;border-radius:var(--r);display:block;overflow:hidden}
.cinta--tira .cinta__tren{gap:24px;padding-bottom:56px}
.tira img{width:100%;height:100%;object-fit:cover}
.cinta--tira .tira--baja{margin-top:56px}

/* ══ 12 · PIE ══════════════════════════════════════════════════════════════════════════════ */
.pie{background:var(--bosque);color:#fff;padding:118px 0 var(--e5)}
.pie__rej{display:grid;grid-template-columns:1.1fr .85fr 1fr;gap:var(--e6)}
.pie__t{font-size:30px;line-height:1.2;max-width:16ch}
.pie__f{display:flex;align-items:center;gap:10px;margin-top:var(--e5);border:1px solid rgba(255,255,255,.35);border-radius:var(--r);padding:6px 6px 6px 18px;max-width:282px}
.pie__f input{flex:1;min-width:0;background:none;border:0;color:#fff;font:inherit;padding:10px 0}
.pie__f input::placeholder{color:rgba(255,255,255,.6)}
.pie__f button{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:0 0 auto}
.pie__f svg{width:15px;height:15px}
.pie__r{font-size:20px;font-weight:600;margin-bottom:var(--e4)}
.pie__tel{display:block;font-size:42px;font-weight:600;letter-spacing:-.03em}
.pie__mail{display:block;margin-top:var(--e2);font-size:20px;color:rgba(255,255,255,.78)}
.pie__c{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3);align-content:start}
.pie__c .pie__r{grid-column:1/-1}
.pie__c li a{display:block;padding:7px 0;color:rgba(255,255,255,.78);font-size:16px;transition:color .25s}
.pie__c li a:hover{color:#fff}
.pie__fin{display:flex;justify-content:space-between;gap:var(--e3);margin-top:80px;padding-top:var(--e3);
  border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6);font-size:15px}

/* ══ MÓVIL ═════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .s5__rej,.s10__rej{grid-template-columns:1fr}
}
@media (max-width:860px){
  body{font-size:16px}
  /* El inventario a 390x844 mide la escala del original en 50/25/22/20/18/16: el titular de
     seccion NO baja a 30 px, baja a 25. Copiarlo apreta la pagina casi 300 px y es lo que hace
     que el ritmo vertical case. */
  .t-42{font-size:25px}
  .s0__t{font-size:40px}
  .sub{font-size:17px}
  .s5__l li{font-size:18px}
  .caso h3{font-size:20px}
  .pop__txt h3{font-size:20px}
  .ficha h3{font-size:20px;min-height:2.4em}
  .ficha p{font-size:16px;min-height:0}
  .cont{font-size:34px}
  .caja__cifra .cont{font-size:38px}
  .pie__tel{font-size:28px}
  .marco{padding-inline:16px}
  /* LA BARRA DE MOVIL DEL ORIGINAL ES CLARA, NO VERDE. A 1280 la barra se vuelve verde muy
     oscuro en cuanto se pasa el héroe; a 390 se vuelve CREMA, con el logotipo y la hamburguesa
     en tinta oscura. Se ve en los 43 pares: el original lleva «Ixolyn» negro sobre crema en
     todas las posiciones menos la primera. Es la diferencia más visible entre los dos anchos y
     no se deduce del escritorio: hay que capturar a 390 para verla. */
  /* En movil el original abre ya con la banda crema de cabecera y la foto empieza DEBAJO; no
     hay foto a sangre bajo una barra transparente como en escritorio. */
  .barra,.barra.solida{background:#f2f1ec}
  .marca__nombre,.menu__it{color:var(--tinta)}
  .hamb span{background:var(--tinta)}
  .s0{padding-top:var(--barra)}
  .barra.solida .marca__nombre,
  .barra.solida .menu__it{color:var(--tinta)}
  .barra.solida .hamb span{background:var(--tinta)}
  .menu{display:none;position:fixed;inset:var(--barra) 0 auto;background:#f2f1ec;flex-direction:column;padding:var(--e3) 16px var(--e5);gap:2px;
    border-top:1px solid var(--filete)}
  .barra.abierta .menu{display:flex;align-items:stretch}
  .barra.abierta{background:#f2f1ec}
  .barra.abierta .marca__nombre{color:var(--tinta)}
  .barra.abierta .hamb span{background:var(--tinta)}
  .menu__it{text-align:center;color:var(--tinta)}
  .menu__it:hover{background:rgba(0,0,0,.06)}
  .barra .btn--linea{display:none}
  .hamb{display:flex}
  .barra__caja{justify-content:space-between}

  /* 100svh y no 100vh: en movil la barra del navegador se recoge al bajar, y con vh el pliegue
     caia dentro de la seccion siguiente. Con svh el corte queda SIEMPRE dentro de la foto. */
  .s0__foto{height:100svh;min-height:700px}
  .s0__sobre{flex-direction:column;align-items:flex-start;gap:var(--e3);padding-bottom:120px}
  /* El titular caia sobre el antebrazo claro de la modelo y perdia contorno en la segunda linea:
     el velo del hero pasa a vertical para dar una base oscura homogenea bajo las dos lineas. */
  .s0__vela{background:linear-gradient(0deg,rgba(4,12,9,.9) 0%,rgba(4,12,9,.6) 42%,rgba(4,12,9,.12) 72%,rgba(4,12,9,.45) 100%)}
  .s0__t{font-size:44px}
  .s0__lista{display:none}
  .s0__panel{padding-top:0}
  .s0__pista{height:auto}
  /* En móvil no hay anclaje ni scrub: el bloque se lee de arriba abajo. La cabecera vuelve a
     ser estática porque en escritorio va absoluta y con opacidad 0 hasta que el scrub la
     coloca, y ese scrub no corre aquí: sin esto, en el móvil no aparecía. */
  .s0__peg{position:static;height:auto;min-height:0;padding-inline:16px!important}
  .s0__cab--peg{position:static;transform:none;opacity:1;padding-bottom:var(--e4)}
  .s0__video{margin-top:0!important}
  .s0__video::after{padding-top:62%}

  .s1{padding-top:96px}
  .s1__cab{flex-direction:column;align-items:flex-start;gap:var(--e3);padding-bottom:76px}
  .s1__t{font-size:30px}
  /* Ancho de calzada. Con 250 px caben una y media, y las dos de los extremos entran cortadas
     por la mitad del parrafo: el critico de belleza leyo texto mutilado en reposo. Con el ancho
     de la ventana menos el margen, en reposo hay UNA ficha entera y un asomo de la siguiente. */
  .ficha{width:92vw;max-width:none}
  .cinta__tren{gap:16px}
  /* En vertical el velo no puede ir de izquierda a derecha: la columna es tan estrecha que el
     texto cruza entero la zona iluminada. Aquí va de abajo arriba, como en las tarjetas. */
  .s1__banda{height:auto;min-height:600px;margin-top:80px}
  .s1__banda>img{position:absolute;inset:0}
  .s1__banda-vela{background:linear-gradient(0deg,rgba(6,14,10,.88) 0%,rgba(6,14,10,.68) 55%,rgba(6,14,10,.3) 100%)}
  /* El bloque entra como UNA pieza. Escalonado, el parrafo y el boton caian por debajo del
     borde de la ventana cuando la seccion entraba, no llegaban a disparar y se quedaban a
     media opacidad para siempre: el critico los leyo como gris translucido sobre el helecho. */
  .s1__banda-txt .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .s1__banda-txt .sub{color:#fff}
  .s1__banda-txt .btn--oscuro{background:#fff;color:var(--bosque)}
  .s1__banda-txt{position:relative;padding-block:48px;gap:var(--e2)}
  .s1__banda-txt .t-42{font-size:28px;max-width:none}
  .s1__banda-txt .sub{font-size:16px;color:rgba(255,255,255,.92)}

  .s2{padding:60px 0 68px}
  .cifras{grid-template-columns:1fr;gap:var(--e2)}
  .cifra{min-height:0;padding:18px}
  .cifra--foto{min-height:320px}
  .cifra--foto>img{object-position:62% 46%}
  .cifra--foto .cifra__pie{padding:20px}
  .cont{font-size:40px}
  /* En movil la seccion se lee como UNA columna y el orden tiene que ser el mismo que en el
     resto de la pagina: rotulo, titular, lista. Con las dos columnas intactas y un `order` sobre
     ellas el titular acababa POR ENCIMA de su propio antetitulo, al reves que en todas las demas
     secciones. `display:contents` disuelve las columnas para que sus hijos se ordenen sueltos.
     (Este arreglo se escribio una vez y no llego a aplicarse: la sustitucion de texto no caso
     porque entre las dos reglas se habia colado un comentario. Se ve en el par 06.)

     Y a 390 el original NO pone la foto de la seccion entre el titular y la lista: la mete DENTRO
     del panel desplegable del acordeon, y es la foto la que marca el alto del panel. */
  .mision{display:flex;flex-direction:column;margin-top:36px;gap:var(--e2)}
  .mision__izq,.mision__der{display:contents}
  .mision__izq>.epi{order:1}
  .mision__der>.t-42{order:2;margin-bottom:var(--e2)}
  .acord{order:3}
  .mision__foto{display:none}
  .acord__img{display:block;margin:12px 0 0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10}
  .acord__img img{width:100%;height:100%;object-fit:cover}
  .acord__it--on .acord__c>p{padding-top:12px}
  .acord{margin-top:var(--e2)}
  .acord__t{font-size:19px}

  .s1__cierre{padding:76px 0 84px}
  .s3{padding:136px 0 146px}
  .pop{width:300px}
  .pop__txt{padding:var(--e3)}
  .pop__txt h3{font-size:22px}
  .pastilla{padding:10px 20px 10px 10px;font-size:15px;text-align:left}

  .s4{padding-top:70px}
  .bento{grid-template-columns:1fr;gap:14px}
  .bento__col{gap:14px}
  .bento__col--centro{gap:0}
  .caja{padding:20px}
  .comp__pie{padding:14px}
  .comp__pie h3{font-size:20px}
  .caja__d{margin:14px 0 18px;font-size:17px}
  .caja__l li{padding:9px 0}
  .oferta__sello{width:56px;height:56px;font-size:18px}
  .suma__ico{width:52px;height:52px}
  .caja--oferta .btn{margin-top:14px}
  .caja--oferta .pila .cara:not(:first-child){display:none}
  /* Dos tomas a 160 px en vez de cuatro a 30: a 30 px no se distingue nada y el critico lo
     leyo como relleno. Las otras dos se ocultan para no doblar el alto de la tarjeta. */
  /* Cuatro miniaturas compactas y centradas, ocupando algo menos de la mitad de la tarjeta:
     es lo que hace el original a este ancho. Ni tres a todo el ancho ni cuatro de 30 px. */
  .collage{position:static;display:flex;justify-content:center;align-items:center;gap:0;height:auto;margin-top:14px}
  .acord__it{padding:13px 0}
  .cel:nth-child(5){display:none}
  .cel{position:static;width:62px;height:62px;margin-left:-8px;border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,.12);transform:none!important}
  .cel:first-child{margin-left:0}
  .cel:nth-child(odd){margin-top:-14px}
  /* A 390 el original NO monta el comparador antes/despues: va de la tarjeta de anos a
     «Advanced features» y de ahi a la oferta, sin bloque intermedio (fotograma 09 del original,
     f0.429). Lo dijeron dos criticos de fidelidad seguidos y los dos tenian razon; yo lo habia
     descartado razonando desde el escritorio, donde el comparador SI esta. */
  .bento__col--centro{display:none}
  .cinta--marcas{margin-top:14px;padding-bottom:14px}
  .marca-t{width:142px;height:58px;font-size:15px}

  .s5{padding:36px 0}
  .s5__foto{aspect-ratio:4/3;height:auto;min-height:0}
  .s5__l{margin-top:44px}
  .s5__l li{font-size:19px;padding:var(--e2) 0}

  .s6{padding:64px 0}
  .s6__rej{grid-template-columns:1fr;gap:var(--e4)}
  .s6__izq{position:static}
  .s6__dato{margin-top:var(--e4);flex-direction:column;align-items:flex-start;gap:8px}
  .s6__dato .pila{display:none}
  .s6__rejilla>:nth-child(9){display:none}
  .s6__rejilla{gap:10px}

  .s7{padding:26px 0 4px}
  /* A 390 el original no ancla NI UN bloque (pin_spacers 0). El rotulo de casos se quedaba
     clavado porque heredaba el sticky del escritorio. */
  .s7__cab{position:static;padding:0 0 24px}
  .caso{position:static;padding-bottom:34px}
  .caso figure{aspect-ratio:16/9}
  .caso h3{font-size:22px;padding:var(--e2) 0}

  .s8{padding:56px 0}
  .planes{grid-template-columns:1fr;gap:34px}
  .plan{padding:18px}
  .plan--on{padding-block:20px}
  .plan ul li{padding:6px 0}
  .plan__i{margin:18px 0 12px}

  .s9{padding-bottom:64px}
  .s9__caja{padding:110px var(--e3);gap:var(--e4)}
  .s9__fila{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:280px}
  .cara-m{width:100%;height:150px}

  .s10{padding:44px 0}
  .s10__foto{aspect-ratio:4/3}
  .faq__t{font-size:17px}

  .s11{padding-bottom:60px}
  .tira{width:200px;height:250px}
  .cinta--tira .tira--baja{margin-top:40px}
  .cinta--tira .cinta__tren{padding-bottom:40px}
  .tira--baja{margin-top:32px}

  .pie{padding:20px 0 var(--e2)}
  .pie__rej{gap:var(--e2)}
  .pie__c{gap:var(--e2)}
  .pie__c .pie__r{margin-bottom:var(--e2)}
  .pie__fin{margin-top:20px}
  .pie__rej{grid-template-columns:1fr;gap:var(--e4)}
  .pie__t{font-size:26px}
  .pie__tel{font-size:32px}
  .pie__fin{flex-direction:column;gap:8px;margin-top:44px}
}


/* ══ ENTRADA DEL HERO AL CARGAR ════════════════════════════════════════════════════════════
   Va con transiciones y una clase de precarga, no con @keyframes, y es a proposito: el estado
   final de cada pieza es la regla que ya existia mas arriba, sin tocar. Si el JS no llega a
   quitar la clase, o si alguien la borra, el hero se queda EXACTAMENTE como estaba puesto. Un
   keyframes con estado final propio se puede desincronizar del reposo; esto no puede.

   El orden es el de la lectura: primero la foto se asienta, luego caen las dos lineas del
   titular desde su mascara, despues la bajada, el boton y la lista de la derecha, y la barra
   baja la ultima. Nada dura mas de 1,2 s ni entra despues del segundo 1. */
.s0__t .ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.s0__t .ln>span{display:block;transform:translateY(0);
  transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.s0__t .ln:nth-child(2)>span{transition-delay:.1s}

.s0__foto>img{transform:scale(1);transition:transform 1.9s cubic-bezier(.22,.61,.36,1)}
.s0__vela{transition:opacity .9s ease}
.s0__b{transition:opacity .85s ease .44s,transform .85s cubic-bezier(.16,1,.3,1) .44s}
.s0__izq .btn{transition:background .3s,color .3s,border-color .3s,
  opacity .85s ease .56s,transform .85s cubic-bezier(.16,1,.3,1) .56s}
.s0__lista li{transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.s0__lista li:nth-child(1){transition-delay:.5s}
.s0__lista li:nth-child(2){transition-delay:.6s}
.s0__lista li:nth-child(3){transition-delay:.7s}
.barra{transition:background .18s,opacity .7s ease .72s,transform .7s cubic-bezier(.16,1,.3,1) .72s}

html.cargando .s0__t .ln>span{transform:translateY(105%)}
html.cargando .s0__foto>img{transform:scale(1.09)}
html.cargando .s0__vela{opacity:.55}
html.cargando .s0__b,
html.cargando .s0__izq .btn{opacity:0;transform:translateY(18px)}
html.cargando .s0__lista li{opacity:0;transform:translateX(22px)}
html.cargando .barra{opacity:0;transform:translateY(-100%)}

@media (prefers-reduced-motion:reduce){
  .s0__t .ln>span,.s0__foto>img,.s0__vela,.s0__b,.s0__izq .btn,.s0__lista li,.barra,.s0__video{
    transition:none!important}
  html.cargando .s0__t .ln>span{transform:none}
  html.cargando .s0__foto>img{transform:none}
  html.cargando .s0__vela{opacity:1}
  html.cargando .s0__b,html.cargando .s0__izq .btn,html.cargando .s0__lista li{opacity:1;transform:none}
  html.cargando .barra{opacity:1;transform:none}
}

@media (max-width:860px){
  /* a este ancho el video no se mueve: la regla de arriba ya lo dejaba en margin-top 0 */
  .s0__video{transform:none!important;margin-top:0!important}
}

/* ── Distintivo de Clínicas: el camino de vuelta al portafolio ────────────────
   Lo añade scripts/publicar-piezas.mjs al publicar. NO está en la fuente de la pieza, y no debe:
   el vídeo del portafolio se graba de la fuente y ahí este sello sobra. */
.ct-firma{position:fixed;left:14px;bottom:14px;z-index:2147483000;display:inline-flex;align-items:center;gap:.35em;
  padding:.55em .85em;border-radius:999px;background:rgba(17,17,17,.84);color:#fff;
  font:500 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  letter-spacing:.01em;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.6;transition:opacity .18s ease}
.ct-firma:hover,.ct-firma:focus-visible{opacity:1;color:#fff;text-decoration:none}
.ct-firma b{font-weight:700}
@media (max-width:520px){.ct-firma{left:10px;bottom:10px;font-size:11px;padding:.5em .75em}}
@media (prefers-reduced-motion:reduce){.ct-firma{transition:none}}
@media print{.ct-firma{display:none}}