/* ============================================================================
   EXPORTLOG 2026 — Design System
   Industrial-bridge: brochure brand DNA + premium web restraint.
   One superfamily (Archivo). See DESIGN.md for the contract.
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Brand core */
  --brand-red: #E8412E;
  --brand-blue: #0A84C4;
  --brand-blue-ink: #0A6FA6;
  --brand-orange: #F47B20;
  --brand-orange-hover: #E0680F;
  /* Naranja oscurecido, solo para texto/iconos sobre fondo claro (5,39:1). */
  --brand-orange-text: #AD4F09;

  /* Anchor */
  --navy: #0B3C66;
  --navy-deep: #072A49;

  /* Wayfinding */
  --cat-embarcadero: #E8412E;
  --cat-terrazas: #0A84C4;
  --cat-amarras: #2FAA4E;
  --cat-muelle: #F47B20;
  /* Variantes oscurecidas de los colores de salón, solo para texto: los de marca
     quedan por debajo de 4.5:1 y no pasan WCAG AA en tamaños chicos. Bordes,
     píldoras y fondos siguen usando los de arriba. */
  --cat-embarcadero-text: #CC2917;
  --cat-terrazas-text: #0970A7;
  --cat-amarras-text: #227A38;
  --cat-muelle-text: #AD4F09;
  --tier-cyan: #23A9DE;
  --green: #2FAA4E;

  /* Neutrals (cool, navy-tinted) */
  --ink: #13212E;
  --ink-variant: #3E4C5A;
  --muted: #5A6776;
  --surface: #ffffff;
  --surface-subtle: #F5F8FB;
  --surface-container: #E9EFF5;
  --surface-deep: #DCE6F0;
  --border-muted: #DBE3EC;
  --on-dark: #ffffff;
  --on-dark-muted: #AFC6DD;

  /* Type */
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --num-wdth-pct: 118%; /* Not needed for Lexend but kept for backwards compatibility if needed */
  --num-wdth-val: 118;

  /* Spacing */
  --gutter: 24px;
  --margin: clamp(20px, 5vw, 64px);
  --section-gap: clamp(64px, 9vw, 112px);
  --maxw: 1240px;
  --maxw-text: 68ch;

  /* Radius */
  --r-sm: 4px;
  --r-lg: 8px;
  --r-xl: 14px;
  --r-pill: 9999px;

  /* Shadows - UI/UX Pro Max Premium Scale */
  --sh-cta: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --sh-hero-cta: 0 20px 25px -5px rgba(244, 123, 32, 0.25), 0 10px 10px -5px rgba(244, 123, 32, 0.1);
  --sh-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --sh-card-hover: 0 20px 25px -5px rgba(11, 60, 102, 0.15), 0 10px 10px -5px rgba(11, 60, 102, 0.04);
  --sh-header: 0 4px 6px -1px rgba(11, 60, 102, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --dur: 0.25s; /* 250ms for snappy, fluid interactions */

  /* Z-index scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer-backdrop: 200;
  --z-drawer: 210;
  --z-toast: 300;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 420;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface-subtle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--navy); color: #fff; padding: 12px 18px;
  border-radius: var(--r-lg); z-index: var(--z-toast);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---- Typography --------------------------------------------------------- */
.display {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.1rem, 6.2vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0;
}
.headline {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.6vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0;
}
@media (max-width: 420px) {
  .display { font-size: clamp(1.8rem, 5.5vw, 4rem); }
  .headline { font-size: clamp(1.4rem, 3.2vw, 2.2rem); }
}
.title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.1;
  margin: 0;
}
.label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
}
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--ink-variant); max-width: var(--maxw-text); }
p { margin: 0 0 1rem; max-width: var(--maxw-text); }
.text-accent { color: var(--brand-orange); }
.text-blue { color: var(--brand-blue-ink); }

/* ---- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* Grid/flex blowout guard: tracks default to minmax(auto,1fr); long children
   (the hero chip, price rows) would otherwise widen the track past the viewport. */
.hero__grid, .router__grid, .intro__grid, .sponsors__grid, .muelle__grid,
.stands__layout, .tiers, .kpis, .axes, .footer__grid, .price-list, .route, .salon-card, .tier {
  min-width: 0;
}
.hero__grid > *, .router__grid > *, .intro__grid > *, .sponsors__grid > *,
.muelle__grid > *, .stands__layout > *, .tiers > *, .kpis > *, .axes > *,
.footer__grid > *, .price-row > * {
  min-width: 0;
}
.section { padding-block: var(--section-gap); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 72px); }

.section-head { max-width: 64ch; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head .label { color: var(--brand-blue-ink); display: inline-block; margin-bottom: 12px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 0.78125rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--brand-blue-ink); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--brand-orange); border-radius: 2px; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.02em; text-transform: uppercase;
  padding: 16px 30px; border-radius: var(--r-lg);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; }

.btn--primary { background: var(--brand-orange); color: var(--ink); box-shadow: var(--sh-cta); }
.btn--primary:hover { background: var(--brand-orange-hover); transform: translateY(-2px); box-shadow: 0 8px 12px -2px rgba(244, 123, 32, 0.3); }
.btn--hero { box-shadow: var(--sh-hero-cta); }

.btn--blue { background: var(--brand-blue-ink); color: #fff; box-shadow: var(--sh-cta); }
.btn--blue:hover { background: #085B87; transform: translateY(-2px); box-shadow: 0 8px 12px -2px rgba(10, 132, 196, 0.3); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn--sm { padding: 12px 22px; font-size: 0.85rem; }
.btn--lg { padding: 18px 36px; font-size: 1rem; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--brand-blue-ink); text-transform: uppercase;
  font-size: 0.85rem; letter-spacing: 0.04em;
}
.arrow-link svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ---- Chips / coding ----------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--surface-container); color: var(--ink-variant);
}
.chip--embarcadero { background: rgba(232,65,46,0.12); color: #B82A1A; }
.chip--terrazas { background: rgba(10,132,196,0.12); color: #09679A; }
.chip--amarras { background: rgba(47,170,78,0.14); color: #1F7D38; }
.chip--scarce { background: rgba(244,123,32,0.14); color: #A1490B; }
.chip--scarce::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-orange); }

/* ============================================================================
   HEADER
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border-muted);
  transition: box-shadow 0.25s var(--ease-out), padding 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.header.is-scrolled { box-shadow: var(--sh-header); border-bottom-color: transparent; }
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 76px; transition: height 0.25s var(--ease-out);
}
.header.is-scrolled .header__inner { height: 64px; }
.header__logo img { height: 38px; width: auto; transition: height 0.25s var(--ease-out); }
.header.is-scrolled .header__logo img { height: 32px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative; padding: 10px 14px;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 0.9rem; color: var(--ink-variant);
  border-radius: var(--r-lg); transition: color 0.18s var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--brand-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--ease-out);
}
.nav__link:hover { color: var(--brand-blue-ink); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--brand-blue-ink); }

.header__cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--border-muted);
  border-radius: var(--r-lg); background: #fff; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease-out);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---- Mobile drawer ------------------------------------------------------ */
.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(7,42,73,0.5);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease-out), visibility 0.3s;
  z-index: var(--z-drawer-backdrop);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 360px);
  background: var(--navy-deep); color: #fff;
  transform: translateX(100%); transition: transform 0.35s var(--ease-out);
  z-index: var(--z-drawer); padding: 24px; display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.drawer__close {
  width: 44px; height: 44px; border-radius: var(--r-lg); border: 1px solid rgba(255,255,255,0.2);
  background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.drawer__links { display: flex; flex-direction: column; gap: 4px; margin-bottom: auto; }
.drawer__links a {
  padding: 15px 14px; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; text-transform: uppercase;
  border-radius: var(--r-lg); border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff; transition: background 0.2s var(--ease-out);
}
.drawer__links a:hover { background: rgba(255,255,255,0.07); }
.drawer__cta { margin-top: 24px; }
.drawer__cta .btn { width: 100%; }

/* ============================================================================
   HERO
   ========================================================================== */
/* ============================================================================
   HERO (Hannover Messe Style)
   ========================================================================== */
.hero--hannover {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding-top: 80px; /* offset header */
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 42, 73, 0.8) 0%, rgba(7, 42, 73, 0.2) 60%, transparent 100%);
  z-index: -1;
}

