:root {
  color-scheme: light;
  /* Misma paleta de marca que el formulario y el dashboard (ver formulario/styles.css). */
  --color-cream: #E8DFD1;
  --color-card: #F6EEDD;
  --color-olive: #53624E;
  --color-terracotta: #53624E;
  --color-ink: #17140F;
  /* Versión más suave del ink, tibia en vez de negro puro -- para franjas
     grandes de fondo (ticker, el corte del divisor) donde el negro
     directo se sentía muy pesado en pantalla. */
  --color-ink-soft: #332B21;
  --color-shadow: rgba(23, 20, 15, 0.14);
  /* Acentos nuevos, misma familia cálida que terracota/oliva, para que
     las categorías se distingan de un vistazo sin salirse de la marca. */
  --color-wine: #7A2E3D;
  --color-gold: #B9862F;
  --color-slate: #3E5C6B;
  --color-ink-muted: #5B564C;
  --color-terracotta-text: #3E4A3B;
  --color-gold-text: #7A5720;
  --radius-lg: 24px;
  --radius-md: 14px;
  --font-family: "Inter", sans-serif;
  /* Serif elegante -- formal y artesanal, más "bar serio" que el trazo
     grueso pintado a mano que se probó antes (Luckiest Guy) o la geométrica
     que se usaba antes de eso. */
  --font-display: "Emblema Headline 1 Basic", "Fraunces", "Inter", sans-serif;
}

@font-face {
  font-family: "Emblema Headline 1 Basic";
  src: url("assets/Emblema-Headline1-Basic.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

/* Selector de idioma -- un solo botón que muestra el idioma ACTUAL ("ES"
   al arrancar) y alterna al otro con cada clic, en vez de dos botones
   mostrando los dos idiomas todo el tiempo. Vive adentro de .quicknav (ver
   más abajo), ya no flota fijo sobre el hero: al quedar esa franja pegada
   arriba del todo, un elemento fixed en la misma esquina se le pisaba
   encima. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1.5px solid var(--nav-lang-border, rgba(23, 20, 15, 0.18));
  border-radius: 999px;
  background: var(--nav-lang-bg, rgba(23, 20, 15, 0.04));
  color: var(--nav-text, rgba(23, 20, 15, 0.6));
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 220ms ease;
}

.lang-toggle:hover {
  color: var(--nav-text-hover, var(--color-ink));
  background: var(--nav-hover-bg, rgba(23, 20, 15, 0.06));
}

* {
  box-sizing: border-box;
}

/* La barra de navegación es "fixed" (ver .quicknav) y queda flotando
   siempre arriba del todo -- sin esto, saltar a una sección con los links
   de esa barra (o con el botón "Volver arriba" del scroll) dejaba el
   título de la sección tapado detrás de la barra en vez de justo debajo. */
#quienes-somos,
#eventos,
#galeria,
#comunidad,
#paths {
  scroll-margin-top: 64px;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-ink);
  background: var(--color-cream);
  overflow-x: hidden;
}

/* Ave de marca: destello breve al entrar al sitio, no una animación
   permanente -- aparece, se sostiene un instante y se desvanece.
   position: absolute para que no empuje al resto del contenido cuando
   desaparece (el h1 queda centrado como si nunca hubiera estado ahí). */
.hero-mark-intro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
  opacity: 0;
  animation: heroMarkFlash 600ms ease-in-out both;
}

@keyframes heroMarkFlash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
  18% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1);
  }
  55% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* El resto (nombre al medio) entra recién cuando el ave ya terminó su
   destello (termina a los 600ms, ver heroMarkFlash) -- primero el ave
   sola, un respiro de 400ms sin nada en pantalla, y después el texto.
   Ese hueco a propósito es lo que evita que se crucen: si el delay queda
   pegado al final del ave, cualquier variación de rendimiento del
   navegador (fuentes cargando, GPU ocupada) puede hacer que se vean
   simultáneos un instante. */
.hero-eyebrow,
.hero-wordmark,
.hero-welcome,
.hero-tagline {
  opacity: 0;
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-eyebrow {
  animation-delay: 1000ms;
}

.hero-tagline {
  animation-delay: 1300ms;
}

/* El wordmark suma una segunda animación (heroNeonFlicker) además del
   heroFadeUp compartido -- por eso necesita su propio "animation" completo
   acá en vez de solo animation-delay como los otros dos, o pisaría la
   declaración de arriba en vez de sumarse. La flicker anima filter/
   text-shadow, nunca opacity, a propósito: si tocara opacity competiría con
   heroFadeUp por la misma propiedad (gana la última animación listada) y
   el texto aparecería de golpe en vez de subir con fundido. */
.hero-wordmark {
  /* El flicker arranca a los 1700ms (1100ms de delay + 600ms de duración
     del fundido), no antes -- mismo motivo que el respiro documentado más
     abajo: si arranca mientras el texto todavía se está desvaneciendo, se
     ven los dos efectos cruzados un instante. filter también alcanza a
     ::before/::after (las líneas de arriba/abajo, ver más abajo), así que
     parpadean junto con el texto sin necesitar su propia animación. */
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) 1100ms both,
    heroNeonFlicker 900ms steps(1, end) 1700ms 1 forwards;
}

