/* ═══════════════════════════════════════════════════
   ARCHIVO: css/style.css  —  Grupo Mira Almería
   ─────────────────────────────────────────────────
   ÍNDICE RÁPIDO (CTRL+F para buscar):
   § 1  Variables corporativas
   § 2  Reset y base
   § 3  Topbar
   § 4  Header / Menú
   § 5  Menú móvil
   § 6  Hero con vídeo
   § 7  Logos / marcas
   § 8  Bloque de confianza
   § 9  Tarjetas de ferias
   § 10 Galería de fotos
   § 11 Sobre el grupo
   § 12 CTA final
   § 13 Footer
   § 14 Banner cookies
   § 15 Panel accesibilidad
   § 16 Cursor premium
   § 17 Botones globales
   § 18 Animaciones
═══════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   § 1  VARIABLES CORPORATIVAS
   · --azul    → color principal
   · --naranja → acento / botones de acción
   · Cambia aquí y se actualiza en toda la web
───────────────────────────────────────────────── */
:root {
  --azul:          #0a5394;
  --azul-oscuro:   #073d6e;
  --azul-claro:    #e6f1fb;
  --naranja:       #eb5c2b;
  --naranja-hover: #c94a20;
  --fondo:         #f7f9fc;
  --fondo-alt:     #ffffff;
  --texto:         #1a1a1a;
  --texto-suave:   #555555;
  --borde:         #e2e8f0;
  --sombra:        rgba(10,83,148,0.08);
  --radio:         12px;
  --radio-sm:      6px;
  --t:             0.3s ease;
  --fuente-titulo: 'Montserrat', sans-serif;
  --fuente-texto:  'Open Sans', sans-serif;
  --topbar-h:      34px;
}

body.dark-mode {
  --fondo:       #0d1b2e;
  --fondo-alt:   #112240;
  --texto:       #e8eaf0;
  --texto-suave: #9aafc4;
  --borde:       #1e3a5f;
  --sombra:      rgba(0,0,0,0.4);
}


/* ─────────────────────────────────────────────────
   § 2  RESET Y BASE
───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: var(--fuente-texto); background: var(--fondo); color: var(--texto); line-height: 1.7; overflow-x: hidden; transition: background var(--t), color var(--t); }
img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--fuente-titulo); line-height: 1.25; }
address { font-style: normal; }

.container { width: min(1200px, 92%); margin: 0 auto; }

/* Evita que el header fijo tape los anclas de navegación */
section[id], div[id] { scroll-margin-top: calc(var(--topbar-h) + 74px); }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--naranja); margin-bottom: 0.5rem;
}

.section-header {
  text-align: center; max-width: 700px; margin: 0 auto 3.5rem;
}
.section-header h2 { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; margin-bottom: 0.75rem; }
.section-header p  { color: var(--texto-suave); }


/* ─────────────────────────────────────────────────
   § 3  TOPBAR
   · Para quitar → display:none en este bloque
───────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--topbar-h);
  background: var(--azul); color: rgba(255,255,255,0.85); font-size: 0.78rem;
  display: flex; align-items: center;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,0.9); transition: color var(--t); }
.topbar a:hover { color: #fff; }


/* ─────────────────────────────────────────────────
   § 4  HEADER / MENÚ
───────────────────────────────────────────────── */
.site-header {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 1000;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: box-shadow var(--t), background var(--t);
}
.site-header.scrolled { background: rgba(255,255,255,0.98); box-shadow: 0 2px 20px var(--sombra); }
body.dark-mode .site-header { background: rgba(13,27,46,0.94); border-bottom-color: rgba(255,255,255,0.08); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 14px 0; }

/* LOGO imagen — dos logos en fila */
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-img { height: 54px; width: auto; object-fit: contain; }
.brand-text { font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 800; color: var(--azul); }
.brand-text em { font-style: normal; color: var(--naranja); }

/* MENÚ */
.main-nav { display: flex; align-items: center; gap: 1.75rem; }
.main-nav a {
  font-family: var(--fuente-titulo); font-size: 0.85rem; font-weight: 600; color: var(--texto);
  transition: color var(--t); position: relative;
}
.main-nav a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:2px; background:var(--naranja); transition:width var(--t); }
.main-nav a:hover, .main-nav a.nav-active { color: var(--azul); }
.main-nav a:hover::after, .main-nav a.nav-active::after { width: 100%; }

.lang-switcher { display:flex; gap:0.3rem; font-size:0.78rem; font-weight:700; }
.lang-switcher a {
  color:var(--azul); padding:3px 8px; border-radius:5px;
  transition:background var(--t); display:flex; align-items:center; gap:4px;
  text-decoration:none;
}
.lang-switcher a .flag { font-size:1rem; line-height:1; }
.lang-switcher a:hover { background:var(--azul-claro); }
.lang-switcher a.lang-active { background:var(--azul); color:#fff; }

/* HAMBURGUESA */
.menu-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--texto); border-radius:2px; transition:transform var(--t), opacity var(--t); }


/* ─────────────────────────────────────────────────
   § 5  MENÚ MÓVIL
───────────────────────────────────────────────── */
.mobile-menu {
  display:none; position:fixed; inset:0; background:var(--fondo-alt);
  z-index:1002; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transform:translateX(100%); transition:transform 0.4s ease;
}
.mobile-menu.is-open { transform:translateX(0); }
.mobile-menu a { font-family:var(--fuente-titulo); font-size:1.5rem; font-weight:700; color:var(--texto); }
.btn-primary-nav { background:var(--naranja)!important; color:#fff!important; padding:14px 32px; border-radius:var(--radio-sm); margin-top:1rem; }
.mobile-menu-close { position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--texto); }


/* ─────────────────────────────────────────────────
   § 6  HERO GLOBO 3D
   · 75 % izquierda → canvas Three.js interactivo
   · 25 % derecha   → panel de texto y CTAs
───────────────────────────────────────────────── */

/* Contenedor principal */
.hero-globe {
  position: relative;
  height: 100vh;
  min-height: 580px;
  display: flex;
  align-items: stretch;
  background: #ffffff;
  overflow: hidden;
}

