/* ==========================================================================
   ANCADES — Identidad Institucional & Diseño Editorial Ecuestre
   Paleta oficial extraída del logo:
     Rojo:     #C8243C
     Amarillo: #EBDE2F
     Negro:    #1A1614
     Blanco:   #FDFCFA
   Estilo: Premium · Refinado · Legible · Responsivo · Glassmorphism
   ========================================================================== */

/* --- SYSTEM TOKENS & INTEGRATED THEMES --- */
:root {
  /* Fonts */
  --font-base: 'Barlow', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-condensed: 'Barlow Condensed', sans-serif;

  /* Colors Light Mode (Default Warm Editorial) */
  --red:         #C8243C;
  --red-deep:    #A01E30;
  --red-soft:    #E03050;
  --red-pale:    #FDEAED;
  --yellow:      #EBDE2F;
  --yellow-dark: #C8BC20;
  --ink:         #1A1614;
  --ink2:        #2E2926;
  --ink3:        #4A4440;
  --warm:        #7A7068;
  --bg:          #FDFCFA;
  --bg2:         #F5F1EB;
  --bg3:         #EDE8E0;
  --card:        #FFFFFF;
  --border:      rgba(26,22,20,0.10);
  --border-red:  rgba(200,36,60,0.18);
  --shadow:      0 2px 16px rgba(26,22,20,0.08);
  --shadow-lg:   0 8px 40px rgba(26,22,20,0.12);
  --shadow-2xl:  0 25px 50px rgba(26,22,20,0.25);
  --nav-bg:      #FFFFFF;
  --search-bg:   #FFFFFF;
}

[data-theme="dark"] {
  /* Colors Dark Mode (Premium Warm Charcoal) */
  --ink:         #FDFCFA;
  --ink2:        #EDE8E0;
  --ink3:        #C1B8AF;
  --warm:        #9B8E85;
  --bg:          #161413;
  --bg2:         #23201F;
  --bg3:         #332E2B;
  --card:        #23201F;
  --border:      rgba(253,252,250,0.10);
  --border-red:  rgba(200,36,60,0.25);
  --shadow:      0 2px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 12px 48px rgba(0, 0, 0, 0.6);
  --shadow-2xl:  0 25px 50px rgba(0, 0, 0, 0.5);
  --nav-bg:      #161413;
  --search-bg:   #23201F;
}

/* --- RESET & BASICS --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: var(--font-base);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  transition: background 0.3s, color 0.3s;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font-family: inherit;
  cursor: pointer;
}

/* --- NAVBAR (PREMIUM LOGO INTEGRITY) --- */
.navbar {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--shadow);
  transition: background 0.3s, border 0.3s;
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-logo img {
  height: 48px;
  width: auto;
  display: block;
  clip-path: inset(0 0 0 8px);
  margin-left: -8px;
}
.nav-logo-name {
  font-family: var(--font-base);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--red);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-logo-sub {
  font-size: .6rem;
  color: var(--warm);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 3px;
  font-weight: 500;
}
.nav-center {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0 24px;
  /* Sin esto el rotulo institucional (nowrap, 485px) no dejaba encoger a la columna
     y entre 769 y 899px la barra desbordaba hasta 100px: scroll horizontal en
     tabletas en vertical (iPad Air 820, iPad Pro 11" 834). El rotulo ya tenia
     text-overflow: ellipsis preparado; solo le faltaba poder encoger. */
  min-width: 0;
}
.nav-institucional {
  font-family: var(--font-base);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .nav-institucional {
    display: none !important;
  }
}
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  font-size: 0.72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink3);
  transition: color 0.25s, transform 0.2s;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--red);
  transform: translateY(-1px);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.nav-social {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-social a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 4px;
  transition: all 0.2s ease;
}
.nav-social a:hover {
  border-color: var(--red);
  background: var(--red-pale);
}
.nav-social a svg {
  width: 16px;
  height: 16px;
  fill: var(--red);
  transition: fill 0.2s ease;
}
.nav-social a:hover svg {
  fill: var(--red-deep);
}
.btn-acceder {
  padding: 10px 22px;
  background: var(--red);
  color: #FFFFFF;
  font-size: 0.7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn-acceder:hover {
  background: var(--red-deep);
  transform: translateY(-1px);
}
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--red);
  transform: scale(1.05);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink2);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* Subnavbar - Banda de Socios */
.nav-sec {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 72px;
  z-index: 199;
  height: 36px;
  transition: background 0.3s;
}
.nav-sec-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-sec a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink3);
  padding: 4px 8px;
  transition: color 0.15s;
  white-space: nowrap;
}
.nav-sec a:hover {
  color: var(--red);
}
.nav-sec-sep {
  color: var(--border);
  font-size: 0.8rem;
}

/* Premium Yellow Button Subnavbar inside Asociación Section */
.asoc-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow);
  color: var(--ink) !important;
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 10px 24px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(235, 222, 47, 0.15);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.asoc-nav-btn:hover {
  background: #d8cd2a; /* premium slightly darker brand yellow */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(235, 222, 47, 0.3);
}
.asoc-nav-btn:active {
  transform: translateY(0);
}

/* Elegant Micro-Animations for Alta Asociados Button Attention */
@keyframes elegant-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(235, 222, 47, 0.2);
  }
  50% {
    transform: scale(1.04) translateY(-1px);
    box-shadow: 0 6px 20px rgba(235, 222, 47, 0.45), 0 0 0 6px rgba(235, 222, 47, 0.12);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(235, 222, 47, 0.2);
  }
}

@keyframes shimmer {
  0% {
    left: -80%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

.asoc-nav-btn-alta {
  animation: elegant-pulse 3s infinite ease-in-out;
  position: relative !important;
  overflow: hidden !important;
}

.asoc-nav-btn-alta::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 30%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: shimmer 4.5s infinite ease-in-out;
}

.asoc-nav-btn-alta:hover {
  animation-play-state: paused; /* pause pulse while hover scale takes place */
}

/* Hover effect for infographic card layout in wizards */
.a-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}

/* --- HERO (3 COLUMNS) --- */
.hero-wrap {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: visible;
  padding: 24px 0;
}
.hero {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 0;
  min-height: 520px;
  max-width: 1400px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.82) !important;
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: visible;
}
[data-theme="dark"] .hero {
  background: rgba(30, 27, 24, 0.82) !important;
}

/* Columna Izquierda: Accesos Directos */
.hero-left {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: rgba(245, 243, 240, 0.4) !important;
  padding: 16px 0;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  height: 100%;
}
[data-theme="dark"] .hero-left {
  background: rgba(20, 18, 16, 0.4) !important;
}
.hero-left-title {
  padding: 0 20px 12px;
  font-size: 0.62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink3);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.hero-left-title::before {
  content: '';
  width: 12px;
  height: 2px;
  background: var(--red);
}
.hero-left-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px;
  flex: 1;
  height: 100%;
}
.section-btn {
  width: 100%;
  flex: 1;
  background: linear-gradient(135deg, var(--red-deep), var(--red));
  border: 1px solid var(--red-deep);
  padding: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-height: 80px;
}
.section-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  z-index: 0;
}
.section-btn:hover {
  border-color: var(--red-deep);
  box-shadow: var(--shadow-lg);
  transform: translateX(4px);
}
.section-btn:hover::before {
  opacity: 1;
}
.section-btn:hover .sbtn-text { color: #FFFFFF; }
.section-btn:hover .sbtn-label { color: rgba(255, 255, 255, 0.9); }
.section-btn:hover .sbtn-arrow { color: #FFFFFF; background: rgba(255, 255, 255, 0.25); border-left-color: rgba(255, 255, 255, 0.35); }
.section-btn:hover .sbtn-theme-ico { opacity: 0.25; }

.sbtn-theme-ico {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 80px;
  height: 80px;
  opacity: .15;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}
.sbtn-theme-ico svg {
  width: 100%;
  height: 100%;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
}
.section-btn:hover .sbtn-theme-ico svg {
  stroke: #FFFFFF;
}
.sbtn-icon-wrap {
  width: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  transition: border 0.3s;
}
.section-btn:hover .sbtn-icon-wrap {
  border-right-color: rgba(255, 255, 255, 0.35);
}
.sbtn-ico {
  width: 24px;
  height: 24px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: stroke 0.3s;
}
.section-btn:hover .sbtn-ico {
  stroke: #FFFFFF;
}
.sbtn-body {
  flex: 1;
  padding: 14px 64px 14px 16px; /* expanded right padding to prevent overlapping with absolute arrow hitbox */
  position: relative;
  z-index: 2;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sbtn-label {
  font-size: 0.54rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 4px;
  transition: color 0.3s;
}
.sbtn-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  transition: color 0.3s;
}
.sbtn-arrow {
  font-size: 1.4rem;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.section-btn:hover .sbtn-arrow {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.25);
  border-left-color: rgba(255, 255, 255, 0.35);
  transform: none;
}

/* Columna Central: Titular & Buscador Inteligente */
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 36px;
  text-align: center;
  position: relative;
  background: var(--bg);
}
.hero-silhouette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  color: var(--ink);
  transition: opacity 0.3s, color 0.3s;
}
[data-theme="dark"] .hero-silhouette {
  opacity: 0.035;
}
.hero-center > * {
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  font-size: 0.65rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--red);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 12px;
  max-width: 580px;
}
.hero-title em {
  font-style: italic;
  color: var(--red);
  font-weight: 300;
}
.hero-sub {
  font-size: 0.95rem;
  color: var(--ink3);
  max-width: 480px;
  margin-bottom: 32px;
  line-height: 1.7;
}

/* Buscador de Cristal */
.search-hero {
  width: 100%;
  max-width: 540px;
  position: relative;
  margin-bottom: 16px;
  z-index: 5;
}
.search-input-wrapper {
  position: relative;
  width: 100%;
}
.search-highlight {
  background: rgba(200, 36, 60, 0.12);
  color: var(--red);
  font-weight: 600;
  padding: 0 2px;
  border-radius: 2px;
}
[data-theme="dark"] .search-highlight {
  background: rgba(200, 36, 60, 0.25);
  color: var(--red-soft);
}
.search-hero-input {
  width: 100%;
  padding: 16px 88px 16px 20px;
  font-size: 0.95rem;
  font-family: var(--font-base);
  background: var(--search-bg);
  color: var(--ink);
  border: 2px solid var(--border);
  border-radius: 6px;
  outline: none;
  box-shadow: var(--shadow);
  transition: all 0.3s;
}
.search-hero-input:focus {
  border-color: var(--red);
  box-shadow: var(--shadow-lg);
}
.search-hero-input::placeholder {
  color: var(--warm);
}
.search-hero-btn {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 52px;
  background: var(--red);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 6px 6px 0;
  transition: background 0.2s;
}
.search-hero-btn:hover {
  background: var(--red-deep);
}
.search-hero-btn svg {
  width: 18px;
  height: 18px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 2.2;
}

/* Glassmorphism Autocomplete Dropdown */
.search-results-hero {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1050 !important;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  max-height: 420px;
  overflow-y: auto;
  display: none;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
/* Thin scrollbar style */
.search-results-hero::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.search-results-hero::-webkit-scrollbar-track {
  background: transparent;
}
.search-results-hero::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
}
.search-results-hero::-webkit-scrollbar-thumb:hover {
  background: var(--warm);
}

[data-theme="dark"] .search-results-hero {
  background: rgba(35, 32, 31, 0.98);
  border-color: rgba(253, 252, 250, 0.15);
}
.search-results-hero.open {
  display: block;
}

