/* ByMariaFinol — built to the approved concept artifact (dark hero, centred
   1080 column, compare panes, 4-up tour grid), with the audited refinements
   kept: WCAG AA contrast, 8pt spacing, 8-step type scale, 44px targets,
   low editorial radii. */
:root{
  --espresso:#241A14; --espresso-2:#2E2119; --paper:#FAF5EE; --card:#FFFDF9;
  --ink:#2B211B; --ink-soft:#6B5849; --ink-faint:#6F5B49;
  --caramel:#96643F; --caramel-line:#A8734D; --caramel-deep:#6E4630;
  --rose:#E7C3B8; --rose-deep:#8A4B3A;
  --paper-alt:#ECE0CE;              /* alternating band: 1.20 step off --paper,
                                       visible as a division without fighting the ink */
  --line:#E6DACB; --line-alt:#DFD2C0; --cream:#F3E9DD;
  --on-dark:#D8C9BA; --on-dark-soft:#C9B8A8; --on-dark-faint:#B9A28C;
  --serif:"Playfair Display","Didot",Georgia,serif;
  --sans:"Jost","Avenir Next",system-ui,sans-serif;
  --flick:cubic-bezier(.22,1,.36,1);
  /* Disolucion del carrusel de servicios. Sin unidad: js/main.js la lee con
     parseFloat para saber cuando retirar la copia, y un "0.8s" se leeria 0,8. */
  --fade-ms:1100;
  /* Proporcion del marco de los carruseles de servicios. Un solo sitio: el
     carril y la copia de la disolucion tienen que medir igual o la copia no
     cuadra encima. A 4/5 la foto salia 599 px de alto contra un texto de
     355-521 y sobraba medio bloque vacio. */
  --svc-frame:1/1;
  --pad:clamp(20px,5vw,40px);
  --maxw:1080px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  --fs-micro:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-base:16.5px; --fs-lg:21px; --fs-xl:26px;
  --tap:44px;
  /* One vertical rhythm for every content section. Previously each band set its
     own padding, so the gap between sections varied 139–180px — the awards band
     (the one that leads with a photo) sat at 63px against everyone else's 81px,
     which is why picture-led sections read as tighter. */
  --section-y:clamp(56px,9vh,88px);
  --r1:2px; --r2:4px; --r3:6px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.65;font-size:var(--fs-base)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;text-wrap:balance}
em{font-style:italic;color:var(--caramel-deep)}
.eyebrow{font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--caramel-deep);display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.eyebrow::before{content:"";width:var(--s6);height:1px;background:var(--caramel-line);flex:none}
.lede{color:var(--ink-soft);max-width:58ch;margin:var(--s3) 0 0}
.tag{font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;font-weight:500}

/* Ticker */
.ticker{background:var(--espresso);color:var(--cream);overflow:hidden;white-space:nowrap;border-bottom:1px solid #3A2C21}
.ticker__track{display:inline-block;padding:var(--s2) 0;animation:slide 28s linear infinite}
.ticker span{font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;margin:0 var(--s6);opacity:.9}
.ticker span i{font-style:normal;color:var(--rose)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* Nav — dark, continuous with the ticker and the hero above it */
/* Solid, not translucent. At 94% opacity the cream page background showed
   through the remaining 6%, so the bar painted as rgb(49,39,33) — 13 points
   lighter than the ticker directly above it and the hero below, which read as
   a mismatched stripe. The backdrop blur goes with it: nothing can show through
   an opaque background, so it only cost a compositing layer. */
.nav{position:sticky;top:0;z-index:20;background:var(--espresso);border-bottom:1px solid #3A2C21;padding:var(--s2) var(--pad)}
.nav__inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:var(--s6)}
/* The logo file is 500x500 but its ink only occupies x 31–467, y 114–330 —
   measured off the alpha channel — with uneven padding (114 above, 169 below).
   Rendered square, the dead space shrank the mark to ~21px AND sat it high.
   The window below is 500x260 of the source centred on the ink, so the crop
   leaves an equal 22px of source above the M and below STUDIO. */
.nav__logo{display:grid;place-items:center;min-width:var(--tap);min-height:var(--tap)}
.nav__logo img{width:112px;aspect-ratio:25/13;height:auto;object-fit:cover;object-position:50% 38.3%}
@media(max-width:400px){.nav__logo img{width:96px}}
.nav__links{display:flex;gap:var(--s6);margin-inline:auto}
.nav__links a{color:var(--cream);text-decoration:none;font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;position:relative;display:grid;place-items:center;min-height:var(--tap)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:11px;height:1px;width:100%;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--flick)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.nav__cta{white-space:nowrap}
.nav__burger{margin-left:auto;background:none;border:1px solid #5C4633;border-radius:var(--r2);width:var(--tap);height:var(--tap);flex:none;display:none;place-items:center;color:var(--cream);cursor:pointer}
/* 1100, no 960. Con cuatro enlaces la barra necesitaba 852,8px (logo 112 +
   enlaces 377 + CTA 245 + dos huecos de 24) y a 960 quedaban 880 utiles: 27px
   de margen. El quinto enlace, «Servicios», la lleva a 983,8px, asi que hace
   falta un corte de 1092 como minimo para conservar ese margen; 1100 deja 36,2.
   Los 983,8 estan medidos DESPUES de document.fonts.ready: con la tipografia de
   respaldo salian 951,3, y haber creido esa cifra habria dejado la barra con
   cero margen a 1061 — el ancho exacto en que se empieza a mostrar.
   Ojo al modo de fallo, que cambio: desde que .nav__links a y .nav__cta llevan
   white-space:nowrap dentro de un flex, una barra sobrecargada ya no cae a dos
   lineas — desborda, y eso da scroll horizontal en todo el documento, que es
   mas dificil de ver. El precio de subir el corte es que entre 961 y 1059
   (iPad apaisado, ventanas sin maximizar) se pasa al menu de hamburguesa. */
@media(max-width:1100px){
  .nav .nav__links,.nav .nav__cta{display:none}
  .nav .nav__burger{display:grid;margin-left:0;grid-column:3}
  /* Three tracks with an empty first column the width of the burger, so the
     logo centres on the bar rather than sitting off to one side. */
  .nav__inner{display:grid;grid-template-columns:var(--tap) 1fr var(--tap);align-items:center;gap:var(--s3)}
  .nav__logo{grid-column:2;justify-self:center}
}

/* Drawer */
.drawer{border:0;padding:0;margin:0;background:transparent;inset:0;width:100%;height:100%}
.drawer::backdrop{background:rgba(36,26,20,.55);backdrop-filter:blur(3px)}
.drawer__sheet{position:fixed;top:0;right:0;height:100dvh;width:min(330px,86vw);background:var(--espresso);border-left:1px solid #3A2C21;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s5) var(--s6) var(--s6);transform:translateX(100%);transition:transform .45s var(--flick)}
.drawer:popover-open .drawer__sheet{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}
.drawer__head img{width:104px;aspect-ratio:25/13;height:auto;object-fit:cover;object-position:50% 38.3%}
.drawer__close{width:var(--tap);height:var(--tap);flex:none;display:grid;place-items:center;background:none;border:1px solid #5C4633;border-radius:var(--r2);color:var(--cream);cursor:pointer;transition:color .3s var(--flick),border-color .3s var(--flick)}
.drawer__close:hover,.drawer__close:focus-visible{color:var(--rose);border-color:var(--rose)}
.drawer__sheet a:not(.btn){color:var(--cream);text-decoration:none;font-family:var(--serif);font-size:var(--fs-xl);padding:var(--s3) 0;border-bottom:1px solid #3A2C21;min-height:var(--tap);display:flex;align-items:center}
.drawer__sheet a:not(.btn):hover,.drawer__sheet a:not(.btn):focus-visible{color:var(--rose)}
/* Tighter than the page button: the full label wrapped to two lines in 330px. */
.drawer__sheet .btn{margin-top:var(--s6);font-family:var(--sans);padding:var(--s3) var(--s4);letter-spacing:.1em;text-align:center}
.drawer__foot{margin-top:auto;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint)}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:var(--s3) var(--s8);border-radius:var(--r2);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;text-decoration:none;cursor:pointer;transition:transform .35s var(--flick),box-shadow .35s var(--flick)}
.btn--primary{background:linear-gradient(110deg,var(--caramel-deep),#96643F);color:#FFF8F0;overflow:hidden;border:0}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s var(--flick)}
.btn--primary:hover::after,.btn--primary:focus-visible::after{transform:translateX(120%)}
.btn--primary:hover,.btn--primary:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.btn--ghost{border:1px solid #5C4633;color:var(--cream);background:transparent}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--rose);color:var(--rose);transform:translateY(-3px)}
.btn--big{padding:var(--s5) var(--s10);font-size:var(--fs-sm)}
/* The ring was --rose, which measures 10.46:1 on the espresso bars but only
   1.50:1 on --paper — and .btn appears on both, so the page's largest CTA
   ("Hablar por WhatsApp", on cream) was the one control a keyboard user could
   not tell they had reached. WCAG 1.4.11 wants 3:1 for a focus indicator.
   --caramel is the one brand token that clears it on every ground the button
   lands on: 4.62 on paper, 3.85 on paper-alt, 3.40 on espresso. */
.btn:focus-visible{outline:2px solid var(--caramel);outline-offset:3px}

/* Hero — dark, exactly the concept's radial ground */
.hero{position:relative;background:radial-gradient(120% 90% at 78% 10%,#3A2A1F 0%,var(--espresso) 55%);color:var(--cream);padding:clamp(40px,7vh,76px) var(--pad) var(--section-y);overflow:hidden}
.hero__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:start}
@media(max-width:820px){.hero__inner{grid-template-columns:1fr}.hero__media{order:2;max-width:460px}}
.hero .tag{color:var(--rose);display:inline-flex;align-items:center;gap:var(--s3)}
.hero .tag::before{content:"";width:var(--s6);height:1px;background:var(--rose);flex:none}
.hero h1{font-size:clamp(42px,6.6vw,76px);margin:var(--s4) 0 var(--s1)}
.hero .line{display:block;overflow:hidden}
.hero .line>span{display:inline-block}
.hero h1 em{color:var(--rose)}
.stroke{width:min(340px,66%);margin:var(--s1) 0 var(--s4)}
.stroke path{fill:none;stroke:var(--caramel-line);stroke-width:2.5;stroke-linecap:round}
.hero__sub{max-width:46ch;color:var(--on-dark)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
.hero__stats{display:flex;gap:clamp(24px,4vw,48px);margin-top:var(--s10);padding-top:var(--s6);border-top:1px solid #3A2C21}
.hero__stats dt{font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);color:var(--rose);line-height:1}
.hero__stats dd{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);margin:var(--s2) 0 0}
.hero__media{position:relative}
.hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:var(--r2);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
/* right:0 — the seal's edge sits on the same line as the photo and the content
   column. Previously -14px, which pushed it outside the page margin. */
.badge{position:absolute;right:0;bottom:var(--s8);width:150px;height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--espresso);border-radius:50%;color:var(--cream);box-shadow:0 18px 40px -18px rgba(0,0,0,.75)}
.badge .ring{position:absolute;inset:10px;border:1px dashed #6B5340;border-radius:50%;animation:spin 40s linear infinite}
.badge .ring::before{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;background:var(--rose);border-radius:50%}
/* "MF" is all capitals, so its ink sits low in its own line box: 7.6px of empty
   space above it and 3.3px below. Centring the boxes therefore left the letters
   4.3px low between the two captions (11.8px of air above, 7.5px below).
   Shifting up 2px splits the difference; the equal and opposite bottom margin
   keeps the block's total height, so the group stays centred in the circle. */
.badge .mf{font-family:var(--serif);font-size:38px;line-height:1;margin:-2px 0 2px}
.badge .cap{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint);line-height:1.2}
@keyframes spin{to{transform:rotate(360deg)}}

/* Manifesto — her strongest line from the live site, set large and centred.
   Sits straight after the hero as the thesis of the page. */
.manifesto{padding:var(--section-y) var(--pad);text-align:center}
.manifesto__inner{max-width:var(--maxw);margin:0 auto}
.manifesto__intro{font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:var(--s5)}
.manifesto__text{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4.6vw,52px);line-height:1.22;max-width:17em;margin:0 auto;text-wrap:balance}
.manifesto__text em{font-style:italic;color:var(--caramel-deep)}

/* Three voice lines, three different treatments on purpose — same size and
   alignment four times over would read as a template, not as her talking. */
.pull{font-family:var(--serif);font-size:clamp(20px,2.6vw,29px);line-height:1.35;color:var(--ink);max-width:32ch;margin:var(--s10) 0 0;padding-left:var(--s5);border-left:2px solid var(--caramel-line);text-wrap:balance}
.interstitial{background:var(--espresso);color:var(--cream);padding:var(--section-y) var(--pad);text-align:center}
.interstitial__inner{max-width:var(--maxw);margin:0 auto}
.interstitial p{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.8vw,44px);line-height:1.25;max-width:17em;margin:0 auto;text-wrap:balance}
.interstitial em{font-style:italic;color:var(--rose)}
/* The fourth of her voice lines. It sat 24px under the CTA in plain body copy —
   closer to the button (24px) than to anything else (88px) — so it read as fine
   print about the payment link rather than as her closing word. Serif italic and
   a short caramel rule lift it out of the CTA's orbit; the rule echoes the
   hand-drawn stroke under the hero headline. */
.final__note{margin-top:var(--s12);padding-top:var(--s6);position:relative;max-width:34ch;font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.8vw,21px);line-height:1.4;color:var(--ink-soft)}
.final__note::before{content:"";position:absolute;top:0;left:50%;width:48px;height:1px;margin-left:-24px;background:var(--caramel-line)}

/* Blocks — full-bleed shell so the section tone spans the viewport,
   with a centred inner column holding the content. */
.block{padding:var(--section-y) var(--pad)}
.block__inner{max-width:var(--maxw);margin:0 auto}
.block h2{font-size:clamp(30px,4.2vw,44px)}
/* Alternating section tones, both drawn from the brand's warm neutrals */
.tone-a{background:var(--paper)}
.tone-b{background:var(--paper-alt)}
.tone-b .card,.tone-b .props div{background:var(--paper);border-color:var(--line-alt)}

/* Cards — roman numerals, as in the concept */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s8)}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s6);transition:transform .4s var(--flick),box-shadow .4s var(--flick)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px -20px rgba(62,42,26,.35)}
.card .num{font-family:var(--serif);font-size:var(--fs-md);color:var(--caramel);letter-spacing:.06em}
.card h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);margin:var(--s2) 0}
.card p{font-size:var(--fs-md);color:var(--ink-soft)}

/* Kit */
.kit{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,48px);align-items:center;margin-top:var(--s12)}
@media(max-width:820px){.kit{grid-template-columns:1fr}}
.kit__media img{border-radius:var(--r2)}
/* Dos fotos del kit, no una: la bolsa preparada dice qué te llevas, la caja
   abierta dice qué hay dentro. En par, no apiladas — apiladas la columna .8fr
   crecía a 2,7 veces su ancho y dejaba el texto flotando arriba del todo. */
.path__kit .kit__media{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);align-items:start}
.path__kit .kit__media figure{margin:0;min-width:0}
.path__kit .kit__media img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
/* En móvil siguen en par, no apiladas: apiladas ocupaban 901px de alto y las
   fotos se comían la sección entera antes de llegar a la lista. En 4:5 bajan a
   204px y el bloque completo —fotos, título y los tres puntos— entra de una
   sola pantalla, que es como debe leerse algo titulado «lo que va incluido».
   4:5 y no 1:1 porque el recorte cuadrado corta los lazos de las bolsas. */
@media(max-width:560px){.path__kit .kit__media img{aspect-ratio:4/5}}
.kit h3{font-size:clamp(24px,3.2vw,34px);margin-bottom:var(--s3)}
.ticks{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:var(--s2)}
.ticks li{padding-left:var(--s6);position:relative;font-size:var(--fs-md);color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:7px;border-left:2px solid var(--caramel);border-bottom:2px solid var(--caramel);transform:rotate(-45deg)}
.kit__cert{margin-top:var(--s4);font-weight:500;color:var(--caramel-deep);letter-spacing:.06em}
.props{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
@media(max-width:560px){.props{grid-template-columns:1fr}}
.props div{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4)}
.props dt{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--caramel-deep);font-weight:500}
.props dd{margin:var(--s1) 0 0;font-size:var(--fs-md);color:var(--ink-soft)}

/* About */
.about{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:820px){.about{grid-template-columns:1fr}}
.about__media img{border-radius:var(--r2)}
.about h2{margin-bottom:var(--s4)}
.about p{max-width:60ch;margin-bottom:var(--s3);color:var(--ink-soft)}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,28px);line-height:1.4;color:var(--ink);border-left:2px solid var(--caramel-line);padding-left:var(--s5);margin:var(--s6) 0}

/* Awards band. Centred alone in a wide cream row the portrait read as floating —
   nothing sat beside it and nothing held its edges. A dark full-width field plus
   a text partner anchors it and turns the empty space into a deliberate ground. */
/* Padding lives on the band and max-width on the inner — same structure as
   .block/.block__inner. With both on the inner, this section's content sat
   20px further in than every other section. */
.awards{background:var(--espresso);color:var(--cream);padding:var(--section-y) var(--pad)}
.awards__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:820px){.awards__inner{grid-template-columns:1fr}}
.awards__media img{width:100%;border-radius:var(--r2)}
.awards .tag{color:var(--rose);display:inline-flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.awards .tag::before{content:"";width:var(--s6);height:1px;background:var(--rose);flex:none}
.awards h2{font-size:clamp(28px,3.8vw,42px)}
.awards h2 em{color:var(--rose)}
.awards p{margin-top:var(--s4);max-width:52ch;color:var(--on-dark)}
.awards__places{list-style:none;padding:0;margin:var(--s6) 0 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.awards__places li{border:1px solid #5C4633;border-radius:var(--r1);padding:var(--s1) var(--s3);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
.awards__note{margin-top:var(--s4);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint)}

/* Compare panes — the concept's two-up, now carrying real photographs */
/* One feature panel: the lifting shot moved out to Otras formaciones, where the
   service is actually sold, so this no longer carries a pair. */
.compare{margin-top:var(--s8);display:flex;justify-content:center}
.compare .pane{width:min(560px,100%)}
.pane{position:relative;border-radius:var(--r2);overflow:hidden;isolation:isolate}
.pane img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pane figcaption{position:absolute;inset:auto 0 0 0;z-index:1;padding:var(--s12) var(--s5) var(--s5);background:linear-gradient(transparent,rgba(36,26,20,.92));color:var(--cream);text-align:center}
.pane .tag{display:block;margin-bottom:var(--s1);color:var(--rose)}
.pane figcaption p{font-size:var(--fs-sm);color:var(--on-dark);max-width:34ch;margin:0 auto}
.pane .lashline{width:130px;margin:0 auto var(--s2)}
.pane .lashline path{fill:none;stroke-width:2;stroke-linecap:round;stroke:var(--rose)}
.pane-b::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 50% 42%,rgba(231,195,184,.26),transparent 70%);opacity:0;animation:bloom 5s ease-in-out infinite alternate}
@keyframes bloom{to{opacity:1}}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
@media(max-width:820px){.gallery{grid-template-columns:1fr}}
.gallery__item{position:relative;border-radius:var(--r2);overflow:hidden}
.gallery__item img{aspect-ratio:3/4;object-fit:cover;transition:transform .8s var(--flick)}
/* Brow photo: framed wide and shot dark. Zoom to 1.46x and re-centre on the brow
   line (shows source x 90–910, y 113–1206 of 1200x1600), then lift exposure with
   the #expose-brow curve. scale/translate are separate properties so the hover
   transform still composes. */
.gallery__item--brow img{scale:1.463;translate:12.2% 12.9%;filter:url(#expose-brow) saturate(1.06)}
/* Reusable: the same curve for any studio shot that came out underexposed. */
.tone-lift{filter:url(#expose-brow) saturate(1.06)}

/* El camino de Sevilla — lista ordenada, no rejilla de opciones. Los cursos del
   tour son cuatro paradas con fecha; estos son cinco pasos de una progresión,
   y el orden ES la información. Sin fotos: reutilizar cualquiera de las que ya
   están en <main> lo prohíbe check_no_duplicate_images, y cinco fotos nuevas
   pesarían ~600 KB sin decir nada que el numeral no diga. */
.path{margin-top:var(--s8);border-top:1px solid var(--line-alt)}
.path__step{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:var(--s4) var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line-alt)}
.path__step .num{font-family:var(--serif);font-size:var(--fs-lg);color:var(--caramel);line-height:1.2;min-width:2.2ch}
.path__body h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-lg);margin-bottom:var(--s1)}
.path__body p{font-size:var(--fs-md);color:var(--ink-soft)}
.path__who{font-size:var(--fs-sm);color:var(--ink-faint);margin-top:var(--s2)}
.path__step>a{grid-column:3;align-self:center;color:var(--caramel-deep);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:500;text-decoration:none;white-space:nowrap;position:relative;min-height:var(--tap);display:flex;align-items:center}
.path__step>a::after{content:"";position:absolute;left:0;bottom:11px;height:1px;width:100%;background:var(--caramel);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--flick)}
.path__step>a:hover::after,.path__step>a:focus-visible::after{transform:scaleX(1)}
/* Debajo de 720px el CTA no cabe en su propia columna sin estrangular el texto:
   pasa a una fila propia bajo el cuerpo, alineado con él.
   Y ahí el nowrap deja de tener sentido: en una fila propia ya no hay columna
   que proteger, pero su aportación de anchura mínima seguía siendo el texto
   entero, y eso fija el suelo de la pista 1fr. A 320px «Info de laminado y
   diseño de cejas» pide 279px donde caben 232, y la página entera se desplazaba
   26px en horizontal — el ancho con el que la WCAG 1.4.10 mide el reflujo, que
   es donde cae cualquiera que amplíe el zoom del navegador. */
