@charset "UTF-8";
/* =========================================================
   SABOR A CABO · EDICIÓN 18 · Verbena Sibarita
   Sistema visual v4 (sitio multipágina)
   Tomado del formato de presentación E18 aprobado:
   base blanco hueso, neutros fríos, teal de marca como único
   acento, títulos en grotesca bold, números grandes, fotos
   reales de la E17. Esquinas rectas en todo el sitio.
   ========================================================= */

/* -----------------------------------------------------------
   PALETA · tomada del póster oficial de la Edición 18:
   arena y crema del papel picado, azul petróleo del "VERBENA",
   cobre quemado del "Sibarita" y durazno del atardecer.
   Para volver a la paleta anterior (blanco hueso + teal),
   ver el bloque comentado al final de este archivo.
   ----------------------------------------------------------- */
:root{
  --bg: #F8F6F1;          /* arena claro (fondo del póster) */
  --bg-2: #F1ECE3;
  --bg-3: #E7DED1;
  --ink: #213744;         /* azul petróleo del titular VERBENA */
  --ink-2: #566A76;
  --ink-3: #7A8A92;
  --line: #E2D9CB;
  --line-2: #CFC2AF;
  --teal: #A94C24;        /* acento de marca: cobre quemado (Sibarita) */
  --teal-ink: #FFF9F3;
  --teal-tint: rgba(169,76,36,.10);
  --sunset: #F0BF97;      /* durazno del atardecer, para detalles */
  --on-dark-accent: #EFA878;  /* acento sobre secciones oscuras */
  --dark: #1B2E3A;        /* secciones oscuras: azul noche */
  --dark-2: #24404F;
  --dark-text: #F5EFE6;
  --dark-text-2: rgba(245,239,230,.70);
  --dark-line: rgba(245,239,230,.18);

  --font: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(4.5rem, 9vw, 8rem);
  --max: 1320px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html[data-theme="dark"]{
  --bg: #14212B;
  --bg-2: #1B2E3A;
  --bg-3: #24404F;
  --ink: #F3EDE4;
  --ink-2: #B9C4CB;
  --ink-3: #8A99A2;
  --line: #2B4150;
  --line-2: #3A5566;
  --teal: #E08A5A;        /* cobre aclarado para contraste sobre azul noche */
  --teal-ink: #16232C;
  --teal-tint: rgba(224,138,90,.14);
  --sunset: #E5A877;
  --on-dark-accent: #EFA878;
  --dark: #101A22;
  --dark-2: #1A2B36;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open{ overflow:hidden; }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:0; color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
strong{ font-weight:700; }
.container{ width:100%; max-width: var(--max); margin:0 auto; padding-inline: var(--gutter); }

/* ---- bilingual + date flags (mismo mecanismo que v3) ---- */
[data-lang="en"]{ display:none !important; }
html[lang="en"] [data-lang="es"]{ display:none !important; }
html[lang="en"] [data-lang="en"]{ display:revert !important; }
html[lang="en"] [data-lang="en"].inline{ display:inline !important; }


[data-date-block]{ display:none !important; }
html.show-date [data-date-block]{ display:revert !important; }
html.show-date [data-date-block].inline{ display:inline !important; }
[data-noshow-date]{ display:none !important; }
html:not(.show-date) [data-noshow-date]{ display:revert !important; }
html:not(.show-date) [data-noshow-date].inline{ display:inline !important; }

[data-price-block]{ display:none !important; }
html.show-price [data-price-block]{ display:revert !important; }
[data-noshow-price]{ display:none !important; }
html:not(.show-price) [data-noshow-price]{ display:revert !important; }
html[lang="en"] [data-noshow-price][data-lang="es"],
html[lang="en"] [data-price-block][data-lang="es"]{ display:none !important; }
html:not([lang="en"]) [data-noshow-price][data-lang="en"],
html:not([lang="en"]) [data-price-block][data-lang="en"]{ display:none !important; }

[data-venue-block]{ display:none !important; }
html.show-venue [data-venue-block]{ display:revert !important; }
html.show-venue [data-venue-block].inline{ display:inline !important; }
[data-noshow-venue]{ display:none !important; }
html:not(.show-venue) [data-noshow-venue]{ display:revert !important; }
html:not(.show-venue) [data-noshow-venue].inline{ display:inline !important; }

/* ---------------------------------------------------------
   TYPE
--------------------------------------------------------- */
.t-display{ font-weight:800; letter-spacing:-.03em; line-height:1.0; font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
.t-h1{ font-weight:800; letter-spacing:-.025em; line-height:1.05; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.t-h2{ font-weight:800; letter-spacing:-.02em; line-height:1.1; font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.t-h3{ font-weight:700; letter-spacing:-.01em; line-height:1.2; font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.t-sub{ color: var(--ink-2); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height:1.55; max-width: 62ch; }
.t-body{ color: var(--ink-2); max-width: 62ch; }
.t-body + .t-body{ margin-top: 1rem; }
.t-small{ font-size:.85rem; color: var(--ink-2); }
.t-teal{ color: var(--teal); }
.t-label{ font-weight:600; font-size:.78rem; color: var(--teal); }

/* ---------------------------------------------------------
   BUTTONS (una sola forma: rectas)
--------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .95rem 1.6rem; font-size:.95rem; font-weight:600; line-height:1;
  white-space:nowrap; border:1px solid transparent;
  transition: background .25s, color .25s, border-color .25s, transform .12s;
}
.btn:active{ transform: translateY(1px); }
.btn-teal{ background: var(--teal); color: var(--teal-ink); border-color: var(--teal); }
.btn-teal:hover{ background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-line{ border-color: var(--line-2); color: var(--ink); }
.btn-line:hover{ border-color: var(--ink); background: var(--ink); color: var(--bg); }
.btn-line.on-dark{ border-color: var(--dark-line); color: var(--dark-text); }
.btn-line.on-dark:hover{ background: var(--dark-text); border-color: var(--dark-text); color: var(--dark); }
.link{ font-weight:600; color: var(--teal); display:inline-flex; align-items:center; gap:.4rem; border-bottom:1px solid transparent; transition: border-color .25s; }
.link:hover{ border-color: var(--teal); }
.link svg{ width:14px; height:14px; }

/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{ height:100%; display:flex; align-items:center; gap: 2rem; }
.brand{ display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.brand img{ height:40px; width:auto; }
.brand .ed{ font-size:.72rem; font-weight:700; letter-spacing:.06em; color: var(--ink-2); padding-left:.8rem; border-left:1px solid var(--line-2); line-height:1.1; }
.nav{ display:flex; align-items:center; gap: clamp(1.1rem, 2vw, 1.8rem); margin-left:auto; }
.nav a{ font-size:.92rem; font-weight:500; color: var(--ink-2); padding:.3rem 0; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; white-space:nowrap; }
.nav a:hover{ color: var(--ink); }
.nav a[aria-current="page"]{ color: var(--ink); border-color: var(--teal); }
.header-tools{ display:flex; align-items:center; gap: 1rem; flex-shrink:0; }
.lang{ display:flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600; color: var(--ink-3); }
.lang button{ padding:.2rem .1rem; color: var(--ink-3); }
.lang button.active{ color: var(--ink); }
.theme-toggle{ display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; color: var(--ink-2); border:1px solid var(--line); }
.theme-toggle:hover{ color: var(--ink); border-color: var(--ink); }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }
.btn.nav-tickets{ padding:.7rem 1.2rem; font-size:.88rem; }
.menu-btn{ display:none; width:40px; height:40px; flex-direction:column; justify-content:center; gap:6px; align-items:center; border:1px solid var(--line); }
.menu-btn span{ width:18px; height:2px; background: var(--ink); transition: transform .3s, opacity .3s; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* mobile drawer */
.drawer{
  position: fixed; inset: var(--nav-h) 0 0 0; z-index:49;
  background: var(--bg); padding: 2rem var(--gutter);
  display:flex; flex-direction:column; gap:.2rem;
  transform: translateY(-8px); opacity:0; visibility:hidden;
  transition: opacity .3s, transform .3s, visibility .3s;
}
.drawer.is-open{ opacity:1; transform:none; visibility:visible; }
.drawer a{ font-size:1.5rem; font-weight:700; padding:.8rem 0; border-bottom:1px solid var(--line); }
.drawer a[aria-current="page"]{ color: var(--teal); }
.drawer .drawer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:1rem; }
.drawer .drawer-foot .btn{ width:100%; }

@media (max-width: 1280px){ .brand .ed{ display:none; } .nav{ gap: 1rem; } .nav a{ font-size:.86rem; } }
@media (max-width: 1100px){
  .nav{ display:none; }
  .menu-btn{ display:flex; }
  .btn.nav-tickets{ display:none; }
  .brand .ed{ display:none; }
}

/* ---------------------------------------------------------
   LAYOUT HELPERS
--------------------------------------------------------- */
.section{ padding-block: var(--section); }
.section.tint{ background: var(--bg-2); }
.section.dark{ background: var(--dark); color: var(--dark-text); border-block: 1px solid var(--dark-line); }
.section.dark .t-sub, .section.dark .t-body, .section.dark .t-small, .section.dark .col p, .section.dark .col li, .section.dark .feature-grid p, .section.dark .num-list p{ color: var(--dark-text-2); }
.section.dark .col h3{ color: var(--on-dark-accent); }
.section.dark .feature-grid, .section.dark .feature-grid > div{ border-color: var(--dark-line); }
.section:not(.tint):not(.dark) + .section:not(.tint):not(.dark){ padding-top:0; }
.stack-lg > * + *{ margin-top: clamp(3rem, 6vw, 4.5rem); }
.head{ max-width: 780px; margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); }
.head .t-sub{ margin-top: 1rem; }
.head.row{ max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.head.row > div{ max-width: 780px; }

.page-head{ padding-top: clamp(2.6rem, 5.5vw, 4.4rem); padding-bottom: clamp(1.8rem, 3.4vw, 3rem); }
.page-head .t-sub{ margin-top: 1.2rem; }

/* split two columns (usar máximo 2 veces por página) */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items:center; }
.split.wide-media{ grid-template-columns: 1.15fr .85fr; }
.split .media{ overflow:hidden; background: var(--bg-3); }
.split .media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; }
.split .media.portrait img{ aspect-ratio: 4/5; }
.split .copy .t-body{ margin-top:1.2rem; }
.split .copy .btn, .split .copy .link{ margin-top: 1.8rem; }
@media (max-width: 860px){ .split, .split.wide-media{ grid-template-columns: 1fr; } }

/* panels (formato deck: gris claro o bloque oscuro) */
.panel{ background: var(--bg-2); padding: clamp(1.6rem, 3vw, 2.4rem); }
.panel.ink{ background: var(--dark); color: var(--dark-text); }
.panel.ink .t-body, .panel.ink .t-small{ color: var(--dark-text-2); }
.panel.ink .t-label{ color: var(--on-dark-accent); }
.panel h3{ font-weight:700; font-size:1.15rem; }
.panel p{ margin-top:.7rem; }

/* ---------------------------------------------------------
   STATS (número grande + etiqueta gris, formato deck)
--------------------------------------------------------- */
.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem) 2rem; }
.stats.three{ grid-template-columns: repeat(3, 1fr); }
.stat .n{ font-weight:800; letter-spacing:-.03em; line-height:1; font-size: clamp(2.6rem, 4.6vw, 3.8rem); font-variant-numeric: tabular-nums; }
.stat .n.teal{ color: var(--teal); }
.stat .l{ margin-top:.55rem; font-size:.86rem; color: var(--ink-2); line-height:1.4; max-width: 22ch; }
.section.dark .stat .l, .panel.ink .stat .l{ color: var(--dark-text-2); }
@media (max-width: 860px){ .stats, .stats.three{ grid-template-columns: repeat(2, 1fr); } }

/* versión compacta: va dentro del hero, bajo el titular */
.stats.mini{ gap: 1.2rem 2rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); padding-top: clamp(1.4rem, 2.4vw, 1.9rem); border-top: 1px solid var(--line); }
.stats.mini .n{ font-size: clamp(1.5rem, 2vw, 1.9rem); }
.stats.mini .l{ margin-top:.25rem; font-size:.74rem; max-width: 16ch; }
@media (max-width: 480px){ .stats.mini{ grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------
   HOME HERO (portada del deck: texto izquierda, foto derecha)
--------------------------------------------------------- */
.hero{ display:grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); min-height: clamp(520px, calc(100dvh - var(--nav-h)), 760px); }
.hero-copy{ display:flex; flex-direction:column; justify-content:center; padding: clamp(2rem, 4vw, 3.5rem) var(--gutter) clamp(2.5rem, 6vw, 5rem) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.hero-copy .emblem{ width: min(62vw, 300px); height:auto; }
.hero-copy h1{ margin-top: clamp(1.2rem, 2.5vw, 1.8rem); font-size: clamp(2.4rem, 4.4vw, 4.2rem); max-width: 16ch; }
.hero-copy .t-sub{ margin-top: 1.3rem; max-width: 40ch; }
.hero-copy .when{ margin-top: 1.4rem; font-weight:700; color: var(--teal); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.hero-actions{ margin-top: 2.2rem; display:flex; gap: .8rem; flex-wrap:wrap; }
.hero-media{ position:relative; overflow:hidden; background: var(--dark); }
.hero-media video, .hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; min-height:0; }
  .hero-media{ order:-1; min-height: 56vw; aspect-ratio: 16/10; }
  .hero-copy{ padding-inline: var(--gutter); }
}

/* countdown */
.countdown{ display:grid; grid-template-columns: repeat(4, auto); gap: clamp(1.4rem, 4vw, 3.5rem); justify-content:start; }
.cd .n{ font-weight:800; font-size: clamp(2.4rem, 5vw, 4rem); line-height:1; letter-spacing:-.03em; font-variant-numeric: tabular-nums; }
.cd .l{ margin-top:.45rem; font-size:.78rem; color: var(--ink-2); }
.section.dark .cd .l{ color: var(--dark-text-2); }

/* ---------------------------------------------------------
   LISTS
--------------------------------------------------------- */
/* lista numerada con cuadro teal (vocabulario del deck) */
.num-list{ display:grid; gap: clamp(1.4rem, 3vw, 2.2rem) 3rem; }
.num-list.two{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px){ .num-list.two{ grid-template-columns: 1fr; } }
.num-list li{ display:grid; grid-template-columns: 44px 1fr; gap: 1.2rem; align-items:start; }
.num-list .sq{ width:44px; height:44px; background: var(--teal); color: var(--teal-ink); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.num-list h3{ font-weight:700; font-size:1.15rem; line-height:1.25; }
.num-list p{ margin-top:.4rem; color: var(--ink-2); font-size:.95rem; }

/* cuadrícula de 3 o 4 columnas con encabezado teal (formato "Fase") */
.cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3.5vw, 3rem); }
.cols.four{ grid-template-columns: repeat(4, 1fr); }
.cols.two{ grid-template-columns: repeat(2, 1fr); }
.cols.auto{ grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: clamp(1.6rem, 2.4vw, 2.2rem); }
.col h3{ font-weight:700; font-size:1.05rem; color: var(--teal); }
.col .big{ font-weight:800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing:-.02em; line-height:1.05; }
.col .big + h3{ margin-top:.4rem; }
.col p{ margin-top:.6rem; color: var(--ink-2); font-size:.95rem; }
.col ul{ margin-top:.8rem; display:grid; gap:.5rem; }
.col ul li{ color: var(--ink-2); font-size:.95rem; padding-left: 1rem; position:relative; }
.col ul li::before{ content:""; position:absolute; left:0; top:.68em; width:5px; height:5px; background: var(--teal); }
@media (max-width: 860px){ .cols, .cols.four, .cols.two{ grid-template-columns: 1fr; } }
@media (min-width: 861px) and (max-width: 1100px){ .cols.four{ grid-template-columns: repeat(2, 1fr); } }