/* Marca de agua ultra premium de caballos super diluida por detrás del buscador */
.search-results-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: url('https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?w=1400&q=60&fit=crop') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  opacity: 0.025 !important; /* Super sutil y elegante (2.5%) */
  filter: grayscale(100%) contrast(120%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transition: opacity 0.3s !important;
}
[data-theme="dark"] .search-results-hero::before {
  opacity: 0.012 !important; /* Aún más sutil en tema oscuro (1.2%) */
}
/* Asegurar que las tarjetas de resultados, categorías y placeholders queden por encima de la marca de agua */
.search-results-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Category Sticky Headers */
.search-category-header {
  padding: 12px 18px 6px;
  font-size: 0.62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  background: rgba(245, 241, 235, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-results-hero > .search-category-header:first-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.search-category-count {
  font-size: 0.58rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(200, 36, 60, 0.1);
  color: var(--red);
}
[data-theme="dark"] .search-category-header {
  background: rgba(35, 32, 31, 0.95);
}
.search-category-header-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.search-category-header-ico svg {
  width: 14px;
  height: 14px;
  stroke: var(--red);
  fill: none;
  stroke-width: 2.2;
}

.sri {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s;
}
.sri:hover,
.sri.active-item {
  background: var(--red-pale);
}
[data-theme="dark"] .sri:hover,
[data-theme="dark"] .sri.active-item {
  background: rgba(200, 36, 60, 0.15);
}
.sri:last-child {
  border-bottom: none;
}
.sri-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .sri-ico {
  background: var(--bg3);
}
.sri-ico svg {
  width: 15px;
  height: 15px;
  stroke: var(--red);
  fill: none;
  stroke-width: 2;
}
.sri-body {
  flex: 1;
  min-width: 0; /* Prevents text overflow */
}
.sri-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sri-desc {
  font-size: 0.76rem;
  color: var(--ink3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sri-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.sri-chip {
  font-size: 0.58rem;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--red-pale);
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.03em;
}
[data-theme="dark"] .sri-chip {
  background: var(--bg3);
  color: var(--red-soft);
}
.sri-arrow {
  font-size: 1.1rem;
  color: var(--red);
  align-self: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.sri:hover .sri-arrow {
  transform: translateX(4px);
}
.search-empty {
  padding: 24px 18px;
  color: var(--warm);
  font-size: 0.88rem;
  text-align: center;
}

/* Backdrop Blur (Desktop) */
.search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 20, 19, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.search-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile Close Button */
.search-mobile-close {
  display: none;
}

/* RESPONSIVE FULLSCREEN DRAWER (Mobile/Tablet) */
@media (max-width: 768px) {
  .search-hero.active-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2100 !important;
    background: var(--bg);
    padding: 16px;
    margin: 0;
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .search-hero.active-mobile .search-input-wrapper {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative !important;
    width: 100% !important;
  }
  
  .search-hero.active-mobile .search-hero-input {
    grid-column: 1 !important;
    width: 100% !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
    border-color: var(--red) !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
    height: 48px !important;
    border-radius: 8px !important;
  }
  
  .search-hero.active-mobile .search-hero-btn {
    position: absolute !important;
    left: 2px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .search-hero.active-mobile .search-hero-btn svg {
    stroke: var(--ink3) !important;
    width: 18px !important;
    height: 18px !important;
  }
  
  .search-hero.active-mobile .search-mobile-close {
    grid-column: 2 !important;
    display: block !important;
    width: 72px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--red) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: right !important;
    cursor: pointer !important;
    white-space: nowrap !important;
  }
  
  .search-hero.active-mobile .search-results-hero {
    position: static;
    display: block !important;
    max-height: none;
    flex: 1;
    overflow-y: auto;
    box-shadow: none;
    border: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 16px 0 120px; /* Generous bottom padding to clear mobile keyboard */
    margin-top: 12px;
  }

  .search-hero.active-mobile .search-category-header {
    background: var(--bg);
    padding: 8px 4px 6px;
  }
  
  .search-hero.active-mobile .sri {
    padding: 14px 4px;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Hints / Pills */
.search-hints {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 540px;
  position: relative;
  z-index: 1;
}
.hint-label {
  font-size: 0.65rem;
  color: var(--warm);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  align-self: center;
}
.hint-pill {
  padding: 5px 14px;
  border: 1px solid var(--border);
  color: var(--ink2);
  font-size: 0.72rem;
  cursor: pointer;
  border-radius: 99px;
  background: var(--card);
  transition: all 0.2s;
  font-weight: 500;
}
.hint-pill:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-pale);
}

/* Columna Derecha: Noticias Destacadas */
.hero-right {
  border-left: 1px solid var(--border);
  background: rgba(245, 243, 240, 0.4) !important;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
[data-theme="dark"] .hero-right {
  background: rgba(20, 18, 16, 0.4) !important;
}
.hero-right-title {
  font-size: 0.62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink3);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-right-title::before {
  content: '';
  width: 12px;
  height: 2px;
  background: var(--red);
}
.noticia-item {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s;
}
.noticia-item:hover {
  transform: translateY(-1px);
}
.noticia-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.noticia-thumb {
  width: 64px;
  height: 50px;
  flex-shrink: 0;
  background: var(--bg3);
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.noticia-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.noticia-item:hover .noticia-thumb img {
  transform: scale(1.06);
}
.noticia-content {
  flex: 1;
  min-width: 0;
}
.noticia-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.noticia-date {
  font-size: 0.58rem;
  color: var(--warm);
  font-weight: 600;
  text-transform: uppercase;
}
.noticia-type {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.noticia-type svg {
  width: 9px;
  height: 9px;
}
.noticia-type--publicacion {
  background: var(--red-pale);
}
.noticia-type--publicacion svg {
  stroke: var(--red);
  fill: none;
  stroke-width: 2;
}
.noticia-type--video {
  background: rgba(235, 222, 47, 0.2);
}
.noticia-type--video svg {
  fill: var(--yellow-dark);
}
.noticia-type--podcast {
  background: var(--red-pale);
}
.noticia-type--podcast svg {
  stroke: var(--red-deep);
  fill: none;
  stroke-width: 2;
}
.noticia-type--galeria {
  background: rgba(122, 112, 104, 0.15);
}
.noticia-type--galeria svg {
  stroke: var(--ink3);
  fill: none;
  stroke-width: 2;
}
.noticia-tit {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.noticia-item:hover .noticia-tit {
  color: var(--red);
}

/* --- SECTIONS MAIN LAYOUT --- */
.page-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}
.sec-label {
  font-size: 0.62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-label::before {
  content: '';
  width: 16px;
  height: 2px;
  background: var(--red);
}
.sec-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 8px;
}
.sec-title em {
  font-style: italic;
  color: var(--red);
  font-weight: 300;
}
.sec-body {
  font-size: 0.95rem;
  color: var(--ink3);
  line-height: 1.7;
  max-width: 580px;
}

/* Secciones con Imagen de Fondo Difuminada */
.sec-with-bg {
  position: relative;
  overflow: hidden;
}
.sec-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.025; /* Súper transparente y sutil como marca de agua ultra premium */
  filter: grayscale(100%) contrast(120%); /* Escala de grises nítida sin blur */
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s;
}
[data-theme="dark"] .sec-bg-img {
  opacity: 0.012 !important; /* Aún más sutil en tema oscuro */
}
.bg-silhouette, .hero-silhouette {
  display: none !important; /* Ocultar siluetas vectoriales toscas en favor de las marcas de agua de fotos reales */
}
.sec-with-bg > *:not(.sec-bg-img) {
  position: relative;
  z-index: 1;
}

/* --- GRID DE TRÁMITES & ASOCIACIÓN & COMPETICIÓN --- */
.tramites-sec {
  padding: 56px 0;
}
.tramites-header {
  margin-bottom: 36px;
}
.tramites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tcard {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 24px 22px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.tcard::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--red);
  transition: width 0.25s ease;
}
.tcard:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--red-soft);
}
.tcard:hover::after {
  width: 4px;
}
.tcard-num {
  font-family: var(--font-condensed);
  font-size: 0.68rem;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 12px;
}
.tcard-ico {
  margin-bottom: 12px;
}
.tcard-ico svg {
  width: 24px;
  height: 24px;
  stroke: var(--red);
  fill: none;
  stroke-width: 1.5;
}
.tcard-tit {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}
.tcard-desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink3);
}
.tcard-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.tcard-chip {
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--red-pale);
  color: var(--red);
  font-weight: 700;
}
.tcard-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tcard-cta {
  font-size: 0.72rem;
  color: var(--red);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- LAYOUT EDITORIAL ASIMÉTRICO (NUEVO) --- */
.editorial-split-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
/* Para alternar orden visualmente y dar dinamismo */
.editorial-split-layout.row-reverse {
  grid-template-columns: 0.85fr 1.15fr;
}

/* Columna de Texto Editorial */
.editorial-content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0;
}
.editorial-content-col .sec-label {
  font-family: var(--font-condensed);
  font-size: 0.72rem;
  letter-spacing: .25em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.editorial-content-col .sec-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 16px 0;
  line-height: 1.15;
}
.editorial-content-col .sec-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--red);
}
.editorial-content-col .sec-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink2);
  margin-bottom: 28px;
  max-width: 580px;
}

/* Fila de Estadísticas / KPIs */
.editorial-stats-row {
  display: flex;
  gap: 36px;
  margin-bottom: 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.editorial-stat-item {
  display: flex;
  flex-direction: column;
}
.editorial-stat-val {
  font-family: var(--font-condensed);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-bottom: 4px;
}
.editorial-stat-lbl {
  font-size: 0.72rem;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Columna Visual Premium */
.editorial-visual-col {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 28px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s;
}
.editorial-visual-col:hover {
  transform: translateY(-4px);
  border-color: var(--red-soft);
}
.editorial-visual-col .visual-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
.editorial-visual-col:hover .visual-bg-img {
  transform: scale(1.05);
}
/* Gradiente para asegurar legibilidad */
.editorial-visual-col .visual-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 40%, transparent 100%);
  z-index: 1;
}
.editorial-visual-col > *:not(.visual-bg-img):not(.visual-overlay) {
  position: relative;
  z-index: 2;
}

/* Título de la tarjeta visual */
.visual-card-title {
  font-family: var(--font-base);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.visual-card-title svg {
  width: 18px;
  height: 18px;
  stroke: var(--red-soft);
  stroke-width: 2px;
  fill: none;
}

/* Cuadrícula de Píldoras Interactivas */
.interactive-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.interactive-pill {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.interactive-pill svg {
  width: 14px;
  height: 14px;
  stroke: rgba(255, 255, 255, 0.6);
  fill: none;
  stroke-width: 2px;
  transition: stroke 0.3s;
}
.interactive-pill:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(200, 36, 60, 0.3);
}
.interactive-pill:hover svg {
  stroke: #fff;
}

/* Botones de acción principales de sección */
.editorial-btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* En movil los botones llevan "flex: 1" escrito en linea (base 0), asi que nunca
   saltaban de fila aunque el grupo tenga flex-wrap: tres botones en 353px dejaban
   95px a "CATALOGO REPRODUCTORES" y el texto se cortaba. Con base "auto" cada uno
   reclama el ancho de su texto y salta de fila cuando no cabe; al saltar, crece
   hasta llenar la fila. */
@media (max-width: 767px) {
  .editorial-btn-group > .premium-cta-btn {
    flex: 1 1 auto !important;
    min-width: min-content;
  }
}
.editorial-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow);
}
.editorial-btn-primary:hover {
  background: var(--red-hover, #a81c2f);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(200, 36, 60, 0.25);
}
.editorial-btn-primary svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2px;
  fill: none;
}

