/*
Theme Name: Geociclos
Theme URI: https://geociclos.cl
Author: Urantiacos SpA
Author URI: https://www.urantiacos.cl
Description: Tema personalizado para Geociclos - Soluciones Ambientales. WordPress + WooCommerce + Lazy Blocks + ACF + Bootstrap 5.
Version: 1.5.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: Proprietary
License URI: https://geociclos.cl
Text Domain: geociclos
Tags: woocommerce, custom-menu, custom-logo, featured-images
WooCommerce: true
*/

/* ══════════════════════════════════════════════
   CSS VARIABLES — DESIGN SYSTEM GEOCICLOS
   ══════════════════════════════════════════════ */
:root {
    /* Colores principales */
    --gc-green:          #43AB3B;
    --gc-green-dark:     #358C2F;
    --gc-green-light:    #5BC553;
    --gc-blue:           #1B3C73;
    --gc-blue-dark:      #122A52;
    --gc-navy:           #0D1F3C;

    /* Neutros */
    --gc-white:          #FFFFFF;
    --gc-off-white:      #F8F9FA;
    --gc-gray-100:       #F5F5F5;
    --gc-gray-200:       #E9ECEF;
    --gc-gray-300:       #DEE2E6;
    --gc-gray-400:       #CED4DA;
    --gc-gray-500:       #ADB5BD;
    --gc-gray-600:       #6C757D;
    --gc-gray-700:       #495057;
    --gc-gray-800:       #343A40;
    --gc-dark:           #1A1A1A;

    /* Tipografía */
    --gc-font-primary:   'Lato', sans-serif;
    --gc-font-heading:   'Lato', sans-serif;

    /* Tamaños de fuente */
    --gc-fs-hero:        40px;
    --gc-fs-h1:          36px;
    --gc-fs-h2:          32px;
    --gc-fs-h3:          24px;
    --gc-fs-h4:          20px;
    --gc-fs-h5:          18px;
    --gc-fs-body:        18px;
    --gc-fs-small:       14px;

    /* Line heights */
    --gc-lh-hero:        50px;
    --gc-lh-heading:     1.3;
    --gc-lh-body:        1.6;

    /* Spacing */
    --gc-section-py:     80px;
    --gc-container-max:  1200px;
    --gc-header-height:  102px;

    /* Bordes y sombras */
    --gc-radius:         8px;
    --gc-radius-lg:      12px;
    --gc-radius-pill:    999px;
    --gc-shadow:         0 2px 12px rgba(0, 0, 0, 0.08);
    --gc-shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.12);

    /* Transiciones */
    --gc-transition:     all 0.3s ease;
}

/* ══════════════════════════════════════════════
   RESET & BASE
   ══════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    font-family: var(--gc-font-primary);
    font-size: var(--gc-fs-body);
    line-height: var(--gc-lh-body);
    color: var(--gc-dark);
    background-color: var(--gc-white);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════
   TIPOGRAFÍA
   ══════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gc-font-heading);
    font-weight: 700;
    line-height: var(--gc-lh-heading);
    color: var(--gc-dark);
    margin-top: 0;
}

h1 { font-size: var(--gc-fs-h1); }
h2 { font-size: var(--gc-fs-h2); }
h3 { font-size: var(--gc-fs-h3); }
h4 { font-size: var(--gc-fs-h4); }
h5 { font-size: var(--gc-fs-h5); }

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

a {
    color: var(--gc-green);
    text-decoration: none;
    transition: var(--gc-transition);
}

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

img {
    max-width: 100%;
    height: auto;
}

/* ══════════════════════════════════════════════
   LAYOUT — CONTAINER OVERRIDE
   ══════════════════════════════════════════════ */
.gc-container {
    max-width: var(--gc-container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ══════════════════════════════════════════════
   SECCIONES
   ══════════════════════════════════════════════ */
.gc-section {
    padding: var(--gc-section-py) 0;
}

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

.gc-section--green {
    background-color: var(--gc-green);
    color: var(--gc-white);
}

.gc-section--dark {
    background-color: var(--gc-navy);
    color: var(--gc-white);
}

/* ══════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════ */
.gc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--gc-font-primary);
    font-size: var(--gc-fs-body);
    font-weight: 600;
    border-radius: var(--gc-radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--gc-transition);
    text-decoration: none !important;
    line-height: 1.4;
}

