/* =============================
   Variables & base
============================= */
:root{
  --bg:#f6f6f6;
  --card:#ffffff;
  --ink:#111111;
  --muted:#6b7280;
  --line:#eaeaea;
  --accent:#b9a48c; /* acento neutro cálido */
  --ring:rgba(185,164,140,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  color:var(--ink);
  background:var(--bg);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}

/* ============================================================
   Plastic Surgery Cabo – Diseño secciones (Hero + Alternados)
   ============================================================ */

/* --------- HERO principal --------- */
.psc-hero {
  position: relative;
  min-height: clamp(380px, 50vw, 520px);
  display: grid;
  align-items: end;
  padding: 64px 0 72px;
  color: #fff;
  overflow: hidden;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

.psc-hero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  transition: transform 5s ease;
  will-change: transform;
}

.psc-hero:hover .psc-hero__bg {
  transform: scale(1.05);
}

.psc-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 500px at 15% 0%, rgba(0, 0, 0, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.55) 70%);
}

.psc-hero__content {
  position: relative;
  z-index: 2;
}

.psc-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.82rem;
  opacity: 0.95;
  margin-bottom: 8px;
}

.psc-hero__title {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.1;
  margin: 0 0 8px;
  font-weight: 800;
}

.psc-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  opacity: 0.92;
  max-width: 740px;
}

.psc-hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* --------- Botones --------- */
.btn {
  padding: 0.7rem 1.2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
  transition: all 0.25s ease;
}

.btn-primary {
  background: #3b5cff;
  border: 1px solid #3b5cff;
  color: #fff;
}

.btn-primary:hover {
  background: #243bb1;
  border-color: #243bb1;
  transform: translateY(-1px);
}

.btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #fff;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}


/* --------- WOW.js ajustes --------- */
.wow {
  visibility: hidden;
}

.animate__animated {
  visibility: visible !important;
}

/* ===== Split promo blocks ===== */
.psc-split{
  position: relative;
  display: grid;
  /* POR ESTA LÍNEA: */
  grid-template-columns: 620px 1fr;

  background: #ffffffd9;
  isolation: isolate;
}
.psc-split + .psc-split{ margin-top: 36px; }

.psc-split__media{
  background: linear-gradient(0deg, rgba(0,0,0,.0), rgba(0,0,0,.0)),
              var(--img) center/cover no-repeat;
  min-height:120px;
 
  
  
}
.psc-split--right{ direction: rtl; }            /* invierte orden visual */
.psc-split--right > *{ direction:ltr; }         /* mantiene texto normal */



/* lado de contenido */
.psc-split__content{
  display: grid;
  place-items: center;
  padding: clamp(24px, 3vw, 40px);
  background:
    radial-gradient(1000px 600px at 0% 0%, rgba(59,92,255,.06), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.psc-split__card{
  max-width: 620px;
  background: #fff;
  border: 1px solid rgba(2,6,23,.06);
  box-shadow: 0 24px 60px rgba(2,6,23,.10);
  border-radius: 18px;
  padding: clamp(18px, 2.6vw, 28px);
}

.psc-eyebrow{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#ffffff;
  margin-bottom:6px;
}

.psc-split__title{
  font-weight:800;
  letter-spacing:-.02em;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  margin: 0 0 8px;
  color:#0f172a;
}
.psc-split__lead{
  color:#334155;
  margin:0 0 10px;
  line-height:1.65;
}

.psc-split__list{
  margin:0 0 14px 0; padding-left:18px;
  color:#475569;
}
.psc-split__list li{ margin: 4px 0; }

.psc-split__cta .btn{ margin-right:10px; margin-top:6px; }

/* responsive */
@media (max-width: 991.98px){
  .psc-split{
    grid-template-columns: 1fr;       /* apila */
    min-height: unset;
  }
  .psc-split__media{ min-height: 280px; }
  .psc-split--right{ direction:ltr; }
}

/* WOW visibility fix */
.wow{ visibility:hidden; }
.animate__animated{ visibility:visible !important; }



/* =============================
   Navbar
============================= */
.navbar-clean{
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
  transition:all .2s ease;
}
.navbar-clean .brand-mark{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--ink),#444);
  display:inline-block;
}
.navbar-clean .brand-text{font-weight:600;letter-spacing:.2px}
.navbar-clean .divider{display:inline-block;width:1px;height:20px;background:var(--line)}

/* navbar shrink */
.navbar-clean.navbar-scrolled{
  padding-top:.35rem!important;
  padding-bottom:.35rem!important;
}

/* ====== Tipografía base ====== */
:root{
  --ff-head: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ink:#0f172a; --muted:#6b7280; --line:#e5e7eb; --accent:#CD7F32;
}

body{ font-family: var(--ff-body); color:var(--ink); letter-spacing: .1px; }

/* Escala de títulos */
.h1, h1{ font-family:var(--ff-head); font-weight:700; letter-spacing:.2px; }
.h2, h2{ font-family:var(--ff-head); font-weight:700; letter-spacing:.15px; }
.h3, h3{ font-family:var(--ff-head); font-weight:600; letter-spacing:.1px; }
.h4, h4{ font-family:var(--ff-head); font-weight:600; }
.h5, h5, .h6, h6{ font-family:var(--ff-head); font-weight:600; }

/* Ajustes hero / secciones */
.hero-title{ line-height:1.1; }
.section-head h2{ margin-bottom:.25rem; }
.section-head p{ color:var(--muted); }

/* Párrafo destacado */
.lead{ font-size:1.08rem; color:var(--ink); }

/* Navbar más fino */
.navbar-clean .nav-link{ font-family:var(--ff-head); font-weight:600; letter-spacing:.4px; }

/* Botones */
.btn, .readon{
  font-family:var(--ff-head); font-weight:600; letter-spacing:.3px;
  border-radius: .8rem;
}

/* ===== Dropdown del navbar – look moderno ===== */
.navbar .dropdown.nav-proc { position: relative; }

/* Botón: rotación del caret al abrir */
.navbar .nav-proc .dropdown-toggle::after{
  transition: transform .18s ease;
}
.navbar .dropdown.show .dropdown-toggle::after{
  transform: rotate(180deg);
}

/* Caja del menú */
.navbar .dropdown-menu.dropdown-menu-proc{
  min-width: 260px;
  padding: 10px;
  margin-top: 12px;                /* separación del navbar */
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.96);  /* glassy */
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 32px rgba(2,6,23,.18);

  /* animación de aparición */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Estado visible (Bootstrap añade .show) */
.navbar .dropdown-menu.show{
  opacity: 1;
  transform: translateY(0);
}

/* Ítems */
.navbar .dropdown-item{
  padding: 10px 14px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #0f172a;
  border-radius: 10px;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{
  color: #243bb1;                     /* usa tu “primary” si quieres */
  background: rgba(59,92,255,.10);
  text-decoration: none;
}

/* Opcional: tono oscuro - navbar oscuro
.navbar.navbar-dark .dropdown-menu.dropdown-menu-proc{
  background: rgba(17,24,39,.96);
  border-color: rgba(255,255,255,.08);
}
.navbar.navbar-dark .dropdown-item{ color: #e5e7eb; }
.navbar.navbar-dark .dropdown-item:hover{ color:#fff; background: rgba(255,255,255,.08); }
*/


/* =============================
   Hero
============================= */
.hero-hero{position:relative;min-height:72vh;display:flex;align-items:center}
.hero-bg{
  position:absolute;inset:0;
  background:url('../images/slider/h1-sl1.jpg') center/cover no-repeat;
  filter:grayscale(100%);
  transform:scale(1.03);
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55))}
.hero-content{position:relative;color:#fff}
.hero-title{font-weight:700}
.hero-sub{opacity:.95}
.badge-soft{
  display:inline-block;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);color:#fff;
  padding:.35rem .6rem;border-radius:999px;margin-right:.4rem;margin-bottom:.4rem;
}

/* =================================== */
/* CSS para Galería Antes y Después    */
/* =================================== */

.galeria-antes-despues {
  display: grid;
  /* Esto crea las columnas automáticas.
     Le dice al navegador: "Crea columnas que midan 
     como mínimo 300px y como máximo 1fr (una fracción 
     del espacio disponible)". 
     Esto hace que sea responsive.
  */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px; /* Este es el espacio entre cada tarjeta */
}

.caso-card {
  background-color: #ffffff; /* Fondo blanco para la tarjeta */
  border: 1px solid #eaeaea; /* Borde gris muy claro */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra suave */
  overflow: hidden; /* Importante para que la imagen respete los bordes redondeados */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación al pasar el mouse */
}

.caso-card:hover {
  transform: translateY(-5px); /* Levanta la tarjeta al pasar el mouse */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada */
}

.caso-card__media {
  line-height: 0; /* Corrige un espacio extra que a veces aparece bajo las imágenes */
}

.caso-card__media img,
.caso-card__media video {
  width: 100%;  /* <-- ESTA ES LA REGLA QUE HACE QUE "ENCAJE" */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block;
}

.caso-card__body {
  padding: 25px; /* Espacio interno para el texto */
}

.caso-card__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.caso-card__body p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 0;
}

/* =============================
   Secciones
============================= */
.section{padding:56px 0}
.section-tight{padding:40px 0}
.section-muted{background:#fff}
.section-contrast{background:#fff}

/* encabezados de sección */
.section-head{margin-bottom:22px}

/* =============================
   Cards de servicios
============================= */
.svc-card{
  display:block;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.svc-media{
  height:200px;background:#ddd center/cover no-repeat;filter:grayscale(100%);
  transition:filter .2s ease, transform .25s ease;
}
.svc-card:hover .svc-media{filter:grayscale(90%);transform:scale(1.02)}
.svc-body{padding:16px}
.svc-text{color:var(--muted);margin-bottom:.4rem}
.svc-link{font-weight:600;color:var(--ink);text-decoration:underline}

/* =============================
   Spa bloque
============================= */
.spa-media{
  height:320px;border-radius:16px;border:1px solid var(--line);
  background:url('../img/spa/spa.jpg') center/cover no-repeat;
  filter:grayscale(100%);
}
.list-checked{padding-left:1.25rem;margin:0}
.list-checked li{margin:.35rem 0;color:var(--muted);position:relative}
.list-checked li::before{
  content:"";position:absolute;left:-1.25rem;top:.45rem;
  width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);
}

/* =============================
   Doctor
============================= */
.doctor-section{ padding-top:48px; padding-bottom:48px; }
.doc-copy{ max-width: 62ch; }                 /* ancho de lectura cómodo */
.lead{ color: var(--muted); }

/* Píldoras de confianza */
.badge-soft{
  display:inline-block; margin:0 8px 8px 0;
  padding:.42rem .65rem; border-radius:999px;
  border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:600;
  font-size:.9rem;
}
.doc-badges{ margin-left:-2px; }

/* Lista de formación (bullets limpios) */
.doc-list{ margin:0 0 18px 0; padding:0; list-style:none; }
.doc-list li{
  position:relative; padding-left:22px; margin:10px 0; color:var(--ink);
}
.doc-list li::before{
  content:""; position:absolute; left:0; top:.55rem;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}

/* Cita */
.doc-quote{
  margin:18px 0 0; padding:14px 16px;
  border-left:3px solid var(--accent); background:#fff; border-radius:8px;
}
.doc-quote p{ margin:0 0 6px; font-style:italic; }
.doc-quote cite{ color:var(--muted); font-size:.95rem; }

/* Foto / figura */
.doc-figure {
  margin: 0 auto 60px auto;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 340px; /* controla el ancho total del contenedor */
}

.doc-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4; /* mantiene proporción vertical */
  object-fit: cover;   /* recorta sin deformar */
  filter: grayscale(100%);
}


/* Si usas el div con background en vez de <img> */
.doc-photo{
  height:420px; border-radius:16px; border:1px solid var(--line);
  background:url('../img/doctor/doctor.jpg') center/cover no-repeat;
  filter:grayscale(100%);               /* quítalo si quieres a color */
}

/* Responsivo fino */
@media (max-width: 991.98px){
  .doc-copy{ max-width: 100%; }
}


/* =============================
   Reviews
============================= */
.review-card{
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
  border: 1px solid rgba(15, 23, 42, .06);
}

.review-card:after{
  content: "";
  position: absolute;
  left: 40px; bottom: -12px;
  width: 22px; height: 22px;
  background: #fff;
  transform: rotate(45deg);
  border-right: 1px solid rgba(15, 23, 42, .06);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
}

.review-name{
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  color: #0f172a;
}

.review-stars{
  color: #f5b50a;
  margin-bottom: 10px;
  font-size: 16px;
}

.review-text{
  margin: 0;
  color: #334155;
  font-size: 16px;
}

/* Swiper helpers */
.review-swiper{ overflow: hidden; }
.review-swiper .swiper-slide{ height: auto; }


/* =============================
   Contacto
============================= */
.contact-form .form-control{
  border-radius:10px;border:1px solid var(--line);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.contact-form .form-control:focus{
  border-color:var(--accent);box-shadow:0 0 0 .2rem var(--ring);
}
.hp{display:none !important}

.map-card{
  border:1px solid var(--line);border-radius:1px;overflow:hidden;background:#fff;
}
.map-card iframe{width:100%;height:100%; min-width: 900px; min-height: 400px; border:0;display:block}
.map-data{padding:14px; width: 100%;}

/* =============================
   Footer
============================= */
.footer{padding:22px 0;border-top:1px solid var(--line);background:#fff}
.footer a{color:inherit}

/* =============================
   Botón WhatsApp
============================= */
.wa-float{
  position:fixed;right:16px;bottom:16px;width:76px;height:76px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;font-size:26px;text-decoration:none;
  box-shadow:0 10px 20px rgba(0,0,0,.15);z-index:1000;
}
.wa-float:hover{transform:translateY(-2px)}

/* =================================== */
/* CTA PROFESIONAL (Fin de página)     */
/* =================================== */

.cta-premium-section {
  position: relative;
  padding: 100px 0; /* Más espacio vertical */
  color: #fff;
  
  /* --- ¡CAMBIA ESTA IMAGEN DE FONDO! --- */
  /* Usa una imagen B&N de alta calidad que tengas */
  background-image: url('../images/banner/banner3.jpeg'); 
  
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);       /* <-- B&N SOLO para el fondo */
  z-index: -1;  
  
  /* --- Este es el efecto Parallax --- */
  background-attachment: fixed; 
}

.cta-premium-overlay {
  position: absolute;
  inset: 0; /* Abarca todo (top:0, left:0, right:0, bottom:0) */
  
  /* Usa el color azul oscuro de tu footer para unificar el diseño */
  /* La opacidad de 0.85 permite ver la imagen pero oscurece el texto */
  background-color: rgba(38, 48, 67, 0.85); 
  
  z-index: 1;
}

.cta-premium-content {
  position: relative; /* Se pone por encima del overlay */
  z-index: 2;
}

.cta-premium-content h2 {
   font-weight: 700;
   font-size: 2.5rem; /* Título más grande */
   color: #fff;
}

.cta-premium-content p {
   font-size: 1.2rem;
   color: rgba(255,255,255,0.9);
   max-width: 500px; /* Mejora la legibilidad */
   margin-left: auto;
   margin-right: auto;
}

/* Hacemos el botón más grande y moderno */
.cta-premium-content .btn {
   font-size: 1.1rem;
   padding: 12px 30px;
   border-radius: 50px; /* Botón redondeado "píldora" */
   transition: all 0.3s ease;
}

.cta-premium-content .btn:hover {
  transform: translateY(-2px) scale(1.05); /* Efecto sutil al pasar el mouse */
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* =============================
   Botones
============================= */
.btn-cta{
  background:var(--ink);border-color:var(--ink)
}
.btn-agendar{ background: #000; border-color: #eaeaea;
}
.btn-cta:hover{background:#000;border-color:#000}
.btn-outline-light{color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:rgba(255,255,255,.15);color:#fff}
.btn-agendar:hover{ background: #CD7F32;  border-color: #ffffff;}


/* Helpers */
.text-muted{color:var(--muted)!important}

/* ====== Ícono de idioma ====== */
.icon-idioma { font-weight: 500; font-size: 15px; display: flex; align-items: center; gap: 4px; /* pequeño espacio entre icono y texto */ padding-top: 2px; /* corrige leve desplazamiento vertical */
}

.icon-idioma svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease;
}

.icon-idioma:hover svg { opacity: 1;transform: scale(1.1);
}

/* ===== Footer estilo “tarjeta suave” ===== */
.psc-footer{
  background-color: #263043;                 /* gris suave como la captura */
  color:#ffffff;
  padding-top:28px;
  border-top:1px solid rgba(0,0,0,.05);
}
.psc-footer .footer-brand img{
  max-width: 190px;
  height:auto;
  opacity:.95;
}
.psc-footer a{ color:#ffffff; text-decoration:none; }
.psc-footer a:hover{ text-decoration:underline; }

.footer-nav ul li{ margin: .35rem 0; }
.footer-title{
  color:#ffffff; font-weight:700; margin-bottom:.6rem;
}
.footer-contact li{
  display:flex; align-items:flex-start;
  margin:.45rem 0; line-height:1.4;
  color:#ffffff;
}
.footer-contact i{
  width:20px; margin-right:.5rem; font-size:16px;
  color:#ffffff; opacity:.9; line-height:1.3;
}

/* Mapa con esquinas redondeadas */
.footer-map{
  border-radius:14px; overflow:hidden;
  box-shadow: 0 2px 0 rgba(255,255,255,.14) inset;
}
.footer-map iframe{
  width:100%; height:180px; border:0; display:block;
  filter: saturate(0.9) contrast(1.05);
}

/* Franja inferior de créditos */
.footer-credits{
  background:#263043;
  color:#e6eaee;
  padding:14px 0;
  margin-top:24px;
  border-top:1px solid rgbate(255,255,255,.35);
}

/* Ajustes responsivos */
@media (max-width: 991.98px){
  .psc-footer{ text-align:left; }
  .psc-footer .footer-brand img{ max-width:200px; }
  .footer-map iframe{ height:160px; }
}

/* ==== Banner de marcas ==== */
/* Fondo suave tipo ejemplo */
.brands-section{
  padding: 32px 0;
  background: #ffffff;
}
.partners-title{ color:#277a3b; font-weight:700; }

/* Swiper contenedor */
.brands-swiper{ position:relative; padding: 18px 56px; margin: 40px;}

/* Slides y logos */
.brands-swiper .swiper-slide{
  display:flex; align-items:center; justify-content:center;
  padding:10px;
}
.brand-logo{
  width: 140px; height: 100px;
  object-fit: contain; object-position: center;
 /*  filter: grayscale(100%) contrast(1.05);  B/N elegante */
  opacity:.9; transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}
.brand-logo:hover{ opacity:1; filter: grayscale(0%); transform: translateY(-2px); }

/* Flechas redondas */
.brands-swiper .swiper-button-prev,
.brands-swiper .swiper-button-next{
  width:44px; height:44px; border-radius:50%;
  background: rgba(0,0,0,.28); color:#fff;
  backdrop-filter: blur(6px);
}
.brands-swiper .swiper-button-prev{ left: 6px; }
.brands-swiper .swiper-button-next{ right: 6px; }
.brands-swiper .swiper-button-prev:after,
.brands-swiper .swiper-button-next:after{ font-size:16px; font-weight:900; }

/* Responsive */
@media (max-width: 575.98px){
  .brands-swiper{ padding: 12px 36px; }
  .brand-logo{ width:110px; height:60px; }
}

/* Contenedor compacto y sin “fugas” a los lados */
.brands-section{ padding:28px 0; }
.brands-swiper{
  padding: 8px 16px;     /* menos aire lateral */
  overflow: hidden;      /* oculta los bordes al entrar/salir */
  position: relative;
}

/* Movimiento lineal perfecto (sin easing) */
.brands-swiper .swiper-wrapper{
  transition-timing-function: linear !important;
}

/* Cada slide: ancho fijo para slidesPerView:'auto' */
.brands-swiper .swiper-slide{
  width: 250px;                     /* ↓ ajusta si quieres más chico */
  display:flex; align-items:center; justify-content:center;
  padding:6px;
}

/* Logos más compactos */
.brand-logo{
  width: 120px; height:auto;        /* ↓ baja si aún se ven grandes */
  object-fit:contain; object-position:center;
  filter:grayscale(100%); opacity:.9;
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.brand-logo:hover{ filter:grayscale(0%); opacity:1; transform:translateY(-2px); }

/* WOW + Animate.css: aseguran visibilidad correcta */
.wow { visibility: hidden; }
.animate__animated { visibility: visible !important; }

.hero-logo{
  position:absolute;
  bottom:40px;
  left:30px;
  top: 70px;
  z-index:3;
  animation-delay:.3s;
}
.hero-logo img{
  width:120px;
  height:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
@media(max-width:768px){
  .hero-logo{
    bottom:24px;
    left:24px;
  }
  .hero-logo img{ width:130px; }
}

.img-b-n {
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out; /* Opcional: para una transición suave */
}

/* Animación para icono en botones */
.btn .fa-arrow-right {
  display: inline-block; /* Necesario para transform */
  transition: transform 0.3s ease-out;
}

.btn:hover .fa-arrow-right {
  transform: translateX(5px); /* Mueve la flecha 5px a la derecha */
}

/* =================================== */
/* ESTILOS NUEVOS PARA LOLA'S SPA      */
/* =================================== */

/* 1. Nueva Sección de Introducción */
/* ---------------------------------- */
.spa-intro-section {
  padding-top: 120px;  /* Espacio para la navbar fija */
  padding-bottom: 80px;
  background-color: #fdfdfd; /* Un blanco ligeramente cálido */
}

/* 2. Stack de Imágenes (El "Diseño") */
/* ---------------------------------- */
.spa-image-stack {
  position: relative;
  min-height: 450px; /* Asegura que haya espacio para las imágenes */
  display: flex;
  align-items: center;
  justify-content: center;
}

.spa-image-stack img {
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 4px solid #ffffff;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}

.spa-image-stack .img-stack-1 {
  width: 70%;
  height: 400px;
  transform: rotate(-4deg) translateX(-20px);
  z-index: 1;
}

.spa-image-stack .img-stack-2 {
  width: 50%;
  height: 300px;
  transform: rotate(6deg) translateX(80px) translateY(50px);
  z-index: 2;
}

.spa-image-stack .img-stack-3 {
  width: 200px;
  height: 200px;
  transform: rotate(-10deg) translateX(-120px) translateY(100px);
  z-index: 3;
}

/* Efecto hover para el stack */
.spa-image-stack:hover .img-stack-1 { transform: rotate(-2deg) scale(1.02); z-index: 10; }
.spa-image-stack:hover .img-stack-2 { transform: rotate(3deg) scale(1.02); z-index: 11; }
.spa-image-stack:hover .img-stack-3 { transform: rotate(-5deg) scale(1.02); z-index: 12; }


/* 3. Estilos para Pestañas (Tabs) de Tratamientos */
/* ----------------------------------------------- */
.spa-treatment-tabs .nav-pills .nav-link {
  padding: 15px 20px;
  border-radius: 8px;
  background-color: #f0f0f0;
  color: #333; /* Color de tu texto principal */
  margin-bottom: 10px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

/* El botón activo (usa el color --primary de tu sitio si lo tienes) */
.spa-treatment-tabs .nav-pills .nav-link.active,
.spa-treatment-tabs .nav-pills .nav-link:hover {
  background-color: var(--dark, #343a40); /* Re-usa el color de tu botón 'btn-dark' */
  color: #ffffff;
  border-color: var(--dark, #343a40);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Contenido de cada pestaña */
.spa-treatment-content {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  overflow: hidden;
}

.spa-treatment-content img {
  width: 100%;
  height: 300px; /* Altura fija para la imagen */
  object-fit: cover;
}

.spa-treatment-content .spa-treatment-text {
  padding: 30px;
}

.spa-treatment-content .spa-treatment-text p {
  font-size: 1rem;
  line-height: 1.7;
}

/* Ajustes para móviles */
@media (max-width: 767.98px) {
  .spa-intro-section {
    padding-top: 100px;
    padding-bottom: 40px;
    text-align: center;
  }

  .spa-image-stack {
    min-height: 350px;
    margin-top: 40px;
  }
  .spa-image-stack .img-stack-1 { width: 80%; height: 300px; transform: rotate(-3deg); }
  .spa-image-stack .img-stack-2 { width: 60%; height: 250px; transform: rotate(5deg) translateY(40px); }
  .spa-image-stack .img-stack-3 { display: none; } /* Ocultar la 3ra imagen en móvil */

  .spa-treatment-tabs .nav-pills {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 20px;
  }
  .spa-treatment-tabs .nav-pills .nav-link {
    margin-bottom: 0;
    margin-right: 10px;
  }
}

/* ===== HERO estilo “landing limpia” ===== */
:root{
  /* ajusta a tu paleta */
  --hc-accent: #4C66FF;          /* color de acento para la segunda línea del título */
  --hc-bg-dark: #0f1218;         /* tono base del overlay */
  --hc-text: #ffffff;
  --hc-text-muted: #cfd6e4;
}

.hc-hero{
  position: relative;
  min-height: 35vh; /* Puedes usar 65vh o 70vh si lo quieres más pequeño */
  display: grid;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, #E3E4E8 0%, #C9CACE 100%); /* color corregido parecido al original */
  color: var(--hc-text);
}


/* Fondo: usa tu misma foto de “rostro close-up” para conservar el look */
.hc-hero__bg{
  position: absolute; inset: 0;
  background:

    url("../images/banner/home1.png") center/cover no-repeat;
  
  transform: translateZ(0);
}

.hc-hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--hc-bg-dark) 0%, rgba(15,18,24,0.55) 46%, rgba(15,18,24,0.15) 100%);
}

.hc-hero__inner{
  position: relative;
  z-index: 2;
  padding-top: clamp(92px, 9vh, 120px);  /* despeje del navbar */
  padding-bottom: clamp(40px, 8vh, 80px);
}

/* Tipografía del héroe */
.hc-eyebrow{
  letter-spacing:.12em;
  text-transform: uppercase;
  opacity:.85;
  font-weight:600;
  font-size:.9rem;
  color: #ffffff;
  margin-bottom:.75rem;
}

.hc-title{
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw + .6rem, 4.25rem);
  margin: 0 0 .35rem;
}

.hc-title--accent{
  color: var(--hc-accent);
}

.hc-sub{
  color: var(--hc-text-muted);
  font-size: clamp(1rem, 1.2vw + .8rem, 1.25rem);
  max-width: 50ch;
  margin: 0;
}

/* Botones */
.hc-hero .btn{
  padding: .8rem 1.2rem;
  border-width: 2px;
  border-radius: .75rem;
}

/* Badges */
.hc-badges{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.hc-badges li{
  font-size:.9rem; color: var(--hc-text);
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  padding:.5rem .75rem; border-radius: 999px;
}

/* Imagen de la derecha (si usas PNG recortado) */
.hc-figure{ position: relative; height: 62vh; display:flex; align-items:end; justify-content:center; }
.hc-figure__img{
  max-height: 100%;
  width: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
  transform: translateY(8px);
}

/* Responsivo */
@media (max-width: 991.98px){
  .hc-hero__overlay{
    background: linear-gradient(180deg, rgba(15,18,24,.75) 0%, rgba(15,18,24,.55) 40%, rgba(15,18,24,.2) 100%);
  }
  .hc-sub{ max-width: 42ch; }
}

/* Sección Hero */
.hc-hero {
  position: relative;
  height: 75vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, #E6E7EA 0%, #C6C7CC 100%);
}

/* Overlay opcional si quieres efecto de oscuridad suave */
.hc-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, transparent 100%);
  z-index: 1;
}

/* Texto */
.hc-hero__text {
  position: relative;
  z-index: 2;
  color: white;
}

.hc-hero__text h1 {
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
}

.hc-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Imagen de modelo */
.hc-hero__image {
  position: relative;
  z-index: 2;      /* ENCIMA DEL FONDO */
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.hc-hero__image img {
  max-height: 60vh;
  object-fit: contain;
  pointer-events: none;
  
}



/* Carrusel al frente */
.hero-swiper{
  width: 100%;
  height: min(92vh, 760px);   /* alto del bloque de imagen */
  min-height: 420px;
}

/* Centrar la imagen y mantener proporción */
.hero-swiper .swiper-slide{
  display: grid;
  place-items: end center;
}

.hero-swiper img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* que no se recorte */
  pointer-events: none;        /* no bloquear clics del hero */
  user-select: none;
}

/* Suaviza el borde izquierdo de la imagen con un degradado muy sutil (opcional) */
.hc-hero__image::before{
  content:"";
  position:absolute; inset:0;
 background: transparent !important;
  pointer-events:none;
  
}

/* ===== Paleta sobria/profesional ===== */
:root{
  --hc-accent: #2B4C7E;   /* azul petróleo elegante para acentos */
  --hc-eyebrow: #A9B6C6;  /* gris azulado para la ceja */
  --hc-text:    #E9EEF3;  /* texto claro sobre fondo oscuro */
  --hc-chip-bg: rgba(255,255,255,0.08);
  --hc-chip-br: rgba(255,255,255,0.25);
  --hc-chip-tx: rgba(255,255,255,0.92);
}



/* Oscurecer sutil el lado izquierdo para contraste del texto */
.hc-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(9,15,25,0.55) 0%, rgba(9,15,25,0.35) 45%, rgba(9,15,25,0.00) 80%);
  pointer-events: none;
}

/* Tipos */
.hc-eyebrow{
  letter-spacing:.12em;
  font-weight: 600;
  color: var(--hc-eyebrow);
  margin-bottom:.75rem;
  text-transform: uppercase;
}

.hc-hero h1{
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 .65rem 0;
}

.hc-hero h1 span{ display: inline-block; }


.hc-sublead{
  color: #ffffff;
  
  max-width: 46ch;
}

/* Botones (ligero refinamiento) */
.hc-hero .btn{
  padding: .85rem 1.15rem;
  border-radius: 14px;
  font-weight: 600;
}
.hc-hero .btn-outline-light{
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.hc-hero .btn-outline-light:hover{
  background: rgba(255,255,255,.12);
}

/* Imagen a la derecha al frente */
.hc-hero__image{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}
.hc-hero__image img{
  max-height: min(88vh, 780px);
  object-fit: contain;
  translate: 6% 0;         /* empuja un poco a la derecha */
  filter: drop-shadow(0 25px 50px rgba(0,0,0,.25));
}

/* ===== Chips / credenciales ===== */
.hc-hero__badges{
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.badge-chip{
  display: inline-flex;
  align-items: center;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1;
  color: var(--hc-chip-tx);
  background: var(--hc-chip-bg);
  border: 1px solid var(--hc-chip-br);
  backdrop-filter: blur(6px);           /* efecto vidrio */
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.16);
}

/* Responsivo */
@media (max-width: 991.98px){
  .hc-hero{ padding-top: 5rem; }
  .hc-hero__image{ justify-content: center; margin-top: 2rem; }
  .hc-hero__image img{ translate: 0 0; max-height: 520px; }
}

/* Tamaño del logo en el navbar */
.navbar .brand-logo img{
  height: 44px;        /* Ajusta entre 36–48px según te guste */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Quita padding extra del enlace del brand para que no “crezca” */
.navbar .brand-logo{
  padding-top: .25rem;
  padding-bottom: .25rem;
  line-height: 1;
}

/* — Orden/posición responsive —
   Desktop: logo a la izquierda (default).
   Móvil: hamburguesa a la izquierda, menú colapsado y LOGO a la derecha. */
@media (max-width: 991.98px){ /* < LG */
  .navbar .container{
    display: flex;
    align-items: center;
  }

  .navbar-toggler{ order: 0; }     /* Izquierda */
  #navMain{ order: 1; }            /* Centro (colapsado) */
  .navbar .brand-logo{
    order: 2;                      /* Derecha */
    margin-left: auto;             /* Empuja totalmente a la derecha */
  }
}

/* Opcional: reduce un poco en pantallas muy chicas */
@media (max-width: 360px){
  .navbar .brand-logo img{ height: 38px; }

  /* Tamaño del logo en el footer (general) */
.psc-footer .footer-brand img {
  max-width: 50px; /* Ajusta este valor a lo que necesites */
  height: 30px;
}
}

/* Opcional: reduce un poco en pantallas muy chicas */
@media (max-width: 460px){
  .navbar .brand-logo img{ height: 38px; }

  /* Tamaño del logo en el footer (general) */
.psc-footer .footer-brand img {
  max-width: 130px; /* Ajusta este valor a lo que necesites */
  height: 160px;
  
}



}

/* Altura del navbar fijo (ajústala si tu navbar es más alto) */
:root{
  --navbar-h: 34px; /* 56–72px según tu header */
}




@media (max-width: 368px){
  .hc-hero{
    min-height: 502vh;                 /* hay espacio real para texto + carrusel */
    padding-bottom: 8rem;
  }

  /* Texto arriba, imagen abajo */
  .hc-hero .row{
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    height: 900px;
  }

  .hc-hero__image{
    margin-top: 34px;
  }

  /* en móvil evita que el swiper tome height:100% */
  .hero-swiper{ height: auto !important; }

    /* SUBIR el bloque de texto para que aparezca más arriba */
  .hc-hero__text{
    
    transform: translateY(-35vh);       /* súbelo (usa -4vh a -10vh según veas) */
  }
}


/* === MOBILE ADJUSTMENTS HERO + SWIPER === */
@media (max-width: 768px) {
  .hc-hero {
    min-height: 120vh;       /* antes 100 o 102 — ahora más espacio */
    padding-bottom: 4rem;    /* espacio extra para que la imagen respire */
    display: flex;
    align-items: flex-start; /* que el contenido comience arriba */
  }

  /* Subimos el texto un poco */
  .hc-hero__text {
    margin-top: 4rem;  /* puedes ajustar (1rem, 3rem…) */
    text-align: center;
  }

  /* Imagen (swiper) bien separada debajo */
  .hc-hero__image {
    margin-top: 2rem;   /* separa la imagen del texto */
  }

  /* El swiper no colapsa y se adapta */
  .hero-swiper {
    height: auto !important;
  }

  .hero-swiper .swiper-slide img {
    width: min(420px, 90%);   /* tamaño cómodo, ajustable */
    height: auto;
    display: block;
    margin: 0 auto;          /* centrado en móvil */
  }
}


/* Ejemplo de un CSS que aplicaría a ambos */
.language-button {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000; /* O sin borde, como prefieras */
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
}

/* Nota de privacidad en galería (Estilo "Nube Sutil" con Animación) */
.privacy-note {
  max-width: 760px;
  margin: 0 auto 3rem; 
  padding: 1.5rem 2rem;
  
  font-size: 0.95rem;
  line-height: 1.6;
  color: #495057;
  
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 1.5rem; /* Esquinas redondeadas tipo "nube" */
  
  text-align: center;
  
  /* Sombra sutil para efecto "flotante" */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
  
  /* ¡Importante! Oculto por defecto. El JS lo hará visible. */
  visibility: hidden; 
  opacity: 0;
  
  /* Transición suave para cuando aparezca la "nube" */
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.privacy-note i {
  color: #007bff;
  margin-right: 0.5rem;
  font-size: 1.1rem;
  vertical-align: middle;
}

.privacy-note strong {
  color: #212529;
}