@import url(root.css);
@import url(home.css);
@import url(nosotros.css);
@import url(servicios.css);
@import url(blog.css);
@import url(contacto.css);


@import url(lib/carruselProyectos.css);


.text-justify{text-align: justify !important;}
.text-right{text-align: right !important;}
.text-left{text-align: left !important;}

.bg-red{background-color: var(--color-red) !important;}
.bg-lred{background-color: var(--color-lred) !important;}
.bg-grey{background-color: var(--color-grey) !important;}
.bg-white{background-color: var(--color-white) !important;}
.bg-lgrey{background-color: var(--color-lgrey) !important;}

.text-red{color: var(--color-red) !important;}
.text-lred{color: var(--color-lred) !important;}
.text-grey{color: var(--color-grey) !important;}
.text-white{color: var(--color-white) !important;}
.text-lgrey{color: var(--color-lgrey) !important;}

.f-right{float: right;}
.no-list{ list-style: none;}
.w-full{width: 100%;}



/* tipografia */
.ff-manrope {
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.ff-inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

*{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

a{text-decoration: none;}

body{
  background: var(--color-white);
}


.btnOculaserRed{
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--color-red);
  border-radius: 9999px;
  display: inline-flex;
  font-size: 13px;
  letter-spacing: 2px;
  background-color: var(--color-red);
  outline: none;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btnOculaserRed:hover{
  background-color: var(--color-grey);
  border: 1px solid var(--color-grey);
  transform: translateY(-2px) scale(1.03);
}

.btnOculaserRed:focus{
  outline-offset: 4px;
  transform: scale(1.0);
}



.btnOculaserLightRed{
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--color-red);
  border-radius: 9999px;
  display: inline-flex;
  font-size: 13px;
  letter-spacing: 2px;
  background-color: rgba(194, 18, 31, 0.3);
  outline: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btnOculaserLightRed:hover{
  background-color: var(--color-red);
  color: var(--color-white) !important;
  transform: translateY(-2px) scale(1.03);
}

.btnOculaserLightRed:focus{
  outline-offset: 4px;
  transform: scale(1.0);
}


.btnMenuRp:focus{
  color: #fff;
  background-color: var(--color-red);
}


.inputOcu{
  border: 1px solid #D1D4DB;
  border-radius: 10px;
}

.inputOcu:focus{
  outline: none;
  border-color: var(--color-red);
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.15);
}


.btnOculaserGrey{
  padding: 0.75rem 1.75rem;
  border: 1px solid #111828;
  border-radius: 9999px;
  display: inline-flex;
  font-size: 13px;
  letter-spacing: 2px;
  background-color: #111828;
  outline: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btnOculaserGrey:hover{
  background-color: var(--color-grey);
  color: var(--color-white) !important;
  transform: translateY(-2px) scale(1.03);
}

.btnOculaserGrey:focus{
  outline-offset: 4px;
  transform: scale(1.0);
}



/*HEADER*/
 
.headerMenu ul li a{
  color: var(--color-grey);
  font-weight: 500;
}

header{
  border-bottom: 2px solid #D2D5DC;
  width: 100%;
  position: fixed;
  z-index: 99;
  transition: all 0.5s;
}


.pdHeader{
  padding-top: 25px;
  padding-bottom: 25px;  
}

.pdHeader2{
  padding-top: 10px;
  padding-bottom: 10px;  
}


.headMenuRp{
  border-bottom: 2px solid #D2D5DC;
}

.nav-linkRp{
  color: var(--color-grey);
  font-size: 18px;
}

.nav-linkRp.active{
  color: #C1121F;
}

.headerMenuRp li{
  padding-top: 10px;
  padding-bottom: 10px;
}


    /* ==========================================================================
       ESTILOS DEL MENÚ DE NAVEGACIÓN (UL > LI > A)
       ========================================================================== */
    

    .clinic-nav-list {
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    /* Estilo Base del enlace */
    .clinic-nav-list li a {
      position: relative;
      display: inline-block;
      padding: 0.6rem 0.9rem;
      color: #374151;                  /* Color exacto solicitado */
      font-weight: 500;
      font-size: 0.95rem;
      text-decoration: none;
      background-color: transparent;    /* Sin fondo inicial */
      transition: var(--transition-fast);
      outline: none;
    }

    /* Línea inferior indicadora (inicialmente oculta con width 0%) */
    .clinic-nav-list li a::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      width: 0%;
      height: 2px;
      background-color: #C1121F;       /* Color de línea solicitado */
      border-radius: 2px;
      transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* --- ESTADO HOVER (Sin fondo, solo animación de línea) --- */
    .clinic-nav-list li a:hover {
      color: var(--color-red);                  /* Ligera intensificación del texto al pasar el ratón */
      background-color: transparent;   /* Eliminado el fondo */
    }

    .clinic-nav-list li a:hover::after {
      width: 70%;
      left: 15%;
    }

    .clinic-nav-list li a.active::after {
      width: 70%;
      left: 15%;
    }

    .clinic-nav-list li a.active{
      color: #C1121F;
    }

    /* --- ESTADO FOCUS (Para accesibilidad por teclado) --- */
    .clinic-nav-list li a:focus-visible {
      color: #111827;
      background-color: transparent;
      outline: 2px solid #C1121F;
      outline-offset: 3px;
      border-radius: 4px;
    }

    .clinic-nav-list li a:focus-visible::after {
      width: 70%;
      left: 15%;
    }




/*FOOTER*/

.footerLinks h5{
  font-size: 16px;
  font-weight: 700;
}

.footerLinks ul li{
  margin-bottom: 8px;  
}

.footerLinks ul li a{
  color: #858D93 !important;
  font-weight: 300;
  font-size: 12px;

  transition: all 0.5s;
}

.footerLinks ul li a:hover{
  color: var(--color-red) !important;
}
.footerLinks ul li a.active{
  color: var(--color-red) !important;
}



.footerLinks ul li a img{
  width: 25px;
}

.footerLinks ul li a:nth-child(2){
  margin: 0 5px;
}

.menuCollapRp button:focus{
  color: #111827;
  outline: none;
  box-shadow: none !important;
}

.listaFooterMovil{
  margin-top: 25px;
  margin-bottom: 35px;
}


.footer2LinkLeft
,.footer2LinkRight{
  text-align: center;
  font-size: 11px;
  color: #D2D5DC;
  padding-top: 20px;
  padding-bottom: 20px;
}


.footer2LinkRight a{
  color: #D2D5DC !important;
}


.footer{
  padding-top: 50px;
  padding-bottom: 60px;
}




/**/
.borderTopGrey{
  border-top: 2px solid #D2D5DC;
}

.borderBottomGrey{
  border-bottom: 2px solid #D2D5DC;
}

.sectionTop{
  margin-top: 100px;
  width: 100%;
  display: inline-flex;
}


/* RP */

@media (min-width: 375px) {


}


@media (min-width: 425px) {


}


@media (min-width: 768px) { 

  .listaFooterMovil{
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .footer2LinkLeft{ text-align: left;}
  .footer2LinkRight{ text-align: right;}

}


@media (min-width: 992px) {


}


@media (min-width: 1200px) {

  .sectionTop{
    margin-top: 115px;
  }
    
}



@media (min-width: 1400px) {



}