/* ==========================================================
   Diseño v2 "El almacén de la esquina" (propuesta, no publicada)
   Hoja de estilos compartida por index, market-pet, empresa, contacto, politicas y 404.
   Tokens según Handoff_diseno_v2_2026-10-05.md, sección 3 (+ huerta, sección 14.2)
   ========================================================== */
:root{
  /* Color (3.1) */
  --c-burdeo:#8C1D40; --c-burdeo-osc:#6E1532; --c-crema:#F6EFDF; --c-crema-2:#EFE4CC;
  --c-papel:#FFFDF8; --c-kraft:#D9C4A0; --c-pizarra:#26332D; --c-ocre:#C8962E;
  --c-tinta:#2A1A1F; --c-gris:#6B5B60; --c-ok:#2F6B3A; --c-linea:#E2D5BA;
  --c-madera:#6B4A2B; /* borde de la pizarra (valor dado en 5, Pizarra) */
  --c-huerta:#3E6B2F; /* sección Frutas y verduras (14.2): crema encima = 5,47:1 */

  /* Tipografía (3.2): tamaño/interlineado en un solo valor para usar con el atajo "font" */
  --f-letrero:"Caprasimo", Georgia, serif;
  --f-texto:"Fira Sans", system-ui, sans-serif;
  --f-ticket:"Courier Prime", ui-monospace, monospace;
  --t-h1:clamp(34px, 8vw, 60px)/1.02;
  --t-h2:clamp(26px, 5vw, 36px)/1.1;
  --t-precio:28px/1;
  --t-cuerpo:16px/1.5;
  --t-chico:13px/1.4;

  /* Espacio, bordes y sombras (3.3) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --r-chico:6px; --r-medio:12px; --r-pastilla:999px;
  --sombra-etiqueta:0 1px 0 var(--c-linea), 0 6px 14px -8px rgba(42,26,31,.25);
  --borde-punteado:1.5px dashed var(--c-linea);
  --wrap:1040px;

  /* Toldo: medidas de las ondas (escritorio; el celular las reduce) */
  --tz:28px; --th:34px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px} /* 72 px: deja libre la sub-barra pegada de market-pet.html al ir a un ancla */
body{margin:0;background:var(--c-crema);color:var(--c-tinta);font:400 var(--t-cuerpo) var(--f-texto)}
body.con-barra{padding-bottom:104px} /* espacio para la barra fija del pedido (solo market-pet.html) */
a{color:var(--c-burdeo)}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s-4)}
h1,h2{font-family:var(--f-letrero);font-weight:400;margin:0}
h3{font:600 17px/1.2 var(--f-texto);margin:0}
.ic{width:18px;height:18px;flex:none;display:block}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--c-burdeo);outline-offset:2px}
header a:focus-visible,header button:focus-visible,footer a:focus-visible,.cinta-barra button:focus-visible,.pizarra a:focus-visible{outline-color:var(--c-crema)}
main:focus{outline:none}
.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}
body.sin-scroll{overflow:hidden} /* con el panel del celular abierto */

