/* 1) Variables (light) */

:root{
  /* Paleta principal */
  --lm-red:#E21B23;
  --lm-red-600:#C9151C;
  --lm-blue:#0B53B7;
  --lm-blue-700:#093C82;

  /* UI base */
  --bg:#F7FAFC;
  --card:#FFFFFF;
  --ink:#0F172A;
  --muted:#64748B;

  /* Focos / sombras / radio */
  --ring:0 0 0 3px rgba(11,83,183,.25);
  --radius:20px;
  --shadow-lg:0 10px 30px rgba(2,8,23,.08);
  --shadow-md:0 8px 20px rgba(2,8,23,.06);
  --header-bg:rgba(255,255,255,.9);
  --header-border:#eef2f7;
  --menu-link:#0b2340;
  --menu-link-hover:var(--lm-blue);

  /* Otros */
  --visible_carrousel:5;
  --fab-clear:112px;

  /* Marca */
  --brand-blue:#115da9;
  --accent-whatsapp:#25d366;
}



/* 2) Reset & helpers */

*{box-sizing:border-box}

html,body{margin:0;padding:0;font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--ink);background:var(--bg)}

html{scroll-behavior:smooth}

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

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

.container{width:min(1200px,92%);margin-inline:auto}



/* 3) Layout & componentes */

/* Topbar */

.topbar{background:#0a0f1f;color:#fff;font-size:.9rem}

.topbar .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:.5rem 0}

.topbar .actions{display:flex;gap:14px;flex-wrap:wrap}

.topbar a{opacity:.9}

.pill-mini{

  /* Estilo base para el pill (badge) */

  padding: .25rem .6rem;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.1); /* Hacemos el pill visible */

  font-size: .8rem;

}

.badge{

  display:inline-flex; align-items:center; gap:8px;

}





/* Header / Nav */

header{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--header-border);backdrop-filter:saturate(180%) blur(10px)}

.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;position:relative}

.brand{display:flex;align-items:center;gap:12px}

header img{height:32px; object-fit:contain }



.brand .title{font-weight:800;letter-spacing:.2px}

.menu{display:flex;gap:18px;align-items:center}

.menu a{padding:10px 12px;border-radius:10px;position:relative;color:var(--menu-link);background:transparent}

.menu a:hover{color:var(--menu-link-hover)}

.menu a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease;opacity:.25}

.menu a:hover::after{transform:scaleX(1)}



/* CTA dentro del menú */

.menu a.cta{background:var(--lm-red)!important;color:#fff!important;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow-md)}

.menu a.cta::after{content:none!important}

.menu a.cta:hover{background:var(--lm-red-600)!important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.18)}



/* Botón Hamburguesa (inicialmente oculto) */

.hamb{

  display:none;

  align-items:center;

  gap:8px;

  border:1px solid #e6ebf4;

  padding:8px 12px;

  border-radius:12px;

  background:#fff;

  cursor:pointer;

  font-weight: 600;

}



/* (Responsividad) */



/* Tabletas y Móviles (Máximo 1000px) */

@media (max-width: 1000px){

  .topbar .badge:last-child {

      display: none; 

  }

}



/* Teléfonos Móviles (Máximo 768px) */

@media (max-width: 768px){

    .topbar .wrap {

        flex-direction: column;

        align-items: center;

        gap: 8px;

    }

    .topbar .actions {

        justify-content: center;

        gap: 10px;

    }

    .topbar .badge[aria-label="Envío nacional"] {

        display: none; /* Oculta el badge de envío */

    }

}





/* Teléfonos Móviles (Máximo 840px - punto de quiebre para el menú) */

@media (max-width: 840px){

  .hamb {

    display: flex;

  }



  /* Header: Menú de navegación pasa a ser overlay (oculto por defecto) */

  .menu {

    position: absolute;

    top: 100%; /* Justo debajo del header */

    left: 0;

    right: 0;

    flex-direction: column;

    background: var(--header-bg);

    border-top: 1px solid var(--header-border);

    padding: 10px 0 20px;

    box-shadow: var(--shadow-lg);

    

    /* Inicialmente oculto y listo para JS */

    display: none; 

    transform: translateY(-10px);

    opacity: 0;

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

  }

  

  /* Estilo del menú abierto (usado con JS para toggle) */

  .menu.is-open {

    display: flex;

    transform: translateY(0);

    opacity: 1;

  }



  /* Ajustar los links del menú móvil */

  .menu a {

    width: 92%;

    margin-inline: auto;

    text-align: center;

  }

  .menu a.cta {

    margin-top: 10px;

  }

  .menu a::after {

    display: none; /* Ocultar el subrayado en móvil */

  }

}



/* Hero */



.hero-section{

  position: relative;

  margin: 16px 24px;

  border-radius: 22px;

  overflow: hidden;

  box-shadow: 0 20px 60px rgba(2,8,23,.12);



  /* Altura */

  min-height: clamp(480px, 56vh, 640px);

}



/* Grid del hero */

.hero-section .container{

  position: relative;

  display: grid;

  grid-template-columns: 0.95fr 1.05fr; /* Texto angosto, imagen ancha */

  gap: 80px;

  align-items: center;

  padding: 28px 0 36px;

}



/* Imagen de la derecha (se oculta) */

.hero-image{ position: relative; }

.hero-image .main-image{ display: none !important; }



/* 2. Texto y Tipografía */

