/* ===========================
   BANNER
=========================== */

.banner{

    position:relative;
    width:100%;
    height:40vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

}

/* ===========================
   FONDO ANIMADO
=========================== */

.background{

    position:absolute;
    inset:0;
    display:flex;
    width:200%;
    animation:slider 30s linear infinite;

}

.background img{

    width:33.333%;
    height:100%;
    object-fit:cover;
    flex-shrink:0;
    filter:brightness(.55);

}

/* Oscurecer ligeramente */

.banner::before{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        rgba(40,38,68,.05),
        rgba(40,38,68,.85)
    );
    z-index:1;

}

/* ===========================
   CONTENIDO
=========================== */

.content{

    position:relative;
    z-index:2;
    width:min(100%,1200px);
    padding:20px;

}

.content h1{

    color:#fff;
    font-size:clamp(2rem,2vw,5rem);
    line-height:1.15;
    margin-bottom:25px;
    text-shadow:0 6px 20px rgba(0,0,0,.4);

}

.content p{

    color:#f5f5f5;
    font-size:clamp(1rem,2vw,1.3rem);
    margin-bottom:40px;

}

.btn{

    display:inline-block;
    text-decoration:none;
    color:white;
    background:#2FA17F;
    padding:18px 42px;
	margin-bottom:10px;
    border-radius:50px;
    font-weight:normal;
    transition:.35s;
    box-shadow:0 12px 30px rgba(0,0,0,.3);

}

.btn:hover{

    background:#37345C;
    transform:translateY(-5px) scale(1.05);

}

/* ===========================
   ANIMACIÓN
=========================== */

@keyframes slider{

    0%{
        transform:translateX(0%);
    }

    33%{
        transform:translateX(-33.333%);
    }

    66%{
        transform:translateX(-66.666%);
    }

    100%{
        transform:translateX(0%);
    }

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

.banner{

    height:30vh;

}

.btn{

    padding:15px 30px;
    font-size:15px;

}

.content p{

    margin-bottom:30px;

}
.content h1{

    color:#fff;
    font-size:clamp(1.2rem,1.5vw,2rem);
    line-height:1.15;
    margin-bottom:25px;
    text-shadow:0 6px 20px rgba(0,0,0,.4);

}

}
/* ==========================
   SLIDER
========================== */

.slider{

    position:absolute;
    inset:0;

}

.slide{

    position:absolute;
    inset:0;

    opacity:0;

    animation:slider 18s infinite;

}

.slide:nth-child(1){

    animation-delay:0s;

}

.slide:nth-child(2){

    animation-delay:6s;

}

.slide:nth-child(3){

    animation-delay:12s;

}

.slide img{

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1);

    animation:zoom 18s infinite;

}

/* mismo retraso para el zoom */

.slide:nth-child(2) img{

    animation-delay:6s;

}

.slide:nth-child(3) img{

    animation-delay:12s;

}

/* ==========================
   FADE
========================== */

@keyframes slider{

    0%{

        opacity:0;

    }

    8%{

        opacity:1;

    }

    30%{

        opacity:1;

    }

    38%{

        opacity:0;

    }

    100%{

        opacity:0;

    }

}

/* ==========================
   ZOOM LENTO
========================== */

@keyframes zoom{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.12);

    }

}

/* ==========================
   CAPA OSCURA
========================== */

.overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
       rgba(40,38,68,.55),
        rgba(40,38,68,.85)
    );

    z-index:1;

}
/* ==========================
   TEXTO MOV
========================== */

    /* Contenedor principal responsivo */
    .ticker-container {
      width: 100%;
      max-width: 700px;

      overflow: hidden; /* Oculta el texto cuando sale del recuadro */
      background: #ffffff;

      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      padding: 5px 15px;
      border-left: 5px solid #72D6BA;
    }

    /* Elemento animado */
    .ticker-content {
      display: inline-flex;
      align-items: center;
      gap:5px;
	  padding-left:15px;

/* Evita que el texto salte de línea */
      font-size: 1rem;
	  vertical-align:central;
      color: #fff;
	  font-stretch: semi-condensed;
      /* Aplica la animación: 6 segundos de duración, infinita */
      animation: slideInPause 10s cubic-bezier(0.25, 1, 0.1, 1) infinite;
    }

    /* Estilo del ícono */
    .ticker-content i {
      color: #007bff;
      font-size: 1.4rem;
    }

    /* Keyframes de la animación */
    @keyframes slideInPause {
      0% {
        transform: translateX(30vw); /* Empieza fuera a la derecha */
        opacity: 0;
      }
      15% {
        transform: translateX(0); /* Llega al centro */
        opacity: 1;
      }
      85% {
        transform: translateX(0); /* Se PAUSA en el centro durante la mayor parte del tiempo */
        opacity: 1;
      }
      100% {
        transform: translateX(-30vw); /* Sale hacia la izquierda y reinicia */
        opacity: 0;
      }
    }

    /* Ajustes responsivos para pantallas pequeñas (móviles) */
    @media (max-width: 480px) {
      .ticker-container {
        width: 95%;
        padding: 12px 16px;
      }
      .ticker-content {
        font-size: 1rem;
      }
      .ticker-content i {
        font-size: 1.1rem;
      }
    }