/* ==========================================================
estilo-bio.css
Sistema visual para Biosfera Esforzados
Inspirado en mapa modular: DB → Core Admin → Módulos → Producto → IA
Uso sugerido: /public/css/estilo-bio.css o /assets/css/estilo-bio.css
========================================================== */
:root {
/* Base */
--bio-bg-950: #020617;
--bio-bg-900: #050b1f;
--bio-bg-850: #071127;
--bio-bg-800: #08172f;
--bio-panel: rgba(8, 18, 46, 0.72);
--bio-panel-strong: rgba(9, 22, 58, 0.88);
--bio-panel-soft: rgba(15, 28, 70, 0.44);
--bio-border: rgba(117, 168, 255, 0.24);
--bio-border-strong: rgba(117, 168, 255, 0.46);
/* Text */
--bio-text: #eef6ff;
--bio-text-soft: #c7d7f5;
--bio-text-muted: #8da3cc;
--bio-text-dim: #65789d;
/* Layer colors */
--bio-blue: #348cff;
--bio-cyan: #22d3ee;
--bio-purple: #a855f7;
--bio-green: #8be23f;
--bio-gold: #facc15;
--bio-orange: #fb923c;
--bio-red: #fb7185;
--bio-white: #ffffff;
/* Glows */
--bio-glow-blue: 0 0 22px rgba(52, 140, 255, 0.55), 0 0 70px rgba(52, 140, 255, 0.25);
--bio-glow-cyan: 0 0 22px rgba(34, 211, 238, 0.55), 0 0 70px rgba(34, 211, 238, 0.22);
--bio-glow-purple: 0 0 22px rgba(168, 85, 247, 0.58), 0 0 70px rgba(168, 85, 247, 0.25);
--bio-glow-green: 0 0 22px rgba(139, 226, 63, 0.55), 0 0 70px rgba(139, 226, 63, 0.24);
--bio-glow-gold: 0 0 22px rgba(250, 204, 21, 0.58), 0 0 80px rgba(250, 204, 21, 0.26);
/* Geometry */
--bio-radius-xs: 8px;
--bio-radius-sm: 12px;
--bio-radius-md: 18px;
--bio-radius-lg: 26px;
--bio-radius-xl: 34px;
--bio-radius-pill: 999px;
/* Shadows */
--bio-shadow-soft: 0 16px 50px rgba(0, 0, 0, 0.38);
--bio-shadow-hard: 0 28px 90px rgba(0, 0, 0, 0.58);
/* Layout */
--bio-container: 1280px;
--bio-section-y: clamp(56px, 8vw, 110px);
--bio-gap: clamp(16px, 2.2vw, 28px);
/* Motion */
--bio-ease: cubic-bezier(.22, 1, .36, 1);
--bio-fast: 160ms var(--bio-ease);
--bio-normal: 260ms var(--bio-ease);
--bio-slow: 760ms var(--bio-ease);
}
/* ==========================================================
Reset suave
========================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-height: 100%;
scroll-behavior: smooth;
color-scheme: dark;
}
body {
min-height: 100%;
margin: 0;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--bio-text);
background:
radial-gradient(circle at 50% -10%, rgba(55, 96, 255, 0.22), transparent 38%),
radial-gradient(circle at 5% 15%, rgba(34, 211, 238, 0.12), transparent 32%),
radial-gradient(circle at 96% 14%, rgba(250, 204, 21, 0.10), transparent 31%),
linear-gradient(180deg, #01030c 0%, var(--bio-bg-950) 46%, #020617 100%);
background-attachment: fixed;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -2;
background-image:
linear-gradient(rgba(91, 141, 255, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(91, 141, 255, 0.055) 1px, transparent 1px);
background-size: 52px 52px;
mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 72%);
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent),
radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.38) 80%);
opacity: .55;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: var(--bio-cyan);
}
img,
svg {
max-width: 100%;
height: auto;
}
button,
input,
textarea,
select {
font: inherit;
}
::selection {
color: #061022;
background: var(--bio-cyan);
}
/* ==========================================================
Contenedores y secciones
========================================================== */
.bio-container {
width: min(100% - 32px, var(--bio-container));
margin-inline: auto;
}
.bio-section {
position: relative;
padding-block: var(--bio-section-y);
}
.bio-section--compact {
padding-block: clamp(36px, 5vw, 72px);
}
.bio-stack {
display: grid;
gap: var(--bio-gap);
}
.bio-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--bio-gap);
}
.bio-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bio-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bio-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bio-grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
/* ==========================================================
Tipografía futurista
========================================================== */
.bio-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
color: var(--bio-cyan);
font-size: clamp(.78rem, 1.1vw, .92rem);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .16em;
}
.bio-eyebrow::before {
content: "";
width: 38px;
height: 1px;
background: linear-gradient(90deg, transparent, currentColor);
box-shadow: 0 0 14px currentColor;
}
.bio-title {
margin: 0;
font-size: clamp(2.4rem, 7vw, 6.1rem);
line-height: .92;
font-weight: 950;
letter-spacing: -0.065em;
text-transform: uppercase;
color: #f8fbff;
text-shadow:
0 2px 0 rgba(255,255,255,.22),
0 0 28px rgba(80, 146, 255, .32),
0 12px 46px rgba(0,0,0,.58);
}
.bio-title .bio-gradient,
.bio-gradient-text {
background: linear-gradient(90deg, #ffffff 0%, #8ec5ff 35%, #348cff 58%, #a855f7 84%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 18px rgba(52, 140, 255, .28));
}
.bio-subtitle {
margin: 0;
color: var(--bio-text-soft);
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
line-height: 1.55;
max-width: 850px;
}
.bio-kicker-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
color: var(--bio-text-muted);
font-size: clamp(.95rem, 1.2vw, 1.08rem);
font-weight: 750;
}
.bio-kicker-row span {
display: inline-flex;
align-items: center;
gap: 10px;
}
.bio-kicker-row span:not(:last-child)::after {
content: "→";
color: var(--bio-text-dim);
margin-left: 4px;
}
.bio-blue-text { color: var(--bio-blue); }
.bio-cyan-text { color: var(--bio-cyan); }
.bio-purple-text { color: var(--bio-purple); }
.bio-green-text { color: var(--bio-green); }
.bio-gold-text { color: var(--bio-gold); }
/* ==========================================================
Hero tipo mapa
========================================================== */
.bio-hero {
position: relative;
min-height: 100svh;
padding: clamp(26px, 4vw, 56px) 0 clamp(48px, 8vw, 110px);
overflow: hidden;
}
.bio-hero::before,
.bio-hero::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(10px);
}
.bio-hero::before {
width: 560px;
height: 560px;
right: -160px;
top: 10px;
background: radial-gradient(circle, rgba(250,204,21,.13), transparent 62%);
}
.bio-hero::after {
width: 720px;
height: 720px;
left: -260px;
bottom: -190px;
background: radial-gradient(circle, rgba(52,140,255,.16), transparent 62%);
}
.bio-hero__header {
position: relative;
z-index: 2;
display: grid;
gap: 16px;
margin-bottom: clamp(28px, 4vw, 56px);
}
.bio-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 12px;
}
/* ==========================================================
Botones y enlaces de acción
========================================================== */
.bio-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 12px 18px;
border: 1px solid var(--bio-border-strong);
border-radius: var(--bio-radius-pill);
color: var(--bio-text);
background:
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
rgba(11, 25, 60, .65);
box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, var(--bio-shadow-soft);
font-weight: 800;
letter-spacing: .01em;
cursor: pointer;
transition: transform var(--bio-normal), border-color var(--bio-normal), box-shadow var(--bio-normal), color var(--bio-normal);
overflow: hidden;
}
.bio-btn::before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
transform: translateX(-110%);
transition: transform 700ms var(--bio-ease);
}
.bio-btn:hover {
transform: translateY(-2px);
color: #fff;
border-color: rgba(34, 211, 238, .72);
box-shadow: var(--bio-glow-cyan), var(--bio-shadow-soft);
}
.bio-btn:hover::before {
transform: translateX(110%);
}
.bio-btn--primary {
color: #041020;
border-color: rgba(34, 211, 238, .92);
background: linear-gradient(135deg, #22d3ee, #348cff 54%, #a855f7);
box-shadow: var(--bio-glow-cyan), var(--bio-shadow-soft);
}
.bio-btn--gold {
color: #151004;
border-color: rgba(250,204,21,.92);
background: linear-gradient(135deg, #fde68a, #facc15 48%, #fb923c);
box-shadow: var(--bio-glow-gold), var(--bio-shadow-soft);
}
.bio-btn--ghost {
color: var(--bio-text-soft);
background: rgba(9, 22, 58, .46);
}
/* ==========================================================
Paneles de cristal
========================================================== */
.bio-glass,
.bio-card,
.bio-panel {
position: relative;
border: 1px solid var(--bio-border);
border-radius: var(--bio-radius-lg);
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.015)),
var(--bio-panel);
box-shadow: var(--bio-shadow-soft), inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.bio-card {
padding: clamp(18px, 2.3vw, 28px);
overflow: hidden;
transition: transform var(--bio-normal), border-color var(--bio-normal), box-shadow var(--bio-normal), background var(--bio-normal);
}
.bio-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(circle at 30% 0%, rgba(255,255,255,.16), transparent 35%),
linear-gradient(120deg, transparent, rgba(255,255,255,.05), transparent);
opacity: .8;
}
.bio-card:hover {
transform: translateY(-5px);
border-color: var(--bio-border-strong);
box-shadow: var(--bio-glow-blue), var(--bio-shadow-hard);
}
.bio-card__icon {
width: 54px;
height: 54px;
display: inline-grid;
place-items: center;
border-radius: 16px;
color: var(--bio-cyan);
border: 1px solid rgba(34, 211, 238, .38);
background: rgba(34, 211, 238, .08);
box-shadow: var(--bio-glow-cyan);
margin-bottom: 16px;
}
.bio-card__title {
position: relative;
margin: 0 0 8px;
font-size: clamp(1.05rem, 1.6vw, 1.35rem);
line-height: 1.1;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .02em;
}
.bio-card__text {
position: relative;
margin: 0;
color: var(--bio-text-soft);
line-height: 1.55;
}
.bio-card--blue { --bio-accent: var(--bio-blue); border-color: rgba(52,140,255,.34); }
.bio-card--cyan { --bio-accent: var(--bio-cyan); border-color: rgba(34,211,238,.34); }
.bio-card--purple { --bio-accent: var(--bio-purple); border-color: rgba(168,85,247,.36); }
.bio-card--green { --bio-accent: var(--bio-green); border-color: rgba(139,226,63,.34); }
.bio-card--gold { --bio-accent: var(--bio-gold); border-color: rgba(250,204,21,.38); }
.bio-card--blue .bio-card__icon { color: var(--bio-blue); border-color: rgba(52,140,255,.45); background: rgba(52,140,255,.09); box-shadow: var(--bio-glow-blue); }
.bio-card--cyan .bio-card__icon { color: var(--bio-cyan); border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.09); box-shadow: var(--bio-glow-cyan); }
.bio-card--purple .bio-card__icon { color: var(--bio-purple); border-color: rgba(168,85,247,.45); background: rgba(168,85,247,.09); box-shadow: var(--bio-glow-purple); }
.bio-card--green .bio-card__icon { color: var(--bio-green); border-color: rgba(139,226,63,.45); background: rgba(139,226,63,.09); box-shadow: var(--bio-glow-green); }
.bio-card--gold .bio-card__icon { color: var(--bio-gold); border-color: rgba(250,204,21,.45); background: rgba(250,204,21,.09); box-shadow: var(--bio-glow-gold); }
/* ==========================================================
Mapa modular por capas
========================================================== */
.bio-map {
position: relative;
z-index: 2;
display: grid;
gap: clamp(18px, 2.4vw, 34px);
padding: clamp(14px, 2vw, 24px) 0;
}
.bio-map::before {
content: "";
position: absolute;
inset: 6% -8% 3%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse at center, rgba(52,140,255,.12), transparent 62%),
radial-gradient(ellipse at 50% 35%, rgba(168,85,247,.11), transparent 54%),
radial-gradient(ellipse at 50% 18%, rgba(250,204,21,.10), transparent 46%);
filter: blur(2px);
}
.bio-layer {
position: relative;
display: grid;
gap: clamp(14px, 1.6vw, 22px);
padding: clamp(18px, 2.4vw, 32px);
border: 1px solid rgba(117, 168, 255, .25);
border-radius: clamp(26px, 4vw, 54px);
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
rgba(5, 15, 40, .54);
box-shadow: var(--bio-shadow-soft), inset 0 1px 0 rgba(255,255,255,.07);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
overflow: hidden;
}
.bio-layer::before {
content: "";
position: absolute;
inset: -22px 4% auto;
height: 76px;
border: 2px solid currentColor;
border-bottom: 0;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
opacity: .48;
filter: blur(.2px) drop-shadow(0 0 18px currentColor);
pointer-events: none;
}
.bio-layer::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent),
radial-gradient(ellipse at 50% -15%, currentColor, transparent 40%);
opacity: .14;
}
.bio-layer--data {
color: var(--bio-blue);
border-color: rgba(52,140,255,.42);
box-shadow: var(--bio-glow-blue), var(--bio-shadow-soft);
}
.bio-layer--core {
color: var(--bio-cyan);
border-color: rgba(34,211,238,.42);
box-shadow: var(--bio-glow-cyan), var(--bio-shadow-soft);
}
.bio-layer--modules {
color: var(--bio-purple);
border-color: rgba(168,85,247,.42);
box-shadow: var(--bio-glow-purple), var(--bio-shadow-soft);
}
.bio-layer--product {
color: var(--bio-green);
border-color: rgba(139,226,63,.42);
box-shadow: var(--bio-glow-green), var(--bio-shadow-soft);
}
.bio-layer--ai {
color: var(--bio-gold);
border-color: rgba(250,204,21,.46);
box-shadow: var(--bio-glow-gold), var(--bio-shadow-soft);
}
.bio-layer__head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.bio-layer__label {
display: inline-flex;
align-items: center;
gap: 12px;
color: currentColor;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .06em;
text-shadow: 0 0 16px currentColor;
}
.bio-layer__number {
width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border-radius: 50%;
color: currentColor;
border: 1px solid currentColor;
background: rgba(255,255,255,.035);
box-shadow: 0 0 16px currentColor;
font-weight: 950;
}
.bio-layer__note {
color: var(--bio-text-soft);
font-size: .95rem;
line-height: 1.45;
max-width: 360px;
}
.bio-layer__body {
position: relative;
z-index: 1;
}
.bio-layer__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
gap: clamp(12px, 1.4vw, 18px);
}
.bio-module-card {
position: relative;
min-height: 132px;
padding: 18px 16px;
display: grid;
align-content: center;
justify-items: center;
gap: 10px;
text-align: center;
color: currentColor;
border: 1px solid color-mix(in srgb, currentColor 52%, transparent);
border-radius: 14px;
background:
linear-gradient(180deg, color-mix(in srgb, currentColor 14%, transparent), rgba(255,255,255,.015)),
rgba(2, 8, 23, .55);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 38px rgba(0,0,0,.28);
overflow: hidden;
transition: transform var(--bio-normal), box-shadow var(--bio-normal), border-color var(--bio-normal);
}
.bio-module-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, color-mix(in srgb, currentColor 24%, transparent), transparent 50%);
opacity: .75;
pointer-events: none;
}
.bio-module-card:hover {
transform: translateY(-4px) scale(1.01);
border-color: currentColor;
box-shadow: 0 0 22px color-mix(in srgb, currentColor 46%, transparent), 0 22px 46px rgba(0,0,0,.38);
}
.bio-module-card__icon {
position: relative;
width: 44px;
height: 44px;
display: grid;
place-items: center;
filter: drop-shadow(0 0 12px currentColor);
}
.bio-module-card__title {
position: relative;
margin: 0;
color: currentColor;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .035em;
}
.bio-module-card__text {
position: relative;
margin: 0;
color: var(--bio-text-soft);
font-size: .92rem;
line-height: 1.38;
}
.bio-module-card--blue { color: var(--bio-blue); }
.bio-module-card--cyan { color: var(--bio-cyan); }
.bio-module-card--purple { color: var(--bio-purple); }
.bio-module-card--green { color: var(--bio-green); }
.bio-module-card--gold { color: var(--bio-gold); }
.bio-module-card--orange { color: var(--bio-orange); }
.bio-module-card--red { color: var(--bio-red); }
/* Conectores verticales entre capas */
.bio-connector {
width: 2px;
min-height: 34px;
margin-inline: auto;
background: linear-gradient(180deg, transparent, currentColor, transparent);
box-shadow: 0 0 16px currentColor;
opacity: .78;
}
.bio-connector--blue { color: var(--bio-blue); }
.bio-connector--cyan { color: var(--bio-cyan); }
.bio-connector--purple { color: var(--bio-purple); }
.bio-connector--green { color: var(--bio-green); }
.bio-connector--gold { color: var(--bio-gold); }
/* ==========================================================
Timeline lateral como en el mapa
========================================================== */
.bio-timeline {
position: relative;
display: grid;
gap: 22px;
padding-left: 8px;
}
.bio-timeline::before {
content: "";
position: absolute;
left: 27px;
top: 22px;
bottom: 22px;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(117,168,255,.48), transparent);
}
.bio-timeline-item {
position: relative;
display: grid;
grid-template-columns: 54px 1fr;
gap: 14px;
align-items: start;
}
.bio-timeline-item__num {
position: relative;
z-index: 1;
width: 54px;
height: 54px;
display: grid;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
color: currentColor;
background: rgba(2, 8, 23, .86);
box-shadow: 0 0 16px currentColor;
font-size: 1.35rem;
font-weight: 950;
}
.bio-timeline-item__title {
margin: 5px 0 6px;
color: currentColor;
text-transform: uppercase;
font-weight: 950;
letter-spacing: .03em;
}
.bio-timeline-item__text {
margin: 0;
color: var(--bio-text-soft);
line-height: 1.5;
}
.bio-timeline-item--blue { color: var(--bio-blue); }
.bio-timeline-item--cyan { color: var(--bio-cyan); }
.bio-timeline-item--purple { color: var(--bio-purple); }
.bio-timeline-item--green { color: var(--bio-green); }
.bio-timeline-item--gold { color: var(--bio-gold); }
/* ==========================================================
Chips, badges y estados de madurez
========================================================== */
.bio-chip,
.bio-badge {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
min-height: 30px;
padding: 6px 11px;
border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
border-radius: var(--bio-radius-pill);
color: var(--bio-cyan);
background: color-mix(in srgb, currentColor 9%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, currentColor 28%, transparent);
font-size: .78rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .055em;
}
.bio-chip::before,
.bio-badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 10px currentColor;
}
.bio-badge--readonly { color: var(--bio-blue); }
.bio-badge--dryrun { color: var(--bio-purple); }
.bio-badge--controlled { color: var(--bio-green); }
.bio-badge--roadmap { color: var(--bio-gold); }
.bio-badge--blocked { color: var(--bio-red); }
.bio-badge--legacy { color: var(--bio-orange); }
.bio-badge--safe { color: var(--bio-cyan); }
.bio-status-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
/* ==========================================================
Barra inferior de garantías
========================================================== */
.bio-guardrails {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border: 1px solid rgba(84, 132, 255, .44);
border-radius: 14px;
background:
linear-gradient(180deg, rgba(52,140,255,.12), rgba(52,140,255,.035)),
rgba(5, 15, 40, .72);
box-shadow: var(--bio-glow-blue), var(--bio-shadow-soft);
overflow: hidden;
}
.bio-guardrail {
display: flex;
align-items: center;
gap: 14px;
padding: 18px clamp(14px, 2vw, 26px);
color: #75a8ff;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .025em;
border-right: 1px solid rgba(117,168,255,.24);
}
.bio-guardrail:last-child {
border-right: 0;
}
.bio-guardrail__icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
color: currentColor;
filter: drop-shadow(0 0 12px currentColor);
}
/* ==========================================================
Bloque de historia Esforzados → Mailit.click → Biosfera
========================================================== */
.bio-evolution {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 2vw, 24px);
}
.bio-evolution::before {
content: "";
position: absolute;
left: 12%;
right: 12%;
top: 50%;
height: 2px;
background: linear-gradient(90deg, var(--bio-blue), var(--bio-purple), var(--bio-gold));
box-shadow: 0 0 20px rgba(117,168,255,.45);
z-index: 0;
}
.bio-evolution-step {
position: relative;
z-index: 1;
padding: clamp(18px, 2vw, 26px);
border-radius: var(--bio-radius-lg);
border: 1px solid rgba(117,168,255,.30);
background: rgba(5, 15, 40, .82);
box-shadow: var(--bio-shadow-soft);
}
.bio-evolution-step__year {
color: var(--bio-text-muted);
font-size: .82rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .11em;
}
.bio-evolution-step__title {
margin: 10px 0 8px;
font-size: 1.2rem;
font-weight: 950;
}
.bio-evolution-step__text {
margin: 0;
color: var(--bio-text-soft);
line-height: 1.55;
}
/* ==========================================================
Flujo de campaña: Click → Landing → Lead → CRM → Analytics
========================================================== */
.bio-flow {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
}
.bio-flow-step {
position: relative;
flex: 1 1 150px;
min-height: 98px;
padding: 16px;
border: 1px solid rgba(34,211,238,.28);
border-radius: 16px;
background:
radial-gradient(circle at 50% 0%, rgba(34,211,238,.13), transparent 55%),
rgba(5,15,40,.66);
box-shadow: var(--bio-shadow-soft);
}
.bio-flow-step:not(:last-child)::after {
content: "→";
position: absolute;
right: -17px;
top: 50%;
transform: translateY(-50%);
color: var(--bio-cyan);
font-weight: 950;
text-shadow: 0 0 12px var(--bio-cyan);
z-index: 2;
}
.bio-flow-step__label {
color: var(--bio-cyan);
font-weight: 950;
text-transform: uppercase;
letter-spacing: .04em;
}
.bio-flow-step__text {
margin: 8px 0 0;
color: var(--bio-text-soft);
font-size: .92rem;
line-height: 1.35;
}
/* ==========================================================
Cockpit / dashboard visual
========================================================== */
.bio-cockpit {
display: grid;
grid-template-columns: 320px 1fr;
gap: clamp(18px, 2vw, 28px);
align-items: start;
}
.bio-sidebar {
position: sticky;
top: 18px;
padding: 18px;
border: 1px solid rgba(34,211,238,.24);
border-radius: var(--bio-radius-lg);
background: rgba(5, 15, 40, .78);
box-shadow: var(--bio-shadow-soft);
}
.bio-sidebar__title {
margin: 0 0 14px;
color: var(--bio-cyan);
font-weight: 950;
text-transform: uppercase;
letter-spacing: .04em;
}
.bio-nav-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.bio-nav-link {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 11px 12px;
border: 1px solid rgba(117,168,255,.14);
border-radius: 12px;
color: var(--bio-text-soft);
background: rgba(255,255,255,.025);
transition: background var(--bio-normal), border-color var(--bio-normal), color var(--bio-normal), transform var(--bio-normal);
}
.bio-nav-link:hover,
.bio-nav-link.is-active {
color: var(--bio-cyan);
border-color: rgba(34,211,238,.46);
background: rgba(34,211,238,.08);
transform: translateX(3px);
}
.bio-metric-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: 16px;
}
.bio-metric {
position: relative;
padding: 18px;
border: 1px solid rgba(117,168,255,.24);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.018)),
rgba(5,15,40,.68);
box-shadow: var(--bio-shadow-soft);
overflow: hidden;
}
.bio-metric::before {
content: "";
position: absolute;
inset: auto 0 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--bio-cyan), transparent);
box-shadow: 0 0 14px var(--bio-cyan);
}
.bio-metric__label {
color: var(--bio-text-muted);
font-size: .78rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .08em;
}
.bio-metric__value {
margin-top: 7px;
color: #fff;
font-size: clamp(1.55rem, 3vw, 2.35rem);
line-height: 1;
font-weight: 950;
text-shadow: 0 0 18px rgba(34,211,238,.30);
}
.bio-metric__note {
margin-top: 9px;
color: var(--bio-text-muted);
font-size: .9rem;
}
/* ==========================================================
Tablas oscuras para estado de módulos
========================================================== */
.bio-table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid rgba(117,168,255,.22);
border-radius: 16px;
background: rgba(5,15,40,.62);
box-shadow: var(--bio-shadow-soft);
}
.bio-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
}
.bio-table th,
.bio-table td {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid rgba(117,168,255,.14);
}
.bio-table th {
color: var(--bio-cyan);
font-size: .78rem;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .08em;
background: rgba(34,211,238,.06);
}
.bio-table td {
color: var(--bio-text-soft);
}
.bio-table tr:hover td {
background: rgba(34,211,238,.035);
}
.bio-table tr:last-child td {
border-bottom: 0;
}
/* ==========================================================
Formularios y bloques de contacto/demo
========================================================== */
.bio-form {
display: grid;
gap: 16px;
}
.bio-field {
display: grid;
gap: 7px;
}
.bio-label {
color: var(--bio-text-soft);
font-size: .85rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .055em;
}
.bio-input,
.bio-select,
.bio-textarea {
width: 100%;
color: var(--bio-text);
border: 1px solid rgba(117,168,255,.25);
border-radius: 14px;
background: rgba(2, 8, 23, .65);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
outline: none;
transition: border-color var(--bio-normal), box-shadow var(--bio-normal), background var(--bio-normal);
}
.bio-input,
.bio-select {
min-height: 48px;
padding: 0 14px;
}
.bio-textarea {
min-height: 130px;
padding: 13px 14px;
resize: vertical;
}
.bio-input:focus,
.bio-select:focus,
.bio-textarea:focus {
border-color: rgba(34,211,238,.76);
box-shadow: var(--bio-glow-cyan), inset 0 1px 0 rgba(255,255,255,.08);
background: rgba(5,15,40,.86);
}
.bio-input::placeholder,
.bio-textarea::placeholder {
color: var(--bio-text-dim);
}
/* ==========================================================
Bloques especiales IA / aprobación humana
========================================================== */
.bio-ai-orb {
position: relative;
display: grid;
place-items: center;
min-height: 280px;
border: 1px solid rgba(250,204,21,.28);
border-radius: var(--bio-radius-xl);
background:
radial-gradient(circle at 50% 28%, rgba(250,204,21,.18), transparent 42%),
radial-gradient(circle at 50% 45%, rgba(52,140,255,.18), transparent 34%),
rgba(5,15,40,.72);
box-shadow: var(--bio-glow-gold), var(--bio-shadow-hard);
overflow: hidden;
}
.bio-ai-orb::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
border: 1px solid rgba(117,168,255,.42);
border-radius: 50%;
background: radial-gradient(circle, rgba(52,140,255,.22), transparent 58%);
box-shadow: inset 0 0 38px rgba(117,168,255,.34), var(--bio-glow-blue);
animation: bioPulse 3.6s var(--bio-ease) infinite;
}
.bio-ai-orb::after {
content: "";
position: absolute;
width: 340px;
height: 72px;
bottom: 34px;
border: 1px solid rgba(250,204,21,.72);
border-radius: 50%;
background: rgba(250,204,21,.08);
box-shadow: var(--bio-glow-gold);
}
.bio-ai-orb__content {
position: relative;
z-index: 1;
text-align: center;
max-width: 320px;
padding: 24px;
}
.bio-ai-orb__title {
margin: 0 0 8px;
color: #fff;
font-weight: 950;
text-transform: uppercase;
letter-spacing: .035em;
text-shadow: 0 0 18px rgba(250,204,21,.46);
}
.bio-ai-orb__text {
margin: 0;
color: var(--bio-text-soft);
line-height: 1.5;
}
.bio-human-approval {
border-color: rgba(250,204,21,.54);
color: var(--bio-gold);
background:
radial-gradient(circle at 50% 0%, rgba(250,204,21,.14), transparent 50%),
rgba(5,15,40,.82);
}
/* ==========================================================
Separadores y ornamentos
========================================================== */
.bio-divider {
height: 1px;
width: 100%;
background: linear-gradient(90deg, transparent, rgba(117,168,255,.56), transparent);
box-shadow: 0 0 16px rgba(117,168,255,.42);
}
.bio-orbit {
position: absolute;
pointer-events: none;
border: 1px solid currentColor;
border-radius: 50%;
opacity: .22;
filter: drop-shadow(0 0 18px currentColor);
}
.bio-orbit--blue { color: var(--bio-blue); }
.bio-orbit--cyan { color: var(--bio-cyan); }
.bio-orbit--purple { color: var(--bio-purple); }
.bio-orbit--green { color: var(--bio-green); }
.bio-orbit--gold { color: var(--bio-gold); }
.bio-dot-line {
height: 1px;
background-image: linear-gradient(90deg, currentColor 35%, transparent 0%);
background-size: 10px 1px;
color: currentColor;
opacity: .75;
filter: drop-shadow(0 0 10px currentColor);
}
/* ==========================================================
Utilidades
========================================================== */
.bio-center { text-align: center; }
.bio-left { text-align: left; }
.bio-right { text-align: right; }
.bio-mx-auto { margin-inline: auto; }
.bio-hidden { display: none !important; }
.bio-muted { color: var(--bio-text-muted); }
.bio-soft { color: var(--bio-text-soft); }
.bio-uppercase { text-transform: uppercase; }
.bio-fw-800 { font-weight: 800; }
.bio-fw-900 { font-weight: 900; }
.bio-max-720 { max-width: 720px; }
.bio-max-880 { max-width: 880px; }
.bio-max-1040 { max-width: 1040px; }
.bio-glow-blue { box-shadow: var(--bio-glow-blue); }
.bio-glow-cyan { box-shadow: var(--bio-glow-cyan); }
.bio-glow-purple { box-shadow: var(--bio-glow-purple); }
.bio-glow-green { box-shadow: var(--bio-glow-green); }
.bio-glow-gold { box-shadow: var(--bio-glow-gold); }
/* ==========================================================
Animaciones suaves
========================================================== */
@keyframes bioPulse {
0%, 100% { transform: scale(1); opacity: .86; }
50% { transform: scale(1.045); opacity: 1; }
}
@keyframes bioFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes bioGlowSweep {
0% { transform: translateX(-120%); }
100% { transform: translateX(120%); }
}
.bio-animate-float {
animation: bioFloat 5.5s var(--bio-ease) infinite;
}
.bio-animate-pulse {
animation: bioPulse 3.6s var(--bio-ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
/* ==========================================================
Responsive
========================================================== */
@media (max-width: 1100px) {
.bio-cockpit {
grid-template-columns: 1fr;
}
.bio-sidebar {
position: relative;
top: auto;
}
.bio-guardrails {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bio-guardrail:nth-child(2) {
border-right: 0;
}
.bio-guardrail:nth-child(-n + 2) {
border-bottom: 1px solid rgba(117,168,255,.24);
}
}
@media (max-width: 860px) {
.bio-grid,
.bio-grid-2,
.bio-grid-3,
.bio-grid-4 {
grid-template-columns: 1fr;
}
.bio-evolution {
grid-template-columns: 1fr;
}
.bio-evolution::before {
left: 26px;
right: auto;
top: 8%;
bottom: 8%;
width: 2px;
height: auto;
background: linear-gradient(180deg, var(--bio-blue), var(--bio-purple), var(--bio-gold));
}
.bio-layer__head {
align-items: flex-start;
flex-direction: column;
}
.bio-flow-step:not(:last-child)::after {
display: none;
}
}
@media (max-width: 640px) {
:root {
--bio-section-y: 52px;
}
.bio-container {
width: min(100% - 22px, var(--bio-container));
}
.bio-title {
letter-spacing: -0.045em;
}
.bio-kicker-row span:not(:last-child)::after {
display: none;
}
.bio-layer {
border-radius: 24px;
padding: 16px;
}
.bio-layer::before {
display: none;
}
.bio-layer__number {
width: 36px;
height: 36px;
}
.bio-module-card {
min-height: 116px;
}
.bio-guardrails {
grid-template-columns: 1fr;
}
.bio-guardrail {
border-right: 0;
border-bottom: 1px solid rgba(117,168,255,.24);
}
.bio-guardrail:last-child {
border-bottom: 0;
}
.bio-ai-orb {
min-height: 230px;
}
.bio-ai-orb::before {
width: 170px;
height: 170px;
}
.bio-ai-orb::after {
width: 240px;
height: 54px;
}
}
/* ==========================================================
Impresión / fallback
========================================================== */
@media print {
body {
color: #0f172a;
background: #fff;
}
body::before,
body::after,
.bio-layer::before,
.bio-layer::after,
.bio-card::before,
.bio-map::before {
display: none !important;
}
.bio-card,
.bio-panel,
.bio-layer,
.bio-glass,
.bio-table-wrap {
color: #0f172a;
background: #fff;
box-shadow: none;
border-color: #cbd5e1;
}
.bio-title,
.bio-gradient-text,
.bio-title .bio-gradient {
color: #0f172a;
background: none;
text-shadow: none;
}
}
/* =========================================================
Header público / navegación Biosfera Esforzados
Corrige menú vertical a horizontal en escritorio
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(117, 168, 255, .18);
background: rgba(2, 6, 23, .72);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.site-header .bio-container {
width: min(1180px, calc(100% - 32px));
margin-inline: auto;
}
.site-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 78px;
flex-wrap: nowrap;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: max-content;
font-weight: 950;
letter-spacing: -.02em;
color: #fff;
text-decoration: none;
}
.brand__mark {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 14px;
color: var(--bio-cyan, #22d3ee);
border: 1px solid rgba(34, 211, 238, .5);
background: radial-gradient(circle at 50% 20%, rgba(34,211,238,.24), rgba(52,140,255,.08));
box-shadow: 0 0 24px rgba(34,211,238,.22);
}
.brand__text {
display: grid;
line-height: 1.05;
}
.brand__name {
font-size: 1.05rem;
text-transform: uppercase;
}
.brand__tag {
color: var(--bio-text-muted, #94a3b8);
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
flex: 1;
}
.nav-links li {
margin: 0;
padding: 0;
}
.nav-links a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 11px;
border-radius: 999px;
color: var(--bio-text-soft, #cbd5e1);
font-size: .91rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.nav-links a:hover,
.nav-links a.is-active {
color: var(--bio-cyan, #22d3ee);
background: rgba(34, 211, 238, .08);
box-shadow: 0 0 16px rgba(34, 211, 238, .16);
}
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
min-width: max-content;
}
.menu-toggle {
display: none;
width: 46px;
height: 46px;
border: 1px solid rgba(117, 168, 255, .34);
border-radius: 14px;
color: var(--bio-cyan, #22d3ee);
background: rgba(9, 22, 58, .62);
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 20px;
height: 2px;
margin: 5px auto;
border-radius: 999px;
background: currentColor;
}
/* Botones rápidos si no existen aún */
.bio-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 16px;
border-radius: 999px;
font-weight: 900;
text-decoration: none;
white-space: nowrap;
border: 1px solid rgba(117, 168, 255, .28);
}
.bio-btn--ghost {
color: var(--bio-text-soft, #cbd5e1);
background: rgba(15, 23, 42, .35);
}
.bio-btn--primary {
color: #03111d;
border-color: rgba(34, 211, 238, .65);
background: linear-gradient(135deg, #22d3ee, #60a5fa);
box-shadow: 0 0 22px rgba(34, 211, 238, .25);
}
/* Responsive */
@media (max-width: 1180px) {
.nav-actions .bio-btn--ghost {
display: none;
}
.nav-links a {
padding-inline: 9px;
font-size: .86rem;
}
}
@media (max-width: 980px) {
.menu-toggle {
display: inline-grid;
place-items: center;
}
.site-nav {
position: relative;
}
.nav-links {
position: absolute;
left: 0;
right: 0;
top: 84px;
display: none;
grid-template-columns: 1fr;
padding: 12px;
border: 1px solid rgba(117,168,255,.24);
border-radius: 22px;
background: rgba(5, 15, 40, .96);
box-shadow: 0 24px 80px rgba(0,0,0,.35);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.nav-links.is-open {
display: grid;
}
.nav-links a {
justify-content: center;
}
}
@media (max-width: 640px) {
.site-nav {
min-height: 70px;
}
.brand__tag {
display: none;
}
.nav-actions .bio-btn {
display: none;
}
}
/* ==========================================================
Ajustes de landing comercial: campañas digitales Biosfera
Puedes pegar este bloque al final de css/estilo-bio.css
========================================================== */
.hero-layout {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
}
.hero-visual {
position: relative;
z-index: 2;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
max-width: 780px;
}
.mini-stat {
padding: 14px 16px;
border: 1px solid rgba(117, 168, 255, .24);
border-radius: 16px;
background: rgba(5, 15, 40, .62);
box-shadow: var(--bio-shadow-soft);
}
.mini-stat strong {
display: block;
color: #fff;
font-size: 1rem;
text-transform: uppercase;
}
.mini-stat span {
display: block;
margin-top: 4px;
color: var(--bio-text-soft);
font-size: .9rem;
}
.section-head {
display: grid;
gap: 14px;
margin-bottom: clamp(24px, 4vw, 44px);
}
.section-title {
margin: 0;
color: #fff;
font-size: clamp(2rem, 4vw, 4rem);
line-height: 1;
font-weight: 950;
letter-spacing: -.045em;
text-transform: uppercase;
text-shadow: 0 0 28px rgba(80, 146, 255, .24);
}
.section-title .accent,
.section-title .purple {
color: var(--bio-cyan);
text-shadow: 0 0 18px rgba(34, 211, 238, .35);
}
.split-panel {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--bio-gap);
align-items: stretch;
}
.campaign-preview {
position: relative;
display: grid;
gap: 18px;
padding: clamp(20px, 3vw, 32px);
border: 1px solid rgba(34, 211, 238, .38);
border-radius: var(--bio-radius-xl);
background:
radial-gradient(circle at 70% 0%, rgba(34, 211, 238, .18), transparent 42%),
radial-gradient(circle at 0% 100%, rgba(168, 85, 247, .14), transparent 38%),
rgba(5, 15, 40, .76);
box-shadow: var(--bio-glow-cyan), var(--bio-shadow-hard);
overflow: hidden;
}
.campaign-preview::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
opacity: .7;
}
.campaign-preview > * {
position: relative;
z-index: 1;
}
.campaign-preview__top,
.campaign-preview__product,
.campaign-preview__metrics,
.campaign-preview__flow {
display: flex;
gap: 12px;
}
.campaign-preview__top {
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.campaign-preview__url {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 10px;
border: 1px solid rgba(34, 211, 238, .32);
border-radius: 999px;
color: var(--bio-cyan);
background: rgba(34, 211, 238, .08);
font-weight: 850;
font-size: .85rem;
}
.campaign-preview__product {
align-items: center;
padding: 18px;
border: 1px solid rgba(117, 168, 255, .22);
border-radius: 22px;
background: rgba(2, 8, 23, .42);
}
.campaign-preview__image {
flex: 0 0 88px;
width: 88px;
height: 88px;
display: grid;
place-items: center;
border-radius: 24px;
background: linear-gradient(135deg, rgba(34, 211, 238, .22), rgba(168, 85, 247, .18));
border: 1px solid rgba(34, 211, 238, .34);
box-shadow: var(--bio-glow-cyan);
font-size: 2.5rem;
}
.campaign-preview__product h2 {
margin: 0 0 8px;
color: #fff;
font-size: clamp(1.25rem, 2vw, 1.8rem);
line-height: 1;
text-transform: uppercase;
}
.campaign-preview__product p {
margin: 0;
color: var(--bio-text-soft);
line-height: 1.45;
}
.campaign-preview__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.campaign-preview__metrics div {
padding: 14px;
border: 1px solid rgba(117, 168, 255, .18);
border-radius: 16px;
background: rgba(255,255,255,.035);
}
.campaign-preview__metrics strong {
display: block;
color: #fff;
font-size: clamp(1.25rem, 2.3vw, 2rem);
line-height: 1;
}
.campaign-preview__metrics span {
display: block;
margin-top: 6px;
color: var(--bio-text-muted);
font-weight: 800;
font-size: .82rem;
text-transform: uppercase;
}
.campaign-preview__flow {
flex-wrap: wrap;
}
.campaign-preview__flow span {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--bio-text-soft);
font-size: .86rem;
font-weight: 850;
}
.campaign-preview__flow span:not(:last-child)::after {
content: "→";
color: var(--bio-cyan);
text-shadow: 0 0 10px var(--bio-cyan);
}
.feature-list {
position: relative;
display: grid;
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
color: var(--bio-text-soft);
}
.feature-list li {
position: relative;
padding-left: 28px;
line-height: 1.4;
}
.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--bio-cyan);
font-weight: 950;
text-shadow: 0 0 10px var(--bio-cyan);
}
.price-card {
display: grid;
align-content: start;
gap: 12px;
}
.price-card--featured {
transform: translateY(-8px);
box-shadow: var(--bio-glow-cyan), var(--bio-shadow-hard);
}
.price-card__price {
color: #fff;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
font-weight: 950;
letter-spacing: -.04em;
}
.price-card__price small {
color: var(--bio-text-muted);
font-size: .9rem;
font-weight: 800;
letter-spacing: 0;
}
.price-card__monthly {
margin: -4px 0 0;
color: var(--bio-cyan);
font-weight: 900;
}
.pricing-note {
display: flex;
gap: 10px;
align-items: center;
margin-top: var(--bio-gap);
}
.pricing-note strong {
color: #fff;
min-width: max-content;
}
.site-footer {
border-top: 1px solid rgba(117, 168, 255, .18);
background: rgba(2, 6, 23, .72);
padding-block: 26px;
}
.footer-row {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
flex-wrap: wrap;
color: var(--bio-text-muted);
}
.footer-row p {
margin: 0;
}
.footer-row a:hover {
color: var(--bio-cyan);
}
@media (max-width: 980px) {
.hero-layout,
.split-panel {
grid-template-columns: 1fr;
}
.hero-stats,
.campaign-preview__metrics {
grid-template-columns: 1fr;
}
.price-card--featured {
transform: none;
}
.pricing-note {
display: grid;
}
}
@media (max-width: 640px) {
.campaign-preview__product {
align-items: flex-start;
flex-direction: column;
}
.campaign-preview__image {
width: 72px;
height: 72px;
flex-basis: 72px;
font-size: 2rem;
}
}
/* Estilos para las categorías del Hub */
.bio-hub-category {
font-size: 1.5rem;
color: #fff;
margin-top: 3.5rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 0.5rem;
font-weight: 600;
}
.bio-hub-category .bio-badge {
font-size: 0.8rem;
padding: 0.25rem 0.75rem;
font-weight: 500;
margin-left: auto; /* Empuja el badge a la derecha */
}