.hero-welcome {
  animation-delay: 1200ms;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* El letrero de neón real "LA VICTORIA" ya está en la foto de fondo del
   hero -- esto lleva ese mismo lenguaje al wordmark tipográfico: arranca
   parpadeando como un tubo de neón que recién enciende y se asienta en un
   brillo cálido permanente, en vez de quedar como texto plano. */
@keyframes heroNeonFlicker {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 4px 24px rgba(23, 20, 15, 0.5), 0 0 22px rgba(57, 230, 140, 0.7), 0 0 46px rgba(57, 230, 140, 0.35);
  }
  4% {
    filter: brightness(0.35);
    text-shadow: 0 4px 24px rgba(23, 20, 15, 0.5);
  }
  8% {
    filter: brightness(1.15);
    text-shadow: 0 4px 24px rgba(23, 20, 15, 0.5), 0 0 26px rgba(57, 230, 140, 0.85), 0 0 50px rgba(57, 230, 140, 0.4);
  }
  13% {
    filter: brightness(0.4);
    text-shadow: 0 4px 24px rgba(23, 20, 15, 0.5);
  }
  18% {
    filter: brightness(1);
    text-shadow: 0 4px 24px rgba(23, 20, 15, 0.5), 0 0 22px rgba(57, 230, 140, 0.7), 0 0 46px rgba(57, 230, 140, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark-intro {
    display: none;
  }

  .hero-eyebrow,
  .hero-wordmark,
  .hero-welcome,
  .hero-tagline {
    animation: none;
    opacity: 1;
  }

  /* Sin el parpadeo, pero el brillo cálido queda puesto directo -- es la
     parte "de marca" del efecto, el parpadeo es solo la entrada. */
  .hero-wordmark {
    text-shadow: 0 4px 24px rgba(23, 20, 15, 0.5), 0 0 22px rgba(57, 230, 140, 0.7), 0 0 46px rgba(57, 230, 140, 0.35);
  }

  .hero-bg::after {
    animation: none;
  }
}

/* Hero: la única sección con la foto de fondo. El nombre ("La Victoria")
   va al medio, como único elemento. */
.hero {
  position: relative;
  overflow: hidden;
  /* svh (small viewport height) en vez de dvh: dvh se recalcula en vivo
     mientras la barra de direcciones del navegador mobile aparece/desaparece
     al hacer scroll, así que el hero crecía y encogía de golpe apenas el
     usuario empezaba a moverse -- molesto y no se sentía como un simple
     scroll. svh usa el viewport más chico posible como valor fijo, así que
     no se recalcula: el hero mide siempre lo mismo y solo se desplaza. vh
     queda de último fallback para navegadores que no entiendan ninguno. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  text-align: center;
  /* Antes reservaba 90px arriba para la barra fija que ya no existe --
     con eso, el bloque centrado quedaba empujado hacia abajo y dejaba un
     hueco vacío arriba. Parejo con el padding de abajo, queda centrado. */
  padding: 56px 20px;
  color: #fff;
}

/* La foto queda estática -- la animación de entrada no le mueve nada a
   ella, vive en el texto y en el ave de marca (.hero-mark). */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Degradé más liviano que antes (0.5/0.62/0.85 -> 0.32/0.42/0.68) -- se
     pidió que se note más la foto de fondo; el texto sigue siendo legible
     porque la parte de abajo (donde está el texto) sigue siendo la más
     oscura de las tres paradas. */
  background:
    linear-gradient(180deg, rgba(23, 20, 15, 0.32) 0%, rgba(23, 20, 15, 0.42) 60%, rgba(23, 20, 15, 0.68) 100%),
    var(--hero-image, none) center 25% / cover no-repeat,
    var(--color-ink);
}

/* En ventanas anchas y bajas (laptop/desktop de escritorio), el cover
   recorta más de alto que de ancho -- con la posición vertical al 25% (en
   vez de centrada) se ve más del letrero de fondo de la foto en vez de
   perderlo por el borde superior. En pantallas altas y angostas (celular)
   el recorte es al revés (más lateral que vertical), así que ahí no hace
   falta el ajuste. */
@media (min-width: 900px) and (max-aspect-ratio: 16/7) {
  .hero-bg {
    /* Dos capas en el shorthand de arriba (degradé, foto) -- el degradé no
       depende de la posición, solo la segunda posición (la de la foto)
       importa acá. */
    background-position: center, center 15%;
  }
}

/* Grano de película: textura de ruido (SVG feTurbulence inline, sin pedir
   ninguna imagen aparte) muy tenue sobre la foto del hero, con un leve
   desplazamiento en pasos para que se sienta viva en vez de una textura
   estática pegada. mix-blend-mode: overlay para que se funda con la foto
   en vez de verse como una capa gris encima. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: heroGrainShift 900ms steps(6) infinite;
}

@keyframes heroGrainShift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-2%, 3%); }
  80% { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Bloque central: ocupa el espacio sobrante entre el padding de arriba y
   la franja de frases de abajo, y centra el nombre dentro de eso. */
.hero-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* Rayitas a los lados de los eyebrows centrados (hero, mapa) -- currentColor
   para que sigan el mismo color que el texto sin declararlo aparte. */
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  opacity: 0.7;
}

