/* ====== RESET GENERAL ====== */
* { /* CONTEXTO: General */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body { /* CONTEXTO: General */
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  /* scroll-behavior eliminado porque FullPage.js maneja el desplazamiento */
}

/* ====== BOTÓN HAMBURGUESA ====== */
.hamburguesa { /* CONTEXTO: General */
  position: fixed;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  top: 10px;
}

.hamburguesa .linea { /* CONTEXTO: General */
  width: 100%;
  height: 4px;
  background-color: #333;
  transition: all 0.3s ease-in-out;
  border-radius: 2px;
}

/* ANIMACIÓN A "X" */
.hamburguesa.activa .linea:nth-child(1) { /* CONTEXTO: General */
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburguesa.activa .linea:nth-child(2) { /* CONTEXTO: General */
  opacity: 0;
}

.hamburguesa.activa .linea:nth-child(3) { /* CONTEXTO: General */
  transform: rotate(-45deg) translate(7px, -6px);
}

/* ====== MENÚ LATERAL ====== */
.menu { /* CONTEXTO: General */
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  padding: 60px 30px;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu.abierto { /* CONTEXTO: General */
  transform: translateX(0%);
}

/* ====== LISTA DEL MENÚ ====== */
.menu-lista { /* CONTEXTO: General */
  list-style: none;
}

.menu-lista li { /* CONTEXTO: General */
  margin-bottom: 25px;
  transform: translateX(-20px);
  transition: all 0.4s ease;
  margin-bottom: 25px;
  opacity: 0;
}

.menu.abierto .menu-lista li { /* CONTEXTO: General */
  opacity: 1;
  transform: translateX(0);
}

/* RETARDO ESCALONADO EN ÍTEMS */
.menu.abierto .menu-lista li:nth-child(1) { /* CONTEXTO: General */
  transition-delay: 0.1s;
}
.menu.abierto .menu-lista li:nth-child(2) { /* CONTEXTO: General */
  transition-delay: 0.2s;
}
.menu.abierto .menu-lista li:nth-child(3) { /* CONTEXTO: General */
  transition-delay: 0.3s;
}
.menu.abierto .menu-lista li:nth-child(4) { /* CONTEXTO: General */
  transition-delay: 0.4s;
}

.menu-lista a { /* CONTEXTO: General */
  color: #111;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  transition: color 0.3s;
}

.menu-lista a:hover { /* CONTEXTO: General */
  color: #e63946;
}

/* ====== PIE DE MENÚ: LOGIN Y REDES ====== */
.extras { /* CONTEXTO: General */
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto; /* empuja el bloque al fondo del menú */
}

.login { /* CONTEXTO: General */
  color: #555;
  text-decoration: none;
  font-size: 16px;
}

/* ====== MENÚ HORIZONTAL DESKTOP ====== */
.menu-escritorio { /* CONTEXTO: General */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 30px;
  z-index: 999;
  display: none;
}

.menu-escritorio .contenedor-menu { /* CONTEXTO: General */
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-escritorio .logo img { /* CONTEXTO: General */
  height: 40px;
}

.menu-escritorio .navegacion ul { /* CONTEXTO: General */
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

.menu-escritorio .navegacion ul li { /* CONTEXTO: General */
  position: relative;
}

.menu-escritorio .navegacion a { /* CONTEXTO: General */
  text-decoration: none;
  font-weight: 600;
  color: #111;
  font-size: 16px;
  transition: color 0.3s;
  padding: 8px 0;
  display: block;
}

.menu-escritorio .navegacion a:hover { /* CONTEXTO: General */
  color: #e63946;
}

.menu-escritorio .contenedor-menu .logo img{
  display: block;                 /* CONTEXTO: General */
  height: 44px;                   /* CONTEXTO: General */
  width: auto;                    /* CONTEXTO: General */
  image-rendering: -webkit-optimize-contrast; /* CONTEXTO: General */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); /* CONTEXTO: General */
}


/* ============================================
   // NUEVO BLOQUE
   SUBMENÚ PRINCIPAL EN MENÚ DESKTOP (.menu-escritorio)
   Muestra el submenú cuando el usuario pasa el mouse
============================================ */
.menu-escritorio .navegacion li .submenu { /* CONTEXTO: General */
  display: none;                     /* Oculto por defecto */
  position: absolute;               /* Posición flotante debajo del ítem */
  top: 100%;                        /* Justo debajo del ítem padre */
  left: 0;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  min-width: 220px;
  z-index: 998;
}

.menu-escritorio .navegacion li:hover > .submenu { /* CONTEXTO: General */
  display: block;                   /* Aparece al hacer hover */
}

/* ============================================
   // NUEVO BLOQUE
   ÍTEMS DEL SUBMENÚ (Facial, Corporal, etc.)
============================================ */
.menu-escritorio .navegacion li .submenu li { /* CONTEXTO: General */
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-escritorio .navegacion li .submenu a { /* CONTEXTO: General */
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.menu-escritorio .navegacion li .submenu a:hover { /* CONTEXTO: General */
  background-color: #f2f2f2;
  color: #e63946;
}

.menu-escritorio .navegacion li.tiene-submenu > a::after { /* CONTEXTO: General */
  content: '▸';                 /* Flechita hacia la derecha */
  margin-left: 8px;
  font-size: 14px;
  color: #888;
  transition: transform 0.3s ease;
  display: inline-block;
}

/* ============================================
   // NUEVO BLOQUE
   SUBMENÚ ANIDADO (opcional: dentro de Facial, etc.)
============================================ */
.menu-escritorio .navegacion li .submenu li { /* CONTEXTO: General */
  position: relative;
}

.menu-escritorio .navegacion li .submenu li .submenu { /* CONTEXTO: General */
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: white;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 10px 0;
  z-index: 997;
}

.menu-escritorio .navegacion li .submenu li:hover > .submenu { /* CONTEXTO: General */
  display: block;
}

#sec-servicios { /* CONTEXTO: General */
  position: relative;
  overflow: hidden;
}

#sec-servicios #fondo-container,
#sec-servicios .overlay { /* CONTEXTO: General */
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#sec-servicios .overlay { /* CONTEXTO: General */
  /*background-color: rgba(56, 45, 45, 0.35);*/
  z-index: 1;
}

#sec-servicios .contenido-servicios { /* CONTEXTO: General */
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 20px;
  color: #fff;
}

.img-fallback {
  display: block;
  margin: 0 auto;
  max-width: 60px;
  max-height: 60px;
  opacity: 0.8;
  object-fit: contain; /* mantiene proporción */
  /* CONTEXTO: General */
}


/* === NUEVO BLOQUE === Separación de bullets en sección Nosotros */
#sec-nosotros { /* CONTEXTO: General */
  /* deja un margen interno a la derecha para no chocar con .fp-right */
  padding-right: 96px;
  box-sizing: border-box;
}

/* === NUEVO BLOQUE === Limitar ancho de lectura del párrafo */
#sec-nosotros p { /* CONTEXTO: General */
  max-width: 980px;           /* ancho ideal de lectura */
  line-height: 1.6;           /* mejora legibilidad en textos largos */
}


/* ===== SECCIONES FullPage.js ===== */
.section { /* CONTEXTO: General */
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  scroll-behavior: auto;
}

/* === NUEVO === Animación de bienvenida en sección de inicio === */
.animacion-inicio {  /* CONTEXTO: General */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}

.fadein-zoom {  /* CONTEXTO: General */
  font-size: 2.5rem;
  color: #222; 
  opacity: 0;
  transform: scale(0.8);
  animation: fadeZoomIn 1.5s ease-out forwards;
}

.fadein-zoom span {  /* CONTEXTO: General */
  color: #2f5c59;
  font-weight: bold;
}

.boton-ingresar {  /* CONTEXTO: General */
  margin-top: 30px;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: bold;
  background: linear-gradient(135deg, #2f5c59, #39706c);
  color: #fff;
  border: none;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(47, 92, 89, 0.3);
  transition: all 0.3s ease;
  animation: fadeZoomIn 2.2s ease-out forwards;
  opacity: 0;
  transform: scale(0.8);
}

.boton-ingresar:hover {  /* CONTEXTO: General */
  background: linear-gradient(135deg, #39706c, #3d7f7a);
  transform: scale(1.05);
}

@keyframes fadeZoomIn {  /* CONTEXTO: General */
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== SUBMENÚ ANIDADO EN MENÚ LATERAL (MÓVIL) ===== */
.menu .has-submenu > a::after,
.menu .has-subsubmenu > a::after { /* CONTEXTO: General */
  content: "▶";
  float: right;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
  font-size: 14px;
  color: #888;
}

/* Rotar flecha al abrir */
.menu .has-submenu.abierto > a::after,
.menu .has-subsubmenu.abierto > a::after { /* CONTEXTO: General */
  transform: rotate(90deg);
}

/* Ítems internos del submenu */
.menu ul.submenu li a { /* CONTEXTO: General */
  display: block;
  padding: 8px 15px;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.menu ul.submenu li a:hover { /* CONTEXTO: General */
  background-color: #f0f0f0;
}

/* Submenús abiertos con animación */
.menu .has-submenu.abierto > ul.submenu,
.menu .has-subsubmenu.abierto > ul.submenu { /* CONTEXTO: General */
  max-height: 500px; /* ajustable según cantidad de ítems */
}

/* BLOQUE NUEVO: mini logo en pie del menú */
/* CONTEXTO: General */
.brand-mini{
  display: inline-flex;            /* CONTEXTO: General */
  align-items: center;             /* CONTEXTO: General */
  gap: 12px;                       /* CONTEXTO: General */
  text-decoration: none;           /* CONTEXTO: General */
}
.brand-mini img{                   /* CONTEXTO: General */
  height: 36px;                    /* CONTEXTO: General */
  width: auto;                     /* CONTEXTO: General */
  display: block;                  /* CONTEXTO: General */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); /* CONTEXTO: General */
}

.redes{
  display: flex;                   /* CONTEXTO: General */
  gap: 14px;                       /* CONTEXTO: General */
}
.redes .rrss{                      /* CONTEXTO: General */
  display: inline-flex;            /* CONTEXTO: General */
  align-items: center;             /* CONTEXTO: General */
  justify-content: center;         /* CONTEXTO: General */
  width: 40px; height: 40px;       /* target táctil accesible */
  border-radius: 999px;            /* CONTEXTO: General */
  color: #2f5c59;                  /* usa currentColor */
  background: rgba(47,92,89,.08);  /* CONTEXTO: General */
  transition: background-color .2s ease, transform .1s ease; /* CONTEXTO: General */
}
.redes .rrss:hover{                /* CONTEXTO: General */
  background: rgba(47,92,89,.14);
  transform: translateY(-1px);
}
.redes .rrss svg{                  /* CONTEXTO: General */
  width: 22px; height: 22px;
  display: block;
  fill: currentColor;
}

/* BLOQUE NUEVO: tipografía del tagline junto al mini-logo */
/* CONTEXTO: General */
.brand-text{
  display: flex;                 /* CONTEXTO: General */
  flex-direction: column;        /* CONTEXTO: General */
  gap: 2px;                      /* CONTEXTO: General */
  max-width: 200px;              /* CONTEXTO: General */
}
.brand-text .linea1{             /* CONTEXTO: General */
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  line-height: 1.2;
  color: #2f5c59;                /* tono marca */
}
.brand-text .linea2{             /* CONTEXTO: General */
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .2px;
  color: #6b7b7a;                /* gris verdoso suave */
}

.redes .rrss:focus-visible{
  outline: 2px solid #2f5c59;
  outline-offset: 2px;
  border-radius: 999px;
}
.redes .rrss:hover svg{           /* CONTEXTO: General */
  filter: brightness(1.05);
}

/* Oculta marca de agua de FullPage */
/* CONTEXTO: General */
.fp-watermark {
  display: none !important;
  visibility: hidden !important;
}


/* Mejora de visibilidad del botón hamburguesa en sección SERVICIOS *//* CONTEXTO: General */
body.en-servicios .hamburguesa .linea {/* CONTEXTO: General */
  background-color: white !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.nosotros-foto { /* CONTEXTO: General */
  text-align: center;
  margin-top: 10px;
}

.nosotros-foto > img { /* CONTEXTO: General */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.2s ease-out forwards;
}


@keyframes fadeInUp { /* CONTEXTO: General */
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CONTEXTO: General */
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))){
  .menu{
    background-color: rgba(255,255,255,0.98);
  }
}


/* === NUEVO BLOQUE === Monitores amplios: un poco más de resguardo */
@media screen and (min-width: 1200px) {
  #sec-nosotros {                /* EXISTENTE – asegurar */
    padding-right: 120px;
  }
  #sec-contacto {                /* NUEVO – homologa con Nosotros */
    padding-right: 120px;
  }

  .menu-escritorio .contenedor-menu .logo img{
    height: 52px;                 /* CONTEXTO: MediaQuery min-1200px */
  }
}

/* BLOQUE NUEVO – Layout Contacto */
/* CONTEXTO: General */
.contacto { 
  width: 100%;
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 20px;
}

/* CONTEXTO: General */
.contacto-grid{
  display: grid;
  gap: 24px;
}

/* CONTEXTO: General */
.contacto-info{
  display: grid;
  gap: 16px;
}

/* CONTEXTO: General */
.contacto-item{
  display: grid;
  gap: 6px;
}

/* CONTEXTO: General */
.etiqueta{
  font-size: 13px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #6b7b7a;
}

/* CONTEXTO: General */
.dato{
  font-size: 18px;
  color: #222;
  text-decoration: none;
}

/* BOTÓN “CÓMO LLEGAR” */
/* CONTEXTO: General */
.btn-maps{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;                   /* más compacto */
  padding: 0 14px;                /* pill */
  border-radius: 999px;
  background: #2f5c59;
  color: #fff;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(47,92,89,.25);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-maps:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(47,92,89,.28);
  background: #2b5451;
}

.btn-maps:focus-visible{
  outline: 2px solid #2f5c59;
  outline-offset: 2px;
}
/* Ícono vectorial con mask (no imagen) */
.btn-maps::before{
  content: "";
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 4.48 7 13 7 13s7-8.52 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 4.48 7 13 7 13s7-8.52 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>') no-repeat center / contain;
}

/* MAPA */
/* CONTEXTO: General */
.contacto-mapa{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.mapa{
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
  pointer-events: none; /* evita capturar el scroll de FullPage */
}
.mapa-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,.08));
  font-size: 13px; color: #2f5c59; font-weight: 600;
  pointer-events: none;
}

