/*
Theme Name: Tema Gamo
Theme URI: #
Author: Leonardo Reyes Hernández
Author URI: #
Description: Tema corporativo personalizado para catálogo de productos, construido de forma modular y sin dependencias pesadas.
Version: 1.0
Text Domain: tema-gamo
*/

/* ================================================================
   REGLA GLOBAL — Sin redimensionado en textareas
   ================================================================ */
textarea { resize: none; }

/* ================================================================
   :ROOT — VARIABLES GLOBALES DE MARCA
   ================================================================ */
:root {
    --gamo-blanco:          #FFFFFF;
    --gamo-negro:           #000000;
    --gamo-texto-principal: #1F1F1F;
    --gamo-texto-mutado:    #505050;
    --gamo-rojo:            #C30006;
    --gamo-bg-icon-top:     #EBEBEB;
    --gamo-icon-top:        #3A3C4D;
    --gamo-bg-footer:       #191919;
    --gamo-bg-subfooter:    #252525;
    /* JS actualiza este valor con la altura exacta al vuelo.
       clamp() es el fallback visual para el primer pintado. */
    --header-height:        clamp(100px, calc(5vw + 80px), 120px);
}

/* ================================================================
   GLOBALES
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: var(--gamo-texto-principal);
    padding-top: clamp(100px, calc(5vw + 80px), 117px);
}
.swiper-pagination-bullet{opacity: var(--swiper-pagination-bullet-inactive-opacity, .5)!important;}

/* ================================================================
   HEADER — Contenedor fijo con comportamiento sticky inteligente
   ================================================================ */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

#site-header.header--hidden {
    transform: translateY(-100%);
}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
    background-color: var(--gamo-blanco);
    border-bottom: 1px solid var(--gamo-negro);
    padding-block: 6px;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* --- Redes Sociales --- */
.topbar__social {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
    Geometría perfectamente circular: width = height garantiza círculos exactos.
    Tamaños reducidos −10% respecto a la entrega anterior.

    clamp contenedor (−10%):
    desktop 34px | móvil 27px | viewport 320–1280px
    slope = (34-27)/960*100 = 0.72 | intercept = 27 - 0.72*3.2 = 24 (↓)

    clamp ícono interno (−10%):
    desktop 13px | móvil 11px
    slope = (13-11)/960*100 = 0.20 | intercept = 11 - 0.20*3.2 = 10 (↓)
*/
.topbar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gamo-bg-icon-top);
    color: var(--gamo-icon-top);
    border-radius: 50%;
    width: clamp(27px, calc(0.72vw + 24px), 34px);
    height: clamp(27px, calc(0.72vw + 24px), 34px);
    flex-shrink: 0;
    font-size: clamp(11px, calc(0.20vw + 10px), 13px);
    text-decoration: none;
    line-height: 1;
}

.topbar__social-link:hover {
    opacity: 0.8;
    color: var(--gamo-icon-top);
    text-decoration: none;
}

/* --- Datos de Contacto --- */
.topbar__contact {
    display: flex;
    align-items: center;
    gap: 16px;
}

/*
    clamp para texto de contacto:
    desktop 11px | móvil 9px | viewport 320–1280px
    slope = (11-9)/(1280-320)*100 = 0.20 | intercept = 9 - 0.20*3.2 = 8 (↓)
*/
.topbar__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gamo-texto-mutado);
    font-size: clamp(9px, calc(0.20vw + 8px), 11px);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.topbar__contact-item i {
    font-size: clamp(9px, calc(0.20vw + 8px), 11px);
    flex-shrink: 0;
}

.topbar__contact-item:hover {
    opacity: 0.8;
    color: var(--gamo-texto-mutado);
    text-decoration: none;
}

/* Móvil: ocultar correo y horario */
@media (max-width: 767.98px) {
    .topbar__contact-item--hidden-mobile {
        display: none;
    }
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
    background-color: var(--gamo-blanco);
    box-shadow: 0px 6px 9px rgba(0, 0, 0, 0.5);
    padding-block: 8px;
}

/*
    clamp para logo:
    desktop 75px | móvil 55px | viewport 320–1280px
    slope = (75-55)/(1280-320)*100 = 2.08 | intercept = 55 - 2.08*3.2 = 48 (↓)
*/
.navbar__logo {
    height: clamp(55px, calc(2.08vw + 48px), 75px);
    width: auto;
    display: block;
}

/* --- Botón Hamburguesa --- */
.navbar-toggler {
    border: none;
    padding: 4px 8px;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

/* --- Nav Links ---
    clamp para links de navegación:
    desktop 15px | móvil 12px | viewport 320–1280px
    slope = (15-12)/(1280-320)*100 = 0.31 | intercept = 12 - 0.31*3.2 = 11 (↓)
*/
.navbar-nav .nav-link {
    text-transform: uppercase;
    color: var(--gamo-texto-principal);
    font-size: clamp(12px, calc(0.31vw + 11px), 15px);
    font-weight: 700;
    padding: 8px 12px;
    position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--gamo-texto-principal);
    opacity: 0.8;
}
.dropdown-menu[data-bs-popper]{top:180%!important;}

/* Aquí cambias el Gap entre el menú header principal */
@media (min-width: 992px) {
    .navbar-nav {
        gap: 35px;
    }
}

/* --- Ítem Activo y Ancestro Activo --- */
.navbar-nav .nav-item.current-menu-item > .nav-link,
.navbar-nav .nav-item.current-menu-ancestor > .nav-link,
.navbar-nav .nav-item.active > .nav-link {
    color: var(--gamo-rojo);
    font-weight: 800;
    opacity: 1;
}

.navbar-nav .nav-item.current-menu-item > .nav-link::after,
.navbar-nav .nav-item.current-menu-ancestor > .nav-link::after,
.navbar-nav .nav-item.active > .nav-link::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 4px;
    left: 12px;
    right: 12px;
    height: 3px;
    background-color: var(--gamo-rojo);
    border-radius: 1px;
}

/* --- Dropdown --- */

/* El submenú nace al ras del borde inferior del header, sin gap.
   border-top rojo vincula visualmente el panel con la navbar.
   top: 180% compensa la altura del nav-item para alinearse con
   el borde inferior del full header (topbar + navbar). */
.navbar-nav .dropdown-menu {
    border: none;
    border-radius: 0 0 6px 6px;
    border-top: 2px solid var(--gamo-rojo);
    box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.14);
    padding: 4px 0;
    margin-top: 0;
}

@media (min-width: 992px) {
    .navbar-nav .dropdown-menu {
        top: 180% !important;
    }
}

.dropdown-item {
    font-size: clamp(12px, calc(0.31vw + 11px), 15px);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gamo-texto-principal);
    padding: 9px 18px;
}

/* Hover/focus: fondo rojo al 4% de opacidad + texto rojo.
   Sin nada del azul nativo de Bootstrap. */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(195, 0, 6, 0.04);
    color: var(--gamo-rojo);
    opacity: 1;
}

/* Ítem activo dentro del submenú */
.dropdown-menu .current-menu-item > .dropdown-item,
.dropdown-menu .dropdown-item.active {
    background-color: rgba(195, 0, 6, 0.06);
    color: var(--gamo-rojo);
    font-weight: 700;
}

/* --- Caret de FontAwesome (unificado con footer, reemplaza ::after de Bootstrap) --- */

/* Suprimir la flecha nativa de Bootstrap en dropdown-toggle */
.navbar-nav .nav-link.dropdown-toggle::after {
    display: none;
}

/*
    clamp tamaño caret:
    desktop 11px | móvil 10px
    slope = (11-10)/960*100 = 0.10 | intercept = 10 - 0.10*3.2 = 9 (↓)
*/
.navbar__caret {
    font-size: clamp(10px, calc(0.10vw + 9px), 11px);
    margin-left: 5px;
    vertical-align: middle;
    opacity: 0.7;
}

/* Rotar 180° cuando el dropdown está visible */
.navbar-nav .nav-item.show .navbar__caret {
    transform: rotate(180deg);
}

/* El caret hereda el rojo cuando el ítem padre es activo o ancestro */
.navbar-nav .nav-item.current-menu-item .navbar__caret,
.navbar-nav .nav-item.current-menu-ancestor .navbar__caret,
.navbar-nav .nav-item.active .navbar__caret {
    color: var(--gamo-rojo);
    opacity: 1;
}

/* --- Ícono WhatsApp independiente en Navbar --- */
.navbar__whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gamo-texto-principal);
    font-size: clamp(12px, calc(0.31vw + 11px), 15px);
    text-decoration: none;
    padding: 8px;
    margin-left: 4px;
}

.navbar__whatsapp:hover {
    color: var(--gamo-texto-principal);
    opacity: 0.8;
    text-decoration: none;
}

/* ================================================================
   NAVBAR — VARIANTE MÓVIL (< 992px)
   La línea roja activa se convierte en borde izquierdo vertical
   ================================================================ */
@media (max-width: 991.98px) {

    .navbar-nav .nav-link {
        padding: 10px 0;
        border-bottom: 1px solid var(--gamo-bg-icon-top);
    }

    .navbar-nav .nav-item.current-menu-item > .nav-link::after,
    .navbar-nav .nav-item.current-menu-ancestor > .nav-link::after,
    .navbar-nav .nav-item.active > .nav-link::after {
        display: none;
    }

    .navbar-nav .nav-item.current-menu-item > .nav-link,
    .navbar-nav .nav-item.current-menu-ancestor > .nav-link,
    .navbar-nav .nav-item.active > .nav-link {
        border-left: 3px solid var(--gamo-rojo);
        padding-left: 10px;
    }

    .navbar__whatsapp {
        padding: 10px 0;
        margin-left: 0;
        border-bottom: 1px solid var(--gamo-bg-icon-top);
        justify-content: flex-start;
    }

    .dropdown-menu {
        box-shadow: none;
        border-left: 2px solid var(--gamo-bg-icon-top);
        margin-left: 12px;
        border-radius: 0;
        padding: 0;
    }

    .dropdown-item {
        padding: 8px 12px;
        border-bottom: 1px solid var(--gamo-bg-icon-top);
    }
}

/* ================================================================
   FOOTER — SECCIÓN PRINCIPAL (MAIN FOOTER)
   ================================================================ */

/*
    clamp padding vertical del footer:
    desktop 48px | móvil 32px | viewport 320–1280px
    slope = (48-32)/960*100 = 1.66 | intercept = 32 - 1.66*3.2 = 26 (↓)
*/
.footer-main {
    background-color: var(--gamo-bg-footer);
    padding-block: clamp(32px, calc(1.66vw + 26px), 48px);
}

/* Separación inferior entre columnas en móvil */
@media (max-width: 991.98px) {
    .footer-col {
        padding-bottom: clamp(24px, calc(1.04vw + 20px), 32px);
    }

    .footer-col:last-child {
        padding-bottom: 0;
        border-bottom: none !important;
    }
}

/* ----------------------------------------------------------------
   Columna 1 — Identidad
   ---------------------------------------------------------------- */

/*
    clamp logo footer:
    desktop 55px | móvil 40px | viewport 320–1280px
    slope = (55-40)/960*100 = 1.56 | intercept = 40 - 1.56*3.2 = 35 (↓)
*/
.footer__logo {
    height: clamp(40px, calc(1.56vw + 35px), 55px);
    width: auto;
    display: block;
    margin-bottom: clamp(13px, calc(0.55vw + 25px), 25px);
}

/*
    clamp descripción:
    desktop 13px | móvil 12px | viewport 320–1280px
    slope = (13-12)/960*100 = 0.10 | intercept = 12 - 0.10*3.2 = 11 (↓)
*/
.footer__description {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(12px, calc(0.10vw + 11px), 13px);
    line-height: 1.7;
    margin: 0;
}

/* ----------------------------------------------------------------
   Columna 2 — Contáctanos
   ---------------------------------------------------------------- */

/*
    clamp títulos h4 del footer:
    desktop 16px | móvil 14px | viewport 320–1280px
    slope = (16-14)/960*100 = 0.20 | intercept = 14 - 0.20*3.2 = 13 (↓)
*/
.footer-contact__title {
    color: var(--gamo-blanco);
    font-size: clamp(14px, calc(0.20vw + 13px), 16px);
    font-weight: 700;
    margin-bottom: clamp(12px, calc(0.41vw + 10px), 16px);
}

.footer-contact__group {
    margin-bottom: clamp(10px, calc(0.41vw + 9px), 14px);
}

/*
    clamp etiquetas (Teléfono, Dirección, Horario):
    desktop 11px | móvil 9px
    slope = (11-9)/960*100 = 0.20 | intercept = 9 - 0.20*3.2 = 8 (↓)
*/
.footer-contact__label {
    color: rgba(255, 255, 255, 0.45);
    font-size: clamp(9px, calc(0.20vw + 8px), 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

/*
    clamp texto de contacto:
    desktop 13px | móvil 12px
    slope = (13-12)/960*100 = 0.10 | intercept = 12 - 0.10*3.2 = 11 (↓)
*/
.footer-contact__link {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(12px, calc(0.10vw + 11px), 13px);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.6;
}

.footer-contact__link:hover {
    color: var(--gamo-blanco);
    text-decoration: none;
    opacity: 1;
}

.footer-contact__text {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(12px, calc(0.10vw + 11px), 13px);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

/* Íconos sociales del footer (idénticos visualmente al Topbar) */
.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: clamp(14px, calc(0.41vw + 12px), 18px);
}

.footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gamo-bg-icon-top);
    color: var(--gamo-icon-top);
    border-radius: 50%;
    width: clamp(27px, calc(0.72vw + 24px), 34px);
    height: clamp(27px, calc(0.72vw + 24px), 34px);
    flex-shrink: 0;
    font-size: clamp(11px, calc(0.20vw + 10px), 13px);
    text-decoration: none;
    line-height: 1;
}

.footer-social__link:hover {
    opacity: 0.8;
    color: var(--gamo-icon-top);
    text-decoration: none;
}

/* ----------------------------------------------------------------
   Columna 3 — Menú Dinámico
   ---------------------------------------------------------------- */
.footer-menu__title {
    color: var(--gamo-blanco);
    font-size: clamp(14px, calc(0.20vw + 13px), 16px);
    font-weight: 700;
    margin-bottom: clamp(12px, calc(0.41vw + 10px), 16px);
}

.footer-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-menu__submenu .footer-menu__item:last-child{border-bottom: 0px;!important}

/*
    clamp enlaces del menú footer:
    desktop 15px | móvil 12px
    slope = (15-12)/960*100 = 0.31 | intercept = 12 - 0.31*3.2 = 11 (↓)
*/
.footer-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(12px, calc(0.31vw + 11px), 15px);
    font-weight: 600;
    text-transform: uppercase;
    padding: 9px 0;
    text-decoration: none;
}

.footer-menu__link:hover {
    color: var(--gamo-blanco);
    text-decoration: none;
    opacity: 1;
}

/* Ítem activo en el footer: rojo + extra-bold
   Se cubren tres clases que WP/Walker añaden en distintos escenarios:
   - .active            → asignada por Gamo_Footer_Walker (padre o hijo activo)
   - .current-menu-item → WP: ítem que coincide con la página actual
   - .current-menu-ancestor → WP: padre cuyo hijo es la página actual */
.footer-menu__item.active > .footer-menu__link,
.footer-menu__item.current-menu-item > .footer-menu__link,
.footer-menu__item.current-menu-ancestor > .footer-menu__link,
.footer-menu__item.active > .footer-menu__sublink,
.footer-menu__item.current-menu-item > .footer-menu__sublink {
    color: var(--gamo-rojo) !important;
    font-weight: 800;
}

/* Ícono caret para ítems con submenú */
.footer-menu__caret {
    font-size: clamp(9px, calc(0.10vw + 8px), 10px);
    opacity: 0.5;
    flex-shrink: 0;
}

/* El caret rota 180° cuando el acordeón está abierto.
   La transición suave viene del * { transition: all 0.3s ease-in-out } global */
.footer-menu__link[aria-expanded="true"] .footer-menu__caret {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* Submenú anidado */
.footer-menu__submenu {
    list-style: none;
    padding: 0 0 6px 12px;
    margin: 0;
}

.footer-menu__sublink {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(11px, calc(0.20vw + 10px), 13px);
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 0;
    text-decoration: none;
}

.footer-menu__sublink:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

/* ================================================================
   SUB-FOOTER — COPYRIGHT
   ================================================================ */

/*
    clamp padding sub-footer:
    desktop 14px | móvil 10px
    slope = (14-10)/960*100 = 0.41 | intercept = 10 - 0.41*3.2 = 8 (↓)
*/
.footer-sub {
    background-color: var(--gamo-bg-subfooter);
    padding-block: clamp(10px, calc(0.41vw + 8px), 14px);
}

/*
    clamp texto copyright:
    desktop 12px | móvil 10px
    slope = (12-10)/960*100 = 0.20 | intercept = 10 - 0.20*3.2 = 9 (↓)
*/
.footer-sub__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 14px);
}

@media (min-width: 992px) {
    .footer-sub__inner {
        justify-content: space-between;
    }
}

.footer-sub__copy {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(10px, calc(0.20vw + 9px), 12px);
    font-weight: 600;
    margin: 0;
    text-align: center;
}

/* Bloque de enlaces auxiliares */
.footer-sub__enlaces {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.footer-sub__enlace {
    color: rgba(255, 255, 255, 0.6);
    font-size: clamp(10px, calc(0.20vw + 9px), 12px);
    font-weight: 600;
    text-decoration: none;
}

.footer-sub__enlace:hover {
    color: var(--gamo-blanco);
    text-decoration: none;
}

.footer-sub__sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: clamp(10px, calc(0.20vw + 9px), 12px);
    user-select: none;
}

/* ================================================================
   FIX FOOTER — Elimina borde inferior del último ítem en submenús
   ================================================================ */
.footer-menu__submenu .footer-menu__item:last-child,
.footer-menu__list > .footer-menu__item:last-child,
.footer-menu__item:last-child{
    border-bottom: 0px !important;
}

/* ================================================================
   FASE 3 — TAXONOMY: categoria_gamo
   ================================================================ */

/* ----------------------------------------------------------------
   BANNER HERO DE CATEGORÍA
   ---------------------------------------------------------------- */

/*
    El .cat-banner recibe el background-image dinámico vía style=""
    (excepción justificada: valor de wp_termmeta único por categoría).
    El ::before genera el overlay oscuro sin JS ni markup extra.

    min-height establece solo el piso mínimo visual.
    El texto (título + subtítulo) es quien define la altura real.
    Flexbox centra el contenido verticalmente.

    clamp min-height (mitad de la propuesta anterior):
    desktop 210px | móvil 140px | viewport 320–1280px
    slope = (210-140)/960*100 = 7.29 | intercept = 140 - 7.29*3.2 = 116 (↓)

    clamp padding mínimo (amortiguador interno):
    desktop 80px | móvil 48px
    slope = (80-48)/960*100 = 3.33 | intercept = 48 - 3.33*3.2 = 37 (↓)
*/
.cat-banner {
    position: relative;
    background-color: var(--gamo-texto-principal);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: clamp(140px, calc(7.29vw + 116px), 210px);
    padding-block: clamp(48px, calc(3.33vw + 37px), 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cat-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.cat-banner .container {
    position: relative;
    z-index: 1;
    text-align: center;
}

/*
    clamp H1 del banner:
    desktop 48px | móvil 28px | viewport 320–1280px
    slope = (48-28)/960*100 = 2.08 | intercept = 28 - 2.08*3.2 = 21 (↓)
*/
.cat-banner__title {
    color: var(--gamo-blanco);
    font-size: clamp(28px, calc(2.08vw + 21px), 48px);
    font-weight: 800;
    margin-bottom: clamp(8px, calc(0.41vw + 6px), 12px);
    line-height: 1.2;
}

/*
    clamp subtítulo del banner:
    desktop 18px | móvil 14px | viewport 320–1280px
    slope = (18-14)/960*100 = 0.41 | intercept = 14 - 0.41*3.2 = 12 (↓)

    .cat-banner__subtitle es ahora un <div> porque term_description()
    ya genera <p> internos con wpautop. Las reglas se extienden al <p>
    hijo para que el texto herede correctamente estilos de color y fuente.
*/
.cat-banner__subtitle,
.cat-banner__subtitle p {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(14px, calc(0.41vw + 12px), 18px);
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

/* ----------------------------------------------------------------
   GRID DE PRODUCTOS
   ---------------------------------------------------------------- */

/*
    clamp padding vertical del grid:
    desktop 56px | móvil 32px
    slope = (56-32)/960*100 = 2.50 | intercept = 32 - 2.50*3.2 = 24 (↓)
*/
.cat-grid {
    background-color: #F5F5F5;
    padding-block: clamp(32px, calc(2.50vw + 24px), 56px);
}

.cat-grid__empty {
    text-align: center;
    padding: clamp(32px, calc(2.50vw + 24px), 56px) 0;
    color: var(--gamo-texto-mutado);
    font-weight: 600;
}

/* ----------------------------------------------------------------
   TARJETA DE PRODUCTO (.prod-card)
   ---------------------------------------------------------------- */
.prod-card {
    background-color: var(--gamo-blanco);
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* --- Área de imagen --- */
.prod-card__media {
    position: relative;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    background-color: #f0f0f0;
    aspect-ratio: 1 / 1;
}

.prod-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Carrusel: fuerza que el carousel y sus imágenes respeten el aspect-ratio */
.prod-card__carousel,
.prod-card__carousel .carousel-inner,
.prod-card__carousel .carousel-item {
    height: 100%;
}

.prod-card__carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* --- Controles del Carrusel (flechas rojas con drop-shadow) --- */

/* Quitar la opacidad reducida de Bootstrap en los controles */
.prod-card__carousel .carousel-control-prev,
.prod-card__carousel .carousel-control-next {
    opacity: 1;
    width: clamp(32px, calc(1.25vw + 28px), 40px);
}

/* Reemplazar el icono nativo (blanco sobre fondo oscuro) por SVG rojo + sombra */
.prod-card__carousel .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C30006'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
    width: clamp(18px, calc(0.62vw + 16px), 22px);
    height: clamp(18px, calc(0.62vw + 16px), 22px);
}

.prod-card__carousel .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C30006'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
    width: clamp(18px, calc(0.62vw + 16px), 22px);
    height: clamp(18px, calc(0.62vw + 16px), 22px);
}

/* --- Botón flotante de carrito --- */
.prod-card__float-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 60px;
    height: 60px;
    background-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, calc(0.41vw + 16px), 22px);
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 14px rgba(195, 0, 6, 0.4);
}

.prod-card__float-btn:hover {
    background-color: #a00005;
    color: var(--gamo-blanco);
    transform: scale(1.08);
}

/* --- Área de contenido --- */

