/* Nagu Shoes · dirección B (Fredy, 14-oct-2026)
   Público: almacenistas de 65 a 80 años, casi siempre en el celular.
   Letra base 20 px, escala 1,25. Botones de 56 px con texto. Sin precios en ninguna parte. */

@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url(/fuentes/atkinson-hyperlegible-next-latin.woff2) format("woff2");
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  --tinta:#111111; --gris:#4A4A4A; --gris2:#6B6B6B; --linea:#D9D6CF;
  --azul:#000979; --azul-osc:#00065A; --rey:#1B3FC2; --celeste:#A8C6EE; --celeste-claro:#E2EDFB;
  --fondo:#FFFFFF; --fondo2:#E2EDFB;
  --cta:var(--rey);
  --f-texto:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo); font-family:var(--f-texto); color:var(--tinta); font-size:20px; line-height:1.55;
  -webkit-text-size-adjust:100%; text-size-adjust:100%}
img{max-width:100%}

a{color:var(--azul)}
h1,h2,h3{font-family:var(--f-texto); font-weight:800; color:var(--azul); margin:0; text-wrap:balance; line-height:1.15}
h1{font-size:48px} h2{font-size:38px} h3{font-size:24px}
p{margin:0 0 .8em; max-width:34em; text-wrap:pretty}
.envol{max-width:1180px; margin:0 auto; padding:0 32px}
.seccion{padding:72px 0}
.seccion.alt{background:var(--fondo2)}
.rotulo{font-size:16px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); margin-bottom:10px}
.cabeza{margin-bottom:36px} .cabeza p{color:var(--gris); font-size:22px; margin-top:12px}
.saltar{position:absolute; left:-9999px; top:0; background:#fff; padding:12px 16px; z-index:20}
.saltar:focus{left:12px; top:12px}

/* Botones: 56 px, texto siempre */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 26px;
  font:700 20px/1.2 var(--f-texto); border-radius:10px; text-decoration:none; cursor:pointer; border:2px solid transparent; text-align:center}