.hero__main-content {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: 20px;
}

.hero__geometric-wrapper {
  position: relative;
  width: calc(100% + 24px); /* Stretch to fill container padding on mobile */
  max-width: none;
  margin-left: -24px;
}

@media (min-width: 980px) {
  .hero__geometric-wrapper {
    max-width: 760px;
    margin-left: -80px;
  }
}

.hero__shard {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero__shard--1 {
  background: var(--brand-blue); /* The bright blue accent */
  transform: translate(25px, -15px) scale(1.02);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); /* Slight angle variation */
}

.hero__shard--2 {
  background: var(--navy-deep); /* Dark accent */
  transform: translate(-15px, 20px);
}

.hero__geometric-block {
  /* Naranja propio del bloque, apenas mas oscuro que --brand-orange (#F47B20).
     Hace falta para que el titulo en blanco cumpla contraste: sobre el naranja
     original el blanco da 2,73:1 y un titulo grande necesita 3:1 minimo.
     Con este da 3,30:1, y la bajada en tinta oscura sigue en 4,95:1. */
  background: #E5690B;
  color: white;
  padding: 30px 20px 30px 24px;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); /* Less harsh angle on mobile */
  position: relative;
  z-index: 2;
}

@media (min-width: 980px) {
  .hero__geometric-block {
    padding: 60px 140px 60px 40px;
    padding-left: 80px;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  }
}

.hero__eyebrow {
  font-size: 0.75rem; /* Prevents wrapping on small screens */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 768px) {
  .hero__eyebrow {
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    gap: 8px;
  }
}

.hero__geometric-block h1.display {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}

.hero__geometric-block .hero__chip {
  background: rgba(0,0,0,0.15);
  border: none;
  color: var(--ink);
}
.hero__geometric-block .hero__chip .dot {
  background: var(--ink);
}

.hero__geometric-block .hero__sub {
  color: var(--ink);
  margin-top: 16px;
  font-weight: 500;
  margin-bottom: 24px;
  font-size: 0.95rem;
  display: none; /* Hide on mobile to prevent wall of text */
}

@media (min-width: 768px) {
  .hero__geometric-block .hero__sub {
    margin-top: 24px;
    margin-bottom: 32px;
    font-size: 1.0625rem;
    display: block;
  }
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn--hero {
  background: white;
  color: var(--brand-orange-text);
}
.btn--hero:hover {
  background: #f0f0f0;
  color: var(--brand-orange-text);
}
.hero__actions .btn--ghost-light {
  border-color: rgba(255,255,255,0.4);
}

/* Glassmorphic Router Dock */
.hero__router-dock {
  position: relative;
  z-index: 20;
  margin-top: 24px; /* Space on mobile, no overlap */
  margin-bottom: 40px;
}

@media (min-width: 860px) {
  .hero__router-dock {
    margin-top: -40px; /* Intentional overlap on desktop */
    margin-bottom: 60px;
  }
}

.router__grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 16px; 
}
@media (min-width: 860px) { 
  .router__grid { 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
  } 
}

.route--glass {
  background: rgba(10, 132, 196, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-lg);
  padding: 24px;
  color: white;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
}

.route--glass:hover {
  background: rgba(10, 132, 196, 0.45);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

.route--glass h3.title {
  color: white;
  margin: 0;
  font-size: 1.25rem;
}

.route--glass p {
  color: rgba(255,255,255,0.85);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ============================================================================
   QUÉ ES + EJES
   ========================================================================== */
.intro__grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; }
@media (min-width: 920px) { .intro__grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }

.intro__grid .lede {
  border-left: 3px solid var(--brand-blue);
  padding-left: 20px;
  color: var(--navy);
  font-weight: 600;
}

.intro__stats { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 16px; 
}
@media (max-width: 560px) {
  .intro__stats { grid-template-columns: 1fr; }
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; }
}
.bento-card {
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  gap: 8px; 
  padding: 24px; 
  border-radius: var(--r-xl);
  background: var(--surface); 
  border: 1px solid var(--border-muted);
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.bento-card--large {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, var(--surface), var(--surface-deep));
}
.bento-card--wide {
  grid-column: 1 / -1;
}
@media (max-width: 560px) {
  .bento-card--large { flex-direction: column; align-items: flex-start; }
}

.stat-row__icon svg {
  width: 48px;
  height: 48px;
  color: var(--brand-orange-text);
}
.stat-row__content {
  display: flex;
  flex-direction: column;
}

.stat-row {
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  gap: 8px; 
  padding: 24px; 
  border-radius: var(--r-xl);
  background: var(--surface); 
  border: 1px solid var(--border-muted);
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.stat-row:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-hover);
  border-color: var(--brand-blue);
}

.stat-row__num { 
  font-family: var(--font-heading);
  font-weight: 800; 
  font-size: 2.8rem; 
  line-height: 1; 
  color: var(--brand-orange-text); 
}
.stat-row__txt { 
  color: var(--ink-variant); 
  font-size: 0.95rem; 
  line-height: 1.4;
}

.axes { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
@media (min-width: 720px) { .axes { grid-template-columns: repeat(3, 1fr); } }
.axis {
  position: relative; padding: 26px 24px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border-muted);
  overflow: hidden;
}
.axis__num { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: var(--axis-c, var(--brand-blue)); letter-spacing: 0.04em; }
.axis h3 { font-family: var(--font-heading); margin: 12px 0 8px; font-size: 1.18rem; }
.axis p { font-size: 0.92rem; color: var(--muted); margin: 0; }
.axis::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px;
  background: var(--axis-c, var(--brand-blue)); opacity: 0.07;
  clip-path: polygon(0 0, 100% 0, 100% 100%); border-radius: 6px; }
.axis--1 { --axis-c: var(--brand-blue); }
.axis--2 { --axis-c: var(--brand-orange); }
.axis--3 { --axis-c: var(--green); }

/* ============================================================================
   STANDS preview
   ========================================================================== */
