/* ══════════════════════════════════════════════════════════════
   FIPO · boceto de web
   Paleta sampleada del PDF aprobado del cliente, no inventada.
   Tema: oscuro, bloqueado para toda la página.
   Radios: botones = pill · tarjetas y banners = 20px · inputs = 10px
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo Black';
  src: url('fonts/ArchivoBlack-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --rojo:      #ff1c33;
  --negro:     #282828;
  --negro-2:   #1e1e1e;
  --negro-3:   #171717;
  --hueso:     #f4f1ee;
  --naranja:   #ff5500;
  --violeta:   #c145ff;
  --rojo-prog: #fd391f;

  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --texto:   'Montserrat', system-ui, -apple-system, sans-serif;

  --r-card: 20px;
  --r-input: 10px;

  --cont: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--negro);
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.cont { width: 100%; max-width: var(--cont); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.rojo { color: var(--rojo); }

/* ── BOTONES ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--display);
  font-size: clamp(.82rem, 1.1vw, 1rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 1rem 2rem;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16,1,.3,1), background-color .18s, color .18s;
}
.btn:active { transform: scale(.97); }

.btn-blanco { background: var(--hueso); color: var(--negro); }
.btn-blanco:hover { background: #fff; transform: translateY(-2px); }

.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:hover { transform: translateY(-2px); }

.btn-negro { background: var(--negro); color: var(--hueso); width: 100%; }
.btn-negro:hover { background: #111; transform: translateY(-2px); }

.btn-color { background: var(--c, var(--rojo)); color: var(--negro); }
.btn-color:hover { transform: translateY(-2px); }

.btn-linea { background: transparent; color: var(--hueso); border-color: rgba(244,241,238,.4); }
.btn-linea:hover { border-color: var(--hueso); background: rgba(244,241,238,.08); transform: translateY(-2px); }

/* ── INTRO ───────────────────────────────────────────────── */
.intro {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  /* La marca entra girando sobre su eje, como la mosca del aire:
     sin perspectiva el giro se ve plano, como un simple achatado. */
  perspective: 900px;
  /* El logo se centra con grid y NO con translate(-50%,-50%):
     GSAP parsea el transform que ya está en el CSS y lo suma al suyo,
     así que con translate el logo aterrizaba corrido media pantalla. */
  display: grid; place-items: center;
}
.intro-banda {
  position: absolute; left: 0; width: 100%; height: 50.4%;
  background: var(--rojo); overflow: hidden;
  will-change: transform;
}
.intro-arriba { top: 0; }
.intro-abajo  { bottom: 0; }
.intro-banda img {
  position: absolute; left: 0; width: 100%; height: auto; max-width: none;
}
/* El par blanco/negro tiene que quedar clavado uno sobre el otro: si se
   corrieran aunque sea un pixel, la disolvencia se vería como un temblor. */
