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

/* Prevenir scroll horizontal en toda la página */
html {
    overflow-x: clip; /* clip en vez de hidden: evita scroll horizontal SIN romper position: sticky */
    max-width: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: clip; /* clip en vez de hidden: evita scroll horizontal SIN romper position: sticky */
    max-width: 100%;
    position: relative;
    background-color: #ffffff;
}

: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)}
/* Los hijos de un grid no se achican por debajo del ancho de su contenido
   por defecto (min-width:auto implícito) — eso hacía que textos/filas de
   botones largos empujaran el track más allá del viewport, y como el sitio
   usa overflow-x:clip (a propósito, para evitar scroll horizontal), ese
   exceso quedaba cortado en silencio en vez de que el texto/los botones
   saltaran de línea. min-width:0 permite que sí se achiquen y ajusten. */
.stack > * { min-width: 0; }

.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,
.navbar-nav .nav-link--active::before {
    width: 100%;
}

/* Chevron hacia abajo en dropdowns del navbar */
.navbar-nav .dropdown-toggle::after {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    border-top: 0 !important;
    border-left: 0 !important;
    transform: rotate(45deg) !important;
    margin-left: 5px !important;
    margin-bottom: 3px !important;
    vertical-align: middle !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: 48px; /* +20% sobre 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;
    z-index: 1;        /* Stacking context: contiene z-index de .cms-plugin bajo el tabs-wrapper */
    overflow: hidden;  /* Evita que wrappers del CMS edit mode desborden y generen scrollbar */
    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;
}

/* 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: -50vw;
        margin-right: -50vw;
    }
}

/* Oculta scrollbar horizontal global si persiste (fix final) */
body {
    overflow-x: clip;  /* clip: oculta scroll horizontal sin romper position: sticky */
}

/* 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 nav.navbar {
    height: 100%;
}

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: 1.2rem;  /* Normal — 2 niveles sobre 1rem */
    color: #005e3d !important;
    transition: font-size 0.3s ease, color 0.3s ease;
}

header.scrolled .nav-link {
    font-size: 1rem;  /* 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);
    }
    /* Split: texto navega, chevron abre dropdown */
    .nav-mobile-split {
        display: flex;
        align-items: center;
    }
    .nav-mobile-split .nav-link {
        flex: 1;
    }
    .nav-mobile-chevron {
        background: none;
        border: none;
        padding: 0.25rem 0.75rem;
        font-size: 1.4rem;
        color: #005e3d;
        line-height: 1;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    .nav-mobile-chevron[aria-expanded="true"] {
        transform: rotate(90deg);
    }
    /* El menú base tiene opacity:0/visibility:hidden para animación desktop;
       en móvil hay que revertirlos cuando .show está activo */
    .navbar .dropdown-menu.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: block !important;
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 0.5rem;
    }

    /* Padding y ancho del menú móvil desplegado */
    .navbar-nav.d-lg-none {
        padding: 0.5rem 1.25rem;
        width: 100%;
    }

    .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;
    border-radius: 50px;
    background: #007a4d;
    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: #005e3d;
    transform: translateY(-2px);  /* Levanta sutil al hover */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3);  /* Sombra Más grande */
}

/* ── Hero Carousel Plugin ─────────────────────────────────────────────── */

/* Imagen de fondo del slide */
.hero .hero-slide-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Contenedor del video de fondo */
.hero-slide-video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* iframe cubre el slide con técnica 16:9 */
.hero-slide-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100vh * 16 / 9);
    min-width: 100%;
    height: calc(100vw * 9 / 16);
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}

/* Video local: object-fit cover para evitar barras negras/grises */
.hero-slide-video-bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

/* Zona de contenido libre encima del fondo */
.hero-slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    z-index: 3;
    color: white;
}
.hero-slide-content--center { justify-content: center; }
.hero-slide-content--left   { justify-content: flex-start; padding-left: 5%; }
.hero-slide-content--right  { justify-content: flex-end;  padding-right: 5%; }

/* Resetear el caption-inner del hero original cuando está dentro del plugin */
.hero-slide-content .caption-inner {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    max-width: 600px;
}
.hero-slide-content--left  .caption-inner { text-align: left; }
.hero-slide-content--right .caption-inner { text-align: right; }
.hero-slide-content--center .caption-inner { text-align: center; }

/* ── fin Hero Carousel Plugin ─────────────────────────────────────────── */


/* Franja translucida que monta sobre el hero. Antes este bloque arrastraba
   tambien las pills y el carrusel hacia arriba, tapando la parte baja del hero
   (incluidos sus indicadores). Ahora solo sube la franja con el titulo: el
   carrusel arranca limpio, por debajo del hero. */
.hero-overlay-band {
    margin-top: -80px;   /* Invasion al hero desde abajo */
    position: relative;
    z-index: 10;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.32);
    border-radius: 40px 40px 0 0;
    padding: 1.15rem 0 1.35rem;
}

/* Los indicadores del hero viven pegados al borde inferior, justo donde la
   franja translucida monta sobre el hero, asi que quedaban tapados por ella
   (la franja va en z-index 10 y ellos en 2). Se suben por encima de la franja
   para que sigan siendo visibles y clicables. */
.hero .carousel-indicators {
    bottom: 92px;
}

/* Tabs + carrusel: ya sin invasion, empiezan donde termina la franja */
.tabs-wrapper {
    position: relative;
    text-align: center;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.32);
    padding-top: 0.25rem;
    padding-bottom: 1rem;  /* el disclaimer ocupa el espacio que antes era padding */
}

/* Disclaimer debajo del carrusel del home — pegado al carrusel, no agranda el gap inferior */
.home-carousel-disclaimer {
    margin: 0;
    padding-top: 6px;
    text-align: center;
    font-size: 0.85rem;
    color: #5a6a72;
}

/* Disclaimer debajo del carrusel de categorías en /soluciones/ */
.soluciones-carousel-disclaimer {
    margin: 0.5rem 0 0 0;
    text-align: center;
    font-size: 0.85rem;
    color: #5a6a72;
}

/* ── Banner CMS editable (entre tabs y propuestas de valor) ──────────────
   Usar plugin de Texto en el placeholder para contenido responsive.
   El estilo visual (borde verde, esquinas) lo da este CSS.
   ─────────────────────────────────────────────────────────────────────── */
.home-banner-section {
    padding-top: 0;
    padding-bottom: 2rem;
}
.home-banner-cms {
    border: 2px solid var(--primary, #005f3d);
    border-radius: var(--radius, 12px);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80px;          /* altura mínima; crece con el contenido */
    color: #005f3d;            /* verde corporativo del aviso */
}

/* Texto dentro del banner */
.home-banner-cms p,
.home-banner-cms span,
.home-banner-cms div {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: inherit;
}

@media (max-width: 768px) {
    .home-banner-cms {
        padding: 1rem 1.25rem;
        font-size: 0.9rem;
    }
}
@media (max-width: 480px) {
    .home-banner-cms {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }
}
/* Botones tabs (rounded, active verde, no active blanco/verde como Haifa) */
.pill.tab {
    background: #e8f5ee;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    border: 1px solid #005e3d;
    color: #005e3d;
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    font-size: 1rem;
    min-width: 200px;
}

.pill.tab.active {
    background: #005e3d;
    border-color: #005e3d;
    color: white;
}

.pill.tab.active::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #005e3d;
    margin-top: -1px;
}

.pill.tab:hover {
    background: #005e3d;
    color: white;
}

.pill.tab:hover.active {
    background: #004a31;
}

@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: #ffffff;
    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 72px; /* Espacio para las flechas a los costados (72px = flecha 45px + 27px aire) */
}

.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:#ffffff;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}

/* Propuestas de valor — ajustes de imagen, espacio y padding */
.value-props-section .row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 2rem;
}
.value-props-section .card {
  padding: calc(var(--space) * 0.75) !important;
}
.value-props-section .card-body {
  --bs-card-spacer-x: 0.75rem;
  --bs-card-spacer-y: 0.75rem;
  padding: 0 !important;
}
.value-props-section .card-body img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 0.75rem;
}

.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;
    padding-left: 1.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:#f8f9fa}
.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:#ffffff}

/* 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: #ffffff !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:#ffffff;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;
    -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{text-align:center;padding:14px;border:1px solid var(--line);border-radius:12px;background:#ffffff;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:130px;border-radius:10px;border:none;background:#ffffff;margin-bottom:6px;position:relative}

/* Badge "Nuevo" / "Últimas unidades" en esquina de imagen */
.badge-nuevo {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #005e3d;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
}
/* Badge "Últimas unidades" — esquina superior izquierda, rojo */
.badge-ultimas {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #c0392b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
}

/* Chips de badges bajo el nombre del producto */
.producto-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 4px;
}
.badge-chip {
    display: inline-block;
    background: #e8f5ee;
    color: #005e3d;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
}
.product-body .producto-card-badges {
    margin-top: 4px;
}
@media (min-width: 992px) {
    .badge-nuevo, .badge-ultimas { font-size: 0.83rem; }
}
/* En pantallas medianas-grandes los badges salen a los laterales de la imagen */
@media (min-width: 1200px) and (max-width: 1600px) {
    /* El card permite overflow, es el contexto de posicionamiento y da espacio lateral */
    .producto-card {
        position: relative;
        overflow: visible;
        padding-left: 8px;
        padding-right: 8px;
    }
    /* La imagen pasa a contexto estático: las badges se posicionan relativas al card */
    .producto-card-image {
        position: static;
        overflow: hidden;
    }
    /* Nuevo → lado derecho del card, alineado al top de la imagen */
    .badge-nuevo {
        top: 14px;
        right: -6px;
        transform: none;
    }
    /* Últimas unidades → lado izquierdo del card */
    .badge-ultimas {
        top: 14px;
        left: -6px;
        transform: none;
    }
}

/* 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 {
    padding: 0.5rem !important;
}
.card.product-card .product-body {
    padding: 0.25rem 0.25rem 0.15rem;
    text-align: center;
    /* flex:1 + centrado vertical: cuando la card no tiene descripción ni
       badges (solo el título), el título queda centrado en el espacio
       disponible en vez de pegado arriba con un hueco enorme antes del
       botón "Ver más" (que sigue anclado abajo con margin-top:auto). */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.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.3rem 0.5rem 0.3rem;
    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: #ffffff;
    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:1fr 1fr;gap:24px;align-items:stretch}
@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: 132px;  /* 110px × 1.2 (+20% desktop) */
    /* --------------------------------------------- */

    width: 144px;   /* 120px × 1.2 (+20% desktop) */

    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 {
    top: 0 !important;       /* Rasa con el borde superior del header */
    height: 95% !important;  /* Fuerza a medir 80px exactos */
    width: 96px !important;  /* +20% para logo sticky en pantalla grande */

    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 992-1199px: logo ampliado, título centrado entre logo y borde inferior
   Logo: top:8px + height:94px = termina en ~102px sobre hero de ~250px
   Centro entre logo y fondo: (102+250)/2 ≈ 176px = 70% del hero */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .logo-badge {
        height: 94px !important;
        width: 116px !important;
        top: 8px !important;
    }
    [class*="hero-"] .hero-title {
        top: 70% !important;
        font-size: clamp(1.4rem, 3.5vw, 2.5rem) !important;
    }
}

/* 5. Desktop ≥1200px: título centrado en la mitad inferior del hero */
@media (min-width: 1200px) {
    [class*="hero-"] .hero-title {
        top: 70% !important;
    }
}

/* 5d. Móvil/tablet < 992px: logo-badge oculto → título centrado en la ZONA VISIBLE del hero.
   El header (60px) cubre la parte superior del hero, así que no se usa top:50%.
   Hero 140px → centro visible = 60 + (140-60)/2 = 100px = ~71%
   Hero 160px → centro visible = 60 + (160-60)/2 = 110px = ~69%
   Se usa top:70% como punto medio razonable para ambos tamaños. */
@media (max-width: 991.98px) {
    [class*="hero-"] .hero-title {
        top: 70% !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* 5b. hero-producto: anclar título al fondo, fuente reducida para evitar colisión con logo-badge */
@media (min-width: 992px) {
    .hero-producto .hero-title {
        top: auto !important;
        bottom: 18% !important;
        transform: translateX(-50%) !important;
        font-size: clamp(1.4rem, 2.8vw, 2.2rem) !important;
    }
}

/* 5b-tablet: hero-producto en 992-1199px: centrar entre logo-badge y borde inferior */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .hero-producto .hero-title {
        top: 75% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* 5c. hero-producto en tablet/móvil (≤991px): fuente compacta, centrado vertical heredado de 5d */
@media (max-width: 991.98px) {
    .hero-producto .hero-title {
        font-size: clamp(1rem, 3.5vw, 1.6rem) !important;
        /* top:50% y transform:translate(-50%,-50%) vienen de la regla 5d */
    }
}

/* 6. 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 MÓVILES — flechas discretas como indicadores + dots funcionales */
@media (max-width: 767px) {
    /* El wrap contiene el overflow para que no se extienda más allá del viewport */
    .carousel-wrap {
        padding: 0 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Flechas: visibles pero pequeñas, sin funcionalidad (pointer-events:none),
       solo indican que el carrusel es deslizable */
    .carousel-nav {
        display: flex !important;
        pointer-events: none !important;
    }
    .carousel-btn {
        display: flex !important;
        width: 30px !important;
        height: 56px !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.75) !important;
        box-shadow: none !important;
        font-size: 1.2rem !important;
        color: #444 !important;
        pointer-events: none !important;
        opacity: 0.85;
    }
    .carousel-btn:hover {
        transform: none !important;
        background: rgba(255, 255, 255, 0.6) !important;
        box-shadow: none !important;
    }

    /* Dots: visibles solo en móvil */
    .carousel-dots { display: flex !important; }
}

/* Dots de navegación — ocultos en desktop, el JS los genera fuera del carousel-wrap */
.carousel-dots {
    display: none;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    max-width: 100%;
}
.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.carousel-dot.active {
    background: #005e3d;
    transform: scale(1.25);
}

/* 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: none !important;
    background: #ffffff !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: auto;
    min-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
   ======================================== */

/* 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: 1.5rem 1rem 0.75rem 1rem;  /* más aire arriba; separación hacia la miniatura */
    background-color: #ffffff;
    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);
}

/* TikTok: miniatura vertical 9:16 sin recorte */
.card-video-simple--tiktok img {
    height: auto;
    aspect-ratio: 9 / 16;
}

.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 .video-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    background: #005f3d;
    color: #fff;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, transform 0.15s ease;
}

.card-video-simple:hover .video-play-btn {
    background: #004a30;
    transform: translateY(-1px);
}

/* ======================================================
   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: #005e3d;
    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: #005e3d;
    color: white;
}

.btn-email:hover {
    background: #004a30;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 94, 61, 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: #005e3d;
    color: #005e3d;
}

@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;
}


/* Los pasos de 1024px y 900px se repiten aca a proposito. Ya estaban definidos
   mas arriba (junto a .hero-notas), pero despues de eso hay una segunda regla
   base `.hero-cultivos { height: 250px }` y, como las media queries no suman
   especificidad, esa regla tardia las anulaba: el hero de cultivos se quedaba en
   250px entre 769px y 1024px mientras el resto del sitio bajaba a 200/180px. */
@media (max-width: 1024px) {
  .hero-cultivos {
    height: 200px;
  }
}

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

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

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


/* Carruseles de cultivos: flex-start por defecto; JS centra si no hay overflow */
#c-tab-andinos .icon-carousel,
#c-tab-costa .icon-carousel,
#c-tab-selva .icon-carousel {
  justify-content: flex-start;
  scroll-behavior: auto !important;
}

/* Cultivos carruseles: 7 items por fila en desktop */
@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% - 72px) / 7) !important;
  }
}

/* Cultivos carruseles: altura fija en tablet/móvil para evitar imágenes enormes */
@media (max-width: 1199px) {
  #c-tab-andinos .icon-carousel .icon-card .thumb,
  #c-tab-costa .icon-carousel .icon-card .thumb,
  #c-tab-selva .icon-carousel .icon-card .thumb {
    height: 80px !important;
    aspect-ratio: unset !important;
  }
  #c-tab-andinos .icon-carousel .icon-card .thumb img,
  #c-tab-costa .icon-carousel .icon-card .thumb img,
  #c-tab-selva .icon-carousel .icon-card .thumb img {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 4px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ===== 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;
}

