/* ============================================================
   Global Vision — styles.css
   Complementa a Tailwind (utilidades) con: fuentes de marca,
   variables de color, y las animaciones/keyframes que Tailwind
   por CDN no trae listas para usar (marquee, degradados en
   movimiento, pulso de TikTok, shimmer de carga...).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,600&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#14213d;
  --navy-2:#1f3466;
  --gold:#c99a2e;
  --gold-soft:#e4c667;
  --cream:#f5f2ea;
  --paper:#faf8f2;
  --ink:#1a1a1a;
  --gray:#6e6e6e;
  --red:#a3231f;
  --line:#d8d2c2;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'PT Serif',serif;
  -webkit-font-smoothing:antialiased;
}
.font-display{ font-family:'Playfair Display',serif; }
.font-serif{ font-family:'PT Serif',serif; }
.font-sans{ font-family:'Inter',sans-serif; }

/* Titular principal: texto plano, sin sombra ni difuminado */
.headline-crisp{
  color:#111111;
  text-shadow:none;
  -webkit-text-stroke:0;
  text-rendering:optimizeLegibility;
}

/* Oculta la barra de scroll horizontal del cintillo de secciones en móvil */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* ---------- Marquee de "Última hora" ---------- */
.ticker-track{
  animation:scroll-left 38s linear infinite;
}
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Franja de la app (degradado animado) ---------- */
.app-band-bg{
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 55%,#233d75 100%);
  background-size:200% 200%;
  animation:gradient-drift 14s ease-in-out infinite;
}
@keyframes gradient-drift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* ---------- Chip de TikTok con pulso ---------- */
.soc-tiktok{ animation:tiktok-pulse 2.6s ease-in-out infinite; }
@keyframes tiktok-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,154,46,.35); }
  50%{ box-shadow:0 0 0 6px rgba(201,154,46,0); }
}

/* ---------- Carrusel de publicidad animado (sidebar) ---------- */
.ad-carousel{ position:relative; overflow:hidden; }
.ad-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0;
  background-size:220% 220%;
  animation-name:ad-cycle, gradient-drift;
  animation-duration:12s, 6s;
  animation-timing-function:ease-in-out, ease-in-out;
  animation-iteration-count:infinite, infinite;
}
.ad-slide:nth-child(1){ background-image:linear-gradient(120deg,var(--navy),var(--navy-2),#2c477f); animation-delay:0s,0s; }
.ad-slide:nth-child(2){ background-image:linear-gradient(120deg,#8a6a12,var(--gold),var(--gold-soft)); animation-delay:6s,0s; }
@keyframes ad-cycle{
  0%{ opacity:0; transform:scale(1.02); }
  6%{ opacity:1; transform:scale(1); }
  46%{ opacity:1; transform:scale(1); }
  52%{ opacity:0; transform:scale(.99); }
  100%{ opacity:0; }
}
.ad-dots span{ animation:dot-pulse 12s infinite; }
.ad-dots span:nth-child(1){ animation-delay:0s; }
.ad-dots span:nth-child(2){ animation-delay:6s; }
@keyframes dot-pulse{
  0%,46%,100%{ background:rgba(255,255,255,.4); width:6px; }
  6%,40%{ background:#fff; width:16px; }
}

/* ---------- Publicidad grande / vídeo (columna principal) ---------- */
.ad-feature-bg{
  background:linear-gradient(135deg,var(--navy),var(--navy-2) 60%,#2c477f);
  background-size:200% 200%;
  animation:gradient-drift 10s ease-in-out infinite;
}

/* ---------- Shimmer de carga (skeleton) ---------- */
.skel{
  background:linear-gradient(100deg,#eee 30%,#f6f6f6 50%,#eee 70%);
  background-size:200% 100%;
  animation:shine 1.3s infinite;
}
@keyframes shine{ to{ background-position:-200% 0; } }

/* ---------- Respeto a "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce){
  .ticker-track, .ad-slide, .ad-dots span, .soc-tiktok, .app-band-bg, .ad-feature-bg, .skel{
    animation:none !important;
  }
}

/* ============================================================
   MODO DE RESPALDO (.no-tailwind)
   Se activa solo por JS cuando el CDN de Tailwind no llega a
   cargar (sin conexión, red restringida, firewall...). Reproduce
   en CSS plano lo esencial del diseño para que la página siga
   siendo legible y ordenada aunque falten las utilidades de
   Tailwind. Cuando Tailwind SÍ carga, nada de este bloque se
   aplica y el diseño completo de Tailwind manda.
   ============================================================ */
.no-tailwind img{ max-width:100%; }
.no-tailwind a{ text-decoration:none; color:inherit; }
.no-tailwind h1,.no-tailwind h2,.no-tailwind h3,.no-tailwind h4,.no-tailwind h5{
  font-family:'Playfair Display',serif; margin:0; line-height:1.15;
}
.no-tailwind button, .no-tailwind input{ font-family:'Inter',sans-serif; }

.no-tailwind #site-header{ background:var(--paper); border-bottom:3px double var(--navy); }
.no-tailwind #site-header > div{
  max-width:1180px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.no-tailwind #site-header img{ height:56px; width:auto; }

.no-tailwind #site-nav{ background:var(--navy); }
.no-tailwind #nav-wrap{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; overflow-x:auto;
}
.no-tailwind #nav-wrap button{
  font-family:'Inter',sans-serif; color:#dde3f0; background:none; border:none;
  padding:12px 15px; white-space:nowrap; cursor:pointer; font-size:13px;
}

.no-tailwind #site-ticker{ background:var(--red); color:#fff; height:36px; display:flex; align-items:center; overflow:hidden; }
.no-tailwind #site-ticker > div:first-child{ background:#7d1815; padding:0 16px; height:100%; display:flex; align-items:center; flex:none; font-size:11px; text-transform:uppercase; }
.no-tailwind #ticker-track{ padding-left:20px; }
.no-tailwind #ticker-track a{ color:#fff; margin-right:16px; font-family:'Inter',sans-serif; font-size:13px; }

.no-tailwind #site-main{ max-width:1180px; margin:0 auto; padding:0 20px; }
.no-tailwind #hero-grid{ display:flex; flex-wrap:wrap; gap:32px; padding:24px 0; }
.no-tailwind #hero-grid > article{ flex:1 1 480px; }
.no-tailwind #hero-grid > article img{ width:100%; border-radius:2px; }
.no-tailwind #hero-grid h2{ font-size:32px; color:#111; margin-top:10px; }
.no-tailwind #hero-grid > div{ flex:1 1 300px; border-left:1px solid var(--line); padding-left:24px; }

.no-tailwind #body-cols{ display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; padding-bottom:20px; }
.no-tailwind #body-cols > div:first-child{ flex:2 1 480px; min-width:0; }
.no-tailwind #site-sidebar{ flex:1 1 280px; max-width:340px; }

.no-tailwind #section-blocks h3{ font-family:'Inter',sans-serif; font-size:13px; color:var(--navy); border-bottom:2px solid var(--navy); padding-bottom:10px; margin-bottom:16px; }
.no-tailwind #section-blocks > div{ display:flex; flex-wrap:wrap; gap:20px; margin-bottom:30px; }
.no-tailwind #section-blocks article{ flex:1 1 220px; max-width:260px; }
.no-tailwind #section-blocks img{ width:100%; border-radius:2px; }
.no-tailwind #section-blocks h4{ font-size:17px; margin-top:8px; }

.no-tailwind .sidebar-fallback-box, .no-tailwind #most-read-box{ border:1px solid var(--line); background:var(--paper); padding:18px; margin-bottom:18px; }
.no-tailwind #most-read h5{ font-family:'PT Serif',serif; font-size:14px; }

.no-tailwind footer#site-footer{ background:var(--navy); color:#c7cfe0; padding:36px 20px 18px; }
.no-tailwind #footer-grid{ max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:28px; }
.no-tailwind #footer-grid > div{ flex:1 1 160px; }
.no-tailwind #footer-grid h5{ font-family:'Inter',sans-serif; font-size:11px; color:var(--gold-soft); text-transform:uppercase; margin-bottom:10px; }
.no-tailwind #footer-grid li{ list-style:none; margin:0 0 8px; font-family:'Inter',sans-serif; font-size:13px; }
.no-tailwind #footer-grid a:hover{ color:var(--gold-soft); }

.no-tailwind .app-band-bg{ padding:34px 20px; color:#fff; }
.no-tailwind .app-band-bg > div{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }

.no-tailwind #newsletter-box{ padding:22px; border-radius:4px; margin-top:16px; }
.no-tailwind #newsletter-box h4{ font-size:19px; margin-top:8px; }
.no-tailwind #newsletter-box form{ display:flex; gap:8px; margin-top:12px; }
.no-tailwind #newsletter-box input{ flex:1; border-radius:16px; border:none; padding:8px 12px; }
.no-tailwind #newsletter-box button{ border-radius:16px; border:none; padding:8px 14px; background:#fff; color:var(--red); font-weight:700; }

.no-tailwind .ad-carousel{ height:150px; margin-top:16px; border-radius:4px; overflow:hidden; position:relative; }
.no-tailwind .ad-slide{ padding:18px; }
.no-tailwind .ad-slide h4{ font-size:17px; color:#fff; margin-top:6px; }