@font-face { font-family: Schibsted; src: url('../assets/fonts/SchibstedGrotesk-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Schibsted; src: url('../assets/fonts/SchibstedGrotesk-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Schibsted; src: url('../assets/fonts/SchibstedGrotesk-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Schibsted; src: url('../assets/fonts/SchibstedGrotesk-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: Chivo; src: url('../assets/fonts/Chivo-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }   /* giant words only; static Black cut from Google Fonts' Chivo[wght] (OFL) */

:root {
  /* Section palette (Pablo, 31 Oct 2026; diseno/color-harmony): three stacked sections of matched depth, each
     with its own base and a second colour pooled behind the fruit or product. 1 green + yellow, 2 red + orange
     (the heat), 3 Confitex purple + lilac. --pool is where the glow sits (over the fruit).
     --s1-sheet / --s2-sheet: a 30% sheet of the logo green / 15% of the logo red over the whole background, highlights kept; --s1-shade darkens the green
     section 15% without moving its hue (Pablo, 6 Nov 2026). */
  --s1-sheet: rgba(156,204,60,.3); --s1-shade: rgba(0,0,0,.15); --s1-a: #3d7426; --s1-b: #467f2b; --s1-c: #356522; --s1-edge: #173a12a0; --s1-hi: #e3d65a80;
  --s2-sheet: rgba(225,26,49,.15); --s2-a: #c23a1e; --s2-b: #cf4622; --s2-c: #a52c17; --s2-edge: #5c1208a0; --s2-hi: #ffa43c99;
  --s3-a: #774fc2; --s3-b: #8255d0; --s3-c: #6744a9;   /* same hue and chroma as before, lifted to the green and red's lightness (OKLCH L .56) so the three sections match (Pablo, 6 Nov 2026) */
  --s3-edge: #1e0b3ea0; --s3-hi: #c9a6ff80;
  --s3-berry-a: #a93889; --s3-berry-b: #b73c92; --s3-berry-c: #933077;   /* the purple wall starts berry and ramps evenly to the purple by the bar (p 7; stage.js --mk3), carrying on round the wheel from the red (Pablo, 6 Nov 2026) */
  --pool: 29% 66%;
}
:root { --giant-word-color: rgba(255,255,255,.05); --giant-word-size: 24.75vw; --giant-word-tracking: -.05em; --nav-stroke: rgba(255,255,255,.22); --deep-green: #2a511d; --nav-height: 72px; font-family: Schibsted, sans-serif; color: white; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid white; outline-offset: -5px; }
.site-header { --nav-t: 0; position: absolute; inset: 0 0 auto; z-index: 10; border-bottom: 1px solid var(--nav-stroke);
  /* --nav-t: 0 is the transparent nav over colour, 1 the white sticky one (.site-header--fija) */
  /* from fully transparent over the stage to solid white over the cream page (Pablo, 4 Nov 2026) */
  background: color-mix(in srgb, #fff calc(var(--nav-t) * 100%), rgba(255,255,255,0));
  /* the logo, links and Contacto button wait until the background is past halfway, then switch quickly (Pablo, 4 Nov 2026) */
  --nav-f: clamp(0, (var(--nav-t) - .55) / .35, 1);
  color: color-mix(in srgb, #2a2725 calc(var(--nav-f) * 100%), white);
  --nav-stroke: color-mix(in srgb, rgba(42,39,37,.12) calc(var(--nav-t) * 100%), rgba(255,255,255,.22)); }
/* Two navs (Pablo, 6 Nov 2026; js/nav.js): this transparent one stays at the top of the page and is never sticky; its white
   copy is the sticky one, sliding down from the top once the transparent one has scrolled out of view, and back up when it returns. */
.site-header--fija { position: fixed; --nav-t: 1; transform: translateY(-100%); visibility: hidden; box-shadow: 0 1px 0 rgba(42,39,37,.06);
  transition: transform .32s cubic-bezier(.3,.7,.2,1), visibility 0s linear .32s; }
.site-header--fija.is-visible { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.3,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .site-header--fija, .site-header--fija.is-visible { transition: none; } }
/* on the homepage the transparent nav rides with the pinned stage (nav.js moves it up only when the stage scrolls away) */
.site-header--escenario { position: fixed; }
.nav { height: var(--nav-height); padding: 0 0 0 clamp(20px, 1.8vw, 32px); display: flex; align-items: stretch; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 42px; width: auto; }   /* mark only, no wordmark (Pablo, 4 Nov 2026) */
.nav-links { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.nav-links li { display: flex; }
.nav-links a { display: flex; align-items: center; padding: 0 clamp(16px, 2.1vw, 32px); border-left: 1px solid var(--nav-stroke); }
.nav-links a:hover, .nav-links a:focus-visible { background: rgba(255,255,255,.08); }
.nav-links .contact { background: color-mix(in srgb, #e11a31 calc(var(--nav-f) * 100%), white); color: color-mix(in srgb, white calc(var(--nav-f) * 100%), #2a2725); }
.nav-links .contact:hover, .nav-links .contact:focus-visible { background: #f2f2ed; }
.nav-links .contact:focus-visible { outline-color: #2a2725; }
.menu-toggle { display: none; }

.hero { --focus-x: 37%; --focus-y: 45%; --focus-size: clamp(70px, 8.4vw, 140px); position: relative; min-height: max(740px, 100svh); padding-top: calc(var(--nav-height) + 1px); overflow: hidden; isolation: isolate; background: linear-gradient(var(--s1-shade), var(--s1-shade)), linear-gradient(var(--s1-sheet), var(--s1-sheet)), radial-gradient(ellipse 34% 30% at var(--pool), var(--s1-hi) 0%, transparent 100%), radial-gradient(ellipse at 48% 40%, transparent 30%, var(--s1-edge) 100%), linear-gradient(125deg, var(--s1-a), var(--s1-b) 50%, var(--s1-c)); }
.hero::after { content: ''; position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: .075; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
/* Giant background words (FRUTA, SECADO, any later one) share one size, tracking and font: never size one on its own.
   Chivo Black, only for these words: its S and C end in flat, horizontal cuts (Pablo, 4 Nov 2026). Sized so SECADO spans the same width as before. */
.hero-word, .process-word { position: absolute; top: calc(var(--nav-height) + 5%); font-family: Chivo, Schibsted, sans-serif; font-weight: 900; font-size: var(--giant-word-size); letter-spacing: var(--giant-word-tracking); line-height: .8; color: var(--giant-word-color); white-space: nowrap; user-select: none; }
.hero-word { left: 50%; transform: translateX(-50%); }
.process-word { left: 0; }
.fruit-scene { position: absolute; inset: calc(var(--nav-height) + 1px) 0 0; z-index: 1; }
/* Display-contents placements share anchors and depth without creating stacking contexts.
   Every wall shadow paints above FRUTA, below every fruit and the marker. */
.fruit-placement { display: contents; --anchor-x: var(--x); --size: clamp(70px, var(--s), 150px); }
.fruit-placement-focus { --x: var(--focus-x); --y: var(--focus-y); --s: var(--focus-size); --r: -6deg; }
.fruit { position: absolute; z-index: 1; left: var(--anchor-x); top: var(--y); width: var(--size); transform: translate(-50%, -50%) rotate(var(--r)); }
/* At z=.3: .25 diameters down / .45 opacity; at z=1: .60 / .18.
   Horizontal displacement radiates away from the wall's top-centre light.
   Blur scales with the fruit so the same system stays soft on mobile. */
.wall-shadow { --cast-size: var(--size); --cast-down: calc(var(--cast-size) * (.10 + .50 * var(--z))); --cast-out: calc((var(--anchor-x) - 50%) * (.5 + var(--z))); position: absolute; z-index: 0; pointer-events: none; left: var(--anchor-x); top: var(--y); width: calc(var(--cast-size) * 1.04); height: calc(var(--cast-size) * .90); border-radius: 50%; background: rgb(5 20 5); opacity: calc(.566 - .386 * var(--z)); transform: translate(calc(-50% + var(--cast-out)), calc(-50% + var(--cast-down))); filter: blur(calc(var(--cast-size) * (.01 + .19 * var(--z)))); }
.bubble-shadow { --cast-size: calc(var(--size) * .92 * 1.4 * 1.06); background: radial-gradient(ellipse, rgb(5 20 5 / .12) 20%, rgb(5 20 5 / .38) 67%, rgb(5 20 5 / .12)); opacity: calc(.25 - .10 * var(--z)); filter: blur(calc(var(--cast-size) * (.025 + .075 * var(--z)))); }
/* A restrained focus of transmitted light toward the top-centre light source. */
.shadow-caustic { position: absolute; left: calc(50% - var(--cast-out)); top: 24%; width: 30%; height: 21%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgb(255 246 209 / .8), rgb(255 250 225 / .3) 35%, transparent 75%); filter: blur(calc(var(--size) * .025)); }
.fruit img { display: block; width: 100%; height: auto; }
/* Shared fruit anchor; the cutout fills about 92% of its picture box.
   The rim and leader share an SVG opacity layer to keep their join uniform. */
.marker { --fruit-diameter: calc(var(--focus-size) * .92); --bubble-size: calc(var(--fruit-diameter) * 1.4); position: absolute; z-index: 2; left: var(--focus-x); top: var(--focus-y); width: calc(58% - var(--focus-x) - 26px); height: 0; color: rgba(255,255,255,.92); pointer-events: none; }
.marker-bubble, .marker-geometry { position: absolute; left: 0; top: 0; width: var(--bubble-size); height: var(--bubble-size); transform: translate(-50%, -50%); }
.marker-bubble { border-radius: 50%; background:
  radial-gradient(ellipse 15% 10% at 25% 20%, rgba(255,255,255,.8), rgba(255,255,255,.25) 38%, transparent 100%),
  radial-gradient(ellipse 9% 22% at 85% 67%, rgba(237,255,250,.24), transparent 100%),
  radial-gradient(circle at 50% 50%, transparent 58%, rgba(199,235,222,.04) 65%, rgba(231,255,247,.25) 68%, rgba(16,48,31,.18) 70%, rgba(226,255,246,.12) 72%, transparent 74%);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,.35), inset -2px -2px 3px rgba(9,39,25,.24), 2px 4px 10px rgba(8,30,18,.16), 0 0 4px rgba(222,255,234,.1);
}
/* Only the outer 9% samples the backdrop; the fruit remains unfiltered. */
.marker-bubble::before { content: ''; position: absolute; inset: 0; border-radius: inherit; backdrop-filter: blur(1px) brightness(1.08); -webkit-backdrop-filter: blur(1px) brightness(1.08); mask-image: radial-gradient(circle, transparent 60%, #000 67%); -webkit-mask-image: radial-gradient(circle, transparent 60%, #000 67%); }
.marker-geometry { overflow: visible; opacity: .85; }
/* Static no-JS fallback follows the desktop composition; JS measures the H1. */
.connector { overflow: visible; }
/* The opening block sits on the bottom: its last line ends 12.5% above the hero's bottom edge on any screen (Pablo, 4 Nov 2026). */
.hero-copy { position: absolute; z-index: 2; left: 58%; right: 4%; bottom: 12.5%; }
/* Scroll cue (Pablo, 1 Nov 2026, AI mockup 3 with a mouse): a slowly turning ring of text round a mouse whose wheel
   rolls, sitting above the hero copy and leaving with it on the first scroll. */
.scroll-cue { position: absolute; left: -10px; bottom: calc(100% + 26px + 7vh); width: 124px; height: 124px; color: white; pointer-events: none; }
.scroll-cue-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: scroll-cue-turn 24s linear infinite; }
.scroll-cue-ring text { fill: white; font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue-inner { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border: 1.5px solid white; border-radius: 50%; }
.scroll-cue-mouse { position: absolute; left: 50%; top: 50%; width: 16px; height: 25px; margin: -12.5px 0 0 -8px; border: 1.5px solid white; border-radius: 9px; }
.scroll-cue-mouse::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: white; animation: scroll-cue-wheel 1.7s ease-in-out infinite; }
/* Phones: no mouse, a down arrow; the cue sits at the right, clear of the fruit above the copy. */
@media (hover: none) {
  .scroll-cue-mouse { width: 1.5px; height: 20px; margin: -12px 0 0 -.75px; border: 0; border-radius: 0; background: white; }
  .scroll-cue-mouse::after { top: auto; bottom: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 0; background: none; border-right: 1.5px solid white; border-bottom: 1.5px solid white; transform: rotate(45deg); transform-origin: center; animation: none; }
}
@media (max-width: 767px) { .scroll-cue { left: auto; right: -4px; bottom: calc(100% + 18px); width: 96px; height: 96px; } .scroll-cue-inner { width: 46px; height: 46px; margin: -23px 0 0 -23px; } }
@keyframes scroll-cue-turn { to { transform: rotate(360deg); } }
.intro-veil { position: fixed; inset: 0; z-index: 1000; pointer-events: none; background: rgba(53, 101, 34, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .7s ease; }
.intro-veil.is-on { opacity: 1; }
.scroll-cue--intro { position: fixed; z-index: 1001; bottom: auto; right: auto; }
.scroll-cue--intro.is-gliding { transition: transform .95s cubic-bezier(.65, 0, .25, 1); }
.intro-pending .marker, .intro-pending .bubble-shadow, .intro-play .bubble-shadow { visibility: hidden !important; }
.intro-play .marker-dot { transform-box: fill-box; transform-origin: center; animation: intro-dot .35s 0s ease-out both; }
.intro-play .connector path { stroke-dasharray: var(--len) var(--len); animation: intro-line .55s .08s cubic-bezier(.55, 0, .25, 1) both; }
.intro-play .marker-rim { stroke-dasharray: 1 1; animation: intro-rim .55s .62s cubic-bezier(.4, 0, .2, 1) both; }
.intro-play .marker-bubble { animation: intro-pop .7s .62s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes intro-dot { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.7); opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes intro-line { from { stroke-dashoffset: calc(-1 * var(--len)); } to { stroke-dashoffset: 0; } }
@keyframes intro-rim { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes intro-pop { from { transform: translate(-50%, -50%) scale(.15); opacity: 0; filter: blur(8px); } 55% { opacity: 1; filter: blur(0); } to { transform: translate(-50%, -50%) scale(1); opacity: 1; filter: blur(0); } }
@keyframes scroll-cue-wheel { 0% { transform: translateY(0); opacity: 1; } 65% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
/* stage blocks, option B (Pablo, 4 Nov 2026): heading, then a lead line one step down, then a smaller, quieter body set apart by a hairline */
.overline { margin: 18px 0 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -.03em; color: #fff; }
h1,.stage-copy h2 { margin: 0; font-size: clamp(40px, 5vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -.055em; }
.description br { display: none; }   /* hand breaks are for wide screens; phones wrap freely */
.description { width: fit-content; max-width: 38ch; margin: 30px 0 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.25); font-size: 16px; line-height: 1.6; letter-spacing: -.01em; color: rgba(255,255,255,.74); }
@media (min-width: 761px) { .description:has(br) { max-width: none; } .description br { display: inline; } }
/* one outlined button under the stage copy, for people who want Flortex now: for the moment it leads to contact (Pablo, 6 Nov 2026) */
.cta-borde { display: block; width: fit-content; margin-top: 28px; color: #fff; text-decoration: none; font-weight: 700; font-size: clamp(15px, 1.15vw, 17px); padding: 13px 26px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); transition: transform .2s ease, background .2s ease; }   /* frosted: a light fill that blurs the stage behind it (Pablo, 6 Nov 2026) */
.cta-borde:hover, .cta-borde:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.24); }
.next-section { min-height: 200px; display: grid; place-items: center; background: #f0f0ed; color: #858581; font-size: 13px; }

@media (max-width: 767px) {
  :root { --nav-height: 64px; --giant-word-size: 24.2vw; --giant-word-tracking: -.06em; }
  .nav { padding-left: 24px; }
  .brand img { height: 34px; }
  .menu-toggle { display: flex; position: relative; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 76px; padding: 0; border: 0; border-left: 1px solid var(--nav-stroke); background: transparent; color: white; cursor: pointer; }
  .menu-toggle:hover, .menu-toggle:focus-visible { background: rgba(255,255,255,.08); }
  .menu-toggle span { width: 26px; height: 2px; background: currentColor; }
  .menu-abierto .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-abierto .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-abierto .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; height: calc(100dvh - var(--nav-height) - 1px); background: var(--deep-green); padding: 0; overflow-y: auto; align-items: stretch; flex-direction: column; gap: 0; font-size: 26px; }
  .menu-open { overflow: hidden; }
  .site-header.menu-abierto { background: var(--deep-green); }
  .menu-abierto .nav-links { display: flex; }
  .nav-links li { flex-shrink: 0; }
  .nav-links a { width: 100%; min-height: 76px; padding: 20px 28px; border-left: 0; border-bottom: 1px solid var(--nav-stroke); }
  .hero { min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--nav-height) + 1px) 26px 44px; }
  .hero-word, .process-word { top: calc(var(--nav-height) + 28px); }
  .fruit-scene { position: relative; inset: auto; flex: 0 0 390px; width: calc(100% + 52px); margin-left: -26px; --focus-x: 63%; --focus-y: 44%; --focus-size: 64px; }
  .fruit-placement { --anchor-x: calc(var(--x) * 1.5); --size: clamp(56px, calc(var(--s) * 1.9), 74px); }
  .fruit-placement-focus { --anchor-x: var(--focus-x); --size: var(--focus-size); }
  .marker { width: 0; }
  .connector { display: none; }
  .hero-copy { position: relative; inset: auto; padding-top: 10px; }
  .overline { font-size: 19px; margin-top: 14px; }
  h1,.stage-copy h2 { font-size: clamp(38px, 10.7vw, 60px); line-height: 1.04; }
  .description { margin-top: 22px; padding-top: 16px; font-size: 15px; line-height: 1.55; max-width: 340px; }
}
@media (max-width: 767px) and (max-height: 720px) { .fruit-scene { flex-basis: 330px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Static chapters are the no-JS / reduced-motion baseline. The horizon is geometry only. */
h1,h2,h3,h4,h5,h6 { text-wrap: balance; }
p { text-wrap: pretty; }
.stage-copy--green,.fruit-placement-extra,.heat,.powder,.powder-continuation,.step-nav { display:none; }
.dehydration { position:relative; height:100svh; overflow:hidden; }
.dehydration .hero-copy { top:auto; bottom:calc(25% + 17vw); }
.stage-copy--process .overline,.stage-copy--sweet .overline { color:white; }
/* Section 3 (powder to candy): Confitex purple with a cyan pool, a stacked section below the stage. */
.next-section { min-height:100svh; position:relative; overflow:clip; padding-top:150px; align-items:start; color:rgba(255,255,255,.7); background:radial-gradient(ellipse 52% 52% at 46% 56%, rgba(201,166,255,0.500) 0%, rgba(201,166,255,0.468) 12%, rgba(201,166,255,0.375) 25%, rgba(201,166,255,0.257) 38%, rgba(201,166,255,0.158) 50%, rgba(201,166,255,0.085) 62%, rgba(201,166,255,0.038) 75%, rgba(201,166,255,0.014) 88%, rgba(201,166,255,0) 100%), radial-gradient(ellipse at 48% 40%, transparent 28%, rgba(30,11,62,.06) 45%, rgba(30,11,62,.2) 62%, rgba(30,11,62,.4) 80%, rgba(30,11,62,.63) 100%), linear-gradient(125deg, var(--s3-a), var(--s3-b) 50%, var(--s3-c)); }
/* The nav stays on screen while the page scrolls through the pinned stage. */
/* The track's extra height is the scroll distance that scrubs the pinned stage (steps 0-2). */
/* Scroll length of the whole stage: 1.5x the original speed (Pablo, 1 Nov 2026; 2x was too fast), steps 0-7. */
.stage-enabled .stage-track { height:calc(100svh + 621vh); }   /* seven steps at 1.5x */
.stage-enabled .stage { position:sticky; top:0; height:100svh; overflow:clip; isolation:isolate; }
.stage-enabled .hero,.stage-enabled .dehydration { position:absolute; inset:0; height:100%; min-height:0; }
.stage-enabled .hero { overflow:visible; isolation:auto; }
.stage-enabled .dehydration { background:none; overflow:visible; isolation:auto; pointer-events:none; }
/* Drying heat: section 2, red with an orange pool under the fruit (Pablo: inverted from the golden wall). */
.stage-enabled .stage-wall,.dehydration { background:linear-gradient(var(--s2-sheet), var(--s2-sheet)), radial-gradient(ellipse 36% 30% at var(--pool), var(--s2-hi) 0%, transparent 100%), radial-gradient(ellipse at 48% 40%, transparent 30%, var(--s2-edge) 100%), linear-gradient(125deg, var(--s2-a), var(--s2-b) 50%, var(--s2-c)); }
.stage-enabled .stage-wall { position:absolute; inset:0; opacity:0; }
/* Green to red (Pablo, 6 Nov 2026; stage.js sets --mk1 and --mk2 on one even ramp): the whole green section ripens to amber, then turns red, all at
   once (no circle spreading from the fruit); the red wall above only shows once the colours match. */
.stage-enabled .hero { --k1: var(--mk1, 100%); --k2: var(--mk2, 100%);   /* green share, then amber share (stage.js) */
  --y-a: #e8960a; --y-b: #f5a914; --y-c: #c96d04; --y-edge: #7a3a0090; --y-hi: #ffc04060;   /* the amber in between, no pale yellow; a warm glow, not the cream one that read as a stain (Pablo, 6 Nov 2026) */
 
  background:
    linear-gradient(color-mix(in srgb, var(--s1-shade) var(--k1), transparent), color-mix(in srgb, var(--s1-shade) var(--k1), transparent)),
    linear-gradient(color-mix(in oklch, color-mix(in oklch, var(--s1-sheet) var(--k1), transparent) var(--k2), var(--s2-sheet)), color-mix(in oklch, color-mix(in oklch, var(--s1-sheet) var(--k1), transparent) var(--k2), var(--s2-sheet))),
    radial-gradient(ellipse 34% 30% at var(--pool), color-mix(in oklch, color-mix(in oklch, var(--s1-hi) var(--k1), var(--y-hi)) var(--k2), var(--s2-hi)) 0%, transparent 100%),
    radial-gradient(ellipse at 48% 40%, transparent 30%, color-mix(in oklch, color-mix(in oklch, var(--s1-edge) var(--k1), var(--y-edge)) var(--k2), var(--s2-edge)) 100%),
    linear-gradient(125deg, color-mix(in oklch, color-mix(in oklch, var(--s1-a) var(--k1), var(--y-a)) var(--k2), var(--s2-a)), color-mix(in oklch, color-mix(in oklch, var(--s1-b) var(--k1), var(--y-b)) var(--k2), var(--s2-b)) 50%, color-mix(in oklch, color-mix(in oklch, var(--s1-c) var(--k1), var(--y-c)) var(--k2), var(--s2-c))) }
/* Section 3 (Confitex purple, lilac pool) wipes in from the right over the drying; stage.js moves its left edge with
   the rendered frames so the powder crosses the edge exactly as in the storyboard (diseno/powder-transition).
   The pool fades on a bell curve over a wide radius and the edge shade eases in, so the glow has no visible rim (Pablo, 5 Nov 2026). */
.stage-enabled .stage-wall--sweet { opacity:1; z-index:1; overflow:hidden; clip-path:inset(0 0 0 100%); background:radial-gradient(circle max(40vw,46vh) at var(--s3-pool,50% 58%), rgba(201,166,255,0.500) 0%, rgba(201,166,255,0.468) 12%, rgba(201,166,255,0.375) 25%, rgba(201,166,255,0.257) 38%, rgba(201,166,255,0.158) 50%, rgba(201,166,255,0.085) 62%, rgba(201,166,255,0.038) 75%, rgba(201,166,255,0.014) 88%, rgba(201,166,255,0) 100%), radial-gradient(ellipse at 48% 40%, transparent 28%, rgba(30,11,62,.06) 45%, rgba(30,11,62,.2) 62%, rgba(30,11,62,.4) 80%, rgba(30,11,62,.63) 100%), linear-gradient(125deg, color-mix(in oklch, var(--s3-berry-a) var(--mk3, 0%), var(--s3-a)), color-mix(in oklch, var(--s3-berry-b) var(--mk3, 0%), var(--s3-b)) 50%, color-mix(in oklch, var(--s3-berry-c) var(--mk3, 0%), var(--s3-c))); }
.stage-enabled .stage-wall--sweet .process-word { opacity:1; }
/* SECADO (section 2) is centred vertically and DULCE (section 3) sits in the bottom half (Pablo, 4 Nov 2026). The JS owns transform, so SECADO centres with a negative margin of half its .8 line box. */
/* the closing text block sits centred under the finished bar (storyboard k5) */
.stage-enabled .stage-copy--sweet { top:66%; bottom:auto; left:50%; right:auto; width:min(560px, 80vw); text-align:center; transform:translate(-50%, var(--cty,0px)); }   /* centring lives here, never in the JS transform */
.stage-enabled .process-word { top:50%; margin-top:calc(var(--giant-word-size) * -.4); }
.stage-enabled .process-word--sweet { top:auto; bottom:5%; margin-top:0; }
.ingredients { display:none; }
.stage-enabled .ingredients { display:block; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; visibility:hidden; }
.ingredient-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ingredient { position:absolute; margin:0; max-width:24vw; font-size:clamp(22px, 2.1vw, 34px); font-weight:700; line-height:1.05; letter-spacing:-.03em; color:white; text-wrap:balance; }   /* smaller than the headings (Pablo) */
.ingredient small { display:block; margin-bottom:6px; font-size:clamp(12px, 1vw, 15px); font-weight:500; letter-spacing:0; color:#ffffffc9; }
.ingredient[data-side="left"] { text-align:right; }
@media (max-width:767px) { .stage-enabled .ingredients { display:none; } }
/* The drying temperature (Pablo, 2 Nov 2026; Döner reel, investigacion/3d ref 19): a dash rail on the left edge that
   lights up from the bottom as the fruit heats, the readout above it counting to the film's horno figure, 350 °C. */
.thermo { display:none; }
.stage-enabled .thermo { display:block; position:absolute; left:48px; top:calc(var(--nav-height) + 10%); bottom:11%; width:20px; z-index:4; opacity:0; pointer-events:none; }
.thermo-read { position:absolute; left:30px; bottom:var(--read,1.5px); transform:translateY(50%); line-height:1; font-size:17px; font-weight:700; letter-spacing:.04em; color:white; white-space:nowrap; }   /* rides up centred on the highest lit tick (Pablo, 4 Nov 2026) */
.thermo-ticks, .thermo-ticks::after { position:absolute; left:0; top:0; bottom:0; width:18px;
  background:repeating-linear-gradient(to top, #ffffff4d 0 3px, transparent 3px 16px); }
.thermo-ticks::after { content:""; top:auto; height:var(--lit,0%);
  background:repeating-linear-gradient(to top, white 0 3px, transparent 3px 16px); }
@media (max-width:767px) { .stage-enabled .thermo { display:none; } }
.stage-wall--sweet,.stage-copy--sweet { display:none; }
.stage-enabled .stage-wall--sweet,.stage-enabled .stage-copy--sweet { display:block; }
/* The faint grain and the fixed spotlight sit on the background: above FRUTA, below the fruit and copy. */
.stage-enabled .hero::after,.stage-enabled .spotlight { z-index:2; }
/* The dark green vignette fades out as the heat rises, so the golden wall never goes muddy at the edges. */
.spotlight { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 46% 58% at 29% 58%, transparent 30%, rgb(4 16 3 / calc(.34 * (1 - var(--heat,0)))) 100%); }
/* Drying heat: a warm pool on the floor under the fruit, in place of embers (Pablo: heat, not cheap). */
.spotlight::after { content:''; position:absolute; inset:0; opacity:var(--heat,0); background:radial-gradient(ellipse 34% 22% at 29% 72%, rgb(255 178 82 / .55), rgb(232 128 40 / .22) 55%, transparent 100%); mix-blend-mode:screen; }
.stage-enabled .hero-word,.stage-enabled .process-word { z-index:1; }
.stage-enabled .process-word { opacity:0; }
.stage-enabled .fruit-scene { z-index:3; }
.fall-sequence { display:none; }
.seq-mode .fruit-scene :is(.fruit,.fruit-piece,.contact-shadow,.ambient-shadow,.fruit-shadow,.bubble-shadow) { visibility:hidden !important; }
.stage-enabled .fall-sequence { display:block; position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
/* Water leaving the drying fruit: faint wisps drawn over the frames (stage.js tick). */
.stage-enabled .hero-copy { z-index:5; }
.stage-enabled .stage-copy { visibility:hidden; right:max(4%,76px); }
.stage-enabled .stage-copy > * { opacity:var(--fade,0); }   /* stage.js alpha(): the children fade, so the copy never becomes a backdrop root for .cta-borde */
.stage-enabled .stage-copy .cta-borde { pointer-events:auto; }   /* the drying copy sits in .dehydration, which turns clicks off for its layer; the hidden copy stays unclickable through visibility (Pablo, 7 Nov 2026) */
.stage-enabled .stage-copy--green { display:block; right:4%; }
/* Same component and place as the hero copy (Pablo: one copy component across the steps). */
/* Step copy sits in the upper half of the screen (Pablo, 1 Nov 2026), clear of the fruit on the floor below. */
.stage-enabled .stage-copy--green,.stage-enabled .stage-copy--process { top:calc(var(--nav-height) + 11vh); bottom:auto; right:4%; }
.stage-enabled .fruit-placement-extra { display:contents; }
.fruit-ripe,.fruit-dried { pointer-events:none; opacity:0; }
.fruit-piece { position:absolute; z-index:3; pointer-events:none; }
.contact-shadow,.ambient-shadow { position:absolute; z-index:0; border-radius:50%; background:#493019; mix-blend-mode:multiply; pointer-events:none; transform:translate(-50%,-50%); }
.stage-enabled .heat { display:block; position:absolute; inset:20% 0 0; z-index:2; pointer-events:none; opacity:0; mask-image:linear-gradient(90deg,#000 0%,#000 38%,#0008 48%,transparent 58%); }
.heat-glow { position:absolute; inset:0; transform-origin:bottom; background:radial-gradient(ellipse 70% 85% at 32% 115%,#fff7b2 0%,#ffcd49 17%,#ff701dc9 37%,#fa340d99 56%,#e52c0d33 74%,transparent 95%),radial-gradient(ellipse 80% 110% at 65% 120%,#ffb524bb,#f23b1455 47%,transparent 80%); }
.heat-haze { filter:blur(5px); position:absolute; inset:0; width:100%; height:100%; }
.embers { position:absolute; inset:0; width:100%; height:100%; }
.stage-enabled .powder { display:block; position:absolute; inset:0; z-index:4; width:100%; height:100%; pointer-events:none; }
.stage-enabled .powder-continuation { display:block; position:absolute; top:0; left:0; width:100%; height:200px; pointer-events:none; }
.stage-enabled .step-nav { display:flex; position:absolute; right:20px; top:50%; transform:translateY(-50%); flex-direction:column; z-index:8; }
.step-nav::before { content:''; position:absolute; width:1px; background:#ffffff4d; top:19px; bottom:19px; left:19px; }
.step-nav button { position:relative; width:39px; height:39px; display:grid; place-items:center; border:0; padding:0; background:none; cursor:pointer; }
.step-nav span { width:7px; height:7px; border:1px solid #fff; border-radius:50%; background:transparent; }
.step-nav [aria-current] span { background:white; box-shadow:0 0 0 4px #ffffff18; }
@media (max-width:767px) {
 .dehydration .hero-copy { position:absolute; left:26px; right:26px; top:16%; bottom:auto; }
 .stage-enabled .hero-copy { position:absolute; top:465px; left:26px; right:26px; padding-top:10px; }
 .stage-enabled .stage-copy--process,.stage-enabled .stage-copy--sweet { top:465px; bottom:auto; left:26px; right:26px; }
 .stage-enabled .stage-copy--sweet { width:auto; transform:translateY(var(--cty,0px)); }
 /* phones: fruit sit in the band above the copy, so the spotlight and the heat pool move up */
 .spotlight { background:radial-gradient(ellipse 70% 34% at 50% 30%, transparent 30%, rgb(4 16 3 / calc(.34 * (1 - var(--heat,0)))) 100%); }
 .spotlight::after { background:radial-gradient(ellipse 52% 16% at 50% 38%, rgb(255 178 82 / .55), rgb(232 128 40 / .22) 55%, transparent 100%); }
 .stage-enabled .fruit-scene { position:absolute; inset:calc(var(--nav-height) + 1px) 0 0; margin:0; width:100%; height:390px; }
 .stage-enabled .fruit-placement:nth-child(n+6) { display:none; }
 .stage-enabled .fruit-placement:nth-child(9) { display:contents; }
 :root { --pool: 50% 30%; }
 .stage-enabled .step-nav { display:none; }
 .stage-enabled .stage-copy { right:26px; }
 .stage-enabled .heat { mask-image:linear-gradient(0deg,#000 0%,#000 20%,transparent 40%); }
}
@media (max-width:767px) and (max-height:720px) { .stage-enabled .hero-copy:not(.stage-copy) { top:405px; } }

/* Section 4, Marcas (approved A2 catalog grid, Pablo 2 Nov 2026): where the pinned stage hands off to normal scroll. */
.stage-enabled .pagina { position:relative; z-index:5; margin-top:-25svh; }   /* rides up over the end of the stage (Pablo, 3 Nov 2026); a quarter, not half, so the bar keeps room above and below (Pablo, 6 Nov 2026) */   /* rides up over the end of the stage (Pablo, 3 Nov 2026); a quarter, not half, so the bar keeps room above and below (Pablo, 6 Nov 2026) */
.stage-enabled .pagina::before { content:''; position:absolute; left:0; right:0; bottom:100%; height:9px; background:var(--crema); pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9'%3E%3Cpath d='M0 9 9 0l9 9z'/%3E%3C/svg%3E") repeat-x left bottom/18px 9px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 9'%3E%3Cpath d='M0 9 9 0l9 9z'/%3E%3C/svg%3E") repeat-x left bottom/18px 9px; }
/* the purple ends in the Confitex wrapper's cut: the zigzag of its crimped end, no foil (Pablo, 3 Nov 2026) */
.pagina { --crema:#f9f1e7; --tinta:#2a2725; --gris:#7c746c; --rojo:#e11a31; --radio:18px; --ancho:1160px; background:var(--crema); color:var(--tinta); }
.pagina img { display:block; max-width:100%; }
.pagina a { color:inherit; }
/* Over the cream page the nav turns dark on cream; the colour logo swaps in. */
.brand { position:relative; }
.brand .brand-white { opacity:calc(1 - var(--nav-f)); }
.brand .brand-color { position:absolute; left:0; top:50%; translate:0 -50%; opacity:var(--nav-f); }
.menu-toggle { color:inherit !important; }
.site-header.menu-abierto { --nav-t:0 !important; }
  .pagina .marcas { padding: clamp(48px, 7vw, 96px) 24px clamp(40px, 5vw, 72px); }
  .pagina .contenido { max-width: var(--ancho); margin: 0 auto; }

  .pagina .kicker { color: var(--rojo); font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); letter-spacing: .01em; margin: 12px 0 0; }   /* labels always sit under their heading, never above (Pablo, 4 Nov 2026) */
  .pagina h2.titulo {
    margin: 0;
    font-weight: 900;
    font-size: clamp(34px, 4.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -.02em;
    text-wrap: balance;
  }

  /* Marcas as an editorial bento (Pablo picked comp C, 3 Nov 2026): one warm photo grade, each brand on its own
     colour; Confitex is the tall hero tile that picks up the purple from the stage above */
  /* Text links are red, bold, no underline until hover (design system, Pablo, 4 Nov 2026) */
  .pagina .enlace { color: var(--rojo); font-weight: 700; font-size: clamp(15px, 1.25vw, 18px); text-decoration: none; text-underline-offset: .2em; white-space: nowrap; }
  .pagina .enlace span { display: inline-block; transition: transform .25s ease; }   /* every text link ends in a right arrow */
  .pagina .enlace:hover, .pagina .enlace:focus-visible { text-decoration: underline; }
  .pagina .enlace:hover span, .pagina .enlace:focus-visible span { transform: translateX(4px); }
  /* Component: brands heading, every page (markup in js/componentes.js, Pablo 7 Nov 2026). Two-tone run-on
     (6 Nov 2026; diseno/marcas-titulo/round3 M, after Stripe, Linear, Apple): the heading runs on into a grey line at
     the same size, the link under it */
  .pagina .encabezado-marcas { display: block; margin-bottom: clamp(28px, 3.5vw, 52px); }
  .pagina .encabezado-marcas .titulo { font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.028em; max-width: 24ch; text-wrap: pretty; }
  .pagina .encabezado-marcas .titulo span { color: #a39a90; }
  .pagina .encabezado-marcas .enlace { display: inline-block; margin: 22px 0 0; }
  .pagina .bento {
    display: grid; gap: clamp(10px, 1.1vw, 16px);
    grid-template-columns: repeat(14, 1fr); grid-template-rows: 1.25fr 1fr; aspect-ratio: 1.95 / 1;
    grid-template-areas: "confitex confitex confitex confitex confitex mermy mermy mermy mermy saborela saborela saborela saborela saborela"
                         "confitex confitex confitex confitex confitex flortex flortex flortex ate ate ate gomitas gomitas gomitas"; }
  .pagina .baldosa { position: relative; display: block; overflow: hidden; border-radius: var(--radio); color: #fff; text-decoration: none; isolation: isolate; background: #3a2a4a; }
  .pagina .baldosa--confitex { grid-area: confitex; background: #4b2380; }
  .pagina .baldosa--mermy { grid-area: mermy; background: #b4451c; }
  .pagina .baldosa--saborela { grid-area: saborela; background: #9b3a1f; }
  .pagina .baldosa--flortex { grid-area: flortex; background: #d08a12; }
  .pagina .baldosa--ate { grid-area: ate; background: #7a3324; }
  .pagina .baldosa--gomitas { grid-area: gomitas; background: #8e6cc0; }
  .pagina .baldosa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); z-index: -1; }
  .pagina .baldosa::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,10,20,.28) 0%, rgba(20,10,20,0) 42%); }
  .pagina .baldosa:hover img, .pagina .baldosa:focus-visible img { transform: scale(1.04); }
  .pagina .baldosa .texto { position: absolute; left: clamp(16px, 1.8vw, 26px); top: clamp(14px, 1.6vw, 24px); right: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-shadow: 0 1px 12px rgba(0,0,0,.18); }
  .pagina .baldosa .nombre { font-weight: 900; font-size: clamp(20px, 2vw, 30px); letter-spacing: -.02em; line-height: 1.05; }
  .pagina .baldosa .spec { font-size: clamp(12px, .95vw, 14px); line-height: 1.35; opacity: .92; max-width: 22ch; text-wrap: pretty; }
  .pagina .baldosa .flecha { margin-top: 8px; font-size: 20px; line-height: 1; transition: transform .25s ease; }
  .pagina .baldosa:hover .flecha, .pagina .baldosa:focus-visible .flecha { transform: translateX(5px); }
  .pagina .baldosa--confitex .texto { left: clamp(20px, 2.4vw, 34px); top: clamp(20px, 2.4vw, 34px); }
  .pagina .baldosa--confitex .nombre { font-size: clamp(30px, 3.3vw, 48px); }
  .pagina .baldosa--confitex .spec { font-size: clamp(13px, 1.1vw, 16px); }
  .pagina .baldosa--saborela img { object-position: 70% 100%; }
  .pagina .baldosa--flortex .flecha, .pagina .baldosa--ate .flecha, .pagina .baldosa--gomitas .flecha { display: none; }
  .pagina .bento.por-revelar .baldosa { opacity: 0; }   /* hidden until the grid reveal plays (index.html) */
  .pagina .puertas.por-revelar .puerta { visibility: hidden; }   /* hidden until the cards slide in (index.html) */
  @media (max-width: 980px) {
    .pagina .bento { aspect-ratio: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: clamp(200px, 42vw, 320px);
      grid-template-areas: "confitex mermy" "confitex saborela" "flortex ate" "gomitas gomitas"; }
  }
  @media (max-width: 560px) {
    .pagina .bento { grid-template-columns: 1fr; grid-auto-rows: auto; grid-template-areas: "confitex" "mermy" "saborela" "flortex" "ate" "gomitas"; }
    .pagina .baldosa { aspect-ratio: 1 / 1; }
    .pagina .baldosa--confitex { aspect-ratio: 4 / 5; }
    .pagina .baldosa--saborela { aspect-ratio: 3 / 2; }
  }

  /* Below the bento (Pablo, 4 Nov 2026): orchard, history, film, two quiet doors, contact, wordmark footer */
  /* every section sits in the bento's width; the two photo sections are rounded like its tiles (Pablo, 4 Nov 2026) */
  .pagina .huerto, .pagina .documental { position: relative; color: #fff; overflow: clip; isolation: isolate; width: min(var(--ancho), 100% - 48px); margin: 0 auto; border-radius: var(--radio); }
  .pagina .huerto { margin-bottom: clamp(48px, 7vw, 96px); }
  .pagina .huerto > video, .pagina .documental > img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
  .pagina .huerto > video { object-position: 70% 50%; }   /* the phone file is already cropped to 4:5 there */
  .pagina .huerto::after, .pagina .documental::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  .pagina .huerto::after { background: linear-gradient(20deg, rgba(14,22,10,.62) 0%, rgba(14,22,10,.18) 46%, rgba(14,22,10,0) 70%); }
  .pagina .huerto .contenido { position: absolute; z-index: 1; left: clamp(24px, 4vw, 56px); right: 24px; bottom: clamp(28px, 4.4vw, 64px); }
  .pagina .huerto .kicker { color: #fff; }
  .pagina .huerto h2, .pagina .documental h2 { margin: 0; font-weight: 900; font-size: clamp(36px, 5.4vw, 76px); line-height: .98; letter-spacing: -.03em; text-wrap: balance; max-width: 11ch; }


  .pagina .documental::after { background: radial-gradient(ellipse at 50% 45%, rgba(18,12,6,.55) 0%, rgba(18,12,6,.25) 55%, rgba(18,12,6,.1) 100%); }
  .pagina .documental .contenido { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
  .pagina .documental h2 { max-width: none; }
  /* play: the hero's turning seal, reading "Ver el documental · alimenta", around a white disc (Pablo, 4 Nov 2026) */
  .pagina .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pagina .sello { position: relative; width: clamp(132px, 18vw, 220px); aspect-ratio: 1; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .pagina .sello-anillo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: scroll-cue-turn 24s linear infinite; }
  .pagina .sello-anillo text { fill: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
  .pagina .sello-disco { position: absolute; left: 50%; top: 50%; width: 51%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0,0,0,.25); transition: scale .25s ease; }
  .pagina .sello-disco svg { width: 46%; margin-left: 10%; fill: var(--rojo); }
  .pagina .sello:hover .sello-disco, .pagina .sello:focus-visible .sello-disco { scale: 1.08; }

  .pagina .puertas { padding: 0 24px; }   /* no bottom padding: the contact block's own even padding sets the space above it, so it sits centred (Pablo, 7 Nov 2026) */
  .pagina .puertas .contenido { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
  .pagina .puerta { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.4vw, 52px); border-radius: var(--radio); color: #fff; text-decoration: none; }
  /* the cards wear the stage's green and red walls in small: glow, darker edges, sheets (Pablo, 6 Nov 2026); white on top, outlined white button (Pablo, 6 Nov 2026: option 3 of diseno/puertas/round1) */
  .pagina .puerta--industria { background: radial-gradient(ellipse 70% 80% at 22% 24%, #ffd26a70 0%, transparent 100%), radial-gradient(ellipse at 48% 40%, transparent 30%, #7a3a0090 100%), linear-gradient(125deg, #e3920b, #eea212 50%, #c06a05); }   /* Flortex yellow, the stage's amber stop (Pablo, 6 Nov 2026) */
  .pagina .puerta--tiendas { background: linear-gradient(rgba(225,26,49,.45), rgba(225,26,49,.45)),   /* more of the logo red than the stage's 15% (Pablo, 6 Nov 2026) */ radial-gradient(ellipse 70% 80% at 22% 24%, var(--s2-hi) 0%, transparent 100%), radial-gradient(ellipse at 48% 40%, transparent 30%, var(--s2-edge) 100%), linear-gradient(125deg, var(--s2-a), var(--s2-b) 50%, var(--s2-c)); }
  .pagina .puerta h2 { margin: 0 0 12px; font-weight: 900; font-size: clamp(32px, 4vw, 58px); line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
  .pagina .puerta p { margin: 0 0 clamp(22px, 2.6vw, 34px); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.4; opacity: .94; max-width: 30ch; text-wrap: pretty; }
  .pagina .puerta .boton { margin-top: auto; background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; font-weight: 700; font-size: clamp(15px, 1.15vw, 17px); padding: 13px 26px; border-radius: 999px; transition: transform .2s ease; }
  .pagina .puerta:hover .boton, .pagina .puerta:focus-visible .boton { transform: translateY(-2px); }

  .pagina .contacto { padding: clamp(72px, 9vw, 130px) 24px; text-align: center; }   /* even space above and below: the block sits centred (Pablo, 5 Nov 2026) */
  .pagina .contacto .nota { margin: clamp(18px, 2vw, 24px) auto 0; max-width: 36ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; text-wrap: balance; }   /* one line names who it is for; no topic chips (Pablo, 6 Nov 2026) */
  .pagina .whatsapp { display: inline-block; margin-top: clamp(26px, 2.6vw, 34px); background: #7fae2f; color: #fff; text-shadow: 0 1px 2px rgba(40,70,10,.35); font-weight: 700; font-size: clamp(16px, 1.25vw, 19px); text-decoration: none; padding: 16px 34px; border-radius: 999px; transition: transform .2s ease; }   /* solid green, the logo's leaf a step darker (Pablo, 6 Nov 2026) */
  .pagina .whatsapp:hover, .pagina .whatsapp:focus-visible { transform: translateY(-2px); }
  .pagina .lugar { margin: 18px 0 0; color: var(--gris); font-size: 15px; }

  .pagina .pie { background: var(--rojo); color: #fff; }   /* brand red, white logo and text (Pablo, 4 Nov 2026) */
  .pagina .pie .contenido { max-width: none; padding-left: clamp(24px, 3vw, 48px); padding-right: clamp(24px, 3vw, 48px); }   /* the footer runs full width (Pablo, 4 Nov 2026) */
  .pagina .pie .contenido { display: grid; grid-template-columns: 1fr; justify-items: center; gap: clamp(22px, 2.4vw, 32px); padding-top: clamp(22px, 2.4vw, 32px); padding-bottom: clamp(22px, 2.4vw, 32px); }   /* slimmer red band, logo above the links, all centred (Pablo, 5 Nov 2026) */
  .pagina .pie-logo img { display: block; width: 112px; height: auto; }   /* stacked logo, mark above the word (Pablo, 5 Nov 2026) */
  .pagina .pie nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px clamp(16px, 2.4vw, 32px); font-size: 15px; font-weight: 500; }
  .pagina .pie nav a { text-decoration: none; }
  .pagina .pie nav a:hover, .pagina .pie nav a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
  .pagina .subpie { background: var(--rojo); border-top: 1px solid rgba(255,255,255,.18); padding: 14px 24px; text-align: center; }   /* copyright on its own strip, centred (Pablo, 5 Nov 2026); all red with a subtle top border so the footer ends the page in one block (6 Nov 2026) */
  .pagina .legal { margin: 0; color: rgba(255,255,255,.75); font-size: 13px; }

  @media (max-width: 760px) {
    .pagina .puertas .contenido { grid-template-columns: 1fr; }
    .pagina .huerto > video, .pagina .documental > img { aspect-ratio: 4 / 5; }
  }
  @media (max-width: 560px) {
  }

  .pagina .marcas, .pagina .puertas, .pagina .contacto { overflow: clip; }