/* Core Icons (merged from core-icons.css) */
@font-face{font-family:core-icons;src:url('../fonts/core-icons/core-icons.eot?geji0r');src:url('../fonts/core-icons/core-icons.eot?geji0r#iefix') format('embedded-opentype'),url('../fonts/core-icons/core-icons.ttf?geji0r') format('truetype'),url('../fonts/core-icons/core-icons.woff?geji0r') format('woff'),url('../fonts/core-icons/core-icons.svg?geji0r#core-icons') format('svg');font-weight:400;font-style:normal;font-display:block}[class*=" ci-"],[class^=ci-]{font-family:core-icons!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ci-location:before{content:"\e921"}.ci-telephone-2:before{content:"\e922"}.ci-message:before{content:"\e924"}.ci-phone-call1:before{content:"\e925"}.ci-share-alt:before{content:"\e927"}.ci-heart-solid:before{content:"\e92a"}.ci-phone-call11:before{content:"\e93a"}.ci-instagram-square:before{content:"\e055"}.ci-tiktok:before{content:"\e07b"}.ci-search:before{content:"\e851"}.ci-youtube:before{content:"\e876"}.ci-tags:before{content:"\e900"}.ci-tag:before{content:"\e901"}.ci-shopping-cart:before{content:"\e902"}.ci-magnifying-glass:before{content:"\e903"}.ci-user:before{content:"\e904"}.ci-tag1:before{content:"\e905"}.ci-down-arrow2:before{content:"\e906"}.ci-tick:before{content:"\e907"}.ci-check-mark:before{content:"\e90a"}.ci-checked:before{content:"\e90b"}.ci-plus:before{content:"\e90c"}.ci-minus:before{content:"\e90d"}.ci-back:before{content:"\e90f"}.ci-next:before{content:"\e910"}.ci-calendar-alt:before{content:"\e911"}.ci-like:before{content:"\e912"}.ci-calendar1:before{content:"\e913"}.ci-folder-open:before{content:"\e914"}.ci-folder:before{content:"\e915"}.ci-check-circle-o:before{content:"\e916"}.ci-check:before{content:"\e917"}.ci-up-arrow2:before{content:"\e918"}.ci-left-arrow2:before{content:"\e919"}.ci-right-arrow2:before{content:"\e91a"}.ci-calendar2:before{content:"\e91b"}.ci-folder1:before{content:"\e91c"}.ci-search2:before{content:"\e91d"}.ci-check3:before{content:"\e91e"}.ci-right-quote:before{content:"\e91f"}.ci-paper-plane-o:before{content:"\e920"}.ci-paper-plane:before{content:"\e923"}.ci-telephone-21:before{content:"\e926"}.ci-telephone-1:before{content:"\e928"}.ci-placeholder:before{content:"\e929"}.ci-calendar:before{content:"\e92b"}.ci-email1:before{content:"\e92f"}.ci-pin:before{content:"\e930"}.ci-clock2:before{content:"\e932"}.ci-download:before{content:"\e933"}.ci-upload:before{content:"\e934"}.ci-star1:before{content:"\e935"}.ci-menu:before{content:"\e936"}.ci-magnifying-glass1:before{content:"\e937"}.ci-shopping-cart1:before{content:"\e938"}.ci-close:before{content:"\e939"}.ci-phone-call2:before{content:"\e93b"}.ci-quote1:before{content:"\e93c"}.ci-check2:before{content:"\e93d"}.ci-play-button:before{content:"\e93e"}.ci-left-arrow1:before{content:"\e93f"}.ci-right-arrow1:before{content:"\e940"}.ci-down-arrow1:before{content:"\e941"}.ci-up-arrow1:before{content:"\e942"}.ci-price-tag:before{content:"\e943"}.ci-location1:before{content:"\e947"}.ci-location2:before{content:"\e948"}.ci-search-bold:before{content:"\e94a"}.ci-map-pin:before{content:"\e94b"}.ci-arrow-pointing-to-up:before{content:"\e94c"}.ci-arrow-pointing-to-down:before{content:"\e94d"}.ci-arrow-pointing-to-left:before{content:"\e94e"}.ci-arrow-pointing-to-right:before{content:"\e94f"}.ci-down-arrow:before{content:"\e950"}.ci-up-arrow:before{content:"\e951"}.ci-left-arrow:before{content:"\e952"}.ci-right-arrow:before{content:"\e953"}.ci-bubbles2:before{content:"\e96d"}.ci-bubbles4:before{content:"\e970"}.ci-single-page:before{content:"\e976"}.ci-youtube2:before{content:"\ea9e"}.ci-star:before{content:"\f005"}.ci-user1:before{content:"\f007"}.ci-check1:before{content:"\f00c"}.ci-clock:before{content:"\f017"}.ci-clock1:before{content:"\f018"}.ci-play:before{content:"\f04b"}.ci-chevron-left:before{content:"\f053"}.ci-chevron-right:before{content:"\f054"}.ci-check-circle:before{content:"\f058"}.ci-check-circle1:before{content:"\f059"}.ci-chevron-up:before{content:"\f077"}.ci-chevron-down:before{content:"\f078"}.ci-shopping-cart2:before{content:"\f07a"}.ci-twitter-square:before{content:"\f081"}.ci-facebook-square:before{content:"\f082"}.ci-comments:before{content:"\f086"}.ci-comments1:before{content:"\f087"}.ci-linkedin:before{content:"\f08c"}.ci-github-square:before{content:"\f092"}.ci-twitter:before{content:"\f099"}.ci-facebook:before{content:"\f09a"}.ci-github:before{content:"\f09b"}.ci-pinterest:before{content:"\f0d2"}.ci-pinterest-square:before{content:"\f0d3"}.ci-google-plus-square:before{content:"\f0d4"}.ci-google-plus-g:before{content:"\f0d5"}.ci-envelope:before{content:"\f0e0"}.ci-linkedin-in:before{content:"\f0e1"}.ci-envelope1:before{content:"\f0e2"}.ci-check-square:before{content:"\f14a"}.ci-check-square1:before{content:"\f14b"}.ci-youtube1:before{content:"\f167"}.ci-instagram:before{content:"\f16d"}.ci-tumblr:before{content:"\f173"}.ci-tumblr-square:before{content:"\f174"}.ci-dribbble:before{content:"\f17d"}.ci-vimeo-square:before{content:"\f194"}.ci-google:before{content:"\f1a0"}.ci-behance:before{content:"\f1b4"}.ci-behance-square:before{content:"\f1b5"}.ci-pinterest-p:before{content:"\f231"}.ci-vimeo-v:before{content:"\f27d"}.ci-google-plus:before{content:"\f2b3"}.ci-user-circle:before{content:"\f2bd"}.ci-dribbble-square:before{content:"\f397"}.ci-facebook-f:before{content:"\f39e"}.ci-google-drive:before{content:"\f3aa"}.ci-google-play:before{content:"\f3ab"}.ci-vimeo:before{content:"\f40a"}.ci-youtube-square:before{content:"\f431"}.ci-heart:before{content:"\f004"}.ci-handshake:before{content:"\f2b5"}.ci-calendar-alt1:before{content:"\f073"}.ci-quote-left:before{content:"\f10d"}.ci-quote-right:before{content:"\f10e"}.ci-calendar3:before{content:"\f133"}.ci-user-circle1:before{content:"\f2be"}.ci-phone2:before{content:"\f095"}.ci-phone-call:before{content:"\e908"}.ci-quote:before{content:"\e909"}.ci-telephone:before{content:"\e90e"}
/**
 * ============================================
 * AGROSOIL - ANIMACIONES GLOBALES
 * ============================================
 *
 * Biblioteca de animaciones reutilizables.
 * Todas las animaciones CSS en un solo lugar.
 *
 * CONTENIDO:
 * - Keyframes base
 * - Clases de animación
 * - Efectos de hover
 * - Transiciones de entrada
 */

/* ============================================
   KEYFRAMES - ANIMACIONES BASE
   ============================================ */

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Float (levitación suave) */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Shimmer (brillo que pasa) */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Glow (resplandor) */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 180, 216, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 180, 216, 0.6);
    }
}

