/* ═══════════════════════════════════════════════════════════
   GRITSPORT — Tu Tienda Deportiva · v3
   Sistema de diseño:
   · Display: Barlow Condensed (titulares deportivos)
   · UI/Texto: Barlow
   · Amarillo #FFD100 solo como acento · Negro carbón · Blanco roto
   · Geometría recta, esquinas cortadas (firma de marca)
   · Sombras sólidas offset, nada de glow
   ═══════════════════════════════════════════════════════════ */

:root {
  --amarillo: #FFD100;
  --amarillo-hover: #EFC400;
  --negro: #0B0B0C;
  --carbon: #131316;
  --texto: #1A1A1C;
  --texto-suave: #5D5D63;
  --crudo: #F7F7F4;       /* fondo editorial claro */
  --borde: #E6E6E1;
  --blanco: #FFFFFF;
  --wa: #1EA952;
  --azul-gt: #2E7CBF;     /* azul cielo de la bandera de Guatemala */
  --radio: 4px;
  --corte: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  --f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-texto: 'Barlow', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-texto);
  background: var(--blanco);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Etiquetas editoriales ── */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--texto-suave);
}
.etiqueta::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--amarillo);
  flex: none;
}
.etiqueta-clara { color: rgba(255, 255, 255, .65); }

/* ── Botones (esquina cortada = firma Grit Sport) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: .85rem 1.9rem;
  clip-path: var(--corte);
  border: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-amarillo { background: var(--amarillo); color: var(--negro); }
.btn-amarillo:hover { background: var(--amarillo-hover); }
.btn-borde { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); clip-path: none; }
.btn-borde:hover { background: var(--blanco); color: var(--negro); }
.btn-negro { background: var(--negro); color: var(--blanco); }
.btn-negro:hover { background: var(--carbon); }
.ico-wa { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.ico { width: 1.2em; height: 1.2em; flex: none; }

/* ═══════════ NAVBAR ═══════════ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--negro);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.navbar::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--amarillo) 0 38%, transparent 38%);
}
.navbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: .9rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 1.8rem; }
.nav-links a {
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-links a:not(.nav-wa):hover { color: var(--amarillo); border-color: var(--amarillo); }
.nav-links a.activo { color: var(--amarillo); border-color: var(--amarillo); }
.nav-wa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--wa);
  color: var(--blanco) !important;
  font-family: var(--f-display);
  font-size: .95rem !important;
  font-weight: 700;
  letter-spacing: .08em !important;
  padding: .55rem 1.2rem !important;
  clip-path: var(--corte);
  border-bottom: none !important;
}
.nav-wa:hover { background: #17913F; }
@media (max-width: 640px) {
  .nav-links a:not(.nav-wa) { display: none; }
  .nav-logo img { height: 28px; }
}

/* ═══════════ HERO (fotografía protagonista) ═══════════ */
.hero {
  background: var(--negro);
  color: var(--blanco);
}
.hero-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 4.2rem 1.4rem 3.6rem;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
}
.hero-texto .etiqueta { color: rgba(255, 255, 255, .6); margin-bottom: 1.6rem; }
.hero h1 {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 9vw, 6.8rem);
  font-weight: 700;
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.hero h1 span { color: var(--amarillo); }
.hero-sub {
  max-width: 480px;
  margin: 1.6rem 0 2.4rem;
  color: rgba(255, 255, 255, .72);
  font-size: 1.02rem;
  font-weight: 400;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-foto { position: relative; }
.hero-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}
.hero-foto::before {
  /* esquina de encuadre amarilla */
  content: "";
  position: absolute;
  top: -12px;
  right: -12px;
  width: 74px;
  height: 74px;
  border-top: 4px solid var(--amarillo);
  border-right: 4px solid var(--amarillo);
  pointer-events: none;
}
.hero-foto figcaption {
  margin-top: .8rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .45);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* fila de especificaciones bajo el hero */
.hero-specs {
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-specs-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.hero-specs-inner div {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.1rem .5rem;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .78);
}
.hero-specs-inner div + div { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 1.6rem; }
.hero-specs-inner .ico { color: var(--amarillo); width: 1.4em; height: 1.4em; }

