/* ============================================================
   CENTRO DE ESTETICA ZIBA - Collado Villalba
   La pagina esta pintada con SU pared: verde botella arriba, yeso
   blanco abajo y la repisa en medio. Los colores no son "de spa":
   estan muestreados de sus propias fotos.
     #16543B  la pared verde de su cabina, en sombra
     #377C4F  la misma pared, donde le da la luz
     #EFE7DA  el enfoscado blanco de la sala de espera
     #A8845A  las letras ZIBA de madera que tiene colgadas
     #E3C289  el buda dorado de la balda  <- el acento afilado
   ============================================================ */

@font-face{font-family:'Gloock';src:url('fonts/gloock.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sen';src:url('fonts/sen.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --verde:#16543B;
  --verde-hondo:#0C3527;
  --verde-luz:#377C4F;
  --verde-borde:rgba(227,194,137,.26);
  --yeso:#EFE7DA;
  --yeso-2:#E3D9C8;
  --yeso-borde:rgba(23,37,30,.14);
  --kraft:#A8845A;
  --kraft-texto:#75572D;
  --oro:#E3C289;
  --oro-vivo:#CFA65E;
  --tinta:#17251E;
  --tinta-2:#42544A;
  --sobre-verde:#F2EADD;
  --sobre-verde-2:#BCD3C4;

  --display:'Gloock',Georgia,'Times New Roman',serif;
  --texto:'Sen',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --marco:clamp(1.15rem,4.4vw,4.6rem);
  --cab:4.6rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--yeso);color:var(--tinta);
  font:400 clamp(1.02rem,.42vw + .92rem,1.16rem)/1.62 var(--texto);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;
  line-height:1.08;letter-spacing:-0.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--oro-vivo);outline-offset:3px;border-radius:2px}

.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--verde);
  color:var(--yeso);padding:.9rem 1.3rem;font-weight:700;text-decoration:none}
.saltar:focus{left:.6rem;top:.6rem}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- piezas comunes ---------- */
.sube{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.sube.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sube{opacity:1;transform:none}}

.ojo{font-family:var(--texto);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--kraft-texto);margin:0 0 1.1rem}
.aval__ojo{padding:0 var(--marco);margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.verde .ojo,.hondo .ojo{color:var(--oro)}

.boton{display:inline-flex;align-items:center;gap:.6rem;min-height:52px;
  padding:.85rem 1.55rem;border-radius:999px;text-decoration:none;font-weight:700;
  font-size:1.02rem;border:2px solid transparent;cursor:pointer;font-family:var(--texto);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.boton--oro{background:var(--oro-vivo);color:#221605;border-color:var(--oro-vivo)}
.boton--oro:hover{background:var(--oro);border-color:var(--oro)}
.boton--linea{background:transparent;color:var(--sobre-verde);border-color:var(--verde-borde)}
.boton--linea:hover{border-color:var(--oro);color:var(--oro)}
.boton--tinta{background:var(--verde);color:var(--yeso);border-color:var(--verde)}
.boton--tinta:hover{background:var(--verde-hondo);border-color:var(--verde-hondo)}
.boton svg{width:20px;height:20px;flex:none;fill:currentColor}

/* ============================================================
   CABECERA
   ============================================================ */
.cab{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;
  height:var(--cab);padding:0 var(--marco);
  transition:background .35s ease,box-shadow .35s ease}
/* La cabecera vive en la franja verde de la izquierda. Si cruzara por encima
   de la foto clara de las letras, habria que meterle un velo detras, y los
   velos no se ponen. */
.cab__in{width:100%;max-width:calc(53.5% - var(--marco));display:flex;align-items:center;
  justify-content:space-between;gap:1rem}
@media (max-width:1080px){.cab__in{max-width:100%}}
.cab--fija{background:rgba(12,53,39,.94);-webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);box-shadow:0 1px 0 rgba(227,194,137,.2)}
.marca{display:flex;align-items:baseline;gap:.75rem;text-decoration:none;color:var(--sobre-verde)}
.marca__z{font-family:var(--display);font-size:1.62rem;letter-spacing:.06em;line-height:1}
.marca__q{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  color:var(--sobre-verde-2);font-weight:700}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav__enlaces{display:flex;align-items:center;gap:1.35rem}
.nav a{text-decoration:none;font-size:.92rem;font-weight:600;color:var(--sobre-verde-2);
  padding:.55rem 0;white-space:nowrap;transition:color .2s ease}
.nav a:hover{color:var(--oro)}
.nav .boton{min-height:44px;padding:.6rem 1.15rem;font-size:.92rem}
@media (max-width:900px){.nav__enlaces{display:none}}
@media (max-width:1500px){.marca__q{display:none}}
@media (max-width:900px){.marca__q{display:inline}}
@media (max-width:430px){.marca__q{display:none}}

/* ============================================================
   HERO - la pared de ZIBA
   ============================================================ */
.pared{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.44fr) minmax(0,.5fr);
  min-height:100svh;background:var(--verde)}
.muro{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--cab) + 3.2rem) clamp(1.15rem,3.2vw,3.6rem) 3rem var(--marco);
  --dado:60%;
  background:linear-gradient(to bottom,var(--verde) 0 var(--dado),var(--yeso) var(--dado) 100%);
  overflow:hidden}
