/*
Theme Name: MediaGlobal Theme
Theme URI: https://mediaglobalgroup.com
Author: Marco Antonio Díez Ferreira
Author URI: https://mediaglobalgroup.com
Description: El framework de diseño web profesional para empresas y agencias. Monta una web completa en 2 minutos con el asistente de instalación por sectores, elige entre más de 15 plantillas listas (restaurantes, clínicas, inmobiliarias, abogados, ecommerce…) y personalízalo todo desde un único panel: colores, tipografías, cabecera, footer, botones y componentes sincronizados en todo el sitio. Incluye biblioteca de bloques profesionales (héroes, FAQs, testimonios, precios, equipo, estadísticas), SEO técnico integrado (Schema.org, Open Graph, breadcrumbs, redirecciones 301), optimización de rendimiento (lazy load, minificación, fuentes locales), integraciones con Google Analytics 4, Tag Manager, Meta Pixel y botón de WhatsApp, compatibilidad con WooCommerce, Elementor y el editor de bloques, actualizaciones automáticas y soporte premium con licencia. Ligero, seguro y 100% en español.
Version: 2.8
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mediaglobal-theme
*/

/* ==========================================================
   Reset básico
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* Las variables :root se inyectan dinámicamente desde functions.php
   con los valores guardados vía API (mediaglobal/v1/settings). Estos son
   los valores de respaldo. */
:root {
  --color-primary: #25BF8C;
  --color-dark: #0F1C2E;
  --color-bg: #ffffff;
  --color-text: #1f2933;
  --color-muted: #64748b;
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 12px;
  --container: 1140px;
}

/* ==========================================================
   Base
   ========================================================== */
body {
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  color: var(--color-dark);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.25rem; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 191, 140, 0.35);
}
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

/* ==========================================================
   Header
   ========================================================== */
.site-header {
  background: var(--color-dark);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-branding a {
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
}
.site-branding a:hover { text-decoration: none; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
}
.site-nav a { color: rgba(255, 255, 255, 0.85); font-weight: 500; }
.site-nav a:hover { color: var(--color-primary); text-decoration: none; }

/* ==========================================================
   Secciones (renderizadas desde mediaglobal/v1/sections)
   ========================================================== */
.section { padding: 80px 0; }
.section--alt { background: #f5f8f7; }

/* Hero */
.hero {
  background: var(--color-dark);
  color: #fff;
  padding: 110px 0;
  text-align: center;
}
.hero h1 { color: #fff; }
.hero .hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 640px;
  margin: 0 auto 32px;
}
.hero .hero-accent { color: var(--color-primary); }

/* Features */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.feature-card {
  background: #fff;
  border: 1px solid #e5eaf0;
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 28, 46, 0.08);
}
.feature-card .feature-icon { font-size: 2rem; margin-bottom: 12px; }
.feature-card p { color: var(--color-muted); margin: 0; }

/* CTA */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary), #1ea378);
  color: #fff;
  text-align: center;
  border-radius: var(--radius);
  padding: 64px 32px;
}
.cta-band h2 { color: #fff; }
.cta-band .btn { background: #fff; color: var(--color-dark); }

.section-title { text-align: center; }
.section-intro {
  text-align: center;
  color: var(--color-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* ==========================================================
   Blog / contenido
   ========================================================== */
.content-area { padding: 64px 0; }
.post-card { margin-bottom: 48px; }
.post-card .entry-meta { color: var(--color-muted); font-size: 0.9rem; }
.entry-content > * { max-width: 720px; }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 40px 0;
  margin-top: 80px;
  text-align: center;
  font-size: 0.95rem;
}
.site-footer a { color: var(--color-primary); }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 720px) {
  .site-header .container { flex-direction: column; gap: 12px; }
  .site-nav ul { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .section { padding: 56px 0; }
  .hero { padding: 72px 0; }
}

/* ==========================================================
   v2.0 — Framework: overrides por variables
   ========================================================== */
.section { padding: var(--section-padding) 0; }
.section--alt { background: var(--color-surface); }
.container--narrow { max-width: 780px; }
.features-grid { gap: var(--element-gap); }
.feature-card, .mg-team-card, .mg-testimonial, .mg-plan { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.feature-card:hover, .mg-card-hover:hover { box-shadow: var(--shadow-hover); }
.cta-band { border-radius: var(--radius); }

/* Header extras */
.header-extras { display: flex; align-items: center; gap: 16px; }
.header-search input { padding: 8px 14px; border-radius: 999px; border: 0; font-size: 14px; width: 160px; }
.header-cta { padding: 10px 22px !important; font-size: 14px !important; }
.header-cart { color: #fff; font-size: 18px; text-decoration: none; }
.header-cart-count { background: var(--color-primary); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 7px; vertical-align: top; }
.site-branding img { max-height: 48px; width: auto; }

/* Breadcrumb */
.mg-breadcrumb { font-size: 0.85rem; color: var(--color-muted); margin: 0 0 20px; }
.mg-breadcrumb a { color: var(--color-muted); }
.mg-breadcrumb span[aria-hidden] { margin: 0 4px; }

/* FAQ */
.mg-faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 12px; background: #fff; }
.mg-faq-item summary { cursor: pointer; font-weight: 600; padding: 18px 22px; color: var(--color-headings); list-style: none; position: relative; }
.mg-faq-item summary::-webkit-details-marker { display: none; }
.mg-faq-item summary::after { content: "+"; position: absolute; right: 20px; font-size: 1.3rem; color: var(--color-primary); }
.mg-faq-item[open] summary::after { content: "–"; }
.mg-faq-answer { padding: 0 22px 18px; color: var(--color-muted); }

/* Equipo */
.mg-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--element-gap); margin-top: 40px; }
.mg-team-card { background: #fff; border: 1px solid var(--color-border); padding: 28px 22px; text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.mg-team-card img { border-radius: 50%; width: 110px; height: 110px; object-fit: cover; margin: 0 auto 14px; }
.mg-team-placeholder { width: 110px; height: 110px; border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; margin: 0 auto 14px; }
.mg-team-card p { color: var(--color-muted); margin: 0; font-size: .95rem; }

/* Testimonios */
.mg-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--element-gap); margin-top: 40px; }
.mg-testimonial { background: #fff; border: 1px solid var(--color-border); padding: 28px; margin: 0; transition: transform .15s ease, box-shadow .15s ease; }
.mg-testimonial p { font-style: italic; }
.mg-testimonial footer { color: var(--color-muted); font-size: .9rem; }

/* Pricing */
.mg-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--element-gap); margin-top: 40px; align-items: start; }
.mg-plan { background: #fff; border: 1px solid var(--color-border); padding: 32px 28px; text-align: center; transition: transform .15s ease, box-shadow .15s ease; }
.mg-plan--featured { border: 2px solid var(--color-primary); transform: scale(1.03); }
.mg-price { font-size: 2.4rem; font-weight: 800; color: var(--color-headings); margin: 10px 0; }
.mg-price small { font-size: 1rem; color: var(--color-muted); font-weight: 400; }
.mg-plan ul { list-style: none; padding: 0; margin: 0 0 20px; }
.mg-plan li { padding: 7px 0; border-bottom: 1px dashed var(--color-border); color: var(--color-muted); }
.mg-plan li:last-child { border-bottom: 0; }

/* Stats */
.mg-stats-section { background: var(--color-dark); }
.mg-stats-section .section-title { color: #fff; }
.mg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--element-gap); text-align: center; }
.mg-stat-number { font-size: 2.6rem; font-weight: 800; color: var(--color-primary); }
.mg-stat-label { color: rgba(255,255,255,.75); }

/* Steps / proceso */
.mg-steps { list-style: none; counter-reset: mg-step; padding: 0; margin: 40px 0 0; }
.mg-step-item { counter-increment: mg-step; position: relative; padding: 0 0 32px 64px; border-left: 2px solid var(--color-border); margin-left: 22px; }
.mg-step-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.mg-step-item::before { content: counter(mg-step); position: absolute; left: -23px; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mg-step-item h3 { margin: 8px 0 6px; }
.mg-step-item p { color: var(--color-muted); margin: 0; }

/* Logos */
.mg-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 48px; margin-top: 32px; }
.mg-logos img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .7; }
.mg-logo-text { font-weight: 700; font-size: 1.15rem; color: var(--color-muted); opacity: .8; }