.intro-banda .cuernos-blancos { z-index: 1; }
.intro-arriba img { top: 0; }
.intro-abajo img  { bottom: 0; transform: scaleY(-1); }
.intro-logo {
  position: relative;
  width: clamp(180px, 26vw, 380px);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
body.bloqueado { overflow: hidden; }

/* ── HEADER ──────────────────────────────────────────────── */
.head { position: relative; z-index: 40; }

.head-red {
  position: relative;
  background: var(--rojo);
  height: clamp(96px, 11vw, 158px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cuernos {
  position: absolute; inset: 0 0 auto;
  width: 100%; height: auto;
  max-width: none;
  pointer-events: none;
  will-change: transform;
}
.head-logo { position: relative; z-index: 2; display: block; }
.head-logo img { width: clamp(120px, 13vw, 190px); }

.head-nav {
  background: var(--negro-3);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.75rem, 8vw, 7rem);
  height: 64px;
  position: sticky; top: 0; z-index: 40;
}
.head-nav a {
  font-family: var(--display);
  font-size: clamp(.85rem, 1.3vw, 1.15rem);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rojo);
  transition: color .2s;
}
.head-nav a:hover { color: #fff; }

/* ── BOTÓN FIJO DE YOUTUBE ───────────────────────────────── */
.yt-fijo {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 60;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--rojo); color: #fff;
  font-family: var(--display); font-size: .82rem; text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(255,28,51,.34);
  opacity: 0; transform: translateY(18px) scale(.94);
  pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.yt-fijo.visible { opacity: 1; transform: none; pointer-events: auto; }
.yt-fijo:hover { background: #ff3348; }
.yt-ico { width: 22px; display: block; }
.yt-ico svg { width: 100%; display: block; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100dvh - 220px);
  display: flex; align-items: center;
  padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.5rem, 5vw, 3.75rem);
  overflow: hidden;
  background: var(--negro-3);
}
.hero-fondo { position: absolute; inset: -12% 0 -12%; z-index: 0; will-change: transform; }
.hero-fondo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) brightness(.42) blur(2px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(23,23,23,.94) 0%, rgba(23,23,23,.72) 42%, rgba(23,23,23,.35) 100%),
    linear-gradient(to bottom, transparent 60%, var(--negro) 100%);
}
.hero-cuerpo {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--cont);
  margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.vivo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: #fff;
  background: rgba(255,28,51,.16);
  border: 1px solid rgba(255,28,51,.55);
  padding: .45rem 1rem; border-radius: 999px;
  margin-bottom: clamp(.9rem, 1.6vw, 1.35rem);
}
.vivo-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rojo); flex: none;
}
/* El punto late sólo cuando de verdad hay algo al aire */
.vivo { background: rgba(244,241,238,.08); border-color: rgba(244,241,238,.28); }
.vivo .vivo-punto { background: rgba(244,241,238,.5); }
.vivo.es-vivo { background: rgba(255,28,51,.16); border-color: rgba(255,28,51,.55); }
.vivo.es-vivo .vivo-punto { background: var(--rojo); }

@media (prefers-reduced-motion: no-preference) {
  .vivo.es-vivo .vivo-punto { animation: latido 1.7s ease-in-out infinite; }
  @keyframes latido {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255,28,51,.65); }
    70%      { opacity: .75; box-shadow: 0 0 0 9px rgba(255,28,51,0); }
  }
}

.hero-tit {
  font-family: var(--display);
  font-size: clamp(2.7rem, 7.6vw, 6.6rem);
  line-height: .93;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
}
.hero-tit .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-tit .ln > span { display: block; }

/* "Uruguay Streamea" · abre la letra chica, en el rojo de marca y con la display.
   Va acá y no como píldora aparte para no sumarle otra pieza al hero, que ya
   tiene el chip arriba y el botón abajo. */
.hero-marca {
  font-family: var(--display);
  color: var(--rojo);
  letter-spacing: .02em;
}

.hero-bajada {
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  color: rgba(244,241,238,.82);
  max-width: 30ch;
  margin-bottom: clamp(1.35rem, 2.2vw, 1.9rem);
}
.hero-cta { padding: 1.1rem 2.4rem; }

/* ── TIRA DE BANNERS ─────────────────────────────────────── */
.tira {
  background: var(--negro);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  overflow: hidden;
  border-top: 1px solid rgba(244,241,238,.07);
  border-bottom: 1px solid rgba(244,241,238,.07);
}
.tira-pista { display: flex; width: max-content; will-change: transform; }
.tira-grupo { display: flex; gap: clamp(1rem, 2vw, 1.75rem); padding-right: clamp(1rem, 2vw, 1.75rem); }
.tira-grupo img {
  height: clamp(96px, 12vw, 168px);
  width: auto;
  border-radius: var(--r-card);
  object-fit: cover;
}

/* ── FILTROS DE LA GRILLA ────────────────────────────────── */
.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: -.75rem 0 clamp(1.5rem, 3vw, 2.25rem);
}
.chip {
  font-family: var(--display);
  font-size: clamp(.68rem, .95vw, .82rem);
  text-transform: uppercase; letter-spacing: .04em;
  color: rgba(244,241,238,.72);
  background: transparent;
  border: 2px solid rgba(244,241,238,.2);
  border-radius: 999px;
  padding: .6rem 1.15rem;
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s, transform .2s cubic-bezier(.16,1,.3,1);
}
.chip:hover { color: #fff; border-color: rgba(244,241,238,.55); transform: translateY(-2px); }
.chip:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.chip.is-activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }

.sin-resultados {
  font-weight: 700; color: rgba(244,241,238,.55);
  padding: 2rem 0;
}

/* ── PROGRAMAS ───────────────────────────────────────────── */
.programas { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 9vw, 8rem); }

.tit-seccion {
  font-family: var(--display);
  font-size: clamp(2.1rem, 5.4vw, 4.4rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.lista-prog { list-style: none; display: flex; flex-direction: column; gap: clamp(.9rem, 1.6vw, 1.4rem); }

.prog {
  --c: var(--rojo);
  background: var(--negro-2);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.prog:has(.prog-cabeza:hover) { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,.5); }
.prog.oculto { display: none; }

/* El programa que está al aire ahora mismo */
.prog.al-aire { box-shadow: 0 0 0 3px var(--c), 0 22px 48px rgba(0,0,0,.5); }
.prog-aire {
  display: none;
  align-items: center; gap: .4rem;
  font-family: var(--display); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--negro); background: var(--c);
  padding: .3rem .65rem; border-radius: 999px;
  flex: none;
}
.prog.al-aire .prog-aire { display: inline-flex; }

.prog-cabeza {
  position: relative;
  width: 100%;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.prog-cabeza:focus-visible { outline: 3px solid var(--c); outline-offset: -3px; }

.prog-arte {
  display: block; position: relative;
  /* Los banners oficiales vienen en PNG con las esquinas redondeadas
     transparentes: el fondo de la tarjeta tiene que asomar por ahí. */
  background: var(--negro-2);
  overflow: hidden;
  perspective: 900px;
}
.prog-banner {
  width: 100%; height: auto; display: block;
  will-change: transform;
}

.prog-barra {
  display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.1rem);
  padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(1rem, 2.2vw, 1.75rem);
  border-top: 3px solid var(--c);
  background: var(--negro-2);
}
.prog-nombre {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.6rem);
  text-transform: uppercase; line-height: 1.05;
  color: #fff;
}
/* La hora manda sobre el día: es una grilla de TV y lo que la gente
   busca es "a qué hora". Va empujada a la derecha para que las horas
   queden alineadas en columna entre fichas, como una programación
   impresa. Pedido de Richy (26/8/2026).                            */
/* El orden explícito importa: en el DOM el badge "Al aire" viene
   DESPUÉS del horario, y sin esto se mete entre la hora y el "+",
   corriendo la hora 91px y rompiendo la columna. Va junto al nombre. */
.prog-nombre { order: 0; }
.prog-aire   { order: 1; }
.prog-horario{ order: 2; }
.prog-mas    { order: 3; }

.prog-horario {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: .1rem;
  text-align: right;
  white-space: nowrap;
}
.prog-dias {
  font-weight: 800; font-size: clamp(.58rem, .8vw, .7rem);
  text-transform: uppercase; letter-spacing: .12em;
  color: rgba(244,241,238,.6);
}
.prog-hora {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}
/* Sin hora, el día ocupa el lugar de la hora y no queda un hueco. */
.prog-horario-solo .prog-dias { font-size: clamp(.66rem, .95vw, .8rem); }
.prog-mas {
  position: relative; flex: none;
  margin-left: clamp(.6rem, 1.4vw, 1.1rem);
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255,255,255,.28);
  transition: background-color .25s, border-color .25s, transform .35s cubic-bezier(.16,1,.3,1);
}
.prog-mas::before, .prog-mas::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  background: #fff; border-radius: 2px;
  transform: translate(-50%,-50%);
  transition: opacity .3s;
}
.prog-mas::before { width: 14px; height: 2.5px; }
.prog-mas::after  { width: 2.5px; height: 14px; }
.prog-cabeza:hover .prog-mas { background: var(--c); border-color: var(--c); }
.prog-cabeza[aria-expanded="true"] .prog-mas { background: var(--c); border-color: var(--c); transform: rotate(45deg); }

