/* ==========================================================================
   SU TRACTOR S.A.S
   SISTEMA GLOBAL DE DISEÑO
   ==========================================================================
   
   Este archivo contiene las reglas globales del proyecto:
   - Colores
   - Tipografía
   - Contenedor
   - Grid
   - Espaciados
   - Tipografía global
   - Botones
   - Formularios
   - Breadcrumb
   - Badges
   - WhatsApp
   - Responsive base
   - Utilidades
   
   NO colocar aquí estilos específicos de una sección.
   ========================================================================== */


/* ==========================================================================
   01. VARIABLES GLOBALES / DESIGN TOKENS
   ==========================================================================

   ÚNICA FUENTE DE VERDAD: variables.css
   Este archivo (st-global.css) NO vuelve a declarar tokens propios.
   Los alias --st-* se limitan a apuntar al token canónico correspondiente,
   así se elimina el riesgo de que un mismo valor (color, tipografía,
   contenedor, etc.) quede desincronizado entre dos sistemas paralelos.
   ========================================================================== */

:root {

    /* MARCA PRIMARIA */
    --st-color-primary: var(--color-primary);
    --st-color-primary-hover: var(--color-primary-hover);
    --st-color-primary-light: var(--color-primary-light);

    /* MARCA SECUNDARIA */
    --st-color-secondary: var(--color-secondary);
    --st-color-secondary-hover: var(--color-secondary-hover);
    --st-color-secondary-light: var(--color-secondary-light);

    /* COLORES NEUTROS */
    --st-color-text: var(--color-text);
    --st-color-text-secondary: var(--color-text-light);
    --st-color-white: var(--color-white);
    --st-color-background: var(--color-background);
    --st-color-card: var(--color-card);
    --st-color-texture: var(--color-texture);

    /* FOOTER */
    --st-color-footer-top: var(--color-footer);
    --st-color-footer-bottom: var(--color-footer-bottom);

    /* WHATSAPP */
    --st-color-whatsapp: var(--color-whatsapp);

    /* OVERLAY */
    --st-overlay-color: var(--overlay-color);
    --st-overlay-opacity: var(--overlay-opacity);

    /* TIPOGRAFÍA */
    --st-font-family: var(--font-family);

    /*
     * TAMAÑOS TIPOGRÁFICOS
     * H1: tamaño único y fijo de 30px en todo el proyecto (sin clamp/vw).
     */
    --st-font-h1: var(--font-h1);
    --st-font-h2: var(--font-h2);
    --st-font-h3: var(--font-h3);

    --st-font-body: var(--font-body);
    --st-font-button: var(--font-button);

    --st-font-menu: var(--font-menu-min);
    --st-font-breadcrumb: var(--font-breadcrumb);

    --st-font-badge: var(--font-badge-min);

    --st-font-footer: var(--font-footer);

    /* PESOS */
    --st-weight-regular: var(--weight-regular);
    --st-weight-medium: var(--weight-medium);
    --st-weight-bold: var(--weight-bold);

    /* LINE HEIGHT */
    --st-line-height-body: var(--line-height-body);

    /*
     * CONTENEDOR
     * REGLA DEFINITIVA DEL PROYECTO: MAX-WIDTH = 1300PX
     */
    --st-container-width: var(--container);

    /* GRID */
    --st-grid-columns: var(--grid-columns);
    --st-grid-gutter: var(--grid-gutter);

    /* ESPACIAMIENTO */
    --st-section-spacing: var(--space-section);
    --st-content-spacing: var(--space-lg);
    --st-content-spacing-large: var(--space-xl);
    --st-card-padding: var(--card-padding-min);
    --st-card-padding-large: var(--card-padding-max);
    --st-title-spacing: var(--space-title-content);
    --st-paragraph-spacing: var(--space-paragraph);

    /* ICONOS */
    --st-icon-interactive-min: var(--icon-interactive-min);
    --st-icon-interactive-max: var(--icon-interactive-max);
    --st-icon-static-min: var(--icon-static-min);
    --st-icon-static-max: var(--icon-static-max);
    --st-icon-footer: var(--icon-footer);
    --st-icon-whatsapp: var(--icon-whatsapp);

    /* ANIMACIONES */
    --st-transition: var(--transition);

    /* BORDER */
    --st-border-primary: var(--border-primary);

    /* WHATSAPP */
    --st-whatsapp-bottom: var(--whatsapp-bottom);
    --st-whatsapp-right: var(--whatsapp-right);
    --st-whatsapp-z-index: var(--whatsapp-z-index);
}


/* ==========================================================================
   02. BOX SIZING
   ========================================================================== */

html {
    box-sizing: border-box;
}

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


/* ==========================================================================
   03. BODY GLOBAL
   ========================================================================== */

