/* Catálogo Tacural — https://chacinadostacuralsrl.com.ar/catalogo/
   Página de catálogo (14/10/2026): barra con categorías y buscador, grilla de productos, ficha de cada
   producto y el PDF para descargar. Conserva la estética del folleto: fondo casi blanco, recortes con
   sombra, títulos en Bodoni itálica, nombres en Barlow Condensed y códigos en rojo.
   index.html lo arma construir_catalogo.py desde catalogo.json: no se edita a mano. */

@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fuentes/barlow-condensed-500.woff) format("woff")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fuentes/barlow-condensed-600.woff) format("woff")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/barlow-condensed-700.woff) format("woff")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:800;font-display:swap;src:url(fuentes/bodoni-moda-800-italic.woff) format("woff")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url(fuentes/caveat-700.woff) format("woff")}

:root{
  --azul:#082d50;
  --azul-2:#14466d;
  --rojo:#ec2028;
  --tinta:#1e3040;
  --gris:#6d7782;
  --linea:#e7e2da;
  --fondo:#fbfaf8;
  --condensada:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --serif:"Bodoni Moda","Bodoni MT",Didot,Georgia,serif;
  --manuscrita:"Caveat","Segoe Script",cursive;
  --ancho:1180px;
  --alto-barra:66px;
  --sombra:drop-shadow(5px 8px 6px rgba(48,43,38,.19)) drop-shadow(0 1px 1px rgba(48,43,38,.15));
  --u:.75px; /* el cierre de la fábrica conserva las medidas de la hoja del folleto (520 px) */
  color-scheme:light;
}
@supports (width:clamp(1px,1vw,2px)){
  :root{--u:clamp(.6px,calc(100vw / 520),1.4px)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--alto-barra) + 14px)}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font:500 17px/1.4 var(--condensada);
  color:var(--tinta);
  /* Fondo continuo casi blanco: estudio beige bajo una capa blanca, como en el folleto. */
  background-color:var(--fondo);
  background-image:linear-gradient(to bottom,#fffffff0,#ffffffdf),url(img/fondo-estudio.jpg);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
main{flex:1 0 auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid #1573be;outline-offset:3px}
[hidden]{display:none!important}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portada-subrayado path,.categoria-subrayado path,.historia-firma path{fill:none;stroke:var(--rojo);stroke-width:5;stroke-linecap:round}

/* Cinta de marca, de lado a lado (se va al bajar; la barra queda) */
.cinta{height:clamp(24px,6vw,42px)}
.cinta svg{display:block;width:100%;height:100%}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 16px/1 var(--condensada);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--azul);border:1px solid var(--azul);padding:12px 20px 11px;border-radius:999px;cursor:pointer;box-shadow:0 8px 18px -12px rgba(8,45,80,.9);transition:background-color .2s,color .2s,transform .2s,box-shadow .2s}
.boton:hover{background:var(--azul-2);border-color:var(--azul-2)}
.boton svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.boton small{font-size:.8em;font-weight:500;letter-spacing:.04em;opacity:.75}
.boton-claro{background:transparent;color:var(--azul);box-shadow:none}
.boton-claro:hover{background:rgba(8,45,80,.07);border-color:var(--azul)}

