/*
Theme Name: Variavista Business
Theme URI: https://variavista.com
Author: Variavista
Author URI: https://variavista.com
Description: Tema base profesional y totalmente personalizable para empresas. Diseño moderno, responsive y optimizado para SEO. 100% dinámico desde el Customizer: colores, tipografías, fondos animados, cursores personalizados, loaders y mucho más. Sin dependencias de page builders - código nativo y optimizado. Ideal para servicios profesionales, consultoría, instalaciones, asesorías y cualquier tipo de negocio.
Version: 3.39.17
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: variavista
Tags: business, corporate, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, one-column, two-columns, theme-options, threaded-comments, translation-ready, accessibility-ready, block-styles, wide-blocks

Variavista Business Theme, Copyright 2025 Variavista
Variavista Business Theme is distributed under the terms of the GNU GPL.

Full changelog: see CHANGELOG.md

*/

/* ==========================================================================
   TABLA DE CONTENIDOS
   ========================================================================== */

/*
 1. Variables CSS
 2. Reset y Base
 3. Tipografía
 4. Layout y Grid
 5. Header y Navegación
 6. Hero Section
 7. Componentes
 8. Formularios
 9. Footer
10. Responsive
11. Accesibilidad
12. Utilidades
*/

/* ==========================================================================
   1. VARIABLES CSS
   ========================================================================== */

