/* =========================================================================
Florentino · Elexa — landing
Traducción del diseño Figma "Landing florentino"
file: 8QdHTPEoH88bqieJTrtq45
· Desktop → frame "Socios" (node 80:493, 1440 × 7198)
· Mobile → frame "Mobile socios" (node 183:352, 390 × 7336)
========================================================================= */
/* -------------------------------------------------------------------------
Tipografías de marca
· Duna Slab — archivos propios en Public/Fonts/ (OTF, ~25 KB cada uno).
El diseño solo usa el corte Black; los otros tres quedan declarados por si
hacen falta, y el navegador no los descarga mientras nadie los pida.
· Henderson Sans — se sirve desde Typekit; el va en el de
index.html. La familia que expone el kit se llama `henderson-sans-basic`.
------------------------------------------------------------------------- */
@font-face{
font-family:"Duna Slab";
src:url("../../Public/Fonts/Dunaslab-Black.otf") format("opentype");
font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
font-family:"Duna Slab";
src:url("../../Public/Fonts/Dunaslab-Regular.otf") format("opentype");
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:"Duna Slab";
src:url("../../Public/Fonts/Dunaslab-Italic.otf") format("opentype");
font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
font-family:"Duna Slab Unicase";
src:url("../../Public/Fonts/Dunaslab-Unicase.otf") format("opentype");
font-weight:400;font-style:normal;font-display:swap;
}
/* ============================== TOKENS ==============================
Valores 1:1 de las variables del archivo de Figma (get_variable_defs
sobre el nodo 80:493).
==================================================================== */
:root{
/* Paleta */
--color-primary: #f70065; /* Atardecer envolvente/3 */
/* Este no viene de Figma: es el hover del botón rosa, pedido por el cliente. */
--color-primary-hover: #9d0040;
--color-on-primary: #fffaf9; /* color/on-primary */
--color-secondary: #330400; /* Identidad hecha un día a la vez/3 */
--color-surface-raised: #fffaf9;
--brisa-1: #fffaf9; /* Brisa que acaricia/1 */
--brisa-3: #ffe7e1; /* Brisa que acaricia/3 */
--brisa-4: #ffc3b4; /* Brisa que acaricia/4 */
--aura-3: #ffa9d6; /* Aura tropical/3 */
--cielo-3: #1e82f9; /* Cielo de mañana/3 */
--calorcito-3: #f45a31; /* Calorcito de tarde/3 */
--calorcito-5: #702511; /* Calorcito de tarde/5 */
--ink-300: #330400; /* palette/ink/300 */
/* Espaciado */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
--stack-md: 24px;
--stack-lg: 48px;
--section: 96px;
/* Radios */
--radius-lg: 16px;
--radius-full: 9999px;
--radius-button: 99999px;
/* Tipografía — escala de la librería "Elexa — Brand tokens" (QzC3DsPm7xIu…) */
--font-display: "Duna Slab", Rockwell, "Roboto Slab", Georgia, serif;
--font-sans: "henderson-sans-basic", system-ui, -apple-system, "Segoe UI", sans-serif;
--fs-xs: 12px;
--fs-sm: 14px;
--fs-md: 16px; /* Body regular — 14 en mobile */
--fs-xl: 20px; /* Header 4 — 16 en mobile */
--fs-2xl: 24px; /* Header 3 mobile */
--fs-3xl: 30px; /* Header 2 mobile */
--fs-4xl: 36px; /* Header 3 desktop */
--fs-5xl: 48px; /* Header 1 mobile */
--fs-6xl: 60px; /* Header 1 desktop · Banner mobile */
--fs-7xl: 96px; /* Banner desktop */
/* Fuera de la escala: el diseño les da un cuerpo propio */
--fs-step: clamp(5.625rem, 12.5vw, 11.25rem); /* numerales: 90 → 180 */
--fs-invest: clamp(3rem, 6.18vw, 5.5625rem); /* «momento a momento»: 48 → 89 */
--lh-body: 24px;
/* Layout */
--container: 1200px;
--gutter: 24px;
/* Navbar fija. El alto y el aire de arriba salen de acá porque el contenido
de cada página tiene que compensarlos: la barra ya no ocupa lugar. */
--navbar-top: 36px;
--navbar-h: 80px;
/* Movimiento — curva y duración tomadas del prototipo de Figma */
--dur-panel: 300ms;
--ease-panel: cubic-bezier(.73, 0, .22, 1);
}
/* ============================== BASE ============================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
margin:0;
background:var(--brisa-3);
color:var(--color-secondary);
font-family:var(--font-sans);
font-size:var(--fs-md);
line-height:var(--lh-body);
font-weight:400;
/* `clip` en vez de `hidden`: no crea contenedor de scroll, así el
`position:sticky` del scroll-stack sigue anclándose al viewport */
overflow-x:hidden;
overflow-x:clip;
}
h1,h2,h3,p,figure,ul,ol,dl{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
strong{font-weight:700}
hr{border:0}
/* Duna Slab Black. El cuerpo y el interlineado los pone cada token —Banner va
a 0.94 y los Header 1/2/3 a un valor fijo en px—, así que acá no se fijan. */
.display{
font-family:var(--font-display);
font-weight:900;
font-style:normal;
letter-spacing:0;
text-transform:uppercase;
}
/* ===== TOKENS DE TEXTO =====================================================
Un bloque por estilo de la librería, con todos sus consumidores listados.
La tipografía se define SOLO acá; las reglas de cada sección se ocupan de
color, caja y posición. Si un texto de la página no aparece en este bloque,
es que no tiene estilo asignado.
=========================================================================== */
/* Banner — Duna Slab Black · 96/0.94 (60 en mobile) */
.hero__kicker,
.about__title,
.dev__title,
.figures__value{
font-family:var(--font-display);font-weight:900;
font-size:var(--fs-7xl);line-height:.94;
text-transform:uppercase;
}
/* Header 1 — Duna Slab Black · 60/55 (48/55 en mobile) */
.partners__title,
.legal__title{
font-family:var(--font-display);font-weight:900;
font-size:var(--fs-6xl);line-height:55px;
text-transform:uppercase;
}
/* Header 4 — Henderson Sans SemiBold · 20/24 (16/24 en mobile) */
.hero__tagline,
.figures__label,
.about__year,
.fact__title,
.step__title,
.closing__lead,
.legal__lead,
.legal__doc h2{
font-family:var(--font-sans);font-weight:600;
font-size:var(--fs-xl);line-height:24px;
text-transform:uppercase;
}
/* Body regular — Henderson Sans Regular · 16/24 (14/20 en mobile) */
.hero__lede,
.fact__text,
.invest__text,
.step__text,
.closing__sub,
.legal__doc p,
.legal__doc li,
.footer__nav li a,
.footer__note{
font-family:var(--font-sans);font-weight:400;
font-size:var(--fs-md);line-height:var(--lh-body);
}
/* Body bold — Henderson Sans Bold · 16/24 (12/18 en mobile: «Body bold sm») */
.event__item{
font-family:var(--font-sans);font-weight:700;
font-size:var(--fs-md);line-height:var(--lh-body);
}
/* Text button — Henderson Sans Bold · 14/24 */
.btn,
.nav__item,
.legal__crumbs,
.footer__navTitle{
font-family:var(--font-sans);font-weight:700;
font-size:var(--fs-sm);line-height:24px;
text-transform:uppercase;
}
/* Note — el token de la librería lo define en SemiBold (600), pero acá va en
Bold por pedido. Conviene dejarlo explícito y no confiar en que el 600 caiga
en 700 solo: hoy lo hace porque al kit de Typekit le falta el corte SemiBold,
y el día que se lo agreguen esta barra se aligeraría sola. */
.footer__legal,
.legal__updated{
font-family:var(--font-sans);font-weight:700;
font-size:var(--fs-xs);line-height:1;
text-transform:uppercase;
}
/* Fuera de la escala: el diseño les da un cuerpo propio (180px y 89px), pero
la familia y el peso siguen siendo los del display. */
.step__num,
.invest__title{
font-family:var(--font-display);font-weight:900;line-height:.94;
text-transform:uppercase;
}
.step__num{font-size:calc(var(--fs-step) * var(--agenda-step-scale, 1))}
.invest__title{font-size:var(--fs-invest)}
.container{
width:min(var(--container), 100% - var(--gutter) * 2);
margin-inline:auto;
}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
position:absolute;left:-9999px;top:0;z-index:100;
background:var(--color-secondary);color:var(--brisa-3);
padding:12px 24px;border-radius:0 0 var(--radius-lg) 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--cielo-3);outline-offset:3px}
/* Destinos de los enlaces internos. Con la barra fija encima, el navegador
dejaría el título de la sección tapado: se le reserva su alto más un respiro. */
.hero,
#main,
.about,
.agenda,
.dev,
.closing{scroll-margin-top:calc(var(--navbar-top) + var(--navbar-h) + var(--space-md))}
/* ============================== BOTONES ============================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;
gap:var(--space-xs);
padding:var(--space-sm) var(--space-lg);
border-radius:var(--radius-button);
white-space:nowrap;
transition:transform .18s ease, filter .18s ease, background-color .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
/* El rosa se apaga al pasar por encima. El brillo compartido que tenían antes
los dos botones se quedó sólo con el oscuro: sobre este color aclararía el
#9d0040 y ya no sería el que pidió el cliente. */
.btn--primary{background:var(--color-primary);color:var(--color-on-primary)}
.btn--primary:hover{background:var(--color-primary-hover)}
.btn--ink{background:var(--ink-300);color:var(--aura-3)}
.btn--ink:hover{filter:brightness(1.06)}
/* ============================== MARCAS ==============================
Los SVG de Public/icons ya vienen en el rosa del footer (#FFA9D6). Para el
navbar, el hero y el badge —que van en tinta— se usan las variantes
elexa-logo-ink.svg / florentino-hero.svg (mismo trazado, fill #330400).
Todos se sirven como con alto automático: nunca se deforman.
==================================================================== */
.shapes{position:absolute;width:0;height:0;overflow:hidden}
.logo,.wordmark{display:block;height:auto}
.logo--nav{width:129px} /* 129 × 32 */
.logo--footer{width:298px} /* 298 × 74 */
.logo--badge{width:225.5px} /* 225.5 × 56 */
.wordmark--hero{width:100%} /* 508 × 91 dentro del bloque de 508 */
.wordmark--footer{width:298px} /* 298 × 53 */
.social__icon{display:block;width:24px;height:24px}
.social a{display:block;transition:opacity .18s ease}
.social a:hover{opacity:.7}
/* Viñeta "Modo_de_aislamiento" (63×26) — SVG exportado, con su color de origen */
.fact__bullet{
display:block;
width:63px;height:26px;flex:none;margin-top:-1px;
background-repeat:no-repeat;background-position:center;background-size:contain;
}
.fact__bullet--blue{background-image:url("../../Public/vectors/bullet-blue.svg")}
.fact__bullet--orange{background-image:url("../../Public/vectors/bullet-orange.svg")}
/* ============================== HERO ============================== */
.hero{
position:relative;
isolation:isolate;
background:var(--brisa-3);
}
.hero__bg{
position:absolute;inset:0;z-index:0;
display:block;
}
.hero__bg img{
width:100%;height:100%;
object-fit:cover;object-position:72% center;
}
.hero__inner{
position:relative;z-index:2;
/* La barra salió del flujo, así que el aire que ocupaba se pone acá: el copy
del hero queda exactamente donde estaba en el frame. */
padding-top:calc(var(--navbar-top) + var(--navbar-h));
padding-bottom:192px;
}
/* ---- Navbar ----
Fija arriba en las cuatro páginas: en la landing flota sobre la foto del hero
y en los legales sobre el rosa. La píldora lleva el fondo claro del diseño
para que se lea siempre, pase por debajo lo que pase.
La franja ocupa todo el ancho pero NO recibe clics: sin `pointer-events`,
sus ~116px de aire transparente dejarían muerta una banda entera sobre el
contenido. Solo la píldora vuelve a escuchar. */
.navbar{
position:fixed;
top:0;left:0;right:0;
z-index:50; /* por debajo del salto al contenido, que va a 100 */
padding-top:var(--navbar-top);
pointer-events:none;
}
.nav{
pointer-events:auto;
display:flex;align-items:center;justify-content:space-between;
gap:var(--space-md);
height:var(--navbar-h);
padding:var(--space-md) var(--stack-lg);
border-radius:var(--radius-full);
background:var(--color-surface-raised);
/* Sombra corta: la píldora pasa por encima de la foto, del bloque oscuro y
del rosa, y sin ella se lee como un recorte pegado sobre los tres. */
box-shadow:0 8px 24px rgba(51, 4, 0, .10);
}
.nav__logo{display:block}
.nav__links{display:flex;align-items:center;gap:var(--space-2xs)}
.nav__item{
display:inline-flex;align-items:center;
padding:var(--space-xs);
color:var(--color-secondary);
}
.nav__item:hover{color:var(--color-primary)}
.nav__cta-short{display:none}
/* ---- Copy del hero ---- */
.hero__copy{
width:508px;max-width:100%;
margin-top:134px;
display:flex;flex-direction:column;align-items:center;
gap:var(--space-md);
}
/* Sólo el frame móvil agrupa título + bajada + lede. Con `display:contents` la
caja desaparece del layout y el hero de escritorio no se entera de que está. */
.hero__intro{display:contents}
.hero__title{display:flex;flex-direction:column;gap:var(--space-xs);width:100%}
/* «conocé a» va siempre en una línea. --kicker-fit lo calcula main.js:
con Duna Slab el texto entra a 96px y vale 1; con la fuente sustituta
(más ancha) se reduce lo justo para que no se parta. */
.hero__kicker{
font-size:calc(var(--fs-7xl) * var(--kicker-fit, 1));
color:var(--color-secondary);
white-space:nowrap;
}
.hero__tagline{
width:100%;text-align:center;
color:var(--color-primary);
}
.hero__lede{width:100%}
/* Datos del evento: dos filas de dos columnas, ancho fijo 448 en desktop */
.event{
width:448px;max-width:100%;
display:grid;grid-template-columns:1fr 1fr;
gap:var(--space-xs);
}
.event__item{
display:flex;align-items:center;gap:var(--space-xs);
color:var(--color-primary);
}
.event__icon{width:24px;height:24px;flex:none}
.hero__cta{align-self:center}
/* ============================== CIFRAS ============================== */
.figures{padding-top:168px}
/* Acordeón: el primer panel viene abierto (es el estado del diseño) y al
apuntar cualquier otro, ese se expande y los demás ceden espacio.
Se anima `flex-grow` sobre `flex-basis:0`, así el reparto es proporcional.
2.486 sale de las medidas del diseño: 543.753 / 218.749. */
.figures__window{
aspect-ratio:1200 / 775.833;
clip-path:url(#clip-figures);
overflow:hidden;
}
.figures__strip{
display:flex;
height:100%;
}
.figures__panel{
position:relative;overflow:hidden;margin:0;
flex:1 1 0;min-width:0;
container-type:inline-size;
transition:flex-grow var(--dur-panel) var(--ease-panel);
}
.figures__panel--lead{flex-grow:2.486}
.figures__strip:hover .figures__panel--lead,
.figures__strip:focus-within .figures__panel--lead{flex-grow:1}
.figures__strip .figures__panel:hover,
.figures__strip .figures__panel:focus-within{flex-grow:2.486}
.figures__panel img{
width:100%;height:100%;object-fit:cover;
object-position:var(--focus, center);
}
/* La cifra de cada panel sólo se ve cuando ese panel está abierto */
.figures__stat{
position:absolute;top:12.63%;left:50%;transform:translateX(-50%);
z-index:2;
width:78.2%;
display:flex;flex-direction:column;gap:var(--space-2xs);
text-align:center;color:var(--brisa-3);
opacity:0;
transition:opacity var(--dur-panel) var(--ease-panel);
}
.figures__panel--lead .figures__stat{opacity:1}
.figures__strip:hover .figures__panel--lead .figures__stat,
.figures__strip:focus-within .figures__panel--lead .figures__stat{opacity:0}
.figures__strip .figures__panel:hover .figures__stat,
.figures__strip .figures__panel:focus-within .figures__stat{opacity:1}
/* El foco por teclado necesita marca visible propia */
.figures__panel:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--cielo-3)}
/* la cifra se mide contra el ancho de su propio panel: encoge cuando el panel
está en reposo y llega a los 96px del diseño cuando el acordeón lo abre */
.figures__value{font-size:clamp(2rem, 17.6cqw, 6rem)}
/* el interlineado va relativo, no en los 24px del token: la cifra encoge con
el panel y un valor fijo la descuadraría en reposo */
.figures__label{font-size:clamp(.75rem, 3.7cqw, 1.25rem);line-height:1.2}
/* Los renders van sin velo ni degradado: la imagen se muestra tal cual. */
/* ============================== SOBRE FLOREN ============================== */
.about{background:var(--brisa-3)}
.about__grid{
display:grid;
grid-template-columns:602px 1fr;
padding-bottom:112px; /* 975 − 863 (base del bloque derecho) */
}
.about__left{position:relative;padding-top:178px}
/* "20 — sobre floren — 26": las cifras flanquean el título alineadas a la
primera línea (en el diseño quedan 21px por debajo del tope del título). */
.about__head{
position:relative;z-index:2;
width:461px;max-width:100%;
margin-left:26px;
}
.about__title{
text-align:center;
color:var(--color-secondary);
}
.about__year{
position:absolute;top:21px;
color:var(--cielo-3);
}
.about__year:first-child{left:6px}
.about__year:last-child{right:13px}
.blob{
position:relative;z-index:1;
width:519.885px;max-width:100%;
aspect-ratio:519.885 / 527;
margin-top:-69px;
clip-path:url(#clip-blob);
}
.blob img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.about__right{padding-top:178px;display:flex;flex-direction:column}
.facts{display:flex;flex-direction:column;gap:79px}
.fact{display:flex;align-items:flex-start;gap:var(--space-lg)}
.fact__body{
display:flex;flex-direction:column;gap:var(--space-2xs);
flex:1 1 auto;min-width:0;max-width:484px;
}
/* El "+" de «+50mil millones» va en Henderson Black en el diseño; el kit de
Typekit no trae ese corte, así que el navegador resuelve a Bold. */
.fact__plus{font-weight:900}
.about__cta{align-self:center;margin-top:79px}
/* ============================== MOMENTO A MOMENTO ============================== */
.agenda{
background:var(--brisa-3);
padding-top:48px;
padding-bottom:96px;
/* el recorte horizontal de la forma que sale del lienzo lo hace `body`:
cualquier `overflow` propio acá se convertiría en el scrollport del
`position:sticky` del scroll-stack y lo dejaría sin anclar */
}
.agenda__grid{
display:grid;
grid-template-columns:590px 1fr;
align-items:start;
}
/* min-width:0 — si no, el mínimo automático del grid crece hasta el ancho de la
figura y la columna 1fr revienta el lienzo */
.agenda__aside{grid-column:2;grid-row:1;min-width:0}
.agenda__viewport{grid-column:1;grid-row:1 / span 2;min-width:0}
.agenda__cta{grid-column:2;grid-row:2;justify-self:start;margin-top:var(--stack-md)}
/* --- Scroll-stack de los pasos ---------------------------------------------
Sin la clase `agenda--pinned` (mobile, sin JS o con reduced-motion) esto no
existe: los siete pasos van en flujo normal. Con ella, `.agenda__pin` se
ancla, la ventana muestra tres pasos y `--agenda-shift` —que calcula main.js
contra el scroll de la página— desliza el listado 1:1 hasta el último. */
.agenda--pinned .agenda__track{height:var(--agenda-track)}
.agenda--pinned .agenda__pin{position:sticky;top:var(--agenda-pin-top, 0px)}
.agenda--pinned .agenda__viewport{
height:var(--agenda-window);
overflow:hidden;
/* Si el pin es más alto que la pantalla queda anclado por su base, así que su
tope cae fuera de cuadro. La ventana se baja lo mismo que ese sobrante para
seguir dentro de la franja visible; `top` y no `margin` para no alterar la
altura del pin, que es justo lo que se está midiendo. */
position:relative;
top:var(--agenda-steps-top, 0px);
/* los pasos que entran y salen se desvanecen en los bordes: cortarlos en seco
mientras se mueven se lee como un error de maquetación */
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
mask-image:linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.agenda--pinned .agenda__steps{
transform:translate3d(0, calc(var(--agenda-shift, 0px) * -1), 0);
will-change:transform;
}
/* La figura no tiene un tamaño propio: lo define el tramo que ocupa. En el
diseño arranca en x=710 —la misma margen donde empieza «momento a momento»—
y termina en 1711 sobre un lienzo de 1440: cubre los 730px que van de esa
margen al filo de la pantalla, más 271 de sangría. De ahí 1001/730 = 1.3712,
la proporción que se mantiene en cualquier resolución. */
.agenda__shape{
/* del borde derecho de la columna al filo de la pantalla */
--gap-right:calc((100vw - min(var(--container), 100vw - var(--gutter) * 2)) / 2);
/* 100% es el ancho de la columna, así que el tramo arranca en la margen del título */
--span:calc((100% + var(--gap-right)) * 1.3712);
/* El tramo manda siempre: la figura llega al filo derecho en toda pantalla.
Cuando la columna no entra a lo alto no se la encoge — es ella la que se
sale por arriba, ver el anclaje de `.agenda__pin`. */
width:var(--span);
/* el alto sale del ancho, que es la dirección en la que `aspect-ratio` sí
manda sobre una caja de bloque */
aspect-ratio:1001 / 492;
height:auto;
max-width:none;
margin-left:0; /* borde izquierdo pegado a la margen del título */
background:url("../../Public/vectors/agenda-shape.svg") no-repeat center;
background-size:100% 100%;
}
/* 88px es la separación del diseño; en pantallas bajas cede para que la figura
se quede con más alto */
.invest{margin-top:clamp(24px, 8vh, 88px);width:610px;max-width:100%}
.invest__title{color:var(--color-secondary)}
.invest__text{margin-top:var(--space-xs)}
.agenda__steps{display:flex;flex-direction:column;gap:var(--space-xl);width:387px;max-width:100%}
.step{display:flex;flex-direction:column;gap:var(--space-2xs)}
/* --agenda-step-scale lo baja main.js cuando los tres pasos no entran en la
altura de pantalla; en monitores altos se queda en 1 y el numeral va a los
180px del diseño. */
.step__num{color:var(--color-secondary)}
/* ====================== LOSA OSCURA (quién lo desarrolla) ======================
El cuerpo oscuro del diseño ("Rectangle 5") entra en diagonal: baja hacia la
izquierda. Abajo va recto, porque ahí lo tapa el bloque rosa de marcas
aliadas. Se resuelve con clip-path para que la pendiente escale con el ancho. */
.dark{
--slope:clamp(24px, 5.5vw, 90px);
position:relative;
background:var(--ink-300);
color:var(--brisa-3);
margin-top:calc(var(--slope) * -1);
padding-top:calc(var(--slope) + 84px);
padding-bottom:82px; /* hasta el filo del bloque rosa (4956 − 4874) */
clip-path:polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%);
}
/* ============================== QUIÉN LO DESARROLLA ============================== */
.dev__title{
text-align:center;
color:var(--brisa-3);
}
.dev__grid{
display:grid;
grid-template-columns:571px 1fr;
gap:39px;
margin-top:63px;
align-items:start;
}
.facts--onDark{gap:var(--space-lg)}
.facts--onDark .fact__title,
.facts--onDark .fact__text{color:var(--brisa-3)}
/* La foto va 590 × 554 (el recorte del diseño); el badge cuelga centrado
41px por debajo de su borde inferior. */
.dev__card{position:relative;width:590px;max-width:100%;margin-bottom:41px}
.dev__photo{
width:100%;aspect-ratio:590 / 554;object-fit:cover;object-position:center 30%;
border-radius:56px;
}
.dev__badge{
position:absolute;left:50%;bottom:-41px;transform:translateX(-50%);
background:var(--brisa-3);
border-radius:var(--radius-lg);
padding:var(--space-sm) var(--space-lg);
}
/* ============================== MARCAS ALIADAS ==============================
Bloque rosa a sangre. Las dos franjas de cruces van centradas sobre el filo
superior e inferior —mitad dentro del rosa, mitad fuera—, por eso son hijas
posicionadas de la sección y no hermanas: así se montan sobre lo que haya
arriba (la losa oscura) y abajo (el cierre claro). */
.partners{
position:relative;
background:var(--color-primary);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:var(--space-xl);
padding:var(--space-3xl) 0; /* el desfile va a sangre; el título pone su propio margen */
}
.partners__title{
padding-inline:var(--gutter);
text-align:center;color:var(--brisa-1);
}
/* ---------------------------- DESFILE DE MARCAS ----------------------------
Dos grupos idénticos en un carril que se corre -50%: al terminar, el segundo
queda donde arrancó el primero, así que el bucle no tiene costura. El
`padding-right` de cada grupo hace que su ancho incluya el hueco que lo
separa del siguiente — sin eso, el -50% cae medio hueco corrido y se nota el
salto en cada vuelta. */
.partners__viewport{
width:100%;
overflow:hidden;
/* los logos se desvanecen en los extremos en vez de aparecer de golpe */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 var(--marquee-fade), #000 calc(100% - var(--marquee-fade)), transparent 100%);
--marquee-fade:clamp(24px, 8vw, 140px);
}
.marquee{
display:flex;
width:max-content;
/* main.js fija la duración a partir del ancho real para que la velocidad sea
la misma en toda pantalla; este valor es solo el respaldo sin JS. */
animation:marquee var(--marquee-duration, 32s) linear infinite;
will-change:transform;
}
/* Se detiene con el cursor encima —en cualquier punto de la tira, no solo sobre
el logo, para que moverse entre marcas no lo haga arrancar y parar— y también
con el foco de teclado dentro. */
.partners__viewport:hover .marquee,
.partners__viewport:focus-within .marquee{animation-play-state:paused}
/* Se corre exactamente el ancho de un grupo. Va en píxeles y no en % porque el
% se mide contra el carril entero, y el carril lleva tantas copias como haga
falta para cubrir la pantalla — con dos fijas, en monitores anchos se abría
un hueco al final de cada vuelta. main.js pone el valor; el 50% de respaldo
es correcto para el caso de dos copias, que es como sale del markup. */
@keyframes marquee{
from{transform:translate3d(0, 0, 0)}
to{transform:translate3d(calc(var(--marquee-step, 50%) * -1), 0, 0)}
}
.marquee__group{
display:flex;align-items:center;flex:none;
gap:var(--marquee-gap, 64px);
padding-right:var(--marquee-gap, 64px);
}
/* ------------------------------ FRANJA DE CRUCES ------------------------------ */
.pattern{
position:absolute;left:0;right:0;z-index:3;
height:63.49px;
background:url("../../Public/vectors/pattern-cross.svg") repeat-x left top;
background-size:66.48px 63.49px;
pointer-events:none;
}
.pattern--top{top:0;transform:translateY(-50%)}
.pattern--bottom{bottom:0;transform:translateY(50%)}
/* Cada logo conserva la caja y el encuadre del diseño: la caja fija el tamaño
y la imagen se posiciona dentro con los porcentajes exportados de Figma. */
.partners__item{
position:relative;overflow:hidden;flex:none;
}
.partners__item img{position:absolute;max-width:none}
.partners__item--op14{width:259px;height:111px}
.partners__item--op14 img{left:2.17%;top:0;width:95.67%;height:100%}
.partners__item--avila{width:355px;height:111px}
.partners__item--avila img{left:-7.04%;top:-47.32%;width:114.08%;height:194.64%}
.partners__item--wefilm{width:184px;height:111px}
.partners__item--wefilm img{left:-17.39%;top:-63.96%;width:137.5%;height:227.93%}
.partners__item--khaos{width:207px;height:75px}
.partners__item--khaos img{left:1.23%;top:0;width:97.54%;height:100%}
/* El PNG trae un margen transparente enorme: el arte mide 2533 x 456 dentro de
un lienzo de 2846 x 1600. Se recorta con el mismo encuadre por porcentajes
que usan los de Figma, calculado sobre esas medidas, para que el logo llene
su caja en vez de quedar diminuto en medio del vacio. */
.partners__item--ternario{width:356px;height:64px}
.partners__item--ternario img{left:-6.1982%;top:-125.6579%;width:112.3569%;height:350.8772%}
/* Lockup apilado (símbolo arriba, palabra abajo) y no cuadrado como los demás:
el arte mide 3018 x 2394 dentro de un lienzo de 3508 x 2481, así que se
recorta el margen transparente con el mismo encuadre por porcentajes. Va a
los 111 px de la fila, pero su caja sale angosta (140) porque es vertical. */
.partners__item--alta{width:140px;height:111px}
.partners__item--alta img{left:-8.118%;top:-1.0443%;width:116.2359%;height:103.6341%}
/* Este no viene de Figma y, a diferencia de los otros cuatro, el arte ocupa
toda la imagen (trae su propio fondo), así que va sin encuadre y más bajo:
un bloque macizo de 111px pesaría mucho más que un logo blanco calado. */
.partners__item--javier{width:335px;height:78px}
.partners__item--javier img{left:0;top:0;width:100%;height:100%}
/* ============================== CIERRE ============================== */
.closing{
position:relative;
background:var(--brisa-3);
overflow:hidden;
padding-top:215px; /* 5497 − 5282 (base del bloque rosa) */
}
/* "FLORENTINO" en vertical, saliendo por el borde derecho */
.closing__mark{
position:absolute;left:100%;top:735px;z-index:0;
width:1342px;height:240px;
transform:translate(-50%,-50%) rotate(90deg);
background:url("../../Public/vectors/florentino-vertical.svg") no-repeat center;
background-size:100% 100%;
pointer-events:none;
}
.closing__copy{position:relative;z-index:2;text-align:center}
.closing__lead{
max-width:629px;margin-inline:auto;
color:var(--color-secondary);
}
/* el diseño aplica `uppercase` a todo el párrafo, también a la bajada */
.closing__sub{
max-width:629px;margin-inline:auto;
text-transform:uppercase;
color:var(--color-secondary);
}
/* El render final va a sangre y el botón se apoya sobre su base */
.closing__stage{position:relative;z-index:1;margin-top:-37px}
.closing__building{
width:118.6%;max-width:none;
margin-left:50%;
transform:translateX(-50%);
}
.closing__cta{
position:absolute;z-index:2;
left:50%;transform:translateX(-50%);
bottom:6%;
width:320px;padding:var(--space-lg) var(--space-xl);
}
.closing__cta:hover{transform:translateX(-50%) translateY(-1px)}
/* ============================== FOOTER ============================== */
.footer{background:var(--ink-300)}
.footer__main{
position:relative;
overflow:hidden;
padding:var(--section) var(--section) var(--stack-lg);
}
.footer__top{
position:relative;z-index:1;
display:flex;align-items:stretch;gap:94px;
}
.footer__brand{
width:298px;min-height:192px;
display:flex;flex-direction:column;justify-content:space-between;
}
.footer__rule{width:298px;max-width:100%;height:1px;background:var(--color-primary);margin:0}
.footer__nav{width:256px;display:flex;flex-direction:column;gap:var(--space-xs)}
.footer__navTitle{
padding:var(--space-2xs) var(--space-lg);
color:var(--color-primary);
}
.footer__nav li a{
display:block;
padding:var(--space-2xs) var(--space-lg);
color:var(--aura-3);
}
.footer__nav li a:hover{color:var(--color-on-primary)}
.footer__contact{
width:374px;
display:flex;flex-direction:column;justify-content:flex-end;gap:var(--stack-md);
}
.social{display:flex;align-items:flex-start;gap:var(--space-md)}
.footer__note{color:var(--aura-3)}
/* Las dos marcas van a escala: `--mark` es el ancho del rombo y de él salen el
alto y las dos posiciones, así el par conserva su composición al achicarse.
150.333px es la medida del diseño; acá van algo más chicas para que se lean
como figura y no como mancha en la esquina. */
.footer__main{--mark:100px}
.footer__mark{
position:absolute;z-index:0;
width:var(--mark);
height:calc(var(--mark) * 1.43277); /* 215.392 / 150.333 */
background:url("../../Public/vectors/footer-mark.svg") no-repeat center;
background-size:100% 100%;
/* anclado por `right`, así que el translate va en +50% para centrar la caja rotada */
transform:translate(50%,-50%) rotate(135deg);
pointer-events:none;
}
.footer__mark--a{right:calc(var(--mark) * .5634); top:calc(var(--mark) * .5741)}
.footer__mark--b{right:calc(var(--mark) * 1.1089); top:calc(var(--mark) * 1.1262)}
.footer__legal{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);
flex-wrap:wrap;
padding:var(--space-md) var(--space-4xl);
background:var(--color-primary);
color:var(--color-secondary);
}
.footer__legal ul{display:flex;flex-wrap:wrap;gap:var(--space-lg)}
.footer__legal a{
text-decoration:underline;
text-decoration-color:transparent;
text-decoration-thickness:1px;
text-underline-offset:3px;
transition:text-decoration-color .18s ease;
}
.footer__legal a:hover{text-decoration-color:currentColor}
/* El documento que se está leyendo queda subrayado en el pie, igual que el
crédito: es la única pista de en cuál de los tres está parado. */
.footer__legal a[aria-current]{text-decoration-color:currentColor}
/* El crédito va subrayado de entrada: es el único enlace externo del pie.
Lleva `.footer__legal` delante a propósito — con `.footer__credit` solo
(0,1,0) pierde contra `.footer__legal a` (0,1,1) y el subrayado se queda
transparente, que es justo lo que pasaba. */
.footer__legal .footer__credit{
text-decoration-color:currentColor;
text-underline-offset:4px;
}
/* ============================== AVISOS LEGALES ==============================
Autorización, política de privacidad y términos de uso comparten plantilla:
navbar suelto sobre el rosa de la página —acá no hay foto detrás, así que no
hace falta el hero—, el titular del documento centrado, las migas, el cuerpo
y el botón de vuelta. El pie es el mismo de la landing.
El ancho de lectura es el del contenedor (1200), como en el frame del
diseño. Si algún día se quiere una medida más corta para el cuerpo, alcanza
con ponerle un max-width a .legal__doc: todo lo demás queda igual.
========================================================================== */
.legal{
padding-top:calc(var(--navbar-top) + var(--navbar-h));
padding-bottom:calc(var(--section) + var(--stack-lg));
}
.legal__title{
margin-top:var(--stack-lg);
text-align:center;
color:var(--color-secondary);
}
/* Migas. El chevron es decorativo —va aria-hidden— y el documento en curso no
es enlace: se marca con aria-current y no lleva estado de hover. */
.legal__crumbs{
display:flex;align-items:center;flex-wrap:wrap;
gap:var(--space-sm);
margin-top:var(--space-3xl);
color:var(--color-secondary);
}
.legal__crumbs a{transition:color .18s ease}
.legal__crumbs a:hover{color:var(--color-primary)}
/* El chevron del diseño se lee a la altura de las mayúsculas; a los 14 del
token de las migas queda como un punto. */
.legal__sep{font-size:var(--fs-xl);line-height:1}
/* El nombre formal del documento, que es más largo que el titular. Va fuera de
.legal__doc a propósito: dentro, el token del cuerpo (.legal__doc p) le
ganaría por especificidad y le comería el estilo de Header 4. */
.legal__lead{
margin-top:var(--space-3xl);
color:var(--color-primary);
}
/* Ritmo del cuerpo: 24 entre bloques, 48 antes de cada título de sección y 12
entre el título y lo que le sigue. */
.legal__doc{margin-top:var(--space-lg)}
.legal__doc > * + *{margin-top:var(--space-lg)}
.legal__doc > h2{margin-top:var(--space-2xl)}
.legal__doc > h2 + *{margin-top:var(--space-sm)}
.legal__doc > :first-child{margin-top:0}
.legal__doc a{
color:var(--color-primary);
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
}
.legal__doc a:hover{text-decoration-thickness:2px}
/* Viñeta propia: el rombo del pie a escala mínima. La global `ul{list-style:none}`
deja la lista pelada, así que la marca la pone el ::before. Se centra sobre la
primera línea con el interlineado del token, que cambia en mobile. */
.legal__list{display:flex;flex-direction:column;gap:var(--space-sm)}
.legal__list li{position:relative;padding-left:var(--space-lg)}
.legal__list li::before{
content:"";position:absolute;left:2px;
top:calc((var(--lh-body) - 6px) / 2);
width:6px;height:6px;
background:var(--color-primary);
transform:rotate(45deg);
}
.legal__updated{
margin-top:var(--space-2xl);
padding-top:var(--space-md);
border-top:1px solid var(--brisa-4);
color:var(--color-secondary);
}
/* `flex` en vez del `inline-flex` que trae .btn, para poder centrarlo con
margin auto sin envolverlo en otra caja. */
.legal__back{
display:flex;width:max-content;
margin:var(--space-4xl) auto 0;
padding:var(--space-sm) var(--space-2xl);
}
/* ============================== RESPONSIVE ============================== */
/* --- ≤1500px: la barra legal deja de caber en una línea -------------------
Con «– POWERED BY KHAOS CORE» el copyright mide ~637px y los legales ~526px:
sumados a los 96px de padding a cada lado piden ~1379px, así que por debajo
de ahí la barra envuelve. Y al envolver, `space-between` deja cada línea
pegada a la izquierda —una debajo de la otra, descolgadas— en vez de
centradas. El corte va en 1500 y no en 1379 por margen: tan cerca del punto
de envoltura el contenido casi llena la fila, así que centrar y repartir se
ven prácticamente igual y no se pierde nada.
Si cambia el texto del copyright, este número puede necesitar revisión. */
@media (max-width:1500px){
.footer__legal{
justify-content:center;
text-align:center;
gap:var(--space-sm) var(--space-lg);
}
.footer__legal ul{justify-content:center}
}
/* --- ≤1280px: el lienzo de 1440 deja de caber tal cual --- */
@media (max-width:1280px){
.hero__inner{padding-bottom:140px}
.hero__copy{margin-top:96px}
.about__grid{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;padding-bottom:96px}
.about__left{padding-top:120px}
.about__right{padding-top:120px}
.facts{gap:56px}
.about__cta{margin-top:56px}
.agenda__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:0 56px}
.invest{width:100%;margin-top:56px}
.dev__grid{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px}
.dev__card{width:100%}
.partners{--marquee-gap:var(--space-2xl)}
.footer__top{gap:56px;flex-wrap:wrap}
.footer__contact{width:min(374px,100%)}
.footer__main{padding:64px 48px 40px}
.footer__legal{padding:16px 48px}
}
/* --- ≤900px: una sola columna --- */
@media (max-width:900px){
/* El diseño no define tablet. El Banner baja al valor mobile del token para
que un titular de 96px no se coma el ancho. */
:root{--fs-7xl:60px}
.about__grid{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:72px}
.about__left{padding-top:72px}
.about__head{width:100%;margin-left:0}
.blob{width:100%;margin-top:-48px}
.about__right{padding-top:56px}
.facts{gap:40px}
.about__cta{align-self:flex-start;margin-top:40px}
.agenda{padding-bottom:64px}
.agenda__grid{grid-template-columns:minmax(0,1fr)}
.agenda__aside{grid-column:1;grid-row:1}
.agenda__viewport{grid-column:1;grid-row:2;margin-top:48px}
.agenda__steps{width:100%}
.agenda__cta{grid-column:1;grid-row:3;margin-top:40px}
.invest{margin-top:40px}
.dev__grid{grid-template-columns:1fr;gap:48px;margin-top:48px}
.dev__card{max-width:460px;margin-inline:auto}
.partners{--marquee-gap:var(--space-xl)}
.legal__title{font-size:var(--fs-5xl)}
.legal{padding-bottom:var(--section)}
.footer__top{flex-direction:column;gap:40px}
.footer__brand,
.footer__nav,
.footer__contact{width:100%}
.footer__mark{opacity:.25}
.footer__legal{flex-direction:column;align-items:center;gap:var(--space-sm)}
}
/* =========================================================================
MOBILE — frame "Mobile socios" (390 × 7336). El diseño móvil baja la
escala tipográfica, apila todo a una columna de 342 y convierte la tira
de cifras en un carrusel de un panel por vista.
========================================================================= */
@media (max-width:767.98px){
/* Escala mobile de la librería: los tokens cambian de valor, no las reglas. */
:root{
--gutter:24px;
--container: 342px;
--fs-md: 14px; /* Body regular → 14/20 */
--fs-xl: 16px; /* Header 4 → 16/24 */
--fs-7xl: var(--fs-6xl); /* Banner → 60/0.94 */
--lh-body: 20px;
/* La barra se achica al alto de su CTA y se acerca al filo: 36px de aire
sobre 390 de ancho serían un tercio del alto de la propia píldora. */
--navbar-top: 12px;
--navbar-h: 60px;
}
/* Header 1 mobile — 48/55 */
.dev__title,
.invest__title{font-size:var(--fs-5xl);line-height:55px}
/* Header 4 mobile — 16/24. El «LINKS» del pie sube de «Text button» a
Header 4: es el único texto que cambia de estilo entre los dos frames. */
.footer__navTitle{font-size:var(--fs-xl);font-weight:600}
/* ---- Hero -----------------------------------------------------------
El frame apila DOS imágenes en el hero: el render completo con su cielo
—azul arriba, velado a blanco en el medio— y encima el mismo edificio
recortado y nítido. El asset móvil ya trae las dos capas compuestas, así
que acá es una sola imagen; se rehizo desde Figma porque componer sólo la
de arriba dejaba el cielo plano.
Cubre 390 × 781, que es el frame de 844 menos la barra de estado del mockup
—esos 63px son cromo del teléfono, no de la página—. La imagen cuelga de la
base del hero con su propia proporción en vez de cubrirlo: así el edificio
queda anclado abajo pase lo que pase con el alto del texto.
El aire libre bajo el copy es el 76.9% del ancho —los 300px que el diseño
deja sobre 390—, y como la imagen escala con ese mismo ancho, el techo del
edificio cae siempre a la misma distancia del CTA: 29px sobre 390, y en
proporción en cualquier otro ancho. Un valor fijo sólo cuadraría a 390.
El fondo va en el azul EXACTO de la primera fila de la imagen: por debajo
de 390px de ancho el hero es más alto que ella y asoma una franja arriba.
Al ser el mismo color con el que arranca el degradado, la unión no se ve.
El rosa de la página dejaría un corte. */
.hero{overflow:hidden;background:#7e98cb}
.hero__bg{
inset:auto 0 0;
height:auto;
aspect-ratio:900 / 1802;
}
.hero__bg img{object-position:50% bottom}
.hero__inner{padding-bottom:76.9%} /* el padding de arriba sale de los tokens */
.nav{padding:0 var(--space-md);gap:var(--space-sm)}
.nav__links{display:none} /* el diseño móvil deja sólo logo + CTA */
.logo--nav{width:94px}
.nav__cta{padding:6px var(--space-md);font-size:var(--fs-xs)}
.nav__cta-long{display:none}
.nav__cta-short{display:inline}
/* ---- Avisos legales ----
El titular baja a Header 2 mobile: a 48 una palabra como «AUTORIZACIÓN»
no entra en los 342 de contenido y se sale del ancho. */
.legal__title{font-size:var(--fs-3xl);line-height:34px}
.legal__crumbs,
.legal__lead{margin-top:var(--space-xl)}
.legal__doc > h2{margin-top:var(--space-xl)}
.legal__updated{margin-top:var(--space-xl)}
.legal__back{width:100%;margin-top:var(--space-2xl);padding:var(--space-sm) var(--space-md)}
.legal{padding-bottom:var(--space-3xl)}
.hero__copy{margin-top:20px;width:100%;gap:var(--space-md)}
.hero__intro{display:flex;flex-direction:column;gap:var(--space-xs);width:100%}
.hero__title{gap:5.386px}
.hero__kicker{text-align:center;width:100%}
/* Dos columnas pegadas a cada borde, cada una del ancho de su etiqueta más
larga. En el frame los cuatro datos van en una sola línea, así que las
columnas se miden por contenido en vez de fijarlas en los 125/135 del
diseño: con la tipografía sustituta esos anchos parten «10 de Septiembre»
en dos renglones. La rejilla comparte columnas entre filas, así que los
pares siguen alineados igual. */
.event{
width:100%;align-self:stretch;
grid-template-columns:auto auto;
justify-content:space-between;
gap:5.386px;
}
/* Body bold sm — 12/18 */
.event__item{font-size:var(--fs-xs);line-height:18px;gap:5.386px;white-space:nowrap}
.event__icon{width:18px;height:18px}
.hero__cta{width:100%;padding:8.079px 16.157px}
/* ---- Cifras: scroll-stack vertical ----------------------------------
Estado base (sin JS, o con reduced-motion): los cuatro paneles apilados a
la vista, cada uno con el recorte del diseño. Es lo que se ve si el
scroll-stack no llega a activarse, y nunca deja una cifra inalcanzable. */
.figures{padding-top:61px}
.figures__window{
aspect-ratio:auto;
clip-path:none;
overflow:visible;
}
.figures__strip{
flex-direction:column;
height:auto;
gap:var(--space-sm);
}
.figures__panel,
.figures__panel--lead,
.figures__strip .figures__panel:hover,
.figures__strip .figures__panel:focus-within,
.figures__strip:hover .figures__panel--lead{
flex:none;
aspect-ratio:342 / 488;
clip-path:url(#clip-figures);
}
/* sin hover no hay acordeón: todas las cifras van visibles */
.figures__stat,
.figures__panel--lead .figures__stat,
.figures__strip:hover .figures__panel--lead .figures__stat{opacity:1}
/* Con JS: la sección se alarga lo que dure el recorrido y el marco queda
anclado, llenando la pantalla. Mientras está anclado no se mueve ni un
píxel: lo que sube es el listado por dentro, un alto de marco por cifra.
Con la cuarta ya entera aguanta un momento más y recién ahí se suelta.
El marco NO conserva los 342 × 488 del frame: con esa medida, anclarlo en
una pantalla de 844 dejaba franjas muertas de ~180px arriba y abajo y se
leía como una estampilla flotando en el vacío. Pero tampoco llena la
pantalla, porque al doble de alto recorta los renders de más. Apunta al
71% del alto y NO va centrado: se apoya algo por encima del centro —38% del
aire arriba, 62% abajo—, que es donde la cifra, que vive en la parte alta
del panel, cae al centro óptico. Centrado dejaba 123px sobre el marco y esa
franja se leía como un hueco al entrar la sección; así quedan 93.
El alto lo escribe main.js en `--figures-h`, y el reparto en `FIG_BIAS`.
Los renders son verticales (2175 × 3104, o sea 0.70) y el marco queda algo
más estirado que ellos (0.57), así que `object-fit:cover` recorta un poco
por los lados; cada panel elige por dónde con su `--focus`.
El alto extra vive en `.figures__track`: el scroll no se secuestra, sólo
se hace más larga la sección.
Acá el marco NO usa `#clip-figures`. Ese path va en `objectBoundingBox`, o
sea que se estira con la caja: sobre un marco de 342 × 599 las esquinas se
alargan de 107 a 132px y el squircle empieza a leerse como una hoja. El
mismo redondeo va en píxeles —42.3 de radio horizontal y 107.2 de vertical,
que es lo que miden las esquinas del path sobre los 342 × 488 del diseño—,
así que la esquina queda idéntica a la del frame por alto que sea el marco.
Los paneles sueltan su recorte porque ya no se ven sueltos, se ven a
través del marco. */
.figures--scroll .figures__track{height:var(--figures-track)}
.figures--scroll .figures__window{
position:sticky;
top:var(--figures-top, 0px);
height:var(--figures-h);
clip-path:none;
border-radius:42.3px / 107.2px;
overflow:hidden;
}
.figures--scroll .figures__panel{
flex:0 0 100%;
aspect-ratio:auto;
clip-path:none;
}
.figures--scroll .figures__strip{
height:100%;gap:0;
transform:translate3d(0, calc(var(--figures-shift, 0px) * -1), 0);
will-change:transform;
}
.figures__stat{top:56px;width:100%;padding-inline:var(--space-md)}
.figures__value{font-size:var(--fs-6xl)}
.figures__label{font-size:var(--fs-md);line-height:24px}
/* ---- Sobre floren ---- */
.about__grid{padding-bottom:56px}
.about__left{padding-top:61px}
.about__head{width:100%}
.about__year{top:13px}
.about__year:first-child{left:9px}
.about__year:last-child{right:9px}
.blob{width:100%;aspect-ratio:342 / 346.68;margin-top:-23px}
.about__right{padding-top:41px}
.facts{gap:var(--space-xl)}
.fact{gap:var(--space-md)}
.fact__bullet{width:44px;height:18px}
.about__cta{align-self:stretch;margin-top:var(--space-xl)}
/* ---- Momento a momento ---- */
.agenda{padding-top:0;padding-bottom:56px}
/* la forma sale por la izquierda, como en el frame móvil (491 × 241) */
/* en mobile la figura sangra por la izquierda: 491px de ancho arrancando en
x=-125, tal cual el frame móvil. El alto (241) lo da el aspect-ratio. */
.agenda__shape{
width:491px;
margin-left:-149px;
}
.invest{margin-top:23px}
.agenda__viewport{margin-top:23px}
.agenda__steps{gap:var(--space-xl)}
.agenda__cta{align-self:stretch;justify-self:stretch;margin-top:var(--space-xl)}
.agenda__cta,
.about__cta,
.hero__cta{width:100%}
/* ---- Losa oscura ---- */
.dark{
--slope:clamp(16px, 6vw, 32px);
padding-top:calc(var(--slope) + 48px);
padding-bottom:41px; /* 5444 − 5403 */
}
.dev__grid{margin-top:32px;gap:32px}
.dev__card{max-width:100%}
.dev__photo{border-radius:32px}
.logo--badge{width:150px}
.dev__badge{padding:var(--space-xs) var(--space-md)}
.pattern{height:41.585px;background-size:43.54px 41.585px}
.partners{gap:var(--space-md);padding:var(--space-2xl) 0}
.partners__title{font-size:var(--fs-2xl);line-height:36px;max-width:339px}
/* En el frame móvil la fila de logos mide 653px sobre un lienzo de 390 y se
corta a los dos lados. Se conservan las proporciones del diseño pero al 86%
y en dos filas, que es lo que entra en los 342 de contenido. */
.partners{--marquee-gap:var(--space-lg)}
.partners__item--op14{width:127px;height:54px}
.partners__item--avila{width:173px;height:54px}
.partners__item--wefilm{width:90px;height:54px}
.partners__item--khaos{width:101px;height:37px}
.partners__item--javier{width:180px;height:42px}
.partners__item--ternario{width:174px;height:31px}
.partners__item--alta{width:68px;height:54px}
/* ---- Cierre ---- */
.closing{padding-top:137px} /* 5792 − 5655 */
/* la marca vertical apenas asoma por el borde derecho, como en el frame móvil */
.closing__mark{
width:840px;height:150px;
top:473px;
transform:translate(calc(-50% + 51px), -50%) rotate(90deg);
}
.closing__stage{margin-top:-16px}
.closing__building{width:265%}
.closing__cta{
bottom:8%;
width:calc(100% - var(--gutter) * 2);max-width:342px;
padding:var(--space-md) var(--space-xl);
}
.closing__cta:hover{transform:translateX(-50%) translateY(-1px)}
/* ---- Footer ----------------------------------------------------------
El frame móvil aprieta todo el pie: marca a 195px, bloques a 48 de aire,
enlaces sin sangría lateral y la barra legal en una sola columna centrada.
Las dos marcas rosas dejan de ser un fondo tenue —a 0.25 de opacidad para
que no compitieran con el texto en el layout anterior— y vuelven a leerse
como figura, que es como están en el diseño. */
.footer__main{padding:var(--stack-lg) 24px;--mark:55.323px}
.footer__top{gap:var(--space-2xl)}
.footer__brand{min-height:127.158px}
.logo--footer,
.wordmark--footer,
.footer__rule{width:min(195.181px,100%)}
.footer__nav{gap:5.24px}
.footer__navTitle,
.footer__nav li a{padding:2.62px 0}
.social{gap:10.48px}
.social__icon{width:18px;height:18px}
/* Medidas del frame: el centro de cada rombo, en px desde el borde derecho
y desde el tope del pie. No salen de `--mark` como en desktop porque el
par está compuesto distinto acá. */
.footer__mark{opacity:1}
.footer__mark--a{right:45.416px;top:44.584px}
.footer__mark--b{right:78.416px;top:77.584px}
.footer__legal{padding:16px 24px;gap:var(--space-md);text-align:center}
.footer__legal ul{flex-direction:column;align-items:center;gap:var(--space-xs)}
}
/* --- Tablets táctiles ------------------------------------------------------
De 768px en adelante rige el acordeón de escritorio, que revela cada cifra
con :hover. En una pantalla táctil no hay hover: se vería sólo la primera y
las otras tres quedarían inalcanzables. Ahí la tira se apila como en mobile,
sin tocar la tipografía ni el resto del layout. */
@media (hover:none) and (min-width:768px){
.figures__window{aspect-ratio:auto;clip-path:none;overflow:visible}
.figures__strip{
flex-direction:column;height:auto;
gap:var(--space-lg);
max-width:342px;margin-inline:auto;
}
.figures__panel{flex:none;aspect-ratio:342 / 488;clip-path:url(#clip-figures)}
.figures__stat{opacity:1}
}
/* --- Preferencias del usuario --- */
@media (prefers-reduced-motion:reduce){
html:focus-within{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
/* El desfile no se congela a medio camino: se apaga, se descarta la copia y
las marcas se reparten centradas para que se vean todas por igual. */
.marquee{animation:none;width:100%}
.marquee__group{flex-wrap:wrap;justify-content:center;width:100%;padding-right:0}
.marquee__group[aria-hidden="true"]{display:none}
.partners__viewport{-webkit-mask-image:none;mask-image:none}
}