/* SAGUMA — Página de calzado (/calzado/). Se carga después de saguma.css y
   saguma-marca.css; reutiliza el hero, las FAQ y el cierre de las fichas.
   Mobile first: las reglas base son para el celular. Mismo criterio que la
   capa de marca: claridad, un solo punto de óxido por vista, sin sombras. */

[hidden]{display:none!important;}
@media(max-width:600px){.container{padding:0 16px;}}
.container-angosto{max-width:820px;}
html:has(.calz-modal[open]){overflow:hidden;}

/* ── Secciones ─────────────────────────────────────────────────── */
.calz-sec{padding:56px 0;}
.calz-sec-blanca{background:var(--saguma-blanco);}
@media(min-width:960px){.calz-sec{padding:88px 0;}}
.calz-head{margin-bottom:28px;}
.calz-head .section-title{text-wrap:balance;margin-bottom:12px;}
.calz-cierre{padding-top:0;}

/* Hero: la foto del producto se ve entera sobre su propio fondo. */
.calz-hero-img{aspect-ratio:4/3;}
/* Foto propia 4:3 (p91dn-hero): el par va arriba y abajo queda fondo liso para las cifras. */
.calz-hero-img img{object-position:center top;}
.ficha-stats .ficha-stat-num{font-size:24px;}

/* ── 2. Rubros ─────────────────────────────────────────────────── */
.calz-rubros{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;margin:0;padding:0;}
@media(min-width:480px){.calz-rubros{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.calz-rubros{grid-template-columns:repeat(3,1fr);gap:16px;}}
.calz-rubro{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:14px 18px;
  background:var(--saguma-crema);border:1.5px solid var(--saguma-arena);border-radius:var(--radio-grande);
  font-weight:600;font-size:16px;line-height:22px;color:var(--saguma-azul);text-decoration:none;}
.calz-rubro span{transition:transform .2s ease;}
@media(hover:hover){
  .calz-rubro:hover{border-color:var(--saguma-azul);}
  .calz-rubro:hover span{transform:translateX(4px);}
}

/* ── 3. Filtros ────────────────────────────────────────────────── */
.calz-filtros{display:grid;gap:14px;margin-bottom:24px;padding:18px;background:var(--saguma-blanco);
  border:1.5px solid var(--saguma-arena);border-radius:var(--radio-grande);min-width:0;}
.calz-fgrupo{border:0;margin:0;padding:0;min-width:0;}
.calz-fgrupo legend,.calz-variantes legend{padding:0;margin-bottom:8px;font-family:var(--font-mono);font-weight:500;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--saguma-grafito);}
/* En el celular cada grupo es una fila que se desliza; en desktop, se acomoda. */
.calz-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px;}
.calz-chips::-webkit-scrollbar{display:none;}
@media(min-width:768px){.calz-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0;}}
.calz-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;
  background:var(--saguma-blanco);border:1.5px solid var(--saguma-arena);border-radius:var(--radio-medio);
  font:600 14px/20px var(--font-texto);color:var(--saguma-azul);cursor:pointer;white-space:nowrap;}
.calz-chip[aria-pressed="true"]{background:var(--saguma-azul);border-color:var(--saguma-azul);color:var(--saguma-crema);}
.calz-chip[aria-pressed="true"] .calz-punto{border-color:rgba(244,241,236,.7);}
.calz-chip:focus-visible{outline:2px solid var(--saguma-azul);outline-offset:2px;}
@media(hover:hover){.calz-chip:hover{border-color:var(--saguma-azul);}}
.calz-punto{display:inline-block;flex-shrink:0;width:12px;height:12px;border-radius:50%;border:1px solid rgba(10,30,61,.25);}
.calz-estado{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1.5px solid var(--saguma-arena);}
.calz-resultado{margin:0;font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--saguma-grafito);}
.calz-limpiar{background:none;border:0;padding:8px 0;font:600 15px/20px var(--font-texto);color:var(--saguma-azul);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;}

/* ── 3. Grilla ─────────────────────────────────────────────────── */
.calz-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;}
@media(min-width:768px){.calz-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}}
@media(min-width:1024px){.calz-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}}
.calz-card{position:relative;display:flex;flex-direction:column;background:var(--saguma-blanco);
  border:1.5px solid var(--saguma-arena);border-radius:var(--radio-grande);overflow:hidden;}