:root {
  /* === COLORES CORPORATIVOS (Configurables desde Customizer) === */
  --color-primary: #039a39;
  /* Color primario - Se sobrescribe desde Customizer */
  --color-primary-light: #04b545;
  /* Versión clara del primario */
  --color-primary-dark: #027a2d;
  /* Versión oscura del primario */

  --color-secondary: #a5c850;
  /* Color secundario - Se sobrescribe desde Customizer */
  --color-secondary-light: #c0db7a;
  /* Versión clara del secundario */
  --color-secondary-dark: #8ab038;
  /* Versión oscura del secundario */

  --color-accent: #ffd700;
  /* Color de acento opcional */
  --color-accent-light: #ffe44d;
  /* Acento claro */
  --color-accent-dark: #ddb900;
  /* Acento oscuro */

  /* === NEUTROS === */
  --color-white: #FFFFFF;
  --color-black: #1a1a1a;
  /* Negro suave */
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #939393;
  /* Gris del logo */
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* === FUNCIONALES === */
  --color-success: #0a4e36;
  /* Verde primario (éxito) */
  --color-error: #EF4444;
  --color-warning: #ffd700;
  /* Dorado (advertencia) */
  --color-info: #3B82F6;

  /* === GRADIENTES === */
  --gradient-primary: linear-gradient(135deg, #0a4e36 0%, #1a6e46 50%, #cce242 100%);
  --gradient-electric: linear-gradient(135deg, #0a4e36 0%, #cce242 100%);
  /* Gradiente del logo */
  --gradient-overlay: linear-gradient(180deg, rgba(10, 78, 54, 0.8) 0%, rgba(10, 78, 54, 0.4) 100%);

  /* === TIPOGRAFÍA === */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* === TAMAÑOS DE FUENTE === */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */
  --text-4xl: 2.25rem;
  /* 36px */
  --text-5xl: 3rem;
  /* 48px */
  --text-6xl: 3.75rem;
  /* 60px */

  /* === PESOS === */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* === ALTURA DE LÍNEA === */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* === ESPACIADO === */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-24: 6rem;
  /* 96px */

  /* === CONTENEDORES === */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;

  /* === BORDES === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === SOMBRAS === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* === TRANSICIONES === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === Z-INDEX === */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-secondary-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
}

/* ==========================================================================
   3. TIPOGRAFÍA
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-secondary-dark);
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-3xl);
}

h4 {
  font-size: var(--text-2xl);
}

h5 {
  font-size: var(--text-xl);
}

h6 {
  font-size: var(--text-lg);
}

p {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-accent);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

strong,
b {
  font-weight: var(--font-bold);
}

em,
i {
  font-style: italic;
}

/* ==========================================================================
   4. LAYOUT Y GRID
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.container-sm {
  max-width: var(--container-sm);
}

.container-lg {
  max-width: var(--container-lg);
}

.container-2xl {
  max-width: var(--container-2xl);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-8 {
  gap: var(--space-8);
}

/* ==========================================================================
   5. BOTONES
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-align: center;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(241, 138, 0, 0.3);
  color: var(--color-white);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-large {
  padding: 18px 40px;
  font-size: var(--text-lg);
}

.btn-small {
  padding: 10px 24px;
  font-size: var(--text-sm);
}

/* ==========================================================================
   6. SECCIONES
   ========================================================================== */

section {
  padding: var(--space-16) 0;
  position: relative;
  z-index: auto;
}

.section-gray {
  background-color: var(--color-gray-50);
}

.section-primary {
  background: var(--gradient-primary);
  color: var(--color-white);
}

.section-title {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-subtitle {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  max-width: 700px;
  margin: 0 auto var(--space-12);
}

/* ==========================================================================
   7. UTILIDADES
   ========================================================================== */

.text-center {
  text-align: center;
}

.text-primary {
  color: var(--color-primary);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.hidden {
  display: none;
}

/* Accesibilidad - Skip Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* WordPress Core Classes */
.alignleft {
  float: left;
  margin-right: var(--space-4);
}

.alignright {
  float: right;
  margin-left: var(--space-4);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: var(--color-secondary-dark);
  display: block;
  font-size: var(--text-sm);
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ==========================================================================
   ALPINE.JS UTILITIES
   ========================================================================== */

[x-cloak] {
  display: none !important;
}

/* ==========================================================================
   SINGLE POST CONTENT FIX
   ========================================================================== */

/* Encabezados H2 */
.entry-content h2,
article h2 {
  font-family: 'VAG Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: #1E120C !important;
  margin-top: 3rem !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

/* Encabezados H3 */
.entry-content h3,
article h3 {
  font-family: 'VAG Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  color: #1E120C !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}

/* Encabezados H4 */
.entry-content h4,
article h4 {
  font-family: 'VAG Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #1E120C !important;
  margin-top: 2rem !important;
  margin-bottom: 0.875rem !important;
  line-height: 1.4 !important;
}

/* Encabezados H5 y H6 */
.entry-content h5,
.entry-content h6,
article h5,
article h6 {
  font-family: 'VAG Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #1E120C !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.5 !important;
}

/* Párrafos */
.entry-content p {
  margin-bottom: 1.25rem !important;
  line-height: 1.75 !important;
}

/* ==========================================================================
   ANIMACIONES DE ENTRADA (clases para IntersectionObserver)
   ========================================================================== */

/* Preparación de elementos para animar */
.animate-prepare {
  opacity: 0;
  transform: translateY(15px);
}

/* Animación cuando el elemento entra en viewport */
.animate-in {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* Variaciones de animaciones de entrada */
.animate-fade-in-left.animate-in {
  animation: fadeInLeft 0.4s ease-out forwards;
}

.animate-fade-in-right.animate-in {
  animation: fadeInRight 0.4s ease-out forwards;
}

.animate-fade-in-scale.animate-in {
  animation: fadeInScale 0.4s ease-out forwards;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

/* Animaciones de entrada */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-80px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(80px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Animaciones en loop */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes floatParticles {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(30px, -40px) rotate(90deg);
  }

  50% {
    transform: translate(-20px, -80px) rotate(180deg);
  }

  75% {
    transform: translate(-35px, -40px) rotate(270deg);
  }

  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-5deg);
  }

  75% {
    transform: rotate(5deg);
  }
}

/* Variables CSS para glow - Se establecen dinámicamente inline en cada elemento */
:root {
  --vv-glow-color-weak: rgba(0, 0, 0, 0);
  --vv-glow-color-strong: rgba(0, 0, 0, 0);
}

@keyframes glow {

  0%,
  100% {
    box-shadow: 0 0 5px var(--vv-glow-color-weak);
  }

  50% {
    box-shadow: 0 0 20px var(--vv-glow-color-strong);
  }
}

/* Clases de animación */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-wiggle {
  animation: wiggle 1s ease-in-out infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

@keyframes heartbeat {

  0%,
  100% {
    transform: scale(1);
  }

  10%,
  30% {
    transform: scale(0.9);
  }

  20%,
  40% {
    transform: scale(1.1);
  }

  50% {
    transform: scale(1.05);
  }

  60% {
    transform: scale(1);
  }
}

/* ==========================================================================
   SISTEMA DE CARGA ENTRE PÁGINAS
   ========================================================================== */

.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.page-loader.active {
  opacity: 1;
}

.loader-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0f0805 0%, #3d2015 20%, #1a0d08 40%, #4a2818 60%, #1f1209 80%, #0f0805 100%);
}

.loader-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 131, 17, 0.3) 0%, rgba(245, 168, 0, 0.15) 30%, transparent 60%);
  animation: loaderPulse 2s ease-in-out infinite;
}

.loader-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.loader-icon-wrapper {
  width: 150px;
  height: 150px;
  margin: 0 auto 30px;
  position: relative;
  animation: iconFloat 2s ease-in-out infinite;
}

.loader-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 40px rgba(255, 131, 17, 0.6));
  animation: iconSpin 3s linear infinite, iconGlow 2s ease-in-out infinite;
}

/* ESTILOS DEL LOADER MOVIDOS A template-parts/loader-*.php CON COLORES DINÁMICOS */
/* Se mantienen solo las animaciones necesarias */

/* Animaciones del loader */
@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes iconSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* iconGlow con colores dinámicos definido en cada loader */

@keyframes loaderRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes textPulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

@keyframes progressBar {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}

@keyframes loaderPulse {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

/* ==========================================================================
   DYNAMIC COMPONENT SELECTORS (Moved from color-system-css.php)
   These selectors utilize the CSS Variables generated in the head.
   ========================================================================== */

/* === CLASES BÁSICAS DE COLORES === */
.text-primary {
  color: var(--color-primary) !important;
}

.text-secondary {
  color: var(--color-secondary) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-error {
  color: var(--color-error) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-info {
  color: var(--color-info) !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-accent {
  background-color: var(--color-accent) !important;
}

/* === SELECCIÓN (Select) Y FORMS === */
::selection {
  background-color: var(--color-primary);
  color: var(--text-on-primary);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--text-on-primary);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary) !important;
  outline: 2px solid rgba(var(--color-primary-rgb), 0.2) !important;
}

/* === ENLACES (Si no heredan bien de body) === */
a:not(.btn):not(.components-button) {
  color: var(--color-primary);
}

a:not(.btn):not(.components-button):hover {
  color: var(--color-primary-dark);
}

/* === BULLETS Y LISTAS === */
ul.custom-bullets li::before {
  color: var(--color-primary);
}

/* === ICONOS === */
.icon-primary {
  color: var(--color-primary);
}

.icon-container.bg-primary {
  background-color: rgba(var(--color-primary-rgb), 0.1) !important;
  color: var(--color-primary) !important;
}

/* === DIVISORES Y RECUADROS === */
.border-primary {
  border-color: var(--color-primary) !important;
}

hr.primary {
  border-top-color: var(--color-primary);
}

/* === ELEMENTOS ESPECÍFICOS DEL TEMA === */
.pricing-card.featured {
  border-color: var(--color-primary);
  box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.15);
}

.pricing-card.featured .badge {
  background-color: var(--color-primary);
  color: var(--text-on-primary);
}

.service-card:hover .icon-box {
  background-color: var(--color-primary);
  color: var(--text-on-primary);
}

.testimonial-card .quote-icon {
  color: rgba(var(--color-primary-rgb), 0.2);
}

.step-number {
  background-color: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.step-number::after {
  border-left-color: rgba(var(--color-primary-rgb), 0.2);
}

/* === MÓDULO LEGAL/COOKIES === */
.variavista-cookie-banner,
.variavista-cookie-overlay {
  --banner-primary: var(--color-primary);
  --banner-primary-hover: var(--color-primary-dark);
  --banner-text-on-primary: var(--text-on-primary);
}

/* =====================================================
   BOTONES
   ===================================================== */

header .btn-primary,
main .btn-primary,
.cookie-banner-buttons .btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  border: var(--btn-primary-border) !important;
  border-bottom: var(--btn-primary-border-bottom, var(--btn-primary-border)) !important;
  backdrop-filter: var(--btn-primary-backdrop) !important;
  -webkit-backdrop-filter: var(--btn-primary-backdrop) !important;
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-border-radius);
  transition: all 0.3s ease;
}

header .btn-primary:hover,
main .btn-primary:hover,
.cookie-banner-buttons .btn-primary:hover {
  background: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-color) !important;
  border: var(--btn-primary-hover-border) !important;
  border-bottom: var(--btn-primary-hover-border-bottom, var(--btn-primary-hover-border)) !important;
  transform: var(--btn-primary-hover-transform) !important;
  box-shadow: var(--btn-primary-hover-shadow) !important;
  filter: none;
}

/* Botones secundarios (Contexto CLARO) */
header .btn-secondary,
main .btn-secondary,
.cookie-banner-buttons .btn-secondary {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
  border: var(--btn-secondary-border) !important;
  border-bottom: var(--btn-secondary-border-bottom, var(--btn-secondary-border)) !important;
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-border-radius);
  transition: all 0.3s ease;
}

