html { scroll-behavior: smooth; overflow-x: hidden; }
/* Red de seguridad contra desborde horizontal (brief §51: nunca
permitir overflow horizontal) - antes solo lo tenía, si algo
se pasaba de ancho en / o el propio el
navegador agrandaba el área de scroll total, y el contenido
centrado (mx-auto) quedaba pegado a la izquierda con un hueco
fantasma a la derecha (exactamente el bug reportado en "Quiero
sumar" en tablet). */
body { overflow-x: hidden; }
/* ============================================================
MUNDO — sistema de fondo atmosférico (rediseño sobre el flyer
de "agencias fundadoras": negro azulado + verde lima como guía
visual). Capas, de atrás hacia adelante:
1) color base oscuro (body background-color)
2) glow radial verde muy tenue
3) glow radial petróleo/turquesa
4) topografía (líneas de curva de nivel, .bg-topo)
5) puntos (.bg-dots)
6) rutas decorativas (SVG inline en el HTML, no acá - necesitan
posicionarse a mano por sección, ver agencias.html)
============================================================ */
body {
background-color: #020B0F;
background-image:
radial-gradient(ellipse 900px 600px at 90% -8%, rgba(183,240,0,0.10), transparent 60%),
radial-gradient(ellipse 800px 600px at -10% 25%, rgba(87,217,154,0.08), transparent 60%),
radial-gradient(ellipse 900px 700px at 100% 85%, rgba(10,35,33,0.9), transparent 65%);
background-attachment: fixed;
}
.text-gradient-gold {
background: linear-gradient(90deg, #F5F5F2, #B7F000 55%, #57D99A);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Tres niveles de glow (brief §32) - nunca el mismo peso para todo. */
.glow-gold-sm { box-shadow: 0 0 0 1px rgba(183,240,0,0.20), 0 0 14px -6px rgba(183,240,0,0.30); }
.glow-gold { box-shadow: 0 0 0 1px rgba(183,240,0,0.20), 0 0 30px -10px rgba(183,240,0,0.30); }
.glow-gold-lg { box-shadow: 0 0 0 1px rgba(183,240,0,0.25), 0 0 50px -14px rgba(183,240,0,0.28); }
.card-neon {
background: rgba(10,25,24,0.70);
border: 1px solid rgba(245,245,242,0.08);
backdrop-filter: blur(16px);
box-shadow: 0 20px 60px -20px rgba(0,0,0,0.55);
}
.organic-frame {
clip-path: polygon(8% 0%, 92% 0%, 100% 10%, 100% 88%, 90% 100%, 4% 100%, 0% 90%, 0% 6%);
}
.dashed-orbit {
border: 1.5px dashed rgba(183,240,0,0.35);
border-radius: 9999px;
}
/* Topografía - líneas de curva de nivel, tile repetido, MUY sutil a
propósito (brief §10: 0.08-0.18 - la primera versión de esto quedó
demasiado marcada/neón, corregido: opacidad de cada trazo bajada
dentro del propio SVG en vez de solo en el contenedor, más el
contenedor mismo mucho más tenue). Da sensación de mapa/territorio
sin competir con el contenido - nunca debe "notarse" a primera vista. */
.bg-topo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%2357D99A' stroke-width='0.75'%3E%3Cpath d='M-20 60 C 60 20, 120 90, 200 50 S 340 10, 440 70' opacity='0.35'/%3E%3Cpath d='M-20 110 C 70 70, 130 140, 210 100 S 350 60, 440 120' opacity='0.28'/%3E%3Cpath d='M-20 170 C 50 220, 140 150, 220 190 S 360 240, 440 180' opacity='0.3'/%3E%3Cpath d='M-20 250 C 80 290, 150 220, 240 260 S 370 310, 440 250' opacity='0.22'/%3E%3Cpath d='M-20 320 C 60 360, 160 300, 230 340 S 380 380, 440 330' opacity='0.25'/%3E%3Cpath d='M-20 30 C 40 -10, 100 40, 180 5' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 420px 420px;
opacity: 0.35;
mix-blend-mode: screen;
}
/* Puntos - grupos localizados, no todo el fondo (brief §12). Aplicar
sobre un contenedor chico posicionado a mano, no en . */
.bg-dots {
background-image: radial-gradient(circle, rgba(183,240,0,0.5) 1.5px, transparent 1.5px);
background-size: 22px 22px;
opacity: 0.18;
}
/* phone mockup */
.phone {
width: 260px;
aspect-ratio: 1080 / 2340;
border-radius: 34px;
border: 6px solid #050f0e;
box-shadow: 0 0 0 2px rgba(183,240,0,0.30), 0 25px 60px -20px rgba(0,0,0,0.7), 0 0 50px -10px rgba(183,240,0,0.30);
overflow: hidden;
position: relative;
background: #000;
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone::after {
content: '';
position: absolute;
top: 10px; left: 50%; transform: translateX(-50%);
width: 70px; height: 18px; border-radius: 12px;
background: #050f0e;
}
@media (min-width: 768px) {
.phone { width: 300px; }
}
.float-chip { animation: floaty 6s ease-in-out infinite; }
.float-chip.delay { animation-delay: 1.4s; }
@keyframes floaty {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.grain {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
}
.nav-blur {
backdrop-filter: blur(14px);
background: rgba(2,11,15,0.75);
}
/* vs comparison table (comunidades page) */
.vs-row { transition: background 0.2s; }
.vs-row:hover { background: rgba(183,240,0,0.04); }
.vs-icon {
width: 42px; height: 42px; border-radius: 9999px;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem; flex-shrink: 0;
}
/* ============================================================
Headline compacto (brief §16-19): interlineado ajustado + tracking
negativo para titulares grandes, nunca line-height 1.5 en un hero.
============================================================ */
.headline-tight { line-height: 0.92; letter-spacing: -0.03em; }
/* Ruta decorativa (SVG inline en el HTML) - la línea en sí no lleva
estilo acá, solo el contenedor que la deja "salir" de su columna
(brief §39: elementos decorativos fuera del grid rígido). */
.route-decor { position: absolute; pointer-events: none; z-index: 1; }
/* Hover premium (brief §48) - nunca scale exagerado. */
.lift-hover { transition: transform 700ms ease-out, box-shadow 700ms ease-out; }
.lift-hover:hover { transform: translateY(-4px); }
.card-stat {
background: rgba(10,25,24,0.55);
border: 1px solid rgba(245,245,242,0.08);
backdrop-filter: blur(12px);
}
.card-featured {
background: rgba(10,25,24,0.75);
border: 1px solid rgba(183,240,0,0.35);
backdrop-filter: blur(16px);
}
/* Carta holográfica, versión simple (la anterior con textura de rayas
repetidas rompía el render - aparecían bandas oscuras, no un holo).
Una sola banda de brillo multicolor en movimiento continuo, más el
aro sutil de acompañamiento. Nada de texturas repetidas ni tilt 3D -
eran las dos cosas que causaban el problema visual. */
.card-pulse {
position: relative;
overflow: hidden;
animation: pulseGlowBorder 3.4s ease-in-out infinite;
}
.card-pulse::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid rgba(183,240,0,0.5);
pointer-events: none;
z-index: 2;
animation: pulseGlowRing 3.4s ease-in-out infinite;
}
/* Foil arcoíris real (técnica de background-position animado, no un
div desplazado - más estable, sin artefactos de render). Espectro
completo de 7 tonos, como el reflejo de un CD/holograma, más una
franja de brillo blanco que le da el "golpe de luz" característico
de una carta al moverla contra la luz. */
.card-pulse .holo-sweep {
position: absolute;
inset: 0;
background:
linear-gradient(
115deg,
transparent 10%,
rgba(255,255,255,0.9) 19%,
transparent 28%
),
linear-gradient(
115deg,
#ff5ecb 0%,
#ff9c5e 14%,
#ffe75e 28%,
#7dff5e 42%,
#5ef0ff 56%,
#5e7dff 70%,
#c05eff 84%,
#ff5ecb 100%
);
background-size: 250% 250%, 320% 320%;
background-position: 0% 0%, 0% 0%;
background-repeat: no-repeat, no-repeat;
mix-blend-mode: screen;
opacity: 0.22;
pointer-events: none;
z-index: 1;
animation: holoSweep 5s ease-in-out infinite;
}
.card-pulse > * { position: relative; z-index: 3; }
@keyframes pulseGlowBorder {
0%, 100% { box-shadow: 0 0 0 1px rgba(183,240,0,0.25), 0 0 24px -8px rgba(183,240,0,0.35); }
50% { box-shadow: 0 0 0 1px rgba(183,240,0,0.45), 0 0 46px -6px rgba(183,240,0,0.55); }
}
@keyframes pulseGlowRing {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.85; }
}
/* Barrido CONTINUO por background-position (no transform en un div
desplazado - esa version anterior salía desalineada y con colores
lavados). Las dos capas (brillo blanco + espectro) se mueven a
velocidades levemente distintas para que no se sientan "pegadas".
IMPORTANTE: el recorrido tiene que quedarse estrictamente entre 0%
y 100% - con background-size > 100%, salirse de ese rango (probado:
-20% y 120% en una version anterior) deja al degradé sin cubrir toda
la tarjeta, y aparece un corte recto donde se ve la tarjeta "pelada"
por debajo. Con 0-100% la cobertura está garantizada siempre. */
@keyframes holoSweep {
0% { background-position: 0% 0%, 0% 100%; }
50% { background-position: 100% 100%, 100% 0%; }
100% { background-position: 0% 0%, 0% 100%; }
}