:root{
  /* ---- color ---- */
  --paper:#FAF8F4;
  --bone:#EFE9E0;
  --ink:#14120F;
  --body:#3B3730;
  --olive:#4A5A3C;
  --olive-lt:#71825F;   /* 4.51:1 sobre ink: pasa AA para los indices de pasos */
  --grey:#8C8577;        /* SOLO decorativo o texto >=24px. 3.45:1, no pasa AA en cuerpo */
  --grey-text:#635D50;   /* texto pequeno. 6.2:1 sobre paper puro, 4.9:1 sobre el punto
                            mas oscuro de los orbes. Ese margen extra es lo que permite
                            subir la intensidad del fondo sin perder AA */
  --rule:#DDD6C9;

  /* ---- tipografia ---- */
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Inter Tight",system-ui,-apple-system,sans-serif;
  --fs-h1:clamp(54px,12vw,168px);
  --fs-h2:clamp(40px,6.6vw,96px);
  --fs-h3:clamp(26px,calc(2.2vw + 18px),40px);
  --fs-pull:clamp(30px,3.8vw,54px);
  --fs-quote:clamp(20px,calc(1.5vw + 14px),27px);
  --fs-lead:clamp(18px,calc(1vw + 14px),22px);
  --fs-body:clamp(17px,calc(.5vw + 15px),19px);
  --fs-small:clamp(14px,calc(.3vw + 13px),15px);
  --fs-caption:12px;
  --fs-nav:15px;
  --fs-btn:15px;
  --fs-svc:clamp(16px,calc(.3vw + 15px),17px);
  --fs-price:clamp(15px,calc(.3vw + 14px),16px);

  /* ---- movimiento: seis tokens, nada mas ---- */
  --ease-out:cubic-bezier(.22,.61,.21,1);
  --ease-swift:cubic-bezier(.6,0,.2,1);
  --ease-inout:cubic-bezier(.65,.05,.36,1);
  --t-fast:220ms;
  --t-med:480ms;
  --t-slow:900ms;

  /* ---- forma ---- */
  --r-card:clamp(14px,1.2vw,18px);
  --pad:clamp(20px,5vw,72px);
  --maxw:1440px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-weight:400;font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;isolation:isolate;
}
/* height:auto NO es decorativo: sin el, `aspect-ratio` no logra sobrescribir la
   altura intrinseca de un elemento reemplazado y la imagen se estira. */
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--olive);outline-offset:4px}
.prenota :focus-visible{outline-color:var(--bone)}
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.skip{
  position:fixed;top:12px;left:12px;z-index:10001;padding:11px 16px;
  background:var(--ink);color:var(--paper);border-radius:999px;
  transform:translateY(-180%);transition:transform var(--t-fast) var(--ease-out);
}
.skip:focus{transform:none}

/* grano: la textura "viva" del sistema. Papel impreso, no pantalla. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- capa aria: profundidad de fondo ----------
   Tres orbes de gradiente radial. CERO filter:blur() — el desenfoque sale del
   falloff del gradiente, que es gratis; blur sobre superficies grandes es lo
   mas caro de pintar en movil. Solo transform, cero paint tras el primer frame.

   Intensidad calibrada al MAXIMO que permite WCAG AA: con --grey-text en #635D50,
   el punto mas oscuro del orbe deja el texto pequeno en 4.9:1. Subir mas obliga
   a oscurecer otra vez el texto, y ahi se pierde el aire de la direccion. */