/*
    clamp padding de .prod-card__body:
    top:    desktop 40px | móvil 24px → slope 1.66 | intercept 18 (↓)
    sides:  desktop 25px | móvil 16px → slope 0.93 | intercept 13 (↓)
    bottom: desktop 50px | móvil 30px → slope 2.08 | intercept 23 (↓)
*/
.prod-card__body {
    background-color: #D9D9D9;
    padding: clamp(24px, calc(1.66vw + 18px), 40px)
             clamp(16px, calc(0.93vw + 13px), 25px)
             clamp(30px, calc(2.08vw + 23px), 50px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/*
    clamp título del producto:
    desktop 20px | móvil 16px
    slope = (20-16)/960*100 = 0.41 | intercept = 16 - 0.41*3.2 = 14 (↓)
*/
.prod-card__title {
    color: var(--gamo-texto-principal);
    font-size: clamp(16px, calc(0.41vw + 14px), 20px);
    font-weight: 800;
    margin-bottom: clamp(6px, calc(0.20vw + 5px), 8px);
    line-height: 1.3;
}

/*
    clamp extracto del producto:
    desktop 14px | móvil 12px
    slope = (14-12)/960*100 = 0.20 | intercept = 12 - 0.20*3.2 = 11 (↓)
*/
.prod-card__excerpt {
    color: #555555;
    font-size: clamp(12px, calc(0.20vw + 11px), 14px);
    font-weight: 600;
    line-height: 1.6;
    flex: 1;
    margin-bottom: clamp(16px, calc(0.62vw + 14px), 20px);
}

/* Botón Cotizar Producto */
.prod-card__btn-cotizar {
    background-color: var(--gamo-rojo);
    border-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    font-size: clamp(12px, calc(0.31vw + 11px), 15px);
    font-weight: 700;
    border-radius: 6px;
    padding-block: clamp(8px, calc(0.41vw + 6px), 12px);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prod-card__btn-cotizar:hover,
.prod-card__btn-cotizar:focus {
    background-color: #a00005;
    border-color: #a00005;
    color: var(--gamo-blanco);
    opacity: 1;
}


/* ================================================================
   OFFCANVAS DE COTIZACIÓN  (#offcanvas-cotizar)
   ================================================================ */

/* Contenedor principal */
#offcanvas-cotizar {
    width: min( 480px, 95vw );
    border-left: 3px solid var(--gamo-rojo);
}

/* ---- Cabecera ---- */
#offcanvas-cotizar .offcanvas-header {
    background-color: var(--gamo-negro);
    padding: clamp(14px, 2vw, 22px) clamp(16px, 2.5vw, 28px);
    align-items: flex-start;
    gap: clamp(10px, 1.5vw, 18px);
}

#offcanvas-cotizar .offcanvas-header .btn-close {
    filter: invert(1);
    flex-shrink: 0;
    margin-top: 4px;
}

.offcanvas-header__info {
    flex: 1;
    min-width: 0;
}

#offcanvas-cotizar .offcanvas-title {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    color: var(--gamo-blanco);
    margin-bottom: clamp(4px, 0.6vw, 8px);
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}

.offcanvas-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 1vw, 12px);
}

#offcanvas-sku,
#offcanvas-marca {
    font-size: clamp(11px, 1.3vw, 13px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.03em;
}

/* ---- Cuerpo scrollable ---- */
#offcanvas-cotizar .offcanvas-body {
    padding: clamp(18px, 3vw, 30px) clamp(16px, 2.5vw, 28px);
    background-color: #f9f9f9;
    flex: 1 1 auto;   /* ocupa todo el espacio disponible entre header y footer */
    overflow-y: auto; /* scroll interno si el contenido supera la altura */
}

/* Zona de configurador y formulario: fuente compacta para alta densidad de opciones */
#offcanvas-config-options,
#offcanvas-form {
    font-size: 0.7rem;
}

/* El formulario es un bloque normal dentro del área scrollable */
#offcanvas-form {
    display: block;
}

/* ---- Configurador dinámico ---- */
.offcanvas-grupo {
    margin-bottom: clamp(14px, 2vw, 22px);
}

.offcanvas-grupo__label {
    font-size: clamp(12px, 1.4vw, 14px);
    font-weight: 700;
    color: var(--gamo-negro);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: clamp(6px, 1vw, 10px);
}

.offcanvas-grupo__options {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.7vw, 8px);
}

.offcanvas-grupo__options .form-check-label {
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 500;
    color: #333;
    cursor: pointer;
}

.offcanvas-grupo__options .form-check-input:checked {
    background-color: var(--gamo-rojo);
    border-color: var(--gamo-rojo);
}

.offcanvas-grupo__options .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(195, 0, 6, 0.2);
}

.offcanvas-sin-config {
    font-size: clamp(13px, 1.5vw, 15px);
    color: #888;
    font-style: italic;
    margin: 0;
}

/* ---- Divisor ---- */
.offcanvas-divider {
    border-color: #ddd;
    margin: clamp(14px, 2vw, 20px) 0;
}

/* ---- Formulario placeholder ---- */
.offcanvas-form__group {
    margin-bottom: clamp(12px, 1.8vw, 18px);
}

.offcanvas-form__label {
    display: block;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 700;
    color: var(--gamo-negro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: clamp(5px, 0.7vw, 8px);
}

.offcanvas-form__input,
.offcanvas-form__textarea {
    font-size: clamp(13px, 1.5vw, 15px);
    border: 1.5px solid #ddd;
    border-radius: 6px;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.offcanvas-form__input:focus,
.offcanvas-form__textarea:focus {
    border-color: var(--gamo-rojo);
    box-shadow: 0 0 0 0.2rem rgba(195, 0, 6, 0.15);
    outline: none;
}

/* El textarea es readonly — indicador visual sutil */
.offcanvas-form__textarea[readonly] {
    background-color: #fff;
    color: #333;
    cursor: default;
    resize: none;
    font-size: clamp(12px, 1.4vw, 14px);
    line-height: 1.6;
    font-family: 'Courier New', Courier, monospace;
}

/* ---- Footer fijo del offcanvas — contiene el botón ---- */
/*
    Bootstrap ya hace que #offcanvas-cotizar sea display:flex + flex-direction:column.
    .offcanvas-footer no crece ni encoge: se ancla debajo del área scrollable.
    El botón nunca sale de la caja blanca ni necesita posición absoluta.
*/
.offcanvas-footer {
    flex-shrink: 0;                        /* no se encoge nunca */
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    padding: clamp(12px, 1.8vw, 16px) clamp(16px, 2.5vw, 28px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.10);
}

.offcanvas-form__submit {
    display: block;
    width: 100%;
    padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px);
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gamo-blanco);
    background-color: var(--gamo-rojo);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.offcanvas-form__submit:hover {
    background-color: #a00005;
}


/* =============================================================
   FASE 2 — BADGES DE TAXONOMÍA EN TARJETAS DE PRODUCTO
   ============================================================= */

.prod-card__badges {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; /* Aquí cambias el layout de los badges (gama izq, sector der) */
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

/* Badge Gama — color rojo GAMO, anclado a la izquierda */
.gamo-badge-gama {
    background-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    font-size: calc(clamp(9px, 1vw, 11px) - 2px); /* 2px menos que la base responsiva */
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
}

/* Badge Sector — gris oscuro neutro, anclado a la derecha */
.gamo-badge-sector {
    background-color: #4a4a4a;
    color: var(--gamo-blanco);
    font-size: calc(clamp(9px, 1vw, 11px) - 2px); /* 2px menos que la base responsiva */
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: auto; /* empuja el sector badge al extremo derecho */
}

/* Gama / Sector en la cabecera del offcanvas */
#offcanvas-gama,
#offcanvas-sector {
    display: block;
    font-size: clamp(11px, 1.2vw, 13px);
    color: #ccc;
}

#offcanvas-gama:empty,
#offcanvas-sector:empty {
    display: none;
}


/* =============================================================
   FASE 2 — SECCIÓN GAMA (template-parts/seccion-gama.php)
   ============================================================= */

.seccion-gama {
    padding: clamp(16px, 3vw, 32px) 0;
}

.seccion-gama__card {
    text-align: center;
    padding: clamp(20px, 3vw, 32px) clamp(16px, 2vw, 24px);
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seccion-gama__card:hover {
    box-shadow: 0 6px 28px rgba(195, 0, 6, 0.12);
    transform: translateY(-4px);
}

.seccion-gama__img-link {
    text-decoration: none;
}

.seccion-gama__img-wrap {
    width: clamp(90px, 12vw, 130px);
    height: clamp(90px, 12vw, 130px);
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto clamp(12px, 2vw, 20px);
    border: 3px solid var(--gamo-rojo);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.seccion-gama__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Placeholder de inicial cuando no hay imagen */
.seccion-gama__placeholder {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    color: var(--gamo-rojo);
    line-height: 1;
}

.seccion-gama__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.seccion-gama__title {
    font-size: clamp(15px, 2vw, 20px);
    font-weight: 700;
    color: var(--gamo-negro);
    margin-bottom: 8px;
}

.seccion-gama__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.seccion-gama__title a:hover {
    color: var(--gamo-rojo);
}

.seccion-gama__desc {
    font-size: clamp(12px, 1.4vw, 14px);
    color: #555;
    margin-bottom: clamp(12px, 2vw, 20px);
    flex: 1;
}

.seccion-gama__btn {
    background-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    margin-top: auto;
}

.seccion-gama__btn:hover {
    background-color: #a00005;
    color: var(--gamo-blanco);
}


/* =============================================================
   FASE 2 — SECCIÓN SECTORES (Swiper multi-item)
   ============================================================= */

.seccion-sectores {
    padding: clamp(8px, 2vw, 16px) 0;
}

/*
   Wrapper externo: position:relative para anclar las flechas absolutas.
   padding lateral = espacio para que las flechas no tapen las tarjetas.
   padding-bottom  = espacio para la paginación (puntos).
   Las variables Swiper actúan sobre cualquier .swiper-button dentro del wrapper.
*/
.seccion-sectores {
    position: relative;
    padding: 0 clamp(36px, 5vw, 52px) clamp(36px, 4vw, 44px);
    --swiper-navigation-color: var(--gamo-rojo);
    --swiper-pagination-color: var(--gamo-rojo);
}

/* Flechas: posicionadas absolutas relativas al wrapper, centradas verticalmente */
.seccion-sectores__btn-prev,
.seccion-sectores__btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 18px)); /* 18px = mitad de la paginación */
    margin-top: 0;
    width: 38px;
    height: 38px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.seccion-sectores__btn-prev { left: 0; }