.stands { background: var(--surface-container); position: relative; }
.stands__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.stands__layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .stands__layout { grid-template-columns: 1fr 1fr; } }
.stands__gallery { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 36px 0 56px; }
@media (min-width: 820px) { .stands__gallery { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.stands__gallery .photo-slot { aspect-ratio: 4 / 3; border-radius: var(--r-xl); border: 1px solid var(--border-muted); margin: 0; }

.salon-card {
  background: var(--surface); border: 1px solid var(--border-muted); border-radius: var(--r-xl);
  padding: 28px; position: relative; overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.salon-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.salon-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--c); }
.salon-card--embarcadero { --c: var(--cat-embarcadero); --c-text: var(--cat-embarcadero-text); }
.salon-card--terrazas { --c: var(--cat-terrazas); --c-text: var(--cat-terrazas-text); }
.salon-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.salon-card h3 { font-family: var(--font-heading); margin: 0; font-size: 1.5rem; }
.salon-card__area { font-family: var(--font-heading); font-weight: 800; color: var(--c-text, var(--c)); font-size: 1.05rem; }
.salon-card__desc { color: var(--muted); font-size: 0.94rem; margin: 8px 0 20px; }
.price-list { display: flex; flex-direction: column; gap: 2px; }
.price-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px dashed var(--border-muted);
}
.price-row:last-child { border-bottom: none; }
.price-row__size { font-weight: 800;  font-size: 1.02rem; color: var(--ink); min-width: 56px; }
.price-row__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-row__avail { font-size: 0.82rem; color: var(--muted); }
.price-row__price { font-weight: 800; font-stretch: var(--num-wdth-pct); font-variant-numeric: tabular-nums; color: var(--navy); font-size: 1.05rem; white-space: nowrap; }
.salon-card__foot { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.salon-card__from { font-size: 0.85rem; color: var(--muted); }
.salon-card__from b { font-weight: 800; color: var(--navy); font-size: 1.05rem;  }

/* Compact salón summary (home = overview, no prices) */
.salon-summary { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 820px) { .salon-summary { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.salon-mini {
  position: relative; background: var(--surface); border: 1px solid var(--border-muted);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.salon-mini:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
.salon-mini--embarcadero { --c: var(--cat-embarcadero); --c-text: var(--cat-embarcadero-text); }
.salon-mini--terrazas { --c: var(--cat-terrazas); --c-text: var(--cat-terrazas-text); }
.salon-mini--amarras { --c: var(--cat-amarras); --c-text: var(--cat-amarras-text); }
.salon-mini__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.salon-mini__photo::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c); z-index: 1; }
.salon-mini__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease-out); }
.salon-mini:hover .salon-mini__photo img { transform: scale(1.05); }
.salon-mini__body { padding: 24px 28px 28px; }
.salon-mini__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.salon-mini__area { font-family: var(--font-heading); font-weight: 800; color: var(--c-text, var(--c)); font-size: 1.35rem; }
.salon-mini h3 { font-family: var(--font-heading); margin: 0; font-size: 1.25rem; }
.salon-mini p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* Salón Muelle — compact add-on banner (demoted from full section) */
.muelle-banner {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--navy-deep);
  color: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 960px) {
  .muelle-banner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0;
  }
}
.muelle-banner__facets {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.4;
  pointer-events: none;
}
.muelle-banner__content {
  padding: clamp(24px, 5vw, 44px);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.muelle-banner .eyebrow {
  color: #4FB4E8;
  margin-bottom: 12px;
}
.muelle-banner h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}
.muelle-banner__description {
  color: var(--on-dark-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 24px;
  max-width: 60ch;
}
.muelle-banner__specs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.muelle-banner__specs li {
  display: flex;
  gap: 12px;
  align-items: start;
  font-size: 0.92rem;
  color: var(--on-dark-muted);
  line-height: 1.45;
}
.muelle-banner__specs li svg {
  width: 18px;
  height: 18px;
  color: var(--brand-blue);
  flex-shrink: 0;
  margin-top: 3px;
}
.muelle-banner__specs li strong {
  color: #fff;
  font-weight: 600;
}
.muelle-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.muelle-banner__actions .btn {
  font-size: 0.88rem;
  padding: 12px 24px;
}
.muelle-banner__image {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  height: 100%;
}
@media (max-width: 959px) {
  .muelle-banner__image {
    min-height: 240px;
    grid-row: 1; /* Puts image on top on mobile layout */
  }
}
.muelle-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease-out);
}
.muelle-banner:hover .muelle-banner__image img {
  transform: scale(1.03);
}
.muelle-banner__image-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(7, 42, 73, 0.8);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.stands__note {
  margin-top: 24px; padding: 18px 22px; border-radius: var(--r-xl);
  background: rgba(244,123,32,0.08); border: 1px solid rgba(244,123,32,0.22);
  display: flex; gap: 14px; align-items: center; font-size: 0.92rem; color: var(--ink-variant);
  max-width: none; width: 100%; box-sizing: border-box;
}
.stands__note svg { width: 24px; height: 24px; color: var(--brand-orange-text); flex-shrink: 0; }

/* ============================================================================
   SPONSORS preview
   ========================================================================== */
.sponsors__grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 920px) { .sponsors__grid { grid-template-columns: 0.95fr 1.05fr; gap: 60px; } }
.tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 520px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 920px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
.tier {
  border: 1px solid var(--border-muted); border-radius: var(--r-xl); padding: 22px 20px; background: var(--surface);
  position: relative; overflow: hidden; transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.tier::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--tc); }
.tier__name { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; color: var(--tc); letter-spacing: 0.02em; }
.tier__price { font-family: var(--font-heading); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 2rem; color: var(--ink); line-height: 1; margin: 12px 0 4px; }
.tier__price small { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.tier--platino { --tc: var(--brand-orange); }
.tier--oro { --tc: var(--brand-blue-ink); }
.tier--plata { --tc: var(--tier-cyan); }
.tier--bronce { --tc: var(--green); }

/* ============================================================================
   AUTHORITY band
   ========================================================================== */
.authority { background: var(--surface); }
.authority__inner { text-align: center; }
.org-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(28px, 5vw, 64px); margin-top: 34px;
}
.org { display: flex; align-items: center; gap: 12px; color: var(--ink-variant); }
/* Los logos de organizadores enlazan a sus sitios. Igual que en el muro de
   patrocinadores, el desplazamiento va sobre la imagen y no sobre el enlace,
   para no mover el area clicleable y evitar el parpadeo por perder el hover. */
a.org { text-decoration: none; }
a.org img { transition: transform .18s ease; }
a.org:hover img, a.org:focus-visible img { transform: translateY(-2px) scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  a.org img, a.org:hover img, a.org:focus-visible img { transform: none; transition: none; }
}
/* Alto por logo, no uno fijo para todos: a 52px parejos el de Santa Fe
   ocupaba 1,78 veces la superficie de los otros por ser mucho mas ancho.
   Cada uno lleva un --h calculado para que los tres pesen visualmente igual. */
.org img { height: var(--h, 52px); width: auto; }
.org__lockup { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.org__lockup b { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: 0.98rem; color: var(--navy); letter-spacing: 0.01em; }
.org__lockup span { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.04em; }
.org__divider { width: 1px; height: 40px; background: var(--border-muted); }

/* ============================================================================
   SALÓN MUELLE
   ========================================================================== */
.muelle { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.muelle__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 920px) { .muelle__grid { grid-template-columns: 1fr 1fr; gap: 60px; } }
.muelle h2 .accent { color: var(--brand-orange); }
.muelle p { color: var(--on-dark-muted); }
.muelle__caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.cap {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-xl); padding: 20px;
}
.cap__num { font-family: var(--font-heading); font-weight: 800; font-size: 1.7rem; color: #fff; line-height: 1; }
.cap__label { color: var(--on-dark-muted); font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 7px; font-weight: 600; }
.muelle__photo {
  position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 340px;
  border: 1px solid rgba(255,255,255,0.14);
}
.muelle__services { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.muelle__services li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.07); font-size: 0.84rem; color: #fff; font-weight: 600;
}
.muelle__services svg { width: 16px; height: 16px; color: var(--brand-orange); }

/* ---- Photo placeholder (branded; never a broken image) ------------------ */
.photo-slot {
  position: relative; background:
    linear-gradient(135deg, rgba(10,132,196,0.18), rgba(7,42,73,0.05)),
    var(--navy);
  display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
}
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot__facets { position: absolute; inset: 0; z-index: 1; opacity: 0.5; }
.photo-slot__tag {
  position: relative; z-index: 2; margin: 16px; padding: 9px 14px; border-radius: var(--r-lg);
  background: rgba(7,42,73,0.72); color: #fff; font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; display: inline-flex; gap: 8px; align-items: center;
}
.photo-slot__tag svg { width: 15px; height: 15px; color: var(--brand-orange-text); }