/* Enlace "Saltar al contenido": solo se ve al enfocarlo con el teclado */
.saltar{position:absolute;left:var(--s-4);top:-80px;z-index:50;background:var(--c-papel);color:var(--c-burdeo);border:2px solid var(--c-burdeo);border-radius:var(--r-chico);padding:var(--s-2) var(--s-4);font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.saltar:focus{top:var(--s-2)}

/* ---- Botones (6: hover, presionado, deshabilitado) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;border:2px solid transparent;border-radius:var(--r-medio);padding:10px 18px;font:600 16px/1.2 var(--f-texto);cursor:pointer;text-decoration:none;transition:background-color 150ms ease,transform 150ms ease,box-shadow 150ms ease,color 150ms ease}
.btn-burdeo{background:var(--c-burdeo);color:var(--c-crema)}
.btn-burdeo:hover{background:var(--c-burdeo-osc)}
.btn-burdeo:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
.btn-borde{background:transparent;color:var(--c-burdeo);border-color:var(--c-burdeo)}
.btn-borde:hover{background:var(--c-burdeo);color:var(--c-crema)}
.btn-borde:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
.btn-sec{background:var(--c-crema-2);color:var(--c-tinta)}
.btn-sec:hover{background:var(--c-linea)}
.btn-crema{background:var(--c-crema);color:var(--c-burdeo)}
.btn-crema:hover{background:var(--c-papel)}
.btn-crema:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.25)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--c-burdeo)}
.btn:disabled:active{transform:none;box-shadow:none}

/* ---- 1. Encabezado global (16.1): barra superior, barra principal con menús, panel de celular y toldo (F1) ---- */
header{background:var(--c-burdeo);color:var(--c-crema);position:relative;z-index:40}
/* Barra superior: mensaje de despacho/retiro y contacto; en celular el mensaje se desplaza */
.barra-sup{background:var(--c-burdeo-osc);color:var(--c-crema);font:400 var(--t-chico) var(--f-texto)}
.bs{display:flex;align-items:center;gap:var(--s-3);min-height:44px}
.bs-msg{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.bs-msg::-webkit-scrollbar{display:none}
.bs-msg p{margin:0;white-space:nowrap;line-height:44px}
.bs-enl{display:flex;flex:none;align-items:center}
.bs-enl a{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;padding:0 var(--s-2);color:var(--c-crema);text-decoration:none}
.bs-enl a:hover .bs-txt{text-decoration:underline}
.bs-enl .ic{width:18px;height:18px}
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) 0 var(--s-4)}
.marca{display:flex;flex-direction:column;justify-content:center;min-height:44px;gap:var(--s-1);color:var(--c-crema);text-decoration:none}
.marca small{font:600 12px/1 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.marca strong{font:400 24px/1.05 var(--f-letrero)}
.nav{display:flex;align-items:center;gap:var(--s-3)}
.menus{display:flex;align-items:center;gap:var(--s-1);list-style:none;margin:0;padding:0}
.menu-item{position:relative}
.menu-link,.menu-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s-3);border:0;border-radius:var(--r-pastilla);background:transparent;color:var(--c-crema);font:500 16px/1.2 var(--f-texto);text-decoration:none;cursor:pointer;transition:background-color 150ms ease}
.menu-link:hover,.menu-btn:hover,.menu-item.abierto > .menu-btn{background:var(--c-burdeo-osc)}
.menu-btn .ic{width:16px;height:16px;transition:transform 150ms ease}
.menu-item.abierto > .menu-btn .ic{transform:rotate(180deg)}
.menu-link[aria-current="page"],.menu-btn.activo{background:var(--c-burdeo-osc);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.submenu{display:none;position:absolute;left:0;top:100%;min-width:300px;list-style:none;margin:0;padding:var(--s-2);background:var(--c-papel);color:var(--c-tinta);border:1px solid var(--c-linea);border-radius:var(--r-medio);box-shadow:0 12px 24px -10px rgba(42,26,31,.45);z-index:5}
.menu-item:last-child .submenu{left:auto;right:0}
.menu-item.abierto > .submenu{display:block}
.submenu a{display:flex;align-items:center;min-height:44px;padding:0 var(--s-3);border-radius:var(--r-chico);color:var(--c-tinta);font:500 16px/1.2 var(--f-texto);text-decoration:none}
.submenu a:hover{background:var(--c-crema-2);color:var(--c-burdeo)}
.submenu a[aria-current="page"]{background:var(--c-crema-2);color:var(--c-burdeo);font-weight:600}
.submenu a:focus-visible,.panel a:focus-visible,.panel button:focus-visible,.panel summary:focus-visible{outline-color:var(--c-burdeo)}
.btn-esc{min-height:44px;padding:6px 18px}
/* Hamburguesa (solo celular y tablet) y panel lateral con acordeones */
.hamb{display:none;place-items:center;flex:none;width:44px;height:44px;border:1.5px solid rgba(246,239,223,.65);border-radius:50%;background:transparent;color:var(--c-crema);cursor:pointer;transition:background-color 150ms ease}
.hamb:hover{background:var(--c-burdeo-osc)}
.hamb .ic{width:24px;height:24px}
.panel-fondo{position:fixed;inset:0;z-index:60;background:rgba(42,26,31,.55);opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s linear 200ms}
.panel-fondo.abierto{opacity:1;visibility:visible;transition:opacity 200ms ease}
.panel{position:fixed;top:0;right:0;bottom:0;z-index:61;display:flex;flex-direction:column;width:min(360px,88vw);overflow-y:auto;background:var(--c-crema);color:var(--c-tinta);box-shadow:-12px 0 28px -12px rgba(42,26,31,.5);transform:translateX(100%);visibility:hidden;transition:transform 250ms ease-out,visibility 0s linear 250ms}
.panel.abierto{transform:none;visibility:visible;transition:transform 250ms ease-out}
.panel-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--c-burdeo);color:var(--c-crema);font:400 22px/1 var(--f-letrero)}
.panel-cab strong{font-weight:400}
.panel-cerrar{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid rgba(246,239,223,.65);border-radius:50%;background:transparent;color:var(--c-crema);cursor:pointer}
.panel-cerrar:hover{background:var(--c-burdeo-osc)}
.panel .panel-cab .panel-cerrar:focus-visible{outline-color:var(--c-crema)}
.panel-nav{padding:var(--s-3) var(--s-4);flex:1}
.panel-nav ul{list-style:none;margin:0;padding:0 0 var(--s-2) var(--s-3)}
.p-link{display:flex;align-items:center;min-height:48px;padding:0 var(--s-2);border-radius:var(--r-chico);color:var(--c-tinta);font:500 17px/1.2 var(--f-texto);text-decoration:none}
.p-link:hover{background:var(--c-crema-2);color:var(--c-burdeo)}
.p-link[aria-current="page"]{color:var(--c-burdeo);font-weight:600;background:var(--c-crema-2)}
.p-grupo{border-top:1px solid var(--c-linea)}
.p-grupo summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 var(--s-2);cursor:pointer;list-style:none;font:600 17px/1.2 var(--f-texto)}
.p-grupo summary::-webkit-details-marker{display:none}
.p-grupo summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--c-burdeo);border-bottom:2px solid var(--c-burdeo);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.p-grupo[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.panel-pie{padding:var(--s-4);border-top:1px solid var(--c-linea)}
.panel-pie .btn{width:100%}

/* Rayas verticales burdeo/crema con orilla festoneada (máscara de círculos) */
.toldo-caja{filter:drop-shadow(0 2px 0 var(--c-burdeo))}
.toldo{display:block;height:var(--th);width:100%;
  background:repeating-linear-gradient(90deg,var(--c-burdeo) 0 var(--tz),var(--c-crema) var(--tz) calc(var(--tz)*2));
  -webkit-mask:linear-gradient(#000,#000) 0 0/100% calc(var(--th) - var(--tz)/2 + 1px) no-repeat,
    radial-gradient(circle at calc(var(--tz)/2) calc(var(--th) - var(--tz)/2),#000 calc(var(--tz)/2 - .5px),transparent calc(var(--tz)/2 + .5px)) 0 0/var(--tz) var(--th) repeat-x;
  mask:linear-gradient(#000,#000) 0 0/100% calc(var(--th) - var(--tz)/2 + 1px) no-repeat,
    radial-gradient(circle at calc(var(--tz)/2) calc(var(--th) - var(--tz)/2),#000 calc(var(--tz)/2 - .5px),transparent calc(var(--tz)/2 + .5px)) 0 0/var(--tz) var(--th) repeat-x}

/* ---- 2. Portada (texto a la izquierda, ilustración a la derecha) ---- */
.hero{padding:var(--s-6) 0 var(--s-7);overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:var(--s-6);align-items:start;
  grid-template-areas:"sec arte" "tit arte" "baj arte" "dat arte" "bot arte"}
.sector{grid-area:sec;justify-self:start;display:inline-block;border:2px solid var(--c-burdeo);color:var(--c-burdeo);border-radius:var(--r-pastilla);padding:var(--s-1) var(--s-4);font:600 13px/1.4 var(--f-texto);letter-spacing:.2em;text-transform:uppercase}
.hero h1{grid-area:tit;font:400 var(--t-h1) var(--f-letrero);color:var(--c-burdeo);margin:var(--s-3) 0 var(--s-3)}
.hero .bajada{grid-area:baj;max-width:560px;margin:0 0 var(--s-4)}
.datos{grid-area:dat;display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-5)}
.dato{display:inline-flex;align-items:flex-start;gap:var(--s-2)}
.dato .ic{margin-top:3px;color:var(--c-burdeo)}
.botones{grid-area:bot;display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero-arte{grid-area:arte;position:relative;align-self:center;justify-self:end;width:100%;max-width:560px}
.hero-arte > img{display:block;width:100%;height:auto;border-radius:24px}
.hero-arte > img.foto{object-fit:cover}
/* Foto referencial en marco tipo etiqueta (16.4): borde papel de 8 px y giro de -2 grados; si no carga, la ilustración SVG de respaldo */
.marco-foto{margin:0;padding:8px;background:var(--c-papel);border-radius:var(--r-chico);box-shadow:var(--sombra-etiqueta);transform:rotate(-2deg)}
.marco-foto.marco-der{transform:rotate(2deg)}
.marco-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--c-crema-2)}
img.respaldo{object-fit:contain!important;padding:0}
/* Portadas cortas de empresa, contacto y políticas */
.hero.corto{padding:var(--s-5) 0 var(--s-6)}
.hero.corto .hero-arte{max-width:440px}
.hero.corto .botones{margin-top:var(--s-2)}
.hero.corto .bajada{margin-bottom:var(--s-4)}
/* Sello redondo (F4): solo datos reales, decorativo; se superpone a la esquina de la ilustración */
.sello{position:absolute;top:-26px;right:-20px;width:120px;height:120px;transform:rotate(-8deg);display:block}
.sello .s-fondo{fill:var(--c-papel)}
.sello .s-borde{fill:none;stroke:var(--c-burdeo)}
.sello text{font:600 16px var(--f-texto);fill:var(--c-burdeo)}
.sello .s-huella{fill:var(--c-burdeo)}

/* ---- 3. Cinta del almacén (F5) ---- */
.cinta-barra{display:flex;align-items:center;background:var(--c-burdeo);color:var(--c-crema)}
.cinta{flex:1;min-width:0;overflow:hidden;font:400 14px/1 var(--f-ticket);text-transform:uppercase;letter-spacing:.1em;padding:var(--s-3) 0}
.cinta-pista{display:flex;width:max-content}
.cinta-pista.anim{animation:cinta var(--dur,30s) linear infinite}
.cinta-lista{display:flex;flex:none;list-style:none;margin:0;padding:0}
.cinta-lista li{display:flex;align-items:center;white-space:nowrap}
.cinta-lista li::after{content:"";display:block;width:6px;height:6px;margin:0 var(--s-5);background:var(--c-crema);transform:rotate(45deg);opacity:.85}
.cinta.pausada{overflow-x:auto;scrollbar-width:none}
.cinta.pausada::-webkit-scrollbar{display:none}
.cinta.pausada .cinta-pista{animation-play-state:paused}
.cinta-pausa{flex:none;width:44px;height:44px;margin:var(--s-1) var(--s-3) var(--s-1) var(--s-2);display:grid;place-items:center;border-radius:50%;border:1.5px solid rgba(246,239,223,.65);background:transparent;color:var(--c-crema);cursor:pointer;transition:background-color 150ms ease}
.cinta-pausa:hover{background:var(--c-burdeo-osc)}
.cinta-pausa .ic{width:20px;height:20px}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---- Secciones y títulos ---- */
.sec{padding:var(--s-7) 0}
.sec h2{font:400 var(--t-h2) var(--f-letrero);color:var(--c-burdeo);margin-bottom:var(--s-2)}
.sub{color:var(--c-gris);margin:0 0 var(--s-5)}
.sec-2{background:var(--c-crema-2)}

/* ---- Inicio: deslizable "Nuestras secciones" (16.2) ---- */
.carr-pista{display:flex;gap:var(--s-5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scroll-behavior:smooth;padding:4px 4px 12px;margin:0 -4px;scrollbar-width:none;overscroll-behavior-x:contain}
.carr-pista::-webkit-scrollbar{display:none}
.carr-pista:focus-visible{outline:3px solid var(--c-burdeo);outline-offset:2px;border-radius:var(--r-medio)}
.sec-card{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-radius:var(--r-medio);overflow:hidden;color:var(--c-crema);box-shadow:0 4px 0 var(--c-burdeo-osc),0 12px 20px -12px rgba(42,26,31,.5);transition:transform 180ms ease-out}
.sc-mp{background:var(--c-burdeo)}
.sc-fv{background:var(--c-huerta);box-shadow:0 4px 0 #2B4B20,0 12px 20px -12px rgba(42,26,31,.5)}
.sc-arte{position:relative;min-height:260px;background:var(--c-crema-2)}
.sc-arte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-arte img.ilus{object-fit:contain;padding:12px}
.sc-panel{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);padding:var(--s-5)}
.sc-panel h3{font:400 clamp(26px,4vw,32px)/1.05 var(--f-letrero);color:var(--c-crema)}
.sc-panel p{margin:0;max-width:44ch}
.sc-panel .btn{margin-top:auto}
.sc-link{color:var(--c-crema);text-decoration:none}
.sc-link::after{content:"";position:absolute;inset:0;z-index:1} /* toda la tarjeta es clicable */
.sc-link:focus-visible{outline:none}
.sec-card.con-enlace:focus-within{outline:3px solid var(--c-tinta);outline-offset:4px}
.pastilla{display:inline-block;border:2px solid var(--c-crema);color:var(--c-crema);border-radius:var(--r-pastilla);padding:var(--s-1) var(--s-4);font:600 13px/1.4 var(--f-texto);letter-spacing:.2em;text-transform:uppercase}
.prep{position:absolute;left:8px;bottom:18px;z-index:1;background:var(--c-ocre);color:var(--c-tinta);border:2px dashed var(--c-tinta);border-radius:var(--r-chico);padding:6px var(--s-3);font:700 13px/1.2 var(--f-texto);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-4deg)}
.sc-fv .btn-crema{color:var(--c-huerta)}
.carr-barra{display:flex;align-items:center;justify-content:center;gap:var(--s-2);margin-top:var(--s-2)}
.carr-barra[hidden]{display:none}
.carr-flecha{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--c-burdeo);background:var(--c-papel);color:var(--c-burdeo);cursor:pointer;transition:background-color 150ms ease,color 150ms ease}
.carr-flecha:hover:not(:disabled){background:var(--c-burdeo);color:var(--c-crema)}
.carr-flecha:disabled{opacity:.45;cursor:not-allowed}
.carr-puntos{display:flex;align-items:center}
.punto{position:relative;width:44px;height:44px;border:0;background:transparent;cursor:pointer}
.punto::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--c-burdeo);background:transparent;transition:background-color 150ms ease}
.punto[aria-current="true"]::before{background:var(--c-burdeo)}

/* ---- Inicio: franja de beneficios, compromisos y enlaces con flecha ---- */
.benef,.compromisos{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.benef{grid-template-columns:repeat(4,minmax(0,1fr))}
.compromisos{grid-template-columns:repeat(2,minmax(0,1fr))}
.benef li,.compromisos li{display:flex;align-items:flex-start;gap:var(--s-3);background:var(--c-papel);border:1px solid var(--c-linea);border-radius:var(--r-medio);padding:var(--s-4)}
.benef-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--c-burdeo);color:var(--c-crema)}
.benef-ic .ic{width:24px;height:24px}
.benef h3,.compromisos h3{margin-bottom:var(--s-1)}
.benef p,.compromisos p{margin:0;font-size:16px;color:var(--c-gris)}
.enlace-flecha{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* ---- Inicio: apartados futuros (16.2) ---- */
.apartados{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-4)}
.apartado{display:flex;flex-direction:column;background:var(--c-papel);border:1px solid var(--c-linea);border-radius:var(--r-medio);overflow:hidden}
.ap-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--c-crema-2)}
.ap-cuerpo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2);padding:var(--s-4)}
.ap-cuerpo p{margin:0}
.apartado.libre{background:transparent;border:2px dashed var(--c-burdeo)}
.apartado.libre code{font:400 14px var(--f-ticket)}

