/* =========================================================
   Silvana Salgaro · Hair Studio
   Paleta tomada del isologo
   ========================================================= */

:root{
  --brown-900:#2B1B0F;
  --brown-800:#3D2817;   /* fondo principal del logo */
  --brown-700:#4A3120;
  --brown-600:#5C3F2A;
  --camel:#B98A5B;       /* dorado / camel del logo */
  --camel-light:#D3AC80;
  --camel-dark:#96693D;
  --cream:#FFF8F0;       /* blanco cálido del script */
  --cream-2:#F5EBE0;
  --sand:#EADBC8;
  --text:#3D2817;
  --text-soft:#6B5443;

  /* componentes RGB para los degradados de transición */
  --cream-rgb:255,248,240;
  --cream2-rgb:245,235,224;

  --ff-script:'Parisienne', cursive;
  --ff-serif:'Cormorant Garamond', Georgia, serif;
  --ff-sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff-sans);
  font-weight:300;
  color:var(--text);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-family:var(--ff-serif);font-weight:400;line-height:1.15;}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
.center{text-align:center;}

/* =========================================================
   TRANSICIONES ENTRE BLOQUES
   El bloque oscuro se disuelve hacia el claro en vez de
   cortar con una línea dura. Las paradas intermedias imitan
   una curva de easing para que no se vean bandas.
   ========================================================= */
.fade-b,.fade-t{position:relative;--fade-rgb:var(--cream-rgb);}
.fade--tint{--fade-rgb:var(--cream2-rgb);}

.fade-b::after,
.fade-t::before{
  content:"";position:absolute;left:0;right:0;
  height:var(--fade-h,200px);
  pointer-events:none;z-index:1;
}
/* se disuelve hacia abajo */
.fade-b::after{
  bottom:0;
  background:linear-gradient(to bottom,
    rgba(var(--fade-rgb),0)    0%,
    rgba(var(--fade-rgb),.015) 12%,
    rgba(var(--fade-rgb),.045) 24%,
    rgba(var(--fade-rgb),.10)  36%,
    rgba(var(--fade-rgb),.19)  47%,
    rgba(var(--fade-rgb),.31)  57%,
    rgba(var(--fade-rgb),.45)  66%,
    rgba(var(--fade-rgb),.60)  74%,
    rgba(var(--fade-rgb),.74)  81%,
    rgba(var(--fade-rgb),.86)  88%,
    rgba(var(--fade-rgb),.95)  95%,
    rgba(var(--fade-rgb),1)   100%);
}
/* emerge desde arriba */
.fade-t::before{
  top:0;
  background:linear-gradient(to top,
    rgba(var(--fade-rgb),0)    0%,
    rgba(var(--fade-rgb),.015) 12%,
    rgba(var(--fade-rgb),.045) 24%,
    rgba(var(--fade-rgb),.10)  36%,
    rgba(var(--fade-rgb),.19)  47%,
    rgba(var(--fade-rgb),.31)  57%,
    rgba(var(--fade-rgb),.45)  66%,
    rgba(var(--fade-rgb),.60)  74%,
    rgba(var(--fade-rgb),.74)  81%,
    rgba(var(--fade-rgb),.86)  88%,
    rgba(var(--fade-rgb),.95)  95%,
    rgba(var(--fade-rgb),1)   100%);
}
/* el contenido siempre por encima del degradado */
.fade-t > *{position:relative;z-index:2;}

