/* ==========================================================================
   CÓDIGO FORTUNA — tema.css  (ÚNICO archivo para cambiar paleta y efectos)
   Se carga el último en todas las páginas y manda sobre app.css / index.css.
   1) Variables de color y tipografía (:root)  2) Capa de gemas y efectos
   Proporciones objetivo: negro 30 · dorado 25 · blanco 10 · cada gema 7
   ========================================================================== */

/* ---- 1) Variables ---- */
/* Código Fortuna — paleta y tipografía compartidas por todas las páginas
   Proporciones objetivo: negro 30 · dorado 25 (acompañante) · blanco 10 · esmeralda/rubí/zafiro/amatista/granate 7 c/u */
:root{
  --black:#101012;--gold-base:#D4AF70;--white:#F5F2EC;
  --esmeralda:#087F62;--rubi:#A51F3D;--zafiro:#194A9B;--amatista:#7541A0;--granate:#792D42;
  --esmeralda-l:#4CC9A5;--rubi-l:#E0728A;--zafiro-l:#7BA3EA;--amatista-l:#B48FD9;--granate-l:#C98095;
  --gold-l:#EBD6AA;--gold-d:#A98648;
  --text:#F5F2EC;--green:#4CC9A5;--bg:#101012;--panel:#18181b;--panel2:#212125;
  --gold:#D4AF70;--gold2:#A98648;--line:#3b3a48;--border:#4a4860;--line-soft:#2c2c31;
  --muted:#B9B5AD;
  --font-body:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-display:Georgia,serif;
}