/* Accesibilidad: oculto visual */
/* CONTEXTO: General */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* === NUEVO BLOQUE === Botón WhatsApp flotante */
.wa-float{
  position: fixed;
  bottom: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(37,211,102,.28);
  z-index: 1200; /* > header (999) y menú (1000) */
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  animation: wa-enter .8s ease-out, wa-breathe 6s ease-in-out 1.2s infinite;
}
.wa-float:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(37,211,102,.34);
  filter: brightness(1.03);
}
.wa-ico{
  width: 26px; height: 26px;
  fill: currentColor;
  flex: 0 0 auto;
}
.wa-label{
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: .2px;
}

/* === NUEVO BLOQUE === Fondo fachada en sección Contacto */
#sec-contacto { /* CONTEXTO: General */
  position: relative;
  background: url('../img/fachada.png') no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  z-index: 1;
}

/* Caja blanca para datos y mapa */
#sec-contacto .contacto-box { /* CONTEXTO: General */
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 1100px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  z-index: 2;
}

/* === NUEVO BLOQUE: Hamburguesa blanca en sección contacto === */
body.en-contacto .hamburguesa .linea {
  background-color: #fff; /* CONTEXTO: General */
}

/* === NUEVO BLOQUE: Hamburguesa blanca en sección nosotros === */
body.en-nosotros .hamburguesa .linea {
  background-color: #fff; /* CONTEXTO: General */
  box-shadow: 0 0 4px rgba(0,0,0,.45); /* CONTEXTO: General */
}
/* NUEVO BLOQUE: color blanco del botón hamburguesa en inicio y contacto */
body.en-servicios .hamburguesa .linea,
body.en-contacto .hamburguesa .linea {
  background-color: #fff; /* CONTEXTO: General */
}