.aria{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aria i{position:absolute;border-radius:50%;will-change:transform}
.aria .o1{
  width:min(88vw,1150px);aspect-ratio:1;top:-24%;right:-16%;
  background:radial-gradient(closest-side,rgba(74,90,60,.16),rgba(74,90,60,.05) 55%,rgba(74,90,60,0) 78%);
  animation:drift1 52s var(--ease-inout) infinite alternate;
}
.aria .o2{
  width:min(76vw,980px);aspect-ratio:1;bottom:-20%;left:-14%;
  background:radial-gradient(closest-side,rgba(140,133,119,.15),rgba(140,133,119,.05) 55%,rgba(140,133,119,0) 78%);
  animation:drift2 67s var(--ease-inout) infinite alternate;
}
/* tercer orbe: rompe la simetria de dos y llena el centro-derecha del scroll medio */
.aria .o3{
  width:min(62vw,820px);aspect-ratio:1;top:42%;right:8%;
  background:radial-gradient(closest-side,rgba(214,196,168,.20),rgba(214,196,168,.06) 55%,rgba(214,196,168,0) 78%);
  animation:drift3 79s var(--ease-inout) infinite alternate;
}
/* ---------- polvo suspendido ----------
   Particulas, pero rompiendo a proposito los delatores de particles.js:
   sin lineas conectoras, sin reaccion al mouse, densidad baja, tamanos
   irregulares y deriva lenta hacia arriba. La referencia es el polvo que se ve
   en un haz de luz de ventana, no un campo de estrellas.
   Solo transform y opacity: compositor puro, cero paint por frame.
   Las genera site.js; sin JS no aparecen, y eso esta bien. */
.dust{position:absolute;inset:0;overflow:hidden}
.dust b{
  position:absolute;display:block;border-radius:50%;
  background:var(--olive);will-change:transform,opacity;
  animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes rise{
  0%   {transform:translate3d(0,108vh,0) scale(.85);opacity:0}
  10%  {opacity:var(--o)}
  88%  {opacity:var(--o)}
  100% {transform:translate3d(var(--dx),-8vh,0) scale(1.15);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .dust{display:none} }

/* 52, 67 y 79 son primos entre si: el patron combinado no se repite nunca */
@keyframes drift1{to{transform:translate(-9%,12%) scale(1.16)}}
@keyframes drift2{to{transform:translate(11%,-10%) scale(1.12)}}
@keyframes drift3{to{transform:translate(-13%,-8%) scale(1.18)}}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);position:relative}

/* ---------- tipografia editorial ---------- */
.eyebrow{font-size:var(--fs-caption);letter-spacing:.22em;text-transform:uppercase;color:var(--grey-text)}
.folio{display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--rule);padding-top:14px;margin-bottom:clamp(32px,5vw,64px)}
.folio .num{font-family:var(--serif);font-size:14px;color:var(--olive);letter-spacing:.08em}
.folio .lbl{font-size:var(--fs-caption);letter-spacing:.22em;text-transform:uppercase;color:var(--grey-text)}
.folio .rule{flex:1;height:1px;background:var(--rule);transform:translateY(-4px)}
/* el filete que se traza: el gesto mas editorial disponible, cuesta una linea */
.js .folio .rule{transform:translateY(-4px) scaleX(0);transform-origin:left;transition:transform 1200ms var(--ease-inout)}
.js .folio.in .rule{transform:translateY(-4px) scaleX(1)}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.94;letter-spacing:-.02em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.05}
.it{font-style:italic;color:var(--olive)}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;
  transition:background var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
header.solid{background:rgba(250,248,244,.88);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
header .bar{max-width:var(--maxw);margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}
.mark{font-family:var(--serif);font-size:clamp(32px,2.6vw,40px);letter-spacing:-.01em;line-height:1}
.mark span{color:var(--olive)}
nav.links{display:flex;gap:30px;font-size:var(--fs-nav);font-weight:500;letter-spacing:.01em}
nav.links a{position:relative;padding-bottom:2px;color:var(--ink);opacity:.8;transition:opacity var(--t-fast) var(--ease-swift)}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--olive);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-fast) var(--ease-swift)}
nav.links a:hover{opacity:1}
nav.links a:hover::after{transform:scaleX(1);transform-origin:left}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);
  padding:15px 30px;border-radius:999px;font-size:var(--fs-btn);font-weight:500;letter-spacing:.01em;
  border:1px solid var(--ink);cursor:pointer;
  transition:background var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;background:none;border:0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}