/* elementos en dos columnas con filas separadas (para listas de 6-8 ítems) */
.feature-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2rem, 5vw, 4rem); border-top:1px solid var(--line); }
.feature-grid > div{ padding: 1.4rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns: 1fr; gap:.3rem; }
.feature-grid h3{ font-weight:700; font-size:1.05rem; }
.feature-grid p{ color: var(--ink-2); font-size:.93rem; }
@media (max-width: 720px){ .feature-grid{ grid-template-columns: 1fr; } }

/* tarjetas con foto (pilares / experiencias) */
.photo-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.photo-card .img{ aspect-ratio: 4/3; overflow:hidden; background: var(--bg-3); }
.photo-card .img img{ width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease); }
.photo-card:hover .img img{ transform: scale(1.04); }
.photo-card h3{ margin-top: 1rem; font-weight:700; font-size:1.1rem; }
.photo-card p{ margin-top:.4rem; color: var(--ink-2); font-size:.93rem; }
.photo-card ul{ margin-top:.8rem; display:grid; gap:.35rem; }
.photo-card ul li{ position:relative; padding-left:.95rem; font-size:.88rem; color: var(--ink-2); }
.photo-card ul li::before{ content:""; position:absolute; left:0; top:.62em; width:4px; height:4px; background: var(--teal); }
@media (max-width: 860px){ .photo-cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .photo-cards{ grid-template-columns: 1fr; } }