/* Badge de unidad (TM) junto al selector en la página de cotización */
.quote-cart-qty-unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0.4rem 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background-color: #fff;
  font-weight: 600;
  color: #006747;
  white-space: nowrap;
}

.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(500px, 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;
}

/* Dropdown de resultados de búsqueda */
.producto-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 2px solid var(--brand-gold);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  overflow: hidden;
  display: none; /* JS controla la visibilidad */
}

.producto-search-results.open {
  display: block;
}

.producto-search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}

.producto-search-result-item:last-child {
  border-bottom: none;
}

.producto-search-result-item:hover,
.producto-search-result-item:focus {
  background: #f0f8f4;
  color: #005f3d;
  outline: none;
}

.producto-search-result-item svg {
  flex-shrink: 0;
  color: #005f3d;
  opacity: 0.6;
}

.producto-search-no-results {
  padding: 14px 18px;
  color: #888;
  font-size: 0.9rem;
  text-align: center;
}

/* ==========================================================
   BUSCADOR DE CULTIVOS (página /cultivos/<slug>/)
   Réplica visual exacta del buscador de productos de arriba
   (.producto-search-*), con su propio prefijo de clase porque
   busca cultivos, no productos fertilizantes.
   ========================================================== */
.cultivo-search-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-bottom: calc(var(--space) * 1.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.cultivo-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;
}

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

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

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

.cultivo-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 2px solid var(--brand-gold);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  overflow: hidden;
  display: none;
}

.cultivo-search-results.open {
  display: block;
}

.cultivo-search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}

.cultivo-search-result-item:last-child {
  border-bottom: none;
}

.cultivo-search-result-item:hover,
.cultivo-search-result-item:focus {
  background: #f0f8f4;
  color: #005f3d;
  outline: none;
}

.cultivo-search-result-item svg {
  flex-shrink: 0;
  color: #005f3d;
  opacity: 0.6;
}

.cultivo-search-no-results {
  padding: 14px 18px;
  color: #888;
  font-size: 0.9rem;
  text-align: center;
}

/* Scroll automático al detalle del producto al cargar la página */
#producto-detalle {
    scroll-margin-top: 90px; /* Compensa el header fijo (~80px) + 10px de aire */
}

/* Grid de 3 columnas para producto */
.producto-grid-3 {
  display: grid;
  grid-template-columns: 300px 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;
  /* Más ancho util para subtitulos largos sin afectar otras cards */
  padding-left: calc(var(--space) * 1.1) !important;
  padding-right: calc(var(--space) * 1.1) !important;
}

.producto-categorias-title {
  color: #006747;
  font-size: 1.65rem;
  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: 1.25rem;
  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: 1.2rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
}

.producto-categoria-lista a:hover,
.producto-categoria-lista a.active {
  background-color: #005e3d;
  color: #fff;
  text-decoration: none;
}

/* 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 */
  align-self: start; /* NO estirarse a la altura del card de info: hugea la imagen */
  min-height: 0;
  padding: calc(var(--space) * 1.5) !important;
  overflow: visible;
  position: relative;
}

/* Card de imagen FIJO (sticky) mientras se hace scroll por la info técnica.
   Solo en el layout de 3 columnas (≥901px), donde el card está al lado de la
   información. En pantallas chicas se apila y NO se fija (no hace falta). */
@media (min-width: 901px) {
  .producto-image-card,
  .card.producto-image-card {
    position: sticky;
    top: calc(var(--kb-nav-y, 16px) + var(--kb-pill-h, 60px) + 16px); /* libra el navbar flotante */
    align-self: start; /* imprescindible para que el sticky tenga recorrido dentro del grid */
  }
}

/* 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 {
  /* Cuadrado responsivo: alto = ancho de la columna (forma de la imagen promedio 600x600) */
  width: 100% !important;
  max-width: 600px !important; /* no superar el tamaño nativo */
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-height: none !important;
  min-height: 0 !important;
  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;
  padding-top: 0.5rem; /* Mínimo para subir título y card circular hacia el borde superior */
}

/* Wrapper del card circular: toma el rol de posicionamiento (flotante/grid/order)
   en cada breakpoint; el card interno conserva el aspecto de caja (tamaño/borde). */
.producto-circular-wrapper {
  position: absolute;
  top: 0.5rem;   /* Alineado al nuevo padding-top del card */
  right: calc(var(--space) * 1.5);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Card pequeño circular flotante — reducido para no obstruir la descripción */
.producto-circular-card {
  background: #ffffff;
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
  width: 90px;
  height: 90px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  overflow: hidden;
}

/* Nota referencial debajo de la miniatura de gránulos */
.producto-circular-caption {
  margin: 6px 0 0 0;
  max-width: 150px;
  font-size: 0.7rem;
  line-height: 1.3;
  color: #777;
  text-align: center;
}

.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: 0;
  padding-top: 20px; /* Separación respecto al card circular flotante */
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Pantallas >= 1600px: el card circular NO flota; usa el grid (igual que ≥601). */
@media (min-width: 1600px) {
  .producto-description {
    margin-right: 0;
  }

  .producto-name {
    max-width: 100%;
    word-wrap: break-word;
  }
}

/* Pantallas < 1600px: quitar flotación del card grain */
@media (max-width: 1599px) {
  .producto-circular-wrapper {
    position: static !important;
  }

  .producto-description {
    margin-right: 0 !important;
  }

  .producto-name {
    max-width: 100%;
  }
}

.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 */
/* ── Bloque cotización mayorista (toneladas métricas) ── */
.producto-mayorista {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef4f0;
  border: 1px solid #dce8e1;
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  margin: 0; /* la separación la da el gap del info-card; evita doble espacio */
}
.producto-mayorista-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #1f8a5b;
}
.producto-mayorista-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.producto-mayorista-title {
  font-weight: 700;
  color: #006747;
  font-size: 0.98rem;
}
.producto-mayorista-desc {
  color: #5a6a72;
  font-size: 0.82rem;
}

/* Ícono info junto a "Cantidad a cotizar" */
.producto-quantity-info {
  width: 15px;
  height: 15px;
  color: #9aa7ae;
  vertical-align: -2px;
  margin-left: 3px;
}

/* Badge de unidad (TM) junto al selector de cantidad */
.producto-quantity-unit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 40px;
  padding: 0 12px;
  background: #f1f3f4;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-weight: 600;
  color: #006747;
  font-size: 0.95rem;
}

/* Nota informativa de cotización en TM */
.producto-cotizar-nota {
  margin: 0.35rem 0 0.5rem 0;
  padding-bottom: 0.75rem; /* separación inferior para que no quede pegada al botón */
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6b7780;
}

.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);
}

/* ── Botón compartir producto ───────────────────────────────────────────── */
.share-container {
  position: relative;
  margin-left: auto;   /* empuja al extremo derecho dentro del flex de quantity-controls */
}

.share-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: transparent;
  border: 1.5px solid #d0d0d0;
  border-radius: 20px;
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.share-toggle-btn:hover,
.share-toggle-btn.active {
  border-color: #005f3d;
  color: #005f3d;
}

/* Panel desplegable */
.share-panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  padding: 14px;
  z-index: 50;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.share-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Fila copiar enlace */
.share-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.share-url-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #555;
  background: #f8f8f8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  background: #005f3d;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}

.share-copy-btn:hover {
  background: #004a30;
}

.share-copy-btn.copied {
  background: #2e7d32;
}

/* Fila de iconos de redes sociales */
.share-social-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.share-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f2f2f2;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.share-social-btn svg {
  width: 18px;
  height: 18px;
  fill: #444;
  stroke: none;
}

.share-social-btn:hover {
  transform: translateY(-3px);
}