/* Bounce */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-8px);
    }
}

/* Particle Float (hero particles que suben desde abajo) */
@keyframes particleFloat {
    0%, 100% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 1; transform: translateY(85vh) scale(1); }
    90% { opacity: 1; transform: translateY(5vh) scale(1); }
    100% { transform: translateY(-5vh) scale(0); opacity: 0; }
}

/* Scroll Bounce (indicador de scroll en heroes) */
@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* Shake */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Spin */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Slide In Modal */
@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Arrow Pulse (para flechas del slider) */
@keyframes arrowPulse {
    0%, 100% {
        box-shadow: 0 10px 40px rgba(0, 180, 216, 0.4);
    }
    50% {
        box-shadow: 0 10px 60px rgba(0, 180, 216, 0.6);
    }
}

/* Leaf Loading (hojas del preloader) */
@keyframes leafLoad {
    0%, 100% {
        background: #ccc;
        opacity: 0.3;
        transform: rotate(-45deg) scale(1);
    }
    50% {
        background: var(--color-secondary);
        opacity: 1;
        transform: rotate(-45deg) scale(1.1);
    }
}

/* ============================================
   CLASES DE ANIMACION
   ============================================ */

/* Aplicar animaciones */
.animate-fadeIn { animation: fadeIn var(--transition-slow) ease forwards; }
.animate-fadeInUp { animation: fadeInUp var(--transition-slow) ease forwards; }
.animate-fadeInDown { animation: fadeInDown var(--transition-slow) ease forwards; }
.animate-fadeInLeft { animation: fadeInLeft var(--transition-slow) ease forwards; }
.animate-fadeInRight { animation: fadeInRight var(--transition-slow) ease forwards; }
.animate-scaleIn { animation: scaleIn var(--transition-slow) ease forwards; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }

/* Delays de animación */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* Duraciones de animación */
.duration-fast { animation-duration: 0.3s !important; }
.duration-normal { animation-duration: 0.5s !important; }
.duration-slow { animation-duration: 0.8s !important; }
.duration-slower { animation-duration: 1.2s !important; }

/* ============================================
   SCROLL REVEAL — Elementos ocultos hasta que entran al viewport
   Uso: <div class="reveal"> o <div class="reveal reveal-left">
   El JS agrega la clase 'revealed' al entrar en pantalla.
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.reveal-left { transform: translateX(-40px); }
.reveal.reveal-right { transform: translateX(40px); }
.reveal.reveal-scale { transform: scale(0.92); }
.reveal.revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}
.reveal.reveal-d1 { transition-delay: 0.1s; }
.reveal.reveal-d2 { transition-delay: 0.2s; }
.reveal.reveal-d3 { transition-delay: 0.3s; }
.reveal.reveal-d4 { transition-delay: 0.4s; }
.reveal.reveal-d5 { transition-delay: 0.5s; }
.reveal-fade { opacity: 0; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-fade.revealed { opacity: 1; }

/* ============================================
   EFECTOS DE HOVER
   ============================================ */

