/* =========================================================
   FOX SHINE DETAIL STUDIO — propuesta de rediseño
   Paleta tomada de su propio logo: negro + dorado.
   Titulares en Sora, texto en Manrope. Un solo acento.
   ========================================================= */

:root{
  --negro:#0a0a0b;
  --negro-2:#0f0f11;
  --carbon:#16161a;
  --carbon-2:#1d1d22;
  --hueso:#f3f1ec;
  --gris:#94949c;
  --gris-2:#6a6a72;
  --linea:rgba(255,255,255,.10);
  --linea-2:rgba(255,255,255,.18);

  --oro:#e3b24c;
  --oro-2:#b8862f;
  --oro-luz:rgba(227,178,76,.16);
  --wa:#25d366;

  --display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --texto:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --pad:clamp(1.15rem,4.5vw,4.5rem);
  --maxw:1500px;
  --r:14px;
  --r-sm:10px;
  --ease:cubic-bezier(.25,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--negro);color:var(--hueso);
  font-family:var(--texto);font-weight:400;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.06}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
dl,dt,dd{margin:0}
iframe{border:0;display:block}
::selection{background:var(--oro);color:#151208}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--oro);color:#151208;padding:.6rem 1rem;border-radius:8px}

/* ---------- tipografía común ---------- */
.eyebrow{
  font-family:var(--texto);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oro);
}
.h2{font-size:clamp(1.9rem,4.4vw,3.5rem)}
.h2 em,.close__title em{font-style:normal;color:var(--oro)}
.h3{font-size:clamp(1.2rem,2vw,1.6rem)}
.lead{font-size:clamp(.98rem,1.05vw,1.08rem);color:var(--gris);max-width:56ch;line-height:1.7}
.head{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:grid;gap:1rem;justify-items:start}
.head .h2{margin-top:.2rem}
.head--light .lead{color:rgba(243,241,236,.72)}

