/* =====================================================================
   GLOBAL — variables, reset, tipografía y utilidades.
   Street Blush mantiene una identidad fija (no cambia con el tema del
   sistema operativo). Cada tienda puede sobrescribir los colores en
   css/tema-hombre.css o css/tema-mujer.css.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --paper:#faf7f5;
  --paper-2:#f1eae8;
  --tile:#efe7e6;
  --tile-line:#e2d6d4;
  --ink:#141212;
  --ink-soft:#2a2626;
  --ink-light:#352c2d;      /* brillo de los degradados oscuros */
  --ink-line:#3a2e30;       /* bordes sobre fondo oscuro */
  --ink-hover:#3a2430;      /* tarjeta oscura en hover */
  --muted:#5b5253;
  --placeholder:#8a7f80;
  --line:#e4dad8;
  --rose:#d63a73;
  --rose-deep:#a6265a;
  --rose-light:#e24f88;     /* brillo de los degradados rosa */
  --blush:#f5d9e4;
  --cream:#fffaf8;
  /* Versiones RGB para sombras y transparencias: rgba(var(--rose-rgb),.5) */
  --ink-rgb:20,18,18;
  --rose-rgb:214,58,115;
  --rose-deep-rgb:166,38,90;
  --paper-rgb:250,247,245;
  --cream-rgb:255,250,248;

  --font-display:'Archivo Black','Arial Black',sans-serif;
  --font-editorial:'Fraunces',Georgia,serif;
  --font-body:'Manrope','Segoe UI',system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --nav-h:78px;
  --z-nav:50;
  --z-float:60;
  --z-overlay:65;
  --z-drawer:70;
  --z-modal:100;
  --z-skip:200;
  /* Rutas relativas a este archivo CSS */
  --emblem:url("../assets/img/emblema.jpg");
  --logo:url("../assets/img/logo.png");
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);}
html.welcome-open,body.drawer-open{overflow:hidden;}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;padding:0;}
h1,h2,h3{margin:0;text-wrap:balance;}
p{margin:0;}
[hidden]{display:none !important;}
:focus-visible{outline:2.5px solid var(--rose);outline-offset:3px;}
[tabindex="-1"]:focus{outline:none;}

/* ---------- Utilidades y tipografía ---------- */
.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;}
.brand-logo{display:block;height:var(--logo-h,50px);width:calc(var(--logo-h,50px) * 3.988);background:var(--logo) left center/contain no-repeat;}
.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem);}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:.98;}
.eyebrow{font-family:var(--font-editorial);font-style:italic;font-weight:500;font-size:1.08rem;color:var(--rose-deep);margin:0 0 .8rem;}
.label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem;}
.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:var(--z-skip);background:var(--ink);color:var(--cream);
  padding:.7rem 1rem;border-radius:8px;font-weight:700;font-size:.9rem;
}
.skip-link:focus{top:1rem;}
.utility{background:var(--utility-bg,var(--ink));color:var(--utility-fg,var(--blush));text-align:center;padding:.6rem 1rem;}
.utility p{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}

/* Franja superior animada: texto corriendo sobre una cinta ondulada (js/text-loop.js) */
.text-loop{
  --loop-ribbon:30px;                                   /* grosor de la cinta */
  --loop-ribbon-color:var(--loop-color,var(--rose-deep));
  --loop-text-color:var(--cream);
  position:relative;height:64px;padding:0;overflow:hidden;
}
.text-loop:not(.is-ready){display:grid;place-items:center;}
.text-loop-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.text-loop-ribbon{stroke:var(--loop-ribbon-color);stroke-linecap:round;stroke-linejoin:round;}
.text-loop-text{fill:var(--loop-text-color);font-family:var(--font-body);font-size:12.5px;font-weight:800;letter-spacing:1.6px;}
.text-loop-measure{opacity:0;}
@media (max-width:560px){.text-loop{height:56px;--loop-ribbon:26px;}.text-loop-text{font-size:11px;}}
/* Cinta plana (data-shape="line"): ocupa toda la franja */
.text-loop[data-shape="line"]{height:40px;--loop-ribbon:40px;}
@media (max-width:560px){.text-loop[data-shape="line"]{height:36px;--loop-ribbon:36px;}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}