.hl-blue{ color:#5aa0ff; }

.br-lg{ display:block; } /* Usado para saltos de línea forzados en desktop */

.hK{color: #ffffff;}





.hero-content .tagline{

  display:inline-block; text-transform:uppercase; letter-spacing:.08em;

  font-weight:600; font-size:1.50rem;

  padding:6px 10px; border-radius:999px;

  background:rgba(255,255,255,.14); color:#d9e6ff;

  margin-bottom:12px;

 position: absolute;

    right: -1000px;  /* Ajusta según necesites */

    top: 0; 

  text-align: center;

}


.hero-content h1{

  margin:0 0 14px;

  font-weight:800;

  font-family: Inter !important;

  line-height:1.05;

  color:#fff;

  max-width:18ch;

  text-wrap:balance;

  overflow-wrap:anywhere;

}



.hero-content > p{

  color:#e7f0ff;

  font-size:clamp(1rem,1.15vw,1.125rem);

  line-height:1.6;

  max-width:54ch;

  margin:0 0 16px;

}



/* 3. Botones */

.hero-buttons{ display:block; gap:12px; flex-wrap:wrap; margin:8px 0 10px; }

.hero-buttons .btn{ border:0; border-radius:12px; padding:10px 16px; font-weight:700; }




/* Botón de WhatsApp */

.cotizar-whatsapp{

    display:inline-flex; align-items:center; gap:8px;

    background:#25D366; color:#fff; padding: 10px 16px; border-radius:12px; font-weight:700;

    box-shadow:0 8px 20px rgba(2,8,23,.06);

}

.cotizar-whatsapp:hover{ transform:translateY(-1px); color:#fff !important; }



/* Lista de ventajas */

.advantages{ margin: 6px 0 0; padding-left: 0; list-style: none; }


/* 4. Media Queries (Responsividad) */



/* Oculta el salto de línea forzado en pantallas angostas */

@media (max-width:1000px){ .br-lg{ display:none; } }



/* En tabletas y pantallas más angostas (se rompe el grid de 2 columnas) */

@media (max-width: 1000px){

  .hero-section .container{

      grid-template-columns: 1fr; /* Una sola columna */

      gap: 20px; /* Reduce la separación */

  }

  .hero-content h1, .hero-content > p{ max-width: none; } /* Permite que el texto ocupe todo el ancho */

  .hero-section{

      min-height: clamp(480px, 60vh, 640px); /* Ajusta un poco la altura si es necesario */

  }

}



/* Ajuste fino para móviles */

@media (max-width: 640px){

  .hero-section{ margin: 10px 16px; } /* Ajuste de margen exterior */

}



/* Botones y lista */

.hero-buttons{ gap: 10px; margin: 6px 0 12px; }

.hero-buttons .btn{ padding: 10px 16px; border-radius: 10px; }

.hero-cta-main, .hero-cta-secondary{ font-size: 1rem; }

.advantages{ gap: 6px; }



/* Imagen y card */

.main-image{

  height: 420px;                    

  border-radius: 16px;

}




/* Móviles */

@media (max-width: 640px){

  .hero-section{ padding: 28px 0 34px; }

  .hero-content h1{ font-size: clamp(1.7rem, 7vw, 2.4rem); }

  .main-image{ height: 300px; }

  .hero-buttons .btn{ padding: 9px 14px; }

}





/* Secciones + Cards */

.section{padding:48px 0}

.section h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 10px}

.section .sub{color:var(--muted);margin-bottom:22px}

.cats {

    display: grid;

    /* Mantenemos 4 columnas para escritorio */

    grid-template-columns: repeat(4, 1fr); 

    gap: 16px;

    margin-bottom: 22px;

}



.cat {

    padding: 24px 16px; 

    background: var(--card);

    border-radius: 16px;

    border: 1px solid #e8eef6;

    display: flex;

    flex-direction: column;

    gap: 12px; /* Incrementamos ligeramente el espacio entre elementos internos */

    box-shadow: var(--shadow-md);

}



.cat img {

    height: 200px; 

    object-fit: contain;

}



.cat b {

    font-size: 1.25rem; /* Hacemos el título más grande */

}

.cat a{margin-top:auto;color:var(--lm-blue);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

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

.grid-2-1{grid-template-columns:1.1fr .9fr}

.pad{padding:18px}

.card{background:var(--card);border:1px solid #e8eef6;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-md)}

.card .img{aspect-ratio:4/3;background:#f5f7fb;display:grid;place-items:center}

.card h3{font-size:1.05rem;margin:14px 14px 6px}

.price{color:#0a7a3f;font-weight:700;margin:0 14px 10px}

.meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem;margin:0 14px 14px}

.card .act{margin:0 14px 16px 14px;margin-top:auto;display:flex;gap:8px}

.btn{padding:10px 12px;border-radius:12px;border:1px solid #dfe7f3;background:#fff}

.btn.primary{background:var(--lm-red);border-color:var(--lm-red);color:#fff}





/* Brands */

.brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;filter:grayscale(100%);opacity:.8}



/* Callout */

.callout{background:linear-gradient(135deg, rgba(11,83,183,.06), rgba(226,27,35,.06));padding:24px;border-radius:20px;border:1px solid #e1e9f5;display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:18px}

.callout h3{margin:.2rem 0}



/* Footer */

footer{background:#0b1530;color:#c7d2fe;margin-top:36px}

.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:42px 0}

.foot h4{margin:0 0 12px;color:#fff}

.foot a{display:block;color:#c7d2fe;margin:8px 0}

.credits{border-top:1px solid #2a355a;padding:14px 0;color:#94a3b8;font-size:.9rem;display:flex;justify-content:space-between;align-items:center}



/* 4) Interacciones */

button,.btn,.cta,.menu a,.pill,.cat,.card,.brand,.kicker,.chip{transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;cursor:pointer}

.btn:hover,.cta:hover,.pill:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(2,8,23,.12)}

.btn:active,.cta:active,.pill:active{transform:none}

.card:hover,.cat:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(2,8,23,.12)}

.card .img img{transition:transform .25s ease}

.card:hover .img img{transform:scale(1.02)}

.chip:hover{transform:translateY(-2px)}

.srch button:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(11,83,183,.25)}

.reveal{opacity:0;transform:translateY(16px)}

.reveal.show{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}



/* 5) Responsive */

@media (max-width:1100px){

  .cats{grid-template-columns:repeat(4,1fr)}

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

  .brands{grid-template-columns:repeat(4,1fr)}

  .callout{grid-template-columns:1fr}

}

@media (max-width:800px){

  .hero-grid{grid-template-columns:1fr}

  .foot{grid-template-columns:1fr 1fr}

  .hamb{display:inline-flex}

  .menu{position:absolute;left:0;right:0;display:none;background:#fff;border-bottom:1px solid #e6ebf4;box-shadow:0 12px 30px rgba(2,8,23,.10);padding:12px;z-index:999;flex-direction:column;gap:8px}

  .menu a{padding:12px;border-radius:12px}

  .nav.open #mainMenu{display:grid;animation:drop .18s ease-out}

  @keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

}

@media (max-width:700px){

  .cats{grid-template-columns:1fr}

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

}



/* Lista de ventajas */

.advantages{ margin: 6px 0 0; padding-left: 0; list-style: none; }

.advantages li{ margin: 6px 0; color:#eaf2ff; } /* Color para texto claro sobre el fondo oscuro */






/* Botón WhatsApp dentro de la tarjeta (Se mantiene la definición anterior, la tuya era redundante) */

.btn-whatsapp{

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

  width:100%;

  padding:11px 14px;

  border-radius:999px;

  font-weight:800;

  background:#25D366; color:#fff !important;

  text-decoration:none;

  box-shadow:0 10px 22px rgba(37,211,102,.35);

  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;

}

.btn-whatsapp:hover{

  filter:brightness(.96);

  transform:translateY(-1px);

  box-shadow:0 14px 28px rgba(37,211,102,.42);

}



.to-top{

  display:none; 

  position:fixed; 

  right:18px; bottom:18px;

  width:54px; height:54px;

  z-index: 70;

  cursor:pointer;

  align-items:center; justify-content:center;

  will-change: transform;



  /* Estilo Glassmorphism (Vidrio) */

  border-radius:999px;

  border:1px solid rgba(255,255,255,.55);

  background:rgba(255,255,255,.82);

  backdrop-filter: blur(10px) saturate(140%);

  -webkit-backdrop-filter: blur(10px) saturate(140%);

  color:#0b2340;

  box-shadow:

    0 10px 26px rgba(2,8,23,.20),

    inset 0 0 0 1px rgba(255,255,255,.35);

  

  /* Transiciones */

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;

}



/* El JavaScript añade esta clase para hacerlo visible */

.to-top.show{ display:flex; }



/* 2. Efecto Hover y Glow */

.to-top:hover{

  transform: translateY(-4px);

  background: rgba(255,255,255,.92);

  box-shadow:

    0 16px 40px rgba(2,8,23,.26),

    0 0 22px rgba(11,83,183,.25), /* El 'Glow' suave */

    inset 0 0 0 1px rgba(255,255,255,.45);

}



/* 3. Aro de Progreso Bicolor (Pseudo ::before) */

/* Usa la variable CSS --p (0-100) para el progreso de scroll */

.to-top::before{

  content:"";

  position:absolute; inset:-3px; /* Más grande que el botón para ser un aro exterior */

  border-radius:inherit;

  background:

  conic-gradient(#0B53B7 calc(var(--p,0)*1%), #E21B23 0 0); 

  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);

  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);

  opacity:.95; 

  pointer-events:none;

}



/* 4. Tooltip (Pseudo ::after) */

.to-top::after{

  content: attr(data-label);

  position:absolute;

  bottom: 66px; 

  right: 0;

  padding: 6px 10px;

  border-radius: 10px;

  background: rgba(20,28,51,.9);

  color:#fff;

  font-size: .78rem;

  letter-spacing:.2px;

  white-space:nowrap;

  box-shadow: 0 8px 18px rgba(2,8,23,.25);

  opacity:0;

  transform: translateY(4px);

  pointer-events:none;

  transition: opacity .18s ease, transform .18s ease;

}

.to-top:hover::after{ 

  opacity:1; 

  transform: translateY(0); 

}





/* Responsividad y Accesibilidad */

@media (max-width:420px){

  .to-top{ width:50px; height:50px; right:14px; bottom:14px; }

  .to-top::after{ right: -8px; } /* Ajuste de tooltip para pantallas muy pequeñas */

}



/* Accesibilidad: reduce animaciones si el usuario lo pide */

@media (prefers-reduced-motion: reduce){

  .to-top, .to-top:hover{ transition: none; transform:none; }

}



/* Fix de accesibilidad */

.to-top:focus-visible{

  outline: 0;

  box-shadow:

    0 0 0 4px rgba(11,83,183,.35), 

    0 16px 40px rgba(2,8,23,.26);

}


.to-top{

  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px + var(--fab-clear));

  right: calc(env(safe-area-inset-right, 0px) + 18px);

  z-index: 71; 

}


/* Si no hay FABs, vuelve a la posición original */

body.no-fabs .to-top{

  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);

}



/* El Modal (fondo oscuro) */

.modal {

  display: none; 

  position: fixed; 

  z-index: 1000; 

  left: 0;

  top: 0;

  width: 100%; 

  height: 100%; 

  overflow: auto; 

  background-color: rgba(0,0,0,0.7); 

  backdrop-filter: blur(5px); 

}



/* Contenido del Modal (la "ventana emergente") */

.modal-content {

  background-color: #fefefe;

  margin: 5% auto; 

  padding: 30px;

  border: 1px solid #888;

  width: 80%; 

  max-width: 900px; 

  border-radius: 8px;

  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

  position: relative; 

  animation-name: animatetop;

  animation-duration: 0.4s;

}


/* GRID */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

/* TARJETA CON SOLO BORDE DEGRADADO */
.category-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
  padding: 24px 16px;
  border-radius: 18px;
  background: #ffffff;           /* Fondo blanco */
  text-decoration: none;
  overflow: hidden;
  
  /* Sombra opcional */
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Borde degradado */
.category-item::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;                   /* Grosor del borde */
  border-radius: inherit;
  background: linear-gradient(135deg, #0f62fe, #ff4b6a);
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Contenido */
.category-item img,
.category-item h3 {
  position: relative;
  z-index: 1;
}

.category-item img {
  max-width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 12px;
}

.category-item h3 {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

/* Hover opcional */
.category-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}




/* Animación para que aparezca desde arriba */

@keyframes animatetop {

  from {top: -300px; opacity: 0}

  to {top: 0; opacity: 1}

}



/* Botón de cerrar (la "x") */

.close-button {

  color: #aaa;

  float: right;

  font-size: 38px;

  font-weight: bold;

  position: absolute; 

  top: 10px;

  right: 20px;

  cursor: pointer;

}



.close-button:hover,

.close-button:focus {

  color: black;

  text-decoration: none;

  cursor: pointer;

}



/* Estilos para la cuadrícula de categorías dentro del modal */

.category-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 

  gap: 20px; 

  margin-top: 30px;

}



.category-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  text-decoration: none;

  color: #333;

  padding: 15px;

  border: 1px solid #eee;

  border-radius: 5px;

  transition: all 0.3s ease;

}



.category-item:hover {

  box-shadow: 0 0 10px rgba(0,0,0,0.1);

  transform: translateY(-5px); 

  color: #007bff; 

}



.category-item img {

  width: 80px; 

  height: 80px;

  object-fit: cover;

  margin-bottom: 10px;

  border-radius: 5px;

}



.category-item h3 {

  font-size: 1em;

  margin: 0;

  line-height: 1.2;

}


.cotizar-whatsapp{

  border: 2px solid #25d366 !important;

  margin-top: 0px!important;

  border-radius: 8px;

  padding: 10px 15px;

  font-weight: bold;

  height: 44px;

}

.cotizar-whatsapp span{

  text-align: center;

}

.cotizar-whatsapp:hover{

  background: #25d366!important;

  border: 2px solid #25d366 !important;

  transition: all .4s ease;

}



/* Carrusel de marcas (compacto a la derecha) */

.callout{ grid-template-columns: 1.4fr .6fr; align-items:center; } 



.wrapper_carrousel{

  justify-self: end;              

  width: 360px;                   

  max-width: 100%;

}



.controls_carrousel{

  display:flex; align-items:center; justify-content:space-between;

  gap:10px; margin-bottom:8px;

}

.controls_carrousel h4{

  margin:0; font-size: .95rem; font-weight: 700; color: var(--ink);

}

.btn_carrousel{

  border:1px solid #dfe7f3; background:#fff; border-radius:10px;

  padding:6px 10px; cursor:pointer;

}

.btn_carrousel:hover{ background:#f6f9ff }



.viewport_carrousel{

  overflow:hidden; width:100%;

}

.track_carrousel{

  display:flex; transition: transform .3s ease;

}



.callout {

    display: flex; 

    align-items: flex-start; 

    gap: 30px; 

}



/* Define el ancho del contenedor de texto en escritorio */

.callout > div:first-child {

    flex: 0 0 35%; 

}



/* Define el ancho del contenedor del carrusel en escritorio */

.wrapper_carrousel {

    flex: 1;

}



/* Ocultar el título de "Marcas" en el carrusel, ya que el principal es "Marcas y Fabricantes" */

.controls_carrousel {

    display: none;

}



.viewport_carrousel {

    width: 100%; 

    overflow: hidden; 

    white-space: nowrap; 

    padding: 10px 0; 

}



.track_carrousel {

    display: flex;

    width: fit-content; 

    animation: scrolling 40s linear infinite; 

    will-change: transform; 

}



.item_carrousel {

    min-width: 180px; 

    height: 100px; 

    margin: 0 15px; 

    flex-shrink: 0; 

    display: inline-flex; 

    justify-content: center;

    align-items: center;

    border: 1px solid #eee; 

}



/* Pausar el movimiento al pasar el ratón */

.viewport_carrousel:hover .track_carrousel {

    animation-play-state: paused;

}



@media (max-width: 600px) {

    

    .callout {

        flex-direction: column; 

        gap: 0; 

    }



    /* Asegura que el texto ocupe todo el ancho y esté arriba */

    .callout > div:first-child {

        width: 100%; 

        padding-bottom: 20px; 

    }



    /* Ajustes para que el carrusel se vea bien en ancho de móvil */

    .item_carrousel {

        min-width: 45vw; 

        margin: 0 8px; 

    }



    .track_carrousel {

        animation: scrolling 50s linear infinite; 

    }

}



@keyframes scrolling {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%); 

    }

}

.contact-page-wrapper {
    max-width: 1000px;
    margin: 30px auto;
    display: flex;
    gap: 30px;
    padding: 30px;
    font-family: 'Inter', 'Open Sans', Arial, sans-serif;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

@media (max-width: 768px) {
    .formulario-cot {
        padding: 0 0 15px 0;
        border-right: none;
        border-bottom: 1px solid #f8f8f8;
    }
}

/* Estilos de Columna Derecha (Detalles) */
.contact-details-panel {
    flex: 1;
    padding: 20px 0 20px 30px;
    border-right: none;
}

@media (max-width: 768px) {
    .contact-details-panel {
        padding: 15px 0;
        border-left: none;
        text-align: center;
        align-items: center;
    }
}

/* Estilos de Título y Campos del Formulario */
.solic {
    font-size: 1.4em;
    font-weight: 700;
    color: #00a4d8;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 3px solid #00a4d8;
}

.form-consulta input[type="text"],
.form-consulta input[type="email"],
.form-consulta select,
.form-consulta textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background-color: #fcfcfc;
    box-sizing: border-box;
    font-size: 1em;
    color: #333333;
    transition: all 0.3s ease;
}

.form-consulta input:focus,
.form-consulta select:focus,
.form-consulta textarea:focus {
    border-color: #00a4d8;
    box-shadow: 0 0 0 0.2rem rgba(0, 164, 216, 0.2);
    outline: none;
}

.form-consulta label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333333;
    font-size: 0.9em;
}

.form-consulta textarea {
    min-height: 100px;
    resize: vertical;
}

.center-content {
    text-align: center;
    margin-top: 25px;
}

.formulario-cot .form-consulta{
  flex: 1 1 520px;        /* crece, encoge, base */
  min-width: 520px;       /* evita que se rompa a 2 líneas */
}

.formulario-cot .card.pad{
  flex: 0 0 360px;        /* columna fija para datos/video */
  min-width: 360px;
}

.formulario-cot .yt{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

@media (max-width: 1100px){
  .formulario-cot{
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .formulario-cot .form-consulta,
  .formulario-cot .center-content,
  .formulario-cot .card.pad{
    min-width: 100%;
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------- */
/* ESTILOS DE BOTONES DINÁMICOS RESTAURADOS */
/* ---------------------------------------------------- */

/* Botones Móviles (WhatsApp y Llamada) */
.btn-whatsapp, .btn-llamada, .btn-forms {
    display: block;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-whatsapp {
    background-color: #25d366;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.btn-whatsapp:hover {
    background-color: #128c7e;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    transform: translateY(-2px);
}

.btn-llamada {
    background-color: #00a4d8; /* Amarillo/naranja */
    color: white;
    box-shadow: 0 4px 15px #07b9ff66;
    display: block;
}

.btn-llamada:hover {
    background-color: #00a4d8;
    box-shadow: 0 6px 20px #07b9ff66;
    transform: translateY(-2px);
}

/* Estilos de Detalles de Contacto */
.contact-title {
    color: #00a4d8;
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: 800;
}

.contact-details-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #333333;
    font-size: 16px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.contact-item:hover {
    color: #004d99;
}

.contact-item:hover .contact-icon {
    color: #00a4d8;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .contact-item {
        justify-content: center;
    }
}

.contact-icon {
    font-size: 24px;
    color: #004d99;
    margin-right: 15px;
    width: 30px;
    text-align: center;
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tarjeta del formulario */
.formulario-cot {
    background: #ffffff;
    border-radius: 15px !important;
    border: 1px solid #e5e5e5 !important;
    padding: 12px 15px !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    align-items: flex-start;
}

.formulario-cot:hover {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

/* Labels */
label.contact {
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 3px;
}

/* Aplica el mismo estilo a cualquier input/select/textarea dentro del modal */
#cotizacion-modal .modal-form input,
#cotizacion-modal .modal-form select,
#cotizacion-modal .modal-form textarea {
  background: #f8f9fc;
  border-radius: 15px;
  border: 1px solid #115da9;
  font-size: 15px;
  color: #333;
  padding: 8px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

#cotizacion-modal .modal-form input::placeholder,
#cotizacion-modal .modal-form textarea::placeholder {
  color: #a2aab7;
}

#cotizacion-modal .modal-form input:hover,
#cotizacion-modal .modal-form select:hover,
#cotizacion-modal .modal-form textarea:hover {
  background: #ffffff;
  border-color: #0b71d0;
  box-shadow: 0 4px 10px rgba(17, 93, 169, 0.18);
  transform: translateY(-1px);
}

#cotizacion-modal .modal-form input:focus,
#cotizacion-modal .modal-form select:focus,
#cotizacion-modal .modal-form textarea:focus {
  outline: none;
  border-color: #0b71d0;
  box-shadow: 0 0 0 2px rgba(11, 113, 208, 0.25);
  background: #ffffff;
}

/* Menos espacio entre campos */
#cotizacion-modal .form-group{
  margin-bottom: 8px; /* prueba 6px–10px */
}

/* Si tuvieras un <h4> arriba del form, también puedes compactarlo */
#cotizacion-modal .modal-form h4{
  margin-bottom: 10px;
}

/* Misma altura visual para inputs y selects del modal */
#cotizacion-modal .modal-form input,
#cotizacion-modal .modal-form select {
  height: 44px;          /* iguala alturas */
  padding: 8px 12px;     /* consistente */
  line-height: 1.2;      /* evita desfaces */
  box-sizing: border-box;
}

/* Textarea: no debe forzar alturas raras */
#cotizacion-modal .modal-form textarea {
  padding: 10px 12px;
  line-height: 1.4;
  box-sizing: border-box;
  resize: vertical; /* opcional */
}
/* Botón Enviar Formulario (Azul Principal) */
.btn-forms {
    background-color: var(--brand-blue);
    color: white;
}
.btn-forms:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(17, 93, 169, 0.3);
    background-color: #0d4a8d;
}

/* Botón WhatsApp (Verde Sólido) */
.btn-mov {
    margin-bottom: 15px;
}
.btn-mov a {
    color: #fff;
    text-decoration: none;
    width: 100%;
}
.btn-mov:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
    background-color: #1ea751;
}

