body{
    font-family:'Montserrat',sans-serif;   
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box; /*contiene el tamaño del contenido*/
}

html{
    scroll-behavior:smooth;  /*suaviza el scroll*/
}

a{
    text-decoration: none;
}


/* HEADER */

.encabezado{ 

    background:#F9F9F9;

    position:sticky;  /*nav estático mientras se hace scroll*/
    top:0;
     z-index:1000;

}

.encabezado__franja{

    height:6px;
    background:linear-gradient(
        90deg,
        #1FB76A,
        #2E83C1
    );

}

.encabezado__contenido{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:95px;

    padding:0 20px;


}

.encabezado__logo img{

   width:180px;
   height:auto;

}

.encabezado__boton-menu{

    background:none;
    border:none;

    font-size:2rem;

    /* Estilos para el texto degradado */
    background: linear-gradient(to right,  #1FB76A,
        #2E83C1); /* Colores del degradado */
    -webkit-background-clip: text; /* Recorta el fondo con la forma del icono */
    background-clip: text;
    color: transparent; /* Hace el icono transparente para ver el fondo */

    cursor:pointer;

}

.encabezado__navegacion{

    display:none;

}

.encabezado__navegacion.activo{

    display:block;

    position:absolute;

    top:103px;

    left:0;

    width:100%;

    background:#F9F9F9;

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}

.encabezado__lista{

    display:flex;

    flex-direction:column;

}

.encabezado__lista li{

    border-bottom:1px solid #ececec;

}

.encabezado__lista a{

    display:block;

    padding:18px 24px;

    color:#3D3A2E;

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

}

/* SUBMENU */

.submenu__boton{

    width:100%;

    background:none;

    border:none;

    text-align:left;

    padding:18px 24px;

    color:#3D3A2E;

    font-size:.95rem;

    font-weight:700;

    text-transform:uppercase;

    font-family:inherit;

    line-height:normal;

    cursor:pointer;


}

.submenu__lista{

    max-height:0;

    overflow:hidden;

    background:#f3f3f3;

    transition:max-height .35s ease;

    list-style: none;

    margin: 0;

    padding: 0;


}

.submenu__lista li{

    border-bottom:1px solid #e5e5e5;
    list-style: none;

}

.submenu__lista a{

    padding:14px 40px;

    font-size:.9rem;

    font-weight:500;

    text-transform:none;

     display:flex;

    align-items:center;

    gap:12px;

}

.submenu__icono{

    width:30px;

    height:30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}


.submenu__icono--verde{

    background:#1FB76A;

}

.submenu__icono--azul{

    background:#2E83C1;

}

.submenu__icono img{

    width:16px;

    height:16px;

    object-fit:contain;

}



.submenu.activo .submenu__lista{

    max-height:400px;

}



/* HERO *//* HERO *//* HERO *//* HERO */

.hero{
    width:100%;
}

.hero__carrusel{
    position:relative;
    overflow:hidden;
    touch-action: pan-y;
}

.hero__slides{

    position:relative;



}

.hero__slide{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    opacity:0;

    transform:translateX(40px);

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

    pointer-events:none;

    display:block;

}

.hero__slide.activo{

    opacity:1;

    transform:translateX(0);

    pointer-events:auto;

    position:relative;

    z-index:2;

}

.hero__contenido{
    position:absolute;
    bottom:30px;
    left:20px;
}


.hero__texto{
    display:none;
}

.hero__boton{
    display:inline-block;

    padding:4px 10px;

    background:transparent;

    color:#fff;

    text-decoration:none;

    font-size:.7rem;
    font-weight:600;

    border-radius:10px;
    border:solid 1.5px #fff ;
    transition:.3s;
    
}

.hero__boton:hover{

    
    /* Sombra: horizontal vertical difuminado color */
    box-shadow: 0px 4px 15px rgba(255, 255, 255, 0.6); 
}


.hero__slide img{
    width:100%;
    height:auto;
    display:block;
}





.hero__indicadores{
    position:absolute;

    bottom:15px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:8px;

    z-index:20;
}

.hero__indicador{
    width:10px;
    height:10px;

    border-radius:50%;

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

    cursor:pointer;
}

.hero__indicador.activo{
    background:#fff;
}


.hero__flecha{
    display:none;
}


/* =========================
   BARRA DE DATOS CELULARES
   ========================= */

.barra-gradient1{
    width:100%;
    padding:18px 8px;

    background:linear-gradient(
        100deg,
        #2E83C1 0%,
        #2498B6 42%,
        #1FB76A 100%
    );
}

.barra-gradient1__contenedor{
    width:100%;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0;

    text-align:center;
}

.barra-gradient1__dato{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    min-width:0;
    padding:0 5px;

    color:#fff;
}

/* Oculta completamente Marcas internacionales en celular */
.barra-gradient1 .barra-gradient1__dato--marcas{
    display:none !important;
}

.barra-gradient1__numero{
    display:block;

    font-size:1.45rem;
    line-height:1;

    font-weight:800;
    color:#fff;

    text-shadow:0 2px 0 rgba(0,0,0,.12);
}

.barra-gradient1__dato p{
    margin:5px 0 0;

    font-size:.68rem;
    line-height:1.12;

    color:#fff;
}

/* Líneas solo después del dato 1 y 2 */
.barra-gradient1__dato:nth-child(1)::after,
.barra-gradient1__dato:nth-child(2)::after{
    content:"";

    position:absolute;
    top:4px;
    right:0;

    width:1px;
    height:calc(100% - 8px);

    background:rgba(255,255,255,.35);
}

/* Evita líneas no deseadas */
.barra-gradient1__dato:nth-child(3)::after,
.barra-gradient1__dato--marcas::after{
    display:none;
}

/*PRODUCTOS*//*PRODUCTOS*//*PRODUCTOS*//*PRODUCTOS*/


.productos{

    width:100%;
    height:auto;
    min-height:0;

    margin:0;
    padding:30px 0 60px;

    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 5% 75%,
            rgba(31, 183, 106, .13),
            transparent 34%
        ),
        radial-gradient(
            circle at 95% 18%,
            rgba(46, 131, 193, .13),
            transparent 34%
        ),
        #ededed;
}

