/* =========================================
   ALUCRIS · tokens y base
   ========================================= */
:root{
  /* Brand */
  --brand:#4E6681;        /* azul acero */
  --brand-600:#3A4757;    /* hover */
  --brand-400:#6D8AA7;
  --brand-200:#A0BBD7;

  /* Neutrales cromados */
  --ink-900:#161A20; --ink-700:#303640; --ink-500:#4F5763;
  --ink-300:#78818D; --ink-200:#A9B0BA; --ink-050:#E8EAEE; --white:#fff;

  /* Estados */
  --ok:#2CA58D; --warn:#E7A53A; --err:#C85858;

  /* Alturas hero por dispositivo (ajustan el slider) */
  --hero-h-mobile:56vh;
  --hero-h-tablet:68vh;
  --hero-h-desktop:82vh;
}

:root[data-theme="light"]{
  --bg:var(--ink-050); --card:#fff; --text:#161A20; --muted:#4F5763;
  --border:#E0E4EA; --link:var(--brand); --link-hover:var(--brand-600);
  --btn-bg:var(--brand); --btn-text:#fff;
}
:root[data-theme="dark"]{
  --bg:#0B0F14; --card:#12161C; --text:#fff; --muted:#A9B0BA;
  --border:#1E242C; --link:var(--brand-200); --link-hover:var(--brand);
  --btn-bg:var(--brand); --btn-text:#fff;
}



/* Base */
body{
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  letter-spacing:.2px;
}
html,body{height:100%}

main#content{flex:1 0 auto}
a{color:var(--link)} a:hover{color:var(--link-hover)}
/*h1,h2,h3,h4,h5{color:var(--text);
   font-weight:700}*/