@media(max-width:720px){
  .path__step{grid-template-columns:auto 1fr}
  .path__step>a{grid-column:2;margin-top:var(--s2);white-space:normal;
                flex-direction:column;align-items:flex-start;justify-content:center}
  /* El subrayado va clavado a 11px del fondo de la caja, que mide 44 por el
     objetivo táctil. Con el texto en dos líneas la barra caía dentro de la
     segunda (y=32, línea de 23 a 40) y la tachaba. Como es además el único
     indicador de foco que tienen estos enlaces, no vale con esconderlo: pasa a
     ser un hijo más de la columna flex, debajo del texto, y así sigue a las
     líneas que haya sin perder la animación de barrido. */
  .path__step>a::after{position:static;bottom:auto;margin-top:5px;align-self:stretch}
}
/* Reutiliza .kit, el bloque foto+lista que ya existe más arriba. De las tres
   fotos que liberó «Otras formaciones», dos correspondían exactamente a un
   curso (lifting, cejas) y tres cursos se quedaban sin ninguna: una lista con
   imagen en 2 de 5 filas se lee a medio hacer, así que una sostiene la sección
   entera y las filas quedan parejas. */
.path__kit{margin-top:var(--s8)}

.gallery__item:hover img{transform:scale(1.045)}
.gallery__item figcaption{position:absolute;inset:auto 0 0 0;padding:var(--s10) var(--s4) var(--s3);background:linear-gradient(transparent,rgba(36,26,20,.88));color:var(--cream);font-size:var(--fs-sm)}
.gallery__item figcaption b{display:block;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:var(--fs-micro);color:var(--rose);margin-bottom:2px}

/* Tour — 4-up dark cards, as in the concept */
/* align-items:start is load-bearing: stretched rows meant opening one card's
   programme grew all four to the tallest height, and .what{flex:1} poured that
   space into the siblings' descriptions. Each card now sizes to its own content. */
.tour{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s8);align-items:start}
@media(max-width:560px){.tour{grid-template-columns:1fr}}
.stop{background:var(--espresso);color:var(--cream);border-radius:var(--r2);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s2);transition:transform .4s var(--flick),box-shadow .4s var(--flick)}
.stop:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(36,26,20,.5)}
.stop .when{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--rose)}
.stop .city{font-family:var(--serif);font-size:var(--fs-xl);font-weight:500;line-height:1.1}
.stop .what{font-size:var(--fs-sm);color:var(--on-dark-soft)}
.stop .price{margin-top:var(--s1);padding-top:var(--s3);border-top:1px solid #3A2C21}
.stop .price b{display:block;font-family:var(--serif);font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.stop .price span{font-size:var(--fs-xs);color:var(--on-dark-faint)}
/* Afterpay mark. It lives inside .price rather than as a seventh child of .stop:
   the tour grid pins `grid-row: span 6` and every card has exactly six children,
   so a seventh on only the two USD cards would break the subgrid that levels the
   rows. The artwork is black on an opaque white JPEG, so it needs a light chip
   under it — bare on the espresso card it reads as a white rectangle. The crop
   trims the source's generous margins the same way the brand mark is handled up
   at .nav__logo img. */
.stop .afterpay{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s3);font-size:var(--fs-micro);letter-spacing:.02em;color:var(--on-dark-faint)}
/* content-box on purpose: the global border-box made the chip's padding eat
   into the 64px box, squeezing the artwork to 7.95px tall inside a 13.95px
   chip. Sized this way the mark keeps its 64x14 and the chip becomes 74x20,
   which also lands its centre on the first text line's — the two boxes then
   start together and are the same height, so flex-start centres them. */
.stop .afterpay img{box-sizing:content-box;width:64px;height:14px;object-fit:cover;object-position:50% 50%;flex:none;background:var(--cream);border-radius:var(--r1);padding:3px 5px}
.stop details{border-top:1px solid #3A2C21;padding-top:var(--s2)}
.stop summary{cursor:pointer;font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-faint);min-height:var(--tap);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);list-style:none}
.stop summary::-webkit-details-marker{display:none}
.stop summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--flick);flex:none}
.stop details[open] summary::after{transform:rotate(-135deg)}
.stop summary:hover{color:var(--rose)}
.stop summary:focus-visible{color:var(--rose);outline:2px solid var(--rose);outline-offset:3px;border-radius:var(--r1)}
.stop details .ticks{margin-top:var(--s1)}
.stop details .ticks li{font-size:var(--fs-sm);color:var(--on-dark-soft);padding-left:var(--s5)}
.stop details .ticks li::before{border-color:var(--rose);width:11px;height:6px}
/* The underline was an absolutely positioned bar at bottom:11px spanning the
   full width. On "Quiero mi plaza en Orlando", which wraps to two lines, 11px
   from the bottom falls through the middle of the second line and reads as a
   strikethrough. A real text-decoration underlines each line where it belongs.
   display:block rather than flex: a flex container does not propagate text
   decoration to its anonymous items, so the underline would never paint. */
.stop>a{color:var(--rose);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:500;width:fit-content;display:block;min-height:var(--tap);padding-block:var(--s3);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;transition:text-decoration-color .4s var(--flick)}
.stop>a:hover,.stop>a:focus-visible{text-decoration-color:var(--rose)}
/* Level the cards' innards. Each card holds the same six parts, but their
   heights differ per city — "Estados Unidos" wraps the date line, and the
   descriptions run one to three lines — so price, programme and CTA all landed
   at different heights. subgrid turns the six rows into shared tracks, so every
   card agrees on where each part starts. Where subgrid is unsupported the cards
   keep their flex layout and are simply ragged again, as before.
   This block MUST stay after `.stop`: it overrides that rule's display:flex at
   equal specificity, so placing it earlier silently loses the cascade — which
   it did, and 1440px hid it because every date happened to fit on one line. */
@supports (grid-template-rows:subgrid){
  .tour{grid-template-rows:repeat(6,auto);align-items:stretch}
  .stop{display:grid;grid-template-rows:subgrid;grid-row:span 6}
}
/* Single image: the Orlando stop has no photograph of its own — the file that
   shipped as one was a byte-identical copy of the awards portrait, so showing
   both repeated the same photograph on one page. Deleted rather than kept
   unused. */
