/* =====================================================================
   Tienda Chullachaqui — hoja de estilos pública
   =====================================================================
   Identidad: la del letrero del taller. Azul marino de fondo, el azul
   eléctrico del resplandor del logo como acento y el rojo de la línea de
   láser SOLO para alertas. El logo real es blanco con resplandor azul: por
   eso la cabecera y el pie son oscuros.

   Contexto: Iquitos, tráfico casi todo móvil, conexión irregular. El peso
   sigue siendo un requisito funcional:
     - UNA fuente propia (Montserrat variable, 33 KB, todos los pesos) con
       font-display: swap. Sin Google Fonts: la CSP es font-src 'self'.
     - CERO framework CSS. Este archivo es todo lo que carga la tienda.
     - Solo se anima transform/opacity (propiedades del compositor).
   ===================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("fuentes/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta de marca */
  --marino:       #0b2559;
  --marino-2:     #123a85;
  --marino-pie:   #0a1f4a;
  --azul:         #1466d6;   /* texto y botones: 5.4:1 sobre blanco */
  --azul-vivo:    #1e88f0;   /* acentos grandes y decorativos */
  --azul-claro:   #8cc4ff;   /* acentos sobre fondo marino */
  --rojo:         #d7262f;   /* la línea de láser del logo: solo alertas */
  --verde:        #12804a;

  --tinta:        #0f1e3a;
  --tinta-suave:  #47566f;
  --tinta-tenue:  #5c6a82;   /* 5.3:1 sobre blanco, apto para texto chico */
  --fondo:        #f6f9fd;
  --tinte:        #eaf2fd;
  --superficie:   #ffffff;
  --borde:        #dde6f3;
  --alerta:       var(--rojo);

  --t-micro:  0.75rem;
  --t-menor:  0.8125rem;
  --t-base:   clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
  --t-lead:   clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-t3:     clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-t2:     clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --t-t1:     clamp(2.375rem, 1.5rem + 3.6vw, 4.375rem);

  /* Ritmo: deliberadamente NO uniforme */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3.25rem;
  --sp-seccion: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  --radio:      16px;
  --radio-chico: 10px;
  --radio-chip: 999px;
  --ancho:      1240px;

  --sombra-baja: 0 1px 2px rgba(11,37,89,.06), 0 6px 18px rgba(11,37,89,.06);
  --sombra-alta: 0 4px 10px rgba(11,37,89,.08), 0 22px 44px rgba(11,37,89,.16);
  --brillo:      0 0 0 1px rgba(140,196,255,.18), 0 30px 70px rgba(11,37,89,.45);

  --rapido: 140ms;
  --normal: 260ms;
  --curva:  cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden; /* el body nunca hace scroll horizontal */
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
.ico { flex: none; }

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marino); }

:focus-visible {
  outline: 3px solid var(--azul-vivo);
  outline-offset: 2px;
  border-radius: 6px;
}

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--marino);
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em { font-style: normal; color: var(--azul-vivo); }

.env { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--sp-3); }

.salta-al-contenido {
  position: absolute; left: -9999px;
  background: var(--marino); color: #fff;
  padding: var(--sp-2) var(--sp-3); z-index: 100;
}
.salta-al-contenido:focus { left: var(--sp-3); top: var(--sp-2); }

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

.ojo {
  display: inline-block;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--azul);
}
.ojo--linea { display: inline-flex; align-items: center; gap: .9rem; color: var(--tinta-tenue); }
.ojo--linea::before { content: ""; width: 32px; height: 2px; background: var(--azul-vivo); }

/* ---------------------------------------------------------------- Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(90deg, var(--marino) 0%, var(--marino-2) 100%);
  box-shadow: 0 6px 24px rgba(11,37,89,.25);
}
.cabecera__fila { display: flex; align-items: center; gap: var(--sp-3); min-height: 72px; }
.marca { display: flex; margin-right: auto; }
.marca img { height: 54px; width: auto; }

.nav-esc { display: none; align-items: center; gap: 2rem; }
.nav-esc a {
  display: inline-flex; align-items: center; gap: .3rem;
  color: rgba(255,255,255,.88); text-decoration: none;
  font-size: .9375rem; font-weight: 600;
  padding: .55rem 0; border-bottom: 2px solid transparent;
  transition: color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.nav-esc a:hover, .nav-esc a[aria-current="page"] { color: #fff; border-bottom-color: var(--azul-vivo); }

/* Submenú de Servicios: sin JS, abre con hover y con el foco del teclado. */
.nav-esc__grupo { position: relative; }
.nav-esc__sub {
  position: absolute; left: -1rem; top: 100%;
  min-width: 250px; padding: .5rem;
  background: var(--superficie); border-radius: var(--radio-chico);
  box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva), visibility var(--rapido);
}
.nav-esc__grupo:hover .nav-esc__sub,
.nav-esc__grupo:focus-within .nav-esc__sub { opacity: 1; visibility: visible; transform: none; }
.nav-esc__sub a {
  display: flex; gap: .65rem; padding: .55rem .7rem; border: 0; border-radius: 8px;
  color: var(--tinta); font-weight: 600; font-size: .875rem;
}
.nav-esc__sub a .ico { color: var(--azul); }
.nav-esc__sub a:hover { background: var(--tinte); color: var(--marino); }

/* Buscador: píldora blanca con la lupa adentro. Se envía con Enter. */
.buscador {
  position: relative; display: flex; align-items: center;
  background: var(--superficie); border-radius: var(--radio-chip);
}
.buscador .ico { position: absolute; left: .9rem; color: var(--azul); pointer-events: none; }
.buscador input {
  font: inherit; font-size: .875rem; width: 100%;
  padding: .65rem 1rem .65rem 2.6rem;
  border: 1px solid transparent; border-radius: var(--radio-chip);
  background: transparent; color: var(--tinta);
}
.buscador input::placeholder { color: var(--tinta-tenue); }
.buscador input:focus { outline: none; border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgba(30,136,240,.25); }
.cabecera .buscador { display: none; width: 300px; }
.buscador--panel { border: 1px solid var(--borde); margin-bottom: .5rem; }

.carrito-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radio-chip);
  color: #fff; text-decoration: none; flex: none;
  transition: background var(--rapido) var(--curva);
}
.carrito-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.carrito-btn__n {
  position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; border-radius: var(--radio-chip);
  background: var(--azul-vivo); color: #fff; border: 2px solid var(--marino);
  font-size: .6875rem; font-weight: 800; line-height: 1;
}

/* Menú móvil con <details>: nativo, accesible y sin una línea de JS. */
.nav-mov { position: relative; }
.nav-mov > summary {
  list-style: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
}
.nav-mov > summary::-webkit-details-marker { display: none; }
.nav-mov[open] > summary { background: rgba(255,255,255,.14); }
.nav-mov__panel {
  position: absolute; right: 0; top: calc(100% + .6rem);
  width: min(86vw, 300px); max-height: 75vh; overflow-y: auto;
  background: var(--superficie); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); padding: var(--sp-2);
}
.nav-mov__panel a {
  display: block; padding: .6rem .75rem; border-radius: 8px;
  color: var(--tinta); text-decoration: none; font-weight: 700;
}
.nav-mov__panel a.nav-mov__sub { font-weight: 500; padding-left: 1.5rem; color: var(--tinta-suave); }
.nav-mov__panel a:hover { background: var(--tinte); color: var(--marino); }

@media (min-width: 1000px) {
  .nav-esc { display: flex; margin-right: auto; }
  .marca { margin-right: 0; }
  .nav-mov { display: none; }
}
@media (min-width: 1160px) {
  .cabecera .buscador { display: flex; }
}