/* Lift (elevar) */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Scale */
.hover-scale {
    transition: transform var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Brightness */
.hover-bright {
    transition: filter var(--transition-normal);
}

.hover-bright:hover {
    filter: brightness(1.1);
}

/* Glow */
.hover-glow {
    transition: box-shadow var(--transition-normal);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(0, 180, 216, 0.4);
}

/* Rotate slight */
.hover-rotate {
    transition: transform var(--transition-normal);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* ============================================
   TRANSICIONES PARA ELEMENTOS COMUNES
   ============================================ */

/* Imágenes con hover */
.elementor-widget-image img {
    transition: all var(--transition-bounce) !important;
}

.elementor-widget-image:hover img {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
}

/* Iconos con hover */
.elementor-icon,
.elementor-widget-icon-box .elementor-icon {
    transition: all var(--transition-bounce) !important;
}

.elementor-widget-icon-box:hover .elementor-icon {
    transform: scale(1.15) rotateY(10deg) !important;
    animation: pulse 1s ease-in-out infinite !important;
}

/* Contadores animados */
.elementor-counter-number-wrapper {
    transition: all var(--transition-normal) !important;
}

.elementor-widget-counter:hover .elementor-counter-number-wrapper {
    transform: scale(1.15) !important;
    color: var(--color-secondary) !important;
}

/* Secciones con transición */
.elementor-section {
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

/* ============================================
   EFECTOS DE SHIMMER (brillo decorativo)
   ============================================ */

.shimmer-line {
    position: relative;
    overflow: hidden;
}

.shimmer-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: translateX(-100%);
    animation: shimmer 2s infinite;
}

/* ============================================
   LINEAS DECORATIVAS ANIMADAS
   ============================================ */

/* Línea que crece en hover */
.line-grow {
    position: relative;
}

.line-grow::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
    transition: width var(--transition-normal);
}

.line-grow:hover::after {
    width: 100%;
}

/* ============================================
   REDUCE MOTION (accesibilidad)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animate-fadeIn,
    .animate-fadeInUp,
    .animate-fadeInDown,
    .animate-fadeInLeft,
    .animate-fadeInRight,
    .animate-scaleIn,
    .animate-pulse,
    .animate-float,
    .animate-bounce,
    .animate-spin,
    .animate-glow {
        animation: none !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}/**
 * ============================================
 * AGROSOIL - ESTILOS BASE / RESET
 * ============================================
 *
 * Estilos fundamentales y reset del tema.
 * Este archivo se carga primero después de variables.css
 *
 * CONTENIDO:
 * - Reset básico
 * - Estilos de documento
 * - Enlaces base
 * - Imágenes y media
 * - Formularios base
 * - Utilidades de accesibilidad
 */

/* ============================================
   RESET BASICO
   ============================================ */

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

* {
    margin: 0;
    padding: 0;
}

/* ============================================
   FUENTE GLOBAL - POPPINS
   ============================================ */

* {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Excepción: Slider de Elementor mantiene Roboto */
.elementor-widget-slides,
.elementor-widget-slides *,
.elementor-slides *,
.swiper-slide *,
.elementor-slide-content * {
    font-family: "Roboto", Sans-serif !important;
}

/* ============================================
   EXCEPCION: SECCIONES CON FONDO OSCURO
   Cada hero define sus colores en su propio CSS.
   Aquí solo van reglas de slider y secciones no-hero.
   ============================================ */

/* Slider de Elementor - texto blanco */
.elementor-widget-slides h1,
.elementor-widget-slides h2,
.elementor-widget-slides h3,
.elementor-widget-slides .elementor-slide-heading,
.elementor-slides h1,
.elementor-slides h2,
.elementor-slide-heading,
.elementor-slide-content h1,
.elementor-slide-content h2,
.swiper-slide h1,
.swiper-slide h2,
.swiper-slide .elementor-slide-heading {
    color: #fff !important;
}

/* Slider subtitulo */
.elementor-slide-description,
.elementor-slide-content p,
.elementor-widget-slides p,
.swiper-slide p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Highlights y subtítulos de heroes:
   Cada CSS de página define sus propios colores.
   NO sobreescribir aquí. */

/* =====================================================
   HEROES: cada pagina controla su propio padding
   en su CSS individual (service-suelos.css, etc.)
   ===================================================== */

/* Journey section (Nuestra Experiencia) */
.exp-journey-header h2 {
    color: #fff !important;
}

.exp-journey-header p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Milestone cards */
.exp-milestone-card h3 {
    color: #fff !important;
}

.exp-milestone-card p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* CTA sections con fondo oscuro */
.exp-cta h2 {
    color: #fff !important;
}

.exp-cta p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   OFERTAS PAGE - Carousel (hero se controla en page-ofertas.css)
   ============================================ */

/* Carousel slides - color controlado por --text-color en cada slide */
/* Los colores se definen en home-ofertas-carousel.css y page-ofertas.css via CSS variables */

/* CTA de ofertas */
.ofertas-cta h2 {
    color: #fff !important;
}

.ofertas-cta p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   SECCIONES CON FONDO OSCURO (NO HEROES)
   ============================================ */

/* Aliados page - CTA y Cards */
.al-cta h2,
.al-card h3,
.al-title {
    color: #fff !important;
}

.al-cta p,
.al-card-desc,
.al-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Servicios - Secciones oscuras */
.soil-equipment h2,
.soil-equipment h3,
.soil-tech-card h3,
.foliar-equipment h2,
.foliar-equipment h3,
.water-equipment h2,
.water-equipment h3,
.service-tech h2,
.service-tech h3,
.tech-card h3 {
    color: #fff !important;
}

.soil-equipment p,
.soil-tech-card p,
.foliar-equipment p,
.water-equipment p,
.service-tech p,
.tech-card p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Secciones genéricas con fondo oscuro */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
[class*="-dark"] h1,
[class*="-dark"] h2,
[class*="-dark"] h3 {
    color: #fff !important;
}

.dark-section p,
.bg-dark p,
[class*="-dark"] p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Footer y CTAs oscuros generales */
.cta-dark h2,
.cta-section h2,
footer h1,
footer h2,
footer h3,
footer h4 {
    color: #fff !important;
}

.cta-dark p,
.cta-section p,
footer p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ============================================
   DOCUMENTO
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: auto !important;
}

body, html {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevenir overflow horizontal + fondo global (override tema padre) */
body {
    overflow-x: hidden;
    background-color: var(--color-bg-white) !important;
}

/* ============================================
   TIPOGRAFIA BASE - JERARQUIA GLOBAL
   ============================================ */

/* Titulos - Jerarquía completa */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
}

/* Elementor headings — !important para sobreescribir inline styles de Elementor */
.elementor-widget h1,
.elementor-widget h2,
.elementor-widget h3,
.elementor-widget h4,
.elementor-widget h5,
.elementor-widget h6,
.elementor-heading-title {
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-primary) !important;
    line-height: var(--line-height-tight) !important;
    margin-bottom: var(--spacing-md) !important;
}