.editorial-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  color: var(--ink);
  border: 1px solid var(--border);
  padding: 12px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial-btn-secondary:hover {
  background: rgba(0,0,0, 0.04);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Adaptación para pantallas de gran tamaño y modo oscuro */
[data-theme="dark"] .editorial-btn-secondary {
  color: var(--ink-dark, #fff);
  border-color: var(--border);
}
[data-theme="dark"] .editorial-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: #fff;
}
[data-theme="dark"] .interactive-pill {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .interactive-pill:hover {
  background: var(--red);
  border-color: var(--red);
}

/* RESPONSIVE DESIGN (Las 4 Resoluciones) */
@media (max-width: 991px) {
  .editorial-split-layout {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .editorial-content-col {
    padding: 0;
    order: 1 !important; /* FORZAR TEXTO ARRIBA */
  }
  .editorial-visual-col {
    min-height: auto;
    height: auto;
    aspect-ratio: 16/9;
    padding: 24px 20px;
    order: 2 !important; /* FORZAR IMAGEN ABAJO */
  }
}

@media (max-width: 575px) {
  .editorial-content-col .sec-title {
    font-size: 1.8rem;
  }
  .editorial-stats-row {
    gap: 20px;
    flex-wrap: wrap;
  }
  .editorial-stat-val {
    font-size: 1.5rem;
  }
  .interactive-pill-grid {
    gap: 8px;
  }
  .interactive-pill {
    padding: 6px 12px;
    font-size: 0.72rem;
  }
}

/* --- ACTUALIDAD & MULTIMEDIA (EDITORIAL SYSTEM) --- */
.media-sec {
  padding: 56px 0;
  border-top: 1px solid var(--border);
}
.multi-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  gap: 8px;
}
.mtab {
  padding: 8px 18px;
  font-size: 0.72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.mtab:hover {
  color: var(--red);
}
.mtab.on {
  color: var(--red);
  border-bottom-color: var(--red);
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mcard {
  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.mcard:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--red-soft);
}
.mcard-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: var(--bg3);
}
/* Relleno de los lados: la misma foto, ampliada y difuminada, detras de la nitida.
   Cada tarjeta la pasa en la variable --mcard-img (portada, "cargar mas" de
   LandingController::loadMore y noticias/index). Sin variable, queda el fondo. */
.mcard-thumb::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: -1;
  background: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12)), var(--mcard-img, none) center / cover no-repeat;
  filter: blur(22px) saturate(1.15);
}
.mcard-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  /* "contain" y no "cover": la caja es 16:9 y las fotos suelen ser 4:3, asi que
     "cover" les quitaba un 25% de alto (cabezas y cascos cortados). Desde el
     07/10/2026 los lados no quedan en blanco: los rellena el ::before de arriba. */
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.mcard:hover .mcard-thumb img {
  transform: scale(1.06);
}
.mcard-ov {
  position: absolute;
  inset: 0;
  background: rgba(26,22,20,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}
.mcard:hover .mcard-ov {
  background: rgba(200,36,60,0.15);
}
.mcard-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(200,36,60,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s;
  box-shadow: 0 4px 12px rgba(200,36,60,0.3);
}
.mcard:hover .mcard-play {
  transform: scale(1.1);
  background: var(--red);
}
.mcard-play svg {
  width: 14px;
  height: 14px;
  fill: #FFFFFF;
  margin-left: 2px;
}
/* Noticias y concursos llevan iconos de trazo (fill="none"): sin esto, el fill de
   arriba los rellenaba y el documento de las noticias salia como un cuadrado. */
.mcard-play svg[fill="none"] {
  fill: none;
}
/* Colores fijos, no var(--ink): en tema oscuro --ink es casi blanco y el circulo de
   las noticias quedaba blanco con el icono blanco (07/10/2026). */
.mcard-play--noticia,
.mcard:hover .mcard-play--noticia {
  background: #1A1614;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.mcard-play--concurso,
.mcard:hover .mcard-play--concurso {
  background: var(--yellow);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.mcard-play--concurso svg {
  stroke: #1A1614;
}
.mcard-body {
  padding: 14px 16px;
}
.mcard-cat {
  font-size: 0.62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 4px;
}
.mcard-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- RANKING (EDITORIAL LISTS) --- */
.ranking-sec {
  padding: 56px 0;
  background: var(--bg2);
  transition: background 0.3s;
}
.rank-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-top: 24px;
  gap: 8px;
}
.rtab {
  padding: 8px 18px;
  font-size: 0.72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all 0.2s;
}
.rtab:hover {
  color: var(--red);
}
.rtab.on {
  color: var(--red);
  border-bottom-color: var(--red);
}
.rank-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.rank-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.rank-head-row {
  background: var(--red);
  color: #FFFFFF;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rank-head-tit {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rank-badge {
  font-size: 0.62rem;
  padding: 3px 8px;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  border-radius: 3px;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.rank-row:hover {
  background: var(--red-pale);
}
[data-theme="dark"] .rank-row:hover {
  background: rgba(200, 36, 60, 0.15);
}
.rank-row:last-child {
  border-bottom: none;
}
.rank-pos {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--red);
  min-width: 24px;
  line-height: 1;
}
.rank-pos.gold {
  color: var(--yellow-dark);
}
.rank-av {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--red);
  border: 1.5px solid var(--border-red);
  border-radius: 4px;
}
.rank-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
}
.rank-detail {
  font-size: 0.72rem;
  color: var(--warm);
  margin-top: 1px;
}
.rank-pts {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--red);
  margin-left: auto;
  white-space: nowrap;
}
.rank-pts span {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--warm);
}

/* --- SPONSORS --- */
.sponsors-sec {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}
.sponsors-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.sponsors-label {
  font-size: 0.72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-light);
  flex-shrink: 0;
}
.sponsors-strip {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
}
.sponsor-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  height: 64px;
  min-width: 140px;
  flex: 1;
  max-width: 200px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.01);
  box-sizing: border-box;
}
.sponsor-card img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.7);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sponsor-card:hover {
  border-color: var(--red);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  background: #ffffff;
}
.sponsor-card:hover img {
  filter: grayscale(0%) opacity(1);
}

/* --- CTA SECTION & FORM SOCIO --- */
.cta-band-hero {
  background: linear-gradient(135deg, #1A1614, #2E2926);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cta-band-hero-inner {
  padding: 36px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.cta-tit {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.cta-tit em {
  font-style: italic;
  color: var(--yellow);
  font-weight: 300;
}
.cta-sub {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
}
.cta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-yel {
  padding: 12px 28px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s, transform 0.15s;
}
.btn-yel:hover {
  background: var(--yellow-dark);
  transform: translateY(-1px);
}

/* --- FOOTER (SOBRE ORIGINAL) --- */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 48px 32px 0;
  position: relative;
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-brand img {
  height: 34px;
  width: auto;
  display: block;
  clip-path: inset(0 0 0 6px);
  margin-left: -6px;
}
.footer-logo-name {
  font-family: var(--font-base);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--red);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-desc {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--warm);
}
.fcol-tit {
  font-size: 0.65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 14px;
}
.fcol ul {
  list-style: none;
}
.fcol ul li {
  margin-bottom: 8px;
}
.fcol ul li a {
  font-size: 0.8rem;
  color: var(--ink3);
  transition: color 0.15s;
  cursor: pointer;
}
.fcol ul li a:hover {
  color: var(--red);
}
.footer-bottom {
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-size: 0.7rem;
  color: var(--warm);
}
.footer-flag {
  display: flex;
  gap: 3px;
  height: 6px;
}
.footer-flag span {
  width: 18px;
  height: 100%;
}

/* --- BOTÓN SCROLL TO TOP --- */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 300;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(200,36,60,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s, background .2s;
  transform: translateY(10px);
}
.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top svg {
  width: 18px;
  height: 18px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 2.5;
}
.scroll-top:hover {
  background: var(--red-deep);
  transform: scale(1.05);
}

/* --- GLASSMORPHIC MEGA MODALES --- */
.mega-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(22, 20, 19, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  /* Cerrada, además de transparente, oculta: con pointer-events a secas, cualquier hijo con
     pointer-events: auto (la columna de documentos del asistente se lo pone por JS) seguía
     recibiendo clics por encima de la portada y dejaba el buscador sin poder escribir.
     La visibilidad cambia al final del fundido para no cortar la animación de cierre. */
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.mega-modal.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
.mega-modal-dialog {
  background: var(--card);
  width: 100%;
  max-width: 1050px;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border);
  position: relative;
}
.mega-modal.active .mega-modal-dialog {
  transform: translateY(0) scale(1);
}
.mega-modal-header {
  padding: 1.8rem 2.8rem 1.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 10;
}
.mega-modal-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mega-modal-title svg {
  stroke: var(--red);
}
.mega-modal-close {
  background: var(--red);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.25s ease;
  box-shadow: 0 2px 12px rgba(200,36,60,0.35);
  flex-shrink: 0;
}
.mega-modal-close:hover {
  background: var(--red-deep);
  color: #ffffff;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 4px 16px rgba(200,36,60,0.5);
}
.mega-modal-close svg {
  width: 18px;
  height: 18px;
}
.mega-modal-body {
  padding: 2.8rem;
  display: grid;
  gap: 2.8rem;
}
.mega-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.mega-grid-grouped {
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 992px) {
  .mega-grid-grouped {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.mega-group-card {
  background: var(--bg2);
  border-radius: 12px;
  padding: 1.8rem 2.2rem 2.2rem;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 12px rgba(26,22,20,0.015);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.mega-group-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.8rem;
  bottom: 1.8rem;
  width: 4px;
  border-radius: 0 4px 4px 0;
}
.mega-group-card.lg-group::before {
  background: var(--yellow);
}
.mega-group-card.asoc-group::before {
  background: var(--red);
}
.mega-group-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-red);
}
.mega-group-header {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.8rem;
  margin-bottom: 0.2rem;
}
.mega-group-icon {
  width: 22px;
  height: 22px;
  stroke: var(--red);
  fill: none;
  stroke-width: 2;
}
.mega-group-content {
  display: grid;
  gap: 2rem;
}
.mega-group-content.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.mega-group-content.grid-1 {
  grid-template-columns: 1fr;
}
@media (max-width: 576px) {
  .mega-group-content.grid-2 {
    grid-template-columns: 1fr;
  }
}
.mega-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.mega-col-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--yellow);
  padding-bottom: 0.4rem;
  display: inline-block;
}
.mega-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mega-link-list li {
  line-height: 1.4;
}
.mega-link-list a {
  text-decoration: none;
  color: var(--ink3);
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  margin-left: -6px;
}
.mega-link-list a:hover {
  background: var(--bg3);
  color: var(--red);
  transform: translateX(4px);
}
.mega-list-ico {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  margin-top: 4px;
  opacity: 0.5;
  flex-shrink: 0;
}
.mega-link-special {
  margin-top: 1.5rem;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--red) !important;
  color: #FFFFFF !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  transition: all 0.2s ease;
}
.mega-link-special:hover {
  background: var(--red-deep) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(200, 36, 60, 0.35);
}

/* Modal del Trámite Detalle Especial (Ficha AJAX) */
#tramite-modal .mega-modal-dialog {
  border-radius: 12px;
}
#tm-body {
  background: var(--bg);
}
.tramite-page {
  font-family: var(--font-base);
  color: var(--ink);
}
.tramite-page h1, .tramite-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--red);
  margin-bottom: 12px;
}

/* Animaciones y Transiciones */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- RESPONISIVE OVERRIDES --- */
@media (max-width: 1024px) {
  .nav-inner {
    padding: 0 20px;
  }
  .nav-links {
    display: none; /* Ocultar nav links en tablet/móvil */
  }

  .tramites-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .media-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .multi-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
  }
  .multi-tabs::-webkit-scrollbar {
    display: none;
  }
  .mtab {
    display: inline-block;
  }
  .rank-wrap {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto !important;
    height: auto !important;
  }
  /* En 1 columna el buscador siempre aparece primero */
  .hero-center { order: 1; }
  .hero-left   { order: 2; }
  .hero-right  { order: 3; }
  .hero-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
  .hero-right {
    border-left: none;
    border-top: 1px solid var(--border);
    border-bottom-left-radius: 12px;
  }
  .nav-logo-sub {
    display: none;
  }
  .nav-social {
    display: none;
  }
  .btn-acceder {
    padding: 8px 14px;
    font-size: 0.65rem;
  }
  .nav-sec-inner {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .nav-sec-inner::-webkit-scrollbar {
    display: none;
  }
  .hero-center {
    padding: 24px 16px;
    min-height: auto !important;
  }
  .page-wrap {
    padding: 0 16px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .cta-band-hero-inner {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    text-align: center;
  }
  .cta-btns {
    justify-content: center;
  }
  .scroll-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .mega-modal {
    padding: 1rem;
  }
  .mega-modal-body {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 1.5rem;
  }
  .mega-modal-header {
    padding: 1.5rem;
  }
  .mega-modal-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .tramites-grid {
    grid-template-columns: 1fr;
  }
  .media-grid {
    grid-template-columns: 1fr;
  }
  .mobile-hide {
    display: none !important;
  }
  .hero-title {
    font-size: 32px !important;
  }
  .hero-sub {
    font-size: 15px !important;
    padding: 0 10px;
  }
  .search-hero {
    margin-top: 20px;
  }
  .hero-sponsors-strip {
    margin-top: 16px !important;
    transform: scale(0.9);
  }
}

/* --- SILUETAS VECTORIALES DE FONDO --- */
.bg-silhouette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 700px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.085; /* Ajustado para que se aprecie sutilmente como marca de agua elegante */
  transition: opacity 0.3s ease, color 0.3s ease;
  color: var(--ink);
}