/* ---- Plano trigger (clickable technical diagram → lightbox) -------------- */
.plano-trigger {
  display: flex; width: 100%; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: zoom-in;
  background: #fff; -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.plano-trigger:hover, .plano-trigger:focus-visible {
  box-shadow: var(--sh-card-hover); transform: translateY(-3px);
}
.plano-trigger:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.plano-trigger img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 20px; box-sizing: border-box; background: #fff;
}
.photo-slot__zoom {
  position: absolute; z-index: 2; bottom: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: rgba(7,42,73,0.85); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.photo-slot__zoom svg { width: 18px; height: 18px; }
.plano-trigger:hover .photo-slot__zoom, .plano-trigger:focus-visible .photo-slot__zoom {
  transform: scale(1.1); background: var(--brand-orange);
}

/* ---- Lightbox (plano ampliado) -------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 450;
  background: rgba(7,42,73,0.92);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox__figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 95vw; }
.lightbox__figure img {
  display: block; max-width: 95vw; max-height: 80vh; width: auto; height: auto;
  border-radius: var(--r-xl); background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
  transform: scale(0.96); transition: transform 0.3s var(--ease-out);
}
.lightbox.is-open .lightbox__figure img { transform: scale(1); }
.lightbox__caption {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.02em; color: #fff; text-align: center;
}
.lightbox__close {
  position: absolute; top: -18px; right: -18px;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: #fff; color: var(--navy); border: none;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.2s var(--ease-out);
}
.lightbox__close:hover { transform: scale(1.08); }
@media (max-width: 640px) {
  .lightbox { padding: 16px; }
  .lightbox__figure { max-width: 100%; }
  .lightbox__figure img { max-width: 100%; max-height: 78vh; }
  .lightbox__close { top: -14px; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__figure img, .plano-trigger, .photo-slot__zoom { transition: none; }
}

/* ============================================================================
   FINAL CTA
   ========================================================================== */
.finalcta { position: relative; background: var(--navy); color: #fff; text-align: center; overflow: hidden; }
.finalcta__facets { position: absolute; inset: 0; z-index: 0; opacity: 0.6; }
.finalcta .container { position: relative; z-index: 1; }
.finalcta h2 { font-family: var(--font-heading); margin: 0 auto 18px; max-width: 20ch; }
.finalcta h2 .accent { color: var(--brand-orange); }
.finalcta p { margin: 0 auto 32px; color: var(--on-dark-muted); max-width: 56ch; }
.finalcta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.finalcta--back-letras {
  background-image: url('../img/back-letras.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--navy-deep); color: var(--on-dark-muted); padding-block: clamp(48px, 7vw, 72px) 28px; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand img { height: 40px; margin-bottom: 16px; }
.footer__brand .wordmark { font-family: var(--font-heading); color: #fff !important; font-weight: 800; font-size: 1.6rem; display: inline-block; margin-bottom: 16px; }
.footer__brand .wordmark span { color: #fff !important; }
.footer__brand p { color: var(--on-dark-muted); font-size: 0.92rem; max-width: 40ch; }
.footer h4 { font-family: var(--font-heading); color: #fff; font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.08em; margin: 0 0 16px; }
.footer__links li { margin-bottom: 10px; }
.footer__links a { font-size: 0.92rem; transition: color 0.18s var(--ease-out); }
.footer__links a:hover { color: #fff; }
.footer__contact a { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.92rem; }
.footer__contact svg { width: 17px; height: 17px; color: var(--brand-blue); flex-shrink: 0; }
.footer__bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  font-size: 0.82rem;
}

/* ============================================================================
   SCROLL REVEAL
   ========================================================================== */
/* Reveal enhances an already-visible default: content is visible without JS.
   Only when JS is active (html.js) do we hide-then-animate; if the observer
   never fires, the failsafe in JS still reveals everything. */
.reveal { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.js .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .route:hover, .salon-card:hover, .tier:hover { transform: none; }
  .btn:active { transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================================
   RESPONSIVE — header collapse
   ========================================================================== */
@media (max-width: 1040px) {
  .nav, .header__cta .btn { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 560px) {
  .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6vw), 0 100%); }
  .price-row { grid-template-columns: auto 1fr; grid-template-areas: "size meta" "price price"; row-gap: 4px; }
  .price-row__price { grid-area: price; text-align: left; }
}

/* ============================================================================
   PAGE HERO (páginas internas — más compacto que el hero de home)
   ========================================================================== */
.page-hero {
  position: relative; background: var(--navy-deep); color: #fff; isolation: isolate;
  padding-top: clamp(52px, 7vw, 88px);
  padding-bottom: clamp(64px, 10vw, 120px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5vw), 0 100%);
  overflow: hidden;
}
.page-hero__facets { position: absolute; inset: 0; z-index: -1; opacity: 0.85; }
.page-hero__facets svg { width: 100%; height: 100%; }
.page-hero__glow {
  position: absolute; z-index: -1; width: 50vw; height: 50vw; max-width: 600px; max-height: 600px;
  right: -10vw; top: -14vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(10,132,196,0.38), transparent 60%);
  filter: blur(10px);
}
.page-hero__photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.page-hero__photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.24; }
.page-hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, var(--navy-deep) 22%, rgba(7,42,73,0.82) 55%, rgba(7,42,73,0.6) 100%);
}
.page-hero__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; margin-bottom: 22px;
}
.page-hero__chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-orange); }
.page-hero h1 { margin: 0 0 18px; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.0; }
.page-hero h1 .accent { color: var(--brand-orange); }
.page-hero h1 .blue { color: #4FB4E8; }
.page-hero__sub { color: var(--on-dark-muted); font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 58ch; margin-bottom: 28px; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-lg);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13);
  font-size: 0.88rem; font-weight: 700; color: #fff;
}
.page-hero__badge svg { width: 16px; height: 16px; color: var(--brand-orange); flex-shrink: 0; }

/* ============================================================================
   MODAL DOSSIER (email gate)
   ========================================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 42, 73, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s var(--ease-out), visibility 0.28s;
  z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-backdrop.is-open { opacity: 1; visibility: visible; }
.modal {
  background: #fff; border-radius: var(--r-xl);
  width: 100%; max-width: 480px;
  padding: clamp(28px, 5vw, 44px);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s var(--ease-out);
  position: relative;
  box-shadow: 0 32px 80px -12px rgba(7,42,73,0.38);
}
.modal-backdrop.is-open .modal { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: var(--r-lg);
  border: 1px solid var(--border-muted); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 20px; line-height: 1;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.modal__close:hover { background: var(--surface-container); color: var(--ink); }
.modal__eyebrow {
  font-weight: 600; font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-blue-ink); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.modal__eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--brand-orange); }
.modal h2 { font-size: 1.45rem; font-weight: 800;  margin: 0 0 8px; color: var(--ink); }
.modal__subtitle { font-size: 0.94rem; color: var(--muted); margin: 0 0 24px; max-width: 38ch; }
.modal__form { display: flex; flex-direction: column; gap: 14px; }
.modal__field { display: flex; flex-direction: column; gap: 6px; }
.modal__field label { font-size: 0.8rem; font-weight: 600; color: var(--ink-variant); letter-spacing: 0.03em; }
.modal__field input {
  padding: 12px 15px; border-radius: var(--r-lg);
  border: 1.5px solid var(--border-muted); background: var(--surface-subtle);
  font-family: var(--font-body); font-size: 0.97rem; color: var(--ink);
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.modal__field input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(10,132,196,0.14); }
.modal__field input::placeholder { color: var(--muted); }
.modal__field input.is-invalid { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(232,65,46,0.12); }
.modal__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0 2px;
  cursor: pointer;
}
.modal__checkbox input[type="checkbox"] {
  margin-top: 2px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--brand-blue);
}
.modal__checkbox label {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-variant);
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}
.modal__submit { margin-top: 4px; width: 100%; }
.modal__content { }
.modal__success { display: none; text-align: center; padding: 8px 0; }
.modal__success.is-visible { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.modal__success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(47,170,78,0.12); border: 2px solid rgba(47,170,78,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #2FAA4E; font-size: 28px;
}
.modal__success h3 { margin: 0; font-size: 1.25rem; font-weight: 800;  color: var(--ink); }
.modal__success p { font-size: 0.92rem; color: var(--muted); margin: 0; max-width: 34ch; }
.modal__download { margin-top: 4px; }
.modal__spinner-wrap { display: none; align-items: center; justify-content: center; gap: 10px; padding: 4px 0; }
.modal__spinner-wrap.is-visible { display: flex; }
.modal__spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(244,123,32,0.25); border-top-color: var(--brand-orange);
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   PRICING TABLE — sponsors.html
   ========================================================================== */
