/* Solo tweaks mínimos, todo lo demás con Tailwind */

/* Header: subrayado animado en links */
.nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #1a202c;
    transition: width 0.25s cubic-bezier(0.4,0,0.2,1), background 0.25s cubic-bezier(0.4,0,0.2,1);
    margin: 0 auto;
  }
  .nav-link:hover::after, .nav-link:focus::after {
    width: 100%;
    background: #34d399;
  }
  
  /* Header: transición de color texto */
  #main-header {
    background: transparent;
  }
  #main-header.scrolled {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
  #main-header.scrolled .nav-link,
  #main-header.scrolled #logo,
  #main-header.scrolled #lang-select {
    color: #222 !important;
    border-color: #222 !important;
  }
  #main-header .nav-link,
  #main-header #logo,
  #main-header #lang-select {
    color: #fff;
    border-color: #fff;
    transition: color 0.25s, border-color 0.25s;
  }
  #main-header .nav-link:hover, #main-header .nav-link:focus {
    color: #34d399 !important;
  }
  #main-header #lang-select {
    transition: color 0.25s, border-color 0.25s, background 0.25s;
  }
  #main-header #lang-select:hover, #main-header #lang-select:focus {
    color: #34d399 !important;
    border-color: #34d399 !important;
  }
  #main-header.scrolled .nav-link::after {
    background: #1a202c;
  }
  #main-header.scrolled .nav-link:hover::after, #main-header.scrolled .nav-link:focus::after {
    background: #34d399;
  }
  
  /* Carrusel: oculta imágenes no activas */
  /* Elimino reglas conflictivas del carrusel */
  /* .carousel-img { display: none; } */
  /* .carousel-img.active { display: block; } */
  
  /* Carrusel: transición y blur para imágenes adyacentes */