/* ═══════════ CINTA ═══════════ */
.cinta {
  background: var(--amarillo);
  overflow: hidden;
  padding: .7rem 0;
  border-bottom: 1px solid var(--borde);
}
.cinta-track {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  width: max-content;
  animation: marquee 30s linear infinite;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
  white-space: nowrap;
  color: var(--negro);
}
.cinta-track span { display: inline-flex; align-items: center; gap: .55rem; }
.cinta-track em { font-style: normal; opacity: .45; font-weight: 700; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══════════ BANNER EQUIPO ═══════════ */
.equipo-banner { background: var(--negro); }
.equipo-banner img {
  width: 100%;
  display: block;
  /* sin aspect-ratio/crop: la foto ya trae logos de patrocinador pegados al borde inferior */
}
.equipo-banner-texto {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.8rem 1.4rem 2.2rem;
}
.equipo-banner-texto .etiqueta { color: rgba(255, 255, 255, .6); margin-bottom: .6rem; }
.equipo-banner-texto h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
  color: var(--blanco);
}
.equipo-banner-texto h2 span { color: var(--amarillo); }

/* ═══════════ CATÁLOGO ═══════════ */
.catalogo {
  background: var(--crudo);
  padding: 4.5rem 0 5rem;
}
.catalogo-inner, .seccion-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.4rem;
}
.seccion-head {
  border-bottom: 1px solid var(--borde);
  padding-bottom: 1.8rem;
  margin-bottom: 2.6rem;
}
.seccion-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: .9rem;
}
.seccion-head h2, .titulo-seccion {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
  color: var(--texto);
}
.seccion-head h2 span {
  background: linear-gradient(transparent 64%, var(--amarillo) 64%);
}
.seccion-nota {
  color: var(--texto-suave);
  font-size: .88rem;
  max-width: 300px;
  text-align: right;
  padding-bottom: .3rem;
}

.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4rem;
}