/* ---------- hero ---------- */
.hero{padding-top:clamp(118px,17vh,190px);padding-bottom:clamp(40px,7vw,90px)}
.hero h1{margin:20px 0 0}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block}
/* "il titolo si stampa": cada linea entra como una plancha que imprime */
.js .hero h1 .ln>span{transform:translateY(110%);transition:transform var(--t-slow) var(--ease-out)}
.js .hero h1.printed .ln>span{transform:none}
.js .hero h1 .l2>span{transition-delay:120ms}
.js .hero h1 .l3>span{transition-delay:240ms}
.hero h1 .l2{padding-left:clamp(0px,9vw,160px)}
.hero h1 .l3{padding-left:clamp(0px,18vw,330px)}
.hero-lower{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:end;margin-top:clamp(28px,4vw,52px)}
.hero-copy p{font-size:var(--fs-lead);max-width:44ch;color:var(--body)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-fig img{
  width:100%;aspect-ratio:1/1;object-fit:cover;filter:saturate(.94) contrast(1.02);
  /* el arco: motivo de la identidad de Fae. Se usa UNA vez en toda la pagina. */
  border-radius:50% 50% var(--r-card) var(--r-card) / 40% 40% var(--r-card) var(--r-card);
}
.hero-fig figcaption{margin-top:12px;font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--grey-text);display:flex;justify-content:space-between;gap:12px}

.strip{border-block:1px solid var(--rule);margin-top:clamp(40px,6vw,80px);display:grid;grid-template-columns:repeat(4,1fr)}
.strip div{padding:24px 18px;border-left:1px solid var(--rule)}
.strip div:first-child{border-left:0;padding-left:0}
.strip b{font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);font-weight:400;display:block;line-height:1}
.strip span{font-size:var(--fs-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--grey-text);display:block;margin-top:8px}

/* ---------- galeria automatica ---------- */
.gallery{padding-block:clamp(70px,10vw,140px)}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
/* control de reproduccion: requisito WCAG 2.2.2, y en lenguaje editorial lee
   como control de proyeccion. No es un peaje de accesibilidad. */
.gal-ctl{display:none;align-items:center;gap:9px;min-height:44px;padding:0 18px;
  background:transparent;border:1px solid var(--rule);border-radius:999px;cursor:pointer;
  font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-text);
  transition:border-color var(--t-fast) var(--ease-swift),color var(--t-fast) var(--ease-swift)}
.js .gal-ctl{display:inline-flex}
.gal-ctl:hover{border-color:var(--olive);color:var(--olive)}
/* icono dibujado en CSS a partir de aria-pressed: dos barras cuando reproduce,
   triangulo cuando esta pausado. Evita depender de un glifo que la fuente no tiene. */
.gal-ctl .gl{display:inline-block;width:11px;height:12px;position:relative;flex:0 0 auto}
.gal-ctl .gl::before,.gal-ctl .gl::after{
  content:"";position:absolute;top:0;height:100%;width:3.5px;background:currentColor;
  transition:opacity var(--t-fast) var(--ease-swift);
}
.gal-ctl .gl::before{left:0}
.gal-ctl .gl::after{right:0}
.gal-ctl[data-state="paused"] .gl::before{
  left:1px;top:0;width:0;height:0;background:transparent;
  border-left:10px solid currentColor;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.gal-ctl[data-state="paused"] .gl::after{opacity:0}

.rail{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:22px;
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.rail-track{display:flex;gap:clamp(14px,1.6vw,26px)}
.rail.auto{overflow:hidden;scroll-snap-type:none;cursor:grab;touch-action:pan-y}
.rail.auto.drag{cursor:grabbing}
.rail.auto.active .rail-track{will-change:transform}
.rail.manual{cursor:grab}
.rail.manual.drag{cursor:grabbing;scroll-snap-type:none}
.rail-track,.rail-track img{user-select:none;-webkit-user-drag:none}
.card{flex:0 0 auto;width:clamp(240px,25vw,360px);scroll-snap-align:start}
.card .ph{overflow:hidden;background:var(--bone);border-radius:var(--r-card)}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.94);
  transition:transform var(--t-slow) var(--ease-out);user-select:none;-webkit-user-drag:none}
.card:hover img{transform:scale(1.05)}
.card .meta{display:flex;justify-content:space-between;gap:12px;margin-top:13px;align-items:baseline}
.card .nm{font-family:var(--serif);font-size:22px}
.card .ix{font-size:var(--fs-caption);color:var(--olive);letter-spacing:.1em}
.card .ds{font-size:var(--fs-small);color:var(--grey-text);margin-top:4px;line-height:1.5}
/* sustituye al scrollbar, que muere con overflow:hidden */
.prog{height:2px;background:var(--rule);margin-top:6px;display:none}
.rail.auto ~ .prog{display:block}
.prog i{display:block;height:100%;background:var(--olive);transform-origin:left;transform:scaleX(0)}

/* ---------- manifesto ---------- */
.manifesto{padding-block:clamp(70px,10vw,140px);border-top:1px solid var(--rule)}
.mani-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:start}
.pull{font-family:var(--serif);font-size:var(--fs-pull);line-height:1.08;letter-spacing:-.015em}
.mani-body p{font-size:var(--fs-body);color:var(--body);margin-bottom:18px;max-width:52ch}
.sig{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sig .nm{font-family:var(--serif);font-style:italic;font-size:25px}
.sig .rl{font-size:var(--fs-caption);letter-spacing:.16em;text-transform:uppercase;color:var(--grey-text)}

/* ---------- servizi ---------- */
.servizi{padding-block:clamp(70px,10vw,140px);border-top:1px solid var(--rule)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.svc article{background:var(--paper);padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;transition:background var(--t-med) var(--ease-out)}
.svc article:hover{background:var(--bone)}
.svc .n{font-family:var(--serif);font-size:14px;color:var(--olive);letter-spacing:.1em;transition:color var(--t-fast) var(--ease-swift)}
.svc article:hover .n{color:var(--ink)}
.svc h3{margin:14px 0 18px}
.svc ul{list-style:none}
.svc li{padding:13px 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.svc li span{font-size:var(--fs-svc);color:var(--body)}
/* el precio es el dato de decision, no puede ser el texto mas apagado del bloque */
.svc li i{font-style:normal;font-size:var(--fs-price);font-weight:500;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.svc li i em{font-style:normal;font-weight:400;color:var(--grey-text)}
.svc .lnk{margin-top:auto;padding-top:26px;font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase;color:var(--olive);display:inline-flex;align-items:center;gap:8px}
.svc .lnk span{transition:transform var(--t-med) var(--ease-out)}
.svc article:hover .lnk span{transform:translateX(6px)}
.pricenote{margin-top:20px;font-size:var(--fs-small);color:var(--grey-text)}
.pricenote a{color:var(--olive);border-bottom:1px solid var(--rule);transition:border-color var(--t-fast) var(--ease-swift)}
.pricenote a:hover{border-bottom-color:var(--olive)}

/* ---------- recensioni ---------- */
.recensioni{padding-block:clamp(70px,10vw,140px);border-top:1px solid var(--rule)}
.rec-top{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:44px}
.rating{font-family:var(--serif);font-size:clamp(56px,8vw,110px);line-height:.85;color:var(--olive)}
.rating-meta{font-size:var(--fs-small);color:var(--grey-text)}
.stars{letter-spacing:.24em;color:var(--olive);font-size:16px}
.rec{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px)}
.rec blockquote{font-family:var(--serif);font-size:var(--fs-quote);line-height:1.3;letter-spacing:-.01em}
.rec .who{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-text)}
.rec .tr{font-size:var(--fs-small);color:var(--grey-text);margin-top:14px;font-style:italic;line-height:1.55}

/* ---------- studio ---------- */
.studio{padding-block:clamp(70px,10vw,140px);border-top:1px solid var(--rule)}
.st-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:start}
.st-grid img,.st-b img{width:100%;object-fit:cover;border-radius:var(--r-card)}
.st-a img{aspect-ratio:3/4}
/* bloque de cierre del studio: bio a la izquierda, retrato a la derecha */
.st-c{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,84px);
  align-items:center;margin-top:clamp(34px,5vw,76px)}
