/* ==========================================================================
   EPA TV — estilos propios de la marca
   Depende de tokens.css + main.css. Cargar tercero.
   La marca del canal se apoya en el naranja; el cian queda para el detalle.
   ========================================================================== */

.epatv {
  --marca-tinte: var(--c-naranja-500);
  --marca-tinte-suave: color-mix(in srgb, var(--c-naranja-500) 14%, transparent);
}

/* --- Marca en el nav ---------------------------------------------------- */
.marca--epatv { gap: var(--e-2); letter-spacing: 0.01em; }

.marca--epatv b { color: var(--acento); font-weight: inherit; }

.marca--epatv .marca__sas {
  color: var(--texto-tenue);
  font-size: 0.55rem;
  max-width: 8ch;
  line-height: 1.25;
  margin-top: 0.3rem;
}

/* --- Hero --------------------------------------------------------------- */
.hero--epatv::before {
  background:
    radial-gradient(55% 55% at 18% 22%, color-mix(in srgb, var(--c-azul-700) 75%, transparent), transparent 70%),
    radial-gradient(50% 50% at 82% 24%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 70%);
}

.hero--epatv .hero__titulo { max-width: 17ch; }

.logo-epa {
  font-family: var(--fuente-display);
  font-size: clamp(4rem, 13vw, 9rem);
  font-weight: var(--peso-black);
  line-height: 0.9;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: var(--e-4);
}

.logo-epa span { color: var(--acento); }

.al-aire {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radio-pill);
  border: 1px solid color-mix(in srgb, var(--acento) 50%, transparent);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--acento);
  font-size: 0.6875rem;
  font-weight: var(--peso-bold);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}

/* --- Plataformas -------------------------------------------------------- */
.plataformas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
  overflow: hidden;
  list-style: none;
  padding: 0;
}

.plataformas li {
  background: var(--bg);
  padding: var(--e-5) var(--e-4);
  text-align: center;
  font-family: var(--fuente-display);
  font-size: 1.15rem;
  font-weight: var(--peso-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color var(--dur-media) var(--ease-suave),
              color var(--dur-media) var(--ease-suave);
}

.plataformas li:hover { background: var(--bg-elev-2); color: var(--acento); }

.plataformas small {
  display: block;
  font-family: var(--fuente-texto);
  font-size: var(--t-xs);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-tenue);
  margin-top: 0.2rem;
}

/* --- Grilla de programas ------------------------------------------------ */
.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e-5);
}

.ficha {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
  background: var(--bg-elev-1);
  overflow: hidden;
  transition: border-color var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-salida);
}

.ficha:hover { border-color: var(--linea-fuerte); transform: translateY(-3px); }

.ficha--adulto { border-color: color-mix(in srgb, var(--alerta) 32%, transparent); }

/* Placa tipográfica: hace de miniatura hasta que haya fotos reales.
   Los colores salen siempre de la paleta, vía --placa-a / --placa-b. */
.placa {
  position: relative;
  aspect-ratio: 16 / 7;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--placa-a, var(--c-azul-800)), var(--placa-b, var(--c-negro)));
  overflow: hidden;
}

.placa::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent 0 3px, rgb(0 0 0 / 0.16) 3px 4px);
  opacity: 0.5;
  pointer-events: none;
}

.placa b {
  position: relative;
  z-index: 1;
  font-family: var(--fuente-display);
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  font-weight: var(--peso-black);
  letter-spacing: -0.02em;
  color: var(--c-blanco);
  text-transform: uppercase;
  opacity: 0.92;
}

.ficha__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  flex: 1;
}

.ficha__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.ficha h3 {
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.ficha__gancho {
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: var(--peso-medio);
  color: var(--acento-2);
  line-height: 1.35;
}

.ficha p { font-size: var(--t-sm); color: var(--texto-suave); }

.ficha__pie {
  margin-top: auto;
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* --- Público ------------------------------------------------------------ */
.publico {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
  overflow: hidden;
}

.publico > div { background: var(--bg); padding: var(--e-6) var(--e-5); }

.publico dt {
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: var(--e-2);
}

.publico dd {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: 1.5rem;
  font-weight: var(--peso-bold);
  line-height: 1.2;
}

/* --- Paquetes de pauta -------------------------------------------------- */
.paquetes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-5);
}

.paquete {
  display: flex;
  flex-direction: column;
  padding: var(--e-6) var(--e-5);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  background: var(--bg-elev-1);
  position: relative;
}

.paquete--recomendado {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  background:
    radial-gradient(100% 100% at 50% 0%, var(--marca-tinte-suave), transparent 65%),
    var(--bg-elev-1);
}

.paquete__cinta {
  position: absolute;
  top: calc(var(--e-4) * -1);
  left: var(--e-5);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radio-pill);
  background: var(--acento);
  color: var(--c-negro);
  font-size: 0.625rem;
  font-weight: var(--peso-bold);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
}

.paquete h3 { font-size: var(--t-h3); margin-bottom: var(--e-2); }

.paquete__resumen { font-size: var(--t-sm); color: var(--texto-suave); }

.paquete ul {
  list-style: none;
  padding: 0;
  margin: var(--e-5) 0 0;
  display: grid;
  gap: var(--e-3);
}

.paquete li {
  display: flex;
  gap: var(--e-3);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.paquete li::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  margin-top: 0.62rem;
  border-radius: 50%;
  background: var(--acento);
}

.paquete li.no::before { background: var(--texto-tenue); opacity: 0.5; }

.paquete__pie { margin-top: auto; padding-top: var(--e-6); }

/* --- Servicios de producción -------------------------------------------- */
.servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-5);
  list-style: none;
  padding: 0;
}

.servicios li {
  padding: var(--e-5);
  border-left: 2px solid var(--acento);
  background: linear-gradient(90deg, var(--marca-tinte-suave), transparent 70%);
  border-radius: 0 var(--radio-md) var(--radio-md) 0;
}

.servicios b {
  display: block;
  font-family: var(--fuente-display);
  font-size: var(--t-h4);
  font-weight: var(--peso-semi);
  margin-bottom: var(--e-2);
}

.servicios span { font-size: var(--t-sm); color: var(--texto-suave); }

/* --- Aviso editorial ---------------------------------------------------- */
.aviso {
  margin-top: var(--e-6);
  padding: var(--e-5);
  border: 1px solid color-mix(in srgb, var(--alerta) 30%, transparent);
  background: color-mix(in srgb, var(--alerta) 7%, transparent);
  border-radius: var(--radio-md);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  max-width: 70ch;
}

.aviso strong { color: var(--alerta); }