[data-theme="dark"] .bg-silhouette {
  opacity: 0.045; /* Ajustado para que sea visible en modo oscuro */
}

.sec-with-bg {
  position: relative !important;
  overflow: hidden !important;
}

.sec-bg-img {
  z-index: 0 !important;
}

.page-wrap {
  position: relative !important;
  z-index: 1 !important;
}

/* --- VENTANA TIPO CRISTAL (SOLID WARM WHITE FOR HIGHEST FIDELITY) --- */
#tramite-modal .mega-modal-dialog {
  background: var(--bg) !important; /* Solid warm off-white matching the website background */
  border: 1.5px solid rgba(26, 22, 20, 0.12) !important;
  box-shadow: 0 25px 60px rgba(26, 22, 20, 0.15) !important;
  border-radius: 20px !important;
  overflow: hidden;
}

[data-theme="dark"] #tramite-modal .mega-modal-dialog {
  background: var(--bg) !important;
  border-color: rgba(253, 252, 250, 0.14) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}

#tramite-modal .mega-modal-header,
#tramite-modal #tm-body {
  background: transparent !important;
  border-color: rgba(26, 22, 20, 0.08) !important;
}

[data-theme="dark"] #tramite-modal .mega-modal-header {
  border-color: rgba(253, 252, 250, 0.08) !important;
}
#tramite-modal .mega-modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#tramite-modal .mega-modal-title {
  margin: 0;
  font-size: 1.4rem;
  font-family: var(--font-display);
}
#tramite-modal .mega-modal-close {
  position: static;
  margin-top: 0;
}
#tramite-modal .mega-modal-body {
  padding: 0;
  min-height: 400px;
  overflow-y: auto;
  max-height: 80vh;
}

/* --- DESKTOP ACTIVE SPLIT-SCREEN SEARCH OVERLAY --- */
/* La ventana del tramite usa EXACTAMENTE el mismo ancho que el buscador
   (90vw con tope de 1280px), para que al elegir un tramite no se note ningun
   salto de tamano. Si se cambia uno, hay que cambiar el otro. */
@media (min-width: 769px) {
  #tramite-modal .mega-modal-dialog {
    width: 90vw !important;
    max-width: 1280px !important;
  }
}
@media (min-width: 769px) {
  .search-hero.active-desktop {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
    max-width: 1280px !important;
    height: 80vh !important;
    max-height: 620px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 90px rgba(0,0,0,0.25) !important;
    z-index: 1100 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    animation: searchDesktopEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes searchDesktopEnter {
    from {
      opacity: 0;
      transform: translate(-50%, -46%) scale(0.97) !important;
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) !important;
    }
  }

  /* Left Panel Styles */
  .search-hero.active-desktop .search-left-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 38% !important;
    background: var(--bg2) !important;
    border-right: 1px solid var(--border) !important;
    padding: 96px 28px 36px 28px !important; /* Aumentado padding-top a 96px para dar espacio al input (72px) */
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .search-lp-eyebrow {
    font-size: 0.65rem !important;
    letter-spacing: .2em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--red) !important;
    margin-bottom: 12px !important;
  }

  .search-lp-title {
    font-family: var(--font-display) !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.2 !important;
  }

  .search-lp-desc {
    font-size: 0.85rem !important;
    color: var(--ink3) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  .search-lp-hints {
    margin-top: 24px !important;
  }

  .search-lp-hints-label {
    display: block !important;
    font-size: 0.62rem !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--ink3) !important;
    margin-bottom: 12px !important;
  }

  .search-lp-pills {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .search-lp-pill {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 16px 18px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
  }

  .search-lp-pill:hover {
    border-color: var(--red) !important;
    color: var(--red) !important;
    background: var(--red-pale) !important;
    transform: translateX(4px) !important;
  }

  [data-theme="dark"] .search-lp-pill:hover {
    background: rgba(200, 36, 60, 0.15) !important;
  }

  .search-desktop-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--ink3) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    width: 100% !important;
  }

  .search-desktop-close-btn span {
    font-size: 0.68rem !important;
    padding: 2px 6px !important;
    background: var(--border) !important;
    border-radius: 4px !important;
    color: var(--ink2) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
  }

  .search-desktop-close-btn:hover {
    border-color: var(--red) !important;
    color: var(--red) !important;
    background: var(--red-pale) !important;
  }

  /* Left Side: Input Restructuring at the top left */
  .search-hero.active-desktop .search-input-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important; /* Posicionado arriba a la izquierda */
    width: 38% !important; /* Ancho idéntico al panel izquierdo */
    height: 72px !important;
    border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important; /* Separación con el panel derecho */
    box-sizing: border-box !important;
    z-index: 10 !important;
    background: var(--bg2) !important; /* Mismo fondo que el panel izquierdo */
    display: flex !important;
    align-items: center !important;
  }

  .search-hero.active-desktop .search-hero-input {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    padding: 0 100px 0 28px !important; /* Alineado con el padding de 28px del panel */
    font-size: 1.05rem !important;
    background: transparent !important;
  }

  .search-hero.active-desktop .search-hero-btn {
    border-radius: 0 !important;
    background: transparent !important;
    width: 64px !important;
    height: 100% !important;
  }

  .search-hero.active-desktop .search-hero-btn svg {
    stroke: var(--ink3) !important;
    width: 22px !important;
    height: 22px !important;
  }

  .search-hero.active-desktop .search-hero-btn:hover svg {
    stroke: var(--red) !important;
  }

  /* Right Side: Active Desktop Results Layout (Full Height!) */
  .search-hero.active-desktop .search-results-hero {
    position: absolute !important;
    display: block !important;
    top: 0 !important; /* Empieza desde arriba de todo */
    right: 0 !important;
    left: auto !important; /* Resetear el left: 0 por defecto para evitar que solape la columna izquierda */
    width: 62% !important; /* Ocupa todo el lado derecho libre */
    height: 100% !important; /* Ocupa el 100% de la altura útil del modal */
    z-index: 1050 !important; /* Asegurar que los resultados estén por encima del contenedor base y capten clicks */
    max-height: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 16px 16px 0 !important; /* Bordes redondeados en la esquina derecha del modal */
    background: var(--card) !important;
    overflow-y: auto !important;
    padding: 0 0 40px 0 !important; /* Padding inferior dentro del modal */
    box-sizing: border-box !important;
  }

  .search-hero.active-desktop .search-category-header {
    background: var(--bg2) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .search-hero.active-desktop .search-results-hero > .search-category-header:first-child {
    border-radius: 0 16px 0 0 !important; /* Bordes redondeados para la primera cabecera de categoría */
  }
}

/* --- PREMIUM INTEGRATED NEWSLETTER & FOOTER --- */
.footer-newsletter-col {
  padding-right: 24px;
}
.footer-col-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-col-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--red);
}
.footer-col-desc {
  font-size: 0.82rem;
  color: var(--ink-light);
  line-height: 1.6;
  margin-bottom: 24px;
}
.footer-newsletter-form {
  display: flex;
  flex-direction: column;
}
.footer-form-group {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-form-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  font-family: var(--font-base) !important;
  font-size: 0.85rem !important;
  color: var(--ink) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box;
}
.footer-input:focus {
  border-color: var(--red) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}
.footer-checkbox-group {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.footer-checkbox {
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--red);
}
.footer-checkbox-label {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink3);
}
.footer-checkbox-label a {
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
}
.footer-checkbox-label a:hover {
  text-decoration: underline;
}
.footer-privacy-link {
  margin-bottom: 20px;
}
.footer-privacy-link a {
  font-size: 0.75rem;
  color: var(--red);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer-privacy-link a:hover {
  text-decoration: underline;
}
.btn-registro {
  background: var(--red);
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}
.btn-registro:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}

/* Contact block styles */
.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}
.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-light);
}
.contact-text a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.contact-text a:hover {
  color: var(--red);
}

/* Right column partners and warning */
.footer-partners-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* El mapa se quedaba en 2px de ancho y no se veia. Al aceptar las cookies se oculta
   el aviso y el iframe va en position:absolute, asi que el contenedor se queda sin
   contenido "en flujo"; y por debajo de 1024px esta columna alinea con
   flex-start / center, que ajusta cada hijo a su contenido: cero. Con ancho propio
   deja de depender de lo que lleve dentro. */
#gmaps-container {
  width: 100%;
  min-width: 0;
}
.footer-partners-logos {
  display: flex;
  gap: 24px;
  align-items: center;
}
.partner-logo {
  max-height: 52px;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.85);
  transition: all 0.3s ease;
}
.partner-logo:hover {
  filter: grayscale(0%) opacity(1);
}
.footer-pdf-warning {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  position: relative;
}
.footer-pdf-warning p {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink3);
  margin: 0;
}
.footer-pdf-warning strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr !important;
  }
  .footer-partners-col {
    grid-column: span 2;
    border-top: 1px solid var(--border);
    padding-top: 28px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .footer-partners-logos {
    flex-shrink: 0;
  }
  .footer-pdf-warning {
    max-width: 480px;
  }
}
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Reorder: Newsletter → Mapa → Contacto (el mapa no queda enterrado al fondo) */
  .footer-newsletter-col { order: 1; }
  .footer-partners-col   { order: 2; }
  .footer-contact-col    { order: 3; }
  .footer-partners-col {
    grid-column: span 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer-partners-logos {
    width: 100%;
    justify-content: flex-start;
  }
  .footer-pdf-warning {
    max-width: 100%;
  }
}

/* ==========================================================================
   ANCADES — Tramites Custom High-Fidelity Styles
   ========================================================================== */

.tramite-page { padding: 30px 20px; max-width: 1200px; margin: 0 auto; display: flex; gap: 40px; }
.tramite-info { flex: 1.3; }
.tramite-info.full-width { flex: 1; max-width: 100%; }
.tramite-form-area { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-lg); transition: all 0.3s ease; }
.tramite-title { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--ink); margin-bottom: 24px; }
.tramite-content { font-size: 15px; color: var(--ink3); line-height: 1.6; margin-bottom: 30px; }
.tramite-reqs { background: var(--bg2); padding: 24px; border-radius: 12px; border-left: 4px solid var(--red); margin-bottom: 30px; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tramite-reqs h3 { margin-top: 0; font-family: var(--font-condensed); font-size: 16px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }

.form-group { margin-bottom: 24px; }
.form-label { display: block; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; color: var(--ink2); font-size: 12.5px; }
.form-control { width: 100%; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-base); color: var(--ink); font-size: 14px; transition: all 0.25s ease; outline: none; }
.form-control:focus { border-color: var(--red); background: var(--card); box-shadow: 0 0 0 3px var(--border-red); }

input[type="file"].form-control { padding: 10px 14px; font-size: 13px; cursor: pointer; }
.text-danger { color: var(--red); font-size: 12px; font-weight: 600; margin-top: 6px; display: block; }
.alert-success { background: var(--red-pale); color: var(--red-deep); padding: 15px 20px; border-radius: 8px; margin-bottom: 24px; border: 1px solid var(--border-red); font-size: 14px; font-weight: 600; }

.btn-submit { width: 100%; padding: 16px; font-family: var(--font-condensed); font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; border: none; background: var(--red); color: #fff; border-radius: 8px; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--shadow); }
.btn-submit:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-submit:active { transform: translateY(0); }

@media (max-width: 768px) {
  .tramite-page { flex-direction: column; padding: 40px 20px; }
}

/* Premium PDF Download Panel */
.a-download-panel { display: flex; flex-direction: column; gap: 16px; }
.a-download-title { font-family: 'Playfair Display', serif; font-size: 22px; margin-top: 0; margin-bottom: 4px; color: var(--ink); }
.a-download-desc { font-size: 13px; color: var(--ink3); line-height: 1.45; margin: 0; }
.a-pdf-list { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; }
.a-pdf-item { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; transition: all 0.25s ease; text-decoration: none; }
.a-pdf-item:hover { border-color: var(--red); background: var(--card); transform: translateY(-2px); box-shadow: var(--shadow); }
.a-pdf-details { display: flex; align-items: center; gap: 10px; }
.a-pdf-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--red-pale); color: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--border-red); }
.a-pdf-info h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--ink); margin: 0 0 2px 0; letter-spacing: 0.5px; text-align: left; }
.a-pdf-info p { font-size: 10.5px; color: var(--ink3); margin: 0; text-align: left; }
.a-pdf-download-arrow { color: var(--red); flex-shrink: 0; transition: all 0.25s ease; }
.a-pdf-item:hover .a-pdf-download-arrow { transform: translateX(3px); }

/* Checklist Panel */
.a-checklist-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 5px; }
.a-checklist-title { font-family: 'Barlow Condensed', sans-serif; font-size: 13.5px; font-weight: 700; text-transform: uppercase; color: var(--ink); margin-top: 0; margin-bottom: 10px; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
.a-checklist-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.a-checklist-item { font-size: 12px; color: var(--ink2); line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; }
.a-checklist-bullet { width: 16px; height: 16px; border-radius: 4px; background: var(--red-pale); color: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; border: 1px solid var(--border-red); font-size: 10px; font-weight: 700; }
.a-checklist-text { text-align: left; }

.a-instruction-card { background: var(--red-pale); border: 1.5px dashed var(--border-red); border-radius: 10px; padding: 14px; margin-top: 5px; }
.a-instruction-card h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--red); margin-top: 0; margin-bottom: 6px; letter-spacing: 0.5px; text-align: left; }
.a-instruction-card p { font-size: 11px; color: var(--ink2); line-height: 1.45; margin: 0; text-align: left; }

/* Custom High-Fidelity layout for Alta Nacimiento Registro Principal */
.a-alta-preconditions {
  background: var(--bg2);
  border-radius: 12px;
  padding: 16px;
  border-left: 4px solid var(--red);
  margin-bottom: 20px;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.a-alta-preconditions h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.a-alta-preconditions ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.a-alta-preconditions ul li {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.a-alta-preconditions ul li svg {
  color: var(--red);
  flex-shrink: 0;
  margin-top: 3px;
}

.a-alta-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.a-alta-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.a-alta-step-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
}
.a-alta-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red-pale);
  color: var(--red);
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--border-red);
}
.a-alta-step-content h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px 0;
  letter-spacing: 0.5px;
}
.a-alta-step-content p {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.4;
  margin: 0;
}

.a-alta-fees-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.a-alta-fee-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}
.a-alta-fee-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.a-alta-fee-card h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.a-alta-fee-card p {
  font-size: 11px;
  color: var(--ink3);
  margin: 0;
  line-height: 1.35;
}
.a-alta-fee-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.a-alta-fee-option-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.a-alta-fee-option-item span {
  font-size: 11px;
  color: var(--ink2);
  font-weight: 600;
}
.a-alta-fee-option-item strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--red);
  font-weight: 700;
}
.a-alta-fee-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--red);
  margin-top: 4px;
  line-height: 1;
}
.a-alta-fee-value span {
  font-family: 'Barlow', sans-serif;
  font-size: 10px;
  color: var(--ink3);
  font-weight: normal;
  text-transform: uppercase;
}

.a-alta-docs-checklist {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.a-alta-doc-item {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.45;
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.a-alta-doc-item:last-child { margin-bottom: 0; }
.a-alta-doc-bullet {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--red-pale);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid var(--border-red);
  font-size: 10px;
  font-weight: 700;
}
.a-alta-doc-content {
  text-align: left;
}
.a-alta-doc-conditional {
  background: var(--card);
  border-left: 3px solid var(--red);
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink3);
  line-height: 1.4;
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.a-alta-doc-conditional ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.a-alta-doc-conditional ul li {
  font-weight: 500;
}

.a-alta-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.a-alta-method-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  transition: all 0.25s ease;
}
.a-alta-method-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.a-alta-method-card.recommended {
  border: 1.5px solid var(--border-red);
  background: var(--red-pale);
}
.a-alta-method-card h5 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  margin: 4px 0 2px 0;
  letter-spacing: 0.5px;
}
.a-alta-method-card.recommended h5 { color: var(--red); }
.a-alta-method-card p {
  font-size: 10.5px;
  color: var(--ink3);
  margin: 0;
  word-break: break-all;
}

/* Premium Segment Toggle Switch */
.a-switch-segment {
  display: flex;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px;
  margin: 8px 0;
  max-width: 280px;
}
.a-switch-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 5px 12px;
  border-radius: 17px;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-align: center;
  outline: none;
}
.a-switch-btn.active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 2px 8px rgba(200, 36, 60, 0.25);
}
.a-switch-content {
  transition: all 0.3s ease;
}

/* Premium PDF Download Pills */
.a-pdf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 5px 12px;
  font-family: var(--font-condensed);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  text-decoration: none;
}
.a-pdf-pill:hover {
  border-color: var(--red);
  background: var(--red-pale);
  color: var(--red);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.a-pdf-pill svg {
  color: var(--red);
  flex-shrink: 0;
}

/* Botón de limpiar búsqueda premium */
.search-clear-btn {
  position: absolute;
  right: 56px; /* Ajuste para que quede al lado del botón de buscar (52px + margen) */
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--warm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  width: 28px;
  height: 28px;
}

.search-clear-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--red);
  transform: translateY(-50%) scale(1.08);
}

[data-theme="dark"] .search-clear-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.search-clear-btn svg {
  stroke-width: 2.5px;
  width: 14px;
  height: 14px;
  transition: stroke 0.2s;
}

.search-hero.active-mobile .search-clear-btn {
  right: 92px !important; /* Located just inside the right edge of the input (Cancelar 72px + gap 12px + margin 8px) */
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

.search-hero.active-desktop .search-clear-btn {
  right: 68px !important; /* Ajuste al lado del botón de búsqueda de escritorio activo que tiene un ancho de 64px */
}

/* FLUID SCALING PARA DISPOSITIVOS TIPO TABLET Y PORTÁTILES */
@media (max-width: 1200px) {
  .sec-title { font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important; }
}
@media (max-width: 1024px) {
  .hero { min-height: auto !important; height: auto !important; }
  .hero-left, .hero-right { height: auto !important; }
  .editorial-split-layout { gap: 24px !important; }
  .editorial-content-col .sec-title, .tramites-content .sec-title, .tramite-title { font-size: clamp(1.3rem, 2.5vw, 1.6rem) !important; margin-bottom: 12px !important; }
  .editorial-content-col .sec-body, .sec-body, .tramites-content p { font-size: 0.85rem !important; margin-bottom: 16px !important; line-height: 1.5 !important; }
  .editorial-stat-val { font-size: 1.4rem !important; }
  .sec-with-bg { padding-top: 24px !important; padding-bottom: 24px !important; }
  .page-wrap { padding-top: 24px !important; }
  .media-grid { gap: 12px !important; }
  /* Aquí iba ".mcard { aspect-ratio: 16/9 }", de un diseño de tarjeta anterior: la tarjeta
     entera quedaba con el alto de la foto y en móvil y tableta se cortaban la fecha y el
     título (quitada el 07/10/2026). */
  .mcard-cont { padding: 12px !important; }
  .mcard-tit { font-size: 0.8rem !important; margin-bottom: 4px !important; }
  .mcard-desc { font-size: 0.65rem !important; }
  .hero-left-btns .section-btn { min-height: 64px !important; }
  .hero-left-btns .section-btn .sbtn-text { font-size: 0.85rem !important; }
  .hero-left-btns .section-btn .sbtn-arrow { width: 48px !important; }
  .hero-left-btns .section-btn .sbtn-body { padding: 12px 56px 12px 14px !important; }
}

@media (max-width: 860px) {
  .editorial-split-layout { gap: 16px !important; }
  .editorial-content-col .sec-title, .tramites-content .sec-title, .tramite-title, .sec-title { font-size: clamp(1.1rem, 2vw, 1.3rem) !important; }
  .editorial-content-col .sec-body, .sec-body, .tramites-content p { font-size: 0.75rem !important; line-height: 1.4 !important; }
  .editorial-stat-val { font-size: 1.2rem !important; }
  .editorial-visual-col { padding: 16px !important; }
  .editorial-stat-lbl { font-size: 0.6rem !important; }
  .tramite-page { padding: 16px 12px !important; gap: 20px !important; }
  .tramite-form-area { padding: 16px !important; }
  .mcard-tit { font-size: 0.75rem !important; }
  .mega-modal { padding: 8px !important; align-items: flex-start !important; overflow-y: auto !important; }
  .mega-modal-dialog { margin: auto !important; }
  .mega-modal-header { padding: 12px 16px !important; }
  .mega-modal-body { padding: 16px !important; }
  .mega-modal-title { font-size: 1.2rem !important; }
  #tramite-modal .mega-modal-header { padding: 12px 16px !important; }
  #tramite-modal .mega-modal-body { padding: 16px !important; }
  .a-alta-preconditions { padding: 12px !important; margin-bottom: 12px !important; }
  .a-alta-preconditions h3 { font-size: 13px !important; margin-bottom: 6px !important; }
  .a-alta-preconditions ul li { font-size: 11px !important; }
  .a-alta-step-card { padding: 12px !important; }
  .a-alta-step-badge { width: 24px !important; height: 24px !important; font-size: 12px !important; }
  .hero-center { padding: 24px 16px !important; }
  .search-hero .search-input { font-size: 0.9rem !important; padding: 12px 16px !important; }
  .hero-left-btns { gap: 6px !important; padding: 12px !important; height: auto !important; }
  .hero-left-btns .section-btn { min-height: 48px !important; }
  .hero-left-btns .section-btn .sbtn-text { font-size: 0.75rem !important; }
  .hero-left-btns .section-btn .sbtn-label { font-size: 0.5rem !important; margin-bottom: 2px !important; }
  .hero-left-btns .section-btn .sbtn-arrow { width: 36px !important; font-size: 1rem !important; }
  .hero-left-btns .section-btn .sbtn-body { padding: 8px 44px 8px 12px !important; }
  .hero-left-btns .section-btn .sbtn-icon-wrap { width: 44px !important; }
  .section-btn-icon { width: 20px !important; height: 20px !important; }
  .noticia-item { gap: 8px !important; padding-bottom: 8px !important; margin-bottom: 8px !important; }
  .noticia-thumb { width: 40px !important; height: 40px !important; }
  .noticia-tit { font-size: 0.75rem !important; }
  
  /* Footer miniaturization for landscape mobile */
  .footer-col-title { font-size: 1rem !important; margin-bottom: 12px !important; }
  .footer-col-desc { font-size: 0.75rem !important; line-height: 1.4 !important; margin-bottom: 16px !important; }
  .footer-form-group { margin-bottom: 12px !important; }
  .footer-input { padding: 10px 14px !important; font-size: 0.75rem !important; }
  .footer-form-label { font-size: 0.65rem !important; margin-bottom: 4px !important; }
  .btn-registro { padding: 10px !important; font-size: 0.75rem !important; }
  .footer-contact-info { gap: 12px !important; }
  .contact-item { font-size: 0.75rem !important; }
  .contact-icon { width: 20px !important; height: 20px !important; }
  .footer-bottom { margin-top: 24px !important; padding-top: 16px !important; }
}

/* ================================================================
   NUEVAS FUNCIONALIDADES — Junio 2026
   ================================================================ */

/* --- Copa CDE: mini-links dentro del botón de Competición --- */
.sbtn-copa-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.sbtn-copa-tag {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
  flex-shrink: 0;
}
.sbtn-copa-link {
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  transition: all 0.2s;
  flex-shrink: 0;
}
.sbtn-copa-link:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
.sbtn-copa-sep {
  font-size: 0.48rem;
  color: rgba(255,255,255,0.35);
}

/* --- Catálogo Reproductores: shimmer dorado elegante --- */
@keyframes catalogoShimmer {
  0%   { left: -80%; }
  18%  { left: 160%; }
  100% { left: 160%; }
}
.catalogo-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 28%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(235,222,47,0) 0%,
    rgba(235,222,47,0.32) 50%,
    rgba(235,222,47,0) 100%
  );
  transform: rotate(25deg);
  animation: catalogoShimmer 4s infinite ease-in-out;
  pointer-events: none;
}
.catalogo-btn:hover {
  box-shadow: 0 8px 28px rgba(235,222,47,0.35) !important;
  transform: scale(1.06) translateY(-2px) !important;
}

