/* =========================================================================
   Magga Case — capa de componentes compartidos del rediseño
   Los tokens (@font-face, :root, paleta y escalas) viven en tokens.css:
   enlazar SIEMPRE tokens.css antes de este archivo en cada página.
   ========================================================================= */

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; text-wrap:balance; margin:0; }
p{ margin:0; }
::selection{ background:var(--brand-tint); color:var(--brand-strong); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--bg-elevated); padding:.6rem 1rem; border-radius:.4rem; box-shadow:var(--shadow-md); }
.skip-link:focus{ left:1rem; top:1rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--space-4); }
@media (min-width:640px){ .container{ padding:0 var(--space-5); } }
@media (min-width:1440px){ .container{ padding:0 var(--space-6); } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  padding:.8rem 1.3rem; border-radius:var(--radius-full); border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--brand); color:var(--on-brand); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--brand-strong); box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--bg-elevated); color:var(--brand-strong); border-color:var(--border); }
.btn-secondary:hover{ border-color:var(--brand); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ background:var(--surface); }
.btn-block{ width:100%; }
.btn-lg{ padding:1rem 1.6rem; font-size:1.02rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- chips / badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.04em; text-transform:uppercase; padding:.25rem .55rem; border-radius:var(--radius-full);
}
.chip-new{ background:var(--success-bg); color:var(--success); }
.chip-sale{ background:var(--danger-bg); color:var(--danger); }
.chip-drop{ background:var(--ink); color:var(--on-brand); }
.chip-neutral{ background:var(--surface-2); color:var(--text-muted); }

/* ---------- stars ---------- */
.stars{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; color:var(--text-muted); }
.stars .s{ color:var(--brand); letter-spacing:1px; font-size:.9rem; }
.stars .s .dim{ color:var(--border); }

/* ==========================================================================
   header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--border);
}
/* mobile-first: fila mínima (logo + acciones), todo lo demás vive en el panel móvil */
.header-row{ display:flex; align-items:center; gap:var(--space-3); height:var(--header-h); }
.wordmark{ display:flex; align-items:center; flex-shrink:0; }
.wordmark img{ height:24px; width:auto; display:block; }

.main-nav{ display:none; align-items:center; flex:1; min-width:0; }

.device-picker{
  display:flex; align-items:center; gap:.4rem; color:var(--text); flex-shrink:0;
  font-family:var(--font-display); font-weight:600; font-size:.88rem; padding:.5rem .2rem; border-radius:var(--radius-sm);
}
.device-picker:hover{ color:var(--brand-strong); }
.device-picker svg{ color:var(--text-muted); flex-shrink:0; }
.device-picker select{
  background:transparent; border:0; color:inherit; font:inherit; max-width:11rem;
  text-overflow:ellipsis;
}

.header-actions{ display:flex; align-items:center; gap:var(--space-1); margin-left:auto; flex-shrink:0; }
.icon-btn{ position:relative; width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius-full); flex-shrink:0; }
.icon-btn:hover{ background:var(--surface); }
.icon-btn .count{
  position:absolute; top:-2px; right:-2px; background:var(--brand); color:var(--on-brand); font-family:var(--font-mono);
  font-size:.62rem; min-width:16px; height:16px; border-radius:999px; display:grid; place-items:center; padding:0 3px;
}
.nav-toggle{ display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; }

.search-bar{ position:relative; display:flex; align-items:center; }
.search-bar input{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-full);
  padding:.55rem 1rem .55rem 2.3rem; font-size:.85rem; width:100%; color:var(--text);
  transition:border-color .15s ease;
}
.search-bar input:focus{ border-color:var(--brand); outline:none; }
.search-bar svg{ position:absolute; left:.85rem; width:15px; height:15px; color:var(--text-muted); pointer-events:none; }

/* ≥ 761px: aparece la navegación principal, se oculta la hamburguesa */
@media (min-width:761px){
  .main-nav{ display:flex; gap:var(--space-5); }
  .main-nav .nav-links{ display:flex; align-items:center; gap:var(--space-4); font-family:var(--font-display); font-weight:600; font-size:.92rem; flex-shrink:0; }
  .main-nav .nav-links a{ padding:.4rem .2rem; border-bottom:2px solid transparent; color:var(--text); white-space:nowrap; }
  .main-nav .nav-links a:hover, .main-nav .nav-links a[aria-current="page"]{ color:var(--brand-strong); border-color:var(--brand); }
  .header-row{ gap:var(--space-6); }
  .header-actions{ gap:var(--space-2); }
  .nav-toggle{ display:none; }
}
/* ≥ 1040px: hay espacio para buscador + selector de modelo dentro del header;
   por debajo, el botón de teléfono en header-actions abre la hoja de selección */
