/* =============================================================================
CreaX · hoja de estilos de la web
Tema claro bloqueado: fondo hueso, tinta grafito y menta como único acento.
Materiales: tarjetas blancas con sombra en capas, bordes de 1px, brillo que
barre al pasar el cursor y micro rebotes en cada elemento que se puede tocar.
========================================================================== */
/* ---------- tipografías propias, sin depender de Google en producción ------ */
@font-face { font-family: "Space Grotesk"; src: url("assets/fuentes/SpaceGrotesk-700.woff2") format("woff2");
font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fuentes/SpaceGrotesk-500.woff2") format("woff2");
font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fuentes/Inter-400.woff2") format("woff2");
font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fuentes/Inter-500.woff2") format("woff2");
font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("assets/fuentes/Inter-600.woff2") format("woff2");
font-weight: 600; font-display: swap; }
:root {
/* color */
--hueso: #f5f4f2;
--hueso-2: #efeeeb;
--blanco: #ffffff;
--tinta: #12171c;
--tinta-media: #4a545f;
--tinta-suave: #6f7883;
--menta: #16d6a4;
--menta-texto: #07795e;
--menta-oscura: #0b8f6e;
--menta-tenue: rgba(22, 214, 164, 0.14);
--borde: rgba(18, 23, 28, 0.1);
--borde-fuerte: rgba(18, 23, 28, 0.16);
/* forma */
--radio-xl: 26px;
--radio: 18px;
--radio-chico: 12px;
--ancho: 1180px;
--paso: clamp(66px, 6.6vw, 104px);
/* profundidad */
--sombra-1: 0 1px 2px rgba(18, 23, 28, 0.04), 0 6px 18px -6px rgba(18, 23, 28, 0.14);
--sombra-2: 0 1px 2px rgba(18, 23, 28, 0.05), 0 16px 34px -12px rgba(18, 23, 28, 0.24);
--sombra-3: 0 2px 4px rgba(18, 23, 28, 0.05), 0 30px 60px -18px rgba(18, 23, 28, 0.3);
/* movimiento */
--salida: cubic-bezier(0.16, 1, 0.3, 1);
--rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; }
body {
background: var(--hueso);
color: var(--tinta);
font-family: Inter, "Segoe UI", system-ui, sans-serif;
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
position: relative;
}
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; letter-spacing: -0.028em; }
h2 { font-size: clamp(32px, 4.3vw, 50px); line-height: 1.04; margin-bottom: 16px; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.014em; }
p { color: var(--tinta-media); }
a { color: inherit; text-decoration: none; }
strong { color: var(--tinta); font-weight: 600; }
::selection { background: var(--menta); color: #06231b; }
:focus-visible { outline: 2px solid var(--menta-oscura); outline-offset: 3px; border-radius: 10px; }
.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; position: relative; z-index: 2; }
section { padding: var(--paso) 0; position: relative; }
.entrada { font-size: 17.5px; max-width: 58ch; color: var(--tinta-media); }
.acento { color: var(--menta-texto); }
/* ---------- material de fondo: retícula y grano ---------- */
.reticula {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image: linear-gradient(rgba(18, 23, 28, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(18, 23, 28, 0.045) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 10%, transparent 68%);
-webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 10%, transparent 68%);
}
.grano {
position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.032;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}
.avance {
position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left;
background: linear-gradient(90deg, var(--menta-oscura), var(--menta)); z-index: 70;
}
/* La barra de avance se mueve con el scroll sin una sola línea de JavaScript. */
@supports (animation-timeline: scroll()) {
.avance { animation: avanzar linear both; animation-timeline: scroll(root block); }
@keyframes avanzar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
/* ---------- brillo que barre (se usa en botones y tarjetas) ---------- */
.brillo { position: relative; overflow: hidden; }
.brillo::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(100deg, transparent 22%, rgba(255, 255, 255, 0.55), transparent 78%);
transform: translateX(-130%); transition: transform 0.75s var(--salida);
}
.brillo:hover::after { transform: translateX(130%); }
/* ---------- barra flotante ---------- */
.nav {
position: fixed; inset-inline: 0; top: 14px; z-index: 100; pointer-events: none;
padding: 0 14px;
}
.nav-caja {
pointer-events: auto; max-width: var(--ancho); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 9px 9px 9px 16px; border-radius: 999px;
background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(18, 23, 28, 0.08);
box-shadow: var(--sombra-1); backdrop-filter: blur(14px) saturate(160%);
transition: box-shadow 0.45s var(--salida), background-color 0.45s var(--salida), transform 0.45s var(--salida);
}
.nav.encogida .nav-caja { box-shadow: var(--sombra-2); background: rgba(255, 255, 255, 0.92); }
.nav .logo { height: 21px; width: auto; display: block; }
.nav-marca {
display: inline-flex; align-items: center; gap: 10px; transition: transform 0.5s var(--rebote);
}
.nav-marca:hover { transform: translateY(-1px); }
.nav-enlaces { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--tinta-media); }
.nav-enlaces a.enlace { position: relative; transition: color 0.25s ease; white-space: nowrap; }
.nav-enlaces a.enlace::after {
content: ""; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 100%;
background: var(--menta-oscura); border-radius: 2px;
transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--salida);
}
.nav-enlaces a.enlace:hover { color: var(--tinta); }
.nav-enlaces a.enlace:hover::after { transform: scaleX(1); transform-origin: left; }
/* ---------- botones ---------- */
.boton {
display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap;
padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer;
border: 1px solid transparent; font-family: inherit;
transition: transform 0.45s var(--rebote), box-shadow 0.45s var(--salida),
background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.boton-principal {
color: #052a20; background: var(--menta); box-shadow: 0 1px 2px rgba(18, 23, 28, 0.08), 0 12px 26px -10px rgba(11, 143, 110, 0.7);
}
.boton-principal:hover { background: #12c797; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(18, 23, 28, 0.08), 0 20px 38px -12px rgba(11, 143, 110, 0.75); }
.boton-secundario { color: var(--tinta); background: var(--blanco); border-color: var(--borde); box-shadow: var(--sombra-1); }
.boton-secundario:hover { transform: translateY(-2px); border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); }
.boton-oscuro { color: #f3f5f7; background: var(--tinta); box-shadow: var(--sombra-2); }
.boton-oscuro:hover { transform: translateY(-2px); background: #1b232c; }
.boton:active { transform: scale(0.975); }
.boton-chico { padding: 10px 18px; font-size: 14px; }
/* ---------- etiqueta de sección ---------- */
.marca-seccion {
display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
font-size: 13px; font-weight: 600; color: var(--menta-texto);
}
.marca-seccion::before {
content: ""; width: 26px; height: 1.5px; border-radius: 2px; background: var(--menta-oscura);
}
/* ---------- portada ---------- */
.portada { padding: clamp(120px, 15vh, 168px) 0 var(--paso); }
.portada-grilla { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
.portada h1 { font-size: clamp(40px, 4.6vw, 58px); line-height: 1.04; margin-bottom: 22px; }
.portada .entrada { font-size: clamp(17px, 1.5vw, 19.5px); max-width: 40ch; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.linea-palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; }
.pieza { display: inline-block; will-change: transform; }
.sello {
display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; margin-bottom: 24px;
border: 1px solid var(--borde); border-radius: 999px; font-size: 13.5px; color: var(--tinta-media);
background: rgba(255, 255, 255, 0.7); box-shadow: var(--sombra-1);
}
.sello b { color: var(--tinta); font-weight: 600; }
.sello-luz { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--menta-tenue); }
.sello-luz span { width: 8px; height: 8px; border-radius: 50%; background: var(--menta-oscura); }
/* ---------- escena del celular ---------- */
.escena { position: relative; justify-self: center; width: min(310px, 80vw); }
.celular-marco {
position: relative; border: 11px solid #0f1418; border-radius: 48px; overflow: hidden; background: #0f1418;
box-shadow: 0 40px 80px -24px rgba(18, 23, 28, 0.5), 0 0 0 1px rgba(18, 23, 28, 0.12);
}
.celular-marco::before {
content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
width: 86px; height: 22px; border-radius: 999px; background: #0f1418; z-index: 3;
}
.celular-marco img { display: block; width: 100%; height: auto; }
.celular-pie { margin-top: 18px; font-size: 13px; color: var(--tinta-suave); text-align: center; line-height: 1.55; }
.pastilla {
position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 15px; z-index: 4;
border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--tinta); white-space: nowrap;
background: rgba(255, 255, 255, 0.92); border: 1px solid var(--borde);
box-shadow: var(--sombra-2); backdrop-filter: blur(8px);
}
.pastilla i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--menta); }
.pastilla-1 { top: 13%; left: -20%; }
.pastilla-2 { top: 47%; right: -22%; }
.pastilla-3 { bottom: 13%; left: -16%; }
/* ---------- cinta de rubros ---------- */
.cinta {
overflow: hidden; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
padding: 18px 0; background: rgba(255, 255, 255, 0.5);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.cinta-pista { display: flex; gap: 38px; width: max-content; }
.cinta-pista span {
display: inline-flex; align-items: center; gap: 38px; font-family: "Space Grotesk", sans-serif;
font-size: clamp(17px, 2vw, 23px); font-weight: 500; color: var(--tinta-suave); white-space: nowrap;
}
.cinta-pista span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--menta); }
/* ---------- tarjetas ---------- */
.resultados, .bento, .socios, .muestra, .metodo-grilla { perspective: 1400px; }
.tarjeta {
position: relative; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
padding: 30px 28px; box-shadow: var(--sombra-1); overflow: hidden;
transition: transform 0.5s var(--salida), box-shadow 0.5s var(--salida), border-color 0.3s ease;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: var(--borde-fuerte); }
.tarjeta h3 { margin-bottom: 9px; }
.tarjeta p { font-size: 15.5px; }
.icono {
width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
background: var(--menta-tenue); border: 1px solid rgba(22, 214, 164, 0.24);
}
.icono svg { width: 22px; height: 22px; stroke: var(--menta-texto); fill: none; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round; }
/* ---------- resultados ---------- */
.resultados { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 46px; }
.resultado-num {
font-family: "Space Grotesk", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
color: var(--menta-texto); display: block; margin-bottom: 14px;
}
/* ---------- método ---------- */
.metodo-grilla { display: grid; grid-template-columns: 1fr; gap: 42px; align-items: start; }
.pasos { display: grid; gap: 14px; }
.paso {
display: grid; grid-template-columns: 54px 1fr; gap: 20px; align-items: start; padding: 22px;
border-radius: var(--radio); border: 1px solid transparent; background: transparent;
transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s var(--salida);
}
.paso.activo { border-color: var(--borde); background: var(--blanco); box-shadow: var(--sombra-1); }
.paso-numero {
width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
background: var(--blanco); border: 1px solid var(--borde); font-family: "Space Grotesk", sans-serif;
font-weight: 700; font-size: 18px; color: var(--tinta-suave); box-shadow: var(--sombra-1);
transition: color 0.4s ease, background-color 0.4s ease, transform 0.5s var(--rebote);
}
.paso.activo .paso-numero { color: #052a20; background: var(--menta); transform: scale(1.04); }
.paso h3 { margin-bottom: 6px; }
.paso p { font-size: 15.5px; }
/* ---------- flujo de automatización ---------- */
.flujo {
position: relative; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-xl);
padding: clamp(26px, 4vw, 42px); box-shadow: var(--sombra-2); overflow: hidden;
}
.flujo::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(90% 70% at 100% 0%, rgba(22, 214, 164, 0.12), transparent 62%);
}
.flujo-titulo { font-size: 13px; font-weight: 600; color: var(--tinta-suave); margin-bottom: 26px; }
.flujo-nodos { display: grid; grid-template-columns: 1fr; gap: 14px; position: relative; z-index: 1; }
.nodo {
display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 16px 18px;
border-radius: var(--radio-chico); border: 1px solid var(--borde); background: var(--hueso);
transition: transform 0.5s var(--salida), box-shadow 0.5s var(--salida), border-color 0.3s ease;
}
.nodo.viva { border-color: rgba(22, 214, 164, 0.45); box-shadow: 0 0 0 4px rgba(22, 214, 164, 0.1); }
.nodo-icono { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--blanco); border: 1px solid var(--borde); }
.nodo-icono svg { width: 20px; height: 20px; stroke: var(--menta-texto); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nodo b { display: block; font-size: 15px; font-weight: 600; }
.nodo span { font-size: 13.5px; color: var(--tinta-suave); }
.flujo-linea { display: grid; place-items: center; height: 22px; }
.flujo-linea svg { width: 22px; height: 22px; }
.flujo-linea path { stroke: var(--borde-fuerte); stroke-width: 2; fill: none; stroke-linecap: round; }
/* ---------- integraciones ---------- */
.integraciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 40px; }
.integracion {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
padding: 22px 12px; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--borde);
box-shadow: var(--sombra-1); transition: transform 0.5s var(--salida), box-shadow 0.5s var(--salida);
}
.integracion:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.integracion img { width: 26px; height: 26px; object-fit: contain; }
.integracion span { font-size: 12.5px; color: var(--tinta-suave); text-align: center; }
/* ---------- servicios ---------- */
.bento { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 46px; }
.tarjeta ul { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.tarjeta li { position: relative; padding-left: 24px; font-size: 15px; color: var(--tinta-media); }
.tarjeta li::before {
content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 2px; border-radius: 2px;
background: var(--menta-oscura);
}
.tarjeta-oscura {
background: var(--tinta); border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 4px rgba(18, 23, 28, 0.08), 0 30px 60px -20px rgba(18, 23, 28, 0.55);
}
.tarjeta-oscura h3 { color: var(--blanco); }
.tarjeta-oscura p { color: rgba(245, 246, 248, 0.7); }
.tarjeta-oscura li { color: rgba(245, 246, 248, 0.72); }
.tarjeta-oscura li::before { background: var(--menta); }
.tarjeta-oscura .icono { background: rgba(22, 214, 164, 0.16); border-color: rgba(22, 214, 164, 0.3); }
.tarjeta-oscura .icono svg { stroke: var(--menta); }
.nota { margin-top: 26px; font-size: 15px; color: var(--tinta-suave); }
/* ---------- muestra de bocetos ---------- */
.muestra { display: grid; grid-template-columns: 1fr; gap: 38px; align-items: center; }
.pestanas { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0 6px; }
.pestana {
padding: 10px 18px; border-radius: 999px; border: 1px solid var(--borde); font-size: 14.5px;
color: var(--tinta-media); cursor: pointer; background: var(--blanco); font-family: inherit;
box-shadow: var(--sombra-1);
transition: color 0.3s ease, background-color 0.3s ease, transform 0.45s var(--rebote), border-color 0.3s ease;
}
.pestana:hover { transform: translateY(-2px); color: var(--tinta); }
.pestana[aria-selected="true"] { color: #052a20; background: var(--menta); border-color: var(--menta); font-weight: 600; }
.muestra-lista { list-style: none; display: grid; gap: 11px; margin-top: 20px; }
.muestra-lista li { position: relative; padding-left: 26px; color: var(--tinta-media); font-size: 15.5px; }
.muestra-lista li::before {
content: ""; position: absolute; left: 0; top: 9px; width: 13px; height: 2px; border-radius: 2px; background: var(--menta-oscura);
}
/* ---------- socios ---------- */
.socios { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
.socio-inicial {
font-family: "Space Grotesk", sans-serif; font-size: 32px; font-weight: 700; line-height: 1;
color: var(--menta-texto); margin-bottom: 18px;
}
.socio h3 { font-size: 17px; margin-bottom: 3px; }
.socio p { font-size: 14px; }
/* ---------- cierre ---------- */
.cierre-caja {
position: relative; text-align: center; padding: clamp(42px, 6vw, 76px) 30px; border-radius: var(--radio-xl);
background: var(--tinta); overflow: hidden; box-shadow: var(--sombra-3);
}
.cierre-caja::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(80% 110% at 50% 0%, rgba(22, 214, 164, 0.22), transparent 62%);
}
.cierre-caja h2 { color: var(--blanco); max-width: 17ch; margin: 0 auto 16px; position: relative; }
.cierre-caja .entrada { color: rgba(245, 246, 248, 0.72); margin: 0 auto; position: relative; }
.cierre-caja .acciones { justify-content: center; position: relative; }
.cierre-datos { margin-top: 26px; font-size: 14.5px; color: rgba(245, 246, 248, 0.6); display: flex; gap: 14px; justify-content: center; position: relative; }
.cierre-datos a { transition: color 0.25s ease; }
.cierre-datos a:hover { color: var(--menta); }
footer { border-top: 1px solid var(--borde); padding: 52px 0 42px; position: relative; z-index: 2; }
footer .envoltura { display: block; }
footer svg { height: 19px; width: auto; }
footer p { font-size: 13.5px; color: var(--tinta-suave); }
/* ---------- entradas ---------- */
.con-js .revelar { opacity: 0; }
/* ---------- pantallas medianas y grandes ---------- */
@media (min-width: 760px) {
.portada-grilla { grid-template-columns: 1.05fr 0.95fr; gap: 46px; }
.resultados { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.metodo-grilla { grid-template-columns: 1fr 0.92fr; gap: 54px; }
.flujo-nodos { gap: 12px; }
.integraciones { grid-template-columns: repeat(5, 1fr); }
.bento { grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bento .tarjeta:nth-child(1) { grid-column: span 3; }
.bento .tarjeta:nth-child(2) { grid-column: span 3; }
.bento .tarjeta:nth-child(3) { grid-column: span 2; }
.bento .tarjeta:nth-child(4) { grid-column: span 4; }
.muestra { grid-template-columns: 1fr 0.78fr; gap: 52px; }
.socios { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
.socios { grid-template-columns: repeat(4, 1fr); }
.integraciones { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 759px) {
.nav-enlaces .enlace { display: none; }
.portada { padding-top: 104px; }
.portada .entrada { max-width: 100%; }
.pastilla-1 { left: -6%; } .pastilla-2 { right: -7%; } .pastilla-3 { left: -4%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.con-js .revelar { opacity: 1; }
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* =============================================================================
PORTADA OSCURA CON ESCENA GRANDE · agregado 2026-09-24
La portada pasa a fondo grafito para que la escena resalte: la web del cliente
en la ventana del navegador, el WhatsApp atendiendo solo en el celular, y
alrededor lo que hace el sistema. Sin cifras: no hay clientes todavía.
========================================================================== */
.portada {
position: relative;
overflow: hidden;
color: #fff;
background:
radial-gradient(58% 48% at 16% 8%, rgba(22, 214, 164, 0.16), transparent 68%),
radial-gradient(52% 44% at 88% 18%, rgba(47, 107, 255, 0.18), transparent 70%),
#0c1116;
padding: clamp(112px, 13vh, 146px) 0 clamp(64px, 7vw, 96px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.portada::after { /* trama fina, como papel técnico */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.5;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 54px 54px;
-webkit-mask-image: radial-gradient(72% 60% at 50% 0%, #000, transparent 78%);
mask-image: radial-gradient(72% 60% at 50% 0%, #000, transparent 78%);
}
.portada .envoltura { position: relative; z-index: 1; }
.portada-grilla { display: block; }
.portada-texto { max-width: 46rem; }
.portada h1 { color: #fff; }
.portada .entrada { color: rgba(255, 255, 255, 0.7); max-width: 46ch; }
.portada .sello {
color: rgba(255, 255, 255, 0.78);
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.14);
}
.portada .sello b { color: #fff; }
.portada .boton-secundario {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border-color: rgba(255, 255, 255, 0.18);
}
.portada .boton-secundario:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }
/* ---------- la escena ---------- */
.escena-grande {
position: relative;
margin: clamp(44px, 5vw, 68px) auto 0;
width: 100%;
max-width: 1180px;
}
.ventana {
position: relative;
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 0 rgba(255, 255, 255, 0.05), 0 48px 90px -34px rgba(0, 0, 0, 0.8);
outline: 1px solid rgba(255, 255, 255, 0.1);
}
.ventana-barra {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 16px;
background: #f2f3f5;
border-bottom: 1px solid #e4e6ea;
}
.ventana-puntos { display: flex; gap: 6px; flex: none; }
.ventana-puntos i { width: 10px; height: 10px; border-radius: 50%; background: #d3d7dd; }
.ventana-url {
margin: 0 auto;
font-size: 12px;
color: #636B75;
background: #fff;
border: 1px solid #e4e6ea;
border-radius: 999px;
padding: 5px 18px;
}
.ventana img { display: block; width: 100%; height: auto; }
/* el celular, encima de la ventana */
.fono {
position: relative;
width: 268px;
margin: -70px 0 0 auto;
padding: 9px;
border-radius: 32px;
background: linear-gradient(160deg, #1c232b, #0d1216);
outline: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 40px 76px -28px rgba(0, 0, 0, 0.85);
}
.fono-panel { background: #fbfbfc; border-radius: 24px; overflow: hidden; }
.fono-barra {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 14px;
background: #fff;
border-bottom: 1px solid #ebedf0;
}
.fono-sello {
width: 28px; height: 28px; border-radius: 9px; flex: none;
display: grid; place-items: center;
font-size: 11px; font-weight: 700; color: #fff;
background: linear-gradient(140deg, #b4451f, #6e2810);
}
.fono-barra b { font-size: 12.5px; display: block; line-height: 1.2; color: var(--tinta); }
.fono-barra span { font-size: 10.5px; color: #157A3A; }
.chat { padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.burbuja {
max-width: 88%;
font-size: 11.8px;
line-height: 1.45;
padding: 9px 11px;
border-radius: 13px;
color: var(--tinta);
}
.burbuja.entra { background: #eef0f2; border-bottom-left-radius: 4px; }
.burbuja.sale {
background: var(--menta-oscura);
color: #fff;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.chat-fichas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chat-ficha {
background: #fff;
border: 1px solid var(--borde);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--sombra-1);
}
.chat-ficha img { display: block; width: 100%; height: 54px; object-fit: cover; }
.chat-ficha div { padding: 7px 8px 9px; }
.chat-ficha b { display: block; font-size: 10.5px; line-height: 1.25; color: var(--tinta); } /* en la portada oscura heredaba blanco: no se veía */
.chat-ficha i { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--menta-texto); margin-top: 2px; }
.chat-listo {
display: flex;
align-items: center;
gap: 9px;
background: #0f1a17;
color: #fff;
border-radius: 13px;
padding: 10px 12px;
}
.chat-listo .ph { color: var(--menta); font-size: 17px; }
.chat-listo b { display: block; font-size: 11.5px; }
.chat-listo span { font-size: 10.5px; color: rgba(255, 255, 255, 0.6); }
/* tarjetas y logos que flotan alrededor */
.dato {
display: flex;
align-items: center;
gap: 11px;
background: rgba(19, 25, 32, 0.9);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 15px;
padding: 12px 16px;
box-shadow: 0 26px 48px -24px rgba(0, 0, 0, 0.9);
}
.dato .ph { font-size: 19px; color: var(--menta); }
.dato b { display: block; font-size: 13.5px; color: #fff; line-height: 1.25; }
.dato span { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.marca-flotante {
width: 54px; height: 54px;
border-radius: 17px;
display: grid; place-items: center;
background: #fff;
box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.85);
}
.marca-flotante img { width: 26px; height: 26px; }
.escena-pie {
margin: 30px auto 0;
max-width: 54ch;
text-align: center;
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 899px) {
.escena-grande > .dato, .escena-grande > .marca-flotante { display: none; }
.fono { margin: -54px 12px 0 auto; width: 228px; }
.datos-sueltos { display: grid; gap: 10px; margin-top: 26px; }
.datos-sueltos .dato { width: 100%; }
}
@media (min-width: 900px) {
.datos-sueltos { display: none; }
.escena-grande { padding: 0 78px 40px 0; }
.ventana { width: 86%; }
.fono { position: absolute; right: 0; bottom: 40px; margin: 0; width: 272px; }
.escena-grande > .dato { position: absolute; }
.dato-1 { top: 12%; right: -8px; transform: translateX(26%); }
.dato-2 { bottom: 13%; left: 27%; }
.dato-3 { bottom: 23%; left: -78px; }
.escena-grande > .marca-flotante { position: absolute; }
.marca-1 { top: 6%; left: -30px; }
.marca-2 { bottom: 6%; left: -38px; }
.marca-3 { top: -24px; left: 47%; }
}
/* =============================================================================
PÁGINAS INTERNAS
========================================================================== */
.nav-enlaces a.enlace[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.nav-enlaces a.enlace[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.encabezado { padding: clamp(118px, 14vh, 152px) 0 clamp(34px, 4vw, 54px); }
.encabezado h1 { font-size: clamp(36px, 4.2vw, 54px); line-height: 1.05; margin-bottom: 18px; }
.encabezado .entrada { max-width: 56ch; font-size: clamp(16.5px, 1.4vw, 19px); }
.encabezado .migas { font-size: 13px; color: var(--tinta-suave); margin-bottom: 18px; }
.encabezado .migas a { color: var(--tinta-media); }
.encabezado .migas a:hover { color: var(--menta-texto); }
.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--blanco); box-shadow: var(--sombra-1); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.tabla th, .tabla td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla thead th { font-family: "Space Grotesk", Inter, sans-serif; font-size: 14px; background: var(--hueso-2); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody th { font-weight: 600; color: var(--tinta); width: 26%; }
.tabla td { color: var(--tinta-media); }
.tabla .si { color: var(--menta-texto); font-weight: 600; }
.dos-columnas { display: grid; gap: 30px; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: repeat(2, 1fr); gap: 34px; } }
.lista-marcada { display: grid; gap: 12px; margin-top: 18px; }
.lista-marcada li { display: flex; gap: 11px; align-items: flex-start; color: var(--tinta-media); font-size: 15.5px; }
.lista-marcada .ph { color: var(--menta-texto); font-size: 18px; margin-top: 2px; flex: none; }
/* ficha de un boceto de ejemplo */
.fichas { display: grid; gap: 26px; }
.ficha-boceto {
display: grid;
gap: 24px;
background: var(--blanco);
border: 1px solid var(--borde);
border-radius: var(--radio-xl);
padding: clamp(22px, 3vw, 34px);
box-shadow: var(--sombra-1);
}
@media (min-width: 900px) { .ficha-boceto { grid-template-columns: 290px 1fr; align-items: center; } }
.ficha-boceto .celular-marco { width: 100%; max-width: 270px; margin: 0 auto; }
.ficha-boceto h3 { font-size: clamp(21px, 2.2vw, 27px); margin-bottom: 8px; }
.ficha-rubro { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--menta-texto); font-weight: 600; margin-bottom: 10px; }
.ficha-boceto .acciones { margin-top: 22px; }
/* pie con enlaces */
.pie-grilla { display: grid; gap: 28px; text-align: left; }
@media (min-width: 760px) { .pie-grilla { grid-template-columns: 1.5fr 1fr 1fr; } }
.pie-grilla h4, .pie-grilla .pie-titulo { font-family: "Space Grotesk", Inter, sans-serif; font-size: 14px; margin-bottom: 12px; }
.pie-grilla ul { display: grid; gap: 9px; font-size: 14.5px; color: var(--tinta-media); list-style: none; }
.pie-grilla a:hover { color: var(--menta-texto); }
.pie-legal { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--tinta-suave); }
.logo-pie { height: 26px; width: auto; display: block; margin-bottom: 14px; }
footer .pie-grilla p { margin-bottom: 10px; }
/* =============================================================================
TIPOGRAFÍA MIXTA · agregado 2026-09-24
Tres familias con roles fijos: Space Grotesk titula, Inter explica, y una
serif en cursiva (Instrument Serif) marca la palabra que importa. La mono del
sistema queda para lo que es comando o código.
========================================================================== */
@font-face { font-family: "Instrument Serif"; src: url("assets/fuentes/InstrumentSerif-Italic.woff2") format("woff2");
font-weight: 400; font-style: italic; font-display: swap; }
.cursiva,
.portada h1 .pieza.acento {
font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 400;
font-size: 1.1em;
letter-spacing: -0.012em;
line-height: 1;
padding-right: 0.04em; /* la cursiva se inclina: que no choque con la palabra siguiente */
}
h1 .cursiva, h2 .cursiva { padding-bottom: 0.06em; }
.portada h1 .linea-palabra { padding-bottom: 0.08em; }
.mono { font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; }
.boton-oscuro { background: var(--tinta); color: #fff; border: 1px solid var(--tinta); box-shadow: 0 14px 28px -16px rgba(18, 23, 28, 0.8); }
.boton-oscuro:hover { background: #000; }
.boton .ph { font-size: 1.05em; }
/* =============================================================================
UN BOCETO PARA CADA RUBRO · escenario al estilo de tasteskill.dev
Piezas que flotan en 3D sobre un fondo de estuco, unidas con hilos punteados:
el comando que arma el boceto, lo que trae adentro, el sello de CreaX y dos
bocetos reales en el celular.
========================================================================== */
.rubros-escenario {
position: relative;
overflow: hidden;
padding: clamp(64px, 7vw, 104px) 0;
margin-bottom: clamp(40px, 5vw, 64px);
border-top: 1px solid var(--borde);
border-bottom: 1px solid var(--borde);
background:
radial-gradient(60% 70% at 72% 44%, rgba(255, 255, 255, 0.62), transparent 72%),
radial-gradient(50% 60% at 8% 90%, rgba(255, 255, 255, 0.35), transparent 70%),
url("data:image/svg+xml;utf8,"),
#dedad4;
}
.rubros-escenario::before { /* grano fino encima del estuco */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.35;
background-image: url("data:image/svg+xml;utf8,");
}
.rubros-grilla { position: relative; z-index: 1; display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .rubros-grilla { grid-template-columns: 0.84fr 1.16fr; gap: 30px; } }
.rubros-texto .marca-seccion { color: var(--tinta-media); }
.rubros-titulo { font-size: clamp(42px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 22px; }
.rubros-texto .entrada { color: #3f4750; max-width: 40ch; }
.rubros-texto .acciones { margin-top: 30px; }
/* ---------- la constelación ---------- */
.constelacion { position: relative; }
.hilos { display: none; }
.pieza-terminal, .pieza-secciones, .pieza-fono, .pieza-sello { border-radius: 14px; }
.pieza-terminal {
background: linear-gradient(170deg, #25272b, #17191c);
color: #e9e9e6;
box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 60px -30px rgba(20, 18, 14, 0.75);
overflow: hidden;
}
.pt-barra {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 15px;
font-size: 11.5px;
color: #a3a6aa;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pt-barra .ventana-puntos i { background: #54585e; }
.pieza-terminal pre {
margin: 0;
padding: 16px 18px 20px;
font-size: 13px;
line-height: 1.75;
white-space: pre-wrap;
color: #e9e9e6;
}
.pieza-terminal .ok { color: var(--menta); }
.pieza-terminal .tenue { color: #a3a6aa; }
.pieza-secciones {
background: #f7f6f3;
padding: 18px 16px 10px;
box-shadow: 0 1px 0 #fff inset, 0 40px 60px -32px rgba(20, 18, 14, 0.55);
}
.pieza-secciones > p { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 500; font-size: 15px; margin: 0 4px 12px; }
.pieza-secciones ul { list-style: none; border: 1px solid #e6e3de; border-radius: 10px; overflow: hidden; background: #fbfaf8; }
.pieza-secciones li { display: flex; align-items: center; gap: 11px; padding: 10px 13px; font-size: 13px; color: #3a4048; border-bottom: 1px solid #ebe8e3; }
.pieza-secciones li:last-child { border-bottom: 0; }
.pieza-secciones .ph { font-size: 16px; color: var(--tinta); }
.pieza-fono {
padding: 6px;
border-radius: 24px;
background: #16191d;
box-shadow: 0 36px 56px -26px rgba(20, 18, 14, 0.8);
}
.pieza-fono img { display: block; width: 100%; height: auto; border-radius: 18px; }
.pieza-sello {
display: grid;
place-items: center;
border-radius: 22px;
background:
radial-gradient(70% 70% at 30% 25%, rgba(255, 255, 255, 0.7), transparent 70%),
url("data:image/svg+xml;utf8,"),
#e6e1d8;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -2px 0 rgba(0, 0, 0, 0.06) inset, 0 40px 56px -28px rgba(20, 18, 14, 0.6);
}
.pieza-sello span { /* la X de CreaX, grabada en la piedra */
font-family: "Space Grotesk", Inter, sans-serif;
font-weight: 700;
font-size: 92px;
line-height: 1;
color: #ddd7cd;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.85), 2px 2px 3px rgba(80, 70, 55, 0.35);
}
/* en el celular: piezas en fila, sin inclinación */
@media (max-width: 999px) {
.constelacion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pieza-terminal, .pieza-secciones { grid-column: 1 / -1; }
.pieza-sello { display: none; }
}
/* en computadora: la constelación completa, flotando */
@media (min-width: 1000px) {
.constelacion { height: 600px; perspective: 1500px; }
.hilos { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hilos path { fill: none; stroke: rgba(40, 36, 30, 0.42); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; }
.constelacion > div { position: absolute; }
.pieza-terminal { left: 0; top: 34px; width: 350px; transform: rotateY(16deg) rotateX(5deg) rotateZ(-3deg); animation: flota-a 9s ease-in-out infinite; }
.pieza-secciones { right: 0; top: 0; width: 220px; transform: rotateY(-14deg) rotateX(4deg) rotateZ(1.5deg); animation: flota-b 10s ease-in-out infinite; }
.pieza-sello { left: 43%; top: 318px; width: 158px; height: 158px; transform: rotateY(-10deg) rotateX(12deg) rotateZ(-2deg); animation: flota-c 11s ease-in-out infinite; }
.pf-1 { left: 6%; top: 300px; width: 142px; transform: rotateY(18deg) rotateZ(-5deg); animation: flota-b 12s ease-in-out infinite; }
.pf-2 { right: 4%; top: 262px; width: 150px; transform: rotateY(-16deg) rotateZ(4deg); animation: flota-a 10.5s ease-in-out infinite; }
}
@keyframes flota-a { 50% { translate: 0 -12px; } }
@keyframes flota-b { 50% { translate: 0 10px; } }
@keyframes flota-c { 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) {
.constelacion > div { animation: none !important; }
}
/* =============================================================================
ESCALA TIPOGRÁFICA CON CONTRASTE · agregado 2026-09-24
Títulos enormes y apretados, cuerpo cómodo, etiquetas en mono chica, y la
serif en cursiva para números y palabras clave. Cada nivel se distingue a
simple vista: nada queda "todo del mismo tamaño".
========================================================================== */
h2 { font-size: clamp(38px, 4.9vw, 66px); line-height: 1; letter-spacing: -0.042em; margin-bottom: 20px; }
.encabezado h1 { font-size: clamp(48px, 6.6vw, 96px); line-height: 0.96; letter-spacing: -0.048em; margin-bottom: 24px; }
.portada h1 { font-size: clamp(48px, 6.2vw, 88px); line-height: 0.98; letter-spacing: -0.048em; margin-bottom: 26px; }
.portada-texto { max-width: 62rem; }
.entrada { font-size: clamp(17.5px, 1.45vw, 21px); line-height: 1.55; }
.encabezado .entrada { font-size: clamp(18px, 1.6vw, 23px); }
.marca-seccion {
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.nota, .migas, .escena-pie, .pie-legal, .ficha-rubro, .flujo-titulo {
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
letter-spacing: 0.02em;
}
.nota { font-size: 12.5px; }
.pie-grilla h4, .pie-grilla .pie-titulo {
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave);
}
.tabla thead th {
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.resultado-num, .socio-inicial, .paso-numero {
font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em;
}
.resultado-num { font-size: 60px; line-height: 0.85; margin-bottom: 18px; }
.socio-inicial { font-size: 68px; line-height: 0.9; }
.paso-numero { font-size: 30px; }
.tarjeta h3 { font-size: 22px; letter-spacing: -0.022em; }
.tarjeta-oscura h3 { font-size: clamp(25px, 2.5vw, 34px); line-height: 1.08; }
.tarjeta p { font-size: 15.5px; line-height: 1.6; }
/* una frase grande, a media página, para cambiar de ritmo */
.declaracion { padding: clamp(40px, 6vw, 90px) 0; }
.declaracion-texto {
font-family: "Space Grotesk", Inter, sans-serif; font-weight: 500;
font-size: clamp(32px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -0.035em;
max-width: 22ch; color: var(--tinta);
}
.declaracion-texto .tenue { color: var(--tinta-suave); }
.declaracion-firma {
margin-top: 26px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave);
}
/* =============================================================================
INTERACCIÓN
========================================================================== */
/* luz que sigue al cursor dentro de cada tarjeta */
.tarjeta::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 0;
transition: opacity 0.35s ease;
background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(22, 214, 164, 0.13), transparent 62%);
}
.tarjeta:hover::before { opacity: 1; }
.tarjeta > * { position: relative; z-index: 1; }
.tarjeta-oscura::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(22, 214, 164, 0.2), transparent 62%); }
/* luz que sigue al cursor en la portada oscura */
.portada::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(520px circle at var(--gx, 30%) var(--gy, 20%), rgba(22, 214, 164, 0.1), transparent 60%);
transition: background 0.2s linear;
}
/* la cinta se detiene al pasar el cursor */
.cinta:hover .cinta-pista span { color: var(--tinta); }
/* ---------- ¿cuál me toca? (servicios) ---------- */
.elegidor {
display: grid; gap: 22px; margin-top: 40px;
background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-xl);
padding: clamp(22px, 3vw, 36px); box-shadow: var(--sombra-2);
}
@media (min-width: 900px) { .elegidor { grid-template-columns: 1.25fr 0.75fr; gap: 36px; } }
.pregunta { border: 0; padding: 0; margin: 0 0 22px; }
.pregunta:last-child { margin-bottom: 0; }
.pregunta legend {
font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 18px;
letter-spacing: -0.015em; margin-bottom: 12px;
}
.pregunta legend span {
display: inline-block; margin-right: 8px; font-family: "Instrument Serif", Georgia, serif;
font-style: italic; font-weight: 400; font-size: 22px; color: var(--menta-texto);
}
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion {
font: inherit; font-size: 14.5px; cursor: pointer; color: var(--tinta-media);
background: var(--hueso); border: 1px solid var(--borde); border-radius: 999px; padding: 10px 17px;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--rebote);
}
.opcion:hover { border-color: var(--borde-fuerte); color: var(--tinta); }
.opcion:active { transform: scale(0.97); }
.opcion[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.veredicto {
position: relative; overflow: hidden; border-radius: var(--radio); padding: 26px 24px;
background: #0f1519; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px;
}
.veredicto::after {
content: ""; position: absolute; right: -30%; top: -40%; width: 340px; height: 340px; border-radius: 50%;
background: radial-gradient(circle, rgba(22, 214, 164, 0.35), transparent 65%); pointer-events: none;
}
.veredicto > * { position: relative; z-index: 1; }
.veredicto-etiqueta {
font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px;
letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.veredicto-nombre {
font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
font-size: clamp(44px, 4.6vw, 64px); line-height: 1; margin: 10px 0 12px; color: var(--menta);
}
.veredicto-porque { font-size: 15px; color: rgba(255, 255, 255, 0.72); line-height: 1.55; }
.tabla .col-activa { background: rgba(22, 214, 164, 0.1); }
.tabla thead th.col-activa { background: var(--menta); color: #052a20; }
.tabla td, .tabla th { transition: background-color 0.35s ease, color 0.35s ease; }
/* ---------- flujo por rubro (automatizaciones) ---------- */
.flujo-pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.nodo { cursor: pointer; }
.nodo b, .nodo span { transition: opacity 0.25s ease; }
.nodo.cambiando b, .nodo.cambiando span { opacity: 0; }
.nodo-detalle {
margin-top: 16px; padding: 16px 18px; border-radius: var(--radio-chico);
background: var(--hueso); border: 1px dashed var(--borde-fuerte); font-size: 14.5px; color: var(--tinta-media);
min-height: 74px;
}
.nodo-detalle b { color: var(--tinta); }
/* ---------- vista previa que recorre el boceto (bocetos) ---------- */
.recorrido { position: relative; overflow: hidden; aspect-ratio: 390 / 760; border-radius: inherit; cursor: ns-resize; }
.recorrido img { position: absolute; top: 0; left: 0; width: 100%; height: auto; transform: translateY(0);
transition: top 5.5s cubic-bezier(0.45, 0, 0.55, 1), transform 5.5s cubic-bezier(0.45, 0, 0.55, 1); }
.recorrido:hover img, .recorrido:focus-visible img { top: 100%; transform: translateY(-100%); }
.recorrido-pista {
display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px; color: var(--tinta-suave);
}
/* ---------- socios que se abren (nosotros) ---------- */
.socio { cursor: pointer; }
.socio-detalle {
display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--salida), margin 0.5s var(--salida);
}
.socio-detalle > ul { overflow: hidden; }
.socio:hover .socio-detalle, .socio.abierto .socio-detalle { grid-template-rows: 1fr; margin-top: 14px; }
.socio-detalle li { font-size: 13.5px; color: var(--tinta-media); padding: 7px 0; border-top: 1px solid var(--borde); }
.socio-pista {
display: block; margin-top: 12px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px; letter-spacing: 0.08em; color: var(--tinta-suave);
}
.socio:hover .socio-pista, .socio.abierto .socio-pista { opacity: 0; }
/* ---------- la constelación reacciona al cursor ---------- */
@media (min-width: 1000px) {
.constelacion > div { transition: filter 0.35s ease, opacity 0.35s ease, box-shadow 0.35s ease; cursor: default; }
.constelacion:hover > div:not(:hover) { opacity: 0.72; filter: saturate(0.7); }
.constelacion > div:hover { z-index: 3; }
}
/* parallax por capas en la portada, sin chocar con las animaciones de anime.js
(usa la propiedad translate, que es independiente de transform) */
@media (min-width: 900px) {
.escena-grande .ventana { translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -5px); transition: translate 0.9s var(--salida); }
.escena-grande .fono { translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 10px); transition: translate 0.9s var(--salida); }
.escena-grande > .dato { translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 16px); transition: translate 1.1s var(--salida); }
.escena-grande > .marca-flotante { translate: calc(var(--px, 0) * -24px) calc(var(--py, 0) * -18px); transition: translate 1.2s var(--salida); }
}
.rubros-grilla { perspective: 1800px; }
.constelacion { transform-style: preserve-3d; }
/* =============================================================================
IDENTIDAD 2 · UN COLOR POR SECTOR, DISEÑO PLANO · 2026-09-28
Paleta "Neón suave": base neutra (tinta y papel) y un color para cada sector.
Las variables --menta* conservan el nombre, pero dentro de cada sector toman
el color de ese sector (clases .color-*): todo el acento cambia de una vez.
Sin sombras, sin brillos ni difuminados: bordes de 1px y colores sólidos.
Para cambiar de paleta basta con tocar los --c-* de este bloque.
========================================================================== */
:root {
--tinta: #101010; --tinta-media: #474745; --tinta-suave: #6f6f6b;
--hueso: #F4F4F2; --hueso-2: #EAEAE6; --blanco: #FFFFFF;
--borde: rgba(16, 16, 16, 0.12); --borde-fuerte: rgba(16, 16, 16, 0.24);
--sombra-1: none; --sombra-2: none; --sombra-3: none;
/* Paleta "Neón suave": lima como marca; coral, lila, limón y agua por sector.
Son colores claros: el texto encima va siempre en negro (--sobre-color). */
--c-inicio: #C5F82A; --c-inicio-texto: #4F6B00; --c-inicio-tenue: #EEFCCB;
--c-servicios: #FF7A59; --c-servicios-texto: #B83E20; --c-servicios-tenue: #FFE4DC;
--c-automatizaciones: #B9A6FF; --c-automatizaciones-texto: #5A43C9; --c-automatizaciones-tenue: #EDE8FF;
--c-bocetos: #FFD84D; --c-bocetos-texto: #826700; --c-bocetos-tenue: #FFF5CC;
--c-nosotros: #63E2C6; --c-nosotros-texto: #0E7C66; --c-nosotros-tenue: #DDF8F1;
}
:root, .color-inicio {
--menta: var(--c-inicio); --menta-oscura: var(--c-inicio-texto); --menta-texto: var(--c-inicio-texto);
--menta-tenue: var(--c-inicio-tenue); --sobre-color: var(--tinta);
}
.color-servicios {
--menta: var(--c-servicios); --menta-oscura: var(--c-servicios-texto); --menta-texto: var(--c-servicios-texto);
--menta-tenue: var(--c-servicios-tenue); --sobre-color: var(--tinta);
}
.color-automatizaciones {
--menta: var(--c-automatizaciones); --menta-oscura: var(--c-automatizaciones-texto); --menta-texto: var(--c-automatizaciones-texto);
--menta-tenue: var(--c-automatizaciones-tenue); --sobre-color: var(--tinta);
}
.color-bocetos {
--menta: var(--c-bocetos); --menta-oscura: var(--c-bocetos-texto); --menta-texto: var(--c-bocetos-texto);
--menta-tenue: var(--c-bocetos-tenue); --sobre-color: var(--tinta);
}
.color-nosotros {
--menta: var(--c-nosotros); --menta-oscura: var(--c-nosotros-texto); --menta-texto: var(--c-nosotros-texto);
--menta-tenue: var(--c-nosotros-tenue); --sobre-color: var(--tinta);
}
body { background: var(--hueso); color: var(--tinta); }
/* ---------- fuera lo difuminado ---------- */
.grano, .reticula, .brillo::after, .tarjeta::before, .flujo::before, .cierre-caja::before,
.veredicto::after, .portada::before, .portada::after { display: none !important; }
.cinta { mask-image: none; -webkit-mask-image: none; background: var(--blanco); }
.avance { background: var(--menta); height: 3px; }
.rubros-escenario {
background:
url("data:image/svg+xml;utf8,"),
#dedad4;
}
/* ---------- sin sombras: todo se separa con bordes ---------- */
.nav-caja, .nav.encogida .nav-caja { background: var(--blanco); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.nav.encogida .nav-caja { border-color: var(--borde-fuerte); }
.sello, .celular-marco, .tarjeta, .tarjeta:hover, .tarjeta-oscura, .integracion, .integracion:hover, .flujo, .nodo,
.pestana, .cierre-caja, .ventana, .fono, .dato, .marca-flotante, .chat-ficha, .pieza-terminal, .pieza-secciones,
.pieza-fono, .pieza-sello, .elegidor, .veredicto, .tabla-envoltura, .ficha-boceto, .paso, .paso.activo,
.paso-numero, .boton, .boton:hover { box-shadow: none !important; }
.tarjeta:hover { border-color: var(--menta); }
.integracion:hover { border-color: var(--menta); }
.dato { background: #1E1E1E; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255, 255, 255, 0.16); }
.marca-flotante { border: 1px solid rgba(255, 255, 255, 0.2); }
.ventana { outline: 1px solid rgba(255, 255, 255, 0.18); }
.pieza-terminal, .pieza-secciones, .pieza-sello { border: 1px solid rgba(20, 20, 20, 0.18); }
.pieza-fono { border: 1px solid rgba(20, 20, 20, 0.35); }
.chat-ficha { border-color: var(--borde); }
/* ---------- botones planos ---------- */
.boton-principal { background: var(--menta); color: var(--sobre-color); }
.boton-principal:hover { background: var(--tinta); color: #fff; }
.boton-secundario { background: var(--blanco); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton-secundario:hover { border-color: var(--tinta); }
.portada .boton-secundario { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.portada .boton-secundario:hover { border-color: #fff; background: transparent; }
.portada .boton-principal:hover { background: #fff; color: var(--tinta); }
/* ---------- acentos que siguen al sector ---------- */
h1 .cursiva, h2 .cursiva { color: var(--menta-texto); }
.portada h1 .pieza.acento { color: var(--menta); }
.pestana[aria-selected="true"] { color: var(--sobre-color); background: var(--menta); border-color: var(--menta); }
.nodo.viva { border-color: var(--menta); background: var(--menta-tenue); }
.paso.activo .paso-numero { color: var(--sobre-color); background: var(--menta); border-color: var(--menta); }
.tabla .col-activa { background: var(--menta-tenue); }
.tabla thead th.col-activa { background: var(--menta); color: var(--sobre-color); }
.veredicto { background: var(--tinta); }
.veredicto-nombre { color: var(--menta); }
.icono { background: var(--menta-tenue); border-color: transparent; }
.icono .ph { color: var(--menta-texto); }
.tarjeta-oscura .icono { background: rgba(255, 255, 255, 0.08); }
.tarjeta-oscura .icono .ph { color: var(--menta); }
.opcion[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
/* la portada: fondo sólido, sin luces */
.portada { background: var(--tinta); }
.portada .sello { background: transparent; border-color: rgba(255, 255, 255, 0.22); }
/* cierre de cada página: un bloque del color del sector */
.cierre-caja { background: var(--menta); border: 0; }
.cierre-caja h2, .cierre-caja h2 .cursiva, .cierre-caja .entrada, .cierre-datos, .cierre-datos a { color: var(--sobre-color); }
.cierre-caja .entrada, .cierre-datos { opacity: 0.86; }
.cierre-caja .boton-principal { background: var(--tinta); color: #fff; }
.cierre-caja .boton-principal:hover { background: #000; color: #fff; }
.cierre-caja .boton-secundario { background: transparent; color: var(--sobre-color); border-color: currentColor; }
/* cabecera de cada página interna: bloque sólido del color del sector */
.encabezado {
background: var(--menta); color: var(--sobre-color);
padding: clamp(128px, 15vh, 162px) 0 clamp(52px, 6vw, 84px);
border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;
margin-bottom: clamp(20px, 3vw, 40px); position: relative; overflow: hidden;
}
.encabezado h1, .encabezado h1 .cursiva, .encabezado .entrada, .encabezado .marca-seccion { color: var(--sobre-color); }
.encabezado .marca-seccion::before { background: var(--sobre-color); }
.encabezado .envoltura { position: relative; z-index: 1; }
.migas { display: none; }
/* tarjetas con la franja del sector del que hablan */
.con-franja { border-top: 6px solid var(--menta); }
.con-franja .resultado-num { color: var(--menta-texto); }
/* enlaces del menú: cada uno subraya con el color de su sector */
.nav-enlaces a.enlace::after { height: 3px; bottom: -7px; }
.nav-enlaces a.enlace[aria-current="page"] { color: var(--tinta); }
/* =============================================================================
COMPONENTES NUEVOS · 2026-09-28
========================================================================== */
/* ---------- portada: una pantalla a la vez, que van rotando ---------- */
.ventana-rubro {
flex: none; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase; background: var(--menta); color: var(--sobre-color);
padding: 4px 11px; border-radius: 999px;
}
.ventana-pantallas { display: grid; background: #F7F7F4; }
.ventana-pantallas img { grid-area: 1 / 1; display: block; width: 100%; height: auto; opacity: 0; transition: opacity 0.8s ease; }
.ventana-pantallas img.activa { opacity: 1; }
.fono-sello { background: var(--menta); background-image: none; color: var(--sobre-color); }
.fono-sello .ph { font-size: 16px; }
.chat, .fono-barra > div { transition: opacity 0.35s ease; }
.fono.cambiando .chat, .fono.cambiando .fono-barra > div { opacity: 0; }
.chat-ficha-icono { display: grid; place-items: center; height: 54px; background: var(--menta-tenue); color: var(--menta-texto); font-size: 26px; }
.chat-ficha i { color: var(--menta-texto); }
.burbuja.sale { background: var(--menta-oscura); }
.escena-grande .chat-listo .ph { color: var(--menta); }
/* ---------- automatizaciones: el logo grande detrás del título ---------- */
.encabezado-logo { padding-bottom: clamp(70px, 9vw, 130px); }
.logo-fondo {
position: absolute; right: -4%; top: 50%; width: min(640px, 64vw); aspect-ratio: 1;
color: var(--tinta); opacity: 0.13; transform: translateY(-46%) rotate(-10deg);
animation: logo-gira 24s ease-in-out infinite alternate; pointer-events: none;
}
.logo-fondo svg { width: 100%; height: 100%; display: block; fill: currentColor; }
@keyframes logo-gira { to { transform: translateY(-50%) rotate(6deg) scale(1.05); } }
.titulo-gigante { font-size: clamp(58px, 9.4vw, 138px) !important; line-height: 0.9 !important; letter-spacing: -0.058em !important; max-width: 10ch; }
.titulo-gigante .cursiva { display: inline-block; }
/* ---------- qué genera ---------- */
.beneficios { display: grid; gap: 16px; margin-top: 42px; }
@media (min-width: 760px) { .beneficios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .beneficios { grid-template-columns: repeat(4, 1fr); } }
.beneficio {
background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px 24px 26px;
transition: background-color 0.35s ease, border-color 0.35s ease, transform 0.45s var(--salida);
}
.beneficio .ph { display: block; font-size: 46px; color: var(--menta-texto); margin-bottom: 40px; transition: color 0.35s ease, transform 0.5s var(--rebote); }
.beneficio h3 { font-size: 24px; letter-spacing: -0.028em; line-height: 1.1; margin-bottom: 10px; }
.beneficio p { color: var(--tinta-media); font-size: 15.5px; line-height: 1.55; transition: color 0.35s ease; }
.beneficio:hover { background: var(--menta); border-color: var(--menta); transform: translateY(-4px); }
.beneficio:hover .ph { color: var(--sobre-color); transform: rotate(-8deg) scale(1.08); }
.beneficio:hover p { color: var(--sobre-color); }
/* ---------- la conversación que avanza con el scroll ---------- */
.conversacion { margin-top: clamp(10px, 3vw, 40px); }
.conversacion-pista { position: relative; height: 330vh; }
.conversacion-fija { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.conversacion-grilla { display: grid; gap: 40px; align-items: center; width: 100%; }
@media (min-width: 1000px) { .conversacion-grilla { grid-template-columns: 0.7fr 1.3fr; gap: 56px; } }
.conversacion-avance { margin-top: 24px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; color: var(--tinta-suave); }
.conversacion-avance span { color: var(--menta-texto); font-weight: 600; font-size: 16px; }
.sin-movimiento .conversacion-pista { height: auto; }
.sin-movimiento .conversacion-fija { position: static; height: auto; padding: 60px 0; }
.laptop { width: 100%; max-width: 780px; margin: 0 auto; }
.laptop-pantalla { position: relative; background: #0d0d0d; border: 1px solid #2c2c2c; border-radius: 20px 20px 8px 8px; padding: 22px 16px 16px; }
.laptop-pantalla::before { content: ""; position: absolute; top: 8px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: #333; transform: translateX(-50%); }
.laptop-base { position: relative; height: 18px; width: 114%; margin-left: -7%; background: #d8d8d4; border: 1px solid #c4c4bf; border-radius: 2px 2px 16px 16px; }
.laptop-base::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 7px; background: #bdbdb8; border-radius: 0 0 8px 8px; }
.app { display: grid; grid-template-columns: 190px 1fr; height: 440px; background: #fff; border-radius: 8px; overflow: hidden; font-size: 13px; }
.app-lista { background: #f5f5f3; border-right: 1px solid #ebebe8; padding: 14px 10px; display: flex; flex-direction: column; gap: 6px; }
.app-titulo { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 16px; padding: 0 6px 8px; }
.app-contacto { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; }
.app-contacto.activo { background: var(--menta-tenue); }
.app-contacto b { display: block; font-size: 12.5px; }
.app-contacto span { font-size: 11px; color: var(--menta-texto); }
.app-contacto .b { display: block; height: 8px; width: 92px; border-radius: 9px; background: #e2e2de; }
.app-contacto .b.corta { width: 58px; margin-top: 6px; }
.app-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: #fff; font-size: 13px; font-weight: 600; }
.app-avatar.gris { background: #e2e2de; }
.app-chat { display: flex; flex-direction: column; min-width: 0; }
.app-cabecera { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #ebebe8; }
.app-cabecera b { display: block; font-size: 13.5px; }
.app-cabecera span { font-size: 11px; color: #157A3A; }
.app-cabecera .app-asistente { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--sobre-color); background: var(--menta); padding: 5px 11px; border-radius: 999px; }
.app-mensajes { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 16px; overflow: hidden; background: #fafaf8; }
.msj { max-width: 74%; padding: 10px 13px; border-radius: 15px; line-height: 1.45; font-size: 13px; margin: 0; }
.msj p { margin: 0; }
.msj.cliente { align-self: flex-start; background: #fff; border: 1px solid #e6e6e2; border-bottom-left-radius: 5px; }
.msj.asistente { align-self: flex-end; background: var(--menta); color: var(--sobre-color); border-bottom-right-radius: 5px; }
.msj.sistema { align-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: none; background: var(--tinta); color: #fff; font-size: 12px; border-radius: 999px; }
.msj.sistema .ph { color: var(--menta); font-size: 15px; }
.msj-opciones { display: flex; gap: 8px; margin-top: 8px; }
.msj-opciones span { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--tinta); border-radius: 10px; padding: 7px 10px; font-size: 12px; font-weight: 600; }
.msj-enlace { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--tinta); color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.app-escribir { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 14px; padding: 10px 14px; border: 1px solid #e6e6e2; border-radius: 999px; color: #6F6F6B; font-size: 12.5px; }
.app-escribir .ph { color: var(--menta-texto); font-size: 17px; }
.con-js .msj:not(.visto) { display: none; }
.msj.visto { animation: msj-entra 0.45s var(--salida); }
@keyframes msj-entra { from { opacity: 0; transform: translateY(10px); } }
.msj.escribiendo { width: 60px; height: 36px; padding: 0; overflow: hidden; font-size: 0; }
.msj.escribiendo > * { display: none; }
.msj.escribiendo::after { content: "• • •"; display: block; text-align: center; line-height: 36px; font-size: 13px; letter-spacing: 1px; animation: parpadeo 0.9s infinite; }
@keyframes parpadeo { 50% { opacity: 0.35; } }
@media (max-width: 700px) { .app { grid-template-columns: 1fr; } .app-lista { display: none; } }
/* ---------- nosotros: el lugar de la foto de cada socio ---------- */
.socio-foto { aspect-ratio: 1 / 1; border-radius: 14px; background: #d6d6d2; display: grid; place-items: center; margin-bottom: 18px; }
.socio-foto span { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8e8e89; }
@media (min-width: 900px) { .socios { grid-template-columns: repeat(4, 1fr); } }
/* portada: el titular corta en dos líneas parejas ("¿Aún vendes sin / tu propia web?") y la escena ocupa menos alto */
#titular { max-width: 7.4em; }
@media (min-width: 900px) {
.escena-grande { max-width: 1080px; }
.portada { padding-bottom: clamp(48px, 5vw, 72px); }
}
/* =============================================================================
INTRO DEL LOGO Y FIRMA · 2026-09-28
Al entrar: los bloques se arman, el cursor arrastra el último a su lugar,
aparece CreaX y la cortina sube. Una vez por visita; un clic la salta.
========================================================================== */
.intro { display: none; }
html.con-intro .intro {
display: grid; place-items: center; position: fixed; inset: 0; z-index: 300;
background: var(--tinta); cursor: pointer;
}
html.con-intro, html.con-intro body { overflow: hidden; }
.intro-caja { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.intro-logo { width: min(460px, 76vw); height: auto; overflow: visible; }
.intro .ib, .intro .ib-ultimo, .intro .onda, .intro .punta { transform-box: fill-box; transform-origin: center; }
/* punto de partida de "Encendido": así no se ve el logo terminado antes de que arranque */
.intro .ib-ultimo, .intro .onda, .intro .corte, .intro .punta, .intro .barra, .intro .asta, .intro .letra { opacity: 0; }
.intro-saltar { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.nav-marca { display: inline-flex; align-items: center; gap: 9px; }
.nav .isotipo { width: 26px; height: 26px; display: block; }
.firma-pie { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.firma-pie .isotipo { width: 30px; height: 30px; display: block; }
.firma-pie .logo-pie { margin-bottom: 0; }
/* logo completo (bloques + Crea + X que sube), en un solo archivo */
.nav .logo-completo { height: 24px; width: auto; display: block; }
.firma-pie .logo-completo { height: 30px; width: auto; display: block; }
/* ajustes 2026-09-28: menú sin borde y resultados en versión corta */
.nav-caja, .nav.encogida .nav-caja { border: 0; }
.resultados-simples .tarjeta h3 { font-size: 24px; margin-bottom: 6px; }
.resultados-simples .tarjeta p { font-size: 15px; color: var(--tinta-media); }
@media (min-width: 900px) { .lineas-tres { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .resultados-simples { grid-template-columns: repeat(4, 1fr); } }
/* =============================================================================
PLAN CUIDADO · las opciones a la izquierda cambian la interfaz de la derecha
========================================================================== */
.cuidado-grilla { display: grid; gap: 36px; align-items: center; }
@media (min-width: 960px) { .cuidado-grilla { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }
.cuidado-opciones { display: grid; gap: 10px; margin-top: 30px; }
.cuidado-opcion {
display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; cursor: pointer;
font: inherit; color: var(--tinta); background: transparent; border: 1px solid var(--borde);
border-radius: var(--radio); padding: 16px 18px;
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.35s var(--salida);
}
.cuidado-opcion:hover { border-color: var(--borde-fuerte); transform: translateX(4px); }
.cuidado-opcion .ph { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--hueso-2); color: var(--tinta); transition: background-color 0.3s ease; }
.cuidado-opcion b { display: block; font-family: "Space Grotesk", Inter, sans-serif; font-size: 18px; letter-spacing: -0.015em; margin-bottom: 2px; }
.cuidado-opcion small { display: block; font-size: 14.5px; color: var(--tinta-media); line-height: 1.5; }
.cuidado-opcion[aria-selected="true"] { background: var(--blanco); border-color: var(--tinta); }
.cuidado-opcion[aria-selected="true"] .ph { background: var(--menta); color: var(--sobre-color); }
.panel-app { background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: 22px; overflow: hidden; }
.panel-barra { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--borde); background: var(--hueso); }
.panel-barra b { font-family: "Space Grotesk", Inter, sans-serif; font-size: 14px; }
.panel-estado { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta-media); }
.panel-estado i { width: 8px; height: 8px; border-radius: 50%; background: #1FB36B; box-shadow: 0 0 0 4px rgba(31, 179, 107, 0.16); }
.panel-vista { display: none; padding: 22px 22px 24px; min-height: 330px; }
.panel-vista.activa { display: block; animation: vista-entra 0.45s var(--salida); }
@keyframes vista-entra { from { opacity: 0; transform: translateY(8px); } }
.panel-titulo { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 14px; }
.estado-fila { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--borde); }
.estado-fila:first-of-type { border-top: 0; }
.estado-fila > .ph { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: var(--menta-tenue); color: var(--menta-texto); }
.estado-fila b { display: block; font-size: 15px; }
.estado-fila small { font-size: 13px; color: var(--tinta-suave); }
.interruptor { margin-left: auto; flex: none; width: 42px; height: 24px; border-radius: 999px; background: #d7d7d3; position: relative; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.35s var(--rebote); }
.interruptor.encendido { background: var(--tinta); }
.interruptor.encendido::after { transform: translateX(18px); background: var(--menta); }
.mini-chat { display: flex; flex-direction: column; gap: 9px; }
.mini-msj { max-width: 78%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.mini-msj.cliente { align-self: flex-start; background: var(--hueso); border-bottom-left-radius: 4px; }
.mini-msj.nosotros { align-self: flex-end; background: var(--menta); color: var(--sobre-color); border-bottom-right-radius: 4px; }
.panel-vista.activa .mini-msj { animation: vista-entra 0.5s var(--salida) both; }
.panel-vista.activa .mini-msj:nth-child(2) { animation-delay: 0.15s; }
.panel-vista.activa .mini-msj:nth-child(3) { animation-delay: 0.3s; }
.panel-vista.activa .mini-msj:nth-child(4) { animation-delay: 0.45s; }
.cambios-lista, .reporte-datos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cambios-lista span, .reporte-datos span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--borde); }
.cambios-lista .ph { color: #1FB36B; }
.reporte-datos .ph { color: var(--menta-texto); }
.mini-grafico { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 12px 4px 0; border-bottom: 1px solid var(--borde); }
.mini-grafico span { flex: 1; height: var(--alto); border-radius: 8px 8px 0 0; background: var(--menta); transform-origin: bottom; }
.mini-grafico span:nth-child(odd) { background: var(--menta-tenue); border: 1px solid var(--menta); border-bottom: 0; }
.panel-vista.activa .mini-grafico span { animation: barra-crece 0.7s var(--salida) both; }
.panel-vista.activa .mini-grafico span:nth-child(2) { animation-delay: 0.05s; }
.panel-vista.activa .mini-grafico span:nth-child(3) { animation-delay: 0.1s; }
.panel-vista.activa .mini-grafico span:nth-child(4) { animation-delay: 0.15s; }
.panel-vista.activa .mini-grafico span:nth-child(5) { animation-delay: 0.2s; }
.panel-vista.activa .mini-grafico span:nth-child(6) { animation-delay: 0.25s; }
.panel-vista.activa .mini-grafico span:nth-child(7) { animation-delay: 0.3s; }
@keyframes barra-crece { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .panel-vista.activa, .panel-vista.activa * { animation: none !important; } }
/* el ícono de cada sector, grande detrás del título (como el logo de Automatizaciones) */
.icono-fondo { display: grid; place-items: center; }
.icono-fondo .ph { font-size: min(600px, 60vw); line-height: 1; }
/* =============================================================================
INTEGRACIONES EN ÓRBITA · el negocio al centro y sus herramientas girando
========================================================================== */
.conexiones { display: grid; gap: 36px; align-items: center; margin-top: clamp(56px, 7vw, 100px); }
@media (min-width: 960px) { .conexiones { grid-template-columns: 0.85fr 1.15fr; gap: 40px; } }
.conexiones-frase {
font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; letter-spacing: -0.04em;
font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; max-width: 12ch;
}
.conexiones-frase .cursiva { color: var(--menta-texto); }
.orbita { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }
.orbita-centro {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
width: 28cqw; aspect-ratio: 1; border-radius: 50%; background: var(--menta); color: var(--sobre-color);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 15px; text-align: center;
}
.orbita-centro .ph { font-size: 34px; }
.orbita-onda {
position: absolute; left: 50%; top: 50%; width: 28cqw; aspect-ratio: 1; border-radius: 50%;
border: 2px solid var(--menta); transform: translate(-50%, -50%); animation: onda-sale 3.2s ease-out infinite;
}
@keyframes onda-sale { to { width: 62cqw; opacity: 0; } }
.anillo { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed var(--borde-fuerte); transform: translate(-50%, -50%); }
.anillo-1 { width: 54cqw; aspect-ratio: 1; --r: 27cqw; animation: gira 48s linear infinite; }
.anillo-2 { width: 86cqw; aspect-ratio: 1; --r: 43cqw; animation: gira-al-reves 64s linear infinite; }
@keyframes gira { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gira-al-reves { to { transform: translate(-50%, -50%) rotate(-360deg); } }
.lugar { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1)); }
.herramienta {
position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; width: max-content;
display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px;
background: var(--blanco); border: 1px solid var(--borde-fuerte); font-size: 13.5px; font-weight: 600;
transition: background-color 0.3s ease, border-color 0.3s ease, scale 0.35s var(--rebote);
}
.herramienta img { width: 20px; height: 20px; filter: brightness(0); }
.anillo-1 .herramienta { animation: contra 48s linear infinite; }
.anillo-2 .herramienta { animation: contra-al-reves 64s linear infinite; }
@keyframes contra { to { rotate: -360deg; } }
@keyframes contra-al-reves { to { rotate: 360deg; } }
.orbita:hover .anillo, .orbita:hover .herramienta { animation-play-state: paused; }
.herramienta:hover { background: var(--menta); border-color: var(--menta); scale: 1.08; }
@media (prefers-reduced-motion: reduce) { .anillo, .herramienta, .orbita-onda { animation: none !important; } }
/* la laptop: sin quedarse pegada al bajar; el chat crece desde arriba y baja solo */
.conversacion-pista { height: auto; }
.conversacion-fija { position: static; height: auto; padding: clamp(40px, 6vw, 80px) 0; }
.app .app-avatar { color: #fff; font-size: 13px; }
.app .app-avatar.gris { color: transparent; }
.app-mensajes { justify-content: flex-start; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: none; }
.app-mensajes::-webkit-scrollbar { display: none; }
.conversacion-repetir { margin-top: 18px; }
.conversacion-repetir[hidden] { display: none; }
.nodo { cursor: default; }
/* la caja del chat tiene alto fijo y se desplaza sola hasta el último mensaje */
.app-chat { min-height: 0; overflow: hidden; }
.app-mensajes { min-height: 0; }
/* =============================================================================
PANEL DE CONTACTO · se abre desde cualquier botón "Contáctanos"
========================================================================== */
.contacto-fondo { position: fixed; inset: 0; z-index: 250; background: rgba(16, 16, 16, 0.45); opacity: 0; transition: opacity 0.35s ease; }
.contacto-panel {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 260; width: min(440px, 100%);
background: var(--hueso); border-left: 1px solid var(--borde-fuerte);
display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.5s var(--salida);
overflow-y: auto;
}
.contacto-abierto .contacto-fondo { opacity: 1; }
.contacto-abierto .contacto-panel { transform: none; }
.contacto-cabeza { padding: 28px 28px 22px; background: var(--c-inicio); color: var(--tinta); position: relative; }
.contacto-cabeza h2 { font-size: 40px; margin: 0 0 6px; }
.contacto-cabeza h2 .cursiva { color: var(--tinta); }
.contacto-cabeza p { font-size: 15.5px; color: rgba(16, 16, 16, 0.75); }
.contacto-cerrar {
position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
border: 1px solid rgba(16, 16, 16, 0.25); background: transparent; color: var(--tinta); font-size: 20px;
display: grid; place-items: center; cursor: pointer; transition: background-color 0.25s ease, transform 0.3s var(--rebote);
}
.contacto-cerrar:hover { background: var(--tinta); color: #fff; transform: rotate(90deg); }
.contacto-lista { list-style: none; display: grid; gap: 10px; padding: 22px 22px 28px; margin: 0; }
.canal {
display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radio);
background: var(--blanco); border: 1px solid var(--borde); color: var(--tinta); text-decoration: none;
transition: border-color 0.25s ease, transform 0.35s var(--salida), background-color 0.25s ease;
}
a.canal:hover { border-color: var(--tinta); transform: translateX(-4px); }
.canal-icono { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--color-canal, var(--hueso-2)); color: var(--tinta); }
.canal b { display: block; font-size: 16px; }
.canal small { display: block; font-size: 13px; color: var(--tinta-suave); }
.canal-ir { margin-left: auto; font-size: 18px; color: var(--tinta-suave); transition: transform 0.3s var(--salida); }
a.canal:hover .canal-ir { transform: translate(3px, -3px); color: var(--tinta); }
.canal.pronto { opacity: 0.6; }
.canal.pronto .canal-icono { background: var(--hueso-2); }
.canal-pronto { margin-left: auto; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--borde-fuerte); color: var(--tinta-suave); }
html.contacto-abierto, html.contacto-abierto body { overflow: hidden; }
.enlace-boton { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.enlace-boton:hover { color: var(--menta-texto); }
@media (prefers-reduced-motion: reduce) { .contacto-panel, .contacto-fondo { transition: none; } }
/* =============================================================================
CUATRO NIVELES DE WEB · de blanco a coral: el color y la altura dicen cuál da más
========================================================================== */
.planes { display: grid; gap: 16px; margin-top: 44px; align-items: end; }
@media (min-width: 720px) { .planes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .planes { grid-template-columns: repeat(4, 1fr); } }
.plan {
position: relative; display: flex; flex-direction: column; border-radius: 24px; padding: 26px 24px 24px;
border: 1px solid var(--borde); transition: transform 0.45s var(--salida);
}
.plan:hover { transform: translateY(-6px); }
@media (min-width: 1100px) {
.plan-a { min-height: 520px; } .plan-b { min-height: 560px; }
.plan-c { min-height: 600px; } .plan-d { min-height: 650px; }
}
.plan-a { background: var(--blanco); }
.plan-b { background: #E6E4DE; border-color: transparent; }
.plan-c { background: #1C1C1C; color: #fff; border-color: transparent; }
.plan-d { background: var(--c-servicios); color: var(--tinta); border: 2px solid var(--tinta); }
.plan-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.plan-icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--hueso); color: var(--tinta); }
.plan-b .plan-icono { background: var(--blanco); }
.plan-c .plan-icono { background: rgba(255, 255, 255, 0.1); color: var(--c-servicios); }
.plan-d .plan-icono { background: var(--tinta); color: var(--c-servicios); }
.plan-nivel { display: inline-flex; gap: 4px; align-items: flex-end; }
.plan-nivel i { width: 7px; border-radius: 3px; background: currentColor; opacity: 0.18; }
.plan-nivel i:nth-child(1) { height: 10px; } .plan-nivel i:nth-child(2) { height: 15px; }
.plan-nivel i:nth-child(3) { height: 20px; } .plan-nivel i:nth-child(4) { height: 25px; }
.plan-nivel i.lleno { opacity: 1; }
.plan-c .plan-nivel i.lleno { background: var(--c-servicios); }
.plan-lema { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-bottom: 6px; }
.plan-nombre { font-size: clamp(26px, 2.2vw, 32px); letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 10px; }
.plan-resumen { font-size: 15px; line-height: 1.5; opacity: 0.8; margin-bottom: 18px; }
.plan-previo { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.plan-c .plan-previo { color: var(--c-servicios); }
.plan-lista { list-style: none; display: grid; gap: 9px; margin: 0 0 26px; padding: 0; }
.plan-lista li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.plan-lista .ph { flex: none; margin-top: 2px; font-size: 15px; }
.plan-a .plan-lista .ph, .plan-b .plan-lista .ph { color: var(--c-servicios-texto); }
.plan-c .plan-lista .ph { color: var(--c-servicios); }
.plan-c .plan-lista li { color: rgba(255, 255, 255, 0.82); }
.plan-d .plan-lista .ph { color: var(--tinta); }
.plan-boton { margin-top: auto; align-self: flex-start; border: 1px solid var(--tinta); background: transparent; color: var(--tinta); }
.plan-boton:hover { background: var(--tinta); color: #fff; }
.plan-c .plan-boton { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.plan-c .plan-boton:hover { background: var(--c-servicios); border-color: var(--c-servicios); color: var(--tinta); }
.plan-d .plan-boton { background: var(--tinta); color: #fff; }
.plan-d .plan-boton:hover { background: #fff; color: var(--tinta); }
.plan-sello {
position: absolute; top: -13px; left: 24px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; background: var(--tinta); color: #fff;
padding: 6px 12px; border-radius: 999px;
}
/* textos de cada nivel con buen contraste sobre su fondo */
.plan .plan-resumen, .plan .plan-lema { opacity: 1; }
.plan-a .plan-resumen, .plan-b .plan-resumen { color: var(--tinta-media); }
.plan-a .plan-lema, .plan-b .plan-lema { color: var(--tinta-suave); }
.plan-c .plan-resumen { color: rgba(255, 255, 255, 0.78); }
.plan-c .plan-lema { color: rgba(255, 255, 255, 0.6); }
.plan-d .plan-resumen { color: rgba(16, 16, 16, 0.78); }
.plan-d .plan-lema { color: rgba(16, 16, 16, 0.65); }
/* ---------- dos columnas alineadas (30/09/2026): la caja de la derecha empieza a la
misma altura que las cajas de la izquierda, no a la altura del título ---------- */
.cuidado-grilla { row-gap: 0; }
.cuidado-grilla > .panel-app { margin-top: 36px; }
.metodo-grilla.cajas-alineadas { row-gap: 0; }
.metodo-grilla.cajas-alineadas > aside { margin-top: 42px; }
@media (min-width: 760px) {
.metodo-grilla.cajas-alineadas { grid-template-areas: "intro ." "pasos caja"; }
.metodo-grilla.cajas-alineadas > .metodo-intro { grid-area: intro; }
.metodo-grilla.cajas-alineadas > .pasos { grid-area: pasos; }
.metodo-grilla.cajas-alineadas > aside { grid-area: caja; margin-top: 0; }
}
@media (min-width: 960px) {
.cuidado-grilla { grid-template-areas: "intro ." "opciones panel"; align-items: start; }
.cuidado-grilla > .cuidado-intro { grid-area: intro; }
.cuidado-grilla > .cuidado-opciones { grid-area: opciones; }
.cuidado-grilla > .panel-app { grid-area: panel; margin-top: 30px; }
}
/* dos párrafos de entrada seguidos */
.entrada + .entrada { margin-top: 10px; }
/* ---------- nosotros: el equipo con filtro por área y tarjetas con más interfaz (30/09/2026).
La foto de cada socio se agrega cuando Juan Diego las pase (.socio-foto sigue arriba). ---------- */
.equipo-filtro { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.equipo-filtro button {
display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 9px 8px 16px; cursor: pointer;
border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); color: var(--tinta-media);
font-family: Inter, "Segoe UI", sans-serif; font-size: 14.5px; font-weight: 500;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.equipo-filtro button:hover { border-color: var(--tinta); color: var(--tinta); }
.equipo-filtro button span {
min-width: 25px; padding: 2px 7px; border-radius: 999px; text-align: center; background: var(--hueso-2); color: var(--tinta-media);
font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px;
}
.equipo-filtro button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.equipo-filtro button[aria-pressed="true"] span { background: var(--menta); color: var(--sobre-color); }
.socios { margin-top: 20px; }
.socio { display: flex; flex-direction: column; transition: opacity 0.35s ease, transform 0.5s var(--salida), border-color 0.3s ease; }
.socios.filtrando .socio:not(.coincide) { opacity: 0.35 !important; } /* la entrada deja opacity en línea */
.socios.filtrando .socio.coincide { border-color: var(--tinta); }
.socio-avatar {
width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 26px;
background: var(--menta); color: var(--sobre-color); font-size: 25px;
}
.socio-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; margin-bottom: 18px; }
.socio-chips span {
padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borde-fuerte); color: var(--tinta-media);
font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.socio-chips span.activa { background: var(--menta); border-color: var(--menta); color: var(--sobre-color); }
.socio-detalle li { display: flex; align-items: center; gap: 9px; }
.socio-detalle li .ph { flex: none; font-size: 15px; color: var(--menta-texto); }
.socio-pista { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borde); }
.socio:hover .socio-pista, .socio.abierto .socio-pista { opacity: 1; }
.socio-detalle + .socio-pista { margin-top: auto; }
.socio-pista .ph { font-size: 15px; color: var(--tinta); transition: transform 0.4s var(--salida); }
.socio:hover .socio-pista .ph, .socio.abierto .socio-pista .ph { transform: rotate(180deg); }
/* =============================================================================
Celular (30/09/2026): menú desplegable, vistas previas que se recorren con el
dedo, órbita solo con logos, tabla con la primera columna fija y toques cómodos.
========================================================================== */
.boton-menu, .menu-movil, .tabla-pista, .solo-tactil { display: none; }
/* pantallas táctiles: sin cursor, lo que se hacía pasando el mouse se hace con el dedo */
@media (hover: none) {
.solo-cursor { display: none; }
.solo-tactil { display: inline; }
.recorrido { overflow-y: auto; cursor: auto; scrollbar-width: none; }
.recorrido::-webkit-scrollbar { display: none; }
.recorrido img, .recorrido:hover img, .recorrido:focus-visible img { position: static; display: block; top: auto; transform: none; transition: none; }
}
@media (max-width: 759px) {
/* la barra: logo, Contáctanos y el botón del menú */
.nav-caja { gap: 10px; padding: 7px 7px 7px 14px; }
.nav-enlaces { gap: 8px; }
.boton-menu {
display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0;
border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--blanco);
color: var(--tinta); font-size: 20px; cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav.menu-abierto .boton-menu { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.menu-movil {
display: grid; gap: 2px; pointer-events: auto; max-width: var(--ancho); margin: 8px auto 0; padding: 8px;
background: var(--blanco); border: 1px solid var(--borde-fuerte); border-radius: 26px;
opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right;
transition: opacity 0.2s var(--salida), transform 0.2s var(--salida), visibility 0s linear 0.2s;
}
.nav.menu-abierto .menu-movil {
opacity: 1; visibility: visible; transform: none;
transition: opacity 0.2s var(--salida), transform 0.2s var(--salida), visibility 0s;
}
.menu-item {
display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: 18px;
font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--tinta);
}
.menu-item::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--menta); }
.menu-item[aria-current="page"] { background: var(--menta-tenue); }
.menu-item .ph { margin-left: auto; font-size: 18px; color: var(--tinta-suave); }
.menu-item:active { background: var(--hueso); }
/* la tabla comparativa: la primera columna queda fija y una pista avisa que se desliza */
.tabla-pista {
display: flex; align-items: center; gap: 8px; margin-top: 22px;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px; letter-spacing: 0.08em; color: var(--tinta-suave);
}
.tabla-pista .ph { font-size: 17px; }
.tabla-pista + .tabla-envoltura { margin-top: 10px !important; }
.tabla tbody th, .tabla thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--blanco); box-shadow: inset -1px 0 0 var(--borde); }
.tabla thead th:first-child { background: var(--hueso-2); }
/* la laptop de la conversación no se sale del ancho */
.laptop-base { width: 104%; margin-left: -2%; }
/* el pie: enlaces más altos, cómodos para el dedo */
.pie-grilla ul { gap: 0; }
.pie-grilla li a { display: inline-block; padding: 8px 0; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
.menu-movil, .nav.menu-abierto .menu-movil { transform: none; transition: opacity 0.15s ease, visibility 0s; }
}
/* la órbita de integraciones, cuando es angosta: solo los logos, en círculos, para que no se encimen */
@container (max-width: 480px) {
.herramienta { gap: 0; padding: 0; width: 44px; height: 44px; justify-content: center; font-size: 0; }
.herramienta img { width: 21px; height: 21px; }
}
/* =============================================================================
Ideas tomadas de fraxbit.com (30/09/2026), con la paleta y las reglas de CreaX:
etiqueta con un bloque del logo, botones con la flecha en un círculo, franja al
pie de la portada, servicios en filas grandes sobre una hoja oscura, palabras
que se encienden al bajar, muro de bocetos inclinado, tarjeta de proyecto que
arma el mensaje de WhatsApp y el logo gigante al pie de cada página.
========================================================================== */
/* la etiqueta de sección lleva un bloque, como los del logo */
.marca-seccion::before { width: 9px; height: 9px; border-radius: 3px; background: var(--menta); }
/* botón con la flecha en un círculo: al pasar el mouse, la flecha gira hacia adelante */
.boton-flecha { gap: 12px; padding-right: 6px; }
.boton-circulo {
display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: -6px 0; border-radius: 50%;
background: var(--tinta); color: var(--c-inicio); font-size: 16px;
transition: transform 0.45s var(--rebote), background-color 0.3s ease, color 0.3s ease;
}
.boton-oscuro .boton-circulo, .portada .boton-circulo { background: var(--c-inicio); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
.boton-flecha:hover .boton-circulo { transform: rotate(45deg); }
}
/* la franja al pie de la portada: las tres líneas de CreaX y la señal para bajar */
.portada-franja {
display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
margin-top: clamp(44px, 6vw, 80px); padding-top: 22px; border-top: 1px solid rgba(244, 244, 242, 0.14);
}
.franja-lineas {
display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none;
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; font-size: 11.5px;
letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 244, 242, 0.72);
}
.franja-lineas li { display: inline-flex; align-items: center; gap: 10px; }
.franja-lineas li::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--menta); }
.bajar {
display: inline-flex; flex-direction: column; align-items: center; gap: 10px; flex: none;
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; font-size: 10.5px;
letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 244, 242, 0.55);
}
.bajar i { position: relative; width: 1px; height: 40px; overflow: hidden; background: rgba(244, 244, 242, 0.2); }
.bajar i::after {
content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--c-inicio);
animation: bajar-linea 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bajar-linea { to { top: 100%; } }
/* una hoja oscura con las esquinas redondeadas, que corta el ritmo de la página */
.hoja-oscura { background: var(--tinta); color: var(--hueso); border-radius: clamp(28px, 4vw, 48px); }
.hoja-oscura h2 { color: var(--hueso); }
.hoja-oscura h2 .cursiva { color: var(--c-inicio); }
.hoja-oscura .entrada { color: rgba(244, 244, 242, 0.7); }
.hoja-oscura .marca-seccion { color: rgba(244, 244, 242, 0.62); }
/* los servicios en filas grandes: número, nombre, etiquetas y una flecha que invita a entrar */
.filas-cabeza { display: grid; gap: 8px 48px; align-items: end; margin-bottom: clamp(34px, 5vw, 64px); }
.filas-cabeza h2 { margin-bottom: 0; }
@media (min-width: 900px) {
.filas-cabeza { grid-template-columns: 1.35fr 0.65fr; }
.filas-cabeza .entrada { padding-bottom: 8px; }
}
.filas-servicios { list-style: none; border-top: 1px solid rgba(244, 244, 242, 0.14); }
.fila-servicio { border-bottom: 1px solid rgba(244, 244, 242, 0.14); }
.fila-servicio > a {
display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 16px 14px;
padding: clamp(22px, 3vw, 36px) 0; color: var(--hueso);
}
.fila-num {
align-self: start; padding-top: 0.9em; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 12px; letter-spacing: 0.1em; color: rgba(244, 244, 242, 0.58);
}
.fila-nombre {
display: block; font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700;
font-size: clamp(34px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.045em;
transition: transform 0.55s var(--salida), color 0.3s ease;
}
.fila-sub {
display: block; margin-top: 12px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--menta);
}
.fila-etiquetas { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.fila-etiquetas span {
padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(244, 244, 242, 0.16);
font-size: 13px; color: rgba(244, 244, 242, 0.76);
}
.fila-flecha {
grid-row: 1; grid-column: 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
border: 1px solid rgba(244, 244, 242, 0.24); font-size: 20px; color: var(--hueso);
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.45s var(--rebote);
}
@media (min-width: 900px) {
.fila-servicio > a { grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1fr) 56px; gap: 28px; }
.fila-etiquetas { grid-column: 3; }
.fila-flecha { grid-column: 4; }
}
@media (hover: hover) and (pointer: fine) {
.fila-servicio > a:hover .fila-nombre { transform: translateX(12px); color: var(--menta); }
.fila-servicio > a:hover .fila-flecha { background: var(--menta); border-color: var(--menta); color: var(--tinta); transform: rotate(45deg); }
}
.fila-servicio > a:focus-visible { outline: 2px solid var(--menta); outline-offset: 4px; border-radius: 12px; }
/* "qué construimos": una lista grande que se enciende palabra por palabra al bajar */
.construimos { margin-top: clamp(64px, 9vw, 120px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid rgba(244, 244, 242, 0.14); }
.construimos-lista {
font-family: "Space Grotesk", Inter, sans-serif; font-weight: 500;
font-size: clamp(30px, 4.8vw, 66px); line-height: 1.1; letter-spacing: -0.035em; color: var(--hueso);
}
.construimos-lista .sep {
display: inline-block; width: 0.26em; height: 0.26em; margin: 0 0.3em 0 0.34em; border-radius: 0.07em;
vertical-align: 0.2em; background: var(--c-inicio);
}
.construimos-lista .sep:nth-of-type(5n+1) { background: var(--c-servicios); }
.construimos-lista .sep:nth-of-type(5n+2) { background: var(--c-automatizaciones); }
.construimos-lista .sep:nth-of-type(5n+3) { background: var(--c-bocetos); }
.construimos-lista .sep:nth-of-type(5n+4) { background: var(--c-nosotros); }
[data-iluminar] .palabra { opacity: 0.5; transition: opacity 0.4s ease; } /* apagada, pero legible: texto grande sobre papel, 3,5:1 */
.hoja-oscura [data-iluminar] .palabra { opacity: 0.42; }
[data-iluminar] .palabra.encendida { opacity: 1; }
/* el muro de bocetos: los ejemplos, inclinados, moviéndose en columnas al bajar */
.muro { margin-top: clamp(14px, 2vw, 24px); background: var(--menta); color: var(--tinta); border-radius: clamp(28px, 4vw, 48px); overflow: hidden; }
.muro h2, .muro h2 .cursiva, .muro .marca-seccion { color: var(--tinta); }
.muro .marca-seccion::before { background: var(--tinta); }
.muro .entrada { color: var(--tinta); opacity: 0.8; max-width: 34ch; }
.muro-grilla { display: grid; gap: 28px; align-items: center; }
.muro-texto { position: relative; z-index: 2; }
@media (min-width: 960px) { .muro-grilla { grid-template-columns: 0.78fr 1.22fr; gap: 40px; } }
.muro-escena { position: relative; height: clamp(360px, 46vw, 600px); perspective: 1400px; }
.muro-plano {
position: absolute; top: -18%; left: -6%; width: 128%; height: 150%;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px);
transform: rotateX(24deg) rotateY(-10deg) rotateZ(-12deg); transform-origin: 50% 40%;
}
.muro-columna { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px); will-change: transform; }
.muro-columna:nth-child(2) { margin-top: -18%; }
.muro-columna img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--blanco); border: 1px solid rgba(16, 16, 16, 0.14); }
.muro-columna img.recorte { aspect-ratio: 390 / 620; object-fit: cover; object-position: top; }
/* el cierre: el texto a un lado y, al otro, la tarjeta que arma el mensaje de WhatsApp */
.cierre-doble { display: grid; gap: 30px; text-align: left; padding: clamp(24px, 4vw, 56px); }
@media (min-width: 960px) { .cierre-doble { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } }
.cierre-doble h2 { margin: 0 0 16px; max-width: 12ch; }
.cierre-doble .entrada { margin: 0; max-width: 34ch; }
.cierre-doble .marca-seccion { color: var(--sobre-color); }
.cierre-doble .marca-seccion::before { background: var(--tinta); }
.cierre-canales { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: 26px; }
.cierre-canales a {
display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
border: 1px solid rgba(16, 16, 16, 0.28); font-weight: 600; color: var(--tinta);
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) { .cierre-canales a:hover { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); } }
.proyecto {
position: relative; display: grid; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: 26px;
background: var(--blanco); color: var(--tinta); text-align: left;
}
.proyecto h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; }
.proyecto-nota { margin-top: -8px; font-size: 14px; color: var(--tinta-suave); }
.proyecto-etiqueta {
margin-top: 6px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave);
}
.proyecto-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-proyecto {
padding: 9px 15px; border-radius: 999px; border: 1px solid var(--borde-fuerte); background: var(--blanco);
font: inherit; font-size: 14px; font-weight: 500; color: var(--tinta); cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.chip-proyecto[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
@media (hover: hover) and (pointer: fine) { .chip-proyecto:hover { border-color: var(--tinta); } }
.proyecto-campos { display: grid; gap: 14px; margin-top: 4px; }
@media (min-width: 560px) { .proyecto-campos { grid-template-columns: 1fr 1fr; } }
.proyecto label { display: block; }
.proyecto label > span { display: block; margin-bottom: 2px; font-size: 12.5px; color: var(--tinta-suave); }
.proyecto input, .proyecto textarea {
display: block; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--borde-fuerte); border-radius: 0;
background: transparent; font: inherit; font-size: 16px; color: var(--tinta); resize: vertical;
}
.proyecto input:focus, .proyecto textarea:focus { outline: none; border-bottom-color: var(--tinta); }
.proyecto-aviso { font-size: 13.5px; font-weight: 600; color: var(--c-servicios-texto); }
.proyecto .boton { justify-self: start; margin-top: 4px; }
/* el pie: volver arriba y el logo gigante, en un tono apenas más oscuro que el fondo */
.volver-arriba { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-media); }
@media (hover: hover) and (pointer: fine) { .volver-arriba:hover { color: var(--tinta); } }
.pie-gigante {
margin-top: clamp(28px, 4vw, 48px); width: 100%; aspect-ratio: 253 / 53.6; background: rgba(16, 16, 16, 0.07);
-webkit-mask: url("assets/creax-logo-silueta.svg") center / contain no-repeat;
mask: url("assets/creax-logo-silueta.svg") center / contain no-repeat;
}
@media (max-width: 759px) {
.bajar { display: none; }
.fila-flecha { width: 44px; height: 44px; font-size: 18px; }
.fila-etiquetas span { font-size: 12.5px; padding: 6px 11px; }
.muro-escena { height: 340px; }
.muro-plano { width: 150%; left: -12%; }
}
@media (prefers-reduced-motion: reduce) {
.bajar i::after { animation: none; top: 30%; }
.fila-nombre, .fila-flecha, .boton-circulo { transition: none; }
}
/* =============================================================================
Páginas legales (privacidad y términos) y aviso de cookies (30/09/2026)
========================================================================== */
.legal { padding-top: clamp(28px, 4vw, 48px); }
.legal-grilla { display: grid; gap: 32px; }
.legal-indice { display: none; }
@media (min-width: 960px) {
.legal-grilla { grid-template-columns: 230px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal-indice { display: grid; gap: 2px; position: sticky; top: 110px; font-size: 14px; }
.legal-indice a { padding: 6px 0 6px 14px; border-left: 2px solid var(--borde); color: var(--tinta-media); transition: color 0.2s ease, border-color 0.2s ease; }
.legal-indice a:hover { color: var(--tinta); border-left-color: var(--menta); }
}
.legal-texto { max-width: 68ch; }
.legal-fecha {
margin-bottom: 28px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12px;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave);
}
.legal-texto h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.025em; margin: 44px 0 14px; scroll-margin-top: 110px; }
.legal-texto h2:first-of-type { margin-top: 0; }
.legal-texto p, .legal-texto li { font-size: 16.5px; line-height: 1.65; color: var(--tinta-media); }
.legal-texto p + p { margin-top: 12px; }
.legal-texto ul { display: grid; gap: 10px; margin: 12px 0 0 1.1em; }
.legal-texto strong { color: var(--tinta); font-weight: 600; }
.legal-texto code { padding: 2px 7px; border-radius: 6px; background: var(--hueso-2); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.88em; color: var(--tinta); }
/* el aviso de cookies: una tarjeta oscura abajo, que no tapa la página */
.aviso-cookies {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; max-width: 440px; margin-left: auto;
display: grid; gap: 10px; padding: 18px 20px 20px; border-radius: 22px;
background: var(--tinta); color: var(--hueso); border: 1px solid rgba(244, 244, 242, 0.12);
opacity: 0; transform: translateY(14px); transition: opacity 0.3s var(--salida), transform 0.3s var(--salida);
}
.aviso-cookies.visible { opacity: 1; transform: none; }
.aviso-titulo {
display: inline-flex; align-items: center; gap: 9px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-inicio);
}
.aviso-titulo::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c-inicio); }
.aviso-texto { font-size: 14px; line-height: 1.55; color: rgba(244, 244, 242, 0.82); }
.aviso-texto a { color: var(--hueso); text-decoration: underline; text-underline-offset: 3px; }
.aviso-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.aviso-cookies .boton-oscuro { background: var(--c-inicio); color: var(--tinta); }
.aviso-cookies .boton-secundario { background: transparent; color: var(--hueso); border-color: rgba(244, 244, 242, 0.3); }
@media (prefers-reduced-motion: reduce) { .aviso-cookies { transform: none; transition: opacity 0.2s ease; } }
/* los titulares del encabezado se ven desde el primer momento (velocidad percibida); solo se deslizan un poco */
.con-js .encabezado .revelar { opacity: 1; }
/* =============================================================================
Formulario del proyecto: errores por campo y trampa para robots (30/09/2026)
========================================================================== */
.campo-error { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--c-servicios-texto); }
.proyecto [aria-invalid="true"] { border-bottom-color: var(--c-servicios-texto); }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.proyecto .boton[disabled] { opacity: 0.6; cursor: default; }
/* =============================================================================
Celular, segunda vuelta (30/09/2026): la portada y el aviso, más compactos
========================================================================== */
@media (max-width: 759px) {
.resultados.resultados-simples { grid-template-columns: 1fr 1fr; gap: 12px; }
.resultados-simples .tarjeta { padding: 18px 16px; }
.resultados-simples .icono { display: none; }
.resultados-simples .resultado-num { font-size: 38px; margin-bottom: 10px; }
.resultados-simples h3 { font-size: 17px; }
.resultados-simples p { font-size: 14px; }
.fono { zoom: 0.86; }
.aviso-cookies { left: 10px; right: 10px; bottom: 10px; gap: 8px; padding: 14px 16px 16px; }
.aviso-texto { font-size: 13px; }
}
/* la página 404: accesos a las secciones, con el bloque de color de cada una */
.enlaces-404 { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: 22px; }
.enlaces-404 a {
display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px;
background: var(--blanco); border: 1px solid var(--borde-fuerte); font-weight: 600; color: var(--tinta);
}
.enlaces-404 a::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--menta); }
/* =============================================================================
Portada más limpia (30/09/2026): el navegador y el teléfono con aire entre sí,
sin tarjetas ni insignias flotando encima; las tres tarjetas, en fila debajo.
========================================================================== */
.datos-sueltos .dato { box-shadow: none; background: #191919; border-color: rgba(244, 244, 242, 0.1); }
.datos-sueltos .dato .ph { color: var(--c-inicio); }
@media (min-width: 900px) {
.escena-grande { padding: 0; }
.ventana { width: calc(100% - 226px); }
.fono { top: 56px; right: 0; bottom: auto; width: 256px; }
.datos-sueltos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; max-width: calc(100% - 226px); }
.datos-sueltos .dato { padding: 16px 18px; }
}
/* las filas de servicios: el nombre tiene su columna y no se mete bajo las etiquetas */
.fila-nombre { font-size: clamp(32px, 4.2vw, 58px); overflow-wrap: anywhere; }
@media (min-width: 900px) {
.fila-servicio > a { grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1fr) 56px; }
}
/* =============================================================================
CABECERAS VIVAS (30/09/2026) · Servicios, Automatizaciones, Bocetos y Nosotros
El ícono gigante y desteñido de fondo se cambió por un dibujo de tamaño medio,
hecho con el mismo trazo del flujo de Automatizaciones: anillos, trazo grueso
y bloques planos. No llama la atención por grande sino porque está vivo: se
arma al entrar y después explica la página en un bucle corto (animacion.js, 17).
Sin movimiento (o con ?estatico) queda quieto en un cuadro que se entiende solo.
========================================================================== */
.encabezado-vivo { padding-bottom: clamp(48px, 6vw, 92px); }
.encabezado-grilla { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) {
.encabezado-grilla { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(32px, 4.5vw, 76px); }
}
.encabezado-vivo h1 { font-size: clamp(46px, 6.1vw, 100px); }
.encabezado-vivo h1.titulo-gigante { font-size: clamp(56px, 8.2vw, 124px) !important; max-width: none; }
.encabezado-vivo .entrada strong { font-weight: 600; }
/* la etiqueta de la sección, en una píldora de tinta con el bloque del color del sector */
.encabezado.encabezado-vivo .marca-seccion {
background: var(--tinta); color: var(--hueso); padding: 8px 14px 8px 11px; border-radius: 999px;
}
.encabezado.encabezado-vivo .marca-seccion::before { background: var(--menta); }
/* la palabra clave del título va en un bloque de tinta, con la letra del color del sector.
El bloque y la letra de color son dos capas encima de la palabra: al entrar, las dos
se descubren de izquierda a derecha, así nunca queda letra de color sobre su mismo color */
.resalte {
position: relative; display: inline-block; white-space: nowrap; isolation: isolate;
padding: 0.02em 0.16em 0.1em 0.12em; margin-right: 0.04em; line-height: 1.02;
}
.encabezado h1 .resalte { color: var(--tinta); }
.encabezado-vivo h1 .resalte { margin-top: 0.05em; }
.encabezado-vivo h1.titulo-gigante .resalte { margin-top: 0.16em; }
.resalte::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--tinta); border-radius: 0.14em;
}
.resalte::after {
content: attr(data-texto); content: attr(data-texto) / "";
position: absolute; inset: 0; padding: inherit; color: var(--menta); white-space: nowrap;
}
.con-movimiento .resalte::before,
.con-movimiento .resalte::after { clip-path: inset(0 100% 0 0); }
.con-movimiento .resalte.barrido::before,
.con-movimiento .resalte.barrido::after { animation: resalte-barre 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.15s both; }
@keyframes resalte-barre {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
/* ---------- el dibujo ---------- */
.dibujo { margin: 0; width: min(100%, 400px); justify-self: center; }
@media (min-width: 900px) { .dibujo { justify-self: end; } }
.dibujo svg { display: block; width: 100%; height: auto; overflow: visible; }
.dibujo svg * { transform-box: fill-box; transform-origin: center; }
/* lo que trae su propio transform en el SVG (el flujo escalado, la tarjeta girada) gira y escala como siempre */
.dibujo svg [transform] { transform-box: view-box; transform-origin: 0 0; }
/* lo que entra al cargar espera escondido; si no hay movimiento, se ve tal cual */
.con-movimiento .dibujo [data-entra],
.con-movimiento .dibujo .d-nivel > *,
.con-movimiento .dibujo .d-estilo > *,
.con-movimiento .dibujo .d-adorno > *,
.con-movimiento .dibujo .d-luz { opacity: 0; }
.d-marco { fill: var(--hueso); stroke: var(--tinta); stroke-width: 10; }
.d-marco-fino { stroke-width: 7; }
.d-linea { fill: none; stroke: var(--tinta); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.d-tinta { fill: var(--tinta); }
.d-gris { fill: var(--tinta); fill-opacity: 0.24; }
.d-color { fill: var(--menta); }
.d-papel { fill: var(--hueso); }
.d-blanco { fill: var(--blanco); }
.d-borde { stroke: var(--tinta); stroke-width: 4; }
.d-borde-fino { stroke: var(--tinta); stroke-width: 2.5; }
.d-anillo-chico { fill: none; stroke: var(--tinta); stroke-width: 9; }
.d-icono {
font-family: "Phosphor"; font-size: 26px; fill: var(--hueso);
text-anchor: middle; dominant-baseline: central;
}
.d-icono-oscuro { fill: var(--tinta); }
/* Automatizaciones: el flujo (dibujado en unidades de 24, por eso los trazos son finos en número) */
.d-cable, .d-anillo { fill: none; stroke: var(--tinta); stroke-width: 1.2632; stroke-linecap: round; }
.d-ruta { fill: none; stroke: none; }
.d-luz { fill: var(--hueso); }
.d-onda { fill: none; stroke: var(--tinta); stroke-width: 0.2; opacity: 0; }
.d-senal, .d-senal-grande { fill: var(--hueso); }
.d-icono-aviso { font-size: 21px; }
/* Bocetos: el trazo a lápiz y el sello que gira */
.d-trazo { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d-sello-anillo { fill: none; stroke: var(--hueso); stroke-width: 2.5; stroke-dasharray: 3 3.6; }
.d-muestra { fill: var(--tinta); text-anchor: middle; dominant-baseline: central; }
.d-muestra-1 { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 48px; }
.d-muestra-2 { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 500; font-size: 36px; letter-spacing: -0.03em; }
.d-muestra-3 { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; font-size: 40px; }
.d-icono-rubro { font-size: 30px; }
.con-movimiento .d-sello-anillo { animation: sello-gira 10s linear infinite; }
@keyframes sello-gira { to { transform: rotate(360deg); } }
/* Nosotros: los cuatro socios son los cuatro bloques del logo, unidos al de tinta del centro */
.d-radio { fill: none; stroke: var(--tinta); stroke-width: 12; stroke-linecap: round; }
.d-hueco { fill: var(--menta); }
.d-cuadro { fill: none; stroke: var(--tinta); stroke-width: 12; }
.d-onda-cuadro { fill: none; stroke: var(--tinta); stroke-width: 3; opacity: 0; }
.d-luz-1 { fill: var(--c-servicios); }
.d-luz-2 { fill: var(--c-automatizaciones); }
.d-luz-3 { fill: var(--c-bocetos); }
.d-luz-4 { fill: var(--c-inicio); }
.d-icono-socio { font-size: 34px; }
/* la leyenda: qué está pasando en el dibujo, con un bloque por paso */
.dibujo-pie {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
width: min(100%, 340px); margin: 16px auto 0; padding: 9px 12px 9px 16px; border-radius: 999px;
background: var(--tinta); color: var(--hueso);
font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.dibujo-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dibujo-pasos { display: inline-flex; gap: 5px; flex: none; }
.dibujo-pasos i { width: 9px; height: 9px; border-radius: 3px; background: rgba(244, 244, 242, 0.22); transition: background-color 0.3s ease; }
.dibujo-pasos i.activo { background: var(--menta); }
[data-dibujo="nosotros"] .dibujo-pasos i.activo:nth-child(1) { background: var(--c-servicios); }
[data-dibujo="nosotros"] .dibujo-pasos i.activo:nth-child(2) { background: var(--c-automatizaciones); }
[data-dibujo="nosotros"] .dibujo-pasos i.activo:nth-child(3) { background: var(--c-bocetos); }
[data-dibujo="nosotros"] .dibujo-pasos i.activo:nth-child(4) { background: var(--c-inicio); }
@media (max-width: 899px) {
.dibujo { width: min(100%, 340px); }
}
/* =============================================================================
CELULAR, TERCERA PASADA (30/09/2026)
- Portada: el teléfono va chico y encima del lado derecho de la ventana, como en
computadora; ya no cuelga largo por debajo dejando un hueco al costado.
- Automatizaciones: la pantalla de la laptop vuelve a ser apaisada.
- Bocetos: los celulares tienen barra de estado; la isla vive ahí y no tapa la página.
========================================================================== */
.chat-listo span { display: block; line-height: 1.35; }
@media (max-width: 899px) {
.escena-grande { display: grid; }
.escena-grande > .ventana, .escena-grande > .fono { grid-area: 1 / 1; }
.escena-grande > .ventana { align-self: start; } /* la ventana no se estira para alcanzar al teléfono */
.escena-grande > .datos-sueltos { grid-area: 2 / 1; }
/* el zoom también escala los márgenes del teléfono: por eso van divididos por el zoom */
.fono { --zoom-fono: 0.8; zoom: var(--zoom-fono); width: 228px; justify-self: end; align-self: start;
margin: calc(64px / var(--zoom-fono)) calc(14px / var(--zoom-fono)) 0 0; }
}
@media (max-width: 599px) {
.fono { --zoom-fono: 0.58; margin: calc(54px / var(--zoom-fono)) calc(10px / var(--zoom-fono)) 0 0; }
.fono [data-campo="eleccion"] { display: none; } /* una burbuja menos: el teléfono queda proporcionado */
}
@media (max-width: 700px) {
.laptop-pantalla { padding: 16px 9px 9px; border-radius: 14px 14px 6px 6px; }
.laptop-pantalla::before { top: 6px; width: 5px; height: 5px; }
.app { height: 62vw; font-size: 12px; }
.app-cabecera { gap: 8px; padding: 8px 12px; }
.app-cabecera .app-avatar { width: 26px; height: 26px; font-size: 11px; }
.app-cabecera b { font-size: 12px; }
.app-cabecera .app-asistente { gap: 5px; padding: 4px 9px; font-size: 10.5px; }
.app-mensajes { gap: 7px; padding: 10px 12px; }
.msj { max-width: 84%; padding: 8px 11px; font-size: 12px; }
.msj.sistema { font-size: 11px; }
.msj-opciones span, .msj-enlace { font-size: 11px; }
.app-escribir { margin: 0 10px 10px; padding: 7px 12px; font-size: 11.5px; }
}
/* la barra de estado del celular: hora a la izquierda, señal, wifi y batería a la derecha */
.celular-estado {
position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
height: 30px; padding: 0 18px 0 24px; background: #0f1418; color: #fff;
font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
}
.celular-iconos { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; }
.celular-marco::before { top: 5px; width: 74px; height: 20px; background: #000; outline: 1px solid rgba(255, 255, 255, 0.08); } /* la isla, apenas visible sobre la barra */
.celular-marco .recorrido { border-radius: 0 0 37px 37px; }