html:not(.js) .muro{--dado:100%}
/* la luz del plafon de su techo, arriba a la izquierda */
.muro::before{content:"";position:absolute;left:-10%;top:-18%;width:78%;height:70%;
  background:radial-gradient(ellipse at 35% 30%,rgba(88,168,116,.5),rgba(88,168,116,0) 68%);
  pointer-events:none}
/* la repisa de la pared, justo en el corte */
.muro__repisa{position:absolute;left:0;right:0;top:var(--dado);height:14px;
  background:var(--yeso);z-index:1;
  box-shadow:0 4px 0 rgba(23,37,30,.10),0 18px 30px -16px rgba(0,0,0,.6);pointer-events:none}
.muro__repisa::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0))}
.muro__yeso{position:absolute;left:0;right:0;top:var(--dado);bottom:0;pointer-events:none;
  background-image:url('img/yeso.jpg');
  background-image:image-set(url('img/yeso.webp') type('image/webp'),url('img/yeso.jpg') type('image/jpeg'));
  background-size:cover;background-position:center;
  opacity:.5;mix-blend-mode:multiply}
.muro__dentro{position:relative;z-index:2;max-width:100%}
.muro__ojo{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--oro);margin:0 0 1.4rem}
.muro__h1{font-size:clamp(2.7rem,6.1vw,7.4rem);letter-spacing:-.028em;max-width:min(100%,5.15em)}
.muro__uno{display:block;font-family:var(--texto);font-weight:400;
  font-size:clamp(1rem,1.35vw,1.34rem);line-height:1.34;letter-spacing:0;
  color:var(--sobre-verde-2);margin-bottom:1.1rem;max-width:min(100%,24rem)}
.cruce{position:relative;display:block}
.cruce__real{display:block;color:transparent}
.cruce__c{position:absolute;inset:0;pointer-events:none}
.cruce__c--alto{color:var(--sobre-verde);clip-path:inset(0 0 calc(100% - var(--corte,100%)) 0)}
.cruce__c--bajo{color:var(--tinta);clip-path:inset(var(--corte,100%) 0 0 0)}
html:not(.js) .cruce__c{display:none}
html:not(.js) .cruce__real{color:var(--sobre-verde)}
.muro__pie{position:relative;z-index:2;margin-top:1.9rem;display:flex;flex-wrap:wrap;
  gap:.75rem 1rem;align-items:center}
.muro__nota{position:relative;z-index:2;margin-top:1.1rem;font-size:.88rem;
  color:var(--tinta-2);max-width:36ch;line-height:1.5}
.muro__nota b{color:var(--kraft-texto)}

.pared__foto{margin:0;position:relative;overflow:hidden;background:var(--verde-hondo)}
.pared__foto .capa{position:absolute;inset:0;will-change:transform}
.pared__foto picture,.bea__foto picture{display:block;width:100%;height:100%}
.pared__foto img{width:100%;height:100%;object-fit:cover}
.pared__foto--letras img{object-position:54% 46%}
.pared__foto--bea img{object-position:50% 36%}

@media (max-width:1080px){
  .pared{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .muro{grid-column:1/-1;min-height:76svh}
  .pared__foto{height:48svh}
}
@media (max-width:640px){
  .muro{padding-right:var(--marco)}
  .muro__dentro{max-width:none}
  .pared__foto{height:36svh}
}

/* ============================================================
   FONDOS
   ============================================================ */
.claro{position:relative;background:var(--yeso);color:var(--tinta)}
.claro::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url('img/yeso.jpg');
  background-image:image-set(url('img/yeso.webp') type('image/webp'),url('img/yeso.jpg') type('image/jpeg'));
  background-size:cover;background-position:center;
  opacity:.55;mix-blend-mode:multiply}
.claro>*{position:relative;z-index:1}
.verde{background:var(--verde);color:var(--sobre-verde)}
.hondo{background:var(--verde-hondo);color:var(--sobre-verde)}

/* ============================================================
   NOTA / RESENAS
   ============================================================ */
.aval{padding:clamp(3.4rem,7vw,6.4rem) 0 clamp(2.6rem,5vw,4rem)}
.aval__fila{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.6rem,4vw,4rem);
  align-items:center;padding:0 var(--marco)}
@media (max-width:760px){.aval__fila{grid-template-columns:1fr}}
.nota{display:flex;align-items:flex-start;gap:1rem}
.nota__num{font-family:var(--display);font-size:clamp(4.6rem,11vw,9.5rem);line-height:.8;
  letter-spacing:-.04em;color:var(--verde)}
.nota__lado{padding-top:.5rem}
.estrellas{display:flex;gap:3px}
.estrellas svg{width:19px;height:19px;fill:var(--oro-vivo)}
.nota__txt{margin-top:.5rem;font-size:.95rem;color:var(--tinta-2);max-width:11rem;line-height:1.42}
.nota__txt b{color:var(--tinta)}
.aval__dice{font-family:var(--display);font-size:clamp(1.4rem,2.5vw,2.3rem);line-height:1.16;
  letter-spacing:-.015em;max-width:min(100%,32rem)}
.aval__dice small{display:block;font-family:var(--texto);font-size:.82rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--kraft-texto);margin-top:1rem}

.rio{margin-top:clamp(2.2rem,5vw,3.6rem);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rio__tira{display:flex;gap:1.1rem;width:max-content;will-change:transform;padding:0 .5rem}
.voz{width:min(78vw,29rem);flex:none;background:rgba(255,255,255,.62);
  border:1px solid var(--yeso-borde);border-radius:22px;padding:1.5rem 1.6rem 1.35rem}
.voz p{font-size:1rem;line-height:1.55}
.voz footer{margin-top:.9rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--kraft-texto);display:flex;align-items:center;gap:.55rem}
.voz footer svg{width:14px;height:14px;fill:var(--oro-vivo)}

/* ============================================================
   LA CARTA
   ============================================================ */
.carta{padding:clamp(3.6rem,7vw,6.6rem) 0 clamp(1rem,2vw,2rem)}
.carta__cab{padding:0 var(--marco);max-width:min(100%,58rem)}
.carta__cab h2{font-size:clamp(2.2rem,5vw,4.4rem);color:var(--sobre-verde);text-wrap:balance}
.carta__cab p{margin-top:1.1rem;color:var(--sobre-verde-2);max-width:min(100%,34rem)}
.lista{margin-top:clamp(2.2rem,5vw,3.6rem)}
.fila{position:relative;display:grid;grid-template-columns:4.2rem minmax(0,1fr) minmax(0,16rem);
  gap:1.4rem;align-items:baseline;padding:clamp(1.4rem,2.6vw,2.1rem) var(--marco);
  border-top:1px solid rgba(227,194,137,.17);transition:background .3s ease}
.fila:last-child{border-bottom:1px solid rgba(227,194,137,.17)}
.fila:hover,.fila:focus-within{background:rgba(227,194,137,.07)}
.fila__n{font-size:.84rem;font-weight:800;letter-spacing:.1em;color:var(--oro);
  font-variant-numeric:tabular-nums}