/* --- Bloque Copa CDE en la sección Competición --- */
.copa-cde-block {
  margin-top: 24px;
  background: linear-gradient(135deg, #1A1614 0%, #2E2926 100%);
  border: 1px solid rgba(212,175,55,0.45);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.copa-cde-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-condensed);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #D4AF37;
  margin-bottom: 12px;
}
.copa-cde-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.copa-cde-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 6px;
  color: rgba(255,255,255,0.88);
  font-family: var(--font-condensed);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.25s;
}
.copa-cde-btn:hover {
  background: rgba(212,175,55,0.18);
  border-color: #D4AF37;
  color: #D4AF37;
  transform: translateY(-1px);
}

/* --- Botón X del buscador (misma estética que modales) --- */
.search-close-x {
  display: none;            /* oculto por defecto */
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1100 !important;
  background: var(--red);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(200,36,60,0.35);
  transition: all 0.25s ease;
  flex-shrink: 0;
}
.search-hero.active-desktop .search-close-x,
.search-hero.active-mobile  .search-close-x {
  display: flex;
}
.search-close-x:hover {
  background: var(--red-deep);
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 4px 16px rgba(200,36,60,0.5);
}

/* --- Animación counter-val (stats que cuentan hasta el valor) --- */
.counter-val {
  display: inline-block;
}

/* ================================================================
   TABLET & SMARTPHONE RESPONSIVE FIX — Hero 3-columnas
   ----------------------------------------------------------------
   DIAGNÓSTICO:
   El hero usa grid-template-columns: 280px 1fr 280px fijo.
   En un iPad portrait de 768px la columna central solo recibe
   768 - 560 = 208px → el buscador y el título quedan destrozados.
   No existía ningún breakpoint que corrigiera la cuadrícula entre
   los 768px y el escritorio.

   SOLUCIÓN:
   · Tablet portrait 768-1023px → hero de 2 columnas (botones +
     buscador). La columna de noticias se retira; es accesible más
     abajo en la página. El centro disponible pasa de 208px a ~544px.
   · Smartphone < 640px → botones del hero en grid 2×2 para reducir
     la altura vertical y mejorar la usabilidad táctil.
   ================================================================ */

/* Margen lateral para que el hero no quede pegado al borde en
   tablets y smartphones (no afecta al hero-center ni las secciones
   con page-wrap, que ya tienen su propio padding). */
@media (max-width: 1023px) {
  .hero-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---- TABLET PORTRAIT (768px – 1023px) ---- */
/* iPad, iPad Air, Samsung Tab S8, Xiaomi Pad, etc. en VERTICAL.
   orientation:portrait excluye iPhones en landscape (misma franja de anchura).
   Se pasa a 2 columnas: accesos directos + buscador central.
   La columna de noticias desaparece visualmente (están en la sección
   de actualidad más abajo en el scroll). */
@media (max-width: 1023px) and (min-width: 768px) and (orientation: portrait) {
  .hero {
    grid-template-columns: 200px 1fr !important;
    min-height: 380px !important;
  }
  .hero-right {
    display: none !important;
  }
  .hero-center {
    padding: 32px 24px !important;
  }
  .hero-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
  }
  .hero-sub {
    font-size: 0.88rem !important;
    margin-bottom: 20px !important;
  }
  /* Buscador ocupa todo el ancho disponible del centro */
  .search-hero {
    max-width: 100% !important;
  }
  .search-hints {
    max-width: 100% !important;
    gap: 4px;
  }
  .hint-pill {
    font-size: 0.68rem;
    padding: 4px 10px;
  }
}

/* ================================================================
   LANDING — COMPONENTES MIGRADOS DEL BLADE
   Todo este CSS estaba en bloques <style> embebidos en landing.blade.php.
   Se centraliza aquí para facilitar el mantenimiento.
   Las únicas reglas que permanecen en el blade son las background-image
   que dependen de la función asset() de Laravel.
   ================================================================ */