.tour__media{margin-top:var(--s6)}
/* 21:9 showed only 438 of the 1537 source rows starting at y=220, which sliced
   the tops of both heads off. 3:2 from y≈68 frames both women from above the
   hairline down past their folded arms. */
.tour__media img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 8%;border-radius:var(--r2)}

/* Programme dialog. The panel used to expand inside its card, which grew the
   grid row and left the card beside it short — a gap that changed with every
   open. In a dialog the programme costs zero layout. */
.progdlg{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;overflow:visible}
.progdlg::backdrop{background:rgba(36,26,20,.6);backdrop-filter:blur(3px)}
.progdlg__sheet{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));max-height:min(80dvh,700px);overflow-y:auto;background:var(--espresso);color:var(--cream);border:1px solid #4A382B;border-radius:var(--r3);padding:var(--s6);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);overscroll-behavior:contain;color-scheme:dark}
.progdlg__head{display:grid;grid-template-columns:1fr auto;align-items:start;gap:var(--s3);margin-bottom:var(--s5)}
.progdlg__eyebrow{grid-column:1;font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--rose)}
.progdlg__title{grid-column:1;font-family:var(--serif);font-weight:500;font-size:var(--fs-xl);margin-top:2px}
.progdlg__close{grid-column:2;grid-row:1/3;width:var(--tap);height:var(--tap);display:grid;place-items:center;background:none;border:1px solid #5C4633;border-radius:var(--r2);color:var(--cream);cursor:pointer}
.progdlg__close:hover,.progdlg__close:focus-visible{color:var(--rose);border-color:var(--rose)}
.progdlg__body .ticks li{color:var(--on-dark-soft);font-size:var(--fs-md)}
.progdlg__body .ticks li::before{border-color:var(--rose)}
.progdlg__cta{margin-top:var(--s6);width:100%}
@media(max-width:560px){.progdlg__sheet{width:100%;max-width:none;max-height:88dvh;top:auto;bottom:0;left:0;transform:none;border-radius:var(--r3) var(--r3) 0 0}}

/* Final CTA */
.final{padding:var(--section-y) var(--pad)}
.final__inner{max-width:var(--maxw);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.final .eyebrow::before{display:none}
.final h2{font-size:clamp(30px,4.4vw,50px);max-width:22ch}
.final .lede{margin:var(--s4) auto var(--s8)}

/* Footer */
.footer{background:var(--espresso);color:var(--on-dark-faint);padding:var(--s8) var(--pad)}
/* Two tiers instead of one flat row of four equal things. The old single flex
   line left a 220px gutter at 1440px and, between roughly 900 and 1300px,
   orphaned the social links onto their own line under the logo. space-between
   on both tiers means the band reaches both margins at every width. */
/* One tier, two groups: brand left, links right. The earlier two-tier version
   was 271px tall against the original 149px, which read as a slab. Grouping
   the links means space-between still reaches both margins without the four
   original items drifting apart at mid widths. */
.footer__inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4) var(--s8);font-size:var(--fs-sm)}
.footer__brand{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
/* Legal first, then the social icons — last in the footer's reading order. The
   left brand block is the most-read part of a footer, so the icons sat closer
   to header prominence there than the page wants: the conversion path is the
   WhatsApp CTAs in the body, and the footer is the fallback layer. */
.footer__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s6)}
/* Below ~925px the two groups no longer fit on one line and space-between drops
   the links flush left, which reads as a ragged second row. Centring each line
   from 940px down keeps the stack deliberate. Measured: unwrapped at 960 (inner
   880), wrapped at 920 (inner 840), so 940 sits inside the wrapped range. */
@media (max-width:940px){
  .footer__inner{justify-content:center}
  .footer__brand,.footer__links{justify-content:center}
}
/* Icon links: square so the glyph sits centred, and they grow to the full tap
   target where the pointer is coarse. aria-label carries the name that the
   text link used to. */
.footer__social{gap:var(--s1)}
.footer__social a{width:32px;height:32px;justify-content:center}
.footer__social svg{width:19px;height:19px;display:block}
.footer__social .ln{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.footer__social .fl{fill:currentColor;stroke:none}
@media (pointer:coarse){.footer__social a{width:var(--tap);height:var(--tap)}}
.footer img{width:132px;aspect-ratio:25/13;height:auto;object-fit:cover;object-position:50% 38.3%}
.footer nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
/* 32px with a mouse, the full 44px tap target wherever the pointer is coarse.
   A blanket 44px added ~24px of footer height that only touch devices need;
   32px still clears the WCAG AA 24px minimum for pointer targets. */
.footer a{color:var(--cream);text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
@media (pointer:coarse){.footer a{min-height:var(--tap)}}
.footer a:hover,.footer a:focus-visible{color:var(--rose)}

/* Sticky CTA + cookie notice */
.stickybar{position:fixed;bottom:calc(var(--s3) + var(--cookie-h,0px));left:50%;transform:translateX(-50%);z-index:30;width:min(680px,calc(100vw - 24px));display:flex;gap:var(--s3);align-items:center;justify-content:space-between;background:rgba(36,26,20,.93);backdrop-filter:blur(8px);border:1px solid #4A382B;border-radius:var(--r3);padding:var(--s2) var(--s2) var(--s2) var(--s5);color:var(--cream);box-shadow:0 18px 44px -18px rgba(36,26,20,.6)}
.stickybar__txt{font-size:var(--fs-sm)}
.stickybar__txt b{font-weight:500;color:var(--rose)}
.stickybar .btn{padding:var(--s2) var(--s5);font-size:var(--fs-micro)}
@media(max-width:480px){.stickybar__txt span{display:none}}
.stickybar[hidden]{display:none}
.cookiebar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;gap:var(--s3);align-items:center;justify-content:center;flex-wrap:wrap;background:var(--espresso);color:var(--cream);padding:var(--s2) var(--pad);padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom,0px));font-size:var(--fs-sm);border-top:1px solid #3A2C21}
.cookiebar p{max-width:70ch}
.cookiebar a{color:var(--rose)}
.cookiebar .btn{padding:var(--s2) var(--s4);font-size:var(--fs-micro)}
.cookiebar__actions{display:flex;gap:var(--s2);align-items:center}
.cookiebar[hidden]{display:none}
.footer__privacy{border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Anchor targets must clear the sticky nav. Without this, a jump to #bogota
   parked the card at y=0 under a 67px bar: the date line "19-20 sep 2026 ·
   Colombia" was entirely hidden and the "Bogota" heading lost 17 of its 29px.
   --nav-h is measured in js/main.js (the nav is 67px at 390 wide, 75px at 667,
   so a fixed value would be wrong at one of them); the fallback covers no-JS. */
#top,#metodo,#maria,#tour,#sevilla,#orlando,#atlanta,
#servicios,#condiciones,#aviso-legal,#privacidad,#cookies{
  scroll-margin-top:calc(var(--nav-h,76px) + var(--s4))
}
/* Phones: keep the notice to a single compact row so it cannot swallow the
   hero CTAs. Measured at 375x667: the wrapped 2-line + own-row-button layout
   was 116px tall, its top edge at y=551, while .btn--primary sits at 546-590.
   Tightening it to ~64px moves the top edge to ~603 and clears the CTA. */
@media(max-width:560px){
  .cookiebar{flex-wrap:nowrap;gap:var(--s2);padding-left:var(--s4);padding-right:var(--s4);font-size:var(--fs-xs);line-height:1.35;text-align:left}
  .cookiebar p{margin:0;max-width:none}
  .cookiebar .btn{flex:none;white-space:nowrap;padding:var(--s2) var(--s3)}
  .cookiebar__actions{flex:none}
}

/* Short phones (iPhone SE class, 667px tall). Even with the compact notice at
   66px, the second hero CTA still landed under it at 602-647 vs a bar top of
   601. Reclaim ~55px from the hero's vertical rhythm so the whole .cta-row
   clears. Scoped to max-height so taller phones (390x844 clears by 117px) and
   every desktop width keep the roomy editorial spacing. */
@media(max-width:560px) and (max-height:700px){
  .hero{padding-top:var(--s6)}
  .hero h1{margin-top:var(--s2)}
  .hero .stroke{margin-top:0;margin-bottom:var(--s2)}
  .cta-row{margin-top:var(--s5)}
}

/* Legal pages — same shell as the site, a plain reading column inside. The
   text is María's own, ported verbatim from her published pages, so the
   styling only has to make it readable: one measure, clear headings, no
   decoration competing with it. */
.legal{padding:var(--section-y) var(--pad)}
.legal__inner{max-width:72ch;margin:0 auto}
.legal__back{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--caramel-deep);text-decoration:none;font-size:var(--fs-sm);letter-spacing:.04em}
.legal__back:hover,.legal__back:focus-visible{color:var(--ink)}
.legal .kicker{font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--caramel-deep);margin-top:var(--s5)}
.legal h1{font-size:clamp(30px,4.4vw,46px);margin:var(--s3) 0 var(--s2)}
.legal .legal-updated{font-size:var(--fs-sm);color:var(--ink-faint);margin-bottom:var(--s8)}
.legal .legal-body h2{font-family:var(--serif);font-weight:500;font-size:var(--fs-lg);line-height:1.2;margin:var(--s8) 0 var(--s3)}
.legal .legal-body h3{font-family:var(--serif);font-weight:600;font-size:var(--fs-base);line-height:1.3;margin:var(--s6) 0 var(--s2);color:var(--ink)}
.legal .legal-body p{color:var(--ink-soft);margin-bottom:var(--s4)}
.legal .legal-body a{color:var(--caramel-deep)}
.legal .legal-body a:hover,.legal .legal-body a:focus-visible{color:var(--ink)}
.legal .legal-body ul{margin:0 0 var(--s4) var(--s5);color:var(--ink-soft)}
.legal .legal-body li{margin-bottom:var(--s2)}

