/* =================================================================
   Forma Soccer Template · template.css
   Estilos base, layout, componentes generales, navegación, footer
   ================================================================= */

/* ---------- 1 · CSS Variables ---------- */
:root {
  /* Brand colors (sobrescribibles desde admin) */
  --brand-blue: #1F3D8E;
  --brand-orange: #ED5A1F;

  /* Tonalidades derivadas */
  --blue-dark: #14296B;
  --blue-light: #3B5BBC;
  --blue-pale: #EDF0FA;
  --orange-dark: #C44A12;
  --orange-pale: #FFE8DC;

  /* Surfaces */
  --cream: #FAF7F2;
  --white: #FFFFFF;
  --ink: #0F172A;
  --ink-2: #2C3548;
  --muted: #6B7280;
  --line: #E5E2DC;

  /* Categorías (acentos por continente) */
  --c-baby: #F472B6;
  --c-africa: #F59E0B;
  --c-europa-chica: #10B981;
  --c-europa-grande: #3B82F6;
  --c-america: #EF4444;
  --c-asia: #8B5CF6;
  --c-femenil: #EC4899;

  /* Estados */
  --win: #10B981;
  --draw: #F59E0B;
  --loss: #EF4444;

  /* Tipografía */
  --font-body: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ---------- 2 · Reset & base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  /* Belt-and-suspenders contra horizontal overflow en mobile:
     - max-width: 100vw caps el html box exactamente al viewport
     - overflow-x: clip en html (además del body que hereda) garantiza
       que cualquier descendant overflow no produzca scroll horizontal.
     Soporta el caso edge donde un elemento absolute-positioned dentro
     de un container sin overflow set escapa al viewport (e.g. pseudo-
     elements decorativos con font-size huge tipo ::before ghost text). */
  max-width: 100vw;
  overflow-x: clip;
}

/* Sticky footer pattern — body como flex column. Cuando el content
   es chico (e.g. categoría de Estadísticas con poca data) el main se
   expande para empujar el footer hasta el bottom del viewport, en vez
   de quedar flotando mid-page. main:flex-grow:1, footer y otros
   siblings (nav, banner, footer-cta) mantienen su tamaño natural.

   overflow-x: clip (no hidden) — `clip` evita el scroll horizontal pero
   NO crea un nuevo scroll container, así no rompe position: sticky en
   descendientes (.site-nav). `hidden` rompía el sticky del nav en mobile.
   Soportado en todos browsers modernos desde 2022 (Safari 15.4+). */
body {
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

body > .site-main { flex: 1 0 auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand-orange); }

img, svg { max-width: 100%; display: block; height: auto; }

button { cursor: pointer; font-family: inherit; }

ul { list-style: none; }

/* ---------- 3 · Layout ---------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.mono { font-family: var(--font-mono); }

/* ---------- 4 · Typography ---------- */
.h-display {
  font-weight: 900;
  font-style: italic;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.eyebrow {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--brand-orange);
}

.eyebrow-with-rule {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow-with-rule::before {
  content: '';
  width: 36px;
  height: 2px;
  background: currentColor;
}

/* ---------- 5 · Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-body);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1;
  text-decoration: none;
}

.btn-primary { background: var(--brand-orange); color: white; }
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); color: white; }

.btn-secondary { background: var(--brand-blue); color: white; }
.btn-secondary:hover { background: var(--blue-dark); transform: translateY(-1px); color: white; }

.btn-outline {
  background: transparent;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
  padding: 12px 24px;
}
.btn-outline:hover { background: var(--brand-blue); color: white; }

.btn-arrow::after { content: '→'; font-style: normal; }

.btn-sm { padding: 10px 18px; font-size: 12px; }

/* ---------- 6 · Site Navigation ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { opacity: 0.85; }

.brand-logo {
  display: block;
  height: 42px;
  width: auto;     /* mantener aspect-ratio del SVG */
  border: 0;
}

/* .brand-ball: legado del placeholder textual previo al logo SVG.
   Ya no se renderea — la regla queda como no-op para evitar drift
   por si algún markup viejo todavía la referencia. */
.brand-ball { display: none; }

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item { margin: 0; position: relative; }

.nav-link {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s;
  display: inline-block;
}
.nav-link:hover,
.nav-link.active,
.nav-item.has-active-child > .nav-link {
  color: var(--brand-orange);
}
.nav-link.active::after,
.nav-item.has-active-child > .nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--brand-orange);
}

/* Caret indicator inline en parent items con children. Inline (no
   pseudo-element) para evitar colisión con .nav-link.active::after que
   ya usa ::after para la underline. Rota cuando el dropdown está open.
   El parent .nav-link ahora es inline-flex para que el caret se centre
   vertical-real en vez de hangear bajo la baseline (artefacto del glyph
   ▾ que pinta debajo de su own baseline + font-size más chico que parent). */