/* === NUEVO BLOQUE: Publicaciones === */
#sec-publicaciones { /* CONTEXTO: General */
  background: #f9f9f9;
  padding: 80px 20px;
  text-align: center;
}

#sec-publicaciones h2 { /* CONTEXTO: General */
  font-size: 2.2rem;
  margin-bottom: 20px;
}

#sec-publicaciones p { /* CONTEXTO: General */
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.lista-publicaciones { /* CONTEXTO: General */
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: 0 auto;
}

.publi-link { /* CONTEXTO: General */
  display: block;
  padding: 12px 20px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  transition: all 0.3s ease;
}

.publi-link:hover { /* CONTEXTO: General */
  background: #00796b;
  color: white;
  border-color: #00796b;
}

.publicaciones-header { /* CONTEXTO: General */
  width: 100%;
  margin-bottom: 24px;
}

.publicaciones-header img { /* CONTEXTO: General */
  display: block;
  width: 100%;
  height: 180px;        /* altura fija en mobile */
  object-fit: cover;    /* recorte elegante */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* === NUEVO BLOQUE: Portada Nosotros centrada === */
.nosotros-portada { /* CONTEXTO: General */
  text-align: center;
  margin: 20px 0;
}

.nosotros-portada img { /* CONTEXTO: General */
  max-width: 800px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  display: inline-block;
}

/* === BLOQUE CORREGIDO === Slider automático en sección Nosotros */
.nosotros-slider { /* CONTEXTO: General */
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 30px auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  /*background-color: #71888a8a;*/
  min-height: 420px;
}

/* Imágenes del slider */
.nosotros-slider img { /* CONTEXTO: General */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 0;
}

/* Imagen visible (activa) */
.nosotros-slider img.activa { /* CONTEXTO: General */
  opacity: 1;
  z-index: 2;
}
/* === COMPATIBILIDAD CON FULLPAGE.JS === */
/* CONTEXTO: General */
.fp-overflow .nosotros-slider { 
  position: relative;             
  z-index: 5;                     
  overflow: hidden;               /* CAMBIO → antes visible, ahora hidden */
  display: flex;                  
  justify-content: center;        
  align-items: center;            
}

/* Importante: NO se cambia a relative las imágenes, se mantiene absolute */
.fp-overflow .nosotros-slider img { 
  position: absolute;             /* CORREGIDO → mantiene la superposición */
  width: 100%;                    
  height: 100%;                   
  opacity: 0;                     
  transition: opacity 1.3s ease-in-out;
  border-radius: 12px;            
  object-fit: cover;              
}

.fp-overflow .nosotros-slider img.activa { 
  opacity: 1;                     
  z-index: 10;                    
}

/* === BLOQUE CORREGIDO FINAL === Compatibilidad animaciones slider Nosotros */
#sec-nosotros .nosotros-foto .nosotros-slider img { /* CONTEXTO: General */
  animation: none !important;  /* anula fadeInUp solo en imágenes del slider */
  transform: none !important;
  opacity: 0;
}

