/* =====================================================================
   ExtremePaq — Web pública Fase 1 · Hoja de estilos (hecha a mano, sin build)
   Identidad: naranja #F59E0B + navy. Cero dependencias de compilación.
   ===================================================================== */

/* ---- Tokens ---- */
:root{
  --orange:#F59E0B;      --orange-deep:#D97706;   --orange-soft:#FFF3DD;
  --navy:#0B1B2E;        --navy-2:#122744;        --navy-soft:#1C3557;
  --blue:#2563EB;
  --ink:#141C28;         --muted:#5B6675;         --faint:#8A94A3;
  --bg:#FFFFFF;          --bg-warm:#FFF8EE;        --bg-cool:#F5F8FC;
  --line:#E7ECF2;        --line-strong:#D5DCE6;
  --ok:#0F9D58;          --danger:#DC2626;
  --shadow-sm:0 1px 2px rgba(11,27,46,.06), 0 1px 3px rgba(11,27,46,.08);
  --shadow-md:0 6px 20px rgba(11,27,46,.10);
  --shadow-lg:0 20px 48px rgba(11,27,46,.16);
  --radius:14px;         --radius-lg:22px;         --radius-pill:999px;
  --container:1160px;
  --font-display:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--navy); line-height:1.12; margin:0; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px; border-radius:6px}

/* ---- Layout helpers ---- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:20px}
.section{padding-block:clamp(48px,7vw,88px)}
.section--warm{background:var(--bg-warm)}
.section--cool{background:var(--bg-cool)}
.section--navy{background:var(--navy); color:#E7ECF2}
.section--navy h2,.section--navy h3{color:#fff}
.section__head{max-width:720px; margin:0 auto clamp(28px,4vw,48px); text-align:center}
.eyebrow{display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange-deep); margin-bottom:12px}
.section--navy .eyebrow{color:var(--orange)}
.section__head h2{font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:800}
.section__head p{margin-top:14px; color:var(--muted); font-size:1.05rem}
.section--navy .section__head p{color:#AEBBCB}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:700; font-size:.98rem; line-height:1;
  padding:.85em 1.4em; border-radius:var(--radius-pill); border:2px solid transparent;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--orange); color:var(--navy); box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--orange-deep); color:#fff; box-shadow:var(--shadow-md)}
.btn-dark{background:var(--navy); color:#fff}
.btn-dark:hover{background:var(--navy-soft)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--navy); background:#fff}
.btn-wa{background:#25D366; color:#0A2E17}
.btn-wa:hover{background:#1EBE5A; color:#fff}
.btn-lg{font-size:1.06rem; padding:1em 1.7em}
.btn-block{width:100%}
.btn svg{width:1.15em; height:1.15em; flex:0 0 auto}

/* ---- Top nav ---- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line)}
.nav__row{display:flex; align-items:center; gap:18px; min-height:72px}
.nav__brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.nav__brand img{height:38px; width:auto}
.nav__links{display:flex; align-items:center; gap:4px}
.nav__links a{font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--navy);
  padding:.5em .8em; border-radius:var(--radius-pill)}
.nav__links a:hover{background:var(--orange-soft); color:var(--orange-deep)}
.nav__links a[aria-current="page"]{color:var(--orange-deep)}
.nav__cta{display:flex; align-items:center; gap:10px}
.nav__toggle{display:none; background:none; border:0; padding:8px; color:var(--navy)}
.nav__toggle svg{width:26px; height:26px}
@media (max-width:920px){
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .nav[data-open="true"] .nav__mobile{display:block}
}
.nav__mobile{display:none; border-top:1px solid var(--line); padding:14px 0 20px}
.nav__mobile a{display:block; font-family:var(--font-display); font-weight:600; color:var(--navy);
  padding:.7em .4em; border-radius:10px}
.nav__mobile a:hover{background:var(--orange-soft)}
.nav__mobile .nav__cta{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.nav__mobile .btn{width:100%}

/* ---- Hero ---- */
.hero{position:relative; background:
   radial-gradient(1200px 500px at 80% -10%, rgba(37,99,235,.28), transparent 60%),
   radial-gradient(900px 500px at 0% 110%, rgba(245,158,11,.20), transparent 55%),
   linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#EAF0F7; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.4px, transparent 1.4px);
  background-size:22px 22px; opacity:.5; pointer-events:none}
.hero__grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-block:clamp(52px,7vw,92px)}
.hero__pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16); color:#fff; font-weight:600; font-size:.86rem;
  padding:.5em 1em; border-radius:var(--radius-pill); margin-bottom:20px}
.hero__pill b{color:var(--orange)}
.hero h1{color:#fff; font-size:clamp(2.15rem,5vw,3.5rem); font-weight:800}
.hero h1 .accent{color:var(--orange)}
.hero__lead{margin-top:18px; color:#B9C6D8; font-size:1.15rem; max-width:34ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero__stats{display:flex; gap:28px; margin-top:36px; flex-wrap:wrap}
.hero__stat b{display:block; font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:#fff}
.hero__stat span{color:#93A3B8; font-size:.86rem}
.hero__media{position:relative}
.hero__media img{border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:4px solid rgba(255,255,255,.08)}
.hero__badge{position:absolute; bottom:-18px; left:-18px; background:#fff; color:var(--navy);
  border-radius:16px; padding:14px 18px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:12px}
.hero__badge b{font-family:var(--font-display); font-size:1.35rem; color:var(--orange-deep)}
.hero__badge span{font-size:.8rem; color:var(--muted); line-height:1.2}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr; gap:36px}
  .hero__media{order:-1; max-width:420px}
  .hero__lead{max-width:none}
}

/* ---- HERO full-width band (slideshow a ancho completo, como el sitio actual) ---- */
.hero-band{width:100%; background:var(--navy); line-height:0}
.hero-band .hero__slider{border-radius:0; border:0; box-shadow:none; aspect-ratio:29/10; max-height:72vh; margin:0}
.hero-band .hero__slider .slide img{width:100%; height:100%; object-fit:cover}
@media (max-width:700px){ .hero-band .hero__slider{aspect-ratio:2/1} }

/* ---- HERO intro (H1 real, centrado, sobre navy) ---- */
.hero-intro{position:relative; overflow:hidden; color:#EAF0F7; text-align:center;
  background:
   radial-gradient(1000px 420px at 80% -20%, rgba(37,99,235,.26), transparent 60%),
   radial-gradient(800px 420px at 0% 120%, rgba(245,158,11,.18), transparent 55%),
   linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  padding-block:clamp(38px,5.5vw,64px)}
.hero-intro::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.4px, transparent 1.4px); background-size:22px 22px; opacity:.45; pointer-events:none}
.hero-intro__inner{position:relative; max-width:820px}
.hero-intro .hero__pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16); color:#fff; font-weight:600; font-size:.86rem; padding:.5em 1em; border-radius:var(--radius-pill); margin-bottom:18px}
.hero-intro .hero__pill b{color:var(--orange)}
.hero-intro h1{color:#fff; font-size:clamp(2rem,4.6vw,3.3rem); font-weight:800}
.hero-intro h1 .accent{color:var(--orange)}
.hero-intro__lead{margin:16px auto 0; color:#B9C6D8; font-size:1.12rem; max-width:52ch}
.hero-intro .hero__cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:26px}
.hero-intro .hero__stats{display:flex; gap:34px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.hero-intro .hero__stat b{display:block; font-family:var(--font-display); font-weight:800; font-size:1.55rem; color:#fff; font-variant-numeric:tabular-nums}
.hero-intro .hero__stat span{color:#93A3B8; font-size:.86rem}
@media (max-width:560px){
  .hero-intro .hero__cta .btn{flex:1; justify-content:center}
  .hero-intro .hero__stats{gap:20px}
  .hero-intro .hero__stat b{font-size:1.3rem}
}

/* ---- Steps ---- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 24px; position:relative; box-shadow:var(--shadow-sm)}
.step__n{width:44px; height:44px; border-radius:12px; background:var(--navy); color:var(--orange);
  font-family:var(--font-display); font-weight:800; font-size:1.2rem; display:grid; place-items:center; margin-bottom:16px}
.step h3{font-size:1.2rem; font-weight:700; margin-bottom:8px}
.step p{color:var(--muted); font-size:.96rem}
.step .btn{margin-top:16px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ---- Miami address ---- */
.miami{display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center}
.miami__card{background:var(--navy); color:#E7ECF2; border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-md)}
.miami__card h3{color:#fff; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px}
.miami__note{color:#93A3B8; font-size:.85rem; margin-bottom:18px}
.addr-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid rgba(255,255,255,.10)}
.addr-row:first-of-type{border-top:0}
.addr-row .k{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#7E8DA3}
.addr-row .v{font-weight:600; color:#fff; font-size:1rem; word-break:break-word}
.copy-btn{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.16); border-radius:10px; padding:.45em .7em; font-size:.78rem; font-weight:600}
.copy-btn:hover{background:var(--orange); color:var(--navy); border-color:var(--orange)}
.copy-btn.copied{background:var(--ok); color:#fff; border-color:var(--ok)}
.miami__side h2{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800}
.miami__side p{color:var(--muted); margin-top:12px}
.miami__hours{margin-top:18px; display:inline-flex; gap:10px; align-items:center; background:var(--orange-soft);
  color:var(--orange-deep); font-weight:600; padding:.6em 1em; border-radius:12px; font-size:.92rem}
@media (max-width:820px){.miami{grid-template-columns:1fr}}

/* ---- Features ---- */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feature{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm)}
.feature__ic{width:46px; height:46px; border-radius:12px; background:var(--orange-soft); color:var(--orange-deep);
  display:grid; place-items:center; margin-bottom:14px}
.feature__ic svg{width:24px; height:24px}
.feature h3{font-size:1.08rem; font-weight:700; margin-bottom:6px}
.feature p{color:var(--muted); font-size:.94rem}
@media (max-width:820px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.features{grid-template-columns:1fr}}

/* ---- Stores strip ---- */
.stores{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center}
.stores img{height:34px; width:auto; filter:grayscale(1); opacity:.72; transition:filter .2s, opacity .2s}
.stores img:hover{filter:none; opacity:1}
.stores__note{text-align:center; color:var(--muted); margin-top:24px; font-weight:600}

/* ---- Prohibited ---- */
.prohibited{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:820px; margin-inline:auto}
.prohibited li{list-style:none; display:inline-flex; align-items:center; gap:8px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:.55em 1.05em; font-weight:600; color:var(--ink); font-size:.94rem}
.prohibited li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--danger)}

/* ---- Calculator ---- */
.calc{max-width:620px; margin-inline:auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-md)}
.calc__tarifa{text-align:center; color:var(--muted); font-weight:600; margin-bottom:20px}
.calc__tarifa b{color:var(--orange-deep)}
.calc__chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:18px}
.chip{border:1.5px solid var(--line-strong); background:#fff; color:var(--muted); border-radius:var(--radius-pill);
  padding:.4em .9em; font-weight:600; font-size:.9rem}
.chip[aria-pressed="true"], .chip:hover{border-color:var(--orange); color:var(--orange-deep); background:var(--orange-soft)}
.calc__input{display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:6px}
.calc__input input{width:120px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  border:2px solid var(--line-strong); border-radius:12px; padding:.4em .5em}
.calc__input label{font-weight:600; color:var(--muted)}
.calc input[type=range]{width:100%; margin:14px 0 4px; accent-color:var(--orange)}
.calc__result{margin-top:18px; text-align:center; background:var(--navy); color:#fff; border-radius:var(--radius); padding:20px}
.calc__result span{display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#93A3B8}
.calc__result b{font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--orange); font-variant-numeric:tabular-nums}
.calc__disc{text-align:center; color:var(--faint); font-size:.82rem; margin-top:14px}

/* ---- App download / social ---- */
.badges{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.badges img{height:48px; width:auto}
.social{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ---- Footer ---- */
.footer{background:var(--navy); color:#AEBBCB; padding-block:52px 26px}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
.footer h4{color:#fff; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px}
.footer a{color:#C4D0DE}
.footer a:hover{color:var(--orange)}
.footer__brand img{height:40px; margin-bottom:14px}
.footer__links{display:flex; flex-direction:column; gap:9px}
.footer__contact{display:flex; flex-direction:column; gap:9px}
.footer__social{display:flex; gap:10px; margin-top:14px}
.footer__social a{width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center}
.footer__social a:hover{background:var(--orange); color:var(--navy)}
.footer__social svg{width:20px; height:20px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.10); margin-top:36px; padding-top:20px; text-align:center; font-size:.85rem; color:#7E8DA3}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr; gap:26px}}

/* ---- Page header (interior pages) ---- */
.pagehead{background:linear-gradient(160deg,var(--navy),var(--navy-2)); color:#fff; padding-block:clamp(40px,6vw,64px)}
.pagehead .eyebrow{color:var(--orange)}
.pagehead h1{color:#fff; font-size:clamp(1.9rem,4vw,2.8rem); font-weight:800}
.pagehead p{color:#AEBBCB; margin-top:12px; max-width:60ch}

/* ---- Sucursales ---- */
.suc-toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:26px}
.suc-search{flex:1; min-width:240px; position:relative}
.suc-search input{width:100%; padding:.85em 1em .85em 2.6em; border:1.5px solid var(--line-strong); border-radius:var(--radius-pill); font-size:1rem}
.suc-search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--faint)}
.suc-regions{display:flex; gap:8px; flex-wrap:wrap}
.suc-count{color:var(--muted); font-weight:600; margin-bottom:18px}
.suc-region-title{font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:1.25rem;
  margin:34px 0 16px; display:flex; align-items:center; gap:10px}
.suc-region-title::after{content:""; flex:1; height:1px; background:var(--line)}
.suc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.suc-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.suc-card h3{font-size:1.05rem; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.suc-card .badge-soon{font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--orange-deep); background:var(--orange-soft); padding:.25em .6em; border-radius:var(--radius-pill)}
.suc-card .addr{color:var(--muted); font-size:.9rem; margin-bottom:10px}
.suc-card .hours{color:var(--ink); font-size:.85rem; display:flex; align-items:center; gap:7px; margin-bottom:16px}
.suc-card .hours svg{width:15px; height:15px; color:var(--orange-deep); flex:0 0 auto}
.suc-card__actions{margin-top:auto; display:flex; gap:8px}
.suc-card__actions .btn{flex:1; padding:.6em .8em; font-size:.86rem}
@media (max-width:900px){.suc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.suc-grid{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq{max-width:820px; margin-inline:auto}
.faq__item{background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden}
.faq__q{width:100%; text-align:left; background:none; border:0; padding:20px 22px; display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:600; font-size:1.03rem; color:var(--navy)}
.faq__q .ic{margin-left:auto; flex:0 0 auto; transition:transform .2s; color:var(--orange-deep)}
.faq__item[data-open="true"] .faq__q .ic{transform:rotate(180deg)}
.faq__a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq__a-inner{padding:0 22px 22px; color:var(--muted); line-height:1.7}
.faq__a-inner p{margin-bottom:12px}
.faq__pending{display:inline-block; background:var(--orange-soft); color:var(--orange-deep); font-weight:700; padding:.3em .7em; border-radius:8px; font-size:.85rem}

/* ---- Rastreo ---- */
.track{max-width:680px; margin-inline:auto}
.track__form{display:flex; gap:10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:8px; box-shadow:var(--shadow-md)}
.track__form input{flex:1; border:0; padding:.7em 1em; font-size:1.05rem; border-radius:var(--radius-pill); background:transparent}
.track__form input:focus{outline:0}
.track__hint{text-align:center; color:var(--faint); font-size:.86rem; margin-top:12px}
.track__result{margin-top:32px}
.track__state{display:flex; align-items:center; gap:12px; background:var(--orange-soft); border:1px solid #F3D9A6;
  border-radius:var(--radius); padding:16px 20px; margin-bottom:26px}
.track__state svg{width:26px; height:26px; color:var(--orange-deep); flex:0 0 auto}
.track__state b{font-family:var(--font-display); color:var(--navy)}
.track__state span{display:block; color:var(--muted); font-size:.88rem}
.timeline{list-style:none; margin:0; padding:0 0 0 8px}
.timeline li{position:relative; padding:0 0 26px 30px; border-left:2px solid var(--line-strong)}
.timeline li:last-child{border-left-color:transparent; padding-bottom:0}
.timeline li::before{content:""; position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--line-strong)}
.timeline li.done::before{background:var(--orange); border-color:var(--orange)}
.timeline li.current::before{background:var(--navy); border-color:var(--orange); box-shadow:0 0 0 4px var(--orange-soft)}
.timeline .t-estado{font-family:var(--font-display); font-weight:700; color:var(--navy)}
.timeline li.current .t-estado{color:var(--orange-deep)}
.timeline .t-fecha{color:var(--faint); font-size:.85rem; margin-top:2px}
.track__empty{text-align:center; padding:40px 20px; color:var(--muted)}
.track__empty svg{width:52px; height:52px; color:var(--line-strong); margin:0 auto 14px}
.track__empty b{display:block; color:var(--navy); font-family:var(--font-display); font-size:1.1rem; margin-bottom:6px}
.notice{display:flex; gap:10px; align-items:flex-start; background:var(--bg-warm); border:1px solid #F3D9A6;
  border-radius:var(--radius); padding:14px 16px; color:#8a5a08; font-size:.92rem}
.notice svg{width:20px; height:20px; flex:0 0 auto; color:var(--orange-deep)}

/* ---- Portal (bridge) ---- */
.portal-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:860px; margin-inline:auto}
.portal-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); text-align:center}
.portal-card .ic{width:56px; height:56px; border-radius:16px; background:var(--orange-soft); color:var(--orange-deep); display:grid; place-items:center; margin:0 auto 16px}
.portal-card .ic svg{width:28px; height:28px}
.portal-card h3{font-size:1.25rem; font-weight:700; margin-bottom:8px}
.portal-card p{color:var(--muted); margin-bottom:20px}
@media (max-width:720px){.portal-grid{grid-template-columns:1fr}}

/* ---- Loading skeleton ---- */
.skeleton{background:linear-gradient(90deg,#eef2f6 25%,#e2e8f0 37%,#eef2f6 63%); background-size:400% 100%;
  animation:sk 1.2s ease infinite; border-radius:10px; color:transparent}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto}}

/* =====================================================================
   v2 — Movimiento, slideshow, mapa y refinamientos
   ===================================================================== */

/* ---- HERO slideshow ---- */
.hero__slider{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:4px solid rgba(255,255,255,.08); aspect-ratio:1/1}
.hero__slider .slide{position:absolute; inset:0; opacity:0; transition:opacity .8s ease; transform:scale(1.02)}
.hero__slider .slide.is-active{opacity:1; transform:scale(1); transition:opacity .8s ease, transform 6s ease}
.hero__slider .slide img{width:100%; height:100%; object-fit:cover}
.hero__dots{position:absolute; bottom:14px; left:0; right:0; display:flex; gap:8px; justify-content:center; z-index:3}
.hero__dot{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5); padding:0; cursor:pointer; transition:width .25s, background .25s}
.hero__dot[aria-selected="true"]{width:26px; border-radius:5px; background:var(--orange)}
.hero__nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:38px; height:38px; border-radius:50%;
  border:0; background:rgba(11,27,46,.45); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; transition:opacity .2s, background .2s}
.hero__slider:hover .hero__nav{opacity:1}
.hero__nav:hover{background:var(--orange); color:var(--navy)}
.hero__nav svg{width:20px; height:20px}
.hero__nav--prev{left:12px}
.hero__nav--next{right:12px}
@media (max-width:860px){ .hero__nav{opacity:1} }

/* ---- Scroll reveal ---- (la clase la pone el JS SOLO cuando va a animar:
   sin JS o con prefers-reduced-motion, el contenido queda visible por defecto) */
.will-reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform}
.will-reveal.is-in{opacity:1; transform:none}

/* ---- Micro-interacciones ---- */
.step, .feature, .suc-card, .portal-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.step:hover, .feature:hover, .portal-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong)}
.btn{transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease}
.btn-primary:hover, .btn-dark:hover, .btn-wa:hover{transform:translateY(-2px)}
.stores img{transition:transform .2s ease, filter .2s ease, opacity .2s ease}
.stores img:hover{transform:translateY(-3px) scale(1.04)}
.hero__stat b{font-variant-numeric:tabular-nums}

/* ---- Sucursal card (más cercana al sitio actual) ---- */
.suc-card{border-radius:16px}
.suc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--orange)}
.suc-card__top{display:flex; align-items:flex-start; gap:10px; margin-bottom:10px}
.suc-card__pin{flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--orange-soft); color:var(--orange-deep); display:grid; place-items:center}
.suc-card__pin svg{width:19px; height:19px}
.suc-card__top h3{margin:0; font-size:1.04rem; line-height:1.25; display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.suc-card .btn svg{width:1em; height:1em}
.suc-card__map{margin-top:12px; width:100%; display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--bg-cool); border:1px solid var(--line); color:var(--navy); font-family:var(--font-display); font-weight:600;
  font-size:.86rem; padding:.6em; border-radius:10px; cursor:pointer; transition:background .2s, border-color .2s}