/* ---- 2) Gemas y efectos ---- */
/* Código Fortuna — capa de gemas: reparte esmeralda, rubí, zafiro, amatista y granate como acentos (~6% c/u) */
:root{--gem:var(--esmeralda);--gem-l:var(--esmeralda-l)}
.g-esm{--gem:var(--esmeralda);--gem-l:var(--esmeralda-l)}.g-rub{--gem:var(--rubi);--gem-l:var(--rubi-l)}
.g-zaf{--gem:var(--zafiro);--gem-l:var(--zafiro-l)}.g-ama{--gem:var(--amatista);--gem-l:var(--amatista-l)}
.g-gra{--gem:var(--granate);--gem-l:var(--granate-l)}
/* Planes (portada) */
#planCards .plan:nth-child(1){--gem:var(--esmeralda);--gem-l:var(--esmeralda-l)}
#planCards .plan:nth-child(2){--gem:var(--zafiro);--gem-l:var(--zafiro-l)}
#planCards .plan:nth-child(3){--gem:var(--amatista);--gem-l:var(--amatista-l)}
#planCards .plan:nth-child(4){--gem:var(--rubi);--gem-l:var(--rubi-l)}
#planCards .plan{background:linear-gradient(160deg,color-mix(in srgb,var(--gem) 55%,#101012),#101012 72%);border-color:color-mix(in srgb,var(--gem-l) 55%,#101012);border-top:3px solid var(--gem-l)}
#planCards .plan .eyebrow,#planCards .plan li:before{color:var(--gem-l)}
#planCards .plan .btn.soft{border-color:var(--gem-l);color:var(--white)}
#planCards .plan.popular{box-shadow:0 0 45px color-mix(in srgb,var(--gem) 40%,transparent)}
#planCards .plan.popular:before{color:var(--gem-l)}
/* Funciones */
.cf-visual-feature:nth-of-type(1){--gem:var(--esmeralda);--gem-l:var(--esmeralda-l)}
.cf-visual-feature:nth-of-type(2){--gem:var(--zafiro);--gem-l:var(--zafiro-l)}
.cf-visual-feature:nth-of-type(3){--gem:var(--granate);--gem-l:var(--granate-l)}
.cf-visual-feature{background:linear-gradient(135deg,color-mix(in srgb,var(--gem) 38%,#101012),#101012 70%);border-color:color-mix(in srgb,var(--gem-l) 50%,#101012);border-left:5px solid var(--gem-l)}
.cf-visual-feature .cf-label{color:var(--gem-l)}
/* Portada: chips, consola de límites, pasos */
.chip-left{border-color:var(--esmeralda-l);background:color-mix(in srgb,var(--esmeralda) 45%,#101012)}.chip-left span{color:var(--esmeralda-l)}
.chip-right{border-color:var(--rubi-l);background:color-mix(in srgb,var(--rubi) 45%,#101012)}.chip-right span{color:var(--rubi-l)}
.hands-float-a{background:color-mix(in srgb,var(--zafiro) 50%,#101012);border-color:var(--zafiro-l)}
.hands-float-b{background:color-mix(in srgb,var(--amatista) 50%,#101012);border-color:var(--amatista-l)}
.limits-console{background:linear-gradient(135deg,color-mix(in srgb,var(--granate) 42%,#101012),#101012 75%);border-color:var(--granate-l)}
.limit-feedback{background:color-mix(in srgb,var(--esmeralda) 40%,#101012);color:var(--esmeralda-l)!important}
.demo-grid .panel:first-child{border-top:3px solid var(--zafiro-l)}.demo-grid .panel:last-child{border-top:3px solid var(--amatista-l)}
.tag,.console-tag{border-color:var(--gold)}
/* Preguntas frecuentes: oscuras con halos de gemas; la pregunta abierta se vuelve crema (blanco) */
section#faq{background:radial-gradient(ellipse 60% 55% at 50% 0,color-mix(in srgb,var(--zafiro) 30%,transparent),transparent 72%),radial-gradient(ellipse 50% 50% at 92% 100%,color-mix(in srgb,var(--granate) 34%,transparent),transparent 70%),#101012!important;color:var(--white)}
#faq .section-sub,#faq details p{color:var(--muted)}
#faq details{background:color-mix(in srgb,var(--amatista) 18%,#101012);border:1px solid color-mix(in srgb,var(--amatista-l) 45%,#101012)}
#faq details summary{color:var(--white)}
#faq details:not([open]) summary:hover{color:var(--amatista-l)}
#faq details[open]{background:var(--white);border-color:var(--gold);box-shadow:0 10px 34px color-mix(in srgb,var(--amatista) 45%,transparent)}
#faq details[open] summary{color:var(--black)}#faq details[open] p{color:#4b4943}
/* Registro: sección dorada (30%) */
.signup-section{background:linear-gradient(135deg,#EBD6AA,#D4AF70 55%,#B8935A)}
.signup-shell{background:linear-gradient(125deg,#e3c88f,#D4AF70);border-color:#101012;box-shadow:0 30px 70px #10101255}
.signup-copy h2,.signup-copy p{color:var(--black)}.signup-copy h2 em{color:var(--granate)}
.signup-section .eyebrow{color:var(--granate)}.signup-checks{color:var(--black);font-weight:700}
.signup-action{background:var(--black);border-color:var(--black);color:var(--white)}.signup-action p{color:var(--muted)}
.signup-action .signup-btn{background:linear-gradient(120deg,#EBD6AA,#D4AF70);color:var(--black)}
.signup-action>a:last-child{color:var(--gold)}
.cta{background:radial-gradient(ellipse at 50% 50%,#D4AF7040,transparent 67%),#101012}
/* Panel (dashboard) */
.stat:nth-child(1){--gem:var(--esmeralda);--gem-l:var(--esmeralda-l)}.stat:nth-child(2){--gem:var(--zafiro);--gem-l:var(--zafiro-l)}
.stat:nth-child(3){--gem:var(--amatista);--gem-l:var(--amatista-l)}.stat:nth-child(4){--gem:var(--rubi);--gem-l:var(--rubi-l)}
.stat{background:linear-gradient(140deg,color-mix(in srgb,var(--gem) 48%,#101012),#101012 85%);border-color:color-mix(in srgb,var(--gem-l) 55%,#101012);border-top:3px solid var(--gem-l)}
.stat small,.stat span{color:var(--gem-l)}.stat strong{color:var(--white)}
.action-card:nth-child(1){--gem:var(--zafiro);--gem-l:var(--zafiro-l)}.action-card:nth-child(2){--gem:var(--esmeralda);--gem-l:var(--esmeralda-l)}
.action-card:nth-child(3){--gem:var(--granate);--gem-l:var(--granate-l)}
.action-card{background:linear-gradient(150deg,color-mix(in srgb,var(--gem) 40%,#101012),#101012 80%);border-color:color-mix(in srgb,var(--gem-l) 50%,#101012)}
.action-card .symbol{color:var(--gem-l)}
.plan-card:nth-child(1){--gem:var(--esmeralda)}.plan-card:nth-child(2){--gem:var(--zafiro)}.plan-card:nth-child(3){--gem:var(--amatista)}.plan-card:nth-child(4){--gem:var(--rubi)}
.plan-card{background:linear-gradient(160deg,color-mix(in srgb,var(--gem) 45%,#101012),#101012 80%)}
.demo-badge{border-color:var(--granate-l);color:var(--granate-l)}
.sidebar{background:#0c0c0e}.nav-link:hover,.nav-link.active{background:color-mix(in srgb,var(--zafiro) 45%,#101012);border-color:var(--zafiro-l);color:var(--white)}
.side-plan{background:linear-gradient(135deg,color-mix(in srgb,var(--amatista) 50%,#101012),#101012)}

/* ===== Capa 2: el dorado acompaña, las gemas protagonizan (dorado 25 · gemas 7 c/u) ===== */
:root{--gem-all:linear-gradient(90deg,var(--esmeralda-l),var(--zafiro-l),var(--amatista-l),var(--rubi-l),var(--granate-l))}
/* Brillo de faceta al pasar el cursor */
.plan,.stat,.action-card,.cf-visual-feature,.plan-card{position:relative;overflow:hidden}
.plan:after,.stat:after,.action-card:after,.cf-visual-feature:after,.plan-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--gem-l,#fff) 30%,transparent) 50%,transparent 65%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
.plan:hover:after,.stat:hover:after,.action-card:hover:after,.cf-visual-feature:hover:after,.plan-card:hover:after{transform:translateX(130%)}
.plan:hover,.stat:hover,.cf-visual-feature:hover{box-shadow:0 18px 50px color-mix(in srgb,var(--gem) 55%,transparent),0 0 0 1px var(--gem-l)}
/* Títulos, progreso y separadores multigema */
.section-title:after{height:3px;width:120px;background:var(--gem-all)!important}
.scroll-progress{background:var(--gem-all)!important;box-shadow:0 0 16px var(--amatista)!important}
section:after{background:var(--gem-all)!important;opacity:.35}
.hero h1 em{background:linear-gradient(95deg,var(--gold),var(--esmeralda-l),var(--zafiro-l),var(--amatista-l),var(--rubi-l),var(--gold));background-size:260% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
.links a:hover,.foot-links a:hover{color:var(--esmeralda-l)}
a:focus-visible,.btn:focus-visible,select:focus-visible,summary:focus-visible{outline-color:var(--amatista-l)!important}
.hero .eyebrow{color:var(--esmeralda-l);border-color:var(--esmeralda);background:color-mix(in srgb,var(--esmeralda) 28%,transparent)}
#demo>.wrap>.eyebrow{color:var(--zafiro-l)}#planes .wrap>.eyebrow{color:var(--amatista-l)}
.signup-section .eyebrow{color:var(--rubi-l)}
.price,.plan-card .price{color:var(--white)}
.proof b{color:var(--gem-all-c,var(--esmeralda-l))}.proof span:nth-child(2) b{color:var(--zafiro-l)}.proof span:nth-child(3) b{color:var(--rubi-l)}
.btn.soft:hover{border-color:var(--amatista-l);box-shadow:0 8px 28px color-mix(in srgb,var(--amatista) 55%,transparent)}
.btn.primary{box-shadow:0 4px 26px color-mix(in srgb,var(--rubi) 45%,transparent)}
/* Barras y bolas: ciclo de gemas */
.bars .bar:nth-child(5n+2),.chart .bar-col:nth-child(5n+1) .bar,.phone-chart i:nth-child(5n+1){--gem:var(--esmeralda);--gem-l:var(--esmeralda-l)}
.bars .bar:nth-child(5n+3),.chart .bar-col:nth-child(5n+2) .bar,.phone-chart i:nth-child(5n+2){--gem:var(--zafiro);--gem-l:var(--zafiro-l)}
.bars .bar:nth-child(5n+4),.chart .bar-col:nth-child(5n+3) .bar,.phone-chart i:nth-child(5n+3){--gem:var(--amatista);--gem-l:var(--amatista-l)}
.bars .bar:nth-child(5n+5),.chart .bar-col:nth-child(5n+4) .bar,.phone-chart i:nth-child(5n+4){--gem:var(--rubi);--gem-l:var(--rubi-l)}
.bars .bar:nth-child(5n+1),.chart .bar-col:nth-child(5n+5) .bar,.phone-chart i:nth-child(5n+5){--gem:var(--granate);--gem-l:var(--granate-l)}
.bars .bar,.chart .bar,.phone-chart i{background:linear-gradient(var(--gem-l),var(--gem))!important;box-shadow:0 -4px 22px color-mix(in srgb,var(--gem-l) 45%,transparent)}
.num:nth-child(1),.number-ball:nth-child(5n+1){--gem:var(--esmeralda);--gem-l:var(--esmeralda-l)}
.num:nth-child(2),.number-ball:nth-child(5n+2){--gem:var(--zafiro);--gem-l:var(--zafiro-l)}
.num:nth-child(3),.number-ball:nth-child(5n+3){--gem:var(--amatista);--gem-l:var(--amatista-l)}
.number-ball:nth-child(5n+4){--gem:var(--rubi);--gem-l:var(--rubi-l)}.number-ball:nth-child(5n+5){--gem:var(--granate);--gem-l:var(--granate-l)}
.num{border-color:var(--gem-l);box-shadow:0 0 18px color-mix(in srgb,var(--gem) 50%,transparent)}.num strong{color:var(--gem-l)}
.number-ball{background:radial-gradient(circle at 30% 22%,#fff,var(--gem-l) 38%,var(--gem) 78%);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--gem) 60%,transparent),inset 0 -6px 12px #0006}
.hands-points>div:nth-child(1) b{color:var(--esmeralda-l)}.hands-points>div:nth-child(2) b{color:var(--zafiro-l)}.hands-points>div:nth-child(3) b{color:var(--amatista-l)}
.limit-track div{background:linear-gradient(90deg,var(--esmeralda),var(--zafiro),var(--amatista))}
.progress-fill{background:linear-gradient(90deg,var(--zafiro),var(--amatista),var(--rubi))}
/* Fondos: halos de gemas detrás de cada sección */
#demo{background:radial-gradient(ellipse 55% 45% at 8% 20%,color-mix(in srgb,var(--esmeralda) 30%,transparent),transparent 70%),radial-gradient(ellipse 55% 45% at 95% 85%,color-mix(in srgb,var(--amatista) 28%,transparent),transparent 70%)}
.hands-section,#funciona{background:radial-gradient(ellipse 50% 50% at 12% 30%,color-mix(in srgb,var(--zafiro) 38%,transparent),transparent 70%),radial-gradient(ellipse 45% 50% at 90% 75%,color-mix(in srgb,var(--rubi) 30%,transparent),transparent 70%),#101012}
#funciones{background:radial-gradient(ellipse 60% 45% at 50% 0,color-mix(in srgb,var(--esmeralda) 28%,transparent),transparent 72%)}
.limits-section{background:radial-gradient(ellipse 50% 55% at 85% 20%,color-mix(in srgb,var(--granate) 42%,transparent),transparent 70%),radial-gradient(ellipse 45% 50% at 10% 85%,color-mix(in srgb,var(--esmeralda) 26%,transparent),transparent 70%),#101012}
#planes{background:radial-gradient(ellipse 70% 40% at 50% 100%,color-mix(in srgb,var(--amatista) 34%,transparent),transparent 72%),#101012!important}
#confianza{background:radial-gradient(ellipse 60% 50% at 20% 100%,color-mix(in srgb,var(--zafiro) 34%,transparent),transparent 72%),radial-gradient(ellipse 50% 45% at 95% 10%,color-mix(in srgb,var(--rubi) 24%,transparent),transparent 70%)}
.hero:before{border-color:var(--amatista-l);box-shadow:0 0 0 75px color-mix(in srgb,var(--zafiro) 10%,transparent),0 0 0 150px color-mix(in srgb,var(--rubi) 7%,transparent)}
/* Registro: pasa de dorado a gemas; el dorado queda en el botón y los detalles */
.signup-section{background:radial-gradient(ellipse 55% 60% at 15% 30%,var(--granate),transparent 70%),radial-gradient(ellipse 55% 60% at 85% 70%,var(--zafiro),transparent 70%),radial-gradient(ellipse 50% 50% at 50% 50%,var(--amatista),transparent 75%),#101012}
.signup-shell{background:linear-gradient(125deg,#101012f2,#18141f);background:linear-gradient(125deg,#101012f2,#17131fe6);border:1px solid var(--amatista-l);box-shadow:0 30px 80px color-mix(in srgb,var(--amatista) 55%,transparent)}
.signup-copy h2,.signup-copy p{color:var(--white)}.signup-copy h2 em{color:var(--gold)}
.signup-checks{color:var(--esmeralda-l)}.signup-checks span:nth-child(2){color:var(--zafiro-l)}.signup-checks span:nth-child(3){color:var(--rubi-l)}
.signup-action{background:color-mix(in srgb,var(--zafiro) 28%,#101012);border-color:var(--zafiro-l)}
.signup-orb{background:radial-gradient(circle at 25% 20%,#fff,var(--rubi-l) 35%,var(--rubi) 80%);color:#fff;box-shadow:0 0 34px color-mix(in srgb,var(--rubi) 70%,transparent)}
/* Panel interno */
.topbar{border-bottom:2px solid transparent;border-image:var(--gem-all) 1}
.avatar{background:var(--amatista);color:var(--white)}
@media(prefers-reduced-motion:reduce){.plan:after,.stat:after,.action-card:after,.cf-visual-feature:after,.plan-card:after{display:none}}