/* === BLOQUE CORREGIDO === Slider “Nosotros” (stack superpuesto) */
/* CONTEXTO: General */
.fp-overflow .nosotros-slider {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

.fp-overflow .nosotros-slider img {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 0;
}

.fp-overflow .nosotros-slider img.activa {
  opacity: 1;
  z-index: 2;
}

/* === BLOQUE CORREGIDO === Imágenes del slider “Nosotros” */
/* CONTEXTO: General */
.fp-overflow .nosotros-slider img {
  animation: none !important;
  transform: none !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 0;
}

.fp-overflow .nosotros-slider img.activa {
  opacity: 1 !important;
  z-index: 2;
}

/* === NUEVO BLOQUE === Slider “Nosotros” para Desktop */
/* CONTEXTO: General */
.nosotros-slider { 
  position: relative;
  width: 100%;
  height: 400px; /* Ajustable según necesidad */
  overflow: hidden;
  border-radius: 12px;
}

.nosotros-slider img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 0;
}

.nosotros-slider img.activa {
  opacity: 1;
  z-index: 2;
}
#sec-nosotros .nosotros-slider { /* CONTEXTO: General */
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

/* === NUEVO BLOQUE === Slider en sección Contacto */
/* CONTEXTO: General */
#sec-contacto {
  position: relative;
  background: none !important; /* quita fondo anterior */
  overflow: hidden;
}

.contacto-slider { /* CONTEXTO: General */
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.contacto-slider img { /* CONTEXTO: General */
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.contacto-slider img.activa { /* CONTEXTO: General */
  opacity: 1;
  z-index: 1;
}

.contacto-box { /* CONTEXTO: General */
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.contacto-box.oculto { /* CONTEXTO: General */
  opacity: 0;
}

/* 🔶 NUEVAS PROPIEDADES refinadas para `.hamburguesa .linea` */
/* CONTEXTO: General */
.hamburguesa .linea {
  height: 4px;
  background-color: #1b1b1b;              /* tono neutro más definido */
  border-radius: 2px;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.6),  /* leve realce superior */
    0 1px 2px rgba(0, 0, 0, 0.6);        /* sombra sutil sin blur */
  transition: all 0.3s ease;
}

.hamburguesa:hover .linea {
  background-color: #008080;              /* tono institucional verde azulado */
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.8),
    0 1px 3px rgba(0, 0, 0, 0.7);
}
/* CONTEXTO: General */
/* === BLOQUE CORREGIDO === Ajuste visual del bloque institucional en menú móvil */
/* CONTEXTO: General */
nav.menu .extras {
  align-items: center;
  gap: 18px;
}

a.brand-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
}

a.brand-mini img {
  height: 54px;        /* antes 36px → mejor presencia sin deformar */
  width: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  max-width: 180px;
}

.brand-text .linea1 {
  font-size: 13px;      /* antes 12px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #2f5c59;
  line-height: 1.3;
}

.brand-text .linea2 {
  font-size: 11.5px;    /* antes 11px */
  color: #5c6d6c;
  line-height: 1.3;
}

/* Íconos sociales debajo */
.redes {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}