.btn-wa{background:var(--cta); color:#fff}
.btn-wa:hover{filter:brightness(1.15)}
.btn-borde{background:transparent; color:var(--tinta); border-color:var(--tinta)}
.btn-borde:hover{background:var(--tinta); color:#fff}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:4px solid #F2B705; outline-offset:3px}
.fila-btn{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}

/* Marcador de foto (hasta que llegue la sesión de fotos) */
.foto{background:repeating-linear-gradient(135deg,#E4E1DA 0 14px,#EDEAE4 14px 28px); border:2px dashed #A9A49A;
  display:flex; align-items:center; justify-content:center; text-align:center; color:#5C574E;
  font:600 14px/1.35 ui-monospace, Consolas, monospace; padding:14px; border-radius:8px; min-height:120px; position:relative}
.foto::before{content:""; position:absolute; inset:22% 14%; background:url(/img/logo-nagu.webp) no-repeat center/contain; opacity:.09; pointer-events:none}
img.foto-real{display:block; width:100%; height:100%; object-fit:cover; border-radius:8px; background:#EDEAE4}

/* Pantalla de carga: el logo mientras bajan las fotos (una vez por visita) */
#cargando{position:fixed; inset:0; z-index:100; background:#fff; display:flex; align-items:center; justify-content:center; transition:opacity .45s}
#cargando[hidden]{display:none}
#cargando img{width:min(300px,62vw); height:auto; animation:latir 1.3s ease-in-out infinite}
#cargando.fuera{opacity:0; pointer-events:none}
@keyframes latir{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){ #cargando img{animation:none} #cargando{transition:none} }

/* Encabezado */
header.top{background:#fff; border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:5}
.top .envol{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; position:relative}
.logo img{height:64px; width:auto; display:block}
nav.menu{display:flex; gap:4px}
nav.menu a{color:var(--tinta); text-decoration:none; font-weight:700; padding:12px 14px; white-space:nowrap; border-radius:8px; font-size:19px}
nav.menu a[aria-current="page"]{color:var(--azul); box-shadow:inset 0 -3px 0 var(--azul); border-radius:0}
nav.menu a:hover{background:var(--fondo2)}
.top .btn-wa{min-height:48px; font-size:18px; padding:0 18px; white-space:nowrap}
.boton-menu{display:none}
@media (max-width:1120px){ .top .btn-wa .num{display:none} nav.menu a{padding:12px 10px} }

/* Héroe */
.hero{padding:64px 0 72px; position:relative; overflow:hidden; background:var(--celeste-claro)}
.hero::before{content:""; position:absolute; right:-60px; bottom:-40px; width:620px; height:215px; background:url(/img/logo-nagu.webp) no-repeat center/contain; opacity:.07; pointer-events:none}
.hero .envol{position:relative}
.hero .rejilla{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero h1{font-size:54px}
.hero .baja{font-size:23px; color:var(--gris); margin-top:20px}
.hero .foto{min-height:440px}
.dos-caminos{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; max-width:600px}
.dos-caminos .btn{min-height:72px; flex-direction:column; gap:2px; font-size:21px}
.dos-caminos small{font-weight:400; font-size:16px}

/* Pruebas de confianza */
.cifras{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:3px solid var(--tinta)}
.cifras div{padding:22px 20px 6px 0}
.cifras b{display:block; font-size:30px; color:var(--azul); line-height:1.1}
.cifras span{font-size:18px; color:var(--gris)}

.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:paso}
.paso{border-top:3px solid var(--tinta); padding-top:18px}
.paso::before{counter-increment:paso; content:counter(paso); display:block; font:800 48px/1 var(--f-texto); color:var(--azul); margin-bottom:10px}
.paso h3{color:var(--tinta)}
.paso p{margin-top:8px; color:var(--gris)}

.lineas{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.linea-card{text-decoration:none; color:var(--tinta); display:block}
.linea-card .foto{min-height:240px; margin-bottom:14px}
.linea-card h3{display:flex; justify-content:space-between; align-items:baseline}
.linea-card h3 span{font-size:20px}
.linea-card:hover h3{text-decoration:underline}

.video{position:relative; aspect-ratio:16/9; background:#1A1A1A; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#ddd; font:600 15px/1.4 ui-monospace,Consolas,monospace; text-align:center; padding:20px}
.video::before{content:""; position:absolute; width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.95); top:50%; left:50%; transform:translate(-50%,-62%)}
.video::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-30%,-90%); border-left:28px solid #111; border-top:17px solid transparent; border-bottom:17px solid transparent}
.video span{position:absolute; bottom:18px; left:20px; right:20px}
.dos-col{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}

.testimonios{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.testimonio{background:#fff; border:1px solid var(--linea); border-radius:10px; padding:26px}
.testimonio p{font-size:20px; color:var(--gris2); font-style:italic}
.testimonio b{display:block; margin-top:14px}

/* Franja detal */
.franja{background:var(--celeste-claro); border-top:1px solid var(--celeste); border-bottom:1px solid var(--celeste)}
.franja .envol{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; padding-bottom:22px; flex-wrap:wrap}
.franja p{margin:0; font-size:21px}

/* Catálogo */
.filtros{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 34px}
.filtros a{min-height:52px; display:inline-flex; align-items:center; padding:0 20px; border:2px solid var(--tinta); border-radius:30px; color:var(--tinta); text-decoration:none; font-weight:700}
.filtros a.activo{background:var(--tinta); color:#fff}
.tarjetas{display:grid; grid-template-columns:repeat(2,1fr); gap:32px}
.ref{background:#fff; border:1px solid var(--linea); border-radius:12px; padding:22px; scroll-margin-top:110px}
.ref:target{outline:4px solid var(--azul)}
.ref .fotos{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:10px; margin-bottom:18px}
.ref .fotos > :first-child{grid-row:1 / span 2; min-height:280px}
.ref .fotos .foto{min-height:130px; font-size:12.5px}
.ref .codigo{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.ref .codigo h3{font-size:30px}
.ref .codigo h3 a{text-decoration:none}
.ref .codigo h3 a:hover{text-decoration:underline}
.ref .codigo span{color:var(--gris); font-size:18px}
.ficha{width:100%; border-collapse:collapse; margin:14px 0 16px; font-size:18px}
.ficha th{text-align:left; font-weight:700; width:34%; padding:9px 10px 9px 0; vertical-align:top}
.ficha td{padding:9px 0}
.ficha tr{border-top:1px solid var(--linea)}
.tallas{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.tallas span{min-width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--tinta); border-radius:6px; font-weight:700; font-size:18px}
.variante{border-top:2px solid var(--tinta); margin-top:16px; padding-top:10px}
.variante > b{display:block; color:var(--azul); font-size:20px}
.variante .ficha{margin:6px 0 4px}
.ref .tallas-fila{margin:16px 0 18px}
.ref .btn{width:100%}
.ref .btn + .btn{margin-top:10px}
.pend-bloque{display:block; margin-top:10px}
.copiar{display:none; text-align:center; margin-top:12px; font-size:17px; color:var(--gris); background:none; border:0; text-decoration:underline; cursor:pointer; font-family:var(--f-texto); width:100%; min-height:44px}
.js .copiar{display:block}

/* Página de una referencia */
.ficha-ref .rejilla{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start}
.ficha-ref .fotos{display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:12px; position:sticky; top:110px}
.ficha-ref .fotos > :first-child{grid-row:1 / span 2; min-height:460px}
.ficha-ref .fotos .foto{min-height:200px}
.ficha-ref .ref{border:0; padding:0}
.otras{display:flex; flex-wrap:wrap; gap:10px}
.otras a{min-height:52px; display:inline-flex; align-items:center; padding:0 20px; border:2px solid var(--tinta); border-radius:30px; color:var(--tinta); text-decoration:none; font-weight:700; background:#fff}
.otras a:hover{background:var(--tinta); color:#fff}

/* Al detal: lo que Fredy dejó para venta al detal, una grilla por línea */
.linea-detal{margin:48px 0 22px; padding-top:18px; border-top:3px solid var(--tinta); scroll-margin-top:110px}
.pares{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media (max-width:1120px){ .pares{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .pares{grid-template-columns:repeat(2,1fr)} }
.par{scroll-margin-top:110px; background:#fff; border:1px solid var(--linea); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:12px}
.par-foto{display:block; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:#EDEAE4}
.par-foto img{height:100%}
.par:target{outline:4px solid var(--azul)}
.par-ref{font-weight:800; color:var(--azul); font-size:24px; line-height:1.1}
.par h3{margin:4px 0 0; font-size:20px; line-height:1.3; color:var(--tinta)}
.par h3 a{color:inherit; text-decoration:none}
.par h3 a:hover{text-decoration:underline}
.par-texto span{display:block; color:var(--gris); font-size:17px; margin-top:4px}
.par .btn{width:100%; margin-top:auto}
.ver-fotos{text-align:center; font-size:17px; color:var(--gris); min-height:44px; display:flex; align-items:center; justify-content:center}

/* Ficha de un par: lado grande y debajo diagonal, atrás y suela */
.galeria{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; position:sticky; top:110px}
.galeria .toma{display:block; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#EDEAE4}
.galeria .toma:first-child{grid-column:1 / -1; aspect-ratio:4/3}
.galeria img{height:100%}
.ficha-par .ref .btn{width:100%}
.ficha-par .ref .btn + .btn{margin-top:10px}

/* Páginas interiores */
.migas{font-size:17px; color:var(--gris); padding-top:28px}
.migas a{color:var(--gris)}
.intro{padding-top:20px}
.intro h1{margin-top:10px}
.intro .respuesta{font-size:23px; margin-top:18px; max-width:32em}
.lista-datos{display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin:0; padding:0; list-style:none}
.lista-datos.una{grid-template-columns:1fr; margin-top:20px}
.lista-datos li{border-top:1px solid var(--linea); padding:16px 0}
.lista-datos b{display:block; color:var(--azul); font-size:22px}
.pend{background:#FFF4CC; border-bottom:2px solid #E0B400; padding:0 4px; font-size:.92em}
.zonas{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.zona{border-top:3px solid var(--tinta); padding-top:16px}
.zona p{color:var(--gris)}
.ciudades{columns:2; column-gap:40px; padding:0; list-style:none}
.ciudades li{break-inside:avoid; padding:14px 0; border-top:1px solid var(--linea); display:block}
.fotos-taller{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.angosto{max-width:900px}

/* Preguntas */
details{border-top:1px solid var(--linea); padding:6px 0}
details:last-child{border-bottom:1px solid var(--linea)}
summary{cursor:pointer; font-weight:700; font-size:21px; padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-size:30px; line-height:1; color:var(--azul)}
details[open] summary::after{content:"−"}
details p{color:var(--gris)}

/* Pie */
footer.pie{background:#111; color:#E6E6E6; padding:56px 0 120px; font-size:18px}
.pie .rejilla{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.pie h2{color:#fff; font-size:20px; margin-bottom:12px}
.pie a{color:#E6E6E6}
.pie ul{list-style:none; padding:0; margin:0} .pie li{padding:5px 0}
.pie .logo-pie{background:#fff; display:inline-block; padding:12px 16px; border-radius:8px; margin-bottom:16px}
.pie .logo-pie img{height:40px; width:auto; display:block}

/* Barra fija del celular */
.barra-cel{display:none}

/* ===== Celular ===== */
@media (max-width:760px){
  .envol{padding:0 20px}
  h1,.hero h1{font-size:36px} h2{font-size:30px} h3{font-size:23px}
  .seccion{padding:52px 0}
  nav.menu{display:none} .top .btn-wa{display:none}
  .boton-menu{display:inline-flex; min-height:52px; padding:0 16px; border:2px solid var(--tinta); border-radius:10px; background:#fff; color:var(--tinta); font:700 19px var(--f-texto); align-items:center; cursor:pointer; text-decoration:none}
  .top .envol{min-height:76px}
  .logo img{height:48px}
  .menu-abierto nav.menu{display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:2px solid var(--tinta); padding:8px 12px 16px}
  .menu-abierto nav.menu a{padding:16px 10px; font-size:22px; border-bottom:1px solid var(--linea)}
  .hero{padding:32px 0 48px}
  .hero::before{width:420px; height:146px; right:-80px}
  .hero .rejilla{grid-template-columns:1fr; gap:26px}
  .hero .foto{min-height:240px; order:-1}
  .hero .baja{font-size:21px}
  .dos-caminos{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr 1fr}
  .pasos,.lineas,.testimonios,.tarjetas,.zonas,.dos-col,.pie .rejilla,.ficha-ref .rejilla{grid-template-columns:1fr}
  .lista-datos{grid-template-columns:1fr}
  .ciudades{columns:1}
  .ref{padding:16px}
  .ref .fotos > :first-child{min-height:220px}
  .ficha-ref .fotos{position:static}
  .ficha-ref .fotos > :first-child{min-height:260px}
  .ficha-ref .fotos .foto{min-height:124px}
  .pares{grid-template-columns:1fr}
  .galeria{position:static}
  .barra-cel{display:grid; grid-template-columns:1fr auto; gap:10px; position:sticky; bottom:0; z-index:6; background:#fff; border-top:2px solid var(--tinta); padding:10px 12px}
  .barra-cel .btn{min-height:56px; font-size:19px; padding:0 14px}
}

/* Por mayor: todos los colores de una referencia (con foto los que Fredy mandó el 15-oct) */
.colores-fila{margin:16px 0 4px}
.colores{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px}
.colores li{display:flex; align-items:center; gap:12px; border-top:1px solid var(--linea); padding-top:8px; font-size:18px; line-height:1.3}
.colores small{display:block; color:var(--gris); font-size:15px}
.color-foto{flex:0 0 72px; height:54px; border-radius:6px; overflow:hidden; background:#EDEAE4}
.color-foto img{height:100%}
.colores.grande .color-foto{flex-basis:120px; height:90px}
.linea-foto{display:block; aspect-ratio:4/3; border-radius:8px; overflow:hidden; margin-bottom:14px; background:#EDEAE4}
.linea-foto img{height:100%}

/* Con fotos reales: la toma de lado entera arriba y debajo el frente y la suela */
.ref .fotos.reales,.ficha-ref .fotos.reales{grid-template-columns:1fr 1fr; grid-template-rows:auto}
.ref .fotos.reales > :first-child,.ficha-ref .fotos.reales > :first-child{grid-column:1 / -1; grid-row:auto; min-height:0; aspect-ratio:4/3}
.fotos.reales > img:not(:first-child){aspect-ratio:1/1}

/* Foto real en hero, mapa y firma del pie */
.foto-hero img.foto-real{height:auto; aspect-ratio:1/1; object-fit:contain; background:#fff}
iframe.mapa{width:100%; min-height:420px; border:0; border-radius:10px}
.pie .firma{margin-top:36px; padding-top:18px; border-top:1px solid #333; font-size:15px; color:#9A9A9A}
.pie .firma a{color:#E6E6E6}
.sin-foto{grid-column:1/-1; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; background:#F4F2EE; border-radius:8px; padding:24px}
.sin-foto p{margin:0; color:var(--gris)}