.prog-panel { overflow: hidden; }
.prog-panel-in {
  background: rgba(0,0,0,.28);
  padding: clamp(1.3rem, 2.6vw, 2rem) clamp(1.1rem, 2.4vw, 2rem) clamp(1.5rem, 2.8vw, 2.1rem);
  display: grid; gap: .9rem;
}
.prog-desc {
  font-size: clamp(.95rem, 1.35vw, 1.1rem);
  line-height: 1.6;
  max-width: 62ch;
  color: rgba(244,241,238,.9);
}
.prog-gente {
  font-weight: 800; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--c);
}
.prog-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .35rem; }
.prog-acciones .btn { padding: .85rem 1.6rem; }

/* Programas sin arte todavía */
.prog-vacio { --c: rgba(244,241,238,.22); }
.prog-cabeza-vacia {
  display: block;
  background: var(--negro-2);
  border-radius: var(--r-card);
  overflow: hidden;
}
.prog-arte-falta {
  background: repeating-linear-gradient(-45deg, #1a1a1a 0 14px, #1e1e1e 14px 28px);
  aspect-ratio: 13 / 1; min-height: 68px;
  display: flex; align-items: center; justify-content: center;
}
.prog-arte-falta span {
  font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .18em;
  color: rgba(244,241,238,.3);
}
.prog-vacio .prog-dias,
.prog-vacio .prog-hora { color: rgba(244,241,238,.45); }

/* Programa con arte pero todavía sin día y hora confirmados. */
.prog-sinhorario .prog-dias {
  color: rgba(244,241,238,.5);
  font-style: italic;
}

/* ── SEGUINOS (redes) ────────────────────────────────────────
   Instagram ocupa el doble de ancho y va en rojo de marca: es la
   cuenta más grande y la única con número relevado, así que manda
   la jerarquía. Las otras dos quedan en negro-2, como las tarjetas
   de programa, para que el rojo no compita con nada.               */
.redes { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 6.5rem); }

.redes-txt {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 54ch;
  color: rgba(244,241,238,.8);
  margin-top: -1rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.redes-grilla {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(.9rem, 1.6vw, 1.4rem);
}

.red {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  background: var(--negro-2);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--hueso);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.red:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,.5); }
.red:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }

.red-ico { width: clamp(30px, 3vw, 38px); display: block; }
.red-ico svg { width: 100%; display: block; }

