/* =============================================================================
ADNAS · Sistema de diseño compartido (Fase 1)
Extraído de reference/adnas_v2.html — fuente visual canónica.
Lo usan: landing, calculadora, alertas (guías y admin no lo consumen).
Requisito por página: incluir en la tipografía:
Correcciones de robustez incluidas (bugs del brief):
- #8 fallback sin JS: el contenido es VISIBLE por defecto. Las animaciones
solo ocultan/mueven cuando tiene la clase .motion-ready (la pone
adnas.js solo si GSAP cargó y no hay prefers-reduced-motion).
- #9 prefers-reduced-motion: desactiva grain, preloader y toda animación.
========================================================================== */
:root {
/* Paleta */
--deep: #0A1628;
--deep-2: #0F2035;
--deep-3: #061220;
--surface: #E8F0F8;
--gold: #D4A84C;
--gold-d: #B08D38;
--cyan: #4FB8C4;
--cyan-d: #2A8B96;
--txt: #E8F0F8;
--txt-mut: #8BA3C4;
--txt-dim: #5A7494;
--danger: #E07A5F;
/* Colores por fuente de alerta */
--src-sunat: #4FB8C4;
--src-peruano: #D4A84C;
--src-mincetur: #8BA3C4;
/* Tipografía */
--font-main: 'Archivo', system-ui, sans-serif;
--font-mono: 'Space Mono', ui-monospace, monospace;
/* Formas / superficies */
--nav-height: 80px;
--radius: 24px;
--radius-sm: 16px;
--radius-xs: 12px;
--blur: 12px;
--border-soft: 1px solid rgba(255, 255, 255, 0.05);
--border-mid: 1px solid rgba(255, 255, 255, 0.1);
--glass-bg: rgba(15, 32, 53, 0.6);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 0.3s ease;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background-color: var(--deep);
color: var(--txt);
font-family: var(--font-main);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(79, 184, 196, 0.3); color: #fff; }
/* --- Lenis --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }
/* =============================== Grain =================================== */
.grain {
position: fixed;
top: -50%; left: -50%; width: 200vw; height: 200vh;
pointer-events: none;
z-index: 9999;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
animation: grain 0.5s steps(6) infinite;
}
@keyframes grain {
0%, 100% { transform: translate(0, 0); }
17% { transform: translate(-3%, -6%); }
33% { transform: translate(2%, -8%); }
50% { transform: translate(6%, 4%); }
67% { transform: translate(5%, 2%); }
83% { transform: translate(-1%, 4%); }
}
/* ============================= Preloader ================================= */
.preloader {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background-color: var(--deep-3);
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.preloader-logo { width: 84px; height: 84px; margin-bottom: 22px; }
.preloader-mark { width: 100%; height: 100%; display: block; overflow: visible; }
/* estado inicial (antes de que corra GSAP): trazos sin dibujar + rellenos ocultos -> sin flash */
.preloader-mark .tr { stroke-dasharray: 100; stroke-dashoffset: 100; }
.preloader-mark .pl-fills { opacity: 0; }
.preloader-text {
font-family: var(--font-mono);
font-size: 14px;
color: var(--txt-mut);
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
opacity: 0; /* la revela la timeline (o el camino sin-motion) */
}
@keyframes fadein { to { opacity: 1; } }
/* ============================ Tipografía ================================= */
.h-large {
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.h-medium {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.01em;
}
.text-mono { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.05em; }
.text-gradient {
background: linear-gradient(135deg, var(--cyan) 0%, var(--gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--txt-mut);
text-transform: uppercase;
margin-bottom: 2rem;
overflow: hidden;
}
.eyebrow-dot {
width: 8px; height: 8px;
background-color: var(--cyan);
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.eyebrow-dot::after {
content: '';
position: absolute;
top: -4px; left: -4px; right: -4px; bottom: -4px;
border: 1px solid var(--cyan);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
/* Split-text: por defecto VISIBLE. Solo se oculta cuando hay motion. */
.split-line { overflow: hidden; display: block; }
.split-word { display: inline-block; }
html.motion-ready .split-word { transform: translateY(110%); transform-origin: top left; }
/* ============================== Botones ================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
border-radius: 40px;
font-family: var(--font-main);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: all var(--t-fast);
cursor: pointer;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-d) 100%);
color: var(--deep-3);
box-shadow: 0 4px 15px rgba(79, 184, 196, 0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(79, 184, 196, 0.4); }
.btn-ghost { background: transparent; color: var(--txt); border: 1px solid rgba(255,255,255,0.2); }
.btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.4); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 2px;
}
/* ============================== Glass ==================================== */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
border: var(--border-soft);
border-radius: var(--radius);
padding: 40px;
position: relative;
overflow: hidden;
}
/* =============================== Nav ==================================== */
.nav {
position: fixed;
top: 0; left: 0; width: 100%;
height: var(--nav-height);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
z-index: 1000;
transition: transform 0.4s var(--ease-out);
background: rgba(6, 18, 32, 0.8);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
border-bottom: var(--border-soft);
}
.nav.hidden { transform: translateY(-100%); }
.nav-logo {
display: flex; align-items: center; gap: 12px;
text-decoration: none; color: var(--txt);
font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em;
}
.nav-logo .brand-mark { width: 32px; height: 32px; display: block; flex-shrink: 0; }
.nav-links { display: flex; gap: 40px; }
.nav-links a {
color: var(--txt-mut); text-decoration: none;
font-size: 0.95rem; font-weight: 500; transition: color var(--t-fast);
}
.nav-links a:hover, .nav-links a.active { color: var(--txt); }
.nav-links a.active { color: var(--gold); }
.nav-cta { padding: 10px 24px; font-size: 0.9rem; }
.burger {
display: none;
cursor: pointer;
background: none; border: none; padding: 6px;
color: var(--txt);
}
.burger svg { width: 24px; height: 24px; stroke: currentColor; display: block; }
/* --------- Menú móvil (overlay, generado por adnas.js) --------- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(6, 18, 32, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
/* oculto por defecto; sin depender de JS para el estado base */
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a {
color: var(--txt);
text-decoration: none;
font-family: var(--font-main);
font-weight: 700;
font-size: 2rem;
letter-spacing: -0.01em;
padding: 12px 24px;
transition: color var(--t-fast);
}
.mobile-menu a:hover, .mobile-menu a.active { color: var(--gold); }
/* el clon conserva la clase .nav-cta (display:none en móvil): forzar visible aquí */
.mobile-menu .mm-cta { display: inline-flex; margin-top: 24px; font-size: 1rem; }
.mobile-menu .mm-logo { margin-bottom: 26px; line-height: 0; }
.mobile-menu .mm-logo .brand-mark { width: 48px; height: 48px; }
.mobile-menu .mm-close {
position: absolute;
top: 24px; right: 5%;
background: none; border: none; cursor: pointer;
color: var(--txt); padding: 8px;
}
.mobile-menu .mm-close svg { width: 28px; height: 28px; stroke: currentColor; }
body.menu-open { overflow: hidden; }
/* ============================ Estructura ================================ */
.section { padding: 120px 5%; position: relative; }
/* ============================ Componentes =============================== */
/* badge / pill */
.badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 16px; border-radius: 20px;
background: rgba(79, 184, 196, 0.1); color: var(--cyan);
font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 20px;
}
.badge.badge-soon { background: rgba(212, 168, 76, 0.1); color: var(--gold); }
.pill {
display: inline-block; padding: 4px 10px; border-radius: 6px;
font-family: var(--font-mono); font-size: 0.72rem;
}
/* hc-row (label → valor) para datos tabulares */
.hc-row {
display: flex; justify-content: space-between; align-items: center;
padding: 15px 0; border-bottom: var(--border-soft);
}
.hc-row:last-child { border-bottom: none; }
.hc-label { font-size: 0.9rem; color: var(--txt-mut); }
.hc-val { font-family: var(--font-mono); font-weight: 700; }
.hc-val.highlight { color: var(--cyan); font-size: 1.5rem; }
.hc-total {
margin-top: 20px; padding-top: 20px; border-top: var(--border-mid);
}
/* alert-card */
.alerts-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px; margin-top: 60px;
}
.alert-card {
background: rgba(255,255,255,0.02);
border: var(--border-soft);
border-radius: var(--radius-sm);
padding: 30px; position: relative;
}
.alert-date {
font-family: var(--font-mono); font-size: 0.8rem; color: var(--txt-dim);
margin-bottom: 15px; display: block;
}
.alert-source {
display: inline-block; padding: 4px 10px; border-radius: 4px;
font-size: 0.75rem; font-weight: 700; margin-bottom: 15px;
text-transform: uppercase; letter-spacing: 0.5px;
}
.src-sunat { background: rgba(79, 184, 196, 0.12); color: var(--src-sunat); }
.src-peruano { background: rgba(212, 168, 76, 0.12); color: var(--src-peruano); }
.src-mincetur{ background: rgba(139, 163, 196, 0.12); color: var(--src-mincetur); }
.alert-title { font-size: 1.1rem; line-height: 1.5; }
.alert-summary { color: var(--txt-mut); font-size: 0.92rem; line-height: 1.6; margin-top: 12px; }
/* pill-card (scroll-track) */
.scroll-track {
display: flex; gap: 20px; overflow-x: auto;
padding: 20px 0 40px; scrollbar-width: none;
}
.scroll-track::-webkit-scrollbar { display: none; }
.pill-card {
min-width: 300px;
background: rgba(255,255,255,0.02);
border: var(--border-soft);
border-radius: var(--radius-xs);
padding: 30px; position: relative;
}
.pill-tag {
position: absolute; top: 20px; right: 20px;
font-family: var(--font-mono); font-size: 0.7rem; color: var(--gold);
background: rgba(212, 168, 76, 0.1); padding: 4px 8px; border-radius: 4px;
}
.pill-icon { width: 40px; height: 40px; margin-bottom: 20px; stroke: var(--txt-mut); fill: none; stroke-width: 1.5; }
.pill-title { font-size: 1.25rem; margin-bottom: 10px; }
.pill-desc { color: var(--txt-dim); font-size: 0.9rem; line-height: 1.5; }
/* step */
.step {
display: flex; gap: 20px; margin-bottom: 30px; padding: 20px;
background: rgba(255,255,255,0.02); border-radius: var(--radius-sm);
border: 1px solid rgba(255,255,255,0.03); transition: transform var(--t-fast), background var(--t-fast);
}
.step:hover { transform: translateX(10px); background: rgba(255,255,255,0.04); }
.step-num {
width: 40px; height: 40px; border-radius: 50%;
background: rgba(79, 184, 196, 0.1); color: var(--cyan);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-weight: 700; flex-shrink: 0;
}
/* stats */
.stats { display: flex; gap: 40px; padding-top: 30px; border-top: var(--border-mid); }
.stat-item { display: flex; flex-direction: column; gap: 5px; }
.stat-num { font-size: 2rem; font-weight: 800; font-family: var(--font-mono); }
.stat-label { color: var(--txt-mut); font-size: 0.85rem; text-transform: uppercase; }
/* form group (email) */
.form-group {
display: flex; max-width: 500px; margin: 40px auto 20px;
background: rgba(0,0,0,0.2); border: var(--border-mid);
border-radius: 40px; padding: 5px;
}
.form-group input {
flex: 1; background: transparent; border: none; padding: 0 20px;
color: var(--txt); font-family: var(--font-main); outline: none; min-width: 0;
}
.form-group input::placeholder { color: var(--txt-dim); }
.form-group button { border: none; padding: 12px 24px; white-space: nowrap; }
/* footer */
.footer {
margin-top: 80px; display: flex; justify-content: space-between; align-items: center;
border-top: var(--border-soft); padding-top: 30px;
color: var(--txt-dim); font-size: 0.85rem; gap: 16px; flex-wrap: wrap;
}
.coords { font-family: var(--font-mono); font-size: 0.75rem; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-links a { color: var(--txt-mut); text-decoration: none; font-size: 0.85rem; transition: color var(--t-fast); }
.foot-links a:hover, .foot-links a.active { color: var(--txt); }
.foot-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: -0.02em; color: var(--txt); }
.foot-logo .brand-mark { width: 24px; height: 24px; }
/* ========================= Controles de forma ========================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 22px; }
.field-label {
display: block; font-size: 0.9rem; color: var(--txt); margin-bottom: 10px; font-weight: 500;
}
.field-label .opt, .field-label .tip {
font-family: var(--font-mono); font-size: 0.72rem; color: var(--txt-dim); font-weight: 400;
}
.field-label .tip { color: var(--cyan); }
.input, .select, textarea.input {
width: 100%; padding: 14px 16px;
background: rgba(0,0,0,0.25);
border: var(--border-mid); border-radius: 12px;
color: var(--txt); font-family: var(--font-mono); font-size: 1rem;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--txt-dim); }
.input:focus, .select:focus {
border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79,184,196,0.15); outline: none;
}
.select {
cursor: pointer; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234FB8C4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
.select option { background: var(--deep-2); color: var(--txt); }
/* Chips (Ad Valorem) y pills de filtro */
.chips, .filter-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.chip, .fpill {
padding: 9px 16px; border-radius: 20px;
background: rgba(255,255,255,0.03); border: var(--border-mid);
color: var(--txt-mut); font-family: var(--font-mono); font-size: 0.85rem;
cursor: pointer; transition: all var(--t-fast); user-select: none;
}
.chip:hover, .fpill:hover { color: var(--txt); border-color: rgba(255,255,255,0.25); }
.chip.active, .fpill.active, .fpill[aria-pressed="true"] {
background: rgba(79,184,196,0.12); border-color: var(--cyan); color: var(--cyan);
}
/* Pulso al cambiar un valor numérico */
@keyframes valpulse { 0% { color: var(--cyan); } 100% { color: inherit; } }
.pulse { animation: valpulse 0.5s ease; }
/* =========================== Estados carga ============================= */
.state-msg { text-align: center; padding: 60px 20px; color: var(--txt-mut); }
.state-msg .emoji { font-size: 2.5rem; margin-bottom: 12px; }
.spinner {
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--cyan);
display: inline-block; animation: spin 0.7s linear infinite; vertical-align: -3px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton {
background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 37%, rgba(255,255,255,0.04) 63%);
background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
/* ====================== prefers-reduced-motion ========================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.grain { display: none; }
/* sin trazado: mostrar el logo COMPLETO (el JS oculta el preloader al instante) */
.preloader-mark .pl-fills { opacity: 1; }
.preloader-mark .tr { display: none; }
.preloader-text { opacity: 1; }
html.motion-ready .split-word { transform: none; }
}
/* ============================ Responsive =============================== */
@media (max-width: 900px) {
.nav-links, .nav-cta { display: none; }
.burger { display: block; }
.section { padding: 90px 6%; }
.h-large { font-size: 3rem; }
}