/* ===== Theme ===== */
:root{
  --brand:#0e3a5f; --brand-2:#0a2942;
  --accent:#14b8a6; --accent-dark:#0d9488; --accent-ink:#06302b;
  --ink:#0c1c2e; --body:#475569; --muted:#64748b; --line:#e6ebf1;
  --bg:#fff; --bg-soft:#f5f8fb; --dark:#0b2238;
  --shadow:0 14px 40px -18px rgba(13,42,68,.28);
  --shadow-sm:0 6px 18px -10px rgba(13,42,68,.25);
}
/* Red de seguridad anti-overflow horizontal en mobile.
   Uso overflow-x:clip (NO hidden) para no romper el navbar sticky. */
html{overflow-x:clip}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;overflow-wrap:break-word}
h1,h2,h3,h4{color:var(--ink);font-weight:800;letter-spacing:-.02em;line-height:1.15}
section{scroll-margin-top:84px}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);background:rgba(20,184,166,.12);padding:.45rem .85rem;border-radius:999px}

/* ===== Botones ===== */
.btn{border-radius:999px;font-weight:700}
.btn-accent{background:var(--accent);color:var(--accent-ink);border:0}
.btn-accent:hover,.btn-accent:focus{background:var(--accent-dark);color:#fff}
.btn-brand{background:var(--brand);color:#fff;border:0}
.btn-brand:hover{background:var(--brand-2);color:#fff}
.btn-outline-brand{background:#fff;color:var(--brand);border:1px solid var(--line)}
.btn-outline-brand:hover{border-color:var(--accent);color:var(--accent-dark)}
.btn-xl{padding:.9rem 1.7rem;font-size:1.05rem}

/* ===== Navbar ===== */
.site-header{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(13,42,68,.5)}
.navbar-brand.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.35rem;color:var(--ink);letter-spacing:-.03em}
.brand-logo{height:44px;width:auto;display:block}
.brand .mark{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;color:#fff;font-weight:800}
.brand b{color:var(--accent-dark);font-weight:800}
.navbar-nav .nav-link{font-weight:600;color:var(--body)}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{color:var(--brand)}
/* Toggler: hamburguesa que se transforma en X al abrir */
.navbar-toggler{border:0;padding:.35rem;box-shadow:none!important;position:relative;z-index:1030}
.navbar-toggler:focus{box-shadow:none!important}
.nav-burger{position:relative;display:block;width:26px;height:18px}
.nav-burger span{position:absolute;left:0;height:2.5px;width:100%;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .2s ease,top .3s ease}
.nav-burger span:nth-child(1){top:0}
.nav-burger span:nth-child(2){top:8px}
.nav-burger span:nth-child(3){top:16px}
.navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(1){top:8px;transform:rotate(45deg)}
.navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(2){opacity:0}
.navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(3){top:8px;transform:rotate(-45deg)}
/* Menú mobile: overlay blanco a pantalla completa */
@media (max-width:991.98px){
  .navbar-brand.brand{position:relative;z-index:1030}
  #mainNav{position:fixed;top:62px;left:0;right:0;bottom:0;min-height:calc(100vh - 62px);min-height:calc(100dvh - 62px);background:rgba(255,255,255,.88);z-index:1029;padding:30px 24px 40px;overflow-y:auto}
  /* Evita el "salto": que el collapse de Bootstrap no anime la altura del overlay */
  #mainNav.collapsing{transition:none;height:auto!important}
  #mainNav.show,#mainNav.collapsing{display:flex;flex-direction:column;justify-content:center}
  #mainNav .navbar-nav{align-items:center;gap:.25rem;width:100%}
  #mainNav .nav-link{font-size:1.35rem;font-weight:700;color:var(--ink);padding:.65rem 0}
  #mainNav .nav-link:hover,#mainNav .nav-link:focus{color:var(--accent-dark)}
  #mainNav .nav-item.ms-lg-2{margin-top:1.2rem}
  #mainNav .nav-item.ms-lg-2 .btn{font-size:1.1rem;padding:.8rem 2.2rem}
  /* Entrada escalonada de las opciones al abrir el menú */
  @keyframes navItemIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  body.nav-open #mainNav .nav-item{animation:navItemIn .45s cubic-bezier(.22,.61,.36,1) both}
  body.nav-open #mainNav .nav-item:nth-child(1){animation-delay:.06s}
  body.nav-open #mainNav .nav-item:nth-child(2){animation-delay:.12s}
  body.nav-open #mainNav .nav-item:nth-child(3){animation-delay:.18s}
  body.nav-open #mainNav .nav-item:nth-child(4){animation-delay:.24s}
  body.nav-open #mainNav .nav-item:nth-child(5){animation-delay:.30s}
  body.nav-open #mainNav .nav-item:nth-child(6){animation-delay:.36s}
  @media (prefers-reduced-motion:reduce){body.nav-open #mainNav .nav-item{animation:none}}
  /* padding-top compensa el hueco que deja el header al pasar a position:fixed
     (si no, el contenido de fondo salta 62px al abrir/cerrar el menú) */
  body.nav-open{overflow:hidden;padding-top:62px}
  /* Sin backdrop-filter mientras el menú está abierto: si no, el header
     (al tener filtro) se vuelve el containing-block del overlay fixed y,
     estando scrolleado, el menú se ancla mal / no aparece. */
  body.nav-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;position:fixed;top:0;left:0;right:0;border-bottom:1px solid var(--line);background:#fff}
  body.nav-open #whatsapp-btn,body.nav-open #whatsapp-menu,body.nav-open #scroll-top{opacity:0;visibility:hidden;pointer-events:none}
}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;background:var(--dark)}
/* Video de fondo + overlay oscuro con puntitos en CSS puro (efecto estilo fixandship) */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background-color:rgba(8,22,36,.66);background-image:radial-gradient(rgba(0,0,0,.42) 1px,transparent 1px);background-size:3px 3px}
.hero-inner{position:relative;z-index:2;padding-top:84px;padding-bottom:90px}
.hero h1{font-size:clamp(2.05rem,4.6vw,3.3rem);color:#fff}
.hero .lead{font-size:1.16rem;max-width:36rem;color:#d7e1ea}
.hero .eyebrow{color:#5eead4;background:rgba(94,234,212,.14)}
.hero-notes span{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:#fff;font-size:.95rem}
.hero-notes svg{color:#5eead4;flex:none}
.hero .btn-outline-brand{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn-outline-brand:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.hero-side{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow)}
.hero-side .figure{font-size:3.2rem;font-weight:800;color:var(--brand);letter-spacing:-.04em;line-height:1}
.hero-side .figure b{color:var(--accent-dark)}
.hero-side .mini div{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink);font-size:.95rem}
.hero-side .mini svg{color:var(--accent-dark);flex:none}

/* ===== Sección ===== */
.section{padding:78px 0}
.section-soft{background:var(--bg-soft)}
.section-head{max-width:660px;margin:0 auto 46px;text-align:center}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.section-head p{margin-top:.9rem;font-size:1.08rem}

/* ===== Tarjetas ===== */
.f-card{height:100%;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease}
.f-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d7e2ec}
.f-card h3{font-size:1.12rem;margin-bottom:.5rem}
.f-card p{font-size:.97rem;margin:0}
.f-num{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:var(--accent-dark);background:rgba(20,184,166,.12);margin-bottom:1rem}
.f-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),#15527e);color:#fff;margin-bottom:1.1rem}
.f-ico svg{width:24px;height:24px}

/* ===== Por qué (oscuro) ===== */
.why{background:var(--dark);color:#cdd9e5}
.why h2{color:#fff}.why .section-head p{color:#9fb3c4}
.why .eyebrow{color:#5eead4;background:rgba(94,234,212,.14)}
.stat{height:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:22px}
.stat .fig{font-size:2.2rem;font-weight:800;color:#5eead4;letter-spacing:-.03em;line-height:1}
.stat h3{color:#fff;font-size:1rem;margin:.55rem 0 .3rem}
.stat p{font-size:.88rem;color:#9fb3c4;margin:0}

/* ===== Galería ===== */
.gallery-item{display:block;position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:4/3}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,34,56,.45),transparent 55%);opacity:0;transition:opacity .25s}
.gallery-item .zoom{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--brand);display:grid;place-items:center;opacity:0;transform:scale(.85);transition:.25s}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item:hover::after,.gallery-item:hover .zoom{opacity:1}
.gallery-item:hover .zoom{transform:scale(1)}

/* ===== Proceso ===== */
.step{height:100%}
.step .dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800;margin-bottom:1rem;box-shadow:0 0 0 6px rgba(14,58,95,.08)}
.step h3{font-size:1.1rem;margin-bottom:.4rem}
.step p{font-size:.96rem;margin:0}

/* ===== CTA banner (adaptado de "Woman CTA" de fixandship) ===== */
.cta-banner{position:relative;overflow:hidden;padding:104px 0;background:var(--dark) url('../media/cta-banner.jpg') center/cover no-repeat}
.cta-banner-overlay{position:absolute;inset:0;z-index:0;pointer-events:none;background-color:rgba(8,22,36,.7);background-image:radial-gradient(rgba(0,0,0,.42) 1px,transparent 1px);background-size:3px 3px}
.cta-banner .container{position:relative;z-index:1}
.cta-box{color:#fff}
.cta-eyebrow{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:500;color:#cdd9e5;margin:0}
.cta-title{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;color:#fff;margin:.1rem 0 1rem}
.cta-text{color:#d7e1ea;font-size:1.05rem;line-height:1.65;margin:0 0 1.7rem;max-width:34rem}

/* ===== FAQ (accordion Bootstrap) ===== */
.faq-acc{--bs-accordion-bg:#fff;--bs-accordion-border-color:var(--line);--bs-accordion-active-bg:rgba(20,184,166,.08);--bs-accordion-active-color:var(--brand);--bs-accordion-btn-focus-box-shadow:0 0 0 .25rem rgba(20,184,166,.18);--bs-accordion-btn-color:var(--ink)}
.faq-acc .accordion-item{margin-bottom:12px;border:1px solid var(--line);border-radius:14px!important;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq-acc .accordion-button{font-weight:700;font-size:1.05rem}
.faq-acc .accordion-button:not(.collapsed){box-shadow:none}

/* ===== Formulario ===== */
.form-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
.form-control{border-radius:11px;padding:.7rem .9rem;background:#fcfdfe}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 .25rem rgba(20,184,166,.18)}
.form-label{font-weight:700;color:var(--ink);font-size:.92rem}
.contact-list{list-style:none;padding:0;margin:1.6rem 0 0}
.contact-list li{display:flex;align-items:center;gap:.7rem;font-weight:600;color:var(--ink);margin-bottom:.9rem}
.contact-list svg{color:var(--accent-dark);flex:none}
.form-success{display:none;text-align:center;padding:24px 6px;position:relative}
.form-success-close{position:absolute;top:4px;right:4px;width:34px;height:34px;border:0;border-radius:50%;background:#eef2f6;color:#64748b;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.form-success-close:hover{background:#e2e8f0;color:var(--ink)}
.form-success .check{width:64px;height:64px;border-radius:50%;background:rgba(20,184,166,.14);color:var(--accent-dark);display:grid;place-items:center;margin:0 auto 1rem}
.is-sent form{display:none}.is-sent .form-success{display:block}
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#b42318;border-radius:11px;padding:.7rem .9rem;font-size:.9rem;margin-bottom:14px}

/* ===== Footer ===== */
.footer{background:var(--dark);color:#9fb3c4;padding:56px 0 24px}
.footer .brand{color:#fff;margin-bottom:1rem}.footer .brand .mark{background:var(--accent);color:var(--accent-ink)}.footer .brand b{color:#5eead4}
/* Logo del footer en monocromo claro (grayscale puro quedaría invisible sobre el fondo oscuro) */
.footer-logo{height:40px;width:auto;display:block;filter:grayscale(1) brightness(0) invert(1);opacity:.72}
.footer h4{color:#fff;font-size:.95rem;margin-bottom:1rem}
.footer a{color:#9fb3c4;text-decoration:none}.footer a:hover{color:#5eead4}
.footer .list-unstyled li{margin-bottom:.55rem}
.footer-nav a{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.footer-nav a i{width:18px;text-align:center;color:var(--accent);font-size:.9rem;flex:none}
.footer-contact li{display:flex;align-items:center;gap:.6rem}
.footer-contact li i{width:18px;text-align:center;color:var(--accent);font-size:.9rem;flex:none}
.footer .copy{border-top:1px solid rgba(255,255,255,.1);margin-top:38px;padding-top:20px;font-size:.85rem;color:#7d93a6}
.footer-badges{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.footer-badges img{opacity:.8;transition:opacity .3s}
.footer-badges img:hover{opacity:1}

/* ===== WhatsApp: botón con onda + menú multi-número (estilo MULTIHOGAR) ===== */
#whatsapp-btn{position:fixed;right:20px;bottom:20px;width:60px;height:60px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9999;box-shadow:0 4px 15px rgba(37,211,102,.5);animation:wa-pulse 2s infinite;transition:bottom .35s ease}
#whatsapp-btn.wa-raised{bottom:84px}
#whatsapp-btn .wa-ico{display:flex;color:#fff;transition:transform .3s}
#whatsapp-btn .wa-ico svg{width:32px;height:32px}
#whatsapp-btn .wa-ico-close{display:none}
#whatsapp-btn.active{animation:none}
#whatsapp-btn.active .wa-ico-chat{display:none}
#whatsapp-btn.active .wa-ico-close{display:flex}
#whatsapp-btn.active .wa-ico{transform:rotate(90deg)}
/* La onda son 2 pseudo-elementos DETRÁS del botón (z-index:-1): pasan por abajo y nunca tapan el ícono */
#whatsapp-btn::before,#whatsapp-btn::after{content:'';position:absolute;width:100%;height:100%;border-radius:50%;background:rgba(37,211,102,.4);animation:wa-wave 2s infinite;z-index:-1}
#whatsapp-btn::after{animation-delay:.5s}
#whatsapp-btn.active::before,#whatsapp-btn.active::after{display:none}
@keyframes wa-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes wa-wave{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){#whatsapp-btn{animation:none}#whatsapp-btn::before,#whatsapp-btn::after{display:none}}

#whatsapp-menu{position:fixed;bottom:96px;right:20px;width:290px;max-width:calc(100vw - 40px);background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:9998;opacity:0;pointer-events:none;transform:translateY(15px);transition:opacity .3s,transform .3s,bottom .35s ease;overflow:hidden}
#whatsapp-menu.wa-raised{bottom:160px}
#whatsapp-menu.open{opacity:1;pointer-events:all;transform:translateY(0)}
#whatsapp-menu .wa-menu-header{background:#25d366;padding:18px 16px}
#whatsapp-menu .wa-menu-header h4{color:#fff;font-size:15px;font-weight:700;margin:0 0 4px}
#whatsapp-menu .wa-menu-header p{color:rgba(255,255,255,.85);font-size:12px;margin:0}
#whatsapp-menu .wa-menu-list{padding:10px 0 16px}
#whatsapp-menu a{display:flex;align-items:center;gap:12px;padding:10px 16px;text-decoration:none;transition:background .2s}
#whatsapp-menu a:hover{background:#f5f7f9}
#whatsapp-menu .wa-avatar{width:44px;height:44px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#whatsapp-menu .wa-avatar svg{width:22px;height:22px;color:#fff}
#whatsapp-menu .wa-info{flex:1;min-width:0}
#whatsapp-menu .wa-info strong{display:block;color:#222;font-size:14px;font-weight:700}
#whatsapp-menu .wa-info span{color:#888;font-size:12px}

/* ===== Botón "volver arriba" (aparece al scrollear y empuja el WhatsApp) ===== */
#scroll-top{position:fixed;right:26px;bottom:20px;width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:9990;box-shadow:0 6px 18px -6px rgba(13,42,68,.6);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,background .2s,color .2s}
#scroll-top.show{opacity:1;visibility:visible;transform:translateY(0)}
#scroll-top:hover{background:var(--accent-dark);color:#fff}
#scroll-top svg{width:22px;height:22px}

/* ===== Reveal ===== */
.reveal{transition:opacity .6s ease,transform .6s ease}
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}