/* H1 - Títulos principales */
h1, .elementor-widget h1,
.elementor-heading-title.elementor-size-xxl {
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-extrabold) !important;
}

/* H2 - Títulos de sección */
h2, .elementor-widget h2,
.elementor-heading-title.elementor-size-xl {
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-bold) !important;
}

/* H3 - Subtítulos */
h3, .elementor-widget h3,
.elementor-heading-title.elementor-size-large {
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-bold) !important;
}

/* H4 - Títulos de cards/componentes */
h4, .elementor-widget h4,
.elementor-heading-title.elementor-size-medium {
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* H5 - Títulos pequeños */
h5, .elementor-widget h5,
.elementor-heading-title.elementor-size-small {
    font-size: var(--font-size-h5) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* H6 - Títulos mínimos */
h6, .elementor-widget h6 {
    font-size: var(--font-size-h6) !important;
    font-weight: var(--font-weight-semibold) !important;
}

/* Párrafos y texto de cuerpo */
p {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-md);
}

/* Elementor paragraphs — !important para sobreescribir inline styles de Elementor */
.elementor-widget p,
.elementor-widget-text-editor p,
.elementor-widget-text-editor {
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-text-secondary) !important;
    line-height: var(--line-height-relaxed) !important;
    margin-bottom: var(--spacing-md) !important;
}

/* Texto grande (descripciones, subtítulos) */
.text-lg, .lead,
.elementor-widget-text-editor.elementor-widget-text-editor--large p {
    font-size: var(--font-size-body-lg) !important;
    line-height: var(--line-height-loose) !important;
}

/* Texto pequeño */
small, .text-sm, .small {
    font-size: var(--font-size-small) !important;
}

/* Texto extra pequeño */
.text-xs {
    font-size: var(--font-size-xs) !important;
}

/* Texto destacado (strong, bold) */
strong, b {
    font-weight: var(--font-weight-bold) !important;
}

/* Texto con énfasis */
em, i {
    font-style: italic;
}

/* Spans con color primario (highlights) */
span.highlight,
.elementor-widget span.highlight,
h1 span, h2 span, h3 span {
    color: var(--color-primary) !important;
}

/* Labels y badges */
.badge, .label, .tag {
    font-size: var(--font-size-badge) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-wide) !important;
}

/* Botones — reset parent theme (agrios: line-height:60px, padding:0 50px)
   Componentes usan !important propio para override de font-size/padding */
button, .btn, .button,
.elementor-button,
[type="button"],
[type="submit"] {
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1.4 !important;
}

/* Inputs y formularios */
input, textarea, select {
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-regular) !important;
}

/* ============================================
   ENLACES
   ============================================ */

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-secondary-dark);
}

a:focus {
    outline: none;
}

/* ============================================
   LISTAS
   ============================================ */

ul, ol {
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

li {
    margin-bottom: var(--spacing-xs);
}

/* ============================================
   IMAGENES Y MEDIA
   ============================================ */

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
}

/* ============================================
   FORMULARIOS BASE
   ============================================ */

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    margin: 0;
}

button, input {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

textarea {
    resize: vertical;
}

/* ============================================
   TABLAS
   ============================================ */

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* ============================================
   UTILIDADES DE ACCESIBILIDAD
   ============================================ */

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-text-white);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: var(--z-tooltip);
    transition: top var(--transition-fast);
}

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

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   CONTENEDORES PRINCIPALES
   ============================================ */

.agrios-container,
.agrosoil-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-x);
}

/* Fix para contenedores principales */
#wrapper,
#page,
#main-content,
.site-main,
.content-area {
    max-width: 100%;
}

/* Eliminar padding/margin extra de contenedores */
.page-template #main-content,
.single-service #main-content,
.elementor-page #main-content {
    padding: 0;
    margin: 0;
}