body {
    margin: 0;
    padding: 0;

    background-color: var(--st-color-background);

    color: var(--st-color-text);

    font-family: var(--st-font-family);

    font-size: var(--st-font-body);

    font-weight: var(--st-weight-regular);

    line-height: var(--st-line-height-body);

    overflow-x: hidden;
}


/* ==========================================================================
   04. TIPOGRAFÍA GLOBAL
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
input,
textarea,
select,
label {
    font-family: var(--st-font-family);
}


/* ==========================================================================
   05. H1
   ========================================================================== */

h1 {
    margin-top: 0;

    margin-bottom: var(--st-title-spacing);

    font-family: var(--st-font-family);

    /*
     * Tamaño único y fijo: 30px en todas las páginas y plantillas.
     * Sin clamp() ni vw — el H1 no debe variar según el viewport.
     */
    font-size: var(--st-font-h1);

    font-weight: var(--st-weight-bold);

    line-height: 1.15;

    color: var(--st-color-text);
}


/* ==========================================================================
   06. H2
   ========================================================================== */

h2 {
    margin-top: 0;

    margin-bottom: var(--st-title-spacing);

    font-family: var(--st-font-family);

    font-size: var(--st-font-h2);

    font-weight: var(--st-weight-bold);

    line-height: 1.2;

    color: var(--st-color-text);
}


/* ==========================================================================
   07. H3
   ========================================================================== */

h3 {
    margin-top: 0;

    margin-bottom: var(--st-title-spacing);

    font-family: var(--st-font-family);

    font-size: var(--st-font-h3);

    font-weight: var(--st-weight-medium);

    line-height: 1.25;

    color: var(--st-color-text);
}


/* ==========================================================================
   08. PÁRRAFOS
   ========================================================================== */

p {
    margin-top: 0;

    margin-bottom: var(--st-paragraph-spacing);

    font-family: var(--st-font-family);

    font-size: var(--st-font-body);

    font-weight: var(--st-weight-regular);

    line-height: var(--st-line-height-body);

    color: var(--st-color-text);
}


/* ==========================================================================
   09. ENLACES
   ========================================================================== */

a {
    color: inherit;

    text-decoration: none;

    transition: var(--st-transition);
}


/* ==========================================================================
   10. CONTENEDOR GLOBAL
   ========================================================================== */

.st-container {
    width: 100%;

    max-width: var(--st-container-width);

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* ==========================================================================
   11. PADDING LATERAL DEL CONTENEDOR
   ========================================================================== */

.st-container {
    padding-left: 0;
    padding-right: 0;
}


/* ==========================================================================
   12. SECCIÓN GLOBAL
   ========================================================================== */

.st-section {
    width: 100%;

    box-sizing: border-box;
}


/* ==========================================================================
   13. SECCIÓN CON ESPACIADO VERTICAL GLOBAL
   ========================================================================== */

.st-section-spacing {
    padding-top: var(--st-section-spacing);

    padding-bottom: var(--st-section-spacing);
}


/* ==========================================================================
   14. GRID GLOBAL
   ========================================================================== */

.st-grid {
    display: grid;

    grid-template-columns: repeat(
        var(--st-grid-columns),
        minmax(0, 1fr)
    );

    column-gap: var(--st-grid-gutter);

    row-gap: var(--st-grid-gutter);

    width: 100%;
}


/* ==========================================================================
   15. BOTONES
   ========================================================================== */

.st-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 10px 20px;

    border: 0;

    border-radius: 0;

    font-family: var(--st-font-family);

    font-size: var(--st-font-button);

    font-weight: var(--st-weight-medium);

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    transition: var(--st-transition);
}


/* ==========================================================================
   16. BOTÓN PRIMARIO
   ========================================================================== */

.st-btn-primary {
    background-color: var(--st-color-primary);

    color: var(--st-color-white);
}

.st-btn-primary:hover,
.st-btn-primary:focus {
    background-color: var(--st-color-primary-hover);

    color: var(--st-color-white);
}


/* ==========================================================================
   17. BOTÓN SECUNDARIO
   ========================================================================== */

.st-btn-secondary {
    background-color: var(--st-color-secondary);

    color: var(--st-color-white);
}

.st-btn-secondary:hover,
.st-btn-secondary:focus {
    background-color: var(--st-color-secondary-hover);

    color: var(--st-color-white);
}


/* ==========================================================================
   18. BORDES PRIMARIOS
   ========================================================================== */

.st-border-primary {
    border: var(--st-border-primary);
}


/* ==========================================================================
   19. BADGES
   ========================================================================== */

.st-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 10px;

    font-family: var(--st-font-family);

    font-size: var(--st-font-badge);

    font-weight: var(--st-weight-regular);

    line-height: 1.2;

    white-space: nowrap;
}


/* Badge primario */

