/* site.css - estilos del menu con flyouts */

/* Prevenir scroll horizontal en toda la página */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

:root{
    --brand-navy: #dbe3ee; --brand-blue:#1e6bd6; --brand-green:#2da44e; --brand-gold:#d4a017;
    --ink:#0b0b0b; --muted:#5f6b7a; --line:#e6e8eb; --bg:#f7f9fc; --bg-alt:#f0f4fa;
    --text:#0b0b0b; /* Color de texto principal, igual a --ink */
    --wrap:1600px; --space: clamp(12px, 1.2vw, 24px); --radius: 14px; --shadow: 0 8px 24px rgba(11,58,115,0.08);
}

.stack{display:grid;gap:calc(var(--space)*1.4)}

.container {
    max-width: 95% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Tweaks generales del dropdown */
.navbar .dropdown-menu {
    box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,.15);
    border-radius: .5rem;
    min-width: 16rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
}

.dropdown-item {
    white-space: normal;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #005e3d !important;
    color: #ffffff !important;
}

/* Submenú lateral (flyout) */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: -4px;
    left: 100%;
    margin-left: -2px;
    margin-right: .25rem;
}

/* Crear un área invisible entre el menú y submenú para mantener el hover */
.dropdown-submenu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 10px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
}

/* Pequeño chevrón para indicar submenú */
.dropdown-submenu > .dropdown-toggle::after {
    content: "›";
    border: 0;
    float: right;
    font-weight: 600;
    line-height: 1;
}

/* Desktop: abrir por hover con delay */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .navbar .dropdown > .dropdown-menu {
        transition-delay: 0s, 0s, 2s;
    }

    .navbar .dropdown-submenu:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .navbar .dropdown-submenu > .dropdown-menu {
        transition-delay: 0s, 0s, 2s;
    }

    .navbar .dropdown-menu {
        margin-top: 0;
        display: block;
    }
}

/* Móvil: submenús anidados como bloques que se abren por JS */
@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-menu {
        position: static;
        float: none;
        display: none;                 /* será .show por JS */
        margin: .25rem 0 .5rem 1rem;
        border-left: 2px solid rgba(0,0,0,.08);
        border-radius: .25rem;
    }
    .dropdown-submenu > .dropdown-menu.show { display: block; }
}
/* Gaps y alineación como en wireframe */
.navbar-nav.gap-3 .nav-link{
    padding-right:.25rem;
    padding-left:.25rem;
    position: relative;
}

/* Negrita para todos los links del menú */
.navbar-nav .nav-link,
.navbar-nav .nav-link.dropdown-toggle {
    font-weight: 700 !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* Efecto de línea animada en hover del menú - de izquierda a derecha */
.navbar-nav .nav-link {
    display: inline-flex !important;
    position: relative;
    align-items: center !important;
}

.navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #005e3d;
    transition: width 0.3s ease;
    z-index: 1050;
}

.navbar-nav .nav-link:hover::before {
    width: 100%;
}

/* Ocultar el chevron por defecto de Bootstrap en dropdowns */
.navbar-nav .dropdown-toggle::after {
    content: '' !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

.navbar .nav-logo{ max-height: 50px; height:auto; width:auto; }
@media (max-width: 991.98px){ .navbar .nav-logo{ max-height: 50px; } }

/* ====== Header con logo centrado: layout de 3 zonas ====== */
@media (min-width: 992px){
    :root{
        /* Ajusta a gusto: separación entre links dentro de cada lado */
        --nav-gap: 2.25rem;
        /* altura máxima del logo */
        --nav-logo-max: 80px;
    }

    .nav-grid{
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* izquierda | logo | derecha */
        align-items: center;
        gap: 2rem; /* separación entre las 3 zonas */
    }

    .nav-left,
    .nav-right{
        /* ocupan el 100% de su columna */
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: var(--nav-gap);
    }

    .nav-left{ justify-content: flex-start; }
    .nav-right{ justify-content: flex-end; }

    .nav-brand{ line-height: 1; }               /* evita "bailes" verticales */
    .nav-logo{ max-height: var(--nav-logo-max); height:auto; width:auto; }
}

/* En móvil el logo puede ser un poco más pequeño */
@media (max-width: 991.98px){
    .nav-logo{ max-height: 36px; }

    /* Logo móvil en el navbar */
    .nav-logo-mobile {
        max-height: 40px;
        height: auto;
        width: auto;
    }
}

/* === Full-bleed: fuerza ancho viewport aunque el layout use container === */
.full-bleed{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ===== HERO: alto, cover, overlay y caption centrado (sin duplicados) ===== */
/* OJO: usamos selectores con hijo directo para tocar SOLO el carrusel real */
.hero {
    position: relative;
    height: 70vh;  /* Altura como en wireframe */
    min-height: 500px;
    margin-bottom: 0 !important;  /* Elimina gap abajo del hero */
    padding: 0 !important;  /* No padding en section */
    box-sizing: border-box;  /* Incluye borders/padding en width/height */
}

.hero .carousel {
    height: 100% !important;  /* Carousel ocupa toda la height del hero */
    margin-bottom: 0 !important;  /* No gap del carousel plugin */
    padding: 0 !important;
    box-sizing: border-box;
}

.hero .carousel-inner {
    height: 100% !important;
}

.hero .carousel-item {
    height: 100% !important;
    position: relative;  /* Para posicionar caption absolute en Slide */
}

.hero .carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;  /* Cubre sin distorsión, full-width */
    object-position: center;
    display: block;
    box-sizing: border-box;
}

/* Full-width for hero (aplica full-bleed a la section hero misma, sin scrollbar) */
.hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;  /* Oculta cualquier overflow horizontal */
}

/* Overlay opcional para legibilidad del texto */
.hero .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(0,0,0,.35) 0%,
            rgba(0,0,0,.25) 40%,
            rgba(0,0,0,.15) 100%
    );
    z-index: 2;
}

/* Caption centrada (texto sobre overlay) */
.hero .caption-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 80%;
}

.hero .caption-inner h1 {
    font-size: clamp(2rem, 5vw, 4rem);  /* Responsive como wireframe */
    margin-bottom: 1rem;
}

.hero .caption-inner p {
    font-size: 1.25rem;
    opacity: 0.9;
}

.hero .btn-hero {
    margin-top: 1rem;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    background: white;
    color: #0d6efd;  /* Azul como CTA */
    font-weight: bold;
    text-decoration: none;
}

/* Flechas del carousel (visibles como wireframe) */
.carousel-control-prev, .carousel-control-next {
    width: 5%;
    opacity: 0.5;
}

.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1;
}

/* Oculta duplicados si persisten (fix temporal) */
.carousel-inner .carousel-item:not(.active) {
    display: none;
}

/* Elimina gap abajo del hero (pega a value props) */
.hero {
    margin-bottom: 0 !important;
}

.value-props-section {
    margin-top: 0 !important;
    padding-top: 0 !important;  /* Elimina padding-top de la section siguiente */
}

/* Full-width for hero carousel (force 100vw, no container limit, sin scrollbar horizontal) */
.hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;  /* Oculta cualquier overflow horizontal */
}

/* Fix para el carousel dentro de hero full-bleed */
.hero .carousel {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Fix para scrollbar horizontal en pantallas anchas (resta ancho del scrollbar ~17px) */
@media (min-width: 1200px) {
    .hero {
        margin-left: calc(-50vw + 8.5px);  /* Mitad del scrollbar */
        margin-right: calc(-50vw + 8.5px);
    }
}

/* Oculta scrollbar horizontal global si persiste (fix final) */
body {
    overflow-x: hidden;  /* Oculta scrollbar horizontal en body */
}

/* Overlay "Elige tu interés" como Haifa (dentro del carousel, no cortado) */
.hero-choose-overlay {
    position: absolute;
    bottom: 10%;  /* Dentro del carousel, sin cortarse - ajusta a 5% si quieres más abajo */
    left: 0;
    right: 0;
    z-index: 15;  /* Más alto para encima del H1 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);  /* Semi-transparente negro */
    padding-bottom: 1rem;  /* Espacio para no cortarse en borde */
}

.hero-choose-overlay h3 {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.hero-btn {
    background-color: #005e3d;  /* Verde Haifa */
    border-color: #005e3d;
    transition: all 0.3s ease;
    min-width: 200px;
}

.hero-btn:hover {
    background-color: #218838;  /* Verde oscuro hover */
    transform: scale(1.05);  /* Scale sutil */
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
}

@media (max-width: 991px) {
    .hero-choose-overlay .d-flex {
        flex-direction: column;  /* Apila botones en mobile */
        gap: 1rem;
    }
    .hero-btn {
        min-width: 250px;
    }
}



/* Value props más abajo para no mezclarse con overlay */
.value-props-section {
    padding-top: 1rem !important;  /* Reducido para acercar al carrusel */
    margin-top: 0 !important;
}

/* H1 más arriba en slide (como Haifa, cerca del top) - selector específico para nesting CMS */
.hero .carousel-item .cms-plugin.slide-caption h1 {
    position: absolute !important;
    top: 1% !important;  /* Sube más, ajusta a 15% si quieres cerca del top */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 12 !important;
    text-align: center !important;
    color: white !important;
    max-width: 80% !important;
    width: 100% !important;
    margin: 0 !important;  /* Elimina margins default del h1 */
    font-size: clamp(2rem, 5vw, 4rem) !important;  /* Responsive */
}

/* Para p y CTA en caption-inner (si agregas) */
.hero .carousel-item .cms-plugin.slide-caption .lead {
    position: absolute !important;
    top: 55% !important;  /* Debajo del h1 */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 12 !important;
    text-align: center !important;
    color: white !important;
    max-width: 80% !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
    opacity: 0.9 !important;
}

.hero .carousel-item .cms-plugin.slide-caption .btn-hero {
    position: absolute !important;
    top: 70% !important;  /* Debajo del p */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 12 !important;
    margin: 0 !important;
}

/* Overlay "Elige tu interés" mitad en carousel, mitad abajo (invade white space) */
.hero-choose-overlay {
    /*top: 10% !important;
    bottom: -20%;  /* Más invasión, mitad en carousel/mitad abajo - ajusta a -25% si quieres más */
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    padding-bottom: 0.5rem;
}

/* Value props más abajo para no mezclarse con overlay */
.value-props-section {
    padding-top: 1rem !important;  /* Reducido nuevamente a la mitad del espacio */
    margin-top: 0 !important;
}

/* ===== STICKY MENU: fijo al tope al scroll down, altura 50px desktop ===== */
/* Header sticky: se fija al tope al scroll, con altura reducida 50px */
header {
    position: sticky;
    top: 0;
    z-index: 1030;  /* Sobre todo */
    transition: all 0.3s ease;  /* Suave al scroll */
    height: 80px;  /* Altura normal */
}

header.scrolled {
    height: 50px;  /* Altura reducida al scroll */
    background-color: rgba(255,255,255,0.95);  /* Fondo semi-transparente */
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);  /* Sombra sutil */
}

/* Logo se encoge al scroll */
header .nav-logo {
    max-height: 50px;  /* Normal */
    transition: max-height 0.3s ease;
}

header.scrolled .nav-logo {
    max-height: 35px;  /* Más pequeño al scroll */
}

/* Links se encogen en font-size */
header .nav-link {
    font-size: 1rem;  /* Normal */
    transition: font-size 0.3s ease;
}

header.scrolled .nav-link {
    font-size: 0.875rem;  /* Más pequeño al scroll */
}

/* Móvil: solo logo + hamburger (colapso con botón 3 rayas) */
@media (max-width: 991.98px) {
    header {
        height: 60px;  /* Altura fija en mobile */
    }
    header.scrolled {
        height: 50px;  /* Reducida al scroll */
    }
    .nav-grid { display: none; }  /* Oculta grid desktop en mobile */
    .navbar-collapse {  /* Menó colapsado */
        background: white;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
    .navbar-toggler {  /* Botón hamburger (3 rayas) */
        border: none;
        padding: 0.25rem;
    }
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");  /* Icono 3 rayas */
    }
}

/* H1 arriba en carousel-caption (sobrescribe Bootstrap bottom para top) */
.hero .carousel-caption {
    position: absolute !important;
    top: 10% !important;  /* Sube el texto ┬ó ajusta a 5% si quieres Más arriba */
    bottom: auto !important;  /* Desactiva bottom default */
    left: 10% !important;  /* Alinea a la izquierda (ajusta % para margen izquierdo) */
    transform: none !important;  /* Sin translate para izquierda */
    z-index: 12 !important;
    text-align: left !important;  /* Alinea texto a la izquierda */
    color: white !important;
    max-width: 80% !important;
    width: auto !important;  /* Ancho automótico para izquierda */
    padding: 1rem !important;  /* Espacio alrededor */
    margin: 0 !important;
}


.hero .btn-hero {
    padding: 0.75rem 2rem;  /* Espaciado interno normal */
    border-radius: 50px;  /* Píldora redondeada */
    background: #083b00;  /* Verde oscuro como quieres */
    color: #ffffff;  /* Texto blanco */
    font-weight: bold;  /* Negrita */
    text-decoration: none;  /* Sin subrayado */
    display: inline-block;  /* Tamaño normal, no estirado */
    text-align: center;  /* Texto centrado en el botón */
    margin: 1rem auto 0;  /* Espacio arriba y centrado horizontal */
    width: auto;  /* Ancho automático, no 100% */
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);  /* Sombra sutil para profundidad */
    transition: all 0.3s ease;  /* Hover suave */
}

.hero .btn-hero:hover {
    background: #107904;  /* Verde Más oscuro hover */
    transform: translateY(-2px);  /* Levanta sutil al hover */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);  /* Sombra Más grande */
}



/* Tabs wrapper para Invasión (como Haifa, margin-top negativo) */
.tabs-wrapper {
    margin-top: -80px;  /* Invasión al hero desde abajo */
    position: relative;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.32);  /* Semi-transparente blanco */
    border-radius: 40px 40px 0 0;  /* Rounded top */
    z-index: 10;  /* Encima del hero */
    padding-bottom: 150px;  /* Espacio para grids */
}
/* Botones tabs (rounded, active verde, no active blanco/verde como Haifa) */
.pill.tab {
    background: white;  /* Fondo blanco para no active */
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);  /* Sombra sutil */
    border: 1px solid #005e3d;  /* Borde verde */
    color: #005e3d;  /* Letras verdes */
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;  /* Para ::after flecha */
    font-size: 1rem;  /* Tamaóo normal */
    min-width: 200px;
}

.pill.tab.active {
    background: #005e3d;  /* Fondo verde para active */
    border-color: #005e3d;
    color: white;  /* Letras blancas */
}

.pill.tab.active::after {
    content: '';  /* Flecha pequeóa hacia abajo */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #005e3d;  /* Verde para coincidir con active */
    margin-top: -1px;  /* Pega al botón */
}

.pill.tab:hover {
    background: rgba(255,255,255,0.8);  /* Hover 20% opacidad (blanco claro) */
}

.pill.tab:hover.active {
    background: #218838;  /* Hover Más oscuro para active */
}

@media (max-width: 991px) {
    .pill.tab {
        font-size: 0.875rem;  /* Achica font en mobile */
        padding: 0.5rem 1rem;  /* Achica padding */
        min-width: auto;  /* No min-width fijo */
    }
}

/* Tab panels (oculto/mostrado) */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Icon carousel (grid responsive, hover scale) */
.icon-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding: 2rem 0;
}

.icon-card {
    background: white;
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.icon-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
}

.icon-placeholder {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Reglas movidas al final del archivo (lónea 1283+) para móxima prioridad */

/* Carousel nav (flechas sides) - COLOCADAS FUERA DEL CARRUSEL */
.carousel-wrap {
    position: relative;
    padding: 0 60px; /* Espacio para las flechas a los costados */
}

.carousel-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    z-index: 5;
    pointer-events: none; /* Para que no interfiera con el contenido */
}

