/* ==========================================================
   Firessa · aguazmg.firessa.com · Landing HORECA
   Stack: vanilla HTML/CSS/JS + Leaflet 1.9.4 + GSAP opcional
   Paleta heredada del chassis sistemamovil.firessa.com
   ========================================================== */

/* ---------- Tokens ---------- */
:root{
  --c-dark:   #1F2A44;
  --c-dark-2: #14223A;
  --c-aqua:   #64CCC9;
  --c-aqua-2: #46BAB7;
  --c-blue:   #00A9CE;
  --c-blue-2: #0590B1;
  --c-yellow: #FFD100;
  --c-text:   #1F2A44;
  --c-muted:  #57637A;
  --c-line:   #D6EAEE;
  --c-bg:     #EEF8FA;
  --c-bg-alt: #F7FCFD;
  --c-white:  #FFFFFF;
  --c-high:   #EA4335;
  --c-med:    #F59E0B;
  --c-low:    #43A047;
  --shadow-sm: 0 4px 12px rgba(31,42,68,.08);
  --shadow:    0 12px 32px rgba(23,168,200,.14);
  --shadow-lg: 0 24px 60px rgba(31,42,68,.18);
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --container: 1200px;
  --header-h: 72px;
  --easing-cinema: cubic-bezier(.65,.05,.36,1);
  --easing-out: cubic-bezier(.16,1,.3,1);
  --easing-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Kenyan Coffee';
  src:url('../fonts/kenyan-coffee/kenyan-coffee-bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Kenyan Coffee';
  src:url('../fonts/kenyan-coffee/kenyan-coffee-regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('../fonts/work-sans/work-sans-regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('../fonts/work-sans/work-sans-medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('../fonts/work-sans/work-sans-semibold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('../fonts/work-sans/work-sans-bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--c-text);
  background:linear-gradient(180deg,#EEF9FB 0%,#F8FCFD 100%);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:var(--c-blue); text-decoration:none; transition:color .2s}
a:hover{color:var(--c-blue-2)}
ul{margin:0; padding:0; list-style:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; padding:0}
input,textarea,select{font-family:inherit; font-size:1rem}

.container{max-width:var(--container); margin:0 auto; padding:0 24px; width:100%}
@media(min-width:1024px){.container{padding:0 32px}}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{
  font-family:'Kenyan Coffee','Work Sans',sans-serif;
  font-weight:700;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin:0 0 .5em;
  color:var(--c-dark);
}
h1{font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1.08}
h2{font-size:clamp(1.6rem, 3.4vw, 2.5rem)}
h3{font-size:clamp(1.15rem, 1.8vw, 1.5rem)}
h4{font-size:1.05rem}
p{margin:0 0 1em}
.eyebrow{
  display:inline-block;
  font-family:'Kenyan Coffee',sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  margin-bottom:14px;
}
.eyebrow-aqua{background:rgba(100,204,201,.18); color:var(--c-blue-2)}
.eyebrow-yellow{background:rgba(255,209,0,.20); color:#7A5C00}
.eyebrow-dark{background:rgba(31,42,68,.10); color:var(--c-dark)}
/* 2026-05-28 (Angel #50): eyebrow-yellow sobre fondo dark navy del contacto-section necesita color claro para WCAG AA */
.contacto-section .eyebrow-yellow{
  background:rgba(255,209,0,.22);
  color:#FFD100;
  border:1px solid rgba(255,209,0,.45);
}

.micro{font-size:.78rem; color:var(--c-muted)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:var(--radius-pill);
  font-family:'Work Sans',sans-serif;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.4px;
  cursor:pointer;
  transition:transform .2s var(--easing-spring), box-shadow .25s, background .25s, color .2s;
  border:1.5px solid transparent;
  user-select:none;
  white-space:nowrap;
}
.btn .arrow{transition:transform .2s var(--easing-spring)}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{
  background:linear-gradient(135deg,var(--c-blue),var(--c-blue-2));
  color:#fff;
  box-shadow:0 8px 24px -6px rgba(0,169,206,.5);
  min-height:48px;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px -6px rgba(0,169,206,.65); color:#fff}
.btn-ghost{
  background:rgba(255,255,255,.14);
  color:var(--c-white);
  border:1.5px solid rgba(255,255,255,.62);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.22); color:var(--c-white); border-color:rgba(255,255,255,.85)}
.btn-text{
  background:transparent;
  color:var(--c-muted);
  padding:10px 14px;
  font-weight:600;
}
.btn-text:hover{color:var(--c-dark)}
.btn-lg{padding:18px 28px; font-size:1.05rem; border-radius:var(--radius-pill)}
.btn-sm{padding:10px 16px; font-size:.85rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.35; pointer-events:none}

/* ============================================
   HEADER (chassis Firessa sistemamovil)
============================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(31,42,68,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(100,204,201,.18);
  transition:background .45s ease, backdrop-filter .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.site-header.is-scrolled{
  background:linear-gradient(180deg,rgba(31,42,68,.55) 0%,rgba(31,42,68,.62) 70%,rgba(31,42,68,.48) 100%);
  backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  border-bottom-color:rgba(100,204,201,.28);
  box-shadow:inset 0 -1px 0 rgba(100,204,201,.22), inset 0 1px 0 rgba(255,255,255,.06), 0 4px 24px -12px rgba(0,0,0,.35);
}
.site-header .container{position:relative; z-index:1}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 24px;
}
.logo-link{display:flex; align-items:center}
.logo{height:42px; width:auto; display:block}
.main-nav ul{
  list-style:none; display:flex; gap:28px; margin:0; padding:0;
}
.main-nav a{
  font-family:'Work Sans',sans-serif;
  text-transform:uppercase;
  color:#fff;
  font-size:.92rem;
  letter-spacing:1.6px;
  font-weight:400;
  position:relative; padding-bottom:4px;
  transition:color .2s;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--c-aqua);
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.main-nav a:hover{color:var(--c-aqua)}
.main-nav a:hover::after{transform:scaleX(1)}
.nav-cta{padding:10px 20px; font-size:.85rem}
.nav-toggle{
  display:none;
  background:transparent; border:0;
  width:40px; height:40px; padding:6px;
  cursor:pointer;
  flex-direction:column; justify-content:space-around;
}
.nav-toggle span{
  display:block; height:3px;
  background:#fff; border-radius:2px;
  transition:transform .25s, opacity .25s;
}

@media(max-width:860px){
  .nav-toggle{display:flex}
  .main-nav, .nav-cta{display:none}
  .main-nav.open{
    display:block;
    position:absolute; top:100%; left:0; right:0;
    background:var(--c-dark);
    padding:18px;
    box-shadow:var(--shadow);
    border-top:1px solid rgba(100,204,201,.18);
  }
  .main-nav.open ul{flex-direction:column; gap:14px; text-align:center}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
}

/* ============================================
   HERO
============================================ */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  display:flex; align-items:center;
  overflow:hidden;
  padding:80px 0 60px;
  color:#fff;
  background:
    linear-gradient(135deg,rgba(10,20,38,.55) 0%, rgba(31,42,68,.45) 50%, rgba(20,34,58,.55) 100%),
    url('../video/hero-poster.jpg') center/cover no-repeat,
    linear-gradient(135deg,#0a1426 0%, #1F2A44 50%, #14223A 100%);
}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
  filter:saturate(.85) brightness(.55);
}
@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
}
/* 2026-06-04 Tier 2 P2 perf: en mobile, mostrar solo poster image (más liviano que video MP4)
   Mejora LCP -2-3s en mobile. Desktop mantiene video por estética */
@media(max-width: 720px){
  .hero-video{display:none}
}
.hero-bg{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1}
.hero-bg::before{
  content:""; position:absolute; inset:-20% -20%;
  background:
    linear-gradient(135deg, rgba(10,20,38,.55) 0%, rgba(20,34,58,.40) 50%, rgba(15,28,51,.55) 100%),
    radial-gradient(60% 50% at 70% 25%, rgba(0,169,206,.30), transparent 70%),
    radial-gradient(40% 35% at 20% 80%, rgba(100,204,201,.20), transparent 70%);
  filter:blur(20px);
}
.hero-drop{
  position:absolute;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  width:clamp(140px, 16vw, 240px);
  aspect-ratio:1/1.4;
  background:linear-gradient(180deg,rgba(100,204,201,.5),rgba(0,169,206,.7));
  clip-path:polygon(50% 0%, 90% 62%, 76% 100%, 24% 100%, 10% 62%);
  filter:blur(.4px);
  opacity:.35;
  animation:dropFloat 8s var(--easing-out) infinite;
}
.hero-ripple{
  position:absolute;
  left:50%;
  top:80%;
  width:80vmax; height:80vmax;
  margin-left:-40vmax; margin-top:-40vmax;
  border-radius:50%;
  border:1.5px solid rgba(100,204,201,.18);
  animation:ripple 9s linear infinite;
  pointer-events:none;
}
.hero-ripple::after{
  content:"";
  position:absolute; inset:14%;
  border-radius:50%;
  border:1.5px solid rgba(100,204,201,.12);
  animation:ripple 9s linear infinite;
  animation-delay:3s;
}
@keyframes dropFloat{
  0%,100%{transform:translateY(-50%) rotate(-2deg)}
  50%{transform:translateY(calc(-50% - 14px)) rotate(2deg)}
}
@keyframes ripple{
  0%{transform:scale(.95)}
  50%{transform:scale(1.06)}
  100%{transform:scale(.95)}
}

.hero-inner{position:relative; z-index:2; max-width:880px; text-align:center; margin:0 auto}
.hero-eyebrow{
  display:inline-block;
  font-family:'Kenyan Coffee',sans-serif;
  font-size:.82rem;
  letter-spacing:2.4px;
  text-transform:uppercase;
  padding:8px 16px;
  border:1px solid rgba(100,204,201,.4);
  border-radius:var(--radius-pill);
  background:rgba(100,204,201,.10);
  color:var(--c-aqua);
  margin-bottom:24px;
}
.hero-headline{
  color:#fff; margin-bottom:22px;
  max-width:880px;
  margin-left:auto; margin-right:auto;
}
.hero-headline .line1{display:block; color:#fff}
.hero-headline .line2{display:block; color:#fff; margin-top:8px}
.hero-headline strong{color:var(--c-yellow); font-weight:700}
.hero-sub{
  font-size:clamp(.98rem, 1.25vw, 1.08rem);
  color:rgba(255,255,255,.78);
  max-width:600px;
  margin:0 auto 36px;
  line-height:1.55;
}
.hero-cta-row{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-bottom:50px;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  max-width:980px; margin:0 auto;
}
.stat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:18px 16px;
  text-align:left;
  backdrop-filter:blur(6px);
}

/* Stat con imagen background (3 cards Drive Karla) */
.stat-with-image{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  min-height:200px;
  display:flex; align-items:flex-end;
  padding:0;
  isolation:isolate;
  transition:transform .35s var(--easing-out, ease), box-shadow .35s ease;
}
.stat-with-image:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px -12px rgba(0,0,0,.45);
}
.stat-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,38,.20) 0%, rgba(10,20,38,.55) 55%, rgba(10,20,38,.92) 100%);
  z-index:1;
}
.stat-content{
  position:relative; z-index:2;
  padding:16px 18px 18px;
  width:100%;
}
.stat-num{
  font-family:'Kenyan Coffee',sans-serif;
  font-size:1.7rem;
  color:var(--c-aqua);
  line-height:1;
  margin-bottom:6px;
}
.stat-label{font-size:.82rem; color:rgba(255,255,255,.85); line-height:1.35; margin-bottom:6px}
.stat-label strong{color:#fff; font-weight:700}
.stat-src{font-size:.66rem; color:rgba(255,255,255,.45); letter-spacing:.3px}

@media(max-width:768px){
  .hero{padding:60px 0 50px; min-height:auto}
  .hero-drop{right:-10%; top:8%; width:50vw}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:14px 12px}
  .stat-num{font-size:1.4rem}
}

/* ============================================
   SECTIONS WRAPPER
============================================ */
section{padding:80px 0; position:relative}
@media(max-width:768px){section{padding:60px 0}}

/* ============================================
   TRUST BAR · social proof post-hero (AIDA: refuerza credibilidad)
============================================ */
.trust-bar{
  background:#fff;
  padding:36px 0;
  border-bottom:1px solid var(--c-line);
  position:relative;
  z-index:3;
}
.trust-bar-inner{
  display:flex; align-items:stretch; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.trust-item{
  flex:1; min-width:140px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding:6px 8px;
}
.trust-num{
  font-family:'Kenyan Coffee',sans-serif;
  font-size:clamp(2rem, 3vw, 2.8rem);
  color:var(--c-navy);
  font-weight:700;
  line-height:1;
  letter-spacing:.6px;
  margin-bottom:8px;
}
.trust-num-sm{font-size:.5em; color:var(--c-navy); letter-spacing:1px}
.trust-label{
  font-size:.78rem;
  color:var(--c-muted);
  line-height:1.35;
  font-weight:500;
}
.trust-divider{
  width:1px;
  background:linear-gradient(180deg, transparent, var(--c-line), transparent);
}
.trust-brands{flex:1.5; min-width:200px}
.trust-brands-label{
  font-size:.7rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:10px;
  font-weight:600;
}
.trust-brands-list{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.trust-brands-list span{
  display:inline-block;
  background:rgba(31,42,68,.04);
  border:1px solid var(--c-line);
  border-radius:var(--radius-pill);
  padding:6px 12px;
  font-family:'Kenyan Coffee',sans-serif;
  font-size:.82rem;
  letter-spacing:.5px;
  color:var(--c-dark);
  text-transform:uppercase;
}
@media(max-width:880px){
  .trust-bar{padding:28px 0}
  .trust-divider{display:none}
  .trust-item{min-width:120px; flex:1 1 40%}
  .trust-brands{flex:1 1 100%; margin-top:14px; padding-top:18px; border-top:1px solid var(--c-line)}
}

/* ============================================
   QUIZ · Typeform / TDAH-test full-viewport
============================================ */
/* ── QUIZ MODAL FULL-SCREEN (estilo Octane AI / Typeform / test TDAH) ─── */
.quiz-modal{
  position:fixed; inset:0;
  z-index:1500;
  display:flex; align-items:stretch; justify-content:stretch;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--easing-out);
}
.quiz-modal[hidden]{display:none}
.quiz-modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.quiz-modal-overlay{
  position:absolute; inset:0;
  background:rgba(8,16,30,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  cursor:pointer;
}
.quiz-modal-close{
  position:fixed; top:18px; right:18px;
  z-index:10;
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s, transform .2s, border-color .2s;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.quiz-modal-close:hover{
  background:rgba(255,255,255,.20);
  border-color:rgba(100,204,201,.55);
  transform:scale(1.06);
}
.quiz-modal-close:active{transform:scale(.96)}
.quiz-modal-shell{
  position:relative;
  flex:1; min-width:0;
  background:linear-gradient(160deg, #0f1c33 0%, #1F2A44 50%, #14223A 100%);
  color:#fff;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex; flex-direction:column;
  transform:translateY(28px) scale(.985);
  transition:transform .45s var(--easing-cinema);
}
.quiz-modal.is-open .quiz-modal-shell{transform:translateY(0) scale(1)}
.quiz-modal-shell::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(50% 40% at 80% 20%, rgba(0,169,206,.22), transparent 70%),
    radial-gradient(40% 35% at 15% 80%, rgba(100,204,201,.16), transparent 70%);
  pointer-events:none;
}
body.quiz-modal-open{overflow:hidden;touch-action:none}

@media (max-width: 720px){
  .quiz-modal-close{top:14px; right:14px; width:42px; height:42px}
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.quiz-section{
  background:linear-gradient(160deg, #0f1c33 0%, #1F2A44 50%, #14223A 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:0;
}
.quiz-section::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(50% 40% at 80% 20%, rgba(0,169,206,.22), transparent 70%),
    radial-gradient(40% 35% at 15% 80%, rgba(100,204,201,.16), transparent 70%);
  pointer-events:none;
}

/* Intro centrada full-viewport */
.quiz-intro{
  max-width:760px; margin:0 auto; text-align:center;
  min-height:80vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 24px;
  position:relative; z-index:2;
}
.quiz-intro .eyebrow{
  background:rgba(100,204,201,.16);
  color:var(--c-aqua);
  border:1px solid rgba(100,204,201,.35);
}
.quiz-intro h2{
  color:#fff;
  font-size:clamp(2.2rem, 5.5vw, 4rem);
  margin-bottom:18px;
  letter-spacing:.6px;
}
.quiz-intro p{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:rgba(255,255,255,.78);
  margin-bottom:40px;
  line-height:1.55;
  max-width:580px;
}
.quiz-intro .btn-primary{
  background:linear-gradient(135deg,var(--c-aqua),var(--c-blue));
  box-shadow:0 12px 32px -8px rgba(0,169,206,.5);
}

/* Stage = pantalla completa por pregunta (dentro del modal full-screen) */
.quiz-stage{
  min-height:100vh;
  display:flex; flex-direction:column;
  position:relative; z-index:2;
  padding:24px 24px 50px;
}

.quiz-progress{
  position:sticky; top:0;
  display:flex; align-items:center; gap:18px;
  padding:18px 80px 18px 28px;
  z-index:5;
  background:rgba(15,28,51,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(100,204,201,.10);
  max-width:920px;
  margin:0 auto 24px;
  width:100%;
  border-radius:0 0 16px 16px;
}
.qp-bar{
  flex:1;
  height:5px;
  background:rgba(255,255,255,.10);
  border-radius:3px;
  overflow:hidden;
}
.qp-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--c-aqua),var(--c-blue));
  border-radius:3px;
  transition:width .6s var(--easing-cinema);
  box-shadow:0 0 12px rgba(100,204,201,.6);
}
.qp-text{
  font-size:.72rem;
  color:rgba(255,255,255,.65);
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:600;
  white-space:nowrap;
}

.quiz-card-wrap{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  max-width:920px;
  margin:0 auto;
  width:100%;
  min-height:60vh;
}

.quiz-card{
  width:100%;
  opacity:0;
  transform:translateY(50px);
  transition:opacity .55s var(--easing-out), transform .65s var(--easing-cinema);
  pointer-events:none;
  position:absolute;
  inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:20px 12px;
}
.quiz-card.active{
  opacity:1; transform:translateY(0); pointer-events:auto;
  position:relative; inset:auto;
}
.quiz-card.exit-up{transform:translateY(-50px); opacity:0}

.q-num-prefix{
  display:inline-block;
  margin-bottom:14px;
  font-family:'Work Sans',sans-serif;
  font-size:.78rem;
  color:var(--c-aqua);
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
}
.q-question{
  font-family:'Kenyan Coffee',sans-serif;
  font-size:clamp(1.7rem, 4.5vw, 3.4rem);
  text-transform:uppercase;
  color:#fff;
  margin:0 0 18px;
  letter-spacing:.5px;
  line-height:1.05;
  text-wrap:balance;
}
.q-subtitle{
  color:rgba(255,255,255,.65);
  font-size:clamp(1rem, 1.4vw, 1.1rem);
  margin:0 0 36px;
  line-height:1.5;
  max-width:720px;
}

/* Opciones tipo Typeform con letra antepuesta */
.q-options{
  display:grid;
  gap:12px;
  margin-bottom:8px;
  max-width:720px;
}
.q-opt{
  display:flex; align-items:center; gap:18px;
  padding:18px 22px;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
  cursor:pointer;
  transition:border-color .25s, background .25s, transform .2s var(--easing-spring);
  text-align:left;
  font-size:clamp(.98rem, 1.3vw, 1.08rem);
  color:rgba(255,255,255,.92);
  font-weight:500;
  width:100%;
}
.q-opt:hover{
  border-color:var(--c-aqua);
  background:rgba(100,204,201,.10);
  transform:translateX(4px);
}
.q-opt.selected{
  border-color:var(--c-aqua);
  background:rgba(100,204,201,.18);
  box-shadow:0 0 0 1px var(--c-aqua), 0 12px 30px -10px rgba(100,204,201,.4);
}
.q-opt-key{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  min-width:38px;
  border:1.5px solid rgba(255,255,255,.32);
  border-radius:8px;
  font-family:'Work Sans',sans-serif;
  font-size:.95rem;
  font-weight:700;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.06);
  transition:border-color .2s, background .2s, color .2s;
  letter-spacing:0;
}
.q-opt:hover .q-opt-key{
  border-color:var(--c-aqua);
  color:var(--c-aqua);
}
.q-opt.selected .q-opt-key{
  background:var(--c-aqua);
  border-color:var(--c-aqua);
  color:var(--c-dark);
}
.q-opt-emoji{
  font-size:1.5rem;
  line-height:1;
  flex-shrink:0;
}
.q-opt-body{flex:1; min-width:0}
.q-opt-label{display:block; font-weight:600; color:#fff; font-size:inherit}
.q-opt-sub{
  display:block;
  font-size:.78rem;
  color:rgba(255,255,255,.55);
  margin-top:3px;
  font-weight:400;
}

/* Scale (preg 4) full-width row */
.q-scale{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-bottom:8px;
  max-width:720px;
}
.q-scale-opt{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:22px 8px;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:border-color .25s, background .25s, transform .2s var(--easing-spring);
}
.q-scale-opt:hover{
  border-color:var(--c-aqua);
  background:rgba(100,204,201,.10);
  transform:translateY(-3px);
}
.q-scale-opt.selected{
  border-color:var(--c-aqua);
  background:rgba(100,204,201,.18);
  box-shadow:0 12px 30px -10px rgba(100,204,201,.4);
}
.q-scale-emoji{font-size:2rem; line-height:1}
.q-scale-label{
  font-size:.78rem;
  color:rgba(255,255,255,.65);
  text-align:center; line-height:1.25;
  font-weight:500;
}
.q-scale-opt.selected .q-scale-label{color:#fff; font-weight:700}

/* Input numérico (CP) gigante */
.q-input-wrap{margin-bottom:8px; max-width:520px}
.q-input{
  width:100%;
  padding:28px 24px;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:700;
  color:#fff;
  outline:none;
  font-family:'Kenyan Coffee','Work Sans',sans-serif;
  letter-spacing:8px;
  text-align:center;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.q-input::placeholder{color:rgba(255,255,255,.25); letter-spacing:4px}
.q-input:focus{
  border-color:var(--c-aqua);
  box-shadow:0 0 0 4px rgba(100,204,201,.18), 0 16px 40px -10px rgba(100,204,201,.3);
  background:rgba(255,255,255,.08);
}
.q-input.error{
  border-color:var(--c-high);
  background:rgba(234,67,53,.14);
}
.q-input-error{
  color:#FF8A8A;
  font-size:.92rem;
  margin-top:14px;
  min-height:1.2em;
  font-weight:500;
}

.q-skip{margin-top:24px}
.q-skip button{
  background:none; border:none;
  color:rgba(255,255,255,.5);
  font-size:.85rem;
  text-decoration:underline;
  cursor:pointer;
  padding:8px;
}
.q-skip button:hover{color:var(--c-aqua)}

.q-hint{
  margin-top:18px;
  font-size:.75rem;
  color:rgba(255,255,255,.4);
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-weight:500;
}
.q-hint kbd{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  padding:2px 8px;
  border-radius:5px;
  font-family:'Work Sans',sans-serif;
  font-size:.72rem;
  font-weight:700;
  color:var(--c-aqua);
  margin:0 2px;
}

/* Nav inferior */
.quiz-nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:32px;
  max-width:920px;
  width:100%;
  margin-left:auto; margin-right:auto;
}
.quiz-nav .btn-text{
  color:rgba(255,255,255,.6);
}
.quiz-nav .btn-text:hover{color:#fff}
.quiz-nav .btn-primary{
  background:linear-gradient(135deg,var(--c-aqua),var(--c-blue));
  box-shadow:0 8px 24px -6px rgba(100,204,201,.5);
}

@media(max-width:768px){
  .quiz-intro{min-height:75vh; padding:60px 18px}
  .quiz-stage{padding:64px 18px 30px}
  .quiz-progress{padding:14px 20px}
  .q-question{font-size:clamp(1.5rem, 7vw, 2.4rem)}
  .q-question::before{display:block; margin:0 0 8px; font-size:.7rem}
  .q-scale{grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
  .q-scale-opt{padding:14px 4px}
  .q-scale-emoji{font-size:1.5rem}
  .q-scale-label{font-size:.65rem}
}

@media(prefers-reduced-motion: reduce){
  .quiz-card{transition:opacity .15s linear; transform:none !important}
  .qp-fill{transition:width .15s linear}
  .q-opt:hover, .q-scale-opt:hover{transform:none}
}

/* ============================================
   REPORTE + MAPA
============================================ */
.reporte-section{
  background:linear-gradient(180deg, #EEF8FA 0%, #F7FCFD 100%);
}
.reporte-wrap{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:36px;
  align-items:start;
}
@media(max-width:960px){
  .reporte-wrap{grid-template-columns:1fr; gap:24px}
}
.reporte-cards h2{margin-bottom:8px}
.reporte-lead{color:var(--c-muted); margin-bottom:28px; font-size:1.05rem}

.rep-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
@media(max-width:540px){.rep-grid{grid-template-columns:1fr}}
.rep-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:20px 20px 18px;
  box-shadow:var(--shadow-sm);
}
.rep-card h3{
  font-size:1rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--c-blue-2);
  margin-bottom:14px;
  font-weight:700;
  font-family:'Kenyan Coffee',sans-serif;
}
.rep-card p{margin:0 0 .6em; color:var(--c-text); font-size:1.02rem; line-height:1.6}
.rep-card p:last-child{margin-bottom:0}
.rep-card .micro{color:var(--c-muted); margin-top:8px}

.sev-pill{
  display:inline-block;
  font-family:'Kenyan Coffee',sans-serif;
  font-size:1.4rem;
  font-weight:700;
  padding:10px 22px;
  border-radius:var(--radius-pill);
  color:#fff;
  margin-bottom:12px;
  letter-spacing:1.2px;
}
.sev-alta{background:var(--c-high)}
.sev-media{background:var(--c-med)}
.sev-baja{background:var(--c-low)}

.chip-list{display:flex; flex-wrap:wrap; gap:6px}
.chip-list li{
  background:rgba(100,204,201,.14);
  color:var(--c-blue-2);
  padding:6px 12px;
  border-radius:var(--radius-pill);
  font-size:.78rem;
  font-weight:600;
}
.bullet-list li{
  position:relative;
  padding-left:18px;
  font-size:.9rem;
  margin-bottom:6px;
  line-height:1.45;
  color:var(--c-text);
}
.bullet-list li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--c-blue);
}
.bullet-list li:last-child{margin-bottom:0}

.disclaimer{
  margin-top:24px;
  display:flex; gap:14px;
  background:rgba(255,209,0,.08);
  border:1px solid rgba(255,209,0,.30);
  border-radius:var(--radius);
  padding:18px 20px;
}
.disclaimer-icon{font-size:1.6rem; line-height:1; flex-shrink:0}
.disclaimer strong{color:var(--c-dark)}
.disclaimer em{font-style:italic; color:var(--c-dark)}
.disclaimer{font-size:.88rem; line-height:1.55; color:var(--c-text)}

.reporte-mapa{
  position:sticky;
  top:calc(var(--header-h) + 16px);
  display:flex; flex-direction:column; gap:10px;
}
#mapaCP{
  width:100%;
  height:520px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--c-bg);
}
@media(max-width:960px){
  .reporte-mapa{position:static}
  #mapaCP{height:380px}
}
.map-legend{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.lg-item{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff;
  border:1px solid var(--c-line);
  padding:6px 12px;
  border-radius:var(--radius-pill);
  font-size:.78rem;
  color:var(--c-muted);
}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block}
.dot-high{background:var(--c-high)}
.dot-med{background:var(--c-med)}
.dot-low{background:var(--c-low)}

/* Leaflet overrides */
.leaflet-container{font-family:'Work Sans',sans-serif}
.leaflet-popup-content-wrapper{border-radius:14px; box-shadow:0 12px 30px rgba(31,42,68,.18)}
.leaflet-popup-content{font-size:.85rem; color:var(--c-text); padding:6px 4px}
.leaflet-popup-content strong{color:var(--c-dark); font-family:'Kenyan Coffee',sans-serif; letter-spacing:.4px}

/* ============================================
   CASOS · testimoniales anónimos (NDA-safe)
   AIDA Desire stage · 4Ps Proof stage
============================================ */
.casos-section{
  background:linear-gradient(180deg, #EEF8FA 0%, #F7FCFD 100%);
  position:relative;
  overflow:hidden;
}
.casos-section::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:200px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(100,204,201,.10), transparent 70%);
  pointer-events:none;
}
.casos-head{max-width:760px; margin:0 auto 44px; text-align:center; position:relative; z-index:2}
.casos-head h2{margin-bottom:10px}
.casos-head p{color:var(--c-muted); font-size:1rem}

.casos-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  position:relative; z-index:2;
}
.caso-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  padding:34px 28px 28px;
  box-shadow:var(--shadow-sm);
  position:relative;
  display:flex; flex-direction:column;
  transition:transform .3s var(--easing-spring), box-shadow .3s;
}
.caso-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.caso-card.caso-featured{
  border-color:var(--c-aqua);
  box-shadow:0 24px 60px -16px rgba(100,204,201,.30), 0 0 0 1px rgba(100,204,201,.30);
}
.caso-quote-mark{
  position:absolute;
  top:-12px; left:24px;
  font-family:'Kenyan Coffee',sans-serif;
  font-size:5rem;
  line-height:1;
  color:var(--c-aqua);
  opacity:.4;
  pointer-events:none;
}
.caso-quote{
  font-family:'Work Sans',sans-serif;
  font-size:1rem;
  line-height:1.55;
  color:var(--c-dark);
  margin:0 0 24px;
  font-style:italic;
  flex:1;
  border:none; padding:0;
  font-weight:500;
}
.caso-meta{
  border-top:1px solid var(--c-line);
  padding-top:16px;
  display:flex; flex-direction:column; gap:4px;
}
.caso-sector{
  font-size:.85rem;
  color:var(--c-dark);
  font-weight:600;
}
.caso-zone{
  font-size:.78rem;
  color:var(--c-muted);
  letter-spacing:.3px;
}
.caso-package{
  margin-top:8px;
  font-size:.75rem;
  color:var(--c-blue-2);
  letter-spacing:.4px;
}
.caso-package strong{
  font-family:'Kenyan Coffee',sans-serif;
  color:var(--c-blue);
  letter-spacing:.6px;
  font-weight:700;
}

.casos-footer{
  margin-top:36px;
  text-align:center;
  position:relative; z-index:2;
}
.casos-disclaimer{
  display:inline-block;
  background:rgba(255,209,0,.10);
  border:1px solid rgba(255,209,0,.30);
  border-radius:var(--radius);
  padding:14px 22px;
  font-size:.85rem;
  color:var(--c-text);
  max-width:760px;
  margin:0;
  line-height:1.55;
}

@media(max-width:900px){
  .casos-grid{grid-template-columns:1fr; gap:20px}
}

/* ============================================
   FAQ · accordion semántico <details>/<summary>
   FAQ schema JSON-LD ya en <head>
============================================ */
.faq-section{
  background:#fff;
  position:relative;
}
.faq-wrap{max-width:880px}
.faq-head{text-align:center; margin-bottom:44px}
.faq-head h2{margin-bottom:10px}
.faq-head p{color:var(--c-muted); font-size:1rem}

.faq-list{
  display:flex; flex-direction:column;
  gap:12px;
}
.faq-item{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
.faq-item:hover{border-color:var(--c-aqua); box-shadow:var(--shadow-sm)}
.faq-item[open]{
  border-color:var(--c-aqua);
  box-shadow:0 12px 30px -10px rgba(0,169,206,.20);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:22px 26px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  user-select:none;
  transition:background .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{display:none}
.faq-item summary:hover{background:rgba(100,204,201,.04)}
.faq-q{
  font-family:'Work Sans',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  color:var(--c-dark);
  line-height:1.4;
  flex:1;
}
.faq-icon{
  width:32px; height:32px;
  min-width:32px;
  border-radius:50%;
  background:rgba(100,204,201,.12);
  color:var(--c-blue);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--easing-spring), background .25s;
}
.faq-item[open] .faq-icon{
  transform:rotate(180deg);
  background:var(--c-aqua);
  color:var(--c-dark);
}
.faq-a{
  padding:0 26px 22px;
  color:var(--c-text);
  font-size:.95rem;
  line-height:1.6;
  animation:faqOpen .4s var(--easing-out);
}
.faq-a p{margin:0 0 12px}
.faq-a p:last-child{margin-bottom:0}
.faq-a ul{margin:8px 0 12px; padding-left:22px}
.faq-a ul li{margin-bottom:6px; line-height:1.5}
.faq-a strong{color:var(--c-dark); font-weight:600}
.faq-a em{font-style:italic; color:var(--c-blue-2)}
@keyframes faqOpen{
  from{opacity:0; transform:translateY(-8px)}
  to{opacity:1; transform:translateY(0)}
}
@media(prefers-reduced-motion: reduce){
  .faq-a{animation:none}
  .faq-icon{transition:none}
}
@media(max-width:540px){
  .faq-item summary{padding:18px 20px; gap:12px}
  .faq-q{font-size:.95rem}
  .faq-a{padding:0 20px 18px}
}

/* ============================================
   PAQUETES CAROUSEL · patrón Zazil-Há (1-slide-visible)
============================================ */
.paquetes-section{
  background:linear-gradient(180deg, #F7FCFD 0%, #EEF8FA 100%);
  position:relative;
  overflow:hidden;
}
.paquetes-section::before{
  /* Onda decorativa Firessa abajo */
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:280px;
  background:
    radial-gradient(60% 50% at 20% 100%, rgba(100,204,201,.10), transparent 60%),
    radial-gradient(40% 35% at 85% 100%, rgba(0,169,206,.08), transparent 60%);
  pointer-events:none;
}
.paquetes-head{max-width:780px; margin:0 auto 40px; text-align:center; position:relative; z-index:2}
.paquetes-head h2{margin-bottom:10px}
.paquetes-head p{color:var(--c-muted); font-size:1.05rem}

.pkg-carousel-wrap{
  position:relative;
  display:flex; align-items:center; gap:14px;
  max-width:1140px; margin:0 auto;
  z-index:2;
}

.pkg-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  position:relative;
  width:100%;
  border-radius:var(--radius-lg);
}
.pkg-track::-webkit-scrollbar{display:none}

.pkg-slide{
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:0;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.pkg-slide.is-active{
  box-shadow:0 24px 60px -16px rgba(0,169,206,.30), 0 0 0 1px rgba(100,204,201,.30);
}

/* Visual side (panel izq dark con gradient marca Firessa) */
.pkg-visual{
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(100,204,201,.18), transparent 70%),
    linear-gradient(160deg, #1F2A44 0%, #14223A 55%, #0A1426 100%);
  padding:42px 34px 38px;
  display:flex; flex-direction:column;
  color:#fff;
  overflow:hidden;
}
/* 2026-05-29 v3.1.0 · imagen real Tomas en pkg-visual (capa 0) + overlay tinte navy (capa 1) */
.pkg-visual.has-img > .pkg-visual-img{
  position:absolute; inset:0; z-index:0; pointer-events:none; margin:0;
}
.pkg-visual.has-img > .pkg-visual-img img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
/* 2026-07-23 · video del producto: misma capa que la imagen (z-index 0), en el DOM va después → queda encima; el tinte ::after (z-index 1) sigue arriba. Fade-in solo cuando reproduce (JS agrega .is-playing en el slide activo). */
.pkg-visual.has-img > .pkg-visual-video{
  position:absolute; inset:0; z-index:0; margin:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.pkg-visual.has-img > .pkg-visual-video.is-playing{ opacity:1; }
/* 2026-07-23: el video del producto SÍ se reproduce aunque el sistema esté en reduced-motion
   (decisión Angel: el movimiento es suave/calmado y es contenido clave del carrusel).
   La PC de Angel tiene animaciones de Windows OFF → sin este cambio no vería los videos. */
.pkg-visual.has-img::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(15,23,42,.22) 0%, rgba(15,23,42,.55) 55%, rgba(10,20,38,.88) 100%);
}
.pkg-visual.has-img > .pkg-visual-rings{ display:none; }
.pkg-visual.has-img > .pkg-visual-drop{ display:none; }
.pkg-visual-eyebrow{
  font-family:'Kenyan Coffee',sans-serif;
  font-size:.72rem;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--c-aqua);
  margin-bottom:18px;
  position:relative; z-index:2;
}
.pkg-visual-name{
  font-family:'Kenyan Coffee',sans-serif;
  font-size:clamp(1.9rem, 2.8vw, 2.4rem);
  text-transform:uppercase;
  letter-spacing:.6px;
  color:#fff;
  line-height:1.05;
  margin:0 0 12px;
  position:relative; z-index:2;
}
.pkg-visual-tagline{
  font-size:.92rem;
  color:rgba(255,255,255,.78);
  font-style:italic;
  line-height:1.5;
  margin-bottom:24px;
  position:relative; z-index:2;
}
.pkg-visual-price{
  position:relative; z-index:2;
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid rgba(100,204,201,.20);
}
.pkg-price-label{
  display:block;
  font-size:.7rem; letter-spacing:1.8px; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:6px;
  font-weight:500;
}
.pkg-price-from{
  display:block;
  font-family:'Kenyan Coffee',sans-serif;
  font-size:2.4rem;
  color:var(--c-yellow);
  font-weight:700;
  line-height:1;
  letter-spacing:.4px;
}
.pkg-price-iva{
  font-family:inherit;
  font-size:.42em;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,209,0,.7);
  vertical-align:super;
  margin-left:4px;
}
.pkg-price-range{
  display:block;
  font-size:.78rem;
  color:rgba(255,255,255,.55);
  margin-top:6px;
}