/* ---------- Monograma ---------- */
.mono-disc{fill:var(--camel);}
.mono-letter{
  font-family:var(--ff-serif);
  font-weight:600;
  font-size:62px;
  fill:var(--brown-800);
  text-anchor:middle;
  dominant-baseline:central;
}
.monogram--sm{width:38px;height:38px;}
.monogram--md{width:64px;height:64px;}
.monogram--lg{width:104px;height:104px;}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--ff-sans);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:15px 34px;
  border:1px solid var(--camel);
  border-radius:2px;
  cursor:pointer;
  transition:all .35s var(--ease);
}
.btn--solid{background:var(--camel);color:var(--brown-900);}
.btn--solid:hover{background:var(--camel-dark);border-color:var(--camel-dark);color:var(--cream);}
.btn--ghost{background:transparent;color:var(--cream);}
.btn--ghost:hover{background:rgba(255,248,240,.12);}
.btn--outline{background:transparent;color:var(--brown-800);}
.btn--outline:hover{background:var(--camel);color:var(--brown-900);}
.btn--sm{padding:10px 22px;font-size:.7rem;}
.btn--block{width:100%;border:none;}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  padding:18px 24px;
  transition:padding .4s var(--ease);
}
/* la barra es una "burbuja" flotante */
.nav__inner{
  max-width:var(--max);margin:0 auto;
  padding:9px 10px 9px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(61,40,23,.78);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(185,138,91,.28);
  border-radius:999px;
  box-shadow:0 10px 34px rgba(43,27,15,.30);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck{padding:12px 24px;}
.nav.is-stuck .nav__inner,
.nav--solid .nav__inner{
  background:rgba(43,27,15,.92);
  border-color:rgba(185,138,91,.42);
  box-shadow:0 12px 40px rgba(43,27,15,.45);
}
.nav__brand{display:flex;align-items:center;gap:12px;padding-right:8px;}
.nav__name{
  font-family:var(--ff-script);
  font-size:1.5rem;
  color:var(--cream);
  line-height:1;
  padding-top:6px;
}
.nav__links{display:flex;align-items:center;gap:6px;position:relative;}

/* burbuja deslizante que sigue al cursor */
.nav__pill{
  position:absolute;top:0;left:0;
  border-radius:999px;
  background:rgba(185,138,91,.20);
  border:1px solid rgba(185,138,91,.45);
  pointer-events:none;z-index:0;opacity:0;
  transform:translate3d(0,0,0);
  transition:transform .45s var(--ease), width .45s var(--ease),
             height .45s var(--ease), opacity .3s var(--ease);
}
.nav__pill.is-ready{opacity:1;}
.nav__links.is-hovering .nav__pill{background:rgba(255,248,240,.13);}

.nav__links a{
  position:relative;z-index:1;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);opacity:.85;
  padding:10px 18px;border-radius:999px;
  border:1px solid transparent;
  transition:color .3s var(--ease), opacity .3s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease);
}
.nav__links a:not(.btn):hover{opacity:1;color:var(--camel-light);}
.nav__links a.is-active{opacity:1;color:var(--camel-light);}

/* fallback si el JS no corre: la activa igual se marca */
.no-pill .nav__links a.is-active{
  background:rgba(185,138,91,.18);
  border-color:rgba(185,138,91,.45);
}
.no-pill .nav__links a:not(.btn):hover{
  background:rgba(255,248,240,.10);
  border-color:rgba(185,138,91,.30);
}
.nav__cta{color:var(--brown-900)!important;opacity:1;margin-left:6px;}
.nav .btn{border-radius:999px;}
/* página de turnos: el botón queda marcado como actual */
.nav__cta.is-current{
  background:var(--camel-dark);color:var(--cream)!important;
  box-shadow:0 0 0 3px rgba(185,138,91,.28);
}

