/*
 * Kicks Hype — Catálogo (dirección "2a Editorial full-bleed", Revisión 2)
 * Reproduce 1:1 a 1440px la referencia hifi de design-handoff/kicks-hype-catalogo.html.
 * Todo queda scopeado bajo body.kh-catalogo para convivir con el CSS de
 * Elementor/Hello que sigue cargando en la página (register.php auto-encola
 * cualquier .css bajo assets/css/; este archivo vive fuera de esa carpeta y
 * se encola explícitamente solo cuando la plantilla está activa).
 *
 * Revisión 2 (2026-09-07): hero full-bleed con anuncio + header transparentes
 * DENTRO del hero (sin header sticky en esta fase), y ancho completo (sin
 * tope de 1440px en .container).
 */

/* ---------- Tokens ---------- */
body.kh-catalogo{
  --kh-bg:#F7F6F2;          /* fondo página (blanco cálido) */
  --kh-surface:#ECEBE5;     /* fondo de fotos/tiles */
  --kh-ink:#111110;         /* texto principal */
  --kh-ink-2:#4A4945;       /* párrafos */
  --kh-muted:#6B6A66;       /* etiquetas, secundarios */
  --kh-muted-2:#9A988F;     /* precio tachado */
  --kh-line:#E2E0D8;        /* hairlines */
  --kh-line-2:#DAD8D0;      /* borde chips de talla */
  --kh-indigo:#3B34D6;      /* acento de marca */
  --kh-indigo-light:#8F8AFF;/* acento sobre fondo oscuro (footer) */
  --kh-indigo-soft:#B4B0FF; /* acento sobre la foto del hero */
  --kh-footer:#0F0F0E;
  --kh-footer-line:#2A2A28;
  --kh-footer-text:#B8B6AE;
  --kh-footer-muted:#8A8983;
  --kh-footer-ghost:#1E1E1C;/* wordmark gigante */
  --kh-font-display:'Syne',sans-serif;
  --kh-font-body:'Manrope',sans-serif;
  --kh-gutter:64px;
  --kh-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / neutralización de lo heredado ---------- */
body.kh-catalogo{
  margin:0;
  background:var(--kh-bg);
  color:var(--kh-ink);
  font-family:var(--kh-font-body);
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.4;
}
body.kh-catalogo *,
body.kh-catalogo *::before,
body.kh-catalogo *::after{
  box-sizing:border-box;
}
body.kh-catalogo img{max-width:100%;height:auto;display:block}
body.kh-catalogo a{color:inherit;text-decoration:none;background:none;border:0}
body.kh-catalogo button,
body.kh-catalogo input,
body.kh-catalogo select{
  font-family:inherit;
  font-size:inherit;
  color:inherit;
  background:none;
  border:0;
  margin:0;
  padding:0;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
}
body.kh-catalogo button{cursor:pointer}
body.kh-catalogo ul{margin:0;padding:0;list-style:none}
body.kh-catalogo h1,
body.kh-catalogo h2,
body.kh-catalogo h3,
body.kh-catalogo h4,
body.kh-catalogo p{margin:0}
body.kh-catalogo svg{display:block}
/* Elementor puede seguir encolado en el sitio; que no toque esta página */
body.kh-catalogo .elementor-widget-container,
body.kh-catalogo .elementor-section{all:unset}

/* Revisión 2: ancho completo, sin tope de 1440px — cada sección va de borde
   a borde y respeta su propio gutter (--kh-gutter). */
body.kh-catalogo .container{width:100%}

.kh-chev{display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}

.kh-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Placeholder usado solo en el preview estático (sin fotos reales) */
body.kh-catalogo .kh-ph{
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,#ECEBE5 0 12px,#E6E4DD 12px 24px);
  display:grid;place-items:center;
  font:500 11px ui-monospace,Menlo,monospace;letter-spacing:.1em;
  color:#8A8983;text-transform:uppercase;
}

/* ---------- Anuncio + Header ----------
 * Revisión 2: viven DENTRO de .kh-hero (.kh-hero__top), superpuestos sobre la
 * foto y transparentes — no hay header sticky en esta fase, así que se
 * retintan directo (sin duplicar reglas para un contexto "sólido" que no
 * existe todavía). Texto blanco, hairlines translúcidos, acento índigo suave.
 */
body.kh-catalogo .kh-announce{
  display:flex;justify-content:center;
  padding:11px var(--kh-gutter);
  font-size:12px;letter-spacing:.04em;color:#D9D7CF;
  border-bottom:1px solid rgba(255,255,255,.16);
}

body.kh-catalogo .kh-header{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--kh-gutter);height:88px;border-bottom:1px solid rgba(255,255,255,.16);
  background:transparent;
}
body.kh-catalogo .kh-wordmark{display:flex;flex-direction:column;width:max-content}
body.kh-catalogo .kh-wordmark b{font:800 30px/1 var(--kh-font-display);letter-spacing:-.04em}
body.kh-catalogo .kh-wordmark small{font:700 10px/1 var(--kh-font-body);letter-spacing:.34em;color:var(--kh-indigo-soft);margin-top:5px}