/* ---- Portada de la empresa: "El almacén" ---- */
.dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:center}
.dos-col img{display:block;width:100%;height:auto;border-radius:24px}
.dos-col img.foto{object-fit:cover}
.dos-col p{margin:0 0 var(--s-3);max-width:52ch}
.historia{margin-top:var(--s-5);padding-top:var(--s-4);border-top:var(--borde-punteado)}
.historia h3{margin-bottom:var(--s-2)}

/* ---- 4. Catálogo ---- */
.filtros{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-5)}
.fila{display:flex;gap:var(--s-2);overflow-x:auto;max-width:100%;padding-bottom:var(--s-1);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fila::-webkit-scrollbar{display:none}
.fila button{flex:0 0 auto;min-height:44px;border:1.5px solid var(--c-burdeo);background:transparent;color:var(--c-burdeo);border-radius:var(--r-pastilla);padding:0 18px;font:500 15px var(--f-texto);cursor:pointer;transition:background-color 150ms ease,color 150ms ease}
.fila-esp button{font-weight:600}
.fila-cat button{border-color:var(--c-linea);background:var(--c-papel);color:var(--c-tinta)}
.fila button[aria-pressed="true"]{background:var(--c-burdeo);border-color:var(--c-burdeo);color:var(--c-crema)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-4)}
.vacio{grid-column:1/-1;margin:0;padding:var(--s-5);background:var(--c-papel);border:var(--borde-punteado);border-radius:var(--r-medio);text-align:center}

