/* Taller de piel, cabello y alimentación · Ana Ortiz
   Estilos construidos con los tokens del design system «Ana Ortiz». */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color */
  --background: #fafaf8;
  --foreground: #12211f;
  --ink: #12211f;
  --ink-foreground: #f2f1ec;
  --ink-muted: #9aa8a3;
  --secondary: #f1f0eb;
  --muted-foreground: #5c6663;
  --accent: #9a6b3c;
  --rule: #d7d6ce;
  --rule-invert: #2c3b38;
  /* tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  /* espaciado: múltiplos de 4 px */
  --s: .25rem;
  --shell: 88rem;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-wrap: balance;
}
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 1rem; z-index: 60;
  padding: calc(var(--s) * 2) calc(var(--s) * 4);
  background: var(--ink); color: var(--ink-foreground);
}
.skip:focus { left: 1rem; }

/* ---------- utilidades de marca ---------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: calc(var(--s) * 5); }
.eyebrow {
  display: flex; align-items: center; gap: calc(var(--s) * 3);
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-foreground);
}
/* el bronce va como marca, no como texto pequeño: una línea antes del antetítulo */
.eyebrow::before { content: ""; flex: none; width: calc(var(--s) * 6); height: 1px; background: var(--accent); }
.on-ink .eyebrow { color: var(--ink-muted); }
.display-xl { font-size: clamp(3rem, 9vw, 6rem); line-height: .96; letter-spacing: -.035em; }
.display-lg { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; }
.display-md { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -.025em; }
.eyebrow + h2 { margin-top: calc(var(--s) * 6); }
.lead { max-width: 66ch; font-size: 1.05rem; color: var(--muted-foreground); }
.measure { max-width: 66ch; }
.rule-top { border-top: 1px solid var(--rule); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(var(--s) * 3.5) calc(var(--s) * 6);
  background: var(--ink); color: var(--ink-foreground);
  font-size: .875rem; line-height: 1.25rem; font-weight: 500; letter-spacing: .025em;
  text-decoration: none;
  border: 0; border-radius: 0; font-family: inherit; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.btn--inverse { background: var(--background); color: var(--foreground); }
.link {
  padding-bottom: calc(var(--s) * .5);
  border-bottom: 1px solid var(--accent);
  font-size: .875rem; line-height: 1.25rem; text-decoration: none;
}
@media (hover: hover) {
  .btn:hover { background: color-mix(in oklab, var(--ink) 90%, transparent); }
  .btn--inverse:hover { background: color-mix(in oklab, var(--background) 90%, transparent); }
}

section { scroll-margin-top: 5rem; }
.section { padding-block: calc(var(--s) * 24); }
.section__head { display: grid; gap: calc(var(--s) * 6); }
.section__body { margin-top: calc(var(--s) * 16); }

/* ---------- cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--rule);
  background: var(--background);
  background: color-mix(in oklab, var(--background) 95%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--s) * 6); padding-block: calc(var(--s) * 4); }
.site-header__logo img { width: auto; height: calc(var(--s) * 9); }
.site-nav { display: none; align-items: center; gap: calc(var(--s) * 8); }
.site-nav a:not(.btn) {
  padding-bottom: calc(var(--s) * .5); border-bottom: 1px solid transparent;
  font-size: .9rem; color: var(--foreground); color: color-mix(in oklab, var(--foreground) 75%, transparent);
  text-decoration: none; transition: color .15s var(--ease), border-color .15s var(--ease);
}
@media (hover: hover) { .site-nav a:not(.btn):hover { color: var(--foreground); border-color: var(--accent); } }
.site-header__cta { padding: calc(var(--s) * 2.5) calc(var(--s) * 4); }

/* ---------- portada ---------- */
.hero { border-bottom: 1px solid var(--rule); }
.hero__grid { display: grid; }
.hero__text { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--s) * 14) calc(var(--s) * 5) calc(var(--s) * 16); }
.hero__grid > * { min-width: 0; }
/* «alimentación» es una palabra larga: el titular se ajusta para que nunca desborde su columna */
.hero h1 { margin-top: calc(var(--s) * 8); font-size: clamp(2.5rem, 12vw, 4.5rem); }
.hero .lead { margin-top: calc(var(--s) * 8); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: calc(var(--s) * 10); border-top: 1px solid var(--rule); }
.facts > div { padding: calc(var(--s) * 4) calc(var(--s) * 4) calc(var(--s) * 4) 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-foreground); }
.facts dd { margin-top: calc(var(--s) * 1); font-size: .98rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--s) * 8); margin-top: calc(var(--s) * 10); }
.hero__note { margin-top: calc(var(--s) * 5); font-size: .875rem; color: var(--muted-foreground); }
.hero__media { border-top: 1px solid var(--rule); }
.hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }

/* ---------- credenciales ---------- */
.creds { background: var(--ink); color: var(--ink-foreground); }
.creds ul { display: flex; flex-direction: column; padding-block: calc(var(--s) * 6); font-size: .82rem; }
.creds li { padding-block: calc(var(--s) * 3); }
.creds li:not(:last-child) { border-bottom: 1px solid var(--rule-invert); }

/* ---------- el taller ---------- */
.intro__text { display: grid; gap: calc(var(--s) * 6); margin-top: calc(var(--s) * 10); font-size: 1.05rem; color: var(--muted-foreground); }
.blocks { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.block { display: flex; flex-direction: column; gap: calc(var(--s) * 6); padding: calc(var(--s) * 8); background: var(--background); }
.block h3 { font-size: 2.25rem; line-height: 2.5rem; overflow-wrap: anywhere; }
.block p { max-width: 54ch; font-size: 1rem; color: var(--muted-foreground); }

/* ---------- programa ---------- */
.steps { display: grid; counter-reset: paso; }
.step { border: 1px solid var(--rule); background: var(--background); padding: calc(var(--s) * 10) calc(var(--s) * 6); }
.step + .step { margin-top: -1px; }
.step__num { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: calc(var(--s) * 6); font-size: 1.125rem; line-height: 1.75rem; }
.step p { margin-top: calc(var(--s) * 3); font-size: .95rem; color: var(--muted-foreground); }
.step .step__time { margin-top: calc(var(--s) * 6); font-size: .7rem; font-weight: 500; letter-spacing: .22em; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.step .step__time + h3 { margin-top: calc(var(--s) * 2); }
.program__note { font-size: 1.02rem; color: var(--muted-foreground); }

/* ---------- qué incluye ---------- */
.includes { border-top: 1px solid var(--rule); }
.includes li { display: grid; grid-template-columns: 3.5rem 1fr; align-items: baseline; padding-block: calc(var(--s) * 6); border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
.includes li span { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- entradas ---------- */
.tickets { background: var(--secondary); border-block: 1px solid var(--rule); }
.tickets__grid { display: grid; gap: calc(var(--s) * 6); }
.ticket { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--background); }
.ticket__head { padding: calc(var(--s) * 8); }
.ticket__kind { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-foreground); }
.ticket h3 { margin-top: calc(var(--s) * 3); font-size: 2.25rem; line-height: 2.5rem; }
.ticket__prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--rule); container-type: inline-size; }
.price { padding: calc(var(--s) * 6) calc(var(--s) * 8); }
.price + .price { border-left: 1px solid var(--rule); }
.price__amount { display: block; font-family: var(--font-display); font-size: 3rem; font-size: clamp(1.625rem, calc((50cqi - 4.25rem) / 2.5), 3rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price__note { display: block; margin-top: calc(var(--s) * 3); font-size: .875rem; line-height: 1.25rem; color: var(--muted-foreground); }
.price--later .price__amount { color: var(--muted-foreground); }
.price__ended { display: none; }
.is-late .price--early .price__amount { color: var(--muted-foreground); text-decoration: line-through; text-decoration-thickness: 1px; }
.is-late .price--early .price__ended { display: inline; }
.is-late .price--later .price__amount { color: var(--foreground); }
.ticket__list { flex: 1; padding: calc(var(--s) * 8); font-size: .98rem; }
.ticket__list li { position: relative; padding-left: calc(var(--s) * 6); }
.ticket__list li + li { margin-top: calc(var(--s) * 3); }
.ticket__list li::before { content: ""; position: absolute; left: 0; top: .82em; width: calc(var(--s) * 3); height: 1px; background: var(--accent); }
.ticket__action { padding: 0 calc(var(--s) * 8); }
.ticket__action .btn { width: 100%; }
.ticket__small { padding: calc(var(--s) * 4) calc(var(--s) * 8) calc(var(--s) * 8); font-size: .875rem; line-height: 1.5; color: var(--muted-foreground); }
.btn[aria-disabled="true"] { background: transparent; color: var(--muted-foreground); border: 1px solid var(--rule); cursor: default; }

/* ---------- condiciones de reserva ---------- */
.terms { margin-top: calc(var(--s) * 16); border-top: 1px solid var(--rule); padding-top: calc(var(--s) * 8); }
.terms__title { font-size: 1.5rem; line-height: 2rem; }
.terms__list { display: grid; gap: calc(var(--s) * 6); margin-top: calc(var(--s) * 6); }
.terms__list dt { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-foreground); }
.terms__list dd { margin-top: calc(var(--s) * 2); max-width: 54ch; font-size: .95rem; }
.terms__list a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.when-late { display: none; }
.when-full { display: none; }
.ticket.is-full .when-full { display: inline; }
.ticket.is-full .when-open { display: none; }
.ticket.is-full .price__amount { color: var(--muted-foreground); }
.ticket__small a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.is-late .when-late { display: inline; }
.is-late .when-early { display: none; }

/* ---------- quién lo imparte ---------- */
.host { background: var(--ink); color: var(--ink-foreground); }
.host__grid { display: grid; }
.host__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% 30%; }
.host__text { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--s) * 20) calc(var(--s) * 5); }
.host h2 { margin-top: calc(var(--s) * 6); }
.host__text p:not(.eyebrow) { max-width: 66ch; margin-top: calc(var(--s) * 6); font-size: 1.02rem; color: var(--ink-muted); }
.host__text .host__license { font-size: .875rem; }
.host__text .link { align-self: flex-start; margin-top: calc(var(--s) * 8); }