/* Blog grid */
.blog-loop--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--element-gap); }
.blog-loop--grid .post-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin: 0; transition: transform .15s ease, box-shadow .15s ease; }
.blog-loop--grid .post-card-body { padding: 22px; }
.blog-loop--grid h2 { font-size: 1.2rem; }
.post-card-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* Compartir y relacionados */
.mg-share { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-border); display: flex; gap: 14px; align-items: center; }
.mg-related { margin-top: 56px; }

/* Footer v2 */
.site-footer { text-align: left; }
.footer-columns { display: grid; gap: 32px; margin-bottom: 32px; }
.footer-columns--1 { grid-template-columns: 1fr; }
.footer-columns--2 { grid-template-columns: repeat(2, 1fr); }
.footer-columns--3 { grid-template-columns: repeat(3, 1fr); }
.footer-columns--4 { grid-template-columns: repeat(4, 1fr); }
.footer-widget-title { color: #fff; margin-bottom: 10px; }
.footer-newsletter { margin-bottom: 28px; }
.footer-newsletter h4 { color: #fff; }
.footer-newsletter form { display: flex; gap: 10px; max-width: 420px; }
.footer-newsletter input { flex: 1; border-radius: var(--btn-radius); border: 0; padding: 10px 16px; }
.footer-social { display: flex; gap: 18px; margin-bottom: 18px; }
.footer-copyright { text-align: center; margin: 24px 0 0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; }
.footer-credit { color: rgba(255,255,255,.55); text-decoration: underline; }
.site-footer .menu { list-style: none; display: flex; gap: 20px; padding: 0; justify-content: center; flex-wrap: wrap; }

/* WhatsApp flotante */
.mg-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .15s ease; }
.mg-whatsapp:hover { transform: scale(1.08); }

/* Aviso de cookies */
.mg-cookies { position: fixed; left: 22px; right: 22px; bottom: 22px; z-index: 998; background: var(--color-dark); color: #fff; border-radius: var(--radius); padding: 18px 22px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.mg-cookies p { margin: 0; }
.mg-cookies .btn { padding: 8px 20px; font-size: 14px; }

@media (max-width: 720px) {
  .footer-columns--2, .footer-columns--3, .footer-columns--4 { grid-template-columns: 1fr; }
  .header-extras { flex-wrap: wrap; justify-content: center; }
  .mg-plan--featured { transform: none; }
}

/* Hero con imagen de fondo */
.hero--image { background-size: cover; background-position: center; position: relative; }
.hero--image::before { content: ""; position: absolute; inset: 0; background: rgba(15, 28, 46, 0.68); }
.hero--image .container { position: relative; z-index: 1; }