.nav__burger{
  display:none;cursor:pointer;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,248,240,.08);
  border:1px solid rgba(185,138,91,.35);
  padding:0;
  align-items:center;justify-content:center;flex-direction:column;
  transition:background .3s var(--ease);
  z-index:101;
}
.nav__burger:hover{background:rgba(255,248,240,.16);}
.nav__burger span{
  display:block;width:20px;height:2px;background:var(--cream);margin:3px 0;
  border-radius:2px;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav__burger.is-open span:nth-child(2){opacity:0;}
.nav__burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* =========================================================
   HERO PORTADA (index)
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  background:var(--brown-800);
  padding:130px 24px 500px;
  --fade-h:700px;
}
.hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(185,138,91,.30), transparent 62%),
    radial-gradient(circle at 12% 88%, rgba(185,138,91,.16), transparent 45%),
    linear-gradient(160deg,#4A3120 0%, #3D2817 45%, #2B1B0F 100%);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,248,240,.05) 1px, transparent 1px);
  background-size:26px 26px;opacity:.5;
}
.hero__content{position:relative;z-index:2;max-width:720px;}
.hero__content .monogram{margin:0 auto 26px;animation:fadeUp .9s var(--ease) both;}
.hero__title{
  font-family:var(--ff-script);
  font-size:clamp(3.2rem,10vw,6.4rem);
  color:var(--cream);line-height:1.05;
  animation:fadeUp .9s .1s var(--ease) both;
}
.hero__sub{
  font-family:var(--ff-serif);
  font-size:clamp(1rem,2.4vw,1.5rem);
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--camel);margin:6px 0 28px;
  animation:fadeUp .9s .2s var(--ease) both;
}
.hero__tag{
  color:rgba(255,248,240,.82);font-size:1.02rem;max-width:480px;margin:0 auto 40px;
  /* reparte las líneas de forma pareja en vez de dejar una huérfana */
  text-wrap:balance;
  animation:fadeUp .9s .3s var(--ease) both;
}
.hero__actions{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  animation:fadeUp .9s .4s var(--ease) both;
}
/* ---- "Deslizá" con flecha parpadeante ---- */
.hero__hint{
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:56px;
  animation:fadeUp .9s .55s var(--ease) both;
}
.hero__hint-txt{
  font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--camel);
  transition:color .3s var(--ease);
}
.hero__hint-arrow{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(185,138,91,.45);
  animation:blink 1.9s ease-in-out infinite;
}
.hero__hint-arrow svg{width:15px;height:15px;fill:var(--camel);}
.hero__hint:hover .hero__hint-txt{color:var(--camel-light);}
.hero__hint:hover .hero__hint-arrow{
  border-color:var(--camel);
  animation-play-state:paused;opacity:1;
}
@keyframes blink{
  0%,100%{opacity:.25;transform:translateY(0);}
  50%    {opacity:1;  transform:translateY(6px);}
}

.hero__scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;}
/* queda sobre la zona ya aclarada, así que va en tono oscuro */
.hero__scroll span{
  display:block;width:1px;height:54px;
  background:linear-gradient(var(--camel-dark),transparent);
  animation:pulse 2.2s infinite;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes pulse{0%,100%{opacity:.3;}50%{opacity:1;}}

/* =========================================================
   HERO INTERNO (páginas secundarias)
   ========================================================= */
.pagehero{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(185,138,91,.28), transparent 65%),
    linear-gradient(160deg,#4A3120,#2B1B0F);
  padding:180px 24px 340px;text-align:center;overflow:hidden;
  --fade-h:440px;
}
.pagehero__inner{position:relative;z-index:2;}
.pagehero__eyebrow{
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--camel);margin:0 0 12px;
}
.pagehero__title{
  font-size:clamp(2.4rem,6vw,4rem);color:var(--cream);
}
.pagehero__lead{
  color:rgba(255,248,240,.78);max-width:600px;margin:18px auto 0;
}

/* =========================================================
   STRIP
   ========================================================= */
/* El bloque ocupa todo el ancho (necesita el fondo y el degradado
   completos), pero las cuatro columnas van con ancho fijo y centradas:
   con 1fr cada una medía un cuarto de la pantalla y quedaban sueltas. */
.strip{
  background:var(--brown-900);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,215px));
  justify-content:center;align-items:stretch;
  gap:16px;padding:34px 24px;
}
/* cuando cierra la página, emerge desde la sección clara */
.strip.fade-t{--fade-h:430px;padding:450px 24px 44px;}

/* cada dato es su propio cuadrito */
.strip__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;
  padding:24px 14px;
  background:rgba(255,248,240,.045);
  border:1px solid rgba(185,138,91,.26);
  border-radius:5px;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.strip__item:hover{
  background:rgba(255,248,240,.08);
  border-color:rgba(185,138,91,.5);
  transform:translateY(-3px);
}
.strip__num{
  font-family:var(--ff-serif);font-size:1.85rem;color:var(--camel);line-height:1;
}
.strip__txt{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,248,240,.72);line-height:1.5;
}
/* los separadores ya no hacen falta: los cuadritos separan solos */
.strip__divider{display:none;}

/* =========================================================
   SECCIONES
   ========================================================= */
