/* ========================================================================== UCTURED � Redesign 2026 (v2 � m�s editorial, secciones notorias) Sistema sobrio inspirado en Dobuss, conservando la paleta original. Independiente de css/main.css, ambos pueden convivir. ========================================================================== */ /* La fuente Lora se precarga vía en el de cada página para mejorar el LCP. */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { --u-primary: #5d28d2; --u-primary-700: #4a1fa8; --u-primary-100: #f0ebfa; --u-primary-50: #f7f4fd; --u-ink: #0A0A0A; --u-text: #1f1f23; --u-muted: #52525B; --u-soft: #71717A; --u-border: #E4E4E7; --u-line: #F4F4F5; --u-bg: #FFFFFF; --u-bg-alt: #FAFAFA; --u-bg-dark: #0A0A0A; --u-bg-deep: #0e0a18; --u-radius-sm: 0; --u-radius-md: 0; --u-radius-lg: 0; --u-radius-xl: 0; --u-radius-pill: 0; --u-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04); --u-shadow-2: 0 12px 28px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(15, 23, 42, 0.02); --u-shadow-3: 0 30px 80px -20px rgba(15, 23, 42, 0.18), 0 12px 28px rgba(15, 23, 42, 0.08); --u-shadow-cta: 0 18px 40px rgba(93, 40, 210, 0.30); --u-container: 1280px; --u-header-h: 78px; --u-band-from: #3a1578; --u-band-mid: #4a1fa8; --u-band-to: #5d28d2; --u-section-py: clamp(120px, 12vw, 200px); --u-ease: cubic-bezier(0.16, 1, 0.3, 1); --u-t: 0.25s var(--u-ease); } /* -------------------------------------------------------------------------- 2. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* optimizeLegibility es costoso aplicado a toda la página; lo limitamos a titulares */ h1, h2, h3 { text-rendering: optimizeLegibility; } body { margin: 0; font-family: 'Lora', Georgia, "Times New Roman", serif; font-size: 16.5px; line-height: 1.65; color: var(--u-text); background: var(--u-bg); } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } a { color: var(--u-primary); text-decoration: none; transition: color var(--u-t); } a:hover { color: var(--u-primary-700); } :focus-visible { outline: 2px solid var(--u-primary); outline-offset: 3px; border-radius: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Layout -------------------------------------------------------------------------- */ .u-container { width: min(var(--u-container), 100%); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } /* Secci�n base con n�mero grande lateral y separadores notorios */ .u-section { position: relative; padding-block: var(--u-section-py); } .u-section + .u-section { border-top: 1px solid var(--u-line); } .u-section--alt { background: var(--u-bg-alt); } .u-section--soft { background: var(--u-primary-50); } .u-section--dark { background: var(--u-bg-dark); color: rgba(255,255,255,0.72); border-top: 0; } .u-section--deep { background: var(--u-bg-deep); color: rgba(255,255,255,0.78); border-top: 0; } /* N�mero grande tipo Dobuss en el lateral de cada secci�n */ .u-section__index { position: absolute; top: clamp(32px, 4vw, 56px); right: clamp(32px, 4vw, 64px); font-size: clamp(48px, 6vw, 88px); font-weight: 900; line-height: 0.9; color: rgba(15, 23, 42, 0.06); letter-spacing: -0.05em; pointer-events: none; user-select: none; } .u-section--dark .u-section__index, .u-section--deep .u-section__index { color: rgba(255, 255, 255, 0.06); } .u-section--soft .u-section__index { color: rgba(93, 40, 210, 0.10); } /* Encabezado de secci�n reforzado */ .u-section__head { display: grid; gap: 20px; max-width: 820px; margin-bottom: 72px; position: relative; } .u-section__head .lead { font-size: clamp(1.05rem, 0.5vw + 1rem, 1.3rem); color: var(--u-muted); max-width: 64ch; } #proceso .u-section__head { max-width: 960px; } #proceso-title .u-h2-line { white-space: nowrap; } .u-section--dark .u-section__head .lead, .u-section--deep .u-section__head .lead { color: rgba(255, 255, 255, 0.72); } /* Eyebrow con n�mero grande prefijado */ .u-eyebrow { display: inline-flex; align-items: center; gap: 12px; width: fit-content; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--u-primary-700); } .u-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--u-primary); } .u-section--dark .u-eyebrow, .u-section--deep .u-eyebrow { color: #fff; } .u-section--dark .u-eyebrow::before, .u-section--deep .u-eyebrow::before { background: #fff; } .u-eyebrow--counter { display: inline-flex; align-items: baseline; gap: 14px; margin-bottom: 8px; color: var(--u-primary); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; } .u-eyebrow--counter strong { font-family: 'Lora', Georgia, serif; font-size: clamp(2.4rem, 3vw, 3.4rem); font-weight: 900; letter-spacing: -0.03em; color: var(--u-ink); line-height: 1; } .u-section--dark .u-eyebrow--counter strong, .u-section--deep .u-eyebrow--counter strong { color: #fff; } /* -------------------------------------------------------------------------- 4. Tipograf�a -------------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0; color: var(--u-ink); letter-spacing: -0.03em; line-height: 1.05; font-weight: 800; } .u-section--dark h1, .u-section--dark h2, .u-section--dark h3, .u-section--dark h4, .u-section--deep h1, .u-section--deep h2, .u-section--deep h3, .u-section--deep h4 { color: #fff; } h1 { font-size: clamp(2.8rem, 7vw + 1rem, 6rem); font-weight: 900; } h2 { font-size: clamp(2.1rem, 4vw + 1rem, 2.75rem); } h3 { font-size: 1.5rem; letter-spacing: -0.015em; font-weight: 700; } h4 { font-size: 1rem; font-weight: 600; letter-spacing: 0; } p { margin: 0; color: var(--u-muted); } .u-section--dark p, .u-section--deep p { color: rgba(255,255,255,0.7); } /* -------------------------------------------------------------------------- 5. Botones -------------------------------------------------------------------------- */ .u-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 24px; border-radius: 0; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--u-t), background var(--u-t), box-shadow var(--u-t), color var(--u-t), border-color var(--u-t); } .u-btn:hover { transform: translateY(-2px); } .u-btn--sm { padding: 8px 16px; font-size: 14px; } .u-btn--primary { background: var(--u-primary); color: #fff; box-shadow: var(--u-shadow-cta); } .u-btn--primary:hover { background: var(--u-primary-700); color: #fff; } .u-btn--no-shadow, .u-btn--no-shadow:hover { box-shadow: none; } .u-btn--ghost { background: #fff; color: var(--u-ink); border-color: var(--u-border); } .u-btn--ghost:hover { border-color: var(--u-ink); color: var(--u-ink); } .u-btn--inverse { background: #fff; color: var(--u-ink); } .u-btn--inverse:hover { background: var(--u-primary-100); color: var(--u-primary-700); } .u-btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, 0.32); background: transparent; } .u-btn--outline-light:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; color: #fff; } .u-btn__arrow { display: inline-block; transition: transform var(--u-t); } .u-btn:hover .u-btn__arrow { transform: translateX(4px); } /* -------------------------------------------------------------------------- 6. Header -------------------------------------------------------------------------- */ .u-header { position: sticky; top: 0; z-index: 50; /* Fondo casi opaco por defecto: evita el coste de re-blurear en cada frame de scroll */ background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid transparent; transition: border-color var(--u-t), background var(--u-t); } .u-header.is-scrolled { border-bottom-color: var(--u-border); background: rgba(255, 255, 255, 0.85); /* El blur solo se aplica una vez en estado scrolleado, no durante todo el recorrido */ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } .u-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--u-header-h); gap: 24px; } .u-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; } .u-header__inner > .u-header__logo, .u-footer__brand > .u-header__logo { transition: transform var(--u-t); } .u-header__inner > .u-header__logo:hover, .u-footer__brand > .u-header__logo:hover { transform: translateY(-2px); } .u-header__logo img { display: block; width: 180px; height: 49px; object-fit: contain; } .u-header__logo-mark { width: 30px; height: 30px; border-radius: 0; background: var(--u-primary); position: relative; } .u-header__logo-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 0; border: 2px solid rgba(255, 255, 255, 0.85); } .u-header__nav { display: none; align-items: center; gap: 32px; } .u-header__nav > a, .u-nav-link { position: relative; color: var(--u-text); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; line-height: 1.2; } .u-header__nav > a::after, .u-nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--u-primary); transition: width var(--u-t); } .u-header__nav > a:hover, .u-nav-link:hover, .u-nav-item--mega:hover > .u-nav-link { color: var(--u-primary); } .u-header__nav > a:hover::after, .u-nav-link:hover::after, .u-nav-item--mega:hover > .u-nav-link::after { width: 100%; } .u-nav-item { position: relative; } .u-nav-item--mega { display: inline-flex; align-items: center; } /* Puente invisible entre trigger y panel � evita cierre al cruzar el gap */ .u-nav-item--mega::before { content: ""; position: absolute; left: -12px; right: -12px; top: 100%; height: 18px; } .u-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--u-text); cursor: default; transition: color var(--u-t); -webkit-font-smoothing: antialiased; } .u-nav-link:focus { color: var(--u-text); } .u-nav-chevron { transition: transform var(--u-t); } .u-nav-item.is-open .u-nav-chevron { transform: rotate(180deg); } .u-mega { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); min-width: 300px; padding: 10px; background: #fff; border: 1px solid var(--u-border); border-radius: 0; box-shadow: var(--u-shadow-2); z-index: 60; } .u-mega[hidden] { display: none; } .u-mega__inner { display: grid; gap: 2px; } .u-mega__inner a { display: block; padding: 12px 14px; border-radius: 0; color: var(--u-text); font-weight: 600; font-size: 14px; line-height: 1.35; transition: background var(--u-t), color var(--u-t); } .u-mega__inner a:hover { background: var(--u-primary-50); color: var(--u-primary); } .u-mega__inner a::after { display: none; } .u-header__actions { display: inline-flex; align-items: center; gap: 18px; } .u-header__client { display: none; align-items: center; gap: 8px; padding: 0; background: none; border: 0; color: var(--u-soft); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; transition: transform var(--u-t), color var(--u-t); } .u-header__client img { width: 18px; height: 18px; display: block; flex-shrink: 0; } .u-header__client:hover { color: var(--u-muted); transform: translateY(-2px); } @media (min-width: 960px) { .u-header__client { display: inline-flex; } } .u-header__menu { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 0; border: 1px solid var(--u-border); background: #fff; } .u-header__menu span { position: relative; display: block; width: 18px; height: 2px; background: var(--u-ink); border-radius: 0; } .u-header__menu span::before, .u-header__menu span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--u-ink); border-radius: 0; } .u-header__menu span::before { top: -6px; } .u-header__menu span::after { top: 6px; } @media (min-width: 960px) { .u-header__nav { display: inline-flex; } .u-header__menu { display: none; } } /* Header sobre banda hero (todas las páginas excepto index) */ body.u-has-page-hero .u-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } body.u-has-page-hero.u-header-scrolled .u-header, body.u-has-page-hero .u-header.is-scrolled { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--u-border); } body.u-has-page-hero:not(.u-header-scrolled) .u-header__nav > a, body.u-has-page-hero:not(.u-header-scrolled) .u-nav-link { color: rgba(255, 255, 255, 0.92); } body.u-has-page-hero:not(.u-header-scrolled) .u-header__nav > a:hover, body.u-has-page-hero:not(.u-header-scrolled) .u-nav-link:hover, body.u-has-page-hero:not(.u-header-scrolled) .u-nav-item--mega:hover > .u-nav-link { color: #fff; } body.u-has-page-hero:not(.u-header-scrolled) .u-header__nav > a::after, body.u-has-page-hero:not(.u-header-scrolled) .u-nav-link::after { background: #fff; } body.u-has-page-hero:not(.u-header-scrolled) .u-header__client { color: rgba(255, 255, 255, 0.82); } body.u-has-page-hero:not(.u-header-scrolled) .u-header__client:hover { color: #fff; } body.u-has-page-hero:not(.u-header-scrolled) .u-header__client img { filter: brightness(0) invert(1); } body.u-has-page-hero:not(.u-header-scrolled) .u-header__menu { background: transparent; border-color: rgba(255, 255, 255, 0.35); } body.u-has-page-hero:not(.u-header-scrolled) .u-header__menu span, body.u-has-page-hero:not(.u-header-scrolled) .u-header__menu span::before, body.u-has-page-hero:not(.u-header-scrolled) .u-header__menu span::after { background: #fff; } body.u-has-page-hero:not(.u-header-scrolled) .u-header__actions .u-btn--primary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: none; } body.u-has-page-hero:not(.u-header-scrolled) .u-header__actions .u-btn--primary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.55); } body.u-has-page-hero .u-mobile { top: 0; } /* Menú móvil a pantalla completa */ .u-mobile { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; background: #fff; z-index: 60; padding: calc(var(--u-header-h, 78px) + 16px) 24px 32px; display: none; flex-direction: column; gap: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .u-mobile.is-open { display: flex; } /* Bloquea el scroll del fondo cuando el menú está abierto */ body.u-mobile-open { overflow: hidden; } /* Botón de cerrar el menú: arriba a la derecha */ .u-mobile__close { position: absolute; top: 18px; right: 20px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; background: none; border: 0; border-radius: 999px; color: var(--u-ink); cursor: pointer; z-index: 2; } .u-mobile__close svg { display: block; } .u-mobile__close:hover { color: var(--u-primary); } /* Todos los enlaces iguales: textlinks alineados a la izquierda, sin iconos ni botones */ .u-mobile a, .u-mobile__toggle, .u-mobile__sub a, .u-mobile .u-header__client, .u-mobile .u-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; color: var(--u-ink); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; padding: 20px 0; border-bottom: 1px solid var(--u-line); text-align: left; background: none; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; cursor: pointer; font-family: inherit; } .u-mobile a:hover, .u-mobile__toggle:hover, .u-mobile__sub a:hover, .u-mobile .u-header__client:hover, .u-mobile .u-btn:hover { color: var(--u-primary); background: none; } .u-mobile__sub { display: grid; gap: 0; } .u-mobile__sub[hidden] { display: none; } /* Sin iconos en el menú móvil (excepto el botón de cerrar) */ .u-mobile .u-header__client img, .u-mobile .u-btn img, .u-mobile a img, .u-mobile .u-mobile__toggle svg, .u-mobile a svg { display: none; } /* El CTA es un textlink más, sin tratamiento de botón */ .u-mobile .u-btn { margin-top: 0; } @media (min-width: 960px) { .u-mobile { display: none !important; } } /* -------------------------------------------------------------------------- 7. Hero (m�s rico) -------------------------------------------------------------------------- */ .u-hero { position: relative; display: flex; align-items: center; min-height: calc(100svh - var(--u-header-h)); --u-hero-inset: clamp(40px, 5vw, 64px); padding: var(--u-hero-inset); padding-bottom: clamp(56px, 7vw, 72px); overflow: hidden; background: #fff; /* Aísla el repintado del hero del resto de la página al hacer scroll */ contain: layout paint; } .u-hero > .u-container { width: min(var(--u-container), 100%); padding-inline: 0; } .u-hero::before { content: ""; position: absolute; inset: -10% 40% auto -20%; height: 90%; background: radial-gradient(60% 60% at 50% 50%, rgba(93, 40, 210, 0.10), transparent 70%); pointer-events: none; } .u-hero__grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(93,40,210,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(93,40,210,0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 30%, transparent 80%); pointer-events: none; /* Promueve a su propia capa para no repintar el patrón en cada scroll */ transform: translateZ(0); } .u-hero__progress { position: absolute; inset: auto 0 0 0; height: min(68%, 540px); z-index: 0; pointer-events: none; mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%); /* Capa propia: la animación del trazado no fuerza repintar el contenido del hero */ transform: translateZ(0); contain: strict; } .u-hero__progress svg { width: 100%; height: 100%; display: block; } .u-hero__progress-line { stroke-dasharray: 100; stroke-dashoffset: 100; /* Una sola pasada corta: minimiza el tiempo en que el SVG repinta y compite con el scroll */ animation: u-heroProgressLine 4.5s var(--u-ease) forwards; } .u-hero__progress-area { opacity: 0; animation: u-heroProgressArea 6s var(--u-ease) forwards; } @keyframes u-heroProgressLine { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } @keyframes u-heroProgressArea { 0%, 8% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .u-hero__progress-line { stroke-dashoffset: 0; animation: none; } .u-hero__progress-area { opacity: 1; animation: none; } .u-hero__progress-dot { opacity: 1; } } .u-hero__inner { position: relative; z-index: 1; display: grid; gap: 64px; align-items: center; width: 100%; padding-inline: 0; } @media (min-width: 1040px) { .u-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.68fr); } } .u-hero__copy { display: grid; gap: 24px; max-width: 680px; } .u-hero h1 { font-size: 60px; } .u-hero__lead { font-size: clamp(1.1rem, 0.6vw + 1rem, 1.35rem); color: var(--u-muted); max-width: 56ch; } .u-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } .u-hero__microcopy { font-size: 14px; color: var(--u-soft); margin-top: -8px; } .u-hero__proof { display: grid; gap: 10px; max-width: 680px; } @media (min-width: 760px) { .u-hero__proof { grid-template-columns: repeat(3, 1fr); } } .u-hero__proof span, .u-proof-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--u-border); background: rgba(255,255,255,0.78); box-shadow: var(--u-shadow-1); } .u-hero__proof strong, .u-proof-card strong { color: var(--u-ink); } .u-hero__proof span { color: var(--u-muted); font-size: 13px; } .u-hero__conversion-panel { display: none; gap: 18px; padding: 30px; border: 1px solid rgba(93,40,210,0.18); background: rgba(255,255,255,0.86); box-shadow: var(--u-shadow-3); backdrop-filter: blur(16px); } @media (min-width: 1040px) { .u-hero__conversion-panel { display: grid; } } .u-hero__conversion-panel h2 { font-size: clamp(1.5rem, 2vw, 2rem); } .u-hero__proof-list { display: grid; gap: 12px; } .u-proof-card { text-decoration: none; transition: transform var(--u-t), border-color var(--u-t), box-shadow var(--u-t); } .u-proof-card span { color: var(--u-muted); font-size: 14px; } .u-proof-card:hover { transform: translateY(-3px); border-color: var(--u-primary); box-shadow: var(--u-shadow-2); } .u-hero__meta { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--u-border); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .u-hero__meta strong { display: block; font-size: 1.75rem; font-weight: 900; color: var(--u-ink); letter-spacing: -0.03em; line-height: 1; } .u-hero__meta span { display: block; margin-top: 6px; color: var(--u-muted); font-size: 13px; font-weight: 500; } .u-hero__board { position: relative; border-radius: 0; background: linear-gradient(160deg, #1a0f3d 0%, #0e0a18 60%, #0A0A0A 100%); padding: 24px; box-shadow: var(--u-shadow-3), 0 0 0 1px rgba(255,255,255,0.04) inset; overflow: hidden; height: 100%; min-height: 520px; } .u-hero__board::before { content: ""; position: absolute; inset: -50% -20% auto auto; width: 80%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(93,40,210,0.55), transparent 60%); pointer-events: none; } .u-hero__board::after { content: ""; position: absolute; inset: auto -10% -50% -20%; width: 80%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(34,211,238,0.18), transparent 60%); pointer-events: none; } .u-hero__board-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 24px; position: relative; z-index: 1; } .u-hero__board-bar i { display: block; width: 11px; height: 11px; border-radius: 0; background: rgba(255,255,255,0.18); } .u-hero__board-bar span { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.52); font-family: 'Lora', Georgia, serif; letter-spacing: 0.05em; } .u-hero__board-stack { position: relative; z-index: 1; display: grid; gap: 18px; } .u-hero__board-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .u-hero__chart { height: 130px; border-radius: 0; background: linear-gradient(180deg, transparent 60%, rgba(93,40,210,0.18) 100%), rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 14px; position: relative; overflow: hidden; } .u-hero__chart svg { width: 100%; height: 100%; } .u-hero__pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 0; background: rgba(93,40,210,0.22); color: #c8b8ff; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; } .u-hero__pill::before { content: ""; width: 6px; height: 6px; border-radius: 0; background: #a78bfa; box-shadow: 0 0 10px #a78bfa; } .u-hero__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; border-radius: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); align-items: center; } .u-hero__row strong { color: #fff; font-weight: 700; font-size: 14px; } .u-hero__row em { font-style: normal; color: var(--u-soft); font-size: 12px; } .u-hero__row b { color: #a78bfa; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; } .u-hero__float { position: absolute; background: #fff; border-radius: 0; border: 1px solid var(--u-border); padding: 16px 18px; box-shadow: var(--u-shadow-3); display: grid; gap: 4px; z-index: 2; } .u-hero__float-label { color: var(--u-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .u-hero__float-value { color: var(--u-ink); font-size: 1.6rem; font-weight: 900; letter-spacing: -0.025em; line-height: 1; } .u-hero__float-desc { color: var(--u-muted); font-size: 12px; } .u-hero__float--tl { top: -22px; left: -22px; } .u-hero__float--br { bottom: -22px; right: -22px; border-color: var(--u-primary); } .u-hero__float--br .u-hero__float-value { color: var(--u-primary); } @media (min-width: 1024px) { .u-hero__copy { max-width: 760px; } } @media (max-width: 600px) { .u-hero__meta { grid-template-columns: 1fr; gap: 16px; } .u-hero__float { display: none; } } /* Scroll indicator */ .u-hero__scroll { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--u-soft); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; } .u-hero__scroll::before { content: ""; width: 1px; height: 28px; background: linear-gradient(180deg, var(--u-soft), transparent); animation: u-scrollLine 2s var(--u-ease) infinite; } @keyframes u-scrollLine { 0% { transform: translateY(-10px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } } /* -------------------------------------------------------------------------- 8. Trust strip -------------------------------------------------------------------------- */ .u-trust { padding-block: clamp(52px, 6vw, 68px); background: linear-gradient(135deg, var(--u-primary) 0%, var(--u-primary-700) 100%); color: #fff; border-block: 0; position: relative; overflow: hidden; } .u-trust::before { content: ""; position: absolute; inset: -50% -10% auto auto; width: 55%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 62%); pointer-events: none; } .u-trust::after { content: ""; position: absolute; inset: auto auto -45% -8%; width: 48%; aspect-ratio: 1; background: radial-gradient(circle, rgba(0, 0, 0, 0.12), transparent 62%); pointer-events: none; } .u-trust__title { text-align: center; color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.4; margin-bottom: 10px; position: relative; z-index: 1; } .u-trust__lead { text-align: center; color: var(--u-muted); font-size: 14px; max-width: 36rem; margin: 0 auto; line-height: 1.5; } /* Carrusel de herramientas (home) */ .u-tools-marquee { --u-tools-gap: 14px; overflow: hidden; margin-top: 28px; padding-block: 8px; position: relative; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .u-tools-marquee__inner { display: flex; width: max-content; gap: var(--u-tools-gap); animation: u-tools-marquee 50s linear infinite; } .u-tools-marquee:hover .u-tools-marquee__inner, .u-tools-marquee:focus-within .u-tools-marquee__inner { animation-play-state: paused; } @keyframes u-tools-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .u-tools-marquee__track { display: flex; align-items: center; gap: var(--u-tools-gap); list-style: none; margin: 0; padding: 0; } .u-tools-marquee__item { flex: 0 0 auto; width: clamp(48px, 5.5vw, 56px); } .u-tools-marquee__tile { display: grid; place-items: center; width: 100%; height: clamp(48px, 5.5vw, 56px); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: none; transition: border-color var(--u-t), background-color var(--u-t), box-shadow var(--u-t), transform var(--u-t); } .u-tools-marquee__item:hover .u-tools-marquee__tile, .u-tools-marquee__item:focus-within .u-tools-marquee__tile { border-color: #fff; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); transform: translateY(-2px); } .u-tools-sprite-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .u-tools-marquee__icon { display: block; width: clamp(22px, 3vw, 28px); height: clamp(22px, 3vw, 28px); color: #fff; fill: currentColor; flex-shrink: 0; transition: color var(--u-t), transform var(--u-t); } .u-tools-marquee__icon use { fill: currentColor; } .u-tools-marquee__icon path { fill: currentColor; } .u-tools-marquee__item:hover .u-tools-marquee__icon, .u-tools-marquee__item:focus-within .u-tools-marquee__icon { color: #27272a; transform: scale(1.08); } .u-tools-marquee__item--woo .u-tools-marquee__icon { width: clamp(22px, 3vw, 28px); height: clamp(22px, 3vw, 28px); } /* Logo tipo imagen (Ideavo): alterna versión clara/según hover */ .u-tools-marquee__item--img .u-tools-marquee__logo { display: block; width: clamp(22px, 3vw, 28px); height: auto; object-fit: contain; transition: opacity var(--u-t); } .u-tools-marquee__item--img .u-tools-marquee__logo--dark { position: absolute; opacity: 0; } .u-tools-marquee__item--img .u-tools-marquee__tile { position: relative; text-decoration: none; } .u-tools-marquee__item--img:hover .u-tools-marquee__logo--light, .u-tools-marquee__item--img:focus-within .u-tools-marquee__logo--light { opacity: 0; } .u-tools-marquee__item--img:hover .u-tools-marquee__logo--dark, .u-tools-marquee__item--img:focus-within .u-tools-marquee__logo--dark { opacity: 1; } .u-trust__foot { text-align: center; padding-inline: 16px; margin-top: 14px; position: relative; z-index: 1; } .u-trust__link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 3px; transition: color var(--u-t); } .u-trust__link:hover { color: #fff; } /* Home: fondo blanco e iconos negros */ .u-trust--light { background: var(--u-bg); color: var(--u-text); border-block: 1px solid var(--u-border); } .u-trust--light::before, .u-trust--light::after { display: none; } .u-trust--light .u-trust__title { color: var(--u-muted); } .u-trust--light .u-tools-marquee__tile { background: var(--u-bg-alt); border-color: var(--u-border); } .u-trust--light .u-tools-marquee__item:hover .u-tools-marquee__tile, .u-trust--light .u-tools-marquee__item:focus-within .u-tools-marquee__tile { border-color: var(--u-primary); background: #fff; box-shadow: var(--u-shadow-2); } .u-trust--light .u-tools-marquee__icon { color: var(--u-ink); } .u-trust--light .u-tools-marquee__item:hover .u-tools-marquee__icon, .u-trust--light .u-tools-marquee__item:focus-within .u-tools-marquee__icon { color: var(--u-ink); } .u-trust--light .u-trust__link { color: var(--u-muted); } .u-trust--light .u-trust__link:hover { color: var(--u-primary); } @media (prefers-reduced-motion: reduce) { .u-tools-marquee__inner { animation: none; } .u-tools-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; scrollbar-width: thin; } .u-tools-marquee__inner { flex-wrap: nowrap; } .u-tools-marquee__track[aria-hidden="true"] { display: none; } .u-tools-marquee__item { scroll-snap-align: center; } } /* -------------------------------------------------------------------------- 9. Servicios (tarjetas premium) -------------------------------------------------------------------------- */ .u-cards { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 720px) { .u-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .u-cards { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Slider genérico móvil/tablet (u-mslider) Convierte cualquier rejilla interna [data-mslider-track] en carrusel horizontal SOLO en pantallas <= 959px. En escritorio el wrapper es transparente y la rejilla mantiene su layout grid original. ========================================================================== */ .u-mslider__viewport { width: 100%; } .u-mslider > .u-cases-slider__controls { display: none; } /* Banner ancho ("Y mucho más") movido fuera del track: separación del grid */ .u-mslider > .u-card--full { margin-top: 20px; } @media (max-width: 959px) { .u-mslider { display: grid; gap: 28px; } .u-mslider__viewport { overflow: hidden; padding-block: 12px; margin-block: -12px; } /* La rejilla interna pasa de grid a track horizontal */ .u-mslider [data-mslider-track] { display: flex !important; grid-template-columns: none !important; gap: var(--mslider-gap, 28px); transition: transform 0.55s var(--u-ease); will-change: transform; } /* Cada hijo directo del track es una slide. Se excluye el banner ancho (u-card--full) que queda fuera del flujo. */ .u-mslider [data-mslider-track] > *:not(.u-card--full) { flex: 0 0 var(--mslider-slide-width, 100%); min-width: 0; } /* El banner ancho no se trata como slide: ocupa todo el ancho debajo */ .u-mslider [data-mslider-track] > .u-card--full { flex: 0 0 100%; min-width: 0; order: 999; } .u-mslider > .u-cases-slider__controls { display: flex; } } /* Slider de servicios: solo activo en móvil/tablet (<= 959px). En escritorio el wrapper es transparente y .u-cards sigue siendo grid. */ .u-services-slider__viewport { width: 100%; } .u-services-slider .u-cases-slider__controls { display: none; } @media (max-width: 959px) { .u-services-slider { display: grid; gap: 28px; } .u-services-slider__viewport { overflow: hidden; padding-block: 12px; margin-block: -12px; } /* .u-cards pasa de grid a track horizontal */ .u-services-slider .u-cards { display: flex; grid-template-columns: none; gap: var(--services-gap, 28px); transition: transform 0.55s var(--u-ease); will-change: transform; } .u-services-slider .u-cards > .u-card { flex: 0 0 var(--service-slide-width, 100%); min-width: 0; } .u-services-slider .u-cases-slider__controls { display: flex; } } .u-card { position: relative; display: grid; gap: 16px; padding: 36px 32px 32px; background: #fff; border: 1px solid var(--u-border); border-radius: 0; box-shadow: var(--u-shadow-1); overflow: hidden; transition: transform var(--u-t), box-shadow var(--u-t), border-color var(--u-t); } .u-card::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 4px; background: linear-gradient(90deg, var(--u-primary), #a78bfa); transition: width 0.4s var(--u-ease); } .u-card:hover { transform: translateY(-6px); border-color: var(--u-primary); box-shadow: var(--u-shadow-3); } .u-card:hover::before { width: 100%; } .u-card__num { font-size: 13px; font-weight: 700; color: var(--u-soft); letter-spacing: 0.1em; } .u-card__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 0; background: var(--u-primary-100); color: var(--u-primary); font-size: 24px; font-weight: 700; margin-top: 8px; } .u-card h3 { font-size: 1.4rem; } .u-card p { color: var(--u-muted); } .u-card__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .u-card__features li { position: relative; padding-left: 22px; font-size: 14px; color: var(--u-text); } .u-card__features li::before { content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 7px; border-left: 2px solid var(--u-primary); border-bottom: 2px solid var(--u-primary); transform: rotate(-45deg); } .u-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--u-primary); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--u-line); transition: gap var(--u-t), color var(--u-t); } .u-card__link:hover { gap: 10px; color: var(--u-primary-700); } .u-content-clusters { display: grid; gap: 20px; } @media (min-width: 900px) { .u-content-clusters { grid-template-columns: repeat(2, 1fr); } } .u-content-cluster { display: grid; gap: 14px; padding: 28px; border: 1px solid var(--u-border); background: #fff; box-shadow: var(--u-shadow-1); } .u-content-cluster > span { width: fit-content; padding: 6px 10px; background: var(--u-primary-100); color: var(--u-primary-700); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .u-content-cluster__links { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--u-border); } .u-content-cluster__links a { color: var(--u-ink); font-weight: 700; } .u-content-cluster__links a:hover { color: var(--u-primary); } .u-engagement-grid { display: grid; gap: 36px; align-items: start; } @media (min-width: 980px) { .u-engagement-grid { grid-template-columns: 0.9fr 1.1fr; } } .u-checklist { display: grid; gap: 12px; padding: 28px; border: 1px solid var(--u-border); background: #fff; box-shadow: var(--u-shadow-2); } .u-checklist label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--u-border); color: var(--u-text); font-weight: 600; } .u-checklist input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--u-primary); } .u-checklist__result { margin: 8px 0; padding: 16px; background: var(--u-primary-50); border: 1px solid rgba(93,40,210,0.16); color: var(--u-ink); font-weight: 700; } .u-card--full { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; padding: 32px 36px; background: linear-gradient(135deg, var(--u-primary-100) 0%, #fff 55%); border-color: var(--u-primary-200, rgba(93, 40, 210, 0.2)); } .u-card--full::before { width: 100%; } .u-card--full:hover { transform: none; } .u-card--full__body { display: grid; gap: 10px; flex: 1; min-width: 0; } .u-card--full__body .u-eyebrow { margin: 0; } .u-card--full__body h3 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.5rem); } .u-card--full__body p { margin: 0; max-width: 62ch; } .u-card--full__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .u-card--full__tags span { font-size: 12px; font-weight: 600; padding: 6px 12px; background: #fff; border: 1px solid var(--u-border); color: var(--u-muted); } @media (max-width: 719px) { .u-card--full { flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------------------------------- 10. KPIs en banda OSCURA full-bleed -------------------------------------------------------------------------- */ .u-stats { background: var(--u-bg-deep); color: #fff; padding-block: clamp(80px, 8vw, 140px); position: relative; overflow: hidden; } .u-stats::before { content: ""; position: absolute; inset: -50% 50% auto -10%; width: 70%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(93,40,210,0.40), transparent 60%); pointer-events: none; } .u-stats::after { content: ""; position: absolute; inset: auto -10% -50% 40%; width: 60%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(34,211,238,0.18), transparent 60%); pointer-events: none; } .u-stats__head { position: relative; z-index: 1; display: grid; gap: 16px; margin-bottom: 64px; max-width: 720px; } .u-stats .u-eyebrow { color: #fff; } .u-stats .u-eyebrow::before { background: #fff; } .u-stats__head h2 { color: #fff; } .u-stats__head p { color: rgba(255,255,255,0.7); font-size: 1.2rem; } .u-stats__grid { position: relative; z-index: 1; display: grid; gap: 0; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,0.12); } @media (min-width: 880px) { .u-stats__grid { grid-template-columns: repeat(4, 1fr); } } .u-stats__cell { padding: 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.12); border-right: 1px solid rgba(255,255,255,0.12); display: grid; gap: 8px; justify-items: center; text-align: center; } .u-stats__cell:nth-child(2n) { border-right: 1px solid rgba(255,255,255,0.12); } @media (min-width: 880px) { .u-stats__cell { padding: 28px 16px; } .u-stats__cell:last-child { border-right: 0; } } @media (max-width: 879px) { .u-stats__cell:nth-child(2n) { border-right: 0; } } .u-stats__num { font-size: clamp(2.75rem, 5vw, 4.5rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: #fff; display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; } .u-stats__num em { font-style: normal; color: var(--u-primary); font-size: 0.6em; font-weight: 700; } .u-stats__label { color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; } /* -------------------------------------------------------------------------- 11. Proceso con timeline -------------------------------------------------------------------------- */ .u-process { position: relative; display: grid; gap: 24px; grid-template-columns: 1fr; counter-reset: u-step; } @media (min-width: 720px) { .u-process { grid-template-columns: repeat(2, 1fr); gap: 28px; } } @media (min-width: 1080px) { .u-process { grid-template-columns: repeat(4, 1fr); } .u-process::before { content: ""; position: absolute; top: 48px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--u-border) 8%, var(--u-border) 92%, transparent 100%); pointer-events: none; } } .u-step { position: relative; padding: 36px 28px 32px; background: #fff; border: 1px solid var(--u-border); border-radius: 0; display: grid; gap: 12px; transition: transform var(--u-t), border-color var(--u-t), box-shadow var(--u-t); } .u-step:hover { transform: translateY(-4px); border-color: var(--u-primary); box-shadow: var(--u-shadow-2); } .u-step__num { counter-increment: u-step; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 0; background: var(--u-primary); color: #fff; font-weight: 900; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 8px; box-shadow: 0 8px 20px rgba(93,40,210,0.30); } .u-step__num::before { content: "0" counter(u-step); } .u-step h3 { font-size: 1.25rem; } .u-step p { color: var(--u-muted); font-size: 15px; } .u-step__list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; font-size: 13px; color: var(--u-soft); } .u-step__list li::before { content: "• "; color: var(--u-primary); } /* Proceso — slider (controles debajo, como casos de éxito) */ .u-process-slider { display: grid; gap: 32px; } .u-process-slider__viewport { overflow: hidden; width: 100%; padding-block: 12px; margin-block: -12px; position: relative; } @media (min-width: 640px) { .u-process-slider__viewport::before { content: ""; position: absolute; top: 48px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--u-border) 8%, var(--u-border) 92%, transparent 100%); pointer-events: none; z-index: 0; } } .u-process-slider__track { display: flex; gap: var(--process-gap, 28px); transition: transform 0.55s var(--u-ease); will-change: transform; counter-reset: u-step; } .u-process-slider__track > .u-step { flex: 0 0 var(--process-slide-width, 100%); min-width: 0; position: relative; z-index: 1; } .u-process-slider__track.u-process::before { display: none; } @media (prefers-reduced-motion: reduce) { .u-process-slider__track { transition: none; } } /* -------------------------------------------------------------------------- 12. Casos de éxito -------------------------------------------------------------------------- */ .u-cases-grid { display: grid; gap: 28px; grid-template-columns: 1fr; } @media (min-width: 640px) { .u-cases-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .u-cases-grid { grid-template-columns: repeat(3, 1fr); } } /* Slider de casos de éxito (home): solo activo en móvil/tablet (<= 959px). En escritorio el wrapper es transparente y .u-cases-grid sigue siendo grid. */ .u-homecases-slider__viewport { width: 100%; } .u-homecases-slider .u-cases-slider__controls { display: none; } @media (max-width: 959px) { .u-homecases-slider { display: grid; gap: 28px; } .u-homecases-slider__viewport { overflow: hidden; padding-block: 12px; margin-block: -12px; } /* .u-cases-grid pasa de grid a track horizontal */ .u-homecases-slider .u-cases-grid { display: flex; grid-template-columns: none; gap: var(--homecases-gap, 28px); transition: transform 0.55s var(--u-ease); will-change: transform; } .u-homecases-slider .u-cases-grid > .u-case { flex: 0 0 var(--homecase-slide-width, 100%); min-width: 0; } .u-homecases-slider .u-cases-slider__controls { display: flex; } } .u-cases-slider { display: grid; gap: 32px; } .u-cases-slider__viewport { overflow: hidden; width: 100%; padding-block: 12px; margin-block: -12px; } .u-cases-slider__track { display: flex; gap: var(--cases-gap, 28px); transition: transform 0.55s var(--u-ease); will-change: transform; } .u-cases-slider__track > .u-case { flex: 0 0 var(--case-slide-width, 100%); min-width: 0; } .u-cases-slider__controls { display: flex; align-items: center; justify-content: center; gap: 20px; } .u-cases-slider__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0; border: 1px solid var(--u-border); background: #fff; color: var(--u-ink); font-size: 18px; font-weight: 700; cursor: pointer; transition: border-color var(--u-t), color var(--u-t), background var(--u-t), opacity var(--u-t); } .u-cases-slider__btn:hover:not(:disabled) { border-color: var(--u-primary); color: var(--u-primary); background: var(--u-primary-100); } .u-cases-slider__btn:disabled { opacity: 0.35; cursor: not-allowed; } .u-cases-slider__dots { display: flex; align-items: center; gap: 10px; } .u-cases-slider__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 0; background: var(--u-border); cursor: pointer; transition: transform var(--u-t), background var(--u-t); } .u-cases-slider__dot.is-active { background: var(--u-primary); transform: scale(1.15); } .u-cases__foot { display: flex; justify-content: center; margin-top: 48px; } .u-cases__foot .u-btn { min-width: 320px; justify-content: center; } @media (prefers-reduced-motion: reduce) { .u-cases-slider__track { transition: none; } } .u-case { position: relative; display: grid; gap: 0; background: #fff; border: 1px solid var(--u-border); border-radius: 0; color: var(--u-ink); overflow: hidden; transition: transform var(--u-t), border-color var(--u-t), box-shadow var(--u-t); } .u-case:hover { transform: translateY(-6px); border-color: var(--u-primary); box-shadow: var(--u-shadow-3); } .u-case__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--u-bg-deep); border-bottom: 1px solid var(--u-border); } .u-case__media img, .u-case__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--u-ease); } .u-case:hover .u-case__media img, .u-case:hover .u-case__media svg { transform: scale(1.04); } .u-case__body { padding: 28px; display: grid; gap: 14px; } .u-case__cat { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--u-primary); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .u-case__cat::before { content: ""; width: 8px; height: 8px; border-radius: 0; background: var(--u-primary); } .u-case h3 { max-width: 28ch; font-size: 1.35rem; letter-spacing: -0.02em; font-weight: 700; line-height: 1.25; } .u-case__metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .u-case__metric { display: grid; gap: 2px; padding: 10px 14px; border-radius: 0; background: var(--u-primary-100); color: var(--u-primary-700); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .u-case__metric strong { font-size: 18px; color: var(--u-primary); font-weight: 900; letter-spacing: -0.02em; line-height: 1; } .u-case__cta { margin-top: 6px; color: var(--u-primary); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; padding-top: 16px; border-top: 1px solid var(--u-line); transition: gap var(--u-t); } .u-case:hover .u-case__cta { gap: 10px; } /* -------------------------------------------------------------------------- 13. Bloque "Por qué UcturedAgency" -------------------------------------------------------------------------- */ .u-process--reasons { margin-top: 0; } /* Slider "Por Qué UcturedAgency": solo activo en móvil/tablet (<= 959px). En escritorio el wrapper es transparente y .u-process--reasons sigue siendo grid. */ .u-reasons-slider__viewport { width: 100%; } .u-reasons-slider .u-cases-slider__controls { display: none; } @media (max-width: 959px) { .u-reasons-slider { display: grid; gap: 28px; } .u-reasons-slider__viewport { overflow: hidden; padding-block: 12px; margin-block: -12px; } /* .u-process--reasons pasa de grid a track horizontal */ .u-reasons-slider .u-process--reasons { display: flex; grid-template-columns: none; gap: var(--reasons-gap, 28px); transition: transform 0.55s var(--u-ease); will-change: transform; } .u-reasons-slider .u-process--reasons > .u-step { flex: 0 0 var(--reason-slide-width, 100%); min-width: 0; } .u-reasons-slider .u-cases-slider__controls { display: flex; } } .u-reasons__foot { display: flex; justify-content: center; gap: 16px; margin-top: 48px; flex-wrap: wrap; } .u-reasons__foot .u-btn { min-width: 320px; justify-content: center; } /* -------------------------------------------------------------------------- 14. Testimonios -------------------------------------------------------------------------- */ .u-quote { display: grid; gap: 32px; padding: 56px; background: #fff; border: 1px solid var(--u-border); border-radius: 0; box-shadow: var(--u-shadow-2); margin-bottom: 28px; position: relative; overflow: hidden; } .u-quote::before { content: "\201C"; position: absolute; top: -40px; left: 24px; font-family: 'Lora', Georgia, serif; font-size: 280px; color: var(--u-primary-100); line-height: 1; pointer-events: none; font-weight: 900; } .u-quote blockquote { position: relative; font-size: clamp(1.4rem, 1.5vw + 1rem, 2.1rem); font-weight: 600; color: var(--u-ink); letter-spacing: -0.025em; line-height: 1.3; margin: 0; z-index: 1; } .u-quote figcaption { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 16px; } .u-quote__avatar { width: 56px; height: 56px; border-radius: 0; display: grid; place-items: center; background: var(--u-primary); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; flex-shrink: 0; } .u-quote figcaption strong { display: block; color: var(--u-ink); font-weight: 700; } .u-quote figcaption span { display: block; color: var(--u-muted); font-size: 14px; } .u-quote-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 880px) { .u-quote-grid { grid-template-columns: repeat(3, 1fr); } } .u-quote-grid blockquote { margin: 0; padding: 28px; background: #fff; border: 1px solid var(--u-border); border-radius: 0; display: grid; gap: 14px; } .u-quote-grid blockquote p { color: var(--u-text); margin: 0; font-size: 15px; line-height: 1.6; } .u-quote-grid cite { color: var(--u-soft); font-style: normal; font-size: 14px; font-weight: 600; } /* -------------------------------------------------------------------------- 15. Certificaciones -------------------------------------------------------------------------- */ .u-certs { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .u-certs { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1080px) { .u-certs { grid-template-columns: repeat(6, 1fr); } } .u-cert { display: grid; place-items: center; padding: 28px 18px; border: 1px solid var(--u-border); border-radius: 0; background: #fff; color: var(--u-soft); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; transition: color var(--u-t), border-color var(--u-t), transform var(--u-t); } .u-cert:hover { color: var(--u-ink); border-color: var(--u-primary); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 16. CTA grande -------------------------------------------------------------------------- */ .u-cta-band { background: linear-gradient(135deg, var(--u-primary) 0%, var(--u-primary-700) 100%); color: #fff; padding-block: clamp(96px, 8vw, 140px); position: relative; overflow: hidden; } .u-cta-band::before { content: ""; position: absolute; inset: -60% -10% auto auto; width: 70%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 60%); pointer-events: none; } .u-cta-band::after { content: ""; position: absolute; inset: auto auto -50% -10%; width: 60%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(0,0,0,0.18), transparent 60%); pointer-events: none; } .u-cta-band__inner { display: grid; gap: 24px; position: relative; z-index: 1; max-width: 800px; margin-inline: auto; text-align: center; justify-items: center; } .u-cta-band h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; max-width: 22ch; } .u-cta-band p { color: rgba(255, 255, 255, 0.86); max-width: 60ch; font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem); } .u-cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; justify-content: center; } .u-cta-band__sub { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.18); display: grid; gap: 16px; grid-template-columns: 1fr; width: 100%; } @media (min-width: 720px) { .u-cta-band__sub { grid-template-columns: repeat(3, 1fr); } } .u-cta-band__sub div { color: rgba(255,255,255,0.78); font-size: 14px; text-align: center; } .u-cta-band__sub strong { color: #fff; display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; } /* -------------------------------------------------------------------------- 17. Footer -------------------------------------------------------------------------- */ .u-footer { background: var(--u-bg-dark); color: rgba(255, 255, 255, 0.7); padding-top: 96px; } .u-footer__top { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @media (min-width: 880px) { .u-footer__top { grid-template-columns: 1fr 1fr; } } .u-footer__top h3 { color: #fff; font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .u-footer__top p { color: rgba(255,255,255,0.65); margin-top: 12px; max-width: 50ch; } .u-footer__grid { display: grid; gap: 40px; grid-template-columns: 1fr; padding-block: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @media (min-width: 880px) { .u-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .u-footer__brand .u-header__logo { color: #fff; font-size: 20px; } .u-footer__brand .u-header__logo img { width: 180px; height: 49px; object-fit: contain; } .u-footer__brand p { color: rgba(255, 255, 255, 0.65); margin: 16px 0 24px; max-width: 38ch; } .u-footer h4 { color: #fff; margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .u-footer__col a { display: block; padding: 7px 0; color: rgba(255, 255, 255, 0.6); font-size: 14px; } .u-footer__col a:hover { color: #fff; } .u-footer__news { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .u-footer__news-row { display: flex; gap: 8px; flex-wrap: wrap; } .u-footer__news input[type="email"] { flex: 1 1 200px; min-width: 0; width: 100%; padding: 14px 18px; border-radius: 0; background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); color: var(--u-ink, #111); font: inherit; transition: border-color var(--u-t), box-shadow var(--u-t); } .u-footer__news input[type="email"]::placeholder { color: rgba(0, 0, 0, 0.45); } .u-footer__news input[type="email"]:focus { outline: none; border-color: var(--u-primary); box-shadow: 0 0 0 3px rgba(93, 40, 210, 0.25); } .u-footer__news .u-btn { background: var(--u-primary); color: #fff; border-color: var(--u-primary); padding: 14px 22px; } .u-footer__news .u-btn:hover { background: var(--u-primary-700); border-color: var(--u-primary-700); color: #fff; } .u-footer__news-privacy { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.75); cursor: pointer; } .u-footer__news-privacy input[type="checkbox"] { width: 16px; height: 16px; margin: 0; margin-top: 1px; accent-color: var(--u-primary); cursor: pointer; flex-shrink: 0; } .u-footer__news-privacy a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .u-footer__news-privacy a:hover { color: var(--u-primary-100); } .u-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-block: 32px; gap: 16px; flex-wrap: wrap; font-size: 13px; } .u-footer__legal { display: inline-flex; gap: 22px; flex-wrap: wrap; } .u-footer__legal a { color: rgba(255, 255, 255, 0.5); } .u-footer__legal a:hover { color: #fff; } .u-footer__social { display: inline-flex; gap: 10px; } .u-footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.7); transition: color var(--u-t), background var(--u-t), border-color var(--u-t), transform var(--u-t); } .u-footer__social a svg { width: 18px; height: 18px; display: block; } .u-footer__social a:hover { color: #fff; background: var(--u-primary); border-color: var(--u-primary); transform: translateY(-2px); } .u-contact-social { display: inline-flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .u-contact-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--u-line); background: #fff; color: #555; transition: color var(--u-t), border-color var(--u-t), transform var(--u-t), box-shadow var(--u-t); } .u-contact-social a svg { width: 20px; height: 20px; display: block; } .u-contact-social a:hover { color: #fff; background: var(--u-primary); border-color: var(--u-primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(93, 40, 210, 0.18); } /* -------------------------------------------------------------------------- 18. Reveal en scroll -------------------------------------------------------------------------- */ .u-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--u-ease), transform 0.7s var(--u-ease); } .u-reveal.is-revealed { opacity: 1; transform: none; } .u-reveal--delay-1 { transition-delay: 0.08s; } .u-reveal--delay-2 { transition-delay: 0.16s; } .u-reveal--delay-3 { transition-delay: 0.24s; } /* -------------------------------------------------------------------------- 19. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .u-reveal { opacity: 1; transform: none; } } /* ========================================================================== 20. PAGE HERO (páginas internas — banda azul, sin imagen) ========================================================================== */ .u-page-hero, .u-agency-hero, .u-case-hero { position: relative; display: flex; align-items: center; min-height: auto; padding-top: calc(var(--u-header-h) + clamp(80px, 10vw, 140px)); padding-bottom: var(--u-section-py); background: linear-gradient(160deg, var(--u-band-from) 0%, var(--u-band-mid) 52%, var(--u-band-to) 100%); color: rgba(255, 255, 255, 0.86); overflow: hidden; border-bottom: 0; } .u-page-hero__bg, .u-agency-hero__bg { position: absolute; inset: 0; pointer-events: none; } .u-page-hero__bg::before, .u-agency-hero__bg::before { content: ""; position: absolute; inset: -20% -5% auto auto; width: min(620px, 65vw); height: min(620px, 65vw); background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 68%); } .u-page-hero__bg::after, .u-agency-hero__bg::after { content: ""; position: absolute; inset: auto auto -35% -10%; width: min(480px, 50vw); height: min(480px, 50vw); background: radial-gradient(circle, rgba(167, 139, 250, 0.25) 0%, transparent 70%); } .u-page-hero__inner, .u-agency-hero__inner, .u-case-hero__inner { position: relative; z-index: 1; display: grid; gap: 20px; width: 100%; max-width: var(--u-container); justify-items: start; } .u-page-hero__main, .u-agency-hero__copy { display: grid; gap: 20px; width: 100%; max-width: min(calc(var(--u-container) * 0.6), 60%); } .u-page-hero__inner > .u-breadcrumb, .u-page-hero__inner > h1, .u-page-hero__inner > .u-page-hero__lead, .u-page-hero__inner > .u-page-hero__actions, .u-case-hero__inner > .u-breadcrumb, .u-case-hero__inner > .u-eyebrow, .u-case-hero__inner > h1, .u-case-hero__inner > .lead, .u-case-hero__inner > p.lead { max-width: min(calc(var(--u-container) * 0.6), 60%); width: 100%; } @media (max-width: 900px) { .u-page-hero__main, .u-agency-hero__copy, .u-page-hero__inner > .u-breadcrumb, .u-page-hero__inner > h1, .u-page-hero__inner > .u-page-hero__lead, .u-page-hero__inner > .u-page-hero__actions, .u-case-hero__inner > .u-breadcrumb, .u-case-hero__inner > .u-eyebrow, .u-case-hero__inner > h1, .u-case-hero__inner > .lead, .u-case-hero__inner > p.lead { max-width: 100%; } } .u-page-hero .u-breadcrumb, .u-agency-hero .u-breadcrumb, .u-case-hero .u-breadcrumb { color: rgba(255, 255, 255, 0.55); font-size: 12px; } .u-page-hero .u-breadcrumb a, .u-agency-hero .u-breadcrumb a, .u-case-hero .u-breadcrumb a { color: rgba(255, 255, 255, 0.72); } .u-page-hero .u-breadcrumb a:hover, .u-agency-hero .u-breadcrumb a:hover, .u-case-hero .u-breadcrumb a:hover { color: #fff; } .u-page-hero .u-breadcrumb span[aria-hidden], .u-agency-hero .u-breadcrumb span[aria-hidden], .u-case-hero .u-breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, 0.28); } .u-page-hero .u-eyebrow, .u-agency-hero .u-eyebrow, .u-case-hero .u-eyebrow { display: none; } .u-page-hero h1, .u-agency-hero h1, .u-case-hero h1 { color: #fff; font-size: clamp(2.1rem, 4vw + 1rem, 2.75rem); letter-spacing: -0.03em; line-height: 1.05; font-weight: 800; margin: 0; } .u-page-hero__lead, .u-agency-hero__lead, .u-case-hero p.lead { font-size: clamp(1.05rem, 0.5vw + 1rem, 1.3rem); color: rgba(255, 255, 255, 0.82); max-width: none; line-height: 1.65; margin: 0; } .u-page-hero__actions, .u-agency-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .u-page-hero__meta, .u-agency-hero__meta, .u-agency-hero__visual, .u-agency-hero__scroll, .u-case-hero__media { display: none !important; } .u-page-hero .u-btn--primary, .u-agency-hero__cta .u-btn--primary, .u-page-hero__actions .u-btn--primary { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: none; } .u-page-hero .u-btn--primary:hover, .u-agency-hero__cta .u-btn--primary:hover, .u-page-hero__actions .u-btn--primary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.55); } .u-page-hero .u-btn--ghost, .u-agency-hero__cta .u-btn--ghost, .u-page-hero__actions .u-btn--ghost { background: transparent; color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.28); } .u-page-hero .u-btn--ghost:hover, .u-agency-hero__cta .u-btn--ghost:hover, .u-page-hero__actions .u-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.45); } /* Breadcrumbs */ .u-breadcrumb { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--u-soft); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .u-breadcrumb a { color: var(--u-soft); } .u-breadcrumb a:hover { color: var(--u-primary); } .u-breadcrumb span[aria-hidden] { color: var(--u-border); } /* ========================================================================== 21. MARQUEE (banda en movimiento) ========================================================================== */ .u-marquee { background: var(--u-primary); color: #fff; padding-block: 24px; overflow: hidden; border-block: 1px solid rgba(255, 255, 255, 0.08); } .u-marquee--dark { background: var(--u-bg-dark); } .u-marquee__track { display: flex; gap: 56px; align-items: center; white-space: nowrap; animation: u-marquee 40s linear infinite; width: max-content; } .u-marquee__item { display: inline-flex; align-items: center; gap: 56px; font-size: clamp(1.3rem, 2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; } .u-marquee__item::after { content: ""; width: 10px; height: 10px; border-radius: 0; background: rgba(255, 255, 255, 0.55); } @keyframes u-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .u-marquee:hover .u-marquee__track { animation-play-state: paused; } /* ========================================================================== 22. FORMULARIO ========================================================================== */ .u-form { background: #fff; border: 1px solid var(--u-border); border-radius: 0; padding: clamp(28px, 3vw, 48px); box-shadow: var(--u-shadow-2); display: grid; gap: 22px; } .u-form__head { display: grid; gap: 8px; padding-bottom: 4px; } .u-form__head h3 { font-size: 1.5rem; } .u-form__head p { font-size: 14px; } .u-form__grid { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 720px) { .u-form__grid { grid-template-columns: 1fr 1fr; } .u-form__group--full { grid-column: 1 / -1; } } .u-form__group { display: grid; gap: 8px; } .u-form__label { font-size: 13px; font-weight: 700; color: var(--u-text); letter-spacing: 0.02em; } .u-form__input, .u-form__select, .u-form__textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--u-border); border-radius: 0; background: #fff; color: var(--u-ink); font: inherit; font-size: 15px; transition: border-color var(--u-t), box-shadow var(--u-t); } .u-form__textarea { min-height: 140px; resize: vertical; } .u-form__input:focus, .u-form__select:focus, .u-form__textarea:focus { outline: none; border-color: var(--u-primary); box-shadow: 0 0 0 3px rgba(93, 40, 210, 0.16); } .u-form__input::placeholder, .u-form__textarea::placeholder { color: var(--u-soft); } .u-form__details { border: 1px solid var(--u-border); background: var(--u-bg-alt); padding: 14px 16px; } .u-form__details summary { cursor: pointer; font-weight: 700; color: var(--u-ink); } .u-form__details[open] summary { margin-bottom: 16px; } .u-form__grid--nested { gap: 16px; } .u-form__input[aria-invalid="true"], .u-form__select[aria-invalid="true"], .u-form__textarea[aria-invalid="true"] { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14); } .u-form__error { color: #b91c1c; font-size: 12px; font-weight: 700; } .u-form__status { min-height: 20px; font-size: 13px; font-weight: 700; color: var(--u-soft); } .u-form__status.is-loading { color: var(--u-primary); } .u-form__status.is-success { color: #047857; } .u-form__status.is-error { color: #b91c1c; } .u-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .u-form__legal { font-size: 12px; color: var(--u-soft); } .u-form__legal a { color: var(--u-primary); } .u-form__checkbox { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1rem 0; font-size: 14px; } .u-form__checkbox input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; } .u-form__checkbox span { line-height: 1.5; } .u-form__checkbox a { color: var(--u-primary); text-decoration: underline; } .u-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; } /* Contact info column */ .u-contact-grid { display: grid; gap: 56px; grid-template-columns: 1fr; } @media (min-width: 1080px) { .u-contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; } } .u-contact-detail { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--u-border); } .u-contact-detail:last-of-type { border-bottom: 0; } .u-contact-detail__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 0; background: var(--u-primary-100); color: var(--u-primary); font-size: 20px; font-weight: 700; } .u-contact-detail__label { font-size: 12px; font-weight: 700; color: var(--u-soft); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .u-contact-detail__value { font-size: 1.1rem; font-weight: 700; color: var(--u-ink); } .u-contact-detail__value a { color: var(--u-ink); } .u-contact-detail__value a:hover { color: var(--u-primary); } .u-contact-detail__sub { color: var(--u-muted); font-size: 14px; margin-top: 2px; } .u-contact-note { margin-top: 24px; padding: 20px 22px; background: var(--u-primary-50); border-left: 3px solid var(--u-primary); border-radius: 0; } .u-contact-note strong { color: var(--u-primary-700); display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; } .u-contact-note p { color: var(--u-text); font-size: 14px; } .u-contact-fast { display: grid; gap: 10px; margin-top: 18px; } @media (min-width: 720px) { .u-contact-fast { grid-template-columns: repeat(3, 1fr); } } .u-contact-fast a { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--u-border); background: #fff; color: var(--u-ink); text-decoration: none; box-shadow: var(--u-shadow-1); transition: transform var(--u-t), border-color var(--u-t); } .u-contact-fast a:hover { transform: translateY(-2px); border-color: var(--u-primary); } .u-contact-fast span { color: var(--u-muted); font-size: 13px; } /* ========================================================================== 23. BLOG ========================================================================== */ .u-blog-featured { display: grid; gap: 0; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--u-border); border-radius: 0; overflow: hidden; transition: border-color var(--u-t), box-shadow var(--u-t), transform var(--u-t); } .u-blog-featured:hover { border-color: var(--u-primary); box-shadow: var(--u-shadow-3); transform: translateY(-4px); } @media (min-width: 880px) { .u-blog-featured { grid-template-columns: 1.1fr 0.9fr; } } .u-blog-featured__media { position: relative; background: linear-gradient(160deg, #1a0f3d, #0e0a18); min-height: 360px; overflow: hidden; } .u-blog-featured__media::before, .u-blog-featured__media::after { content: ""; position: absolute; border-radius: 0; } .u-blog-featured__media::before { inset: -20% -20% auto auto; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(93, 40, 210, 0.55), transparent 60%); } .u-blog-featured__media::after { inset: auto auto -30% -10%; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(34, 211, 238, 0.20), transparent 60%); } .u-blog-featured__media-pattern { position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,0.08); border-radius: 0; display: grid; gap: 12px; padding: 32px; align-content: end; } .u-blog-featured__media-pattern .line { height: 8px; background: rgba(255,255,255,0.18); border-radius: 0; } .u-blog-featured__media-pattern .line.alt { background: rgba(167,139,250,0.4); } .u-blog-featured__body { padding: clamp(28px, 3vw, 48px); display: grid; gap: 16px; align-content: center; } .u-blog-featured__label { color: var(--u-primary); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .u-blog-featured h2 { font-size: clamp(1.6rem, 2.5vw + 1rem, 2.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; } .u-blog-featured p { color: var(--u-muted); font-size: 1.05rem; } .u-blog-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 720px) { .u-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .u-blog-grid { grid-template-columns: repeat(3, 1fr); } } .u-blog-card { display: grid; gap: 0; background: #fff; border: 1px solid var(--u-border); border-radius: 0; overflow: hidden; transition: border-color var(--u-t), box-shadow var(--u-t), transform var(--u-t); color: var(--u-ink); } .u-blog-card:hover { border-color: var(--u-primary); box-shadow: var(--u-shadow-2); transform: translateY(-4px); } .u-blog-card__thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--u-primary), var(--u-primary-700)); position: relative; overflow: hidden; } .u-blog-card__thumb img, .u-blog-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } .u-blog-featured__media { min-height: clamp(220px, 28vw, 360px); } .u-blog-card__thumb::before { content: ""; position: absolute; inset: -30% -30% auto auto; width: 80%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%); } .u-blog-card__thumb--cyan { background: linear-gradient(135deg, #0e7490, #0e0a18); } .u-blog-card__thumb--rose { background: linear-gradient(135deg, #be185d, #1e1b3a); } .u-blog-card__thumb--ink { background: linear-gradient(135deg, #18181b, #2c1858); } .u-blog-card__thumb--mix { background: linear-gradient(135deg, var(--u-primary), #db2777); } .u-blog-card__thumb--green { background: linear-gradient(135deg, #166534, #0e0a18); } .u-blog-card__thumb-tag { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 0; background: rgba(255, 255, 255, 0.92); color: var(--u-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .u-blog-card__body { padding: 24px 24px 28px; display: grid; gap: 12px; } .u-blog-card__meta { font-size: 12px; color: var(--u-soft); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .u-blog-card__meta span { color: var(--u-border); margin: 0 4px; } .u-blog-card h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } .u-blog-card p { color: var(--u-muted); font-size: 14.5px; } .u-blog-card__link { margin-top: 4px; color: var(--u-primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: gap var(--u-t); } .u-blog-card:hover .u-blog-card__link { gap: 10px; } /* Pagination */ .u-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 56px; } .u-pagination a, .u-pagination span { min-width: 36px; height: 36px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 0; border: 1px solid var(--u-border); background: #fff; color: var(--u-text); font-weight: 700; font-size: 14px; transition: border-color var(--u-t), color var(--u-t), background var(--u-t); } .u-pagination .is-current { background: var(--u-primary); border-color: var(--u-primary); color: #fff; } .u-pagination a:hover { border-color: var(--u-primary); color: var(--u-primary); } .u-pagination .is-disabled { opacity: 0.4; pointer-events: none; } /* ========================================================================== 24. TEAM ========================================================================== */ .u-team-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 720px) { .u-team-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .u-team-grid { grid-template-columns: repeat(4, 1fr); } } .u-team-card { background: #fff; border: 1px solid var(--u-border); border-radius: 0; overflow: hidden; transition: border-color var(--u-t), box-shadow var(--u-t), transform var(--u-t); } .u-team-card:hover { border-color: var(--u-primary); box-shadow: var(--u-shadow-2); transform: translateY(-4px); } .u-team-card__avatar { aspect-ratio: 1; background: linear-gradient(135deg, var(--u-primary), #a78bfa); display: grid; place-items: center; color: #fff; font-size: 3rem; font-weight: 900; letter-spacing: -0.04em; } .u-team-card__avatar--cyan { background: linear-gradient(135deg, #0e7490, var(--u-primary)); } .u-team-card__avatar--rose { background: linear-gradient(135deg, #be185d, var(--u-primary)); } .u-team-card__avatar--ink { background: linear-gradient(135deg, #18181b, var(--u-primary)); } .u-team-card__body { padding: 22px; display: grid; gap: 6px; } .u-team-card__name { color: var(--u-ink); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; } .u-team-card__role { color: var(--u-soft); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .u-team-card p { color: var(--u-muted); font-size: 14px; margin-top: 8px; } /* ========================================================================== 25. FAQ accordion ========================================================================== */ .u-faq { display: grid; gap: 12px; } .u-faq__item { background: #fff; border: 1px solid var(--u-border); border-radius: 0; overflow: hidden; transition: border-color var(--u-t), box-shadow var(--u-t); } .u-faq__item[open] { border-color: var(--u-primary); box-shadow: var(--u-shadow-1); } .u-faq__item summary { list-style: none; cursor: pointer; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-weight: 700; font-size: 1.05rem; color: var(--u-ink); letter-spacing: -0.01em; } .u-faq__item summary::-webkit-details-marker { display: none; } .u-faq__item summary::after { content: "+"; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 0; background: var(--u-primary-100); color: var(--u-primary); font-size: 20px; font-weight: 800; transition: transform var(--u-t), background var(--u-t), color var(--u-t); } .u-faq__item[open] summary::after { content: "?"; background: var(--u-primary); color: #fff; transform: rotate(180deg); } .u-faq__item p { padding: 0 28px 24px; color: var(--u-muted); } .u-faq__body p { padding: 0 28px 24px; color: var(--u-muted); line-height: 1.65; } .u-faq__summary-text { flex: 1; text-align: left; } .u-faq__cat-badge { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--u-primary); margin-bottom: 6px; } /* ========================================================================== 25b. FAQ PAGE — search, categories, groups ========================================================================== */ .u-agency-hero__copy .u-breadcrumb { margin-bottom: 4px; } .u-section--tight { padding-top: 0; } .u-faq-search-section { padding-bottom: 0; } .u-faq-search-wrap { display: grid; gap: 12px; max-width: 880px; } .u-faq-search { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--u-border); padding: 6px 8px 6px 20px; transition: border-color var(--u-t), box-shadow var(--u-t); } .u-faq-search:focus-within { border-color: var(--u-primary); box-shadow: var(--u-shadow-1); } .u-faq-search__icon { color: var(--u-soft); flex-shrink: 0; } .u-faq-search input { flex: 1; border: none; background: transparent; font: inherit; font-size: 1rem; color: var(--u-ink); padding: 14px 0; min-width: 0; } .u-faq-search input:focus { outline: none; } .u-faq-search input::placeholder { color: var(--u-soft); } .u-faq-search__clear { width: 36px; height: 36px; border: none; background: var(--u-primary-100); color: var(--u-primary); font-size: 22px; line-height: 1; cursor: pointer; flex-shrink: 0; transition: background var(--u-t), color var(--u-t); } .u-faq-search__clear:hover { background: var(--u-primary); color: #fff; } .u-faq-search__hint { font-size: 13px; color: var(--u-soft); margin: 0; } .u-faq-search__hint kbd { display: inline-block; padding: 2px 6px; background: var(--u-surface); border: 1px solid var(--u-border); font-size: 12px; font-family: inherit; } .u-faq-search__meta { font-size: 14px; font-weight: 600; color: var(--u-muted); margin: 0; } .u-faq-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .u-faq-cat { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; border: 1px solid var(--u-border); font: inherit; font-size: 13px; font-weight: 600; color: var(--u-ink); cursor: pointer; transition: border-color var(--u-t), background var(--u-t), color var(--u-t), box-shadow var(--u-t); } .u-faq-cat:hover { border-color: var(--u-primary); } .u-faq-cat.is-active { background: var(--u-primary); border-color: var(--u-primary); color: #fff; box-shadow: var(--u-shadow-1); } .u-faq-cat__icon { font-size: 14px; opacity: 0.85; } .u-faq-cat.is-active .u-faq-cat__icon { opacity: 1; } .u-faq-cat__count { font-size: 11px; font-weight: 700; padding: 2px 7px; background: var(--u-primary-100); color: var(--u-primary); } .u-faq-cat.is-active .u-faq-cat__count { background: rgba(255,255,255,0.2); color: #fff; } .u-faq-page__list { display: grid; gap: 48px; } .u-faq-group { display: grid; gap: 20px; scroll-margin-top: 120px; } .u-faq-group__head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 20px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid var(--u-border); } @media (max-width: 640px) { .u-faq-group__head { grid-template-columns: auto 1fr; } .u-faq-group__count { grid-column: 1 / -1; } } .u-faq-group__icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--u-primary-100); color: var(--u-primary); font-size: 18px; font-weight: 800; } .u-faq-group__head h2 { font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 4px; } .u-faq-group__head p { margin: 0; color: var(--u-muted); font-size: 14px; } .u-faq-group__count { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--u-soft); white-space: nowrap; align-self: center; } .u-faq-empty { text-align: center; padding: 64px 24px; background: #fff; border: 1px dashed var(--u-border); display: grid; gap: 16px; justify-items: center; max-width: 560px; margin: 0 auto; } .u-faq-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; background: var(--u-primary-100); color: var(--u-primary); font-size: 24px; font-weight: 800; } .u-faq-empty h2 { margin: 0; font-size: 1.25rem; } .u-faq-empty p { margin: 0; color: var(--u-muted); max-width: 40ch; } .u-faq-load-more { display: flex; justify-content: center; padding-top: 8px; } .u-faq-highlight { background: rgba(93, 40, 210, 0.12); color: var(--u-primary); padding: 0 2px; border-radius: 0; } /* ========================================================================== 26. PRICING / SCOPE ========================================================================== */ .u-pricing { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 720px) { .u-pricing { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .u-pricing { grid-template-columns: repeat(3, 1fr); } } .u-tier { background: #fff; border: 1px solid var(--u-border); border-radius: 0; padding: 32px; display: grid; gap: 18px; position: relative; transition: border-color var(--u-t), box-shadow var(--u-t), transform var(--u-t); } .u-tier:hover { border-color: var(--u-primary); box-shadow: var(--u-shadow-2); transform: translateY(-4px); } .u-tier--featured { background: var(--u-bg-dark); color: #fff; border-color: var(--u-primary); box-shadow: var(--u-shadow-3); } .u-tier--featured h3, .u-tier--featured .u-tier__price strong { color: #fff; } .u-tier--featured p, .u-tier--featured li { color: rgba(255,255,255,0.78); } .u-tier--featured .u-tier__features li::before { background: var(--u-primary); } .u-tier__badge { position: absolute; top: -14px; left: 32px; padding: 6px 14px; border-radius: 0; background: var(--u-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .u-tier__name { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--u-soft); } .u-tier__price { display: flex; align-items: baseline; gap: 6px; } .u-tier__price strong { font-size: clamp(2.2rem, 3vw, 3rem); font-weight: 900; color: var(--u-ink); letter-spacing: -0.03em; line-height: 1; } .u-tier__price em { font-style: normal; color: var(--u-soft); font-size: 14px; font-weight: 600; } .u-tier h3 { font-size: 1.35rem; } .u-tier__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .u-tier__features li { position: relative; padding-left: 24px; font-size: 14.5px; } .u-tier__features li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 7px; border-left: 2px solid var(--u-primary); border-bottom: 2px solid var(--u-primary); transform: rotate(-45deg); } /* ========================================================================== 27. PORTFOLIO grid (p�gina completa) ========================================================================== */ .u-portfolio-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 880px) { .u-portfolio-grid { grid-template-columns: repeat(2, 1fr); } } .u-portfolio-item { position: relative; display: grid; gap: 0; background: #fff; border: 1px solid var(--u-border); border-radius: 0; overflow: hidden; color: var(--u-ink); transition: border-color var(--u-t), box-shadow var(--u-t), transform var(--u-t); } .u-portfolio-item:hover { border-color: var(--u-primary); box-shadow: var(--u-shadow-3); transform: translateY(-6px); } .u-portfolio-item--featured { grid-column: 1 / -1; } @media (min-width: 1080px) { .u-portfolio-item--featured { grid-template-columns: 1.2fr 0.8fr; } } .u-portfolio-item__media { position: relative; aspect-ratio: 16 / 10; background: var(--u-bg-deep); overflow: hidden; } .u-portfolio-item--featured .u-portfolio-item__media { aspect-ratio: auto; height: 100%; min-height: 360px; } .u-portfolio-item__media img, .u-portfolio-item__media svg { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--u-ease); } .u-portfolio-item:hover .u-portfolio-item__media img { transform: scale(1.04); } .u-portfolio-item__chip { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 0; background: rgba(10, 10, 10, 0.78); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .u-portfolio-item__chip::before { content: ""; width: 6px; height: 6px; border-radius: 0; background: #22d3ee; } .u-portfolio-item__metric { position: absolute; top: 16px; right: 16px; padding: 10px 14px; border-radius: 0; background: rgba(255, 255, 255, 0.96); color: var(--u-primary); font-size: 17px; font-weight: 900; letter-spacing: -0.02em; display: grid; } .u-portfolio-item__metric span { font-size: 11px; color: var(--u-soft); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .u-portfolio-item__body { padding: 28px; display: grid; gap: 14px; align-content: center; } .u-portfolio-item__cat { color: var(--u-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .u-portfolio-item h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .u-portfolio-item p { color: var(--u-muted); font-size: 15px; } .u-portfolio-item__link { color: var(--u-primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: gap var(--u-t); } .u-portfolio-item:hover .u-portfolio-item__link { gap: 10px; } .u-portfolio-item__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 8px; } .u-portfolio-item__stats div { padding: 12px 14px; background: var(--u-primary-50); border-radius: 0; } .u-portfolio-item__stats strong { display: block; color: var(--u-primary); font-size: 1.1rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; } .u-portfolio-item__stats span { display: block; color: var(--u-muted); font-size: 12px; font-weight: 600; margin-top: 2px; } /* Filter bar */ .u-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .u-filter button { padding: 7px 16px; border-radius: 0; border: 1px solid var(--u-border); background: #fff; color: var(--u-text); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; transition: border-color var(--u-t), background var(--u-t), color var(--u-t); } .u-filter button:hover { border-color: var(--u-primary); color: var(--u-primary); } .u-filter button.is-active { background: var(--u-primary); border-color: var(--u-primary); color: #fff; } .u-filter--center { justify-content: center; } .u-pf-tabs-section { padding: 60px 0; background: #fff; } /* ========================================================================== 28. CASE STUDY layout ========================================================================== */ .u-case-meta { position: relative; background: #fff; border-bottom: 1px solid var(--u-line); } .u-case-meta__grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; padding-block: 40px; } @media (min-width: 1080px) { .u-case-meta__grid { grid-template-columns: repeat(5, 1fr); } } .u-case-meta__cell { display: grid; gap: 4px; } .u-case-meta__label { font-size: 12px; font-weight: 700; color: var(--u-soft); letter-spacing: 0.08em; text-transform: uppercase; } .u-case-meta__value { font-size: 15px; font-weight: 700; color: var(--u-ink); } .u-case-section { padding-block: clamp(72px, 8vw, 120px); } .u-case-section + .u-case-section { border-top: 1px solid var(--u-line); } .u-case-grid { display: grid; gap: 56px; grid-template-columns: 1fr; } @media (min-width: 1080px) { .u-case-grid { grid-template-columns: 0.85fr 1.15fr; gap: 80px; } } .u-case-grid h2 { font-size: clamp(1.8rem, 3vw + 1rem, 2.6rem); } .u-case-grid p { color: var(--u-muted); font-size: 1.05rem; } .u-case-gallery { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 720px) { .u-case-gallery { grid-template-columns: repeat(2, 1fr); } } .u-case-gallery img { width: 100%; border-radius: 0; border: 1px solid var(--u-border); box-shadow: var(--u-shadow-1); } /* Stat strip dentro de case */ .u-case-stats { display: grid; gap: 0; grid-template-columns: 1fr 1fr; background: var(--u-bg-deep); color: #fff; border-radius: 0; overflow: hidden; } @media (min-width: 880px) { .u-case-stats { grid-template-columns: repeat(4, 1fr); } } .u-case-stat { padding: 36px 28px; border-right: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); display: grid; gap: 6px; } @media (min-width: 880px) { .u-case-stat { border-bottom: 0; } .u-case-stat:last-child { border-right: 0; } } @media (max-width: 879px) { .u-case-stat:nth-child(2n) { border-right: 0; } } .u-case-stat strong { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: #fff; } .u-case-stat span { color: rgba(255,255,255,0.6); font-size: 14px; } /* Palette / typography blocks */ .u-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (min-width: 720px) { .u-swatches { grid-template-columns: repeat(4, 1fr); } } .u-swatch { aspect-ratio: 1; border-radius: 0; border: 1px solid var(--u-border); display: grid; align-content: end; padding: 16px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; } .u-swatch span { display: block; opacity: 0.85; font-weight: 500; } .u-tags { display: flex; flex-wrap: wrap; gap: 8px; } .u-tag { padding: 6px 12px; border-radius: 0; background: var(--u-primary-100); color: var(--u-primary-700); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .u-tag--ink { background: var(--u-bg-dark); color: #fff; } /* Next case nav */ .u-next-case { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--u-border); background: var(--u-bg-alt); } @media (min-width: 880px) { .u-next-case { grid-template-columns: 1fr 1fr; } } .u-next-case__col { padding: clamp(40px, 5vw, 64px); display: grid; gap: 12px; border-right: 1px solid var(--u-border); transition: background var(--u-t); } .u-next-case__col:last-child { border-right: 0; } .u-next-case__col:hover { background: #fff; } .u-next-case__label { font-size: 12px; color: var(--u-soft); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .u-next-case__title { font-size: clamp(1.4rem, 2vw + 1rem, 2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--u-ink); } .u-next-case__cta { color: var(--u-primary); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } .u-next-case__col:hover .u-next-case__cta { gap: 10px; } /* ========================================================================== 26. NUESTRA AGENCIA ========================================================================== */ .u-page-agency { background: #fff; } .u-eyebrow--light { color: rgba(255, 255, 255, 0.88); } .u-eyebrow--light::before { background: rgba(255, 255, 255, 0.65); } .u-section__head--center { margin-inline: auto; margin-bottom: 72px; text-align: center; justify-items: center; max-width: 760px; } .u-section__head--center .lead { margin-inline: auto; } /* 02 · Por qué UcturedAgency */ .u-agency-why { border-top: 0; background: #fff; } .u-agency-why__grid { max-width: 1120px; margin-inline: auto; } .u-agency-why__grid.u-process { gap: 28px; } @media (min-width: 1080px) { .u-agency-why__grid.u-process::before { content: ""; position: absolute; top: 48px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--u-border) 8%, var(--u-border) 92%, transparent 100%); pointer-events: none; } } /* 03 · Más de nosotros */ .u-agency-about { border-top: 0; } .u-agency-about__inner { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; } @media (min-width: 960px) { .u-agency-about__inner { grid-template-columns: 1fr 1fr; } } .u-agency-about__video { border-radius: 0; overflow: hidden; border: 1px solid var(--u-border); box-shadow: var(--u-shadow-2); background: var(--u-bg-dark); aspect-ratio: 16 / 9; } .u-agency-about__video video { width: 100%; height: 100%; object-fit: cover; display: block; } .u-agency-about__copy { display: grid; gap: 20px; } .u-agency-about__copy h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.35rem); letter-spacing: -0.025em; line-height: 1.15; max-width: 22ch; } .u-agency-about__copy p { color: var(--u-muted); font-size: 16px; line-height: 1.7; max-width: 48ch; } @media (max-width: 959px) { .u-agency-about__copy h2, .u-agency-about__copy p { max-width: none; } } /* 04 · Stack herramientas */ .u-agency-stack { padding-block: clamp(72px, 8vw, 110px); background: linear-gradient(135deg, var(--u-primary) 0%, var(--u-primary-700) 100%); color: #fff; border-top: 0; position: relative; overflow: hidden; } .u-agency-stack::before { content: ""; position: absolute; inset: -50% -10% auto auto; width: 55%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 62%); pointer-events: none; } .u-agency-stack::after { content: ""; position: absolute; inset: auto auto -45% -8%; width: 48%; aspect-ratio: 1; border-radius: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0.14), transparent 62%); pointer-events: none; } .u-agency-stack__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 5vw, 56px); position: relative; z-index: 1; } .u-agency-stack__copy { display: grid; gap: 16px; flex: 0 1 400px; min-width: min(100%, 280px); } .u-agency-stack__copy h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); letter-spacing: -0.025em; line-height: 1.15; max-width: 22ch; color: #fff; } .u-agency-stack__copy p { color: rgba(255, 255, 255, 0.82); font-size: 15px; max-width: 42ch; line-height: 1.65; } .u-agency-stack__rail { flex: 1 1 520px; min-width: 0; padding: 20px 24px; border-radius: 0; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); } .u-agency-stack__logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .u-agency-stack__logos::-webkit-scrollbar { display: none; } .u-agency-stack .u-stack-logo { display: grid; gap: 10px; justify-items: center; flex: 1 1 0; min-width: 76px; padding: 4px 6px; border: 0; background: transparent; transition: transform var(--u-t); } .u-agency-stack .u-stack-logo:hover { transform: translateY(-4px); } .u-agency-stack .u-stack-logo__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 0; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: -0.02em; border: 1px solid rgba(255, 255, 255, 0.2); transition: background var(--u-t), color var(--u-t), box-shadow var(--u-t), border-color var(--u-t); } .u-agency-stack .u-stack-logo:hover .u-stack-logo__mark { background: #fff; color: var(--u-primary); border-color: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); } .u-agency-stack .u-stack-logo span:last-child { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); text-align: center; white-space: nowrap; } .u-agency-stack .u-stack-logo:hover span:last-child { color: #fff; } @media (max-width: 960px) { .u-agency-stack__inner { flex-direction: column; align-items: stretch; } .u-agency-stack__copy { text-align: center; margin-inline: auto; justify-items: center; } .u-agency-stack__copy h2 { max-width: none; } .u-agency-stack__rail { width: 100%; } .u-agency-stack__logos { justify-content: flex-start; } } /* 05 · Nuestro objetivo */ .u-agency-objective { border-top: 0; } .u-agency-objective__statement { max-width: 820px; margin: 0 auto 56px; padding: clamp(32px, 5vw, 48px); border-radius: 0; background: #fff; border: 1px solid var(--u-border); box-shadow: var(--u-shadow-1); text-align: center; } .u-agency-objective__statement p { margin: 0; font-size: clamp(1.2rem, 1.4vw + 1rem, 1.6rem); font-weight: 600; line-height: 1.45; color: var(--u-ink); letter-spacing: -0.02em; } .u-agency-objective__grid { display: grid; gap: 20px; max-width: 1040px; margin-inline: auto; } @media (min-width: 768px) { .u-agency-objective__grid { grid-template-columns: repeat(3, 1fr); } } .u-agency-objective__item { display: grid; gap: 14px; padding: 28px; border-radius: 0; background: #fff; border: 1px solid var(--u-border); box-shadow: var(--u-shadow-1); transition: border-color var(--u-t), transform var(--u-t), box-shadow var(--u-t); } .u-agency-objective__item:hover { border-color: var(--u-primary); transform: translateY(-3px); box-shadow: var(--u-shadow-2); } .u-agency-objective__mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 0; background: var(--u-primary-100); color: var(--u-primary); font-size: 13px; font-weight: 900; letter-spacing: -0.02em; } .u-agency-objective__item h3 { font-size: 1.15rem; line-height: 1.25; } .u-agency-objective__item p { color: var(--u-muted); font-size: 15px; line-height: 1.65; margin: 0; } /* 06 · Equipo */ .u-agency-team { border-top: 0; } .u-agency-team__stats { list-style: none; margin: 0 auto 56px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 720px; } .u-agency-team__stats li { display: grid; gap: 4px; padding: 18px 28px; border-radius: 0; background: #fff; border: 1px solid var(--u-border); text-align: center; min-width: 140px; box-shadow: var(--u-shadow-1); transition: border-color var(--u-t), transform var(--u-t), box-shadow var(--u-t); } .u-agency-team__stats li:hover { border-color: var(--u-primary); transform: translateY(-2px); box-shadow: var(--u-shadow-2); } .u-agency-team__stats strong { font-size: 1.5rem; font-weight: 900; color: var(--u-primary); letter-spacing: -0.03em; line-height: 1; } .u-agency-team__stats span { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--u-soft); } @media (prefers-reduced-motion: reduce) { .u-agency-hero__badge { animation: none; } } /* ========================================================================== 28. PLAN CONFIGURABLE (servicios WordPress) ========================================================================== */ .u-plan-base { display: grid; gap: 24px; padding: clamp(28px, 4vw, 40px); background: var(--u-bg-deep); border: 1px solid var(--u-border); } @media (min-width: 880px) { .u-plan-base { grid-template-columns: 1.1fr 0.9fr; align-items: start; } } .u-plan-base__price { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 8px; } .u-plan-base__price strong { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 900; color: var(--u-primary); letter-spacing: -0.03em; line-height: 1; } .u-plan-base__price em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--u-soft); } .u-plan-base__includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .u-plan-base__includes li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--u-muted); } .u-plan-base__includes li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 6px; border-left: 2px solid var(--u-primary); border-bottom: 2px solid var(--u-primary); transform: rotate(-45deg); } .u-plan-base__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; } .u-plan-base__meta span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff; border: 1px solid var(--u-border); font-size: 13px; font-weight: 600; color: var(--u-ink); } .u-plan-steps { display: grid; gap: 12px; margin-top: 32px; counter-reset: plan-step; } .u-plan-steps li { position: relative; padding-left: 36px; font-size: 15px; color: var(--u-muted); counter-increment: plan-step; } .u-plan-steps li::before { content: counter(plan-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; background: var(--u-primary); color: #fff; font-size: 12px; font-weight: 800; } .u-plan-cats { display: grid; gap: 8px; margin-top: 32px; } .u-plan-cat { border: 1px solid var(--u-border); background: #fff; } .u-plan-cat summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; } .u-plan-cat summary::-webkit-details-marker { display: none; } .u-plan-cat summary::after { content: "+"; flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--u-primary-100); color: var(--u-primary); font-size: 18px; font-weight: 800; } .u-plan-cat[open] summary::after { content: "−"; background: var(--u-primary); color: #fff; } .u-plan-cat__body { padding: 0 22px 22px; overflow-x: auto; } .u-plan-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; } .u-plan-table th, .u-plan-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--u-line); vertical-align: top; } .u-plan-table th { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--u-soft); background: var(--u-bg-deep); } .u-plan-table td:last-child { white-space: nowrap; font-weight: 700; color: var(--u-ink); text-align: right; } .u-plan-table tr:last-child td { border-bottom: 0; } .u-plan-table .is-included { color: var(--u-primary); } .u-plan-note { margin-top: 24px; padding: 16px 20px; background: var(--u-primary-50); border-left: 3px solid var(--u-primary); font-size: 14px; color: var(--u-muted); } /* ========================================================================== BLOG ARTICLE ========================================================================== */ .u-article-hero { background: linear-gradient(135deg, #1a0e35 0%, #0e0a18 60%, #1a1040 100%); padding-block: clamp(72px, 10vw, 120px) clamp(56px, 6vw, 80px); position: relative; overflow: hidden; } .u-article-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(93,40,210,0.28) 0%, transparent 70%); pointer-events: none; } .u-article-hero__inner { position: relative; max-width: var(--u-container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); display: grid; gap: 24px; } .u-article-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .u-article-hero__cat { background: var(--u-primary); color: #fff; padding: 3px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .u-article-hero h1 { font-size: clamp(2rem, 4vw + 1rem, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #fff; max-width: 860px; } .u-article-hero__lead { font-size: clamp(1rem, 1.2vw + 0.5rem, 1.2rem); color: rgba(255,255,255,0.7); max-width: 680px; line-height: 1.6; } .u-article-hero__image { margin-top: 48px; height: clamp(200px, 30vw, 420px); background: linear-gradient(135deg, var(--u-primary) 0%, #7c3aed 40%, #1e0a3c 100%); position: relative; overflow: hidden; } .u-article-hero__image::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -45deg, transparent, transparent 40px, rgba(255,255,255,0.03) 40px, rgba(255,255,255,0.03) 41px ); } .u-article-hero__image--rose { background: linear-gradient(135deg, #be185d 0%, #831843 40%, #1e1b3a 100%); } .u-article-hero__image--cyan { background: linear-gradient(135deg, #0e7490 0%, #164e63 40%, #0e0a18 100%); } .u-article-hero__image--ink { background: linear-gradient(135deg, #27272a 0%, #18181b 40%, #1a0e35 100%); } .u-article-hero__image--mix { background: linear-gradient(135deg, var(--u-primary) 0%, #db2777 50%, #1e0a3c 100%); } .u-article-hero__image--green { background: linear-gradient(135deg, #166534 0%, #14532d 40%, #0e0a18 100%); } .u-article-hero__image--amber { background: linear-gradient(135deg, #92400e 0%, #78350f 40%, #1e0a3c 100%); } .u-prose { max-width: 760px; } .u-prose p { font-size: clamp(1rem, 1.1vw + 0.4rem, 1.1rem); line-height: 1.75; color: var(--u-muted); margin-bottom: 24px; } .u-prose h2 { font-size: clamp(1.5rem, 2vw + 0.5rem, 2.2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; color: var(--u-ink); margin-top: 56px; margin-bottom: 20px; } .u-prose h3 { font-size: clamp(1.15rem, 1.2vw + 0.4rem, 1.45rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--u-ink); margin-top: 36px; margin-bottom: 14px; } .u-prose ul, .u-prose ol { padding-left: 24px; margin-bottom: 24px; display: grid; gap: 10px; } .u-prose li { font-size: clamp(1rem, 1.1vw + 0.4rem, 1.1rem); line-height: 1.65; color: var(--u-muted); } .u-prose strong { color: var(--u-ink); font-weight: 700; } .u-callout { background: var(--u-primary-50); border-left: 4px solid var(--u-primary); padding: 24px 28px; margin-block: 36px; border-radius: 0 2px 2px 0; } .u-callout p { margin: 0; color: var(--u-ink); font-size: 1.05rem; font-weight: 500; line-height: 1.6; } .u-callout strong { color: var(--u-primary); } /* ========================================================================== Páginas legales (aviso legal, privacidad, cookies, condiciones, términos) ========================================================================== */ .u-legal { padding-block: clamp(48px, 6vw, 88px); } .u-legal__layout { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; } @media (min-width: 960px) { .u-legal__layout { grid-template-columns: 260px minmax(0, 1fr); } } /* Índice lateral (tabla de contenidos) */ .u-legal__toc { position: relative; } @media (min-width: 960px) { .u-legal__toc { position: sticky; top: calc(var(--u-header-h, 78px) + 24px); } } .u-legal__toc h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--u-primary); margin: 0 0 16px; } .u-legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; } .u-legal__toc a { display: block; padding: 8px 12px; font-size: 14px; line-height: 1.4; color: var(--u-muted); border-left: 2px solid var(--u-line); transition: color var(--u-t), border-color var(--u-t), background var(--u-t); } .u-legal__toc a:hover { color: var(--u-primary); border-color: var(--u-primary); background: var(--u-primary-50); } /* Bloque de actualización / meta */ .u-legal__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 32px; padding: 14px 18px; border: 1px solid var(--u-border); background: var(--u-bg-alt); font-size: 14px; color: var(--u-muted); } .u-legal__meta strong { color: var(--u-ink); } /* Ajustes del cuerpo legal sobre u-prose */ .u-legal__body { max-width: 820px; } .u-legal__body h2 { scroll-margin-top: calc(var(--u-header-h, 78px) + 24px); } .u-legal__body h2:first-of-type { margin-top: 0; } .u-legal__body address { font-style: normal; line-height: 1.9; color: var(--u-muted); } .u-legal__body a { color: var(--u-primary); text-decoration: underline; text-underline-offset: 2px; } .u-legal__body a:hover { color: var(--u-primary-700); } /* Tabla para política de cookies */ .u-legal__table-wrap { overflow-x: auto; margin-block: 28px; } .u-legal__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; } .u-legal__table th, .u-legal__table td { text-align: left; padding: 12px 14px; border: 1px solid var(--u-border); vertical-align: top; line-height: 1.5; } .u-legal__table th { background: var(--u-bg-alt); color: var(--u-ink); font-weight: 700; } .u-legal__table td { color: var(--u-muted); } .u-author-note { display: grid; gap: 10px; margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--u-border); background: var(--u-bg-alt); } .u-author-note strong { color: var(--u-ink); } .u-author-note p { margin: 0; font-size: 0.98rem; } .u-article-cta { display: grid; gap: 14px; margin-top: 32px; padding: 24px; border: 1px solid rgba(93,40,210,0.22); background: linear-gradient(135deg, var(--u-primary-100), #fff 72%); } .u-article-cta h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); } .u-article-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .u-article-layout { display: grid; gap: clamp(48px, 6vw, 80px); grid-template-columns: 1fr; align-items: start; } @media (min-width: 1080px) { .u-article-layout { grid-template-columns: 1fr 320px; gap: 64px; } } .u-article-sidebar { position: sticky; top: 100px; display: grid; gap: 24px; } .u-sidebar-box { border: 1px solid var(--u-border); padding: 28px; background: #fff; } .u-sidebar-box h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--u-soft); margin-bottom: 16px; } .u-sidebar-box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .u-sidebar-box li a { font-size: 14px; color: var(--u-muted); font-weight: 500; transition: color var(--u-t); display: flex; gap: 8px; align-items: flex-start; } .u-sidebar-box li a::before { content: '→'; color: var(--u-primary); flex-shrink: 0; font-size: 12px; margin-top: 2px; } .u-sidebar-box li a:hover { color: var(--u-primary); } .u-article-share { display: flex; gap: 10px; flex-wrap: wrap; } .u-article-share a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--u-border); color: var(--u-muted); transition: border-color var(--u-t), color var(--u-t); } .u-article-share a:hover { border-color: var(--u-primary); color: var(--u-primary); } .u-article-related { display: grid; gap: 24px; } @media (min-width: 720px) { .u-article-related { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== 29. PORTFOLIO REDESIGN ========================================================================== */ .u-pf-hero { position: relative; padding-top: calc(var(--u-header-h) + clamp(80px, 10vw, 120px)); padding-bottom: clamp(80px, 10vw, 140px); background: linear-gradient(160deg, var(--u-band-from) 0%, var(--u-band-mid) 52%, var(--u-band-to) 100%); color: #fff; overflow: hidden; } .u-pf-hero__bg { position: absolute; inset: 0; pointer-events: none; } .u-pf-hero__bg::before { content: ""; position: absolute; inset: -20% -5% auto auto; width: min(620px, 65vw); height: min(620px, 65vw); background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 68%); } .u-pf-hero__bg::after { content: ""; position: absolute; inset: auto auto -35% -10%; width: min(480px, 50vw); height: min(480px, 50vw); background: radial-gradient(circle, rgba(167, 139, 250, 0.2) 0%, transparent 70%); } .u-pf-hero__inner { position: relative; z-index: 1; display: grid; gap: 32px; } .u-pf-hero .u-breadcrumb { color: rgba(255, 255, 255, 0.55); font-size: 12px; } .u-pf-hero .u-breadcrumb a { color: rgba(255, 255, 255, 0.72); } .u-pf-hero .u-breadcrumb a:hover { color: #fff; } .u-pf-hero .u-breadcrumb span[aria-hidden] { color: rgba(255, 255, 255, 0.35); margin: 0 8px; } .u-pf-hero__content { display: grid; gap: 48px; align-items: end; } @media (min-width: 900px) { .u-pf-hero__content { grid-template-columns: 1fr auto; gap: 64px; } } .u-pf-hero__copy { display: grid; gap: 20px; } .u-pf-hero .u-eyebrow--light { color: rgba(255, 255, 255, 0.6); } .u-pf-hero h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; color: #fff; margin: 0; max-width: 680px; } .u-pf-hero__lead { font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255, 255, 255, 0.75); max-width: 560px; margin: 0; line-height: 1.6; } .u-pf-hero__stats { display: flex; gap: 32px; flex-wrap: wrap; } .u-pf-stat { display: grid; gap: 4px; padding: 20px 24px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 120px; } .u-pf-stat strong { font-size: 2rem; font-weight: 900; letter-spacing: -0.03em; color: #fff; line-height: 1; } .u-pf-stat span { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .u-pf-projects { padding: var(--u-section-py) 0; background: var(--u-bg); } .u-pf-projects__head { display: grid; gap: 16px; margin-bottom: 48px; } .u-pf-projects__head h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; max-width: 600px; margin: 0; } .u-pf-grid { display: grid; gap: 32px; grid-template-columns: 1fr; } @media (min-width: 768px) { .u-pf-grid { grid-template-columns: repeat(2, 1fr); } } .u-pf-card { display: grid; background: #fff; border: 1px solid var(--u-border); overflow: hidden; color: var(--u-ink); transition: border-color var(--u-t), box-shadow var(--u-t), transform var(--u-t); } .u-pf-card:hover { border-color: var(--u-primary); box-shadow: var(--u-shadow-3); transform: translateY(-4px); } .u-pf-card--hero { grid-column: 1 / -1; } @media (min-width: 1024px) { .u-pf-card--hero { grid-template-columns: 1.3fr 1fr; } } .u-pf-card__visual { position: relative; aspect-ratio: 16 / 10; background: var(--u-bg-deep); overflow: hidden; } .u-pf-card--hero .u-pf-card__visual { aspect-ratio: auto; min-height: 320px; } .u-pf-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--u-ease); } .u-pf-card:hover .u-pf-card__visual img { transform: scale(1.03); } .u-pf-card__overlay { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 16px; z-index: 2; pointer-events: none; } .u-pf-card__tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(10, 10, 10, 0.75); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .u-pf-card__tag::before { content: ""; width: 6px; height: 6px; background: #22d3ee; } .u-pf-card__year { padding: 6px 10px; background: rgba(255, 255, 255, 0.92); color: var(--u-text); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .u-pf-card__content { padding: 28px; display: grid; gap: 12px; align-content: start; } .u-pf-card--hero .u-pf-card__content { align-content: center; } .u-pf-card__sector { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--u-soft); } .u-pf-card h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .u-pf-card--hero h3 { font-size: 1.8rem; } .u-pf-card p { color: var(--u-muted); font-size: 15px; line-height: 1.6; margin: 0; } .u-pf-card__metrics { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .u-pf-metric { padding: 10px 14px; background: var(--u-primary-50); min-width: 80px; } .u-pf-metric strong { display: block; font-size: 1.1rem; font-weight: 900; letter-spacing: -0.02em; color: var(--u-primary); line-height: 1; } .u-pf-metric span { display: block; font-size: 11px; font-weight: 600; color: var(--u-muted); margin-top: 2px; } .u-pf-card__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--u-primary); font-weight: 700; font-size: 14px; margin-top: 8px; transition: gap var(--u-t); } .u-pf-card:hover .u-pf-card__cta { gap: 10px; } .u-pf-process { padding: var(--u-section-py) 0; background: var(--u-bg-alt); border-top: 1px solid var(--u-line); border-bottom: 1px solid var(--u-line); } .u-pf-process__head { display: grid; gap: 16px; margin-bottom: 56px; max-width: 560px; } .u-pf-process__head h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin: 0; } .u-pf-process__head .lead { color: var(--u-muted); font-size: 1rem; margin: 0; } .u-pf-process__grid { display: grid; gap: 1px; background: var(--u-border); border: 1px solid var(--u-border); } @media (min-width: 640px) { .u-pf-process__grid { grid-template-columns: repeat(3, 1fr); } } .u-pf-phase { padding: 28px 24px; background: #fff; display: grid; gap: 8px; transition: background var(--u-t); } .u-pf-phase:hover { background: var(--u-primary-50); } .u-pf-phase__num { font-size: 12px; font-weight: 800; color: var(--u-primary); letter-spacing: 0.05em; } .u-pf-phase h3 { font-size: 1rem; font-weight: 700; margin: 0; } .u-pf-phase p { font-size: 13px; color: var(--u-muted); margin: 0; line-height: 1.5; } .u-pf-projects-section { padding: 0 0 80px; background: #fff; } .u-pf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 1024px) { .u-pf-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .u-pf-grid-3 { grid-template-columns: 1fr; } } .u-pf-project-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--u-border); overflow: hidden; transition: transform var(--u-t), box-shadow var(--u-t), border-color var(--u-t); } .u-pf-project-card:hover { transform: translateY(-4px); box-shadow: var(--u-shadow-2); border-color: var(--u-primary); } .u-pf-project-card__thumbnail { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--u-bg-alt); } .u-pf-project-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--u-ease); } .u-pf-project-card:hover .u-pf-project-card__thumbnail img { transform: scale(1.05); } .u-pf-project-card__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); } .u-pf-project-card__name { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; } .u-pf-project-card__content { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .u-pf-project-card__title { font-size: 18px; font-weight: 700; color: var(--u-ink); margin: 0; line-height: 1.3; } .u-pf-project-card__description { font-size: 14px; color: var(--u-muted); line-height: 1.6; margin: 0; flex: 1; } .u-pf-project-card__content .u-btn { width: 100%; justify-content: center; margin-top: 8px; } /* ========================================================================== 30. CASE STUDY PAGE (estilo portfolio individual) ========================================================================== */ .u-cs-hero { padding-top: calc(var(--u-header-h) + clamp(80px, 12vw, 160px)); padding-bottom: clamp(80px, 10vw, 140px); background: var(--u-bg-deep); color: #fff; text-align: center; } .u-cs-hero__inner { max-width: 800px; margin: 0 auto; display: grid; gap: 24px; } .u-cs-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin: 0; } .u-cs-hero__desc { font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgba(255, 255, 255, 0.7); line-height: 1.7; margin: 0; max-width: 640px; justify-self: center; } .u-cs-gallery { display: grid; gap: 0; background: var(--u-bg-alt); } .u-cs-gallery img { width: 100%; display: block; } .u-cs-cta { padding: clamp(80px, 10vw, 140px) 0; background: #fff; border-top: 1px solid var(--u-line); } .u-cs-cta__inner { text-align: center; display: grid; gap: 16px; justify-items: center; } .u-cs-cta__inner h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 900; letter-spacing: -0.03em; margin: 0; } .u-cs-cta__inner p { color: var(--u-muted); font-size: 1rem; margin: 0; max-width: 480px; } .u-cs-cta__inner .u-btn { margin-top: 12px; } /* ========================================================================== RESPONSIVE GLOBAL FIXES — Adapta la web a todos los dispositivos ========================================================================== */ /* Previene scroll horizontal en toda la web. Sólo en para no convertir en contenedor de scroll (eso rompería position: sticky del header). */ html { overflow-x: hidden; } *, *::before, *::after { min-width: 0; } /* Imágenes, iframes y embeds responsivos por defecto */ img, svg, video, iframe, embed, object { max-width: 100%; height: auto; } iframe { width: 100%; } /* Palabras largas que rompen el layout en móvil */ p, h1, h2, h3, h4, h5, h6, li, td, a, span { overflow-wrap: break-word; word-wrap: break-word; } /* Tablas responsivas */ .u-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- 0 - 480px: Móviles pequeños ---- */ @media (max-width: 480px) { /* Header más compacto: oculta el botón "Contáctanos" (el menú hamburguesa ya está) */ .u-header__actions .u-btn { display: none; } .u-header__actions { gap: 10px; } .u-header__logo img { width: 150px; height: auto; } .u-header__inner { gap: 12px; } /* Títulos más pequeños en móvil */ h1 { font-size: clamp(2rem, 9vw, 3rem); } h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); } /* Hero */ .u-hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); } .u-hero__copy { gap: 18px; } .u-hero__cta .u-btn { padding: 12px 16px; font-size: 14px; } /* Page hero */ .u-page-hero, .u-agency-hero, .u-case-hero { padding-top: calc(var(--u-header-h) + clamp(48px, 8vw, 80px)); padding-bottom: clamp(48px, 8vw, 80px); } .u-page-hero h1, .u-agency-hero h1, .u-case-hero h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); } .u-page-hero__actions .u-btn, .u-agency-hero__cta .u-btn { padding: 12px 16px; font-size: 14px; } /* Botones en general más compactos */ .u-btn { padding: 10px 18px; font-size: 14px; } .u-btn--sm { padding: 7px 14px; font-size: 13px; } /* Secciones: menos padding */ .u-section { padding-block: clamp(60px, 10vw, 100px); } .u-section__head { margin-bottom: 40px; } .u-section__index { display: none; } /* Cards: padding y texto más pequeños */ .u-card { padding: 24px 20px; } .u-card h3 { font-size: 1.2rem; } /* Stats grid */ .u-stats__grid { grid-template-columns: 1fr 1fr; gap: 16px; } .u-stats__head { margin-bottom: 32px; } /* Quote */ .u-quote { padding: 24px 20px; } .u-quote p { font-size: 1rem; } /* Footer */ .u-footer { padding-top: 64px; } .u-footer__top { padding-bottom: 32px; gap: 24px; } .u-footer__top h3 { font-size: 1.4rem; } .u-footer__grid { gap: 32px; padding-block: 40px; } .u-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 24px; } .u-footer__news input { min-width: 100%; } .u-footer__news-row { flex-direction: column; } /* Ocultar el formulario de newsletter (y su contenedor) en móvil */ .u-footer__top > div:has(.u-footer__news) { display: none; } .u-footer__news { display: none; } .u-footer__news .u-btn { width: 100%; justify-content: center; } /* Formularios */ .u-form { padding: 24px 20px; } .u-form__input, .u-form__select, .u-form__textarea { font-size: 16px; padding: 12px 14px; } .u-form__actions { flex-direction: column; align-items: stretch; } .u-form__actions .u-btn { width: 100%; justify-content: center; } /* Contacto */ .u-contact-grid { gap: 32px; } .u-contact-detail { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; } .u-contact-detail__icon { width: 40px; height: 40px; font-size: 16px; } .u-contact-detail__value { font-size: 1rem; } /* Blog */ .u-blog-featured { gap: 0; } .u-blog-featured__body { padding: 20px; } .u-blog-card__body { padding: 16px; } /* Pricing */ .u-plan { padding: 24px 20px; } .u-plan__price { font-size: 2.2rem; } /* Portfolio */ .u-pf-project-card__content { padding: 16px; } .u-pf-project-card__title { font-size: 1.1rem; } /* Article */ .u-article-body { font-size: 1rem; } .u-article-body h2 { font-size: 1.5rem; } /* CTA band */ .u-cta-band { padding-block: 60px; } .u-cta-band h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); } /* === Tap targets accesibles (mínimo 44×44px, WCAG 2.5.5) === */ .u-cases-slider__btn { width: 44px; height: 44px; } .u-cases-slider__dot { width: 14px; height: 14px; } .u-pagination a, .u-pagination span { min-width: 44px; min-height: 44px; } .u-faq-search__clear { width: 44px; height: 44px; } .u-faq-cat { padding: 13px 16px; min-height: 44px; } .u-filter button { padding: 12px 16px; min-height: 44px; } .u-footer__social a { width: 44px; height: 44px; } .u-contact-social a { width: 44px; height: 44px; } /* === Tipografía mínima legible (≥13px en textos de lectura) === */ .u-case__cat, .u-case__metric, .u-blog-card__meta, .u-contact-detail__label, .u-step__list, .u-footer__news-privacy, .u-sidebar-box h4, .u-pf-card__sector, .u-pf-card__tag { font-size: 13px; } /* === Sidebar del blog: sticky no funciona bien en móvil === */ .u-article-sidebar { position: static; } } /* ---- 481px - 768px: Móviles grandes y tablets pequeñas ---- */ @media (min-width: 481px) and (max-width: 768px) { .u-hero h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); } .u-page-hero h1, .u-agency-hero h1, .u-case-hero h1 { font-size: clamp(2rem, 5vw, 2.5rem); } .u-stats__grid { grid-template-columns: repeat(2, 1fr); } .u-section { padding-block: clamp(80px, 10vw, 120px); } .u-footer__top h3 { font-size: 1.6rem; } /* Tap targets en tablets también (mínimo 44×44px) */ .u-cases-slider__btn { width: 44px; height: 44px; } .u-cases-slider__dot { width: 14px; height: 14px; } .u-pagination a, .u-pagination span { min-width: 44px; min-height: 44px; } .u-faq-cat { padding: 13px 16px; min-height: 44px; } .u-filter button { min-height: 44px; } .u-footer__social a { width: 44px; height: 44px; } } /* ---- Hasta 768px: Ajustes generales de móvil/tablet ---- */ @media (max-width: 768px) { /* Header con page-hero: añadir padding-top al contenido para que no se solape */ body.u-has-page-hero .u-page-hero, body.u-has-page-hero .u-agency-hero, body.u-has-page-hero .u-case-hero { padding-top: calc(var(--u-header-h) + clamp(48px, 8vw, 80px)); } /* Grids que necesitan ser 1 columna */ .u-process { grid-template-columns: 1fr; gap: 20px; } .u-blog-featured { grid-template-columns: 1fr; } .u-portfolio-grid { grid-template-columns: 1fr; } /* Ocultar elementos decorativos que no aportan en móvil */ .u-eyebrow--counter { font-size: 11px; } .u-eyebrow--counter strong { font-size: clamp(1.8rem, 5vw, 2.4rem); } /* Swatches */ .u-swatches { grid-template-columns: repeat(2, 1fr); } /* Plan categories table */ .u-plan-cat__body { font-size: 13px; } /* Hero board: ocultar o reducir */ .u-hero__board { min-height: auto; padding: 16px; } .u-hero__board-row { grid-template-columns: 1fr; } /* Testimonios: scroll horizontal permitido */ .u-quote-grid { grid-template-columns: 1fr; } /* Article */ .u-article-meta { flex-direction: column; align-items: flex-start; gap: 8px; } .u-article-related { grid-template-columns: 1fr; } /* FAQ */ .u-faq-search-wrap { padding: 0 4px; } /* === Marquee de herramientas: en móvil siempre scroll-snap manual (sin animación infinita, el usuario puede explorar arrastrando) === */ .u-tools-marquee { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .u-tools-marquee::-webkit-scrollbar { display: none; } .u-tools-marquee__inner { animation: none; width: max-content; } .u-tools-marquee__item { scroll-snap-align: start; flex-shrink: 0; } /* === Listas de entregables (.u-step__list): en móvil se ocultan y se muestran con un toggle "Ver entregables ▾" para reducir la altura de cada paso === */ .u-step__list { display: none; } .u-step__list-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 10px 16px; min-height: 44px; background: var(--u-bg, #f6f5fb); border: 1px solid var(--u-border, #e6e4ef); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--u-ink, #0f0c28); cursor: pointer; -webkit-tap-highlight-color: transparent; } .u-step__list-toggle::after { content: "▾"; font-size: 12px; transition: transform 0.2s ease; } .u-step__list-toggle[aria-expanded="true"]::after { transform: rotate(180deg); } .u-step__list.is-open { display: grid; } /* === Pares de botones (uno a la izquierda y otro a la derecha): en móvil se apilan en vertical y cada uno ocupa el ancho completo === */ .u-hero__cta, .u-page-hero__actions, .u-agency-hero__cta, .u-cta-band__actions, .u-article-cta__actions, .u-reasons__foot { flex-direction: column; align-items: stretch; width: 100%; } .u-hero__cta > .u-btn, .u-page-hero__actions > .u-btn, .u-agency-hero__cta > .u-btn, .u-cta-band__actions > .u-btn, .u-article-cta__actions > .u-btn, .u-reasons__foot > .u-btn { width: 100%; min-width: 0; justify-content: center; } } /* ---- 769px - 1024px: Tablets ---- */ @media (min-width: 769px) and (max-width: 1024px) { .u-portfolio-grid { grid-template-columns: repeat(2, 1fr); } .u-cards { grid-template-columns: repeat(2, 1fr); } .u-cases-grid { grid-template-columns: repeat(2, 1fr); } .u-team-grid { grid-template-columns: repeat(2, 1fr); } .u-pricing { grid-template-columns: repeat(2, 1fr); } .u-blog-grid { grid-template-columns: repeat(2, 1fr); } } /* ---- 1025px - 1280px: Desktop pequeño ---- */ @media (min-width: 1025px) and (max-width: 1280px) { .u-container { padding-inline: clamp(24px, 3vw, 40px); } } /* ---- Pantallas muy grandes (1400px+) ---- */ @media (min-width: 1400px) { .u-hero h1 { font-size: clamp(3rem, 5vw, 4.2rem); } .u-page-hero h1, .u-agency-hero h1, .u-case-hero h1 { font-size: clamp(2.2rem, 3vw, 3.2rem); } } /* ---- Modo landscape en móvil: ajustar hero ---- */ @media (max-height: 500px) and (orientation: landscape) { .u-hero { min-height: auto; padding-block: 40px; } .u-page-hero, .u-agency-hero, .u-case-hero { padding-block: 40px; } .u-hero__board { display: none; } } /* ---- Touch devices: eliminar hover effects problemáticos ---- */ @media (hover: none) { .u-card:hover, .u-blog-featured:hover, .u-plan:hover, .u-pf-project-card:hover, .u-blog-card:hover { transform: none; } .u-btn:hover { transform: none; } } /* ---- Impresión ---- */ @media print { .u-header, .u-footer, .u-mobile, .u-hero__float, .u-hero__scroll, .u-cta-band, .u-back-to-top, .u-contact-dock { display: none !important; } body { color: #000; background: #fff; } a { color: #000; text-decoration: underline; } .u-section { padding-block: 20px; } h1, h2, h3 { color: #000; } } /* ---- CONTACTO RÁPIDO (FAB único desplegable) ---- */ .u-contact-dock { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } /* Botón disparador */ .u-contact-dock__toggle { width: 58px; height: 58px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: 0; background: var(--u-primary); color: #fff; cursor: pointer; box-shadow: 0 10px 28px rgba(93, 40, 210, 0.45); transition: transform var(--u-t), background var(--u-t), box-shadow var(--u-t); } .u-contact-dock__toggle:hover { background: var(--u-primary-700); transform: translateY(-2px); } .u-contact-dock__toggle:focus-visible { outline: 3px solid rgba(93, 40, 210, 0.35); outline-offset: 3px; } .u-contact-dock__toggle-icon { width: 26px; height: 26px; position: absolute; transition: opacity var(--u-t), transform var(--u-t); } .u-contact-dock__toggle-icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); } .u-contact-dock.is-open .u-contact-dock__toggle { background: var(--u-primary-700); } .u-contact-dock.is-open .u-contact-dock__toggle-icon--open { opacity: 0; transform: rotate(90deg) scale(0.6); } .u-contact-dock.is-open .u-contact-dock__toggle-icon--close { opacity: 1; transform: rotate(0) scale(1); } /* Panel desplegable (se abre hacia arriba) */ .u-contact-dock__menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--u-t), transform var(--u-t); } .u-contact-dock.is-open .u-contact-dock__menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .u-contact-dock__menu[hidden] { display: none; } /* Opciones (icono a la izquierda del texto, todos iguales) */ .u-contact-dock__item { width: 150px; height: 48px; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 16px; border: 1px solid var(--u-border); border-radius: 0; background: #fff; color: var(--u-ink); box-shadow: var(--u-shadow-2); text-decoration: none; transform: translateY(8px); opacity: 0; transition: transform var(--u-t), border-color var(--u-t), background var(--u-t), color var(--u-t), opacity var(--u-t); } .u-contact-dock.is-open .u-contact-dock__item { transform: translateY(0); opacity: 1; } .u-contact-dock.is-open .u-contact-dock__item:nth-child(1) { transition-delay: 0.02s; } .u-contact-dock.is-open .u-contact-dock__item:nth-child(2) { transition-delay: 0.06s; } .u-contact-dock.is-open .u-contact-dock__item:nth-child(3) { transition-delay: 0.1s; } .u-contact-dock__item strong { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; line-height: 1; } .u-contact-dock__icon { width: 20px; height: 20px; flex-shrink: 0; } .u-contact-dock__item:hover { transform: translateY(-2px); border-color: var(--u-primary); color: var(--u-primary); } .u-contact-dock__item--whatsapp { background: #16a34a; color: #fff; border-color: #16a34a; } .u-contact-dock__item--whatsapp:hover { background: #15803d; color: #fff; border-color: #15803d; } /* El botón "volver arriba" se apila encima del FAB de contacto (ver .u-back-to-top) */ @media (max-width: 760px) { .u-contact-dock { right: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .u-contact-dock__menu, .u-contact-dock__item, .u-contact-dock__toggle, .u-contact-dock__toggle-icon { transition: opacity var(--u-t); transform: none !important; } } /* ---- BOTÓN VOLVER ARRIBA (dentro del pie de página) ---- */ .u-back-to-top-wrap { display: flex; justify-content: center; padding: 8px 0 28px; } .u-back-to-top { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(255, 255, 255, 0.06); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--u-t), border-color var(--u-t), transform var(--u-t); } .u-back-to-top:hover { background: var(--u-primary); border-color: var(--u-primary); transform: translateY(-2px); } .u-back-to-top:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.4); outline-offset: 2px; } .u-back-to-top svg { width: 18px; height: 18px; display: block; } @media (prefers-reduced-motion: reduce) { .u-back-to-top { transition: background var(--u-t); transform: none !important; } }