/* ── Banner sticky derecho ──────────────────────────── */
.banner-sticky {
  position: fixed;
  right: 0;
  top: 0;
  width: 220px;
  height: 100vh;
  background: #fff;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 16px 8px;
  box-sizing: border-box;
  border-left: 1px solid #e5e7eb;
  transition: width 0.5s ease;
}
.banner-sticky img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.banner-sticky .bs-toyo-home  { max-height: 110px; }
.banner-sticky .bs-november   { max-height: 80px; }
.banner-sticky .bs-calendario { max-height: 130px; border-radius: 6px; }
/* Tamaños según sección */
.banner-sticky.banner--small  { width: 160px; }
.banner-sticky.banner--normal { width: 220px; }
.banner-sticky.banner--large  { width: 300px; }
@media (max-width: 960px) { .banner-sticky { display: none; } }

/* Área del globo (75 %) */
#hero-globe-container {
  flex: 3;
  position: relative;
  min-width: 0;
  overflow: hidden;
}

/* Panel de texto (25 %) */
.hero-text-panel {
  flex: 1;
  min-width: 220px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.5rem 3rem 1.5rem;
  background: linear-gradient(to right,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.88) 25%,
    rgba(255,255,255,1)    52%
  );
  z-index: 10;
}

/* Badge — sin marco, texto corporativo */
.hero-badge {
  display: block;
  background: none;
  border: none;
  color: var(--azul);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0; margin-bottom: 1.1rem;
  width: fit-content;
}

/* Título */
.hero-title {
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  font-weight: 800;
  color: var(--azul-oscuro);
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  line-height: 1.15;
}
.hero-title em { font-style: normal; color: var(--naranja); }

/* Subtítulo */
.hero-sub {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  color: var(--texto-suave);
  margin-bottom: 2rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* Botones — apilados en columna en el panel */
.hero-text-panel .hero-btns {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

/* Links secundarios */
.hero-profiles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.hero-profiles a {
  color: var(--texto-suave);
  font-size: 0.76rem;
  text-decoration: none;
  transition: color var(--t, 0.2s);
}
.hero-profiles a:hover { color: var(--azul); }

/* Links dentro del subtítulo del hero */
.hero-sub-link {
  color: var(--azul);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--azul-claro);
  transition: color var(--t), border-color var(--t);
}
.hero-sub-link:hover { color: var(--azul-oscuro); border-color: var(--azul); }

/* Tira de marcas — barra inferior del hero, HTML puro para Google */
.hero-brands-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.5rem;
  padding: 0.55rem 1.5rem;
  background: rgba(10, 83, 148, 0.07);
  border-top: 1px solid rgba(10, 83, 148, 0.12);
  backdrop-filter: blur(4px);
}
.hero-brands-strip a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
  transition: color var(--t);
}
.hero-brands-strip a:hover { color: var(--azul-oscuro); text-decoration: underline; }
.hero-brands-strip span { color: rgba(10,83,148,0.35); font-size: 0.8rem; }

/* Flecha de scroll */
.hero-globe .scroll-arrow {
  position: absolute;
  bottom: 1.8rem;
  left: 37.5%;           /* centrada sobre el área del globo */
  transform: translateX(-50%);
  color: var(--azul);
  opacity: 0.6;
  font-size: 1.4rem;
  animation: bounce 2s infinite;
  z-index: 5;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .hero-globe { flex-direction: column; }

  #hero-globe-container {
    flex: none;
    height: 58vh;
    min-height: 300px;
  }

  .hero-text-panel {
    flex: none;
    max-width: 100%;
    height: auto;
    padding: 1.8rem 1.5rem;
    background: #ffffff;
    align-items: center;
    text-align: center;
  }

  .hero-text-panel .hero-btns { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .hero-profiles               { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1rem; }

  .hero-globe .scroll-arrow { left: 50%; bottom: auto; top: 56vh; }
}


/* ─────────────────────────────────────────────────
   § 7  LOGOS / MARCAS
   · Logos con nombre debajo al hacer hover
───────────────────────────────────────────────── */
.brands-section { background:var(--fondo-alt); padding:3.5rem 0; border-bottom:1px solid var(--borde); }
.brands-eyebrow { text-align:center; font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--texto-suave); margin-bottom:2rem; }

.brands-grid { display:flex; justify-content:center; align-items:center; gap:1.5rem; flex-wrap:wrap; }

.brand-item {
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  padding:1rem; border-radius:var(--radio); border:1px solid transparent;
  transition:border-color var(--t), background var(--t), transform var(--t);
  cursor:pointer;
}
.brand-item:hover { border-color:var(--borde); background:var(--fondo); transform:translateY(-3px); }

/* ALTURA DE LOS LOGOS → cámbiala para hacerlos más grandes o pequeños */
.brand-item img { height:56px; width:auto; object-fit:contain; }

.brand-item span { font-size:0.72rem; font-weight:600; color:var(--texto-suave); text-align:center; }


/* ─────────────────────────────────────────────────
   § 8  BLOQUE DE CONFIANZA
───────────────────────────────────────────────── */
.trust-section { background:var(--azul); padding:4rem 0; position:relative; z-index:1; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
.trust-item { padding:1.5rem 1rem; border-right:1px solid rgba(255,255,255,0.15); }
.trust-item:last-child { border-right:none; }
.trust-num    { display:inline-block; font-family:var(--fuente-titulo); font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--naranja); }
.trust-suffix { font-family:var(--fuente-titulo); font-size:1.5rem; font-weight:800; color:var(--naranja); }
.trust-item p { font-size:0.85rem; color:rgba(255,255,255,0.75); margin-top:0.4rem; }


/* ─────────────────────────────────────────────────
   § 9  TARJETAS DE FERIAS (con foto real)
───────────────────────────────────────────────── */
.services-section { padding:5rem 0; background:var(--fondo); position:relative; z-index:1; }