/* Embedded legal sections exist only in the single-file build, where the four
   pages have nowhere else to live. Hidden until their anchor is targeted, so
   the home page does not end in 1,200 words of terms; :target needs no JS and
   survives the artifact host. */
.legal--embedded{display:none}
.legal--embedded:target{display:block}
/* El CTA fijo dice «Cursos EE. UU. · Reservar mi plaza»: es el publico
   equivocado flotando sobre un menu de precios de cabina — y sobre los textos
   legales, donde ya lo hacia hoy. */
body:has(.legal--embedded:target) #stickybar{display:none}
/* Y con el panel abierto, fuera el resto de la portada: si no, la subpagina se
   lee como un apendice pegado debajo de la home en vez de como una pagina.
   Se ocultan los HIJOS de <main> y no <main> — el empaquetador mete los paneles
   dentro de main, asi que ocultar main los ocultaria tambien.
   Nada de esto afecta a la web servida: .legal--embedded solo existe en las dos
   entregas de un solo fichero; ahi cada pagina es su propio .html. */
body:has(.legal--embedded:target) main > *:not(.legal--embedded){display:none}

/* Servicios en cabina
   La coraza .legal esta pensada para un texto legal: una columna de 72ch, sin
   secciones ni variacion tonal. Era la unica pagina del sitio sin estructura y
   por eso se leia en blanco. Aqui recupera el vocabulario de las demas: ancho
   --maxw, un bloque por familia de servicio con su foto, y un cierre en
   espresso como el de .awards. Radios en --r3 (6px): la casa es de esquina
   casi recta y una tarjeta redondeada cantaria.
   La clase de alcance va en el <div class="legal-body svc">, NO en el
   <article>: el empaquetador se queda con el interior del article y regenera
   la etiqueta, asi que una clase puesta ahi desapareceria al empotrar. Por eso
   el ancho se abre con :has(), desde el contenedor que si sobrevive. */
.legal__inner:has(.svc){max-width:var(--maxw)}

.svc__head{margin-bottom:var(--s10)}
.svc__head h1{font-size:clamp(34px,5vw,56px);margin:var(--s3) 0 var(--s5);text-wrap:balance}
.svc__head .lede{font-size:var(--fs-lg);max-width:54ch}
/* Atajo para quien llega decidida: la carta es larga y no tiene sentido
   obligarla a recorrerla entera para encontrar el boton. Va en la cabecera,
   fuera de .legal-body, porque `.legal .legal-body a` (0,2,1) le ganaria a
   .btn--primary (0,1,0) y lo dejaria caramelo sobre caramelo. */
.svc__head-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.svc__head-cta span{font-size:var(--fs-sm);color:var(--ink-faint);max-width:30ch}

/* Un bloque por servicio, la foto alternando lado. Al voltear hay que invertir
   tambien la proporcion: moviendo solo la figura caia en la pista de 1.15fr y
   esa foto salia a 589px frente a los 435 de las demas. */
/* align-items:start, no center: entre 760 y 1100 la columna de texto se
   estrecha y crece a lo alto, y con center la foto quedaba flotando en
   mitad del hueco, con aire arriba y abajo. Alineada con el titulo, el
   desajuste se lee como una decision y no como un fallo. */
.svc__block{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:start;padding:var(--s12) 0;border-top:1px solid var(--line-alt)}
.svc__block--flip{grid-template-columns:1.15fr .85fr}
.svc__block--flip .svc__shot{order:2}
.svc__shot{margin:0;min-width:0}
/* El texto se centra contra la foto; la foto NO. Los tres bloques miden lo que
   mide la foto (599 px) y el texto va de 355 a 521, asi que alineados los dos
   arriba quedaban de 78 a 243 px muertos debajo del texto — un agujero al pie
   de cada bloque. Centrado, ese aire se reparte arriba y abajo y se lee como
   una decision.
   Va en align-self del texto y no en align-items de la reja a proposito: entre
   760 y 1100 la columna de texto se estrecha, crece a lo alto y pasa a ser la
   mas larga; con la reja centrada la foto quedaba flotando en mitad del hueco.
   Asi la foto sigue anclada arriba siempre, y cuando el texto es el mas alto
   este centrado no hace nada porque ya llena la fila. */
