/* =========================================================
   Comercial La Roca — hoja de estilos
   Mismos colores que la tienda en línea: verde La Roca,
   amarillo de acento y verde muy oscuro en el pie.
   ========================================================= */

:root{
  --papel:#f4faf7;   /* blanco con un toque del verde del logo */
  --blanco:#ffffff;
  --tinta:#17191a;
  --tinta-suave:#4a5750;
  --linea:#e4e6e0;
  --linea-fuerte:#cbd1c8;
  /* Todos los verdes salen del verde del logo (#00a95a), en distintas intensidades */
  --verde:#00a95a;
  --verde-hondo:#005a34;
  --verde-claro:#def4e8;
  --acento:#f5c518;
  --oscuro:#00301d;
  --oscuro-texto:#cdeadb;
  --pie:#001f13;

  /* Colores de las categorías: (suave, tinta) */
  --ambar-s:#faeed6;   --ambar-t:#8f6208;
  --verde-s:#dbf5e6;   --verde-t:#127b3d;
  --trigo-s:#f2e9de;   --trigo-t:#856135;
  --azul-s:#d8e7f8;    --azul-t:#1564be;
  --morado-s:#eadaf6;  --morado-t:#8838c2;
  --turquesa-s:#daf6f5;--turquesa-t:#0a7875;

  --ancho:1200px;
  --radio:16px;
  --sombra:0 1px 2px rgba(18,40,28,.06), 0 12px 30px -14px rgba(18,40,28,.28);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:60px}
body{
  margin:0;color:var(--tinta);background:var(--papel);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--verde-hondo)}
h1,h2,h3{line-height:1.15;letter-spacing:-.015em}

.contenedor{width:min(100% - 32px,var(--ancho));margin-inline:auto}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.salto{position:absolute;left:-9999px;top:0;z-index:200;background:var(--acento);color:var(--tinta);padding:12px 20px;font-weight:700}
.salto:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--verde);outline-offset:2px;border-radius:6px}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border:2px solid transparent;border-radius:999px;
  font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease;
}
.boton:hover{transform:translateY(-2px)}
.boton--acento{background:var(--acento);color:var(--tinta)}
.boton--acento:hover{background:#ffd43b}
.boton--verde{background:var(--verde-hondo);color:var(--blanco)}
.boton--verde:hover{background:#004a2b}
.boton--borde{border-color:var(--verde-hondo);color:var(--verde-hondo);background:transparent}
.boton--borde:hover{background:var(--verde-claro)}
.boton--linea{border-color:rgba(255,255,255,.55);color:var(--blanco);background:transparent}
.boton--linea:hover{background:rgba(255,255,255,.12)}

/* ---------- Encabezado: piso 1 (contacto y zona) ---------- */
.superior{background:var(--oscuro);color:var(--oscuro-texto);font-size:.85rem}
.superior__fila{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px}
.superior__datos{display:flex;align-items:center;gap:22px;min-width:0}
.dato{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;white-space:nowrap}
a.dato{font-weight:700}
a.dato:hover{text-decoration:underline}
.superior__zona{display:flex;align-items:center;gap:8px}
.superior__zona select{
  font:inherit;font-weight:700;color:var(--blanco);background:transparent;
  border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:3px 6px;cursor:pointer;
}
.superior__zona option{color:var(--tinta)}

/* ---------- Encabezado: piso 2 (logo, buscador, WhatsApp) ---------- */
.principal{background:var(--blanco)}
.principal__fila{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"marca buscador whatsapp";
  align-items:center;gap:12px 28px;padding-block:14px;
}
.marca{grid-area:marca}
.marca img{height:46px;width:auto}
.buscador{
  grid-area:buscador;display:flex;align-items:stretch;width:100%;max-width:640px;justify-self:center;
  border:2px solid var(--verde-hondo);border-radius:10px;overflow:hidden;background:var(--blanco);
}
.buscador:focus-within{outline:2px solid var(--verde);outline-offset:2px}
.buscador input{flex:1;min-width:0;border:0;padding:11px 14px;font:inherit;color:var(--tinta);background:transparent;outline:none}
.buscador button{
  display:inline-flex;align-items:center;gap:6px;border:0;padding:0 20px;
  background:var(--acento);color:var(--tinta);font:inherit;font-weight:700;cursor:pointer;
}
.buscador--chico{max-width:320px;margin:0;border-width:1.5px;border-color:var(--linea-fuerte);align-items:center;padding-left:12px;color:var(--tinta-suave)}
.buscador--chico input{padding:9px 12px 9px 8px}
.whatsapp{grid-area:whatsapp;display:flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none}
.whatsapp__burbuja{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--verde-hondo);color:var(--blanco);font-size:1.2rem}
.whatsapp__textos{display:flex;flex-direction:column;line-height:1.2}
.whatsapp__textos small{color:var(--tinta-suave);font-size:.78rem}

/* ---------- Encabezado: piso 3 (barra verde fija) ---------- */
.navegacion{position:sticky;top:0;z-index:50;background:var(--verde-hondo);color:var(--blanco)}
.navegacion__fila{display:flex;min-height:48px;overflow-x:auto;scrollbar-width:none}
.navegacion a{
  display:inline-flex;align-items:center;padding:0 18px;white-space:nowrap;
  color:inherit;font-weight:700;text-decoration:none;border-bottom:3px solid transparent;
}
.navegacion a:hover{background:rgba(255,255,255,.14)}
.navegacion a.activo{border-bottom-color:var(--acento)}
.navegacion a:focus-visible{outline:3px solid var(--blanco);outline-offset:-3px}
/* Facebook e Instagram, al final de la barra */
.navegacion__redes{margin-left:auto;display:flex;align-items:center;gap:6px;padding-left:12px}
.navegacion .navegacion__redes a{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%;border-bottom:0;font-size:1.1rem;background:rgba(255,255,255,.1)}
.navegacion .navegacion__redes a:hover{background:var(--verde)}

/* ---------- Secciones ---------- */
.seccion{padding:64px 0}
.seccion--corta{padding:44px 0 20px}
.seccion--suave{background:var(--blanco);border-block:1px solid var(--linea)}
.titulo{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin:0 0 6px}
.bajada{margin:0 0 28px;color:var(--tinta-suave);max-width:60ch}
.cabeza{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:18px}
.cabeza .titulo{margin:0}

/* ---------- Portada ---------- */
.portada{padding:0 0 8px}
/* A todo lo ancho, mismo verde que la barra de navegación; la foto se funde con él por la máscara */
.portada__banner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch;
  min-height:clamp(420px,40vw,600px);color:var(--blanco);overflow:hidden;
  /* brillos suaves (amarillo y verde del logo) + cuadrícula de líneas finas sobre el verde */
  background:
    radial-gradient(520px 380px at 32% 18%, rgba(245,197,24,.14), transparent 70%),
    radial-gradient(560px 420px at 4% 96%, rgba(0,169,90,.38), transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--verde-hondo);
}
/* el texto arranca alineado con el resto del contenido (contenedor de 1200px) */
.portada__texto{align-self:center;padding:48px 32px 96px max(16px,calc((100vw - 1200px) / 2));position:relative;z-index:1}
.portada__logo{display:inline-block;background:var(--blanco);border-radius:12px;padding:8px 14px;margin-bottom:22px}
.portada__logo img{height:44px;width:auto}
.portada h1{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:800;line-height:1.05;margin:0 0 14px}
.portada h1 em{font-style:normal;color:var(--acento)}
.portada__texto p{margin:0 0 26px;color:var(--oscuro-texto);font-size:1.1rem}
.portada__boton{padding:14px 26px;font-size:1.05rem}
/* La foto se desvanece hacia la izquierda, sobre el verde */
.portada__foto{
  width:100%;height:100%;object-fit:cover;object-position:left center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%);
}

/* Una sola barra blanca que se monta sobre el borde de la portada */
.cifras{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin:-56px 0 0;padding:0;
  background:var(--blanco);border-radius:18px;box-shadow:0 18px 40px -18px rgba(0,48,29,.35);overflow:hidden;
}
.cifras > div{display:flex;flex-direction:column-reverse;padding:22px 26px;border-left:1px solid var(--linea);border-top:3px solid var(--verde)}
.cifras > div:first-child{border-left:0}
.cifras > div:nth-child(2n){border-top-color:var(--acento)}
.cifras dd{margin:0;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:var(--verde-hondo);line-height:1.1;font-variant-numeric:tabular-nums}
.cifras dt{color:var(--tinta-suave);font-size:.9rem}

/* ---------- Categorías ---------- */
.categorias{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}
.categoria{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px;
  background:var(--s);border:1px solid transparent;border-radius:var(--radio);
  font:inherit;font-weight:800;color:var(--t);cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.categoria:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--t)}