.calz-foto{aspect-ratio:1/1;background:var(--saguma-arena);overflow:hidden;}
.calz-img{display:block;width:100%;height:100%;object-fit:cover;}
.calz-sinfoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;
  color:var(--saguma-grafito);font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:12px;}
.calz-sinfoto svg{opacity:.6;}
.calz-body{display:flex;flex-direction:column;flex:1;padding:14px 14px 16px;}
@media(min-width:768px){.calz-body{padding:16px 16px 18px;}}
.calz-tag{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--saguma-azul);margin-bottom:6px;}
.calz-tag::before{content:'';width:6px;height:6px;flex-shrink:0;background:var(--saguma-azul);border-radius:1px;}
.calz-tag-neutro{color:var(--saguma-grafito);}
.calz-tag-neutro::before{background:var(--saguma-arena);}
.calz-nombre{font-family:var(--font-titulos);font-weight:700;font-size:19px;line-height:24px;color:var(--saguma-azul);margin:0 0 4px;}
@media(min-width:768px){.calz-nombre{font-size:22px;line-height:28px;}}
.calz-codigo{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.06em;color:var(--saguma-grafito);margin:0 0 8px;overflow-wrap:anywhere;}
.calz-uso{font-size:14px;line-height:20px;color:var(--saguma-grafito);margin:0 0 10px;}
.calz-colores{list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 14px;padding:0;}
.calz-colores li{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--saguma-azul);}
.calz-accion{margin-top:auto;font-size:15px;font-weight:600;color:var(--saguma-azul);text-decoration:none;}
.calz-accion span{display:inline-block;transition:transform .2s ease;}
/* La tarjeta entera abre la ficha. */
.calz-accion::after{content:'';position:absolute;inset:0;border-radius:var(--radio-grande);}
.calz-accion:focus-visible{outline:none;}
.calz-accion:focus-visible::after{outline:2px solid var(--saguma-azul);outline-offset:-2px;}
@media(hover:hover){
  .calz-img{transition:transform .3s ease;}
  .calz-card:hover{border-color:var(--saguma-azul);}
  .calz-card:hover .calz-img{transform:scale(1.03);}
  .calz-card:hover .calz-accion{text-decoration:underline;text-underline-offset:3px;}
  .calz-card:hover .calz-accion span{transform:translateX(4px);}
}
.calz-vacio{margin-top:8px;padding:28px 20px;text-align:center;background:var(--saguma-blanco);
  border:1.5px solid var(--saguma-arena);border-radius:var(--radio-grande);}
.calz-vacio p{margin:0 auto 18px;max-width:30em;color:var(--saguma-grafito);}
.calz-vacio strong{display:block;color:var(--saguma-azul);font-weight:800;}

/* ── 4. Ficha ampliada ─────────────────────────────────────────── */
.calz-modal{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;
  background:var(--saguma-blanco);color:var(--saguma-azul);overflow-y:auto;overscroll-behavior:contain;}
.calz-modal::backdrop{background:rgba(10,30,61,.6);}
@media(min-width:768px){
  .calz-modal{width:calc(100% - 48px);max-width:980px;height:auto;max-height:calc(100dvh - 48px);margin:auto;
    border-radius:var(--radio-grande);}
}
.calz-cerrar{position:sticky;top:12px;float:right;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:12px 12px -56px 0;
  background:var(--saguma-blanco);border:1.5px solid var(--saguma-arena);border-radius:50%;color:var(--saguma-azul);cursor:pointer;}
