/* ==========================================================
Alium — estilos
Colores y tipografía en variables (:root) para ajustarlos fácil.
========================================================== */
:root {
/* Paleta del Manual de marca AliumAnalytics (v1.0, oct 2026) */
--noche: #020134; /* Noche Alium — superficie principal */
--profundo: #0d1695; /* Azul profundo — final del degradado */
--azul: #125fff; /* Azul Alium — acción principal, enlaces, estados activos */
--grad: linear-gradient(90deg, var(--noche), var(--profundo));
/* Superficies: tintes de Noche Alium (sin azules nuevos) */
--bg: var(--noche);
--bg-deep: color-mix(in srgb, var(--noche) 70%, #000);
--card: color-mix(in srgb, var(--noche) 93%, #fff);
--card-2: color-mix(in srgb, var(--noche) 88%, #fff);
--card-3: color-mix(in srgb, var(--noche) 78%, #fff);
--line: rgba(229, 231, 235, 0.1);
--line-2: rgba(229, 231, 235, 0.2);
/* Neutros del manual (grises con leve tono azul) */
--text: #f3f4f6; /* gris 100 */
--text-2: #d1d5db; /* gris 300 */
--muted: #9ca3af; /* gris 400 */
--muted-2: #6b7280; /* gris 500 */
--accent: var(--azul);
--accent-2: color-mix(in srgb, var(--azul) 82%, var(--profundo)); /* hover */
/* Azul Alium aclarado para texto pequeño sobre fondo noche (contraste AA) */
--accent-ink: color-mix(in srgb, var(--azul) 62%, #fff);
--r: 8px;
--r-sm: 8px;
--gap: 4px;
--pad: 24px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 17px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
input,
textarea {
font: inherit;
color: inherit;
}
img {
display: block;
max-width: 100%;
}
svg {
display: block;
}
ul {
list-style: none;
}
::selection {
background: var(--accent);
color: #fff;
}
.accent {
color: var(--accent);
}
.wrap {
width: 100%;
padding: 0 var(--pad);
}
.card {
background: var(--card);
border-radius: var(--r);
position: relative;
overflow: hidden;
}
.ico {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---------- Botones ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
height: 58px;
padding: 0 22px;
background: var(--accent);
color: #fff;
border-radius: var(--r-sm);
font-size: 17px;
font-weight: 500;
white-space: nowrap;
transition:
background 0.3s,
transform 0.3s var(--ease);
}
.btn:hover {
background: var(--accent-2);
}
.btn:active {
transform: scale(0.97);
}
.btn .ico {
width: 22px;
height: 22px;
}
.sq {
width: 60px;
height: 60px;
flex: none;
border-radius: var(--r-sm);
display: grid;
place-items: center;
/* botón secundario del manual: contorno Azul Alium; el sólido queda
para la acción principal (.btn) */
background: color-mix(in srgb, var(--noche) 72%, transparent);
box-shadow: inset 0 0 0 1px var(--accent);
color: #fff;
transition:
background 0.3s,
transform 0.3s var(--ease);
}
.sq .ico {
width: 22px;
height: 22px;
transition: transform 0.5s var(--ease);
}
.sq:hover,
a:hover > .sq,
.card:hover .sq {
background: var(--accent);
}
.sq:hover .ico,
a:hover > .sq .ico,
.card:hover .sq .ico {
transform: translateX(3px);
}
.arrows {
display: flex;
gap: 28px;
color: var(--accent);
}
.arrows button {
padding: 4px;
transition: transform 0.3s var(--ease);
}
.arrows button:hover {
transform: translateX(var(--dx, 0));
}
.arrows button:first-child {
--dx: -4px;
}
.arrows button:last-child {
--dx: 4px;
}
.arrows .ico {
width: 34px;
height: 34px;
stroke-width: 1.4;
}
.dots-ico {
width: 22px;
height: 22px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.dots-ico i {
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
}
/* Indicador de píldoras (stepper) */
.pills {
display: flex;
gap: 4px;
align-items: center;
}
.pills i {
width: 10px;
height: 10px;
border-radius: 6px;
background: var(--card-3);
transition:
width 0.5s var(--ease),
background 0.4s;
}
.pills i.on {
width: 40px;
background: var(--accent);
}
/* ==========================================================
NAV
========================================================== */
.progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 100%;
background: var(--accent);
transform-origin: 0 50%;
transform: scaleX(0);
z-index: 60;
opacity: 0.8;
}
.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px var(--pad);
pointer-events: none;
}
.topbar > * {
pointer-events: auto;
}
.logo {
display: block;
line-height: 0;
}
/* logo oficial (símbolo + AliumAnalytics), proporción 596×295 */
.logo img {
display: block;
height: 52px;
width: auto;
}
/* Menú — ícono de tres barras (la de abajo corta); en hover se invierten */
.menu-btn {
width: 40px;
height: 40px;
display: grid;
place-items: center;
position: relative;
z-index: 70;
}
.menu-btn .bars {
position: relative;
width: 32px;
height: 13px;
}
.menu-btn .bars i {
position: absolute;
left: 0;
height: 3px;
background: var(--accent);
transition:
width 0.4s var(--ease),
top 0.4s var(--ease),
transform 0.4s var(--ease),
background-color 0.3s;
}
.menu-btn .bars i:nth-child(1) {
top: 0;
width: 32px;
}
.menu-btn .bars i:nth-child(2) {
top: 5px;
width: 32px;
}
.menu-btn .bars i:nth-child(3) {
top: 10px;
width: 14px;
}
.menu-btn:hover .bars i:nth-child(1),
.menu-btn:hover .bars i:nth-child(2) {
width: 14px;
}
.menu-btn:hover .bars i:nth-child(3) {
width: 32px;
}
body.menu-open .menu-btn .bars i {
background: #fff;
}
body.menu-open .menu-btn .bars i:nth-child(1) {
top: 5px;
width: 32px;
transform: rotate(45deg);
}
body.menu-open .menu-btn .bars i:nth-child(2) {
width: 0;
left: 16px;
}
body.menu-open .menu-btn .bars i:nth-child(3) {
top: 5px;
width: 32px;
transform: rotate(-45deg);
}
/* Menú — panel azul a la derecha que baja desde arriba */
.overlay-menu {
position: fixed;
inset: 0;
z-index: 45;
visibility: hidden;
transition: visibility 0s 0.6s;
}
body.menu-open .overlay-menu {
visibility: visible;
transition: none;
}
body.menu-open {
overflow: hidden;
}
.menu-backdrop {
position: absolute;
inset: 0;
}
.menu-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(400px, 100%);
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 82px var(--pad) 24px;
background: var(--accent);
color: #fff;
overflow-y: auto;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.6s var(--ease);
}
body.menu-open .menu-panel {
clip-path: inset(0 0 0 0);
}
/* logo en blanco, a la altura del logo de la barra superior */
.menu-logo {
position: absolute;
top: 18px;
left: var(--pad);
height: 52px;
width: auto;
filter: brightness(0) invert(1);
}
@media (max-width: 560px) {
body.menu-open .topbar .logo {
opacity: 0;
}
}
.menu-main {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.mlink {
font-size: 35px;
font-weight: 500;
line-height: 42px;
color: #fff;
text-align: right;
white-space: nowrap;
}
/* en hover las letras se oscurecen una tras otra (el delay lo pone main.js) */
.mlink .ch {
transition: color 0.25s;
}
.mlink:hover .ch,
.mlink:focus-visible .ch {
color: var(--noche);
}
.menu-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 12px 14px 12px 16px;
border-radius: var(--r-sm, 8px);
background: var(--noche);
color: #fff;
font-size: 16px;
font-weight: 500;
transition: background-color 0.3s;
}
.menu-cta .ico {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
transition: transform 0.3s var(--ease);
}
.menu-cta:hover {
background: #000;
}
.menu-cta:hover .ico {
transform: translateX(3px);
}
/* el contenido entra en cascada después de que baja el panel */
.menu-panel > *,
.menu-main .mlink {
opacity: 0;
transform: translateY(-12px);
transition:
opacity 0.4s var(--ease),
transform 0.4s var(--ease);
}
.menu-main {
opacity: 1;
transform: none;
}
body.menu-open .menu-panel > *,
body.menu-open .menu-main .mlink {
opacity: 1;
transform: none;
transition-delay: calc(0.12s + var(--i, 0) * 0.03s);
}
.menu-cta {
--i: 12;
}
@media (max-width: 560px) {
.menu-panel {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.menu-panel {
clip-path: none;
opacity: 0;
transition: opacity 0.2s;
}
body.menu-open .menu-panel {
opacity: 1;
}
.mlink .ch {
transition-delay: 0s !important;
}
}
/* ==========================================================
REVEAL de texto y bloques
========================================================== */
.reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.9s var(--ease),
transform 0.9s var(--ease);
}
.reveal.in {
opacity: 1;
transform: none;
}
/* ==========================================================
PIXEL REVEAL — la imagen aparece cuadro a cuadro
Uso:
========================================================== */
.px {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--card);
}
.px .px-img {
position: absolute;
inset: 0;
background: var(--img) center/cover no-repeat;
filter: grayscale(1) contrast(1.05);
transition:
transform 1.2s var(--ease),
opacity 0.6s;
}
.px .px-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(var(--cols, 10), 70px);
grid-auto-rows: 70px;
pointer-events: none;
}
.px .px-grid i {
background: var(--cell, var(--card));
}
.px.go .px-grid i {
animation: pxOut 0.7s steps(3, end) forwards;
animation-delay: var(--d);
}
.px.done .px-grid {
display: none;
}
@keyframes pxOut {
0% {
opacity: 1;
background: var(--cell, var(--card));
}
45% {
opacity: 1;
background: #9ca3af;
}
70% {
opacity: 0.5;
background: #4b5563;
}
100% {
opacity: 0;
}
}
.card:hover .px .px-img {
transform: scale(1.04);
}
/* sombra superior para que el texto sobre imagen se lea */
.wcard .px::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 45%);
pointer-events: none;
}
/* ==========================================================
ESPACIO — fondo de galaxia compartido por hero y manifiesto
========================================================== */
.space {
position: relative;
background: var(--bg-deep);
}
/* capa absoluta a todo el alto + hijo sticky: el fondo acompaña el scroll
y se detiene al final del manifiesto (también en Safari) */
.space-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.space-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
/* brillo central en azul profundo que se funde con la noche */
background: radial-gradient(
ellipse 50% 56% at 50% 50%,
color-mix(in srgb, var(--profundo) 55%, var(--noche)) 0%,
color-mix(in srgb, var(--profundo) 22%, var(--noche)) 34%,
var(--noche) 68%,
var(--bg-deep) 100%
);
}
.space-sticky canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.9;
}
/* ==========================================================
HERO
========================================================== */
.hero {
position: relative;
z-index: 1;
min-height: 100vh;
min-height: 100svh;
}
.hero-inner {
display: grid;
grid-template-columns: 278px 1fr 278px;
padding: 205px var(--pad) 80px;
min-height: 100vh;
min-height: 100svh;
align-content: start;
}
/* máscara: el contenido entra deslizándose desde la izquierda */
.mk {
display: block;
overflow: hidden;
}
.mk > * {
display: block;
transform: translateX(-102%);
transition: transform 1.1s var(--ease);
}
.hero.in .mk > * {
transform: none;
}
.tagline {
border-left: 1px solid var(--line-2);
padding-left: 15px;
font-size: 21px;
line-height: 1.4;
color: var(--text);
align-self: start;
}
.tagline b {
font-weight: 600;
}
.hero.in .tagline .mk:nth-child(2) > * {
transition-delay: 0.08s;
}
.hero-main {
display: flex;
flex-direction: column;
min-width: 0;
}
.hero-title {
font-size: clamp(50px, 6.95vw, 124px);
line-height: 0.9;
font-weight: 500;
color: var(--text);
white-space: nowrap;
opacity: 0;
transform: translateY(70px);
transition:
opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1) 0.15s,
transform 1.3s var(--ease) 0.15s;
}
.hero.in .hero-title {
opacity: 1;
transform: none;
}
.hero-title .dash {
display: inline-block;
width: 1em;
height: 0.06em;
background: currentColor;
vertical-align: 0.27em;
margin-right: 0.16em;
}
.hero-title .accent {
color: var(--accent);
}
.demo {
display: flex;
align-items: center;
gap: 24px;
margin-top: 38px;
}
.demo .demo-title {
font-size: 27px;
font-weight: 500;
line-height: 1.2;
}
.demo p {
color: var(--text-2);
font-size: 17px;
margin-top: 8px;
line-height: 1.3;
}
.hero.in .demo .demo-title > * {
transition-delay: 0.25s;
}
.hero.in .demo p > * {
transition-delay: 0.4s;
transition-duration: 1.4s;
}
.demo hr {
width: 80px;
border: 0;
border-top: 1px solid var(--line-2);
transform: scaleX(0);
transform-origin: left;
transition: transform 1s var(--ease) 0.5s;
}
.hero.in .demo hr {
transform: none;
}
.demo .btn {
height: 58px;
padding: 0 18px;
font-size: 17px;
gap: 10px;
opacity: 0;
transform: translateX(28px);
transition:
opacity 0.8s 0.45s,
transform 1.2s var(--ease) 0.45s,
background 0.3s;
}
.demo .btn .ico {
width: 22px;
height: 22px;
stroke-width: 1.5;
}
.hero.in .demo .btn {
opacity: 1;
transform: none;
}
.hero-stats {
display: flex;
gap: 66px;
margin-top: 52px;
}
.hstat {
display: flex;
align-items: center;
gap: 16px;
}
.hstat-num {
display: flex;
align-items: flex-start;
font-size: 40px;
line-height: 1;
color: var(--accent);
padding: 8px 16px 8px 0;
border-right: 1px solid var(--line-2);
}
.hstat-num small {
font-size: 17px;
margin-left: 2px;
line-height: 1;
}
.hstat-txt b {
font-weight: 400;
font-size: 21px;
line-height: 1.35;
}
.hstat-txt > .mk:last-child {
color: var(--text-2);
font-size: 17px;
}
.hstat-txt .mk > * {
transform: translateY(105%);
}
.hero.in .hstat-txt .mk > * {
transform: none;
transition-delay: 0.55s;
}
.hero.in .hstat:nth-child(2) .hstat-txt .mk > * {
transition-delay: 0.65s;
}
/* odómetro: cada dígito es una tira 0-9 que rueda hasta su valor */
.odo {
display: inline-flex;
overflow: hidden;
height: 1em;
}
.odo-d {
display: block;
height: 1em;
overflow: hidden;
}
.odo-d > span {
display: block;
transform: translateY(0);
transition: transform var(--t, 1.8s) cubic-bezier(0.16, 1, 0.3, 1)
var(--dl, 0s);
}
.odo-d > span > i {
display: block;
height: 1em;
font-style: normal;
text-align: center;
}
.release {
align-self: start;
display: flex;
flex-direction: column;
gap: 4px;
opacity: 0;
transform: translateY(24px);
transition:
opacity 1s 0.9s,
transform 1.2s var(--ease) 0.9s;
}
.hero.in .release {
opacity: 1;
transform: none;
}
.release-media {
position: relative;
height: 157px;
border-radius: var(--r-sm);
overflow: hidden;
background: radial-gradient(
ellipse 60% 70% at 50% 100%,
var(--azul) 0%,
var(--profundo) 30%,
var(--noche) 70%
);
}
.release-media canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.release-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--card-2) 75%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background 0.3s;
}
.release:hover .release-bar {
background: color-mix(in srgb, var(--card-3) 90%, transparent);
}
.release b {
display: block;
font-weight: 400;
font-size: 17px;
}
.release span {
font-size: 15px;
color: var(--text-2);
}
.release em {
color: var(--accent-ink);
font-style: normal;
}
.release .ico {
width: 34px;
height: 34px;
color: var(--accent);
stroke-width: 1.4;
transition: transform 0.4s var(--ease);
}
.release:hover .ico {
transform: translateX(4px);
}
/* ==========================================================
MANIFIESTO — letras que se encienden + cubos con parallax
========================================================== */
.manifest {
position: relative;
z-index: 1;
min-height: 120vh;
padding: 29vh var(--pad) 30vh 7.6vw;
}
.plus-grid {
position: absolute;
inset: 0;
pointer-events: none;
}
.plus-grid i {
position: absolute;
width: 11px;
height: 11px;
margin: -5px 0 0 -5px;
opacity: 0.45;
}
.plus-grid i::before,
.plus-grid i::after {
content: "";
position: absolute;
background: var(--text);
}
.plus-grid i::before {
left: 5px;
top: 0;
width: 1px;
height: 11px;
}
.plus-grid i::after {
top: 5px;
left: 0;
height: 1px;
width: 11px;
}
.manifest-body {
position: relative;
font-size: clamp(44px, 8.33vw, 150px);
}
.manifest p {
position: relative;
max-width: 10.4em;
font-size: 1em;
line-height: 1.1;
font-weight: 500;
color: var(--text);
}
.manifest .wd {
display: inline-block;
white-space: nowrap;
}
.manifest .ch {
display: inline-block;
opacity: 0.1;
transition: opacity 0.45s;
}
.manifest .ch.on {
opacity: 1;
}
.cubes {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.cube {
position: absolute;
max-width: none;
height: auto; /* el CSS fija solo el ancho; sin esto, el atributo height estira la imagen */
will-change: transform;
}
.cube.c1 {
left: 6.65em;
top: 6.35em;
width: 1.25em;
filter: blur(4px);
}
.cube.c2 {
left: 7.5em;
top: 4.75em;
width: 2.35em;
}
.cube.c3 {
left: 8.85em;
top: 5.7em;
width: 1.62em;
}
.cube.c4 {
left: 10.05em;
top: 5.75em;
width: 0.95em;
filter: blur(7px);
}
/* ==========================================================
SECCIONES — cabecera tipo referencia
========================================================== */
/* ritmo de la plantilla: 300px entre el cierre de una sección y el título
de la siguiente (20 del .status + 100 abajo + 180 arriba) */
.section {
padding: 180px 0 100px;
}
.big-title {
font-size: clamp(64px, 7vw, 112px);
line-height: 0.9;
font-weight: 500;
color: var(--muted);
margin-bottom: 100px;
}
.sec-row {
display: grid;
grid-template-columns: 212px 1fr 212px;
gap: 24px;
margin-bottom: 160px;
align-items: start;
}
.sec-tag {
border-left: 1px solid var(--accent);
padding-left: 16px;
}
.sec-tag b {
display: block;
font-weight: 400;
font-size: 30px;
line-height: 1.1;
color: var(--text);
}
.sec-tag span {
color: var(--muted);
font-size: 18px;
}
.sec-lead {
font-size: clamp(32px, 3.4vw, 52px);
line-height: 1.04;
color: var(--text-2);
max-width: 700px;
}
.sec-note {
color: var(--muted);
font-size: 17px;
line-height: 1.4;
}
/* Enlace de estado al final de cada sección */
.status {
display: flex;
align-items: center;
justify-content: space-between;
padding: 72px 24px 20px;
}
.ind {
display: flex;
gap: 3px;
}
.ind i {
width: 6px;
height: 16px;
border-radius: 2px;
background: var(--card-2);
}
.ind i.on {
background: var(--accent);
opacity: 0.7;
}
.status-cta {
display: flex;
align-items: center;
gap: 24px;
font-size: 20px;
color: var(--text-2);
}
/* ==========================================================
001 — TRABAJO
========================================================== */
.work {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
}
.wcard {
min-height: 380px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 32px;
}
.wcard > *:not(.px) {
position: relative;
z-index: 2;
}
.wcard .wc-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.wcard h3 {
font-size: 30px;
font-weight: 400;
line-height: 1.1;
color: #fff;
}
.wcard .eyebrow {
display: block;
font-size: 20px;
color: #fff;
margin-bottom: 8px;
}
.wcard .dots-ico {
color: #fff;
opacity: 0.85;
}
.w-featured {
grid-column: span 2;
min-height: 764px;
}
.w-featured h3 {
font-size: 38px;
}
.w-lineup {
background: var(--grad);
box-shadow: inset 0 0 0 1px var(--line-2);
color: #fff;
padding: 40px 42px;
}
.lu-head {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.lu-head .pl {
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.7);
}
.lu-head em {
font-style: italic;
}
.w-lineup h3 {
font-size: clamp(36px, 3.2vw, 48px);
line-height: 1.06;
margin-top: 40px;
font-weight: 400;
}
.w-lineup p {
font-size: 20px;
line-height: 1.4;
margin-top: 40px;
max-width: 400px;
}
.blink-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
row-gap: 40px;
margin-top: 60px;
justify-items: center;
}
.blink-grid i {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transition: background 0.4s;
}
.blink-grid i.on {
background: #fff;
}
.lu-foot {
display: flex;
align-items: center;
gap: 10px;
margin-top: 40px;
font-size: 19px;
}
.toggle-ico {
width: 24px;
height: 14px;
border: 1.5px solid #fff;
border-radius: 8px;
position: relative;
}
.toggle-ico::after {
content: "";
position: absolute;
left: 2px;
top: 2px;
width: 7px;
height: 7px;
border-radius: 50%;
border: 1.5px solid #fff;
}
.chip {
display: inline-block;
align-self: flex-start;
padding: 4px 8px;
border-radius: 6px;
background: var(--card-3);
font-size: 13px;
color: var(--text);
}
/* ==========================================================
002 — SERVICIOS (acordeón horizontal)
========================================================== */
.services {
display: flex;
gap: var(--gap);
height: 800px;
}
.svc {
flex: 1 1 0;
min-width: 0;
background: var(--card);
border-radius: var(--r);
padding: 32px;
display: flex;
flex-direction: column;
cursor: pointer;
transition:
flex-grow 0.8s var(--ease),
background 0.5s;
overflow: hidden;
position: relative;
}
.svc.open {
flex-grow: 2.6;
background: var(--grad);
box-shadow: inset 0 0 0 1px var(--line-2);
cursor: default;
}
.svc-num {
display: flex;
align-items: center;
gap: 10px;
font-size: 44px;
color: var(--muted);
padding-bottom: 12px;
border-bottom: 1px solid var(--line-2);
width: max-content;
min-width: 88px;
transition:
color 0.4s,
font-size 0.6s var(--ease);
}
.svc-num .ico {
width: 32px;
height: 32px;
stroke-width: 1.4;
transition: transform 0.6s var(--ease);
}
.svc.open .svc-num {
color: rgba(255, 255, 255, 0.7);
font-size: 72px;
border-color: rgba(255, 255, 255, 0.4);
}
.svc.open .svc-num .ico {
transform: rotate(-135deg);
color: #fff;
}
.svc-body {
opacity: 0;
max-height: 0;
transition: opacity 0.2s;
overflow: hidden;
width: 100%;
min-width: 300px;
}
.svc.open .svc-body {
opacity: 1;
max-height: 600px;
transition: opacity 0.6s 0.35s;
}
.svc-body h4 {
font-size: 28px;
font-weight: 400;
color: #fff;
margin-top: 28px;
}
.svc-body p {
color: #fff;
font-size: 16px;
line-height: 1.4;
margin-top: 10px;
}
.svc-img {
position: relative;
height: 300px;
border-radius: var(--r-sm);
overflow: hidden;
margin-top: 32px;
}
.svc-foot {
margin-top: auto;
color: var(--text-2);
font-size: 20px;
}
.svc-foot .ico {
width: 34px;
height: 34px;
margin-bottom: 14px;
color: #fff;
display: none;
}
.svc.open .svc-foot {
color: #fff;
}
.svc.open .svc-foot .ico {
display: block;
}
.svc:not(.open):hover {
background: var(--card-2);
}
.svc-summary {
flex: 0 0 28%;
background: var(--card);
border-radius: var(--r);
padding: 40px 32px;
display: flex;
flex-direction: column;
}
.svc-summary .lu-head {
color: var(--text-2);
}
.svc-summary .lu-head .pl {
background: var(--line-2);
}
.svc-summary h3 {
font-size: clamp(36px, 3.2vw, 48px);
line-height: 1.06;
color: var(--text-2);
margin-top: 40px;
font-weight: 400;
}
.svc-summary p {
color: var(--muted);
font-size: 17px;
margin-top: 36px;
}
/* con cuatro servicios la tarjeta abierta queda angosta en escritorios pequeños */
@media (max-width: 1400px) {
.svc-summary {
flex-basis: 26%;
}
.svc-body {
min-width: 250px;
}
}
.diag-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
row-gap: 42px;
margin-top: auto;
justify-items: center;
padding: 0 0 50px;
}
.diag-grid i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--muted-2);
transition: background 0.4s;
}
.diag-grid i.on {
background: var(--accent);
}
.sum-foot {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-2);
font-size: 17px;
}
.sum-foot .dots-ico {
color: var(--accent);
width: 16px;
height: 22px;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
/* ==========================================================
003 — PROCESO
========================================================== */
.process {
display: grid;
grid-template-columns: 1fr 1.5fr 0.5fr;
grid-template-rows: 200px 608px;
gap: var(--gap);
}
.proc-img {
grid-row: span 2;
}
.proc-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 52px;
}
.proc-head span {
font-size: 28px;
color: var(--muted);
}
.proc-arrows {
display: grid;
place-items: center;
}
.proc-card {
padding: 52px;
display: flex;
flex-direction: column;
}
.proc-card h4 {
font-size: 34px;
font-weight: 400;
color: var(--text-2);
}
.proc-card p {
font-size: 22px;
line-height: 1.5;
color: var(--muted);
margin-top: 24px;
max-width: 620px;
}
.proc-card .pc-num {
margin-top: auto;
font-size: 46px;
color: var(--muted);
}
.proc-card .pc-num small {
font-size: 0.38em;
vertical-align: 1.4em;
margin-left: 4px;
}
.proc-card .fade {
transition:
opacity 0.35s,
transform 0.35s var(--ease);
}
.proc-card.swap .fade {
opacity: 0;
transform: translateY(8px);
}
.proc-cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
padding: 24px;
text-align: center;
}
.proc-cta p {
color: var(--muted);
font-size: 15px;
max-width: 180px;
}
.proc-cta .btn {
height: 58px;
padding: 0 18px;
font-size: 16px;
}
/* ==========================================================
004 — ANALÍTICA (bento)
========================================================== */
/* Dónde ganas tiempo (004) */
.gains {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
margin-bottom: var(--gap);
}
.gain {
padding: 32px;
display: flex;
flex-direction: column;
gap: 14px;
}
.gain-tag {
align-self: flex-start;
font-size: 13px;
color: var(--accent-ink);
padding: 4px 10px;
border: 1px solid color-mix(in srgb, var(--azul) 60%, transparent);
border-radius: 999px;
}
.gain h4 {
font-size: 24px;
font-weight: 400;
line-height: 1.12;
color: var(--text);
margin-top: 10px;
}
.gain p {
color: var(--muted);
font-size: 15px;
line-height: 1.45;
}
@media (max-width: 1200px) {
.gains {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.gains {
grid-template-columns: 1fr;
}
.gain {
padding: 24px;
}
}
.bento {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: var(--gap);
}
.b {
padding: 32px;
display: flex;
flex-direction: column;
min-height: 300px;
}
.b-ai {
grid-column: span 9;
min-height: 500px;
}
.b-ai .px.real .px-img {
background-position: center;
}
.b-ai .px::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(2, 1, 52, 0.9),
rgba(2, 1, 52, 0) 40%
);
}
.b-ai h4 {
position: relative;
z-index: 2;
font-size: 24px;
font-weight: 400;
}
.b-health {
grid-column: span 6;
align-items: center;
text-align: center;
}
.b-clocks {
grid-column: span 9;
}
.b-uptime {
grid-column: span 6;
min-height: 500px;
}
.b-perf {
grid-column: span 6;
align-items: center;
text-align: center;
}
.b-evo {
grid-column: span 9;
}
.b-side {
grid-column: span 3;
display: grid;
grid-template-rows: 1fr 1fr;
gap: var(--gap);
}
.b-side .card {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.b h5 {
font-size: 28px;
font-weight: 400;
color: var(--text-2);
}
.b .sub {
font-size: 15px;
color: var(--text-2);
margin-top: 4px;
}
.donut {
width: 190px;
height: 190px;
margin: 36px auto 10px;
transform: rotate(-90deg);
}
.donut circle {
fill: none;
stroke-width: 44;
}
.donut .s1 {
stroke: var(--accent);
}
.donut .s2 {
stroke: var(--muted-2);
}
.donut .s3 {
stroke: var(--text);
}
.donut .seg {
transition: stroke-dasharray 1.6s var(--ease);
}
.clocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
text-align: center;
height: 100%;
}
.clock-col b {
display: block;
font-weight: 400;
font-size: 21px;
color: var(--text-2);
}
.clock-col > span {
font-size: 12px;
color: var(--muted);
}
.clock {
width: 122px;
height: 122px;
border-radius: 50%;
background: var(--card-2);
margin: 20px auto 18px;
position: relative;
}
.clock i {
position: absolute;
left: 50%;
top: 50%;
width: 2px;
border-radius: 2px;
transform-origin: 50% 100%;
background: var(--text);
}
.clock .h {
height: 30px;
margin: -30px 0 0 -1px;
}
.clock .m {
height: 44px;
margin: -44px 0 0 -1px;
}
.clock .s {
height: 48px;
width: 1px;
margin: -48px 0 0 0;
background: var(--accent);
}
.sig-dots {
display: flex;
justify-content: center;
gap: 4px;
}
.sig-dots i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.sig-dots i.off {
background: var(--muted-2);
}
.sig-dots.hollow i {
background: none;
border: 1.4px solid var(--accent);
}
.clock-col em {
display: block;
font-style: normal;
font-size: 21px;
color: var(--text-2);
margin-top: 10px;
}
.clock-col small {
font-size: 13px;
color: var(--muted);
}
.up-bars {
display: flex;
gap: 3px;
align-items: flex-end;
height: 100px;
}
.up-bars i {
flex: 1;
background: var(--accent);
border-radius: 1px;
height: var(--h);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.6s var(--ease);
transition-delay: var(--d);
}
.up-bars i.off {
background: var(--card-3);
}
.in .up-bars i {
transform: none;
}
.b-uptime .cap {
font-size: 18px;
color: var(--text-2);
margin-top: 18px;
}
.b-uptime .big {
margin-top: auto;
font-size: clamp(64px, 6vw, 90px);
line-height: 1;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.b-uptime .big small {
font-size: 0.4em;
vertical-align: 1.1em;
}
.b-uptime .lbl {
font-size: 22px;
color: var(--text-2);
margin-top: 6px;
}
.perf-chart {
width: 100%;
max-width: 260px;
margin: 22px auto 0;
overflow: visible;
}
.perf-chart text {
font-size: 7px;
fill: var(--text-2);
font-family: var(--font);
}
.perf-chart .grid line {
stroke: var(--line);
stroke-width: 0.6;
}
.perf-chart path {
fill: none;
stroke-width: 3.2;
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
transition: stroke-dashoffset 2.2s var(--ease);
}
.perf-chart .p1 {
stroke: var(--accent);
}
.perf-chart .p2 {
stroke: var(--text);
transition-delay: 0.25s;
}
.in .perf-chart path {
stroke-dashoffset: 0;
}
.perf-chart circle {
opacity: 0;
transition: opacity 0.4s 2s;
}
.in .perf-chart circle {
opacity: 1;
}
.perf-legend {
display: flex;
gap: 40px;
justify-content: center;
margin-top: 18px;
}
.perf-legend b {
display: block;
font-weight: 400;
font-size: 28px;
color: var(--text);
}
.perf-legend div:last-child b {
color: var(--muted);
}
.perf-legend div > span {
color: var(--text-2);
font-size: 15px;
}
.perf-legend i {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
margin: 10px auto 0;
}
.perf-legend div:last-child i {
background: var(--muted);
}
.evo-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.evo-score {
text-align: left;
font-size: 14px;
color: var(--text-2);
}
.evo-score b {
display: block;
font-weight: 400;
font-size: 40px;
color: var(--muted);
line-height: 1;
}
.evo-score b em {
color: var(--accent-ink);
font-style: normal;
}
.evo-bars {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
margin-top: 26px;
flex: 1;
min-height: 260px;
}
.evo-bar {
display: flex;
flex-direction: column;
text-align: center;
}
.evo-bar .track {
flex: 1;
background: var(--card-2);
border-radius: 8px;
position: relative;
overflow: hidden;
}
.evo-bar .fill {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--v);
background: var(--accent);
border-radius: 8px;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 1.2s var(--ease);
transition-delay: var(--d);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 12px;
font-size: 22px;
color: #fff;
}
.in .evo-bar .fill {
transform: none;
}
.evo-bar > span {
font-size: 13px;
color: var(--text-2);
margin-top: 12px;
}
.chip.light {
background: var(--card-3);
color: var(--text);
}
.battery {
width: 36px;
height: 58px;
border: 2px solid var(--card-3);
border-radius: 5px;
margin: 22px auto 0;
padding: 3px;
display: flex;
flex-direction: column-reverse;
gap: 2px;
position: relative;
}
.battery::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
width: 12px;
height: 4px;
margin-left: -6px;
border-radius: 2px 2px 0 0;
background: var(--card-3);
}
.battery i {
flex: 1;
background: var(--accent);
border-radius: 1px;
opacity: 0;
transition: opacity 0.3s;
transition-delay: var(--d);
}
.in .battery i {
opacity: 1;
}
.bat-num {
font-size: 36px;
color: var(--text-2);
margin-top: 22px;
}
.partner-ico {
width: 46px;
height: 46px;
margin-top: 20px;
color: var(--text-2);
}
.news {
display: flex;
align-items: center;
gap: 60px;
margin-top: var(--gap);
padding: 28px 40px;
overflow: hidden;
}
.news > span {
color: var(--muted);
font-size: 22px;
white-space: nowrap;
flex: none;
}
.news-mask {
flex: 1;
overflow: hidden;
mask-image: linear-gradient(
90deg,
transparent,
#000 8%,
#000 92%,
transparent
);
-webkit-mask-image: linear-gradient(
90deg,
transparent,
#000 8%,
#000 92%,
transparent
);
}
.news-track {
display: flex;
gap: 90px;
width: max-content;
animation: marquee 30s linear infinite;
}
.news-track span {
font-size: 24px;
color: var(--text-2);
white-space: nowrap;
}
.news-track span em {
font-style: normal;
color: var(--muted);
}
@keyframes marquee {
to {
transform: translateX(-50%);
}
}
/* ==========================================================
ANIMACIÓN DE GIRO
========================================================== */
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ==========================================================
ÍCONOS DE CONTACTO (WhatsApp, correo)
========================================================== */
.soc-ico {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ==========================================================
FRANJA DE MARCA — seis filas que avanzan hacia la izquierda,
cada una a su velocidad (data-speed en px/s, movidas en main.js)
========================================================== */
.brand-band {
background: var(--grad);
box-shadow: inset 0 0 0 1px var(--line-2);
overflow: hidden;
padding: 72px 0 76px;
margin-top: 160px;
color: var(--text);
}
.bb-row {
overflow: hidden;
/* bordes difuminados */
mask-image: linear-gradient(
90deg,
transparent,
#000 8%,
#000 92%,
transparent
);
-webkit-mask-image: linear-gradient(
90deg,
transparent,
#000 8%,
#000 92%,
transparent
);
}
.bb-row + .bb-row {
margin-top: 44px;
}
.bb-track {
display: flex;
width: max-content;
will-change: transform;
}
.bb-track > * {
flex: none;
white-space: nowrap;
}
.bb-wm {
display: inline-flex;
align-items: flex-start;
padding-right: 9vw;
font-weight: 400;
line-height: 0.85;
}
.bb-wm sup {
font-size: 0.16em;
margin-top: 0.12em;
letter-spacing: 0;
}
.bb-s {
font-size: clamp(48px, 5.6vw, 96px);
}
.bb-m {
font-size: clamp(80px, 11vw, 190px);
}
.bb-l {
font-size: clamp(130px, 19.5vw, 340px);
}
.bb-tag {
padding-right: 80px;
font-size: 21px;
color: #fff;
}
.bb-tag em {
font-style: italic;
}
/* ==========================================================
FOOTER
========================================================== */
.footer {
position: relative;
background: var(--bg-deep);
padding: 4px var(--pad);
}
.f-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--gap);
}
.f-grid .card {
padding: 32px;
}
.f-talk {
grid-column: span 12;
display: grid;
place-items: center;
padding: 20px 0 0 !important;
overflow: hidden;
}
.f-talk h2 {
font-size: clamp(90px, 17vw, 260px);
font-weight: 500;
color: var(--accent);
line-height: 0.85;
/* aparece subiendo 30px con un fundido al entrar en pantalla */
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.9s var(--ease),
transform 1.1s var(--ease);
}
.f-talk h2.in {
opacity: 1;
transform: none;
}
/* Efecto cortina: la parte de contacto se queda fija arriba y el resto
del footer sube por encima. --stick-top lo calcula main.js para que,
si el bloque es más alto que la pantalla, se fije por su borde inferior. */
.f-stick {
position: sticky;
top: var(--stick-top, 0px);
z-index: 0;
}
.f-over {
position: relative;
z-index: 1;
margin-top: var(--gap);
background: var(--bg-deep);
box-shadow: 0 -40px 60px -20px rgba(0, 0, 0, 0.5);
}
/* wordmark del footer: escala 0.9 → 1 y fundido ligados al scroll */
.f-brand [data-wm] {
transform: scale(calc(0.9 + 0.1 * var(--p, 1)));
opacity: var(--p, 1);
transform-origin: 50% 60%;
}
.f-follow {
grid-column: span 7;
display: flex;
align-items: center;
justify-content: space-between;
}
.f-follow h4,
.f-offer h4 {
font-size: 30px;
font-weight: 400;
color: var(--text-2);
}
.f-icons {
display: flex;
gap: 26px;
}
.f-icons a {
color: var(--text);
transition: color 0.3s;
}
.f-icons a:hover {
color: var(--accent);
}
.f-form {
grid-column: span 5;
grid-row: span 3;
display: grid;
gap: var(--gap);
align-content: start;
background: none !important;
padding: 0 !important;
}
.f-form .card {
padding: 26px 24px;
}
.f-form h4 {
font-size: 28px;
font-weight: 400;
color: var(--text-2);
}
.f-form p {
font-size: 15px;
color: var(--muted);
margin-top: 4px;
}
.field {
width: 100%;
height: 60px;
border: 0;
outline: 0;
border-radius: var(--r);
background: var(--card-2);
padding: 0 24px;
font-size: 20px;
color: var(--text);
transition: box-shadow 0.3s;
}
.field::placeholder {
color: var(--muted);
}
.field:focus {
box-shadow: inset 0 0 0 1px var(--accent);
}
textarea.field {
height: 200px;
padding-top: 18px;
resize: none;
}
.f-form .btn {
justify-content: center;
width: 100%;
}
.f-offer {
grid-column: span 7;
}
.f-offer ul {
list-style: disc;
padding-left: 20px;
margin-top: 24px;
color: var(--text-2);
font-size: 16px;
line-height: 1.6;
}
.f-quote {
grid-column: span 7;
display: flex;
align-items: flex-end;
}
.f-quote p {
font-size: 22px;
color: var(--text-2);
line-height: 1.3;
}
.f-badge {
grid-column: span 4;
display: flex;
flex-direction: column;
justify-content: center;
gap: 30px;
min-height: 420px;
padding: 32px 56px !important;
}
.ring-wrap {
position: relative;
width: 120px;
height: 120px;
}
.ring-wrap svg {
width: 120px;
height: 120px;
animation: spin 16s linear infinite;
}
.ring-wrap svg text {
font-size: 11.5px;
fill: var(--text-2);
font-family: var(--font);
}
.ring-wrap::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
margin: -22px;
border-radius: 50%;
background: var(--accent);
}
.f-badge p {
border-left: 1px solid var(--line-2);
padding-left: 24px;
font-size: 27px;
line-height: 1.22;
color: var(--text-2);
}
.f-brand {
grid-column: span 8;
min-height: 420px;
padding: 40px !important;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.f-brand canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.f-brand > *:not(canvas) {
position: relative;
z-index: 1;
}
.f-brand .mail {
align-self: flex-end;
font-size: 19px;
color: #fff;
}
.f-brand .wm {
display: flex;
align-items: flex-start;
color: var(--accent);
font-size: clamp(40px, 10vw, 210px);
white-space: nowrap;
line-height: 0.8;
opacity: 0.95;
}
.f-brand .wm sup {
font-size: 0.11em;
margin-top: 0.3em;
letter-spacing: 0;
}
.f-brand address {
font-style: normal;
font-size: 16px;
color: var(--text-2);
line-height: 1.6;
}
.f-brand address b {
font-weight: 600;
}
.f-links {
grid-column: span 7;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 32px 60px !important;
}
.f-links .mini-pills {
display: flex;
gap: 2px;
margin-bottom: 18px;
}
.f-links .mini-pills i {
width: 6px;
height: 6px;
border-radius: 3px;
background: var(--card-3);
}
.f-links .mini-pills i.on {
width: 20px;
background: var(--accent);
}
.f-links nav {
display: grid;
gap: 6px;
align-content: start;
}
.f-links a {
font-size: 20px;
color: var(--text-2);
width: max-content;
transition: color 0.3s;
}
.f-links a:hover {
color: var(--accent-ink);
}
.f-news {
grid-column: span 5;
padding: 40px 48px !important;
}
.f-news .f-wa {
margin-top: 6px;
}
.f-news .f-wa .ico {
fill: none;
stroke: currentColor;
}
.f-news h4 {
font-size: 30px;
font-weight: 400;
color: var(--text-2);
}
.f-news > p {
font-size: 16px;
color: var(--muted);
margin: 10px 0 30px;
}
.f-news form {
display: grid;
grid-template-columns: 1fr 64px;
gap: var(--gap);
}
.f-news form .field:first-child {
grid-column: span 2;
}
.f-news .sq {
width: 64px;
height: 60px;
}
.f-news small {
display: block;
margin-top: 30px;
font-size: 16px;
color: var(--text);
padding-left: 8px;
}
.f-news small a {
color: var(--accent-ink);
}
.f-copy,
.f-legal,
.f-soc,
.f-up {
grid-column: span 3;
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.f-copy {
font-size: 15px;
color: var(--text-2);
gap: 8px;
}
.f-logo {
height: 30px;
width: auto;
opacity: 0.45;
}
.f-copy small {
font-size: 13px;
color: var(--text);
font-weight: 600;
}
.f-legal {
font-size: 13px;
color: var(--muted);
text-align: left;
align-items: flex-start;
padding: 24px 32px !important;
line-height: 1.5;
}
.f-legal b {
color: var(--text-2);
}
.f-soc {
flex-direction: row;
gap: 30px;
}
.f-soc a {
color: var(--text);
transition: color 0.3s;
}
.f-soc a:hover {
color: var(--accent);
}
.f-up {
color: var(--accent);
}
.f-up .ico {
width: 44px;
height: 44px;
stroke-width: 1.4;
transition: transform 0.4s var(--ease);
}
.f-up:hover .ico {
transform: translateY(-6px);
}
.f-end {
height: 4px;
}
/* ==========================================================
SUBPÁGINAS
========================================================== */
.page-top {
padding-top: 160px;
}
.page-top .big-title {
margin-bottom: 100px;
}
/* Servicios */
.svc-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding: 52px 32px 32px;
}
.svc-intro h2 {
font-size: clamp(44px, 4.4vw, 66px);
line-height: 1.05;
font-weight: 400;
color: var(--text);
}
.svc-intro p {
font-size: 20px;
line-height: 1.5;
color: var(--text-2);
margin-top: 60px;
max-width: 620px;
}
/* imagen de marca de la página Productos: centrada, no anclada a la izquierda */
.svc-intro .px.real .px-img {
background-position: center;
}
.svc-intro .img {
position: relative;
height: 440px;
border-radius: var(--r-sm);
overflow: hidden;
}
.svc-intro .sum-foot {
grid-column: 2;
justify-content: flex-end;
font-size: 24px;
margin-top: -30px;
}
.svc-detail {
display: grid;
grid-template-columns: 588px 1fr auto;
gap: 60px;
padding: 32px 24px;
margin-top: var(--gap);
}
.svc-detail .img {
position: relative;
height: 476px;
border-radius: var(--r-sm);
overflow: hidden;
}
.svc-detail h3 {
font-size: 48px;
font-weight: 400;
color: var(--text-2);
}
.svc-detail .lead {
font-size: 28px;
line-height: 1.2;
color: var(--muted);
margin-top: 18px;
max-width: 590px;
}
.svc-detail p {
font-size: 16px;
line-height: 1.4;
color: var(--muted);
margin-top: 28px;
max-width: 590px;
}
.svc-detail .side {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
}
.svc-detail .num {
display: flex;
align-items: center;
gap: 14px;
font-size: 48px;
color: var(--muted);
padding-bottom: 12px;
border-bottom: 1px solid var(--line-2);
}
.svc-detail .num .ico {
width: 36px;
height: 36px;
color: var(--accent);
stroke-width: 1.4;
}
.svc-detail .tag {
display: flex;
align-items: center;
gap: 12px;
font-size: 17px;
color: var(--text-2);
}
.svc-detail .tag .ico {
color: var(--accent);
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 1200px) {
.hero-inner {
grid-template-columns: 1fr 278px;
gap: 40px 24px;
padding-top: 140px;
}
.tagline {
grid-column: 1 / -1;
}
.hero-title {
font-size: clamp(44px, 7.6vw, 100px);
}
.services {
height: auto;
flex-wrap: wrap;
}
.svc {
flex-basis: 140px;
min-height: 520px;
}
.svc.open {
flex-basis: 100%;
order: -1;
}
.svc-summary {
flex-basis: 100%;
min-height: 560px;
}
.bento {
grid-template-columns: repeat(12, 1fr);
}
.b-ai,
.b-clocks,
.b-evo {
grid-column: span 12;
}
.b-health,
.b-uptime,
.b-perf {
grid-column: span 6;
}
.b-side {
grid-column: span 6;
}
.svc-detail {
grid-template-columns: 1fr;
}
.svc-detail .side {
flex-direction: row;
align-items: center;
}
.footer {
padding: 4px var(--pad);
}
}
@media (max-width: 900px) {
:root {
--pad: 16px;
}
.section {
padding-top: 120px;
}
.big-title {
margin-bottom: 50px;
}
.sec-row {
grid-template-columns: 1fr;
margin-bottom: 60px;
}
.work {
grid-template-columns: 1fr;
}
.w-featured {
grid-column: auto;
min-height: 460px;
}
.process {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.proc-img {
grid-row: auto;
grid-column: auto;
min-height: 380px;
}
.proc-head {
min-height: 100px;
padding: 0 24px;
}
.proc-card {
padding: 32px 24px;
min-height: 360px;
grid-column: auto;
grid-row: auto;
}
.b-health,
.b-uptime,
.b-perf,
.b-side {
grid-column: span 12;
}
.clocks {
grid-template-columns: 1fr 1fr 1fr;
}
.clock {
width: 84px;
height: 84px;
}
.f-grid > * {
grid-column: span 12 !important;
}
.f-follow {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.f-links {
padding: 32px !important;
}
.f-badge {
padding: 32px !important;
min-height: 0;
}
.hero-inner {
grid-template-columns: 1fr;
padding-top: 120px;
}
.hero-title {
font-size: clamp(40px, 11vw, 90px);
white-space: normal;
}
.hero-title br {
display: none;
}
.demo {
flex-wrap: wrap;
}
.demo hr {
display: none;
}
.hero-stats {
gap: 30px;
flex-wrap: wrap;
}
.release {
max-width: 360px;
}
.manifest {
padding-left: var(--pad);
min-height: 0;
padding-bottom: 50vw;
}
.manifest-body {
font-size: clamp(40px, 11vw, 90px);
}
.cube.c1 {
left: 1.2em;
top: auto;
bottom: -3.6em;
}
.cube.c2 {
left: 2.2em;
top: auto;
bottom: -4.4em;
}
.cube.c3 {
left: 4.2em;
top: auto;
bottom: -3.2em;
}
.cube.c4 {
left: 5.6em;
top: auto;
bottom: -2.6em;
}
.svc-intro {
grid-template-columns: 1fr;
}
.svc-intro .sum-foot {
grid-column: auto;
margin: 0;
}
.status {
padding: 48px 0 20px;
}
.status-cta {
font-size: 17px;
gap: 14px;
}
}
@media (max-width: 560px) {
.ind {
display: none;
}
.status {
justify-content: flex-end;
}
.services .svc {
flex-basis: 100%;
min-height: 0;
}
.services .svc-foot {
margin-top: 20px;
}
.svc-body {
min-width: 0;
}
.clocks {
grid-template-columns: 1fr;
}
.evo-head {
flex-direction: column;
gap: 16px;
}
.evo-bar .fill {
font-size: 15px;
}
.news {
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ==========================================================
PÁGINAS DE PRODUCTO (garage, obra, liveassist, bodegas)
Piezas genéricas: grillas de tarjetas, pasos, chips, roles y cierre.
========================================================== */
.wcard .wc-sub {
margin-top: 10px;
max-width: 26ch;
font-size: 16px;
line-height: 1.35;
color: var(--text-2);
}
.p-sec {
padding: 140px 0 0;
}
.p-sec .big-title {
margin-bottom: 70px;
}
.p-sec .sec-row {
margin-bottom: 70px;
}
.p-grid {
display: grid;
grid-template-columns: repeat(var(--cols, 3), 1fr);
gap: var(--gap);
}
.p-grid + .p-grid,
.p-grid + .p-flow,
.p-flow + .p-grid,
.p-note + .p-grid,
.p-grid + .p-note {
margin-top: var(--gap);
}
.p-card {
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.p-card h4 {
font-size: 24px;
font-weight: 500;
line-height: 1.15;
color: var(--text);
}
.p-card p,
.p-card li {
font-size: 16px;
line-height: 1.5;
color: var(--muted);
}
.p-card p b,
.p-card li b {
color: var(--text-2);
font-weight: 500;
}
.p-card ul {
list-style: none;
display: grid;
gap: 10px;
}
.p-card li {
padding-left: 18px;
position: relative;
}
.p-card li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.p-eyebrow {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-ink);
}
.p-num {
font-size: 56px;
line-height: 1;
color: var(--text);
}
.p-step .p-num {
font-size: 22px;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--text);
letter-spacing: 0;
margin-bottom: 12px;
}
.p-pain p {
font-size: 22px;
line-height: 1.3;
color: var(--text-2);
}
.p-pain .q {
font-size: 40px;
line-height: 1;
color: var(--accent);
}
.p-note {
padding: 36px 32px;
background: var(--grad);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.p-note p {
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.25;
color: #fff;
max-width: 900px;
}
.p-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.p-chip {
padding: 8px 14px;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--line-2);
font-size: 15px;
color: var(--text-2);
white-space: nowrap;
}
.p-flow {
padding: 28px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.p-flow h4 {
width: 100%;
font-size: 24px;
font-weight: 500;
}
.p-flow > p {
width: 100%;
color: var(--muted);
font-size: 16px;
margin-bottom: 12px;
}
.p-flow .arr {
color: var(--muted-2);
}
.p-role {
padding: 0;
gap: 0;
}
.p-role h4 {
background: var(--grad);
padding: 22px 28px;
color: #fff;
}
.p-role div {
padding: 24px 28px 28px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 1;
}
.p-role small {
margin-top: auto;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-2);
}
.p-role small b {
display: block;
margin-top: 4px;
font-size: 16px;
text-transform: none;
font-weight: 400;
color: var(--text-2);
}
.p-hero-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
margin-top: 40px;
}
.svc-intro .p-chips {
margin-top: 32px;
}
.p-cta {
margin-top: 140px;
padding: 72px 48px;
background: var(--grad);
box-shadow: inset 0 0 0 1px var(--line-2);
display: grid;
gap: 20px;
justify-items: start;
}
.p-cta h2 {
font-size: clamp(40px, 4.6vw, 72px);
font-weight: 500;
line-height: 1.02;
color: #fff;
max-width: 14em;
}
.p-cta p {
font-size: 20px;
line-height: 1.5;
color: var(--text-2);
max-width: 620px;
}
.p-cta .p-steps-mini {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap);
width: 100%;
margin: 16px 0;
}
.p-cta .p-steps-mini > div {
padding: 24px;
border-radius: var(--r);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.p-cta .p-steps-mini b {
display: block;
font-size: 32px;
font-weight: 500;
color: var(--accent-ink);
}
.p-cta .p-steps-mini h4 {
font-size: 20px;
font-weight: 500;
margin: 8px 0;
color: #fff;
}
.p-cta .p-steps-mini p {
font-size: 15px;
color: var(--text-2);
}
.p-caption {
margin-top: 12px;
font-size: 13px;
color: var(--muted-2);
}
.p-voice li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 14px 18px 14px 34px;
border-radius: var(--r);
box-shadow: inset 0 0 0 1px var(--line);
color: var(--text-2);
}
.p-voice li::before {
left: 16px;
top: 50%;
margin-top: -3px;
}
.p-voice li em {
font-style: normal;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
}
.svc-detail p b {
color: var(--text-2);
font-weight: 500;
}
@media (max-width: 1200px) {
.p-grid {
--cols: 2 !important;
}
}
@media (max-width: 900px) {
.p-sec {
padding-top: 100px;
}
.p-cta {
margin-top: 100px;
padding: 48px 24px;
}
.p-cta .p-steps-mini {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.p-grid {
--cols: 1 !important;
}
.p-chip {
white-space: normal;
}
}
@media (max-width: 560px) {
/* etiquetas largas de capítulos (Mampostería, Preliminares) en 5 columnas */
.evo-bar {
min-width: 0;
}
.evo-bar > span {
font-size: 12px;
overflow-wrap: anywhere;
}
}
/* ==========================================================
SIMULACIONES DE PRODUCTO (.sim)
Recreaciones en HTML de un momento clave de cada app, con el estilo
claro de la interfaz real (tarjetas blancas, encabezado noche, Azul
Alium). Los colores de estado solo comunican estado, como pide el manual.
========================================================== */
.sim {
--s-bg: #f6f7f9;
--s-card: #fff;
--s-line: #e5e7eb;
--s-text: #111827;
--s-2: #4b5563;
--s-muted: #6b7280;
--s-blue: var(--azul);
--s-blue-l: #e3f2fd;
--s-ok: #2e7d32;
--s-ok-l: #edf7ed;
--s-ok-d: #1b5e20;
--s-warn: #f9a825;
--s-warn-l: #fff3e0;
--s-warn-d: #e65100;
--s-err: #d32f2f;
--s-err-l: #ffebee;
--s-err-d: #b71c1c;
width: 400px;
font-family: var(--font);
font-size: 13px;
line-height: 1.35;
color: var(--s-text);
background: var(--s-bg);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 40px 80px -24px rgba(0, 0, 0, 0.75),
0 0 0 1px rgba(255, 255, 255, 0.08);
text-align: left;
}
.sim * {
letter-spacing: inherit;
}
.sim-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
background: var(--grad);
color: #fff;
font-size: 14px;
font-weight: 600;
}
.sim-head small {
font-weight: 400;
font-size: 12px;
opacity: 0.75;
}
.sim-body {
padding: 14px;
display: grid;
gap: 10px;
}
.s-card {
background: var(--s-card);
border-radius: 10px;
padding: 12px;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
.s-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.s-sub {
color: var(--s-muted);
font-size: 11.5px;
}
.s-lbl {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--s-muted);
}
.s-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
white-space: nowrap;
background: var(--s-blue-l);
color: #0d47a1;
}
.s-chip.ok {
background: var(--s-ok-l);
color: var(--s-ok-d);
}
.s-chip.warn {
background: var(--s-warn-l);
color: var(--s-warn-d);
}
.s-chip.err {
background: var(--s-err-l);
color: var(--s-err-d);
}
.s-chip.mute {
background: #f3f4f6;
color: var(--s-2);
}
.s-bar {
height: 6px;
border-radius: 99px;
background: #e5e7eb;
overflow: hidden;
}
.s-bar i {
display: block;
height: 100%;
width: 0;
border-radius: inherit;
background: var(--c, var(--s-blue));
transition: width 1.6s var(--ease) var(--d, 0.2s);
}
.in .s-bar i,
.s-bar.in i {
width: var(--v);
}
/* --- picking --- */
.sim-scan {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-radius: 8px;
background: #f3f4f6;
box-shadow: inset 0 0 0 1.5px var(--s-blue);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
color: var(--s-2);
}
.sim-scan svg {
width: 16px;
height: 16px;
flex: none;
stroke: var(--s-2);
fill: none;
stroke-width: 1.6;
}
.sim-scan .type {
overflow: hidden;
white-space: nowrap;
width: 0;
border-right: 1.5px solid var(--s-blue);
animation: s-type 7s steps(13) infinite;
}
.sim-scan .ean {
margin-left: auto;
padding: 2px 6px;
border-radius: 4px;
background: var(--noche);
color: #fff;
font-family: var(--font);
font-size: 10px;
font-weight: 600;
}
@keyframes s-type {
0%,
8% {
width: 0;
}
30%,
92% {
width: 13ch;
}
100% {
width: 0;
}
}
.sim-alert {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-radius: 8px;
background: var(--s-ok-l);
color: var(--s-ok-d);
font-size: 11.5px;
animation: s-pop 7s var(--ease) infinite;
}
.sim-alert b {
font-weight: 700;
}
.sim-alert em {
margin-left: auto;
font-style: normal;
color: var(--s-ok);
white-space: nowrap;
}
@keyframes s-pop {
0%,
32% {
opacity: 0;
transform: translateY(-4px) scale(0.98);
}
38%,
92% {
opacity: 1;
transform: none;
}
100% {
opacity: 0;
}
}
.sim-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.sim-item {
padding: 9px;
border-radius: 8px;
background: var(--s-card);
box-shadow: inset 0 0 0 1px var(--s-line);
display: grid;
gap: 4px;
font-size: 11px;
}
.sim-item code {
font-size: 9.5px;
color: var(--s-muted);
}
.sim-item .s-row b {
font-size: 15px;
font-variant-numeric: tabular-nums;
}
.sim-item.on {
background: var(--s-blue-l);
box-shadow: inset 0 0 0 1.5px var(--s-blue);
}
.sim-item.done {
background: var(--s-ok-l);
box-shadow: inset 0 0 0 1px #c8e6c9;
}
.sim-swap {
display: inline-grid;
}
.sim-swap > * {
grid-area: 1 / 1;
}
.sim-swap > :first-child {
animation: s-out 7s infinite;
}
.sim-swap > :last-child {
animation: s-in 7s infinite;
}
@keyframes s-out {
0%,
34% {
opacity: 1;
}
38%,
96% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes s-in {
0%,
34% {
opacity: 0;
}
38%,
96% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.sim-progress-swap i {
animation: s-grow 7s var(--ease) infinite;
}
@keyframes s-grow {
0%,
34% {
width: 65%;
}
42%,
96% {
width: 69%;
}
100% {
width: 65%;
}
}
/* --- montaje: simulación flotando sobre la captura real --- */
.sim-stage {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
place-items: center;
pointer-events: none;
}
.wcard .sim-stage {
place-items: end;
padding: 0 0 0 32px;
}
.wcard .sim-stage .sim {
transform: translate(40px, 150px) scale(0.74);
transform-origin: bottom right;
}
.w-featured .sim-stage {
place-items: center end;
padding-right: 48px;
}
.w-featured .sim-stage .sim {
transform: none;
width: 440px;
}
.svc-intro .img .sim-stage .sim {
width: min(440px, 88%);
}
.reveal .sim {
opacity: 0;
translate: 0 30px;
transition:
opacity 0.9s var(--ease) 0.3s,
translate 0.9s var(--ease) 0.3s;
}
.reveal.in .sim {
opacity: 1;
translate: 0 0;
}
@media (max-width: 900px) {
.wcard .sim-stage .sim {
transform: translate(40px, 60px) scale(0.78);
}
.w-featured .sim-stage {
place-items: end;
padding: 0;
}
.w-featured .sim-stage .sim {
width: 400px;
transform: translate(30px, 40px) scale(0.8);
transform-origin: bottom right;
}
}
@media (prefers-reduced-motion: reduce) {
.sim-scan .type {
width: 13ch;
animation: none;
}
.sim-alert,
.sim-swap > *,
.sim-progress-swap i {
animation: none;
}
.sim-swap > :first-child {
opacity: 0;
}
}
/* capturas reales como textura de fondo detrás de una simulación */
.px.shot .px-img {
opacity: 0.12;
}
/* la simulación va encima de todo y no empuja el contenido de la tarjeta */
.wcard > .sim-stage {
position: absolute;
z-index: 1;
}
.sim-item .s-row {
flex-wrap: wrap;
row-gap: 4px;
}
.sim-item .s-row b {
white-space: nowrap;
}
/* --- garage: portal del cliente, paso a paso del vehículo --- */
.s-plate {
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.02em;
color: #374151;
}
.s-steps {
display: flex;
align-items: center;
margin: 12px 4px 10px;
}
.s-dot {
width: 20px;
height: 20px;
flex: none;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 10px;
font-weight: 600;
background: rgba(75, 85, 99, 0.1);
color: var(--s-muted);
}
.s-dot.done {
background: var(--s-ok);
color: #fff;
}
.s-line {
flex: 1;
height: 2px;
background: #e5e7eb;
}
.s-line.done {
background: var(--s-ok);
}
.s-dot.a2 {
animation: s-cur-done 7s infinite;
}
.s-dot.a3 {
animation: s-fut-cur 7s infinite;
}
.s-line.a23 {
animation: s-line-on 7s infinite;
}
@keyframes s-cur-done {
0%,
40% {
background: var(--s-blue);
color: #fff;
box-shadow: 0 0 0 4px rgba(18, 95, 255, 0.2);
}
46%,
94% {
background: var(--s-ok);
color: #fff;
box-shadow: 0 0 0 0 transparent;
}
100% {
background: var(--s-blue);
box-shadow: 0 0 0 4px rgba(18, 95, 255, 0.2);
}
}
@keyframes s-fut-cur {
0%,
40% {
background: rgba(75, 85, 99, 0.1);
color: var(--s-muted);
box-shadow: 0 0 0 0 transparent;
}
46%,
94% {
background: var(--s-blue);
color: #fff;
box-shadow: 0 0 0 4px rgba(18, 95, 255, 0.2);
}
100% {
background: rgba(75, 85, 99, 0.1);
color: var(--s-muted);
}
}
@keyframes s-line-on {
0%,
40% {
background: #e5e7eb;
}
46%,
94% {
background: var(--s-ok);
}
100% {
background: #e5e7eb;
}
}
.s-swap6 > :first-child {
animation: s-out6 7s infinite;
}
.s-swap6 > :last-child {
animation: s-in6 7s infinite;
}
@keyframes s-out6 {
0%,
40% {
opacity: 1;
}
44%,
96% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes s-in6 {
0%,
40% {
opacity: 0;
}
44%,
96% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.s-status {
padding-top: 10px;
border-top: 1px solid var(--s-line);
font-size: 12px;
color: var(--s-2);
}
.s-status b {
color: var(--s-text);
font-weight: 600;
}
.s-table {
display: grid;
gap: 0;
font-size: 12px;
}
.s-table > div {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 7px 0;
border-top: 1px solid var(--s-line);
color: var(--s-2);
}
.s-table > div:first-child {
border-top: 0;
}
.s-table b {
color: var(--s-text);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.s-ico {
color: var(--s-blue);
margin-right: 6px;
}
.s-notif {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: var(--s-card);
box-shadow:
0 8px 24px -8px rgba(17, 24, 39, 0.25),
inset 0 0 0 1px var(--s-line);
font-size: 12px;
animation: s-pop 7s var(--ease) infinite;
animation-delay: 0.3s;
}
.s-notif .s-av {
width: 28px;
height: 28px;
flex: none;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--s-blue);
color: #fff;
font-weight: 700;
font-size: 12px;
}
.s-btn {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 8px;
background: var(--s-blue);
color: #fff;
font-weight: 500;
font-size: 12px;
}
/* capturas reales a color (módulos de las páginas de producto) */
.px.real .px-img {
filter: none;
background-position: left top;
}
.svc-img .px.real .px-img,
.proc-img .px.real .px-img {
background-position: center;
}
@media (prefers-reduced-motion: reduce) {
.s-dot.a2,
.s-dot.a3,
.s-line.a23,
.s-swap6 > *,
.s-notif {
animation: none;
}
.s-swap6 > :last-child {
opacity: 0;
}
}
.svc-intro .img:has(.sim-stage) {
height: auto;
min-height: 620px;
}
@media (max-width: 900px) {
.svc-intro .img:has(.sim-stage) {
min-height: 560px;
}
.svc-intro .img .sim-stage .sim {
width: 100%;
max-width: 400px;
}
}
/* --- obra: control de costos --- */
.s-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.s-kpis > div {
background: var(--s-card);
border-radius: 8px;
padding: 8px 9px;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}
.s-kpis b {
display: block;
margin-top: 3px;
font-size: 14px;
font-variant-numeric: tabular-nums;
}
.s-kpis .lo {
color: var(--s-warn-d);
}
.s-kpis .ok {
color: var(--s-ok);
}
.s-cost {
display: grid;
grid-template-columns: 92px 1fr 64px;
align-items: center;
gap: 10px;
padding: 5px 0;
font-size: 12px;
color: var(--s-2);
}
.s-cost b {
text-align: right;
color: var(--s-text);
font-variant-numeric: tabular-nums;
}
.s-cost .s-bar {
height: 8px;
}
.s-over {
display: grid;
gap: 4px;
padding: 10px 12px;
border-radius: 10px;
background: var(--s-err-l);
box-shadow: inset 3px 0 0 var(--s-err);
color: var(--s-err-d);
font-size: 12px;
animation: s-pop 7s var(--ease) infinite;
}
.s-over .s-row b {
font-size: 15px;
}
/* --- obra: programación (Gantt + curva S) --- */
.sim-wide {
width: 100%;
font-size: 12px;
}
.g-kpis {
grid-template-columns: repeat(3, 1fr);
}
.g-kpis b {
font-size: 20px;
margin: 4px 0 8px;
}
.g-wrap {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 10px;
align-items: start;
}
.g-gantt {
--nameW: 210px;
position: relative;
padding: 10px 12px;
}
.g-row {
display: grid;
grid-template-columns: var(--nameW) 1fr;
gap: 10px;
align-items: center;
min-height: 30px;
border-top: 1px solid #f1f2f4;
}
.g-row.g-head {
border-top: 0;
min-height: 22px;
}
.g-name {
font-size: 11.5px;
color: var(--s-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.g-name b {
color: var(--s-text);
font-weight: 600;
}
.g-name small {
display: block;
font-size: 9.5px;
color: var(--s-muted);
}
.g-track {
position: relative;
height: 100%;
min-height: 30px;
background: repeating-linear-gradient(
90deg,
transparent 0 calc(100% / 15 - 1px),
#eef0f3 calc(100% / 15 - 1px) calc(100% / 15)
);
}
.g-months {
display: grid;
grid-template-columns: repeat(15, 1fr);
min-height: 22px;
background: none;
font-size: 9px;
color: var(--s-muted);
align-items: center;
}
.g-months span {
text-align: center;
}
.g-bar {
position: absolute;
top: 50%;
height: 9px;
margin-top: -4.5px;
border-radius: 99px;
background: #bbdefb;
overflow: hidden;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.9s var(--ease) var(--d, 0s);
}
.g-bar i {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: inherit;
background: var(--s-blue);
transition: width 1.2s var(--ease) calc(var(--d, 0s) + 0.6s);
}
.g-ms {
position: absolute;
top: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
background: var(--s-warn);
transform: rotate(45deg) scale(0);
transition: transform 0.5s var(--ease) calc(var(--d, 0s) + 0.6s);
}
.in .g-bar {
transform: scaleX(1);
}
.in .g-bar i {
width: var(--p);
}
.in .g-ms {
transform: rotate(45deg) scale(1);
}
.g-hoy {
position: absolute;
top: 34px;
bottom: 10px;
left: calc(
12px + var(--nameW) + 10px + (100% - 34px - var(--nameW)) * var(--x)
);
border-left: 1.5px dashed var(--s-err);
pointer-events: none;
}
.g-hoy span {
position: absolute;
top: -14px;
left: -26px;
padding: 1px 6px;
border-radius: 4px;
background: var(--s-err);
color: #fff;
font-size: 9.5px;
font-weight: 600;
white-space: nowrap;
}
.g-s {
display: grid;
gap: 2px;
}
.g-curve {
width: 100%;
height: auto;
margin-top: 6px;
overflow: visible;
}
.g-grid line {
stroke: #eef0f3;
stroke-width: 1;
}
.g-grid text {
font-size: 8px;
fill: var(--s-muted);
text-anchor: end;
}
.g-grid text[y="166"] {
text-anchor: start;
}
.g-hoy-l {
stroke: var(--s-err);
stroke-width: 1.2;
stroke-dasharray: 3 3;
}
.g-prog {
fill: none;
stroke: #1976d2;
stroke-width: 2;
stroke-dasharray: 5 4;
}
.g-eje {
fill: none;
stroke: #2e7d32;
stroke-width: 2.4;
}
.pdot {
fill: #1976d2;
}
.edot {
fill: #2e7d32;
}
.g-draw {
clip-path: inset(0 100% 0 0);
transition: clip-path 2.2s var(--ease) 0.4s;
}
.in .g-draw {
clip-path: inset(0 0 0 0);
}
.g-legend {
display: flex;
gap: 16px;
font-size: 11px;
color: var(--s-2);
}
.g-legend span::before {
content: "";
display: inline-block;
width: 16px;
height: 0;
margin-right: 6px;
vertical-align: middle;
border-top: 2px dashed #1976d2;
}
.g-legend .le::before {
border-top: 2.4px solid #2e7d32;
}
.g-verdict {
margin-top: 8px;
font-size: 12px;
color: var(--s-2);
}
@media (max-width: 1100px) {
.g-wrap {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.g-gantt {
--nameW: 110px;
overflow: hidden;
}
.g-name small {
display: none;
}
.g-months span:nth-child(even) {
visibility: hidden;
}
.g-kpis {
grid-template-columns: 1fr 1fr;
}
.g-kpis > div:last-child {
grid-column: 1 / -1;
}
}
@media (prefers-reduced-motion: reduce) {
.g-bar {
transform: none;
}
.g-bar i {
width: var(--p);
}
.g-ms {
transform: rotate(45deg);
}
.g-draw {
clip-path: none;
}
}
.s-kpis .s-bar,
.sim .s-bar {
display: block;
}
/* --- liveassist: consulta en vivo --- */
.la-live {
display: flex;
align-items: center;
gap: 8px;
}
.la-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff6b6b;
animation: la-blink 1.2s steps(2) infinite;
}
@keyframes la-blink {
50% {
opacity: 0.25;
}
}
.la-meter {
display: inline-flex;
align-items: center;
gap: 2px;
height: 14px;
}
.la-meter i {
width: 2.5px;
height: 100%;
border-radius: 2px;
background: #5eead4;
transform-origin: center;
animation: la-wave 0.9s ease-in-out infinite;
}
.la-meter i:nth-child(2) {
animation-delay: -0.2s;
}
.la-meter i:nth-child(3) {
animation-delay: -0.5s;
}
.la-meter i:nth-child(4) {
animation-delay: -0.1s;
}
.la-meter i:nth-child(5) {
animation-delay: -0.7s;
}
@keyframes la-wave {
0%,
100% {
transform: scaleY(0.3);
}
50% {
transform: scaleY(1);
}
}
.la-sec {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 0 6px;
}
.la-sec::after {
content: "";
flex: 1;
height: 1px;
background: var(--s-line);
}
.la-line {
display: grid;
grid-template-columns: 34px 1fr;
gap: 6px;
padding: 4px 0;
font-size: 12px;
color: var(--s-2);
}
.la-line time {
font-family: ui-monospace, Menlo, monospace;
font-size: 10px;
color: var(--s-muted);
padding-top: 2px;
}
.la-who {
display: inline-block;
margin-bottom: 2px;
padding: 1px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
background: #eef3ff;
color: var(--s-blue);
}
.la-who.p {
background: var(--s-ok-l);
color: var(--s-ok);
}
.la-ev {
display: inline-grid;
place-items: center;
min-width: 16px;
height: 16px;
margin-left: 4px;
padding: 0 4px;
border-radius: 4px;
background: #eef3ff;
color: var(--s-blue);
font-size: 9.5px;
font-weight: 700;
vertical-align: 1px;
}
.la-note li {
list-style: none;
font-size: 12px;
color: var(--s-2);
padding: 2px 0;
}
.la-flag {
display: grid;
gap: 4px;
padding: 10px 12px;
border-radius: 10px;
background: var(--s-err-l);
box-shadow: inset 3px 0 0 var(--s-err);
font-size: 12px;
color: var(--s-err-d);
}
.la-flag .s-sub {
color: var(--s-err-d);
opacity: 0.8;
}
/* secuencia: cada pieza entra en su turno y todas salen juntas al final del ciclo */
.la-seq {
animation: la-in 11s var(--ease) calc(var(--i) * 0.85s) infinite backwards;
}
@keyframes la-in {
0% {
opacity: 0;
transform: translateY(6px);
}
4% {
opacity: 1;
transform: none;
}
72% {
opacity: 1;
transform: none;
}
77%,
100% {
opacity: 0;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.la-seq,
.la-dot,
.la-meter i {
animation: none;
}
}
/* fondo de ondas de la marca (manual, cap. 6), sin pasar a blanco y negro */
.wcard .sim-stage .sim.sim-short {
transform: translate(40px, 70px) scale(0.74);
}
@media (max-width: 900px) {
.wcard .sim-stage .sim,
.wcard .sim-stage .sim.sim-short {
transform: translate(40px, 120px) scale(0.72);
}
}
/* --- obra: Gantt compacto para el hero y la tarjeta destacada --- */
.sim-gantt {
width: 520px;
}
.sim-gantt .g-gantt {
--nameW: 150px;
}
.sim-gantt .g-name {
font-size: 10.5px;
}
.sim-gantt .g-row {
min-height: 27px;
}
.sim-gantt .g-track {
min-height: 27px;
}
.sim-gantt .g-months span:nth-child(even) {
visibility: hidden;
}
.sim-gantt .g-kpis b {
font-size: 17px;
}
.svc-intro .img .sim-stage .sim.sim-gantt {
width: min(540px, 92%);
}
.w-featured .sim-stage .sim.sim-gantt {
width: 520px;
}
@media (max-width: 900px) {
.w-featured .sim-stage .sim.sim-gantt {
width: 440px;
}
.sim-gantt .g-gantt {
--nameW: 96px;
}
.sim-gantt .g-name small {
display: none;
}
}
.p-simcard {
min-height: 640px;
margin-top: var(--gap);
}
@media (max-width: 560px) {
.p-simcard {
min-height: 600px;
}
.p-simcard .sim {
width: calc(100% - 24px);
}
}
.s-kpis b {
white-space: nowrap;
}
@media (max-width: 900px) {
.svc-intro .img:has(.sim-gantt) {
min-height: 720px;
}
}
/* --- obra: Gantt compacto, efectos extra ---
Entrada al aparecer (filas en cascada, barras con rebote, línea de hoy que
baja) y después un ciclo de 10 s: el cursor revisa A03 y A04, llega una
medición de obra y A04 avanza. */
.sim-gantt .g-row {
height: 30px;
min-height: 0;
}
.sim-gantt .g-row.g-head {
height: 22px;
}
.sim-gantt .g-track {
min-height: 0;
}
.sim-gantt .g-row:not(.g-head) {
opacity: 0;
transform: translateX(-10px);
transition:
opacity 0.5s var(--ease) var(--d),
transform 0.5s var(--ease) var(--d);
}
.in .sim-gantt .g-row:not(.g-head) {
opacity: 1;
transform: none;
}
.sim-gantt .g-bar {
transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1)
calc(var(--d) + 0.15s);
}
/* brillo que recorre lo ejecutado */
.sim-gantt .g-bar i {
overflow: hidden;
}
.sim-gantt .g-bar i::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
transparent 20%,
rgba(255, 255, 255, 0.55) 50%,
transparent 80%
);
transform: translateX(-120%);
animation: g-shine 2.8s ease-in-out calc(var(--d) + 1.8s) infinite;
}
@keyframes g-shine {
0% {
transform: translateX(-120%);
}
60%,
100% {
transform: translateX(120%);
}
}
.sim-gantt .g-ms {
transition: transform 0.6s cubic-bezier(0.34, 1.8, 0.64, 1)
calc(var(--d) + 0.7s);
}
.sim-gantt .g-ms::after {
content: "";
position: absolute;
inset: -4px;
border: 1.5px solid var(--s-warn);
opacity: 0;
animation: g-ring 2.4s ease-out 2.4s infinite;
}
@keyframes g-ring {
0% {
opacity: 0.9;
transform: scale(0.6);
}
100% {
opacity: 0;
transform: scale(1.9);
}
}
/* línea de hoy: baja desde arriba y la etiqueta late */
.sim-gantt .g-hoy {
top: 30px;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.9s var(--ease) 1.3s;
}
.in .sim-gantt .g-hoy {
transform: none;
}
.sim-gantt .g-hoy span {
top: -12px;
}
.sim-gantt .g-hoy span::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.55);
animation: g-pulse 1.8s ease-out 2.4s infinite;
}
@keyframes g-pulse {
0% {
box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.5);
}
100% {
box-shadow: 0 0 0 9px rgba(211, 47, 47, 0);
}
}
/* indicador "en vivo" del encabezado */
.g-sync {
width: 7px;
height: 7px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
animation: g-sync 1.6s ease-out infinite;
}
@keyframes g-sync {
0% {
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
}
100% {
box-shadow: 0 0 0 7px rgba(74, 222, 128, 0);
}
}
/* posiciones del ciclo, en fracción de la pista y en px desde arriba */
.sim-gantt .g-gantt {
--tl: calc(22px + var(--nameW));
--tw: calc(100% - 34px - var(--nameW));
}
.g-cursor {
position: absolute;
z-index: 4;
width: 18px;
height: 18px;
fill: #111827;
stroke: #fff;
stroke-width: 1.5;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
left: calc(var(--tl) + var(--tw) * 0.36);
top: 112px;
opacity: 0;
animation: g-cursor 10s var(--ease) 3s infinite both;
}
@keyframes g-cursor {
0% {
opacity: 0;
left: calc(var(--tl) + var(--tw) * 0.7);
top: 240px;
}
4% {
opacity: 1;
}
10%,
30% {
opacity: 1;
left: calc(var(--tl) + var(--tw) * 0.36);
top: 112px;
}
32% {
transform: scale(0.85);
}
34% {
transform: none;
}
40%,
58% {
opacity: 1;
left: calc(var(--tl) + var(--tw) * 0.5);
top: 142px;
}
64% {
opacity: 0;
left: calc(var(--tl) + var(--tw) * 0.62);
top: 250px;
}
100% {
opacity: 0;
left: calc(var(--tl) + var(--tw) * 0.62);
top: 250px;
}
}
.g-tip {
position: absolute;
z-index: 3;
display: grid;
gap: 2px;
padding: 7px 10px;
border-radius: 8px;
background: #111827;
color: #fff;
font-size: 10.5px;
white-space: nowrap;
box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.45);
transform: translateX(-50%);
opacity: 0;
}
.g-tip span {
color: #cbd5e1;
}
.g-tip3 {
left: calc(var(--tl) + var(--tw) * 0.36);
top: 62px;
animation: g-tip3 10s var(--ease) 3s infinite both;
}
.g-tip4 {
left: calc(var(--tl) + var(--tw) * 0.5);
top: 92px;
animation: g-tip4 10s var(--ease) 3s infinite both;
}
@keyframes g-tip3 {
0%,
11% {
opacity: 0;
translate: 0 6px;
}
14%,
30% {
opacity: 1;
translate: 0 0;
}
33%,
100% {
opacity: 0;
translate: 0 -4px;
}
}
@keyframes g-tip4 {
0%,
41% {
opacity: 0;
translate: 0 6px;
}
44%,
58% {
opacity: 1;
translate: 0 0;
}
61%,
100% {
opacity: 0;
translate: 0 -4px;
}
}
/* medición que llega y hace crecer A04 */
.g-toast {
position: absolute;
z-index: 3;
right: 10px;
bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px 8px 8px;
border-radius: 10px;
background: #fff;
font-size: 11px;
box-shadow:
0 14px 30px -10px rgba(17, 24, 39, 0.45),
inset 0 0 0 1px var(--s-line);
opacity: 0;
animation: g-toast 10s var(--ease) 3s infinite both;
}
.g-toast .s-av {
width: 26px;
height: 26px;
flex: none;
display: grid;
place-items: center;
border-radius: 7px;
background: var(--s-ok-l);
font-size: 13px;
}
@keyframes g-toast {
0%,
61% {
opacity: 0;
transform: translateY(14px) scale(0.96);
}
65%,
90% {
opacity: 1;
transform: none;
}
95%,
100% {
opacity: 0;
transform: translateY(6px);
}
}
.g-grow {
position: absolute;
top: 0;
bottom: 0;
left: 45.79%;
width: 0;
background: var(--s-ok);
border-radius: 0 99px 99px 0;
animation: g-grow 10s var(--ease) 3s infinite both;
}
@keyframes g-grow {
0%,
66% {
width: 0;
}
73%,
92% {
width: 6.3%;
}
100% {
width: 0;
}
}
.g-loop-swap > :first-child {
animation: g-out 10s 3s infinite both;
}
.g-loop-swap > :last-child {
animation: g-in 10s 3s infinite both;
}
@keyframes g-out {
0%,
70% {
opacity: 1;
}
73%,
94% {
opacity: 0;
}
97%,
100% {
opacity: 1;
}
}
@keyframes g-in {
0%,
70% {
opacity: 0;
}
73%,
94% {
opacity: 1;
color: var(--s-ok);
}
97%,
100% {
opacity: 0;
}
}
@media (max-width: 900px) {
.g-tip {
font-size: 9.5px;
}
.g-tip span {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.sim-gantt .g-row:not(.g-head) {
opacity: 1;
transform: none;
}
.sim-gantt .g-hoy {
transform: none;
}
.g-cursor,
.g-tip,
.g-toast {
display: none;
}
.g-grow,
.g-sync,
.sim-gantt .g-bar i::after,
.sim-gantt .g-ms::after,
.sim-gantt .g-hoy span::after {
animation: none;
}
.g-loop-swap > :last-child {
opacity: 0;
}
}
/* ==========================================================
ESCENAS ANIMADAS · Servicios (002) y Cómo empezamos (003)
SVG + CSS con los colores del manual. Corren cuando la tarjeta
está abierta (.svc.open) o el paso está activo (.an.on).
El estado sin animación es la escena terminada (movimiento reducido).
========================================================== */
.an-box {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--noche) url(/assets/marca/fondo-ondas.webp) center / cover;
}
.an-box::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(
ellipse at center,
transparent 45%,
rgba(2, 1, 52, 0.6)
);
}
.an {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
font-family: var(--font);
}
.an * {
transform-box: fill-box;
transform-origin: center;
}
.an [transform] {
transform-box: view-box;
transform-origin: 0 0;
}
.an-proc .an {
opacity: 0;
transition: opacity 0.6s var(--ease);
}
.an-proc .an.on {
opacity: 1;
}
.an .gl {
fill: rgba(255, 255, 255, 0.06);
stroke: rgba(255, 255, 255, 0.16);
}
.an .pn {
fill: rgba(2, 1, 52, 0.82);
stroke: rgba(255, 255, 255, 0.2);
}
.an .ln {
fill: rgba(255, 255, 255, 0.2);
}
.an .ln2 {
fill: rgba(255, 255, 255, 0.55);
}
.an .b4 {
fill: rgba(255, 255, 255, 0.4);
}
.an .az {
fill: var(--azul);
}
.an .wh {
fill: #fff;
}
.an .ol {
fill: none;
stroke: rgba(255, 255, 255, 0.22);
stroke-dasharray: 4 4;
}
.an .tx {
fill: var(--text-2);
font-size: 11px;
font-weight: 500;
}
.an .ts {
fill: var(--muted);
font-size: 9px;
font-weight: 500;
}
.an .tw {
fill: #fff;
}
.an .tn {
fill: var(--noche);
}
.an .ti {
fill: var(--accent-ink);
}
.an .orl {
transform-origin: left center;
}
.an .orb {
transform-origin: center bottom;
}
/* --- 002 · 01 Productos: las cuatro apps trabajando --- */
:is(.svc.open, .an.on) .s1-f {
animation: anFloat 6s ease-in-out var(--d) infinite;
}
:is(.svc.open, .an.on) .s1-mv {
animation: s1Move 6s var(--ease) infinite;
}
:is(.svc.open, .an.on) .s1-gr {
animation: anGrowX 6s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s1-td {
animation: s1Today 6s ease-in-out infinite alternate;
}
:is(.svc.open, .an.on) .s1-sc {
animation: s1Scan 1.4s ease-in-out infinite alternate;
}
:is(.svc.open, .an.on) .s1-ck {
animation: anPop 6s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s1-pg {
animation: s1Prog 6s linear infinite;
}
:is(.svc.open, .an.on) .s1-rec {
animation: anBlink 1.2s ease-in-out infinite;
}
:is(.svc.open, .an.on) .s1-wv {
animation: anWave 0.9s ease-in-out var(--dl) infinite alternate;
}
:is(.svc.open, .an.on) .s1-tp {
animation: s1Type 4s var(--ease) var(--dl) infinite both;
}
/* --- 002 · 02 Software a medida: la app se arma pieza por pieza --- */
.an .s2-cu {
opacity: 0;
}
.an .s2-dn {
stroke-dashoffset: 35;
}
:is(.svc.open, .an.on) .s2-in {
animation: s2In 8s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s2-cu {
animation: s2Cursor 8s var(--ease) 1.5s infinite both;
}
:is(.svc.open, .an.on) .s2-dn {
animation: s2Donut 8s var(--ease) 1.5s infinite both;
}
:is(.svc.open, .an.on) .s2-br {
animation: anGrowY 8s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s2-fl {
animation: anFloat 5s ease-in-out var(--d) infinite;
}
/* --- 002 · 03 Páginas web: se construye y se adapta al celular --- */
.an .s3-br {
transform: translate(-38px, 6px) scale(0.82);
}
:is(.svc.open, .an.on) .s3-br {
animation: s3Browser 10s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .s3-ph {
animation: s3Phone 10s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .s3-b {
animation: s3Build 10s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s3-w {
animation: s3Wide 10s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s3-pop {
animation: s3Pop 10s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s3-p {
animation: s3PhoneIn 10s var(--ease) var(--dl) infinite both;
}
/* --- 002 · 04 Consultorías: diagnóstico, plan y resultado --- */
:is(.svc.open, .an.on) .s4-f {
animation: anFloat 6s ease-in-out var(--d) infinite;
}
:is(.svc.open, .an.on) .s4-sc {
animation: s4Scan 4s steps(4, end) infinite;
}
:is(.svc.open, .an.on) .s4-fl {
animation: p3Flow 0.9s linear infinite;
}
:is(.svc.open, .an.on) .s4-ck {
animation: anPop 8s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s4-gr {
animation: anGrowX 8s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .s4-br {
animation: anGrowY 8s var(--ease) var(--dl) infinite both;
}
/* --- 003 · Paso 1 Conversamos --- */
.an .p1-ty {
opacity: 0;
}
:is(.svc.open, .an.on) .p1-rg {
animation: p1Ring 2.4s ease-out var(--dl) infinite both;
}
:is(.svc.open, .an.on) .p1-dot {
animation: anBlink 1.2s ease-in-out infinite;
}
:is(.svc.open, .an.on) .p1-wv {
animation: anWave 0.7s ease-in-out var(--dl) infinite alternate;
}
:is(.svc.open, .an.on) .p1-b1 {
animation: p1B1 10s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .p1-b2 {
animation: p1B2 10s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .p1-ty {
animation: p1Typing 10s linear infinite both;
}
:is(.svc.open, .an.on) .p1-td {
animation: p1Dot 0.5s ease-in-out var(--dl) infinite alternate;
}
:is(.svc.open, .an.on) .p1-b3 {
animation: p1B3 10s var(--ease) infinite both;
}
/* --- 003 · Paso 2 Demostración --- */
:is(.svc.open, .an.on) .p2-kv {
animation: p2Kpi 9s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .p2-br {
animation: p2Bar 9s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .p2-ln {
animation: p2Line 9s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .p2-ar {
animation: p2Area 9s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .p2-end {
animation: p2End 9s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .p2-cu {
animation: p2Cursor 9s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .p2-tt {
animation: p2Tip 9s var(--ease) infinite both;
}
/* --- 003 · Paso 3 Configuración --- */
:is(.svc.open, .an.on) .p3-sc {
animation: p3Scan 3s steps(6, end) infinite;
}
:is(.svc.open, .an.on) .p3-fl {
animation: p3Flow 0.8s linear infinite;
}
:is(.svc.open, .an.on) .p3-pg {
animation: p3Prog 8s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .p3-ok {
animation: p3Ok 8s var(--ease) infinite both;
}
:is(.svc.open, .an.on) .p3-u {
animation: p3User 8s var(--ease) var(--dl) infinite both;
}
/* --- 003 · Paso 4 Arranque --- */
:is(.svc.open, .an.on) .p4-ln {
animation: p3Flow 0.9s linear infinite;
}
:is(.svc.open, .an.on) .p4-pu {
animation: p1Ring 2.7s ease-out var(--dl) infinite both;
}
:is(.svc.open, .an.on) .p4-ck {
animation: p4Check 9s var(--ease) var(--dl) infinite both;
}
:is(.svc.open, .an.on) .p4-to {
animation: p4Toast 9s var(--ease) infinite both;
}
@keyframes anFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@keyframes anGrowX {
0% {
transform: scaleX(0);
}
18%,
86% {
transform: scaleX(1);
}
96%,
100% {
transform: scaleX(0);
}
}
@keyframes anGrowY {
0%,
6% {
transform: scaleY(0);
}
16%,
84% {
transform: scaleY(1);
}
94%,
100% {
transform: scaleY(0);
}
}
@keyframes anPop {
0%,
10% {
transform: scale(0);
}
16%,
86% {
transform: scale(1);
}
94%,
100% {
transform: scale(0);
}
}
@keyframes anBlink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.25;
}
}
@keyframes anWave {
0% {
transform: scaleY(0.35);
}
100% {
transform: scaleY(1);
}
}
@keyframes s1Move {
0%,
18% {
transform: translate(0, 0);
opacity: 1;
}
30%,
48% {
transform: translate(56px, -16px);
}
60%,
82% {
transform: translate(112px, 16px);
opacity: 1;
}
90% {
transform: translate(112px, 16px);
opacity: 0;
}
91% {
transform: translate(0, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes s1Today {
0% {
transform: translateX(-40px);
}
100% {
transform: translateX(56px);
}
}
@keyframes s1Scan {
0% {
transform: translateY(0);
}
100% {
transform: translateY(42px);
}
}
@keyframes s4Scan {
to {
transform: translateY(128px);
}
}
@keyframes s1Prog {
0% {
transform: scaleX(0);
}
80%,
92% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes s1Type {
0% {
transform: scaleX(0);
}
40%,
90% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
@keyframes s2In {
0% {
opacity: 0;
transform: translate(var(--dx), var(--dy));
}
9%,
82% {
opacity: 1;
transform: translate(0, 0);
}
92%,
100% {
opacity: 0;
transform: translate(0, 0);
}
}
@keyframes s2Cursor {
0% {
opacity: 0;
transform: translate(60px, -30px);
}
3% {
opacity: 1;
}
9% {
opacity: 1;
transform: translate(0, 0);
}
16% {
opacity: 1;
transform: translate(0, 0);
}
22%,
100% {
opacity: 0;
transform: translate(0, 0);
}
}
@keyframes s2Donut {
0%,
9% {
stroke-dashoffset: 100.5;
}
22%,
82% {
stroke-dashoffset: 35;
}
92%,
100% {
stroke-dashoffset: 100.5;
}
}
@keyframes s3Browser {
0% {
opacity: 0;
transform: none;
}
4%,
40% {
opacity: 1;
transform: none;
}
50%,
88% {
opacity: 1;
transform: translate(-38px, 6px) scale(0.82);
}
96%,
100% {
opacity: 0;
transform: translate(-38px, 6px) scale(0.82);
}
}
@keyframes s3Phone {
0%,
42% {
opacity: 0;
transform: translateX(40px);
}
52%,
88% {
opacity: 1;
transform: none;
}
96%,
100% {
opacity: 0;
transform: none;
}
}
@keyframes s3Build {
0%,
4% {
opacity: 0;
transform: translateY(8px);
}
10%,
100% {
opacity: 1;
transform: none;
}
}
@keyframes s3Wide {
0%,
6% {
transform: scaleX(0);
}
14%,
100% {
transform: scaleX(1);
}
}
@keyframes s3Pop {
0%,
8% {
transform: scale(0);
}
14%,
100% {
transform: scale(1);
}
}
@keyframes s3PhoneIn {
0%,
50% {
opacity: 0;
transform: translateY(8px);
}
57%,
100% {
opacity: 1;
transform: none;
}
}
@keyframes p1Ring {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.9);
opacity: 0;
}
}
@keyframes p1B1 {
0%,
8% {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
14%,
88% {
opacity: 1;
transform: none;
}
96%,
100% {
opacity: 0;
transform: none;
}
}
@keyframes p1B2 {
0%,
26% {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
32%,
88% {
opacity: 1;
transform: none;
}
96%,
100% {
opacity: 0;
transform: none;
}
}
@keyframes p1Typing {
0%,
44% {
opacity: 0;
}
47%,
57% {
opacity: 1;
}
59%,
100% {
opacity: 0;
}
}
@keyframes p1Dot {
0% {
transform: translateY(1.5px);
}
100% {
transform: translateY(-2.5px);
}
}
@keyframes p1B3 {
0%,
58% {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
64%,
88% {
opacity: 1;
transform: none;
}
96%,
100% {
opacity: 0;
transform: none;
}
}
@keyframes p2Kpi {
0%,
2% {
opacity: 0;
transform: translateY(10px);
}
10%,
90% {
opacity: 1;
transform: none;
}
97%,
100% {
opacity: 0;
transform: none;
}
}
@keyframes p2Bar {
0%,
6% {
transform: scaleY(0);
}
18%,
90% {
transform: scaleY(1);
}
97%,
100% {
transform: scaleY(0);
}
}
@keyframes p2Line {
0%,
28% {
stroke-dashoffset: 100;
}
52%,
90% {
stroke-dashoffset: 0;
}
97%,
100% {
stroke-dashoffset: 100;
}
}
@keyframes p2Area {
0%,
36% {
opacity: 0;
}
54%,
90% {
opacity: 1;
}
97%,
100% {
opacity: 0;
}
}
@keyframes p2End {
0%,
50% {
transform: scale(0);
}
55% {
transform: scale(1.4);
}
58%,
90% {
transform: scale(1);
}
97%,
100% {
transform: scale(0);
}
}
@keyframes p2Cursor {
0%,
40% {
opacity: 0;
transform: translate(-120px, 140px);
}
44% {
opacity: 1;
}
58% {
transform: translate(0, 0);
}
60% {
transform: translate(0, 0) scale(0.85);
}
62%,
88% {
opacity: 1;
transform: translate(0, 0);
}
94%,
100% {
opacity: 0;
transform: translate(0, 0);
}
}
@keyframes p2Tip {
0%,
61% {
opacity: 0;
transform: translateY(6px);
}
66%,
88% {
opacity: 1;
transform: none;
}
94%,
100% {
opacity: 0;
transform: none;
}
}
@keyframes p3Scan {
0% {
transform: translateY(0);
}
100% {
transform: translateY(144px);
}
}
@keyframes p3Flow {
to {
stroke-dashoffset: -16;
}
}
@keyframes p3Prog {
0%,
4% {
transform: scaleX(0);
}
44%,
90% {
transform: scaleX(1);
}
97%,
100% {
transform: scaleX(0);
}
}
@keyframes p3Ok {
0%,
44% {
transform: scale(0);
}
49% {
transform: scale(1.3);
}
52%,
90% {
transform: scale(1);
}
97%,
100% {
transform: scale(0);
}
}
@keyframes p3User {
0%,
48% {
opacity: 0;
transform: translateY(-14px);
}
56%,
90% {
opacity: 1;
transform: none;
}
97%,
100% {
opacity: 0;
transform: none;
}
}
@keyframes p4Check {
0%,
8% {
transform: scale(0);
}
12% {
transform: scale(1.25);
}
15%,
90% {
transform: scale(1);
}
97%,
100% {
transform: scale(0);
}
}
@keyframes p4Toast {
0%,
58% {
opacity: 0;
transform: translateY(-18px);
}
64%,
88% {
opacity: 1;
transform: none;
}
95%,
100% {
opacity: 0;
transform: translateY(-18px);
}
}
@media (prefers-reduced-motion: reduce) {
.an * {
animation: none !important;
}
}
/* ==========================================================
TIPOGRAFÍA — escala medida en la plantilla con Playwright
Inter con tamaño óptico display (= Inter Display), tracking negativo
según el tamaño y peso 500 en títulos y cifras:
100–120 px 500 lh 0.9–1.1 -0.05em 35 px 500 lh 1.2 -0.04em
48–70 px 500 lh 1.1 -0.05em 28 px 400 lh 1.4 -0.05em
24 px 400 lh 1.5 -0.03em 21 px 400 lh 1.4 -0.05em
13–17 px 400 lh 1.3 -0.04em
========================================================== */
body {
font-variation-settings: "opsz" 32;
}
:where(body *) {
letter-spacing: -0.04em;
}
/* lo que va dentro de una frase (palabras de color, negritas, enlaces)
conserva el espaciado de su bloque */
:where(span, b, strong, em, i, small, sup, a, label) {
letter-spacing: inherit;
}
/* las simulaciones imitan la app real: tracking y tamaño óptico de texto */
:where(.sim, .sim *, .an-box, .an-box *) {
letter-spacing: normal;
}
.sim,
.an-box {
font-variation-settings: normal;
}
/* títulos grandes: -0.05em */
.hero-title,
.big-title,
.manifest-body,
.f-talk h2,
.sec-lead,
.w-lineup h3,
.svc-summary h3,
.svc.open .svc-num {
letter-spacing: -0.05em;
}
.manifest-body {
font-weight: 500;
line-height: 1.1;
}
/* piezas en línea con tamaño propio: llevan su propio tracking */
.logo,
.bb-wm,
.sec-tag b,
.b .count,
.pc-num small,
.clock-col .utc {
letter-spacing: -0.04em;
}
.bb-tag,
.clock-col em {
letter-spacing: -0.05em;
}
/* fila "001": etiqueta 28/500, frase 48/500 */
.sec-tag b {
font-size: 28px;
font-weight: 500;
line-height: 1.2;
}
.sec-tag span {
font-size: 17px;
}
.sec-lead {
font-size: clamp(32px, 3.34vw, 48px);
font-weight: 500;
line-height: 1.1;
}
.sec-note {
line-height: 1.3;
}
/* 48/500 */
.w-lineup h3,
.svc-summary h3 {
font-size: clamp(36px, 3.34vw, 48px);
font-weight: 500;
line-height: 1.1;
}
/* 70/500 y 35/500: números de servicios, títulos destacados, pasos y cifras */
.svc.open .svc-num {
font-size: 70px;
font-weight: 500;
line-height: 1.1;
}
.svc-num,
.w-featured h3,
.proc-card h4,
.bat-num,
.evo-score b {
font-size: 35px;
font-weight: 500;
line-height: 1.2;
}
.b-uptime .big {
font-size: clamp(64px, 5.56vw, 80px);
font-weight: 600;
line-height: 1;
}
/* 28/500: titulares de bloque */
.demo .demo-title,
.f-badge p,
.f-form h4,
.f-news h4,
.f-follow h4,
.f-offer h4 {
font-size: 28px;
font-weight: 500;
line-height: 1.2;
}
/* 28/400 */
.wcard h3,
.svc-body h4,
.proc-head,
.b h5 {
font-size: 28px;
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.05em;
}
.w-featured h3 {
letter-spacing: -0.04em;
}
/* 24/400 */
.proc-card p,
.b-uptime .lbl,
.news-track span {
font-size: 24px;
line-height: 1.5;
letter-spacing: -0.03em;
}
.gain h4 {
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.04em;
}
/* 21/400: etiquetas, enlaces de cierre y textos de apoyo grandes */
.tagline,
.hstat-txt b,
.wcard .eyebrow,
.w-lineup p,
.lu-foot,
.status-cta,
.svc-foot,
.clock-col b,
.b-uptime .cap,
.news > span,
.f-brand .mail,
.f-quote p,
.f-links a,
.field {
font-size: 21px;
line-height: 1.4;
letter-spacing: -0.05em;
}
.tagline b {
font-weight: 700;
}
/* 17/400 */
.wcard .wc-sub,
.svc-body p,
.svc-summary p,
.b .sub,
.f-form p,
.f-news > p,
.f-news small,
.hstat-txt > .mk:last-child {
font-size: 17px;
line-height: 1.3;
}
.f-offer ul,
.f-brand address {
font-size: 17px;
line-height: 1.5;
letter-spacing: -0.03em;
}
/* 15/400 */
.lu-head,
.f-copy,
.proc-cta p,
.gain p {
font-size: 15px;
line-height: 1.3;
}
/* --- páginas de producto, con la misma escala --- */
/* 48/500: titulares de bloque */
.svc-intro h2,
.svc-detail h3 {
font-size: clamp(36px, 3.34vw, 48px);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.05em;
}
.svc-detail .num {
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.05em;
}
.p-cta h2 {
line-height: 1.05;
letter-spacing: -0.05em;
}
/* 28/400: subtítulos, títulos de tarjeta y frases destacadas */
.svc-detail .lead,
.p-card h4,
.p-flow h4,
.p-note p {
font-size: 28px;
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.05em;
}
/* 24/400: frases de "¿Te suena?" */
.p-pain p {
font-size: 24px;
line-height: 1.5;
letter-spacing: -0.03em;
}
/* 21/400 */
.svc-intro p,
.svc-intro .sum-foot,
.svc-detail .tag,
.p-cta p {
font-size: 21px;
line-height: 1.4;
letter-spacing: -0.05em;
}
/* 17/400 */
.svc-detail p,
.p-card p,
.p-flow > p {
font-size: 17px;
line-height: 1.3;
}
/* ==========================================================
CELULAR Y TABLETA — ajustes finales (auditoría con Playwright)
Van al final para mandar sobre las reglas de cada sección.
========================================================== */
@media (max-width: 900px) {
/* el encabezado lleva fondo para no montarse sobre el texto al hacer scroll */
.topbar {
padding: 14px var(--pad);
background: color-mix(in srgb, var(--noche) 86%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.logo img {
height: 42px;
}
.page-top {
padding-top: 120px;
}
.page-top .big-title {
margin-bottom: 50px;
}
/* sin efecto cortina: en celular la parte de contacto es más alta que la
pantalla y la capa de encima alcanzaba a tapar "Lo que ofrecemos" */
.f-stick {
position: relative;
top: 0;
}
.f-over {
box-shadow: none;
}
/* la parte de contacto ya tiene "Síguenos": la fila repetida de redes sobra */
.f-soc {
display: none !important;
}
/* capturas de módulos: se ve el contenido, no solo el menú lateral */
.px.real .px-img {
background-position: 28% top;
}
}
@media (max-width: 560px) {
/* ritmo de la plantilla en celular: 225px entre el cierre de una sección
y el título siguiente, título → fila 109px, fila → tarjetas 100px */
.section {
padding: 120px 0 85px;
}
/* tarjetas a 4px del borde, textos a 16px (como la plantilla) */
.section > .wrap,
.p-sec > .wrap {
padding-left: 4px;
padding-right: 4px;
}
.big-title,
.sec-row,
.status,
.p-caption {
padding-left: 12px;
padding-right: 12px;
}
.big-title,
.page-top .big-title,
.p-sec .big-title {
font-size: clamp(40px, 13.8vw, 64px);
margin-bottom: 60px;
}
/* fila de sección: etiqueta a la izquierda y frase a la derecha */
.sec-row,
.p-sec .sec-row {
grid-template-columns: minmax(84px, max-content) 1fr;
column-gap: 12px;
row-gap: 16px;
margin-bottom: 100px;
}
.sec-tag b {
font-size: 21px;
}
.sec-tag span {
font-size: 15px;
}
.sec-lead {
grid-column: 2;
font-size: 21px;
line-height: 1.4;
}
.sec-note {
grid-column: 2;
font-size: 17px;
}
/* entrada de cada producto: el texto grande no ocupa toda la pantalla */
.svc-intro {
gap: 32px;
padding: 32px 20px 20px;
}
.svc-intro h2 {
font-size: 32px;
line-height: 1.12;
}
/* "Hablemos." cabe completo en la pantalla */
.f-talk h2 {
font-size: 18.5vw;
}
/* pie: una columna de enlaces, con alto suficiente para el dedo */
.f-links {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px 24px !important;
}
.f-links a {
width: auto;
padding: 6px 0;
}
.f-offer li a,
.f-brand address a {
display: inline-block;
padding: 6px 0;
}
.f-icons {
gap: 6px;
margin-left: -10px;
}
.f-icons a {
display: grid;
place-items: center;
width: 44px;
height: 44px;
}
/* simulaciones de las tarjetas de producto: dentro de la tarjeta, sin scroll lateral */
.wcard {
overflow: hidden;
}
.wcard .sim-stage {
padding: 0;
}
.wcard .sim-stage .sim,
.wcard .sim-stage .sim.sim-short,
.w-featured .sim-stage .sim {
position: absolute;
right: 12px;
bottom: 0;
transform-origin: bottom right;
transform: translateY(90px) scale(0.6);
}
.w-featured {
min-height: 540px;
}
/* etiquetas de las barras de avance: cortan con guion, no a mitad de letra */
.evo-bar > span {
font-size: 11px;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: normal;
}
/* relojes: tres por fila en vez de una columna larga */
.clocks {
grid-template-columns: repeat(3, 1fr);
}
.clock {
width: 72px;
height: 72px;
}
}
/* con el menú abierto la barra superior se vuelve transparente para que se vea el logo del panel */
@media (max-width: 900px) {
body.menu-open .topbar {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom-color: transparent;
}
.menu-logo {
top: 14px;
height: 42px;
}
}
/* ==========================================================
SEO — capturas como ![]()
reales, subtítulo del H1 y migas
========================================================== */
/* La captura va como ![]()
dentro de .px: indexable y con alt.
Hereda posición, filtro y transiciones de .px .px-img. */
.px img.px-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.px.real img.px-img {
object-position: left top;
}
.svc-intro .px.real img.px-img {
object-position: center;
}
@media (max-width: 560px) {
.px.real img.px-img {
object-position: 28% top;
}
}
/* Subtítulo con palabra clave dentro del H1 de cada subpágina */
.big-title small {
display: block;
margin-top: 22px;
font-size: clamp(18px, 2vw, 26px);
line-height: 1.3;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--text-2);
max-width: 720px;
}
/* Migas de pan */
.crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 28px;
font-size: 15px;
line-height: 1.3;
color: var(--muted);
}
.crumbs a {
text-decoration: none;
transition: color 0.2s;
}
.crumbs a:hover,
.crumbs a:focus-visible {
color: var(--text);
}
.crumbs .sep {
color: var(--muted-2);
}
.crumbs [aria-current="page"] {
color: var(--text-2);
}
@media (max-width: 560px) {
.crumbs {
padding-left: 12px;
padding-right: 12px;
margin-bottom: 20px;
font-size: 14px;
}
}
/* Preguntas frecuentes (Alium Obra) */
.faq {
display: grid;
gap: 4px;
}
.faq details {
background: var(--card);
border-radius: var(--r);
padding: 0 28px;
}
.faq summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 24px 0;
font-size: 21px;
line-height: 1.3;
font-weight: 500;
letter-spacing: -0.03em;
color: var(--text);
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "+";
flex: none;
font-size: 28px;
font-weight: 400;
color: var(--accent-ink);
transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after {
transform: rotate(45deg);
}
.faq details p {
padding: 0 0 26px;
max-width: 820px;
font-size: 18px;
line-height: 1.5;
color: var(--text-2);
}
@media (max-width: 560px) {
.faq details {
padding: 0 16px;
}
.faq summary {
font-size: 18px;
padding: 18px 0;
}
}