/* ── Tarjeta de producto ── */
.producto {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.producto:hover {
  transform: translateY(-3px);
  border-color: var(--negro);
  box-shadow: 0 14px 28px rgba(11, 11, 12, .10);
}
.producto-foto {
  position: relative;
  background: #EFEFEB;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.producto-foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; cursor: zoom-in; }
.producto-zoom {
  position: absolute;
  bottom: .7rem;
  left: .8rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(11, 11, 12, .55);
  display: grid;
  place-items: center;
  color: var(--blanco);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.producto-zoom svg { width: 18px; height: 18px; }
.producto-foto:hover .producto-zoom { opacity: 1; }
.producto-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--negro);
  color: var(--amarillo);
  font-family: var(--f-display);
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .42rem .9rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
/* Variante Guatemala: azul cielo de la bandera con letras blancas */
.producto-badge--guatemala {
  background: var(--azul-gt);
  color: #fff;
}
.producto-num {
  position: absolute;
  bottom: .7rem;
  right: .8rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--negro);
  background: rgba(255, 255, 255, .88);
  padding: .18rem .55rem;
  border-radius: 2px;
}
.producto-thumbs {
  display: flex;
  gap: .4rem;
  padding: .7rem .9rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.producto-thumbs::-webkit-scrollbar { display: none; }
.producto-thumbs button {
  width: 50px;
  height: 50px;
  border-radius: 3px;
  border: 1px solid var(--borde);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #EFEFEB;
  flex: none;
}
.producto-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.producto-thumbs button.activa { border: 2px solid var(--negro); }

.producto-info {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  flex: 1;
}
.producto-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.producto-titulo h3 {
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}
.producto-precio {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  white-space: nowrap;
  color: var(--negro);
  background: var(--amarillo);
  padding: .3rem .8rem;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  flex: none;
}
.producto-precio small {
  font-family: var(--f-texto);
  font-size: .72rem;
  font-weight: 600;
  color: var(--negro);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.producto-desc { color: var(--texto-suave); font-size: .88rem; line-height: 1.5; }

.producto-precio-caja { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; flex: none; }

.talla-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--texto-suave);
  margin-bottom: .4rem;
}
.tallas { display: flex; flex-wrap: wrap; gap: .4rem; }
.talla-btn {
  min-width: 40px;
  height: 38px;
  padding: 0 .6rem;
  border-radius: 3px;
  border: 1px solid #D8D8D2;
  background: var(--blanco);
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: all .12s ease;
}
.talla-btn:hover { border-color: var(--negro); }
.talla-btn.activa { background: var(--negro); color: var(--amarillo); border-color: var(--negro); }

.btn-pedir {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--wa);
  color: var(--blanco);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .9rem 1rem;
  clip-path: var(--corte);
  border: none;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-pedir:hover { background: #17913F; }

/* ═══════════ CÓMO COMPRAR ═══════════ */
.como-comprar {
  background:
    radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--negro);
  color: var(--blanco);
  padding: 4.5rem 0 4.6rem;
}
.como-comprar .seccion-head { border-color: rgba(255, 255, 255, .14); }
.como-comprar .seccion-fila { align-items: center; justify-content: flex-start; gap: 4.5rem; }
.como-comprar h2 { color: var(--blanco); }
.como-comprar h2 span { background: none; color: var(--amarillo); }
/* ── Animación camión: punto A a punto B (100% código, sin imagen/video) ── */
.ruta-envio {
  flex: 1 1 420px;
  max-width: 520px;
  cursor: pointer;
  transition: opacity .2s ease;
}
.ruta-envio:hover { opacity: .85; }
.ruta-envio:hover .ruta-camion,
.ruta-envio:hover .ruta-sombra { animation-play-state: paused; }
.ruta-titulo {
  font-family: var(--f-display);
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  margin-bottom: 1.2rem;
}
.ruta-track {
  position: relative;
  height: 70px;
}
.ruta-linea {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 55%;
  height: 2px;
  border-radius: 2px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, .3) 0 10px, transparent 10px 20px);
}
.ruta-punto {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--negro);
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: rgba(255, 255, 255, .85);
  display: grid;
  place-items: center;
  z-index: 2;
}
.ruta-punto-b { border-color: var(--amarillo); color: var(--amarillo); }
.ruta-labels {
  display: flex;
  justify-content: space-between;
  margin-top: .5rem;
  padding: 0 2px;
  font-size: .76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
}
.ruta-punto-a { left: 0; }
.ruta-punto-b { right: 0; }
.ruta-sombra {
  position: absolute;
  bottom: 4px;
  left: 10px;
  width: 42px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  filter: blur(2px);
  animation: ruta-mover-sombra 6.5s ease-in-out infinite;
}
.ruta-camion {
  position: absolute;
  top: -2px;
  left: 0;
  width: 70px;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35));
  animation: ruta-mover 6.5s ease-in-out infinite, ruta-rebote .4s ease-in-out infinite;
}
@keyframes ruta-mover {
  0%   { left: 0;                     opacity: 1; }
  42%  { left: calc(100% - 70px);     opacity: 1; }
  50%  { left: calc(100% - 70px);     opacity: 0; }
  52%  { left: 0;                     opacity: 0; }
  62%  { left: 0;                     opacity: 1; }
  100% { left: 0;                     opacity: 1; }
}
@keyframes ruta-mover-sombra {
  0%   { left: 10px;                  opacity: .55; }
  42%  { left: calc(100% - 50px);     opacity: .55; }
  50%  { left: calc(100% - 50px);     opacity: 0; }
  52%  { left: 10px;                  opacity: 0; }
  62%  { left: 10px;                  opacity: .55; }
  100% { left: 10px;                  opacity: .55; }
}
@keyframes ruta-rebote {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.8px); }
}
.ruta-caption {
  margin-top: .9rem;
  text-align: center;
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .02em;
}
@media (max-width: 900px) {
  .ruta-envio { flex: 1 1 auto; width: 100%; margin-top: 1.2rem; }
  .como-comprar .seccion-fila { align-items: flex-start; }
}

.pasos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.paso { padding: .4rem 2rem .4rem 0; }
.paso + .paso { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 2rem; }
.paso-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--amarillo);
}
.paso h3 {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: .8rem 0 .35rem;
}
.paso p { color: rgba(255, 255, 255, .6); font-size: .9rem; max-width: 300px; }
.meta-linea {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  color: rgba(255, 255, 255, .5);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-align: center;
}
.meta-linea .ico { width: 1.4em; height: 1.4em; color: var(--amarillo); }

/* ═══════════ VISÍTANOS ═══════════ */
.visitanos { background: var(--crudo); padding: 4.5rem 0; }
.visitanos-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.4rem;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: center;
}
.visitanos-texto h2 {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
  color: var(--texto);
  margin: .9rem 0 1.4rem;
}
.visitanos-texto h2 span { color: var(--texto-suave); font-size: .5em; display: block; letter-spacing: .04em; }
.visitanos-direccion {
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.8rem;
}
.visitanos-mapa {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--borde);
  box-shadow: 10px 10px 0 var(--negro);
}
.visitanos-mapa img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15); transition: filter .2s, transform .3s; }
.visitanos-mapa:hover img { filter: grayscale(0); transform: scale(1.03); }
@media (max-width: 860px) {
  .visitanos-inner { grid-template-columns: 1fr; gap: 2rem; }
  .visitanos-mapa { box-shadow: 6px 6px 0 var(--negro); }
}