/* Etiqueta de góndola (F3, 5.1) con franja de imagen de 120 px arriba (14.3) */
.prod{display:flex;box-shadow:var(--sombra-etiqueta);transform-origin:50% 0;transition:transform 180ms ease-out}
.eti{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--c-papel);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.eti::before{content:"";position:absolute;inset:6px;border:var(--borde-punteado);border-radius:var(--r-chico);pointer-events:none;z-index:1}
.prod.en-pedido .eti::before{border-color:var(--c-burdeo)}
.perfo{position:absolute;z-index:2;top:9px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--c-crema);border:1px solid var(--c-linea);box-shadow:inset 0 1px 1px rgba(42,26,31,.18)}
.eti-img{position:relative;flex:none;height:120px;background:var(--c-crema-2)}
.eti-img img{display:block;width:100%;height:100%;object-fit:contain;padding:14px 8px 6px}
.eti-img img.foto{object-fit:cover;padding:0}
.eti-cuerpo{flex:1;display:flex;flex-direction:column;gap:6px;padding:var(--s-3) var(--s-4) var(--s-4)}
.fila-sup{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:28px}
.esp{display:inline-flex;align-items:center;gap:var(--s-1);border:1.5px solid var(--c-burdeo);color:var(--c-burdeo);border-radius:var(--r-pastilla);padding:1px 10px 1px 7px;font:600 13px/1.5 var(--f-texto)}
.esp .ic{width:15px;height:15px}
.esp.gato{background:var(--c-crema-2);border-color:var(--c-crema-2)}
.esp.ambos{background:var(--c-crema-2)}
.sello-kilo{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c-ocre);color:var(--c-tinta);border:2px dashed var(--c-tinta);font:700 12px/1.05 var(--f-texto);letter-spacing:.04em;text-transform:uppercase;text-align:center;transform:rotate(10deg)}
.nom{font:600 18px/1.25 var(--f-texto);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fmt{font:400 var(--t-chico) var(--f-ticket);font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--c-gris)}
.nota{font:400 var(--t-chico) var(--f-texto);color:var(--c-gris)}
.pbox{margin-top:auto;border-top:var(--borde-punteado);padding-top:var(--s-2)}
.precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font:400 var(--t-precio) var(--f-letrero);color:var(--c-burdeo)}
.precio .porkg{font:400 16px/1 var(--f-letrero)}
.precio.consultar{font:400 16px/1.5 var(--f-texto);color:var(--c-gris)}
.pkg{font:400 var(--t-chico) var(--f-texto);color:var(--c-gris)}
.en-ped{display:flex;align-items:center;gap:6px;font:500 13px/1.4 var(--f-texto);color:var(--c-ok)}
.en-ped .ic{width:15px;height:15px}
.ctrl{display:flex;align-items:center;gap:var(--s-2)}
.ctrl button{flex:none;width:44px;height:44px;border-radius:var(--r-chico);border:1.5px solid var(--c-burdeo);background:transparent;color:var(--c-burdeo);font-size:20px;cursor:pointer;transition:background-color 150ms ease,color 150ms ease}
.ctrl button:hover{background:var(--c-crema-2)}
.ctrl span{flex:1;min-width:0;text-align:center;font-weight:600}
.ctrl .agregar{width:auto;flex:1;background:var(--c-burdeo);color:var(--c-crema);font:600 16px var(--f-texto)}
.ctrl .agregar:hover{background:var(--c-burdeo-osc)}
.ctrl .agregar:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
.almacen{margin-top:var(--s-5);background:var(--c-crema-2);border:var(--borde-punteado);border-radius:var(--r-medio);padding:var(--s-4)}