.ferias-grid { display:grid; grid-template-columns:1fr 2fr 1fr; gap:1.5rem; align-items:start; }

.feria-card--featured .feria-img { height:300px; background:#fff; }
.feria-card--featured .feria-img img { object-fit:contain; }
.feria-card--featured .feria-body h3 { font-size:1.3rem; }
.feria-card--featured .feria-body p  { font-size:0.95rem; }

.feria-card {
  background:var(--fondo-alt); border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--borde); box-shadow:0 2px 16px var(--sombra);
  transition:transform var(--t), box-shadow var(--t);
}
.feria-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px var(--sombra); }

/* CONTENEDOR DE FOTO → fija la altura para que todas sean iguales */
.feria-img { position:relative; height:220px; overflow:hidden; }
.feria-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.feria-card:hover .feria-img img { transform:scale(1.05); }

/* BADGE con el logo encima de la foto */
.feria-logo-badge {
  position:absolute; bottom:12px; left:12px;
  background:rgba(255,255,255,0.95); border-radius:8px; padding:6px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.feria-logo-badge img { height:28px; width:auto; object-fit:contain; }

.feria-body { padding:1.5rem; }
.feria-body h3 { font-size:1.1rem; font-weight:700; color:var(--azul); margin-bottom:0.4rem; }
.feria-fecha   { font-size:0.8rem; color:var(--naranja); font-weight:600; margin-bottom:0.75rem; }
.feria-body p  { font-size:0.9rem; color:var(--texto-suave); line-height:1.6; margin-bottom:1rem; }
.card-link     { font-size:0.85rem; font-weight:700; color:var(--naranja); transition:color var(--t); }
.card-link:hover { color:var(--naranja-hover); }


/* ─────────────────────────────────────────────────
   § 10  GALERÍA DE FOTOS
   · Grid automático con fotos anchas y normales
───────────────────────────────────────────────── */
.gallery-section { padding:5rem 0; background:var(--fondo-alt); }

.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:220px;
  gap:12px;
  border-radius:var(--radio); overflow:hidden;
}