/* ---------- botones ---------- */
.wa{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--wa);color:#06240f;
  font-weight:700;font-size:.92rem;
  padding:.85rem 1.4rem;border-radius:999px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s;
  box-shadow:0 8px 26px -12px rgba(37,211,102,.7);
}
.wa:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 14px 34px -14px rgba(37,211,102,.85)}
.wa--big{padding:1.05rem 1.9rem;font-size:1rem}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.7rem;
  border:1px solid var(--linea-2);border-radius:999px;
  padding:.82rem 1.4rem;font-weight:600;font-size:.9rem;
  transition:border-color .3s,background .3s,color .3s;
}
.btn-ghost i{width:16px;height:1px;background:currentColor;position:relative;transition:width .35s var(--ease)}
.btn-ghost i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn-ghost:hover{border-color:var(--oro);color:var(--oro)}
.btn-ghost:hover i{width:26px}

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:.85rem var(--pad);
  background:rgba(10,10,11,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
  transition:transform .45s var(--ease);
}
.nav.is-up{transform:translateY(-105%)}
.nav__brand{display:flex;flex-direction:column;gap:.05rem;line-height:1}
.wm{font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.wm b{font-weight:700;color:var(--hueso)}
.wm i{font-style:normal;font-weight:700;background:linear-gradient(100deg,var(--oro),var(--oro-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wm__sub{font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gris-2)}
.nav__links{display:flex;gap:clamp(.9rem,1.9vw,1.9rem)}
.nav__links a{font-size:.85rem;font-weight:500;color:var(--gris);transition:color .3s}
.nav__links a:hover{color:var(--hueso)}
.nav__burger{display:none;width:30px;height:18px;position:relative}
.nav__burger i{position:absolute;left:0;right:0;height:1.6px;background:var(--hueso);border-radius:2px;transition:transform .35s var(--ease)}
.nav__burger i:first-child{top:3px}
.nav__burger i:last-child{bottom:3px}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(4.7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-4.7px) rotate(-45deg)}
@media (max-width:1000px){
  .nav__links{display:none}
  .nav__burger{display:block}
}

.menu{
  position:fixed;top:var(--barH,58px);left:0;right:0;z-index:55;
  max-height:calc(100dvh - var(--barH,58px));overflow-y:auto;background:var(--negro-2);
  border-bottom:1px solid var(--linea);padding:1.6rem var(--pad) 2rem;
  display:grid;gap:1.4rem;
}
.menu[hidden]{display:none}
.menu nav{display:grid;gap:.15rem}
.menu nav a{font-family:var(--display);font-weight:600;font-size:1.35rem;padding:.5rem 0;border-bottom:1px solid var(--linea)}
.menu .wa{justify-self:start}

/* =========================================================
   PORTADA
   ========================================================= */
.hero{position:relative;height:118vh;min-height:640px}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.hero__media{position:absolute;inset:0;margin:0}
.hero__media img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* Sin filtros de CSS encima: el blanco y negro y el contraste ya vienen
   quemados en el archivo. Un filtro acá obliga al navegador a reprocesar el
   video entero en cada cuadro, y en el celular se nota. */
.hero__video{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  display:none;
}
.hero__media.con-video .hero__video{display:block}
.hero__media img{transition:opacity .45s var(--ease)}
.hero__media.con-video img{opacity:0}
/* El clip es vertical. En pantalla ancha se muestra entero y el hueco lo
   rellena el mismo fotograma, ampliado y desenfocado. */
.hero__relleno,.treat__relleno{
  position:absolute;inset:-8%;z-index:-1;display:none;
  background-size:cover;background-position:center;
  filter:blur(46px) saturate(0) brightness(.5);transform:scale(1.08);
}
@media (min-width:901px){
  .hero__media.con-video .hero__video,
  .treat__bg.con-video .treat__video{object-fit:contain}
  .hero__media.con-video .hero__relleno,
  .treat__bg.con-video .treat__relleno{display:block;z-index:0}
}
/* con video detrás, el velo se carga para que el título se lea sobre cualquier fotograma */
.hero__media.con-video::after{
  background:
    linear-gradient(180deg,rgba(10,10,11,.7) 0%,rgba(10,10,11,.3) 26%,rgba(10,10,11,.96) 100%),
    radial-gradient(85% 55% at 20% 84%,rgba(10,10,11,.85),transparent 74%);
}
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,10,11,.72) 0%,rgba(10,10,11,.12) 34%,rgba(10,10,11,.92) 100%),
    radial-gradient(80% 60% at 20% 80%,rgba(10,10,11,.7),transparent 70%);
}
.hero__type{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(5rem,13vh,8.5rem);
  z-index:2;display:grid;gap:1.15rem;justify-items:start;max-width:52rem;
}
.hero__title{font-size:clamp(2.4rem,6.4vw,5.2rem);letter-spacing:-.035em}
.hero__sub{font-size:clamp(1rem,1.25vw,1.15rem);color:rgba(243,241,236,.82);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.5rem}
.hero__foot{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(1.4rem,3.5vh,2.4rem);
  z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.hero__addr{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--gris);transition:color .3s}
.hero__addr:hover{color:var(--oro)}
.hero__addr svg{color:var(--oro)}
.hero__cue{display:block;width:1px;height:44px;background:var(--linea-2);position:relative;overflow:hidden}
.hero__cue i{position:absolute;inset:0;background:var(--oro);transform:translateY(-100%);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.hero__cue i{animation:none;transform:none;opacity:.5}}
@media (max-width:640px){
  .hero__cue{display:none}
  .hero__foot{right:auto;max-width:62%}
  .hero__addr{font-size:.76rem}
}

/* =========================================================
   BARRA DE CONFIANZA
   ========================================================= */