/* ---------------------------------------------------------------- Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font: inherit; font-weight: 700; font-size: .9375rem;
  padding: .85rem 1.6rem; border-radius: var(--radio-chip);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--rapido) var(--curva),
              background var(--rapido) var(--curva),
              color var(--rapido) var(--curva),
              box-shadow var(--rapido) var(--curva);
}
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--azul); color: #fff; box-shadow: 0 8px 20px rgba(20,102,214,.3); }
.btn--primario:hover { background: var(--marino); color: #fff; transform: translateY(-2px); }
.btn--linea { border-color: var(--azul); color: var(--azul); background: var(--superficie); }
.btn--linea:hover { background: var(--azul); color: #fff; }
.btn--fantasma { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--fantasma:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.btn--chico { padding: .45rem 1rem; font-size: var(--t-menor); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.flecha-circulo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--borde); color: var(--azul); background: var(--superficie);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--normal) var(--curva);
}

/* ---------------------------------------------------------------- Héroe */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0;
  background:
    radial-gradient(60% 80% at 85% 20%, rgba(30,136,240,.16), transparent 70%),
    linear-gradient(180deg, #f3f8ff 0%, #e8f1fc 100%);
}
.hero__grid { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.hero h1 { font-size: var(--t-t1); margin-top: var(--sp-2); }
.hero__bajada { margin: var(--sp-3) 0 0; max-width: 34rem; font-size: var(--t-lead); color: var(--tinta-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero__confianza {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  list-style: none; padding: 0; margin: var(--sp-4) 0 0;
}
.hero__confianza li { display: flex; align-items: center; gap: .65rem; font-size: var(--t-micro); color: var(--tinta-tenue); }
.hero__confianza .ico { color: var(--marino); }
.hero__confianza strong { display: block; font-size: var(--t-menor); color: var(--tinta); }

/* El letrero: el logo real sobre un panel marino iluminado, como el del taller. */
.letrero {
  position: relative; display: grid; gap: var(--sp-3); align-items: center;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 22px; color: #fff;
  background:
    radial-gradient(70% 90% at 30% 0%, rgba(30,136,240,.45), transparent 60%),
    linear-gradient(135deg, var(--marino-2) 0%, var(--marino) 70%);
  box-shadow: var(--brillo);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transform-origin: left center;
}
.letrero::before { /* los reflectores sobre el letrero */
  content: ""; position: absolute; inset: -40% 10% auto; height: 70%;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}
.letrero__logo { width: 100%; max-width: 330px; justify-self: center; filter: drop-shadow(0 0 18px rgba(30,136,240,.55)); }
.letrero__lineas {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem;
  font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.letrero__lineas li { display: flex; align-items: center; gap: .6rem; }
.letrero__lineas .ico { color: var(--azul-claro); }
@media (min-width: 560px) {
  .letrero { grid-template-columns: 1.25fr 1fr; }
  .letrero__lineas { border-left: 1px solid rgba(255,255,255,.2); padding-left: var(--sp-3); }
}

/* ---------------------------------------------------------------- Secciones */
.seccion { padding-block: var(--sp-seccion); }
.seccion--pegada { padding-top: 0; }
.seccion--ajustada { padding-block: var(--sp-4) var(--sp-seccion); }
.seccion--tinte { background: var(--tinte); }
.seccion__cab {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
}
.seccion__cab h2 { font-size: var(--t-t2); }
.seccion__cab p { margin: .35rem 0 0; color: var(--azul); font-size: var(--t-menor); font-weight: 600; }
.seccion__enlace {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-menor); font-weight: 700; white-space: nowrap; text-decoration: none;
}
.seccion__enlace .ico { transition: transform var(--rapido) var(--curva); }
.seccion__enlace:hover .ico { transform: translateX(3px); }

/* ---------------------------------------------------------------- Categorías */
.categorias { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.categoria {
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: .7rem; padding-right: 2.9rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--tinta); text-decoration: none; box-shadow: var(--sombra-baja);
  transition: transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva), border-color var(--normal) var(--curva);
}
.categoria__foto {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  background: var(--tinte); color: var(--azul);
}
.categoria__foto img { width: 100%; height: 100%; object-fit: cover; }
.categoria__txt strong { display: block; font-size: .9375rem; color: var(--marino); line-height: 1.25; }
.categoria__txt small { color: var(--tinta-tenue); font-size: var(--t-micro); }
.categoria .flecha-circulo { position: absolute; right: .7rem; bottom: .7rem; width: 28px; height: 28px; }
.categoria:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: #b9d3f3; color: var(--tinta); }
.categoria:hover .flecha-circulo, .vitrina__item:hover .flecha-circulo { background: var(--azul); color: #fff; border-color: var(--azul); }

/* ---------------------------------------------------------------- Productos */
.productos { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.productos--fila, .productos--ancho { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.tarjeta {
  position: relative; display: grid; grid-template-columns: 38% 1fr; gap: var(--sp-2);
  padding: .65rem; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
  transition: transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva), border-color var(--normal) var(--curva);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: #b9d3f3; }
.tarjeta__foto { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--tinte); align-self: start; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--normal) var(--curva); }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.05); }
.tarjeta__cuerpo { display: flex; flex-direction: column; gap: .3rem; padding: .35rem .25rem .25rem; min-width: 0; }
.tarjeta__cat { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
.tarjeta__nom { font-size: 1rem; line-height: 1.25; letter-spacing: -.01em; }
.tarjeta__nom a { color: var(--marino); text-decoration: none; }
/* El enlace cubre toda la tarjeta, pero el foco se ve en la tarjeta entera */
.tarjeta__nom a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.tarjeta:focus-within { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }
.tarjeta__nom a:focus-visible { outline: none; }
.tarjeta__desc {
  margin: 0; font-size: var(--t-menor); line-height: 1.5; color: var(--tinta-suave);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tarjeta__pie { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }
.tarjeta__pie > span:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.tarjeta__carrito {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borde); color: var(--azul); background: var(--superficie);
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.tarjeta:hover .tarjeta__carrito { background: var(--azul); border-color: var(--azul); color: #fff; }
.precio { font-weight: 800; font-size: 1.25rem; color: var(--marino); letter-spacing: -0.02em; line-height: 1.1; }
.precio small { font-size: .6875rem; font-weight: 700; color: var(--tinta-tenue); letter-spacing: .06em; text-transform: uppercase; }

/* Estado de stock: umbrales, NUNCA la cantidad exacta. */
.chip {
  display: inline-flex; align-items: center; gap: .4ch;
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
  padding: .2rem .55rem; border-radius: var(--radio-chip);
  border: 1px solid transparent; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--disponible { color: var(--verde); background: #e4f5ec; border-color: #c4e8d4; }
.chip--ultimas    { color: #8a5a08; background: #fdf1dc; border-color: #f2ddb2; }
.chip--agotado    { color: var(--rojo); background: #fdeaea; border-color: #f6c9cb; }

/* ---------------------------------------------------------------- Banda (catálogo, búsqueda) */
.banda {
  position: relative; overflow: hidden; color: #fff;
  padding: var(--sp-4) 0 calc(var(--sp-5) + 1.5rem);
  background:
    radial-gradient(50% 120% at 90% 0%, rgba(30,136,240,.55), transparent 65%),
    linear-gradient(110deg, var(--marino) 0%, var(--marino-2) 100%);
}
.banda::after { /* el logo como marca de agua, sin otra petición: es el mismo archivo ya cacheado */
  content: ""; position: absolute; right: -2rem; bottom: -1.5rem; width: 420px; height: 210px;
  background: url("logo.webp") no-repeat right bottom / contain; opacity: .12;
  pointer-events: none;
}
.banda .migas { padding-top: 0; color: rgba(255,255,255,.75); }
.banda .migas a, .banda .migas span { color: rgba(255,255,255,.85); }
.banda h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); margin-top: var(--sp-2); max-width: 22ch; }
.banda h1 em { color: var(--azul-claro); }
.banda p { margin: var(--sp-2) 0 0; max-width: 40rem; color: rgba(255,255,255,.85); font-size: var(--t-lead); position: relative; }

.migas {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-tenue); padding-top: var(--sp-3);
}
.migas a { color: var(--tinta-suave); text-decoration: none; }
.migas a:hover { color: var(--azul); }
.migas > span { margin: 0; }

/* Líneas de trabajo: tarjetas que se montan sobre la banda (profundidad). */
.lineas {
  position: relative; z-index: 2;
  display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory;
  margin: -2.25rem 0 var(--sp-4); padding: .25rem .1rem 1rem;
}
.linea {
  scroll-snap-align: start; flex: 0 0 auto;
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.1rem; min-width: 200px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
  color: var(--tinta); text-decoration: none; box-shadow: var(--sombra-baja);
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.linea .ico { color: var(--azul); }
.linea strong { display: block; font-size: .875rem; color: var(--marino); line-height: 1.2; }
.linea small { color: var(--tinta-tenue); font-size: var(--t-micro); }
.linea:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); color: var(--tinta); }
.linea[aria-current="page"] { background: linear-gradient(135deg, var(--azul-vivo), var(--azul)); border-color: transparent; }
.linea[aria-current="page"] .ico, .linea[aria-current="page"] strong, .linea[aria-current="page"] small { color: #fff; }

.catalogo { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-seccion); }
@media (min-width: 960px) { .catalogo { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } }
.catalogo__lateral { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 959px) { .catalogo__lateral .caja { display: none; } .catalogo__lateral { order: 2; } }
.caja { padding: var(--sp-3); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-baja); }
.caja h2 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.filtro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.filtro a {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px;
  color: var(--tinta); text-decoration: none; font-size: .875rem; font-weight: 500; white-space: nowrap;
}
.filtro a small { color: var(--tinta-tenue); }
.filtro a .ico:last-child { margin-left: auto; color: var(--tinta-tenue); }
.filtro a .ico:first-child { color: var(--azul); }
.filtro a:hover { background: var(--fondo); color: var(--marino); }
.filtro a[aria-current="page"] { background: var(--tinte); color: var(--azul); font-weight: 700; }

.cta-wa {
  display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem;
  border-radius: var(--radio); text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--marino-2), var(--marino));
  box-shadow: var(--sombra-baja);
  transition: transform var(--rapido) var(--curva);
}
.cta-wa svg { color: #25d366; flex: none; }
.cta-wa small { display: block; color: rgba(255,255,255,.75); font-size: var(--t-micro); }
.cta-wa strong { font-size: .9375rem; }
.cta-wa > .ico { margin-left: auto; }
.cta-wa:hover { color: #fff; transform: translateY(-2px); }

.barra-filtros {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
  font-size: var(--t-menor); color: var(--tinta-suave);
}
.orden { display: flex; align-items: center; gap: .6rem; }
.orden label { font-weight: 600; }
.orden select {
  font: inherit; font-size: var(--t-menor); font-weight: 600; color: var(--tinta);
  padding: .5rem 2.2rem .5rem .9rem; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231466d6' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center;
  appearance: none; cursor: pointer;
}

.paginacion { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--t-menor); }
.paginacion a, .paginacion span {
  padding: .55rem 1.1rem; border-radius: var(--radio-chip);
  border: 1px solid var(--borde); text-decoration: none; font-weight: 700;
}
.paginacion a { background: var(--superficie); color: var(--azul); }
.paginacion a:hover { border-color: var(--azul); background: var(--azul); color: #fff; }
.paginacion span { color: var(--tinta-tenue); }

.vacio { text-align: center; padding: var(--sp-5) var(--sp-3); background: var(--superficie); border: 1px dashed #c3d4ea; border-radius: var(--radio); }
.vacio h2 { font-size: var(--t-t3); margin-bottom: var(--sp-2); }
.vacio p { color: var(--tinta-suave); margin: 0 0 var(--sp-3); }

/* ---------------------------------------------------------------- Nosotros */
.hero--claro h1 { font-size: clamp(3rem, 2rem + 4.5vw, 5.5rem); }
.historia { display: grid; gap: var(--sp-4); padding-block: var(--sp-5); color: var(--tinta-suave); }
.historia p { margin: 0 0 var(--sp-3); }
.historia strong { color: var(--marino); }
@media (min-width: 860px) {
  .historia { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .historia > :last-child { border-left: 1px solid var(--borde); padding-left: var(--sp-5); }
}
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.checks li { display: flex; align-items: center; gap: .6rem; color: var(--tinta); }
.checks .ico { color: #fff; fill: var(--azul-vivo); }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
.paso {
  position: relative; display: grid; grid-template-columns: auto auto 1fr; gap: 0 1rem; align-items: start;
  padding: var(--sp-3); background: var(--superficie);
  border-radius: var(--radio); box-shadow: var(--sombra-baja);
}
.paso__ico {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--tinte); color: var(--azul);
}
.paso__nro { font-size: 2.125rem; font-weight: 800; line-height: 1; color: var(--azul-vivo); letter-spacing: -.03em; }
.paso h3 { font-size: 1.0625rem; margin: .2rem 0 .35rem; }
.paso p { margin: 0; color: var(--tinta-suave); font-size: var(--t-menor); }
@media (min-width: 900px) {
  /* La flecha entre pasos: el proceso se lee de izquierda a derecha. */
  .paso:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: calc(-1 * var(--sp-4) / 2 - 7px);
    width: 14px; height: 14px; border-top: 2px solid var(--azul-vivo); border-right: 2px solid var(--azul-vivo);
    transform: translateY(-50%) rotate(45deg);
  }
}

.vitrina { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.vitrina__item {
  position: relative; display: grid; grid-template-columns: 46% 1fr; gap: var(--sp-3); align-items: center;
  padding: .65rem; padding-right: var(--sp-3);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--tinta); text-decoration: none; box-shadow: var(--sombra-baja);
  transition: transform var(--normal) var(--curva), box-shadow var(--normal) var(--curva);
}
.vitrina__foto {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
  border-radius: 12px; overflow: hidden; color: var(--azul-claro);
  background: linear-gradient(135deg, var(--marino-2), var(--marino));
}
.vitrina__foto img { width: 100%; height: 100%; object-fit: cover; }
.vitrina__txt strong { display: block; font-size: 1.0625rem; color: var(--marino); margin-bottom: .3rem; }
.vitrina__txt small { display: block; font-size: var(--t-menor); color: var(--tinta-suave); line-height: 1.5; padding-bottom: 2.4rem; }
.vitrina__item .flecha-circulo { position: absolute; right: var(--sp-3); bottom: var(--sp-3); }
.vitrina__item:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); color: var(--tinta); }

/* ---------------------------------------------------------------- Valores (antes del pie) */
.valores { background: var(--tinte); padding: var(--sp-4) 0; border-top: 1px solid var(--borde); }
.valores__fila { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.valor { display: flex; align-items: center; gap: .9rem; }
.valor__ico {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--superficie); color: var(--azul); box-shadow: var(--sombra-baja);
}
.valor strong { display: block; color: var(--marino); font-size: .9375rem; }
.valor small { color: var(--tinta-suave); font-size: var(--t-menor); }
@media (min-width: 1000px) {
  .valor + .valor { border-left: 1px solid #c9d9ee; padding-left: var(--sp-3); }
}

/* ---------------------------------------------------------------- WhatsApp */
/* Acá es el canal real de cierre, así que es persistente y visible. */
.wa {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: .6ch;
  padding: .8rem 1.1rem; border-radius: var(--radio-chip);
  background: #1f9d55; color: #fff; text-decoration: none;
  font-size: var(--t-menor); font-weight: 700;
  box-shadow: var(--sombra-alta);
  transition: transform var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.wa:hover { background: #178446; color: #fff; transform: translateY(-2px); }
.wa svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.wa__txt { display: none; }
@media (min-width: 560px) { .wa__txt { display: inline; } }

/* ---------------------------------------------------------------- Pie */
.pie { background: var(--marino-pie); color: rgba(255,255,255,.78); padding: var(--sp-5) 0 var(--sp-3); font-size: .875rem; }
.pie__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
@media (min-width: 1000px) { .pie__grid { grid-template-columns: 1.3fr .8fr 1.1fr 1.1fr 1.1fr; } }
.pie__marca img { width: 180px; height: auto; }
.pie__marca p { margin: var(--sp-2) 0 0; max-width: 26ch; font-size: var(--t-menor); }
.pie h2 { color: var(--azul-claro); font-size: .9375rem; letter-spacing: 0; margin-bottom: var(--sp-2); }
.pie a { color: rgba(255,255,255,.85); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.pie__cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: .4rem 1rem !important; }
.pie__contacto li, p.pie__contacto { display: flex; align-items: flex-start; gap: .6rem; margin: 0; }
.pie__contacto .ico { color: var(--azul-claro); margin-top: .15rem; }
.pie__legal {
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--t-micro); color: rgba(255,255,255,.6);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between;
}

/* ---------------------------------------------------------------- Ficha */
.ficha { display: grid; gap: var(--sp-4); padding: var(--sp-4) 0 var(--sp-5); }
@media (min-width: 900px) {
  .ficha { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-5); align-items: start; }
  .ficha__datos { position: sticky; top: 96px; }
}
.ficha__foto {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--sombra-baja);
}
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha h1 { font-size: var(--t-t2); margin-bottom: var(--sp-2); }
.ficha__precio { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; color: var(--marino); letter-spacing: -.03em; margin: 0; }
.ficha__nota { font-size: var(--t-menor); color: var(--tinta-suave); }
.ficha__desc { margin: var(--sp-3) 0; color: var(--tinta-suave); }

.variantes { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0; padding: 0; list-style: none; }
.variante {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico);
}
.variante__nom { font-weight: 700; color: var(--marino); }
.variante__precio { font-weight: 800; font-size: 1.125rem; color: var(--marino); }
.variante--agotada { opacity: .6; }
.variante__compra { display: flex; align-items: center; gap: .5rem; }
.variante__compra input {
  font: inherit; width: 4rem; padding: .45rem .5rem; text-align: center;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo);
}
.variante__compra .btn { padding: .6rem 1.1rem; }