.gc-btn--primary {
    background-color: var(--gc-green);
    color: var(--gc-white);
    border-color: var(--gc-green);
}

.gc-btn--primary:hover {
    background-color: var(--gc-green-dark);
    border-color: var(--gc-green-dark);
    color: var(--gc-white) !important;
    transform: translateY(-1px);
    box-shadow: var(--gc-shadow);
}

.gc-btn--outline {
    background-color: transparent;
    color: var(--gc-green);
    border-color: var(--gc-green);
}

.gc-btn--outline:hover {
    background-color: var(--gc-green);
    color: var(--gc-white) !important;
}

.gc-btn--dark {
    background-color: var(--gc-blue);
    color: var(--gc-white);
    border-color: var(--gc-blue);
}

.gc-btn--dark:hover {
    background-color: var(--gc-blue-dark);
    border-color: var(--gc-blue-dark);
    color: var(--gc-white) !important;
}

.gc-btn--white {
    background-color: var(--gc-white);
    color: var(--gc-green);
    border-color: var(--gc-white);
}

.gc-btn--white:hover {
    background-color: var(--gc-gray-100);
    color: var(--gc-green-dark) !important;
}

.gc-btn--sm {
    padding: 8px 20px;
    font-size: var(--gc-fs-small);
}

.gc-btn--lg {
    padding: 16px 36px;
    font-size: var(--gc-fs-h5);
}

/* Fix: Bootstrap resets */
.gc-btn { text-decoration: none !important; }
a.gc-btn:hover { color: inherit; }
a.gc-btn--primary:hover,
a.gc-btn--dark:hover,
a.gc-btn--outline:hover { color: var(--gc-white) !important; }

/* ══════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════ */
.gc-breadcrumb {
    padding: 16px 0;
    font-size: var(--gc-fs-small);
    color: var(--gc-gray-600);
}

.gc-breadcrumb a {
    color: var(--gc-gray-600);
}

.gc-breadcrumb a:hover {
    color: var(--gc-green);
}

.gc-breadcrumb .separator {
    margin: 0 8px;
}

/* ══════════════════════════════════════════════
   UTILIDADES
   ══════════════════════════════════════════════ */
.gc-text-green { color: var(--gc-green) !important; }
.gc-text-blue { color: var(--gc-blue) !important; }
.gc-text-white { color: var(--gc-white) !important; }
.gc-bg-green { background-color: var(--gc-green) !important; }
.gc-bg-gray { background-color: var(--gc-gray-100) !important; }
.gc-fw-700 { font-weight: 700 !important; }

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    :root {
        --gc-fs-hero:      32px;
        --gc-fs-h1:        30px;
        --gc-fs-h2:        26px;
        --gc-fs-h3:        22px;
        --gc-section-py:   60px;
    }
}

@media (max-width: 767.98px) {
    :root {
        --gc-fs-hero:      28px;
        --gc-fs-h1:        26px;
        --gc-fs-h2:        22px;
        --gc-fs-h3:        20px;
        --gc-section-py:   40px;
        --gc-header-height: 70px;
    }

    .gc-container {
        padding: 0 16px;
    }
}
/* ── Fix: botón WordPress con estilos Geociclos ── */
.wp-block-button.gc-btn--primary .wp-block-button__link {
    background-color: var(--gc-green) !important;
    color: var(--gc-white) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 0px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: auto !important;
    display: inline-block !important;
    transition: background-color 0.3s;
}

.wp-block-button.gc-btn--primary .wp-block-button__link:hover {
    background-color: var(--gc-green-dark) !important;
}

/* ── Fix: WordPress Columns + Bootstrap grid ── */
.wp-block-columns.row > .wp-block-column[class*="col-"] {
    flex-basis: auto !important;
    flex-grow: 0 !important;
}