.trust{border-bottom:1px solid var(--linea);background:var(--negro-2)}
.trust__row{
  max-width:var(--maxw);margin:0 auto;padding:clamp(1.6rem,3vw,2.4rem) var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;
}
.trust__row div{display:grid;gap:.2rem;border-left:2px solid var(--oro);padding-left:1rem}
.trust__row b{font-family:var(--display);font-size:1.02rem;font-weight:600}
.trust__row span{font-size:.82rem;color:var(--gris-2)}
@media (max-width:860px){.trust__row{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   SERVICIOS
   ========================================================= */
.svc{padding:clamp(4rem,9vw,7.5rem) 0}
.svc__grid{
  max-width:var(--maxw);margin:clamp(2.2rem,4vw,3.4rem) auto 0;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.5rem);align-items:stretch;
}
.pack{
  position:relative;display:flex;flex-direction:column;gap:1.3rem;
  background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(1.5rem,2.2vw,2.1rem);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s;
}
.pack:hover{border-color:var(--linea-2);transform:translateY(-4px)}
.pack--dest{
  background:linear-gradient(180deg,rgba(227,178,76,.09),rgba(227,178,76,0) 42%),var(--carbon);
  border-color:rgba(227,178,76,.4);
}
.pack__flag{
  position:absolute;top:-.72rem;left:clamp(1.5rem,2.2vw,2.1rem);
  background:var(--oro);color:#151208;font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;border-radius:99px;
}
.pack__top{display:grid;gap:.6rem}
.pack__n{font-family:var(--display);font-size:.78rem;font-weight:600;color:var(--oro);letter-spacing:.1em}
.pack__top h3{font-size:1.35rem}
.pack__desc{font-size:.92rem;color:var(--gris)}
.pack__list{display:grid;gap:.5rem;border-top:1px solid var(--linea);padding-top:1.1rem;flex:1}
.pack__list li{position:relative;padding-left:1.35rem;font-size:.9rem;color:rgba(243,241,236,.86)}
.pack__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:5px;
  border-left:1.6px solid var(--oro);border-bottom:1.6px solid var(--oro);transform:rotate(-45deg);
}
.pack__prices{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;border-top:1px solid var(--linea);padding-top:1.1rem}
.pack__prices div{display:grid;gap:.15rem}
.pack__prices span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2)}
.pack__prices b{font-family:var(--display);font-size:1.42rem;font-weight:700}
.pack__cta{
  display:inline-flex;align-items:center;gap:.6rem;align-self:start;
  font-size:.85rem;font-weight:600;color:var(--oro);
}
.pack__cta i{width:16px;height:1px;background:currentColor;position:relative;transition:width .35s var(--ease)}
.pack__cta i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.pack__cta:hover i{width:28px}

.svc__extras{
  max-width:var(--maxw);margin:clamp(1.6rem,3vw,2.4rem) auto 0;padding:0 var(--pad);
  display:grid;gap:.9rem;
}
.svc__extrasK{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-2)}
.svc__extras ul{display:flex;flex-wrap:wrap;gap:.55rem}
.svc__extras li{
  border:1px solid var(--linea);border-radius:99px;padding:.45rem 1rem;
  font-size:.86rem;color:rgba(243,241,236,.86);
}
.svc__extrasNote{font-size:.82rem;color:var(--gris-2)}
@media (max-width:1000px){.svc__grid{grid-template-columns:1fr;max-width:620px}}

/* =========================================================
   TRATAMIENTOS
   ========================================================= */