/* Una línea a cada lado de "La Victoria", en la misma fila que el texto
   (no arriba/abajo) -- mismo lenguaje que el flanqueo de .hero-eyebrow más
   arriba, pero pensado para acompañar una sola línea de texto grande en
   vez de una etiqueta chica. clamp() para que el largo de la línea
   acompañe el ancho del wordmark en cualquier tamaño de pantalla, sin
   quedar desproporcionada en mobile ni demasiado corta en desktop. */
/* Una línea arriba y otra abajo, del mismo ancho exacto que el texto (no
   una decoración corta y centrada) -- display: inline-block hace que la
   caja de .hero-wordmark mida justo lo que mide "La Victoria" renderizado,
   y width: 100% en los pseudo-elementos copia ese ancho tal cual, en
   cualquier tamaño de pantalla, sin tener que calcularlo a mano. */
.hero-wordmark {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 9vw, 5.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 4px 24px rgba(23, 20, 15, 0.5);
}

.hero-wordmark::before,
.hero-wordmark::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
}

.hero-wordmark::before {
  top: -0.16em;
}

.hero-wordmark::after {
  bottom: -0.16em;
}

.hero-welcome {
  margin: 18px 0 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 10px rgba(23, 20, 15, 0.5);
}

/* Segunda línea del hero, más discreta que hero-welcome -- menciona los
   productos concretos (lo que la sección "Quiénes somos" desarrolla más
   abajo) para que el hero no se quede solo en el eslogan. */
.hero-tagline {
  margin: 8px 0 0;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(23, 20, 15, 0.65);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
  /* width: 100% (no solo max-width): .hero-center centra con
     align-items: center, así que sin un ancho explícito este contenedor
     se ajustaba a su propio contenido (fit-content) en vez de usar el
     ancho real disponible -- eso confundía el cálculo de flex-wrap sobre
     si los dos botones caben en una fila, y terminaban apilándose incluso
     en teléfonos con espacio de sobra (360-390px). */
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: heroFadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 1400ms;
}

.hero-cta {
  /* flex-basis 150px (no 0, tampoco más alto): si no alcanza el ancho
     para los dos botones uno al lado del otro, .hero-ctas (flex-wrap:
     wrap) manda el segundo a su propia línea completo -- en vez de
     aplastar el texto hasta que se parte en dos renglones dentro del
     botón (se veía descuadrado). white-space: nowrap refuerza que el
     texto nunca se parta. El valor
     va pegado al ancho real que necesita "Quiero sumarme" (~147px medido,
     el texto más largo de los dos botones/idiomas) más un margen chico --
     un valor más alto (venía de 160px) hacía que el navegador decidiera
     apilarlos en teléfonos comunes (360-390px) donde sí alcanzaba el
     espacio para tenerlos lado a lado. */
  flex: 1 1 150px;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.hero-cta--primary {
  background: rgba(83, 98, 78, 0.35);
  color: #fff;
  border: 1.5px solid rgba(140, 165, 128, 0.75);
  backdrop-filter: blur(2px);
}

.hero-cta--primary:hover {
  background: rgba(83, 98, 78, 0.5);
}

.hero-cta--secondary {
  background: rgba(83, 98, 78, 0.2);
  color: #fff;
  border: 1.5px solid rgba(140, 165, 128, 0.5);
  backdrop-filter: blur(2px);
}

.hero-cta--secondary:hover {
  background: rgba(83, 98, 78, 0.32);
}

.hero-cta:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .hero-ctas {
    animation: none;
    opacity: 1;
  }
}

/* Indicador de scroll: el hero mide una pantalla completa (100svh), así que
   sin esto no queda claro que hay más contenido debajo hasta que alguien
   scrollea "a ciegas". Chevron que rebota suave, pegado al borde inferior
   del hero -- currentColor + opacity baja para que no compita con el CTA. */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  animation: heroFadeIn 400ms ease both;
  animation-delay: 1700ms;
  transition: color 150ms ease;
}

.hero-scroll-cue:hover {
  color: #fff;
}

/* Rebote en un span aparte, no en .hero-scroll-cue: así no compite con la
   animación de aparición de arriba, que también anima transform. */
.hero-scroll-cue-icon {
  display: flex;
  animation: heroScrollCueBounce 1800ms ease-in-out 2100ms infinite;
}

.hero-scroll-cue-icon svg {
  width: 26px;
  height: 26px;
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heroScrollCueBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue {
    animation: none;
    opacity: 1;
  }

  .hero-scroll-cue-icon {
    animation: none;
  }
}

/* Franja de accesos rápidos justo debajo del hero -- antes había que
   scrollear a ciegas para saber qué secciones tiene la página; esto
   adelanta el mapa del sitio apenas se termina de ver la foto de portada.
   Fondo oscuro sólido (no la foto del hero) para que se lea como una franja
   de navegación aparte, no como parte del hero. */