/* Colores de marca al hover */
.share-whatsapp:hover   { background: #25D366; }
.share-whatsapp:hover svg { fill: #fff; }

.share-facebook:hover   { background: #1877F2; }
.share-facebook:hover svg { fill: #fff; }

.share-instagram:hover  { background: radial-gradient(circle at 30% 107%, #fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }
.share-instagram:hover svg { fill: #fff; }

.share-linkedin:hover   { background: #0A66C2; }
.share-linkedin:hover svg { fill: #fff; }

.share-tiktok:hover     { background: #000; }
.share-tiktok:hover svg { fill: #fff; }

.share-telegram:hover   { background: #26A5E4; }
.share-telegram:hover svg { fill: #fff; }

.share-email:hover      { background: #555; }
.share-email:hover svg  { stroke: #fff; fill: none; }

/* Email usa stroke, no fill */
.share-email svg { fill: none; stroke: #444; }

/* Toast de confirmación */
.share-toast {
  font-size: 0.78rem;
  color: #2e7d32;
  text-align: center;
  min-height: 18px;
  margin-top: 10px;
  font-weight: 500;
}

/* Responsive: panel a la izquierda en pantallas pequeñas */
@media (max-width: 600px) {
  .share-panel {
    right: auto;
    left: 0;
    width: 280px;
  }
}

/* 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: 0 !important; /* cuadrado responsivo */
  }
}

/* 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: 0 !important; /* cuadrado responsivo */
  }
}

/* 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: 0 !important; /* cuadrado responsivo: la altura la da aspect-ratio */
  }
}

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

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

  .producto-image-card,
  .card.producto-image-card {
    padding: calc(var(--space) * 1.2) !important; /* Padding moderado */
    min-height: 0; /* cuadrado responsivo */
    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: 0 !important; /* cuadrado responsivo */
  }

  .producto-categorias-card {
    top: 0;
  }

  .producto-circular-card {
    width: 80px;
    height: 80px;
  }

  .producto-circular-card img,
  .producto-circular-card .cms-plugin img,
  .producto-circular-card .djangocms-picture img {
    width: 100%;
    height: 100%;
  }

  .producto-description {
    margin-right: 0;
  }
}

/* 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: 230px 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: 0; /* cuadrado responsivo */
    /* 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: 0 !important; /* cuadrado responsivo */
    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: 75px;
    height: 75px;
  }

  .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) {
  .producto-circular-card {
    width: 75px;
    height: 75px;
  }
}

/* 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);
  }

  /* El card de Categorías se reemplaza por el acordeón
     .categoria-filtros-mobile en pantallas chicas */
  .categoria-filtros-mobile {
    display: block;
    margin-bottom: 1.5rem;
  }

  .producto-categorias-card {
    display: none;
  }

  /* 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 */
  }

  /* Buscador de cultivos: mismo ajuste que el de productos arriba */
  .cultivo-search-wrapper {
    width: 100%;
    margin-left: 0;
    padding: 0 2.5%;
  }

  .cultivo-search-inner {
    width: 100%;
  }

  .cultivo-search-bar {
    width: 100%;
    max-width: none;
  }

  .cultivo-search-icon {
    right: 16px;
    transform: translateY(-50%);
  }

  /* 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: 0; /* cuadrado responsivo */
    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;
  }

  /* Imagen en mobile: cuadrado responsivo */
  .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: 0 !important; /* cuadrado responsivo */
  }

  /* 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-wrapper {
    position: static;
    margin: 0 auto calc(var(--space) * 1) auto;
  }

  .producto-circular-card {
    width: 90px;
    height: 90px;
  }

  .producto-description {
    margin-right: 0;
  }

  .producto-quantity-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .producto-quantity-controls .share-container {
    margin-left: 0;
    align-self: flex-end; /* mantiene el botón a la derecha cuando la fila es columna */
  }

  .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;
  }

  .cultivo-search-bar {
    font-size: 14px;
    padding: 12px 45px 12px 16px;
  }

  .cultivo-search-bar::placeholder {
    font-size: 13px;
  }

  .cultivo-search-icon {
    width: 20px;
    height: 20px;
    right: 12px;
  }
}

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

  .producto-circular-card {
    width: 80px;
    height: 80px;
    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);
  }
}

/* Card info: título y card circular lado a lado en pantallas ≥601px.
   Se aplica también en ≥1600px (antes flotaba absoluto y el caption se solapaba
   con la descripción). El card circular vive en su propia celda → sin solapes. */
@media (min-width: 601px) {
  .producto-info-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name        circular"
      "desc        desc"
      "composicion composicion"
      "badges      badges"
      "mayorista   mayorista"
      "cart        cart";
    align-items: start;
  }

  .producto-mayorista {
    grid-area: mayorista;
  }

  .producto-name-wrapper {
    grid-area: name;
  }

  .producto-composicion-wrapper {
    grid-area: composicion;
  }

  .producto-circular-wrapper {
    grid-area: circular;
    position: relative;   /* cancela el absolute de la base — necesario para que el grid lo tome en cuenta */
    top: auto;
    right: auto;
    align-self: start;
    margin: 0.5rem 0 0 1rem;
  }

  .producto-description {
    grid-area: desc;
  }

  .producto-badges-wrapper {
    grid-area: badges;
  }

  .producto-cart-section {
    grid-area: cart;
  }
}

/* Card info: card grain debajo del título en celular (≤ 600px) */
@media (max-width: 600px) {
  .producto-info-card {
    display: flex;
    flex-direction: column;
  }

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

  .producto-circular-wrapper {
    position: relative;   /* cancela el absolute de la base */
    top: auto;
    right: auto;
    order: 2;
    align-self: center;
    margin: calc(var(--space) * 0.75) auto;
  }

  .producto-description {
    order: 3;
  }

  .producto-composicion-wrapper {
    order: 4;
  }

  .producto-badges-wrapper {
    order: 5 !important;
  }

  .producto-mayorista {
    order: 6;
  }

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

/* === Página Suelo (tipo de aplicación) === */

.hero-suelo {
  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-suelo img,
.hero-suelo .djangocms-picture img,
.hero-suelo .cms-plugin img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0; left: 0;
}

.hero-suelo .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;
  text-align: center;
}

.suelo-carruseles-wrapper {
  min-width: 0;
}

@media (max-width: 1024px) { .hero-suelo { height: 200px; } }
@media (max-width: 900px)  { .hero-suelo { height: 180px; } }
@media (max-width: 768px)  {
  .hero-suelo { height: 160px; }
  .hero-suelo .hero-title { font-size: clamp(1.5rem, 4vw, 2.5rem); }
}
@media (max-width: 480px)  { .hero-suelo { height: 140px; } }
@media (min-width: 1200px) {
  .hero-suelo {
    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;
  /* Fallback si el placeholder "hero_categoria" queda vacío */
  background: url('https://eos.com/wp-content/uploads/2023/11/components-of-different-types-of-fertilizers.jpg.webp') center center / cover no-repeat;
}

/* Imagen editable por CMS: mismo patrón que .hero-notas/.hero-cultivos */
.hero-categoria-productos .cms-placeholder,
.hero-categoria-productos > *:not(.hero-title):not(::before):not(::after) {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

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

.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 {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: #ffffff;
  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;
  }
}

/* Acordeón "Categorías y filtros" - solo mobile (ver media query abajo) */
.categoria-filtros-mobile {
  display: none;
}

.categoria-filtros-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  background: #fff;
  border: 2px solid var(--brand-gold);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  color: var(--brand-gold);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.categoria-filtros-toggle span {
  flex: 1;
  text-align: left;
}

.categoria-filtros-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.categoria-filtros-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.categoria-filtros-toggle[aria-expanded="true"] .categoria-filtros-chevron {
  transform: rotate(180deg);
}

.categoria-filtros-panel {
  margin-top: 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem;
}

.categoria-filtros-panel .producto-categoria-grupo:last-child {
  margin-bottom: 0;
}

.categoria-filtros-panel .producto-categoria-subtitulo {
  font-size: 1rem;
}

.categoria-filtros-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.categoria-filtro-pill {
  display: block;
  text-align: center;
  background: #e3f3ea;
  color: #005e3d;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
}

.categoria-filtro-pill.active {
  background: #005e3d;
  color: #fff;
}

/* Responsive: Mobile (< 768px) - Sidebar reemplazado por acordeón de filtros */
@media (max-width: 768px) {
  .categoria-filtros-mobile {
    display: block;
    margin-bottom: 1.5rem;
  }

  .categoria-layout-con-sidebar {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    display: block;
  }

  /* El sidebar de categorías (lista de texto) se reemplaza por el
     acordeón .categoria-filtros-mobile de arriba en pantallas chicas */
  .categoria-sidebar {
    display: none;
  }

  .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);
}

/* ============================================
   VISOR DE CATÁLOGO (imágenes por página, sin Google Drive)
   ============================================ */
.catalogo-viewer {
  margin: 1.5rem 0 3rem 0;
}

