pasan a NIETOS de .p5-wrap y el combinador de hijo directo deja de matchear. Es la misma trampa que describe el comentario de arriba, y no avisa: el texto sigue ahí, sólo que sin medida, sin color y sin interlineado. ⚠ 2026-09-04: HOY NO LA USA NADIE. «Por qué este ajo» volvió a una sola columna y la grilla se mudó a «Cómo se hidrata», donde la columna de texto lleva la lista de pasos y la tabla de dosis, no

. LA REGLA SE DEJA IGUAL: es la red que atrapa el día que alguien vuelva a meter una bajada adentro de la grilla, y ese día el fallo es mudo. */ .p5-band > .p5-wrap > .p5-lamina-2col > .p5-lamina-texto > .p5-intro{ line-height:1.75;color:var(--p5-muted-1);font-size:16px;max-width:62ch;margin:0 0 8px; } .p5-draft{ position:fixed;top:12px;right:14px;z-index:99; background:var(--p5-acento-soft); border:1px dashed var(--p5-linea); color:var(--p5-acento);font-size:11px;letter-spacing:.1em; padding:5px 10px;border-radius:8px; } @media(max-width:700px){ /* En mobile la etiqueta pisaba el breadcrumb: se va al pie, y OPACA — si no, se lee encima del texto. */ .p5-draft{top:auto;bottom:10px;right:10px;font-size:9.5px;padding:4px 8px; opacity:.95;background:var(--p5-ink-3)} } .p5-crumbs{padding:26px 0 0;font-size:13px;color:var(--p5-muted-2);letter-spacing:.04em} @media(max-width:880px){.p5-crumbs{padding-top:12px}} .p5-crumbs a{color:var(--p5-muted-2)} .p5-crumbs a:hover{color:var(--p5-acento)} .p5-crumbs .p5-here{color:var(--p5-muted-1)} .p5-btn{ display:inline-block;padding:13px 28px;border-radius:999px; font-size:14.5px;font-weight:600; transition:transform .18s var(--p5-ease), background .2s var(--p5-ease), border-color .2s var(--p5-ease); } .p5-btn:hover{transform:translateY(-2px);text-decoration:none} .p5-btn-solid{background:var(--p5-acento);color:var(--p5-sobre-tinta)} .p5-btn-solid:hover{filter:brightness(1.08)} .p5-btn-ghost{border:1px solid rgba(245,232,210,.32);color:var(--p5-cream)} .p5-btn-ghost:hover{border-color:var(--p5-cream);background:rgba(245,232,210,.05)} /* ===================================================================== 1 · HERO La foto de enciclopedia entra como AMBIENTE. La imagen principal es el sobre, y es la primera del DOM. ===================================================================== */ /* overflow:clip y NO hidden: hidden crea un contenedor de scroll y eso rompe el position:sticky del sobre. clip recorta igual sin crear scrollport. */ .p5-hero{position:relative;overflow:clip;isolation:isolate} /* Acotada al tope y no a inset:0: el hero mide bastante más que una pantalla y con inset:0 la foto se estira a lo largo. Brillo y opacidad están al máximo que deja contraste HOLGADO sobre el texto. El fondo lo pone cada página con --p5-amb, porque la url() de una hoja compartida no puede depender del producto. */ .p5-hero-amb{ position:absolute;inset:0 0 auto;height:min(105vh,1000px);z-index:-2; pointer-events:none; background-image:var(--p5-amb); background-position:var(--p5-amb-pos); background-size:cover;background-repeat:no-repeat; filter:saturate(.85) brightness(.66) contrast(1); opacity:.72; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 92%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 92%); } /* El halo detrás del sobre cuelga de .p5-pack y NO del hero. En el arroz colgaba del hero con top:44%, o sea de un porcentaje del alto del hero — que se asienta tarde—, y cada reflow corría el halo: 0,25 de CLS medido. .p5-pack tiene alto derivado del VIEWPORT (min(46vh,370px)), no del contenido, así que no se mueve nunca. Ojo: .p5-pack es flex, pero un hijo absolute no es flex item. */ .p5-pack::before{ content:'';position:absolute;z-index:-1; left:50%;top:50%;width:min(760px,86vw);aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle,var(--p5-glow-1) 0%,var(--p5-glow-2) 38%,transparent 68%); pointer-events:none; } .p5-hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start; padding:36px 0 68px; } /* La cita del dorso es el tercer hijo de la grilla, colocada explícita bajo el sobre: en escritorio conserva su relación con el 3D, que es donde refuerza lo que el giro muestra. ⚠ En provenzal no matchea nada desde el 2026-09-07 (esa página se quedó sin el pie); en adobo, aves y pescado sigue siendo lo que sostiene el hero. */ .p5-hero-grid > .p5-sobre-pie{grid-column:1;grid-row:2;justify-self:center;margin-top:14px} /* ⛔⛔ EL SOBRE NO ES STICKY, Y NO ES UN OLVIDO. NO SE LO VUELVAS A PONER. Tres rondas se fueron en esto. El comentario largo está en la página del arroz (producto/assets/arroz.css, regla `.hero-pack`); el resumen: Thomas: «el sobre no se debe mover nada, se tiene que quedar quieto en su lugar, anclado». Y la primera vez, la misma queja sin que la supiéramos leer: «cuando bajás, bajan un poco también». `position:sticky` significa quedarse fijo en la PANTALLA, y eso ES LO MISMO que deslizarse hacia abajo respecto de la PÁGINA. No hay configuración que haga las dos. Por eso cada ronda lo empeoró: 130 px de recorrido → 370 → 790, y con cada una el sobre se deslizaba más lejos del texto de al lado. Quieto en su lugar = elemento normal = sin `position:sticky`. */ /* ── EL AIRE DE ABAJO DEL HERO ──────────────────────────────────────── El hero terminaba con 356 px de negro debajo del último contenido. 240 los había puesto una ronda anterior para comprarle recorrido a un sticky que después se sacó del todo, y 68 eran el padding de siempre. Se devuelven los dos. Sólo escritorio. */ @media(min-width:881px){ .p5-hero-grid{padding-bottom:0} } /* ── ESCRITORIO BAJO · que el selector de gramaje no quede bajo el borde ── 2026-09-07. SÍNTOMA (medido, no supuesto): a 1366×768 el bloque `.p5-gram` —el control principal de la página— terminaba en y=809 sobre un viewport de 768. Cuarenta y un píxeles por debajo del pliegue: el que abre la página en una notebook de 768 no ve que hay dos gramajes hasta que scrollea, y no tiene motivo para scrollear. ⛔ NO SE ARREGLA ACHICANDO EL SOBRE. El sobre es el producto y es el LCP; bajarle la altura arregla el número y rompe la página. Lo que se reduce es EL AIRE DE ARRIBA, que es lo que empuja el bloque hacia abajo: los 26 px de padding del hilo de migas y los 36 del tope de la grilla. El sobre no cambia de tamaño ni un píxel — se sube entero, con su selector. ⚠ VA CONDICIONADO A max-height Y NO SUELTO. A 1440×900 el hero ya entraba (margen de 19 px) y ahí este aire SÍ es el ritmo bueno de la página. Un ajuste global le sacaría el respiro a las pantallas que no tienen el problema, para arreglar las que sí. ⚠⚠ SEGUNDA RONDA, MISMO DÍA: NO ALCANZABA. La primera versión de esta regla sólo apretaba el aire de arriba y dejaba el selector entrando por 11 px a 1366×768. Thomas lo siguió viendo cortado, y el barrido de alturas explicó por qué: 11 px es cero, y ADEMÁS abajo de 740 px de viewport seguía cortado de verdad (−7 a 740, −33 a 600). Ojo con esto, que es lo que hizo perder la primera ronda: EL VIEWPORT NO ES LA PANTALLA. Una notebook de 768 con la barra de título, las pestañas, la barra de direcciones y la de marcadores deja unos 630-660 de viewport, o sea de lleno en la zona rota. Medir sólo a 768 «de pantalla» es medir un caso que casi nadie tiene. Y la propia regla había creado una franja nueva rota entre 821 y 880: ahí el `max-height:820px` ya no aplicaba pero el layout todavía lo necesitaba (−17 px a 860). Un corte duro en una media query es un acantilado. ⭐ POR ESO AHORA SE TOCA EL ALTO DEL SOBRE, y es lo que la ronda anterior dejó anotado como pendiente de decisión: el `74vh` se mide contra la ventana ENTERA aunque 100 px de esa ventana los tape el header fijo, o sea que el sobre venía pidiendo el 85 % del alto REALMENTE usable. El tercer término del min() es el arreglo: `calc(100vh - Kpx)`, donde K es todo lo que la pantalla gasta y no es el sobre. K NO SE ESTIMÓ, se midió en el DOM real (scratchpad/derivar2.py), y es constante dentro de cada régimen: · apretado (esta regla): arriba del pack 129 + selector y su gap 60 + 32 de aire = 221 · normal (sin apretar): arriba del pack 177 + 64 + 32 = 273 El aire de 32 px es deliberado y no cosmético: con 11 se lee como cortado aunque el número diga que entra. ⚠ SE MIDIÓ CON EL PACK ASENTADO. El botón «Ver el dorso» arranca `position:absolute` y sobre-51.js lo devuelve al flujo; medir antes de que el pack tome su clase final da una constante optimista. LO QUE CUESTA, dicho con números y no con «queda mejor»: el sobre se achica sólo donde no entraba. A 800 pierde 13 px (−2 %), a 768 pierde 21 (−4 %), a 700 pierde 39 (−8 %) y a 600 pierde 65 (−15 %). De 860 para arriba no cambia NADA: sigue clavado en los 640 px de siempre. O sea que la pantalla grande —donde el sobre es el argumento— queda igual, y el precio lo paga la pantalla chica, que es donde el sobre no se veía entero de todos modos. ⚠ VA SCOPEADO A [data-producto="provenzal"] Y NO SUELTO, y ésa es la otra mitad de la decisión. Esta hoja la comparten las CUATRO páginas de producto, y las otras tres tienen MÁS contenido en el hero que provenzal —conservan la nota de gramaje y el pie del dorso—, así que su aritmética es distinta y no se midió en esta corrida. Apretarles el aire de arriba sin haberlas medido sería arreglar a ojo tres páginas para arreglar una medida. Si algún día se miden y les hace falta, se agrega su selector a esta lista; el número de max-height ya está pensado para el caso. */ /* El techo de siempre, aplicado ya en escritorio ancho: de 901 px de alto para arriba el sobre no se mueve de sus 640 px y esto no llega a morder nunca. */ @media(min-width:881px){ [data-producto="provenzal"] .p5-pack{--p5-sobre-alto:min(74vh,640px,calc(100vh - 273px))} } /* ⚠ EL CORTE SUBIÓ DE 820 A 900 y no es un número redondo por gusto: con 820 quedaba la franja 821-880 sin apretar y rota (−17 px a 860). A 901 el sobre ya está clavado en 640 y sobra aire, así que ahí el aprieto no hace falta. */ @media(min-width:881px) and (max-height:900px){ [data-producto="provenzal"] .p5-crumbs{padding-top:6px} [data-producto="provenzal"] .p5-hero-grid{padding-top:8px} [data-producto="provenzal"] .p5-pack{ gap:10px; --p5-sobre-alto:min(74vh,640px,calc(100vh - 221px)); } } @media(max-width:880px){ /* El aire sale de la CAJA —grilla, márgenes del pack, kicker, H1— y no del sobre, que es la pieza que tiene que verse grande. */ .p5-hero-grid{grid-template-columns:1fr;gap:8px;padding:12px 0 72px;min-height:auto} .p5-pack{margin-bottom:10px} .p5-hero-copy .p5-kicker{margin-bottom:8px} .p5-hero-copy h1{margin-bottom:10px} .p5-crumbs{padding-top:8px} .p5-hero-grid > .p5-sobre-pie{grid-column:auto;grid-row:auto;margin-top:18px} } .p5-hero-copy .p5-kicker{ font-size:11.5px;letter-spacing:.28em;text-transform:uppercase; color:var(--p5-acento);margin:0 0 14px;font-weight:600; } .p5-hero-copy h1{ font-size:clamp(40px,6vw,74px); line-height:.98;margin:0 0 18px;color:#fbf3e2;font-weight:700; } .p5-hero-copy h1 em{font-style:normal;color:var(--p5-acento)} .p5-hero .p5-notes{ font-size:14px;color:var(--p5-muted-1);letter-spacing:.02em; margin:0 0 22px;font-style:italic; padding-bottom:20px;border-bottom:1px solid var(--p5-linea-soft); max-width:44ch; } /* Va DESPUÉS de la regla base a propósito: misma especificidad = gana el que está más abajo. Con el override arriba, perdía sin avisar. */ @media(max-width:880px){ .p5-hero .p5-notes{padding-bottom:12px} } .p5-hero .p5-lead{ font-size:17px;line-height:1.68;color:var(--p5-cream); max-width:46ch;margin:0 0 30px; } .p5-hero .p5-lead b{color:#fff;font-weight:600} .p5-cta-row{display:flex;gap:12px;flex-wrap:wrap} /* ===================================================================== EL SOBRE · imagen principal, LCP, primera del DOM ===================================================================== */ /* ⚠ `top` TIENE QUE LIBRAR EL HEADER, que es sticky y mide 100 px. Estaba en 5vh = 45 px sobre un viewport de 900, así que al pegarse el sobre sus primeros 55 px quedaban DEBAJO de la barra de navegación. Medido el 2026-08-25 en las cinco páginas, la publicada incluida: header bottom 100, pack top 45. No se lee como un bug sino como que el sobre se mete abajo del menú, y es parte de lo que se percibía como «el sticky no anda». 112 px = 100 del header + 12 de aire. Fijo y no vh: con 5vh el número depende del alto de la ventana y en una pantalla baja vuelve a taparse. ⚠ Esto NO le devuelve recorrido al sticky —lo acorta—. El recorrido era un problema aparte y se resolvió el 2026-08-25 arriba, en la regla que colocaba la cita del dorso bajo el sobre. Medido en _qa/sticky.py. ⚠ Ojo con el sujeto: la cita del dorso (`.p5-sobre-pie`) salió del hero DE PROVENZAL el 2026-09-07, pero la regla sigue existiendo y sigue en uso en adobo, aves y pescado, que comparten esta hoja. */ .p5-pack{ /* ⛔ ACÁ NO VA `position:sticky`. Ver el comentario de arriba, en el bloque que empieza «EL SOBRE NO ES STICKY». `relative` se queda porque las capas del 3D y del derrame son absolutas y lo necesitan como referencia. */ position:relative; display:flex;flex-direction:column;align-items:center;gap:14px; /* ⭐ EL ALTO DEL SOBRE, EN UN SOLO LUGAR — 2026-09-07. Lo leen la y el canvas 3D, que TIENEN que medir lo mismo al píxel: el visor encuadra contra el tamaño del canvas, así que si las dos cajas se separan el fundido de la foto al 3D se ve como un salto. Estaban escritas dos veces con el mismo literal, o sea a un descuido de divergir. Acá el valor es uno. */ --p5-sobre-alto:min(74vh,640px); } .p5-pack img.p5-sobre-img{ width:auto;height:var(--p5-sobre-alto);position:relative;z-index:2; aspect-ratio:1100/1440; /* CLS 0 aunque tarde */ filter:drop-shadow(-30px 26px 40px rgba(0,0,0,.7)); transition:transform .45s var(--p5-ease); } .p5-pack:hover img.p5-sobre-img{transform:translateY(-8px) rotateY(-5deg) rotateX(1.5deg)} @media(max-width:880px){ /* ⚠ `top:auto` no es decorativo: la regla base pone sticky con un `top`, y sobre un elemento relative ese `top` SIGUE aplicando y lo corre hacia abajo sin mover el layout. En el arroz eso dejaba el botón encima del kicker. Con top:177 el desfase sería de 177 px, así que menos decorativo todavía. */ .p5-pack{position:relative;top:auto;order:-1;margin-bottom:18px;gap:10px} .p5-pack img.p5-sobre-img{height:min(46vh,370px)} @media(max-height:800px){ .p5-pack img.p5-sobre-img, .p5-pack .p5-sobre3d{height:min(41vh,330px)} .p5-pack{gap:8px;margin-bottom:14px} .p5-sobre-pie{font-size:12.5px;line-height:1.5} .p5-hero-grid{padding-top:4px} .p5-hero-copy .p5-kicker{margin-bottom:4px} .p5-hero-copy h1{margin-bottom:6px} .p5-pack{margin-bottom:6px} .p5-crumbs{padding-top:4px} .p5-hero .p5-notes{padding-bottom:0;border-bottom:none;margin-bottom:14px} } } /* El canvas se monta ENCIMA del y arranca invisible: recién cuando el GLB terminó de cargar se cruza el fundido. El LCP sigue siendo la imagen. */ .p5-pack .p5-sobre3d{ /* Misma caja que la , al píxel: el visor encuadra contra el tamaño del canvas, así que si la caja no coincide el fundido se ve como un salto. */ position:absolute;left:50%;top:0;transform:translateX(-50%); height:var(--p5-sobre-alto);aspect-ratio:1100/1440;max-width:100%; z-index:3;pointer-events:none; } .p5-pack .p5-sobre3d canvas{ width:100%;height:100%;display:block; opacity:0;transition:opacity .6s var(--p5-ease); touch-action:pan-y; /* en touch el scroll vertical siempre gana */ } .p5-pack.p5-live3d .p5-sobre3d{pointer-events:auto} .p5-pack.p5-live3d .p5-sobre3d canvas{opacity:1;cursor:grab} .p5-pack.p5-live3d .p5-sobre3d canvas:active{cursor:grabbing} /* ⛔ ESTE SELECTOR NO PUEDE LLEVAR `>`. Costó el bug que Thomas vio como «atrás del sobre 3D está el sobre viejo». La regla original era `.p5-pack.p5-live3d > img.p5-sobre-img`, copiada de la página del arroz, donde la SÍ es hija directa de `.hero-pack`. Acá no: al agregar el volteo de tarjeta, la imagen pasó a vivir dentro de `.p5-flip`, así que el combinador de hijo directo dejó de matchear y la se quedó en opacity 1 — entera, perfectamente alineada detrás del canvas. Medido: opacity 1 en las cuatro páginas nuevas, opacity 0 en el arroz publicado. No rompía nada, no daba error de consola y las cajas coincidían al píxel; sólo se veía el sobre estático asomando alrededor del modelo que giraba. Se oculta el `.p5-flip` ENTERO y no sólo el frente: bajo 3D no se usa ninguna de las dos caras. `visibility:hidden` además de `opacity:0` para que el navegador no siga componiendo una imagen de 1100×1440 en cada cuadro del giro. */ .p5-pack.p5-live3d .p5-flip{ /* La animación de entrada corre con fill:both y su último keyframe deja opacity:1; una declaración normal no le gana. Se apaga la animación. */ animation:none;opacity:0;visibility:hidden; } .p5-pack.p5-live3d .p5-sobre-img{animation:none} .p5-pack.p5-live3d:hover img.p5-sobre-img{transform:none} @media(max-width:880px){ .p5-pack .p5-sobre3d{height:min(46vh,370px)} } .p5-pack .p5-spill{ /* Decorativo y absoluto: sin esto se come los clics de lo que tiene abajo. */ position:absolute;bottom:2%;left:50%;transform:translateX(-50%); pointer-events:none; width:72%;height:70px;z-index:1; background:radial-gradient(50% 100% at 50% 100%,var(--p5-glow-1) 0%,rgba(26,18,8,.9) 58%,transparent 76%); filter:blur(10px); } /* ===================================================================== EL VOLTEO SIN 3D La rama de fallback no tiene sprite sheet — para estos seis modelos no existen los frames del paso 40 del estudio (el arroz tiene 36, estos tienen cero, y generarlos pide re-renderizar en Blender). Así que el dorso se muestra con la imagen del dorso, que SÍ existe para los seis, y el gesto es un volteo de tarjeta. Las dos caras ocupan la misma celda de una grilla 1×1 y la caja tiene alto fijo: el volteo no mueve una sola línea de layout. Con prefers-reduced-motion la transición se apaga y el cambio es instantáneo, pero SIGUE funcionando: el que no puede ver la animación igual ve el dorso. ===================================================================== */ .p5-flip{position:relative;z-index:2;transform-style:preserve-3d; transition:transform .62s var(--p5-ease)} .p5-pack.p5-dorso .p5-flip{transform:rotateY(180deg)} .p5-flip > img{backface-visibility:hidden;-webkit-backface-visibility:hidden} .p5-flip > .p5-cara-dorso{ position:absolute;inset:0;transform:rotateY(180deg); width:100%;height:100%;object-fit:contain; } /* Hasta que el JS confirma que la imagen del dorso bajó, la cara de atrás no existe: un volteo hacia una imagen vacía es peor que no voltear. */ .p5-pack:not(.p5-flipready) .p5-flip{transform:none;transition:none} .p5-pack:not(.p5-flipready) .p5-cara-dorso{display:none} @media(prefers-reduced-motion:reduce){ .p5-flip{transition:none} } /* ===================================================================== LA FRANJA DE CONTROL Alto fijo reservado desde el primer pintado. Adentro va la pista (escritorio con 3D) o el botón de dorso (todo lo demás), y cuál aparece se decide recién después del load. Sin el alto reservado son 58 px de CLS, medidos en el arroz. ===================================================================== */ .p5-accion{ /* Ancho fijo además del alto: si la caja se encoge al cambiar pista por botón, el re-centrado cuenta igual como layout shift. */ width:100%;min-height:48px; display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; } .p5-pista{ margin:0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--p5-muted-2);opacity:0;transition:opacity .4s var(--p5-ease); pointer-events:none; } .p5-pack.p5-live3d .p5-pista{opacity:.8} .p5-boton{ display:inline-flex;align-items:center;gap:10px; font-family:'Lora',Georgia,serif;font-size:14.5px;font-weight:600; color:var(--p5-sobre-tinta);background:var(--p5-acento); border:none;border-radius:999px;padding:13px 24px; cursor:pointer;min-height:44px; transition:filter .2s var(--p5-ease), transform .15s var(--p5-ease); } .p5-boton:hover{filter:brightness(1.08)} .p5-boton:active{transform:translateY(1px)} .p5-boton:focus-visible{outline:2px solid var(--p5-cream);outline-offset:3px} .p5-boton .p5-ico{font-size:16px;line-height:1} /* Ocupa su lugar desde el primer pintado pero no se ve ni la lee un lector de pantalla hasta que el JS lo habilita. visibility y no display: display lo sacaría del flujo y devolvería el salto. */ .p5-boton{visibility:hidden;position:absolute} .p5-pack.p5-flipready .p5-boton{visibility:visible;position:static} .p5-pack.p5-live3d .p5-boton{visibility:hidden;position:absolute} .p5-pack.p5-live3d .p5-pista{display:block} /* ===================================================================== ⭐ EL SELECTOR DE GRAMAJE Sólo en provenzal y adobo. En pescado y aves el bloque no se emite. Es un radiogroup de verdad: dos reales con su . Eso da, de fábrica y sin una línea de JS: navegación con flechas, Espacio para elegir, anuncio correcto en lector de pantalla, y un estado que sobrevive a que el JS falle. El JS sólo escucha el `change`. ⚠ El gramaje va ESCRITO en el control, no insinuado con dos íconos: el brief lo pide explícito y además es lo que el que compra viene a buscar. ===================================================================== */ .p5-gram{ display:inline-flex;position:relative; background:rgba(0,0,0,.34); border:1px solid var(--p5-linea); border-radius:999px;padding:4px;gap:2px; /* contiene el pulgar deslizante */ isolation:isolate; } .p5-gram input{ /* No se esconde con display:none ni visibility:hidden — las dos lo sacan del árbol de foco y matan la navegación por teclado, que es justo lo que este control tiene que conservar. Se apila DEBAJO de su label. */ position:absolute;opacity:0;pointer-events:none; width:1px;height:1px;margin:0; } .p5-gram label{ position:relative;z-index:2; display:inline-flex;align-items:center;justify-content:center;gap:7px; min-height:40px;padding:0 20px;border-radius:999px; font-family:'Lora',Georgia,serif;font-size:14px;font-weight:600; color:var(--p5-muted-1);cursor:pointer;white-space:nowrap; transition:color .28s var(--p5-ease); } .p5-gram input:checked + label{color:var(--p5-sobre-tinta)} /* El foco se dibuja sobre el LABEL porque el input es de 1 px y su anillo no se vería. `:focus-visible` en el input, anillo en el label hermano. */ .p5-gram input:focus-visible + label{outline:2px solid var(--p5-cream);outline-offset:2px} /* El pulgar: un solo elemento que se desliza, no dos fondos que se prenden y apagan. Con dos opciones alcanza con translateX del 100 % de su ancho. */ .p5-gram-pulgar{ position:absolute;z-index:1;top:4px;bottom:4px;left:4px; width:calc(50% - 4px);border-radius:999px; background:var(--p5-acento); transition:transform .34s var(--p5-ease); pointer-events:none; } .p5-gram[data-sel='100'] .p5-gram-pulgar{transform:translateX(100%)} @media(prefers-reduced-motion:reduce){ .p5-gram-pulgar{transition:none} } /* El estado de carga del segundo modelo. El porcentaje es real: sale de leer el stream del fetch, no de un temporizador que finge. */ .p5-gram[data-cargando='1'] label{cursor:progress} .p5-gram-carga{ position:absolute;left:4px;right:4px;bottom:-1px;height:2px;z-index:3; border-radius:999px;overflow:hidden; background:rgba(245,232,210,.14); opacity:0;transition:opacity .2s var(--p5-ease); } .p5-gram[data-cargando='1'] .p5-gram-carga{opacity:1} .p5-gram-carga i{ display:block;height:100%;width:0;border-radius:999px; background:var(--p5-cream);transition:width .18s linear; } /* ⚠⚠ ESTAS DOS REGLAS SIGUEN VIVAS Y NO SON HUÉRFANAS, aunque provenzal ya no las use — 2026-09-07. Se borraron por un rato ese mismo día y hubo que ponerlas de vuelta: ESTA HOJA ES DE LAS CUATRO PÁGINAS. · .p5-gram-nota la sigue usando adobo-para-pizza (con sus data-nota25 y data-nota100 puestos, o sea que además la cambia al vivo). · .p5-sobre-pie la siguen usando adobo, aves y pescado. provenzal perdió sus dos

del hero porque a 1366×768 el selector de gramaje caía 41 px por debajo del viewport; el detalle está en el HTML, en el comentario que quedó dentro de .p5-pack. ⛔ REGLA GENERAL PARA LA PRÓXIMA VEZ, que es la lección real: antes de borrar una regla de estas tres hojas por «huérfana», hay que verificarla contra el MARCADO DE LAS CUATRO PÁGINAS y descontando los comentarios — un comentario que cita la clase que acaba de borrar cuenta como uso en un grep crudo, y una clase que sólo usa otra página no aparece si mirás una sola. Hay un chequeo hecho en scratchpad/huerfanos.js de esa corrida. */ /* La nota cambia de texto al cambiar de gramaje, así que su caja tiene que estar reservada o el cambio empuja todo lo de abajo. Una línea en escritorio, dos en los anchos donde el texto envuelve. Medido a 360 px: la nota del de 100 g entra en dos renglones. */ .p5-gram-nota{ margin:0;font-size:12.5px;line-height:1.45;letter-spacing:.05em; color:var(--p5-muted-2);min-height:2.9em;text-align:center;max-width:34ch; } .p5-gram-nota b{color:var(--p5-muted-1);font-weight:600} /* ===================================================================== EL PIE DEL SOBRE — la transcripción del dorso El texto del envase no se lee en el render ni con la mejor luz. Esto es la letra chica en tamaño que se lee, escrita como pie de foto. ===================================================================== */ .p5-sobre-pie{ max-width:38ch;margin:0;text-align:center; font-size:13.5px;line-height:1.6;color:var(--p5-muted-1);font-style:italic; } .p5-sobre-pie span{ display:block;font-style:normal;font-size:12.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--p5-muted-2);margin-bottom:6px; } /* Entrada escalonada — un solo momento orquestado, no micro-interacciones */ @media(prefers-reduced-motion:no-preference){ .p5-hero-copy > *,.p5-pack img.p5-sobre-img{animation:p5-rise .8s var(--p5-ease) both} .p5-pack img.p5-sobre-img{animation-delay:.05s} .p5-hero-copy .p5-kicker{animation-delay:.10s} .p5-hero-copy h1{animation-delay:.16s} .p5-hero .p5-notes{animation-delay:.24s} .p5-hero .p5-lead{animation-delay:.30s} .p5-hero .p5-cta-row{animation-delay:.38s} } @keyframes p5-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} /* ===================================================================== 2 · LO QUE TODOS PREGUNTAN Antes del 20 % del scroll, sin acordeón: visible por defecto. Regla de escritura: la primera oración ES la respuesta. ===================================================================== */ .p5-preguntas{padding:0 0 96px;position:relative} .p5-hoja{max-width:980px;margin:0 auto} .p5-hoja-head{border-bottom:1px solid var(--p5-linea);padding-bottom:18px;margin-bottom:30px} .p5-hoja-head .p5-kick{margin-bottom:8px} .p5-hoja-head h2{font-size:clamp(26px,3.2vw,38px);color:var(--p5-cream);margin:0} .p5-qa{padding:22px 0} .p5-qa + .p5-qa{border-top:1px solid var(--p5-linea-soft)} .p5-qa h3{ font-size:clamp(18px,2vw,21px);color:var(--p5-cream); margin:0 0 10px;font-weight:700;line-height:1.25; } .p5-qa p{margin:0;font-size:16px;line-height:1.75;color:var(--p5-muted-1)} .p5-qa p b{color:var(--p5-acento);font-weight:600} /* ===================================================================== 3 · LO QUE TIENE ADENTRO — las cards de especias ===================================================================== */ .p5-cinco{background:var(--p5-ink-2)} .p5-cards{display:grid;gap:14px;margin-top:34px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .p5-scard{ display:block;border:1px solid var(--p5-linea-soft);border-radius:16px; overflow:hidden;background:rgba(0,0,0,.22); transition:transform .22s var(--p5-ease), border-color .22s var(--p5-ease); } .p5-scard:hover{transform:translateY(-5px);border-color:var(--p5-linea);text-decoration:none} .p5-scard .p5-txt{padding:18px 18px 20px} .p5-scard h3{ font-size:19px;margin:0 0 8px;color:var(--p5-cream);font-weight:700; display:flex;align-items:baseline;gap:9px; } .p5-scard h3 .p5-n{ font-family:'Lora',Georgia,serif;font-size:11px;letter-spacing:.14em; color:var(--tono,var(--p5-acento));font-weight:600; } .p5-scard p{margin:0 0 14px;font-size:14.5px;line-height:1.65;color:var(--p5-muted-1)} .p5-scard .p5-go{font-size:13px;color:var(--tono,var(--p5-acento));font-weight:600} .p5-cierre-esp{margin-top:34px!important} /* ── LOS DIBUJOS EN NEGATIVO · la receta ──────────────────────────────── 2026-09-04. Los cinco WebP de assets/images/botanica/negativo/ son dibujos a lápiz CLAROS sobre fondo OSCURO, RGB y SIN canal alfa. Son el negativo del set de la enciclopedia, que es tinta oscura sobre papel claro. ⭐ EL BLEND ES `screen`, que es el espejo del `multiply` de la enciclopedia. multiply mantiene lo oscuro y descarta lo blanco; screen mantiene lo claro y descarta lo NEGRO. Por eso, para que no quede un rectángulo alrededor del dibujo, el fondo del archivo tiene que llegar a NEGRO PURO — igual que allá tenía que llegar a blanco puro. ⚠ Y NO LLEGA SOLO. Medido píxel a píxel en las esquinas de los cinco archivos: el fondo real es #130f0c (19,15,12), con ruido de dithering del encoder hasta #150f0c (21,15,12). No es #0d0906 como decía el encargo. Sobre un fondo de tarjeta de #140e06, screen de un negro 19 da 32: seis niveles más claro, o sea el rectángulo que hay que evitar. La enciclopedia documentó el mismo defecto al revés en su CHANGELOG v41.1: subir la opacidad convirtió un defecto invisible en uno visible. ⚠ LA CORRECCIÓN NO ES `brightness()` SOLO. brightness escala, y para llevar 19 a 0 escalando hay que multiplicar por 0 — se va el dibujo con el fondo. Lo que hace falta es mover el PUNTO NEGRO, y eso en CSS se arma con las dos funciones encadenadas. Con `brightness(b) contrast(c)`, y todo en sRGB 0-1: salida = (entrada · b − 0,5) · c + 0,5 Pidiendo que la entrada 21/255 = 0,0824 dé exactamente 0: 0,0824 · b = 0,5 − 0,5/c → con c = 1,18, b = 0,926 Y el blanco se conserva: (1 · 0,926 − 0,5) · 1,18 + 0,5 = 1,0027, que satura en 1. O sea: el fondo cae a negro puro y la tinta del lápiz no se pierde. Es el mismo cálculo que el brightness(1.13) de la enciclopedia —donde 226 · 1,13 = 255 exacto— resuelto para el extremo opuesto de la rampa. ⛔ EL FONDO OPACO DEL NO ES DECORATIVO, igual que el `background:var(--papel)` de los iconos de la enciclopedia. `screen` se mezcla con lo que haya PINTADO DEBAJO dentro de su contexto de apilado. La tarjeta tiene `background:rgba(0,0,0,.22)`, que es semitransparente: sin un fondo opaco propio, el resultado depende de contra qué se componga y deja de ser predecible. El pinta el color real de la tarjeta y se aísla con `isolation:isolate`, así el blend siempre se resuelve contra ese color y contra ningún otro. Cada dirección le pasa SU color en --p5-neg-fondo: si una dirección cambia el fondo de la tarjeta y se olvida de esa variable, vuelve el rectángulo. ⚠ `aspect-ratio` FIJO Y `object-fit:contain`: la caja fija es lo que da CLS 0 —el hueco está reservado antes de que la imagen llegue— y lo que mantiene las dos tarjetas alineadas si algún día las dos imágenes dejan de tener la misma proporción. ⭐ LA CAJA ES 16/9 DESDE EL 2026-09-07, y el número sale de lo que va adentro: las dos fotos hero son 1200×669 = 1,7937, o sea 16/9 con dos milésimas de diferencia. Con `contain` llenan la caja exacta y no queda aire arriba ni abajo. Antes era 4/3 acá, 5/4 en mostrador y 16/10 en mostrador-celular, y esos tres números estaban calculados para los DIBUJOS («el manojo de perejil es apaisado, 672×566»). Los dibujos se fueron; el motivo de la caja se fue con ellos. ────────────────────────────────────────────────────────────────────── */ :root{ --p5-neg-filtro:brightness(.926) contrast(1.18); /* punto negro 21 -> 0 */ --p5-neg-fondo:#140e06; /* = rgba(0,0,0,.22) sobre --p5-ink-2 */ --p5-neg-caja:16/9; /* la proporción de la caja de la tarjeta */ } .p5-scard-lam{ display:block;position:relative;width:100%; aspect-ratio:var(--p5-neg-caja); background:var(--p5-neg-fondo); isolation:isolate; } /* ⭐⭐ EL TOGGLE QUE THOMAS TIENE QUE COMPARAR — 2026-09-07 ─────────────── Se da vuelta con UNA LÍNEA: agregar la clase `p5-cards-plano` al

de «Qué tiene adentro», en el HTML. Puesta = las fotos se apoyan tal cual (`normal`). Sacada = `screen`, que es el default y lo que se ve ahora. LA MEDICIÓN, para que la comparación tenga un número al lado. Punto negro REAL de las dos fotos: (0,0,0) — no es una aproximación, el 23 % de los píxeles de cada una es negro exacto y un tercio está por debajo de L=8. Mediana del borde de 12 px: perejil (15,10,6), ajo (1,1,1). Con `screen` un píxel (0,0,0) deja el fondo EXACTAMENTE como estaba, así que el borde de la foto se disuelve en la tarjeta en vez de dibujar un rectángulo. Cuánto se despega el borde del fondo de cada dirección (ΔL sobre 255): screen normal lámina --lam-tierra +9,9 / +1,0 +0,7 / −8,7 lámina --lam-tierra-2 +9,7 / +1,0 −2,3 / −11,7 mostrador --mos-verde +9,0 / +0,9 −22,0 / −31,3 mostrador --mos-negro +9,9 / +1,0 +1,7 / −7,7 (primer número perejil, segundo ajo) LO QUE DICEN ESOS NÚMEROS: sobre los fondos casi negros de lámina las dos opciones están cerca y es cuestión de gusto. Sobre `--mos-verde`, que es verde y no negro, `normal` deja el borde 22 y 31 puntos POR DEBAJO del fondo: eso es el rectángulo oscuro visible, y es el caso que justifica el default. Por eso el default es `screen` y por eso la decisión no se tomó acá: hay que mirarlo. */ .p5-scard-lam img{ display:block;width:100%;height:100%;object-fit:contain; mix-blend-mode:var(--p5-scard-blend, screen); } .p5-cards-plano .p5-scard-lam img{--p5-scard-blend:normal} /* ⛔ ACÁ NO VA `filter:var(--p5-neg-filtro)`, Y NO ES UN OLVIDO. Ese filtro —brightness(.926) contrast(1.18)— estaba calibrado para llevar de 21 a 0 el gris del PAPEL de un dibujo a lápiz. Una foto no tiene papel: su punto negro medido ya es (0,0,0). Aplicárselo no arreglaba nada y le comía contraste real. La variable sigue viva porque la usan los `.p5-bot`, que siguen siendo dibujos. */ /* Sin blend no hay dibujo claro sobre fondo oscuro: hay un rectángulo con un dibujo adentro. Si el navegador no soporta mix-blend-mode, es preferible bajar la imagen a un tamaño chico y centrada, que se lee como viñeta. */ @supports not (mix-blend-mode:screen){ .p5-scard-lam img{width:72%;height:72%;margin:14% auto} } /* ⛔ NADA DE ESTO CORRE CON `forced-colors`: el modo de alto contraste pisa los colores y un blend contra un fondo que ya no controlamos deja el dibujo invisible. Se apaga el blend y se deja la imagen tal cual. */ @media (forced-colors:active){ .p5-scard-lam img{mix-blend-mode:normal;filter:none} } /* ===================================================================== MECÁNICA COMPARTIDA POR LAS DOS DIRECCIONES Lo que va acá es lo que las dos necesitan igual. Lo que cambia entre una y otra vive en dir-lamina.css y dir-mostrador.css, cada una scopeada bajo su [data-dir], y ninguna de las dos toca el hero (scopean todo bajo `main > section`, y el hero es un

). ===================================================================== */ /* ── LOS DIBUJOS DE FONDO ────────────────────────────────────────────── Mismo mecanismo que los 38 de la enciclopedia, con dos cambios: `screen` en vez de `multiply` (el papel acá es negro) y el filtro de punto negro documentado arriba, en el bloque de `.p5-scard-lam`. ⛔ `overflow:clip` EN LA SECCIÓN Y NO EN OTRO LADO. Es lo que hace cumplir la regla de que un dibujo puede sangrar por los costados pero NUNCA por el borde de arriba ni por el de abajo: el sangrado lateral se lee como sangrado y el vertical se lee como error. `clip` y no `hidden` para no crear un contenedor de scroll. ⚠ `--p5-bot-op` ARRANCA EN 0 y cada dirección le da su valor. El default de 0 está escrito además en el `style` inline de cada del HTML: si una hoja no llega, o si una dirección decide no usar un dibujo, no aparece a tamaño natural encima del texto ni por un cuadro. ────────────────────────────────────────────────────────────────────── */ /* ⛔ LA MÁSCARA DE MARGEN NO ES UN EFECTO: es lo que hace que el dibujo NO quede detrás del texto. Y no es una preferencia estética — está medido. EL CÁLCULO, primero. El fondo bajo un trazo del dibujo no se estima: screen(fondo, trazo) = 255 − (255−fondo)(255−trazo)/255 compuesto = fondo·(1−α) + screen·α Con el peor caso posible (trazo = 255, blanco puro) sobre la tierra #0e0a05 y α = 0,22, el fondo sube a (67,64,60). Contra el crema #f5e8d2 eso da 8,5:1 y sobra; pero contra el cuerpo --p5-muted-1 (#b9a982) da 4,45:1 — POR DEBAJO del 4,5 de AA. Y DESPUÉS, MEDIDO CONTRA LA PÁGINA REAL. scratchpad/gate-contraste.py renderiza la página con el texto vuelto transparente, busca el píxel MÁS CLARO del fondo debajo de cada texto que pisa un dibujo y calcula el contraste contra su color. 39 pares en «lámina» y 5 en «mostrador». El gate se probó con los dibujos al 0,9 y sin máscara: 12 reprobados, o sea que sí puede fallar. Peor contraste de la página, por opacidad: α con máscara sin máscara 0,30 4,95 / 4,83 ✔ 4,95 / 4,77 ✔ 0,40 4,95 / 4,83 ✔ 4,46 / 4,44 ✘ (rompe AA) 0,50 4,95 / 4,77 ✔ 3,64 / 3,61 ✘✘ 0,60 4,95 / 4,77 ✔ — O sea: la máscara es exactamente lo que hace que la perilla de opacidad se pueda tocar. Sin ella la página pasa hoy de casualidad y se rompe en cuanto alguien sube el número dos puntos — y se rompe SIN AVISAR. Con ella el contraste no se mueve, porque el dibujo directamente ya no llega al texto. Es el mismo recurso que la enciclopedia usa en su lámina de hero, que también es el único dibujo suyo con texto encima. Cada dirección le pasa el lado por --p5-bot-mask; sin máscara declarada, la imagen se pinta entera (el fallback del var() es "none"). */ .p5-bot{ position:absolute;z-index:0;pointer-events:none;user-select:none; max-width:none;width:auto;object-fit:contain; mix-blend-mode:screen; filter:var(--p5-neg-filtro); opacity:var(--p5-bot-op,0); -webkit-mask-image:var(--p5-bot-mask,none); mask-image:var(--p5-bot-mask,none); } /* Los dos lados, como valores reusables. ⚠ EL NOMBRE DICE DÓNDE ESTÁ EL DIBUJO, no hacia dónde va el degradé. La primera versión los llamaba izq/der a secas y los NUEVE quedaron al revés: es ambiguo, porque «izquierda» tanto puede ser el lado de la página donde vive el dibujo como el lado hacia el que se apaga, y son opuestos. Con el nombre así el error no se puede cometer: · margen-izq → el dibujo vive en el MARGEN IZQUIERDO (queda anclado con `right:calc(50% + N)`). Tiene tinta contra el borde de la página y se apaga HACIA LA DERECHA, que es de donde viene el texto. · margen-der → el dibujo vive en el MARGEN DERECHO (anclado con `left:calc(50% + N)`). Se apaga hacia la izquierda. La regla mecánica, para no volver a errarle: si la regla dice `right:`, la máscara es margen-izq; si dice `left:`, es margen-der. Van como variables y no como dos clases más en el marcado porque el lado no es del dibujo, es de DÓNDE LO PUSO ESTA DIRECCIÓN: el mismo archivo está a la izquierda en una y a la derecha en la otra. */ :root{ --p5-bot-mask-margen-izq:linear-gradient(to right,#000 0 30%,rgba(0,0,0,.45) 62%,transparent 88%); --p5-bot-mask-margen-der:linear-gradient(to left, #000 0 30%,rgba(0,0,0,.45) 62%,transparent 88%); } /* El contenido por encima del dibujo. .p5-wrap/.p5-wrap-wide no traían contexto propio; sin esto el texto y el dibujo comparten plano y el orden lo decide el orden del marcado, que es frágil. */ .p5-band > .p5-wrap, .p5-band > .p5-wrap-wide{position:relative;z-index:1} /* Alto contraste: el blend deja el dibujo invisible cuando el sistema pisa los colores. Se apaga entero — es decoración. */ @media (forced-colors:active){ .p5-bot{display:none} } /* ── EL CONMUTADOR DE DIRECCIONES ────────────────────────────────────── ⛔ HERRAMIENTA DE BORRADOR. Se borra al publicar, junto con `.p5-draft` y el