.device-trigger-btn{ display:flex; }
@media (min-width:1040px){
  .header-row > .main-nav > .search-bar{ display:flex; width:15rem; flex-shrink:1; }
  .header-row > .main-nav > .device-picker{ display:flex; }
  .device-trigger-btn{ display:none; }
}
@media (max-width:1039px){
  .header-row > .main-nav > .search-bar,
  .header-row > .main-nav > .device-picker{ display:none; }
}

/* trust bar under header */
.trust-bar{
  background:var(--brand-strong); color:var(--on-brand); font-family:var(--font-mono); font-size:.72rem;
}
.trust-bar .container{ display:flex; align-items:center; height:36px; }
.trust-bar .marquee{
  flex:1; min-width:0; overflow:hidden; height:36px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
}
.trust-bar .marquee-track{ display:flex; width:max-content; height:100%; animation:trust-marquee 20s linear infinite; }
.trust-bar .marquee:hover .marquee-track{ animation-play-state:paused; }
.trust-bar .marquee-group{ display:flex; align-items:center; gap:var(--space-5); padding-right:var(--space-5); flex-shrink:0; }
@keyframes trust-marquee{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ .trust-bar .marquee-track{ animation:none; } }
.trust-bar span{ display:inline-flex; align-items:center; gap:.4rem; opacity:.95; flex-shrink:0; }
.trust-bar .pay-badges{ display:none; align-items:center; gap:.4rem; margin-left:var(--space-5); flex-shrink:0; }
.trust-bar .pay-badges img{
  display:block; height:16px; width:auto; max-width:52px; object-fit:contain;
  background:#fff; padding:.3rem .5rem; border-radius:.3rem;
}
@media (min-width:960px){ .trust-bar .pay-badges{ display:flex; } }

/* whatsapp float */
.wa-float{
  position:fixed; right:var(--space-5); bottom:var(--space-5); z-index:60; width:56px; height:56px; border-radius:50%;
  background:#3FA36B; color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg);
  transition:transform .15s ease;
}
.wa-float:hover{ transform:scale(1.06); }
@media (max-width:640px){
  .wa-float{ width:50px; height:50px; right:var(--space-4); bottom:var(--space-4); }
  body.has-sticky-atc .wa-float{ bottom:calc(var(--space-4) + 62px); }
}
body:has(.mobile-panel:not([hidden]))  .wa-float{ display:none; }

/* ==========================================================================
   fotografía de producto real (scrapeada de magga.co)
   ========================================================================== */