/* ---------- lugar ---------- */
.venue__grid { display: grid; gap: calc(var(--s) * 10); }
.venue__card { border: 1px solid var(--rule); }
.venue__card > div { padding: calc(var(--s) * 8); }
.venue__card > div + div { border-top: 1px solid var(--rule); }
.venue__card h3 { font-size: 1.5rem; line-height: 2rem; }
.venue__card p { margin-top: calc(var(--s) * 3); font-size: .98rem; }
.venue__card p.muted { color: var(--muted-foreground); }
.venue__card .link { display: inline-block; margin-top: calc(var(--s) * 6); }

.split { display: grid; gap: calc(var(--s) * 10); }


/* ---------- eje intestino-cerebro-piel (banda en tinta, dibujos propios en línea) ---------- */
.eje { --eje-tinta: var(--ink-foreground); --eje-fondo: var(--ink); --eje-acento: var(--accent); --eje-suave: #566360; --eje-d: clamp(4.5rem, 25.5vw, 11.5rem); padding-block: calc(var(--s) * 16); background: var(--ink); color: var(--ink-foreground); }
.eje__inner { display: grid; gap: calc(var(--s) * 10); align-items: center; }
.eje h2.eyebrow { font-family: var(--font-sans); font-weight: 500; line-height: 1.4; text-wrap: wrap; }
.eje__inner > * { min-width: 0; }
.eje__frase { margin-top: calc(var(--s) * 5); max-width: 44ch; font-size: 1.02rem; color: var(--ink-muted); }
.eje__fila { display: grid; grid-template-columns: auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto; align-items: start; }
.eje__item { display: grid; justify-items: center; gap: calc(var(--s) * 3); }
.eje__dibujo { display: block; width: var(--eje-d); height: var(--eje-d); }
.eje__nombre { font-size: .625rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.eje__enlace { position: relative; display: flex; align-items: center; justify-content: center; height: var(--eje-d); }
.eje__enlace::before { content: ""; position: absolute; inset-inline: calc(var(--s) * 1); top: 50%; border-top: 1.5px dotted var(--eje-acento); }
.eje__flechas { position: relative; display: none; width: 1.875rem; height: .75rem; padding-inline: .25rem; box-sizing: content-box; background: var(--eje-fondo); }
@media (width >= 40rem) { .eje__flechas { display: block; } .eje__nombre { font-size: .7rem; letter-spacing: .22em; } }
@media (width >= 64rem) { .eje { padding-block: calc(var(--s) * 20); } .eje__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--s) * 16); } }
\n\n/* ---------- mapa ---------- */
/* El plano fijo (OpenStreetMap) se ve siempre y no usa cookies. El mapa interactivo de Google lo sustituye al aceptar las cookies. */
.map { margin: 0; border-top: 1px solid var(--rule); }
.map--framed { margin-top: calc(var(--s) * 8); border: 1px solid var(--rule); }
.map__view { position: relative; height: 17.5rem; overflow: hidden; background: #e9e9e4; }
.map__static { display: block; width: 100%; height: 100%; max-width: none; object-fit: none; object-position: center; }
.map__osm { position: absolute; right: 0; bottom: 0; padding: calc(var(--s) * .5) calc(var(--s) * 2); background: var(--background); font-size: .7rem; line-height: 1.4; color: var(--foreground); }
.map__osm:hover { text-decoration: underline; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--s) * 2) calc(var(--s) * 6); padding: calc(var(--s) * 4) calc(var(--s) * 8); border-top: 1px solid var(--rule); font-size: .875rem; line-height: 1.5; }
.venue__card .map__bar .link { margin-top: 0; }
.map__note { flex-basis: 100%; font-size: .8rem; color: var(--muted-foreground); }
.map.is-loaded [data-map-load], .map.is-loaded .map__note,
html:not(.con-mapa) .map [data-map-load], html:not(.con-mapa) .map__note { display: none; }