#main-content,
.site-main,
#content-wrap,
.inner-content-wrap,
#inner-content,
article.page-content {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ============================================
   SELECCION DE TEXTO
   ============================================ */

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

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

/* ============================================
   SCROLLBAR PERSONALIZADA (opcional)
   ============================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--color-text-light);
    border-radius: var(--border-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ============================================
   TIPOGRAFIA RESPONSIVA - MOVIL
   ============================================ */

@media (max-width: 768px) {
    /* H1 - Títulos principales móvil */
    h1, .elementor-widget h1,
    .elementor-heading-title.elementor-size-xxl {
        font-size: var(--font-size-h1-mobile) !important;
    }

    /* H2 - Títulos de sección móvil */
    h2, .elementor-widget h2,
    .elementor-heading-title.elementor-size-xl {
        font-size: var(--font-size-h2-mobile) !important;
    }

    /* H3 - Subtítulos móvil */
    h3, .elementor-widget h3,
    .elementor-heading-title.elementor-size-large {
        font-size: var(--font-size-h3-mobile) !important;
    }

    /* H4 móvil */
    h4, .elementor-widget h4,
    .elementor-heading-title.elementor-size-medium {
        font-size: 18px !important;
    }

    /* H5-H6 móvil */
    h5, .elementor-widget h5,
    h6, .elementor-widget h6 {
        font-size: 16px !important;
    }

    /* Párrafos móvil */
    p, .elementor-widget p,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor {
        font-size: var(--font-size-body-mobile) !important;
    }

    /* Texto grande móvil */
    .text-lg, .lead {
        font-size: var(--font-size-body-lg-mobile) !important;
    }
}/**
 * ============================================
 * AGROSOIL - ESTILOS RESPONSIVE GLOBALES
 * ============================================
 *
 * Sistema de responsive design unificado.
 * Todos los breakpoints y ajustes móviles centralizados.
 *
 * BREAKPOINTS:
 * - 1400px: Large desktop (2xl)
 * - 1200px: Desktop (xl)
 * - 1024px: Tablet landscape / Small desktop (lg)
 * - 768px:  Tablet portrait (md)
 * - 576px:  Mobile landscape (sm)
 * - 480px:  Mobile portrait (xs)
 *
 * METODOLOGIA: Mobile-first con ajustes para pantallas grandes
 */

/* ============================================
   LARGE DESKTOP (max-width: 1400px)
   ============================================ */

@media (max-width: 1400px) {
    :root {
        --container-max-width: 1200px;
    }
}

/* ============================================
   DESKTOP (max-width: 1200px)
   ============================================ */

@media (max-width: 1200px) {
    :root {
        --container-max-width: 1024px;
    }
}

/* ============================================
   TABLET LANDSCAPE / SMALL DESKTOP (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {
    :root {
        --font-size-h1: 42px;
        --font-size-h2: 32px;
        --section-padding-y: 50px;
    }

    /* Contenedores */
    .agrios-container,
    .agrosoil-container {
        padding: 0 var(--spacing-md);
    }

    /* Fix overflow móvil */
    #wrapper,
    #page,
    #main-content,
    .site-main,
    .content-area {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .agrios-container,
    .elementor-section-stretched,
    footer,
    .agrios-footer {
        max-width: 100% !important;
    }
}

/* ============================================
   TABLET PORTRAIT (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
    :root {
        /* Tipografía móvil */
        --font-size-h1: 32px;
        --font-size-h2: 26px;
        --font-size-h3: 20px;
        --font-size-h4: 18px;
        --font-size-body-lg: 16px;

        /* Espaciado móvil */
        --section-padding-y: 40px;
        --container-padding-x: 16px;
    }

    /* ===== TIPOGRAFIA RESPONSIVE ===== */

    /* Títulos de sección */
    .section-title,
    .why-static-title,
    .agrosoil-services-header h2,
    .testimonios-title,
    .agrosoil-hero-title,
    .agrosoil-alianzas-title,
    .casos-exito-title,
    #why-static-section h2,
    #agrosoil-services-section h2,
    #testimonios-section h2 {
        font-size: var(--font-size-h1) !important;
    }

    /* Subtítulos verdes */
    .section-title .highlight,
    .why-static-title .highlight,
    .agrosoil-services-header h2 .highlight,
    .testimonios-title .highlight,
    .agrosoil-hero-title .highlight,
    .agrosoil-alianzas-title .highlight,
    .casos-exito-title .highlight {
        font-size: var(--font-size-h2) !important;
    }

    /* Badges de sección — Estándar mobile: 11px / 7px 14px */
    .section-badge,
    .why-static-badge,
    .agrosoil-services-badge,
    .testimonios-badge,
    .agrosoil-hero-badge,
    .agrosoil-alianzas-badge,
    .casos-exito-badge,
    .home-form-title-badge,
    .cart-hero-badge {
        font-size: 11px !important;
        padding: 7px 14px !important;
    }

    /* Descripciones */
    .section-description,
    .agrosoil-services-subtitle,
    .testimonios-subtitle,
    .why-static-subtitle,
    .agrosoil-hero-description,
    .agrosoil-alianzas-description {
        font-size: var(--font-size-body) !important;
    }

    /* Títulos de cards */
    .card-title,
    .why-static-card-title {
        font-size: 17px !important;
    }

    /* Texto de cards */
    .card-text,
    .why-static-card-text,
    .testimonio-text {
        font-size: var(--font-size-small) !important;
    }

    /* ===== LAYOUT RESPONSIVE ===== */

    /* Grids a una columna */
    .agrosoil-grid-2,
    .agrosoil-grid-3,
    .agrosoil-grid-4 {
        grid-template-columns: 1fr !important;
    }

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

    .agrosoil-btn,
    .elementor-button {
        padding: 12px 24px !important;
        font-size: var(--font-size-small) !important;
    }

    /* ===== CARDS RESPONSIVE ===== */

    /* Cards de planes */
    .elementor-element-planes02 .elementor-column {
        margin-bottom: var(--spacing-lg) !important;
    }

    .elementor-element-planes02 .elementor-column .elementor-widget-wrap {
        padding: 25px 20px !important;
    }

    /* ===== EFECTOS HOVER REDUCIDOS EN MOVIL ===== */

    .elementor-element-benef02 .elementor-column:hover .elementor-widget-wrap,
    .elementor-element-benef03 .elementor-column:hover .elementor-widget-wrap {
        transform: translateY(-8px) !important;
    }

    /* Pasos del proceso - sin línea conectora */
    .elementor-element-proceso02 .elementor-column::after {
        display: none !important;
    }

    /* Hover en botones reducido */
    .elementor-button:hover {
        transform: translateY(-2px) !important;
    }
}

/* ============================================
   MOBILE LANDSCAPE (max-width: 600px)
   ============================================ */

@media (max-width: 600px) {
    :root {
        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --section-padding-y: 35px;
    }

    /* Contenedores */
    .agrios-container,
    .agrosoil-container {
        padding: 0 var(--spacing-md);
    }
}

/* ============================================
   MOBILE PORTRAIT (max-width: 480px)
   ============================================ */

@media (max-width: 480px) {
    :root {
        --font-size-h1: 26px;
        --font-size-h2: 22px;
        --font-size-h3: 18px;
        --section-padding-y: 30px;
    }

    /* Padding más ajustado */
    .agrios-container,
    .agrosoil-container {
        padding: 0 var(--spacing-sm);
    }
}

/* ============================================
   UTILIDADES RESPONSIVE
   ============================================ */

/* Ocultar en móvil */
@media (max-width: 768px) {
    .hide-mobile,
    .desktop-only {
        display: none !important;
    }
}