.nav-item.has-children > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;             /* relativo al parent — escala con .nav-link */
  line-height: 1;
  opacity: 0.75;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
.nav-item.has-children:hover > .nav-link .nav-caret,
.nav-item.has-children:focus-within > .nav-link .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}
/* Parent con child activo: caret naranja permanente — señal de "estás
   dentro de esta sección" aunque el dropdown no esté abierto. */
.nav-item.has-active-child .nav-caret {
  color: var(--brand-orange);
  opacity: 1;
}

/* Dropdown submenu — hidden default, shown on hover/focus-within parent. */
.nav-submenu {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(31, 61, 142, 0.10);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  margin: 6px 0 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
  z-index: 200;
}
.nav-item.has-children:hover > .nav-submenu,
.nav-item.has-children:focus-within > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s, transform 0.15s, visibility 0s;
}

.nav-subitem { margin: 0; }

.nav-sublink {
  display: block;
  padding: 10px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-blue);
  text-decoration: none;
  text-transform: none;           /* override .nav-link uppercase del parent */
  letter-spacing: 0;              /* override letter-spacing del parent */
  transition: background 0.1s, color 0.1s;
}
.nav-sublink:hover {
  background: rgba(237, 90, 31, 0.08);
  color: var(--brand-orange);
}
.nav-sublink.active {
  background: rgba(31, 61, 142, 0.05);
  font-weight: 700;
  color: var(--brand-blue);
}

.nav-cta { white-space: nowrap; flex-shrink: 0; }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: all 0.2s;
}

/* ---------- 7 · Main / Page chrome ---------- */
/* min-height fallback para layouts no-flex (legacy contexts). El sticky
   footer real lo maneja `body > .site-main { flex: 1 0 auto }` arriba.
   padding-bottom da air entre el último content y el footer-cta/footer. */
.site-main {
  min-height: 60vh;
  padding-bottom: 64px;
}

/* Grid container — 8/4 split en desktop cuando hay aside (vista
   Estadísticas, menu items 805-809), full-width cuando no. Mobile
   (≤1024px): stack vertical en ambos casos. */
.main-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  align-items: start;
}

.site-main.no-sidebar .main-grid {
  grid-template-columns: 1fr;
}

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

/* minmax(0,...) en el grid permite que los hijos puedan shrink, pero
   tablas anchas igual fuerzan overflow en mobile. min-width:0 en los
   items confirma que pueden achicarse por debajo de su intrinsic
   content size — el overflow se maneja a nivel de tabla con scroll. */
.main-content,
.stats-sidebar { min-width: 0; }

/* En la home (body.is-home) ocultamos el output default de com_content
   (view=featured) que sin artículos publicados deja un <div.blog-featured>
   vacío entre nuestros módulos. Esto es un fallback CSS porque cambiar
   el menu item home a archive/article/url tiene side-effects peores
   (form de búsqueda, 404, etc. — ver migration 005 notes). El home
   recibe su contenido desde módulos en posición `main-top` asignados
   al menu item home. */
body.is-home .blog-featured,
body.is-home #system-message-container:empty { display: none; }

/* Joomla system message styles */
#system-message-container { padding: 16px 0; }
.alert { padding: 12px 18px; margin-bottom: 12px; border: 1px solid; }
.alert-success { background: #dcfce7; border-color: #86efac; color: #166534; }
.alert-warning { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.alert-error, .alert-danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.alert-info { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }

/* ---------- 8 · Section primitives ---------- */
.section { padding: 96px 0; position: relative; }
.section.dark { background: var(--brand-blue); color: white; }
.section.dark-2 { background: var(--blue-dark); color: white; }
.section.cream { background: var(--cream); }
.section.white { background: var(--white); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 32px;
  flex-wrap: wrap;
}
.section-head-left { flex: 1; min-width: 300px; }

.section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-orange);
  letter-spacing: 0.16em;
  margin-bottom: 14px;
  text-transform: uppercase;
  font-weight: 700;
}

.section-title {
  font-weight: 900;
  font-style: italic;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--brand-blue);
}
.section.dark .section-title,
.section.dark-2 .section-title { color: white; }
.section-title .orange { color: var(--brand-orange); }
.section-title .outline { color: var(--cream); -webkit-text-stroke: 2px var(--brand-blue); }

.section-sub {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 440px;
  line-height: 1.55;
  font-weight: 500;
}
.section.dark .section-sub,
.section.dark-2 .section-sub { color: rgba(255, 255, 255, 0.78); }