.treat{position:relative;padding:clamp(4.5rem,10vw,8rem) 0;overflow:hidden;background:#08080a}
.treat__bg{position:absolute;inset:0;margin:0}
.treat__bg img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.treat__video{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  display:none;
}
.treat__bg.con-video .treat__video{display:block}
/* con el video puesto, la foto de respaldo no se ve: que deje de ocupar
   una capa reservada en la placa de video */
.treat__bg.con-video img{opacity:0;will-change:auto}
.treat__bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.9),rgba(8,8,10,.96));
}
/* con el video detrás, el velo se afloja un poco para que se vea trabajar */
.treat__bg.con-video::after{
  background:linear-gradient(180deg,rgba(8,8,10,.86),rgba(8,8,10,.93));
}
.pfx{overflow:hidden}
.pfx img{will-change:transform}
.treat__inner{position:relative;z-index:1}
.treat__grid{
  max-width:var(--maxw);margin:clamp(2.2rem,4vw,3.4rem) auto 0;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.5vw,1.4rem);
  align-items:start;
}
.tcard{
  position:relative;display:flex;flex-direction:column;gap:1.05rem;
  background:rgba(22,22,26,.86);backdrop-filter:blur(6px);
  border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(1.35rem,2vw,1.9rem);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.tcard:hover{border-color:rgba(227,178,76,.45);transform:translateY(-4px)}
.tcard--top{border-color:rgba(227,178,76,.42);background:linear-gradient(180deg,rgba(227,178,76,.1),rgba(22,22,26,.86) 45%)}
.tcard__flag{
  position:absolute;top:-.7rem;left:1.35rem;background:var(--oro);color:#151208;
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.28rem .65rem;border-radius:99px;
}
.tcard__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.tcard__head>div{display:grid;gap:.3rem;min-width:0}
.tcard__k{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-2)}
.tcard__head h3{font-size:clamp(1.15rem,1.5vw,1.42rem);line-height:1.2}
.tcard__gar{
  flex:0 0 auto;font-family:var(--display);font-size:.78rem;font-weight:700;white-space:nowrap;
  color:var(--oro);background:var(--oro-luz);border:1px solid rgba(227,178,76,.3);
  border-radius:99px;padding:.3rem .75rem;
}
.tcard ul{display:grid;gap:.5rem;flex:1;border-top:1px solid var(--linea);padding-top:.9rem}
.tcard li{position:relative;padding-left:1.3rem;font-size:.9rem;color:rgba(243,241,236,.82);line-height:1.55}
.tcard li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:5px;
  border-left:1.6px solid var(--oro);border-bottom:1.6px solid var(--oro);transform:rotate(-45deg)}
.tcard__ideal{
  font-size:.88rem;line-height:1.55;color:var(--gris);
  background:rgba(227,178,76,.07);border-left:2px solid var(--oro);
  border-radius:0 8px 8px 0;padding:.75rem .95rem;
}
.tcard__ideal b{color:var(--oro);font-weight:700}
.tcard li em{font-style:italic;color:rgba(243,241,236,.9)}
.tcard__pie{
  display:flex;align-items:center;gap:.9rem;margin-top:auto;
  font-size:.8rem;color:var(--gris-2);border-top:1px solid var(--linea);padding-top:.9rem;
}
.tcard__pie b{color:var(--hueso);font-weight:700}
.tcard--chico ul{padding-top:.9rem}
.tcard__precios{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;border-top:1px solid var(--linea);padding-top:.9rem}
.tcard__precios span{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2)}
.tcard__precios b{font-family:var(--display);font-size:1.12rem;font-weight:700}
@media (max-width:820px){.treat__grid{grid-template-columns:1fr}}
.treat__aviso{
  position:relative;z-index:1;max-width:var(--maxw);margin:clamp(1.4rem,2.5vw,2rem) auto 0;
  padding:0 var(--pad);font-size:.88rem;color:var(--gris);line-height:1.6;
}
.treat__aviso b{color:var(--oro)}

/* =========================================================
   INTERIOR
   ========================================================= */
.inte{padding:clamp(4rem,9vw,7.5rem) 0}
.inte__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.inte__copy{display:grid;gap:1.3rem;justify-items:start}
.inte__prices{display:grid;gap:.8rem;width:100%}
.inte__prices>div{
  display:grid;gap:.25rem;border:1px solid var(--linea);border-radius:var(--r-sm);
  padding:1.05rem 1.2rem;background:var(--carbon);
}
.inte__prices h3{font-size:1.02rem}
.inte__prices p{font-size:.84rem;color:var(--gris)}
.inte__prices b{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--oro)}
.inte__mosaic{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1vw,1rem)}
.inte__mosaic figure{margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--r-sm);background:var(--carbon)}
.inte__mosaic img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
@media (max-width:900px){.inte__grid{grid-template-columns:1fr}}

/* =========================================================
   TRABAJOS
   ========================================================= */