/* Fixed (no sticky): flota siempre arriba del todo, incluso sobre la
   propia foto del hero, para que esté disponible desde el primer instante
   sin ocupar espacio propio (el hero sigue midiendo 100vh completos
   debajo). Arranca transparente (variables --nav-* de acá abajo) para no
   sentirse como una barra ajena invadiendo la foto -- recién se pone el
   fondo crema sólido (clase .is-solid, la agrega el script al final del
   body cuando el scroll ya pasó el hero) una vez que hay contenido normal
   de la página detrás, no la foto. */
.quicknav {
  --nav-bg: transparent;
  --nav-border: transparent;
  --nav-text: rgba(255, 255, 255, 0.85);
  --nav-text-hover: #fff;
  --nav-hover-bg: rgba(255, 255, 255, 0.14);
  --nav-icon-bg: rgba(255, 255, 255, 0.16);
  --nav-divider: rgba(255, 255, 255, 0.3);
  --nav-lang-border: rgba(255, 255, 255, 0.5);
  --nav-lang-bg: rgba(23, 20, 15, 0.35);
  --nav-lang-active-bg: rgba(255, 255, 255, 0.92);
  --nav-lang-active-text: var(--color-ink);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 20px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  transition: background-color 220ms ease, border-color 220ms ease;
}

.quicknav.is-solid {
  --nav-bg: var(--color-cream);
  --nav-border: rgba(23, 20, 15, 0.1);
  --nav-text: rgba(23, 20, 15, 0.65);
  --nav-text-hover: var(--color-ink);
  --nav-hover-bg: rgba(23, 20, 15, 0.06);
  --nav-icon-bg: rgba(23, 20, 15, 0.06);
  --nav-divider: rgba(23, 20, 15, 0.16);
  --nav-lang-border: rgba(23, 20, 15, 0.18);
  --nav-lang-bg: rgba(23, 20, 15, 0.04);
  --nav-lang-active-bg: var(--color-ink);
  --nav-lang-active-text: var(--color-cream);
}

/* min-width: 0 -- imprescindible para que .quicknav-links pueda encogerse
   por debajo de su ancho de contenido dentro del flex row; sin esto, en
   pantallas angostas el grupo de acciones (selector de idioma) se salía del
   contenedor en vez de dejar que los links scrolleen aparte (ver la media
   query de abajo). */
.quicknav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.quicknav-link {
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--nav-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}

.quicknav-link:hover {
  background: var(--nav-hover-bg);
  color: var(--nav-text-hover);
}

/* Sección actualmente a la vista (ver IntersectionObserver en
   index.html) -- mismo tratamiento de "pill" que el hover pero fijo,
   para que se note cuál sección está protagonizando la pantalla incluso
   sin pasar el mouse. */
.quicknav-link.is-active {
  background: var(--nav-hover-bg);
  color: var(--nav-text-hover);
}

/* Grupo de la derecha (selector de idioma) -- flex-shrink: 0 para que
   nunca se achique ni se tape: si algo tiene que ceder espacio en
   pantallas chicas es la lista de links (que scrollea aparte), no esto.
   El borde a la izquierda lo separa visualmente de los links de sección
   en vez de quedar pegado al último ("Trabaja con nosotros"). */
.quicknav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid var(--nav-divider);
}

/* Debajo de ~700px la franja completa (links + acciones) ya no entra
   cómoda en una sola fila sin apretarse -- se scrollea horizontal en vez
   de apilarse en dos líneas (que empujaría el resto de la página hacia
   abajo cada vez que la franja está pegada arriba). El grupo de acciones
   queda siempre visible a la derecha, fuera del área que scrollea. */
@media (max-width: 700px) {
  .quicknav {
    padding: 8px 12px;
  }

  .quicknav-links {
    flex-wrap: nowrap;
    /* flex-start (no flex-end) acá: con overflow-x el scroll arranca en
       0 desde el borde izquierdo del contenido -- con flex-end el primer
       link quedaba escondido "antes" del scroll inicial, había que
       scrollear hacia atrás para verlo. */
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Oculta la barra de scroll nativa (fea en desktop si aparece con
       mouse) sin quitarle la posibilidad real de scrollear con el dedo. */
    scrollbar-width: none;
  }

  .quicknav-links::-webkit-scrollbar {
    display: none;
  }

  .quicknav-link {
    padding: 6px 8px;
    font-size: 0.68rem;
  }

  .quicknav-actions {
    padding-left: 8px;
    margin-left: 2px;
  }
}

.page-shell {
  position: relative;
  background: var(--color-cream);
}

/* Entrada suave al hacer scroll (ver script al final de index.html): cada
   sección/tarjeta con esta clase arranca invisible y desplazada, y un
   IntersectionObserver agrega "is-visible" la primera vez que entra en
   pantalla -- una sola vez, no se repite al subir y bajar. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Quiénes somos: primer bloque después del hero -- contexto real de marca
   antes de la frase emblemática, que es más actitud que información.
   Texto + foto en vez de solo texto: dos bloques de puro texto seguidos
   (este + la frase emblemática de abajo) se sentían pesados. */