/* Decoraciones marca Firessa en panel visual: gota + ondas concéntricas */
.pkg-visual-drop{
  position:absolute;
  right:-24px; bottom:-24px;
  width:180px; height:230px;
  background:linear-gradient(180deg, rgba(100,204,201,.4), rgba(0,169,206,.6));
  clip-path:polygon(50% 0%, 90% 62%, 76% 100%, 24% 100%, 10% 62%);
  opacity:.35;
  filter:blur(.4px);
  pointer-events:none;
}
.pkg-visual-rings{
  position:absolute;
  left:-40px; top:-40px;
  width:280px; height:280px;
  border-radius:50%;
  border:1.5px solid rgba(100,204,201,.18);
  pointer-events:none;
}
.pkg-visual-rings::after{
  content:""; position:absolute; inset:30px;
  border-radius:50%;
  border:1.5px solid rgba(100,204,201,.12);
}

.pkg-badge-recommended{
  position:absolute;
  top:20px; right:20px;
  background:linear-gradient(135deg, var(--c-yellow), #FFC500);
  color:var(--c-dark);
  /* 2026-05-28 (Angel): indicativo más grande y dominante */
  padding:10px 20px;
  border-radius:var(--radius-pill);
  font-family:'Kenyan Coffee',sans-serif;
  font-size:1.05rem;
  letter-spacing:1.8px;
  text-transform:uppercase;
  box-shadow:0 6px 18px rgba(255,209,0,.45);
  font-weight:700;
  box-shadow:0 8px 20px rgba(255,209,0,.4);
  z-index:3;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .35s var(--easing-spring), transform .35s var(--easing-spring);
}
/* 2026-05-29 v3.1.1 · Badge "Tu match" SOLO en el slide del paquete recomendado por el quiz.
   Pre-quiz no se muestra en ningún slide (catálogo neutro · Carlos 29-may "no decir cuál match sin test"). */
.pkg-slide .pkg-badge-recommended{ visibility:hidden; opacity:0; }
.pkg-slide.is-match .pkg-badge-recommended{ visibility:visible; opacity:1; transform:translateY(0); }

/* H2 #paquetesTitle · variantes pre/post quiz */
#paquetesTitle .h2-pre-quiz{ display:inline; }
#paquetesTitle .h2-post-quiz{ display:none; }
body.quiz-completed #paquetesTitle .h2-pre-quiz{ display:none; }
body.quiz-completed #paquetesTitle .h2-post-quiz,
body.quiz-completed #paquetesTitle .h2-post-quiz[hidden]{ display:inline; }

/* Meta side (content list) */
.pkg-meta{
  padding:42px 38px 38px;
  display:flex; flex-direction:column;
  background:#fff;
}
.pkg-section{margin-bottom:20px}
.pkg-section:last-of-type{margin-bottom:14px}
.pkg-section h4{
  font-size:.95rem;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--c-blue-2);
  margin:0 0 12px;
  font-family:'Kenyan Coffee',sans-serif;
  font-weight:700;
}
.pkg-section ul{display:flex; flex-direction:column; gap:8px}
.pkg-section li{
  position:relative;
  padding-left:20px;
  font-size:.95rem;
  color:var(--c-text);
  line-height:1.5;
}
.pkg-section li::before{
  content:"";
  position:absolute; left:0; top:8px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--c-aqua);
}
.pkg-warranty{
  background:linear-gradient(135deg, rgba(100,204,201,.10), rgba(0,169,206,.06));
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:.8rem;
  color:var(--c-dark);
  margin:8px 0 18px;
  border-left:3px solid var(--c-aqua);
  line-height:1.45;
}
.pkg-cta{width:100%; margin-top:auto}

/* 2026-05-28 (Angel): placeholder cuando no hay detalles cargados del paquete */
.pkg-placeholder{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:32px 20px;
  margin:8px 0 24px;
  background:linear-gradient(135deg, rgba(100,204,201,.08), rgba(0,169,206,.05));
  border:1px dashed rgba(0,169,206,.32);
  border-radius:var(--radius-md);
  color:var(--c-dark);
  min-height:180px;
}
.pkg-placeholder-icon{
  color:var(--c-blue);
  opacity:.6;
  margin-bottom:14px;
}
.pkg-placeholder-title{
  font-family:'Kenyan Coffee',sans-serif;
  font-size:1.05rem;
  letter-spacing:.6px;
  color:var(--c-dark);
  margin:0 0 10px;
  line-height:1.25;
}
.pkg-placeholder-text{
  font-size:.92rem;
  color:var(--c-muted);
  margin:0;
  max-width:38ch;
  line-height:1.55;
}

/* Arrows nav */
.pkg-arrow{
  width:48px; height:48px; min-width:48px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid var(--c-line);
  color:var(--c-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .2s var(--easing-spring), box-shadow .25s, color .2s;
  z-index:5;
}
.pkg-arrow:hover{transform:scale(1.08); box-shadow:var(--shadow); color:var(--c-blue)}
.pkg-arrow:focus-visible{outline:2px solid var(--c-aqua); outline-offset:3px}

/* Dots */
.pkg-dots{
  display:flex; justify-content:center; align-items:flex-start;
  gap:14px; flex-wrap:wrap;
  margin-top:32px;
  max-width:900px;
  margin-left:auto; margin-right:auto;
  padding:0 24px;
  position:relative; z-index:2;
}
.pkg-dot{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:transparent; border:none;
  cursor:pointer;
  padding:6px;
  opacity:.55;
  transition:opacity .25s;
}
.pkg-dot:hover{opacity:1}
.pkg-dot.is-active{opacity:1}
.pkg-dot-bar{
  width:42px; height:4px;
  border-radius:2px;
  background:rgba(31,42,68,.22);
  transition:background .3s, width .3s var(--easing-spring);
}
.pkg-dot.is-active .pkg-dot-bar{
  background:linear-gradient(90deg, var(--c-aqua), var(--c-blue));
  width:64px;
}
.pkg-dot-label{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--c-muted);
  font-family:'Work Sans',sans-serif;
}
.pkg-dot.is-active .pkg-dot-label{color:var(--c-dark)}

.paquetes-foot{text-align:center; max-width:680px; margin:24px auto 0; position:relative; z-index:2}

@media(max-width:880px){
  .pkg-slide{grid-template-columns:1fr}
  .pkg-visual{min-height:auto; padding:36px 28px}
  .pkg-visual-name{font-size:1.7rem; margin-top:16px}
  .pkg-meta{padding:32px 28px 30px}
}
@media(max-width:540px){
  .pkg-arrow{display:none}
  .pkg-visual{padding:28px 22px}
  .pkg-meta{padding:24px 22px}
  .pkg-dot-label{display:none}
  .pkg-dot-bar{width:32px}
  .pkg-dot.is-active .pkg-dot-bar{width:48px}
}

/* ============================================
   FORM
============================================ */
.contacto-section{
  background:linear-gradient(135deg,#0a1426 0%, #1F2A44 50%, #14223A 100%);
  color:#fff;
  padding-bottom:64px;
}
.contacto-section + .site-footer{margin-top:0}
.contacto-wrap{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:48px;
  align-items:start;
}
@media(max-width:960px){.contacto-wrap{grid-template-columns:1fr; gap:32px}}

.contacto-copy h2{color:#fff; margin-bottom:14px}
.contacto-copy p{color:rgba(255,255,255,.78); font-size:1.05rem; margin-bottom:24px}
.contacto-copy h2 span[data-bind]{color:var(--c-yellow)}
.contacto-bullets{display:flex; flex-direction:column; gap:10px}
.contacto-bullets li{
  position:relative;
  padding-left:24px;
  color:rgba(255,255,255,.86);
  font-size:.95rem;
  line-height:1.45;
}
.contacto-bullets li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--c-aqua);
  font-weight:700;
}
.contacto-bullets strong{color:#fff; font-weight:700}

.contacto-form{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-lg);
  padding:28px;
  backdrop-filter:blur(8px);
}
.contacto-form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
@media(max-width:540px){.contacto-form .row{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field .lbl{
  font-size:.7rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  font-weight:600;
}
.field .req{color:var(--c-aqua)}
.field input, .field textarea, .field select{
  width:100%;
  padding:12px 14px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);
  color:#fff;
  font-family:'Work Sans',sans-serif;
  font-size:.95rem;
  transition:border-color .2s, background .2s, box-shadow .2s;
  outline:none;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.4)}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--c-aqua);
  background:rgba(255,255,255,.10);
  box-shadow:0 0 0 3px rgba(100,204,201,.20);
}
.field input.error, .field textarea.error, .field select.error{
  border-color:var(--c-high);
  background:rgba(234,67,53,.10);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2364CCC9' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
  padding-right:36px;
}
.field select option{background:var(--c-dark); color:#fff}

.checkbox{
  display:flex; align-items:flex-start; gap:10px;
  margin:8px 0 18px;
  font-size:.82rem;
  color:rgba(255,255,255,.75);
  line-height:1.5;
  cursor:pointer;
}
.checkbox input{margin-top:3px; accent-color:var(--c-aqua)}
.checkbox a{color:var(--c-aqua)}
.checkbox a:hover{color:#fff}

#contactoSubmit{width:100%}
.form-msg{
  margin-top:14px;
  font-size:.9rem;
  text-align:center;
  min-height:1.2em;
}
.form-msg.success{color:var(--c-aqua)}
.form-msg.error{color:#FF8A8A}

/* ============================================
   FOOTER (chassis Firessa sistemamovil)
============================================ */
.site-footer{background:var(--c-dark); color:rgba(255,255,255,.85)}
.foot-grid{
  display:grid;
  grid-template-columns:1.2fr 2fr 1fr;
  gap:40px;
  padding:54px 24px 30px;
  align-items:flex-start;
}
.foot-logo{height:46px; margin-bottom:18px; display:block}
.foot-brand address{font-style:normal; line-height:1.7; font-size:.92rem}
.foot-brand a{color:rgba(255,255,255,.85)}
.foot-brand a:hover{color:var(--c-aqua)}
.foot-nav{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.foot-nav ul{list-style:none; padding:0; margin:0}
.foot-nav li{margin-bottom:16px}
.foot-nav a{
  color:#fff;
  font-family:'Work Sans',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:1rem;
  line-height:1.15;
}
.foot-nav a:hover{color:var(--c-aqua)}
.foot-extra{
  display:flex; flex-direction:column;
  align-items:flex-end; gap:18px;
}
.foot-extra .footer-priv{
  color:rgba(255,255,255,.85);
  font-size:.92rem;
  cursor:pointer;
}
.foot-extra .footer-priv:hover{color:var(--c-aqua)}
.foot-social{display:flex; gap:14px}
.foot-social a{
  width:34px; height:34px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  transition:background .2s, border-color .2s, color .2s;
}
.foot-social a:hover{
  background:var(--c-aqua);
  border-color:var(--c-aqua);
  color:var(--c-dark);
}
.foot-social svg{width:16px; height:16px; fill:currentColor}
/* Bloque de aviso de privacidad expandido (entre foot-grid y foot-bottom) */
.foot-privacy-block{
  padding:28px 24px 24px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(15,28,51,.4);
}
.foot-priv-title{
  font-family:'Kenyan Coffee',sans-serif;
  font-size:.78rem;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--c-aqua);
  margin:0 0 10px;
  font-weight:700;
}
.foot-priv-text{
  font-size:.78rem;
  line-height:1.6;
  color:rgba(255,255,255,.7);
  margin:0;
  max-width:1100px;
}
.foot-priv-text strong{color:rgba(255,255,255,.92); font-weight:600}
.foot-priv-text em{font-style:italic; color:rgba(100,204,201,.85)}
.foot-priv-text a{color:var(--c-aqua); text-decoration:underline; text-underline-offset:2px}
.foot-priv-text a:hover{color:#fff}
.foot-priv-link{
  display:inline-block;
  margin-left:8px;
  font-weight:600;
  letter-spacing:.3px;
  text-decoration:none !important;
}
.foot-priv-link:hover{transform:translateX(2px); display:inline-block}

.foot-bottom{
  padding:18px 0;
  font-size:.78rem;
  color:rgba(255,255,255,.55);
}
.foot-bottom-inner{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.foot-copy, .foot-dev-credit{font-size:.78rem; margin:0}
.foot-bottom a{color:rgba(255,255,255,.85)}
.foot-bottom a:hover{color:var(--c-aqua)}
.foot-dev-credit{color:rgba(255,255,255,.55)}
.foot-dev-credit a{
  color:rgba(255,255,255,.85);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px dotted rgba(100,204,201,.4);
  padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.foot-dev-credit a:hover{color:var(--c-aqua); border-color:var(--c-aqua)}

@media(max-width:640px){
  .foot-bottom-inner{flex-direction:column; gap:8px; text-align:center}
}

@media(max-width:880px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
  .foot-extra{align-items:flex-start; grid-column:1 / -1}
}
@media(max-width:540px){
  .foot-grid{grid-template-columns:1fr; gap:30px}
  .foot-nav{grid-template-columns:1fr}
}

/* ============================================
   PRIVACY MODAL (chassis Firessa)
============================================ */
.privacy-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.privacy-modal[hidden]{display:none}
.privacy-modal__backdrop{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(100,204,201,.45), rgba(31,42,68,.85));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .35s ease;
}
.privacy-modal.is-open .privacy-modal__backdrop{opacity:1}
.privacy-modal__card{
  position:relative;
  background:#fff;
  border-radius:var(--radius-lg);
  width:100%; max-width:720px;
  max-height:88vh;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 32px 80px rgba(0,0,0,.4);
  opacity:0;
  transform:translateY(20px) scale(.96);
  transition:opacity .4s ease, transform .4s var(--easing-spring);
}
.privacy-modal.is-open .privacy-modal__card{opacity:1; transform:translateY(0) scale(1)}
.privacy-modal__head{
  position:relative;
  padding:32px 64px 22px 36px;
  background:linear-gradient(135deg,var(--c-dark),var(--c-blue));
  color:#fff;
}
.privacy-modal__title{
  font-family:'Kenyan Coffee','Work Sans',sans-serif;
  font-weight:700;
  font-size:1.6rem;
  margin:0 0 6px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#fff;
}
.privacy-modal__subtitle{
  margin:0; font-size:.78rem;
  opacity:.92;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
}
.privacy-modal__close{
  position:absolute; top:18px; right:18px;
  width:38px; height:38px;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .25s;
}
.privacy-modal__close:hover{background:rgba(255,255,255,.32); transform:rotate(90deg)}
.privacy-modal__close:focus-visible{outline:2px solid #fff; outline-offset:2px}
.privacy-modal__body{
  padding:28px 36px 32px;
  overflow-y:auto;
  font-size:.92rem;
  line-height:1.6;
  color:var(--c-text);
}
.privacy-modal__body::-webkit-scrollbar{width:8px}
.privacy-modal__body::-webkit-scrollbar-track{background:#EAF5F6; border-radius:4px}
.privacy-modal__body::-webkit-scrollbar-thumb{background:var(--c-aqua); border-radius:4px}
.privacy-modal__body h3{
  font-family:'Kenyan Coffee','Work Sans',sans-serif;
  font-weight:700;
  font-size:1.05rem;
  margin:24px 0 10px;
  color:var(--c-dark);
  text-transform:uppercase;
  letter-spacing:.8px;
}
.privacy-modal__body h3 .muted{
  font-weight:500; opacity:.7;
  font-size:.85em; color:var(--c-muted);
}
.privacy-modal__body h3:first-child{margin-top:0}
.privacy-modal__body p{margin:0 0 12px}
.privacy-modal__body ul{margin:0 0 14px; padding-left:20px}
.privacy-modal__body ul li{margin:0 0 6px}
.privacy-modal__body ul li::marker{color:var(--c-blue)}
.privacy-modal__body a{color:var(--c-blue); text-decoration:underline}
.privacy-modal__body a:hover{color:var(--c-dark); opacity:1}
.privacy-modal__date{
  margin-top:18px;
  font-size:.82rem;
  color:var(--c-muted);
}
@media(max-width:540px){
  .privacy-modal__head{padding:24px 56px 18px 24px}
  .privacy-modal__title{font-size:1.3rem}
  .privacy-modal__body{padding:22px 24px 24px}
}

/* ============================================
   WHATSAPP WIDGET (heredado del chassis Firessa)
============================================ */
.wa-btn{position:fixed; bottom:24px; right:24px; z-index:9999}
/* 2026-05-28 (audit): en mobile el WA flotante chocaba con las stats del hero · subir safe area */
@media(max-width:420px){
  .wa-btn{ bottom:90px; right:16px; }
}
.wa-trigger{
  width:60px; height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 28px rgba(37,211,102,.55);
  transition:transform .3s var(--easing-spring), box-shadow .3s;
  border:none;
  position:relative; z-index:2;
  padding:0;
}
.wa-trigger:hover{transform:scale(1.1); box-shadow:0 12px 40px rgba(37,211,102,.65)}
.wa-pulse{
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid #25D366;
  animation:waPulse 2.6s ease-out infinite;
  pointer-events:none;
}
@keyframes waPulse{
  0%{transform:scale(1); opacity:.6}
  100%{transform:scale(1.6); opacity:0}
}
.wa-form{
  position:absolute;
  bottom:74px; right:0;
  width:320px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
  overflow:hidden;
  transform:scale(.8) translateY(20px);
  transform-origin:bottom right;
  opacity:0; pointer-events:none;
  transition:transform .35s var(--easing-spring), opacity .35s ease;
  font-family:'Work Sans',sans-serif;
}
.wa-form.open{transform:scale(1) translateY(0); opacity:1; pointer-events:auto}
.wa-form-header{
  background:linear-gradient(135deg,var(--c-dark),var(--c-blue));
  padding:18px 18px 14px;
  display:flex; align-items:center; gap:12px;
  position:relative; color:#fff;
}
.wa-avatar{
  width:46px; height:46px; min-width:46px;
  background:rgba(100,204,201,.22);
  border:1.5px solid rgba(100,204,201,.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.wa-agent-name{color:#fff; font-weight:700; font-size:.95rem; letter-spacing:.3px}
.wa-agent-tagline{color:rgba(255,255,255,.72); font-size:.72rem; margin-top:2px}
.wa-close{
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.18); border:none;
  border-radius:50%; width:26px; height:26px;
  color:#fff; cursor:pointer; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .25s;
}
.wa-close:hover{background:rgba(255,255,255,.32); transform:rotate(90deg)}
.wa-form-body{padding:16px 18px 18px}
.wa-bubble{
  background:rgba(0,169,206,.06);
  border:1px solid rgba(0,169,206,.12);
  border-radius:12px 12px 12px 4px;
  padding:11px 14px;
  font-size:.85rem;
  color:var(--c-dark);
  line-height:1.55;
  margin-bottom:14px;
}
.wa-bubble strong{font-weight:700}
.wa-form-body label{
  display:block;
  font-size:.7rem;
  font-weight:700;
  color:var(--c-dark);
  margin:10px 0 5px;
  text-transform:uppercase;
  letter-spacing:1.4px;
}
.wa-form-body label:first-of-type{margin-top:0}
.wa-form-body .req{color:var(--c-blue); margin-left:2px}
.wa-form-body input{
  width:100%; padding:11px 13px;
  border:1.5px solid rgba(31,42,68,.14);
  border-radius:8px;
  font-family:'Work Sans',sans-serif;
  font-size:.88rem;
  color:var(--c-dark);
  background:#FAFAFA;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.wa-form-body input:focus{
  border-color:var(--c-aqua);
  box-shadow:0 0 0 3px rgba(100,204,201,.18);
  background:#fff;
}
.wa-form-body input.field-warn{border-color:#E04B4B; background:#FFF6F6}
.wa-send-btn{
  margin-top:14px; width:100%; padding:12px;
  background:linear-gradient(135deg,var(--c-dark),var(--c-blue));
  color:#fff; border:none; border-radius:10px;
  font-family:'Work Sans',sans-serif;
  font-weight:700; font-size:.9rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s, box-shadow .25s;
}
.wa-send-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(0,169,206,.5)}
@media(max-width:520px){.wa-form{width:calc(100vw - 48px); max-width:320px}}

/* ============================================
   AGENDA CTA · sección dual Stripe Checkout + asesor
   Entre Trust Bar y Quiz Section
============================================ */
.agenda-cta-section{
  padding: 56px 0 60px;
  background: linear-gradient(180deg, #FAFBFC 0%, #F3F6F9 100%);
  position: relative;
  overflow: hidden;
}
.agenda-cta-section::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(420px circle at 12% 30%, rgba(100,204,201,.10) 0%, transparent 60%),
    radial-gradient(380px circle at 88% 80%, rgba(0,169,206,.08) 0%, transparent 60%);
  pointer-events:none;
}
.agenda-cta-inner{
  position: relative;
  max-width: 980px;
  text-align: center;
}
.agenda-cta-head h2{
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  line-height: 1.12;
  color: var(--c-navy);
  margin: 8px 0 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
/* 2026-06-04 Karla id 55: ¿YA DECIDISTE? era poco legible (.78rem base global) */
.agenda-cta-head .eyebrow{
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  letter-spacing: 2.8px;
  padding: 9px 18px;
  margin-bottom: 18px;
}
.agenda-cta-head p{
  font-size: clamp(.98rem, 1.3vw, 1.08rem);
  color: var(--c-text-dim);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.55;
}
.agenda-cta-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}
@media(max-width: 720px){
  .agenda-cta-row{ grid-template-columns: 1fr; gap: 14px; }
}
.agenda-btn-primary,
.agenda-btn-secondary{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 22px 26px;
  border-radius: 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .25s var(--easing-out), box-shadow .25s var(--easing-out), border-color .2s;
  position: relative;
  min-height: 96px;
  /* 2026-06-04 C1 fix: permitir shrink dentro de grid mobile */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
}
.agenda-btn-primary{
  background: linear-gradient(135deg, #00A9CE 0%, #64CCC9 100%);
  color: #fff;
  box-shadow: 0 14px 30px -8px rgba(0,169,206,.45);
}
.agenda-btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -10px rgba(0,169,206,.55);
}
.agenda-btn-primary:active{ transform: translateY(-1px) }
.agenda-btn-primary[aria-busy="true"]{
  opacity: .82; cursor: progress; pointer-events:none;
}
.agenda-btn-secondary{
  background: #fff;
  color: var(--c-navy);
  border-color: rgba(31,42,68,.16);
  box-shadow: 0 8px 20px -10px rgba(31,42,68,.16);
}
.agenda-btn-secondary:hover{
  transform: translateY(-3px);
  border-color: var(--c-aqua);
  box-shadow: 0 18px 32px -10px rgba(31,42,68,.22);
}
.agenda-btn-label{
  display: flex; align-items: center; gap: 12px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 8px;
}
.agenda-btn-icon svg{ display: block }
.agenda-btn-price{
  display: flex; flex-direction: column;
  margin-top: auto;
  font-family: var(--font-sans);
}
.agenda-btn-amount{
  font-size: 1.42rem;
  font-weight: 800;
  /* 2026-05-28 (audit): monto en navy sobre gradient cyan = contraste ~9:1 (era yellow ~2.4:1 fail AA) */
  color: #1F2A44;
  letter-spacing: .5px;
}
.agenda-btn-primary .agenda-btn-detail{
  color: rgba(255,255,255,.95);
  font-weight: 600;
}
.agenda-btn-secondary .agenda-btn-price{ justify-content: center }
.agenda-btn-detail{
  font-size: .82rem;
  opacity: .88;
  letter-spacing: .2px;
  margin-top: 2px;
}
.agenda-btn-secondary .agenda-btn-detail{
  color: var(--c-text-dim);
}
/* 2026-05-28 (audit): la línea geo nueva tiene 2 links · darles peso de CTA secundario */
.agenda-cta-geo{
  margin-top: 14px;
  color: var(--c-text-dim);
  font-size: .92rem;
  line-height: 1.55;
}
.agenda-cta-geo strong{ color: var(--c-navy); font-weight: 700 }
.agenda-cta-geo a{
  color: var(--c-blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.agenda-cta-geo a:hover{ color: var(--c-blue-2); text-decoration-thickness: 2px }
.agenda-cta-foot{
  margin: 30px auto 0;
  font-size: .92rem;
  color: var(--c-text-dim);
  letter-spacing: .2px;
}
.agenda-cta-foot a{
  color: var(--c-aqua);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-aqua);
}
.agenda-cta-foot a:hover{ color: var(--c-blue) }

/* Loading spinner para el botón de pago en estado aria-busy */
.agenda-btn-primary[aria-busy="true"]::after{
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%; right: 22px;
  width: 18px; height: 18px;
  margin-top: -9px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: agendaSpin 0.7s linear infinite;
}
@keyframes agendaSpin{ to { transform: rotate(360deg) } }

/* Mensaje de error inline (si falla el fetch) */
.agenda-error-msg{
  display: block;
  margin: 16px auto 0;
  padding: 12px 16px;
  background: #FFF3CD;
  border-left: 4px solid #FFD100;
  border-radius: 6px;
  color: #664D03;
  font-size: .9rem;
  text-align: left;
  max-width: 640px;
}

/* ============================================
   TRUST BAR · item Pago Seguro (6º item)
============================================ */
.trust-item.trust-payment{
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
}
.trust-payment-icon{
  color: var(--c-blue);
  margin-bottom: 2px;
}
.trust-payment-label{
  text-align: center;
  line-height: 1.35;
}
.trust-payment-label strong{
  color: var(--c-navy);
  font-weight: 700;
}
.trust-payment-sub{
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  color: var(--c-aqua);
  letter-spacing: .4px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============================================
   REP-CARD CTA ROW · dual button en card rep-horeca
============================================ */
.rep-cta-row{
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
/* 2026-05-28 (Karla #7+#9): match con rango referencial + altCTAs up/down */
.rec-package{
  margin: 14px 0 4px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, rgba(100,204,201,.10), rgba(0,169,206,.06));
  border: 1px solid rgba(0,169,206,.22);
  border-radius: var(--radius-md);
}
.rec-package-head{
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.rec-package-eyebrow{
  font-family: var(--font-sans);
  /* 2026-05-28 (Angel): indicativo más grande y dominante */
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--c-blue-2);
  padding: 7px 14px;
  background: rgba(0,169,206,.18);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,169,206,.18);
}
.rec-package-head{ flex-wrap: wrap; gap: 12px; margin-bottom: 10px }
.rec-package-name{ font-size: 1.42rem }
.rec-package-name{
  font-family: 'Kenyan Coffee', sans-serif;
  font-size: 1.18rem;
  letter-spacing: .5px;
  color: var(--c-navy);
}
.rec-package-price-row{
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.rec-package-price{
  font-family: var(--font-sans);
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--c-navy);
}
.rec-package-price-tag{
  font-size: .72rem;
  color: var(--c-muted);
  letter-spacing: .3px;
  font-style: italic;
}
.rec-package-disclaimer{
  font-size: .78rem;
  color: var(--c-muted);
  margin: 8px 0 12px;
  line-height: 1.45;
}
.rec-package-altcta{
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.rec-alt-btn{
  background: #fff;
  border: 1.5px solid rgba(0,169,206,.32);
  color: var(--c-blue);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.rec-alt-btn:hover{
  background: rgba(0,169,206,.06);
  border-color: var(--c-blue);
  transform: translateY(-1px);
}
.rec-alt-btn[hidden]{ display: none }
.rep-cta-row .btn{
  flex: 1 1 auto;
  min-width: 180px;
  justify-content: center;
}
.btn-agendar{
  background: linear-gradient(135deg, #FFD100 0%, #FFB800 100%) !important;
  color: var(--c-navy) !important;
  border: none;
}
.btn-agendar:hover{
  filter: brightness(1.05);
  box-shadow: 0 10px 22px -8px rgba(255,209,0,.55) !important;
}
.btn-agendar[aria-busy="true"]{
  opacity: .8; cursor: progress;
  pointer-events: none;
}

/* ============================================
   REVEAL ANIMATIONS
============================================ */
.rv, .rvl, .rvr, .rvu{
  opacity:0;
  transition:opacity .8s var(--easing-out), transform .8s var(--easing-out);
}
.rvl{transform:translateX(-30px)}
.rvr{transform:translateX(30px)}
.rvu{transform:translateY(30px)}
.rv.is-visible, .rvl.is-visible, .rvr.is-visible, .rvu.is-visible{
  opacity:1; transform:none;
}
@media(prefers-reduced-motion: reduce){
  .rv, .rvl, .rvr, .rvu{opacity:1; transform:none; transition:none}
}

/* ============================================
   UTILITIES
============================================ */
[hidden]{display:none !important}
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* ============================================================
   2026-05-29 v3.1.2 - Responsive audit fixes (Playwright report)
   ============================================================ */

/* Agenda CTA buttons overflow en mobile */
.agenda-btn-detail{
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}
@media(max-width:540px){
  .agenda-btn-detail{ font-size: .76rem; letter-spacing: .1px; }
  .agenda-btn-amount{ font-size: 1.28rem; }
  .agenda-btn-primary,
  .agenda-btn-secondary{ padding: 18px 16px; min-height: 0; }
  .agenda-btn-label{ font-size: 1rem; gap: 8px; }
}

/* WhatsApp FAB no tape footer */
@media(max-width:880px){
  body{ padding-bottom: 88px; }
  .site-footer{ padding-bottom: 32px; }
}

/* Inputs sin zoom iOS (font-size minimo 16px) */
@media(max-width:880px){
  .contacto-form input,
  .contacto-form select,
  .contacto-form textarea,
  .wa-form input,
  .wa-form select,
  .wa-form textarea{
    font-size: 16px;
  }
}

/* Tap targets dot-buttons carrusel paquetes */
@media(max-width:880px){
  .pkg-dot{
    min-height: 44px;
    padding: 14px 8px;
    touch-action: manipulation;
  }
  .pkg-dots{ gap: 4px; }
}

/* CLS - aspect-ratio en imagenes carrusel + video hero */
.pkg-visual.has-img,
.pkg-visual-img{ aspect-ratio: 1/1; }
.hero-video{ aspect-ratio: 16/9; }

/* Hero stats stacking < 540px */
@media(max-width:540px){
  .hero-stats{ grid-template-columns: 1fr; gap: 12px; }
  .hero-stats .stat-card,
  .hero-stats .stat{ width: 100%; }
}

/* Inline links tap area CTAs de texto */
.agenda-cta-foot a,
.agenda-cta-geo a{
  display: inline-block;
  padding: 4px 2px;
  margin: -4px 0;
}

/* SSR noscript paquetes (visible solo si JS off) */
#paquetes-ssr{
  max-width: 960px; margin: 24px auto; padding: 16px;
  font-family: inherit; color: #1F2A44;
}
#paquetes-ssr h2{ font-size: 1.6rem; margin-bottom: 12px; }
#paquetes-ssr article{
  background: #f6f8fa; padding: 16px; margin: 12px 0;
  border-radius: 8px; border-left: 4px solid #00A9CE;
}

/* 2026-06-04 SEO audit F-04: link-button style (button con apariencia de link, reemplazo javascript:void(0)) */
.link-button{
  background: none;
  border: none;
  color: var(--c-blue-2);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
  padding: 0;
  display: inline;
}
.link-button:hover{ color: var(--c-blue); text-decoration-thickness: 2px }
.link-button:focus-visible{ outline: 2px solid var(--c-aqua); outline-offset: 2px; border-radius: 2px }

/* 2026-06-04 SEO audit F-07: a11y link-in-text-block (footer copyright link sin underline) */
.foot-copy-link{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.foot-copy-link:hover{ text-decoration-thickness: 2px }

/* 2026-06-04 UX bug: WhatsApp FAB tapaba CTA primario "Revisa el agua de tu zona" en hero mobile <540px */
@media(max-width:540px){
  .wa-fab, [data-wa-fab], #waFab{
    bottom: 16px !important;
    right: 16px !important;
    transform: scale(0.85);
    transform-origin: bottom right;
  }
}

/* 2026-06-04 UX bug: subcopy del botón agenda "$750 IVA incluido si tu zona aplica" se cortaba */
.agenda-btn-detail{
  white-space: normal;
  word-break: keep-all;
  text-wrap: balance;
  display: block;
  line-height: 1.35;
  margin-top: 4px;
}
@media(max-width:540px){
  .agenda-btn-detail{ font-size: clamp(0.7rem, 2.6vw, 0.78rem) }
}

/* 2026-06-04 UX bug: H2 FAQ y subcopy se traslapaban en mobile */
.faq-intro p, .faq-section .sub, #faq + p, .faq h2 + p{
  margin-top: 8px;
}

/* 2026-06-04 audit Responsive I1: tap targets >= 44x44 en mobile */
@media(max-width: 540px){
  .nav-list a, .nav-toggle, .btn, .pkg-dot, .pkg-cta, .faq-q, .agenda-cta-foot a, .agenda-cta-geo a,
  .agenda-cta-geo .link-button, .foot-nav a, .foot-priv, .foot-tac a, .social-link, .social a,
  .privacy-modal__close, [data-close-privacy], .wa-close, [data-wa-close]{
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* checkbox privacy: agrandar el control visual sin romper layout */
  .checkbox input[type="checkbox"], #fPrivacy{
    min-width: 22px;
    min-height: 22px;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
}

/* 2026-06-04 audit Responsive I2: font-size mins mobile (>=13px texto legible) */
@media(max-width: 540px){
  .trust-payment-sub, .micro, .agenda-cta-geo, .foot-copy{
    font-size: clamp(0.78rem, 2.4vw, 0.85rem);
  }
  .eyebrow{ font-size: clamp(0.78rem, 2.4vw, 0.85rem) }
}

/* 2026-06-04 audit Responsive N4: gradient fade-out carrusel mobile (affordance "hay más, desliza") */
@media(max-width: 720px){
  .pkg-track-wrap{ position: relative }
  .pkg-track-wrap::after{
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85));
    pointer-events: none;
    z-index: 2;
  }
}

/* 2026-06-04 audit Responsive: prevenir overflow-x del body por carrusel (siguiente slide cortado)
   max-width: 100vw causaba CLS en mobile (viewport meta != 100vw) — quitado, solo overflow-x */
html, body{ overflow-x: hidden }
.paquetes-section, .paquetes, #paquetes{ overflow-x: hidden }

/* 2026-06-04 audit Responsive N9: skip-link a11y */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-navy);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  border-radius: 0 0 6px 0;
}
.skip-link:focus{
  left: 0;
  outline: 2px solid var(--c-aqua);
}

/* ============================================
   MODAL DATOS FISCALES (pre-Stripe · 2026-06-09)
   ============================================ */
.inv-modal{
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.inv-modal[hidden]{ display: none; }
.inv-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(10, 20, 38, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.inv-modal__card{
  position: relative; z-index: 1;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  max-width: 640px; width: 100%;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex; flex-direction: column;
  animation: invModalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes invModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.inv-modal-open{ overflow: hidden; }

.inv-modal__head{
  padding: 24px 56px 16px 28px;
  border-bottom: 1px solid #e5eaf2;
  background: linear-gradient(135deg, #1F2A44 0%, #14223A 100%);
  color: #fff;
  position: relative;
}
.inv-modal__title{
  font-family: 'Kenyan Coffee', 'Work Sans', sans-serif;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin: 0 0 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.inv-modal__subtitle{
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.85;
  line-height: 1.4;
}
.inv-modal__close{
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.inv-modal__close:hover{ background: rgba(255, 255, 255, 0.22); }
.inv-modal__close:focus-visible{ outline: 2px solid var(--c-aqua, #64CCC9); outline-offset: 2px; }

.inv-modal__body{
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.inv-fs{
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  padding: 16px 18px 14px;
  margin: 0 0 16px;
  background: #fafbfd;
}
.inv-fs > legend{
  padding: 0 8px;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #1F2A44;
}
.inv-fs__subtitle{
  margin: 16px 0 8px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #1F2A44;
}

.inv-row{ margin-bottom: 12px; }
.inv-row > label{
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1F2A44;
}
.inv-row > label .req{ color: #d04545; }
.inv-row input,
.inv-row select{
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #c8cfdb;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.inv-row input:focus,
.inv-row select:focus{
  outline: none;
  border-color: var(--c-aqua, #64CCC9);
  box-shadow: 0 0 0 3px rgba(100, 204, 201, 0.22);
}
.inv-row--2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.inv-row--3{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px){
  .inv-row--2, .inv-row--3{ grid-template-columns: 1fr; }
}
.inv-hint{
  display: block;
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 4px;
}

.inv-toggle{
  margin: 8px 0 16px;
  padding: 14px 18px;
  background: #eaf7f7;
  border: 1px solid #b8e0de;
  border-radius: 10px;
}
.inv-toggle__label{
  display: flex; align-items: center; gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: #1F2A44;
  cursor: pointer;
}
.inv-toggle__label input[type="checkbox"]{
  width: 20px; height: 20px;
  accent-color: var(--c-aqua, #64CCC9);
  cursor: pointer;
}
.inv-toggle__hint{
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #4a5468;
  line-height: 1.4;
}

.inv-submit{
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #64CCC9 0%, #4ab8b4 100%);
  color: #1F2A44;
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.inv-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(100, 204, 201, 0.35);
}
.inv-submit:focus-visible{ outline: 2px solid #1F2A44; outline-offset: 2px; }
.inv-submit[aria-busy="true"],
.inv-submit:disabled{
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.inv-submit[aria-busy="true"]::after{
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid #1F2A44;
  border-top-color: transparent;
  border-radius: 50%;
  margin-left: 6px;
  animation: invSpin 0.7s linear infinite;
}
@keyframes invSpin { to { transform: rotate(360deg); } }

.inv-msg{
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
  min-height: 18px;
  color: #1F2A44;
}
.inv-msg-error{
  color: #b32d2d;
  background: #fdecec;
  border: 1px solid #f4c5c5;
  border-radius: 8px;
  padding: 10px 12px;
}

.inv-disclaimer{
  margin: 16px 0 0;
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 540px){
  .inv-modal{ padding: 8px; }
  .inv-modal__head{ padding: 18px 50px 14px 18px; }
  .inv-modal__body{ padding: 18px 18px; }
  .inv-fs{ padding: 12px 14px 10px; }
}


/* ============================================================
   v3 · DIAGNÓSTICO EMBEBIDO (dq-*) — quiz simplificado de 4 preguntas
   Namespaced para no chocar con el quiz full-screen del chasis
   (.quiz-stage / .quiz-card / .quiz-progress / .quiz-nav son del standalone).
   Vive dentro de la sección oscura .quiz-section como tarjeta clara.
   ============================================================ */
.quiz-intro--embed{
  min-height:auto;
  padding:74px 24px 26px;
}
.dq{
  max-width:760px;
  margin:0 auto;
  padding:0 24px 84px;
  position:relative; z-index:2;
}
.dq-card{
  background:var(--c-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.7);
  padding:34px 30px 30px;
}
.dq-progress{
  height:6px; background:var(--c-bg);
  border-radius:var(--radius-pill); overflow:hidden;
  margin-bottom:10px;
}
.dq-progress-bar{
  display:block; height:100%; width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--c-aqua),var(--c-blue));
  transition:width .45s var(--easing-out);
}
.dq-stepcount{
  text-align:right; font-size:.78rem; color:var(--c-muted);
  font-weight:600; letter-spacing:.05em; margin-bottom:22px;
}
@keyframes dqIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.dq-question{ animation:dqIn .36s var(--easing-out) both }
.dq-q-title{
  font-family:'Work Sans',sans-serif; font-weight:700;
  text-transform:none; letter-spacing:0;
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  color:var(--c-dark); margin-bottom:6px; line-height:1.2;
}
.dq-q-help{ color:var(--c-muted); margin-bottom:20px; font-size:.96rem }
.dq-options{ display:grid; gap:12px }
.dq-opt{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--c-bg-alt); border:1.5px solid var(--c-line);
  border-radius:var(--radius); padding:14px 16px;
  transition:border-color .2s, background .2s, box-shadow .2s, transform .1s;
}
.dq-opt:hover{ border-color:var(--c-aqua); background:#fff; box-shadow:var(--shadow-sm) }
.dq-opt:active{ transform:scale(.99) }
.dq-opt.is-selected{ border-color:var(--c-blue); background:rgba(0,169,206,.06) }
.dq-opt-emoji{
  width:44px; height:44px; flex-shrink:0; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(100,204,201,.18); font-size:1.35rem;
}
.dq-opt-txt{ display:flex; flex-direction:column; gap:1px }
.dq-opt-label{ font-weight:600; color:var(--c-dark); font-size:1.02rem }
.dq-opt-sub{ font-size:.85rem; color:var(--c-muted) }
.dq-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:22px }
.dq-back{
  color:var(--c-muted); font-weight:600; font-size:.92rem;
  display:inline-flex; align-items:center; gap:6px;
}
.dq-back:hover{ color:var(--c-dark) }
.dq-back[hidden]{ display:none }

/* Resultado */
.dq-result{ animation:dqIn .42s var(--easing-out) both }
.dq-result-head{ text-align:center; margin-bottom:22px }
.dq-result-eyebrow{
  display:inline-block; font-weight:600; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:#166a68; background:rgba(100,204,201,.20);
  padding:5px 13px; border-radius:var(--radius-pill); margin-bottom:12px;
}
.dq-result-head h3{
  font-family:'Work Sans',sans-serif; font-weight:700;
  text-transform:none; letter-spacing:0;
  font-size:clamp(1.35rem,3vw,1.9rem); color:var(--c-dark); margin-bottom:8px; line-height:1.2;
}
.dq-result-why{ color:var(--c-muted); max-width:52ch; margin:0 auto; font-size:1rem }
.dq-result-body{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  background:var(--c-bg); border-radius:var(--radius); padding:20px; margin-bottom:20px;
}
.dq-result-photo{ margin:0 }
.dq-result-photo img{
  width:140px; height:140px; object-fit:cover; border-radius:var(--radius);
  box-shadow:var(--shadow-sm); background:#fff;
}
.dq-result-price{ margin-bottom:14px }
.dq-price-label{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-muted); font-weight:600 }
.dq-price-value{ display:block; font-family:'Kenyan Coffee',sans-serif; font-size:1.6rem; color:var(--c-blue-2); line-height:1.1 }
.dq-price-note{ display:block; font-size:.76rem; color:var(--c-muted) }
.dq-result-solves{ list-style:none; display:grid; gap:7px; margin:0; padding:0 }
.dq-result-solves li{ position:relative; padding-left:24px; font-size:.94rem; color:var(--c-text) }
.dq-result-solves li::before{
  content:""; position:absolute; left:0; top:.4em; width:15px; height:15px;
  border-radius:50%; background:var(--c-aqua-2); box-shadow:0 0 0 3px rgba(100,204,201,.18);
}
.dq-result-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px }
.dq-restart{
  color:var(--c-muted); font-weight:600; font-size:.9rem;
  text-decoration:underline; text-underline-offset:3px; background:none;
}
.dq-restart:hover{ color:var(--c-dark) }
.dq-disclaimer{ text-align:center; color:rgba(255,255,255,.62); max-width:640px; margin:22px auto 0 }

@media(max-width:640px){
  .dq-card{ padding:26px 18px 22px }
  .dq-result-body{ grid-template-columns:1fr; text-align:center; justify-items:center }
  .dq-result-solves{ text-align:left }
  .dq-result-photo img{ width:120px; height:120px }
}


/* ============================================================
   v3 · Paso de código postal + bloque de CALIDAD DEL AGUA
   (feedback Alex: la calidad de agua por CP, arriba y prominente)
   ============================================================ */
.dq-cp .dq-q-title{ margin-bottom:6px }
.dq-cp-row{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap }
.dq-cp-input{
  flex:1; min-width:150px;
  padding:14px 16px; border:1.5px solid var(--c-line); border-radius:var(--radius);
  background:var(--c-bg-alt); color:var(--c-dark);
  font-size:1.15rem; letter-spacing:.14em; font-weight:600;
}
.dq-cp-input:focus{ outline:none; border-color:var(--c-blue); background:#fff; box-shadow:0 0 0 3px rgba(0,169,206,.12) }
.dq-cp-btn{ white-space:nowrap }
.dq-cp-msg{ min-height:1.1em; margin:8px 0 0; font-size:.86rem; color:var(--c-high); font-weight:600 }

.dq-water{
  border:1.5px solid var(--c-line); border-left-width:5px;
  border-radius:var(--radius); background:var(--c-bg-alt);
  padding:18px 18px 16px; margin-bottom:4px;
}
.dq-reveal .dq-water{ margin-bottom:20px }
.dq-water--alta{ border-left-color:var(--c-high) }
.dq-water--media{ border-left-color:var(--c-med) }
.dq-water--baja{ border-left-color:var(--c-low) }
.dq-water--unknown{ border-left-color:var(--c-blue) }
.dq-water-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.dq-water-kicker{ font-family:'Kenyan Coffee',sans-serif; letter-spacing:1.6px; text-transform:uppercase; font-size:.74rem; color:var(--c-blue-2) }
.dq-sev{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.82rem; padding:4px 11px; border-radius:var(--radius-pill) }
.dq-sev-dot{ width:9px; height:9px; border-radius:50% }
.dq-sev--alta{ background:rgba(234,67,53,.12); color:#B4271A }
.dq-sev--alta .dq-sev-dot{ background:var(--c-high) }
.dq-sev--media{ background:rgba(245,158,11,.16); color:#9A6200 }
.dq-sev--media .dq-sev-dot{ background:var(--c-med) }
.dq-sev--baja{ background:rgba(67,160,71,.16); color:#2E7D32 }
.dq-sev--baja .dq-sev-dot{ background:var(--c-low) }
.dq-water-zona{ margin:8px 0 0; font-weight:700; color:var(--c-dark); font-size:1.05rem }
.dq-water-lead{ margin:12px 0 6px; font-size:.9rem; color:var(--c-muted); font-weight:600 }
.dq-water-problems{ list-style:none; display:grid; gap:6px; margin:0; padding:0 }
.dq-water-problems li{ position:relative; padding-left:20px; font-size:.92rem; color:var(--c-text) }
.dq-water-problems li::before{ content:""; position:absolute; left:2px; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--c-aqua) }
.dq-water-disc{ margin:12px 0 0; font-size:.74rem; color:var(--c-muted); line-height:1.4 }
.dq-water--compact{ padding:12px 14px; margin-bottom:16px }
.dq-water--compact .dq-water-zona{ font-size:.95rem }

.dq-reveal-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:12px }
.dq-linkbtn{ background:none; color:var(--c-muted); font-weight:600; font-size:.88rem; text-decoration:underline; text-underline-offset:3px }
.dq-linkbtn:hover{ color:var(--c-dark) }

@media(max-width:640px){
  .dq-cp-input{ font-size:1.05rem }
  .dq-cp-btn{ width:100% }
  .dq-water-top{ align-items:flex-start }
}

/* v3 · Botón secundario del resultado del quiz (legible sobre la tarjeta blanca;
   NO usar .btn-ghost aquí, ese es para fondos oscuros del hero) */
.dq-btn-outline{ background:#fff; color:var(--c-blue-2); border:1.5px solid var(--c-line) }
.dq-btn-outline:hover{ border-color:var(--c-aqua); background:var(--c-bg-alt); color:var(--c-blue-2) }

/* ============================================================
   v3 · Formulario colapsable + escape CP + foco de teclado (a11y)
   ============================================================ */
.contacto-more{ border-top:1px solid rgba(255,255,255,.12); margin:2px 0 16px }
.contacto-more-summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 2px; color:#fff; font-weight:600; font-size:.95rem;
}
.contacto-more-summary::-webkit-details-marker{ display:none }
.contacto-more-summary::marker{ content:'' }
.contacto-more-opt{ color:rgba(255,255,255,.55); font-weight:500 }
.contacto-more-chevron{ color:var(--c-aqua); flex-shrink:0; transition:transform .25s var(--easing-out) }
.contacto-more[open] .contacto-more-chevron{ transform:rotate(180deg) }
.contacto-more-body{ padding-top:4px }

.dq-cp-skip{ margin-top:12px }

/* Foco de teclado visible (WCAG 2.4.7) — antes se dependía del outline del navegador */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.dq-opt:focus-visible, .pkg-dot:focus-visible{
  outline:2px solid var(--c-blue-2);
  outline-offset:2px;
}

/* ============================================================
   v3 · Fix responsive del formulario de contacto en teléfonos chicos
   El form era grid-item con min-width:auto → su min-content (374px) no
   encogía por debajo del viewport y se recortaba a la derecha (body con
   overflow-x:hidden). min-width:0 en la cadena lo deja encoger. Verificado
   con Playwright: 320/360/390 sin overflow.
   ============================================================ */
@media(max-width:600px){
  .contacto-form{ min-width:0; padding:22px 18px }
  .contacto-form .row, .contacto-form .field{ min-width:0 }
  .contacto-form input, .contacto-form select, .contacto-form textarea{ min-width:0; max-width:100% }
  .contacto-form input, .contacto-form select{ min-height:46px }
  .btn-lg{ white-space:normal }
}

/* ============================================================
   v3 · RETOQUE VISUAL on-brand (A iconos · B agua · C números · D acentos)
   ============================================================ */

/* --- A · Iconos de marca en el quiz (line-icons, trazo aqua/blue) --- */
.dq-opt-ic{
  width:46px; height:46px; flex-shrink:0; border-radius:13px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(100,204,201,.18), rgba(0,169,206,.12));
  color:var(--c-blue);
}
.dq-opt-ic svg{ width:25px; height:25px }
.dq-opt:hover .dq-opt-ic{ color:var(--c-blue-2) }
.dq-opt.is-selected .dq-opt-ic{ background:linear-gradient(135deg, rgba(0,169,206,.22), rgba(100,204,201,.16)); color:var(--c-blue-2) }

/* --- B · Textura de agua: olas entre secciones --- */
.wave{ position:absolute; left:0; right:0; line-height:0; pointer-events:none; z-index:3 }
.wave svg{ width:100%; height:52px; display:block }
.wave-bottom{ bottom:0 }
.wave-white path{ fill:#fff }
.wave-paquetes path{ fill:#F7FCFD }
@media(max-width:600px){ .wave svg{ height:34px } }

/* Hero: burbujas que suben (reduced-motion off) */
.hero-bubbles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden }
.hero-bubbles span{
  position:absolute; bottom:-40px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(100,204,201,.16));
  border:1px solid rgba(255,255,255,.16);
  animation:heroBubble 15s linear infinite;
}
.hero-bubbles span:nth-child(1){ left:12%; width:8px;  height:8px;  animation-duration:15s; animation-delay:0s }
.hero-bubbles span:nth-child(2){ left:24%; width:14px; height:14px; animation-duration:18s; animation-delay:3s }
.hero-bubbles span:nth-child(3){ left:41%; width:6px;  height:6px;  animation-duration:12s; animation-delay:6s }
.hero-bubbles span:nth-child(4){ left:58%; width:11px; height:11px; animation-duration:17s; animation-delay:1.5s }
.hero-bubbles span:nth-child(5){ left:70%; width:9px;  height:9px;  animation-duration:16s; animation-delay:8s }
.hero-bubbles span:nth-child(6){ left:83%; width:16px; height:16px; animation-duration:20s; animation-delay:4s }
.hero-bubbles span:nth-child(7){ left:92%; width:7px;  height:7px;  animation-duration:13s; animation-delay:10s }
@keyframes heroBubble{
  0%{ transform:translateY(0) scale(.6); opacity:0 }
  12%{ opacity:.65 }
  85%{ opacity:.45 }
  100%{ transform:translateY(-90vh) scale(1); opacity:0 }
}
@media(prefers-reduced-motion: reduce){ .hero-bubbles{ display:none } }

/* Contacto: glow aqua sutil detrás del form */
.contacto-section::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(46% 40% at 80% 16%, rgba(0,169,206,.18), transparent 70%),
    radial-gradient(40% 34% at 10% 84%, rgba(100,204,201,.12), transparent 70%);
}
.contacto-wrap{ position:relative; z-index:1 }

/* --- C · Medidor de severidad tipo nivel de agua --- */
.dq-gauge{ display:inline-flex; align-items:flex-end; gap:2px; height:14px }
.dq-gauge i{ width:4px; border-radius:2px; background:currentColor; opacity:.26 }
.dq-gauge i:nth-child(1){ height:6px }
.dq-gauge i:nth-child(2){ height:10px }
.dq-gauge i:nth-child(3){ height:14px }
.dq-gauge--baja  i:nth-child(1){ opacity:1 }
.dq-gauge--media i:nth-child(1),
.dq-gauge--media i:nth-child(2){ opacity:1 }
.dq-gauge--alta  i{ opacity:1 }

/* --- C · Números editoriales del hero (Kenyan Coffee aqua, más grandes) --- */
.hero-stats .stat-num{ font-size:clamp(1.8rem, 4vw, 2.3rem); letter-spacing:.6px }

/* --- D · Acentos: badge aqua->blue + subrayado amarillo puntual --- */
.pkg-badge-recommended{ background:linear-gradient(135deg, var(--c-aqua), var(--c-blue)); color:#06303a }
.hl{
  background-image:linear-gradient(180deg, transparent 58%, rgba(255,209,0,.55) 58%);
  padding:0 .06em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ============================================================
   v3 · QUIZ ELEGANTE — agua inmersiva reactiva + entrada/transiciones
   El agua sube con el progreso y se aclara (murky -> aqua) = "se filtra".
   Vars set por quiz.js en #diagnostico: --dq-fill --dq-tint --dq-op
   ============================================================ */
.quiz-section{ --dq-fill:12%; --dq-tint:60,82,92; --dq-op:.42 }

.dq-waterbg{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none }
.dq-waterbg-fill{
  position:absolute; left:0; right:0; bottom:0; height:var(--dq-fill);
  background:linear-gradient(to top,
    rgba(var(--dq-tint), var(--dq-op)) 0%,
    rgba(var(--dq-tint), calc(var(--dq-op) * .30)) 62%,
    transparent 100%);
  transition:height 1.1s var(--easing-cinema), background 1.3s ease;
  will-change:height;
}
.dq-waterbg-wave{
  position:absolute; left:-25%; width:150%; height:46px; display:block;
  bottom:calc(var(--dq-fill) - 26px);
  fill:rgba(var(--dq-tint), calc(var(--dq-op) * .85));
  transition:bottom 1.1s var(--easing-cinema), fill 1.3s ease;
  animation:dqWaveMove 12s linear infinite;
}
.dq-waterbg-wave2{ height:54px; opacity:.55; bottom:calc(var(--dq-fill) - 30px); animation-duration:18s; animation-direction:reverse }
@keyframes dqWaveMove{ from{ transform:translateX(0) } to{ transform:translateX(-33.333%) } }

/* Tarjeta frosted (deja ver el agua sutilmente) + entrada elegante */
.dq-card{
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:26px;
  box-shadow:0 32px 74px -32px rgba(6,40,54,.62);
  padding:38px 34px 32px;
  opacity:0; transform:translateY(34px) scale(.986);
}
.dq-card.is-in{ opacity:1; transform:none; transition:opacity .85s var(--easing-cinema), transform .95s var(--easing-cinema) }

/* Transición cinematográfica de preguntas + cascada de opciones */
@keyframes dqIn2{ from{ opacity:0; transform:translateY(16px); filter:blur(3px) } to{ opacity:1; transform:none; filter:blur(0) } }
.dq-question{ animation:dqIn2 .55s var(--easing-out) both }
.dq-result{ animation:dqIn2 .6s var(--easing-out) both }
@keyframes dqOptIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.dq-options .dq-opt{ animation:dqOptIn .5s var(--easing-out) both; animation-delay:calc(var(--i, 0) * 70ms + 130ms) }

/* Opciones menos "cajón", borde suave por inset-shadow + glow aqua */
.dq-opt{ padding:15px 18px; border-radius:16px; border:1.5px solid transparent; background:rgba(100,204,201,.06); box-shadow:inset 0 0 0 1.5px var(--c-line) }
.dq-opt:hover{ background:#fff; box-shadow:inset 0 0 0 1.5px var(--c-aqua), 0 12px 28px -14px rgba(0,169,206,.42); transform:translateY(-1px) }
.dq-opt.is-selected{ background:rgba(0,169,206,.06); box-shadow:inset 0 0 0 2px var(--c-blue) }

@media(prefers-reduced-motion: reduce){
  /* Sin movimiento: ocultar las olas para que NO se vean congeladas;
     queda solo el agua calma (fill con borde superior suave por el gradiente). */
  .dq-waterbg-wave{ display:none }
  .dq-waterbg-fill{ transition:none }
  .dq-card{ opacity:1; transform:none }
  .dq-question, .dq-result, .dq-options .dq-opt{ animation:none }
}

/* ============================================================
   v3 · QUITAR la capa de agua inmersiva del quiz (feedback Angel 21-jul:
   la banda teal ondulada cruzando el texto se veía mal con animaciones ON).
   Se conserva la tarjeta frosted, iconos, medidor y transiciones.
   ============================================================ */
.dq-waterbg{ display:none !important }