.pricing-intro { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 900px) { .pricing-intro { grid-template-columns: 1fr 1fr; gap: 64px; } }
.value-props { display: flex; flex-direction: column; gap: 22px; margin-top: 10px; }
.value-prop { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.value-prop__icon {
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,132,196,0.1);
}
.value-prop__icon svg { width: 20px; height: 20px; color: var(--brand-blue-ink); }
.value-prop h3 { margin: 0 0 5px; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.value-prop p { margin: 0; font-size: 0.9rem; color: var(--muted); }
.pricing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 24px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  border: 1px solid var(--border-muted);
}
.pricing-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  background: var(--surface);
}
.pricing-table thead th {
  padding: 0;
  vertical-align: bottom;
}
.tier-head {
  position: relative;
  padding: 32px 20px 24px;
  background: var(--surface);
  border-bottom: 2px solid var(--border-muted);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.tier-head--platino {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: #fff;
  border-bottom: 2px solid var(--brand-orange);
}
.tier-head__badge {
  display: inline-block;
  margin: -8px auto 12px;
  background: var(--brand-orange);
  color: var(--ink);
  padding: 4px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(244, 123, 32, 0.4);
}
.tier-head__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.tier-head--platino .tier-head__name { color: var(--brand-orange-text); }
.tier-head--oro .tier-head__name { color: var(--brand-blue); }
.tier-head--plata .tier-head__name { color: var(--navy); }
.tier-head--bronce .tier-head__name { color: var(--ink-variant); }

.tier-head__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.1;
  margin-bottom: 16px;
}
.tier-head__price .cur {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.75;
  margin-right: 4px;
}
.tier-head__cta-mini {
  margin-top: 16px;
}
.tier-head__cta-mini .btn {
  width: 100%;
  font-size: 0.82rem;
  padding: 10px 12px;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.pricing-table tbody tr {
  transition: background-color var(--dur) var(--ease-out);
}
.pricing-table tbody tr:hover {
  background-color: var(--surface-subtle);
}

.pricing-table .row-label td:first-child {
  padding: 18px 24px;
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--border-muted);
  max-width: 320px;
  line-height: 1.4;
}
.pricing-table td.check-cell {
  text-align: center;
  padding: 18px 12px;
  border-bottom: 1px solid var(--border-muted);
}
.pricing-table td.check-cell.platino-col {
  background: rgba(244, 123, 32, 0.02);
}

/* Beautiful Pure CSS Icons */
.check-yes, .check-yes-p, .check-no {
  font-size: 0; /* Hides raw text mark */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  vertical-align: middle;
}
.check-yes {
  background: rgba(10, 132, 196, 0.1);
  color: var(--brand-blue-ink);
}
.check-yes::before {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.check-yes-p {
  background: rgba(244, 123, 32, 0.15);
  color: var(--brand-orange-text);
}
.check-yes-p::before {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg) translate(0.5px, -1px);
}
.check-no {
  background: transparent;
  color: var(--muted);
  opacity: 0.4;
}
.check-no::before {
  content: "";
  display: block;
  width: 8px;
  height: 2px;
  background-color: currentColor;
}
.pricing-note {
  background: var(--surface-container); border: 1.5px solid var(--border-muted);
  border-radius: var(--r-xl); padding: 26px 30px;
  display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center;
}
@media (min-width: 720px) { .pricing-note { grid-template-columns: 1fr auto; } }
.pricing-note__text h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.pricing-note__text p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* Mobile Sponsors Tabs */
.mobile-sponsors-tabs {
  display: none;
}
@media (max-width: 767px) {
  .mobile-sponsors-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 20px;
    background: var(--surface-subtle);
    padding: 4px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-muted);
  }
  .sponsor-tab-btn {
    border: none;
    background: transparent;
    padding: 10px 4px;
    border-radius: var(--r-md) !important;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink-variant);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
  }
  .sponsor-tab-btn.is-active {
    background: var(--surface) !important;
    color: var(--brand-orange) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }

  .pricing-table-wrap {
    overflow-x: visible !important;
  }
  .pricing-table {
    min-width: 100% !important;
  }
  
  /* Columns Toggle Logic */
  .pricing-table th:nth-child(2),
  .pricing-table td:nth-child(2),
  .pricing-table th:nth-child(3),
  .pricing-table td:nth-child(3),
  .pricing-table th:nth-child(4),
  .pricing-table td:nth-child(4),
  .pricing-table th:nth-child(5),
  .pricing-table td:nth-child(5) {
    display: none !important;
  }

  /* Show active column based on active tab class on table */
  .pricing-table.show-col-1 th:nth-child(2),
  .pricing-table.show-col-1 td:nth-child(2) {
    display: table-cell !important;
  }
  .pricing-table.show-col-2 th:nth-child(3),
  .pricing-table.show-col-2 td:nth-child(3) {
    display: table-cell !important;
  }
  .pricing-table.show-col-3 th:nth-child(4),
  .pricing-table.show-col-3 td:nth-child(4) {
    display: table-cell !important;
  }
  .pricing-table.show-col-4 th:nth-child(5),
  .pricing-table.show-col-4 td:nth-child(5) {
    display: table-cell !important;
  }

  /* Adjust first column width to give more room to feature descriptions */
  .pricing-table .row-label td:first-child {
    width: 65% !important;
    padding: 14px 16px !important;
    font-size: 0.85rem !important;
  }
  .pricing-table td.check-cell {
    width: 35% !important;
    padding: 14px 8px !important;
  }
  
  .tier-head {
    padding: 20px 10px 16px !important;
  }
  .tier-head__name {
    font-size: 1.1rem !important;
  }
  .tier-head__price {
    font-size: 1.6rem !important;
    margin-bottom: 10px !important;
  }
}

/* ============================================================================
   CRONOGRAMA — programa.html
   ========================================================================== */
