/* Hallmark · genre: editorial · macrostructure: Marquee Hero · theme: custom · enrichment: E-photo (foto real tratada) · nav: N6 · footer: Ft1
 * H1 Marquee knobs: size=md, alignment=left-bias, underlay=photo
 * F3 Tabular knobs: columns=3, rules=every-row, numbers=tabular
 * T4 Stat strip knobs: 4 stats, tabular
 * C1 Outlined chip knobs: shape=slab, density=spacious, adornment=arrow
 * vibe: "barbería de barrio, clara y directa" · axes: light / geometric-sans / warm
 */

/* ============ Base ============ */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-display);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.hero :focus-visible, .foot :focus-visible, .mast :focus-visible {
  outline-color: var(--color-accent-light);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-sm); top: -4rem; z-index: 60;
  background: var(--color-accent); color: var(--color-paper);
  padding: var(--space-2xs) var(--space-sm);
  font-weight: var(--weight-medium); text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-sm); }

.section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  padding-block: var(--space-3xl);
}
#equipo { padding-block: var(--space-2xl); }
#donde  { padding-block-start: var(--space-2xl); }

.head-hang { padding-block-end: var(--space-lg); }
.head-hang h2 { font-size: var(--text-2xl); }

.lede {
  color: var(--color-muted);
  font-size: var(--text-md);
  max-width: var(--measure);
  margin-block-start: var(--space-2xs);
}

.note {
  color: var(--color-neutral);
  font-size: var(--text-sm);
  margin-block-start: var(--space-md);
  max-width: var(--measure);
}

/* ============ Nav (sobrio: el logo vive dentro de la imagen del hero) ============ */

.nav {
  background: var(--color-dark);
  border-bottom: var(--rule-hair) solid var(--color-dark-rule);
}
.nav__in {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.nav__mark {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  letter-spacing: 0.2em;
  color: var(--color-accent-light);
  text-decoration: none;
  line-height: 1;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.nav nav { margin-inline-start: auto; }
.nav nav ul {
  display: flex; align-items: center;
  gap: var(--space-md);
  list-style: none; margin: 0; padding: 0;
}
.nav nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-on-dark-mut);
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.nav nav a:hover { color: var(--color-on-dark); border-bottom-color: var(--color-accent-light); }

.nav__cta {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--space-md);
  border: 1px solid var(--color-accent-light);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-light);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}
.nav__cta:hover { background: var(--color-accent-light); color: var(--color-dark); }
.nav__cta:active { background: var(--color-accent-dim); border-color: var(--color-accent-dim); color: var(--color-on-dark); }

/* ============ Hero: retrato a la derecha, palabra a la izquierda ============ */

.hero {
  position: relative;
  min-block-size: clamp(34rem, 86svh, 52rem);
  display: grid;
  align-items: center;
  background: var(--color-dark);
  isolation: isolate;
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: 78% 45%;
  /* deriva lentísima: da vida sin que se note el bucle */
  animation: deriva 32s var(--ease-in-out) infinite alternate;
}

/* velo: negro sólido a la izquierda para que el texto agarre, limpio a la derecha */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(94deg,
      var(--color-dark) 0%,
      color-mix(in oklch, var(--color-dark) 92%, transparent) 34%,
      color-mix(in oklch, var(--color-dark) 45%, transparent) 58%,
      transparent 82%),
    linear-gradient(180deg,
      color-mix(in oklch, var(--color-dark) 55%, transparent) 0%,
      transparent 26%,
      color-mix(in oklch, var(--color-dark) 62%, transparent) 100%);
}

.hero__in {
  position: relative; z-index: 1;
  inline-size: 100%;
  max-inline-size: var(--page-max);
  margin-inline: auto;
  padding: var(--space-2xl) var(--page-gutter);
}

.hero__txt { max-inline-size: 34rem; }

.hero__logo { inline-size: auto; block-size: clamp(3.25rem, 5vw, 4.5rem); }

.hero__kicker {
  margin-block-start: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent-light);
}