.producto-card__nombre{
    color: #3D3A2E;
}


/* El contenido queda por encima de los elementos decorativos */
.productos h2,
.productos .subtitulo1,
.productos__contenedor{
    position:relative;
    z-index:1;
}


/* Órbitas más pequeñas para que no ocupen demasiado espacio */
.productos__orbita{
    position:absolute;

    width:300px;
    height:300px;

    border:1px dashed;
    border-radius:50%;

    pointer-events:none;
    z-index:0;
}

.productos__orbita--superior{
    top:-120px;
    right:-160px;

    border-color:rgba(46, 131, 193, .28);

    animation:orbitaProductos 16s linear infinite;
}

.productos__orbita--inferior{
    bottom:-145px;
    left:-170px;

    border-color:rgba(31, 183, 106, .28);

    animation:orbitaProductosInversa 18s linear infinite;
}

.productos__punto{
    position:absolute;

    width:9px;
    height:9px;

    border-radius:50%;
}

.productos__punto--azul{
    top:28px;
    left:60px;

    background:#2E83C1;

    box-shadow:
        0 0 0 5px rgba(46, 131, 193, .12),
        0 0 12px rgba(46, 131, 193, .55);

    animation:puntoOrbitaAzul 8s ease-in-out infinite;
}

.productos__punto--verde{
    top:70px;
    right:38px;

    background:#1FB76A;

    box-shadow:
        0 0 0 5px rgba(31, 183, 106, .12),
        0 0 12px rgba(31, 183, 106, .55);

    animation:puntoOrbitaVerde 9s ease-in-out infinite;
}

/* En celular no se usa la imagen de hover */
.producto-card__fondo{
    display:none;
}

/* El contenido debe permanecer siempre visible */
.producto-card__icono,
.producto-card__nombre,
.producto-card .subtitulo{
    position:relative;
    z-index:1;

    opacity:1;
    transform:none;
}

.productos__carrusel{

    width:90%;

    overflow:hidden;

}

.productos__contenedor{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    position:relative;

}

h2{
    font-size:23px;
    font-weight:700;
    text-align: center;
    color: #1FB76A;
    padding-top: 30px;
    position:relative;
    
}

h2:after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-2px;

    width:70px;

    height:2px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #1FB76A,
        #2E83C1
    );
}

.subtitulo{
    font-size: 11px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 30px;
    color: #3D3A2E;
   
}

.subtitulo1{
    font-size: 14px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 30px;
    color: #3D3A2E;
   
}


.salto1{
    display: none;
}

.salto{
    display: block;
}

.productos__track{

    display:flex;
    transition:transform .7s cubic-bezier(.4, 0, .2, 1);

}

.producto-card{

    height:180px;

    padding:20px;

    border:2px solid #ddd;

    border-radius:8px;

    background:#fff;

    text-align:center;

    font-weight: bold;
    color: #3D3A2E;

    width:0;
    flex:1;


}


.productocard--verde{

    background:#f5f9fb;

}

.productocard--azul{

    background:#e3eef6;

}


.producto-card .subtitulo{
    font-weight: lighter;
    color: #3D3A2E;
     padding-bottom: 10px;
}


.productos__slide{

    flex:0 0 100%;
    display:flex;
    gap:12px;


}





.productos__flecha{

    background:none;

    border:none;

    color:#2E83C1;

    font-size:2rem;

    cursor:pointer;

}


.productos__flecha--anterior{
    position:absolute;
    left:0;
    z-index:10;
}

.productos__flecha--siguiente{
    position:absolute;
    right:0;
    z-index:10;
}



.producto-card__icono{

    width:50px;
    height:50px;

    border-radius:50%;

    display:flex;

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

    margin:0 auto 20px;

}

.producto-card__icono--verde{

    background:#00B05C;

}

.producto-card__icono--azul{

    background:#2E83C1;

}


.producto-card__icono img{

    width:34px;
    height:34px;

    object-fit:contain;

}

/*fondo para productos*/

.productos__luz--azul{
    width:260px;
    height:260px;

    top:-110px;
    right:-125px;
}

.productos__luz--verde{
    width:280px;
    height:280px;

    bottom:-150px;
    left:-145px;
}

.productos__luz--central{
    display:none;
}

/* Animaciones orbitas */
@keyframes orbitaProductos{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes orbitaProductosInversa{
    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }
}

@keyframes puntoOrbitaAzul{
    0%,
    100%{
        transform:translate(0, 0);
        opacity:.45;
    }

    50%{
        transform:translate(-55px, 45px);
        opacity:1;
    }
}

@keyframes puntoOrbitaVerde{
    0%,
    100%{
        transform:translate(0, 0);
        opacity:.45;
    }

    50%{
        transform:translate(45px, -40px);
        opacity:1;
    }
}

/*orbita*/
.productos__orbita--superior{
    top:-150px; right:-250px;

   
}

/*SERVICIOS*//*SERVICIOS*//*SERVICIOS*//*SERVICIOS*/


.servicios{
    background-color: white;
    margin-top: 0px;
    padding-bottom: 50px;
    padding-top: 20px;
}