/* ---- 5. Pizarra "Cómo pedir" (F6) ---- */
.pizarra{background:var(--c-pizarra);color:var(--c-crema);border:8px solid var(--c-madera);border-radius:10px;padding:var(--s-6) var(--s-5);
  background-image:radial-gradient(ellipse at 20% 0%,rgba(246,239,223,.07),transparent 60%),radial-gradient(ellipse at 90% 100%,rgba(246,239,223,.05),transparent 55%)}
.sec .pizarra h2{color:var(--c-crema);margin-bottom:var(--s-1)}
.tiza{display:block;width:170px;height:12px;margin-bottom:var(--s-3)}
.tiza path{fill:none;stroke:var(--c-ocre);stroke-width:3;stroke-linecap:round}
.pizarra .sub{color:var(--c-crema);opacity:.92;margin-bottom:var(--s-5)}
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.paso{display:flex;flex-direction:column;gap:var(--s-2)}
.paso b{font:400 44px/1 var(--f-letrero);color:var(--c-ocre)}

/* ---- 6. Info / Visítenos (fondo kraft) ---- */
.info{background:var(--c-kraft)}
.info .sub{color:var(--c-tinta)}
.info a{color:var(--c-burdeo)}
.info .btn-borde:hover{color:var(--c-crema)}
.info .btn-burdeo,.info .btn-burdeo:hover{color:var(--c-crema)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-3);align-items:start}
.caja{background:var(--c-papel);border:1px solid var(--c-linea);border-radius:var(--r-medio);padding:var(--s-4)}
.caja h3{margin-bottom:var(--s-2)}
.caja p,.caja ul{margin:0 0 var(--s-2);font-size:16px}
.caja ul{padding-left:18px}
.caja .btn{margin-top:var(--s-1)}
.plegable{padding:0}
.plegable summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:48px;padding:10px var(--s-4);cursor:pointer;list-style:none}
.plegable summary::-webkit-details-marker{display:none}
.caja.plegable summary h3{margin:0}
.plegable summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--c-burdeo);border-bottom:2px solid var(--c-burdeo);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.plegable[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.plegable[open] summary{padding-bottom:6px}
.plegable > p{padding:0 var(--s-4)}
.plegable > p:last-child{margin-bottom:var(--s-4)}

/* ---- Empresa: misión y visión ---- */
.mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.mv .caja{padding:var(--s-5)}
.mv-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-3)}
.mv-cab h3{font:400 24px/1.1 var(--f-letrero);color:var(--c-burdeo);margin:0}
.mv .caja p{margin:0}
.borrador{display:inline-block;background:var(--c-ocre);color:var(--c-tinta);border-radius:var(--r-pastilla);padding:2px var(--s-3);font:700 12px/1.5 var(--f-texto);letter-spacing:.06em;text-transform:uppercase}
.borrador[hidden]{display:none}