/* Ajuste suave del contenedor en móvil */
@media screen and (max-width: 480px) {
    .formulario-cot {
        border-radius: 12px !important;
        padding: 10px 10px !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    }
}
/* 1. Contenedor Compacto (Nuevo) */
.form-compact-wrapper {
    max-width: 450px;
    margin: 0 auto;
    padding: 15px;
}

  .cta-stack{
    display: flex;
    flex-direction: column;
    gap: 1px;            /* separación vertical */
    align-items: center;  /* centra los botones */
    margin-top: 12px;
  }

  /* opcional: que todos tengan el mismo ancho */
  .cta-stack button{
    width: 100%;
    max-width: 420px;
  }

  .cta-stack .btn-llamada{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.datos_extra ul{

  list-style: none;

}

.btn-llamada,
.btn-llamada:focus,
.btn-llamada:active {
  background: #0ea5e9 !important; 
}

.datos_extra ul li{

  margin-bottom: 7px;

}

/* Card más grande */
.formulario-cot .card.pad{
  flex: 0 0 760px;     /* antes 360px: más ancho */
  min-width: 460px;
  padding: 24px;       /* más “aire” interno */
}

/* (Opcional) que tenga una altura mínima más grande */
.formulario-cot .card.pad{
  min-height: 520px;
}

/* Video más grande dentro de la card */
.formulario-cot .card.pad .yt{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* MÓVIL: formulario arriba y datos extra abajo */
@media (max-width: 768px){
  .formulario-cot{
    display: flex;
    flex-direction: column;   /* apila */
    gap: 16px;
  }

  /* Asegura que los bloques ocupen 100% */
  .formulario-cot .form-left,
  .formulario-cot .form-consulta,
  .formulario-cot .center-content,
  .formulario-cot .card.pad{
    width: 100%;
    min-width: 0 !important;  /* mata los min-width que forzaban columnas */
    flex: 1 1 auto !important;
  }

  /* Evita empujes raros */
  .formulario-cot .center-content{
    margin-top: 14px;
  }
}


.whats-fijo{

  padding: 10px;

  position: fixed;

  background: #25d366;

  z-index: 888;

  bottom: 50px;

  right: 20px;

  border-radius: 50%;

  width: 50px;

  height: 50px;

  text-align: center;

}



.whats-fijo i{

  color: white!important;

  z-index: 999;

  font-size: 30px;

}

footer{

  background: #f7fafc;

  border-top: 2px solid #007bff;

}



footer h4{

  color: #e21b23!important;

  padding-bottom: 8px;

  border-bottom: 2px solid #e21b23;

}



footer p, footer a{

  color: gray!important;

}



footer img{

  width: 70%;

  margin-top: 20px;

}

/* Estilos para el contenedor del carrusel */

.slider-container {

    position: relative;

    width: 100%;

    height: 700px; 

    overflow: hidden;

}



.slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #000000; 

    background-size: contain; 

    background-position: center; 

    background-repeat: no-repeat; 

    opacity: 0;

    transition: opacity 1s ease-in-out;

    z-index: 1;

}



.slide.active {

    opacity: 1;

    z-index: 2;

}



/* Estilos para el contenido dentro de cada slide (texto, botones) */

.slide .container {

     height: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start; /* A la izquierda */

    padding-left: 40px; /* Ajusta el valor según lo que necesites */

    padding-right: 0;

    margin-left: 0 !important;

}



.hero-content {

    max-width: 600px; 

    color: #fff; 

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 

    position: relative; 

    z-index: 3; 

}



.hero-content h1, .hero-content .tagline {

    color: #ffffff; 

}

.hero-content p {

    color: #ffffff;

}

.slider-container {

    position: relative; 

    width: 100%;

    height: 600px; 

    overflow: hidden; 

}



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

   ESTILOS DEL CARRUSEL PRINCIPAL (VERSIÓN FINAL UNIFICADA)

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



.slider-container {

    position: relative;

    width: 100%;

    height: 600px; /* Altura para escritorio */

    overflow: hidden;

}



/* --- Estilos base para CADA slide --- */

.slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0;

    transition: opacity 1s ease-in-out;

    z-index: 1; /* Slides inactivos por debajo */

}