.servicios__lista{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.servicio{
    position:relative;

    width:calc(100% - 36px);
    margin:0 auto;

    padding:25px 18px;

    text-align:center;

    border:1px solid rgba(46, 131, 193, .20);
    border-radius:16px;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #f2f8fc 100%
    );

    box-shadow:0 8px 20px rgba(28, 78, 112, .10);

    opacity:0;

    transform:translateY(40px) scale(.90);

    transition:
        opacity 2s ease,
        transform 2s ease;
}

.servicio.visible{

    opacity:1;

    transform:translateY(0) scale(1);

}

.servicio:nth-child(1){

    transition-delay:0s;

}

.servicio:nth-child(2){

    transition-delay:.2s;

}

.servicio:nth-child(3){

    transition-delay:.4s;

}

.servicio__icono{

    width:70px;

    height:auto;

    margin-bottom:5px;

}


.servicio__titulo{

    font-size:1rem;

    font-weight:700;

    color:#3D3A2E;

    margin-bottom:5px;

}


.servicio__descripcion{

    font-size:14px;

    color:#666;

    line-height:1.3;

}


.salto-desktop{
    display:none;
}

.saltar{
display: block;
}

.saltar1{
    display: none;
}

/* En celular no mostramos los indicadores circulares */
.servicios__paso{
    display:none;
}

/*.servicios__paso span{
    display: none;
}*/

/*MARCAS*/

