/* Belma · capa PAPEL y ARTESANÍA (13-oct-2026). Se carga después de belma.css; quitar el <link> revierte el estilo. */
:root {
  --rasgado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 16' preserveAspectRatio='none'%3E%3Cpolygon points='0,16 0.0,9.0 4.1,11.9 9.1,9.0 17.3,10.5 20.6,10.7 29.7,6.5 38.4,6.7 48.6,6.6 56.0,11.2 60.7,8.6 65.5,8.7 70.3,7.6 77.0,7.9 86.7,9.3 91.2,13.1 95.2,7.6 103.9,11.2 113.5,9.9 121.2,12.2 128.2,9.4 133.2,10.5 137.6,9.4 146.0,8.4 153.0,10.4 159.2,8.9 162.5,10.7 170.3,8.5 177.3,13.0 184.6,10.8 191.7,11.3 198.4,7.8 209.0,4.8 218.6,12.2 228.1,9.1 234.5,5.3 242.1,7.5 248.9,8.3 256.2,9.6 262.9,6.6 267.3,9.7 276.7,11.5 281.8,10.7 285.4,6.6 294.5,7.7 302.5,8.2 306.7,9.1 311.9,10.1 317.5,8.9 323.6,8.6 327.5,11.0 332.1,9.9 335.3,6.6 344.1,6.1 352.5,9.2 363.3,10.5 368.1,9.7 375.7,8.1 379.1,7.3 389.1,7.4 394.6,12.7 401.0,7.8 411.0,5.1 421.7,9.4 431.6,13.0 438.7,8.4 443.3,9.9 447.9,7.0 453.3,9.0 463.2,11.0 467.8,7.6 477.1,8.2 485.5,11.8 491.3,10.9 498.1,11.4 506.9,6.9 517.2,6.6 525.0,10.7 530.7,7.2 538.6,12.8 542.7,9.3 546.0,5.4 555.3,10.7 563.2,10.4 570.8,7.6 575.9,11.0 586.3,8.8 595.6,10.7 600.0,9.0 600,16' fill='%23000'/%3E%3C/svg%3E");
  --rasgado-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 16' preserveAspectRatio='none'%3E%3Cpolygon points='0,16 0.0,9.0 8.0,10.6 18.5,10.6 21.8,8.8 29.9,10.6 36.7,8.0 44.3,7.0 49.5,11.8 53.8,10.2 61.7,7.5 71.7,7.8 82.6,10.5 93.3,9.2 97.9,10.8 108.6,10.6 114.5,7.6 118.0,8.2 121.1,9.7 126.6,10.3 132.1,8.9 135.5,10.9 144.5,10.4 153.8,8.5 156.9,7.2 167.6,6.9 178.0,10.8 183.8,9.2 187.7,10.7 197.6,5.8 201.3,8.4 211.6,7.9 219.0,8.2 223.4,7.3 231.9,11.0 235.3,11.0 241.6,7.9 251.2,8.8 254.6,10.7 261.6,10.4 270.4,10.8 279.7,7.4 283.9,10.4 290.6,12.4 301.4,8.8 310.2,8.9 316.4,7.6 327.3,10.9 334.3,8.3 339.5,10.9 345.4,10.9 354.0,10.1 359.9,9.8 366.7,10.1 372.1,10.8 379.7,7.0 384.7,9.7 394.3,10.0 400.1,10.0 409.7,8.0 419.7,10.3 430.3,9.1 434.6,11.3 441.5,10.3 450.3,6.8 457.9,9.7 465.9,10.1 474.7,7.1 481.2,9.6 489.7,9.5 496.5,7.9 500.6,8.3 505.1,7.1 511.1,9.5 516.0,10.6 522.3,8.1 526.2,10.4 529.5,9.5 536.9,8.3 547.5,10.3 557.0,9.6 561.2,9.4 571.8,10.9 577.6,10.6 581.5,9.3 585.6,9.9 591.6,8.7 597.0,10.9 600.0,9.0 600,16' fill='%23000'/%3E%3C/svg%3E");
  --rasgado-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 600' preserveAspectRatio='none'%3E%3Cpolygon points='14,0 7.0,0.0 3.4,4.9 3.9,11.1 6.1,14.6 9.7,24.9 4.5,34.1 5.0,41.3 3.5,45.7 10.8,50.4 9.8,60.1 4.2,69.5 8.1,75.0 10.2,83.8 3.3,93.9 8.5,101.7 4.1,108.7 3.3,115.5 10.3,126.0 5.2,133.4 7.7,143.7 10.1,153.7 6.2,160.8 6.4,168.6 5.2,172.9 2.9,182.4 8.1,185.7 7.3,191.0 5.6,197.8 4.3,208.7 4.3,215.0 5.0,223.1 9.2,228.9 7.5,234.5 3.4,244.7 4.6,248.2 8.0,257.4 5.5,262.3 6.6,266.7 8.8,270.0 11.1,280.2 11.1,289.1 5.1,292.2 9.5,302.9 11.0,309.2 9.9,317.2 4.2,322.5 3.7,329.1 11.2,335.1 2.6,340.8 4.0,344.2 5.8,353.4 3.4,358.7 6.3,369.6 3.0,374.3 4.0,377.7 3.8,386.1 6.9,389.4 11.5,394.4 7.3,398.4 6.2,407.6 6.8,418.5 6.2,423.4 6.3,426.7 10.5,431.7 7.0,441.4 4.8,444.6 4.4,449.6 10.3,454.4 3.0,458.6 7.6,469.0 6.1,479.9 8.4,490.1 9.2,499.4 3.3,506.4 10.4,511.1 10.8,521.3 8.4,527.0 8.3,536.4 7.3,545.9 8.7,554.1 10.8,559.3 3.2,569.9 11.2,580.7 2.9,589.0 3.6,599.2 7.0,600.0 14,600' fill='%23000'/%3E%3C/svg%3E");
  --mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M2.9,4.2 Q100.7,3.8 198.4,2.9 Q197.2,30.8 195.0,57.0 Q97.2,57.1 2.7,55.4 Q5.3,31.0 4.1,4.0' fill='none' stroke='%233a2418' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M3.5,4.3 Q99.8,1.7 195.9,1.4 Q193.6,28.7 195.0,56.2 Q99.5,57.0 3.8,57.1 Q3.5,30.9 3.5,6.0' fill='none' stroke='%233a2418' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mano-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M2.9,4.2 Q100.7,3.8 198.4,2.9 Q197.2,30.8 195.0,57.0 Q97.2,57.1 2.7,55.4 Q5.3,31.0 4.1,4.0' fill='none' stroke='%23f4ecdd' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M3.5,4.3 Q99.8,1.7 195.9,1.4 Q193.6,28.7 195.0,56.2 Q99.5,57.0 3.8,57.1 Q3.5,30.9 3.5,6.0' fill='none' stroke='%23f4ecdd' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mano-relleno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M2.9,4.2 Q100.7,3.8 198.4,2.9 Q197.2,30.8 195.0,57.0 Q97.2,57.1 2.7,55.4 Q5.3,31.0 4.1,4.0 Z' fill='%23e6d3ac' stroke='none'/%3E%3Cpath d='M2.9,4.2 Q100.7,3.8 198.4,2.9 Q197.2,30.8 195.0,57.0 Q97.2,57.1 2.7,55.4 Q5.3,31.0 4.1,4.0' fill='none' stroke='%233a2418' stroke-width='1.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M3.5,4.3 Q99.8,1.7 195.9,1.4 Q193.6,28.7 195.0,56.2 Q99.5,57.0 3.8,57.1 Q3.5,30.9 3.5,6.0' fill='none' stroke='%233a2418' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mano-chico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M3.8,5.3 Q101.4,3.3 198.3,1.7 Q195.9,28.6 196.1,55.8 Q97.7,54.7 3.1,55.9 Q3.7,31.2 4.2,5.2' fill='none' stroke='%233a2418' stroke-width='1.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M2.6,2.7 Q100.9,3.3 197.9,3.3 Q198.7,29.6 197.5,56.6 Q100.1,55.4 4.2,56.5 Q4.2,31.2 3.4,6.2' fill='none' stroke='%233a2418' stroke-opacity='.55' stroke-width='0.9' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pincel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cmask id='m'%3E%3Crect width='200' height='14' fill='%23fff'/%3E%3Cpath d='M20,6.3 l22,-0.4' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M57,6.7 l29,-0.3' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M94,7.4 l28,-0.0' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M131,6.8 l20,-0.1' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M168,7.4 l29,-0.4' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3C/mask%3E%3Cpath d='M2.0,6.2 L16.0,5.6 L30.0,4.6 L44.0,4.4 L58.0,4.2 L72.0,3.3 L86.0,3.6 L100.0,3.0 L114.0,2.6 L128.0,3.4 L142.0,4.0 L156.0,4.0 L170.0,4.3 L184.0,4.4 L198.0,4.2 L198.0,5.5 L184.0,5.2 L170.0,6.0 L156.0,7.4 L142.0,7.5 L128.0,8.1 L114.0,8.4 L100.0,8.2 L86.0,8.9 L72.0,8.8 L58.0,9.3 L44.0,8.5 L30.0,7.9 L16.0,8.0 L2.0,7.2 Z' fill='%23b07f2e' mask='url(%23m)'/%3E%3C/svg%3E");
  --pincel-yerba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cmask id='m'%3E%3Crect width='200' height='14' fill='%23fff'/%3E%3Cpath d='M20,7.3 l20,-0.2' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M57,5.7 l26,-0.3' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M94,7.4 l28,-0.5' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M131,5.9 l20,-0.5' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3Cpath d='M168,6.5 l19,-0.1' stroke='%23000' stroke-width='.7' opacity='.55'/%3E%3C/mask%3E%3Cpath d='M2.0,6.5 L16.0,5.3 L30.0,5.1 L44.0,4.2 L58.0,3.8 L72.0,2.9 L86.0,3.6 L100.0,2.7 L114.0,2.9 L128.0,3.3 L142.0,3.6 L156.0,3.6 L170.0,4.7 L184.0,4.9 L198.0,4.4 L198.0,5.7 L184.0,6.2 L170.0,6.2 L156.0,6.5 L142.0,7.7 L128.0,8.2 L114.0,7.7 L100.0,8.6 L86.0,8.6 L72.0,8.4 L58.0,8.2 L44.0,8.7 L30.0,9.2 L16.0,8.3 L2.0,7.0 Z' fill='%235b6a2e' mask='url(%23m)'/%3E%3C/svg%3E");
  --linea-mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M0,3 Q29,2.6 49,2.3 Q93,1.4 113,3.0 Q159,1.7 179,3.1 Q214,1.5 234,2.8 Q272,2.8 292,3.5 Q308,2.2 328,2.2 Q358,4.4 378,3.2 Q419,2.6 439,3.5 Q453,2.3 473,3.3 Q513,2.7 533,2.2 Q553,2.1 573,2.6 Q616,2.0 636,3.8' fill='none' stroke='%233a2418' stroke-opacity='.45' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
:root {
  --kraft: #d9c29b; --kraft-2: #cdb083; --tinta: #2f1d13;
  --grano: url(img/grano.webp?v=2);
  --a-mano: "Caveat", "Segoe Print", cursive;
  --r: 2px;
  --sombra-papel: 0 1px 1px rgba(58,36,24,.12), 0 3px 5px -2px rgba(58,36,24,.16), 0 12px 18px -12px rgba(58,36,24,.34);
  --ds: drop-shadow(0 1px 1px rgba(58,36,24,.18)) drop-shadow(0 5px 6px rgba(58,36,24,.13));
  --borde-1: polygon(0 1px, 12% 0, 31% 2px, 52% 0, 70% 1px, 88% 0, 100% 2px, calc(100% - 1px) 24%, 100% 47%, calc(100% - 2px) 71%, 100% 100%, 81% calc(100% - 2px), 63% 100%, 40% calc(100% - 1px), 19% 100%, 0 calc(100% - 2px), 2px 74%, 0 50%, 1px 23%);
  --borde-2: polygon(1px 0, 20% 2px, 43% 0, 61% 1px, 84% 0, calc(100% - 1px) 1px, 100% 30%, calc(100% - 1px) 58%, 100% 83%, calc(100% - 2px) 100%, 72% calc(100% - 1px), 51% 100%, 27% calc(100% - 2px), 2px 100%, 0 76%, 1px 46%, 0 18%);
  --borde-3: polygon(0 0, 17% 1px, 36% 0, 58% 2px, 77% 0, 100% 1px, calc(100% - 2px) 36%, 100% 64%, calc(100% - 1px) calc(100% - 1px), 86% 100%, 66% calc(100% - 2px), 45% 100%, 24% calc(100% - 1px), 0 100%, 2px 62%, 0 33%);
  --cinta: polygon(0 12%, 4% 0, 9% 6%, 92% 2%, 97% 0, 100% 16%, 97% 48%, 100% 86%, 95% 100%, 50% 96%, 4% 100%, 0 84%, 3% 48%);
}
body { background-color: var(--crema); background-image: var(--grano); background-size: 256px; }
.aviso-proto { background: var(--grano) 0 0/256px, var(--cafe); }

/* ---- Cabecera: línea a mano, pincel en el menú ---- */
.cabecera { border-bottom: 0; background: var(--linea-mano) 0 100%/100% 6px no-repeat, rgba(244,236,221,.95); }
.nav a { border-bottom: 0; padding: 10px 0; background: var(--pincel) 0 calc(100% - 4px)/0 7px no-repeat; transition: background-size .25s ease; }
.nav a:hover { background-size: 100% 7px; }
.btn-carrito { border: 0; border-radius: 0; min-height: 44px; padding: 8px 14px; background: var(--mano-chico) 0 0/100% 100% no-repeat; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }
.btn-carrito:hover { background: var(--mano-relleno) 0 0/100% 100% no-repeat; color: var(--cafe); }
.btn-carrito .i { width: 1.6em; height: 1.6em; }
.contador b { background: var(--madera); border-radius: 50% 46% 52% 48%; }

/* ---- Títulos: subrayado de pincel ---- */
.t-sec::after { content: ""; display: block; width: 150px; max-width: 60%; height: 10px; margin-top: 8px; background: var(--pincel) 0 0/100% 100% no-repeat; }
.hero h1 em { background: var(--pincel) 0 92%/100% .22em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .05em .04em; }

/* ---- Secciones: papel crema / kraft / algarrobo, con bordes rasgados ---- */
.categorias, .nosotros { position: relative; background: var(--grano) 0 0/256px, var(--kraft); }
.preparar, .pie { position: relative; background: var(--grano) 0 0/256px, var(--cafe); }
.categorias::before, .preparar::before, .pie::before,
.categorias::after, .preparar::after, .nosotros::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px; background: inherit; pointer-events: none; z-index: 1;
  -webkit-mask: var(--rasgado) 0 0/600px 100% repeat-x; mask: var(--rasgado) 0 0/600px 100% repeat-x;
}
.categorias::before, .preparar::before, .pie::before { top: -13px; }
.categorias::after, .preparar::after, .nosotros::after { bottom: -13px; transform: scaleY(-1); -webkit-mask-image: var(--rasgado-2); mask-image: var(--rasgado-2); }
.envios { padding-top: 40px; }