.hero__title {
  margin-block-start: var(--space-xs);
  font-size: var(--text-display);
  line-height: 1.04;
  font-weight: var(--weight-semi);
  letter-spacing: -0.025em;
  color: var(--color-on-dark);
}
/* énfasis en oro, en redonda: la cursiva en display es un tic */
.hero__title em {
  font-style: normal;
  color: var(--color-accent-light);
}

.hero__sub {
  margin-block-start: var(--space-sm);
  color: var(--color-on-dark-mut);
  font-size: var(--text-md);
  max-inline-size: 42ch;
}

.hero__acciones {
  margin-block-start: var(--space-lg);
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm);
}

.hero .cta {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  color: var(--color-dark);
  margin-block-start: 0;
}
.hero .cta:hover { background: transparent; color: var(--color-accent-light); }
.hero .cta:active { background: var(--color-accent-dim); border-color: var(--color-accent-dim); color: var(--color-on-dark); }

.cta--ghost {
  background: transparent;
  border-color: color-mix(in oklch, var(--color-on-dark) 34%, transparent);
  color: var(--color-on-dark);
}
.hero .cta--ghost { background: transparent; color: var(--color-on-dark); border-color: color-mix(in oklch, var(--color-on-dark) 34%, transparent); }
.hero .cta--ghost:hover { background: color-mix(in oklch, var(--color-on-dark) 12%, transparent); color: var(--color-on-dark); border-color: var(--color-on-dark); }

.hero__prueba {
  margin-block-start: var(--space-lg);
  color: var(--color-on-dark-mut);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.hero__prueba b { color: var(--color-on-dark); }
.hero__est { color: var(--color-accent-light); letter-spacing: 0.1em; margin-inline-end: 0.35em; }

@keyframes deriva {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -0.8%, 0); }
}

/* ============ T4 · Stat strip ============ */

.stats {
  border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}
.stats dl {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-lg) var(--page-gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.stat dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--color-neutral);
}
.stat dd {
  margin: var(--space-3xs) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat dd span { color: var(--color-accent); font-size: 0.72em; }

/* ============ F3 · La carta ============ */

.carta {
  width: 100%;
  max-width: 56rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.carta thead th {
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--color-neutral);
  padding-block: 0 var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.carta tbody th {
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  text-align: left;
}
.carta td, .carta th { padding-block: var(--space-xs); }
.carta tbody tr { border-bottom: var(--rule-hair) solid var(--color-rule); }
.carta tbody tr:last-child { border-bottom: 0; }
.col-num { text-align: right; white-space: nowrap; }
.carta td.col-num { color: var(--color-neutral); font-size: var(--text-sm); }
.carta .price {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--text-md);
  color: var(--color-accent);
}

/* ============ Equipo ============ */

.equipo {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.equipo li { padding-block-start: var(--space-md); }
.equipo__nombre {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  line-height: 1.15;
}
.equipo__rol {
  color: var(--color-neutral);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  margin-block-start: var(--space-3xs);
}

/* ============ Dónde estamos ============ */

.donde {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  align-items: start;
}
.datos { margin: 0; }
.datos dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--color-neutral);
  padding-block-start: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.datos dt:first-child { padding-block-start: 0; border-top: 0; }
.datos dd { margin: var(--space-2xs) 0 var(--space-md); font-size: var(--text-base); }

.enlace {
  display: inline-flex; align-items: center; gap: 0.35em;
  min-height: 44px; margin-block-start: var(--space-3xs);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.enlace:hover { text-decoration-color: var(--color-accent); }
.enlace span { transition: transform var(--dur-mid) var(--ease-out); }
.enlace:hover span { transform: translateX(3px); }
.datos dd .enlace { display: flex; width: fit-content; }

.donde__mapa {
  margin: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-paper-3);
}
.donde__mapa iframe {
  display: block; width: 100%;
  aspect-ratio: 4 / 3; border: 0;
  filter: grayscale(0.85) contrast(1.02);
  transition: filter var(--dur-slow) var(--ease-out);
}
.donde__mapa:hover iframe { filter: none; }

/* ============ Cierre ============ */

.cierre {
  border-top: var(--rule-thick) solid var(--color-accent);
  text-align: left;
}
.cierre__title { font-size: var(--text-3xl); max-width: 16ch; }
.cierre__sub {
  color: var(--color-muted);
  font-size: var(--text-md);
  max-width: var(--measure);
  margin-block-start: var(--space-2xs);
}

.cta {
  display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 50px;
  margin-block-start: var(--space-lg);
  padding: var(--space-2xs) var(--space-lg);
  background: var(--color-accent);
  color: var(--color-paper);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-mid) var(--ease-out),
              color var(--dur-mid) var(--ease-out);
}
.cta:hover { background: transparent; color: var(--color-accent); }
.cta:active { background: var(--color-accent-dim); border-color: var(--color-accent-dim); color: var(--color-paper); }
.cta span { transition: transform var(--dur-mid) var(--ease-out); }
.cta:hover span { transform: translateX(3px); }

