/* ========================================================================= SyncMedical — Landing de captación (CRECE) Branding: SyncMedical (paleta del CSS real) · Tipografía: DM Sans (títulos) + Roboto (texto) Layout/motion: fluido y moderno (ref. nubidoc). Full-bleed + contenedor ancho. ========================================================================= */ /* ---------- Tipografía: DM Sans (Regular 400 / Medium 500 / SemiBold 600 titulares) ---------- Cargada desde Google Fonts en el de cada HTML (display=swap). */ /* ---------- Tokens ---------- */ :root { /* Paleta rebranding SyncMedical (Verde British) */ --teal: #1d482d; /* verde corporativo: accent, botones, enlaces */ --teal-hover: #173a24; /* verde British oscuro (hover) */ --teal-2: #618e63; /* verde claro: highlights / acentos */ --teal-2-hover:#4e7550; --sage: #b2d3a8; /* verde claro suave (degradados) */ --deep: #1d482d; /* verde profundo: secciones oscuras */ --deep-2: #00220b; /* verde más oscuro (degradados/profundidad) */ --mint: #618e63; /* verde claro: acentos sobre fondo oscuro */ --near-black: #181818; /* negro de marca (footer, banner) */ --bg: #ffffff; --bg-soft: #f9f9ed; /* crema de marca (lienzo suave) */ --bg-mist: #e7efe6; /* lavado verde muy suave */ /* Texto (contraste verificado AA) */ --ink: #181818; /* negro de marca para todos los textos */ --ink-soft: #4b5a4e; /* secundario sobre claro (gris verdoso) */ --on-deep: #eef3ee; /* cuerpo sobre fondo oscuro */ --on-deep-soft:#bccabd; /* secundario sobre oscuro */ --line: #dce3dc; /* bordes sutiles (gris verdoso de marca) */ --line-deep: rgba(178,211,168,.28); /* Tipografía: DM Sans en toda la marca (Regular/Medium/SemiBold) */ --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "DM Sans", system-ui, sans-serif; /* Escala fluida (ratio ~1.25) */ --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem); /* etiquetas / meta */ --step-0: clamp(1rem, 0.95rem + 0.22vw, 1.13rem); /* cuerpo */ --step-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); /* lead / h3 / títulos de tarjeta */ --step-2: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); /* subtítulos / citas */ --step-3: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); /* títulos de sección (h2) */ --step-hero: clamp(1.95rem, 1.5rem + 2vw, 2.7rem); /* titular hero (el mayor) */ /* números destacados (consistentes) */ --num-lg: clamp(2.2rem, 1.7rem + 2vw, 3rem); /* banner de autoridad */ --num: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); /* stats en tarjetas */ /* Espaciado / radios */ --section-y: clamp(4rem, 3rem + 6vw, 8.5rem); --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem); --container: 1320px; --container-wide: 1560px; --radius-s: 10px; --radius: 18px; --radius-l: 28px; --radius-xl: 40px; --shadow-s: 0 1px 2px rgba(29,72,45,.06), 0 2px 8px rgba(29,72,45,.05); --shadow: 0 8px 24px rgba(29,72,45,.08), 0 2px 6px rgba(29,72,45,.05); --shadow-l: 0 28px 70px -28px rgba(29,72,45,.32), 0 10px 28px -18px rgba(29,72,45,.22); --ease: cubic-bezier(.22,1,.36,1); /* ease-out-quint */ --ease-soft: cubic-bezier(.33,.68,.36,1); /* z-index semántico */ --z-marquee: 1; --z-sticky: 60; --z-header: 70; --z-stickycta: 80; --z-toast: 95; } /* ---------- Reset ligero ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font); font-weight: 400; font-size: var(--step-0); line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* evita scroll horizontal sin romper position: sticky */ } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } input, textarea, select, button { font: inherit; } ul { list-style: none; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; } h1 { letter-spacing: -0.035em; } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); background: var(--deep); color: #fff; padding: .8rem 1.4rem; border-radius: 0 0 12px 12px; z-index: 200; transition: top .2s var(--ease); } .skip-link:focus { top: 0; } /* ---------- Layout primitives: full-bleed + contenedor ancho ---------- */ .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); } .container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; } .container--wide { width: min(100% - var(--gutter) * 2, var(--container-wide)); } /* superficies full-bleed */ .bleed { width: 100%; } .surface-soft { background: var(--bg-soft); } .surface-mist { background: var(--bg-mist); } .surface-deep { background: var(--deep); color: var(--on-deep); } .surface-deep h1, .surface-deep h2, .surface-deep h3, .surface-deep h4 { color: #fff; } /* grid de 12 columnas */ .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--step--1); font-weight: 500; letter-spacing: .01em; color: var(--teal); padding: .4rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--teal) 9%, transparent); } .surface-deep .eyebrow { color: var(--mint); background: color-mix(in srgb, var(--mint) 14%, transparent); } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ---------- Logotipo (wordmark) ---------- */ .brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--teal); display: inline-block; white-space: nowrap; } .brand__s { color: var(--teal-2); } .brand--light { color: #fff; } .brand--light .brand__s { color: var(--teal-2); } .header__logo .brand { font-size: clamp(1.3rem, 1.05rem + .7vw, 1.6rem); } .hero__logo-mobile .brand { font-size: clamp(1.55rem, 4.6vw, 2rem); } .footer__logo .brand { font-size: 1.45rem; } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-weight: 500; line-height: 1.15; text-align: center; padding: clamp(.85rem, .7rem + .4vw, 1.05rem) clamp(1.3rem, 1rem + 1vw, 1.9rem); border-radius: 999px; position: relative; isolation: isolate; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); will-change: transform; } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { background: var(--teal); color: #fff; box-shadow: 0 10px 24px -10px rgba(29,72,45,.7); } .btn--primary:hover { background: var(--teal-hover); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(29,72,45,.6); } .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--teal); transform: translateY(-2px); } .btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow); } .btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); } .btn--block { width: 100%; } .btn .arrow { transition: transform .3s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } .btn--lg { font-size: var(--step-1); } /* ---------- Header ---------- */ .header { position: sticky; top: 0; z-index: var(--z-header); transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(.8rem, .6rem + .6vw, 1.15rem); } .header.is-scrolled { background: color-mix(in srgb, #fff 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 6px 20px -16px rgba(29,72,45,.4); } .header__logo img { height: clamp(26px, 22px + 1vw, 34px); width: auto; } .header__cta { display: none; } @media (min-width: 800px) { .header__cta { display: inline-flex; } } /* ---------- HERO ---------- */ .hero { position: relative; overflow: clip; padding-top: clamp(2.5rem, 2rem + 3vw, 5rem); padding-bottom: var(--section-y); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 85% 95%, color-mix(in srgb, var(--sage) 70%, transparent), transparent 72%), radial-gradient(60% 55% at 92% 6%, color-mix(in srgb, var(--sage) 38%, transparent), transparent 70%), linear-gradient(160deg, #ffffff 0%, var(--bg-soft) 55%); } .hero .grid12 { align-items: center; justify-items: center; } /* Visual del hero oculto temporalmente -> hero centrado a una columna */ .hero__visual { display: none; } .hero__copy { grid-column: 1 / -1; max-width: 72rem; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero__copy .hero__bullets { margin-inline: auto; text-align: left; } .hero__copy .hero__actions { justify-content: center; } /* logo en el hero: solo en mobile (el header se oculta) */ .hero__logo-mobile { display: none; } .hero__logo-mobile img { width: clamp(150px, 42vw, 190px); height: auto; } @media (max-width: 800px) { .header { display: none; } .hero__logo-mobile { display: block; margin: 0 auto 1.4rem; } } .hero__h1 { font-size: var(--step-1); font-weight: 500; color: var(--teal); letter-spacing: -0.01em; margin-top: 1rem; line-height: 1.2; } .hero__promise { font-size: var(--step-hero); font-weight: 500; margin-top: .7rem; max-width: 24ch; } /* en pantallas grandes la promesa cae a dos líneas (≈47 car. por línea) */ @media (min-width: 1100px) { .hero__promise { max-width: 50ch; } } .hero__promise .hl { color: var(--teal-2); } .hero__sub { font-size: var(--step-1); color: var(--ink-soft); font-weight: 400; margin-top: 1.4rem; max-width: 56ch; line-height: 1.5; } .hero__bullets { margin-top: 1.6rem; display: grid; gap: .7rem; } .hero__bullets li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 500; color: var(--ink); max-width: 52ch; } /* desktop: H2 a dos líneas y bullets a una línea cada uno */ @media (min-width: 1100px) { .hero__sub { max-width: 92ch; } .hero__bullets li { max-width: none; white-space: nowrap; } } .hero__bullets .check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); } .hero__lead { margin-top: 1.8rem; color: var(--ink-soft); font-weight: 500; } .hero__actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; } .hero__guarantee { font-size: var(--step--1); color: var(--ink-soft); display: inline-flex; align-items: center; gap: .5rem; margin-top: clamp(1rem, .7rem + 1vw, 1.6rem); margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); } /* Visual del hero: panel "conciliación" tipo cuadro de mando */ .dashcard { background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-l); padding: clamp(1.1rem, .9rem + 1vw, 1.6rem); position: relative; border: 1px solid var(--line); } .dashcard__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .dashcard__title { font-weight: 500; color: var(--ink); font-size: var(--step-0); } .dashcard__pill { font-size: var(--step--1); font-weight: 500; color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); padding: .3rem .7rem; border-radius: 999px; } .dashcard__big { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; } .dashcard__big .num { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 500; color: var(--ink); letter-spacing: -.03em; } .dashcard__big .delta { color: var(--teal); font-weight: 500; } .dashcard__cap { color: var(--ink-soft); font-size: var(--step--1); margin-bottom: 1.1rem; } .dashcard__bars { display: grid; gap: .8rem; } .barrow { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: .8rem; font-size: var(--step--1); } .barrow .lbl { color: var(--ink-soft); } .barrow .track { height: 10px; border-radius: 999px; background: var(--bg-mist); overflow: hidden; } .barrow .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-2), var(--teal)); width: var(--w, 60%); transform-origin: left; } .barrow .val { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .dashcard__foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); font-size: var(--step--1); } .dashcard__foot .ok { color: var(--teal); } .floatchip { position: absolute; background: var(--deep); color: #fff; border-radius: 14px; padding: .7rem .95rem; box-shadow: var(--shadow-l); font-size: var(--step--1); font-weight: 500; display: flex; align-items: center; gap: .55rem; } .floatchip .big { font-size: var(--step-1); color: var(--mint); } .floatchip--tr { top: -18px; right: clamp(-8px, -2vw, 8px); } .floatchip--bl { bottom: -22px; left: -10px; } @media (max-width: 520px) { .floatchip--bl { left: 0; } .floatchip--tr { right: 0; } } /* ---------- Banner de autoridad (stats + count-up) ---------- */ .hero .statsbanner { margin-top: clamp(2.2rem, 1.4rem + 3vw, 4.5rem); } .hero__logos { margin-top: clamp(1.8rem, 1.2rem + 2vw, 3rem); } .statsbanner { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--near-black); border-radius: var(--radius-xl); box-shadow: var(--shadow-l); padding: clamp(1.6rem, 1.1rem + 2vw, 2.8rem) clamp(1rem, .6rem + 1.5vw, 2rem); position: relative; } .stat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: clamp(.6rem, .3rem + 1vw, 1.4rem) clamp(.8rem, .4rem + 1.5vw, 1.8rem); } .stat + .stat::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,.14); } .stat__value { font-family: var(--font-display); font-weight: 700; line-height: 1; color: #fff; letter-spacing: -.03em; display: flex; align-items: baseline; gap: .35rem; justify-content: center; } .stat__num { font-size: var(--num-lg); font-variant-numeric: tabular-nums; } .stat__pre, .stat__unit { font-size: var(--step-1); font-weight: 500; color: rgba(255,255,255,.7); letter-spacing: -.01em; } .stat__label { color: rgba(255,255,255,.72); font-size: var(--step-0); max-width: 24ch; line-height: 1.4; } @media (max-width: 720px) { .statsbanner { grid-template-columns: 1fr; } .stat + .stat::before { left: 12%; right: 12%; top: 0; bottom: auto; width: auto; height: 1px; } } .authority__label { text-align: center; color: var(--ink-soft); font-weight: 500; margin-bottom: clamp(1.2rem,.8rem + 1.5vw,2rem); } .marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; gap: clamp(2.5rem, 1rem + 5vw, 6rem); animation: marquee 70s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { flex: 0 0 auto; display: grid; place-items: center; height: 56px; } .marquee__item img { max-height: 46px; width: auto; object-fit: contain; filter: grayscale(1) opacity(.85); transition: filter .35s var(--ease), transform .35s var(--ease); } .marquee__item img:hover { filter: grayscale(0) opacity(1); transform: scale(1.04); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- Sección 3: comparativa Sin / Con ---------- */ .compare__head { max-width: min(100%, 72rem); margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); } .compare__head h2 { font-size: clamp(1.45rem, 1.05rem + 1.3vw, 1.95rem); } .tablist { display: inline-flex; padding: 5px; gap: 4px; border-radius: 999px; background: color-mix(in srgb, var(--mint) 16%, transparent); margin-bottom: 1.6rem; } .surface-deep .tablist { background: rgba(255,255,255,.08); } .tab { border-radius: 999px; padding: .6rem 1.2rem; font-weight: 500; color: var(--ink-soft); transition: color .25s var(--ease); position: relative; z-index: 1; } .surface-deep .tab { color: var(--on-deep-soft); } .tab[aria-selected="true"] { color: #fff; } .tab--con[aria-selected="true"] { color: #fff; } .tablist { position: relative; } .tab__indicator { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink-soft); z-index: 0; transition: transform .4s var(--ease), background-color .4s var(--ease); } .tablist[data-active="con"] .tab__indicator { transform: translateX(100%); background: var(--teal); } .tablist[data-active="sin"] .tab__indicator { background: #b3413f; } .compare__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, .5rem + 2vw, 2rem); } @media (max-width: 800px) { .compare__cols { grid-template-columns: 1fr; } } .cmpcol { border-radius: var(--radius-l); padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); transition: opacity .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); } .cmpcol h3 { font-size: var(--step-2); display: flex; align-items: center; gap: .7rem; margin-bottom: 1.3rem; } .cmpcol__badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; } .cmpcol ul { display: grid; gap: 1rem; } .cmpcol li { display: flex; gap: .8rem; align-items: flex-start; line-height: 1.45; } .cmpcol li .ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px; } .cmpcol--sin { background: #fff; border: 1px solid var(--line); color: var(--ink); } .cmpcol--sin h3 { color: #8f3b3a; } .cmpcol--sin .cmpcol__badge { background: #fdecec; color: #c0413f; } .cmpcol--sin li .ic { background: #fdecec; color: #c0413f; } .cmpcol--con { background: linear-gradient(160deg, var(--deep), var(--deep-2)); color: var(--on-deep); box-shadow: var(--shadow-l); } .cmpcol--con h3 { color: #fff; } .cmpcol--con .cmpcol__badge { background: color-mix(in srgb, var(--mint) 22%, transparent); color: var(--mint); } .cmpcol--con li .ic { background: color-mix(in srgb, var(--mint) 18%, transparent); color: var(--mint); } .cmpcol--con li { color: var(--on-deep); } /* énfasis controlado por toggle (desktop = ambas visibles) */ @media (min-width: 801px) { .compare__cols[data-active="sin"] .cmpcol--con, .compare__cols[data-active="con"] .cmpcol--sin { opacity: .55; transform: scale(.985); } .compare__cols[data-active="sin"] .cmpcol--sin, .compare__cols[data-active="con"] .cmpcol--con { transform: scale(1); } .compare__cols[data-active="con"] .cmpcol--con { box-shadow: var(--shadow-l); } } /* mobile = alterna */ @media (max-width: 800px) { .compare__cols[data-active="sin"] .cmpcol--con, .compare__cols[data-active="con"] .cmpcol--sin { display: none; } } .compare__cta { margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); display: flex; justify-content: center; } /* ---------- Sección 4: solución (bento asimétrico) ---------- */ .solution__head { max-width: 50ch; margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem); } .solution__head h2 { font-size: var(--step-3); } .br-d { display: none; } @media (min-width: 1100px) { .solution__head { max-width: none; } .solution__head h2 { max-width: none; text-wrap: wrap; } .br-d { display: inline; } } .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, .6rem + 1.5vw, 1.6rem); } .feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); display: flex; flex-direction: column; gap: .9rem; position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: color-mix(in srgb, var(--teal) 30%, var(--line)); } .feature__icon { color: var(--teal); line-height: 0; } .feature__icon .icon { width: 38px; height: 38px; stroke-width: 1.75; } .feature h3 { font-size: var(--step-1); } .feature p { color: var(--ink-soft); } /* asimetría: bloque 1 grande, 3 medianos */ .feature--a { grid-column: span 7; } .feature--b { grid-column: span 5; } .feature--c { grid-column: span 5; } .feature--d { grid-column: span 7; } .feature--a { background: linear-gradient(155deg, var(--bg-mist), #fff 60%); } @media (max-width: 860px) { .feature { grid-column: 1 / -1 !important; } } /* destaque numérico dentro del feature grande */ .feature__metric { margin-top: auto; display: flex; align-items: baseline; gap: .6rem; } .feature__metric .n { font-size: var(--num); font-weight: 500; color: var(--teal); letter-spacing: -.03em; } .feature__metric .t { color: var(--ink-soft); font-size: var(--step--1); max-width: 22ch; } /* ---------- Sección 5: prueba social ---------- */ .proof { position: relative; overflow: clip; } .proof::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(45% 60% at 90% 0%, color-mix(in srgb, var(--sage) 45%, transparent), transparent 70%), var(--bg-soft); } .testi { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.2rem,.8rem + 2vw,2.4rem); align-items: stretch; } .testi__quote { grid-column: 1 / span 7; } .testi__stats { grid-column: 8 / span 5; display: grid; gap: 1rem; align-content: center; } @media (max-width: 920px) { .testi__quote { grid-column: 1/-1; } .testi__stats { grid-column: 1/-1; grid-auto-flow: row; } } .quotecard { background: linear-gradient(160deg, var(--deep), var(--deep-2)); color: var(--on-deep); border-radius: var(--radius-xl); padding: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem); position: relative; height: 100%; box-shadow: var(--shadow-l); overflow: hidden; } .quotecard__mark { font-size: 7rem; line-height: .6; color: var(--mint); opacity: .35; font-weight: 700; height: 2.4rem; } .quotecard blockquote { font-size: var(--step-2); line-height: 1.32; font-weight: 500; color: #fff; letter-spacing: -.02em; } .quotecard__author { margin-top: 1.8rem; display: flex; align-items: center; gap: 1rem; } .avatar { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--mint) 22%, transparent); color: var(--mint); font-weight: 500; font-size: var(--step-1); } .avatar--photo { display: block; overflow: hidden; padding: 0; } .avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .quotecard__name { font-weight: 500; color: #fff; } .quotecard__role { color: var(--on-deep-soft); font-size: var(--step--1); } .quotecard__brand { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-deep); display: flex; align-items: center; gap: .8rem; } .quotecard__brand span { font-size: var(--step--1); color: var(--on-deep-soft); } .quotecard__brand img { height: 30px; width: auto; } .statcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.2rem, 1rem + 1vw, 1.7rem); display: flex; flex-direction: column; gap: .35rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .statcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .statcard .v { font-size: var(--num); font-weight: 500; color: var(--teal); letter-spacing: -.03em; line-height: 1; } .statcard .t { color: var(--ink-soft); font-size: var(--step--1); } @media (max-width: 920px) { .statcard { align-items: center; text-align: center; } } /* slider reseñas */ .reviews { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); } .reviews__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; } .reviews__head h3 { font-size: var(--step-2); } .slider { position: relative; } .slider__viewport { overflow: hidden; } .slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 380px); gap: clamp(1rem, .6rem + 1.5vw, 1.6rem); align-items: stretch; /* todas las tarjetas con el mismo alto */ scroll-snap-type: x mandatory; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 1rem; -ms-overflow-style: none; scrollbar-width: none; } .slider__track::-webkit-scrollbar { display: none; } .review { scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); display: flex; flex-direction: column; gap: 1rem; } .review__stars { color: var(--teal); letter-spacing: .15em; font-size: .95rem; } .review p { font-size: var(--step-1); color: var(--ink); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .review.is-expanded p { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .review__more { align-self: flex-start; margin-top: -.3rem; color: var(--teal); font-weight: 500; font-size: var(--step--1); text-decoration: underline; text-underline-offset: 2px; transition: color .2s var(--ease); } .review__more:hover { color: var(--teal-hover); } .review__meta { margin-top: auto; display: flex; align-items: center; gap: .8rem; } .review .avatar { width: 44px; height: 44px; font-size: var(--step-0); background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal); } .review__name { font-weight: 500; color: var(--ink); } .review__role { color: var(--ink-soft); font-size: var(--step--1); } .slider__nav { display: flex; gap: .6rem; } .slider__btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; box-shadow: 0 8px 18px -8px rgba(29,72,45,.6); transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease), opacity .2s var(--ease); } .slider__btn:hover { background: var(--teal-hover); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(29,72,45,.55); } .slider__btn:active { transform: translateY(0) scale(.96); } .slider__btn:disabled { background: #fff; color: var(--teal-2); box-shadow: inset 0 0 0 1.5px var(--line); opacity: .6; cursor: not-allowed; transform: none; } /* carruseles: arrastrar con ratón/touch */ .slider__track { cursor: grab; } .slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; } /* ---------- Sección 6: proceso (imagen izq. + contenido der.) ---------- */ .process__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.6rem, 1rem + 3vw, 4rem); align-items: stretch; } .process__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); } .process__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .process__grid { grid-template-columns: 1fr; } .process__media { height: clamp(260px, 50vw, 400px); } } .process__head { max-width: 46ch; margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); } .process__head h2 { font-size: var(--step-3); } /* Proceso vertical tipo timeline */ .process { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, .7rem + 1vw, 1.6rem); } .pstep { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, .7rem + 1vw, 1.6rem); align-items: stretch; } /* activación de los pasos acompañando el scroll */ .js .pstep { opacity: .4; transition: opacity .45s var(--ease), transform .45s var(--ease); } .js .pstep.is-active { opacity: 1; } .js .pstep .pstep__num, .js .pstep .pstep__card { transition: background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); } /* estado inactivo: número en gris, tarjeta plana */ .js .pstep:not(.is-active) .pstep__num { background: #cdd8d8; color: var(--ink-soft); box-shadow: none; } .js .pstep.is-active .pstep__card { border-color: color-mix(in srgb, var(--teal) 30%, var(--line)); box-shadow: var(--shadow); transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .js .pstep { opacity: 1 !important; transition: none !important; } } .pstep__num { position: relative; z-index: 1; flex: 0 0 auto; width: clamp(44px, 3.4vw, 56px); height: clamp(44px, 3.4vw, 56px); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: #fff; background: var(--teal); box-shadow: 0 6px 16px -6px rgba(29,72,45,.6); } /* línea conectora vertical entre pasos */ .pstep:not(:last-child)::before { content: ""; position: absolute; z-index: 0; top: clamp(44px, 3.4vw, 56px); bottom: calc(-1 * clamp(1rem, .7rem + 1vw, 1.6rem)); left: calc(clamp(44px, 3.4vw, 56px) / 2); width: 2px; transform: translateX(-50%); background: linear-gradient(var(--teal), color-mix(in srgb, var(--teal) 35%, transparent)); } .pstep__card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.1rem, .9rem + 1vw, 1.7rem) clamp(1.2rem, 1rem + 1vw, 1.9rem); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .pstep:hover .pstep__card { transform: translateX(4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--teal) 25%, var(--line)); } .pstep__title { font-size: var(--step-1); color: var(--ink); margin-bottom: .35rem; } .pstep__card p { color: var(--ink-soft); } .process__cta { margin-top: clamp(1.8rem,1.2rem + 2vw,3rem); display: flex; justify-content: center; } /* ---------- Sección 8: equipo ---------- */ .team { position: relative; overflow: clip; } .team__intro { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.5rem,1rem + 2vw,3rem); align-items: end; margin-bottom: clamp(1.8rem,1.2rem + 2vw,3rem); } .team__intro .lead { grid-column: 1 / -1; } .team__intro .lead h2 { font-size: var(--step-3); } /* Marquee de equipo: movimiento continuo en loop */ .team__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .team__track { display: flex; width: max-content; gap: clamp(1rem,.6rem + 1vw,1.5rem); padding: 0 clamp(1.25rem, 0.6rem + 3vw, 3rem); animation: team-marquee 60s linear infinite; will-change: transform; } .team__marquee:hover .team__track { animation-play-state: paused; } @keyframes team-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .member { flex: 0 0 min(74vw, 250px); } .member__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-mist); position: relative; } .member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .member:hover .member__photo img { transform: scale(1.05); } .member__photo::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(29,72,45,.5), transparent 45%); opacity:0; transition: opacity .4s var(--ease); } .member:hover .member__photo::after { opacity: 1; } .member__name { margin-top: .9rem; font-weight: 500; color: var(--ink); } .member__role { color: var(--ink-soft); font-size: var(--step--1); } /* ---------- Sección 10: FAQs (dos columnas) ---------- */ .faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 1rem + 3vw, 4rem); align-items: start; } .faq__media { width: 100%; border-radius: var(--radius-xl); overflow: hidden; position: sticky; top: 96px; box-shadow: var(--shadow); height: clamp(460px, 60vh, 660px); } .faq__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); } .faq__img.is-active { opacity: 1; } .faq__dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; gap: 8px; justify-content: center; filter: drop-shadow(0 1px 3px rgba(9,7,20,.45)); } .faq__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.55); cursor: pointer; transition: width .35s var(--ease), background-color .35s var(--ease); } .faq__dot.is-active { width: 24px; background: #fff; } .faq__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 880px) { .faq__grid { grid-template-columns: 1fr; } .faq__media { display: none; } /* imagen decorativa solo en desktop */ } @media (prefers-reduced-motion: reduce) { .faq__img { transition: none; } } .faq__head { max-width: 36ch; margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); } .faq__head h2 { font-size: var(--step-3); } @media (min-width: 880px) { .faq__head { max-width: none; } .faq__head h2 { white-space: nowrap; } } .faqlist { display: grid; gap: .8rem; } .faqitem { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .faqitem.is-open { border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); box-shadow: var(--shadow-s); } .faqitem__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: clamp(1.1rem,.9rem + .6vw,1.5rem) clamp(1.2rem,1rem + .6vw,1.7rem); font-weight: 500; color: var(--ink); font-size: var(--step-1); } .faqitem__icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-mist); color: var(--teal); transition: transform .35s var(--ease), background-color .3s var(--ease); } .faqitem.is-open .faqitem__icon { transform: rotate(135deg); background: var(--teal); color: #fff; } .faqitem__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .faqitem.is-open .faqitem__panel { grid-template-rows: 1fr; } .faqitem__inner { overflow: hidden; } .faqitem__inner > div { padding: 0 clamp(1.2rem,1rem + .6vw,1.7rem) clamp(1.2rem,1rem + .6vw,1.6rem); color: var(--ink-soft); } .faqitem__inner p + p { margin-top: .8rem; } /* ---------- Sección formulario ---------- */ .contact { position: relative; overflow: clip; } .contact .grid12 { align-items: start; } .contact__aside { grid-column: 1 / span 5; align-self: center; } .contact__formwrap { grid-column: 7 / span 6; } @media (max-width: 940px) { .contact__aside, .contact__formwrap { grid-column: 1 / -1; } } .contact__aside h2 { font-size: var(--step-3); color: #fff; } .contact__aside .sub { color: var(--on-deep-soft); margin-top: 1rem; font-size: var(--step-1); max-width: 40ch; } .contact__points { margin-top: 1.8rem; display: grid; gap: 1rem; } .contact__points li { display: flex; gap: .8rem; align-items: center; color: var(--on-deep); } .contact__points .ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--mint) 18%, transparent); color: var(--mint); display: grid; place-items: center; } .formcard { background: #fff; border-radius: var(--radius-xl); padding: clamp(1.5rem,1.1rem + 1.8vw,2.6rem); box-shadow: var(--shadow-l); } .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; } .field { display: flex; flex-direction: column; gap: .45rem; } .field--full { grid-column: 1 / -1; } .field label { font-weight: 500; color: var(--ink); font-size: var(--step--1); } .field .req { color: var(--teal); } .input, .phone select, .phone input, textarea.input { width: 100%; padding: .85rem 1rem; border-radius: var(--radius-s); border: 1.5px solid var(--line); background: var(--bg-soft); color: var(--ink); transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease); } .input::placeholder, textarea.input::placeholder { color: #6b7c7e; } .input:hover, textarea.input:hover { border-color: var(--teal-2); } .input:focus, textarea.input:focus, .phone select:focus, .phone input:focus { outline: none; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 14%, transparent); } textarea.input { resize: vertical; min-height: 110px; } .phone { display: grid; grid-template-columns: 116px 1fr; gap: .6rem; } .phone select { padding-inline: .6rem; cursor: pointer; } .field.has-error .input, .field.has-error .phone select, .field.has-error .phone input { border-color: #d24a48; background: #fff5f5; } .field__error { color: #c0413f; font-size: var(--step--1); min-height: 0; display: none; } .field.has-error .field__error { display: block; } .consent { grid-column: 1 / -1; display: flex; gap: .7rem; align-items: flex-start; } .consent input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--teal); } .consent label { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.4; font-weight: 400; } .consent a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; } .consent.has-error label { color: #c0413f; } .form__submit { grid-column: 1 / -1; margin-top: .3rem; } .btn.is-loading { pointer-events: none; } .btn .spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; } .btn.is-loading .spinner { display: inline-block; } .btn.is-loading .label, .btn.is-loading .arrow { display: none; } @keyframes spin { to { transform: rotate(360deg); } } .form__note { grid-column: 1/-1; font-size: var(--step--1); color: var(--ink-soft); display: flex; gap: .5rem; align-items: center; justify-content: center; text-align: center; } .form__alert { display: none; padding: .9rem 1rem; border-radius: var(--radius-s); background: #fdecec; color: #9a2f2d; font-size: var(--step--1); } .form__alert.is-visible { display: block; } /* ---------- Cuestionario por pasos ---------- */ .quiz { display: block; } /* barra de progreso */ .quiz__progress { margin-bottom: 1.4rem; } .quiz__progress-track { height: 6px; border-radius: 999px; background: var(--bg-mist); overflow: hidden; } .quiz__progress-fill { display: block; height: 100%; width: 20%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-2), var(--teal)); transition: width .45s var(--ease); } .quiz__steplabel { margin-top: .6rem; font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); } /* pasos */ .quiz__steps { min-height: 248px; } .quiz__step { display: block; } .quiz__step[hidden] { display: none; } .js .quiz__step.is-active { animation: stepIn .42s var(--ease); } @keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } /* navegación */ .quiz__nav { display: flex; gap: .8rem; align-items: stretch; margin-top: 1.5rem; } .quiz__nav #quiz-back { flex: 0 0 auto; padding-inline: 1.1rem; } .quiz__nav #submit-btn { flex: 1 1 auto; } @media (prefers-reduced-motion: reduce) { .js .quiz__step.is-active { animation: none; } .quiz__progress-fill { transition: none; } } .quiz__q { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1.35rem; } .quiz__q legend { display: flex; align-items: center; gap: .7rem; padding: 0; margin-bottom: 1.1rem; font-weight: 500; color: var(--ink); font-size: var(--step-1); line-height: 1.3; } .quiz__n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font-size: var(--step--1); font-weight: 500; margin-top: 1px; } .quiz__q.has-error legend { color: #b23b39; } .quiz__q.has-error .quiz__n { background: #c0413f; } .quiz__opts { display: grid; gap: .65rem; } .opt { display: flex; align-items: center; gap: .8rem; cursor: pointer; padding: .9rem 1.05rem; border-radius: var(--radius-s); background: var(--bg-soft); border: 1.5px solid var(--line); transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); } .opt:hover { border-color: var(--teal-2); background: #fff; } .opt__mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--teal-2); color: #fff; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .opt__mark svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s var(--ease); } .opt__label { font-weight: 500; color: var(--ink); } .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .opt:has(input:checked) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 7%, #fff); box-shadow: 0 0 0 1px var(--teal); } .opt:has(input:checked) .opt__mark { background: var(--teal); border-color: var(--teal); } .opt:has(input:checked) .opt__mark svg { opacity: 1; } .opt:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 2px; } .quiz__contact { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } .quiz__contact .field--full { grid-column: 1 / -1; } @media (max-width: 520px) { .quiz__contact { grid-template-columns: 1fr; } } .quiz__note { display: none; gap: .6rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius-s); background: var(--bg-mist); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; } .quiz__note.is-visible { display: flex; } .quiz__note .ic { flex: 0 0 auto; color: var(--teal); margin-top: 1px; } /* pantalla educada de no-encaje */ .quiz__disqualified { display: none; text-align: center; padding: clamp(1rem,.6rem + 1vw,2rem) 0; } .quiz__disqualified.is-visible { display: block; } .quiz__disqualified .badge { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.2rem; display: grid; place-items: center; background: var(--bg-mist); color: var(--teal); } .quiz__disqualified h3 { font-size: var(--step-2); margin-bottom: .7rem; } .quiz__disqualified p { color: var(--ink-soft); max-width: 42ch; margin-inline: auto; } .quiz.is-hidden { display: none; } /* ---------- Footer ---------- */ .footer { background: var(--near-black); color: #cdd6d6; padding-block: clamp(2rem,1.5rem + 2vw,3rem); } .footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; } .footer__logo img { height: 26px; width: auto; } .footer__links { display: flex; flex-wrap: nowrap; gap: clamp(.55rem, .2rem + 1.7vw, 1.2rem); } .footer__links a { font-size: clamp(.62rem, .42rem + .9vw, .9rem); color: #9fb0b0; white-space: nowrap; transition: color .25s var(--ease); } .footer__links a:hover { color: #fff; } .footer__legal { width: 100%; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.2rem; font-size: .8rem; color: #6f8080; } /* ---------- Sticky CTA mobile ---------- */ .stickycta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-stickycta); padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, #fff 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line), 0 -10px 30px -20px rgba(29,72,45,.5); transform: translateY(120%); transition: transform .4s var(--ease); } .stickycta.is-visible { transform: translateY(0); } .stickycta .btn { width: 100%; } @media (min-width: 800px) { .stickycta { display: none; } } body.has-stickycta { padding-bottom: 84px; } @media (min-width: 800px) { body.has-stickycta { padding-bottom: 0; } } /* ---------- Reveal motion (progressive enhancement) ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } .js [data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); } .js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .marquee__track, .team__track { animation: none; } .team__marquee { overflow-x: auto; } .btn, .feature, .pstep__card, .statcard, .member__photo img { transition: none !important; } * { scroll-behavior: auto !important; } } /* ---------- utilidades ---------- */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .center { text-align: center; } .mt-s { margin-top: .6rem; } .mt-m { margin-top: 1.2rem; } .icon { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }