/* ============================================================
   Vaqueros Badalona — styles.css
   Paradigma "Taller de tejanos · barrio y pespunte": denim/streetwear de barrio,
   diurno y de valor. Superficie clara (kraft) + bandas de índigo denim + rojo rótulo
   y amarillo escaparate. Firma de motion: «el pespunte que se cose solo» + remache.
   ============================================================ */

:root{
  --red:#D42A1C;          /* placa roja BADALONA / EXPORT-VESTIR */
  --red-d:#B01F13;
  --yellow:#F5B60E;       /* MODA JOVEN + rebajas + hilo del pespunte */
  --yellow-d:#D69B00;
  --indigo:#233A5A;       /* estructura denim */
  --indigo-deep:#182B45;  /* footer / sombra denim */
  --chambray:#4E7BA8;     /* lavado claro del tejano */
  --copper:#B4703A;       /* remache */
  --copper-l:#CE905A;
  --paper:#F5F0E7;        /* kraft de etiqueta */
  --paper-2:#ECE5D6;      /* etiqueta apagada */
  --ink:#241C17;          /* tinta */
  --ink-soft:#514639;
  --white:#FFFFFF;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-sew:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --sh:0 18px 46px -22px rgba(24,43,69,.55);
  --seam-h: repeating-linear-gradient(90deg,var(--yellow) 0 9px,transparent 9px 16px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif;
  font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Big Shoulders Display","Arial Narrow",Oswald,system-ui,sans-serif;
  font-weight:800;line-height:.98;margin:0;letter-spacing:.4px;text-transform:uppercase}
[hidden]{display:none !important}   /* el atributo hidden manda sobre display:grid/flex */

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem)}
.section{position:relative;padding:clamp(3.6rem,7vw,6.4rem) 0}
.eyebrow{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.22em;
  font-size:.76rem;color:var(--red);margin-bottom:.7rem}
.eyebrow.on-dark{color:var(--yellow)}
.sec-title{font-size:clamp(2rem,1.3rem + 3.4vw,3.5rem);color:var(--indigo)}
.sec-title .em{color:var(--red)}
.section.on-dark .sec-title{color:var(--white)}
.lead{font-weight:600;color:var(--ink)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:"Golos Text",sans-serif;
  font-weight:700;font-size:1rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  padding:.85rem 1.4rem;border-radius:3px;border:2px solid transparent;transition:transform .18s var(--ease),background .18s,box-shadow .18s,color .18s;
  position:relative}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 24px -12px rgba(212,42,28,.8)}
.btn-primary:hover{background:var(--red-d);transform:translateY(-2px)}
.btn-light{background:var(--paper);color:var(--indigo);border-color:var(--indigo)}
.btn-light:hover{background:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--indigo);border-color:rgba(35,58,90,.4)}
.btn-ghost:hover{border-color:var(--indigo);transform:translateY(-2px)}
.on-dark .btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.on-dark .btn-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* costura dorada que aparece al hover del CTA primario */
.btn-primary::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;
  background:var(--seam-h);opacity:0;transition:opacity .2s}
.btn-primary:hover::after{opacity:.9}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ============================================================
   FIRMA — costura / pespunte que se cose
   ============================================================ */
.seam-div{position:relative;height:22px;display:flex;align-items:center}
.seam-div .guide{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(35,58,90,.28)}
.seam-div .stitch{position:absolute;left:0;right:0;top:calc(50% - 1.5px);height:3px;background:var(--seam-h);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.05s var(--ease-sew)}
.seam-div.sewn .stitch{clip-path:inset(0 0 0 0)}
.seam-div .rivet{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--copper-l),var(--copper) 62%,#7d4d24);
  box-shadow:0 1px 2px rgba(0,0,0,.35);transform:translateY(-50%) scale(0);transition:transform .3s var(--spring) .9s}
.seam-div .rivet.l{left:0}.seam-div .rivet.r{right:0}
.seam-div.sewn .rivet{transform:translateY(-50%) scale(1)}
.on-dark .seam-div .guide{background:rgba(255,255,255,.22)}
@media (prefers-reduced-motion:reduce){
  .seam-div .stitch{clip-path:none;transition:none}
  .seam-div .rivet{transform:translateY(-50%) scale(1);transition:none}
}

/* subrayado de pespunte (para titulares/frase) */
.stitch-underline{position:relative;display:inline;padding-bottom:.18em;
  background-image:var(--seam-h);background-repeat:no-repeat;background-position:0 100%;
  background-size:0% 3px;transition:background-size 1s var(--ease-sew)}
.seam.sewn .stitch-underline,.sewn.stitch-underline{background-size:100% 3px}
@media (prefers-reduced-motion:reduce){.stitch-underline{background-size:100% 3px;transition:none}}

/* ---------- Reveal robusto (gated por .is-anim) ---------- */
.is-anim [data-r]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
.is-anim [data-r].in{opacity:1;transform:none}
.is-anim [data-r="clip"]{transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){.is-anim [data-r]{opacity:1 !important;transform:none !important}}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem clamp(1.1rem,4vw,2.4rem);transition:background .3s,box-shadow .3s,padding .3s}
.nav.scrolled{background:rgba(245,240,231,.94);backdrop-filter:saturate(1.2) blur(8px);box-shadow:0 6px 20px -14px rgba(24,43,69,.6)}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.plate{display:inline-block;background:var(--red);color:#fff;font-family:"Big Shoulders Display",sans-serif;
  font-weight:900;font-size:1.32rem;letter-spacing:.06em;line-height:1;padding:.3em .5em .24em;border-radius:3px;
  box-shadow:0 2px 0 var(--red-d),0 8px 16px -8px rgba(212,42,28,.7)}
.brand .sub{display:flex;flex-direction:column;line-height:1.05}
.brand .sub b{font-family:"Big Shoulders Display",sans-serif;font-weight:800;color:var(--indigo);font-size:.98rem;letter-spacing:.04em}
.brand .sub span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow-d);font-weight:700}
.nav:not(.scrolled) .brand .sub b{color:#fff;text-shadow:0 1px 4px rgba(24,43,69,.6)}
.nav:not(.scrolled) .brand .sub span{color:var(--yellow)}
.nav-right{display:flex;align-items:center;gap:.7rem}
.nav-chip{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--indigo);
  background:rgba(245,240,231,.9);border:1px solid rgba(35,58,90,.25);padding:.4em .7em;border-radius:20px;white-space:nowrap}
.nav:not(.scrolled) .nav-chip{background:rgba(24,43,69,.5);color:#fff;border-color:rgba(255,255,255,.3)}
.desk-cta{padding:.6rem 1rem;font-size:.92rem}
.hamb{display:none;flex-direction:column;gap:4px;width:42px;height:38px;border:1px solid rgba(35,58,90,.3);
  border-radius:6px;background:rgba(245,240,231,.85);cursor:pointer;align-items:center;justify-content:center}
.hamb span{width:20px;height:2px;background:var(--indigo);border-radius:2px}
.nav:not(.scrolled) .hamb{background:rgba(24,43,69,.45)}
.nav:not(.scrolled) .hamb span{background:#fff}

.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--indigo-deep);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.3rem}
.mobile-menu:not([hidden]){display:flex}
.mobile-menu a{font-family:"Big Shoulders Display",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:1.9rem;letter-spacing:.03em;text-decoration:none;color:var(--paper)}
.mobile-menu a.btn{font-family:"Golos Text",sans-serif;font-size:1.05rem;color:#fff}
.mobile-menu .mm-close{position:absolute;top:1.1rem;right:1.3rem;background:none;border:0;font-size:2.4rem;color:var(--paper);cursor:pointer;line-height:1}

/* ============================================================
   HERO — full-bleed cinematográfico (fachada real)
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  animation:kenburns 22s ease-in-out both;transform-origin:58% 40%}
@keyframes kenburns{0%{transform:scale(1.03)}100%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.hero-media img{animation:none;transform:scale(1.03)}}
.hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(24,43,69,.42) 0%,rgba(24,43,69,.05) 30%,rgba(24,43,69,.35) 62%,rgba(24,43,69,.9) 100%)}
.hero-veil::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,43,69,.55),transparent 62%)}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;width:100%;
  padding:0 clamp(1.1rem,4vw,2.4rem) clamp(3.4rem,8vw,6rem)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:#fff;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;margin:0 0 1rem;
  background:rgba(212,42,28,.9);padding:.42em .8em;border-radius:3px}
.hero h1{color:#fff;font-size:clamp(2.6rem,1.2rem + 6.4vw,6rem);font-weight:900;
  text-shadow:0 6px 30px rgba(24,43,69,.55);max-width:16ch}
.hero h1 .em{color:var(--yellow)}
.hero-sub{color:rgba(255,255,255,.94);font-size:clamp(1.02rem,.98rem + .5vw,1.28rem);
  max-width:44ch;margin:1.1rem 0 1.7rem;text-shadow:0 2px 14px rgba(24,43,69,.5)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero-ctas .openstate{margin-left:.2rem}
/* marco de costura inferior del hero */
.hero-frame{position:absolute;left:clamp(1.1rem,4vw,2.4rem);right:clamp(1.1rem,4vw,2.4rem);
  bottom:clamp(1.2rem,3vw,2rem);height:20px;z-index:3}
.hero-scroll{position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:3;
  width:24px;height:38px;border:2px solid rgba(255,255,255,.7);border-radius:14px;display:flex;justify-content:center;padding-top:6px}
.hero-scroll::after{content:"";width:4px;height:8px;border-radius:2px;background:#fff;animation:scrolldot 1.7s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.hero-scroll::after{animation:none}}

.openstate{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:#fff;
  background:rgba(24,43,69,.5);border:1px solid rgba(255,255,255,.28);padding:.5em .9em;border-radius:20px}
.openstate .dot{width:9px;height:9px;border-radius:50%;background:#9aa}
.openstate.is-open .dot{background:#39d353;box-shadow:0 0 0 4px rgba(57,211,83,.25)}
.openstate.is-closed .dot{background:var(--yellow)}
.visita .openstate{color:var(--indigo);background:var(--paper-2);border-color:rgba(35,58,90,.25)}
.visita .openstate.is-open .dot{background:#1f9d3f}

/* ============================================================
   BANDA ANSWER-FIRST — índigo denim + twill
   ============================================================ */
.denim{background:var(--indigo);color:var(--paper);position:relative;overflow:hidden}
.denim::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 6px),
             repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 2px,transparent 2px 6px)}
.denim::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(78,123,168,.22),transparent 60%)}
.answer .wrap{position:relative;z-index:1;max-width:960px;text-align:center}
.answer .kicker{color:var(--yellow);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem}
.answer p{font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:none;
  font-size:clamp(1.5rem,1rem + 2.6vw,2.7rem);line-height:1.14;margin:1rem auto 0;color:#fff;letter-spacing:.3px}
.answer p .hl{color:var(--yellow)}

/* ============================================================
   NÚCLEO — Anatomía del tejano
   ============================================================ */
.nucleo .nuc-head{max-width:60ch;margin-bottom:2.4rem}
.anatomy{display:grid;grid-template-columns:1fr minmax(220px,300px) 1fr;align-items:center;gap:clamp(1rem,3vw,2.4rem)}
.anatomy .col{display:flex;flex-direction:column;gap:1.4rem}
.jean-fig{position:relative;justify-self:center;filter:drop-shadow(0 22px 30px rgba(24,43,69,.3))}
.jean-fig svg{width:100%;height:auto;max-width:300px}
.jean-fig .denimfill{fill:var(--indigo)}
.jean-fig .denimfill2{fill:#2c4468}
.jean-fig .guide{stroke:rgba(255,255,255,.16);stroke-width:2;fill:none}
.jean-fig .stitches{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-sew)}
.jean-fig.sewn .stitches{clip-path:inset(0 0 0 0)}
.jean-fig .st{stroke:var(--yellow);stroke-width:2.4;stroke-dasharray:9 7;stroke-linecap:round;fill:none}
.jean-fig .rivet{fill:url(#cop);transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .32s var(--spring)}
.jean-fig.sewn .rivet{transform:scale(1)}
.jean-fig .rivet.r1{transition-delay:.9s}.jean-fig .rivet.r2{transition-delay:1s}
.jean-fig .rivet.r3{transition-delay:1.1s}.jean-fig .rivet.r4{transition-delay:1.2s}
@media (prefers-reduced-motion:reduce){
  .jean-fig .stitches{clip-path:none;transition:none}
  .jean-fig .rivet{transform:scale(1);transition:none}
}
.callout{position:relative;background:var(--paper-2);border:1px solid rgba(35,58,90,.14);border-radius:4px;
  padding:1.05rem 1.15rem;box-shadow:0 12px 26px -20px rgba(24,43,69,.5)}
.callout::before{content:"";position:absolute;top:1.2rem;width:38px;height:3px;background:var(--seam-h)}
.col.left .callout{text-align:right}
.col.left .callout::before{right:-38px}
.col.right .callout::before{left:-38px}
.callout .rv{position:absolute;top:calc(1.2rem - 5px);width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--copper-l),var(--copper) 62%,#7d4d24);box-shadow:0 1px 2px rgba(0,0,0,.35)}
.col.left .callout .rv{right:-44px}.col.right .callout .rv{left:-44px}
.callout h3{color:var(--indigo);font-size:1.32rem}
.callout p{margin:.3rem 0 0;font-size:.92rem;color:var(--ink-soft);line-height:1.45}
.nuc-aside{margin-top:2.6rem;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:center}
.nuc-aside .frame{position:relative;border-radius:6px;overflow:hidden;box-shadow:var(--sh)}
.nuc-aside .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.nuc-aside .frame .cap{position:absolute;left:0;bottom:0;background:var(--indigo-deep);color:var(--yellow);
  font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:.45em .8em;border-top-right-radius:4px}
.nuc-aside p{font-size:1.06rem}

/* ============================================================
   VARIEDAD — El perchero
   ============================================================ */
.perchero{background:var(--paper-2)}
.moda-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;margin-top:2.6rem}
.moda-photo{position:relative;margin:0}
.moda-photo img{width:100%;height:auto;border-radius:4px;box-shadow:0 34px 60px -34px rgba(24,43,69,.6)}
.moda-photo::before{content:"";position:absolute;inset:-9px;border:1px solid var(--yellow);border-radius:7px;opacity:.55;pointer-events:none}
.moda-photo .cap{position:absolute;left:12px;bottom:12px;background:var(--indigo);color:#fff;
  font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.4em .7em;border-radius:2px}
.moda-cats{list-style:none;margin:0;padding:0;border-top:1px solid rgba(36,28,23,.14)}
.moda-cats li{padding:.95rem 0 .95rem 1.5rem;border-bottom:1px solid rgba(36,28,23,.14);position:relative;transition:padding-left .3s var(--ease),background .3s}
.moda-cats li::before{content:"";position:absolute;left:2px;top:1.45rem;width:9px;height:9px;border-radius:50%;background:var(--red)}
.moda-cats li:hover{padding-left:1.9rem;background:linear-gradient(90deg,rgba(245,182,14,.12),transparent 70%)}
.moda-cats h3{margin:0;font-family:"Big Shoulders Display",sans-serif;font-weight:800;text-transform:uppercase;font-size:1.32rem;letter-spacing:.03em;color:var(--indigo)}
.moda-cats p{margin:.12rem 0 0;font-size:.9rem;color:var(--ink-soft);line-height:1.4}
@media (max-width:820px){.moda-grid{grid-template-columns:1fr;gap:1.5rem}}

/* ============================================================
   VALOR — Etiquetas kraft (swing-tags)
   ============================================================ */
.ventajas{background:var(--paper)}
.tags{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.7rem,1.8vw,1.4rem);margin-top:3rem}
.swing{display:flex;flex-direction:column;align-items:center;padding-top:30px}
.swing .cord{position:absolute;top:0;width:2px;height:34px;background:linear-gradient(180deg,#b9a074,#8a7454)}
.tag{position:relative;width:100%;background:linear-gradient(160deg,#efe6d2,#e2d6bd);color:var(--ink);
  border-radius:6px;padding:1.5rem 1rem 1.2rem;text-align:center;
  box-shadow:0 14px 26px -18px rgba(24,43,69,.6),inset 0 0 0 1px rgba(24,43,69,.06);
  clip-path:polygon(50% 0,100% 12%,100% 100%,0 100%,0 12%);
  transform-origin:50% 0;animation:sway 5s ease-in-out infinite}
.tag::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:12px;height:12px;
  border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px rgba(24,43,69,.35)}
.swing:nth-child(2) .tag{animation-delay:-1.1s}
.swing:nth-child(3) .tag{animation-delay:-2.3s}
.swing:nth-child(4) .tag{animation-delay:-3.1s}
.swing:nth-child(5) .tag{animation-delay:-.6s}
@keyframes sway{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
@media (prefers-reduced-motion:reduce){.tag{animation:none;transform:rotate(0)}}
.tag .num{display:block;font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:1.1rem;color:var(--red);margin-top:.4rem}
.tag h3{font-size:1.24rem;color:var(--indigo);margin-top:.35rem}
.tag p{font-size:.85rem;color:var(--ink-soft);line-height:1.4;margin:.4rem 0 0}

/* ============================================================
   VISITA
   ============================================================ */
.visita{background:var(--indigo);color:var(--paper);position:relative;overflow:hidden}
.visita .wrap{position:relative;z-index:1}
.visita .sec-title{color:#fff}.visita .sec-title .em{color:var(--yellow)}
.visita-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,3vw,2.6rem);margin-top:1.8rem}
.map-wrap{border-radius:8px;overflow:hidden;box-shadow:var(--sh);border:3px solid rgba(255,255,255,.14);min-height:340px}
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:saturate(.9)}
.visita-info .addr{font-family:"Big Shoulders Display",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:1.7rem;color:#fff;margin:0}
.visita-info .addr-sub{color:rgba(255,255,255,.8);margin:.2rem 0 .3rem}
.visita-info .ref{color:var(--yellow);font-weight:600;font-size:.92rem;margin:0 0 1.1rem}
.hours-list{list-style:none;margin:0 0 1rem;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.hours-list li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .2rem;border-bottom:1px solid rgba(255,255,255,.14);
  font-variant-numeric:tabular-nums}
.hours-list .d{font-weight:600}
.hours-list .h{color:rgba(255,255,255,.82);text-align:right}
.hours-list li.closed .h{color:var(--yellow)}
.hours-list li.today{background:rgba(245,182,14,.14);border-radius:4px;padding-inline:.55rem;margin-inline:-.35rem}
.hours-list li.today .d{color:var(--yellow)}
.today-badge{display:none;margin-left:.5rem;background:var(--yellow);color:var(--ink);font-size:.6rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:.14em .45em;border-radius:3px;vertical-align:middle}
.hours-list li.today .today-badge{display:inline-block}
.aug-note{display:flex;gap:.6rem;align-items:flex-start;background:rgba(212,42,28,.16);border:1px solid rgba(245,182,14,.4);
  border-radius:6px;padding:.7rem .9rem;font-size:.9rem;color:#fff;margin-bottom:1.2rem}
.aug-note b{color:var(--yellow)}
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0 0 1.3rem}
.info-cols h4{font-size:1.02rem;color:var(--yellow);letter-spacing:.08em;margin:0 0 .35rem}
.info-cols ul{list-style:none;margin:0;padding:0;font-size:.9rem;color:rgba(255,255,255,.86);line-height:1.7}
.pay-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.pay-chip{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:.3em .6em;border-radius:4px}
.visita-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:.4rem}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--paper)}
.faq-head{text-align:center;max-width:52ch;margin:0 auto 2.2rem}
.faq-list{max-width:860px;margin-inline:auto}
.faq-item{border-bottom:1px solid rgba(35,58,90,.16)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.15rem .2rem;font-family:"Big Shoulders Display",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,.9rem + .8vw,1.5rem);color:var(--indigo);letter-spacing:.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{position:relative;width:22px;height:22px;flex:none}
.faq-item .plus::before,.faq-item .plus::after{content:"";position:absolute;background:var(--red);border-radius:2px;transition:transform .28s var(--ease)}
.faq-item .plus::before{top:10px;left:2px;right:2px;height:2px}
.faq-item .plus::after{left:10px;top:2px;bottom:2px;width:2px}
.faq-item[open] .plus::after{transform:scaleY(0)}
.faq-item .ans{padding:0 .2rem 1.25rem;color:var(--ink-soft);font-size:.98rem;line-height:1.6;max-width:66ch}
.faq-item .ans a{color:var(--red);font-weight:600}
.faq-item[open] summary{color:var(--red)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--indigo-deep);color:rgba(245,240,231,.82);padding:3.4rem 0 2rem;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 7px)}
.footer .wrap{position:relative;z-index:1}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.footer .plate{font-size:1.5rem;margin-bottom:.8rem}
.footer p{font-size:.92rem;max-width:38ch}
.footer h4{color:var(--yellow);font-size:1rem;letter-spacing:.08em;margin:0 0 .7rem}
.footer ul{list-style:none;margin:0;padding:0;font-size:.92rem;line-height:1.9}
.footer a{color:var(--paper);text-decoration:none}
.footer a:hover{color:var(--yellow)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;
  margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);font-size:.82rem;color:rgba(245,240,231,.6)}