/* ═══════════ RESEÑAS ═══════════ */
.resenas { background: var(--negro); color: var(--blanco); padding: 4.5rem 0; }
.resenas .seccion-head { border-color: rgba(255, 255, 255, .14); }
.resenas h2 { color: var(--blanco); }
.resenas h2 span { background: none; color: var(--amarillo); }
.resenas-carrusel {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  max-width: 1000px;
  margin: 0 auto;
}
.resenas-visor {
  flex: 1;
  overflow: hidden;
  clip-path: var(--corte);
  border: 1px solid rgba(255, 255, 255, .16);
  background: var(--carbon);
  box-shadow: 10px 10px 0 rgba(255, 209, 0, .12);
}
.resenas-track {
  display: flex;
  min-height: 260px;
  transition: transform .5s ease;
}
.resena {
  flex: 0 0 100%;
  padding: 3.2rem 3.8rem;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.resena::before {
  content: "\201C";
  position: absolute;
  top: -.6rem;
  left: 1.6rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--amarillo);
  opacity: .3;
}
.resena-texto {
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
  max-width: 560px;
  margin: 0 auto 1.5rem;
}
.resena-nombre {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .98rem;
  color: var(--amarillo);
}
.resena-municipio {
  font-size: .76rem;
  color: rgba(255, 255, 255, .5);
  margin-top: .15rem;
}
.resenas-flecha {
  flex: none;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--blanco);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.resenas-flecha:hover { background: var(--amarillo); color: var(--negro); }
.resenas-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  max-width: 500px;
  margin: 1.4rem auto 0;
}
.resenas-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.resenas-dots button.activo {
  width: 22px;
  border-radius: 4px;
  background: var(--amarillo);
}
@media (max-width: 640px) {
  .resenas-carrusel { position: relative; gap: 0; }
  .resenas-visor { min-height: 260px; }
  .resenas-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
    background: rgba(0, 0, 0, .55);
    z-index: 2;
  }
  .resenas-prev { left: .3rem; }
  .resenas-next { right: .3rem; }
  .resena { padding: 2.4rem 1.6rem 1.8rem; }
  .resena::before { font-size: 3.2rem; left: .9rem; top: -.1rem; }
  .resena-texto { font-size: .96rem; max-width: 100%; }
}

/* ═══════════ FAQ ═══════════ */
.faq { background: var(--crudo); padding: 4.5rem 0; }
.faq-lista { max-width: 860px; }
.faq-item { border-bottom: 1px solid var(--borde); }
.faq-pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 1.3rem 0;
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
}
.faq-icono { width: 1.1em; height: 1.1em; flex: none; transition: transform .25s ease; }
.faq-item.abierta .faq-icono { transform: rotate(180deg); }
.faq-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item.abierta .faq-respuesta { max-height: 220px; }
.faq-respuesta p {
  color: var(--texto-suave);
  font-size: .92rem;
  line-height: 1.6;
  padding-bottom: 1.4rem;
  max-width: 700px;
}

/* ═══════════ CTA FINAL ═══════════ */
.cta-final { background: var(--amarillo); }
.cta-final-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 3.2rem;
  padding: 4rem 1.4rem;
}
.cta-final-foto img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  border-radius: 2px;
  box-shadow: 14px 14px 0 var(--negro);
}
.cta-final-texto h2 {
  font-family: var(--f-display);
  font-size: clamp(3rem, 7vw, 5.2rem);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
  color: var(--negro);
}
.cta-final-texto h2 span {
  background: var(--negro);
  color: var(--amarillo);
  padding: 0 .3em .04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.cta-final-texto p { font-weight: 600; margin: 1.2rem 0 2rem; max-width: 380px; color: var(--negro); }
@media (max-width: 720px) {
  .cta-final-inner { grid-template-columns: 1fr; padding: 3rem 1.4rem 3.4rem; gap: 2.4rem; }
  .cta-final-foto { max-width: 320px; margin: 0 auto; }
  .cta-final-foto img { box-shadow: 10px 10px 0 var(--negro); }
  .cta-final-texto { text-align: center; }
  .cta-final-texto p { margin-inline: auto; }
}

/* ═══════════ FOOTER ═══════════ */
.footer {
  background: var(--negro);
  color: var(--blanco);
  border-top: 4px solid var(--amarillo);
  padding: 3rem 1.4rem 2.2rem;
}
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.footer-logo { height: 30px; width: auto; }
.footer-nav { display: flex; gap: 1.8rem; }
.footer-nav a {
  color: rgba(255, 255, 255, .7);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.footer-nav a:hover { color: var(--amarillo); }
.footer-base {
  max-width: 1240px;
  margin: 2.2rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, .4);
  font-size: .74rem;
  letter-spacing: .06em;
}
@media (max-width: 640px) {
  .footer-inner { justify-content: center; text-align: center; }
  .footer-base { justify-content: center; text-align: center; }
}

/* ═══════════ WHATSAPP FLOTANTE ═══════════ */
.wa-flotante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 60;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px rgba(11, 11, 12, .28);
  transition: transform .15s ease;
}
.wa-flotante:hover { transform: scale(1.07); }
.wa-flotante svg { width: 28px; height: 28px; fill: var(--blanco); }