.suc-card__map:hover{background:var(--orange-soft); border-color:var(--orange); color:var(--orange-deep)}
.suc-card__map svg{width:16px; height:16px}

/* ---- Modal de mapa ---- */
.mapmodal{position:fixed; inset:0; z-index:80; background:rgba(11,27,46,.55); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:18px}
.mapmodal.is-open{display:flex}
.mapmodal__box{background:#fff; border-radius:var(--radius-lg); width:100%; max-width:640px; overflow:hidden; box-shadow:var(--shadow-lg); animation:pop .22s ease}
@keyframes pop{from{transform:translateY(12px) scale(.98); opacity:0}to{transform:none; opacity:1}}
.mapmodal__head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.mapmodal__title{font-family:var(--font-display); color:var(--navy); font-size:1.05rem; flex:1}
.mapmodal__close{background:none; border:0; font-size:1.1rem; color:var(--muted); cursor:pointer; padding:6px; line-height:1}
.mapmodal__close:hover{color:var(--danger)}
.mapmodal__frame{aspect-ratio:16/10; background:var(--bg-cool)}
.mapmodal__frame iframe{width:100%; height:100%; border:0; display:block}
.mapmodal__foot{padding:14px 18px; display:flex; justify-content:flex-end}

/* ---- Responsive: refinamiento móvil ---- */
@media (max-width:560px){
  .container{padding-inline:16px}
  .nav__row{min-height:62px}
  .nav__brand img{height:32px}
  .hero__grid{padding-block:38px}
  .hero__pill{font-size:.78rem; padding:.45em .8em}
  .hero__cta .btn{flex:1; text-align:center; justify-content:center}
  .hero__stats{gap:18px}
  .hero__stat b{font-size:1.25rem}
  .section__head h2{font-size:1.55rem}
  .calc{padding:22px}
  .calc__result b{font-size:2rem}
  .btn-lg{font-size:1rem; padding:.9em 1.3em}
  .miami__card{padding:20px}
  .addr-row .v{font-size:.94rem}
  .suc-card__actions{flex-wrap:wrap}
  .mapmodal{padding:10px}
  .mapmodal__frame{aspect-ratio:4/3}
}

@media (prefers-reduced-motion:reduce){
  .will-reveal{opacity:1 !important; transform:none !important}
  .hero__slider .slide{transition:none}
}

/* =====================================================================
   v3 — Bloque de App (protagonista), Calculadora+Instagram compacta
   ===================================================================== */

/* ---- Miami + Servicios + App (2 columnas, aprovecha el espacio como el sitio actual) ---- */
.miami-serv{display:grid; grid-template-columns:.95fr 1.25fr; gap:34px; align-items:start}
@media (max-width:940px){ .miami-serv{grid-template-columns:1fr; gap:28px} }
.miami__card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.miami__card-eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--orange); font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.miami__card-eyebrow svg{width:16px; height:16px}
.btn-copiar-full{display:inline-flex; align-items:center; gap:7px; background:var(--orange); color:var(--navy); border:0; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-weight:700; font-size:.8rem; padding:.5em .9em; cursor:pointer; transition:background .2s, transform .12s; white-space:nowrap}
.btn-copiar-full:hover{background:#FFF; transform:translateY(-1px)}
.btn-copiar-full.copied{background:var(--ok); color:#fff}
.btn-copiar-full svg{width:15px; height:15px}
.miami__card-title{color:#fff; font-size:1.3rem; font-weight:800; margin-bottom:14px}
.addr-row--plain{padding-top:14px}
.miami__hours-card{display:flex; align-items:center; gap:12px; margin-top:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:14px 16px}
.miami__hours-ic{flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--orange); color:var(--navy); display:grid; place-items:center}
.miami__hours-ic svg{width:20px; height:20px}
.miami__hours-card b{display:block; color:var(--orange); font-family:var(--font-display); font-size:.92rem}
.miami__hours-card span{color:#C4D0DE; font-size:.85rem}

.serv__title{font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:800}
.accent-y{color:var(--orange)}
.serv__sub{color:var(--muted); margin:12px 0 22px; max-width:54ch}
.serv__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.serv__card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 16px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.serv__card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--orange)}
.serv__ic{width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center}
.serv__ic svg{width:26px; height:26px}
.serv__card:nth-child(odd) .serv__ic{background:var(--navy); color:var(--orange)}
.serv__card:nth-child(even) .serv__ic{background:var(--orange); color:var(--navy)}   /* más presencia del amarillo */
.serv__card h3{font-size:1rem; font-weight:700; margin-bottom:6px}
.serv__card p{color:var(--muted); font-size:.86rem; line-height:1.5}
@media (max-width:1040px){ .serv__grid{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .serv__grid{grid-template-columns:1fr} }

.app-banner{margin-top:22px; background:linear-gradient(150deg,var(--navy),var(--navy-2)); border-radius:var(--radius-lg); padding:22px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.app-banner__text h3{color:var(--orange); font-size:1.3rem; font-weight:800}
.app-banner__text p{color:#C4D0DE; margin-top:4px; font-size:.95rem}
.app-banner__btns{display:flex; gap:12px; flex-wrap:wrap}
.store-btn{display:inline-flex; align-items:center; gap:10px; background:#000; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:.6em 1.05em; transition:transform .15s ease, background .2s}
.store-btn:hover{transform:translateY(-2px); background:#141414}
.store-btn svg{width:24px; height:24px; flex:0 0 auto}
.store-btn small{display:block; font-size:.62rem; letter-spacing:.02em; opacity:.85; line-height:1.3}
.store-btn b{display:block; font-family:var(--font-display); font-size:1.02rem; line-height:1.1}
@media (max-width:520px){ .app-banner{flex-direction:column; align-items:flex-start} .app-banner__btns{width:100%} .store-btn{flex:1; justify-content:center} }

/* ---- Calculadora + Instagram (2 columnas, compacto) ---- */
.calcig{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start}
.calcig__col .eyebrow{margin-bottom:8px}
.calcig__title{font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:800}
.calcig__sub{color:var(--muted); margin:8px 0 18px}
.calcig__sub b{color:var(--orange-deep)}
@media (max-width:840px){ .calcig{grid-template-columns:1fr; gap:38px} }

/* ---- Calculadora compacta ---- */
.calc--compact{max-width:none; margin:0; padding:20px}
.calc--compact .calc__chips{margin-bottom:14px; gap:7px}
.calc--compact .chip{padding:.35em .8em; font-size:.86rem}
.calc--compact input[type=range]{margin:6px 0 14px}
.calc__row{display:flex; gap:12px; align-items:stretch}
.calc__row .calc__input{margin:0; flex:0 0 auto; display:flex; align-items:center; gap:8px}
.calc__row .calc__input input{width:78px; font-size:1.15rem; padding:.35em .4em}
.calc__row .calc__result{margin:0; flex:1; padding:12px 16px; display:flex; flex-direction:column; justify-content:center; text-align:left}
.calc--compact .calc__result b{font-size:1.7rem}
.calc--compact .calc__disc{margin-top:12px; text-align:left}

/* ---- Instagram embed (lazy + fallback) ---- */
.ig-embed{min-height:420px; display:flex; flex-direction:column}
.ig-embed__live{flex:1; display:flex; justify-content:center}
.ig-embed__live .instagram-media{margin:0 auto !important}
.ig-embed__skel{width:100%; max-width:400px; height:420px; border-radius:14px}
.ig-fallback{text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 26px; box-shadow:var(--shadow-sm)}
.ig-fallback__ic{width:60px; height:60px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.ig-fallback__ic svg{width:30px; height:30px}
.ig-fallback b{font-family:var(--font-display); font-size:1.15rem; color:var(--navy); display:block}
.ig-fallback p{color:var(--muted); margin:8px auto 18px; max-width:34ch}

/* ---- Utilities ---- */
.text-center{text-align:center}
.mt-24{margin-top:24px}
.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}