.work{padding:clamp(4rem,9vw,7.5rem) 0}
.work__filters{
  max-width:var(--maxw);margin:clamp(1.6rem,3vw,2.4rem) auto 1.6rem;padding:0 var(--pad);
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.chip{
  border:1px solid var(--linea);border-radius:99px;padding:.5rem 1.05rem;
  font-size:.85rem;font-weight:500;color:var(--gris);
  transition:border-color .3s,color .3s,background .3s;
}
.chip:hover{color:var(--hueso);border-color:var(--linea-2)}
.chip.is-on{background:var(--oro);border-color:var(--oro);color:#151208;font-weight:700}
.work__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1vw,1rem);
}
.shot{margin:0;aspect-ratio:1;overflow:hidden;border-radius:var(--r-sm);background:var(--carbon)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.shot:hover img{transform:scale(1.06)}
.shot.is-off{display:none}
.work__empty{max-width:var(--maxw);margin:1.5rem auto 0;padding:0 var(--pad);color:var(--gris-2)}
@media (max-width:900px){.work__grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   ANTES / DESPUÉS
   ========================================================= */
.ba{padding:clamp(4rem,9vw,7.5rem) 0;background:var(--negro-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cmp{
  position:relative;margin:clamp(2rem,4vw,3rem) auto 0;max-width:var(--maxw);
  width:calc(100% - var(--pad) * 2);aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);
  background:var(--carbon);touch-action:pan-y;user-select:none;cursor:ew-resize;
}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp__clip{position:absolute;inset:0;clip-path:inset(0 50% 0 0);z-index:2}
.cmp__clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp__handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--oro);
  transform:translateX(-1px);z-index:3;cursor:ew-resize;
}
.cmp__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:var(--oro);color:#151208;
  display:grid;place-items:center;box-shadow:0 8px 26px -8px rgba(0,0,0,.8);
}
.cmp__tag{
  position:absolute;top:1rem;z-index:2;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(10,10,11,.72);backdrop-filter:blur(6px);
  border:1px solid var(--linea);border-radius:99px;padding:.4rem .85rem;
}
.cmp__tag--l{left:1rem}
.cmp__tag em{font-style:normal;font-weight:500;color:var(--gris-2);letter-spacing:.06em}
.cmp__note b{color:var(--gris);font-weight:600}
.cmp__tag--r{right:1rem;color:var(--oro);border-color:rgba(227,178,76,.4)}
.cmp__note{
  display:block;max-width:var(--maxw);margin:1rem auto 0;padding:0 var(--pad);
  font-size:.82rem;color:var(--gris-2);line-height:1.6;
}
@media (max-width:700px){.cmp{aspect-ratio:4/3}}

/* =========================================================
   ÚLTIMOS TRABAJOS
   ========================================================= */
.last{padding:clamp(3.5rem,7vw,6rem) 0}
.last__head{
  max-width:var(--maxw);margin:0 auto 1.8rem;padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
}
.last__head>div{display:grid;gap:.5rem}
.last__rail{
  display:flex;gap:clamp(.6rem,1vw,1rem);padding:0 var(--pad);
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:.8rem;
}
.last__rail::-webkit-scrollbar{height:3px}
.last__rail::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:9px}
.last__rail figure{
  margin:0;flex:0 0 clamp(200px,22vw,290px);aspect-ratio:1;
  overflow:hidden;border-radius:var(--r-sm);scroll-snap-align:start;background:var(--carbon);
}
.last__rail img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.last__rail figure:hover img{transform:scale(1.05)}

/* =========================================================
   PRODUCTOS
   ========================================================= */
.prod{padding:clamp(4rem,9vw,7rem) 0}
.prod__grid{
  max-width:var(--maxw);margin:clamp(2rem,4vw,3rem) auto 0;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.5rem);
}
.pcard{
  background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r);
  padding:1.4rem;display:grid;gap:.9rem;justify-items:start;
  transition:border-color .4s,transform .4s var(--ease);
}
.pcard:hover{border-color:var(--linea-2);transform:translateY(-4px)}
.pcard figure{
  margin:0;width:100%;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;
  background:var(--hueso);display:grid;place-items:center;padding:1rem;
}
.pcard img{width:auto;height:100%;object-fit:contain}
.pcard h3{font-size:1.05rem}
.pcard p{font-size:.88rem;color:var(--gris)}
@media (max-width:900px){.prod__grid{grid-template-columns:1fr;max-width:520px}}