/* .carousel-img {
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1), filter 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
} */
  
  /* Formulario: label flotante para navegadores sin peer */
  .form-group input:focus + label,
  .form-group input:not(:placeholder-shown) + label,
  .form-group textarea:focus + label,
  .form-group textarea:not(:placeholder-shown) + label {
    top: -0.75rem !important;
    left: 1rem !important;
    font-size: 0.85rem !important;
    color: #1a202c !important;
    background: #fff !important;
    padding: 0 0.3rem;
    z-index: 2;
    transition: all 0.3s;
  }

  /* Efecto slide-up en la imagen de fondo de la tarjeta de producto */
  #productos .group:hover .absolute.inset-0 {
    opacity: 0.8 !important;
    transform: translateY(-30%) scale(1.05);
  }
  #productos .absolute.inset-0 {
    transition: opacity 0.5s, transform 0.5s cubic-bezier(0.4,0,0.2,1);
    opacity: 0;
    transform: translateY(20%) scale(1);
  }

  /* Slide-up para productos: la imagen sale desde abajo y cubre el contenido */
  .product-bg {
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0; right: 0; bottom: -100%; top: 100%;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
    z-index: 20;
  }
  .group:hover .product-bg {
    top: 0; bottom: 0;
    opacity: 1;
  }

  /* Scroll reveal */
  [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
  }
  .reveal-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Botón enviar y focus */
  button[type="submit"] {
    background: #1a202c !important;
    color: #fff !important;
    border: none;
    transition: background 0.25s, color 0.25s;
  }
  button[type="submit"]:hover, button[type="submit"]:focus {
    background: #34d399 !important;
    color: #1a202c !important;
  }

  /* Iconos */
  .text-yellow-500, .peer-focus\:text-yellow-500, .focus\:ring-yellow-400, .bg-yellow-400, .hover\:bg-yellow-500, .focus\:ring-2, .focus\:ring-yellow-400 {
    color: #1a202c !important;
    background: #1a202c !important;
    border-color: #1a202c !important;
    box-shadow: 0 0 0 2px #1a202c !important;
  }

  /* KPI símbolo + */
  .kpi-value .text-yellow-500 {
    color: #1a202c !important;
  }

  .form-group textarea {
    background: #fff !important;
    color: #1a202c !important;
  }

  .form-group label {
    background: #fff !important;
    color: #1a202c !important;
  }

  .form-group input {
    background: #fff !important;
    color: #1a202c !important;
  }

  /* Centrado vertical del placeholder en input y textarea */
  .form-group input::placeholder,
  .form-group textarea::placeholder {
    color: #b0b0b0;
    opacity: 1;
    text-align: left;
    vertical-align: middle;
  }
  .form-group input,
  .form-group textarea {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    box-sizing: border-box;
  }

  /* Soluciones: aseguro que el background image sea visible y adaptable */
  #soluciones {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative;
    min-height: 600px;
  }
  
  /* Asegurar que la imagen de background se cargue correctamente */
  #soluciones::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://res.cloudinary.com/ddbj2yp5y/image/upload/v1748453666/vista-aerea-del-buque-de-carga-y-del-contenedor-de-carga-en-el-puerto_wfgati.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
  }
  
  /* Overlay adicional para mejorar legibilidad del texto */
  #soluciones::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
  }
  
  /* Asegurar que las tarjetas de soluciones estén por encima del overlay */
  #soluciones .relative.z-20 {
    position: relative;
    z-index: 20;
  }
  
  /* Mejorar la apariencia de las tarjetas de soluciones */
  #soluciones .bg-white {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
  }
  
  /* Hover effect para las tarjetas de soluciones */
  #soluciones .bg-white:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  }
  
  /* Asegurar que los iconos y texto sean legibles */
  #soluciones .bg-white svg {
    color: #1a202c !important;
    fill: #1a202c !important;
    background: none !important;
    border: 2.5px solid #34d399;
    border-radius: 50%;
    padding: 6px;
    box-sizing: content-box;
    transition: border 0.3s;
  }
  
  #soluciones .bg-white h3 {
    color: #1a202c !important;
  }
  
  #soluciones .bg-white p {
    color: #4a5568 !important;
  }

  /* Productos: configuración base para el efecto cajón */
  #productos .group {
    overflow: visible !important;
    position: relative;
  }
  
  /* Product flyout - imagen que aparece arriba */
  .product-flyout {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, 40%) scale(0.95);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.5s cubic-bezier(0.4,0,0.2,1);
    z-index: 30;
    pointer-events: none;
  }
  .group:hover .product-flyout {
    transform: translate(-50%, -30%) scale(1.05);
    opacity: 1;
  }
  .product-flyout img {
    width: 220px;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    background: #fff;
  }
  
  /* Ajuste específico para la imagen de plásticos de ingeniería */
  .product-flyout img[src*="pl-ingenieria"] {
    height: 140px;
    object-fit: cover;
  }

  /* Partners hover effect */
  .grid .bg-white.rounded-lg.shadow {
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  .grid .bg-white.rounded-lg.shadow:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  }

  #contacto .bg-white {
    background: #f3f4f6 !important;
  }

  /* Hover sobre dirección en contacto */
  #contacto .bg-white .flex.items-center.gap-2:hover span {
    color: #34d399 !important;
    transition: color 0.25s;
  }
  #contacto .bg-white .flex.items-center.gap-2:hover svg {
    color: #34d399 !important;
    transition: color 0.25s;
  }

  /* Configuración del grid de productos */
  #productos .grid {
    margin-top: 3.5rem; /* mt-14 */
  }
  @media (min-width: 640px) {
    #productos .grid {
      margin-top: 4.5rem; /* mt-18 */
    }
  }
  
  /* Efecto cajón: mover tarjeta hacia arriba */
  .product-move-up {
    transform: translateY(-180px) !important;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), z-index 0.2s;
  }

  /* Efecto cajón: mover título hacia arriba */
  #productos-title.productos-title-move-up {
    transform: translateY(-80px) !important;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  #productos-title.productos-title-move-up-mas {
    transform: translateY(-140px) !important;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
  }
  
  /* Transiciones base para productos */
  #productos-title {
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  }
  #productos .grid article {
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), z-index 0.2s;
  }

  /* Carrusel: quitar fondo amarillo de las imágenes en todos los tamaños */
  .carousel-item {
    background: none !important;
  }