body.kh-catalogo .kh-nav{display:flex;gap:36px;font-size:14px;font-weight:500}
body.kh-catalogo .kh-nav a{display:flex;align-items:center;gap:8px;transition:color .15s}
body.kh-catalogo .kh-nav a:hover,
body.kh-catalogo .kh-nav a.is-accent{color:var(--kh-indigo-soft)}

body.kh-catalogo .kh-utils{display:flex;justify-content:flex-end;align-items:center;gap:22px}
body.kh-catalogo .kh-utils a{display:flex;padding:4px;position:relative;transition:color .15s}
body.kh-catalogo .kh-utils a:hover{color:var(--kh-indigo-soft)}
body.kh-catalogo .kh-utils svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.kh-catalogo .kh-count{
  position:absolute;top:-2px;right:-6px;box-sizing:border-box;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--kh-indigo);color:#fff;font-size:10px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--kh-ease);
}
body.kh-catalogo .kh-count.is-bump{animation:kh-bump .25s var(--kh-ease)}
@keyframes kh-bump{
  0%{transform:scale(1)}
  50%{transform:scale(1.25)}
  100%{transform:scale(1)}
}

/* ---------- Hero full-bleed con anuncio + header transparentes ----------
 * Capas (de atrás hacia adelante, todas position:absolute dentro de .kh-hero
 * position:relative): foto de fondo → scrim → .kh-hero__top (anuncio +
 * header) → .kh-hero__copy (texto + caption). El orden en el DOM ya alcanza
 * para el stacking correcto (todas z-index:auto).
 */
body.kh-catalogo .kh-hero{
  position:relative;
  height:840px;
  overflow:hidden;
  color:var(--kh-bg);
  background:linear-gradient(180deg,#232220 0%,#1A1917 100%);
}
body.kh-catalogo .kh-hero__bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
body.kh-catalogo .kh-hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 34%),
    linear-gradient(0deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,0) 52%);
}
body.kh-catalogo .kh-hero__top{position:absolute;top:0;left:0;right:0}