.fila__q{font-family:var(--display);font-size:clamp(1.6rem,3.5vw,3.1rem);line-height:1.02;
  letter-spacing:-.02em;color:var(--sobre-verde)}
.fila__q a{text-decoration:none;background-image:linear-gradient(var(--oro),var(--oro));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 92%;
  transition:background-size .4s cubic-bezier(.2,.8,.2,1),color .3s ease}
.fila:hover .fila__q a,.fila__q a:focus-visible{background-size:100% 2px;color:var(--oro)}
.fila__d{font-size:.97rem;line-height:1.5;color:var(--sobre-verde-2)}
.fila__d strong{color:var(--oro);font-weight:700}
.fila__foto{margin:0;border-radius:16px;overflow:hidden;background:var(--verde-hondo)}
.fila__foto img{width:100%;height:auto}
.placa{background:var(--kraft);color:#2a1c0c;padding:1.5rem 1.4rem;display:flex;
  flex-direction:column;justify-content:center;gap:.4rem;min-height:210px}
.placa b{font-family:var(--display);font-size:1.55rem;font-weight:400;line-height:1.06}
.placa span{font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

@media (min-width:1000px){
  .fila{grid-template-columns:4.2rem minmax(0,1fr) minmax(0,19rem);align-items:start;
    row-gap:.9rem;z-index:1}
  .fila__n{padding-top:.7rem}
  .fila__q{grid-column:2;grid-row:1}
  .fila__d{grid-column:2;grid-row:2;max-width:46rem}
  .fila__foto{position:absolute;right:var(--marco);
    top:50%;width:17rem;opacity:0;pointer-events:none;will-change:transform;
    transform:translate3d(0,calc(-50% + var(--dy,0px)),0) scale(.93);
    transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 34px 64px -24px rgba(0,0,0,.75)}
  .fila:hover,.fila:focus-within{z-index:3}
  .fila:hover .fila__foto,.fila:focus-within .fila__foto{opacity:1;
    transform:translate3d(0,calc(-50% + var(--dy,0px)),0) scale(1)}
}
@media (max-width:999px){
  .fila{grid-template-columns:2.8rem minmax(0,1fr);row-gap:1rem}
  .fila__d{grid-column:2}
  .fila__foto{grid-column:2;max-width:20rem;margin-top:.3rem}
}

/* ============================================================
   LA FRASE
   ============================================================ */
.frase{padding:clamp(4.4rem,10vw,9rem) var(--marco);text-align:center}
.frase blockquote{margin:0 auto;max-width:min(100%,58rem);text-wrap:balance;font-family:var(--display);
  font-size:clamp(2.3rem,6.4vw,6.2rem);line-height:1.02;letter-spacing:-.028em;
  color:var(--sobre-verde)}
.frase blockquote span{color:var(--oro)}
.frase cite{display:block;margin-top:1.9rem;font-style:normal;font-size:.82rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sobre-verde-2)}

/* ============================================================
   PEELINGS
   ============================================================ */
.peel{padding:clamp(3.6rem,7vw,6.4rem) var(--marco)}
.peel__cab{max-width:min(100%,54rem)}
.peel__cab h2{font-size:clamp(2rem,4.4vw,3.7rem);text-wrap:balance}
.peel__cab p{margin-top:1.05rem;color:var(--tinta-2);max-width:min(100%,36rem)}
.peel__rej{margin-top:clamp(2.2rem,4.6vw,3.4rem);display:grid;gap:1.1rem;
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.peel__rej{grid-template-columns:repeat(2,minmax(0,1fr))}}
.frasco{background:rgba(255,255,255,.6);border:1px solid var(--yeso-borde);border-radius:20px;
  padding:1.5rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.9rem}
.frasco h3{font-size:1.7rem;letter-spacing:-.01em}
.frasco p{font-size:.96rem;line-height:1.5;color:var(--tinta-2)}
/* El numero, que antes iba pintado dentro del frasco. Rober quito los dibujos
   el 3-sep: eran cuatro botes de colores que no aportaban nada y competian con
   el texto. Ahora la pieza de la tarjeta es el numero grande. */