.catalogo-viewer-stage {
  position: relative; /* ancla para las flechas superpuestas */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  overflow: hidden;
}

/* Contenedor de StPageFlip (librería vía CDN, ver catalogo.html). La
   librería posiciona sus propios elementos internos (.stf__*) por JS.
   Las flechas van superpuestas (position:absolute) en vez de competir por
   ancho en el mismo flex row — así el libro usa todo el ancho disponible
   (letra más grande) y las flechas nunca quedan cortadas por overflow. */
.catalogo-book {
  width: 100%;
  max-width: 900px;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ---- CSS requerido por StPageFlip (page-flip@2.0.7/src/Style/stPageFlip.css) ---- */
.stf__parent {
  position: relative;
  display: block;
  box-sizing: border-box;
  transform: translateZ(0);
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.sft__wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.stf__parent canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.stf__block {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  perspective: 2000px;
}
.stf__item {
  display: none;
  position: absolute;
  transform-style: preserve-3d;
}
.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow {
  position: absolute;
  left: 0;
  top: 0;
}

.catalogo-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: #fff;
  border: none;
  color: #333;
  font-size: 1.8rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 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;
}

.catalogo-prev { left: 10px; }
.catalogo-next { right: 10px; }

.catalogo-nav-btn:hover:not(:disabled) {
  background: #f0f0f0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transform: translateY(-50%) scale(1.1);
}

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

.catalogo-viewer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.catalogo-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #e8f5ee;
  border: 1px solid #005e3d;
  color: #005e3d;
  border-radius: 50px;
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.catalogo-fullscreen-btn:hover {
  background: #005e3d;
  color: #fff;
}

.catalogo-page-indicator {
  font-size: 0.95rem;
  color: var(--muted);
}

.catalogo-page-input {
  width: 55px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.3rem 0.2rem;
  font-size: 0.95rem;
  margin: 0 0.3rem;
}

/* ---- Pantalla completa ---- */
/* Se pide fullscreen sobre .catalogo-viewer entero (stage + controles),
   no solo el stage, para que la barra de controles —con el mismo botón
   que ahora sirve para SALIR— quede visible dentro de la pantalla
   completa. Se agregan los prefijos -webkit- para Safari/iOS. */
.catalogo-viewer:fullscreen,
.catalogo-viewer:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #1a1a1a;
  justify-content: center;
}

.catalogo-viewer:fullscreen .catalogo-viewer-stage,
.catalogo-viewer:-webkit-full-screen .catalogo-viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  background: #1a1a1a;
  border-radius: 0;
  box-shadow: none;
}

.catalogo-viewer:fullscreen .catalogo-viewer-controls,
.catalogo-viewer:-webkit-full-screen .catalogo-viewer-controls {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 0.9rem;
  background: #1a1a1a;
}

.catalogo-viewer:fullscreen .catalogo-page-indicator,
.catalogo-viewer:-webkit-full-screen .catalogo-page-indicator {
  color: #cfcfcf;
}

.catalogo-viewer:fullscreen .catalogo-book,
.catalogo-viewer:-webkit-full-screen .catalogo-book {
  max-height: 96%;
  max-width: 96%;
}

/* En pantallas angostas/verticales (celular) el libro es 1 sola página
   retrato: si solo lo limitamos por ancho, sobra alto y quedan franjas
   vacías arriba/abajo. Se calcula el ancho A PARTIR del alto disponible
   (misma proporción que la página, 567:794) para aprovechar todo el
   espacio vertical.
   !important es necesario: StPageFlip fija "width:100%;max-width:Npx"
   como estilo INLINE sobre este mismo elemento (y lo reaplica en cada
   resize), y un inline style sin !important siempre le gana a cualquier
   regla de hoja de estilos, sin importar especificidad. */
@media (max-aspect-ratio: 4/5) {
  .catalogo-viewer:fullscreen .catalogo-book,
  .catalogo-viewer:-webkit-full-screen .catalogo-book {
    width: calc(99vh * 567 / 794) !important;
    max-width: 99vw !important;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-catalogo {
    height: 200px;
  }

  .catalogo-title {
    font-size: 1.5rem;
  }

  .catalogo-viewer {
    margin: 1rem 0 2rem 0;
  }

  .catalogo-viewer-stage {
    padding: 1rem 0.5rem;
  }

  .catalogo-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }

  .catalogo-prev { left: 4px; }
  .catalogo-next { right: 4px; }
}

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

  .hero-catalogo .hero-title {
    font-size: 1.75rem;
  }

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

/* ============================================
   BOTón FLOTANTE DE CATóLOGO
   ============================================ */

/* Botón flotante de contacto - Posición superior al carrito */
.floating-contact-btn {
    position: fixed;
    bottom: 110px; /* Más arriba que el carrito (30px + 60px + 20px margen) */
    right: 30px;
    background: none;
    border: none;
    padding: 0;
    display: block;
    z-index: 9997; /* Un nivel debajo del carrito (9998) */
    text-decoration: none;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.25s ease;
    cursor: pointer;
}

/* Al hacer scroll (site.js) se atenúa y deja de recibir clics, para no
   tapar botones de card (ej. "Añadir a cotización") que en ese momento
   pasan detrás de esta esquina fija. Vuelve a aparecer al frenar el scroll. */
.floating-contact-btn.is-scrolling {
    opacity: 0.15;
    pointer-events: none;
}

.floating-contact-btn:hover {
    transform: scale(1.05) translateY(-2px);
    filter: brightness(1.1);
}

.floating-contact-btn:active {
    transform: scale(0.95);
}

.floating-contact-btn i {
    font-size: 26px;
}

/* Animación de entrada */
@keyframes catalogBtnBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.floating-contact-btn:hover i {
    animation: catalogBtnBounce 0.6s ease infinite;
}

/* Responsive: Tablet y menores */
@media (max-width: 768px) {
    .floating-contact-btn {
        bottom: 90px;
        right: 20px;
    }

    .floating-contact-btn img {
        height: 40px;
    }
}

/* Responsive: Mobile muy pequeño */
@media (max-width: 480px) {
    .floating-contact-btn {
        bottom: 85px;
        right: 15px;
    }

    .floating-contact-btn img {
        height: 36px;
    }
}

/* Ocultar en pantallas muy pequeñas horizontales */
@media (max-height: 500px) and (orientation: landscape) {
    .floating-contact-btn {
        bottom: 10px;
    }

    .floating-contact-btn img {
        height: 32px;
    }
}

/* ============================================
   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 - wide-carousel en móvil usa indicadores discretos
   (sobrescrito por las reglas de max-width:767px más arriba)
   ======================================================================== */