/* Barra fija: logo, categorías, buscador y PDF */
.barra{position:sticky;top:0;z-index:30;background:rgba(251,250,248,.9);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.barra.flotante{border-bottom-color:var(--linea);box-shadow:0 10px 24px -18px rgba(8,45,80,.5)}
.barra-interior{max-width:var(--ancho);margin:0 auto;padding:10px 20px;display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(170px,210px) auto auto;grid-template-areas:"volver logo nav buscar tema pdf";align-items:center;gap:10px 12px}
/* «Inicio»: vuelve a la página principal del sitio (Aarón, 15/10/2026) */
.barra-volver{grid-area:volver;padding:11px 14px 10px}
/* Inicio y alta: «Quiero ser cliente» (Aarón, 15/10/2026) y «Catálogo», juntos a la derecha */
.barra-acciones{grid-area:pdf;display:flex;align-items:center;gap:8px}
.barra-acciones .boton{padding:11px 16px 10px}
.barra-logo{grid-area:logo;display:block;line-height:0}
.barra-logo img{height:44px;width:auto}
.categorias{grid-area:nav;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.categorias::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font:600 15px/1 var(--condensada);letter-spacing:.05em;text-transform:uppercase;color:var(--azul);text-decoration:none;padding:10px 10px 9px;border-radius:999px;border:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.chip:hover{border-color:#c6d0da}
.chip.activa{background:var(--azul);border-color:var(--azul);color:#fff}
.buscador{grid-area:buscar;position:relative;display:block}
.buscador svg{position:absolute;left:13px;top:50%;width:17px;height:17px;transform:translateY(-50%);fill:none;stroke:var(--gris);stroke-width:2;stroke-linecap:round;pointer-events:none}
.buscador input{width:100%;font:500 16px/1.2 var(--condensada);color:var(--tinta);padding:10px 12px 9px 38px;border:1px solid #d6d0c6;border-radius:999px;background:#fff;-webkit-appearance:none;appearance:none}
.buscador input::placeholder{color:#8a939b}
.buscador input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(8,45,80,.14)}
.barra .boton-pdf{grid-area:pdf;padding:11px 16px 10px}
/* Versión clara / oscura (el botón lo muestra catalogo.js) */
.tema-boton{grid-area:tema;padding:11px 14px 10px}
.tema-boton .icono-sol,[data-tema="oscura"] .tema-boton .icono-luna{display:none}
[data-tema="oscura"] .tema-boton .icono-sol{display:block}

/* Portada */
/* De borde a borde (el contenido, al mismo ancho que el resto con el relleno): el halo de la foto puede salirse de su
   columna y solo se corta en el borde de la pantalla, sin barra horizontal. */
.portada{--lado:max(20px,calc((100% - var(--ancho)) / 2 + 20px));padding:clamp(26px,5vw,60px) var(--lado) clamp(4px,2vw,20px);overflow-x:clip;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:20px}
.portada-titulo{margin:0;font:italic 800 clamp(58px,9.6vw,118px)/.88 var(--serif);letter-spacing:-.045em;color:var(--azul)}
.portada-titulo .linea{display:block}
.portada-titulo .linea+.linea{font-size:.56em;letter-spacing:-.03em;margin-top:.14em}
.portada-subrayado{display:block;width:min(80%,430px);height:18px;margin:14px 0 0;overflow:visible}
.portada-dato{margin:18px 0 0;font:600 15px/1.3 var(--condensada);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.portada-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
/* Portada: el grupo de productos suelto, sin marco, sobre un halo difuminado de sus propios colores; la base se
   pierde en el fondo (ya viene así en la imagen). El grupo da el tamaño; el halo sobresale (su lugar va en línea). */
.portada-foto{--halo:.42;position:relative;margin:0;isolation:isolate}
.portada-halo{position:absolute;z-index:1;max-width:none;height:auto;opacity:var(--halo);scale:1.06;pointer-events:none}
.portada-grupo{position:relative;z-index:2;display:block}
.portada-grupo img{display:block;width:100%;height:auto}
/* Sello «Sin gluten» (el logo de Aarón) pegado arriba a la izquierda del grupo, apenas girado */
.portada-sello{position:absolute;z-index:3;left:-1%;top:-3%;width:clamp(82px,10.5vw,148px);height:auto;rotate:-12deg;filter:drop-shadow(0 8px 10px rgba(40,20,10,.3)) drop-shadow(0 2px 2px rgba(40,20,10,.25));pointer-events:none}

/* Categorías */
.categoria{max-width:var(--ancho);margin:0 auto;padding:clamp(40px,6vw,70px) 20px 6px}
.categoria-encabezado{text-align:center;margin-bottom:clamp(22px,4vw,40px)}
.categoria-titulo{margin:0;font:italic 800 clamp(46px,7vw,78px)/.92 var(--serif);letter-spacing:-.04em;color:var(--azul)}
.categoria-titulo .linea{display:block}
.categoria-subrayado{display:block;width:min(70%,340px);height:16px;margin:8px auto 0;overflow:visible}
.categoria-cantidad{margin:10px 0 0;font:600 14px/1 var(--condensada);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}

/* Productos: sin tarjetas; el recorte flota sobre el fondo con su sombra. Flex y no grid: así la
   última fila, si queda incompleta, va centrada. */
.grilla{--columnas:2;--hueco-x:14px;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--hueco-x);row-gap:30px}
.producto{position:relative;flex:0 0 calc((100% - (var(--columnas) - 1) * var(--hueco-x)) / var(--columnas));min-width:0;text-align:center}
.producto-foto{display:block;position:relative;height:0;padding-top:92%}
.producto-foto img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;filter:var(--sombra)}
.producto-foto .alterna{opacity:0}
.producto-nombre{margin:12px 0 9px;min-height:2.2em;display:flex;align-items:center;justify-content:center;font:700 clamp(15px,1.7vw,19px)/1.06 var(--condensada);letter-spacing:.01em;text-transform:uppercase;color:var(--azul)}
.producto-nombre span{text-wrap:balance}
.producto-nombre .renglon{display:inline}
.producto-nombre.cortado .renglon{display:block}
/* Solo en la versión oscura: el logo grande con su sello, el lema, la descripción, la frase y la franja de valores */
.portada-lema,.producto-descripcion,.producto-frase,.valores{display:none}
.producto-codigo{display:inline-block;margin:0;font:700 clamp(14px,1.5vw,17px)/1 var(--condensada);letter-spacing:.04em;color:#fff;background:var(--rojo);border-radius:6px;padding:6px 12px 5px;white-space:nowrap}
.producto-codigo abbr{text-decoration:none;border:0;cursor:inherit}
/* Producto con variantes (el entero y la mitad, 112/113): una pastilla por código, una debajo de la otra */
.producto-codigos{display:flex;flex-direction:column;align-items:center;gap:6px}
.producto-variante{margin-left:1px;font-weight:500}
/* peso aproximado por unidad, de lo facturado (15/10/2026) */
.producto-peso{margin:8px 0 0;font:500 15px/1.25 var(--condensada);letter-spacing:.02em;color:var(--gris)}
.producto-ver{position:absolute;left:50%;top:78%;z-index:1;transform:translate(-50%,8px);opacity:0;font:600 12px/1 var(--condensada);letter-spacing:.12em;text-transform:uppercase;color:var(--azul);background:#fff;border-radius:999px;padding:7px 12px 6px;box-shadow:0 8px 20px -10px rgba(8,45,80,.6);pointer-events:none;white-space:nowrap}
.producto-boton{position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;z-index:2;background:none;border:0;padding:0;border-radius:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}

.sin-resultados{max-width:var(--ancho);margin:44px auto 0;padding:0 20px;text-align:center;font:600 21px/1.3 var(--condensada);color:var(--gris)}

/* Alta de clientes */
.sumate{max-width:var(--ancho);margin:clamp(54px,8vw,96px) auto 0;padding:0 20px}
.sumate-caja{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;padding:24px 28px 28px;border-radius:18px;background:var(--azul);color:#fff}
.sumate-caja::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--rojo)}
.sumate-caja p{margin:0;font:italic 800 clamp(26px,3.4vw,38px)/1.05 var(--serif);letter-spacing:-.02em}
.sumate .boton{background:#fff;border-color:#fff;color:var(--azul)}
.sumate .boton:hover{background:#eef2f6;border-color:#eef2f6}

/* Cierre: la foto histórica de la fábrica (Chaco 6349) en su color, de lado a lado y sin difuminar (Aarón, 14/10/2026:
   «que se vea más… y que ocupe toda la parte donde está»), fundida con el fondo arriba y abajo («así queda bien con el
   fondo»). Un velo oscuro en la parte de abajo, para la frase y el logo en blanco, que van por encima del fundido.
   Igual en todas las versiones y fondos. */
.historia{--u:clamp(.82px,.06vw + .6px,1.2px);position:relative;flex-shrink:0;width:100%;height:clamp(340px,42vw,620px);margin:clamp(40px,6vw,80px) 0 0;overflow:hidden;background:#3a2a1d;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.65) 4%,#000 11%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.65) 4%,#000 11%,#000 80%,transparent 100%)}
.historia-foto{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 12%}
.historia::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(to bottom,rgba(10,7,4,0) 38%,rgba(10,7,4,.74) 78%,rgba(10,7,4,.74) 100%)}
.historia-interior{position:relative;z-index:1;max-width:var(--ancho);height:100%;margin:0 auto}
.historia-firma{position:absolute;left:20px;bottom:24%;width:calc(250 * var(--u));transform:rotate(-7deg);color:#fff}
.historia-firma p{margin:0;font:700 calc(48 * var(--u))/.88 var(--manuscrita);text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.historia-firma p>span{display:block}
.historia-firma p>span:last-child{color:#f3c867}
.historia-firma svg{display:block;width:calc(205 * var(--u));height:calc(19 * var(--u));margin:calc(8 * var(--u)) calc(3 * var(--u)) 0 auto;overflow:visible}
.historia-base{position:absolute;right:20px;bottom:22%;display:flex;align-items:flex-end;gap:calc(18 * var(--u))}
.historia-base p{margin:0;font:500 calc(16 * var(--u))/1.3 var(--condensada);letter-spacing:.04em;color:#f3ece2;text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.historia-base strong{font-weight:700;color:#fff}
.historia-logo{display:block;width:calc(112 * var(--u));height:calc(65 * var(--u))}
.historia-logo img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.45))}
@media (max-width:640px){
  /* en el celular, todo centrado abajo: la frase y debajo el lugar con el logo */
  .historia{height:clamp(400px,112vw,480px)}
  .historia-firma{left:50%;bottom:calc(21% + 70 * var(--u));margin-left:calc(-125 * var(--u))}
  .historia-base{left:20px;right:20px;bottom:21%;justify-content:center}
  .historia-base p{text-align:left}
}
.pie{width:100%;max-width:var(--ancho);margin:0 auto;padding:16px 20px 26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;font:500 15px/1.3 var(--condensada);color:var(--gris)}
.pie p{margin:0}
.pie nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pie a{color:var(--azul);text-decoration:none}
.pie a:hover{text-decoration:underline}

/* Ficha del producto (con la ficha abierta, la página de fondo no se desplaza) */
html.con-ficha{overflow:hidden}
.ficha{width:min(960px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);padding:0;border:0;border-radius:18px;background:var(--fondo);color:var(--tinta);box-shadow:0 30px 80px -20px rgba(8,45,80,.55);overflow:auto;overscroll-behavior:contain}
.ficha::backdrop{background:rgba(8,29,51,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ficha-cuerpo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:440px}
.ficha-galeria{display:flex;flex-direction:column;gap:14px;padding:38px 30px 24px;background:linear-gradient(to bottom,#fffffff0,#ffffffdf),url(img/fondo-estudio.jpg) center/cover}
.ficha-foto{position:relative;flex:1;min-height:320px}
.ficha-foto img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(9px 14px 12px rgba(48,43,38,.24)) drop-shadow(0 2px 2px rgba(48,43,38,.12))}
.ficha-miniaturas{display:flex;justify-content:center;gap:12px}
.ficha-miniaturas button{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;padding:6px 6px 5px;border:2px solid transparent;border-radius:12px;background:#fff;cursor:pointer;box-shadow:0 6px 14px -10px rgba(8,45,80,.7);font:600 12px/1 var(--condensada);letter-spacing:.08em;text-transform:uppercase;color:var(--azul)}
.ficha-miniaturas button[aria-pressed="true"]{border-color:var(--azul)}
.ficha-miniaturas img{display:block;width:66px;height:52px;object-fit:contain}
.ficha-texto{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:52px 34px 30px}
.ficha-categoria{margin:0;font:600 14px/1 var(--condensada);letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.ficha-nombre{margin:0;font:700 clamp(30px,4vw,46px)/1 var(--condensada);text-transform:uppercase;color:var(--azul)}
.ficha-nombre:focus{outline:none} /* recibe el foco al abrir (autofocus): así se anuncia el nombre */
.ficha-codigo{margin:2px 0 0;font:700 24px/1 var(--condensada);letter-spacing:.04em;color:#fff;background:var(--rojo);border-radius:8px;padding:9px 15px 8px}
.ficha-codigo abbr{text-decoration:none;border:0}
.ficha-peso{margin:12px 0 0;font:600 18px/1.3 var(--condensada);color:var(--tinta)}
.ficha-descripcion{margin:4px 0 0;max-width:30em;font:500 18px/1.35 var(--condensada);color:var(--tinta)}
.ficha-frase{margin:0;font:700 30px/1 var(--manuscrita);color:var(--rojo);transform:rotate(-4deg)}
.ficha-acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ficha-navegar{display:flex;justify-content:space-between;gap:10px;width:100%;margin-top:auto;padding-top:18px}
.ficha-navegar .boton{padding:10px 14px 9px}
.ficha-cerrar{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--azul);cursor:pointer;box-shadow:0 6px 16px -10px rgba(8,45,80,.8)}
.ficha-cerrar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* Ficha técnica (20/10/2026, pedido de Aarón): en los productos que la traen en catalogo.json, arriba cuatro datos por
   porción y abajo una banda con los ingredientes y la tabla nutricional de la etiqueta. --l es el color de los filetes. */
.ficha-resumen{--l:var(--linea);width:100%;margin-top:4px}
.ficha-resumen-titulo{margin:0 0 10px;font:600 13px/1 var(--condensada);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.ficha-resumen-titulo span{font-size:15px;letter-spacing:.02em;text-transform:none;color:var(--tinta)} /* «40 g»: la g de gramos, en minúscula */
.ficha-acciones .boton{padding:11px 16px 10px;font-size:15px}
.ficha-claves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--l);border-bottom:1px solid var(--l)}
.ficha-claves div{padding:12px 14px 11px}
.ficha-claves div:nth-child(odd){padding-left:0}
.ficha-claves div:nth-child(even){border-left:1px solid var(--l)}
.ficha-claves div:nth-child(n+3){border-top:1px solid var(--l)}
.ficha-claves dt{font:600 12px/1 var(--condensada);letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.ficha-claves dd{display:flex;align-items:baseline;gap:4px;margin:6px 0 0;font:600 16px/1 var(--condensada);color:var(--tinta)}
.ficha-claves b{font:700 34px/1 var(--condensada);letter-spacing:-.01em;color:var(--azul)}
.ficha-ir-detalle svg{width:17px;height:17px;margin:-2px -3px 0 0;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ficha-detalle{--l:var(--linea);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,4vw,44px);align-items:start;padding:clamp(28px,4vw,40px) 34px 38px;background:#f4f0ea;border-top:1px solid var(--l)}
.ficha-detalle-titulo{margin:0;font:italic 800 36px/1 var(--serif);letter-spacing:-.04em;color:var(--azul)}
.ficha-subrayado{display:block;width:170px;height:12px;margin:6px 0 0;overflow:visible}
.ficha-subrayado path{fill:none;stroke:var(--rojo);stroke-width:5;stroke-linecap:round}
.ficha-ingredientes-lista{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.ficha-ingredientes-lista li{padding:9px 15px 8px;border:1px solid var(--l);border-radius:999px;background:#fff;font:600 17px/1 var(--condensada);color:var(--tinta)}
.ficha-ingredientes-lista li:first-child{background:var(--azul);border-color:var(--azul);color:#fff} /* el principal: la carne */
.ficha-aditivos{margin-top:18px}
.ficha-aditivo{margin:0;font:500 17px/1.35 var(--condensada);color:var(--tinta)}
.ficha-aditivo+.ficha-aditivo{margin-top:6px}
.ficha-aditivo-funcion{margin-right:4px;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
/* la leyenda de alérgenos de la etiqueta («Contiene derivados de soja.»): que se vea, sin alarmar */
.ficha-contiene{display:inline-block;margin:16px 0 0;padding:7px 12px 6px 11px;border-left:3px solid var(--rojo);border-radius:2px 8px 8px 2px;background:rgba(236,32,40,.07);font:700 14px/1.2 var(--condensada);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.ficha-sello{display:flex;align-items:center;gap:12px;margin:26px 0 0;font:700 19px/1 var(--condensada);letter-spacing:.08em;text-transform:uppercase;color:var(--rojo)}
.ficha-sello img{width:58px;height:auto;filter:drop-shadow(0 4px 6px rgba(40,20,10,.22))}
.ficha-nutricion{overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(8,45,80,.07),0 22px 44px -28px rgba(8,45,80,.55)}
.nutri-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding:16px 20px 14px;background:var(--azul);color:#fff}
.nutri-titulo{margin:0;font:700 21px/1 var(--condensada);letter-spacing:.08em;text-transform:uppercase}
.nutri-porcion{margin:0;font:500 16px/1 var(--condensada);color:rgba(255,255,255,.8)}
.nutri-porcion span{font-weight:600;color:#fff}
.nutri{width:100%;border-collapse:collapse;font:500 16px/1.15 var(--condensada);color:var(--tinta);font-variant-numeric:tabular-nums}
.nutri thead th{padding:11px 20px 9px 0;border-bottom:2px solid var(--azul);font:600 12px/1.1 var(--condensada);letter-spacing:.1em;text-transform:uppercase;text-align:right;color:var(--gris)}
.nutri thead td{border-bottom:2px solid var(--azul)}
.nutri abbr{text-decoration:none;border:0}
.nutri tbody tr+tr{border-top:1px solid var(--l)}
.nutri tbody th{padding:9px 10px 8px 20px;font-weight:600;text-align:left}
.nutri td{padding:9px 20px 8px 0;text-align:right;white-space:nowrap}
.nutri .nutri-vd{width:4.6em;font-weight:700;color:var(--azul)}
.nutri .nutri-sub th{padding-left:38px;font-weight:500;color:var(--gris)}
.nutri .nutri-sub td{color:var(--gris)}
.nutri .nutri-sub .nutri-vd{font-weight:600}
.nutri-energia th,.nutri-energia td{padding-top:12px;padding-bottom:11px;font-size:19px}
.nutri-otra{display:block;margin-top:3px;font-size:13px;font-weight:500;color:var(--gris)}
.nutri-nota{margin:0;padding:12px 20px 16px;border-top:2px solid var(--azul);font:500 13.5px/1.35 var(--condensada);color:var(--gris)}
@media (max-width:900px){
  .ficha-detalle{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ficha-claves div,.ficha-claves div:nth-child(odd){padding:12px 8px 11px;text-align:center}
  .ficha-claves dd{justify-content:center}
  .ficha-detalle{padding:30px 16px 34px}
  .ficha-ingredientes{text-align:center}
  .ficha-subrayado{margin-left:auto;margin-right:auto}
  .ficha-ingredientes-lista,.ficha-sello{justify-content:center}
  .nutri-cabeza{padding:14px 16px 12px}
  .nutri{font-size:15px}
  .nutri tbody th{padding-left:16px;white-space:nowrap}
  .nutri .nutri-sub th{padding-left:28px}
  .nutri thead th,.nutri td{padding-right:14px}
  .nutri thead th{font-size:11px;letter-spacing:.06em}
  .nutri .nutri-vd{width:3.4em}
  .nutri-energia th,.nutri-energia td{font-size:17px}
  .nutri-nota{padding:12px 16px 16px}
}
@media screen and (prefers-reduced-motion:no-preference){
  /* los cuatro datos suben de a uno cada vez que se pone un producto (catalogo.js los vuelve a crear) */
  .ficha-claves div{animation:ficha-dato .55s cubic-bezier(.16,1,.3,1) backwards}
  .ficha-claves div:nth-child(2){animation-delay:.06s}
  .ficha-claves div:nth-child(3){animation-delay:.12s}
  .ficha-claves div:nth-child(4){animation-delay:.18s}
}
@keyframes ficha-dato{from{opacity:0;transform:translateY(8px)}}
/* Versión oscura (y los fondos de fondos.html, por sus variables) */
[data-tema="oscura"] .ficha-resumen,[data-tema="oscura"] .ficha-detalle{--l:rgba(var(--acento-rgb),.28)}
[data-tema="oscura"] .ficha-resumen-titulo,[data-tema="oscura"] .ficha-claves dt{color:var(--gris-calido)}
[data-tema="oscura"] .ficha-claves dd{color:var(--texto-2)}
[data-tema="oscura"] .ficha-resumen-titulo span{color:var(--crema)}
[data-tema="oscura"] .ficha-claves b{color:var(--dorado-2)}
[data-tema="oscura"] .ficha-detalle{background:var(--banda-fondo)}
[data-tema="oscura"] .ficha-detalle-titulo{font:700 48px/.8 var(--manuscrita);letter-spacing:0;color:var(--crema)}
[data-tema="oscura"] .ficha-ingredientes-lista li{background:var(--campo-fondo);color:var(--crema)}
[data-tema="oscura"] .ficha-ingredientes-lista li:first-child{background:var(--dorado);border-color:var(--dorado);color:var(--sobre-acento)}
[data-tema="oscura"] .ficha-aditivo{color:var(--texto-2)}
[data-tema="oscura"] .ficha-aditivo-funcion{color:var(--gris-calido)}
[data-tema="oscura"] .ficha-sello{color:var(--dorado-2)}
[data-tema="oscura"] .ficha-contiene{border-left-color:var(--dorado-2);background:rgba(var(--acento-rgb),.1);color:var(--crema)}
[data-tema="oscura"] .ficha-nutricion{background:var(--caja-fondo);box-shadow:0 0 0 1px rgba(var(--acento-rgb),.45),0 22px 44px -26px var(--sombra-fuerte)}
[data-tema="oscura"] .nutri-cabeza{background:var(--dorado);color:var(--sobre-acento)}
[data-tema="oscura"] .nutri-porcion,[data-tema="oscura"] .nutri-porcion span{color:var(--sobre-acento)}
[data-tema="oscura"] .nutri{color:var(--crema)}
[data-tema="oscura"] .nutri thead th{color:var(--gris-calido)}
[data-tema="oscura"] .nutri thead th,[data-tema="oscura"] .nutri thead td,[data-tema="oscura"] .nutri-nota{border-color:var(--dorado)}
[data-tema="oscura"] .nutri .nutri-vd{color:var(--dorado-2)}
[data-tema="oscura"] .nutri .nutri-sub th,[data-tema="oscura"] .nutri .nutri-sub td,[data-tema="oscura"] .nutri-otra,[data-tema="oscura"] .nutri-nota{color:var(--gris-calido)}

@media (min-width:600px){
  .grilla{--columnas:3;--hueco-x:22px;row-gap:36px}
}
@media (min-width:980px){
  .grilla{--columnas:4;--hueco-x:28px;row-gap:44px}
}
/* Tablet (y celular): la barra en dos filas, con las categorías abajo y centradas (Aarón, 14/10/2026: en la tablet
   quedaban apretadas a la izquierda). Márgenes automáticos y no justify-content: si no entran, se desplazan desde la
   primera sin cortarla. */
@media (max-width:1024px){
  :root{--alto-barra:112px}
  .barra-interior{grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"volver logo buscar tema pdf" "nav nav nav nav nav";gap:8px 10px}
  .chip:first-child{margin-left:auto}
  .chip:last-child{margin-right:auto}
}
@media (max-width:760px){
  :root{--alto-barra:104px}
  .barra-interior{grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"volver logo buscar tema pdf" "nav nav nav nav nav";padding:8px 14px 6px;gap:8px 8px}
  .barra-logo img{height:34px}
  .barra .boton-pdf{padding:10px}
  .barra .boton-pdf span,.tema-texto,.barra-volver span{display:none}
  .tema-boton,.barra-volver{padding:10px}
  .barra-acciones{gap:6px}
  .barra-acciones .boton-pdf{padding:10px}
  .barra-alta{padding:10px 13px 9px;font-size:15px}
  .categorias{margin:0 -14px;padding:0 14px 2px}
  .chip{font-size:14px;padding:9px 11px 8px}
  .portada{grid-template-columns:1fr;text-align:center}
  .portada-subrayado{margin-left:auto;margin-right:auto}
  .portada-acciones{justify-content:center}
  .portada-foto{margin:14px 4% 0}
  .portada-sello{left:-3%;top:-6%}
  .ficha{width:100%;height:100%;max-height:100%;border-radius:0}
  .ficha-cuerpo{grid-template-columns:1fr;min-height:100%}
  .ficha-galeria{padding:58px 18px 16px}
  .ficha-foto{min-height:42vh}
  .ficha-texto{align-items:center;text-align:center;padding:20px 20px 24px}
  .ficha-acciones{justify-content:center}
}

/* Con mouse y sin animaciones: la foto del corte aparece igual */
@media (hover:hover) and (pointer:fine){
  .producto.con-alterna:hover .principal{opacity:0}
  .producto.con-alterna:hover .alterna{opacity:1}
}

/* ------------------------------------------------------------------ Movimiento
   Todo lo que se mueve está acá: solo en pantalla, solo si la persona no pidió «reducir
   movimiento» y solo con el script andando (clase .js en <html>). Sin eso la página queda quieta y
   completa. El script pone .listo al arrancar, .visible cuando cada parte (título, producto, cierre)
   entra en pantalla, con su --retraso, y .entrado cuando terminó. */
@media screen and (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  /* Entrada: baja la cinta, el título sube desde atrás de su renglón y el subrayado se dibuja. Cada
     renglón tapa su texto con overflow; relleno y margen negativo se cancelan, y en flex los márgenes no
     se colapsan: la página mide lo mismo que quieta. */
  .js .cinta{transform:translateY(-100%)}
  .listo .cinta{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1)}
  .js .portada-titulo{display:flex;flex-direction:column;align-items:flex-start}
  .js .categoria-titulo{display:flex;flex-direction:column;align-items:center}
  .js .portada-titulo .linea,.js .categoria-titulo .linea{overflow:hidden;padding:.14em .3em .08em;margin:-.14em -.3em -.08em}
  /* el segundo renglón tiene margin-top:.14em quieto: con el relleno de .14em queda en 0 */
  .js .portada-titulo .linea+.linea{margin-top:0}
  @media (max-width:760px){.js .portada-titulo{align-items:center}}
  .portada-titulo .linea>span,.categoria-titulo .linea>span{display:inline-block}
  .js .portada-titulo .linea>span,.js .categoria-titulo .linea>span{transform:translateY(130%)}
  .listo .portada-titulo .linea>span,.categoria-encabezado.visible .categoria-titulo .linea>span{transform:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1) .1s}
  .listo .portada-titulo .linea+.linea>span{transition-delay:.24s}
  .js .portada-subrayado path,.js .categoria-subrayado path{stroke-dasharray:1;stroke-dashoffset:1}
  .listo .portada-subrayado path,.categoria-encabezado.visible .categoria-subrayado path{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .55s}
  .js .portada-dato,.js .portada-acciones,.js .portada-lema,.js .categoria-cantidad{opacity:0;transform:translateY(10px)}
  .listo .portada-dato,.listo .portada-acciones,.listo .portada-lema,.categoria-encabezado.visible .categoria-cantidad{opacity:1;transform:none;transition:opacity .6s ease .7s,transform .8s cubic-bezier(.16,1,.3,1) .7s}
  .listo .portada-acciones{transition-delay:.85s}
  /* Portada: el grupo entra desenfocado y se enfoca; el halo se enciende detrás y después respira; cada
     tanto le pasa un brillo (recortado con la forma del grupo: --mascara) y con mouse se mueve apenas
     al revés que el halo (--px/--py, de catalogo.js), como si tuviera profundidad. */
  .js .portada-grupo img{opacity:0;filter:blur(18px);transform:scale(1.05)}
  .listo .portada-grupo img{opacity:1;filter:none;transform:none;transition:opacity 1s ease .25s,filter 1.5s ease .25s,transform 1.8s cubic-bezier(.16,1,.3,1) .25s}
  .js .portada-halo{opacity:0}
  .listo .portada-halo{opacity:var(--halo);transition:opacity 2.2s ease .7s,translate .9s cubic-bezier(.16,1,.3,1)}
  .portada-halo{animation:respirar 7s ease-in-out infinite alternate;translate:calc(var(--px,0) * 16px) calc(var(--py,0) * 10px);transition:translate .9s cubic-bezier(.16,1,.3,1)}
  .portada-grupo{animation:flotar-portada 8s ease-in-out infinite;translate:calc(var(--px,0) * -8px) calc(var(--py,0) * -5px);transition:translate .9s cubic-bezier(.16,1,.3,1)}
  .portada-grupo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 44%,rgba(255,255,255,.42) 50%,transparent 56%) 100% 0/300% 100% no-repeat;-webkit-mask:var(--mascara) 0 0/100% 100% no-repeat;mask:var(--mascara) 0 0/100% 100% no-repeat;animation:brillo 9s ease-in-out 2.6s infinite}
  .js .portada-sello{opacity:0}
  .listo .portada-sello{opacity:1;animation:sellar .8s cubic-bezier(.34,1.56,.64,1) 1.2s backwards}
  .listo .portada-foto:hover .portada-halo{opacity:.8;transition:opacity .5s ease,translate .9s cubic-bezier(.16,1,.3,1)}

  /* Productos: aparecen de a uno al entrar en pantalla; después el nombre y el código, que rebota y brilla. */
  .js .producto:not(.visible){opacity:0}
  .producto.visible:not(.entrado){animation:aparecer .9s cubic-bezier(.16,1,.3,1) var(--retraso,0s) backwards}
  .producto.visible:not(.entrado) .producto-nombre{animation:subir .7s cubic-bezier(.16,1,.3,1) calc(var(--retraso,0s) + .14s) backwards}
  .producto.visible:not(.entrado) .producto-codigo{animation:saltar .6s cubic-bezier(.34,1.56,.64,1) calc(var(--retraso,0s) + .28s) backwards}
  .producto.visible:not(.entrado) .producto-codigo::after{animation:destello .9s ease calc(var(--retraso,0s) + .8s) backwards}
  .producto-codigo{position:relative;-webkit-clip-path:inset(0 round 6px);clip-path:inset(0 round 6px)}
  .producto-codigo::after{content:"";position:absolute;top:0;bottom:0;left:0;width:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55) 50%,transparent);transform:translateX(-100%);pointer-events:none}

  /* Siempre: las fotos flotan apenas, cada una a su ritmo (ciclo de 9). */
  .producto-foto{animation:flotar 6.5s ease-in-out var(--fase,0s) infinite}
  .producto:nth-child(9n+2){--fase:-2.1s}
  .producto:nth-child(9n+3){--fase:-4.3s}
  .producto:nth-child(9n+4){--fase:-1.2s}
  .producto:nth-child(9n+5){--fase:-3.4s}
  .producto:nth-child(9n+6){--fase:-5.6s}
  .producto:nth-child(9n+7){--fase:-.7s}
  .producto:nth-child(9n+8){--fase:-2.9s}
  .producto:nth-child(9n+9){--fase:-5s}

  /* La ficha entra suave */
  .ficha[open]{animation:ficha-entrar .45s cubic-bezier(.16,1,.3,1)}
  .ficha[open]::backdrop{animation:velo-entrar .35s ease}
  .ficha-foto img{transition:opacity .25s ease}
  .ficha-foto.cambiando img{opacity:0}

  /* Cierre: la foto se asienta, la frase se escribe renglón por renglón y después la raya y el logo. */
  .js .historia:not(.visible) .historia-foto,
  .js .historia:not(.visible) .historia-firma p>span,
  .js .historia:not(.visible) .historia-base p,
  .js .historia:not(.visible) .historia-logo img{opacity:0}
  .js .historia-firma path{stroke-dasharray:1}
  .js .historia:not(.visible) .historia-firma path{stroke-dashoffset:1}
  .js .historia-firma p{display:flex;flex-direction:column;align-items:center}
  .js .historia-firma p>span{padding:.3em .45em;margin:-.3em -.45em}
  .historia.visible .historia-firma p>span{
    -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
    -webkit-mask-size:250% 100%;mask-size:250% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:0 0;mask-position:0 0;
  }
  .historia.visible:not(.entrado) .historia-foto{animation:revelar-foto 2s cubic-bezier(.16,1,.3,1) backwards}
  .historia.visible:not(.entrado) .historia-firma p>span{animation:escribir .75s cubic-bezier(.45,.05,.55,.95) .35s backwards}
  .historia.visible:not(.entrado) .historia-firma p>span:nth-child(2){animation-delay:.95s}
  .historia.visible:not(.entrado) .historia-firma p>span:nth-child(3){animation-delay:1.5s}
  .historia.visible:not(.entrado) .historia-firma path{animation:trazar .7s cubic-bezier(.65,0,.35,1) 2.1s backwards}
  .historia.visible:not(.entrado) .historia-base p{animation:subir .8s cubic-bezier(.16,1,.3,1) .5s backwards}
  /* El logo se anima en la imagen, no en el enlace (cuando el PNG tenía fondo blanco y usaba
     mix-blend-mode, animar el enlace lo aislaba y aparecía el recuadro). */
  .historia.visible:not(.entrado) .historia-logo img{animation:saltar .7s cubic-bezier(.34,1.56,.64,1) 2.3s backwards}
}

/* Con mouse: el producto se levanta y se inclina hacia el puntero, la sombra crece, aparece el corte
   (si hay) y el código brilla. */
@media screen and (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .boton:hover{transform:translateY(-1px)}
  .producto-foto img{transition:transform .55s cubic-bezier(.16,1,.3,1),filter .55s ease,opacity .45s ease}
  .producto:hover .producto-foto{animation-play-state:paused}
  .producto:hover .producto-foto img{
    transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px) scale(1.06);
    filter:drop-shadow(10px 18px 12px rgba(48,43,38,.25)) drop-shadow(0 2px 3px rgba(48,43,38,.13));
  }
  .producto-ver{transition:opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
  .producto:hover .producto-ver{opacity:1;transform:translate(-50%,0)}
  .producto-codigo{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
  .producto:hover .producto-codigo{transform:scale(1.08)}
  .producto:hover .producto-codigo::after{transform:translateX(200%);transition:transform .8s ease .05s}
  .categoria-encabezado.visible:hover .categoria-subrayado path{animation:trazar .9s cubic-bezier(.65,0,.35,1)}
  .historia.entrado .historia-firma:hover path{animation:trazar .7s cubic-bezier(.65,0,.35,1)}
  .historia.entrado .historia-logo:hover img{animation:menear .7s ease}
}

@keyframes aparecer{from{opacity:0;transform:translateY(26px) scale(.94)}}
@keyframes subir{from{opacity:0;transform:translateY(10px)}}
@keyframes saltar{from{opacity:0;transform:scale(.4)}}
@keyframes destello{from{transform:translateX(-100%)}to{transform:translateX(200%)}}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes revelar-foto{from{opacity:0;transform:scale(1.08)}}
@keyframes escribir{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes trazar{from{stroke-dashoffset:1}}
@keyframes menear{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}}
@keyframes sellar{from{opacity:0;transform:scale(1.8) rotate(14deg)}}
@keyframes respirar{from{scale:1.04}to{scale:1.11}}
@keyframes flotar-portada{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes brillo{0%{background-position:100% 0}22%,100%{background-position:0 0}}
@keyframes ficha-entrar{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes velo-entrar{from{opacity:0}}

/* Impresa desde el navegador: los productos por categoría (el PDF del botón es la versión armada). */
@media print{
  @page{size:A4;margin:12mm}
  body{display:block;background:#fff}
  .cinta,.barra,.portada-foto,.portada-acciones,.sumate,.producto-ver,.producto-boton,.ficha,.pie nav,.sin-resultados{display:none!important}
  .portada{display:block;padding:0 0 6mm;text-align:center}
  .portada-subrayado{margin:3mm auto 0}
  .categoria{break-before:page;padding-top:0}
  .grilla{--columnas:4;--hueco-x:6mm;row-gap:8mm}
  .producto{break-inside:avoid}
  .producto-foto img{filter:none}
  .producto-codigo{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .historia{break-inside:avoid;break-before:avoid}
}

/* ------------------------------------------------------------------ Versión oscura
   Pedido del jefe de ventas (14/10/2026), como su imagen de referencia: madera oscura, títulos manuscritos en
   blanco y dorado, tarjetas horizontales con borde dorado, descripción y frase, sello «Sin gluten» y franja de
   valores. Se activa con data-tema="oscura" en <html>: botón de la barra (se recuerda) o ?tema=oscura. */
html[data-tema="oscura"]{
  --crema:#f6efe4;
  --dorado:#e2aa45;
  --dorado-2:#f3c867;
  --gris-calido:#bdb0a0;
  --sombra:drop-shadow(0 10px 12px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.4));
  --contorno-blanco:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
  /* Colores en variables: la muestra de fondos (fondos.html) cambia este juego entero por fondo */
  --texto-2:#e3d8ca;
  --acento-rgb:226,170,69;   /* filetes, bordes e íconos (con transparencia) */
  --luz-rgb:255,190,110;     /* la luz cálida detrás de cada producto */
  --barra-fondo:rgba(21,16,12,.88);
  --banda-fondo:rgba(12,9,7,.55);
  --caja-fondo:rgba(29,22,18,.92);
  --ficha-fondo:#1a130f;
  --galeria-fondo:#15100c url(img/madera-oscura.jpg) center/cover;
  --superficie-2:#241b15;
  --sobre-acento:#1a120c;    /* texto sobre los botones dorados */
  --campo-fondo:rgba(255,255,255,.06);
  --sombra-suelo:rgba(0,0,0,.6);
  --sombra-fuerte:rgba(0,0,0,.9);
  --sombra-hover:drop-shadow(0 16px 16px rgba(0,0,0,.65)) drop-shadow(0 3px 4px rgba(0,0,0,.4));
  --firma-sombra:#000;
  color-scheme:dark;
}
[data-tema="oscura"] body{color:var(--crema);background:#15100c url(img/madera-oscura.jpg) center top/max(100%,1200px) auto repeat-y}
[data-tema="oscura"] body::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 35%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
[data-tema="oscura"] .cinta{display:none}

/* Barra */
[data-tema="oscura"] .barra{background:var(--barra-fondo);border-bottom-color:rgba(var(--acento-rgb),.22)}
[data-tema="oscura"] .barra.flotante{box-shadow:0 12px 26px -18px var(--sombra-fuerte)}
[data-tema="oscura"] .barra-logo img{filter:var(--contorno-blanco)}
[data-tema="oscura"] .chip{color:var(--crema)}
[data-tema="oscura"] .chip:hover{border-color:rgba(var(--acento-rgb),.5)}
[data-tema="oscura"] .chip.activa{background:var(--dorado);border-color:var(--dorado);color:var(--sobre-acento)}
[data-tema="oscura"] .buscador input{background:var(--campo-fondo);border-color:rgba(var(--acento-rgb),.35);color:var(--crema)}
[data-tema="oscura"] .buscador input::placeholder{color:var(--gris-calido)}
[data-tema="oscura"] .buscador input:focus{border-color:var(--dorado);box-shadow:0 0 0 3px rgba(var(--acento-rgb),.18)}
[data-tema="oscura"] .buscador svg{stroke:var(--gris-calido)}
[data-tema="oscura"] .boton{background:var(--dorado);border-color:var(--dorado);color:var(--sobre-acento);box-shadow:0 8px 18px -12px var(--sombra-fuerte)}
[data-tema="oscura"] .boton:hover{background:var(--dorado-2);border-color:var(--dorado-2)}
[data-tema="oscura"] .boton-claro{background:transparent;color:var(--dorado-2);border-color:rgba(var(--acento-rgb),.6)}
[data-tema="oscura"] .boton-claro:hover{background:rgba(var(--acento-rgb),.12);border-color:var(--dorado)}

/* Portada: logo con sello, título manuscrito y lema con barra dorada */
/* sin logo ni sello arriba del título (Aarón, 14/10/2026): el logo ya está en la barra y «Sin gluten», en la banda */
[data-tema="oscura"] .portada-titulo{font:700 clamp(70px,10.5vw,134px)/.82 var(--manuscrita);letter-spacing:0;color:var(--crema)}
[data-tema="oscura"] .portada-titulo .linea+.linea{font-size:.62em;letter-spacing:0;color:var(--dorado-2)}
[data-tema="oscura"] .portada-lema{display:block;max-width:22em;margin:20px 0 0;padding-left:12px;border-left:3px solid var(--dorado);font:600 15px/1.35 var(--condensada);letter-spacing:.14em;text-transform:uppercase;color:var(--crema)}
[data-tema="oscura"] .portada-dato{color:var(--gris-calido)}
/* el grupo, bajo una luz cálida (como los productos): el halo de colores brilla más sobre la madera */
[data-tema="oscura"] .portada-foto{--halo:.6}
[data-tema="oscura"] .portada-foto::before{content:"";position:absolute;z-index:0;left:-12%;right:-12%;top:-16%;bottom:-4%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--luz-rgb),.24),rgba(var(--luz-rgb),.08) 60%,rgba(var(--luz-rgb),0));pointer-events:none}

/* Categorías y tarjetas horizontales */
[data-tema="oscura"] .categoria-titulo{font:700 clamp(62px,8.5vw,106px)/.85 var(--manuscrita);letter-spacing:0;text-transform:capitalize;color:var(--crema)}
[data-tema="oscura"] .categoria-titulo .t2{color:var(--dorado-2)}
[data-tema="oscura"] .categoria-cantidad,[data-tema="oscura"] .sin-resultados{color:var(--gris-calido)}
/* Productos sueltos sobre la madera, como en una vidriera: cada uno con su luz cálida detrás y su sombra en
   la mesa, sin recuadros (Aarón, 14/10/2026: «no me gusta que esté todo en cuadros»). Misma grilla que la clara. */
[data-tema="oscura"] .grilla{row-gap:clamp(40px,5vw,64px)}
[data-tema="oscura"] .producto-foto::before{content:"";position:absolute;z-index:0;left:-8%;right:-8%;top:-4%;bottom:-8%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--luz-rgb),.26),rgba(var(--luz-rgb),.09) 55%,rgba(var(--luz-rgb),0));opacity:.85;pointer-events:none;transition:opacity .4s ease}
[data-tema="oscura"] .producto-foto::after{content:"";position:absolute;z-index:0;left:14%;right:14%;bottom:1%;height:10%;border-radius:50%;background:radial-gradient(closest-side,var(--sombra-suelo),rgba(0,0,0,0));pointer-events:none}
[data-tema="oscura"] .producto-foto img{z-index:1}
[data-tema="oscura"] .producto-nombre{margin:16px 0 10px;font-size:clamp(17px,1.9vw,22px);color:var(--crema)}
[data-tema="oscura"] .producto-nombre .renglon{display:block}
[data-tema="oscura"] .producto-nombre .renglon+.renglon{color:var(--dorado-2)}
[data-tema="oscura"] .producto-descripcion{display:block;max-width:26ch;margin:14px auto 0;font:500 15px/1.35 var(--condensada);color:var(--texto-2)}
[data-tema="oscura"] .producto-descripcion::before{content:"";display:block;width:34px;height:1px;margin:0 auto 12px;background:var(--dorado)}
[data-tema="oscura"] .producto-frase{display:block;margin:12px 0 0;font:700 clamp(22px,2.2vw,26px)/1 var(--manuscrita);color:var(--dorado-2);transform:rotate(-4deg)}
[data-tema="oscura"] .producto-ver{background:var(--dorado);color:var(--sobre-acento)}
[data-tema="oscura"] .producto:hover .producto-foto img{filter:var(--sombra-hover)}
@media (hover:hover){
  [data-tema="oscura"] .producto:hover .producto-foto::before{opacity:1}
}

/* Franja de valores */
[data-tema="oscura"] .valores{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;width:calc(100% - 40px);max-width:calc(var(--ancho) - 40px);margin:clamp(48px,7vw,80px) auto 0;padding:18px 26px;border-top:1px solid rgba(var(--acento-rgb),.5);border-bottom:1px solid rgba(var(--acento-rgb),.5);background:var(--banda-fondo)}
[data-tema="oscura"] .valores ul{display:flex;flex-wrap:wrap;gap:14px 0;margin:0;padding:0;list-style:none}
[data-tema="oscura"] .valores li{display:flex;align-items:center;gap:12px;max-width:240px;padding:0 22px;font:600 14px/1.2 var(--condensada);letter-spacing:.07em;text-transform:uppercase;color:var(--crema)}
[data-tema="oscura"] .valores li:first-child{padding-left:0}
[data-tema="oscura"] .valores li+li{border-left:1px solid rgba(var(--acento-rgb),.55)}
[data-tema="oscura"] .valores svg{width:38px;height:38px;flex-shrink:0;fill:none;stroke:var(--dorado);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
[data-tema="oscura"] .valores .cierre{margin:0 auto;font:700 clamp(30px,3.6vw,42px)/.9 var(--manuscrita);color:var(--crema);transform:rotate(-4deg)}

/* Alta de clientes, cierre y pie */
[data-tema="oscura"] .sumate-caja{background:var(--caja-fondo);border:1px solid rgba(var(--acento-rgb),.6)}
[data-tema="oscura"] .sumate-caja::after{background:linear-gradient(90deg,var(--rojo),var(--dorado))}
[data-tema="oscura"] .sumate-caja p{font:700 clamp(30px,3.8vw,42px)/1 var(--manuscrita);color:var(--crema)}
[data-tema="oscura"] .sumate .boton{background:var(--dorado);border-color:var(--dorado);color:var(--sobre-acento)}
[data-tema="oscura"] .pie{color:var(--gris-calido)}
[data-tema="oscura"] .pie a{color:var(--dorado-2)}

/* Ficha */
[data-tema="oscura"] .ficha{background:var(--ficha-fondo);color:var(--crema);border:1px solid rgba(var(--acento-rgb),.45)}
[data-tema="oscura"] .ficha-galeria{background:var(--galeria-fondo)}
[data-tema="oscura"] .ficha-foto::before{content:"";position:absolute;left:6%;right:6%;top:6%;bottom:2%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--luz-rgb),.28),rgba(var(--luz-rgb),0));pointer-events:none}
[data-tema="oscura"] .ficha-foto img{filter:var(--sombra-hover)}
[data-tema="oscura"] .ficha-miniaturas button{background:var(--superficie-2);color:var(--crema)}
[data-tema="oscura"] .ficha-miniaturas button[aria-pressed="true"]{border-color:var(--dorado)}
[data-tema="oscura"] .ficha-categoria,[data-tema="oscura"] .ficha-frase{color:var(--dorado-2)}
[data-tema="oscura"] .ficha-nombre{color:var(--crema)}
[data-tema="oscura"] .ficha-descripcion{color:var(--texto-2)}
[data-tema="oscura"] .ficha-peso{color:var(--texto-2)}
[data-tema="oscura"] .producto-peso{color:var(--gris-calido)}
[data-tema="oscura"] .ficha-cerrar{background:var(--superficie-2);color:var(--crema)}

@media (max-width:760px){
  [data-tema="oscura"] .portada-lema{margin-left:auto;margin-right:auto;padding:10px 0 0;border-left:0;border-top:2px solid var(--dorado)}
  [data-tema="oscura"] .valores ul{flex-direction:column;gap:14px}
  [data-tema="oscura"] .valores li{max-width:none;padding:0;border-left:0}
}
@media print{
  [data-tema="oscura"] *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ------------------------------------------------------------------ Página de inicio (/index.html, body.inicio)
   El inicio del sitio (14/10/2026: «rediseñarla con el mismo estilo del catálogo así queda todo igual»). Usa el diseño
   de la versión oscura y el mismo fondo que el catálogo (las variables de cada fondo, más abajo). */
.inicio .barra-interior{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo nav pdf"}
.inicio .categorias{justify-content:center}
/* «El sabor del» en un renglón: el título del inicio es más largo que «Catálogo» */
.inicio .portada-titulo{font-size:clamp(52px,7.2vw,100px)}
.inicio .portada-titulo .linea:first-child{white-space:nowrap}
@media (max-width:1024px){
  .inicio .barra-interior{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo . pdf" "nav nav nav"}
}
.inicio-seccion{max-width:var(--ancho);margin:0 auto;padding:clamp(56px,8vw,100px) 20px 0;overflow-x:clip} /* la luz detrás de la foto no ensancha la página */

/* Las cuatro líneas juntas en un solo panel, como una foto partida en cuatro (Aarón, 14/10/2026): en blanco y negro, y
   la que tiene el mouse se pone en color y se ensancha. Sin mouse (celular), en color. Igual en todos los fondos. */
.inicio-panel{display:flex;height:clamp(400px,40vw,520px);margin:0;padding:0;list-style:none;border-radius:20px;overflow:hidden;border:1px solid rgba(var(--acento-rgb),.35);box-shadow:0 34px 60px -30px rgba(20,10,4,.75);background:#1b120c}
.inicio-panel li{flex:1 1 0;min-width:0;transition:flex-grow .7s cubic-bezier(.16,1,.3,1)}
.inicio-panel li+li{border-left:1px solid rgba(255,255,255,.12)}
.inicio-panel a{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:0 14px 26px;overflow:hidden;text-align:center;text-decoration:none;color:#fff}
/* el «estudio» de la foto: luz cálida arriba sobre madera oscura */
.inicio-panel a::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background:radial-gradient(ellipse 85% 55% at 50% 38%,rgba(255,196,120,.42),rgba(255,196,120,.1) 55%,rgba(255,196,120,0) 75%),linear-gradient(#3d2818,#1c120b 78%);transition:filter .7s ease}
.inicio-panel a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;z-index:2;background:linear-gradient(to top,rgba(8,5,3,.82),rgba(8,5,3,0));pointer-events:none}
.inicio-panel-foto{position:absolute;z-index:1;left:6%;right:6%;top:7%;bottom:27%}
.inicio-panel-foto picture{display:block;width:100%;height:100%}
.inicio-panel-foto img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 16px rgba(0,0,0,.6)) drop-shadow(0 3px 4px rgba(0,0,0,.4));transition:transform .7s cubic-bezier(.16,1,.3,1),filter .7s ease}
.inicio-panel-texto{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
.inicio-panel h3{margin:0 0 6px;font:700 clamp(26px,2.4vw,36px)/.95 var(--manuscrita);white-space:nowrap;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.inicio-panel h3 .t2{color:#f3c867}
.inicio-panel-cantidad{font:600 13px/1 var(--condensada);letter-spacing:.14em;text-transform:uppercase;color:#d8cbbb}
.inicio-panel-ver{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 16px 8px;border:1px solid rgba(243,200,103,.6);border-radius:999px;font:600 15px/1 var(--condensada);letter-spacing:.06em;text-transform:uppercase;color:#f3c867;transition:background-color .3s,color .3s,border-color .3s}
.flecha{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
@media (hover:hover) and (pointer:fine){
  .inicio-panel a::before{filter:grayscale(1) brightness(.85)}
  .inicio-panel-foto img{filter:grayscale(1) contrast(1.05) drop-shadow(0 16px 16px rgba(0,0,0,.6)) drop-shadow(0 3px 4px rgba(0,0,0,.4))}
  .inicio-panel li:hover{flex-grow:1.6}
  .inicio-panel li:hover a::before,.inicio-panel a:focus-visible::before{filter:none}
  .inicio-panel li:hover .inicio-panel-foto img,.inicio-panel a:focus-visible .inicio-panel-foto img{filter:drop-shadow(0 18px 18px rgba(0,0,0,.6)) drop-shadow(0 3px 4px rgba(0,0,0,.4));transform:scale(1.07)}
  .inicio-panel li:hover .inicio-panel-ver{background:#e2aa45;border-color:#e2aa45;color:#1a120c}
  .inicio-panel li:hover .flecha{transform:translateX(3px)}
}

/* Portada del inicio: el logo que se va pintando (el blanco, el contorno que da la vuelta, las bandas amarillas, las
   letras y el lema) y al final los años: un 45 que se dibuja a trazo, con el palo del 5 estirado como una regla (Aarón,
   14/10/2026: «no un sticker redondo»). Las capas las
   arma logo_animado.py. Un clic (o toque) lo vuelve a pintar. Quieto y completo sin animaciones. Dura unos 3 s (Aarón,
   15/10/2026: «muy larga»; antes 6,5 s): las partes se pisan un poco. */
.logo-vivo{position:relative;width:min(100%,600px);margin:0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.logo-vivo::before{content:"";position:absolute;left:-10%;right:-10%;top:-16%;bottom:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--luz-rgb),.3),rgba(var(--luz-rgb),.08) 60%,rgba(var(--luz-rgb),0));pointer-events:none}
.logo-vivo-emblema{position:relative;width:var(--emblema,78%);margin:0 auto;container-type:inline-size}
.logo-vivo-emblema .capa{position:absolute;top:0;left:0;width:100%;height:100%}
.logo-vivo-emblema .blanco{filter:drop-shadow(0 18px 26px rgba(0,0,0,.38)) drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.logo-vivo-lema{position:relative;display:block;width:100%;height:auto;margin-top:1%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
/* en los fondos claros, el borde blanco del lema no se ve: sin la sombra que lo dibujaba */
html[data-fondo="liso"] .logo-vivo-lema,html[data-fondo="blanco"] .logo-vivo-lema{filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.logo-anios{position:relative;display:block;width:50%;height:auto;margin:4% auto 0;overflow:visible;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}
.logo-anios .dig{fill:none;stroke:var(--dorado);stroke-width:17;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2}
.logo-anios .n{font:700 150px/1 var(--condensada);fill:var(--dorado)}
.logo-anios .a{font:700 41px var(--condensada);letter-spacing:.06em;fill:var(--crema)}
.logo-anios .f{font:600 19px var(--condensada);letter-spacing:.08em;fill:var(--dorado-2)}
/* en el celular, el logo arriba de todo: es lo primero que se ve pintarse */
@media (max-width:760px){
  .inicio .portada .logo-vivo{order:-1;width:min(88%,420px);margin:26px auto 10px}
}
@property --giro{syntax:"<angle>";inherits:false;initial-value:380deg} /* quieto: el contorno entero (el borde suave queda pasada la vuelta) */
@media screen and (prefers-reduced-motion:no-preference){
  .js .logo-vivo .anillo{-webkit-mask-image:conic-gradient(from 270deg,#000 calc(var(--giro) - 10deg),transparent var(--giro));mask-image:conic-gradient(from 270deg,#000 calc(var(--giro) - 10deg),transparent var(--giro))}
  .js .logo-vivo .banda-arriba,.js .logo-vivo .banda-abajo,.js .logo-vivo .letras,.js .logo-vivo-lema{-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0}
  .js .logo-vivo .capa,.js .logo-vivo-lema,.js .logo-anios,.js .logo-vivo::before{opacity:0}
  .js .logo-anios .dig{stroke-dasharray:1}
  .listo .logo-vivo::before{opacity:1;transition:opacity 1.6s ease}
  .listo .logo-vivo .capa,.listo .logo-vivo-lema,.listo .logo-anios{opacity:1}
  .listo .logo-vivo .blanco{animation:logo-blanco .5s cubic-bezier(.16,1,.3,1) .1s backwards}
  .listo .logo-vivo .anillo{animation:logo-anillo .8s cubic-bezier(.55,0,.35,1) .25s backwards}
  .listo .logo-vivo .banda-arriba{animation:escribir .4s cubic-bezier(.45,.05,.55,.95) .8s backwards}
  .listo .logo-vivo .banda-abajo{animation:escribir .4s cubic-bezier(.45,.05,.55,.95) .95s backwards}
  .listo .logo-vivo .letras{animation:escribir .55s cubic-bezier(.45,.05,.55,.95) 1.05s backwards}
  .listo .logo-vivo-lema{animation:escribir .7s cubic-bezier(.45,.05,.55,.95) 1.4s backwards}
  /* los años, con lapicera: primero el 4, después el 5 empezando por la punta de la regla; «AÑOS» y los años suben */
  .listo .logo-anios .d1{animation:trazar .45s cubic-bezier(.65,0,.35,1) 1.75s backwards}
  .listo .logo-anios .d2{animation:trazar .7s cubic-bezier(.65,0,.35,1) 2s backwards}
  .listo .logo-anios .n{animation:subir .45s cubic-bezier(.16,1,.3,1) 1.75s backwards}
  .listo .logo-anios .a{animation:subir .45s cubic-bezier(.16,1,.3,1) 2.3s backwards}
  .listo .logo-anios .f{animation:subir .45s cubic-bezier(.16,1,.3,1) 2.45s backwards}
}
@keyframes logo-blanco{from{opacity:0;transform:scale(.88)}}
@keyframes logo-anillo{from{--giro:0deg}to{--giro:380deg}}

/* La foto del grupo, línea por línea (Aarón, 14/10/2026): la foto en blanco y negro y, al lado, las cuatro líneas. Al
   pasar por una (en la lista o sobre sus productos) se pintan sus dos productos y el título se escribe con su nombre.
   Hay una copia a color de la foto por línea, cada una con la máscara de sus dos productos (las arma el script). */
.inicio-grupo-cuerpo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,60px)}
.inicio-grupo-foto{position:relative;margin:0}
.inicio-grupo-foto::before{content:"";position:absolute;left:-4%;right:-4%;top:-6%;bottom:-2%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--luz-rgb),.22),rgba(var(--luz-rgb),.07) 60%,rgba(var(--luz-rgb),0));pointer-events:none}
.inicio-grupo-foto picture,.inicio-grupo-foto img{display:block;width:100%;height:auto}
.inicio-grupo-foto .gris{position:relative;filter:grayscale(1) contrast(1.06) drop-shadow(0 18px 22px rgba(0,0,0,.45));transition:filter .5s ease}
.inicio-grupo-foto.con-activa .gris{filter:grayscale(1) contrast(1.06) brightness(.72) drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.inicio-grupo-foto .color{position:absolute;top:0;left:0;z-index:1;opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.inicio-grupo-foto .color.activa{opacity:1}
.inicio-grupo-lista{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;counter-reset:linea}
.inicio-grupo-lista li{counter-increment:linea}
.inicio-grupo-lista a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"num nombre flecha" "num cantidad flecha";align-items:center;column-gap:16px;padding:16px 10px 16px 6px;border-top:1px solid rgba(var(--acento-rgb),.3);text-decoration:none;color:var(--crema);transition:background-color .35s,padding .45s cubic-bezier(.16,1,.3,1)}
.inicio-grupo-lista li:last-child a{border-bottom:1px solid rgba(var(--acento-rgb),.3)}
.inicio-grupo-lista a::before{content:"0" counter(linea);grid-area:num;align-self:start;margin-top:6px;font:600 14px/1 var(--condensada);letter-spacing:.1em;color:var(--gris-calido);transition:color .35s}
.inicio-grupo-nombre{grid-area:nombre;font:700 clamp(30px,3vw,42px)/.95 var(--manuscrita);color:var(--crema)}
.inicio-grupo-nombre .t2{color:var(--dorado-2)}
.inicio-grupo-cantidad{grid-area:cantidad;margin-top:4px;font:600 13px/1 var(--condensada);letter-spacing:.14em;text-transform:uppercase;color:var(--gris-calido)}
.inicio-grupo-lista .flecha{grid-area:flecha;width:22px;height:22px;color:var(--dorado-2);opacity:.45;transition:opacity .35s,transform .35s}
.inicio-grupo-lista a.activa{padding-left:18px;background:rgba(var(--acento-rgb),.1)}
.inicio-grupo-lista a.activa::before{color:var(--dorado-2)}
.inicio-grupo-lista a.activa .flecha{opacity:1;transform:translateX(4px)}
/* Con el dedo: el botón sobre la foto (lleva a la línea elegida), la barrita del turno automático y la ayuda */
.inicio-grupo-ver{position:absolute;z-index:3;left:50%;bottom:4%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:11px 18px 10px;border-radius:999px;background:#e2aa45;color:#1a120c;font:700 15px/1 var(--condensada);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.inicio-grupo-ver[hidden]{display:none}
/* con el dedo, el botón va en un lugar propio debajo de la foto (no tapa los productos ni hace saltar la página) */
.grupo-tactil .inicio-grupo-foto{padding-bottom:58px}
.grupo-tactil .inicio-grupo-ver{bottom:0}
.inicio-grupo-ver .flecha{width:16px;height:16px}
.inicio-grupo-ayuda{display:none;margin:12px 0 0;font:500 14px/1.3 var(--condensada);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--gris-calido)}
.grupo-tactil .inicio-grupo-ayuda{display:block}
.inicio-grupo-lista a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--dorado-2)}
.inicio-grupo-lista a.en-turno::after{animation:turno var(--paso,3200ms) linear forwards}
@keyframes turno{to{width:100%}}
@media screen and (prefers-reduced-motion:no-preference){
  .inicio-grupo-ver:not([hidden]){animation:subir .45s cubic-bezier(.16,1,.3,1)}
}
/* el título de arriba: se escribe de izquierda a derecha cada vez que cambia */
.titulo-vivo{display:inline-block;padding:.12em .3em .06em;margin:-.12em -.3em -.06em}
@media screen and (prefers-reduced-motion:no-preference){
  .titulo-vivo.escribiendo{-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:escribir .75s cubic-bezier(.45,.05,.55,.95) both}
  .inicio-grupo-foto .color.activa{animation:pintar .6s ease}
}
@keyframes pintar{from{filter:brightness(1.35) saturate(.6)}}
@media (max-width:860px){
  .inicio-grupo-cuerpo{grid-template-columns:1fr}
  .inicio-grupo-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .inicio-grupo-lista li:last-child a{border-bottom:0}
  .inicio-grupo-lista a{column-gap:10px;padding:12px 6px}
  .inicio-grupo-lista a.activa{padding-left:10px}
  .inicio-grupo-nombre{font-size:clamp(24px,6.4vw,32px)}
  /* el título que cambia, en un renglón: si no, la página salta al pasar de «Cocidos» a «Embutidos frescos» */
  .inicio #titulo-productos{font-size:clamp(38px,10.5vw,62px);white-space:nowrap}
}

/* La fábrica: la planta de hoy de lado a lado, fundida con el fondo arriba y abajo, y el texto en blanco sobre un velo */
.inicio-fabrica{position:relative;height:clamp(440px,48vw,680px);margin-top:clamp(64px,9vw,120px);overflow:hidden;background:#2a1a0f;-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.65) 4%,#000 11%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.65) 4%,#000 11%,#000 82%,transparent 100%)}
.inicio-fabrica-foto{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.inicio-fabrica::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,7,4,.84) 0,rgba(10,7,4,.6) 36%,rgba(10,7,4,0) 66%)}
.inicio-fabrica-interior{position:relative;z-index:1;max-width:var(--ancho);height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center}
.inicio-fabrica-texto{max-width:31em;color:#f3ece2}
.inicio-volanta{margin:0 0 8px;font:600 14px/1 var(--condensada);letter-spacing:.18em;text-transform:uppercase;color:#f3c867}
.inicio-fabrica h2{margin:0 0 16px;font:700 clamp(46px,5.6vw,76px)/.88 var(--manuscrita);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.inicio-fabrica h2 .t2{color:#f3c867}
.inicio-fabrica-texto p{margin:0 0 14px;font:500 clamp(17px,1.6vw,20px)/1.45 var(--condensada);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.inicio-fabrica-texto .inicio-volanta{font-size:14px;text-shadow:none}
.inicio-sin-gluten{display:flex;align-items:center;gap:10px;font-weight:600!important;color:#fff}
.inicio-sin-gluten img{width:46px;height:auto;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))} /* el logo oficial (15/10/2026) */

/* La planta por dentro: cuatro fotos que se suben sobre el fundido de la de arriba */
.inicio-galeria{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,22px);max-width:var(--ancho);margin:clamp(-64px,-4.5vw,-28px) auto 0;padding:0 20px;list-style:none}
.inicio-foto{margin:0}
.inicio-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:0 18px 30px -18px var(--sombra-fuerte)}
.inicio-foto span{display:block;margin-top:10px;font:600 14px/1.2 var(--condensada);letter-spacing:.1em;text-transform:uppercase;color:var(--crema);text-align:center}

/* La foto grande debajo de las de la planta (hoy, los secaderos), enmarcada como una copia, con la luz cálida detrás */
.inicio-destacada{max-width:var(--ancho);margin:0 auto;padding:clamp(56px,8vw,100px) 20px 0;overflow-x:clip}
.inicio-destacada-foto{position:relative;max-width:1040px;margin:0 auto}
.inicio-destacada-foto::before{content:"";position:absolute;left:-6%;right:-6%;top:-8%;bottom:-8%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--luz-rgb),.2),rgba(var(--luz-rgb),0));pointer-events:none}
.inicio-destacada-foto img{position:relative;display:block;width:100%;height:auto;border-radius:16px;border:6px solid rgba(255,255,255,.92);box-shadow:0 30px 60px -28px var(--sombra-fuerte),0 0 0 1px rgba(var(--acento-rgb),.35)}
@media (max-width:640px){
  .inicio-destacada-foto img{border-width:4px;border-radius:12px}
}

/* Encontranos: los accesos de la página anterior, sin recuadros, separados por un filete */
.inicio-accesos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);margin:0;padding:0;list-style:none}
.inicio-acceso{display:flex;align-items:center;gap:16px;height:100%;padding:20px 4px;border-top:1px solid rgba(var(--acento-rgb),.3);text-decoration:none;color:var(--crema)}
.inicio-acceso-icono{display:grid;place-items:center;flex-shrink:0;width:54px;height:54px;border-radius:50%;background:rgba(var(--acento-rgb),.14);transition:background-color .25s}
.inicio-acceso-icono svg{width:26px;height:26px;fill:none;stroke:var(--dorado);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.inicio-acceso-texto{flex:1;min-width:0}
.inicio-acceso-texto strong{display:block;font:700 20px/1.1 var(--condensada);letter-spacing:.04em;text-transform:uppercase}
.inicio-acceso-texto span{display:block;margin-top:3px;font:500 16px/1.3 var(--condensada);color:var(--texto-2)}
.inicio-acceso .flecha{color:var(--dorado-2)}
.inicio-acceso:hover .inicio-acceso-icono{background:var(--dorado)}
.inicio-acceso:hover .inicio-acceso-icono svg{stroke:var(--sobre-acento)}
.inicio-acceso:hover .flecha{transform:translateX(4px)}
.inicio .historia{margin-top:clamp(64px,9vw,110px)}
.inicio .pie p a{color:inherit;text-decoration:underline;text-decoration-color:rgba(var(--acento-rgb),.5);text-underline-offset:3px}

@media (max-width:980px){
  .inicio-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
  .inicio-panel li{height:clamp(300px,52vw,420px)}
  .inicio-panel li+li{border-left:0}
  .inicio-panel li:nth-child(even){border-left:1px solid rgba(255,255,255,.12)}
  .inicio-panel li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .inicio-galeria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inicio-accesos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .inicio-accesos{grid-template-columns:1fr}
  .inicio-panel h3{font-size:clamp(24px,7vw,30px);white-space:normal}
  .inicio-panel a{padding-bottom:18px}
  .inicio-panel-foto{top:6%;bottom:40%}
  .inicio-panel-ver{margin-top:10px;padding:8px 12px 7px;font-size:13px}
  .inicio-fabrica{height:clamp(540px,150vw,640px)}
  .inicio-fabrica::after{background:linear-gradient(to bottom,rgba(10,7,4,.05) 18%,rgba(10,7,4,.86) 70%)}
  .inicio-fabrica-interior{align-items:flex-end;padding-bottom:16%}
  .inicio-fabrica-foto{object-position:30% 45%}
}
@media screen and (prefers-reduced-motion:no-preference){
  .js [data-revelar]:not(.visible){opacity:0}
  [data-revelar].visible:not(.entrado){animation:aparecer .9s cubic-bezier(.16,1,.3,1) var(--retraso,0s) backwards}
}

/* ------------------------------------------------------------------ Alta de clientes (/alta_clientes.html, /solicitud_enviada.html)
   El formulario de siempre (lo recibe /to_send.php) con el diseño del inicio (14/10/2026). Sin recuadros, como el resto
   de la versión oscura: cada bloque lleva su número manuscrito y un filete; los avisos van debajo de cada campo. */
html[data-fondo]{--error:#ff9d90}
html[data-fondo="blanco"],html[data-fondo="liso"],html[data-fondo="gris"]{--error:#b3121b}
.alta{width:100%;max-width:880px;margin:0 auto;padding:clamp(36px,6vw,72px) 20px clamp(56px,8vw,96px);box-sizing:border-box}
.alta-encabezado{text-align:center}
.alta-titulo{margin:0;font:700 clamp(58px,9vw,112px)/.86 var(--manuscrita);color:var(--crema)}
.alta-titulo .t1,.alta-titulo .t2{display:block}
.alta-titulo .t2{color:var(--dorado-2)}
.alta .portada-subrayado{margin:12px auto 0}
.alta-bajada{max-width:30em;margin:18px auto 0;font:500 clamp(18px,2vw,21px)/1.35 var(--condensada);color:var(--texto-2)}
.alta-form{margin-top:clamp(36px,5vw,56px)}
.alta-trampa{display:none}
.alta-bloque{min-width:0;margin:0;padding:0;border:0}
.alta-bloque+.alta-bloque{margin-top:clamp(34px,4.5vw,48px)}
/* float: así la leyenda se porta como un bloque común (márgenes y filete) en todos los navegadores */
.alta-bloque legend{float:left;display:flex;align-items:baseline;gap:14px;width:100%;margin:0 0 22px;padding:0 0 10px;border-bottom:1px solid rgba(var(--acento-rgb),.3);font:600 17px/1 var(--condensada);letter-spacing:.14em;text-transform:uppercase;color:var(--crema)}
.alta-bloque legend .num{font:700 36px/.5 var(--manuscrita);letter-spacing:0;color:var(--dorado-2)}
.alta-campos{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.alta-campos-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo-ancho{grid-column:1/-1}
.campo label{font:600 14px/1.2 var(--condensada);letter-spacing:.09em;text-transform:uppercase;color:var(--gris-calido)}
.alta b{font-weight:700;color:var(--dorado-2)}
.campo input,.campo select,.campo textarea{box-sizing:border-box;width:100%;margin:0;padding:12px 14px;font:500 18px/1.3 var(--condensada);color:var(--crema);background:var(--campo-fondo);border:1px solid rgba(var(--acento-rgb),.35);border-radius:10px;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.campo textarea{min-height:112px;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-calido);opacity:.7}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:rgba(var(--acento-rgb),.6)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--dorado);box-shadow:0 0 0 3px rgba(var(--acento-rgb),.2)}
.campo-select{position:relative;display:block}
.campo-select::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;margin-top:-6px;border:solid var(--dorado-2);border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none}
.campo-select select{padding-right:42px;cursor:pointer}
.campo select:invalid{color:var(--gris-calido)}
.campo select option{color:var(--crema);background:var(--ficha-fondo)}
.campo.con-error input,.campo.con-error select,.campo.con-error textarea{border-color:var(--error)}
.campo-error{font:600 15px/1.25 var(--condensada);color:var(--error)}
.alta-final{display:grid;gap:22px;margin-top:clamp(36px,5vw,52px);padding-top:clamp(24px,3vw,32px);border-top:1px solid rgba(var(--acento-rgb),.3)}
.campo-robot input{max-width:130px}
.alta-acepto{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 12px;font:500 18px/1.35 var(--condensada);color:var(--texto-2);cursor:pointer}
.alta-acepto input{flex-shrink:0;width:22px;height:22px;margin:1px 0 0;accent-color:var(--dorado);cursor:pointer}
.alta-acepto span{flex:1;min-width:0}
.alta-acepto .campo-error{flex-basis:100%;padding-left:34px}
.alta-error{margin:0;padding:12px 16px;border-left:3px solid var(--error);background:rgba(var(--acento-rgb),.08);font:600 17px/1.35 var(--condensada);color:var(--error)}
.alta-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.alta-enviar{padding:15px 28px 14px;font-size:18px}
.alta-enviar .flecha{transition:transform .2s}
.alta-enviar:hover .flecha{transform:translateX(4px)}
.alta-enviar:disabled{opacity:.7;cursor:progress}
.alta-enviar.enviando span::after{content:"…"}
.alta-nota{margin:0;font:500 15px/1 var(--condensada);color:var(--gris-calido)}
/* «Solicitud enviada»: un tilde que se dibuja */
.alta-gracias{text-align:center;padding-top:clamp(48px,8vw,96px)}
.alta-tilde{display:block;width:clamp(84px,11vw,112px);height:auto;margin:0 auto 22px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.alta-tilde circle{stroke:rgba(var(--acento-rgb),.55);stroke-width:3}
.alta-tilde path{stroke:var(--dorado-2);stroke-width:7}
.alta-gracias .alta-acciones{justify-content:center;margin-top:32px}
@media (max-width:640px){
  .alta-campos,.alta-campos-3{grid-template-columns:1fr}
  .alta-bloque legend{font-size:16px;letter-spacing:.1em}
  .alta-acciones{flex-direction:column;align-items:stretch;text-align:center}
}
@media screen and (prefers-reduced-motion:no-preference){
  .js .alta-titulo .t1,.js .alta-titulo .t2,.js .alta-bajada,.js .alta-tilde{opacity:0}
  .listo .alta-titulo .t1,.listo .alta-titulo .t2,.listo .alta-bajada,.listo .alta-tilde{opacity:1;animation:subir .9s cubic-bezier(.16,1,.3,1) .1s backwards}
  .listo .alta-titulo .t2{animation-delay:.25s}
  .listo .alta-bajada{animation-delay:.7s}
  .js .alta-tilde circle,.js .alta-tilde path{stroke-dasharray:1;stroke-dashoffset:1}
  .listo .alta-tilde circle{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) .2s}
  .listo .alta-tilde path{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1) 1s}
}

/* ------------------------------------------------------------------ Muestra de fondos (fondos.html)
   Un solo diseño —el de la versión oscura— sobre tres fondos para elegir (Aarón, 14/10/2026: «hoy en el blanco y oscuro
   son diferentes las páginas»). La página trae data-tema="oscura" y data-fondo; cada fondo cambia el juego de colores
   y la botonera de arriba (en la barra) pasa de uno a otro. Cuando se elija, queda ese y se va la botonera. */
.fondos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px;padding:7px 14px;border-bottom:1px solid rgba(var(--acento-rgb),.25)}
.fondos-titulo{margin-right:4px;font:600 13px/1 var(--condensada);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-calido)}
.fondo-boton{display:inline-flex;align-items:center;gap:7px;padding:4px 13px 4px 4px;border:1px solid rgba(var(--acento-rgb),.45);border-radius:999px;background:transparent;color:var(--crema);font:600 14px/1 var(--condensada);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.fondo-boton:hover{border-color:var(--dorado)}
.fondo-boton[aria-pressed="true"]{background:var(--dorado);border-color:var(--dorado);color:var(--sobre-acento)}
.fondo-muestra{width:26px;height:26px;border-radius:50%;background:#999 center/cover;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.25)}
.fondo-boton[data-fondo="liso"] .fondo-muestra{background:#fbfaf8}
.fondo-boton[data-fondo="blanco"] .fondo-muestra{background-image:url(img/fondo-blanco-muestra.jpg)}
.fondo-boton[data-fondo="madera"] .fondo-muestra{background-image:url(img/fondo-madera-muestra.jpg)}
.fondo-boton[data-fondo="gris"] .fondo-muestra{background-image:url(img/fondo-gris-muestra.jpg)}
html[data-fondo]{--alto-barra:112px}
@media (max-width:1024px){html[data-fondo]{--alto-barra:156px}}
@media (max-width:760px){
  html[data-fondo]{--alto-barra:148px}
  .fondos{padding:6px 10px}
  .fondos-titulo{display:none}
  .fondo-boton{font-size:13px;padding-right:10px}
  /* en una fila: el nombre solo en el elegido; los demás, la muestra (se distinguen por el color) */
  .fondo-boton:not([aria-pressed="true"]){padding-right:4px}
  .fondo-boton:not([aria-pressed="true"]) span+span{display:none}
}

/* La foto, fija detrás de toda la página (un elemento fijo y no background-attachment, que el iPhone ignora), con un
   velo para que el texto se lea y la viñeta en los bordes. */
html[data-fondo] body{background:var(--fondo-base)}
html[data-fondo] body::before{background:var(--vineta),var(--velo),var(--fondo-img) center/cover no-repeat}

/* Madera: la versión oscura de siempre, sobre la madera de la foto (más clara: lleva velo) */
html[data-fondo="madera"]{
  --fondo-base:#3b2414;
  --fondo-img:url(img/fondo-madera.jpg);
  --velo:linear-gradient(rgba(24,13,6,.5),rgba(24,13,6,.5));
  --vineta:radial-gradient(ellipse 120% 90% at 50% 35%,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);
  --gris-calido:#d6c5b0;
  --barra-fondo:rgba(30,18,10,.9);
  --galeria-fondo:linear-gradient(rgba(24,13,6,.45),rgba(24,13,6,.45)),#3b2414 url(img/fondo-madera.jpg) center/cover;
}
/* Madera blanca (y el blanco liso): tinta azul de la marca, acentos en rojo, botones azules */
html[data-fondo="blanco"],html[data-fondo="liso"]{
  --fondo-base:#ece7e1;
  --fondo-img:url(img/fondo-blanco.jpg);
  --velo:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0));
  --vineta:radial-gradient(ellipse 120% 90% at 50% 35%,rgba(0,0,0,0) 55%,rgba(110,88,64,.16) 100%);
  --crema:#132a42;
  --texto-2:#3b4a58;
  --gris-calido:#6a6157;
  --dorado:#082d50;
  --dorado-2:#c8202a;
  --acento-rgb:8,45,80;
  --luz-rgb:255,255,255;
  --barra-fondo:rgba(251,249,246,.9);
  --banda-fondo:rgba(255,255,255,.6);
  --caja-fondo:rgba(255,255,255,.92);
  --ficha-fondo:#fbf9f6;
  --galeria-fondo:#ece7e1 url(img/fondo-blanco.jpg) center/cover;
  --superficie-2:#efe9e2;
  --sobre-acento:#fff;
  --campo-fondo:#fff;
  --sombra:drop-shadow(0 10px 10px rgba(80,58,36,.26)) drop-shadow(0 2px 2px rgba(80,58,36,.2));
  --sombra-suelo:rgba(80,58,36,.32);
  --sombra-fuerte:rgba(80,58,36,.35);
  --sombra-hover:drop-shadow(0 16px 16px rgba(80,58,36,.32)) drop-shadow(0 3px 4px rgba(80,58,36,.22));
  --firma-sombra:rgba(255,255,255,.95);
  color-scheme:light;
}
/* Blanco liso: el de la página principal, sin foto ni viñeta */
html[data-fondo="liso"]{
  --fondo-base:#fbfaf8;
  --fondo-img:none;
  --vineta:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));
  --galeria-fondo:#f3efe9;
  --banda-fondo:rgba(8,45,80,.04);
}
/* Cemento: estudio de fotos; texto oscuro, acentos en rojo y una luz blanca detrás de cada producto */
html[data-fondo="gris"]{
  --fondo-base:#8f8b88;
  --fondo-img:url(img/fondo-gris.jpg);
  --velo:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2));
  --vineta:radial-gradient(ellipse 120% 90% at 50% 35%,rgba(0,0,0,0) 45%,rgba(25,25,25,.32) 100%);
  --crema:#1c1b1a;
  --texto-2:#2f2d2b;
  --gris-calido:#3e3b38;
  --dorado:#1c1b1a;
  --dorado-2:#b5121b;
  --acento-rgb:28,27,26;
  --luz-rgb:255,255,255;
  --barra-fondo:rgba(236,234,231,.9);
  --banda-fondo:rgba(255,255,255,.4);
  --caja-fondo:rgba(245,244,242,.92);
  --ficha-fondo:#f4f3f1;
  --galeria-fondo:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)),#8f8b88 url(img/fondo-gris.jpg) center/cover;
  --superficie-2:#e6e3e0;
  --sobre-acento:#fff;
  --campo-fondo:rgba(255,255,255,.75);
  --sombra:drop-shadow(0 10px 10px rgba(20,20,20,.35)) drop-shadow(0 2px 2px rgba(20,20,20,.25));
  --sombra-suelo:rgba(20,20,20,.4);
  --sombra-fuerte:rgba(20,20,20,.4);
  --sombra-hover:drop-shadow(0 16px 16px rgba(20,20,20,.4)) drop-shadow(0 3px 4px rgba(20,20,20,.28));
  --firma-sombra:rgba(255,255,255,.85);
  color-scheme:light;
}