.seccion-sectores__btn-next { right: 0; }

.seccion-sectores__btn-prev:hover,
.seccion-sectores__btn-next:hover {
    box-shadow: none;
}

.seccion-sectores__btn-prev::after,
.seccion-sectores__btn-next::after {
    font-size: 13px;
    font-weight: 900;
}

/* Paginación: centrada debajo del swiper, sin solapar tarjetas */
.seccion-sectores__pagination {
    text-align: center;
    margin-top: clamp(12px, 2vw, 18px);
}

/* ── PROBLEMA 2: Alturas uniformes entre slides ──
   .swiper-slide usa display:flex para que la tarjeta hija
   pueda extenderse hasta la altura máxima del grupo visible.
   flex: 1 en la tarjeta garantiza que ocupe toda esa altura. */
.seccion-sectores__swiper .swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;
}

.seccion-sector__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(20px, 3vw, 32px) clamp(16px, 2.5vw, 24px);
    border-radius: 12px;
    border: 1.5px solid #e0e0e0;
    background-color: #fff;
    flex: 1; /* ocupa 100% del alto del slide — iguala todas las tarjetas */
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.seccion-sector__card:hover {
    border-color: var(--gamo-rojo);
    box-shadow: 0 6px 24px rgba(195, 0, 6, 0.08);
}

/* Imagen circular del sector */
.seccion-sector__img-wrap {
    width: clamp(60px, 12vw, 78px);
    height: clamp(60px, 12vw, 78px);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--gamo-rojo);
    margin-bottom: clamp(16px, 2.5vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    flex-shrink: 0;
}

.seccion-sector__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Placeholder inicial cuando no hay imagen */
.seccion-sector__img-wrap--placeholder {
    background-color: rgba(195, 0, 6, 0.08);
}

.seccion-sector__img-wrap--placeholder span {
    font-size: clamp(28px, 5vw, 42px);
    font-weight: 900;
    color: var(--gamo-rojo);
    line-height: 1;
}

.seccion-sector__title {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800;
    color: var(--gamo-negro);
    margin-bottom: clamp(8px, 1.2vw, 14px);
}

.seccion-sector__desc {
    font-size: clamp(11px, 1.5vw, 12px);
    color: #555;
    line-height: 1.65;
    margin-bottom: clamp(16px, 2.5vw, 24px);
    flex: 1;
}

.seccion-sector__btn {
    display: inline-block;
    background-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 600;
    padding: 8px 22px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    margin-top: auto;
}

.seccion-sector__btn:hover {
    background-color: #a00005;
    color: var(--gamo-blanco);
}
.swiper{padding: 10px!important;}

/* =============================================================
   FASE 2 — SECCIÓN REFERENCIAS (diseño testimonial)
   Flujo visual: Foto → Cita grande → Guion + Autor
   ============================================================= */

.seccion-referencias {
    padding: clamp(8px, 2vw, 16px) 0;
}

/* Cada slide: columna centrada */
.seccion-referencia__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(20px, 3vw, 40px) clamp(24px, 6vw, 80px);
    max-width: 760px;
    margin: 0 auto;
}

/* Foto circular */
.seccion-referencia__img-wrap {
    width: clamp(80px, 12vw, 120px);
    height: clamp(80px, 12vw, 120px);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--gamo-rojo);
    margin-bottom: clamp(20px, 3vw, 32px);
    flex-shrink: 0;
}

.seccion-referencia__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Texto grande de la cita (viene del editor del CPT) */
.seccion-referencia__cita {
    font-size: clamp(16px, 2.2vw, 22px);
    font-style: italic;
    font-weight: 400;
    color: var(--gamo-negro);
    line-height: 1.65;
    margin-bottom: clamp(16px, 2.5vw, 24px);
    position: relative;
    padding: 0 clamp(12px, 2vw, 20px);
}

/* Comillas decorativas */
.seccion-referencia__cita::before {
    content: '\201C';
    font-size: clamp(48px, 7vw, 80px);
    line-height: 0;
    color: var(--gamo-rojo);
    opacity: 0.25;
    position: absolute;
    top: clamp(16px, 3vw, 28px);
    left: clamp(-8px, -1vw, -4px);
    font-style: normal;
    font-weight: 800;
}

.seccion-referencia__cita p {
    margin: 0;
}

/* Autor con guion */
.seccion-referencia__autor {
    font-size: clamp(12px, 1.4vw, 15px);
    font-weight: 700;
    color: var(--gamo-rojo);
    font-style: normal;
    letter-spacing: 0.04em;
}


/* =============================================================
   FASE 2 — SECCIÓN ALIADOS (template-parts/seccion-aliados.php)
   ============================================================= */

.seccion-aliados {
    padding: clamp(8px, 2vw, 16px) 0;
}

.seccion-aliados__slide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(12px, 2vw, 24px) clamp(20px, 4vw, 48px);
}