/* =========================================================
   DÓNDE ESTAMOS
   ========================================================= */
.place{padding:clamp(4rem,9vw,7rem) 0;background:var(--negro-2);border-top:1px solid var(--linea)}
.place__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center;
}
.place__copy{display:grid;gap:1.3rem;justify-items:start}
.place__data{display:grid;gap:.85rem;width:100%;max-width:34rem}
.place__data>div{
  display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;
  border-top:1px solid var(--linea);padding-top:.8rem;
}
.place__data dt{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2)}
.place__data dd{text-align:right;font-size:.95rem}
.place__data a:hover{color:var(--oro)}
.place__cta{display:flex;flex-wrap:wrap;gap:.8rem}
.place__map{
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;background:var(--carbon);
}
.place__map iframe{width:100%;height:100%;filter:grayscale(.35) contrast(1.05) brightness(.92)}
@media (max-width:900px){.place__grid{grid-template-columns:1fr}.place__map{aspect-ratio:16/11}}

/* =========================================================
   CIERRE
   ========================================================= */
.close{position:relative;overflow:hidden;background:#08080a}
.close__bg{position:absolute;inset:0;margin:0}
.close__bg img{width:100%;height:100%;object-fit:cover}
.close__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,.82),rgba(8,8,10,.9))}
.close__inner{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:clamp(4.5rem,10vw,8rem) var(--pad);display:grid;gap:1.8rem;justify-items:center;text-align:center;
}
.close__title{font-size:clamp(1.9rem,4.6vw,3.6rem);text-wrap:balance}
@media (max-width:760px){.close__inner{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}}

/* =========================================================
   ASISTENTE
   ========================================================= */
.asis__open{
  position:fixed;right:clamp(.9rem,2vw,1.6rem);z-index:70;
  bottom:calc(clamp(.9rem,2vw,1.6rem) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--oro);color:#151208;font-weight:700;font-size:.9rem;
  padding:.85rem 1.25rem;border-radius:999px;
  box-shadow:0 12px 30px -12px rgba(227,178,76,.75);
  transition:transform .3s var(--ease),filter .3s;
}
.asis__open:hover{transform:translateY(-2px);filter:brightness(1.05)}
.asis__open[aria-expanded="true"]{display:none}
.asis__dot{width:8px;height:8px;border-radius:50%;background:#151208;position:relative}
.asis__dot::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(21,18,8,.45);
  animation:pulso 2.2s ease-out infinite;
}
@keyframes pulso{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.asis__dot::after{animation:none;opacity:.4}}

