/* ============================================================ Bigbox Corpo — Home · Editorial Luxury Fraunces (display + italic accents) + Hanken Grotesk (UI/body) Paleta cálida muestreada del PDF. Aire, hairlines, grano, profundidad. ============================================================ */ :root { --paper: #FFFFFF; /* blanco (fondo) */ --paper-2: #F6F5F3; /* off-white sutil (secciones alt) */ --petrol: #103E4D; /* petróleo (dark) */ --petrol-deep:#0B2C37; --petrol-soft:#1A4A57; --teal: #50AEB8; /* teal de marca (sobre claro) */ --teal-deep: #3C929B; --teal-bright:#6FC7D0; /* teal legible sobre oscuro */ --teal-tint: #E3F3F5; --ink: #1C2A30; /* texto fuerte */ --ink-soft: #586A6F; /* texto cuerpo */ --ink-faint: #93A0A2; /* texto tenue */ --line: rgba(16,62,77,.14); --line-soft: rgba(16,62,77,.08); --line-light: rgba(255,255,255,.16); --gold: #C9A24B; --maxw: 1200px; --gutter: clamp(22px, 5vw, 72px); --radius: 18px; --radius-lg: 26px; --shadow-soft: 0 30px 70px -42px rgba(16,62,77,.40); --shadow-card: 0 24px 50px -30px rgba(16,62,77,.30); --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sans-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans-body); background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.62; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: var(--grain); opacity: .035; mix-blend-mode: multiply; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--teal); color: #fff; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(52px, 7vw, 108px); position: relative; } h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); } .display { font-size: clamp(2.3rem, 4.8vw, 4.4rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 500; } h2.title { font-size: clamp(1.85rem, 3.9vw, 3.2rem); font-weight: 500; } .accent, em { font-family: var(--sans); font-style: normal; font-weight: 600; color: inherit; } .lead { font-family: var(--sans-body); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; font-weight: 400; } .btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--sans); font-weight: 600; font-size: .98rem; line-height: 1; border: 0; border-radius: 10px; padding: 17px 28px; transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s; white-space: nowrap; } .btn svg { width: 17px; height: 17px; transition: transform .25s cubic-bezier(.2,.8,.2,1); } .btn:hover svg { transform: translateX(4px); } .btn-primary { background: var(--teal); color: #fff; box-shadow: 0 14px 30px -14px rgba(80,174,184,.6); } .btn-primary:hover { background: var(--teal-deep); transform: translateY(-2px); } .btn-block { width: 100%; justify-content: center; padding: 18px; } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--paper); transition: background .35s, box-shadow .35s, border-color .35s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(255,255,255,.9); backdrop-filter: saturate(150%) blur(14px); border-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; } .brand { display: inline-flex; align-items: center; } .brand img { display: block; height: 24px; width: auto; } .nav-links { display: flex; align-items: center; gap: 36px; margin-left: auto; margin-right: clamp(20px, 2.6vw, 40px); } .nav-links a { font-family: var(--sans); font-size: .92rem; font-weight: 500; color: var(--ink-soft); transition: color .2s; position: relative; } .nav-links a:hover { color: var(--teal); } .nav-dd { position: relative; } .nav-dd__btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: .92rem; font-weight: 500; color: var(--ink-soft); padding: 0; transition: color .2s; } .nav-dd__btn:hover, .nav-dd.open .nav-dd__btn { color: var(--teal); } .nav-dd__chev { width: 13px; height: 13px; transition: transform .2s; } .nav-dd.open .nav-dd__chev { transform: rotate(180deg); } .nav-dd__menu { position: absolute; top: calc(100% + 16px); left: 0; min-width: 232px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 60; } .nav-dd.open .nav-dd__menu { display: flex; } .nav-dd__menu a { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 8px; font-family: var(--sans); font-size: .92rem; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background .15s, color .15s; } .nav-dd__menu a:hover { background: var(--paper-2); color: var(--teal); } /* abrir en hover (solo dispositivos con mouse); puente invisible para no perder el hover */ @media (hover: hover) { .nav-dd:hover .nav-dd__menu { display: flex; } .nav-dd:hover .nav-dd__chev { transform: rotate(180deg); color: var(--teal); } .nav-dd:hover .nav-dd__btn { color: var(--teal); } .nav-dd__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } } /* El icono vive dentro de una pastilla con un lavado de teal: es lo que separa un menu de "texto con un glifo al lado" de una lista de objetos. El brillo interno de arriba y el borde apenas visible son los mismos recursos que ya usan la tarjeta del formulario y la pastilla dorada de fin de ano. */ .nav-dd__menu .dd-icw { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(19,149,163,.16); background: linear-gradient(158deg, rgba(19,149,163,.13) 0%, rgba(19,149,163,.05) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); transition: background .18s, border-color .18s; } .nav-dd__menu a:hover .dd-icw { border-color: rgba(19,149,163,.3); background: linear-gradient(158deg, rgba(19,149,163,.2) 0%, rgba(19,149,163,.09) 100%); } /* 16px y trazo 1,5: a este tamano lo que se lee es la silueta, y un trazo grueso la empasta. */ .nav-dd__menu .dd-ic { width: 16px; height: 16px; color: var(--teal); flex: none; } /* Con la pastilla, el renglon necesita menos relleno propio. */ .nav-dd__menu a { padding: 8px 12px; gap: 12px; } .nav-dd__menu { min-width: 262px; } /* ---- "Fin de ano" en la barra ---- Va primero, antes de Soluciones, y se distingue por una sola cosa: es el unico item con icono. Sin pastilla ni fondo — a la derecha ya esta "Solicitar propuesta", que es teal lleno, y cualquier superficie de mas atras del item convertia la barra en dos botones seguidos. El cotillon dorado alcanza para que se note de reojo. El texto va en el gris del resto de la barra y se enciende en teal al pasar, igual que Soluciones: el unico color propio del item es el del icono. */ .nav-fda { display: inline-flex; align-items: center; gap: 9px; } /* 22px contra los 17 del resto: sin fondo, el icono es lo unico que carga el peso. */ .nav-fda__ic { width: 22px; height: 22px; flex: none; color: #C08A2E; transition: color .2s, transform .25s; } /* El cono se levanta apenas, como si tirara el papel picado. Nada de rotarlo: un cono girado 45 grados deja de leerse como un cono. */ .nav-links a.nav-fda:hover .nav-fda__ic { color: #A8761F; transform: translate(1px, -2px); } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-sep { width: 1px; height: 22px; background: var(--line); } .nav-country { position: relative; } .nav-country__btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: .92rem; font-weight: 600; color: var(--ink); padding: 6px 2px; transition: color .2s; } .nav-flag { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.07); flex: none; } .nav-country__chev { width: 14px; height: 14px; color: var(--ink-soft); transition: color .2s, transform .2s; } .nav-country__btn:hover .nav-country__chev { color: var(--teal); } .nav-country.open .nav-country__chev { transform: rotate(180deg); color: var(--teal); } .nav-country__menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 186px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 60; } .nav-country.open .nav-country__menu { display: flex; } .nav-country__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-family: var(--sans); font-size: .92rem; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background .15s; } .nav-country__menu a:hover { background: var(--paper-2); } /* abrir en hover (igual que Soluciones); puente invisible para no perder el hover */ @media (hover: hover) { .nav-country:hover .nav-country__menu { display: flex; } .nav-country:hover .nav-country__chev { transform: rotate(180deg); color: var(--teal); } .nav-country__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } } .nav .btn { padding: 12px 22px; } .nav-toggle { display: none; background: none; border: 0; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; color: var(--ink); margin: 6px 0; transition: .25s; } .hero { position: relative; background: var(--paper); padding: 80px 0 0; } .hero-banner { position: relative; overflow: hidden; border-radius: 0; min-height: clamp(320px, calc(100vh - 164px), 700px); min-height: clamp(320px, calc(100dvh - 164px), 700px); display: flex; align-items: center; } .hero-photo { position: absolute; inset: 0; z-index: 0; } .hero-photo > img, .hero-photo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-photo .hero-vid { background: #0A0C0E; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,11,.85) 0%, rgba(8,9,11,.64) 32%, rgba(8,9,11,.32) 58%, rgba(8,9,11,.06) 100%); } .hero-photo .grain-over { position: absolute; inset: 0; background-image: var(--grain); opacity: .06; mix-blend-mode: overlay; } /* video solo como enhancement: sin movimiento o en mobile cae al poster */ @media (prefers-reduced-motion: reduce) { .hero-vid { display: none; } } .hero-inner { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 16px; max-width: 640px; margin-inline: 0; padding: clamp(28px, 3.6vw, 50px) clamp(28px, 4vw, 56px); } .hero-mid { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(26px, 3.1vw, 40px); } .hero h1 { color: #fff; font-size: clamp(2.05rem, 3.9vw, 3.6rem); text-shadow: 0 3px 36px rgba(0,0,0,.52); } .hero-inner.is-wide { max-width: 760px; } .hero-inner.is-wide h1 { text-wrap: balance; } .hero-inner.is-wide .lead { font-size: clamp(1rem, 1.25vw, 1.2rem); max-width: none; } .hero h1 .accent { opacity: 1; font-weight: inherit; } .hero .lead { color: #fff; font-size: clamp(1rem, 1.1vw, 1.08rem); line-height: 1.5; max-width: 52ch; margin-inline: 0; text-shadow: 0 2px 18px rgba(0,0,0,.58); } .hero .lead strong { font-weight: 600; color: #fff; } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: flex-start; margin-top: 8px; } /* ===== Hero con formulario — VERSION B (/ar/b/) ===== Motivo: el form del pie esta en el 77% de la pagina y solo lo alcanza el 13,3% de los visitantes; el hero lo ve el 100%. Ver docs/analisis-ab-clarity-2026-08.md. Todo va scopeado a .hero--split para no tocar la home actual. */ .hero--split .hero-banner { min-height: 0; align-items: stretch; } /* Compacto a proposito: en una notebook (1536x864) el hero se comia el 86% de la pantalla y no dejaba ver que la pagina seguia. Los paddings verticales estan apretados contra los del resto del sitio para bajar el alto del banner. */ /* ⚠ EL NAV ES `position: fixed` Y MIDE 81px. Los 80px de padding-top del `.hero` base existen para eso. Aca se puede bajar, pero el texto arranca en padding-top + el padding-block del .hero-inner (minimo 24px), y esa suma NO puede quedar por debajo de 81 o el eyebrow se mete abajo de la barra. 68 + 24 = 92px de piso. Ya paso: con 40px el eyebrow desaparecia en mobile. */ .hero--split { padding-top: 68px; } .hero--split .hero-inner { max-width: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 415px); gap: clamp(28px, 3.4vw, 60px); align-items: center; padding-block: clamp(24px, 2.4vw, 34px); } .hero--split .hero-mid { gap: clamp(16px, 1.7vw, 22px); } .hero--split .lead { font-size: clamp(1.02rem, 1.45vw, 1.22rem); } .hero--split h1 { font-size: clamp(2.05rem, 3.75vw, 3.25rem); } /* El color lo carga el eyebrow y el H1 queda blanco entero: es lo que hace legible un titular de 6 palabras sobre foto. Ademas "Regalos Corporativos" le da scent al anuncio, que puja por "regalos empresariales". */ .hero--split .hero-eyebrow { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--teal-bright); margin: 0 0 -4px; text-shadow: 0 2px 14px rgba(0,0,0,.6); } /* Degrade puro de izquierda a derecha: arranca en .62 (donde vive el H1) y termina en CERO. La derecha queda con la foto limpia — la legibilidad de la tarjeta la sostiene su propio vidrio (.44 + blur), no el scrim. En mobile no aplica: ahi el texto ocupa todo el ancho y se usa un scrim vertical (ver media query). */ .hero--split .hero-scrim { background: linear-gradient(90deg, rgba(8,9,11,.56) 0%, rgba(8,9,11,.30) 48%, rgba(8,9,11,0) 100%); } /* `hero--dim` = el velo de antes, para los heroes cuyo VIDEO es claro. Sin el, el scrim liviano de arriba deja el H1 de team building en 3,39:1 (el minimo de texto grande es 3) y la bajada en 3,55 — y un video cambia de frame, asi que el peor caso no es el que se ve en una captura. Lo llevan viajes y team building de los 5 paises; el resto anda comodo con el liviano. Medir con tools/_contraste_hero_todas.mjs antes de sacarselo a alguno. */ .hero--split.hero--dim .hero-scrim { background: linear-gradient(90deg, rgba(8,9,11,.66) 0%, rgba(8,9,11,.40) 48%, rgba(8,9,11,.04) 100%); } /* Los 3 sellos van SIEMPRE en una sola fila (desktop y mobile): el texto se parte en 2 lineas con
para que quepan sin achicar la tipografia hasta lo ilegible. */ .hero--split .hero-trust { list-style: none; display: flex; flex-wrap: nowrap; gap: clamp(12px, 1.5vw, 24px); padding: 0; margin: 0; } .hero--split .hero-trust li { display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: clamp(.74rem, .84vw, .86rem); line-height: 1.3; color: rgba(255,255,255,.82); text-shadow: 0 2px 14px rgba(0,0,0,.5); } .hero--split .hero-trust svg { width: 16px; height: 16px; flex: none; color: var(--teal-bright); } /* La tarjeta compacta: 7 campos tienen que entrar sin volver interminable al hero. */ /* Sin la barra teal de arriba (`.form-card::before`): sobre la foto del hero la tarjeta ya se recorta sola y la linea le agregaba un borde de mas. La del formulario del pie NO se toca. */ .hero--split .hero-form::before { display: none; } /* Padding: el mismo del formulario del pie (se hereda de .form-card, por eso no se pisa). Sin borde gris — solo una sombra leve que la despega de la foto. */ /* Vidrio OSCURO, no bloque negro: el tono es petrol (no negro puro) y la opacidad baja de .5 a .44, asi que la foto se sigue leyendo detras. El blur es el que sostiene la legibilidad cuando el fondo se aclara — sin el, con .44 el texto blanco se pierde contra los reflejos de la cocina. */ .hero--split .hero-form { margin: 0; max-width: none; border-radius: 10px; padding-inline: clamp(18px, 2vw, 28px); background: rgba(18,28,33,.44); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px -20px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(24px) saturate(1.12); backdrop-filter: blur(24px) saturate(1.12); } /* El tilde de campo valido va a la IZQUIERDA, en el hueco de 40px que dejo el icono apagado (`.fsteps .field .fic { display: none }`). El texto arranca en 40px, asi que no se pisan. Pisa tambien el `right: 40px` del select. */ .hero--split .hero-form .field .fok { left: 11px; right: auto; } /* El asterisco ADELANTE del nombre del campo. */ .hero--split .hero-form .field .req { margin-left: 0; margin-right: 3px; } /* AUTOCOMPLETADO de Chrome: pinta el campo entero de celeste (#E8F0FE) y el texto en negro — sobre la tarjeta oscura quedaba un bloque claro por campo. El inset box-shadow es la unica forma de taparlo (el `background` lo ignora), y va casi opaco a proposito: con menos alfa el celeste se sigue viendo abajo. */ .hero--split .hero-form .field input:-webkit-autofill, .hero--split .hero-form .field input:-webkit-autofill:hover, .hero--split .hero-form .field input:-webkit-autofill:focus, .hero--split .hero-form .field select:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: inset 0 0 0 100px rgba(20,30,36,.94); box-shadow: inset 0 0 0 100px rgba(20,30,36,.94); caret-color: #fff; } .hero--split .hero-form .ttl { font-size: 1.12rem; margin-bottom: 16px; } .hero--split .hero-form .sub { font-size: .82rem; margin-bottom: 13px; } .hero--split .hero-form .field { margin-bottom: 9px; } .hero--split .hero-form .field textarea { min-height: 58px; } /* En 2 columnas la tarjeta deja ~130px utiles por etiqueta y "Email corporativo *" no entra: parte en dos lineas y se come el campo. Se achica la tipografia, se corre el icono y se prohibe el wrap. */ .hero--split .hero-form .form-row { gap: 14px; } .hero--split .hero-form .field label { font-size: .84rem; left: 40px; white-space: nowrap; } .hero--split .hero-form .field .fic { left: 13px; } .hero--split .hero-form .field input, .hero--split .hero-form .field select, .hero--split .hero-form .field textarea { padding: 18px 32px 5px 40px; font-size: .9rem; } .hero--split .hero-form .form-legal { margin-top: 10px; font-size: .7rem; } /* El boton tambien aporta: son 6px menos de alto sin quedar chico para el dedo. */ .hero--split .hero-form .btn-block { padding-block: 13px; } @media (max-width: 980px) { /* Mobile: primero la propuesta de valor, despues el form. Ponerlo arriba de todo seria pedir antes de dar; asi queda igual en ~15-20% de la pagina contra el 77%. */ .hero--split .hero-inner { grid-template-columns: 1fr; gap: 26px; } /* mas aire arriba del eyebrow */ .hero--split { padding-top: 100px; } /* Los sellos se ocultan ENTEROS en mobile: dejar solo los iconos no comunica nada (una caja, un pin y unos auriculares sueltos) y el pedido era reducir texto. */ .hero--split .hero-trust { display: none; } /* El scrim horizontal NO sirve en mobile: el H1 ocupa todo el ancho, asi que dejar la derecha en cero se lo come. Va el vertical, el mismo del hero comun — hace falta el selector con `.hero--split` porque el generico pierde por especificidad. */ .hero--split .hero-scrim { background: linear-gradient(180deg, rgba(8,9,11,.46) 0%, rgba(8,9,11,.35) 42%, rgba(8,9,11,.56) 100%); } .hero--split.hero--dim .hero-scrim { background: linear-gradient(180deg, rgba(8,9,11,.6) 0%, rgba(8,9,11,.48) 42%, rgba(8,9,11,.66) 100%); } /* Con el hero apilado el banner es mas alto y el copy queda centrado, o sea mas abajo que antes: el tramo del medio del degrade tiene que sostenerlo. */ .hero--split.hero--stack .hero-scrim { background: linear-gradient(180deg, rgba(8,9,11,.5) 0%, rgba(8,9,11,.46) 50%, rgba(8,9,11,.58) 100%); } .hero--split.hero--stack.hero--dim .hero-scrim { background: linear-gradient(180deg, rgba(8,9,11,.62) 0%, rgba(8,9,11,.58) 50%, rgba(8,9,11,.68) 100%); } .hero--split .hero-trust { gap: 10px; } .hero--split .hero-trust li { font-size: .72rem; gap: 5px; } .hero--split .hero-trust svg { width: 14px; height: 14px; } } /* ===== Tira de clientes con logos (version B) ===== Grises + opacidad para que la tira no le compita al hero. ⚠ Las alturas van por logo A PROPOSITO: 5 de los 9 son wordmarks sueltos y 4 traen recuadro de color propio (Galicia, YPF, Supervielle, Amex). A la misma altura los recuadros pesan el doble que una palabra, asi que van mas chicos — se empareja el peso OPTICO, no el numero. */ .cli { height: 26px; width: auto; flex: none; filter: grayscale(1); opacity: .55; transition: opacity .25s; } .cli--galicia, .cli--ypf { height: 20px; } .cli--supervielle { height: 24px; } .cli--nissan { height: 18px; } /* wordmark muy ancho: a 26px medi­a 177px contra 41-80 del resto */ .cli--american-express { height: 34px; } /* caja con texto fino: a 30px no se leia */ .cli--mercado-libre { height: 30px; } .cli--royal-canin { height: 30px; } /* Clientes de CL/MX/PE/UY. Mismo criterio que nissan: a 26px estos wordmarks pasaban los 130px y se comian el ritmo del marquee (el resto anda en 50-110). */ .cli--santander { height: 20px; } .cli--oriflame { height: 21px; } .cli--interbank { height: 21px; } .cli--husqvarna { height: 22px; } .marquee:hover .cli { opacity: .75; } /* La tira NO frena con el mouse encima. Va scopeado a .pg-b (solo /ar/b/) porque `.marquee:hover { animation-play-state: paused }` es compartido y /ar/ es el brazo vivo del A/B: no se toca la pagina que esta midiendo. */ .pg-b .marquee:hover .marquee-track { animation-play-state: running; } /* ===== Formulario en 3 pasos (hero de /ar/b/) ===== Objetivo: bajar la cantidad de campos que se VEN de una. Los 7 siguen estando, pero repartidos 3/2/2. Ver docs/analisis-ab-clarity-2026-08.md. */ .fprog { list-style: none; display: flex; margin: 0 0 16px; padding: 0; position: relative; } .fprog::before { content: ""; position: absolute; top: 11px; left: 11%; right: 11%; height: 2px; background: rgba(255,255,255,.16); } .fprog__i { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; z-index: 1; } .fprog__d { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: .72rem; font-weight: 600; background: #1b2024; color: rgba(255,255,255,.45); border: 2px solid rgba(255,255,255,.22); transition: background .25s, border-color .25s, color .25s; } .fprog__l { font-family: var(--sans); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.4); transition: color .25s; } .fprog__i.is-on .fprog__d { background: var(--teal-bright); border-color: var(--teal-bright); color: #08090b; } .fprog__i.is-on .fprog__l { color: #fff; } .fprog__i.is-done .fprog__d { background: var(--teal-bright); border-color: var(--teal-bright); } .fprog__i.is-done .fprog__l { color: rgba(255,255,255,.62); } .fstep__t { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: #fff; margin: 0 0 2px; } .fstep__h { font-size: .8rem; color: rgba(255,255,255,.55); margin: 0 0 16px; } .fstep[hidden] { display: none; } /* --- Animaciones del avance --- */ /* El paso entra deslizando en la direccion del movimiento: da la sensacion de progreso en vez de un salto. `prefers-reduced-motion` ya las apaga globalmente. */ .fsteps[data-dir="next"] .fstep:not([hidden]) { animation: fstepNext .34s cubic-bezier(.2,.8,.2,1); } .fsteps[data-dir="back"] .fstep:not([hidden]) { animation: fstepBack .34s cubic-bezier(.2,.8,.2,1); } @keyframes fstepNext { from { opacity: 0; transform: translateX(18px); } } @keyframes fstepBack { from { opacity: 0; transform: translateX(-18px); } } /* La linea de progreso se llena al avanzar */ .fprog::after { content: ""; position: absolute; top: 11px; left: 11%; width: 0; height: 2px; background: var(--teal-bright); transition: width .42s cubic-bezier(.2,.8,.2,1); } .fsteps[data-step="2"] .fprog::after { width: 39%; } .fsteps[data-step="3"] .fprog::after { width: 78%; } /* Exito: el paso cumplido cambia el numero por un tilde, con un rebote corto */ .fprog__i.is-done .fprog__d { color: transparent; position: relative; animation: dotPop .42s cubic-bezier(.2,1.5,.4,1); } /* El tilde va en ABSOLUTO: el numero (aunque este en transparent) sigue ocupando su celda del grid, asi que un ::after normal caia en una segunda fila y se dibujaba por DEBAJO del circulo. */ .fprog__i.is-done .fprog__d::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 4px; border-left: 2px solid #08090b; border-bottom: 2px solid #08090b; transform: translate(-50%, -70%) rotate(-45deg); } @keyframes dotPop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } } .fnav { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; } .fback { background: none; border: 0; padding: 4px; font-family: var(--sans); font-size: .8rem; color: rgba(255,255,255,.55); cursor: pointer; transition: color .2s; } .fback:hover { color: #fff; } /* Campos como LINEA, no como cilindro: sin caja ni relleno, solo el subrayado. Se apaga el icono de la izquierda — con la linea sola el campo se lee mejor. */ .fsteps .field input, .fsteps .field select, .fsteps .field textarea { border: 0; border-bottom: 1px solid rgba(255,255,255,.26); border-radius: 10px; background-color: transparent; padding: 18px 26px 7px 0; } .fsteps .field input:focus, .fsteps .field select:focus, .fsteps .field textarea:focus { border-bottom-color: var(--teal-bright); box-shadow: none; background-color: transparent; } .fsteps .field .fic { display: none; } .fsteps .field label { left: 0; } /* Con el campo completo, el nombre del campo pasa a segundo plano: mas chico y en gris. Solo se enciende en teal mientras el campo tiene el foco. */ .fsteps .field input:focus ~ label, .fsteps .field input:not(:placeholder-shown) ~ label, .fsteps .field textarea:focus ~ label, .fsteps .field textarea:not(:placeholder-shown) ~ label, .fsteps .field select:focus ~ label, .fsteps .field select:valid ~ label { top: 7px; font-size: .6rem; letter-spacing: .07em; color: rgba(255,255,255,.5); } .fsteps .field input:focus ~ label, .fsteps .field textarea:focus ~ label, .fsteps .field select:focus ~ label { color: var(--teal-bright); } .fsteps .field.error input, .fsteps .field.error select, .fsteps .field.error textarea { border-bottom-color: #e2725b; } .fsteps .field textarea { min-height: 52px; resize: none; } /* la flecha vive pegada al borde derecho, no a 16px de un relleno que ya no existe */ .fsteps .field select { padding-right: 24px; background-position: right 2px center; } .fsteps .form-row { gap: 18px; } .logos { height: 84px; display: flex; align-items: center; border-bottom: 1px solid var(--line); overflow: hidden; } .logos-row { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); } .logos-label { flex: none; font-size: .72rem; letter-spacing: .22em; line-height: 1.35; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } .lbl-br { display: none; } .marquee { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 0%, #000 86%, transparent); mask-image: linear-gradient(to right, #000 0%, #000 86%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; animation-direction: reverse; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; align-items: center; flex-shrink: 0; gap: clamp(44px, 6vw, 88px); padding-right: clamp(44px, 6vw, 88px); } .marquee-group span { font-family: var(--sans-body); font-style: normal; font-size: .98rem; letter-spacing: .05em; color: #9AA0A0; font-weight: 300; white-space: nowrap; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee { overflow-x: auto; } } .shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(48px, 6vw, 80px); flex-wrap: wrap; } .shead .max { max-width: 640px; } .shead .title { margin-top: 4px; } /* ---- Rotulo de seccion ---- El corte que abre cada seccion: un rotulo chico con un punto teal, el h2 que responde lo que el rotulo plantea, y la bajada que dice como lo hacemos. Nacio en /ar/fin-de-ano/ y al pasar a las 5 homes se sube aca en vez de copiarse. */ .sec-eyebrow { display: inline-flex; align-items: center; gap: .7em; line-height: 1; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; } .sec-eyebrow .dot { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--teal); flex: none; } /* La bajada del corte reparte los renglones en vez de tirar el sobrante al ultimo. Es lo mismo que se hizo en la tarjeta del formulario: una palabra sola abajo hace que el bloque se lea cortado, y estos titulos van centrados, donde mas se nota. */ .sec-eyebrow ~ .lead { text-wrap: balance; } /* El aside de "como funciona" va centrado, pero su bajada tiene max-width y margenes en cero: quedaba pegada a la izquierda debajo de un h2 centrado. Las otras cabeceras centradas (shead-c, .max) ya traen los margenes automaticos. */ .steps-aside .sec-eyebrow ~ .lead { margin-inline: auto; } /* El titulo del corte reparte los renglones. Sin esto "Un regalo para cada momento del / anio." dejaba una palabra sola abajo — el mismo huerfano que la bajada. */ .sec-eyebrow ~ h2 { text-wrap: balance; } /* Aire entre el titulo y la bajada. Tres de las cabeceras no lo traian y la bajada quedaba pegada al h2. */ .sec-eyebrow ~ .lead { margin-top: 18px; } /* ---- Cabeceras de seccion centradas (solo desktop) ---- `.shead` es un flex pensado para titulo a la izquierda y algo a la derecha; hoy no tiene ese algo, asi que el bloque quedaba corrido a la izquierda contra secciones vecinas que si estaban centradas. En mobile se quedan a la izquierda: el ancho util es de una columna y el texto centrado se lee peor renglon a renglon. */ /* ---- El titulo del corte usa TODO el ancho ---- `.shead .max` estaba capado en 640px y `.shead-c` en 760, pensados para un titulo corto con algo al lado. Con titulos de una frase eso los partia en dos renglones sin necesidad: "Cada envio lleva tu marca." pide 674px y tenia 640. El tope se saca del CONTENEDOR, no de la bajada: esa mantiene su medida legible, que es lo que el cap protegia en realidad. */ /* `.usecases .shead .max` cape en 880 y pesa (0,3,0). Empatarle no alcanza: esa regla vive MAS ABAJO en la hoja y gana por orden. Se sube a (0,4,0) con `.section`. */ .section .shead :is(.max, .shead-c):has(> .sec-eyebrow), :is(.max, .shead-c):has(> .sec-eyebrow) { max-width: none; } :is(.max, .shead-c):has(> .sec-eyebrow) .lead { max-width: 68ch; } @media (min-width: 901px) { .shead { justify-content: center; text-align: center; } .shead .max, .shead .lead { margin-inline: auto; } } @media (min-width: 901px) { /* La bajada se centra sola dentro del contenedor, que ahora es mucho mas ancho. */ :is(.max, .shead-c):has(> .sec-eyebrow) .lead { margin-inline: auto; } } /* Abajo de 901 las cabeceras van TODAS a la izquierda. No es capricho: en una columna de ~350px el texto centrado se lee peor renglon a renglon, sobre todo las bajadas de dos lineas. Antes quedaban mezcladas —cuatro centradas y tres a la izquierda— porque cada seccion traia su propio layout; esto las empareja. `:has(> .sec-eyebrow)` agarra al contenedor del rotulo sea cual sea su clase: .max, .shead-c, .steps-aside o .nums-aside. */ @media (max-width: 900px) { /* Con `:has(> .sec-eyebrow)` a secas la regla pesa (0,1,0) —`:has()` toma la especificidad de su argumento— y perdia contra `.shead-c` y compania. Se le suma el contenedor adelante para llegar a (0,2,0). */ :is(.max, .shead-c, .steps-aside, .nums-aside):has(> .sec-eyebrow) { text-align: left; } .sec-eyebrow ~ .lead { margin-inline: 0; } } .exp-slider { position: relative; overflow: hidden; padding: 10px 0 42px; margin-bottom: -30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); } .exp-track { display: flex; width: max-content; animation: ucscroll 45s linear infinite; } .exp-group { display: flex; flex-shrink: 0; gap: 18px; padding-right: 18px; } @media (prefers-reduced-motion: reduce) { .exp-track { animation: none; } .exp-slider { overflow-x: auto; } } @media (max-width: 560px) { .card-exp { flex-basis: 84vw; } } #experiencias { padding-block: clamp(38px, 4.8vw, 70px); } #experiencias .shead { display: block; position: relative; margin-bottom: clamp(20px, 2.6vw, 36px); } #experiencias .shead .max { max-width: none; } .card-exp { flex: 0 0 clamp(252px, 22vw, 306px); position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 1px 3px -1px rgba(16,62,77,.13), 0 18px 40px -22px rgba(16,62,77,.45); transition: box-shadow .45s cubic-bezier(.2,.8,.2,1); isolation: isolate; } .card-exp:hover { box-shadow: 0 3px 8px -2px rgba(16,62,77,.16), 0 28px 56px -24px rgba(16,62,77,.55); } .card-exp img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .card-exp:hover img { transform: scale(1.05); } .card-exp .card-badges { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: 7px; } .card-exp .ribbon { position: absolute; z-index: 4; top: 20px; right: -52px; width: 190px; transform: rotate(45deg); text-align: center; padding: 7px 0; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: linear-gradient(135deg, #E8C979 0%, var(--gold) 52%, #A8842F 100%); color: #23201A; box-shadow: 0 10px 26px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.45); } .card-exp:has(.ribbon) .card-badges { right: 76px; } .card-exp .badge-card { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .01em; color: #fff; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .card-exp .badge-card svg { width: 13px; height: 13px; } .card-exp .badge-card.is-top { background: linear-gradient(135deg, var(--teal-bright) 0%, var(--teal) 55%, var(--teal-deep) 100%); border-color: transparent; color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 7px 13px 7px 11px; box-shadow: 0 10px 26px -9px rgba(80,174,184,.9), inset 0 1px 0 rgba(255,255,255,.45); } .card-exp .badge-card.is-top svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .card-exp .badge-card.is-outline { background: transparent; border-color: rgba(255,255,255,.5); backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: 500; } .card-exp .body { padding: 17px 18px 20px; color: var(--ink); } .card-exp .tag { font-family: var(--sans); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; } .card-exp h3 { font-family: var(--sans); font-size: 1.1rem; line-height: 1.22; color: var(--ink); font-weight: 600; letter-spacing: -.01em; } .card-exp .desc { font-family: var(--sans-body); font-size: .8rem; line-height: 1.45; color: var(--ink-soft); margin-top: 7px; } .soluciones .shead { display: block; position: relative; text-align: center; margin-bottom: clamp(28px, 3.4vw, 48px); } .soluciones .shead .max { max-width: none; margin: 0 auto; } .soluciones .shead .lead { margin-inline: auto; } .sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, 1fr); gap: 16px; } .sol-tile { position: relative; overflow: hidden; border-radius: var(--radius); isolation: isolate; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s; } .sol-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); } .sol-tile > img, .sol-tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #12161A; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .sol-tile:hover > img, .sol-tile:hover > video { transform: scale(1.05); } .sol-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(9,24,30,.95) 6%, rgba(9,24,30,.5) 52%, rgba(9,24,30,.06) 100%); } .sol-tile__body { position: relative; z-index: 2; margin-top: auto; padding: clamp(18px, 1.8vw, 24px); color: #fff; } .sol-ic { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; margin-bottom: 12px; flex: none; } .sol-ic svg { width: 22px; height: 22px; } .sol-tile h3 { font-family: var(--sans); font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; color: #fff; margin-bottom: 7px; } .sol-tile p { font-family: var(--sans-body); font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.86); } .sol-tile--wide { grid-column: span 2; } .sol-tile--feat { grid-column: span 2; grid-row: span 2; } .sol-tile--feat .sol-tile__body { padding: clamp(26px, 2.8vw, 40px); } .sol-tile--feat .sol-ic { width: 48px; height: 48px; } .sol-tile--feat h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin-bottom: 11px; } .sol-tile--feat p { font-size: 1.02rem; line-height: 1.55; max-width: 44ch; } .sol-tile--feat b { font-weight: 600; } @media (max-width: 900px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } .sol-tile--feat { grid-row: span 1; min-height: 320px; } } @media (max-width: 540px) { .sol-grid { grid-template-columns: 1fr; } .sol-tile--feat, .sol-tile--wide { grid-column: span 1; } .sol-tile { min-height: 230px; } .sol-tile--feat { min-height: 300px; } } .shead-c { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 4.4vw, 54px); } .shead-c .lead { margin: 16px auto 0; } .formatos .shead-c { max-width: none; } .fmt-groups { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 42px); max-width: 880px; margin-inline: auto; } .fmt-group { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 2.6vw, 34px); box-shadow: var(--shadow-card); } .fmt-group__ttl { display: flex; align-items: center; gap: 13px; font-family: var(--sans); font-size: clamp(1.35rem, 1.9vw, 1.65rem); font-weight: 600; letter-spacing: -.015em; color: var(--ink); margin-bottom: 22px; } .fmt-group__ic { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--teal-tint); color: var(--teal); flex: none; } .fmt-group__ic svg { width: 22px; height: 22px; } .bento { display: flex; gap: clamp(12px, 1.4vw, 18px); } .bento--stack { flex-direction: column; } .bento--stack .cell { flex-grow: 0; } .bento .cell { flex-grow: var(--ar); flex-basis: 0; min-width: 0; display: flex; flex-direction: column; } .bento .cell img { width: 100%; height: auto; display: block; border-radius: var(--radius); } .bento figcaption { order: -1; padding: 0 2px 11px; text-align: left; font-family: var(--sans); font-size: .98rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } @media (max-width: 640px) { .bento { flex-direction: column; } .bento .cell { flex-grow: 0; } } .nums { background: var(--paper-2); } .section.nums { padding-block: clamp(38px, 5vw, 68px); } .nums-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .nums-aside .title { margin-bottom: clamp(18px, 2.4vw, 28px); } .nums-visual { position: relative; width: 100%; max-width: 250px; aspect-ratio: 1; margin: 0 auto; } .nums-ring { position: absolute; border: 1px solid var(--line); border-radius: 50%; } .nums-ring.r1 { inset: 6%; } .nums-ring.r2 { inset: 22%; } .nums-photo { position: absolute; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-card); border: 3px solid var(--paper-2); } .nums-photo img { width: 100%; height: 100%; object-fit: cover; } .nums-photo.pa { width: 28%; top: -2%; left: 38%; } .nums-photo.pb { width: 23%; top: 16%; right: 0; } .nums-photo.pc { width: 31%; bottom: 2%; left: 32%; } .nums-photo.pd { width: 21%; bottom: 18%; left: 0; } .nums-photo.pe { width: 17%; top: 30%; left: 12%; } .nums-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .num-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 1.9vw, 24px); } .num-card:nth-child(1), .num-card:nth-child(2) { grid-column: span 3; } .num-card:nth-child(3), .num-card:nth-child(4), .num-card:nth-child(5) { grid-column: span 2; } .num-card b { font-family: var(--sans); display: block; font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 600; letter-spacing: -.025em; color: var(--teal); line-height: 1; } .num-card .lab { display: block; font-family: var(--sans); font-size: .95rem; font-weight: 500; color: var(--ink); margin-top: 12px; } .num-card .desc { display: block; font-family: var(--sans-body); font-size: .84rem; color: var(--ink-soft); margin-top: 4px; } @media (max-width: 860px) { .nums-grid { grid-template-columns: 1fr; } .nums-visual { max-width: 230px; } } @media (max-width: 520px) { .nums-cards { grid-template-columns: 1fr 1fr; } .num-card:nth-child(1), .num-card:nth-child(2), .num-card:nth-child(3), .num-card:nth-child(4), .num-card:nth-child(5) { grid-column: span 1; } } .problem { background: var(--petrol); color: #fff; overflow: hidden; } .problem::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; mix-blend-mode: overlay; pointer-events: none; } .problem h2.title { color: #fff; max-width: 20ch; } .section.usecases { padding-block: clamp(32px, 4.2vw, 60px); } .usecases .shead { display: block; position: relative; text-align: center; margin-bottom: clamp(12px, 1.6vw, 22px); } .usecases .shead .max { max-width: 880px; margin: 0 auto; } .usecases .shead .lead { margin-inline: auto; } @keyframes ucfade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes ucscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .usecases .uc-row { display: flex; gap: 10px; height: clamp(360px, 40vw, 520px); margin-top: clamp(22px, 3vw, 36px); } .uc-col { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 18px; cursor: pointer; transition: flex-grow .55s cubic-bezier(.22,.61,.36,1); } .uc-col__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .45s ease; } .uc-col::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,12,14,.88) 0%, rgba(10,12,14,.34) 44%, rgba(10,12,14,.86) 100%); transition: background .4s; } /* Desplegado se ve mas la foto: el gradiente afloja arriba y abajo. El texto sigue siendo blanco, asi que el contraste se midio, no se estimo. */ .uc-col__inner { position: absolute; inset: 0 0 auto 0; z-index: 1; padding: clamp(18px, 1.8vw, 28px); color: #fff; } .uc-col__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--sans); font-weight: 600; font-size: .88rem; color: var(--teal-bright); text-decoration: none; text-shadow: 0 2px 12px rgba(0,0,0,.5); transition: gap .25s, color .2s; } .uc-col__cta svg { width: 16px; height: 16px; } .uc-col__cta:hover { gap: 13px; color: #fff; } .uc-col__inner h3 { color: #fff; font-family: var(--sans); font-weight: 600; font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.18; text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.55); margin: 0; transition: font-size .45s cubic-bezier(.22,.61,.36,1); } .uc-col__body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease, margin-top .4s ease; } .uc-col__desc { margin: 0; max-width: 56ch; color: rgba(255,255,255,.92); font-family: var(--sans-body); font-size: .95rem; line-height: 1.5; text-shadow: 0 1px 10px rgba(0,0,0,.5); } /* El CTA va DEBAJO de las miniaturas, no debajo del copy: por eso la