.seccion-aliado__item {
    flex: 0 0 auto;
    max-width: clamp(80px, 12vw, 140px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.seccion-aliado__logo {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    filter: grayscale(60%);
    opacity: 0.85;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.seccion-aliado__logo:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.seccion-aliado__titulo {
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: 600;
    color: #444;
    text-align: center;
    margin-top: 8px;
    line-height: 1.3;
}

.seccion-aliado__desc {
    font-size: clamp(10px, 1.1vw, 12px);
    color: #777;
    text-align: center;
    margin-top: 4px;
    line-height: 1.4;
}


/* =============================================================
   FASE 2 — SECCIÓN TARJETAS (template-parts/seccion-tarjetas.php)
   ============================================================= */

.seccion-tarjetas {
    padding: clamp(8px, 2vw, 16px) 0;
}

.seccion-tarjeta__card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.seccion-tarjeta__card:hover {
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.seccion-tarjeta__img-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.seccion-tarjeta__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.seccion-tarjeta__body {
    padding: clamp(16px, 2.5vw, 28px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.seccion-tarjeta__title {
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 700;
    color: var(--gamo-negro);
    margin-bottom: 6px;
}

.seccion-tarjeta__subtitle {
    font-size: clamp(12px, 1.4vw, 14px);
    color: #555;
    margin-bottom: clamp(12px, 2vw, 20px);
    flex: 1;
}

.seccion-tarjeta__btn {
    background-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    align-self: flex-start;
    margin-top: auto;
}

.seccion-tarjeta__btn:hover {
    background-color: #a00005;
    color: var(--gamo-blanco);
}


/* =============================================================
   FASE 2 — MOTOR DE SECCIONES: ENVOLVENTE DE CADA SECCIÓN
   ============================================================= */

.gamo-seccion-modular {
    padding: clamp(40px, 6vw, 80px) 0;
}

/* Fondo blanco (default) */
.gamo-seccion--blanco {
    background-color: #ffffff;
}

/* Fondo gris GAMO */
.gamo-seccion--gris {
    background-color: #f5f5f5;
}

/* Fondo imagen con overlay oscuro */
.gamo-seccion--imagen {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.gamo-seccion--imagen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.gamo-seccion--imagen > .container {
    position: relative;
    z-index: 1;
}

/* Texto blanco automático cuando hay imagen de fondo */
.gamo-seccion--imagen .gamo-seccion-modular__titulo,
.gamo-seccion--imagen .gamo-seccion-modular__subtitulo {
    color: #ffffff;
}

/* Cabecera de la sección */
.gamo-seccion-modular__cabecera {
    margin-bottom: clamp(24px, 4vw, 48px);
}

.gamo-seccion-modular__titulo {
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 800;
    color: var(--gamo-negro);
    margin-bottom: 10px;
    line-height: 1.2;
}

.gamo-seccion-modular__subtitulo {
    font-size: clamp(14px, 1.8vw, 18px);
    color: #555;
    margin-bottom: 0;
    max-width: 680px;
}

/* Cuando la alineación es centro, centrar también el subtítulo */
.gamo-seccion-modular__cabecera.text-center .gamo-seccion-modular__subtitulo {
    margin-inline: auto;
}

/* Pie de sección: botón */
.gamo-seccion-modular__footer {
    margin-top: clamp(24px, 4vw, 48px);
}

/* Botón rojo reutilizable */
.gamo-btn-rojo {
    display: inline-block;
    background-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 700;
    padding: clamp(10px, 1.4vw, 14px) clamp(20px, 3vw, 32px);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease;
    border: none;
}

.gamo-btn-rojo:hover {
    background-color: #a00005;
    color: var(--gamo-blanco);
}

/* =============================================================
   FASE 4 — VISTA INDIVIDUAL DE PRODUCTO (single-producto_gamo.php)
   ============================================================= */

/* Breadcrumb */
.single-prod__breadcrumb {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e8e8e8;
    padding: clamp(10px, 1.5vw, 14px) 0;
}

.single-prod__breadcrumb .breadcrumb {
    font-size: clamp(11px, 1.2vw, 13px);
    color: #777;
    margin: 0;
    gap: 4px;
}

.single-prod__breadcrumb .breadcrumb-item a {
    color: var(--gamo-rojo);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.single-prod__breadcrumb .breadcrumb-item a:hover {
    opacity: 0.75;
}

.single-prod__breadcrumb .breadcrumb-item.active {
    color: #444;
}

/* Artículo principal */
.single-prod {
    padding: clamp(32px, 5vw, 64px) 0;
    background-color: #fff;
}

/* ── Galería ── */
.single-prod__gallery {
    position: sticky;
    top: calc(var(--header-height, 80px) + 16px);
}

.single-prod__main-img,
.single-prod__carousel-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
}

.single-prod__carousel {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
    background-color: #f9f9f9;
}

/* Tira de miniaturas */
.single-prod__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.single-prod__thumb-btn {
    flex: 0 0 auto;
    width: clamp(52px, 8vw, 72px);
    height: clamp(52px, 8vw, 72px);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.single-prod__thumb-btn.active,
.single-prod__thumb-btn:hover {
    border-color: var(--gamo-rojo);
}

.single-prod__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Sin imagen — placeholder */
.single-prod__no-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    border: 2px dashed #ddd;
    background-color: #f9f9f9;
    color: #bbb;
    font-size: clamp(12px, 1.4vw, 14px);
    gap: 10px;
}

.single-prod__no-img .fa-image {
    font-size: clamp(32px, 5vw, 48px);
}

/* ── Ficha técnica ── */
.single-prod__info {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 20px);
}

.single-prod__badges {
    margin-bottom: 0;
}

.single-prod__title {
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 800;
    color: var(--gamo-negro);
    line-height: 1.2;
    margin: 0;
}

/* DL de metadatos (SKU / Marca) */
.single-prod__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.single-prod__meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.single-prod__meta-row dt {
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 50px;
}

.single-prod__meta-row dd {
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 600;
    color: var(--gamo-negro);
    margin: 0;
}

.single-prod__divider {
    border-color: #e8e8e8;
    margin: 0;
}

/* Descripción del producto */
.single-prod__desc {
    font-size: clamp(13px, 1.5vw, 15px);
    color: #444;
    line-height: 1.75;
}

.single-prod__desc p:last-child {
    margin-bottom: 0;
}

/* Vista previa del configurador */
.single-prod__config-preview {
    background-color: #f9f9f9;
    border-left: 4px solid var(--gamo-rojo);
    border-radius: 0 8px 8px 0;
    padding: clamp(12px, 2vw, 18px) clamp(14px, 2.5vw, 20px);
}

.single-prod__config-label {
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gamo-rojo);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.single-prod__config-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.single-prod__config-list li {
    font-size: clamp(12px, 1.3vw, 14px);
    color: #555;
}

/* Botón principal Cotizar */
.single-prod__btn-cotizar {
    background-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    font-size: clamp(14px, 1.6vw, 16px);
    padding: clamp(14px, 2vw, 18px) clamp(20px, 3vw, 28px);
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.single-prod__btn-cotizar:hover {
    background-color: #a00005;
    color: var(--gamo-blanco);
    transform: translateY(-2px);
}

/* Enlace de vuelta a la categoría */
.single-prod__back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(12px, 1.3vw, 14px);
    color: #777;
    text-decoration: none;
    transition: color 0.2s ease;
}

.single-prod__back-link:hover {
    color: var(--gamo-rojo);
}

/* Paginación en grids (categorías, gamas, sectores) */
.cat-grid__pagination {
    margin-top: clamp(24px, 4vw, 40px);
    text-align: center;
}

.cat-grid__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    margin: 0 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cat-grid__pagination .page-numbers.current,
.cat-grid__pagination .page-numbers:hover {
    background-color: var(--gamo-rojo);
    color: var(--gamo-blanco);
    border-color: var(--gamo-rojo);
}


/* =============================================================
   FASE 4 — PÁGINA 404 (404.php)
   ============================================================= */

.error-404 {
    padding: clamp(60px, 10vw, 120px) 0;
    background-color: #fff;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.error-404__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 540px;
    margin: 0 auto;
}

/* Número grande decorativo */
.error-404__code {
    font-size: clamp(80px, 15vw, 160px);
    font-weight: 900;
    line-height: 1;
    color: #f0f0f0;
    letter-spacing: -4px;
    margin: 0 0 -20px;
    user-select: none;
}

.error-404__title {
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 800;
    color: var(--gamo-negro);
    margin-bottom: clamp(12px, 2vw, 20px);
    line-height: 1.2;
}

.error-404__desc {
    font-size: clamp(14px, 1.6vw, 16px);
    color: #666;
    line-height: 1.7;
    margin-bottom: clamp(24px, 4vw, 40px);
}

.error-404__btn {
    margin-bottom: clamp(14px, 2vw, 20px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(12px, 1.8vw, 16px) clamp(24px, 3.5vw, 36px);
}

.error-404__link-alt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(12px, 1.3vw, 14px);
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.error-404__link-alt:hover {
    color: var(--gamo-rojo);
}


/* Texto vacío de sección (sin datos) */
.seccion-empty {
    text-align: center;
    color: #888;
    font-size: clamp(13px, 1.5vw, 15px);
    padding: clamp(20px, 4vw, 40px) 0;
}


/* ============================================================
   SECCIÓN CONTACTO GAMO
   ============================================================ */

.seccion-contacto {
    width: 100%;
}

/* Columna izquierda — bloque de información */
.seccion-contacto__info,
.seccion-contacto__form-wrap {
    padding: clamp(24px, 3vw, 40px);
    border-radius: 12px;
    background-color: #fff;
    height: 100%;
}

.seccion-contacto__info {
    background-color: var(--gamo-oscuro, #191919);
    color: #fff;
}

/* Títulos de columna */
.seccion-contacto__titulo {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    margin-bottom: clamp(10px, 1.4vw, 16px);
    line-height: 1.2;
}

.seccion-contacto__info .seccion-contacto__titulo {
    color: #fff;
}

.seccion-contacto__form-wrap .seccion-contacto__titulo {
    color: var(--gamo-oscuro, #1f1f1f);
}

/* Texto descriptivo */
.seccion-contacto__desc {
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.7;
    margin-bottom: clamp(20px, 2.5vw, 30px);
    opacity: 0.85;
}

.seccion-contacto__form-wrap .seccion-contacto__desc {
    opacity: 1;
    color: #555;
}

/* Lista de ítems de contacto */
.seccion-contacto__items {
    list-style: none;
    padding: 0;
    margin: 0 0 clamp(24px, 3vw, 36px) 0;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6vw, 18px);
}

.seccion-contacto__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.seccion-contacto__item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--gamo-rojo, #c30006);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(13px, 1.4vw, 15px);
}

.seccion-contacto__item-texto {
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.6;
    padding-top: 8px;
    color: rgba(255, 255, 255, 0.9);
}

/* Google Maps iframe */
.seccion-contacto__mapa {
    width: 100%;
    margin-top: clamp(16px, 2vw, 24px);
    border-radius: 8px;
    overflow: hidden;
    line-height: 0; /* elimina espacio inferior del inline iframe */
}

.seccion-contacto__mapa iframe {
    width: 100%;
    height: clamp(180px, 22vw, 280px);
    border: none;
    display: block;
}

/* Columna derecha — wrapper del shortcode */
.seccion-contacto__shortcode {
    margin-top: clamp(16px, 2vw, 24px);
}

/* Estilos base para CF7 dentro de la sección contacto */
.seccion-contacto__shortcode .wpcf7-form p {
    margin-bottom: clamp(12px, 1.5vw, 16px);
}

.seccion-contacto__shortcode .wpcf7-form input[type="text"],
.seccion-contacto__shortcode .wpcf7-form input[type="email"],
.seccion-contacto__shortcode .wpcf7-form input[type="tel"],
.seccion-contacto__shortcode .wpcf7-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: clamp(13px, 1.4vw, 14px);
    font-family: inherit;
    transition: border-color 0.2s ease;
    background-color: #f9f9f9;
}

.seccion-contacto__shortcode .wpcf7-form input:focus,
.seccion-contacto__shortcode .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--gamo-rojo, #c30006);
    background-color: #fff;
}

.seccion-contacto__shortcode .wpcf7-form input[type="submit"] {
    background-color: var(--gamo-rojo, #c30006);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: clamp(13px, 1.4vw, 14px);
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease;
}

.seccion-contacto__shortcode .wpcf7-form input[type="submit"]:hover {
    background-color: #a00005;
}

/* Responsivo — apila columnas en tablet/mobile */
@media (max-width: 991.98px) {
    .seccion-contacto__info,
    .seccion-contacto__form-wrap {
        height: auto;
    }
}


/* ============================================================
   CHECKBOX DE SELECCIÓN MÚLTIPLE EN TARJETAS DE PRODUCTO
   ============================================================ */

.prod-card__select-label {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    cursor: pointer;
    line-height: 0;
}

/* Ocultar el <input> nativo */
.prod-card__checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Icono visual del checkbox */
.prod-card__select-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.88);
    border: 2px solid #ccc;
    transition: background-color 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Estado seleccionado */
.prod-card__checkbox:checked + .prod-card__select-icon {
    background-color: var(--gamo-rojo, #c30006);
    border-color: var(--gamo-rojo, #c30006);
}

.prod-card__checkbox:checked + .prod-card__select-icon::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(42deg) translateY(-1px);
}

/* Tarjeta seleccionada: borde rojo sutil */
.prod-card--selected {
    outline: 2px solid var(--gamo-rojo, #c30006);
    outline-offset: -2px;
}


/* ============================================================
   BARRA FLOTANTE DE SELECCIÓN MÚLTIPLE
   ============================================================ */

.gamo-sel-bar {
    position: fixed;
    bottom: -80px;                      /* oculto por defecto */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    background-color: #1f1f1f;
    color: #fff;
    border-radius: 40px;
    padding: clamp(10px, 1.5vw, 14px) clamp(16px, 2.5vw, 28px);
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 18px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
    transition: bottom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    max-width: calc(100vw - 32px);
}

.gamo-sel-bar--visible {
    bottom: clamp(16px, 3vw, 28px);
}

.gamo-sel-bar__count {
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 600;
    opacity: 0.9;
    flex-shrink: 0;
}

.gamo-sel-bar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gamo-sel-bar__clear {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: clamp(11px, 1.2vw, 13px);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.gamo-sel-bar__clear:hover {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.gamo-sel-bar__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--gamo-rojo, #c30006);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease;
    white-space: nowrap;
}

.gamo-sel-bar__btn:hover {
    background-color: #a00005;
}


/* ============================================================
   OFFCANVAS WIZARD — CABECERA
   ============================================================ */

.oc-header {
    align-items: flex-start !important;
    gap: 12px;
    flex-wrap: nowrap;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: clamp(12px, 1.8vw, 16px);
}

.oc-header__info {
    flex: 1;
    min-width: 0;
}

.oc-header__info .offcanvas-title {
    font-size: clamp(14px, 1.6vw, 17px);
    font-weight: 800;
    color: #1f1f1f;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-meta {
    font-size: clamp(11px, 1.2vw, 12px);
    color: #777;
    margin: 3px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.oc-progress {
    font-size: 11px;
    font-weight: 700;
    color: var(--gamo-rojo, #c30006);
    background-color: rgba(195, 0, 6, 0.08);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}


/* ============================================================
   OFFCANVAS WIZARD — CUERPO (pasos de config y formulario)
   ============================================================ */

/* Grupo de configuración de producto */
.oc-grupo {
    margin-bottom: clamp(14px, 2vw, 20px);
}

.oc-grupo__label {
    font-size: clamp(11px, 1.25vw, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    margin-bottom: 8px;
}

.oc-grupo__opts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oc-grupo__opts .form-check {
    padding: 8px 12px 8px 32px;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.oc-grupo__opts .form-check:hover {
    background-color: rgba(195, 0, 6, 0.04);
    border-color: rgba(195, 0, 6, 0.25);
}

.oc-grupo__opts .form-check-input:checked {
    background-color: var(--gamo-rojo, #c30006);
    border-color:     var(--gamo-rojo, #c30006);
}

.oc-grupo__opts .form-check-label {
    font-size: clamp(12px, 1.35vw, 13px);
    cursor: pointer;
}

.oc-sin-config {
    font-size: clamp(12px, 1.3vw, 13px);
    color: #888;
    text-align: center;
    padding: clamp(20px, 4vw, 36px) 0;
}


/* ============================================================
   OFFCANVAS WIZARD — FORMULARIO DE CONTACTO (último paso)
   ============================================================ */

.oc-form__group {
    margin-bottom: clamp(12px, 1.6vw, 16px);
}

.oc-form__label {
    display: block;
    font-size: clamp(11px, 1.25vw, 12px);
    font-weight: 700;
    color: #444;
    margin-bottom: 5px;
}

.oc-form__req {
    color: var(--gamo-rojo, #c30006);
}

.oc-form__input,
.oc-form__textarea {
    font-size: clamp(12px, 1.35vw, 13px) !important;
    border-color: #ddd;
    border-radius: 6px;
    transition: border-color 0.15s ease;
}

.oc-form__input:focus,
.oc-form__textarea:focus {
    border-color: var(--gamo-rojo, #c30006);
    box-shadow: 0 0 0 2px rgba(195, 0, 6, 0.1);
}

.oc-form__input.is-invalid,
.oc-form__textarea.is-invalid {
    border-color: #dc3545;
}

.oc-form__textarea {
    resize: none;
    background-color: #f8f8f8;
    color: #444;
    font-size: clamp(11px, 1.2vw, 12px) !important;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.6;
}


/* ============================================================
   OFFCANVAS — ESTRUCTURA FLEX (header / body / footer)
   ============================================================ */

#offcanvas-cotizar {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

#offcanvas-cotizar .offcanvas-header {
    flex-shrink: 0;
}

#offcanvas-cotizar .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 20px);
}

#offcanvas-cotizar .offcanvas-footer {
    flex-shrink: 0;
    padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2vw, 20px);
    border-top: 1px solid #e8e8e8;
    background-color: #fff;
}

/* Botón de acción del Wizard */
#oc-btn-accion {
    background-color: var(--gamo-rojo, #c30006);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: clamp(13px, 1.4vw, 14px);
    font-weight: 700;
    padding: 12px 20px;
    transition: background-color 0.18s ease;
}

#oc-btn-accion:hover {
    background-color: #a00005;
}

/* Mejora de área táctil para PageSpeed (Accesibilidad) */
.swiper-pagination-bullet {
   width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,15px))!important;
  height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,15px))!important;
}

/* ============================================================
   SECCIÓN CONTACTO GAMO — Frontend
   ============================================================ */
.seccion-contacto {
    width: 100%;
}

.seccion-contacto__info,
.seccion-contacto__formulario {
    padding: clamp(24px, 3vw, 40px);
}

.seccion-contacto__info {
    background-color: #f8f8f8;
    border-radius: 12px;
    height: 100%;
}

.seccion-contacto__titulo {
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 800;
    color: #1f1f1f;
    margin-bottom: 12px;
}

.seccion-contacto__desc {
    font-size: clamp(13px, 1.5vw, 15px);
    color: #555;
    margin-bottom: 24px;
    line-height: 1.65;
}

/* Lista de ítems de contacto */
.seccion-contacto__lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
    padding: 0;
}

.seccion-contacto__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.seccion-contacto__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background-color: var(--gamo-rojo, #c30006);
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    flex-shrink: 0;
}

.seccion-contacto__enlace,
.seccion-contacto__texto {
    font-size: clamp(13px, 1.4vw, 15px);
    color: #333;
    line-height: 1.5;
    padding-top: 10px;
}

.seccion-contacto__enlace {
    text-decoration: none;
    transition: color 0.18s;
}

.seccion-contacto__enlace:hover {
    color: var(--gamo-rojo, #c30006);
}

/* Mapa de Google (ratio helper de Bootstrap 5 ya lo gestiona) */
.seccion-contacto__mapa iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

/* Columna del formulario */
.seccion-contacto__formulario {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Estilos del form CF7 en contexto Bootstrap 5 */
.seccion-contacto__cf7 .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.seccion-contacto__cf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.seccion-contacto__cf7 input[type="text"],
.seccion-contacto__cf7 input[type="email"],
.seccion-contacto__cf7 input[type="tel"],
.seccion-contacto__cf7 textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.18s;
}

.seccion-contacto__cf7 input:focus,
.seccion-contacto__cf7 textarea:focus {
    outline: none;
    border-color: var(--gamo-rojo, #c30006);
    box-shadow: 0 0 0 3px rgba(195, 0, 6, 0.1);
}

.seccion-contacto__cf7 .wpcf7-submit {
    background-color: var(--gamo-rojo, #c30006);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: clamp(13px, 1.4vw, 15px);
    cursor: pointer;
    transition: background-color 0.18s;
    align-self: flex-start;
}

.seccion-contacto__cf7 .wpcf7-submit:hover {
    background-color: #a00005;
}

/* Admin — grid de la sub-página Contacto GAMO */
.gamo-contacto-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 16px;
}

.gamo-admin-col {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 24px;
}

.gamo-admin-col h2 {
    font-size: 15px;
    font-weight: 700;
    border-bottom: 2px solid #c30006;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .gamo-contacto-admin-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   OFFCANVAS — Feedback de envío (éxito / error)
   ============================================================ */
.oc-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(32px, 5vw, 56px) 24px;
    text-align: center;
}

.oc-feedback__icon {
    font-size: clamp(2rem, 6vw, 3rem);
    margin: 0;
    line-height: 1;
}

.oc-feedback__msg {
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 600;
    margin: 0;
    color: #1f1f1f;
}

.oc-feedback--ok  .oc-feedback__icon { color: #198754; }
.oc-feedback--err .oc-feedback__icon { color: var(--gamo-rojo, #c30006); }


/* ============================================================
   SLIDER / CARRUSEL GAMO (Bootstrap 5 + personalización)

   Box Model:
   .gamo-seccion--slider           → wrapper de sección sin padding (lo elimina del motor)
   .gamo-slider-section            → section full-width (container-fluid px-0 via BS5)
     .gamo-carousel                → el carousel toca extremo a extremo
       .carousel-item              → lleva background-image inline; cubre 100% del ancho
         .gamo-slide__overlay      → capa oscura absoluta para legibilidad
         .container.gamo-slide__container → centrado BS5 con 100px padding vertical
           .gamo-slide__caption    → títulos y botón
   ============================================================ */

/* La sección del motor no agrega padding; el slide lo gestiona internamente */
.gamo-seccion--slider {
    padding: 0;
    overflow: hidden;
}

/* La <section> es container-fluid px-0 (via clases BS5): ocupa el 100% del viewport */
.gamo-slider-section {
    display: block;
    width: 100%;
    overflow: hidden;
}

/* El carousel ocupa todo el ancho de la sección */
.gamo-carousel {
    position: relative;
    width: 100%;
}

/* ── carousel-item: imagen full-width ───────────────────────────────────
   SIN display:flex aquí: Bootstrap gestiona display:none/block en los items
   inactivos y un flex externo lo pisaría mostrando todos los slides a la vez.
   El centrado vertical se delega al wrapper interno .gamo-slide__flex.       */
.gamo-carousel .carousel-item {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;   /* ancla el .gamo-slide__overlay absoluto */
}

/* Wrapper flex INTERNO — centra el contenido en eje Y sin interferir
   con el display:none/block que Bootstrap aplica al .carousel-item     */
.gamo-slide__flex {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 70vh;     /* altura imponente: 70% del viewport */
}

/* Capa oscura semitransparente — cubre el 100% del carousel-item */
.gamo-slide__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.48);
    pointer-events: none;
    z-index: 1;
}

/* Contenedor Bootstrap: z-index > overlay + padding mínimo de seguridad
   El centrado vertical lo hace el d-flex del carousel-item, NO el padding */
.gamo-slide__container {
    position: relative;
    z-index: 2;
    padding: 40px 0;   /* padding de seguridad para screens muy pequeñas / contenido largo */
    width: 100%;       /* ocupa el ancho del flex-parent */
}

/* Bloque de texto: ancho máximo y alineación */
.gamo-slide__caption {
    width: 100%;
    max-width: 680px;
}

.gamo-slide__caption.text-center {
    margin-inline: auto;
    text-align: center;
}

.gamo-slide__titulo {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.gamo-slide__subtitulo {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 24px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.gamo-slide__btn {
    font-weight: 600;
}

/* ── Flechas de navegación (rojas, sobre la imagen, con sombra negra) ── */
.gamo-slider__prev,
.gamo-slider__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #c30006;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 10;
}

/* Desplazamiento: ligeramente dentro del borde para que no se corten */
.gamo-slider__prev { left: 20px; }
.gamo-slider__next { right: 20px; }

.gamo-slider__prev:hover,
.gamo-slider__next:hover {
    background-color: #a00004;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
    opacity: 1;
}

.gamo-slider__prev .carousel-control-prev-icon,
.gamo-slider__next .carousel-control-next-icon {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ── Indicadores (dots) — dentro del slide, en la parte inferior ── */
.gamo-carousel__dots {
    bottom: 20px;           /* ahora están dentro del carousel-item */
    margin-bottom: 0;
    z-index: 10;
}

.gamo-carousel__dots [data-bs-slide-to] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
    border: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.gamo-carousel__dots [data-bs-slide-to].active {
    background-color: #c30006;
    transform: scale(1.35);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    /* 70vh en mobile ya es bastante; se mantiene porque vh es relativo */
    .gamo-slide__container {
        padding: 32px 0;
    }

    .gamo-slide__caption {
        max-width: 100%;
    }

    .gamo-slider__prev,
    .gamo-slider__next {
        width: 38px;
        height: 38px;
    }

    .gamo-slider__prev { left: 10px; }
    .gamo-slider__next { right: 10px; }
}

@media (max-width: 480px) {
    .gamo-slide__container {
        padding: 24px 0;
    }

    .gamo-slider__prev,
    .gamo-slider__next {
        width: 32px;
        height: 32px;
    }
}
}