/* Las piezas de tienda sobre la maqueta de ZE (etapa 8, D56): cabecera con buscador, menu, tarjetas con precio, listado con filtros,
   ficha, pie y boton de WhatsApp. Sale del boceto aprobado (docs/boceto/tienda.html). Usa los colores y letras de tienda.css. */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.saltar{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:#fff;padding:10px 14px}
.saltar:focus{left:12px;top:12px}
.icono{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #658d20;outline-offset:3px}

/* cabecera y menu */
.cabecera{position:sticky;top:0;z-index:20;gap:28px}
.buscar{flex:1;max-width:560px;display:flex;border:1px solid #7a8278;border-radius:4px;overflow:hidden;background:#fff}
.buscar input{flex:1;min-width:0;border:0;padding:13px 16px;font:inherit;font-size:14px;color:var(--ink);background:transparent}
.buscar input:focus-visible{outline:0}
.buscar:focus-within{outline:3px solid #658d20;outline-offset:2px}
.buscar button{border:0;background:var(--ink);color:#fff;padding:0 16px;display:grid;place-items:center}
.ingresar{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;white-space:nowrap}
.cabecera .nav-cta{display:inline-flex;align-items:center;gap:10px;border:0;white-space:nowrap}
.menu{display:flex;gap:34px;padding:0 5%;border-bottom:1px solid #e7e9e6;font-size:14px;font-weight:600;overflow-x:auto;white-space:nowrap;background:#fff}
.menu a{padding:15px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{border-color:var(--ink)}

/* inicio */
.category small{font-weight:800;letter-spacing:.5px}
.otras{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px;font-size:13px}
.otras>span{font-weight:800;margin-right:4px}
.otras a{border:1px solid #c9d0c3;border-radius:4px;padding:8px 12px;font-weight:600}
.otras a:hover{border-color:var(--ink)}

/* tarjetas */
.grilla{display:grid;gap:24px}
.grilla.cuatro{grid-template-columns:repeat(4,1fr)}
.grilla.tres{grid-template-columns:repeat(3,1fr)}
.tarjeta{display:flex;flex-direction:column;min-width:0}
.tarjeta>small{display:block;font-size:10px;letter-spacing:1.2px;color:#68735d;margin:18px 0 8px;font-weight:700;text-transform:uppercase}
.tarjeta h3{font-size:16px;line-height:1.35;margin:0 0 6px;font-weight:700;overflow-wrap:anywhere}
.tarjeta h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.colores{font-size:12px;color:#5f6b57;margin:0 0 6px}
.precio-tarjeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:auto 0 14px}
.precio-tarjeta strong{font-family:'Roboto Condensed',Arial,sans-serif;font-size:27px;font-weight:800;letter-spacing:-.5px}
.precio-tarjeta s{font-size:13px;color:#5f6860}
.rebaja{font-size:11px;font-weight:800;background:var(--green);padding:3px 7px;border-radius:2px;letter-spacing:.3px}
.agregar{display:block;text-align:center;border:1px solid var(--ink);background:#fff;border-radius:4px;padding:12px;font-size:13px;font-weight:800}
.agregar:hover{background:var(--ink);color:#fff}
.agregar:disabled{border-color:#d3d8cf;color:#5f6860;background:#eef1eb;cursor:not-allowed}
.agregar.en-pedido{background:var(--green);border-color:var(--green);color:var(--ink)}
.photo.foto-pendiente{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#f3f5f1;color:#8a9586}
.photo.foto-pendiente .dibujo{width:76px;height:76px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.photo.foto-pendiente span{color:var(--ink)}
.estado-catalogo{font-size:14px;color:#5f6860}

/* listado */
.listado{padding:28px 5% 70px}
.migas{display:block;font-size:12px;color:#5f6860;margin:0 0 22px;gap:0;font-weight:400}
.migas a:hover{text-decoration:underline}
.listado-cabeza{display:flex;justify-content:space-between;align-items:end;gap:20px;border-bottom:1px solid #e0e6d9;padding-bottom:22px;margin-bottom:28px}
.listado-cabeza .eyebrow{color:#67735d;margin-bottom:10px}
.listado h1{font-size:clamp(38px,4.5vw,60px);letter-spacing:-1px;line-height:1;margin:0;overflow-wrap:anywhere}
.cuenta{margin:10px 0 0;font-size:13px;color:#5f6860}
.orden{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}
.orden select,.rango input{font:inherit;font-size:14px;border:1px solid #7a8278;border-radius:4px;padding:11px 12px;background:#fff;color:var(--ink)}
.filtros-movil{display:none;border:1px solid var(--ink);background:#fff;border-radius:4px;padding:11px 14px;font-weight:800}
.listado-cuerpo{display:grid;grid-template-columns:240px 1fr;gap:44px}
.lateral h2{font-family:Manrope,sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 12px;font-weight:800}
.lateral ul{list-style:none;margin:0 0 30px;padding:0}
.lateral li a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;border-bottom:1px solid #eef1eb}
.lateral li a span{color:#5f6860;font-size:12px}
.lateral li a[aria-current]{font-weight:800;box-shadow:inset 3px 0 0 var(--green);padding-left:10px}
.rango{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.rango label{font-size:12px;font-weight:700;display:grid;gap:6px}
.rango input{width:100%}
.tilde{display:flex;gap:8px;align-items:center;margin-top:24px;font-size:14px;font-weight:600}
.tilde input{width:18px;height:18px;accent-color:#111514}
.vacio{padding:40px 0;display:grid;gap:14px;justify-items:start}
.paginas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:44px;font-size:14px;font-weight:700}
.paginas a,.paginas span{min-width:42px;height:42px;display:grid;place-items:center;border:1px solid #c9d0c3;border-radius:4px;padding:0 12px}
.paginas span{border:0}
.paginas a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ficha */
.ficha{padding:28px 5% 60px}
.ficha-cuerpo{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.galeria .hero-product{margin:0}
.ficha-foto>img{width:100%;height:480px;object-fit:contain;mix-blend-mode:multiply;padding:0 20px 20px}
.foto-ficha-pendiente{height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#8a9586;font-size:12px;letter-spacing:.5px}
.foto-ficha-pendiente .dibujo{width:110px;height:110px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.compra{padding-top:8px;min-width:0}
.compra .eyebrow{color:#67735d;margin-bottom:14px}
.compra h1{font-size:clamp(34px,3.6vw,50px);letter-spacing:-1px;line-height:1.02;margin:0 0 18px;overflow-wrap:anywhere}
.precio-ficha{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 20px}
.precio-ficha strong{font-family:'Roboto Condensed',Arial,sans-serif;font-size:44px;font-weight:800;letter-spacing:-.5px}
.precio-ficha s{font-size:15px;color:#5f6860}
.elegir{border:0;padding:0;margin:8px 0 24px}
.elegir legend{font-size:14px;margin-bottom:12px;padding:0}
.variantes{display:flex;flex-wrap:wrap;gap:8px}
.variante{min-width:76px;padding:11px 14px;border:1px solid #aeb7a7;border-radius:4px;background:#fff;font-size:13px;font-weight:700}
.variante:hover{border-color:var(--ink)}
.variante[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:inset 0 -4px 0 var(--green)}
.variante:disabled{color:#8a9586;border-color:#dfe4db;cursor:not-allowed;background:linear-gradient(to top right,transparent calc(50% - 1px),#c3cabf,transparent calc(50% + 1px))}
.nota{font-size:13px;color:#5f6860;margin:10px 0 0}
.sumar{display:flex;gap:12px;margin-bottom:8px}
.sumar .button{flex:1;border:0}
.cantidad{display:inline-flex;border:1px solid #7a8278;border-radius:4px;overflow:hidden;flex:none}
.cantidad button{border:0;background:#fff;width:46px;display:grid;place-items:center;font-size:20px;font-weight:700}
.cantidad button:hover{background:#eef1eb}
.cantidad input{width:52px;border:0;text-align:center;font:inherit;font-weight:800;font-size:16px;color:var(--ink)}
#aviso-ficha{min-height:20px;margin-bottom:18px}
.datos-compra{list-style:none;padding:0;margin:0 0 24px;border-top:1px solid #e0e6d9}
.datos-compra li{padding:14px 0;border-bottom:1px solid #e0e6d9;font-size:14px;color:#4c5550}
.datos-compra b{color:var(--ink)}
.descripcion{margin:0 0 24px}
.descripcion h2{font-family:Manrope,sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 8px;font-weight:800}
.descripcion p{font-size:15px;line-height:1.7;color:#3d4540;margin:0;white-space:pre-line}
.text-link.dark{border-color:var(--ink)}

/* compra en pasos (R97) */
.pasos-pedido{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 18px;padding:4px 0 12px;font-size:12px;font-weight:700;color:#5f6860;border-bottom:1px solid #e0e6d9}
.pasos-pedido [aria-current]{color:var(--ink);box-shadow:0 2px 0 var(--green)}
[data-paso] h3:focus{outline:0}

/* paginas de ayuda (R101) */
.ayuda{padding:36px 5% 70px;max-width:900px}
.ayuda h1{font-size:clamp(40px,5vw,64px);letter-spacing:-1px;line-height:1;margin:0 0 16px}
.ayuda .eyebrow{color:#67735d;margin-bottom:12px}
.intro-ayuda{font-size:17px;line-height:1.7;color:#4c5550;margin:0 0 36px;max-width:640px}
.pasos-ayuda{list-style:none;margin:0 0 40px;padding:0}
.pasos-ayuda li{display:flex;gap:24px;border-bottom:1px solid #e0e6d9;padding:22px 0}
.pasos-ayuda li>span{font-family:'Roboto Condensed',Arial,sans-serif;font-size:24px;color:#6d8155}
.pasos-ayuda h2{font-family:Manrope,sans-serif;font-size:18px;margin:0 0 6px;font-weight:800;letter-spacing:0}
.pasos-ayuda p{margin:0;font-size:15px;line-height:1.7;color:#4c5550}
.caja-ayuda{background:#f5f7f3;border:1px solid #e0e6d9;border-radius:4px;padding:24px;margin:0 0 28px}
.caja-ayuda h2{font-family:Manrope,sans-serif;font-size:18px;font-weight:800;margin:0 0 8px;letter-spacing:0}
.caja-ayuda p{font-size:15px;line-height:1.7;color:#4c5550;margin:0 0 16px}
.preguntas{border-top:1px solid #e0e6d9;margin:0 0 32px}
.preguntas details{border-bottom:1px solid #e0e6d9}
.preguntas summary{cursor:pointer;padding:18px 0;font-size:16px;font-weight:800}
.preguntas details p{margin:0 0 18px;font-size:15px;line-height:1.7;color:#4c5550}
.preguntas a,.mas-ayuda a,.datos-contacto a{text-decoration:underline;text-underline-offset:4px}
.mas-ayuda{font-size:15px;color:#4c5550}
.datos-contacto{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid #e0e6d9}
.datos-contacto li{display:flex;gap:18px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid #e0e6d9;font-size:16px;font-weight:700}
.datos-contacto li>span{width:90px;color:#5f6860;font-weight:600}
.pendiente-contacto{background:#fff7d6;border:1px solid #e9d27a;border-radius:4px;padding:14px 16px;font-size:14px;line-height:1.6}

/* pie */
.pie{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding:56px 5% 22px;border-top:1px solid #e0e6d9;align-items:start}
.pie h2{font-family:Manrope,sans-serif;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:0 0 14px;font-weight:800}
.pie div>a{display:block;font-size:13px;padding:5px 0;color:#4c5550}
.pie div>a:hover{color:var(--ink);text-decoration:underline}
.pie p{font-size:13px;color:#5f6860;margin:0 0 8px;line-height:1.6}
.pie-marca p{margin-top:14px}
.pie .legales{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;font-weight:600;border-top:1px solid #e0e6d9;padding-top:20px}
.pie .footer-bottom{grid-column:1/-1;margin-top:0;align-items:center}
.sello{display:flex;align-items:center;gap:9px;margin:0;font-size:12px;color:#5f6860}
.sello strong{color:#4f7d12;font-weight:700}
.sello-marca{width:20px;height:22px;flex-shrink:0}
.flotante{position:fixed;right:22px;bottom:22px;z-index:40;width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--green);display:grid;place-items:center;box-shadow:0 0 0 3px var(--green)}
.flotante .icono{width:28px;height:28px}

@media(max-width:1000px){
  .grilla.cuatro,.grilla.tres{grid-template-columns:repeat(2,1fr)}
  .listado-cuerpo{grid-template-columns:200px 1fr;gap:28px}
  .cabecera{gap:16px}
  .ingresar span{display:none}
  .pie{grid-template-columns:1fr 1fr}
  .ficha-cuerpo{gap:32px}
}
@media(max-width:700px){
  .topbar span+span{display:none}
  .cabecera{flex-wrap:wrap;gap:12px}
  .cabecera .brand{margin-right:auto}
  .buscar{order:3;flex-basis:100%;max-width:none}
  .cabecera .nav-cta>span:not(.contador){display:none}
  .cabecera .nav-cta{padding:12px}
  .menu{gap:22px}
  .grilla{gap:26px 14px}
  .tarjeta h3{font-size:14px}
  .precio-tarjeta strong{font-size:22px}
  .listado-cabeza{flex-direction:column;align-items:start}
  .orden{width:100%}
  .orden label{display:none}
  .orden select{flex:1;min-width:0}
  .filtros-movil{display:block}
  .listado-cuerpo{grid-template-columns:1fr}
  .lateral{display:none;border:1px solid #e0e6d9;border-radius:4px;padding:16px}
  .lateral.abierta{display:block}
  .pie{grid-template-columns:1fr}
  .pie .footer-bottom{flex-direction:column;align-items:start;gap:12px}
  .flotante{right:16px;bottom:16px}
  .ficha-cuerpo{grid-template-columns:1fr;gap:28px}
  .ficha-foto>img,.foto-ficha-pendiente{height:320px}
  .precio-ficha strong{font-size:36px}
  .sumar{flex-direction:column}
  .sumar .cantidad{align-self:start;height:50px}
}