@font-face {
   font-family: "Dela Gothic";
   src: url("../assets/fonts/DelaGothicOne-Regular.ttf") format("truetype");
 }

 @font-face {
   font-family: "Montserrat Regular";
   src: url("../assets/fonts/Montserrat-Regular.ttf") format("truetype");
 }

 @font-face {
   font-family: "Montserrat Bold";
   src: url("../assets/fonts/Montserrat-Bold.ttf") format("truetype");
 }

 /* Cambiar colores para la web */

 :root {
   --color-principal: #00a1a9;
   --color-principal-transparente: #00a1a9cc;
   --color-secundario: #edeae3;
   --color-secundario-transparente: #edeae3cc;
   --color-terciario: #a6a19d;
   --color-terciario-transparente: #a6a19dbb;
   --color-blanco: #ffffff;
   --color-blanco-transparente: #ffffffcc;
   --color-negro: #000000;
   --color-gris-claro: #cccccc;
   --color-gris-medio: #808080;
   --color-gris-oscuro: #5c5b60;
   --color-alternativo: #ff6600;
   /* --filtro-color-principal: invert(37%) sepia(7%) saturate(4572%)
    hue-rotate(169deg) brightness(93%) contrast(83%);
  --filtro-color-secundario: invert(37%) sepia(7%) saturate(4572%)
    hue-rotate(169deg) brightness(93%) contrast(83%);
  --filtro-color-terciario: invert(69%) sepia(52%) saturate(532%)
    hue-rotate(185deg) brightness(104%) contrast(101%); */
   --filtro-color-blanco: invert(1);
 }

 .btn-primary {
   --bs-btn-color: var(--color-gris-oscuro);
   --bs-btn-bg: var(--color-secundario);
   --bs-btn-border-color: var(--color-gris-oscuro);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--color-principal);
   --bs-btn-hover-border-color: var(--color-gris-oscuro);
   --bs-btn-focus-shadow-rgb: 49, 132, 253;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #ebca5f;
   --bs-btn-active-border-color: #ebca5f;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #fdb316;
   --bs-btn-disabled-border-color: #fdb316;
 }

 .btn-secondary {
   --bs-btn-color: var(--color-gris-oscuro);
   --bs-btn-bg: transparent;
   --bs-btn-border-color: var(--color-gris-oscuro);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--color-principal);
   --bs-btn-hover-border-color: var(--color-gris-oscuro);
   --bs-btn-focus-shadow-rgb: 130, 138, 145;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: #565e64;
   --bs-btn-active-border-color: #51585e;
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #6c757d;
   --bs-btn-disabled-border-color: #6c757d;
 }



 .form-check-input:checked {
   background-color: var(--color-principal);
   border-color: var(--color-principal);
 }

 html {
   scroll-behavior: smooth;

 }

 body {
   width: 100%;
   max-width: 1400px;
   overflow-x: hidden;
   margin: auto;
   background-color: var(--color-secundario);
   padding-top: 150px;
   /* espacio general para fixed header */
   /* fondo interno, opcional */

 }

 .boxed-container {
   max-width: 1400px;
   /* ancho máximo de tu web */
   margin: 0 auto;
   /* centra el contenido */
   padding: 0;
   /* espacio lateral en móviles */
   background-color: #fff;
   /* fondo interno, opcional */
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
   /* efecto sutil de “caja” */
 }

 section {
   padding-top: 80px;
   padding-bottom: 80px;
 }

 main {
   overflow: hidden;
 }

 strong {
   color: var(--color-principal);
 }

 #main-content {
   visibility: hidden;
 }

 #preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
 }

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

 .cabecera-index {
   transition: background-color 0.5s ease-in-out, transform 1s ease-out,
     opacity 1s ease-out !important;
 }

 /* Colores */
 .fondo-color-principal {
   background-color: var(--color-principal);
 }

 .fondo-color-principal-transparente {
   background-color: var(--color-principal-transparente);
 }

 .fondo-color-secundario {
   background-color: var(--color-secundario);
 }

 .fondo-color-secundario-transparente {
   background-color: var(--color-secundario-transparente);
 }

 .fondo-color-terciario {
   background-color: var(--color-terciario);
 }

 .fondo-terciario-transparente {
   background-color: var(--color-terciario-transparente);
 }

 .fondo-color-blanco {
   background-color: var(--color-blanco);
 }

 .fondo-color-blanco-transparente {
   background-color: var(--color-blanco-transparente);
 }

 .fondo-color-negro {
   background-color: var(--color-negro);
 }

 .fondo-color-gris-claro {
   background-color: var(--color-gris-claro);
 }

 .fondo-color-gris-medio {
   background-color: var(--color-gris-medio);
 }

 .fondo-color-gris-oscuro {
   background-color: var(--color-gris-oscuro);
 }

 .fondo-color-alternativo {
   background-color: var(--color-alternativo);
 }

 .fondo-transparente {
   background-color: transparent;
 }

 .color-principal {
   color: var(--color-principal);
 }

 .color-secundario {
   color: var(--color-secundario);
 }

 .color-terciario {
   color: var(--color-terciario);
 }

 .color-blanco {
   color: var(--color-blanco);
 }

 .color-negro {
   color: var(--color-negro);
 }

 .color-gris-claro {
   color: var(--color-gris-claro);
 }

 .color-gris-medio {
   color: var(--color-gris-medio);
 }

 .color-gris-oscuro {
   color: var(--color-gris-oscuro);
 }

 .color-alternativo {
   color: var(--color-alternativo);
 }

 .color-transparente {
   color: transparent;
 }

 .filtro-color-principal {
   filter: var(--filtro-color-principal);
 }

 .filtro-color-secundario {
   filter: var(--filtro-color-secundario);
 }

 .filtro-color-terciario {
   filter: var(--filtro-color-terciario);
 }

 .filtro-color-blanco {
   filter: var(--filtro-color-blanco);
 }

 /*  */
 /* Classes añadidas a bootstrap */
 .clients-slider .swiper-wrapper {
   display: flex !important;
   /* fuerza fila horizontal */
   align-items: center;
 }

 .clients-slider .swiper-slide {
   width: auto;
   /* ancho según contenido */
   flex-shrink: 0;
   /* evita que se encoja */
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .clients-slider .swiper-slide img {
   max-height: 80px;
   /* altura uniforme */
   object-fit: contain;
   margin: 0 15px;
   /* margen entre logos */
 }


 .hero-container {
   max-width: 1400px;
   margin: 0 auto;
   position: relative;
 }

 .hero-container .hero-img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   max-height: 90vh;
 }


 .filosofia-section p {
   font-size: 1.35rem;
   /* tamaño de texto más grande */
   line-height: 1;
   /* interlineado más amplio */
   text-align: center;
   /* centrado */
   margin-bottom: 1.5rem;
   /* espacio entre párrafos */
 }

 .filosofia-section h2 {
   text-align: center;
   /* título centrado */
 }

 .filosofia-section p {
   line-height: 2em;
   text-align: left
 }

 .hr-centered {
   width: 200px;
   /* ancho fijo */
   height: 1px;
   /* grosor, opcional */
   background-color: #000;
   /* color de la línea */
   border: none;
   /* quitar borde por defecto */
   margin: 3rem auto;
   /* centrado horizontal y espacio arriba/abajo */
   border-radius: 2px;
   /* bordes redondeados opcional */
 }

 .pretty-wrap {
   text-wrap: pretty;
 }

 .fs-0 {
   font-size: 5rem;
 }

 .ratio img {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }

 .clients-slider img {
   filter: grayscale(0%) brightness(30%);
   opacity: 0.5;
   transition: all 0.3s ease;
 }

 @media screen and (max-width: 1200px) {
   .fs-0 {
     font-size: 4rem;
   }
 }

 @media screen and (max-width: 992px) {
   .fs-0 {
     font-size: 3rem;
   }

   .logo-inicio {
     max-height: 45px;
     margin: 0 10px;
   }
 }


 @media screen and (max-width: 768px) {
   .fs-0 {
     font-size: 2.5rem;
   }

   .logo-inicio {
     max-height: 30px;
     margin: 0 8px;
   }

   .hero-container {
     padding: 0 15px;
     /* un pequeño padding lateral en móviles */
   }

   .hero-container .hero-img {
     width: 100%;
     /* siempre ajusta al ancho de la pantalla */
     height: auto;
     /* mantiene proporción */
     max-height: none;
     /* permite que se ajuste verticalmente si es necesario */
   }

 }

 @media screen and (max-width: 576px) {
   .fs-0 {
     font-size: 2rem;
   }
 }

 .cursor-pointer {
   cursor: pointer;
 }

 .object-position-top {
   object-position: top;
 }

 .object-position-bottom {
   object-position: bottom;
 }

 .rounded-full {
   border-radius: 100%;
 }

 .fit-content {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }

 /* Header */
 .img-header {
   height: 60px;
 }

 /* Header sticky con fondo y shadow boxed */
 header#header {
   position: fixed;
   top: 0;
   left: 50%;
   /* centrado horizontal */
   transform: translateX(-50%);
   /* centrado exacto */
   width: 100%;
   /* ancho total para que el background cubra todo */
   max-width: 1400px;
   /* ancho máximo boxed */
   background-color: var(--color-secundario);
   /* tu color */
   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
   /* sombra profesional */
   z-index: 1030;
   transition: all 0.3s ease;
 }


 header.scrolled {
   background-color: var(--color-secundario);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }


 @media screen and (max-width: 1400px) {
   .img-header {
     height: 50px;
   }
 }

 .navbar {
   transition: color 0.3s ease;
 }

 .navbar-scrolled {
   background-color: var(--color-blanco);
   box-shadow: 0px 0px 31px 5px rgba(0, 0, 0, 0.3);
 }

 .navbar-toggler:focus {
   box-shadow: none;
 }

 .navbar-toggler {
   border: none;
 }

 .nav-link::after {
   content: "";
   white-space: inherit;
   position: absolute;
   background-color: var(--color-negro);
   height: 1px;
   width: 0;
   bottom: 2px;
   left: 0;
   transition: width 0.5s ease-in-out;
 }

 .navbar-logo {
   max-width: calc(100% - 78px);
   height: auto;
 }

 @media screen and (min-width: 576px) {

   .nav-link:hover::after,
   .nav-link.active::after {
     width: 100%;
   }

   .navbar-logo {
     max-width: unset;
     height: auto;
   }
 }

 @media (max-width: 576px) {
   .altura-icono-nav {
     height: 40px;
     filter: brightness(0) saturate(100%) invert(1);
   }

   .btn-close-custom {
     border: none;
     background: none;
     padding: 0;
     /* Opcional: ajustar el ancho y alto del botón si lo necesitas */
     width: 40px;
     height: 40px;
   }

   .btn-close-custom i {
     color: white;
     /* Color blanco para el icono */
     font-size: 40px;
     /* Tamaño de 40px */
     line-height: 40px;
     /* Alinear verticalmente si fuera necesario */
   }

   .full-screen-nav {
     position: fixed !important;
     top: 0;
     left: 0;
     width: 100vw;
     height: 0vh;
     background-color: var(--color-terciario);
     z-index: 1050;
     overflow-y: hidden;
     opacity: 0;
     visibility: hidden;
     transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out,
       visibility 0.3s ease-in-out !important;
   }

   .full-screen-nav.collapsing {
     height: 100vh !important;
     opacity: 0;
     visibility: visible;
   }

   .full-screen-nav.collapse {
     height: 100vh !important;
     opacity: 1;
     visibility: visible !important;
   }

   .nav-link {
     font-size: 22px;
     color: white !important;
   }

   .nav-item {
     border-bottom: 1px solid var(--color-secundario);
   }
 }

 /* Quienes Somos */
 .imagen-somos {
   max-height: 280px;
   max-width: calc(100% - 160px);
   object-fit: cover;
 }

 /* SECCION GENERAL */
 .filosofia-section {
   padding: 120px 0;
 }

 /* ancho lectura profesional */
 .contenido-somos {
   max-width: 760px;
 }

 /* cabecera persona */
 .persona-header {
   display: flex;
   align-items: center;
   gap: 20px;
 }

 .persona-info {
   text-align: left;
 }

 .persona-info h2 {
   font-size: 28px;
   color: #212529;
 }

 .persona-info p {
   font-size: 15px;
   color: #6c757d;
 }

 /* numero grande */
 .persona-numero,
 .persona-numero2 {
   font-size: 64px;
   opacity: .15;
   font-weight: 600;
 }

 .persona-numero2 {
   margin-left: 0;
   margin-right: auto;
 }

 /* imagen */
 .imagen-somos {
   width: 140px;
   height: auto;
   object-fit: cover;
   border-radius: 4px;
 }

 /* textos */
 .filosofia-section h4 {
   font-size: 28px;
   margin: 2rem 0 1rem;
   font-weight: 500;
 }

 .filosofia-section p {
   font-size: 18px;
   line-height: 1.9;
   margin-bottom: 1.2rem;
   color: #212529;
 }

 /* primera frase tipo cita */
 .filosofia-section p:first-of-type {
   font-size: 20px;
   font-style: italic;
   text-align: center;
 }

 /* alternar direccion */
 .filosofia-section article:nth-child(even) .persona-header {
   flex-direction: row-reverse;
 }



 .orientacion-texto-abajo-arriba {
   width: 160px;
   max-width: 160px;
   height: 100%;
   max-height: 280px;
   rotate: 180deg;
   flex: 1;
   writing-mode: vertical-rl;
   text-orientation: sideways;
   border-bottom: 10px solid var(--color-secundario);
   z-index: 0;
 }

 .custom-input {
   border: none;
   border-bottom: 1px solid #ccc;
   border-radius: 0;
   background: transparent;
   padding-left: 0;
 }

 .custom-input:focus {
   box-shadow: none;
   border-color: #000;
 }

 .custom-label {
   position: absolute;
   top: 10px;
   left: 0;
   font-size: 0.9rem;
   color: #777;
   transition: 0.2s ease;
   pointer-events: none;
 }

 .custom-input:focus+.custom-label,
 .custom-input:not(:placeholder-shown)+.custom-label,
 textarea.custom-input:focus+.custom-label,
 textarea.custom-input:not(:placeholder-shown)+.custom-label {
   top: -10px;
   font-size: 0.75rem;
   color: #000;
 }

 .invalid-feedback,
 .form-check-label {
   color: #f5f5f5 !important;
   font-weight: 500;
   /* opcional, para que se vea más profesional */
 }

 @media screen and (max-width: 600px) {
   .imagen-somos {
     max-width: calc(100% - 130px);
   }

   .orientacion-texto-abajo-arriba {
     width: 130px;
     max-width: 130px;
   }
 }

 /* Hacemos */
 .altura-maxima-imagen-hacemos {
   height: 350px;
   max-height: 60vh;
 }

 .detalle-abajo {
   width: fit-content;
 }

 .detalle-abajo::after {
   content: "";
   position: absolute;
   bottom: 0;
   right: 0;
   height: 5px;
   width: 100%;
   background-color: var(--color-gris-medio);
 }

 .numeracion-izquierda {
   left: -65px;
   top: 0;
 }

 .numeracion-derecha {
   right: -65px;
   top: 0;
 }

 @media screen and (max-width: 768px) {
   .numeracion-izquierda {
     left: -40px;
   }

   .numeracion-derecha {
     right: -40px;
   }

   /* mobile */



   .persona-header {
     flex-direction: column;
     align-items: center;
     text-align: center;
   }

   /* ORDEN */
   .persona-numero,
   .persona-numero2 {
     order: -1;
     /* pasa arriba del todo */
     margin: 0 !important;
     font-size: 1.6rem;
     opacity: .6;
   }

   .imagen-somos {
     order: 0;
     max-width: 160px;
     margin: auto;
   }

   .persona-info {
     order: 1;
     text-align: center;
     /* <-- esto te faltaba */
   }

   /* frase debajo centrada */
   .contenido-somos>p:first-of-type {
     text-align: center;
     max-width: 500px;
     margin: 10px auto 20px auto;
     font-size: 1.1rem;
   }


 }

 /* Footer */
 .border-top-footer {
   border-top: 15px solid var(--color-terciario);
 }

 .footer-text .filtro-color-blanco {
   filter: brightness(0) saturate(100%);
 }

 footer {
   background-color: #F8F9FA;
 }

 .footer-text {
   color: #212529 !important;
 }

 footer.footer-text,
 footer.footer-text * {
   color: #212529 !important;
 }

 .footer-text a {
   color: #212529 !important;
 }

 .footer-text a:hover {
   opacity: .7;
   transition: .2s;
 }

 .tamano-icono-footer {
   height: 24px;
   width: 24px;
 }

 .icono-footer {
   transition: background-color 0.3s ease-in-out;
 }

 .icono-footer:hover {
   background-color: var(--color-principal);
 }

 .mail-footer,
 .enlace-footer {
   transition: color 0.3s ease-in-out;
 }

 .mail-footer:hover {
   color: var(--color-principal);
 }

 .enlace-footer:hover {
   color: var(--color-blanco);
 }

 /* Index */
 /* - Slider */
 .contenedor-carousel {
   min-height: 100vh;
   overflow-y: hidden;
 }

 .caja-contenido {
   top: 0;
   left: 0;
   padding-top: 146px;
   min-height: 100vh;
 }

 /* - Contenido */
 .enlace-index {
   transition: color 0.3s ease-in-out;
 }

 .enlace-index:hover {
   color: var(--color-principal);
 }

 .tamano-logo-index {
   height: 24px;
 }

 /* Form */
 .form-control {
   height: fit-content !important;
   min-height: fit-content !important;
 }

 ::placeholder {
   color: white !important;
   opacity: 1;
 }

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px transparent inset;
   transition: background-color 5000s ease-in-out 0s;
   -webkit-text-fill-color: white !important;
 }

 /* Animaciones desde diferentes direcciones */
 .slide-in-left {
   transform: translateX(-200px);
   opacity: 0;
   transition: transform 1s ease-out, opacity 1s ease-out;
 }

 .slide-in-left.visible {
   transform: translateX(0);
   opacity: 1;
 }

 .slide-in-right {
   transform: translateX(200px);
   opacity: 0;
   transition: transform 1s ease-out, opacity 1s ease-out;
 }

 .slide-in-right.visible {
   transform: translateX(0);
   opacity: 1;
 }

 .slide-in-top {
   transform: translateY(-200px);
   opacity: 0;
   transition: transform 1s ease-out, opacity 1s ease-out;
 }

 .slide-in-top.visible {
   transform: translateY(0);
   opacity: 1;
 }

 .slide-in-bottom {
   transform: translateY(200px);
   opacity: 0;
   transition: transform 1s ease-out, opacity 1s ease-out;
 }

 .slide-in-bottom.visible {
   transform: translateY(0);
   opacity: 1;
 }

 /* Animación de opacidad */
 .fade-in {
   opacity: 0;
   transition: opacity 1s ease-out;
 }

 .fade-in.visible {
   opacity: 1;
 }

 .retrasar-transicion {
   transition-delay: 0.8s;
 }