header .btn-secondary:hover,
main .btn-secondary:hover,
.cookie-banner-buttons .btn-secondary:hover {
  background: var(--btn-secondary-hover-bg) !important;
  color: var(--btn-secondary-hover-color) !important;
  border: var(--btn-secondary-hover-border) !important;
  border-bottom: var(--btn-secondary-hover-border-bottom, var(--btn-secondary-hover-border)) !important;
  transform: var(--btn-secondary-hover-transform) !important;
  box-shadow: var(--btn-secondary-hover-shadow) !important;
}

/* Botones secundarios - Contexto OSCURO (Footer) */
footer .btn-secondary {
  background: transparent;
  color: var(--color-outline-on-dark);
  border: 2px solid var(--color-outline-on-dark);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--button-border-radius);
  transition: all 0.3s ease;
}

footer .btn-secondary:hover {
  background: var(--color-outline-on-dark);
  color: var(--footer-bg-color);
  /* Texto oscuro al hover sobre blanco */
  border-color: var(--color-outline-on-dark);
}

/* Botones pequeños */
header .btn-small,
main .btn-small,
footer .btn-small {
  padding: calc(var(--button-padding-y) * 0.6) calc(var(--button-padding-x) * 0.75);
  font-size: calc(var(--button-font-size) * 0.875);
}

