/* GIF: requisitos vigentes de la bitácora. La tienda conserva la identidad del equipo. */
:root {
  --action: var(--naranja);
  --ink: var(--texto);
  --card: var(--panel);
  --line-strong: var(--linea-fuerte);
  --r-btn: 999px;
  --s-2: 8px;
  --ease-gif: cubic-bezier(.23, 1, .32, 1);
}
/* Cambio de sección: un único gesto de marca; las fichas de las prendas se conservan. */
.transicion-seccion {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms var(--ease-gif), visibility 0s linear 120ms;
}
.transicion-simbolo { width: 64px; height: 64px; color: var(--naranja); }
html[data-transicion=salida] .transicion-seccion,
html[data-transicion=entrada] .transicion-seccion { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
html[data-transicion=entrada] .transicion-seccion { transition: none; }
html[data-transicion=revelar] .transicion-seccion { visibility: visible; transition: opacity 200ms var(--ease-gif); }
html[data-transicion] .transicion-simbolo { animation: gif-simbolo-giro 720ms cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: var(--transicion-retraso, 0ms); }
@keyframes gif-simbolo-giro {
  from { transform: perspective(360px) rotateY(0deg); }
  to { transform: perspective(360px) rotateY(360deg); }
}
/* Entrada y salida nativas: el navegador sigue administrando el foco del diálogo. */
@supports (transition-behavior: allow-discrete) {
  dialog.modal {
    opacity: 0;
    transform: translateY(8px) scale(.985);
    transition: opacity 140ms var(--ease-gif), transform 140ms var(--ease-gif), display 140ms allow-discrete, overlay 140ms allow-discrete;
  }
  dialog.modal[open] { opacity: 1; transform: none; transition-duration: 220ms; }
  dialog.modal::backdrop { opacity: 0; transition: opacity 140ms var(--ease-gif), display 140ms allow-discrete, overlay 140ms allow-discrete; }
  dialog.modal[open]::backdrop { opacity: 1; transition-duration: 220ms; }
  @starting-style {
    dialog.modal[open] { opacity: 0; transform: translateY(8px) scale(.985); }
    dialog.modal[open]::backdrop { opacity: 0; }
  }
}
html[data-movimiento=pausado] .transicion-simbolo { animation: none; }
html:is([data-movimiento=pausado], [data-interaccion=teclado]) dialog.modal,
html:is([data-movimiento=pausado], [data-interaccion=teclado]) dialog.modal::backdrop { transition: none; }
@media (max-width: 800px) {
  .nav-enlaces { transform: translateY(-6px); transition: opacity 120ms var(--ease-gif), transform 120ms var(--ease-gif), visibility 0s linear 120ms; }
  .nav-enlaces.abierto { transform: none; transition-duration: 200ms, 200ms, 0s; transition-delay: 0s; }
  html:is([data-movimiento=pausado], [data-interaccion=teclado]) .nav-enlaces { transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .transicion-seccion { display: none; }
  .nav-enlaces, dialog.modal { transform: none; }
}
.btn { border-radius: var(--r-btn); }
.pie-controles { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pie-controles a { text-decoration: underline; text-underline-offset: 4px; }
.control-movimiento {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--texto2);
  font-size: 13px;
}
.control-movimiento:hover { color: var(--texto); border-color: var(--linea-fuerte); }
.control-movimiento[aria-pressed=true] { color: var(--naranja-oscuro); }
.portada { min-height: min(740px, calc(100svh - 112px)); }
.portada h1 { font-size: clamp(2.4rem, 4.3vw, 4.5rem); line-height: 1.05; letter-spacing: -.03em; }
.portada-texto { gap: 24px; }
.portada-texto .portada-lema { color: var(--naranja-oscuro); font-size: 22px; font-weight: 600; }
.portada-texto > p:not(.portada-lema) { font-size: 16px; color: var(--texto); }
.portada-foto > img { object-fit: contain; height: clamp(280px, 28vw, 420px); }
.card-marca { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.marca-logo, .marca-mini img, .intro-marca img { filter: brightness(0) invert(1); object-fit: contain; }
.card-oficial .icono { width: 13px; height: 13px; }
.card-precio, .checkout-precio, .carrito-total { color: var(--naranja-oscuro); }
.card-sub, .card-sub2, .card-stock, .card-oficial { font-size: 13px; }
.card-nombre { font-size: 15px; }
.card-producto-imagen { isolation: isolate; }
.marca-mini { display: inline-flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 138px; padding: 20px 16px; border-radius: 12px; border: 1px solid transparent; }
.marca-mini img { width: 48px; height: 36px; }
.marca-mini span { font-family: var(--fuente); font-size: 14px; font-weight: 600; }
.marca-mini:focus-visible { border-color: var(--brand); }
.populares-fila { scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: none; padding-top: 4px; padding-bottom: 4px; }
.populares-fila::-webkit-scrollbar { display: none; }
.flecha:disabled { opacity: .35; cursor: default; }
.numeros-tienda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 40px 0; border-block: 1px solid var(--linea-suave); }
.numeros-tienda > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.numeros-tienda dt { color: var(--texto2); font-size: 14px; }
.numeros-tienda dd { margin: 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; font-variant-numeric: tabular-nums; }
body.intro-abierta { overflow: hidden; }
/* Presentación pedida por el equipo: foco protegido, catálogo accesible sin JS. */
dialog.intro-gif {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: var(--bg);
  color: var(--texto);
  overflow: auto;
  overscroll-behavior: contain;
}
dialog.intro-gif:not([open]) { display: none; }
.intro-gif::backdrop { background: var(--bg); }
.intro-gif[open] { display: grid; grid-template-rows: auto 1fr auto; align-items: center; }
.intro-gif::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, #ff6a0015, transparent 62%);
  pointer-events: none;
}
.intro-fondo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--fuente-titulos); font-size: clamp(280px, 46vw, 660px); font-weight: 900; letter-spacing: -.04em; line-height: .8; color: #ffffff03; -webkit-text-stroke: 1px #f2f0ec10; pointer-events: none; user-select: none; }
.intro-cabecera { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; width: min(1240px, calc(100% - 48px)); margin: 24px auto 0; font-size: 13px; color: var(--texto2); }
.intro-contenido { position: relative; z-index: 1; width: min(600px, calc(100% - 200px)); margin: 32px auto; text-align: center; }
.intro-contenido h2 { font-size: clamp(88px, 14vw, 180px); font-weight: 900; letter-spacing: -.04em; line-height: .95; }
.intro-lema { font-family: var(--fuente-titulos); font-size: clamp(23px, 3vw, 32px); margin-top: 24px; font-weight: 600; }
#intro-descripcion { max-width: 43ch; margin: 24px auto 0; color: var(--texto2); font-size: 16px; line-height: 1.75; }
.intro-catalogo { margin: 24px auto 0; font-size: 14px; color: var(--naranja-oscuro); }
.intro-entrar { margin-top: 32px; min-width: 180px; min-height: 54px; font-size: 16px; }
.intro-pie { position: relative; z-index: 1; text-align: center; width: 100%; padding: 0 24px 24px; color: var(--texto2); font-size: 14px; }
.intro-marcas { position: absolute; top: 20%; bottom: 16%; width: 110px; overflow: hidden; pointer-events: none; }
.intro-marcas-izquierda { left: clamp(24px, 8vw, 120px); }
.intro-marcas-derecha { right: clamp(24px, 8vw, 120px); }
.intro-cinta { animation: gif-marcas-arriba 24s linear infinite; }
.intro-marcas-derecha .intro-cinta { animation-direction: reverse; }
.intro-grupo { display: flex; flex-direction: column; gap: 32px; padding-bottom: 32px; }
.intro-marca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 96px; color: var(--texto2); }
.intro-marca img { width: 60px; height: 48px; opacity: .62; }
.intro-marca span { font-size: 13px; text-align: center; }
@keyframes gif-marcas-arriba { from { transform: translateY(0); } to { transform: translateY(-50%); } }
html[data-movimiento=pausado] .intro-cinta { animation-play-state: paused; }
html[data-movimiento=pausado] *, html[data-movimiento=pausado] *::before, html[data-movimiento=pausado] *::after { scroll-behavior: auto !important; }
/* El teclado trabaja sin transiciones de interacción. */
html[data-interaccion=teclado] :is(a, button, input, select, textarea):focus-visible { animation: none; transition: none; }
@media (hover: hover) and (pointer: fine) {
  html[data-motion=on] .card-producto.card:hover { border-color: var(--brand); box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--brand) 35%, transparent); }
  html[data-motion=on] .card-producto.card:hover .card-producto-imagen { background: color-mix(in srgb, var(--brand) 12%, var(--foto)); }
  html[data-motion=on] .card-producto.card:hover .foto-producto { transform: scale(1.025); }
  html[data-motion=on] .categoria-card.card:hover img { transform: scale(1.025); }
  .card-producto-imagen .foto-producto, .categoria-foto img { transition: transform 240ms var(--ease-gif); }
  .marca-mini { transition: transform 180ms var(--ease-gif), border-color 180ms var(--ease-gif), background-color 180ms var(--ease-gif); }
  html[data-motion=on] .marca-mini:hover { transform: translateY(-2px); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
}
@media (max-width: 1024px) {
  .marcas-strip { justify-content: center; }
  .marca-mini { min-width: 110px; }
}
@media (max-width: 800px) {
  .portada { min-height: auto; }
  .portada h1 { font-size: clamp(32px, 4.5vw, 48px); }
  .portada-foto > img { height: 270px; }
}
@media (max-width: 560px) {
  .portada h1 { font-size: clamp(36px, 9.7vw, 48px); }
  .portada-texto { gap: 20px; }
  .portada-texto .portada-lema { font-size: 20px; }
  .portada-foto > img { height: 230px; }
  .marca-mini { min-width: 90px; padding: 16px 8px; }
  .marca-mini span { font-size: 13px; }
  .card-nombre { font-size: 14px; }
  .card-sub, .card-sub2, .card-stock, .card-oficial { font-size: 13px; }
  .card-sub2 { overflow-wrap: anywhere; }
  .numeros-tienda { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; padding: 32px 0; }
  .intro-cabecera { width: calc(100% - 32px); margin-top: 16px; font-size: 12px; }
  .intro-cabecera .control-movimiento { font-size: 12px; padding-inline: 10px; }
  .intro-contenido { width: calc(100% - 112px); margin-block: 32px; }
  .intro-contenido h2 { font-size: clamp(76px, 24vw, 120px); }
  .intro-lema { font-size: 22px; margin-top: 20px; }
  #intro-descripcion { font-size: 15px; line-height: 1.7; margin-top: 20px; }
  .intro-marcas { width: 48px; top: 26%; bottom: 18%; }
  .intro-marcas-izquierda { left: 4px; }
  .intro-marcas-derecha { right: 4px; }
  .intro-marca { min-height: 76px; gap: 8px; }
  .intro-marca img { width: 36px; height: 32px; }
  .intro-marca span { display: none; }
  .intro-marca.sin-logo span { display: block; font-size: 10px; overflow-wrap: anywhere; }
  .intro-grupo { gap: 24px; padding-bottom: 24px; }
  .intro-pie { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-cinta { animation: none; }
  .marca-mini, .card-producto, .foto-producto, .categoria-foto img { transform: none !important; transition: none !important; }
}