.categoria__icono{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--blanco);color:var(--t);font-size:1.6rem;box-shadow:0 4px 12px -4px rgba(0,0,0,.18)}
.tono-ambar{--s:var(--ambar-s);--t:var(--ambar-t)}
.tono-verde{--s:var(--verde-s);--t:var(--verde-t)}
.tono-trigo{--s:var(--trigo-s);--t:var(--trigo-t)}
.tono-azul{--s:var(--azul-s);--t:var(--azul-t)}
.tono-morado{--s:var(--morado-s);--t:var(--morado-t)}
.tono-turquesa{--s:var(--turquesa-s);--t:var(--turquesa-t)}

/* ---------- Productos ---------- */
.fichas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.ficha{
  flex:none;border:1.5px solid var(--linea-fuerte);background:var(--blanco);color:var(--tinta-suave);
  border-radius:999px;padding:8px 16px;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;
}
.ficha:hover{border-color:var(--verde);color:var(--verde-hondo)}
.ficha--activa,.ficha--activa:hover{background:var(--verde-hondo);border-color:var(--verde-hondo);color:var(--blanco)}
.conteo{margin:16px 0 14px;font-size:.88rem;color:var(--tinta-suave)}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.producto{
  position:relative;display:flex;flex-direction:column;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  animation:aparecer .3s ease both;
}
.producto:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--verde)}
.producto__foto{aspect-ratio:1;padding:14px}
.producto__foto img{width:100%;height:100%;object-fit:contain}
.producto__cuerpo{display:flex;flex-direction:column;gap:4px;flex:1;padding:12px 16px 16px;border-top:1px solid var(--linea)}
.producto__categoria{font-size:.75rem;font-weight:700;color:var(--t)}
.producto__nombre{margin:0;font-size:1rem;font-weight:700;line-height:1.25}
.producto__detalle{margin:0;font-size:.84rem;color:var(--tinta-suave)}
.producto__pedir{
  margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:.88rem;font-weight:700;color:var(--verde-hondo);text-decoration:none;
}
.producto__pedir:hover{text-decoration:underline}
.producto__sello{
  position:absolute;top:10px;left:10px;z-index:1;background:var(--acento);color:var(--tinta);
  font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:6px;
}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}}

.vacio{text-align:center;padding:48px 0;color:var(--tinta-suave)}
.vacio p{margin:0 0 16px}
.ver-todos{text-align:center;margin-top:28px}

/* ---------- Sucursales ---------- */
.sucursales{display:grid;gap:20px}
.sucursales__mapa{margin:0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.sucursales__mapa img{width:100%;height:auto}
.sucursales__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sucursal{
  display:flex;flex-direction:column;gap:6px;padding:18px 20px;
  background:var(--papel);border:1px solid var(--linea);border-radius:14px;
}
.sucursal--principal{grid-column:1/-1;background:var(--verde-claro);border-color:#b5e3cb}
.sucursal__rotulo{font-size:.75rem;font-weight:800;color:var(--verde-hondo);text-transform:uppercase;letter-spacing:.08em}
.sucursal h3{margin:0;font-size:1.15rem}
.sucursal p{margin:0;display:flex;gap:8px;align-items:center;color:var(--tinta-suave);font-size:.92rem}
.sucursal p .ico{color:var(--verde)}
.sucursal__ir{margin-top:4px;display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:.9rem;text-decoration:none}
.sucursal__ir:hover{text-decoration:underline}

/* ---------- Proveedores ---------- */
.marquesina{overflow:hidden;padding:6px 0 24px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* padding-right = gap, así la lista duplicada mide justo el doble y el -50% no da salto */
.proveedores{list-style:none;margin:0;padding:0 12px 0 0;display:flex;gap:12px;width:max-content;animation:deslizar 45s linear infinite}
.marquesina:hover .proveedores{animation-play-state:paused}
@keyframes deslizar{to{transform:translateX(-50%)}}
.proveedor{
  flex:none;width:210px;display:grid;place-items:center;height:110px;padding:14px 18px;text-align:center;
  background:var(--blanco);border:1px solid var(--linea);border-radius:14px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.proveedor:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--verde)}
/* multiply funde el fondo blanco o gris de cada logo con la tarjeta */
.proveedor img{max-height:76px;max-width:75%;width:auto;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.04)}
/* logos con mucho margen blanco alrededor: se agrandan para igualar a los demás */
.proveedor--holgado{overflow:hidden}
.proveedor--holgado img{transform:scale(1.3)}
.proveedor--nombre{font-weight:800;font-size:1.2rem;line-height:1.2;color:var(--verde-hondo)}

/* ---------- Franja del catálogo ---------- */
#catalogo{padding:24px 0}
.franja-catalogo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  background:var(--verde-hondo);color:var(--blanco);border-radius:var(--radio);padding:26px clamp(20px,4vw,40px);
}
.franja-catalogo h2{margin:0 0 4px;font-size:1.4rem}
.franja-catalogo p{margin:0;color:var(--oscuro-texto)}
.franja-catalogo__botones{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Nosotros ---------- */
.nosotros{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
.nosotros__foto{margin:0}
.nosotros__foto img{width:100%;border-radius:var(--radio);aspect-ratio:4/3;object-fit:cover}
.mv{margin:0 0 20px;display:grid;gap:12px}
.mv > div{border-left:3px solid var(--verde);padding-left:14px}
.mv > div:nth-child(2){border-left-color:var(--acento)}
.mv dt{font-weight:800}
.mv dd{margin:0;color:var(--tinta-suave);font-size:.95rem}
.historia{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:4px 18px}
.historia summary{padding:12px 0;font-weight:800;cursor:pointer;color:var(--verde-hondo)}
.linea-tiempo{list-style:none;margin:4px 0 16px;padding:0 0 0 18px;border-left:2px solid var(--linea)}
.linea-tiempo li{position:relative;padding:0 0 14px 6px;color:var(--tinta-suave);font-size:.94rem}
.linea-tiempo li::before{content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--blanco);border:3px solid var(--verde)}
.linea-tiempo b{color:var(--verde-hondo);margin-right:6px}

/* ---------- Contacto ---------- */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.datos{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.datos li{display:flex;align-items:center;gap:10px;font-weight:700}
.datos .ico{color:var(--verde);font-size:1.2rem}
.formulario{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:24px;
}
.formulario label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:700}
.formulario input,.formulario select,.formulario textarea{
  font:inherit;font-weight:400;padding:10px 12px;border:1.5px solid var(--linea-fuerte);border-radius:10px;background:var(--blanco);color:var(--tinta);
}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{outline:2px solid var(--verde);outline-offset:1px;border-color:var(--verde)}
.formulario__ancho{grid-column:1/-1}
.formulario__nota{margin:0;font-size:.82rem;color:var(--tinta-suave)}

/* ---------- Pie: una sola franja, sencilla ---------- */
.pie{background:var(--pie);color:var(--oscuro-texto)}
.pie__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;padding-block:18px}
.pie p{margin:0;font-size:.95rem}
.pie strong{color:var(--blanco)}
.pie__redes{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.pie__redes a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--blanco);font-size:1.15rem;transition:background-color .15s ease}
.pie__redes a:hover{background:var(--verde)}
.pie__redes a:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante{
  position:fixed;right:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:12px;
  padding:10px 22px 10px 14px;border-radius:999px;background:var(--verde-hondo);color:var(--blanco);text-decoration:none;
  border:2px solid rgba(255,255,255,.7); /* se distingue aunque pase sobre la portada verde */
  box-shadow:0 8px 24px rgba(0,48,29,.35);transition:transform .15s ease, background-color .15s ease;
}
.wa-flotante:hover{transform:translateY(-2px);background:#004a2b}
.wa-flotante .ico{font-size:1.7rem}
.wa-flotante__texto{display:flex;flex-direction:column;line-height:1.15}
.wa-flotante__texto strong{font-size:1.05rem}
.wa-flotante__texto small{font-size:.8rem;color:var(--oscuro-texto)}
.wa-flotante:focus-visible{outline:3px solid var(--acento);outline-offset:3px}

/* =========================================================
   Visor tipo libro (solo a pantalla completa)
   ========================================================= */
.libro:not(.libro--completo){display:none}
.libro--completo{position:fixed;inset:0;z-index:150;background:var(--oscuro);overflow:hidden}

.libro__escena{position:absolute;inset:0 0 62px;perspective:2400px}
.libro__hoja{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(calc(100vw - 120px), calc((100vh - 84px) * 1500 / 1815));
  aspect-ratio:1500/1815;background:var(--blanco);border-radius:4px 8px 8px 4px;
  box-shadow:0 26px 60px rgba(0,0,0,.4);transform-style:preserve-3d;
}
.libro__hoja::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:30px;z-index:4;
  background:linear-gradient(90deg,rgba(18,33,26,.14),rgba(18,33,26,.03) 55%,transparent);
  border-radius:4px 0 0 4px;pointer-events:none;
}
.libro__hoja img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:var(--blanco);border-radius:4px 8px 8px 4px;
}
.libro__vuelo{z-index:3;transform-origin:left center;backface-visibility:hidden;opacity:0;pointer-events:none}
.libro--pasando .libro__vuelo{opacity:1;animation:pasarHoja .6s cubic-bezier(.4,.05,.35,1) forwards}
.libro--volviendo .libro__vuelo{opacity:1;animation:volverHoja .6s cubic-bezier(.4,.05,.35,1) forwards}
@keyframes pasarHoja{
  from{transform:rotateY(0);box-shadow:0 0 0 rgba(0,0,0,0)}
  to{transform:rotateY(-118deg);box-shadow:-30px 0 50px rgba(18,33,26,.28)}
}
@keyframes volverHoja{
  from{transform:rotateY(-118deg);box-shadow:-30px 0 50px rgba(18,33,26,.28)}
  to{transform:rotateY(0);box-shadow:0 0 0 rgba(0,0,0,0)}
}

