/*
Theme Name: Equacom News (React Replica)
Theme URI: https://equacom.news/
Author: Equacom Digital
Author URI: https://equacom.digital/
Description: Tema de WordPress que replica la apariencia actual de Equacom News hecha en React. Incluye estilos via Tailwind CDN y variables CSS para mantener el diseño.
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: equacom-news
Tags: news, magazine, responsive, tailwind
*/

/* Variables y utilidades mínimas (portadas desde src/index.css) */
:root {
  --background: 0 0% 100%;
  --foreground: 217 33% 17%;
  --card: 0 0% 100%;
  --card-foreground: 217 33% 17%;
  --popover: 0 0% 100%;
  --popover-foreground: 217 33% 17%;
  --primary: 211 100% 45%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 211 100% 38%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 217 33% 17%;
  --muted: 210 40% 96%;
  --muted-foreground: 217 20% 51%;
  --accent: 211 100% 45%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 211 100% 45%;
  --radius: 0.5rem;
  --news-blue: 211 100% 45%;
  --news-blue-dark: 211 100% 35%;
  --news-gray: 220 13% 96%;
  --news-text: 217 33% 17%;
  --gradient-primary: linear-gradient(135deg, hsl(211 100% 45%), hsl(211 100% 55%));
  --gradient-hero: linear-gradient(to right, hsl(211 100% 45% / 0.95), hsl(211 100% 35% / 0.95));
  --shadow-news: 0 4px 20px hsl(211 100% 45% / 0.1);
  --shadow-card: 0 2px 8px hsl(217 33% 17% / 0.08);
  --shadow-hover: 0 8px 30px hsl(211 100% 45% / 0.15);
}

.dark {
  --background: 217 33% 10%;
  --foreground: 0 0% 98%;
  --card: 217 33% 12%;
  --card-foreground: 0 0% 98%;
  --popover: 217 33% 12%;
  --popover-foreground: 0 0% 98%;
  --primary: 211 100% 50%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 211 100% 45%;
  --secondary: 217 33% 15%;
  --secondary-foreground: 0 0% 98%;
  --muted: 217 33% 15%;
  --muted-foreground: 217 20% 65%;
  --accent: 211 100% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 63% 40%;
  --destructive-foreground: 0 0% 100%;
  --border: 217 33% 20%;
  --input: 217 33% 20%;
  --ring: 211 100% 50%;
  --news-blue: 211 100% 50%;
  --news-blue-dark: 211 100% 40%;
  --news-gray: 217 33% 15%;
  --news-text: 0 0% 98%;
  --gradient-primary: linear-gradient(135deg, hsl(211 100% 50%), hsl(211 100% 60%));
  --gradient-hero: linear-gradient(to right, hsl(211 100% 50% / 0.9), hsl(211 100% 40% / 0.9));
  --shadow-news: 0 4px 20px hsl(211 100% 50% / 0.2);
  --shadow-card: 0 2px 8px hsl(0 0% 0% / 0.3);
  --shadow-hover: 0 8px 30px hsl(211 100% 50% / 0.25);
}

html { scroll-behavior: smooth; }
body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; background-color: hsl(var(--background)); color: hsl(var(--foreground)); }

.text-gradient { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: var(--gradient-primary); }

@keyframes fade-in { from {opacity:0} to {opacity:1} }
@keyframes slide-up { from {opacity:0; transform: translateY(30px)} to {opacity:1; transform: translateY(0)} }
@keyframes scale-in { from {opacity:0; transform: scale(0.95)} to {opacity:1; transform: scale(1)} }

.animate-fade-in { animation: fade-in .6s ease-out; }
.animate-slide-up { animation: slide-up .6s ease-out; }
.animate-scale-in { animation: scale-in .4s ease-out; }
.hover-lift { transition: all .3s; }
.hover-lift:hover { transform: translateY(-0.5rem); box-shadow: var(--shadow-hover); }