.section{padding:110px 0;}
.section--tint{background:var(--cream-2);}
/* crema claro -> crema tostado. Son tonos muy parecidos, así que el
   corte recto se ve como una línea: se disuelve igual que los oscuros. */
.section--tint.fade-t{--fade-h:240px;}
.section--dark{background:var(--brown-800);--fade-h:440px;}
.section--dark.fade-t{padding-top:460px;}
.eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--camel-dark);text-align:center;margin:0 0 12px;
}
.section__title{
  font-size:clamp(2.1rem,5vw,3.2rem);
  text-align:center;color:var(--brown-800);margin-bottom:18px;
}
.section__lead{text-align:center;max-width:640px;margin:0 auto 56px;color:var(--text-soft);}
.section--dark .eyebrow{color:var(--camel);}
.section--dark .section__title{color:var(--cream);}
.section--dark .section__lead{color:rgba(255,248,240,.72);}

.text-left .eyebrow,
.text-left .section__title,
.text-left .section__lead{text-align:left;margin-left:0;}

/* =========================================================
   TARJETAS DE SERVICIO (imagen + título + descripción)
   ========================================================= */
/* dos columnas: 2 arriba y 2 abajo */
.services{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:940px;margin:0 auto;
}

.svc{
  display:flex;flex-direction:column;
  background:var(--cream);
  border:1px solid rgba(185,138,91,.26);
  border-radius:3px;overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.svc:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 48px rgba(61,40,23,.16);
  border-color:var(--camel);
}
.svc__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--brown-700);}
.svc__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.svc:hover .svc__media img{transform:scale(1.06);}
.svc__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(43,27,15,.45), transparent 55%);
  pointer-events:none;
}
.svc__tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--camel);color:var(--brown-900);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 12px;border-radius:2px;
}
.svc__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;}
.svc__title{font-size:1.5rem;color:var(--brown-800);margin-bottom:10px;}
.svc__title::after{
  content:"";display:block;width:38px;height:1px;background:var(--camel);margin-top:12px;
}
.svc__price{
  margin:14px 0 0;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--camel-dark);
}
.svc__price strong{
  font-family:var(--ff-serif);font-weight:500;
  font-size:1.32rem;letter-spacing:.01em;
  color:var(--brown-800);margin-left:4px;
}
.section--dark .svc__price{color:var(--camel-light);}
.section--dark .svc__price strong{color:var(--cream);}
.svc__desc{color:var(--text-soft);font-size:.95rem;margin:12px 0 0;flex:1;}
.svc__link{
  margin-top:20px;align-self:flex-start;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--camel-dark);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease), color .3s var(--ease);
}
.svc__link:hover{border-color:var(--camel);color:var(--brown-800);}

/* variante sobre fondo oscuro */
.section--dark .svc{background:rgba(255,248,240,.04);border-color:rgba(185,138,91,.3);}
.section--dark .svc__title{color:var(--cream);}
.section--dark .svc__desc{color:rgba(255,248,240,.72);}
.section--dark .svc__link{color:var(--camel-light);}

.services__cta{margin-top:56px;text-align:center;}

/* =========================================================
   ABOUT / SPLIT
   ========================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.split--reverse .split__media{order:2;}
.split__media{position:relative;}
.split__media img{border-radius:3px;position:relative;z-index:2;aspect-ratio:4/5;object-fit:cover;}
.split__accent{
  position:absolute;inset:26px -26px -26px 26px;
  border:1px solid var(--camel);border-radius:3px;z-index:1;
}
.split__text p{color:var(--text-soft);margin:0 0 18px;}
.section--dark .split__text p{color:rgba(255,248,240,.75);}
.points{margin-top:28px;}
.points li{position:relative;padding-left:26px;margin-bottom:12px;font-size:.96rem;}
.points li::before{content:"✦";position:absolute;left:0;top:-1px;color:var(--camel);}
.section--dark .points li{color:rgba(255,248,240,.85);}

/* =========================================================
   GALERÍA
   ========================================================= */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;}