.carousel-btn {
    pointer-events: auto; /* Reactivar eventos en los botones */
    background: #fff;
    border: none;
    color: #333;
    font-size: 1.8rem;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.carousel-btn:hover {
    background: #f0f0f0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    transform: scale(1.1);
}

/* Posicionar flechas FUERA del carrusel */
.carousel-btn.prev {
    left: 0;
    position: absolute;
}

.carousel-btn.next {
    right: 0;
    position: absolute;
}

@media (max-width: 991px) {
    .icon-carousel {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .carousel-wrap {
        padding: 0; /* Sin padding en mobile */
    }
    .carousel-nav {
        display: none;  /* Oculta flechas en mobile */
    }
}

.card-body img { max-width: 100%; height: auto; display: block; }
.icon-card .placeholder { max-width: 100%; max-height: 80px; height: auto; object-fit: contain; display: block; }
/* === Home: value props / feature panels / news / testimonials === */
.value-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1000px){.value-cards{grid-template-columns:1fr}}
.value-card{display:grid;gap:8px;padding:22px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.value-card .icon{width:48px;height:48px;border-radius:12px;background:#eef6ff;border:1px solid #d7e6ff;display:grid;place-items:center}

.feature-split{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.feature-split.reverse{grid-template-columns:1fr 1.2fr}
@media (max-width:1100px){.feature-split,.feature-split.reverse{grid-template-columns:1fr}}
.feature-visual img { max-width: 100%; height: auto; display: block; } /* asegura que las imógenes dentro de feature-visual sean responsivas */

/* Modificador: feature-split con ambas columnas como cards */
.feature-split--cards {
    align-items: stretch; /* ambas columnas a la misma altura */
}
.feature-split--cards .feature-visual.card {
    padding: 0;
    overflow: hidden;
    height: 100%;
}
.feature-split--cards .feature-visual.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
}
.feature-split--cards .stack.card {
    justify-content: center;
    gap: 1rem;
    height: 100%;
}

/* --- Soluciones integrales por etapa fenológica --- */
.band--soluciones-fenologicas {
    background: #005e3d;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.band--soluciones-fenologicas .stack .section-title,
.band--soluciones-fenologicas .stack p {
    color: #ffffff;
}
/* línea amarilla decorativa (::after) se mantiene sin cambios */
.band--soluciones-fenologicas .feature-cta a.card {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 0.85rem 2rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: var(--radius);
}
.band--soluciones-fenologicas .feature-cta a.card:hover {
    background: #ffffff;
    color: #005e3d;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.band--soluciones-fenologicas .stack {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.band--soluciones-fenologicas .feature-visual {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.band--soluciones-fenologicas .feature-visual img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
/* Desktop: imagen sangra hasta el borde derecho del viewport */
@media (min-width: 1101px) {
    .band--soluciones-fenologicas .feature-visual {
        margin-right: calc(-2.5vw - 0.75rem);
    }
}
/* Pantallas intermedias: imagen apilada abajo con padding en lados y fondo */
@media (max-width: 1100px) {
    .band--soluciones-fenologicas .feature-visual {
        padding: 0 1rem 2rem;
    }
}

.feature-cta{display:flex;gap:10px;flex-wrap:wrap} /* contenedor genórico de CTAs */

.band.soft{background:var(--bg)}
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge.solid{background:#0b3a73;color:#fff;border:0}
.badge.outline{background:#fff;border:1px solid var(--brand-navy);color:var(--brand-navy)} /* badge outline genórica */

/* News / resources grid */
.news-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
@media (max-width:1100px){.news-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.news-grid{grid-template-columns:1fr}}
.news-card{display:grid;gap:10px}
.news-card .thumb{height:160px;border:1px dashed var(--line);border-radius:14px;background:#fff}

/* Override especófico para miniaturas de la grid de noticias: asegura que la imagen quede confinada
   al .thumb de 160px aunque existan otras reglas heredadas en el proyecto. */
.news-grid .news-card {
    position: relative; /* aseguramos contexto visual del card */
}

.news-grid .news-card .thumb {
    position: relative !important;  /* imprescindible para que el img absolute se limite al thumb */
    height: 160px !important;       /* refuerza la altura que deseas */
    overflow: hidden !important;
    border-radius: 14px !important;
    display: block !important;
    background: #fff !important;
}

/* Cambiado: usar 'contain' para que la imagen vertical se reduzca y no se recorte.
   La imagen se centra con object-position; si prefieres rellenar y recortar, vuelve a 'cover'. */
.news-grid .news-card .thumb img,
.news-grid .news-card .thumb > img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: auto !important;       /* dejar que la proporción gobierne */
    height: auto !important;      /* dejar que la proporción gobierne */
    max-width: 100% !important;   /* no superar el ancho del thumb */
    max-height: 100% !important;  /* no superar la altura del thumb */
    transform: translate(-50%, -50%) !important; /* centrar el img dentro del thumb */
    object-fit: contain !important;        /* contain = muestra toda la imagen escalada */
    object-position: center center !important;
    display: block !important;
}

/* Si por alguna razón el <img> estó fuera del .thumb, evitamos que sobrepase el card (segunda lónea defensiva) */
.news-card img {
    max-width: 100% !important;
    height: auto !important;
}

.card{padding:calc(var(--space)*1.5);border:1px solid var(--line);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:flex-start} /* card genórica con Más padding y alineación superior */

/* Botones CTA del body - solo enlaces tipo botón */
.cta-strip a.card,
.feature-cta a.card {
    border: 1px solid #005e3d;
    background: #005e3d;
    color: white;
    font-weight: 600;
    text-decoration: none;
    padding: 0.4rem 1.2rem;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
}

/* El texto dentro del cta-strip cede espacio, nunca el botón */
.cta-strip > div {
    min-width: 0;
}

.cta-strip a.card:hover,
.feature-cta a.card:hover {
    background: transparent;
    color: var(--ink);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 94, 61, 0.3);
}
.section-title{position:relative;padding-bottom:20px} /* espacio para lónea debajo */
.section-title::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:64px;background:var(--brand-gold);border-radius:3px} /* lónea debajo del tótulo */

/* Centrar lónea amarilla cuando el tótulo estó centrado */
.section-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Si el tótulo estó dentro del mismo contenedor grid (.news-grid), evitar que ocupe una celda
   y forzar que abarque toda la fila. Esto impide que el h2 baje o desvordone los cards. */
.news-grid > .section-title,
.news-grid > h2.section-title {
    grid-column: 1 / -1;      /* ocupa todas las columnas del grid */
    align-self: start;        /* alinea al inicio de la fila */
    margin: 0 0 1rem 0;       /* espaciado abajo para separar del grid */
    padding-bottom: 0.25rem; /* mantiene la lónea decorativa del ::after */
}

/* Forzar que cualquier encabezado directo dentro de .news-grid no actóe como grid cell
   y ocupe toda la fila; cubre h1..h6 y .section-title directos. */
.news-grid > .section-title,
.news-grid > h1,
.news-grid > h2,
.news-grid > h3,
.news-grid > h4,
.news-grid > h5,
.news-grid > h6 {
    display: block;
    grid-column: 1 / -1; /* ocupa todas las columnas */
    width: 100%;
    margin: 0 0 1rem 0;
    padding-bottom: 0.25rem;
}

/* Solo los títulos dentro de .news-grid ocupan toda la fila (no las cards de plugins). */
.news-grid > h1,
.news-grid > h2,
.news-grid > h3,
.news-grid > h4,
.news-grid > h5,
.news-grid > h6,
.news-grid > .section-title {
    grid-column: 1 / -1;
}

/* Tabs + carousel */
.band{padding:calc(var(--space)*2) 0} /* aumenta padding vertical de bands */
.band.alt{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#home-tabs .container, #cultivos-tabs .container{display:flex;flex-direction:column;align-items:center}
.pill-tabs{display:flex;gap:14px;justify-content:center;align-items:center;margin:0 auto 18px;flex-wrap:wrap}
.pill{position:relative;background:#fff;border:2px solid var(--brand-navy);padding:12px 20px;border-radius:999px;
    box-shadow:0 6px 16px rgba(0,0,0,.06);cursor:pointer;color:var(--brand-navy);font-weight:700;
    transition:transform 0.3s ease,box-shadow 0.3s ease}
.pill:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12)}
.pill.active{background:var(--brand-navy);color:#fff}
.pill.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%) rotate(45deg);
    bottom:-8px;width:12px;height:12px;border-radius:2px}
/* ESTA REGLA ESTó DUPLICADA - SE MANTIENE POR COMPATIBILIDAD PERO USA LA DE ARRIBA (lónea 579) */
.carousel-wrap{position:relative;width:100%;padding:0 60px} /* ancho de carrusel al 100% del contenedor + espacio para flechas */
/*.carousel-wrap{position:relative;width:100%;max-width:var(--wrap)}*/
.carousel-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
    display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding:0}
.carousel-btn{pointer-events:auto;border:none;background:#fff;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);
    width:45px;height:45px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.8rem;font-weight:bold;transition:all 0.3s ease}
.icon-carousel{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(260px,1fr);
    gap:16px;
    overflow-x:auto;           /* permite scroll tóctil pero no muestra scrollbar */
    overflow-y:hidden;
    padding:8px 12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* IE 10+ */
}
.icon-carousel::-webkit-scrollbar{ display:none; } /* Chrome, Safari, Opera */
.icon-card{scroll-snap-align:center;text-align:center;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:transform .15s}
.icon-card:hover{transform:translateY(-2px)}

/* Product carousels (INTI-like) */
.cat-band{padding:24px 0}
.cat-band .band-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.cat-band .band-title h3{margin:0}
.product-card{min-width:260px;max-width:260px;transition:transform .3s ease,box-shadow .3s ease}
.product-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 20px rgba(0,0,0,0.15)}
.product-card .thumb{height:160px;border-radius:12px;border:1px dashed var(--line);background:#fff;margin-bottom:10px}

/* Ajustes de miniaturas y cards para que las imógenes no se salgan del contenedor */
/* Ajustes de miniaturas y cards para que las imógenes no se salgan del contenedor */

/* Reglas generales para imógenes dentro de card-body */
.card-body img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Estructura de la tarjeta de producto */
.card.product-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    /* asegurar que la tarjeta no tenga overflow visible */
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    background: #ffffff;
}

/* Descripción breve que va encima de la imagen */
.card.product-card .product-desc-top {
    font-size: 0.875rem;
    color: #444;
    padding: 0.4rem 0.6rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    width: 100%;
}

/* Contenedor de contenido inferior (tótulo + meta) */
.card.product-card .product-body {
    padding: 0.5rem 0.4rem 0.25rem;
    text-align: center;
    flex: 0 0 auto;
}
.card.product-card .product-body b {
    display: block;
    font-size: 1rem;
    color: #222;
    margin-bottom: 0.25rem;
}
.card.product-card .product-body .product-meta {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

/* órea inferior con link "Ver Más" */
.card.product-card .product-more {
    padding: 0.5rem 0.6rem 0.5rem; /* Ajustado de 0.8rem a 0.5rem para balancear con padding superior */
    text-align: center;
    margin-top: auto; /* empuja al fondo si el contenedor crece */
}
.card.product-card .product-more a,
.card.product-card .product-more span {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 8px; /* Cambio de 20px a 8px para esquinas mÔö£├¡s sutiles */
    background: #005e3d;
    color: white;
    text-decoration: none;
    border: 1px solid #005e3d;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.card.product-card .product-more a:hover,
.card.product-card .product-more a:focus {
    background: transparent !important; /* !important para sobrescribir cualquier conflicto */
    color: var(--ink) !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 94, 61, 0.3);
    text-decoration: none;
}

/* Contenedor de miniatura: cuadrado por defecto y centrado */
.card.product-card .thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Hace el cuadro cuadrado; si prefieres altura fija, ver regla Más abajo */
    display: block; /* cambiamos a block para facilitar posicionamiento absoluto del img */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Evita desbordes */
    background: #f7f7f7;
    border-radius: 8px;
}

/* La imagen se ajusta al contenedor sin deformarse ni salirse
   Usamos posicionamiento absoluto + object-fit para asegurar ajuste exacto
   - object-fit: cover -> llena el contenedor recortando lo que sobre (¢til para thumbnails)
   - si prefieres ver toda la imagen sin recortar, usa object-fit: contain
*/
.card.product-card .thumb img {
    position: absolute;
    inset: 8px; /* Padding consistente de 8px en todos los lados */
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    display: block;
    object-fit: contain; /* contain para mostrar toda la imagen sin recortar */
    object-position: center center;
    max-width: none; /* evita que max-width previo interfiera */
}

/* Fallback para navegadores que no soportan 'aspect-ratio' */
@supports not (aspect-ratio: 1 / 1) {
    .card.product-card .thumb {
        display: block;
        width: 100%;
        /* relación 1:1 usando padding-top hack */
        position: relative;
        height: 0;
        padding-top: 100%;
    }
    .card.product-card .thumb img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .news-card .thumb { height: auto !important; padding-top: 0 !important; }
}

/* Reforzamos especificidad para evitar que otras reglas influyan en la posición/size del img */
.card.product-card .thumb > img,
.card.product-card .thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    max-width: none !important;
}

/* ---- FORZAR comportamiento de miniaturas de la grid de noticias al final del archivo ----
   Esta regla tiene Más especificidad y viene al final para ganar a otras reglas similares.
------------------------------------------------------------------------- */
body .news-grid .news-card.thumb-wrapper .thumb img,
body .news-grid .news-card .thumb img,
.news-grid > .news-card .thumb img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;      /* mostrar toda la imagen escalada */
    object-position: center center !important;
    display: block !important;
}

/* ---- RESTAURAR comportamiento para miniaturas de Productos Destacados ----
   Colocado al final para tener prioridad sobre reglas previas. Asegura que los
   productos dentro de .icon-carousel/.product-card tengan padding consistente.
------------------------------------------------------------------------- */
.icon-carousel .card.product-card .thumb img,
.icon-carousel .product-card .thumb img,
.card.product-card .thumb img {
    position: absolute !important;
    inset: 8px !important;               /* Padding de 8px para espacio consistente */
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;      /* contain para mostrar imagen completa */
    object-position: center center !important;
    transform: none !important;        /* anula centrar por transform de otras reglas */
    display: block !important;
}

/* Si quieres que los productos se muestren completos sin recorte (no recomendado para miniaturas):
   usa object-fit: contain en lugar de cover en la regla anterior. */