.auditorio-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 860px) { .auditorio-cards { grid-template-columns: repeat(3, 1fr); } }
.auditorio-card {
  position: relative; background: var(--surface);
  border: 1px solid var(--border-muted); border-radius: var(--r-xl);
  padding: 26px 24px; overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.auditorio-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
.auditorio-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--ac); }
.auditorio-card--embarcadero { --ac: var(--cat-embarcadero); --ac-text: var(--cat-embarcadero-text); }
.auditorio-card--terrazas { --ac: var(--cat-terrazas); --ac-text: var(--cat-terrazas-text); }
.auditorio-card--amarras { --ac: var(--cat-amarras); --ac-text: var(--cat-amarras-text); }
.auditorio-card__cap {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 0.78rem; color: var(--ac-text, var(--ac));
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.auditorio-card h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.auditorio-card__seats { font-weight: 800; font-stretch: 115%; font-size: 2rem; color: var(--navy); line-height: 1; margin-bottom: 4px; }
.auditorio-card__seats small { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.auditorio-card p { margin: 10px 0 14px; font-size: 0.88rem; color: var(--muted); }
.auditorio-card__specs { display: flex; flex-direction: column; gap: 6px; }
.auditorio-card__spec { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-variant); }
.auditorio-card__spec svg { width: 13px; height: 13px; color: var(--ac); flex-shrink: 0; }
.uni-block {
  background: var(--navy-deep); color: #fff; border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px); display: grid;
  grid-template-columns: 1fr; gap: 28px; align-items: center;
}
@media (min-width: 900px) { .uni-block { grid-template-columns: 1fr 1fr; gap: 48px; } }
.uni-block__stats { display: flex; gap: 32px; flex-wrap: wrap; }
.uni-stat__num { font-weight: 800; font-stretch: 118%; font-size: 2.4rem; color: var(--brand-orange); line-height: 1; }
.uni-stat__label { color: var(--on-dark-muted); font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 5px; font-weight: 600; }
.uni-block h3 { color: #fff; margin: 0 0 10px; }
.uni-block p { color: var(--on-dark-muted); margin: 0; font-size: 0.96rem; }
.schedule-tabs {
  display: flex; gap: 4px; border-bottom: 2px solid var(--border-muted); margin-bottom: 28px;
}
.schedule-tab {
  padding: 13px 22px; font-weight: 700; font-size: 0.95rem; color: var(--muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
  cursor: pointer; background: none; border-top: none; border-left: none; border-right: none;
  text-align: left;
}
.schedule-tab:hover { color: var(--ink); }
.schedule-tab.is-active { color: var(--navy); border-bottom-color: var(--navy); }
.schedule-tab__day { font-weight: 800;  text-transform: uppercase; display: block; }
.schedule-tab__date { display: block; font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.schedule-tab.is-active .schedule-tab__date { color: var(--navy); opacity: 0.7; }
.auditorio-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.audi-pill {
  padding: 9px 17px; border-radius: var(--r-pill);
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em;
  border: 1.5px solid var(--border-muted); background: var(--surface);
  color: var(--ink-variant); cursor: pointer;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.audi-pill:hover { border-color: var(--ink-variant); color: var(--ink); }
.audi-pill.is-active { background: var(--navy-deep); color: #fff; border-color: var(--navy-deep); }
.audi-pill--embarcadero.is-active { background: var(--cat-embarcadero); border-color: var(--cat-embarcadero); }
.audi-pill--terrazas.is-active { background: var(--cat-terrazas); border-color: var(--cat-terrazas); }
.audi-pill--amarras.is-active { background: var(--cat-amarras); border-color: var(--cat-amarras); }
.audi-pill--muelle.is-active { background: var(--cat-muelle); border-color: var(--cat-muelle); }
.day-panel { display: none; }
.day-panel.is-active { display: block; }
.schedule-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.session-card {
  display: grid; grid-template-columns: 78px 1fr;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-muted);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.session-card:hover { transform: translateX(4px); box-shadow: var(--sh-card-hover); }
.session-card[data-auditorio="embarcadero"] { border-left: 4px solid var(--cat-embarcadero); }
.session-card[data-auditorio="terrazas"] { border-left: 4px solid var(--cat-terrazas); }
.session-card[data-auditorio="amarras"] { border-left: 4px solid var(--cat-amarras); }
.session-card[data-auditorio="muelle"] { border-left: 4px solid var(--cat-muelle); }
.session-card__time {
  background: var(--surface-container);
  display: flex; align-items: flex-start; justify-content: center;
  font-weight: 800; font-stretch: var(--num-wdth-pct); font-variant-numeric: tabular-nums; font-size: 1rem; color: var(--navy);
  text-align: center; padding: 15px 8px;
}
.session-card__body { padding: 15px 18px 16px; }
.session-card__auditorio { font-size: 0.79rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
[data-auditorio="embarcadero"] .session-card__auditorio { color: var(--cat-embarcadero-text); }
[data-auditorio="terrazas"] .session-card__auditorio { color: var(--cat-terrazas-text); }
[data-auditorio="amarras"] .session-card__auditorio { color: var(--cat-amarras-text); }
[data-auditorio="muelle"] .session-card__auditorio { color: var(--cat-muelle-text); }
.session-card__title { font-weight: 700; font-size: 1.06rem; line-height: 1.35; color: var(--ink); margin: 0 0 9px; }
.session-roster { margin: 12px 0 10px; }
.session-roster__label {
  display: block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.session-roster__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.speaker { font-size: 0.94rem; line-height: 1.42; }
.speaker__name { display: block; font-weight: 700; color: var(--ink); }
.speaker__role { display: block; color: var(--muted); font-weight: 500; }
.speaker--tba .speaker__role { font-style: italic; }
.session-roster__note { margin: 0 0 10px; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
/* Descripción en prosa (actividades sin lista de oradores, p. ej. la inauguración) */
.session-card__desc { margin: 0 0 12px; font-size: 0.94rem; line-height: 1.5; color: var(--muted); }
/* Actividad continua (Simulador de Manejo) — sin columna de horario */
.session-card.session-card--allday { grid-template-columns: 1fr; margin-bottom: 12px; background: var(--surface-container); }
.session-card--allday:hover { transform: none; }
.session-card__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.session-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.84rem; color: var(--muted); font-weight: 600;
  background: var(--surface-container); padding: 4px 11px; border-radius: var(--r-pill);
}
.session-card.is-hidden { display: none; }

/* ============================================================================
   CONTACTO — formulario + mapa
   ========================================================================== */
.contacto-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 900px) { .contacto-layout { grid-template-columns: 1fr 1.1fr; gap: 64px; } }
.venue-map {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4 / 3; margin-bottom: 24px; background: var(--navy);
}
.venue-map img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }
.venue-map__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(7,42,73,0.55) 100%);
}
.venue-map__pin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 4px 12px rgba(7,42,73,0.5));
}
.venue-map__pin svg { width: 36px; height: 36px; }
.venue-map__label {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  background: rgba(7,42,73,0.92); color: #fff; padding: 10px 14px;
  border-radius: var(--r-lg); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  backdrop-filter: blur(4px);
}
.venue-map__label-info { display: flex; align-items: center; gap: 10px; }
.venue-map__label svg { width: 16px; height: 16px; color: var(--brand-orange); flex-shrink: 0; }
.venue-map__label span { font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.venue-map__label-btn {
  flex-shrink: 0;
  background: var(--brand-orange);
  color: var(--ink);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.venue-map__label-btn:hover { background: var(--brand-orange-hover); color: var(--ink); transform: translateY(-1px); }
.venue-map__label-btn svg { color: var(--ink) !important; width: 12px; height: 12px; }
.contacto-details { display: flex; flex-direction: column; gap: 10px; }
.contacto-detail {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-muted);
  font-size: 0.9rem; color: var(--ink-variant);
}
.contacto-detail svg { width: 18px; height: 18px; color: var(--brand-blue); flex-shrink: 0; }
.contacto-detail a { color: var(--ink); font-weight: 600; }
.contacto-detail a:hover { color: var(--brand-blue-ink); }
.contacto-detail strong { color: var(--ink); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .contact-form .form-row { grid-template-columns: 1fr; } }
.contact-form .form-field { display: flex; flex-direction: column; gap: 7px; }
.contact-form label { font-size: 0.8rem; font-weight: 600; color: var(--ink-variant); letter-spacing: 0.03em; }
.contact-form input,
.contact-form textarea {
  padding: 13px 15px; border-radius: var(--r-lg);
  border: 1.5px solid var(--border-muted); background: var(--surface);
  font-family: var(--font-body); font-size: 0.97rem; color: var(--ink);
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); width: 100%;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(10,132,196,0.14); }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--muted); }
.contact-form__feedback {
  display: none; align-items: center; gap: 14px; padding: 16px 20px; margin-top: 16px;
  border-radius: var(--r-xl); background: rgba(47,170,78,0.08);
  border: 1.5px solid rgba(47,170,78,0.25);
}
.contact-form__feedback.is-visible { display: flex; }
.contact-form__feedback svg { width: 22px; height: 22px; color: #2FAA4E; flex-shrink: 0; }
.contact-form__feedback p { margin: 0; font-size: 0.92rem; color: var(--ink-variant); }
.contact-form__feedback strong { color: var(--ink); }
.contact-form input.is-invalid,
.contact-form textarea.is-invalid { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(232,65,46,0.12); }
.contact-form__error {
  display: none; align-items: center; gap: 14px; padding: 16px 20px; margin-top: 16px;
  border-radius: var(--r-xl); background: rgba(232,65,46,0.08);
  border: 1.5px solid rgba(232,65,46,0.25);
}
.contact-form__error.is-visible { display: flex; }
.contact-form__error svg { width: 22px; height: 22px; color: var(--brand-red); flex-shrink: 0; }
.contact-form__error p { margin: 0; font-size: 0.92rem; color: var(--ink-variant); }
.contact-form__error strong { color: var(--ink); }

/* ============================================================================
   STANDS — toggle de modulaciones
   ========================================================================== */
.modulation-toggle {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill);
  background: var(--surface-container); border: 1px solid var(--border-muted);
  width: fit-content; margin-bottom: 22px;
}
.mod-btn {
  padding: 8px 18px; border-radius: var(--r-pill);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  background: transparent; border: none; color: var(--muted);
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
  cursor: pointer;
}
.mod-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(11,60,102,0.12); }
.mod-panel { display: none; }
.mod-panel.is-active { display: block; }
.modulation-note {
  padding: 13px 17px; border-radius: var(--r-lg); margin-top: 14px;
  background: rgba(10,132,196,0.07); border: 1px solid rgba(10,132,196,0.18);
  font-size: 0.86rem; color: var(--ink-variant); display: flex; gap: 10px; align-items: flex-start;
}
.modulation-note svg { width: 16px; height: 16px; color: var(--brand-blue); flex-shrink: 0; margin-top: 2px; }