.asis{
  position:fixed;right:clamp(.9rem,2vw,1.6rem);z-index:71;
  bottom:calc(clamp(.9rem,2vw,1.6rem) + env(safe-area-inset-bottom,0px));
  width:min(380px,calc(100vw - 1.8rem));
  height:min(560px,calc(100dvh - 4.5rem - env(safe-area-inset-bottom,0px)));
  display:flex;flex-direction:column;
  background:var(--carbon);border:1px solid var(--linea-2);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.asis[hidden]{display:none}
.asis__top{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 1.1rem;border-bottom:1px solid var(--linea);background:var(--carbon-2);
}
.asis__name{font-family:var(--display);font-weight:600;font-size:.95rem}
.asis__state{display:flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--gris-2)}
.asis__state i{width:6px;height:6px;border-radius:50%;background:var(--wa)}
.asis__close{font-size:1.5rem;line-height:1;color:var(--gris);padding:.1rem .3rem}
.asis__close:hover{color:var(--hueso)}
.asis__log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.75rem}
.msg{max-width:86%;padding:.7rem .95rem;border-radius:14px;font-size:.9rem;line-height:1.55}
.msg--bot{background:var(--carbon-2);border:1px solid var(--linea);border-bottom-left-radius:5px;align-self:flex-start}
.msg--yo{background:var(--oro);color:#151208;font-weight:500;border-bottom-right-radius:5px;align-self:flex-end}
.msg b{font-weight:700}
.msg a{color:var(--oro);text-decoration:underline;text-underline-offset:2px}
.msg--yo a{color:#151208}
.msg ul{display:grid;gap:.25rem;margin-top:.4rem}
.asis__typing{color:var(--gris-2);font-style:italic}
.msg li{padding-left:.9rem;position:relative}
.msg li::before{content:"·";position:absolute;left:.2rem}
.asis__chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1.1rem .8rem}
.asis__chips button{
  border:1px solid var(--linea);border-radius:99px;padding:.38rem .8rem;
  font-size:.79rem;color:var(--gris);transition:border-color .25s,color .25s;
}
.asis__chips button:hover{color:var(--oro);border-color:rgba(227,178,76,.5)}
.asis__form{display:flex;gap:.5rem;padding:.8rem 1.1rem 1.1rem;border-top:1px solid var(--linea)}
.asis__form input{
  flex:1;background:var(--negro-2);border:1px solid var(--linea);border-radius:99px;
  padding:.65rem 1rem;color:var(--hueso);font:inherit;font-size:.9rem;
}
.asis__form input::placeholder{color:var(--gris-2)}
.asis__form input:focus{outline:none;border-color:var(--oro)}
.asis__form button{
  width:42px;height:42px;border-radius:50%;background:var(--oro);color:#151208;
  display:grid;place-items:center;flex:0 0 auto;transition:filter .25s;
}
.asis__form button:hover{filter:brightness(1.08)}

/* =========================================================
   PIE
   ========================================================= */
.foot{background:var(--negro-2);border-top:1px solid var(--linea);padding-top:clamp(2.5rem,5vw,4rem)}
.foot__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(2.5rem,5vw,3.5rem);
  display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:2rem;font-size:.9rem;color:var(--gris);line-height:1.8;
}
.foot__brand img{width:clamp(120px,14vw,168px);border-radius:var(--r-sm)}
.foot__k{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--oro);margin-bottom:.7rem}
.foot__grid a{border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.foot__grid a:hover{color:var(--hueso);border-color:currentColor}
.foot__base{
  max-width:var(--maxw);margin:0 auto;padding:1.2rem var(--pad) 2rem;
  border-top:1px solid var(--linea);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.75rem;color:var(--gris-2);
}
@media (max-width:820px){.foot__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .place__data>div{flex-direction:column;gap:.15rem}
  .place__data dd{text-align:left}
  .trust__row{grid-template-columns:1fr}
  .foot__base{flex-direction:column;gap:.4rem}
  .hero__cta{width:100%}
  .hero__cta .wa,.hero__cta .btn-ghost{flex:1;justify-content:center}
  .cmp__note{font-size:.78rem}
  .asis__open{font-size:.85rem;padding:.8rem 1.05rem}
}

/* =========================================================
   ESTADOS DE ENTRADA
   ========================================================= */
html.anim [data-reveal],
html.anim [data-hero]{opacity:0;transform:translateY(20px)}

/* =========================================================
   PEDIR TURNO
   ========================================================= */
.turno{padding:clamp(4rem,9vw,7.5rem) 0;background:var(--negro-2);border-top:1px solid var(--linea)}
.turno__grid{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:start;
}
.turno__intro{display:grid;gap:1.2rem;justify-items:start;position:sticky;top:calc(var(--barH,62px) + 1.5rem)}
.turno__pasos{display:grid;gap:.6rem;counter-reset:p;margin-top:.4rem}
.turno__pasos li{display:flex;gap:.7rem;font-size:.92rem;color:var(--gris)}
.turno__pasos b{color:var(--oro);font-family:var(--display);font-weight:700}
.turno__aviso{
  font-size:.85rem;color:var(--gris-2);border-left:2px solid var(--oro);
  padding-left:1rem;max-width:44ch;
}

.turno__form{
  background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(1.4rem,2.4vw,2.2rem);display:grid;gap:1.15rem;
}
.campo{display:grid;gap:.45rem;border:0;padding:0;margin:0;min-width:0}
.campo--2{grid-template-columns:1fr 1fr;gap:1rem}
.campo--2>div{display:grid;gap:.45rem;min-width:0}
.campo label,.campo legend{
  font-size:.82rem;font-weight:600;color:rgba(243,241,236,.9);padding:0;
}
.campo label span,.campo legend span{font-weight:400;color:var(--gris-2)}
.req{color:var(--oro);font-weight:700}
.ayuda{font-size:.74rem;color:var(--gris-2)}
.campo input,.campo select,.campo textarea{
  width:100%;background:var(--negro-2);color:var(--hueso);
  border:1px solid var(--linea);border-radius:10px;
  padding:.72rem .9rem;font:inherit;font-size:.95rem;
  transition:border-color .25s;
}
.campo textarea{resize:vertical;min-height:64px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--oro)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-2)}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
.campo input.is-mal,.campo select.is-mal{border-color:#e0574c}

.opts{display:flex;gap:.5rem;flex-wrap:wrap}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;width:0;height:0}
.opts span{
  display:inline-block;border:1px solid var(--linea);border-radius:99px;
  padding:.5rem 1.05rem;font-size:.88rem;color:var(--gris);transition:.25s;
}
.opts input:checked+span{background:var(--oro);border-color:var(--oro);color:#151208;font-weight:700}
.opts input:focus-visible+span{outline:2px solid var(--oro);outline-offset:2px}

.turno__precio{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  background:var(--negro-2);border:1px solid var(--linea);border-radius:10px;
  padding:.85rem 1rem;
}
.turno__precio span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-2)}
.turno__precio b{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--oro)}