.redes .rrss {
  width: 36px;
  height: 36px;
  background: rgba(47, 92, 89, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f5c59;
  transition: all 0.2s ease;
}

.redes .rrss:hover {
  background: rgba(47, 92, 89, 0.16);
  transform: translateY(-1px);
}

.redes .rrss svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
/* CONTEXTO: General */
/* PROPIEDADES NUEVAS para estilo existente `.redes .rrss` y `.redes .rrss svg` */
/* CONTEXTO: General */

.redes .rrss {
  width: 46px;      /* antes 36px */
  height: 46px;     /* mantiene proporción */
  background: rgba(47, 92, 89, 0.08);
  border-radius: 50%;
}

.redes .rrss svg {
  width: 26px;      /* antes 20px */
  height: 26px;     /* aumento proporcional */
}
/* CONTEXTO: General */

/* === BLOQUE NUEVO: Ajuste final para sec-banner === */
/* CONTEXTO: General */
#sec-banner { /* CONTEXTO: General */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 0;
}

#sec-banner .banner-intermedio a { /* CONTEXTO: General */
  width: 90%;
  max-width: 500px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#sec-banner .banner-intermedio video { /* CONTEXTO: General */
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

/* === BLOQUE NUEVO: Ajuste visual del video del banner === */
/* CONTEXTO: General */
#sec-banner video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

/*final general*/

/* Animaciones suaves */
@keyframes wa-enter{
  0%{ transform: scale(.85); opacity:.0 }
  60%{ transform: scale(1.06); opacity:1 }
  100%{ transform: scale(1) }
}
@keyframes wa-breathe{
  0%,100%{ box-shadow: 0 10px 24px rgba(37,211,102,.28) }
  50%{ box-shadow: 0 14px 30px rgba(37,211,102,.36) }
}

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .wa-float{ animation: none; transition: none; }
}



/* ====== MEDIA QUERIES ====== */
@media screen and (min-width: 992px) {

  .menu-escritorio { /* CONTEXTO: MediaQuery min-992px */
    display: block;
  }

  .hamburguesa { /* CONTEXTO: MediaQuery min-992px */
    display: none !important;
  }

  nav.menu { /* CONTEXTO: MediaQuery min-992px */
    display: none !important; /* Oculta menú lateral solo si es nav.menu */
  }

  .menu-escritorio .contenedor-menu { /* CONTEXTO: MediaQuery min-992px */
    gap: 28px;
    align-items: center;
  }

  .menu-escritorio .navegacion ul { /* CONTEXTO: MediaQuery min-992px */
    align-items: center;
    justify-content: flex-end;
  }

  .menu-escritorio .logo { /* CONTEXTO: MediaQuery min-992px */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }

  .menu-escritorio .navegacion { /* CONTEXTO: MediaQuery min-992px */
    flex: 1 1 auto;
    margin-left: auto;
  }

  .contacto-grid { /* CONTEXTO: MediaQuery min-992px */
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }

  .mapa { /* CONTEXTO: MediaQuery min-992px */
    height: 420px;
  }

  #sec-contacto { /* CONTEXTO: MediaQuery min-992px */
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
    padding-right: 96px;
    padding-top: 72px;
    box-sizing: border-box;
    display: flex;              
    justify-content: flex-start; /* fuerza alineación a la izquierda */
    /*filter: brightness(0.65) saturate(0.9);*/
    position: relative;
    
  }

  #sec-contacto > p { /* CONTEXTO: MediaQuery min-992px */
    margin: 0 0 16px;
    max-width: 980px;
    text-align: left;
  }

  #sec-contacto .contacto { /* CONTEXTO: MediaQuery min-992px */
    width: 100%;
    max-width: 1100px;
    margin: 8px auto 0;
    padding: 0;
  }

  .wa--pill { /* CONTEXTO: MediaQuery min-992px */
    right: 32px;
    bottom: 28px;
  }

  /* ✅ Submenú vertical desplegable con scroll */
  .menu-escritorio .submenu { /* CONTEXTO: MediaQuery min-992px */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    background: #fff;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .menu-escritorio .submenu::-webkit-scrollbar { /* CONTEXTO: MediaQuery min-992px */
    width: 6px;
  }

  .menu-escritorio .submenu::-webkit-scrollbar-thumb { /* CONTEXTO: MediaQuery min-992px */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  .menu-escritorio .submenu::-webkit-scrollbar-track { /* CONTEXTO: MediaQuery min-992px */
    background: transparent;
  }

  .menu-escritorio .has-submenu:hover > ul.submenu { /* CONTEXTO: MediaQuery min-992px */
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    position: absolute;
  }

  /* ✅ Submenú LATERAL para ítems como Facial > Botox */
  .menu-escritorio .submenu .submenu-lateral { /* CONTEXTO: MediaQuery min-992px */
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 999;
    background: #fff;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
    display: none;
    transform: translateY(0);
  }

  .menu-escritorio .has-subsubmenu:hover > .submenu-lateral { /* CONTEXTO: MediaQuery min-992px */
    display: block;
  }

  .menu-escritorio .submenu .submenu-lateral::-webkit-scrollbar { /* CONTEXTO: MediaQuery min-992px */
    width: 6px;
  }

  .menu-escritorio .submenu .submenu-lateral::-webkit-scrollbar-thumb { /* CONTEXTO: MediaQuery min-992px */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  .menu-escritorio .submenu .submenu-lateral::-webkit-scrollbar-track { /* CONTEXTO: MediaQuery min-992px */
    background: transparent;
  }

  .menu-escritorio .submenu .has-subsubmenu:hover > .submenu-lateral {
    display: block; /* Mostrar submenu lateral */
  } /* CONTEXTO: MediaQuery min-992px */

  /* Overlay opcional para mejorar contraste */
  #sec-contacto::before { /* CONTEXTO: MediaQuery min-992px */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.25);
    z-index: 0;
  }

  /* ✅ Caja de contacto alineada a la izquierda */
   #sec-contacto .fp-overflow { /* CONTEXTO: MediaQuery min-992px */
    display: flex;               
    justify-content: flex-start; /* fuerza alineación a la izquierda */
    align-items: flex-start;     /* alinea arriba si sobra alto */
    padding-left: 800px;          /* separa desde el borde izquierdo */
    padding-top: 20px;
  
  }

   #sec-contacto .contacto-box { /* CONTEXTO: MediaQuery min-992px */
    position: relative;
    z-index: 2;
    margin: 0;                  /* elimina centrado automático */
    margin-left: 0;             /* arranca desde el padding del padre */
    max-width: 860px;           /* controla ancho para liberar fachada */
  }