/* ---------------------------------------------------------------- Carrito */
.carrito { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) { .carrito { grid-template-columns: minmax(0,1fr) 340px; } }

.carrito__lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.carrito__linea {
  display: grid; gap: var(--sp-2); align-items: center;
  grid-template-columns: auto 1fr;
  padding: var(--sp-3); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-baja);
}
.carrito__linea--problema { border-color: #f6c9cb; background: #fff8f8; }
@media (min-width: 620px) { .carrito__linea { grid-template-columns: 88px 1fr auto auto; } }
.carrito__foto { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radio-chico); background: var(--tinte); }
.carrito__nom { margin: 0; font-weight: 700; }
.carrito__nom a { color: var(--marino); text-decoration: none; }
.carrito__nom a:hover { color: var(--azul); }
.carrito__var { display: block; font-size: var(--t-menor); color: var(--tinta-tenue); }
.carrito__cant { display: flex; align-items: center; gap: .5rem; }
.carrito__cant input {
  font: inherit; width: 4.25rem; padding: .4rem .5rem; text-align: center;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo);
}
.carrito__quitar {
  font: inherit; font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  background: none; border: 0; cursor: pointer; color: var(--rojo);
  padding: .35rem; border-radius: 6px;
}
.carrito__quitar:hover { background: #fdeaea; }
.carrito__importe { text-align: right; }

/* ---------------------------------------------------------------- Resumen */
.resumen {
  position: sticky; top: 96px;
  padding: var(--sp-3); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
}
.resumen h2 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.resumen__items { list-style: none; margin: 0 0 var(--sp-2); padding: 0 0 var(--sp-2); border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; gap: .4rem; font-size: var(--t-menor); }
.resumen__items li { display: flex; justify-content: space-between; gap: var(--sp-2); }
.resumen__lista { margin: 0 0 var(--sp-3); }
.resumen__lista > div { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--t-menor); padding: .2rem 0; }
.resumen__lista dt, .resumen__lista dd { margin: 0; }
.resumen__lista dt { color: var(--tinta-suave); }
.resumen__total { border-top: 1px solid var(--borde); margin-top: .5rem; padding-top: .6rem !important; }
.resumen__total dt { font-weight: 700; color: var(--tinta) !important; font-size: 1rem; }
.resumen__total dd { font-weight: 800; font-size: 1.375rem; color: var(--marino); }