.marcas{


     background-color: #ededed;

    min-height:150px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.marcas__logo-wrapper{

    position:relative;
    width:140px;
    height:auto;
  

}

.marcas__contenedor{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:50px;

    position:relative;

}


.marcas__logo{

   position:absolute;

    top:50%;
    left:0;

    width:100%;

    opacity:0;

    transition:opacity .8s ease;

    transform:translateY(-50%);

}



.marcas__logo.activo{

    opacity:1;

}

.marcas__contenedor h2{
    text-align:left;
    font-size:22px;
    font-weight:700;
    color:#3D3A2E;
    line-height:1;
    margin-bottom: 30px;

  
}


.marcas h2:after{

display: none;
}

span{
    color: #2E83C1;
}


/*NOVEDADES*/

.novedades{
    background-color:white;
    padding:10px 20px 60px;
}

.novedades h2{
    margin-bottom:40px;
}

.novedades__lista{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* Estilo base: segunda y tercera novedad */
.novedad{
    position:relative;

    display:flex;
    align-items:center;

    min-height:110px;

    overflow:hidden;

    background:#ffffff;
    border-radius:10px;

    transition:.3s ease;
}

.novedad:hover{
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

/* Imagen lateral de las cards pequeñas */
.novedad__imagen{
    width:95px;
    height:95px;

    flex-shrink:0;

    object-fit:cover;
}

.novedad__contenido{
    flex:1;
    padding:15px;
}

.novedad__titulo-item{
    margin:0 0 4px;

    font-size:14px;
    font-weight:700;

    color:#2E83C1;
}

.novedad__texto{
    margin:0;

    font-size:11px;
    line-height:1.2;

    color:#666;
}

.novedad__flecha{
    padding:0 15px;

    text-decoration:none;

    color:#2E83C1;
    font-size:1.5rem;
    font-weight:bold;
}

/* =========================
   PRIMERA NOVEDAD DESTACADA
   ========================= */

.novedad:nth-child(1){
    display:block;

    min-height:200px;

    border-radius:14px;
}

/* Imagen ocupa toda la card */
.novedad:nth-child(1) .novedad__imagen{
    display:block;

    width:100%;
    height:200px;

    object-fit:cover;
}

/* Degradado oscuro para leer el texto */
.novedad:nth-child(1)::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(15, 54, 82, .92) 0%,
        rgba(15, 54, 82, .56) 45%,
        rgba(12, 85, 36, 0.04) 78%
    );

    z-index:1;
}

/* Texto sobre la imagen */
.novedad:nth-child(1) .novedad__contenido{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:20px 52px 20px 18px;

    z-index:2;
}

.novedad:nth-child(1) .novedad__titulo-item{
    margin:0 0 8px;

    font-size:1.2rem;
    line-height:1.2;

    color:#ffffff;
}

.novedad:nth-child(1) .novedad__texto{
    margin:0;

    font-size:.82rem;
    line-height:1.35;

    color:rgba(255,255,255,.92);
}

/* Flecha circular de la novedad importante */
.novedad:nth-child(1) .novedad__flecha{
    position:absolute;

    right:16px;
    bottom:18px;

    z-index:3;

    width:32px;
    height:32px;

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

    padding:0;

    border:1px solid rgba(255,255,255,.8);
    border-radius:50%;

    color:#ffffff;
    font-size:1rem;
}



/* ==================================
   SEGUNDA Y TERCERA: MINI CARDS
   ================================== */

.novedad:nth-child(2),
.novedad:nth-child(3){
    display:flex;
    align-items:stretch;

    min-height:125px;

    overflow:hidden;

    border:1px solid rgba(46, 131, 193, .16);
    border-radius:12px;

    background:#ffffff;

    box-shadow:0 5px 14px rgba(0,0,0,.05);
}

/* Imagen lateral */
.novedad:nth-child(2) .novedad__imagen,
.novedad:nth-child(3) .novedad__imagen{
    width:112px;
    height:125px;

    flex-shrink:0;

    object-fit:cover;
}

/* Contenido */
.novedad:nth-child(2) .novedad__contenido,
.novedad:nth-child(3) .novedad__contenido{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:16px 48px 16px 16px;
}


/* Título */
.novedad:nth-child(2) .novedad__titulo-item,
.novedad:nth-child(3) .novedad__titulo-item{
    margin:0 0 6px;

    font-size:.92rem;
    line-height:1.2;

    color:#3D3A2E;
}

/* Texto */
.novedad:nth-child(2) .novedad__texto,
.novedad:nth-child(3) .novedad__texto{
    margin:0;

    font-size:.72rem;
    line-height:1.35;

    color:#666;
}

/* Flecha circular */
.novedad:nth-child(2) .novedad__flecha,
.novedad:nth-child(3) .novedad__flecha{
    position:absolute;

    right:13px;
    bottom:50%;

    width:28px;
    height:28px;

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

    padding:0;

    transform:translateY(50%);

    border-radius:50%;

    background:rgba(46, 131, 193, .10);

    color:#2E83C1;

    font-size:.9rem;
}


/*BARRA  GRADIENT*/

.barra-gradient{
    height: 40px;
    width: auto;
    background:linear-gradient(90deg, #1fb76a, #4580b9);
}


     /*BARRA GRADIENT HERO*/

    .barra-gradient1{
        height: 90px;
        width: auto;
        background:linear-gradient(90deg, #1fb76a, #4580b9);
        
    }



/*FOOTER*/

/* Estilos base del contenedor del Footer */
footer {
  background-color: #2b2a24; /* Color de fondo oscuro original */
  color: #ffffff;
  padding: 40px 20px;
  font-family: 'Arial', sans-serif; /* Cambia por la fuente de tu web */
}

.footer-container {
  display: flex;
  flex-direction: column; /* Apila los elementos verticalmente */
  align-items: center;
  text-align: center;
  max-width: 400px; /* Limita el ancho para simular pantalla móvil */
  margin: 0 auto;
}

/* Bloque del Logo */
.footer-logo img {
  max-width: 210px;
  height: auto;
  margin-bottom: 30px;
}

/* Bloques de Oficinas y Sucursales */
.footer-branch {
  margin-bottom: 35px;
  width: 100%;
}

.footer-branch h3 {
  font-size: 15px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 10px;
}

.footer-branch .address {
  font-size: 14px;
  line-height: 1.5;
  color: #cccccc;
  margin-bottom: 12px;
}

/* Contenedor del primer bloque (ahora sin el borde directo) */
.footer-branch.divider {
  position: relative;
  margin-bottom: 35px;
  padding-bottom: 35px; /* Espacio antes de la línea */
}

/* línea sutil de longitud reducida */
.footer-branch.divider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* Centra la línea perfectamente */
  
  width: 200px; /* 👈 MODIFICA AQUÍ: El largo exacto que quieres para la línea */
  height: 1px; /* El grosor de la línea */
  background-color: rgba(255, 255, 255, 0.15); /* Color blanco sutil con transparencia */
}

/* Listas de información de contacto */
.footer-branch .contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-branch .contact-info li {
  font-size: 14px;
  margin-bottom: 6px;
  color: #bbbbbb;
}

/* Estilos para los enlaces (teléfonos y mail) */
.footer-branch .contact-info a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Bloque de Redes Sociales */
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  width: 100%;
}

.footer-socials a {
  color: #cccccc;
  transition: color 0.2s ease;
}

.footer-socials a:hover {
  color: #ffffff; /* Brillo al pasar el cursor o pulsar */
}

.derechos{
    background-color: #6b6960;
    height: 60px;
    font-size: 12px;
    color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
   
    
}

/*BOTON WASAP FOTANTE*/

.whatsapp{

    position:fixed;

    bottom:20px;

    right:15px;

    width:45px;

    height:45px;

    z-index:9999;

    transition:.3s ease;

}

.whatsapp img{

    width:100%;

    height:100%;

    display:block;

}

.whatsapp:hover{

    transform:scale(1.1);

}


.servicios__pasos{
    display:none;
}

/* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/ 
/* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/ 
/* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/  /* ESCRITORIO*/ 

@media (min-width:768px){


    /*MENU ENCABEZADO*/


/*SUBMENU*/


.submenu{

    position:relative;

}


.submenu__lista{

        position:absolute;

        top:100%;

        left:0;

        min-width:240px;

        background:#fff;

        box-shadow:0 5px 15px rgba(0,0,0,.1);

        z-index:1000;

    }

    .submenu__lista a{

      
    padding:16px 20px;

    transition:.25s ease;

    display:flex;

    align-items:center;

    gap:12px;

    }

.submenu__icono{

    width:30px;

    height:30px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}



.submenu__icono--verde{

    background:#1FB76A;

}

.submenu__icono--azul{

    background:#2E83C1;

}



.submenu__icono img{

    width:16px;

    height:16px;

    object-fit:contain;

}






.submenu__lista a:hover{

    background:#f5f5f5;

    color:#1FB76A;

}


.submenu__lista li{
    position:relative;
    border-bottom:1px solid rgba(0,0,0,.06);

}


.submenu__lista li::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:0;

    height:2.5px;

    background:linear-gradient(
        90deg,
        #1FB76A,
        #2E83C1
    );

    transition:width .35s ease;

}

.submenu__lista li:hover::after{

    width:100%;

}

.submenu__lista li:last-child{

    border-bottom:none;

}

.submenu__boton{

    position:relative;

    background:none;
    border:none;

    font-family:inherit;
    font-size:.95rem;
    font-weight:700;

    text-transform:uppercase;

    color:#3D3A2E;

    cursor:pointer;

    padding:18px 24px;

    transition:.3s ease;

}

.submenu__boton::after{

    content:"";

    position:absolute;

    left:22%;

    bottom:15px;

    width:0;

    height:3px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #1FB76A,
        #2E83C1
    );

    transition:.3s ease;

}