/* tabla simple (formato deck) */
.table{ width:100%; border-collapse: collapse; font-size:.95rem; }
.table th{ text-align:left; font-weight:600; color: var(--ink-2); font-size:.8rem; padding:.7rem 1rem .7rem 0; border-bottom:1px solid var(--line-2); }
.table td{ padding:.9rem 1rem .9rem 0; border-bottom:1px solid var(--line); vertical-align:top; color: var(--ink-2); }
.table td:first-child{ color: var(--ink); font-weight:600; }
.table td.teal{ color: var(--teal); font-weight:600; white-space:nowrap; }

/* ---------------------------------------------------------
   TIMELINE (fecha teal grande + título, formato "3 ruedas de prensa")
--------------------------------------------------------- */
.timeline{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2.2rem, 4vw, 3.5rem) clamp(1.6rem, 3vw, 2.5rem); border-top: 1px solid var(--line-2); padding-top: clamp(2rem, 4vw, 3rem); }
.tl .y{ font-weight:800; font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing:-.03em; line-height:1; color: var(--teal); }
.tl h3{ margin-top:.9rem; font-weight:700; font-size:1.1rem; }
.tl p{ margin-top:.5rem; color: var(--ink-2); font-size:.93rem; }
.tl.now .y{ color: var(--ink); }
@media (max-width: 860px){ .timeline{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .timeline{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   LOGOS
--------------------------------------------------------- */
.logo-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; }
.logo-grid.dense{ grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.logo-grid.dense > div{ padding:.6rem; }
.logo-grid.dense img{ max-width:92%; max-height:86%; }
.logo-grid > div{ position:relative; overflow:hidden; background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); aspect-ratio: 3/2; display:flex; align-items:center; justify-content:center; padding: 1.5rem; transition: box-shadow .35s var(--ease); }

.logo-grid img{ max-width:90%; max-height:82%; width:auto; height:auto; object-fit:contain; transition: transform .55s var(--ease); }

.logo-grid .name{ font-weight:600; font-size:1rem; text-align:center; color:#5E5E5C; }



/* marquee de participantes (una sola por sitio, en el inicio) */
.marquee{ overflow:hidden; background:#FFFFFF; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding: 1.4rem 0; }
.marquee-track{ display:flex; gap: 3.5rem; width:max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track img{ height:70px; width:auto; }

@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; gap:2rem; } }

/* cintillo de patrocinadores oficiales, justo debajo del hero */
.sponsor-bar{ background:#FFFFFF; border-bottom:1px solid var(--line); padding-block: clamp(1.4rem, 2.6vw, 2rem); }
.sponsor-bar .label{ font-size:.72rem; font-weight:700; letter-spacing:.04em; color:#8A8A87; text-align:center; }
.sponsor-bar .row{ margin-top: 1.1rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 1.1rem clamp(1.6rem, 3.4vw, 3.4rem); }
.sponsor-bar img{ width:auto; max-width:100%; object-fit:contain; }
.sponsor-bar a{ display:block; }

/* ---------------------------------------------------------
   PEOPLE
--------------------------------------------------------- */
.lead{ display:grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items:center; }
.lead .photo{ aspect-ratio: 1; overflow:hidden; background: var(--bg-3); }
.lead .photo img{ width:100%; height:100%; object-fit:cover; }
.lead h3{ font-weight:800; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing:-.02em; }
.lead .t-label{ display:block; margin-bottom:.4rem; }
.lead p{ margin-top:.8rem; }
@media (max-width: 720px){ .lead{ grid-template-columns: 1fr; } .lead .photo{ max-width: 280px; } }
.people{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 2rem; border-top:1px solid var(--line-2); padding-top: 1.6rem; }
.people h4{ font-weight:700; font-size:1rem; }
.people p{ font-size:.8rem; color: var(--ink-2); margin-top:.15rem; }
@media (max-width: 860px){ .people{ grid-template-columns: repeat(2, 1fr); } }

/* quote */
.quote{ font-weight:600; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height:1.35; letter-spacing:-.01em; max-width: 30ch; }
.quote-by{ margin-top:1.2rem; font-size:.88rem; color: var(--ink-2); }
.section.dark .quote-by{ color: var(--dark-text-2); }

/* ---------------------------------------------------------
   GALLERY
--------------------------------------------------------- */
.g-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; }
.g-tab{ font-size:.85rem; font-weight:600; padding:.55rem 1rem; border:1px solid var(--line-2); color: var(--ink-2); transition: all .25s; }
.g-tab.active, .g-tab:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.g-grid{ margin-top: 2rem; display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; grid-auto-flow: dense; gap: 6px; }
.g-item{ position:relative; overflow:hidden; cursor:pointer; background: var(--bg-3); }
.g-item.tall{ grid-row: span 2; }
.g-item.wide{ grid-column: span 2; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.g-item:hover img{ transform: scale(1.05); }
.g-strip{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: clamp(220px, 27vw, 400px); gap: 6px; }
.g-strip > div{ overflow:hidden; }
.g-grid.even{ grid-auto-rows: clamp(180px, 16vw, 240px); }
.g-strip img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 860px){ .g-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } .g-item.wide{ grid-column: span 2; } .g-strip{ grid-template-columns: 1fr 1fr; } .g-strip > div:first-child{ grid-column: span 2; } }

.lightbox{ position:fixed; inset:0; z-index:1000; background: rgba(12,12,12,.94); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(92vw,1300px); max-height:84vh; object-fit:contain; }
.lightbox button{ position:absolute; border:1px solid rgba(255,255,255,.3); color:#fff; width:44px; height:44px; display:flex; align-items:center; justify-content:center; transition: background .25s; }
.lightbox button:hover{ background: rgba(255,255,255,.14); }
.lightbox-close{ top:1.5rem; right:1.5rem; }
.lightbox-prev{ left: clamp(.8rem,3vw,3rem); top:50%; transform:translateY(-50%); }
.lightbox-next{ right: clamp(.8rem,3vw,3rem); top:50%; transform:translateY(-50%); }
.lightbox-caption{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); color: rgba(255,255,255,.7); font-size:.82rem; }

/* ---------------------------------------------------------
   CTA + FOOTER
--------------------------------------------------------- */
.cta{ background: var(--dark); color: var(--dark-text); border-top:1px solid var(--dark-line); padding-block: clamp(4rem, 8vw, 6.5rem); }
.cta .container{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items:center; }
.cta h2{ font-weight:800; letter-spacing:-.03em; line-height:1.05; font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 16ch; }
.cta p{ margin-top: 1rem; color: var(--dark-text-2); max-width: 46ch; }
.cta .actions{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 860px){ .cta .container{ grid-template-columns: 1fr; } .cta .actions{ justify-content:flex-start; } }

.site-footer{ background: var(--dark); color: var(--dark-text); border-top:1px solid var(--dark-line); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot-grid .f-title{ font-size:.78rem; font-weight:700; color: var(--dark-text-2); margin-bottom:.9rem; }
.foot-grid a, .foot-grid span, .foot-grid > div > div:not(.f-title){ display:block; font-size:.95rem; padding:.22rem 0; color: var(--dark-text); }
.foot-grid [data-venue-block] span, .foot-grid [data-date-block] span{ display:inline; padding:0; }
.foot-grid a:hover{ color: var(--on-dark-accent); }
.foot-brand img{ height:72px; width:auto; }
.foot-brand p{ margin-top:1rem; font-size:.88rem; color: var(--dark-text-2); max-width: 30ch; }
.foot-bottom{ margin-top: 2.5rem; padding-top: 1.4rem; border-top:1px solid var(--dark-line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; color: var(--dark-text-2); }
@media (max-width: 860px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------
   MOTION (sobria: entrada al hacer scroll, sin scroll listener)
--------------------------------------------------------- */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* accesibilidad de foco */
:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }

/* pilar final a todo lo ancho (7 pilares = 3 + 3 + 1 ancho) */
.photo-card.span{ grid-column: 1 / -1; display:grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem 2.5rem; align-items:end; }
.photo-card.span .img{ aspect-ratio: 21/9; }
.photo-card.span h3{ margin-top:0; }
@media (max-width: 860px){ .photo-card.span{ grid-template-columns: 1fr; } .photo-card.span .img{ aspect-ratio: 16/9; } }
.bleed{ width:100%; aspect-ratio: 21/8; overflow:hidden; background: var(--bg-3); }
.bleed.wide{ aspect-ratio: 2.73; }
@media (max-width: 720px){ .bleed, .bleed.wide{ aspect-ratio: 16/9; } }
.bleed img{ width:100%; height:100%; object-fit:cover; }


/* ---------------------------------------------------------
   BOLETOS
--------------------------------------------------------- */
.tickets{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.ticket{ background: var(--bg); padding: clamp(1.5rem, 2.4vw, 2rem); display:flex; flex-direction:column; }
.ticket.feature{ background: var(--dark); color: var(--dark-text); }
.ticket .zone{ font-weight:800; font-size:1.3rem; letter-spacing:-.02em; }
.ticket.feature .zone{ color: var(--on-dark-accent); }
.ticket .price{ margin-top:.5rem; font-weight:800; font-size: clamp(1.7rem, 2.4vw, 2.1rem); letter-spacing:-.03em; line-height:1.1; font-variant-numeric: tabular-nums; }
.ticket .price .cur{ font-size:.5em; font-weight:600; vertical-align:.5em; margin-right:.1em; }
.ticket .price small{ display:block; font-size:.42em; font-weight:500; letter-spacing:0; color: var(--ink-2); margin-top:.3rem; }
.ticket.feature .price small{ color: var(--dark-text-2); }
.ticket .tbd{ margin-top:.5rem; font-weight:700; font-size:1.05rem; color: var(--teal); }
.ticket .hours{ margin-top:1.2rem; font-size:.8rem; font-weight:600; color: var(--ink-2); }
.ticket.feature .hours{ color: var(--dark-text-2); }
.ticket h4{ margin-top:1.4rem; font-size:.78rem; font-weight:700; color: var(--ink-3); }
.ticket.feature h4{ color: var(--dark-text-2); }
.ticket ul{ margin-top:.6rem; display:grid; gap:.45rem; }
.ticket ul li{ position:relative; padding-left:1rem; font-size:.9rem; color: var(--ink-2); }
.ticket.feature ul li{ color: var(--dark-text-2); }
.ticket ul li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; background: var(--teal); }
.ticket ul.no li::before{ background: var(--line-2); }
.ticket .buy{ margin-top:auto; padding-top: 1.8rem; }
.ticket .buy .btn{ width:100%; }
@media (max-width: 1100px){ .tickets{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .tickets{ grid-template-columns: 1fr; } }

/* nota / aviso en línea */
.note{ background: var(--bg-2); border-left: 3px solid var(--teal); padding: 1.1rem 1.4rem; font-size:.92rem; color: var(--ink-2); }
.section.dark .note{ background: rgba(255,255,255,.06); color: var(--dark-text-2); }

/* ---------------------------------------------------------
   EQUIPO (retratos + nombre + rol)
--------------------------------------------------------- */
.team{ display:grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); }
.team .member{ display:grid; grid-template-columns: 170px 1fr; align-content:start; gap: clamp(1.1rem, 1.8vw, 1.6rem); align-items:start;
  border-top: 1px solid var(--line-2); padding-top: 1.4rem; }
.team .member .photo{ aspect-ratio: 1; overflow:hidden; background: var(--bg-3); }
.team .member .photo img{ width:100%; height:100%; object-fit:cover; transition: transform .9s var(--ease); }
.team .member:hover .photo img{ transform: scale(1.03); }
.team .member h3{ margin-top: 0; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.team .member .role{ margin-top:.2rem; font-size:.85rem; font-weight:600; color: var(--teal); }
.team .member p{ margin-top:.5rem; font-size:.9rem; color: var(--ink-2); }
@media (max-width: 620px){ .team{ grid-template-columns: 1fr; }
  .team .member{ grid-template-columns: 110px 1fr; padding:.9rem; }
  .team .member p{ font-size:.85rem; } }

/* ---------------------------------------------------------
   CUENTA REGRESIVA CON VIDEO Y TARJETAS DE VIDRIO
   El video es el MISMO del hero: el navegador lo reutiliza de
   caché, así que no agrega descarga. Si prefieres otro clip,
   cambia las rutas en la sección del inicio (src/pages/home.py)
   y deja el poster como respaldo.
--------------------------------------------------------- */
.countdown-section{ position:relative; isolation:isolate; overflow:hidden; }
.cd-media{
  position:absolute; inset:0; z-index:-2; opacity:.30;
  background:#101010 url("../assets/img/countdown-poster.jpg") center/cover no-repeat;
}
.cd-media video{ width:100%; height:100%; object-fit:cover; }
.cd-veil{
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(100deg, var(--dark) 8%, rgba(20,20,20,.80) 46%, rgba(20,20,20,.45) 100%);
}
@supports (background: color-mix(in srgb, red, blue)){
  .cd-veil{
    background: linear-gradient(100deg,
      var(--dark) 6%,
      color-mix(in srgb, var(--dark) 80%, transparent) 46%,
      color-mix(in srgb, var(--dark) 45%, transparent) 100%);
  }
}
.countdown-section .container{ position:relative; }

/* tarjetas de vidrio */
.countdown{ grid-template-columns: repeat(4, minmax(0, 132px)); gap: clamp(.6rem, 1.4vw, 1rem); }
.cd{
  position:relative; overflow:hidden;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(.8rem, 1.6vw, 1.3rem);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
.cd::before{
  content:""; position:absolute; left:0; right:0; top:0; height:48%;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  pointer-events:none;
}
.cd .n{ position:relative; }
.cd .l{ position:relative; color: rgba(243,243,240,.62); }

/* el número que cambia entra con un tick discreto */
@keyframes cdTick{ from{ opacity:.25; transform: translateY(-14%); } to{ opacity:1; transform:none; } }
.cd .n.is-tick{ animation: cdTick .5s var(--ease); }

@media (prefers-reduced-motion: reduce){
  .cd .n.is-tick{ animation:none; }
}
@media (max-width: 560px){
  .countdown{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cd{ padding: .9rem .5rem; text-align:center; }
  .cd .l{ font-size:.68rem; }
}

/* en móvil el texto ocupa todo el ancho: velo más parejo */
@media (max-width: 860px){
  .cd-veil{ background: linear-gradient(180deg, rgba(18,18,18,.90), rgba(18,18,18,.72) 55%, rgba(18,18,18,.86)); }
  .cd-media{ opacity:.34; }
}

/* botón grande: CTA principal de una sección */
.btn-lg{ padding: 1.15rem 2.2rem; font-size: 1.02rem; }
.countdown-section .btn-lg{ box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (max-width: 620px){ .countdown-section .btn-lg{ width:100%; } }


/* mapa de zonas del recinto */
.map{ background:#FFFFFF; border:1px solid var(--line); padding: clamp(1rem, 2.4vw, 2rem); }
.map img{ width:100%; max-width: 820px; margin-inline:auto; height:auto; }


/* ---------------------------------------------------------
   GALERÍA POR AÑO
--------------------------------------------------------- */
.year-block + .year-block{ margin-top: clamp(2.5rem, 5vw, 4rem); }
.year-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding-bottom:.8rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line-2); }
.year-head h3{ font-weight:800; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing:-.03em; line-height:1; }
.year-head > div{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.year-head .count{ font-size:.78rem; font-weight:600; color: var(--ink-3); white-space:nowrap; }
.g-grid.dense{ margin-top:0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: clamp(140px, 13vw, 190px); gap: 5px; }
@media (max-width: 620px){ .g-grid.dense{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; } }
a.g-tab{ display:inline-flex; align-items:center; }

/* logos: en pantallas chicas siempre 2 columnas (el minmax dejaría 1 sola) */
@media (max-width: 760px){
  .logo-grid, .logo-grid.dense{ grid-template-columns: repeat(2, 1fr); }
  .logo-grid > div{ padding: 1rem; }
}


/* nombre del participante al pasar el cursor sobre el logo */
.logo-grid .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1.5rem .7rem .7rem;
  font-size:.8rem; font-weight:600; letter-spacing:.01em; line-height:1.25;
  text-align:center; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 48%);
  transform: translateY(115%); opacity:0;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
  pointer-events:none;
}
.logo-grid .cap::after{
  content:""; display:block; width:22px; height:2px; margin:.5rem auto 0;
  background: var(--teal); transform: scaleX(0); transform-origin:center;
  transition: transform .5s .08s var(--ease);
}
@media (hover: hover){
  .logo-grid > div:hover{ box-shadow: 0 0 0 1px var(--teal); z-index:1; }
  .logo-grid > div:hover img{ transform: translateY(-14%) scale(1.04); }
  .logo-grid > div:hover .cap{ transform:none; opacity:1; }
  .logo-grid > div:hover .cap::after{ transform: scaleX(1); }
}
/* en táctil no hay hover: el nombre se queda visible, discreto */
@media (hover: none){
  .logo-grid .cap{ transform:none; opacity:1; padding-top:1.2rem;
    font-size:.72rem; color: var(--ink-3); }
  .logo-grid .cap::after{ display:none; }
  .logo-grid img{ transform: translateY(-10%); }
}
@media (prefers-reduced-motion: reduce){
  .logo-grid img, .logo-grid .cap, .logo-grid .cap::after{ transition:none; }
}


/* CTA de la galería en el inicio */
.gallery-cta{ margin-top: clamp(2rem, 3.5vw, 3rem); display:flex; align-items:center;
  gap: clamp(1rem, 2vw, 1.8rem); flex-wrap:wrap; }
.gallery-cta .note{ font-size:.88rem; color: var(--ink-3); max-width: 34ch; }
@media (max-width: 620px){
  .gallery-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .gallery-cta .btn{ width:100%; }
  .gallery-cta .note{ max-width:none; }
}

/* dos boletos: tarjetas más anchas */
.tickets.two{ grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline:auto; }
@media (max-width: 860px){ .tickets.two{ grid-template-columns: 1fr; } }


/* -----------------------------------------------------------
   PALETA ANTERIOR (blanco hueso + teal). Para regresar a ella,
   descomenta este bloque: al ir al final del archivo, gana.
   -----------------------------------------------------------
:root{
  --bg:#F7F7F5; --bg-2:#EFEFEC; --bg-3:#E6E6E2;
  --ink:#1C1C1C; --ink-2:#5E5E5C; --ink-3:#8A8A87;
  --line:#DCDCD8; --line-2:#C9C9C4;
  --teal:#0091B9; --teal-ink:#FFFFFF; --teal-tint:rgba(0,145,185,.10);
  --dark:#1C1C1C; --dark-2:#2A2A2A;
  --dark-text:#F3F3F0; --dark-text-2:rgba(243,243,240,.68);
  --dark-line:rgba(243,243,240,.16);
}
html[data-theme="dark"]{
  --bg:#151516; --bg-2:#1E1E20; --bg-3:#27272A;
  --ink:#F1F1EE; --ink-2:#B3B3AF; --ink-3:#7E7E7B;
  --line:#2E2E31; --line-2:#3C3C40;
  --teal:#3FBBDA; --teal-ink:#0F1A1E; --teal-tint:rgba(63,187,218,.12);
  --dark:#0E0E0F; --dark-2:#1A1A1B;
}
----------------------------------------------------------- */


/* -----------------------------------------------------------
   "Sibarita" a mano, como en el póster oficial.
   El cobre está fijo aquí a propósito: se ve igual con la
   paleta nueva y con la anterior.
   ----------------------------------------------------------- */
:root{ --sibarita: #B4552B; }
html[data-theme="dark"]{ --sibarita: #E08A5A; }

.t-display .script{
  font-family: 'Yellowtail', 'Hanken Grotesk', cursive;
  font-weight: 400;
  font-size: 1.22em;       /* las scripts corren chicas: se compensa */
  line-height: .9;
  letter-spacing: .01em;
  color: var(--sibarita);
  padding-right: .06em;    /* aire para el remate de la "a" */
}

/* bajada del póster: una línea, con peso */
.t-lede{
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
  max-width: 26ch;
  color: var(--ink);
}
.hero-copy .t-lede + .t-sub{ margin-top: .7rem; font-size: .95rem; }


/* -----------------------------------------------------------
   PATROCINADORES EN DOS NIVELES
   Arriba los cinco principales, más grandes; abajo el resto,
   separados por una línea. Igual que en el póster oficial.
   ----------------------------------------------------------- */
.sponsor-bar .row.main img{ height: calc(clamp(38px, 3.9vw, 54px) * var(--k, 1)); }
.sponsor-bar .row.more{
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  gap: .9rem clamp(1.2rem, 2.6vw, 2.6rem);
}
.sponsor-bar .row.more img{ height: calc(clamp(24px, 2.5vw, 34px) * var(--k, 1)); opacity:.85; }
.sponsor-bar .row.more img:hover{ opacity:1; }
@media (max-width: 620px){
  .sponsor-bar .row.main img{ height: calc(36px * var(--k, 1)); }
  .sponsor-bar .row.more img{ height: calc(24px * var(--k, 1)); }
}

/* en la página de Patrocinio: los cinco principales en una sola línea */
.logo-grid.lead{ grid-template-columns: repeat(5, 1fr); gap:1px; }
.logo-grid.lead > div{ aspect-ratio: 3/2; padding: 1.5rem; }
.logo-grid.lead img{ max-width:84%; max-height:74%; }
.logo-grid.tier2{ grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap:1px; }
.logo-grid.tier2 > div{ padding: 1.1rem; }
.logo-grid.tier2 img{ max-width:80%; max-height:64%; }
.logo-grid.tier2 .cap{ font-size:.72rem; padding: 1.2rem .5rem .55rem; }
@media (max-width: 900px){ .logo-grid.lead{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .logo-grid.lead, .logo-grid.tier2{ grid-template-columns: repeat(2, 1fr); } }
.sponsor-tier-label{
  margin: clamp(2rem, 3.6vw, 3rem) 0 1rem;
  font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink-3);
}

/* dentro de las fichas de Patrocinio, el mismo equilibrio por área */
.logo-grid.lead img{ max-height: calc(48% * var(--k, 1)); }
.logo-grid.tier2 img{ max-height: calc(42% * var(--k, 1)); }

/* lockup del hero en modo oscuro */
html[data-theme="dark"] .hero-copy .emblem{ content: url("../assets/img/logos/lockup-e18-dark.png"); }

/* LOCKUP CANIRAC PRESENTA (barra superior y pie) --- */
.brand img{ height:60px; }
@media (max-width: 720px){ .brand img{ height:48px; } }
html[data-theme="dark"] .site-header .brand img{ content: url("../assets/img/logos/lockup-e18-dark.png"); }
.foot-brand img{ height:86px; }


/* AIRE ENTRE SECCIONES Y LOGOS DE INSTITUCIONES (oct 2026) --- */
:root{ --section: clamp(3.2rem, 6vw, 5.5rem); }
.feature-grid > div.con-logo{ grid-template-columns: 96px 1fr; gap: 0 1.3rem; align-items:start; }
.feature-grid > div.con-logo .logo-inst{ width:96px; height:auto; display:block; }
@media (max-width: 640px){
  .feature-grid > div.con-logo{ grid-template-columns: 64px 1fr; gap: 0 1rem; }
  .feature-grid > div.con-logo .logo-inst{ width:64px; }
}