.st-bio h3{margin:14px 0 22px}
.st-bio p{font-size:var(--fs-body);color:var(--body);margin-bottom:16px;max-width:46ch}
.st-bio p:last-of-type{margin-bottom:0}
.st-bio .firma{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:26px;color:var(--olive)}
.st-bio .firma+p{margin-top:22px}
.st-bio .firma+p a{color:var(--olive);border-bottom:1px solid var(--rule);transition:border-color var(--t-fast) var(--ease-swift)}
.st-bio .firma+p a:hover{border-bottom-color:var(--olive)}
.st-b{margin:0;width:100%}
.st-b img{aspect-ratio:4/5}
.st-b figcaption{margin-top:12px;font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--grey-text);display:flex;justify-content:space-between;gap:12px}
.st-txt p{font-size:var(--fs-body);color:var(--body);margin-bottom:16px;max-width:48ch}
.st-txt h3+p{margin-top:24px}
.facts{margin-top:30px;border-top:1px solid var(--rule)}
.facts div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px}
.facts dt{color:var(--grey-text)}
.facts dd{text-align:right;max-width:60%}

/* ---------- prenota ---------- */
.prenota{padding-block:clamp(70px,10vw,140px);background:var(--ink);color:var(--bone);margin-top:clamp(50px,8vw,110px);position:relative;overflow:hidden}
.prenota::before{content:"";position:absolute;width:min(70vw,820px);aspect-ratio:1;top:-25%;left:-10%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(110,127,92,.05),rgba(110,127,92,0) 70%);
  animation:drift1 61s var(--ease-inout) infinite alternate;pointer-events:none}
.prenota .folio{border-top-color:rgba(239,233,224,.2)}
.prenota .folio .lbl,.prenota .folio .num{color:rgba(239,233,224,.7)}
.prenota .folio .rule{background:rgba(239,233,224,.2)}
.prenota h2{color:var(--paper);max-width:16ch}
.prenota .it{color:var(--olive-lt)}
.pren-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start;margin-top:38px}
.steps{counter-reset:s}
.steps li{list-style:none;counter-increment:s;padding:26px 0 26px 62px;position:relative;border-top:1px solid rgba(239,233,224,.16)}
.steps li:last-child{border-bottom:1px solid rgba(239,233,224,.16)}
.steps li::before{content:"0" counter(s);position:absolute;left:0;top:26px;font-family:var(--serif);font-size:20px;color:var(--olive-lt)}
.steps b{display:block;font-family:var(--serif);font-size:25px;font-weight:400;margin-bottom:6px;color:var(--paper)}
.steps span{font-size:var(--fs-body);color:rgba(239,233,224,.78);line-height:1.55}

/* variante clara: mismos pasos numerados, para usar sobre --paper en vez de --ink */
.steps.light li{border-top-color:var(--rule)}
.steps.light li:last-child{border-bottom-color:var(--rule)}
.steps.light li::before{color:var(--olive)}
.steps.light b{color:var(--ink)}
.steps.light span{color:var(--grey-text)}

/* dos columnas de prosa editorial, para "cos'e / per chi" y bloques similares */
.svc-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.svc-2col h3{margin-bottom:14px}
.svc-2col p{font-size:var(--fs-body);color:var(--body);margin-bottom:14px}

/* badge de precio, para reforzar el precio dentro de una pagina de servicio */
.svc-price{display:inline-flex;align-items:baseline;gap:10px;padding:14px 22px;
  background:var(--bone);border-radius:999px;margin-top:8px}
.svc-price b{font-family:var(--serif);font-size:28px;font-weight:400;font-variant-numeric:tabular-nums}
.svc-price span{font-size:var(--fs-small);color:var(--grey-text)}