/* Toast System */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  font-weight: 500;
  font-size: 14px;
  max-width: 400px;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(10px);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.hide {
  transform: translateX(100%);
  opacity: 0;
}

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

/* Toast Types */
.toast-loading {
  background: #1f2937;
  color: #f9fafb;
  border-left: 4px solid #3b82f6;
}

.toast-success {
  background: #065f46;
  color: #f9fafb;
  border-left: 4px solid #10b981;
}

.toast-error {
  background: #7f1d1d;
  color: #f9fafb;
  border-left: 4px solid #ef4444;
}

body {
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="40" height="40" fill="%23d1fae5" fill-opacity="0.07"/><circle cx="20" cy="20" r="10" fill="%233b82f6" fill-opacity="0.03"/></svg>');
  background-repeat: repeat;
  font-family: 'Open Sans', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: #1a202c;
  font-weight: 700;
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  letter-spacing: 0.01em;
}

.text-gray-700, .text-gray-900 {
  color: #222 !important;
}

a, .nav-link {
  color: #3b82f6;
  transition: color 0.2s;
}

a:hover, .nav-link:hover {
  color: #34d399 !important;
}

/* Eliminar desenfoque en imágenes de productos y partners al hacer hover */
#productos .group:hover .product-flyout img,
#partners .bg-white:hover img {
  transform: scale(1.06);
  filter: none;
}

/* Pulse/sombra en botones al hacer click */
button:active {
  box-shadow: 0 0 0 6px #34d39933;
  transform: scale(0.97);
}

/* Tipografía: fuente secundaria para títulos y neutra para cuerpo */
body {
  font-family: 'Open Sans', Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Tamaño de títulos principales */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Espaciado generoso entre secciones y elementos */
section { margin-bottom: 4rem; }
@media (max-width: 640px) { section { margin-bottom: 2.5rem; } }

/* Tarjetas con fondo blanco, sombra y borde suave */
.card, .kpi-card, #partners .bg-white {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(52, 211, 153, 0.08);
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.2s, border 0.2s;
}
.card:hover, .kpi-card:hover, #partners .bg-white:hover {
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.12);
  border: 1px solid #3b82f6;
}

/* Iconos de color de marca */
svg, .icon {
  color: #3b82f6;
  fill: #3b82f6;
  transition: color 0.2s, fill 0.2s;
}
.card:hover svg, .kpi-card:hover svg, #partners .bg-white:hover svg {
  color: #34d399;
  fill: #34d399;
}