.submenu__boton:hover::after{

    width:55%;

}


/*MENU*//*MENU*//*MENU*//*MENU*//*MENU*/

    .encabezado{
        position:sticky;
        top:0;
        
    }


    .encabezado__contenido{
        min-height:120px;
    }


    .encabezado__boton-menu{
        display:none;
    }

    .encabezado__navegacion{
        display:block;
    }

    .encabezado__lista{
        flex-direction:row;
        gap:0px;
        list-style:none; /* elimina los puntos */
    }


    .encabezado__lista a{
        position:relative;
        transition:.3s ease;
        padding-left: 8px;
        padding-right: 8px;
    }

    .encabezado__lista > li > a::after{

    content:"";

    position:absolute;

    left:22%;

    bottom:15px;

    width:0;

    height:3px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #1FB76A,
        #2E83C1
    );

    transition:.3s ease;

    }


    .encabezado__lista > li > a:hover::after{

    width:55%;

    }


   .encabezado__lista > li{

    border-bottom:none;

    }


    .encabezado__logo img{
        width: 240px;
        height: auto;
    }





/* HERO *//* HERO *//* HERO *//* HERO */
   

    .hero__slide{
        height:auto;
    }

    .hero__slide img{
    width:100%;
    height:auto;
    
}

    /* Botón debajo del texto */
    .hero__boton{
    margin:28px 0 0 0;

    padding:10px 40px;

    font-size:1rem;

    border:2px solid #fff;
    border-radius:18px;

    color:#fff;
}


    .hero__flecha{

    display:flex;

    align-items:center;

    justify-content:center;

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(1px);

    color:#fff;

    font-size:2rem;

    cursor:pointer;

    transition:.3s ease;

    z-index:10;

}

.hero__flecha:hover{

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

    transform:translateY(-50%) scale(1.08);

}

.hero__flecha--anterior{

    left:25px;

}

.hero__flecha--siguiente{

    right:25px;

}
  

/*BARRA DE INFORMACION*//*BARRA DE INFORMACION*/

.barra-gradient1{
    width:100%;
    padding:30px 0;
}

.barra-gradient1__contenedor{
    width:min(1100px, calc(100% - 60px));
    /*margin:0 auto;*/
    margin-left: 85px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);

    gap:0;

    text-align:center;
}

.barra-gradient1__numero{
    font-size:2.8rem;
}

.barra-gradient1__dato p{
    margin-top:7px;
    font-size:1.05rem;
}

.barra-gradient1__dato--marcas strong{
    font-size:1.15rem;
    line-height:1.1;
}


.barra-gradient1__dato{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
   

}


/* Líneas divisorias entre los cuatro datos */
.barra-gradient1__dato:not(:last-child)::after{
    content:"";

    position:absolute;

    top:10px;
    right:0;

    width:1px;
    height:calc(100% - 20px);

    display:block;

    background:rgba(255,255,255,.38);
}

/* Solo el último bloque no lleva línea */
.barra-gradient1__dato:last-child::after{
    display:none;
}

.barra-gradient1__dato--marcas{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-left: 50px;
}

/* No debe haber línea después del último bloque */
.barra-gradient1__dato:last-child::after{
    display:none;
}

.barra-gradient1__texto-marcas{
    margin-top:10px;
    font-size:.82rem;
    line-height:1.25;
}

/* En escritorio vuelve a mostrarse el bloque de marcas */
.barra-gradient1 .barra-gradient1__dato--marcas{
    display:flex !important;
}


/* PRODUCTOS *//* PRODUCTOS *//* PRODUCTOS *//* PRODUCTOS */


  /* Textos principales */
.subtitulo1{
    font-size:18px;
    margin-bottom:20px;
}

.salto{
    display:none;
}

.salto1{
    display:block;
}

.productos .subtitulo{
    margin-top:10px;
    margin-bottom:30px;
    font-size:18px;
}

/* En escritorio se muestran las 6 cards */
.productos__slide{
    min-width:auto;
    display:contents;
}

.productos__flecha{
    display:none;
}

.productos__carrusel{
    width:100%;
    overflow:visible;
}

.productos__track{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:25px;

    max-width:1100px;
    margin:auto;

    transform:none !important;
}

/* Fondo general de Productos */
.productos{
    width:100%;
    max-width:none;
    min-height:650px;

    margin:0;
    padding:55px 30px 110px;

    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 10% 70%,
            rgba(31, 183, 106, .16),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(46, 131, 193, .16),
            transparent 32%
        ),
        #ededed;
}

/* Mantiene el contenido por encima de las órbitas */
.productos h2,
.productos .subtitulo1,
.productos__contenedor{
    position:relative;
    z-index:1;
}

/* =========================
   CARDS
   ========================= */

.producto-card{
    width:100%;
    min-height:260px;
    padding:30px;

    position:relative;
    overflow:hidden;

    font-size:1.4rem;
    text-align:center;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

/* Imagen de fondo */
.producto-card__fondo{
    display:block;

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:0;
    transform:scale(1.08);

    transition:
        opacity .45s ease,
        transform .7s ease;

    z-index:1;
}

/* Capa oscura suave sobre la imagen */
.producto-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:rgba(0, 0, 0, .12);

    opacity:0;

    transition:opacity .45s ease;

    z-index:2;
}

/* Contenido visible normalmente */
.producto-card__icono,
.producto-card__nombre,
.producto-card .subtitulo{
    position:relative;
    z-index:3;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

/* Línea inferior */
.producto-card::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:0;
    height:5px;

    background:linear-gradient(
        90deg,
        #1FB76A,
        #2E83C1
    );

    transition:width .4s ease;

    z-index:4;
}