@media (max-width:1000px){ .svc-2col{grid-template-columns:1fr} }
.pren-side p{font-size:var(--fs-lead);color:rgba(239,233,224,.84);margin-bottom:18px;max-width:44ch}
.pren-side .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);margin-top:8px}
.pren-side .btn:hover{background:transparent;color:var(--paper)}
/* consentimiento contextual de dos clics: el iframe NO carga hasta el clic */
.consent{margin-top:14px;font-size:var(--fs-small);color:rgba(239,233,224,.55);max-width:42ch;line-height:1.5}
.consent a{border-bottom:1px solid rgba(239,233,224,.35)}
.wa{margin-top:24px;font-size:var(--fs-small);color:rgba(239,233,224,.65)}
.wa a{border-bottom:1px solid rgba(239,233,224,.35);padding-bottom:1px}
/* el iframe se presenta como inserto de revista: el marco editorial es nuestro */
.cal-slot{margin-top:clamp(30px,4vw,54px)}
.cal-frame{background:var(--paper);border:1px solid var(--rule);border-radius:18px;overflow:hidden;padding:10px}
.cal-frame iframe{width:100%;height:clamp(620px,80vh,780px);border:0;display:block}
.cal-load{padding:40px;text-align:center;color:var(--grey-text);font-size:var(--fs-small)}

/* ---------- orari / contatti ---------- */
.contatti{padding-block:clamp(70px,10vw,140px)}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px)}
.orari{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.orari tr{border-top:1px solid var(--rule)}
.orari tr:last-child{border-bottom:1px solid var(--rule)}
.orari th,.orari td{padding:14px 0}
.orari th{font-weight:400;text-align:left}
.orari td:last-child{text-align:right;color:var(--grey-text)}
.orari tr.off th,.orari tr.off td{color:var(--grey-text)}
.orari tr.today{background:var(--bone)}
.orari tr.today th,.orari tr.today td{padding-inline:12px}
.avviso{margin-top:28px;padding:22px 24px;background:var(--bone);border-left:2px solid var(--olive);border-radius:0 var(--r-card) var(--r-card) 0;font-size:var(--fs-body);line-height:1.55}
.avviso b{font-family:var(--serif);font-size:20px;font-weight:400;display:block;margin-bottom:6px}
.addr{font-size:var(--fs-body);line-height:1.8}
.addr .big{font-family:var(--serif);font-size:var(--fs-h3);line-height:1.05;display:block;margin-bottom:16px}
.addr a{border-bottom:1px solid var(--rule);transition:border-color var(--t-fast) var(--ease-swift)}
.addr a:hover{border-bottom-color:var(--olive)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:clamp(40px,5vw,66px);font-size:var(--fs-small);color:var(--grey-text)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,60px);margin-bottom:40px}
.f-grid .mark+p{margin-top:14px;max-width:30ch}
.f-grid h4{font-size:var(--fs-caption);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:15px;font-weight:400;font-family:var(--sans)}
.f-grid a{display:block;padding:5px 0;transition:color var(--t-fast) var(--ease-swift)}
.f-grid a:hover{color:var(--olive)}
.f-bot{border-top:1px solid var(--rule);padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;line-height:1.7}
.todo{color:#A8452D}

/* ---------- volver arriba ----------
   Aparece SOLO al scrollear hacia arriba. Ese es el detalle: existe cuando hay
   intencion de volver, no como mueble permanente. */
.top{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);
  background:rgba(250,248,244,.85);backdrop-filter:blur(8px);cursor:pointer;
  display:grid;place-items:center;font-family:var(--serif);font-size:19px;color:var(--olive);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),
             background var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out)}
.top.show{opacity:1;transform:none;pointer-events:auto}
.top:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}

/* ---------- listino ---------- */
.lst-cat{padding-block:clamp(48px,6vw,88px)}
.lst-cat:first-of-type{padding-top:clamp(20px,3vw,40px)}
.lst{border-top:1px solid var(--rule)}
.lst-row{
  display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,48px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--rule);align-items:baseline;
  transition:background var(--t-med) var(--ease-out);
}
.lst-row:hover{background:var(--bone)}
.lst-nm{font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.12}
.lst-ds{font-size:var(--fs-small);color:var(--grey-text);margin-top:8px;max-width:58ch;line-height:1.55}
.lst-pr{text-align:right;white-space:nowrap}
.lst-pr b{display:block;font-size:clamp(20px,1.7vw,26px);font-weight:500;font-variant-numeric:tabular-nums}
.lst-pr span{display:block;font-size:var(--fs-small);color:var(--grey-text);margin-top:5px}
.lst-note{margin-top:22px;font-size:var(--fs-small);color:var(--grey-text);max-width:64ch}

