/* ===== Tokens ===== */
:root{
  --navy:#1E2A38; --white:#fff; --gold:#C9A86A; --gray:#F4F4F4; --blue:#3A86FF;
  --text:#1E2A38; --muted:#5b6a7b;
  --radius:14px; --shadow:0 10px 30px rgba(30,42,56,.12);
}

/* ===== Base mobile-first ===== */
*{box-sizing:border-box}
html{font-size:16px; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Open Sans", sans-serif;
  color:var(--text); background:#fff; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:"Poppins","Segoe UI", Arial, sans-serif; line-height:1.2; margin:0 0 .7rem}
h1{font-size:clamp(1.9rem, 4.2vw, 2.6rem)}
h2{font-size:clamp(1.5rem, 3vw, 2rem)}
h3{font-size:1.1rem}
p{margin:.5rem 0 1rem}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.92rem} .muted{color:var(--muted)} .accent{color:var(--gold)}
/* evitar cortes raros de palabras en Edge/Surface */
p, li, h1, h2, h3{hyphens:none; word-break:normal; overflow-wrap:break-word}
img{max-width:100%; height:auto; display:block}

/* ===== Layout ===== */
.container{width:min(1100px, 92%); margin:auto}
.section{padding: clamp(2.2rem, 6vw, 5rem) 0}
.section-soft{background:var(--gray)}
.section-head{margin-bottom:1.2rem}
.grid-2{display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem}
.grid-3{display:grid; grid-template-columns:minmax(0,1fr); gap:1.2rem}

/* ===== Header & Nav ===== */
.site-header{position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid #eef1f5}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:.6rem; color:var(--navy); font-weight:700}
.logo{border-radius:50%}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:#f6f8fb; border-radius:10px; font-size:1.2rem}
.nav{position:fixed; inset:64px 0 auto 0; transform:translateY(-110%); transition:.2s ease; background:#fff; border-bottom:1px solid #eef1f5}
.nav.open{transform:translateY(0)}
.nav ul{list-style:none; margin:0; padding:1rem; display:flex; flex-direction:column; gap:.7rem}
.nav a{color:var(--navy); font-weight:600}

/* ===== Hero ===== */
.hero{padding: clamp(2rem, 6vw, 5rem) 0; background:
  linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)}
.hero-cta{display:flex; gap:.9rem; margin:1rem 0 1.2rem; flex-wrap:wrap}
.hero-points{list-style:"✦  "; padding-left:1.2rem; margin:.4rem 0 0}
.hero figure.card{padding:0; overflow:hidden}
.hero figure.card img{width:100%; height:100%; object-fit:cover}

/* ===== Cards / UI ===== */
.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.2rem}
.glow{box-shadow:0 24px 60px rgba(58,134,255,.18)}
.pill-group{display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0}
.pill{background:var(--gray); color:var(--navy); padding:.5rem .75rem; border-radius:999px; font-weight:600}
.check{padding-left:1.1rem} .check li{list-style:"✔  "; margin:.35rem 0}
.resource-list{list-style:none; padding:0; margin:0}
.resource-list li{margin:.35rem 0}
.link{font-weight:700}

/* ===== Servicios / Casos: alturas consistentes ===== */
.cards{align-items:stretch}
.cards .card{display:flex; flex-direction:column}
.cards .card img{border-radius:12px; aspect-ratio: 3 / 2; object-fit:cover; margin-bottom:.8rem}

/* ===== Formularios ===== */
.form{display:grid; gap:.9rem}
.form label{display:grid; gap:.35rem; font-weight:600}
.form input,.form textarea{
  font:inherit; padding:.9rem 1rem; border-radius:10px; border:1.5px solid #d7dee6; background:#fff; min-height:44px
}
.form input:focus,.form textarea:focus{outline:3px solid rgba(58,134,255,.18); border-color:var(--blue)}
button, .btn{cursor:pointer}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:.9rem 1.2rem; border-radius:999px; font-weight:700; border:2px solid transparent}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{filter:brightness(.94)}
.btn-outline{border-color:var(--navy); color:var(--navy)}
.btn-outline:hover{background:var(--navy); color:#fff}

/* ===== FAQ / Timeline ===== */
.faq{background:#fff; padding:1rem; border-radius:12px; box-shadow:var(--shadow); margin:.7rem 0}

/* ===== Footer ===== */
.site-footer{background:var(--navy); color:#dbe6f1; padding:1.2rem 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}

/* ===== Breakpoints ===== */
@media (min-width: 740px){
  .grid-3{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (min-width: 980px){
  .grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
  .nav{position:static; transform:none; border:0}
  .nav ul{flex-direction:row; padding:0}
  .nav-toggle{display:none}
  .header-inner{height:70px}
  /* tipografía un poco más grande en desktop para verse premium en Surface */
  h1{font-size:clamp(2.2rem, 3.2vw, 3rem)}
  h2{font-size:clamp(1.6rem, 2.2vw, 2.2rem)}
}


/* ===== WhatsApp floating button ===== */
.wa-float{
  position:fixed; right:16px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; text-decoration:none; box-shadow:0 10px 30px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease; border:2px solid #fff;
}
.wa-float:hover{ transform:translateY(-1px); box-shadow:0 16px 32px rgba(0,0,0,.22) }
@media (min-width: 980px){
  .wa-float{ right:22px; bottom:22px }
}
/* Screen-reader only helper (already used in site) */
.sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}


/* ==== Brand sizing tweaks ==== */
.brand .logo{max-height:48px}
.header-inner .brand{gap:.8rem}

/* ==== Footer socials with icons ==== */
.footer-inner .social{display:flex; gap:14px; flex-wrap:wrap}
.footer-inner .social a{display:inline-flex; align-items:center; gap:8px; color:#dbe6f1; font-weight:600}
.footer-inner .social a:hover{text-decoration:underline}

/* ==== Header social icons ==== */
.header-inner{gap:10px}
.header-social{display:none; align-items:center; gap:12px}
.header-social a{color:var(--navy)}
@media (min-width: 980px){
  .header-social{display:inline-flex}
}

/* ==== Responsive Logo Scaling ==== */
.brand .logo{transition:all .3s ease; max-height:60px}

/* Base sizes */
.brand .logo{width:300px; height:auto}

/* Tablet */
@media (max-width: 1200px){
  .brand .logo{width:240px}
}

/* Mobile */
@media (max-width: 768px){
  .brand .logo{width:200px}
}

/* Sticky shrink on scroll */
.header.sticky .brand .logo{width:200px; max-height:48px}

/* ===== Enhanced Brand: Logo + Name + Seal (sticky swap) ===== */
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand .logo{display:block}
.logo-seal{display:none}

/* Big brand name on desktop */
.brand-name{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--navy, #1E2A38);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

/* Tablet adjustments */
@media (max-width: 1200px){
  .brand-name{font-size:22px}
}

/* Mobile adjustments */
@media (max-width: 768px){
  .brand-name{font-size:18px}
}

/* Sticky behavior: switch to seal, shrink name */
.header.sticky .logo-horizontal{display:none}
.header.sticky .logo-seal{display:block}
.header.sticky .brand-name{font-size:18px; font-weight:700}
@media (max-width: 768px){
  .header.sticky .brand-name{font-size:16px}
}

/* Keep overall responsive logo widths from previous step */

/* ==== Brand size boost ==== */
.brand-name{font-size:28px; letter-spacing:.2px}
@media (max-width: 1200px){ .brand-name{font-size:22px} }
@media (max-width: 768px){ .brand-name{font-size:18px} }

/* Bigger sticky seal and keep name readable */
.header.sticky .logo-seal{width:56px; height:56px}
.header.sticky .brand-name{font-size:20px}

/* Tweak horizontal logo default + sticky shrink less aggressive */
.logo-horizontal{width:320px}
@media (max-width: 1200px){ .logo-horizontal{width:260px} }
@media (max-width: 768px){ .logo-horizontal{width:200px} }
.header.sticky .logo-horizontal{display:none}

/* Header spacing so title doesn't look cramped */
.header-inner{gap:16px}

/* ==== Sticky header robust control ==== */
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand .logo{display:block}
.brand .logo-seal{display:none}
.brand-name{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--navy, #1E2A38);
  font-size: 28px;
  line-height: 1;
  white-space: nowrap;
}
/* Default big horizontal logo */
.header .brand .logo-horizontal{width:320px; height:auto; max-height:64px}
/* Tablet */
@media (max-width: 1200px){
  .header .brand .logo-horizontal{width:260px; max-height:56px}
  .brand-name{font-size:22px}
}
/* Mobile */
@media (max-width: 768px){
  .header .brand .logo-horizontal{width:200px; max-height:48px}
  .brand-name{font-size:18px}
}

/* Sticky state: show seal, hide horizontal (strong specificity) */
body.is-sticky .header .brand .logo-horizontal{display:none !important}
body.is-sticky .header .brand .logo-seal{display:block !important}
body.is-sticky .brand-name{font-size:20px}

/* Optional: give header a slight shadow in sticky for visual separation */
body.is-sticky .header{box-shadow:0 6px 20px rgba(0,0,0,.06)}

/* ==== Sticky fix: target .site-header correctly and add background for contrast ==== */
.site-header .brand .logo-horizontal{width:320px; height:auto; max-height:64px}
@media (max-width: 1200px){
  .site-header .brand .logo-horizontal{width:260px; max-height:56px}
}
@media (max-width: 768px){
  .site-header .brand .logo-horizontal{width:200px; max-height:48px}
}

/* Default: show horizontal, hide seal */
.site-header .brand .logo-seal{display:none}

/* Sticky: hide horizontal, show seal, tighten spacing */
body.is-sticky .site-header .brand .logo-horizontal{display:none !important}
body.is-sticky .site-header .brand .logo-seal{display:block !important}
body.is-sticky .site-header{backdrop-filter:saturate(140%) blur(4px); background:rgba(255,255,255,.86); box-shadow:0 6px 24px rgba(0,0,0,.08)}
body.is-sticky .site-header .brand-name{font-size:20px}

/* Ensure header stays fixed if intended (optional — enable if header should stick) */
.site-header{position:sticky; top:0; z-index:50; }

/* ===== FINAL sticky override (bulletproof) ===== */
.site-header{position:sticky; top:0; z-index:100;}

.site-header .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.site-header .brand .logo{display:block}
.site-header .brand .logo-horizontal{display:block; width:320px; height:auto; max-height:64px}
.site-header .brand .logo-seal{display:none; width:56px; height:56px}
.site-header .brand .brand-name{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:700; letter-spacing:.2px; color:#1E2A38;
  font-size:28px; line-height:1; white-space:nowrap
}
@media (max-width:1200px){
  .site-header .brand .logo-horizontal{width:260px; max-height:56px}
  .site-header .brand .brand-name{font-size:22px}
}
@media (max-width:768px){
  .site-header .brand .logo-horizontal{width:200px; max-height:48px}
  .site-header .brand .brand-name{font-size:18px}
}

/* Sticky state */
body.is-sticky .site-header{backdrop-filter:saturate(140%) blur(4px); background:rgba(255,255,255,.92); box-shadow:0 6px 24px rgba(0,0,0,.08)}
body.is-sticky .site-header .brand .logo-horizontal{display:none !important}
body.is-sticky .site-header .brand .logo-seal{display:block !important}
body.is-sticky .site-header .brand .brand-name{font-size:20px}

/* Extra: ensure header-inner spacing doesn't collapse */
.header-inner, .site-header .container{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* === BRIGHT LIGHT: Corrección de logos en header === */
.logo { border-radius: 0 }
.logo-seal { border-radius: 50% }

.site-header .brand .logo-seal { 
  display: inline-block; 
  width: 56px; 
  height: 56px; 
  vertical-align: middle;
}
.site-header .brand .logo-horizontal { 
  display: none; 
}

body.is-sticky .site-header .brand .logo-seal { 
  display: inline-block !important; 
}
body.is-sticky .site-header .brand .logo-horizontal { 
  display: none !important; 
}

/* === BRIGHT LIGHT: Logo más grande y centrado sin deformar header === */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px; /* espacio entre logo y texto */
}

.site-header .brand .logo-seal {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: block;
}

.site-header .brand .brand-name {
  line-height: 1;
  display: inline-block;
}