.gallery-item { overflow:hidden; border-radius:8px; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.gallery-item:hover img { transform:scale(1.06); }

/* Foto ancha → ocupa 2 columnas */
.gallery-wide { grid-column:span 2; }


/* ─────────────────────────────────────────────────
   § 11  SOBRE EL GRUPO
───────────────────────────────────────────────── */
.about-section { padding:5rem 0; background:var(--fondo); }
.about-grid    { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.about-image img { width:100%; height:440px; object-fit:cover; border-radius:var(--radio); box-shadow:0 12px 40px var(--sombra); }

.about-copy h2 { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; margin-bottom:1.25rem; }
.about-copy p  { color:var(--texto-suave); margin-bottom:1rem; font-size:0.95rem; }

.check-list { list-style:none; margin:1.5rem 0 2rem; }
.check-list li { font-size:0.92rem; padding:0.4rem 0 0.4rem 1.6rem; position:relative; }
.check-list li::before { content:'✓'; position:absolute; left:0; color:var(--azul); font-weight:700; }


/* ─────────────────────────────────────────────────
   § 12  CTA FINAL
───────────────────────────────────────────────── */
.cta-section { background:var(--azul); padding:5rem 0; }
.cta-inner   { text-align:center; }
.cta-section h2 { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; color:#fff; margin-bottom:1rem; }
.cta-section p  { color:rgba(255,255,255,0.8); margin-bottom:2.5rem; max-width:520px; margin-left:auto; margin-right:auto; }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn-cta-primary {
  display:inline-block; background:var(--naranja); color:#fff;
  font-family:var(--fuente-titulo); font-size:1rem; font-weight:700;
  padding:15px 36px; border-radius:var(--radio-sm);
  transition:background var(--t), transform var(--t);
}
.btn-cta-primary:hover { background:var(--naranja-hover); transform:translateY(-2px); }

.btn-cta-ghost {
  display:inline-block; background:transparent; color:#fff;
  font-family:var(--fuente-titulo); font-size:1rem; font-weight:600;
  padding:14px 32px; border-radius:var(--radio-sm); border:2px solid rgba(255,255,255,0.5);
  transition:border-color var(--t), background var(--t);
}
.btn-cta-ghost:hover { border-color:#fff; background:rgba(255,255,255,0.08); }


/* ─────────────────────────────────────────────────
   § 12b  FAQ — PREGUNTAS FRECUENTES
───────────────────────────────────────────────── */
.faq-section {
  background: var(--fondo-alt);
  padding: 5rem 0;
  border-top: 1px solid var(--borde);
}
.faq-section .section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.faq-section .section-label {
  display: inline-block;
  background: var(--azul-claro);
  color: var(--azul);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 20px;
  margin-bottom: 0.75rem;
}
.faq-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800; margin-bottom: 0.75rem;
}
.faq-section .section-header p {
  color: var(--texto-suave);
  font-size: 0.95rem; max-width: 520px;
  margin: 0 auto;
}

.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid var(--borde);
}
.faq-item:first-child {
  border-top: 1px solid var(--borde);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  padding: 1.35rem 0.25rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
  transition: color var(--t);
}
.faq-question:hover { color: var(--azul); }
.faq-question[aria-expanded="true"] { color: var(--azul); }

.faq-icon {
  flex-shrink: 0;
  color: var(--azul);
  transition: transform 0.3s ease;
}
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 0.25rem 1.35rem;
  color: var(--texto-suave);
  font-size: 0.95rem;
  line-height: 1.75;
  animation: faqOpen 0.25s ease;
}
.faq-answer p { margin: 0; }
.faq-answer a {
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-answer a:hover { color: var(--azul-oscuro); }

@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────
   § 13  FOOTER PREMIUM
───────────────────────────────────────────────── */
.site-footer { background:#0d1b2e; color:rgba(255,255,255,0.65); }

/* Newsletter band */
.footer-newsletter {
  background: linear-gradient(90deg, #0a5394 0%, #073d6e 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 1.6rem 0;
}
.footer-nl-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-nl-text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.footer-nl-text strong {
  font-family: var(--fuente-titulo);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
}
.footer-nl-text span {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
}
.footer-nl-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.footer-nl-form input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50px;
  padding: .6rem 1.2rem;
  font-size: .85rem;
  color: #fff;
  outline: none;
  min-width: 220px;
  transition: border-color var(--t);
}
.footer-nl-form input::placeholder { color: rgba(255,255,255,.4); }
.footer-nl-form input:focus { border-color: var(--naranja); }
.footer-nl-form button {
  background: var(--naranja);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .6rem 1.4rem;
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background var(--t);
}
.footer-nl-form button:hover { background: var(--naranja-hover); }

/* Grid */
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.2fr 1.5fr; gap:3rem; padding:4rem 0 3rem; }

.footer-brand p { font-size:0.875rem; line-height:1.7; max-width:260px; margin:1rem 0 1.25rem; }

.social-links { display:flex; gap:0.75rem; }
.social-links a {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.65);
  transition:border-color var(--t), color var(--t), background var(--t);
}
.social-links a:hover { border-color:var(--naranja); color:var(--naranja); }

.footer-col h4 { font-family:var(--fuente-titulo); font-size:0.82rem; font-weight:700; color:#fff; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:1.25rem; }
.footer-col nav { display:flex; flex-direction:column; gap:0.6rem; }
.footer-col nav a { font-size:0.875rem; color:rgba(255,255,255,0.6); transition:color var(--t); text-decoration:none; }
.footer-col nav a:hover { color:var(--naranja); }

/* Contacto con iconos */
.footer-col address { display:flex; flex-direction:column; gap:0.85rem; font-style:normal; }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.footer-contact-item svg { flex-shrink:0; margin-top:2px; color:var(--naranja); }
.footer-contact-item a { color:rgba(255,255,255,0.6); text-decoration:none; transition:color var(--t); }
.footer-contact-item a:hover { color:#fff; }

/* Barra inferior */
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding:1.25rem 0; }
.footer-bottom p { font-size:0.8rem; color:rgba(255,255,255,0.4); }
.legal-links { display:flex; gap:1.5rem; }
.legal-links a { font-size:0.8rem; color:rgba(255,255,255,0.4); transition:color var(--t); text-decoration:none; }
.legal-links a:hover { color:rgba(255,255,255,0.8); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; padding:3rem 0 2rem; }
  .footer-nl-inner { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom-inner { flex-direction:column; text-align:center; }
}


/* ─────────────────────────────────────────────────
   § 14  BANNER COOKIES
───────────────────────────────────────────────── */
.cookie-banner {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  width:calc(100% - 40px); max-width:860px;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:1.25rem 1.5rem;
  background:rgba(255,255,255,0.97); border:1px solid var(--borde); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,0.12); z-index:9999; backdrop-filter:blur(10px);
}
.cookie-banner p { font-size:0.85rem; color:var(--texto-suave); flex:1; min-width:200px; }
.cookie-banner a { color:var(--azul); text-decoration:underline; }
.cookie-actions  { display:flex; gap:0.75rem; flex-shrink:0; }
.btn-cookie-accept { background:var(--azul); color:#fff; border:none; padding:9px 20px; border-radius:var(--radio-sm); font-size:0.85rem; font-weight:600; cursor:pointer; transition:background var(--t); }
.btn-cookie-accept:hover { background:var(--azul-oscuro); }
.btn-cookie-reject { background:transparent; color:var(--texto-suave); border:1px solid var(--borde); padding:9px 20px; border-radius:var(--radio-sm); font-size:0.85rem; font-weight:600; cursor:pointer; }


/* ─────────────────────────────────────────────────
   § 15  PANEL DE ACCESIBILIDAD
───────────────────────────────────────────────── */
.access-panel {
  position:fixed; left:12px; top:50%; transform:translateY(-50%);
  z-index:900; display:flex; flex-direction:column; gap:6px;
  animation:fadeSoft 5s forwards;
}
.access-panel:hover { opacity:1!important; animation:none; }
.access-panel button {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--azul-oscuro); background:var(--azul);
  color:#fff; font-size:0.75rem; font-weight:700; cursor:pointer;
  box-shadow:0 2px 8px var(--sombra); transition:background var(--t), color var(--t);
}
.access-panel button:hover { background:var(--azul-oscuro); color:#fff; }


/* ─────────────────────────────────────────────────
   § 16  CURSOR PREMIUM
   · Para quitar → borra <div id="premiumCursor"> del HTML
───────────────────────────────────────────────── */
.premium-cursor {
  position:fixed; width:16px; height:16px; border-radius:50%;
  background:rgba(235,92,43,0.4); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); transition:width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode:multiply;
}
.premium-cursor.hovered { width:34px; height:34px; background:rgba(10,83,148,0.2); }


/* ─────────────────────────────────────────────────
   § 17  BOTONES GLOBALES
───────────────────────────────────────────────── */
.btn-primary {
  display:inline-block; background:var(--naranja); color:#fff;
  font-family:var(--fuente-titulo); font-size:0.92rem; font-weight:700;
  padding:13px 28px; border-radius:var(--radio-sm); border:none; cursor:pointer;
  transition:background var(--t), transform var(--t);
}
.btn-primary:hover { background:var(--naranja-hover); transform:translateY(-2px); }

.btn-ghost {
  display:inline-block; background:transparent; color:#fff;
  font-family:var(--fuente-titulo); font-size:0.92rem; font-weight:600;
  padding:12px 26px; border-radius:var(--radio-sm); border:2px solid rgba(255,255,255,0.6);
  transition:border-color var(--t), background var(--t);
}
.btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,0.1); }