/* --- Logos de socios / patrocinadores --- */
.footer-partners-logos img { filter: none !important; opacity: 1 !important; transition: all 0.3s ease !important; }
.footer-partners-logos a { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.footer-partners-logos a:hover { transform: scale(1.06) translateY(-2px) !important; box-shadow: 0 10px 20px rgba(0,0,0,0.12) !important; }
.hero-sponsor-capsule { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: var(--shadow-sm) !important; }
.hero-sponsor-capsule:hover { transform: scale(1.05) translateY(-1px) !important; box-shadow: 0 8px 16px rgba(0,0,0,0.06) !important; border-color: var(--red) !important; }
.hero-sponsor-capsule img { filter: none !important; opacity: 1 !important; }
.sponsor-card img { filter: none !important; opacity: 1 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.sponsor-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.sponsor-card:hover { transform: scale(1.06) translateY(-4px) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important; border-color: var(--red) !important; }
.partner-logo { filter: none !important; opacity: 1 !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.partner-logo:hover { transform: scale(1.06) translateY(-2px) !important; }

/* --- Modales: estructura del pseudo-elemento watermark (background-image queda en blade) --- */
.a-card-wizard, .a-unified-card, .mega-modal-dialog { position: relative !important; overflow: hidden !important; }
.a-card-wizard::before, .a-unified-card::before, .mega-modal-dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Al ensanchar la tarjeta, "cover" recorta mucho mas la silueta (se ve un 27%
     en vez del 68% de antes), asi que se sube la opacidad para compensar. */
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.mega-modal-dialog::before { opacity: 0.035 !important; }
/* Solo el modal del tramite se ensancho a 1280px, asi que solo el recorta mas la
   silueta y solo el necesita mas opacidad. Los demas modales se quedan como estaban. */
#tramite-modal .mega-modal-dialog::before { opacity: 0.055 !important; }
.a-card-wizard > *, .a-unified-card > *, .mega-modal-dialog > * { position: relative; z-index: 1; }
#modal-lg.show-asoc .mega-group-card.asoc-group,
#modal-lg.show-lg .mega-group-card.lg-group {
  background: rgba(252, 251, 250, 0.82) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(26, 22, 20, 0.08) !important;
  border: 1.5px solid rgba(26, 22, 20, 0.1) !important;
}
[data-theme="dark"] #modal-lg.show-asoc .mega-group-card.asoc-group,
[data-theme="dark"] #modal-lg.show-lg .mega-group-card.lg-group {
  background: rgba(30, 26, 24, 0.8) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(253, 252, 250, 0.1) !important;
}

/* --- Galería Modal (gm-*) --- */
.gm-container { display: flex; flex-direction: row; width: 100%; height: 100%; overflow: hidden; }
.gm-left-col { width: 35%; border-right: 1px solid rgba(26,22,20,0.08); padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; box-sizing: border-box; height: 100%; background: transparent; }
.gm-right-col { width: 65%; padding: 1.5rem; overflow-y: auto; background: rgba(245,241,235,0.4); box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 1.5rem; }
.gm-cover-wrap { width: 100%; background: #F5F1EB; border-radius: 12px; border: 1px solid rgba(26,22,20,0.06); margin-bottom: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,0.03); flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3/2; padding: 4px; box-sizing: border-box; }
.gm-cover-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.gm-meta { font-family: var(--font-condensed), 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; color: var(--red); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; margin-top: 12px; }
.gm-title { font-family: var(--font-display), 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 600; color: var(--ink); line-height: 1.25; margin-bottom: 12px; margin-top: 0; }
.gm-desc { font-family: var(--font-display), 'Cormorant Garamond', serif; font-style: italic; font-size: 0.92rem; color: var(--ink-light); line-height: 1.45; margin: 0; }
.gm-section-title { font-family: var(--font-condensed), 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; color: var(--ink-light); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; margin-top: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(26,22,20,0.06); display: flex; align-items: center; gap: 6px; }
.gm-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gm-photo-item { position: relative; aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; background: #F5F1EB; border-radius: 8px; border: 1px solid rgba(26,22,20,0.08); overflow: hidden; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: all 0.3s ease; }
.gm-photo-item:hover { border-color: var(--red); }
.gm-photo-item img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; }
.gm-photo-item:hover img { transform: scale(1.03); }
.gm-photo-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,22,20,0.15); opacity: 0; transition: opacity 0.25s; }
.gm-photo-item:hover .gm-photo-overlay { opacity: 1; }
.gm-photo-badge { background: rgba(255,255,255,0.95); color: var(--ink); font-family: var(--font-condensed), 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; padding: 6px 12px; text-transform: uppercase; letter-spacing: 0.8px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.gm-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.gm-video-card { background: #fff; border: 1px solid rgba(26,22,20,0.08); padding: 10px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); display: flex; flex-direction: column; gap: 8px; }
.gm-video-title { font-family: var(--font-display), 'Cormorant Garamond', serif; font-size: 0.92rem; font-weight: 600; color: var(--ink); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-video-player { aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; background: #000; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.gm-video-player iframe { width: 100%; height: 100%; border: none; }

@media (max-width: 768px) {
  .gm-container { flex-direction: column; overflow-y: auto; }
  .gm-left-col { width: 100%; height: auto; border-right: none; border-bottom: 1px solid rgba(26,22,20,0.08); overflow-y: visible; padding: 1.25rem; }
  .gm-right-col { width: 100%; height: auto; overflow-y: visible; padding: 1.25rem; }
  .gm-photo-grid { grid-template-columns: repeat(3, 1fr); }
  .gm-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gm-left-col, .gm-right-col { padding: 1rem; }
  .gm-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gm-video-grid { grid-template-columns: 1fr; gap: 12px; }
  .glb-nav-btn { width: 40px; height: 40px; }
  .glb-nav-btn-prev { left: 0.5rem; }
  .glb-nav-btn-next { right: 0.5rem; }
}
[data-theme="dark"] .gm-left-col { border-right-color: rgba(253,252,250,0.08); }
[data-theme="dark"] .gm-right-col { background: rgba(30,26,24,0.4); }
[data-theme="dark"] .gm-cover-wrap { background: #1E1A18; border-color: rgba(253,252,250,0.06); }
[data-theme="dark"] .gm-title { color: #F5F1EB; }
[data-theme="dark"] .gm-desc { color: rgba(253,252,250,0.7); }
[data-theme="dark"] .gm-section-title { border-bottom-color: rgba(253,252,250,0.06); color: rgba(253,252,250,0.6); }
[data-theme="dark"] .gm-photo-item { background: #1E1A18; border-color: rgba(253,252,250,0.08); }
[data-theme="dark"] .gm-video-card { background: #1A1614; border-color: rgba(253,252,250,0.08); }
[data-theme="dark"] .gm-video-title { color: #F5F1EB; }

/* --- Lightbox (glb-*) --- */
.glb-modal { position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(10,8,8,0.96); z-index: 10000; display: none; flex-direction: column; justify-content: space-between; padding: 1.5rem; box-sizing: border-box; user-select: none; -webkit-user-select: none; }
.glb-modal.active { display: flex; }
.glb-header { width: 100%; display: flex; justify-content: space-between; align-items: center; color: #fff; z-index: 10; }
.glb-counter { font-family: var(--font-condensed), 'Barlow Condensed', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; opacity: 0.75; }
.glb-actions { display: flex; align-items: center; gap: 12px; }
.glb-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.25s, transform 0.2s; }
.glb-btn:hover { background: rgba(255,255,255,0.18); transform: scale(1.05); }
.glb-btn svg { width: 20px; height: 20px; }
.glb-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; position: relative; margin: 1.5rem 0; overflow: hidden; }
.glb-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: background 0.25s, transform 0.2s; }
.glb-nav-btn:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.05); }
.glb-nav-btn-prev { left: 1.5rem; }
.glb-nav-btn-next { right: 1.5rem; }
.glb-img-wrap { width: 100%; height: 100%; max-width: 85vw; max-height: 75vh; display: flex; align-items: center; justify-content: center; }
.glb-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,0.5); transition: transform 0.3s ease-out; }
.glb-footer { width: 100%; text-align: center; color: rgba(255,255,255,0.8); font-size: 0.95rem; font-family: var(--font-display), 'Cormorant Garamond', serif; font-style: italic; padding: 8px 0; }

/* --- Hero: estructura (background-image se inyecta desde blade con asset()) --- */
.hero { position: relative !important; overflow: hidden !important; border-radius: 12px; }
.hero::before { content: "" !important; position: absolute !important; inset: 0 !important; background-size: cover !important; background-position: center 30% !important; background-repeat: no-repeat !important; opacity: 0.45 !important; pointer-events: none !important; z-index: 0 !important; transition: opacity 0.3s ease !important; }
[data-theme="dark"] .hero::before { opacity: 0.20 !important; }
.hero-center { background: transparent !important; z-index: 1 !important; }
.hero-left, .hero-right { z-index: 1 !important; }
.hero-silhouette { display: none !important; }

/* --- Patrocinadores bajo el buscador: que no estiren la columna central ---
   Los slides del carrusel miden 120px fijos, asi que su "min-content" (504px con
   el max-width del blade) hacia que la columna 1fr del grid no pudiera encoger:
   en movil la central pasaba de 349 a 544px y arrastraba al buscador y a los
   botones "Frecuentes" fuera de la pantalla. Con min-width:0 el grid ya puede
   encoger y el carrusel recorta por su propio overflow. */
.hero-center { min-width: 0; }
/* margin-top: aire entre las pastillas de "Frecuentes" y los patrocinadores (antes 14px,
   pedido del cliente el 24/09/2026). */
.hero-center-sponsors { min-width: 0; max-width: 100%; margin-top: 28px; }
.hero-center-sponsors .hero-sponsors-swiper { max-width: 100% !important; }

/* --- Fila de patrocinadores (4 o menos): mismo ancho que el carrusel ---
   Antes cada tarjeta medía 130x46 fijos, y con 3 patrocinadores quedaban tres
   tarjetitas perdidas bajo un buscador de 540px (queja del cliente y del
   patrocinador). Ahora la fila mide lo mismo que el carrusel (504px) y las
   tarjetas se reparten ese ancho con la altura proporcional (aspect-ratio):
   con 4 miden 120x46, lo mismo que un slide del carrusel, así que al entrar el
   quinto y saltar el carrusel no hay cambio de tamaño. Con 3 quedan en 155x59,
   con 2 en 242x93, y una sola no pasa de 242px. En pantallas estrechas nunca
   bajan de los 46px de alto que tenían. El logo va con object-fit: contain, así
   que crece con la tarjeta sin deformarse. Separación entre tarjetas: 20px en
   escritorio y tablet (el cliente pidió más aire el 24/09/2026), 12px en móvil. */
.hero-sponsors-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 504px;
  margin: 0 auto;
}
.hero-sponsor-card {
  flex: 1 1 0;
  min-width: 60px;
  max-width: 242px;
  min-height: 46px;
  aspect-ratio: 120 / 46;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.hero-sponsor-card:hover { transform: scale(1.05); }
.hero-sponsor-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 767px) {
  .hero-sponsors-row { gap: 8px 12px; }
}
/* Portador del texto alternativo de la imagen del hero (se escribe en el CMS).
   Va vacio y sin fondo propio: la foto la pinta .hero::before, que al ser un
   pseudo-elemento no puede llevar aria-label. No debe capturar el raton ni
   taparle nada al buscador. */
.hero-bg-alt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
#gallery-modal .mega-modal-dialog::before { opacity: 0.16 !important; }

/* --- Tipografía Quill (modales de noticias) --- */
.quill-content p { margin-bottom: 1.2em; line-height: 1.8; }
.quill-content strong, .quill-content b { font-weight: 700; color: #1A1614; }
.quill-content em, .quill-content i { font-style: italic; }
.quill-content u { text-decoration: underline; }
.quill-content h1, .quill-content h2, .quill-content h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: #1A1614; margin-top: 1.5em; margin-bottom: 0.5em; }
.quill-content h1 { font-size: 2.25rem; }
.quill-content h2 { font-size: 1.875rem; }
.quill-content h3 { font-size: 1.5rem; }
.quill-content ul { list-style-type: disc; margin-left: 1.5em; margin-bottom: 1.2em; }
.quill-content ol { list-style-type: decimal; margin-left: 1.5em; margin-bottom: 1.2em; }
.quill-content li { margin-bottom: 0.5em; }
.quill-content a { color: #c2141a; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity 0.2s; }
.quill-content a:hover { opacity: 0.8; }
.quill-content blockquote { border-left: 4px solid #c2141a; padding-left: 1rem; font-style: italic; color: #555; margin-bottom: 1.2em; }

/* --- Swiper paginación hero-right --- */
.right-pagination .swiper-pagination-bullet { background: rgba(255,255,255,0.6); opacity: 1; width: 6px; height: 6px; }
.right-pagination .swiper-pagination-bullet-active { background: #D4AF37; }

/* --- Hover noticia-item en hero-right --- */
.hero-right .noticia-item { padding: 12px; margin: 0 -12px 12px -12px; border-radius: 8px; border-bottom: 1px solid transparent !important; transition: background-color 0.2s, transform 0.2s; }
.hero-right .noticia-item:hover { background-color: rgba(184,34,43,0.04); transform: translateX(4px); }

/* --- Botones CTA premium y hover del col visual editorial --- */
.sbtn-arrow { cursor: pointer; }
.premium-cta-btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.premium-cta-btn:hover { transform: scale(1.06) translateY(-1px) !important; box-shadow: 0 8px 30px rgba(200,36,60,0.6), 0 0 20px rgba(253,215,154,0.4) !important; filter: brightness(1.08); }
.editorial-visual-col:hover .visual-bg-img { transform: scale(1.04); }
.editorial-visual-col:hover .subtle-search-bar { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.25) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important; transform: translate(-50%, -2px) !important; }
.editorial-visual-col:hover .subtle-search-bar svg { color: var(--red) !important; transform: scale(1.1) rotate(5deg); }

.concurso-pill-btn:hover { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.25) !important; box-shadow: 0 12px 30px rgba(0,0,0,0.3) !important; transform: translateY(-2px) !important; }

/* --- Botón Campeonato premium --- */
.campeonato-premium-btn { display: flex; align-items: center; background: linear-gradient(135deg, #1f1b1a 0%, #2a2421 100%); border: 1px solid #D4AF37; border-radius: 12px; padding: 16px 20px; margin-top: 16px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.15); position: relative; overflow: hidden; }
.campeonato-premium-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(212,175,55,0.1) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; }
.campeonato-premium-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(212,175,55,0.25); }
.campeonato-premium-btn:hover::before { opacity: 1; }
.cp-icon { font-size: 28px; color: #D4AF37; margin-right: 16px; position: relative; z-index: 2; }
.cp-text { flex-grow: 1; position: relative; z-index: 2; }
.cp-title { display: block; font-family: var(--font-condensed); font-size: 11px; font-weight: 700; color: #D4AF37; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.cp-subtitle { display: block; font-family: var(--font-base); font-size: 15px; font-weight: 600; color: #fff; line-height: 1.2; }
.cp-arrow { font-size: 20px; color: #D4AF37; position: relative; z-index: 2; transition: transform 0.3s ease; }
.campeonato-premium-btn:hover .cp-arrow { transform: translateX(4px); }

/* --- @keyframes searchPulse (antes en template literal JS del buscador) --- */
@keyframes searchPulse {
  0%   { transform: scale(1);    opacity: 0.9; }
  50%  { transform: scale(1.05); opacity: 1;   }
  100% { transform: scale(1);    opacity: 0.9; }
}

/* ---- HERO-CENTER: fondo opaco en mobile (portrait & landscape <1024px) ----
   El inline-style del blade lo pone transparent !important con especificidad
   0-1-0. Usando .hero .hero-center subimos a 0-2-0 y lo sobreescribimos. */
@media (max-width: 767px) {
  /* Foto hero en portrait móvil: opacidad baja para que se vea pero sin
     quitar legibilidad al texto (el centro está al 93% blanco, la zona de
     botones al 40% deja pasar más la imagen). */
  .hero::before { opacity: 0.22 !important; }
  .hero .hero-center {
    background: rgba(253, 252, 250, 0.93) !important;
    padding: 28px 20px !important;
    border-radius: 12px 12px 0 0 !important;
  }
  [data-theme="dark"] .hero .hero-center {
    background: rgba(22, 20, 19, 0.93) !important;
  }
  /* Asegurar que los 4 botones del hero-left sean siempre visibles */
  .hero .hero-left {
    height: auto !important;
    border-top: 1px solid var(--border) !important;    /* separa botones del buscador */
    border-bottom: none !important;                    /* hero-right oculto: sin línea inferior */
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
  .hero .hero-left-btns {
    flex: none !important;
    height: auto !important;
    gap: 8px !important;
    padding: 10px 10px 10px !important;
  }
  .hero .hero-left-btns .section-btn {
    flex: 0 0 auto !important;
    min-height: 56px !important;
  }
  .hero .hero-left-btns .sbtn-theme-ico {
    display: none !important;
  }
  /* Los text-shadow blancos eran para leer sobre la foto de fondo.
     Sin imagen (opacity:0), ese halo blanco hace el texto invisible sobre fondo blanco. */
  .hero-eyebrow { text-shadow: none !important; }
  .hero-title   { text-shadow: none !important; }
  .hero-sub     { text-shadow: none !important; }
  /* Portrait móvil: ocultar noticias — la sección "Actualidad" ya las muestra más abajo */
  .hero-right { display: none !important; }
}

/* ---- MODALES: mejoras para mobile (<768px) ---- */
@media (max-width: 767px) {
  .mega-modal {
    padding: 0 !important;
    align-items: flex-end !important; /* aparece desde abajo en móvil */
  }
  .mega-modal-dialog {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
  }
  .mega-modal-header {
    padding: 14px 18px !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .mega-modal-title {
    font-size: 1.15rem !important;
  }
  .mega-modal-body {
    padding: 16px !important;
    gap: 16px !important;
  }
  /* Tramite modal full-height en mobile */
  #tramite-modal .mega-modal-dialog {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
  }
  #tramite-modal .mega-modal-body {
    max-height: calc(92vh - 60px) !important;
    overflow-y: auto !important;
  }
  /* Botones del wizard de trámite: full-width en mobile */
  .a-card-wizard .btn-submit,
  .a-unified-card .btn-submit {
    font-size: 13px !important;
    padding: 14px !important;
  }
}

.rotate-device-prompt { display: none !important; }

/* ================================================================
   SMARTPHONE LANDSCAPE — iPhone 12, 12 XR, 14 Pro, Android y similares
   Breakpoint: ancho ≤ 1023px + orientación landscape + alto ≤ 600px.
   Captura todos los smartphones en horizontal (alto 360–430px) sin
   afectar a tablets en landscape (iPad alto ≥ 768px).
   ================================================================ */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 600px) {

  /* Seguridad: ocultar rotate-prompt en landscape */
  .rotate-device-prompt { display: none !important; }

  /* Hero: columna única con solo el buscador — máxima utilidad en poco alto */
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    height: auto !important;
  }
  .hero-left  { display: none !important; }
  .hero-right { display: none !important; }

  /* Hero-center: fondo sólido para que el texto sea legible sin depender
     de que la imagen de fondo cargue o tenga suficiente contraste */
  .hero .hero-center {
    background: rgba(253, 252, 250, 0.97) !important;
    padding: 16px 24px 14px !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }
  [data-theme="dark"] .hero .hero-center {
    background: rgba(22, 20, 19, 0.97) !important;
  }

  /* Imagen de fondo muy sutil en landscape para no distraer */
  .hero::before { opacity: 0.12 !important; }

  /* Tipografía compacta para la altura reducida del viewport */
  .hero-eyebrow {
    margin-bottom: 5px !important;
    font-size: 0.5rem !important;
    gap: 8px !important;
  }
  .hero-title {
    font-size: clamp(1.2rem, 2.8vw, 1.7rem) !important;
    margin-bottom: 6px !important;
    line-height: 1.1 !important;
  }
  .hero-sub {
    font-size: 0.78rem !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
    max-width: 600px !important;
  }
  .search-hero { margin-bottom: 0 !important; }

  /* Ocultar pills de accesos frecuentes para ahorrar altura */
  .search-hints { display: none !important; }

  /* Navbar compacta en landscape */
  .navbar { min-height: auto !important; }
  .nav-inner { height: 44px !important; padding: 0 16px !important; }
  .nav-logo img { height: 30px !important; }
}

/* FIXES MODO OSCURO (INVERSO) */
[data-theme="dark"] .nav-logo img {
  background: #FFF;
  border-radius: 8px;
  padding: 4px;
  clip-path: none;
  margin-left: 0;
}

[data-theme="dark"] .sponsor-card:nth-child(3),
[data-theme="dark"] .sponsor-card:nth-child(5) {
  background: #FFF !important;
  border-color: #FFF !important;
}

[data-theme="dark"] .asoc-nav-btn {
  color: #000 !important;
}

[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-sub,
[data-theme="dark"] .hero-eyebrow {
  color: #FDFCFA !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- Texto de propiedad: overlay HTML sobre la imagen hero ---
   Reemplaza el texto incrustado en el JPG: siempre visible sin
   depender del recorte que haga background-size:cover. */
.hero-copyright-overlay {
  position: absolute;
  bottom: 8px;
  right: 14px;
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-condensed), 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26, 22, 20, 0.38);
  text-shadow: 0 0 8px rgba(255,255,255,0.95), 0 0 4px rgba(255,255,255,0.8);
  line-height: 1;
}
[data-theme="dark"] .hero-copyright-overlay {
  color: rgba(253, 252, 250, 0.4);
  text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 0 4px rgba(0,0,0,0.7);
}
@media (max-width: 767px) {
  /* En móvil portrait el overlay queda sobre los botones rojos:
     texto blanco con sombra oscura para leer contra cualquier fondo. */
  .hero-copyright-overlay {
    color: rgba(255, 255, 255, 0.70) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.75) !important;
  }
}

/* --- Crédito de foto en visual-col de secciones (mismo estilo discreto que hero) --- */
.sec-copyright-overlay {
  position: absolute;
  bottom: 8px;
  right: 12px;
  z-index: 4;
  pointer-events: none;
  font-family: var(--font-condensed), 'Barlow Condensed', sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 0 6px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.7);
  line-height: 1;
}
/* La regla ".editorial-visual-col > *:not(.visual-bg-img):not(.visual-overlay)"
   de mas arriba suma 3 clases de especificidad (cada :not() cuenta la suya) y le
   ganaba: el credito se quedaba en position:relative, colocado en medio de la
   tarjeta en vez de en su esquina. Con !important queda anclado sin depender de
   cuantas clases tenga la otra regla. */
.editorial-visual-col > .sec-copyright-overlay {
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
  left: auto !important;
  top: auto !important;
  z-index: 4 !important;
}

/* --- MODAL DE RESULTADOS: layout responsive --- */
@media (max-width: 767px) {
  /* Reducir padding lateral de las vistas internas */
  #modal-resultados #resultados-vista-concursos > div:first-child,
  #modal-resultados #resultados-vista-pruebas > div:first-child,
  #modal-resultados #resultados-vista-clasificacion > div:first-child {
    padding: 12px 16px !important;
  }
  #modal-resultados #resultados-concursos-list,
  #modal-resultados #resultados-pruebas-list {
    padding: 16px !important;
  }
  /* Cabecera de clasificación: apilar título y botón PDF */
  #modal-resultados #resultados-vista-clasificacion > div:first-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  #modal-resultados #resultados-btn-pdf {
    font-size: 11px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    justify-content: center !important;
  }
  /* Cabecera de pruebas: título más pequeño */
  #resultados-prueba-titulo,
  #resultados-concurso-titulo {
    font-size: 1rem !important;
  }
  /* Tabla: fuente más compacta y celdas menos espaciadas */
  #resultados-tabla-head th,
  #resultados-tabla-body td {
    padding: 8px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}