/* ============ Ft1 · Footer ============ */

.foot {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding: var(--space-2xl) var(--page-gutter);
  text-align: center;
  display: grid; gap: var(--space-2xs); justify-items: center;
}
.foot__mark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  letter-spacing: 0.18em;
  color: var(--color-accent-light);
}
.foot__tag { color: var(--color-on-dark-mut); font-size: var(--text-sm); }
.foot__links {
  font-size: var(--text-sm);
  margin-block-start: var(--space-2xs);
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 0 var(--space-2xs);
  color: var(--color-on-dark-mut);
}
.foot__links a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: var(--space-3xs);
  white-space: nowrap;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease-out);
}
.foot__links a:hover { color: var(--color-accent-light); }
.foot__addr { color: var(--color-on-dark-mut); font-size: var(--text-xs); }

/* ============ C4 · Barra fija (solo móvil) ============ */

.barra { display: none; }

/* ============ Responsive ============ */

@media (max-width: 60rem) {
  .donde { grid-template-columns: minmax(0, 1fr); }
  .donde__mapa iframe { aspect-ratio: 16 / 10; }
}

@media (max-width: 48rem) {
  .stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  /* marca + CTA arriba; los enlaces en una sola fila que se desliza,
     asi el nav nunca crece a tres lineas */
  .nav__in {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
    padding-block: var(--space-2xs);
  }
  .nav nav {
    margin-inline-start: 0; order: 3; inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
  }
  .nav nav::-webkit-scrollbar { display: none; }
  .nav nav ul { flex-wrap: nowrap; gap: var(--space-md); width: max-content; }
  .nav nav a { min-height: 44px; }
  .nav__mark { margin-inline-end: auto; }

  .hero__img { display: grid; }
  .hero__img picture, .hero__img picture img { grid-area: 1 / 1; }
  /* mas especifico que `.hero__img img`, que si no le impone width:100% */
  .hero__img img.hero__logo {
    display: block;
    grid-area: 1 / 1;
    align-self: center;
    justify-self: end;
    width: min(40%, 10rem);
    height: auto;
    margin-inline-end: clamp(0.75rem, 4vw, 2rem);
    filter: drop-shadow(0 2px 14px var(--color-dark));
  }
}

/* ---- hero en móvil: el rostro arriba, la palabra sobre la zona oscurecida ---- */
@media (max-width: 48rem) {
  .hero { min-block-size: auto; align-items: end; }
  /* el rostro vive a la derecha y a media altura de la foto */
  .hero__bg img { object-position: 76% 40%; }
  .hero__bg::after {
    background: linear-gradient(180deg,
      color-mix(in oklch, var(--color-dark) 20%, transparent) 0%,
      color-mix(in oklch, var(--color-dark) 16%, transparent) 24%,
      color-mix(in oklch, var(--color-dark) 68%, transparent) 46%,
      color-mix(in oklch, var(--color-dark) 93%, transparent) 60%,
      var(--color-dark) 72%);
  }
  /* el retrato ocupa el tercio alto; el CTA tiene que entrar sin hacer scroll */
  .hero__in { padding-block: 30svh var(--space-lg); }
  .hero__logo { block-size: 2.75rem; }
  .hero__kicker { margin-block-start: var(--space-2xs); }
  .hero__title { margin-block-start: var(--space-3xs); }
  .hero__acciones { margin-block-start: var(--space-md); }
  .hero__prueba { margin-block-start: var(--space-md); }
  .hero__txt { max-inline-size: 100%; padding-block: 0; }
  .hero__acciones .cta { flex: 1 1 auto; justify-content: center; }
}