.turno__prev{display:grid;gap:.5rem}
.turno__prevK{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-2)}
.turno__prev pre{
  margin:0;background:#0b1a12;border:1px solid rgba(37,211,102,.28);border-radius:10px;
  padding:.9rem 1rem;font-family:var(--texto);font-size:.84rem;line-height:1.65;
  color:rgba(243,241,236,.92);white-space:pre-wrap;word-break:break-word;
}
.turno__error{
  font-size:.86rem;color:#ffb3ad;background:rgba(224,87,76,.12);
  border:1px solid rgba(224,87,76,.35);border-radius:10px;padding:.7rem .9rem;
}
.turno__error[hidden]{display:none}
.turno__enviar{justify-self:start}
.turno__ok{display:grid;gap:.8rem;justify-items:start;border-top:1px solid var(--linea);padding-top:1.1rem}
.turno__ok[hidden]{display:none}
.turno__ok p{font-size:.9rem;color:var(--gris)}
.turno__ok b{color:var(--hueso)}
.turno__ok a[id="tLink"]{color:var(--oro);text-decoration:underline}

@media (max-width:900px){
  .turno__grid{grid-template-columns:1fr}
  .turno__intro{position:static}
}
@media (max-width:560px){
  .campo--2{grid-template-columns:1fr}
}

/* =========================================================
   CELULAR: QUE EL SCROLL VAYA SUELTO
   Va al final a propósito, para que gane sobre las reglas de arriba.

   El vidrio esmerilado (backdrop-filter) obliga al navegador a volver a
   desenfocar todo lo que pasa por detrás en cada cuadro. En la barra fija y
   en las seis fichas de tratamientos —que encima tienen el video atrás— eso
   es lo que se sentía trabado. Lo cambiamos por un fondo casi opaco: se ve
   prácticamente igual y no cuesta nada.
   ========================================================= */
@media (hover:none) and (pointer:coarse), (max-width:1000px){
  /* background-COLOR, no background a secas: así la ficha destacada conserva
     su degradado dorado, que va montado encima. */
  .nav{background-color:rgba(10,10,11,.94);backdrop-filter:none}
  .tcard{background-color:rgba(22,22,26,.97);backdrop-filter:none}
  .cmp__tag{background-color:rgba(10,10,11,.94);backdrop-filter:none}
}