.st-badge-primary {
    background-color: var(--st-color-primary);

    color: var(--st-color-white);
}


/* Badge secundario */

.st-badge-secondary {
    background-color: var(--st-color-secondary-hover);

    color: var(--st-color-white);
}


/* ==========================================================================
   20. CARDS
   ========================================================================== */

.st-card {
    padding: var(--st-card-padding);

    background-color: var(--st-color-card);

    box-sizing: border-box;
}


/* Card destacada */

.st-card-featured {
    background-color: var(--st-color-primary-light);
}


/* Card repuestos */

.st-card-parts {
    background-color: var(--st-color-secondary-light);
}


/* ==========================================================================
   21. BREADCRUMB
   ========================================================================== */

.st-breadcrumb {
    font-family: var(--st-font-family);

    font-size: var(--st-font-breadcrumb);

    font-weight: var(--st-weight-regular);

    line-height: 1.4;

    color: var(--st-color-text-secondary);
}


/* ==========================================================================
   22. OVERLAY DE IMÁGENES
   ========================================================================== */

.st-image-overlay {
    position: relative;
}

.st-image-overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background-color: var(--st-overlay-color);

    opacity: var(--st-overlay-opacity);

    pointer-events: none;
}


/* ==========================================================================
   23. WHATSAPP
   ========================================================================== */

.st-whatsapp {
    position: fixed;

    bottom: var(--st-whatsapp-bottom);

    right: var(--st-whatsapp-right);

    z-index: var(--st-whatsapp-z-index);

    width: var(--st-icon-whatsapp);

    height: var(--st-icon-whatsapp);

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: var(--st-color-whatsapp);

    color: var(--st-color-white);

    transition: var(--st-transition);
}

.st-whatsapp img,
.st-whatsapp svg {
    width: 50px;

    height: 50px;

    max-width: 100%;
}


/* ==========================================================================
   24. IMÁGENES
   ========================================================================== */

img {
    max-width: 100%;

    height: auto;
}


/* ==========================================================================
   25. FORMULARIOS
   ========================================================================== */

.st-form-field {
    width: 100%;

    min-height: 44px;

    padding: 10px 14px;

    border: var(--st-border-primary);

    background-color: var(--st-color-white);

    color: var(--st-color-text);

    font-family: var(--st-font-family);

    font-size: var(--st-font-body);

    font-weight: var(--st-weight-regular);

    outline: none;

    transition: var(--st-transition);
}

.st-form-field::placeholder {
    color: var(--st-color-text-secondary);

    opacity: 1;
}

.st-form-field:focus {
    border-color: var(--st-color-primary-hover);
}


/* ==========================================================================
   26. FOOTER
   ========================================================================== */

.st-footer-top {
    background-color: var(--st-color-footer-top);

    color: var(--st-color-white);
}

.st-footer-bottom {
    background-color: var(--st-color-footer-bottom);

    color: var(--st-color-text-secondary);
}

.st-footer {
    font-family: var(--st-font-family);

    font-size: var(--st-font-footer);

    font-weight: var(--st-weight-regular);
}


/* ==========================================================================
   27. ICONOS FOOTER
   ========================================================================== */

.st-footer-icon {
    width: var(--st-icon-footer);

    height: var(--st-icon-footer);

    max-width: var(--st-icon-footer);
}


/* ==========================================================================
   28. UTILIDADES DE COLOR
   ========================================================================== */

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

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

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

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

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


/* ==========================================================================
   29. UTILIDADES DE FONDO
   ========================================================================== */

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

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

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

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

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

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

.st-bg-dark {
    background-color: var(--st-color-footer-top) !important;
}


/* ==========================================================================
   30. PREVENCIÓN DE DESBORDAMIENTO
   ========================================================================== */

.st-container,
.st-section,
.st-grid {
    min-width: 0;

    box-sizing: border-box;
}


/* ==========================================================================
   31. RESPONSIVE
   ========================================================================== */


/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1360px) {

    .st-container {
        padding-left: 30px;

        padding-right: 30px;
    }
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .st-container {
        padding-left: 20px;

        padding-right: 20px;
    }

    .st-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .st-section-spacing {
        padding-top: 60px;

        padding-bottom: 60px;
    }

    .st-btn {
        font-size: var(--st-font-button);

        width: 100%;
    }

    .st-whatsapp {
        bottom: 20px;

        right: 20px;
    }
}


/* --------------------------------------------------------------------------
   MOBILE PEQUEÑO
   -------------------------------------------------------------------------- */

@media (max-width: 390px) {

    .st-container {
        padding-left: 16px;

        padding-right: 16px;
    }
}


/* ==========================================================================
   32. ACCESIBILIDAD
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--st-color-primary);

    outline-offset: 3px;
}


/* ==========================================================================
   FIN DEL SISTEMA GLOBAL
   ========================================================================== */