body.kh-catalogo .kh-hero__copy{
  position:absolute;left:var(--kh-gutter);right:var(--kh-gutter);bottom:64px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:48px;
}
body.kh-catalogo .kh-hero__text{display:flex;flex-direction:column;gap:28px}
body.kh-catalogo .kh-eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--kh-indigo-soft)}
body.kh-catalogo .kh-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kh-indigo-soft)}
body.kh-catalogo .kh-hero h1{margin:0;font:800 112px/.92 var(--kh-font-display);letter-spacing:-.045em}
body.kh-catalogo .kh-hero__foot{display:flex;align-items:center;gap:40px;margin-top:4px}
body.kh-catalogo .kh-hero__foot p{margin:0;max-width:380px;font-size:16px;line-height:1.55;color:#E8E6DF}
body.kh-catalogo .kh-link-underline{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:6px;white-space:nowrap;transition:color .15s,border-color .15s}
body.kh-catalogo .kh-link-underline:hover{color:var(--kh-indigo-soft)}
body.kh-catalogo .kh-hero__caption{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-size:12px;letter-spacing:.04em;color:#D9D7CF;white-space:nowrap;
}
body.kh-catalogo .kh-hero__caption b{font-size:14px;font-weight:600;color:var(--kh-bg)}

/* ---------- Marcas ---------- */
body.kh-catalogo .kh-brands{display:flex;align-items:center;justify-content:space-between;padding:0 var(--kh-gutter);height:64px;border-bottom:1px solid var(--kh-line)}
body.kh-catalogo .kh-brands ul{display:flex;gap:32px;font-size:13px;font-weight:500;letter-spacing:.02em}
body.kh-catalogo .kh-brands a{color:var(--kh-muted);padding:4px 0;display:inline-block;transition:color .15s}
body.kh-catalogo .kh-brands a:hover{color:var(--kh-ink)}
body.kh-catalogo .kh-brands a.is-active{color:var(--kh-indigo);border-bottom:1.5px solid var(--kh-indigo)}
body.kh-catalogo .kh-brands__count{font-size:12px;color:var(--kh-muted)}

/* ---------- Ordenar / Filtrar ---------- */
body.kh-catalogo .kh-toolbar{display:flex;justify-content:space-between;align-items:center;padding:0 var(--kh-gutter);height:60px;border-bottom:1px solid var(--kh-line);font-size:13px}
body.kh-catalogo .kh-toolbar .kh-label{color:var(--kh-muted)}
body.kh-catalogo .kh-toolbar .kh-value{font-weight:600}
body.kh-catalogo .kh-toolbar .kh-plus{font-size:18px;line-height:1;font-weight:400}

body.kh-catalogo .kh-sort{position:relative;display:flex;gap:8px;align-items:center;cursor:pointer}
body.kh-catalogo .kh-sort__select{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:0;cursor:pointer;
}

body.kh-catalogo .kh-filter{position:relative}
body.kh-catalogo .kh-filter__trigger{display:flex;gap:8px;align-items:center}
body.kh-catalogo .kh-filters{
  position:absolute;top:calc(100% + 1px);right:0;z-index:20;
  background:#fff;border:1px solid var(--kh-line);
  padding:16px;min-width:280px;
  box-shadow:0 12px 32px rgba(17,17,16,.08);
}
body.kh-catalogo .kh-filters__group{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
body.kh-catalogo .kh-filters__chip{width:100%}

/* ---------- Grid ---------- */
body.kh-catalogo .kh-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:56px 28px;padding:48px var(--kh-gutter) 72px;
  position:relative;
}
body.kh-catalogo .kh-grid.is-loading .kh-card{opacity:.5;transition:opacity .2s ease}

body.kh-catalogo .kh-empty{
  grid-column:1/-1;
  padding:48px 0;
  text-align:center;
  color:var(--kh-muted);
  font-size:14px;
}

body.kh-catalogo .kh-card{display:flex;flex-direction:column;gap:14px}
body.kh-catalogo .kh-tile{position:relative;aspect-ratio:1/1;background:var(--kh-surface);overflow:hidden}
body.kh-catalogo .kh-tile__link{position:absolute;inset:0;display:block}
body.kh-catalogo .kh-tile__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  padding:10%;
  mix-blend-mode:darken; /* las fotos reales traen fondo #ECEEF0, apenas más claro que el tile #ECEBE5: darken lo hace desaparecer y deja solo el par */
  transition:transform .6s var(--kh-ease);
}
body.kh-catalogo .kh-card:hover .kh-tile__img,
body.kh-catalogo .kh-card:focus-within .kh-tile__img{transform:scale(1.04)}

body.kh-catalogo .kh-badge{
  position:absolute;top:14px;left:14px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kh-indigo);pointer-events:none;
}

body.kh-catalogo .kh-quick{
  position:absolute;left:12px;right:12px;bottom:12px;
  background:#fff;padding:14px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 12px 32px rgba(17,17,16,.08);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .25s ease,transform .3s var(--kh-ease);
}
body.kh-catalogo .kh-card:hover .kh-quick,
body.kh-catalogo .kh-card:focus-within .kh-quick,
body.kh-catalogo .kh-card.is-open .kh-quick{
  opacity:1;transform:none;pointer-events:auto;
}

body.kh-catalogo .kh-quick__head{
  display:flex;justify-content:space-between;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kh-muted);
  transition:color .2s ease;
}
body.kh-catalogo .kh-quick__head a{text-decoration:underline}
body.kh-catalogo .kh-quick__head.is-error{color:var(--kh-indigo)}

