/* =========================================================
   CANARYMX · HOME
   Hero, scroll por secciones, categorías y alquiler.
   ========================================================= */

/* =========================================================
   CANARYMX - HOME HERO TYPOGRAPHY
   Tipografía principal de la portada
   ========================================================= */


/* ---------------------------------------------------------
   Texto superior:
   "EQUIPAMIENTO PROFESIONAL"
   --------------------------------------------------------- */

.home .canarymx-hero-eyebrow {
    font-family: "Barlow Condensed", sans-serif !important;

    font-size: clamp(18px, 1.4vw, 25px) !important;
    line-height: 1 !important;

    font-weight: 700 !important;
    font-style: normal !important;

    letter-spacing: 0.8px !important;
    text-transform: uppercase;

    color: #fff !important;

    margin-bottom: 8px !important;
}


/* ---------------------------------------------------------
   Primera línea del título:
   "RENDIMIENTO"
   --------------------------------------------------------- */

.home .canarymx-hero-title {
    font-family: "Barlow Condensed", sans-serif !important;

    font-size: clamp(64px, 5.2vw, 92px) !important;
    line-height: 0.85 !important;

    font-weight: 900 !important;
    font-style: normal !important;

    letter-spacing: -1px !important;

    color: #fff !important;

    margin: 0 !important;

    /* Evita que RENDIMIENTO se divida en dos líneas */
    white-space: nowrap;
}


/* ---------------------------------------------------------
   Segunda línea:
   "SIN LÍMITES"
   --------------------------------------------------------- */

.home .canarymx-hero-title-accent {
    font-family: "Saira Condensed", sans-serif !important;
    font-weight: 700 !important;
    font-style: italic !important;

    color: #e6433a !important;

    transform: skewX(-7deg);
    letter-spacing: -1px !important;
}


/* ---------------------------------------------------------
   Subtítulo:
   "PREPÁRATE PARA CADA RUTA"
   --------------------------------------------------------- */

.home .canarymx-hero-kicker {
    font-family: "Barlow Condensed", sans-serif !important;

    font-size: clamp(20px, 1.45vw, 27px) !important;
    line-height: 1 !important;

    font-weight: 700 !important;
    font-style: normal !important;

    letter-spacing: 0.5px !important;

    color: #fff !important;

    margin-bottom: 16px !important;
}


/* =========================================================
   TABLET / MOBILE
   Permitimos adaptar el título sin romper el layout
   ========================================================= */

@media (max-width: 768px) {

    .home .canarymx-hero-title,
    .home .canarymx-hero-title-accent {
        font-size: clamp(48px, 13vw, 68px) !important;

        white-space: normal;
    }

    .home .canarymx-hero-title-accent {
        margin-bottom: 28px !important;
    }
}

/* =========================================================
   2. SCROLL POR SECCIONES DEL HOME
   En escritorio cada sección ocupa como mínimo una pantalla.
   Si el contenido necesita más altura, la sección puede crecer.
   ========================================================= */

html {
    scroll-snap-type: y proximity;
}

/*.canarymx-section {
    min-height: 100vh;
    min-height: 100svh;

    height: auto;

    box-sizing: border-box;
    overflow: visible;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}
*/

.canarymx-section {
    min-height: 100svh;
    height: auto;

    box-sizing: border-box;
    overflow: visible;

    scroll-snap-align: start;
}

.site-footer {
    scroll-snap-align: none !important;
}

/* En escritorios con poca altura, el snap deja de ser obligatorio. */
@media (min-width: 769px) and (max-height: 850px) {
    html {
        scroll-snap-type: y proximity;
    }
}

/* =========================================================
   ESPACIO INTERNO PARA EL HEADER FIJO
   Solo para las secciones posteriores al hero.
   ========================================================= */

.home .canarymx-section:not(:first-of-type) {
    padding-top: var(--canarymx-header-height-scrolled);
}

.canarymx-section-under-header {
    padding-top: calc(
        var(--canarymx-header-height-scrolled) + 18px
    );
}

/* =========================================================
   3. TARJETAS DE CATEGORÍAS - EQUIPAMIENTO DE ASFALTO
   ========================================================= */

.canarymx-category-card {
    position: relative;
    min-height: 160px;
    overflow: hidden;

    transition: background-color 0.25s ease;
}

.canarymx-category-card:hover {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

/* Icono genérico para tarjetas que utilizan una sola imagen. */
.canarymx-category-icon {
    position: absolute !important;

    width: 145px !important;
    max-width: 50% !important;
    height: auto !important;

    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);

    margin: 0 !important;
    object-fit: contain;
    z-index: 1;
}

/* Ajuste opcional del texto dentro de una tarjeta. */
.canarymx-category-label {
    position: relative;
    top: 38px;
}

/* Imágenes superpuestas para el cambio visual en hover. */
.canarymx-icon-normal,
.canarymx-icon-hover {
    position: absolute !important;

    width: 145px !important;
    max-width: 50% !important;
    height: auto !important;

    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);

    margin: 0 !important;
    object-fit: contain;
    z-index: 1;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.canarymx-icon-normal {
    opacity: 1;
}

.canarymx-icon-hover {
    opacity: 0;
}

.canarymx-category-card:hover .canarymx-icon-normal {
    opacity: 0;
}

.canarymx-category-card:hover .canarymx-icon-hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}

/* =========================================================
   5. TIPOGRAFÍA DEL HOME
   Recupera el carácter visual fuerte de la portada sin afectar
   la interfaz funcional de WooCommerce.
   ========================================================= */

/* Títulos principales de secciones, p. ej. "EQUIPAMIENTO DE ASFALTO". */
.home .canarymx-section h2 {
    font-family: "Racing Sans One", sans-serif !important;

    font-size: clamp(38px, 3.3vw, 58px) !important;
    line-height: 1 !important;

    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}

.home .canarymx-section h3 {
    font-family: "Racing Sans One", sans-serif !important;
    font-weight: 400 !important;
}

/* =========================================================
   CANARYMX - TÍTULOS PRINCIPALES DE SECCIÓN
   Misma identidad visual que "RENDIMIENTO".
   ========================================================= */

.home .canarymx-section-title {
    margin: 0 0 38px !important;

    font-family: "Barlow Condensed", sans-serif !important;
    font-size: clamp(42px, 3.6vw, 64px) !important;
    line-height: 0.95 !important;

    font-weight: 900 !important;
    font-style: normal !important;

    letter-spacing: -0.8px !important;

    color: #fff !important;

    text-transform: uppercase;
}


/* Un poco más compacto en pantallas pequeñas */
@media (max-width: 768px) {
    .home .canarymx-section-title {
        margin-bottom: 24px !important;

        font-size: clamp(36px, 10vw, 50px) !important;
        line-height: 1 !important;
    }
}

.home .canarymx-rental-title {
    font-family: "Barlow Condensed", sans-serif !important;
    font-size: clamp(48px, 4.5vw, 76px) !important;
    line-height: 0.95 !important;
    font-weight: 900 !important;
    letter-spacing: -0.5px !important;
    color: #fff !important;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .home .canarymx-rental-title {
        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: 0.95 !important;
        text-align: center;
    }
}