/* Tamaño del icono */
.producto-card__icono{
    width:70px;
    height:70px;

    margin:0 auto 20px;
}

.producto-card__icono img{
    width:40px;
    height:40px;
}

/* =========================
   HOVER
   ========================= */

.producto-card:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 25px rgba(0,0,0,.16);
}

/* Aparece la imagen */
.producto-card:hover .producto-card__fondo{
    opacity:1;
    transform:scale(1);
}

/* Se activa una sombra leve sobre la imagen */
.producto-card:hover::before{
    opacity:1;
}

/* Desaparecen icono, título y descripción */
.producto-card:hover .producto-card__icono,
.producto-card:hover .producto-card__nombre,
.producto-card:hover .subtitulo{
    opacity:0;
    transform:translateY(15px);
}

/* Se anima la línea inferior */
.producto-card:hover::after{
    width:100%;
}

/* =========================
   HOVER DE LAS CARDS
   ========================= */

.producto-card:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

/* Aparece la imagen */
.producto-card:hover .producto-card__fondo{
    opacity:1;
    transform:scale(1);
}

/* Desaparecen icono y textos */
.producto-card:hover .producto-card__icono,
.producto-card:hover .producto-card__nombre,
.producto-card:hover .subtitulo{
    opacity:0;
    transform:translateY(12px);
}

/* Aparece la línea inferior */
.producto-card:hover::after{
    width:100%;
}

/* =========================
   LUCES DIFUSAS DE FONDO
   ========================= */

.productos__luces{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
    z-index:0;
}

.productos__luz{
    position:absolute;

    display:block;

    border-radius:50%;

    /* Menos desenfoque: la luz se nota, pero no queda tan saturada */
    filter:blur(14px);

    /* Vuelve a una intensidad más sutil */
    opacity:.58;

    pointer-events:none;
}

/* Luz azul superior derecha */
.productos__luz--azul{
    width:500px;
    height:500px;

    top:-170px;
    right:-120px;

    background:radial-gradient(
        circle,
        rgba(46, 131, 193, .38) 0%,
        rgba(46, 131, 193, .20) 42%,
        rgba(46, 131, 193, .06) 66%,
        transparent 80%
    );

    /* Más rápida y con más recorrido */
    animation:luzAzulProductos 5s ease-in-out infinite;
}

/* Luz verde inferior izquierda */
.productos__luz--verde{
    width:520px;
    height:520px;

    bottom:-240px;
    left:-150px;

    background:radial-gradient(
        circle,
        rgba(31, 183, 106, .36) 0%,
        rgba(31, 183, 106, .18) 42%,
        rgba(31, 183, 106, .05) 68%,
        transparent 82%
    );

    /* Más rápida y con más recorrido */
    animation:luzVerdeProductos 6s ease-in-out infinite;
}

/* Luz central detrás de las cards */
.productos__luz--central{
    width:360px;
    height:360px;

    top:45%;
    left:50%;

    transform:translate(-50%, -50%);

    background:radial-gradient(
        circle,
        rgba(46, 131, 193, .18) 0%,
        rgba(31, 183, 106, .12) 44%,
        transparent 76%
    );

    animation:luzCentralProductos 5s ease-in-out infinite;
}



/* Movimiento lento y sutil */
@keyframes luzAzulProductos{
    0%,
    100%{
        transform:translate(0, 0) scale(1);
        opacity:.48;
    }

    50%{
        transform:translate(-85px, 70px) scale(1.16);
        opacity:.75;
    }
}

@keyframes luzVerdeProductos{
    0%,
    100%{
        transform:translate(0, 0) scale(1);
        opacity:.45;
    }

    50%{
        transform:translate(95px, -75px) scale(1.18);
        opacity:.72;
    }
}

@keyframes luzCentralProductos{
    0%,
    100%{
        transform:translate(-50%, -50%) scale(.9);
        opacity:.25;
    }

    50%{
        transform:translate(-50%, -50%) scale(1.28);
        opacity:.62;
    }
}

/* =========================
   ÓRBITAS DECORATIVAS
   ========================= */

.productos__orbita{
    position:absolute;

    width:560px;
    height:560px;

    border:1px dashed;
    border-radius:50%;

    pointer-events:none;
    z-index:0;
}


.productos__orbita--superior{
    top:-150px;
    right:-200px;

    border-color:rgba(46, 131, 193, .32);

    animation:orbitaProductos 12s linear infinite;
}


.productos__orbita--inferior{
    bottom:-210px;
    left:-130px;

    border-color:rgba(31, 183, 106, .32);

    animation:orbitaProductosInversa 14s linear infinite;
}


.productos__punto{
    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;
}


.productos__punto--azul{
    top:45px;
    left:105px;

    background:#2E83C1;

    box-shadow:
        0 0 0 7px rgba(46, 131, 193, .12),
        0 0 18px rgba(46, 131, 193, .65);

    animation:puntoOrbitaAzul 7s ease-in-out infinite;
}


.productos__punto--verde{
    top:110px;
    right:70px;

    background:#1FB76A;

    box-shadow:
        0 0 0 7px rgba(31, 183, 106, .12),
        0 0 18px rgba(31, 183, 106, .65);

    animation:puntoOrbitaVerde 8s ease-in-out infinite;
}