.gallery__item{
  margin:0;position:relative;border-radius:3px;overflow:hidden;
  display:flex;align-items:flex-end;
}
.gallery__item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s var(--ease);}
.gallery__item:hover img{transform:scale(1.05);}
.gallery__item::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top, rgba(43,27,15,.8) 0%, rgba(43,27,15,.05) 55%);
}
.gallery__item figcaption{
  position:absolute;left:0;bottom:0;z-index:2;padding:18px 20px;
  color:var(--cream);font-family:var(--ff-serif);font-size:1.15rem;
}

/* =========================================================
   TESTIMONIOS
   ========================================================= */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:50px;}
.quote{
  margin:0;padding:34px 28px;
  border:1px solid rgba(185,138,91,.35);border-radius:3px;
  background:rgba(255,248,240,.03);
}
.quote p{
  font-family:var(--ff-serif);font-size:1.16rem;font-style:italic;
  color:rgba(255,248,240,.9);margin:0 0 18px;line-height:1.6;
}
.quote cite{
  font-style:normal;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--camel);
}

/* =========================================================
   MODAL "MÁS INFO"
   ========================================================= */
.svc__actions{
  margin-top:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.svc__more{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 22px;border-radius:999px;
  background:transparent;border:1px solid var(--camel);color:var(--brown-800);
  font-family:var(--ff-sans);cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.svc__more:hover{background:var(--camel);color:var(--brown-900);}
.section--dark .svc__more{color:var(--cream);}
.section--dark .svc__more:hover{color:var(--brown-900);}

.modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  visibility:hidden;opacity:0;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal.is-open{visibility:visible;opacity:1;}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(27,16,8,.75);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  cursor:pointer;
}
.modal__dialog{
  position:relative;z-index:1;
  display:grid;grid-template-columns:.9fr 1.1fr;
  width:min(980px,100%);max-height:88vh;
  background:var(--cream);border-radius:6px;overflow:hidden;
  box-shadow:0 40px 90px rgba(27,16,8,.55);
  transform:translateY(24px) scale(.97);
  transition:transform .4s var(--ease);
}
.modal.is-open .modal__dialog{transform:none;}
.modal__media{margin:0;background:var(--brown-700);}
.modal__media img{width:100%;height:100%;object-fit:cover;}
.modal__body{padding:44px 42px;overflow-y:auto;}
.modal__eyebrow{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--camel-dark);margin:0 0 10px;
}
.modal__title{font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--brown-800);margin-bottom:16px;}
.modal__price{
  margin:0 0 22px;padding-bottom:20px;
  border-bottom:1px solid rgba(185,138,91,.3);
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--camel-dark);
}
.modal__price strong{
  font-family:var(--ff-serif);font-weight:500;
  font-size:1.9rem;letter-spacing:.01em;
  color:var(--brown-800);margin-left:6px;
}
.modal__price-note{
  display:block;margin-top:6px;
  font-size:.72rem;letter-spacing:.04em;text-transform:none;
  color:var(--text-soft);font-style:italic;
}
.modal__intro{color:var(--text-soft);margin:0 0 26px;font-size:.98rem;}
.modal__sub{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brown-800);font-family:var(--ff-sans);font-weight:400;
  margin-bottom:14px;
}
.modal__list{margin:0 0 28px;}
.modal__list li{font-size:.94rem;color:var(--text-soft);margin-bottom:9px;}
.modal__meta{
  margin:0 0 30px;padding:22px 24px;
  background:var(--cream-2);border-left:3px solid var(--camel);border-radius:2px;
  display:grid;grid-template-columns:auto 1fr;gap:10px 20px;
}
.modal__meta dt{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--camel-dark);padding-top:3px;
}
.modal__meta dd{margin:0;font-size:.93rem;color:var(--text);}
.modal__close{
  position:absolute;top:14px;right:16px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  background:rgba(43,27,15,.55);color:var(--cream);
  border:1px solid rgba(255,248,240,.28);
  font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.modal__close:hover{background:var(--brown-900);transform:rotate(90deg);}

/* =========================================================
   PASOS (turnos)
   ========================================================= */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;}
.step{
  background:var(--cream);border:1px solid rgba(185,138,91,.26);
  border-radius:3px;padding:34px 28px;position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(61,40,23,.12);}