/* ---- Tarjetas = fichas/etiquetas de papel ---- */
.cat, .tarj, .env-grid > div, .pasos li, .curar {
  position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; box-shadow: none;
  filter: var(--ds); transform: rotate(var(--rot, 0deg)); transition: transform .2s ease;
}
.cat::before, .tarj::before, .env-grid > div::before, .pasos li::after, .curar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grano) 0 0/256px, var(--papel); clip-path: var(--borde, var(--borde-1));
}
.tarj { overflow: visible; }
:is(.cat, .tarj, .env-grid > div, .pasos li):nth-child(4n+1) { --rot: -.6deg; --borde: var(--borde-1); }
:is(.cat, .tarj, .env-grid > div, .pasos li):nth-child(4n+2) { --rot: .45deg; --borde: var(--borde-2); }
:is(.cat, .tarj, .env-grid > div, .pasos li):nth-child(4n+3) { --rot: -.3deg; --borde: var(--borde-3); }
:is(.cat, .tarj, .env-grid > div, .pasos li):nth-child(4n+4) { --rot: .6deg; --borde: var(--borde-2); }
.cat:hover, .tarj:hover, .cat:focus-within, .tarj:focus-within { transform: rotate(0deg) translateY(-3px); }
.tarj:hover .tarj-img img { transform: none; }