/* === CLASES UTILITY PARA CONTRASTE AUTOMÁTICO === */
.bg-primary,
.bg-primary * {
  color: var(--text-on-primary) !important;
}

.bg-secondary,
.bg-secondary * {
  color: var(--text-on-secondary) !important;
}

.hero-section.bg-primary,
.hero-section.bg-primary h1,
.hero-section.bg-primary h2,
.hero-section.bg-primary h3,
.hero-section.bg-primary p,
section[style*="background"].bg-primary *,
section[class*="hero"].bg-primary * {
  color: var(--text-on-primary) !important;
}

/* Forzar respeto de colores inline en hero */
section[style*="linear-gradient"] h1[style],
section[style*="linear-gradient"] h2[style],
section[style*="linear-gradient"] h3[style],
section[style*="linear-gradient"] h4[style],
section[style*="linear-gradient"] h5[style],
section[style*="linear-gradient"] h6[style],
section[style*="linear-gradient"] p[style],
section[style*="background"] h1[style],
section[style*="background"] h2[style],
section[style*="background"] h3[style],
section[style*="background"] p[style],
section.relative[style*="linear-gradient"] h1[style],
section.relative[style*="linear-gradient"] h2[style],
section.relative[style*="linear-gradient"] h3[style],
section.relative[style*="linear-gradient"] p[style] {
  color: unset;
}

/* =====================================================
   FUENTES
   ===================================================== */
h1,
.h1 {
  font-family: var(--font-headings) !important;
  font-weight: var(--font-weight-h1) !important;
  font-size: var(--font-size-h1) !important;
}

h2:not(.service-bullets-title),
.h2:not(.service-bullets-title) {
  font-family: var(--font-headings) !important;
  font-weight: var(--font-weight-h2) !important;
  font-size: var(--font-size-h2) !important;
}

h3,
.h3 {
  font-family: var(--font-headings) !important;
  font-weight: var(--font-weight-h3) !important;
  font-size: var(--font-size-h3) !important;
}

h4,
h5,
h6,
.h4,
.h5,
.h6 {
  font-family: var(--font-headings) !important;
  font-weight: var(--font-weight-h4-h6) !important;
  font-size: var(--font-size-h4-h6) !important;
}

[class*="heading"],
.font-brand-display,
.title,
.titulo,
.entry-title,
.page-title,
.post-title,
.widget-title,
.section-title {
  font-family: var(--font-headings) !important;
}