@media (max-width: 600px) {
    .wide-carousel .carousel-nav {
        display: flex !important;
        pointer-events: 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 principal: [tabs 220px] [contenido 1fr] */
.maptabs {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
.maptabs-select { display: none; }

/* Nav vertical — tabs anchos, fijos */
.maptabs-nav {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.maptabs-nav .nav-link {
    display: block;
    width: 100%;
    text-align: left;
    color: #005e3d;
    border-radius: 6px;
    padding: 0.6rem 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 — altura completa del bloque */
.maptabs-content { min-height: 200px; height: 100%; }
.maptabs-content .tab-content { height: 100%; }
.maptabs-content .tab-pane.active.show { height: 100%; }
.maptabs-item, .maptabs-item--has-map { height: 100%; }
.maptabs-card { height: 100%; box-sizing: border-box; }
.maptabs-map { height: 100%; }
.maptabs-map > div { height: 100% !important; min-height: 350px; }
.maptabs-map iframe { height: 100% !important; min-height: 350px; }

/* Item: [card info 280px fijo] [mapa 1fr — ocupa todo el espacio restante] */
.maptabs-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.maptabs-item--has-map {
    grid-template-columns: 280px 1fr;
    align-items: stretch;
}

/* Card de sede — compacta, diseñada */
.maptabs-card {
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.maptabs-sede-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-gold);
}
.maptabs-sede-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.4rem;
}
/* Links dentro del card: color texto, no azul */
.maptabs-card a:not(.btn) {
    color: inherit;
    text-decoration: none;
}
.maptabs-card a:not(.btn):hover {
    text-decoration: underline;
}
/* Filas de contacto con icono */
.maptabs-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.25rem;
}
.maptabs-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.maptabs-contact-icon {
    color: #005e3d;
    font-size: 0.95rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}
.maptabs-contact-label {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin-bottom: 0.1rem;
}
.maptabs-contact-value {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.4;
}

/* Botón "Como llegar": ocupa ancho del card */
.maptabs-card .btn {
    display: block;
    width: 100%;
    margin-top: 1rem;
    background: #005e3d;
    border-color: #005e3d;
    color: #fff !important;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    text-decoration: none !important;
    text-align: center;
    transition: background 0.18s;
    box-sizing: border-box;
}
.maptabs-card .btn:hover {
    background: #004a31;
    border-color: #004a31;
    color: #fff !important;
}

/* Mapa — ocupa todo el espacio y match altura del card */
.maptabs-map {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    line-height: 0;
}
.maptabs-map iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: block;
    border: 0;
}

/* Tablet (≤900px): card arriba, mapa abajo a pantalla completa */
@media (max-width: 900px) {
    .maptabs-item--has-map {
        grid-template-columns: 1fr;
    }
    .maptabs-map iframe {
        height: 280px;
        min-height: unset;
    }
}

/* Móvil: select visible, nav oculto */
@media (max-width: 767px) {
    .maptabs {
        grid-template-columns: 1fr;
    }
    .maptabs-select {
        display: block;
    }
    .maptabs-nav {
        display: none;
    }
}

/* ===== CARRUSEL REGIONAL DE PRODUCTOS ===== */

/* ---- Tabs de región ---- */
.regional-pill-tabs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* ---- Botones de región: verde oscuro corporativo ---- */
.regional-pill-tabs .regional-tab-btn {
    border-color: #005e3d !important;
    border-width: 1px !important;
    border-radius: 8px !important;
    color: #005e3d !important;
}
.regional-pill-tabs .regional-tab-btn:hover {
    background: #005e3d !important;
    color: #fff !important;
    border-color: #005e3d !important;
}
.regional-pill-tabs .regional-tab-btn.active {
    background: #005e3d !important;
    color: #fff !important;
    border-color: #005e3d !important;
}

/* ---- Paneles: ocultos por defecto, visibles cuando active ---- */
.regional-tab-panel {
    display: none !important;
}
.regional-tab-panel.active {
    display: block !important;
}

/* ---- Mensaje vacío ---- */
.regional-empty-msg {
    text-align: center;
    color: #888;
    padding: 2rem 0;
    font-size: 0.95rem;
}

/* ---- Contenedor raíz: min-width:0 evita que el grid track se expanda por min-content ---- */
.regional-products-plugin {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* min-width:0 evita que el panel expanda el grid track por min-content */
.regional-tab-panel {
    min-width: 0;
}

/* ---- Carrusel: sin márgenes negativos para evitar overflow del layout ---- */
.regional-products-plugin .carousel-wrap {
    position: relative;
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* La nav (flechas) debe estar siempre visible, z-index sobre el carousel */
.regional-products-plugin .carousel-nav {
    z-index: 10 !important;
}

.regional-products-plugin .icon-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px !important;
    scroll-behavior: smooth !important;
    padding-bottom: 10px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.regional-products-plugin .icon-carousel::-webkit-scrollbar {
    display: none;
}

/* ---- Cards: min-width:0 es crítico para que el min-content del flex sea 0
         y el grid track del container no se expanda por las tarjetas ---- */
.regional-products-plugin .icon-carousel .card.product-card {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: none !important;  /* anula el max-width:260px global */
}

/* Imagen vertical 3:4 — height: auto cancela el height:160px global */
.regional-products-plugin .icon-carousel .card.product-card .thumb {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    width: 100% !important;
}
.regional-products-plugin .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;
}

/* product-body crece para empujar el footer "Ver más" al fondo */
.regional-products-plugin .icon-carousel .card.product-card .product-body {
    flex: 1 !important;
}

/* ---- Desktop extra-large (≥1400px): 5 cards ---- */
@media (min-width: 1400px) {
    .regional-products-plugin .icon-carousel .card.product-card {
        width: calc((100% - 64px) / 5) !important;
        max-width: 322px !important;
    }
}
/* ---- Desktop (1200-1399px): 4 cards ---- */
@media (min-width: 1200px) and (max-width: 1399px) {
    .regional-products-plugin .icon-carousel .card.product-card {
        width: calc((100% - 48px) / 4) !important;
        max-width: 322px !important;
    }
}
/* ---- Tablet grande (992-1199px): 3 cards ---- */
@media (min-width: 992px) and (max-width: 1199px) {
    .regional-products-plugin .icon-carousel .card.product-card {
        width: calc((100% - 32px) / 3) !important;
        max-width: 345px !important;
    }
}
/* ---- Tablet (768-991px): 2 cards ---- */
@media (min-width: 768px) and (max-width: 991px) {
    .regional-products-plugin .icon-carousel .card.product-card {
        width: calc((100% - 16px) / 2) !important;
        max-width: 368px !important;
    }
}

/* ================================================================
   MÓVIL ≤767px — igualar wide-carousel
   ================================================================ */
@media (max-width: 767px) {
    .regional-products-plugin .carousel-wrap {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .regional-products-plugin .carousel-nav {
        display: flex !important;
        pointer-events: none !important;
    }
    .regional-products-plugin .carousel-btn {
        width: 24px !important;
        height: 48px !important;
        border-radius: 4px !important;
        font-size: 0.9rem !important;
        background: rgba(255,255,255,0.75) !important;
        box-shadow: none !important;
        pointer-events: none !important;
        opacity: 0.8;
    }
}

/* ---- Móvil (576-767px): 2 cards por vista ---- */
@media (min-width: 576px) and (max-width: 767px) {
    .regional-products-plugin .icon-carousel .card.product-card {
        width: calc((100% - 16px) / 2) !important;
        max-width: 299px !important;
    }
}

/* ---- Móvil pequeño (<576px): 1 card por vista, scroll snap ---- */
@media (max-width: 575px) {
    .regional-products-plugin .icon-carousel {
        scroll-snap-type: x mandatory !important;
        padding: 0 !important;
    }
    .regional-products-plugin .icon-carousel .card.product-card {
        width: calc(100% - 32px) !important;
        max-width: 391px !important;
        margin: 0 16px !important;
        scroll-snap-align: center !important;
    }
}

/* ---- Botones de región en pantallas estrechas (≤640px) ---- */
@media (max-width: 640px) {
    .regional-pill-tabs {
        gap: 0.4rem;
    }
    /* Reducir padding del .pill base para que quepan los 4 botones */
    .regional-pill-tabs .regional-tab-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
}
@media (max-width: 430px) {
    .regional-pill-tabs .regional-tab-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        white-space: nowrap; /* evitar saltos de línea raros; los 4 caben en 2 filas si es necesario */
    }
}

/* Fondo mint en cards de productos y carrusel de composición */
.card.product-card { background-color: #ffffff !important; }

/* =====================================================
   HOME — CARD REGIONAL JUNTO AL MAPA (Cobertura)
   ===================================================== */

/* Subtitulo de la seccion del mapa. Va debajo del titulo y no dentro de la
   tarjeta del mapa: esa tarjeta tiene alto fijo en escritorio, asi que un texto
   de dos lineas ahi adentro le quitaria espacio al mapa. */
.coverage > .coverage-sub {
    grid-column: 1 / -1;
    max-width: 70ch;
    margin: -0.35rem 0 0.35rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.6;
}

body .coverage { align-items: stretch; }
body .coverage > .coverage-cta-stack { grid-column: 1 / -1; align-self: auto; }

.card-mapa-home { display: flex; flex-direction: column; }
.card-mapa-home #peru-map { flex: 1; min-height: 420px; }

/* Altura fija en desktop: evita que el mapa se reescale (salte) según cuánta
   información tenga el card de región a la derecha. El card de región ya
   scrollea internamente (.region-block:last-child) si su contenido no entra. */
@media (min-width: 1001px) {
    .card-mapa-home,
    .card-region-content {
        height: 585px;
    }
}

/* Card regional: flex column para ocupar mismo alto que el mapa */
.card-region-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Bloques internos separados por línea */
.region-block {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.region-block:first-child { padding-top: 0.3rem; }
.region-block:last-child  { border-bottom: none; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 0; }

/* ---- HEADER: zona label + título grande + badge aniversario ---- */
.region-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.region-header-left { flex: 1; min-width: 0; }

/* "ZONA NORTE" — marrón-grisáceo cálido, no verde */
.region-zona-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a7a6e;
    margin-bottom: 3px;
}

/* Título grande — "Región Amazonas": el span lleva el nombre, "Región " se inyecta via ::before */
.region-titulo-wrap span::before {
    content: "Región ";
}

.region-titulo-wrap span {
    display: block;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 600;
    color: #005e3d;
    margin: 0;
    line-height: 1.15;
}

/* Badge aniversario — pill gris claro, icono y fecha en verde */
.region-aniversario-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #005e3d;
    border-radius: 8px;
    padding: 8px 13px;
    flex-shrink: 0;
    white-space: nowrap;
}

.region-aniversario-badge > i {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
}

.region-aniversario-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.region-aniversario-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
}

.region-aniversario-date {
    font-size: 0.97rem;
    font-weight: 700;
    color: #fff;
}

/* CMS plugin dentro del date span: inline, sin margen extra */
.region-aniversario-date .cms-plugin,
.region-aniversario-date p { display: inline; margin: 0; }

/* ---- Etiqueta de sección (CONTACTO DIRECTO / CULTIVOS / PRODUCTOS) ---- */
.region-col-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 11px;
}