/* --- CALCULADORA DE TARIFAS --- */

/* El dialog es flex-column para que el ticket quede siempre pegado abajo,
   independientemente del tamaño del contenido o del viewport. */
#tarifas-modal .mega-modal-dialog {
  display: flex !important;
  flex-direction: column !important;
}
/* El body ocupa todo el espacio disponible entre header y ticket, y scrollea. */
#tarifas-modal .mega-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  max-height: none !important;
}
/* Limitar altura del dialog en tablets/phones donde ≤767px no aplica */
@media (max-width: 860px) {
  #tarifas-modal .mega-modal-dialog { max-height: 92vh !important; }
}
/* Landscape smartphone: altura muy reducida — body scrollea en ~200px pero el ticket siempre es visible */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 600px) {
  #tarifas-modal .mega-modal-dialog { max-height: 90vh !important; }
}
/* En móvil portrait: ticket compacto */
@media (max-width: 600px) {
  #tarifas-modal .mega-modal-dialog > div:last-child {
    padding: 8px 12px !important;
  }
  #tarifas-modal .mega-modal-dialog > div:last-child > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  #tarifas-modal .mega-modal-dialog > div:last-child > div > div:last-child {
    text-align: left !important;
    padding: 6px 10px !important;
  }
  #tarifas-modal #calc-total-ancades,
  #tarifas-modal #calc-total-vet {
    font-size: 16px !important;
  }
  #tarifas-modal #calc-total-general {
    font-size: 20px !important;
  }
}

.tarifa-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s;
}
.tarifa-label:hover {
  background: var(--card);
}
.tarifa-check {
  margin-top: 3px;
  accent-color: var(--red);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.tarifa-text {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.tarifa-precios {
  display: block;
  font-size: 11px;
  color: var(--warm);
  font-weight: 600;
  margin-top: 2px;
}
.tarifa-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-base);
  color: var(--ink);
  background: white;
  outline: none;
}
.tarifa-select:focus {
  border-color: var(--red);
}

/* ==========================================================================
   CORRECCIONES MÓVIL — Modal LG/Asoc split-screen + Patrocinadores
   ========================================================================== */

/* --- MODAL #modal-lg: colapsar a columna única en portrait móvil --- */
@media (max-width: 767px) {
  /* El dialog pasa a ser scrollable (anula overflow:hidden inline) */
  #modal-lg .mega-modal-dialog {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 92vh !important;
  }

  /* Grid de dos columnas → columna única */
  #modal-lg .mega-modal-body {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  /* Panel visual izquierdo → banda de cabecera compacta */
  #modal-lg #modal-visual-panel {
    min-height: 150px !important;
    max-height: 190px !important;
    padding: 20px !important;
  }
  #modal-lg #modal-visual-title {
    font-size: 1.5rem !important;
    margin: 0 !important;
  }
  #modal-lg #modal-visual-desc {
    font-size: 12px !important;
    margin-top: 6px !important;
    max-width: 100% !important;
  }
  #modal-lg #modal-visual-tag {
    font-size: 10px !important;
  }

  /* Columna derecha de contenido: padding compacto */
  #modal-lg .modal-right-content {
    padding: 20px 16px 24px !important;
    justify-content: flex-start !important;
  }

  /* Cuadrícula interna de 3 columnas (Libro Genealógico) → columna única */
  #modal-content-lg > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Botones de acción del modal LG: apilar verticalmente */
  #modal-content-lg > div:last-child {
    flex-direction: column !important;
  }
  #modal-content-lg > div:last-child a {
    min-width: 100% !important;
    justify-content: center !important;
  }

  /* Equipo LG: cuadrícula de 2 miembros → columna única */
  #modal-content-equipo-lg > div:last-child > div:last-child {
    grid-template-columns: 1fr !important;
  }

  /* Botón cerrar: posición fija en esquina superior derecha del viewport */
  #modal-lg .modal-lg-close-wrap {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10002 !important;
  }
}

/* --- MODAL #modal-lg: landscape móvil (pantalla muy baja) --- */
@media (max-height: 500px) and (max-width: 1024px) {
  #modal-lg .mega-modal-dialog {
    overflow-y: auto !important;
    max-height: 96vh !important;
  }
  #modal-lg .mega-modal-body {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  #modal-lg #modal-visual-panel {
    min-height: 100px !important;
    max-height: 120px !important;
    padding: 12px 16px !important;
  }
  #modal-lg #modal-visual-title {
    font-size: 1.15rem !important;
  }
  #modal-lg #modal-visual-desc {
    display: none !important;
  }
  #modal-lg .modal-right-content {
    padding: 14px 16px !important;
  }
  #modal-lg .modal-lg-close-wrap {
    position: fixed !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10002 !important;
  }
}


/* --- Botón «FINAL ANCADES» de la sección Competición (22/09/2026) ---
   Es lo más importante de la sección para ANCADES y tiene que destacar sobre el reglamento, que
   es oscuro: amarillo corporativo con texto oscuro y el mismo reflejo que el botón de Alta de
   asociados (keyframes `shimmer`, definidos arriba). Los colores van aquí y no en línea en la
   plantilla, porque un estilo en línea con !important no se puede sobrescribir. El selector lleva
   #competicion para ganar a .editorial-btn-primary (rojo) y al brillo rojo de
   .premium-cta-btn:hover. Quien pide menos movimiento en su sistema no ve el reflejo. */
#competicion .final-ancades-btn {
  background: linear-gradient(135deg, #F3E75A 0%, #EBDE2F 55%, #D8CA22 100%) !important;
  color: #1A1614 !important;
  border: 1.5px solid #C8BC20 !important;
  box-shadow: 0 4px 18px rgba(235, 222, 47, 0.35) !important;
}
#competicion .final-ancades-btn:hover {
  background: linear-gradient(135deg, #F6EC6E 0%, #EBDE2F 55%, #D8CA22 100%) !important;
  color: #1A1614 !important;
  box-shadow: 0 8px 28px rgba(235, 222, 47, 0.55), 0 0 18px rgba(235, 222, 47, 0.35) !important;
}
#competicion .final-ancades-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 30%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  animation: shimmer 4.5s infinite ease-in-out;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #competicion .final-ancades-btn::after {
    animation: none;
    display: none;
  }
}