/* Ocultar en desktop */
@media (min-width: 769px) {
    .hide-desktop,
    .mobile-only {
        display: none !important;
    }
}

/* Ocultar en tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Mostrar solo en tablet */
@media (max-width: 768px), (min-width: 1025px) {
    .tablet-only {
        display: none !important;
    }
}

/* ============================================
   FLEX RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .flex-col-mobile {
        flex-direction: column !important;
    }

    .flex-col-reverse-mobile {
        flex-direction: column-reverse !important;
    }

    .items-center-mobile {
        align-items: center !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .justify-center-mobile {
        justify-content: center !important;
    }
}

/* ============================================
   ESPACIADO RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .p-0-mobile { padding: 0 !important; }
    .px-0-mobile { padding-left: 0 !important; padding-right: 0 !important; }
    .py-0-mobile { padding-top: 0 !important; padding-bottom: 0 !important; }

    .m-0-mobile { margin: 0 !important; }
    .mx-auto-mobile { margin-left: auto !important; margin-right: auto !important; }

    .gap-sm-mobile { gap: var(--spacing-sm) !important; }
    .gap-md-mobile { gap: var(--spacing-md) !important; }
}

/* ============================================
   IMAGENES RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .img-full-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ocultar imágenes decorativas en móvil */
    .decor-image-mobile-hide,
    .elementor-widget-image.decorative {
        display: none !important;
    }
}

/* ============================================
   SCROLL-TOP OCULTO
   ============================================ */

#scroll-top,
div#scroll-top,
body #scroll-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ============================================
   PREVENIR ZOOM EN INPUTS (iOS)
   ============================================ */

@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}/**
 * ============================================
 * AGROSOIL - TIPOGRAFIA GLOBAL
 * ============================================
 *
 * Sistema tipográfico unificado para todo el sitio.
 * Usa las variables definidas en variables.css
 *
 * CONTENIDO:
 * - Títulos de sección (H2 con highlight)
 * - Badges de sección
 * - Descripciones/subtítulos
 * - Títulos de cards
 * - Texto de cards
 * - Clases utilitarias de texto
 */

/* ============================================
   TITULOS DE SECCION (H2 principales)
   ============================================ */

.section-title,
.why-static-title,
.agrosoil-services-header h2,
.testimonios-title,
.agrosoil-hero-title,
.agrosoil-alianzas-title,
.agrosoil-alianzas-section h2,
.casos-exito-title,
#why-static-section h2,
#agrosoil-services-section h2,
#testimonios-section h2 {
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-extrabold) !important;
    color: var(--color-text-primary) !important;
    line-height: var(--line-height-tight) !important;
    margin: 0 0 var(--spacing-sm) 0 !important;
}

/* Casos de éxito - texto blanco (fondo oscuro) */
.casos-exito-title {
    color: var(--color-text-white) !important;
}

/* ============================================
   SUBTITULOS VERDES (highlight dentro de H2)
   ============================================ */

.section-title .highlight,
.why-static-title .highlight,
.agrosoil-services-header h2 .highlight,
.testimonios-title .highlight,
.agrosoil-hero-title .highlight,
.agrosoil-alianzas-title .highlight,
.agrosoil-alianzas-section h2 .highlight,
.casos-exito-title .highlight {
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-extrabold) !important;
    color: var(--color-primary) !important;
    display: block !important;
    line-height: var(--line-height-tight) !important;
}

/* ============================================
   BADGES DE SECCION
   ============================================ */

.section-badge,
.why-static-badge,
.agrosoil-services-badge,
.testimonios-badge,
.agrosoil-hero-badge,
.agrosoil-alianzas-badge,
.casos-exito-badge,
.video-tips-badge,
.benefits-badge,
.process-badge,
.home-form-title-badge,
.cart-hero-badge {
    font-size: var(--font-size-badge) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-wider) !important;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
    padding: 8px 20px;
    border-radius: var(--border-radius-full);
    width: fit-content;
}

.section-badge svg,
.why-static-badge svg,
.agrosoil-services-badge svg,
.testimonios-badge svg,
.agrosoil-hero-badge svg,
.agrosoil-alianzas-badge svg,
.casos-exito-badge svg,
.video-tips-badge svg,
.benefits-badge svg,
.process-badge svg,
.home-form-title-badge svg,
.cart-hero-badge svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   DESCRIPCIONES / SUBTITULOS DE SECCION
   ============================================ */

.section-description,
.agrosoil-services-subtitle,
.testimonios-subtitle,
.why-static-subtitle,
.agrosoil-hero-description,
.agrosoil-alianzas-description {
    font-size: var(--font-size-body-lg) !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-text-secondary) !important;
    line-height: var(--line-height-loose) !important;
    max-width: 750px;
}

.casos-exito-subtitle {
    color: var(--color-text-white-muted) !important;
}

/* ============================================
   TITULOS DE CARDS
   ============================================ */

.card-title,
.why-static-card-title,
.testimonio-info strong,
.service-card-title {
    font-size: var(--font-size-body-lg) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text-primary) !important;
    line-height: var(--line-height-snug) !important;
}

/* Casos de éxito - cards con fondo oscuro */
.caso-card-title {
    color: var(--color-text-white) !important;
}

.caso-card-section-title {
    color: var(--color-primary) !important;
}

/* ============================================
   TEXTO DE CARDS
   ============================================ */

.card-text,
.why-static-card-text,
.testimonio-text,
.service-card-description {
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-regular) !important;
    color: var(--color-text-muted) !important;
    line-height: var(--line-height-relaxed) !important;
}

.caso-card-section-text,
.caso-card-results li {
    color: var(--color-text-white-muted) !important;
}

.caso-card-meta span {
    color: rgba(255, 255, 255, 0.6) !important;
}