/* Estilos de mensajes del formulario */
.form-msg-ok    { background:#d4edda; color:#155724; padding:12px 16px; border-radius:var(--radio-sm); margin-top:1rem; font-size:0.9rem; }
.form-msg-error { background:#f8d7da; color:#721c24; padding:12px 16px; border-radius:var(--radio-sm); margin-top:1rem; font-size:0.9rem; }

/* Alto contraste */
body.high-contrast { filter:contrast(1.5) grayscale(0.2); }
/* Fuente dislexia */
body.dyslexia-mode { font-family:'Comic Sans MS','Arial',sans-serif; letter-spacing:0.05em; line-height:1.9; }


/* ─────────────────────────────────────────────────
   § 18  ANIMACIONES
───────────────────────────────────────────────── */
@keyframes fadeSoft  { 0%,70%{opacity:1} 100%{opacity:0.12} }
@keyframes bounce    { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes cdPulse   { 0%,100%{opacity:1} 50%{opacity:0.6} }


/* ─────────────────────────────────────────────────
   § 19  HERO — perfil de visitante (links secundarios)
───────────────────────────────────────────────── */
.hero-profiles {
  display:flex; gap:1.2rem; align-items:center; justify-content:center;
  margin-top:1rem; flex-wrap:wrap;
}
.hero-profiles a {
  font-size:0.82rem; color:rgba(255,255,255,0.72); font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  transition:color var(--t);
}
.hero-profiles a:hover { color:#fff; }
.hero-profiles span { color:rgba(255,255,255,0.35); font-size:0.8rem; }


/* ─────────────────────────────────────────────────
   § 20  BANDA COUNTDOWN
───────────────────────────────────────────────── */
.countdown-banner {
  background:var(--azul-oscuro);
  border-bottom:3px solid var(--naranja);
  padding:1rem 0;
  position:relative;
  z-index:1;
}
.countdown-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.countdown-label { display:flex; flex-direction:column; gap:0.2rem; }
.countdown-label strong {
  font-family:var(--fuente-titulo); font-size:1rem; font-weight:800; color:#fff;
}
.countdown-label span { font-size:0.8rem; color:rgba(255,255,255,0.65); }

.countdown-numbers { display:flex; gap:0.75rem; align-items:center; }

.countdown-unit {
  display:flex; flex-direction:column; align-items:center;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  border-radius:8px; padding:0.5rem 0.85rem; min-width:56px;
}
.countdown-unit span {
  font-family:var(--fuente-titulo); font-size:1.6rem; font-weight:800;
  color:var(--naranja); line-height:1; font-variant-numeric:tabular-nums;
  animation:cdPulse 2s ease-in-out infinite;
}
.countdown-unit small { font-size:0.62rem; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; }

.btn-countdown {
  display:inline-block; background:var(--naranja); color:#fff;
  font-family:var(--fuente-titulo); font-size:0.88rem; font-weight:700;
  padding:11px 22px; border-radius:var(--radio-sm); white-space:nowrap;
  transition:background var(--t), transform var(--t);
  flex-shrink:0;
}
.btn-countdown:hover { background:var(--naranja-hover); transform:translateY(-2px); }

@media(max-width:768px) {
  .countdown-inner { justify-content:center; text-align:center; }
  .countdown-label { align-items:center; }
  .countdown-unit span { font-size:1.3rem; }
  .countdown-unit { min-width:46px; padding:0.4rem 0.65rem; }
}


/* ─────────────────────────────────────────────────
   § 21  SECCIÓN DE NOTICIAS
───────────────────────────────────────────────── */
.news-section { padding:5rem 0; background:var(--fondo); position:relative; z-index:1; }

.news-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}

.news-card {
  background:var(--fondo-alt); border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--borde); box-shadow:0 2px 16px var(--sombra);
  transition:transform var(--t), box-shadow var(--t);
  position:relative;
}
.news-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px var(--sombra); }

.news-card--placeholder { border:2px dashed #f0a500; }

.news-placeholder-badge {
  background:#fff3cd; color:#856404; font-size:0.72rem; font-weight:700;
  padding:6px 12px; text-align:center; border-bottom:1px solid #f0a500;
  cursor:help;
}

.news-card-body { padding:1.5rem; }

.news-card-meta { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem; }
.news-tag {
  background:var(--azul-claro); color:var(--azul);
  font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:0.06em;
}
.news-date { font-size:0.78rem; color:var(--texto-suave); }

.news-card-body h3 { font-size:1rem; font-weight:700; color:var(--texto); margin-bottom:0.6rem; line-height:1.35; }
.news-card-body p  { font-size:0.87rem; color:var(--texto-suave); line-height:1.6; margin-bottom:0.5rem; }

.news-placeholder-note { font-size:0.78rem!important; color:#856404!important; background:#fff3cd; border-radius:4px; padding:6px 10px; }

@media(max-width:1024px) { .news-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px)  { .news-grid { grid-template-columns:1fr; } }


/* ─────────────────────────────────────────────────
   § 22  SECCIÓN DE TESTIMONIOS
───────────────────────────────────────────────── */
.testimonials-section { padding:5rem 0; background:var(--azul-claro); }

.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}

.testimonial-card {
  background:var(--fondo-alt); border-radius:var(--radio);
  padding:2rem 1.75rem; border:1px solid var(--borde);
  box-shadow:0 4px 20px var(--sombra);
  position:relative; display:flex; flex-direction:column; gap:1rem;
  transition:transform var(--t), box-shadow var(--t);
}
.testimonial-card:hover { transform:translateY(-4px); box-shadow:0 14px 36px var(--sombra); }
.testimonial-card--placeholder { border:2px dashed #f0a500; }

.testimonial-quote {
  font-size:2.5rem; line-height:1; color:var(--naranja); font-family:Georgia,serif;
  position:absolute; top:1.2rem; right:1.5rem; opacity:0.3;
}

.testimonial-text {
  font-size:0.92rem; color:var(--texto-suave); line-height:1.7; font-style:italic;
  flex:1;
}

.testimonial-author { display:flex; align-items:center; gap:0.75rem; }
.testimonial-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--azul); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fuente-titulo); font-size:1rem; font-weight:800; flex-shrink:0;
}
.testimonial-info strong { display:block; font-size:0.88rem; font-weight:700; color:var(--texto); }
.testimonial-info span   { font-size:0.78rem; color:var(--texto-suave); }