.section-head-inline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.section-head-inline h2 {
  font-weight: 900;
  font-style: italic;
  font-size: 28px;
  text-transform: uppercase;
  color: var(--brand-blue);
  letter-spacing: -0.02em;
}
.section-head-inline .view-all {
  color: var(--brand-orange);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}
.section-head-inline .view-all::after { content: ' →'; }

/* ---------- 9 · Breadcrumb (Joomla com_breadcrumbs override) ---------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.breadcrumb a { color: inherit; opacity: 0.7; }
.breadcrumb a:hover { color: var(--brand-orange); opacity: 1; }
.breadcrumb .sep, .breadcrumb .divider { margin: 0 12px; opacity: 0.5; }
.breadcrumb .current, .breadcrumb .active { opacity: 1; }

/* ---------- 10 · Cards (genéricas, reutilizables) ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
}
.card-header {
  background: var(--brand-blue);
  color: white;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 16px;
}
.card-badge {
  background: var(--brand-orange);
  color: white;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.card-action {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card-action:hover { color: var(--brand-orange); }

/* ---------- 11 · Joomla article styles ---------- */
.item-page, .blog .items-row {
  padding: 48px 0;
}
.item-page .page-header h2,
.item-page h1 {
  font-weight: 900;
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 24px;
}
.item-page p { line-height: 1.7; margin-bottom: 1em; font-size: 16px; }
.item-page h2 { font-weight: 900; font-style: italic; font-size: 32px; color: var(--brand-blue); margin: 32px 0 16px; text-transform: uppercase; letter-spacing: -0.02em; }
.item-page h3 { font-weight: 800; font-style: italic; font-size: 22px; color: var(--brand-blue); margin: 24px 0 12px; text-transform: uppercase; }
.item-page a { color: var(--brand-orange); text-decoration: underline; text-underline-offset: 3px; }
.item-page img { margin: 24px 0; }
.item-page ul, .item-page ol { padding-left: 28px; margin-bottom: 1em; line-height: 1.7; }
.item-page li { margin-bottom: 6px; }

/* ---------- 12 · Footer CTA section (módulo en posición footer-cta) ---------- */
.footer-cta-section,
.cta-back {
  background: var(--brand-orange);
  color: white;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cta-back::before {
  content: 'TEMPORADA 2026';
  position: absolute;
  right: -30px;
  bottom: -40px;
  font-weight: 900;
  font-style: italic;
  font-size: 200px;
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.08);
  letter-spacing: -0.04em;
  pointer-events: none;
}
.cta-back-inner { position: relative; z-index: 1; max-width: 720px; }
.cta-back h2 {
  font-weight: 900;
  font-style: italic;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.cta-back p {
  font-size: 17px;
  line-height: 1.5;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  margin-bottom: 28px;
}
.cta-back .btn-secondary { background: var(--brand-blue); }
.cta-back .btn-outline { color: white; border-color: white; }
.cta-back .btn-outline:hover { background: white; color: var(--brand-orange); }

/* ---------- 13 · Site Footer · 3-col (Brand / Contacto / Síguenos) ---------- */
.site-footer {
  background: #0c1c3e;
  color: white;
  padding: 60px 32px 0;
  margin-top: 80px;
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

/* Col 1 · Brand */
.footer-col-brand {
  align-items: flex-start;
  gap: 16px;
}

.footer-logo {
  height: 36px;
  width: auto;
}

.footer-badge {
  display: inline-block;
  background: var(--brand-orange, #ED5A1F);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  text-transform: uppercase;
}

.footer-tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 320px;
}

/* Col 2 + 3 · Heading */
.footer-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-orange, #ED5A1F);
  margin: 0 0 18px;
}

/* Col 2 · Contacto links */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-links a:hover,
.footer-links a:focus {
  color: var(--brand-orange, #ED5A1F);
}

.footer-links svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* Col 3 · Socials */
.footer-socials {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  text-decoration: none;
  transition: background 0.2s;
}

.footer-socials a:hover,
.footer-socials a:focus {
  background: var(--brand-orange, #ED5A1F);
}

.footer-socials svg {
  width: 18px;
  height: 18px;
}

.footer-location {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Bottom strip */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
  text-align: center;
}

.footer-bottom p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 48px 20px 0;
    margin-top: 48px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }

  .footer-col-brand {
    align-items: center;
  }

  .footer-tagline {
    text-align: center;
  }

  .footer-links a {
    justify-content: center;
  }

  .footer-socials {
    justify-content: center;
  }
}

/* ---------- 13b · Floating WhatsApp button (FAB) ---------- */
.floating-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  color: white;
}

.floating-whatsapp svg {
  width: 30px;
  height: 30px;
}