.caso-card-meta strong {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   BADGES DE CARDS
   ============================================ */

.card-badge,
.why-static-card-badge,
.service-card .card-label {
    font-size: 11px !important;
    font-weight: var(--font-weight-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-widest) !important;
}

/* ============================================
   CLASES UTILITARIAS DE TEXTO
   ============================================ */

/* Tamaños */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-small) !important; }
.text-base { font-size: var(--font-size-body) !important; }
.text-lg { font-size: var(--font-size-body-lg) !important; }
.text-xl { font-size: var(--font-size-h4) !important; }
.text-2xl { font-size: var(--font-size-h3) !important; }
.text-3xl { font-size: var(--font-size-h2) !important; }
.text-4xl { font-size: var(--font-size-h1) !important; }

/* Pesos */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-regular) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* Colores */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-dark { color: var(--color-text-primary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-light { color: var(--color-text-light) !important; }
.text-white { color: var(--color-text-white) !important; }

/* Alineación */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Transformaciones */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* Line heights */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

/* Letter spacing */
.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }
.tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; }/**
 * ============================================
 * AGROSOIL - UTILIDADES CSS
 * ============================================
 *
 * Clases utilitarias reutilizables.
 * Inspirado en Tailwind CSS pero simplificado.
 *
 * CONTENIDO:
 * - Espaciado (margin, padding)
 * - Display y Flexbox
 * - Grid
 * - Dimensiones
 * - Bordes y sombras
 * - Fondos
 * - Visibilidad
 */

/* ============================================
   DISPLAY
   ============================================ */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* ============================================
   FLEXBOX
   ============================================ */

/* Direction */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-col { flex-direction: column !important; }
.flex-col-reverse { flex-direction: column-reverse !important; }

/* Wrap */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

/* Justify Content */
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Align Items */
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.items-stretch { align-items: stretch !important; }
.items-baseline { align-items: baseline !important; }

/* Align Self */
.self-start { align-self: flex-start !important; }
.self-center { align-self: center !important; }
.self-end { align-self: flex-end !important; }

/* Flex Grow/Shrink */
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }

/* Gap */
.gap-0 { gap: 0 !important; }
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-sm { gap: var(--spacing-sm) !important; }
.gap-md { gap: var(--spacing-md) !important; }
.gap-lg { gap: var(--spacing-lg) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }
.gap-2xl { gap: var(--spacing-2xl) !important; }

/* ============================================
   GRID
   ============================================ */

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

/* ============================================
   MARGIN
   ============================================ */

/* All sides */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

/* Horizontal */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }

/* Vertical */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-sm { margin-top: var(--spacing-sm) !important; margin-bottom: var(--spacing-sm) !important; }
.my-md { margin-top: var(--spacing-md) !important; margin-bottom: var(--spacing-md) !important; }
.my-lg { margin-top: var(--spacing-lg) !important; margin-bottom: var(--spacing-lg) !important; }
.my-xl { margin-top: var(--spacing-xl) !important; margin-bottom: var(--spacing-xl) !important; }

/* Individual */
.mt-0 { margin-top: 0 !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }

.ml-0 { margin-left: 0 !important; }
.ml-auto { margin-left: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-auto { margin-right: auto !important; }

/* ============================================
   PADDING
   ============================================ */

/* All sides */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }

/* Horizontal */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-sm { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; }
.px-md { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; }
.px-lg { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; }
.px-xl { padding-left: var(--spacing-xl) !important; padding-right: var(--spacing-xl) !important; }

/* Vertical */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-sm { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; }
.py-md { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; }
.py-lg { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; }
.py-2xl { padding-top: var(--spacing-2xl) !important; padding-bottom: var(--spacing-2xl) !important; }

/* ============================================
   DIMENSIONES
   ============================================ */

/* Width */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.w-fit { width: fit-content !important; }
.w-screen { width: 100vw !important; }

.max-w-xs { max-width: 320px !important; }
.max-w-sm { max-width: 480px !important; }
.max-w-md { max-width: 640px !important; }
.max-w-lg { max-width: 768px !important; }
.max-w-xl { max-width: 1024px !important; }
.max-w-2xl { max-width: 1200px !important; }
.max-w-full { max-width: 100% !important; }
.max-w-none { max-width: none !important; }

/* Height */
.h-full { height: 100% !important; }
.h-auto { height: auto !important; }
.h-screen { height: 100vh !important; }

.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }

/* ============================================
   BORDER RADIUS
   ============================================ */

.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-2xl { border-radius: var(--border-radius-2xl) !important; }
.rounded-full { border-radius: var(--border-radius-full) !important; }
.rounded-circle { border-radius: var(--border-radius-circle) !important; }

/* ============================================
   SOMBRAS
   ============================================ */

.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

.shadow-primary { box-shadow: var(--shadow-primary) !important; }
.shadow-secondary { box-shadow: var(--shadow-secondary) !important; }
.shadow-accent { box-shadow: var(--shadow-accent) !important; }

/* ============================================
   FONDOS
   ============================================ */

.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: var(--color-bg-white) !important; }
.bg-light { background-color: var(--color-bg-light) !important; }
.bg-gray { background-color: var(--color-bg-gray) !important; }
.bg-dark { background-color: var(--color-bg-dark) !important; }

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

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

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

/* ============================================
   BORDES
   ============================================ */

.border-0 { border: none !important; }
.border { border: var(--border-width-thin) solid var(--color-border-light) !important; }
.border-2 { border: var(--border-width-medium) solid var(--color-border-light) !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-accent { border-color: var(--color-accent) !important; }

/* ============================================
   POSICION
   ============================================ */

.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0 !important; }
.right-0 { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }

/* ============================================
   Z-INDEX
   ============================================ */

.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-20 { z-index: 20 !important; }
.z-50 { z-index: 50 !important; }
.z-dropdown { z-index: var(--z-dropdown) !important; }
.z-sticky { z-index: var(--z-sticky) !important; }
.z-fixed { z-index: var(--z-fixed) !important; }
.z-modal { z-index: var(--z-modal) !important; }