.about {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 40px;
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 96px 20px 0;
}

/* Mismo patrón de eyebrow con rayitas a los dos lados que .gallery-eyebrow/
   .map-eyebrow, para que se vea igual de balanceado en todas las
   secciones (en mobile este bloque se centra, así que una sola rayita
   antes se veía descuadrada). */
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracotta-text);
}

.about-eyebrow::before,
.about-eyebrow::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.about h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink);
}

.about-text {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  color: rgba(23, 20, 15, 0.78);
}

.about-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px var(--color-shadow);
}

@media (max-width: 760px) {
  .about {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-img {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Link a la carta completa (PDF en Drive) -- justo después de "Quiénes
   somos" porque ahí ya se mencionan platos puntuales; acá se ve la carta
   entera. Mismo patrón centrado que .gallery-text/.map-text. */
.menu-cta {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 48px 20px 0;
  text-align: center;
}

.menu-cta-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracotta-text);
}

.menu-cta h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink);
}

.menu-cta-text {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(23, 20, 15, 0.72);
}

.menu-cta-link {
  display: inline-block;
  padding: 12px 26px;
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.menu-cta-link:hover {
  background: rgba(23, 20, 15, 0.06);
  transform: translateY(-1px);
}


.gallery {
  width: min(100%, 1600px);
  margin: 0 auto;
  padding: 96px 20px 24px;
}

/* A diferencia de .about-text-block/.paths-text/.map-text (centrados o en
   grid), este queda alineado a la izquierda -- variar el ritmo entre
   secciones para que no se sientan todas la misma plantilla repetida. */
.gallery-text {
  margin-bottom: 32px;
  text-align: left;
}

.gallery-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracotta-text);
}

.gallery-text h2 {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

@media (max-width: 560px) {
  .gallery-text {
    text-align: center;
  }
}

.carousel {
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 56px;
}

.carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-md);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-viewport::-webkit-scrollbar {
  display: none;
}

.carousel-track {
  --per-view: 3;
  display: flex;
  gap: 14px;
}

.carousel-slide {
  position: relative;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * 14px) / var(--per-view));
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: none;
  outline: none;
}

/* Caption por foto, oculto hasta hover/foco -- mismo patrón que el título
   sobre gradiente de las path-cards, para no inventar un lenguaje visual
   nuevo. Se ve también con teclado (:focus-visible), no solo con mouse. */
.carousel-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px 14px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(23, 20, 15, 0.75) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.carousel-slide:hover .carousel-caption,
.carousel-slide:focus-visible .carousel-caption {
  opacity: 1;
  transform: translateY(0);
}

.carousel-slide:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

.carousel-slide:hover img {
  transform: scale(1.04);
}

@media (max-width: 900px) {
  .carousel {
    padding: 0 48px;
  }

  .carousel-track {
    --per-view: 2;
  }
}

@media (max-width: 600px) {
  .carousel {
    padding: 0 12px;
  }

  .carousel-track {
    --per-view: 1;
  }

  .carousel-arrow {
    width: 28px;
    height: 28px;
  }

  .carousel-arrow svg {
    width: 14px;
    height: 14px;
  }

  .carousel-arrow--prev {
    left: 2px;
  }

  .carousel-arrow--next {
    right: 2px;
  }
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: 0 4px 14px var(--color-shadow);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.carousel-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

.carousel-arrow svg {
  width: 20px;
  height: 20px;
}

.carousel-arrow--prev {
  left: 0;
}

.carousel-arrow--next {
  right: 0;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(23, 20, 15, 0.22);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.carousel-dot.is-active {
  background: var(--color-terracotta);
  transform: scale(1.25);
}

@media (max-width: 560px) {
  .gallery {
    padding: 80px 20px 8px;
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(23, 20, 15, 0.92);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-img {
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 20px;
}

.lightbox-close,
.lightbox-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 560px) {
  .lightbox {
    gap: 4px;
    padding: 12px;
  }

  .lightbox-close {
    width: 38px;
    height: 38px;
  }

  /* En mobile se navega deslizando el dedo sobre la foto (ver JS), no con
     flechas -- estorbaban encima de la imagen en pantallas chicas. */
  .lightbox-nav {
    display: none;
  }
}

/* Resaltado de DJ/música: a diferencia del grid parejo de "En cocina", acá
   la foto va a ancho completo (rompe el .page-shell con el truco 100vw) con
   overlay oscuro y el texto encima -- un momento propio, no una tarjeta más. */
.dj-highlight {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin: 96px calc(50% - 50vw) 0;
  min-height: clamp(320px, 48vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  /* Fondo de respaldo: se ve un instante mientras el <video> carga, y es
     lo único que queda si prefers-reduced-motion lo oculta (ver abajo). */
  background: var(--dj-image, none) center 25% / cover no-repeat, var(--color-ink);
}

.dj-highlight-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.dj-highlight-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 20, 15, 0.15) 0%, rgba(23, 20, 15, 0.75) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .dj-highlight-video {
    display: none;
  }
}

.dj-highlight-text {
  position: relative;
  width: min(100%, 1280px);
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.dj-highlight-text h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(23, 20, 15, 0.5);
}

/* Comunidad de fidelización: antes era una tarjeta más entre las 4 de
   "Elige tu camino", compitiendo por atención con trabajo/artistas/
   proveedores -- es el objetivo de negocio principal del sitio (captar
   clientes para el programa), así que se saca de la grilla y se le da su
   propia sección de ancho completo, con más peso que una tarjeta. */
/* Foto de fondo a pantalla completa, encuadrada para que se vea el letrero
   de neón "LA VICTORIA" de la fachada (background-position, no object-fit:
   la foto no es un <img>, es el fondo de la sección). Ahora que la sección
   quedó separada de .dj-highlight (que también es foto oscura), este
   tratamiento respira mejor que cuando estaban una pegada a la otra. */
.loyalty {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 96px 20px;
  overflow: hidden;
  color: #fff;
}

.loyalty::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(23, 20, 15, 0.45) 0%, rgba(23, 20, 15, 0.68) 100%),
    var(--loyalty-image, none) center 22% / cover no-repeat,
    var(--color-ink);
}

