@layer reset, tokens, base, components, layout, pages, utilities;
@font-face {
font-family: 'Oblivion';
src: url('/assets/fonts/Oblivion.woff2') format('woff2'),
url('/assets/fonts/Oblivion.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Chopin';
src: url('/assets/fonts/Chopin-Light.woff2') format('woff2'),
url('/assets/fonts/Chopin-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@property --progreso {
syntax: '<percentage>';
inherits: false;
initial-value: 25%;
}
@layer tokens {
:root {
--amarillo: #F2F53F;
--amarillo-suave: #FAFC9C;
--sobre-amarillo: #121200;
--violeta: #5B31F0;
--violeta-claro: #8B6BF5;
--lila: #C47DF5;
--naranja: #FF4B00;
--verde: #19C71B;
--fondo: #07060B;
--fondo-elevado: #0D0B16;
--vidrio: rgb(255 255 255 / 0.04);
--vidrio-fuerte: rgb(255 255 255 / 0.07);
--linea: rgb(255 255 255 / 0.09);
--linea-fuerte: rgb(255 255 255 / 0.16);
--texto: #F5F4FF;
--texto-suave: #A9A6BE;
--texto-tenue: #7D7A92;
--brillo-amarillo: 0 0 0 1px rgb(242 245 63 / 0.6), 0 10px 36px rgb(242 245 63 / 0.32);
--brillo-violeta: 0 24px 70px rgb(91 49 240 / 0.32);
--degradado-borde: linear-gradient(140deg, rgb(242 245 63 / 0.55), rgb(91 49 240 / 0.18) 38%, rgb(255 255 255 / 0.05) 62%, rgb(139 107 245 / 0.6));
--degradado-texto: linear-gradient(90deg, var(--amarillo), #FFD24A 45%, var(--lila));
--fuente-display: 'Oblivion', 'Arial Black', system-ui, sans-serif;
--fuente-script: 'Chopin', 'Brush Script MT', cursive;
--fuente-texto: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--t-xs: 0.78rem;
--t-sm: 0.9rem;
--t-base: 1.0625rem;
--t-lg: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
--t-xl: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
--t-2xl: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
--t-3xl: clamp(2.7rem, 1.5rem + 4.8vw, 5.6rem);
--e-1: 0.25rem;
--e-2: 0.5rem;
--e-3: 0.75rem;
--e-4: 1rem;
--e-5: 1.5rem;
--e-6: 2rem;
--e-7: 3rem;
--e-8: 4.5rem;
--e-9: clamp(4.5rem, 3rem + 6vw, 8rem);
--radio-sm: 12px;
--radio: 20px;
--radio-lg: 28px;
--radio-xl: 36px;
--radio-pildora: 999px;
--ancho-max: 1240px;
--alto-header: 76px;
--curva: cubic-bezier(0.22, 1, 0.36, 1);
--rapido: 0.2s;
--medio: 0.35s;
--lento: 0.8s;
}
}
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul[role='list'], ol[role='list'] { list-style: none; }
h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }
}
@layer base {
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--alto-header) + var(--e-4));
color-scheme: dark;
}
body {
min-height: 100vh;
font-family: var(--fuente-texto);
font-size: var(--t-base);
line-height: 1.65;
color: var(--texto);
background:
radial-gradient(900px 620px at 88% -8%, rgb(91 49 240 / 0.34), transparent 62%),
radial-gradient(700px 520px at -12% 28%, rgb(242 245 63 / 0.07), transparent 60%),
radial-gradient(1000px 760px at 50% 115%, rgb(91 49 240 / 0.22), transparent 62%),
var(--fondo);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
opacity: 0.06;
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.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
strong { font-weight: 600; color: var(--texto); }
::selection { background: var(--amarillo); color: var(--sobre-amarillo); }
:focus-visible {
outline: 2px solid var(--amarillo);
outline-offset: 3px;
border-radius: 6px;
}
.script {
font-family: var(--fuente-script);
font-weight: 300;
color: var(--amarillo);
letter-spacing: 0;
text-shadow: 0 0 30px rgb(242 245 63 / 0.35);
}
.script--degradado {
background: var(--degradado-texto);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: none;
filter: drop-shadow(0 0 22px rgb(242 245 63 / 0.3));
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.saltar {
position: absolute;
top: var(--e-3);
left: var(--e-3);
z-index: 300;
padding: var(--e-3) var(--e-5);
border-radius: var(--radio-pildora);
background: var(--amarillo);
color: var(--sobre-amarillo);
font-weight: 700;
text-decoration: none;
transform: translateY(-200%);
transition: transform var(--rapido) var(--curva);
}
.saltar:focus { transform: none; }
.gtm-noscript { display: none; visibility: hidden; }
[hidden] { display: none !important; }
}
@layer utilities {
.js [data-revelar] {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}
.js [data-revelar].es-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.js [data-revelar] { opacity: 1; transform: none; }
}
}
@layer layout {
.contenedor {
width: min(var(--ancho-max), 100% - 2.5rem);
margin-inline: auto;
}
main { padding-top: var(--alto-header); }
.seccion { padding-block: var(--e-9) 0; }
.seccion__cabecera {
max-width: 760px;
margin-bottom: var(--e-7);
}
.seccion__cabecera--centro {
margin-inline: auto;
text-align: center;
}
.seccion__titulo {
font-family: var(--fuente-display);
font-weight: 400;
font-size: var(--t-2xl);
line-height: 1.02;
letter-spacing: -0.01em;
}
.seccion__titulo .script { font-size: 1.1em; }
.seccion__intro {
margin-top: var(--e-4);
color: var(--texto-suave);
font-size: var(--t-lg);
max-width: 60ch;
}
.seccion__cabecera--centro .seccion__intro { margin-inline: auto; }
.header {
position: fixed;
inset: 0 0 auto;
z-index: 100;
height: var(--alto-header);
border-bottom: 1px solid transparent;
transition: background var(--medio) var(--curva), border-color var(--medio) var(--curva), backdrop-filter var(--medio);
}
.header.es-compacto {
background: rgb(7 6 11 / 0.72);
border-bottom-color: var(--linea);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.header__barra {
height: 100%;
display: flex;
align-items: center;
gap: var(--e-6);
}
.marca {
display: inline-flex;
align-items: center;
gap: var(--e-3);
text-decoration: none;
flex-shrink: 0;
}
.marca img {
width: 40px;
height: 40px;
border-radius: 11px;
box-shadow: 0 0 24px rgb(242 245 63 / 0.3);
}
.marca__texto {
font-family: var(--fuente-display);
font-size: 0.95rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.nav { margin-left: auto; }
.nav__lista { display: flex; align-items: center; gap: var(--e-2); }
.nav__enlace {
display: inline-flex;
align-items: center;
gap: var(--e-2);
padding: var(--e-2) var(--e-4);
border-radius: var(--radio-pildora);
color: var(--texto-suave);
font-size: var(--t-sm);
font-weight: 500;
text-decoration: none;
transition: color var(--rapido), background var(--rapido);
}
.nav__enlace:hover,
.nav__enlace[aria-expanded='true'] { color: var(--texto); background: var(--vidrio-fuerte); }
.nav__enlace svg { width: 14px; height: 14px; transition: transform var(--medio) var(--curva); }
.nav__disparador[aria-expanded='true'] svg { transform: rotate(180deg); }
.nav__item--desplegable { position: relative; }
.nav__panel {
position: absolute;
top: calc(100% + 14px);
left: 50%;
width: min(640px, 90vw);
padding: var(--e-3);
border-radius: var(--radio-lg);
background: rgb(13 11 22 / 0.98);
border: 1px solid var(--linea);
box-shadow: var(--brillo-violeta);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -8px);
transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility var(--medio);
}
.nav__item--desplegable.esta-abierto .nav__panel {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.menu-servicios {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--e-1);
}
.menu-servicios a {
display: flex;
gap: var(--e-3);
padding: var(--e-3) var(--e-4);
border-radius: var(--radio);
text-decoration: none;
transition: background var(--rapido);
}
.menu-servicios a:hover,
.menu-servicios a:focus-visible { background: var(--vidrio-fuerte); }
.menu-servicios__num {
font-family: var(--fuente-display);
font-size: var(--t-xs);
color: var(--violeta-claro);
padding-top: 0.2em;
}
.menu-servicios strong { display: block; font-size: var(--t-sm); font-weight: 600; }
.menu-servicios small { display: block; font-size: var(--t-xs); color: var(--texto-tenue); line-height: 1.45; margin-top: 2px; }
.header__cta { flex-shrink: 0; }
.nav__cta-movil { display: none; }
.menu-boton {
display: none;
position: relative;
width: 46px;
height: 46px;
border-radius: var(--radio-sm);
background: var(--vidrio-fuerte);
border: 1px solid var(--linea);
}
.menu-boton__barras,
.menu-boton__barras::before,
.menu-boton__barras::after {
position: absolute;
left: 50%;
width: 20px;
height: 2px;
margin-left: -10px;
border-radius: 2px;
background: var(--texto);
transition: transform var(--medio) var(--curva), opacity var(--rapido);
}
.menu-boton__barras { top: 50%; margin-top: -1px; }
.menu-boton__barras::before,
.menu-boton__barras::after { content: ''; left: 0; margin-left: 0; }
.menu-boton__barras::before { transform: translateY(-6px); }
.menu-boton__barras::after { transform: translateY(6px); }
.menu-boton[aria-expanded='true'] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded='true'] .menu-boton__barras::before { transform: rotate(45deg); }
.menu-boton[aria-expanded='true'] .menu-boton__barras::after { transform: rotate(-45deg); }
@media (max-width: 960px) {
.menu-boton { display: block; margin-left: auto; }
.header__cta { display: none; }
.nav {
position: fixed;
inset: var(--alto-header) 0 0;
margin: 0;
padding: var(--e-5) 1.25rem var(--e-7);
overflow-y: auto;
background: rgb(7 6 11 / 0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva), visibility var(--medio);
}
.nav.esta-abierto { opacity: 1; visibility: visible; transform: none; }
.nav__lista { flex-direction: column; align-items: stretch; gap: var(--e-1); }
.nav__enlace {
width: 100%;
justify-content: space-between;
padding: var(--e-4);
font-size: var(--t-lg);
color: var(--texto);
border-radius: var(--radio);
}
.nav__panel {
position: static;
width: 100%;
padding: 0 0 var(--e-3);
background: none;
border: 0;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: none;
display: none;
opacity: 1;
visibility: visible;
}
.nav__item--desplegable.esta-abierto .nav__panel { display: block; transform: none; }
.menu-servicios { grid-template-columns: 1fr; }
.nav__cta-movil { display: inline-flex; width: 100%; justify-content: center; margin-top: var(--e-5); }
}
.footer {
margin-top: var(--e-9);
padding-block: var(--e-8) var(--e-6);
border-top: 1px solid var(--linea);
background: linear-gradient(180deg, rgb(13 11 22 / 0.5), transparent);
}
.footer__grid {
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: var(--e-7);
}
.footer__marca p { margin-top: var(--e-4); color: var(--texto-suave); font-size: var(--t-sm); max-width: 32ch; }
.footer__titulo {
font-family: var(--fuente-texto);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--violeta-claro);
margin-bottom: var(--e-4);
}
.footer__columna ul { display: grid; gap: var(--e-3); }
.footer__columna a {
color: var(--texto-suave);
font-size: var(--t-sm);
text-decoration: none;
transition: color var(--rapido);
}
.footer__columna a:hover { color: var(--amarillo); }
.footer__base {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-4);
margin-top: var(--e-8);
padding-top: var(--e-5);
border-top: 1px solid var(--linea);
color: var(--texto-tenue);
font-size: var(--t-xs);
}
.footer__base .script { font-size: 1.3em; }
@media (max-width: 960px) {
.footer__grid { grid-template-columns: 1fr 1fr; gap: var(--e-6); }
.footer__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.footer__grid { grid-template-columns: 1fr; }
.footer__base { flex-direction: column; align-items: flex-start; }
}
}
@layer components {
.borde-luz { position: relative; isolation: isolate; }
.borde-luz::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
padding: 1px;
border-radius: inherit;
background: var(--degradado-borde);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e-2);
min-height: 52px;
padding: 0.9rem 1.5rem;
border-radius: 14px;
font-weight: 600;
font-size: var(--t-sm);
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: transform var(--rapido) var(--curva), box-shadow var(--medio) var(--curva), background var(--medio);
}
.boton svg { width: 18px; height: 18px; flex-shrink: 0; }
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton--primario {
color: var(--sobre-amarillo);
background: var(--amarillo);
box-shadow: var(--brillo-amarillo);
}
.boton--primario:hover { box-shadow: 0 0 0 1px var(--amarillo), 0 12px 48px rgb(242 245 63 / 0.5); }
.boton--secundario {
position: relative;
isolation: isolate;
color: var(--texto);
background: var(--vidrio-fuerte);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.boton--secundario::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
padding: 1px;
border-radius: inherit;
background: var(--degradado-borde);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.boton--secundario:hover { box-shadow: 0 0 32px rgb(139 107 245 / 0.35); }
.boton--sm { min-height: 44px; padding: 0.65rem 1.15rem; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.acciones--centro { justify-content: center; }
.enlace-boton {
color: var(--texto-tenue);
font-size: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
}
.enlace-boton:hover { color: var(--amarillo); }
.chip {
display: inline-flex;
align-items: center;
gap: var(--e-2);
padding: 0.45rem 1rem;
border-radius: var(--radio-pildora);
background: rgb(91 49 240 / 0.16);
border: 1px solid rgb(139 107 245 / 0.4);
color: var(--texto);
font-size: var(--t-xs);
font-weight: 500;
}
.chip__punto {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--verde);
box-shadow: 0 0 10px var(--verde);
animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: 0.35; } }
.etiqueta {
display: inline-block;
margin-bottom: var(--e-4);
color: var(--violeta-claro);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.render { display: block; }
.render img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: dense;
gap: var(--e-5);
}
.bento__item { grid-column: span 2; display: flex; }
.bento__item--destacado { grid-column: span 4; grid-row: span 2; }
.card-servicio {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
border-radius: var(--radio-lg);
background: linear-gradient(170deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015));
text-decoration: none;
transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.card-servicio:hover { transform: translateY(-4px); box-shadow: var(--brillo-violeta); }
.card-servicio__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.card-servicio__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgb(13 11 22 / 0.95));
}
.card-servicio__media .render { height: 100%; mix-blend-mode: screen; }
.card-servicio__media img { transition: transform var(--lento) var(--curva); }
.card-servicio:hover .card-servicio__media img { transform: scale(1.05); }
.bento__item--destacado .card-servicio__media { aspect-ratio: auto; flex: 1; min-height: 280px; }
.card-servicio__cuerpo {
display: flex;
flex-direction: column;
gap: var(--e-2);
padding: var(--e-5) var(--e-6) var(--e-6);
margin-top: -2.5rem;
position: relative;
}
.card-servicio__num {
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: 0.12em;
color: var(--violeta-claro);
}
.card-servicio__titulo {
font-family: var(--fuente-display);
font-weight: 400;
font-size: var(--t-xl);
line-height: 1.08;
}
.bento__item--destacado .card-servicio__titulo { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.card-servicio__cuerpo p { color: var(--texto-suave); font-size: var(--t-sm); max-width: 46ch; }
.card-servicio__ir {
display: inline-flex;
align-items: center;
gap: var(--e-2);
margin-top: var(--e-2);
color: var(--amarillo);
font-size: var(--t-sm);
font-weight: 600;
}
.card-servicio__ir svg { width: 16px; height: 16px; transition: transform var(--medio) var(--curva); }
.card-servicio:hover .card-servicio__ir svg { transform: translateX(4px); }
@media (max-width: 1024px) {
.bento { grid-template-columns: repeat(2, 1fr); }
.bento__item { grid-column: span 1; }
.bento__item--destacado { grid-column: span 2; grid-row: auto; }
.bento__item--destacado .card-servicio__media { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
}
@media (max-width: 640px) {
.bento { grid-template-columns: 1fr; }
.bento__item, .bento__item--destacado { grid-column: auto; }
}
.marquesina {
display: flex;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina__pista {
display: flex;
align-items: center;
gap: 3.5rem;
padding-right: 3.5rem;
flex-shrink: 0;
animation: desplazar 45s linear infinite;
}
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
@keyframes desplazar { to { transform: translateX(-100%); } }
.logo-cliente {
display: flex;
align-items: center;
justify-content: center;
width: 140px;
height: 64px;
opacity: 0.62;
transition: opacity var(--medio);
}
.logo-cliente:hover { opacity: 1; }
.logo-cliente picture {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.logo-cliente img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
.marquesina { -webkit-mask-image: none; mask-image: none; }
.marquesina__pista { flex-wrap: wrap; justify-content: center; animation: none; padding-right: 0; }
.marquesina__pista[aria-hidden='true'] { display: none; }
}
.migas ol { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-tenue); margin-bottom: var(--e-5); }
.migas li { display: flex; align-items: center; gap: var(--e-2); }
.migas li + li::before { content: '/'; color: var(--linea-fuerte); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--amarillo); }
.migas [aria-current] { color: var(--texto); }
.anillo {
--progreso: 25%;
width: clamp(200px, 26vw, 280px);
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
background: conic-gradient(from -90deg, var(--amarillo), var(--lila) calc(var(--progreso) * 0.6), var(--violeta) var(--progreso), rgb(255 255 255 / 0.06) var(--progreso));
filter: drop-shadow(0 0 28px rgb(139 107 245 / 0.5));
transition: --progreso var(--lento) var(--curva);
}
.anillo__centro {
width: 86%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 50% 35%, #15122A, var(--fondo-elevado) 70%);
display: grid;
place-content: center;
text-align: center;
gap: var(--e-1);
}
.anillo__num {
font-family: var(--fuente-display);
font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
line-height: 1;
}
.anillo__texto { color: var(--texto-suave); font-size: var(--t-sm); }
.acordeon { display: grid; gap: var(--e-3); }
.acordeon__item {
border-radius: var(--radio);
background: var(--vidrio);
border: 1px solid var(--linea);
transition: border-color var(--medio), background var(--medio);
}
.acordeon__item[open] { border-color: rgb(139 107 245 / 0.5); background: var(--vidrio-fuerte); }
.acordeon__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-4);
padding: var(--e-5);
font-weight: 600;
cursor: pointer;
list-style: none;
}
.acordeon__item summary::-webkit-details-marker { display: none; }
.acordeon__icono {
position: relative;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgb(242 245 63 / 0.12);
}
.acordeon__icono::before,
.acordeon__icono::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 2px;
margin: -1px 0 0 -6px;
background: var(--amarillo);
border-radius: 2px;
transition: transform var(--medio) var(--curva);
}
.acordeon__icono::after { transform: rotate(90deg); }
.acordeon__item[open] .acordeon__icono::after { transform: rotate(0); }
.acordeon__respuesta { padding: 0 var(--e-5) var(--e-5); color: var(--texto-suave); }
.canales { display: grid; gap: var(--e-3); }
.canal {
display: flex;
align-items: center;
gap: var(--e-4);
padding: var(--e-4) var(--e-5);
border-radius: var(--radio);
background: var(--vidrio);
text-decoration: none;
transition: transform var(--medio) var(--curva), box-shadow var(--medio);
}
.canal:hover { transform: translateX(6px); box-shadow: var(--brillo-violeta); }
.canal__icono {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 14px;
background: rgb(242 245 63 / 0.12);
color: var(--amarillo);
flex-shrink: 0;
}
.canal__icono svg { width: 22px; height: 22px; }
.canal__texto { flex: 1; display: grid; }
.canal__texto span { color: var(--texto-suave); font-size: var(--t-sm); }
.canal > svg { width: 18px; height: 18px; color: var(--amarillo); }
.cta-final { padding-top: var(--e-9); }
.cta-final__caja {
position: relative;
overflow: hidden;
padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem);
border-radius: var(--radio-xl);
background: linear-gradient(160deg, rgb(91 49 240 / 0.22), rgb(255 255 255 / 0.02) 55%, rgb(242 245 63 / 0.08));
text-align: center;
}
.cta-final__orbe {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(60px);
z-index: -1;
}
.cta-final__orbe--a { width: 360px; height: 360px; top: -160px; left: -80px; background: rgb(242 245 63 / 0.25); }
.cta-final__orbe--b { width: 420px; height: 420px; bottom: -200px; right: -100px; background: rgb(91 49 240 / 0.55); }
.cta-final__titulo {
font-family: var(--fuente-display);
font-weight: 400;
font-size: var(--t-2xl);
line-height: 1.02;
}
.cta-final__titulo .script { font-size: 1.1em; }
.cta-final__texto { max-width: 56ch; margin: var(--e-5) auto var(--e-6); color: var(--texto-suave); font-size: var(--t-lg); }
.cookies {
position: fixed;
inset: auto 0 0;
z-index: 150;
padding: var(--e-4);
pointer-events: none;
}
.cookies__contenido {
pointer-events: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--e-4);
max-width: 960px;
margin-inline: auto;
padding: var(--e-4) var(--e-5);
border-radius: var(--radio);
background: rgb(13 11 22 / 0.94);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 20px 60px rgb(0 0 0 / 0.6);
}
.cookies p { flex: 1 1 380px; color: var(--texto-suave); font-size: var(--t-sm); }
.cookies a { color: var(--amarillo); }
.cookies__acciones { display: flex; gap: var(--e-3); flex-shrink: 0; }
.cta-movil { display: none; }
@media (max-width: 760px) {
body { padding-bottom: 64px; }
.cta-movil {
position: fixed;
inset: auto 0 0;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
gap: var(--e-2);
height: 64px;
background: var(--amarillo);
color: var(--sobre-amarillo);
font-weight: 700;
text-decoration: none;
box-shadow: 0 -8px 30px rgb(242 245 63 / 0.25);
}
.cta-movil svg { width: 22px; height: 22px; }
.cookies { bottom: 64px; padding: var(--e-3); }
.cookies__acciones { width: 100%; }
.cookies__acciones .boton { flex: 1; }
}
}
@layer pages {
.hero { padding-top: var(--e-5); }
.hero__caja {
display: grid;
grid-template-columns: 1.08fr 0.92fr;
align-items: center;
gap: var(--e-6);
padding: clamp(2rem, 1.2rem + 4vw, 4.5rem);
border-radius: var(--radio-xl);
background: linear-gradient(160deg, rgb(91 49 240 / 0.16), rgb(255 255 255 / 0.02) 50%, rgb(242 245 63 / 0.05));
overflow: hidden;
}
.hero__titulo {
margin: var(--e-5) 0;
font-family: var(--fuente-display);
font-weight: 400;
font-size: var(--t-3xl);
line-height: 0.98;
letter-spacing: -0.015em;
}
.hero__titulo .script { font-size: 1.12em; }
.hero__titulo--servicio { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem); }
.hero__titulo--legal { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); margin-top: var(--e-4); }
.hero__lead {
max-width: 52ch;
margin-bottom: var(--e-6);
color: var(--texto-suave);
font-size: var(--t-lg);
}
.hero__visual {
position: relative;
align-self: stretch;
display: grid;
place-items: center;
}
.hero__visual::before {
content: '';
position: absolute;
inset: 10%;
border-radius: 50%;
background: radial-gradient(circle, rgb(91 49 240 / 0.45), transparent 70%);
filter: blur(40px);
z-index: -1;
}
.hero__visual .render {
width: 100%;
aspect-ratio: 16 / 10;
mix-blend-mode: screen;
-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
}
.hero__pilares {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--e-3);
}
.pilar {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--e-4) var(--e-5);
border-radius: var(--radio);
background: var(--vidrio);
text-decoration: none;
transition: background var(--medio), transform var(--medio) var(--curva);
}
.pilar:hover { background: var(--vidrio-fuerte); transform: translateY(-2px); }
.pilar strong { font-family: var(--fuente-display); font-weight: 400; font-size: 1.05rem; }
.pilar span { color: var(--texto-suave); font-size: var(--t-xs); }
@media (max-width: 960px) {
.hero__caja { grid-template-columns: 1fr; gap: var(--e-4); }
.hero__visual { order: -1; }
.hero__visual .render { aspect-ratio: 16 / 9; max-height: 240px; width: auto; max-width: 100%; }
.hero__pilares { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.hero__caja { padding: var(--e-5); border-radius: var(--radio-lg); }
.hero__visual .render { max-height: 170px; }
.hero__titulo { margin: var(--e-4) 0; }
.hero__lead { margin-bottom: var(--e-5); }
}
.hero--legal { padding-top: var(--e-7); }
.clientes { padding-top: var(--e-7); }
.clientes__fila {
display: flex;
align-items: center;
gap: var(--e-6);
padding-block: var(--e-5);
border-block: 1px solid var(--linea);
}
.clientes__titulo {
flex-shrink: 0;
max-width: 12ch;
font-family: var(--fuente-texto);
font-size: var(--t-xs);
font-weight: 500;
line-height: 1.35;
color: var(--texto-suave);
}
.clientes .marquesina { flex: 1; min-width: 0; }
@media (max-width: 640px) {
.clientes__fila { flex-direction: column; align-items: flex-start; gap: var(--e-4); }
.clientes__titulo { max-width: none; }
.clientes .marquesina { width: 100%; }
}
.filosofia__grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: var(--e-7);
align-items: center;
}
.filosofia__texto {
margin-top: var(--e-5);
font-size: var(--t-lg);
color: var(--texto-suave);
max-width: 58ch;
}
.filosofia__texto em { font-style: normal; color: var(--naranja); }
.principios { display: grid; gap: var(--e-4); }
.principio {
padding: var(--e-5) var(--e-6);
border-radius: var(--radio);
background: var(--vidrio);
transition: transform var(--medio) var(--curva), box-shadow var(--medio);
}
.principio:hover { transform: translateX(6px); box-shadow: var(--brillo-violeta); }
.principio__num { font-family: var(--fuente-display); font-size: var(--t-xs); color: var(--violeta-claro); }
.principio h3 { margin: var(--e-1) 0 var(--e-2); font-family: var(--fuente-display); font-weight: 400; font-size: 1.25rem; }
.principio p { color: var(--texto-suave); font-size: var(--t-sm); }
@media (max-width: 960px) {
.filosofia__grid { grid-template-columns: 1fr; }
}
.metodo {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(2rem, 1rem + 4vw, 5rem);
align-items: center;
padding: clamp(2rem, 1.2rem + 3vw, 4rem);
border-radius: var(--radio-xl);
background: linear-gradient(170deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.01));
}
.metodo__anillo { display: none; }
.metodo--js .metodo__anillo { display: block; }
.metodo__pestanas {
display: flex;
flex-wrap: wrap;
gap: var(--e-2);
padding: 5px;
margin-bottom: var(--e-6);
border-radius: 16px;
background: var(--vidrio);
border: 1px solid var(--linea);
}
.metodo__pestana {
flex: 1 1 auto;
padding: 0.7rem 1rem;
border-radius: 12px;
color: var(--texto-suave);
font-size: var(--t-sm);
font-weight: 500;
transition: background var(--medio), color var(--medio), box-shadow var(--medio);
}
.metodo__pestana:hover { color: var(--texto); }
.metodo__pestana[aria-selected='true'] {
color: #fff;
background: linear-gradient(135deg, var(--violeta), var(--violeta-claro));
box-shadow: 0 0 22px rgb(91 49 240 / 0.6);
}
.metodo__pasos { display: grid; gap: var(--e-6); }
.metodo--js .metodo__pasos { display: block; }
.metodo__paso h3 {
display: flex;
align-items: baseline;
gap: var(--e-3);
font-family: var(--fuente-display);
font-weight: 400;
font-size: var(--t-xl);
margin-bottom: var(--e-3);
}
.metodo__paso h3 span { font-size: var(--t-sm); color: var(--amarillo); }
.metodo__paso p { color: var(--texto-suave); font-size: var(--t-lg); max-width: 52ch; }
.metodo--js .metodo__paso:not([hidden]) { animation: aparecer var(--lento) var(--curva); }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 760px) {
.metodo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.metodo__contenido { width: 100%; }
.metodo__paso p { margin-inline: auto; }
.metodo__paso h3 { justify-content: center; }
}
.contacto__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--e-7);
align-items: center;
}
@media (max-width: 860px) { .contacto__grid { grid-template-columns: 1fr; } }
.problema__grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--e-7);
align-items: center;
}
.dolores { display: grid; gap: var(--e-3); }
.dolor {
display: flex;
align-items: flex-start;
gap: var(--e-3);
padding: var(--e-4) var(--e-5);
border-radius: var(--radio);
background: var(--vidrio);
border: 1px solid var(--linea);
}
.dolor svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; color: var(--naranja); }
@media (max-width: 860px) { .problema__grid { grid-template-columns: 1fr; } }
.entregables {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--e-4);
counter-reset: entregable;
}
.entregable {
position: relative;
padding: var(--e-6);
border-radius: var(--radio-lg);
background: linear-gradient(170deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.015));
overflow: hidden;
transition: transform var(--medio) var(--curva), box-shadow var(--medio);
}
.entregable:hover { transform: translateY(-4px); box-shadow: var(--brillo-violeta); }
.entregable:nth-child(1),
.entregable:nth-child(4),
.entregable:nth-child(6) { grid-column: span 2; }
.entregable__num {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
margin-bottom: var(--e-5);
border-radius: 12px;
background: rgb(242 245 63 / 0.12);
color: var(--amarillo);
font-family: var(--fuente-display);
font-size: var(--t-sm);
}
.entregable h3 { font-family: var(--fuente-display); font-weight: 400; font-size: 1.3rem; line-height: 1.15; margin-bottom: var(--e-2); }
.entregable p { color: var(--texto-suave); font-size: var(--t-sm); }
.entregable::after {
content: '';
position: absolute;
width: 220px;
height: 220px;
right: -90px;
bottom: -120px;
border-radius: 50%;
background: radial-gradient(circle, rgb(91 49 240 / 0.4), transparent 65%);
pointer-events: none;
}
@media (max-width: 960px) {
.entregables { grid-template-columns: repeat(2, 1fr); }
.entregable:nth-child(n) { grid-column: auto; }
.entregable:nth-child(1),
.entregable:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 600px) {
.entregables { grid-template-columns: 1fr; }
.entregable:nth-child(n) { grid-column: auto; }
}
.proceso__diagrama {
padding: clamp(1.25rem, 0.8rem + 2vw, 3rem);
border-radius: var(--radio-xl);
background: linear-gradient(170deg, rgb(91 49 240 / 0.12), rgb(255 255 255 / 0.015));
margin-bottom: var(--e-6);
}
.proceso__diagrama svg { width: 100%; height: auto; }
.diagrama-texto { font-family: var(--fuente-texto); fill: var(--texto); }
.diagrama-texto--suave { fill: var(--texto-suave); }
.diagrama-texto--acento { fill: var(--amarillo); }
.pasos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--e-4);
}
.pasos:has(> :nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) {
.pasos, .pasos:has(> :nth-child(5)) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.pasos, .pasos:has(> :nth-child(5)) { grid-template-columns: 1fr; }
}
.paso {
padding: var(--e-5);
border-left: 2px solid var(--violeta);
border-radius: 0;
}
.paso__num { font-family: var(--fuente-display); font-size: var(--t-xs); color: var(--amarillo); letter-spacing: 0.1em; }
.paso h3 { margin: var(--e-1) 0 var(--e-2); font-family: var(--fuente-display); font-weight: 400; font-size: 1.2rem; }
.paso p { color: var(--texto-suave); font-size: var(--t-sm); }
.encaje__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.encaje__columna {
padding: var(--e-6);
border-radius: var(--radio-lg);
background: var(--vidrio);
}
.encaje__columna--no { border: 1px solid var(--linea); background: transparent; }
.encaje__columna h3 { font-family: var(--fuente-display); font-weight: 400; font-size: var(--t-xl); margin-bottom: var(--e-5); }
.encaje__columna ul { display: grid; gap: var(--e-4); }
.encaje__columna li { display: flex; gap: var(--e-3); align-items: flex-start; color: var(--texto-suave); }
.encaje__columna li svg { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; }
.encaje__columna--si li svg { color: var(--verde); }
.encaje__columna--no li svg { color: var(--texto-tenue); }
@media (max-width: 760px) { .encaje__grid { grid-template-columns: 1fr; } }
.diferencial {
position: relative;
overflow: hidden;
padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
border-radius: var(--radio-xl);
background:
radial-gradient(500px 300px at 90% 10%, rgb(242 245 63 / 0.12), transparent 70%),
linear-gradient(160deg, rgb(91 49 240 / 0.25), rgb(255 255 255 / 0.02));
}
.diferencial__titulo {
max-width: 22ch;
font-family: var(--fuente-display);
font-weight: 400;
font-size: var(--t-2xl);
line-height: 1.04;
margin-bottom: var(--e-5);
}
.diferencial__titulo .script { font-size: 1.1em; }
.diferencial p:last-child { max-width: 60ch; color: var(--texto-suave); font-size: var(--t-lg); }
.faq__grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: var(--e-7);
align-items: start;
}
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } }
.relacionados__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
.relacionados__lista .card-servicio__titulo { font-size: 1.35rem; }
@media (max-width: 960px) { .relacionados__lista { grid-template-columns: 1fr; } }
.aviso-borrador {
display: inline-block;
padding: var(--e-3) var(--e-4);
border-radius: var(--radio-sm);
background: rgb(255 75 0 / 0.12);
border: 1px solid rgb(255 75 0 / 0.5);
color: #FFB08A;
font-size: var(--t-sm);
font-weight: 500;
}
.seccion--legal { padding-top: var(--e-7); }
.legal {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--e-7);
align-items: start;
}
.legal__indice {
position: sticky;
top: calc(var(--alto-header) + var(--e-4));
padding: var(--e-5);
border-radius: var(--radio);
background: var(--vidrio);
}
.legal__indice-titulo { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violeta-claro); margin-bottom: var(--e-3); }
.legal__indice ol { padding-left: 1.2rem; display: grid; gap: var(--e-2); color: var(--texto-tenue); font-size: var(--t-sm); }
.legal__indice a { color: var(--texto-suave); text-decoration: none; }
.legal__indice a:hover { color: var(--amarillo); }
.legal__texto { max-width: 72ch; }
.legal__texto h2 {
margin: var(--e-7) 0 var(--e-4);
font-family: var(--fuente-display);
font-weight: 400;
font-size: var(--t-xl);
}
.legal__texto h2:first-child { margin-top: 0; }
.legal__texto p, .legal__texto li { color: var(--texto-suave); }
.legal__texto p + p, .legal__texto p + ul, .legal__texto ul + p { margin-top: var(--e-4); }
.legal__texto ul { padding-left: 1.2rem; display: grid; gap: var(--e-2); }
.legal__texto a { color: var(--amarillo); }
@media (max-width: 860px) {
.legal { grid-template-columns: 1fr; }
.legal__indice { position: static; }
}
.error404 { padding-top: var(--e-7); }
.error404__caja {
position: relative;
overflow: hidden;
padding: clamp(3rem, 2rem + 6vw, 7rem) var(--e-5);
border-radius: var(--radio-xl);
background: linear-gradient(160deg, rgb(91 49 240 / 0.18), rgb(255 255 255 / 0.02));
text-align: center;
}
.error404__orbe {
position: absolute;
width: 420px;
height: 420px;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
border-radius: 50%;
background: radial-gradient(circle, rgb(91 49 240 / 0.6), rgb(242 245 63 / 0.15) 50%, transparent 70%);
filter: blur(50px);
z-index: -1;
}
.error404__codigo {
font-family: var(--fuente-display);
font-size: clamp(6rem, 3rem + 14vw, 12rem);
line-height: 0.9;
color: transparent;
-webkit-text-stroke: 2px var(--amarillo);
filter: drop-shadow(0 0 30px rgb(242 245 63 / 0.4));
}
.error404__titulo {
margin: var(--e-5) auto var(--e-4);
max-width: 20ch;
font-family: var(--fuente-display);
font-weight: 400;
font-size: var(--t-2xl);
line-height: 1.04;
}
.error404__texto { max-width: 50ch; margin: 0 auto var(--e-6); color: var(--texto-suave); }
}