/* IKIGAI Studio · hero «De la columna a la memoria» — LOGOS 2026-10-30 */
#columna{position:relative;height:1180vh;background:
  radial-gradient(120% 70% at 70% 20%,rgba(27,168,154,.10),transparent 60%),
  radial-gradient(90% 60% at 20% 80%,rgba(201,162,75,.07),transparent 60%),#040912;color:#eaf2f8}
#columna .cx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#columna canvas.cx-gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s ease}
#columna.cx-live canvas.cx-gl{opacity:1}
#columna .cx-vig{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 90% at 60% 50%,transparent 55%,rgba(2,5,10,.75)),
  linear-gradient(90deg,rgba(4,9,18,.72),rgba(4,9,18,0) 46%)}
#columna .cx-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cxgrain 1.2s steps(4) infinite}
@keyframes cxgrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* tarjetas de escena */
#columna .cx-cards{position:absolute;left:clamp(18px,5vw,72px);top:90px;bottom:40px;width:min(470px,40vw);z-index:3;display:grid;align-content:center}
#columna .cx-card{grid-area:1/1;position:relative;width:100%;opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .7s ease;pointer-events:none}
#columna .cx-card.on{opacity:1;transform:none;filter:none;pointer-events:auto}
#columna .cx-k{display:inline-flex;align-items:center;gap:10px;font:700 .68rem/1 Inter,system-ui,sans-serif;letter-spacing:.28em;
  text-transform:uppercase;color:#39e6d0;margin-bottom:16px}
#columna .cx-k::before{content:"";width:30px;height:1px;background:currentColor;box-shadow:0 0 10px currentColor}
#columna .cx-card.gold .cx-k{color:#efd28f}
#columna .cx-n{font:500 .8rem/1 "Cormorant Garamond",Georgia,serif;color:rgba(234,242,248,.45);letter-spacing:.12em;margin-left:auto}
#columna h1,#columna .cx-t{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1.02;letter-spacing:-.015em;
  font-size:clamp(2.3rem,4.6vw,4.1rem);margin:0 0 16px;text-shadow:0 4px 40px rgba(0,0,0,.6)}
#columna .cx-t em,#columna h1 em{font-style:italic;color:#39e6d0}
#columna .cx-card.gold .cx-t em{color:#efd28f}
#columna .cx-p{font:400 1.02rem/1.62 Inter,system-ui,sans-serif;color:rgba(234,242,248,.78);max-width:46ch;text-shadow:0 2px 18px rgba(0,0,0,.7)}
#columna .cx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
#columna .cx-chips i{font:600 .72rem/1 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.04em;padding:7px 11px;border-radius:999px;
  border:1px solid rgba(57,230,208,.28);background:rgba(8,22,34,.55);color:#bfeee6;backdrop-filter:blur(8px)}
#columna .cx-card.gold .cx-chips i{border-color:rgba(239,210,143,.35);color:#f3e2b5}
#columna .cx-go{display:inline-flex;margin-top:20px;font:700 .86rem/1 Inter,system-ui,sans-serif;color:#efd28f;text-decoration:none;
  border-bottom:1px solid rgba(239,210,143,.4);padding-bottom:4px}
#columna .cx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
#columna .cx-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font:700 .92rem/1 Inter,system-ui,sans-serif;
  text-decoration:none;transition:transform .25s,box-shadow .25s}
#columna .cx-btn.p{background:linear-gradient(135deg,#1BA89A,#0e7d72);color:#fff;box-shadow:0 10px 30px rgba(27,168,154,.45)}
#columna .cx-btn.g{border:1px solid rgba(234,242,248,.25);color:#eaf2f8;background:rgba(8,16,28,.5);backdrop-filter:blur(8px)}
#columna .cx-btn:hover{transform:translateY(-2px)}

/* riel de escenas (derecha) */
#columna .cx-rail{position:absolute;right:clamp(10px,2.4vw,34px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:4}
#columna .cx-rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:16px}
#columna .cx-rail button span{font:600 .64rem/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,242,248,.0);
  transition:color .35s;white-space:nowrap}
#columna .cx-rail button::after{content:"";width:7px;height:7px;border-radius:50%;border:1px solid rgba(234,242,248,.35);transition:.35s}
#columna .cx-rail button.past::after{background:rgba(57,230,208,.45);border-color:transparent}
#columna .cx-rail button.on::after{background:#39e6d0;border-color:#39e6d0;box-shadow:0 0 12px #39e6d0;transform:scale(1.5)}
#columna .cx-rail button.on span,#columna .cx-rail:hover button span{color:rgba(234,242,248,.8)}
#columna .cx-rail .sep{height:1px;width:14px;align-self:flex-end;background:rgba(234,242,248,.2);margin:3px 0}