.loyalty-inner {
  width: min(100%, 640px);
  margin: 0 auto;
  text-align: center;
}

.loyalty-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  color: #fff;
}

.loyalty-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(23, 20, 15, 0.5);
}

.loyalty-inner h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(23, 20, 15, 0.4);
}

.loyalty-text {
  margin: 0 0 26px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* Antes era vidrio esmerilado como .hero-cta, pero acá el botón lleva a la
   acción más importante de toda la página (registrarse a fidelización) --
   se pasó a un relleno sólido y cálido (dorado, ya usado como acento en el
   resto del sitio) para que destaque de un vistazo sobre la foto, en vez
   de mezclarse con el resto de botones traslúcidos. */
.loyalty-cta {
  display: inline-block;
  padding: 16px 38px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-gold);
  box-shadow: 0 10px 30px rgba(185, 134, 47, 0.45);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.loyalty-cta:hover {
  background: #cc9a3d;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 36px rgba(185, 134, 47, 0.55);
}

.loyalty-cta:active {
  transform: translateY(0) scale(0.98);
}

/* Rutas: vuelve el fondo plano de marca -- la foto quedó atrás, en el hero. */
/* minmax(240px, 320px) (no 1fr sin tope) + justify-content: center --
   con 1fr cada tarjeta se estiraba a llenar todo el ancho disponible (más
   de 400px), y como el contenido de cada una queda alineado a la
   izquierda, sobraba mucho aire vacío a la derecha de cada una: se veía
   desbalanceado en vez de centrado con el título de arriba. Con un ancho
   tope, la fila de tarjetas queda más angosta que el contenedor y se
   centra como un bloque, en vez de ocupar todo el ancho. */
.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: 18px;
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 96px 20px 64px;
}

.paths-text {
  grid-column: 1 / -1;
  max-width: 640px;
  margin: 0 auto 12px;
  text-align: center;
}

/* Sin las rayitas de .about-eyebrow/.gallery-eyebrow/.map-eyebrow a
   propósito -- las 4 secciones usando el mismo adorno se sentía repetido
   como plantilla. Acá el peso lo lleva el color + el punto grande. */
.paths-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracotta-text);
  /* El punto sólido (en vez de las rayitas de los otros eyebrows) ya le
     da peso de sobra -- con el verde más vívido, sumar el color al 100%
     quedaba demasiado fuerte para un eyebrow chico. */
  opacity: 0.8;
}

.paths-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.paths-text h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink);
}

.paths-text p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-olive);
}