.testimonial-placeholder-note {
  font-size:0.75rem; background:#fff3cd; color:#856404;
  border-radius:4px; padding:6px 10px; margin-top:0.5rem;
  border:1px solid #f0a500;
}

.testimonial-stars { color:#f59e0b; font-size:0.9rem; letter-spacing:2px; }

@media(max-width:1024px) { .testimonials-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px)  { .testimonials-grid { grid-template-columns:1fr; } }


/* ─────────────────────────────────────────────────
   § 23  BOTÓN FLOTANTE WHATSAPP
───────────────────────────────────────────────── */
.whatsapp-float {
  position:fixed; bottom:28px; right:28px; z-index:9000;
  width:58px; height:58px; border-radius:50%;
  background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,0.45);
  transition:transform var(--t), box-shadow var(--t);
  animation:waPulse 2.5s ease-in-out infinite;
}
.whatsapp-float:hover {
  transform:scale(1.1);
  box-shadow:0 10px 32px rgba(37,211,102,0.6);
  animation:none;
}
.whatsapp-float svg { width:32px; height:32px; fill:#fff; }

.whatsapp-tooltip {
  position:absolute; right:70px; top:50%; transform:translateY(-50%);
  background:#0d1b2e; color:#fff; font-size:0.78rem; font-weight:600;
  padding:6px 12px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.whatsapp-float:hover .whatsapp-tooltip { opacity:1; }

@keyframes waPulse {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,0.45); }
  50%      { box-shadow:0 6px 32px rgba(37,211,102,0.7), 0 0 0 10px rgba(37,211,102,0.1); }
}


/* ─────────────────────────────────────────────────
   § 24  POPUP DE SALIDA (EXIT INTENT)
───────────────────────────────────────────────── */
.exit-popup-overlay {
  position:fixed; inset:0; z-index:10000;
  background:rgba(7,61,110,0.72); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; transition:opacity 0.3s;
}
.exit-popup-overlay.exit-popup--visible { opacity:1; }

.exit-popup {
  background:var(--fondo-alt); border-radius:var(--radio);
  padding:2.5rem 2rem; max-width:440px; width:100%;
  text-align:center; position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,0.3);
  transform:translateY(20px); transition:transform 0.3s;
}
.exit-popup--visible .exit-popup { transform:translateY(0); }

.exit-popup-close {
  position:absolute; top:1rem; right:1rem;
  background:none; border:none; font-size:1.3rem; cursor:pointer;
  color:var(--texto-suave); transition:color var(--t); line-height:1;
}
.exit-popup-close:hover { color:var(--naranja); }

.exit-popup img {
  height:48px; width:auto; margin:0 auto 1.25rem; border-radius:6px;
  display:block;
}
.exit-popup h3 {
  font-family:var(--fuente-titulo); font-size:1.3rem; font-weight:800;
  color:var(--azul); margin-bottom:0.75rem; line-height:1.3;
}
.exit-popup p {
  font-size:0.9rem; color:var(--texto-suave); line-height:1.65; margin-bottom:1.5rem;
}
.exit-popup .btn-primary { display:block; margin-bottom:0.75rem; text-align:center; }

.exit-popup-skip {
  background:none; border:none; font-size:0.8rem; color:var(--texto-suave);
  cursor:pointer; text-decoration:underline; text-underline-offset:3px;
  transition:color var(--t);
}
.exit-popup-skip:hover { color:var(--naranja); }


/* ─────────────────────────────────────────────────
   § 25  LIGHTBOX — ajustes GLightbox
───────────────────────────────────────────────── */
.gallery-item { cursor:zoom-in; }
.glightbox-clean .gclose { background:var(--naranja)!important; }


/* ─────────────────────────────────────────────────
   § 26  COUNTDOWN EN FERIAS.HTML (hero inline)
───────────────────────────────────────────────── */
.ferias-countdown-strip {
  background:rgba(10,83,148,0.92); border-top:1px solid rgba(255,255,255,0.15);
  padding:1.25rem 0; text-align:center;
}
.ferias-countdown-strip .countdown-numbers { justify-content:center; }
.ferias-countdown-strip p {
  font-size:0.8rem; color:rgba(255,255,255,0.65); margin-bottom:0.75rem;
  text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
}
.ferias-countdown-strip strong { color:#fff; }


/* ═══════════════════════════════════════════════
   COLABORADORES — CARRUSEL INFINITO
════════════════════════════════════════════════ */
.colaboradores-section {
  padding: 5rem 0 3rem;
  background: var(--fondo-alt);
  overflow: hidden;
}

.colab-track-wrapper {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0;
  margin: 2rem 0;
}

/* Degradados laterales para efecto fade */
.colab-track-wrapper::before,
.colab-track-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.colab-track-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--fondo-alt), transparent);
}
.colab-track-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--fondo-alt), transparent);
}

.colab-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: colab-scroll 30s linear infinite;
}

.colab-track:hover { animation-play-state: paused; }

@keyframes colab-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.colab-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.9rem 1.5rem;
  white-space: nowrap;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  cursor: default;
}

.colab-item:hover {
  border-color: var(--naranja);
  box-shadow: 0 4px 16px var(--sombra);
  transform: translateY(-3px);
}

.colab-inicial {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--azul);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulo);
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.colab-logo-img {
  height: 40px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

.colab-nombre {
  font-family: var(--fuente-titulo);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--texto);
}

/* ═══════════════════════════════════════════════
   PODCAST
════════════════════════════════════════════════ */
.podcast-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 100%);
  overflow: hidden;
}

.podcast-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
}