.svc__body{align-self:center;min-width:0}
/* 4/5 y no 3/4: con el texto alineado arriba, 3/4 dejaba la foto
   sobresaliendo hasta 225px por debajo. En 4/5 el mayor desajuste baja a
   189 y el menor a 20, y recorta menos que un cuadrado. */
.svc__shot img{display:block;width:100%;height:auto;aspect-ratio:var(--svc-frame);object-fit:cover;border-radius:var(--r3)}

/* Carrusel de fotos por servicio
   Un carril de scroll nativo con scroll-snap: lo arrastra el dedo, el trackpad
   y las flechas del teclado, y sin JavaScript sigue funcionando entero. Por eso
   los controles se construyen en js/main.js en vez de vivir en el marcado —
   asi el numero de puntos lo marca el HTML y no hay que mantenerlo a mano cada
   vez que Maria anade una foto. Mientras no haya JS el carril enseña su propia
   barra de scroll, que es entonces la unica pista de que hay mas fotos:
   ocultarla antes de tener puntos dejaria la segunda invisible.
   Las diapositivas miden el 100% del carril, asi que el indice actual es
   scrollLeft/clientWidth exacto y no hace falta observar nada. */
.svc__gallery{position:relative}
.legal-body.svc ul.svc__track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;border-radius:var(--r3);background:var(--espresso)}
/* .legal .legal-body li mete 8px bajo cada elemento: aqui son diapositivas. */
.legal-body.svc .svc__track>li{margin:0}
/* overflow:hidden aqui y no en el carril: la foto se amplia con scale y sin
   recorte propio ese sobrante entraria en el desplazamiento horizontal del
   carril, que dejaria de medir un ancho exacto por diapositiva y romperia a la
   vez el encaje y la cuenta de scrollLeft/clientWidth. */
.svc__slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;overflow:hidden}
/* El radio va en el carril, que es quien recorta. En cada foto se veria una
   esquina redonda cruzando el hueco a mitad de deslizamiento. */
/* Encuadre por foto: cada seccion vende una cosa — las pestañas o las cejas — y
   el retrato entero las deja del tamaño de una uña. --z es cuanto se amplia y
   --zx/--zy el punto sobre el que se amplia. Van en el style de cada <img>
   porque el punto depende de la postura de cada clienta, no del servicio.
   Para dejar un detalle que esta en p (fraccion del encuadre) centrado tras
   ampliar Z veces, el origen es o = (0.5 - p*Z) / (1 - Z).
   Sin translate a proposito. Con Z>=1 y el origen dentro del encuadre, el
   borde izquierdo se va a o*(1-Z) <= 0 y el derecho a o+(1-o)*Z >= 1: la foto
   solo puede cubrir de mas, nunca despegarse de un lado y enseñar la tarjeta
   de detras. Es lo que check_transform_budget vigila cuando hay translate;
   aqui no hace falta gastar presupuesto porque no lo hay. */
.svc__slide img{border-radius:0;transform-origin:var(--zx,50%) var(--zy,50%);scale:var(--z,1)}
.svc__track:focus-visible{outline:2px solid var(--caramel);outline-offset:3px}
/* Disolucion entre fotos: una copia de la que sale se queda encima mientras el
   carril salta por debajo, y se va difuminando hasta desaparecer sobre la nueva
   — que ya esta nitida debajo. Es la unica forma de tener dos fotos a la vez en
   un carril que las coloca en fila. Antes esto era opacity:0 sobre el carril
   entero: la foto se iba, se veia el hueco vacio y volvia otra.
   Al arrastrar con el dedo no hay disolucion: lo que se mueve con la mano se
   mueve, no se disuelve.

   La copia va DENTRO de un marco con overflow:hidden, igual que .svc__slide.
   Sin el, la copia lleva el scale del encuadre (hasta 1.7) y no la recorta
   nadie: se salia a 743x930 sobre una caja de 437x547 y tapaba media pagina
   con un borron. El marco se dimensiona solo contra el carril — misma anchura
   y misma proporcion que .svc__shot img — para no envolver al carril tambien.
   pointer-events:none es obligatorio: tapa el carril entero y sin eso se
   comeria el arrastre.
   El desenfoque va en la imagen, no en el marco: un filter se desborda de su
   propia caja aunque la caja recorte, asi que puesto en el marco volveria a
   pintar fuera. */
/* La duracion es --fade-ms, en :root: js/main.js la lee de ahi para saber cuando
   retirar la copia. Cambiarla en un solo sitio dejaria la copia retirandose a
   media disolucion, o de mas encima de la foto nueva. */
.svc__ghostwrap{position:absolute;left:0;top:0;width:100%;aspect-ratio:var(--svc-frame);overflow:hidden;
  border-radius:var(--r3);pointer-events:none;z-index:2;opacity:0}
.svc__ghost{display:block;width:100%;height:100%;object-fit:cover;filter:blur(0);
  transform-origin:var(--zx,50%) var(--zy,50%);scale:var(--z,1)}
.svc__ghostwrap--in{opacity:1}
/* Detras de --in a proposito: con las dos clases puestas gana esta por orden. */
.svc__ghostwrap--out{opacity:0;transition:opacity calc(var(--fade-ms) * 1ms) var(--flick)}
.svc__ghostwrap--out .svc__ghost{filter:blur(10px);transition:filter calc(var(--fade-ms) * 1ms) var(--flick)}
/* Con JS vivo el carril deja de desplazarse solo: el gesto lo recoge el script y
   lo convierte en la misma disolucion que las flechas. Un desplazamiento nativo
   es manipulacion directa — la foto va pegada al dedo — y eso no se puede
   disolver. overflow:hidden NO impide moverlo por codigo: scrollLeft sigue
   funcionando, que es lo que usa goTo().
   touch-action:pan-y es obligatorio: sin el, arrastrar sobre la foto en un movil
   deja de desplazar la pagina y la seccion se queda atrapada bajo el dedo.
   Sin JS no se pone esta clase y el carril sigue siendo un scroller normal con
   su barra, que es entonces la unica pista de que hay mas fotos. */
/* Hace falta (0,4,1) para ganarle a `.legal-body.svc ul.svc__track`, que declara
   overflow-x:auto — la misma trampa de especificidad que ya tienen ul.ticks y
   ul.svc__list en esta hoja. Escrito como `.svc__gallery--live .svc__track` se
   quedaba en (0,2,1) y perdia en silencio: el carril seguia desplazandose. */
.legal-body.svc .svc__gallery--live ul.svc__track{overflow-x:hidden;scroll-snap-type:none;touch-action:pan-y}
.svc__gallery--live .svc__track{scrollbar-width:none}
.svc__gallery--live .svc__track::-webkit-scrollbar{display:none}

.svc__carnav{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.svc__dots{display:flex;flex:1;justify-content:center}
.svc__dot{width:var(--tap);height:var(--tap);flex:none;display:grid;place-items:center;padding:0;background:none;border:0;cursor:pointer}
.svc__dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--caramel-line);opacity:.35;transition:opacity .3s var(--flick),transform .3s var(--flick)}
.svc__dot[aria-current="true"]::before{opacity:1;background:var(--caramel-deep);transform:scale(1.3)}
/* Las flechas solo desde 761px. A 375 el ancho da para seis puntos O para dos
   flechas y cuatro puntos, y en un movil el carril ya se arrastra con el dedo;
   en escritorio no hay gesto y hacen falta. */