.path-card {
  --accent: var(--color-terracotta);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px 24px;
  background: var(--color-card);
  border: 1px solid rgba(23, 20, 15, 0.08);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px var(--color-shadow);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Tilt sutil que sigue el cursor (--tilt-x/--tilt-y, seteadas por JS en
   index.html sobre mousemove) además del lift de siempre -- con el mouse
   quieto o en foco por teclado, las variables no están seteadas y el
   fallback (0deg) deja el mismo lift plano de antes. */
.path-card:hover,
.path-card:focus-visible {
  transform: translateY(-4px) perspective(700px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  box-shadow: 0 16px 34px var(--color-shadow);
}

/* El tilt de arriba depende de mousemove -- en el teléfono, que es donde
   más se usa esto, no hay cursor, así que la única señal de "estoy
   tocando esto" es el estado de presionado. Sin esto, en mobile las
   tarjetas se sentían inertes al tocarlas (ver también el shim de
   touchstart en index.html, necesario para que iOS Safari respete
   :active en un <a> sin eso). */
.path-card:active {
  transform: scale(0.97);
  box-shadow: 0 6px 16px var(--color-shadow);
  transition: transform 100ms ease, box-shadow 100ms ease;
}

/* Entrada tipo "carta volteándose" en vez del fade+translateY genérico de
   .reveal -- por eso usa @keyframes (animation), no transition: así no
   compite por la propiedad "transform" con el hover/tap de arriba (que sí
   usa transition). .reveal en .path-card solo aporta opacity:0 mientras
   no tiene .is-visible; el resto de .reveal (transform/transition
   genéricos) queda pisado a propósito. */
.path-card.reveal {
  opacity: 0;
}

.path-card.reveal.is-visible {
  animation: pathCardFlipIn 650ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pathCardFlipIn {
  0% {
    opacity: 0;
    transform: perspective(900px) rotateY(-85deg);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: perspective(900px) rotateY(0deg);
  }
}

/* Entrada escalonada: cada tarjeta voltea un poco después que la anterior
   (mismo orden que el DOM/grid) en vez de todas juntas. */
.path-card--talento.is-visible { animation-delay: 0ms; }
.path-card--artistas.is-visible { animation-delay: 90ms; }
.path-card--proveedores.is-visible { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .path-card.reveal.is-visible {
    animation: none;
    opacity: 1;
  }
}

.path-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: var(--accent);
}

/* Pop del ícono al entrar en pantalla -- dispara con el mismo
   .is-visible del scroll (no con :hover), así que se ve igual en mobile
   que en desktop. Delay por variante para que salte justo cuando cada
   tarjeta ya empezó a aparecer (mismo orden que el stagger de arriba). */
.path-card.is-visible .path-icon {
  animation: pathIconPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.path-card--talento.is-visible .path-icon { animation-delay: 80ms; }
.path-card--artistas.is-visible .path-icon { animation-delay: 170ms; }
.path-card--proveedores.is-visible .path-icon { animation-delay: 260ms; }

@keyframes pathIconPop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-15deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.15) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .path-card.is-visible .path-icon {
    animation: none;
  }
}

/* Cada categoría con su propio color de marca -- así se distinguen de un
   vistazo en vez de competir todas por el mismo terracota. */
.path-card--talento {
  --accent: var(--color-wine);
  --accent-text: var(--color-wine);
}

.path-card--artistas {
  --accent: var(--color-slate);
  --accent-text: var(--color-slate);
}

.path-card--proveedores {
  --accent: var(--color-gold);
  --accent-text: var(--color-gold-text);
}

.path-tag {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.path-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.path-card p {
  margin: 0;
  flex: 1;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(23, 20, 15, 0.72);
}

.path-cta {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-text);
}

/* Letrero chico que abre el footer, en vez del sello "LA VICTORIA" --
   ese sello no explicaba qué eran los íconos de abajo, quedaban sueltos
   sin contexto. Este texto los presenta directo. */
.footer-social-label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Cómo llegar: mismo patrón de texto centrado que "En cocina", pero acá el
   elemento visual es el mapa en vez de fotos -- mapa embebido de Google
   Maps con la dirección real (ver footer), sin API key. */
/* Sin el mapa embebido -- un bloque angosto y centrado (mismo espíritu que
   .loyalty-inner): eyebrow, título, dirección, horario y un botón sólido a
   Google Maps. El iframe ya no aporta mucho que la dirección + el link de
   texto no den, y descentraba la sección al ser mucho más ancho que el
   texto. */
.map {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 96px 20px;
  text-align: center;
}

.map-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracotta-text);
}

.map-eyebrow::before,
.map-eyebrow::after {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.map-text h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink);
}

.map-address,
.map-hours {
  margin: 0 0 6px;
  font-size: 1rem;
  color: rgba(23, 20, 15, 0.72);
}

.map-hours {
  margin-bottom: 26px;
}

/* Mismo tratamiento de botón que .loyalty-cta -- contorno, no relleno
   sólido, para que no compita con el peso visual del CTA de fidelización
   un poco más arriba en la página. */
.map-link {
  display: inline-block;
  padding: 13px 30px;
  border: 1.5px solid var(--color-terracotta);
  border-radius: var(--radius-md);
  background: rgba(83, 98, 78, 0.08);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-terracotta-text);
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.map-link:hover {
  background: rgba(83, 98, 78, 0.16);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .map {
    padding: 64px 20px;
  }
}

/* Contáctanos -- franja angosta entre .map y el footer: más visible que un
   link perdido en la letra chica del footer (ver .footer-legal), pero sin
   el peso de una sección completa con h2 grande como el resto de la página
   -- es un puente rápido a /contacto/, no un contenido en sí mismo. */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 8px 20px 48px;
  text-align: center;
}

.contact-strip p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

.contact-strip-link {
  display: inline-block;
  padding: 9px 22px;
  border: 1.5px solid var(--color-terracotta);
  border-radius: var(--radius-md);
  background: rgba(83, 98, 78, 0.08);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-terracotta-text);
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.contact-strip-link:hover {
  background: rgba(83, 98, 78, 0.16);
  transform: translateY(-2px);
}

.page-footer {
  padding: 56px 20px calc(40px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

.page-footer a {
  color: inherit;
}

/* Fila de íconos, sin texto -- el flotante de WhatsApp ya cubre el
   contacto directo en toda la página (ver .whatsapp-fab), así que este
   footer no necesita repetir un botón con peso propio: solo un acceso
   discreto a los dos canales, mismo patrón de la mayoría de sitios de
   marca (fila de íconos redondos, chica, al fondo). */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 22px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1.5px solid rgba(23, 20, 15, 0.16);
  color: var(--color-ink-muted);
  transition: color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.footer-social svg {
  width: 17px;
  height: 17px;
}

.footer-social a:hover {
  color: var(--color-terracotta-text);
  border-color: var(--color-terracotta);
  transform: translateY(-1px);
}

/* El enlace de WhatsApp del footer queda muy abajo de la página -- este
   botón flota fijo sobre el contenido para que siempre haya un acceso a un
   clic, sin importar cuánto se haya scrolleado. */
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--color-terracotta);
  color: #fff;
  box-shadow: 0 8px 20px rgba(23, 20, 15, 0.3);
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 200ms ease;
}

/* Oculto mientras el hero está a la vista (ver el IntersectionObserver al
   final del body) -- ahí ya compite con los dos CTA propios del hero
   (Quiero sumarme / Ver el lugar), así que no hacía falta un tercer botón
   encima. Reaparece apenas se sale del hero. */
.whatsapp-fab.is-hidden {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.whatsapp-fab svg {
  width: 26px;
  height: 26px;
}

.whatsapp-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(23, 20, 15, 0.35);
}

.whatsapp-fab:active {
  transform: scale(0.96);
}

@media (max-width: 560px) {
  .whatsapp-fab {
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
  }

  .whatsapp-fab svg {
    width: 23px;
    height: 23px;
  }
}

/* Letra chica, al fondo -- convención estándar de footer para el aviso
   legal (ver el comentario junto al HTML sobre por qué se mantiene). */
.footer-legal {
  margin: 0;
  font-size: 0.74rem;
  opacity: 0.75;
}

@media (max-width: 560px) {
  .paths {
    grid-template-columns: 1fr;
  }

  /* min-height: 100svh (no 100dvh) -- dvh se recalcula en vivo mientras la
     barra de direcciones se oculta/aparece al hacer scroll, así que el hero
     crecía y encogía de golpe subiendo y bajando la página. Mismo motivo
     que la regla base de .hero más arriba, repetido acá porque esta media
     query la pisaba con dvh. */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 48px 20px;
  }
}

@media (max-width: 640px) {
  /* background-attachment: fixed puede rendir mal / dar problemas de scroll
     en Safari iOS -- en mobile la foto scrollea con la página en vez de
     quedar fija, sin perder el resto del efecto. */
  .hero {
    background-attachment: scroll;
  }
}

/* Próximos eventos -- mismo patrón centrado que .menu-cta (eyebrow + h2)
   arriba de una grilla de tarjetas en el lenguaje visual de .path-card
   (borde superior de acento, radio grande, sombra de marca). */
.eventos-section {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 96px 20px 64px;
}

.eventos-text {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.eventos-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracotta-text);
}

.eventos-text h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-ink);
}

.eventos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.evento-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid rgba(23, 20, 15, 0.08);
  border-top: 4px solid var(--color-terracotta);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px var(--color-shadow);
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.evento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px var(--color-shadow);
}

/* 9:16 -- la mayoría de flyers de eventos se diseñan en formato historia
   (Instagram/WhatsApp), no en horizontal; con 16:10 se recortaba mal la
   parte de arriba/abajo del flyer. */
.evento-card-img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* Mismo formato que la foto (ver .evento-card-img arriba) para que la
   tarjeta se vea igual de consistente tenga imagen o video. */
.evento-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
}

.evento-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 24px;
}

.evento-card-badges {
  display: flex;
  gap: 6px;
}

.evento-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.evento-badge--gratis {
  background: rgba(83, 98, 78, 0.14);
  color: var(--color-terracotta-text);
}

.evento-badge--precio {
  background: rgba(184, 142, 42, 0.16);
  color: var(--color-gold-text);
}

.evento-card-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--color-ink);
}

.evento-card-meta {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-ink-muted);
}

.evento-card-desc {
  margin: 4px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(23, 20, 15, 0.72);
  /* Una palabra sin espacios más larga que la tarjeta (pasó con un texto
     de prueba tipo "limiteslimiteslimites...") empujaba el resto del
     contenido hacia el costado en vez de quedarse dentro del ancho de la
     tarjeta -- esto la parte en cualquier punto si hace falta. */
  overflow-wrap: anywhere;
}

/* Recorte a 4 líneas con puntos suspensivos -- una descripción larga ya no
   estira la tarjeta sin límite; el botón de abajo (agregado en index.html,
   solo visible si el texto de verdad se recortó) deja ver el resto. */
.evento-card-desc--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.evento-card-desc-toggle {
  display: inline-block;
  align-self: flex-start;
  margin: 2px 0 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-terracotta-text);
  text-decoration: underline;
  cursor: pointer;
}

.evento-card-desc-toggle:hover {
  color: var(--color-ink);
}

.evento-card-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-terracotta-text);
  text-decoration: none;
}

.evento-card-link:hover {
  text-decoration: underline;
}

.eventos-empty {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  color: var(--color-ink-muted);
}