@media (max-width: 768px) {
  .floating-whatsapp {
    bottom: 18px;
    right: 18px;
    width: 50px;
    height: 50px;
  }

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

/* ---------- 14 · Module chrome variants ---------- */
.moduletable, .module { margin-bottom: 24px; }
.moduletable h3 { /* default Joomla module title */ }

/* Hide del mod_js_table dentro del sidebar — redundante con el componente
   JoomSport que ya muestra la tabla principal. Selector :has() targeta el
   wrapper .moduletable que contiene .jsmodtbl_responsive (marker exclusivo
   de mod_js_table; mod_js_players usa .jsm_playerstat). Reversible — para
   re-mostrar la tabla bastaría con sacar este bloque. */
.stats-sidebar .moduletable:has(.jsmodtbl_responsive) {
  display: none;
}

/* ---------- 15 · Responsive ---------- */
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }

  /* Logo del header se achica un poco en mobile para dejar espacio al toggle.
     padding-left implícito vía .wrap (24px) — el logo ya respeta breathing room
     desde el edge del viewport en cualquier mobile. */
  .brand-logo { height: 36px; }

  /* Padding vertical extra al nav-inner — el logo a 36px height en mobile
     se sentía pegado al top/bottom del header bar. 10px da breathing room
     pequeño pero presente (header total 56px = 36 logo + 20 padding).
     IMPORTANTE: longhand padding-top/bottom (NO shorthand `padding: 10px 0`)
     porque el shorthand también sobrescribe padding-left/right, zeroing el
     horizontal heredado de .wrap (24px en mobile) y cropping el logo a la
     izquierda. Con longhand, .wrap's horizontal padding queda intacto. */
  .nav-inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open { display: flex; }
  .nav-link { padding: 14px 24px; border-bottom: 1px solid var(--line); width: 100%; }
  .nav-toggle { display: flex; }

  /* Submenu inline visible cuando hamburger abre el nav — sin hover
     state en touch, los children aparecen anidados con indent. */
  .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    min-width: 0;
    transition: none;
  }
  .nav-sublink {
    padding: 12px 24px 12px 44px;       /* 44 = 24 parent padding + 20 indent */
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    width: 100%;
  }
  /* Caret no aplica en mobile (no hover, no rotation) — hide para que
     el title del parent quede limpio. */
  .nav-caret { display: none; }

  .section { padding: 64px 0; }
  .section-title { font-size: 36px; }
}

/* Mobile pequeño — reduce air pre-footer porque 64px en viewport
   chico se siente desproporcionado vs el content total. */
@media (max-width: 768px) {
  .site-main { padding-bottom: 32px; }
}

/* ---------- 16 · Print ---------- */
@media print {
  .site-nav, .footer-cta-section, .cta-back, .site-footer, .nav-toggle { display: none; }
  body { background: white; }
}
/* =============================================================================
   SPONSORS / ALIADOS · strip pre-footer · v4 (bigger + tighter + mobile 6)
   v4: logos 80→100px (+25%), gap 48×32→32×20 (más compactos), forced
   4-col grid en desktop. Mobile muestra solo 6 de los 12 renderados
   (hide nth-child(n+7) — los 12 siguen en el DOM, CSS oculta los
   últimos 6 < 768px).
   ============================================================================= */

.sponsors-section {
  background: var(--cream, #FAF7F2);
  border-top: 1px solid rgba(31, 61, 142, 0.08);
  border-bottom: 1px solid rgba(31, 61, 142, 0.08);
  padding: 56px 32px;
}

.sponsors-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.sponsors-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-orange, #ED5A1F);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 40px;
}

.sponsors-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 20px;
  align-items: center;
  justify-items: center;
}

.sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 112px;
}

.sponsor a {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.sponsor img {
  height: 100px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.sponsor a:hover img,
.sponsor a:focus img {
  filter: grayscale(0%) opacity(1);
  transform: translateY(-3px);
}

@media (max-width: 1024px) {
  .sponsors-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 16px;
  }

  .sponsor img {
    height: 80px;
  }

  .sponsor {
    min-height: 96px;
  }
}

@media (max-width: 768px) {
  .sponsors-section {
    padding: 36px 16px;
  }

  .sponsors-heading {
    font-size: 10px;
    margin-bottom: 28px;
  }

  /* Mobile: muestra solo 6 de los 12 renderados */
  .sponsors-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 12px;
  }

  .sponsor:nth-child(n+7) {
    display: none;
  }

  .sponsor img {
    height: 64px;
    /* Sin grayscale en touch (no hay hover) */
    filter: grayscale(0%) opacity(0.9);
  }

  .sponsor {
    min-height: 76px;
  }
}