body.kh-catalogo .kh-sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
body.kh-catalogo .kh-size{
  height:32px;border:1px solid var(--kh-line-2);background:#fff;
  font-size:12px;font-weight:500;color:var(--kh-ink);
  transition:border-color .15s,background-color .15s,color .15s;
}
body.kh-catalogo .kh-size:hover:not(:disabled){border-color:var(--kh-ink)}
body.kh-catalogo .kh-size[aria-pressed="true"]{border-color:var(--kh-ink);background:var(--kh-ink);color:#fff}
body.kh-catalogo .kh-size:disabled{
  opacity:.35;cursor:not-allowed;
  text-decoration:line-through;
}

body.kh-catalogo .kh-add{
  height:40px;background:var(--kh-ink);color:#fff;border:0;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:background .15s;
}
body.kh-catalogo .kh-add:hover{background:var(--kh-indigo)}
body.kh-catalogo .kh-add.is-busy{opacity:.7;cursor:wait}

body.kh-catalogo .kh-meta{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
body.kh-catalogo .kh-name{display:flex;flex-direction:column;gap:4px}
body.kh-catalogo .kh-name b{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
body.kh-catalogo .kh-name span{font-size:12px;color:var(--kh-muted)}
body.kh-catalogo .kh-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:13px;font-weight:600;white-space:nowrap}
body.kh-catalogo .kh-price s{font-weight:400;color:var(--kh-muted-2)}

/* ---------- Paginación ---------- */
body.kh-catalogo .kh-pager{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 var(--kh-gutter) 96px}
body.kh-catalogo .kh-pager[hidden]{display:none}
body.kh-catalogo .kh-pager__track{position:relative;width:240px;height:1px;background:var(--kh-line)}
body.kh-catalogo .kh-pager__fill{position:absolute;left:0;top:-1px;height:3px;background:var(--kh-indigo);transition:width .3s var(--kh-ease)}
body.kh-catalogo .kh-pager__status{font-size:12px;color:var(--kh-muted)}
body.kh-catalogo .kh-pager__more{font-size:13px;font-weight:600;border-bottom:1.5px solid var(--kh-ink);padding-bottom:5px;transition:color .15s,border-color .15s}
body.kh-catalogo .kh-pager__more:hover{color:var(--kh-indigo);border-color:var(--kh-indigo)}
body.kh-catalogo .kh-pager__more[hidden]{display:none}

/* ---------- Footer ---------- */
body.kh-catalogo .kh-footer{background:var(--kh-footer);color:var(--kh-bg);padding:72px var(--kh-gutter) 36px}
body.kh-catalogo .kh-footer__grid{display:grid;grid-template-columns:1.2fr 1fr .9fr 1.3fr;gap:48px}
body.kh-catalogo .kh-footer .kh-wordmark b{font-size:40px}
body.kh-catalogo .kh-footer .kh-wordmark small{font-size:11px;color:var(--kh-indigo-light);margin-top:6px}
body.kh-catalogo .kh-footer__col{display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.5;color:var(--kh-footer-text)}
body.kh-catalogo .kh-footer h4{margin:0 0 4px;font:700 15px var(--kh-font-display);color:var(--kh-bg)}
body.kh-catalogo .kh-footer__col a{transition:color .15s}
body.kh-catalogo .kh-footer__col a:hover{color:#fff}
body.kh-catalogo .kh-loc{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--kh-footer-text)}
body.kh-catalogo .kh-loc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kh-indigo-light)}

body.kh-catalogo .kh-newsletter{display:flex;gap:12px;border-bottom:1px solid #4A4A47;padding-bottom:10px;transition:border-color .2s ease}
body.kh-catalogo .kh-newsletter:focus-within{border-color:var(--kh-indigo-light)}
body.kh-catalogo .kh-newsletter input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--kh-bg);font-size:14px;padding:6px 0}
body.kh-catalogo .kh-newsletter input::placeholder{color:var(--kh-footer-muted)}
body.kh-catalogo .kh-newsletter button{background:transparent;border:0;color:var(--kh-bg);font-size:13px;font-weight:600;letter-spacing:.04em;transition:color .15s}
body.kh-catalogo .kh-newsletter button:hover{color:var(--kh-indigo-light)}
body.kh-catalogo .kh-newsletter__success{font-size:14px;color:var(--kh-footer-text);padding-bottom:10px}