/* NAV active state for cross-page navigation */
.nav__link[aria-current="page"] { color: var(--brand-blue-ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ============================================================================
   RESPONSIVE — nuevas páginas
   ========================================================================== */
@media (max-width: 660px) {
  .schedule-tabs { overflow-x: auto; padding-bottom: 2px; flex-wrap: nowrap; }
  .schedule-tab { white-space: nowrap; padding: 12px 16px; }
  .session-card { grid-template-columns: 64px 1fr; }
  .session-card__time { font-size: 0.94rem; padding: 14px 5px; }
  .session-card__body { padding: 14px 14px 15px; }
  .session-card__title { font-size: 1rem; }
  .speaker { font-size: 0.92rem; }
  .uni-block__stats { gap: 20px; }
  .auditorio-filters { gap: 6px; }
  .audi-pill { font-size: 0.84rem; padding: 10px 15px; } /* 44px de alto: área táctil cómoda */
  .pricing-table-wrap { border-radius: var(--r-xl); border: 1px solid var(--border-muted); }
}

/* ===================== STAND DETAIL CARDS ===================== */
.stands-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 32px;
}
@media (min-width: 768px) {
  .stands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .stands-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stand-detail-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-muted);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.stand-detail-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-card-hover);
}

.stand-detail-card__top {
  padding: 24px 24px 20px;
  background: var(--surface-container);
  border-bottom: 1px solid var(--border-muted);
  position: relative;
}
.stand-detail-card__top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--cat-color, var(--brand-orange));
}
.stand-detail-card__title {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.1;
}
.stand-detail-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stand-detail-card__meta .chip {
  padding: 2px 8px;
  font-size: 0.75rem;
}

.stand-detail-card__image {
  width: 100%;
  height: 180px;
  background: var(--surface-container);
  border-bottom: 1px solid var(--border-muted);
  position: relative;
  overflow: hidden;
}
.stand-detail-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur) var(--ease-out);
}
.stand-detail-card:hover .stand-detail-card__image img {
  transform: scale(1.03);
}
.stand-detail-card__salon-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--cat-color-text, var(--navy));
  border: 1px solid var(--cat-color, var(--border-muted));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.stand-detail-card__body {
  padding: 24px;
  flex: 1;
}
.stand-detail-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stand-detail-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.93rem;
  color: var(--ink-variant);
  line-height: 1.45;
}
.stand-detail-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--cat-color, var(--brand-orange));
  border-bottom: 2px solid var(--cat-color, var(--brand-orange));
  transform: rotate(-45deg);
}
.stand-detail-card__list li b {
  font-weight: 700;
  color: var(--ink);
}

.stand-detail-card__footer {
  padding: 24px;
  background: var(--surface-container);
  border-top: 1px solid var(--border-muted);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stand-detail-card__price-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.stand-detail-card__price-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stand-detail-card__price-value {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.btn--reserve {
  width: 100%;
  background: var(--cat-color-text, var(--brand-orange-text));
  color: #fff;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.btn--reserve:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  color: #fff;
}

/* Modifiers */
.stand-detail-card--embarcadero { --cat-color: var(--cat-embarcadero); --cat-color-text: var(--cat-embarcadero-text); }
.stand-detail-card--terrazas { --cat-color: var(--cat-terrazas); --cat-color-text: var(--cat-terrazas-text); }
.stand-detail-card--amarras { --cat-color: var(--cat-amarras); --cat-color-text: var(--cat-amarras-text); }

/* ===================== EVENTO PAGE ===================== */

/* Intro: text + photo side by side */
.evento__intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 768px) {
  .evento__intro {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}
.evento__intro-text .headline {
  margin-bottom: 20px;
}
.evento__intro-text p {
  margin-bottom: 16px;
  max-width: 65ch;
}
.evento__intro-photo {
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.evento__intro-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,132,196,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.evento__intro-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* Organizers */
.evento__organizers {
  margin-top: 48px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  border-radius: 14px;
  text-align: center;
}
.evento__organizers p {
  max-width: 65ch;
  margin: 0 auto 24px;
}
.evento__organizers-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.evento__organizers-logos img {
  height: 48px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.evento__organizers-logos img:hover {
  opacity: 1;
}

/* Objetivos */
.evento__objetivos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .evento__objetivos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .evento__objetivos {
    grid-template-columns: repeat(3, 1fr);
  }
}
.evento__objetivo {
  padding: 28px;
  border-radius: 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-muted);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.evento__objetivo:hover {
  box-shadow: 0 16px 36px -10px rgba(11,60,102,0.15);
  transform: translateY(-3px);
}
.evento__objetivo-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.evento__objetivo-icon svg {
  width: 22px;
  height: 22px;
}
.evento__objetivo h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--ink);
}
.evento__objetivo p {
  font-size: 0.95rem;
  color: var(--ink-variant);
  line-height: 1.55;
}

/* Ejes (dark section) */
.evento__ejes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .evento__ejes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.evento__eje {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.evento__eje:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.35);
}
.evento__eje-img {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.evento__eje-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.evento__eje:hover .evento__eje-img img {
  transform: scale(1.05);
}
.evento__eje-body {
  padding: 24px;
}
.evento__eje-chip {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.evento__eje-body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 8px;
}
.evento__eje-body p {
  font-size: 0.92rem;
  color: var(--on-dark-muted);
  line-height: 1.55;
}

/* KPIs */
.evento__kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
@media (min-width: 768px) {
  .evento__kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}
.evento__kpi {
  text-align: center;
  padding: 28px 16px;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  border-radius: 14px;
}
.evento__kpi-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  color: var(--navy);
}
.evento__kpi-unit {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-blue-ink);
  margin-left: 2px;
}
.evento__kpi-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* Salón distribution */
.evento__salones-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .evento__salones-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.evento__salon {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.evento__salon:hover {
  box-shadow: 0 16px 36px -10px rgba(11,60,102,0.18);
  transform: translateY(-3px);
}
.evento__salon-photo {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.evento__salon-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.evento__salon:hover .evento__salon-photo img {
  transform: scale(1.05);
}
.evento__salon-header {
  padding: 20px 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.evento__salon-header h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.evento__salon-header span {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.evento__salon-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evento__salon-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.evento__salon-stat-value {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--navy);
  line-height: 1;
}
.evento__salon-stat-label {
  font-size: 0.88rem;
  color: var(--muted);
}
.evento__salon-detail {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-muted);
}
.evento__salon-detail p {
  font-size: 0.88rem;
  color: var(--ink-variant);
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ===================== MUELLE PAGE ===================== */

/* Photo hero (large image with overlay text) */
.muelle-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
}
@media (min-width: 768px) {
  .muelle-hero { min-height: 560px; }
}
.muelle-hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.muelle-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.muelle-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,42,73,0.92) 0%, rgba(7,42,73,0.5) 50%, rgba(7,42,73,0.2) 100%);
  z-index: 1;
}
.muelle-hero__content {
  position: relative;
  z-index: 2;
  padding: 48px 0;
  width: 100%;
}
.muelle-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: 16px;
}
.muelle-hero__chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-orange);
  display: inline-block;
}
.muelle-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.muelle-hero__sub {
  font-size: 1.12rem;
  color: var(--on-dark-muted);
  max-width: 50ch;
  line-height: 1.6;
}
.muelle-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.muelle-hero__tag {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 14px;
  border-radius: 4px;
}