/* TITULO Y SUBTITULO */

    h2{
        font-size:40px;
    }

    .subtitulo{
        font-size:16px;
    }



 /*SERVICIOS*/
 
  .servicios{

        padding-top:55px;
        padding-bottom:80px;
        margin-top: 0;
        background-color: white;

    }


    .servicios .subtitulo{
        font-size: 18px;
        margin-top: 10px;
    }

    .servicios__lista{

        flex-direction:row;

        justify-content:center;

        align-items:flex-start;

        gap:80px;

         margin-top:-30px;

    }

    .servicio{

        max-width:300px;

        flex:1;

        transition:.3s ease;
    }

     .servicio:hover{

        transform:translateY(-8px);

    }


    .servicio__icono{

        width:90px;
        margin-top:40px;

    }

    .servicio__titulo{

        font-size:1.3rem;
       

    }

    .servicio__titulo:hover{
         color:#1fb76a;
    }

    .servicio__descripcion{

        font-size:1rem;

    }


    .salto-desktop{
        display:inline;
    }

    .saltar{
        display: none;
    }

    .saltar1{
        display: block;
    }



/*Indicadores de servicios*/

.servicios__lista{
    position:relative;
    overflow:visible;
    
}

/* Cada article ocupa una columna y centra su contenido */
.servicio{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;

    max-width:300px;
    flex:1;

    transition:.3s ease;
}

/* Mantiene los tres círculos a la misma altura */
.servicio__descripcion{
    min-height:52px;
}

/* Círculo */
.servicios__paso{
    width:50px;
    height:50px;

    margin-top:32px;

    border-radius:50%;

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

    color:white;
    font-size:1.1rem;
    font-weight:700;

    position:relative;
    z-index:2;


}

.servicios__paso span{
    display:block;
    position:relative;
    z-index:5;
    color: inherit;
}

/* Colores */
.servicios__paso--uno{
    background: #2E83C1;
}

.servicios__paso--dos{
    background: #2E83C1;
}

.servicios__paso--tres{
     background: #2E83C1;
}



/* Línea hacia el próximo círculo */
.servicio:not(:last-child) .servicios__paso::before{
    content:"";

    position:absolute;

    top:50%;
    left:100%;

    /*
      80px es el gap entre servicios.
      50px es el ancho del círculo.
      La línea cubre el espacio entre ambos.
    */
    width:calc(100% + 330px);

    height:4px;

    transform:translateY(-50%);

    border-radius:20px;

    z-index:-1;

    pointer-events:none;

    margin-left: 20px;
}

/* Línea 01 → 02 */
.servicio:nth-child(1) .servicios__paso::before{
   background:linear-gradient(135deg,  #1FB76A, #2E83C1);
}

/* Línea 02 → 03 */
.servicio:nth-child(2) .servicios__paso::before{
   background:linear-gradient(135deg,  #1FB76A, #2E83C1);
}




/*MARCAS*/

 .marcas{

   background-color: #ededed;

    min-height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.marcas__contenedor{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 50px;

}

.marcas__contenedor h2{

    font-size:38px;

    line-height:1;

    margin:0;

    text-align:left;

    margin-bottom: 30px;

}

.marcas__logo-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:50px;

    position:static;

    width:auto;

    height:auto;

}

.marcas__logo{

    position:static;

    opacity:1 !important;

    width:auto;

    height:80px;

    object-fit:contain;

    transform:none;

    transition:none;

    



}
 

.marcas__logo--boston{
    height:90px;
    width: 50%;
}

.marcas__logo--medtronic{
    height:80px;
    width: 30%;
}



/*NOVEDADES*/
   .novedades{
    background:#fff;
    padding:80px 100px;
}

.novedades__lista{
    display:grid;

    grid-template-columns:1.35fr 1fr;
    grid-template-rows:repeat(2, 1fr);

    gap:24px;

    max-width:1200px;
    margin:0 auto;
}

/* -----------------------------------------
   PRIMERA NOVEDAD: DESTACADA A LA IZQUIERDA
   ----------------------------------------- */

.novedad:nth-child(1){
    grid-column:1;
    grid-row:1 / span 2;

    position:relative;

    display:block;

    min-height:520px;

    overflow:hidden;

    border-radius:18px;

    background:#123;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.novedad:nth-child(1) .novedad__imagen{
    display:block;

    width:100%;
    height:520px;

    object-fit:cover;
}

/* Degradado sobre la imagen principal */
.novedad:nth-child(1)::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(15, 54, 82, .94) 0%,
        rgba(15, 54, 82, .58) 42%,
        rgba(15, 54, 82, .06) 78%
    );

    z-index:1;
}

/* Texto sobre la imagen */
.novedad:nth-child(1) .novedad__contenido{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:32px 75px 32px 30px;

    z-index:2;
}

.novedad:nth-child(1) .novedad__titulo-item{
    margin:0 0 12px;

    font-size:1.75rem;
    line-height:1.18;

    color:#fff;
}

.novedad:nth-child(1) .novedad__texto{
    margin:0;

    font-size:1rem;
    line-height:1.5;

    color:rgba(255,255,255,.92);
}

/* Flecha de la novedad principal */
.novedad:nth-child(1) .novedad__flecha{
    position:absolute;

    right:26px;
    bottom:30px;

    z-index:3;

    width:42px;
    height:42px;

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

    padding:0;

    border:1px solid rgba(255,255,255,.8);
    border-radius:50%;

    color:#fff;
    font-size:1.2rem;

    text-decoration:none;
}

/* -----------------------------------------
   SEGUNDA Y TERCERA: CARDS SECUNDARIAS
   ----------------------------------------- */

.novedad:nth-child(2),
.novedad:nth-child(3){
    position:relative;

    display:flex;
    align-items:stretch;

    min-height:248px;

    overflow:hidden;

    border:1px solid rgba(46, 131, 193, .16);
    border-radius:14px;

    background:#fff;

    box-shadow:0 7px 18px rgba(0,0,0,.06);
}

