/* Contenedor */
.slogan-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 60px;
  background-color: #05c108; /* verde corporativo */
  display: flex;
  align-items: center;

  /* Textura sutil con SVG repetido (casi transparente) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='60' viewBox='0 0 160 60'><g fill='%23ffffff' fill-opacity='.065'><ellipse cx='30' cy='30' rx='9' ry='6'/><ellipse cx='80' cy='30' rx='10' ry='6' transform='rotate(-20 80 30)'/><ellipse cx='130' cy='30' rx='9' ry='6' transform='rotate(20 130 30)'/></g></svg>");
  background-repeat: repeat;
  background-size: 160px 60px;
  background-position: 0 50%;
}

/* Overlay oscuro en los bordes (encima del contenido) */
.slogan-container::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* Ajusta opacidades si quieres más/menos oscuridad */
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 4%,
    rgba(0,0,0,0.00) 10%,
    rgba(0,0,0,0.00) 90%,
    rgba(0,0,0,0.25) 96%,
    rgba(0,0,0,0.55) 100%
  );
}

/* Línea que contiene los slogans */
.slogan-slider {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: scrollSlogan 28s linear infinite; /* velocidad */
}

/* Asegura que los ítems no se encojan */
.slogan-slider > * { flex: 0 0 auto; }

/* Cada frase */
.slogan-text {
  white-space: nowrap;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  padding: 0 2rem;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
}

/* Íconos en blanco */
.slogan-text i {
  margin: 0 8px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Animación infinita (con tu duplicado en el HTML, -50% = loop perfecto) */
@keyframes scrollSlogan {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* ===== Responsive Slogan ===== */
@media (max-width: 768px){
  .slogan-container{
    height: 48px;                     /* un poco más bajo */
    background-size: 120px 48px;      /* textura ajustada */
  }
  .slogan-text{
    font-size: 1.05rem;               /* reduce el tamaño del texto */
    padding: 0 1.2rem;                /* menos espacio lateral */
  }
  .slogan-text i{
    margin: 0 6px;                    /* íconos más juntos */
    font-size: 0.9rem;
  }
}

@media (max-width: 480px){
  .slogan-container{
    height: 42px;                     /* aún más bajo */
    background-size: 100px 42px;      /* textura más compacta */
  }
  .slogan-text{
    font-size: 0.9rem;                /* texto compacto para móviles pequeños */
    padding: 0 0.8rem;
  }
  .slogan-text i{
    margin: 0 4px;
    font-size: 0.85rem;
  }
}


/* Contenedor general */
/* ====== Section gris claro con patrón SVG sutil y fades ====== */
.section-cursor-wun{
    /* Colores base */
    --gray-0: #f6f7f9;   /* plomo muy claro */
    --gray-1: #eef1f4;   /* plomo claro 2 (degradado) */
    --ink:    #2f3b46;   /* tono del trazo del patrón (más oscurito) */
  
    /* Control del patrón y fades */
    --pattern-size: 120px;  /* densidad del patrón */
    --fade-height: 70px;    /* alto del difuminado sup/inf */
  
    position: relative;
    padding: 48px 0;
    overflow: hidden;
  
    /* Capa 1: patrón SVG (líneas diagonales) + Capa 2: gris degradado */
    background-image:
      url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-10 10 L40 50 M20 40 L70 80 M40 70 L90 110' stroke='%232f3b46' stroke-opacity='0.12' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
      linear-gradient(180deg, var(--gray-0) 0%, var(--gray-1) 100%);
    background-repeat: repeat, no-repeat;
    background-size: var(--pattern-size) var(--pattern-size), cover;
    background-position: 0 0, center;
  }
  
  /* Velo muy leve (opcional) para suavizar el patrón sobre el gris */
  .section-cursor-wun::before{
    content:"";
    position:absolute; inset:0;
    background: rgba(255,255,255,0.02);
    pointer-events:none;
    z-index: 1;
  }
  
  /* Fades superior e inferior hacia blanco para transición limpia */
  .section-cursor-wun::after{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%) top,
      linear-gradient(to top,    rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%) bottom;
    background-repeat: no-repeat;
    background-size: 100% var(--fade-height), 100% var(--fade-height);
    pointer-events:none;
    z-index: 2;
  }
  
  /* Asegura que el contenido interactivo quede encima de los velos */
  .section-cursor-wun .container-cursor,
  .section-cursor-wun .cards-container,
  .section-cursor-wun .card-wun{
    position: relative;
    z-index: 3;
  }