/* Footer con fondo azul */
footer {
  background: #1a202c;
  color: #fff;
  padding: 2rem 0;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* Separadores decorativos centrados y más cortos */
hr.section-separator {
  border: none;
  border-top: 2px solid #1a202c;
  margin: 2.5rem auto;
  width: 80%;
  max-width: 700px;
  opacity: 0.7;
  display: block;
}

/* División SVG con gradiente y transición */
.section-divider path {
  transition: fill 0.5s cubic-bezier(0.4,0,0.2,1);
  fill: url(#section-divider-gradient);
}

/* Definición del gradiente para los divisores SVG (agregar en el SVG) */
/*
<defs>
  <linearGradient id="section-divider-gradient" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="#1a202c"/>
    <stop offset="100%" stop-color="#34d399"/>
  </linearGradient>
</defs>
*/

/* KPI números con gradiente y transición más fluida */
.kpi-value .kpi-num, .kpi-value .text-gray-900 {
  background: linear-gradient(135deg, #1a202c 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  letter-spacing: 1px;
  transition: background 0.5s cubic-bezier(0.4,0,0.2,1), -webkit-background-clip 0.5s cubic-bezier(0.4,0,0.2,1);
}
.kpi-card:hover .kpi-value .kpi-num, .kpi-card:hover .kpi-value .text-gray-900 {
  background: linear-gradient(135deg, #34d399 0%, #1a202c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Partners: solo las demás tarjetas se ven borrosas al hacer hover */
#partners .partner-card {
  transition: filter 0.3s, opacity 0.3s;
  filter: none;
  opacity: 1;
}
#partners .partner-card.blur {
  filter: blur(2.5px) grayscale(0.3) brightness(0.95);
  opacity: 0.7;
}
#partners .partner-card.active {
  filter: none !important;
  opacity: 1 !important;
}

/* Texto blanco en soluciones, hero y footer */
#soluciones, #soluciones *,
#hero, #hero *,
footer, footer * {
  color: #fff !important;
}

/* Focus visible */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Contraste alto para textos */
.text-gray-700, .text-gray-900, p, li {
  color: #222 !important;
}

/* Sticky nav en mobile */
@media (max-width: 768px) {
  #main-header {
    position: sticky;
    top: 0;
    background: rgba(26,32,44,0.95) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  }
}

/* Padding y tamaño de fuente en mobile */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }
  section { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Imágenes adaptativas */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Favicon y meta tags sugeridos (agregar en el head de index.html) */
/* <link rel="icon" href="/favicon.ico" type="image/x-icon"> */
/* <meta property="og:title" content="PoPlastics Srl"> */
/* <meta property="og:description" content="Conectando tu industria con la mejor materia prima plástica"> */
/* <meta property="og:image" content="URL_DE_TU_IMAGEN"> */

/* Gradiente más visible en títulos de tarjetas de productos al hacer hover */
#productos .group:hover h3 {
  background: linear-gradient(90deg, #1a202c 0%, #3b82f6 50%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  transition: background 0.5s cubic-bezier(0.4,0,0.2,1), color 0.5s cubic-bezier(0.4,0,0.2,1);
  filter: drop-shadow(0 2px 8px #34d39955);
}
#productos .group h3 {
  transition: background 0.5s cubic-bezier(0.4,0,0.2,1), color 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Animación fluida para el divisor y el título de productos al levantar tarjetas 4, 5 y 6 */
#productos-divider {
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
#productos-divider.divisor-move-up {
  transform: translateY(-60px);
}

/* Agrandar imagen de la sección de KPIs */
.kpi-img-container img {
  max-width: 350px;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .kpi-img-container img {
    max-width: 480px;
  }
}

/* Gradiente para el texto PoPlastics en Nosotros */
.gradient-kpi {
  background: linear-gradient(135deg, #1a202c 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Rediseño de la sección de KPIs en 3 divisiones con imagen de fondo */
.kpis-section-gradient {
  display: flex;
  gap: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  margin-bottom: 3rem;
}
.kpi-bg-col {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 420px;
  overflow: hidden;
  transition: box-shadow 0.3s, border 0.3s;
  border: 2px solid transparent;
  background: #d1fae5;
}
.kpi-bg-col:not(:last-child) {
  border-right: 1px solid #e5e7eb;
}
.kpi-bg-col .kpi-card {
  position: relative;
  z-index: 2;
  margin-bottom: 2.5rem;
}
.kpi-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  z-index: 1;
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.kpi-bg-col:hover .kpi-bg-img {
  opacity: 0.8;
  transform: scale(1.08);
}
.kpi-bg-col:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 32px rgba(59,130,246,0.10);
}

/* Footer texto blanco */
footer, footer * {
  color: #fff !important;
}

/* Contacto Rediseñado */
.contact-section {
  background: linear-gradient(180deg, #fff 60%, #f3fdf9 100%);
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}
.contact-container {
  background: rgba(255,255,255,0.95);
  border-radius: 1.5rem;
  box-shadow: 0 8px 32px rgba(59,130,246,0.08);
  border: 1.5px solid #3b82f6;
  max-width: 480px;
  margin: 0 auto;
  padding: 2.5rem 2rem 2rem 2rem;
  position: relative;
}
.contact-title {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  background: linear-gradient(90deg, #1a202c 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}
.contact-form .form-group {
  position: relative;
  margin-bottom: 2rem;
}
.input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #3b82f6;
  opacity: 0.7;
  z-index: 2;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 1rem 1rem 1rem 2.5rem;
  border-radius: 0.75rem;
  border: 1.5px solid #e5e7eb;
  background: rgba(255,255,255,0.7);
  transition: border 0.2s, box-shadow 0.2s;
  font-size: 1rem;
  color: #1a202c;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #34d399;
  box-shadow: 0 0 0 2px #34d39933;
}
.contact-form label {
  position: absolute;
  left: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #6b7280;
  pointer-events: none;
  transition: all 0.3s;
  font-size: 1rem;
}
.contact-form input:focus + label,
.contact-form input:not(:placeholder-shown) + label,
.contact-form textarea:focus + label,
.contact-form textarea:not(:placeholder-shown) + label {
  top: -0.625rem;
  left: 2.2rem;
  font-size: 0.85rem;
  color: #3b82f6;
  background: #fff;
  padding: 0 0.3rem;
  z-index: 3;
  border: 1.5px solid #34d399;
  box-shadow: 0 0 0 2px #34d39933;
  border-radius: 0.5rem;
  transition: all 0.3s, border 0.2s, box-shadow 0.2s;
}
.contact-btn {
  width: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #34d399 100%);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px rgba(52,211,153,0.08);
  transition: background 0.3s, transform 0.15s;
}
.contact-btn:hover, .contact-btn:focus {
  background: linear-gradient(90deg, #34d399 0%, #3b82f6 100%);
  transform: scale(1.03);
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.2em;
}

.carousel-inner {
  position: relative;
  width: 100%;
  /* height: 16rem; */
  /* min-height: 16rem; */
  overflow: hidden;
}

.carousel-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: 0 4px 24px 0 #3b82f633;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Elimino la siguiente regla conflictiva:
.carousel-img[style*='opacity: 1'] {
  z-index: 2;
  opacity: 1;
}
*/

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: #1a202c;
  border: 2px solid #1a202c;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(59,130,246,0.10);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border 0.2s, box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
}
.carousel-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke: #fff;
  color: #fff;
  transition: stroke 0.2s, color 0.2s;
}
.carousel-btn:hover, .carousel-btn:focus {
  background: #34d399;
  border-color: #34d399;
  box-shadow: 0 4px 24px 0 #3b82f6cc, 0 2px 8px rgba(59,130,246,0.18);
  transform: translateY(-50%) scale(1.12);
}
.carousel-btn:hover svg, .carousel-btn:focus svg {
  stroke: #1a202c !important;
  color: #1a202c !important;
}

.carousel-btn-prev {
  left: 16px;
  right: auto;
}
.carousel-btn-next {
  right: 16px;
  left: auto;
}

/* Carrusel tipo slide robusto */
#nosotros-carousel {
  width: 100% !important;
  height: 28rem !important;
  overflow: hidden !important;
  position: relative !important;
}
.carousel-inner {
  display: flex !important;
  flex-direction: row !important;
  height: 100% !important;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.carousel-item {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: unset !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
}
.carousel-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 1.5rem !important;
  display: block !important;
}

/* --- MOBILE FIRST REDESIGN --- */
@media (max-width: 640px) {
  /* HEADER: menú hamburguesa elegante, overlay, selector idioma, transparencia sobre hero */
  #main-header {
    position: sticky !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1000 !important;
    background: rgba(26,32,44,0.95) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    transition: background 0.4s, box-shadow 0.4s;
  }
  #main-header.scrolled {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  }
  .mobile-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(26,32,44,0.85);
    border-radius: 50%;
    border: none;
    z-index: 100;
    position: relative;
    margin-left: auto;
    margin-right: 0.5rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  .mobile-nav-toggle svg {
    width: 28px;
    height: 28px;
    color: #fff;
    transition: color 0.2s;
  }
  .mobile-nav-toggle.open {
    background: #34d399;
  }
  .mobile-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26,32,44,0.97);
    z-index: 99;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    transition: opacity 0.3s;
  }
  .mobile-nav.open {
    display: flex;
    animation: fadeInMobileNav 0.3s;
  }
  @keyframes fadeInMobileNav {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .mobile-nav .nav-link {
    color: #fff !important;
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
    transition: color 0.2s;
  }
  .mobile-nav .nav-link.active,
  .mobile-nav .nav-link:hover {
    color: #34d399 !important;
  }
  .mobile-nav .lang-select-mobile {
    margin-top: 2rem;
    background: #23272f !important;
    color: #fff !important;
    border-radius: 0.75rem;
    font-size: 1.2rem;
    padding: 0.7rem 1.5rem;
    border: 1.5px solid #374151 !important;
    outline: none;
    box-shadow: 0 2px 8px rgba(52,211,153,0.10);
    width: 90%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-weight: 700;
    transition: border 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="18" viewBox="0 0 20 20" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    background-size: 1.2em;
  }
  .mobile-nav .lang-select-mobile:focus {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 2px #34d39933;
    background: #23272f !important;
    color: #fff !important;
  }
  /* Ocultar nav desktop y mostrar toggle */
  #main-header nav ul,
  #main-header #lang-select {
    display: none !important;
  }
  #main-header .mobile-nav-toggle {
    display: flex !important;
  }

  /* KPIS: columna en mobile */
  .kpis-section-gradient {
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 0 0.5rem !important;
  }
  .kpi-bg-col {
    min-height: 220px !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 1.2rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: 0 2px 12px rgba(52,211,153,0.08) !important;
  }
  .kpi-bg-col:last-child {
    border-bottom: none !important;
  }
  .kpi-card {
    margin-bottom: 1.2rem !important;
    padding: 1.2rem 0.5rem !important;
  }

  /* PRODUCTOS: tarjetas tipo cajón/acordeón, compactas */
  @media (max-width: 640px) {
    #productos .grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 0.7rem !important;
      width: 100% !important;
      position: static !important;
      z-index: auto !important;
      overflow: visible !important;
      transform: none !important;
    }
    #productos .grid article {
      background: #fff !important;
      border-radius: 1.1rem !important;
      box-shadow: 0 2px 12px rgba(52,211,153,0.08) !important;
      margin-bottom: 0.7rem !important;
      transition: none !important;
      cursor: pointer;
      position: static !important;
      z-index: auto !important;
      overflow: visible !important;
      transform: none !important;
      width: 100% !important;
    }
    #productos .product-flyout {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 1rem !important;
      padding: 1rem 1rem !important;
      min-height: 60px !important;
      width: 100% !important;
      background: none !important;
      box-shadow: none !important;
      border: none !important;
      margin: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      transition: none !important;
      position: static !important;
      z-index: auto !important;
      overflow: visible !important;
      transform: none !important;
    }
    #productos .product-flyout img {
      width: 56px !important;
      height: 56px !important;
      object-fit: cover !important;
      border-radius: 0.7rem !important;
      box-shadow: 0 2px 8px rgba(59,130,246,0.10);
      background: #fff;
      flex-shrink: 0;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      transition: none !important;
      position: static !important;
      z-index: auto !important;
      overflow: visible !important;
      transform: none !important;
    }
    #productos .product-title-mobile {
      font-size: 1.1rem !important;
      line-height: 1.3 !important;
      flex: 1 1 auto !important;
      color: #1a202c !important;
      margin: 0 !important;
      padding: 0 !important;
      letter-spacing: 0.01em !important;
      background: none !important;
      white-space: normal !important;
      word-break: break-word !important;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      transition: none !important;
      position: static !important;
      z-index: auto !important;
      overflow: visible !important;
      transform: none !important;
    }
    #productos .product-flyout:after {
      content: '\25BC';
      color: #3b82f6 !important;
      font-size: 1.2rem !important;
      margin-left: 0.5rem !important;
      transition: none !important;
      display: inline-block !important;
      align-self: center !important;
      opacity: 1 !important;
      visibility: visible !important;
      position: static !important;
      z-index: auto !important;
      overflow: visible !important;
      transform: none !important;
    }
    #productos .grid article.expanded .product-flyout:after {
      transform: rotate(180deg);
    }
    #productos .grid article .relative.z-20 {
      width: 100% !important;
      text-align: left !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      padding: 1rem !important;
      background: #fff !important;
      border-top: 1px solid #e5e7eb !important;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, padding 0.3s;
    }
    #productos .grid article.expanded .relative.z-20 {
      max-height: 2000px;
      opacity: 1;
      overflow: visible;
      transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, padding 0.3s;
    }
    #productos .grid article .relative.z-20 h3 {
      font-size: 1.08rem !important;
      font-weight: 700 !important;
      color: #1a202c !important;
      margin-bottom: 0.5rem !important;
      text-align: left !important;
    }
    #productos .grid article .relative.z-20 p {
      font-size: 0.98rem !important;
      color: #444 !important;
      margin-bottom: 0.3rem !important;
      text-align: left !important;
      line-height: 1.45 !important;
    }
  }
  #productos .product-flyout {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #productos .product-flyout img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #productos .product-title-mobile {
    display: block !important;
    font-size: 1.08rem !important;
    font-weight: 600 !important;
    color: #1a202c !important;
    margin-left: 1rem !important;
    flex: 1 1 auto !important;
    white-space: normal !important;
    word-break: break-word !important;
    letter-spacing: 0.01em !important;
    background: none !important;
    align-self: center !important;
  }
}
@media (min-width: 641px) {
  #productos .product-title-mobile {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .lang-dropdown-mobile {
    width: auto;
    align-items: flex-start;
  }
  .lang-dropdown-list {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    display: none;
    z-index: 9999 !important;
    background: #fff !important;
    box-shadow: 0 8px 32px rgba(59,130,246,0.10) !important;
    border-radius: 0.75rem !important;
    border: 1.5px solid #e5e7eb !important;
  }
  .lang-dropdown-list.open {
    display: block !important;
  }
}
@keyframes fadeInLangDropdown {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
  #productos .grid article {
    min-height: 70px !important;
  }
  #productos .product-flyout {
    min-height: 60px !important;
    padding: 0.8rem 1rem !important;
    gap: 1rem !important;
  }
  #productos .product-flyout img {
    width: 54px !important;
    height: 54px !important;
  }
  #productos .product-title-mobile {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
}
@media (max-width: 640px) {
  #productos .product-flyout {
    gap: 1.2rem !important;
    padding: 1rem 1.2rem !important;
  }
  #productos .product-flyout img {
    border-radius: 1rem !important;
    box-shadow: 0 4px 16px rgba(59,130,246,0.13) !important;
  }
}
@media (min-width: 641px) {
  .mobile-nav,
  .mobile-nav-toggle {
    display: none !important;
  }
  .product-title-mobile {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  #lang-select {
    position: absolute !important;
    right: 2rem !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
  }
}

@media (max-width: 640px) {
  #productos .product-flyout {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.2rem !important;
    padding: 0.7rem 1.1rem !important;
  }
  #productos .product-flyout img {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    aspect-ratio: 1/1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(59,130,246,0.10) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 640px) {
  #main-header {
    background: transparent !important;
    box-shadow: none !important;
  }
  #main-header.scrolled {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  }
  #hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 640px) {
  #lang-select {
    display: none !important;
  }
}
.mobile-nav-close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  z-index: 200;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(59,130,246,0.10);
  transition: background 0.18s, box-shadow 0.18s;
}
.mobile-nav-close:hover {
  background: #f3f4f6 !important;
  box-shadow: 0 4px 16px rgba(59,130,246,0.13);
}
.mobile-nav-close svg {
  color: #1a202c !important;
  stroke: #1a202c !important;
}