/* Testimonials band */
.testi{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
@media (max-width:1000px){.testi{grid-template-columns:1fr}}
.quote{font-size:1.2rem;color:#2b3847}
.quote::before{content:'\201C';font-size:3rem;vertical-align:top;margin-right:6px;color:#d4a017}
.author{color:#5a6a7a}

/* Coverage + CTA strip */
.coverage{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center}
@media (max-width:1000px){.coverage{grid-template-columns:1fr}}
.cta-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
@media (max-width:800px){.cta-strip{flex-direction:column;align-items:flex-start}}

/* he borrado otros @media, para agregar como maximo 1520px y asi abarcar mas dispositivos, sin embargo esto tambien afecta al primer carrusel y es necesario separar el css de forma independiente para ambos */

/* ===== Alineación especófica para la sección 'Cobertura' =====
   Evita que el tótulo o el bloque de cobertura queden desalineados respecto a otras secciones.
   - Centra el contenido y limita el ancho a --wrap para coincidir con otros contenedores.
   - Asegura padding lateral igual al de .container
   - Solo afecta a .coverage y a su tótulo directo .section-title
*/
.coverage {
    /* Si el markup tiene <section class="coverage"> o .coverage wrapper */
    max-width: var(--wrap);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.75rem;   /* coincide con .container padding */
    padding-right: 0.75rem;
    box-sizing: border-box;
}

/* Si el tótulo .section-title estó dentro de .coverage (o el h2) forzamos alineación */
.coverage .section-title,
.coverage > h2,
.coverage h2.section-title {
    max-width: var(--wrap);
    margin-left: 0; /* ya centrado por el contenedor */
    margin-right: 0;
    padding-left: 0; /* evitar desplazamientos internos */
}

/* Si la estructura es <div class="coverage"> <div class="container"> ... </div> </div>
   y el container interior tiene un padding distinto, forzamos que el heading ocupe
   el mismo ancho visual que otras secciones (defensa extra). */
.coverage .container > .section-title,
.coverage .container > h2 {
    grid-column: 1 / -1;
    width: 100%;
}

/* Alineación de los contenidos internos (por ejemplo mapa o imagen) para que no se desplacen */
.coverage .coverage-inner,
.coverage .coverage-wrap,
.coverage .coverage-grid {
    max-width: var(--wrap);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    box-sizing: border-box;
}

/* pequeño ajuste responsive si el tótulo quedara muy alto/espaciado */
@media (max-width: 700px) {
    .coverage { padding-left: 0.75rem; padding-right: 0.75rem; }
    .coverage .section-title, .coverage h2 { margin-bottom: 0.75rem; }
}

/* === FIX ALINEACIón 'Cobertura Nacional' ===
   Problema descrito: el tótulo "Cobertura Nacional" y su sección aparecen desalineados
   respecto a tótulos anteriores (que usan .container al 95%). AdeMás, al mover el tótulo
   fuera del card se desordenan los elementos.

   Estrategia:
   1. Unificar ancho/padding de .coverage con el patrón de .container (95%).
   2. Asegurar que cualquier heading dentro de .coverage se comporte como los deMás tótulos.
   3. Si existe un grid interno (por ej. .coverage-grid) forzar que el tótulo ocupe toda la fila.
   4. Prevenir desorden al colocar el tótulo fuera de tarjetas mediante reglas que span completo.
   5. Mantener reglas previas; esto es un override con Más especificidad y !important solo donde necesario.
*/

/* Unificar ancho y padding (usa mismo 95% que .container) */
body .coverage {
    max-width: 95% !important; /* Igual que .container override */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.75rem; /* Coincide con .container */
    padding-right: 0.75rem;
    box-sizing: border-box;
}
/* Si hay un .container interno dentro de .coverage, tambión forzamos su consistencia */
body .coverage > .container,
body .coverage .container {
    max-width: 95% !important;
    width: 100%;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Heading alineado: ocupa todo el ancho disponible sin desplazarse */
body .coverage > .section-title,
body .coverage > h1.section-title,
body .coverage > h2.section-title,
body .coverage > h2,
body .coverage .section-title {
    grid-column: 1 / -1; /* Si estó dentro de grid, ocupa la fila completa */
    margin-left: 0 !important; /* Evita desalineaciones horizontales */
    margin-right: 0 !important;
    padding-left: 0 !important; /* Mantón consistencia con otros tótulos (ya tienen lónea decorative) */
    padding-right: 0 !important;
}

/* Si existe un wrapper grid de tarjetas (nombre comón hipotótico) */
body .coverage .coverage-grid,
body .coverage .coverage-cards,
body .coverage .cards-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    width: 100%;
    box-sizing: border-box;
}

/* Forzar que cualquier hijo directo NO tarjeta (card genórica o coverage-card) ocupe toda la fila */
body .coverage .coverage-grid > *:not(.coverage-card):not(.card),
body .coverage .coverage-cards > *:not(.coverage-card):not(.card),
body .coverage .cards-grid > *:not(.coverage-card):not(.card) {
    grid-column: 1 / -1;
}

/* Asegurar que las tarjetas internas no se estiren raramente si el tótulo va fuera */
body .coverage .coverage-card,
body .coverage .cards-grid .card,
body .coverage .coverage-grid .card {
    width: 100%;
    box-sizing: border-box;
}

/* pequeño ajuste responsive para evitar overflow lateral en móviles estrechos */
@media (max-width: 700px) {
    body .coverage,
    body .coverage > .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Nota: Si el markup real usa otros nombres (ej. .coverage-inner), puedes aplicar la misma lógica
   agregando la clase al bloque anterior. Este fix es no destructivo y respeta estilos previos. */


/* he borrado otros @media, para agregar como maximo 1520px y asi abarcar mas dispositivos, sin embargo esto tambien afecta al primer carrusel y es necesario separar el css de forma independiente para ambos */


/* Testimonio: estilo de cita elegante */
.txt-testimonio{
    font-family: "Georgia", "Times New Roman", serif; /* o tu serif corporativa */
    font-style: italic;
    font-weight: 400;                   /* Normal, no tan bold */
    font-size: clamp(1.1rem, 1vw + 0.9rem, 1.35rem); /* Aumentado de 1-1.25rem a 1.1-1.35rem */
    line-height: 1.5;
    letter-spacing: .2px;
    color: #1f2a37;                     /* gris muy oscuro, agradable en pantallas */
    max-width: 72ch;                    /* ancho de lectura cómodo */
    margin: 0;                          /* Sin centrado automático */
    padding: .25rem 0;
    text-align: left;                   /* Alineado a la izquierda */
}

/* Comillas decorativas - inline para que se ajusten al texto */
.txt-testimonio::before,
.txt-testimonio::after{
    color: #1f2a37; /* Mismo color que el texto */
    font-size: 1.2em;
    line-height: 0;
    vertical-align: baseline; /* Alineación con el texto */
}
.txt-testimonio::before{ content: "\201C"; margin-right: 0.1em; }
.txt-testimonio::after{  content: "\201D"; margin-left: 0.05em; }

/* Si el texto va sobre fondo muy claro, puedes oscurecer un poco el color */
.bg-light .txt-testimonio{ color: #0f172a; }

/* Opcional: variante alineada a la izquierda (por defecto queda centrado) */
.txt-testimonio.left{ margin-left: 0; margin-right: 0; }

.author{
    display: inline-block;       /* se comporta como span si quieres */
    margin-top: .5rem;
    font-style: italic;
    font-size: 1rem;
    color: #6c757d;              /* o var(--bs-secondary-color) si usas Bootstrap 5.3 */
}

/* ==========================================================================
   NUEVO EFECTO HEADER (Invasión de Logo + Scroll) - Agregado al final
   ========================================================================== */
/* ==========================================================================
   CORRECCIÓN FINAL V4 - ESCALADO OBLIGATORIO
   ========================================================================== */

/* 1. Header Base */
header {
    background-color: white;
    height: 80px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: all 0.4s ease;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* 2. BADGE INICIAL (El que invade) */
.logo-badge {
    position: absolute;
    top: 15px;  /* Incrementado para que invada Más hacia abajo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;

    /* --- JUEGA CON ESTE VALOR PARA LA Invasión --- */
    height: 110px;  /* Incrementado para invadir Más hacia abajo */
    /* --------------------------------------------- */

    width: 120px;   /* Reducido de 140px a 120px - proporción Más compacta */

    background-color: white;
    border-radius: 0 0 15px 15px;
    /*box-shadow: 0 8px 20px rgba(0,0,0,0.1);*/

    /* Flexbox para centrar contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;  /* Reducido de 10px a 8px */
    /*overflow: hidden;*/

    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. IMAGEN INICIAL */
.logo-molinos {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Muestra todo el logo sin cortar */
    transition: all 0.4s ease;
    margin: 0;
}

/* 4. Espaciador invisible */
.nav-spacer {
    width: 190px;
    height: 1px;
}

/* =========================================
   ESTADO SCROLLED (CORRECCIÓN CRóTICA)
   ========================================= */

/* 1. La barra mantiene sus 80px */
header.scrolled {
    height: 80px;
    background-color: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 2. EL CONTENEDOR SE ENCOGE */
header.scrolled .logo-badge {
    height: 95% !important; /* Fuerza a medir 80px exactos */
    width: 80px !important; /* Reducimos el ancho */

    padding: 5px !important; /* Reducimos el padding */
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;

    align-items: center; /* Centrado vertical estricto */
}

/* 3. LA IMAGEN SE OBLIGA A ENTRAR (Aquó estaba el fallo) */
header.scrolled .logo-molinos {
    /* Estas 3 lóneas son la solución al recorte */
    width: 100% !important;   /* Ocupa todo el ancho disponible */
    height: 100% !important;  /* Ocupa todo el alto disponible */
    object-fit: contain !important; /* ESCALA LA IMAGEN, NO LA RECORTES */

    margin: 0 !important;     /* Cero mórgenes que empujen */
    max-height: 80px;         /* Seguro de vida: nunca Más alto que la barra */
}

/* 4. Tablets: logo Más pequeño para evitar choques con tótulos */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .logo-badge {
        height: 85px !important;  /* Más reducido */
        width: 105px !important;
        top: 8px !important;  /* Más arriba */
    }
}


/* 5. Móviles */
@media (max-width: 991.98px) {
    .logo-badge, .nav-spacer { display: none; }
    header { height: auto; min-height: 80px; }
}

/* ========================================================================
   FIX FINAL: AJUSTE RESPONSIVO DE IMóGENES EN CARRUSEL DE ICONOS
   Colocado al final para móxima prioridad sobre todas las deMás reglas
   APLICADO A TODOS LOS ELEMENTOS (VISIBLES, OCULTOS Y CLONADOS POR OWL)
   ======================================================================== */
/* ==========================================================================
   CSS FINAL (Corregido: 2 en Móvil / Control de Tamaóo en Tablet)
   ========================================================================== */
/* ==========================================================================
   CSS FINAL: ESTRUCTURA ROBUSTA (Sin hacks destructivos)
   ========================================================================== */
/* ==========================================================================
   CSS FINAL: SOLUCIón DEFINITIVA (S22 + Fix Tablet Cortada)
   ========================================================================== */

/* 1. FIX DE ESPACIO EN MóVILES (S22 Ultra) */
@media (max-width: 767px) {
    /* Ocultamos flechas para ganar espacio */
    .carousel-nav, .carousel-btn { display: none !important; }
    /* Quitamos el padding lateral del contenedor para que use todo el ancho */
    .carousel-wrap { padding: 0 !important; width: 100% !important; }
}

/* 2. EL CONTENEDOR */
.icon-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding-bottom: 5px;
    width: 100% !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.icon-carousel::-webkit-scrollbar { display: none; }

/* 3. LA TARJETA (Base) */
.icon-carousel .icon-card {
    display: block !important;
    flex: 0 0 auto;
    box-sizing: border-box !important;
    text-decoration: none;
    color: #333;
    text-align: center;
    line-height: 1.2;
    margin: 0 !important;
}

/* 4. EL MARCO (Thumb) */
.icon-carousel .icon-card .thumb {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    border: 1px dashed #e6e8eb !important;
    background: #fff !important;
    width: 100% !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* 5. IMAGEN (Base) */
.icon-carousel .icon-card .thumb img {
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   MEDIA QUERIES (Ajuste por Dispositivo)
   ========================================= */

/* --- A. ESCRITORIO (>= 1200px): 6 ITEMS --- */
@media (min-width: 1200px) {
    .icon-carousel .icon-card {
        width: calc((100% - 60px) / 6) !important;
        font-size: 1rem;
    }
    .icon-carousel.carousel-3-items .icon-card {
        width: calc((100% - 24px) / 3) !important;
    }
    .icon-carousel .icon-card:last-child { margin-right: 0 !important; }

    /* Rectangular y contenido */
    .icon-carousel .icon-card .thumb { height: 80px !important; }
    .icon-carousel .icon-card .thumb img {
        object-fit: contain !important;
        padding: 8px;
        width: auto !important; height: auto !important;
        max-width: 90% !important; max-height: 90% !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* --- B. TABLET GRANDE (900px - 1199px): 5 ITEMS --- */
@media (min-width: 900px) and (max-width: 1199px) {
    .icon-carousel .icon-card {
        width: calc((100% - 48px) / 5) !important;
        font-size: 0.85rem;
        padding: 0 2px !important;
    }
    .icon-carousel.carousel-3-items { justify-content: center !important; }
    .icon-carousel.carousel-3-items .icon-card {
        width: calc((100% - 24px) / 3) !important;
        max-width: 210px !important;
    }
    /* Cuadrado */
    .icon-carousel .icon-card .thumb { height: auto !important; aspect-ratio: 1/1 !important; }
    .icon-carousel .icon-card .thumb img {
        object-fit: cover !important;
        top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    }
}

/* --- C. TABLET PEQUEóA (600px - 899px): 4 ITEMS --- */
/* *** AQUó ESTABA EL ERROR DE IMAGEN CORTADA *** */
@media (min-width: 600px) and (max-width: 899px) {
    .icon-carousel .icon-card {
        width: calc((100% - 36px) / 4) !important;
        font-size: 0.8rem;
    }
    .icon-carousel.carousel-3-items .icon-card {
        width: calc((100% - 24px) / 3) !important;
        max-width: none !important;
    }

    .icon-carousel .icon-card .thumb {
        height: auto !important; aspect-ratio: 1 / 1 !important;
    }

    /* FIX CRóTICO: Forzamos la posición a 0 para que no se corte */
    .icon-carousel .icon-card .thumb img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important; /* Reseteamos cualquier centrado heredado */
        padding: 0 !important;
    }
}

/* --- D. MóVIL (< 600px): 2 ITEMS (SAMSUNG S22) --- */
@media (max-width: 599px) {
    .icon-carousel { gap: 10px !important; padding-left: 10px; padding-right: 10px; }

    .icon-carousel .icon-card {
        width: calc((100% - 10px) / 2) !important;
        font-size: 0.85rem !important;
    }

    .icon-carousel .icon-card .thumb {
        height: auto !important; aspect-ratio: 1 / 1 !important;
    }
    .icon-carousel .icon-card .thumb img {
        object-fit: cover !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
        transform: none !important;
    }
}

/* =========================================
   ESTILOS PARA PóGINA NOSOTROS
   ========================================= */

/* Grid genórico responsive */
.grid {
    display: grid;
    gap: calc(var(--space) * 1.4);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Grid auto-fit con mónimo de 320px (para cards de videos y notas de prensa) */
.grid-autofit-320 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: calc(var(--space) * 1.4);
}

/* Responsive: 1 columna en móvil */
@media (max-width: 768px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Responsive: 2 columnas en tablet para grid-3 */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Wrapper para placeholders de Django CMS */
.placeholder-wrapper {
    min-height: 60px;
    position: relative;
}

/* Layout de icono + texto horizontal */
.icon-text-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Contenedor de imógenes decorativas en cards - Desktop */
.icon-placeholder {
    flex: 0 0 120px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 120px;
    min-width: 120px;
    max-width: 120px;
}

.icon-placeholder img {
    width: 100%;
    height: auto;
    min-height: 120px;
    object-fit: contain;
}

/* Contenedor de imagen para Polótica de Calidad - mayor altura */
.card-politica-calidad .icon-placeholder {
    flex: 0 0 140px;
    min-height: 110px;
    min-width: 140px;
    max-width: 140px;
}

.card-politica-calidad .icon-placeholder img,
.card-politica-calidad .icon-placeholder .cms-plugin img {
    min-height: 110px;
    max-height: 110px;
    object-fit: contain;
}

/* Estilo para imógenes en placeholders */
.icon-placeholder .cms-plugin {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

/* Soporte para plugins de imagen de Django CMS */
.icon-placeholder .djangocms-picture,
.icon-placeholder .cms-plugin picture,
.icon-placeholder .cms-plugin img {
    width: 100%;
    height: auto;
    min-height: 120px;
    object-fit: contain;
}

/* Contenedor del texto */
.text-content {
    flex: 1;
    min-height: 120px;
}

/* Estilo especial para cards de Misión y Visión */
.card-mision-vision {
    padding: calc(var(--space) * 1.5) !important;  /* Aumentado para Más espacio */
}

/* Centrar tótulos h3 dentro de cards de Misión y Visión */
.card-mision-vision h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.2rem;  /* Reducido de 1.5rem a 1.2rem */
}

/* Padding interno del contenedor de icono + texto */
.card-mision-vision .icon-text-layout {
    padding: 0;  /* Sin padding para mejor distribución del espacio */
    margin: 0;
}

/* Reducir margen inferior del texto en estos cards */
.card-mision-vision .text-content p:last-child,
.card-mision-vision .text-content div:last-child {
    margin-bottom: 0;
}

/* Pórrafos dentro del texto para equilibrar espacios */
.card-mision-vision .text-content p {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.card-mision-vision .text-content p:last-child {
    margin-bottom: 0;
}

/* Estilo para card de Polótica de Calidad con imagen */
.card-politica-calidad {
    padding: calc(var(--space) * 1.5) !important;
}

.card-politica-calidad .icon-text-layout {
    padding: 0;
    margin: 0;
}

.card-politica-calidad .text-content p:last-child {
    margin-bottom: 0;
}

/* Estilo para card de descripción de valores - altura fija 110px */
.card-descripcion-valores {
    height: 110px;
    padding: calc(var(--space) * 1.5) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-descripcion-valores p {
    margin: 0;
    text-align: center;
}

/* Estilo para cards de la sección "¿Quiénes somos?" - altura fija 320px */
/* IMPORTANTE: No aplicar a página de contacto ni a los cards controlados individualmente */
.grid-2 .card:not(.card-formulario):not(.card-contacto-info):not(.card-ubicacion):not(.card-zona-ventas-mapa):not(.card-zona-ventas-info):not(.card-quienes-somos):not(.card-hero-imagen) {
    height: 320px;
}

/* Card de texto "¿Quiénes somos?" - altura automática para evitar desbordamiento */
.grid-2 .card.card-quienes-somos {
    height: auto;
    min-height: 320px;
    overflow: visible;
}

/* Card con imagen hero en "¿Quiénes somos?" - se iguala al alto del card vecino */
.grid-2 .card.card-hero-imagen {
    height: auto !important;
    min-height: unset !important;
    overflow: hidden;
    padding: 0 !important;
    border-radius: var(--radius);
    /* align-self: stretch por defecto → crece igual que el card de texto */
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* Imágenes dentro del card hero de quienes somos */
.grid-2 .card.card-hero-imagen img,
.grid-2 .card.card-hero-imagen .cms-plugin img,
.grid-2 .card.card-hero-imagen .djangocms-picture img {
    width: 100%;          /* Ocupa todo el ancho del card */
    height: 100% !important;  /* Ocupa todo el alto disponible */
    object-fit: cover;    /* Recorta proporcionalmente para llenar el espacio */
    object-position: center;
    display: block;
    border-radius: calc(var(--radius) * 0.7);
}

/* Contenedores intermedios del CMS: deben estirarse también */
.grid-2 .card.card-hero-imagen .cms-plugin,
.grid-2 .card.card-hero-imagen .djangocms-picture {
    width: 100%;
    height: 100%;
    display: block;
}

.grid-2 .card.card-hero-imagen .cms-plugin > span,
.grid-2 .card.card-hero-imagen .djangocms-picture > span {
    display: contents;
}

/* Responsive para Polótica de Calidad */
@media (max-width: 1024px) and (min-width: 769px) {
    .card-politica-calidad .icon-placeholder {
        flex: 0 0 120px;
        min-height: 100px;
        min-width: 120px;
        max-width: 120px;
    }

    .card-politica-calidad .icon-placeholder img,
    .card-politica-calidad .icon-placeholder .cms-plugin img {
        min-height: 100px;
        max-height: 100px;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .card-politica-calidad .icon-text-layout {
        gap: 1.25rem;
    }

    .card-politica-calidad .icon-placeholder {
        flex: 0 0 100px;
        min-height: 90px;
        min-width: 100px;
        max-width: 100px;
    }

    .card-politica-calidad .icon-placeholder img,
    .card-politica-calidad .icon-placeholder .cms-plugin img {
        min-height: 90px;
        max-height: 90px;
    }
}

@media (max-width: 480px) {
    .card-politica-calidad .icon-text-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .card-politica-calidad .icon-placeholder {
        flex: 0 0 90px;
        min-height: 90px;
        min-width: 90px;
        max-width: 90px;
        margin-bottom: 0.5rem;
    }

    .card-politica-calidad .icon-placeholder img,
    .card-politica-calidad .icon-placeholder .cms-plugin img {
        min-height: 90px;
        max-height: 90px;
    }
}

/* Responsive para card de descripción de valores */
@media (max-width: 1024px) and (min-width: 769px) {
    .card-descripcion-valores {
        height: 100px;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .card-descripcion-valores {
        height: auto;
        min-height: 90px;
    }
}

/* ========================================
   ZONA DE VENTAS - MAPA DE PERó
   ======================================== */

/* Cards de zona de ventas con altura automótica */
.card-zona-ventas-mapa,
.card-zona-ventas-info {
    height: auto !important;
    min-height: 520px;
}

/* Card del mapa */
.card-zona-ventas-mapa {
    display: flex;
    flex-direction: column;
}

/* Card de información */
.card-zona-ventas-info h3 {
    margin-bottom: 1rem;
    color: var(--muted);
}

/* Responsive para zona de ventas */
@media (max-width: 768px) {
    .card-zona-ventas-mapa,
    .card-zona-ventas-info {
        min-height: auto;
    }

    #peru-map {
        height: 400px !important;
    }
}

@media (max-width: 480px) {
    .card-descripcion-valores {
        height: auto;
        min-height: 80px;
        padding: calc(var(--space) * 1.2) !important;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .grid-2 .card {
        height: 300px;
    }

    .grid-2 .card.card-quienes-somos {
        height: auto !important;
        min-height: 280px;
        overflow: visible;
    }

    /* Se iguala en alto al card de texto automáticamente (align-self: stretch) */
    .grid-2 .card.card-hero-imagen {
        height: auto !important;
        min-height: unset !important;
        padding: 0 !important;
        align-self: stretch;
    }

    .grid-2 .card.card-hero-imagen img,
    .grid-2 .card.card-hero-imagen .cms-plugin img,
    .grid-2 .card.card-hero-imagen .djangocms-picture img {
        height: 100% !important;
        object-fit: cover;
    }
}

@media (max-width: 768px) and (min-width: 481px) {
    .grid-2 .card {
        height: auto;
        min-height: 280px;
    }

    .grid-2 .card.card-quienes-somos {
        height: auto !important;
        min-height: unset !important;
        overflow: visible;
    }

    /* En móvil el grid se apila: imagen con altura mínima razonable */
    .grid-2 .card.card-hero-imagen {
        height: auto !important;
        min-height: 220px !important;
        padding: 0 !important;
        align-self: stretch;
    }

    .grid-2 .card.card-hero-imagen img,
    .grid-2 .card.card-hero-imagen .cms-plugin img,
    .grid-2 .card.card-hero-imagen .djangocms-picture img {
        height: 100% !important;
        object-fit: cover;
    }
}

@media (max-width: 480px) {
    .grid-2 .card {
        height: auto;
        min-height: 250px;
    }

    .grid-2 .card.card-quienes-somos {
        height: auto !important;
        min-height: unset !important;
        overflow: visible;
    }

    .grid-2 .card.card-hero-imagen {
        height: auto !important;
        min-height: 200px !important;
        padding: 0 !important;
        align-self: stretch;
    }

    .grid-2 .card.card-hero-imagen img,
    .grid-2 .card.card-hero-imagen .cms-plugin img,
    .grid-2 .card.card-hero-imagen .djangocms-picture img {
        height: 100% !important;
        object-fit: cover;
    }
}

/* Responsive: Tablet (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .icon-placeholder {
        flex: 0 0 100px;
        min-width: 100px;
        max-width: 100px;
        min-height: 100px;
    }

    .icon-placeholder img,
    .icon-placeholder .cms-plugin img {
        min-height: 100px;
    }

    .text-content {
        min-height: 100px;
    }

    .icon-text-layout {
        gap: 1.25rem;
    }
}

/* Responsive: Tablet pequeóa (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
    .icon-placeholder {
        flex: 0 0 80px;
        min-width: 80px;
        max-width: 80px;
        min-height: 80px;
    }

    .icon-placeholder img,
    .icon-placeholder .cms-plugin img {
        min-height: 80px;
    }

    .text-content {
        min-height: 80px;
    }

    .icon-text-layout {
        gap: 1rem;
    }
}

/* Responsive: Móvil (┬ó480px) - Imagen arriba del texto */
@media (max-width: 480px) {
    .icon-text-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .icon-placeholder {
        flex: 0 0 100px;
        min-width: 100px;
        max-width: 100px;
        min-height: 100px;
        margin-bottom: 0.5rem;
    }

    .icon-placeholder img,
    .icon-placeholder .cms-plugin img {
        min-height: 100px;
    }

    .text-content {
        min-height: auto;
        width: 100%;
    }
}

/* Asegurar que los placeholders vacóos sean clickeables en modo edición */
.cms-toolbar-expanded .placeholder-wrapper:empty::before {
    content: "Haz clic aquó para agregar contenido";
    display: block;
    padding: 1rem;
    background: #f0f4fa;
    border: 2px dashed #d7e6ff;
    border-radius: 8px;
    color: #5f6b7a;
    text-align: center;
    font-size: 0.9rem;
}

/* =========================================
   FIX PARA MODALS Y PLACEHOLDERS DE CMS
   ========================================= */

/* Asegurar que los placeholders dentro de cards sean clickeables */
.cms-toolbar-expanded .card {
    position: relative;
    z-index: 1;
}

/* Asegurar que el toolbar de CMS estó siempre encima */
.cms-toolbar,
.cms-toolbar-expanded {
    z-index: 9999 !important;
}

/* Asegurar que los modales de CMS estón encima de todo */
.cms-modal,
.cms-modal-frame,
.cms-modal-backdrop,
.cms-pagetree-dropdown-menu,
.cms-pagetree-breadcrumb,
.cms-toolbar-item-cms-mode-switcher,
.cms-toolbar-item-navigation,
.modal,
.modal-backdrop {
    z-index: 10000 !important;
}

/* Permitir que los placeholders reciban clicks cuando estón vacóos */
.cms-toolbar-expanded .cms-placeholder {
    min-height: 50px;
    position: relative;
}

.cms-toolbar-expanded .cms-placeholder-empty {
    min-height: 50px;
    border: 2px dashed rgba(0, 123, 255, 0.3);
    border-radius: 4px;
    background: rgba(0, 123, 255, 0.05);
}

/* Fix especófico para placeholders dentro de grids */
.grid .card .cms-placeholder,
.grid-2 .card .cms-placeholder,
.grid-3 .card .cms-placeholder {
    min-height: 50px;
    display: block;
}

/* Asegurar que el contenido de los cards no oculte los controles de CMS */
.cms-toolbar-expanded .card {
    overflow: visible !important;
}

/* Fix para que los botones de agregar plugin sean clickeables */
.cms-toolbar-expanded .cms-dragbar,
.cms-toolbar-expanded .cms-submenu-btn,
.cms-toolbar-expanded .cms-plugin {
    z-index: 100 !important;
    position: relative;
}

/* =========================================
   ESTILOS PARA VALORES INSTITUCIONALES
   ========================================= */

/* Cards rectangulares para valores - Desktop */
.card-valor-cuadrado {
    height: 250px;  /* Altura fija para eliminar espacio vacóo */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: calc(var(--space) * 1.5) !important;  /* Aumentado para Más espacio interno */
    text-align: center;
    max-width: none;  /* Sin lómite para alinearse con otros cards */
    margin: 0;  /* Sin margin auto para alineación correcta */
}

/* Contenedor de imagen para valores institucionales */
.valor-imagen {
    width: 100%;
    max-height: 80px;  /* Reducido de 96px a 80px */
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;  /* Reducido de 1rem a 0.75rem */
}

/* Imógenes dentro del contenedor de valores */
.valor-imagen img,
.valor-imagen .cms-plugin img,
.valor-imagen .djangocms-picture img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80px;  /* Reducido de 96px a 80px */
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Soporte para plugins de Django CMS */
.valor-imagen .cms-plugin,
.valor-imagen .djangocms-picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Tótulo centrado en los cards de valores */
.card-valor-cuadrado h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.75rem;  /* Reducido de 1rem a 0.75rem */
    font-size: 1rem;  /* Reducido de 1.1rem a 1rem */
    color: var(--muted);
    width: 100%;
}

/* Texto descriptivo */
.card-valor-cuadrado p,
.card-valor-cuadrado .cms-placeholder {
    text-align: center;
    font-size: 0.875rem;  /* Reducido de 0.95rem a 0.875rem */
    line-height: 1.4;  /* Reducido de 1.5 a 1.4 */
    flex: 1;
    margin: 0;  /* Elimina mórgenes por defecto */
}

/* Aumentar gap entre cards de valores */
.grid-3 {
    gap: calc(var(--space) * 1.8);  /* Reducido de 2 a 1.8 */
}

/* Responsive: Tablet - altura fija con imagen Más pequeóa */
@media (min-width: 769px) and (max-width: 1024px) {
    .card-valor-cuadrado {
        height: 230px;  /* Altura fija para tablet */
        max-width: none;  /* Sin lómite para alineación correcta */
        padding: calc(var(--space) * 1.3) !important;
    }

    .valor-imagen {
        max-height: 70px;  /* Reducido de 80px a 70px */
        min-height: 70px;
    }

    .valor-imagen img,
    .valor-imagen .cms-plugin img,
    .valor-imagen .djangocms-picture img {
        max-height: 70px;
    }

    .card-valor-cuadrado h3 {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
    }
}

/* Responsive: Tablet pequeóa - altura adaptable */
@media (max-width: 768px) and (min-width: 481px) {
    .card-valor-cuadrado {
        height: auto;  /* Altura automótica en tablet pequeóa */
        min-height: 200px;
        max-width: 100%;  /* Ocupa todo el ancho disponible */
        padding: calc(var(--space) * 1.3) !important;
    }

    .valor-imagen {
        max-height: 64px;  /* Reducido de 72px a 64px */
        min-height: 64px;
    }

    .valor-imagen img,
    .valor-imagen .cms-plugin img,
    .valor-imagen .djangocms-picture img {
        max-height: 64px;
    }

    .card-valor-cuadrado h3 {
        font-size: 0.95rem;
        margin-bottom: 0.6rem;
    }
}

/* Responsive: Móvil - altura adaptable */
@media (max-width: 480px) {
    .card-valor-cuadrado {
        height: auto;  /* Altura automótica en móvil */
        min-height: 180px;
        max-width: 100%;
        padding: calc(var(--space) * 1.2) !important;
    }

    .valor-imagen {
        max-height: 56px;  /* Reducido de 64px a 56px */
        min-height: 56px;
        margin-bottom: 0.6rem;
    }

    .valor-imagen img,
    .valor-imagen .cms-plugin img,
    .valor-imagen .djangocms-picture img {
        max-height: 56px;
    }

    .card-valor-cuadrado h3 {
        font-size: 0.9rem;
        margin-bottom: 0.6rem;
    }

    .card-valor-cuadrado p,
    .card-valor-cuadrado .cms-placeholder {
        font-size: 0.8rem;
    }
}

/* =========================================
   HERO NOSOTROS (Mitad de altura del hero home)
   ========================================= */

.hero-nosotros {
    position: relative;
    height: 250px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Placeholder y contenido dentro del hero */
.hero-nosotros .cms-placeholder,
.hero-nosotros > * {
    height: 100%;
    width: 100%;
}

/* Imógenes dentro del hero nosotros */
.hero-nosotros img,
.hero-nosotros .djangocms-picture img,
.hero-nosotros .cms-plugin img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Overlay de texto sobre hero nosotros */
.hero-nosotros::before {
    content: 'Nosotros';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Overlay oscuro para mejor legibilidad del texto */
.hero-nosotros::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
}

/* Asegurar que la imagen estó debajo del overlay */
.hero-nosotros .cms-placeholder,
.hero-nosotros > *:not(::before):not(::after) {
    position: relative;
    z-index: 1;
}

/* Responsive: Tablet grande */
@media (max-width: 1024px) {
    .hero-nosotros {
        height: 200px;
    }
}

/* Responsive: Tablet pequeóa / Móvil grande */
@media (max-width: 900px) {
    .hero-nosotros {
        height: 180px;
    }
}

/* Responsive: Móvil */
@media (max-width: 768px) {
    .hero-nosotros {
        height: 160px;
    }

    .hero-nosotros::before {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }
}

/* Móvil pequeño */
@media (max-width: 480px) {
    .hero-nosotros {
        height: 140px;
    }
}

/* Fix para scrollbar horizontal en pantallas anchas */
@media (min-width: 1200px) {
    .hero-nosotros {
        margin-left: calc(-50vw + 8.5px);
        margin-right: calc(-50vw + 8.5px);
    }
}

/* =========================================
   PóGINA DE CONTACTO
   ========================================= */

/* Hero Contacto - mismo estilo que hero nosotros */
.hero-contacto {
    position: relative;
    height: 250px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Placeholder ocupa todo el espacio pero estó detrós */
.hero-contacto .cms-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.hero-contacto img,
.hero-contacto .djangocms-picture img,
.hero-contacto .cms-plugin img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Overlay oscuro sobre la imagen */
.hero-contacto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Tótulo sobre hero contacto */
.hero-contacto .hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
    pointer-events: none;
}

/* Formulario de contacto */
.card-formulario {
    padding: calc(var(--space) * 1.5) !important;
}

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-label {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-input,
.form-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.875rem 1rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 0.7);
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
    color: #212529;  /* Texto gris oscuro/negro */
    transition: all 0.3s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #6c757d;  /* Placeholder gris Más claro */
}

/* Select especófico */
.form-input select,
select.form-input {
    color: #212529;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(30, 107, 214, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--muted);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.btn-submit {
    background: #006747;
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 103, 71, 0.2);
    width: auto;
    max-width: 100%;
    margin-top: 1rem;
    align-self: flex-start;
}

.btn-submit:hover {
    background: #004d34;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 103, 71, 0.3);
}

.btn-submit:active {
    transform: translateY(0);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-submit:disabled:hover {
    transform: none;
    background: #006747;
}

/* Sobreescritura del verde corporativo sobre Bootstrap "Éxito" */
.btn-success {
    background-color: #005e3d;
    border-color: #005e3d;
    color: #fff;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: #004a30;
    border-color: #004a30;
    color: #fff;
}
.btn-outline-success {
    color: #005e3d;
    border-color: #005e3d;
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: #005e3d;
    border-color: #005e3d;
    color: #fff;
}

/* Formulario de contacto especófico */
.form-contacto {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
}

/* Fila de 2 columnas para campos del formulario */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0;
}

/* Campo que ocupa toda la fila (mensaje, motivo) */
.form-group-full {
    grid-column: 1 / -1;
}

/* En móvil, volver a 1 columna */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.formulario-intro {
    margin-bottom: 0.75rem;
    color: var(--muted);
    line-height: 1.6;
}

.card-formulario {
    display: flex;
    flex-direction: column;
    overflow: visible;  /* Permitir que crezca */
    height: auto !important;  /* Anular altura fija */
    min-height: auto;
    min-width: 0;
}

.card-formulario .form-contacto {
    margin-top: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 0.8);
    background: rgba(255, 255, 255, 0.5);
}

.card-formulario * {
    max-width: 100%;
    box-sizing: border-box;
}

.card-formulario input,
.card-formulario textarea,
.card-formulario select {
    width: 100% !important;
    max-width: 100% !important;
}

.card-formulario button {
    width: auto !important;
    max-width: 100% !important;
}

/* Grid de contacto - asegurar que las columnas sean iguales */
.grid-2 > .card-formulario,
.grid-2 > .contacto-aside {
    min-width: 0; /* Previene overflow */
    width: 100%;
}

.contacto-aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contacto-aside .card {
    min-width: 0;
    overflow: visible;  /* Permitir que muestre todo el contenido */
    height: auto !important;  /* Anular altura fija */
}

.card-contacto-info,
.card-ubicacion {
    height: auto !important;  /* Permitir que crezcan con el contenido */
    min-height: auto;
}

/* Forzar que todo el contenido dentro de los cards respete el ancho */
.card-contacto-info * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.contacto-info-content {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.contacto-info-content p,
.contacto-info-content div,
.contacto-info-content span {
    max-width: 100%;
    word-wrap: break-word;
}

/* Mensajes de formulario */
.form-messages {
    margin-bottom: 1rem;
}

.alert {
    padding: 0.875rem 1rem;
    border-radius: calc(var(--radius) * 0.7);
    margin-bottom: 0.75rem;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Aside con información de contacto */
.contacto-aside {
    gap: calc(var(--space) * 1.4);
}

.card-ubicacion,
.card-contacto-info {
    padding: calc(var(--space) * 1.5) !important;
}

.card-ubicacion h3,
.card-contacto-info h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--muted);
}

.map-container {
    border-radius: 8px;
    overflow: hidden;
    margin-top: 1rem;
}

.contacto-info-content {
    min-height: 120px;
}

/* Sección zona de ventas */
.zona-ventas-section {
    margin-top: calc(var(--space) * 2);
}

.card-zona-ventas {
    padding: calc(var(--space) * 1.5) !important;
    min-height: 400px;
}

/* Responsive para pógina de contacto */
@media (max-width: 1024px) {
    .hero-contacto {
        height: 200px;
    }
}

@media (max-width: 900px) {
    .hero-contacto {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .hero-contacto {
        height: 160px;
    }

    .hero-contacto .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }
}

@media (max-width: 480px) {
    .hero-contacto {
        height: 140px;
    }

    .form-row-2 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .contacto-aside {
        order: 2;
    }
}

@media (max-width: 480px) {
    .card-formulario {
        padding: calc(var(--space) * 1.2) !important;
    }

    .form-input,
    .form-textarea {
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
    }

    .btn-submit {
        width: 100%;
        padding: 1rem;
    }
}

@media (min-width: 1200px) {
    .hero-contacto {
        margin-left: calc(-50vw + 8.5px);
        margin-right: calc(-50vw + 8.5px);
    }
}

/* ========================================
   PóGINA DE ZONA DE VENTAS
   ======================================== */

/* Hero Zona de Ventas - mismo estilo que hero contacto */
.hero-zona-ventas {
    position: relative;
    height: 250px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Placeholder ocupa todo el espacio pero estó detrós */
.hero-zona-ventas .cms-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.hero-zona-ventas img,
.hero-zona-ventas .djangocms-picture img,
.hero-zona-ventas .cms-plugin img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Overlay oscuro sobre la imagen */
.hero-zona-ventas::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Tótulo sobre hero zona de ventas */
.hero-zona-ventas .hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
    pointer-events: none;
}

/* Sección de información adicional */
.zona-ventas-extra {
    margin-top: 2rem;
}

/* Responsive para pógina de zona de ventas */
@media (max-width: 1024px) {
    .hero-zona-ventas {
        height: 200px;
    }
}

@media (max-width: 900px) {
    .hero-zona-ventas {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .hero-zona-ventas {
        height: 160px;
    }

    .hero-zona-ventas .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }
}

@media (max-width: 480px) {
    .hero-zona-ventas {
        height: 140px;
    }
}

@media (min-width: 1200px) {
    .hero-zona-ventas {
        margin-left: calc(-50vw + 8.5px);
        margin-right: calc(-50vw + 8.5px);
    }
}

/* ========================================
   PóGINAS DE REGIONES
   ======================================== */

/* Hero Región - mismo estilo que otras póginas */
.hero-region {
    position: relative;
    height: 250px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Placeholder ocupa todo el espacio pero estó detrós */
.hero-region .cms-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.hero-region img,
.hero-region .djangocms-picture img,
.hero-region .cms-plugin img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Overlay oscuro sobre la imagen */
.hero-region::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Tótulo sobre hero región */
.hero-region .hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
    pointer-events: none;
}


/* Cards de región */
.card-region-imagen,
.card-region-distribuidores {
    height: auto !important;
    min-height: 400px;
}

.card-region-imagen h3,
.card-region-distribuidores h3 {
    margin-bottom: 1rem;
    color: var(--muted);
}

/* Sección de información adicional */
.region-info-adicional {
    margin-top: 2rem;
}

/* Responsive para póginas de regiones */
@media (max-width: 1024px) {
    .hero-region {
        height: 200px;
    }
}

@media (max-width: 900px) {
    .hero-region {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .hero-region {
        height: 160px;
    }

    .hero-region .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .card-region-imagen,
    .card-region-distribuidores {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .hero-region {
        height: 140px;
    }
}

@media (min-width: 1200px) {
    .hero-region {
        margin-left: calc(-50vw + 8.5px);
        margin-right: calc(-50vw + 8.5px);
    }
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 1.5rem;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: var(--muted);
}

.breadcrumb-item a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--brand-navy);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--text);
    font-weight: 500;
}

/* Responsive breadcrumb */
@media (max-width: 768px) {
    .breadcrumb {
        margin-bottom: 1rem;
    }

    .breadcrumb-list {
        font-size: 0.85rem;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 0.35rem;
    }
}

/* ========================================
   PóGINA DE AGROCONOCIMIENTO
   ======================================== */

/* Hero Agroconocimiento */
.hero-agroconocimiento {
    position: relative;
    height: 250px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-agroconocimiento .cms-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.hero-agroconocimiento img,
.hero-agroconocimiento .djangocms-picture img,
.hero-agroconocimiento .cms-plugin img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-agroconocimiento::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.hero-agroconocimiento .hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
    pointer-events: none;
}


/* Intro de agroconocimiento */
.agroconocimiento-intro {
    margin-bottom: 2rem;
    text-align: center;
    color: var(--muted);
    font-size: 1.1rem;
}

/* Cards de agroconocimiento */
.card-agro-link {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    height: 320px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.card-agro-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.card-agro-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* Imagen del card */
.card-agro-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: calc(var(--radius) * 0.7);
    margin-bottom: 1rem;
}

.card-agro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-agro-link:hover .card-agro-image img {
    transform: scale(1.05);
}

/* Tótulo del card - va arriba */
.card-agro-content h3 {
    margin: 0 0 1rem 0;
    color: var(--muted);
    font-size: 1.25rem;
    font-weight: 600;
    order: -1; /* Asegura que estó arriba */
}

/* Descripción del card - va abajo */
.card-agro-content p {
    margin: 1rem 0 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    flex: 1;
}

/* Link overlay invisible que cubre todo el card */
.card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
}

/* Sección adicional */
.agroconocimiento-adicional {
    margin-top: 3rem;
}

/* Responsive para agroconocimiento */
@media (max-width: 1024px) {
    .hero-agroconocimiento {
        height: 200px;
    }

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

@media (max-width: 900px) {
    .hero-agroconocimiento {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .hero-agroconocimiento {
        height: 160px;
    }

    .hero-agroconocimiento .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .card-agro-link {
        height: auto;
        min-height: 280px;
    }

    .agroconocimiento-intro {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-agroconocimiento {
        height: 140px;
    }
}

@media (min-width: 1200px) {
    .hero-agroconocimiento {
        margin-left: calc(-50vw + 8.5px);
        margin-right: calc(-50vw + 8.5px);
    }
}

/* ========================================
   PóGINA DE SOSTENIBILIDAD E INNOVACIón
   ======================================== */

/* Hero Sostenibilidad */
.hero-sostenibilidad {
    position: relative;
    height: 250px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-sostenibilidad .cms-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.hero-sostenibilidad img,
.hero-sostenibilidad .djangocms-picture img,
.hero-sostenibilidad .cms-plugin img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-sostenibilidad::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.hero-sostenibilidad .hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
    pointer-events: none;
}


/* Intro de sostenibilidad */
.sostenibilidad-intro {
    margin-bottom: 2rem;
    text-align: center;
    color: var(--muted);
    font-size: 1.1rem;
}

/* Cards de sostenibilidad */
.card-sostenibilidad-link {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    height: 320px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.card-sostenibilidad-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.card-sostenibilidad-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* Imagen del card */
.card-sostenibilidad-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: calc(var(--radius) * 0.7);
    margin-bottom: 1rem;
}

.card-sostenibilidad-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-sostenibilidad-link:hover .card-sostenibilidad-image img {
    transform: scale(1.05);
}

/* Tótulo del card - va arriba */
.card-sostenibilidad-content h3 {
    margin: 0 0 1rem 0;
    color: var(--muted);
    font-size: 1.25rem;
    font-weight: 600;
    order: -1; /* Asegura que estó arriba */
}

/* Descripción del card - va abajo */
.card-sostenibilidad-content p {
    margin: 1rem 0 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    flex: 1;
}

/* Sección adicional */
.sostenibilidad-adicional {
    margin-top: 3rem;
}

/* Responsive para sostenibilidad */
@media (max-width: 1024px) {
    .hero-sostenibilidad {
        height: 200px;
    }
}

@media (max-width: 900px) {
    .hero-sostenibilidad {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .hero-sostenibilidad {
        height: 160px;
    }

    .hero-sostenibilidad .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .card-sostenibilidad-link {
        height: auto;
        min-height: 280px;
    }

    .sostenibilidad-intro {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-sostenibilidad {
        height: 140px;
    }
}

@media (min-width: 1200px) {
    .hero-sostenibilidad {
        margin-left: calc(-50vw + 8.5px);
        margin-right: calc(-50vw + 8.5px);
    }
}

/* ========================================
   PóGINA DE VIDEOS EDUCATIVOS
   ======================================== */

/* Hero Videos */
.hero-videos {
    position: relative;
    height: 250px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-videos .cms-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

/* Wrappers intermedios del plugin deben llenar el hero completo */
.hero-videos > *:not(.hero-title),
.hero-videos .djangocms-picture,
.hero-videos picture {
    display: block;
    height: 100%;
    width: 100%;
}

.hero-videos img,
.hero-videos .djangocms-picture img,
.hero-videos .cms-plugin img,
.hero-videos picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-videos::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.hero-videos .hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    margin: 0;
    pointer-events: none;
}


/* Intro de videos */
.videos-intro {
    margin-bottom: 2rem;
    text-align: center;
    color: var(--muted);
    font-size: 1.1rem;
}

/* Grid simple para videos - versión Más fócil de usar */
.videos-grid-simple {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Grid autofit para videos */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Card de video - ahora es un enlace directo desde CMS */
.card-video {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
}

.card-video:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    text-decoration: none !important;
}

/* Imagen dentro del card-video */
.card-video img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

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

/* Texto dentro del card-video */
.card-video .cms-plugin,
.card-video > div {
    padding: 1rem;
    flex: 1;
}

.card-video h3,
.card-video b,
.card-video strong {
    color: var(--muted);
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    display: block;
}

.card-video p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* Card video simple - versión HTML directa */
.card-video-simple {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0 !important; /* Sobrescribe padding de .card */
    overflow: hidden !important; /* Para que respete el border-radius */
    border-radius: var(--radius) !important; /* Asegura el border-radius */
}

/* Forzar overflow hidden incluso con CMS toolbar */
.cms-toolbar-expanded .card-video-simple {
    overflow: hidden !important;
}

.card-video-simple:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.card-video-simple .video-header {
    padding: 1rem 1rem 0.5rem 1rem;
    background-color: #fff;
    text-align: center;
}

.card-video-simple img {
    width: calc(100% - 2rem);
    height: 180px;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
    margin: 0 1rem;
}

.card-video-simple:hover img {
    transform: scale(1.05);
}

.card-video-simple .video-info {
    padding: 0.5rem 1rem 1rem 1rem;
    flex: 1;
    text-align: center;
}

.card-video-simple h3 {
    color: var(--muted);
    font-size: 1.1rem;
    margin: 0;
}

.card-video-simple p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.card-video-simple .ver-mas {
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 0.95rem;
}

.card-video-simple:hover .ver-mas {
    color: var(--brand-navy);
}

/* ======================================================
   NOTAS DE PRENSA
   ====================================================== */

/* Hero para notas de prensa - igual que hero-nosotros */
.hero-notas,
.hero-cultivos {
    position: relative;
    height: 250px;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

.hero-notas.full-bleed {
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Placeholder y contenido dentro del hero */
.hero-notas .cms-placeholder,
.hero-notas > *:not(.hero-title) {
    height: 100%;
    width: 100%;
}

/* Imógenes dentro del hero notas */
.hero-notas img,
.hero-notas .djangocms-picture img,
.hero-notas .cms-plugin img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Título sobre hero notas */
.hero-notas .hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}


/* Overlay oscuro para mejor legibilidad del texto */
.hero-notas::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
}

/* Asegurar que la imagen estó debajo del overlay */
.hero-notas .cms-placeholder,
.hero-notas > *:not(.hero-title):not(::before):not(::after) {
    position: relative;
    z-index: 1;
}

/* Responsive: Tablet grande */
@media (max-width: 1024px) {
    .hero-notas,
    .hero-cultivos {
        height: 200px;
    }
}

/* Responsive: Tablet pequeóa / Móvil grande */
@media (max-width: 900px) {
    .hero-notas,
    .hero-cultivos {
        height: 180px;
    }
}

/* Responsive: Móvil */
@media (max-width: 768px) {
    .hero-notas,
    .hero-cultivos {
        height: 160px;
    }

    .hero-notas .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }
}

/* Móvil pequeño */
@media (max-width: 480px) {
    .hero-notas,
    .hero-cultivos {
        height: 140px;
    }
}

/* Fix para scrollbar horizontal en pantallas anchas */
@media (min-width: 1200px) {
    .hero-notas,
.hero-cultivos {
        margin-left: calc(-50vw + 8.5px);
        margin-right: calc(-50vw + 8.5px);
    }
}

/* Card de nota de prensa */
.press-note-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 0 !important; /* Remover padding de .card para control manual */
}

.press-note-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.press-note-title {
    color: var(--muted);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    padding: 1.25rem 1.25rem 1rem;
    text-align: center;
    line-height: 1.4;
}

.press-note-thumb {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.press-note-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.press-note-thumb.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}

.press-note-thumb.placeholder span {
    color: #999;
    font-size: 0.9rem;
}

.press-note-card:hover .press-note-thumb img {
    transform: scale(1.05);
}

.press-note-content {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}

.press-note-date {
    color: var(--muted);
    font-size: 0.8rem;
    font-style: italic;
    margin: 0;
}

.press-note-summary {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
    flex: 1;
    margin: 0;
}

.press-note-link {
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

.press-note-link:hover {
    color: #fff;
    background: var(--brand-blue);
    text-decoration: none;
}

/* Intro de notas */
.notas-intro {
    margin-bottom: 2rem;
    color: var(--muted);
}

/* Protección de imágenes: evita selección y arrastre visual */
body:not(.cms) img,
body:not(.cms-toolbar-expanded) img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto; /* Mantener clics normales (links con imagen) */
}

/* Paginación numérica de notas de prensa */
.notas-paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.pag-btn {
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.6rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--brand-navy);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pag-btn:hover:not(:disabled) {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
}

.pag-btn.pag-active {
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
    font-weight: 700;
    pointer-events: none;
}

.pag-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pag-prev,
.pag-next {
    font-size: 1rem;
}

/* Thumbnail del video */
.card-video-thumbnail {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f0f0f0;
}

.card-video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-video:hover .card-video-thumbnail img {
    transform: scale(1.05);
}

/* Icono de play */
.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    transition: all 0.3s ease;
    padding-left: 4px;
}

.card-video:hover .video-play-icon {
    background: var(--brand-blue);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Contenido del card */
.card-video-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-video-title {
    font-size: 1.1rem;
    color: var(--brand-navy);
    margin: 0 0 0.5rem 0;
    display: block;
}

.card-video-desc {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
    flex: 1;
    line-height: 1.5;
}

.btn-ver-video {
    color: var(--brand-blue);
    font-weight: 600;
    font-size: 0.95rem;
    align-self: flex-start;
}

.card-video:hover .btn-ver-video {
    color: var(--brand-navy);
}

/* Sección adicional */
.videos-adicional {
    margin-top: 3rem;
}

/* Responsive para videos */
@media (max-width: 1024px) {
    .hero-videos {
        height: 200px;
    }

    .videos-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 900px) {
    .hero-videos {
        height: 180px;
    }
}

@media (max-width: 768px) {
    .hero-videos {
        height: 160px;
    }

    .hero-videos .hero-title {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
    }

    .videos-grid {
        grid-template-columns: 1fr;
    }

    .videos-intro {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-videos {
        height: 140px;
    }
}

@media (min-width: 1200px) {
    .hero-videos {
        margin-left: calc(-50vw + 8.5px);
        margin-right: calc(-50vw + 8.5px);
    }
}

/* Updated: Tue 23 Dec 2025 07:59:55 PM -05 */

/* Force reload 1766538447 */
/* CSS updated at 1766539024 */
/* Updated 1766547041 */

/* Modal de envóo - Email o WhatsApp */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-navy);
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.modal-subtitle {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.btn-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-email {
    background: var(--brand-navy);
    color: white;
}

.btn-email:hover {
    background: var(--brand-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(30, 107, 214, 0.3);
}

.btn-whatsapp {
    background: #25D366;
    color: white;
}

.btn-whatsapp:hover {
    background: #20BA5A;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}

.btn-modal svg {
    flex-shrink: 0;
}

.btn-modal-cerrar {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-modal-cerrar:hover {
    background: #f8f9fa;
    border-color: var(--brand-navy);
    color: var(--brand-navy);
}

@media (max-width: 480px) {
    .modal-content {
        padding: 1.5rem;
    }

    .modal-title {
        font-size: 1.25rem;
    }

    .btn-modal {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
}
/* Modal updated 1766601504 */

/* ========================================================================
   MODAL DE SELECCIÓN DE REGIÓN - ESTILO MINIMALISTA Y RESPONSIVE
   ======================================================================== */
.modal-region-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
    padding: 1rem;
    box-sizing: border-box;
}

/* Aplicar box-sizing a todos los elementos del modal */
.modal-region-overlay *,
.modal-region-overlay *::before,
.modal-region-overlay *::after {
    box-sizing: border-box;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-region-content {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    max-width: 450px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    box-sizing: border-box;
    word-wrap: break-word;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-region-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
    transition: color 0.2s ease;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.modal-region-close:hover {
    color: #333;
}

.modal-region-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0b0b0b;
    margin: 0 0 0.5rem 0;
    padding-right: 2rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.modal-region-description {
    color: #5f6b7a;
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.modal-region-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e6e8eb;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    color: #0b0b0b;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23005e3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
    box-sizing: border-box;
    max-width: 100%;
}

.modal-region-select option {
    color: #0b0b0b;
    padding: 0.5rem;
}

.modal-region-select:valid:not([value=""]) {
    color: #005e3d;
    border-color: #005e3d;
}

.modal-region-select:hover {
    border-color: #005e3d;
}

.modal-region-select:focus {
    outline: none;
    border-color: #005e3d;
    box-shadow: 0 0 0 3px rgba(0, 94, 61, 0.1);
}

.modal-region-btn {
    width: 100%;
    padding: 1rem;
    background: #005e3d;
    color: white;
    border: 1px solid #005e3d;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    max-width: 100%;
}

.modal-region-btn:hover:not(:disabled) {
    background: transparent;
    color: #005e3d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 94, 61, 0.2);
}

.modal-region-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-region-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE - BREAKPOINTS OPTIMIZADOS
   ============================================ */

/* Tablets en landscape y pantallas intermedias (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
    .modal-region-content {
        max-width: 500px;
        padding: 2rem 1.75rem;
    }

    .modal-region-title {
        font-size: 1.4rem;
    }

    .modal-region-description {
        font-size: 0.9rem;
    }

    .modal-region-select {
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }
}

/* Tablets en portrait (576px - 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .modal-region-overlay {
        padding: 1rem;
    }

    .modal-region-content {
        max-width: 90%;
        padding: 1.75rem 1.5rem;
        border-radius: 10px;
    }

    .modal-region-close {
        font-size: 1.5rem;
        width: 28px;
        height: 28px;
        top: 0.875rem;
        right: 0.875rem;
    }

    .modal-region-title {
        font-size: 1.3rem;
        padding-right: 2.5rem;
    }

    .modal-region-description {
        font-size: 0.875rem;
        margin-bottom: 1.25rem;
    }

    .modal-region-select {
        font-size: 0.95rem;
        padding: 0.8rem 0.875rem;
        padding-right: 2.25rem;
    }

    .modal-region-btn {
        padding: 0.9rem;
        font-size: 0.95rem;
    }
}

/* M├│viles grandes (400px - 575px) */
@media (max-width: 575px) and (min-width: 400px) {
    .modal-region-overlay {
        padding: 0.75rem;
    }

    .modal-region-content {
        max-width: 95%;
        padding: 1.5rem 1.25rem;
        border-radius: 10px;
    }

    .modal-region-close {
        font-size: 1.5rem;
        width: 28px;
        height: 28px;
        top: 0.75rem;
        right: 0.75rem;
    }

    .modal-region-title {
        font-size: 1.2rem;
        padding-right: 2rem;
        margin-bottom: 0.375rem;
    }

    .modal-region-description {
        font-size: 0.85rem;
        margin-bottom: 1.125rem;
        line-height: 1.4;
    }

    .modal-region-select {
        font-size: 0.9rem;
        padding: 0.75rem 0.875rem;
        padding-right: 2.25rem;
        margin-bottom: 0.875rem;
    }

    .modal-region-btn {
        padding: 0.875rem;
        font-size: 0.9rem;
    }
}

/* M├│viles peque├▒os (menos de 400px) */
@media (max-width: 399px) {
    .modal-region-overlay {
        padding: 0.5rem;
        align-items: flex-start;
        padding-top: 1.5rem;
    }

    .modal-region-content {
        max-width: 100%;
        padding: 1rem 0.875rem;
        border-radius: 8px;
        max-height: 85vh;
    }

    .modal-region-close {
        font-size: 1.375rem;
        width: 26px;
        height: 26px;
        top: 0.5rem;
        right: 0.5rem;
    }

    .modal-region-title {
        font-size: 1.05rem;
        padding-right: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .modal-region-description {
        font-size: 0.8rem;
        margin-bottom: 0.875rem;
        line-height: 1.35;
    }

    .modal-region-select {
        font-size: 0.875rem;
        padding: 0.65rem 0.65rem;
        padding-right: 1.875rem;
        margin-bottom: 0.75rem;
        background-size: 1rem;
        background-position: right 0.5rem center;
    }

    .modal-region-btn {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

/* Fix para evitar scroll horizontal en el body cuando el modal está abierto */
body.modal-open {
    overflow: hidden;
}

/* ========================================================================
   FIN DEL MODAL DE SELECCIÓN DE REGIÓN
   ======================================================================== */

/* ========================================
   FOOTER SITIO COMPLETO
   ======================================== */

/* Base Footer */
.site-footer {
    background: #005e3d;
    color: #ffffff;
    margin-top: 4rem;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}

/* Main Footer Content */
.footer-main {
    padding: 2rem 0 1.5rem;
    background: #005e3d;
    color: #ffffff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 3rem;
}

/* Footer Column */
.f-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Brand Column */
.f-brand {
    display: inline-block;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}

.f-brand img {
    max-width: 130px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    filter: brightness(0) invert(1);
}

.f-blurb {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #ffffff;
    margin-bottom: 0;
}

/* Fila superior: imagen molinos izquierda + logo empresa derecha */
.f-brand-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Imagen molinos (izquierda) */
.f-molinos-img {
    flex: 1;
    min-width: 0;
    width: 50%;
    max-width: 140px;
    height: auto;
    border-radius: 6px;
    opacity: 0.9;
    display: block;
}

/* Logo empresa (derecha) */
.f-brand {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f-brand img {
    width: 100%;
    max-width: 130px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
}

/* Responsive: pantallas intermedias (1024px) */
@media (max-width: 1024px) {
    .f-brand-top {
        justify-content: center;
    }
}

/* Responsive: móvil */
@media (max-width: 768px) {
    .f-brand-top {
        justify-content: center;
        max-width: 300px;
        margin: 0 auto;
    }
}

.f-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.f-badges img {
    height: 50px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.f-badges img:hover {
    opacity: 1;
}

/* Column Title */
.f-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--brand-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Navigation Lists */
.f-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.f-list li {
    line-height: 1.6;
}

.f-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    padding-left: 0;
}

.f-list a::before {
    content: '\2192';
    position: absolute;
    left: -15px;
    opacity: 0;
    transition: all 0.3s ease;
    color: #ffffff;
}

.f-list a:hover {
    color: #b3e5d4;
    padding-left: 15px;
}

.f-list a:hover::before {
    opacity: 1;
    left: 0;
}

/* Contact Info */
.f-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-style: normal;
}

.f-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.6;
}

.f-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: #ffffff;
    margin-top: 2px;
}

.f-contact-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.f-contact-item a:hover {
    color: #b3e5d4;
}

/* Social Media */
.f-social {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.f-social__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}

.f-social__ico:hover {
    background: #b3e5d4;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

.f-social__ico svg {
    width: 20px;
    height: 20px;
    fill: #005e3d;
}

.f-social__ico svg path {
    fill: #005e3d;
}

.f-social__ico:hover svg {
    fill: #005e3d;
}

.f-social__ico:hover svg path {
    fill: #005e3d;
}

/* Legal Bar */
.footer-legal {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-legal__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-copy {
    color: #ffffff;
    font-size: 0.9rem;
}

.footer-legal__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-legal__links a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-legal__links a:hover {
    color: #b3e5d4;
}

/* Responsive Footer */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2.5rem;
    }

    .f-col:first-child {
        grid-column: 1 / -1;
        max-width: 100%;
        text-align: center;
    }

    .f-brand {
        justify-content: center;
    }

    .f-badges {
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .footer-main {
        padding: 2rem 0 1.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .f-col:first-child {
        grid-column: 1;
    }

    .f-list a::before {
        display: none;
    }

    .f-list a:hover {
        padding-left: 0;
    }

    .f-contact-item {
        justify-content: center;
    }

    .f-social {
        justify-content: center;
    }

    .footer-legal__inner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-legal__links {
        gap: 1.5rem;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .f-title {
        font-size: 1rem;
    }

    .footer-legal__links {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ========================================
   CULTIVOS PAGE STYLES
   ======================================== */

/* Hero Cultivos */
.hero-cultivos {
  position: relative;
  height: 250px;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.hero-cultivos .cms-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.hero-cultivos img,
.hero-cultivos .djangocms-picture img,
.hero-cultivos .cms-plugin img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-cultivos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.hero-cultivos .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-size: clamp(2rem, 5vw, 4rem);
  margin: 0;
  text-align: center;
}


@media (max-width: 768px) {
  .hero-cultivos {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .hero-cultivos {
    height: 140px;
  }
}

/* Carruseles de cultivos: 5 items en lugar de 6 */
@media (min-width: 1200px) {
  #c-tab-andinos .icon-carousel .icon-card,
  #c-tab-costa .icon-carousel .icon-card,
  #c-tab-selva .icon-carousel .icon-card {
    width: calc((100% - 48px) / 5) !important;
  }
}

/* Centrado automÔö£├¡tico del carrusel de cultivos cuando hay pocos elementos */
#c-tab-andinos .icon-carousel,
#c-tab-costa .icon-carousel,
#c-tab-selva .icon-carousel {
  justify-content: center;  /* Centra horizontalmente los cards */
  justify-items: center;    /* Centra cada item en su celda de grid */
}

/* ===== PóGINA SOLUCIONES ===== */

/* Hero soluciones */
.hero-soluciones {
  position: relative;
  height: 250px;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.hero-soluciones .cms-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.hero-soluciones img,
.hero-soluciones .djangocms-picture img,
.hero-soluciones .cms-plugin img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-soluciones::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.hero-soluciones .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-size: clamp(2rem, 5vw, 4rem);
  margin: 0;
  text-align: center;
}


/* Responsive para hero-soluciones */
@media (max-width: 1024px) {
  .hero-soluciones {
    height: 200px;
  }
}

@media (max-width: 900px) {
  .hero-soluciones {
    height: 180px;
  }
}

@media (max-width: 768px) {
  .hero-soluciones {
    height: 160px;
  }

  .hero-soluciones .hero-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }
}

@media (max-width: 480px) {
  .hero-soluciones {
    height: 140px;
  }
}

/* Feature Fósforo */
.feature-band {
  background: var(--bg);
  padding: calc(var(--space) * 3) 0;
}

.feature-split-soluciones {
  display: flex;
  gap: calc(var(--space) * 2);
  align-items: center;
  justify-content: space-between;
}

.feature-text-soluciones {
  flex: 1;
  max-width: 60%;
}

.feature-photo-soluciones {
  flex: 0 0 auto;
}

.feature-photo-soluciones .photo-wrapper {
  width: 240px;
  height: 240px;
  border-radius: 18px;
  overflow: hidden;
}

/* Botón Ver todos */
.btn-ver-todos {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #005e3d;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-ver-todos:hover {
  background: #005e3d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 94, 61, 0.3);
}

/* Tab panels de soluciones */
#sol-tabs .tab-panel {
  display: none;
}

#sol-tabs .tab-panel.active {
  display: block;
}

/* Botón Cotiza aquó (CTA WhatsApp) */
.cta-whatsapp {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #005e3d;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.cta-whatsapp:hover {
  background: #005e3d;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 94, 61, 0.3);
}

/* Responsive soluciones */
@media (max-width: 1024px) {
  .feature-split-soluciones {
    flex-direction: column;
  }

  .feature-text-soluciones {
    max-width: 100%;
  }

  .feature-photo-soluciones .photo-wrapper {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 768px) {

  .feature-photo-soluciones .photo-wrapper {
    width: 180px;
    height: 180px;
  }
}

/* =========================================
   PóGINA PRODUCTO - Estilos especóficos
   ========================================= */

/* Hero producto - mismo estilo que hero contacto y nosotros */
.hero-producto {
  position: relative;
  height: 250px;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Placeholder ocupa todo el espacio pero estó detrós */
.hero-producto .cms-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.hero-producto img,
.hero-producto .djangocms-picture img,
.hero-producto .cms-plugin img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay oscuro sobre la imagen */
.hero-producto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* Tótulo sobre hero producto */
.hero-producto .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  margin: 0;
  pointer-events: none;
  text-align: center; /* Centrar el tótulo */
}

/* === Hero Cotización === */
.hero-cotizar {
  position: relative;
  height: 250px;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: url('https://eos.com/wp-content/uploads/2023/11/components-of-different-types-of-fertilizers.jpg.webp') center center / cover no-repeat;
}

/* Overlay oscuro sobre la imagen */
.hero-cotizar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* Tótulo sobre hero cotizar */
.hero-cotizar .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  margin: 0;
  pointer-events: none;
}

/* Responsive para hero cotizar */
@media (max-width: 1024px) {
  .hero-cotizar {
    height: 200px;
  }
}

@media (max-width: 900px) {
  .hero-cotizar {
    height: 180px;
  }
}

@media (max-width: 768px) {
  .hero-cotizar {
    height: 160px;
  }

  .hero-cotizar .hero-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }
}

@media (max-width: 480px) {
  .hero-cotizar {
    height: 140px;
  }
}

@media (min-width: 1200px) {
  .hero-cotizar {
    margin-left: calc(-50vw + 8.5px);
    margin-right: calc(-50vw + 8.5px);
  }
}

/* === Estilos del carrito de cotización === */

/* Tótulo de la pógina centrado */
.quote-page-title {
  text-align: center;
  margin-bottom: 2rem;
}

/* Wrapper para centrar contenido en pantallas grandes */
.quote-cart-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* Botón de WhatsApp estilo verde */
.btn-whatsapp {
  background-color: #25d366;
  border-color: #25d366;
  color: white;
}

.btn-whatsapp:hover {
  background-color: #128c7e;
  border-color: #128c7e;
  color: white;
}

.btn-whatsapp:focus,
.btn-whatsapp:active {
  background-color: #075e54;
  border-color: #075e54;
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(37, 211, 102, 0.5);
}

/* Lista de items del carrito */
.quote-cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.quote-cart-item {
  padding: 1.5rem;
}

.quote-cart-item-content {
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 1.5rem;
  align-items: center;
}

@media (max-width: 768px) {
  .quote-cart-item-content {
    grid-template-columns: 80px 1fr;
    gap: 1rem;
  }

  .quote-cart-item-qty {
    grid-column: 1 / -1;
  }

  .quote-cart-item-remove {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* Miniatura del producto */
.quote-cart-item-thumb {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.quote-cart-item-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.quote-cart-item-thumb-placeholder {
  font-size: 2rem;
  color: #6c757d;
}

/* Información del producto */
.quote-cart-item-info {
  min-width: 0;
}

.quote-cart-item-title {
  font-size: 1.25rem;
  margin: 0 0 0.5rem 0;
}

.quote-cart-item-title a {
  color: inherit;
  text-decoration: none;
}

.quote-cart-item-title a:hover {
  color: var(--brand-blue);
}

.quote-cart-item-slug {
  margin: 0;
  font-size: 0.875rem;
  color: #6c757d;
}

/* Controles de cantidad */
.quote-cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quote-cart-qty-label {
  font-weight: 500;
  white-space: nowrap;
}

.quote-cart-quantity-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 0.25rem;
  background-color: white;
}

.quote-cart-quantity-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: #f8f9fa;
  color: #495057;
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.quote-cart-quantity-btn:hover {
  background-color: #e9ecef;
}

.quote-cart-quantity-display {
  min-width: 40px;
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
}

/* Botón de eliminar */
.quote-cart-remove-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dc3545;
  background-color: white;
  color: #dc3545;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.quote-cart-remove-btn:hover {
  background-color: #dc3545;
  color: white;
}

/* Resumen del carrito */
.quote-cart-summary {
  padding: 2rem;
}

.quote-cart-summary h2 {
  margin-top: 0;
}

.quote-form {
  margin-top: 2rem;
}

#quote-whatsapp-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
}

/* Mensajes */
.quote-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 4px;
}

.quote-message.success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.quote-message.error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

/* Loading state */
.btn.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Barra de bósqueda semóntica - Sale del container para ocupar Más ancho */
.producto-search-wrapper {
  width: 100vw; /* Ocupa todo el viewport */
  margin-left: calc(-50vw + 50%); /* Sale del container y se centra en el viewport */
  margin-bottom: calc(var(--space) * 1.4);
  display: flex;
  justify-content: center; /* Centra el contenido */
  align-items: center;
}

.producto-search-inner {
  position: relative;
  width: min(1000px, 95vw);
}

.producto-search-bar {
  max-width: none;
  width: 100%;
  padding: 14px 50px 14px 20px;
  border: 2px solid var(--brand-gold);
  border-radius: 10px;
  font-size: 15px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.producto-search-bar:focus {
  outline: none;
  border-color: #006747;
  box-shadow: 0 4px 16px rgba(0, 103, 71, 0.15);
}

.producto-search-bar::placeholder {
  color: #999;
  font-size: 14px;
}

.producto-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--brand-gold);
  pointer-events: none;
}

/* Grid de 3 columnas para producto */
.producto-grid-3 {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  gap: calc(var(--space) * 1.4);
  align-items: stretch; /* Cambiado de start a stretch para alinear al inicio */
}

/* Card de categoróas lateral */
.producto-categorias-card {
  align-self: stretch; /* Cambiado de start a stretch */
  position: static !important;
  top: auto !important;
  height: fit-content;
}

.producto-categorias-title {
  color: #006747;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: calc(var(--space) * 1);
  padding-bottom: 20px;
  position: relative;
}

.producto-categorias-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 64px;
  background: var(--brand-gold);
  border-radius: 3px;
}

.producto-categoria-grupo {
  margin-bottom: calc(var(--space) * 1.5);
}

.producto-categoria-subtitulo {
  color: #006747;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: calc(var(--space) * 0.75);
}

.producto-categoria-lista {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.producto-categoria-lista li {
  margin-bottom: calc(var(--space) * 0.5);
}

.producto-categoria-lista a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
  display: block;
  padding: 0.35rem 0;
}

.producto-categoria-lista a:hover {
  color: #006747;
  text-decoration: underline;
}

/* Card de imagen del producto */
.producto-image-card {
  display: flex !important; /* Cambiado a flex para control de alineación */
  flex-direction: column;
  justify-content: flex-start !important; /* Alineación superior */
  align-items: center; /* Centrado horizontal */
  min-height: 600px;
  padding: calc(var(--space) * 1.5) !important;
  overflow: visible;
  position: relative;
}

/* Mayor especificidad para forzar alineación superior */
.card.producto-image-card {
  justify-content: flex-start !important;
  align-items: center !important;
}
/* Wrapper del placeholder - posicionamiento relativo */
.producto-image-card .cms-placeholder,
.producto-image-card > * {
  display: block !important;
  width: 100%;
  height: auto !important;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

/* Imagen del producto - tamaóo original con centrado */
.card.producto-image-card img,
.card.producto-image-card .cms-plugin img,
.card.producto-image-card .djangocms-picture img,
.producto-image-card img,
.producto-image-card .cms-plugin img,
.producto-image-card .djangocms-picture img {
  /* Permitir tamaóo natural de la imagen pero limitado al ancho del card */
  max-width: 100% !important;
  max-height: 700px !important; /* Lómite razonable */
  height: auto !important;
  width: auto !important;
  min-height: 600px !important; /* Altura mónima para desktop - SE REDUCE EN MEDIA QUERIES */
  min-width: 0 !important;
  border-radius: 8px;
  object-fit: contain !important;
  display: block !important;
  /* Centrado horizontal */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Plugins de Django CMS */
.producto-image-card .cms-plugin,
.producto-image-card .djangocms-picture {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Elemento picture */
.producto-image-card picture {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Sobrescribir atributos width/height HTML inline */
.producto-image-card img[width],
.producto-image-card img[height] {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Card de información del producto */
.producto-info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 1);
  height: auto;
}

/* Card pequeño circular flotante */
.producto-circular-card {
  position: absolute;
  top: calc(var(--space) * 1.5);
  right: calc(var(--space) * 1.5);
  background: white;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  z-index: 5;
  overflow: hidden;
}

.producto-circular-card img,
.producto-circular-card .cms-plugin img,
.producto-circular-card .djangocms-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Nombre del producto con lónea decorativa - mismo estilo que .section-title */
.producto-name {
  color: #006747;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0;
  padding-bottom: 20px;
  position: relative;
  display: inline-block;
  line-height: 1.2;
}

.producto-name .cms-placeholder,
.producto-name .cms-plugin,
.producto-name .cms-plugin * {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-family: inherit;
}

.producto-name h1,
.producto-name h2,
.producto-name h3,
.producto-name h4,
.producto-name p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.cms-toolbar-expanded .producto-name .cms-placeholder {
  min-height: 0;
}

.producto-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 64px;
  background: var(--brand-gold);
  border-radius: 3px;
}

.producto-name-wrapper {
  margin-bottom: 0;
}

/* Descripción del producto */
.producto-description {
  color: #555;
  line-height: 1.6;
  font-size: 15px;
  margin-right: 170px; /* Espacio para imagen grain */
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Pantallas >= 1600px: mantener imagen grain flotante a la derecha */
@media (min-width: 1600px) {
  .producto-description {
    margin-right: 180px; /* Espacio para imagen grain flotante */
  }

  .producto-name {
    max-width: calc(100% - 170px); /* Dejar espacio para imagen grain */
    word-wrap: break-word;
  }

  /* En este rango, la imagen grain flota, asó que NO aplicamos orden flex */
  .producto-circular-card {
    position: absolute; /* Mantener flotante */
  }
}

/* Pantallas < 1600px: imagen grain debajo del tótulo, no flotante */
@media (max-width: 1599px) {
  .producto-circular-card {
    position: static !important; /* Ya no flotante */
    align-self: center;
    margin: calc(var(--space) * 0.75) auto;
  }

  .producto-description {
    margin-right: 0 !important; /* Sin margen derecho, texto ocupa todo el ancho */
  }

  .producto-name {
    max-width: 100%; /* Tótulo ocupa todo el ancho */
  }

  /* Orden con flexbox para asegurar secuencia correcta */
  .producto-info-card {
    display: flex;
    flex-direction: column;
  }

  .producto-name-wrapper {
    order: 1;
  }

  .producto-circular-card {
    order: 2;
  }

  .producto-description {
    order: 3;
  }

  /* Badges de cultivos ANTES del selector de cantidad (orden 4) */
  .producto-badges-wrapper {
    order: 4 !important;
  }

  .producto-cart-section {
    order: 5;
  }
}

.producto-description h3,
.producto-description .cms-plugin h3 {
  color: #006747;
  font-size: 18px;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.producto-description ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.25rem;
}

.producto-description ul li {
  padding: 8px 0;
  color: #555;
  font-size: 15px;
}

.producto-description p {
  margin-bottom: 1rem;
  color: #555;
}

/* Sección de carrito */
.producto-cart-section {
  margin-top: auto;
  padding-top: calc(var(--space) * 1);
  border-top: 2px solid var(--line);
}

.producto-quantity-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.producto-quantity-label {
  font-weight: 600;
  color: var(--ink);
  font-size: 15px;
}

.producto-quantity-selector {
  display: flex;
  align-items: center;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  width: fit-content;
}

.producto-quantity-btn {
  background: #f8f9fa;
  border: none;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  color: #006747;
  font-weight: 600;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.producto-quantity-btn:hover {
  background: #e9ecef;
}

.producto-quantity-btn:active {
  background: #dee2e6;
}

.producto-quantity-display {
  width: 50px;
  padding: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  background: white;
  color: #212529;
  outline: none;
}

/* Estilos especóficos para input number - ocultar spinner */
input.producto-quantity-display {
  -moz-appearance: textfield;
}

input.producto-quantity-display:focus {
  outline: none;
  box-shadow: none;
}

input.producto-quantity-display::-webkit-outer-spin-button,
input.producto-quantity-display::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.producto-add-to-cart-btn {
  background: #006747;
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 103, 71, 0.2);
}

.producto-add-to-cart-btn:hover {
  background: #004d34;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 103, 71, 0.3);
}

.producto-add-to-cart-btn:active {
  transform: translateY(0);
}

/* Ajuste titulos descripcion en rango intermedio */
@media (max-width: 1290px) and (min-width: 701px) {
  .producto-description h2,
  .producto-description h3,
  .producto-description h4,
  .producto-description .cms-plugin h2,
  .producto-description .cms-plugin h3,
  .producto-description .cms-plugin h4 {
    font-size: clamp(0.95rem, 0.6vw + 0.7rem, 1.05rem);
    line-height: 1.25;
  }
}

/* Responsive: Reducir imagen debajo de 1200px */
@media (max-width: 1199px) {
  .producto-image-card,
  .card.producto-image-card {
    justify-content: flex-start !important; /* Forzar alineación superior */
    align-items: center !important;
  }

  .card.producto-image-card img,
  .card.producto-image-card .cms-plugin img,
  .card.producto-image-card .djangocms-picture img,
  .producto-image-card img,
  .producto-image-card .cms-plugin img,
  .producto-image-card .djangocms-picture img {
    min-height: 500px !important; /* Empezar a reducir debajo de 1200px */
  }
}

/* Responsive: Reducir min-height en pantallas intermedias 900px-1100px */
@media (max-width: 1100px) and (min-width: 901px) {
  .card.producto-image-card img,
  .card.producto-image-card .cms-plugin img,
  .card.producto-image-card .djangocms-picture img,
  .producto-image-card img,
  .producto-image-card .cms-plugin img,
  .producto-image-card .djangocms-picture img {
    min-height: 450px !important; /* Reducir min-height para evitar centrado vertical */
  }
}

/* Responsive: Reducir Más min-height en 900px exacto */
@media (max-width: 900px) {
  .card.producto-image-card img,
  .card.producto-image-card .cms-plugin img,
  .card.producto-image-card .djangocms-picture img,
  .producto-image-card img,
  .producto-image-card .cms-plugin img,
  .producto-image-card .djangocms-picture img {
    min-height: 400px !important; /* Reducir min-height para que coincida con tamaóo real de imagen */
  }
}

/* Responsive: Tablet grande */
@media (max-width: 1024px) {
  .hero-producto {
    height: 200px;
  }

  .producto-grid-3 {
    grid-template-columns: 220px 1fr 1fr;
  }

  .producto-image-card,
  .card.producto-image-card {
    padding: calc(var(--space) * 1.2) !important; /* Padding moderado */
    min-height: 500px; /* Ajustar altura del card */
    justify-content: flex-start !important; /* FORZAR alineación superior */
    align-items: center !important;
  }

  .card.producto-image-card img,
  .card.producto-image-card .cms-plugin img,
  .card.producto-image-card .djangocms-picture img,
  .producto-image-card img,
  .producto-image-card .cms-plugin img,
  .producto-image-card .djangocms-picture img {
    min-height: 380px !important; /* Reducción moderada en tablet grande */
  }

  .producto-categorias-card {
    top: 0;
  }

  .producto-circular-card {
    width: 130px;
    height: 130px;
  }

  .producto-circular-card img,
  .producto-circular-card .cms-plugin img,
  .producto-circular-card .djangocms-picture img {
    width: 100%;
    height: 100%;
  }

  .producto-description {
    margin-right: 140px;
  }
}

/* Responsive: Rango intermedio 900-1024px - Forzar alineación superior */
@media (max-width: 1024px) and (min-width: 901px) {
  .producto-image-card,
  .card.producto-image-card {
    justify-content: flex-start !important; /* FORZAR superior en este rango */
    align-items: center !important;
  }
}

/* Responsive: Tablet pequeóa / Móvil grande */
@media (max-width: 900px) {
  .hero-producto {
    height: 180px;
  }

  /* Layout de 2 columnas: Categoróas | Contenido principal */
  .producto-grid-3 {
    grid-template-columns: 200px 1fr; /* Solo 2 columnas */
    gap: calc(var(--space) * 1);
  }

  /* Imagen del producto va en la primera fila, segunda columna */
  .producto-image-card,
  .card.producto-image-card {
    grid-column: 2;
    grid-row: 1;
    padding: calc(var(--space) * 1) !important; /* Padding moderado */
    min-height: 420px; /* Ajustar altura del card */
    /* Mantener alineación superior */
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .card.producto-image-card img,
  .card.producto-image-card .cms-plugin img,
  .card.producto-image-card .djangocms-picture img,
  .producto-image-card img,
  .producto-image-card .cms-plugin img,
  .producto-image-card .djangocms-picture img {
    max-width: 100%;
    min-height: 350px !important; /* Reducir Más en tablet pequeño */
    margin: 0 auto; /* Centrar imagen */
  }

  /* Card de información va en la segunda fila, segunda columna */
  .producto-info-card {
    grid-column: 2;
    grid-row: 2;
  }

  .producto-categorias-card {
    grid-column: 1;
    grid-row: 1 / span 2; /* Ocupa ambas filas */
    font-size: 0.9rem;
  }

  .producto-circular-card {
    width: 100px;
    height: 100px;
  }

  .producto-description {
    margin-right: 0;
  }
}

/* Rango especófico 700px-900px: Mantener orden dentro del card de info */
@media (max-width: 900px) and (min-width: 701px) {
  /* Ya estó aplicado el orden desde el media query 1599px, solo ajustamos detalles */
  .producto-circular-card {
    width: 100px;
    height: 100px;
  }
}

/* Responsive: Mobile estrecho - Layout de 1 columna */
@media (max-width: 700px) {
  .hero-producto {
    height: 160px;
  }

  .hero-producto .hero-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* Ajustar el buscador para que tenga mórgenes consistentes en mobile */
  .producto-search-wrapper {
    width: 100%; /* Ya no sale del container en mobile */
    margin-left: 0; /* Reset del breakout */
    padding: 0 2.5%; /* Margen consistente con el container */
  }

  .producto-search-inner {
    width: 100%;
  }

  .producto-search-bar {
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: none; /* Sin lómite en mobile */
  }

  .producto-search-icon {
    right: 16px; /* Posición fija desde el borde derecho */
    transform: translateY(-50%); /* Solo centrado vertical */
  }

  /* Cambiar de grid a flexbox para poder usar order */
  .producto-grid-3 {
    display: flex !important;
    flex-direction: column;
    gap: calc(var(--space) * 1);
  }

  /* Orden: 1) Imagen del producto primero */
  .producto-image-card,
  .card.producto-image-card {
    order: 1;
    min-height: 320px; /* Altura del card en mobile */
    height: auto;
    padding: calc(var(--space) * 0.8) !important; /* Padding reducido en mobile */
    justify-content: flex-start !important; /* Forzar alineación superior en mobile */
    align-items: center !important;
  }

  /* Ajustar altura mónima de imagen en mobile */
  .card.producto-image-card img,
  .card.producto-image-card .cms-plugin img,
  .card.producto-image-card .djangocms-picture img,
  .producto-image-card img,
  .producto-image-card .cms-plugin img,
  .producto-image-card .djangocms-picture img {
    min-height: 300px !important; /* Tamaóo razonable para mobile */
  }

  /* Orden: 2) Información del producto */
  .producto-info-card {
    order: 2;
    height: auto;
  }

  /* Orden: 3) Sidebar de categoróas al FINAL */
  .producto-categorias-card {
    order: 3;
    position: static;
    font-size: 1rem; /* Restaurar tamaóo normal */
  }

  .producto-circular-card {
    position: static;
    margin: 0 auto calc(var(--space) * 1) auto;
    width: 140px;
    height: 140px;
  }

  .producto-description {
    margin-right: 0;
  }

  .producto-quantity-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .producto-quantity-selector {
    justify-content: center;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }

  .producto-search-bar {
    font-size: 14px;
    padding: 12px 45px 12px 16px;
  }

  .producto-search-bar::placeholder {
    font-size: 13px;
  }

  .producto-search-icon {
    width: 20px;
    height: 20px;
    right: 12px;
  }
}

/* Móvil pequeño */
@media (max-width: 480px) {
  .hero-producto {
    height: 140px;
  }

  .producto-circular-card {
    width: 120px;
    height: 120px;
    padding: 0;
  }

  .producto-circular-card img,
  .producto-circular-card .cms-plugin img,
  .producto-circular-card .djangocms-picture img {
    width: 100%;
    height: 100%;
  }

  .producto-quantity-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .producto-quantity-display {
    width: 50px;
    font-size: 15px;
  }

  .producto-add-to-cart-btn {
    padding: 12px 24px;
    font-size: 15px;
  }
}

/* Fix para scrollbar horizontal en pantallas anchas */
@media (min-width: 1200px) {
  .hero-producto {
    margin-left: calc(-50vw + 8.5px);
    margin-right: calc(-50vw + 8.5px);
  }
}

/* === Pógina de Categoróa de Productos === */

/* Hero categoróa productos - igual que hero-producto */
.hero-categoria-productos {
  position: relative;
  height: 250px;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: url('https://eos.com/wp-content/uploads/2023/11/components-of-different-types-of-fertilizers.jpg.webp') center center / cover no-repeat;
}

.hero-categoria-productos::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.hero-categoria-productos .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  margin: 0;
  pointer-events: none;
}

/* Grid de productos - 3 columnas */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 1024px) {
  .productos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .productos-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Card de producto */
.producto-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.producto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Imagen del producto */
.producto-card-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.producto-card-image a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.producto-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.producto-card-image:hover img {
  transform: scale(1.05);
}

.producto-card-placeholder {
  font-size: 4rem;
  color: #6c757d;
  text-decoration: none;
}

/* Contenido del card */
.producto-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

.producto-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  min-height: 2.8rem;
  text-align: center;
}

.producto-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.producto-card-title a:hover {
  color: var(--brand-green);
}

/* Controles de cantidad en el card */
.producto-card-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
}

.producto-card-quantity {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.producto-card-quantity-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  white-space: nowrap;
}

/* Botón aóadir en card */
.producto-card-add-btn {
  width: 100%;
  padding: 0.75rem;
  font-size: 0.9375rem;
}

/* Responsive para hero categoróa */
@media (max-width: 1024px) {
  .hero-categoria-productos {
    height: 200px;
  }
}

@media (max-width: 900px) {
  .hero-categoria-productos {
    height: 180px;
  }
}

@media (max-width: 768px) {
  .hero-categoria-productos {
    height: 160px;
  }

  .hero-categoria-productos .hero-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }

  .producto-card-image {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .hero-categoria-productos {
    height: 140px;
  }

  .producto-card-image {
    height: 180px;
  }
}

@media (min-width: 1200px) {
  .hero-categoria-productos {
    margin-left: calc(-50vw + 8.5px);
    margin-right: calc(-50vw + 8.5px);
  }
}

/* === Layout con sidebar para póginas de categoróas === */

/* Contenedor principal del layout */
.categoria-layout-con-sidebar {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}

/* Sidebar de categoróas */
.categoria-sidebar {
  position: sticky;
  top: 100px; /* Espacio para el header */
  align-self: start;
}

/* Wrapper del grid de productos */
.categoria-grid-wrapper {
  min-width: 0; /* Previene overflow en grid */
}

/* Ajustar grid de productos cuando estó junto al sidebar */
.categoria-layout-con-sidebar .productos-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0;
}

/* Responsive: Desktop medio (1200px - 1400px) - Fix para botón + cortado */
@media (max-width: 1400px) and (min-width: 1201px) {
  .categoria-layout-con-sidebar {
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
  }

  .categoria-layout-con-sidebar .productos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem; /* Reducir gap entre cards */
  }

  /* Reducir padding del card para dar Más espacio */
  .producto-card-content {
    padding: 1.25rem; /* Reducido de 1.5rem */
  }

  /* Controles ligeramente Más pequeños */
  .producto-quantity-btn {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .producto-quantity-display {
    width: 48px;
    padding: 7px;
    font-size: 14.5px;
  }

  .producto-card-quantity-label {
    font-size: 0.8125rem;
  }

  /* Tótulo ligeramente Más pequeño */
  .producto-card-title {
    font-size: 1.0625rem;
  }
}

/* Responsive: Tablet grande (1024px - 1200px) */
@media (max-width: 1200px) {
  .categoria-layout-con-sidebar {
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
  }

  .categoria-layout-con-sidebar .productos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .categoria-layout-con-sidebar {
    grid-template-columns: 250px 1fr;
    gap: 1.25rem;
  }

  .categoria-sidebar {
    top: 80px;
  }

  .categoria-layout-con-sidebar .productos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  /* Reducir tamaóos de texto en cards para evitar desbordamiento */
  .producto-card-title {
    font-size: 1rem;
    min-height: 2.5rem;
  }

  .producto-card-quantity-label {
    font-size: 0.8125rem;
  }

  /* Controles de cantidad Más pequeños */
  .producto-quantity-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .producto-quantity-display {
    width: 45px;
    padding: 6px;
    font-size: 14px;
  }

  /* Botón de aóadir Más pequeño */
  .producto-card-add-btn {
    font-size: 0.875rem;
    padding: 0.625rem;
  }
}

/* Responsive: Tablet pequeño / Mobile grande (600px - 900px) - 1 columna */
@media (max-width: 900px) {
  .categoria-layout-con-sidebar .productos-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .categoria-layout-con-sidebar {
    grid-template-columns: 240px 1fr;
    gap: 1rem;
  }
}

/* Responsive: Mobile (< 768px) - Sidebar al FINAL del grid */
@media (max-width: 768px) {
  .categoria-layout-con-sidebar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* Cambiar orden: grid primero, sidebar despuós */
    display: flex;
    flex-direction: column;
  }

  .categoria-sidebar {
    position: relative;
    top: auto;
    order: 2; /* Sidebar al final */
  }

  .categoria-grid-wrapper {
    order: 1; /* Grid primero */
  }

  .categoria-layout-con-sidebar .productos-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Hacer el sidebar Más compacto en mobile */
  .categoria-sidebar .producto-categorias-card {
    padding: 1rem;
  }

  .categoria-sidebar .producto-categorias-title {
    font-size: 1.125rem;
  }

  .categoria-sidebar .producto-categoria-subtitulo {
    font-size: 0.9375rem;
  }

  .categoria-sidebar .producto-categoria-lista {
    font-size: 0.875rem;
  }

  /* Controles de cantidad aón Más pequeños en mobile */
  .producto-quantity-btn {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .producto-quantity-display {
    width: 40px;
    padding: 5px;
    font-size: 13px;
  }

  .producto-card-quantity-label {
    font-size: 0.75rem;
  }
}

/* Responsive: Mobile pequeño (< 480px) */
@media (max-width: 480px) {
  .categoria-layout-con-sidebar {
    gap: 1rem;
  }

  /* Tótulo de card Más pequeño */
  .producto-card-title {
    font-size: 0.9375rem;
    line-height: 1.3;
    min-height: 2.4rem;
  }

  /* Controles ultra compactos */
  .producto-quantity-btn {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }

  .producto-quantity-display {
    width: 36px;
    padding: 4px;
    font-size: 12px;
  }

  .producto-card-quantity-label {
    font-size: 0.6875rem;
  }

  .producto-card-add-btn {
    font-size: 0.8125rem;
    padding: 0.5rem;
  }
}

/* ============================================
   PóGINA DE CATóLOGO
   ============================================ */

/* Hero católogo - editable desde CMS */
.hero-catalogo {
  position: relative;
  height: 250px;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* Sin background hardcodeado - se agrega desde CMS con placeholder */
  background: #f5f5f5; /* Color fallback si no hay imagen */
}

/* Placeholder ocupa todo el espacio */
.hero-catalogo .cms-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

/* Imagen del placeholder ocupa todo el hero */
.hero-catalogo img,
.hero-catalogo .djangocms-picture img,
.hero-catalogo .cms-plugin img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-catalogo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.hero-catalogo .hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  margin: 0;
  pointer-events: none;
}

/* Tótulo de católogo con lónea decorativa verde */
.catalogo-title {
  color: var(--brand-green);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: left;
}

.catalogo-title::after {
  background: var(--brand-gold);
}

/* Contenedor del visor PDF - menos margen superior */
.pdf-viewer-container {
  margin: 1.5rem 0 3rem 0;
}

.pdf-container {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background: #f5f5f5;
}

.pdf-container iframe {
  width: 100%;
  height: calc(100% + 50px);
  border: none;
  position: absolute;
  top: -50px; /* Oculta la barra superior de Google Drive */
  left: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .pdf-container {
    height: 700px;
  }
}

@media (max-width: 768px) {
  .hero-catalogo {
    height: 200px;
  }

  .catalogo-title {
    font-size: 1.5rem;
  }

  .pdf-viewer-container {
    margin: 1rem 0 2rem 0;
  }

  .pdf-container {
    height: 600px;
  }

  .pdf-container iframe {
    top: -40px;
    height: calc(100% + 40px);
  }
}

@media (max-width: 480px) {
  .hero-catalogo {
    height: 180px;
  }

  .hero-catalogo .hero-title {
    font-size: 1.75rem;
  }

  .catalogo-title {
    font-size: 1.25rem;
  }

  .pdf-container {
    height: 500px;
  }

  .pdf-container iframe {
    top: -30px;
    height: calc(100% + 30px);
  }
}

/* Ajuste para pantallas muy grandes */
@media (min-width: 1600px) {
  .pdf-container {
    height: 900px;
  }
}

/* ============================================
   BOTón FLOTANTE DE CATóLOGO
   ============================================ */

/* Botón flotante de católogo - Posición superior al carrito */
.floating-catalog-btn {
    position: fixed;
    bottom: 110px; /* Más arriba que el carrito (30px + 60px + 20px margen) */
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1e6bd6 0%, #0c4da2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(30, 107, 214, 0.3);
    z-index: 9997; /* Un nivel debajo del carrito (9998) */
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.floating-catalog-btn:hover {
    background: linear-gradient(135deg, #0c4da2 0%, #083375 100%);
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 20px rgba(30, 107, 214, 0.4);
    color: white;
}

.floating-catalog-btn:active {
    transform: scale(0.95);
}

.floating-catalog-btn i {
    font-size: 26px;
}

/* Animación de entrada */
@keyframes catalogBtnBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.floating-catalog-btn:hover i {
    animation: catalogBtnBounce 0.6s ease infinite;
}

/* Responsive: Tablet y menores */
@media (max-width: 768px) {
    .floating-catalog-btn {
        bottom: 90px; /* Ajustar para móvil (20px + 50px + 20px) */
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .floating-catalog-btn i {
        font-size: 22px;
    }
}

/* Responsive: Mobile muy pequeño */
@media (max-width: 480px) {
    .floating-catalog-btn {
        bottom: 85px;
        right: 15px;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .floating-catalog-btn i {
        font-size: 20px;
    }
}

/* Ocultar en pantallas muy pequeóas horizontales */
@media (max-height: 500px) and (orientation: landscape) {
    .floating-catalog-btn {
        bottom: 10px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .floating-catalog-btn i {
        font-size: 18px;
    }
}

/* ============================================
   BOT¢n FLOTANTE DE CARRITO DE COTIZACIONES
   ============================================ */

/* Bot¢n flotante de carrito - Posici¢n base (debajo del cat¢logo) */
.floating-cart-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #005e3d 0%, #004529 100%);
    color: white;
    border-radius: 50%;
    display: none; /* Oculto por defecto, se muestra con JS */
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 94, 61, 0.3);
    z-index: 9998; /* Por encima del cat¢logo (9997) */
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    animation: slideInRight 0.3s ease-out;
}

.floating-cart-btn:hover {
    background: linear-gradient(135deg, #007a4d 0%, #005e3d 100%);
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 94, 61, 0.4);
    color: white;
}

.floating-cart-btn:active {
    transform: scale(0.95);
}

.floating-cart-btn i {
    font-size: 26px;
}

/* Badge del carrito */
.floating-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Animaci¢n de entrada */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes cartBtnBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.floating-cart-btn:hover i {
    animation: cartBtnBounce 0.6s ease infinite;
}

/* Responsive: Tablet y menores */
@media (max-width: 768px) {
    .floating-cart-btn {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .floating-cart-btn i {
        font-size: 22px;
    }

    .floating-cart-badge {
        width: 20px;
        height: 20px;
        font-size: 11px;
        top: -3px;
        right: -3px;
    }
}

/* Responsive: Mobile muy peque¢o */
@media (max-width: 480px) {
    .floating-cart-btn {
        bottom: 15px;
        right: 15px;
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .floating-cart-btn i {
        font-size: 20px;
    }

    .floating-cart-badge {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }
}

/* Ocultar en pantallas muy peque¢as horizontales */
@media (max-height: 500px) and (orientation: landscape) {
    .floating-cart-btn {
        bottom: 10px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .floating-cart-btn i {
        font-size: 18px;
    }

    .floating-cart-badge {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

/* ============================================
   LAZY LOADING PROGRESIVO DE CARRUSELES
   ============================================ */

/* Mostrar skeleton loader en carruseles no cargados */
.cat-band:not(.carousel-loaded) .carousel-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 60px;
    right: 60px;
    height: 300px;
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    border-radius: 12px;
    z-index: 1;
    pointer-events: none;
}

/* Skeleton loader con shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Ocultar skeleton cuando est¢ cargado */
.cat-band.carousel-loaded .carousel-wrap::after {
    display: none;
}

/* Animaci¢n fadeIn para im¢genes cuando se cargan */
.cat-band .icon-carousel img {
    transition: opacity 0.4s ease-out;
}

/* Animaci¢n del carrusel completo al cargar */
.cat-band.carousel-loaded .icon-carousel {
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive: ajustar skeleton en mobile */
@media (max-width: 768px) {
    .cat-band:not(.carousel-loaded) .carousel-wrap::after {
        left: 0;
        right: 0;
    }
}

/* ========================================================================
   CARRUSEL DE PRODUCTOS DESTACADOS - RESPONSIVE QUIR¢RGICO
   Selector espec¢fico: .wide-carousel .icon-carousel .product-card
   NO afecta otros carruseles ni elementos globales
   ======================================================================== */
/* --- CONFIGURACI¢n BASE DEL CARRUSEL DE PRODUCTOS --- */
.wide-carousel .icon-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 16px !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 10px !important;
}
.wide-carousel .icon-carousel::-webkit-scrollbar {
    display: none !important;
}
/* --- CARD BASE (NO SE COMPRIME, MANTIENE TAMA¢O FIJO) --- */
.wide-carousel .icon-carousel .card.product-card {
    flex: 0 0 auto !important; /* NO crece ni se encoge */
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-width: 0 !important; /* Evita problemas de overflow */
}

/* --- ASPECT RATIO VERTICAL PARA SACOS DE FERTILIZANTES --- */
.wide-carousel .icon-carousel .card.product-card .thumb {
    aspect-ratio: 3 / 4 !important; /* Proporci¢n vertical para sacos */
    width: 100% !important;
    height: auto !important;
}
/* ========================================================================
   RESPONSIVE: CANTIDAD DE CARDS VISIBLES POR BREAKPOINT
   ======================================================================== */
/* --- DESKTOP EXTRA LARGE (>= 1400px): 5 PRODUCTOS --- */
@media (min-width: 1400px) {
    .wide-carousel .icon-carousel .card.product-card {
        width: calc((100% - 64px) / 5) !important; /* 5 cards, 16px gap entre cada una */
        max-width: 322px !important; /* 280px + 15% = 322px */
    }
}
/* --- DESKTOP LARGE (1200px - 1399px): 4 PRODUCTOS --- */
@media (min-width: 1200px) and (max-width: 1399px) {
    .wide-carousel .icon-carousel .card.product-card {
        width: calc((100% - 48px) / 4) !important; /* 4 cards, 16px gap entre cada una */
        max-width: 322px !important; /* 280px + 15% = 322px */
    }
}
/* --- DESKTOP MEDIUM (992px - 1199px): 3 PRODUCTOS --- */
@media (min-width: 992px) and (max-width: 1199px) {
    .wide-carousel .icon-carousel .card.product-card {
        width: calc((100% - 32px) / 3) !important; /* 3 cards, 16px gap entre cada una */
        max-width: 345px !important; /* 300px + 15% = 345px */
    }
}
/* --- TABLET (768px - 991px): 2 PRODUCTOS --- */
@media (min-width: 768px) and (max-width: 991px) {
    .wide-carousel .icon-carousel .card.product-card {
        width: calc((100% - 16px) / 2) !important; /* 2 cards, 16px gap */
        max-width: 368px !important; /* 320px + 15% = 368px */
    }
}
/* --- MOBILE LARGE (576px - 767px): 2 PRODUCTOS PEQUE¢OS --- */
@media (min-width: 576px) and (max-width: 767px) {
    .wide-carousel .icon-carousel .card.product-card {
        width: calc((100% - 16px) / 2) !important; /* 2 cards m¢s compactas */
        max-width: 299px !important; /* 260px + 15% = 299px */
    }
}
/* --- MOBILE SMALL (< 576px): 1 PRODUCTO CENTRADO --- */
@media (max-width: 575px) {
    .wide-carousel .icon-carousel .card.product-card {
        width: calc(100% - 32px) !important; /* 1 card casi a pantalla completa */
        max-width: 391px !important; /* 340px + 15% = 391px */
        margin: 0 16px !important;
    }
    /* Scroll snap para mejor UX en mobile */
    .wide-carousel .icon-carousel {
        scroll-snap-type: x mandatory !important;
        padding: 0 !important;
    }
    .wide-carousel .icon-carousel .card.product-card {
        scroll-snap-align: center !important;
    }
}
/* ========================================================================
   FLECHAS DE NAVEGACI¢n - OCULTAR SOLO EN MOBILE MUY PEQUE¢O
   ======================================================================== */
@media (max-width: 600px) {
    .wide-carousel .carousel-nav {
        display: none !important;
    }
}

/* ========================================================================
   M¢RGENES LATERALES CONSISTENTES PARA EL CARRUSEL
   ======================================================================== */
.wide-carousel .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* En pantallas medianas y peque¢as, mantener m¢rgenes consistentes */
@media (max-width: 1199px) {
    .wide-carousel .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 767px) {
    .wide-carousel .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Ajustar el carousel-wrap para compensar el padding del container */
.wide-carousel .carousel-wrap {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

@media (max-width: 767px) {
    .wide-carousel .carousel-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}
/* ========================================================================
   ASEGURAR QUE LAS IM¢GENES SE MANTENGAN CORRECTAS
   ======================================================================== */
.wide-carousel .icon-carousel .card.product-card .thumb img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    padding: 4px !important; /* Padding m¢nimo para im¢genes m¢s grandes */
}
/* ========================================================================
   FIN DEL CSS QUIR¢RGICO DEL CARRUSEL DE PRODUCTOS DESTACADOS
   ======================================================================== */

/* ========================================================================
   TESTIMONIAL SLIDER PLUGIN - CSS AISLADO
   ======================================================================== */

/* Contenedor principal del slider - debe respetar las dimensiones del band */
#testimonial-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Ocultar todo overflow para eliminar scrollbar */
    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave de altura */
}

/* Wrapper de los slides - flex horizontal con transición */
#testimonial-slider-wrapper {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    position: relative; /* Asegurar contexto de posicionamiento */
    font-size: 0; /* Eliminar espacios entre inline-block que pueden causar líneas */
}

/* Cada slide individual - ocupa 100% del ancho */
.testimonial-slide-item {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 100%; /* Asegurar que cada slide ocupe exactamente el 100% */
    display: block; /* Forzar display block para evitar conflictos con flex del wrapper */
    box-sizing: border-box;
    position: relative; /* Posicionamiento relativo para el contenido */
    font-size: 1rem; /* Restaurar font-size normal para el contenido */
}

/* Container de testimonio con layout grid (sin usar clase .container de Bootstrap) */
.testi-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0; /* Sin gap para que la imagen pegue al borde */
    align-items: stretch; /* Estirar para que ocupen todo el alto */
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    min-height: 450px; /* Altura mínima para evitar saltos en carga inicial */
}

/* Stack del testimonio - contiene título, texto y autor */
.testi-wrapper .stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 2rem 2rem 3rem; /* Padding izquierdo (3rem) */
    justify-content: center; /* Centrar verticalmente el contenido */
}

/* Imagen del testimonio - ocupa absolutamente todo el espacio del grid */
.testi-wrapper .thumb {
    width: 100%;
    height: 100%; /* 100% del espacio asignado por el grid */
    overflow: hidden;
    border-radius: 0; /* Sin bordes redondeados */
    box-shadow: none;
    margin: 0;
    padding: 0; /* Sin padding en ningún lado */
    display: block; /* Display block en lugar de flex */
    position: relative; /* Para que la imagen absoluta funcione */
}

.testi-wrapper .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubrir todo el espacio */
    object-position: center;
    display: block;
    position: absolute; /* Posición absoluta para cubrir todo el contenedor */
    top: 0;
    left: 0;
}

/* Responsive para testimonios - colapsar en móvil */
@media (max-width: 900px) {
    .testi-wrapper {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        min-height: auto; /* Sin altura mínima en móvil */
    }

    .testi-wrapper .thumb {
        order: -1; /* Imagen arriba en móvil */
        height: 300px; /* Altura fija en móvil/tablet */
        position: relative;
    }

    .testi-wrapper .thumb img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .testi-wrapper .stack {
        padding: 1.5rem 1.5rem; /* Mantener padding horizontal equilibrado */
    }

    /* Reducir tamaño de texto en tablets */
    .txt-testimonio {
        font-size: clamp(0.95rem, 0.8vw + 0.75rem, 1.15rem);
    }

    /* Posición de bullets - mantener en el borde inferior */
    .testimonial-dots {
        bottom: 0;
        padding: 0.75rem 0;
    }
}

@media (max-width: 600px) {
    .testi-wrapper .stack {
        padding: 1rem 1rem; /* Padding equilibrado en móvil */
        gap: 1rem;
    }

    .testi-wrapper .thumb {
        height: 250px; /* Altura fija menor en móvil */
    }

    /* Reducir más el tamaño de texto en móviles */
    .txt-testimonio {
        font-size: clamp(0.9rem, 0.7vw + 0.7rem, 1.05rem);
        font-weight: 300; /* Más ligero en móvil */
    }

    /* Posición de bullets - mantener en el borde inferior */
    .testimonial-dots {
        bottom: 0;
        padding: 0.5rem 0;
    }
}

/* Controles de navegación - Flechas - OCULTOS (solo usamos bullets) */
.testimonial-nav {
    display: none !important; /* Ocultamos las flechas, solo usamos bullets */
}

/* Dots de navegación - posicionados absolutamente para que no afecten el layout */
.testimonial-dots {
    position: absolute;
    bottom: 0; /* En el borde inferior del container */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 1rem 0; /* Padding interno para separación visual */
    list-style: none;
    z-index: 10;
    background: transparent;
}

/* Agregar padding al band que contiene el slider de testimonios para dar espacio a los bullets */
.band:has(#testimonial-slider-container) {
    padding-top: 0 !important; /* Sin padding superior */
    padding-bottom: 0 !important; /* Sin padding extra, los bullets están dentro del container */
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Completamente circular */
    background-color: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.testimonial-dot:hover {
    background-color: #999;
}

.testimonial-dot.active {
    background-color: #005e3d;
    width: 28px; /* Más ancho cuando está activo */
    height: 10px;
    border-radius: 5px; /* Bordes redondeados solo en las puntas (cápsula) */
}

/* Ocultar dots cuando hay solo 1 slide */
.testimonial-dots.hidden {
    display: none !important;
}

/* Responsive - Tablets */
@media (max-width: 1024px) {
    .testimonial-nav {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }

    .testimonial-nav.prev {
        left: 15px;
    }

    .testimonial-nav.next {
        right: 15px;
    }

    .testimonial-dots {
        margin-top: 1.5rem;
        gap: 8px;
    }

    .testimonial-dot {
        width: 8px;
        height: 8px;
    }

    .testimonial-dot.active {
        width: 24px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .testimonial-nav {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    .testimonial-nav.prev {
        left: 10px;
    }

    .testimonial-nav.next {
        right: 10px;
    }

    .testimonial-dots {
        margin-top: 1.25rem;
        gap: 6px;
    }

    .testimonial-dot {
        width: 7px;
        height: 7px;
    }

    .testimonial-dot.active {
        width: 20px;
    }
}

/* ========================================================================
   FIN DEL CSS DEL TESTIMONIAL SLIDER
   ======================================================================== */

/* ======================================================
   POST DETALLADO
   ====================================================== */

.pd-wrapper {
    background-color: #f9f8f4;
    font-family: 'Inter', sans-serif;
    color: #2c2c2c;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    z-index: 0;
}

.pd-hero {
    width: 100%;
    height: 80vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background-color: #1a3d2e;
}

.pd-hero .hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
}

.pd-hero .hero-bg-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-content-wrapper {
    position: relative;
    padding: 60px;
    max-width: 900px;
    z-index: 2;
}

@media (min-width: 1200px) {
    .hero-content-wrapper {
        max-width: 1200px;
    }
}

.pd-hero-categoria {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
    color: #c5e1a5;
    font-weight: 600;
    margin-bottom: 10px;
}

.pd-hero-titulo {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 8vw, 80px);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 20px;
}

.pd-hero-subtitulo {
    color: #fff;
    font-size: 18px;
    max-width: 600px;
    font-style: italic;
    opacity: 0.9;
}

.editorial-main {
    max-width: 1600px;
    margin: 80px auto;
    padding: 0 20px;
}

.editorial-main img {
    max-width: 100%;
    height: auto;
    display: block;
}

.pd-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.pd-col-left {
    flex: 1;
    min-width: 300px;
}

.intro-text-wrapper {
    font-size: 20px;
    color: #4a4a4a;
}

.intro-text-wrapper p:first-of-type::first-letter {
    float: left;
    font-family: 'Playfair Display', serif;
    font-size: 85px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 12px;
    color: #2e7d32;
}

.contenido-adicional {
    margin-top: 30px;
}

.pd-col-right {
    flex: 1;
    min-width: 300px;
    margin-top: 40px;
}

.side-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    filter: grayscale(20%);
    display: block;
}

.pd-leyenda {
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 10px;
    color: #888;
    border-left: 2px solid #2e7d32;
    padding-left: 10px;
}

.pd-cita-section {
    margin-top: 120px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
}

.pd-cita {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 24px;
    color: #1a3d2e;
    border-top: 1px solid #d4d4d4;
    padding-top: 20px;
}

.pd-impacto {
    font-size: 18px;
    color: #333;
}

.pd-footer {
    padding: 60px 20px;
    background: #fff;
    text-align: center;
    border-top: 1px solid #eee;
}

.pd-footer-texto {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
}

/* ======================================================
   FIN POST DETALLADO
   ====================================================== */

/* Google Maps embed plugin */
.google-maps-embed {
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0; /* elimina espacio inline bajo el iframe */
}
.google-maps-embed iframe {
    width: 100%;
    display: block;
    border: 0;
}
@media (max-width: 767px) {
    .google-maps-embed iframe {
        height: 280px !important; /* altura reducida en móvil */
    }
}

/* ==============================================
   Map Tabs Plugin
   ============================================== */

/* Contenedor: grid sidebar-nav + contenido */
.maptabs {
    display: grid;
    grid-template-columns: minmax(min-content, max-content) 1fr;
    grid-template-rows: auto;
    gap: 1.5rem;
    align-items: start;
}
.maptabs-select { display: none; } /* oculto en desktop */

/* Nav vertical (sidebar) */
.maptabs-nav {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.maptabs-nav .nav-link {
    text-align: left;
    color: #005e3d;
    border-radius: 4px;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
    border: 1.5px solid #005e3d;
    background: transparent;
}
.maptabs-nav .nav-link:hover,
.maptabs-nav .nav-link.active {
    background: #005e3d;
    color: #fff;
    border-color: #005e3d;
}

/* Área de contenido */
.maptabs-content { min-height: 200px; }

/* Item: texto + mapa lado a lado */
.maptabs-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.maptabs-item--has-map {
    /* --map-w viene del inline style del template; el media query puede sobrescribir esto */
    grid-template-columns: 1fr var(--map-w, 500px);
    align-items: start;
}
.maptabs-map {
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    border: 1px solid var(--line);
}
.maptabs-map iframe {
    width: 100%;
    display: block;
    border: 0;
}

/* Pantallas intermedias: mapa pasa debajo del texto */
@media (max-width: 1400px) {
    .maptabs-item--has-map {
        grid-template-columns: 1fr;
    }
    .maptabs-map {
        width: 100%;
    }
    .maptabs-map iframe {
        height: 280px;
    }
}

/* Móvil: select visible, nav oculto */
@media (max-width: 767px) {
    .maptabs {
        grid-template-columns: 1fr;
    }
    .maptabs-select {
        display: block;
    }
    .maptabs-nav {
        display: none;
    }
}