.step__num{
  font-family:var(--ff-serif);font-size:2.4rem;color:var(--camel);
  display:block;line-height:1;margin-bottom:14px;
}
.step h3{font-size:1.3rem;color:var(--brown-800);margin-bottom:10px;}
.step p{margin:0;color:var(--text-soft);font-size:.94rem;}

/* =========================================================
   CANALES (contacto)
   ========================================================= */
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.channel{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--cream);border:1px solid rgba(185,138,91,.26);
  border-radius:3px;padding:34px 28px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.channel:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(61,40,23,.14);
  border-color:var(--camel);
}
.channel__icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--sand);color:var(--brown-800);
  display:grid;place-items:center;margin-bottom:18px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.channel__icon svg{width:24px;height:24px;fill:currentColor;}
.channel:hover .channel__icon{background:var(--camel);color:var(--cream);}
.channel h3{font-size:1.35rem;color:var(--brown-800);margin-bottom:8px;}
.channel p{margin:0 0 16px;color:var(--text-soft);font-size:.93rem;}
.channel__value{
  margin-top:auto;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--camel-dark);
}

/* =========================================================
   BOOKING (turnos)
   ========================================================= */
.booking{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.note{
  background:var(--cream-2);border-left:3px solid var(--camel);
  padding:24px 26px;border-radius:2px;margin-top:24px;
}
.note h3{font-size:1.2rem;color:var(--brown-800);margin-bottom:12px;}
.note p{margin:0 0 18px;color:var(--text-soft);font-size:.94rem;}
.note .points{margin-top:0;}
.note .points li{font-size:.92rem;color:var(--text-soft);margin-bottom:10px;}
.note--wa{border-left-color:var(--camel-dark);}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;}
.contact__info > p{color:var(--text-soft);}
.contact__data{margin:34px 0;}
.contact__data li{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 0;border-bottom:1px solid rgba(185,138,91,.25);
}
.contact__label{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--camel-dark);}
.contact__value{font-size:1.02rem;color:var(--brown-800);transition:color .25s var(--ease);}
a.contact__value:hover{color:var(--camel-dark);}

/* ---------- Tarjeta de horarios ---------- */
.hours{
  background:var(--cream);
  border:1px solid rgba(185,138,91,.32);
  border-radius:4px;
  padding:0;overflow:hidden;
  box-shadow:0 10px 30px rgba(61,40,23,.07);
}
.hours__head{
  position:relative;
  background:linear-gradient(150deg,var(--brown-700),var(--brown-900));
  padding:22px 26px 20px;
}
.hours__head::after{
  content:"";position:absolute;left:26px;right:26px;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--camel),transparent);
}
.hours__eyebrow{
  display:block;
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--camel);margin-bottom:6px;
}
.hours h3{
  font-size:1.45rem;color:var(--cream);margin:0;
}
.hours__status{
  position:absolute;top:22px;right:24px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,248,240,.22);
  color:rgba(255,248,240,.8);
}
.hours__status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;
}
.hours__status.is-open{
  color:#8FD3A4;border-color:rgba(143,211,164,.45);
  background:rgba(143,211,164,.10);
}
.hours__status.is-open::before{animation:pulseDot 2s ease-in-out infinite;}
.hours__status.is-closed{color:rgba(255,248,240,.65);}
@keyframes pulseDot{0%,100%{opacity:.35;}50%{opacity:1;}}

.hours__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:15px 26px;
  font-size:.95rem;color:var(--text-soft);
  border-bottom:1px solid rgba(185,138,91,.16);
}
.hours__day{position:relative;}
.hours__time{
  font-family:var(--ff-serif);font-size:1.08rem;
  color:var(--brown-800);white-space:nowrap;
}
.hours__row--off{color:var(--camel-dark);}
.hours__row--off .hours__time{
  font-family:var(--ff-sans);font-size:.85rem;font-style:italic;
  letter-spacing:.06em;color:var(--camel-dark);
}
/* el día de hoy queda resaltado */
.hours__row.is-today{
  background:rgba(185,138,91,.10);
  box-shadow:inset 3px 0 0 var(--camel);
}
.hours__row.is-today .hours__day{color:var(--brown-800);font-weight:400;}
.hours__row.is-today .hours__day::after{
  content:"Hoy";
  margin-left:9px;padding:2px 8px;border-radius:999px;
  background:var(--camel);color:var(--brown-900);
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  vertical-align:middle;
}
.hours__foot{
  margin:0;padding:14px 26px 16px;
  font-size:.76rem;color:var(--text-soft);font-style:italic;
  background:var(--cream-2);
}

