/* ============================================================================= MI HABANA ES ASÍ — SITE STYLESHEET (shared components, built on tokens.css) Idea, Design & Build by The Architect Load order in : tokens.css → site.css → (optional page styles) ============================================================================= */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--paper); line-height:var(--lh-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased} ::selection{background:var(--gold);color:#fff} a{color:var(--gold)} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.01em} .wrap{max-width:var(--container);margin:0 auto;padding:0 28px} .wrap-narrow{max-width:var(--container-narrow)} .eyebrow{font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600; letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--terra)} /* film-grain overlay (decorative) */ .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05; 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='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* reading-progress bar */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:var(--z-progress); background:linear-gradient(90deg,var(--gold),var(--gold-bright),var(--terra));transition:width .12s ease} /* ---------------------------------------------------------------- navigation */ nav{position:sticky;top:0;z-index:var(--z-nav);background:color-mix(in srgb,var(--paper) 86%,transparent); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line); transition:box-shadow var(--dur-2) ease,background var(--dur-2) ease} nav.scrolled{box-shadow:0 12px 30px -20px rgba(10,30,28,.55)} nav .bar{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h); max-width:var(--container);margin:0 auto;padding:0 28px} .word{font-family:var(--serif);font-size:20px;letter-spacing:.02em;color:var(--ocean);text-decoration:none;font-weight:500} .word small{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);display:block;line-height:1;margin-top:1px;font-weight:600} .navlinks{display:flex;align-items:center;gap:24px} .navlinks a{position:relative;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;opacity:.82} .navlinks a:hover{opacity:1;color:var(--ocean)} .navlinks a.active{opacity:1;color:var(--ocean)} .navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--gold);transition:width var(--dur-2) ease} .navlinks a:hover::after,.navlinks a.active::after{width:100%} /* primary call-to-action in the nav (e.g. Register) */ .navlinks a.navcta{opacity:1;background:var(--gold-bright);color:#3a2a08;font-weight:600;padding:9px 16px;border-radius:var(--r-sm); transition:transform var(--dur-1),background var(--dur-1)} .navlinks a.navcta:hover{background:#f0c87f;color:#3a2a08;transform:translateY(-1px)} .navlinks a.navcta::after{display:none} /* nav controls: language switch, theme toggle, mobile menu */ .langs{display:flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;background:var(--surface)} .langs button{border:none;background:none;font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em; padding:5px 10px;border-radius:var(--r-pill);cursor:pointer;color:var(--muted)} .langs button.on{background:var(--ocean);color:#fff} .themeBtn{background:none;border:1px solid var(--line);border-radius:var(--r-pill);min-width:34px;height:30px; cursor:pointer;color:var(--ocean);font-size:14px;line-height:1;padding:0 9px;margin-right:8px} .menuBtn{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ocean); font-size:18px;line-height:1;padding:7px 11px;cursor:pointer} @media(max-width:820px){ .menuBtn{display:inline-flex;align-items:center} .navlinks{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:flex-start;gap:2px; background:color-mix(in srgb,var(--paper) 98%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-bottom:1px solid var(--line);padding:12px 26px 18px;box-shadow:var(--shadow-2); max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .28s ease,opacity .2s ease;z-index:20} .navlinks.open{max-height:440px;opacity:1;pointer-events:auto} .navlinks a{font-size:17px;padding:11px 0;width:100%;opacity:.92} .langs{margin-top:12px;align-self:flex-start} /* iOS Safari zooms on focus when a form control is under 16px; keep fields at 16px on mobile */ input,select,textarea{font-size:16px} } [data-theme="dark"] nav{background:rgba(11,21,19,.86)} [data-theme="dark"] .langs{background:#1a2722} [data-theme="dark"] .langs button.on{background:var(--teal);color:#fff} [data-theme="dark"] .navlinks{background:rgba(11,21,19,.98)} /* ---------------------------------------------------------------- buttons */ .btn{display:inline-block;padding:15px 30px;border-radius:var(--r-sm);font:inherit;font-size:15.5px; font-weight:600;text-decoration:none;cursor:pointer;border:none; transition:transform var(--dur-1),background var(--dur-1),box-shadow var(--dur-1)} .btn-pri{position:relative;overflow:hidden;background:var(--gold-bright);color:#3a2a08;box-shadow:0 14px 30px -14px rgba(233,185,106,.7)} .btn-pri:hover{transform:translateY(-2px);background:#f0c87f} .btn-pri::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s ease} .btn-pri:hover::after{left:150%} .btn-line{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn-line:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)} .btn-ocean{background:var(--ocean);color:#fdf9f0} .btn-ocean:hover{transform:translateY(-2px)} /* badges / pills */ .badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r-pill); padding:7px 16px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)} .pill{font-size:11px;font-weight:600;letter-spacing:.04em;border-radius:var(--r-pill);padding:4px 11px;text-transform:uppercase} .pill-now{background:#e7f3ec;color:#1c6b3f}.pill-near{background:#fbf2dd;color:#9a7414}.pill-later{background:#efece6;color:#6c6356} /* ---------------------------------------------------------------- cards */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px; transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-2)} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-1);border-color:var(--ocean)} [data-theme="dark"] .card{background:var(--surface)} /* liquid-glass surface utility */ .glass{position:relative;overflow:hidden;border-radius:var(--r-xl); background:var(--glass-bg);border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);backdrop-filter:blur(var(--glass-blur)) saturate(1.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--shadow-2); transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2)} .glass:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--shadow-3)} [data-theme="dark"] .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--shadow-3)} /* ---------------------------------------------------------------- footer */ footer{background:var(--ocean2);color:#bcd4cd;padding:54px 28px 40px;position:relative;z-index:2} .fgrid{max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:center} footer .word{color:#fdf9f0} .fnav{display:flex;gap:20px;flex-wrap:wrap;font-size:14.5px} .fnav a{color:#bcd4cd;text-decoration:none}.fnav a:hover{color:var(--gold-bright)} .disc{max-width:var(--container);margin:32px auto 0;padding-top:22px;border-top:1px solid rgba(233,185,106,.16); font-size:12px;color:#7c9a93;line-height:1.6} .rights{max-width:var(--container);margin:14px auto 0;font-size:12px;color:#6b8882} .sig{max-width:var(--container);margin:10px auto 0;color:var(--gold-bright);font-weight:700;letter-spacing:.1em;font-size:12px} /* ---------------------------------------------------------------- motion */ .reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-3) ease,transform var(--dur-3) var(--ease)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation-duration:.001s!important}} /* ---------------------------------------------------------------- sparkline */ .spark .slabel{font-family:var(--serif);font-size:18px;color:var(--ocean);font-weight:500} .spark .sline{width:100%;height:46px;margin:16px 0 10px;display:block} .spark .sfoot{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap} .spark .sfoot b{font-family:var(--serif);font-size:20px;color:var(--ocean);font-weight:500} .spark .up{color:var(--ok);font-size:11px}.spark .dn{color:var(--terra);font-size:11px}