/* ---------- preguntas ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--s) * 6);
  padding-block: calc(var(--s) * 6); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-sans); font-weight: 400; font-size: 1.25rem; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { max-width: 66ch; padding-bottom: calc(var(--s) * 8); color: var(--muted-foreground); }
.faq__contact { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(var(--s) * 2) calc(var(--s) * 6); padding-block: calc(var(--s) * 6); border-bottom: 1px solid var(--rule); text-decoration: none; }
.faq__contact-q { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.faq__contact-a { padding-bottom: calc(var(--s) * .5); border-bottom: 1px solid var(--accent); font-size: .875rem; line-height: 1.25rem; }

/* ---------- reserva ---------- */
.booking { background: var(--ink); color: var(--ink-foreground); }
.booking__inner { display: grid; gap: calc(var(--s) * 10); padding-block: calc(var(--s) * 24); }
.booking__logo { justify-self: end; width: auto; height: calc(var(--s) * 12); opacity: .9; }
.booking h2 { margin-top: calc(var(--s) * 6); }
.booking__side { display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--s) * 6); }
.booking__side p { max-width: 66ch; font-size: .98rem; color: var(--ink-muted); }
.booking__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--s) * 6); }

/* ---------- pie ---------- */
.site-footer { border-top: 1px solid var(--rule); }
.site-footer__inner { display: grid; gap: calc(var(--s) * 12); padding-block: calc(var(--s) * 16); }
.site-footer__logo { width: auto; height: calc(var(--s) * 11); }
.site-footer__about, .site-footer__license { margin-top: calc(var(--s) * 6); font-size: .875rem; line-height: 1.25rem; }
.site-footer__about { max-width: 66ch; color: var(--muted-foreground); }
.site-footer__license span { color: var(--muted-foreground); }
.site-footer__col { font-size: .875rem; line-height: calc(1.25 / .875); }
.site-footer__col h2 { font-family: var(--font-sans); font-size: .7rem; font-weight: 500; letter-spacing: .22em; line-height: inherit; text-transform: uppercase; color: var(--muted-foreground); }
.site-footer__col ul { margin-top: calc(var(--s) * 5); }
.site-footer__col li + li { margin-top: calc(var(--s) * 2.5); }
.site-footer__col a { text-decoration: none; }
@media (hover: hover) { .site-footer__col a:hover { color: var(--accent); } }
.site-footer__legal { border-top: 1px solid var(--rule); }
.site-footer__legal p { padding-block: calc(var(--s) * 6); font-size: .75rem; line-height: 1.625; color: var(--muted-foreground); }

