/* ============================================
   CAMPO VERDE TV — Sistema de diseño
   Naturaleza amazónica + señal de TV digital
   ============================================ */

:root {
  /* Paleta extraída del logo */
  --verde-profundo: #1b5e20;   /* texto principal, marco TV */
  --verde-bosque:   #2e7d32;   /* acentos secundarios */
  --verde-vibrante: #43a047;   /* CTA, energía */
  --verde-lima:     #7cb342;   /* highlights, pantalla */
  --verde-hoja:     #aed581;   /* fondos suaves */
  --crema:          #f5f4ef;   /* fondo base */
  --crema-hueso:    #ecebe3;
  --carbon:         #15281a;    /* texto sobre claro */
  --blanco:         #ffffff;
  --niebla:         rgba(27,94,32,0.06);

  --sombra-suave: 0 4px 24px rgba(27,94,32,0.10);
  --sombra-media: 0 12px 40px rgba(27,94,32,0.16);
  --sombra-fuerte: 0 24px 60px rgba(21,40,26,0.28);

  --radio: 18px;
  --radio-lg: 28px;

  --fuente-display: 'Archivo Black', 'Archivo', sans-serif;
  --fuente-titulo: 'Archivo', sans-serif;
  --fuente-texto: 'Inter', system-ui, sans-serif;

  --max: 1240px;
  --transicion: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--fuente-texto);
  color: var(--carbon);
  background: var(--crema);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--verde-lima); color: var(--verde-profundo); }

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

.contenedor { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

/* ============ TIPOGRAFÍA ============ */
h1,h2,h3,h4 { font-family: var(--fuente-titulo); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--verde-profundo); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--verde-vibrante);
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--verde-vibrante); display: inline-block; }