/* === NUEVAS PROPIEDADES para estilo existente .publicaciones-header img */
/* CONTEXTO: MediaQuery min-992px */
.publicaciones-header img {
  max-width: 960px;      /* centra la imagen con ancho máximo controlado */
  margin: 0 auto;        /* centra horizontalmente */
  display: block;
  height: 260px;         /* más alto en PC */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.lista-publicaciones {
    max-width: 700px; /* un poco más amplio en PC */
  }

.nosotros-portada img { /* CONTEXTO: MediaQuery 992px */
    max-width: 100%;
    border-radius: 8px;
  }
.redes-desktop { /* CONTEXTO: MediaQuery min-992px */
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 16px;
}

.nosotros-foto {
    display: flex;                        /* CONTEXTO: MediaQuery min-992px */
    justify-content: center;              /* CONTEXTO: MediaQuery min-992px */
    align-items: center;                  /* CONTEXTO: MediaQuery min-992px */
    flex-direction: column;               /* CONTEXTO: MediaQuery min-992px */
  }

  .nosotros-slider {
    margin: 40px auto;                    /* CONTEXTO: MediaQuery min-992px */
    justify-content: center;              /* CONTEXTO: MediaQuery min-992px */
    align-items: center;                  /* CONTEXTO: MediaQuery min-992px */
  }

  .nosotros-slider img {
    object-position: center center;       /* CONTEXTO: MediaQuery min-992px */
  }

  /* CONTEXTO: MediaQuery min-992px */
/* PROPIEDADES NUEVAS → agregadas a estilos existentes */



/* ✅ ESTILO CORRECTO PARA EL CONTENEDOR */
#sec-nosotros .nosotros-slider {
  width: 100%;
  max-width: 1000px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* NO agregar inline-block ni float aquí */
}
/* PROPIEDADES NUEVAS o revisar que existan */
/* CONTEXTO: MediaQuery min-width: 992px */


/* === NUEVO BLOQUE === Centrado vertical y horizontal en sección Nosotros */
/* CONTEXTO: MediaQuery min-992px */
#sec-nosotros {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* asegura ocupar toda la pantalla visible */
}

#sec-nosotros .nosotros-foto {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 0;
}

#sec-nosotros .nosotros-slider {
  margin: 40px auto;
  justify-content: center;
  align-items: center;
}

/* CONTEXTO: MediaQuery min-992px */
/* ✅ BLOQUE CORREGIDO */
/* CONTEXTO: MediaQuery min-992px */
#sec-nosotros .nosotros-slider img { 
 /* width: auto;*/
  max-width: 100%;
  max-height: 80vh;              /* evita scroll vertical sin recortar */
  object-fit: contain;
  display: block;                /* este es el correcto */
  margin: 0 auto;                /* centra horizontalmente */
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

  /* === NUEVO BLOQUE: Ajuste visual sección contacto === */
  #sec-contacto { /* CONTEXTO: MediaQuery min-992px */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* ocupa toda la altura visible */
    overflow: hidden;
    position: relative;
  }

  #sec-contacto .contacto-slider { /* CONTEXTO: MediaQuery min-992px */
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  #sec-contacto .contacto-box { /* CONTEXTO: MediaQuery min-992px */
    position: relative;
    z-index: 2;
    max-width: 860px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    border-radius: 16px;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 1.5s ease-in-out;
  }

  #sec-contacto .contacto-grid { /* CONTEXTO: MediaQuery min-992px */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
    align-items: start;
  }

  #sec-contacto .contacto-mapa iframe { /* CONTEXTO: MediaQuery min-992px */
    border-radius: 12px;
    height: 280px;
  }

  #sec-contacto .etiqueta { /* CONTEXTO: MediaQuery min-992px */
    font-weight: 600;
    color: var(--color-texto);
    font-size: 1.1rem;
  }

  #sec-contacto .dato, 
  #sec-contacto .btn-maps { /* CONTEXTO: MediaQuery min-992px */
    font-size: 1rem;
  }

    /* === NUEVO BLOQUE === Layout completo para sección Contacto desktop */
  #sec-contacto { /* CONTEXTO: MediaQuery min-992px */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding-left: 80px;
    padding-right: 60px;
    box-sizing: border-box;
  }

  #sec-contacto .contacto-slider { /* CONTEXTO: MediaQuery min-992px */
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  #sec-contacto .contacto-slider img { /* CONTEXTO: MediaQuery min-992px */
    object-fit: cover;
    filter: brightness(0.75);
  }

  #sec-contacto .contacto-box { /* CONTEXTO: MediaQuery min-992px */
    position: relative;
    z-index: 2;
    max-width: 1000px;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 28px rgba(0,0,0,0.18);
    border-radius: 16px;
    padding: 48px 60px;
    transition: opacity 1.5s ease-in-out;
  }

  #sec-contacto .contacto-grid { /* CONTEXTO: MediaQuery min-992px */
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    width: 100%;
    align-items: start;
  }

  #sec-contacto .etiqueta { /* CONTEXTO: MediaQuery min-992px */
    font-size: 0.9rem;
    color: #6b7b7a;
    font-weight: 600;
    letter-spacing: 0.4px;
  }

  #sec-contacto .dato { /* CONTEXTO: MediaQuery min-992px */
    font-size: 1.05rem;
    color: #222;
  }

  #sec-contacto .btn-maps { /* CONTEXTO: MediaQuery min-992px */
    font-size: 0.95rem;
    margin-top: 10px;
  }

  #sec-contacto .contacto-mapa iframe { /* CONTEXTO: MediaQuery min-992px */
    width: 100%;
    height: 320px;
    border-radius: 12px;
    border: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }

  #sec-contacto .mapa-overlay { /* CONTEXTO: MediaQuery min-992px */
    font-size: 0.85rem;
    color: #2f5c59;
    font-weight: 600;
  }

/* === AJUSTE FINAL 992px: Fachada izquierda proporcionada / Info derecha fija === */
  /* CONTEXTO: MediaQuery min-992px */

  #sec-contacto {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: none !important;
  }

  /* 🔹 Fachada (slider animado) — izquierda */
  #sec-contacto .contacto-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 55vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    /*background-image: url('../img/contacto-fondo.png'); /* Ajustar si la ruta varía */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

  }

  /* 🔸 Imágenes proporcionadas dentro del slider */
  #sec-contacto .contacto-slider img {
    position: absolute;
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    object-position: center center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    top:70px;

  }

  #sec-contacto .contacto-slider img.activa {
    opacity: 1;
    z-index: 2;
  }

  /* 🔹 Panel de información fijo a la derecha */
  #sec-contacto .contacto-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 45vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.12);
    border-radius: 0;
    padding: 40px 60px;
  }

  /* 🔽 Línea divisoria */
  #sec-contacto .contacto-box::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
  }
/* 🔧 Elimina animaciones si existen en contacto-box */
  #sec-contacto .contacto-box {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
#sec-contacto .contacto-slider img {
  transition: opacity 0.7s ease-in-out; /* antes: 1.5s */
}

/* === AJUSTE 992px: Fachada izquierda más angosta / Info derecha ampliada === */
  /* CONTEXTO: MediaQuery min-992px */

  #sec-contacto {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: none !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  /* 🔹 Fachada izquierda (slider + fondo base reducido) */
  #sec-contacto .contacto-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 45vw; /* antes 55vw → más angosto */
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    /*background-image: url('../img/contacto-fondo.png');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* 🔸 Imágenes del slider */
  #sec-contacto .contacto-slider img {
    position: absolute;
    top: 70px;
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
  }

  #sec-contacto .contacto-slider img.activa {
    opacity: 1;
    z-index: 2;
  }

  /* 🔹 Panel de información fijo derecha (más ancho) */
  #sec-contacto .contacto-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 55vw; /* antes 45vw → gana espacio */
    height: 100vh;
    background: rgba(255, 255, 255, 0.97);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 40px 60px;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.12);
    border-radius: 0;

    /* 🔧 anula animaciones */
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* 🔽 Línea divisoria entre fachada e info */
  #sec-contacto .contacto-box::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
  }

  #sec-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
    background-color: #fff;
  }

  #sec-banner .banner-intermedio {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #sec-banner .banner-intermedio a {
    max-width: 480px;       /* 🔽 antes: 640px → tamaño reducido */
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  #sec-banner .banner-intermedio video {
    width: 100%;
    height: auto;
    max-height: 90vh;         /* 🔧 evita que sobrepase el alto visible */
    display: block;
    object-fit: contain;
    border-radius: 16px;
  } 

  /* 🔧 PREVENCIÓN DE SCROLL NO DESEADO EN DESKTOP */
  body,
  html {
    overflow-x: hidden;
  }

  #sec-banner {
    overflow: hidden; /* evita que el video o wrapper generen scroll */
  }


}

/*final 992*/


/* ===== ANIMACIÓN DE SUBMENÚ EN MENÚ LATERAL MÓVIL ===== */
@media screen and (max-width: 991px) {

  .menu ul.submenu { /* CONTEXTO: MediaQuery 991px */
    max-height: 0;                        /* cerrado por defecto */
    overflow: hidden;                     /* oculta ítems hasta abrir */
    padding-left: 15px;
    margin-top: 8px;
    border-left: 2px solid #eee;
    transition: max-height 0.3s ease;     /* animación de apertura */
    scrollbar-width: none;               /* oculta scrollbar en Firefox */
    -ms-overflow-style: none;            /* IE 10+ */
  }

  .menu ul.submenu::-webkit-scrollbar {  /* CONTEXTO: MediaQuery 991px */
    display: none;                       /* oculta scrollbar en WebKit */
  }

  /* Scroll interno aplicado SOLO al submenú abierto */
  .menu .has-submenu.abierto > ul.submenu,
  .menu .has-subsubmenu.abierto > ul.submenu { /* CONTEXTO: MediaQuery 991px */
    max-height: calc(100vh - 200px);     /* altura disponible ajustada */
    overflow-y: auto;                    /* scroll vertical si excede */
    -webkit-overflow-scrolling: touch;   /* scroll suave en móviles */
  }

  /* Scrollbar personalizado SOLO cuando se abre */
  .menu .has-subsubmenu.abierto > ul.submenu::-webkit-scrollbar,
  .menu .has-submenu.abierto > ul.submenu::-webkit-scrollbar { /* CONTEXTO: MediaQuery 991px */
    width: 6px;
  }

  .menu .has-subsubmenu.abierto > ul.submenu::-webkit-scrollbar-thumb,
  .menu .has-submenu.abierto > ul.submenu::-webkit-scrollbar-thumb { /* CONTEXTO: MediaQuery 991px */
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
  }

  #sec-nosotros { /* CONTEXTO: MediaQuery 991px */
    padding-right: 24px;
  }

  #sec-contacto { /* CONTEXTO: MediaQuery 991px */
    padding-left: 20px;
    padding-right: 24px;
    padding-top: 40px;
    box-sizing: border-box;
  }

  #sec-contacto .contacto { /* CONTEXTO: MediaQuery 991px */
    margin: 8px 0 0 0;
  }

  @media screen and (max-width: 991px) {
  .nosotros-portada img { /* CONTEXTO: MediaQuery 991px */
    max-width: 100%;
    border-radius: 8px;
  }
  .redes-desktop { /* CONTEXTO: MediaQuery 991px */
  display: none;
}
}

}