.podcast-texto { color: #fff; }
.podcast-texto .eyebrow { color: rgba(255,255,255,0.7); }
.podcast-texto h2 { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; margin-bottom: 1rem; }
.podcast-texto p { color: rgba(255,255,255,0.8); max-width: 500px; }

.podcast-plataformas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.podcast-badge {
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
}

/* Micrófono ilustrado */
.podcast-ilustracion {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  position: relative;
  flex-shrink: 0;
}

.podcast-micro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.podcast-micro-body {
  width: 52px;
  height: 80px;
  background: rgba(255,255,255,0.25);
  border: 3px solid rgba(255,255,255,0.6);
  border-radius: 26px;
  position: relative;
  z-index: 2;
}

.podcast-micro-stand {
  width: 3px;
  height: 30px;
  background: rgba(255,255,255,0.5);
  margin-top: 0;
}

.podcast-micro-base {
  width: 50px;
  height: 5px;
  background: rgba(255,255,255,0.5);
  border-radius: 3px;
}

.podcast-onda {
  position: absolute;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  animation: onda-pulse 2s ease-out infinite;
}
.onda-1 { width: 80px;  height: 80px;  top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.onda-2 { width: 110px; height: 110px; top: -15px; left: 50%; transform: translateX(-50%); animation-delay: 0.5s; }
.onda-3 { width: 140px; height: 140px; top: -30px; left: 50%; transform: translateX(-50%); animation-delay: 1s; }

@keyframes onda-pulse {
  0%   { opacity: 0.6; transform: translateX(-50%) scale(0.8); }
  100% { opacity: 0;   transform: translateX(-50%) scale(1.2); }
}

/* Animaciones de entrada al scroll */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .podcast-inner { grid-template-columns: 1fr; gap: 2rem; }
  .podcast-ilustracion { display: none; }
  .colab-track-wrapper::before,
  .colab-track-wrapper::after { width: 60px; }
}
/* BLOQUE 1 · ESTILOS HERO TITLE */
.hero-title {
  margin: 0.75rem 0 1rem;
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 12ch;
}

.hero-sub {
  max-width: 52ch;
}

@media (max-width: 768px) {
  .hero-title {
    max-width: 100%;
    font-size: clamp(1.8rem, 8vw, 2.8rem);
    line-height: 1.1;
  }

  .hero-sub {
    max-width: 100%;
  }
}
/* BLOQUE 1 · HERO TITLE · BASE */
.hero-title {
  margin: 0.75rem 0 1rem;
  font-size: clamp(2rem, 4.5vw, 4.25rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 12ch;
}

.hero-sub {
  max-width: 52ch;
}

/* ═══════════════════════════════════════════════
   VÍDEO EN FICHA TOYO FERIAL — ferias.html REF-030-C
   Reemplaza la imagen por vídeo sin marcos negros
════════════════════════════════════════════════ */

/* El contenedor ya existe (.feria-detalle-img),
   solo necesitamos controlar el vídeo dentro */
.feria-detalle-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;   /* proporción fija — sin marcos negros */
}

.feria-detalle-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* muestra el vídeo completo sin recortar */
  object-position: center;
  display: block;
}

/* ═══════════════════════════════════════════════
   VÍDEO TOYO FERIAL — ferias.html REF-030-C
   Elimina marcos negros, rellena sin deformar
════════════════════════════════════════════════ */
.feria-detalle-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  box-shadow: 0 8px 32px var(--sombra);
}

/* ─────────────────────────────────────────────────
   § 27  QUIÉNES SOMOS — .quienes-somos
───────────────────────────────────────────────── */
.quienes-somos {
  background: var(--fondo-alt);
  padding: 5rem 0;
}

.qs-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.section-label {
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 1rem;
}

.qs-titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 900;
  color: var(--azul-oscuro);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.qs-parrafo {
  color: var(--texto-suave);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: 1.1rem;
}

.qs-link {
  display: inline-block;
  margin-top: .6rem;
  font-family: var(--fuente-titulo);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul);
  text-decoration: none;
  border-bottom: 2px solid var(--naranja);
  padding-bottom: 2px;
  transition: color var(--t), border-color var(--t);
}
.qs-link:hover { color: var(--naranja); }

.qs-valores-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: .5rem;
}

.qs-valores-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.qs-v-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: var(--azul-claro);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul);
}

.qs-v-icon svg {
  width: 20px;
  height: 20px;
}

.qs-valores-list strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: .88rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  margin-bottom: .25rem;
}

.qs-valores-list span {
  font-size: .82rem;
  color: var(--texto-suave);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .qs-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* ─────────────────────────────────────────────────
   § 28  CTA FLOTANTE MÓVIL
───────────────────────────────────────────────── */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(7, 61, 110, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.1);
  gap: .6rem;
}

.mobile-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: 50px;
  font-family: var(--fuente-titulo);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
}
.mobile-cta-btn:active { transform: scale(.97); opacity: .85; }

.mobile-cta-primary {
  background: var(--naranja);
  color: #fff;
  box-shadow: 0 4px 14px rgba(235,92,43,.4);
}
.mobile-cta-sec {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}

@media (max-width: 768px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 80px; }
}

/* ─────────────────────────────────────────────────
   § 29  BLOG PREVIEW — .blog-preview
───────────────────────────────────────────────── */
.blog-preview {
  background: var(--fondo);
  padding: 5rem 0;
}

.blog-inner { }

.blog-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.blog-titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  color: var(--azul-oscuro);
  margin-top: .4rem;
}

