h1, h2, h3, h4, h5, h6, p, a, input, option, li{
  font-family: "Montserrat", sans-serif;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  /* font-weight: weight; */
  font-style: normal;
}

.title-font{
  font-size: 25px;
}

/* Navbar normal */

.modal-img {
  width: 100%;
  max-height: 500px; /* ajusta este valor según lo que necesites */
  object-fit: cover; /* recorta sin deformar */
  border-radius: 10px; /* opcional, esquinas redondeadas */
}


.language-switcher__icon{
  margin: 4px 7px;
  color: #0d141a;
  transition: transform .1s;
}

/* Navbar con fondo al hacer scroll */


/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-pad{
  padding: 100px 0;
}

.text-selene{
  font-size: 20px;
}

.text-selene-2{
  font-size: 36px;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ocupa todo el espacio sin deformarse */
  z-index: -2; /* Detrás de todo */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Oscurece el video */
  z-index: -1; /* Entre el video y el texto */
}

.hero .container {
  z-index: 1;
  position: relative;
}


.bandera{
  border-radius: 5px;
}

.sobre-selene{
  height: auto;
}

.sobre-selene-bg {
  background-image:
    linear-gradient(#152C32, rgba(21,44,50,.85)),
    url("../img/patron.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* Servicios */

#servicios {
  /* min-height: 80vh;  */
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
              url('../img/hero_background.jpg') center/cover no-repeat;
}

#servicios h2 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.servicios-titulo{
  font-size: 30px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.margin-service{
  margin-bottom: 50px;
}

.card-servicio {
  height: 480px; /* o el alto que quieras */
}
.card-servicio img {
  height: 100%;
  object-fit: cover; /* llena el espacio */ 
}


/* Antes y Despues */
#antes-despues .ratio > .cocoen { 
  position: absolute; inset: 0; width: 100%; height: 100%;
}
#antes-despues .cocoen, 
#antes-despues .cocoen > div { height: 100%; }
#antes-despues .cocoen img {
  display: block;
  width: 100%;
  height: 100% !important;   /* clave para anular reglas globales tipo height:auto */
  object-fit: cover;
}

.cocoen:not([data-cocoen-init]) img:first-child {
  display:block; width:100%; height:100%; object-fit:cover;
}
.cocoen:not([data-cocoen-init]) img:last-child { display:none; }

/* Color base de los indicadores */
#antes-despues .carousel-indicators [data-bs-target] {
  background-color: #152C32; /* tu color corporativo */
}

/* Indicador activo */
#antes-despues .carousel-indicators .active {
  background-color: #152C32; /* otro color al estar activo */
}

#antes-despues .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23152C32' viewBox='0 0 16 16'%3E%3Cpath d='M11 14L5 8l6-6'/%3E%3C/svg%3E");
  width: 2.5rem;
  height: 2.5rem;
}

#antes-despues .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23152C32' viewBox='0 0 16 16'%3E%3Cpath d='M5 14l6-6-6-6'/%3E%3C/svg%3E");
  width: 2.5rem;
  height: 2.5rem;
}


/* Hover un poco más fuerte */
#antes-despues .carousel-control-prev-icon:hover,
#antes-despues .carousel-control-next-icon:hover {
  filter: invert(20%) sepia(92%) saturate(600%) hue-rotate(160deg);
}

.margin-indic{
  margin-top: 100px;
}


#contactanos {
  /* min-height: 80vh;  */
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
              url('../img/contacto-bg.jpg') center/cover no-repeat;
}

.padding-contac{
  padding-top: 80px;
  padding-bottom: 80px;
}

#antes-despues .cocoen .cocoen-drag { width: 3px; } /* opcional */
/* Formulario */
/* Fondo con patrón + overlay */
#contacto .contacto-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#152C32, rgba(21,44,50,.80)), /* overlay */
    url("../img/patron.jpg"); /* patrón */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


