/* ═══════════════════════════════════════════════
   FRECUENCIA BOCA — interior.css
   Shell compartido por las páginas interiores
   (Nosotros, Transmisiones, Boca Info, Contacto, 404)
   ═══════════════════════════════════════════════ */

.page-wrap {
  position: relative;
  z-index: 1;
  padding-bottom: 90px;
}

/* ── HERO INTERIOR ── */
.hero-int {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--nav-h) + 64px);
  padding-bottom: 56px;
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}
body.partido-activo .hero-int { padding-top: calc(var(--nav-h) + 64px); }

.hero-int-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 28%;
  z-index: 0;
  transform: scale(1.02);
}
.hero-int-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,16,42,0.94) 0%, rgba(3,16,42,0.78) 48%, rgba(3,16,42,0.42) 100%),
    linear-gradient(0deg, rgba(3,16,42,0.98) 0%, rgba(3,16,42,0.25) 55%, rgba(3,16,42,0.35) 100%);
}
.hero-int-inner {
  position: relative;
  z-index: 2;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--grid-pad);
  width: 100%;
}
.hero-int-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--blanco);
  max-width: 15ch;
}
.hero-int-title em {
  font-style: normal;
  display: block;
  color: var(--amarillo);
  text-shadow: 0 0 80px rgba(245,187,0,0.32);
}
.hero-int-sub {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--blanco-dim);
  max-width: 56ch;
  margin-top: 20px;
  text-wrap: pretty;
}
.hero-int-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ── SECCIONES ── */
.sec {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 72px var(--grid-pad) 0;
}
.sec-narrow { max-width: 1240px; }
.sec + .sec { padding-top: 72px; }

/* Divisor de estrella */
.star-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 72px auto 0;
  max-width: var(--grid-max);
  padding: 0 var(--grid-pad);
  color: var(--amarillo);
}
.star-rule::before,
.star-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amarillo-border), transparent);
}
.star-rule span { font-size: 12px; letter-spacing: 0.3em; }

/* ── GRID DE PILARES (cards glass ícono + título + texto) ── */
.pilares-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pilar-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--amarillo-border);
  border-radius: var(--radio-lg);
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.32s var(--ease-out);
}
.pilar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--amarillo), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.pilar-card:hover {
  border-color: var(--amarillo-border-hover);
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.38);
}
.pilar-card:hover::before { opacity: 1; }
.pilar-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(245,187,0,0.10);
  border: 1px solid var(--amarillo-border);
  display: flex; align-items: center; justify-content: center;
}
.pilar-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--amarillo); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pilar-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--blanco);
}
.pilar-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--blanco-dim);
  text-wrap: pretty;
}

/* ── CTA DE CIERRE ── */
.cta-cierre {
  margin-top: 20px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-cierre-t {
  font-family: var(--font-condensed);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--blanco);
}
.cta-cierre-t em { font-style: normal; color: var(--amarillo); }
.cta-cierre-sub {
  font-size: 14.5px;
  color: var(--blanco-muted);
  margin-top: 8px;
  max-width: 46ch;
  line-height: 1.55;
}

/* ── CONTACTO ── */
.contacto-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: start;
}
.contacto-card { padding: 36px 36px 32px; }
.contacto-card .form-group:last-of-type { margin-bottom: 26px; }
.contacto-note {
  font-size: 12px;
  color: var(--blanco-muted);
  margin-top: 14px;
  line-height: 1.5;
}
.dato-list { display: flex; flex-direction: column; gap: 12px; }
.dato-item {
  background: var(--glass-bg-light);
  border: 1px solid rgba(245,187,0,0.16);
  border-radius: var(--radio-md);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all 0.24s var(--ease-out);
}
.dato-item:hover { border-color: var(--amarillo-border-hover); transform: translateX(4px); }
.dato-ico {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: rgba(245,187,0,0.09);
  border: 1px solid var(--amarillo-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dato-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--amarillo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dato-lbl {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 4px;
}
.dato-val {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  color: var(--blanco);
  text-decoration: none;
  word-break: break-word;
}
a.dato-val:hover { color: var(--amarillo); }

/* ── PÁGINA VACÍA / PRONTO / 404 ── */
.vacio {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px var(--grid-pad) 90px;
  text-align: center;
}
.vacio-num {
  font-family: var(--font-condensed);
  font-size: clamp(72px, 14vw, 168px);
  font-weight: 600;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--amarillo);
  text-shadow: 0 0 90px rgba(245,187,0,0.28);
}
.vacio-t {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--blanco);
  margin-top: 18px;
}
.vacio-p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--blanco-dim);
  margin: 14px auto 30px;
  max-width: 46ch;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .pilares-grid { grid-template-columns: 1fr; }
  .contacto-grid { grid-template-columns: 1fr; }
  .hero-int { min-height: 400px; }
}
@media (max-width: 768px) {
  .hero-int {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 40px);
    padding-bottom: 40px;
  }
  .hero-int-bg { background-position: center 30%; }
  .hero-int-sub { font-size: 15px; margin-top: 16px; }
  .sec, .sec + .sec { padding-top: 52px; }
  .star-rule { margin-top: 52px; }
  .cta-cierre { padding: 28px 24px; }
  .contacto-card { padding: 26px 22px 24px; }
  .vacio { padding: 80px var(--grid-pad-sm) 60px; }
}