.svc__arrow{display:none;width:var(--tap);height:var(--tap);flex:none;place-items:center;padding:0;background:none;border:1px solid var(--line-alt);border-radius:var(--r2);color:var(--caramel-deep);cursor:pointer;transition:border-color .3s var(--flick),opacity .3s var(--flick)}
@media(min-width:761px){.svc__arrow{display:grid}}
.svc__arrow:hover{border-color:var(--caramel-line)}
.svc__arrow[disabled]{opacity:.25;cursor:default}
.svc__dot:focus-visible,.svc__arrow:focus-visible{outline:2px solid var(--caramel);outline-offset:2px}
/* Cambiar de foto no se anuncia en ningun sitio: el punto activo es un cambio
   puramente visual y el scroll no mueve el foco. */
.svc__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.legal-body.svc .svc__body h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,38px);line-height:1.15;margin:0 0 var(--s4);text-wrap:balance}
.legal-body.svc .svc__body>p{max-width:46ch}
.legal-body.svc .eyebrow{margin-bottom:var(--s3)}

/* .legal .legal-body ul sangra 32px, que esta bien en unas condiciones y mal en
   una lista con su propia marca de verificacion. Hace falta (0,3,1) para
   ganarle sin recurrir a !important. */
.legal-body.svc ul.ticks{margin:var(--s4) 0;padding:0}
.legal-body.svc ul.svc__list{margin:var(--s5) 0 var(--s3);padding:0;list-style:none}
.legal-body.svc .svc__list li{display:flex;align-items:baseline;gap:var(--s2);margin:0;padding:var(--s3) 0;border-bottom:1px solid var(--line-alt)}
/* Guia de puntos entre nombre e importe, como una carta. Va como ::before con
   order para no meter un <span> vacio en el marcado. */
.legal-body.svc .svc__list li::before{content:"";order:1;flex:1 1 var(--s6);min-width:var(--s5);height:0;border-bottom:1px dotted var(--caramel-line);opacity:.5;transform:translateY(-5px)}
.svc__name{flex:0 1 auto;min-width:0;color:var(--ink)}
/* nowrap solo en el importe: es corto y su minimo no estrangula la fila, al
   reves que el CTA de .path__step, que si lo hacia. El nombre queda libre para
   partirse, que es lo que salva los 320px. */
.svc__price{order:2;flex:none;font-family:var(--serif);font-size:var(--fs-lg);color:var(--caramel-deep);font-variant-numeric:tabular-nums;white-space:nowrap}
.legal-body.svc .svc__note{font-size:var(--fs-sm);color:var(--ink-faint);margin:var(--s3) 0 0;max-width:44ch}
/* Un enlace por servicio, donde surge la decision: entre el CTA de la
   cabecera y el del cierre hay 3,9 pantallas seguidas sin nada que pulsar en
   movil. Mismo tratamiento que .path__step>a, que es el patron que la seccion
   de Sevilla ya usa para lo mismo, con su texto prerrellenado para que Maria
   sepa que quieren antes de contestar. */
.legal-body.svc .svc__ask{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:var(--s4);color:var(--caramel-deep);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:500;text-decoration:none;position:relative}
.legal-body.svc .svc__ask::after{content:"";position:absolute;left:0;bottom:11px;height:1px;width:100%;background:var(--caramel);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--flick)}
.legal-body.svc .svc__ask:hover::after,.legal-body.svc .svc__ask:focus-visible::after{transform:scaleX(1)}

/* Asesoria sin foto: rompe la cadena de bloques foto+texto antes de que se lea
   como plantilla, y no habia una cuarta imagen que mereciera estar. */
/* Asesoria no lleva foto — no habia una cuarta que mereciera estar — pero si
   la misma reja de dos columnas que el resto: como parrafo suelto a 62ch
   dejaba el 45% del ancho vacio al lado y se leia como una seccion huerfana.
   Titulo en la columna de las fotos, texto en la del contenido. */
/* column-gap y row-gap por separado, no `gap`. El hueco grande separa el titulo
   del texto — es horizontal — pero `gap` lo aplica tambien entre filas, y los
   dos parrafos van uno debajo del otro en la columna 2: se sumaban 51 px de
   reja + 16 px de margen y quedaban 67 px de agujero en mitad del texto. */
.svc__text{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:clamp(24px,4vw,56px);row-gap:var(--s4);align-items:start;padding:var(--s12) 0;border-top:1px solid var(--line-alt)}
.legal-body.svc .svc__text h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,32px);line-height:1.15;margin:0;text-wrap:balance}
/* La reja tiene dos columnas y la seccion tres hijos (h2 + dos parrafos),
   asi que el segundo caia a una fila nueva en la columna del titulo. Los
   parrafos se fijan a la columna 2 y se apilan ahi. */
.legal-body.svc .svc__text>p{grid-column:2;max-width:52ch;margin-bottom:0}

.svc__close{margin-top:var(--s12);background:var(--espresso);color:var(--cream);border-radius:var(--r3);padding:clamp(32px,5vw,64px) var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center}
.svc__close .eyebrow{color:var(--caramel-line);justify-content:center}
.svc__close .eyebrow::before{display:none}
/* 22ch partia la frase en tres. Desde 26ch son dos, medido de 760 a 1440;
   30ch deja margen. En movil se queda en tres y no hay arreglo: 56
   caracteres a 24px no entran en dos lineas de 335px. */
.svc__close h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.4vw,36px);line-height:1.2;margin:var(--s3) 0;max-width:30ch;text-wrap:balance}
.svc__close p{color:var(--on-dark-soft);max-width:44ch}
.svc__close .btn{margin-top:var(--s6)}
.svc__iva{margin-top:var(--s6);font-size:var(--fs-sm);color:var(--on-dark-faint);max-width:46ch}
.svc__iva a{color:var(--cream);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--caramel-line)}
.svc__iva a:hover,.svc__iva a:focus-visible{text-decoration-color:var(--cream)}

@media(max-width:760px){
  .svc__block{grid-template-columns:1fr;gap:var(--s6);padding:var(--s10) 0}
  .svc__block--flip .svc__shot{order:0}
  .svc__text{grid-template-columns:1fr;row-gap:var(--s4);padding:var(--s10) 0}
  /* Sin esto los parrafos siguen pidiendo la columna 2, y la reja se la
     inventa: a 375 la seccion volvia a salir en dos columnas apretadas. */
  .legal-body.svc .svc__text>p{grid-column:1}
  .svc__head{margin-bottom:var(--s8)}
}

/* CSS-only reveals: the no-JavaScript fallback, disabled once GSAP loads */
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    html:not(.gsap-on) [data-reveal]{animation:rise-in linear both;animation-timeline:view();animation-range:entry 5% entry 45%}
    @keyframes rise-in{from{opacity:0;transform:translateY(34px)}}
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html,.svc__track{scroll-behavior:auto}
}