/* ---------------------------------------------------------------- Checkout */
.checkout { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 900px) { .checkout { grid-template-columns: minmax(0,1fr) 340px; } }
.checkout__campos { display: flex; flex-direction: column; gap: var(--sp-3); }

.bloque {
  border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); padding: var(--sp-3); margin: 0; box-shadow: var(--sombra-baja);
}
.bloque legend { font-weight: 800; font-size: 1.0625rem; color: var(--marino); padding: 0 .5rem; margin-left: -.5rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; margin-top: var(--sp-2); }
.campo label { font-size: var(--t-menor); font-weight: 700; color: var(--tinta-suave); }
.campo input, .campo textarea {
  font: inherit; padding: .7rem .85rem;
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--fondo); color: var(--tinta); width: 100%;
}
.campo input:focus, .campo textarea:focus { background: var(--superficie); border-color: var(--azul-vivo); }
.campo textarea { resize: vertical; }

.opciones { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.opcion { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  padding: .75rem .85rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--fondo);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva); }
.opcion:hover { border-color: var(--azul-vivo); }
.opcion:has(input:checked) { border-color: var(--azul); background: var(--tinte); }
.opcion input { margin-top: .2rem; accent-color: var(--azul); flex: none; }
.opcion span { display: flex; flex-direction: column; }
.opcion small { color: var(--tinta-suave); font-size: var(--t-micro); }