.blog-btn-all {
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azul);
  text-decoration: none;
  border: 2px solid var(--azul);
  border-radius: 50px;
  padding: .55rem 1.3rem;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.blog-btn-all:hover { background: var(--azul); color: #fff; }

.blog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-card {
  background: var(--fondo-alt);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 16px var(--sombra);
  transition: transform var(--t), box-shadow var(--t);
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px var(--sombra);
}

.blog-card-img {
  height: 160px;
  background-size: cover;
  background-position: center;
}
.blog-card-img--1 { background: linear-gradient(135deg, #0a5394 0%, #0e6ab5 100%); }
.blog-card-img--2 { background: linear-gradient(135deg, #073d6e 0%, #0a5394 100%); }
.blog-card-img--3 { background: linear-gradient(135deg, #eb5c2b 0%, #c94a20 100%); }

.blog-card-body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}

.blog-tag {
  font-family: var(--fuente-titulo);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--naranja);
}

.blog-card-title {
  font-family: var(--fuente-titulo);
  font-size: .9rem;
  font-weight: 700;
  color: var(--azul-oscuro);
  line-height: 1.4;
  flex: 1;
}

.blog-read {
  font-size: .75rem;
  color: var(--azul);
  font-weight: 600;
  margin-top: auto;
}

@media (max-width: 760px) {
  .blog-cards { grid-template-columns: 1fr; }
  .blog-header { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────
   § 29  HERO NUEVO — .hero-nuevo
───────────────────────────────────────────────── */
.hero-nuevo {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "phone event"
    "brands brands";
  align-items: center;
  overflow: hidden;
  padding-top: calc(var(--topbar-h) + 72px);
}

.hero-nuevo__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #073d6e 0%, #0a5394 50%, #0e6ab5 100%);
  z-index: 0;
}

.hero-nuevo__pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(235,92,43,.08) 0%, transparent 40%);
  z-index: 1;
}

/* ── TELÉFONO ──────────────────────────────────── */
.hero-nuevo__phone {
  grid-area: phone;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem 3rem 4rem;
  position: relative;
  z-index: 2;
}

.hn-phone-wrap {
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.65))
          drop-shadow(0 0 40px rgba(10,83,148,.3));
}

.hn-phone-outer {
  width: 220px;
  height: 460px;
  background: linear-gradient(160deg, #1e2a3a, #0d1522);
  border-radius: 40px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.hn-phone-screen {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 33px;
  overflow: hidden;
  position: relative;
}

.hn-phone-notch {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 16px;
  background: #0d1522;
  border-radius: 16px;
  z-index: 20;
}

.hn-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .6s ease;
  background: #000;
}

.hn-layer.active { opacity: 1; }

.hn-layer img,
.hn-layer video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hn-phone-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 40%);
  border-radius: 33px;
  pointer-events: none;
  z-index: 15;
}

.hn-phone-caption {
  margin-top: 1.2rem;
  font-family: var(--fuente-titulo);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* ── EVENTO ────────────────────────────────────── */
.hero-nuevo__event {
  grid-area: event;
  padding: 3rem 4rem 3rem 2rem;
  position: relative;
  z-index: 2;
}

.hn-eyebrow {
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 1.2rem;
}

.hn-title {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.hn-title-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}

.hn-sep {
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: rgba(255,255,255,.4);
  font-weight: 400;
  padding-left: .2rem;
}

.hn-accent { color: var(--naranja); }

.hn-logo-pill {
  background: #fff;
  border-radius: 10px;
  padding: .4rem .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 52px;
  overflow: hidden;
}

.hn-logo-pill img {
  height: 40px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
}

/* Logo animations */
@keyframes dropDown {
  0%   { transform: translateY(-120px); opacity: 0; }
  60%  { transform: translateY(8px);    opacity: 1; }
  80%  { transform: translateY(-4px); }
  100% { transform: translateY(0);      opacity: 1; }
}
.hn-logo-drop {
  animation: dropDown .8s cubic-bezier(.22,.68,0,1.2) .3s both;
}

@keyframes slideLoop {
  0%    { transform: translateX(-200px); opacity: 0; }
  7.5%  { transform: translateX(0);      opacity: 1; }
  82.5% { transform: translateX(0);      opacity: 1; }
  90%   { transform: translateX(200px);  opacity: 0; }
  100%  { transform: translateX(200px);  opacity: 0; }
}
.hn-logo-slide {
  animation: slideLoop 8s ease-in-out 1.2s infinite;
}

.hn-desc {
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 420px;
  margin-bottom: 1.8rem;
}

/* Fecha burbujas */
.hn-dates {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.hn-dp {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: .55rem .9rem;
  text-align: center;
  backdrop-filter: blur(6px);
}

.hn-dp-n {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.hn-dp-l {
  display: block;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.hn-dp-sep {
  font-size: 1.5rem;
  color: rgba(255,255,255,.25);
}

.hn-dp-year {
  font-family: var(--fuente-titulo);
  font-size: .9rem;
  font-weight: 700;
  color: var(--naranja);
  padding-left: .3rem;
}

/* Localizaciones */
.hn-locs {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 2rem;
}

.hn-loc {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .83rem;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}

.hn-loc-bar {
  width: 3px;
  height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}
.hn-loc-bar--azul   { background: #4da6ff; }
.hn-loc-bar--naranja { background: var(--naranja); }

/* CTAs */
.hn-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hn-btn-pri {
  background: var(--naranja);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.8rem;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(235,92,43,.4);
  transition: background var(--t), transform var(--t);
}
.hn-btn-pri:hover { background: var(--naranja-hover); transform: translateY(-2px); }

.hn-btn-sec {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .85rem 1.8rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.25);
  text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.hn-btn-sec:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }

/* ── TIRA DE MARCAS ────────────────────────────── */
.hn-brands-strip {
  grid-area: brands;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: .9rem 4rem;
  display: flex;
  gap: .8rem 1.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.hn-brands-strip a {
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color var(--t);
}
.hn-brands-strip a:hover { color: #fff; }
.hn-brands-strip span { color: rgba(255,255,255,.2); }

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 900px) {
  .hero-nuevo {
    grid-template-columns: 1fr;
    grid-template-areas:
      "event"
      "phone"
      "brands";
    padding-top: calc(var(--topbar-h) + 64px);
    min-height: auto;
  }
  .hero-nuevo__phone {
    padding: 2rem 1.5rem;
    order: 2;
  }
  .hero-nuevo__event {
    padding: 2.5rem 1.5rem 1rem;
    order: 1;
  }
  .hn-brands-strip {
    padding: .8rem 1.5rem;
    justify-content: center;
  }
  .hn-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
}

@media (max-width: 480px) {
  .hn-phone-outer { width: 190px; height: 400px; }
  .hn-ctas { flex-direction: column; }
  .hn-btn-pri, .hn-btn-sec { text-align: center; }
}

.feria-detalle-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* muestra el vídeo completo sin recortar */
  object-position: center;
  display: block;
}