/* ---------- página de confirmación ---------- */
.confirm { border-bottom: 1px solid var(--rule); }
.confirm__grid { display: grid; gap: calc(var(--s) * 12); padding-block: calc(var(--s) * 16) calc(var(--s) * 20); }
.confirm__main > .eyebrow + h1 { margin-top: calc(var(--s) * 6); }
.confirm__main .lead { margin-top: calc(var(--s) * 8); }
.confirm__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.confirm__note { max-width: 66ch; margin-block: calc(var(--s) * 8); font-size: .95rem; color: var(--muted-foreground); }
.confirm__side { align-self: start; border: 1px solid var(--rule); }
.confirm__h { padding: calc(var(--s) * 8) calc(var(--s) * 8) calc(var(--s) * 6); font-size: 1.5rem; line-height: 2rem; }
.cal { border-top: 1px solid var(--rule); }
.cal a { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--s) * 4); padding: calc(var(--s) * 5) calc(var(--s) * 8); border-bottom: 1px solid var(--rule); font-size: 1rem; text-decoration: none; transition: background-color .15s var(--ease); }
.cal a span { color: var(--accent); }
@media (hover: hover) { .cal a:hover { background: var(--secondary); } }
.cal__note { padding: calc(var(--s) * 6) calc(var(--s) * 8) calc(var(--s) * 8); font-size: .875rem; line-height: 1.5; color: var(--muted-foreground); }
.terms--plain { margin-top: 0; border-top: 0; padding-top: 0; }
.site-header__inner > .link { flex: none; }
@media (width >= 64rem) {
  .confirm__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--s) * 8); padding-block: calc(var(--s) * 24); }
  .confirm__main { grid-column: span 7; padding-right: calc(var(--s) * 8); }
  .confirm__side { grid-column: 8 / span 5; }
}

/* ---------- aviso de cookies ---------- */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; border-top: 1px solid var(--rule); background: var(--background); }
.cookies[hidden] { display: none; }
.cookies__inner { display: flex; flex-direction: column; gap: calc(var(--s) * 4); padding-block: calc(var(--s) * 5); }
.cookies__text { max-width: 72ch; font-size: .875rem; line-height: 1.5; }
.cookies__text a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cookies__actions { display: flex; gap: calc(var(--s) * 3); }
.cookies__actions .btn { flex: 1; padding-block: calc(var(--s) * 2.5); }
.linkbtn { margin: 0; padding: 0; text-align: left; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; cursor: pointer; }
.site-footer__legal a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.site-footer__legal p + p { padding-top: 0; }
@media (width >= 48rem) {
  .cookies__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--s) * 8); }
  .cookies__actions { flex: none; }
  .cookies__actions .btn { flex: none; min-width: 9rem; }
}

/* ---------- aparición ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s, transform .7s; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- desde 40rem ---------- */
@media (width >= 40rem) {
  .hero__media img { aspect-ratio: 4 / 3; }
  .host__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .host__media { position: relative; min-height: 32rem; }
  .host__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2) { margin-top: 0; }
  .step:nth-child(even) { margin-left: -1px; }
}

/* ---------- desde 48rem ---------- */
@media (width >= 48rem) {
  .shell { padding-inline: calc(var(--s) * 10); }
  .section { padding-block: calc(var(--s) * 32); }
  .section__head { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--s) * 8); align-items: end; }
  .section__head > :first-child { grid-column: span 6; }
  .section__head > :nth-child(2) { grid-column: 8 / span 5; }
  .hero__text { padding-inline: calc(var(--s) * 10); }
  .creds ul { flex-direction: row; align-items: center; }
  .creds li { padding: calc(var(--s) * 1) calc(var(--s) * 6); }
  .creds li:not(:last-child) { border-bottom: 0; border-right: 1px solid var(--rule-invert); }
  .creds li:first-child { padding-left: 0; }
  .creds li:last-child { padding-right: 0; }
  .blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block { padding: calc(var(--s) * 10); gap: calc(var(--s) * 12); }
  .block h3 { font-size: clamp(1.375rem, calc((100vw - 22rem) / 19.5), 3rem); line-height: 1; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { padding-inline: calc(var(--s) * 7); }
  .step:nth-child(n) { margin-top: 0; margin-left: 0; }
  .step:nth-child(n + 4) { margin-top: -1px; }
  .step:not(:nth-child(3n + 1)) { margin-left: -1px; }
  .tickets__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); gap: 0 calc(var(--s) * 8); }
  /* las cinco filas de cada entrada comparten altura con la de al lado: los botones quedan alineados */
  .ticket { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .terms__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--s) * 8); }
  .host__text { padding-inline: calc(var(--s) * 14); }
  .venue__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--s) * 8); }
  .venue__grid > :first-child { grid-column: span 5; }
  .venue__grid > :last-child { grid-column: 7 / span 6; }
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--s) * 8); }
  .split > :first-child { grid-column: span 4; }
  .split > :last-child { grid-column: 6 / span 7; }
  .booking__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: calc(var(--s) * 24) calc(var(--s) * 32); }
  .booking__logo { grid-column: 1 / -1; margin-bottom: calc(var(--s) * 6); }
  .booking__main { grid-column: span 7; }
  .booking__side { grid-column: span 5; }
  .site-footer__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .site-footer__brand, .site-footer__col, .site-footer__col:last-child { grid-column: span 4; }
}