/* Honeypot: fuera de la vista de una persona, pero presente para un bot.
   No se usa display:none — algunos bots lo detectan y saltean el campo. */
.trampa {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------------------------------------------------------------- Pedido */
.pedido { display: grid; gap: var(--sp-4); }
.pedido__cab {
  padding: var(--sp-4); border-radius: var(--radio); color: #fff;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(30,136,240,.5), transparent 65%),
    linear-gradient(110deg, var(--marino), var(--marino-2));
}
.pedido__cab .ojo { color: var(--azul-claro); }
.pedido__cab h1 { font-size: var(--t-t2); color: #fff; margin: .2rem 0 var(--sp-2); }
.pedido__cab .ficha__nota { color: rgba(255,255,255,.8); }
.pedido__cab .chip { background: rgba(255,255,255,.94); }
.pedido__cuerpo { display: grid; gap: var(--sp-4); }
@media (min-width: 820px) { .pedido__cuerpo { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); } }
.pedido__cuerpo section {
  padding: var(--sp-3); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-baja);
}
.pedido__cuerpo h2 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }

/* ---------------------------------------------------------------- Pago */
.pago { display: grid; gap: var(--sp-4); align-items: start; padding-top: var(--sp-3); }
@media (min-width: 900px) { .pago { grid-template-columns: minmax(0,1fr) 340px; } }
.pago__form {
  padding: var(--sp-4); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-baja);
}
.pago__form h1 { font-size: var(--t-t3); margin-bottom: var(--sp-2); }
/* El formulario lo pinta el cliente JS de la pasarela: solo se le da aire. */
.pago__form .kr-embedded { margin-top: var(--sp-3); }

/* ---------------------------------------------------------------- Avisos */
.aviso {
  position: fixed; left: 50%; top: 1rem; z-index: 80;
  transform: translateX(-50%);
  max-width: min(92vw, 30rem); padding: .8rem 1.2rem;
  border-radius: var(--radio-chip); box-shadow: var(--sombra-alta);
  font-size: var(--t-menor); font-weight: 600; text-align: center;
}
.aviso--ok    { background: var(--marino); color: #fff; }
.aviso--error { background: var(--rojo); color: #fff; }
.aviso[hidden] { display: none; }

button[aria-busy="true"] { opacity: .6; cursor: progress; }

/* ---------------------------------------------------------------- Movimiento */
/* Nadie tiene por qué aguantar animaciones que no pidió. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .letrero { transform: none; }
}