/* Ocultar el título interno del plugin crop_badges dentro del card regional
   (la etiqueta "Cultivos Principales" ya está hardcodeada como .region-col-label) */
.card-region-content .crop-badges-title {
    display: none !important;
}

/* ---- MID GRID: Contacto + Cultivos ----
   Contacto ocupa solo lo que su contenido necesita (auto) en vez de la
   mitad fija (1fr 1fr): con 1fr 1fr, en anchos ~1001-1553px el teléfono
   de WhatsApp se quedaba corto de espacio y el bloque de cultivos perdía
   ancho para sus badges (menos por fila, más filas, carrusel de productos
   con menos alto disponible debajo). Cultivos se queda con todo lo que
   sobra (1fr). */
.region-mid-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
}

/* Card sutil de contacto WhatsApp */
.region-wa-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
}

.region-wa-ico {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    border-radius: 50%;
    color: white;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.region-wa-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.region-wa-phone {
    font-size: 0.97rem;
    font-weight: 400;
    color: #005e3d;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}

.region-wa-subtitle {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.2;
}

/* Cultivos: no comprimir las badges */
.region-cultivos-col .crop-badges-container { margin: 0; }
.region-cultivos-col .crop-badge {
    min-width: 68px;
    max-width: 80px !important;
    background: #ffffff !important;
    border-color: #c8e8e0 !important;
}

/* ---- Carrusel productos — tarjetas más grandes ----
   Ancho subido de 185px a 215px para que la descripción entre en 2 líneas
   con más frecuencia (antes 3 líneas empujaban el botón "Ver más" fuera). */
.card-region-content .product-card { min-width: 215px; max-width: 215px; }
.card-region-content .product-card .thumb { height: 115px; }
.card-region-content .card.product-card { padding: 0.5rem !important; }

/* Fallback: si igual la descripción cae a 3 líneas, que la tarjeta crezca y el
   bloque de productos scrollee verticalmente (ya tiene overflow-y:auto en
   .region-block:last-child) en vez de recortar el botón "Ver más". */
.card-region-content .region-products-carousel {
    overflow-y: visible;
}

.region-carousel-wrap { padding: 0 44px; margin-left: 6px; margin-right: 6px; }
.region-carousel-wrap .carousel-nav { padding: 0; }
.region-carousel-wrap .carousel-btn {
    width: 34px;
    height: 34px;
    font-size: 1.3rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.08) !important;
}
.region-carousel-wrap .carousel-btn.prev { margin-left: 11px; }
.region-carousel-wrap .carousel-btn.next { margin-right: 11px; }

/* Responsive tablet/móvil */
@media (max-width: 1000px) {
    .card-region-content { max-height: none; }
    .region-block:last-child { overflow-y: visible; overflow-x: hidden; flex: none; }
}

/* Rango intermedio (1001-1650px aprox.): en este tramo .coverage sigue en
   2 columnas (mapa | card regional, ver .coverage en la línea ~1514), así
   que el card regional nunca es muy ancho. Contacto y cultivos lado a
   lado se quedaban sin espacio (teléfono cortado a 2 líneas, cultivos
   limitado a 2-3 badges por fila). Se apilan verticalmente: cultivos pasa
   a usar el ancho completo del card y entran más badges por fila, lo que
   además le deja más alto disponible al carrusel de productos de abajo. */
@media (min-width: 1001px) and (max-width: 1650px) {
    .region-mid-grid { grid-template-columns: 1fr; gap: 12px; }
    .region-contacto-col .region-wa-card { max-width: 320px; }
}

@media (max-width: 640px) {
    .region-mid-grid { grid-template-columns: 1fr; gap: 10px; }
    .region-aniversario-badge { padding: 6px 10px; }
}

/* Mobile: snap 1 card a la vez */
@media (max-width: 480px) {
    .region-products-carousel { scroll-snap-type: x mandatory; padding: 0 !important; }
    .region-products-carousel .product-card {
        scroll-snap-align: center;
        min-width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin: 0 16px;
    }
    .region-products-carousel .product-card .thumb { height: 150px; }
    .region-carousel-wrap { padding: 0 36px; }
}

/* =====================================================
   FEATURED PRODUCT PLUGIN — Badges de tipo
   ===================================================== */
.fp-type-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 6px 2px 6px;
}

.fp-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    background: #d6ede8;
    color: #005e3d;
    border: none;
}

/* Segunda descripción — mismos estilos que la primera pero más tenue */
.product-meta--2 {
    margin-top: 2px;
    opacity: 0.78;
}

/* =====================================================
   PÁGINA DE CONTACTO — Rediseño con Oficina Principal
   ===================================================== */

/* Grid simétrico: formulario y directorio WhatsApp del mismo ancho */
.grid-contacto-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space) * 1.4);
    align-items: start;
}

@media (max-width: 900px) {
    .grid-contacto-main {
        grid-template-columns: 1fr;
    }
    .grid-contacto-main .contacto-aside {
        order: -1;
    }
}

/* Mapa sin padding extra en el card */
.card-ubicacion {
    padding: 0.4rem !important;
    overflow: hidden;
}

.card-ubicacion iframe {
    display: block !important;
    width: 100% !important;
    height: 260px !important;
    flex-shrink: 0;
}

/* Card Oficina Principal */
.card-oficina-principal {
    padding: 1.2rem calc(var(--space) * 1.2) !important;
}

.oficina-title {
    font-size: 1rem;
    font-weight: 700;
    color: #005e3d;
    margin: 0 0 0.9rem 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Filas de info: icono + label + contenido */
.contacto-info-item {
    display: flex;
    gap: 10px;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

.contacto-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contacto-info-ico {
    width: 26px;
    padding-top: 1px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #005e3d;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.contacto-info-body {
    flex: 1;
    min-width: 0;
}

.contacto-info-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #005e3d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.contacto-info-text {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}

.contacto-info-text p {
    margin: 0 0 1px 0;
}

/* ---- Directorio Regional WhatsApp ---- */
.directorio-wa-section {
    margin-top: calc(var(--space) * 2);
}

.directorio-wa-titulo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.directorio-wa-icon {
    color: #25D366;
    font-size: 1.3rem;
    line-height: 1;
}

.directorio-wa-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 1.2rem;
}

@media (max-width: 480px) {
    .directorio-wa-grid {
        grid-template-columns: 1fr;
    }
}

/* Card individual de oficina regional WA */
/* card-wa es un <a> — el card completo es el enlace */
a.card-wa {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 0.9rem 1.1rem !important;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

a.card-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    text-decoration: none;
    color: inherit;
}

/* Icono WA circular (span, decorativo) */
.card-wa-ico {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4f5e4;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1.35rem;
    color: #1aa352;
    transition: background 0.2s ease, color 0.2s ease;
}

a.card-wa:hover .card-wa-ico {
    background: #25D366;
    color: white;
}

/* Contenido derecho: ciudad arriba, teléfono abajo */
.card-wa-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-wa-region {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}

.card-wa-phone {
    font-size: 0.85rem;
    color: var(--muted);
}

/* ---- Placeholder inicial del card regional (antes de clic en mapa) ---- */
#region-placeholder {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.region-placeholder-inner {
    text-align: center;
    color: var(--muted);
}