.contacto-bg {
  background-image:
    linear-gradient(#152C32, rgba(21,44,50,.80)),
    url("../img/patron.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


/* Imagen izquierda: mantiene proporción y cubre */
#contacto .contacto-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Card formulario */
#contacto .contacto-card{
  border-radius: 28px;
  position:relative;
}
#contacto .contacto-card-glow{
  content:"";
  position:absolute; left:20px; right:20px; bottom:10px; height:30px;
  border-radius:30px; filter:blur(18px); opacity:.25;
  background: #000;
}

/* Inputs redondeados y suaves */
#contacto .contacto-input{
  border-radius: 14px;
  border:1px solid #e5e7eb;
  padding:.9rem 1rem;
} 
#contacto .contacto-input:focus{
  border-color:#152C32;
  box-shadow: 0 0 0 .25rem rgba(21, 44, 50, .15);
}

/* Botón tipo píldora */
#contacto .contacto-btn{
  border-radius: 999px;
  background:#152C32;
  border:0;
  padding:.9rem 1rem;
  letter-spacing:.08em;
}
#contacto .contacto-btn:hover{ background:#152C32; }

/* Espaciado en móviles */
@media (max-width: 991.98px){
  #contacto .contacto-card{ margin-top:.25rem; }
}

/* Footer */
.footer-dark{
  background:#152C32; color:#e6edf0;
}
.footer-title{
  color:#ffffff; letter-spacing:.04em; font-weight:700; margin-bottom:.75rem;
}
.footer-list{
  list-style: disc; padding-left:1.2rem; margin-bottom:.75rem;
}
.footer-grid > [class*="col"]{ padding-left:1rem; padding-right:1rem; }

/* divisores verticales solo en ≥992px */
@media (min-width: 992px){
  .border-start-lg{ border-left:1.5px solid rgba(255,255,255,.25); padding-left:2rem; }
  .footer-grid > .col-lg-3:first-child{ border-left:0; padding-left:0; }
}

/* Centrar lista de servicios en móvil */
@media (max-width: 991.98px) {
  .footer-list {
    display: inline-block; /* lista compacta centrada */
    text-align: left; /* pero su contenido sigue alineado */
  }
}


