/* ═══════════════════════════════════════════════════════════════════ LA ÚLTIMA PISTA — V2 — High-Voltage Editorial × Cryptographic Thriller Fuentes requeridas en : ═══════════════════════════════════════════════════════════════════ */ /* ── RESET ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} img,video,svg{display:block;max-width:100%} ul,ol{list-style:none} button{cursor:pointer;font:inherit;border:none;background:none} input,textarea,select{font:inherit;outline:none} a{text-decoration:none} [hidden]{display:none!important} /* ── CUSTOM PROPERTIES ── */ :root{ /* Core palette */ --void: #030305; --pit: #08080e; --cave: #0e0e18; --slab: #161622; --border: rgba(232,180,48,.14); --border2: rgba(255,255,255,.05); --amber: #e8b430; --amber-lt: #f5cc6a; --amber-dk: #b88820; --amber-bg: rgba(232,180,48,.07); --crimsn: #ff2d55; --ok: #00e096; --ok-bg: rgba(0,224,150,.07); --ok-border:rgba(0,224,150,.28); --bad: #ff2d55; --bad-bg: rgba(255,45,85,.07); --bad-border:rgba(255,45,85,.3); --paper: #f5f0e8; --muted: #8a8798; --soft: #686475; /* Typography */ --display: 'Bebas Neue', 'Arial Narrow', sans-serif; --mono: 'DM Mono', ui-monospace, monospace; --serif: 'Instrument Serif', Georgia, serif; /* Spacing */ --r: 4px; --r2: 8px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.8),0 2px 8px rgba(0,0,0,.6); --shadow-md: 0 4px 32px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.6); --glow-amber:0 0 40px rgba(232,180,48,.15),0 0 80px rgba(232,180,48,.06); } /* ── GLOBAL ── */ html{ scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; cursor:none; } body{ background:var(--void); color:var(--paper); font-family:var(--serif); font-weight:400; line-height:1.65; overflow-x:hidden; min-height:100svh; } /* ── CUSTOM CURSOR ── */ .cursor{ position:fixed; width:8px;height:8px; border-radius:50%; background:var(--amber); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:transform .12s ease,width .2s ease,height .2s ease,background .2s ease; mix-blend-mode:difference; } .cursor-ring{ position:fixed; width:32px;height:32px; border-radius:50%; border:1px solid rgba(232,180,48,.5); pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform .18s ease,width .25s ease,height .25s ease,border-color .2s ease; } body:hover .cursor{opacity:1} a:hover ~ .cursor, button:hover ~ .cursor{width:16px;height:16px} /* ── GRAIN OVERLAY ── */ body::before{ content:''; position:fixed;inset:0;z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); background-size:200px 200px; } /* ── SCANLINES ── */ .scanlines::after{ content:''; position:absolute;inset:0;z-index:2; pointer-events:none; background:repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,.06) 2px, rgba(0,0,0,.06) 4px ); } /* ── TYPOGRAPHY ── */ h1,h2,h3{ font-family:var(--display); line-height:.96; letter-spacing:.02em; text-transform:uppercase; color:var(--paper); } h1{font-size:clamp(5rem,13vw,13rem);font-weight:400} h2{font-size:clamp(3rem,7vw,8rem);font-weight:400} h3{font-size:clamp(1.8rem,3.5vw,4rem);font-weight:400} h4{ font-family:var(--mono);font-size:.65rem; letter-spacing:.22em;text-transform:uppercase;color:var(--muted); } p{ font-family:var(--serif);line-height:1.8;color:rgba(245,240,232,.72); font-size:1rem; } p.lead{font-size:1.1rem;color:rgba(245,240,232,.7);line-height:1.9} a{color:var(--amber);transition:color .18s} a:hover{color:var(--amber-lt)} strong{color:var(--paper);font-weight:700} em{font-style:italic;color:var(--amber-lt)} /* ── UTILITIES ── */ .display {font-family:var(--display);text-transform:uppercase;letter-spacing:.02em} .mono {font-family:var(--mono)} .serif {font-family:var(--serif)} .amber {color:var(--amber)} .paper {color:var(--paper)} .muted {color:var(--muted)} .z1 {position:relative;z-index:1} .center {text-align:center} .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* ── ACCENT LINE ── */ .accent-line{ display:inline-flex;align-items:center;gap:.85rem; font-family:var(--mono);font-size:.6rem; letter-spacing:.25em;text-transform:uppercase; color:var(--amber);margin-bottom:1rem; } .accent-line::before{ content:'';width:48px;height:1px; background:linear-gradient(90deg,var(--amber),transparent); flex-shrink:0; } .accent-line::after{ content:'';width:6px;height:6px; border-radius:50%;background:var(--amber); flex-shrink:0; box-shadow:0 0 8px var(--amber); } /* ── LAYOUT ── */ .wrap{ max-width:1280px;margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem); position:relative;z-index:1; } .section{padding:clamp(5rem,10vw,12rem) 0;position:relative} .section+.section::before{ content:''; position:absolute;top:0;left:clamp(1.5rem,5vw,4rem);right:clamp(1.5rem,5vw,4rem); height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); } .section--dark{background:var(--pit)} .section--slab{background:var(--cave)} .section__head{margin-bottom:4rem} .section__head--wide{max-width:none} /* oversized bg number */ .section__bg-num{ position:absolute;top:-.15em;right:-.02em; font-family:var(--display);font-size:clamp(12rem,25vw,28rem); color:rgba(255,255,255,.018); letter-spacing:.02em;text-transform:uppercase; pointer-events:none;user-select:none;line-height:1; z-index:0; } /* grids */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem} /* ── NAV ── */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; padding:1.5rem 0; transition:background .4s,padding .35s,border-color .4s; border-bottom:1px solid transparent; } .nav.is-scrolled{ background:rgba(3,3,5,.96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); padding:1rem 0; border-color:var(--border); } .nav__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem} .nav__logo{ font-family:var(--display);font-size:1.5rem; letter-spacing:.06em;text-transform:uppercase; color:var(--paper);white-space:nowrap; line-height:1; } .nav__logo .mark{color:var(--amber)} .nav__links{display:flex;align-items:center;gap:2rem} .nav__links a{ font-family:var(--mono);font-size:.62rem; letter-spacing:.2em;text-transform:uppercase; color:var(--muted);transition:color .18s; position:relative; } .nav__links a::after{ content:''; position:absolute;bottom:-.3em;left:0;width:0;height:1px; background:var(--amber);transition:width .2s ease; } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after{width:100%} .nav__links a:hover, .nav__links a[aria-current="page"]{color:var(--paper)} .nav__links a[aria-current="page"]{color:var(--amber)} .nav__burger{display:none;color:var(--paper);font-size:1.4rem} /* ── NAV MOBILE MENU ── */ .nav__mobile{ position:fixed;inset:0;z-index:200; background:rgba(3,3,5,.97); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1.5rem; transform:translateX(100%); transition:transform .4s cubic-bezier(.77,0,.18,1); } .nav__mobile.is-open{transform:none} .nav__mobile a{ font-family:var(--display);font-size:clamp(2.5rem,7vw,5rem); color:var(--paper);letter-spacing:.06em;text-transform:uppercase; transition:color .18s;line-height:1; } .nav__mobile a:hover{color:var(--amber)} .nav__close{ position:absolute;top:2rem;right:2rem; font-family:var(--mono);font-size:1.2rem; color:var(--muted);transition:color .18s; } .nav__close:hover{color:var(--paper)} /* ── BUTTONS ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase; padding:.9rem 2.2rem; border:1px solid transparent; transition:all .22s;white-space:nowrap;line-height:1; position:relative;overflow:hidden; } /* Primary: solid amber */ .btn--primary{ background:var(--amber);color:var(--void); border-color:var(--amber); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); } .btn--primary::after{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15),transparent); opacity:0;transition:opacity .2s; } .btn--primary:hover{background:var(--amber-lt);border-color:var(--amber-lt)} .btn--primary:hover::after{opacity:1} /* Ghost: amber outline */ .btn--ghost{ background:transparent;color:var(--paper); border-color:rgba(232,180,48,.35); clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); } .btn--ghost:hover{border-color:var(--amber);color:var(--amber)} .btn--ghost-dim{ background:transparent;color:var(--muted); border:1px solid rgba(255,255,255,.08); } .btn--ghost-dim:hover{border-color:var(--border);color:var(--paper)} .btn--danger{color:var(--bad);border-color:rgba(255,45,85,.3)} .btn--danger:hover{border-color:var(--bad)} .btn--sm{padding:.55rem 1.25rem;font-size:.58rem} .btn--lg{padding:1.15rem 3rem;font-size:.72rem} .btn--full{width:100%;display:flex} .btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none} /* ── CARDS ── */ .card{ background:var(--cave); border:1px solid var(--border2); padding:2rem; transition:border-color .25s,transform .3s; position:relative;overflow:hidden; } .card::before{ content:''; position:absolute;top:0;left:0;width:3px;height:0; background:linear-gradient(180deg,var(--amber),transparent); transition:height .4s ease; } .card:hover::before{height:100%} .card:hover{border-color:rgba(232,180,48,.2);transform:translateY(-4px)} .card--flat{transition:border-color .25s} .card--flat:hover{transform:none} .card--featured{ border-color:rgba(232,180,48,.3); background:linear-gradient(135deg,var(--slab),var(--cave)); } .card--featured::before{height:60%} .card__icon{ font-size:1.8rem;margin-bottom:1rem;display:block; filter:drop-shadow(0 0 8px rgba(232,180,48,.3)); } .card__tag{ display:inline-block; font-family:var(--mono);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase; color:var(--amber);border:1px solid rgba(232,180,48,.2); padding:.18rem .65rem;margin-bottom:1.25rem; } .card h3{font-size:clamp(1.5rem,3vw,2.5rem);margin-bottom:.65rem} .card p{font-size:.9rem} /* ── GLOW CARD (featured/highlight) ── */ .glow-card{ position:relative; background:var(--cave); padding:2rem; overflow:hidden; } .glow-card::before{ content:''; position:absolute;inset:-1px; background:linear-gradient(135deg,var(--amber),transparent 40%,transparent 60%,rgba(232,180,48,.2)); padding:1px; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:destination-out; mask-composite:exclude; animation:glowRotate 4s linear infinite; border-radius:0; } @keyframes glowRotate{ from{background-position:0% 50%} to{background-position:200% 50%} } .glow-card__inner{position:relative;z-index:1} /* ── INPUTS ── */ .input{ display:block;width:100%; padding:.75rem 1.1rem; background:var(--pit); border:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(232,180,48,.3); color:var(--paper);font-size:.95rem; font-family:var(--serif); transition:border-color .2s,background .2s; } .input:focus{ border-color:var(--amber); background:rgba(232,180,48,.04); } .input::placeholder{color:var(--muted)} .input[type="date"]{color-scheme:dark;font-family:var(--mono)} .input--mono{font-family:var(--mono);letter-spacing:.12em} .input--sm{padding:.5rem .85rem;font-size:.85rem} .field{display:flex;gap:.5rem;align-items:stretch} .field .input{flex:1} /* ── PILLS ── */ .pill{ display:inline-flex;align-items:center; font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase; padding:.2rem .7rem;border:1px solid;white-space:nowrap; } .pill--ok {background:var(--ok-bg);border-color:var(--ok-border);color:var(--ok)} .pill--bad {background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad)} .pill--active {background:var(--amber-bg);border-color:rgba(232,180,48,.3);color:var(--amber)} .pill--neutral{background:rgba(255,255,255,.02);border-color:var(--border2);color:var(--muted)} /* ── DIVIDER ── */ .divider{ display:flex;align-items:center;gap:2rem;margin:4rem 0; } .divider::before,.divider::after{ content:'';flex:1;height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); } .divider span{ font-family:var(--mono);font-size:.55rem; letter-spacing:.3em;text-transform:uppercase; color:var(--soft);white-space:nowrap; } /* ── PROGRESS BAR ── */ .progress-bar{height:2px;background:rgba(255,255,255,.05);overflow:hidden} .progress-bar__fill{ height:100%; background:linear-gradient(90deg,var(--amber),var(--amber-lt)); transition:width .5s cubic-bezier(.4,0,.2,1); box-shadow:0 0 12px rgba(232,180,48,.5); } /* ── TOAST ── */ .toast{ position:fixed;bottom:2.5rem;left:50%; transform:translateX(-50%) translateY(160%); z-index:500; background:var(--slab); border-top:2px solid var(--amber); padding:.8rem 1.75rem; font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--paper);white-space:nowrap; transition:transform .4s cubic-bezier(.34,1.56,.64,1); box-shadow:var(--shadow-md),var(--glow-amber); pointer-events:none; } .toast.is-visible{transform:translateX(-50%) translateY(0)} .toast.is-err{border-color:var(--bad);color:var(--bad)} .toast.is-ok {border-color:var(--ok);color:var(--ok)} /* ── SCROLL REVEAL ── */ [data-reveal]{ opacity:0;transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; } [data-reveal].is-visible{opacity:1;transform:none} [data-delay="1"]{transition-delay:.1s} [data-delay="2"]{transition-delay:.18s} [data-delay="3"]{transition-delay:.26s} [data-delay="4"]{transition-delay:.34s} [data-delay="5"]{transition-delay:.42s} /* ── GLITCH TEXT ── */ .glitch{ position:relative;display:inline-block; } .glitch::before,.glitch::after{ content:attr(data-text); position:absolute;inset:0; font-family:inherit;font-size:inherit; letter-spacing:inherit;text-transform:inherit;line-height:inherit; } .glitch::before{ color:var(--amber); clip-path:polygon(0 0,100% 0,100% 45%,0 45%); animation:glitchTop 3s infinite; opacity:.6; } .glitch::after{ color:var(--crimsn); clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%); animation:glitchBottom 3.5s infinite; opacity:.4; } @keyframes glitchTop{ 0%,92%,100%{transform:none;opacity:0} 93%{transform:translate(-2px,0);opacity:.6} 95%{transform:translate(2px,0);opacity:.4} 97%{transform:translate(-1px,0);opacity:.6} } @keyframes glitchBottom{ 0%,90%,100%{transform:none;opacity:0} 91%{transform:translate(2px,0);opacity:.4} 93%{transform:translate(-2px,0);opacity:.3} 96%{transform:translate(1px,0);opacity:.4} } /* ── FOOTER ── */ .footer{ background:var(--void); border-top:1px solid var(--border); padding:4rem 0 2rem; position:relative;z-index:1; } .footer::before{ content:''; position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--amber),transparent); opacity:.3; } .footer__grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;margin-bottom:3rem; } .footer__logo{ font-family:var(--display);font-size:2rem; letter-spacing:.06em;text-transform:uppercase; color:var(--paper);display:block;margin-bottom:.75rem;line-height:1; } .footer__logo .mark{color:var(--amber)} .footer__desc{font-size:.88rem;max-width:280px;line-height:1.75} .footer__col h5{ font-family:var(--mono);font-size:.58rem; letter-spacing:.25em;text-transform:uppercase; color:var(--amber);margin-bottom:1.25rem; } .footer__col a{ display:block;font-family:var(--mono);font-size:.72rem; letter-spacing:.06em;color:var(--muted);margin-bottom:.6rem; transition:color .18s; } .footer__col a:hover{color:var(--paper)} .footer__bottom{ display:flex;justify-content:space-between;align-items:center; gap:1rem;flex-wrap:wrap; padding-top:2rem; border-top:1px solid var(--border2); } .footer__bottom small{ font-family:var(--mono);font-size:.58rem; letter-spacing:.12em;color:var(--muted);text-transform:uppercase; } /* ── PAGE HEADER ── */ .page-hero{ padding:9rem 0 5rem; position:relative;overflow:hidden; } .page-hero__bg{ position:absolute;inset:0; background: radial-gradient(ellipse 40% 60% at 80% 50%,rgba(232,180,48,.06) 0%,transparent 70%), radial-gradient(ellipse 30% 40% at 20% 80%,rgba(255,45,85,.03) 0%,transparent 60%); pointer-events:none; } .page-hero__lines{ position:absolute;inset:0;overflow:hidden;pointer-events:none; } .page-hero__lines::before{ content:''; position:absolute;top:0;left:clamp(1.5rem,5vw,4rem); width:1px;height:100%; background:linear-gradient(180deg,transparent,var(--amber),transparent); opacity:.15; } .page-hero .accent-line{margin-bottom:1.25rem} .page-hero h1{margin-bottom:1.25rem;line-height:.9} .page-hero .lead{max-width:640px} /* ── BREADCRUMB ── */ .breadcrumb{ display:flex;gap:.6rem;align-items:center; font-family:var(--mono);font-size:.58rem; letter-spacing:.15em;text-transform:uppercase; color:var(--muted);margin-bottom:1.5rem; } .breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--paper)} .breadcrumb__sep{opacity:.25;font-size:.7rem} /* ── SKIP ── */ .skip{ position:absolute;left:-9999px;top:1rem;z-index:999; background:var(--cave);border:1px solid var(--amber); padding:.5rem 1rem; font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--amber); } .skip:focus{left:1.5rem} /* ════════════════════════════════════════════ DEMO-SPECIFIC STYLES ════════════════════════════════════════════ */ .demo-layout{ display:grid;grid-template-columns:300px 1fr; gap:1.5rem;align-items:start;padding-top:1.5rem; } .demo-sidebar{position:sticky;top:7rem} /* Demo panel */ .demo-panel{ background:var(--cave);border:1px solid var(--border); overflow:hidden; } .demo-panel__head{ background:rgba(232,180,48,.05); border-bottom:1px solid var(--border); padding:.85rem 1.25rem; display:flex;align-items:center;justify-content:space-between; } .demo-panel__head-label{ font-family:var(--mono);font-size:.58rem; letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .demo-panel__body{padding:1.25rem} /* Status line */ .demo-status{ background:var(--pit);border-left:2px solid var(--border); padding:.65rem 1rem; font-family:var(--mono);font-size:.68rem; color:var(--muted);line-height:1.6;margin-bottom:1rem; } .demo-status.is-active{border-color:var(--amber);color:rgba(245,240,232,.7)} /* Timer blocks */ .timer-block{ background:var(--pit);border:1px solid var(--border2); padding:.75rem 1rem;transition:border-color .2s; } .timer-block.is-bad{border-color:rgba(255,45,85,.3)} .timer-block__label{ font-family:var(--mono);font-size:.55rem; letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block; } .timer-block__value{ font-family:var(--display);font-size:1.8rem; color:var(--paper);letter-spacing:.04em; display:block;line-height:1.1;margin-top:.15rem; } .timer-block.is-bad .timer-block__value{color:var(--bad)} .timers-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.75rem} /* Progress row */ .progress-row{ display:flex;align-items:center;justify-content:space-between; gap:.5rem;margin-bottom:.5rem; } .progress-pill{ font-family:var(--mono);font-size:.6rem; letter-spacing:.12em;color:var(--muted); } /* Cards grid */ .cards-grid{display:flex;flex-direction:column;gap:.85rem} /* Puzzle app cards */ .app-card{ background:var(--cave);border:1px solid var(--border2); overflow:hidden;transition:border-color .2s; position:relative; } .app-card::before{ content:''; position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--muted);transition:background .2s; } .app-card.card--active{ border-color:rgba(232,180,48,.4); } .app-card.card--active::before{background:var(--amber);box-shadow:0 0 12px rgba(232,180,48,.4)} .app-card.card--solved{border-color:rgba(0,224,150,.2)} .app-card.card--solved::before{background:var(--ok)} .app-card.card--cooldown{border-color:rgba(255,45,85,.3)} .app-card.card--cooldown::before{background:var(--bad)} .app-card.card--locked{opacity:.45} .cardHead{padding:.85rem 1.1rem .85rem 1.4rem;border-bottom:1px solid var(--border2)} .cardTitleRow{display:flex;align-items:center;gap:.75rem} .cardIcon{ width:24px;height:24px;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:var(--display);font-size:.9rem;color:var(--muted); } .card--active .cardIcon{color:var(--amber)} .card--solved .cardIcon{color:var(--ok)} .card--cooldown .cardIcon{color:var(--bad)} .cardTitle{ font-family:var(--mono);font-size:.72rem;font-weight:400; letter-spacing:.1em;text-transform:uppercase; color:var(--paper);flex:1; } .cardText{padding:1rem 1.1rem 1rem 1.4rem;font-size:.9rem;line-height:1.7;color:var(--paper)} .cardMuted{padding:.25rem 1.1rem .85rem 1.4rem;font-size:.78rem;color:var(--muted)} /* Input areas inside cards */ .fieldRow{display:flex;gap:.5rem;padding:0 1.1rem .9rem 1.4rem;align-items:center} .grow{flex:1} .mini{padding:0 1.1rem .65rem 1.4rem;font-family:var(--mono);font-size:.6rem;color:var(--muted)} /* Choice buttons */ .choiceList{ padding:0 1.1rem .9rem 1.4rem; display:grid;grid-template-columns:1fr 1fr;gap:.4rem; } .choiceBtn{ padding:.6rem .85rem; background:var(--pit);border:1px solid var(--border2); color:var(--paper);font-family:var(--mono);font-size:.75rem; letter-spacing:.06em;text-align:left; transition:all .18s; } .choiceBtn:hover:not(:disabled){ border-color:var(--amber);color:var(--amber); background:var(--amber-bg); } .choiceBtn:disabled{opacity:.4;cursor:not-allowed} /* Order DnD */ .orderBox{padding:0 1.1rem .9rem 1.4rem} .orderItem{ display:flex;align-items:center;gap:.75rem; padding:.6rem .85rem;margin-bottom:.3rem; background:var(--pit);border:1px solid var(--border2); font-family:var(--mono);font-size:.75rem;cursor:grab;user-select:none; transition:border-color .15s; } .orderItem:active{cursor:grabbing} .orderItem.dragging{opacity:.35;border-style:dashed} .orderHandle{color:var(--muted);letter-spacing:.05em} .orderRank{ width:20px;height:20px;display:flex;align-items:center;justify-content:center; background:var(--amber-bg);border:1px solid rgba(232,180,48,.25); color:var(--amber);font-family:var(--display);font-size:.85rem;flex-shrink:0; } /* Geo */ .geoBox{padding:0 1.1rem .9rem 1.4rem} .geoOut{ padding:.6rem .85rem;background:var(--pit);border:1px solid var(--border2); font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-bottom:.6rem; } /* Cover overlay */ .coverWrap{position:relative;min-height:60px;overflow:hidden} .coverBody{min-height:60px} .coverOverlay{ position:absolute;inset:0; background:rgba(3,3,5,.82);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center; } .coverNote{ font-family:var(--mono);font-size:.65rem;text-align:center; color:var(--muted);padding:1rem;line-height:1.7; border:1px solid var(--border2);background:rgba(14,14,24,.6); max-width:220px; } /* Final reveal */ .final-card{ background:var(--cave); border-top:3px solid var(--amber); padding:2.5rem;margin-top:1.5rem; box-shadow:var(--glow-amber); position:relative;overflow:hidden; } .final-card::before{ content:'CARTA FINAL'; position:absolute;top:1.75rem;right:2rem; font-family:var(--display);font-size:6rem; color:rgba(232,180,48,.04);letter-spacing:.06em; line-height:1;pointer-events:none; } .final-card__title{ font-family:var(--mono);font-size:.58rem;letter-spacing:.25em; text-transform:uppercase;color:var(--amber);margin-bottom:1.25rem; } .final-card__body{ font-family:var(--serif);font-size:1rem; line-height:1.85;color:var(--paper); } .final-card__from{ font-family:var(--serif);font-size:.95rem; font-style:italic;color:var(--muted); margin-top:1.25rem;text-align:right; } /* Hints panel */ .hints-panel{ position:fixed;inset:0;z-index:200; background:rgba(3,3,5,.92);backdrop-filter:blur(16px); display:flex;align-items:center;justify-content:center;padding:2rem; } .hints-inner{ background:var(--cave);border:1px solid var(--border); width:100%;max-width:500px;padding:2rem; position:relative; } .hints-inner::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--amber),transparent); } .hints-head{ display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem; } .hints-head h3{font-family:var(--display);font-size:2.5rem;color:var(--paper);line-height:1} .hint-item{ display:flex;gap:.85rem;padding:.75rem 0; border-bottom:1px solid var(--border2);font-size:.88rem; } .hint-item:last-child{border-bottom:none} .hint-num{ font-family:var(--display);font-size:1.2rem; color:var(--amber);flex-shrink:0;line-height:1.2; } /* Viewer modal */ .viewer-overlay{ position:fixed;inset:0;z-index:200; background:rgba(3,3,5,.92);backdrop-filter:blur(16px); display:none;align-items:center;justify-content:center;padding:2rem; } .viewer-overlay.show{display:flex} .viewer-modal{ background:var(--cave);border:1px solid var(--border); width:100%;max-width:580px;max-height:90vh;overflow-y:auto; position:relative; } .viewer-modal::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--amber),transparent); } .viewer-modal-head{ display:flex;align-items:center;justify-content:space-between; padding:1.1rem 1.5rem;border-bottom:1px solid var(--border); position:sticky;top:0;background:var(--cave);z-index:1; } .viewer-modal-head h3{ font-family:var(--display);font-size:1.8rem;color:var(--paper);line-height:1; } .viewer-close{color:var(--muted);font-size:1.2rem;line-height:1;font-family:var(--mono)} .viewer-close:hover{color:var(--paper)} .viewer-modal-body{padding:1.25rem 1.5rem} /* Attempt history */ .attempt{ padding:.8rem 1rem;background:var(--pit);border-left:2px solid var(--border2); margin-bottom:.4rem; } .attempt.ok{border-color:var(--ok)} .attempt.bad{border-color:var(--bad)} .attemptTop{ display:flex;justify-content:space-between; font-family:var(--mono);font-size:.6rem; margin-bottom:.4rem;color:var(--muted); } .attemptAns{font-size:.85rem;color:var(--paper);line-height:1.6;font-family:var(--serif)} .attemptJson{ font-family:var(--mono);font-size:.68rem;color:var(--muted); overflow:auto;max-height:100px;white-space:pre; } .ans-list{display:flex;flex-direction:column;gap:.3rem;list-style:none} .ans-list li{display:flex;gap:.5rem;font-size:.82rem;color:var(--paper)} .ans-num{color:var(--amber);font-family:var(--mono)} .viewer-card{cursor:pointer} .viewer-card:hover{border-color:rgba(232,180,48,.3)!important} .viewer-meta{ display:flex;gap:1.5rem;flex-wrap:wrap; font-family:var(--mono);font-size:.62rem;color:var(--muted); margin-bottom:1rem;padding:.65rem 1rem; background:var(--pit);border-left:2px solid var(--border); } .viewer-meta span b{color:var(--paper);font-weight:400} /* ════════════════════════════════════════════ PRICING PAGE ════════════════════════════════════════════ */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border2)} .price-card{ background:var(--cave);padding:2.5rem 2rem; display:flex;flex-direction:column; transition:background .25s; position:relative; } .price-card:hover{background:var(--slab)} .price-card--featured{ background:var(--slab); position:relative; } .price-card--featured::before{ content:''; position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,transparent,var(--amber),transparent); box-shadow:0 0 20px rgba(232,180,48,.3); } .price-card__pack{ font-family:var(--mono);font-size:.55rem;letter-spacing:.25em;text-transform:uppercase; color:var(--amber);display:block;margin-bottom:.5rem; } .price-card__name{ font-family:var(--display);font-size:clamp(2.5rem,5vw,4rem); color:var(--paper);display:block;line-height:.9;margin-bottom:1.25rem; letter-spacing:.04em;text-transform:uppercase; } .price-card__price{font-family:var(--display);margin-bottom:1.5rem} .price-card__price .amount{ font-size:clamp(3.5rem,7vw,6rem);color:var(--amber); letter-spacing:.02em;display:block;line-height:.9; } .price-card__price .curr{ font-family:var(--mono);font-size:.75rem;color:var(--muted); display:block;letter-spacing:.15em;margin-top:.4rem; } .price-card__features{display:flex;flex-direction:column;gap:.45rem;flex:1;margin-bottom:1.5rem} .price-card__features li{ display:flex;gap:.6rem;font-family:var(--mono);font-size:.72rem; color:var(--muted);align-items:flex-start;line-height:1.5; letter-spacing:.04em; } .price-card__features .ck{color:var(--ok);font-size:.65rem;flex-shrink:0;margin-top:1px} .price-card__features .xx{color:var(--muted);font-size:.65rem;flex-shrink:0} /* Extras grid */ .extras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--border2)} .extra-card{ background:var(--cave);padding:1.5rem; display:flex;justify-content:space-between;align-items:flex-start; transition:background .2s; } .extra-card:hover{background:var(--slab)} .extra-card h4{ font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--paper);margin-bottom:.35rem; } .extra-card p{font-size:.78rem;font-family:var(--mono)} .extra-card__price{ font-family:var(--display);font-size:2rem; color:var(--amber);flex-shrink:0;margin-left:1rem;line-height:1; letter-spacing:.04em; } /* Compare table */ .compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .compare-table{width:100%;border-collapse:collapse;font-size:.8rem} .compare-table th,.compare-table td{ padding:.85rem 1.1rem;border-bottom:1px solid var(--border2);text-align:left; } .compare-table th{ font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase; color:var(--amber);background:var(--pit);position:sticky;top:0;z-index:1; } .compare-table th:first-child{color:var(--muted)} .compare-table th .mono{display:block;font-family:var(--display);font-size:1.1rem;color:var(--paper);margin-top:.2rem;letter-spacing:.04em;text-transform:uppercase} .compare-table td{color:var(--muted);font-family:var(--mono);font-size:.72rem} .compare-table td:first-child{color:var(--paper)} .compare-table td.ok{color:var(--ok);font-weight:500} .compare-table td.no{color:var(--muted)} .compare-table tr:hover td{background:rgba(232,180,48,.02)} .compare-table tbody td:nth-child(4){background:rgba(232,180,48,.015)} /* Calculator */ .calc-wrap{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:start} .calc-form{background:var(--cave);border:1px solid var(--border);padding:2rem} .calc-option{ display:flex;align-items:flex-start;gap:.85rem; padding:.9rem 1rem;background:var(--pit);border:1px solid var(--border2); border-left:2px solid transparent; margin-bottom:.35rem;cursor:pointer;transition:all .18s; } .calc-option:hover{border-left-color:var(--amber);background:var(--amber-bg)} .calc-option:has(input:checked){border-left-color:var(--amber);background:var(--amber-bg)} .calc-option input[type="radio"],.calc-option input[type="checkbox"]{ width:14px;height:14px;flex-shrink:0;margin-top:3px;accent-color:var(--amber); } .calc-option-info{flex:1} .calc-option-info strong{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--paper);display:block;margin-bottom:.15rem} .calc-option-info span{font-family:var(--mono);font-size:.65rem;color:var(--muted)} .calc-total{ background:var(--cave);border:1px solid var(--border); padding:2rem;position:sticky;top:7rem; border-top:3px solid var(--amber); } .calc-total__label{ font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted); } .calc-total__value{ font-family:var(--display);font-size:5rem; color:var(--amber);line-height:.9;letter-spacing:.02em; margin:.5rem 0 .75rem; text-shadow:0 0 40px rgba(232,180,48,.2); } .calc-total__summary{ font-family:var(--mono);font-size:.65rem;color:var(--muted); line-height:1.8;margin-bottom:1.5rem;min-height:3rem; letter-spacing:.04em; } .calc-note{ font-family:var(--mono);font-size:.58rem;letter-spacing:.08em; color:var(--muted);line-height:1.7;margin-top:1rem; } /* ════════════════════════════════════════════ EXPERIENCIA PAGE ════════════════════════════════════════════ */ .proof-nav{display:flex;gap:.5rem;flex-wrap:wrap} .proof-nav__item{ display:flex;align-items:center;gap:.6rem; padding:.5rem .9rem; background:var(--cave);border:1px solid var(--border2); color:var(--muted);font-family:var(--mono);font-size:.62rem; letter-spacing:.1em;text-transform:uppercase; transition:all .18s; } .proof-nav__item:hover{border-color:rgba(232,180,48,.35);color:var(--paper)} .proof-nav__icon{ font-family:var(--display);font-size:.9rem;color:var(--amber);flex-shrink:0; } .ex-demo-wrap{ background:var(--cave);border:1px solid var(--border2); margin-bottom:1px;scroll-margin-top:7rem; position:relative; transition:border-color .2s; } .ex-demo-wrap.is-solved{border-color:rgba(0,224,150,.2)} .ex-demo-wrap::before{ content:''; position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--border2);transition:background .3s; } .ex-demo-wrap.is-solved::before{background:var(--ok)} .ex-demo-head{ background:rgba(232,180,48,.04);border-bottom:1px solid var(--border2); padding:.9rem 1.5rem .9rem 1.75rem; display:flex;align-items:center;gap:.85rem; } .ex-demo-icon{ font-family:var(--display);font-size:1.25rem;color:var(--amber); width:28px;text-align:center;flex-shrink:0;line-height:1; } .ex-demo-title{ font-family:var(--display);font-size:1.5rem; color:var(--paper);margin:0;flex:1;letter-spacing:.04em;text-transform:uppercase; line-height:1; } .type-tag{ font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase; color:var(--amber);border:1px solid rgba(232,180,48,.2); padding:.15rem .55rem;white-space:nowrap; } .ex-demo-dot{ width:7px;height:7px;border-radius:50%; background:var(--muted);transition:all .3s;flex-shrink:0; } .ex-demo-dot.is-ok{background:var(--ok);box-shadow:0 0 8px var(--ok)} .ex-demo-dot.is-bad{background:var(--bad);box-shadow:0 0 8px var(--bad)} .ex-demo-body{padding:1.5rem 1.5rem 1.5rem 1.75rem} .ex-demo-grid{display:grid;grid-template-columns:1fr 300px;gap:1.5rem;align-items:start} .ex-demo-prompt{ font-family:var(--serif);font-size:.95rem;color:var(--paper); line-height:1.7;margin-bottom:1rem; } .ex-demo-meta{ display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; margin-top:.65rem; } .ex-demo-status{ margin-top:.65rem;padding:.6rem .9rem; background:var(--pit);border-left:2px solid var(--border2); font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--muted); min-height:36px;letter-spacing:.04em; } .ex-demo-status:empty{display:none} .ex-demo-status.is-ok{border-color:var(--ok);color:var(--ok)} .ex-demo-status.is-bad{border-color:var(--bad);color:var(--bad)} .ex-demo-note{ background:var(--pit);border:1px solid var(--border2);padding:1.25rem; } .ex-demo-note h4{ font-family:var(--display);font-size:1.2rem;color:var(--paper); margin-bottom:.65rem;letter-spacing:.04em;text-transform:uppercase; line-height:1; } .ex-demo-note p{font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.7} .ex-hint-box{ margin-top:.85rem;padding:.65rem .9rem; background:var(--amber-bg);border-left:2px solid var(--amber); font-family:var(--mono);font-size:.68rem;color:var(--muted);line-height:1.6; } .ex-hint-box em{color:var(--paper);font-style:normal} .code-pill{ font-family:var(--mono);font-size:.72rem; background:var(--amber-bg);border:1px solid rgba(232,180,48,.2); color:var(--amber);padding:.1rem .4rem; } .geo-output{ padding:.7rem 1rem;background:var(--pit);border:1px solid var(--border2); margin-bottom:.5rem;min-height:40px;display:flex;align-items:center; } .geo-output.is-ready{border-color:var(--ok-border)} .demo-score-bar{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap} .demo-score-pills{display:flex;gap:.3rem} .demo-score-pill{ width:10px;height:10px;border-radius:50%; background:var(--border2);border:1px solid var(--border);transition:all .3s; } .demo-score-pill.is-ok{background:var(--ok);border-color:var(--ok-border);box-shadow:0 0 6px var(--ok)} /* Sequence demo */ .seq-demo{display:flex;flex-direction:column;gap:2px;max-width:800px} .seq-step{ display:flex;align-items:flex-start;gap:1.5rem; padding:1.25rem 1.5rem;background:var(--cave);border:1px solid var(--border2); position:relative; } .seq-step::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border2); } .seq-step--done::before{background:var(--ok)} .seq-step--active::before{background:var(--amber);box-shadow:0 0 12px rgba(232,180,48,.4)} .seq-step__num{ font-family:var(--display);font-size:2rem;color:var(--muted); flex-shrink:0;line-height:1;width:2rem; } .seq-step--done .seq-step__num{color:var(--ok)} .seq-step--active .seq-step__num{color:var(--amber)} .seq-step__body{flex:1} .seq-step__label{ font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase; color:var(--muted);display:block;margin-bottom:.4rem; } .seq-step--active .seq-step__label{color:var(--amber)} .seq-step--done .seq-step__label{color:var(--ok)} .seq-step__body p{font-family:var(--serif);font-size:.9rem;color:var(--paper);line-height:1.6} .seq-step__hint{ margin-top:.6rem;padding:.5rem .85rem; background:var(--ok-bg);border-left:2px solid var(--ok); font-family:var(--mono);font-size:.68rem;color:var(--ok);letter-spacing:.04em; } .seq-step--locked{opacity:.4} /* Edu strip */ .edu-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem} .edu-item{display:flex;gap:.85rem;align-items:flex-start} .edu-item__num{ font-family:var(--display);font-size:2rem;color:var(--amber); line-height:1;flex-shrink:0;min-width:2rem; } .edu-item strong{ display:block;font-family:var(--mono);font-size:.72rem; letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin-bottom:.35rem; } .edu-item p{font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--muted)} .edu-aside{ background:rgba(232,180,48,.04);border:1px solid rgba(232,180,48,.12); padding:1rem 1.1rem;border-left:2px solid var(--amber); } .edu-aside__tag{ font-family:var(--mono);font-size:.55rem;letter-spacing:.2em; text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.5rem; } .edu-aside p{font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--muted)} /* Login card */ .login-card{ background:var(--cave);border:1px solid var(--border); padding:2.5rem 2rem;max-width:520px; position:relative; } .login-card::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--amber),transparent); } .login-card__head{margin-bottom:1.5rem} .login-card__head h2{ font-size:clamp(3rem,6vw,5rem);color:var(--paper);margin:.35rem 0 .65rem; } .login-card__demo-hint{ display:flex;flex-direction:column;gap:.3rem; background:var(--amber-bg);border-left:3px solid var(--amber); padding:.75rem 1rem;margin-bottom:1.25rem; } .login-card__security{ display:flex;align-items:center;gap:.65rem; margin-top:1rem;padding:.65rem .9rem; background:var(--pit);border:1px solid var(--border2); } .login-card__security span{font-size:1rem} /* Sidebar rows */ .sidebar-row{ display:flex;align-items:center;justify-content:space-between; padding:.5rem 0;border-bottom:1px solid var(--border2);margin-bottom:.5rem; } .sidebar-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .timer-info{font-family:var(--mono);font-size:.68rem;color:var(--muted);line-height:1.5} /* Viewer context bar */ .viewer-context-bar{ display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding:.6rem 1rem;margin-bottom:.85rem; background:var(--amber-bg);border-left:2px solid var(--amber); } /* ── RESPONSIVE ── */ @media(max-width:1024px){ .pricing-grid{grid-template-columns:1fr} .pricing-grid .price-card+.price-card{border-top:1px solid var(--border2)} .calc-wrap{grid-template-columns:1fr} .calc-total{position:static;border-top:3px solid var(--amber)} } @media(max-width:860px){ .grid-3{grid-template-columns:1fr 1fr} .grid-4{grid-template-columns:1fr 1fr} .footer__grid{grid-template-columns:1fr 1fr} .demo-layout{grid-template-columns:1fr} .demo-sidebar{position:static} .nav__links{display:none} .nav__burger{display:inline-flex} .edu-strip{grid-template-columns:1fr 1fr} .ex-demo-grid{grid-template-columns:1fr} html{cursor:auto} .cursor,.cursor-ring{display:none} } @media(max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr} .timers-grid{grid-template-columns:1fr} .choiceList{grid-template-columns:1fr} .edu-strip{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════════════════ INDEX — componentes específicos de la página de inicio ══════════════════════════════════════════════════════════════ */ /* ── HERO ── */ .hero{ min-height:100svh;padding:5.5rem 0 4rem; display:flex;flex-direction:column;justify-content:center; position:relative; } .hero__bg{ position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 50% 70% at 70% 40%,rgba(232,180,48,.08) 0%,transparent 60%), radial-gradient(ellipse 30% 40% at 10% 90%,rgba(255,45,85,.04) 0%,transparent 50%); } .hero__grid-lines{ position:absolute;inset:0;overflow:hidden;pointer-events:none; background-image: linear-gradient(rgba(232,180,48,.04) 1px,transparent 1px), linear-gradient(90deg,rgba(232,180,48,.04) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 70% 70% at 70% 50%,black 0%,transparent 80%); } .hero__inner{ display:grid;grid-template-columns:1fr minmax(0,420px); gap:3rem;align-items:center; } .hero__right{min-width:0;overflow:hidden} .hero__eyebrow{ display:flex;align-items:center;gap:.85rem; font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase; color:var(--muted);margin-bottom:1.5rem; } .hero__dot{ width:6px;height:6px;border-radius:50%;background:var(--amber); box-shadow:0 0 10px var(--amber);flex-shrink:0; animation:pulse 2s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} .hero__title{display:block;margin-bottom:1.5rem} .hero__title-line{ display:block; font-family:var(--display);font-size:clamp(6rem,15vw,16rem); letter-spacing:.02em;text-transform:uppercase; line-height:.95;color:var(--paper); } .hero__title-line--amber{color:var(--amber);text-shadow:var(--glow-amber)} .hero__lead{max-width:520px;margin-bottom:2rem} .hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem} .hero__stats{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} .hero__stat{display:flex;align-items:center;gap:.75rem} .hero__stat-num{ font-family:var(--display);font-size:2.5rem;color:var(--amber); letter-spacing:.02em;line-height:1; } .hero__stat-label{ font-family:var(--mono);font-size:.6rem;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);line-height:1.5; } .hero__stat-div{width:1px;height:36px;background:var(--border2)} /* Hero card stack */ .hero__card-stack{display:flex;flex-direction:column;gap:.75rem;position:relative} .hero__mock-card{ background:var(--cave);border:1px solid var(--border2); padding:1.1rem 1.25rem;position:relative; } .hero__mock-card-bar{ display:flex;align-items:center;justify-content:space-between; gap:2rem;margin-bottom:.5rem; } .hero__mock-card--active{ border-color:rgba(232,180,48,.35); border-left:3px solid var(--amber); } .hero__mock-card--solved{ border-color:rgba(0,224,150,.2); border-left:3px solid var(--ok); } .hero__mock-card--locked{opacity:.45} .hero__mock-card__body{ font-family:var(--mono);font-size:.75rem;line-height:1.7; color:rgba(245,240,232,.85);margin:.75rem 0; } .hero__mock-card__meta{ font-family:var(--mono);font-size:.58rem; color:var(--muted);margin-top:.5rem;letter-spacing:.1em; } .hero__mock-input{ display:flex;gap:.4rem;align-items:center; } .hero__mock-input__field{ flex:1;height:36px; background:var(--pit); border:1px solid rgba(232,180,48,.2); border-bottom:2px solid var(--amber); } .hero__mock-input__btn{ width:80px;height:36px;background:var(--amber); clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px)); } .hero__mock-card--solved .hero__mock-clue{ font-family:var(--mono);font-size:.72rem;color:var(--ok);margin:.6rem 0; } .hero__countdown-badge{ position:absolute;right:.75rem;top:50%;transform:translateY(-50%); background:var(--pit);border:1px solid var(--border); padding:.65rem .85rem;text-align:center; box-shadow:var(--shadow-md);z-index:2; } .hero__countdown-badge__label{ font-family:var(--mono);font-size:.5rem;letter-spacing:.2em;color:var(--muted); } .hero__countdown-val{ font-family:var(--display);font-size:1.5rem;color:var(--amber); letter-spacing:.04em;line-height:1;display:block;margin:.15rem 0; } /* Scroll cue */ .hero__scroll{ position:absolute;bottom:2.5rem;left:clamp(1.5rem,5vw,4rem); display:flex;align-items:center;gap:.75rem; } .hero__scroll-label{ font-family:var(--mono);font-size:.5rem; letter-spacing:.3em;text-transform:uppercase;color:var(--muted); } .hero__scroll-line{ width:1px;height:40px; background:linear-gradient(180deg,var(--amber),transparent); animation:scrollDown 2s ease-in-out infinite; } @keyframes scrollDown{ 0%,100%{opacity:0;transform:scaleY(0);transform-origin:top} 50%{opacity:1;transform:scaleY(1)} } /* Hero mock card helpers */ .hero__mock-label{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;color:var(--amber)} .hero__mock-label--dim{color:var(--muted)} .hero__mock-label--ok{color:var(--ok)} .hero__mock-card__body{font-family:var(--mono);font-size:.75rem;line-height:1.7;color:rgba(245,240,232,.85);margin:.75rem 0} .hero__mock-card__body--ok{font-family:var(--mono);font-size:.72rem;color:var(--ok);margin:.6rem 0} .hero__mock-card__meta{font-family:var(--mono);font-size:.58rem;color:var(--muted);margin-top:.5rem;letter-spacing:.1em} .hero__mock-locked-body{ height:60px;background:rgba(255,255,255,.02); border:1px solid var(--border2);margin:.75rem 0; display:flex;align-items:center;justify-content:center; } .hero__mock-locked-note{font-family:var(--mono);font-size:.65rem;color:var(--muted)} .input--resize{resize:vertical} /* ── MARQUEE ── */ .marquee-strip{ background:var(--amber);overflow:hidden;padding:.7rem 0; white-space:nowrap; } .marquee-inner{ display:inline-flex;gap:2rem; animation:marquee 30s linear infinite; } .marquee-strip span{ font-family:var(--display);font-size:1rem;letter-spacing:.1em; text-transform:uppercase;color:var(--void); } .marquee-strip .mx{opacity:.4;font-size:.7rem} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ── STEPS ── */ .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border2)} .step-item{background:var(--void);padding:2.5rem;position:relative} .step-item::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:transparent;transition:background .3s; } .step-item:hover::before{background:var(--amber)} .step-item__num{ font-family:var(--display);font-size:5rem;color:rgba(232,180,48,.12); line-height:1;margin-bottom:1rem;letter-spacing:.04em; } .step-item h3{ font-size:clamp(2rem,3.5vw,3rem);margin-bottom:.85rem; min-height:5rem;display:flex;align-items:flex-start; } .step-item p{font-size:.9rem;line-height:1.8} .step-item__detail{ display:inline-block;margin-top:1.25rem; font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; color:var(--amber);border-top:1px solid rgba(232,180,48,.2);padding-top:.6rem; } /* ── ROLES ── */ .roles-grid{ display:grid;grid-template-columns:repeat(2,1fr); gap:1px;background:var(--border2);max-width:900px; } .role-card{ background:var(--cave);padding:2.5rem; display:flex;flex-direction:column;gap:.75rem; position:relative;transition:background .25s; } .role-card:hover{background:var(--slab)} .role-card--featured{background:var(--slab);border-top:3px solid var(--amber)} .role-card__num{ font-family:var(--mono);font-size:.58rem; letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } .role-card h3{font-size:clamp(2.5rem,4vw,4.5rem);line-height:.9} .role-card p{ font-family:var(--mono);font-size:.75rem;line-height:1.75; color:var(--muted);flex:1; } .role-card__tag{ font-family:var(--mono);font-size:.58rem;letter-spacing:.18em; text-transform:uppercase;color:var(--amber); border:1px solid rgba(232,180,48,.2);padding:.2rem .65rem; display:inline-block;width:fit-content; } /* ── PROOF STRIP ── */ .two-col-head{ display:grid;grid-template-columns:1fr 1fr; gap:3rem;align-items:start;margin-bottom:4rem; } .two-col-head__action{padding-top:1.5rem} .two-col-head__action p{margin-bottom:1.5rem} .proof-strip{ display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--border2); } .proof-card{ background:var(--cave);padding:2rem; display:flex;gap:1.25rem;align-items:flex-start; transition:background .2s; } .proof-card:hover{background:var(--slab)} .proof-card__letter{ font-family:var(--display);font-size:3rem;color:var(--amber); line-height:.9;flex-shrink:0; } .proof-card h4{ font-family:var(--display);font-size:1.5rem;letter-spacing:.04em; text-transform:uppercase;color:var(--paper);line-height:1;margin-bottom:.5rem; } .proof-card p{ font-family:var(--mono);font-size:.7rem;line-height:1.7;color:var(--muted); } /* ── SECURITY ── */ .security-layout{ display:grid;grid-template-columns:1.1fr .9fr; gap:2rem;align-items:start; } /* Bloque explicativo */ .security-main__inner{ background:var(--slab);border:1px solid var(--border); padding:2.5rem;position:relative;overflow:hidden; } .security-main__inner::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--amber),transparent 60%); } .security-main__inner::after{ content:'SEGURO';position:absolute; bottom:-.15em;right:-.02em; font-family:var(--display);font-size:9rem; color:rgba(255,255,255,.018);letter-spacing:.06em; pointer-events:none;line-height:1; } .security-main__tag{ font-family:var(--mono);font-size:.55rem; letter-spacing:.25em;text-transform:uppercase; color:var(--amber);display:block;margin-bottom:.85rem; } .security-main__inner h3{ font-size:clamp(1.5rem,2.5vw,2.2rem); margin-bottom:1.25rem;line-height:1.15; } .security-main__text{margin-bottom:1rem} .security-main__text--muted{margin-bottom:0;color:var(--muted)} /* Roles mini grid */ .security-roles{ display:grid;grid-template-columns:1fr 1fr;gap:.4rem; margin-top:1.75rem;padding-top:1.5rem; border-top:1px solid var(--border2); position:relative;z-index:1; } .security-detail{ background:var(--pit);border:1px solid var(--border2); border-left:2px solid var(--border); padding:.85rem 1rem;transition:border-left-color .2s; } .security-detail:hover{border-left-color:var(--amber)} .security-detail__label{ font-family:var(--mono);font-size:.55rem; letter-spacing:.2em;text-transform:uppercase; color:var(--amber);display:block;margin-bottom:.45rem; } .security-detail__body{ font-family:var(--mono);font-size:.7rem; line-height:1.75;color:var(--muted);display:block; } /* Cards 2×2 */ .security-cards{ display:grid;grid-template-columns:1fr 1fr; gap:1px;background:var(--border2); align-self:stretch; } .security-card{ background:var(--cave);padding:1.75rem; position:relative;overflow:hidden; transition:background .2s; display:flex;flex-direction:column;gap:.6rem; } .security-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,var(--amber),transparent); opacity:0;transition:opacity .3s; } .security-card:hover{background:var(--slab)} .security-card:hover::before{opacity:1} .security-card__icon{ font-family:var(--mono);font-size:.55rem; letter-spacing:.22em;text-transform:uppercase; color:var(--amber); } .security-card h4{ font-family:var(--display);font-size:clamp(1.2rem,2vw,1.6rem); letter-spacing:.04em;text-transform:uppercase; color:var(--paper);line-height:1; } .security-card p{ font-family:var(--mono);font-size:.7rem; line-height:1.75;color:var(--muted);flex:1; } /* ── EVENTS ── */ .events-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--border2);align-items:stretch; } .event-card{ background:var(--cave);padding:2rem; display:grid;grid-template-rows:auto 1fr auto auto;gap:.4rem; transition:background .2s; position:relative; } .event-card::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:0; background:var(--amber);opacity:.06;transition:width .3s; } .event-card:hover::before{width:100%} .event-card:hover{background:var(--slab)} .event-card__num{ font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--muted); } .event-card__name{ font-family:var(--display);font-size:clamp(2rem,3.5vw,3.5rem); color:var(--paper);letter-spacing:.04em;text-transform:uppercase;line-height:.95; align-self:end; } .event-card__sub{ font-family:var(--mono);font-size:.65rem; letter-spacing:.12em;color:var(--muted);text-transform:uppercase; } .event-card__arrow{ font-family:var(--mono);font-size:1rem;color:var(--amber); transform:translateX(-4px);transition:transform .2s; } .event-card:hover .event-card__arrow{transform:translateX(4px)} /* ── PACKS ── */ .packs-row{ display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--border2); } .pack-item{ background:var(--cave);padding:2rem; display:flex;flex-direction:column;gap:.85rem; position:relative;transition:background .2s; } .pack-item:hover{background:var(--slab)} .pack-item--featured{background:var(--slab);border-top:3px solid var(--amber)} .pack-item__mark{ display:flex;align-items:center;gap:.6rem; font-family:var(--mono);font-size:.52rem;letter-spacing:.25em; text-transform:uppercase;color:var(--amber);min-height:1rem; } .pack-item__mark::before{ content:'';width:18px;height:1px;background:var(--amber);flex-shrink:0; } .pack-item__name{ font-family:var(--display);font-size:2.5rem;color:var(--paper); letter-spacing:.04em;text-transform:uppercase;line-height:1; } .pack-item__price{ font-family:var(--display);font-size:2.5rem;color:var(--amber); letter-spacing:.04em;line-height:1; } .pack-item__desc{ font-family:var(--mono);font-size:.72rem; color:var(--muted);line-height:1.7;flex:1; } /* ── FAQ ── */ .faq-list{display:flex;flex-direction:column;max-width:820px} .faq-item{border-bottom:1px solid var(--border2)} .faq-item__q{ list-style:none; display:flex;align-items:center;justify-content:space-between; padding:1.25rem 0;cursor:pointer;gap:1rem; font-family:var(--display);font-size:clamp(1.4rem,2.5vw,2rem); color:var(--paper);letter-spacing:.04em;text-transform:uppercase;line-height:1.1; transition:color .18s; } .faq-item__q:hover{color:var(--amber)} .faq-item__q::after{ content:'＋';font-family:var(--mono);font-size:1rem; color:var(--amber);flex-shrink:0;transition:transform .3s; } .faq-item[open] .faq-item__q::after{transform:rotate(45deg)} .faq-item__a{padding:.25rem 0 1.25rem} .faq-item__a p{font-size:.9rem;line-height:1.8} /* ── CONTACTO ── */ .contacto-layout{ display:grid;grid-template-columns:1fr 1fr; gap:4rem;align-items:start; } .contacto-left__info{ font-family:var(--mono);font-size:.72rem; color:var(--muted);margin-top:1.5rem;line-height:2; } .contacto-left__info-item{display:block} .contacto-left__info-item .arrow{color:var(--amber)} .contact-form-block{ background:var(--cave);border:1px solid var(--border); padding:2rem;position:relative; } .contact-form-block::before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--amber),transparent); } .contact-form-head{ padding-bottom:1rem;border-bottom:1px solid var(--border2); margin-bottom:1.25rem; } .contact-form-head__label{ font-family:var(--mono);font-size:.55rem; letter-spacing:.25em;text-transform:uppercase;color:var(--amber); } .contact-form-fields{ display:flex;flex-direction:column;gap:.75rem; } .form-field{display:flex;flex-direction:column;gap:.4rem} .form-field__label{ font-family:var(--mono);font-size:.58rem; letter-spacing:.2em;text-transform:uppercase;color:var(--muted); } /* ── RESPONSIVE INDEX ── */ @media(max-width:1024px){ .hero__inner{grid-template-columns:1fr;gap:3rem} .hero__right{display:none} .security-layout{grid-template-columns:1fr} .contacto-layout{grid-template-columns:1fr} .two-col-head{grid-template-columns:1fr} } @media(max-width:860px){ .steps-grid, .roles-grid, .proof-strip, .events-grid, .packs-row{grid-template-columns:1fr} .security-cards{grid-template-columns:1fr 1fr} .hero__title-line{font-size:clamp(5rem,18vw,10rem)} } @media(max-width:600px){ .security-cards, .security-roles{grid-template-columns:1fr} }