body {
  font-family: var(--font-primary) !important;
  font-weight: var(--font-weight-body) !important;
  font-size: var(--font-size-body) !important;
}

p,
span:not(h1 span):not(h2 span):not(h3 span):not(h4 span):not(h5 span):not(h6 span),
a:not(h1 a):not(h2 a):not(h3 a):not(h4 a):not(h5 a):not(h6 a),
li,
td,
th,
dd,
dt,
label,
input,
textarea,
select,
.font-brand-body,
.text-body,
blockquote,
figcaption {
  font-family: var(--font-primary) !important;
}

* h1,
* h2,
* h3,
* h4,
* h5,
* h6,
div h1,
div h2,
div h3,
div h4,
div h5,
div h6,
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  font-family: var(--font-headings) !important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .h1,
html body .h2,
html body .h3,
html body .h4,
html body .h5,
html body .h6,
html body [class*="heading"],
html body .font-brand-display,
html body .title,
html body .entry-title,
html body .page-title,
html body .post-title,
html body .widget-title,
html body .section-title {
  font-family: var(--font-headings) !important;
}

/* PROTECCIÓN DASHICONS Y ADMIN BAR */
#wpadminbar,
#wpadminbar *,
#wpadminbar *:before,
#wpadminbar *:after,
#adminmenu,
#adminmenu *,
#adminmenu *:before,
#adminmenu *:after {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

#wpadminbar .ab-icon:before,
#wpadminbar .ab-item:before,
#wpadminbar [class*="dashicons"]:before,
#wpadminbar .wp-menu-image:before,
#adminmenu .wp-menu-image:before,
#adminmenu .dashicons-before:before,
.dashicons:before,
.dashicons-before:before,
[class*="dashicons-"]:before {
  font-family: dashicons !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
  speak: never !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* TIPOGRAFÍA RESPONSIVE - MOBILE FIRST */
@media (max-width: 639px) {

  html body h1:not(.dashicons),
  html body .h1,
  html body h1[class*="text-"],
  html body .hero-title {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h1) !important;
    font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
    line-height: 1.15 !important;
    hyphens: none !important;
    word-break: normal !important;
  }

  html body h2:not(.dashicons),
  html body .h2,
  html body h2[class*="text-"] {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h2) !important;
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }

  html body h3:not(.dashicons),
  html body .h3,
  html body h3[class*="text-"] {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h3) !important;
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
  }

  html body h4,
  html body h5,
  html body h6,
  html body .h4,
  html body .h5,
  html body .h6 {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h4-h6) !important;
    font-size: clamp(1rem, 3.5vw, 1.25rem) !important;
  }

  html body,
  html body p,
  html body li,
  html body .font-brand-body {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-body) !important;
    font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {

  html body h1:not(.dashicons),
  html body .h1,
  html body h1[class*="text-"],
  html body .hero-title {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h1) !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    line-height: 1.1 !important;
  }

  html body h2:not(.dashicons),
  html body .h2 {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h2) !important;
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
  }

  html body h3:not(.dashicons),
  html body .h3 {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h3) !important;
    font-size: clamp(1.25rem, 3.5vw, 1.75rem) !important;
  }
}

@media (min-width: 1024px) {

  html body h1:not(.dashicons),
  html body .h1,
  html body h1[class*="text-"],
  html body .hero-title {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h1) !important;
    font-size: var(--font-size-h1) !important;
  }

  html body h2:not(.dashicons),
  html body .h2,
  html body h2[class*="text-"] {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h2) !important;
    font-size: var(--font-size-h2) !important;
  }

  html body h3:not(.dashicons),
  html body .h3,
  html body h3[class*="text-"] {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h3) !important;
    font-size: var(--font-size-h3) !important;
  }

  html body h4,
  html body h5,
  html body h6,
  html body .h4,
  html body .h5,
  html body .h6 {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-h4-h6) !important;
    font-size: var(--font-size-h4-h6) !important;
  }

  html body,
  html body p:not([style*="font-size"]),
  html body li:not([style*="font-size"]),
  html body .font-brand-body {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-body) !important;
    font-size: var(--font-size-body) !important;
  }
}

[style*="font-size"]:not(h1):not(h2):not(h3) {
  font-size: unset !important;
}

h2.service-bullets-title,
.service-hero-card h2.service-bullets-title,
.service-hero-card .service-bullets-title {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  font-family: inherit !important;
}