/* Cinta adhesiva (washi) */
.cat:nth-child(even)::after, .tarj:nth-child(3n+1)::after, .env-grid > div:nth-child(2)::after, .pasos li:nth-child(odd) > span::after, .curar::after {
  content: ""; position: absolute; z-index: 3; top: -9px; left: 50%; width: 68px; height: 20px; margin-left: -34px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 5px, transparent 5px 11px), rgba(214,189,120,.66);
  clip-path: var(--cinta); transform: rotate(-3deg);
}
.tarj:nth-child(6n+4)::after, .cat:nth-child(4n)::after { background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 4px, transparent 4px 9px), rgba(116,132,70,.55); }
.cat:nth-child(even)::after { left: auto; right: -12px; top: -6px; margin: 0; transform: rotate(38deg); width: 58px; }
.pasos li > span { position: static; }

/* Fotos pegadas: esquinas de foto + grano tenue */
.tarj-img, .cat-img, .car-img { position: relative; border-radius: 0; background: var(--grano) 0 0/256px, #efe3c8; }
.tarj-img::after, .cat-img::after { content: ""; position: absolute; inset: 0; background: var(--grano) 0 0/256px; opacity: .55; pointer-events: none; }
.tarj:nth-child(3n+2) .tarj-img::before, .cat:first-child .cat-img::before, .foto-pegada::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; --e: #4a2f1e; --t: 20px;
  background:
    linear-gradient(135deg, var(--e) 0 48%, rgba(255,255,255,.25) 48% 52%, transparent 52%) 0 0/var(--t) var(--t) no-repeat,
    linear-gradient(225deg, var(--e) 0 48%, rgba(255,255,255,.25) 48% 52%, transparent 52%) 100% 0/var(--t) var(--t) no-repeat,
    linear-gradient(45deg, var(--e) 0 48%, rgba(255,255,255,.25) 48% 52%, transparent 52%) 0 100%/var(--t) var(--t) no-repeat,
    linear-gradient(315deg, var(--e) 0 48%, rgba(255,255,255,.25) 48% 52%, transparent 52%) 100% 100%/var(--t) var(--t) no-repeat;
}
.foto-pegada { position: relative; margin: 0; }
.foto-pegada img { border-radius: 0 !important; border: 9px solid var(--papel) !important; box-shadow: var(--sombra-papel) !important; }
.foto-pegada::before { inset: -3px; --t: 30px; }
.foto-pegada::after { content: ""; position: absolute; inset: 9px; background: var(--grano) 0 0/256px; opacity: .5; pointer-events: none; }
.hero-foto { transform: rotate(1.3deg); }
.hero-foto figcaption { border-radius: 0; font: 600 1.2rem/1.2 var(--a-mano); padding: 4px 14px; transform: translateX(-50%) rotate(-2deg); bottom: 22px; background: var(--grano) 0 0/256px, var(--papel); z-index: 3; }
.hero-foto figcaption span { font-family: var(--sans); font-size: .7rem; font-weight: 500; }
.nos-foto { transform: rotate(-1deg); }
.nos-foto img { aspect-ratio: 5/4; object-fit: cover; width: 100%; }
.estampa { position: absolute; z-index: 4; top: -26px; left: -14px; width: 104px; height: 104px; color: #7a3b22; opacity: .82; transform: rotate(-14deg); filter: url(#tinta); mix-blend-mode: multiply; pointer-events: none; }

/* Estampillas (sellos con perforado) */
.sellos { gap: 12px; filter: drop-shadow(0 1px 1px rgba(58,36,24,.22)) drop-shadow(0 4px 4px rgba(58,36,24,.1)); }
.sellos li { gap: 8px; padding: 10px 14px 10px 12px; background: var(--grano) 0 0/256px, var(--papel); box-shadow: inset 0 0 0 6px var(--papel), inset 0 0 0 7px rgba(139,90,51,.45);
  font-size: .7rem; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--cafe);
  -webkit-mask: radial-gradient(circle, transparent 2.2px, #000 2.7px) -4px -4px/8px 8px, linear-gradient(#000 0 0) center/calc(100% - 8px) calc(100% - 8px) no-repeat;
  mask: radial-gradient(circle, transparent 2.2px, #000 2.7px) -4px -4px/8px 8px, linear-gradient(#000 0 0) center/calc(100% - 8px) calc(100% - 8px) no-repeat;
  transform: rotate(-1.2deg); }
.sellos li:nth-child(even) { transform: rotate(1deg); }
.sellos .i { width: 30px; height: 30px; color: var(--cafe); }

/* ---- Botones ---- */
.btn { position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; text-transform: uppercase; letter-spacing: .13em; font-size: .86rem; padding: 12px 24px; min-height: 48px; transition: transform .12s ease; }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: 3px solid var(--dorado); outline-offset: 4px; }
/* Sello de tinta */
.btn-prim, .btn-wsp { color: #fff; --ink: var(--yerba); }
.btn-wsp { --ink: #1f6e46; }
.btn-prim::before, .btn-wsp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grano) 0 0/256px, var(--ink); filter: url(#tinta); transition: background-color .15s; }
.btn-prim::after, .btn-wsp::after { content: ""; position: absolute; inset: 4px; z-index: -1; border: 1.5px solid rgba(250,245,234,.7); filter: url(#tinta); pointer-events: none; }
.btn-prim:hover, .btn-wsp:hover { background: none; color: #fff; }
.btn-prim:hover::before { --ink: var(--yerba-2); }
.btn-prim:hover::before, .btn-wsp:hover::before { background-color: #3a4516; }
.btn-wsp:hover::before { background-color: #155034; }
.btn-prim:active::before { background-color: #2c3510; }
/* Trazo a mano */
.btn-sec { color: var(--cafe); border: 0; background: var(--mano) 0 0/100% 100% no-repeat; }
.btn-sec:hover { color: var(--cafe); background: var(--mano-relleno) 0 0/100% 100% no-repeat; }
.btn-sec:active { background: var(--mano-relleno) 0 0/100% 100% no-repeat; filter: brightness(.95); }
/* Etiqueta colgante kraft con ojal e hilo */
.tarj-add { position: relative; isolation: isolate; margin: 2px 10px 12px 22px; min-height: 44px; border: 0; border-radius: 0; background: none; color: var(--tinta);
  font: 600 .76rem var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 0 10px 0 20px; transform: rotate(-.8deg); transition: transform .15s ease; }
.tarj-add::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  background: radial-gradient(circle at 12px 50%, var(--papel) 0 3px, #8b5a33 3.4px 4.8px, transparent 5.2px), var(--grano) 0 0/256px, #dcbd8d; transition: background-color .15s; }
.tarj-add::after { content: ""; position: absolute; left: -16px; top: 50%; width: 30px; height: 16px; margin-top: -12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M28 12c-6-1-8-9-14-9S4 10 1 6' fill='none' stroke='%233a2418' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
.tarj-add:hover { background: none; color: #fff; transform: rotate(0); }
.tarj-add:hover::before { background: radial-gradient(circle at 12px 50%, var(--papel) 0 3px, #2c3510 3.4px 4.8px, transparent 5.2px), var(--grano) 0 0/256px, var(--yerba); }
.tarj-add:active { transform: translateY(1px); }
/* Filtros y variantes: etiquetas a mano; activa = tinta */
.filtro, .var span { border: 0; border-radius: 0; min-height: 44px; background: var(--mano-chico) 0 0/100% 100% no-repeat; }
.filtro { padding: 8px 18px; }
.filtro:hover, .var span:hover { background: var(--mano-relleno) 0 0/100% 100% no-repeat; }
.filtro[aria-pressed="true"], .var input:checked + span { background: var(--grano) 0 0/256px, var(--cafe); color: var(--crema); clip-path: var(--borde-2); }
.var span { display: inline-flex; align-items: center; gap: 4px; }
.cant { border: 0; border-radius: 0; background: var(--mano-chico) 0 0/100% 100% no-repeat; }
.cant.mini button { width: 44px; height: 44px; }
.filtros { padding-top: 6px; }

/* ---- Precios: etiqueta de almacén escrita a mano ---- */
.tarj .precio, #ficha-precio { display: inline-block; width: fit-content; font: 600 1.5rem/1 var(--a-mano); color: var(--tinta); padding: 4px 12px 3px 18px;
  background: radial-gradient(circle at 8px 50%, rgba(58,36,24,.6) 0 2px, transparent 2.6px), #fbf0c9; clip-path: polygon(6px 0, 100% 1px, calc(100% - 1px) 100%, 6px 100%, 0 50%); transform: rotate(-2deg); }
#ficha-precio { font-size: 1.9rem; }
.tarj-pie { gap: 5px; }
.car-pie .total dd { font: 600 1.6rem/1 var(--a-mano); }

/* ---- Ilustraciones grabadas ---- */
.ilus-ph { background: var(--grano) 0 0/256px, #f1e6cf; }
.ilus-ph svg, .cat-img.ilus svg { width: 74%; }
.ilus-ph small { border-radius: 0; background: var(--papel); transform: rotate(-1.5deg); box-shadow: 0 1px 2px rgba(58,36,24,.2); }

/* ---- Cómo preparar: fichas de receta sobre algarrobo ---- */
.pasos li { color: var(--cafe); }
.pasos li::after { background: linear-gradient(transparent 0 7px, rgba(176,127,46,.6) 7px 8.5px, transparent 8.5px), var(--grano) 0 0/256px, var(--papel); }
.pasos b { color: var(--tinta); }
.pasos li::before { border: 0; color: #7a3b22; font-size: 1.45rem; box-shadow: inset 0 0 0 2px #7a3b22, inset 0 0 0 4px var(--papel), inset 0 0 0 5px #7a3b22; filter: url(#tinta); }
.curar { color: var(--cafe); border: 0; padding: 18px 18px 16px; --rot: -.5deg; }
.curar::before { background: var(--grano) 0 0/256px, var(--kraft); clip-path: var(--borde-3); }
.curar h3 { color: var(--tinta); }
.preparar .t-sec::after { opacity: .9; }

/* ---- Envíos: rótulos de despacho ---- */
.env-grid { gap: 18px; }
.env-grid > div { grid-template-columns: 48px 1fr; padding: 18px 16px; }
.env-grid > div::before { background: linear-gradient(90deg, transparent 0 10px, transparent 10px), var(--grano) 0 0/256px, var(--papel); box-shadow: inset 0 0 0 5px var(--papel); }
.env-grid > div { background-image: none; }
.env-grid .i { width: 42px; height: 42px; color: var(--cafe); }

/* ---- Carrito: hoja con borde rasgado ---- */
.carrito { background: var(--grano) 0 0/256px, var(--papel); }
.carrito::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 13px; background: inherit; -webkit-mask: var(--rasgado-v) 0 0/100% 600px repeat-y; mask: var(--rasgado-v) 0 0/100% 600px repeat-y; }
.car-cab { border-bottom: 0; background: var(--linea-mano) 0 100%/100% 6px no-repeat; }
.car-img { border: 3px solid #fff; box-shadow: 0 1px 3px rgba(58,36,24,.25); }
.car-pie { position: relative; border-top: 0; background: var(--grano) 0 0/256px, var(--kraft); }
.car-pie::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px; background: inherit; -webkit-mask: var(--rasgado) 0 0/600px 100% repeat-x; mask: var(--rasgado) 0 0/600px 100% repeat-x; }
.car-pie .total { border-top: 0; background: var(--linea-mano) 0 0/100% 6px no-repeat; }

/* ---- Diálogos: hoja con marco de etiqueta y cinta ---- */
dialog { border-radius: 2px; background: var(--grano) 0 0/256px, var(--papel); box-shadow: inset 0 0 0 7px var(--papel), inset 0 0 0 8px rgba(139,90,51,.35), 0 24px 60px -12px rgba(0,0,0,.5); }
dialog::before { content: ""; position: absolute; top: 0; left: 50%; width: 92px; height: 22px; margin-left: -46px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 5px, transparent 5px 11px), rgba(214,189,120,.7); clip-path: var(--cinta); transform: rotate(-2deg); }
dialog > .cerrar { background: transparent; }
.ficha-media { position: relative; background: var(--grano) 0 0/256px, #efe3c8; }
.ficha-media::after { content: ""; position: absolute; inset: 0; background: var(--grano) 0 0/256px; opacity: .45; pointer-events: none; }
.campos input, .campos select { border-radius: 2px; background: #fffdf6; border-color: rgba(58,36,24,.3); }
.medio { border-radius: 2px; background: var(--grano) 0 0/256px, #fffdf6; }
.correo { border-radius: 0; background: var(--grano) 0 0/256px, #fbf6e9; }
.demo-tag { border-radius: 0; transform: rotate(-1deg); }
.cerrar { border-radius: 0; }

/* ---- Varios ---- */
.toast { border-radius: 0; background: var(--grano) 0 0/256px, var(--cafe); box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }
.wsp-flot { box-shadow: inset 0 0 0 4px #1f7a4d, inset 0 0 0 5.5px rgba(255,255,255,.65), 0 8px 20px -6px rgba(0,0,0,.4); }
.ej, .tag-ej { border-radius: 0; }
.pie-fin { border-top: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3Q150 1 300 3.5T600 3' fill='none' stroke='%23f4ecdd' stroke-opacity='.3' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 6px no-repeat; }

@media (min-width: 960px) {
  .estampa { width: 128px; height: 128px; top: -34px; left: -40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat:hover, .tarj:hover, .cat:focus-within, .tarj:focus-within { transform: rotate(var(--rot, 0deg)); }
}

/* ---- Stickers troquelados: ilustración grabada pegada sobre la foto real (decorativo, aria-hidden) ---- */
.hero-img, .cat-img, .tarj-img, .ficha-media { position: relative; }
.hero-img { display: block; }
.sticker { position: absolute; z-index: 3; width: 36%; aspect-ratio: 1; pointer-events: none; --sr: -6deg;
  transform: rotate(var(--sr)); transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 1px 1px rgba(40,24,14,.35)) drop-shadow(0 4px 5px rgba(40,24,14,.28)); }
.st-in { position: absolute; inset: 0; display: block; }
.st-in svg { position: absolute; inset: -14%; width: 128%; height: 128%; overflow: visible; filter: url(#troquel); }
.st-ad { right: 4%; bottom: 4%; --sr: 7deg; }
.st-ai { left: 4%; bottom: 4%; --sr: -6deg; }
.st-sd { right: 4%; top: 4%; --sr: 5deg; }
.st-si { left: 4%; top: 4%; --sr: -7deg; }
:is(.tarj, .cat):hover .sticker, :is(.tarj, .cat):focus-within .sticker, .ficha-media:hover .sticker, .hero-foto:hover .sticker {
  transform: rotate(calc(var(--sr) * .6)) translateY(-4px) scale(1.03);
  filter: drop-shadow(0 2px 1px rgba(40,24,14,.3)) drop-shadow(0 10px 10px rgba(40,24,14,.3)); }
.cat .sticker { width: 38%; }
.hero-img .sticker { width: 30%; top: 6%; right: 5%; }
.ficha-media .sticker { width: 30%; }
.car-img .sticker { display: none; }
@media (prefers-reduced-motion: reduce) { .sticker { transition: none; } }

/* ---- Galería de la ficha: miniaturas como fotitos pegadas ---- */
.galeria { position: absolute; z-index: 4; bottom: 10px; display: flex; gap: 6px; }
.galeria.g-izq { left: 10px; } .galeria.g-der { right: 10px; }
.galeria button { all: unset; cursor: pointer; width: 46px; height: 56px; border: 3px solid #fffaf0; box-shadow: 0 2px 4px rgba(40,24,14,.4); background: #efe3c8; transform: rotate(-2deg); }
.galeria button:nth-child(even) { transform: rotate(2deg); }
.galeria button[aria-current] { outline: 2px solid var(--dorado); outline-offset: 1px; }
.galeria button:focus-visible { outline: 3px solid var(--dorado); }
.galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 13-oct · El sticker va pegado ENCIMA de la tarjeta (sobresale del borde de la foto y de la ficha),
   no recortado dentro de la foto: el recorte pasa de la caja a la imagen misma. */
.cat, .tarj { overflow: visible; }
.cat-img, .tarj-img, .ficha-media { overflow: visible; }
.cat-img > img, .tarj-img > img, .ficha-media > img, .ficha-media img:not(.sticker img) { border-radius: 10px; width: 100%; height: 100%; object-fit: cover; display: block; }
.sticker { z-index: 6; }
.cat .sticker, .tarj .sticker { width: 40%; }
.cat .st-ad, .tarj .st-ad { right: -9%; bottom: -10%; --sr: 9deg; }
.cat .st-ai, .tarj .st-ai { left: -9%;  bottom: -10%; --sr: -8deg; }
.cat .st-sd, .tarj .st-sd { right: -9%; top: -9%;     --sr: 7deg; }
.cat .st-si, .tarj .st-si { left: -9%;  top: -9%;     --sr: -9deg; }
.ficha-media .st-ad { right: -5%; bottom: -6%; }
.ficha-media .st-sd { right: -5%; top: -5%; }
@media (max-width: 560px) { .cat .sticker, .tarj .sticker { width: 34%; } .cat :is(.st-ad,.st-sd), .tarj :is(.st-ad,.st-sd) { right: -5%; } .cat :is(.st-ai,.st-si), .tarj :is(.st-ai,.st-si) { left: -5%; } }
/* los stickers sobresalen de las tarjetas: que nunca generen scroll horizontal */
html, body { overflow-x: clip; }

/* 13-oct · más aire y mejor uso del ancho: contenedor más ancho y separación generosa entre fichas
   (los stickers que sobresalen necesitan espacio para no montarse sobre la ficha vecina). */
.contenedor { max-width: 1320px; padding: 0 clamp(16px, 3vw, 40px); }
.grilla { gap: 22px 18px; }
.cat-grid { gap: 20px 18px; }
@media (min-width: 720px) {
  .grilla { gap: 38px 32px; }
  .cat-grid { gap: 32px 30px; }
}
@media (min-width: 1100px) {
  .grilla { grid-template-columns: repeat(4, 1fr); gap: 46px 40px; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 36px; }
}
/* en las fichas del catálogo el sticker de abajo tapaba el nombre del producto: se sube a la esquina superior */
.tarj .st-ad { bottom: auto; top: -8%; right: -9%; --sr: 9deg; }
.tarj .st-ai { bottom: auto; top: -8%; left: -9%; --sr: -8deg; }
/* stickers nítidos: sin brillo difuso encima y sombra más corta */
.sticker { filter: drop-shadow(0 1px 0 rgba(40,24,14,.35)) drop-shadow(0 3px 3px rgba(40,24,14,.22)); will-change: auto; }
:is(.tarj, .cat):hover .sticker, .ficha-media:hover .sticker, .hero-foto:hover .sticker { filter: drop-shadow(0 1px 0 rgba(40,24,14,.3)) drop-shadow(0 6px 6px rgba(40,24,14,.24)); }
.st-in svg { shape-rendering: geometricPrecision; image-rendering: auto; }
/* 14-oct · stickers nítidos (pedido de Claudio): sin el filtro SVG «troquel» (se rasterizaba borroso) ni la sombra
   translúcida bajo el dibujo; borde blanco limpio hecho con sombras sin desenfoque y una sombra corta y definida. */
.st-in svg { filter: none; }
.st-in svg ellipse[opacity] { display: none; }
.st-in { filter: drop-shadow(2px 0 0 #fbf4e4) drop-shadow(-2px 0 0 #fbf4e4) drop-shadow(0 2px 0 #fbf4e4) drop-shadow(0 -2px 0 #fbf4e4) drop-shadow(1.5px 1.5px 0 #fbf4e4) drop-shadow(-1.5px -1.5px 0 #fbf4e4); }
.sticker, :is(.tarj, .cat):hover .sticker, :is(.tarj, .cat):focus-within .sticker, .ficha-media:hover .sticker, .hero-foto:hover .sticker { filter: drop-shadow(0 1.5px 0 rgba(40,24,14,.32)); }