/* ========================================================================== adc espacios · Cómo hacemos webs Sistema de formas: interactivos en píldora, contenedores 16px, capturas 12px. Un solo acento (coral de marca). Tema claro/oscuro por tokens. ========================================================================== */ @font-face { font-family: "Instrument Sans"; src: url("assets/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; } :root { --bg: #F3F3F0; --surface: #FBFBF9; --surface-2: #E9E9E4; --ink: #231F20; --ink-2: #4A4546; --ink-3: #6B6566; --line: rgba(35, 31, 32, .12); --line-strong: rgba(35, 31, 32, .24); --accent: #E84237; --accent-strong: #C8362C; --on-accent: #FBFBF9; --accent-soft: rgba(232, 66, 55, .09); --accent-line: rgba(232, 66, 55, .35); --shadow: 0 1px 2px rgba(35, 31, 32, .05), 0 18px 40px -18px rgba(35, 31, 32, .22); --shadow-lg: 0 2px 4px rgba(35, 31, 32, .05), 0 40px 80px -30px rgba(35, 31, 32, .32); --header-bg: rgba(243, 243, 240, .82); --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --radius: 16px; --radius-media: 12px; --pill: 999px; --gutter: clamp(16px, 4vw, 40px); --header-h: 68px; --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --spring: cubic-bezier(.34, 1.45, .64, 1); --grain: .035; --glow: 20%; --brand-mark: url("data:image/png;base64,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"); --brand-word: url("data:image/png;base64,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"); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141213; --surface: #1D1A1B; --surface-2: #272324; --ink: #EEEAE8; --ink-2: #C2BCBA; --ink-3: #9A9391; --line: rgba(238, 234, 232, .11); --line-strong: rgba(238, 234, 232, .24); --accent: #F05A4E; --accent-strong: #F05A4E; --on-accent: #141213; --accent-soft: rgba(240, 90, 78, .12); --accent-line: rgba(240, 90, 78, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .7); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 40px 80px -30px rgba(0, 0, 0, .8); --header-bg: rgba(20, 18, 19, .8); --grain: .05; --glow: 11%; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #141213; --surface: #1D1A1B; --surface-2: #272324; --ink: #EEEAE8; --ink-2: #C2BCBA; --ink-3: #9A9391; --line: rgba(238, 234, 232, .11); --line-strong: rgba(238, 234, 232, .24); --accent: #F05A4E; --accent-strong: #F05A4E; --on-accent: #141213; --accent-soft: rgba(240, 90, 78, .12); --accent-line: rgba(240, 90, 78, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .7); --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 40px 80px -30px rgba(0, 0, 0, .8); --header-bg: rgba(20, 18, 19, .8); --grain: .05; --glow: 11%; color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Grano de papel muy suave: fijo y sin eventos, para no repintar al hacer scroll */ body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } a, button, input, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .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; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: var(--pill); text-decoration: none; } .skip:focus { top: 12px; } .icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; } .wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; } .section { padding-block: clamp(72px, 9vw, 128px) clamp(80px, 10vw, 140px); } .section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); } .section-head h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); } .section-head p { margin-top: 18px; color: var(--ink-2); font-size: 1.125rem; max-width: 60ch; } .eyebrow { display: inline-block; margin-bottom: 18px; font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-strong); } /* Barra de lectura: se dibuja con el propio scroll donde el navegador lo permite */ .progress { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; display: none; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .progress { display: block; animation: progress linear both; animation-timeline: scroll(root block); } } } @keyframes progress { to { transform: scaleX(1); } } /* ---------- Botones ---------- */ .btn { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 0 22px; border-radius: var(--pill); border: 1px solid transparent; font-weight: 600; font-size: 1rem; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .35s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .btn:active { transform: translateY(1px) scale(.985); } .btn .icon { transition: transform .3s var(--ease); } .btn:hover .icon { transform: translateX(3px); } .btn--primary { background: var(--accent-strong); color: var(--on-accent); } .btn--primary:hover { background: var(--ink); color: var(--bg); } .btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: var(--ink); } .btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; } /* Botón con la flecha en su propia isla */ .btn--island { min-height: 52px; padding: 0 6px 0 24px; gap: 16px; } .btn-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pill); background: color-mix(in srgb, currentColor 16%, transparent); transition: transform .5s var(--spring), background-color .3s var(--ease); } .btn--island .btn-ico .icon { width: 18px; height: 18px; } .btn--island:hover .icon { transform: none; } .btn--island:hover .btn-ico { transform: translateX(3px) scale(1.06); } .btn--island:hover .btn-ico .icon { transform: translateX(1px); } /* Magnetismo: el script mueve --tx/--ty, el botón solo se desplaza con transform */ .js-magnetic { transform: translate(var(--tx, 0px), var(--ty, 0px)); } .js-magnetic:active { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(.985); } /* ---------- Cabecera ---------- */ .header-sentinel { position: absolute; top: 0; height: 1px; width: 1px; } .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--header-bg); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line); } .header-inner { height: 100%; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: flex-end; gap: 10px; text-decoration: none; margin-right: auto; } .brand-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; } .brand-mark, .brand-word { display: block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: left center; mask-position: left center; } .brand-mark { width: 70px; height: 28px; background: var(--ink); -webkit-mask-image: var(--brand-mark); mask-image: var(--brand-mark); } .brand-word { width: 70px; height: 15px; background: var(--accent); -webkit-mask-image: var(--brand-word); mask-image: var(--brand-word); } .brand-tag { font-size: .8125rem; color: var(--ink-3); padding-left: 10px; border-left: 1px solid var(--line-strong); line-height: 1.2; padding-bottom: 1px; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { position: relative; padding: 8px 12px; border-radius: var(--pill); font-size: .9375rem; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .2s var(--ease), background-color .2s var(--ease); } .nav a::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .4s var(--spring); } .nav a:hover { color: var(--ink); background: var(--surface-2); } .nav a.is-active { color: var(--ink); } .nav a.is-active::after { transform: scale(1); } .header-actions { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--pill); border: 1px solid var(--line); background: transparent; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .icon-btn:hover { border-color: var(--line-strong); background: var(--surface-2); } .icon-btn .icon { width: 18px; height: 18px; } .theme-toggle .icon { transition: transform .6s var(--spring); } .theme-toggle:hover .icon { transform: rotate(-25deg); } .theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; } } /* Hamburguesa que se convierte en X */ .burger { position: relative; display: block; width: 18px; height: 12px; } .burger i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease); } .burger i:first-child { top: 2px; } .burger i:last-child { top: 8.5px; } [aria-expanded="true"] .burger i:first-child { transform: translateY(3.25px) rotate(45deg); } [aria-expanded="true"] .burger i:last-child { transform: translateY(-3.25px) rotate(-45deg); } .menu-toggle { display: none; } .mobile-nav { display: none; } @media (max-width: 1080px) { .nav, .header-actions .btn { display: none; } .menu-toggle { display: inline-grid; } .mobile-nav { display: block; position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49; padding: 12px var(--gutter) 24px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .4s var(--ease), opacity .4s var(--ease), visibility .4s; } .mobile-nav.is-open { transform: none; opacity: 1; visibility: visible; } .mobile-nav a:not(.btn) { display: block; padding: 14px 4px; font-size: 1.125rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); } .mobile-nav .btn { margin-top: 20px; width: 100%; justify-content: center; } .mobile-nav a { opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .5s var(--ease); } .mobile-nav.is-open a { opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 45ms); } } @media (max-width: 520px) { .brand-tag { display: none; } } /* ---------- Hero ---------- */ .hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(24px, 4vw, 48px) clamp(56px, 7vw, 96px); } .hero-glow { position: absolute; z-index: -1; pointer-events: none; width: min(820px, 110vw); aspect-ratio: 1; right: -14%; top: -18%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) var(--glow, 20%), transparent), transparent 72%); } .hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; min-height: min(560px, calc(100dvh - var(--header-h) - 140px)); } .hero h1 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); letter-spacing: -.035em; line-height: 1.04; } .hero h1 em { font-style: normal; color: var(--accent); } .hero-title .w { display: inline-block; vertical-align: top; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; } .hero-title .w > span { display: inline-block; } .hero-sub { margin-top: 22px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--ink-2); max-width: 40ch; } .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; } .frame { position: relative; border-radius: var(--radius-media); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; } .frame-bar { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface); } .frame-dots { position: absolute; left: 12px; display: flex; gap: 6px; } .frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); } .frame-url { flex: 1; max-width: 280px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; border-radius: var(--pill); background: var(--surface-2); font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; } .frame-url .icon { width: 11px; height: 11px; } .url-text.is-typing::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: caret .7s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .phone { position: absolute; right: 0; bottom: 0; width: clamp(130px, 27%, 200px); padding: 7px; border-radius: 30px; background: #1C1A1B; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .08); } .phone img { border-radius: 24px; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; width: 100%; } /* Escaparate: las diapositivas se apilan en la misma celda de la rejilla */ .slides { position: relative; display: grid; overflow: hidden; } .phone .slides { border-radius: 24px; } .slides > .slide { grid-area: 1 / 1; opacity: 0; } .slides > .slide.is-prev { opacity: 1; z-index: 1; } .slides > .slide.is-on { opacity: 1; z-index: 2; } .hero-visual { position: relative; } .tilt { position: relative; padding: 0 48px 64px 0; transform: perspective(1400px) rotateY(calc(var(--px, 0) * 4deg)) rotateX(calc(var(--py, 0) * -3deg)); transition: transform .9s var(--ease); } .hero .phone { transform: translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 9px), 0); transition: transform .9s var(--ease); } .host { position: absolute; left: -18px; bottom: 40px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); translate: calc(var(--px, 0) * -9px) calc(var(--py, 0) * -7px); transition: translate .9s var(--ease); } .host-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); } .host-ico .icon { width: 17px; height: 17px; } .host-text { display: flex; flex-direction: column; line-height: 1.15; } .host-label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .host-name { font-size: .9375rem; font-weight: 600; white-space: nowrap; } .showcase-nav { display: flex; gap: 8px; margin-top: 14px; padding-right: 48px; } .showcase-nav button { flex: 1; min-width: 0; display: grid; gap: 8px; padding: 12px 0; border: 0; background: none; cursor: pointer; text-align: left; font-size: .8125rem; font-weight: 500; color: var(--ink-3); transition: color .3s var(--ease); } .showcase-nav button > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .showcase-nav button:hover, .showcase-nav button[aria-pressed="true"] { color: var(--ink); } .showcase-nav .bar { display: block; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; } .showcase-nav .bar::after { content: ""; display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; } .showcase-nav [aria-pressed="true"] .bar::after { transform: scaleX(1); } /* Entrada del hero */ @media (prefers-reduced-motion: no-preference) { .hero-glow { animation: drift 18s var(--ease-io) infinite alternate; } .hero-copy > :not(h1) { animation: rise .9s var(--ease) both; } .hero-copy > .hero-sub { animation-delay: .38s; } .hero-copy > .hero-ctas { animation-delay: .48s; } .hero-title .w > span { animation: word-up 1s var(--ease) both; animation-delay: calc(.08s + var(--d) * 70ms); } .hero-visual .frame { animation: rise 1.1s var(--ease) .2s both; } .hero-visual .phone { animation: phone-enter 1.2s var(--ease) .45s both, float 7s var(--ease-io) 2s infinite; } .hero-visual .host { animation: rise .9s var(--ease) .7s both; } .showcase-nav { animation: rise .9s var(--ease) .6s both; } .frame .slides.is-live > .slide.is-on { animation: wipe 1.05s var(--ease) both; } .phone .slides.is-live > .slide.is-on { animation: phone-swap .9s var(--ease) .1s both; } .host.is-swap .host-ico, .host.is-swap .host-name { animation: host-swap .6s var(--ease) both; } .host.is-swap .host-name { animation-delay: .06s; } .showcase.is-auto .showcase-nav [aria-pressed="true"] .bar::after { animation: bar 5.5s linear both; } .showcase.is-paused .showcase-nav .bar::after { animation-play-state: paused; } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes word-up { from { transform: translateY(108%); } to { transform: none; } } @keyframes phone-enter { from { opacity: 0; translate: 0 44px; rotate: 4deg; } to { opacity: 1; translate: none; rotate: none; } } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes drift { to { transform: translate(-9%, 12%) scale(1.1); } } @keyframes wipe { from { clip-path: inset(0 0 0 100%); transform: scale(1.06); } to { clip-path: inset(0); transform: none; } } @keyframes phone-swap { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes host-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; min-height: 0; } .hero-sub { max-width: 46ch; } .hero-visual { max-width: 640px; } .tilt { padding: 0 32px 48px 0; } .showcase-nav { padding-right: 32px; } .host { left: 12px; bottom: 26px; } .hero-glow { top: 34%; right: -45%; width: min(700px, 130vw); } } @media (max-width: 520px) { .hero-ctas .btn { flex: 1 1 100%; justify-content: center; } .hero-ctas .btn--island { justify-content: space-between; } .tilt { padding: 0 22px 40px 0; } .showcase-nav { padding-right: 0; gap: 10px; } .phone { width: 34%; border-radius: 22px; padding: 5px; } .phone img, .phone .slides { border-radius: 18px; } .frame-bar { height: 28px; } .frame-dots { display: none; } .host { left: 8px; bottom: 14px; padding: 5px 14px 5px 5px; } .host-ico { width: 30px; height: 30px; } .host-label { font-size: .625rem; } .host-name { font-size: .8125rem; } .nav-long { display: none; } } /* ---------- Herramientas (cinta en movimiento) ---------- */ .tools { padding-block: 8px 0; } .tools-inner { display: flex; align-items: center; gap: 12px 32px; padding-block: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tools-label { flex: none; font-size: .9375rem; color: var(--ink-3); } .marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee-track { display: flex; width: max-content; } .tools-list { display: flex; gap: 32px; padding-right: 32px; } .tools-list li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 500; font-size: .9375rem; white-space: nowrap; } .tools-list .icon { width: 18px; height: 18px; color: var(--ink); opacity: .75; } @media (prefers-reduced-motion: no-preference) { .marquee-track { animation: marquee 42s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } .marquee-track { width: auto; } .tools-list { flex-wrap: wrap; gap: 14px 28px; padding-right: 0; } .tools-list[aria-hidden="true"] { display: none; } } @keyframes marquee { to { transform: translateX(-50%); } } .tools-more { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: .9375rem; font-weight: 500; color: var(--accent-strong); text-decoration: none; white-space: nowrap; } .tools-more .icon { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .4s var(--spring); } .tools-more:hover { text-decoration: underline; text-underline-offset: 3px; } .tools-more:hover .icon { transform: rotate(90deg) translateX(3px); } @media (max-width: 640px) { .tools-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 20px; } .marquee { width: 100%; } } /* ---------- Herramientas y para qué las usamos ---------- */ .stack { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; } .stack::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--line-strong) 70%); transform-origin: left; } .stack-step { position: relative; display: flex; flex-direction: column; } .stack-num { position: relative; align-self: flex-start; padding-right: 10px; background: var(--bg); font-family: var(--mono); font-size: .8125rem; line-height: 22px; color: var(--accent-strong); font-variant-numeric: tabular-nums; } .stack-step h3 { margin-top: 18px; font-size: 1.5rem; letter-spacing: -.02em; } .stack-lead { margin-top: 6px; font-size: .96875rem; color: var(--ink-2); } .stack-tools { display: grid; gap: 8px; margin-top: 18px; } .tool { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } .tool:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .tool-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); transition: transform .6s var(--spring), color .3s var(--ease); } .tool-ico .icon { width: 18px; height: 18px; } .tool:hover .tool-ico { transform: rotate(-8deg) scale(1.06); color: var(--accent-strong); } .tool strong { display: block; font-size: .96875rem; } .tool div span { display: block; margin-top: 2px; font-size: .875rem; color: var(--ink-3); line-height: 1.45; } @media (prefers-reduced-motion: no-preference) { .js .stack::before { transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; } .js .stack.is-in::before { transform: none; } } @media (max-width: 1080px) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; } .stack::before { display: none; } .stack-step { padding-top: 16px; border-top: 1px solid var(--line-strong); } } @media (max-width: 560px) { .stack { grid-template-columns: 1fr; gap: 36px; } } /* ---------- Método ---------- */ .method-statement { font-size: clamp(1.75rem, 3.6vw, 3rem); } .method-statement .stmt-2 { display: block; color: var(--ink-3); } .method-lead { margin-top: 24px; max-width: 58ch; font-size: 1.125rem; color: var(--ink-2); } /* Las palabras se encienden: con el propio scroll si el navegador lo permite, si no al aparecer */ @media (prefers-reduced-motion: no-preference) { .js .method-statement .wd { opacity: .16; transition: opacity .6s var(--ease); } .js .method-statement.is-in .wd { opacity: 1; transition-delay: calc(var(--k) * 55ms); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .js .method-statement { view-timeline: --stmt block; } .js .method-statement .wd, .js .method-statement.is-in .wd { opacity: 1; transition: none; animation: word-fill linear both; animation-timeline: --stmt; animation-range: cover calc(14% + var(--k) / var(--n) * 30%) cover calc(24% + var(--k) / var(--n) * 30%); } } } @keyframes word-fill { from { opacity: .16; } to { opacity: 1; } } .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(48px, 6vw, 80px); } .fact { position: relative; padding-top: 22px; border-top: 1px solid var(--line-strong); } .fact::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); } .facts.is-in .fact::before { transform: scaleX(.2); transition-delay: calc(.3s + var(--i, 0) * 90ms); } .facts.is-in .fact:hover::before { transform: scaleX(1); transition-delay: 0s; } .fact .icon { width: 26px; height: 26px; color: var(--accent); transition: transform .6s var(--spring); } .fact:hover .icon { transform: translateY(-3px) rotate(-8deg); } .fact h3 { margin-top: 18px; font-size: 1.1875rem; letter-spacing: -.01em; } .fact p { margin-top: 8px; color: var(--ink-2); font-size: 1rem; } @media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; } } @media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: 28px; } } /* Cifras */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-strong); } .stats li { display: grid; gap: 10px; align-content: start; padding: 28px 24px 4px 0; } .stats li + li { padding-left: 24px; border-left: 1px solid var(--line); } .stat-num { font-size: clamp(2.75rem, 5.2vw, 4.25rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-num .unit { font-size: .55em; letter-spacing: -.02em; color: var(--ink-3); } .stat-text { font-size: .96875rem; color: var(--ink-2); max-width: 30ch; } @media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats li:nth-child(3) { padding-left: 0; border-left: 0; } .stats li:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 20px; } } @media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .stats li, .stats li + li { padding-left: 0; border-left: 0; } .stats li + li { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 24px; } } /* ---------- Opciones (pestañas) ---------- */ .section--alt { background: var(--surface); border-block: 1px solid var(--line); } .tablist { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px; border-radius: 22px; background: var(--surface-2); margin-bottom: clamp(28px, 4vw, 48px); } .tab-ind { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); pointer-events: none; opacity: 0; } .tablist.has-ind .tab-ind { opacity: 1; } .tablist.has-ind .tab-ind.is-ready { transition: transform .6s var(--spring); } .tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 18px; border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); } .tab:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); } .tab[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow); } .tablist.has-ind .tab[aria-selected="true"] { background: transparent; box-shadow: none; } .tab-logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .5s var(--spring); } .tab-logo .icon { width: 20px; height: 20px; } .tab[aria-selected="true"] .tab-logo { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-strong); transform: scale(1.06); } .tab-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .tab-name { font-weight: 600; font-size: 1.0625rem; } .tab-hint { font-size: .875rem; color: var(--ink-3); } .panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .panel[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .panel.is-entering > * { animation: rise .6s var(--ease) both; } .panel.is-entering > :nth-child(2) { animation-delay: .08s; } .panel.is-entering .proscons li { animation: rise .5s var(--ease) both; animation-delay: calc(.12s + var(--k, 0) * 40ms); } .panel.is-entering .sites li { animation: rise .5s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * 45ms); } } .panel h3 { font-size: clamp(1.75rem, 3vw, 2.375rem); } .panel-tagline { margin-top: 6px; font-size: 1.125rem; color: var(--accent-strong); font-weight: 500; } .panel-lead { margin-top: 18px; color: var(--ink-2); max-width: 56ch; } .proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 32px; } .proscons h4 { font-size: .9375rem; font-weight: 600; letter-spacing: 0; margin-bottom: 14px; color: var(--ink); } .proscons li { display: flex; gap: 10px; align-items: flex-start; font-size: .96875rem; color: var(--ink-2); line-height: 1.5; } .proscons li + li { margin-top: 12px; } .proscons .icon { width: 18px; height: 18px; margin-top: 2px; } .pros .icon { color: var(--accent); } .cons .icon { color: var(--ink-3); } /* Variantes dentro de cada camino (Vercel / servidor, clásico / híbrido) */ .variants { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 26px; background: var(--surface-2); } .variant { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 0; border-radius: var(--pill); background: transparent; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .35s var(--spring); } .variant .icon { width: 16px; height: 16px; } .variant:hover { color: var(--ink); } .variant:active { transform: scale(.96); } .variant[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .variant[aria-pressed="true"] .icon { color: var(--accent-strong); } .variant-lead { margin-top: 22px; color: var(--ink-2); max-width: 56ch; } .variant-body .proscons { margin-top: 24px; } @media (prefers-reduced-motion: no-preference) { .variant-body.is-entering, .variant-media.is-entering { animation: rise .55s var(--ease) both; } .variant-body.is-entering .proscons li { animation: rise .5s var(--ease) both; animation-delay: calc(.08s + var(--k, 0) * 40ms); } } /* Híbrido: Claude conectado a WordPress */ .ai-log { border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); overflow: hidden; box-shadow: var(--shadow); } .ai-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface); } .ai-link { display: flex; align-items: center; flex: none; } .ai-node { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); } .ai-node .icon { width: 18px; height: 18px; } .ai-node:first-child .icon { color: var(--accent-strong); } .ai-wire { width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px); background-size: 20px 2px; } .ai-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .ai-title strong { font-size: .96875rem; } .ai-title span { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); } .ai-group { padding: 14px 18px 0; font-size: .8125rem; font-weight: 600; color: var(--ink-2); } .ai-steps { display: grid; gap: 6px; margin: 0; padding: 10px; list-style: none; } .ai-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); } .ai-steps .icon { width: 18px; height: 18px; color: var(--accent); } .ai-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 18px; border-top: 1px solid var(--line); background: var(--accent-soft); font-size: .9375rem; color: var(--ink-2); } .ai-score { display: inline-flex; align-items: baseline; gap: 8px; font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); } .ai-score s { font-weight: 500; color: var(--ink-3); text-decoration-thickness: 2px; } .ai-score .icon { width: 18px; height: 18px; color: var(--accent); align-self: center; } .ai-foot a { color: var(--accent-strong); font-weight: 500; text-underline-offset: 3px; } @media (prefers-reduced-motion: no-preference) { .ai-wire { animation: wire .9s linear infinite; } .variant-media.is-entering .ai-steps li { animation: rise .5s var(--ease) both; animation-delay: calc(.2s + var(--i, 0) * 110ms); } } @keyframes wire { to { background-position: 20px 0; } } .ideal { margin-top: 32px; padding: 18px 20px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); } .ideal p { font-size: .96875rem; color: var(--ink-2); } .ideal strong { color: var(--ink); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line-strong); font-size: .875rem; font-weight: 500; color: var(--ink-2); background: var(--surface); } .panel-media { position: sticky; top: calc(var(--header-h) + 24px); } .panel-media .frame { box-shadow: var(--shadow); } .media-note { margin-top: 16px; font-size: .9375rem; color: var(--ink-3); } .proof { margin-top: 20px; padding: 22px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-line); } .proof-figure { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .proof-figure s { color: var(--ink-3); text-decoration-thickness: 2px; font-weight: 500; } .proof-figure .icon { width: 22px; height: 22px; color: var(--accent); align-self: center; } .proof p { margin-top: 12px; font-size: .9375rem; color: var(--ink-2); } .proof a { color: var(--accent-strong); font-weight: 500; text-underline-offset: 3px; } /* Capturas largas que se recorren: al pasar el ratón en escritorio, con el scroll en el móvil */ .shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; background: var(--surface-2); } .shot .long, .work-shot .long { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; transition: transform 1.4s var(--ease); } .frame .shot .long { aspect-ratio: auto; object-fit: fill; } @media (hover: hover) { .pan:hover .long { transform: translateY(calc(-100% + 100cqh)); transition: transform 7s cubic-bezier(.45, .05, .3, 1); } } @supports (animation-timeline: view()) { @media (hover: none) and (prefers-reduced-motion: no-preference) { .shot, .work-shot { view-timeline: --shot block; } .shot .long, .work-shot .long { animation: pan-scroll linear both; animation-timeline: --shot; animation-range: cover 30% cover 90%; } } } @keyframes pan-scroll { to { transform: translateY(calc((-100% + 100cqh) * .55)); } } /* Diagrama del servidor propio */ .server { border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); overflow: hidden; box-shadow: var(--shadow); } .server-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface); } .server-title { display: flex; align-items: center; gap: 10px; font-weight: 600; } .server-title .icon { width: 22px; height: 22px; color: var(--accent); } .server-live { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--pill); border: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; color: var(--ink-3); white-space: nowrap; } .server-live i, .led { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .server-live i::after, .led::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; } .server-group { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 0; font-size: .8125rem; font-weight: 600; color: var(--ink-2); } .server-count { font-family: var(--mono); font-weight: 500; font-size: .75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; } .sites li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); } .sites strong { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sites span { grid-column: 2; font-size: .75rem; color: var(--ink-3); line-height: 1.3; } .services { padding: 10px; display: grid; gap: 8px; } .service { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); } .service > .icon { width: 22px; height: 22px; color: var(--ink-2); } .service strong { display: block; font-size: .96875rem; } .service span { display: block; font-size: .875rem; color: var(--ink-3); line-height: 1.4; } .service em { font-style: normal; font-family: var(--mono); font-size: .72rem; padding: 4px 9px; border-radius: var(--pill); border: 1px solid var(--accent-line); color: var(--accent-strong); white-space: nowrap; } .server-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); } .server-foot span { display: inline-flex; align-items: center; gap: 7px; } .server-foot .icon { width: 16px; height: 16px; color: var(--accent); } /* El centinela pasa lista: cada luz late por turnos */ @media (prefers-reduced-motion: no-preference) { .server-live i::after { animation: ping 2.2s var(--ease) infinite; } .led::after { animation: ping 3.6s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .42s); } } @keyframes ping { 0% { transform: scale(1); opacity: .6; } 60%, 100% { transform: scale(3); opacity: 0; } } @media (max-width: 900px) { .tablist { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } .tab { scroll-snap-align: start; } .panel { grid-template-columns: 1fr; } .panel-media { position: static; order: -1; } } @media (max-width: 560px) { .proscons { grid-template-columns: 1fr; } .tab-hint { display: none; } .tablist { grid-auto-columns: minmax(150px, 1fr); } .service { grid-template-columns: auto 1fr; } .service em { grid-column: 2; justify-self: start; } } @media (max-width: 400px) { .sites { grid-template-columns: 1fr; } } /* ---------- Caso WordPress optimizado ---------- Los anillos usan los colores de puntuación de PageSpeed (naranja 50-89, verde 90-100): son un dato, no decoración, por eso salen del acento único. */ .speed { --score-mid: #FFA400; --score-mid-text: #B35C00; --score-good: #0CCE6B; --score-good-text: #0A7F44; } :root[data-theme="dark"] .speed { --score-mid-text: #FFB547; --score-good-text: #3DDC84; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .speed { --score-mid-text: #FFB547; --score-good-text: #3DDC84; } } .speed-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .speed h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); } .speed h2 .line { display: block; } .speed-lead { margin-top: 18px; font-size: 1.125rem; color: var(--ink-2); max-width: 48ch; } .speed-sub { margin-top: 32px; font-size: 1rem; letter-spacing: 0; } .cleanup { margin-top: 14px; display: grid; gap: 12px; } .cleanup li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); line-height: 1.5; } .cleanup .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); } .speed-card { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .speed-card-title { font-size: .9375rem; font-weight: 600; color: var(--ink-2); } .psi-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; } .psi-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--pill); background: var(--surface-2); } .psi-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--pill); background: transparent; cursor: pointer; font-size: .875rem; font-weight: 500; color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .35s var(--spring); } .psi-tab .icon { width: 16px; height: 16px; } .psi-tab:hover { color: var(--ink); } .psi-tab:active { transform: scale(.96); } .psi-tab[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .psi-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); } .mini { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; } .mini svg { width: 56px; height: 56px; transform: rotate(-90deg); } .mini .gauge-track, .mini .gauge-fill { stroke-width: 9; } .mini .gauge-fill { stroke: var(--score-good); } .mini .gauge-track { stroke: color-mix(in srgb, var(--score-good) 16%, transparent); } .mini-num { position: absolute; top: 0; width: 56px; height: 56px; display: grid; place-items: center; font-size: .9375rem; font-weight: 600; letter-spacing: -.02em; color: var(--score-good-text); font-variant-numeric: tabular-nums; } .mini-label { margin-top: 8px; font-size: .78rem; line-height: 1.25; color: var(--ink-2); } .gauges { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 36px); margin-top: 22px; } .gauge { position: relative; display: grid; justify-items: center; width: 112px; } .gauge--big { width: 152px; } .gauge svg { width: 100%; height: auto; transform: rotate(-90deg); } .gauge-track { fill: none; stroke: var(--line); stroke-width: 8; } .gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--score)); transition: stroke-dashoffset 1.4s var(--ease) .2s; } .gauge--mid .gauge-fill { stroke: var(--score-mid); } .gauge--good .gauge-fill { stroke: var(--score-good); } .gauge--mid .gauge-track { stroke: color-mix(in srgb, var(--score-mid) 16%, transparent); } .gauge--good .gauge-track { stroke: color-mix(in srgb, var(--score-good) 16%, transparent); } .gauge-num { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; display: grid; place-items: center; font-size: 2rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .gauge--big .gauge-num { font-size: 2.75rem; } .gauge--mid .gauge-num { color: var(--score-mid-text); } .gauge--good .gauge-num { color: var(--score-good-text); } .gauge-label { margin-top: 8px; font-size: .875rem; color: var(--ink-3); } .gauge-arrow { width: 24px; height: 24px; color: var(--ink-3); margin-bottom: 28px; } @media (prefers-reduced-motion: no-preference) { .js .speed-card:not(.is-in) .gauge-fill { stroke-dashoffset: 100; } .gauge--big { transition: transform .6s var(--spring) 1.5s; } .js .speed-card:not(.is-in) .gauge--big { transform: scale(.94); } } .speed-metrics { margin: 28px 0 0; display: grid; } .speed-metrics > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); } .speed-metrics dt { font-size: .96875rem; color: var(--ink-2); } .speed-metrics dd { margin: 0; display: flex; align-items: baseline; gap: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } .speed-metrics s { position: relative; color: var(--ink-3); font-size: .9375rem; text-decoration: none; } .speed-metrics s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 1.5px; border-radius: 1px; background: currentColor; transform-origin: left; } .speed-metrics dd > span { font-weight: 600; font-size: 1.125rem; color: var(--ink); } @media (prefers-reduced-motion: no-preference) { .speed-metrics s::after { transition: transform .7s var(--ease) calc(.6s + var(--i, 0) * .12s); } .js .speed-detail:not(.is-in) .speed-metrics s::after { transform: scaleX(0); } } .speed-note { margin-top: 16px; font-size: .8125rem; color: var(--ink-3); line-height: 1.5; } /* Captura real del informe + detalle de métricas */ .speed-proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 6vw, 80px); } .psi-shot { margin: 0; } .psi-shot .frame { box-shadow: var(--shadow-lg); } .psi-imgs { display: grid; background: #fff; } .frame .psi-imgs img { grid-area: 1 / 1; width: 100%; height: auto; aspect-ratio: 1400 / 643; object-fit: contain; opacity: 0; transition: opacity .6s var(--ease); } .frame .psi-imgs img.is-on { opacity: 1; } .psi-shot figcaption { margin-top: 14px; font-size: .9375rem; color: var(--ink-3); } .psi-shot figcaption a { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-strong); font-weight: 500; text-underline-offset: 3px; } .psi-shot figcaption .icon { width: 15px; height: 15px; } .speed-detail .speed-sub { margin-top: 0; } .speed-detail .speed-metrics { margin-top: 10px; } @media (max-width: 900px) { .speed-grid, .speed-proof { grid-template-columns: 1fr; } } @media (max-width: 480px) { .gauge { width: 92px; } .gauge--big { width: 124px; } .gauge-num { font-size: 1.6rem; } .gauge--big .gauge-num { font-size: 2.2rem; } .speed-metrics > div { flex-direction: column; gap: 4px; } .psi-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } } /* ---------- Comparativa ---------- */ .matrix-wrap { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; } .matrix { width: 100%; border-collapse: collapse; font-size: .96875rem; } .matrix th, .matrix td { padding: 18px 20px; text-align: left; vertical-align: top; } .matrix thead th { position: relative; font-size: 1rem; font-weight: 600; background: var(--surface); border-bottom: 1px solid var(--line-strong); } .matrix thead th .icon { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; color: var(--ink-2); } .matrix tbody th { width: 20%; font-weight: 600; color: var(--ink); } .matrix .matrix-groups th, .matrix .matrix-groups td { padding: 16px 20px 0; border-bottom: 0; background: var(--surface); } .matrix .matrix-groups th span { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--line-strong); font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .matrix .matrix-groups th .icon { width: 16px; height: 16px; margin: 0; color: var(--ink-3); vertical-align: 0; } .matrix tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg) 55%, transparent); } .matrix td { color: var(--ink-2); width: 20%; font-variant-numeric: tabular-nums; transition: background-color .4s var(--ease); } .v { display: flex; gap: 10px; align-items: flex-start; } .v .icon { width: 18px; height: 18px; margin-top: 2px; } .v--hi .icon { color: var(--accent); } .v--mid .icon, .v--lo .icon { color: var(--ink-3); } .v--hi { color: var(--ink); font-weight: 500; } .matrix [data-col].is-picked { background: var(--accent-soft); } .matrix thead th.is-picked { box-shadow: inset 0 3px 0 var(--accent); } .pick-flag { display: none; margin-left: 8px; padding: 2px 8px; border-radius: var(--pill); background: var(--accent-strong); color: var(--on-accent); font-size: .72rem; font-weight: 600; vertical-align: 2px; } th.is-picked .pick-flag { display: inline-block; } @media (prefers-reduced-motion: no-preference) { th.is-picked .pick-flag { animation: pop .5s var(--spring) both; } .js .matrix-wrap.reveal:not(.is-in) tbody tr { opacity: 0; } .js .matrix-wrap.reveal.is-in tbody tr { animation: reveal-up .7s var(--ease) backwards; animation-delay: calc(.15s + var(--i, 0) * 55ms); } } @keyframes pop { from { opacity: 0; transform: scale(.6); } } .legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; font-size: .875rem; color: var(--ink-3); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend .icon { width: 16px; height: 16px; } .legend .v--hi .icon { color: var(--accent); } @media (max-width: 760px) { .matrix-wrap { border: 0; background: transparent; overflow: visible; } .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: auto; } .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .matrix tbody tr { margin-bottom: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; } .matrix tbody tr:nth-child(even) { background: var(--surface); } .matrix tbody th { width: auto; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 1rem; } .matrix td { display: grid; width: auto; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 16px; } .matrix td + td { border-top: 1px solid var(--line); } .matrix td::before { content: attr(data-label); font-size: .8125rem; font-weight: 600; color: var(--ink-3); padding-top: 1px; } } /* ---------- Test ---------- */ .quiz-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; } .quiz-q { border: 0; margin: 0; padding: 0 0 28px; min-width: 0; } .quiz-q + .quiz-q { padding-top: 28px; border-top: 1px solid var(--line); } .quiz-q legend { float: left; width: 100%; padding: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; } .quiz-q legend + * { clear: both; } .quiz-q .hint { font-size: .9375rem; color: var(--ink-3); } .opts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .opt { position: relative; } .opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: var(--surface); font-size: .96875rem; font-weight: 500; color: var(--ink-2); transition: border-color .2s var(--ease), background-color .25s var(--ease), color .2s var(--ease), transform .35s var(--spring); } .opt span .icon { width: 16px; height: 16px; display: none; } .opt:hover span { border-color: var(--ink-3); color: var(--ink); } .opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); } .opt input:checked + span .icon { display: block; } .opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; } .opt input:active + span { transform: scale(.96); } @media (prefers-reduced-motion: no-preference) { .opt input:checked + span .icon { animation: pop .45s var(--spring) both; } } .result { position: sticky; top: calc(var(--header-h) + 24px); padding: clamp(24px, 3vw, 36px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .result-progress { display: flex; align-items: center; justify-content: space-between; font-size: .875rem; color: var(--ink-3); } .steps { display: flex; gap: 6px; } .steps i { position: relative; width: 22px; height: 4px; border-radius: 2px; background: var(--line-strong); overflow: hidden; } .steps i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .steps i.on::after { transform: scaleX(1); } .result-empty { margin-top: 28px; } .result-empty h3 { font-size: 1.5rem; } .result-empty p { margin-top: 10px; color: var(--ink-2); } .result-body { margin-top: 24px; } .result-body[hidden], .result-empty[hidden] { display: none; } .result-label { font-size: .9375rem; color: var(--ink-3); } .result-name { margin-top: 4px; font-size: clamp(1.625rem, 2.6vw, 2.125rem); } .result-reason { margin-top: 14px; color: var(--ink-2); } .result-combo { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); font-size: .9375rem; color: var(--ink-2); } .result-combo[hidden] { display: none; } .result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } @media (prefers-reduced-motion: no-preference) { .result-body.is-fresh > * { animation: rise .55s var(--ease) both; } .result-body.is-fresh > :nth-child(2) { animation-delay: .06s; } .result-body.is-fresh > :nth-child(3) { animation-delay: .12s; } .result-body.is-fresh > :nth-child(n+4) { animation-delay: .18s; } } @media (max-width: 900px) { .quiz-grid { grid-template-columns: 1fr; } .result { position: static; } } /* ---------- Caso CBD (bento) ---------- */ .bento { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "a a b c" "a a b d" "e f f f"; } .cell { position: relative; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); padding: 24px; min-width: 0; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .cell h3 { font-size: 1.1875rem; letter-spacing: -.01em; } .cell p { margin-top: 8px; font-size: .96875rem; color: var(--ink-2); } .cell-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 18px; transition: transform .6s var(--spring); } .cell-icon .icon { width: 22px; height: 22px; color: var(--accent); } .cell:hover .cell-icon { transform: translateY(-3px) rotate(-6deg); } .cell-tag { display: inline-flex; margin-top: 16px; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--pill); } .cell--shot { grid-area: a; padding: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); } .cell--shot img { flex: 1; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 1.4s var(--ease); } .cell--shot:hover img { transform: scale(1.03); } .cell--shot figcaption, .cell--phone figcaption { position: relative; padding: 14px 20px; font-size: .9375rem; color: var(--ink-2); background: var(--bg); border-top: 1px solid var(--line); } .cell--phone { grid-area: b; padding: 0; overflow: hidden; display: flex; flex-direction: column; background: #F2C32C; } .cell--phone .phone-wrap { flex: 1; display: grid; place-items: end center; padding: 28px 22px 0; min-height: 0; overflow: hidden; } .cell--phone .phone { position: static; width: 100%; max-width: 220px; border-radius: 28px 28px 0 0; padding: 7px 7px 0; transition: transform .9s var(--ease); } .cell--phone .phone img { border-radius: 22px 22px 0 0; aspect-ratio: 390 / 700; } .cell--phone:hover .phone { transform: translateY(-10px); } .cell--c { grid-area: c; } .cell--d { grid-area: d; } .cell--e { grid-area: e; } .cell--flow { grid-area: f; background: var(--accent-soft); border-color: var(--accent-line); } .flow-head { display: flex; align-items: center; gap: 20px; } .flow-meter { flex: 1; max-width: 240px; height: 2px; border-radius: 2px; background: var(--accent-line); overflow: hidden; } .flow-meter i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--p, 1)); transform-origin: left; transition: transform .9s var(--ease); } .flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; counter-reset: flow; } .flow li { position: relative; padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); transition: opacity .5s var(--ease), transform .6s var(--spring), border-color .4s var(--ease), box-shadow .5s var(--ease); } .flow li .icon { width: 20px; height: 20px; color: var(--accent); } .flow strong { display: block; margin-top: 10px; font-size: .96875rem; } .flow span { display: block; margin-top: 2px; font-size: .875rem; color: var(--ink-3); line-height: 1.4; } .flow li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -10px; width: 8px; height: 8px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); transform: translateY(-50%) rotate(45deg); } /* El pedido avanza paso a paso mientras la sección está a la vista */ .flow.is-seq li { opacity: .45; } .flow.is-seq li.is-done { opacity: 1; } .flow.is-seq li.is-now { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow); } .flow.is-seq li.is-now .icon { animation: pop .5s var(--spring) both; } .case-more { margin-top: 24px; font-size: .96875rem; color: var(--ink-3); max-width: 70ch; } @media (max-width: 1080px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "b c" "b d" "e e" "f f"; } .cell--shot img { aspect-ratio: 16 / 10; flex: none; height: auto; } } @media (max-width: 640px) { .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; } .cell--phone .phone-wrap { max-height: 420px; } .flow { grid-template-columns: 1fr; } .flow-meter { display: none; } .flow li:not(:last-child)::after { top: auto; bottom: -10px; right: 50%; transform: translateX(50%) rotate(135deg); } } /* ---------- Proyectos ---------- */ .projects-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; margin-bottom: clamp(32px, 4vw, 48px); } .projects-head .section-head { margin-bottom: 0; } .hover-hint { display: none; } @media (hover: hover) { .hover-hint { display: inline; } } .filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 26px; background: var(--surface-2); } .filter { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: var(--pill); background: transparent; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--ink-2); transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .35s var(--spring); } .filter:hover { color: var(--ink); } .filter:active { transform: scale(.96); } .filter[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .filter-n { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .filter[aria-pressed="true"] .filter-n { color: var(--accent-strong); } .works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 18px; } .work { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .work[hidden] { display: none; } .work--wide { grid-column: span 2; } .work:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .work-shot { position: relative; height: clamp(230px, 23vw, 310px); overflow: hidden; container-type: size; border-bottom: 1px solid var(--line); background: var(--surface-2); } .work-shot--device { display: grid; place-items: end center; background: radial-gradient(110% 80% at 50% 115%, color-mix(in srgb, var(--accent) 34%, #141213), #141213 72%); } .work-shot--device .phone { position: relative; right: auto; bottom: auto; width: 46%; max-width: 186px; border-radius: 28px 28px 0 0; padding: 7px 7px 0; transform: translateY(16%); transition: transform .9s var(--ease); } .work-shot--device .phone img { border-radius: 22px 22px 0 0; } .work:hover .work-shot--device .phone { transform: translateY(5%); } .work-shot--duo .phone { position: absolute; left: 50%; bottom: 0; width: 40%; max-width: 168px; transition: transform .9s var(--ease); } .work-shot--duo .phone--front { z-index: 2; transform: translate(-80%, 14%) rotate(-4deg); } .work-shot--duo .phone--back { transform: translate(-16%, 22%) rotate(5deg); opacity: .92; } .work:hover .work-shot--duo .phone--front { transform: translate(-88%, 5%) rotate(-6deg); } .work:hover .work-shot--duo .phone--back { transform: translate(-6%, 12%) rotate(8deg); } .work-shot--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; transition: transform 1.8s var(--ease); } .work:hover .work-shot--photo img { transform: scale(1.06); } .work-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .work-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .work h3 { font-size: 1.25rem; letter-spacing: -.015em; } .work-sector { margin-top: 2px; font-size: .9375rem; color: var(--ink-3); } .work-desc { margin-top: 12px; font-size: .96875rem; color: var(--ink-2); max-width: 62ch; } .work-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: auto; padding-top: 14px; } .work-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: .9375rem; font-weight: 500; color: var(--accent-strong); text-decoration: none; } .work-link .icon { width: 16px; height: 16px; transition: transform .4s var(--spring); } .work-link:hover { text-decoration: underline; text-underline-offset: 3px; } .work-link:hover .icon { transform: translate(2px, -1px); } .via { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--mono); font-size: .7rem; padding: 4px 9px; border-radius: var(--pill); border: 1px solid var(--line-strong); color: var(--ink-3); white-space: nowrap; } .via .icon { width: 12px; height: 12px; } /* Transición al filtrar (View Transitions, donde exista) */ ::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-new(*):only-child { animation: vt-in .5s cubic-bezier(.16, 1, .3, 1) both; } ::view-transition-old(*):only-child { animation: vt-out .3s ease both; } @keyframes vt-in { from { opacity: 0; transform: scale(.94); } } @keyframes vt-out { to { opacity: 0; transform: scale(.94); } } .more { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 9fr); gap: 24px; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line-strong); } .more-title { font-size: 1.1875rem; letter-spacing: -.01em; } .more-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; } .more-list li { display: grid; align-content: start; gap: 4px; } .more-list .icon { width: 22px; height: 22px; margin-bottom: 8px; color: var(--accent); } .more-list strong { font-size: 1rem; } .more-list span { font-size: .9375rem; color: var(--ink-2); line-height: 1.5; } @media (max-width: 1080px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } .more { grid-template-columns: 1fr; } .more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .works { grid-template-columns: 1fr; } .work--wide { grid-column: auto; } .work-shot { height: clamp(220px, 62vw, 320px); } .filters { width: 100%; } .filter { flex: 1 1 auto; justify-content: center; padding: 0 12px; } .more-list { grid-template-columns: 1fr; } } /* ---------- Proceso ---------- */ .process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; } .process::before { content: ""; position: absolute; top: 27px; left: 28px; right: calc((100% - 80px) / 5 - 28px); height: 1px; background: linear-gradient(90deg, var(--accent), var(--line-strong)); transform-origin: left; } .step { position: relative; } .step-icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--pill); background: var(--bg); border: 1px solid var(--line-strong); transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .6s var(--spring); } .step-icon .icon { width: 24px; height: 24px; color: var(--accent); } .step:hover .step-icon { border-color: var(--accent-line); background: var(--accent-soft); } .step h3 { margin-top: 22px; font-size: 1.1875rem; letter-spacing: -.01em; } .step p { margin-top: 8px; font-size: .96875rem; color: var(--ink-2); } @media (max-width: 960px) { .process { grid-template-columns: 1fr; gap: 0; } .process::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--accent), var(--line-strong)); transform-origin: top; } .step { display: grid; grid-template-columns: 56px 1fr; gap: 0 20px; padding-bottom: 32px; } .step:last-child { padding-bottom: 0; } .step h3 { margin-top: 0; align-self: center; } .step p { grid-column: 2; margin-top: 4px; } } @media (prefers-reduced-motion: no-preference) { .js .process::before { transform: scaleX(0); transition: transform 1.8s var(--ease) .2s; } .js .process.is-in::before { transform: none; } .js .process .step-icon { transform: scale(.55); } .js .process.is-in .step-icon { transform: none; transition-delay: calc(.3s + var(--i, 0) * 150ms); } .js .process.is-in .step:hover .step-icon { transition-delay: 0s; } } @media (prefers-reduced-motion: no-preference) and (max-width: 960px) { .js .process::before { transform: scaleY(0); } } /* ---------- Preguntas ---------- */ .faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .faq-grid .section-head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; } .faq details { border-bottom: 1px solid var(--line); } .faq details:first-child { border-top: 1px solid var(--line); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; transition: color .2s var(--ease); } .faq summary:hover { color: var(--accent-strong); } .faq summary::-webkit-details-marker { display: none; } .faq summary .icon { width: 20px; height: 20px; color: var(--ink-3); transition: transform .45s var(--spring), color .3s var(--ease); } .faq details[open] summary .icon { transform: rotate(45deg); color: var(--accent); } .faq .answer { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 64ch; } /* Apertura suave donde el navegador sabe animar hasta «auto» */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; } .faq details[open]::details-content { block-size: auto; } } @media (prefers-reduced-motion: no-preference) { .faq details[open] .answer { animation: rise .5s var(--ease) both; } } @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid .section-head { position: static; } .faq .answer { padding-right: 0; } } /* ---------- Contacto ---------- */ .contact { padding-block: clamp(56px, 7vw, 96px); } .contact-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 72px); align-items: end; padding: clamp(32px, 6vw, 72px); border-radius: calc(var(--radius) + 8px); background: var(--ink); color: var(--bg); } /* Luz coral que sigue al cursor */ .contact-card::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; pointer-events: none; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 42%, transparent), transparent); opacity: .55; transform: translate(calc(var(--mx, 78%) - 280px), calc(var(--my, 10%) - 280px)); transition: transform .9s var(--ease); } .contact-card h2 { font-size: clamp(2.25rem, 5vw, 4rem); letter-spacing: -.035em; } .contact-card h2 .wd { display: inline-block; } @media (prefers-reduced-motion: no-preference) { .js .contact-card:not(.is-in) h2 .wd { opacity: 0; transform: translateY(.45em); } .js .contact-card h2 .wd { transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(.15s + var(--k) * 70ms); } } .contact-card p { margin-top: 18px; font-size: 1.125rem; opacity: .8; max-width: 44ch; } .contact-card .btn--primary:hover { background: var(--bg); color: var(--ink); } .contact-lines { display: grid; gap: 14px; } .contact-lines a { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 1.0625rem; opacity: .85; transition: opacity .2s var(--ease), transform .35s var(--spring); } .contact-lines a:not(.btn):hover { opacity: 1; transform: translateX(4px); } .contact-lines .icon { width: 20px; height: 20px; color: var(--accent); } .contact-lines .btn { margin-bottom: 10px; justify-content: space-between; opacity: 1; } .contact-lines .btn .icon { color: currentColor; } @media (max-width: 800px) { .contact-card { grid-template-columns: 1fr; align-items: start; } } /* ---------- Pie ---------- */ .site-footer { padding-block: 40px 56px; border-top: 1px solid var(--line); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .footer-inner p { font-size: .9375rem; color: var(--ink-3); } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9375rem; } .footer-links a { color: var(--ink-2); text-decoration: none; } .footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Borde que se ilumina bajo el cursor ---------- */ .spot::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .4s var(--ease); } @media (hover: hover) { .spot:hover::before { opacity: .85; } } /* ---------- Aparición al hacer scroll ---------- Con animaciones (no transiciones) y relleno «backwards»: al terminar, el elemento vuelve a sus propios estilos y sus efectos de hover funcionan sin retrasos. */ @media (prefers-reduced-motion: no-preference) { .js .reveal:not(.is-in), .js .reveal-stagger:not(.is-in) > * { opacity: 0; } .js .reveal.is-in { animation: reveal-up .9s var(--ease) backwards; } .js .section-head.reveal.is-in { animation-name: reveal-up-blur; } .js .reveal-stagger.is-in > * { animation: reveal-up .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 75ms); } .js .reveal-stagger.is-settled > * { animation: none; } } @keyframes reveal-up { from { opacity: 0; transform: translateY(32px); } } @keyframes reveal-up-blur { from { opacity: 0; transform: translateY(32px); filter: blur(8px); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }