/* ===================================================================
   NWCS Landing — styles.css
   Carga diferida (el above-the-fold va inline en index.html).
   Tokens en :root también definidos inline; se repiten aquí por si
   este archivo se reutiliza de forma independiente.
   =================================================================== */
:root{
  /* ===== Marca real NWCS: verde + dorado ===== */
  --navy:#143d2c;--blue:#1f6f52;--blue-dk:#17533d;--green:#2f7a57;
  --amber:#e5a647;--red:#c0392b;--bg:#f4f7f4;--surface:#FFFFFF;
  --text:#1f2a26;--muted:#5d6b64;
  --cov-gh:#2f6fb0;--cov-401k:#c0563b;
  --font-display:"Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:16px;--radius-sm:12px;--maxw:1180px;
  --shadow-sm:0 1px 2px rgba(20,61,44,.06),0 2px 8px rgba(20,61,44,.06);
  --shadow-md:0 8px 24px rgba(20,61,44,.10);
  --shadow-lg:0 18px 48px rgba(20,61,44,.16);
}

/* ---------- Utilities ---------- */
.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}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.section{padding-block:clamp(3rem,7vw,5.5rem)}

/* ---------- Eyebrows + section heads ---------- */
.eyebrow-dark{display:inline-flex;align-items:center;gap:.55rem;font-size:.8rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:0 0 .9rem}
.eyebrow-dark::before{content:"";width:7px;height:7px;background:var(--amber);border-radius:50%}
.section-head{max-width:46rem;margin:0 0 clamp(1.8rem,4vw,2.8rem)}
.section-head h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.65rem,3.4vw,2.5rem);line-height:1.1;color:var(--navy);margin:0}
.section-lead{font-size:1.05rem;color:var(--muted);margin:.7rem 0 0}

h3{font-family:var(--font-display);font-weight:700;color:var(--navy)}

/* ---------- Generic card ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.card{background:var(--surface);border:1px solid rgba(20,61,44,.07);border-radius:var(--radius);
  padding:1.6rem;box-shadow:var(--shadow-sm)}

/* ---------- Buttons (extends critical) ---------- */
.btn-amber{background:var(--amber);color:#3b2a05;box-shadow:0 6px 16px rgba(229,166,71,.35)}
.btn-amber:hover{background:#e0931f;box-shadow:0 10px 24px rgba(229,166,71,.45)}
.btn-whatsapp{background:#25D366;color:#06351a;box-shadow:0 6px 16px rgba(37,211,102,.3)}
.btn-whatsapp:hover{background:#1fbe5b}
.btn-back{background:transparent;color:var(--muted);border-color:rgba(20,61,44,.18)}
.btn-back:hover{background:var(--bg);color:var(--navy)}
.btn-block{width:100%}

/* ---------- Decorative rings (motivo de marca — ecos del gancho del logo) ---------- */
.has-rings{position:relative;overflow:hidden}
.has-rings>:not(.rings){position:relative;z-index:1}
.rings{position:absolute;z-index:0;display:flex;align-items:center;pointer-events:none}
.ring{display:block;border-radius:50%;border:3px solid;background:transparent}
.ring-lg{width:60px;height:60px;border-color:rgba(255,255,255,.16)}
.ring-sm{width:40px;height:40px;margin-left:-26px;border-color:rgba(229,166,71,.42)}
/* Posiciones: siempre totalmente visibles y en zonas sin texto */
.rings-right{right:20px;top:50%;transform:translateY(-50%)}
.rings-br{right:18px;bottom:16px}
.rings-left{left:20px;top:50%;transform:translateY(-50%)}
@media (max-width:760px){.rings{display:none}}

/* =============================================================== */
/* 3 · TRUST BAR                                                   */
/* =============================================================== */
.trustbar{background:var(--surface);border-bottom:1px solid rgba(20,61,44,.07)}
.trustbar-inner{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  padding-block:1.1rem}
.trustbar-text{margin:0;color:var(--navy);font-size:1.02rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.chips li{font-size:.82rem;font-weight:600;color:var(--blue);background:rgba(31,111,82,.09);
  padding:.34rem .8rem;border-radius:999px}
.trust-points{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin:0 0 0 auto;padding:0}
.trust-points li{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;
  font-weight:600;color:var(--navy)}
.trust-points svg{width:18px;height:18px;fill:var(--green);flex:none}

/* =============================================================== */
/* 4 · "NO AUDIT" VALUE STRIP                                      */
/* =============================================================== */
.value-strip{background:var(--navy);color:#fff}
.value-strip-inner{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  padding-block:clamp(1.4rem,3vw,2rem)}
/* reserva espacio para los anillos del borde derecho (solo desktop) */
@media (min-width:761px){.value-strip-inner{padding-right:104px}}
.va-badge{flex:none;font-family:var(--font-display);font-weight:800;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:#3b2a05;background:var(--amber);
  padding:.5rem .85rem;border-radius:8px;rotate:-2deg}
.va-copy{margin:0;font-size:clamp(1.02rem,1.8vw,1.22rem);color:#dceee3}
.va-copy strong{color:#fff}

/* =============================================================== */
/* 5 · COVERAGE CARDS                                              */
/* =============================================================== */
.coverage{background:var(--bg)}
.coverage-grid{grid-template-columns:repeat(4,1fr)}
.coverage-card{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  gap:.7rem;transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease}
.coverage-card .card-bar{position:absolute;inset:0 0 auto 0;height:5px;background:var(--accent);z-index:2}
/* glow sutil del color de la línea en la esquina */
.coverage-card::after{content:"";position:absolute;right:-38px;top:-38px;width:130px;height:130px;
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%)}
.coverage-card>*{position:relative;z-index:1}
.coverage-card:hover,.coverage-card:focus-visible{transform:translateY(-5px);
  box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.card-icon{width:46px;height:46px;border-radius:12px;display:grid;place-content:center;
  background:color-mix(in srgb,var(--accent) 14%,white);margin-top:.4rem}
.card-icon svg{width:24px;height:24px;fill:var(--accent)}
.card-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.card-head h3{margin:0;font-size:1.2rem}
.coverage-card p{margin:0;color:var(--muted);font-size:.96rem;flex:1}
.badge{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.24rem .55rem;border-radius:999px}
.badge-amber{background:rgba(229,166,71,.16);color:#9a6510}
/* Texto blue-dk para garantizar contraste AA en todas las cards (incl. amber/green) */
.card-link{font-weight:600;color:var(--blue-dk);font-size:.95rem}

/* =============================================================== */
/* 6 · WHO WE SERVE + STATS                                        */
/* =============================================================== */
/* align-items:stretch → la foto iguala la altura del contenido (copy + stats) en desktop */
.serve-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:stretch}
.serve-main{display:flex;flex-direction:column;gap:1.6rem}
.serve-copy p{color:var(--text);font-size:1.06rem;margin:.4rem 0 0}
.serve-photo{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid rgba(20,61,44,.1);min-height:340px}
.serve-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.serve-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(20,61,44,.8) 100%);
  box-shadow:inset 0 0 0 3px rgba(229,166,71,.3)}
.serve-photo-cap{position:absolute;left:1.1rem;bottom:1.1rem;z-index:1;margin:0;color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:.55rem}
.serve-photo-cap .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px rgba(229,166,71,.25)}
.stats{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.stat{background:var(--surface);border:1px solid rgba(20,61,44,.07);border-radius:var(--radius);
  padding:1.4rem 1.6rem;box-shadow:var(--shadow-sm);border-left:4px solid var(--blue)}
.stat-num{display:block;font-family:var(--font-display);font-weight:800;color:var(--navy);
  font-size:clamp(2.1rem,5vw,2.9rem);line-height:1;font-variant-numeric:tabular-nums}
.stat-label{display:block;margin-top:.35rem;color:var(--muted);font-size:.95rem;font-weight:500}

/* =============================================================== */
/* 7 · HOW IT WORKS                                                */
/* =============================================================== */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.2rem;counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid rgba(20,61,44,.07);
  border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm)}
.step-num{display:grid;place-content:center;width:44px;height:44px;border-radius:12px;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--navy));margin-bottom:1rem;
  font-variant-numeric:tabular-nums}
.step-body h3{margin:0 0 .4rem;font-size:1.15rem}
.step-body p{margin:0;color:var(--muted);font-size:.96rem}

/* =============================================================== */
/* 8 · WHY CHOOSE US                                               */
/* =============================================================== */
.why-grid{grid-template-columns:repeat(3,1fr)}
.why-card{text-align:left}
.why-card .card-icon{margin:0 0 1rem}
.icon-blue{background:rgba(31,111,82,.13)}.icon-blue svg{fill:var(--blue)}
.icon-green{background:rgba(63,163,77,.13)}.icon-green svg{fill:var(--green)}
.icon-amber{background:rgba(229,166,71,.16)}.icon-amber svg{fill:var(--amber)}
.why-card h3{margin:0 0 .45rem;font-size:1.2rem}
.why-card p{margin:0;color:var(--muted)}

/* =============================================================== */
/* + · FAQ                                                         */
/* =============================================================== */
.faq{background:var(--bg)}
.faq-wrap{max-width:820px;margin-inline:auto}
.faq-list{display:grid;gap:.8rem}
.faq-item{background:var(--surface);border:1px solid rgba(20,61,44,.08);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-family:var(--font-display);
  font-weight:600;color:var(--navy);font-size:1.05rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--blue);
  flex:none;transition:transform .2s ease;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-answer{padding:0 1.3rem 1.2rem}
.faq-answer p{margin:0;color:var(--muted)}

/* =============================================================== */
/* 9 · SOCIAL PROOF (placeholder)                                  */
/* =============================================================== */
.social-grid{grid-template-columns:repeat(3,1fr)}
.testimonial-ph{position:relative;display:flex;flex-direction:column;gap:1.1rem;
  background:linear-gradient(180deg,#fff,#fbfcfe)}
.quote-mark{font-family:var(--font-display);font-size:2.6rem;line-height:.6;color:var(--blue);
  opacity:.35}
.testimonial-ph .ph-line{margin:0;color:var(--muted);font-style:italic}
.ph-author{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.ph-avatar{width:42px;height:42px;border-radius:50%;background:#e6ebf2;flex:none}
.ph-meta{display:grid;gap:.4rem;flex:1}
.ph-bar{height:9px;border-radius:5px;background:#e6ebf2;width:70%}
.ph-bar.short{width:45%}
.stars{font-size:1.15rem;letter-spacing:.18em;line-height:1;color:#caa85f}
.stars-empty{color:#cbb277;opacity:.75}
.social-cta{display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-top:1.8rem;text-align:center}
.social-note{color:var(--muted);margin:0;font-size:.95rem}

/* =============================================================== */
/* 10 · QUOTE WIZARD + CONTACTS                                    */
/* =============================================================== */
.quote-section{background:linear-gradient(180deg,var(--bg),#eaf0f8)}
.quote-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:start}

/* Wizard card */
.wizard{background:var(--surface);border:1px solid rgba(20,61,44,.08);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:clamp(1.4rem,3vw,2.2rem);position:relative;overflow:hidden}
.wiz-progress{margin-bottom:1.6rem}
.wiz-progress-bar{height:8px;border-radius:999px;background:#e6ebf2;overflow:hidden}
.wiz-progress-fill{display:block;height:100%;width:33.33%;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--amber));transition:width .35s ease}
.wiz-progress-label{margin:.55rem 0 0;font-size:.85rem;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}

.wiz-step{border:0;margin:0;padding:0;min-inline-size:0}
.wiz-step-title{font-family:var(--font-display);font-weight:700;color:var(--navy);
  font-size:1.3rem;padding:0;margin:0 0 .3rem}
.wiz-step-help{margin:0 0 1.1rem;color:var(--muted);font-size:.95rem}

/* Coverage multi-select (step 1) */
.cov-select{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.2rem}
.cov-opt{position:relative;cursor:pointer}
.cov-opt input{position:absolute;opacity:0;width:0;height:0}
.cov-opt-box{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-radius:var(--radius-sm);
  border:2px solid rgba(20,61,44,.12);font-weight:600;color:var(--navy);font-size:.95rem;
  transition:border-color .15s ease,background .15s ease;background:#fff}
.cov-check{width:20px;height:20px;border-radius:6px;border:2px solid rgba(20,61,44,.25);flex:none;
  display:grid;place-content:center;transition:all .15s ease}
.cov-check::after{content:"";width:10px;height:10px;border-radius:3px;background:var(--accent);
  transform:scale(0);transition:transform .15s ease}
.cov-opt input:checked + .cov-opt-box{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,white)}
.cov-opt input:checked + .cov-opt-box .cov-check{border-color:var(--accent)}
.cov-opt input:checked + .cov-opt-box .cov-check::after{transform:scale(1)}
.cov-opt input:focus-visible + .cov-opt-box{outline:3px solid var(--blue);outline-offset:2px}

/* Fields */
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:600;color:var(--navy);font-size:.92rem;margin-bottom:.4rem}
.req{color:var(--red)}
.field input,.field select{width:100%;font-family:var(--font-body);font-size:1rem;color:var(--text);
  padding:.8rem .9rem;border-radius:var(--radius-sm);border:1.5px solid rgba(20,61,44,.16);
  background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(31,111,82,.16)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--red);
  box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.field-error{margin:.4rem 0 0;color:var(--red);font-size:.85rem;font-weight:500}

.field-consent{margin-bottom:1.1rem}
.consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:var(--text);
  line-height:1.5;cursor:pointer;font-weight:400}
.consent input{flex:none;width:18px;height:18px;margin-top:.15rem;accent-color:var(--blue);cursor:pointer}
.consent a{color:var(--blue);font-weight:600}
.consent input[aria-invalid="true"]{outline:2px solid var(--red);outline-offset:2px;border-radius:3px}

.wiz-trust{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--muted);
  background:var(--bg);padding:.7rem .9rem;border-radius:var(--radius-sm);margin:0 0 1.1rem}
.form-error-box{background:rgba(192,57,43,.08);color:#8c271c;border:1px solid rgba(192,57,43,.25);
  border-radius:var(--radius-sm);padding:.8rem 1rem;font-size:.9rem;margin:0 0 1rem}

.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1.4rem}
.wiz-nav .btn-primary{margin-left:auto}

/* Submit spinner */
.btn-submit{position:relative}
.btn-spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);
  border-top-color:#fff;display:none}
.wizard.is-loading .btn-submit{pointer-events:none;opacity:.85}
.wizard.is-loading .btn-spinner{display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Success */
.wiz-success{text-align:center;padding:1.5rem .5rem}
.success-mark{width:64px;height:64px;border-radius:50%;background:rgba(63,163,77,.14);
  display:grid;place-content:center;margin:0 auto 1.1rem}
.success-mark svg{width:34px;height:34px;fill:var(--green)}
.wiz-success h3{margin:0 0 .6rem;font-size:1.35rem}
.wiz-success p{margin:0 0 1.2rem;color:var(--muted)}
.success-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* Contacts column */
.contacts-col{background:var(--navy);color:#fff;border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.2rem);box-shadow:var(--shadow-md)}
.contacts-title{font-family:var(--font-display);font-size:1.5rem;margin:0 0 .3rem;color:#fff}
.contacts-lead{margin:0 0 1.4rem;color:#cfe6d8;font-size:.96rem}
.dept-list{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:1rem}
.dept{display:flex;align-items:center;gap:.9rem;padding:.85rem 1rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm)}
.dept-avatar{flex:none;width:54px;height:54px;border-radius:50%;object-fit:cover;object-position:50% 18%;
  background:#0e2c20;border:2px solid rgba(229,166,71,.55);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.dept-body{min-width:0}
.dept-role{margin:0 0 .15rem;font-size:.74rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber)}
.dept-name{margin:0 0 .5rem;font-weight:600;color:#fff}
.dept-lines{display:flex;flex-direction:column;gap:.25rem;margin:0}
.dept-lines a{color:#d9e8de;text-decoration:none;font-size:.95rem;font-variant-numeric:tabular-nums}
.dept-lines a:hover{color:#fff;text-decoration:underline}
.contacts-cta{display:flex;gap:.6rem;flex-wrap:wrap}
.contacts-cta .btn{flex:1;min-width:140px}
.contacts-trust{margin:1.2rem 0 0;font-size:.84rem;color:#a9c8b6;display:flex;gap:.4rem;align-items:center}

/* =============================================================== */
/* 11 · FINAL CTA                                                  */
/* =============================================================== */
.final-cta{background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff}
.final-cta-inner{padding-block:clamp(2.6rem,6vw,4rem);display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.final-cta h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.2rem);
  line-height:1.15;margin:0;max-width:24ch}

/* =============================================================== */
/* 12 · FOOTER                                                     */
/* =============================================================== */
.site-footer{background:var(--navy);color:#cfe0d4}
.footer-inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  padding-block:clamp(2rem,4vw,3rem)}
.footer-logo{height:40px;width:auto}
.footer-tagline{margin:.9rem 0 0;max-width:32ch;color:#a9c8b6;font-size:.95rem}
.footer-contact{display:flex;flex-direction:column;gap:.6rem}
.footer-contact a{display:inline-flex;align-items:center;gap:.5rem;color:#cfe0d4;
  text-decoration:none;font-size:.95rem}
.footer-contact a svg{fill:var(--amber)}
.footer-contact a:hover{color:#fff;text-decoration:underline}
.footer-social{display:flex;gap:.6rem;margin-top:1.1rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  transition:background .2s ease,transform .12s ease,border-color .2s ease}
.footer-social a:hover{background:var(--amber);border-color:var(--amber);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px;fill:#cfe0d4}
.footer-social a:hover svg{fill:var(--navy)}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  border-top:1px solid rgba(255,255,255,.1);padding-block:1.2rem;font-size:.85rem;color:#8fa89a}
.footer-bottom p{margin:0}
.footer-legal{display:inline-flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.footer-legal a{color:#8fa89a;text-decoration:none}
.footer-legal a:hover{color:#fff;text-decoration:underline}

/* =============================================================== */
/* Floating contact FABs (teléfono + WhatsApp) — desktop/tablet    */
/* =============================================================== */
.floating-buttons{position:fixed;right:22px;bottom:24px;z-index:115;
  display:flex;flex-direction:column;gap:14px}
.float-fab{width:58px;height:58px;border-radius:50%;display:grid;place-content:center;
  text-decoration:none;box-shadow:0 6px 18px rgba(20,61,44,.28);position:relative;
  transition:transform .2s ease,box-shadow .2s ease}
.float-fab:hover{transform:scale(1.08);box-shadow:0 10px 26px rgba(20,61,44,.34)}
.float-fab:active{transform:scale(.95)}
.float-fab svg{width:27px;height:27px;fill:#fff}
.float-phone{background:linear-gradient(135deg,#e5a647,#d49536);animation:fabpulse 2.2s infinite}
.float-phone:hover{background:linear-gradient(135deg,#f0b04f,#db9a3b)}
.float-wa{background:linear-gradient(135deg,#25d366,#128c7e)}
.float-wa:hover{background:linear-gradient(135deg,#2ee372,#1a9e8e)}
.float-fab::before{content:attr(data-tooltip);position:absolute;right:70px;top:50%;
  transform:translateY(-50%);background:rgba(20,61,44,.95);color:#fff;padding:7px 12px;
  border-radius:8px;font-size:.85rem;font-weight:500;white-space:nowrap;opacity:0;
  pointer-events:none;transition:opacity .2s ease;box-shadow:var(--shadow-md)}
.float-fab:hover::before,.float-fab:focus-visible::before{opacity:1}
@keyframes fabpulse{
  0%{box-shadow:0 6px 18px rgba(20,61,44,.28)}
  50%{box-shadow:0 6px 22px rgba(229,166,71,.6)}
  100%{box-shadow:0 6px 18px rgba(20,61,44,.28)}
}
/* En móvil manda la barra inferior; ocultamos las FABs para no duplicar/solapar */
@media (max-width:760px){.floating-buttons{display:none}}
@media (prefers-reduced-motion:reduce){.float-phone{animation:none}}

/* =============================================================== */
/* Floating Mobile Bar                                             */
/* =============================================================== */
.mobile-bar{display:none}
@media (max-width:760px){
  .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;
    grid-template-columns:repeat(3,1fr);background:var(--surface);
    box-shadow:0 -6px 24px rgba(20,61,44,.16);border-top:1px solid rgba(20,61,44,.08);
    padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bar-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;
    padding:.65rem .4rem;text-decoration:none;font-size:.72rem;font-weight:600;color:var(--navy)}
  .mobile-bar-btn svg{width:22px;height:22px}
  .mb-call svg{fill:var(--blue)}
  .mb-wa{color:#1a8a47}.mb-wa svg{fill:#25D366}
  .mb-quote{background:var(--blue);color:#fff}.mb-quote svg{fill:#fff}
  /* dejar aire para que la barra no tape el footer */
  body{padding-bottom:64px}
}

/* =============================================================== */
/* Micro-interacciones · scroll reveal (§5)                        */
/* =============================================================== */
/* Solo se ocultan si hay JS disponible (html.js). Sin JS → visibles (robustez/SEO). */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.is-visible{opacity:1;transform:none}
/* stagger suave para grupos de cards */
.cards .reveal:nth-child(2){transition-delay:.07s}
.cards .reveal:nth-child(3){transition-delay:.14s}
.cards .reveal:nth-child(4){transition-delay:.21s}

/* =============================================================== */
/* Responsive                                                      */
/* =============================================================== */
@media (max-width:1024px){
  .coverage-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .serve-grid{grid-template-columns:1fr}
  /* en 1 columna la foto necesita altura propia (sin sibling que la estire) */
  .serve-photo{aspect-ratio:16/10;min-height:0}
  .quote-grid{grid-template-columns:1fr}
  .why-grid,.social-grid{grid-template-columns:1fr}
  .final-cta-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .coverage-grid,.steps{grid-template-columns:1fr}
  .cov-select{grid-template-columns:1fr}
  .trust-points{margin-left:0}
  /* el teléfono ya vive en el hero, la concierge card y la barra inferior → liberamos espacio */
  .header-tel{display:none}
  .header-cta{padding:.6rem .9rem;font-size:.92rem}
}

/* Respeta reduced-motion: anula reveals para que nada quede oculto */
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}