/* hilo conductor tarjeta → vértebra */
#columna .cx-lead{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:0;transition:opacity .5s}
#columna .cx-lead line{stroke:rgba(57,230,208,.55);stroke-width:1;stroke-dasharray:3 5}
#columna .cx-lead circle{fill:#39e6d0;filter:drop-shadow(0 0 6px #39e6d0)}
#columna[data-scene="fiscal"] .cx-lead line{stroke:rgba(239,210,143,.6)}
#columna[data-scene="fiscal"] .cx-lead circle{fill:#efd28f}

/* barra de progreso y pista inicial */
#columna .cx-bar{position:absolute;left:0;bottom:0;height:2px;width:calc(var(--cx-p,0)*100%);background:linear-gradient(90deg,#1BA89A,#efd28f);z-index:4}
#columna .cx-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:600 .7rem/1 Inter,system-ui,sans-serif;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(234,242,248,.55);z-index:4;transition:opacity .6s;display:flex;flex-direction:column;align-items:center;gap:10px}
#columna .cx-hint::after{content:"";width:1px;height:38px;background:linear-gradient(#39e6d0,transparent);animation:cxdrop 1.8s ease-in-out infinite}
@keyframes cxdrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
#columna:not([data-scene="intro"]) .cx-hint{opacity:0}
#columna .cx-tag{position:absolute;right:clamp(14px,2.4vw,34px);bottom:22px;z-index:4;font:600 .6rem/1.4 Inter,system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(234,242,248,.38);text-align:right}

/* móvil: tarjeta abajo, sin hilo */
@media (max-width:760px){
  #columna{height:1080vh}
  #columna .cx-vig{background:radial-gradient(120% 80% at 50% 35%,transparent 45%,rgba(2,5,10,.8)),linear-gradient(0deg,rgba(4,9,18,.95) 8%,rgba(4,9,18,0) 52%)}
  #columna .cx-cards{left:18px;right:18px;width:auto;top:auto;bottom:max(22px,env(safe-area-inset-bottom));align-content:end}
  #columna h1,#columna .cx-t{font-size:clamp(2rem,9vw,2.6rem)}
  #columna .cx-p{font-size:.95rem}
  #columna .cx-rail{top:96px;transform:none;gap:6px}
  #columna .cx-rail button span{display:none}
  #columna .cx-lead,#columna .cx-tag{display:none}
}

/* modo estático (sin WebGL o movimiento reducido): lista legible */
#columna.cx-static{height:auto}
#columna.cx-static .cx-stage{position:relative;height:auto;padding:130px 0 60px}
#columna.cx-static canvas.cx-gl,#columna.cx-static .cx-rail,#columna.cx-static .cx-lead,#columna.cx-static .cx-hint,#columna.cx-static .cx-bar,#columna.cx-static .cx-grain{display:none}
#columna.cx-static .cx-cards{position:relative;left:auto;top:auto;bottom:auto;transform:none;width:min(1100px,92vw);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px}
#columna.cx-static .cx-card{grid-area:auto;position:relative;opacity:1;transform:none;filter:none;pointer-events:auto}
#columna.cx-static .cx-card:last-child{grid-column:1/-1;order:-1}
#columna.cx-static .cx-t{font-size:1.9rem}

/* fundido del hero (siempre oscuro: es la escena) al tono del sitio al terminar la columna */
#columna::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;z-index:6;pointer-events:none;background:linear-gradient(to bottom,rgba(245,246,250,0),var(--bg,#F5F6FA))}
html:not([data-theme="light"]) #columna::after{background:linear-gradient(to bottom,rgba(4,9,18,0),#040912)}
#columna.cx-static::after{display:none}

/* tarjeta de apertura: la leyenda icónica de IKIGAI, más ancha y más grande */
#columna .cx-card.intro .cx-t{font-size:clamp(2.6rem,5.4vw,5rem);max-width:14ch;margin-bottom:22px}
#columna .cx-card.intro .cx-t em{display:block;font-size:.58em;line-height:1.12;margin-top:.22em;color:#39e6d0;font-style:italic;font-weight:500}
#columna .cx-card.intro .cx-p{font-size:1.14rem;max-width:52ch;color:rgba(234,242,248,.84)}
#columna .cx-card.intro .cx-lead-txt{display:block;margin-top:22px;font:600 .78rem/1.5 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(234,242,248,.5)}
@media (min-width:1200px){#columna .cx-cards:has(.cx-card.intro.on){width:min(560px,46vw)}}
@media (max-width:760px){#columna .cx-card.intro .cx-t{font-size:clamp(2.1rem,9.5vw,2.8rem)}#columna .cx-card.intro .cx-p{font-size:1rem}}

@media (max-width:760px){
  #columna .cx-card.intro .cx-long{display:none}
  #columna .cx-card.intro .cx-k{font-size:.6rem;letter-spacing:.2em}
  #columna .cx-cards{bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px))}
  #columna .cx-card.intro .cx-lead-txt{display:none}
}