/* --- EL OVERLAY (LA CAPA OSCURA) --- */

.slide::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(11, 31, 59, 0.65); /* Azul oscuro con 65% opacidad */

}



/* --- Slide que está visible --- */

.slide.active {

    opacity: 1;

    z-index: 2; /* Slide activo por encima de los demás */

}



/* --- Contenido de texto dentro del slide --- */

.slide .container {

    height: 100%;

    display: flex;

    align-items: center;

}



/* --- Imágenes y TUS posiciones específicas para ESCRITORIO --- */

.slide-1 {

    background-image: url('ruta/a/tu/imagen-1.jpg');

    background-position: 50% 30%; /* Tu ajuste original */

}



.slide-2 {

    background-image: url('ruta/a/tu/imagen-2.jpg');

    background-position: 50% 25%; /* Tu ajuste original */

}



.slide-3 {

    background-image: url('ruta/a/tu/imagen-3.jpg');

    background-position: 50% 30%; /* Tu ajuste original */

}

/* Tarjeta de Atención Personalizada (versión unificada) */
.personal-attention-card{
  position: absolute;
  right: clamp(36px, 4vw, 56px);
  bottom: clamp(28px, 4vh, 56px);
  z-index: 10;

  width: min(380px, 88vw);
  max-width: 380px;

  padding: 18px 18px 22px;
  border-radius: 22px;
  border: none;

  color: #0f172a;
  text-align: left;

  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: var(--shadow-lg);
}

