/* BlumenClub · landing pública, capa de impacto visual.
   Solo lo carga index.html: el área de socios no cambia.
   Reglas que respeta: fondo negro plano (sin grano ni degradados sobre el negro), un solo color de estudio por pieza,
   oro solo como acento, Harmonia Sans Pro (Bold para titulares), esquinas rectas, marco hoja.
   Para cambiar el color del bloque del manifiesto: --durazno en site.css o usar --salvia / --petalo en .s-durazno. */

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ───────── hero: titular grande, segunda línea en oro claro, sello de lote ───────── */
.hero h1{font-size:clamp(2.5rem,4.9vw,4.6rem);line-height:1.02;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--gold-lt)}
@media(min-width:961px) and (min-aspect-ratio:5/4){
  .hero-copy{max-width:min(560px,calc(44vw - 20px))}
}
.seal{position:absolute;z-index:3;right:clamp(20px,5vw,72px);bottom:clamp(28px,6vw,68px);width:clamp(108px,10.8vw,156px);aspect-ratio:1;pointer-events:none}
.seal svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.seal-ring text{font:600 12.4px var(--f-body);letter-spacing:.08em;fill:var(--gold-lt);text-transform:uppercase}
.seal-ring{animation:seal-spin 42s linear infinite}
.seal .s-fill{fill:#0B0B0C}
.seal .s-line{fill:none;stroke:var(--gold);stroke-width:1.1}
.seal .s-thin{stroke-width:.8;opacity:.55}
.seal text.s-sm{font:600 9.6px var(--f-body);letter-spacing:.22em;fill:var(--gold);text-anchor:middle}
.seal text.s-big{font:700 31px var(--f-name);letter-spacing:-.02em;fill:var(--on-ink);text-anchor:middle}
@keyframes seal-spin{to{transform:rotate(360deg)}}
.mo .seal{transition:opacity 1.4s ease 1.9s,scale 1.6s var(--ease-out) 1.9s}
.mo body:not(.revealed) .seal{opacity:0;scale:.82}
.hero.is-off .seal-ring{animation-play-state:paused}
@media(max-width:960px),(max-aspect-ratio:5/4){
  .seal{width:92px;right:16px;bottom:38px}
}

/* ───────── barra dorada divisoria entre el hero y BlumenHaus: la misma del pie (2 px), se dibuja al entrar en pantalla ───────── */
.rule-gold{height:2px;background:linear-gradient(90deg,#6E522D 0%,#B79861 35%,#ECD9AA 55%,#B79861 80%,#6E522D 100%)}
.mo .rule-gold{transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease)}
.mo .rule-gold.in{transform:scaleX(1)}

/* ───────── BlumenHaus: titular a todo el ancho, pilares numerados ───────── */
.haus-head{display:grid;gap:22px;justify-items:start;margin-bottom:clamp(36px,5vw,68px)}
.haus-head .logo{height:32px;width:auto}
.haus-head .eyebrow{max-width:none}
.haus-head h2{font-size:clamp(2.6rem,6.5vw,5.7rem);line-height:1;letter-spacing:-.04em;max-width:11.5em}
.pillars{counter-reset:pl}
.pillar{align-items:center;transition:border-color .4s ease}
.pillar .ic{margin-top:0}
.pillar:hover{border-bottom-color:var(--gold)}
.pillar h3::before{counter-increment:pl;content:"0" counter(pl);display:block;margin-bottom:10px;font:600 .72rem/1 var(--f-body);letter-spacing:.26em;color:var(--gold)}

/* ───────── manifiesto: un bloque de color plano, tipografía enorme ───────── */
.s-durazno{--bg:var(--durazno);--fg:#0B0B0C;--mute:#2A1812;--soft:#3F251C;--line:#B97C6A;--accent:#5B3427;--focus:#0B0B0C;
  background-color:var(--bg);background-image:var(--grain-paper);background-size:220px 220px;color:var(--fg)}
.pull-sec{position:relative;overflow:hidden;padding-block:clamp(88px,12vw,164px);scroll-margin-top:64px}
.pull-sec .pull{position:relative;margin:0;padding:0;border:0;gap:clamp(36px,4.6vw,68px);justify-items:start}
.pull-sec .pull>:not(.pull-leaf){position:relative;z-index:1}
.pull-sec .pull-q{font-size:clamp(2rem,4.9vw,4.5rem);line-height:1.04;letter-spacing:-.04em;max-width:none}
.pull-q .ln{display:block}
/* "el arte": un trazo que se dibuja a medida que se enciende la frase (--u lo mueve motion.js) */
.pull-sec .pull-q em{font-style:normal;position:relative;display:inline-block;white-space:nowrap;color:var(--accent)}
.pull-sec .pull-q em::after{content:"";position:absolute;left:0;right:0;bottom:.03em;height:.05em;background:currentColor;transform:scaleX(var(--u,1));transform-origin:left}
.mo .pull-sec .pull-q em{--u:0}

/* hojas planas en tonos del durazno: se mueven detrás del cristal (giro lento + desplazamiento con el scroll) */
.pull-leaf{position:absolute;z-index:0;pointer-events:none;translate:0 calc(var(--py,0) * var(--k,1) * 1px)}
.pull-leaf i{display:block;width:100%;height:100%;border-radius:50% 0 50% 0}
.pull-leaf.l1{--k:-1;width:clamp(230px,31vw,450px);aspect-ratio:1;left:56%;bottom:-14%}
.pull-leaf.l1 i{background:#E6B4A5}
.pull-leaf.l2{--k:.7;width:clamp(110px,13vw,190px);aspect-ratio:1;left:52%;bottom:3%}
.pull-leaf.l2 i{background:#C6806E}
.mo .pull-leaf.l1 i{animation:leaf-spin 34s linear infinite}
.mo .pull-leaf.l2 i{animation:leaf-spin 50s linear infinite reverse}
@keyframes leaf-spin{to{transform:rotate(360deg)}}
.pull-sec.is-off .pull-leaf i{animation-play-state:paused}

/* panel de cristal: marca Flavor Design Art a la izquierda del texto */
.pull-row{display:grid;grid-template-columns:auto minmax(0,50ch);align-items:center;gap:clamp(18px,2.6vw,36px);max-width:100%;
  padding:clamp(24px,3vw,40px) clamp(24px,3.4vw,48px);
  background-color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);border-radius:clamp(40px,5vw,64px) 6px clamp(40px,5vw,64px) 6px;
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 22px 44px -30px rgba(63,37,28,.5)}
.pull-sec .pull-p{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;max-width:none;color:var(--fg)}
.pull-p b{font-weight:600}
.fda{position:relative;margin:0;width:clamp(118px,10.5vw,150px);aspect-ratio:448/194}
.fda img{position:absolute;display:block;max-width:none;height:auto}
.fda-flame{left:41.96%;top:0;width:16.07%;transform-origin:50% 100%}
.fda-word{left:0;top:71.65%;width:100%}
.mo .pull-row .fda-flame{transition:opacity 1.1s ease .5s,scale 1.4s var(--ease-out) .5s,translate 1.4s var(--ease-out) .5s}
.mo .pull-row:not(.in) .fda-flame{opacity:0;scale:.4;translate:0 24%}
.mo .pull-row .fda-word{transition:clip-path 1.5s var(--ease-out) .8s}
.mo .pull-row:not(.in) .fda-word{clip-path:inset(0 100% 0 0)}
@keyframes fda-flick{
  0%,100%{transform:scale(1,1) skewX(0)}
  21%{transform:scale(.97,1.07) skewX(-3deg)}
  47%{transform:scale(1.03,.97) skewX(2.4deg)}
  70%{transform:scale(.975,1.09) skewX(-1.8deg)}
}
.mo .pull-row.in .fda-flame{animation:fda-flick 3.6s ease-in-out 2s infinite}
.pull-sec.is-off .fda-flame{animation-play-state:paused}
@media(max-width:960px){
  .pull-row{grid-template-columns:1fr;row-gap:18px;align-items:start}
  .fda{width:130px}
  .pull-leaf.l1{left:auto;right:-18%;bottom:-8%;width:72vw}
  .pull-leaf.l2{left:auto;right:30%;bottom:-4%;width:26vw}
}

/* ───────── títulos de sección con más presencia ───────── */
#ecosystem h2,#community h2{font-size:clamp(2.3rem,5.2vw,4.4rem);letter-spacing:-.035em}

/* ───────── comunidad: solo el collage en blanco y negro, texto centrado en vertical ───────── */
/* el signo ≠ no existe en Harmonia Sans Pro: se dibuja con el contorno del "=" de la Bold más una barra, así no cambia de tipografía */
.neq{display:inline-block;width:.672em;height:1em;vertical-align:-.2em}
.neq svg{display:block;width:100%;height:100%;fill:currentColor;overflow:visible}
#community .cm{align-items:center}
#community .cm-copy{gap:28px}
@media(max-width:860px){#community .cm{align-items:start}}

/* ───────── acceso: un bloque plano en Salvia, un solo botón ───────── */
.s-salvia{--bg:var(--salvia);--fg:#0B0B0C;--mute:#1B2623;--soft:#25322E;--line:#4B625C;--accent:#26352F;--focus:#0B0B0C;--surface:#A9B9B5;--track:#4B625C;
  --btn:var(--ink);--btn-fg:var(--on-ink);--btn-h:#2C3D38;--ln-b:var(--ink);--ln-f:var(--ink);
  background-color:var(--bg);background-image:var(--grain-paper);background-size:220px 220px;color:var(--fg)}
.acc{padding-block:clamp(84px,12vw,168px)}
.acc-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);column-gap:clamp(32px,6vw,96px);row-gap:clamp(24px,3vw,36px);align-items:end}
.acc-in .eyebrow{grid-column:1/-1;max-width:none}
.acc h2{grid-column:1;font-size:clamp(2.8rem,7.6vw,7rem);line-height:.96;letter-spacing:-.045em;max-width:8.6em}
.acc-side{grid-column:2;display:grid;gap:clamp(28px,3.4vw,44px);align-content:end;padding-bottom:.5em}
.acc-side .lede{color:var(--mute);max-width:38ch}
.btn-acc{justify-content:space-between;gap:28px;width:100%;max-width:440px;min-height:86px;padding:0 clamp(22px,2.6vw,34px)}
.btn-acc .bm-w{display:grid;gap:8px;text-align:left}
.btn-acc .bm-t{font:600 .9rem/1.2 var(--f-body);letter-spacing:.22em}
.btn-acc .bm-s{font:400 .7rem/1.2 var(--f-body);letter-spacing:.26em;opacity:.78}
.btn-acc .bm-arr{flex:none;width:48px;height:12px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:translate .5s var(--ease-out)}
.btn-acc:hover .bm-arr,.btn-acc:focus-visible .bm-arr{translate:8px 0}
.acc-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;margin-top:clamp(40px,6vw,88px);border-top:1px solid var(--fg)}
.acc-facts div{display:grid;gap:8px;align-content:start;padding-top:18px}
.acc-facts dt{font:600 .7rem/1.3 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.acc-facts dd{font:600 1.05rem/1.35 var(--f-body)}
@media(max-width:960px){
  .acc-in{grid-template-columns:1fr}
  .acc h2,.acc-side{grid-column:1}
  .acc-side{padding-bottom:0}
  .acc-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  .acc-facts div{padding-bottom:18px}
}
@media(max-width:480px){.btn-acc{min-height:78px}.btn-acc .bm-t{font-size:.8rem;letter-spacing:.16em}.btn-acc .bm-s{letter-spacing:.2em}.btn-acc .bm-arr{width:36px}}

/* ───────── pie: BlumenClub y BlumenHaus al mismo tamaño; REPROCANN y Ministerio de Salud en lugar del +18 ───────── */
.foot-top img.logo-sister{height:26px}
/* los cuatro logos van en una sola fila, alineados al centro y con el mismo espacio; REPROCANN y Ministerio de Salud un poco más chicos */
.foot-gov{display:contents}
.foot-gov img{width:auto;opacity:.92}
.foot-top .foot-gov img.g-reprocann{height:28px}
.foot-top .foot-gov img.g-msal{height:38px}
@media(max-width:480px){.foot-top{gap:20px 16px}.foot-top>img,.foot-top img.logo-sister{height:22px}.foot-top .foot-gov img.g-reprocann{height:24px}.foot-top .foot-gov img.g-msal{height:32px}}