/* USPs */
.muelle__usps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .muelle__usps {
    grid-template-columns: repeat(2, 1fr);
  }
}
.muelle__usp {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.muelle__usp:hover {
  box-shadow: 0 16px 36px -10px rgba(11,60,102,0.15);
  transform: translateY(-3px);
}
.muelle__usp-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 10px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.muelle__usp-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}
.muelle__usp h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
  color: var(--ink);
}
.muelle__usp p {
  font-size: 0.92rem;
  color: var(--ink-variant);
  line-height: 1.5;
}

/* Capacity cards */
.muelle__capacity {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .muelle__capacity {
    grid-template-columns: repeat(2, 1fr);
  }
}
.muelle__cap-card {
  padding: 32px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  text-align: center;
}
.muelle__cap-card h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 20px;
  color: var(--ink);
}
.muelle__cap-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.muelle__cap-stat-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  
  font-size: 2rem;
  line-height: 1;
  color: var(--navy);
}
.muelle__cap-stat-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* Services */
.muelle__services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 768px) {
  .muelle__services {
    grid-template-columns: repeat(4, 1fr);
  }
}
.muelle__service {
  text-align: center;
  padding: 24px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.muelle__service-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.muelle__service-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--on-dark-muted);
}
.muelle__service h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  margin-bottom: 4px;
}
.muelle__service p {
  font-size: 0.78rem;
  color: var(--on-dark-muted);
}

@media (min-width: 1024px) {
  .evento__objetivo--large {
    grid-column: span 2;
  }
}

/* ===================== NOVEDADES (Grav) ===================== */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.news-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  color: inherit;
  text-decoration: none;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.news-card__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-container);
}
.news-card__photo::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand-blue);
  z-index: 1;
}
.news-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-out);
}
.news-card:hover .news-card__photo img { transform: scale(1.05); }
.news-card__body { padding: 22px 24px 26px; }
.news-card__date {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-blue-ink);
  margin-bottom: 8px;
}
.news-card__title {
  font-family: var(--font-heading);
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.3;
}
.news-card__excerpt {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-photo {
  margin: 28px 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-muted);
}
.article-photo img {
  width: 100%;
  height: auto;
  display: block;
}
.article-body {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
}
.article-body p { margin: 0 0 20px; }
.article-body h2, .article-body h3 {
  font-family: var(--font-heading);
  margin: 36px 0 16px;
}
.article-body a { color: var(--brand-blue-ink); }
.article-body img {
  max-width: 100%;
  border-radius: var(--r-lg);
  margin: 8px 0 20px;
}

/* ===================================================================
   MURO DE PATROCINADORES  (home)
   Replica la estructura del folleto oficial: pastilla con el nombre de
   la categoria montada sobre una tarjeta con borde del mismo color.
   Colores muestreados del folleto oficial pixel por pixel. El texto de
   la pastilla es blanco o tinta oscura segun cual cumpla contraste AA
   con ese color. Unica excepcion: Estandar se oscurecio de #8B7374 a
   #887172 porque el original no llegaba a 4.5:1 con ningun texto.
   =================================================================== */
.sponsor-wall { display: flex; flex-direction: column; gap: clamp(30px, 3.6vw, 46px); }

.sponsor-tier { position: relative; padding-top: 15px; }
.sponsor-tier__badge {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2;
  background: var(--tc); color: var(--tc-on);
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-size: .78rem; line-height: 1;
  padding: 9px 26px; border-radius: 999px; white-space: nowrap;
}
.sponsor-tier__card {
  border: 2px solid var(--tc); border-radius: var(--r-xl);
  background: var(--surface); padding: 32px 20px 22px;
}

.sponsor-tier--platino  { --tc: #E59736; --tc-on: var(--ink); --tc-ink: #A76616; --cell: 290px; --box: 150px; }
.sponsor-tier--oro      { --tc: #306FBC; --tc-on: #fff;       --tc-ink: #306FBC; --cell: 182px; --box: 102px; }
.sponsor-tier--plata    { --tc: #51986D; --tc-on: var(--ink); --tc-ink: #45825D; --cell: 150px; --box: 80px; }
.sponsor-tier--bronce   { --tc: #D22D1F; --tc-on: #fff;       --tc-ink: #D22D1F; --cell: 142px; --box: 68px; }
.sponsor-tier--estandar { --tc: #887172; --tc-on: #fff;       --tc-ink: #887172; --cell: 128px; --box: 60px; }

/* Flex y no grid: con grid las filas incompletas quedan alineadas a la
   izquierda y sobra un hueco a la derecha. En flex cada fila se centra,
   como en el folleto. El min() evita que una celda supere el contenedor. */
.sponsor-grid {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 20px;
}
.sponsor-item { flex: 0 1 min(var(--cell), 100%); }

.sponsor-item {
  display: flex; align-items: center; justify-content: center;
  height: var(--box); padding: 10px 14px;
  border-radius: var(--r-lg); overflow: hidden;
}
/* Normalizacion optica por AREA, no por caja.
   Si todos los logos se ajustan a la misma caja, uno cuadrado toca el alto
   y se ve enorme, y uno alargado toca el ancho y se ve diminuto. Cada logo
   trae un --k calculado a partir de su relacion de aspecto (k = 1.074/√ratio,
   tope 1) para que todos ocupen aproximadamente la misma superficie visual.
   El alto se fija en px y no con max-height:100%, que dentro de flex/grid
   no resuelve de forma fiable y desbordaba la celda. */
.sponsor-item img {
  height: calc((var(--box) - 20px) * var(--k, 1));
  width: auto; max-width: 100%; object-fit: contain;
}

/* Solo las celdas que son enlace reaccionan al hover.
   El desplazamiento se aplica al logo, NO al enlace: si se mueve el enlace,
   el cursor apoyado cerca del borde queda fuera, se pierde el hover, vuelve
   a su sitio y lo recupera, entrando en un bucle que se ve como parpadeo.
   Manteniendo quieta el area clicleable, eso no puede pasar. */
a.sponsor-item { text-decoration: none; transition: background-color .18s ease; }
a.sponsor-item:hover, a.sponsor-item:focus-visible { background: var(--surface-subtle); }
a.sponsor-item img { transition: transform .18s ease; }
a.sponsor-item:hover img, a.sponsor-item:focus-visible img { transform: translateY(-2px) scale(1.03); }

/* Marca sin archivo de logo todavia: se muestra el nombre */
.sponsor-item__nombre {
  font-family: var(--font-heading); font-weight: 800; font-size: .8rem;
  line-height: 1.15; text-align: center; color: var(--tc-ink);
  text-transform: uppercase; letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  a.sponsor-item img, a.sponsor-item:hover img, a.sponsor-item:focus-visible img { transform: none; transition: none; }
}

/* Tarjeta del router sin destino todavia (ej. Mapa del evento) */
.route--soon { cursor: default; }
.route--soon:hover { transform: none; box-shadow: none; }
.route--soon .title { opacity: .72; }

/* Firma de autoria en la barra inferior del footer.
   Deliberadamente mas apagada que el resto (#8FA6BD da 5,82:1 sobre el fondo
   del footer, contra 8,32:1 del resto) pero sigue cumpliendo AA para texto
   chico. El enlace lleva subrayado propio: asi se distingue del texto que lo
   rodea sin depender solo del color. */
.footer__credit { color: #8FA6BD; }
.footer__credit a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: color .18s var(--ease-out), text-decoration-color .18s var(--ease-out);
}
.footer__credit a:hover, .footer__credit a:focus-visible { color: #fff; text-decoration-color: #fff; }