/* Títulos y texto dentro de la tarjeta */
.personal-attention-card h3{
  margin: 0 0 8px;
  font-size: 1.06rem;
  font-weight: 800;
  color: #0a2a4d;
}
.personal-attention-card p{
  margin: 6px 0 10px;
  font-size: .94rem;
  line-height: 1.46;
  color: #294268;
}
.personal-attention-card .response-time{
  margin: 8px 0 0;
  font-size: .9rem;
  color: #26496b;
}

/* Móvil / tablet: la tarjeta pasa debajo del hero */
@media (max-width:1100px){
  .personal-attention-card{
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 18px 16px 0;
    border-radius: 12px;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: 0 10px 30px rgba(2,8,23,.1);
  }
}
@media (max-width:640px){
  .personal-attention-card{
    display: none;
    padding: 16px;
    margin: 10px 16px 0;
  }
  .personal-attention-card h3{ font-size: 1rem; }
}





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

   ESTILOS PARA MÓVILES (TABLETS Y CELULARES)

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



@media (max-width: 768px) {





    /* 2. Ajustamos la altura del carrusel */

    .slider-container {

        height: 80vh; /* Ocupará el 80% de la altura de la pantalla */

    }



    /* 3. Ajustamos el texto */

    .hero-content {

        text-align: center;

    }



    .hero-content h1 {

        font-size: 2.2rem;

    }

    

    /* 4. AJUSTE DE IMÁGENES PARA CADA SLIDE EN MÓVIL */

    /* Aquí puedes poner posiciones específicas para móvil si lo necesitas */

    .slide-1, .slide-2, .slide-3 {

        background-position: center center; /* Centrado general para móvil */

    }

}

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    display: none; 

    justify-content: center;

    align-items: center;

    z-index: 1000;

    padding: 1rem;

}