.calz-cerrar:hover{border-color:var(--saguma-azul);}
.calz-cerrar:focus-visible{outline:2px solid var(--saguma-azul);outline-offset:2px;}
.calz-modal-grid{display:grid;grid-template-columns:minmax(0,1fr);}
@media(min-width:768px){.calz-modal-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.calz-galeria{background:var(--saguma-crema);padding:0 0 12px;}
@media(min-width:768px){.calz-galeria{padding:16px;}}
.calz-galeria-main{aspect-ratio:1/1;background:var(--saguma-arena);overflow:hidden;}
@media(min-width:768px){.calz-galeria-main{border-radius:var(--radio-medio);}}
.calz-galeria-main img{display:block;width:100%;height:100%;object-fit:cover;}
.calz-miniaturas{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 0;scrollbar-width:none;}
@media(min-width:768px){.calz-miniaturas{padding:12px 0 0;}}
.calz-miniatura{flex-shrink:0;width:64px;height:64px;padding:0;background:var(--saguma-arena);border:1.5px solid var(--saguma-arena);
  border-radius:var(--radio-chico);overflow:hidden;cursor:pointer;}
.calz-miniatura img{display:block;width:100%;height:100%;object-fit:cover;}
.calz-miniatura[aria-current="true"]{border:2px solid var(--saguma-azul);}
.calz-miniatura:focus-visible{outline:2px solid var(--saguma-azul);outline-offset:2px;}
.calz-modal-info{padding:20px 16px 28px;min-width:0;}
@media(min-width:768px){.calz-modal-info{padding:28px 28px 32px 12px;}}
.calz-modal-nombre{font-family:var(--font-titulos);font-weight:700;font-size:28px;line-height:34px;color:var(--saguma-azul);margin:0 52px 4px 0;}
@media(min-width:768px){.calz-modal-nombre{font-size:32px;line-height:38px;}}
.calz-modal-desc{font-size:16px;line-height:24px;color:var(--saguma-grafito);margin:8px 0 18px;}
.calz-variantes{border:0;margin:0 0 18px;padding:0;min-width:0;}
.calz-variantes .calz-chips{margin:0;padding:2px 0;flex-wrap:wrap;overflow:visible;}
.calz-datos{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 20px;border-top:1.5px solid var(--saguma-arena);}
.calz-datos div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--saguma-arena);}
.calz-datos dt{font-family:var(--font-mono);font-weight:500;font-size:11px;line-height:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--saguma-grafito);}
.calz-datos dd{margin:0;font-size:15px;line-height:22px;color:var(--saguma-azul);}
.calz-cert{margin:0 0 20px;padding:12px 16px;background:var(--saguma-crema);border:1.5px solid var(--saguma-arena);border-radius:var(--radio-medio);font-size:14px;}
.calz-modal-wa{width:100%;justify-content:center;min-height:52px;}
.calz-modal-nota{margin:10px 0 0;font-size:14px;line-height:20px;color:var(--saguma-grafito);text-align:center;}

/* ── Página propia de cada modelo (/calzado/<slug>/) ───────────── */
/* Reusa la ficha ampliada; acá solo va lo que cambia fuera del pop-up. */
.calz-modelo{padding-top:96px;}
@media(min-width:960px){.calz-modelo{padding-top:120px;}}
.calz-modelo-migas{margin:0 0 20px;color:var(--saguma-grafito);}
.calz-modelo-migas a{color:var(--saguma-grafito);}
.calz-modelo-migas a:hover{color:var(--saguma-azul);}
.calz-modelo-migas strong{color:var(--saguma-azul);}
.calz-modelo-grid .calz-galeria{border-radius:var(--radio-grande);}
.calz-modelo-grid .calz-modal-nombre{margin-right:0;}
.calz-modelo-ctas{display:grid;gap:10px;}

/* ── 5. Punteras ───────────────────────────────────────────────── */
.calz-punteras .spec-card{background:var(--saguma-crema);}
.calz-aviso{margin:20px 0 0;padding:14px 18px;max-width:46em;background:var(--saguma-crema);border:1.5px solid var(--saguma-arena);
  border-left:6px solid var(--saguma-azul);border-radius:var(--radio-medio);font-size:16px;line-height:24px;color:var(--saguma-azul);}

/* ── Cierre: CTA a lo ancho en el celular ──────────────────────── */
@media(max-width:600px){.ficha-cierre-ctas .btn{width:100%;justify-content:center;}}
.ficha-hero-ctas .btn svg,.ficha-cierre-ctas .btn svg,.barra-fija-cta svg{flex-shrink:0;}

@media(prefers-reduced-motion:reduce){
  .calz-img,.calz-rubro span,.calz-accion span{transition:none;}
}