.panoramic-sign a{color:var(--yellow);font-weight:700;text-decoration:underline}

/* ---------- FAB ---------- */
.fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:70;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--red);color:#fff;font-weight:700;text-decoration:none;padding:.8rem 1.15rem;border-radius:40px;
  box-shadow:0 14px 30px -10px rgba(212,42,28,.8);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;
  transition:opacity .3s,transform .3s}
.fab svg{width:1.2em;height:1.2em}
.fab.show{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.fab{transition:none}}

/* ---------- MODAL WHATSAPP (default OCULTO — a prueba de fallos) ---------- */
.wa-modal{position:fixed;inset:0;z-index:95;display:none;place-items:center;padding:1.2rem}
.wa-modal:not([hidden]){display:grid}
.wa-overlay{position:absolute;inset:0;background:rgba(24,43,69,.55);backdrop-filter:blur(5px)}
.wa-card{position:relative;background:var(--paper);border-radius:12px;max-width:380px;width:100%;padding:1.8rem;
  box-shadow:0 40px 80px -30px rgba(24,43,69,.7);text-align:center}
.wa-card h3{color:var(--indigo);font-size:1.5rem}
.wa-card p{font-size:.92rem;color:var(--ink-soft);margin:.5rem 0 1rem}
.wa-close{position:absolute;top:.6rem;right:.8rem;background:none;border:0;font-size:1.9rem;color:var(--ink-soft);cursor:pointer;line-height:1}
.wa-qr{display:flex;justify-content:center;margin:0 auto 1rem;padding:.6rem;background:#fff;border-radius:8px;width:max-content;border:1px solid rgba(35,58,90,.15)}
.wa-qr img{width:180px;height:180px;image-rendering:pixelated}
.wa-preview{font-size:.82rem;color:var(--ink-soft);margin-bottom:1rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .anatomy{grid-template-columns:1fr}
  .anatomy .col.left{order:2}.jean-fig{order:1;margin-bottom:.4rem}.anatomy .col.right{order:3}
  .col.left .callout{text-align:left}
  .callout::before,.callout .rv{display:none}
  .nuc-aside{grid-template-columns:1fr}
  .visita-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .desk-cta{display:none}
  .hamb{display:flex}
  .nav-chip{display:none}
  .hangers{grid-template-columns:repeat(3,1fr);row-gap:1.4rem}
  .garment .desc{opacity:1;max-height:80px;transform:none}
  .tags{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}
  .swing:nth-child(n) .tag{animation-delay:calc(var(--i,0) * -0.7s)}
}
@media (max-width:560px){
  .hero{min-height:92svh}
  .hangers{grid-template-columns:repeat(2,1fr)}
  .tags{grid-template-columns:1fr 1fr}
  .info-cols{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}