.map{
  margin-top:34px;border-radius:3px;overflow:hidden;
  border:1px solid rgba(185,138,91,.3);
  aspect-ratio:16/9;background:var(--cream-2);
}
.map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.85);}
.map__link{margin:12px 0 0;text-align:right;}
.map__link a{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--camel-dark);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.map__link a:hover{border-color:var(--camel);}

.form{
  background:var(--brown-800);border-radius:3px;padding:40px 34px;
  box-shadow:0 24px 60px rgba(61,40,23,.22);
}
.form__title{font-size:1.6rem;color:var(--cream);margin-bottom:24px;text-align:center;}
.field{display:block;margin-bottom:18px;}
.field > span{
  display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--camel-light);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;
  background:rgba(255,248,240,.06);
  border:1px solid rgba(185,138,91,.4);border-radius:2px;
  color:var(--cream);
  font-family:var(--ff-sans);font-size:.95rem;font-weight:300;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,248,240,.4);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--camel);background:rgba(255,248,240,.1);
}
.field select option{background:var(--brown-800);color:var(--cream);}
.field.is-invalid input,.field.is-invalid select{border-color:#E08A6B;}
.form__hint{text-align:center;font-size:.75rem;color:rgba(255,248,240,.55);margin:14px 0 0;}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta{
  background:linear-gradient(150deg,var(--brown-700),var(--brown-900));
  padding:520px 24px 110px;text-align:center;
  --fade-h:500px;
}
.cta h2{font-size:clamp(1.9rem,4.6vw,2.9rem);color:var(--cream);margin-bottom:14px;}
.cta p{color:rgba(255,248,240,.75);max-width:520px;margin:0 auto 32px;}

/* =========================================================
   FAQ
   ========================================================= */
.faq{max-width:780px;margin:0 auto;}
.faq__item{border-bottom:1px solid rgba(185,138,91,.3);}
.faq__item summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--ff-serif);font-size:1.25rem;color:var(--brown-800);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--camel);font-size:1.5rem;transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq__item p{margin:0 0 22px;color:var(--text-soft);font-size:.96rem;}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--brown-900);padding:34px 0 34px;text-align:center;}
.footer__brand .monogram{margin:0 auto 14px;}
.footer__name{font-family:var(--ff-script);font-size:2.1rem;color:var(--cream);margin:0;line-height:1.1;}
.footer__sub{
  font-family:var(--ff-serif);font-size:.85rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--camel);margin:4px 0 0;
}
.footer__links{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;margin:30px 0 26px;}
.footer__links a{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,248,240,.75);
  transition:color .25s var(--ease);
}
.footer__links a:hover{color:var(--camel);}
.footer__copy{
  font-size:.75rem;color:rgba(255,248,240,.45);
  border-top:1px solid rgba(185,138,91,.2);padding-top:24px;margin:0;
}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:var(--camel);color:var(--brown-900);
  display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(43,27,15,.35);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
.wa:hover{transform:scale(1.08);background:var(--camel-light);}
.wa svg{width:30px;height:30px;fill:currentColor;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .split,.contact,.booking{grid-template-columns:1fr;gap:48px;}
  .modal{padding:14px;}
  .modal__dialog{grid-template-columns:1fr;max-height:92vh;overflow-y:auto;}
  .modal__media{max-height:230px;}
  .modal__body{padding:32px 26px;overflow:visible;}
  .split--reverse .split__media{order:0;}
  .split__accent{display:none;}
  .section{padding:80px 0;}
  /* degradados proporcionalmente más cortos en pantallas chicas */
  .pagehero{padding:150px 24px 230px;--fade-h:290px;}
  .hero{--fade-h:420px;padding-bottom:300px;}
  .cta{--fade-h:320px;padding-top:330px;}
  .section--dark{--fade-h:300px;}
  .section--dark.fade-t{padding-top:310px;}
  .section--tint.fade-t{--fade-h:160px;}
  .strip.fade-t{--fade-h:290px;padding-top:300px;}
}

@media (max-width:900px){
  .nav__burger{display:flex;z-index:130;}
  /* IMPORTANTE: backdrop-filter convierte a .nav__inner en bloque
     contenedor de sus hijos position:fixed, y eso rompía el menú
     desplegable. En mobile va fondo sólido y sin blur. */
  .nav__inner{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:var(--brown-800);
    padding:8px 8px 8px 16px;
  }
  .nav.is-stuck .nav__inner,
  .nav--solid .nav__inner{background:var(--brown-900);}

  .nav__links{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(78vw,300px);
    background:var(--brown-900);
    border:0;border-left:1px solid rgba(185,138,91,.3);
    border-radius:0;
    flex-direction:column;align-items:stretch;justify-content:center;
    gap:8px;padding:80px 20px 40px;
    transform:translateX(100%);
    transition:transform .38s var(--ease);
    box-shadow:-12px 0 46px rgba(20,12,6,.55);
    overflow-y:auto;
    z-index:120;
  }
  .nav__links.is-open{transform:none;}
  .nav__links a{font-size:.92rem;text-align:center;padding:15px 18px;}
  /* en mobile la burbuja deslizante se apaga y vuelve el marcado fijo */
  .nav__pill{display:none;}
  .nav__links a.is-active{
    background:rgba(185,138,91,.18);
    border-color:rgba(185,138,91,.45);
  }
  .nav__cta{margin:10px 0 0;}
  .nav{padding:14px 16px;}

  /* capa oscura detrás del menú: se toca afuera y se cierra */
  .nav__scrim{
    position:fixed;inset:0;z-index:95;
    background:rgba(20,12,6,.6);
    opacity:0;visibility:hidden;
    transition:opacity .38s var(--ease), visibility .38s var(--ease);
  }
  .nav__scrim.is-open{opacity:1;visibility:visible;}
  /* cuadritos de a dos por fila, ocupando el ancho disponible */
  .strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-content:stretch;
    gap:12px;padding-left:18px;padding-right:18px;
  }
  .strip.fade-t{padding-left:18px;padding-right:18px;}
  .strip.fade-t > .strip__item{max-width:none;}
  .strip__item{padding:20px 10px;gap:6px;}
  .strip__num{font-size:1.6rem;}
  .strip__txt{font-size:.62rem;letter-spacing:.12em;}
}

@media (max-width:480px){
  .container{padding:0 18px;}
  .svc__body{padding:22px 20px 26px;}
  .form{padding:30px 22px;}
  .field-row{grid-template-columns:1fr;gap:0;}
  .hero{padding-top:110px;}
}

/* =========================================================
   TARJETAS COMPACTAS EN CELULAR
   Dos por fila: todo se achica para que entre el título,
   el precio, la descripción recortada y los dos botones.
   ========================================================= */
@media (max-width:700px){
  .services{grid-template-columns:1fr 1fr;gap:14px;max-width:none;}
  .svc__media{aspect-ratio:1/1;}
  .svc__body{padding:14px 12px 16px;}
  .svc__title{font-size:1rem;line-height:1.25;}
  .svc__title::after{width:24px;margin-top:8px;}
  .svc__price{margin-top:9px;font-size:.58rem;letter-spacing:.1em;}
  .svc__price strong{font-size:.95rem;margin-left:3px;}
  .svc__desc{
    font-size:.78rem;line-height:1.5;margin-top:9px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .svc__actions{
    margin-top:13px;gap:9px;
    flex-direction:column;align-items:stretch;
  }
  .svc__more{padding:9px 8px;font-size:.58rem;letter-spacing:.1em;}
  .svc__link{font-size:.58rem;letter-spacing:.1em;text-align:center;align-self:center;}
  .svc__tag{top:8px;left:8px;padding:4px 8px;font-size:.52rem;letter-spacing:.12em;}
  .services__cta{margin-top:36px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}