.red-txt { display: flex; flex-direction: column; gap: .15rem; }
.red-nombre {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.red-arroba { font-weight: 800; font-size: .95rem; opacity: .75; }
.red-desc {
  font-size: .92rem;
  line-height: 1.45;
  color: rgba(244,241,238,.7);
  margin-top: .35rem;
}

/* el número es el argumento: va en display y grande */
.red-num {
  font-size: .9rem;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: auto;
}
.red-num strong {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: .9;
  font-weight: 400;
}

/* "Seguir" imita al botón sin serlo: la tarjeta entera es el link */
.red-ir {
  align-self: flex-start;
  margin-top: auto;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  border: 2px solid rgba(244,241,238,.35);
  font-weight: 800;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.red:hover .red-ir { background: var(--hueso); border-color: var(--hueso); color: var(--negro); }

.red-grande {
  background: var(--rojo);
  color: #fff;
  grid-row: span 1;
}
.red-grande .red-desc { color: rgba(255,255,255,.85); }
.red-grande .red-arroba { opacity: .9; }
.red-grande .red-num { margin-top: .4rem; }
.red-grande .red-ir { border-color: rgba(255,255,255,.6); }
.red-grande:hover .red-ir { background: #fff; border-color: #fff; color: var(--rojo); }

/* ── SUMATE ──────────────────────────────────────────────── */
.sumate {
  position: relative;
  background: var(--negro-3);
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  overflow: hidden;
}
.sumate-llama {
  position: absolute; right: -6%; top: 50%;
  width: clamp(240px, 34vw, 560px);
  transform: translateY(-50%);
  opacity: .07;
  pointer-events: none;
  will-change: transform;
}
.sumate-in { position: relative; z-index: 2; }
.sumate-txt {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  max-width: 52ch;
  color: rgba(244,241,238,.8);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: -1rem;
}

/* ── CONTACTO ────────────────────────────────────────────── */
.contacto {
  position: relative;
  background: var(--rojo);
  color: var(--negro);
  padding: clamp(5.5rem, 12vw, 9rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
}
/* Los cuernos enmarcan la sección, igual que en el header */
.cuernos-top {
  position: absolute; left: 0; top: 0;
  width: 100%; height: auto; max-width: none;
  transform: scaleY(-1);
  pointer-events: none;
}
/* El diablo queda de textura, bajo el contenido: si sube de opacidad
   se come el contraste de las etiquetas del formulario. */
.diablo {
  position: absolute; left: 50%; bottom: -8%;
  width: min(1500px, 120%); max-width: none;
  transform: translateX(-50%);
  opacity: .14;
  pointer-events: none;
}
.contacto-in { position: relative; z-index: 2; }

.tit-contacto {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  text-shadow: 0 3px 24px rgba(0,0,0,.28);
}

.form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem clamp(.85rem, 1.6vw, 1.25rem);
  max-width: 860px;
}
.campo { display: grid; gap: .4rem; }
.campo-full { grid-column: 1 / -1; }
.campo label {
  font-weight: 800; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--negro);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  font-family: var(--texto); font-size: 1rem; font-weight: 600;
  color: var(--negro);
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--r-input);
  padding: .8rem 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 118px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--negro);
  box-shadow: 0 0 0 4px rgba(40,40,40,.22);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #8f0d1c; }

.form-nota {
  margin-top: .85rem; font-weight: 700; font-size: .9rem;
  color: var(--negro); min-height: 1.4em;
}
/* Estados del envío: el error usa el rojo de la marca, el acuse va en verde
   porque el rojo de FIPO leído como "listo" confunde. */
.form-nota.es-error { color: var(--rojo); }
.form-nota.es-ok    { color: #0f7a3d; }

.datos {
  display: flex; flex-wrap: wrap; gap: .5rem clamp(1rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  font-weight: 800; font-size: clamp(.85rem, 1.2vw, 1rem);
}
.datos a { color: var(--negro); text-decoration: none; border-bottom: 2px solid rgba(40,40,40,.3); }
.datos a:hover { border-bottom-color: var(--negro); }
/* El contacto directo es WhatsApp, no llamada: el ícono lo deja claro de un vistazo */
.dato-wa { display: inline-flex; align-items: center; gap: .45rem; }
.dato-wa svg { width: 1.15em; height: 1.15em; flex: none; }

/* ── FOOTER ──────────────────────────────────────────────── */
.pie { background: var(--rojo); padding: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.pie-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.pie-logo { width: clamp(110px, 12vw, 170px); }
.pie-redes { display: flex; gap: clamp(.85rem, 1.6vw, 1.25rem); color: var(--negro); }
.pie-redes a { width: clamp(26px, 2.6vw, 32px); display: block; transition: transform .2s, opacity .2s; }
.pie-redes svg { width: 100%; display: block; }
.pie-redes a:hover { transform: translateY(-3px); opacity: .75; }

/* ── REVEAL AL ENTRAR ────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(30px); }
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Instagram deja de ser doble y pasa a ocupar el ancho entero:
     con tres columnas apretadas el número perdía todo el impacto */
  .redes-grilla { grid-template-columns: 1fr 1fr; }
  .red-grande { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .form { grid-template-columns: 1fr; }
  .redes-grilla { grid-template-columns: 1fr; }
  .red { padding: 1.35rem; }
  .hero { min-height: auto; padding-top: 3rem; }
  .hero-bajada { max-width: 100%; }
  .head-nav { gap: 1.25rem; height: 56px; }
  .prog-meta { padding-bottom: .8rem; }
  .prog-mas { width: 34px; height: 34px; }
  .prog-mas::before { width: 13px; }
  .prog-mas::after { height: 13px; }
  .pie-in { justify-content: center; }
  .yt-fijo span:not(.yt-ico) { display: none; }
  .yt-fijo { padding: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}