/* Utilidades*/
.text-brand{color:var(--brand)!important}
.bg-brand{background:var(--brand)!important;color:#fff!important}
.btn-brand{background:var(--btn-bg);color:var(--btn-text);border:1px solid transparent}
.btn-brand:hover{background:var(--brand-600);color:#fff}
.btn-outline-brand{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn-outline-brand:hover{background:var(--brand);color:#fff}

/* =========================================
   Menú superior
   ========================================= */
   :root{
     --brand: #4E6681; --brand-600:#3A4757; --brand-200:#A0BBD7;
     --ink-900:#161A20; --border:#1E242C;
     --nav-h: 72px; /* alto aprox de la barra */
   }
   /* = Navbar ‘glass’ ALUCRIS */
   .navbar-custom{
     position: fixed; inset: 0 0 auto 0;
     backdrop-filter: blur(10px);
     background: linear-gradient(180deg, rgba(10,14,18,.75), rgba(10,14,18,.55));
     border-bottom: 1px solid rgba(255,255,255,.10);
     box-shadow: 0 10px 26px rgba(0,0,0,.22);
     transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
   }
   .navbar-scrolled{
     background: linear-gradient(180deg, rgba(10,14,18,.95), rgba(10,14,18,.88)) !important;
     border-bottom-color: rgba(255,255,255,.16);
     box-shadow: 0 14px 32px rgba(0,0,0,.28);
   }

   .navbar-custom .navbar-brand img{ height:70px; width:auto; transition:all .25s; }
   .navbar-scrolled .navbar-brand img{ height:38px; }

   .navbar-custom .nav-link{
     position: relative;
     color: #fff !important;
     font-weight: 700;
     letter-spacing:.2px;
     padding: .6rem 1rem !important;
     border-radius: 10px;
     transition: color .2s ease, background-color .2s ease;
   }
   .navbar-custom .nav-link:hover{
     color: var(--brand-200) !important;
     background: rgba(255,255,255,.06);
   }

   /* Indicador activo (funciona con .active de Bootstrap) */
   .navbar-custom .nav-link.active::after{
     content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
     background: linear-gradient(90deg, var(--brand-600), var(--brand));
     border-radius: 999px;
   }

   /* Menú colapsado en móvil: panel legible */
   @media (max-width: 991.98px){
     .navbar-custom .navbar-collapse{
       background: rgba(10,14,18,.95);
       border: 1px solid rgba(255,255,255,.10);
       border-radius: 14px;
       padding: .75rem;
       margin-top: .5rem;
       box-shadow: 0 14px 36px rgba(0,0,0,.35);
     }
     .bg-mobile-menu .nav-link{ color:#fff !important; }
   }

   /* Botón CONTACTO en la barra */
   .btn-cita-previa,
   .btn-contacto{
     border: 2px solid #fff; color:#fff !important; background: transparent;
     border-radius: 10px; font-weight: 800; padding: .5rem 1rem; letter-spacing:.3px;
     transition: all .25s;
   }
   .btn-cita-previa:hover,
   .btn-contacto:hover{ background: var(--brand); border-color: var(--brand); color:#fff !important; }

   /* Hamburguesa blanca */
   .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='white' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
   }

   .navbar-custom{
     backdrop-filter: blur(10px);
     background: linear-gradient(180deg, rgba(10,14,18,.85), rgba(10,14,18,.65));
     border-bottom: 1px solid rgba(255,255,255,.10);
     box-shadow: 0 10px 26px rgba(0,0,0,.22);
   }
   .navbar-custom .nav-link{
     color:#fff !important; font-weight:800; letter-spacing:.2px;
     padding:.6rem 1rem !important; border-radius:10px;
   }
   .navbar-custom .nav-link:hover{
     color:var(--brand-200)!important; background:rgba(255,255,255,.06);
   }
   .navbar-custom .nav-link.active::after{
     content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
     background:linear-gradient(90deg,var(--brand-600),var(--brand)); border-radius:999px;
   }

   /* =========================
   NAVBAR BLANCA · ALUCRIS
   ========================= */
.navbar-custom.navbar--light{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.25);
  border-bottom: 1px solid #E6ECF3;
  box-shadow: 0 10px 26px rgba(17,24,32,.06);
}
.navbar-scrolled.navbar--light{
  background: #FFFFFF !important;
  border-bottom-color: #DDE5EE;
  box-shadow: 0 14px 32px rgba(17,24,32,.12);
}

/* Logo */
.navbar--light .navbar-brand img{ height:70px; width:auto; transition:all .25s; }
.navbar-scrolled.navbar--light .navbar-brand img{ height:38px; }

/* Links */
.navbar--light .nav-link{
  position:relative;
  /*color: var(--brand-600) !important;*/
  font-weight: 800;
  letter-spacing:.2px;
  padding:.6rem 1rem !important;
  border-radius:10px;
  transition: color .2s ease, background-color .2s ease;
}
.navbar--light .nav-link:hover{
  color: var(--brand) !important;
  background: rgba(78,102,129,.08);
}
/* Indicador activo */
.navbar--light .nav-link.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: linear-gradient(90deg, var(--brand-600), var(--brand));
  border-radius:999px;
}

/* Dropdowns sobre fondo blanco */
.navbar--light .dropdown-menu{
  background:#fff; border:1px solid #E6ECF3;
  box-shadow:0 16px 36px rgba(17,24,32,.12);
}
.navbar--light .dropdown-item{ color: var(--ink-700); font-weight:600; }
.navbar--light .dropdown-item:hover{ background: rgba(78,102,129,.08); color: var(--brand-600); }

/* Colapsado en móvil */
@media (max-width: 991.98px){
  .navbar--light .navbar-collapse{
    background:#fff;
    border:1px solid #E6ECF3; border-radius:14px; padding:.75rem; margin-top:.5rem;
    box-shadow:0 14px 36px rgba(17,24,32,.14);
  }
}
/* Hamburguesa en oscuro para nav blanca */
.navbar--light .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='%23222' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Prioridades de z-index (para que nada quede detrás) */
.offcanvas, .dropdown-menu { z-index: 1206 !important; }
.offcanvas-backdrop         { z-index: 1200 !important; }
.navbar-custom              { z-index: 1070 !important; }


/* Links del menú (no el botón) */
.navbar--light .nav-link{
  position:relative;
  color: var(--ink-700) !important;
  font-weight: 800; letter-spacing:.2px;
  /* padding:.55rem 1rem !important;*/
  /* border-radius: 999px;  pill suave */
  transition: background-color .2s ease, color .2s ease;
}
.navbar--light .nav-link:hover,
.navbar--light .nav-link:focus-visible{
  color: var(--brand) !important;
  background: rgba(78,102,129,.10);
  outline: none;
}

/* Subrayado elegante (hover/activo) */
.navbar--light .nav-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand));
  transform: scaleX(0); transform-origin:left;
  transition: transform .22s ease; opacity:.9; border-radius:999px;
}
.navbar--light .nav-link:hover::after,
.navbar--light .nav-link.active::after,
.navbar--light .nav-link:focus-visible::after{ transform: scaleX(1); }

/* Separación visual suave entre items grandes */
@media (min-width:992px){
  .navbar--light .navbar-nav .nav-item + .nav-item{ margin-left:.15rem; }
}


/* =========================
   BOTÓN CONTACTO · elegante
   ========================= */
.btn-contacto{
  --b1: #4E6681;          /* brand */
  --b2: #3A4757;          /* brand dark */
  background: linear-gradient(180deg,var(--b1),var(--b2));
  color:#fff !important;
  border:0;
  border-radius: 999px;
  padding:.6rem 1.2rem;
  letter-spacing:.3px; font-weight:800;
  box-shadow: 0 8px 18px rgba(78,102,129,.22), inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateZ(0); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-contacto:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(78,102,129,.30), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-contacto:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(78,102,129,.26); }

/* Variante “contorno” por si la necesitas en fondos oscuros */
.btn-contacto--outline{
  background: transparent; color: var(--brand-600) !important;
  border: 2px solid var(--brand-600); border-radius:999px;
}
.btn-contacto--outline:hover{ background: var(--brand-600); color:#fff !important; }


/* =========================================
   Slider / Hero (corrige cortes en portátiles)
   ========================================= */
   /* alturas fluidas y sin recortes */
   #heroCarousel{
     --hero-h-mobile:56vh; --hero-h-tablet:68vh; --hero-h-desktop:86vh;
   }
   @media (min-width:576px){ #heroCarousel{ --hero-h-mobile:64vh; } }
   @media (min-width:992px){ #heroCarousel{ --hero-h-desktop:86vh; } }

   #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item{ height:var(--hero-h-desktop); }
   @media (max-width:991.98px){
     #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item{ height:var(--hero-h-mobile); }
   }

   #heroCarousel .carousel-item img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

   /* leyenda */
   #heroCarousel .carousel-caption{
     position:absolute; inset:auto 0 8% 0;
     text-align:left; padding:0 6vw;
   }
   @media (min-width:992px){
     #heroCarousel .carousel-caption{ inset:0 0 0 0; display:flex; align-items:center; }
   }
   .caption-box{
     /*background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));*/
     display:inline-block; padding:clamp(12px,2vw,24px) clamp(14px,2.2vw,28px);
     border-radius:12px;
   }
   #heroCarousel .carousel-caption h5{
     font-size:clamp(1.6rem,3.5vw,3.4rem); font-weight:800; color:#fff; margin:0 0 .35rem;
   }
   #heroCarousel .carousel-caption p{
     font-size:clamp(1rem,1.8vw,1.35rem); font-weight:500; color:#EDEFF2; margin:0;
   }

   /* si mantienes el nav dentro del hero, evita recortes */
   #heroCarousel{ overflow: visible; } /* <-- solo si no mueves el nav */

   /* Asegura stacking */
#heroCarousel .carousel-item{ position: relative; }

/* Overlay con gradiente (ajusta opacidades a tu gusto) */
#heroCarousel .carousel-item::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,14,18,.20) 0%, rgba(10,14,18,.38) 45%, rgba(10,14,18,.50) 100%);
  z-index:1; pointer-events:none;
}

/* Los textos por encima del overlay */
#heroCarousel .carousel-caption{ z-index:2; }




/* =========================================
   Footer
   ========================================= */
footer.footer{
  background:var(--ink-900);
  color:#fff; padding:28px 0; margin-top:0;
  border-top:1px solid var(--border)
}
.footer a{color:var(--brand-200); text-decoration:none}
.footer a:hover{color:#fff}

/* =========================================
   Formulario / Offcanvas de contacto
   ========================================= */
.offcanvas-brand{
  background:linear-gradient(120deg,var(--ink-900),var(--brand-600));
  color:#fff; width:min(520px,92vw); border-left:0;
  box-shadow:-10px 0 30px rgba(0,0,0,.35)
}
.offcanvas-brand .offcanvas-header{ padding:1.1rem 1.25rem 0 }
.offcanvas-brand .offcanvas-body{ padding:1rem 1.25rem 1.5rem }

.form-control-dark{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff
}
.form-control-dark::placeholder{color:rgba(255,255,255,.65)}
.form-control-dark:focus{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.35);
  color:#fff; box-shadow:0 0 0 .2rem rgba(255,255,255,.12)
}

/* select */
.form-select-dark{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; border-radius:6px; padding:.6rem 2.5rem .6rem .9rem;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C2.063 5.204 2.46 4.5 3.204 4.5h9.592a1 1 0 0 1 .753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:1rem;
}
.form-select-dark:hover{border-color:#fff}
.form-select-dark:focus{
  background:rgba(255,255,255,.12);
  border-color:var(--brand-200);
  box-shadow:0 0 0 .2rem rgba(160,187,215,.25);
  color:#fff; outline:0
}
.form-select-dark option{ background:#0F1318; color:#fff }

/* 1) Orden correcto de superposiciones */
.offcanvas            { z-index: 1205 !important; }   /* panel arriba del todo */
.offcanvas-backdrop   { z-index: 1200 !important; }   /* backdrop por debajo del panel */
.navbar-custom        { z-index: 1070 !important; }   /* barra por encima del hero, debajo del offcanvas */
.dropdown-menu        { z-index: 1206 !important; }   /* dropdowns siempre sobre la barra */

/* 2) Asegura que el panel acepta clics (por si hay alguna regla heredada rara) */
.offcanvas, .offcanvas * { pointer-events: auto; }

/* 3) Backdrop más suave (para que no “apague” tanto la página) */
.offcanvas-backdrop.show { opacity: .45; } /* Bootstrap usa la opacidad de esta clase */
/* Vídeo a pantalla completa dentro del slide */
.hero-video{
  width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
/* (por si mezclas imagen/vídeo en un slide) */
.carousel-item.is-video img{ display:none; }

/* === HERO · centrado de la leyenda en desktop === */
:root{ --nav-h:72px; /* fallback, se recalcula por JS */ }

/* Móvil/Tablet: leyenda hacia la parte baja (como ahora) */
#heroCarousel .carousel-caption{
  position:absolute;
  left:0; right:0;
  bottom: 8%;
  top: auto;
  transform: none;
  padding: 0 6vw;
  text-align: left;
  z-index: 2; /* por encima del overlay */
}

/* Desktop (≥992px): centrado vertical y ligero desplazamiento */
@media (min-width:992px){
  #heroCarousel .carousel-caption{
    bottom: auto;
    top: calc(50% + (var(--nav-h) * 0.08)); /* baja un pelín para evitar “pegarse” a la barra */
    transform: translateY(-50%);
    padding-top: 0; /* no hace falta padding-top, usamos top+translate */
  }
  /* opcional: limitar ancho del bloque de texto */
  #heroCarousel .caption-box{
    max-width: min(780px, 52vw);
  }
}

/* Vídeo y overlay (por si no lo tenías ya) */
#heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item{
  height: 76vh; min-height: 460px;
}
@media (max-width:991.98px){
  #heroCarousel, #heroCarousel .carousel-inner, #heroCarousel .carousel-item{
    height: 56vh; min-height: 320px;
  }
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
#heroCarousel .carousel-item::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,14,18,.20), rgba(10,14,18,.50));
  z-index:1; pointer-events:none;
}

/* ============= AJUSTES PORTADA ============= */

/* 1) HERO: centrar leyenda del slider (imagen y vídeo) */
#heroCarousel .carousel-caption{
  left: 50%;
  right: auto;
  bottom: auto;
  top: calc(70% + (var(--nav-h) * 0.08));
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0 4vw;
  width: min(880px, 92vw);
  z-index: 2; /* por encima del overlay */
}
#heroCarousel .caption-box{
  margin: 0 auto;                 /* centra el bloque */

}

/* 2) NAVBAR: alinear verticalmente menú y logo (≥992px) */
@media (min-width: 992px){
  .navbar--light .navbar-brand{
    display:flex; align-items:center;
  }
  .navbar--light .navbar-brand img{
    height: 56px;                 /* ajusta si lo ves grande/pequeño */
    width: auto;
  }
  .navbar--light .navbar-collapse{
    display:flex; align-items:center;
  }
  .navbar--light .navbar-nav{
    align-items:center;
  }
  .navbar--light .navbar-nav .nav-link{
    padding: .65rem 1rem;
    line-height: 1;
    display:flex; align-items:center;   /* centra vertical el texto del link */
  }
}

/* 3) “Píldora” blanca detrás del menú principal (≥992px) */
@media (min-width: 992px){
  /* solo al UL izquierdo (me-auto) para no afectar al botón CONTACTO */
  .navbar--light #navbarNav .navbar-nav.me-auto{
    background: #fff;
    border: 1px solid #E6ECF3;
    border-radius: 999px;
    padding: .25rem;               /* espacio interior de la píldora */
    margin-left: .25rem;
    box-shadow: 0 6px 18px rgba(17,24,32,.06);
  }
  .navbar--light #navbarNav .navbar-nav.me-auto .nav-link{
    border-radius: 999px;          /* links con pill suave dentro */
  }
  /* separa el bloque de CONTACTO si lo ves pegado */
  .navbar--light #navbarNav .navbar-nav + .navbar-nav{
    margin-left: .75rem;
  }
}



/* ===== Parallax solo derecha ===== */

/* si tenías el parallax “full” con ::before, lo anulamos */
.parallax-alucris::before{ display:none !important; }

.parallax-alucris{
  --h: clamp(380px, 58vh, 720px);
  position: relative;
  min-height: var(--h);
  display: flex; align-items: center;
  overflow: hidden;
  color: var(--text); /* texto oscuro a la izquierda */
}

/* Capa de imagen ocupando SOLO la mitad derecha */
.parallax-alucris .parallax-media{
  position: absolute;
  top: -12%; bottom: -12%;
  left: 50%; right: -10%;          /* mitad derecha + margen para que el translate no recorte */
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--parallax), 0);
  will-change: transform;
  z-index: 0;
  border-top-left-radius: 16px;    /* esquina suave opcional */
  border-bottom-left-radius: 16px;
}

/* Degradado para legibilidad: blanco a la izquierda -> transparente a la derecha */
.parallax-alucris::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%,
                                   rgba(255,255,255,.92) 32%,
                                   rgba(255,255,255,.38) 58%,
                                   rgba(255,255,255,0) 76%);
  z-index: 1;
}

/* Contenido siempre por encima */
.parallax-alucris .parallax-content{ position: relative; z-index: 2; }
.parallax-alucris .eyebrow{
  display:inline-block; font-weight:800; letter-spacing:.3px;
  background: rgba(78,102,129,.08);
  border:1px solid #E6ECF3;
  padding:.35rem .75rem; border-radius:999px;
  margin-bottom:.75rem;
}
.parallax-alucris h2{
  font-weight:800; margin:0 0 .35rem; line-height:1.1;
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
}
.parallax-alucris .lead{
  color: var(--ink-700);
  font-weight:500; margin-bottom:1.1rem;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}

/* Botones */
.parallax-alucris .btn-outline-brand{ border-width:2px; }

/* Responsive: en móvil la imagen puede ocupar todo el fondo (más legible) */
@media (max-width: 991.98px){
  .parallax-alucris{ color:#fff; }
  .parallax-alucris .parallax-media{ left:-10%; right:-10%; border-radius: 0; }
  .parallax-alucris::after{
    background: linear-gradient(180deg, rgba(10,14,18,.35), rgba(10,14,18,.55));
  }
  .parallax-alucris .eyebrow{
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.35);
  }
  .parallax-alucris .lead{ color:#EDEFF2; }
}

/* Respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  .parallax-alucris .parallax-media{ transform:none !important; }
}

.intro-prl__card{
  position: relative;
}
.intro-prl__card::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:6px; border-radius:16px 16px 0 0;
  background: linear-gradient(90deg, var(--brand-600), var(--brand));
}