/* ---------- desde 64rem ---------- */
@media (width >= 64rem) {
  .site-nav { display: flex; }
  .site-header__cta--compact { display: none; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero__text { grid-column: span 7; padding-block: calc(var(--s) * 24); padding-right: calc(var(--s) * 16); }
  .hero h1 { font-size: clamp(3.5rem, 6.4vw, 6rem); }
  .hero__media { position: relative; grid-column: span 5; min-height: min(86vh, 54rem); border-top: 0; border-left: 1px solid var(--rule); }
  .hero__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .hero__grid, .host__grid { max-width: var(--shell); margin-inline: auto; }
  .hero__grid { padding-right: clamp(0px, calc((100vw - var(--shell)) / 2), calc(var(--s) * 10)); }
  .host__grid { padding-left: clamp(0px, calc((100vw - var(--shell)) / 2), calc(var(--s) * 10)); }
  .host__grid { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
  .site-footer__brand { grid-column: span 5; }
  .site-footer__col { grid-column: span 3; }
  .site-footer__col:last-child { grid-column: span 4; }
  .host__media { min-height: 36rem; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- desde 80rem ---------- */
@media (width >= 80rem) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- páginas legales ---------- */
.legal { border-bottom: 1px solid var(--rule); }
.legal__grid { display: grid; gap: calc(var(--s) * 12); padding-block: calc(var(--s) * 16) calc(var(--s) * 20); }
.legal__grid > * { min-width: 0; }
.legal__head > .eyebrow + h1 { margin-top: calc(var(--s) * 6); }
.legal__date { margin-top: calc(var(--s) * 6); font-size: .875rem; color: var(--muted-foreground); }
.legal__nav { margin-top: calc(var(--s) * 10); border-top: 1px solid var(--rule); }
.legal__nav a { display: block; padding-block: calc(var(--s) * 3.5); border-bottom: 1px solid var(--rule); font-size: .95rem; text-decoration: none; transition: color .2s var(--ease); }
.legal__nav a[aria-current="page"] { color: var(--muted-foreground); }
@media (hover: hover) { .legal__nav a:hover { color: var(--accent); } }
.legal__body { max-width: 68ch; }
.legal__body > * + * { margin-top: calc(var(--s) * 5); }
.legal__lead { font-size: 1.1rem; color: var(--muted-foreground); }
.legal__body h2 { margin-top: calc(var(--s) * 14); padding-top: calc(var(--s) * 8); border-top: 1px solid var(--rule); font-size: 1.6rem; line-height: 1.15; letter-spacing: -.02em; }
.legal__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body ul, .legal__body ol { display: grid; gap: calc(var(--s) * 3); }
.legal__body ul > li { position: relative; padding-left: calc(var(--s) * 6); }
.legal__body ul > li::before { content: ""; position: absolute; left: 0; top: .82em; width: calc(var(--s) * 3); height: 1px; background: var(--accent); }
.legal__body ol { counter-reset: paso; }
.legal__body ol > li { position: relative; padding-left: calc(var(--s) * 9); counter-increment: paso; }
.legal__body ol > li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: .45em; font-size: .7rem; font-weight: 500; letter-spacing: .12em; line-height: 1.4; color: var(--accent); }
.legal__body a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.legal__table { overflow-x: auto; border: 1px solid var(--rule); }
.legal__table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9rem; line-height: 1.5; }
.legal__table th, .legal__table td { padding: calc(var(--s) * 3.5) calc(var(--s) * 4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.legal__table tr:last-child td { border-bottom: 0; }
.legal__table th { font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); background: var(--secondary); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 2) calc(var(--s) * 6); }
.terms__more { margin-top: calc(var(--s) * 8); font-size: .95rem; }
.terms__privacy { margin-top: calc(var(--s) * 6); max-width: 66ch; font-size: .8rem; line-height: 1.6; color: var(--muted-foreground); }
.terms__privacy a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
@media (width >= 64rem) {
  .legal__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(var(--s) * 8); padding-block: calc(var(--s) * 24); }
  .legal__head { grid-column: span 4; align-self: start; position: sticky; top: 6.5rem; }
  .legal__body { grid-column: 6 / span 7; }
}
