/* ========================================================= 
   CONFIGURACIÓN DE TIPOGRAFÍA (PEGAR AL INICIO)
========================================================= */
:root {
    /* Definimos las fuentes aquí para fácil acceso */
    --font-titulos: "Zalando Sans Expanded", sans-serif;
    --font-botones: "Zalando Sans Expanded", sans-serif;
    --font-cuerpo: "DM Sans", sans-serif;
}

/* 1. CUERPO (Texto general) -> DM Sans Regular */
body {
    font-family: var(--font-cuerpo);
    font-weight: 400;
}
/* Agrega esto justo debajo de tus variables :root */

button, 
input[type="submit"], 
input[type="button"], 
.btn, 
[class*="btn-"],    /* Cualquier clase que empiece con btn- */
[class*="boton-"]   /* Cualquier clase que empiece con boton- */
{
    font-family: var(--font-botones) !important;
}

/* 2. TITULARES -> Zalando Sans ExtraBold (800) */
/* Agregamos tus clases de títulos específicos también */
h1, h2, h3, h4, h5, h6,
.hero-soltec__title, 
.sistemas-titulo,
.ubicacion-card h2,
.detalle-precio,
.filtros-titulo {
    font-family: var(--font-titulos);
    font-weight: 800;
}

/* 3. BOTONES -> Zalando Sans Regular (400) */
/* Detectamos etiquetas button y tus clases de botones */
button,
input[type="submit"],
input[type="button"],
.boton-consulta,
.boton-agregar-carrito,
.btn-carrito,
.btn-soltec-primary,
.btn-soltec-ghost,
.chip,
.nav-parent,
.btn-footer-primary,
.btn-footer-secondary {
font-family: var(--font-botones); /* <--- ESTO FALTA */
              /* Asegura que sean negrita */
}

/* ========================================================= 
   AQUÍ SIGUE TU CÓDIGO ORIGINAL (VARIABLES, ETC...)
   VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
========================================================= */
/* ========================================================= 
   VARIABLES 
========================================================= */
:root {
    --azul: #0e3b6f;
    --azul-oscuro: #0b2e55;
    --azul-medio: #154a8f;
    --violeta: #3b36b3;
    --blanco: #ffffff;
    --gris: #e9edf3;
    --gris-texto: #2f3b4a;
    --sombra: 0 6px 18px rgba(0,0,0,.12);
    --max: 1100px;
    /*--header-height: 72px;*/
    --header-height: 82px;


     /* NUEVO */
    --header-gradient: linear-gradient(
        90deg,
        #04152d 0%,
        #0b2e55 35%,
        #0e3b6f 65%,
        #1b6bb2 100%
    );
    --sombra-header: 0 10px 24px rgba(0,0,0,.35);
}

/* ========================================================= 
   RESET 
========================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
}

body {
    padding-top: var(--header-height);
    /* Fondo limpio original */
    background: var(--gris); /* Si no te toma la variable, usa #f8fafc */
    
    /* Texto oscuro para leer bien */
    color: var(--gris-texto); 
    
    line-height: 1.6;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* =========================================================

   HEADER FIJO

========================================================= */

  /* =========================================================
   HEADER + COMPACT (SCROLL) + TRANSICIONES
========================================================= */

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background: var(--header-gradient);
  color: #fff;

  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  box-shadow: var(--sombra-header);

  /* Importante: para que se anime cuando entra/sale compact */
  height: 86px; /* ajustá si querés un header normal más alto/bajo */
  transition: height .12s ease,
              padding .12s ease,
              box-shadow .2s ease,
              background .3s ease;
}

/* Por si tenés otros <img> en el header */
header img {
  height: 70px;
  width: auto;
}

/* Logo principal */
#img-logo {
  height: 78px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.35));

  /* Transición suave del logo */
  transition: height .3s ease, filter .3s ease;
}

nav {
  width: auto;
}

header nav ul {
  display: flex;
  gap: 24px;
  align-items: center;
  margin: 0;
  padding: 0;
}

header nav a {
  color: #fff;
  font-weight: 550;
  padding: 8px 0px;
  border-radius: 0;
  opacity: .95;
  position: relative;

  /* Centrado matemático (3px arriba + 3px abajo) */
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;

  /* Transiciones suaves del texto */
  transition: border-color .25s ease,
              box-shadow .25s ease,
              transform .15s ease,
              font-size .3s ease,
              padding .3s ease;
}

.nav-parent {
  font-family: var(--font-cuerpo) !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 6px 10px;
  position: relative;

  transition: transform .15s ease,
              font-size .3s ease,
              padding .3s ease;
}

/* === BARRA DEGRADADA (SOLTEC) === */
header nav a::after,
.nav-parent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5px;

  background: linear-gradient(90deg, #ff7e2e, #ad52a3, #00d4e3);

  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

header nav a:hover,
.nav-parent:hover {
  border-bottom-color: transparent;
  transform: translateY(-1px);
}

header nav a:hover::after,
.nav-parent:hover::after,
.sistemasnav-item-:hover .nav-parent::after {
  opacity: 1;
}

/* Página activa */
header nav a.active {
  font-weight: 700;
  background: rgba(255,255,255,.18);
  border-radius: 6px;
}

/* Efecto click */
nav a.clicked {
  transform: scale(.92);
  transition: transform .1s ease;
}

/* Botón carrito (si existe) */
button, .btn-carrito {
  transition: transform .3s ease, padding .3s ease, font-size .3s ease;
}

/* =========================================================
   ESTILOS DEL ESTADO COMPACTO (SCROLL)
========================================================= */

header.compact {
  height: 50px; /* ANTES: 55px. Ahora se nota más el cambio */
  padding: 0 4%;
  background: rgba(14, 28, 54, 0.98); /* Un poco más sólido para leer mejor */
}

/* Logo: un poco más chico para entrar en 50px */
header.compact #img-logo {
  height: 40px; /* ANTES: 50px. Ajustado a la nueva altura */
  width: auto;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.3));
}

/* Texto de navegación */
header.compact nav a,
header.compact .nav-parent {
  font-size: 0.9rem;
  padding: 4px 8px;
}

/* Ajuste barra degradada en compacto */
header.compact nav a::after,
header.compact .nav-parent::after {
  bottom: -2px;
  height: 1.5px;
}

/* Botón carrito en compacto */
/* --- CORRECCIÓN AQUÍ --- */
/* Usamos :not(.menu-toggle) para que NO afecte a las 3 rayitas */
header.compact button:not(.menu-toggle), 
header.compact .btn-carrito {
  transform: scale(0.85);
  padding: 6px 12px;
  font-size: 0.9rem;
}


/* =========================================================
   MENU RESPONSIVE
========================================================= */
/* Botón Hamburguesa (Oculto en escritorio) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1100; /* Por encima del menú desplegado */
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Animación cuando está abierto (se convierte en X) */
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }


/* =========================================
   RESPONSIVE HEADER (CORREGIDO)
   ========================================= */
@media (max-width: 900px) {

    /* 1. Header en Móvil */
    header, header.compact {
      
        padding: 0 5%;       /* Márgenes laterales seguros */
        height: 60px;        /* Altura base móvil */
        justify-content: space-between;
        align-items: center;
    }

    /* 2. Logo Móvil */
    #img-logo, header.compact #img-logo {
        height: 42px;        /* Tamaño equilibrado */
        width: auto;
        /* Aseguramos que no tenga margen inferior que parezca una línea */
        margin-bottom: 0 !important; 
    }

    /* 3. Botón Hamburguesa (El interruptor) */
    .menu-toggle {
        display: flex;
        /* Asegura que la X no se corte al girar */
        overflow: visible; 
        z-index: 1100;
        /* Reseteamos transformaciones previas */
        transform: none; 
    }
    
    /* ESTADO COMPACTO (AL HACER SCROLL) */
    /* Aquí es donde se achica suavemente */
    header.compact .menu-toggle {
        /* CORRECCIÓN: Usamos 0.8 para achicar (no 2) */
        transform: scale(0.8);
        transform-origin: center right; /* Se achica hacia la derecha para mantener alineación */
        transition: transform 0.3s ease;
    }

    /* 4. Menú Desplegable */
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #04152d;

        
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    }
    
    /* Cuando scrolleas, el menú debe subir para pegarse al header fino */
    header.compact nav {
        top: 50px; /* Coincide con la altura visual del header compacto */
    }

    nav.active {
        max-height: 100vh; /* Se abre */
    }

    /* 5. Lista de enlaces */
    header nav ul {
        flex-direction: column;
        padding: 30px 0;
        gap: 0;
    }

    header nav a, .nav-parent {
        font-size: 1.1rem;
        padding: 15px 0;
        display: block;
        width: 100%;
        text-align: center;
        border: none !important; /* Asegura que no haya líneas en los items */
    }
    
    /* Carrito en el menú móvil */
    .btn-carrito {
        margin-top: 15px;
        transform: scale(1.1); /* Un poco más grande para el dedo */
    }


    /* =================================================
       AJUSTES PARA MODO COMPACTO (AL HACER SCROLL) - MÓVIL
       ================================================= */

    /* 1. EL BOTÓN (Linitas/Cruz): Se achica PROPORCIONALMENTE */
    header.compact .menu-toggle {
        /* CORRECCIÓN: Estaba en scale(2). Lo pasamos a 0.8 para achicarlo. */
        transform: scale(0.8); 
        
        /* Aseguramos que el origen de la transformación sea el centro para que no se corte */
        transform-origin: center center;
        
        margin: 0; 
        transition: transform 0.3s ease;
    }

    /* 2. EL MENÚ DESPLEGABLE: Se ajusta a la nueva altura de 50px */
    header.compact nav {
        /* IMPORTANTE: Debe coincidir con el height de header.compact */
        top: 50px; 
        background: rgba(4, 21, 45, 0.98);

    }

    /* 3. LOS ENLACES: Se hacen un poco más compactos */
    header.compact nav a, 
    header.compact .nav-parent {
        padding: 8px 0; 
        font-size: 1rem; 
    }
}



/* ========================================================= 
   MAIN / HERO 
========================================================= */
main {
    flex: 1;
    padding: 0 6% 40px;
    background: var(--gris); /* Igual que el body */
}


.hero {
    text-align: center;
    margin-bottom: 40px;
}

.hero img,
.hero-img {
    width: 100%;
    max-height: 550px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: var(--sombra);
    margin: 0 auto 24px;
}

main p {
    margin: 18px 0;
    font-size: 1.05rem;
    line-height: 1.75;
}

.hero p {
    margin-top: 20px;
    font-size: 1.1rem;
    line-height: 1.7;
}

main h1,
main h2 {
    margin: 26px 0 12px;
}



/* === PAGINA PRODUCTOS - HEADER PRODUCTOS (TÍTULO + CONTROLES A LA DERECHA) === */

.productos-main{
  position: relative;
  padding-top: 90px; /* evita que quede pegado al header */
}
.productos-toolbar{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.productos-heading h1{
  margin: 0;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.productos-heading p{
  margin: 10px 0 0;
  color: #64748b;
  max-width: 620px;
  line-height: 1.4;
}

/* Controles derecha */
.productos-controls{
  transform: translateX(-19px); /* probá -12px a -24px */
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Botones tipo “control” */
.control-btn{
  font-family: var(--font-botones); /* Faltaba esto */
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

.control-btn:hover{
  border-color: rgba(30, 197, 255, 0.45);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
  transform: translateY(-1px);
}

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

/* Flechita */
.control-btn .chev{
  font-size: 0.99 rem;
  opacity: .75;
  transition: transform .2s ease;
}

/* Estado abierto (se lo vamos a poner con JS) */
.control-btn.is-open .chev{
  transform: rotate(180deg);
}

/* Alineación perfecta a la derecha para Filtros */
#panel-filtros {
  left: auto;       /* Ignora la izquierda */
  right: 0;         /* Alineate al borde DERECHO exacto del botón */
  min-width: 260px; /* Un poco más ancho para que entren los chips cómodos */
  transform: translateX(-19px);
}

/* === DROPDOWNS ( FILTROS) === */
.panel-dropdown{
  display: none; /* arranca cerrado */
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
  padding: 10px;
  margin: 10px 0 16px;
  backdrop-filter: blur(10px);

  /* Animación suave */
  transform-origin: top;
  animation: dropdownIn .18s ease-out;
}


@keyframes dropdownIn{
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Clase para mostrar (la activamos con JS) */
.panel-dropdown.is-open{
  display: block;
}

/* Items del ordenar */
.panel-item{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 10px;
  border-radius: 10px;
  text-align: left;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  transition: background .15s ease;
}

.panel-item:hover{
  background: rgba(30, 197, 255, 0.10);
}


/* Panel filtros: acomodar chips mejor */
.panel-filtros .filtros-titulo{
  margin: 4px 6px 10px;
  font-weight: 900;
  color: #0f172a;
}

/* Reutilizo tu contenedor actual pero lo ordeno */
.panel-filtros .filtros-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px;
}

/* Si tus chips actuales están muy “bordes duros”, esto los suaviza */
.panel-filtros .filtros-chips button,
.panel-filtros .filtros-chips .chip{
  border-radius: 999px;
}

/* Menú de ORDENAR más compacto (tipo el ejemplo) */
#panel-ordenar {
  /* Estilos visuales */
  width: 140px;
  padding: 6px;

  /* Lógica de Posicionamiento (Lo nuevo) */
  position: absolute;   /* Lo saca del flujo normal */
  top: 100%;            /* Lo ubica justo debajo del botón */
  left: 0;              /* Lo alinea a la izquierda del botón */
  
  margin: 0;            /* Reseteamos márgenes viejos */
  margin-top: 8px;      /* Pequeña separación visual */
  z-index: 100;         /* Asegura que tape el contenido de abajo */
}
#panel-ordenar .panel-item{
  padding: 10px 12px;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Seleccionado: azul + barrita a la izquierda */
#panel-ordenar .panel-item.is-selected{
  color: #2563eb;
  background: rgba(37, 99, 235, 0.08);
  box-shadow: inset 3px 0 0 #2563eb;
  font-weight: 800;
}


/* === NUEVO: La "cajita" invisible que ancla el menú === */
.menu-wrapper {
  position: relative; /* CRUCIAL: Esto crea el punto de referencia */
  display: inline-block;
}

/* =========================================================
   FIX Z-INDEX (dropdown arriba de productos, debajo del header)
   Header fijo = z-index: 1000
   ========================================================= */

.productos-toolbar{
  position: relative;
  z-index: 900; /* < 1000 para NO tapar el header */
}

.productos-controls{
  position: relative;
  z-index: 900; /* mantiene todo el bloque debajo del header */
}

/* Anclaje + capa del dropdown */
.menu-wrapper{
  position: relative;
  z-index: 910;
}

.panel-dropdown{
  position: absolute;
  z-index: 920; /* arriba de las cards */
  top: calc(100% + 8px);
}

/* Alineación de cada panel */
#panel-ordenar{
  left: 0;
  right: auto;
}

#panel-filtros{
  left: auto;
  right: 0;
}

/* Bajamos el grid para evitar peleas raras */
#productos-grid{
  position: relative;
  z-index: 1;
}

/* === RESPONSIVE: en mobile, apilar === */
@media (max-width: 820px){
  .productos-toolbar{
    flex-direction: column;
    align-items: stretch;
  }

  .productos-controls{
    justify-content: flex-start;
  }
}

/* FIX typo (tenías "0.99 rem" con espacio) */
.control-btn .chev{
  font-size: 0.99rem;
}

/* === BUSCADOR (principal) === */
.productos-search{
  /* se comporta como un control premium */
  flex: 1 1 360px;
  min-width: 260px;
  max-width: 520px;

  display: flex;
  align-items: center;
  gap: 10px;

  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  padding: 10px 12px;

  transition: box-shadow .2s ease, border-color .2s ease;
}

.productos-search:focus-within{
  border-color: rgba(30, 197, 255, 0.55);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.10);
}

.productos-search .search-ico{
  opacity: .55;
  font-size: 0.95rem;
  line-height: 1;
}

.productos-search input{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 0.95rem;
  color: #0f172a;
}

.productos-search input::placeholder{
  color: rgba(100, 116, 139, 0.9);
}

.productos-search .search-clear{
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: rgba(15, 23, 42, 0.55);
  transition: background .15s ease, color .15s ease;
}

.productos-search .search-clear:hover{
  background: rgba(2, 6, 23, 0.06);
  color: rgba(15, 23, 42, 0.75);
}

/* Meta (contador/resultados) */
.productos-meta{
  margin: 6px 0 0;
  color: #64748b;
  font-size: 0.92rem;
}

/* Responsive: en mobile el buscador va full y los botones debajo */
@media (max-width: 820px){
  .productos-controls{
    transform: none; /* evita hacks cuando apila */
    margin-top: 0;
  }

  .productos-search{
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }

  /* Ordenar y Filtros alineados y cómodos */
  .menu-wrapper,
  #btn-filtros{
    flex: 1 1 180px;
  }

  #btn-ordenar,
  #btn-filtros{
    width: 100%;
    justify-content: center;
  }
}
#panel-filtros{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 100;
  min-width: 260px;
}


/* ========================================================= 
   PRODUCTOS 
========================================================= */
#productos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;

}

.productos {
    text-align: center;
    /* Separación normal respecto al bloque de arriba */
    margin-top: 40px; 
    
    /* Sin fondos ni degradados, limpio */
    background: transparent; 
    
    padding-top: 0;
    width: auto;
}

/* TÍTULO UNIFICADO (Estilo "Vení a conocer Soltec") */
.productos h2 {
    margin-top: 150px; 
    color: #ffffff;          /* El mismo azul oscuro del bloque de ubicación */
    font-size: 2rem;         /* Tamaño aumentado (antes 1.8rem) */
    font-weight: 800;        /* Más grueso (ExtraBold) */
    letter-spacing: -0.02em; /* Un toque más apretado, más moderno */
    margin-bottom: 25px;     /* Separación con las tarjetas */
    text-shadow: none;
}

/* GRID 3 columnas */
.productos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px;
}

/* TARJETA PRODUCTO */
.producto {
    background: var(--blanco);
    border: 1px solid var(--azul);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0,0,0,.1);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.producto:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0,0,0,.15);
}

.producto img {
    width: 100%;
    height: 230px;
    object-fit: contain;
    background: #fff;
    padding: 12px;
    border-bottom: 1px solid var(--azul);
}

.producto h3 {
    margin: 12px 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--azul-oscuro);
}

/* Apuntamos al span que está adentro del h2 de la sección productos */
.productos h2 span {
    color: #00bfff; /* Celeste Soltec brillante */
    
    /* Opcional: Si querés que brille un poco como neón */
    text-shadow: 0 0 15px rgba(30, 197, 255, 0.4);
}
.producto .descripcion {
    font-size: .92rem;
    padding: 0 14px;
    min-height: 46px;
}

.producto ul {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.producto ul li {
    font-size: .95rem;
}

/* PRECIO */
.producto .precio {
    background: var(--azul);
    color: #fff;
    padding: 12px 0;
    width: 100%;
    font-weight: 700;
    font-size: 1.05rem;
    margin-top: auto;
}


/* =========================================================
   PRODUCTOS — CARD GLASS PRO (DESKTOP)
   Scope: SOLO #productos-grid .producto
   Pegar AL FINAL
   ========================================================= */

#productos-grid .producto{
  position: relative;
  overflow: hidden;
  border-radius: 18px;

  /* Glass real */
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(11, 46, 85, 0.14);

  /* Sombra más pro (menos “cartoon”) */
  box-shadow:
    0 18px 45px rgba(2, 6, 23, 0.10),
    0 1px 0 rgba(255,255,255,0.55) inset;

  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){
  #productos-grid .producto{
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
  }
}

/* Shine iOS (sutil, arriba) */
#productos-grid .producto::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(900px 240px at 18% -10%, rgba(30,197,255,0.16), transparent 55%),
    radial-gradient(700px 220px at 85% 0%, rgba(255,255,255,0.22), transparent 55%);
  opacity: .95;
}

/* Hover premium */
#productos-grid .producto:hover{
  transform: translateY(-5px);
  border-color: rgba(30,197,255,0.28);
  box-shadow:
    0 26px 60px rgba(2, 6, 23, 0.14),
    0 1px 0 rgba(255,255,255,0.65) inset;
}

/* Imagen: menos “bloque blanco” y mejor integración */
#productos-grid .producto img{
  height: 220px;                 /* un toque menos alto que 230 */
  padding: 16px 18px;            /* más aire lateral (se ve pro) */
  background: rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(11,46,85,0.10);
}


/* (Opcional) clamp 3 líneas para que no te alargue cards */
#productos-grid .producto .descripcion {
  display: -webkit-box;
  box-orient: vertical; /* Propiedad estándar */
  -webkit-box-orient: vertical;
  line-clamp: 3; /* Propiedad estándar (la que calma a VS Code) */
  -webkit-line-clamp: 3;
  overflow: hidden;

}

/* Precio: menos “ladrillo”, más glass */
#productos-grid .producto .precio{
  background: linear-gradient(180deg,
    rgba(11,46,85,0.88),
    rgba(7,35,61,0.92)
  );
  padding: 11px 0;
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  border-top: 1px solid rgba(255,255,255,0.12);
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))){
  #productos-grid .producto .precio{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Botón: más iOS (menos alto y más limpio) */
#productos-grid .producto .boton-agregar-carrito{
  padding: 11px 14px;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: 0 0 18px 18px;  /* alinea con el radio de la card */
  letter-spacing: 0.01em;
}

/* Hover del botón más pro */
#productos-grid .producto .boton-agregar-carrito:hover{
  filter: brightness(1.06);
}





/* =========================================================
   1. EL CONTENEDOR (Verdadero Glassmorphism)
   ========================================================= */
#productos-grid .producto {
  position: relative;
  overflow: hidden;
  border-radius: 20px; 
  
  background-color: #eeeded; /* Blanco al 25% de opacidad */
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-left-color: rgba(255, 255, 255, 0.8);
  
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.9),  
    inset 0 -1px 1px rgba(255, 255, 255, 0.2), 
    0 12px 32px rgba(2, 6, 23, 0.06);          
  
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#productos-grid .producto:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(255, 255, 255, 0.4),
    0 20px 45px rgba(2, 6, 23, 0.12);
}

/* =========================================================
   2. LA MAGIA EN LA FOTO (Chau cuadrado blanco)
   ========================================================= */
#productos-grid .producto img {
  width: 100%;
  height: 230px;
  object-fit: contain;
  padding: 12px;

  
  /* ESTOS DOS SON LA CLAVE */
  background: transparent !important; /* Le sacamos el fondo blanco duro que tenías antes */
  mix-blend-mode: multiply;           /* Hace que el blanco de la foto JPG se vuelva vidrio */
}




/* =========================================================
   PRODUCTOS DESTACADOS — RESPONSIVE (solo media queries)
   Objetivos:
   - Desktop: 3 visibles
   - Mobile: 4 visibles (2x2)
   - Cards más compactas, sin cansar
   ========================================================= */

/* ====== Desktop y grandes: asegurar 3 visibles si el JS trae más ====== */

/* ====== Mobile/Tablet chica: 4 visibles y 2 columnas ====== */
@media (max-width: 768px) {

  /* Título: saca el margen enorme de desktop */
  .productos h2{
    margin-top: 70px !important;
    font-size: 1.55rem !important;
    margin-bottom: 18px !important;
    line-height: 1.15 !important;
  }

  /* Grid: 2 columnas (2x2 = 4 productos) */
  #productos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 18px !important;

    gap: 16px !important; /* mismo “aire” que los laterales */
  }


  /* Card compacta */
  .producto{
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Imagen más baja para que no coma pantalla */
  .producto img{
    height: 140px !important;
    padding: 10px !important;
  }

  /* Título: 2 líneas máximo, prolijo */
.producto h3{
  font-size: 0.48rem !important;
  line-height: 0.85 !important;
  margin: 10px 10px 6px !important;

  /* estándar */
  line-clamp: 2 !important;

  /* clamp real (soporte actual) */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;
}


.producto .descripcion{
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
  padding: 0 10px !important;
  min-height: auto !important;

  /* estándar */
  line-clamp: 2 !important;

  /* clamp real (soporte actual) */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;
}


  /* Si tu JS mete <ul>, en mobile lo escondemos para que no sea un bloque eterno */
  .producto ul{
    display: none !important;
  }

  /* Precio: más bajo */
  .producto .precio{
    padding: 10px 0 !important;
    font-size: 0.95rem !important;
  }

  /* Botón: más compacto (si existe dentro de .producto) */
  .producto button,
  .producto .btn,
  .producto .btn-agregar,
  .producto a.btn,
  .producto a.boton{
    padding: 10px 10px !important;
    font-size: 0.88rem !important;
  }
  
  .boton-agregar-carrito{
    width: auto !important;
    padding: 5px 8px !important;
    font-size: 0.28rem !important;
    font-weight: 700 !important;
  }

   #productos-grid .producto .boton-agregar-carrito{
    padding: 6px 10px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;

    /* Tu border-radius de desktop tiene "0 px" (inválido).
       No tocamos desktop, pero en mobile lo dejamos bien. */
    border-radius: 0 0 12px 12px !important;

    /* Que no se agrande por layout */
    width: 100% !important;
    display: block !important;
  }
}

/* ====== Phones chicos: mantenemos 2 columnas pero más compacto todavía ====== */
@media (max-width: 420px) {

  .productos h2{
    margin-top: 60px !important;
    font-size: 1.45rem !important;
  }

  #productos-grid{
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 16px !important;

    gap: 12px !important; /* mantiene igualdad */
  }

  .producto img{
    height: 125px !important;
    padding: 8px !important;
  }

  .producto h3{
    font-size: 0.94rem !important;
  }

  .producto .descripcion{
    font-size: 0.80rem !important;
  }

  .producto .precio{
    padding: 9px 0 !important;
    font-size: 0.92rem !important;
  }

  
}
@media (max-width: 768px){

  /* Que la grilla mande, no el width viejo de .producto */
  #productos-grid{
    justify-items: stretch !important;
  }

  #productos-grid .producto{
    width: 100% !important;          /* pisa el width:90% */
    justify-self: stretch !important; /* asegura que llene su columna */
  }
}
@media (max-width: 420px){
  #productos-grid .producto{
    width: 100% !important;
    justify-self: stretch !important;
  }
}
/* Productos destacados: más margen lateral + más espacio vertical (solo mobile) */
@media (max-width: 768px){
  #productos-grid{
    padding-left: 22px !important;   /* + margen izquierda */
    padding-right: 22px !important;  /* + margen derecha */

    column-gap: 14px !important;     /* mantiene el ancho “bien” */
    row-gap: 18px !important;        /* ✅ más espacio entre tarjetas en alto */
  }
}

@media (max-width: 420px){
  #productos-grid{
    padding-left: 16px !important;
    padding-right: 16px !important;

    column-gap: 12px !important;
    row-gap: 16px !important;
  }
}

/* =========================================================
   PRODUCTOS DESTACADOS — GLASS FRAME (solo marco/bordes)
   + FIX DESCRIPCIÓN (no visible)
   Scope: solo index dark
   Pegar AL FINAL del index.css
   ========================================================= */

body.home-dark #productos-grid .producto{
  position: relative;

  /* Marco glass (sin tocar el fondo de la card) */
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.32),                 /* sombra exterior */
    0 0 0 1px rgba(30,197,255,.10) inset,        /* “tinte” cyan interno */
    0 1px 0 rgba(255,255,255,.18) inset !important; /* highlight arriba */
}

/* Doble borde interno tipo iOS (marco pro) */
body.home-dark #productos-grid .producto::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 2px rgba(255,255,255,.04) inset;
}

/* Hover: un poco más cyan, sin cambiar fondos */
body.home-dark #productos-grid .producto:hover{
  border-color: rgba(30,197,255,.35) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.38),
    0 0 0 1px rgba(30,197,255,.16) inset,
    0 1px 0 rgba(255,255,255,.22) inset !important;
}

/* ===== FIX: el shine ::before te estaba lavando el texto ===== */
body.home-dark #productos-grid .producto::before{
  opacity: .22 !important; /* antes estaba .95 -> te mataba la descripción */
  z-index: 0;              /* lo mandamos atrás */
}

/* Ponemos el contenido adelante del shine */
body.home-dark #productos-grid .producto > *{
  position: relative;
  z-index: 1;
}




/* =========================================================
   GLASS REAL sobre fondo azul oscuro (solo index dark)
   - Fondo translúcido (NO sólido)
   - Backdrop blur
   - Borde blanco semi + highlights
   - Sombras suaves
   - Fix descripción (shine no pisa texto)
   Pegar AL FINAL
   ========================================================= */

body.home-dark #productos-grid .producto{
  position: relative;
  overflow: hidden;
  border-radius: 18px;

  /* ✅ vidrio esmerilado: translúcido (deja ver el fondo azul) */
  background: rgba(255, 255, 255, 0.16) !important;

  /* ✅ blur real */
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);

  /* ✅ borde “vidrio” */
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-top-color: rgba(255, 255, 255, 0.42) !important;
  border-left-color: rgba(255, 255, 255, 0.32) !important;

  /* ✅ profundidad suave */
  box-shadow:
    0 22px 60px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 -1px 0 rgba(255,255,255,0.06) inset !important;

  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}

/* “Shine” superior (pero atrás del contenido) */
body.home-dark #productos-grid .producto::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(900px 240px at 18% -12%, rgba(30,197,255,0.22), transparent 60%),
    radial-gradient(700px 220px at 88% 0%, rgba(124,58,237,0.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 55%);
  opacity: 0.55 !important; /* ✅ antes .95 te lavaba la descripción */
}

/* Borde interno fino (detalle premium) */
body.home-dark #productos-grid .producto::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10) inset,
    0 0 0 2px rgba(255,255,255,0.04) inset;
}

/* ✅ Asegura que el contenido quede arriba del “shine” */
body.home-dark #productos-grid .producto > *{
  position: relative;
  z-index: 1;
}

/* Hover: un toque más brillante, sin cambiar estructura */
body.home-dark #productos-grid .producto:hover{
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.34) !important;
  box-shadow:
    0 28px 78px rgba(0,0,0,0.42),
    0 1px 0 rgba(255,255,255,0.24) inset,
    0 -1px 0 rgba(255,255,255,0.08) inset !important;
}


/* Imagen: que no quede como “rectángulo blanco duro” */
body.home-dark #productos-grid .producto img{
 background: rgba(255, 255, 255, 0.14) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  mix-blend-mode: normal !important; /* multiply en dark suele ensuciar */
}


/* TÍTULO en cards (simple y legible en fondo dark) */
body.home-dark #productos-grid .producto h3{
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;        /* baja el peso (antes 700/850) */
  margin: 14px 0 8px !important;      /* control del margin vertical */
  padding: 0 18px !important;         /* margen izq/der real */
  text-align: center;
  line-height: 1.15;

}

#productos-grid .producto h3{

  font-weight: 600 !important;        /* baja el peso (antes 700/850) */
  margin: 14px 0 10px !important;      /* control del margin vertical */
  padding: 0 18px !important;         /* margen izq/der real */
  text-align: center;
  line-height: 1.15;

}



/* =========================================================
   GLASS REAL "DARK PREMIUM" (Solo index dark)
   ========================================================= */

body.home-dark #productos-grid .producto {
    position: relative;
    overflow: hidden;
    border-radius: 18px;

    /* 1. EL FONDO: Gradiente sutil, mucho menos blanco */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.02)
    ) !important;

    /* 2. EL VIDRIO: Desenfoque fuerte para que el azul de fondo trabaje */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    /* 3. LOS REFLEJOS: Ahora con los bordes más brillantes por defecto */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;  /* Actualizado */
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important; /* Actualizado */

    /* 4. LA SOMBRA: Para despegarlo del fondo sin ensuciar */
    box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.4) !important;

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* HOVER: Levantamos la tarjeta y le damos un poco más de brillo al borde */
/* HOVER: Ahora solo levantamos la tarjeta y ampliamos la sombra */
body.home-dark #productos-grid .producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.5) !important;
}
/* IMAGEN: Evitamos fondos blancos duros que rompan la inmersión */
body.home-dark #productos-grid .producto img {
    /* Un fondo ultra oscuro y sutil en lugar de blanco/gris */
    background: rgba(0, 0, 0, 0.15) !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 16px !important;
    mix-blend-mode: normal !important;
}

/* TEXTOS: Aseguramos contraste impecable */
body.home-dark #productos-grid .producto h3,
body.home-dark #productos-grid .producto .descripcion {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Ayuda a la legibilidad sobre el blur */
}

body.home-dark #productos-grid .producto .descripcion {
    color: rgba(255, 255, 255, 0.75) !important; /* Un poco más tenue para jerarquía */
}





/* =========================================================
   PRODUCTOS HEADER — RESPONSIVE (solo mobile/tablet)
   - achica tipografías y controles
   - agrega aire lateral
   - ordena buscador + ordenar + filtros
   ========================================================= */

@media (max-width: 820px){

  .productos-main{
    padding-top: 78px; /* un toque menos que desktop */
  }

  .productos-toolbar{
    gap: 14px;
    margin-bottom: 14px;
  }

  /* Aire lateral (el “marco” del bloque) */
  .productos-toolbar,
  .productos-heading{
    padding-left: 14px;
    padding-right: 14px;
  }

  .productos-heading h1{
    font-size: clamp(1.35rem, 5.2vw, 1.70rem);
    letter-spacing: -0.015em;
  }

  .productos-heading p{
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.35;
    max-width: 46ch;
  }

  /* Buscador / controls: que respiren */
  .productos-controls{
    transform: none;        /* evita stacking context y problemas */
    margin-left: 0;
    gap: 10px;
    margin-top: 6px;
  }

  .control-btn{
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 0.92rem;
  }

  /* Paneles dropdown un toque más chicos */
  .panel-dropdown{
    padding: 10px;
    border-radius: 14px;
  }

  #panel-ordenar{
    width: 155px; /* un toque más cómodo en touch */
  }
}

@media (max-width: 600px){

  /* Más aire en mobile */
  .productos-toolbar,
  .productos-heading{
    padding-left: 16px;
    padding-right: 16px;
  }

  .productos-heading h1{
    font-size: 1.45rem;
  }

  .productos-heading p{
    font-size: 0.90rem;
    max-width: 44ch;
  }

  /* Controles: 2 columnas prolijas (Ordenar / Filtros) debajo del buscador */
  .productos-controls{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 10px;
  }

  /* Si el buscador es un input dentro de controls, que ocupe toda la fila */
  .productos-controls .search,
  .productos-controls .search-input,
  .productos-controls input[type="search"],
  .productos-controls input[type="text"]{
    grid-column: 1 / -1;
  }

  .control-btn{
    width: 100%;
    justify-content: center;
    padding: 9px 10px;
    font-size: 0.88rem;
  }

  /* Dropdowns alineados al botón */
  #panel-ordenar{
    left: 0;
    right: auto;
    width: min(180px, 92vw);
  }

  #panel-filtros{
    right: 0;
    left: auto;
    width: min(260px, 92vw);
  }
}

@media (max-width: 420px){

  .productos-toolbar,
  .productos-heading{
    padding-left: 14px;
    padding-right: 14px;
  }

  .productos-heading h1{
    font-size: 1.35rem;
  }

  .productos-heading p{
    font-size: 0.86rem;
  }

  .productos-controls{
    gap: 8px;
  }

  .control-btn{
    padding: 8px 10px;
    font-size: 0.84rem;
    border-radius: 12px;
  }
}

/* =========================================
   PRODUCTOS HEADER — TIPOS MÁS CHICOS (mobile)
   ========================================= */
@media (max-width: 600px){

  /* Botones Ordenar / Filtros */
  .control-btn{
    font-size: 0.40rem !important;
    padding: 8px 10px !important;
  }

  /* Flechita del botón */
  .control-btn .chev{
    font-size: 0.85rem !important;
  }

  /* Buscador (texto que escribís) */
  .productos-controls input[type="search"],
  .productos-controls input[type="text"],
  .productos-controls .search-input{
    font-size: 0.82rem !important;
  }

  /* Placeholder (texto “Buscar producto…”) */
  .productos-controls input::placeholder{
    font-size: 0.80rem !important;
  }
}

@media (max-width: 420px){
  .control-btn{
    font-size: 0.78rem !important;
    padding: 7px 9px !important;
  }

  .productos-controls input[type="search"],
  .productos-controls input[type="text"],
  .productos-controls .search-input{
    font-size: 0.80rem !important;
  }

  .productos-controls input::placeholder{
    font-size: 0.78rem !important;
  }
}

/* =========================================================
   DROPDOWNS ORDENAR + FILTROS — RESPONSIVE (solo mobile)
   - el panel ocupa el ancho del botón/columna
   - sin transforms desktop
   - sin overflow fuera de pantalla
   ========================================================= */

@media (max-width: 600px){

  /* Cada control (botón) debe ser un "ancla" que ocupe toda su celda */
  .menu-wrapper{
    display: block !important;
    width: 100% !important;
  }

  /* Panel genérico: que flote y no se desborde */
  .panel-dropdown{
    width: 100% !important;      /* ✅ mismo ancho que su botón/columna */
    min-width: 0 !important;
    max-width: none !important;

    margin-top: 8px !important;
    padding: 10px !important;

    border-radius: 14px !important;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.16) !important;

    /* ✅ si es muy alto, scrollea dentro */
    max-height: 58vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;

    z-index: 920 !important; /* arriba de cards, debajo del header (según tu fix) */
  }

  /* ORDENAR: debajo del botón, sin ancho fijo */
  #panel-ordenar{
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important; /* ✅ mata ajustes de desktop */
  }

  /* FILTROS: debajo del botón, alineado al mismo ancho */
  #panel-filtros{
    width: 100% !important;
    left: 0 !important;         /* ✅ en mobile conviene full ancho columna */
    right: auto !important;
    transform: none !important; /* ✅ mata translateX(-19px) */
    min-width: 0 !important;
  }

  /* Items más compactos para touch */
  #panel-ordenar .panel-item{
    padding: 9px 10px !important;
    font-size: 0.85rem !important;
  }

  /* Chips del panel filtros: más compactos y prolijos */
  .panel-filtros .filtros-chips{
    gap: 8px !important;
    padding: 4px !important;
  }

  .panel-filtros .filtros-chips button,
  .panel-filtros .filtros-chips .chip{
    font-size: 0.82rem !important;
    padding: 7px 10px !important;
  }
}

@media (max-width: 420px){

  .panel-dropdown{
    padding: 9px !important;
    max-height: 52vh !important;
  }

  #panel-ordenar .panel-item{
    font-size: 0.82rem !important;
    padding: 8px 10px !important;
  }

  .panel-filtros .filtros-chips button,
  .panel-filtros .filtros-chips .chip{
    font-size: 0.80rem !important;
    padding: 6px 9px !important;
  }
}

@media (max-width: 600px){

  /* Contenedor chips: grilla ordenada */
  .panel-filtros .filtros-chips{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 6px !important;
    align-items: stretch !important;
  }

  /* Todos los chips con misma altura y centrados */
  .panel-filtros .filtros-chips button,
  .panel-filtros .filtros-chips .chip{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 8px 10px !important;
    font-size: 0.80rem !important;
    line-height: 1.1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 34px !important;
  }

  /* “Ver todo” como CTA: ocupa 2 columnas */
  .panel-filtros .filtros-chips button:first-child,
  .panel-filtros .filtros-chips .chip:first-child{
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 420px){
  .panel-filtros .filtros-chips{
    gap: 7px !important;
  }
  .panel-filtros .filtros-chips button,
  .panel-filtros .filtros-chips .chip{
    font-size: 0.78rem !important;
    padding: 7px 9px !important;
    min-height: 32px !important;
  }
}

/* ==============================
   BOTÓN CONSULTAR WHATSAPP
   (pill más largo)
============================== */
.boton-consulta{
  font-family: var(--font-botones); /* Faltaba esto */
  background: var(--azul);
  color: #fff;
  border: none;

  /* más largo: padding horizontal + min-width */
  padding: 10px 20px;
  min-width: 190px;

  margin: 0 14px 14px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.boton-consulta:hover{
  background: var(--azul-medio);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(14,59,111,.35);
}

.boton-consulta:active{
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(14,59,111,.25);
}


/* Ajuste mobile para que no desborde */
@media (max-width: 480px){
  .boton-consulta{
    min-width: 0;
    width: 100%;
  }
}






/* ========================================================= 
   FORMULARIO 
========================================================= */
/* =========================================
   CONTACTO - FONDO DOBLE + FORM ENCIMA
   ========================================= */
.contacto-header h1 {
  /* 1. Tu variable y color solicitado */
  font-family: var(--font-titulos, sans-serif);
  color: #051931;

}
   
main.contacto-page {
  position: relative;
  
  /* CAMBIO FUERTE: 200vh hará que la página sea MUY alta (doble pantalla) */
  /* Si aún te parece poco, prueba con 250vh */
  min-height: 480vh; 
  
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Damos más aire arriba y abajo para que el scroll se sienta bien */
  padding: 150px 20px; 
  
  /* IMPORTANTE: Quitamos overflow hidden para permitir el scroll */
  background: #0b1220;
}

/* ===== Collage de fondo (2 imágenes APILADAS) ===== */
/* ===== Collage de fondo (2 imágenes APILADAS) ===== */
.bg-collage{
  position: absolute;
  inset: 0;
  z-index: 1;

  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Cada mitad (ventana) */
.bg-slice{
  height: 50%;
  overflow: hidden;
  position: relative;
}

/* Imagen parallax (más grande para permitir movimiento) */
.bg-img{
  width: 100%;
  height: 120%;          /* CLAVE: más alta que la ventana */
  object-fit: cover;
  object-position: center;

  transform: translate3d(0, 0, 0) scale(1.06);
  will-change: transform;
  display: block;
}
main.contacto-page{ min-height: 140vh; }


/* Ajuste de encuadre vertical */
.bg-collage img:first-child { object-position: center 50%; } /* Foto de Arriba */
.bg-collage img:last-child  { object-position: center 50%; } /* Foto de Abajo */


/* ===== LÍNEA DIVISORA (AHORA HORIZONTAL) ===== */
.bg-collage::after {
  content: "";
  position: absolute;
  
  /* CAMBIO CLAVE 3: Posición Horizontal */
  top: 50%;
  left: 0; 
  width: 100%;      /* Ancho total */
  height:200px;    /* Altura de la franja */
  
  transform: translateY(-50%); /* Centrado exacto */
  
  /* Degradado Vertical (Hacia abajo) */
  background: linear-gradient(
    to bottom,
    rgba(2,31,70,0) 0%,
    rgba(2,31,70,0.9) 50%, /* Color sólido en el medio */
    rgba(2,31,70,0) 100%
  );
  pointer-events: none;
}

/* Overlay general (Degradado vertical) */
.bg-overlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  /* CAMBIO CLAVE 4: Dirección del degradado */
  background: linear-gradient(
    to bottom,
    rgba(2,31,70,0.55) 0%,
    rgba(2,31,70,0.25) 50%,
    rgba(2,31,70,0.55) 100%
  );
}

/* =========================================
   TARJETA Y FORMULARIO (OPTIMIZADO)
   ========================================= */

/* 1. La Tarjeta: Más aire y mejor sombra */
.contacto-card {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.98); /* Un poco más sólido para legibilidad */
  
  width: 100%;
  max-width: 520px; /* Un pelín más ancho para que respire */
  
  /* CLAVE: Mucho más padding. Esto "organiza" la vista */
  padding: 40px 25px; 
  
  border-radius: 16px; /* Bordes más modernos */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* Sombra más difusa y elegante */
  backdrop-filter: blur(10px);
}



/* Opcional: Si tienes un título dentro del form (h2, h3) */
.contacto-card h2 {
  text-align: center;
  margin-bottom: 0px;
  color: #1e293b;
  font-family: var(--font-cuerpo);
}

/* 2. El Contenedor del Form */
form {
  display: flex;
  flex-direction: column;
  /* CLAVE: Este gap controla la distancia vertical entre grupos */
  gap: 20px; 
}

/* 3. Filas de dos columnas (Nombre/Apellido) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* CLAVE: El gap horizontal debe ser igual o cercano al vertical */
  gap: 20px; 
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Distancia pequeña entre Label e Input (agrupamiento) */
}

/* 4. Labels (Etiquetas) */
label {
  font-family: var(--font-cuerpo);
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.5px;
}

/* 5. Inputs, Selects y Textareas */
form input,
form select,
form textarea {
  width: 100%;
  /* CLAVE: Más relleno interno para que el texto no toque los bordes */
  padding: 12px 15px; 
  
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-family: var(--font-cuerpo);
  font-size: 0.95rem;
  color: #1e293b;
  background-color: #f8fafc;
  
  /* Transición suave para el foco */
  transition: all 0.2s ease-in-out;
  outline: none;
}

/* Estado Focus: Indispensable para UX */
form input:focus,
form select:focus,
form textarea:focus {
  border-color: var(--azul); /* Tu color de marca */
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(2, 31, 70, 0.1); /* Anillo sutil */
}

form textarea {
  height: 120px; /* Un poco más alto por defecto */
  resize: vertical; /* Permite estirar solo hacia abajo */
}

/* 6. Botón de Enviar */
/* =========================================
   BOTÓN GHOST (Estilo Soltec adaptado al Form)
   ========================================= */

.btn-submit {
  /* 1. Estructura y Espaciado */
  width: 100%;
  
  /* --- EL CAMBIO CLAVE --- */
  /* Debe coincidir con el padding-bottom de .contacto-card */
  margin-top: 15px; 
  /* ----------------------- */

  padding: 12px 20px; 
  
  /* 2. Tipografía y Forma */
  font-family: var(--font-botones, sans-serif);
  font-weight: 600;
  font-size: 1rem;
  border-radius: 9999px; 
  
  /* 3. Estilo Visual */
  background-color: #051931; 
  color: #0ea5e9; 
  border: 2px solid rgba(14, 165, 233, 0.5); 
  
  /* 4. Comportamiento Flex */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; 
  
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- ESTADO HOVER (Al pasar el mouse) --- */
.btn-submit:hover {
  /* Fondo sutil azulado */
  background: rgba(14, 165, 233, 0.1); 
  /* El borde se vuelve sólido y brillante */
  border-color: #0ea5e9; 
  /* Pequeña elevación y resplandor */
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(14, 165, 233, 0.25);
}

/* --- ESTADO ACTIVE (Al hacer clic) --- */
.btn-submit:active {
  transform: translateY(0);
  background: rgba(14, 165, 233, 0.2);
  box-shadow: none;
}

/* =========================
   FORM HORIZONTAL (SIN TOCAR HTML)
   Solo afecta el form dentro de .contacto-card
========================= */

.contacto-card{
  max-width: 980px;           /* antes 520px -> ahora horizontal */
  padding: 34px 34px;
}

/* El form pasa a GRID de 2 columnas */
.contacto-card form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;             /* row-gap / col-gap */
  align-items: start;
}

/* Las .form-row dejan de crear una “columna vertical” extra */
.contacto-card .form-row{
  display: contents;          /* sus hijos entran directo al grid */
}

/* Cada group ocupa su celda */
.contacto-card .form-group{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contacto-card h1 {
  text-align: center;
  margin-bottom: 0px;
  margin-top: -10px;
  color: #1e293b;
  font-family: var(--font-titulos);
}

/* Campos full-width: mensaje ocupa 2 columnas */
.contacto-card .form-group.full-width{
  grid-column: 1 / -1;
}

/* Botón ocupa 2 columnas */
.contacto-card .btn-submit{
  grid-column: 1 / -1;
  margin-top: 3px;            /* más prolijo que 15px */
  width: 100%;
}

/* Si querés el botón más “pro” y no tan alto visualmente */
.contacto-card .btn-submit{
  padding: 12px 22px;
}

/* =========================
   CONTACTO CARD – COMPACT (más chico)
========================= */

.contacto-card{
  max-width: 860px;      /* antes 980 */
  padding: 26px 26px;    /* antes 34 */
  border-radius: 14px;   /* un poco más compacto */
}

.contacto-card form{
  gap: 14px 16px;        /* antes 18 / 22 */
}

/* título más compacto */
.contacto-card h1{
  margin-top: -6px;
  margin-bottom: 8px;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem);
}

/* labels un poco más chicos */
.contacto-card label{
  font-size: 0.8rem;
}

/* inputs + select + textarea más compactos */
.contacto-card input,
.contacto-card select{
  padding: 10px 12px;    /* antes 12/15 */
  font-size: 0.92rem;
}

.contacto-card textarea{
  height: 96px;          /* antes 120 */
  padding: 10px 12px;
  font-size: 0.92rem;
}

/* botón menos alto */
.contacto-card .btn-submit{
  margin-top: 2px;
  padding: 10px 18px;    /* antes 12/22 */
  font-size: 0.95rem;
}

/* Responsive: vuelve a 1 columna */
@media (max-width: 820px){
  .contacto-card{
    max-width: 560px;
    padding: 34px 24px;
  }

  .contacto-card form{
    grid-template-columns: 1fr;
  }

  .contacto-card .form-group.full-width,
  .contacto-card .btn-submit{
    grid-column: auto;
  }
}

/* =========================================
   RESPONSIVE - CONTACTO (MÓVIL COMPACTO)
   ========================================= */
   @media (max-width: 600px) {
    /* 1. Más margen a los costados (pasamos el padding lateral a 26px) */
    main.contacto-page {
      padding: 80px 26px 40px; 
      min-height: auto; 
    }
    /* Achica el párrafo debajo del título del formulario */
  .contacto-header p, 
  .contacto-card p {
    font-size: 0.85rem; /* Letra más chica */
    line-height: 1.4;   /* Interlineado más compacto */
    margin-bottom: 12px; /* Menos espacio antes de los campos */
  }
  
    /* 2. Tarjeta con menos relleno interno (achicamos el de arriba a 14px) */
    .contacto-card {
      padding: 14px 16px 20px; /* Arriba 14px, Lados 16px, Abajo 20px */
      width: 85%; 
      border-radius: 12px; 
    }
  
    /* 3. Títulos más chicos y SIN separación arriba y muy poca abajo */
    .contacto-header h1, 
    .contacto-card h2 {
      font-size: 1.05rem; 
      margin-top: 0;      /* Quitamos el margen por defecto de arriba */
      margin-bottom: -10px; /* Muy poca separación hacia abajo */
    }
  
    /* 4. Rompemos las 2 columnas y pegamos MÁS los campos */
    .form-row {
      grid-template-columns: 1fr; 
      gap: 0px; 
    }
    
    form {
      gap: 5px; 
    }
  
    /* Reducimos el espacio específico entre la etiqueta (label) y el input */
    .form-group {
      gap: 2px; 
    }
  
    label {
      font-size: 0.75rem; 
    }
  
    /* 5. Cajas de texto más finitas y con texto más chico */
    form input,
    form select,
    form textarea {
      padding: 8px 10px; 
      font-size: 0.65rem; 
      border-radius: 6px;
    }
  
    /* 6. Textarea más bajo para que no tape el teclado */
    form textarea {
      height: 75px; 
    }
  
    /* 7. Botón más proporcionado al nuevo tamaño general */
    .btn-submit {
      margin-top: 2px; 
      padding: 8px 14px; 
      font-size: 0.85rem; 
    }
  }
  
  /* Ajuste extra unificado para teléfonos muy chiquitos */
  @media (max-width: 400px) {
    main.contacto-page {
      padding: 60px 18px 30px; 
    }
    .contacto-card {
      padding: 14px 14px 16px;
    }
    .contacto-card h2 {
      font-size: 1.15rem;
    }
    form input,
    form select,
    form textarea {
      font-size: 0.8rem;
    }
  }

  .contacto-card .form-group label {
  color: #020822; /* Le ponemos un color oscuro (usé un azul noche, podés cambiarlo a #333) */
  display: block; /* Asegura que el texto quede arriba del input */
  margin-bottom: 5px; /* Achicamos el espacio gigante entre el texto y la caja */
  font-size: 0.9rem;
  font-weight: 600; /* Un poco de grosor para que resalten */
}

/* Opcional: Si los grupos enteros están muy separados entre sí, ajustamos la caja */
.contacto-card .form-group {
  margin-bottom: -5px; 
}


/* =========================================================
   FOOTER TECNOLÓGICO SOLTEC (Optimizado)
========================================================= */

footer.pie-principal {
  margin-top: 0px;
  position: relative;
  overflow: hidden;
  padding: 0 0 24px;
  color: var(--soltec-text-main, #f5fbff);
  font-family: var(--font-cuerpo, system-ui);
  background: radial-gradient(140% 140% at 0% 0%, var(--soltec-bg-2, #013a6b) 0%, #020817 45%, #020617 100%);
}

/* BARRA DE ENERGÍA ANIMADA (CSS PURO) */
.footer-gradient-bar {
  width: 100%;
  height: 4px; /* Un pelín más gruesa para que luzca */
  
  /* Definimos el degradado */
  background: linear-gradient(
    90deg,
    #ff7e2e,
    #ad52ff,
    #1ec5ff,
    #ff7e2e /* IMPORTANTE: Repetimos el primer color al final para el loop perfecto */
  );
  
  /* Hacemos el fondo más grande que la caja para poder moverlo */
  background-size: 300% 100%;
  
  /* ACTIVAMOS LA ANIMACIÓN */
  /* nombre | duración | curva | repetición */
  animation: mover-degradado 6s linear infinite;
}

/* DEFINICIÓN DE LA ANIMACIÓN */
@keyframes mover-degradado {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 0;
}

/* --- CTA SUPERIOR --- */
.footer-cta {
  position: relative;
  margin-bottom: 52px;
  padding: 28px 32px;
  border-radius: var(--soltec-radius-lg, 1.75rem);
  background: linear-gradient(120deg, rgba(6, 35, 76, 0.96), rgba(4, 22, 58, 0.96));
  box-shadow: var(--soltec-shadow-soft, 0 22px 45px rgba(0,0,0,0.45));
  border: 1px solid rgba(30, 197, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
}

.footer-cta::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -120px;
  top: -120px;
  background: radial-gradient(circle, rgba(30,197,255,0.32), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
}

.footer-cta-text {
  position: relative;
  max-width: 580px;
  z-index: 1;
}

.footer-cta-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--soltec-text-muted, #b7c7da);
  margin-bottom: 6px;
}

.footer-cta h3 {
  font-family: var(--font-titulos, system-ui);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.footer-cta-subtitle {
  margin: 0;
  font-size: 0.98rem;
  color: var(--soltec-text-muted, #b7c7da);
  line-height: 1.6;
}

.footer-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end; /* Alineados a la derecha */
}

/* CORRECCIÓN FINAL BOTONES FOOTER (MISMAS MÉTRICAS QUE HERO) */

.btn-equal-width {
  box-sizing: border-box;
  width: 100%;
  min-width: 260px;
  text-align: center;
  justify-content: center;
}

/* CORRECCIÓN FINAL: TIPOGRAFÍA Y ALTURAS IDÉNTICAS */

/* 1. CLASE PRIMARIA (Cyan) */
.btn-footer-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* MÉTRICAS */
  padding: 0.7rem 1.6rem; 
  font-size: 0.9rem;
  
  /* TIPOGRAFÍA IGUALADA */
  font-weight: 600;        /* Antes 600 (Mantenemos este peso) */
  line-height: 1; 
  font-family: var(--font-botones);

  /* TRUCO DE ALTURA: Borde invisible para igualar al secundario */
  border: 1px solid transparent; 

  border-radius: var(--soltec-radius-full, 999px);
  background: var(--soltec-accent, #00f7ff);
  color: #02111f;
  text-decoration: none;
  box-shadow: 0 12px 12px rgba(10, 130, 190, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-footer-primary:hover {
  transform: translateY(-1px);
  background: #4ad6ff;
  box-shadow: 0 12px 30px rgba(10, 130, 190, 0.7);
}

/* 2. CLASE SECUNDARIA (Borde) */
.btn-footer-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* MÉTRICAS */
  padding: 0.7rem 1.6rem; 
  font-size: 0.9rem;
  
  /* AJUSTE ÓPTICO: Bajamos a 500 para compensar el blanco sobre oscuro */
  font-weight: 500;       
  
  /* AJUSTE DE RENDERIZADO: Hace que la letra blanca se vea más fina y nítida */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  line-height: 1; 
  font-family: var(--font-botones);

  border-radius: var(--soltec-radius-full, 999px);
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: var(--soltec-text-main, #f5fbff);
  text-decoration: none;
  background: transparent;
  backdrop-filter: blur(6px);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.btn-footer-secondary:hover {
  border-color: var(--soltec-accent, #1ec5ff);
  background: rgba(15, 23, 42, 0.8);
  /* Al hacer hover, si quieres que resalte más, puedes devolverlo a 600 o dejarlo así */
}

.btn-footer-secondary:hover {
  border-color: var(--soltec-accent, #1ec5ff);
  background: rgba(15, 23, 42, 0.8);
}

/* --- BLOQUE INFERIOR --- */
.footer-main {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 36px;
}

.footer-brand {
  flex: 0.8; /* Reducimos un poco el ancho ya que sacamos texto */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.img-logo-footer {
  height: 70px;
  width: auto;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
}

/* Estilos para los iconos sociales bajo el logo */
.brand-socials {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.6);
  transition: all 0.2s ease;
}

.social-circle img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.social-circle:hover {
  border-color: var(--soltec-accent, #1ec5ff);
  background: rgba(30, 197, 255, 0.1);
  transform: translateY(-2px);
}

/* Columnas */
.footer-columns {
  flex: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* TÍTULOS ("Soluciones", "Contacto", "Ubicación & horarios") */
/* 2px más chicos aprox: de 1.05rem → 0.925rem */
.footer-col h4 {
  font-family: var(--font-titulos, system-ui);
  font-weight: 600;
  font-size: 0.925rem;
  margin: 0 0 14px;
  color: #ffffff;
  letter-spacing: -0.02em;
}

/* ÍTEMS debajo de los títulos */
/* 2px más chicos aprox: de 0.95rem → 0.825rem */
/* y un gris más apagado para no llamar tanto la atención */
.footer-col p,
.footer-col address,
.footer-col li,
.footer-col a {
  font-size: 0.825rem;
  line-height: 1.6;
  color: #9ca3af; /* más gris que el texto principal */
  font-style: normal;
}

.footer-links,
.datos-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li,
.datos-lista li {
  margin-bottom: 6px;
}

/* Enlaces: base gris suave, y celeste solo al hover */
.footer-links a,
.datos-lista a,
.ver-mapa-link {
  color: #9ca3af;
  text-decoration: none;
  position: relative;
  transition: color 0.18s ease;
}

.footer-links a:hover,
.datos-lista a:hover,
.ver-mapa-link:hover {
  color: var(--soltec-accent, #1ec5ff);
}

.footer-horarios p {
  margin: 3px 0;
}

/* Franja final */
/* ~3px más chico que antes: de 0.85rem → 0.7rem aprox */
.footer-bottom {
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #9ca3af;
}


/* =========================================================
   FOOTER — FIX MOBILE COMPLETO
   - CTA: Texto arriba / Botones abajo (evita columna angosta)
   - MAIN: Brand arriba + redes en 1 línea + columnas ordenadas
   - BOTTOM: 2 frases en fila como desktop (achicando)
   Pegar AL FINAL para que pise lo anterior
   ========================================================= */

@media (max-width: 760px){

  /* =======================
     1) CTA (TU FIX)
     ======================= */

  .footer-cta{
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;

    padding: 18px 14px !important;
    margin-bottom: 26px !important;
  }

  .footer-cta-text{
    max-width: 100% !important;
    width: 100% !important;
  }

  .footer-cta-kicker{
    font-size: 0.64rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 15px !important;
    white-space: nowrap !important;
  }

  .footer-cta h3{
    font-size: 1.22rem !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 12px !important;
  }

  .footer-cta-subtitle{
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
    margin: 0 0 10px !important;
  }

  .footer-cta-actions{
    width: 100% !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .btn-equal-width{
    width: 100% !important;
    min-width: 0 !important;
  }

  .btn-footer-primary,
  .btn-footer-secondary{
    width: 100% !important;
    padding: 0.50rem 0.90rem !important;
    font-size: 0.80rem !important;
  }


  /* =======================
     2) MAIN (ORDENAR ABAJO)
     ======================= */

 .footer-main{
    display: flex !important;
    flex-direction: column !important;
  }

  .footer-columns{
        margin-top: 25px !important;   /* subilo/bajalo si querés más/menos aire */

    order: 1 !important;          /* PRIMERO: columnas */
  }

  .footer-brand{
    order: 2 !important;          /* DESPUÉS: logo + redes */
    margin-top: 18px !important;  /* aire entre columnas y brand */
    align-items: center !important;  /* centra el logo + redes */
    text-align: center !important;
  }

  .brand-socials{
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 0px !important;
  }

  .social-circle{
    width: 30px !important;
    height: 30px !important;
  }

  .social-circle img{
    width: 15px !important;
    height: 15px !important;
  }

  /* Columnas en 2 para que se vea ordenado */
  .footer-columns{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 18px !important;
    align-items: start !important;
  }

  .footer-col h4{
    font-size: 0.86rem !important;
    margin: 0 0 10px !important;
  }

  .footer-col p,
  .footer-col address,
  .footer-col li,
  .footer-col a{
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  /* Email/WhatsApp: que pueda partir sin romper */
  .datos-lista a{
    word-break: break-word !important;
  }

  .footer-horarios p{
    margin: 2px 0 !important;
  }


  /* =======================
     3) BOTTOM (COMO DESKTOP)
     ======================= */

  .footer-bottom{
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .footer-bottom p{
    white-space: nowrap !important;
    margin: 0 !important;
     font-size: 0.54rem !important;
  }

  
  .img-logo-footer{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;  /* asegura centrado aunque haya reglas previas */
  }

    /* CLAVE: en column, si queda align-items:flex-start, todo se “pega” a la izquierda */
  .footer-main{
    align-items: stretch !important; /* que los bloques ocupen todo el ancho */
  }

  /* Brand ocupa todo el ancho y recién ahí centrar funciona de verdad */
  .footer-brand{
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    text-align: center !important;
  }

  .img-logo-footer{
    display: block !important;
    margin: 0 auto 5px !important; /* centrado real */
  }

  .brand-socials{
    justify-content: center !important;
  }

}


/* Phones chicos: compacto sin romper */
@media (max-width: 420px){

  /* CTA aún más compacto */
  .footer-cta{
    padding: 16px 12px !important;
  }

  .footer-cta-kicker{
    font-size: 0.62rem !important;
  }

  .footer-cta h3{
    font-size: 1.16rem !important;
  }

  .footer-cta-subtitle{
    font-size: 0.84rem !important;
  }

  .btn-footer-primary,
  .btn-footer-secondary{
    font-size: 0.78rem !important;
    padding: 0.46rem 0.84rem !important;
  }

  /* Redes más chicas para entrar 1 línea */
  .brand-socials{
    gap: 7px !important;
  }

  .social-circle{
    width: 26px !important;
    height: 26px !important;
  }

  .social-circle img{
    width: 13px !important;
    height: 13px !important;
  }

  /* Columnas a 1 col para no aplastar */
  .footer-columns{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .footer-col h4{
    font-size: 0.84rem !important;
  }

  .footer-col p,
  .footer-col address,
  .footer-col li,
  .footer-col a{
    font-size: 0.77rem !important;
  }

  /* Bottom sigue en fila, aún más chico */
  .footer-bottom{
    gap: 8px !important;
  }

  .footer-bottom p{
    white-space: nowrap !important;
         font-size: 0.54rem !important;
  }
}



/* ========================================================= 
   BOTÓN WHATSAPP 
========================================================= */
/* Contenedor del botón */
/* Botón flotante de WhatsApp */
.btn-wsp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;                 /* círculo verde de fondo */
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Imagen del logo */
.btn-wsp img {
  width: 70%;      /* ajustá 65–75% si querés más grande o más chico */
  height: 70%;
  display: block;
}

.btn-wsp:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}



/* CENTRAR INSTAGRAM */
.pie-principal .redes {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

.pie-principal .redes img {
    width: 34px;
    height: 34px;
}

/* ========================================================= 
   ABOUT US - REDISEÑO "CLEAN TECH" (AJUSTADO)
========================================================= */

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* CAMBIO: Aumentamos el hueco de 20px a 32px para que respiren */
  gap: 32px; 
  max-width: 1100px;
  margin: 60px auto; /* Más margen arriba/abajo */
  padding: 0 20px;
}

/* 2. LA TARJETA (CARTA BLANCA LIMPIA) */
.about-bloque {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px; /* Bordes un poco más suaves */
  
  box-shadow: 0 10px 30px rgba(11, 46, 85, 0.05);
  
  /* CAMBIO CLAVE: De 24px a 40px. 
     Esto es lo que hace que se vea "High-End" y no apretado */
  padding: 40px; 
  
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Línea superior Cyan */
.about-bloque::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #1ec5ff, #0b2e55);
}

/* TÍTULOS */
.about-bloque h2 {
  font-size: 1.7rem; /* Un pelín más grande */
  color: #030d49;
  
  margin-top: 0;
  /* CAMBIO: Más espacio entre el título y el texto (antes 15px) */
  margin-bottom: 24px; 
  
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Línea decorativa al lado del título */
.about-bloque h2::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: rgba(30, 197, 255, 0.2);
  max-width: 80px;
}

.about-bloque p {
  font-size: 1rem;
  /* CAMBIO: Más altura de línea para lectura cómoda */
  line-height: 1.8; 
  color: #475569;
  margin-bottom: 16px;
}

.about-bloque strong {
  color: #0b2e55;
  font-weight: 700;
}

/* =========================
   SECCIÓN EMPRESAS (TARJETAS IDÉNTICAS)
   ========================= */

.about-bloque.empresas {
  grid-column: 1 / -1; 
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 30px; 
}

.empresas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  gap: 20px;
  margin-top: 20px;
  
  /* CLAVE: 'stretch' estira todas las cajas a la misma altura */
  align-items: stretch; 
}

.empresa-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 15px;
  
  /* Flexbox para distribuir espacio */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* Manda el texto al fondo si sobra espacio */
  gap: 12px;
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  transition: transform 0.2s, border-color 0.2s;
  
  /* CLAVE: Altura total y mínima para uniformidad */
  height: 100%;
  min-height: 160px; 
}

.empresa-card:hover {
    transform: translateY(-2px);
    border-color: #1ec5ff;
}

/* LOGOS: CAJA FIJA PARA ALINEACIÓN PERFECTA */
.empresa-logo {
  /* Usamos width 100% de su contenedor y altura fija para que no bailen */
  width: 100%;
  height: 90px;        /* Altura reservada (grande como pediste) */
  object-fit: contain; /* La imagen se ajusta sin deformarse */
  display: block;
}

.empresa-desc {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 700;
  margin: 0;
  text-align: center;
  
  /* CLAVE: Empuja el texto siempre hacia abajo */
  margin-top: auto; 
}


.timeline{
  margin: 10px 0 0;
  padding-left: 18px;
  color:#475569;
}
.timeline li{ margin: 10px 0; }

.valores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  
  /* CAMBIO: Separamos más las cajitas de valores (antes 14px) */
  gap: 20px; 
  margin-top: 24px;
}

.valor-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  
  /* CAMBIO: Más relleno (antes 16px) */
  padding: 24px; 
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.valor-card h3{
  margin: 0 0 6px;
  color:#0b2e55;
  font-size: 1.05rem;
}

.pasos{
  margin: 12px 0 0;
  padding-left: 18px;
  color:#475569;
}
.pasos li{ margin: 10px 0; }

.faq details {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  
  /* CAMBIO: Más padding interno */
  padding: 18px 20px; 
  background: #fff;
  
  /* CAMBIO: Separación entre preguntas (antes 10px) */
  margin-top: 16px; 
}
.faq summary{
  cursor:pointer;
  font-weight: 800;
  color:#0b2e55;
}

.cta-final{
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.cta-actions{
  display:flex;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Base pill */
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  user-select: none;
}


.timeline-v2 {
  position: relative;
  margin-top: 24px; /* Más espacio con el título */
  padding-left: 22px;
}

.timeline-v2::before{
  content:"";
  position:absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(30,197,255,0.55), rgba(11,46,85,0.20));
}

.t-item {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 20px; /* Más separación entre el punto y el texto */
  
  /* CAMBIO: Más espacio vertical entre cada hito del año */
  padding: 0 0 24px; 
}

.t-dot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #1ec5ff;
  box-shadow: 0 0 0 4px rgba(30,197,255,0.18);
  margin-top: 6px;
}

.t-content {
  background: #f8fafc; /* Un fondo sutil ayuda a separar visualmente */
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  
  /* CAMBIO: Más aire dentro de cada cajita de año */
  padding: 20px 24px; 
}

.t-year{
  display: inline-block;
  font-weight: 900;
  color: #0b2e55;
  margin-bottom: 6px;
}

.t-content h3{
  margin: 0 0 6px;
  color: #030d49;
  font-size: 1.05rem;
}

.t-content p{
  margin: 0;
  color: #475569;
  line-height: 1.55;
}



/* Primario (celeste) */
.cta-btn--primary{
  background: linear-gradient(90deg, #1ec5ff, #12b8ff);
  color: #06152f;
  border: 1px solid rgba(30,197,255,0.35);
  box-shadow: 0 12px 28px rgba(30,197,255,0.18);
}

.cta-btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(30,197,255,0.22);
}

/* Secundario (outline oscuro) */
.cta-btn--ghost{
  background: transparent;
  color: #0b2e55;
  border: 1.5px solid rgba(11,46,85,0.45);
}

.cta-btn--ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(30,197,255,0.75);
  box-shadow: 0 10px 24px rgba(11,46,85,0.12);
}
@media (max-width: 520px){
  .cta-btn{ width: 100%; }
}


/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .empresas-grid {
    grid-template-columns: repeat(3, 1fr); 
  }
}

@media (max-width: 600px) {
  .about-bloque {
    padding: 20px;
  }
  .empresas-grid {
    grid-template-columns: repeat(2, 1fr); 
  }
}


/* ========================================================= 
   RESPONSIVE 
========================================================= */
@media (max-width: 900px) {
    .producto {
        width: 45%;
    }
}

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

@media (max-width: 600px) {
    .producto {
        width: 90%;
    }

    .producto img {
        height: 180px;
    }

    .btn-wsp {
        width: 52px;
        height: 52px;
    }
}

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

@media (max-width: 600px) {
    #productos-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* =========================================================
   ABOUT — RESPONSIVE (SOLO MEDIA QUERIES)
   Objetivo: mismo look desktop, pero 1 columna en mobile
   ========================================================= */

/* --------- Tablet / notebook chica --------- */
@media (max-width: 900px){

  .about-grid{
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 1100px;
    margin: 44px auto;
    padding: 0 16px;
  }

  .about-bloque{
    padding: 32px;                 /* mantiene “premium”, pero menos alto */
    border-radius: 18px;
  }

  .about-bloque h2{
    font-size: 1.55rem;
    margin-bottom: 18px;
    gap: 10px;
  }

  .about-bloque h2::after{
    max-width: 64px;
  }

  .about-bloque p{
    line-height: 1.75;
  }

  /* Empresas: 5 -> 3 */
  .about-bloque.empresas{
    padding: 26px;
  }

  .empresas-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .empresa-card{
    min-height: 150px;
    padding: 16px 12px;
    gap: 10px;
  }

  .empresa-logo{
    height: 78px;
  }

  /* Valores: mantiene 2 columnas en tablet (como desktop vibe) */
  .valores-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
  }

  .valor-card{
    padding: 20px;
  }

  /* Timeline: más compacto pero igual estilo */
  .timeline-v2{
    padding-left: 18px;
  }
  .timeline-v2::before{
    left: 6px;
  }
  .t-item{
    grid-template-columns: 14px 1fr;
    gap: 14px;
    padding: 0 0 18px;
  }
  .t-dot{
    width: 12px;
    height: 12px;
    margin-top: 7px;
  }
  .t-content{
    padding: 16px 18px;
  }

  /* FAQ: menos “bloque” pero limpio */
  .faq details{
    padding: 16px 18px;
    margin-top: 12px;
  }
}

/* --------- Mobile estándar --------- */
@media (max-width: 600px){

  .about-grid{
    margin: 34px auto;
    gap: 18px;
    padding: 0 14px;
  }

  .about-bloque{
    padding: 22px;
    border-radius: 18px;
  }

  .about-bloque h2{
    font-size: 1.34rem;
    margin-bottom: 16px;
  }

  /* En mobile, la línea decorativa del título a veces “aprieta”.
     La sacamos para que quede igual de prolijo que desktop. */
  .about-bloque h2::after{
    display: none;
  }

  .about-bloque p{
    font-size: 0.98rem;
    line-height: 1.70;
    margin-bottom: 14px;
  }

  /* Empresas: 3 -> 2 */
  .about-bloque.empresas{
    padding: 20px;
  }
  .empresas-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .empresa-card{
    min-height: 140px;
  }
  .empresa-logo{
    height: 70px;
  }
  .empresa-desc{
    font-size: 0.78rem;
  }

  /* Valores: 2 -> 1 para que respiren */
  .valores-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .valor-card{
    padding: 18px;
  }

  /* CTA: botones 100% ancho (ya tenías @520, acá lo aseguramos en 600) */
  .cta-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .cta-btn{
    width: 100%;
  }

  /* Timeline: aún más cómodo */
  .t-content{
    padding: 14px 16px;
  }
  .t-content h3{
    font-size: 1.00rem;
  }
  .t-content p{
    font-size: 0.94rem;
  }
}

/* --------- Phones chicos --------- */
@media (max-width: 420px){

  .about-grid{
    padding: 0 12px;
  }

  .about-bloque{
    padding: 18px;
  }

  .about-bloque h2{
    font-size: 1.26rem;
  }

  .timeline-v2{
    padding-left: 16px;
  }
}

/* =========================================================
   ABOUT — RESPONSIVE (TODO MÁS CHICO + MÁS MÁRGENES LATERALES)
   SOLO MEDIA QUERIES — Pegar al final
   ========================================================= */

/* Tablet y abajo */
@media (max-width: 900px){

  .about-grid{
    grid-template-columns: 1fr;
    gap: 18px;                 /* más compacto */
    max-width: 980px;
    margin: 34px auto;
    padding: 0 26px;           /* ✅ más margen lateral */
  }

  .about-bloque{
    padding: 26px;             /* ✅ más chico */
    border-radius: 18px;
  }

  .about-bloque h2{
    font-size: 1.38rem;        /* ✅ más chico */
    margin-bottom: 16px;
    gap: 10px;
  }

  .about-bloque h2::after{
    max-width: 56px;
  }

  .about-bloque p{
    font-size: 0.94rem;        /* ✅ más chico */
    line-height: 1.65;
    margin-bottom: 12px;
  }

  /* Empresas */
  .about-bloque.empresas{
    padding: 22px;
  }

  .empresas-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  .empresa-card{
    min-height: 140px;         /* ✅ más compacto */
    padding: 14px 10px;
    gap: 10px;
  }

  .empresa-logo{
    height: 70px;              /* ✅ más chico */
  }

  .empresa-desc{
    font-size: 0.76rem;        /* ✅ más chico */
  }

  /* Valores */
  .valores-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
  }

  .valor-card{
    padding: 18px;
  }

  .valor-card h3{
    font-size: 1.00rem;
  }

  /* Timeline */
  .timeline-v2{
    margin-top: 18px;
    padding-left: 18px;
  }

  .timeline-v2::before{
    left: 6px;
  }

  .t-item{
    grid-template-columns: 14px 1fr;
    gap: 14px;
    padding: 0 0 16px;
  }

  .t-dot{
    width: 11px;
    height: 11px;
    margin-top: 7px;
  }

  .t-content{
    padding: 14px 16px;
    border-radius: 12px;
  }

  .t-year{
    font-size: 0.86rem;
  }

  .t-content h3{
    font-size: 0.98rem;
  }

  .t-content p{
    font-size: 0.92rem;
    line-height: 1.55;
  }

  /* FAQ */
  .faq details{
    padding: 14px 16px;
    margin-top: 12px;
  }

  .faq summary{
    font-size: 0.95rem;
  }

  /* CTA */
  .cta-btn{
    padding: 10px 18px;
    font-size: 0.90rem;
  }
}

/* Mobile */
@media (max-width: 600px){

  .about-grid{
    margin: 28px auto;
    gap: 16px;
    padding: 0 22px;           /* ✅ margen lateral alto en mobile */
  }

  .about-bloque{
    padding: 20px;             /* ✅ más chico */
  }

  .about-bloque h2{
    font-size: 1.22rem;
    margin-bottom: 14px;
  }

  /* En mobile la línea del título suele apretar: la sacamos */
  .about-bloque h2::after{
    display: none;
  }

  .about-bloque p{
    font-size: 0.92rem;
    line-height: 1.62;
  }

  /* Empresas: 2 columnas */
  .about-bloque.empresas{
    padding: 18px;
  }

  .empresas-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .empresa-card{
    min-height: 128px;
    padding: 12px 10px;
  }

  .empresa-logo{
    height: 62px;
  }

  .empresa-desc{
    font-size: 0.74rem;
  }

  /* Valores: 1 columna */
  .valores-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .valor-card{
    padding: 16px;
  }

  .valor-card h3{
    font-size: 0.98rem;
  }

  /* CTA: botones en columna */
  .cta-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .cta-btn{
    width: 100%;
    padding: 10px 16px;
    font-size: 0.88rem;
  }
}

/* Phones chicos */
@media (max-width: 420px){

  .about-grid{
    padding: 0 18px;           /* ✅ sigue con margen lateral */
  }

  .about-bloque{
    padding: 18px;
  }

  .about-bloque h2{
    font-size: 1.16rem;
  }

  .about-bloque p{
    font-size: 0.90rem;
  }

  .t-content{
    padding: 12px 14px;
  }
}

/* === Botón del carrito en el header === */
/* === Botón del carrito en el header === */
.btn-carrito {
  font-family: var(--font-botones); /* Faltaba esto */
  /* ESTADO NORMAL: Oscuro para seguir la línea del menú */
  background: linear-gradient(135deg, #032d5c, #03465a);
  
  /* Texto BLANCO (importante para que se lea sobre el oscuro) */
  color: #ffffff;
  
  /* Le agregamos un borde sutil para que se note donde empieza */
  border: 1px solid rgba(30, 197, 255, 0.3);
  
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  
  /* Sombra apagada */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  
  transition: all 0.3s ease;
}

/* EFECTO HOVER: Se transforma en el botón "Cyan" */
.btn-carrito:hover {
  /* Cambio de fondo al Cyan brillante */
  background: linear-gradient(135deg, #1ec5ff, #4ad4ff);
  
  /* Cambio de texto a OSCURO (para leerse sobre el cyan) */
  color: hsl(213, 90%, 8%);
  
  /* Quitamos el borde porque el color ya destaca */
  border-color: transparent;
  
  /* Elevación y Sombra Brillante (Glow) */
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(12, 159, 232, 0.6);
}

/* La bolita del número */
#carrito-cantidad {
  /* NORMAL: Cyan para destacar sobre el botón oscuro */
  background: #1ec5ff; 
  color: #021225;
  
  padding: 2px 7px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* Cuando pasas el mouse sobre el BOTÓN, la bolita cambia para contrastar */
.btn-carrito:hover #carrito-cantidad {
  background: #021f46; /* Se vuelve oscura */
  color: #ffffff;      /* Letra blanca */
}

/* === Botón "Agregar al carrito" === */
.boton-agregar-carrito {
  font-family: var(--font-botones); /* Faltaba esto */
  background: #006eff;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 0 px 6px 0px 6px;
  cursor: pointer;
  font-weight: bold;
  /*margin-top: 5px;*/
}

.boton-agregar-carrito:hover {
  background: #0054c4;
}


/* === AJUSTES PARA LA IMAGEN PNG === */
.btn-carrito img {
  width: 22px;        /* Tamaño del icono */
  height: auto;
  display: block;
  transition: filter 0.3s ease; /* Suaviza el cambio de color */
  
  /* IMPORTANTE: Si tu imagen original NO es blanca pura, 
     descomenta la siguiente línea para forzarla a ser blanca por defecto: */
  /* filter: brightness(0) invert(1); */
}

/* === EFECTO HOVER PARA PNG === */
/* Al pasar el mouse, aplicamos un filtro que "tiñe" la imagen al azul #021f46 */
.btn-carrito:hover img {
  filter: brightness(0) saturate(100%) invert(9%) sepia(35%) saturate(6669%) hue-rotate(205deg) brightness(96%) contrast(98%);
}

/* Mantenemos el cambio de color del texto del botón */
.btn-carrito:hover {
  color: #021225; 
}

/* === MINI CARRITO (flotante fijo) === */
/* === MINI CARRITO (Variante Dark Glass) === */
.carrito-mini {

  position: fixed;

  top: calc(var(--header-height) + 10px); /* Ajusta según tu header */

  right: 20px;

  width: 340px;

 

  /* LÓGICA FLEXBOX VERTICAL (SÁNDWICH) */

  display: flex;

  flex-direction: column;

 

  /* Altura máxima: Nunca pasa del 80% de la pantalla */

  max-height: 80vh;

 

  /* Estilos Visuales (Dark Glass) */

  background: rgba(3, 15, 30, 0.95);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(30, 197, 255, 0.2);

  border-radius: 16px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);

 

  padding: 20px;

  padding-bottom: 0; /* Abajo 0 para que el footer se pegue bien */

 

  z-index: 1500;

 

  /* Estado oculto inicial */

  display: none;

  opacity: 0;

  transform: translateY(-10px);

  transition: opacity 0.3s ease, transform 0.3s ease;

}



.carrito-mini.visible {

  display: flex; /* IMPORTANTE: flex, no block */

  opacity: 1;

  transform: translateY(0);

}



/* Triangulito decorativo (oscuro para coincidir) */

.carrito-mini::before {

  content: "";

  position: absolute;

  top: -6px;

  right: 20px;

  width: 12px;

  height: 12px;

  background: rgba(3, 15, 30, 0.95); /* Mismo fondo */

  border-left: 1px solid rgba(30, 197, 255, 0.2); /* Borde solo en los lados visibles */

  border-top: 1px solid rgba(30, 197, 255, 0.2);

  transform: rotate(45deg);

}



.carrito-mini h3 {

  flex-shrink: 0;

  margin-bottom: 15px;

  font-size: 1.1rem;

  color: #fff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-bottom: 10px;

}



.carrito-body {

  flex-grow: 1;         /* Ocupa todo el espacio disponible */

  overflow-y: auto;     /* Activa el scroll ÚNICO aquí */

  min-height: 0;        /* Evita desbordes */

  padding-right: 5px;   /* Espacio para la barra */

  margin-bottom: 10px;  /* Separación con el footer */

}

.carrito-vacio {

  color: #b7c7da; /* Texto gris azulado */

  text-align: center;

  padding: 20px 0;

}



.carrito-items {

  max-height: none;

  overflow: visible;

  /* Ahora fluye libremente dentro del body */

}



/* Estilo del Scrollbar */

.carrito-body::-webkit-scrollbar { width: 4px; }

.carrito-body::-webkit-scrollbar-thumb { background: rgba(30, 197, 255, 0.3); border-radius: 4px; }

.carrito-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }



.carrito-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Separadores muy sutiles */

}



/* === CONTENEDOR PRINCIPAL (MINI CARRITO) === */

.carrito-mini {

  position: fixed;

  top: calc(var(--header-height) + 10px); /* Ajusta según tu header */

  right: 20px;

  width: 340px;

 

  /* LÓGICA FLEXBOX VERTICAL (SÁNDWICH) */

  display: flex;

  flex-direction: column;

 

  /* Altura máxima: Nunca pasa del 80% de la pantalla */

  max-height: 80vh;

 

  /* Estilos Visuales (Dark Glass) */

  background: rgba(3, 15, 30, 0.95);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(30, 197, 255, 0.2);

  border-radius: 16px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);

 

  padding: 20px;

  padding-bottom: 0; /* Abajo 0 para que el footer se pegue bien */

 

  z-index: 1500;

 

  /* Estado oculto inicial */

  display: none;

  opacity: 0;

  transform: translateY(-10px);

  transition: opacity 0.3s ease, transform 0.3s ease;

}



/* Estado visible (se activa con JS) */

.carrito-mini.visible {

  display: flex; /* IMPORTANTE: flex, no block */

  opacity: 1;

  transform: translateY(0);

}



/* Header Fijo */

.carrito-mini h3 {

  flex-shrink: 0;

  margin-bottom: 15px;

  font-size: 1.1rem;

  color: #fff;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  padding-bottom: 10px;

}



/* === EL CUERPO UNIFICADO (SCROLL MÁGICO) === */

/* Esta clase envuelve items + opciones */

.carrito-body {

  flex-grow: 1;         /* Ocupa todo el espacio disponible */

  overflow-y: auto;     /* Activa el scroll ÚNICO aquí */

  min-height: 0;        /* Evita desbordes */

  padding-right: 5px;   /* Espacio para la barra */

  margin-bottom: 10px;  /* Separación con el footer */

}



/* Estilo del Scrollbar */

.carrito-body::-webkit-scrollbar { width: 4px; }

.carrito-body::-webkit-scrollbar-thumb { background: rgba(30, 197, 255, 0.3); border-radius: 4px; }

.carrito-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }



/* === ITEMS (SIN SCROLL PROPIO) === */

.carrito-items {

  max-height: none;

  overflow: visible;

  /* Ahora fluye libremente dentro del body */

}



/* === FOOTER (FIJO AL FONDO) === */

.carrito-footer {

  flex-shrink: 0;

  background: transparent;

  padding-bottom: 20px;

  z-index: 2;

  border-top: 1px solid rgba(255, 255, 255, 0.1);

  padding-top: 15px;

}

.carrito-item-info {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.carrito-item-info strong {

  font-size: 0.95rem;

  font-weight: 600;

  color: #f4f7ff;           /* casi blanco, buen contraste */

}



/* Línea secundaria (precio, total, etc.): más clara que antes */

.carrito-item-info span {

  font-size: 0.84rem;

  color: #c1d4ea;           /* gris azulado clarito */

}



/* Controles Dark */

/* Contenedor de la cantidad: Estilo "Ghost" (Sutil) */

.carrito-item-controles {

  display: flex;

  align-items: center;

  gap: 8px;

 

  /* FONDO: Casi transparente, para no llamar la atención */

  background: rgba(255, 255, 255, 0.03);

 

  /* BORDE: Muy fino y delicado, solo para enmarcar */

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 99px; /* Forma de pastilla */

  padding: 2px 8px;

 

  /* El número: Blanco grisáceo (buen contraste, pero no encandila) */

  color: #e0e6ed;

  font-weight: 500;

  font-size: 0.9rem;

}



/* Los botones + y - */

.carrito-item-controles button {

  border: none;

  background: transparent;

  width: 20px;

  height: 20px;

  cursor: pointer;

 

  /* Color: Cyan para indicar que es clickeable, pero fino */

  color: #1ec5ff;

  font-size: 1rem;

 

  display: flex;

  align-items: center;

  justify-content: center;

  transition: color 0.2s, text-shadow 0.2s;

}



/* Efecto hover solo en los botoncitos */

.carrito-item-controles button:hover {

  color: #ffffff;

  /* Pequeño brillo al querer interactuar */

  text-shadow: 0 0 8px rgba(30, 197, 255, 0.8);

}



.carrito-eliminar {

  background: transparent !important;

  color: #ff5c5c !important; /* Rojo un poco más pastel */

  font-size: 0.85rem !important;

  opacity: 0.8;

  transition: opacity 0.2s;

}



.carrito-eliminar:hover {

  opacity: 1;

  text-decoration: underline;

}



.carrito-total {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 1.15rem;

  font-weight: 700;

  color: #fff;

  margin: 15px 0;

  padding-top: 15px;

  border-top: 1px solid rgba(255, 255, 255, 0.15);

}



/* El botón de finalizar sigue siendo el protagonista */

.carrito-finalizar-mini {

  width: 100%;

  background: linear-gradient(135deg, #1ec5ff, #4ad4ff);

  color: #021225;

  border: none;

  padding: 12px;

  border-radius: 999px;

  font-weight: 800;

  cursor: pointer;

  font-size: 1rem;

  box-shadow: 0 0 20px rgba(30, 197, 255, 0.25); /* Glow cyan */

  transition: all 0.2s ease;

}



.carrito-finalizar-mini:hover {

  transform: translateY(-2px);

  box-shadow: 0 0 30px rgba(30, 197, 255, 0.45);

}



/* ===== Opciones dentro del mini carrito ===== */

.carrito-opciones{

  margin-top: 10px;

  padding-top: 12px;

  border-top: 1px solid rgba(255,255,255,0.12);

  display: grid;

  gap: 10px;

}



.opcion-group{

  display: grid;

  gap: 8px;

}



.opcion-title{

  font-size: 0.85rem;

  font-weight: 700;

  color: #e9f3ff;

  letter-spacing: .02em;

}



.opcion-pills{

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.pill{

  position: relative;

  display: inline-flex;

  align-items: center;

  cursor: pointer;

}



.pill input{

  position: absolute;

  opacity: 0;

  pointer-events: none;

}



.pill span{

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 7px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.18);

  background: rgba(255,255,255,0.04);

  color: #cfe2ff;

  font-size: 0.84rem;

  transition: border-color .2s ease, background .2s ease, transform .2s ease;

}



.pill input:checked + span{

  border-color: rgba(30,197,255,0.55);

  background: rgba(30,197,255,0.10);

  color: #f4fbff;

}



.pill:hover span{

  transform: translateY(-1px);

  border-color: rgba(30,197,255,0.35);

}



/* Totales extra (recargo) */

.carrito-totales{

  margin-top: 10px;

  display: grid;

  gap: 6px;

}



.carrito-linea{

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.9rem;

  color: #c1d4ea;

}



.carrito-linea strong{

  color: #fff;

}



.carrito-recargo{

  color: #ffd08a;

}


/* =========================================
   RESPONSIVE CARRITO MINI (VERSIÓN COMPACTA)
   ========================================= */
@media (max-width: 600px) {
  .carrito-mini {
    /* 1. ANCHO: 85% para que deje márgenes a los lados */
    width: 85%; 
    left: 7.5%; /* Centrado (100% - 85% = 15% / 2 = 7.5%) */
    right: auto;
    
    /* 2. POSICIÓN: Baja un poco más */
    top: 80px; 
    
    /* 3. ALTURA: Solo ocupa el 60% de la pantalla para no ser invasivo */
    max-height: 70vh; 
    
    /* 4. RELLENO: Menos aire interno */
    padding: 15px; 
  }

  /* Ajuste cuando scrolleas (Header fino) */
  header.compact ~ .carrito-mini {
    top: 60px; 
  }

  /* === ACHICAR TEXTOS INTERNOS EN MÓVIL === */
  
  /* Título "Tu Carrito" más chico */
  .carrito-mini h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  /* Items más pegaditos */
  .carrito-item {
    padding: 8px 0;
  }

  /* Texto del producto más pequeño */
  .carrito-item-info strong {
    font-size: 0.85rem;
  }
  .carrito-item-info span {
    font-size: 0.75rem;
  }

  /* Botones de cantidad (+ -) más compactos */
  .carrito-item-controles {
    padding: 0 6px;
  }
  .carrito-item-controles button {
    width: 18px;
    height: 18px;
    font-size: 0.9rem;
  }
}



/* ===== DETALLE PRODUCTO ===== */
.detalle-wrap{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.detalle-img-grande{
  width: 100%;
  height: 420px;
  object-fit: contain;
  background: #fff;
  /*border: 2px solid var(--azul);*/
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 10px;
}

.detalle-miniaturas{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detalle-thumb{
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  padding: 4px;
  transition: border .15s ease, transform .1s ease;
}

.detalle-thumb:hover{
  transform: translateY(-2px);
}

.detalle-thumb.active{
  border-color: var(--azul);
}

.detalle-info h1{
  color: var(--azul-oscuro);
  margin-bottom: 8px;
}

.detalle-precio{
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--azul);
  margin-bottom: 12px;
}

.detalle-desc{
  margin-bottom: 12px;
  line-height: 1.7;
}

.detalle-caract{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.detalle-botones{
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.detalle-volver{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--azul-oscuro);
  background: transparent;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.detalle-volver:hover{
  background: rgba(14,59,111,.08);      
  border-color: rgba(14,59,111,.20);    
  transform: translateX(-2px);          
}

/* responsive detalle */
@media (max-width: 850px){
  .detalle-wrap{
    grid-template-columns: 1fr;
  }
  .detalle-img-grande{
    height: 300px;
  }
  .detalle-miniaturas{
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* ================================
   FIX: Botones mismo alto en detalle
   ================================ */
.detalle-botones{
  display: flex;
  gap: 12px;
  align-items: stretch; /* obligo a que ambos ocupen el mismo alto */
}

/* Base común SOLO en detalle */
.detalle-botones .boton-agregar-carrito,
.detalle-botones .boton-consulta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;      /* <- mismo alto visual */
  line-height: 1.1;
  padding-top: 0;        /* el alto lo define min-height */
  padding-bottom: 0;
  white-space: nowrap;
}

/* Respetamos estilo “viejo” del agregar */
.detalle-botones .boton-agregar-carrito{
  padding-inline: 18px;
  border-radius: 8px;
}

/* Hacemos el consultar un poco más largo */
.detalle-botones .boton-consulta{
  padding-inline: 26px;  /* más ancho sin afectar altura */
  border-radius: 999px;
}

/* ===== FILTROS POR CATEGORÍA ===== */
.filtros{
  max-width: var(--max);
  margin: 14px auto 8px;
  padding: 0 20px;
}

.filtros-titulo{
  font-weight: 700;
  color: var(--azul-oscuro);
  margin-bottom: 8px;
}

.filtros-chips{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip{
  border: 1px solid var(--azul);
  background: #fff;
  color: var(--azul-oscuro);
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

.chip.active{
  background: #ffbc00;          /* amarillo carrito */
  color: #0b1b2b;
  border-color: #ffbc00;
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
}

/* mobile: una fila con scroll */
@media (max-width: 600px){
  .filtros-chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .chip{
    white-space: nowrap;
  }
}

/* ===== DETALLE: AJUSTES SOLO MOBILE ===== */
@media (max-width: 600px){
  .detalle-wrap{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .detalle-img-grande{
    height: 260px;
    margin-bottom: 8px;
  }

  .detalle-miniaturas{
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  /* título un poco más chico */
  .detalle-info h1{
    font-size: 1.25rem;
  }

  /* BOTONES: columna, pero más angostos y centrados */
  .detalle-botones{
    flex-direction: column;
    align-items: center;   /* centra el stack */
    gap: 10px;
  }

  .detalle-botones .boton-agregar-carrito,
  .detalle-botones .boton-consulta{
    width: 85%;           /* ya no ocupan el 100% */
    max-width: 280px;     /* para que no se hagan gigantes en pantallas grandes */
    justify-content: center;
  }
}

  /* el de WhatsApp sin min-width fijo para que no rompa en cel */
  .detalle-botones .boton-consulta{
    min-width: 0;
 }

 /* =========================================================
   DETALLE PRODUCTO — MOBILE REORDER (SOLO <= 850px)
   Objetivo:
   IMG -> MINIATURAS -> TITULO+PRECIO+BOTONES -> DESCRIP -> CARACT -> VOLVER
   (sin tocar desktop)
   ========================================================= */
@media (max-width: 850px){

  /* 1) En mobile lo transformamos en una grilla de 1 columna con áreas */
  .detalle-wrap{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;

    /* Orden visual */
    display: grid !important;
    grid-template-areas:
      "img"
      "thumbs"
      "title"
      "price"
      "actions"
      "desc"
      "caract"
      "volver";
  }

  /* 2) IMPORTANTE: “aplanamos” wrappers típicos sin tocar HTML
        - si tu estructura es: [div(izq)] + [div.detalle-info]
        esto permite que img/thumbs y los hijos de .detalle-info
        sean items directos de la grilla y se puedan reordenar. */
  .detalle-wrap > div:first-child{
    display: contents !important;
  }
  .detalle-info{
    display: contents !important;
  }

  /* 3) Asignamos áreas */
  .detalle-img-grande{
    grid-area: img;
    height: 300px !important;
  }

  .detalle-miniaturas{
    grid-area: thumbs;
    margin-top: 10px !important;

    /* que no rompa: carrusel horizontal prolijo */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 10px !important;
    padding-bottom: 6px !important;
  }

  .detalle-thumb{
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 auto !important;
  }

  .detalle-info h1{
    grid-area: title;
    margin: 10px 0 0 !important;
    line-height: 1.14 !important;
    font-size: 1.32rem !important;
  }

  .detalle-precio{
    grid-area: price;
    margin: 6px 0 0 !important;
    font-size: 1.22rem !important;
  }

  .detalle-botones{
    grid-area: actions;
    margin: 12px 0 0 !important;

    /* en mobile: stack prolijo */
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .detalle-botones .boton-agregar-carrito,
  .detalle-botones .boton-consulta{
    width: 100% !important;
  }

  .detalle-desc{
    grid-area: desc;
    margin-top: 18px !important; /* ✅ la descripción “más abajo” */
    line-height: 1.7 !important;
  }

  .detalle-caract{
    grid-area: caract;
    margin-top: 10px !important;
  }

  .detalle-volver{
    grid-area: volver;
    margin-top: 14px !important; /* ✅ va último */
    justify-self: start !important;
  }
}

/* Ajuste extra para phones chicos */
@media (max-width: 420px){
  .detalle-img-grande{ height: 270px !important; }
  .detalle-info h1{ font-size: 1.24rem !important; }
  .detalle-precio{ font-size: 1.16rem !important; }
  .detalle-thumb{ width: 58px !important; height: 58px !important; }
}

/* =========================================================
   DETALLE PRODUCTO — FIXES MOBILE (solo detalle)
   1) Más margen izquierdo en título/precio/botones
   2) Botón "Agregar al carrito" legible (sin afectar cards)
   ========================================================= */
@media (max-width: 850px){

  /* 1) Más “aire” lateral SOLO en el bloque info (título/precio/botones) */
  .detalle-wrap .detalle-info h1,
  .detalle-wrap .detalle-precio,
  .detalle-wrap .detalle-botones{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* (Opcional recomendado) También al texto para que no quede “pegado” */
  .detalle-wrap .detalle-desc,
  .detalle-wrap .detalle-caract{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 2) FIX: tu responsive de productos te está achicando .boton-agregar-carrito
        (porque comparten clase). En detalle lo pisamos SOLO acá. */
  .detalle-wrap .detalle-botones .boton-agregar-carrito{
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;

    min-height: 46px !important;
    padding: 0 18px !important;   /* respeta tu fix de mismo alto */
    line-height: 1.1 !important;
  }

  /* Ya que estamos: que el consultar quede parejo también */
  .detalle-wrap .detalle-botones .boton-consulta{
    font-size: 0.92rem !important;
    font-weight: 800 !important;

    min-height: 46px !important;
    padding: 0 22px !important;
    line-height: 1.1 !important;
  }
}


/* ========================================================= 
   BLOQUE SISTEMAS: FULL WIDTH REAL (De borde a borde)
========================================================= */

.sistemas-section {
    position: relative;
    
    /* 1. EL TRUCO FULL BLEED: Rompe el contenedor padre */
    width: 100vw;              /* Ancho total de la ventana */
    margin-left: calc(50% - 50vw); /* Se mueve a la izquierda para tocar el borde */
    margin-right: calc(50% - 50vw);/* Se mueve a la derecha para tocar el borde */
    
    /* 2. ESPACIADO */
   /* margin-top: 350px;      */    /* Separación con el bloque de arriba */
    padding: 80px 0 140px 0;   /* Padding vertical (horizontal 0 porque usamos container) */
    
    /* 3. ESTÉTICA */
    background-color: #020617; /* Fondo oscuro */
    border-radius: 0;          /* Sin bordes redondeados */
    overflow: hidden;          /* Corta la luz que sobra */
    
    /* Borde sutil arriba */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;

    
}

/* === LA CURVA DE LUZ (HORIZONTE) === */
.sistemas-section::after {
    content: "";
    position: absolute;
    
    /* Para que la curva sea suave en pantalla completa, 
       el círculo debe ser MUY grande (140% de la pantalla) */
    width: 140%;    
    height: 400px;
    
    /* Centrado */
    left: 50%;
    transform: translateX(-50%);
    
    /* Posición vertical: Lo escondemos abajo para que solo asome el brillo */
    bottom: -320px; 
    
    border-radius: 50%; /* Crea el óvalo */
    background: transparent;
    
    /* EL GLOW NEÓN (Intenso) */
    box-shadow: 
        0 -4px 20px rgba(255, 255, 255, 0.6),  /* Núcleo blanco */
        0 -20px 60px rgba(30, 197, 255, 0.5),  /* Cuerpo cyan */
        0 -50px 150px rgba(0, 100, 255, 0.4);  /* Ambiente azul */
        
    pointer-events: none;
    z-index: 1;
}

/* === CONTENEDOR INTERNO === 
   (Esto asegura que tu texto y tarjetas NO se peguen a los bordes,
   sino que se mantengan centrados igual que el resto de la web) */
.container-sistemas {
    width: 100%;
    max-width: 1200px; /* Ancho máximo del contenido */
    margin: 0 auto;    /* Centrado */
    padding: 0 20px;   /* Margen de seguridad en móviles */
    position: relative;
    z-index: 2;
    text-align: center;
}
/* Ajuste Responsive: En celular sí dejamos que toque los bordes para ganar espacio */
@media (max-width: 768px) {
    .sistemas-section {
        width: 100%;
        border-radius: 0;
        margin-top: 60px;
        margin-bottom: 60px;
    }
}


/* === HEADER (Más compacto) === */
.sistemas-header {
  /* 3. COMPACTACIÓN: Menos margen abajo (antes 40px) */
  margin-bottom: 55px; 
}

.sistemas-header h2 {
  /* 3. COMPACTACIÓN: Fuente un poco más chica (antes 2rem) */
  font-size: 1.8rem; 
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.1;
  /* Sombra para que destaque sobre el fondo nuevo */
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.text-gradient {
  background-color: #00bfff;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block; 
}

.sistemas-header p {
  font-size: 0.95rem; /* Letra un pelín más chica */
  color: #cbd5e1; /* Texto más claro para contrastar con el fondo azulado */
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.4;
}

/* === BENTO GRID (Más ajustado) === */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  /* 3. COMPACTACIÓN: Menos hueco entre tarjetas (antes 25px) */
  gap: 20px; 
  /* 3. COMPACTACIÓN: Menos espacio antes del botón (antes 50px) */
  margin-bottom: 30px;
}

/* === TARJETAS === */
.bento-card {
  position: relative;
  background: transparent; 
  border-radius: 16px;
  padding: 2px; /* Grosor del borde de luz */
  
  display: flex;
  overflow: hidden; 
  /* 3. COMPACTACIÓN: Altura reducida (antes 200px). Ahorra mucho espacio vert. */
  min-height: 170px;
  
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* CAPA 1: Luz Giratoria (Se mantiene igual, funciona perfecto) */
.bento-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 0;
  animation: rotate-border 4s linear infinite;
}

.bento-card.border-cyan::before {
  background: conic-gradient(transparent 270deg, #00d2ff 320deg, transparent 360deg);
}

.bento-card.border-green::before {
  background: conic-gradient(transparent 270deg, #00098d 320deg, transparent 360deg);
}

/* CAPA 2: Máscara oscura */
.card-bg-mask {
  position: absolute;
  inset: 1px; 
  /* Ajustamos el fondo de la tarjeta para que se funda con el nuevo fondo de sección */
  background: #020617; 
  border-radius: 15px; 
  z-index: 1;
}

/* CONTENIDO */
.card-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* 3. COMPACTACIÓN: Padding interno reducido (antes 25px) */
  padding: 20px; 
}

.card-content h3 {
  flex-basis: 50%;
  /* Texto un poco más chico para equilibrar la altura reducida */
  font-size: 1.2rem; 
  color: #fff;
  font-weight: 700;
  text-align: left;
  line-height: 1.25;
}

/* IMÁGENES */
.card-image-wrapper {
  flex-basis: 45%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card-image-wrapper img {
  width: 130%; /* Ajustado levemente para la nueva altura */
  max-width: none;
  transform: scale(1);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)); 
  transition: transform 0.4s ease;
}

.bento-card:hover .card-image-wrapper img {
  transform: scale(1.1) translateY(-5px);
}

/* Brillo ambiental (Glow) */
.glow-internal {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.15;
  z-index: 5;
  top: 20%;
  right: 10%;
  pointer-events: none;
}
.glow-internal.cyan { background: #00d2ff; }
.glow-internal.green { background: #22c55e; }


/* === CTA (BOTÓN) === */
.sistemas-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Gap reducido */
}

/* === CTA (BOTÓN ESTILO "GHOST" NEÓN) === */
.sistemas-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.btn-rectangular {
  font-family: var(--font-botones); /* Faltaba esto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* 1. ESTILO GHOST (Transparente con Borde) */
  background: transparent; 
  border: 1px solid #1ec5ff; /* Borde Cyan Brillante */
  color: #1ec5ff;            /* Texto Cyan Brillante */
  
  /* 2. FORMA Y TAMAÑO */
  border-radius: 999px;      /* Pill shape */
  padding: 12px 36px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  
  /* 3. GLOW INICIAL (Sutil) */
  box-shadow: 0 0 15px rgba(30, 197, 255, 0.15);
  
  /* Transición suave */
  transition: all 0.3s ease;
}

/* === INTERACCIÓN (MOVIMIENTO) === */
/* Al pasar el mouse, se RELLENA de luz (Fill Effect) */
.btn-rectangular:hover {
  background: #1ec5ff;  /* Se llena de Cyan */
  color: #021225;       /* El texto se oscurece para leerse bien */
  border-color: #1ec5ff;
  
  /* Se eleva y brilla fuerte */
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(30, 197, 255, 0.6);
}

/* Mantenemos el latido que te gustaba */
.btn-pulse {
  animation: btn-heartbeat 2s infinite ease-in-out;
}

.microcopy {
  font-size: 0.8rem;
  color: #94a3b8;
}

/* === ANIMACIONES (Intactas) === */
@keyframes rotate-border {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes btn-heartbeat {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30, 197, 255, 0.4); }
  50% { transform: scale(1.03); box-shadow: 0 0 20px 10px rgba(30, 197, 255, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30, 197, 255, 0); }
}

/* 1. Prevenir scroll horizontal (Ya lo tenías, lo mantenemos) */
body { overflow-x: clip; }

/* ========================================================= 
   CONECTOR DE FUSIÓN (CORREGIDO FULL WIDTH)
========================================================= */
.sistemas-fade-out {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  height: 250px;
  margin-top: -2px;
  position: relative;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(to bottom,
      #020617 0%,
      rgba(2, 6, 23, 0.95) 20%,
      rgba(2, 6, 23, 0.7) 45%,
      rgba(2, 6, 23, 0.4) 65%,
      rgba(2, 6, 23, 0.1) 85%,
      rgba(2, 6, 23, 0.0) 100%
  );
}


/* =========================================
   AJUSTE MARGENES LATERALES SOLO EN MOBILE
   ========================================= */
@media (max-width: 600px) {

  main {
    padding-left: 0;
    padding-right: 0;
  }

  .hero-bridge,
  .sistemas-section,
  .sistemas-fade-out {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .hero-soltec__visual {
    order: -1;
    margin-bottom: 0.9rem;
  }

  .sector-badge__chip {
    padding: 0.32rem 0.7rem;
    line-height: 1.2;
    background-color: #020b1e;
    border-radius: var(--soltec-radius-full);
  }

  .hero-soltec__planet-core::after {
    font-size: 0.78rem;
    padding-bottom: 1.3rem;
  }
}


/* =========================================================
   SISTEMAS SECTION — RESPONSIVE FIX (solo mobile/tablet)
   (UNIFICADO, sin pisarse)
   ========================================================= */
@media (max-width: 768px) {

  /* 1) FULL BLEED REAL + eliminar márgenes que mostraban fondo blanco */
  .sistemas-section{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 64px 0 110px 0 !important;
    background-color: #020617 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* 2) Curva/glow */
  .sistemas-section::after{
    width: 160% !important;
    height: 320px !important;
    bottom: -265px !important;
    opacity: 0.9 !important;
  }

  /* 3) Container */
  .container-sistemas{
    padding: 0 16px !important;
    max-width: 1200px !important;
  }

  /* 4) Header */
  .sistemas-header{
    margin-bottom: 36px !important;
  }

  .sistemas-header h2{
    font-size: clamp(1.55rem, 5.8vw, 1.95rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 30px !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  }

  .sistemas-header p{
    font-size: 0.84rem !important;
    line-height: 1.42 !important;
    max-width: 32rem !important;
  }

  /* 5) BENTO: 2 en línea (estado final que hoy gana) */
  .bento-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 22px !important; /* venía del bloque anterior */
  }

  /* 6) Card (estado final equivalente) */
  .bento-card{
    min-height: 0 !important;       /* override final */
    padding: 2px !important;        /* mantiene borde neon (del fix) */
    border-radius: 14px !important;
  }

  .card-bg-mask{
    border-radius: 13px !important;
  }

  /* Contenido: título arriba + imagen abajo (estado final) */
  .card-content{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding: 14px 12px !important;
    gap: 10px !important;
  }

  .card-content h3{
    flex-basis: auto !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .card-image-wrapper{
    flex-basis: auto !important;
    width: 100% !important;
    height: auto !important;
    justify-content: center !important;
  }

  .card-image-wrapper img{
    width: 92% !important;
    max-width: 150px !important;
    transform: none !important;
  }

  /* 7) CTA */
  .sistemas-cta{
    margin-top: 70px !important;
    gap: 10px !important;
  }

  .btn-rectangular{
    padding: 9px 22px !important;
    font-size: 0.90rem !important;
    font-weight: 700 !important;
    border-width: 1px !important;
    width: fit-content !important;
    max-width: 280px !important;
  }

  .microcopy{
    font-size: 0.78rem !important;
  }

  /* 8) Fade-out */
  .sistemas-fade-out{
    height: 180px !important;
    margin-top: -1px !important;
    margin-bottom: 110px !important;
  }
}


/* =========================================================
   Ajuste extra para phones chicos (UNIFICADO)
   ========================================================= */
@media (max-width: 420px) {

  .sistemas-section{
    padding: 58px 0 100px 0 !important;
  }

  .sistemas-header h2{
    font-size: clamp(1.45rem, 6.4vw, 1.80rem) !important;
  }

  /* BENTO más compacto (estado final que hoy gana) */
  .bento-grid{
    gap: 10px !important;
  }

  .card-content{
    padding: 12px 10px !important;
    gap: 8px !important;
  }

  .card-content h3{
    font-size: 0.92rem !important;
  }

  .card-image-wrapper img{
    width: 95% !important;
    max-width: 125px !important;
  }

  .btn-rectangular{
    padding: 8px 18px !important;
    font-size: 0.86rem !important;
    max-width: 260px !important;
  }

  .sistemas-section::after{
    height: 300px !important;
    bottom: -250px !important;
  }
}





/* OPCIONAL: Si sientes que el título "Productos" queda muy lejos o muy tapado */
/* Agrega esto para ajustar la distancia visual */
.productos {
    margin-top: -170px; /* Sube la sección productos para que entre en la zona del degradado */
    position: relative;
    z-index: 2; /* Asegura que el contenido quede ENCIMA de la sombra, no tapado */
}


/* =========================================
   SISTEMAS (Código Completo y Corregido)
   ========================================= */

/* 1. EL CONTENEDOR PRINCIPAL (Vital para el hover) */
.nav-item-sistemas {
  position: relative; 
  height: 100%;        /* Ocupa toda la altura del header */
  display: flex;       
  align-items: center; /* Centra verticalmente el botón dentro del header */
}

/* 2. EL BOTÓN "Sistemas" (Igual que los otros links) */
.nav-parent {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 550;   /* Peso de la fuente */
  padding: 0 10px;    /* Solo padding lateral */
  cursor: pointer;
  opacity: .95;
  
  /* ALINEACIÓN EXACTA */
  display: inline-flex;
  align-items: center;
  height: 40px; 
  
  /* TRUCO DEL ESPEJO: Borde arriba y abajo transparentes */
  /* Esto asegura que quede a la misma altura visual que "Inicio" */
  border-top: 3px solid transparent; 
  border-bottom: 3px solid transparent;
  
  transition: all .25s ease;
}


/* 3. LA CAJA DEL SUBMENÚ (Desplegable) */
.nav-submenu {
  display: none;       /* Oculto por defecto */
  position: absolute;
  top: 100%;           /* Se pega justo debajo del header */
  left: 0;
  
  background: #ffffff; /* Fondo Blanco */
  min-width: 230px;    /* Ancho de la caja */
  padding: 6px 0;
  border-radius: 0 0 10px 10px; /* Bordes redondos solo abajo */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 1500;
  
  flex-direction: column; /* Pone los links uno debajo del otro */
}

/* REGLA MÁGICA: Muestra el menú al pasar mouse por el contenedor */
.nav-item-sistemas:hover .nav-submenu {
  display: flex; 
}

/* 4. LOS ENLACES DENTRO DEL SUBMENÚ */
.nav-submenu a {
  display: block;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  
  /* IMPORTANTE: Color oscuro porque el fondo es blanco */
  color: #0b2e55; /* O usa var(--azul-oscuro) si la tienes definida */
  
  /* Reseteamos estilos globales del header para que no se rompa */
  border: none;
  height: auto; 
  margin: 0;
}

/* Efecto Hover de los links internos */
.nav-submenu a:hover {
  background: #062774;        /* Fondo grisaceo suave */
  color: #ffffff;             /* Texto azul brillante */
  /*border-left-color: #ffd76a;  Borde lateral de color */
  box-shadow: none;
  transform: none;            /* Evita que se mueva */
}
/* ============= HERO SOLTEC NUEVO ============= */

:root {
  --soltec-bg-1: #021f46;
  --soltec-bg-2: #013a6b;
  --soltec-accent: #1ec5ff;
  --soltec-accent-soft: rgba(30, 197, 255, 0.2);
  --soltec-text-main: #f5fbff;
  --soltec-text-muted: #b7c7da;
  --soltec-chip-bg: rgba(6, 35, 76, 0.9);
  --soltec-radius-lg: 1.75rem;
  --soltec-radius-full: 999px;
  --soltec-shadow-soft: 0 22px 45px rgba(0, 0, 0, 0.35);
}

.hero-soltec {
  /* Mobile-first: altura automática y padding más contenido */
min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
padding: 4rem 1.5rem;
  background: radial-gradient(circle at top, #063a82 0, #020b1e 55%);
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* En mobile no usamos full-bleed; se aplica en desktop via @media (min-width) */
  margin-left: 0;
  margin-right: 0;
}

.hero-soltec::before,
.hero-soltec::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--soltec-accent-soft), transparent);
  filter: blur(4px);
  opacity: 0.65;
  z-index: -1;
}

.hero-soltec::before {
  top: -160px;
  left: -90px;
}
.hero-soltec::after {
  bottom: -160px;
  right: -90px;
}
.hero-soltec__inner {
  width: min(1140px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  padding-right: 0px !important;
}

/* ---- Columna texto ---- */

.hero-soltec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--soltec-radius-full);
  border: 1px solid rgba(193, 227, 255, 0.35);
  background: rgba(5, 32, 77, 0.8);
  font-size: 0.82rem;
  color: var(--soltec-text-muted);
  margin-bottom: 1.2rem;
}

.hero-soltec__eyebrow i {
  font-size: 0.9rem;
  color: var(--soltec-accent);
}

.hero-soltec__title {
  font-size: clamp(2.1rem, 3vw + 1rem, 3.15rem);
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
  color: #DEF7FF;
}

.hero-soltec__title span {
  color: var(--soltec-accent);
}

.hero-soltec__subtitle {
  font-size: 0.98rem;
  color: var(--soltec-text-muted);
  max-width: 34rem;
  line-height: 1.6;
margin-bottom: 1.7rem;
}

.hero-soltec__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.hero-soltec__pill {
  padding: 0.3rem 0.9rem;
  border-radius: var(--soltec-radius-full);
  border: 1px solid rgba(140, 185, 230, 0.4);
  font-size: 0.8rem;
  color: var(--soltec-text-muted);
  background: rgba(0, 22, 56, 0.9);
  backdrop-filter: blur(6px);
}

/* Clase NUEVA para datos informativos (No clickeables) */
.hero-soltec__feature {
  /* Mismas dimensiones que tenías */
  padding: 0.3rem 0.9rem;
  border-radius: var(--soltec-radius-full);
  font-size: 0.8rem;
  
  /* CAMBIO VISUAL CLAVE: */
  /* 1. Quitamos el azul y ponemos un borde blanco casi invisible */
  border: 1px solid rgba(255, 255, 255, 0.15);
  
  /* 2. Fondo más oscuro/neutro para que se hunda en el diseño */
  background: rgba(28, 36, 80, 0.2); 
  backdrop-filter: blur(4px);
  
  /* 3. Texto gris perla (no blanco brillante) */
  color: #697686; 
  
  /* 4. Cursor default para confirmar que no es un link */
  cursor: default;
  user-select: none;
}

.hero-soltec__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.btn-soltec-primary,
.btn-soltec-ghost {
  font-family: var(--font-botones); /* Faltaba esto */
  border-radius: var(--soltec-radius-full);
  padding: 0.7rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: all 0.18s ease-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;

}

.btn-soltec-primary {
  background: linear-gradient(135deg, #1ec5ff, #4ad4ff);
  color: #021225;
  box-shadow: 0 12px 30px rgba(12, 159, 232, 0.6);
}

.btn-soltec-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(12, 159, 232, 0.75);
}

.btn-soltec-ghost {
  background: transparent;
  color: var(--soltec-accent);
  border: 1px solid rgba(92, 173, 228, 0.7);
}

.btn-soltec-ghost:hover {
  background: rgba(11, 50, 102, 0.9);
  transform: translateY(-1px);
}

.hero-soltec__note {
  font-size: 0.78rem;
  color: var(--soltec-text-muted);
  margin-top: 0.8rem;
  opacity: 0.8;
}

/* ---- Columna gráfica ---- */

.hero-soltec__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-soltec__planet-wrapper {
  position: relative;
  /* Mobile-first: planeta más chico para que entre cómodo */
 --planet-size: min(360px, 80vw);

  /* Radio base usado por los chips (ajustado en mobile via media query) */
  --orbit-outer-radius-factor: 0.58; 

  width: var(--planet-size);
  aspect-ratio: 1 / 1;
  filter: drop-shadow(var(--soltec-shadow-soft));
  display: flex;
  justify-content: center;
  align-items: center;
}
.orbit--outer {
  /* --- AJUSTE: -10% hace que el círculo coincida con los chips --- */
  inset: -8%;
  
  border-style: dashed;
  border-width: 1px;
  opacity: 0.5;
  pointer-events: none;
}



.hero-soltec__planet-core {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 20%, #ffffff 0, #bde8ff 18%, transparent 42%),
    radial-gradient(circle at 80% 80%, #0f6ab8 0, #021f46 52%);
  border: 1px solid rgba(188, 224, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(30, 197, 255, 0.3),
    0 0 30px rgba(30, 197, 255, 0.35);
  overflow: hidden;
}

.hero-soltec__planet-core::before {
  content: "";
  position: absolute;
  inset: -30%;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(1, 148, 255, 0.45) 0, transparent 55%),
    conic-gradient(
      from 180deg,
      rgba(255, 255, 255, 0.05),
      rgba(30, 197, 255, 0.7),
      rgba(255, 255, 255, 0.05),
      rgba(30, 197, 255, 0.7),
      rgba(255, 255, 255, 0.05)
    );
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: spin-slow 35s linear infinite;
}

.hero-soltec__planet-core::after {
  content: "Soltec ERP";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;      /* <-- CAMBIO 1: Centra verticalmente */
  justify-content: center;  /* <-- Mantiene el centro horizontal */
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  /* padding-bottom: 1.6rem; <-- CAMBIO 2: Borramos esto para que no rompa el centro exacto */
  background: radial-gradient(
    circle at 50% 120%,
    rgba(2, 8, 34, 0) 0,
    rgba(2, 8, 34, 0.93) 65%
  );
}

@media (max-width: 968px) {
  .hero-soltec__planet-core::after {
    align-items: center;     /* Fuerza el centrado vertical en celulares */
    padding-bottom: 0;       /* Anula cualquier empuje desde abajo */
      font-size: 0.7rem;
    /* Opcional: Si en el celu el texto se ve muy grande, podés achicarlo un poquito acá */
    /* font-size: 0.8rem; */ 
  }
}
.orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(165, 211, 255, 0.35);
  transform-origin: center;
  animation: spin-slow 45s linear infinite;
}

.orbit--inner {
  inset: 8%;
  animation-duration: 30s;
  border-style: solid;
  border-color: rgba(73,179,255,0.6);
}

.orbit--outer {
  inset: -6%;
  border-style: dashed;
}

/* Cada chip se coloca en la órbita grande usando ángulo + radio */
.sector-badge {
  --angle: 0deg;
  
  /* --- IMPORTANTE: Que use el mismo nombre que definimos arriba --- */
  --radius-factor: var(--orbit-outer-radius-factor);

  position: absolute;
  top: 50%;
  left: 50%;
  width: 0; 
  height: 0;
  
  transform:
    rotate(var(--angle))
    translateX(calc(var(--planet-size) * var(--radius-factor)))
    rotate(calc(var(--angle) * -1));
    
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

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


.sector-badge__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--soltec-chip-bg);
  border-radius: var(--soltec-radius-full);
  border: 1px solid rgba(154, 205, 255, 0.55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  font-size: 0.68rem;
  color: var(--soltec-text-main);
  /* En mobile permitimos que el texto baje a 2 líneas si hace falta */
  white-space: normal;
  backdrop-filter: blur(12px);
}

.sector-badge__chip i {
  font-size: 0.8rem;
  color: var(--soltec-accent);
}

/* Animación giro */

@keyframes spin-slow {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

/* =========================================================
   HERO SOLTEC — RESPONSIVE como captura objetivo
   (quita eyebrow + pills + note, ordena: título/sub → planeta → CTAs,
   y agrega más aire entre bloques)
   ========================================================= */

/* Tablet y abajo: pasamos a 1 columna y reordenamos */
@media (max-width: 900px){

  .hero-soltec{
    /* más aire general (sin cambiar desktop) */
    min-height: auto !important;
    padding: 4.4rem 1.2rem 3.2rem !important;
  }

  /* En mobile NO queremos 2 columnas */
  .hero-soltec__inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    padding-right: 0 !important; /* tenías 35px que te desbalancea */
  }

  /* Para poder reordenar hijos sin tocar HTML */
  .hero-soltec__inner > div:first-child{
    display: contents !important;
  }

  /* Quitar secciones que en tu captura NO están */
  .hero-soltec__eyebrow,
  .hero-soltec__pills,
  .hero-soltec__note{
    display: none !important;
  }

  /* 1) TÍTULO */
  .hero-soltec__title{
    order: 1 !important;
    margin: 0 !important;
    font-size: clamp(1.9rem, 7vw, 2.35rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0.01em !important;
    max-width: 22ch !important;
    align-items: center !important;
     text-align: center !important;
  }

  /* 2) SUBTÍTULO (sin cortar, con aire antes del planeta) */
  .hero-soltec__subtitle{
    order: 2 !important;
    margin: 12px 0 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.55 !important;
    max-width: 62ch !important;
     align-items: center !important;
     text-align: center !important;
  }

  /* 3) PLANETA (va en el medio) */
  .hero-soltec__visual{
    order: 3 !important;
    margin: 30px 0 0 !important;      /* ✅ aire entre texto y planeta */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 4) BOTONES (al final, stack) */
  .hero-soltec__cta{
    order: 4 !important;
    margin: 26px 0 0 !important;      /* ✅ aire entre planeta y CTAs */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .btn-soltec-primary,
  .btn-soltec-ghost{
    width: 100% !important;
    justify-content: center !important;
    padding: 0.78rem 1.05rem !important;
    font-size: 0.90rem !important;
  }


  
}


/* FIX ÓRBITA MOBILE: todos los chips apoyan en la línea exterior
   sin tocar internas ni salirse del viewport */
/* FIX ÓRBITA MOBILE: exterior más grande, internas un poco más chicas,
   pills intactas + texto centrado */
@media (max-width: 580px) {

  .hero-soltec { overflow: hidden; }

  /* 1) Un poquito más grande el sistema para que respiren las pills */
  .hero-soltec__planet-wrapper{
    --planet-size: clamp(180px, 66vw, 235px);  /* antes 150–190 (muy chico) */

    /* 2) La órbita donde van las pills más afuera */
    --orbit-outer-radius-factor: 0.64;         /* más grande que 0.62 */
    margin-bottom: 70px;
    margin-top: 70px;

  }

  /* 3) ÓRBITA EXTERIOR MÁS GRANDE (la que deben tocar las pills) */
  .orbit--outer{
    inset: -14% !important;     /* antes -12% (todavía apretado) */
    opacity: 0.50 !important;
  }

  /* 4) ÓRBITA INTERNA un poco más chica (NO exagerado) */
  .orbit--inner{
    inset: 12% !important;      /* antes 10% (muy cerca visualmente) */
    border-color: rgba(73, 179, 255, 0.22) !important;
  }

  /* 5) Pills: NO las achico; centro el texto correctamente */
  .sector-badge__chip{
    /* mantenemos escala cómoda */
    font-size: 0.66rem !important;
    padding: 0.34rem 0.82rem !important;

    /* ancho suficiente para que no “se escape” */
    min-width: 108px !important;
    max-width: 150px !important;

    /* CENTRADO REAL del texto */
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    column-gap: 0.35rem !important;

    /* 1 línea */
    white-space: nowrap !important;

    /* por seguridad: nunca se sale afuera */
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .sector-badge__chip i{
    justify-self: center !important;
    font-size: 0.76rem !important;
  }

  .sector-badge__chip span{
    text-align: center !important;     /* ✅ ahora sí queda centrado */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
}





/* Phones chicos: un toque más compacto pero sin perder aire */
@media (max-width: 420px){

  .hero-soltec__planet-wrapper{
    --planet-size: clamp(180px, 78vw, 220px) !important;
    --orbit-outer-radius-factor: 0.64 !important;
  }

  .orbit--outer{ inset: -14% !important; }
  .orbit--inner{ inset: 12% !important; }

  .sector-badge__chip{
    min-width: 100px !important;
    max-width: 140px !important;
    font-size: 0.64rem !important;
  }
}

/* HERO mobile: botones más angostos (no ocupan todo el ancho) */
@media (max-width: 900px){

  .hero-soltec__cta{
    align-items: center !important; /* para que el max-width quede centrado */
  }

  .hero-soltec__cta .btn-soltec-primary,
  .hero-soltec__cta .btn-soltec-ghost{
    width: 100% !important;
    max-width: 320px !important;   /* ✅ ajustá: 280/300/320 según te guste */
  }
}

@media (max-width: 420px){
  .hero-soltec__cta .btn-soltec-primary,
  .hero-soltec__cta .btn-soltec-ghost{
    max-width: 290px !important;
  }
}




/* ============= SECCIÓN UBICACIÓN (DARK PREMIUM GLASS) ============= */

/* 1. Contenedor principal: Más espacio arriba y fondo transparente */
.ubicacion-section {
  /* Aumentamos bastante el padding: 180px arriba, 0 a los lados, 120px abajo */
margin-top: 90px; 
margin-bottom: 90px;
  background: transparent; 
  position: relative;
}
.ubicacion-inner {
  max-width: 1155px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2rem;
  align-items: stretch; 
}

/* 2. Tarjeta de Info: Aplicamos el Glassmorphism oscuro */
.ubicacion-card {
  margin-top: 40px; /* Ajustado para alinear mejor con el mapa */
  
  /* El mismo Glass que usamos en productos */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  
  padding: 30px 26px; 
  border-radius: 24px;
  position: relative;
  z-index: 2;
  height: 80%;
  margin-bottom: 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Tag superior */
.ubicacion-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1ec5ff; /* Resalta perfecto en oscuro */
  margin-bottom: -15px; 
}

/* Título adaptado a fondo oscuro */
.ubicacion-card h2 {
  font-size: 2rem; 
  color: #ffffff; /* Pasamos de azul oscuro a blanco */
  margin-bottom: 8px; 
  line-height: 1.1;
  font-weight: 800;
}

/* 3. BADGE RESEÑAS: Versión Glass */
.ubicacion-reseñas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.08); /* Fondo semi-transparente */
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 8px;
  width: fit-content;
}

.ubicacion-reseñas .score {
  font-weight: 800;
  font-size: 1rem;
  color: #ffffff; /* Puntuación en blanco */
}

.ubicacion-reseñas .stars {
  color: #ffb400; /* Estrellas doradas */
  font-size: 0.85rem;
  display: flex;
  gap: 3px;
}

.ubicacion-reseñas .opiniones-link {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6); /* Link más tenue */
  text-decoration: none;
  border-left: 1px solid rgba(255, 255, 255, 0.15); /* Separador sutil */
  padding-left: 8px;
  margin-left: 2px;
}

.ubicacion-reseñas .opiniones-link:hover {
  color: #1ec5ff;
}

/* Texto descriptivo */
.ubicacion-desc {
  color: rgba(255, 255, 255, 0.75); /* Pasamos a un gris claro elegante */
  font-size: 0.96rem; 
  line-height: 1.5; 
  margin-bottom: 18px; 
}

/* 4. Lista de datos (Dirección / Horarios) */
.ubicacion-datos {
  list-style: none;
  padding: 0;
  margin-bottom: 22px; 
  display: flex;
  flex-direction: column;
  gap: 16px; 
}

.ubicacion-datos li {
  display: flex;
  gap: 10px; 
  align-items: flex-start;
}

/* Iconos de ubicación estilo Neon/Glass */
.icono-ubicacion {
  width: 34px; 
  height: 34px;
  background: rgba(30, 197, 255, 0.15); /* Fondo cyan sutil */
  border: 1px solid rgba(30, 197, 255, 0.2);
  border-radius: 10px; 
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1ec5ff; /* Icono brillante */
  font-size: 0.95rem; 
  flex-shrink: 0;
}

.ubicacion-datos strong {
  display: block;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5); /* Etiqueta tenue */
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 2px; 
}

.ubicacion-datos span {
  display: block;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.95); /* Texto principal blanco */
  font-weight: 600;
}

/* Botones Layout */
.ubicacion-actions {
  display: flex;
  gap: 16px; 
}

.ubicacion-actions > a,
.ubicacion-actions > button {
  padding: 10px 24px; 
  font-size: 0.9rem;
}


.ubicacion-mapa iframe {
  width: 100%;
  height: 100%;
  border-radius: inherit; /* Asegura que no se salgan las puntas rectas */
}

/* --- 1. Mapa: Vuelve el marco estilo foto --- */
.ubicacion-mapa {
  margin-top: 40px;
  width: 101%;
  height: 80%;
  background: transparent;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); 
  
  /* ¡Restauramos el marco blanco sólido! */
  border: 5px solid #16405c; 
  overflow: hidden;
}

/* Un pequeño ajuste para que el mapa no tape las esquinas redondeadas del marco */
.ubicacion-mapa iframe {
  width: 100%;
  height: 100%;
  border-radius: 14px; 
}


/* --- 2. Botones: Layout y estilos originales restaurados --- */
.ubicacion-actions {
  display: flex;
  gap: 30px; /* Volvemos a tu separación original */
}

/* El botón secundario Ghost exacto como lo armaste */
.btn-secondary-ghost__UBI {
  font-family: var(--font-botones);
  border-radius: var(--soltec-radius-full, 999px);
  padding: 0.72rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1; 
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease-out;
  
  /* Tus colores y sombras originales */
  background-color: #1a1168; 
  color: #00a2ff; 
  border: 1px solid rgba(92, 173, 228, 0.7);
  box-shadow: 0 12px 12px rgba(12, 159, 232, 0.6);
}

/* El Hover de tu botón secundario */
.btn-secondary-ghost__UBI:hover {
  background: rgba(11, 50, 102, 0.9); 
  color: #ffffff;
  transform: translateY(-1px);
  border-color: transparent;
  box-shadow: 0 16px 30px rgba(18, 40, 110, 0.75);
}

/* Restauramos también el botón ghost genérico por si lo usás */
.ubicacion-actions .btn-soltec-ghost {
  border-color: #dce4eb;
  color: #0b2e55;
  padding: 9px 50px;
  border-radius: var(--soltec-radius-full, 999px);
  transition: all 0.2s ease;
}

.ubicacion-actions .btn-soltec-ghost:hover {
  background: #f0f5fa;
  border-color: #0b2e55;
}

/* =========================================================
   UBICACIÓN — REDISEÑO MOBILE (OPCIÓN 1)
   "Hero Card" arriba + "Mapa teaser" abajo (más bajo y liviano)
   - Card primero, mapa después (orden natural del HTML)
   - Sacar márgenes/alturas de desktop que rompen mobile
   - Mapa más bajo + overlay sutil de “preview”
   - Botones apilados, más chicos y prolijos
   ========================================================= */

@media (max-width: 900px){

  .ubicacion-section{
    padding: 46px 14px !important;
  }

  .ubicacion-inner{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: start !important;
  }

  /* --- HERO CARD (compacta, sin espacio gigante de arriba) --- */
  .ubicacion-card{
    margin-top: 0 !important;        /* era 100px */
    margin-bottom: 0 !important;     /* era 60px */
    height: auto !important;         /* era 80% */
    padding: 24px 18px !important;
    border-radius: 22px !important;
    justify-content: flex-start !important;
  }

  .ubicacion-tag{
    margin-bottom: 10px !important;  /* en desktop estaba negativo */
  }

  .ubicacion-card h2{
    font-size: clamp(1.55rem, 6vw, 1.85rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 10px !important;
  }

  .ubicacion-reseñas{
    width: 100% !important;          /* que no quede mini-badge perdido */
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    padding: 6px 10px !important;
    margin-bottom: 14px !important;
  }

  .ubicacion-reseñas .opiniones-link{
    white-space: normal !important;
  }

  .ubicacion-desc{
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
  }

  .ubicacion-datos{
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .icono-ubicacion{
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 0.92rem !important;
  }

  .ubicacion-datos span{
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
  }

  /* Botones: uno abajo del otro, más chicos */
  .ubicacion-actions{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .ubicacion-actions > a,
  .ubicacion-actions > button{
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 14px !important;     /* más chicos */
    font-size: 0.86rem !important;    /* más chicos */
  }

  /* --- MAPA TEASER (más bajo + preview) --- */
  .ubicacion-mapa{
    margin-top: 0 !important;         /* era 100px */
    width: 100% !important;           /* era 101% */
    height: 240px !important;         /* teaser, no gigante */
    border-radius: 22px !important;
    border-width: 6px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .ubicacion-mapa iframe{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Overlay sutil para “teaser / preview” (no clickeable, solo visual) */
  .ubicacion-mapa::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to top,
        rgba(2, 6, 23, 0.18) 0%,
        rgba(2, 6, 23, 0.00) 55%
      );
  }

  /* Etiqueta visual (solo estética) */
  .ubicacion-mapa::before{
    content: "Mapa (preview)";
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    pointer-events: none;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0b2e55;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(11,46,85,0.10);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  }
}

/* Ajuste extra: phones más chicos */
@media (max-width: 420px){

  .ubicacion-section{
    padding: 40px 12px !important;
  }

  .ubicacion-card{
    padding: 22px 16px !important;
    border-radius: 20px !important;
  }

  .ubicacion-card h2{
    font-size: 1.55rem !important;
  }

  .ubicacion-mapa{
    height: 220px !important;
    border-radius: 20px !important;
    border-width: 5px !important;
  }

  .ubicacion-actions > a,
  .ubicacion-actions > button{
    padding: 7px 12px !important;
    font-size: 0.84rem !important;
  }
}





/* ========================================================= 
   PÁGINA ERP (Estilos Exclusivos - LIGTH MODE)
========================================================= */

/* --- HERO SECTION (AHORA CLARO) --- */
.erp-hero {
    position: relative;
    padding: 140px 20px 100px;
    /* Fondo Claro: Blanco con un toque de celeste muy sutil */
    background: linear-gradient(180deg,  #004891 30%, #ffffff 100%);
    text-align: center;
    overflow: hidden;
}

.erp-hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


.erp-hero h1 {
    font-size: 3.5rem;
    color: #051931; /* Texto Azul Oscuro (Antes blanco) */
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
  span {
        color: #00f7ff; /* Resalta "Soltec ERP" con el cyan brillante */
    }
}

.erp-hero p {
    font-size: 1.2rem;
    color: #ffffff; /* Gris medio (Antes gris claro) */ /*#d8d7d7*/
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Botones Hero (Ajustados para fondo claro) */
.erp-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-primary-glow,
.btn-secondary-ghost {
  /*btn-pr La fuente correcta */
  font-family: var(--font-botones);
  
  /* Geometría exacta del Hero Soltec */
  border-radius: var(--soltec-radius-full, 999px);
  padding: 0.7rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1; /* Evita que se inflen verticalmente */
  
  /* Comportamiento Flex */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  
  /* Reset */
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease-out;
}

/* 2. Botón Principal (Cyan Degradado) */
.btn-primary-glow {
  /*background: linear-gradient(135deg, #1ec5ff, #4ad4ff);*/
  background-color: #00f7ff;
  color: #051931; /* Texto oscuro para contraste moderno */
  box-shadow: 0 1px 1px rgba(12, 159, 232, 0.6);
  border: 1px solid transparent; /* Para igualar altura con el ghost */
}

.btn-primary-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 3px rgba(12, 159, 232, 0.75);
}

/* 3. Botón Secundario (Ghost / Transparente) */
.btn-secondary-ghost {
  background-color: #1a1168; /* Fondo oscuro para destacar en el fondo claro */
  color: #1ec5ff; /* Color Cyan (var(--soltec-accent)) */
  border: 1px solid rgba(92, 173, 228, 0.7);
  box-shadow: 0 3px 3px rgba(12, 159, 232, 0.6);
}

.btn-secondary-ghost:hover {
  background: rgba(11, 50, 102, 0.9); /* Fondo oscuro al pasar el mouse */
  color: #ffffff;
  transform: translateY(-1px);
  border-color: transparent;
   box-shadow: 0 3px 3px rgba(9, 65, 94, 0.75);
}

/* El horizonte de luz ahora es más sutil para no chocar con lo claro */
.hero-horizon {
    display: none; /* Lo quitamos en modo claro para que se vea limpio */
}


/* --- INTRO SECTION (CHECKLIST) --- */
.erp-intro {
    background: #ffffff;
    padding: 80px 20px;
    position: relative;
    z-index: 2;
}

.erp-container {
    max-width: 1200px; /* Un poco más ancho para que entren los módulos */
    margin: 0 auto;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.intro-text h2 {
    font-size: 2.2rem;
    color: #0b2e55;
    margin-bottom: 20px;
}

.intro-text p {
    font-size: 1.1rem;
    color: #475569;
    margin-bottom: 30px;
    line-height: 1.6;
}

.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 16px;
    font-size: 1.05rem;
    color: #334155;
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1ec5ff;
    font-weight: 900;
}

/* Visual Abstracto */
.glass-panel {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    position: relative;
}

.stat-row { margin-bottom: 20px; }
.stat-row span {
    display: block;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
    font-size: 0.9rem;
}
.bar-container {
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.bar-fill {
    height: 100%;
    background: #1ec5ff;
    border-radius: 10px;
}
.floating-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #0b2e55;
    color: #fff;
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(11, 46, 85, 0.2);
}

/*OLASSSSSSSSSSSSSS*/

.wave-divider{
  line-height: 0;
  overflow: hidden;
}

.wave-divider svg{
  background: #f8fafc;
  display: block;
  width: 100%;
  height: 90px;      /* ajustá la “altura” de la ola */
}

.wave-divider--dark path{
  fill: #07233d;     /* azul oscuro */
}

.wave-divider{
  line-height: 0;
  overflow: hidden;
}
.wave-divider svg{
  display: block;
  width: 100%;
  height: 110px;
}

.wave-divider--layered .w1{ fill: #07233d; }
.wave-divider--layered .w2{ fill: rgba(30,197,255,0.18); } /* brillo suave */


/*linea*/

/* =========================
   LÍNEA PREMIUM (degradé)
========================= */
.page-erp .premium-line{
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(30,197,255,0.75),
    rgba(11,46,85,0.18),
    transparent
  );
  opacity: 0.85;
}




/* --- MÓDULOS (COMPACTOS PARA ENTRAR 4) --- */

/* =========================================
   TÍTULO TIPO ETIQUETA (MÓDULOS)
========================================= */
.page-erp #modulos .section-header{
  text-align: center;
}

/* grupo centrado */
.page-erp #modulos .badge-title{
  display: inline-grid;
  justify-items: center;     /* centra las etiquetas */
  gap: 12px;
  margin: 0;
  line-height: 1;
}

/* base común: pill premium */
.page-erp #modulos .badge-line{
  display: inline-block;
  width: fit-content;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 10px 18px;

  /* sombra sutil, no “pesada” */
  box-shadow: 0 10px 22px rgba(2, 8, 23, 0.12);
  -webkit-font-smoothing: antialiased;
}

/* etiqueta superior (celeste) */
.page-erp #modulos .badge-top{
  background: linear-gradient(180deg, #2fd0ff 0%, #1ec5ff 100%);
  color: #06243d;

  /* MÁS GRANDE */
  font-size: 1.10rem;
  padding: 20px 32px;

  border: 1px solid rgba(30,197,255,0.45);

  /* corrimiento leve para el efecto stack */
  transform: translateX(-10px);
}


/* etiqueta inferior (azul) */
.page-erp #modulos .badge-bottom{
  background: linear-gradient(180deg, #0b2e55 0%, #07233d 100%);
  color: #79e6ff;
  font-size: 1.22rem;
  padding: 16px 32px;
  border: 1px solid rgba(255,255,255,0.10);

  /* un toque de profundidad al texto */
  text-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* responsive */
@media (max-width: 520px){
  .page-erp #modulos .badge-top{
    font-size: 0.80rem;
    padding: 9px 16px;
    transform: translateX(-6px);
  }
  .page-erp #modulos .badge-bottom{
    font-size: 0.95rem;
    padding: 11px 18px;
  }
}



.erp-modules {
    background: #f8fafc; /* Gris muy suave */
    padding: 80px 20px;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}
.section-header h2 {
    font-size: 2.5rem;
    color: #0b2e55;
    margin-bottom: 16px;
}
.section-header p {
    color: #64748b;
    font-size: 1.1rem;
}

.modules-grid {
    display: grid;
    /* CAMBIO CLAVE: minmax reducido a 220px para forzar que entren 4 */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; /* Gap más pequeño */
}

.module-card {
    background: #ffffff;
    border-radius: 16px;
    /* CAMBIO CLAVE: Padding reducido para ahorrar espacio */
    padding: 25px; 
    border: 1px solid #e2e8f0;
    transition: transform 0.3s, box-shadow 0.3s;
}

.module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: #1ec5ff;
}

.module-card.featured-card {
    border: 1px solid #1ec5ff; 
    background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

.icon-box {
    font-size: 2rem; /* Icono un poco más chico */
    margin-bottom: 15px;
}

.module-card h3 {
    font-size: 1.25rem; /* Título ajustado */
    color: #0b2e55;
    margin-bottom: 8px;
    line-height: 1.3;
}

.module-card p {
    color: #64748b;
    margin-bottom: 15px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.module-card ul {
    list-style: none;
    padding: 0;
    border-top: 1px solid #e2e8f0;
    padding-top: 15px;
}

.module-card ul li {
    font-size: 0.85rem; /* Texto de lista compacto */
    color: #475569;
    margin-bottom: 8px;
    position: relative;
    padding-left: 12px;
}
.module-card ul li::before {
    content: "•";
    color: #1ec5ff;
    position: absolute;
    left: 0;
    font-weight: bold;
}


/* --- SEGURIDAD (AHORA CLARO) --- */
.erp-security {
    /* Fondo Claro */
    background: #babbf5;
    color: #0b2e55; /* Texto oscuro */
    padding: 100px 20px;
    border-top: 1px solid #e2e8f0;
}

.security-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.security-content {
    max-width: 100%;
}

.security-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #142c6e;
}
.security-content p {
    color: #2c2c2c; /* Gris */
    margin-bottom: 50px;
    font-size: 1.1rem;
}

.security-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.sec-item h4 {
    color: #142c6e;
    font-size: 1.1rem;
    margin-bottom: 12px;
}

.sec-item p {
    font-size: 0.95rem;
    margin: 0;
    color: #3f3f3f; /* Gris */
}

.page-erp .erp-cta{
  border-top: 2px solid #002e69;
}

/* --- CTA FINAL --- */
.erp-cta {
    background: #ffffff;
    padding: 100px 20px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

.erp-cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.erp-cta h2 {
    font-size: 2.5rem;
    color: #0b2e55;
    margin-bottom: 20px;
}

.btn-whatsapp-large {
  /* 1. Tipografía y Geometría (Exacta al Hero) */
  font-family: var(--font-botones);
  border-radius: var(--soltec-radius-full, 999px);
  padding: 1rem 2rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1; /* Evita que se infle */
  
  /* 2. Comportamiento Flex */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  
  /* 3. Estilo Visual (Cyan Degradado) */
  /*background: linear-gradient(135deg, #1ec5ff, #4ad4ff);*/
  background-color: #00f7ff;
  color: #021225; /* Texto oscuro para contraste moderno */
  box-shadow: 0 12px 12px rgba(12, 159, 232, 0.6);
  border: 1px solid transparent; 
  
  /* 4. Reset y Transiciones */
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease-out;

  /* Mantengo tu margen original para no romper el espaciado del layout */
  margin-top: 20px;
}

.btn-whatsapp-large:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(12, 159, 232, 0.75);
}


/* RESPONSIVE */
@media (max-width: 900px) {
    .intro-grid, .security-features {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .erp-hero h1 {
        font-size: 2.5rem;
    }
    .erp-container {
        padding: 0;
    }
    /* En tablet/móvil volvemos a 2 o 1 columna para que no se rompa */
    .modules-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}


/* =========================================================
   ERP – Mejoras PRO (encapsulado)
========================================================= */
.page-erp {
  background: #fff;
}

/* --- Subnav sticky --- */
.page-erp .erp-subnav{
  position: sticky;
  top: 50px; /* ajustá si tu header es más alto */
  z-index: 50;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e8f0;
}
.page-erp .erp-subnav-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 18px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.page-erp .erp-subnav a{
  white-space: nowrap;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0b2e55;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.page-erp .erp-subnav a:hover{
  border-color: #e2e8f0;
  background: #f8fafc;
}

/* Mejor tipografía responsive (sin tocar tu estética) */
.page-erp .erp-hero h1{
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
}
.page-erp .erp-hero{
  padding: clamp(110px, 10vw, 140px) 20px 90px;
}

/* --- Screenshots --- */
.page-erp .erp-screenshots{
  background: #d4edfc;
  padding: 80px 20px;
  border-top: 1px solid #e2e8f0;
}
.page-erp .shots-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.page-erp .shot-card{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.06);
}
.page-erp .shot-card img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  background: #f1f5f9;
}
.page-erp .shot-card figcaption{
  padding: 14px 14px 16px;
  display: grid;
  gap: 4px;
}
.page-erp .shot-card strong{
  color: #0b2e55;
}
.page-erp .shot-card span{
  color: #64748b;
  font-size: 0.92rem;
}

/* --- Needs section --- */
.page-erp .erp-needs{
  background: #f8fafc;
  padding: 90px 20px;
  border-top: 1px solid #e2e8f0;
}
.page-erp .needs-grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: start;
}
.page-erp .needs-text h2{
  color: #0b2e55;
  font-size: 2.3rem;
  margin-bottom: 12px;
}
.page-erp .needs-text p{
  color: #475569;
  margin-bottom: 18px;
}
.page-erp .needs-list{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.page-erp .needs-list li{
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
  color: #334155;
}
.page-erp .needs-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: #1ec5ff;
  font-weight: 900;
}
.page-erp .needs-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Tarjeta diagnóstica */
.page-erp .needs-card{
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.06);
}
.page-erp .needs-card h3{
  margin: 0 0 8px;
  color: #0b2e55;
}
.page-erp .muted{
  color: #64748b;
  font-size: 0.95rem;
}
.page-erp .mini-steps{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.page-erp .mini-steps .step{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #334155;
  font-weight: 700;
}
.page-erp .mini-steps .step span{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #0b2e55;
  color: #fff;
  font-size: 0.9rem;
}

/* --- Integración --- */
.page-erp .erp-integration{
  background: #c5d3eb;
  padding: 90px 20px;
  border-top: 1px solid #e2e8f0;
}
.page-erp .integration-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.page-erp .feature-list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.page-erp .feature-list li{
  margin-bottom: 10px;
  color: #334155;
  padding-left: 14px;
  position: relative;
}
.page-erp .feature-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: #1ec5ff;
  font-weight: 900;
}
.page-erp .integration-panel{
  border: 1px solid #12335f;
  border-radius: 18px;
  padding: 22px;
  background: #a5ccf8;
}
.page-erp .flow{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.page-erp .node{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0b2e55;
  font-weight: 800;
}
.page-erp .arrow{
  color: #ffffff;
  font-weight: 900;
}

/* --- Personalización --- */
.page-erp .erp-custom{
  background: #f8fafc;
  padding: 90px 20px;
  border-top: 1px solid #e2e8f0;
}
.page-erp .custom-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.page-erp .custom-card{
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.05);
}
.page-erp .custom-card h3{
  color: #0b2e55;
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.page-erp .custom-card p{
  margin: 0;
  color: #64748b;
  font-size: 0.95rem;
}

/* --- Clientes --- */
.page-erp .erp-clients{
  background: #ffffff;
  padding: 90px 20px;
  border-top: 1px solid #e2e8f0;
}
.page-erp .clients-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.page-erp .client-logo{
  height: 88px;                 /* altura fija consistente */
  padding: 12px 16px;           /* aire interno */
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;

  overflow: hidden;             /* por seguridad */
}

/* Imagen dentro (SIN deformar) */
.client-logo img{
  display: block;
  width: 100%;
  height: 100%;
  max-height: 54px;             /* CLAVE para que ninguno “rompa” */
  max-width: 100%;

  object-fit: contain;          /* CLAVE: no se estira */
  object-position: center;
}

/* Si querés un look más premium */
.client-logo{
  box-shadow: 0 12px 30px rgba(0,0,0,0.05);
}

/* Responsive */
@media (max-width: 1000px){
  .clients-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .clients-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-erp .testimonials{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 15px;
}
.page-erp .testimonial{
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.05);
}
.page-erp .testimonial p{
  margin: 0 0 10px;
  color: #334155;
}
.page-erp .testimonial span{
  color: #64748b;
  font-size: 0.95rem;
}

/* --- FAQ --- */
.page-erp .erp-faq{
  background: #f8fafc;
  padding: 90px 20px;
  border-top: 1px solid #e2e8f0;
}
.page-erp .faq-list{
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.page-erp .faq-item{
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #0b2e55;
  padding: 14px 16px;
}
.page-erp .faq-item summary{
  cursor: pointer;
  font-weight: 900;
  color: #ffffff;
}
.page-erp .faq-item p{
  margin: 10px 0 0;
  color: #ffffff;
}

/* Accesibilidad focus */
.page-erp a:focus-visible,
.page-erp button:focus-visible,
.page-erp summary:focus-visible{
  outline: 3px solid rgba(30,197,255,0.45);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 1000px){
  .page-erp .shots-grid{ grid-template-columns: 1fr; }
  .page-erp .needs-grid{ grid-template-columns: 1fr; }
  .page-erp .integration-grid{ grid-template-columns: 1fr; }
  .page-erp .custom-grid{ grid-template-columns: repeat(2, 1fr); }
  .page-erp .clients-grid{ grid-template-columns: repeat(3, 1fr); }
  .page-erp .testimonials{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .page-erp .custom-grid{ grid-template-columns: 1fr; }
  .page-erp .erp-subnav{ top: 72px; }
}

/* =========================================================
   SOLO ERP: fondos y layout a ancho completo (sin romper el sitio)
========================================================= */

/* Asegura que el body/page no genere márgenes laterales */
.page-erp{
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Este es el fix clave: si tu sitio limita el main, acá lo anulamos SOLO en ERP */
.page-erp main{
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Si tu web usa algún wrapper tipo .container/.contenido/.principal, lo anulamos SOLO dentro de ERP */
.page-erp .container,
.page-erp .contenedor,
.page-erp .contenido,
.page-erp .principal,
.page-erp .wrapper{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Secciones full width */
.page-erp section{
  width: 100%;
}

/* Y el contenido lo seguís controlando con .erp-container (esto mantiene look pro) */
.page-erp .erp-container{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}


/* =========================================
   ANIMACIONES JS PARA ERP.HTML
   ========================================= */

/* Estado inicial (Oculto y un poquito más abajo) */
.fade-in-hidden {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Estado final (Visible y en su lugar original) - Se lo pone el JS */
.fade-in-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =========================================================
   ERP RESPONSIVE — SOLO MEDIA QUERIES (NO TOCA DESKTOP)
   Scope: body.page-erp (solo afecta erp.html)
   Objetivos:
   - Mantener look desktop (aire, jerarquía, cards premium)
   - 2 columnas -> 1 columna cuando corresponde
   - Grids: 4/6 -> 2 -> 1 según sección
   - Botones usables (sin gigantismo)
   - Sin overflow horizontal
   ========================================================= */


/* --------- <=1000px (tablet horizontal / notebook chica) --------- */
@media (max-width: 1000px){

  .page-erp{ overflow-x: clip; }

  /* Contenedor */
  .page-erp .erp-container{
    padding-left: 18px;
    padding-right: 18px;
  }

  /* HERO */
  .page-erp .erp-hero{
    padding: 120px 18px 84px;
  }
  .page-erp .erp-hero h1{
    font-size: clamp(2.2rem, 4.6vw, 3.0rem);
    margin-bottom: 18px;
    line-height: 1.08;
  }
  .page-erp .erp-hero p{
    font-size: 1.05rem;
    margin-bottom: 26px;
    line-height: 1.55;
  }

  /* INTRO */
  .page-erp .intro-grid{
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
  }
  .page-erp .glass-panel{
    max-width: 680px;
    margin: 0 auto;
  }

  /* Screenshots: 3 -> 2 */
  .page-erp .shots-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .page-erp .shot-card img{
    height: 190px;
  }
  .page-erp .shot-card figcaption{
    padding: 12px 12px 14px;
  }

  /* Needs */
  .page-erp .needs-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-erp .needs-card{
    max-width: 720px;
    margin: 0 auto;
  }

  /* Integración */
  .page-erp .integration-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-erp .integration-panel{
    max-width: 760px;
    margin: 0 auto;
  }

  /* Custom: 4 -> 2 */
  .page-erp .custom-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* Clients: 6 -> 3 */
  .page-erp .clients-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Testimonials: 2 -> 1 */
  .page-erp .testimonials{
    grid-template-columns: 1fr;
  }

  /* Subnav */
  .page-erp .erp-subnav-inner{
    padding-left: 14px;
    padding-right: 14px;
    gap: 10px;
  }
}


/* --------- <=900px (tablet vertical / mobile grande) --------- */
@media (max-width: 900px){

  /* 1) JERARQUÍA TIPOGRÁFICA GLOBAL (acá estaba tu “gigantismo”) */
  .page-erp main h2{
    font-size: clamp(1.55rem, 5.4vw, 2.0rem) !important;
    line-height: 1.14 !important;
    margin-bottom: 14px !important;
  }

  .page-erp main h3{
    font-size: clamp(1.05rem, 3.9vw, 1.25rem) !important;
    line-height: 1.18 !important;
  }

  .page-erp main p{
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }

  /* 2) Aire vertical consistente (menos “scroll infinito”) */
  .page-erp .erp-intro,
  .page-erp .erp-screenshots,
  .page-erp .erp-needs,
  .page-erp .erp-integration,
  .page-erp .erp-custom,
  .page-erp .erp-clients,
  .page-erp .erp-faq,
  .page-erp .erp-security,
  .page-erp .erp-cta{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* HERO: mantiene jerarquía, pero sin exagerar */
  .page-erp .erp-hero{
    padding: 110px 16px 78px !important;
  }
  .page-erp .erp-hero h1{
    font-size: clamp(2.05rem, 6vw, 2.7rem) !important;
    line-height: 1.08 !important;
  }
  .page-erp .erp-hero p{
    font-size: 1.0rem !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
  }

  /* Botones hero: stack premium (centrados y acotados) */
  .page-erp .erp-actions{
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .page-erp .btn-primary-glow,
  .page-erp .btn-secondary-ghost{
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }

  /* INTRO: checklist más compacto */
  .page-erp .intro-text p{ margin-bottom: 18px !important; }
  .page-erp .check-list li{
    font-size: 0.98rem !important;
    margin-bottom: 12px !important;
  }

  /* Screenshots: tarjetas más “cortas” */
  .page-erp .shot-card img{ height: 175px !important; }
  .page-erp .shot-card span{ font-size: 0.90rem !important; }

  /* Needs: lista y card */
  .page-erp .needs-list li{
    margin-bottom: 8px !important;
    font-size: 0.98rem !important;
  }
  .page-erp .needs-card{
    padding: 18px !important;
  }

  /* Módulos: 2 columnas (tablet) */
  .page-erp .modules-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .page-erp .module-card{
    padding: 18px;
  }
  .page-erp .module-card p{
    font-size: 0.92rem !important;
    margin-bottom: 12px !important;
  }
  .page-erp .module-card ul{
    padding-top: 12px !important;
  }
  .page-erp .module-card ul li{
    font-size: 0.84rem !important;
    margin-bottom: 6px !important;
  }

  /* Seguridad: 3 -> 1 */
  .page-erp .security-wrapper{
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  .page-erp .security-features{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-erp .sec-item p{
    font-size: 0.92rem !important;
  }

  /* Wave dividers */
  .page-erp .wave-divider svg{ height: 88px; }
}


/* --------- <=768px (mobile estándar) --------- */
@media (max-width: 768px){

  .page-erp .erp-container{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* HERO */
  .page-erp .erp-hero{
    padding: 102px 14px 72px !important;
  }

  /* Screenshots: 1 columna */
  .page-erp .shots-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page-erp .shot-card img{
    height: 165px;
  }

  /* Needs: botones full */
  .page-erp .needs-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .page-erp .needs-actions a{
    width: 100%;
    justify-content: center;
  }

  /* Integración: nodos más compactos */
  .page-erp .node{
    padding: 9px 12px;
    font-size: 0.88rem;
  }
  .page-erp .integration-panel{
    padding: 18px;
  }

  /* Clients: 2 columnas */
  .page-erp .clients-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .page-erp .client-logo{
    height: 76px;
    padding: 10px 12px;
  }
  .page-erp .client-logo img{
    max-height: 44px;
  }

  /* FAQ: tipografía */
  .page-erp .faq-item{
    padding: 12px 14px;
  }
  .page-erp .faq-item summary{
    font-size: 0.92rem !important;
  }
  .page-erp .faq-item p{
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
  }

  /* CTA final: botón */
  .page-erp .btn-whatsapp-large{
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }
}


/* --------- <=600px (mobile chico) --------- */
@media (max-width: 600px){

  .page-erp .erp-container{
    padding-left: 14px;
    padding-right: 14px;
  }

  /* HERO: título y texto */
  .page-erp .erp-hero h1{
    font-size: clamp(1.85rem, 7.0vw, 2.35rem) !important;
  }
  .page-erp .erp-hero p{
    font-size: 0.96rem !important;
  }

  /* Global: baja un toque H2/H3 y texto (evita gigantismo en phones) */
  .page-erp main h2{
    font-size: clamp(1.45rem, 6.2vw, 1.85rem) !important;
  }
  .page-erp main h3{
    font-size: clamp(1.02rem, 4.2vw, 1.18rem) !important;
  }
  .page-erp main p{
    font-size: 0.95rem !important;
  }

  /* Módulos: 1 columna (para no aplastar listas) */
  .page-erp .modules-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .page-erp .module-card{
    padding: 16px;
  }

  /* Custom: 1 columna */
  .page-erp .custom-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Subnav: más cómodo */
  .page-erp .erp-subnav-inner{
    padding: 10px 12px;
  }
  .page-erp .erp-subnav a{
    font-size: 0.86rem;
    padding: 7px 10px;
  }
}


/* --------- <=520px --------- */
@media (max-width: 520px){

  .page-erp .erp-subnav{ top: 72px; }

  /* Secciones: un toque menos alto */
  .page-erp .erp-intro,
  .page-erp .erp-screenshots,
  .page-erp .erp-needs,
  .page-erp .erp-integration,
  .page-erp .erp-custom,
  .page-erp .erp-clients,
  .page-erp .erp-faq,
  .page-erp .erp-security,
  .page-erp .erp-cta{
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }

  /* Cards: bordes un toque más compactos */
  .page-erp .glass-panel,
  .page-erp .needs-card,
  .page-erp .integration-panel,
  .page-erp .custom-card,
  .page-erp .testimonial,
  .page-erp .shot-card{
    border-radius: 16px;
  }

  /* Botones hero: más chicos */
  .page-erp .btn-primary-glow,
  .page-erp .btn-secondary-ghost{
    max-width: 320px;
    padding: 0.70rem 1.1rem;
    font-size: 0.88rem;
  }

  /* Badges módulos (mantenés tu estética, solo “respiran”) */
  .page-erp #modulos .badge-top{ transform: translateX(-6px); }
}


/* --------- <=420px --------- */
@media (max-width: 420px){

  .page-erp .erp-container{
    padding-left: 12px;
    padding-right: 12px;
  }

  .page-erp .erp-hero{
    padding: 96px 12px 66px !important;
  }

  .page-erp .erp-hero h1{
    font-size: 2.0rem !important;
  }

  /* Screenshots: más bajo */
  .page-erp .shot-card img{
    height: 155px;
  }

  /* Clients: aire */
  .page-erp .clients-grid{
    gap: 10px;
  }
}

/* 1) HERO: mismo quiebre que desktop (2 líneas exactas) */
@media (max-width: 600px){

  /* que el bloque tenga buen ancho real */
  .page-erp .erp-hero-content{
    max-width: 680px !important;
  }

  /* línea 1: “El cerebro digital que” (no se parte) */
  .page-erp .erp-hero h1{
    font-size: clamp(1.85rem, 6.2vw, 2.25rem) !important;
    line-height: 1.05 !important;
    margin-left: auto !important;
    margin-right: auto !important;

    white-space: nowrap !important;   /* ✅ evita 3 líneas */
  }

  /* línea 2: “unifica tu empresa” */
  .page-erp .erp-hero h1 span{
    display: block !important;        /* ✅ fuerza la 2da línea */
    white-space: normal !important;
  }
}

/* phones muy chicos: baja 1 punto para que no desborde con nowrap */
@media (max-width: 360px){
  .page-erp .erp-hero h1{
    font-size: 1.75rem !important;
  }
}


/* 2) OLAS: quitar el “blanco” y fundir con el color real de la página */
@media (max-width: 900px){

  /* lo más eficiente: transparente (toma el color del contenedor/página) */
  .page-erp .wave-divider,
  .page-erp .wave-divider svg{
    background-color: #f8fafc!important; /* o el color de fondo real de tu página */
  }

  /* anti-seam de 1px (evita líneas/cortes raros) */
  .page-erp .wave-divider{
    margin-top: -1px !important;
  }

  .page-erp .wave-divider svg{
    display: block !important;
  }
}

/* 3) CLIENTES vs TESTIMONIOS: más aire entre grilla y testimonios */
@media (max-width: 768px){

  .page-erp .clients-grid{
    margin-bottom: 22px !important;
  }

  .page-erp .testimonials{
    margin-top: 18px !important;
  }
}


/* 4) NEEDS: más aire arriba/abajo de los botones */
@media (max-width: 768px){

  .page-erp .needs-actions{
    margin-top: 18px !important;     /* más aire arriba */
    margin-bottom: 18px !important;  /* más aire abajo general */
  }

  /* ✅ más separación entre "Ver integración" y la tarjeta debajo */
  .page-erp .needs-actions a:last-child{
    margin-bottom: 26px !important;
  }
}


/* HERO ERP (mobile): título menos pesado + más aire + subtítulo menos contraste */
@media (max-width: 600px){

  /* Título: mismo corte en 2 líneas, pero menos “pesado” */
  .page-erp .erp-hero h1{
    font-weight: 750 !important;   /* antes 800 (baja un toque sin perder presencia) */
    letter-spacing: -0.01em !important;
  }

  /* Subtítulo / párrafo: menos contraste + más aire */
  .page-erp .erp-hero p{
    color: rgba(255,255,255,0.82) !important; /* baja contraste (más suave) */
    font-size: 0.98rem !important;
    line-height: 1.6 !important;

    margin-top: 16px !important;     /* más aire desde el título */
    margin-bottom: 26px !important;  /* ✅ más aire hacia los botones */
  }

  /* Botones: separarlos un poco más del párrafo */
  .page-erp .erp-actions{
    margin-top: 4px !important;  /* extra sutil */
  }
}



/* =========================================
   ESTILOS PARA PRODUCTOS SIN STOCK
   ========================================= */

/* La tarjeta entera se pone gris y bloquea TODOS los clics (fotos, títulos) */
.producto.agotado {
  filter: grayscale(100%);
  opacity: 0.6;
  pointer-events: none; /* Nadie puede hacerle clic para ir al detalle */
  position: relative; /* Necesario para que el cartelito flote bien */
}

/* El cartelito rojo flotante */
.badge-sin-stock {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #e53935; /* Un rojo fuerte */
  color: white;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 4px;
  z-index: 10;
  letter-spacing: 1px;
}

/* Estilo extra para el botón cuando está desactivado */
.producto.agotado .boton-agregar-carrito {
  background-color: #666 !important;
  color: #ccc !important;
  border: none !important;
}

/* =========================================================
   ULTRAWIDE / MONITORES GRANDES (NO TOCA MOBILE)
   Objetivo: que no se vea "chiquita" en 1440p / 4K
   Pegar AL FINAL del CSS global
   ========================================================= */

/* 1) Escala de contenedor global (si ya usás --max, esto te salva todo) */
:root{
  /* valor default (si no existe en tu proyecto) */
  --max: 1200px;
}

/* 2) Monitores grandes: ensanchar contenedor */
@media (min-width: 1400px){
  :root{ --max: 1320px; }
}
@media (min-width: 1700px){
  :root{ --max: 1460px; }
}
@media (min-width: 2000px){
  :root{ --max: 1580px; }
}

/* 3) Subir un poquito la escala tipográfica global (sutil, no rompe) */
@media (min-width: 1700px){
  html{ font-size: 17px; } /* antes 16px implícito */
}
@media (min-width: 2000px){
  html{ font-size: 18px; }
}

/* 4) Aplicar el --max a tus contenedores típicos (solo “ancho”, no cambia estilos) */
@media (min-width: 1400px){

  /* Hero: en tu CSS el inner usa width, no max-width */
  .hero-soltec__inner{
    width: min(var(--max), 100%) !important;
  }

  /* Contenedores y secciones que suelen estar capadas */
  .footer-container,
  .container-sistemas,
  .page-erp .erp-container,
  .about-grid,
  .ubicacion-inner,
  .detalle-wrap{
    max-width: var(--max) !important;
  }
}

/* 5) Opcional: que el planeta/órbita no quede “mini” en ultrawide */
@media (min-width: 1700px){
  .hero-soltec__planet-wrapper{
    --planet-size: min(420px, 28vw);
  }
}


/* =========================================================
   🖥️ OPTIMIZACIÓN PARA PANTALLAS GRANDES Y ULTRAWIDE
   (Reemplazo del bloque anterior)
   ========================================================= */

/* 1. Definimos una única variable maestra para el ancho. 
      Inicia en 1150px (Notebook estándar) */
      :root {
        --max-container: 1150px;
    }
    
    /* 2. Forzamos a TODOS los contenedores importantes a respetar esta variable.
          Esto evita tener que ir bloque por bloque cambiando 'max-width' fijos. */
    .productos-grid,
    .detalle-wrap,
    .filtros,
    .about-grid,
    .container-sistemas,
    .ubicacion-inner,
    .footer-container,
    .erp-container,
    .page-erp .erp-subnav-inner {
        max-width: var(--max-container) !important;
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* El hero de Soltec usa un min() específico, lo adaptamos a la nueva variable */
    .hero-soltec__inner {
        width: min(var(--max-container), 100%) !important;
    }
    
    /* =========================================
       3. ESCALADO FLUIDO POR BREAKPOINTS
       ========================================= */
    
    /* Monitores de 1440px (Notebooks grandes o monitores de 24") */
    @media (min-width: 1400px) {
        :root {
            --max-container: 1300px;
        }
        html {
            font-size: 16.5px; /* Aumenta todos los 'rem' un ~3% */
        }
        /* Le damos más aire a los lados al header para que no quede tan estirado */
        header { padding: 0 8%; }
    }
    
    /* Monitores amplios de escritorio (1600px+) */
    @media (min-width: 1600px) {
        :root {
            --max-container: 1450px;
        }
        html {
            font-size: 17.5px; /* Aumenta todos los 'rem' un ~9% */
        }
        header { padding: 0 10%; }
        
        /* El planeta del hero central necesita crecer para no verse como una miniatura */
        .hero-soltec__planet-wrapper {
            --planet-size: 450px !important;
        }
    }
    
    /* Monitores Full HD Grandes o Ultrawide estándar (1920px+) */
    @media (min-width: 1920px) {
        :root {
            --max-container: 1600px;
        }
        html {
            font-size: 19px; /* Aumenta todos los 'rem' un ~18% */
        }
        header { padding: 0 12%; }
        
        .hero-soltec__planet-wrapper {
            --planet-size: 520px !important;
        }
        
        /* La imagen en la vista de detalle de producto también debe escalar */
        .detalle-img-grande {
            height: 500px !important;
        }
    }
    
    /* Monitores 4K / Ultrawide Extremos (2560px+) */
    @media (min-width: 2560px) {
        :root {
            --max-container: 1800px;
        }
        html {
            font-size: 21.5px; /* Escala global agresiva para compensar la resolución */
        }
        header { padding: 0 15%; }
        
        .hero-soltec__planet-wrapper {
            --planet-size: 650px !important;
        }
        .detalle-img-grande {
            height: 600px !important;
        }
    }


/* =========================================================
   🛠️ FIX: ALINEACIÓN PERFECTA DE TARJETA Y MAPA (DESKTOP)
   ========================================================= */
   @media (min-width: 901px) {
    .ubicacion-section {
        /* Reemplazamos los margin-top raros de las tarjetas con padding general en la sección */
        padding: 100px 0 !important; 
    }

    .ubicacion-inner {
        /* Esto obliga mágicamente a que ambas columnas tengan la MISMA altura */
        align-items: stretch !important; 
    }

    .ubicacion-card,
    .ubicacion-mapa {
        /* Limpiamos las alturas relativas y márgenes que rompían todo */
        margin: 0 !important; 
        height: auto !important;
        min-height: 100% !important;
    }

    .ubicacion-mapa {
        width: 100% !important; /* Corregimos el 101% que tenías antes */
        display: flex; /* Ayuda a que el iframe (mapa) llene todo el espacio */
    }

    .ubicacion-mapa iframe {
        flex-grow: 1;
        width: 100% !important;
        height: 100% !important;
        min-height: 400px; /* Un tope mínimo por seguridad */
        border-radius: inherit; /* Copia los bordes redondeados del contenedor */
    }
}

/* =========================================
   PRESENCE / MAPA - REDISEÑO SOLTEC
   ========================================= */

   .presence{
    /* se integra bien aunque el fondo de la página sea claro */
    padding: 44px 16px 54px;
    background:
      radial-gradient(1200px 520px at 20% -20%, rgba(30,197,255,.10), transparent 55%),
      radial-gradient(1100px 520px at 90% 0%, rgba(124,58,237,.08), transparent 55%),
      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(245,250,255,.75) 100%);
  }
  
  .presence__wrap{
    --azul: var(--azul, #1ec5ff);
    --violeta: var(--violeta, #7c3aed);
    --ink: rgba(226,232,240,.92);
    --muted: rgba(226,232,240,.70);
  
    max-width: 1120px;
    margin: 0 auto;
    border-radius: 22px;
    padding: 18px 18px 16px;
  
    /* card premium, azul real (no gris) */
    background:
      radial-gradient(900px 360px at 18% 0%, rgba(30,197,255,.18), transparent 60%),
      radial-gradient(900px 360px at 92% 10%, rgba(124,58,237,.14), transparent 55%),
      linear-gradient(135deg, rgba(3,10,26,.92), rgba(6,18,44,.88));
    border: 1px solid rgba(30,197,255,.20);
    box-shadow:
      0 18px 70px rgba(0,0,0,.35),
      0 0 0 1px rgba(148,163,184,.08) inset;
    backdrop-filter: blur(10px);
    color: var(--ink);
    position: relative;
    overflow: hidden;
  }
  
  /* borde glow sutil */
  .presence__wrap::before{
    content:"";
    position:absolute;
    inset:-2px;
    pointer-events:none;
    background:
      radial-gradient(700px 220px at 25% 0%, rgba(30,197,255,.18), transparent 60%),
      radial-gradient(700px 220px at 85% 10%, rgba(124,58,237,.14), transparent 60%);
    filter: blur(12px);
    opacity: .9;
  }
  
  /* header */
  .presence__head{
    position: relative;
    z-index: 1;
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 6px 14px;
  }
  
  .presence__kicker{
    display:inline-flex;
    gap: 8px;
    align-items:center;
    font-size: 11px;
    letter-spacing: .18em;
    opacity: .9;
    color: rgba(226,232,240,.78);
  }
  
  .presence__title h2{
    margin: 8px 0 4px;
    margin-bottom: 10px;
    font-size: 20px;
    letter-spacing: .2px;
  }
  
  .presence__title p{
    margin: 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.35;
  }
  
  .presence__badges{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content:flex-end;
  }
  
  .presence__badge{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(148,163,184,.16);
    background: rgba(2,6,23,.35);
    color: rgba(226,232,240,.88);
    user-select: none;
  }
  
  .presence__badge::before{
    content:"";
    width: 10px; height: 10px;
    border-radius: 4px;
    display:inline-block;
    background: rgba(148,163,184,.35);
  }
  
  .presence__badge--hub{
    border-color: rgba(30,197,255,.28);
  }
  .presence__badge--hub::before{
    background: rgba(30,197,255,.55);
    box-shadow: 0 0 12px rgba(30,197,255,.35);
  }
  
  .presence__badge--presence{
    border-color: rgba(30,197,255,.16);
  }
  .presence__badge--presence::before{
    background: rgba(30,197,255,.22);
  }
  
  .presence__badge--count{
    border-color: rgba(124,58,237,.16);
  }
  .presence__badge--count::before{
    background: rgba(124,58,237,.22);
  }
  
  /* layout */
  .presence__grid{
    position: relative;
    z-index: 1;
    display:grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 14px;
  }
  
 /* =========================================
   MAPA: EFECTO PANTALLA HUNDIDA (RADAR)
   ========================================= */
.presence__map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(30, 197, 255, 0.15); /* Borde levemente cyan */
  
  /* Fondo radial + Sombra interior profunda */
  background: 
    radial-gradient(800px 320px at 50% 50%, rgba(30, 197, 255, 0.08), transparent 70%),
    rgba(2, 6, 23, 0.6);
  
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8); /* EFECTO PANTALLA HUNDIDA */
}

/* Grilla de fondo más visible y tecnológica */
.presence__map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(30, 197, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 197, 255, 0.04) 1px, transparent 1px);
  background-size: 30px 30px; /* Cuadritos un poco más chicos */
  z-index: 0;
}

.presence__svg {
  position: relative;
  z-index: 2; /* Asegura que el SVG esté por encima de la grilla */
  padding: 20px;
}
  .presence__svg svg{
    width: 100%;
    height: auto;
    display:block;
  }
  
  /* tooltip */
  .presence__tooltip{
    position:absolute;
    transform: translate(-9999px,-9999px);
    pointer-events:none;
    z-index: 50;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(6, 18, 44, 0.95); /* Azul muy oscuro, no negro puro */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(30, 197, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(30, 197, 255, 0.1);
    padding: 12px 16px; /* Más aire interno */
  }
  
  /* sidebar */
  .presence__side{
    border-radius: 18px;
    border: 1px solid rgba(148,163,184,.14);
    background: rgba(2,6,23,.28);
    padding: 14px;
  }
  
  .presence__sideHead{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .presence__sideHead h3{
    margin:0;
    font-size: 14px;
    color: rgba(226,232,240,.90);
  }
  
  .presence__pill{
    display:inline-flex;
    align-items:center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(2,6,23,.45);
    border: 1px solid rgba(30,197,255,.14);
    color: rgba(226,232,240,.82);
  }
  
  /* =========================================
   LISTA LATERAL OPTIMIZADA (Scroll + Hover UI)
   ========================================= */
.presence__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  
  /* Límite de altura y Scrollbar elegante */
  max-height: 420px; /* Ajustá esto según la altura de tu mapa */
  overflow-y: auto;
  padding-right: 6px; /* Espacio para la barra */
}

/* Custom Scrollbar */
.presence__list::-webkit-scrollbar { width: 4px; }
.presence__list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 4px; }
.presence__list::-webkit-scrollbar-thumb { background: rgba(30, 197, 255, 0.3); border-radius: 4px; }
.presence__list::-webkit-scrollbar-thumb:hover { background: rgba(30, 197, 255, 0.6); }

.presence__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  
  /* Borde izquierdo transparente listo para iluminarse */
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-left: 3px solid transparent; 
  
  background: rgba(2, 6, 23, 0.4);
  color: rgba(226, 232, 240, 0.86);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.presence__list li:hover,
.presence__list li.is-active { /* Funciona con tu JS */
  /* Desplazamiento lateral típico de dashboards */
  transform: translateX(4px); 
  
  /* Se ilumina el borde izquierdo y el fondo */
  border-left: 3px solid #1ec5ff;
  border-color: rgba(30, 197, 255, 0.2);
  background: rgba(30, 197, 255, 0.08);
  color: #ffffff;
}
  
  /* responsive */
  @media (max-width: 900px){
    .presence__head{ flex-direction: column; align-items: flex-start; }
    .presence__badges{ justify-content:flex-start; }
    .presence__grid{ grid-template-columns: 1fr; }
  }
  
  /* =========================================
     ESTILOS SVG (provincias + pins)
     Tus clases existentes: .prov .prov--presence .prov--hub etc.
     ========================================= */
  
  .prov{
    fill: rgba(148,163,184,.07);
    stroke: rgba(148,163,184,.18);
    stroke-width: 1;
    transition: fill .18s ease, stroke .18s ease, filter .18s ease;
    cursor: pointer;
  }
  
  .prov--presence{
    fill: rgba(30,197,255,.16);
    stroke: rgba(30,197,255,.34);
  }
  
  .prov--hub{
    /* Córdoba bien potente */
    fill: rgba(30,197,255,.30);
    stroke: rgba(30,197,255,.82);
    stroke-width: 1.25;
    filter:
      drop-shadow(0 0 10px rgba(30,197,255,.22))
      drop-shadow(0 0 26px rgba(30,197,255,.16));
  }
  
  .prov:hover,
  .prov.is-active{
    fill: rgba(30,197,255,.22);
    stroke: rgba(30,197,255,.90);
  }
  
  .map-pin-dot{
    fill: rgba(241,245,249,.95);
    stroke: rgba(30,197,255,.85);
    stroke-width: 2;
  }
  

  /* dot base (Provincias) */
.presence__dot {
  width: 8px; 
  height: 8px;
  border-radius: 50%;
  background: rgba(30, 197, 255, 0.6);
  box-shadow: 0 0 8px rgba(30, 197, 255, 0.4);
  transition: all 0.3s ease;
}

/* dot HUB (Córdoba) - Más grande y brilla fuerte */
.presence__dot--hub {
  width: 10px;
  height: 10px;
  background: #1ec5ff;
  box-shadow: 0 0 12px #1ec5ff, 0 0 0 4px rgba(30, 197, 255, 0.2);
}

/* Iluminar el dot cuando hacés hover en el li */
.presence__list li:hover .presence__dot,
.presence__list li.is-active .presence__dot {
  background: #ffffff;
  box-shadow: 0 0 15px #1ec5ff;
}
  .map-pin-halo{
    fill: rgba(30,197,255,.16);
    stroke: rgba(30,197,255,.26);
    stroke-width: 1;
  }
  
  .map-pin-pulse{
    fill: transparent;
    stroke: rgba(30,197,255,.65);
    stroke-width: 2;
    opacity: .85;
    animation: soltecPulse 1.8s ease-out infinite;
    transform-origin: center;
  }
  
  @keyframes soltecPulse{
    0%   { transform: scale(.95); opacity: .85; }
    70%  { transform: scale(2.10); opacity: 0; }
    100% { transform: scale(2.20); opacity: 0; }
  }
  
  .map-callout-line{
    stroke: rgba(226,232,240,.72);
    stroke-width: 1.4;
    opacity: .9;
  }

/* ================================
   SOLTEC MAP - FIX + REDISEÑO
   (pegalo AL FINAL)
   ================================ */

/* 1) Aprovechar márgenes laterales */
.cobertura{
  padding: 32px 10px; /* menos “aire” lateral */
}

.cobertura-card{
  /* más ancho en desktop */
  max-width: 1320px;
  width: min(1320px, calc(100vw - 20px));
  margin: 0 auto;

  /* look Soltec */
  background:
    radial-gradient(900px 360px at 18% 0%, rgba(30,197,255,.18), transparent 60%),
    radial-gradient(900px 360px at 92% 10%, rgba(124,58,237,.14), transparent 55%),
    linear-gradient(135deg, rgba(3,10,26,.92), rgba(6,18,44,.88));
  border: 1px solid rgba(30,197,255,.20);
  box-shadow: 0 18px 70px rgba(0,0,0,.35);
  border-radius: 20px;
  padding: 16px;
}

/* 2) Header “arriba” que no se desacomode */
.cobertura-header{
  display: flex;
  align-items: center;     /* antes flex-start -> desalineaba visualmente */
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;         /* cuando no entra, baja prolijo */
  padding: 6px 6px 12px;
}

.cobertura-header h2{
  margin: 0;
  font-size: 18px;
  color: rgba(226,232,240,.94);
}

.cobertura-header p{
  margin: 6px 0 0;
  color: rgba(226,232,240,.70);
}

/* que las pills se vayan a la derecha pero bajen bien en pantallas más chicas */
.cobertura-legend{
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 3) Dar más ancho al mapa (menos a la lista) */
.cobertura-grid{
  display: grid;
  grid-template-columns: 1.45fr 0.55fr; /* más grande el mapa */
  gap: 12px;
}

/* 4) Map panel más “pro” y usable */
.cobertura-map{
  min-height: 420px; /* así no queda chiquito */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.14);
  background:
    radial-gradient(800px 320px at 15% -15%, rgba(30,197,255,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 10%, rgba(124,58,237,.12), transparent 60%),
    rgba(2,6,23,.30);
}

.map-frame{
  height: 100%;
  padding: 10px; /* menos padding interno -> se aprovecha más */
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-frame svg{
  width: 100%;
  height: 100%;   /* importante para que rellene */
  display: block;
}

/* 5) Side panel a tono */
.cobertura-side{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.26);
  padding: 12px;
}

.prov-list li{
  background: rgba(2,6,23,.20);
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 12px;
}

.prov-list li:hover{
  border-color: rgba(30,197,255,.35);
  background: rgba(2,6,23,.32);
}

/* 6) Provincias y HUB (Córdoba potente) */
.prov{
  fill: rgba(148,163,184,.07);
  stroke: rgba(148,163,184,.18);
  stroke-width: 1;
}

.prov--presence{
  fill: rgba(30,197,255,.16);
  stroke: rgba(30,197,255,.34);
}

.prov--hub{
  fill: rgba(30,197,255,.30);
  stroke: rgba(30,197,255,.85);
  stroke-width: 1.25;
  filter:
    drop-shadow(0 0 10px rgba(30,197,255,.24))
    drop-shadow(0 0 26px rgba(30,197,255,.16));
}

/* responsive */
@media (max-width: 900px){
  .cobertura-grid{ grid-template-columns: 1fr; }
  .cobertura-map{ min-height: 360px; }
}

/* =========================================
   HEADER DEL MAPA (Corregido: Espaciado y Legibilidad)
   ========================================= */
/* =========================================
   HEADER FULL-WIDTH REAL (sin recortes)
   ========================================= */
   .presence__head{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  
    /* alto/largo */
    padding: 34px 34px 60px;
  
    /* edge-to-edge dentro de la card */
    margin: calc(var(--wrap-pad) * -1);
    margin-bottom: 14px;
  
    /* look */
  
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
  
    /* opcional pero recomendado: fondo sutil para “separarlo” */
    background:
      radial-gradient(800px 220px at 22% 0%, rgba(30,197,255,.14), transparent 60%),
      radial-gradient(800px 220px at 86% 10%, rgba(124,58,237,.12), transparent 60%),
      rgba(2,6,23,.18);
  }
  
  /* Responsive */
  @media (max-width: 900px){
    .presence__head{
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
      padding: 22px 18px 18px;
      margin: calc(var(--wrap-pad) * -1);
      margin-bottom: 14px;
    }
    .presence__badges{
      width: 100%;
      justify-content: flex-start;
    }
  }
  
  /* =========================================
     RESPONSIVE DEL HEADER (Móviles)
     ========================================= */
  @media (max-width: 900px) {
    .presence__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 10px 6px 20px;
    }
    
    .presence__badges {
      width: 100%;
      justify-content: flex-start; /* Los botones se alinean a la izquierda en celular */
    }
  }

/* Quitar scroll forzado en el panel/lista */
.presence__list{
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;   /* auto = solo aparece si realmente no entra */
  padding-right: 0 !important;   /* evita overflow por padding */
}

/* Si el scroll lo tenés puesto en el contenedor del panel */
.presence__side{
  overflow: visible !important;
}

/* Desktop: sin scroll */
.presence__list{
  max-height: none !important;
  overflow: visible !important;
}

/* Mobile: scroll si hiciera falta */
@media (max-width: 900px){
  .presence__list{
    max-height: 320px;
    overflow-y: auto;
  }
}

/* =========================================================
   PRESENCE BAND (externo) – integra con Ubicación y CTA
   Pegar AL FINAL
   ========================================================= */

/* 1) Banda de transición full-width detrás del bloque */
.presence-band{
  position: relative;
  isolation: isolate; /* para que los pseudo-elementos no afecten afuera */
  padding: clamp(22px, 3vw, 34px) 0 clamp(26px, 4vw, 44px);
}

/* Fondo suave que une “claro” -> “tech oscuro” */
.presence-band::before{
  content:"";
  position:absolute;
  inset: 0;
  z-index: -1;
  pointer-events:none;

  background:
    /* toque “Soltec” suave (no grita) */
    radial-gradient(1100px 460px at 18% -10%,
      rgba(30,197,255,.10), transparent 60%),
    radial-gradient(1000px 460px at 92% 0%,
      rgba(124,58,237,.08), transparent 58%),

    /* transición vertical para que no quede “pegote” */
    linear-gradient(180deg,
      rgba(245,247,252,0.00) 0%,
      rgba(235,243,255,0.55) 28%,
      rgba(10,24,54,0.10) 68%,
      rgba(3,10,26,0.00) 100%);
}

/* Línea/halo superior sutil (conecta con el lenguaje del sitio) */
.presence-band::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  top: 10px;
  height: 1px;
  pointer-events:none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(30,197,255,.22) 18%,
    rgba(124,58,237,.18) 50%,
    rgba(30,197,255,.22) 82%,
    transparent 100%);
  opacity: .55;
}

/* 2) Ancho: alinear al mismo container que el resto (ubicación/productos) */
.presence-band .presence{
  /* sacamos “aire” extra externo si tu .presence tenía padding propio grande */
  padding: 0 !important;
  background: transparent !important;
}

/* La card interna (wrap) queda con ancho “de sitio”, no gigante */
.presence-band .presence__wrap{
  max-width: 1160px;                 /* ajustá a tu container real si usás otro */
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
}

/* 3) Sombra externa más “integrada” con la zona clara */
.presence-band .presence__wrap{
  box-shadow:
    0 16px 60px rgba(0,0,0,.20),
    0 0 0 1px rgba(148,163,184,.08) inset;
}

/* 4) En mobile, que no quede apretado */
@media (max-width: 900px){
  .presence-band{
    padding: 18px 0 34px;
  }
  .presence-band .presence__wrap{
    width: calc(100% - 20px);
  }
}

/* =========================================
   PRESENCE / MAPA - FULL WIDTH
   ========================================= */

/* 1. Limpiamos la banda exterior para que no estorbe */
.presence-band {
    position: relative;
    padding: 60px 0; /* Buen aire arriba y abajo */
    background: transparent !important;
}

/* Matamos los pseudo-elementos que hacían el fondo raro/claro */
.presence-band::before,
.presence-band::after {
    display: none !important;
}

/* 2. El contenedor principal: Ya no es una "tarjeta", es solo un wrapper de ancho */
.presence__wrap {
    /* Mantenemos un max-width para que en pantallas gigantes (4K) no se deforme,
       pero le sacamos los bordes, sombras y fondos */
    max-width: 1400px; /* Mucho más ancho que antes */
    width: 95%; /* Ocupa casi todo el ancho disponible */
    margin: 0 auto;
    padding: 0;
    
    /* ACÁ ESTÁ LA CLAVE: Matamos el look de "Card" */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Matamos el borde glow sutil que tenía la tarjeta */
.presence__wrap::before {
    display: none !important;
}

/* 3. Header: Ajustamos para que quede libre, no encerrado */
.presence__head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 30px 0; /* Solo espacio hacia abajo */
    margin: 0; /* Reseteamos márgenes negativos */
    background: transparent !important; /* Sin fondo */
}

/* 4. Ajustes a la grilla interna para que respire en el nuevo ancho */
.presence__grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* Mapa un poco más grande en relación a la lista */
    grid-template-columns: 1.5fr 1fr; 
    gap: 24px; /* Más espacio entre mapa y lista */
}

/* El mapa y la lista lateral conservan sus estilos de "caja"
   para destacarse contra el fondo oscuro general de la web */

/* Solo para asegurar que el SVG llene bien su nueva caja más grande */
.presence__svg {
    padding: 0; /* Quitamos padding excesivo para que el mapa crezca */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px; /* Forzamos un alto decente */
}

.presence__svg svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 5. Responsive básico para el nuevo layout */
@media (max-width: 1024px) {
    .presence__grid {
        grid-template-columns: 1fr; /* Pasa a 1 columna antes */
    }
    
    .presence__svg {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .presence__head {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 20px;
    }
    
    .presence__badges {
        justify-content: flex-start;
    }
    
    .presence__wrap {
        width: 100%;
        padding: 0 16px; /* Márgenes laterales en móvil */
    }
}


/* =========================================

   HEADER: CENTRADO Y BALANCEADO

   ========================================= */

.presence__head {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column; /* Apilamos los elementos */

    align-items: center;    /* Centramos horizontalmente */

    text-align: center;

    gap: 16px;              /* Espacio entre título y badges */

    padding: 0 0 50px 0;    /* Mucho más aire hacia abajo */

    margin: 0 auto;

    max-width: 800px;       /* Evita que el texto sea una línea eterna */

}



/* Ajustes de texto para el header centrado */

.presence__title h2 {

    font-size: 2.2rem;      /* Un poco más grande para que imponga */

    margin-bottom: 12px;

    color: #ffffff;

}



.presence__title p {

    font-size: 1rem;

    color: rgba(255, 255, 255, 0.7);

}



.presence__badges {

    justify-content: center; /* Botones al centro */

    margin-top: 10px;

    width: 100%;

}



/* =========================================

   GRILLA: PANORÁMICA Y CON AIRE

   ========================================= */

.presence__wrap {

    max-width: 1300px; /* Ancho ideal para desktop grande */

    width: 92%;

    margin: 0 auto;

}



.presence__grid {

    position: relative;

    z-index: 1;

    display: grid;

    /* El mapa ocupa un ~60%, la lista un ~40% */

    grid-template-columns: 1.6fr 1fr; 

    gap: 40px; /* Bastante separación entre paneles */

    align-items: stretch; /* Ambos paneles tendrán la misma altura */

}



/* =========================================

   PANELES: MAPA Y LISTA (DARK GLASS PREMIUM)

   ========================================= */



/* Aplicamos el mismo diseño a las dos cajas principales */

.presence__map, 

.presence__side {

    border-radius: 24px;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));

    backdrop-filter: blur(24px) saturate(180%);

    -webkit-backdrop-filter: blur(24px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    border-left: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);

    overflow: hidden;

}



/* Ajustes finos para el contenedor del mapa */

.presence__map {

    position: relative;

    /* Le sacamos el grid/radar de fondo que tenías, dejamos que el glass haga el trabajo */

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 500px; 

}



/* El SVG del mapa necesita respirar un poco adentro */

.presence__svg {

    width: 90%;

    height: 90%;

    padding: 0;

}



/* Ajustes finos para el sidebar (lista) */

.presence__side {

    padding: 24px; /* Más aire interno */

    display: flex;

    flex-direction: column;

}



/* Estilizamos los ítems de la lista para que combinen con el premium */

.presence__list li {

    background: rgba(255, 255, 255, 0.03); /* Fondo super sutil */

    border: 1px solid rgba(255, 255, 255, 0.05);

    border-radius: 14px;

    padding: 14px 18px;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.85);

    transition: all 0.3s ease;

}



.presence__list li:hover,

.presence__list li.is-active {

    transform: translateX(6px);

    background: rgba(30, 197, 255, 0.1);

    border-color: rgba(30, 197, 255, 0.3);

    box-shadow: 0 4px 15px rgba(30, 197, 255, 0.1);

    color: #ffffff;

}


/* =========================================

   1. FIX HEADER: ORDENADO Y CENTRADO REAL

   ========================================= */

/* Limpiamos la caja contenedora para que siga siendo transparente */
/* =========================================
   HEADER: CAJA GLASS PREMIUM (EFECTO GLOW)
   ========================================= */
.presence__head {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
    
    /* Centrado y separación del mapa */
    margin: 0 auto 85px auto !important;
    
    /* 1. EL TAMAÑO: Le damos aire interno para que sea una caja real */
    padding: 36px 40px !important; 
    width: 100% !important;
    max-width: 850px !important;
    border-radius: 24px !important;
    
    /* 2. EL FONDO: Un cristal azulado muy oscuro pero que deja pasar la luz */
    background: linear-gradient(135deg, rgba(6, 24, 54, 0.75), rgba(2, 10, 26, 0.9)) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    
    /* 3. LOS BORDES: Simulamos luz pegando desde arriba (Cyan sutil) */
    border: 1px solid rgba(30, 197, 255, 0.15) !important;
    border-top: 1px solid rgba(30, 197, 255, 0.45) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.6) !important;
    
    /* 4. LA SOMBRA MULTICAPA: Profundidad + Resplandor Cyan */
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.6),            /* Sombra principal (despega del fondo) */
        0 0 40px rgba(30, 197, 255, 0.12),         /* Resplandor/Glow cyan alrededor */
        inset 0 1px 1px rgba(255, 255, 255, 0.15) !important; /* Brillo interno en el borde superior */
}

/* =========================================
   TÍTULO: BRILLO Y DEGRADADO
   ========================================= */
.presence__title h2 {
    font-size: 2.6rem !important;
    margin: -30px  10px 25px !important;
    
    /* Degradado de Blanco a Cyan para que haga juego con la luz de la caja */
    background: linear-gradient(180deg, #ffffff 0%, #1ec5ff 100%) !important;
  -webkit-background-clip: text !important;
   background-clip: text !important; /* Propiedad estándar para que VS Code no se queje */
    -webkit-text-fill-color: transparent !important;
    
    /* Sombra en el texto para que no se pierda sobre el cristal */
    filter: drop-shadow(0 4px 12px rgba(30, 197, 255, 0.25));
}

.presence__title p {
    margin: 0 !important;
    font-size: 0.85rem !important;
    color: rgba(226, 232, 240, 0.85) !important;
    line-height: 1.5;

}

/* =========================================

   2. FIX TOOLTIP Y MAPA

   ========================================= */

.presence__map {

    position: relative;

    border-radius: 24px;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));

    backdrop-filter: blur(24px) saturate(180%);

    -webkit-backdrop-filter: blur(24px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    border-left: 1px solid rgba(255, 255, 255, 0.10);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);



    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 500px;



    /* LA MAGIA: Sacamos overflow:hidden para que el tooltip no se corte en los bordes */

    overflow: visible !important; 

}



/* Como sacamos overflow: hidden, nos aseguramos de que el contenido base respete las curvas */

.presence__map::before,

.presence__map::after {

    border-radius: inherit !important;

}



/* Ajuste del Tooltip */

.presence__tooltip {

    /* Mantenemos tu fondo premium */

    background: rgba(6, 18, 44, 0.95) !important;

    backdrop-filter: blur(8px) !important;

    border: 1px solid rgba(30, 197, 255, 0.4) !important;

    border-radius: 12px !important;

    padding: 10px 16px !important;

    color: #ffffff !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(30, 197, 255, 0.1) !important;

    

    /* Forzamos z-index altísimo para que pase por arriba de TODO */

    z-index: 9999 !important; 

    pointer-events: none !important;



    /* Acercamos el tooltip al puntero del mouse usando márgenes 

       (Esto compensa las coordenadas que le manda tu JS) */

    margin-top: -900px !important; /* Lo levanta para que no tape el punto */

    margin-left: -400px !important; /* Lo corre un pelín a la derecha */

}



/* =========================================================
   RESPONSIVE DEFINITIVO: SECCIÓN PRESENCIA (MAPA)
   ========================================================= */

/* --- TABLETS Y PANTALLAS MEDIANAS (1024px o menos) --- */
@media (max-width: 1024px) {
    /* 1. La grilla pasa a 1 sola columna (Mapa arriba, Lista abajo) */
    .presence__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* 2. El mapa no necesita ser gigante si va apilado */
    .presence__map {
        min-height: 420px !important;
    }

    /* 3. La lista lateral (ahora abajo) necesita un tope para no ser eterna */
    .presence__list {
        max-height: 350px !important;
        overflow-y: auto !important;
        padding-right: 6px !important; /* Espacio para el scroll */
    }
}

/* --- CELULARES (768px o menos) --- */
@media (max-width: 768px) {
    /* 1. Achicamos la "Caja Glass" del Header */
    .presence__head {
        padding: 24px 20px !important; /* Menos aire interno */
        margin-bottom: 35px !important; /* Menos separación con el mapa */
        gap: 12px !important;
        border-radius: 18px !important;
    }

    /* 2. Achicamos la tipografía del Título */
    .presence__title h2 {
        font-size: 1.6rem !important; /* Baja de 2.6rem */
        margin: 0 0 10px 0 !important; /* Limpiamos márgenes negativos raros */
    }

    /* 3. Ajustamos el párrafo secundario */
    .presence__title p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* 4. Badges (Botones HUB/Provincias) apilados si no entran */
    .presence__badges {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 5px !important;
    }

    /* 5. Ajustes al contenedor general (Wrap) para aprovechar pantalla */
    .presence__wrap {
        width: 100% !important;
        padding: 0 16px !important; /* Márgenes laterales mínimos */
    }

    /* 6. El mapa más compacto para celulares */
    .presence__map {
        min-height: 320px !important;
        border-radius: 16px !important;
    }

    /* 7. La caja de provincias un poco más compacta */
    .presence__side {
        padding: 16px !important;
        border-radius: 16px !important;
    }
}

/* --- CELULARES CHICOS (480px o menos) --- */
@media (max-width: 480px) {
    /* Micro-ajustes para pantallas muy estrechas */
    .presence__title h2 {
        font-size: 1.55rem !important;
    }
    
    .presence__map {
        min-height: 280px !important;
    }

    .presence__head {
        padding: 20px 16px !important;
    }
}

/* =========================================
   FIX DEFINITIVO RESPONSIVE (CELULARES)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Liberamos la altura de la caja Glass para que envuelva todo */
    .presence__head {
        height: auto !important;
        min-height: max-content !important;
        max-height: none !important; /* Mata cualquier límite viejo */
        
        padding: 30px 20px !important; /* Buen aire interno */
        margin-bottom: 40px !important; /* Separación con el mapa */
        
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* 2. El título: tamaño adaptado e interlineado para que no se pise */
    .presence__title h2 {
        font-size: 1.4rem !important; 
        line-height: 1.3 !important; /* Da espacio si rompe en dos líneas */
        margin: 0 0 12px 0 !important;
        white-space: normal !important; /* Permite que el texto fluya natural */
    }

    /* 3. El párrafo: aseguramos que se quede adentro */
    .presence__title p {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
}

/* =========================================
   FIX EXTRA PARA PANTALLAS MUY CHICAS (iPhone SE, etc)
   ========================================= */
@media (max-width: 480px) {
    .presence__title h2 {
        font-size: 1.20rem !important;
    }
    .presence__head {
        padding: 24px 30px 16px !important;
    }
}



/* =========================================================
   RESPONSIVE: NOTEBOOKS Y PANTALLAS MEDIANAS (Hasta 1440px)
   ========================================================= */
@media (max-width: 1440px) {
    /* 1. Ajustamos el ancho general para que no desborde la pantalla */
    .presence__wrap {
        max-width: 980px !important; 
    }

    /* 2. Reducimos la separación entre el mapa y la lista */
    .presence__grid {
        gap: 10px !important; 
    }

    /* 3. LA CAJA DEL TÍTULO: Bien finita, apaisada y compacta */
    .presence__head {
        max-width: 600px !important;
        margin: 0 auto 40px auto !important; 
        padding: 8px 20px !important; 
        gap: 6px !important;
        min-height: auto !important;
    }

    /* 4. EL TÍTULO: Un toque más chico */
    .presence__title h2 {
        font-size: 1.6rem !important; 
        margin: 0 0 40px 0 !important; 
    }

    /* 5. EL PÁRRAFO: Ajuste de tamaño e interlineado */
    .presence__title p {
        font-size: 0.75rem !important; 
        line-height: 1.3 !important;
    }

    /* 6. EL MAPA: Bien compacto para no obligar a hacer scroll */
    .presence__map {
        min-height: 280px !important; 
    }
    
    .presence__svg {
        padding: 5px !important; 
    }

    /* 7. EL PANEL LATERAL Y LAS TARJETAS (Provincias) */
    .presence__side {
        padding: 12px !important; 
    }

    .presence__list {
        max-height: 240px !important; 
        gap: 4px !important; 
    }

    .presence__list li {
        padding: 4px 12px !important; 
    }
}

/* =========================================================
   TOOLTIP DEL MAPA (Interactivo y Responsive)
   ========================================================= */

/* --- 2. RESPONSIVE: NOTEBOOKS (Hasta 1440px) --- */
@media (max-width: 1440px) {
    .presence__tooltip {
        /* Reducimos la compensación para que no se escape de la pantalla más chica */
        margin-top: -600px !important; 
        margin-left: -350px !important;
        font-size: 0.9rem !important;
        padding: 8px 14px !important;
    }
}

/* =========================================================
   TEST HOME DARK (SOLO INDEX) — body + main
   Pegalo AL FINAL del index.css
   ========================================================= */

body.home-dark{
  /* Azul oscuro tipo inicio */
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(30,197,255,.12), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(124,58,237,.10), transparent 58%),
    linear-gradient(180deg, #04152d 0%, #061a33 45%, #04152d 100%);
  
  /* Texto base claro (para que no muera en oscuro) */
  color: rgba(226,232,240,.92);
}


/* main hoy te pisa con background gris; lo apagamos para ver el body */
body.home-dark main{
  background: transparent !important;
}

/* opcional: si ves links muy apagados */
/*body.home-dark a{ color: inherit; }*/


/* =========================================
   FIX: SUBMENÚ SISTEMAS EN HOME DARK
   ========================================= */

/* 1. Evitamos el "blanco sobre blanco" forzando el color oscuro en el texto */
body.home-dark .nav-submenu a {
    color: #0b2e55 !important; 
}

/* 2. Blindamos la caja por si alguna otra sección intenta taparla */
body.home-dark .nav-submenu {
    z-index: 9999 !important;
}

/* 3. Mantenemos intacto tu efecto hover (Fondo azul, texto blanco) */
body.home-dark .nav-submenu a:hover {
    background: #062774 !important;
    color: #ffffff !important;
}

/* =========================================
   DESCRIPCIÓN DE PRODUCTOS (Más chica y opaca)
   ========================================= */

/* =========================================
   DESCRIPCIÓN DE PRODUCTOS (Centrada y con márgenes prolijos)
   ========================================= */

body.home-dark #productos-grid .producto ul li {
    /* 1. COLOR Y OPACIDAD: Blanco al 65% para que se lea bien pero siga sutil */
    color: rgba(255, 255, 255, 0.65) !important; 
    
    /* 2. TAMAÑO Y LECTURA */
    font-size: 0.8rem !important; 
    font-weight: 300 !important; 
    line-height: 1.45 !important; 
    
    /* 3. ALINEACIÓN: Centrado para que haga juego con la foto y el título */
    text-align: center !important;
    
    /* 4. MÁRGENES INTERNOS: Empuja el texto hacia el centro para que no toque los bordes */
    padding: 0 24px !important; 
    margin: 0 !important;
}

body.home-dark #productos-grid .producto ul {
    list-style: none !important; 
    padding: 0 !important; /* Limpiamos el padding acá porque se lo dimos al "li" */
    margin: 5px 0 20px !important; /* Un poco de aire arriba, y bastante aire abajo para separarlo del precio */
    
    /* Aseguramos que el bloque se comporte bien */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

@media (max-width: 768px) {
  /* 1. Oculta la descripción en la grilla principal */
  body.home-dark #productos-grid .producto ul {
    display: none !important; 
  }

  /* 2. Oculta la descripción en la grilla de productos relacionados */
  #relacionados-grid .producto ul {
    display: none !important;
  }
}

/* ==============================
   MAIN – Sistema Cereales
   (scoped: prefijo cereales-)
================================ */

.cereales-main {
  background: #f8fafc;
  color: var(--gris-texto);
  font-family: var(--font-cuerpo);
}

.cereales-container {
  width: min(var(--max), calc(100% - 2.5rem));
  margin-inline: auto;
}

.cereales-section {
  padding: clamp(2.5rem, 5vw, 4.25rem) 0;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

title.cereales-,
.cereales-main h1,
.cereales-main h2,
.cereales-main h3 {
  font-family: var(--font-titulos);
  letter-spacing: -0.01em;
  color: #0b1b2d;
}

.cereales-muted {
  color: rgba(47, 59, 74, 0.8);
}

/* ---------- HERO ---------- */
.cereales-hero {
  position: relative;
  padding: clamp(2.75rem, 6vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3.25rem);
  background:
    radial-gradient(900px 360px at 10% 10%, rgba(27, 107, 178, 0.10), transparent 60%),
    radial-gradient(700px 360px at 85% 25%, rgba(59, 54, 179, 0.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
  overflow: clip;
}

.cereales-hero::before {
  content: "";
  position: absolute;
  inset: -120px -140px auto auto;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 247, 255, 0.14), transparent 55%);
  filter: blur(6px);
  pointer-events: none;
}

.cereales-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.cereales-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  color: rgba(14, 59, 111, 0.85);
  font-family: var(--font-cuerpo);
  margin: 0 0 .65rem;
}



.cereales-hero h1 {
  margin: 0 0 .9rem;
  font-size: clamp(2.0rem, 3.6vw, 3.2rem);
  line-height: 1.06;
  font-weight: 800;
  margin-top: 20px;
}

.cereales-hero h1 .accent {
  display: inline-block;
  font-style: italic;
  font-weight: 700;
  color: rgba(11, 46, 85, 0.86);
}

.cereales-hero__subtitle {
  margin: 0 0 1.05rem;
  max-width: 56ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(47, 59, 74, 0.85);
}

.cereales-highlights {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
  max-width: 52ch;
}

.cereales-highlights li {
  position: relative;
  padding-left: 1.1rem;
  color: rgba(47, 59, 74, 0.92);
}

.cereales-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(14, 59, 111, 0.55);
}

.cereales-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin: 0 0 .95rem;
}

.cereales-trustline {
  margin: 0;
  font-size: .95rem;
  color: rgba(47, 59, 74, 0.78);
}

/* “Mosaico” circular tipo la captura */


.cereales-mosaic__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#cereales-clip);
  border-radius: 18px; /* fallback por si el clip-path no aplica */
  background: #f8fafc;
}

.cereales-mosaic__stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cereales-mosaic__stroke circle {
  fill: none;
  stroke: #ffffff;
  stroke-width: 14;
  opacity: 0.96;
}

/* ---------- BENEFICIOS (CARDS) ---------- */
.cereales-section__head {
  display: grid;
  gap: .55rem;
  margin-bottom: 1.5rem;
}

.cereales-section__head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.2vw, 2.05rem);
  font-weight: 800;
}

.cereales-section__head p {
  margin: 0;
  max-width: 78ch;
  color: rgba(47, 59, 74, 0.80);
}

.cereales-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.cereales-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(20, 74, 143, 0.10);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  padding: 1.1rem 1.05rem 1.0rem;
  overflow: hidden;
  min-height: 182px;
}

.cereales-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(27, 107, 178, 0.16) 0%, rgba(27, 107, 178, 0.0) 46%);
  opacity: .9;
  pointer-events: none;
}

.cereales-card::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -64px;
  top: -68px;
  background: radial-gradient(circle, rgba(0, 247, 255, 0.18), transparent 60%);
  filter: blur(2px);
  pointer-events: none;
}

.cereales-card__icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(14, 59, 111, 0.08);
  border: 1px solid rgba(14, 59, 111, 0.12);
  margin-bottom: .75rem;
}

.cereales-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: rgba(14, 59, 111, 0.85);
}

.cereales-card h3 {
  position: relative;
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.cereales-card p {
  position: relative;
  margin: 0 0 .6rem;
  color: rgba(47, 59, 74, 0.82);
  line-height: 1.55;
  font-size: .95rem;
}

.cereales-card ul {
  position: relative;
  margin: 0;
  padding-left: 1.05rem;
  color: rgba(47, 59, 74, 0.86);
  display: grid;
  gap: .25rem;
  font-size: .92rem;
}

/* ---------- MÓDULOS ---------- */
.cereales-modulos {
  background:
    radial-gradient(900px 420px at 20% 25%, rgba(0, 247, 255, 0.13), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(59, 54, 179, 0.12), transparent 62%),
    linear-gradient(180deg, #eaf2ff 0%, #dcecff 100%);
}

.cereales-modulos__grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 1.35rem;
  align-items: start;
}

.cereales-app {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(0,0,0,.14);
  border: 1px solid rgba(11, 46, 85, 0.10);
  background: #fff;
}

.cereales-app__nav {
  background: linear-gradient(180deg, rgba(14,59,111,0.92), rgba(11,46,85,0.96));
  padding: 1rem .85rem;
  color: rgba(255,255,255,.92);
}

.cereales-app__nav h4 {
  margin: .2rem 0 .85rem;
  font-size: .95rem;
  letter-spacing: .02em;
  font-family: var(--font-cuerpo);
  font-weight: 700;
  opacity: .9;
}

.cereales-app__nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  font-size: .92rem;
}

.cereales-app__nav a:hover {
  background: rgba(255,255,255,.10);
}

.cereales-app__nav .active {
  background: rgba(255,255,255,.16);
  outline: 1px solid rgba(255,255,255,.18);
}

.cereales-app__panel {
  padding: 1rem 1rem 1.05rem;
  background: #f7fbff;
}

.cereales-panelCard {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(20, 74, 143, 0.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  overflow: hidden;
}

.cereales-panelCard__top {
  padding: .85rem .95rem;
  background: linear-gradient(90deg, rgba(14,59,111,0.12), rgba(27,107,178,0.08));
  border-bottom: 1px solid rgba(20, 74, 143, 0.10);
}

.cereales-panelCard__top h3 {
  margin: 0 0 .15rem;
  font-size: 1.02rem;
}

.cereales-panelCard__top p {
  margin: 0;
  color: rgba(47, 59, 74, 0.75);
  font-size: .92rem;
  line-height: 1.4;
}

.cereales-panelCard__body {
  padding: .85rem .95rem 1rem;
  display: grid;
  gap: .85rem;
}

.cereales-module {
  border: 1px solid rgba(20, 74, 143, 0.10);
  border-radius: 12px;
  padding: .75rem .85rem;
  background: #fff;
}

.cereales-module strong {
  display: block;
  font-family: var(--font-titulos);
  font-weight: 800;
  margin-bottom: .2rem;
}

.cereales-module p {
  margin: 0 0 .5rem;
  color: rgba(47, 59, 74, 0.78);
  font-size: .92rem;
  line-height: 1.45;
}

.cereales-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.cereales-tag {
  font-size: .82rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(14, 59, 111, 0.08);
  border: 1px solid rgba(14, 59, 111, 0.12);
  color: rgba(14, 59, 111, 0.92);
}

/* ---------- WORKFLOW ---------- */
.cereales-workflow__wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.5rem 0 0;
}

.cereales-orbit {
  width: min(560px, 100%);
  aspect-ratio: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
}

.cereales-orbit::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  border: 2px dashed rgba(14,59,111,0.18);
}

.cereales-orbit__center {
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(14,59,111,0.12), rgba(27,107,178,0.06));
  border: 1px solid rgba(14,59,111,0.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
}

.cereales-orbit__center strong {
  font-family: var(--font-titulos);
  font-weight: 900;
  line-height: 1.05;
}

.cereales-step {
  position: absolute;
  width: 180px;
  padding: .7rem .8rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(20, 74, 143, 0.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.cereales-step h4 {
  margin: 0 0 .25rem;
  font-family: var(--font-titulos);
  font-weight: 900;
  font-size: .95rem;
}

.cereales-step p {
  margin: 0;
  color: rgba(47, 59, 74, 0.78);
  font-size: .88rem;
  line-height: 1.35;
}

.cereales-step .n {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(14, 59, 111, 0.12);
  border: 1px solid rgba(14, 59, 111, 0.16);
  margin-right: .4rem;
  font-size: .82rem;
  font-weight: 800;
  color: rgba(14, 59, 111, 0.95);
}

/* posiciones (desktop) */
.cereales-step.s1 { top: 6%; left: 50%; transform: translate(-50%, 0); }
.cereales-step.s2 { top: 18%; right: -2%; }
.cereales-step.s3 { top: 48%; right: -4%; transform: translate(0, -50%); }
.cereales-step.s4 { bottom: 16%; right: 2%; }
.cereales-step.s5 { bottom: 6%; left: 50%; transform: translate(-50%, 0); }
.cereales-step.s6 { bottom: 18%; left: -2%; }
.cereales-step.s7 { top: 48%; left: -4%; transform: translate(0, -50%); }

/* ---------- INTEGRACIONES ---------- */
.cereales-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.cereales-hex {
  background: #fff;
  border: 1px solid rgba(20, 74, 143, 0.12);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  padding: 1.1rem 1rem;
  display: grid;
  place-items: center;
  gap: .55rem;
  text-align: center;
}

.cereales-hex__badge {
  width: 84px;
  height: 74px;
  display: grid;
  place-items: center;
  color: rgba(14,59,111,0.95);
  font-family: var(--font-titulos);
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(180deg, rgba(27,107,178,0.14), rgba(11,46,85,0.06));
  border: 1px solid rgba(14,59,111,0.18);
  clip-path: polygon(25% 6%, 75% 6%, 98% 50%, 75% 94%, 25% 94%, 2% 50%);
}

.cereales-hex p {
  margin: 0;
  color: rgba(47, 59, 74, 0.78);
  font-size: .92rem;
  line-height: 1.45;
}

/* ---------- FAQ ---------- */
.cereales-faq {
  display: grid;
  gap: .75rem;
  margin-top: 1.25rem;
}

.cereales-faq details {
  background: #fff;
  border: 1px solid rgba(20, 74, 143, 0.12);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.07);
  overflow: hidden;
}

.cereales-faq summary {
  cursor: pointer;
  list-style: none;
  padding: .95rem 1rem;
  font-family: var(--font-titulos);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cereales-faq summary::-webkit-details-marker { display: none; }

.cereales-faq summary::after {
  content: "▾";
  font-size: 1.1rem;
  color: rgba(14,59,111,0.75);
  transition: transform .18s ease;
}

.cereales-faq details[open] summary::after { transform: rotate(180deg); }

.cereales-faq .answer {
  padding: 0 1rem 1rem;
  color: rgba(47, 59, 74, 0.82);
  line-height: 1.6;
}

/* ---------- CONTACTO ---------- */
.cereales-contacto {
  background: var(--header-gradient);
  color: #fff;
  position: relative;
}

.cereales-contacto::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 380px at 15% 20%, rgba(0,247,255,0.18), transparent 60%),
    radial-gradient(900px 520px at 80% 40%, rgba(59,54,179,0.16), transparent 62%);
  pointer-events: none;
}

.cereales-contacto .cereales-container {
  position: relative;
}

.cereales-contacto h2 {
  color: #fff;
}

.cereales-contacto p {
  margin: .25rem 0 1.15rem;
  color: rgba(255,255,255,.85);
  max-width: 72ch;
}

.cereales-form {
  max-width: 780px;
  margin-top: 1.05rem;
  display: grid;
  gap: .75rem;
}

.cereales-field {
  display: grid;
  gap: .35rem;
}

.cereales-field input,
.cereales-field textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  padding: .85rem .9rem;
  font: inherit;
  color: #0b1b2d;
  outline: none;
}

.cereales-field textarea {
  min-height: 130px;
  resize: vertical;
}

.cereales-field input:focus,
.cereales-field textarea:focus {
  box-shadow: 0 0 0 4px rgba(0, 247, 255, 0.20);
  border-color: rgba(0, 247, 255, 0.45);
}

.cereales-contacto__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: .5rem;
}

.cereales-note {
  margin-top: .8rem;
  color: rgba(255,255,255,.75);
  font-size: .92rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .cereales-hero__grid { grid-template-columns: 1fr; }
  .cereales-modulos__grid { grid-template-columns: 1fr; }
  .cereales-app { grid-template-columns: 1fr; }
  .cereales-app__nav { display: none; }
  .cereales-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cereales-logos { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cereales-cards { grid-template-columns: 1fr; }
  .cereales-step { position: static; width: auto; }
  .cereales-orbit::before { display: none; }
  .cereales-orbit { aspect-ratio: auto; display: grid; gap: .75rem; }
  .cereales-orbit__center { width: 100%; height: auto; border-radius: 16px; }
}


/* ==========================
   FIX HERO: sin sombra rara
========================== */
.cereales-hero{
  box-shadow: none !important;
  background:
    radial-gradient(900px 420px at 75% 30%, rgba(27,107,178,.12), transparent 60%),
    radial-gradient(900px 420px at 25% 75%, rgba(0,0,0,.05), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%) !important;
}

/* apaga el “brillo” extra que podía verse como sombra */
.cereales-hero::before{
  display:none !important;
}

/* alineación/tamaño como la referencia */
.cereales-hero__art{
  display:flex;
  justify-content:flex-end;
}



/* separadores blancos */
.cereales-veins{
  fill: none;
  stroke: #fff;
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .98;
}

/* borde exterior blanco */
.cereales-outline{
  fill: none;
  stroke: #fff;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .98;
}


/* ===== HERO mosaic (idéntico estilo referencia) ===== */
.cereales-hero{
  position: relative;
  overflow: hidden;
}

/* Asegura que el decorado quede atrás del contenido */
.cereales-hero__grid{ position: relative; z-index: 2; }

/* Burbujas izquierdas (parciales) */
.cereales-hero__bubblesLeft{
  position: absolute;
  left: -95px;          /* para que queden “cortadas” */
  top: 185px;
  width: 260px;
  height: 520px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.cereales-hero__bubblesLeft svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Mosaico principal a la derecha */
.cereales-hero__art{
  display: flex;
  justify-content: flex-end;
}



/* “Leche” blanca detrás, genera las separaciones */
.cereales-bubbleBase{ fill: #fff; }




/* stroke blanco = “espacios” entre fragmentos como en la foto */
#hero.cereales-hero .cereales-bubbleStroke circle{
  fill: none;
 /* stroke: #f8fafc;*/
  stroke: transparent; /* si el fondo es blanco, el stroke “invisible” también funciona */
  stroke-width: 24;               /* probá 20/22/26 según lo veas */
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .98;
}

/* por si te quedó CSS viejo usando #cereales-clip, lo anulamos */
#hero.cereales-hero .cereales-mosaic__img{
  clip-path: none !important;
}

/* =========================
   FULL-WIDTH SECTIONS
   (evita look “tarjeta”)
========================= */

/* Evita scroll horizontal por el truco de 100vw */
html, body { overflow-x: clip; }
.cereales-main { overflow-x: clip; }

/* Cada sección ocupa todo el ancho del viewport,
   aunque el main esté dentro de un contenedor */
.cereales-main > section{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* El contenido interno sigue respetando tu ancho */
.cereales-container{
  width: min(var(--max), calc(100% - 2.5rem));
  margin-inline: auto;
}

/* =========================
   HERO – ajuste burbujas derecha
========================= */



/* Agrandar el cluster derecho */

/* IMPORTANTE: el “gap”/base de burbujas ahora es el MISMO color del fondo */
.cereales-bubbleBase{
  fill: var(--hero-surface) !important;
}

/* Si estás usando outline/venas, las apagamos o las hacemos sutiles */
.cereales-outline{
  stroke: var(--hero-surface) !important; /* queda “invisible” como en la referencia */
  stroke-width: 18;
  opacity: 1;
}

/* Si querés dejar separaciones internas finas tipo referencia (opcional): */
.cereales-veins{
  stroke: rgba(255,255,255,.92) !important;
  stroke-width: 14;  /* antes estaba muy grueso */
  opacity: 1;
} 

/* =========================
   HERO: correr el contenido a la derecha
========================= */
.cereales-hero{
 --hero-copy-shift: clamp(35px, 6vw, 80px);
}

/* mueve TODO el bloque (eyebrow, h1, párrafo, bullets, botones) */
.cereales-hero__copy{
  padding-left: var(--hero-copy-shift);
}

/* si también querés que el “eyebrow” arranque más a la derecha */
.cereales-eyebrow{
  margin-left: 0; /* lo dejamos controlado por el padding del copy */
}

/* en pantallas chicas no lo corras */
@media (max-width: 640px){
  .cereales-hero__copy{ padding-left: 0; }
}

.cereales-eyebrow{
  margin-left: 0px; /* ajustá -8px / -16px según gusto */
}

/* El SVG puede “respirar” sin cortar sombras */
.cereales-mosaicSvg { overflow: visible; }

/* Borde/blanco y sombra por pieza */
.cereales-pieceRim {
  fill: #ffffff;
}

.cereales-pieceStroke {
  fill: none;
  stroke: transparent; /* si el fondo es blanco, el stroke “invisible” también funciona */
  stroke-width: 12; /* separador blanco */
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ===== HERO MOSAIC (ÚNICO y limpio) ===== */
.cereales-mosaic{
    transform: translate(115px, 6px);
  width: min(670px, 52vw);
  aspect-ratio: 1.12 / 1;
  margin: 0;
  overflow: visible;
  filter: none;
}

.cereales-mosaicSvg{
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}



@media (max-width: 980px){
  .hero-video{ width: min(560px, 100%); }
}

/* ===== HERO: darle más ancho al texto sin achicar el video ===== */
.cereales-hero{
  /* “bleed” para poder empujar hacia el borde del viewport */
  --bleed: max(0px, calc((100vw - var(--max)) / 2));
}

/* 1) Hacemos la columna del arte chica (reserva poco espacio) */
.cereales-hero__grid{
  grid-template-columns: minmax(0, 1fr) 220px; /* <-- deja mucho más ancho al texto */
  align-items: center;
}

/* 2) Permitimos que el video se salga del carril derecho */
.cereales-hero__art{
  position: relative;
  overflow: visible;
}



/* Responsive: en mobile volvemos a apilar normal */
@media (max-width: 980px){
  .cereales-hero__grid{
    grid-template-columns: 1fr;
  }
  .cereales-hero__art .hero-video,
  .cereales-hero__art .hero-media{
    position: static;
    transform: none;
    width: min(800px, 79%);
    margin: 2.00rem auto 0;
    margin-left: 2.10rem;
  }
}

/* HERO: fondo igual al del video */
.cereales-hero{
  background: #e3e2e9 !important;
  box-shadow: none !important;
}

/* (opcional) apagamos cualquier glow/overlay que estuviera metiendo gradientes */
.cereales-hero::before,
.cereales-hero::after{
  display: none !important;
}


/* ===== Desktop video FIX ===== */
.cereales-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(520px, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

.cereales-hero__art{
  position: relative;
  z-index: 1;
  min-height: 1px;
}




/* Card flotante (por arriba del gris) */
.cereales-hero__copy{
  position: relative;
  z-index: 5;
  background: #fff;
  border-radius: 18px;
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  border: 1px solid rgba(11,46,85,.08);
  box-shadow: 0 14px 28px rgba(11,46,85,.10);

  /* overlap suave hacia la derecha */
  margin-right: clamp(-70px, -7vw, -160px);
}

@media (max-width: 980px){
  .cereales-hero__grid{ grid-template-columns: 1fr; }
  .cereales-hero__copy{ margin-right: 0; }
}

/* Tabs en el menú lateral */
.cereales-app__nav .cereales-tab{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.86);
  padding: .55rem .6rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}

.cereales-app__nav .cereales-tab:hover{
  background: rgba(255,255,255,.10);
}

.cereales-app__nav .cereales-tab.active{
  background: rgba(255,255,255,.16);
  outline: 1px solid rgba(255,255,255,.18);
}

/* Paneles */
.cereales-panel{ display: block; }
.cereales-panel[hidden]{ display: none; }

/* =========================
   MODULOS: A LO ANCHO, SIN SCROLL, FULL WIDTH
========================= */

/* 1) Que el bloque use el ancho disponible */
#modulos .cereales-modulos__grid{
  grid-template-columns: 1fr;     /* deja de ser 2 columnas (evita aire) */
  gap: 1.25rem;
}

/* Si querés mantener el texto explicativo, que quede arriba */
#modulos .cereales-modulos__grid > div:first-child{
  max-width: 90ch;
}

/* 2) App: nav arriba + panel abajo, full width */
#modulos .cereales-app{
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(11,46,85,.14);
}

/* 3) NAV: grilla que reparte tabs y NO scrollea */
#modulos .cereales-app__nav{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .55rem;

  overflow: visible;       /* 👈 no scrollbar */
  white-space: normal;     /* 👈 permite wrap */
  padding: .9rem;

  background: linear-gradient(90deg, rgba(14,59,111,0.92), rgba(11,46,85,0.96));
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* opcional: ocultar “Módulos” si no lo querés */
#modulos .cereales-app__nav h4{
  display: none;
}

/* Tabs estilo píldora, centradas y ocupan la celda */
#modulos .cereales-app__nav .cereales-tab{
  width: 100%;
  text-align: center;
  border-radius: 999px;
  padding: .62rem .85rem;
  font-weight: 700;
  line-height: 1.1;
}

/* 4) Panel derecho: ocupa todo el ancho */
#modulos .cereales-app__panel{
  padding: 1rem;
  background: #f7fbff;
}

/* 5) Aprovechar el ancho: subcards en 2 columnas (desktop) */
#modulos .cereales-panelCard__body{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Subcard más compacta y prolija */
#modulos .cereales-subcard{
  height: 100%;
}

/* En pantallas chicas, una sola columna */
@media (max-width: 880px){
  #modulos .cereales-panelCard__body{
    grid-template-columns: 1fr;
  }
  #modulos .cereales-app__nav{
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  }
}


/* =========================
   WORKFLOW v2 – FLECHAS FORMAN EL CÍRCULO
   (pegá esto y borrá el CSS anterior del workflow)
========================= */

.cereales-workflow__wrap{
  display: grid;
  place-items: center;
  padding: 5rem 0 1.5rem;
}

/* Contenedor general */
.cereales-orbit--ring{
  --n: 7;
  --step: calc(360deg / var(--n));
  --r: clamp(175px, 20vw, 255px);        /* radio donde van los nodos */
  --ring-inset: 11.5%;                   /* tamaño del círculo */
  --ring-thick: 18px;                    /* grosor visual del anillo */
  --accent: rgba(27, 107, 178, .65);     /* azul vivo */
  --accent2: rgba(0, 247, 255, .45);     /* cian glow */
  --ink: rgba(11, 46, 85, .85);

  width: min(640px, 100%);
  aspect-ratio: 1/1;
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Fondo suave para darle vida (sin ensuciar) */
.cereales-orbit--ring::before{
  content:"";
  position:absolute;
  inset: -8%;
  background:
    radial-gradient(closest-side at 50% 45%, rgba(0,247,255,.10), transparent 62%),
    radial-gradient(closest-side at 55% 55%, rgba(27,107,178,.10), transparent 65%);
  filter: blur(2px);
  z-index: 0;
  pointer-events:none;
}

/* Centro */
.cereales-orbit__center{
  width: clamp(135px, 16vw, 175px);
  height: clamp(135px, 16vw, 175px);
  border-radius: 999px;
  display:grid;
  place-items:center;
  text-align:center;
  padding: 1rem;

  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.92), rgba(230,236,246,.92));
  border: 1px solid rgba(14,59,111,.18);
  box-shadow:
    0 20px 40px rgba(11,46,85,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
  z-index: 3;
}

.cereales-orbit__center strong{
  font-family: var(--font-titulos);
  font-weight: 900;
  line-height: 1.05;
  color: rgba(11,46,85,.92);
}

/* =========================
   ANILLO: que “se sienta” hecho de flechas/segmentos
========================= */
.cereales-orbit__ring{
  position:absolute;
  inset: var(--ring-inset);
  border-radius: 999px;
  z-index: 1;
  pointer-events:none;
}

/* 1) Segmentos con “energía” (conic) + máscara para ser anillo */
.cereales-orbit__ring::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;

  /* segmentos (como “trazos”) */
  background:
    repeating-conic-gradient(from -90deg,
      rgba(14,59,111,.16) 0 calc(var(--step) * .72),
      rgba(14,59,111,.04) calc(var(--step) * .72) var(--step)
    );

  /* máscara para que quede solo el anillo */
  -webkit-mask: radial-gradient(farthest-side,
    transparent calc(100% - var(--ring-thick)),
    #000 calc(100% - (var(--ring-thick) - 1px))
  );
  mask: radial-gradient(farthest-side,
    transparent calc(100% - var(--ring-thick)),
    #000 calc(100% - (var(--ring-thick) - 1px))
  );

  filter: drop-shadow(0 10px 22px rgba(11,46,85,.10));
  opacity: .95;
}

/* 2) Un brillo sutil interior (da “alma”) */
.cereales-orbit__ring::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 999px;

  background:
    conic-gradient(from -90deg,
      transparent 0deg 10deg,
      rgba(0,247,255,.18) 40deg,
      rgba(27,107,178,.16) 120deg,
      rgba(0,247,255,.14) 210deg,
      rgba(27,107,178,.16) 300deg,
      transparent 360deg
    );

  -webkit-mask: radial-gradient(farthest-side,
    transparent calc(100% - 12px),
    #000 calc(100% - 11px)
  );
  mask: radial-gradient(farthest-side,
    transparent calc(100% - 12px),
    #000 calc(100% - 11px)
  );

  opacity: .9;
}

/* =========================
   FLECHAS: ahora sí “arman” el círculo
========================= */
.cereales-orbit__arrows{
  position:absolute;
  inset:0;
  transform: rotate(var(--rot));
  transform-origin: 50% 50%;
  z-index: 2;
  pointer-events:none;
}

/* Flecha individual (más “presente”) */
.cereales-arrow{
  --ar: calc(var(--r) - 36px);

  position:absolute;
  top:50%;
  left:50%;

  /* ubicamos cada flecha a mitad de tramo */
  transform:
    rotate(calc(-90deg + ((var(--i) + 0.5) * var(--step))))
    translate(var(--ar))
    rotate(90deg);

  transform-origin: 0 0;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  display:grid;
  place-items:center;

  /* “chip” que se funde con el anillo */
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.92), rgba(233,237,243,.92));
  border: 1px solid rgba(14,59,111,.18);

  box-shadow:
    0 14px 26px rgba(11,46,85,.12),
    0 0 0 6px rgba(0,247,255,.08);

  color: rgba(14,59,111,.55);
  opacity: .95;
}

/* Ícono flecha */
.cereales-arrow i{
  font-size: 0.95rem;
}

/* Pequeño “trail” detrás de cada flecha (da sensación de movimiento/circuito) */
.cereales-arrow::before{
  content:"";
  position:absolute;
  right: 100%;
  top: 50%;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,247,255,.00), rgba(27,107,178,.22), rgba(14,59,111,.22));
  transform: translateY(-50%);
  border-radius: 999px;
  opacity: .9;
}

/* =========================
   NODOS (icono + título)
========================= */
.cereales-orbit__nodes{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  inset:0;
  transform: rotate(var(--rot));
  transform-origin: 50% 50%;
  z-index: 4;
}

/* Posicionamiento en círculo */
.cereales-orbit__nodes > li{
  position:absolute;
  top:50%;
  left:50%;
  transform:
    rotate(calc(-90deg + (var(--i) * var(--step))))
    translate(var(--r));
  transform-origin: 0 0;
}

/* Botón del nodo (contra-rotación para quedar derecho) */
.cereales-node{
  --iconSize: clamp(48px, 4.4vw, 60px);

  appearance:none;
  border:0;
  background: transparent;
  cursor:pointer;

  display:grid;
  gap:.55rem;
  place-items:center;
  padding:0;

  transform: rotate(calc(90deg - (var(--i) * var(--step)) - var(--rot)));
  transform-origin:center;

  transition: transform .2s ease, filter .2s ease;
}

.cereales-node__icon{
  width: var(--iconSize);
  height: var(--iconSize);
  border-radius: 999px;

  display:grid;
  place-items:center;

  background: linear-gradient(180deg, rgba(14,59,111,.98), rgba(11,46,85,1));
  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 18px 30px rgba(11,46,85,.20),
    0 0 0 10px rgba(0,247,255,.08);

  color:#fff;
}

.cereales-node__icon i{ font-size: 1.05rem; }

.cereales-node__label{
  font-family: var(--font-cuerpo);
  font-weight: 800;
  font-size: .95rem;
  color: rgba(47,59,74,.90);
  text-align:center;
  line-height: 1.15;
  max-width: 16ch;
}

/* Activo: “vivo” */
.cereales-node.is-active .cereales-node__icon{
  box-shadow:
    0 22px 36px rgba(11,46,85,.22),
    0 0 0 12px rgba(0,247,255,.12),
    0 0 26px rgba(0,247,255,.20);
}

.cereales-node.is-active{
  filter: saturate(1.08);
}

/* Hover: un poquito de lift */
.cereales-node:hover{
  transform: rotate(calc(90deg - (var(--i) * var(--step)) - var(--rot))) translateY(-2px);
}

/* =========================
   Animación sutil del anillo (sin pelear con tu JS)
========================= */
@keyframes cerealesGlow{
  0%,100%{ filter: saturate(1) contrast(1); }
  50%{ filter: saturate(1.08) contrast(1.02); }
}

.cereales-orbit--ring.is-autospin .cereales-orbit__ring{
  animation: cerealesGlow 5s ease-in-out infinite;
}

/* =========================
   Mobile: mismo layout, más compacto
========================= */
@media (max-width: 640px){
  .cereales-orbit--ring{
    --r: clamp(140px, 30vw, 185px);
    --ring-thick: 16px;
    width: min(540px, 100%);
  }
  .cereales-node__label{ font-size: .88rem; }
  .cereales-arrow{
    width: 30px; height: 30px;
  }
  .cereales-arrow::before{ width: 28px; }
}

/* =========================
   Ajustes: misma sombra en TODOS + tamaño menor
========================= */

/* 1) Achicar el conjunto */
.cereales-orbit--ring{
  width: min(560px, 100%);                 /* antes 640px */
  --r: clamp(155px, 18vw, 215px);          /* antes 175..255 */
  --ring-inset: 13.5%;                     /* anillo un poco más adentro */
}

/* Mobile un toque más chico también */
@media (max-width: 640px){
  .cereales-orbit--ring{
    width: min(480px, 100%);
    --r: clamp(125px, 28vw, 165px);
  }
}

/* 2) Misma sombra/glow para TODOS los iconos */
.cereales-node__icon{
  box-shadow:
    0 18px 30px rgba(11,46,85,.22),   /* sombra fuerte como la del primero */
    0 0 0 10px rgba(0,247,255,.10),   /* halo cyan */
    0 0 26px rgba(0,247,255,.18);     /* glow suave */
}

/* 3) El activo suma apenas (sin exagerar) */
.cereales-node.is-active .cereales-node__icon{
  box-shadow:
    0 20px 34px rgba(11,46,85,.24),
    0 0 0 12px rgba(0,247,255,.14),
    0 0 34px rgba(0,247,255,.22);
}

/* 4) Achicar un poco el tamaño del círculo del icono */
.cereales-node{
  --iconSize: clamp(44px, 4vw, 54px); /* antes 48..60 */
}

/* 5) Achicar levemente el texto */
.cereales-node__label{
  font-size: .9rem;
}
@media (max-width: 640px){
  .cereales-node__label{ font-size: .84rem; }
}

/* =========================
   INTEGRACIONES: 3 HEXÁGONOS UNIDOS (NUEVO)
========================= */

.cereales-logos--chain{
  margin-top: 1.4rem;
  display: grid;
  place-items: center; /* centrado */
}

/* Contenedor de los 3 hex */
.cereales-hexTrio{
  /* más grande */
  --hex: clamp(140px, 16vw, 190px);
  --inner: clamp(12px, 1.35vw, 16px);
  --gap: clamp(10px, 1.6vw, 16px);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: clamp(10px, 1.2vw, 14px);
}

/* Línea continua “con forma” (no barra): termina en ángulos hexagonales */
.cereales-hexTrio::before{
  content:"";
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--hex) * 0.56);
  right: calc(var(--hex) * 0.56);

  height: clamp(18px, 2.2vw, 26px);

  /* degradé llamativo */
  background: linear-gradient(90deg,
    #00f7ff 0%,
    #1b6bb2 45%,
    #3b36b3 100%
  );

  /* extremos “hex” para que parezca continuidad (no conector rectangular) */
  clip-path: polygon(
    0% 50%,
    8% 0%,
    92% 0%,
    100% 50%,
    92% 100%,
    8% 100%
  );

  box-shadow:
    0 16px 34px rgba(11,46,85,.20),
    0 0 0 10px rgba(0,247,255,.08),
    0 0 28px rgba(0,247,255,.18);

  opacity: .95;
  z-index: 0;
}

/* Hex base */
.cereales-hexBadge{
  width: var(--hex);
  height: calc(var(--hex) * 0.92);
  display: grid;
  place-items: center;
  text-align: center;

  font-family: var(--font-titulos);
  font-weight: 900;
  letter-spacing: .02em;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  color: rgba(7, 26, 49, .92);

  position: relative;
  z-index: 1;

  /* forma hex */
  clip-path: polygon(
    25% 6%, 75% 6%,
    98% 50%,
    75% 94%, 25% 94%,
    2% 50%
  );

  /* sombra pro */
  box-shadow:
    0 18px 36px rgba(11,46,85,.16);
}

/* Anillo exterior con degradé (llamativo) */
.cereales-hexBadge::before{
  content:"";
  position:absolute;
  inset: 0;
  clip-path: inherit;

  background: conic-gradient(
    from 210deg,
    #00f7ff 0%,
    #1b6bb2 30%,
    #3b36b3 62%,
    #00f7ff 100%
  );

  filter: saturate(1.08);
  z-index: -2;
}

/* Interior blanco (para que se lea el texto) */
.cereales-hexBadge::after{
  content:"";
  position:absolute;
  inset: var(--inner);
  clip-path: inherit;

  background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
  border: 1px solid rgba(14,59,111,.10);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85);

  z-index: -1;
}

/* Hover suave */
.cereales-hexBadge:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 22px 44px rgba(11,46,85,.18);
}

/* Responsive: mismo diseño, más chico */
@media (max-width: 560px){
  .cereales-hexTrio{
    --hex: 130px;
    --inner: 12px;
    --gap: 10px;
  }
  .cereales-hexTrio::before{
    height: 18px;
    left: calc(var(--hex) * 0.58);
    right: calc(var(--hex) * 0.58);
  }
  .cereales-hexBadge{
    font-size: .75rem;
  }
}

/* FIX: centrar el trío de hexágonos (pisando el grid viejo de .cereales-logos) */
#integraciones .cereales-logos--chain{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  /* mata cualquier grilla previa */
  grid-template-columns: none !important;
  gap: 0 !important;

  width: 100%;
}

/* El trío toma el ancho justo y queda centrado */
#integraciones .cereales-hexTrio{
  width: fit-content;
  max-width: 100%;
  margin: 0 auto !important;
  justify-content: center;
}


/* =========================
   Sistema en acción – Carousel
========================= */

.cereales-demo{
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.cereales-carousel{
  position: relative;
  margin-top: 1.25rem;
  padding: 0.75rem 0;
}



.cereales-carousel__track{
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  transform: translateX(0%);
  transition: transform 320ms ease;
}

.cereales-carousel__slide{
  flex: 0 0 100%;
  position: relative;
}

.cereales-carousel__slide img{
  width: 100%;
  height: auto;
  display: block;
}

/* Botones */
.cereales-carousel__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(14,59,111,.18);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 26px rgba(11,46,85,.14);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}

.cereales-carousel__btn span{
  font-size: 26px;
  line-height: 1;
  color: rgba(11,46,85,.85);
}

.cereales-carousel__btn.prev{ left: -14px; }
.cereales-carousel__btn.next{ right: -14px; }

.cereales-carousel__btn:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* Dots */
.cereales-carousel__dots{
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .85rem;
}

.cereales-carousel__dots .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(14,59,111,.22);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease;
}

.cereales-carousel__dots .dot.is-active{
  background: rgba(0,247,255,.85);
  transform: scale(1.15);
}

/* Responsive */
@media (max-width: 640px){
  .cereales-carousel__btn{
    width: 40px;
    height: 40px;
  }
  .cereales-carousel__btn.prev{ left: 8px; }
  .cereales-carousel__btn.next{ right: 8px; }
}

/* Carrusel: que el track sea una fila y cada slide ocupe el 100% */
.cereales-carousel__viewport{
  overflow: hidden !important;
}

.cereales-carousel__track{
  display: flex !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  transition: transform 320ms ease;
  will-change: transform;
}

.cereales-carousel__slide{
  flex: 0 0 100% !important;  /* clave: cada slide = 100% del viewport */
}

.cereales-carousel__slide img{
  width: 100% !important;
  display: block !important;
  height: auto !important;
}

.cereales-carousel__viewport{
  max-height: min(520px, 70vh);
}

.cereales-carousel__slide img{
  width: 100%;
  height: min(520px, 70vh);
  object-fit: cover;              /* recorta */
  object-position: center;
}

/* Fondo celestito para Integraciones */
#integraciones{
  background: linear-gradient(180deg, #eef9ff 20%, #b5e1e1 80%);
}

/* Mantener el padding vertical (por si el fondo se ve “cortado”) */
#integraciones.cereales-section{
  padding: clamp(2.5rem, 5vw, 4.25rem) 0;
}

/* =========================
   FAQ: tarjeta flotante glass
========================= */

/* Fondo suave del bloque (opcional, para que el glass se note) */
#faq{
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

/* Tarjeta glass que envuelve TODO el FAQ */
#faq .cereales-container{
  position: relative;
}

#faq .cereales-container::before{
  content:"";
  position:absolute;
  inset: -22px; /* agranda el panel detrás (más aire) */
  border-radius: 22px;

  /* glass */
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid rgba(14,59,111,.12);
  box-shadow:
    0 26px 60px rgba(11,46,85,.14),
    inset 0 1px 0 rgba(255,255,255,.70);

  z-index: 0;
}

/* Asegura que el contenido quede por arriba del panel */
#faq .cereales-container > *{
  position: relative;
  z-index: 1;
}

/* Ajuste fino de los items FAQ para que combinen con glass */
#faq .cereales-faq details{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(14,59,111,.10);
  box-shadow: 0 10px 24px rgba(11,46,85,.08);
}

#faq .cereales-faq summary{
  padding: 1.05rem 1.15rem;
}

#faq .cereales-faq .answer{
  padding: 0 1.15rem 1.15rem;
  color: rgba(47,59,74,.82);
}

/* Responsive: menos “aire” del panel */
@media (max-width: 640px){
  #faq .cereales-container::before{
    inset: -14px;
    border-radius: 18px;
  }
}

/* =========================
   FAQ – GLASS real (fondo + vidrio + bordes)
   Pegalo al FINAL de tu CSS
========================= */

/* 1) Fondo: debe tener variación (si es plano, el glass no “aparece”) */
#faq{
  /* base clara + tint celeste + un poco de “profundidad” */
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(0,247,255,.10), transparent 60%),
    radial-gradient(900px 520px at 82% 30%, rgba(27,107,178,.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
}

/* 2) Panel glass que envuelve TODO el bloque */
#faq .cereales-container{
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 2rem); /* aire interno dentro del vidrio */
}

/* Vidrio (color de card) + blur (del fondo) + tint */
#faq .cereales-container::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;

  /* color del vidrio: no blanco puro, sino transparente con leve gradiente */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.38) 45%,
    rgba(255,255,255,.22) 100%
  );

  /* el “glass” real: blur + saturate */
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  /* bordes: externo suave + interno (highlight) */
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 30px 70px rgba(11,46,85,.14),
    0 10px 26px rgba(11,46,85,.08),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(14,59,111,.10);

  z-index: 0;
}

/* Reflejo (sheen) – clave para “cristal” */
#faq .cereales-container::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events:none;
  z-index: 0;

  background:
    radial-gradient(700px 240px at 22% 12%,
      rgba(255,255,255,.70),
      rgba(255,255,255,.18) 45%,
      transparent 72%
    );
  opacity: .75;
  mix-blend-mode: screen;
}

/* El contenido por arriba del vidrio */
#faq .cereales-container > *{
  position: relative;
  z-index: 1;
}

/* 3) Los items internos: glass “lite” (para legibilidad) */
#faq .cereales-faq{
  margin-top: 1.15rem;
  gap: .9rem;
}

#faq .cereales-faq details{
  border-radius: 16px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.78) 0%,
    rgba(255,255,255,.55) 70%,
    rgba(255,255,255,.42) 100%
  );

  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);

  border: 1px solid rgba(255,255,255,.60);
  box-shadow:
    0 14px 28px rgba(11,46,85,.10),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(14,59,111,.08);
}

/* paddings para que se vea premium */
#faq .cereales-faq summary{
  padding: 1.1rem 1.2rem;
}

#faq .cereales-faq .answer{
  padding: 0 1.2rem 1.15rem;
}

/* Responsive: menos radio y blur (mejor performance) */
@media (max-width: 640px){
  #faq .cereales-container{
    padding: 1rem;
  }
  #faq .cereales-container::before,
  #faq .cereales-container::after{
    border-radius: 18px;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
}

/* ===== Contacto pegado al footer ===== */
#contacto.cereales-contacto{
  padding-bottom: -30px !important;  /* evita aire abajo */
  margin-bottom: -39.5px !important;
}




/* Elimina la línea del borde inferior del video recortando unos px */


.hero-video video{
  display: block;
  width: 140%;
  transform: translate(-70px, 0px);
  height: auto;

  /* ✅ recorta la parte de abajo donde está la línea */
  clip-path: inset(0 0 10px 0);
}

/* Suavizar transición card (blanco) -> fondo video (gris) */
.cereales-hero{
  overflow-x: clip; /* evita scroll si la pluma se extiende */
  position: relative;
}

/* 1) “Pluma” (fade) desde el borde derecho de la card */
.cereales-hero__copy{
  position: relative;
  z-index: 2;
}

/* Degradé + blur para que no se vea como una banda */
.cereales-hero__copy::after{
  content:"";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: -110px;              /* cuánto invade el gris */
  width: 180px;               /* ancho del desvanecido */
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 100%
  );

  filter: blur(10px);         /* clave para que sea “suave” */
  opacity: .95;
}

/* 2) Halo muy sutil detrás de la zona texto (mejora mucho el blend) */
.cereales-hero::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background: radial-gradient(
    700px 420px at 35% 55%,
    rgba(255,255,255,.55),
    transparent 65%
  );
}

/* Respeta el orden de capas (video atrás) */
.cereales-hero__art{ position: relative; z-index: 0; }

/* Mobile: menos pluma */
@media (max-width: 640px){
  .cereales-hero__copy::after{
    right: -60px;
    width: 120px;
    filter: blur(8px);
  }
}

/* Pluma alineada EXACTA a la altura de la card */
.cereales-hero__copy{
  position: relative;
  z-index: 2;
  --card-radius: 18px; /* poné el mismo radius que tu card */
}

.cereales-hero__copy::after{
  content:"";
  position: absolute;

  /* ✅ misma altura que la card */
  top: 0;
  bottom: 0;

  right: -110px;        /* cuánto invade el gris */
  width: 180px;         /* ancho del desvanecido */
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 100%
  );

  filter: blur(10px);
  opacity: .95;

  /* ✅ que respete el redondeo de la card en el lado derecho */
  border-top-right-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}

.cereales-hero__copy{
  margin-left: 0px;
}
/* Hero card: más angosta + un poco a la izquierda */
.cereales-hero__copy{
  max-width: 660px;            /* antes seguro era ~640px; ajustá 520–600 */
  transform: translateX(-18px);
}

/* Mover contenido INTERNO de la card hacia la derecha */
.cereales-hero__copy{
  padding-left: 60px;  /* probá 14px / 18px / 26px */
}

/* 1) Que la sombra de la card no invada tanto hacia el video */
.cereales-hero__copy{
  /* empuja la sombra un poco hacia abajo/izquierda (menos “mancha” en el video) */
  box-shadow: -10px 18px 36px rgba(11,46,85,.10) !important;
}

/* 2) Pluma de transición más limpia (menos opaca + se funde con el gris del video) */
.cereales-hero__copy::after{
  right: -90px !important;
  width: 150px !important;

  opacity: .65 !important;         /* antes .95: demasiado */
  filter: blur(14px) !important;   /* blur más grande = transición más natural */

  background: linear-gradient(
    90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.35) 45%,
    rgba(227,226,233,0) 100%        /* #e3e2e9 es tu gris del video */
  ) !important;
}

/* ===== Beneficios interactivos ===== */
.cereales-cards [data-benefit]{
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}

.cereales-cards [data-benefit]::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 220px at 85% 10%,
    rgba(0,247,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events:none;
}

.cereales-cards [data-benefit]:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(11,46,85,.12);
  border-color: rgba(0,247,255,.25);
}
.cereales-cards [data-benefit]:hover::before{ opacity: 1; }

/* Colapsado: mostramos poco */
.cereales-cards [data-benefit] .card-body{
  max-height: 88px;            /* controla cuánto se ve “cerrado” */
  overflow: hidden;
  transition: max-height .28s ease;
}

/* texto: clamp para que no sea pared */
.cereales-cards [data-benefit] .card-body p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
 line-clamp: 2;       /* 2 líneas en reposo */
  overflow: hidden;
}

/* lista escondida al inicio */
.cereales-cards [data-benefit] .card-body ul{
  margin-top: .7rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}

/* Botón “Ver más” */
.cereales-cards .card-more{
  margin-top: .85rem;
  background: transparent;
  border: 0;
  color: rgba(14,59,111,.92);
  font-weight: 800;
  cursor: pointer;
  padding: .2rem 0;
}

/* Estado expandido */
.cereales-cards [data-benefit].is-open .card-body{
  max-height: 260px;           /* altura expandida */
}
.cereales-cards [data-benefit].is-open .card-body p{
  line-clamp: unset;
}
.cereales-cards [data-benefit].is-open .card-body ul{
  opacity: 1;
  transform: translateY(0);
}
.cereales-cards [data-benefit].is-open::before{ opacity: 1; }

/* Opcional: “active” (para auto-resaltado) */
.cereales-cards [data-benefit].is-active{
  outline: 3px solid rgba(0,247,255,.18);
  box-shadow: 0 22px 46px rgba(11,46,85,.14);
}

.cereales-cards .cereales-card .card-body{
  max-height: 86px;
  overflow: hidden;
  transition: max-height .28s ease;
}

.cereales-cards .cereales-card.is-open .card-body{
  max-height: 320px;
}

/* Beneficios: colapsado/expandido */
.cereales-card { position: relative; }

.cereales-card .card-body{
  max-height: 86px;
  overflow: hidden;
  transition: max-height .28s ease;
}

.cereales-card.is-open .card-body{
  max-height: 340px;
}

/* Por si algún ::before tapa clicks */
.cereales-card .card-more{
  position: relative;
  z-index: 2;
}

/* Beneficios: centrar título + subtítulo */
#beneficios .cereales-section__head{
  text-align: center;
  justify-items: center;
}

#beneficios .cereales-section__head p{
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch; /* para que no quede demasiado ancho */
}

/* =========================
   BENEFICIOS: cards compactas (icono grande centrado + clamp 2 líneas)
========================= */

#beneficios .cereales-cards .cereales-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: 1.35rem 1.25rem 1.1rem;
  border-radius: 18px;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* icono grande centrado */
#beneficios .cereales-card__icon{
  width: 74px;
  height: 74px;
  border-radius: 20px; /* rounded square, similar a tu referencia */
  display: grid;
  place-items: center;

  background: linear-gradient(180deg, rgba(14,59,111,.10), rgba(0,247,255,.10));
  border: 1px solid rgba(14,59,111,.14);
  box-shadow: 0 16px 30px rgba(11,46,85,.14);

  margin-bottom: .8rem;
}

/* si tu svg no tiene stroke definido global, lo hacemos consistente */
#beneficios .cereales-card__icon svg{
  width: 28px;
  height: 28px;
  stroke: rgba(11,46,85,.80);
}

/* título centrado, compacto */
#beneficios .cereales-cards .cereales-card h3{
  margin: 0 0 .45rem;
  font-size: 1.05rem;
}

/* cuerpo: en cerrado mostramos solo el texto (2 líneas) */
#beneficios .cereales-cards .cereales-card .card-body{
  width: 100%;
}

/* clamp 2 líneas del párrafo */
#beneficios .cereales-cards .cereales-card .card-body p{
  margin: 0;
  color: rgba(47,59,74,.78);
  line-height: 1.45;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* bullets ocultos por defecto */
#beneficios .cereales-cards .cereales-card .card-body ul{
  margin: .85rem 0 0;
  padding-left: 1.1rem;
  text-align: left;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .28s ease, opacity .22s ease, transform .22s ease;
}

/* botón “ver más” */
#beneficios .cereales-cards .cereales-card .card-more{
  margin-top: .9rem;
  background: transparent;
  border: 0;
  padding: .2rem .25rem;
  cursor: pointer;

  font-weight: 800;
  color: rgba(14,59,111,.92);
  text-decoration: none;
}

/* ====== Estado abierto ====== */
#beneficios .cereales-cards .cereales-card.is-open{
  align-items: flex-start;   /* se vuelve más “legible” */
  text-align: left;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(11,46,85,.12);
  border-color: rgba(0,247,255,.24);
}

/* icono sigue centrado aunque el texto pase a la izquierda */
#beneficios .cereales-cards .cereales-card.is-open .cereales-card__icon{
  align-self: center;
}

/* párrafo completo en abierto */
#beneficios .cereales-cards .cereales-card.is-open .card-body p{
 line-clamp: unset;
  overflow: visible;
}

/* bullets aparecen */
#beneficios .cereales-cards .cereales-card.is-open .card-body ul{
  max-height: 160px; /* ajustá si tenés más items */
  opacity: 1;
  transform: translateY(0);
}

#modulos .cereales-section__head{
  text-align: center;
  margin-bottom: 45px;
}

/* =========================
   MÓDULOS: más “vivo” pero ordenado
========================= */

/* Panel general un poco más “app” */
.cereales-panelCard{
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 55%);
  border: 1px solid rgba(20,74,143,.12);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(11,46,85,.10);
  overflow: hidden;
}

/* Header con barra animada (se reinicia con la clase .anim) */
.cereales-panelCard__top{
  position: relative;
  padding: 1.05rem 1.2rem;
  background: linear-gradient(180deg, rgba(14,59,111,.06), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(20,74,143,.10);
}
.cereales-panelCard__top::after{
  content:"";
  position:absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #00f7ff, #1b6bb2 55%, #3b36b3);
  opacity: .0;
  transform: scaleX(.15);
  transform-origin: left;
}

/* Se activa cuando el panel entra (o cuando JS agrega .anim) */
.cereales-panel.anim .cereales-panelCard__top::after,
.cereales-panel.is-active .cereales-panelCard__top::after{
  opacity: .85;
  animation: modBar .7s ease-out both;
}
@keyframes modBar{
  from{ transform: scaleX(.12); opacity: .0; }
  to  { transform: scaleX(1); opacity: .85; }
}

/* BODY: más aire y 2 columnas bien */
.cereales-panelCard__body{
  padding: 1.1rem 1.1rem 1.2rem;
  display: grid;
  gap: 1rem;
}

/* Subcards: ahora sí parecen “bloques” y no texto plano */
.cereales-subcard{
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(20,74,143,.10);
  border-radius: 14px;
  padding: 1rem 1rem .95rem;
  box-shadow: 0 10px 22px rgba(11,46,85,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

/* Accent bar a la izquierda (ordenado, no invasivo) */
.cereales-subcard::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: linear-gradient(180deg, rgba(0,247,255,.85), rgba(27,107,178,.55), rgba(59,54,179,.45));
  opacity: .85;
}

/* Glow suave en hover */
.cereales-subcard::after{
  content:"";
  position:absolute;
  inset: -20%;
  background: radial-gradient(420px 240px at 85% 15%, rgba(0,247,255,.12), transparent 60%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

.cereales-subcard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,247,255,.25);
  box-shadow: 0 16px 34px rgba(11,46,85,.10);
}
.cereales-subcard:hover::after{ opacity: 1; }

/* Títulos y texto más legibles */
.cereales-subcard h4{
  margin: 0 0 .35rem;
  font-family: var(--font-titulos);
  font-weight: 900;
}
.cereales-subcard p{
  margin: 0 0 .75rem;
  color: rgba(47,59,74,.80);
  line-height: 1.45;
}

/* Chips más “pill” + hover */
.cereales-chips{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.cereales-chip{
  font-size: .82rem;
  padding: .28rem .62rem;
  border-radius: 999px;
  background: rgba(14,59,111,.06);
  border: 1px solid rgba(14,59,111,.10);
  color: rgba(14,59,111,.92);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.cereales-chip:hover{
  background: rgba(0,247,255,.12);
  border-color: rgba(0,247,255,.22);
  transform: translateY(-1px);
}

/* ========= Animación de entrada (stagger) ========= */
.cereales-panel.is-active .cereales-subcard{
  animation: subIn .45s ease both;
}
.cereales-panel.is-active .cereales-subcard:nth-child(1){ animation-delay: .00s; }
.cereales-panel.is-active .cereales-subcard:nth-child(2){ animation-delay: .06s; }
.cereales-panel.is-active .cereales-subcard:nth-child(3){ animation-delay: .12s; }
.cereales-panel.is-active .cereales-subcard:nth-child(4){ animation-delay: .18s; }
.cereales-panel.is-active .cereales-subcard:nth-child(5){ animation-delay: .24s; }

@keyframes subIn{
  from{ opacity: 0; transform: translateY(10px) scale(.985); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .cereales-panelCard__top::after,
  .cereales-panel.is-active .cereales-subcard{
    animation: none !important;
  }
  .cereales-subcard, .cereales-chip{
    transition: none !important;
  }
}

/* Flujo: centrar título + subtítulo */
#flujo .cereales-section__head{
  text-align: center;
}

#flujo .cereales-section__head p{
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}

/* Integraciones: centrar título + subtítulo */
#integraciones .cereales-section__head{
  text-align: center;
}

#integraciones .cereales-section__head p{
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}

/* Integraciones: fondo difuminado celeste */
#integraciones{
  background: linear-gradient(180deg, #CEF4F7 0%, #E8F8FA 100%) !important;
}
#demo .cereales-section__head{
  text-align: center;
}
#demo .cereales-section__head p{
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;
}


/* =========================
   HERO CARD – GLASS / CRISTAL
========================= */

.cereales-hero__copy{
  position: relative;
  isolation: isolate;

  /* vidrio */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,.40) 45%,
    rgba(255,255,255,.22) 100%
  );
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border-radius: 22px;

  /* borde cristal (doble) */
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 26px 60px rgba(11,46,85,.14),
    0 10px 22px rgba(11,46,85,.08),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(14,59,111,.10);

  overflow: hidden; /* para que el reflejo no se salga */
}

/* Reflejo (sheen) – lo que hace que parezca cristal */
.cereales-hero__copy::before{
  content:"";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 0;


  opacity: .70;
  mix-blend-mode: screen;
}

/* Un “tint” suave celeste para integrarlo con tu estética */
.cereales-hero__copy::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;


  opacity: .9;
}

/* Asegurar que el contenido quede por arriba de los overlays */
.cereales-hero__copy > *{
  position: relative;
  z-index: 1;
}

/* Evita que los overlays del glass tapen el borde */
.cereales-hero__copy{
  border-radius: 22px; /* mismo radius del glass */
  outline: 1px solid rgba(255,255,255,.45);
  outline-offset: -1px; /* borde nítido por encima */
}

.cereales-hero__copy::before,
.cereales-hero__copy::after{
  border-radius: inherit;

  /* recorta el overlay hacia adentro para no “lavar” el borde */
  clip-path: inset(2px round 22px);
}

.cereales-hero__copy{
  box-shadow:
    0 26px 60px rgba(11,46,85,.14),
    0 10px 22px rgba(11,46,85,.08),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(14,59,111,.10),
    inset 1px 0 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(255,255,255,.22);
}

/* =========================
   CLIENTES – Cooperativas / Otros
========================= */
.cereales-clientes{
  background: radial-gradient(900px 420px at 25% 15%, rgba(0,247,255,.08), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.cereales-clientes__head{ text-align:center; }
.cereales-clientes__head p{ margin:.6rem auto 0; max-width: 76ch; }

.cereales-clientes__switch{
  margin-top: 1.1rem;
  display:flex;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.cereales-clientes__switch .chip{
  border: 1px solid rgba(14,59,111,.14);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: .45rem .95rem;
  cursor:pointer;
  font-weight: 900;
  color: rgba(11,46,85,.88);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.cereales-clientes__switch .chip.is-active{
  background: linear-gradient(90deg, rgba(0,247,255,.20), rgba(27,107,178,.14));
  border-color: rgba(0,247,255,.34);
}

.cereales-clientes__title{
  margin: 1.15rem 0 .75rem;
  text-align: center;
  font-family: var(--font-titulos);
  font-weight: 900;
}

/* Logos */
.cereales-clientes__logos{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
}

.cliente-logo{
  border-radius: 16px;
  border: 1px solid rgba(20,74,143,.12);
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 28px rgba(11,46,85,.08);
  height: 84px;

  display:grid;
  place-items:center;
  padding: .65rem .75rem;
  overflow:hidden;
}

.cliente-logo img{
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
  display:block;
}

.cliente-logo.is-text{
  place-items:start;
  padding:.75rem .85rem;
}
.cliente-logo .tag{
  font-size:.78rem;
  font-weight:900;
  color: rgba(14,59,111,.92);
  background: rgba(0,247,255,.12);
  border: 1px solid rgba(0,247,255,.20);
  padding:.2rem .55rem;
  border-radius:999px;
}
.cliente-logo .txt{
  margin-top:.5rem;
  font-weight: 900;
  color: rgba(47,59,74,.88);
  line-height:1.15;
}

/* Casos */
.cereales-clientes__cases{
  margin-top: 1rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.case-card{
  border-radius: 18px;
  border: 1px solid rgba(20,74,143,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(11,46,85,.10);
  padding: 1rem 1.05rem;
}
.case-card h4{
  margin:0 0 .35rem;
  font-family: var(--font-titulos);
  font-weight: 900;
}
.case-card p{ margin:0 0 .7rem; color: rgba(47,59,74,.80); line-height: 1.45; }
.case-card ul{ margin:0; padding-left: 1.1rem; color: rgba(47,59,74,.82); }


/* Responsive */
@media (max-width: 980px){
  .cereales-clientes__logos{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .cereales-clientes__cases{ grid-template-columns: 1fr; }

}
@media (max-width: 520px){
  .cereales-clientes__logos{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* =========================
   CLIENTES (cooperativas): centrar + fondo sugerido
========================= */

/* Fondo sugerido para la sección */
#clientes.cereales-clientes{
  background: linear-gradient(180deg, #E8F8FA 0%, #D9F3F7 100%) !important;
}

/* Centrar SOLO las cooperativas (3 cards en el medio) */
#clientes [data-group="coop"] .cereales-clientes__logos{
  grid-template-columns: repeat(3, minmax(240px, 280px)) !important;
  justify-content: center !important;
  justify-items: center !important;
  margin-inline: auto;
  width: fit-content;              /* hace que el bloque “se achique” al contenido */
  max-width: 100%;
}

/* Asegurar que cada card sea consistente y centrada */
#clientes [data-group="coop"] .cliente-logo{
  width: 100%;
  max-width: 280px;
  display: grid;
  place-items: center;
}
#clientes [data-group="coop"] .cliente-logo img{
  margin: 0 auto;
  max-height: 46px;
}

/* Responsive cooperativas */
@media (max-width: 900px){
  #clientes [data-group="coop"] .cereales-clientes__logos{
    width: 100%;
    grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
  }
}
@media (max-width: 520px){
  #clientes [data-group="coop"] .cereales-clientes__logos{
    grid-template-columns: 1fr !important;
  }
}


/* =========================
   CLIENTES: “más vida” para las 3 cards de info (case-card)
========================= */

#clientes .cereales-clientes__cases{
  margin-top: 2.15rem;
}

/* Card más premium */
#clientes .case-card{
  position: relative;
  overflow: hidden;

  border-radius: 18px;
  border: 1px solid rgba(14,59,111,.12);

  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 18px 40px rgba(11,46,85,.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Barra de acento (da “vida” sin desorden) */
#clientes .case-card::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #00f7ff 0%, #1b6bb2 55%, #3b36b3 100%);
  opacity: .85;
}

/* Glow suave en la esquina */
#clientes .case-card::after{
  content:"";
  position:absolute;
  inset: -30%;
  background: radial-gradient(520px 240px at 85% 15%, rgba(0,247,255,.16), transparent 60%);
  opacity: .0;
  transition: opacity .18s ease;
  pointer-events:none;
}

/* Hover: lift + glow */
#clientes .case-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,247,255,.24);
  box-shadow: 0 22px 50px rgba(11,46,85,.13);
}
#clientes .case-card:hover::after{
  opacity: 1;
}

/* Tipografía más “escaneable” */
#clientes .case-card h4{
  margin: .2rem 0 .4rem;
  font-family: var(--font-titulos);
  font-weight: 900;
}

#clientes .case-card p{
  color: rgba(47,59,74,.82);
  line-height: 1.45;
}

#clientes .case-card ul{
  margin: .65rem 0 0;
  padding-left: 1.1rem;
  color: rgba(47,59,74,.82);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #clientes .case-card, #clientes .case-card::after{
    transition: none !important;
  }
}

/* Más aire entre “Cooperativas / Otros operadores” y el contenido de abajo */
#clientes .cereales-clientes__switch{
  gap: .8rem;           /* separación horizontal */
  row-gap: .8rem;       /* separación cuando hace wrap */
  margin-top: 1rem;
  margin-bottom: 1.35rem;  /* ✅ evita que quede pegado al bloque de logos */
  justify-content: center;
}

/* Un poquito más “padding” para que no se vean pegados visualmente */
#clientes .cereales-clientes__switch .chip{
  padding: .55rem 1.05rem;
}

/* Asegura separación extra antes del grid de logos */
#clientes .cereales-clientes__group{
  margin-top: .25rem;
}

#clientes .cereales-clientes__title{
  margin-top: .25rem;
  margin-bottom: .9rem;
}

/* Por si algún tag (Acopio/Aceitera/Molino) queda “alto” pegándose arriba */
#clientes .cereales-clientes__logos{
  margin-top: .35rem;
}

/* =========================
   CONTACTO / DEMO: centrar todo
========================= */

#contacto .cereales-section__head{
  text-align: center;
}

#contacto .cereales-section__head p{
  margin-left: auto;
  margin-right: auto;
  max-width: 78ch;
}

/* Centrar el form y limitar ancho */
#contacto .cereales-form{
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;      /* ajustá a gusto */
}

/* Inputs centrados (ocupan el ancho del form) */
#contacto .cereales-field input,
#contacto .cereales-field textarea{
  width: 100%;
}

/* Botones centrados */
#contacto .cereales-contacto__actions{
  display: flex;
  justify-content: center;
  gap: .9rem;
}

/* Nota (si tenés) centrada */
#contacto .cereales-note{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 70ch;
}

.zoom-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.zoom-modal.is-open{ display: block; }

.zoom-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.zoom-stage{
  position: absolute;
  inset: 24px;
  border-radius: 16px;
  background: rgba(10,18,30,.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.zoom-img{
  max-width: 100%;
  max-height: 100%;
  transform: translate(0px, 0px) scale(1);
  transform-origin: center;
  cursor: grab;
  user-select: none;
}

.zoom-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.85);
  cursor: pointer;
  z-index: 2;
}
.zoom-close:active{ transform: scale(.98); }

/* =========================
   COOPERATIVAS: 8 en 1 sola fila (SIN WRAP)
========================= */

#clientes [data-group="coop"] .cereales-clientes__logos{
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important; /* clave */
  gap: 8px !important;
  width: 100% !important;

  /* si tenías una “banda” con padding grande, esto lo compacta */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: 40px !important;
}

/* Casillas más pequeñas y sin restricciones de ancho */
#clientes [data-group="coop"] .cliente-logo{
  min-width: 0 !important;          /* clave */
  width: 100% !important;
  max-width: none !important;

  height: 58px !important;
  padding: 8px !important;
  border-radius: 12px !important;
}

/* Logos más chicos */
#clientes [data-group="coop"] .cliente-logo img{
  max-height: 28px !important;
  max-width: 100% !important;
  object-fit: contain;
}

/* Responsive: si no entra, baja a 4 y 2 */
@media (max-width: 1100px){
  #clientes [data-group="coop"] .cereales-clientes__logos{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  #clientes [data-group="coop"] .cereales-clientes__logos{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#clientes .cereales-clientes__note{
  margin: 1.1rem auto 0;
  max-width: 88ch;
  text-align: center;
margin-top: 1.1rem;
  font-family: var(--font-cuerpo);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(47,59,74,.82);
}

/* ==========================================================================
   RESPONSIVE: PANEL DE MÓDULOS (Mobile) - SOLUCIÓN BASADA EN EL CSS ORIGINAL
   ========================================================================== */
@media (max-width: 992px) {
  
  /* 1. Modificamos la grilla principal de la sección */
  .cereales-modulos__grid {
    grid-template-columns: 1fr; /* Pasa de dos columnas a una sola */
    gap: 2rem;
  }

  /* 2. EL CAMBIO CLAVE: Transformamos el grid de la App en una sola columna */
  .cereales-app {
    grid-template-columns: 1fr; /* Matamos el "220px 1fr" de escritorio */
    border-radius: 12px;
  }

  /* 3. Ajustamos la barra de navegación para que sea un scroll horizontal */
  .cereales-app__nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Habilita el scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    padding: 0rem;
    gap: 0.5rem; /* Espacio entre botones */
    scrollbar-width: none; /* Oculta la barra de scroll visual en Firefox */
  }

  /* Oculta la barra de scroll visual en Chrome/Safari/Edge */
  .cereales-app__nav::-webkit-scrollbar {
    display: none;
  }

  /* Ocultamos el título "Módulos" para ganar espacio */
  .cereales-app__nav h4 {
    display: none;
  }

  /* Ajustamos los botones (las etiquetas "a" o "button" según uses) */
  .cereales-app__nav a,
  .cereales-tab {
    flex: 0 0 auto; /* Evita que los botones se achiquen */
    white-space: nowrap; /* Evita que el texto del botón salte de línea */
    margin: 0;
    padding: 0.6rem 1rem;
  }

  /* 4. Ajustes menores de espaciado en el panel de contenido */
  .cereales-app__panel {
    padding: 1.25rem 1rem; /* Un poco más de aire en móvil */
  }

  /* Evitamos que las etiquetas se amontonen mucho en pantallas chicas */
  .cereales-tags {
    gap: 0.5rem;
  }
}

@media (max-width: 992px) {
  /* 1. Ordenamos el contenedor a la fuerza */
  .cereales-app {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  /* 2. BLINDAJE PARA LA BARRA AZUL (Nav) */
  .cereales-app__nav {
    position: relative !important;
    z-index: 9999 !important; /* La ponemos por encima de TODO */
    display: flex !important;
    /*flex-wrap: nowrap !important;*/
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    
    width: 100% !important;
    background-color: #1a2b4c !important; /* Aseguramos el color sólido */
    padding: 20px 10px !important;
    
    /* Reseteamos cualquier movimiento fantasma */
    margin: 0 !important; 
    transform: none !important;
    top: 0 !important;
  }

  @media (max-width: 992px) {
  /* ... tus reglas anteriores de .cereales-app ... */

  /* 2. BLINDAJE PARA LA BARRA AZUL (Nav) */
  .cereales-app__nav {
    position: relative !important;
    z-index: 0   !important;
    display: flex !important;
    align-items: center !important; /* Centra el h4 y los botones verticalmente */
    
    overflow-x: auto !important; /* Permite scroll a los lados */
    overflow-y: hidden !important; /* BLOQUEA EL SCROLL ARRIBA/ABAJO */
    -webkit-overflow-scrolling: touch !important;
    
    width: 100% !important;
    background-color: #1a2b4c !important;
    padding: 35px 10px !important; /* Reduje apenas el alto para que quede más compacto */
    
    margin: 0 !important; 
    transform: none !important;
    top: 0 !important;
  }

  /* 3. Evitamos que el título <h4> se rompa o empuje hacia abajo */
  .cereales-app__nav h4 {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-right: 15px !important;
    margin-bottom: 0 !important; /* Anula cualquier margen inferior que traiga el h4 */
    color: white !important; /* Aseguramos que se vea sobre el fondo azul */
  }

  /* 4. Mantenemos tus botones intactos */
  .cereales-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-right: 10px !important;
    margin-bottom: -5px !important;
  }
}

  .cereales-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
  }

  /* 3. EMPUJAMOS EL PANEL BLANCO HACIA ABAJO */
  .cereales-app__panel,
  .cereales-panelCard {
    position: relative !important;
    z-index: 1 !important; /* La mandamos al fondo */
    
    /* ACÁ ESTÁ LA CLAVE: En vez de 0, le damos 25px para separarla a la fuerza de la barra azul */
    margin-top: 25px !important; 
    
    /* Matamos cualquier posicionamiento absoluto o movimiento raro de PC */
    transform: none !important; 
    top: auto !important;
    bottom: auto !important;
    padding: 15px !important;
    height: auto !important;
  }
}

@media (max-width: 992px) {
  /* 1. Destruimos el CSS Grid y usamos Flexbox para un centrado absoluto */
  .cereales-hero__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Esta es la regla mágica que centra la tarjeta */
    justify-content: center !important;
    width: 109% !important;
  }

  /* 2. Le damos forma a la tarjeta para que no se estire y se mantenga en el medio */
  .cereales-hero__copy {
    display: block !important;
    width: 100% !important;
    max-width: 350px !important; /* Ajustá esto según qué tan ancha quieras la caja blanca */
    margin: 0 auto !important; /* Doble seguro de centrado */
    
    /* Mantenemos el texto y los botones alineados a la izquierda adentro de la caja */
    text-align: left !important; 
  }
}



/* =========================
   HERO: título más chico en mobile
========================= */
@media (max-width: 940px){
  .cereales-hero__copy h1,
  .cereales-hero__copy .cereales-hero__title{
    font-size: clamp(1.65rem, 7vw, 2.15rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em;
  }

  /* opcional: achica un toque el subtítulo */
  .cereales-hero__copy p{
    font-size: .85rem;
  }

    .cereales-hero__copy li{
    font-size: .85rem;
    line-height: 1.3;
    margin: .23rem 0;
    color: rgba(47,59,74,.85);
    text-wrap: balance;        /* reparte mejor el salto de línea (si el navegador lo soporta) */
  }

  /* Ajuste del espacio interno de la tarjeta */
.cereales-hero__copy {
  padding-left: 35px; /* Reducimos el margen interno izquierdo al mínimo elegante */
  padding-right: 25px; /* Mantenemos simetría a la derecha */
}

/* Ajuste específico para la lista, para que no sume margen extra del navegador */
.cereales-highlights {
  padding-left: 15px; /* Espacio justo para que se vean las viñetas (los puntitos) */
  margin-left: 0;
}

}


/*CSS DE INGRESA*/

/* Overlay de Carga */
#loading-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(255, 255, 255, 0.8);
  display: none; /* Oculto por defecto */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* El Spinner (Círculo giratorio) */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #2c3e50; /* Color de Soltec */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 15px;
  font-family: sans-serif;
  font-weight: bold;
  color: #2c3e50;
}


/* 1. Fondo de la página para que el cristal resalte */
.login-page {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(circle at top left, var(--azul-oscuro), var(--azul-medio), var(--violeta));
    background-attachment: fixed;
}

/* 2. La Card de Cristal (Glassmorphism) */
.login-card {
    background: rgba(255, 255, 255, 0.1); /* Transparencia blanca */
    backdrop-filter: blur(12px);          /* Efecto de desenfoque */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* 3. Títulos y Textos */
.login-card h1 {
    font-family: var(--font-titulos);
    font-weight: 800;
    color: var(--blanco);
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.login-card p {
    color: rgba(255, 255, 255, 0.8);
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 30px;
}

/* 4. Estilo de los Inputs */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    color: var(--blanco);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.login-card input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: var(--blanco);
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.login-card input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--blanco);
}

.login-card input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* 5. Botón de Ingreso (Zalando Sans) */
.btn-login {
    width: 100%;
    padding: 15px;
    background: var(--blanco);
    color: var(--azul-oscuro);
    border: none;
    border-radius: 10px;
    font-family: var(--font-botones);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-login:hover {
    background: var(--gris);
    transform: translateY(-2px);
}

/* 6. Mensajes de error/info */
#login-msg {
    margin-top: 15px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    padding: 10px;
    border-radius: 8px;
    display: none;
}

.msg-error { background: rgba(255, 0, 0, 0.2); color: #ffcccc; border: 1px solid rgba(255, 0, 0, 0.3); }

/* 7. RESPONSIVE PARA CELULARES */
@media (max-width: 480px) {
    .login-card {
        padding: 25px;
        margin: 10px;
    }
    
    .login-card h1 {
        font-size: 1.5rem;
    }
}


/* ========================================================= 
   PORTAL B2B - GLASSMORPHISM (AISLADO)
   Ninguna de estas reglas afectará al resto de index.css
========================================================= */

/* 1. Contenedor principal del portal */
#view-portal {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--violeta) 100%);
    font-family: var(--font-cuerpo);
}

/* 2. La "Card" de Cristal (El div que envuelve todo adentro de la section) */
#view-portal > div {
    position: relative;
    width: 100%;
    max-width: var(--max);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    color: var(--blanco);
}

/* 3. Tipografías exclusivas del portal */
#view-portal h2, 
#view-portal h3, 
#view-portal strong {
    font-family: var(--font-titulos);
    font-weight: 800;
    color: var(--blanco);
    margin-bottom: 10px;
}

#portal-title {
    font-size: 2.2rem;
}

#view-portal hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 30px 0;
}

/* 4. Botones aislados (Solo los que están dentro del portal) */
#view-portal button {
    font-family: var(--font-botones) !important;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 800;
}

/* Botón de logout posicionado arriba a la derecha de la card */
#btn-logout {
    position: absolute;
    top: 40px;
    right: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--blanco);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 38px;
}

#btn-logout:hover { background: rgba(255, 255, 255, 0.2); }

#btn-refresh {
    background: var(--blanco);
    color: var(--azul-oscuro);
    margin-bottom: 15px;
}

#btn-refresh:hover { background: var(--gris); }

/* 5. Sector de Deuda (Caja de cristal oscurecida) */
#view-portal section[aria-labelledby="deuda-title"] {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#view-portal section[aria-labelledby="deuda-title"] label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

#deuda-total {
    background: transparent;
    border: none;
    color: var(--blanco);
    font-family: var(--font-titulos);
    font-size: 3.5rem;
    font-weight: 800;
    text-align: center;
    width: 100%;
    outline: none;
    margin: 10px 0;
}
#deuda-help {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* 6. Tabla de Facturas aislada */
#facturas-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#facturas-desc {
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 15px;
    font-size: 0.9rem;
}

#facturas-table th {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    text-align: left;
    font-family: var(--font-titulos);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

#facturas-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#facturas-table tr:hover td {
    background: rgba(255, 255, 255, 0.08);
}

/* Estilo para los botones de Ver/Descargar que inyecta JS */
#facturas-tbody button {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--blanco);
    font-size: 0.8rem;
    margin-right: 5px;
}

#facturas-tbody button:hover {
    background: var(--blanco);
    color: var(--azul-oscuro);
}

/* 7. RESPONSIVE B2B */
@media (max-width: 768px) {
    #view-portal > div { padding: 25px 15px; }
    
    #btn-logout {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px;
        width: 100%;
    }

    #deuda-total { font-size: 2.5rem; }

    #facturas-table th, #facturas-table td {
        padding: 10px 5px;
        font-size: 0.8rem;
    }
}

/* ========================================================= 
   REGLA MAESTRA DE VISIBILIDAD (SPA)
========================================================= */
[hidden] {
    display: none !important;
}


/* ========================================================= 
   LOGIN B2B - GLASSMORPHISM (CORREGIDO)
========================================================= */

/* 1. La Card de Cristal (Ahora en azul oscuro para contrastar) */
#view-login {
    width: 100%;
    max-width: 420px;
    
    /* SOLUCIÓN AL HEADER: Le damos 120px de margen superior para despegarlo */
    margin: 120px auto 60px auto; 
    
    /* SOLUCIÓN AL COLOR: Cristal Azul oscuro (var--azul-oscuro con transparencia) */
    background: rgba(11, 46, 85, 0.85); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* Borde de luz sutil */
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    color: var(--blanco);
}

/* 2. Título principal */
#view-login h2 {
    font-family: var(--font-titulos);
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--blanco);
    text-align: center;
    margin-bottom: 30px;
    margin-top: 0;
}

/* 3. Contenedores de cada input */
#login-form > div {
    margin-bottom: 20px;
}

/* 4. Etiquetas (Labels) */
#view-login label {
    display: block;
    font-family: var(--font-cuerpo);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    font-weight: 500;
}

/* 5. Inputs (Cajas de texto estilo cristal claro sobre fondo oscuro) */
#view-login input {
    width: 100%;
    box-sizing: border-box; 
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: var(--blanco);
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

#view-login input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--blanco);
}

#view-login input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* 6. Botón de Ingreso */
#btn-login {
    width: 100%;
    padding: 16px;
    margin-top: 10px;
    background: var(--blanco);
    color: var(--azul-oscuro);
    border: none;
    border-radius: 12px;
    font-family: var(--font-botones) !important;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#btn-login:hover {
    background: var(--gris);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* 7. Mensaje de error */
#login-msg {
    margin-top: 15px;
    text-align: center;
    font-family: var(--font-cuerpo);
    font-size: 0.9rem;
    min-height: 20px;
    color: #ffb3b3; 
}

/* 8. RESPONSIVE (Celulares) */
@media (max-width: 768px) {
    #view-login {
        margin-top: 100px;
        width: 90%;
        padding: 30px 20px;
    }
}

/* 1. Contenedor principal del portal (Ancho Completo) */
#view-portal {
    /* --- TÉCNICA BREAKOUT: Fuerza el 100% del ancho --- */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    /* -------------------------------------------------- */

    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--violeta) 100%);
    font-family: var(--font-cuerpo);
    margin-bottom: -40px;
}


/* 7. RESPONSIVE B2B */
@media (max-width: 768px) {
    #view-portal > div { 
        padding: 25px 15px; 
    }
    
    #btn-logout {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px;
        width: 100%;
    }

    /* 1. Arreglo del Total Adeudado */
    #deuda-total { 
        font-size: 1.6rem; /* Achicamos la letra para que entren cifras millonarias sin cortarse */
        padding: 0;
    }

    /* 2. Arreglo de la Tabla (Activa el scroll horizontal limpio) */
    #facturas-table {
        min-width: 550px; /* Obliga a la tabla a mantener su forma original */
    }

    #facturas-table th, 
    #facturas-table td {
        padding: 12px 10px; /* Un poco más de aire para el dedo */
        font-size: 0.85rem;
        white-space: nowrap; /* Evita que los textos y botones salten de renglón y se deformen */
    }
    
    /* Separación extra si los botones llegan a quedar muy juntos */
    #facturas-tbody button {
        margin-right: 8px;
    }
}

/* 1. EL VIDEO (Bien al fondo) */
.bg-video {
  position: absolute; /* Clave para que se despegue del flujo normal */
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover; 
  z-index: 0; /* Nivel base */
}

/* 2. LA CAPA OSCURA (Al medio) */
.bg-overlay {
  position: absolute; /* Clave */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 8, 34, 0.65); /* Azul Soltec semitransparente para que se lea el texto */
  z-index: 1; /* Un piso por encima del video */
}

/* 3. TU FORMULARIO (Arriba de todo) */
.contacto-card {
  position: relative; /* ¡ESTO ES LO QUE TE FALTABA! Activa el z-index */
  z-index: 10; /* Diez pisos por encima del video, imposible que quede abajo */
  
  /* Todo tu diseño de márgenes, fondos, etc., sigue acá abajo... */
}

  .hero-img {
  width: 100vw;               /* Ocupa el 100% del ancho de la ventana del navegador */
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;         /* Tira la imagen hacia la izquierda rompiendo el margen */
  margin-right: -50vw;        /* Tira la imagen hacia la derecha */
  object-fit: cover;
  display: block;
  border-radius: 0;           /* Le sacamos los bordes redondos para que quede recto contra el margen */
}

/* Contenedor que pone los botones uno al lado del otro */
.acciones-portal {
  display: flex;
  gap: 15px; /* La separación entre Academia y Cerrar Sesión */
  align-items: center;
  justify-content: flex-end; /* Los tira hacia la derecha de la pantalla */
  margin-bottom: 20px;
}

/* El estilo clonado de tu foto para AMBOS botones */
.btn-portal-estilo {
  /* Usamos inline-flex para que el JS lo pueda prender/apagar sin romper el diseño */
  align-items: center;
  justify-content: center;
  
  background-color: rgba(255, 255, 255, 0.15); /* Ese tono translúcido elegante */
  color: #ffffff;
  border: none;
  border-radius: 6px; /* Bordes levemente redondeados como en la foto */
  padding: 7px 35px;
  margin-top: -70px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800; /* Letra bien gruesa */
  text-transform: uppercase; /* Fuerza las mayúsculas */
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: -16px;
  
}

/* Efecto al pasar el mouse */
.btn-portal-estilo:hover {
  background-color: rgba(255, 255, 255, 0.25); 
}

/* ==========================================
   DISEÑO GENERAL DE LA ACADEMIA
========================================== */
.instructivos-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: 'DM Sans', sans-serif;
}

.instructivos-header {
  text-align: center;
  margin-bottom: 40px;
}

.instructivos-header h1 {
  color: #ffffff  ;
  font-size: 2.5rem;
  margin-bottom: 10px;
}

/* Grilla de 2 columnas (Video izq, Árbol der) */
.instructivos-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: start;
}

/* ==========================================
   COLUMNA IZQUIERDA: EL REPRODUCTOR
========================================== */
.video-section {
  background: #0b2e55;
  padding: 25px;
  border-radius: 16px;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(11, 46, 85, 0.1);
}

.video-section h2 {
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 15px;
  color: #1ec5ff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 10px;
}

/* Mantiene la proporción 16:9 perfecta para YouTube */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; 
  height: 0;
  background: #030d49; /* Fondo súper oscuro mientras no hay video */
  border-radius: 8px;
  overflow: hidden;
}

.placeholder-box {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.95rem;
  text-align: center;
  padding: 20px;
}

/* ==========================================
   COLUMNA DERECHA: EL ÁRBOL DE CARPETAS
========================================== */
.arbol-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  max-height: 600px;
  overflow-y: auto; /* Scroll interno si hay muchos videos */
}

.arbol-section h3 {
  color: #0b2e55;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1ec5ff;
}

/* Ocultar la flecha fea por defecto de los details */
details > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 6px;
  font-weight: 700;
  color: #0b2e55;
  transition: background 0.2s ease;
  user-select: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

details > summary:hover {
  background: #f1f5f9;
}

/* LAS LÍNEAS CONECTORAS (La magia del árbol) */
.contenido-carpeta {
  margin-left: 20px; /* Sangría general */
  padding-left: 15px; /* Espacio antes del texto */
  border-left: 2px solid #cbd5e1; /* La línea vertical gris clara */
  margin-top: 5px;
  margin-bottom: 10px;
}

.titulo-modulo {
  font-size: 0.95rem;
  color: #334155;
  font-weight: 600;
}

/* Estilo de la lista de archivos */
.lista-archivos {
  list-style: none;
  margin: 5px 0 5px 20px; /* Sangría del nivel de archivos */
  padding: 0 0 0 15px;
  border-left: 2px solid #e2e8f0; /* Segunda línea vertical más finita */
}

.lista-archivos li {
  margin-bottom: 4px;
}

/* Los Botones de los Videos */
.btn-archivo {
  background: none;
  border: none;
  color: #475569;
  cursor: pointer;
  padding: 6px 10px;
  width: 100%;
  text-align: left;
  border-radius: 4px;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-archivo:hover {
  color: #1ec5ff;
  background: rgba(30, 197, 255, 0.05);
  font-weight: 700;
}

/* ==========================================
   RESPONSIVE (Celulares)
========================================== */
@media (max-width: 768px) {
  .instructivos-layout {
    grid-template-columns: 1fr; /* Pone el árbol abajo del video */
  }
}


/* ==========================================
   DISEÑO DEL HERO ABOUT US
========================================== */
/* ==========================================
   DISEÑO DEL HERO ABOUT US
========================================== */
.hero-about {
  /* TRUCO PARA OCUPAR TODO EL ANCHO DE LA PANTALLA */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* La imagen y su acomodo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  min-height: 480px; 
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* box-sizing evita que el padding rompa el ancho total */
  box-sizing: border-box; 
  padding: 0 20px;
}
.hero-content {
  max-width: 800px;
}

/* Título Gigante (ACHICADO UN POCO) */
.hero-content h1 {
  font-size: 3rem; /* Achicado de 3.5rem a 3rem */
  font-weight: 900; 
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -1px; 
}

/* Subtítulo */
.hero-content p {
  font-size: 1.15rem;
  color: #ffffff;
  line-height: 1.5;
  margin-bottom: 35px;
}

/* Botón Celeste */
.btn-hero-celeste {
  display: inline-block;
  background-color: #63c5f5; 
  color: #0b2e55; 
  font-weight: 800;
  font-size: 1.05rem;
  padding: 14px 35px;
  border-radius: 40px; 
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-hero-celeste:hover {
  background-color: #4eb6e8;
  transform: translateY(-2px); 
}

/* ==========================================
   RESPONSIVE (Celulares)
========================================== */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.2rem;
  }
  .hero-content p {
    font-size: 1rem;
    br { display: none; } 
  }
}

/* El contenedor maestro que pone las cosas lado a lado */
.historia-layout {
  display: flex;
  justify-content: space-between; /* Separa las columnas */
  align-items: flex-start;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* LA CLAVE: Obligamos a la línea de tiempo a ocupar solo un poco más de la mitad */
.historia-textos {
  width: 55%; 
}

/* La columna de las fotos ocupa el resto del espacio */
.historia-fotos {
  width: 40%;
  display: flex;
  flex-direction: column; /* Apila las fotos una arriba de la otra */
  gap: 30px; /* Separación entre foto y foto */
}

/* Estilo de las 3 fotos para que queden prolijas */
.historia-fotos img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  object-fit: cover;
}

/* Responsive: Para que en celular no quede apretado y pase a una columna sola */
@media (max-width: 900px) {
  .historia-layout {
    flex-direction: column;
  }
  .historia-textos, .historia-fotos {
    width: 100%;
  }
}

/* ── WRAPPER PRINCIPAL ─────────────────────────────────── */
.historia-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 40px;
}

/* ── COLUMNA IZQUIERDA: TIMELINE (55%) ─────────────────── */
.timeline-v2 {
  width: 55%;
  flex-shrink: 0;
  position: relative;
  padding-left: 36px;
}

/* Línea vertical continua */
.timeline-v2::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(to bottom, #1ec5ff, #7dd3fc);
  border-radius: 2px;
}

/* Cada hito */
.t-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

/* Punto cyan con halo */
.t-dot {
  position: absolute;
  left: -30px;
  top: 18px;
  width: 14px;
  height: 14px;
  background: #1ec5ff;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(30, 197, 255, 0.2),
              0 0 10px rgba(30, 197, 255, 0.35);
  z-index: 1;
}

/* Caja blanca del hito */
.t-content {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px 22px;
  width: 100%;
  box-shadow: 0 2px 12px rgba(11, 46, 85, 0.07);
  transition: box-shadow 0.2s ease;
}

.t-content:hover {
  box-shadow: 0 4px 20px rgba(30, 197, 255, 0.15);
}

/* Año */
.t-year {
  font-size: 0.78rem;
  font-weight: 600;
  color: #1ec5ff;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* Título del hito */
.t-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0b2e55;
  margin: 0 0 6px 0;
}

/* Descripción */
.t-content p {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* ── COLUMNA DERECHA: IMÁGENES (40%) ───────────────────── */
.historia-imagenes {
  width: 40%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: sticky;
  top: 80px; /* se queda fija mientras scrolleás la timeline */
}

.historia-imagenes img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 6px 24px rgba(11, 46, 85, 0.12);
  display: block;
}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 768px) {
  .historia-section {
    flex-direction: column;
    padding: 0 20px;
  }
  .timeline-v2,
  .historia-imagenes {
    width: 100%;
    position: static;
  }
  .historia-imagenes {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .historia-imagenes img {
    width: calc(50% - 15px);
    height: 150px;
  }
}


/* =========================================
   RESPONSIVE: ABOUT - HERO
   ========================================= */
@media (max-width: 768px) {
  
  /* Ajuste del contenedor principal (opcional, por si necesitas darle más respiro en móvil) */
  .hero-about { /* Reemplaza por tu clase del hero */
    padding: 50px 20px; 
  }

  /* 1. Título: Reducir tamaño y forzar dos líneas */
  .hero-about h1 { /* Reemplaza por la clase de tu título */
    font-size: 1.3rem; /* Tamaño más amigable para celular */
    line-height: 1.2;
    margin: 0 auto 15px auto; /* Centrado automático */
    line-clamp: 2;
  }

  /* 2. Subtítulo: Reducir tamaño */
  .hero-about p { /* Reemplaza por la clase de tu subtítulo */
    font-size: 0.80rem;
    line-height: 1.5;
    padding: 0 10px; /* Para que el texto no toque los bordes de la pantalla */
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

/* =========================================
   RESPONSIVE: ABOUT - TIMELINE E IMÁGENES (A LO LARGO)
   ========================================= */
@media (max-width: 768px) {
  
  /* 1. Pasamos a una sola columna vertical */
  .historia-section {
    display: flex;
    flex-direction: column;
    gap: 0px; 
    padding: 30px 15px; /* Damos respiro a los costados de la pantalla */
  }

 
  /* Acomodamos el puntito cyan sobre la nueva línea */
  .t-dot {
    left: -26px; /* Lo movemos para que quede centrado en la línea */
    width: 12px; /* Apenas más chico */
    height: 12px;
  }

  /* Reducimos la separación vertical entre hitos */
  .t-item {
    gap: 12px; 
    margin-bottom: 15px; 
  }

  /* Hacemos las cajas más compactas */
  .t-content {
    padding: 12px 15px; 
  }


  /* Regla base para todas las fotos en el celular */
  .historia-imagenes img {
display: none;
  }


  /* El círculo cyan */
  .t-dot {
    left: -24px; /* Matemática exacta para que su centro cruce por los 10px de la línea */
    width: 14px; /* Volvemos a tu tamaño original para que se vea bien el halo */
    height: 14px;
  }
  

  /* 1. EL CONTENEDOR ANCLA (El secreto para que no se vaya al hero) */
  .timeline-v2 {
    position: relative; /* ¡ESTO ES VITAL! Atrapa a la línea aquí adentro */
    width: 100%;
    padding-left: 28px; 
  }

  /* 2. LA LÍNEA AZUL */
  .timeline-v2::before {
    content: '';
    position: absolute;
    top: 0;      /* Ahora es 0 respecto a la timeline, NO al Hero */
    bottom: 0;   /* Que llegue hasta el final de la timeline */
    left: 10px;  /* La posición horizontal */
    margin-top: 0; /* Ya no necesitamos empujarla 900px */
    z-index: 1;  /* Nos aseguramos de que esté por encima del fondo */
  }

  /* 3. EL CÍRCULO CYAN */
  .t-dot {
    position: absolute;
    left: -24px; /* Ajuste para que el centro toque la línea de 10px */
    top: 18px;
    z-index: 2; /* Para que el círculo pise la línea */
  }


}


/* Cursor de lupa para que el usuario sepa que puede hacer clic */
.shot-card img {
  cursor: zoom-in;
  transition: transform 0.2s;
}

.shot-card img:hover {
  transform: scale(1.02); /* Pequeño efecto al pasar el mouse */
}

/* El fondo oscuro del Lightbox */
#simple-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none; /* Para que no interfiera cuando está oculto */
  transition: opacity 0.3s ease;
}

/* Clase para mostrarlo */
#simple-lightbox.visible {
  opacity: 1;
  pointer-events: auto;
  cursor: zoom-out; /* Cursor para indicar que al hacer clic se cierra */
}

/* La imagen en grande */
#simple-lightbox img {
  max-width: 90%;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

/* Efecto de "salto" al abrir */
#simple-lightbox.visible img {
  transform: scale(1);
}

  /*WEB PRESENTISMO OTROS*/
.si-hero {
  background: linear-gradient(180deg, #030e1f 0%, #071829 40%, #0a2244 70%, #0e3b6f 100%);
  padding: 80px 24px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.si-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 800px 350px at 50% -10%, rgba(0,247,255,.055) 0%, transparent 65%),
    radial-gradient(ellipse 500px 500px at 85% 90%, rgba(59,54,179,.09) 0%, transparent 60%);
}
.si-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 44px 44px;
}
.si-hero__inner { position: relative; z-index: 1; max-width: 660px; margin: 0 auto; }

.si-hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,247,255,.08);
  border: 1px solid var(--bd-cyan);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: .7rem; color: var(--cyan);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  margin-bottom: 22px;
  font-family: var(--font-botones);
}
.si-hero__badge i { font-size: .65rem; }

.si-hero__title {
  font-family: var(--font-titulos);
  font-weight: 800;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1.1;
  color: var(--blanco);
  margin-bottom: 18px;
  line-clamp: 2;
}
.si-hero__title em { font-style: normal; color: var(--cyan); }

.si-hero__desc {
  font-size: .97rem;
  color: #CEF4F7;
  line-height: 1.75;
  margin-bottom: 40px;
}

/* Filtros de categoría */
.si-filters {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.si-filter {
  all: unset;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: .79rem; font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  font-family: var(--font-botones);
  user-select: none;
}
.si-filter:hover { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
.si-filter.active {
  background: var(--cyan-dim);
  border-color: var(--bd-cyan);
  color: var(--cyan);
}

/* ============================================================
   TABS MOBILE (ocultos en desktop)
   ============================================================ */
.si-mob-tabs {
  display: none;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  gap: 8px; padding: 20px 16px 16px;
  background: linear-gradient(180deg, #0e3b6f 0%, var(--bg-page) 100%);
}
.si-mob-tabs::-webkit-scrollbar { display: none; }
.si-mob-tab {
  all: unset;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--bd);
  background: var(--bg-card);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all .18s;
}
.si-mob-tab i { font-size: .95rem; color: var(--dim); }
.si-mob-tab span { font-size: .68rem; color: var(--dim); font-weight: 700; font-family: var(--font-titulos); }
.si-mob-tab.active { border-color: var(--bd-cyan); background: var(--cyan-dim); }
.si-mob-tab.active i,
.si-mob-tab.active span { color: var(--cyan); }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.si-layout {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 0;
  padding: 52px 24px 88px;
  align-items: start;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.si-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  padding-right: 28px;
  background-color: #002e69;
}
.si-sidebar__lbl {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--dim); font-weight: 700;
  margin-bottom: 10px; padding-left: 12px;
  font-family: var(--font-botones);
  
}
.si-nav { display: flex; flex-direction: column; gap: 2px; }

.si-nav__btn {
  all: unset;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px;
  border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: all .18s; width: 100%;
}
.si-nav__btn:hover { background: rgba(255,255,255,.04); }
.si-nav__btn.active { background: rgba(0,247,255,.08); border-color: rgba(0,247,255,.22); }

.si-nav__ico {
  width: 33px; height: 33px;
  border-radius: 8px; background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; color: var(--dim);
  flex-shrink: 0; transition: all .18s;
}
.si-nav__btn.active .si-nav__ico { background: rgba(0,247,255,.14); color: var(--cyan); }
.si-nav__btn:hover .si-nav__ico { color: rgba(255,255,255,.65); }

.si-nav__txt { flex: 1; min-width: 0; }
.si-nav__name {
  display: block; font-size: .79rem; font-weight: 700;
  color: rgba(255,255,255,.5); line-height: 1.3;
  font-family: var(--font-titulos); transition: color .18s;
}
.si-nav__btn:hover .si-nav__name,
.si-nav__btn.active .si-nav__name { color: var(--blanco); }
.si-nav__cat {
  display: block; font-size: .64rem; color: var(--dim); margin-top: 1px; transition: color .18s;
}
.si-nav__btn.active .si-nav__cat { color: rgba(0,247,255,.6); }
.si-nav__div { height: 1px; background: var(--bd); margin: 6px 0; }

/* ============================================================
   ÁREA DE CONTENIDO
   ============================================================ */
.si-content { min-height: 600px; }

.si-panel { display: none; }
.si-panel.active {
  display: block;
  animation: panelIn .32s cubic-bezier(.22,.6,.36,1) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabecera del panel */
.si-ph { margin-bottom: 30px; }
.si-ph__cat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--cyan); font-weight: 700;
  margin-bottom: 10px; font-family: var(--font-botones);
}
.si-ph__cat::before { content:''; display:block; width:14px; height:1px; background:var(--cyan); }
.si-ph__title {
  font-family: var(--font-titulos); font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.12; color: var(--blanco); margin-bottom: 14px;
}
.si-ph__desc {
  font-size: .94rem; color: var(--muted); line-height: 1.75; max-width: 660px;
}

/* Actores / roles */
.si-actors {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px;
}
.si-actor {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px;
  border-radius: 999px; border: 1px solid var(--bd);
  font-size: .72rem; color: var(--dim); font-weight: 600;
  font-family: var(--font-botones);
}
.si-actor i { font-size: .65rem; }

/* Grid de capacidades */
.si-feats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 11px; margin-bottom: 26px;
}
.si-feat {
  background: var(--bg-card);
  border: 1px solid var(--bd);
  border-radius: 12px; padding: 16px;
  transition: border-color .2s, background .2s;
}
.si-feat:hover { border-color: var(--bd-cyan); background: var(--bg-card-h); }
.si-feat__ico { color: var(--cyan); font-size: .95rem; margin-bottom: 10px; }
.si-feat__name {
  font-size: .8rem; font-weight: 700; color: var(--blanco);
  line-height: 1.3; margin-bottom: 5px;
  font-family: var(--font-titulos);
}
.si-feat__desc { font-size: .75rem; color: var(--muted); line-height: 1.5; }

/* Flujo del proceso */
.si-flow {
  background: rgba(11,46,85,.5);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 26px;
}
.si-flow__lbl {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); font-weight: 700;
  font-family: var(--font-botones); margin-bottom: 14px;
}
.si-flow__track {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.si-flow__step {
  display: flex; align-items: center; gap: 6px;
}
.si-flow__pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,247,255,.06);
  border: 1px solid rgba(0,247,255,.16);
  border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
.si-flow__n {
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(0,247,255,.2); color: var(--cyan);
  font-size: .6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.si-flow__txt { font-size: .75rem; color: rgba(255,255,255,.7); font-weight: 500; }
.si-flow__arr { color: var(--dim); font-size: .58rem; }

/* Beneficios */
.si-bens {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 10px; margin-bottom: 28px;
}
.si-ben {
  display: flex; gap: 12px; padding: 14px 16px;
  background: rgba(59,54,179,.09);
  border: 1px solid var(--bd-vio); border-radius: 10px;
}
.si-ben__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cyan); flex-shrink: 0; margin-top: 6px;
}
.si-ben__title {
  font-size: .8rem; font-weight: 700; color: var(--blanco);
  margin-bottom: 3px; font-family: var(--font-titulos);
}
.si-ben__desc { font-size: .75rem; color: var(--muted); line-height: 1.45; }

/* CTA del panel */
.si-pcta { display: flex; gap: 11px; flex-wrap: wrap; }

/* ============================================================
   BANNER INFERIOR
   ============================================================ */
.si-banner {
  background: linear-gradient(155deg, #030e1f 0%, #081a38 45%, #0e3b6f 100%);
  border-top: 1px solid var(--bd);
  padding: 72px 24px;
  text-align: center;
  position: relative; overflow: hidden;
}
.si-banner::before {
  content:''; position:absolute;
  bottom:-120px; right:-80px;
  width:450px; height:450px;
  background: radial-gradient(circle, rgba(59,54,179,.12) 0%, transparent 65%);
  pointer-events:none;
}
.si-banner::after {
  content:''; position:absolute;
  top:-80px; left:-80px;
  width:350px; height:350px;
  background: radial-gradient(circle, rgba(0,247,255,.04) 0%, transparent 60%);
  pointer-events:none;
}
.si-banner__inner { position:relative; z-index:1; max-width:700px; margin:0 auto; }

.si-banner__title {
  font-family: var(--font-titulos); font-size: clamp(1.4rem,3vw,1.9rem);
  font-weight: 800; color: var(--blanco); margin-bottom: 13px;
}
.si-banner__sub {
  font-size: .95rem; color: var(--muted); line-height: 1.7; margin-bottom: 36px;
}
.si-caps {
  display: flex; justify-content: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.si-cap {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bd); border-radius: 999px;
  font-size: .78rem; color: rgba(255,255,255,.6);
}
.si-cap i { color: var(--cyan); font-size: .74rem; }
.si-banner__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .si-layout { grid-template-columns: 1fr; padding-top: 8px; }
  .si-sidebar { display: none; }
  .si-mob-tabs { display: flex; }
  .si-feats { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 600px) {
  .si-hero { padding: 56px 20px 52px; }
  .si-layout { padding: 8px 16px 64px; }
  .si-feats { grid-template-columns: 1fr 1fr; }
  .si-bens { grid-template-columns: 1fr; }
  .si-flow__track { flex-direction: column; align-items: flex-start; gap: 8px; }
  .si-flow__arr { display: none; }
  .si-flow__step { width: 100%; }
  .si-flow__pill { width: 100%; }
  .si-banner { padding: 52px 20px; }
  .si-ph__title { font-size: 1.5rem; }
}

@media (max-width: 380px) {
  .si-feats { grid-template-columns: 1fr; }
}

/* ============================================================
   OVERRIDE DE PALETA MÁS CLARA
   Pegar al final del CSS
============================================================ */

.si-hero {
 /* background: linear-gradient(180deg, #0a1579 50% ,#4ad4ff 40% );*/
  background-color: #04152d;
}

.si-hero__glow {
  background:
    radial-gradient(ellipse 800px 350px at 50% -10%, rgba(15, 106, 167, 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 500px 500px at 85% 90%, rgba(59, 54, 179, 0.07) 0%, transparent 60%);
}

.si-hero__grid {
  background-image:
    linear-gradient(rgba(14, 59, 111, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 59, 111, 0.05) 1px, transparent 1px);
}

.si-hero__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  overflow: hidden;

  background: linear-gradient(135deg, #00f7ff 0%, #7fefff 42%, #ffffff 100%);
  border: 1px solid rgba(14, 59, 111, 0.14);
  color: #072b4f;

  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-botones);

  box-shadow:
    0 10px 24px rgba(0, 247, 255, 0.22),
    0 4px 10px rgba(11, 46, 85, 0.08);

  backdrop-filter: blur(8px);
  isolation: isolate;
}

.si-hero__badge::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -35%;
  width: 34%;
  height: 140%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent 100%
  );
  transform: rotate(18deg);
  animation: siBadgeSweep 3.8s ease-in-out infinite;
  pointer-events: none;
}

.si-hero__badge::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

.si-hero__badge i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(7, 43, 79, 0.10);
  color: #0b3b6f;
  font-size: 0.72rem;
  box-shadow: inset 0 0 0 1px rgba(7, 43, 79, 0.06);
}

@keyframes siBadgeSweep {
  0% {
    left: -35%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  45% {
    left: 115%;
    opacity: 1;
  }
  100% {
    left: 115%;
    opacity: 0;
  }
}

.si-hero__title {
  color: #ffffff;
}

.si-hero__title em {
  color: #00f6ff ;
}

.si-hero__desc {
  color: #CEF4F7;
}

/* Filtros */
.si-filter {
  border-color: rgba(14, 59, 111, 0.14);
  background-color:#0b114d;
  color: #00bfff;
}

.si-filter:hover {
  border-color: rgba(14, 59, 111, 0.24);
  background: #ffffff;
  color: #12304f;
}

.si-filter.active {
  border-color: rgba(14, 59, 111, 0.24);
  background: #ffffff;
  color: #12304f;
}

/* Tabs mobile */
.si-mob-tabs {
  background: linear-gradient(180deg, #dbeaff 0%, #f6fbff 100%);
}

.si-mob-tab {
  border-color: rgba(14, 59, 111, 0.12);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(11, 46, 85, 0.05);
}

.si-mob-tab i,
.si-mob-tab span {
  color: #64788f;
}

.si-mob-tab.active {
  border-color: rgba(14, 59, 111, 0.18);
  background: rgba(0, 247, 255, 0.12);
}

.si-mob-tab.active i,
.si-mob-tab.active span {
  color: #0b3b6f;
}

/* Layout lateral */
.si-sidebar {
  background-color: transparent;
}

.si-sidebar__lbl {
  color: #75889d;
}

.si-nav__btn:hover {
  background: rgba(14, 59, 111, 0.04);
}

.si-nav__btn.active {
  background: rgba(0, 247, 255, 0.10);
  border-color: rgba(14, 59, 111, 0.12);
}

.si-nav__ico {
  background: rgba(14, 59, 111, 0.06);
  color: #6b7d91;
}

.si-nav__btn.active .si-nav__ico {
  background: rgba(14, 59, 111, 0.09);
  color: #0b3b6f;
}

.si-nav__btn:hover .si-nav__ico {
  color: #12304f;
}

.si-nav__name {
  color: #244463;
}

.si-nav__btn:hover .si-nav__name,
.si-nav__btn.active .si-nav__name {
  color: #0b2e55;
}

.si-nav__cat {
  color: #708397;
}

.si-nav__btn.active .si-nav__cat {
  color: #0f6aa7;
}

.si-nav__div {
  background: rgba(14, 59, 111, 0.10);
}

/* Cabecera de panel */
.si-ph__cat {
  color: #0f6aa7;
}

.si-ph__cat::before {
  background: #0f6aa7;
}

.si-ph__title {
  color: #0b2e55;
}

.si-ph__desc {
  color: #53677c;
}

/* Chips / actores */
.si-actor {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(14, 59, 111, 0.10);
  color: #002e69;
}

/* Cards de capacidades */
.si-feat {
  
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(14, 59, 111, 0.10);
  box-shadow: 0 10px 24px rgba(11, 46, 85, 0.05);
}

.si-feat:hover {
  border-color: rgba(14, 59, 111, 0.16);
  background: #ffffff;
}

.si-feat__ico {
  color: #0f6aa7;
}

.si-feat__name {
  color: #12304f;
}

.si-feat__desc {
  color: #5d7186;
}

/* Flujo */
.si-flow {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(14, 59, 111, 0.10);
  box-shadow: 0 10px 24px rgba(11, 46, 85, 0.04);
}

.si-flow__lbl {
  color: #74879b;
}

.si-flow__pill {
  background: rgba(14, 59, 111, 0.05);
  border-color: #00bfff;
}

.si-flow__n {
  background: rgba(15, 106, 167, 0.12);
  color: #0f6aa7;
}

.si-flow__txt {
  color: #244463;
}

.si-flow__arr {
  color: #7f91a4;
}

/* Beneficios */
.si-ben {
  background: rgba(59, 54, 179, 0.05);
  border-color: rgba(59, 54, 179, 0.10);
}

.si-ben__title {
  color: #12304f;
}

.si-ben__desc {
  color: #5c7086;
}

/* Banner inferior */

.si-banner {
  background: var(--header-gradient);
  color: #fff;
  position: relative;
}

.si-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 380px at 15% 20%, rgba(0,247,255,0.18), transparent 60%),
    radial-gradient(900px 520px at 80% 40%, rgba(59,54,179,0.16), transparent 62%);
  pointer-events: none;
}
.si-banner::before {
  background: radial-gradient(circle, rgba(59, 54, 179, 0.08) 0%, transparent 65%);
}

.si-banner::after {
  background: radial-gradient(circle, rgba(15, 106, 167, 0.08) 0%, transparent 60%);
}

.si-banner__title {
  color: #ffffff;
}

.si-banner__sub {
  color: #CEF4F7;
}
.si-cap {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: linear-gradient(135deg, #f8fcff 0%, #eef8ff 42%, #ffffff 100%);
  border: 1px solid rgba(14, 59, 111, 0.12);
  border-radius: 999px;
  color: #4f6378;

  box-shadow:
    0 10px 24px rgba(0, 247, 255, 0.10),
    0 4px 10px rgba(11, 46, 85, 0.08);

  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.si-cap:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 59, 111, 0.18);
  box-shadow:
    0 14px 28px rgba(0, 247, 255, 0.14),
    0 6px 14px rgba(11, 46, 85, 0.10);
}

.si-cap::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -35%;
  width: 34%;
  height: 140%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent 100%
  );
  transform: rotate(18deg);
  animation: siBadgeSweep 3.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.si-cap::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 1;
}

.si-cap > * {
  position: relative;
  z-index: 2;
}

.si-cap i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(7, 43, 79, 0.10);
  color: #0b3b6f;
  font-size: 0.72rem;
  box-shadow: inset 0 0 0 1px rgba(7, 43, 79, 0.06);
}

@keyframes siBadgeSweep {
  0% {
    left: -35%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  45% {
    left: 115%;
    opacity: 1;
  }
  100% {
    left: 115%;
    opacity: 0;
  }
}

.si-cap {
  background: #eef6ff;
}



.si-content {
  padding-left: 34px;
}

/* ============================================================
   OVERRIDE SOLO DEL PANEL DE INFORMACIÓN
   Más identidad por sección / menos sensación de bloque repetido
============================================================ */

.si-panel.active {
  display: grid;
  gap: 24px;
}

/* =========================
   CABECERA / RESUMEN
========================= */
.si-ph {
  position: relative;
  margin-bottom: 0;
  padding: 28px 30px 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(247,251,255,.98) 100%);
  border: 1px solid rgba(14, 59, 111, 0.10);
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(11, 46, 85, 0.05);
  overflow: hidden;
}

.si-ph::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #00cfff 0%, #0f6aa7 100%);
}

.si-ph__cat {
  color: #0f6aa7;
  margin-bottom: 14px;
}

.si-ph__cat::before {
  width: 18px;
  background: #0f6aa7;
}

.si-ph__title {
  max-width: 18ch;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #0b2e55;
  margin-bottom: 16px;
}

.si-ph__desc {
  max-width: 70ch;
  font-size: .98rem;
  line-height: 1.85;
  color: #587089;
  margin: 0;

  display: -webkit-box;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   ACTORES
========================= */
.si-actors {
  margin-top: 18px;
  gap: 10px;
}

.si-actor {
  padding: 7px 14px;
  background: #ffffff;
  border: 1px solid rgba(14, 59, 111, 0.08);
  color: #173a5d;
  box-shadow: 0 6px 14px rgba(11, 46, 85, 0.04);
}

/* =========================
   CAPACIDADES
   identidad: módulo técnico / dashboard cards
========================= */
.si-feats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 0;
  padding: 26px;
  background: linear-gradient(180deg, #edf8ff 0%, #f7fbff 100%);
  border: 1px solid rgba(15, 106, 167, 0.10);
  border-radius: 24px;
}

.si-feats::before {
  content: "Capacidades clave";
  position: absolute;
  top: 0;
  left: 26px;
  transform: translateY(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: #0f6aa7;
  color: #ffffff;
  font-family: var(--font-botones);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.si-feat {
  position: relative;
  min-height: 170px;
  padding: 20px 18px 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15, 106, 167, 0.10);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(11, 46, 85, 0.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.si-feat:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 106, 167, 0.18);
  box-shadow: 0 14px 28px rgba(11, 46, 85, 0.07);
}

.si-feat::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #00dfff 0%, #0f6aa7 100%);
  opacity: .9;
}

.si-feat__ico {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(15, 106, 167, 0.10);
  color: #0f6aa7;
  font-size: 1rem;
  margin-bottom: 14px;
}

.si-feat__name {
  font-size: .95rem;
  line-height: 1.25;
  color: #12304f;
  margin-bottom: 8px;
}

.si-feat__desc {
  font-size: .82rem;
  line-height: 1.6;
  color: #5d7186;
  max-width: 30ch;

  display: -webkit-box;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   FLUJO
   identidad: franja operativa
========================= */
.si-flow {
  position: relative;
  padding: 24px 24px 22px;
  margin-bottom: 0;
  background: linear-gradient(135deg, #0b2e55 0%, #154a8f 100%);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(11, 46, 85, 0.16);
  overflow: hidden;
}

.si-flow::before {
  content: "";
  position: absolute;
  inset: auto -10% -80px auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,247,255,.18), transparent 65%);
  pointer-events: none;
}

.si-flow__lbl {
  position: relative;
  color: rgba(255,255,255,.72);
  font-size: .68rem;
  letter-spacing: .14em;
  margin-bottom: 16px;
}

.si-flow__track {
  position: relative;
  gap: 10px 8px;
}

.si-flow__step {
  gap: 8px;
}

.si-flow__pill {
  padding: 9px 15px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}

.si-flow__n {
  width: 20px;
  height: 20px;
  background: #ffffff;
  color: #0f6aa7;
  font-size: .62rem;
  font-weight: 800;
}

.si-flow__txt {
  color: rgba(255,255,255,.88);
  font-size: .78rem;
}

.si-flow__arr {
  color: rgba(255,255,255,.42);
}

/* =========================
   BENEFICIOS
   identidad: bloque ejecutivo / más compacto
========================= */
.si-bens {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 0;
  padding: 24px;
  background: linear-gradient(180deg, rgba(246,248,255,.92) 0%, rgba(241,245,255,.98) 100%);
  border: 1px solid rgba(59, 54, 179, 0.10);
  border-radius: 24px;
}

.si-bens::before {
  content: "Impacto";
  position: absolute;
  top: 0;
  left: 24px;
  transform: translateY(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  background: #3b36b3;
  color: #ffffff;
  font-family: var(--font-botones);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.si-ben {
  position: relative;
  display: block;
  min-height: 104px;
  padding: 18px 18px 16px 20px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(59, 54, 179, 0.08);
  border-radius: 16px;
}

.si-ben::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 4px;
  height: 24px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #8b84ff 0%, #3b36b3 100%);
}

.si-ben__dot {
  display: none;
}

.si-ben__title {
  font-size: .95rem;
  line-height: 1.25;
  color: #152d54;
  margin-bottom: 6px;
}

.si-ben__desc {
  font-size: .82rem;
  line-height: 1.55;
  color: #62758a;

  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================
   CTA
========================= */
.si-pcta {
  padding-top: 18px;
  border-top: 1px solid rgba(14, 59, 111, 0.10);
  gap: 14px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .si-ph {
    padding: 24px 22px 20px;
  }

  .si-ph__title {
    max-width: none;
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }

  .si-feats,
  .si-bens {
    grid-template-columns: 1fr;
    padding: 22px 18px 18px;
  }
}

@media (max-width: 600px) {
  .si-panel.active {
    gap: 18px;
  }

  .si-ph,
  .si-flow,
  .si-feats,
  .si-bens {
    border-radius: 18px;
  }

  .si-ph__desc {
    line-clamp: 5;
    font-size: .94rem;
  }

  .si-feat,
  .si-ben {
    min-height: auto;
  }

  .si-pcta {
    flex-direction: column;
  }

  .si-pcta > * {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   AJUSTE DE ESCALA DEL PANEL
   Reduce un poco tamaños sin cambiar el diseño
============================================================ */

.si-panel.active {
  gap: 20px;
}

/* Cabecera */
.si-ph {
  padding: 24px 26px 19px;
  border-radius: 20px;
}

.si-ph__cat {
  margin-bottom: 12px;
}

.si-ph__title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 13px;
  max-width: 19ch;
}

.si-ph__desc {
  font-size: 0.93rem;
  line-height: 1.75;
  max-width: 66ch;
}

.si-actors {
  margin-top: 16px;
  gap: 8px;
}

.si-actor {
  padding: 6px 12px;
  font-size: 0.7rem;
}

/* Capacidades */
.si-feats {
  gap: 13px;
  padding: 22px;
  border-radius: 20px;
}

.si-feats::before {
  left: 22px;
  padding: 6px 11px;
  font-size: 0.62rem;
}

.si-feat {
  min-height: 150px;
  padding: 17px 16px 15px;
  border-radius: 15px;
}

.si-feat__ico {
  width: 38px;
  height: 38px;
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.si-feat__name {
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.si-feat__desc {
  font-size: 0.77rem;
  line-height: 1.5;
  color: #5d7186;
}

/* Flujo */
.si-flow {
  padding: 20px 20px 18px;
  border-radius: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.si-flow__lbl {
  font-size: 0.62rem;
  margin-bottom: 13px;
}

.si-flow__track {
  gap: 8px 6px;
}

.si-flow__pill {
  padding: 7px 70px;
}

.si-flow__n {
  width: 18px;
  height: 18px;
  font-size: 0.56rem;
}

.si-flow__txt {
  font-size: 0.72rem;
}

/* Beneficios */
.si-bens {
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
}

.si-bens::before {
  left: 20px;
  padding: 6px 11px;
  font-size: 0.62rem;
}

.si-ben {
  min-height: 92px;
  padding: 16px 16px 14px 18px;
  border-radius: 14px;
}

.si-ben::before {
  top: 16px;
  height: 20px;
}

.si-ben__title {
  font-size: 0.88rem;
  margin-bottom: 5px;
}

.si-ben__desc {
  font-size: 0.77rem;
  line-height: 1.48;
}

/* CTA */
.si-pcta {
  padding-top: 14px;
  gap: 11px;
}

@media (max-width: 900px) {
  .si-ph {
    padding: 21px 18px 18px;
  }

  .si-ph__title {
    font-size: clamp(1.65rem, 5.5vw, 2.2rem);
  }

  .si-feats,
  .si-bens {
    padding: 18px 16px 16px;
  }
}

@media (max-width: 600px) {
  .si-panel.active {
    gap: 16px;
  }

  .si-ph,
  .si-flow,
  .si-feats,
  .si-bens {
    border-radius: 16px;
  }

  .si-ph__title {
    font-size: 1.6rem;
  }

  .si-ph__desc {
    font-size: 0.9rem;
  }

  .si-feat,
  .si-ben {
    min-height: auto;
  }
}

/* ============================================================
   RESPONSIVE CENTRADO
   Solo mobile / tablet
============================================================ */

@media (max-width: 900px) {
  .si-content {
    padding-left: 0;
    min-height: auto;
  }

  .si-panel.active {
    justify-items: center;
    text-align: center;
  }

  .si-ph {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .si-ph__cat {
    justify-content: center;
  }

  .si-ph__title,
  .si-ph__desc {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .si-actors {
    justify-content: center;
  }

  .si-feats,
  .si-bens,
  .si-flow {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .si-feat,
  .si-ben {
    text-align: center;
    align-items: center;
  }

  .si-feat__ico {
    margin-left: auto;
    margin-right: auto;
  }

  .si-feat__desc,
  .si-ben__desc {
    margin-left: auto;
    margin-right: auto;
    max-width: 32ch;
  }

  .si-flow__lbl {
    text-align: center;
  }

  .si-flow__track {
    justify-content: center;
  }

  .si-pcta {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .si-ph::before,
  .si-ben::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .si-ph {
    padding-top: 26px;
    margin-bottom: 20px;
    margin-top:30px;
  }
  .si-ph__title{
    font-size: 0.9;
    margin-top: -10px;
  }
  .si-hero__title{
    font-size: 1.3rem; 
  }
  .si-hero__desc{
    font-size: 0.7rem;
  }

  .si-feat,
  .si-ben {
    padding-left: 18px;
    padding-right: 18px;
  }

  .si-flow__track {
    align-items: center;
  }

  .si-flow__step {
    width: 100%;
    justify-content: center;
  }

  .si-flow__pill {
    width: auto;
    max-width: 100%;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .si-ph::before {
    display: none;
  }

  .si-ben::before {
    left: 0;
    transform: none;
  }
}

/* ============================================================
   CARD MOBILE
   - eyebrow a la izquierda
   - sin el guion
   - pills más chicas en 2 líneas
============================================================ */

@media (max-width: 600px) {
  .si-ph__cat {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
    margin-bottom: 25px;
  }

  .si-ph__cat::before {
    display: none;
  }

  .si-actors {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 6px 8px;
    margin-top: 14px;
  }

  .si-actor {
    padding: 4px 9px;
    font-size: 0.62rem;
    line-height: 1;
    min-height: 24px;
    border-radius: 999px;
  }

  .si-actor i {
    font-size: 0.52rem;
  }
}

/* ============================================================
   HERO MOBILE
   - badge más chica
   - pills más compactas
   - en una sola línea
============================================================ */

@media (max-width: 600px) {
  .si-hero__badge {
    padding: 7px 12px;
    gap: 6px;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
  }

  .si-hero__badge i {
    width: 18px;
    height: 18px;
    font-size: 0.56rem;
  }



  .si-filters::-webkit-scrollbar {
    display: none;
  }

  .si-filter {
    flex: 0 0 auto;
    padding: 6px 1px;
    font-size: 0.67rem;
    line-height: 1;
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  .si-flow__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 18px;
    align-items: center;
    position: relative;
  }

  /* oculta la flecha vieja del HTML */
  .si-flow__arr {
    display: none !important;
  }

  .si-flow__step {
    position: relative;
    width: 100%;
  }

  /* no tocamos tamaño de la pill */
  .si-flow__pill {
    width: 100%;
  }

  .si-feats {
  margin-top: 25px;
}
  /* recorrido zig-zag para 5 pasos */
  .si-flow__step:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  .si-flow__step:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .si-flow__step:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .si-flow__step:nth-of-type(4) { grid-column: 1; grid-row: 2; }
  .si-flow__step:nth-of-type(5) { grid-column: 1; grid-row: 3; }

  .si-flow__step::after {
    position: absolute;
    font-size: 1.15rem;
    line-height: 1;
    color: #ffffff;
    font-weight: 800;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }

  .si-flow__step:last-of-type::after {
    display: none;
  }

  /* 1 -> 2 */
  .si-flow__step:nth-of-type(1)::after {
    content: "➜";
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
  }

  /* 2 ↓ 3 */
  .si-flow__step:nth-of-type(2)::after {
    content: "⬇";
    left: 50%;
    bottom: -19px;
    transform: translateX(-50%);
  }

  /* 3 <- 4 */
  .si-flow__step:nth-of-type(3)::after {
    content: "⬅";
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
  }

  /* 4 ↓ 5 */
  .si-flow__step:nth-of-type(4)::after {
    content: "⬇";
    left: 50%;
    bottom: -19px;
    transform: translateX(-50%);
  }
}

/* ============================================================
   BANNER FINAL MOBILE
   - título más chico en 2 líneas
   - subtítulo más chico en 4 líneas
   - pills más chicas en 2 filas de 3
   - botones apenas más chicos
============================================================ */

@media (max-width: 600px) {
  .si-banner {
    padding: 42px 18px;
  }

  .si-banner__inner {
    max-width: 100%;
  }

.si-banner__title {
  font-size: 1.25rem;
  line-height: 1.12;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  text-align: center;
  text-wrap: balance;

  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
  .si-banner__sub {
    font-size: 0.82rem;
    line-height: 1.65;
    max-width: 31ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    text-align: center;

    display: -webkit-box;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .si-caps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
  }

  .si-cap {
    min-width: 0;
    width: 100%;
    justify-content: center;
    padding: 4px 5px;
    font-size: 0.41rem;
    line-height: 1.15;
    text-align: center;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .si-cap i {
    width: 18px;
    height: 18px;
    font-size: 0.56rem;
    flex-shrink: 0;
  }

  .si-banner__cta {
    gap: 10px;
  }

  .si-banner__cta .btn-primary-glow,
  .si-banner__cta .btn-secondary-ghost,
  .si-banner__cta a,
  .si-banner__cta button {
    padding: 0.62rem 1.15rem;
    font-size: 0.78rem;
  }
}