/* ═══════════ BOTÓN VOLVER ARRIBA ═══════════ */
.btn-arriba {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 59;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--negro);
  color: var(--amarillo);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(11, 11, 12, .28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.btn-arriba.visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  bottom: 5.3rem;
}
.btn-arriba svg { width: 20px; height: 20px; }
.btn-arriba:hover { background: var(--carbon); }
@media (max-width: 640px) {
  .btn-arriba { width: 40px; height: 40px; right: .9rem; }
  .btn-arriba.visible { bottom: 4.8rem; }
}

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 11, 12, .94);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.8rem 1.5rem 1.2rem;
  overflow: hidden;
  touch-action: none;
}
.lightbox.visible { display: flex; }
.lightbox-visor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}
.lightbox img {
  max-width: min(90vw, 950px);
  max-height: 75vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox-flecha.lightbox-prev { position: absolute; left: -4px; }
.lightbox-flecha.lightbox-next { position: absolute; right: -4px; }
.lightbox-contador {
  color: rgba(255, 255, 255, .55);
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.lightbox-thumbs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 560px;
}
.lightbox-thumbs button {
  width: 54px;
  height: 54px;
  border-radius: 3px;
  border: 2px solid rgba(255, 255, 255, .18);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #1a1a1c;
  flex: none;
}
.lightbox-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-thumbs button.activa { border-color: var(--amarillo); }
.lightbox-cerrar {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--blanco);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 1;
}
.lightbox-cerrar:hover { background: rgba(255, 255, 255, .2); }
.lightbox-flecha {
  flex: none;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--blanco);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox-flecha:hover { background: var(--amarillo); color: var(--negro); }
@media (max-width: 640px) {
  .lightbox { padding: 2.6rem .6rem 1rem; gap: .6rem; }
  .lightbox img { max-width: 88vw; max-height: 62vh; }
  .lightbox-flecha { width: 44px; height: 44px; font-size: 1.3rem; background: rgba(0, 0, 0, .55); }
  .lightbox-flecha.lightbox-prev { left: 2px; }
  .lightbox-flecha.lightbox-next { right: 2px; }
  .lightbox-cerrar { top: .8rem; right: .8rem; }
  .lightbox-thumbs { max-width: 92vw; }
  .lightbox-thumbs button { width: 44px; height: 44px; }
}

/* ═══════════ ANIMACIÓN DE ENTRADA ═══════════ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cinta-track { animation: none; }
}

/* ═══════════ AJUSTES MÓVIL ═══════════ */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.4rem; padding: 3.2rem 1.3rem 2.8rem; }
  .hero-foto { max-width: 460px; }
  .pasos { grid-template-columns: 1fr; gap: 1.6rem; }
  .paso { padding: 0; }
  .paso + .paso { border-left: none; border-top: 1px solid rgba(255, 255, 255, .14); padding: 1.6rem 0 0; }
  .seccion-fila { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .seccion-nota { text-align: left; }
  .como-comprar .seccion-fila { gap: 0; }
  .ruta-envio { margin-top: 1.6rem; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: clamp(3.2rem, 15vw, 4.6rem); }
  .hero-sub { font-size: .96rem; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-specs-inner { grid-template-columns: 1fr; padding: 0 1.3rem; }
  .hero-specs-inner div + div { border-left: none; border-top: 1px solid rgba(255, 255, 255, .14); padding-left: .5rem; }
  .hero-specs-inner div { padding: .85rem .5rem; }

  .catalogo { padding: 3.2rem 0 3.6rem; }
  .grid-productos { grid-template-columns: 1fr; max-width: 430px; margin: 0 auto; }
  .como-comprar { padding: 3.4rem 0; }
  .meta-linea { letter-spacing: .16em; font-size: .66rem; }
  .talla-btn { min-width: 44px; height: 42px; }
  .wa-flotante { width: 52px; height: 52px; right: .9rem; bottom: .9rem; }
}