.region-placeholder-inner > i {
    font-size: 2.2rem;
    color: #b8dfc8;
    display: block;
    margin-bottom: 0.75rem;
}

.region-placeholder-msg {
    font-size: 0.9rem;
    max-width: 220px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Aviso para editores CMS: aparece solo en modo edición */
.region-card-cms-notice {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    color: #5d4037;
    margin-bottom: 0.8rem;
}

.region-card-cms-notice a {
    color: #005e3d;
    font-weight: 600;
}

/* ── Sección productos recomendados en páginas de cultivo ── */
.cultivo-productos-section { margin-top: 3rem; }
.cultivo-productos-section .section-title { margin-bottom: 1.5rem; }
/* Ocultar si el placeholder está vacío (fuera del modo edición del CMS) */
.cultivo-productos-section:not(:has(.producto-card)) { display: none; }

/* ============================================================
   ARTÍCULOS CIENTÍFICOS — diseño propio (NO magazine/post-detallado)
   Listado en grid de tarjetas + ficha bibliográfica.
   ============================================================ */

/* Hero simple, sin imagen de fondo (evita dependencia externa) */
.hero-articulos-cientificos {
    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: linear-gradient(135deg, #005F3D 0%, #00382480 100%), #005F3D;
}

/* Mismo patron que el resto de los heroes del sitio: titulo en position:absolute
   centrado horizontalmente. Es lo que permite que las reglas generales
   [class*="hero-"] .hero-title lo bajen al 70% de la altura en todos los
   breakpoints. Antes este hero centraba con flexbox, con lo que el `top` no le
   aplicaba y el titulo quedaba al 50%: la caja media igual que las demas, pero
   se veia distinto. Ese 70% ademas es el que evita que el titulo quede detras
   del logo en pantallas chicas. */
.hero-articulos-cientificos .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: bold;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.35);
    margin: 0;
    text-align: center;
    pointer-events: none;
}

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

@media (max-width: 1024px) { .hero-articulos-cientificos { height: 200px; } }
@media (max-width: 900px)  { .hero-articulos-cientificos { height: 180px; } }
@media (max-width: 768px)  {
    .hero-articulos-cientificos { height: 160px; }
    .hero-articulos-cientificos .hero-title { font-size: clamp(1.5rem, 4vw, 2.5rem); }
}
@media (max-width: 480px)  { .hero-articulos-cientificos { height: 140px; } }

.ac-intro {
    max-width: 760px;
    margin: 0 auto 1.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 1.05rem;
}

/* ---- Grid de tarjetas: 3 / 2 / 1 columnas ---- */
.ac-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 992px) {
    .ac-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ac-grid { grid-template-columns: 1fr; }
}

/* ---- Tarjeta (toda clicable) ---- */
a.ac-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.ac-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* Imagen: misma proporción en todas las tarjetas (16:9), aunque no haya foto */
.ac-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f4f6f5;
    overflow: hidden;
}

.ac-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ac-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f4f6f5 0%, #e6efe9 100%);
    color: #005F3D;
    font-size: 2rem;
    opacity: 0.55;
}

.ac-card-body {
    padding: 1.1rem 1.2rem 0.4rem;
    flex: 1;
}

.ac-card-title {
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--ink);
    margin: 0 0 0.6rem 0;
    /* Recorta a 3 líneas para que todas las tarjetas queden parejas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ac-card-meta {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.ac-card-autores {
    display: block;
    margin-bottom: 0.15rem;
}

.ac-card-sep { display: none; }

.ac-card-revista { font-weight: 600; color: #005F3D; }

.ac-card-footer {
    padding: 0.8rem 1.2rem 1.1rem;
    margin-top: auto;
}

.ac-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #005F3D;
    font-size: 0.92rem;
}

a.ac-card:hover .ac-card-btn { text-decoration: underline; }

/* ---- Ficha de artículo (detalle) ---- */
.ac-detalle {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .ac-detalle { grid-template-columns: 1fr; }
}

.ac-detalle-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: #f4f6f5;
}

.ac-detalle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ac-detalle-image-placeholder { font-size: 3rem; }

.ac-detalle-titulo {
    font-size: 1.6rem;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 0.4rem 0;
}

.ac-detalle-titulo-original {
    color: var(--muted);
    font-size: 1rem;
    margin: 0 0 1rem 0;
}

.ac-detalle-autores {
    font-weight: 600;
    color: #005F3D;
    margin: 0 0 1.2rem 0;
}

.ac-detalle-instituciones {
    margin-bottom: 1.2rem;
}

.ac-detalle-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #005F3D;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.ac-detalle-instituciones ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.ac-detalle-biblio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem 1.5rem;
    margin: 0 0 1.6rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.ac-detalle-biblio-item dt {
    font-size: 0.72rem;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
}

.ac-detalle-biblio-item dd {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink);
    word-break: break-word;
}

.ac-detalle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1.4rem;
    background: #005F3D;
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.25s ease;
}

.ac-detalle-btn:hover { background: #00432b; }

.ac-relacionados {
    margin-top: 3.5rem;
}

/* ============================================================
   ETAPAS FENOLÓGICAS — bloque de "Productos recomendados" por
   cultivo, agrupado por etapa/alternativa y tipo de producto.
   ============================================================ */

/* Si queda como hijo directo de .productos-grid (páginas de cultivo
   aún no migradas a esta estructura), que ocupe toda la fila. */
.etapas-fenologicas-container {
    grid-column: 1 / -1;
}

.etapas-fenologicas-titulo {
    font-size: 1.3rem;
    color: #005F3D;
    margin: 0 0 1.5rem 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--line);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.etapas-fenologicas-titulo i { font-size: 1.05rem; }

.etapa-fenologica-bloque {
    margin-bottom: 2.5rem;
    scroll-margin-top: 100px; /* compensa el header fijo al llegar por ancla */
}
.etapa-fenologica-bloque:last-child {
    margin-bottom: 0;
}

.etapa-fenologica-titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #00814f, #005F3D);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    margin: 0 0 1.2rem 0;
    box-shadow: 0 3px 8px rgba(0, 95, 61, 0.2);
}
.etapa-fenologica-titulo i { font-size: 0.85rem; opacity: 0.9; }

/* Grid de productos de la etapa: todos los productos (especialidad +
   complementarios) juntos en una sola fila, más angosta que la grilla de
   3 columnas de categoría de producto — así no quedan filas incompletas
   ni cards demasiado anchas. */
.etapa-productos-grid {
    margin-top: 0;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1200px) {
    .etapa-productos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .etapa-productos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .etapa-productos-grid { grid-template-columns: 1fr; }
}

.ac-relacionados .section-title { margin-bottom: 1.2rem; }

/* ============================================================
   NAV DE ETAPAS — fila de accesos rápidos (por cultivo) que ancla
   directamente a cada etapa dentro de "Productos recomendados".
   ============================================================ */
.etapas-nav-section {
    text-align: center;
    margin: 1rem 0 2.5rem;
}

.etapas-nav-nota {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    max-width: 720px;
    margin: 0 0 1.6rem;
    padding: 0.9rem 1.4rem;
    background: #e8f5ee;
    border: 1px solid #cfe9db;
    border-radius: 14px;
    color: #1f4d3a;
}

.etapas-nav-nota i {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: #005F3D;
}

.etapas-nav-nota p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}

.etapas-nav-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

/* Reutiliza la estética de .pill.tab (verde, redondeado) en una clase
   propia para no engancharse al JS de tabs (que opera sobre .pill.tab
   por selector global y controlaría paneles equivocados). */
.pill.etapa-jump {
    position: relative;
    background: #e8f5ee;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    border: 1px solid #005e3d;
    color: #005e3d;
    border-radius: 50px;
    padding: 0.65rem 1.4rem;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.pill.etapa-jump:hover,
.pill.etapa-jump.active {
    background: #005e3d;
    color: #fff;
}

.pill.etapa-jump.active::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #005e3d;
    margin-top: -1px;
}

@media (max-width: 767px) {
    .etapas-nav-nota {
        flex-direction: column;
        align-items: flex-start;
    }
}