/* con `.frasco__n` a secas NO vale: `.frasco p` de mas abajo es mas especifico
   (clase + elemento) y le ganaba, dejando el numero en 15 px y en verde. Se
   escribe como p.frasco__n. Y el color va en oro VIVO, que el oro claro sobre
   la tarjeta crema no se lee. */
p.frasco__n{font-family:var(--display); font-size:clamp(2.6rem,4vw,3.6rem);
  line-height:.85; color:var(--oro-vivo); margin:0 0 .8rem; letter-spacing:-.02em}
.frasco__q{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kraft-texto)}
.peel__nota{margin-top:1.6rem;font-size:.9rem;color:var(--tinta-2);max-width:70ch}

/* ============================================================
   LA PIEZA - prepara tu laser
   ============================================================ */
.pieza{padding:clamp(3.6rem,7vw,6.6rem) 0}
.pieza__cab{padding:0 var(--marco);display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.6rem clamp(2rem,5vw,5rem);
  align-items:end}
@media (max-width:900px){.pieza__cab{grid-template-columns:1fr}}
.pieza__cab h2{font-size:clamp(2.2rem,5.2vw,4.6rem);color:var(--sobre-verde);text-wrap:balance}
.pieza__cab p{color:var(--sobre-verde-2)}
.pieza__cab p b{color:var(--oro);font-weight:700}