.novedad:nth-child(2){
    grid-column:2;
    grid-row:1;
}

.novedad:nth-child(3){
    grid-column:2;
    grid-row:2;
}

/* Imagen lateral de las cards secundarias */
.novedad:nth-child(2) .novedad__imagen,
.novedad:nth-child(3) .novedad__imagen{
    width:42%;
    height:248px;

    flex-shrink:0;

    object-fit:cover;
}

/* Contenido */
.novedad:nth-child(2) .novedad__contenido,
.novedad:nth-child(3) .novedad__contenido{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:25px 52px 25px 22px;
}

.novedad:nth-child(2) .novedad__titulo-item,
.novedad:nth-child(3) .novedad__titulo-item{
    margin:0 0 10px;

    font-size:1.15rem;
    line-height:1.25;

    color:#3D3A2E;
}

.novedad:nth-child(2) .novedad__texto,
.novedad:nth-child(3) .novedad__texto{
    margin:0;

    font-size:.9rem;
    line-height:1.45;

    color:#666;
}

/* Flecha circular secundaria */
.novedad:nth-child(2) .novedad__flecha,
.novedad:nth-child(3) .novedad__flecha{
    position:absolute;

    right:18px;
    bottom:32px; /* antes: 18px */

    width:34px;
    height:34px;

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

    padding:0;

    border-radius:50%;

    background:rgba(46, 131, 193, .10);

    color:#2E83C1;

    font-size:1rem;
    text-decoration:none;
}

/* Hover discreto solo para escritorio */
.novedad{
    transition:transform .3s ease, box-shadow .3s ease;
}

.novedad:hover{
    transform:translateY(-5px);
}

.novedad:nth-child(1):hover{
    box-shadow:0 18px 34px rgba(0,0,0,.18);
}

.novedad:nth-child(2):hover,
.novedad:nth-child(3):hover{
    box-shadow:0 12px 24px rgba(0,0,0,.10);
}


/*BARRA GRADIENT*//*BARRA GRADIENT*//*BARRA GRADIENT*/



    .barra-gradient{
        height: 100px;
    }



     /*BARRA GRADIENT HERO*/

    .barra-gradient1{
        height: 150px;
        width: auto;
       background:linear-gradient(90deg, #1fb76a, #4580b9);
       
    }




    /*FOOTER*/

    footer{

        padding:70px 100px 10px 100px;
        height: 340px;

    }

    .footer-container{

        max-width:1400px;

        margin:0 auto;

        display:grid;

        grid-template-columns:1fr 1fr 1fr;

        gap:80px;

        align-items:start;

        text-align:left;

    }


    .footer-logo{

        grid-column:1;
        justify-self:start;

    }

    .footer-socials{

        grid-column:1;

        justify-content:flex-start;

        margin-top:-10px;

        justify-self:start;

    }




     .footer-branch.divider{

        grid-column:2;

        margin-bottom:0;

        padding-bottom:0;

    }



    .footer-branch:not(.divider){

        grid-column:3;

        margin-bottom:0;

    }



    .footer-branch.divider::after{

        display:none;

    }



    .footer-logo img{

        max-width:260px;
        margin-left: -70px;
        margin-bottom:25px;

    }


    .footer-branch h3{

        font-size:20px;

        margin-bottom:20px;

    }

    .footer-branch .address{

        font-size:17px;

        line-height:1.7;

    }

    .footer-branch .contact-info li{

        font-size:17px;

        margin-bottom:10px;

    }


    .footer-socials{

        gap:25px;
        margin-top: -200px;
        margin-left: 10px;

    }

    .footer-socials svg{

        width:30px;
        height:30px;



    }


    .derechos{
        font-size: 16px;
        height: 80px;
    }



/*wasap*/


     .whatsapp{
        width:65px;
        height:65px;
    }



/* =====================================
   RESETEO DE CARDS SOLO PARA ESCRITORIO
   ===================================== */

.servicio{
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;

    padding:0;
    min-height:0;
    height:auto;

    overflow:visible;
}

/* Evita que la card conserve efectos visuales de celular */
.servicio::before,
.servicio::after{
    display:none;
}

/* Mantiene la animación de entrada, pero sin aspecto de card */
.servicio.visible{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* En escritorio el hover solo eleva suavemente el servicio */
.servicio:hover{
    transform:translateY(-8px);
    box-shadow:none;
}

/* Los círculos vuelven a verse debajo de cada servicio */
.servicios__paso{
    display:flex;
}





/* =====================================
   TEXTO DEL HERO - SOLO ESCRITORIO
   ===================================== */

.hero__contenido{
    position:absolute;

    top:43%;
    left:0;

    transform:translateY(-50%);

    width:50%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding-left:40px;

    z-index:5;
}

/* Muestra el texto solo en escritorio */
.hero__texto{
    display:block;

    color:#fff;

    text-shadow:
        0 3px 3px rgba(0, 0, 0, .35);
}

.hero__texto h1{
    margin:0 0 8px;

    font-size:4rem;
    line-height:1;

    font-weight:800;

    letter-spacing:-2px;

    color:#fff;
}

.hero__texto p{
    margin:0;

    font-size:1.65rem;
    line-height:1.12;

    font-weight:700;

    color:#fff;
}

/* Botón debajo del texto */
.hero__boton{
    margin:28px 0 0 0;

    padding:10px 40px;

    font-size:1rem;

    border:2px solid #fff;
    border-radius:18px;

    color:#fff;
}




}