/* ============================================
   OVERFLOW
   ============================================ */

.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }

/* ============================================
   CURSOR
   ============================================ */

.cursor-auto { cursor: auto !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ============================================
   VISIBILIDAD
   ============================================ */

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ============================================
   TRANSICIONES
   ============================================ */

.transition-none { transition: none !important; }
.transition-fast { transition: all var(--transition-fast) !important; }
.transition { transition: all var(--transition-normal) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }

/* ============================================
   POINTER EVENTS
   ============================================ */

.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ============================================
   USER SELECT
   ============================================ */

.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }/**
 * ============================================
 * AGROSOIL - VARIABLES CSS GLOBALES
 * ============================================
 *
 * Este archivo contiene todas las variables CSS del tema.
 * Modificar estos valores afectará todo el sitio.
 *
 * ESTRUCTURA:
 * - Colores de marca
 * - Colores de UI
 * - Tipografía
 * - Espaciado
 * - Bordes y sombras
 * - Transiciones
 * - Breakpoints (como referencia)
 */

/* Fuente Poppins (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ============================================
       COLORES DE MARCA AGROSOIL
       ============================================ */

    /* Verde Primario - #80bc00 - Agricultura/Naturaleza */
    --color-primary: #80bc00;
    --color-primary-light: #9cd033;
    --color-primary-dark: #6a9e00;
    --color-primary-bg: rgba(128, 188, 0, 0.15);

    /* Azul Claro - #39a6de - Ciencia/Tecnología */
    --color-secondary: #39a6de;
    --color-secondary-light: #5eb8e6;
    --color-secondary-dark: #2d8fc2;
    --color-secondary-bg: rgba(57, 166, 222, 0.15);

    /* Azul Oscuro - #242e33 - Fondos/Texto */
    --color-dark: #242e33;
    --color-dark-light: #3a474e;
    --color-dark-darker: #1a2226;

    /* Dorado - Premium/Destacado */
    --color-accent: #c9a227;
    --color-accent-light: #d4a82a;
    --color-accent-dark: #b8942a;

    /* ============================================
       COLORES DE UI
       ============================================ */

    /* Textos */
    --color-text-primary: #1a1a2e;
    --color-text-secondary: #555555;
    --color-text-muted: #666666;
    --color-text-light: #999999;
    --color-text-white: #ffffff;
    --color-text-white-muted: rgba(255, 255, 255, 0.8);

    /* Fondos */
    --color-bg-white: #f6f7f0;
    --color-bg-light: #f6f7f0;
    --color-bg-gray: #f6f7f0;
    --color-bg-dark: #1a1a2e;
    --color-bg-darker: #16213e;
    --color-bg-footer: linear-gradient(180deg, #1a3a5c 0%, #0d1f33 100%);

    /* Bordes */
    --color-border-light: #e0e0e0;
    --color-border-medium: #ddd;
    --color-border-dark: rgba(0, 0, 0, 0.1);

    /* Estados */
    --color-success: #80bc00;
    --color-error: #e74c3c;
    --color-warning: #f39c12;
    --color-info: #3498db;

    /* ============================================
       TIPOGRAFIA
       ============================================ */

    /* Familias - Poppins es la tipografia oficial de AGROSOIL */
    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Poppins', sans-serif;
    --font-accent: 'Covered By Your Grace', cursive;

    /* Tamaños - Desktop */
    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;
    --font-size-body: 16px;
    --font-size-body-lg: 18px;
    --font-size-small: 14px;
    --font-size-xs: 12px;
    --font-size-badge: 13px;

    /* Tamaños - Mobile (para referencia, se aplican en responsive.css) */
    --font-size-h1-mobile: 32px;
    --font-size-h2-mobile: 26px;
    --font-size-h3-mobile: 20px;
    --font-size-body-mobile: 15px;
    --font-size-body-lg-mobile: 16px;

    /* Pesos */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    --line-height-loose: 1.7;

    /* Letter Spacing */
    --letter-spacing-tight: -0.5px;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.5px;
    --letter-spacing-wider: 1px;
    --letter-spacing-widest: 1.5px;

    /* ============================================
       ESPACIADO
       ============================================ */

    /* Base unit: 4px */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;

    /* Secciones */
    --section-padding-y: 60px;
    --section-padding-y-mobile: 40px;
    --container-max-width: 1400px;
    --container-padding-x: 20px;

    /* ============================================
       BORDES Y RADIOS
       ============================================ */

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-2xl: 24px;
    --border-radius-full: 50px;
    --border-radius-circle: 50%;

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;

    /* ============================================
       SOMBRAS
       ============================================ */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 30px 70px rgba(0, 0, 0, 0.25);

    /* Sombras con color */
    --shadow-primary: 0 8px 25px rgba(128, 188, 0, 0.3);
    --shadow-secondary: 0 8px 25px rgba(57, 166, 222, 0.3);
    --shadow-accent: 0 8px 25px rgba(201, 162, 39, 0.3);

    /* ============================================
       TRANSICIONES
       ============================================ */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.5s cubic-bezier(0.23, 1, 0.32, 1);

    /* ============================================
       Z-INDEX (escala)
       ============================================ */

    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal-backdrop: 9000;
    --z-modal: 9999;
    --z-tooltip: 10000;
    --z-preloader: 999999;

    /* ============================================
       BREAKPOINTS (solo referencia - usar en media queries)
       ============================================ */
    /*
     * --breakpoint-sm: 576px;   Mobile landscape
     * --breakpoint-md: 768px;   Tablet portrait
     * --breakpoint-lg: 1024px;  Tablet landscape / Small desktop
     * --breakpoint-xl: 1200px;  Desktop
     * --breakpoint-2xl: 1400px; Large desktop
     */
}

/* ============================================
   TEMA OSCURO (futuro)
   ============================================ */
/*
[data-theme="dark"] {
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.8);
    --color-bg-white: #1a1a2e;
    --color-bg-light: #16213e;
}
*/