/* Clase que se añade con JavaScript para mostrar el modal */

.modal-overlay.active {

    display: flex;

}



/* El contenedor blanco del formulario */

.modal-content {

    background-color: #fff;

    padding: 2rem;

    border-radius: 8px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.2);

    position: relative;

    width: 100%;

    max-width: 500px;

    max-height: 90vh;

    overflow-y: auto; /* Permite scroll si el contenido es muy largo */

}



/* El botón para cerrar (la 'X') */

.close-button {

    position: absolute;

    top: 10px;

    right: 15px;

    font-size: 2rem;

    color: #888;

    cursor: pointer;

    line-height: 1;

}

.close-button:hover {

    color: #333;

}



/* Contenido del producto en el modal */

.modal-product-header {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    margin-bottom: 1.5rem;

    border-bottom: 1px solid #eee;

    padding-bottom: 1.5rem;

}

#modal-product-image {

    width: 200px; 

    height: 200px;

    object-fit: cover;

    border-radius: 6px; 

    border: none;       

}

#modal-product-title {

    margin: 0;

    font-size: 1.5rem;

    color: #1a3a6e;

}



/* Estilos del formulario dentro del modal */

.modal-form h4 {

    font-size: 1.5rem;

    text-align: center;

    color: #2980b9;

    margin-top: 0;

    margin-bottom: 1rem;

}

.modal-form .form-group {

    margin-bottom: 1rem;

}

.modal-form input,

.modal-form select,

.modal-form textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #ccc;

    border-radius: 5px;

    box-sizing: border-box; 

    font-size: 1rem;

}

.modal-form textarea {

    resize: vertical;

    min-height: 100px;

}

.modal-form .form-buttons {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    margin-top: 1.5rem;

}

.modal-form button {

    padding: 12px;

    border: none;

    border-radius: 5px;

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

    transition: opacity 0.2s;

}

.modal-form button:hover {

    opacity: 0.9;

}

.modal-form .btn-submit {

    background-color: #0056b3;

    color: white;

}

.modal-form .btn-whatsapp {

    background-color: #25D366;

    color: white;

}

.category-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

    gap: 1.5rem;

    padding-top: 1rem;

}



/* (Puedes dejar los demás estilos de .category-item, h3, etc., como estaban) */

.category-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    text-decoration: none;

    color: #333;

}

.category-item img {

    width: 60px;

    height: 60px;

    margin-bottom: 0.5rem;

    background-color: #f0f0f0;

    border-radius: 8px;

}

.category-item h3 {

    font-size: 0.9rem;

    margin: 0;

    font-weight: 500;

}





/* 2. ESTILOS QUE SE ACTIVAN SOLO EN CELULAR (RESPONSIVO) 📱 */

/* La media query actúa como un "SI": SI la pantalla mide 768px o menos, APLICA esto. */

@media (max-width: 768px) {

    .category-grid {

        /* Limitamos la altura solo en pantallas chicas */

        max-height: 400px; 

        

        /* Añadimos el scroll solo en pantallas chicas */

        overflow-y: auto;



        /* Espacio para la barra de scroll */

        padding-right: 10px;

    }

}

@media (min-width: 769px) {

  

  /* Hacemos más ancho el contenedor del modal de categorías */

  #categoriesModal .modal-content {

    max-width: 800px; /* <-- Puedes ajustar este valor a tu gusto */

  }



}

/* --- AJUSTES RESPONSIVOS PARA EL TEXTO DEL FORMULARIO --- */



/* Aplicar solo en pantallas de 768px o menos (celulares) */

@media (max-width: 768px) {



  /* 1. Cambiamos el encabezado a un formato de columna */

  .modal-product-header {

    flex-direction: column; /* Apila los elementos verticalmente */

  }



  /* 2. Centramos y ajustamos el título del producto */

  #modal-product-title {

    text-align: center;   /* Centra el texto */

    font-size: 1.2rem;    /* Hacemos la letra un poco más pequeña */

    margin-top: 1rem;     /* Damos un espacio entre la imagen y el título */

  }



  /* 3. (Opcional) Ajustamos el título principal "¡Solicita más información!" */

  .modal-form h4 {

      font-size: 1.4rem;

  }

}

.features-section .card {
  position: relative;
  border: 3px solid transparent;
  border-radius: 16px;
  padding: 25px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #105EA9, #E21B23) border-box;
  overflow: hidden; /* importante para que los blobs no se salgan */
}

/* efectos de color dentro del card */
.features-section .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(16,94,169,0.25), transparent 70%),
    radial-gradient(circle at 80% 80%, rgba(226,27,35,0.25), transparent 70%);
  filter: blur(45px); /* más difuminado */
  z-index: 0;
}

/* contenido siempre encima del efecto */
.features-section .card * {
  position: relative;
  z-index: 1;
}


/* ============================
   BLOQUE: contenedor "Datos"
   ============================ */
.datos_extra{
  /* Espaciado interno del bloque */
  padding: 18px 18px 14px;

  /* Bordes redondeados */
  border-radius: 16px;

  /* Borde sutil (azul muy tenue) */
  border: 1px solid rgba(17, 93, 169, 0.12);

  /* Fondo con degradado suave para dar profundidad */
  background: linear-gradient(
    180deg,
    rgba(17, 93, 169, 0.06),
    rgba(255,255,255,0)
  );
}

/* Título del bloque (h3) */
.datos_extra h3{
  margin: 0 0 14px;        /* separación inferior */
  font-size: 1.05rem;      /* tamaño */
  font-weight: 800;        /* grosor */
  color: #0b2b4a;          /* color texto */
  letter-spacing: 0.2px;   /* leve espaciado */
}


/* ============================
   LISTA: estructura general
   ============================ */
.datos_list{
  list-style: none;        /* quita viñetas */
  padding: 0;              /* quita padding del UL */
  margin: 0;               /* quita margen del UL */

  /* Usamos grid para separar cada item con espacio */
  display: grid;
  gap: 10px;               /* espacio entre items */
}


/* ============================
   ITEM: cada fila (tel/email/horario)
   ============================ */
