:root{
  --bg:#ece8df;
  --bg-soft:#f5f1e9;
  --ink:#171a1f;
  --muted:#6f7479;
  --line:rgba(22,28,34,.13);
  --brand-rose:#f4b7d8;
  --brand-lilac:#d69aef;
  --brand-violet:#9a75f2;
  --brand-plum:#4e2d81;
  --brand-deep:#20152d;
  --purple:var(--brand-violet);
  --coral:var(--brand-rose);
  --teal:var(--brand-plum);
  --gold:#a98ad8;
  --header-h:74px;
  --impact-guide-y:50%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:
    radial-gradient(circle at 14% 4%,rgba(239,135,109,.22),transparent 27%),
    radial-gradient(circle at 88% 10%,rgba(93,186,178,.20),transparent 25%),
    radial-gradient(circle at 46% 54%,rgba(213,168,77,.11),transparent 31%),
    linear-gradient(180deg,#f1ede5 0%,#e8e8df 48%,#eef0e9 100%);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* =============================================================================
   INTRO CORTA
   =============================================================================
   La semilla aparece cerrada unos instantes, florece rápidamente y después se
   mueve a su posición lateral. Durante este tramo el scroll permanece bloqueado.
============================================================================= */
body.intro-running{overflow:hidden}
body.intro-running .site-header,
body.intro-running .hero-copy,
body.intro-running .hero-decoration,
body.intro-running .progress{
  opacity:0;
  pointer-events:none;
}

.site-header,
.hero-copy,
.hero-decoration,
.progress{
  transition:opacity .72s cubic-bezier(.16,1,.3,1);
}

body.experience-ready .site-header,
body.experience-ready .hero-copy,
body.experience-ready .hero-decoration,
body.experience-ready .progress{
  opacity:1;
}

.intro-brand{
  position:fixed;
  inset:0;
  z-index:18;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:10vh;
  pointer-events:none;
  text-align:center;
  transition:opacity .18s linear,transform .18s linear,visibility .4s ease;
}
.intro-brand.is-finished{visibility:hidden}
.intro-kicker{
  margin:0 0 10px;
  color:#777b78;
  font-size:9px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:650;
}
.intro-brand h2{
  margin:0;
  color:#171a1f;
  font-size:clamp(42px,5.7vw,86px);
  line-height:.88;
  letter-spacing:-.055em;
  font-weight:790;
}
.intro-slogan{
  margin:13px 0 0;
  color:#8d6c65;
  font-size:11px;
  letter-spacing:.23em;
  text-transform:uppercase;
  font-weight:720;
}

/* =============================================================================
   GUÍA OPCIONAL DE IMPACTO
============================================================================= */
body.show-impact-guide::before{
  content:"IMPACTO DEL PÉTALO";
  position:fixed;
  z-index:999;
  top:var(--impact-guide-y);
  left:0;
  width:100%;
  height:0;
  border-top:1px dashed rgba(190,72,111,.9);
  color:rgba(139,47,78,.95);
  font-size:9px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 0 0 12px;
  pointer-events:none;
}

/* =============================================================================
   CAPA 3D + FONDO
============================================================================= */
#webgl-wrap{
  position:fixed;
  inset:0;
  z-index:4;
  overflow:hidden;
  pointer-events:none;
  background:transparent;
}
#webgl{width:100%;height:100%;display:block;position:relative;z-index:3}

.ambient-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  z-index:1;
  pointer-events:none;
  opacity:.22;
  animation:ambient-drift 14s ease-in-out infinite alternate;
}
.glow-a{
  width:34vw;height:34vw;min-width:340px;min-height:340px;
  background:#f08a70;left:4%;top:8%;opacity:.22;
}
.glow-b{
  width:28vw;height:28vw;min-width:280px;min-height:280px;
  background:#65c0b8;right:5%;top:14%;opacity:.20;animation-duration:18s;
}
.glow-c{
  width:22vw;height:22vw;min-width:220px;min-height:220px;
  background:#b49be7;left:47%;top:58%;opacity:.13;animation-duration:20s;
}
.background-grid{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:.30;
  background-image:
    linear-gradient(rgba(23,26,31,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,26,31,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 42%,#000 12%,transparent 78%);
}
@keyframes ambient-drift{
  from{transform:translate3d(-10px,10px,0) scale(.96)}
  to{transform:translate3d(24px,-18px,0) scale(1.07)}
}

/* =============================================================================
   HEADER
============================================================================= */
.site-header{
  position:fixed;
  z-index:20;
  top:16px;
  left:50%;
  width:min(1180px,calc(100vw - 32px));
  height:var(--header-h);
  transform:translateX(-50%);
  padding:0 14px 0 18px;
  border:1px solid rgba(24,29,32,.10);
  border-radius:22px;
  background:rgba(247,244,236,.68);
  backdrop-filter:blur(20px) saturate(135%);
  box-shadow:0 14px 45px rgba(70,68,61,.10);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.brand{display:flex;align-items:center;gap:11px;justify-self:start}
.brand-logo,
.brand-gem,
.brand-mark,
.footer-mark{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:visible;
  background:transparent !important;border:none !important;padding:0;box-shadow:none !important;
  border-radius:0 !important;
}
.brand-logo img,
.brand-gem img,
.brand-mark img,
.footer-mark img{
  width:100%;height:100%;display:block;object-fit:contain;
  background:transparent;
}
.brand-gem{
  width:30px;height:30px;display:block;border-radius:0 !important;transform:none;
  background:transparent !important;box-shadow:none !important;
}
.brand-copy{display:flex;flex-direction:column;gap:2px}
.brand-copy strong{font-size:11px;letter-spacing:.20em;font-weight:850;color:#191d21}
.brand-copy small{font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#7d807d}
.nav-links{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(26,31,35,.045);border:1px solid rgba(26,31,35,.055)}
.nav-links a{padding:9px 13px;border-radius:999px;font-size:10px;letter-spacing:.08em;color:#61666b;transition:background .25s ease,color .25s ease}
.nav-links a:hover{background:rgba(25,30,34,.08);color:#171a1f}
.header-cta{
  justify-self:end;display:flex;align-items:center;gap:12px;padding:11px 14px 11px 16px;
  border-radius:14px;background:#1c2428;color:#f8f5ed;font-size:10px;font-weight:750;
  letter-spacing:.08em;text-transform:uppercase;transition:transform .25s ease,box-shadow .25s ease;
}
.header-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(28,36,40,.16)}
.header-cta span{font-size:15px;line-height:1}

.progress{position:fixed;z-index:30;top:0;left:0;right:0;height:2px;background:rgba(23,26,31,.06)}
.progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--brand-rose) 0%,var(--brand-lilac) 38%,var(--brand-violet) 68%,var(--brand-plum) 100%)}

/* =============================================================================
   HERO DESPUÉS DE LA INTRO
============================================================================= */
main{position:relative}
.chapter{position:relative;min-height:150svh;padding:13vh 5vw;display:flex;align-items:center;justify-content:center}
.hero{
  min-height:135svh;
  align-items:center;
  justify-content:flex-start;
  padding-top:18vh;
  padding-bottom:13vh;
  max-width:1500px;
  margin:0 auto;
}
.hero-copy{width:min(680px,52vw);position:relative;z-index:8}
.eyebrow,.kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#6f7476}
.hero h1{
  margin:16px 0 24px;
  max-width:760px;
  font-size:clamp(58px,7.4vw,118px);
  line-height:.84;
  letter-spacing:-.065em;
  font-weight:760;
  color:#171a1f;
}
.hero h1 span{
  background:linear-gradient(95deg,var(--brand-rose) 0%,var(--brand-violet) 52%,var(--brand-plum) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{max-width:540px;margin:0;color:#646a6e;font-size:clamp(15px,1.3vw,19px);line-height:1.65}
.scroll-cue{margin-top:38px;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.20em;color:#777a79}
.scroll-cue span{width:36px;height:1px;background:linear-gradient(90deg,var(--brand-rose),var(--brand-violet),var(--brand-plum));animation:cue 1.4s ease-in-out infinite alternate}
@keyframes cue{from{transform:scaleX(.30);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

.hero-decoration{position:absolute;z-index:7;right:6vw;bottom:13vh;width:360px;height:170px;pointer-events:none}
.hero-pill{
  position:absolute;
  display:grid;
  place-items:center;
  min-width:94px;
  height:38px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid rgba(30,36,39,.11);
  background:rgba(250,247,239,.56);
  backdrop-filter:blur(13px);
  color:#42484a;
  font-size:9px;
  letter-spacing:.18em;
  font-weight:760;
  box-shadow:0 14px 32px rgba(50,55,52,.08);
}
.pill-a{left:0;top:46px;animation:float-pill-a 5s ease-in-out infinite alternate}
.pill-b{right:18px;top:5px;animation:float-pill-b 6s ease-in-out infinite alternate}
.pill-c{right:78px;bottom:0;animation:float-pill-c 5.5s ease-in-out infinite alternate}
@keyframes float-pill-a{to{transform:translate3d(16px,-12px,0) rotate(-3deg)}}
@keyframes float-pill-b{to{transform:translate3d(-12px,13px,0) rotate(3deg)}}
@keyframes float-pill-c{to{transform:translate3d(9px,-16px,0) rotate(-2deg)}}

/* =============================================================================
   TARJETAS
============================================================================= */
.story-section{min-height:165svh}
.story-card{
  --bloom-rgb:132,86,255;
  --bloom2-rgb:190,164,255;
  --section-rgb:239,135,109;
  --visual-x:0px;
  --visual-y:0px;
  --scroll-shift:0px;
  --content-x:0px;
  --content-y:0px;
  --content-scroll:0px;
  position:relative;
  width:min(1160px,90vw);
  height:min(720px,72svh);
  min-height:540px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:36px;
  background:
    radial-gradient(circle at 84% 18%,rgba(var(--section-rgb),.14),transparent 26%),
    linear-gradient(145deg,#263038,#172128 64%,#10171b);
  box-shadow:0 38px 100px rgba(58,64,61,.18);
  transition:border-color .7s ease,box-shadow .8s ease;
}
#respond .story-card{background:radial-gradient(circle at 84% 18%,rgba(var(--section-rgb),.15),transparent 27%),linear-gradient(145deg,#203633,#142b2a 64%,#10201f)}
#art .story-card{background:radial-gradient(circle at 84% 18%,rgba(var(--section-rgb),.16),transparent 27%),linear-gradient(145deg,#383126,#28241d 64%,#1e1b16)}
.story-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at 23% 28%,rgba(255,255,255,.055),transparent 25%),
    linear-gradient(120deg,rgba(255,255,255,.035),transparent 36%);
  pointer-events:none;
}
.story-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 68% 36%,rgba(var(--section-rgb),.08),transparent 24%),
    linear-gradient(115deg,rgba(255,255,255,.06),transparent 20%,transparent 75%,rgba(255,255,255,.025));
  transition:opacity .55s ease;
}
.story-card.is-in-view::after{opacity:1}

/* Esta capa empieza como pétalo y, al impactar, crece hasta ser toda la tarjeta. */
.petal-morph{
  position:absolute;z-index:3;left:50%;top:50%;width:88px;height:126px;
  transform:translate(-50%,-50%) rotate(38deg) scale(.25);transform-origin:center;
  border-radius:78% 18% 74% 22% / 84% 24% 76% 18%;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 44% 38%,rgba(var(--bloom2-rgb),1) 0%,rgba(var(--section-rgb),.96) 30%,rgba(var(--bloom-rgb),.70) 57%,rgba(21,24,31,.97) 100%);
  box-shadow:0 0 42px rgba(var(--section-rgb),.34);
  will-change:width,height,transform,border-radius,opacity;
}
.story-card.is-morphing .petal-morph{animation:petal-becomes-card 1.05s cubic-bezier(.16,1,.3,1) forwards}
@keyframes petal-becomes-card{
  0%{width:88px;height:126px;transform:translate(-50%,-50%) rotate(38deg) scale(.25);border-radius:78% 18% 74% 22% / 84% 24% 76% 18%;opacity:0}
  14%{transform:translate(-50%,-50%) rotate(28deg) scale(1.05);opacity:1}
  34%{width:150px;height:150px;transform:translate(-50%,-50%) rotate(12deg) scale(1);border-radius:42% 30% 42% 30%;opacity:1}
  100%{width:100%;height:100%;transform:translate(-50%,-50%) rotate(0deg) scale(1);border-radius:34px;opacity:1}
}
.story-card.is-bloomed{border-color:rgba(var(--bloom2-rgb),.46);box-shadow:0 45px 135px rgba(var(--section-rgb),.18),0 28px 72px rgba(45,50,47,.18)}
.card-grid{
  position:absolute;inset:0;z-index:1;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:78px 78px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 94%);
}

.story-copy{
  position:absolute;
  inset:44px 48px;
  z-index:8;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none;
  transform:translate3d(var(--content-x),calc(var(--content-y) + var(--content-scroll)),0);
  transition:transform .18s ease-out,opacity .65s cubic-bezier(.16,1,.3,1);
}
.story-card:not(.is-in-view) .story-copy{opacity:.78}
.story-head{display:flex;align-items:flex-start;justify-content:space-between}
.number{font-size:11px;letter-spacing:.20em;color:#7e8587;transition:color .65s ease}
.story-card h2{margin:0;max-width:760px;font-size:clamp(58px,7.2vw,112px);line-height:.84;letter-spacing:-.058em;font-weight:740;color:#f0efea;transition:color .65s ease,text-shadow .8s ease}
.story-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.story-foot>p{max-width:470px;margin:0;color:#adb4b4;font-size:14px;line-height:1.65;transition:color .65s ease}
.tags{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.tags span{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);color:#aeb5b5;font-size:9px;letter-spacing:.11em;text-transform:uppercase;transition:background .65s ease,border-color .65s ease,color .65s ease,transform .35s ease}
.story-card.is-in-view .tags span:nth-child(2){transform:translateY(-3px)}
.story-card.is-bloomed .kicker{color:rgb(var(--bloom2-rgb))}
.story-card.is-bloomed .number{color:rgba(var(--bloom2-rgb),.88)}
.story-card.is-bloomed h2{color:#fff;text-shadow:0 8px 34px rgba(var(--section-rgb),.13)}
.story-card.is-bloomed .story-foot>p{color:#eef0eb}
.story-card.is-bloomed .tags span{color:#fff;border-color:rgba(var(--bloom2-rgb),.28);background:rgba(var(--section-rgb),.15)}

/* Centro exacto de impacto de cada tarjeta. */
.petal-seat{position:absolute;z-index:2;left:50%;top:50%;width:110px;height:110px;margin-left:-55px;margin-top:-55px;border-radius:50%;pointer-events:none}
.petal-seat::before{content:"";position:absolute;inset:27px;border:1px dashed rgba(255,255,255,.08);border-radius:50%;opacity:.40}
.petal-seat span{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:rgba(255,255,255,.18)}
.impact-ring{position:absolute;z-index:7;left:50%;top:50%;width:110px;height:110px;transform:translate(-50%,-50%);border:1px solid rgba(var(--bloom2-rgb),.78);border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 34px rgba(var(--section-rgb),.22)}

/* =============================================================================
   CAPAS CINÉTICAS DE LOS PANELES
   =============================================================================
   Se mueven por hover + scroll, pero nunca cambian el layout de la tarjeta ni
   el asiento del pétalo. Es movimiento visual, no movimiento estructural.
============================================================================= */
.kinetic-layer{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  transform:translate3d(var(--visual-x),calc(var(--visual-y) + var(--scroll-shift)),0);
  transition:transform .22s ease-out,opacity .7s cubic-bezier(.16,1,.3,1);
  opacity:.82;
}
.story-card:not(.is-in-view) .kinetic-layer{opacity:.34}
.kinetic-label{
  position:absolute;
  right:36px;
  top:34px;
  color:rgba(255,255,255,.20);
  font-size:8px;
  letter-spacing:.22em;
  font-weight:760;
}

/* 01 / formas orbitales */
.kinetic-ring{position:absolute;border-radius:50%;border:1px solid rgba(var(--section-rgb),.38);box-shadow:0 0 50px rgba(var(--section-rgb),.08)}
.ring-a{width:320px;height:320px;right:-72px;top:62px;animation:ring-rotate 10s linear infinite}
.ring-b{width:190px;height:190px;right:18px;top:126px;border-style:dashed;animation:ring-rotate-reverse 7s linear infinite}
.kinetic-dot{position:absolute;border-radius:50%;background:rgb(var(--section-rgb));box-shadow:0 0 24px rgba(var(--section-rgb),.55)}
.dot-a{width:17px;height:17px;right:116px;top:81px;animation:dot-float 3.2s ease-in-out infinite alternate}
.dot-b{width:9px;height:9px;right:44px;top:285px;animation:dot-float 4s ease-in-out infinite alternate-reverse}
@keyframes ring-rotate{to{transform:rotate(360deg)}}
@keyframes ring-rotate-reverse{to{transform:rotate(-360deg)}}
@keyframes dot-float{to{transform:translate3d(12px,-18px,0)}}

/* 02 / líneas y órbitas */
.motion-line{position:absolute;right:4%;height:1px;transform-origin:right;background:linear-gradient(90deg,transparent,rgba(var(--section-rgb),.76),rgba(255,255,255,.15));animation:line-breathe 4s ease-in-out infinite alternate}
.line-1{width:390px;top:29%;transform:rotate(-15deg)}
.line-2{width:320px;top:43%;transform:rotate(9deg);animation-delay:-1.4s}
.line-3{width:260px;top:58%;transform:rotate(-5deg);animation-delay:-2.2s}
.motion-orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,rgba(var(--section-rgb),.88) 18%,rgba(var(--section-rgb),.18) 62%,transparent 70%);filter:blur(.2px);box-shadow:0 0 42px rgba(var(--section-rgb),.28)}
.orb-1{width:92px;height:92px;right:19%;top:25%;animation:orb-float 4.2s ease-in-out infinite alternate}
.orb-2{width:48px;height:48px;right:7%;top:54%;animation:orb-float 3.4s ease-in-out infinite alternate-reverse}
@keyframes line-breathe{from{opacity:.28;scale:.92 1}to{opacity:.92;scale:1.06 1}}
@keyframes orb-float{to{transform:translate3d(-18px,22px,0) scale(1.08)}}

/* 03 / mini pantallas tipo showcase */
.kinetic-projects{perspective:900px}
.project-screen{
  position:absolute;
  width:164px;
  height:235px;
  right:8%;
  top:18%;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(165deg,rgba(255,255,255,.15),rgba(255,255,255,.015)),
    radial-gradient(circle at 35% 24%,rgba(var(--section-rgb),.78),transparent 32%),
    #15191b;
  box-shadow:0 24px 60px rgba(0,0,0,.22),0 0 36px rgba(var(--section-rgb),.11);
  animation:screen-float 4.8s ease-in-out infinite alternate;
}
.screen-1{right:32%;top:24%;transform:rotate(-12deg) translateZ(-70px);opacity:.54;animation-delay:-1.7s}
.screen-2{right:22%;top:18%;transform:rotate(-6deg) translateZ(-35px);opacity:.72;animation-delay:-.8s;background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.02)),radial-gradient(circle at 65% 30%,rgba(93,186,178,.72),transparent 33%),#181c1d}
.screen-3{right:12%;top:13%;transform:rotate(2deg);opacity:.92;background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.02)),radial-gradient(circle at 45% 25%,rgba(239,135,109,.76),transparent 34%),#171a1c}
.screen-4{right:2%;top:8%;transform:rotate(9deg) translateZ(30px);background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.02)),radial-gradient(circle at 45% 25%,rgba(132,105,215,.78),transparent 34%),#171a1c;animation-delay:-2.1s}
@keyframes screen-float{to{translate:0 -13px}}

/* 04 / bloom orbital */
.bloom-orbit{position:absolute;border-radius:50%;border:1px solid rgba(var(--section-rgb),.34);right:7%;top:16%;animation:bloom-orbit 12s linear infinite}
.orbit-1{width:330px;height:330px}
.orbit-2{width:230px;height:230px;right:11.5%;top:23%;border-style:dashed;animation-direction:reverse;animation-duration:8s}
.bloom-core{position:absolute;width:72px;height:72px;right:19%;top:38%;border-radius:30% 70% 55% 45% / 35% 45% 55% 65%;background:linear-gradient(145deg,rgba(var(--section-rgb),.96),rgba(var(--bloom-rgb),.82));box-shadow:0 0 70px rgba(var(--section-rgb),.30);animation:bloom-core 3s ease-in-out infinite alternate}
.bloom-word{position:absolute;right:-9px;bottom:32px;color:rgba(255,255,255,.045);font-size:clamp(90px,12vw,190px);line-height:.8;letter-spacing:-.08em;font-weight:850}
@keyframes bloom-orbit{to{transform:rotate(360deg)}}
@keyframes bloom-core{to{transform:rotate(18deg) scale(1.12)}}

.big-cta{display:inline-flex;align-items:center;gap:15px;flex:0 0 auto;padding:14px 17px 14px 19px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#f4f2ed;font-size:9px;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(12px);transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.big-cta:hover{transform:translateY(-2px);background:rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(var(--section-rgb),.16)}
.big-cta span{font-size:15px}

/* =============================================================================
   LOADER REAL DEL ARCHIVO
   =============================================================================
   Solo está mientras Three.js/GLB terminan de cargar. En cuanto acaba, entra la
   intro de BLOOM MODE; no se confunde con la intro de marca.
============================================================================= */
.loader{position:fixed;inset:0;z-index:100;background:#ece8df;display:grid;place-content:center;text-align:center;transition:opacity .38s ease,visibility .38s ease}
.loader.is-hidden{opacity:0;visibility:hidden}
.loader-mark{width:68px;height:68px;margin:auto;display:grid;place-items:center;border:1px solid rgba(29,34,37,.13);border-radius:22px;font-size:31px;font-weight:820;color:#202527;background:radial-gradient(circle at 50% 40%,rgba(239,135,109,.32),transparent 68%);animation:pulse 1s ease-in-out infinite alternate}
.loader p{margin-top:17px;color:#7f827f;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
@keyframes pulse{to{transform:translateY(-5px) rotate(3deg);box-shadow:0 0 36px rgba(93,186,178,.14)}}

/* =============================================================================
   MÓVIL
============================================================================= */
@media (max-width:820px){
  :root{--header-h:64px}
  .site-header{top:10px;width:calc(100vw - 20px);grid-template-columns:1fr auto;border-radius:18px;padding:0 10px 0 13px}
  .brand-copy small,.nav-links{display:none}
  .brand-gem{width:25px;height:25px}
  .header-cta{padding:10px 12px;font-size:8px}

  .intro-brand{padding-top:8vh}
  .intro-brand h2{font-size:clamp(42px,13vw,68px)}

  .chapter{padding-left:5vw;padding-right:5vw}
  .hero{min-height:145svh;align-items:flex-end;padding-bottom:10vh}
  .hero-copy{width:92vw}
  .hero h1{font-size:clamp(52px,16vw,84px);max-width:94vw}
  .lead{max-width:90vw}
  .hero-decoration{display:none}

  .story-section{min-height:155svh}
  .story-card{width:92vw;height:74svh;min-height:520px;border-radius:28px}
  .story-copy{inset:28px 26px}
  .story-card h2{font-size:clamp(48px,13vw,76px);max-width:90%}
  .story-foot{align-items:flex-start;flex-direction:column;gap:18px}
  .story-foot>p{font-size:13px;max-width:90%}
  .tags{justify-content:flex-start}

  .petal-seat{width:90px;height:90px;margin:-45px 0 0 -45px}
  .impact-ring{width:90px;height:90px}
  .story-card.is-morphing .petal-morph{animation-name:petal-becomes-card-mobile}
  .final-card h2{font-size:clamp(46px,12.5vw,74px)}
  .final-foot{gap:22px}

  .kinetic-layer{opacity:.54}
  .ring-a{width:220px;height:220px;right:-92px;top:95px}
  .ring-b{width:130px;height:130px;right:-4px;top:145px}
  .line-1{width:230px}.line-2{width:190px}.line-3{width:160px}
  .project-screen{width:98px;height:150px;border-radius:16px}
  .screen-1{right:31%}.screen-2{right:21%}.screen-3{right:11%}.screen-4{right:1%}
  .orbit-1{width:220px;height:220px;right:-18%}
  .orbit-2{width:150px;height:150px;right:-3%;top:29%}
  .bloom-core{right:10%;top:42%}
  .bloom-word{font-size:88px;right:-16px}
}

@keyframes petal-becomes-card-mobile{
  0%{width:76px;height:108px;transform:translate(-50%,-50%) rotate(38deg) scale(.25);border-radius:78% 18% 74% 22% / 84% 24% 76% 18%;opacity:0}
  14%{transform:translate(-50%,-50%) rotate(28deg) scale(1.05);opacity:1}
  34%{width:132px;height:132px;transform:translate(-50%,-50%) rotate(12deg) scale(1);border-radius:42% 30% 42% 30%;opacity:1}
  100%{width:100%;height:100%;transform:translate(-50%,-50%) rotate(0) scale(1);border-radius:26px;opacity:1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-cue span,.loader-mark,.ambient-glow,.hero-pill,.kinetic-layer *{animation:none!important}
}

/* =============================================================================
   V5 — COMPOSICIONES DIFERENTES POR SECCIÓN
   =============================================================================
   Las cuatro secciones dejan de ser la misma tarjeta repetida. El elemento
   .story-card sigue existiendo para conservar el impacto de los pétalos, pero
   cambia de escala, proporción y compañía visual en cada capítulo.
============================================================================= */
.story-section{
  isolation:isolate;
}
.story-section::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(760px,58vw);
  height:min(760px,58vw);
  border-radius:50%;
  filter:blur(12px);
  opacity:.26;
  pointer-events:none;
}
#shape::before{right:-16vw;top:20%;background:radial-gradient(circle,rgba(239,135,109,.28),transparent 66%)}
#respond::before{left:-19vw;top:20%;background:radial-gradient(circle,rgba(93,186,178,.30),transparent 66%)}
#art::before{right:-14vw;top:11%;background:radial-gradient(circle,rgba(213,168,77,.26),transparent 66%)}

/* Elementos que viven FUERA de la card para romper el ritmo card/card/card. */
.section-companion{
  position:relative;
  flex:0 0 auto;
  pointer-events:none;
  z-index:7;
}

/* 01 — Card ancha a la izquierda + pequeña historia visual a la derecha. */
.layout-wide{
  justify-content:flex-start;
  gap:clamp(28px,4vw,72px);
  padding-left:max(5vw,calc((100vw - 1380px)/2));
}
.story-card-wide{
  width:min(920px,68vw);
  height:min(690px,70svh);
}
.companion-idea{
  width:min(280px,20vw);
  height:420px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  animation:companion-drift 5.8s ease-in-out infinite alternate;
}
.companion-number{
  font-size:clamp(86px,10vw,160px);
  line-height:.75;
  letter-spacing:-.08em;
  font-weight:830;
  color:rgba(46,49,48,.09);
}
.companion-line{width:1px;height:100px;background:linear-gradient(180deg,transparent,#e48369,transparent)}
.companion-chip{
  min-width:92px;
  padding:10px 14px;
  text-align:center;
  border:1px solid rgba(41,45,45,.10);
  border-radius:999px;
  background:rgba(250,247,239,.56);
  backdrop-filter:blur(12px);
  color:#626764;
  font-size:8px;
  letter-spacing:.18em;
  font-weight:760;
}
.companion-chip:nth-of-type(3){transform:translateX(-22px)}
.companion-chip:nth-of-type(4){transform:translateX(18px)}
.companion-chip:nth-of-type(5){transform:translateX(-8px)}

/* 02 — Visual grande a la izquierda + card vertical más estrecha a la derecha. */
.layout-split{
  justify-content:center;
  gap:clamp(24px,4.5vw,78px);
  padding-left:6vw;
  padding-right:6vw;
}
.story-card-split{
  width:min(610px,46vw);
  height:min(720px,72svh);
  min-height:600px;
  border-radius:48px 22px 48px 22px;
}
.story-card-split .story-copy{inset:40px 38px}
.story-card-split h2{font-size:clamp(58px,6.4vw,92px)}
.story-card-split .story-foot{flex-direction:column;align-items:flex-start}
.story-card-split .tags{justify-content:flex-start}
.companion-motion{
  width:min(520px,39vw);
  height:min(650px,66svh);
  display:grid;
  place-items:center;
}
.motion-field{
  position:relative;
  width:min(470px,36vw);
  aspect-ratio:1;
  border-radius:46% 54% 56% 44% / 42% 46% 54% 58%;
  background:
    radial-gradient(circle at 38% 36%,rgba(255,255,255,.74),transparent 12%),
    radial-gradient(circle at 50% 50%,rgba(93,186,178,.32),rgba(93,186,178,.08) 44%,transparent 70%);
  border:1px solid rgba(47,125,121,.14);
  box-shadow:inset 0 0 80px rgba(255,255,255,.24),0 30px 80px rgba(63,111,107,.10);
  animation:blob-breathe 5.2s ease-in-out infinite alternate;
}
.motion-field strong{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:clamp(58px,7vw,105px);
  line-height:.8;
  letter-spacing:-.07em;
  color:rgba(36,92,88,.12);
}
.field-orbit{position:absolute;border:1px solid rgba(53,139,133,.25);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.field-orbit-a{width:72%;height:72%;animation:field-spin 11s linear infinite}
.field-orbit-b{width:44%;height:44%;border-style:dashed;animation:field-spin 7s linear infinite reverse}
.field-dot{position:absolute;border-radius:50%;background:#65bdb6;box-shadow:0 0 32px rgba(82,177,170,.38)}
.field-dot-a{width:17px;height:17px;left:17%;top:28%;animation:field-dot 3.8s ease-in-out infinite alternate}
.field-dot-b{width:10px;height:10px;right:15%;bottom:25%;animation:field-dot 4.4s ease-in-out infinite alternate-reverse}

/* 03 — Showcase horizontal. Mucho espacio para las pantallas, texto a la izquierda. */
.layout-showcase{justify-content:center}
.story-card-showcase{
  width:min(1320px,94vw);
  height:min(720px,72svh);
  border-radius:24px 64px 24px 64px;
}
.story-card-showcase .story-copy{right:46%;}
.story-card-showcase h2{font-size:clamp(54px,6.6vw,102px)}
.story-card-showcase .kinetic-projects{left:47%;}
.story-card-showcase .project-screen{
  width:clamp(126px,12vw,190px);
  height:clamp(188px,18vw,280px);
  animation-duration:4.1s;
}
.story-card-showcase .screen-1{right:50%;top:28%}
.story-card-showcase .screen-2{right:34%;top:19%}
.story-card-showcase .screen-3{right:18%;top:12%}
.story-card-showcase .screen-4{right:2%;top:5%}
.story-card-showcase.is-in-view .project-screen{animation-name:screen-float-v5}

@keyframes companion-drift{to{transform:translate3d(0,-22px,0) rotate(1.5deg)}}
@keyframes blob-breathe{
  from{transform:rotate(-3deg) scale(.96);border-radius:46% 54% 56% 44% / 42% 46% 54% 58%}
  to{transform:rotate(4deg) scale(1.035);border-radius:58% 42% 44% 56% / 55% 58% 42% 45%}
}
@keyframes field-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes field-dot{to{transform:translate3d(22px,-20px,0) scale(1.15)}}
@keyframes screen-float-v5{to{translate:0 -22px;rotate:1deg}}

/* La composición también reacciona al momento de lectura, no solo al hover. */
.story-card.is-in-view .kinetic-ring,
.story-card.is-in-view .motion-orb,
.story-card.is-in-view .bloom-core{
  filter:saturate(1.08);
}

@media (max-width:1050px){
  .layout-wide,.layout-split{gap:24px}
  .companion-idea{display:none}
  .story-card-wide{width:min(1040px,90vw)}
  .companion-motion{width:34vw}
  .story-card-split{width:55vw}
  .story-card-showcase .story-copy{right:39%}
  .story-card-showcase .kinetic-projects{left:54%}
}

@media (max-width:820px){
  .layout-wide,.layout-split,.layout-showcase,.layout-open{justify-content:center;padding-left:5vw;padding-right:5vw}
  .companion-motion{display:none}
  .story-card-wide,.story-card-split,.story-card-showcase{width:92vw;height:74svh;min-height:520px;border-radius:28px}
  .story-card-split .story-copy,.story-card-showcase .story-copy .story-copy{inset:28px 26px;right:26px}
  .story-card-showcase .kinetic-projects .kinetic-bloom{left:0}
  .story-card-showcase .project-screen{width:98px;height:150px}
  .story-card-showcase .screen-1{right:31%;top:24%}
  .story-card-showcase .screen-2{right:21%;top:18%}
  .story-card-showcase .screen-3{right:11%;top:13%}
  .story-card-showcase .screen-4{right:1%;top:8%}
}

/* =============================================================================
   V6 — HOME MÁS CORTA + CTA BLOOM LAB + FOOTER
   =============================================================================
   La V5 tenía demasiado recorrido vacío entre capítulos. En V6 comprimimos la
   landing para que se sienta como un trailer del estudio, no como una demo
   técnica interminable. El movimiento de los pétalos se ocupa de conectar las
   secciones aunque haya menos metros de scroll.
============================================================================= */
.chapter{
  min-height:108svh;
  padding-top:8vh;
  padding-bottom:8vh;
}
.hero{
  min-height:112svh;
  padding-top:15vh;
  padding-bottom:8vh;
}
.story-section{min-height:110svh}
#shape{min-height:108svh}
#respond{min-height:110svh}
#art{min-height:114svh}

/* La interacción visual externa también puede desplazarse ligeramente con el
   scroll sin mover el punto de impacto del pétalo. */
.section-companion{
  --companion-scroll:0px;
  translate:0 var(--companion-scroll);
  transition:translate .18s ease-out;
}

/* CTA de Projects/Bloom Lab. El story-copy general no captura eventos para que
   no bloquee el canvas, así que devolvemos eventos solo a la zona de acciones. */
.story-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  pointer-events:auto;
}
.story-actions .tags{pointer-events:none}
.story-foot-projects .story-actions{min-width:280px}
.lab-cta{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.24);
}
.lab-cta:hover{background:rgba(255,255,255,.20)}

/* =============================================================================
   FOOTER GRANDE
============================================================================= */
.site-footer{
  position:relative;
  z-index:12;
  width:min(1480px,calc(100vw - 32px));
  margin:2vh auto 16px;
  padding:clamp(42px,6vw,92px);
  overflow:hidden;
  border-radius:42px;
  background:
    radial-gradient(circle at 80% 14%,rgba(96,190,181,.22),transparent 28%),
    radial-gradient(circle at 18% 84%,rgba(230,126,101,.22),transparent 30%),
    linear-gradient(145deg,#202a2e,#141d21 56%,#101619);
  color:#f4f2ec;
  box-shadow:0 44px 120px rgba(49,55,52,.20);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,#000,transparent 86%);
}
.footer-hero,.footer-grid,.footer-bottom{position:relative;z-index:2}
.footer-kicker{
  margin:0 0 20px;
  color:#aeb9b7;
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.footer-hero h2{
  margin:0;
  max-width:1050px;
  font-size:clamp(52px,7.4vw,118px);
  line-height:.84;
  letter-spacing:-.06em;
  font-weight:760;
}
.footer-hero h2 span{
  background:linear-gradient(95deg,var(--brand-rose) 0%,var(--brand-lilac) 40%,var(--brand-violet) 72%,var(--brand-plum) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.footer-cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:34px;
  padding:14px 18px;
  border-radius:15px;
  background:#f2eee5;
  color:#172024;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:780;
  transition:transform .25s ease,box-shadow .25s ease;
}
.footer-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.footer-cta span{font-size:15px}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(280px,1.6fr) 1fr 1fr;
  gap:clamp(28px,5vw,90px);
  margin-top:clamp(70px,10vw,140px);
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-brand-block{max-width:340px}
.footer-mark{
  width:36px;height:36px;margin-bottom:18px;border-radius:0 !important;
  transform:none;background:transparent !important;box-shadow:none !important;
}
.footer-brand-block strong{font-size:12px;letter-spacing:.21em}
.footer-brand-block p,.footer-col p{
  margin:13px 0 0;
  color:#9fa9a8;
  font-size:13px;
  line-height:1.65;
}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-col>span{
  margin-bottom:8px;
  color:#808c8b;
  font-size:8px;
  letter-spacing:.22em;
}
.footer-col a{
  color:#e6e7e2;
  font-size:13px;
  transition:transform .2s ease,color .2s ease;
}
.footer-col a:hover{transform:translateX(4px);color:#87d0c8}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:56px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  color:#778281;
  font-size:8px;
  letter-spacing:.18em;
}

/* =============================================================================
   BLOOM LAB — PÁGINA SECUNDARIA
============================================================================= */
body.lab-page{
  min-height:100svh;
  background:
    radial-gradient(circle at 12% 4%,rgba(239,135,109,.22),transparent 28%),
    radial-gradient(circle at 88% 8%,rgba(93,186,178,.22),transparent 28%),
    linear-gradient(180deg,#f2eee6 0%,#e9ebe4 100%);
}
.lab-main{
  position:relative;
  z-index:8;
  width:min(1440px,calc(100vw - 40px));
  margin:0 auto;
  padding:150px 0 90px;
}
.lab-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  align-items:end;
  gap:40px;
  min-height:68svh;
  padding:4vw;
  border:1px solid rgba(24,29,32,.08);
  border-radius:44px;
  background:rgba(247,244,236,.58);
  backdrop-filter:blur(18px);
  box-shadow:0 28px 90px rgba(66,72,67,.09);
  overflow:hidden;
}
.lab-hero-visual{
  position:absolute;
  right:2.5%;
  top:10%;
  width:180px;
  height:180px;
  pointer-events:none;
  opacity:.20;
  filter:blur(1px) drop-shadow(0 10px 18px rgba(74,46,78,.04));
}
.hero-bloom-flower{
  position:relative;
  width:100%;
  height:100%;
  animation:lab-bloom-rotate 34s linear infinite;
}
.hero-bloom-flower::before{
  content:"";
  position:absolute;
  inset:20%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,191,113,.12),rgba(162,122,229,.04) 36%,transparent 72%);
  filter:blur(18px);
}
.hero-bloom-flower .flower-petal{
  position:absolute;
  left:50%;
  top:50%;
  width:52px;
  height:76px;
  margin-left:-26px;
  margin-top:-38px;
  border-radius:58% 42% 62% 38% / 58% 42% 58% 42%;
  background:linear-gradient(180deg,rgba(255,246,227,.66),rgba(255,158,118,.54) 18%,rgba(255,198,105,.46) 34%,rgba(156,122,228,.42) 68%,rgba(99,216,199,.48) 100%);
  box-shadow:inset -6px -6px 10px rgba(109,76,143,.05), inset 6px 6px 10px rgba(255,255,255,.08);
  opacity:.72;
  transform-origin:50% 82%;
}
.hero-bloom-flower .flower-petal.p1{transform:translate(-50%,-50%) rotate(0deg) translateY(-54px)}
.hero-bloom-flower .flower-petal.p2{transform:translate(-50%,-50%) rotate(45deg) translateY(-54px)}
.hero-bloom-flower .flower-petal.p3{transform:translate(-50%,-50%) rotate(90deg) translateY(-54px)}
.hero-bloom-flower .flower-petal.p4{transform:translate(-50%,-50%) rotate(135deg) translateY(-54px)}
.hero-bloom-flower .flower-petal.p5{transform:translate(-50%,-50%) rotate(180deg) translateY(-54px)}
.hero-bloom-flower .flower-petal.p6{transform:translate(-50%,-50%) rotate(225deg) translateY(-54px)}
.hero-bloom-flower .flower-petal.p7{transform:translate(-50%,-50%) rotate(270deg) translateY(-54px)}
.hero-bloom-flower .flower-petal.p8{transform:translate(-50%,-50%) rotate(315deg) translateY(-54px)}
.hero-bloom-flower .flower-core{
  position:absolute;
  left:50%;
  top:50%;
  width:32px;
  height:32px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,217,.66) 0%,rgba(255,197,106,.58) 22%,rgba(255,137,147,.54) 48%,rgba(99,216,199,.52) 78%,rgba(138,107,228,.52) 100%);
  box-shadow:0 0 0 8px rgba(255,218,133,.04), 0 0 18px rgba(255,173,111,.10), 0 0 28px rgba(157,122,232,.08);
}
@keyframes lab-bloom-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.005); }
  100% { transform: rotate(360deg) scale(1); }
}
.lab-hero h1{
  margin:12px 0 0;
  font-size:clamp(72px,10vw,158px);
  line-height:.78;
  letter-spacing:-.075em;
  font-weight:780;
  color:#171a1f;
}
.lab-hero h1 span{
  background:linear-gradient(96deg,#db755f,#8c70cb 49%,#50a9a3);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lab-hero-copy{max-width:520px;justify-self:end}
.lab-hero-copy p{margin:0;color:#62696a;font-size:16px;line-height:1.75}
.lab-hero-copy .big-cta{margin-top:24px;background:#1d282c;color:#f5f1e8;border-color:transparent}
.lab-strip{
  display:flex;
  align-items:center;
  gap:10px;
  margin:28px 0 0;
  overflow:auto;
  padding-bottom:6px;
}
.lab-strip span{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(26,31,35,.10);
  background:rgba(255,255,255,.44);
  color:#626868;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.lab-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
  margin-top:70px;
}
.lab-project{
  position:relative;
  min-height:520px;
  overflow:hidden;
  padding:32px;
  border-radius:32px;
  border:1px solid rgba(24,29,32,.08);
  background:#1c272b;
  color:#f4f1e9;
  box-shadow:0 28px 80px rgba(57,64,60,.12);
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;
}
.lab-project:hover{transform:translateY(-8px);box-shadow:0 38px 90px rgba(57,64,60,.18)}
.lab-project.large{grid-column:span 7}
.lab-project.small{grid-column:span 5}
.lab-project.full{grid-column:span 12;min-height:460px}
.lab-project::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at var(--mx,70%) var(--my,25%),rgba(var(--lab-rgb,93,186,178),.42),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.04),transparent 42%);
  transition:background-position .3s ease;
}
.lab-project-content{position:relative;z-index:3;display:flex;min-height:456px;flex-direction:column;justify-content:space-between}
.lab-project.full .lab-project-content{min-height:396px}
.lab-project-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.lab-project-type{font-size:8px;letter-spacing:.22em;color:#aeb8b7;text-transform:uppercase}
.lab-project-index{font-size:10px;letter-spacing:.16em;color:#6f7c7b}
.lab-project h2{margin:0;max-width:680px;font-size:clamp(46px,6vw,92px);line-height:.84;letter-spacing:-.06em}
.lab-project-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.lab-project-bottom p{max-width:520px;margin:0;color:#adb5b3;font-size:13px;line-height:1.65}
.lab-arrow{font-size:30px;transition:transform .3s ease}
.lab-project:hover .lab-arrow{transform:translate(5px,-5px)}
.lab-project.almazara{--lab-rgb:232,176,77;background:linear-gradient(145deg,#322d22,#1f201c)}

.lab-project.configurator{--lab-rgb:98,190,182;background:linear-gradient(145deg,#17302e,#152321)}
.lab-project.configurator-feature{
  cursor:pointer;
  isolation:isolate;
  background:
    radial-gradient(circle at 78% 28%,rgba(90,190,181,.14),transparent 27%),
    linear-gradient(145deg,#17302e,#152321 72%);
}
.lab-project.configurator-feature::after{
  content:"";
  position:absolute;
  z-index:1;
  width:210px;
  aspect-ratio:1;
  right:-54px;
  top:74px;
  border:1px solid rgba(137,225,216,.16);
  border-radius:50%;
  box-shadow:
    0 0 0 24px rgba(104,201,192,.035),
    0 0 0 54px rgba(104,201,192,.025);
  transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease;
  opacity:.86;
}
.lab-project.configurator-feature:hover::after{transform:scale(1.08) rotate(8deg);opacity:1}
.configurator-feature-copy{position:relative;z-index:3;margin:-6px 0 0}
.configurator-feature h2{font-size:clamp(46px,5.2vw,78px)}
.configurator-feature h2 span{
  background:linear-gradient(94deg,#87d8cf 0%,#a88fe2 52%,#ef9c83 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lab-live-dot{
  display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;
  background:#78d2c8;box-shadow:0 0 0 5px rgba(120,210,200,.09),0 0 18px rgba(120,210,200,.45);
  vertical-align:middle;
}
.configurator-switcher{
  display:flex;gap:7px;flex-wrap:wrap;margin:0 0 18px;
}
.configurator-switcher span{
  padding:7px 9px;border:1px solid rgba(235,245,241,.10);border-radius:999px;
  color:#748784;background:rgba(255,255,255,.025);
  font-size:7px;letter-spacing:.18em;text-transform:uppercase;
  transition:color .35s ease,background .35s ease,border-color .35s ease,transform .35s ease;
}
.configurator-switcher span.is-active{
  color:#eef7f4;background:rgba(99,194,185,.13);border-color:rgba(128,219,210,.30);transform:translateY(-2px);
}
.configurator-bottom>div{max-width:520px}
.lab-project-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:19px;padding:10px 13px 10px 14px;
  border:1px solid rgba(224,241,237,.13);border-radius:12px;background:rgba(246,250,247,.07);
  color:#edf5f2;font-size:8px;font-weight:760;letter-spacing:.16em;
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.lab-project-cta b{font-size:13px;font-weight:500;transition:transform .3s ease}
.configurator-feature:hover .lab-project-cta{
  background:rgba(108,203,194,.14);border-color:rgba(137,225,216,.30);transform:translateY(-2px);
}
.configurator-feature:hover .lab-project-cta b{transform:translate(3px,-3px)}
.lab-arrow-large{font-size:44px;color:rgba(179,231,224,.72)}
.configurator-feature:focus-visible{outline:3px solid rgba(85,177,169,.55);outline-offset:5px}
.lab-project.experiments{--lab-rgb:150,111,215;background:linear-gradient(145deg,#27213a,#181b2b)}
.lab-page .site-footer{margin-top:0}

@media (max-width:1050px){
  .chapter{min-height:104svh}
  .story-section{min-height:106svh}
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr}
  .lab-project.large,.lab-project.small{grid-column:span 12}
}

@media (max-width:820px){
  .chapter{min-height:auto;padding-top:11vh;padding-bottom:11vh}
  .hero{min-height:112svh;padding-top:16vh}
  .story-section{min-height:112svh}
  .story-actions{align-items:flex-start}
  .story-foot-projects .story-actions{min-width:0}
  .site-footer{width:calc(100vw - 20px);padding:38px 24px;border-radius:30px}
  .footer-hero h2{font-size:clamp(46px,13vw,72px)}
  .footer-grid{grid-template-columns:1fr;gap:34px;margin-top:70px}
  .footer-bottom{flex-direction:column;gap:10px}
  .lab-main{width:calc(100vw - 20px);padding-top:100px}
  .lab-hero{grid-template-columns:1fr;min-height:auto;padding:34px 24px;border-radius:30px}
  .lab-hero-visual{position:relative;right:auto;top:auto;width:220px;height:220px;margin:0 auto 18px}
  .lab-hero h1{font-size:clamp(62px,20vw,100px)}
  .lab-hero-copy{justify-self:start}
  .lab-grid{grid-template-columns:1fr;margin-top:28px}
  .lab-project.large,.lab-project.small,.lab-project.full{grid-column:auto;min-height:440px}
  .lab-project-content,.lab-project.full .lab-project-content{min-height:376px}
  .lab-project-bottom{flex-direction:column;align-items:flex-start}
  .lab-project.configurator-feature::after{width:150px;right:-58px;top:105px}
  .configurator-switcher{margin-bottom:14px}
  .lab-arrow-large{display:none}
}

/* =============================================================================
   V7 — HOME MÁS CORTA + FOOTER COMO CAPÍTULO 04
   =============================================================================
   La última card desaparece. El cuarto pétalo termina la historia en el footer,
   así evitamos repetir dos CTAs gigantes seguidos y la home gana ritmo.
============================================================================= */

/* Menos kilómetros entre capítulos. */
.chapter{
  min-height:96svh;
  padding-top:6vh;
  padding-bottom:6vh;
}
.hero{
  min-height:100svh;
  padding-top:14vh;
  padding-bottom:6vh;
}
.story-section{min-height:98svh}
#shape{min-height:96svh}
#respond{min-height:98svh}
#art{min-height:104svh;padding-bottom:8vh}

/* El footer sigue siendo importante, pero ya no intenta competir con toda la web. */
.site-footer{
  margin:0 auto 16px;
  padding:clamp(42px,5vw,72px);
  border-radius:38px;
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .7s ease,box-shadow .9s ease;
}

.site-footer::after{
  content:"";
  position:absolute;
  z-index:1;
  left:78%;
  top:28%;
  width:min(46vw,680px);
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.5);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(113,201,192,.32) 0%,rgba(184,163,238,.15) 32%,transparent 68%);
  transition:opacity .9s ease,transform 1.15s cubic-bezier(.16,1,.3,1);
}

.site-footer.is-bloomed{
  border-color:rgba(142,207,199,.26);
  box-shadow:0 44px 120px rgba(49,55,52,.20),0 20px 80px rgba(95,181,173,.12);
}
.site-footer.is-bloomed::after{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* Punto donde aterriza el cuarto pétalo. Está fuera del bloque principal de copy. */
.footer-impact{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.footer-impact .petal-seat{
  left:78%;
  top:28%;
}
.footer-impact .impact-ring{
  left:78%;
  top:28%;
  border-color:rgba(141,220,210,.72);
  box-shadow:0 0 46px rgba(113,201,192,.22);
}

.footer-hero{
  max-width:950px;
}
.footer-hero h2{
  max-width:900px;
  font-size:clamp(46px,5.8vw,88px);
  line-height:.88;
}
.footer-lead{
  max-width:570px;
  margin:22px 0 0;
  color:#aeb7b4;
  font-size:clamp(13px,1.1vw,16px);
  line-height:1.7;
}
.footer-cta{margin-top:26px}
.footer-grid{
  margin-top:clamp(54px,7vw,90px);
}
.footer-bottom{margin-top:42px}

@media (max-width:820px){
  .chapter{min-height:94svh;padding-top:5vh;padding-bottom:5vh}
  .hero{min-height:100svh;padding-top:14vh}
  .story-section,#shape,#respond,#art{min-height:100svh}
  .site-footer{padding:34px 24px;border-radius:28px}
  .footer-hero h2{font-size:clamp(44px,12vw,68px)}
  .footer-grid{margin-top:54px}
  .footer-impact .petal-seat,
  .footer-impact .impact-ring{left:76%;top:20%}
}

/* =============================================================================
   V9 — DARK PETAL FLOW / HOME ONLY
   =============================================================================
   La home deja atrás la semilla 3D. El canvas de pétalos vive por detrás de la
   interfaz y las cards reaccionan a la posición real de la corriente.
============================================================================= */
body.home-page{
  --home-bg:#080b0d;
  --home-bg-soft:#0d1215;
  --home-ink:#f2f1ec;
  --home-muted:#929b9b;
  --home-line:rgba(238,241,235,.11);
  --home-coral:255,127,139;
  --home-teal:99,216,199;
  --home-amber:255,198,105;
  min-height:100%;
  background:#080b0d;
  color:var(--home-ink);
  isolation:isolate;
}

body.home-page::selection{
  background:rgba(99,216,199,.28);
  color:#fff;
}

/* Fondo: z0. Panel final: z2. Pétalos y flor: z3. Paneles anteriores: z4+. */
.home-page .site-backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,127,139,.055),transparent 27%),
    radial-gradient(circle at 82% 20%,rgba(99,216,199,.045),transparent 27%),
    linear-gradient(180deg,#070a0c 0%,#0a0e10 46%,#070a0c 100%);
}

.home-page .backdrop-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(125px);
  opacity:.12;
  animation:v9-glow-drift 17s ease-in-out infinite alternate;
}
.home-page .glow-coral{width:42vw;height:42vw;left:-12vw;top:4vh;background:rgb(var(--home-coral))}
.home-page .glow-teal{width:36vw;height:36vw;right:-9vw;top:28vh;background:rgb(var(--home-teal));animation-duration:21s}
.home-page .glow-amber{width:28vw;height:28vw;left:35vw;top:72vh;background:rgb(var(--home-amber));opacity:.07;animation-duration:24s}
.home-page .backdrop-grid{
  position:absolute;
  inset:0;
  opacity:.19;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(circle at 50% 35%,#000 2%,transparent 82%);
}
@keyframes v9-glow-drift{
  from{transform:translate3d(-2vw,1vh,0) scale(.92)}
  to{transform:translate3d(3vw,-3vh,0) scale(1.08)}
}

.home-page #petal-bg{
  position:fixed;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  pointer-events:none;
}

.home-page main,
.home-page .site-footer{
  position:relative;
  z-index:4;
}

/* HEADER */
.home-page .site-header{
  z-index:40;
  border-color:rgba(255,255,255,.09);
  background:rgba(9,13,15,.66);
  backdrop-filter:blur(22px) saturate(125%);
  box-shadow:0 15px 50px rgba(0,0,0,.24);
}
.home-page .brand-gem{
  background:transparent;
  box-shadow:none;
}
.home-page .brand-copy strong{color:#f2f1ec}
.home-page .brand-copy small{color:#788283}
.home-page .nav-links{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.055);
}
.home-page .nav-links a{color:#9ba3a3}
.home-page .nav-links a:hover{background:rgba(255,255,255,.075);color:#fff}
.home-page .header-cta{
  background:#edf0ea;
  color:#0a1012;
  box-shadow:none;
}
.home-page .header-cta:hover{box-shadow:0 12px 35px rgba(99,216,199,.12)}

.home-page .progress{
  z-index:60;
  background:rgba(255,255,255,.04);
}
.home-page .progress span{
  background:linear-gradient(90deg,#f4b7d8 0%,#d69aef 38%,#9a75f2 68%,#4e2d81 100%);
}

/* HERO */
.home-page .hero{
  width:100%;
  max-width:none;
  min-height:112svh;
  padding:17vh 5vw 10vh;
  justify-content:center;
  text-align:center;
}
.home-page .hero-copy-centered{
  width:min(1380px,94vw);
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.home-page .eyebrow,
.home-page .kicker{
  color:#7f8a89;
}
.home-page .hero-wordmark{
  width:100%;
  max-width:none;
  margin:22px auto 30px;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:.17em;
  font-size:clamp(76px,12.6vw,220px);
  line-height:.78;
  letter-spacing:-.085em;
  white-space:nowrap;
  text-transform:uppercase;
  font-weight:850;
}
.home-page .hero-word{
  display:inline-flex;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:inherit;
}
.home-page .hero-letter{
  --letter-light:0;
  display:inline-block;
  color:rgba(242,241,236,calc(.20 + var(--letter-light) * .80));
  text-shadow:
    0 0 calc(var(--letter-light) * 22px) rgba(255,127,139,calc(var(--letter-light) * .38)),
    0 0 calc(var(--letter-light) * 56px) rgba(99,216,199,calc(var(--letter-light) * .22));
  filter:brightness(calc(.78 + var(--letter-light) * .48));
  transition:color .11s linear,text-shadow .11s linear,filter .11s linear;
}
.home-page .hero-dot{
  color:#d69aef;
  text-shadow:0 0 28px rgba(214,154,239,.18);
}
.home-page .lead{
  max-width:560px;
  color:#9aa2a1;
}
.home-page .scroll-cue{
  justify-content:center;
  color:#747e7d;
}
.home-page .scroll-cue span{
  background:linear-gradient(90deg,#f4b7d8,#d69aef,#9a75f2,#4e2d81);
}
.home-page .hero-decoration{
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
}
.home-page .hero-pill{
  border-color:rgba(255,255,255,.10);
  background:rgba(10,15,17,.56);
  color:#95a09e;
  box-shadow:0 14px 36px rgba(0,0,0,.16);
}
.home-page .pill-a{left:8vw;top:33%}
.home-page .pill-b{right:9vw;top:26%}
.home-page .pill-c{right:13vw;bottom:20%}

/* CHAPTERS */
.home-page .chapter{
  min-height:104svh;
  padding-top:7vh;
  padding-bottom:7vh;
}
.home-page .story-section{
  min-height:106svh;
}
.home-page #shape,
.home-page #respond,
.home-page #art{
  min-height:106svh;
}

/* CARDS: cristal oscuro. La corriente queda detrás y se intuye a través. */
.home-page .story-card,
.home-page .site-footer{
  --petal-light:0;
  --petal-x:50%;
  --petal-y:50%;
  --petal-rgb:99,216,199;
}
.home-page .story-card{
  border-color:rgba(255,255,255,calc(.085 + var(--petal-light) * .21));
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .21)),transparent 29%),
    radial-gradient(circle at 86% 12%,rgba(var(--section-rgb),.055),transparent 31%),
    linear-gradient(145deg,rgba(17,24,27,.82),rgba(9,14,16,.71) 62%,rgba(7,11,13,.78));
  backdrop-filter:blur(7px) saturate(118%);
  box-shadow:
    0 38px 110px rgba(0,0,0,.32),
    0 0 calc(var(--petal-light) * 90px) rgba(var(--petal-rgb),calc(var(--petal-light) * .14));
  transition:border-color .18s linear,box-shadow .18s linear;
}
.home-page #respond .story-card,
.home-page #art .story-card{
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .21)),transparent 29%),
    radial-gradient(circle at 86% 12%,rgba(var(--section-rgb),.055),transparent 31%),
    linear-gradient(145deg,rgba(17,24,27,.82),rgba(9,14,16,.71) 62%,rgba(7,11,13,.78));
}
.home-page .story-card::before{
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(255,255,255,calc(var(--petal-light) * .12)),transparent 17%),
    linear-gradient(120deg,rgba(255,255,255,.035),transparent 37%);
}
.home-page .story-card::after{
  z-index:2;
  opacity:1;
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .12)),transparent 20%),
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 20%,transparent 75%,rgba(255,255,255,.018));
}
.home-page .card-grid{
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
}
.home-page .story-card h2{color:#f1f1eb}
.home-page .story-foot>p{color:#9ca5a4}
.home-page .number{color:#6f7a79}
.home-page .tags span{
  color:#9da6a5;
  background:rgba(255,255,255,.026);
  border-color:rgba(255,255,255,.09);
}
.home-page .kinetic-layer{
  opacity:calc(.46 + var(--petal-light) * .36);
}
.home-page .kinetic-label{color:rgba(255,255,255,.16)}
.home-page .lab-cta{
  background:rgba(238,241,235,.08);
  border-color:rgba(238,241,235,.13);
  color:#eef0eb;
}
.home-page .lab-cta:hover{
  background:rgba(99,216,199,.09);
  border-color:rgba(99,216,199,.24);
}

/* Companions menos chillones; son secundarios a la corriente de pétalos. */
.home-page .section-companion{opacity:.58}
.home-page .companion-chip{
  background:rgba(10,15,17,.54);
  border-color:rgba(255,255,255,.09);
  color:#85908f;
}

/* FOOTER / FINAL BLOOM */
.home-page .site-footer{
  z-index:2;
  min-height:88svh;
  margin:5vh auto 18px;
  border-color:rgba(255,255,255,calc(.09 + var(--petal-light) * .18));
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .16)),transparent 27%),
    radial-gradient(circle at 10% 84%,rgba(255,127,139,.075),transparent 31%),
    radial-gradient(circle at 88% 12%,rgba(99,216,199,.065),transparent 28%),
    linear-gradient(145deg,rgba(15,21,24,.90),rgba(7,12,14,.88));
  backdrop-filter:blur(10px);
  box-shadow:0 44px 130px rgba(0,0,0,.33);
}
.home-page .site-footer::after{display:none}
.home-page .footer-hero h2{color:#f1f1eb}
.home-page .footer-hero h2 span{
  background:linear-gradient(96deg,#f4b7d8 0%,#d69aef 38%,#9a75f2 68%,#4e2d81 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.home-page .footer-lead,
.home-page .footer-brand-block p,
.home-page .footer-col p{color:#879291}
.home-page .footer-col a{color:#cfd3cd}
.home-page .footer-col a:hover{color:#d69aef}
.home-page .footer-mark{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.home-page .footer-cta{
  background:#edf0ea;
  color:#0a1012;
}
.home-page .footer-cta:hover{box-shadow:0 14px 38px rgba(99,216,199,.13)}

.home-page .flower-anchor{
  position:absolute;
  z-index:0;
  left:79%;
  top:30%;
  width:2px;
  height:2px;
  pointer-events:none;
}
.home-page .final-bloom-sign{
  --final-reveal:0;
  position:absolute;
  z-index:5;
  right:6%;
  top:9%;
  text-align:right;
  opacity:var(--final-reveal);
  transform:translate3d(0,calc((1 - var(--final-reveal)) * 18px),0);
  transition:opacity .12s linear,transform .12s linear;
  pointer-events:none;
}
.home-page .final-bloom-sign span{
  display:block;
  margin-bottom:7px;
  color:#778381;
  font-size:8px;
  letter-spacing:.24em;
}
.home-page .final-bloom-sign strong{
  display:block;
  color:#eff0ea;
  font-size:clamp(18px,2vw,30px);
  letter-spacing:-.035em;
}

@media (max-width:980px){
  .home-page .hero-wordmark{font-size:clamp(70px,15vw,142px);gap:.13em}
  .home-page .hero-decoration{opacity:.62}
  .home-page .pill-a{left:5vw;top:27%}
  .home-page .pill-b{right:5vw;top:23%}
  .home-page .pill-c{right:8vw;bottom:18%}
  .home-page .flower-anchor{left:78%;top:22%}
  .home-page .final-bloom-sign{top:6%;right:5%}
}

@media (max-width:820px){
  .home-page .site-header{
    top:10px;
    width:calc(100vw - 20px);
    border-radius:18px;
  }
  .home-page .hero{
    min-height:106svh;
    padding:15vh 5vw 8vh;
  }
  .home-page .hero-wordmark{
    flex-direction:column;
    align-items:center;
    gap:.02em;
    font-size:clamp(72px,21vw,128px);
    line-height:.73;
  }
  .home-page .hero-word-mode{padding-left:.18em}
  .home-page .hero-decoration{opacity:.48}
  .home-page .pill-a{left:5vw;top:25%}
  .home-page .pill-b{right:4vw;top:22%}
  .home-page .pill-c{right:8vw;bottom:19%}

  .home-page .chapter,
  .home-page .story-section,
  .home-page #shape,
  .home-page #respond,
  .home-page #art{min-height:100svh}

  .home-page .story-card{
    background:
      radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .18)),transparent 34%),
      linear-gradient(145deg,rgba(17,24,27,.86),rgba(8,13,15,.79));
  }

  .home-page .site-footer{min-height:auto}
  .home-page .flower-anchor{left:78%;top:19%}
  .home-page .final-bloom-sign{top:4%;right:24px}
}

@media (max-width:560px){
  .home-page .hero-wordmark{
    font-size:clamp(64px,20.5vw,100px);
    letter-spacing:-.095em;
  }
  .home-page .hero-decoration{display:none}
  .home-page .hero .lead{font-size:14px}
  .home-page .story-card{border-radius:28px}
  .home-page .flower-anchor{left:76%;top:15%}
  .home-page .final-bloom-sign{display:none}
}

@media (prefers-reduced-motion:reduce){
  .home-page .backdrop-glow,
  .home-page .hero-pill,
  .home-page .scroll-cue span,
  .home-page .kinetic-layer *{animation:none!important}
}

/* =============================================================================
   V10 — ELECTRIC GARDEN / FREE LAYOUT PASS
   =============================================================================
   Solo afecta a la HOME. Texto e información se conservan intactos.
   Nueva composición centrada + paleta más chillona sin morado dominante.
============================================================================= */
body.home-page{
  --v10-bg:#041014;
  --v10-bg2:#071b1e;
  --v10-ink:#f7ffe9;
  --v10-muted:#87a0a0;
  --v10-lime:215,255,67;
  --v10-cyan:73,244,255;
  --v10-orange:255,115,72;
  --v10-pink:255,79,157;
  --v10-yellow:255,211,77;
  background:#041014;
  color:var(--v10-ink);
}

body.home-page::selection{
  background:rgba(215,255,67,.30);
  color:#031013;
}

.home-page .site-backdrop{
  background:
    radial-gradient(circle at 12% 10%,rgba(215,255,67,.11),transparent 24%),
    radial-gradient(circle at 89% 22%,rgba(73,244,255,.095),transparent 25%),
    radial-gradient(circle at 50% 74%,rgba(255,115,72,.075),transparent 31%),
    linear-gradient(145deg,#031014 0%,#06191d 42%,#041216 100%);
}
.home-page .backdrop-glow{filter:blur(140px);opacity:.18}
.home-page .glow-coral{width:40vw;height:40vw;left:-11vw;top:2vh;background:rgb(var(--v10-lime));opacity:.13}
.home-page .glow-teal{width:38vw;height:38vw;right:-10vw;top:24vh;background:rgb(var(--v10-cyan));opacity:.12}
.home-page .glow-amber{width:30vw;height:30vw;left:34vw;top:72vh;background:rgb(var(--v10-orange));opacity:.095}
.home-page .backdrop-grid{
  opacity:.22;
  background-image:
    linear-gradient(rgba(215,255,67,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(73,244,255,.025) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(circle at 50% 42%,#000 4%,transparent 78%);
}

/* HEADER más ligero para dejar respirar la nueva composición. */
.home-page .site-header{
  background:rgba(3,15,18,.70);
  border-color:rgba(215,255,67,.10);
  box-shadow:0 18px 55px rgba(0,0,0,.26);
  backdrop-filter:blur(24px) saturate(145%);
}
.home-page .brand-gem{
  background:transparent;
  box-shadow:none;
}
.home-page .brand-copy strong{color:#f8ffe9}
.home-page .brand-copy small{color:#729091}
.home-page .nav-links{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.065)}
.home-page .nav-links a{color:#8aa2a2}
.home-page .nav-links a:hover{color:#f4b7d8;background:rgba(244,183,216,.08)}
.home-page .header-cta{
  background:linear-gradient(110deg,#f4b7d8,#d69aef 52%,#9a75f2 100%);
  color:#120d17;
  box-shadow:0 0 0 1px rgba(154,117,242,.22),0 10px 34px rgba(154,117,242,.12);
}
.home-page .header-cta:hover{box-shadow:0 12px 40px rgba(154,117,242,.18)}
.home-page .progress span{background:linear-gradient(90deg,#f4b7d8 0%,#d69aef 38%,#9a75f2 68%,#4e2d81 100%)}

/* HERO: BLOOM MODE centrado de verdad y con más presencia. */
.home-page .hero{
  min-height:116svh;
  padding:14vh 4vw 8vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.home-page .hero-copy-centered{
  width:min(1520px,96vw);
  position:relative;
  z-index:7;
}
.home-page .eyebrow,
.home-page .kicker{color:#88a3a3}
.home-page .hero-wordmark{
  width:100%;
  margin:28px auto 34px;
  gap:.14em;
  justify-content:center;
  font-size:clamp(82px,13.8vw,238px);
  letter-spacing:-.090em;
  line-height:.75;
  filter:drop-shadow(0 30px 58px rgba(0,0,0,.28));
}
.home-page .hero-letter{
  --letter-light:0;
  --letter-rgb:215,255,67;
  color:rgba(var(--letter-rgb),calc(.16 + var(--letter-light) * .84));
  text-shadow:
    0 0 calc(var(--letter-light) * 16px) rgba(var(--letter-rgb),calc(var(--letter-light) * .54)),
    0 0 calc(var(--letter-light) * 50px) rgba(var(--letter-rgb),calc(var(--letter-light) * .26));
  filter:brightness(calc(.72 + var(--letter-light) * .55)) saturate(calc(.75 + var(--letter-light) * .55));
}
.home-page .hero-word:first-child .hero-letter:nth-child(2),
.home-page .hero-word:first-child .hero-letter:nth-child(5),
.home-page .hero-word-mode .hero-letter:nth-child(2){--letter-rgb:73,244,255}
.home-page .hero-word:first-child .hero-letter:nth-child(3),
.home-page .hero-word-mode .hero-letter:nth-child(4){--letter-rgb:255,115,72}
.home-page .hero-word:first-child .hero-letter:nth-child(4),
.home-page .hero-word-mode .hero-letter:nth-child(1){--letter-rgb:255,211,77}
.home-page .hero-word-mode .hero-letter:nth-child(3){--letter-rgb:255,79,157}
.home-page .hero-dot{color:#d69aef;text-shadow:0 0 30px rgba(214,154,239,.25)}
.home-page .lead{color:#a3b4b2;font-size:clamp(15px,1.25vw,20px)}
.home-page .scroll-cue{color:#6f8c8c}
.home-page .scroll-cue span{background:linear-gradient(90deg,#f4b7d8,#d69aef,#9a75f2,#4e2d81)}

.home-page .hero-pill{
  color:#9bb0ae;
  background:rgba(5,24,27,.58);
  border-color:rgba(215,255,67,.12);
  box-shadow:0 15px 42px rgba(0,0,0,.22);
}
.home-page .pill-a{left:6vw;top:29%}
.home-page .pill-b{right:7vw;top:25%}
.home-page .pill-c{right:10vw;bottom:18%}

/* CAPÍTULOS: todas las cards pasan al centro para que la corriente las corte. */
.home-page .chapter,
.home-page .story-section,
.home-page #shape,
.home-page #respond,
.home-page #art{
  min-height:112svh;
}
.home-page .story-section{
  display:flex;
  align-items:center;
  justify-content:center!important;
  gap:0!important;
  padding:8vh 4vw!important;
  overflow:hidden;
}
.home-page .story-section::before{
  width:min(840px,64vw);
  height:min(840px,64vw);
  left:50%!important;
  right:auto!important;
  top:50%!important;
  transform:translate(-50%,-50%);
  opacity:.22;
  filter:blur(26px);
}
.home-page #shape::before{background:radial-gradient(circle,rgba(215,255,67,.19),transparent 66%)}
.home-page #respond::before{background:radial-gradient(circle,rgba(73,244,255,.18),transparent 66%)}
.home-page #art::before{background:radial-gradient(circle,rgba(255,115,72,.17),transparent 66%)}

.home-page .section-companion{
  position:absolute;
  z-index:2;
  opacity:.26;
  pointer-events:none;
  filter:saturate(1.25);
}
.home-page .companion-idea{right:3vw;top:50%;transform:translateY(-50%)}
.home-page .companion-motion{left:1vw;top:50%;transform:translateY(-50%)}
.home-page .motion-field{
  background:
    radial-gradient(circle at 38% 36%,rgba(255,255,255,.55),transparent 10%),
    radial-gradient(circle at 50% 50%,rgba(73,244,255,.26),rgba(73,244,255,.055) 46%,transparent 70%);
  border-color:rgba(73,244,255,.15);
}
.home-page .field-dot{background:#d69aef;box-shadow:0 0 32px rgba(214,154,239,.34)}

.home-page .story-card,
.home-page .story-card-wide,
.home-page .story-card-split,
.home-page .story-card-showcase{
  width:min(1180px,86vw)!important;
  height:min(690px,70svh)!important;
  min-height:590px!important;
  border-radius:42px!important;
  margin:0 auto;
  transform:translateZ(0);
  border-color:rgba(255,255,255,calc(.085 + var(--petal-light) * .27));
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .28)),transparent 25%),
    linear-gradient(120deg,rgba(10,32,35,.80),rgba(4,18,21,.72) 56%,rgba(4,13,16,.84));
  backdrop-filter:blur(9px) saturate(142%);
  box-shadow:
    0 48px 130px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.055),
    0 0 calc(var(--petal-light) * 115px) rgba(var(--petal-rgb),calc(var(--petal-light) * .16));
}
.home-page #respond .story-card,
.home-page #art .story-card{
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .28)),transparent 25%),
    linear-gradient(120deg,rgba(10,32,35,.80),rgba(4,18,21,.72) 56%,rgba(4,13,16,.84));
}
.home-page .story-card::before{
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(255,255,255,calc(var(--petal-light) * .16)),transparent 14%),
    linear-gradient(115deg,rgba(215,255,67,.035),transparent 28%,rgba(73,244,255,.022) 72%,transparent);
}
.home-page .story-card::after{
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .16)),transparent 19%),
    linear-gradient(120deg,rgba(255,255,255,.035),transparent 26%,transparent 73%,rgba(255,115,72,.025));
}
.home-page .card-grid{
  opacity:.22;
  background-image:
    linear-gradient(rgba(73,244,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(215,255,67,.030) 1px,transparent 1px);
  background-size:42px 42px;
}

/* Unificamos la posición del copy para que las tres cards tengan ritmo común. */
.home-page .story-card .story-copy,
.home-page .story-card-split .story-copy,
.home-page .story-card-showcase .story-copy{
  inset:clamp(30px,4vw,54px)!important;
  right:48%!important;
  z-index:8;
}
.home-page .story-card h2,
.home-page .story-card-split h2,
.home-page .story-card-showcase h2{
  max-width:650px;
  font-size:clamp(54px,6.3vw,96px);
  color:#f7ffe9;
  text-shadow:0 10px 40px rgba(0,0,0,.25);
}
.home-page .story-foot{
  max-width:650px;
}
.home-page .story-foot>p{color:#9fb2b0}
.home-page .number{color:rgba(215,255,67,.42)}
.home-page .tags span{
  color:#b0c1be;
  background:rgba(255,255,255,.035);
  border-color:rgba(73,244,255,.10);
}
.home-page .story-card.is-in-view .tags span:nth-child(2){transform:translateY(-3px)}
.home-page .kicker{color:#7f9b9a}

/* Los visuales internos viven a la derecha en las tres cards. */
.home-page .kinetic-layer,
.home-page .story-card-showcase .kinetic-projects{
  left:52%!important;
  right:2%!important;
  opacity:calc(.45 + var(--petal-light) * .42);
}
.home-page .kinetic-ring{border-color:rgba(215,255,67,.24)!important}
.home-page .motion-line{background:linear-gradient(90deg,transparent,rgba(73,244,255,.36),transparent)!important}
.home-page .motion-orb{background:#9a75f2!important;box-shadow:0 0 34px rgba(154,117,242,.30)!important}
.home-page .project-screen{border-color:rgba(215,255,67,.13)!important}
.home-page .kinetic-label{color:rgba(215,255,67,.18)}
.home-page .lab-cta{background:rgba(215,255,67,.085);border-color:rgba(215,255,67,.18);color:#f6ffe6}
.home-page .lab-cta:hover{background:rgba(73,244,255,.10);border-color:rgba(73,244,255,.27)}

/* FOOTER: no cambiamos estructura/texto; solo lo hacemos encajar con el nuevo sistema. */
.home-page .site-footer{
  border-color:rgba(215,255,67,calc(.08 + var(--petal-light) * .18));
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .18)),transparent 27%),
    radial-gradient(circle at 12% 82%,rgba(215,255,67,.065),transparent 30%),
    radial-gradient(circle at 88% 12%,rgba(73,244,255,.065),transparent 28%),
    linear-gradient(145deg,rgba(8,29,32,.93),rgba(3,15,18,.92));
}
.home-page .footer-hero h2{color:#f7ffe9}
.home-page .footer-hero h2 span{
  background:linear-gradient(96deg,#d7ff43 0%,#49f4ff 43%,#ff7348 76%,#ff4f9d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.home-page .footer-col a:hover{color:#d69aef}
.home-page .footer-mark{background:transparent;box-shadow:none}
.home-page .footer-cta{background:linear-gradient(110deg,#f4b7d8,#d69aef 52%,#9a75f2 100%);color:#120d17}
.home-page .footer-cta:hover{box-shadow:0 14px 42px rgba(215,255,67,.15)}
.home-page .final-bloom-sign span{color:#749190}
.home-page .final-bloom-sign strong{color:#d69aef;text-shadow:0 0 24px rgba(214,154,239,.14)}

@media (max-width:1050px){
  .home-page .story-card,
  .home-page .story-card-wide,
  .home-page .story-card-split,
  .home-page .story-card-showcase{width:min(92vw,980px)!important}
  .home-page .story-card .story-copy,
  .home-page .story-card-split .story-copy,
  .home-page .story-card-showcase .story-copy{right:42%!important}
  .home-page .kinetic-layer,
  .home-page .story-card-showcase .kinetic-projects{left:58%!important}
}

@media (max-width:820px){
  .home-page .hero{min-height:108svh;padding-top:14vh}
  .home-page .hero-wordmark{
    flex-direction:column;
    align-items:center;
    gap:.02em;
    font-size:clamp(72px,21vw,130px);
    line-height:.72;
  }
  .home-page .hero-word-mode{padding-left:.16em}
  .home-page .story-section{min-height:104svh;padding:7vh 4vw!important}
  .home-page .story-card,
  .home-page .story-card-wide,
  .home-page .story-card-split,
  .home-page .story-card-showcase{
    width:92vw!important;
    height:76svh!important;
    min-height:540px!important;
    border-radius:30px!important;
  }
  .home-page .story-card .story-copy,
  .home-page .story-card-split .story-copy,
  .home-page .story-card-showcase .story-copy{
    inset:28px 26px!important;
    right:26px!important;
    padding-bottom:31vh;
  }
  .home-page .story-card h2,
  .home-page .story-card-split h2,
  .home-page .story-card-showcase h2{font-size:clamp(46px,12vw,72px);max-width:92%}
  .home-page .kinetic-layer,
  .home-page .story-card-showcase .kinetic-projects{
    left:6%!important;
    right:6%!important;
    top:55%!important;
    bottom:2%!important;
    transform:scale(.78);
    transform-origin:bottom center;
  }
  .home-page .section-companion{display:none!important}
}

@media (max-width:560px){
  .home-page .hero-wordmark{font-size:clamp(62px,20.5vw,100px)}
  .home-page .story-card,
  .home-page .story-card-wide,
  .home-page .story-card-split,
  .home-page .story-card-showcase{min-height:560px!important}
  .home-page .story-card .story-copy,
  .home-page .story-card-split .story-copy,
  .home-page .story-card-showcase .story-copy{padding-bottom:28vh}
}

/* =============================================================================
   V11 — BLACK / ROSE / PURPLE FLOW
   =============================================================================
   Corrección de rumbo sobre V10:
   - negro profundo de fondo
   - rosa -> lila -> morado como sistema cromático
   - cards alternadas izquierda / derecha para recuperar ritmo
   - corriente más limpia y calmada
============================================================================= */
body.home-page{
  --v11-black:#050407;
  --v11-black-2:#09070d;
  --v11-black-3:#0d0914;
  --v11-white:#f8f4fb;
  --v11-muted:#a39aaa;
  --v11-pink:244,151,210;
  --v11-rose:225,129,198;
  --v11-lilac:194,151,255;
  --v11-purple:151,101,232;
  --v11-deep:92,57,161;
  background:#050407;
  color:var(--v11-white);
}
body.home-page::selection{background:rgba(194,151,255,.28);color:#fff}

.home-page .site-backdrop{
  background:
    radial-gradient(circle at 12% 9%,rgba(244,151,210,.075),transparent 26%),
    radial-gradient(circle at 88% 30%,rgba(194,151,255,.065),transparent 28%),
    radial-gradient(circle at 36% 78%,rgba(111,67,188,.065),transparent 30%),
    linear-gradient(180deg,#040306 0%,#08060b 48%,#050407 100%);
}
.home-page .backdrop-glow{filter:blur(150px);opacity:.15;animation-duration:30s}
.home-page .glow-coral{width:42vw;height:42vw;left:-13vw;top:0;background:rgb(var(--v11-pink));opacity:.13}
.home-page .glow-teal{width:38vw;height:38vw;right:-11vw;top:27vh;background:rgb(var(--v11-lilac));opacity:.12;animation-duration:34s}
.home-page .glow-amber{width:34vw;height:34vw;left:28vw;top:72vh;background:rgb(var(--v11-deep));opacity:.10;animation-duration:38s}
.home-page .backdrop-grid{
  opacity:.12;
  background-image:
    linear-gradient(rgba(211,172,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,151,210,.022) 1px,transparent 1px);
  background-size:82px 82px;
  mask-image:radial-gradient(circle at 50% 38%,#000 5%,transparent 80%);
}

.home-page .site-header{
  background:rgba(5,4,7,.72);
  border-color:rgba(220,188,255,.09);
  box-shadow:0 18px 55px rgba(0,0,0,.33);
  backdrop-filter:blur(24px) saturate(125%);
}
.home-page .brand-gem{
  background:linear-gradient(145deg,#f49bd4 0%,#c39bff 52%,#7951c6 100%);
  box-shadow:0 0 28px rgba(194,151,255,.16);
}
.home-page .brand-copy strong{color:#f8f4fb}
.home-page .brand-copy small{color:#8c8393}
.home-page .nav-links{background:rgba(255,255,255,.022);border-color:rgba(255,255,255,.06)}
.home-page .nav-links a{color:#968c9d}
.home-page .nav-links a:hover{color:#f1c1e4;background:rgba(194,151,255,.075)}
.home-page .header-cta{
  background:linear-gradient(110deg,#f0a4d6,#c39bff);
  color:#120d18;
  box-shadow:0 0 0 1px rgba(229,190,255,.12),0 12px 35px rgba(153,99,231,.11);
}
.home-page .header-cta:hover{box-shadow:0 14px 42px rgba(225,129,198,.18)}
.home-page .progress span{background:linear-gradient(90deg,#f39bd2 0%,#df87c8 32%,#bd94fa 66%,#7750c3 100%)}

/* HERO — grande, limpio y en la paleta correcta. */
.home-page .hero{
  min-height:116svh;
  padding:15vh 4vw 9vh;
  background:radial-gradient(circle at 50% 49%,rgba(158,104,229,.045),transparent 36%);
}
.home-page .hero-wordmark{
  margin:28px auto 36px;
  gap:.14em;
  font-size:clamp(82px,13.4vw,232px);
  filter:drop-shadow(0 32px 66px rgba(0,0,0,.42));
}
.home-page .hero-letter{
  --letter-light:0;
  --letter-rgb:244,151,210;
  color:rgba(var(--letter-rgb),calc(.18 + var(--letter-light) * .82));
  text-shadow:
    0 0 calc(var(--letter-light) * 20px) rgba(var(--letter-rgb),calc(var(--letter-light) * .48)),
    0 0 calc(var(--letter-light) * 58px) rgba(var(--letter-rgb),calc(var(--letter-light) * .22));
  filter:brightness(calc(.74 + var(--letter-light) * .48)) saturate(calc(.82 + var(--letter-light) * .34));
}
/* degradado rosa -> lila -> morado repartido por letras */
.home-page .hero-word:first-child .hero-letter:nth-child(1){--letter-rgb:246,158,213}
.home-page .hero-word:first-child .hero-letter:nth-child(2){--letter-rgb:237,144,207}
.home-page .hero-word:first-child .hero-letter:nth-child(3){--letter-rgb:222,137,211}
.home-page .hero-word:first-child .hero-letter:nth-child(4){--letter-rgb:204,145,235}
.home-page .hero-word:first-child .hero-letter:nth-child(5){--letter-rgb:189,145,251}
.home-page .hero-word-mode .hero-letter:nth-child(1){--letter-rgb:177,134,244}
.home-page .hero-word-mode .hero-letter:nth-child(2){--letter-rgb:161,117,229}
.home-page .hero-word-mode .hero-letter:nth-child(3){--letter-rgb:143,98,211}
.home-page .hero-word-mode .hero-letter:nth-child(4){--letter-rgb:120,77,190}
.home-page .hero-dot{color:#b98cf0;text-shadow:0 0 28px rgba(185,140,240,.20)}
.home-page .eyebrow,.home-page .kicker{color:#9c8fa5}
.home-page .lead{color:#aaa0af}
.home-page .scroll-cue{color:#817788}
.home-page .scroll-cue span{background:linear-gradient(90deg,#f39bd2,#c39bff,#7d54c8)}
.home-page .hero-pill{
  color:#a598ae;
  background:rgba(9,7,13,.54);
  border-color:rgba(210,177,255,.09);
  box-shadow:0 16px 42px rgba(0,0,0,.24);
}

/* CAPÍTULOS — alternados, para que cada pantalla componga distinta. */
.home-page .chapter,
.home-page .story-section,
.home-page #shape,
.home-page #respond,
.home-page #art{min-height:110svh}
.home-page .story-section{
  display:flex;
  align-items:center;
  padding:8vh 5vw!important;
  overflow:hidden;
}
.home-page #shape{justify-content:flex-start!important;padding-left:6vw!important}
.home-page #respond{justify-content:flex-end!important;padding-right:6vw!important}
.home-page #art{justify-content:flex-start!important;padding-left:9vw!important}

.home-page .story-section::before{
  width:min(720px,56vw);
  height:min(720px,56vw);
  top:50%!important;
  opacity:.16;
  filter:blur(36px);
}
.home-page #shape::before{left:-5vw!important;right:auto!important;transform:translateY(-50%);background:radial-gradient(circle,rgba(239,146,211,.16),transparent 66%)}
.home-page #respond::before{left:auto!important;right:-6vw!important;transform:translateY(-50%);background:radial-gradient(circle,rgba(190,145,255,.16),transparent 66%)}
.home-page #art::before{left:-3vw!important;right:auto!important;transform:translateY(-50%);background:radial-gradient(circle,rgba(134,83,207,.16),transparent 66%)}

.home-page .story-card,
.home-page .story-card-wide,
.home-page .story-card-split,
.home-page .story-card-showcase{
  width:min(1000px,76vw)!important;
  height:min(660px,70svh)!important;
  min-height:580px!important;
  margin:0!important;
  border-radius:38px!important;
  border-color:rgba(239,211,255,calc(.075 + var(--petal-light) * .23));
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .24)),transparent 27%),
    radial-gradient(circle at 82% 14%,rgba(var(--section-rgb),.052),transparent 31%),
    linear-gradient(135deg,rgba(15,11,20,.82),rgba(8,6,12,.72) 58%,rgba(6,5,9,.82));
  backdrop-filter:blur(8px) saturate(122%);
  box-shadow:
    0 45px 130px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 calc(var(--petal-light) * 105px) rgba(var(--petal-rgb),calc(var(--petal-light) * .15));
}
.home-page #respond .story-card,
.home-page #art .story-card{
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .24)),transparent 27%),
    radial-gradient(circle at 82% 14%,rgba(var(--section-rgb),.052),transparent 31%),
    linear-gradient(135deg,rgba(15,11,20,.82),rgba(8,6,12,.72) 58%,rgba(6,5,9,.82));
}
.home-page .story-card::before{
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(255,245,252,calc(var(--petal-light) * .13)),transparent 17%),
    linear-gradient(120deg,rgba(244,151,210,.028),transparent 34%,rgba(194,151,255,.020) 74%,transparent);
}
.home-page .story-card::after{
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .14)),transparent 20%),
    linear-gradient(115deg,rgba(255,255,255,.026),transparent 28%,transparent 76%,rgba(194,151,255,.018));
}
.home-page .card-grid{
  opacity:.14;
  background-image:
    linear-gradient(rgba(220,188,255,.027) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,151,210,.022) 1px,transparent 1px);
  background-size:48px 48px;
}

.home-page .story-card .story-copy,
.home-page .story-card-split .story-copy,
.home-page .story-card-showcase .story-copy{
  inset:clamp(30px,3.7vw,52px)!important;
  right:45%!important;
}
.home-page .story-card h2,
.home-page .story-card-split h2,
.home-page .story-card-showcase h2{
  max-width:620px;
  font-size:clamp(52px,6.15vw,92px);
  color:#f7f2f9;
  text-shadow:0 10px 42px rgba(0,0,0,.28);
}
.home-page .story-foot>p{color:#aaa0af}
.home-page .number{color:rgba(205,161,255,.42)}
.home-page .tags span{color:#b6aabc;background:rgba(255,255,255,.026);border-color:rgba(203,164,255,.10)}
.home-page .kinetic-label{color:rgba(221,178,255,.17)}
.home-page .kinetic-ring{border-color:rgba(225,145,213,.22)!important}
.home-page .motion-line{background:linear-gradient(90deg,transparent,rgba(198,154,255,.30),transparent)!important}
.home-page .motion-orb{background:#d59be9!important;box-shadow:0 0 32px rgba(198,145,239,.26)!important}
.home-page .project-screen{border-color:rgba(221,174,255,.12)!important}
.home-page .lab-cta{background:rgba(199,153,255,.07);border-color:rgba(213,176,255,.15);color:#f2eaf6}
.home-page .lab-cta:hover{background:rgba(239,147,210,.09);border-color:rgba(239,147,210,.24)}

/* Companions ocupan el hueco contrario a cada card y rompen la repetición. */
.home-page .section-companion{opacity:.42;filter:saturate(.78)}
.home-page #shape .companion-idea{right:5vw;left:auto;top:50%;transform:translateY(-50%) scale(1.08)}
.home-page #respond .companion-motion{left:4vw;right:auto;top:50%;transform:translateY(-50%) scale(1.08)}
.home-page .companion-chip{background:rgba(10,7,14,.48);border-color:rgba(203,163,255,.08);color:#897d91}
.home-page .motion-field{
  background:radial-gradient(circle at 44% 40%,rgba(245,211,236,.36),transparent 9%),radial-gradient(circle at 50% 50%,rgba(183,137,237,.14),rgba(118,76,180,.035) 48%,transparent 70%);
  border-color:rgba(203,162,255,.11);
}
.home-page .field-dot{background:#df9ccc;box-shadow:0 0 30px rgba(225,139,203,.25)}

/* Footer mantiene estructura/texto, solo vuelve a la paleta Bloom. */
.home-page .site-footer{
  border-color:rgba(216,180,255,calc(.075 + var(--petal-light) * .17));
  background:
    radial-gradient(circle at var(--petal-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .16)),transparent 27%),
    radial-gradient(circle at 12% 82%,rgba(239,145,210,.06),transparent 30%),
    radial-gradient(circle at 88% 12%,rgba(167,118,234,.06),transparent 29%),
    linear-gradient(145deg,rgba(13,9,18,.94),rgba(5,4,8,.93));
}
.home-page .footer-hero h2{color:#f6f0f8}
.home-page .footer-hero h2 span{
  background:linear-gradient(96deg,#f09dce 0%,#dd87c5 30%,#bd93f5 64%,#7850c3 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.home-page .footer-col a:hover{color:#d998cf}
.home-page .footer-mark{background:transparent;box-shadow:none}
.home-page .footer-cta{background:linear-gradient(110deg,#f0a0d1,#c49af7);color:#120d17}
.home-page .footer-cta:hover{box-shadow:0 14px 40px rgba(220,132,198,.15)}
.home-page .final-bloom-sign span{color:#877b8d}
.home-page .final-bloom-sign strong{color:#d898cf;text-shadow:0 0 26px rgba(215,143,207,.16)}

@media (max-width:1050px){
  .home-page #shape,.home-page #respond,.home-page #art{justify-content:center!important;padding-left:4vw!important;padding-right:4vw!important}
  .home-page .story-card,.home-page .story-card-wide,.home-page .story-card-split,.home-page .story-card-showcase{width:min(92vw,980px)!important}
  .home-page .story-card .story-copy,.home-page .story-card-split .story-copy,.home-page .story-card-showcase .story-copy{right:42%!important}
  .home-page .section-companion{opacity:.18}
}

@media (max-width:820px){
  .home-page .hero{min-height:108svh;padding-top:14vh}
  .home-page .hero-wordmark{flex-direction:column;align-items:center;gap:.02em;font-size:clamp(72px,21vw,130px);line-height:.72}
  .home-page .hero-word-mode{padding-left:.16em}
  .home-page .story-section{min-height:104svh;padding:7vh 4vw!important}
  .home-page .story-card,.home-page .story-card-wide,.home-page .story-card-split,.home-page .story-card-showcase{
    width:92vw!important;height:76svh!important;min-height:540px!important;border-radius:30px!important;
  }
  .home-page .story-card .story-copy,.home-page .story-card-split .story-copy,.home-page .story-card-showcase .story-copy{
    inset:28px 26px!important;right:26px!important;padding-bottom:31vh;
  }
  .home-page .story-card h2,.home-page .story-card-split h2,.home-page .story-card-showcase h2{font-size:clamp(46px,12vw,72px);max-width:92%}
  .home-page .kinetic-layer,.home-page .story-card-showcase .kinetic-projects{
    left:6%!important;right:6%!important;top:55%!important;bottom:2%!important;transform:scale(.78);transform-origin:bottom center;
  }
  .home-page .section-companion{display:none!important}
}

@media (max-width:560px){
  .home-page .hero-wordmark{font-size:clamp(62px,20.5vw,100px)}
  .home-page .story-card,.home-page .story-card-wide,.home-page .story-card-split,.home-page .story-card-showcase{min-height:560px!important}
  .home-page .story-card .story-copy,.home-page .story-card-split .story-copy,.home-page .story-card-showcase .story-copy{padding-bottom:28vh}
}


/* =============================================================================
   V13 — WIDE FLOW + TRUE DIRECTIONAL CARD SWEEP
============================================================================= */
.home-page .story-card,
.home-page .site-footer{
  --petal-fill:0%;
  --petal-edge-x:0%;
}

/*
  LTR: la zona iluminada nace a la izquierda y la cabeza brillante coincide
  con el frente de la corriente.
*/
.home-page .story-card::before{
  opacity:1;
  background:
    linear-gradient(90deg,
      rgba(var(--petal-rgb),calc(var(--petal-light) * .13)) 0%,
      rgba(var(--petal-rgb),calc(var(--petal-light) * .13)) calc(var(--petal-edge-x) - 12%),
      rgba(255,244,252,calc(var(--petal-light) * .19)) var(--petal-edge-x),
      transparent calc(var(--petal-edge-x) + 15%)
    ),
    radial-gradient(ellipse 24% 62% at var(--petal-edge-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .19)),transparent 72%),
    linear-gradient(120deg,rgba(244,151,210,.028),transparent 34%,rgba(194,151,255,.020) 74%,transparent);
}

/*
  RTL: se invierte de verdad. La zona ya iluminada queda a la derecha y la
  cabeza brillante avanza desde 100% hacia 0%.
*/
.home-page .story-card[data-flow="left"]::before{
  background:
    linear-gradient(90deg,
      transparent calc(var(--petal-edge-x) - 15%),
      rgba(255,244,252,calc(var(--petal-light) * .19)) var(--petal-edge-x),
      rgba(var(--petal-rgb),calc(var(--petal-light) * .13)) calc(var(--petal-edge-x) + 12%),
      rgba(var(--petal-rgb),calc(var(--petal-light) * .13)) 100%
    ),
    radial-gradient(ellipse 24% 62% at var(--petal-edge-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .19)),transparent 72%),
    linear-gradient(120deg,rgba(244,151,210,.028),transparent 34%,rgba(194,151,255,.020) 74%,transparent);
}

/* Thin highlight at the moving front, with direction-independent positioning. */
.home-page .story-card::after,
.home-page .story-card[data-flow="left"]::after{
  opacity:1;
  background:
    radial-gradient(ellipse 9% 78% at var(--petal-edge-x) var(--petal-y),rgba(255,255,255,calc(var(--petal-light) * .16)),transparent 68%),
    radial-gradient(circle at var(--petal-edge-x) var(--petal-y),rgba(var(--petal-rgb),calc(var(--petal-light) * .13)),transparent 24%),
    linear-gradient(115deg,rgba(255,255,255,.024),transparent 28%,transparent 76%,rgba(194,151,255,.018));
}




/* =============================================================================
   V14 — HERO QUIET START + CLEAN WORDMARK
============================================================================= */
.home-page .hero{
  min-height:182svh!important;
  padding:0 4vw 10vh!important;
  align-items:flex-start!important;
  overflow:visible;
}

.home-page .hero-copy-centered{
  position:sticky;
  top:10svh;
  min-height:80svh;
  width:min(1380px,94vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.home-page .hero-wordmark{
  filter:none!important;
}

.home-page .hero-letter{
  --letter-light:0;
  --letter-rgb:244,151,210;
  --grad-a:#f6a6d8;
  --grad-b:#c995f4;
  --grad-c:#784fc4;
  display:inline-block;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:linear-gradient(90deg,var(--grad-a) 0%,var(--grad-b) 56%,var(--grad-c) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  text-shadow:none!important;
  filter:none!important;
  opacity:calc(.72 + var(--letter-light) * .28);
  transition:opacity .12s linear;
}

.home-page .hero-letter::after{display:none!important}
.home-page .hero-word:first-child .hero-letter:nth-child(1){--grad-a:#f7a8d9;--grad-b:#e799d3;--grad-c:#ce91e9}
.home-page .hero-word:first-child .hero-letter:nth-child(2){--grad-a:#f4a3d6;--grad-b:#df91d2;--grad-c:#c18dec}
.home-page .hero-word:first-child .hero-letter:nth-child(3){--grad-a:#f0a1d5;--grad-b:#d68dd5;--grad-c:#b88bed}
.home-page .hero-word:first-child .hero-letter:nth-child(4){--grad-a:#eba0d9;--grad-b:#cd8ee0;--grad-c:#aa84ea}
.home-page .hero-word:first-child .hero-letter:nth-child(5){--grad-a:#e5a0dc;--grad-b:#c291e7;--grad-c:#9b75de}
.home-page .hero-word-mode .hero-letter:nth-child(1){--grad-a:#e4a0df;--grad-b:#bd8de9;--grad-c:#9369d8}
.home-page .hero-word-mode .hero-letter:nth-child(2){--grad-a:#dea0e1;--grad-b:#b687e7;--grad-c:#895fd1}
.home-page .hero-word-mode .hero-letter:nth-child(3){--grad-a:#d8a0e4;--grad-b:#ae82e4;--grad-c:#8056ca}
.home-page .hero-word-mode .hero-letter:nth-child(4){--grad-a:#d3a0e6;--grad-b:#a77fe2;--grad-c:#774dc2}

/* El brillo aparece únicamente al paso de la corriente, sin crear un borde oscuro. */
.home-page .hero-letter[style*="--letter-light"]{
  filter:drop-shadow(0 0 calc(var(--letter-light) * 12px) rgba(var(--letter-rgb),calc(var(--letter-light) * .34)))!important;
}

@media(max-width:820px){
  .home-page .hero{min-height:170svh!important;padding-left:4vw!important;padding-right:4vw!important}
  .home-page .hero-copy-centered{top:9svh;min-height:82svh}
}


/* =============================================================================
   V15 — HERO POLISH + UNIFIED BLOOM LAB
============================================================================= */
.home-page .hero-copy-centered{overflow:visible!important}
.home-page .hero-wordmark{
  width:96vw!important;
  max-width:1500px!important;
  overflow:visible!important;
  line-height:.90!important;
  font-size:clamp(76px,11.8vw,210px)!important;
  padding:.10em 0!important;
  margin:18px auto 24px!important;
}
.home-page .hero-word,
.home-page .hero-letter{overflow:visible!important}
.home-page .hero-letter{
  opacity:calc(.58 + var(--letter-light) * .42)!important;
  filter:
    brightness(calc(.72 + var(--letter-light) * 1.15))
    saturate(calc(.92 + var(--letter-light) * .24))
    drop-shadow(0 0 calc(var(--letter-light) * 18px) rgba(var(--letter-rgb),calc(var(--letter-light) * .76)))
    drop-shadow(0 0 calc(var(--letter-light) * 42px) rgba(190,120,255,calc(var(--letter-light) * .40)))!important;
  transition:opacity .08s linear,filter .08s linear!important;
}
.home-page .hero-dot{align-self:center}

/* Bloom Lab shares the same dark Bloom Mode language as the home. */
body.lab-page{
  --lab-pink:244,154,212;
  --lab-lilac:198,151,255;
  --lab-purple:120,78,194;
  background:
    radial-gradient(circle at 12% 8%,rgba(239,145,210,.10),transparent 30%),
    radial-gradient(circle at 88% 18%,rgba(163,112,232,.10),transparent 28%),
    linear-gradient(180deg,#070509 0%,#0b0710 52%,#050407 100%)!important;
  color:#f7f2f9;
}
.lab-page .site-header{
  background:rgba(7,5,10,.72)!important;
  border-color:rgba(220,185,255,.09)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.32)!important;
  backdrop-filter:blur(22px) saturate(130%);
}
.lab-page .brand-gem{background:transparent!important;box-shadow:none!important;border-radius:0!important}
.lab-page .brand-copy strong{color:#f8f4fb!important}
.lab-page .brand-copy small{color:#92869a!important}
.lab-page .nav-links{background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.06)!important}
.lab-page .nav-links a{color:#9f93a7!important}
.lab-page .nav-links a:hover{color:#f0bee2!important;background:rgba(197,151,255,.07)!important}
.lab-page .header-cta{background:linear-gradient(110deg,#f0a4d6,#c39bff)!important;color:#120d18!important}
.lab-page .lab-main{padding-top:145px}
.lab-page .lab-hero{
  border-color:rgba(222,185,255,.10)!important;
  background:
    radial-gradient(circle at 16% 18%,rgba(240,154,211,.09),transparent 28%),
    radial-gradient(circle at 86% 20%,rgba(174,126,238,.08),transparent 30%),
    linear-gradient(145deg,rgba(16,11,21,.90),rgba(8,6,12,.86))!important;
  box-shadow:0 38px 110px rgba(0,0,0,.34)!important;
}
.lab-page .lab-hero h1{color:#f8f3fa!important}
.lab-page .lab-hero h1 span{
  background:linear-gradient(96deg,#f2a0d1 0%,#cc95f2 52%,#7950c5 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.lab-page .lab-hero-copy p{color:#aaa0af!important}
.lab-page .lab-hero-copy .big-cta{background:rgba(202,154,255,.09)!important;color:#f6eef9!important;border-color:rgba(213,176,255,.14)!important}
.lab-page .lab-strip span{background:rgba(255,255,255,.025)!important;border-color:rgba(209,171,255,.09)!important;color:#9d91a4!important}
.lab-page .lab-project{
  border-color:rgba(219,181,255,.09)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.30)!important;
}
.lab-page .lab-project:hover{box-shadow:0 42px 110px rgba(0,0,0,.40)!important}
.lab-page .lab-project.almazara{--lab-rgb:239,145,210;background:linear-gradient(145deg,#1a0f19,#0d0910)!important}
.lab-page .lab-project.configurator,
.lab-page .lab-project.configurator-feature{--lab-rgb:194,151,255;background:linear-gradient(145deg,#150e1c,#0c0912 72%)!important}
.lab-page .lab-project.experiments{--lab-rgb:126,82,203;background:linear-gradient(145deg,#171022,#0a0810)!important}
.lab-page .configurator-feature h2 span{
  background:linear-gradient(94deg,#f09dce 0%,#c69af7 52%,#7650c2 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.lab-page .lab-live-dot{background:#d492e6!important;box-shadow:0 0 0 5px rgba(196,151,255,.09),0 0 18px rgba(217,145,214,.40)!important}
.lab-page .configurator-switcher span{color:#807487!important;border-color:rgba(216,177,255,.10)!important;background:rgba(255,255,255,.022)!important}
.lab-page .configurator-switcher span.is-active{color:#f5eef8!important;background:rgba(200,151,255,.11)!important;border-color:rgba(220,177,255,.25)!important}
.lab-page .lab-project-bottom p{color:#aaa0af!important}
.lab-page .lab-project-type{color:#b4a7bb!important}
.lab-page .lab-project-index{color:#786d80!important}
.lab-page .lab-project-cta{border-color:rgba(218,179,255,.13)!important;background:rgba(205,153,255,.06)!important;color:#f3ebf7!important}
.lab-page .lab-arrow-large{color:rgba(220,173,255,.70)!important}
.lab-page .site-footer{background:linear-gradient(145deg,rgba(13,9,18,.96),rgba(5,4,8,.96))!important}

@media(max-width:820px){
  .home-page .hero-wordmark{font-size:clamp(66px,19.5vw,118px)!important;line-height:.86!important;width:94vw!important}
}


/* =============================================================================
   V16 — NATURAL LEAF FALL + SAFE HERO FIT
============================================================================= */
.home-page .hero-copy-centered{
  width:100%!important;
  max-width:none!important;
  padding-left:3vw!important;
  padding-right:3vw!important;
  box-sizing:border-box!important;
}
.home-page .hero-wordmark{
  width:auto!important;
  max-width:88vw!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  white-space:nowrap!important;
  font-size:clamp(66px,9.6vw,170px)!important;
  line-height:1!important;
  gap:.095em!important;
  padding:.18em .025em!important;
  margin:8px auto 16px!important;
}
.home-page .hero-word{
  flex:0 0 auto!important;
  overflow:visible!important;
}
.home-page .hero-letter,
.home-page .hero-dot{
  overflow:visible!important;
}

@media(max-width:820px){
  .home-page .hero-copy-centered{padding-left:4vw!important;padding-right:4vw!important}
  .home-page .hero-wordmark{
    width:90vw!important;
    max-width:90vw!important;
    font-size:clamp(62px,18.2vw,108px)!important;
    line-height:.96!important;
    gap:.015em!important;
    padding:.16em 0!important;
  }
}

/* Selected Work: scroll-driven perspective procession and final stack. */
.home-page #art{
  display:block;
  min-height:200svh;
  padding:0 5vw!important;
  overflow:visible;
}
.home-page #art .story-card-showcase{
  position:sticky;
  top:12svh;
  width:90vw!important;
  overflow:visible;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.home-page #art .story-card-showcase::before,
.home-page #art .story-card-showcase::after,
.home-page #art .card-grid{display:none}
.home-page #art .kinetic-projects{
  left:44%!important;
  right:0!important;
  top:5%!important;
  bottom:5%!important;
  perspective:1100px;
  opacity:1;
  transform:none;
  transition:none;
}
.home-page #art .project-screen{
  left:50%;
  top:50%;
  right:auto;
  width:clamp(125px,14vw,210px);
  height:clamp(190px,21vw,315px);
  animation:none!important;
  translate:none;
  opacity:1;
  backface-visibility:hidden;
  will-change:transform;
  box-shadow:0 24px 55px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);
}
@media(max-width:760px){
  .home-page #art{min-height:190svh;padding:0 4vw!important}
  .home-page #art .story-card-showcase{top:8svh;min-height:560px!important}
  .home-page #art .kinetic-projects{
    left:3%!important;right:3%!important;top:52%!important;bottom:0!important;
    transform:none;
  }
  .home-page #art .project-screen{width:clamp(98px,25vw,160px);height:clamp(150px,38vw,242px)}
}
@media(prefers-reduced-motion:reduce){
  .home-page #art{min-height:100svh}
  .home-page #art .story-card-showcase{position:relative;top:0}
  .home-page #art .project-screen{will-change:auto}
}
/* Elastic, interactive MOVE bubble. */
.home-page #respond .companion-motion{opacity:.92;filter:none;z-index:5}
.home-page #respond .motion-field{
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  cursor:grab;
  animation:none;
  border-color:rgba(255,255,255,.42);
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.38),transparent 21%),radial-gradient(circle at 55% 60%,rgba(194,151,255,.22),rgba(226,180,234,.09) 62%,rgba(255,255,255,.12));
  box-shadow:inset 0 0 65px rgba(241,222,255,.18),inset 0 2px 12px rgba(255,255,255,.22),0 0 50px rgba(194,151,255,.13);
  will-change:transform;
}
.home-page #respond .motion-field.is-dragging{cursor:grabbing}
.home-page #respond .motion-field:focus-visible{outline:2px solid #fff;outline-offset:8px}
.home-page #respond .motion-field strong{color:rgba(255,255,255,.88);text-shadow:0 0 26px rgba(245,228,255,.24)}
.home-page #respond .field-orbit{border-color:rgba(255,255,255,.60)}
.home-page #respond .field-orbit-b{border-color:rgba(255,255,255,.38)}
.home-page #respond .field-dot{background:#fff5ff;box-shadow:0 0 24px rgba(255,235,255,.65)}
/* Services: a scroll-driven accordion unfolding diagonally. */
.home-page .services-section{position:relative;width:100%;height:190svh;padding:0 4vw;box-sizing:border-box}
.home-page .services-sticky{position:sticky;top:0;max-width:1600px;margin:0 auto;padding:120px 0 64px;box-sizing:border-box}
.home-page .services-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:42px}
.home-page .services-heading h2{margin:0;font-size:clamp(36px,4.3vw,76px);font-weight:750;line-height:1.02;letter-spacing:-.055em;color:#faf3fc}
.home-page .services-heading h2 span{color:#c69bdd}
.home-page .services-heading>p{margin:0 0 5px;max-width:360px;color:#b7a6c4;font-size:14px;line-height:1.7}
.home-page .services-deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start;perspective:1500px}
.home-page .service-panel{position:relative;display:flex;flex-direction:column;box-sizing:border-box;min-height:310px;padding:30px 25px;margin-top:calc(var(--step) * 44px);border:1px solid rgba(var(--service-rgb),.3);border-radius:26px;background:radial-gradient(ellipse at 0 0,rgba(var(--service-rgb),.19),transparent 75%),linear-gradient(145deg,#2a1738,#171023);box-shadow:0 18px 45px #05020c33;transform-origin:top left}
.home-page .service-panel h3{margin:0 0 22px;color:#fcf6ff;font-weight:650;font-size:clamp(25px,2.3vw,42px);line-height:1.08;letter-spacing:-.055em}
.home-page .service-panel p{margin:0 0 28px;color:#c9b8d5;font-size:14px;line-height:1.6;max-width:32ch}
.home-page .service-panel a{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:auto;color:#f3d5fc;text-decoration:none;font-size:13px;font-weight:600;padding:8px 0}
.home-page .service-panel a span{font-size:22px;transition:transform .2s ease}
.home-page .service-panel a:hover span{transform:translate(3px,-3px)}
.home-page .service-panel a:focus-visible{outline:2px solid #f1b3ee;outline-offset:6px;border-radius:3px}
@media(min-width:901px) and (max-height:760px){
  .home-page .services-sticky{padding-top:95px}
  .home-page .services-heading{margin-bottom:25px}
  .home-page .services-heading h2{font-size:42px}
  .home-page .service-panel{min-height:275px;padding:24px 20px;margin-top:calc(var(--step) * 26px)}
}
@media(max-width:900px){
  .home-page .services-section{height:auto;padding:70px 5vw 90px}
  .home-page .services-sticky{position:relative;padding:0}
  .home-page .services-heading{align-items:flex-start;flex-direction:column;gap:22px;margin-bottom:35px}
  .home-page .services-deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .home-page .service-panel{margin-top:0;min-height:300px;transform:none!important}
  .home-page .service-panel:nth-child(even){margin-top:35px}
}
@media(max-width:540px){
  .home-page .services-deck{grid-template-columns:1fr}
  .home-page .service-panel,.home-page .service-panel:nth-child(even){margin-top:0;min-height:260px;padding:30px}
  .home-page .service-panel h3{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  .home-page .services-section{height:auto;padding-top:70px;padding-bottom:90px}
  .home-page .services-sticky{position:relative;padding:0}
  .home-page .service-panel{transform:none!important}
  .home-page .service-panel a span{transition:none}
}
/* Luminous miniature projects: original brand, product, motion and web concepts. */
.home-page #art .project-screen{
  width:clamp(155px,17vw,255px);height:clamp(230px,25vw,375px);
  box-sizing:border-box;padding:18px;overflow:hidden;border-radius:25px;
  display:flex;flex-direction:column;gap:12px;
  border:1px solid rgba(var(--preview-rgb),.65)!important;
  background:linear-gradient(135deg,rgba(var(--preview-rgb),.28),rgba(15,9,29,.72) 65%);
  box-shadow:inset 3px 0 0 rgba(255,255,255,.22),inset -4px 0 12px rgba(var(--preview-rgb),.22),0 0 24px rgba(var(--preview-rgb),.15),0 24px 50px #05020b66;
  color:#fff5ef;
}
.home-page #art .project-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#ffffff0b 45%,transparent 65%);border-radius:inherit}
.project-burger{--preview-rgb:255,149,75}
.project-kitchen{--preview-rgb:134,227,208}
.project-motion{--preview-rgb:248,124,214}
.project-creative{--preview-rgb:177,137,255}
.preview-top,.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;position:relative;z-index:1}
.preview-top{font-size:8px;font-weight:800;letter-spacing:.07em;white-space:nowrap}
.preview-top>span{font-size:5px;letter-spacing:.08em;opacity:.65}
.preview-bottom{margin-top:auto;font-size:8px;color:rgba(255,255,255,.75);border-top:1px solid #ffffff26;padding-top:10px}
.preview-bottom>span{font-size:17px}
.preview-title{display:block;font-size:clamp(25px,2.7vw,42px);line-height:.96;letter-spacing:-.065em;position:relative;z-index:1}
.preview-art{width:100%;min-height:0;display:block}
.burger-art{height:43%;filter:drop-shadow(0 6px 13px #fa83382b)}
.burger-title{text-align:center;font-weight:950;line-height:.8;font-size:clamp(35px,4vw,60px);color:#ffdaa0;transform:rotate(-5deg)}
.burger-title>span{display:block;font-size:6px;letter-spacing:.13em;line-height:2.8;margin-top:8px}
.kitchen-art{height:46%}
.preview-swatches{display:flex;gap:6px;align-items:center}
.preview-swatches i{width:15px;height:15px;border-radius:50%;background:#a27d60;border:1px solid #ffffff70}
.preview-swatches i:nth-child(2){background:#dad4c4}
.preview-swatches i:nth-child(3){background:#455955}
.preview-swatches>span{font-size:6px;letter-spacing:.1em;margin-left:4px;color:#d0eae1}
.motion-sculpture{display:block;position:relative;height:44%;min-height:65px;margin:7px 0}
.motion-sculpture i{position:absolute;left:17%;top:12%;width:63%;height:65%;border-radius:50%;border:2px solid #ffb5f2;background:linear-gradient(135deg,#f9baf64d,#9b60e826);box-shadow:inset 0 0 18px #ffc1f33b,0 0 15px #ed8dec35;transform:rotate(-35deg)}
.motion-sculpture i:nth-child(2){transform:rotate(30deg);width:47%;left:26%;border-color:#c3acff}
.motion-sculpture i:nth-child(3){width:24%;height:38%;top:25%;left:39%;background:radial-gradient(circle at 30% 25%,#fff0fa,#f198ec 30%,#7840c5);border:0;transform:rotate(-25deg)}
.preview-timeline{display:flex;align-items:center;justify-content:space-between;height:14px;border-bottom:1px solid #ffaee752;margin-top:6px}
.preview-timeline i{width:5px;height:5px;background:#f9c2f3;transform:translateY(7px) rotate(45deg)}
.creative-flower{position:absolute;right:-15%;top:10%;font-size:clamp(145px,17vw,245px);line-height:1;color:#c293ff66;text-shadow:0 0 26px #ad77fb55;transform:rotate(15deg)}
.project-creative .preview-title{margin-top:auto;font-size:clamp(36px,4vw,60px)}
.project-creative .preview-title em{font-family:Georgia,serif;font-weight:400;color:#e9bff6}
@media(max-width:760px){
  .home-page #art .project-screen{width:clamp(120px,31vw,185px);height:clamp(185px,46vw,280px);padding:12px;border-radius:18px;gap:7px}
  .preview-top{font-size:6px}.preview-top>span{display:none}
  .preview-title{font-size:25px}.burger-title{font-size:35px}
  .preview-bottom{font-size:6px;padding-top:6px}.preview-swatches>span{font-size:5px}
  .preview-swatches i{width:11px;height:11px}
  .project-creative .preview-title{font-size:35px}
}
/* Word masks share the title's contact-driven petal effect. */

/* First panel: the concrete offer leads; the studio line supports it. */
.home-page #shape .story-copy{right:25%!important;gap:26px}
.home-page #shape .story-copy h2{max-width:100%;font-size:clamp(34px,4.2vw,64px);line-height:1.06;letter-spacing:-.045em;text-wrap:balance}
.home-page #shape .story-copy h2 span{color:#e4b4f0}
.home-page #shape .story-foot>p{font-size:clamp(15px,1.4vw,20px);line-height:1.5;color:#c7b2cf}
@media(max-width:760px){
  .home-page #shape .story-copy{right:26px!important;padding-bottom:20vh;gap:20px}
  .home-page #shape .story-copy h2{font-size:clamp(29px,7.4vw,48px);line-height:1.08}
}
/* A living iris balances the first panel's message. */
.home-page #shape .story-copy{justify-content:center;right:40%!important;padding-bottom:0!important}
.home-page #shape .story-copy h2{font-size:clamp(31px,3.5vw,54px);line-height:1.12}
.home-page #shape .kinetic-form{left:63%!important;right:4%!important;top:0!important;bottom:0!important;display:grid;place-items:center;opacity:1;transform:none;transition:none}
.bloom-eye{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff1ff1f,transparent 38%),radial-gradient(circle,#ad69dc24 30%,#35123f1a 63%,#edb5fc26 70%,transparent 72%);box-shadow:0 0 45px #d57cf51f,inset 0 0 35px #ddb0ff19;border:1px solid #f0c5ff55}
.eye-orbit{position:absolute;inset:8%;border:1px solid #ddb2ff50;border-radius:50%;transform:rotateX(35deg) rotate(-25deg)}
.eye-iris{position:absolute;inset:21%;border-radius:50%;transform:translate(var(--gaze-x,0px),var(--gaze-y,0px));background:repeating-conic-gradient(from 15deg,#efb8ff66 0deg 2deg,transparent 2deg 9deg),radial-gradient(circle,#271334 27%,#bc73e8 29%,#df99ef 44%,#7c49b8 67%,#edc6ff 72%);box-shadow:0 0 24px #d995fc55,inset 0 0 15px #f9d5ff88;border:1px solid #f2caff88}
.eye-pupil{position:absolute;inset:31%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a1b50,#0b0614 70%);box-shadow:0 0 9px #4e236c}
.eye-glint{position:absolute;left:27%;top:24%;width:16%;height:12%;border-radius:50%;background:#fff3ff;box-shadow:0 0 13px #fff0ff99;transform:rotate(-35deg)}
.eye-satellite{position:absolute;top:12%;right:14%;width:7%;aspect-ratio:1;border-radius:50%;background:#efb1ff;box-shadow:0 0 18px #e68aff99}
@media(max-width:760px){
  .home-page #shape .story-copy{justify-content:flex-start;right:26px!important;padding-top:16px;padding-bottom:0!important}
  .home-page #shape .story-copy h2{font-size:clamp(28px,7vw,44px)}
  .home-page #shape .kinetic-form{left:0!important;right:0!important;top:56%!important;bottom:5%!important}
  .home-page #shape .bloom-eye{width:min(38vw,190px)}
}
/* Interactive faceted crystal, rendered only while it moves. */
.home-page #shape .kinetic-form{pointer-events:none}
.bloom-gem{position:relative;width:115%;aspect-ratio:1;pointer-events:auto;cursor:grab;touch-action:none;user-select:none;border-radius:28px;background:radial-gradient(ellipse,#c888ef18,transparent 65%)}
.bloom-gem.is-dragging{cursor:grabbing}
.bloom-gem:focus-visible{outline:2px solid #dca6fa;outline-offset:6px}
.gem-canvas{display:block;width:100%;height:100%}
.gem-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.2em;color:#d5b8e1;opacity:.65;pointer-events:none}
@media(max-width:760px){.home-page #shape .bloom-gem{width:min(48vw,220px)}}
/* The motion headline splits into blue / white / red with scroll. */
.home-page #respond .story-copy{right:clamp(30px,3.7vw,52px)!important;justify-content:center;gap:36px;container-type:inline-size;padding-bottom:0!important}
.home-page #respond .motion-title{font-size:clamp(20px,9.5cqw,72px);line-height:1.06;white-space:nowrap;max-width:none;letter-spacing:-.055em;padding:1.15em 0;margin:0;color:#fff6ff}
.moves-stack{position:relative;display:inline-block}
.moves-original{position:relative;z-index:1}
.moves-copy{position:absolute;inset:0;pointer-events:none;opacity:var(--moves-spread,0)}
.moves-blue{color:#65baff;transform:translateY(calc(var(--moves-spread,0) * -1.08em));text-shadow:0 0 20px #4099ef33}
.moves-red{color:#ff637b;transform:translateY(calc(var(--moves-spread,0) * 1.08em));text-shadow:0 0 20px #ff456033}
.home-page #respond .story-foot{align-items:flex-start}
@media(max-width:760px){
  .home-page #respond .story-copy{right:26px!important;justify-content:flex-start;padding-top:26px;gap:22px}
  .home-page #respond .motion-title{font-size:9.5cqw}
}
@media(prefers-reduced-motion:reduce){.moves-copy{display:none}}
/* Constant-motion gyroscope: transforms only, paused outside the viewport. */
.home-page #respond .kinetic-motion{left:73%!important;right:4%!important;top:53%!important;bottom:8%!important;display:grid;place-items:center;opacity:1;transform:none}
.bloom-fidget{width:100%;aspect-ratio:1;position:relative;perspective:650px;isolation:isolate}
.bloom-fidget::before{content:"";position:absolute;inset:-15%;border-radius:50%;background:radial-gradient(circle,#d48bf229,transparent 66%);pointer-events:none}
.fidget-axis{position:absolute;inset:5%;transform-style:preserve-3d;animation:fidget-tumble 12s linear infinite}
.fidget-ring{position:absolute;inset:0;border:7px solid #e5acfa;border-radius:50%;transform-style:preserve-3d;box-sizing:border-box;border-top-color:#fff1ff;border-left-color:#c282ee;border-bottom-color:#7040af;box-shadow:inset 0 0 8px #f0c0ff66,0 0 11px #c48af43b;animation:fidget-orbit-a 5s linear infinite}
.fidget-ring::after{content:"";position:absolute;top:7%;left:12%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#f7b5ed 30%,#914abc 85%);box-shadow:0 0 12px #f8bded66}
.fidget-ring-b{inset:13%;border-width:6px;border-color:#e795d0;border-top-color:#fff1e9;border-bottom-color:#9e438f;animation:fidget-orbit-b 6.5s linear infinite reverse}
.fidget-ring-c{inset:26%;border-width:5px;border-color:#aca1ff;border-top-color:#e7e3ff;border-bottom-color:#6551ba;animation:fidget-orbit-c 4s linear infinite}
.fidget-core{position:absolute;inset:41%;border-radius:50%;background:radial-gradient(circle at 28% 24%,#fff5ff,#edacfa 26%,#ac6adc 61%,#51307b);box-shadow:0 0 18px #e4a7ff66}
.home-page #respond .story-card:not(.is-in-view) .fidget-axis,
.home-page #respond .story-card:not(.is-in-view) .fidget-ring{animation-play-state:paused}
.home-page #respond .story-foot>p{max-width:70%}
@keyframes fidget-tumble{from{transform:rotateX(-18deg) rotateY(0deg) rotateZ(-18deg)}to{transform:rotateX(-18deg) rotateY(360deg) rotateZ(-18deg)}}
@keyframes fidget-orbit-a{from{transform:rotateX(65deg) rotateY(0deg)}to{transform:rotateX(65deg) rotateY(360deg)}}
@keyframes fidget-orbit-b{from{transform:rotateY(60deg) rotateX(0deg)}to{transform:rotateY(60deg) rotateX(360deg)}}
@keyframes fidget-orbit-c{from{transform:rotateX(-50deg) rotateY(0deg)}to{transform:rotateX(-50deg) rotateY(360deg)}}
@media(max-width:760px){
  .home-page #respond .kinetic-motion{left:54%!important;right:7%!important;top:67%!important;bottom:4%!important}
  .home-page #respond .story-foot>p{max-width:100%}
  .bloom-fidget{max-width:160px}
}
@media(prefers-reduced-motion:reduce){
  .fidget-axis,.fidget-ring{animation:none!important}
  .fidget-axis{transform:rotateZ(-20deg)}
  .fidget-ring-a{transform:rotateX(55deg)}
  .fidget-ring-b{transform:rotateY(55deg)}
  .fidget-ring-c{transform:rotateX(-35deg)}
}

/* A restrained petal silhouette for the motion panel. */
.home-page #respond .motion-silhouette{display:block;width:100%;max-height:100%;overflow:visible;transform-origin:50% 60%;animation:petal-silhouette-drift 7s ease-in-out infinite;filter:drop-shadow(0 0 9px #cf95e72b)}
.home-page #respond .story-card:not(.is-in-view) .motion-silhouette{animation-play-state:paused}
@keyframes petal-silhouette-drift{0%,100%{transform:translateY(5px) rotate(-9deg)}50%{transform:translateY(-7px) rotate(9deg)}}
@media(prefers-reduced-motion:reduce){.home-page #respond .motion-silhouette{animation:none!important;transform:rotate(-6deg)}}
/* Full-width motion panel with a responsive soap membrane. */
.home-page #respond{justify-content:center;padding-left:4vw!important;padding-right:4vw!important}
.home-page #respond .story-card-split{width:92vw!important;max-width:none!important}
.home-page #respond .story-copy{right:40%!important;justify-content:center;padding-bottom:0!important}
.home-page #respond .motion-title{font-size:clamp(24px,9.3cqw,76px)}
.home-page #respond .story-foot>p{max-width:95%}
.soap-bubble{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:36%;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;z-index:9;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.soap-bubble:focus-visible{outline:2px solid #ebbdff;outline-offset:-25px}
.soap-scene{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:760px){
  .home-page #respond .story-card-split{min-height:690px!important;height:92svh!important}
  .home-page #respond .story-copy{right:26px!important;bottom:auto!important;justify-content:flex-start;padding-top:15px;gap:15px}
  .home-page #respond .motion-title{font-size:9.3cqw}
  .soap-bubble{width:min(65%,300px);top:auto;bottom:10px;right:50%;transform:translateX(50%)}
}
/* The kitchen preview is the entry point to its configurator. */
.home-page #art a.project-kitchen{pointer-events:auto;cursor:pointer;text-decoration:none}
.home-page #art a.project-kitchen:hover{border-color:#d7fff3!important}
.home-page #art a.project-kitchen:focus-visible{outline:3px solid #d7fff3;outline-offset:5px}