/* pantallas muy bajas (SE de 1ª generación): sin foto arriba, todo al grano */
@media (max-width: 48rem) and (max-height: 620px) {
  .hero__in { padding-block: 10svh var(--space-sm); }
  .hero__logo { display: none; }
  .hero__prueba { margin-block-start: var(--space-sm); }
}

/* pantallas bajas (iPhone SE y compañía): el retrato cede sitio al CTA */
@media (max-width: 48rem) and (max-height: 780px) {
  .hero__in { padding-block: 20svh var(--space-md); }
  .hero__logo { block-size: 2.25rem; }
  .hero__sub { font-size: var(--text-base); }
}

@media (max-width: 40rem) {
  .section { padding-block: var(--space-2xl); }
  .nav nav a { font-size: var(--text-xs); }
  #equipo, #donde { padding-block: var(--space-2xl); }


  .carta thead { display: none; }
  .carta tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nombre precio" "dur precio";
    align-items: center;
    column-gap: var(--space-sm);
    padding-block: var(--space-xs);
  }
  .carta tbody th { grid-area: nombre; padding-block: 0; }
  .carta tbody td.col-num:first-of-type { grid-area: dur; text-align: left; padding-block: 0; }
  .carta tbody td.price { grid-area: precio; padding-block: 0; font-size: var(--text-lg); }

  body { padding-bottom: 4.25rem; }
  .barra {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    padding-bottom: max(var(--space-2xs), env(safe-area-inset-bottom));
    background: var(--color-dark);
    border-top: var(--rule-hair) solid var(--color-dark-rule);
  }
  .barra__txt {
    font-size: var(--text-sm);
    color: var(--color-on-dark-mut);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .barra__cta {
    display: inline-flex; align-items: center; gap: 0.35em;
    min-height: 44px; padding-inline: var(--space-md);
    background: var(--color-accent-light);
    color: var(--color-dark);
    font-family: var(--font-display);
    font-weight: var(--weight-semi);
    text-decoration: none; white-space: nowrap;
    border-radius: var(--radius-sm);
  }
  .barra__cta:active { background: var(--color-accent-dim); color: var(--color-on-dark); }
}

@media (max-width: 22.5rem) {
  .stats dl { gap: var(--space-sm); }
}

/* ============ Motion ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* nada de parpadeos: el neón aparece ya encendido */
  .hero__txt::after, .hero__txt::before { animation: none !important; opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ============ Widget de reseñas (datos reales de Booksy) ============ */

.op {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
  align-items: start;
}

/* --- resumen --- */
.op__resumen {
  border-top: var(--rule-thick) solid var(--color-accent);
  padding-block-start: var(--space-md);
}
.op__nota {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semi);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.op__estrellas { display: inline-flex; gap: 2px; margin-block-start: var(--space-2xs); }
.op__st { inline-size: 15px; block-size: 15px; fill: var(--color-accent); flex: none; }
.op__estrellas--lg .op__st { inline-size: 19px; block-size: 19px; }
.op__meta { margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.op__meta b { font-variant-numeric: tabular-nums; }
.op__fuente { display: flex; align-items: center; gap: 0.3em; margin-block-start: 0; color: var(--color-neutral); font-size: var(--text-xs); }
.op__fuente a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 2px;
  color: var(--color-neutral);
  text-underline-offset: 0.2em;
  text-decoration-color: var(--color-rule);
  transition: color var(--dur-fast) var(--ease-out);
}
.op__fuente a:hover { color: var(--color-accent); }

/* --- slider: scroll-snap nativo, sin librerías --- */
.op__slider { position: relative; min-width: 0; }

.op__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(18rem, 24vw, 24rem);   /* fijo: con minmax(0,…) las tarjetas se comprimen y no hay slider */
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  overscroll-behavior-x: contain;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--color-rule) transparent;
}
.op__pista:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.op__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
}