/* ---- Contacto: tarjetas ---- */
.tarjetas-contacto .caja h3{display:flex;align-items:center;gap:var(--s-2)}
.tarjetas-contacto .caja h3 .ic{color:var(--c-burdeo)}
.tarjetas-contacto .caja p{overflow-wrap:anywhere}

/* ---- Políticas: índice, partes y preguntas frecuentes ---- */
.indice{background:var(--c-papel);border-top:1px solid var(--c-linea);border-bottom:1px solid var(--c-linea)}
.indice .wrap,.subbar .wrap{display:flex;gap:var(--s-2);overflow-x:auto;padding-top:var(--s-2);padding-bottom:var(--s-2);scrollbar-width:none}
.indice .wrap::-webkit-scrollbar,.subbar .wrap::-webkit-scrollbar{display:none}
.indice .wrap{flex-wrap:wrap}
.indice a,.subbar a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);border:1.5px solid var(--c-burdeo);border-radius:var(--r-pastilla);color:var(--c-burdeo);font:500 15px/1.2 var(--f-texto);text-decoration:none;white-space:nowrap;transition:background-color 150ms ease,color 150ms ease}
.indice a:hover,.subbar a:hover{background:var(--c-burdeo);color:var(--c-crema)}
.pol-lista{display:grid;gap:var(--s-4)}
.pol{background:var(--c-papel);border:1px solid var(--c-linea);border-radius:var(--r-medio);padding:var(--s-5)}
.pol h2{font:400 var(--t-h2) var(--f-letrero);color:var(--c-burdeo);margin-bottom:var(--s-3)}
.pol p,.pol ul{margin:0 0 var(--s-3);max-width:70ch}
.pol ul{padding-left:20px}
.pol > :last-child{margin-bottom:0}
.marcador{background:var(--c-crema-2);border:2px dashed var(--c-burdeo);border-radius:var(--r-chico);padding:var(--s-3) var(--s-4);font-weight:500}
.faq{display:grid;gap:var(--s-2)}
.faq .caja.plegable p{max-width:70ch}

/* ---- Market Pet: sub-barra pegada y accesos con foto (16.1, 16.4) ---- */
.subbar{position:sticky;top:0;z-index:15;background:var(--c-papel);border-bottom:1px solid var(--c-linea);box-shadow:0 6px 10px -8px rgba(42,26,31,.4)}
.accesos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-5)}
.acceso{display:flex;flex-direction:column;padding:0;overflow:hidden;border:3px solid var(--c-papel);border-radius:var(--r-medio);background:var(--c-burdeo);color:var(--c-crema);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--sombra-etiqueta);transition:transform 180ms ease-out,box-shadow 150ms ease}
.acceso[aria-pressed="true"]{border-color:var(--c-burdeo);box-shadow:0 0 0 3px var(--c-burdeo)}
.acc-foto{display:block;height:150px;background:var(--c-crema-2)}
.acc-foto img{display:block;width:100%;height:100%;object-fit:cover}
.acc-txt{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3) var(--s-4)}
.acc-tit{font:400 26px/1.05 var(--f-letrero)}
.acc-sub{font:500 14px/1.3 var(--f-texto)}
.mas-politicas{margin:var(--s-4) 0 0}