body.kh-catalogo .kh-social{display:flex;gap:20px;font-size:13px;color:var(--kh-footer-text)}

body.kh-catalogo .kh-giant{margin-top:88px;border-top:1px solid var(--kh-footer-line);padding-top:28px;overflow:hidden}
body.kh-catalogo .kh-giant div{font:800 132px/.85 var(--kh-font-display);letter-spacing:-.05em;color:var(--kh-footer-ghost);white-space:nowrap}

body.kh-catalogo .kh-legal{display:flex;justify-content:space-between;margin-top:24px;font-size:12px;color:var(--kh-footer-muted)}

/* ---------- Toast ---------- */
body.kh-catalogo .kh-toast{
  position:fixed;right:24px;bottom:24px;z-index:100;
  background:var(--kh-ink);color:#fff;
  font-size:13px;font-weight:500;
  padding:14px 18px;
  box-shadow:0 12px 32px rgba(17,17,16,.18);
  transition:opacity .2s ease,transform .2s var(--kh-ease);
  opacity:0;transform:translateY(8px);
  pointer-events:none;
}
body.kh-catalogo .kh-toast[hidden]{display:none}
body.kh-catalogo .kh-toast.is-visible{opacity:1;transform:none}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  body.kh-catalogo *,
  body.kh-catalogo *::before,
  body.kh-catalogo *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ---------- Touch / sin hover: el panel no depende del hover ---------- */
@media (hover: none){
  body.kh-catalogo .kh-card:hover .kh-tile__img{transform:none}
  body.kh-catalogo .kh-card:hover .kh-quick{opacity:0;transform:translateY(14px);pointer-events:none}
  body.kh-catalogo .kh-card.is-open .kh-quick,
  body.kh-catalogo .kh-card:focus-within .kh-quick{opacity:1;transform:none;pointer-events:auto}
  body.kh-catalogo .kh-card.is-open .kh-tile__img{transform:scale(1.04)}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  body.kh-catalogo{--kh-gutter:32px}
  body.kh-catalogo .kh-header{grid-template-columns:auto 1fr auto;gap:24px}
  body.kh-catalogo .kh-nav{gap:20px}
  body.kh-catalogo .kh-hero{height:680px}
  body.kh-catalogo .kh-hero h1{font-size:80px}
  body.kh-catalogo .kh-hero__copy{bottom:48px;flex-direction:column;align-items:flex-start;gap:24px}
  body.kh-catalogo .kh-hero__caption{align-items:flex-start}
  body.kh-catalogo .kh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.kh-catalogo .kh-footer__grid{grid-template-columns:1fr 1fr}
  body.kh-catalogo .kh-giant div{font-size:88px}
}
@media (max-width:1000px){
  body.kh-catalogo .kh-nav{display:none}
  body.kh-catalogo .kh-header{grid-template-columns:auto 1fr}
  body.kh-catalogo .kh-utils{grid-column:2}
}
@media (max-width:720px){
  /* Marcas: en móvil la fila no entra; scroll horizontal sin barra y el conteo deja de competir por el ancho. */
  body.kh-catalogo .kh-brands{gap:16px}
  body.kh-catalogo .kh-brands ul{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:24px;white-space:nowrap;flex:1;min-width:0}
  body.kh-catalogo .kh-brands ul::-webkit-scrollbar{display:none}
  body.kh-catalogo .kh-brands__count{flex-shrink:0;white-space:nowrap}
  body.kh-catalogo{--kh-gutter:20px}
  body.kh-catalogo .kh-hero{height:600px}
  body.kh-catalogo .kh-hero h1{font-size:min(56px,13.5vw)} /* "Drop 09" mide ~6.25em: a 375px de ancho 56px no cabe y partía la línea */
  body.kh-catalogo .kh-hero__foot{flex-direction:column;align-items:flex-start;gap:20px}
  body.kh-catalogo .kh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  body.kh-catalogo .kh-footer__grid{grid-template-columns:1fr}
  body.kh-catalogo .kh-giant div{font-size:48px}
}