/* ============ BOTONES ============ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem; border-radius: 100px; border: 2px solid transparent;
  cursor: pointer; transition: var(--transicion); position: relative;
}
.btn-primario { background: var(--verde-vibrante); color: var(--blanco); box-shadow: var(--sombra-suave); }
.btn-primario:hover { background: var(--verde-profundo); transform: translateY(-3px); box-shadow: var(--sombra-media); }
.btn-fantasma { border-color: var(--verde-profundo); color: var(--verde-profundo); }
.btn-fantasma:hover { background: var(--verde-profundo); color: var(--blanco); transform: translateY(-3px); }
.btn-vivo { background: #e53935; color: #fff; }
.btn-vivo:hover { background: #c62828; transform: translateY(-3px); }

/* ============ NAVBAR ============ */
.navbar { background: rgba(245,244,239,0.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(27,94,32,0.08); transition: var(--transicion); padding: 0.7rem 0; }
.navbar-nav { list-style: none; margin: 0; padding: 0; }
.nav-item { list-style: none; }
.nav-menu { display: block; }
@media (min-width: 992px) {
  .nav-menu .navbar-nav { display: flex !important; flex-direction: row !important; align-items: center; gap: 1.8rem; }
}
.navbar.scrolled { box-shadow: var(--sombra-suave); background: rgba(245,244,239,0.96); }
.marca { display: flex; align-items: center; gap: 0.7rem; }
.marca img { height: 54px; width: auto; }
.marca-txt { display: flex; flex-direction: column; line-height: 1; }
.marca-txt strong { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.15rem; color: var(--verde-profundo); letter-spacing: -0.01em; }
.marca-txt span { font-size: 0.62rem; letter-spacing: 0.32em; color: var(--verde-vibrante); font-weight: 700; }
.nav-link { font-weight: 600; color: var(--carbon); padding: 0.4rem 0; position: relative; transition: color var(--transicion); }
.nav-link::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--verde-vibrante); transition: width var(--transicion); }
.nav-link:hover, .nav-link.active { color: var(--verde-vibrante); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* punto EN VIVO */
.live-dot { width:8px; height:8px; border-radius:50%; background:#e53935; display:inline-block; box-shadow:0 0 0 0 rgba(229,57,53,0.6); animation: pulso 1.8s infinite; }
@keyframes pulso { 0%{box-shadow:0 0 0 0 rgba(229,57,53,0.6);} 70%{box-shadow:0 0 0 10px rgba(229,57,53,0);} 100%{box-shadow:0 0 0 0 rgba(229,57,53,0);} }

/* ============ HERO ============ */
.hero { position: relative; padding: 7rem 0 5rem; overflow: hidden; }
.hero-bg-grano {
  position:absolute; inset:0; z-index:0; opacity:0.5;
  background:
    radial-gradient(circle at 15% 20%, rgba(124,179,66,0.18), transparent 42%),
    radial-gradient(circle at 85% 75%, rgba(67,160,71,0.16), transparent 45%);
}
.hero .contenedor { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 1.2rem 0 1.3rem; }
.hero h1 .resalte { color: var(--verde-vibrante); position: relative; }
.hero p.lead { font-size: 1.18rem; color: #3c4f3f; max-width: 30rem; margin-bottom: 2rem; }
.hero-acciones { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats { display:flex; gap:2.4rem; margin-top:3rem; flex-wrap:wrap; }
.stat strong { font-family: var(--fuente-titulo); font-weight:800; font-size:2rem; color: var(--verde-profundo); display:block; line-height:1; }
.stat span { font-size:0.82rem; color:#5a6b5c; letter-spacing:0.04em; }

/* Marco TV del hero */
.tv-frame {
  position: relative; background: var(--verde-profundo); border-radius: 32px;
  padding: 22px; box-shadow: var(--sombra-fuerte);
}
.tv-frame::before, .tv-frame::after {
  content:''; position:absolute; top:-46px; width:6px; height:54px; background: var(--verde-profundo); border-radius:6px;
}
.tv-frame::before { left: 32%; transform: rotate(-22deg); }
.tv-frame::after  { right: 32%; transform: rotate(22deg); }
.tv-antena { position:absolute; top:-52px; width:16px; height:16px; border-radius:50%; background: var(--verde-bosque); }
.tv-antena.izq { left: calc(32% - 14px); transform: rotate(-22deg); }
.tv-antena.der { right: calc(32% - 14px); transform: rotate(22deg); }
.tv-pantalla {
  border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; position: relative;
  background: linear-gradient(135deg, var(--verde-vibrante), var(--verde-lima));
  display:flex; align-items:center; justify-content:center;
}
.tv-pantalla iframe { width:100%; height:100%; border:0; }
.tv-pantalla .placeholder { text-align:center; color:#fff; padding:1rem; }
.tv-pantalla .placeholder .play { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center; margin:0 auto 0.8rem; transition: var(--transicion); }
.tv-pantalla .placeholder:hover .play { transform: scale(1.1); }
.tv-pantalla-base { height:14px; }
.tv-controles { display:flex; gap:0.6rem; justify-content:center; margin-top:14px; }
.tv-controles span { width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,0.25); }
.tv-controles span:first-child { background: #e53935; }

/* etiqueta EN VIVO flotante */
.badge-vivo { position:absolute; top:34px; left:34px; z-index:3; background:#e53935; color:#fff; font-weight:700; font-size:0.72rem; letter-spacing:0.1em; padding:0.35rem 0.7rem; border-radius:6px; display:flex; align-items:center; gap:0.4rem; }
.badge-vivo .live-dot { background:#fff; }

/* marquesina */
.marquesina { background: var(--verde-profundo); color: var(--verde-hoja); padding: 0.9rem 0; overflow:hidden; white-space:nowrap; }
.marquesina-track { display:inline-block; animation: desliza 26s linear infinite; }
.marquesina-track span { font-weight:700; letter-spacing:0.06em; margin:0 2.4rem; font-size:0.92rem; }
.marquesina-track span b { color: var(--verde-lima); }
@keyframes desliza { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============ SECCIONES ============ */
section { padding: 5.5rem 0; }
.sec-cabecera { max-width: 42rem; margin-bottom: 3rem; }
.sec-cabecera h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0.9rem 0 1rem; }
.sec-cabecera p { color: #4d5e4f; font-size: 1.06rem; }
.centrado { text-align:center; margin-left:auto; margin-right:auto; }
.centrado .eyebrow::before { display:none; }

/* franja de programas */
.programas { background: var(--crema-hueso); }
.grid-prog { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:1.6rem; }
.prog-card {
  background: var(--blanco); border-radius: var(--radio-lg); overflow:hidden;
  box-shadow: var(--sombra-suave); transition: var(--transicion); border:1px solid rgba(27,94,32,0.06);
}
.prog-card:hover { transform: translateY(-8px); box-shadow: var(--sombra-media); }
.prog-thumb { aspect-ratio:16/9; position:relative; display:flex; align-items:flex-end; padding:1rem; color:#fff;
  background-size:cover; background-position:center; }
.prog-thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(transparent 35%, rgba(21,40,26,0.78)); }
.prog-thumb .horario { position:relative; z-index:2; font-weight:700; font-size:0.84rem; background:rgba(255,255,255,0.18); backdrop-filter:blur(6px); padding:0.3rem 0.7rem; border-radius:100px; }
.prog-info { padding:1.3rem 1.4rem 1.5rem; }
.prog-info .cat { font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--verde-vibrante); }
.prog-info h3 { font-size:1.25rem; margin:0.4rem 0 0.5rem; }
.prog-info p { font-size:0.92rem; color:#5a6b5c; }

/* ============ FRANJA VALORES / SOMOS ============ */
.somos-grid { display:grid; grid-template-columns: 1fr 1fr; gap:4rem; align-items:center; }
.somos-img { border-radius: var(--radio-lg); overflow:hidden; box-shadow: var(--sombra-media); position:relative; }
.somos-img .marco-deco { position:absolute; inset:14px; border:2px solid rgba(255,255,255,0.4); border-radius:18px; pointer-events:none; }
.valores { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1.4rem; margin-top:1rem; }
.valor { background: var(--blanco); border-radius: var(--radio); padding:1.8rem; box-shadow: var(--sombra-suave); transition:var(--transicion); border-bottom:3px solid var(--verde-lima); }
.valor:hover { transform: translateY(-6px); border-bottom-color: var(--verde-vibrante); }
.valor .ico { width:52px; height:52px; border-radius:14px; background: var(--niebla); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-size:1.5rem; }
.valor h3 { font-size:1.15rem; margin-bottom:0.4rem; }
.valor p { font-size:0.92rem; color:#5a6b5c; }

/* ============ CONTADOR / CIFRAS ============ */
.cifras { background: var(--verde-profundo); color:#fff; }
.cifras h2, .cifras .eyebrow { color:#fff; }
.cifras .eyebrow { color: var(--verde-lima); }
.cifras .eyebrow::before { background: var(--verde-lima); }
.grid-cifras { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:2rem; margin-top:2.5rem; }
.cifra { text-align:center; }
.cifra strong { font-family:var(--fuente-titulo); font-weight:800; font-size:clamp(2.6rem,5vw,3.6rem); color:var(--verde-lima); display:block; line-height:1; }
.cifra span { color: var(--verde-hoja); font-weight:600; letter-spacing:0.04em; }

/* ============ REDES / CTA ============ */
.cta-redes { text-align:center; }
.redes-fila { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.red-btn { display:inline-flex; align-items:center; gap:0.7rem; padding:0.9rem 1.5rem; border-radius:100px; font-weight:700; color:#fff; transition:var(--transicion); }
.red-btn:hover { transform:translateY(-4px); box-shadow: var(--sombra-media); }
.red-yt { background:#ff0000; }
.red-fb { background:#1877f2; }
.red-tk { background:#000; }
.red-ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }

/* ============ FOOTER ============ */
.footer { background: var(--carbon); color: #c9d6cb; padding:4rem 0 2rem; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:2.5rem; }
.footer h4 { color:#fff; font-size:1rem; margin-bottom:1.2rem; letter-spacing:0.02em; }
.footer ul { list-style:none; }
.footer ul li { margin-bottom:0.6rem; }
.footer ul li a { color:#9fb3a3; font-size:0.92rem; transition:color var(--transicion); }
.footer ul li a:hover { color: var(--verde-lima); }
.footer .marca-txt strong { color:#fff; }
.footer p.desc { color:#9fb3a3; font-size:0.92rem; margin-top:1rem; max-width:22rem; }
.footer-redes { display:flex; gap:0.7rem; margin-top:1.3rem; }
.footer-redes a { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; transition:var(--transicion); }
.footer-redes a:hover { background: var(--verde-vibrante); transform:translateY(-3px); }
.footer-base { border-top:1px solid rgba(255,255,255,0.1); margin-top:3rem; padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.85rem; color:#7e8f81; }

/* ============ ANIMACIONES SCROLL ============ */
.reveal { opacity:0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity:1; transform:none; }

/* ============ PÁGINAS INTERNAS ============ */
.page-hero { background: linear-gradient(135deg, var(--verde-profundo), var(--verde-bosque)); color:#fff; padding: 6rem 0 4rem; text-align:center; position:relative; overflow:hidden; }
.page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:60px; background: var(--crema); clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.page-hero h1 { color:#fff; font-size: clamp(2.2rem,5vw,3.4rem); }
.page-hero .breadcrumb { color: var(--verde-hoja); font-size:0.9rem; margin-top:0.8rem; }
.page-hero .breadcrumb a { color:#fff; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .hero-grid, .somos-grid { grid-template-columns: 1fr; }
  .hero { padding: 5rem 0 3rem; }
  .somos-img { order:-1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { gap:1.6rem; }
  section { padding: 4rem 0; }
  .marca img { height: 44px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity:1; transform:none; }
}