:root{
/* Paleta fe studio (brandbook "identidad FE"): navy profundo, azul marino,
celeste claro, blanco hueso y dorado como acento — reemplaza la paleta
negro/lima anterior de BLStudio.
El dorado es el ÚNICO acento "vivo" (como en el logo: el sol es lo único
de color, la montaña es tonos neutros de azul). El celeste queda como
tono estructural/de fondo, no como segundo acento compitiendo con el
dorado — combinar azul brillante + amarillo uno al lado del otro
terminaba leyéndose como los colores de Boca, no como la marca. */
--bg:#0B1320;
--bg-2:#101B2E;
--ink:#E6EEF5;
--ink-dim:#9FB3C8;
--ink-faint:#6B7C90;
--line:rgba(230,238,245,.08);
--line-strong:rgba(230,238,245,.16);
--accent:#D4AF37; /* dorado fe studio — único acento */
--accent-warm:#E8C766; /* dorado más claro, variante del mismo acento */
--accent-cool:#4C6484; /* azul marino medio, uso estructural/sutil, no como acento */
--celeste:#4FA8E8; /* celeste vivo de la identidad — puntos pulsantes, "en vivo" y "necesitás" */
/* El mismo celeste (tono 205°, igual saturación) pero más profundo, para
fondos claros. Sobre el beige del formulario el celeste normal da 2.33:1
y se lava; éste da 4.55:1. No es otro color: es el celeste que se lee. */
--celeste-hondo:#1873B4;
--grid:rgba(230,238,245,.035);
--mono:'JetBrains Mono', ui-monospace, monospace;
--serif:'Instrument Serif', ui-serif, Georgia, serif;
--sans:'Geist', system-ui, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
/* NO cambiar `overflow-x:clip` por `hidden` a secas.
Según la spec, si un eje es `hidden` el otro pasa de `visible` a `auto`:
body se vuelve contenedor de scroll y eso ANULA `position:sticky` en todos
sus descendientes. Con `hidden` acá, la sección anclada por scroll de
agentes.html (la línea de 5 pasos con el chat al costado) desaparecía en
desktop y dejaba 3.700px de vacío — en mobile no se notaba porque ahí ese
bloque no se ancla. `clip` frena el scroll horizontal igual pero NO crea
contenedor de scroll, así que el sticky sigue funcionando.
Se declaran los dos: los navegadores que no entienden `clip` (Safari < 16)
se quedan con `hidden` y conservan la protección. */
html,body{background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip}
body{ font-size:16px; line-height:1.5; cursor:default }
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
::selection{ background:var(--accent); color:#000 }
/* === PRELOADER (caso 1 del character bible: "loading / splash") ===
El Guía flotando + barra dorada de progreso real. El progreso NO es falso:
lo calcula el JS a partir de la carga efectiva de los assets pesados
(la foto del hero pesa ~2.3MB), así que la barra refleja algo cierto. */
.preloader{
position:fixed; inset:0; z-index:9999;
display:flex; align-items:center; justify-content:center;
background:
radial-gradient(120% 90% at 50% 40%, #16233A 0%, var(--bg) 60%),
var(--bg);
opacity:1; visibility:visible;
transition:opacity .7s ease, visibility 0s linear .7s;
/* Red de seguridad en CSS puro: si el JS fallara por completo, el preloader
igual se va solo a los 20s en vez de dejar la web tapada para siempre.
(20s y no 12s por el peso real de la foto del hero en conexiones lentas.) */
animation:preloaderFailsafe 0s linear 20s forwards;
}
.preloader.done{ opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s linear .7s }
@keyframes preloaderFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none } }
/* Orden tomado del panel "1. LOADING / SPLASH" del character sheet:
personaje -> texto -> barra -> porcentaje. */
.preloader-inner{ display:flex; flex-direction:column; align-items:center; width:min(320px, 78vw) }
.preloader-figure{ position:relative; margin-bottom:30px }
.preloader-guia{
width:clamp(120px, 26vw, 168px); height:auto; display:block; position:relative; z-index:2;
filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(212,175,55,.3));
animation:guiaFlotaHero 3.2s ease-in-out infinite;
}
/* Partículas doradas flotando alrededor — están en la referencia y le dan
el aire "cinemático" de la marca. Las posiciona el JS. */
.preloader-sparks{ position:absolute; inset:-18% -34%; z-index:1; pointer-events:none }
.preloader-sparks i{
position:absolute; border-radius:50%; background:var(--accent);
box-shadow:0 0 6px rgba(212,175,55,.9);
animation:sparkTwinkle var(--dur,3s) ease-in-out var(--delay,0s) infinite;
}
/* nunca baja del todo a 0: aunque una partícula esté en su punto más tenue,
sigue insinuándose. Antes desaparecían por completo la mitad del ciclo. */
@keyframes sparkTwinkle{
0%,100%{ opacity:.25; transform:translateY(3px) scale(.7) }
50%{ opacity:1; transform:translateY(-6px) scale(1) }
}
.preloader-text{
font-family:var(--mono); font-size:12.5px; color:var(--ink-dim); margin-bottom:16px;
}
.preloader-text .ell{ opacity:.7; animation:ellFade 1.4s steps(1) infinite }
@keyframes ellFade{ 0%{opacity:.25} 50%{opacity:.8} 100%{opacity:.25} }
.preloader-bar{
width:100%; height:4px; border-radius:99px; overflow:hidden;
background:rgba(230,238,245,.12);
}
.preloader-bar span{
display:block; height:100%; width:0%; border-radius:99px;
background:linear-gradient(90deg, var(--accent), var(--accent-warm));
box-shadow:0 0 12px rgba(212,175,55,.6);
transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.preloader-pct{
margin-top:14px; font-family:var(--mono); font-size:20px; font-weight:600; color:var(--accent);
}
body.cargando{ overflow:hidden } /* sin scroll mientras carga */
/* Con movimiento reducido el personaje y las chispas siguen visibles: sólo se
quedan quietos. Apagar la composición entera dejaba el preloader vacío. */
@media (prefers-reduced-motion: reduce){
/* flota igual, apenas: 4px y lento (ver guiaFlotaSuave) */
.preloader-guia{ animation:guiaFlotaSuave 7s ease-in-out infinite }
.preloader-sparks i{ animation:none; opacity:.85 }
}
/* === ATMOSPHERE === */
/* height explícita en dvh además de inset:0 — en iOS Safari, el toolbar dinámico puede
dejar un hueco abajo en overlays fixed que solo usan inset:0, mostrando la página "pelada". */
.grain{
position:fixed; inset:0; height:100vh; height:100dvh; pointer-events:none; z-index:200;
opacity:.10; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
/* capa propia en GPU: evita que el navegador la repinte junto con el contenido */
transform:translateZ(0); will-change:transform;
}
.scanlines{
position:fixed; inset:0; height:100vh; height:100dvh; pointer-events:none; z-index:201; opacity:.04;
background:repeating-linear-gradient(to bottom, transparent 0 2px, #000 2px 3px);
transform:translateZ(0); will-change:transform;
}
/* En pantallas táctiles se saca el mix-blend-mode del grano.
Un overlay fijo a pantalla completa con blend obliga al navegador a
recomponer la mezcla contra TODO el contenido en cada frame de scroll —
es la causa clásica de scroll trabado en celulares. A opacidad .10 sobre un
fondo navy oscuro, la diferencia entre "overlay" y normal es imperceptible,
así que la textura se mantiene y se recupera la fluidez. */
@media (hover: none) and (pointer: coarse){
.grain{ mix-blend-mode:normal; opacity:.05 }
}
/* el sombreado oscuro (vignette) antes era un overlay fixed que cubría TODA la
página, incluidas las secciones de fondo negro (portfolio, servicios, proceso),
donde no aporta nada y solo ensucia. Ahora es un efecto propio de cada sección
clara (hero y formulario) — vive adentro de esas secciones y desaparece solo
al scrollear a las secciones negras. */
.hero::after, .form-section.light::after{
content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
background:radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,.16) 100%);
}
/* === SCROLL PROGRESS === */
.scroll-progress{
position:fixed; top:0; left:0; height:3px; width:0%;
background:var(--accent); box-shadow:0 0 10px rgba(212,175,55,.6);
z-index:150; pointer-events:none; transition:width .1s linear;
}
/* === ORB (cursor follower) === */
.orb{
position:fixed; width:560px; height:560px; border-radius:50%;
background:radial-gradient(circle, rgba(212,175,55,.18), rgba(212,175,55,0) 60%);
filter:blur(40px); pointer-events:none; z-index:1;
transform:translate(-50%,-50%); transition: transform .4s cubic-bezier(.2,.8,.2,1);
will-change:transform;
}
/* === NAV === */
/* Sin blur/fondo en la primera vista — nav.top arranca transparente, mostrando
la foto del hero de fondo. El blur + fondo oscuro solo aparecen al scrollear
(clase .scrolled, agregada por JS pasado cierto scrollY). */
nav.top{
position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; justify-content:space-between; align-items:center;
padding:12px 32px; backdrop-filter:blur(0px) saturate(140%);
background:transparent;
border-bottom:1px solid transparent;
transition:border-color .35s, background-color .35s, backdrop-filter .35s;
}
nav.top.scrolled{
border-color:var(--line); background:rgba(7,7,8,.85);
backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:-.02em }
/* logo ya viene recortado sin aire extra alrededor (assets/fe-logo-head.png),
así que la altura acá se traduce directo en tamaño visible real. */
.brand img{ height:46px; width:auto; object-fit:contain }
.brand .dot{ width:6px; height:6px; background:var(--accent); border-radius:50%; box-shadow:0 0 12px var(--accent); animation:pulse 2s ease-in-out infinite }
@keyframes pulse{ 50%{ opacity:.4 } }
/* === MENU TOGGLE (3 rayitas → X) === */
.menu-toggle{
width:46px; height:46px; border-radius:50%; flex:none;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
border:1px solid var(--line-strong); background:rgba(244,243,238,.03);
transition:.3s cubic-bezier(.2,.8,.2,1); position:relative; z-index:210;
}
.menu-toggle:hover{ border-color:var(--accent); background:rgba(212,175,55,.08) }
.menu-toggle span{
display:block; width:18px; height:2px; border-radius:2px; background:var(--ink);
transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, width .25s ease;
}
.menu-toggle.open{ border-color:var(--accent); background:rgba(212,175,55,.1) }
.menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.menu-toggle.open span:nth-child(2){ opacity:0 }
.menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
/* === SITE MENU (panel desplegable) === */
.site-menu-backdrop{
position:fixed; inset:0; z-index:198; background:rgba(5,8,14,.55);
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.site-menu-backdrop.open{ opacity:1; pointer-events:auto }
.site-menu{
position:fixed; top:0; right:0; height:100dvh; z-index:199;
width:min(420px, 92vw); display:flex; flex-direction:column;
padding:110px 40px 40px;
background:
radial-gradient(140% 90% at 100% 0%, color-mix(in oklab, var(--accent) 9%, transparent) 0%, transparent 55%),
linear-gradient(180deg, #0B1320 0%, #101B2E 100%);
border-left:1px solid var(--line-strong);
box-shadow:-40px 0 80px -30px rgba(0,0,0,.6);
transform:translateX(100%); transition:transform .5s cubic-bezier(.22,.8,.2,1);
}
.site-menu.open{ transform:translateX(0) }
.site-menu-links{ display:flex; flex-direction:column; margin-bottom:auto }
.site-menu-link{
display:flex; align-items:baseline; gap:16px; padding:16px 0;
border-bottom:1px solid var(--line); color:var(--ink);
font-family:var(--sans); font-weight:300; font-size:clamp(22px,4vw,30px); letter-spacing:-.01em;
transition:.25s ease; position:relative; overflow:hidden;
}
.site-menu-link:first-child{ padding-top:0 }
.site-menu-link .num{
font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.05em; flex:none;
}
.site-menu-link .lbl{ transition:transform .3s cubic-bezier(.2,.8,.2,1) }
.site-menu-link:hover{ color:var(--accent); padding-left:8px }
.site-menu-foot{ display:flex; flex-direction:column; gap:16px; padding-top:28px }
.site-menu-cta{
font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.02em;
padding:16px 22px; border-radius:999px; text-align:center;
background:var(--accent); color:#0B1320;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
transition:.25s cubic-bezier(.2,.8,.2,1);
}
.site-menu-cta:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(212,175,55,.5) }
.site-menu-cta .arrow{ transition:transform .3s }
.site-menu-cta:hover .arrow{ transform:translate(2px,-2px) }
.site-menu-wa{
font-family:var(--mono); font-size:12.5px; color:var(--ink-dim);
display:inline-flex; align-items:center; gap:8px; padding:6px 0; transition:.2s;
}
.site-menu-wa:hover{ color:var(--accent) }
.site-menu-meta{
margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.05em;
}
body.menu-open{ overflow:hidden }
/* === HERO === */
.hero{
min-height:100vh; min-height:100dvh; padding:140px 32px 80px; position:relative;
display:flex; flex-direction:column; justify-content:center; overflow:hidden;
/* mismo color que .work/--bg-2 debajo de la foto: cuando la atmósfera se
desvanece hacia el pie del hero, revela este color en vez de cortar
directo contra la sección siguiente — así no hay costura visible. */
background:var(--bg-2);
}
/* Envoltorio de foto+tint+grid+blobs: un solo grupo que se desvanece hacia
el pie del hero (mask-image) para fundirse con el fondo de la sección
siguiente en vez de cortar en una línea recta. */
.hero-atmosphere{
position:absolute; inset:0; z-index:0;
/* se desvanece bastante antes del borde final del hero — así la zona que
queda tapada por el panel redondeado superpuesto (.work) ya es un
color plano y parejo, sin manchas oscuras de la foto/blobs asomando
detrás de las esquinas redondeadas. */
-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 85%);
mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 85%);
}
/* Foto de montaña de fondo, detrás de grid/blobs/partículas. El fondo negro
sólido (--bg) que antes se veía acá ahora es un tint semitransparente encima
de la foto, no un color opaco — así la foto se ve a través de todo. */
.hero-bg-photo{ position:absolute; inset:0; z-index:0; overflow:hidden }
.hero-bg-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block }
.hero-bg-tint{
position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(180deg, rgba(11,19,32,.5) 0%, rgba(11,19,32,.3) 40%, rgba(11,19,32,.55) 100%);
}
.hero-grid{
position:absolute; inset:0;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size:48px 48px;
mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, black 30%, transparent 90%);
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%, black 30%, transparent 90%);
}
.hero-inner{ max-width:1400px; margin:0 auto; width:100%; position:relative; z-index:2 }
.meta-row{
/* top bajado de 96 a 132px en desktop — medido en vivo: el título quedaba con
64px de aire arriba (hacia esta franja) contra solo 28px hacia el subtítulo,
mismo desbalance que se corrigió en mobile. Con 132px queda ~28px de los dos
lados. */
position:absolute; top:132px; left:0; right:0; z-index:3;
max-width:1400px; margin:0 auto; padding:0 32px;
display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:9px;
font-family:var(--mono); font-size:11px; color:var(--ink-dim);
text-transform:uppercase; letter-spacing:.18em; white-space:nowrap;
/* sombra sutil — sin esto el texto se pierde contra zonas claras de la foto */
text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.meta-row .live{ display:flex; align-items:center; gap:8px; flex-shrink:0 }
.meta-row .live::before{
content:''; width:6px; height:6px; border-radius:50%;
background:var(--celeste); box-shadow:0 0 8px var(--celeste);
animation:pulse 1.5s ease-in-out infinite;
}
.latam-short{ display:none }@keyframes drawline{ to{ transform:scaleX(1) } }.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.btn{
font-family:var(--mono); font-size:13px; font-weight:500;
padding:14px 22px; border-radius:999px; display:inline-flex; align-items:center; gap:10px;
transition:.3s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden;
}
.btn-primary{ background:var(--accent); color:#000 }
.btn-primary:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(212,175,55,.5) }.btn .arrow{ display:inline-block; transition:transform .3s }
.btn:hover .arrow{ transform:translateX(3px) }
.btn-wapp{ background:#15803d; color:#fff }
.btn-wapp:hover{ background:#16a34a }
/* minimalista, mismo lenguaje que el marquee de servicios pero más chico y sobrio.
Ya no es position:absolute — ahora fluye como último item del flex del hero,
empujado al fondo con margin-top:auto. Antes, con contenido corto arriba, un
bottom:40px fijo daba el mismo resultado visual; pero al agregar la tarjeta de
IA (más alta), el contenido centrado llegaba a superponerse con el marquee en
viewports bajos (ej. 1440x800) porque el bottom fijo no reserva espacio real.
Con flujo normal, el hero simplemente crece más allá de 100vh si hace falta y
nunca se pisan. position:relative + z-index:3 se mantienen para que siga
pintándose arriba del grid de fondo, igual que antes. */
.hero-stats-marquee{
position:relative; z-index:3; margin:56px auto 40px; width:100%;
max-width:1400px; padding:20px 32px 0; border-top:1px solid var(--line);
overflow:hidden; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.hero-stats-marquee .marquee-track{ display:inline-flex; gap:36px; animation:scroll 26s linear infinite; padding-right:36px }
.hero-stats-marquee .marquee-item{
font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; font-style:normal;
color:var(--ink-dim); display:inline-flex; align-items:center; gap:36px; white-space:nowrap;
}
.hero-stats-marquee .marquee-item strong{ color:var(--ink); font-weight:600 }
.hero-stats-marquee .marquee-item::after{
content:'✦'; font-family:var(--mono); color:var(--accent); font-size:11px; margin-left:36px;
}
/* === HERO LIGHT (fondo claro para contrastar con el portfolio en negro) === */
.hero.light{ background:#f4f3ee }
.hero.light .hero-grid{
background-image:
linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
}
.hero.light .meta-row{ color:#6a6862 }.hero.light .hero-stats-marquee{ border-top-color:rgba(0,0,0,.1) }
.hero.light .hero-stats-marquee .marquee-item{ color:#6a6862 }
.hero.light .hero-stats-marquee .marquee-item strong{ color:#0a0a0a }
/* === SECTIONS === */
section{ padding:140px 32px; position:relative }
.container{ max-width:1400px; margin:0 auto }
.eyebrow{
font-family:var(--mono); font-size:11px; text-transform:uppercase;
letter-spacing:.2em; color:var(--accent); margin-bottom:24px;
display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:''; width:24px; height:1px; background:var(--accent) }
.section-h{
font-family:var(--sans); font-weight:300;
font-size:clamp(36px, 5.5vw, 84px); line-height:1; letter-spacing:-.035em;
margin-bottom:24px; max-width:14ch;
}
/* La palabra en itálica de cada título es el acento de la marca. Antes no
tenía color definido y heredaba el blanco, así que no se distinguía del
resto del título.
Reparto: dorado por defecto, celeste en las secciones de producto/tecnología
(portfolio y agentes) y en las tarjetas de servicio. Van alternadas y
separadas verticalmente, así aportan ritmo sin quedar dorado y celeste
enfrentados en el mismo bloque. */
.section-h .it{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent) }
.work .section-h .it{ color:var(--celeste) }
.agents .section-h .it{ color:var(--celeste) }
.section-lead{ font-size:18px; color:var(--ink-dim); max-width:560px; line-height:1.5; font-weight:300 }
/* === MARQUEE === */
.marquee{
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
padding:32px 0; overflow:hidden; white-space:nowrap;
background:rgba(244,243,238,.015);
}
.marquee-track{ display:inline-flex; gap:64px; animation:scroll 40s linear infinite; padding-right:64px }
@keyframes scroll{ to{ transform:translateX(-50%) } }
.marquee-item{
font-family:var(--serif); font-size:48px; font-style:italic;
color:var(--ink-faint); display:inline-flex; align-items:center; gap:64px;
white-space:nowrap;
}
.marquee-item::after{
content:'✦'; font-style:normal; font-family:var(--mono);
color:var(--accent); font-size:18px; margin-left:64px;
}
/* === SERVICES === */
.services{ padding:140px 32px; background:linear-gradient(to bottom, var(--bg) 0%, var(--bg-2) 100%) }
.services-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1px; margin-top:80px; background:var(--line); border:1px solid var(--line) }
.service{
background:var(--bg-2); padding:48px 36px; min-height:420px;
display:flex; flex-direction:column; position:relative; overflow:hidden;
transition:.4s cubic-bezier(.2,.8,.2,1);
}
.service:hover{ background:#0f0f12 }
.service:nth-child(1){ grid-column:span 7 }
.service:nth-child(2){ grid-column:span 5 }
.service:nth-child(3){ grid-column:span 5 }
.service:nth-child(4){ grid-column:span 7 }
.service .num{
font-family:var(--mono); font-size:11px; color:var(--ink-faint);
margin-bottom:auto; letter-spacing:.16em;
}
.service .pill-mini{
display:inline-block; font-family:var(--mono); font-size:9px; font-weight:600;
letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; margin-left:10px;
border-radius:5px; background:rgba(212,175,55,.12); color:var(--accent);
border:1px solid rgba(212,175,55,.4); vertical-align:middle;
}
.service .ico{
width:48px; height:48px; margin-bottom:24px;
border:1px solid var(--line-strong); border-radius:12px;
display:flex; align-items:center; justify-content:center;
color:var(--accent); transition:.3s;
}
.service:hover .ico{ background:var(--accent); color:#000; border-color:var(--accent); transform:rotate(-6deg) }
.service h3{
font-family:var(--sans); font-weight:400; font-size:32px;
line-height:1.05; letter-spacing:-.02em; margin-bottom:16px;
}
.service h3 .it{ font-family:var(--serif); font-style:italic; color:var(--celeste) }
.service p{ color:var(--ink-dim); font-size:15px; line-height:1.55; max-width:42ch; font-weight:300 }
.service-brief{ display:none }
.service .tags{
display:flex; gap:6px; flex-wrap:wrap; margin-top:24px;
font-family:var(--mono); font-size:10px; color:var(--ink-faint);
text-transform:uppercase; letter-spacing:.12em;
}
.service .tags span{ padding:5px 10px; border:1px solid var(--line); border-radius:999px }
/* === PLANS === */
/* === AGENTES DE IA === */
.agents{ padding:140px 32px; background:var(--bg-2); position:relative; overflow:hidden }.agent-caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:56px }
.agent-cap-num{
font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--accent);
padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.agent-cap h4{ font-size:17px; font-weight:500; margin-bottom:10px; color:var(--ink) }
.agent-cap p{ color:var(--ink-dim); font-size:14.5px; line-height:1.6 }
/* La prueba: el argumento más fuerte de la sección (el agente ya corre en esta web) */
.agent-proof{
margin-top:64px; padding:30px 32px; border-radius:18px;
display:flex; align-items:center; gap:32px; flex-wrap:wrap; justify-content:space-between;
background:color-mix(in oklab, var(--accent) 7%, transparent);
border:1px solid color-mix(in oklab, var(--accent) 28%, transparent);
}
.agent-proof-lbl{
font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
color:var(--accent); margin-bottom:8px;
}
.agent-proof p{ color:var(--ink); font-size:15px; line-height:1.6; max-width:62ch }
.agent-proof .btn{ flex:none }@media (max-width:900px){
.agents{ padding:80px 20px }.agent-caps{ grid-template-columns:1fr; gap:28px; margin-top:40px }
.agent-proof{ margin-top:40px; padding:24px; gap:20px }
.agent-proof .btn{ width:100%; justify-content:center }
}
.plans{ background:linear-gradient(to bottom, var(--bg-2) 0%, var(--bg) 100%); padding:140px 32px; }
.plans-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:64px; flex-wrap:wrap }
.plans-head .left{ flex:1; min-width:300px }
.plans-head .negotiate{
border:1px dashed var(--accent); border-radius:16px; padding:20px 24px;
max-width:340px; font-family:var(--mono); font-size:12px; color:var(--ink);
cursor:pointer; transition:.25s; text-align:left;
}
.plans-head .negotiate:hover{ background:rgba(212,175,55,.08); transform:translateY(-2px) }
.plans-head .negotiate .arrow-mini{ display:inline-block; margin-left:6px; transition:transform .25s }
.plans-head .negotiate:hover .arrow-mini{ transform:translate(3px,-3px) }
.plans-head .negotiate strong{ color:var(--accent); font-weight:500 }
.pill{
display:inline-block; font-family:var(--mono); font-size:10px; font-weight:600;
letter-spacing:.16em; text-transform:uppercase; padding:5px 10px;
border-radius:6px; margin-bottom:24px; align-self:flex-start;
}
.pill.lime{ background:rgba(212,175,55,.12); color:var(--accent); border:1px solid rgba(212,175,55,.4) }
/* === OFERTA A MEDIDA === */
.offer-panel{
display:grid; grid-template-columns:1.3fr 1fr; gap:1px;
background:var(--line); border:1px solid var(--line); border-radius:24px; overflow:hidden;
}
.offer-main{ background:var(--bg-2); padding:48px 44px; display:flex; flex-direction:column; justify-content:center }
.offer-title{
font-family:var(--sans); font-weight:300; font-size:clamp(26px,3vw,38px);
line-height:1.2; letter-spacing:-.02em; margin:20px 0 28px; max-width:24ch;
}
.offer-title .it{ font-family:var(--serif); font-style:italic; color:var(--accent) }
.offer-feats{ list-style:none }
.offer-feats li{
display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line);
font-size:15px; line-height:1.5; color:var(--ink); font-weight:300;
}
.offer-feats li:first-child{ border-top:0; padding-top:0 }
.offer-feats li::before{ content:'\2713'; color:var(--accent); font-weight:700; flex-shrink:0 }
.offer-price{
background:linear-gradient(165deg, #0d0e10 0%, #14150f 100%);
padding:48px 40px; display:flex; flex-direction:column; gap:18px; justify-content:center;
position:relative; box-shadow:inset 0 1px 0 rgba(212,175,55,.12), inset 0 0 140px -70px rgba(212,175,55,.3);
}
.offer-price::before{
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.7;
}
.offer-price-row{ display:flex; gap:28px; flex-wrap:wrap }
.offer-price-lbl{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); margin-bottom:10px }
.offer-price-num{ font-family:var(--serif); font-size:42px; letter-spacing:-.03em; color:var(--ink); line-height:1 }
.offer-price-num.accent{ color:var(--accent) }
.offer-price-num .per{ font-family:var(--mono); font-size:16px; color:var(--ink-faint); font-style:normal }
.offer-price-sub{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); line-height:1.5 }
.offer-price-sub #current-month-tag{ color:var(--accent) }
.offer-price .form-submit{ margin-top:2px }
.offer-bonus{
font-family:var(--mono); font-size:12.5px; color:var(--ink); line-height:1.55;
background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.28); border-radius:12px;
padding:14px 16px;
}
.offer-bonus .bonus-tag{
display:inline-block; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
color:#0a0a0a; background:var(--accent); padding:3px 8px; border-radius:5px; margin-right:8px; vertical-align:middle;
}@media (max-width:1100px){
.offer-panel{ grid-template-columns:1fr }
.portfolio-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:600px){
/* sección 03 comprimida para que entre en una sola vista mobile: menos
padding, bloques de precio en fila compacta en vez de apilados con
subtexto propio cada uno, y el botón de "¿algo puntual?" pasa de caja
grande a un link fino de una línea. */
.plans{ padding:56px 20px }
.plans-head{ margin-bottom:32px; flex-direction:column; align-items:flex-start; gap:16px }
.offer-main, .offer-price{ padding:24px 22px }
.offer-price{ gap:12px }
.offer-price-row{ gap:20px }
.offer-price-num{ font-size:30px }
.offer-bonus{ padding:11px 13px; font-size:11.5px }
.offer-price-sub{ font-size:10px }
.offer-feats li{ padding:9px 0; font-size:14px }
.pill.lime{ margin-bottom:14px }
.offer-title{ margin:12px 0 16px; font-size:24px }
.plans-head .negotiate{
max-width:100%; border:0; padding:0; background:none; font-size:12.5px;
}
.plans-head .negotiate:hover{ background:none; transform:none }
}
/* === WORK / PORTFOLIO === */
.work{
/* Azul marino medio de la identidad (#1D3557) — bastante más claro que el
navy casi negro del hero (--bg), para que el panel redondeado se note
de verdad como un elemento propio en vez de fundirse con el fondo. */
background:linear-gradient(180deg, #223F66 0%, #1D3557 32%, #1D3557 100%);
padding:160px 32px 130px; position:relative; overflow:hidden;
/* Panel redondeado que se superpone al hero (margin-top negativo) en vez de
cortar en una línea recta — da la sensación de que "flota" por encima de
la foto de montaña. Sin box-shadow: generaba una franja oscura fea sobre
el grid de fondo en vez de una sombra sutil. */
margin-top:-110px; border-radius:40px 40px 0 0;
}
.work::before{
content:''; position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size:80px 80px;
mask-image:radial-gradient(ellipse 75% 65% at 50% 0%, black, transparent 85%);
}
.work .container{ position:relative; z-index:2 }
.portfolio-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:80px;
}
.portfolio-card{
display:flex; flex-direction:column; background:var(--bg);
border:1px solid var(--line); border-radius:20px; overflow:hidden;
position:relative; text-decoration:none; color:inherit;
/* Antes era `transition:.45s` a secas, que equivale a `all`: el navegador
vigila TODAS las propiedades animables de la tarjeta en cada frame.
Listándolas explícitamente hace el mismo efecto visual con mucho menos
trabajo. `will-change:transform` la promueve a su propia capa de GPU,
así el desplazamiento no obliga a repintar la sección entera. */
transition:transform .45s cubic-bezier(.2,.8,.2,1),
border-color .45s cubic-bezier(.2,.8,.2,1),
box-shadow .45s cubic-bezier(.2,.8,.2,1);
will-change:transform;
}
/* .in-view (activado por el IntersectionObserver al scrollear) queda restringido
a dispositivos SIN hover real (mobile/touch). En desktop, si .in-view también
aplicara el mismo estilo que :hover, las cards quedarían "ya levantadas" apenas
entran en el centro de la pantalla, y pasar el mouse por arriba no cambiaba
nada visible — por eso "no andaba el hover" en desktop: en realidad sí andaba,
pero no se notaba porque el estado ya estaba activo de antes. */
.portfolio-card:hover{
transform:translateY(-8px); border-color:var(--card-accent-legible, var(--card-accent, var(--accent)));
box-shadow:
0 30px 60px -24px rgba(0,0,0,.65),
0 0 70px -16px var(--card-accent, transparent);
}
@media (hover:none){
.portfolio-card.in-view{
transform:translateY(-8px); border-color:var(--card-accent-legible, var(--card-accent, var(--accent)));
box-shadow:
0 30px 60px -24px rgba(0,0,0,.65),
0 0 70px -16px var(--card-accent, transparent);
}
}
.seo-badge{
display:flex; align-items:center; gap:9px; margin-bottom:20px;
padding:10px 12px; background:rgba(244,243,238,.04); border:1px solid var(--line-strong);
border-radius:10px; font-family:var(--mono); font-size:11px; color:var(--ink-dim);
line-height:1.35;
}
.seo-badge svg{ flex-shrink:0 }
.portfolio-shot{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#000 }
.portfolio-shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1) }
.portfolio-card:hover .portfolio-shot > img{ transform:scale(1.08) }
@media (hover:none){ .portfolio-card.in-view .portfolio-shot > img{ transform:scale(1.08) } }
.portfolio-shot .browser-bar{
position:absolute; top:0; left:0; right:0; height:26px; z-index:2;
background:rgba(7,7,8,.55); backdrop-filter:blur(6px);
display:flex; align-items:center; gap:6px; padding:0 12px;
}
.browser-bar .dot{ width:6px; height:6px; border-radius:50%; background:rgba(244,243,238,.28) }
/* En táctiles se cambia el backdrop-filter de la barra por un fondo sólido.
Cada backdrop-filter obliga al navegador a muestrear y desenfocar lo que
hay detrás en CADA frame de scroll, y acá hay uno por tarjeta del
portfolio. Sobre una foto oscura y en una franja de 26px, el desenfoque no
se percibe: se compensa subiendo apenas la opacidad del fondo. */
@media (hover: none) and (pointer: coarse){
.portfolio-shot .browser-bar{ background:rgba(7,7,8,.72); backdrop-filter:none; -webkit-backdrop-filter:none }
}
.portfolio-shot .live-badge{
position:absolute; top:38px; right:12px; z-index:3;
font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
padding:5px 10px 5px 8px; border-radius:999px; color:var(--card-accent-legible, var(--card-accent, var(--accent)));
background:rgba(7,7,8,.6); backdrop-filter:blur(6px); border:1px solid currentColor;
display:flex; align-items:center; gap:6px;
}
.live-badge::before{
content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
box-shadow:0 0 8px currentColor; animation:pulse 1.5s ease-in-out infinite;
}
.portfolio-shot .detail-peek{
position:absolute; bottom:-1px; right:16px; width:84px; height:84px; z-index:4;
border-radius:10px 10px 0 0; overflow:hidden; border:3px solid var(--bg);
box-shadow:0 -6px 20px rgba(0,0,0,.4);
transform:translateY(24px) rotate(5deg);
transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.portfolio-card:hover .detail-peek{ transform:translateY(0) rotate(-3deg) }
@media (hover:none){ .portfolio-card.in-view .detail-peek{ transform:translateY(0) rotate(-3deg) } }
.detail-peek img{ width:100%; height:100%; object-fit:cover }
.portfolio-body{ padding:28px 28px 30px; display:flex; flex-direction:column; flex:1 }
.portfolio-eyebrow{
font-family:var(--mono); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
color:var(--card-accent-legible, var(--card-accent, var(--accent))); margin-bottom:12px;
}
.portfolio-card h3{
font-family:var(--sans); font-weight:400; font-size:29px; letter-spacing:-.02em;
line-height:1.1; margin-bottom:18px;
}
.portfolio-card h3 .it{ font-family:var(--serif); font-style:italic; transition:color .3s ease }
.portfolio-card:hover h3 .it{ color:var(--card-accent-legible, var(--card-accent, var(--accent))) }
@media (hover:none){ .portfolio-card.in-view h3 .it{ color:var(--card-accent-legible, var(--card-accent, var(--accent))) } }
.portfolio-compare{ list-style:none; margin-bottom:20px; font-size:15px; line-height:1.55; font-weight:300; color:var(--ink-dim) }
.portfolio-compare strong{ color:var(--ink); font-weight:600 }
.accent-word{ color:var(--accent) }
.portfolio-compare li{ display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--line) }
.portfolio-compare li:first-child{ border-top:0; padding-top:0 }
.portfolio-compare .lbl{
font-family:var(--mono); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.1em;
color:var(--ink-dim); flex-shrink:0; padding-top:2px; min-width:58px;
}
.portfolio-link{
margin-top:auto; display:inline-flex; align-items:center; gap:8px;
font-family:var(--mono); font-size:13px; color:var(--ink);
padding-top:16px; border-top:1px solid var(--line);
}
.portfolio-link .arrow{ color:var(--card-accent-legible, var(--card-accent, var(--accent))); transition:transform .3s }
.portfolio-card:hover .portfolio-link .arrow{ transform:translate(3px,-3px) }
@media (hover:none){ .portfolio-card.in-view .portfolio-link .arrow{ transform:translate(3px,-3px) } }
/* === PROCESS === */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:80px }
.step{ position:relative }
.step .step-num{
font-family:var(--serif); font-size:96px; line-height:1; color:var(--accent);
margin-bottom:16px; letter-spacing:-.04em;
}
.step h4{ font-family:var(--sans); font-weight:500; font-size:20px; margin-bottom:10px; letter-spacing:-.01em }
.step p{ color:var(--ink-dim); font-size:14px; line-height:1.55; font-weight:300 }
.step::before{
content:''; position:absolute; top:48px; left:60px; right:-40px; height:1px;
background:repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px);
}
.step:last-child::before{ display:none }
/* === FORM === */
.form-section{
background:var(--bg);
padding:140px 32px; position:relative;
transition: background-color .9s cubic-bezier(.2,.8,.2,1);
}
.form-section.light{
background:#f4f3ee;
}
.form-section.light::before{
opacity:.5;
mask-image:radial-gradient(ellipse 60% 80% at 100% 0%, black, transparent 80%);
background-image:
linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
}
.form-section.light .eyebrow{ color:#0a0a0a }
.form-section.light .eyebrow::before{ background:#0a0a0a }
.form-section.light .section-h,
.form-section.light .form-info ul,
.form-section.light .form-info .contact-line{ color:#0a0a0a }
/* "necesitás" en celeste, como en el resto del sitio. El :root ya define este
acento justamente para "en vivo" y "necesitás"; acá estaba en negro y
rompía esa consistencia. Va la variante honda porque el fondo es claro. */
.form-section.light .section-h .it{ color:var(--celeste-hondo) }
.form-section.light .section-lead{ color:#4a4843 }
.form-section.light .form-info li{
color:#4a4843; border-color:rgba(0,0,0,.08);
}
.form-section.light .form-info ul{ border-top-color:rgba(0,0,0,.12) }
.form-section.light .form-info li svg{ color:#0a0a0a }
.form-section.light .form-info .contact-line{ color:#4a4843 }
.form-section.light .form-info .contact-line a{ color:#0a0a0a }
.form-section.light form.intake{
background:#fff; border-color:rgba(0,0,0,.08);
box-shadow:0 30px 80px -20px rgba(0,0,0,.18);
}
.form-section.light label{ color:#6a6862 }
.form-section.light label .req{ color:#0a0a0a }
.form-section.light input[type=text],
.form-section.light input[type=email],
.form-section.light input[type=tel],
.form-section.light textarea,
.form-section.light select{
color:#0a0a0a; border-bottom-color:rgba(0,0,0,.18);
}
.form-section.light input::placeholder,
.form-section.light textarea::placeholder{ color:#a0a0a0 }
.form-section.light input:focus,
.form-section.light textarea:focus,
.form-section.light select:focus{ border-color:#0a0a0a }
.form-section.light select{ background:#fff }
.form-section.light select option{ background:#fff; color:#0a0a0a }
.form-section.light .chip{
color:#4a4843; border-color:rgba(0,0,0,.18);
}
.form-section.light .chip:hover{ color:#0a0a0a; border-color:#0a0a0a }
.form-section.light .chip.active{
background:#0a0a0a; color:#d4af37; border-color:#0a0a0a;
}
.form-section.light .form-submit{
background:#0a0a0a; color:#d4af37;
}
.form-section.light .form-submit:hover{
background:#d4af37; color:#0a0a0a; box-shadow:0 16px 40px -12px rgba(0,0,0,.3);
}
.form-section.light .form-success h4{ color:#0a0a0a }
.form-section.light .form-success p{ color:#4a4843 }
.form-section::before{
content:''; position:absolute; inset:0;
background-image:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size:80px 80px;
mask-image:radial-gradient(ellipse 60% 80% at 100% 0%, black, transparent 80%);
}
.form-wrap{ display:grid; grid-template-columns:1fr 1.1fr; gap:80px; position:relative; z-index:2 }
.form-info .section-h{ font-size:clamp(40px, 5vw, 72px) }
.form-info ul{ list-style:none; margin-top:40px; border-top:1px solid var(--line) }
.form-info li{
padding:20px 0; border-bottom:1px solid var(--line);
display:flex; align-items:center; gap:16px;
font-family:var(--mono); font-size:13px; color:var(--ink-dim);
}
.form-info li svg{ color:var(--accent); flex-shrink:0 }
.form-info .contact-line{
margin-top:48px; font-family:var(--mono); font-size:13px;
color:var(--ink-dim); line-height:1.8;
}
.form-info .contact-line a{ color:var(--accent); border-bottom:1px solid currentColor; padding-bottom:1px }
.form-info .contact-line a.wa-link{
display:inline-flex; align-items:center; gap:8px; margin-top:10px;
background:#22c55e; color:#000; padding:8px 14px; border-radius:999px;
border:0; font-weight:500; transition:.25s;
}
.form-info .contact-line a.wa-link:hover{ background:#16a34a; color:#fff; transform:translateY(-1px) }
.form-section.light .form-info .contact-line a.wa-link{ color:#000 }
form.intake{
background:rgba(244,243,238,.02); border:1px solid var(--line-strong);
border-radius:24px; padding:40px; backdrop-filter:blur(20px);
}
.form-row{ margin-bottom:24px }
.form-row.split{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
label{
display:block; font-family:var(--mono); font-size:11px;
color:var(--ink-dim); text-transform:uppercase; letter-spacing:.14em; margin-bottom:8px;
}
label .req{ color:var(--accent) }
input[type=text], input[type=email], input[type=tel], textarea, select{
width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-strong);
padding:12px 0; color:var(--ink); font-family:var(--sans); font-size:16px;
transition:.25s; resize:none; appearance:none;
}
input:focus, textarea:focus, select:focus{ outline:0; border-color:var(--accent) }
textarea{ min-height:96px }
select{ background:var(--bg); cursor:pointer; padding:12px 0 }
select option{ background:var(--bg-2) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
font-family:var(--mono); font-size:12px; padding:8px 14px;
border:1px solid var(--line-strong); border-radius:999px;
color:var(--ink-dim); transition:.2s; user-select:none;
}
.chip:hover{ border-color:var(--ink-faint); color:var(--ink) }
.chip.active{ background:var(--accent); border-color:var(--accent); color:#000 }
.form-submit{
margin-top:32px; width:100%; padding:18px;
background:var(--accent); color:#000; font-family:var(--mono);
font-size:13px; font-weight:600; letter-spacing:.05em;
border-radius:999px; transition:.3s; display:flex; align-items:center; justify-content:center; gap:10px;
}
.form-submit:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(212,175,55,.5) }
.form-success{
text-align:center; padding:40px 20px; display:none;
}
.form-success.show{ display:block }
.form-success .check{
width:64px; height:64px; margin:0 auto 24px;
border-radius:50%; background:var(--accent); color:#000;
display:flex; align-items:center; justify-content:center;
animation:pop .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{ from{ transform:scale(0); opacity:0 } }
.form-success h4{ font-family:var(--serif); font-size:32px; margin-bottom:12px }
.form-success p{ color:var(--ink-dim) }
/* === FOOTER === */
footer{
background:var(--bg-2); border-top:1px solid var(--line);
padding:80px 32px 32px; position:relative; overflow:hidden;
}
.footer-big{ line-height:0 }
/* el logo del pie es un enlace al inicio: inline-block para que el área
clickeable sea la del logo y no toda la fila */
.footer-big a{ display:inline-block; transition:opacity .25s ease }
.footer-big a:hover{ opacity:.82 }
.footer-big img{ width:clamp(200px, 30vw, 460px); height:auto; object-fit:contain }
.footer-meta{
display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px;
margin-top:80px; padding-top:40px; border-top:1px solid var(--line);
font-family:var(--mono); font-size:12px;
}
.footer-meta h5{ font-size:11px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.16em; margin-bottom:14px; font-weight:500 }
.footer-meta a{ display:block; color:var(--ink); padding:4px 0; transition:.2s; opacity:.85 }
.footer-meta a:hover{ color:var(--accent); opacity:1 }
.footer-meta p{ color:var(--ink); opacity:.75 }
.footer-bottom{
margin-top:60px; padding-top:24px; border-top:1px solid var(--line);
display:flex; justify-content:space-between; align-items:center;
font-family:var(--mono); font-size:11px; color:var(--ink-faint);
}
/* === REVEAL === */
.reveal{ opacity:0; transform:translateY(40px); transition:.9s cubic-bezier(.2,.8,.2,1) }
.reveal.in{ opacity:1; transform:translateY(0) }
.stagger > *{ opacity:0; transform:translateY(20px); transition:.7s cubic-bezier(.2,.8,.2,1) }
.stagger.in > *{ opacity:1; transform:translateY(0) }
.stagger.in > *:nth-child(1){ transition-delay:.05s }
.stagger.in > *:nth-child(2){ transition-delay:.12s }
.stagger.in > *:nth-child(3){ transition-delay:.19s }
.stagger.in > *:nth-child(4){ transition-delay:.26s }
.stagger.in > *:nth-child(5){ transition-delay:.33s }
.stagger.in > *:nth-child(6){ transition-delay:.40s }
/* === MODAL === */
.modal-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
z-index:300; display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-backdrop.open{ display:flex; animation:fadein .25s ease }
@keyframes fadein{ from{ opacity:0 } }
.modal{
background:var(--bg-2); border:1px solid var(--line-strong); border-radius:24px;
width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
padding:36px; position:relative; animation:chatpop .35s cubic-bezier(.2,.8,.2,1);
}
.modal .close-x{
position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
color:var(--ink-dim); display:flex; align-items:center; justify-content:center;
}
.modal .close-x:hover{ background:rgba(244,243,238,.06); color:var(--ink) }
.modal h3{
font-family:var(--sans); font-weight:300; font-size:32px; line-height:1.05;
letter-spacing:-.02em; margin-bottom:12px;
}
.modal h3 .it{ font-family:var(--serif); font-style:italic; color:var(--accent) }
.modal p.lead{ color:var(--ink-dim); font-size:14px; margin-bottom:24px; line-height:1.5 }
/* === WHATSAPP MODAL === */
.wa-modal-textarea{
width:100%; min-height:140px; background:rgba(244,243,238,.02);
border:1px solid var(--line-strong); border-radius:12px;
padding:16px; color:var(--ink); font-family:var(--sans);
font-size:15px; line-height:1.5; resize:none;
transition:.25s; margin-bottom:20px;
}
.wa-modal-textarea:focus{ outline:0; border-color:var(--accent); background:rgba(212,175,55,.02) }
.wa-modal-textarea::placeholder{ color:var(--ink-faint) }
.wa-modal-send{
width:100%; padding:16px; background:#22c55e; color:#fff;
font-family:var(--mono); font-size:13px; font-weight:600;
border-radius:999px; transition:.3s; display:flex; align-items:center;
justify-content:center; gap:10px; border:0; cursor:pointer;
}
.wa-modal-send:hover{ background:#16a34a; transform:translateY(-2px);
box-shadow:0 16px 40px -12px rgba(34,197,94,.5) }
.wa-modal-send svg{ width:18px; height:18px }
/* === SITE PREVIEW MODAL === */
.site-modal-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
z-index:300; display:none; align-items:center; justify-content:center; padding:20px;
overscroll-behavior:contain;
}
.site-modal-backdrop.open{ display:flex; animation:fadein .25s ease }
.site-modal{
background:var(--bg-2); border:1px solid var(--line-strong); border-radius:20px;
width:100%; max-width:1200px; height:88vh; max-height:900px;
display:flex; flex-direction:column; overflow:hidden; position:relative;
animation:chatpop .35s cubic-bezier(.2,.8,.2,1);
overscroll-behavior:contain;
}
.site-modal-bar{
display:flex; align-items:center; gap:14px; padding:14px 18px;
border-bottom:1px solid var(--line); flex-shrink:0; background:var(--bg);
}
.site-modal-bar .dot-group{ display:flex; gap:6px; flex-shrink:0 }
.site-modal-bar .dot-group span{ width:10px; height:10px; border-radius:50%; background:rgba(244,243,238,.15) }
.site-modal-bar .site-name{
font-family:var(--mono); font-size:12.5px; color:var(--ink);
display:flex; align-items:center; gap:8px; flex:1; min-width:0;
}
.site-modal-bar .site-name .swatch{ width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.site-modal-bar .site-name .domain{ color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.site-modal-bar .open-new{
font-family:var(--mono); font-size:11.5px; color:var(--ink-dim);
display:flex; align-items:center; gap:6px; padding:8px 12px;
border:1px solid var(--line-strong); border-radius:999px; transition:.2s; flex-shrink:0;
}
.site-modal-bar .open-new:hover{ color:#000; background:var(--accent); border-color:var(--accent) }
.site-modal-bar .close-x{
width:34px; height:34px; border-radius:50%; color:var(--ink-dim);
display:flex; align-items:center; justify-content:center; flex-shrink:0; position:static;
}
.site-modal-bar .close-x:hover{ background:rgba(244,243,238,.06); color:var(--ink) }
.site-modal-body{ position:relative; flex:1; min-height:0; background:#fff; overflow:hidden }
/* el iframe muestra un sitio de OTRO origen — su scrollbar nativa (gris/blanca,
no la nuestra) no se puede re-estilar desde acá por las restricciones de
cross-origin. Se agranda el iframe 20px de más y se lo posiciona absoluto
dentro de un contenedor con overflow:hidden, así esa scrollbar nativa queda
recortada fuera de la vista, sin afectar el scroll real adentro. */
.site-modal-body iframe{
position:absolute; top:0; left:0;
width:calc(100% + 20px); height:100%; border:0; display:block;
}
.site-modal-loading{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px; background:var(--bg-2); font-family:var(--mono); font-size:12px; color:var(--ink-dim);
transition:opacity .3s;
}
.site-modal-loading .spin{
width:28px; height:28px; border-radius:50%; border:2px solid var(--line-strong);
border-top-color:var(--accent); animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.site-modal-loading.hide{ opacity:0; pointer-events:none }
@media (max-width:700px){
.site-modal{ height:92vh; border-radius:16px }
.site-modal-bar .open-new span{ display:none }
}
/* === FLOATERS ===
Solo aparecen a partir de la 2da sección (no tapan el hero) — se controlan
con la clase .visible, que se agrega/saca por JS según el scroll. */
.floaters{
position:fixed; bottom:24px; right:24px; z-index:90;
display:flex; flex-direction:column; gap:16px; align-items:flex-end;
opacity:0; transform:translateY(14px) scale(.92); pointer-events:none;
transition:opacity .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1);
}
.floaters.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto }
.float-btn{
width:60px; height:60px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
transition:.3s cubic-bezier(.2,.8,.2,1);
position:relative; isolation:isolate;
}
.float-btn:hover{ transform:scale(1.08) translateY(-2px) }
.float-btn::before{
/* anillo de pulso — el detalle que le da el "wow", sin ser invasivo */
content:''; position:absolute; inset:0; border-radius:50%;
border:1.5px solid currentColor; opacity:0; z-index:-1;
animation:floatpulse 2.8s ease-out infinite;
}
@keyframes floatpulse{
0%{ transform:scale(1); opacity:.55 }
75%{ transform:scale(1.45); opacity:0 }
100%{ opacity:0 }
}
.float-wapp{
background:linear-gradient(150deg, #2fe07a, #128c4a);
color:#06210f;
box-shadow:0 14px 34px -8px rgba(37,211,102,.55), 0 4px 14px rgba(0,0,0,.45);
}
/* OJO con el color: sin declararlo, esto heredaba el del botón (#06210f, el
verde casi negro que pinta el ícono vía currentColor) y quedaba texto negro
sobre pastilla navy — ilegible.
El botón es fixed y pasa por delante de secciones oscuras y de la sección
clara del formulario, así que la pastilla tiene que separarse de las dos:
fondo casi negro para que contraste con el beige, y borde claro + sombra
para que no se funda con el navy. */
.float-tag{
position:absolute; right:70px; top:50%;
background:rgba(6,11,20,.94);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
color:var(--ink);
border:1px solid rgba(230,238,245,.22);
box-shadow:0 10px 28px rgba(0,0,0,.5);
padding:8px 14px; border-radius:999px; white-space:nowrap;
font-family:var(--mono); font-size:12px; opacity:0; pointer-events:none;
transition:.25s; transform:translate(8px,-50%);
}
.float-btn:hover .float-tag{ opacity:1; transform:translate(0,-50%) }
/* === HERO AI (diseño importado de Claude Design — "AI Input Hero") === */
@keyframes chatpop{ from{ transform:scale(.9) translateY(20px); opacity:0 } }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.4; transform:scale(.7) } }
@keyframes blinkCursor{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@keyframes fadeSlideUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }
@keyframes floatBlob{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(30px,-20px) } }
@keyframes bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-4px); opacity:1 } }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(10px); pointer-events:none; z-index:0 }
.hero-blob-1{ top:-160px; left:-120px; width:520px; height:520px; background:radial-gradient(circle, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 70%); animation:floatBlob 14s ease-in-out infinite }
.hero-blob-2{ top:20%; right:-140px; width:560px; height:560px; background:radial-gradient(circle, color-mix(in oklab, var(--accent-cool) 10%, transparent) 0%, transparent 70%); animation:floatBlob 18s ease-in-out infinite reverse }
#hero-particles{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9; z-index:1 }
.hero-ai-hero{
max-width:720px; display:flex; flex-direction:column; align-items:center; text-align:center;
font-family:'Space Grotesk', var(--sans); padding-bottom:24px;
}
.hero-ai-badge{
display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
border:1px solid rgba(230,238,245,.18); border-radius:100px;
/* vidrio oscuro con blur — antes era un tinte casi blanco al 3%, ilegible
sobre la foto. Ahora es un panel oscuro translúcido de verdad. */
background:rgba(6,11,20,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
margin-bottom:24px; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
text-transform:uppercase; color:rgba(230,238,245,.9);
text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.hero-ai-badge .dot{
width:6px; height:6px; border-radius:50%; background:var(--celeste);
box-shadow:0 0 8px var(--celeste); animation:pulseDot 1.8s ease-in-out infinite;
}
.hero-ai-badge .accent-text{ color:var(--celeste) }
.hero-ai-headline{
margin:0 0 4cm; font-size:clamp(34px,5.2vw,54px); line-height:1.08; font-weight:500;
color:var(--ink); letter-spacing:-.01em;
}
.hero-ai-headline .hl{
font-family:var(--serif); font-style:italic; font-weight:400; color:#1D3557;
background:color-mix(in oklab, #1D3557 22%, var(--ink) 78%); padding:0 8px; border-radius:6px;
}/* Pills movidas adentro de la tarjeta del chat (antes flotaban arriba como
bloque aparte) — ahora son la fila superior del widget, separadas de los
mensajes por un borde sutil, para que se lea como una sola pieza. */
.hero-ai-pills-wrap{ position:relative; padding:14px 16px 12px; border-bottom:1px solid var(--line) }
.hero-ai-pills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start }
.ai-pill{
font-family:var(--mono); font-size:12px; letter-spacing:.02em; padding:9px 16px;
border-radius:100px; cursor:pointer; transition:.18s ease;
background:rgba(230,238,245,.05); border:1px solid rgba(230,238,245,.16); color:rgba(230,238,245,.82);
}
.ai-pill:hover:not(.active){ border-color:rgba(230,238,245,.4); color:var(--ink) }
.ai-pill.active{
background:color-mix(in oklab, var(--accent) 14%, transparent); border-color:var(--accent); color:var(--accent);
}
.hero-ai{
width:100%; background:rgba(244,243,238,.035);
backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
border:1px solid rgba(244,243,238,.1); border-radius:20px;
box-shadow:0 0 0 1px rgba(244,243,238,.02), 0 30px 60px -20px rgba(0,0,0,.6);
overflow:hidden; text-align:left; transition:box-shadow .3s ease, border-color .3s ease;
}
.hero-ai:focus-within{
border-color:var(--accent);
box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent), 0 30px 60px -20px rgba(0,0,0,.6);
}
.hero-ai-body{
display:flex; flex-direction:column; gap:16px;
max-height:190px; overflow-y:auto; scroll-behavior:smooth;
padding:20px 18px; transition:padding .35s ease;
}
.hero-ai-body.has-messages{ max-height:440px; padding:20px 18px }
.hero-ai-body::-webkit-scrollbar{ width:4px }
.hero-ai-body::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px }
.hero-ai-body::-webkit-scrollbar-button{ display:none; width:0; height:0 }
.hero-ai-body::-webkit-scrollbar-track{ background:transparent }
.msg-row{ display:flex; gap:10px; align-items:flex-start; animation:fadeSlideUp .35s ease }
.msg-row.user{ justify-content:flex-end }
/* === EL GUÍA (mascota) ===
Los PNG de assets/guia/ tienen canal alfa REAL (se calculó a partir de la
luminancia del render original y se des-premultiplicó el color), así que se
componen normal y funcionan sobre cualquier fondo.
NO usar mix-blend-mode acá: la tarjeta del chat tiene backdrop-filter, y esa
combinación la renderizan mal varios navegadores (el personaje desaparecía). */
/* Ahora es un real (ver comentario en el JS): la ruta vive en el HTML,
relativa a la página, y no depende de dónde esté este archivo .css. */
.avatar{
width:44px; height:auto; flex:none; display:block;
object-fit:contain; object-position:center bottom;
filter:drop-shadow(0 0 8px rgba(212,175,55,.28));
animation:guiaFloat 5s ease-in-out infinite;
transition:filter .3s ease;
}
/* "pensando" respira un poco más rápido mientras la IA genera la respuesta */
.avatar[data-expr="pensando"]{ animation-duration:2.6s }
/* celebra: un destello dorado breve al confirmar una acción */
.avatar.celebra{ animation:guiaFloat 5s ease-in-out infinite, guiaCelebra 1.1s ease-out }
@keyframes guiaFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
@keyframes guiaCelebra{
0%{ filter:drop-shadow(0 0 8px rgba(212,175,55,.28)) }
35%{ filter:brightness(1.5) drop-shadow(0 0 18px rgba(212,175,55,.95)) }
100%{ filter:drop-shadow(0 0 8px rgba(212,175,55,.28)) }
}
@media (prefers-reduced-motion: reduce){
.avatar, .avatar.celebra{ animation:none }
}
/* === EL GUÍA FLOTANTE (hero) ===
Personaje de cuerpo entero que acompaña la conversación. Vive absoluto
dentro de .hero, a la derecha de la tarjeta del chat.
Estructura en 3 capas para que las animaciones no se pisen entre sí:
.guia-hero -> posición + entrada ("aparece") + salida ("despide")
.guia-hero-follow -> parallax hacia el mouse (lo mueve JS)
.guia-hero img -> flotación idle continua
Si se mezclaran en un solo transform, cada animación pisaría a la otra. */
.guia-hero{
position:absolute; z-index:2; pointer-events:none;
right:clamp(16px, 5vw, 90px);
top:50%; translate:0 -46%;
width:clamp(130px, 15vw, 210px);
opacity:0; /* lo revela el estado .aparece */
transition:opacity .9s ease, filter .5s ease;
}
.guia-hero.aparece{ opacity:1; animation:guiaAparece 1.2s cubic-bezier(.2,.8,.2,1) both }
.guia-hero.despide{ opacity:0 } /* al scrollear fuera del hero */
.guia-hero-follow{ display:block; position:relative; transition:transform .6s cubic-bezier(.2,.8,.2,1) }
/* --- aura dorada: respira siempre, se enciende al pasar el mouse --- */
.guia-hero-aura{
position:absolute; inset:-34% -38%; border-radius:50%; z-index:0; pointer-events:none;
background:radial-gradient(circle, rgba(212,175,55,.30) 0%, rgba(212,175,55,.10) 42%, transparent 70%);
animation:auraLatido 5s ease-in-out infinite;
transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
/* --- partículas orbitando (las coloca el JS) --- */
.guia-hero-sparks{ position:absolute; inset:-26% -32%; z-index:1; pointer-events:none }
.guia-hero-sparks i{
position:absolute; border-radius:50%; background:var(--accent);
box-shadow:0 0 7px rgba(212,175,55,.95);
animation:sparkTwinkle var(--dur,2.6s) ease-in-out var(--delay,0s) infinite;
transition:box-shadow .4s ease;
}
/* --- anillo que se expande una vez al entrar el mouse --- */
.guia-hero-ring{
position:absolute; left:50%; top:52%; width:62%; aspect-ratio:1; z-index:0;
translate:-50% -50%; border-radius:50%; pointer-events:none;
border:1px solid rgba(212,175,55,.55); opacity:0;
}
.guia-hero.hover .guia-hero-ring{ animation:guiaAnillo .95s cubic-bezier(.2,.8,.2,1) }
.guia-hero img{
width:100%; height:auto; display:block; position:relative; z-index:2;
pointer-events:auto; cursor:pointer; /* el click enfoca el chat */
filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(212,175,55,.22));
animation:guiaFlotaHero 6s ease-in-out infinite;
transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
/* --- estado hover: se acerca, brilla y las chispas se aceleran --- */
/* glow contenido: antes lo lavaba el brillo. Se nota que reacciona, pero sin
comerse el personaje ni el fondo. */
.guia-hero.hover img{
transform:scale(1.055) rotate(-1.2deg);
filter:drop-shadow(0 22px 46px rgba(0,0,0,.58)) drop-shadow(0 0 26px rgba(212,175,55,.42)) brightness(1.03);
}
.guia-hero.hover .guia-hero-aura{ opacity:.85; transform:scale(1.1); animation-duration:2.6s }
.guia-hero.hover .guia-hero-sparks i{
animation-duration:1.4s; box-shadow:0 0 9px rgba(232,199,102,.9);
}
@keyframes auraLatido{
0%,100%{ opacity:.55; transform:scale(.94) }
50%{ opacity:.9; transform:scale(1.04) }
}
@keyframes guiaAnillo{
0%{ opacity:0; transform:scale(.55) }
35%{ opacity:.75 }
100%{ opacity:0; transform:scale(1.5) }
}
/* "pensando": respira más rápido y el halo dorado late mientras la IA responde */
.guia-hero.pensando img{ animation:guiaFlotaHero 2.8s ease-in-out infinite, guiaHalo 1.6s ease-in-out infinite }
/* "celebra": destello dorado + pequeño impulso hacia arriba */
.guia-hero.celebra img{ animation:guiaFlotaHero 6s ease-in-out infinite, guiaCelebraHero 1.4s ease-out }
@keyframes guiaAparece{
from{ opacity:0; transform:translateY(26px) scale(.94) }
to{ opacity:1; transform:translateY(0) scale(1) }
}
@keyframes guiaFlotaHero{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
/* Versión mínima para prefers-reduced-motion: 4px en vez de 14 y más lenta.
La preferencia se llama "reduced", no "none": un balanceo lento y de pocos
píxeles no es lo que marea (eso es el parallax y el scroll secuestrado), y
sin nada de movimiento el personaje parece una imagen pegada. */
@keyframes guiaFlotaSuave{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }
@keyframes guiaHalo{
0%,100%{ filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(212,175,55,.22)) }
50%{ filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 40px rgba(212,175,55,.65)) }
}
@keyframes guiaCelebraHero{
0%{ filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(212,175,55,.22)) }
30%{ filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 55px rgba(212,175,55,1)) brightness(1.25) }
100%{ filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(212,175,55,.22)) }
}
/* Se oculta por debajo de 1280px. Verificado con la geometría real: la
tarjeta del chat mide 720px centrada, así que su borde derecho es
(vw/2 + 360); el personaje arranca en (vw - right - width). Por debajo de
~1280px esos dos valores se cruzan y el personaje se monta sobre el chat. */
@media (max-width:1280px){ .guia-hero{ display:none } }
@media (prefers-reduced-motion: reduce){
.guia-hero.aparece{ animation:none }
/* El flotado idle se conserva en versión mínima; lo que sí se apaga es
"pensando" y "celebra", que son movimientos con carácter y más amplitud. */
.guia-hero img{ animation:guiaFlotaSuave 9s ease-in-out infinite }
.guia-hero.pensando img, .guia-hero.celebra img{ animation:none }
.guia-hero-follow{ transition:none }
.guia-hero-aura, .guia-hero.hover .guia-hero-ring{ animation:none }
/* las chispas del hero quedan quietas pero visibles, no desaparecen */
.guia-hero-sparks i{ animation:none; opacity:.85 }
.guia-hero.hover img{ transform:none }
}
.msg{ max-width:85%; padding:11px 14px; font-size:14.5px; line-height:1.55; word-wrap:break-word }
.msg.bot{
background:rgba(244,243,238,.05); border:1px solid rgba(244,243,238,.07); color:rgba(244,243,238,.92);
border-radius:4px 14px 14px 14px;
}
.msg.user{
background:color-mix(in oklab, var(--accent) 12%, rgba(244,243,238,.05));
border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
color:var(--ink); border-radius:14px 4px 14px 14px;
}
.msg.typing{ display:flex; gap:4px; padding:13px 16px }
.msg.typing span{
width:6px; height:6px; border-radius:50%; background:rgba(244,243,238,.6);
animation:bounce 1.2s infinite;
}
.msg.typing span:nth-child(2){ animation-delay:.15s }
.msg.typing span:nth-child(3){ animation-delay:.3s }
.hero-ai-input{
display:flex; align-items:center; gap:8px; padding:8px 10px 8px 16px;
border-top:1px solid rgba(244,243,238,.08);
}
.hero-ai-input-wrap{ flex:1; position:relative; min-height:20px }
.hero-ai-typewriter{
position:absolute; inset:0; display:flex; align-items:center;
font-family:'Space Grotesk', var(--sans); font-size:14px; color:rgba(244,243,238,.35);
pointer-events:none; white-space:nowrap; overflow:hidden;
}
.hero-ai-typewriter.hide{ display:none }
.hero-ai-typewriter .cursor{ animation:blinkCursor 1s step-end infinite; color:var(--accent); margin-left:1px }
.hero-ai-input textarea{
width:100%; resize:none; border:0; outline:0; background:transparent; color:var(--ink);
font-family:'Space Grotesk', var(--sans); font-size:14px; line-height:1.3;
min-height:0; height:20px; max-height:110px; padding:2px 0;
overflow-y:auto; scrollbar-width:thin;
}
.hero-ai-input textarea::-webkit-scrollbar{ width:0; height:0 }
.hero-ai-input textarea::-webkit-scrollbar-button{ display:none; width:0; height:0 }
.chat-send{
flex:none; width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
background:rgba(244,243,238,.15); color:var(--bg);
display:flex; align-items:center; justify-content:center;
transition:transform .15s ease, opacity .15s ease, background .15s ease;
opacity:.6;
}
.chat-send.ready{ background:var(--accent); opacity:1 }
.chat-send:disabled{ cursor:not-allowed }.hero-ai-contact-toggle{
margin-top:16px; font-family:var(--mono); font-size:12px; color:rgba(244,243,238,.55);
text-decoration:underline; text-underline-offset:3px; cursor:pointer; transition:.2s; background:none; border:0;
}
.hero-ai-contact-toggle:hover{ color:var(--accent) }
.hero-ai-contact-form{
margin-top:16px; width:100%; max-width:400px; display:flex; flex-direction:column; gap:8px;
}
.hero-ai-contact-form[hidden]{ display:none }
.hero-ai-contact-form input{
width:100%; background:rgba(244,243,238,.03); border:1px solid rgba(244,243,238,.12);
border-radius:10px; padding:10px 12px; color:var(--ink); font-family:var(--sans); font-size:14px;
}
.hero-ai-contact-form input::placeholder{ color:var(--ink-faint) }
.hero-ai-contact-form input:focus{ outline:0; border-color:var(--accent) }
.hero-ai-contact-form button{
font-family:var(--mono); font-size:12.5px; font-weight:600; padding:10px; border-radius:999px;
background:var(--accent); color:#000; transition:.2s; cursor:pointer;
}
.hero-ai-contact-form button:hover{ background:#fff }
.hero-ai-contact-form button:disabled{ opacity:.5; cursor:not-allowed }
.hero-ai-contact-success{
margin-top:16px; font-family:var(--mono); font-size:12.5px; color:var(--accent);
}
.hero-actions{ margin-top:32px; justify-content:center }
/* responsive */
@media (max-width:900px){
.brand img{ height:34px }
.menu-toggle{ width:40px; height:40px }
.site-menu{ padding:96px 28px 32px }
.meta-row{ top:70px; padding:0 20px }
.hero-stats-marquee{ padding:16px 20px 0 }
.hero-stats-marquee .marquee-item{ font-size:11.5px }
.services-grid{ grid-template-columns:1fr }
.service{ grid-column:span 1 !important; min-height:340px }
.work{ padding:80px 20px 64px; margin-top:-56px; border-radius:24px 24px 0 0 }
.portfolio-grid{ grid-template-columns:1fr }
.process-grid{ grid-template-columns:1fr 1fr; gap:32px }
.step::before{ display:none }
@media (max-width:600px){
.process-grid{ grid-template-columns:1fr; gap:0; margin-top:32px }
.step{ display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-top:1px solid var(--line) }
.step:first-child{ border-top:0; padding-top:0 }
.step .step-num{ font-size:26px; line-height:1.3; margin-bottom:0; flex-shrink:0; width:32px }
.step h4{ font-size:15.5px; margin-bottom:4px }
.step p{ font-size:12.5px; line-height:1.45 }
/* sección 05 "Hablemos": menos aire entre bloques, checklist e info de
contacto más compactas para que no se sienta como una pared de texto
antes del formulario. */
.form-info .section-h{ font-size:28px }
.form-info ul{ margin-top:20px }
.form-info li{ padding:12px 0; font-size:12px; gap:12px }
.form-info .contact-line{ margin-top:24px; font-size:12px; line-height:1.6 }
}
.form-wrap{ grid-template-columns:1fr; gap:60px }
.form-row.split{ grid-template-columns:1fr }
.footer-meta{ grid-template-columns:1fr 1fr; gap:32px }
section, .form-section, .services{ padding:80px 20px }
.hero{ padding:120px 20px 60px }
nav.top{ padding:10px 20px }
/* alto relativo al viewport (no un número fijo chico) para que en
teléfonos reales la conversación tenga aire de verdad, con un tope
razonable para no comerse toda la pantalla. */
.hero-ai-body.has-messages{ max-height:min(50dvh, 440px) }
.hero-ai-headline{ margin-bottom:4cm }
/* pills en una sola fila con scroll horizontal — en mobile, 4 pills
envueltas en 2 filas empujaban demasiado contenido hacia abajo.
El fade es un div propio (no mask-image): más fácil de garantizar que
se vea de verdad en un teléfono real, en vez de confiar en que el
navegador soporte/renderice bien un mask sutil. */
.hero-ai-pills-wrap{ position:relative; width:100%; padding:12px 14px 10px }
.hero-ai-pills{
width:100%; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
padding-bottom:2px;
scrollbar-width:none; /* Firefox / estándar — antes solo se ocultaba en WebKit */
-ms-overflow-style:none; /* viejos Edge/IE, por las dudas */
}
.hero-ai-pills::-webkit-scrollbar{ display:none }
.ai-pill{ flex:none; scroll-snap-align:start; font-size:11.5px; padding:8px 14px; white-space:nowrap }
.hero-ai-pills-fade{
position:absolute; top:0; right:0; bottom:2px; width:48px;
background:linear-gradient(to right, transparent, var(--bg-2) 75%);
pointer-events:none;
}
.floaters{ bottom:14px; right:14px }
}
@media (max-width:600px){
/* El hero se mantiene a pantalla completa (100dvh). Pedido explícito del
usuario viendo la web real en su teléfono: el ticker va pegado al borde
inferior de la vista, los botones más abajo (no pegados al subtítulo),
y solo 2 botones (se saca "Hablar con nuestra IA", ya está el flotante). */
/* título más arriba, buscando que quede centrado verticalmente entre la franja
"Buenos Aires..." (arriba) y el subtítulo (abajo): el padding-top del hero
bajó de 150 a 128px (la franja termina ~92px, título arranca ~128px → 36px
de aire arriba) y el margen del título se subió a 36px (mismo aire abajo,
hacia el subtítulo) — mismo espacio de los dos lados. */
.hero{ justify-content:flex-start; padding:128px 20px 40px }/* punto verde + frase pegados a la izquierda, todo en una sola línea —
antes estaba separado a los extremos (space-between) y la frase se
cortaba en 2 líneas por quedar comprimida en un 56% de ancho. */
.meta-row{ justify-content:flex-start; align-items:center; gap:9px; font-size:8.5px; letter-spacing:.05em }
.meta-row > span:last-child{ white-space:nowrap; text-align:left; max-width:none }/* botones fuera de .hero-ai-hero ahora — margin-top:auto los ancla (a
ellos y al ticker que los sigue) al fondo real de .hero, igual que en
el hero anterior. */
.hero-actions{ gap:14px; margin-top:auto; margin-bottom:0; justify-content:center }
/* target táctil mínimo de 44px recomendado para el botón principal de envío
(en desktop, con mouse, 30px es preciso y no hace falta agrandarlo). */
.hero-ai-input{ padding:6px 8px 6px 16px }
.chat-send{ width:44px; height:44px }
/* el ticker va con su propio margin-top fijo (no auto) — vive fuera de
.hero-ai-hero, como último item en flujo del .hero. */
.hero-stats-marquee{
position:static; left:auto; right:auto; bottom:auto;
margin-left:auto; margin-right:auto; margin-top:28px;
padding:16px 20px 0;
}
/* === SECCIÓN 02 "QUÉ HACEMOS" — cabe en 1 vista mobile, sin quedar vacía ===
Primer intento la dejó ocupando solo ~50% de la pantalla (demasiado
resumida, solo etiquetas sueltas). Se le devolvió aire: una descripción
corta propia por card (`.service-brief`, texto nuevo, no el párrafo largo
de desktop) más un poco más de tamaño/padding en todo — sigue en grilla
2x2 y sigue ocultando el h3 poético/párrafo largo/tags (eso sí se queda
para desktop), pero ahora usa bien el espacio disponible. */
.services{ padding:56px 20px 48px }
.services .eyebrow{ margin-bottom:12px }
.services .section-h{ font-size:30px; margin-bottom:10px; max-width:none }
.services .section-lead{ font-size:15px; line-height:1.45 }
.services-grid{
grid-template-columns:repeat(2,1fr); margin-top:28px;
}
.service{
grid-column:span 1 !important; min-height:0 !important;
padding:20px 18px; align-items:flex-start;
}
.service .num{
margin-bottom:12px; font-size:10.5px; color:var(--accent);
}
.service .pill-mini{
display:block; width:fit-content; margin-left:0; margin-top:6px; font-size:8px; padding:2px 6px;
}
.service .ico{
width:38px; height:38px; margin-bottom:14px; border-radius:9px;
}
/* el ícono va arriba a la derecha, a la altura de la etiqueta ("— 01 / WEB"),
en vez de apilado debajo — posicionado absoluto porque en el HTML está
anidado un nivel más adentro que .num, no son hermanos directos. */
.service{ padding-top:20px; padding-right:52px }
.service .num{ padding-right:0 }
.service .ico{
position:absolute; top:18px; right:18px; margin-bottom:0;
width:34px; height:34px; border-radius:9px;
}
.service .ico svg{ width:17px; height:17px }
/* Bug encontrado: "`.service p`" (para ocultar el párrafo largo) tiene MÁS
especificidad que "`.service-brief`" sola (clase+tag vs. una sola clase),
así que le ganaba y ocultaba también la descripción corta aunque viniera
después en el archivo. Se excluye acá con :not() para que no choquen. */
.service h3, .service p:not(.service-brief), .service .tags{ display:none }
.service-brief{
display:block; font-size:12.5px; line-height:1.4; color:var(--ink-dim); font-weight:300;
}
}
/* ══ Formulario "1b": ficha centrada, tres pasos numerados ══════════════════
Reemplaza el layout de dos columnas de #contacto. Los colores (fondo beige,
tarjeta blanca, inputs, chips, botón) los sigue poniendo `.form-section.light`;
acá va sólo la composición. */
.fx-wrap{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center }
/* El Guía de fondo, como marca de agua. Se reusa guia-hero.png, que ya está
deployado, en vez de sumar el fe-mainchar.png del handoff (160 KB más). */
.fx-guia{
position:absolute; right:0; bottom:-40px; width:300px; height:auto;
opacity:.14; z-index:0; pointer-events:none; user-select:none;
}
.fx-head{ text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1 }
/* El .section-h global trae max-width:14ch y clamp(36px,5.5vw,84px). Centrado
necesita más aire, y el mínimo de 36px deja el título chico en mobile: el
diseño lo quiere en 42px. La regla que antes le daba el tamaño acá
(.form-info .section-h) ya no aplica, así que se define explícito. */
.fx-title{
max-width:20ch; text-align:center; margin-bottom:0;
font-size:clamp(42px, 6vw, 82px); line-height:.94; letter-spacing:-.045em;
}
.fx-lead{
margin-top:22px; font-family:var(--mono); font-size:13px;
color:#4a4843; letter-spacing:.03em;
}
/* La tarjeta blanca. Hereda de form.intake el fondo y el borde en modo claro,
pero el selector tiene que ser `form.intake.fx-panel`: `form.intake` (0,1,1)
le gana a `.fx-panel` (0,1,0) y se quedaba con su radius de 24px y su
padding de 40px en vez de los 28/48-52 del diseño. */
form.intake.fx-panel{
position:relative; z-index:1;
margin-top:52px; width:100%; max-width:660px;
border-radius:28px; padding:48px 52px;
backdrop-filter:none; /* la tarjeta es opaca: el blur no aporta y cuesta */
}
.fx-steps{ display:flex; flex-direction:column; gap:38px }
.fx-step{ display:flex; gap:20px; align-items:flex-start }
.fx-num{
font-family:var(--mono); font-size:12px; font-weight:700;
color:var(--accent); padding-top:3px; flex:none;
}
.fx-field{ flex:1; min-width:0 } /* min-width:0 o el textarea desborda el flex */
.fx-field label{ margin-bottom:12px }
.fx-opt{ text-transform:none; letter-spacing:0; opacity:.6 }
/* En el prototipo el textarea era min-height:78px con font-size:24px: entraban
dos líneas y tiene resize:none. Con el placeholder real se queda corto. */
.fx-panel #fx-msg{
min-height:104px; font-size:clamp(19px, 2.2vw, 24px);
font-weight:300; line-height:1.3; letter-spacing:-.02em; padding:2px 0 14px;
}
.fx-uno{ margin-bottom:24px }
.fx-dos{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.fx-dos > *{ min-width:0 }
.fx-send .form-submit{ margin-top:0; border-radius:999px; padding:20px }
.fx-urge{
margin-top:18px; display:flex; align-items:center; justify-content:center; gap:12px;
font-family:var(--mono); font-size:11px; color:#a0a0a0; flex-wrap:wrap;
}
.fx-urge a{
display:inline-flex; align-items:center; gap:7px; color:#0a0a0a;
border-bottom:1px solid rgba(0,0,0,.3); padding-bottom:1px;
}
/* Estado de éxito: el Guía festejando en vez del tilde genérico. */
/* guia-hero es 300x513 (más alto que ancho, ratio 0.58), no cuadrado como los
assets de expresión: se dimensiona por ancho chico para que no quede enorme. */
.fx-success img{
width:92px; height:auto; margin:0 auto 22px; display:block;
animation:pop .5s cubic-bezier(.2,.8,.2,1);
filter:drop-shadow(0 10px 20px rgba(0,0,0,.14));
}
.fx-success h4{ font-family:var(--serif); font-size:36px; font-weight:400; margin-bottom:12px }
.fx-success p{ font-size:15px; line-height:1.6; max-width:36ch; margin:0 auto }
.fx-wa-btn{
margin-top:26px; display:inline-flex; align-items:center; gap:8px;
background:#22c55e; color:#000; padding:11px 17px; border-radius:999px;
font-family:var(--mono); font-size:12px; font-weight:500;
}
/* Se apaga el movimiento, no el personaje: sigue visible, quieto. */
@media (prefers-reduced-motion: reduce){
.fx-guia, .fx-success img{ animation:none }
}
@media (max-width: 760px){
form.intake.fx-panel{ margin-top:28px; padding:26px 22px; border-radius:22px }
.fx-steps{ gap:28px }
.fx-step{ gap:0; flex-direction:column }
/* En mobile el número va en línea con la etiqueta, no en una columna aparte. */
.fx-num{ padding-top:0; margin-bottom:10px }
.fx-dos{ grid-template-columns:1fr; gap:18px }
/* En mobile la tarjeta ocupa casi todo el ancho, así que una marca de agua
detrás no se ve (estaba al 10% y era invisible). Acá el Guía sale del
fondo y pasa a ser un personaje: entra en el flujo, arriba del título,
centrado y flotando. En flujo y no absoluto a propósito — posicionado
encima del texto se pisaba con el título en pantallas angostas.
Reusa guiaFlotaHero, la misma flotación del Guía del hero. */
.fx-guia{
position:static; width:112px; opacity:1;
margin:0 auto 22px; align-self:center;
animation:guiaFlotaHero 6s ease-in-out infinite;
/* el personaje es crema sobre fondo beige: sin sombra se empasta */
filter:drop-shadow(0 12px 24px rgba(0,0,0,.20)) drop-shadow(0 0 18px rgba(212,175,55,.28));
}
.fx-lead{ margin-top:14px; font-size:11.5px }
}
/* ===== Puente a WhatsApp dentro del chat del hero =====
Por que existe: entre el 19/07 y el 09/09 hubo 25 conversaciones en el chat
y ninguna dejo mail ni WhatsApp. El caso testigo es del 04/09: alguien pidio
un sistema de gestion para un restaurant, dio su nombre y se fue exactamente
en el turno siguiente, que fue el que le pidio el dato de contacto.
Escribir tu telefono en el chat de un sitio que no conoces es un pedido de
confianza; tocar un boton de WhatsApp no lo es. Esto NO reemplaza el pedido
del agente: lo acompana. */
.chat-handoff{ margin-top:2px }
.chat-handoff-card{
border:1px solid rgba(212,175,55,.38);
background:rgba(212,175,55,.07);
border-radius:12px;
padding:12px 14px;
max-width:88%;
}
.chat-handoff-text{
margin:0 0 10px 0;
font-size:13.5px;
line-height:1.5;
color:var(--ink-dim,#9FB3C8);
}
.chat-handoff-btn{
display:inline-flex; align-items:center; gap:8px;
padding:9px 15px; border-radius:999px;
background:#25D366; color:#0B1320;
font-size:13.5px; font-weight:600; text-decoration:none;
transition:transform .15s ease, filter .15s ease;
}
.chat-handoff-btn:hover{ transform:translateY(-1px); filter:brightness(1.06) }
@media (prefers-reduced-motion:reduce){
.chat-handoff-btn{ transition:none }
.chat-handoff-btn:hover{ transform:none }
}