/* ========================================================================= Divigram · sistema de estilos Sin dependencias, sin framework. Tokens primero, componentes después. Paleta tomada del sitio actual: carmesí #e84058/#ce124e, dorado #ffcc00. ========================================================================= */ /* ---------- Tokens ------------------------------------------------------ */ :root { color-scheme: dark; /* Neutros con matiz cálido: un gris puro se lee como plantilla */ --bg: #0B0A0C; --bg-2: #131117; --surface: #1A171F; --surface-2: #241F2B; --line: #2E2836; --line-soft: #221D29; --ink: #F4F1F6; --ink-2: #C3BACB; --ink-3: #8C819A; /* Marca */ --brand: #F0355F; /* único acento vivo del sistema */ --brand-hi: #FF5C7E; /* hover / realce */ --brand-deep: #9E0B33; --brand-tint: rgba(240, 53, 95, .13); --star: #FFC24A; /* SOLO estrellas de valoración, no es color de marca */ --ok: #35C77E; /* Tipografía */ --f-display: "Bricolage Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --f-body: "Instrument Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --step--1: clamp(.82rem, .8rem + .1vw, .88rem); --step-0: clamp(1rem, .97rem + .15vw, 1.08rem); --step-1: clamp(1.18rem, 1.1rem + .4vw, 1.4rem); --step-2: clamp(1.45rem, 1.3rem + .75vw, 1.95rem); --step-3: clamp(1.85rem, 1.5rem + 1.5vw, 2.8rem); --step-4: clamp(2.3rem, 1.6rem + 3vw, 4.2rem); /* Ritmo */ --sp-1: .35rem; --sp-2: .7rem; --sp-3: 1.1rem; --sp-4: 1.75rem; --sp-5: 2.75rem; --sp-6: 4.5rem; --sp-7: 7rem; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 999px; --wrap: 1140px; --shadow: 0 18px 50px -24px rgba(0,0,0,.85); } /* El visitante puede tener el sistema en claro: la página debe sostenerse igual. No es una inversión automática, son valores elegidos uno a uno. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #FBF9FB; --bg-2: #F3EFF4; --surface: #FFFFFF; --surface-2: #F6F2F7; --line: #E4DCE8; --line-soft: #EEE8F1; --ink: #16121A; --ink-2: #4C4356; --ink-3: #756B80; --brand: #D01141; --brand-hi: #F0355F; --brand-deep:#8E0A2C; --brand-tint: rgba(208, 17, 65, .09); --star: #B07200; --shadow: 0 18px 50px -28px rgba(40, 10, 25, .35); } } :root[data-theme="light"] { color-scheme: light; --bg:#FBF9FB; --bg-2:#F3EFF4; --surface:#FFFFFF; --surface-2:#F6F2F7; --line:#E4DCE8; --line-soft:#EEE8F1; --ink:#16121A; --ink-2:#4C4356; --ink-3:#756B80; --brand:#D01141; --brand-hi:#F0355F; --brand-deep:#8E0A2C; --brand-tint:rgba(208,17,65,.09); --star:#B07200; --shadow:0 18px 50px -28px rgba(40,10,25,.35); } /* ---------- Base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.08; margin: 0 0 var(--sp-3); text-wrap: balance; font-weight: 600; } h1 { font-size: var(--step-4); letter-spacing: -.025em; } h2 { font-size: var(--step-3); letter-spacing: -.02em; } h3 { font-size: var(--step-1); letter-spacing: -.01em; } p { margin: 0 0 var(--sp-3); max-width: 62ch; } a { color: inherit; } img, svg { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--brand-hi); outline-offset: 3px; border-radius: 4px; } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .section { padding-block: var(--sp-7); } /* Franjas alternas: sin ellas la página se lee como un solo bloque continuo */ .section--band { background: var(--bg-2); border-block: 1px solid var(--line); } .section--tight { padding-block: var(--sp-6); } .eyebrow { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-hi); margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: .55rem; } .eyebrow::before { content:""; width: 22px; height: 1px; background: var(--brand-hi); } .eyebrow--center { justify-content: center; } .lede { font-size: var(--step-1); color: var(--ink-2); } .center { text-align: center; } .center p, .center .lede { margin-inline: auto; } /* ---------- Botones ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--f-body); font-size: var(--step-0); font-weight: 600; padding: .85rem 1.6rem; border-radius: var(--r-full); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--brand); color: #fff; box-shadow: 0 10px 28px -12px var(--brand); } .btn--primary:hover { background: var(--brand-hi); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--brand-hi); color: var(--brand-hi); } .btn--lg { padding: 1.05rem 2.1rem; font-size: var(--step-1); } .btn--block { width: 100%; } /* ---------- Cabecera ---------------------------------------------------- */ .hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease, background-color .25s ease; } .hdr[data-scrolled="true"] { border-bottom-color: var(--line); } .hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: .85rem; } /* Logotipo ----------------------------------------------------------------- Caja baja, peso alto e interletrado muy cerrado: es el gesto que distingue a un estudio de diseño de una empresa cualquiera. El punto de la i se sustituye por un módulo cuadrado del color de marca — un detalle deliberado que ata el logotipo con el símbolo, y que a tamaño pequeño sigue leyéndose como un punto normal. Todo en unidades em para que escale solo. */ .logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--f-display); font-weight: 800; font-size: 1.24rem; letter-spacing: -.05em; text-transform: lowercase; color: var(--ink); line-height: 1; } .logo__txt { position: relative; display: inline-block; } /* La letra es «ı» (U+0131), la i sin punto. Así no hay que tapar nada con un parche del color de fondo, que se delataría en cuanto el logotipo cayera sobre otra superficie —y la cabecera además es semitransparente. */ .logo__i { position: relative; display: inline-block; } .logo__i::after { content: ""; position: absolute; left: 50%; top: .04em; transform: translateX(-50%); width: .17em; height: .17em; background: var(--brand); border-radius: .03em; } /* La marca va como máscara para que herede el color del tema: en oscuro sale blanca sobre la caja, y la caja aporta el acento. */ .logo__mark { width: 32px; height: 32px; border-radius: 9px; flex: none; background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%); display: grid; place-items: center; position: relative; } .logo__mark::after { content: ""; width: 19px; height: 19px; background: #fff; -webkit-mask: url(marca/marca-mascara.svg) center / contain no-repeat; mask: url(marca/marca-mascara.svg) center / contain no-repeat; } .nav { display: flex; align-items: center; gap: var(--sp-4); } .nav__list { display: flex; gap: var(--sp-3); } .nav__list a { text-decoration: none; color: var(--ink-2); font-size: .94rem; white-space: nowrap; /* sin esto los enlaces se parten en dos líneas */ transition: color .18s ease; } .nav__list a:hover { color: var(--ink); } .nav__toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); width: 42px; height: 42px; cursor: pointer; color: var(--ink); align-items: center; justify-content: center; } .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ""; display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .22s ease, opacity .18s ease; } .nav__toggle span::before { transform: translateY(-5.5px); } .nav__toggle span::after { transform: translateY(4.5px); } .nav__toggle[aria-expanded="true"] span { background: transparent; } .nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); } .nav__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); } @media (max-width: 1080px) { .nav__toggle { display: inline-flex; } .nav { position: fixed; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--line); padding: var(--sp-3) 1.25rem var(--sp-4); transform: translateY(-130%); transition: transform .3s cubic-bezier(.4,0,.2,1); max-height: calc(100dvh - 100%); overflow-y: auto; } .nav[data-open="true"] { transform: translateY(0); } .nav__list { flex-direction: column; gap: 0; } .nav__list a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); } .nav .btn { margin-top: var(--sp-3); } } /* ---------- Controles de cabecera: moneda, tema y WhatsApp -------------- */ .hdr__tools { display: flex; align-items: center; gap: .4rem; } .icon-btn { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; transition: color .2s ease, border-color .2s ease; padding: 0; } .icon-btn:hover { color: var(--ink); border-color: var(--brand); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn--wa:hover { color: #25D366; border-color: #25D366; } /* Solo se muestra el icono del tema al que se va a cambiar */ .icon-btn .ico-sol { display: none; } :root[data-theme="light"] .icon-btn .ico-sol, .icon-btn .ico-luna { display: block; } :root[data-theme="light"] .icon-btn .ico-luna { display: none; } .moneda-sel { position: relative; } .moneda-sel select { appearance: none; font: inherit; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .04em; cursor: pointer; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); height: 38px; padding: 0 1.7rem 0 .7rem; } .moneda-sel select:hover { color: var(--ink); border-color: var(--brand); } .moneda-sel::after { content: "▾"; position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); font-size: .7rem; } @media (max-width: 1080px) { .hdr__tools { order: 2; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); justify-content: flex-start; } } /* ---------- Hero -------------------------------------------------------- */ .hero { position: relative; padding-block: var(--sp-6) var(--sp-6); overflow: hidden; } @media (min-width: 941px) { .hero { padding-block: var(--sp-7) var(--sp-6); } } /* En móvil el aire de escritorio deja la promesa fuera de la primera pantalla */ @media (max-width: 600px) { .hero { padding-block: var(--sp-4) var(--sp-5); } } .hero::before { content: ""; position: absolute; inset: -30% 30% 40% -20%; z-index: -1; background: radial-gradient(closest-side, var(--brand-tint), transparent 70%); filter: blur(20px); } .hero::after { content: ""; position: absolute; inset: 20% -25% -40% 45%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 7%, transparent), transparent 72%); filter: blur(28px); } .hero__grid { display: grid; gap: var(--sp-6); align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } @media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); } } .hero h1 { margin-bottom: var(--sp-3); } .hero h1 em { font-style: normal; color: var(--brand-hi); } .hero__lede { font-size: var(--step-1); color: var(--ink-2); max-width: 46ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } .hero__note { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-3); max-width: 42ch; } @media (max-width: 700px) { .hero__note { padding-right: 4.5rem; } } .badge { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full); padding: .35rem .9rem .35rem .4rem; font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--sp-4); } .badge b { color: var(--ink); font-weight: 600; } .badge__dot { width: 22px; height: 22px; border-radius: var(--r-full); flex: none; background: var(--brand-tint); color: var(--brand-hi); display: grid; place-items: center; font-size: .7rem; font-weight: 700; } /* Mosaico de trabajos: sustituye a la foto de stock */ .shots { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 74px; gap: .7rem; } .shot { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: .7rem .8rem; text-decoration: none; transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease; } .shot:hover { transform: translateY(-4px); border-color: var(--brand); } .shot::before { content: ""; position: absolute; inset: 0; opacity: .5; background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 55%, transparent), color-mix(in srgb, var(--brand-deep) 30%, transparent) 45%, transparent 78%); } .shot--b::before { background: linear-gradient(150deg, color-mix(in srgb, var(--brand-hi) 42%, transparent), color-mix(in srgb, var(--brand-deep) 22%, transparent) 55%, transparent 82%); } .shot--c::before { background: linear-gradient(200deg, color-mix(in srgb, var(--brand-deep) 55%, transparent), transparent 72%); } .shot__name { position: relative; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); } .shot__tag { position: relative; font-size: .68rem; color: rgba(255,255,255,.72); text-shadow: 0 1px 8px rgba(0,0,0,.6); } .shot:nth-child(1) { grid-column: span 4; grid-row: span 2; } .shot:nth-child(2) { grid-column: span 2; grid-row: span 2; } .shot:nth-child(3) { grid-column: span 2; grid-row: span 2; } .shot:nth-child(4) { grid-column: span 4; grid-row: span 2; } @media (max-width: 560px) { .shots { grid-auto-rows: 60px; } } /* ---------- Maqueta de navegador (CSS puro) ----------------------------- Vende lo que hacemos mostrándolo, sin depender de capturas que aún no tenemos. Cuando lleguen las reales, se sustituye el interior y ya está. */ .browser { border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); } .browser__bar { display: flex; align-items: center; gap: .35rem; padding: .55rem .7rem; background: var(--surface-2); border-bottom: 1px solid var(--line); } .browser__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--line); flex: none; } .browser__url { flex: 1; height: 14px; border-radius: var(--r-full); background: var(--bg); margin-left: .4rem; } .browser__body { padding: .85rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; min-height: 0; } /* Esqueleto abstracto: sugiere una página sin fingir una captura falsa */ .sk { border-radius: 5px; background: var(--surface-2); flex: none; } .sk--hero { height: 34%; min-height: 44px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 42%, transparent), color-mix(in srgb, var(--brand-deep) 26%, transparent)); } .sk--line { height: 7px; } .sk--line.w80 { width: 80%; } .sk--line.w60 { width: 60%; } .sk--line.w45 { width: 45%; } .sk--row { display: flex; gap: .45rem; flex: 1; min-height: 22px; } .sk--row > span { flex: 1; border-radius: 5px; background: var(--surface-2); } .sk--btn { height: 14px; width: 62px; border-radius: var(--r-full); background: var(--brand); opacity: .85; } /* El cursor recorre la maqueta: da vida sin pedir un solo kilobyte de imagen */ .browser--live { position: relative; } .browser--live::after { content: ""; position: absolute; width: 12px; height: 12px; z-index: 2; border-radius: 50% 50% 50% 2px; background: var(--ink); border: 2px solid var(--bg); opacity: .9; animation: paseo 7s cubic-bezier(.6,0,.4,1) infinite; } @keyframes paseo { 0%, 8% { top: 74%; left: 18%; } 22%, 30% { top: 40%; left: 62%; } 44%, 52% { top: 62%; left: 30%; } 66%, 74% { top: 30%; left: 78%; } 88%, 100% { top: 74%; left: 18%; } } @media (prefers-reduced-motion: reduce) { .browser--live::after { animation: none; top: 60%; left: 30%; } } /* ---------- Cinta de clientes ------------------------------------------- */ .marquee { overflow: hidden; position: relative; -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; gap: var(--sp-5); width: max-content; animation: desfile 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee li { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink-3); white-space: nowrap; display: flex; align-items: center; } /* Preparado para logos reales: en cuanto haya PNG/SVG en assets/logos/ basta con sustituir el texto del
  • por un y esto lo encaja solo. */ .marquee img { height: 28px; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.7); opacity: .62; transition: filter .25s ease, opacity .25s ease; } .marquee li:hover img { filter: none; opacity: 1; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .marquee img { filter: grayscale(1) brightness(.4); } } @keyframes desfile { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: var(--sp-3) var(--sp-4); } } /* ---------- Portafolio --------------------------------------------------- */ .work { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .work__item { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-3); transition: border-color .25s ease, transform .25s ease; } .work__item:hover { border-color: var(--brand); transform: translateY(-4px); } .work__item .browser { aspect-ratio: 5 / 3; box-shadow: none; } .work__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; } .work__meta h3 { font-size: var(--step-0); font-weight: 700; margin: 0; } .work__sector { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-hi); } .work__item p { font-size: .92rem; color: var(--ink-2); margin: 0; } .work__item[hidden] { display: none; } .work__more { display: flex; justify-content: center; margin-top: var(--sp-4); } /* ---------- Sectores ----------------------------------------------------- */ .sectores { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .sector { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); overflow: hidden; transition: border-color .25s ease, transform .25s ease; } .sector::before { content: ""; position: absolute; inset: auto -30% -60% 40%; height: 140px; border-radius: 50%; opacity: 0; transition: opacity .3s ease; background: radial-gradient(closest-side, var(--brand-tint), transparent 70%); } .sector:hover { border-color: var(--brand); transform: translateY(-4px); } .sector:hover::before { opacity: 1; } .sector__ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-hi); position: relative; } .sector__ico svg { width: 19px; height: 19px; } .sector h3 { font-size: var(--step-0); font-weight: 700; margin: 0; position: relative; } .sector p { font-size: .92rem; color: var(--ink-2); margin: 0; position: relative; } .sector__go { font-size: .87rem; color: var(--brand-hi); font-weight: 600; margin-top: auto; padding-top: var(--sp-2); position: relative; display: inline-flex; align-items: center; gap: .35rem; } .sector__go::after { content: "→"; transition: transform .22s ease; } .sector:hover .sector__go::after { transform: translateX(4px); } /* ---------- Asistente: puente entre la home y las landings nichadas ----- */ .wiz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow); max-width: 760px; margin-inline: auto; } .wiz__prog { display: flex; gap: .4rem; margin-bottom: var(--sp-4); } .wiz__prog span { height: 3px; flex: 1; border-radius: var(--r-full); background: var(--track); transition: background-color .3s ease; } .wiz__prog span[data-on="true"] { background: var(--brand); } .wiz__paso { display: none; } .wiz__paso[data-activo="true"] { display: block; animation: entra .35s ease; } @keyframes entra { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .wiz__paso[data-activo="true"] { animation: none; } } .wiz h3 { font-size: var(--step-2); margin-bottom: var(--sp-1); } .wiz__ayuda { color: var(--ink-2); font-size: .95rem; margin-bottom: var(--sp-4); } .wiz__ops { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .wiz__op { display: flex; align-items: center; gap: .7rem; text-align: left; font: inherit; font-size: .96rem; color: var(--ink); cursor: pointer; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: .85rem 1rem; transition: border-color .2s ease, transform .2s ease, background-color .2s ease; } .wiz__op:hover { border-color: var(--brand); transform: translateY(-2px); } .wiz__op[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); } .wiz__op i { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-hi); font-style: normal; font-size: .85rem; } .wiz__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); } .wiz__atras { background: none; border: none; color: var(--ink-3); font: inherit; font-size: .9rem; cursor: pointer; padding: .4rem 0; } .wiz__atras:hover { color: var(--ink); } .wiz__res { display: grid; gap: var(--sp-3); } .wiz__resumen { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); } .wiz__resumen dl { display: grid; gap: .5rem; margin: 0; grid-template-columns: auto 1fr; } .wiz__resumen dt { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .wiz__resumen dd { margin: 0; font-weight: 600; } .wiz__acciones { display: flex; flex-wrap: wrap; gap: .6rem; } /* ---------- Cifras que cuentan hacia arriba ----------------------------- */ .stat__n[data-cuenta] { font-variant-numeric: tabular-nums; } /* ---------- Franja de mantención ---------------------------------------- */ .after { background: var(--bg-2); border-block: 1px solid var(--line); } .after__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .after__item { display: flex; gap: var(--sp-3); align-items: flex-start; } .after__n { font-family: var(--f-mono); font-size: .78rem; color: var(--brand-hi); border: 1px solid var(--line); border-radius: var(--r-full); width: 30px; height: 30px; display: grid; place-items: center; flex: none; } .after__item h3 { font-size: var(--step-0); font-weight: 700; margin: 0 0 .25rem; } .after__item p { font-size: .92rem; color: var(--ink-2); margin: 0; } /* ---------- Tecnologías -------------------------------------------------- */ .stack { display: flex; flex-wrap: wrap; gap: .5rem; } .stack li { font-family: var(--f-mono); font-size: .8rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: .3rem .8rem; background: var(--surface); } /* ---------- Hero rotativo ------------------------------------------------ Tres mensajes en vez de uno. Ojo: los héroes que rotan solos pueden perder conversión porque el visitante empieza a leer y el texto cambia. Por eso el ritmo es lento (7 s), se detiene al pasar el cursor o al enfocar, y el primer mensaje —el más importante— es el que se ve al llegar. */ .hero__slides { position: relative; } .hero__slide { display: none; } .hero__slide[data-activo="true"] { display: block; } [data-js="on"] .hero__slide[data-activo="true"] { animation: entraSlide .5s cubic-bezier(.2,.7,.3,1); } @keyframes entraSlide { from { opacity: 0; transform: translateY(10px); } } .hero__puntos { display: flex; gap: .45rem; margin-top: var(--sp-4); } .hero__puntos button { width: 26px; height: 4px; border-radius: var(--r-full); border: none; padding: 0; cursor: pointer; background: var(--line); transition: background-color .3s ease, width .3s ease; } .hero__puntos button:hover { background: var(--ink-3); } .hero__puntos button[aria-pressed="true"] { background: var(--brand); width: 40px; } /* Cada mensaje trae su propia maqueta, con una animación distinta */ .hero__art { position: relative; } .hero__art > .browser { display: none; } .hero__art > .browser[data-activo="true"] { display: flex; } /* 1 · el cursor recorre la página */ @keyframes paseo2 { 0%, 10% { top: 72%; left: 20%; } 30%, 40% { top: 38%; left: 64%; } 60%, 70% { top: 60%; left: 32%; } 90%, 100% { top: 72%; left: 20%; } } /* 2 · los bloques del catálogo van apareciendo */ @keyframes asoma { from { opacity: .15; transform: translateY(6px); } to { opacity: 1; transform: none; } } .browser--tienda .sk--row > span { animation: asoma 2.6s ease-in-out infinite alternate; } .browser--tienda .sk--row > span:nth-child(2) { animation-delay: .35s; } .browser--tienda .sk--row > span:nth-child(3) { animation-delay: .7s; } /* 3 · la barra de progreso de una app trabajando */ @keyframes avanza { 0% { width: 12%; } 55% { width: 86%; } 100% { width: 12%; } } .browser--app .sk--btn { animation: avanza 4.2s ease-in-out infinite; width: 12%; } @media (prefers-reduced-motion: reduce) { .browser--tienda .sk--row > span, .browser--app .sk--btn { animation: none; } [data-js="on"] .hero__slide[data-activo="true"] { animation: none; } } /* ---------- Prueba social ----------------------------------------------- */ .proof { border-block: 1px solid var(--line); background: var(--bg-2); } /* Cuatro columnas iguales: con auto-fit las cifras quedaban a distinta distancia entre sí y el bloque se veía descuadrado respecto al contenedor. */ .proof__in { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4, 1fr); padding-block: var(--sp-4); align-items: start; } @media (max-width: 900px) { .proof__in { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .proof__in { grid-template-columns: 1fr; } } .stat__n { white-space: nowrap; } .stat__n { font-family: var(--f-display); font-size: var(--step-2); font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .stat__n span { color: var(--brand-hi); } .stat__l { font-size: var(--step--1); color: var(--ink-3); margin-top: .3rem; } .proof__nota { grid-column: 1 / -1; font-size: .85rem; color: var(--ink-3); margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); width: 100%; } .brands { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: center; } .brands li { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .04em; color: var(--ink-3); } /* ---------- Comparativa de ventajas ------------------------------------- Sustituye al bloque de velocidad, que gastaba una sección entera en una sola idea y además era un argumento técnico. Aquí la velocidad es una fila más entre seis ventajas concretas: se escanea en segundos y no es un muro de texto. */ .vs { background: var(--bg-2); border-block: 1px solid var(--line); } .tabla-vs { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .vs-fila { display: grid; grid-template-columns: 168px 1fr 1fr; border-bottom: 1px solid var(--line-soft); } .vs-fila:last-child { border-bottom: none; } .vs-fila > div { padding: .95rem 1.1rem; display: flex; align-items: center; gap: .55rem; font-size: .93rem; } .vs-fila__que { color: var(--ink-3); font-family: var(--f-mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; } .vs-fila__bien { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--brand) 6%, transparent); } .vs-fila__mal { color: var(--ink-3); } .vs-fila__bien::before { content: "✓"; color: var(--ok); font-weight: 700; flex: none; } .vs-fila__mal::before { content: "·"; color: var(--ink-3); flex: none; font-weight: 700; width: .7em; } .vs-cab { display: grid; grid-template-columns: 168px 1fr 1fr; background: var(--surface-2); border-bottom: 1px solid var(--line); } .vs-cab > div { padding: .8rem 1.1rem; font-size: .82rem; font-weight: 600; } .vs-cab__nos { color: var(--brand-hi); } .vs-cab__otros { color: var(--ink-3); font-weight: 400; } @media (max-width: 760px) { .vs-cab { display: none; } .vs-fila { grid-template-columns: 1fr; } .vs-fila > div { padding: .5rem 1rem; } .vs-fila__que { padding-top: .9rem; } .vs-fila__mal { padding-bottom: .9rem; } /* Sin cabecera visible, cada celda dice a quién pertenece */ .vs-fila__bien::after { content: "con nosotros"; font-size: .7rem; color: var(--ink-3); font-weight: 400; margin-left: auto; } .vs-fila__mal::after { content: "lo habitual"; font-size: .7rem; color: var(--ink-3); margin-left: auto; } } /* ---------- Tarjetas genéricas ------------------------------------------ */ .grid { display: grid; gap: var(--sp-3); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); transition: border-color .25s ease, transform .25s ease; } .card:hover { border-color: var(--line); transform: translateY(-3px); } .card p:last-child { margin-bottom: 0; } /* El h3 global lleva 1.1rem de margen inferior: dentro de una tarjeta eso despega el título de su texto y rompe la unidad del bloque. */ .card h3 { margin-bottom: var(--sp-1); } .card p { color: var(--ink-2); font-size: .95rem; } /* Iconos grandes: son la señal que permite a alguien no técnico distinguir un bloque de otro de un vistazo. Con iconos pequeños todo el sitio "se ve igual" y el visitante se pierde. */ .card__ico { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; color: var(--brand-hi); margin-bottom: var(--sp-3); background: linear-gradient(145deg, var(--brand-tint), color-mix(in srgb, var(--brand) 4%, transparent)); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); transition: transform .3s cubic-bezier(.2,.7,.3,1); } .card:hover .card__ico { transform: translateY(-3px) rotate(-4deg); } .card__ico svg { width: 30px; height: 30px; } .sector__ico { width: 56px; height: 56px; border-radius: 17px; } .sector__ico svg { width: 27px; height: 27px; } .sector:hover .sector__ico { transform: translateY(-3px); } .sector__ico { transition: transform .3s cubic-bezier(.2,.7,.3,1); } /* Dolores: numeración que sí significa algo (son 3 costes, no un orden) */ .pain { border-left: 2px solid var(--brand); padding-left: var(--sp-3); } .pain__n { font-family: var(--f-mono); font-size: var(--step-2); color: var(--brand-hi); font-weight: 400; line-height: 1; } .pain h3 { margin: var(--sp-2) 0 var(--sp-1); } .pain p { color: var(--ink-2); font-size: .96rem; margin: 0; } /* ---------- Proceso ----------------------------------------------------- */ .steps { counter-reset: paso; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); } .step { counter-increment: paso; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); position: relative; } .step::before { content: counter(paso, decimal-leading-zero); font-family: var(--f-mono); font-size: .82rem; color: var(--brand-hi); display: block; margin-bottom: var(--sp-2); letter-spacing: .08em; } .step h3 { font-size: var(--step-0); font-weight: 700; margin-bottom: var(--sp-1); } .step p { font-size: .93rem; color: var(--ink-2); margin: 0; } /* ---------- Testimonios ------------------------------------------------- */ .quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); } .quote__stars { color: var(--star); letter-spacing: .12em; font-size: .9rem; } .quote blockquote { margin: 0; font-size: 1rem; color: var(--ink); line-height: 1.55; } .quote__who { display: flex; align-items: center; gap: .75rem; margin-top: auto; } .avatar { width: 38px; height: 38px; border-radius: var(--r-full); flex: none; display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: .9rem; color: #fff; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); } .quote__who b { display: block; font-size: .93rem; } .quote__who span { font-size: .82rem; color: var(--ink-3); } /* ---------- Precios ----------------------------------------------------- */ .price { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; position: relative; } .price--feat { border-color: var(--brand); background: linear-gradient(180deg, var(--brand-tint), transparent 55%), var(--surface); } .price__flag { position: absolute; top: -11px; left: var(--sp-4); background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .25rem .7rem; border-radius: var(--r-full); } .price h3 { font-size: var(--step-0); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--sp-2); } .price__amt { font-family: var(--f-display); font-size: var(--step-2); font-weight: 700; line-height: 1; color: var(--ink); } .price__per { font-size: var(--step--1); color: var(--ink-3); margin-bottom: var(--sp-3); } .price ul { display: flex; flex-direction: column; gap: .55rem; margin-bottom: var(--sp-4); font-size: .93rem; color: var(--ink-2); } .price li { display: flex; gap: .55rem; align-items: flex-start; } .price li::before { content: "✓"; color: var(--ok); font-weight: 700; flex: none; } .price .btn { margin-top: auto; } /* ---------- Conmutador de moneda ---------------------------------------- */ .precios-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); } .precios-cab > div { flex: 1 1 320px; } .monedas { display: inline-flex; padding: 3px; gap: 2px; flex: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); } .monedas button { font: inherit; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .04em; cursor: pointer; color: var(--ink-3); background: none; border: none; border-radius: var(--r-full); padding: .4rem .85rem; transition: background-color .2s ease, color .2s ease; } .monedas button:hover { color: var(--ink); } .monedas button[aria-pressed="true"] { background: var(--brand); color: #fff; font-weight: 600; } .monedas-nota { font-size: .76rem; color: var(--ink-3); margin: .5rem 0 0; text-align: right; } @media (max-width: 640px) { .precios-cab { flex-direction: column; align-items: stretch; } .monedas { align-self: flex-start; } .monedas-nota { text-align: left; } } /* ---------- FAQ --------------------------------------------------------- */ .faq { display: grid; gap: .6rem; max-width: 780px; margin-inline: auto; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .faq summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--f-mono); font-size: 1.3rem; color: var(--brand-hi); transition: transform .22s ease; flex: none; } .faq details[open] summary::after { transform: rotate(45deg); } .faq p { padding: 0 var(--sp-4) var(--sp-3); color: var(--ink-2); font-size: .96rem; margin: 0; max-width: none; } /* ---------- CTA final y formulario -------------------------------------- */ .cta { background: var(--bg-2); border-block: 1px solid var(--line); } .cta__grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0,1fr) minmax(0,420px); align-items: start; } @media (max-width: 880px) { .cta__grid { grid-template-columns: 1fr; } } .form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow); } .field { margin-bottom: var(--sp-3); } .field label { display: block; font-size: var(--step--1); color: var(--ink-2); margin-bottom: .35rem; font-weight: 600; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: .97rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .72rem .85rem; transition: border-color .18s ease, box-shadow .18s ease; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .field[data-invalid="true"] input, .field[data-invalid="true"] select { border-color: var(--brand-hi); } .field__err { font-size: .8rem; color: var(--brand-hi); margin-top: .3rem; display: none; } .field[data-invalid="true"] .field__err { display: block; } .form__note { font-size: .8rem; color: var(--ink-3); margin: var(--sp-2) 0 0; } .form__error { background: var(--brand-tint); color: var(--brand-hi); border-radius: var(--r-sm); padding: .7rem .9rem; font-size: .88rem; margin: var(--sp-3) 0 0; } .form__ok { display: none; text-align: center; padding: var(--sp-4) 0; } .form__ok b { display: block; font-family: var(--f-display); font-size: var(--step-1); margin-bottom: var(--sp-2); } .form[data-sent="true"] .form__body { display: none; } .form[data-sent="true"] .form__ok { display: block; } .contact-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); } .contact-list a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink-2); font-size: .96rem; } .contact-list a:hover { color: var(--brand-hi); } .contact-list svg { width: 17px; height: 17px; flex: none; color: var(--brand-hi); } /* ---------- Pie ---------------------------------------------------------- El pie no es un cajón de enlaces: es la última oportunidad de convertir y el sitio donde el visitante busca la prueba de que existís de verdad. Por eso lleva contacto real arriba, y lo administrativo abajo. */ .ftr { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: var(--sp-6) var(--sp-4); font-size: .92rem; color: var(--ink-2); } .ftr__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); } .ftr__cta h2 { font-size: var(--step-2); margin: 0 0 .35rem; } .ftr__cta p { margin: 0; color: var(--ink-2); max-width: 46ch; } .ftr__cols { display: grid; gap: var(--sp-5); grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(140px, 1fr)); padding-bottom: var(--sp-5); } @media (max-width: 880px) { .ftr__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .ftr__marca { grid-column: 1 / -1; } } @media (max-width: 460px) { .ftr__cols { grid-template-columns: 1fr; } } .ftr__marca p { margin: var(--sp-3) 0 0; font-size: .9rem; max-width: 34ch; } .ftr__marca .logo { margin-bottom: 0; } .ftr h3 { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 0 0 var(--sp-3); } .ftr__lista { display: flex; flex-direction: column; gap: .55rem; } .ftr__lista a { color: var(--ink-2); text-decoration: none; font-size: .93rem; width: fit-content; border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease; } .ftr__lista a:hover { color: var(--ink); border-bottom-color: var(--brand); } /* Contacto: lo que la gente viene a buscar al pie */ .ftr__contacto a { display: inline-flex; align-items: center; gap: .5rem; } .ftr__contacto svg { width: 15px; height: 15px; flex: none; color: var(--brand-hi); } .ftr__sedes { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin-top: .9rem; font-size: .84rem; color: var(--ink-3); } .ftr__sedes span { display: inline-flex; align-items: center; gap: .4rem; } .ftr__sedes b { color: var(--ink-2); font-weight: 600; } /* Va en
    , no en

    : un