/* ========================================================================== FIGMENT OF IMAGINATION — Sistema de diseño compartido Dirección de arte: monocromático claro, tipografía de peso mixto. Un solo CSS para los 4 sitios. Cada sitio matiza el lienzo con ========================================================================== */ :root { /* Lienzo */ --bg: #eeeef1; /* fondo de página, gris frío muy claro */ --bg-2: #e5e6ea; /* franjas alternas */ --surface: #ffffff; /* tarjetas */ --line: #dcdee3; --line-2: #e8eaee; /* Tinta — la jerarquía se hace con peso y gris */ --ink: #0b0b0d; /* negro base: botones, énfasis neutro */ --ink-2: #8a8f97; /* cuerpo del titular: gris medio */ --ink-3: #a8adb5; /* etiquetas, texto terciario */ --ink-body: #55595f; /* párrafos */ /* Acento de marca — tomado del logo. Default = Figment (índigo). */ --accent: #3a37b0; --accent-2: #6d3ad6; --accent-ink:#ffffff; /* texto sobre el acento sólido */ --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface)); --hero-bold: var(--accent); /* color de las palabras del hero */ --rainbow: linear-gradient(90deg,#30a848,#18a8d8,#0048c0,#7a2edc,#c026d3,#f06000,#f0c000); /* Tipografía */ --font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Ritmo */ --pad: clamp(1.25rem, 5vw, 5.5rem); /* Ancho del contenido. Era fijo en 1320 px y en un monitor ultrapanorámico —los de 21:9 para juegos, o un 4K— la página quedaba al centro con cientos de píxeles vacíos a los lados. Ahora crece con la pantalla: nunca menos de 1320, hasta 90% del ancho, con tope de 3000 para que no se desborde en una pared de televisores. Los bloques de TEXTO conservan su propio tope, que una línea de 3000 px no se lee. */ --max: clamp(1320px, 90vw, 3000px); --gap: clamp(.75rem, 1.6vw, 1.25rem); --radius: 24px; --radius-sm: 14px; --section-y: clamp(4.5rem, 10vw, 8.5rem); } /* Figment — MODO OSCURO (fondo negro). El logo completo tiene el wordmark en blanco, así que sobre negro se ve entero y limpio. */ html[data-brand="figment"] { --bg:#000000; --bg-2:#0d0e15; --surface:#131420; --line:#26283a; --line-2:#1c1e2c; --ink:#f2f4fc; --ink-2:#99a2c1; --ink-3:#6f78a0; --ink-body:#c2c8e2; --accent:#5b8cff; --accent-2:#22b0e8; --accent-ink:#08122e; --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface)); /* Halo del fondo: el azul y el cian del propio logo. */ --halo-1:rgba(91,140,255,.22); --halo-2:rgba(34,176,232,.16); --halo-luz:rgba(91,140,255,.42); --halo-luz-2:rgba(34,176,232,.24); } /* Whatts — MODO OSCURO (fondo negro). Usa la versión del logo con las partes negras en blanco (whatts-dark.png) para que lea sobre negro. */ html[data-brand="whatts"] { --bg:#000000; --bg-2:#141110; --surface:#191413; --line:#2e2723; --line-2:#221b19; --ink:#f7f2f0; --ink-2:#b4a8a2; --ink-3:#867a74; --ink-body:#d4c9c3; --accent:#ef5330; --accent-2:#ff7a52; --accent-ink:#1a0a05; --accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface)); /* Halo del hero: los dos dorados del logo. El rojo de sus puntos se probó y dejaba una mancha marrón detrás del logotipo: son tres puntos, no un color de marca. */ --halo-1:rgba(242,183,5,.30); --halo-2:rgba(224,138,18,.20); --halo-luz:rgba(245,197,42,.48); --halo-luz-2:rgba(224,138,18,.26); } html[data-brand="gorilla"] { /* Oscura desde el 31-ago-2026. Era crema, y era la única de las cuatro marcas que lo era: la cenefa negra del logo partía la página en dos y el resplandor del logo sólo se ve sobre negro. El neutro tira a cálido —no es gris— para que el naranja no se vea sucio encima. */ --bg:#000000; --bg-2:#12100d; --surface:#181410; --line:#2f2820; --line-2:#231d17; --ink:#f8f3ec; --ink-2:#b5aa9b; --ink-3:#877c6d; --ink-body:#d6cbbd; --accent:#ef7a12; --accent-2:#f5a11f; --accent-ink:#1c1206; /* Halo del hero: los colores del propio logo. */ --halo-1:rgba(239,122,18,.34); --halo-2:rgba(245,161,31,.22); --halo-luz:rgba(239,122,18,.55); --halo-luz-2:rgba(245,161,31,.30); } /* Planet Revo — MODO OSCURO completo (neón sobre negro espacial, como su logo) */ html[data-brand="revo"] { --bg:#0a0a12; --bg-2:#101020; --surface:#14141f; --line:#26263a; --line-2:#1e1e2e; --ink:#f4f4f8; --ink-2:#9aa0ad; --ink-3:#6b7080; --ink-body:#b9bec8; --accent:#8b46ff; --accent-2:#c930e0; --accent-ink:#fff; --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface)); /* Halo del fondo: el violeta y el magenta del logo neón. */ --halo-1:rgba(139,70,255,.26); --halo-2:rgba(201,48,224,.20); --halo-luz:rgba(139,70,255,.45); --halo-luz-2:rgba(201,48,224,.26); } /* --------------------------------------------------------------- Reset --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink-body); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } /* ============================================================================ TIPOGRAFÍA DE PESO MIXTO — la firma del sistema. Los titulares van en peso ligero y gris; sube a negro y bold. ========================================================================= */ h1, h2, h3, h4 { margin: 0; font-weight: 300; color: var(--ink-2); letter-spacing: -0.035em; line-height: 1.02; } h1 b, h2 b, h3 b, h4 b, .ink { font-weight: 700; color: var(--ink); } /* El hero lleva el color de marca en sus palabras enfatizadas */ .hero h1 b { color: var(--hero-bold); } .faint { color: var(--ink-3); } /* --------------------------------------------------------------- Layout --- */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: var(--section-y); position: relative; } .section--surface { background: var(--surface); } .section--tint { background: var(--bg-2); } /* Marcador de sección: numeral delgado + etiqueta de dos líneas */ .marker { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2.5rem; } .marker__num { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 200; line-height: .8; color: var(--accent); letter-spacing: -.06em; flex: none; } .marker__label { font-size: .82rem; line-height: 1.25; color: var(--ink-2); padding-top: .35rem; letter-spacing: -.005em; } .marker__label b { display: block; color: var(--accent); font-weight: 700; } .eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.25rem; } h2.title { font-size: clamp(1.9rem, 4.4vw, 3.4rem); max-width: 24ch; margin-bottom: 1.5rem; } h3.sub { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: .6rem; } .lead { font-size: clamp(1rem, 1.35vw, 1.12rem); color: var(--ink-body); max-width: 60ch; } .body { color: var(--ink-body); max-width: 66ch; } .small { font-size: .88rem; color: var(--ink-3); } /* ---------------------------------------------------------------- Nav --- */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--line); } .nav__in { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); } .nav__brand { display: flex; align-items: center; gap: .6rem; flex: none; } .nav__brand img { height: 50px; width: auto; display: block; } /* Figment usa solo el foco (ícono) */ html[data-brand="figment"] .nav__brand img { height: 46px; } .nav__links { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; } /* En pantallas angostas la barra se parte en dos renglones: arriba el logo y el idioma, abajo los enlaces, que se deslizan en horizontal. Antes iban en un solo renglón y el selector de idioma —pegado a la derecha— tapaba el último enlace, porque nada lo separaba de lo que pasaba por debajo. */ @media (max-width: 900px) { .nav__in { flex-wrap: wrap; gap: .2rem .8rem; min-height: 0; padding-block: .5rem; } .nav__brand { order: 1; } .nav__brand img { height: 40px; } html[data-brand="figment"] .nav__brand img { height: 38px; } .langtoggle { order: 2; margin-left: auto; } .nav__links { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: .35rem; gap: 1.2rem; /* El degradado avisa que hay más enlaces a la derecha. */ mask-image: linear-gradient(90deg, #000 94%, transparent); } .nav__links::-webkit-scrollbar { display: none; } } .nav__links a { font-size: .84rem; color: var(--ink-2); transition: color .2s; white-space: nowrap; } .nav__links a:hover { color: var(--ink); } .nav__links a[aria-current="page"] { color: var(--accent); font-weight: 600; } .ext::after { content: "↗"; font-size: .78em; margin-left: .2em; opacity: .55; } .langtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; margin-left: .35rem; background: var(--surface); } .langtoggle button { font: inherit; font-size: .7rem; letter-spacing: .08em; font-weight: 600; padding: .34rem .7rem; background: none; border: 0; color: var(--ink-3); cursor: pointer; transition: background .2s, color .2s; } .langtoggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } /* --------------------------------------------- Cambio de idioma ES / EN --- */ html[data-lang="es"] .en, html[data-lang="en"] .es { display: none !important; } /* --------------------------------------------------------------- Hero --- */ .hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem); position: relative; } /* Logo de marca al inicio del hero — centrado y grande, lo primero que se ve. Luego, al bajar, aparece la información. */ .herologo { display: flex; justify-content: center; margin: clamp(1rem, 3vw, 2.5rem) auto clamp(2.25rem, 5vw, 3.75rem); } .herologo img { height: clamp(150px, 24vw, 300px); width: auto; } /* Figment usa el foco (ícono cuadrado) */ html[data-brand="figment"] .herologo img { height: clamp(150px, 23vw, 290px); } /* Planet Revo (modo oscuro): logo neón recortado con transparencia */ /* 20% más grande, a petición del cliente (31-ago-2026). */ html[data-brand="revo"] .herologo img { height: clamp(204px, 32vw, 408px); } html[data-brand="revo"] .footer__logo { height: 74px; } /* Luz de color de la marca — a petición del cliente (31-ago-2026) va en el fondo de TODA la página, no en una sección: el sitio se lee como una sola superficie y no como franjas apiladas. Se pinta una sola vez, `fixed` al viewport y detrás de todo: al bajar, la luz se queda quieta y el contenido pasa por encima. Si se pintara en el `body` a secas, la mancha se estiraría a lo largo de cinco mil píxeles y dejaría de verse. `z-index:-1` la deja encima del color de fondo y debajo del contenido, sin tener que tocar el apilamiento de nada más. Los colores salen del logo de cada marca, no de `--accent`: el de Whatts es dorado y su acento es rojo-naranja; teñir con el acento lo dejaba sucio. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 46% at 34% 16%, var(--halo-1, transparent), transparent 66%), radial-gradient(54% 44% at 72% 52%, var(--halo-2, transparent), transparent 68%); } /* El resplandor pegado al contorno sí es del logo: `drop-shadow` sigue el recorte del PNG —no su caja— y por eso rodea la silueta. */ .hero--compacto .herologo img { filter: drop-shadow(0 0 22px var(--halo-luz, transparent)) drop-shadow(0 0 64px var(--halo-luz-2, transparent)); } /* Logo en el footer */ .footer__logo { height: 34px; width: auto; margin-bottom: 1.1rem; } .footer__logo--panel { background:#0b0b0d; border-radius:10px; padding:9px 13px; display:inline-block; } .footer__logo--panel img { height: 30px; width: auto; display:block; } /* Franja de micro-etiquetas superior, como en la referencia */ .hero h1 { font-size: clamp(2.4rem, 7.2vw, 5.6rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 2rem; max-width: 17ch; } /* ------------------------------------------------------------ Botones --- */ .btnrow { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; } .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.5rem; border-radius: 999px; font-size: .86rem; font-weight: 500; letter-spacing: -.01em; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: transform .18s, background .18s, border-color .18s, color .18s; } .btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); } .btn--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--solid:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); } /* -------------------------------------------------------------- Grids --- */ .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .split { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } /* -------------------------------------------------------------- Cards --- */ .card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2.1rem); transition: border-color .22s, transform .22s, box-shadow .22s; display: flex; flex-direction: column; gap: .35rem; overflow: hidden; } .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 36px -22px color-mix(in srgb, var(--accent) 55%, transparent); } .card__num { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; } .card h3 { font-size: 1.3rem; color: var(--ink); font-weight: 600; letter-spacing: -.03em; margin-bottom: .45rem; } .card p { color: var(--ink-body); font-size: .94rem; margin: 0; } .card__link { margin-top: auto; padding-top: 1.2rem; font-size: .82rem; color: var(--accent); font-weight: 600; } /* Tarjeta de marca */ .brandcard { padding: 0; } .brandcard__media { aspect-ratio: 16/10; } .brandcard__body { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .45rem; flex: 1; } .brandcard__name { font-size: 1.9rem; font-weight: 700; color: var(--ink); letter-spacing: -.04em; line-height: 1; } .brandcard__tag { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); } /* ------------------------------------------------- Bloques de servicio --- */ .svc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.6rem); margin-bottom: var(--gap); transition: border-color .22s; } .svc:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-2)); } .svc:nth-child(even) .svc__media { order: -1; } @media (max-width: 900px) { .svc { grid-template-columns: 1fr; } .svc:nth-child(even) .svc__media { order: 0; } } .svc__idx { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 1rem; } .svc h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); font-weight: 700; letter-spacing: -.04em; margin-bottom: 1rem; } /* ------------------------------------------------------- Lista de datos --- */ .facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); } .facts > div { background: var(--surface); padding: 1.5rem 1.6rem; } .facts dt { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; } .facts dd { margin: 0; font-size: 1.7rem; font-weight: 300; color: var(--ink); letter-spacing: -.045em; line-height: 1; } .facts dd small { display: block; font-size: .8rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-top: .45rem; } /* ------------------------------------------------------------- Tablas --- */ .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 460px; } th, td { text-align: left; padding: .85rem 1.2rem; border-bottom: 1px solid var(--line-2); } th { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; } td { color: var(--ink-body); } td:first-child { color: var(--ink); font-weight: 500; } tr:last-child td { border-bottom: 0; } /* -------------------------------------------------------------- Pills --- */ .chips { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { background: var(--bg-2); border-radius: 999px; padding: .5rem 1.1rem; font-size: .78rem; color: var(--ink-body); transition: background .2s, color .2s; } .chip:hover { background: var(--accent); color: var(--accent-ink); } .section--surface .chip { background: var(--bg); } /* ------------------------------------------------------ Lista de casos --- */ .cases { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .caseitem { background: var(--surface); padding: 1.4rem clamp(1.3rem, 2.4vw, 2rem); display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; align-items: baseline; transition: background .2s; } .caseitem:hover { background: var(--accent-soft); } .caseitem strong { font-size: 1.02rem; color: var(--ink); font-weight: 600; letter-spacing: -.02em; } .caseitem p { margin: 0; color: var(--ink-body); font-size: .93rem; } @media (max-width: 720px) { .caseitem { grid-template-columns: 1fr; gap: .3rem; } } /* ------------------------------------------ Placeholders de assets --- */ .ph { position: relative; width: 100%; border-radius: var(--radius-sm); border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--line)); background: linear-gradient(160deg, var(--accent-soft), var(--bg-2)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: 1.5rem; overflow: hidden; } .ph[data-ratio="16-9"] { aspect-ratio: 16/9; } .ph[data-ratio="4-3"] { aspect-ratio: 4/3; } .ph[data-ratio="1-1"] { aspect-ratio: 1/1; } .ph[data-ratio="3-4"] { aspect-ratio: 3/4; } .ph[data-ratio="21-9"] { aspect-ratio: 21/9; } .ph[data-ratio="16-10"] { aspect-ratio: 16/10; } .ph__tag { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: .3rem .7rem; border-radius: 999px; } .ph__label { font-size: .84rem; color: var(--ink-body); max-width: 34ch; line-height: 1.45; } .ph__spec { font-size: .68rem; color: var(--ink-3); letter-spacing: .04em; } /* Rejilla de logos */ .logogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .logogrid > div { background: var(--surface); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--ink-3); font-weight: 500; letter-spacing: -.01em; transition: background .2s, color .2s; text-align: center; padding: .5rem; } .logogrid > div:hover { background: var(--accent); color: var(--accent-ink); } /* ------------------------------------------------------------ Contacto --- */ .contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(2rem,5vw,4.5rem); } @media (max-width: 860px) { .contact { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; } .field label { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); } .field input, .field textarea, .field select { font: inherit; font-size: .94rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; width: 100%; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .field textarea { min-height: 130px; resize: vertical; } .contactlist { display: grid; gap: 1.5rem; } .contactlist dt { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; } .contactlist dd { margin: 0; font-size: 1.02rem; color: var(--ink); } /* --------------------------------------------------------------- CTA --- */ .cta { text-align: center; } .cta h2 { font-size: clamp(1.9rem, 5.5vw, 4rem); letter-spacing: -.045em; margin-bottom: 1.2rem; max-width: none; } .cta .lead { margin-inline: auto; } .cta .btnrow { justify-content: center; } /* ------------------------------------------------------------ Footer --- */ .footer { border-top: 1px solid var(--line); padding-block: 3.5rem 2.5rem; background: var(--surface); } .footer__grid { display: grid; grid-template-columns: 1.5fr repeat(auto-fit, minmax(140px, 1fr)); gap: 2.5rem; margin-bottom: 3rem; } .footer h4 { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; font-weight: 400; } .footer li { margin-bottom: .5rem; } .footer li a { color: var(--ink-body); font-size: .9rem; transition: color .2s; } .footer li a:hover { color: var(--ink); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.75rem; border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: .8rem; } /* ---------------------------------------------------------- Animación --- */ /* La animación de entrada sólo se arma si el JS llegó a correr: la clase `js` la pone site.js. Sin esto, un JS bloqueado o lento dejaba la página EN BLANCO —el contenido existía pero con opacity 0 y nadie lo encendía. */ html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } html.js [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* --------------------------------------------------------- Utilidades --- */ .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } .center { text-align: center; margin-inline: auto; } .divider { height: 1px; background: var(--line); border: 0; margin-block: 2.5rem; } .note { border-left: 2px solid var(--accent); padding: .5rem 0 .5rem 1.1rem; color: var(--ink-3); font-size: .86rem; max-width: 62ch; } /* ------------------------------- Logo de cada marca en su tarjeta -------- */ /* Figment es la marca paraguas: la portada muestra el logo de cada empresa para que el cliente entre a la que le interese. La placa va oscura porque los logos de Kuali y Planet Revo son blancos y de neón: sobre el lienzo claro del sitio desaparecen. */ /* Sin placa oscura: «quitarle a todos el fondo negro para que sea con el fondo de la página», Cristian, 26-ago-2026. El logo queda sobre el mismo fondo del sitio y la tarjeta entera se lee como un botón. */ .brandcard__media--logo { position: relative; aspect-ratio: 16/10; overflow: hidden; background: transparent; } /* El logo va absoluto a propósito: como hijo normal, un logo alto —el de Gorilla— estiraba la placa y las cuatro tarjetas quedaban de distinto alto, porque `aspect-ratio` cede cuando el contenido no cabe. */ /* El aire va de `padding` y no de `inset`: en un elemento absoluto el `max-width: 100%` se mide contra la placa entera, sin descontar el inset, y un logo ancho —el de Whatts— se salía por la derecha. Con `object-fit` el logo se ajusta dentro del recuadro que deja el padding. */ .brandcard__media--logo img { position: absolute; inset: 0; width: 100%; height: 100%; /* En porcentaje y no en rem: el aire crece con la tarjeta. Con las cuatro en fila, un relleno fijo de 2.6rem se comía la placa y los logos quedaban diminutos. */ padding: 9% 11%; object-fit: contain; transition: transform .35s cubic-bezier(.2,.7,.3,1); } /* Las cuatro marcas en una sola línea: así se ven de un vistazo y no hay que bajar para descubrir que faltan dos. */ #marcas .grid--2 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1900px; margin-inline: auto; } @media (max-width: 1080px) { #marcas .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { #marcas .grid--2 { grid-template-columns: 1fr; } } /* Botón de marca. El cliente pidió que los logos «parezcan BOTONES»: aro marcado, el color de la marca al pasar encima y el bloque entero levanta. */ #marcas .brandcard { border: 1px solid var(--line); border-radius: var(--radius); background: transparent; transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s; } #marcas .brandcard:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 26px 60px -30px rgba(0,0,0,.75); } #marcas .brandcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* El enlace de abajo se ve siempre: es la parte que dice «esto se puede tocar». */ #marcas .card__link { margin-top: auto; padding-top: .7rem; font-weight: 600; } /* Tarjeta compacta: con cuatro en fila, el nombre de 1.9rem y el relleno de 2rem las volvían torres. */ #marcas .brandcard__body { padding: clamp(1rem, 1.6vw, 1.35rem); gap: .3rem; } #marcas .brandcard__name { font-size: clamp(1.15rem, 1.7vw, 1.4rem); } #marcas .brandcard__body p { font-size: .875rem; line-height: 1.45; } #marcas .brandcard__tag { font-size: .62rem; } /* ------------------------------- Portada de Figment: video y titular ---- */ /* El cliente pidió ver el video antes que nada, y el titular a lo ancho. */ .herovideo { padding-block: clamp(1.2rem, 3vw, 2.2rem) 0; position: relative; } /* El cliente pidió el video 30% más chico. Se limita el ancho del bloque en vez de tocar el 16:9, para que no se deforme. */ .herovideo .videoband { max-width: 70%; margin-inline: auto; } @media (max-width: 760px) { .herovideo .videoband { max-width: 100%; } } .hero--texto { padding-block: clamp(2rem, 5vw, 3.25rem) clamp(2.25rem, 5vw, 3.5rem); text-align: center; } /* Sin el tope de 17ch el titular ocupa el ancho de la página, como se pidió. */ .hero--texto h1 { max-width: min(100%, 1900px); margin-inline: auto; margin-bottom: 1.1rem; } /* Medida larga a propósito: el párrafo baja de cuatro líneas a dos y la página deja de estirarse. */ .hero--texto .lead { max-width: min(100%, clamp(1040px, 58vw, 1500px)); margin-inline: auto; font-size: clamp(1rem, 1.25vw, 1.12rem); } .brandcard:hover .brandcard__media--logo img { transform: scale(1.05); } /* --------------------------------- Fotos que sustituyen marcadores ------ */ /* Planet Revo: el material del cliente llegó el 25-ago-2026 y reemplazó los recuadros que decían «aquí va un render». */ .banda, .foto, .modulo__foto { border-radius: var(--radius); overflow: hidden; background: var(--bg-2); } .banda, .foto { border: 1px solid var(--line); } .banda img, .foto img, .modulo__foto img { display: block; width: 100%; height: auto; } /* La banda del hero se recorta a lo apaisado; los planos y las láminas conservan su proporción, que recortarlos los vuelve ilegibles. */ .banda img { aspect-ratio: 21 / 9; object-fit: cover; } .modulo__foto img { aspect-ratio: 16 / 10; object-fit: cover; } /* Encabezado que sólo leen los buscadores y los lectores de pantalla. El titular visible se quitó a petición del cliente, pero una página sin

se queda sin encabezado de documento. */ .solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ================================================= Portada de Figment ==== */ /* El video es lo más grande de la página y va centrado. Debajo, una sola frase y los cuatro logos. Todo cabe en la primera pantalla. */ .portada { padding-block: clamp(1.2rem, 2.6vw, 2.4rem) clamp(2rem, 4vw, 3.2rem); } .portada .videoband { max-height: 52vh; width: min(100%, calc(52vh * 16 / 9)); margin-inline: auto; } .portada__dicho { margin: clamp(1.4rem, 2.8vw, 2.2rem) auto clamp(1.6rem, 3vw, 2.6rem); max-width: 62ch; text-align: center; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink-body); } .portada__dicho b { color: var(--ink); font-weight: 700; } /* ------------------------------------------- Los cuatro logos ----------- */ .marcas { display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 5vw, 5rem); flex-wrap: wrap; } .marca { position: relative; display: block; flex: 0 1 auto; padding: .9rem; border-radius: var(--radius-sm); } .marca__logo { display: block; } /* Caja óptica común: los cuatro logos tienen proporciones muy distintas —Kuali es 2.6:1 y Gorilla casi cuadrado—. Igualarlos sólo por altura dejaba a Kuali del triple de ancho que Gorilla y la fila salía desbalanceada. */ .marca__logo img { display: block; height: auto; width: auto; max-height: clamp(50px, 6vw, 88px); max-width: clamp(120px, 13vw, 190px); object-fit: contain; opacity: .82; transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.3,1); } .marca:hover .marca__logo img, .marca:focus-visible .marca__logo img { opacity: 1; transform: scale(1.22); } .marca:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* La ficha se abre ARRIBA del logo: la fila vive al pie de la primera pantalla y hacia abajo la tarjeta se salía de la vista. */ .marca__ficha { position: absolute; bottom: calc(100% + .7rem); left: 50%; translate: -50% 0; z-index: 20; width: min(300px, 72vw); display: grid; gap: .3rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 26px 60px -26px rgba(0,0,0,.7); text-align: left; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .22s, transform .22s; } /* El piquito que la amarra al logo, apuntando hacia abajo. */ .marca__ficha::before { content: ""; position: absolute; bottom: -6px; left: 50%; margin-left: -6px; width: 11px; height: 11px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); } .marca:hover .marca__ficha, .marca:focus-visible .marca__ficha, .marca:focus-within .marca__ficha { opacity: 1; pointer-events: auto; transform: translateY(0); } .marca__tag { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .marca__nombre { font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; } .marca__desc { font-size: .84rem; line-height: 1.45; color: var(--ink-body); } .marca__ir { margin-top: .35rem; font-size: .78rem; font-weight: 600; color: var(--accent); } /* La primera y la última se salen del lienzo si se centran; se recuestan. */ .marcas .marca:first-child .marca__ficha { left: 0; translate: 0 0; } .marcas .marca:first-child .marca__ficha::before { left: clamp(24px, 12%, 60px); } .marcas .marca:last-child .marca__ficha { left: auto; right: 0; translate: 0 0; } .marcas .marca:last-child .marca__ficha::before { left: auto; right: clamp(24px, 12%, 60px); } /* Sin «encima» —celular y tableta— la ficha no se puede abrir al pasar. Ahí se muestra siempre, debajo de su logo, y los logos se apilan de dos en dos. */ @media (hover: none), (max-width: 900px) { .marcas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 4vw, 2rem); align-items: start; } .marca { padding: 0; } .marca__logo { display: grid; place-items: center; min-height: 76px; } .marca__ficha { position: static; translate: none; transform: none; opacity: 1; pointer-events: auto; width: 100%; margin-top: .7rem; background: transparent; border: 0; box-shadow: none; padding: 0; text-align: center; } .marca__ficha::before { display: none; } } @media (max-width: 520px) { .marcas { grid-template-columns: 1fr; } } /* --------------------------------------------------- Una sola superficie --- Va al FINAL a propósito: `.section--surface` y `.footer` se pintan más arriba en esta misma hoja, y una regla de igual peso sólo gana si va después. Quitarlas allá habría dejado el hueco a la vista; aquí se anulan en un bloque que se lee de un vistazo. */ .section--surface { background: transparent; } .footer { background: transparent; } .section--surface .chip { background: transparent; }