/* === RESPONSIVE === Ajustes para mobile en bienvenida */
/* ===== MEDIA QUERY: MOBILE (≤768px) ===== */
@media screen and (max-width: 768px) {

  /* 🔶 NUEVAS PROPIEDADES para estilo existente `.animacion-inicio` */
  .animacion-inicio { /* CONTEXTO: MediaQuery 768px */
    padding-left: 2rem;
    padding-right: 3.5rem;
    max-width: 100%;
  }

  /* 🔶 NUEVAS PROPIEDADES para estilo existente `.fadein-zoom` */
  .fadein-zoom { /* CONTEXTO: MediaQuery 768px */
    font-size: 1.6rem;
    line-height: 1.4;
    word-break: break-word;
  }

  /* 🔶 NUEVAS PROPIEDADES para estilo existente `.boton-ingresar` */
  .boton-ingresar { /* CONTEXTO: MediaQuery 768px */
    font-size: 16px;
    padding: 10px 24px;
    margin-top: 40px;
  }

  /* 🔶 NUEVAS PROPIEDADES para estilo existente `#sec-servicios .contenido-servicios` */
  #sec-servicios .contenido-servicios { /* CONTEXTO: MediaQuery 768px */
    padding: 60px 16px;
  }

  /* === NUEVO BLOQUE === Estilo exclusivo para video responsivo en mobile */
  .video-centro { /* CONTEXTO: MediaQuery 768px */
    max-height: 70vh;
  }

  /* 🔶 NUEVAS PROPIEDADES para estilo existente `.fp-right` */
  .fp-right { /* CONTEXTO: MediaQuery 768px */
    right: 26px !important;
  }

  /* 🔶 NUEVAS PROPIEDADES (mini-logo e iconos RRSS en mobile) */
  .brand-mini img { /* CONTEXTO: MediaQuery 768px */
    height: 32px;
  }
  .redes .rrss { /* CONTEXTO: MediaQuery 768px */
    width: 36px; 
    height: 36px;
  }
  .redes .rrss svg { /* CONTEXTO: MediaQuery 768px */
    width: 20px; 
    height: 20px;
  }

  /* 🔶 NUEVAS PROPIEDADES (tagline junto al logo) */
  .brand-text .linea1 { /* CONTEXTO: MediaQuery 768px */
    font-size: 11px;
  }
  .brand-text .linea2 { /* CONTEXTO: MediaQuery 768px */
    font-size: 10px;
  }
  .brand-text { /* CONTEXTO: MediaQuery 768px */
    max-width: 180px;
  }

  /* 🔶 NUEVAS PROPIEDADES para estilo existente `.btn-maps` */
  .btn-maps { /* CONTEXTO: MediaQuery 768px */
    height: 34px; 
    padding: 0 12px; 
    font-size: 13.5px;
  }
  .btn-maps::before { /* CONTEXTO: MediaQuery 768px */
    width: 14px; 
    height: 14px; 
  }

  /* === NUEVO BLOQUE === Mobile, versión compacta solo ícono (tipo FAB) */
  .wa--pill { /* CONTEXTO: MediaQuery 768px */
    padding: 12px;
    border-radius: 999px;
  }
  .wa--pill .wa-label { /* CONTEXTO: MediaQuery 768px */
    display: none;
  }
  .wa--pill .wa-ico { /* CONTEXTO: MediaQuery 768px */
    width: 28px; 
    height: 28px;
  }

  /* 🔶 NUEVAS PROPIEDADES para ajustar la fachada en móviles */
  #sec-contacto { /* CONTEXTO: MediaQuery 768px */
    background-size: cover;
    background-position: center;
  }

  #sec-publicaciones { /* CONTEXTO: MediaQuery 768px */
    padding-right: 41px;
    box-sizing: border-box;
  }

  /* === BLOQUE FINAL CORREGIDO === Slider “Nosotros” optimizado */
  .nosotros-slider { /* CONTEXTO: MediaQuery 768px */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 280px; /* altura razonable en mobile */
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    position: relative;
  }

  /* === BLOQUE NUEVO === Imágenes del slider adaptativas === */
  .nosotros-slider img { /* CONTEXTO: MediaQuery 768px */
    position: absolute !important; /* ✅ mantiene superposición para el fade */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center center;
    border-radius: 0 !important;
    opacity: 0;
    transition: opacity 1.3s ease-in-out;
    z-index: 0;
  }

  .nosotros-slider img.activa { /* CONTEXTO: MediaQuery 768px */
    opacity: 1;
    z-index: 2;
  }
  #sec-nosotros { /* CONTEXTO: MediaQuery 768px */
    padding-top: 8vh;
    padding-bottom: 10vh;
  }

  #sec-nosotros p { /* CONTEXTO: MediaQuery 768px */
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 1.2rem;
  }

   #sec-banner {
    min-height: 70vh; /* altura cómoda en mobile */
  }
}