/* ---- 7. Pie de 3 columnas ---- */

footer{background:var(--c-burdeo-osc);color:var(--c-crema);padding:var(--s-6) 0 var(--s-5);font-size:15px}
footer a{color:var(--c-crema)}
.pie-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);padding-bottom:var(--s-5);margin-bottom:var(--s-4);border-bottom:1px solid rgba(246,239,223,.3)}
.pie-t{font:600 13px/1.2 var(--f-texto);letter-spacing:.18em;text-transform:uppercase;margin:0 0 var(--s-2)}
.pie-cols ul{list-style:none;margin:0;padding:0}
.pie-cols a{display:flex;align-items:center;min-height:44px}
.pie-cols a[aria-current="page"]{font-weight:600}
.pie-datos{display:grid;gap:var(--s-1)}
.pie-ig{display:inline-flex;align-items:center;min-height:44px}

/* ---- 8. Barra fija inferior ---- */
.barra{position:fixed;left:0;right:0;bottom:0;background:var(--c-papel);box-shadow:0 -4px 16px rgba(42,26,31,.1);z-index:20}
.barra::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px;pointer-events:none;
  background:radial-gradient(circle at 10px 10px,var(--c-papel) 9.5px,transparent 10px) 0 0/20px 10px repeat-x}
.barra .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) var(--s-4)}
.barra .res{font-size:14px;color:var(--c-gris);flex:1;min-width:0}
.barra .res strong{display:block;color:var(--c-tinta);font-size:16px;transform-origin:left center}
.barra .acc{display:flex;align-items:center;gap:10px;flex:none}
.btn-wsp{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:2px solid var(--c-burdeo);background:var(--c-crema-2);color:var(--c-burdeo);transition:background-color 150ms ease}
.btn-wsp:hover{background:var(--c-crema)}
.btn-wsp .ic{width:26px;height:26px}
.rebote{animation:rebote 220ms cubic-bezier(.3,1.6,.6,1)}
@keyframes rebote{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ---- Ticket del pedido (F7, 5.2) ---- */
dialog{border:0;border-radius:0;padding:0;width:min(520px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;background:var(--c-papel);color:var(--c-tinta);
  -webkit-mask:radial-gradient(circle at 6px 0,transparent 5px,#000 5.5px) 0 0/12px 7px repeat-x,
    radial-gradient(circle at 6px 100%,transparent 5px,#000 5.5px) 0 100%/12px 7px repeat-x,
    linear-gradient(#000,#000) 0 6px/100% calc(100% - 12px) no-repeat;
  mask:radial-gradient(circle at 6px 0,transparent 5px,#000 5.5px) 0 0/12px 7px repeat-x,
    radial-gradient(circle at 6px 100%,transparent 5px,#000 5.5px) 0 100%/12px 7px repeat-x,
    linear-gradient(#000,#000) 0 6px/100% calc(100% - 12px) no-repeat}
dialog[open]{animation:entra 200ms ease-out}
dialog::backdrop{background:rgba(42,26,31,.55)}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dlg{padding:var(--s-5) var(--s-5) var(--s-5)}
.tk-cab{text-align:center;font-family:var(--f-ticket);font-weight:700}
.tk-nombre{font-size:18px;line-height:1.2;text-transform:uppercase;letter-spacing:.04em}
.tk-dir{font-size:14px;line-height:1.4;text-transform:uppercase;margin-top:var(--s-1)}
.tk-guiones{border-top:2px dashed var(--c-tinta);margin:var(--s-3) 0}
.dlg h2{font:700 16px/1.2 var(--f-ticket);text-transform:uppercase;letter-spacing:.12em;text-align:center;margin:0 0 var(--s-3);color:var(--c-tinta)}
#lineas{font-family:var(--f-ticket);font-size:16px}
.linea{display:flex;align-items:flex-end;gap:6px;padding:var(--s-2) 0}
.ln-nom{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.ln-pt{flex:1 1 16px;min-width:12px;border-bottom:2px dotted var(--c-gris);margin-bottom:6px}
.ln-sub{flex:none;font-weight:700;white-space:nowrap}
.linea button{border:0;background:none;color:var(--c-burdeo);cursor:pointer;font:400 14px var(--f-texto);text-decoration:underline;min-width:44px;padding:12px var(--s-2);margin:-12px 0}
.linea.total{align-items:baseline;flex-wrap:wrap;justify-content:space-between;border-top:2px dashed var(--c-tinta);margin-top:var(--s-2);padding-top:var(--s-3);font-family:var(--f-ticket)}
.linea.total strong:first-child{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
#d-total{font:400 26px/1.1 var(--f-letrero);color:var(--c-burdeo);margin-left:auto;text-align:right}
label{display:block;font-weight:500;margin:var(--s-4) 0 6px}
input,select,textarea{width:100%;min-height:44px;padding:10px var(--s-3);border:1.5px solid var(--c-linea);border-radius:var(--r-chico);font:16px var(--f-texto);background:#fff;color:var(--c-tinta)}
input:focus,textarea:focus{border-color:var(--c-burdeo)}
input:user-invalid,textarea:user-invalid{border-color:var(--c-burdeo);box-shadow:0 0 0 1px var(--c-burdeo)}
.opciones{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.opciones label{display:flex;align-items:center;gap:6px;min-height:44px;margin:0;font-weight:400;border:1.5px solid var(--c-linea);border-radius:var(--r-chico);padding:var(--s-2) var(--s-3);cursor:pointer}
.opciones input{width:auto;min-height:0}
.aviso{font:400 var(--t-chico) var(--f-texto);color:var(--c-gris);margin:var(--s-4) 0}
.opciones label.desactivada{flex-wrap:wrap;cursor:not-allowed;color:var(--c-gris);background:var(--c-crema-2)}
.nota-min{flex:1 0 100%;font:400 var(--t-chico) var(--f-texto);color:var(--c-gris)}
.acciones{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:var(--s-3)}
.alerta{background:#FFF3CD;color:#5C4400;border-radius:10px;padding:10px var(--s-3);font-size:15px;margin-bottom:var(--s-3)}

/* ---- Página 404 ---- */
.nf{padding:var(--s-7) 0;text-align:center}
.nf h1{font:400 var(--t-h1) var(--f-letrero);color:var(--c-burdeo);margin-bottom:var(--s-3)}
.nf p{max-width:46ch;margin:0 auto var(--s-5)}
.nf img{display:block;width:100%;max-width:420px;height:auto;margin:0 auto var(--s-5);border-radius:24px}
.nf .botones{justify-content:center}

/* ---- Responsive (7) ---- */
/* Escritorio ancho: el deslizable muestra 2 secciones por vista si caben */
@media (min-width:1080px){
  .sec-card{flex-basis:calc((100% - var(--s-5))/2)}
}
/* Tablet y celular (hasta 960 px): menú en panel lateral; portada en 1 columna */
@media (max-width:960px){
  .menus,.btn-esc{display:none}
  .hamb{display:grid}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"sec" "tit" "baj" "arte" "dat" "bot"}
  .hero-arte{justify-self:center;max-width:520px;margin:var(--s-2) 0 var(--s-5)}
  .hero.corto .hero-arte{max-width:420px}
  .sello{width:104px;height:104px;top:-22px;right:-12px}
  .dos-col{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .benef{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .mv,.compromisos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  :root{--tz:22px;--th:26px}
  .marca strong{font-size:20px}
  .bs-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* en celular, WhatsApp e Instagram quedan solo con el ícono (el nombre lo lee el lector de pantalla) */
  .hero{padding:var(--s-5) 0 var(--s-6)}
  .sello{width:88px;height:88px;top:-18px;right:-6px}
  .sec{padding:var(--s-6) 0}
  .sec-card{grid-template-columns:minmax(0,1fr)}
  .sc-arte{min-height:0;height:210px}
  .sc-panel{padding:var(--s-4)}
  .benef{grid-template-columns:minmax(0,1fr)}
  .pie-cols{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .grid{grid-template-columns:minmax(0,1fr)}
  .acc-foto{height:112px}
  .acc-txt{padding:var(--s-2) var(--s-3)}
  .acc-tit{font-size:22px}
  .acc-sub{font-size:13px}
  .pol{padding:var(--s-4)}
  .indice .wrap{flex-wrap:nowrap}
  .pizarra{padding:var(--s-5) var(--s-4)}
  .pasos{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .paso{flex-direction:row;align-items:flex-start;gap:var(--s-3)}
  .paso b{flex:none;min-width:30px;font-size:40px}
  .dlg{padding:var(--s-5) var(--s-4)}
  .acciones .btn{flex:1 1 100%}
}
/* Celular ancho: 2 etiquetas por fila cuando caben (mínimo 160 px cada una) */
@media (min-width:400px) and (max-width:640px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eti-cuerpo{padding:var(--s-3) var(--s-3) var(--s-3)}
  .sello-kilo{width:46px;height:46px;font-size:11px;top:10px;right:10px}
  .ctrl span{font-size:14px}
  .precio.largo{font-size:24px}
}
@media (max-width:340px){ .precio.largo{font-size:24px} }

/* Puntero fino: la etiqueta "se mueve en el gancho" y las puertas se levantan */
@media (hover:hover) and (pointer:fine){
  .prod:hover{transform:translateY(-2px) rotate(-.6deg)}
  .sec-card.con-enlace:hover{transform:translateY(-3px)}
  .acceso:hover{transform:translateY(-2px)}
}

/* Reducir movimiento: sin animaciones; la cinta empieza pausada (lo fija el script) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important}
  .cinta-pista.anim{animation:none}
  .prod:hover,.sec-card.con-enlace:hover,.acceso:hover{transform:none}
  .panel,.panel-fondo{transition:none}
  .carr-pista{scroll-behavior:auto}
}