.libro__flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--verde-hondo);font-size:1.3rem;cursor:pointer;
}
.libro__escena > .libro__flecha:first-child{left:12px}
.libro__escena > .libro__flecha:last-child{right:12px}
.libro__flecha:hover:not(:disabled){background:var(--acento)}
.libro__flecha:disabled{opacity:.3;cursor:default}

.libro__barra{
  position:absolute;left:0;right:0;bottom:0;height:62px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.libro__contador{font-size:.85rem;color:rgba(255,255,255,.8)}
.libro__pantalla{
  border:0;background:rgba(255,255,255,.14);color:var(--blanco);
  border-radius:999px;padding:8px 16px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
}
.libro__pantalla:hover{background:rgba(255,255,255,.26)}
.libro__cerrar{
  position:absolute;top:14px;right:16px;z-index:10;width:44px;height:44px;border-radius:50%;border:none;
  background:rgba(255,255,255,.14);color:var(--blanco);font-size:1.9rem;line-height:1;cursor:pointer;
}
.libro__cerrar:hover{background:rgba(255,255,255,.26)}

/* Acercar: la página crece y se puede arrastrar */
.libro--zoom .libro__escena{overflow:auto;-webkit-overflow-scrolling:touch}
.libro--zoom .libro__hoja{position:relative;left:auto;top:auto;transform:none;width:150vw;margin:0 auto}
.libro--zoom .libro__flecha{display:none}

/* =========================================================
   Adaptable
   ========================================================= */
@media (max-width:960px){
  .nosotros,.contacto{grid-template-columns:1fr}
  .portada__banner{grid-template-columns:1fr}
  .portada__foto{order:-1;height:auto;aspect-ratio:860/520;object-position:center 30%;-webkit-mask-image:linear-gradient(0deg,transparent,#000 25%);mask-image:linear-gradient(0deg,transparent,#000 25%)}
  .portada__texto{padding:4px 16px 72px}
  .categorias{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:760px){
  .solo-escritorio{display:none}
  .principal__fila{grid-template-columns:1fr auto;grid-template-areas:"marca whatsapp" "buscador buscador";padding-block:10px}
  .marca img{height:38px}
  .buscador{max-width:none}
  .buscador button span{display:none}
  .buscador button{padding:0 14px}
  .buscador--chico{max-width:none;width:100%}
  .cabeza{flex-direction:column;align-items:stretch}
  .whatsapp__textos{display:none}
  .navegacion a{padding:0 13px;font-size:.92rem}
  .seccion{padding:44px 0}
  .cifras{grid-template-columns:1fr 1fr}
  .cifras > div{padding:14px 16px}
  .cifras > div:nth-child(3){border-left:0}
  .categorias{gap:8px}
  .categoria{padding:14px 4px;font-size:.85rem}
  .categoria__icono{width:46px;height:46px;font-size:1.3rem}
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .producto__cuerpo{padding:10px 12px 12px}
  .producto__nombre{font-size:.92rem}
  .sucursales__lista{grid-template-columns:1fr}
  .proveedor{width:170px}
  .proveedor img{max-width:85%;max-height:64px}
  .proveedor{height:90px}
  .formulario{grid-template-columns:1fr;padding:18px}
  .wa-flotante{padding:8px 16px 8px 12px}
  .wa-flotante__texto small{display:none}
  .pie__fila{padding-bottom:84px} /* que el botón flotante no tape el pie */

  .libro__hoja{width:min(calc(100vw - 12px), calc((100vh - 76px) * 1500 / 1815))}
  .libro__flecha{width:40px;height:40px}
  .libro__escena > .libro__flecha:first-child{left:6px}
  .libro__escena > .libro__flecha:last-child{right:6px}
  .libro--zoom .libro__hoja{width:250vw}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquesina{overflow-x:auto;mask-image:none}
}