.cinta{margin-top:clamp(2rem,4vw,3rem);position:relative}
.cinta__mes{padding:0 var(--marco);margin-bottom:.55rem;font-size:.78rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.cinta__ver{overflow:hidden;overflow:clip;cursor:grab;padding:0 var(--marco);touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.cinta__ver.agarrando{cursor:grabbing}
.cinta__pista{position:relative;display:flex;gap:6px;width:max-content;padding:34px 0 78px;
  will-change:transform}
.banda{position:absolute;height:28px;border-radius:9px;display:flex;align-items:center;
  justify-content:flex-end;padding:0 .75rem;font-size:.76rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;opacity:0;
  transition:opacity .35s ease}
.banda--uva{background:rgba(188,211,196,.26);color:var(--sobre-verde);bottom:40px}
.banda--sol{background:var(--oro-vivo);color:#2a1c05;bottom:6px}
.dia{flex:none;width:60px;min-height:76px;border:1px solid rgba(227,194,137,.2);
  background:rgba(255,255,255,.04);border-radius:12px;color:var(--sobre-verde);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  font-family:var(--texto);cursor:pointer;position:relative;
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.dia:hover{background:rgba(227,194,137,.16);border-color:var(--oro)}
.dia__s{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sobre-verde-2)}
.dia__n{font-size:1.34rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.dia--dom{opacity:.4}
.dia--hoy .dia__s{color:var(--oro)}
.dia--elegido{background:var(--oro-vivo);border-color:var(--oro-vivo);color:#241705;
  transform:translateY(-4px)}
.dia--elegido .dia__s{color:#54390D}
.dia--mes::after{content:attr(data-mes);position:absolute;top:-28px;left:0;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);white-space:nowrap}

.plan{padding:0 var(--marco);margin-top:clamp(2rem,4vw,3rem);display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem}
/* Cinco pasos: a cinco columnas o a tres (3+2). A dos serian 2+2+1 y ese uno
   suelto es el renglon a medias que delata una web sin terminar. */
@media (max-width:1180px){.plan{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.plan{grid-template-columns:1fr}}
.paso{background:rgba(255,255,255,.05);border:1px solid rgba(227,194,137,.2);
  border-radius:18px;padding:1.25rem 1.2rem 1.35rem;display:flex;flex-direction:column;gap:.55rem}
.paso__cuando{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro)}
.paso__f{font-family:var(--display);font-size:1.4rem;line-height:1.06;color:var(--sobre-verde)}
.paso p{font-size:.94rem;line-height:1.5;color:var(--sobre-verde-2)}
.paso--sol{border-color:var(--oro-vivo);background:rgba(207,166,94,.12)}
.pieza__fin{padding:0 var(--marco);margin-top:clamp(1.8rem,3.6vw,2.8rem);
  display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center}
.pieza__fin small{font-size:.88rem;color:var(--sobre-verde-2);max-width:46ch;line-height:1.5}

/* ============================================================
   TARIFAS
   ============================================================ */
.tarifa{padding:clamp(3.6rem,7vw,6.4rem) var(--marco)}
.tarifa__cab{max-width:min(100%,52rem)}
.tarifa__cab h2{font-size:clamp(2rem,4.4vw,3.7rem);text-wrap:balance}
.tarifa__cab p{margin-top:1.05rem;color:var(--tinta-2)}
.bloques{margin-top:clamp(2rem,4.4vw,3.2rem);display:grid;gap:1.1rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.bloques{grid-template-columns:1fr}}
.bloque{background:rgba(255,255,255,.62);border:1px solid var(--yeso-borde);border-radius:22px;
  padding:1.7rem 1.6rem 1.5rem;display:flex;flex-direction:column}
.bloque--dest{background:var(--verde);color:var(--sobre-verde);border-color:var(--verde)}
.bloque h3{font-size:1.8rem}
.bloque__q{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kraft-texto);margin-bottom:.8rem}
.bloque--dest .bloque__q{color:var(--oro)}
.bloque ul{margin-top:1.2rem;display:flex;flex-direction:column;gap:.85rem}
.bloque li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem;align-items:baseline;
  padding-bottom:.85rem;border-bottom:1px solid var(--yeso-borde)}
.bloque--dest li{border-bottom-color:rgba(227,194,137,.22)}
.bloque li:last-child{border-bottom:0;padding-bottom:0}
.bloque li span{font-size:.96rem;line-height:1.4}
.bloque li em{display:block;font-style:normal;font-size:.82rem;color:var(--tinta-2);margin-top:.2rem}
.bloque--dest li em{color:var(--sobre-verde-2)}
.euro{font-family:var(--display);font-size:1.6rem;white-space:nowrap;color:var(--verde)}
.bloque--dest .euro{color:var(--oro)}
.euro s{font-family:var(--texto);font-size:.84rem;color:var(--tinta-2);margin-right:.4rem}
.bloque--dest .euro s{color:var(--sobre-verde-2)}
.bloque__desde{margin-top:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.bloque__desde b{font-family:var(--display);font-size:clamp(2.3rem,3.2vw,3.1rem);
  font-weight:400;line-height:1;color:var(--verde);white-space:nowrap}
.bloque__desde span{font-size:.86rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--kraft-texto)}
.fichas{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.5rem}
.fichas li{border:1px solid var(--yeso-borde);border-radius:999px;padding:.45rem 1rem;
  font-size:.9rem;background:rgba(255,255,255,.5)}
.bloque__pie{margin-top:1.3rem;font-size:.84rem;color:var(--tinta-2);line-height:1.45}
.bloque--dest .bloque__pie{color:var(--sobre-verde-2)}
.tarifa__nota{margin-top:1.6rem;font-size:.92rem;color:var(--tinta-2);max-width:72ch}
.tarifa__nota b{color:var(--kraft-texto)}

/* ============================================================
   BEA
   ============================================================ */
.bea{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
@media (max-width:940px){.bea{grid-template-columns:1fr}}
.bea__foto{margin:0;position:relative;overflow:hidden;min-height:min(78svh,44rem);
  background:var(--verde-hondo)}
.bea__foto .capa{position:absolute;inset:0;will-change:transform}
.bea__foto img{width:100%;height:100%;object-fit:cover;object-position:52% 28%}
@media (max-width:940px){.bea__foto{min-height:60svh}}
.bea__txt{padding:clamp(3rem,6vw,6rem) var(--marco)}
.bea__txt h2{font-size:clamp(2.1rem,4.6vw,4rem);color:var(--sobre-verde);text-wrap:balance}
.bea__txt h2 em{font-style:normal;color:var(--oro)}
.bea__txt .cita{margin-top:1.7rem;max-width:min(100%,44rem);font-size:clamp(1.05rem,1.5vw,1.26rem);line-height:1.55;
  color:var(--sobre-verde);border-left:3px solid var(--oro-vivo);padding-left:1.2rem}
.bea__txt .cita+.cita{margin-top:1.3rem}
.bea__txt .firma{margin-top:1.7rem;font-size:.82rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sobre-verde-2)}
.bea__regalo{margin-top:2.3rem;max-width:min(100%,44rem);display:grid;grid-template-columns:9rem minmax(0,1fr);
  gap:1.3rem;align-items:center;background:rgba(255,255,255,.06);
  border:1px solid rgba(227,194,137,.2);border-radius:20px;padding:1.1rem}
@media (max-width:520px){.bea__regalo{grid-template-columns:1fr}}
.bea__regalo img{border-radius:14px;width:100%;height:auto}
.bea__regalo b{display:block;font-family:var(--display);font-size:1.55rem;font-weight:400;
  color:var(--sobre-verde);line-height:1.05}
.bea__regalo p{margin-top:.4rem;font-size:.94rem;color:var(--sobre-verde-2);line-height:1.45}

/* ============================================================
   CONTACTO + PIE
   ============================================================ */
.cont{padding:clamp(3.8rem,7.5vw,7rem) var(--marco) clamp(2.6rem,5vw,4rem)}
.cont h2{font-size:clamp(2.4rem,6vw,5.4rem);max-width:min(100%,44rem);color:var(--sobre-verde);text-wrap:balance}
.cont h2 em{font-style:normal;color:var(--oro)}
.cont__rej{margin-top:clamp(2.2rem,4.6vw,3.4rem);display:grid;gap:1.1rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cont__rej{grid-template-columns:1fr}}
.tarjeta{background:rgba(255,255,255,.06);border:1px solid rgba(227,194,137,.2);
  border-radius:22px;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.55rem}
.tarjeta h3{font-family:var(--texto);font-size:.78rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro)}
.tarjeta a,.tarjeta p{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.75rem);
  line-height:1.14;color:var(--sobre-verde);text-decoration:none;letter-spacing:-.01em}