.dato_item{
  /* Layout horizontal: icono a la izquierda + texto a la derecha */
  display: flex;
  gap: 12px;
  align-items: center;

  /* Caja del item */
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;

  /* Sombra ligera para efecto card */
  box-shadow: 0 6px 14px rgba(0,0,0,0.04);

  /* Animaciones suaves en hover */
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Hover del item: levanta un poquito y resalta borde/sombra */
.dato_item:hover{
  transform: translateY(-1px);
  border-color: rgba(17, 93, 169, 0.20);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}


/* ============================
   ICONO: cuadrito con el icono
   ============================ */
.dato_icon{
  /* Tamaño fijo del "badge" */
  width: 42px;
  height: 42px;

  /* Centra el icono dentro */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Bordes redondeados del badge */
  border-radius: 12px;

  /* Fondo azul tenue y color del icono */
  background: rgba(17, 93, 169, 0.10);
  color: #115da9;

  /* Evita que el icono se estire/encoga */
  flex: 0 0 42px;
}


/* ============================
   TEXTO: label + valor
   ============================ */
.dato_text{
  /* Apila label y valor en columna */
  display: grid;
  gap: 2px;
}

/* Texto pequeño (ej. "Teléfono") */
.dato_label{
  font-size: 0.78rem;
  color: rgba(17, 20, 30, 0.62);
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Valor principal (tel/email/horario) */
.dato_value{
  font-size: 0.98rem;
  color: #0b2b4a;
  font-weight: 700;
  text-decoration: none; /* por si es link */
}

/* Efecto hover SOLO para links de valor (tel/mail) */
a.dato_value:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================
   BOTONES: acciones (Llamar / Correo)
   ============================ */
.datos_actions{
  /* Dos columnas iguales */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;

  /* Separación superior respecto a la lista */
  margin-top: 14px;
}

/* Estilo base de los botones */
.datos_btn{
  /* Centrado de icono + texto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Caja del botón */
  padding: 11px 12px;
  border-radius: 12px;

  /* Botón "outline" (blanco con borde) */
  border: 1px solid rgba(17, 93, 169, 0.18);
  background: #fff;

  /* Colores y texto */
  color: #115da9;
  font-weight: 800;
  text-decoration: none;

  /* Animación suave */
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

/* Hover del botón: pequeño levantamiento + sombra */
.datos_btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

/* Botón principal (relleno azul) */
.datos_btn--primary{
  background: #115da9;
  color: #fff;
  border-color: transparent;
}

/* Hover del botón principal: azul más oscuro */
.datos_btn--primary:hover{
  background: #0d4a8d;
}


/* ============================
   RESPONSIVE: móvil
   ============================ */
@media (max-width: 480px){
  /* En móvil, botones en una sola columna */
  .datos_actions{
    grid-template-columns: 1fr;
  }
}

.center-content { display: flex !important; }
.btn-movil { display: inline-flex !important; }


/* Botón primario genérico */
.btn-prim {
  background-color: #105EA9;
  color: #fff !important;
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  box-shadow: 0 8px 20px rgba(2,8,23,.06);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-prim:hover {
  transform: translateY(-1px);
  background-color: #E21B23;
  box-shadow: 0 10px 24px rgba(2,8,23,.12);
}

/* Botón “Catálogo” (secundario) */
.btn-catal{
  margin-top: 0;
  margin-bottom: 10px;
  background: transparent !important;
  border: 2px solid #5aa0ff !important;
}
.btn-catal:hover{
  background: #5aa0ff !important;
  border: 2px solid #5aa0ff !important;
}

#openCategoriesMod {
  padding: 14px 34px;
  display: inline-block;
  border-radius: 50px;
  background: linear-gradient(90deg, #399af5, #fd6464);
  background-size: 200% auto;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.4s ease;
  border-color: aquamarine;
}

#openCategoriesMod:hover {
  background-position: right center;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.18);
}

#openCategoriesMod:active {
  transform: scale(0.96);
}


/* =========================
   DESTACADOS CARRUSEL PRO
========================= */
#destacados.destacados-slider {
  position: relative;
  overflow: visible;
}

#destacados .destacados-head {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

#destacados .destacados-head h2 {
  margin-bottom: 8px;
}

#destacados .destacados-nav {
  position: absolute;
  top: -6px;
  right: -24px;
  z-index: 10;

  display: flex;
  align-items: center;
  gap: 12px;
}

#destacados .dest-nav span {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#destacados .dest-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(12, 33, 58, 0.14);
}

#destacados .dest-nav:active {
  transform: scale(.96);
}

#destacados .dest-nav[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 6px 16px rgba(12, 33, 58, 0.06);
}

#destacados .destacados-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 8px 2px 14px;
}

#destacados .destacados-track {
  display: flex;
  gap: 22px;
  will-change: transform;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

#destacados .dest-card {
  flex: 0 0 calc(25% - 16.5px);
  min-width: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(17, 56, 97, 0.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 14px 35px rgba(12, 33, 58, 0.08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

#destacados .dest-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px rgba(12, 33, 58, 0.14);
  border-color: rgba(14, 119, 171, 0.18);
}

#destacados .dest-card .img {
  background: linear-gradient(180deg, #f6fbff 0%, #edf5fb 100%);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

#destacados .dest-card .img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

#destacados .dest-card:hover .img img {
  transform: scale(1.04);
}

#destacados .dest-card h3 {
  font-size: 1.08rem;
  line-height: 1.35;
  min-height: 58px;
  margin: 0 0 16px;
  color: #0c213a;
  text-align: center;
}

#destacados .dest-card .act {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#destacados .dest-card .btn {
  flex: 1 1 auto;
  justify-content: center;
}

#destacados .destacados-viewport::before,
#destacados .destacados-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 3;
  pointer-events: none;
}

#destacados .destacados-viewport::before {
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(236, 244, 252, 0.96) 0%,
    rgba(236, 244, 252, 0.72) 35%,
    rgba(236, 244, 252, 0) 100%
  );
}

#destacados .destacados-viewport::after {
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(236, 244, 252, 0.96) 0%,
    rgba(236, 244, 252, 0.72) 35%,
    rgba(236, 244, 252, 0) 100%
  );
}

/* tablet */
@media (max-width: 1024px) {
  #destacados .dest-card {
    flex: 0 0 calc(50% - 11px);
  }
}

/* mobile */
@media (max-width: 640px) {
  #destacados .destacados-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #destacados .destacados-nav {
    margin-top: 6px;
  }

  #destacados .dest-card {
    flex: 0 0 100%;
  }

  #destacados.destacados-slider::before,
  #destacados.destacados-slider::after {
    display: none;
  }
}

/* =========================
   FLECHAS PREMIUM / PRO
========================= */

#destacados .dest-nav {
  --size: 56px;

  position: relative;
  width: var(--size);
  height: var(--size);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(240,247,255,0.78) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  color: #0c213a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;

  box-shadow:
    0 10px 30px rgba(12, 33, 58, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(12, 33, 58, 0.05);

  transition:
    transform 0.32s cubic-bezier(.22, .61, .36, 1),
    box-shadow 0.32s cubic-bezier(.22, .61, .36, 1),
    border-color 0.32s ease,
    background 0.32s ease;
}

/* capa de brillo ambiental */
#destacados .dest-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 24%, transparent 48%),
    linear-gradient(135deg, rgba(18,124,171,0.10), rgba(255,255,255,0) 55%);
  opacity: 0.9;
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}

/* barrido brillante en hover */
#destacados .dest-nav::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -40%;
  width: 65%;
  height: 300%;
  transform: rotate(24deg) translateX(-160%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.10) 20%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0.10) 80%,
    transparent 100%
  );
  transition: transform 0.75s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

#destacados .dest-nav span {
  position: relative;
  z-index: 2;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.32s cubic-bezier(.22, .61, .36, 1),
    color 0.32s ease;
}