.product-photo{
  display:block; width:100%; aspect-ratio:500/520; object-fit:cover; border-radius:var(--radius-md);
  background:var(--surface);
}
.photo-tile{ position:relative; aspect-ratio:500/550; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.photo-tile img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   product card
   ========================================================================== */
.product-card{
  display:flex; flex-direction:column; min-width:0; background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease;
  position:relative;
}
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.product-card .media{ position:relative; }
.product-card .media .product-photo{ border-radius:0; }
.product-card .badges{ position:absolute; top:var(--space-4); left:var(--space-4); display:flex; flex-direction:column; gap:.35rem; }
.product-card .wish{
  position:absolute; top:var(--space-4); right:var(--space-4); width:34px; height:34px; border-radius:50%;
  background:var(--bg-elevated); display:grid; place-items:center; box-shadow:var(--shadow-sm); color:var(--text-muted);
  z-index:2;
}
.product-card .wish:hover{ color:var(--danger); }
.product-card .body{ padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:.3rem; flex:1; }
.product-card .collection{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.product-card h3{ font-family:var(--font-body); font-weight:700; font-size:.98rem; letter-spacing:0; }
.product-card h3 a.stretched-link::after{ content:""; position:absolute; inset:0; z-index:1; }
.product-card h3 a.stretched-link:focus-visible::after{ outline:2px solid var(--brand); outline-offset:-2px; border-radius:var(--radius-lg); }
.product-card .price{ font-family:var(--font-mono); font-weight:700; color:var(--brand-strong); font-size:1.02rem; margin-top:.1rem; }
.product-card .price .old{ font-weight:400; color:var(--text-muted); text-decoration:line-through; margin-right:.4rem; }
.product-card .cta{ margin-top:auto; padding-top:.5rem; }

/* mobile-first: 2 tarjetas por fila, como el resto del comercio de moda en móvil —
   se ven más diseños por pantalla y se pueden comparar sin desplazarse */
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
@media (min-width:640px){ .product-grid{ gap:var(--space-5); } }
@media (min-width:761px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1081px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }

/* densidad para la columna angosta (~165px en un teléfono de 375px) */
@media (max-width:479px){
  .product-card .body{ padding:.55rem .7rem .75rem; gap:.2rem; }
  .product-card .collection{ font-size:.62rem; }
  .product-card h3{ font-size:.86rem; line-height:1.3; }
  /* en columna angosta el rango se parte por el guion: mejor "Desde $ 39.900" */
  .product-card .price{ font-size:.84rem; }
  .product-card .price-to{ display:none; }
  .product-card .price-from::before{ content:"Desde "; font-weight:400; color:var(--text-muted); }
  .product-card .badges{ top:.6rem; left:.6rem; }
  .product-card .badges .chip{ font-size:.6rem; padding:.2rem .45rem; }
  .product-card .wish{ top:.6rem; right:.6rem; width:30px; height:30px; }
  .product-card .cta{ padding-top:.45rem; }
  .product-card .cta .btn{ font-size:.82rem; padding:.68rem .5rem; }
}

/* ==========================================================================
   footer
   ========================================================================== */
.site-footer{ background:var(--footer-bg); color:var(--footer-text); margin-top:var(--space-9); }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-6); padding:var(--space-7) 0 var(--space-6); }
.footer-grid > div{ min-width:0; }
@media (min-width:561px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:901px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; padding:var(--space-8) 0 var(--space-6); } }
.footer-grid h4{ font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:color-mix(in srgb, var(--footer-text) 55%, transparent); margin-bottom:var(--space-3); }
.footer-grid ul{ display:flex; flex-direction:column; gap:.55rem; font-size:.9rem; color:color-mix(in srgb, var(--footer-text) 82%, transparent); }
.footer-grid ul a:hover{ color:var(--footer-text); text-decoration:underline; }
.footer-grid p{ color:color-mix(in srgb, var(--footer-text) 70%, transparent); }
.footer-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:var(--space-3); }
.footer-badges span{
  font-family:var(--font-mono); font-size:.68rem; border:1px solid color-mix(in srgb, var(--footer-text) 25%, transparent); border-radius:.35rem;
  padding:.25rem .5rem; color:color-mix(in srgb, var(--footer-text) 75%, transparent); background:transparent;
}
.footer-badges img{
  display:block; height:18px; width:auto; max-width:56px; object-fit:contain;
  background:#fff; padding:.3rem .55rem; border-radius:.35rem;
}
.footer-bottom{
  border-top:1px solid color-mix(in srgb, var(--footer-text) 18%, transparent); padding:var(--space-4) 0; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:var(--space-3); font-family:var(--font-mono); font-size:.74rem;
  color:color-mix(in srgb, var(--footer-text) 60%, transparent);
}
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--footer-text) 10%, transparent); border:1px solid color-mix(in srgb, var(--footer-text) 22%, transparent);
  color:var(--footer-text);
}
.footer-social a:hover{ background:color-mix(in srgb, var(--footer-text) 18%, transparent); }
.site-footer .wordmark img{ background:var(--bg-elevated); padding:.4rem .6rem; border-radius:.4rem; }

/* ==========================================================================
   sticky add to cart (mobile)
   ========================================================================== */
.sticky-atc{
  position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--bg-elevated); border-top:1px solid var(--border);
  padding:.6rem var(--space-4); display:flex; align-items:center; gap:var(--space-3); box-shadow:0 -8px 24px -12px rgba(0,0,0,.2);
  transform:translateY(110%); transition:transform .22s ease; height:64px;
}
.sticky-atc.is-visible{ transform:translateY(0); }
.sticky-atc .info{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.sticky-atc .info .name{ font-size:.76rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sticky-atc .info .price{ font-family:var(--font-mono); font-weight:700; }
.sticky-atc .btn{ margin-left:auto; }
@media (min-width:761px){ .sticky-atc{ display:none; } }

/* ==========================================================================
   section helpers
   ========================================================================== */
.section{ padding:var(--space-8) 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); margin-bottom:var(--space-6); flex-wrap:wrap; }
.section-kicker{ font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--brand); display:block; margin-bottom:.5rem; }
.section h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.section p.lede{ color:var(--text-muted); max-width:56ch; margin-top:.6rem; }
.see-all{ font-family:var(--font-mono); font-size:.84rem; color:var(--brand-strong); display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }

.breadcrumb{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); display:flex; gap:.4rem; align-items:center; padding:var(--space-4) 0; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--brand-strong); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb [aria-current]{ color:var(--text); }

/* ---------- botón pequeño ---------- */
.btn-sm{ padding:.5rem .9rem; font-size:.82rem; }

/* ---------- toast de mini-carrito ---------- */
.toast-host{ position:fixed; top:calc(var(--header-full-h) + var(--space-3)); right:var(--space-4); z-index:80; display:flex; flex-direction:column; gap:.6rem; max-width:min(320px, calc(100vw - 2rem)); }
.mini-cart-toast{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:.9rem 1rem; display:flex; flex-direction:column; gap:.5rem; font-size:.86rem;
  transform:translateX(120%); opacity:0; transition:transform .22s ease, opacity .22s ease;
}
.mini-cart-toast.is-visible{ transform:translateX(0); opacity:1; }
.mini-cart-toast strong{ font-family:var(--font-display); font-size:.88rem; color:var(--success); }
.mini-cart-toast .mct-name{ color:var(--text-muted); font-family:var(--font-mono); font-size:.78rem; }
.mini-cart-toast .mct-actions{ display:flex; gap:.5rem; margin-top:.2rem; }
@media (max-width:480px){ .toast-host{ left:var(--space-4); right:var(--space-4); max-width:none; } }

/* ---------- panel móvil ---------- */
.mobile-panel{
  position:fixed; inset:var(--header-full-h) 0 0 0; z-index:52; background:var(--bg-elevated); padding:var(--space-5);
  overflow-y:auto;
}
.mobile-panel .nav-links{ display:flex; flex-direction:column; gap:1rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin-bottom:var(--space-5); }
.mobile-panel .search-bar, .mobile-panel .device-picker{ display:flex; width:100%; max-width:none; margin-bottom:var(--space-3); }
.mobile-panel .search-bar input{ width:100%; }
.mobile-panel .device-picker{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:.85rem 1rem; justify-content:space-between;
}
.mobile-panel .device-picker select{ flex:1; max-width:none; }

/* ==========================================================================
   hoja de selección de iPhone (accesible desde header y hero, no solo el menú)
   ========================================================================== */
.device-modal{ position:fixed; inset:0; z-index:90; }
.device-modal[hidden]{ display:none; }
.device-modal-backdrop{
  position:absolute; inset:0; background:rgba(17,17,17,.5); opacity:0; transition:opacity .22s ease;
}
.device-modal.is-open .device-modal-backdrop{ opacity:1; }
.device-modal-sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:85vh; overflow-y:auto;
  background:var(--bg-elevated); border-radius:1.2rem 1.2rem 0 0; box-shadow:var(--shadow-lg);
  padding:var(--space-5); transform:translateY(105%); transition:transform .24s ease;
}
.device-modal.is-open .device-modal-sheet{ transform:translateY(0); }
@media (min-width:640px){
  .device-modal-sheet{
    left:50%; right:auto; bottom:auto; top:50%; width:min(480px, calc(100vw - 2rem));
    max-height:80vh; border-radius:var(--radius-lg); transform:translate(-50%,-46%); opacity:0; transition:transform .22s ease, opacity .22s ease;
  }
  .device-modal.is-open .device-modal-sheet{ transform:translate(-50%,-50%); opacity:1; }
}
.device-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.3rem; }
.device-modal-head h3{ font-size:1.15rem; }
.device-modal-current{ font-family:var(--font-mono); font-size:.8rem; color:var(--brand-strong); background:var(--brand-tint); display:inline-block; padding:.3rem .6rem; border-radius:.3rem; margin:.6rem 0 var(--space-4); }
.device-modal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin-bottom:var(--space-4); }
@media (min-width:420px){ .device-modal-grid{ grid-template-columns:repeat(3,1fr); } }
.device-modal-grid button{
  font-family:var(--font-mono); font-size:.82rem; text-align:center; padding:.7rem .5rem; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--text);
}
.device-modal-grid button:hover{ border-color:var(--brand); }
.device-modal-grid button[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:700; }
.device-modal-go{ opacity:.6; }
.device-modal-go.is-ready{ opacity:1; }