/* iconos sociales */
.footer-social{
  font-size:1.25rem; color:#e6edf0; opacity:.9;
}
.footer-social:hover{ opacity:1; color:#fff; }

/* barra inferior */
.footer-bottom{
  background:black; padding:.75rem 0; margin-top:2rem;
  width: 100%;
}

.footer-bg {
  background-image:
    linear-gradient(#152C32, rgba(21,44,50,.85)),
    url("../img/patron.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff; /* aseguras contraste */
}

/* Escritorio: alto fijo */
.card-servicio{
  height:480px;
  overflow:hidden; /* mantiene el borde redondeado */
}
.card-servicio .imagen-size{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.card-servicio .service-media{ height:100%; }

/* Móvil: que la card crezca y la imagen solo ocupe una franja */
@media (max-width: 767.98px){
  .card-servicio{
    height:auto;         /* <- clave: ya no fijo en móvil */
    overflow:visible;    /* por si el texto necesita crecer */
  }
  .card-servicio .row.g-0{
    display:flex;
    flex-direction:column;
  }
  .card-servicio .service-media{
    height:240px;        /* ajusta 200–300px a tu gusto */
  }
  .card-servicio .imagen-size{
    height:240px;         /* llena esos 240px */
  }
}

.contacto-btn {
  transition: all 0.3s ease;   /* suaviza la animación */
}

/* Hover */
.contacto-btn:hover {
  background-color: #fff;      /* texto oscuro */
  border: 2px solid #000;      /* borde visible */
  transform: translateY(-3px); /* ligero "salto" hacia arriba */
  box-shadow: 0 6px 12px rgba(0,0,0,0.2); /* sombra más marcada */
}


/* Estado base */
.navbar{
  margin-top: 1rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  /* Transiciona SOLO lo que cambia */
  transition:
    background-color .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    margin-top .35s ease;
}

/* Colores/enlaces/logotipo también con transición */
.navbar .nav-link{
  transition: color .25s ease;
}
.navbar .navbar-brand img{
  transition: filter .25s ease;
}
.navbar::before{
  content:"";
  position:absolute; inset:0;
  background:#fff;
  opacity:0;                /* invisible arriba */
  transition: opacity .35s ease;
  pointer-events:none;
}

/* Estado scrolled */
.navbar.scrolled{
  background-color: #fff !important;
  border-bottom-color: rgba(0,0,0,.06);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  margin-top: 0;
}
.navbar.scrolled .nav-link{ color:#222 !important; }
.navbar.scrolled .nav-link:hover{ color:#000; }
.navbar.scrolled .navbar-brand img{ filter: brightness(0); }

/* Hamburguesa (ya la tienes, dejo tal cual) */
.navbar .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar.scrolled .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

#promociones {
  background: linear-gradient(rgba(0,0,0,.02), rgba(0,0,0,.02));
}
.promo-img {
  object-fit: cover; /* llena el cuadrado sin deformar */
  display: block;
}
.promo-card:hover .promo-img {
  transform: scale(1.02);
  transition: transform .25s ease;
}

.ver-text{
  text-decoration: none;
  color: black;
}

.ver-text-2{
  text-decoration: none;
  color: white;
}


@media(min-width: 992px){
  .language-dropdown .dropdown-menu {
    right: 0;
    left: auto;
    transform-origin: top right;
  }
}

/* ===== Móvil/Tablet ===== */
@media (max-width: 991.98px){
  .navbar{
    background: rgba(0,0,0,0.25);
    backdrop-filter: saturate(120%) blur(6px);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .navbar .nav-link{ color:#fff; }
  .navbar .nav-link:hover{ color:#e6e6e6; }

  .navbar.menu-open{
    background:#fff !important;
    border-bottom-color: rgba(0,0,0,0.06);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  }
  .navbar.menu-open .nav-link{ color:#222 !important; }

  .navbar-nav .nav-item{ margin: .8rem 0; }
}

 .card-servicio h5 {
    font-size: 29px; /* ~18px */
    margin-bottom: 0.5rem;
  }

/* Respetar reduce motion del usuario */
@media (prefers-reduced-motion: reduce){
  .navbar, .navbar .nav-link, .navbar .navbar-brand img{
    transition: none !important;
  }
}


@media (max-width: 991.98px) {
  #nosotros .col-md-5 {
    margin-bottom: 1.5rem; /* ajusta a tu gusto: 1.5rem ≈ 24px */
  }
}
/* ====== Servicios en móvil/tablet: cards con altura igual ====== */
@media (max-width: 991.98px) {
  /* Cards: altura fija */
  .card-servicio {
    height: 480px;          /* ajusta este valor si quieres más/menos espacio */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }

  /* Imagen: altura constante arriba */
  .card-servicio .col-md-6:first-child {
    flex: 0 0 200px;        /* altura de la franja de imagen */
    max-height: 200px;
  }
  .card-servicio img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  /* Texto: ocupa el resto */
  .card-servicio .col-md-6:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* Título más pequeño */
  .card-servicio h5 {
    font-size: 1.1rem; /* ~18px */
    margin-bottom: 0.5rem;
  }

  /* Párrafo más compacto y limitado */
  .card-servicio p {
    font-size: 0.9rem; /* ~14px */
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 4;  /* máximo 4 líneas visibles */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Botón compacto */
  .card-servicio .btn {
    font-size: 0.85rem; /* ~13px */
    padding: 0.5rem 1.2rem;
  }

  .language-dropdown .dropdown-menu {
    right: auto !important;
    left: 0 !important;
    transform-origin: top left;
  }
}

.dropdown-menu- {
  margin-top: 100px;
}

/* Aviso animado dentro del formulario */
.form-notice{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s ease, opacity .25s ease, margin .25s ease;
  margin: 0;
}
.form-notice.is-open{
  opacity: 1;
  margin: 0 0 1rem 0;
}
.form-notice .alert{
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.form-notice .alert i{
  line-height: 1;
  margin-top: .15rem;
}