.tarjeta a:hover{color:var(--oro)}
.tarjeta small{font-size:.88rem;color:var(--sobre-verde-2);font-family:var(--texto);line-height:1.45;max-width:34rem}
.cont__cta{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1rem}

.pie{margin:0 var(--marco);padding:1.6rem 0 clamp(2.2rem,4vw,3.2rem);display:flex;
  flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(227,194,137,.16);font-size:.86rem;color:var(--sobre-verde-2)}
.pie nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.pie a{text-decoration:none;display:inline-block;padding:.35rem 0}
.pie a:hover{color:var(--oro)}

/* boton flotante de WhatsApp */
.flota{position:fixed;right:1.1rem;bottom:1.1rem;z-index:35;width:56px;height:56px;
  border-radius:50%;background:var(--oro-vivo);color:#221605;display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);transition:transform .25s ease}
.flota:hover{transform:scale(1.07)}
.flota svg{width:28px;height:28px;fill:currentColor}

/* ============================================================
   PAGINAS LEGALES
   ============================================================ */
.legal{max-width:70ch;margin:0 auto;padding:calc(var(--cab) + 3.4rem) var(--marco) 4rem}
.legal h1{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--verde)}
.legal h2{font-size:1.55rem;margin-top:2.4rem;color:var(--verde)}
.legal p,.legal li{margin-top:.9rem;color:var(--tinta-2)}
.legal ul{list-style:disc;padding-left:1.2rem}
.legal a{color:var(--kraft-texto)}
.legal__volver{display:inline-block;margin-top:2.6rem;font-weight:700;color:var(--kraft-texto)}
.legal-cab{background:var(--verde-hondo)}
.legal__falta{background:rgba(207,166,94,.22);border-left:3px solid var(--oro-vivo);
  padding:.95rem 1.15rem;border-radius:0 12px 12px 0;color:var(--tinta)}
.legal__falta b{color:var(--kraft-texto)}