/* HOVER PRO */
#destacados .dest-nav:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(18, 124, 171, 0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(230,242,252,0.92) 100%);
  box-shadow:
    0 18px 40px rgba(12, 33, 58, 0.16),
    0 0 0 1px rgba(18, 124, 171, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(12, 33, 58, 0.05);
}

#destacados .dest-nav:hover::before {
  opacity: 1;
  transform: scale(1.04);
}

#destacados .dest-nav:hover::after {
  transform: rotate(24deg) translateX(320%);
}

#destacados .dest-nav.prev:hover span {
  transform: translateX(-2px) scale(1.08);
}

#destacados .dest-nav.next:hover span {
  transform: translateX(2px) scale(1.08);
}

/* ACTIVE / CLICK */
#destacados .dest-nav:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow:
    0 10px 20px rgba(12, 33, 58, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

/* estado disabled, por si luego lo vuelves a usar */
#destacados .dest-nav[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    0 8px 18px rgba(12, 33, 58, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

#destacados .dest-nav[disabled]::after {
  display: none;
}

/* mobile */
@media (max-width: 640px) {
  #destacados .destacados-nav {
    gap: 10px;
  }

  #destacados .dest-nav {
    --size: 50px;
    border-radius: 16px;
  }

  #destacados .dest-nav span {
    font-size: 16px;
  }

    #destacados .destacados-nav {
    display: none;
  }

  #destacados .destacados-viewport::before,
  #destacados .destacados-viewport::after {
    display: none;
  }
}

/* base botones */
.card .act .btn {
  border-radius: 14px;
  font-weight: 500;
  padding: 10px 18px;
  font-size: 14px;
  transition: all .28s cubic-bezier(.22,.61,.36,1);
  position: relative;
  overflow: hidden;
}

/* DETALLES */
.card .act .btn:not(.primary) {
  background: #fff;
  border: 1px solid #dbe4ee;
  color: #2b3b4b;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.03),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.card .act .btn:not(.primary):hover {

  border-color: #b9c9db;

  transform: translateY(-2px);

  box-shadow:
    0 10px 20px rgba(0,0,0,0.06),
    0 0 0 1px rgba(180,200,220,.15);
}

/* COTIZAR */
.card .act .btn.primary {

  background: linear-gradient(
    180deg,
    #ff2b2b 0%,
    #e71b23 100%
  );

  border: none;
  color: #fff;

  box-shadow:
    0 8px 18px rgba(231,27,35,.25),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.card .act .btn.primary:hover {

  transform: translateY(-3px);

  box-shadow:
    0 14px 28px rgba(231,27,35,.35),
    0 0 0 1px rgba(231,27,35,.12);
}

.card .act .btn.primary:active {

  transform: scale(.97);

  box-shadow:
    0 6px 12px rgba(231,27,35,.2);
}

.btn.primary::after{

  content:"";

  position:absolute;

  top:-100%;

  left:-40%;

  width:50%;

  height:300%;

  transform: rotate(25deg);

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
  );

  transition: transform .6s ease;
}

.btn.primary:hover::after{

  transform: rotate(25deg) translateX(280%);
}

#destacados .dest-card .img {
  height: 240px;
}

.hero-content h1,
.hero-content h2{
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
  max-width: 720px;
  color: #ffffff;
}

/* Desktop */
.slide-1 {
  background-image: url('./img/banners/BANNER1.webp');
}

.slide-2 {
  background-image: url('./img/banners/BANNER2.webp');
}

.slide-3 {
  background-image: url('./img/banners/BANNERS3.webp');
}

.slider-container .slide {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}


/* Mobile */
@media (max-width: 768px) {
  .slide-1 {
    background-image: url('./img/banners/BANNER1-MOBILE.webp');
  }

  .slide-2 {
    background-image: url('./img/banners/BANNER2-MOBILE.webp');
  }

  .slide-3 {
    background-image: url('./img/banners/BANNER3-MOBILE.webp');
  }

  .slider-container .slide {
    background-position: center center;
  }
}

@media (max-width:768px){

.hero-content p{
  display:none;
}

.hero-content .advantages{
  display:none;
}

}

@media (max-width: 640px) {
  #destacados .dest-card {
    padding: 16px;
    border-radius: 20px;
  }

  #destacados .dest-card .img{
  height:260px;
  padding:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}

#destacados .dest-card .img img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(0.9);
}
  #destacados .dest-card h3 {
    min-height: auto;
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 12px 0 16px;
    text-align: center;
  }

  #destacados .dest-card .act {
    gap: 10px;
  }

  #destacados .dest-card .btn {
    min-height: 46px;
  }
}

/* =========================
   CATEGORIAS
========================= */
#categorias.categorias-slider {
  position: relative;
}

#categorias .cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

#categorias .cat {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(17, 56, 97, 0.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 14px 35px rgba(12, 33, 58, 0.08);
  transition:
    transform .5s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s ease,
    opacity .35s ease,
    filter .35s ease;
  transform-origin: center center;
}

#categorias .cat img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
}

#categorias .cat b {
  display: block;
  font-size: 1.08rem;
  color: #0c213a;
  margin-bottom: 8px;
}

#categorias .cat a {
  color: #0f6ea8;
  text-decoration: none;
  font-weight: 600;
}

@media (max-width: 768px) {
 
   #categorias .cats-viewport {
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    padding: 6px 2px 14px;
  }

  #categorias .cats {
    display: flex;
    gap: 16px;
    will-change: transform;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
  }

  #categorias .cat {
    flex: 0 0 86%;
    min-width: 86%;
    border-radius: 22px;
    padding: 18px 16px 16px;
    opacity: .72;
    transform: scale(.94) translateX(0) rotateY(0deg);
    filter: saturate(.92);
  }

  #categorias .cat img {
    height: 170px;
  }

  #categorias .cat.is-active {
    opacity: 1;
    transform: scale(1) translateX(0);
    box-shadow: 0 18px 40px rgba(12, 33, 58, 0.14);
    filter: saturate(1);
  }

  #categorias .cat.is-prev {
    transform: scale(.94) translateX(-8px) rotateY(8deg);
  }

  #categorias .cat.is-next {
    transform: scale(.94) translateX(8px) rotateY(-8deg);
  }

  #categorias .cat {
    position: relative;
    overflow: hidden;
  }

  #categorias .cat::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(
      90deg,
      rgba(255, 43, 43, 0.35) 0%,
      rgba(231, 27, 35, 0.75) 55%,
      rgba(231, 27, 35, 1) 100%
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 2;
    border-radius: 999px;
    pointer-events: none;
  }

  #categorias .cat.is-active::before {
    opacity: 1;
    animation: categoriasProgress 3.2s linear forwards;
  }

  @keyframes categoriasProgress {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

    html,
  body {
    overflow-x: hidden;
  }

  #categorias.categorias-slider {
    overflow: hidden;
  }

  #categorias .cats-viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
  }

  #categorias .cats {
    display: flex;
    gap: 16px;
    width: 100%;
    will-change: transform;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
  }

  #categorias .cat {
    flex: 0 0 86%;
    min-width: 86%;
    max-width: 86%;
    box-sizing: border-box;
  }
}