/* rituali: maximo dos, para no diluir el menu */
.rituali{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
.rituali article{background:var(--paper);padding:clamp(26px,3vw,44px);transition:background var(--t-med) var(--ease-out)}
.rituali article:hover{background:var(--bone)}
.rituali .tag{font-size:var(--fs-caption);letter-spacing:.2em;text-transform:uppercase;color:var(--olive)}
.rituali h3{margin:14px 0 12px}
.rituali p{font-size:var(--fs-small);color:var(--grey-text);max-width:44ch;line-height:1.55}
.rituali .pz{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.rituali .pz b{font-size:clamp(20px,1.7vw,26px);font-weight:500;font-variant-numeric:tabular-nums}
.rituali .pz s{color:var(--grey-text);font-size:var(--fs-small);text-decoration-thickness:1px}
.rituali .pz span{font-size:var(--fs-small);color:var(--grey-text)}

/* FAQ: alimenta el JSON-LD FAQPage y la keyword de precio */
.faq{border-top:1px solid var(--rule)}
.faq>div{border-bottom:1px solid var(--rule);padding:clamp(22px,2.6vw,32px) 0}
.faq dt{font-family:var(--serif);font-size:clamp(20px,1.6vw,27px);line-height:1.15;margin-bottom:12px}
.faq dd{font-size:var(--fs-body);color:var(--body);max-width:68ch}

/* banda de cierre */
.cta-band{background:var(--ink);color:var(--bone);padding-block:clamp(56px,7vw,104px);
  margin-top:clamp(50px,8vw,110px);text-align:center}
.cta-band h2{color:var(--paper);margin-bottom:14px}
.cta-band p{color:rgba(239,233,224,.72);max-width:46ch;margin:0 auto 30px}
.cta-band .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-band .btn:hover{background:transparent;color:var(--paper)}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
/* la foto que "se revela", gesto de imprenta */
.js .rv-img{overflow:hidden}
.js .rv-img img{clip-path:inset(0 0 14% 0);transform:scale(1.04);
  transition:clip-path 1100ms var(--ease-out),transform 1100ms var(--ease-out)}
.js .rv-img.in img{clip-path:inset(0);transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-lower,.mani-grid,.svc,.rec,.st-grid,.pren-grid,.ct-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip div:nth-child(3){border-left:0;padding-left:0}
  .strip div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .f-grid{grid-template-columns:1fr 1fr}
  .js nav.links{
    position:absolute;top:calc(100% + 1px);left:var(--pad);right:var(--pad);
    display:flex;flex-direction:column;gap:0;padding:10px 18px;
    background:rgba(250,248,244,.97);border:1px solid var(--rule);border-radius:var(--r-card);
    box-shadow:0 18px 50px rgba(20,18,15,.08);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),visibility 0s linear var(--t-fast);
  }
  .js nav.links a{padding:12px 0;border-bottom:1px solid var(--rule)}
  .js nav.links a:last-child{border-bottom:0}
  .js header.menu-open nav.links{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition-delay:0s;
  }
  .js .burger{display:block;min-width:44px;min-height:44px}
  html:not(.js) header .bar{flex-wrap:wrap}
  html:not(.js) nav.links{order:3;width:100%;justify-content:space-between;gap:12px;font-size:13px;flex-wrap:wrap}
  .hero h1 .l2,.hero h1 .l3{padding-left:0}
  .hero-fig img{aspect-ratio:4/5}
  .st-c{grid-template-columns:1fr}
  .rituali{grid-template-columns:1fr}
  .lst-row{grid-template-columns:1fr;gap:10px}
  .lst-pr{text-align:left;display:flex;gap:12px;align-items:baseline}
  .lst-pr span{margin-top:0}
}
@media (max-width:560px){
  .strip{grid-template-columns:1fr}
  .strip div{border-left:0;padding-left:0;border-bottom:1px solid var(--rule)}
  .strip div:last-child{border-bottom:0}
  .f-grid{grid-template-columns:1fr}
  .gal-head{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .rv-img img{clip-path:none;transform:none}
  .js .hero h1 .ln>span{transform:none}
  html{scroll-behavior:auto}
}