.op__texto {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.55;
  flex: 1;
}
.op__texto::before { content: "“"; }
.op__texto::after  { content: "”"; }

.op__pie { margin-block-start: var(--space-2xs); }
.op__quien { font-family: var(--font-display); font-weight: var(--weight-semi); font-size: var(--text-base); }
.op__detalle { color: var(--color-muted); font-size: var(--text-sm); }
.op__fecha { color: var(--color-neutral); font-size: var(--text-xs); margin-block-start: var(--space-3xs); }

/* --- flechas --- */
.op__nav { display: flex; gap: var(--space-2xs); margin-block-start: var(--space-sm); }
.op__flecha {
  inline-size: 44px; block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.op__flecha svg { inline-size: 20px; block-size: 20px; }
.op__flecha:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.op__flecha:active:not(:disabled) { background: var(--color-paper-3); }
.op__flecha:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 60rem) {
  .op { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .op__resumen { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); }
  .op__resumen .op__fuente { inline-size: 100%; }
}

@media (max-width: 40rem) {
  /* la pista sangra hasta el borde: se ve que hay más tarjetas detrás */
  .op__pista {
    grid-auto-columns: 78vw;
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    scroll-padding-inline-start: var(--page-gutter);
  }
}

/* horario en "Dónde estamos" */
.horario { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horario th {
  text-align: left; font-weight: var(--weight-regular);
  padding: 0 var(--space-md) var(--space-3xs) 0;
}
.horario td { color: var(--color-muted); padding-block-end: var(--space-3xs); white-space: nowrap; }

/* ============ Movimiento ============
 * Dos gestos, nada más: la entrada escalonada del hero y una aparición
 * suave al llegar a cada sección. Todo con transform+opacity, que la GPU
 * compone sin recalcular layout.
 */

/* — entrada del hero, en cascada — */
[data-rise] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: subir 0.85s var(--ease-out) both;
}
[data-rise="1"] { animation-delay: 0.10s; }
[data-rise="2"] { animation-delay: 0.20s; }
[data-rise="3"] { animation-delay: 0.30s; }
[data-rise="4"] { animation-delay: 0.42s; }
[data-rise="5"] { animation-delay: 0.54s; }
[data-rise="6"] { animation-delay: 0.66s; }

@keyframes subir {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* — aparición al hacer scroll — */
.rv {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.rv.vis { opacity: 1; transform: none; }
/* escalonado dentro de una misma sección */
.rv[data-d="1"] { transition-delay: 0.07s; }
.rv[data-d="2"] { transition-delay: 0.14s; }
.rv[data-d="3"] { transition-delay: 0.21s; }

/* — detalles premium — */
.carta tbody tr {
  transition: background-color var(--dur-fast) var(--ease-out);
}
.carta tbody tr:hover { background: var(--color-paper-2); }

.op__card {
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
.op__card:hover { transform: translateY(-3px); border-color: var(--color-accent-dim); }

.equipo li { transition: transform var(--dur-mid) var(--ease-out); }
.equipo li:hover { transform: translateY(-2px); }

/* el subrayado del nav crece desde el centro en vez de aparecer de golpe */
.nav nav a { position: relative; border-bottom: 0; }
.nav nav a::after {
  content: "";
  position: absolute; inset-inline: 0; inset-block-end: 6px;
  block-size: 1px;
  background: var(--color-accent-light);
  transform: scaleX(0);
  transition: transform var(--dur-mid) var(--ease-out);
}
.nav nav a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  /* sin gestos: todo llega ya colocado */
  [data-rise] { animation: none !important; opacity: 1; transform: none; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__bg img { animation: none !important; transform: scale(1.04); }
  .op__card:hover, .equipo li:hover { transform: none; }
}