— abre y cierra contenido en la misma página,
no navega. Se le sacan los estilos de botón del navegador para que se vea como el Figma. */
.fal-faq-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.25rem 0;
background: none;
border: 0;
text-align: left;
font-family: var(--font-body);
font-size: var(--font-size-body);
line-height: 1.4;
color: var(--color-primary);
cursor: pointer;
}
.fal-faq-chevron {
flex-shrink: 0;
transition: transform 0.3s ease;
}
.fal-faq-toggle.is-collapsed .fal-faq-chevron {
/* cerrado apunta abajo; abierto, arriba */
transform: rotate(0deg);
}
.fal-faq-toggle:not(.is-collapsed) .fal-faq-chevron {
transform: rotate(180deg);
}
.fal-faq-respuesta {
padding: 0 0 1.5rem;
max-width: 68rem;
font-size: var(--font-size-body-sm);
line-height: 1.6;
color: var(--color-text-muted);
}
.fal-faq-respuesta p:last-child {
margin-bottom: 0;
}
.fal-faq-respuesta.is-hidden {
display: none;
}
/* //cambio: bajo 992px el menú lateral pasa arriba en horizontal con scroll — a 19% de una
pantalla chica los nombres de categoría quedan ilegibles. */
@media (max-width: 991.98px) {
.fal-faq-layout {
grid-template-columns: 1fr;
}
.fal-faq-nav {
position: static;
}
.fal-faq-nav ul {
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
gap: 1.5rem;
}
.fal-faq-nav-link {
white-space: nowrap;
}
}
/* ============================================================
LO QUE HABILITA LA REFORMA — Figma 3068:912. Sección nueva.
Markup en inc/fal/reforma.php.
============================================================ */
.fal-ref-panel {
position: relative;
overflow: hidden;
background: var(--color-bg-light);
border-radius: var(--radius-small);
padding: clamp(2.5rem, 5vw, 5rem);
}
.fal-ref-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
/* //cambio: las dos manchas del Figma (3068:914 y 3068:915). El diseño las define como un óvalo
sólido con filter: blur(216px), pero replicar eso literal hace que el navegador tarde tanto en
componer que llegué a tumbar la captura de pantalla — un blur de ese radio sobre un elemento de
~550×470 es carísimo. Se usa el mismo patrón que ya resuelve esto en .como-funciona-blur:
gradiente radial (que ya trae la caída suave) + un blur moderado de 72px. */
.fal-ref-blur {
position: absolute;
border-radius: 50%;
background: var(--gradient-reforma-blur);
filter: blur(72px);
opacity: 0.95;
}
.fal-ref-blur--1 {
left: 7%;
top: 29%;
width: 43%;
height: 52%;
}
.fal-ref-blur--2 {
left: 78%;
top: 40%;
width: 36%;
height: 41%;
}
.fal-ref-content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 3.5rem;
}
.fal-ref-header {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* //cambio: el Figma pone 3 cards de 408px con 28px de gap sobre un lienzo de 1280 — o sea
tres columnas iguales. Se modela como grilla para que se repartan solas si algún día son
dos o cuatro. */
.fal-ref-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.fal-ref-card {
display: flex;
flex-direction: column;
gap: 1rem;
background: #fff;
border-radius: var(--radius-small);
box-shadow: var(--shadow-small);
padding: 2.5rem;
/* //cambio (2026-07-29): mismo reveal que .fal-card (#equipo y #alianza) — fade + subida de
28px, escalonado 90ms por card vía --fal-card-reveal-delay, que setea initFalCards en
fal.js. Los valores se repiten en vez de sumar `.fal-ref-card` al selector de `.fal-card`
porque esa regla está ~2000 líneas más arriba, en el bloque de otra sección; acá queda
junto al resto de los estilos de la card. El estado `.is-visible` y el reset de
transition-delay SÍ van en el selector compartido, allá arriba. */
opacity: 0;
transform: translateY(28px);
transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), transition-delay 0s;
}
.fal-ref-card-titulo {
margin: 0;
font-size: var(--font-size-h4);
font-weight: var(--font-weight-title);
line-height: 1.2;
color: var(--color-primary);
}
.fal-ref-card-subtitulo {
margin: 0;
/* //cambio: comparación reforma vs Figma (2026-07-28) — causa real del salto de línea de más
que reportó el usuario ("una decisión" partiéndose en "una" + "decisión" en vez de quedar
junto en la 2ª línea, igual con "misma estructura" y "una incógnita"): a esta clase le
faltaba `font-family`, así que caía al stack default de Bootstrap (system-ui/Segoe UI,
más ancho que Noto Sans) y el texto dejaba de entrar en el ancho de la card, generando un
wrap de más. NO hay ningún `\n` cargado en el campo ACF —el `esc_html()` de reforma.php lo
confirma— el corte SIEMPRE fue 100% natural por ancho; el `white-space: pre-line` de abajo
no le hace nada a texto sin saltos reales, sólo queda listo por si algún día se cargan.
De paso, el Figma (style_8f23cc40) pide color primary #003DA0 (fill_28367f6e), no accent.
Con SOLO el fix de font-family el wrap ya mejoró mucho (pasó de 3 líneas rotas a 2), pero
no alcanzaba: a los 282px de ancho real de la card ("una" quedaba en la línea 1 junto con
"...ser", en vez de bajar con "decisión"). El Figma no deja esto al ancho natural del
contenedor — el propio nodo de texto (2895:1350, 2895:1006, 2895:1062) tiene un ancho
PROPIO más angosto que el de la card (236/223/223px) para forzar ese corte exacto. Medido
en vivo con las 3 cards reales: 210-220px es el rango que reproduce el corte de las tres
("...ser" / "una decisión", "Más rendimiento," / "misma estructura", "...ser" / "una
incógnita") — mismo patrón que .hero-text (max-width fijo para forzar el line-count del
diseño). */
max-width: 220px;
font-family: var(--font-body);
font-size: var(--font-size-body-lg);
font-weight: 300;
/* //cambio: 1.4 → 1.6 (32px/20px del Figma, lineHeight fijo "32px" en style_8f23cc40). */
line-height: 1.6;
color: var(--color-primary);
white-space: pre-line;
}
.fal-ref-items {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.fal-ref-items li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
/* //cambio: mismo bug de font-family ausente (ver .fal-ref-card-subtitulo) — tamaño y color
ya coincidían con el Figma (style_3eaa30e9, 16px/#55585A) de casualidad, solo faltaba la
familia. */
font-family: var(--font-body);
font-size: var(--font-size-body);
line-height: 1.4;
color: var(--color-text-muted);
}
.fal-ref-check {
flex-shrink: 0;
/* alinea el check con la primera línea del texto en ítems de dos renglones */
margin-top: 0.125rem;
}
.fal-ref-cierre {
text-align: center;
font-family: var(--font-title);
font-weight: var(--font-weight-title);
font-size: var(--font-size-body-lg);
line-height: 1.5;
color: var(--color-primary);
max-width: 62rem;
margin-inline: auto;
}
.fal-ref-cta {
display: flex;
justify-content: center;
}
/* //cambio: comparación reforma vs Figma (2026-07-28) — mismo caso que `.hero-ctas .btn` y
`.site-header .btn-fal-primary`: el Figma (3078:1354) pide Cocogoose Pro Light 300 14px para
"Solicitar diagnóstico", pero `.btn-fal-primary` trae por default Noto Sans 500 16px. */
.fal-ref-cta .btn {
font-family: var(--font-title);
font-weight: var(--font-weight-title);
font-size: var(--font-size-body-sm);
line-height: 1.5;
}
/* //cambio: bajo 992px las 3 cards no entran en fila — el texto de los ítems queda ilegible. */
@media (max-width: 991.98px) {
.fal-ref-cards {
grid-template-columns: 1fr;
}
}
/* ============================================================
BENTO GRID — Figma 2957:1898. Reemplaza visualmente a cards_grid.
Markup en inc/fal/bento_grid.php. Los estilos de .cards-grid NO se tocan:
ese layout sigue disponible.
============================================================ */
.fal-bento-titulo {
margin-bottom: 3.5rem;
}
/* //cambio (2026-08-04): bajada nueva del bento (Figma 3347:672). Valores tomados del nodo:
contenedor en columna centrada con gap 32px; título Cocogoose Light 300 36/1.2/-0.03 en
#003DA0; bajada Cocogoose Light 300 20/1.5 en #55585A, centrada, ancho FIJO 538px.
Ojo con la fuente: es Cocogoose (--font-title), NO Noto. Se parece a `.section-subtitle`
—mismo color y tamaño— pero esa clase usa --font-body, así que no se puede reutilizar.
Y el peso va por variable: Cocogoose Pro sólo tiene 100/200/300/350/800, y pedirle un 400
o un 600 lo resuelve silenciosamente como Bold 800. --font-weight-title ya es 300. */
.fal-bento-titulo--con-bajada {
/* 32px del Figma. Los 56px originales pasan a la bajada, que ahora es el último elemento
antes de la grilla. Valor anterior de este hueco: 3.5rem (heredado de .fal-bento-titulo). */
margin-bottom: 2rem;
}
.fal-bento-subtitulo {
font-family: var(--font-title);
font-weight: var(--font-weight-title);
font-size: 1.25rem;
line-height: 1.5;
color: var(--color-text-muted);
text-align: center;
/* ancho fijo 538 del Figma, pero como max-width para que en mobile lo limite el container */
max-width: 538px;
margin-inline: auto;
margin-bottom: 3.5rem;
}
/* ACF envuelve el textarea en vía wpautop y ese
trae margen propio de Bootstrap, que
se sumaría a los 3.5rem de arriba y al gap de 32px de abajo del título. */
.fal-bento-subtitulo p {
margin: 0;
}
/* //cambio: el Figma arma la grilla sobre 12 columnas de 1280px con 28px de gap. Con
`repeat(12, 1fr)` y ese mismo gap, un tile de 3 cols da 298px y uno de 6 da 625px, que son
exactamente las medidas del diseño — por eso se modela como grilla real y no con anchos fijos. */
.fal-bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(260px, auto);
column-gap: 28px;
row-gap: 26px;
}
.fal-bento-tile {
display: flex;
flex-direction: column;
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--shadow-small);
/* //cambio: la etiqueta queda arriba y el resto abajo. Se resuelve con margin-block-end:auto
en la etiqueta (ver más abajo) en vez de space-between, porque los tiles con cifra +
descripción necesitan esos dos elementos juntos al pie, no separados entre sí. */
justify-content: flex-end;
gap: 1rem;
}
.fal-bento-tile--cols-3 { grid-column: span 3; }
.fal-bento-tile--cols-6 { grid-column: span 6; }
.fal-bento-tile--filas-1 { grid-row: span 1; }
.fal-bento-tile--filas-2 { grid-row: span 2; }
.fal-bento-tile--azul { background: var(--color-primary); color: #fff; }
.fal-bento-tile--navy { background: #27396A; color: #fff; }
.fal-bento-tile--gris { background: #ECECED; color: var(--color-primary); }
.fal-bento-tile--celeste { background: var(--color-card-overlay); color: var(--color-primary); }
.fal-bento-etiqueta {
margin: 0 0 auto;
font-family: var(--font-title);
font-weight: var(--font-weight-title);
font-size: var(--font-size-body-lg);
line-height: 1.5;
color: inherit;
}
/* //cambio: el Figma pide 96px. Va con clamp para que no desborde en desktops angostos —
una cifra como "5.178.637" a 96px necesita ~413px de ancho y el tile mide 625px. */
.fal-bento-valor {
margin: 0;
font-family: var(--font-title);
font-weight: var(--font-weight-title);
/* //cambio: reportado por el usuario ("los números muy grandes", 2026-07-28) — la pendiente
era 6vw, pero los 96px del Figma viven en un lienzo de 1920: la proporción exacta es
96/1920 = 5vw. Con 6vw, a 1536px de pantalla la cifra daba 92px cuando la proporción del
diseño pide 77px — un 20% de más en cualquier monitor menor a 1920. El tope 96px queda:
se alcanza recién a 1920, como en el Figma. */
font-size: clamp(2.75rem, 5vw, 6rem);
line-height: 1;
letter-spacing: -0.02em;
color: inherit;
}
/* //cambio: la unidad o el signo van más chicos que la cifra. El Figma lo resuelve con dos
tamaños dentro del mismo texto: en "23 años" el número es 96px y la palabra 64px (2962:2020),
y en "+600" el signo es 64px y el número 90px (2978:836). Sin esto, "23 años" salía todo a
92px, se ensanchaba hasta ocupar el 77% del tile —contra el 55% del diseño— y forzaba un
wrap feo. 0.667em es la relación 64/96 del propio Figma. */
.fal-bento-valor small {
font-size: 0.667em;
font-weight: inherit;
letter-spacing: inherit;
}
.fal-bento-desc {
margin: 0;
font-family: var(--font-title);
font-weight: var(--font-weight-title);
font-size: var(--font-size-body-lg);
line-height: 1.5;
color: inherit;
}
.fal-bento-ratings {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2rem;
}
.fal-bento-rating {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.fal-bento-rating-valor {
font-family: var(--font-title);
font-weight: var(--font-weight-title);
/* //cambio: el Figma (style_2f33757d, nodos 1996/759/764) define las calificaciones en
48px, no 40 — misma lógica proporcional que .fal-bento-valor: 48/1920 = 2.5vw. */
font-size: clamp(1.75rem, 2.5vw, 3rem);
line-height: 1.2;
}
.fal-bento-rating-desc {
font-family: var(--font-title);
font-weight: var(--font-weight-title);
font-size: var(--font-size-body-lg);
line-height: 1.5;
}
/* //cambio: bajo 992px la grilla pasa a 6 columnas — los tiles de 6 cols ocupan el ancho
completo y los de 3 van de a dos por fila. El tile alto deja de spanear filas porque con
menos columnas quedaría un hueco al lado. */
@media (max-width: 991.98px) {
.fal-bento-grid {
grid-template-columns: repeat(6, 1fr);
}
.fal-bento-tile--cols-3 { grid-column: span 3; }
.fal-bento-tile--cols-6 { grid-column: span 6; }
.fal-bento-tile--filas-2 { grid-row: span 1; }
}
@media (max-width: 767.98px) {
.fal-bento-grid {
grid-template-columns: 1fr;
}
.fal-bento-tile--cols-3,
.fal-bento-tile--cols-6 {
grid-column: span 1;
}
}
/* === Contacto === */
.contact-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--color-text-muted);
}
/* ============================================================
FORMULARIO DE CONTACTO — Figma 2895:3355 (desktop) y 3125:1639 (mobile).
//cambio (2026-08-04): rediseño completo. Markup en inc/fal/contacto.php.
DISCREPANCIA DEL FIGMA, resuelta con criterio: el borde del input es #A5A6A7 en el nodo
desktop y #55585A en el mobile. El checkbox usa #A5A6A7 en LOS DOS, así que se toma #A5A6A7
para todo — el input mobile parece haber quedado sin actualizar. Queda anotado por si el
diseño después dice lo contrario.
============================================================ */
:root {
/* //cambio (2026-08-04): borde de inputs y checkbox del form. NO se reusa
--color-input-border (#d3daea): ese es del track del slider de la calculadora, otro gris. */
--color-form-border: #a5a6a7;
}
/* Grilla de 2 columnas con gap 24 en ambos ejes, que es lo que pide el Figma. Los campos son
items directos; el que ocupa el ancho entero lleva --full. En mobile pasa a 1 columna y el
mismo gap 24 sirve de separación vertical, sin tocar márgenes. */
.fal-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
/* el Figma alinea el bloque de botón a la derecha (Form: align-items flex-end) */
justify-items: stretch;
}
.fal-form-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.fal-form-field--full {
grid-column: 1 / -1;
}
/* Ayuda del CUIT — Noto Regular 12/1.5, letter-spacing -0.02em (nodo 3191:741) */
.fal-form-ayuda {
font-family: var(--font-body);
font-weight: 400;
font-size: 0.75rem;
line-height: 1.5;
letter-spacing: -0.02em;
color: var(--color-text-muted);
}
/* ── Checkbox de Términos y Condiciones ── */
.fal-form-check {
display: flex;
align-items: center;
gap: 0.5rem;
/* Figma: padding 0 0 16px */
padding-bottom: 1rem;
}
/* 18×18 con borde 1px y radio 2. `appearance: none` para poder darle esas medidas exactas:
el checkbox nativo ignora width/height/border en la mayoría de los navegadores. */
.fal-form-checkbox {
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0;
background: #fff;
border: var(--border-width) solid var(--color-form-border);
border-radius: 2px;
cursor: pointer;
display: grid;
place-content: center;
}
/* Tilde dibujada con un pseudo-elemento: al matar el appearance se pierde la del sistema. */
.fal-form-checkbox::before {
content: "";
width: 10px;
height: 10px;
transform: scale(0);
transition: transform 0.12s ease-in-out;
box-shadow: inset 1em 1em #fff;
clip-path: polygon(14% 44%, 0 65%, 39% 100%, 100% 16%, 83% 0, 39% 62%);
}
.fal-form-checkbox:checked {
background: var(--color-primary);
border-color: var(--color-primary);
}
.fal-form-checkbox:checked::before {
transform: scale(1);
}
.fal-form-checkbox:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Noto Regular 10/1.5 — sí, 10px: es lo que dice el Figma (3187:4806 y 3187:4815) */
.fal-form-check-label {
font-family: var(--font-body);
font-weight: 400;
font-size: 0.625rem;
line-height: 1.5;
color: var(--color-text-muted);
cursor: pointer;
}
/* El tramo "Términos y Condiciones" va subrayado tanto si es link como si no (cuando el campo
ACF está vacío el PHP lo renderiza como , para no dejar un sin destino). */
.fal-form-check-label a,
.fal-form-check-destacado {
color: inherit;
text-decoration: underline;
}
.fal-form-check-label a:hover {
color: var(--color-primary);
}
/* ── Botón Enviar ── */
.fal-form-actions {
display: flex;
justify-content: flex-end;
}
/* Figma 3078:1391: alto 56, radio 100, padding 8/24, gap 8, texto Cocogoose Light 300 14px.
El peso va por variable porque Cocogoose Pro sólo tiene 100/200/300/350/800: pedirle 400 o
500 lo resuelve como Bold 800 sin avisar. */
.fal-form-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 56px;
padding: 0.5rem 1.5rem;
border-radius: 100px;
font-family: var(--font-title);
font-weight: var(--font-weight-title);
font-size: var(--font-size-body-sm);
line-height: 1.5;
}
.fal-form-submit-flecha {
flex-shrink: 0;
/* hereda el color del texto del botón, que ya es blanco por --bs-btn-color */
color: currentColor;
}
.form-control-fal {
/* //cambio (2026-08-04): el borde pasa a --color-form-border (#A5A6A7).
Valor anterior: `var(--color-text-muted)` = #55585A, bastante más oscuro que el Figma. */
border: var(--border-width) solid var(--color-form-border);
border-radius: 4px;
height: 48px;
}
/* //cambio: fix 4 auditoría — sin :focus propio, el form de contacto mostraba el borde
#86b7fe + halo #0d6efd default de Bootstrap, ajenos a la paleta FAL. */
.form-control-fal:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 0.25rem rgba(0, 61, 160, 0.15);
}
.form-label-fal {
color: var(--color-text-muted);
font-size: var(--font-size-body);
/* //cambio (2026-08-04): faltaban font-family, peso y line-height. El Figma pide Noto Sans
Regular 400 16/1.5 (style_aed80857). Sin declarar la familia dependía de lo que heredara
de Bootstrap, que es el mismo agujero que ya se tapó en `.section-subtitle`. */
font-family: var(--font-body);
font-weight: 400;
line-height: 1.5;
}
/* //cambio (2026-08-04): el Figma separa la columna de texto del formulario con 80px
(Component #2895:3357, gap 80). `row g-5` da 48. Se sube sólo acá, en ≥992 que es donde las
dos columnas conviven; abajo de eso apilan y manda el gap vertical del propio row. */
@media (min-width: 992px) {
#contacto > .container > .row {
--bs-gutter-x: 5rem;
}
}
@media (max-width: 767.98px) {
/* Figma 3125:1639: una sola columna, mismo gap 24 — que ya lo pone .fal-form */
.fal-form {
grid-template-columns: 1fr;
}
/* //cambio (2026-08-04): el botón cambia de fuente por breakpoint, igual que `.hero-ctas .btn`.
Desktop: Cocogoose Light 300 14px (3078:1393). Mobile: Noto Medium 500 16px (3125:1670). */
.fal-form-submit {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--font-size-body);
}
}
/* ============================================================
BANNER CTA — Figma 3325:410. Card azul con título a la izquierda y botón a la
derecha. Markup en inc/fal/banner_cta.php (layout `banner_cta` del flexible content).
//cambio (2026-08-04): sección nueva.
Las tres variables que pide el diseño YA existían y coinciden exactas, así que no se agrega
ninguna: --color-card-overlay (#bbcae8, fondo del botón), --radius-small (24px, radio de la
card) y --shadow-small, que es literalmente la sombra "Small" del Figma
(0 2px 4px -2px rgba(0,0,0,.06), 0 4px 8px -2px rgba(0,0,0,.1)).
============================================================ */
.fal-banner-cta {
background: var(--color-primary);
border-radius: var(--radius-small);
/* Figma: padding 48px 115px. El horizontal se hace fluido con clamp porque 115px fijos en un
viewport de 1200 se comen 230px de los 1140 útiles; a 1440+ vale los 115 del diseño. */
padding: 3rem clamp(1.5rem, 8vw, 7.1875rem);
}
/* El Figma mete un frame interno de ancho FIJO 1013 con space-between, alineado al arranque del
contenido (la Card no declara justifyContent, o sea flex-start). Se reproduce con max-width y
sin centrar: arriba de ~1250px de card queda aire a la derecha, igual que en el diseño; abajo
de eso el inner ocupa todo y el botón se apoya contra el padding. */
.fal-banner-cta-inner {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 2rem;
width: 100%;
max-width: 1013px;
}
/* Cocogoose Light 300 36/1.2, ls -0.03, blanco, caja de 473 (nodo 3332:430).
El peso va por variable: Cocogoose Pro sólo tiene 100/200/300/350/800 y pedirle un 400 lo
resuelve como Bold 800 sin avisar. */
.fal-banner-cta-titulo {
font-family: var(--font-title);
font-weight: var(--font-weight-title);
font-size: 2.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
color: #fff;
max-width: 473px;
}
/* Botón: fondo #BBCAE8, texto #003DA0 en Noto Medium 500 16px, alto 56, radio 100, padding 8/24,
gap 8 con la flecha. Ojo que acá el texto NO es Cocogoose como en el botón del formulario:
el Figma pide Noto Medium para este (3333:297). */
.fal-banner-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-shrink: 0;
height: 56px;
padding: 0.5rem 1.5rem;
border-radius: 100px;
background: var(--color-card-overlay);
color: var(--color-primary);
box-shadow: var(--shadow-small);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--font-size-body);
line-height: 1.5;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.fal-banner-cta-btn:hover {
background: #cdd8ee;
color: var(--color-primary);
}
.fal-banner-cta-flecha {
flex-shrink: 0;
color: currentColor;
}
/* //cambio (2026-08-04): el Figma no tiene nodo mobile para este banner, así que el apilado es
criterio propio y queda anotado como tal. Se sigue el patrón del resto de la landing: columna,
el mismo gap 32 que ya usa el diseño entre título y botón, y padding lateral reducido para no
comerse el ancho. El botón se estira a todo el ancho porque a 390px un botón "hug" con este
texto queda desbalanceado contra el título. */
@media (max-width: 767.98px) {
.fal-banner-cta {
padding: 2rem 1.5rem;
}
.fal-banner-cta-inner {
flex-direction: column;
align-items: flex-start;
}
.fal-banner-cta-titulo {
max-width: none;
font-size: 1.75rem;
}
.fal-banner-cta-btn {
width: 100%;
}
}
/* ============================================================
FOOTER FAL — Figma 2895:3401. Panel azul con logo blanco + bloque
legal. Markup en layout/footer-fal.php (solo page-fal.php).
============================================================ */
.fal-footer {
background: var(--color-primary);
/* Figma: padding 40px 0 */
padding: 2.5rem 0;
color: #fff;
}
.fal-footer-logo {
display: inline-block;
/* Figma: gap 32 entre logo y bloque legal */
margin-bottom: 2rem;
}
.fal-footer-logo img {
display: block;
width: 123px;
height: auto;
/* //cambio: reportado por el usuario (2026-07-28) — el logo se veía oscuro sobre el panel
azul. La opción ACF `logo_footer` devuelve el logo A COLOR, no uno blanco; mismo filtro
que ya usa el footer corporativo para el mismo asset (_footer.scss:35), así que cualquier
logo que llegue por esa opción (o el fallback del navbar) sale blanco por igual. */
filter: invert(1) brightness(100);
}
.fal-footer-legal {
/* Figma: Inter Extra Light 200, 10px, justificado, blanco, paragraphSpacing 2 */
font-family: "Inter", var(--font-body);
font-weight: 200;
font-size: 0.625rem;
line-height: 1.5;
text-align: justify;
}
.fal-footer-legal p {
margin-bottom: 2px;
}
.fal-footer-legal p:last-child {
margin-bottom: 0;
}
/* === Responsive === */
@media (prefers-reduced-motion: reduce) {
.timeline-segment,
.timeline-pill,
.timeline-desc,
.timeline-dot { transition: none; }
.flow-circles[data-flow-circles] .flow-circle {
opacity: 1;
transform: none;
transition: none;
}
/* //cambio (2026-07-29): se suma .fal-ref-card — sin esto las cards de reforma quedaban
invisibles para quien tiene reducción de movimiento activada (el JS sale temprano y nunca
les pone .is-visible, así que se quedaban en opacity 0). */
.fal-card,
.fal-ref-card {
opacity: 1;
transform: none;
transition: none;
}
}
@media (max-width: 991.98px) {
.flow-circles {
flex-wrap: wrap;
justify-content: center;
row-gap: 0.5rem;
}
.flow-circle {
margin-right: 0;
margin-bottom: -10px;
}
.hero-inner {
min-height: auto;
padding: 2rem 1rem;
}
}
/* //cambio: flow circles — scroll horizontal en mobile en vez de grilla rota */
@media (max-width: 767.98px) {
.flow-circles {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.flow-circles::-webkit-scrollbar { display: none; }
.flow-circle {
flex-shrink: 0;
width: 120px;
height: 120px;
font-size: 0.8rem;
}
.flow-circle strong { font-size: 0.875rem; }
.flow-circle span { font-size: 0.875rem; }
}
@media (max-width: 575.98px) {
.timeline-step-track { gap: 4px; }
.timeline-pill {
/* //cambio (2026-08-04): vuelve a 8px 16px, el valor base y el del Figma.
Valor anterior: `6px 10px`.
El achique de este breakpoint no tenía respaldo en el diseño: el canvas mobile del Figma
es de 540px, o sea que cae DENTRO de este mismo media query (≤575.98), y ahí la píldora
de fecha se especifica en 8/16 igual que en desktop (frame EL-6cc3ca2c, 3134:3102).
`white-space: normal` y el centrado se conservan: eso sí es propio de pantallas angostas. */
padding: 8px 16px;
white-space: normal;
text-align: center;
}
.segment-toggle button { padding: 10px 20px; }
}
/* ============================================================
ECOSISTEMA GST — portado de texto.html (Figma 2435-1850).
Lienzo fijo 1920×1348 escalado por JS (initEcosistema en fal.js) según
el ANCHO del contenedor (no por 75vh como el mockup original — a pedido,
el diagrama se veía chico). Clases idénticas a texto.html; los colores
de categoría y el ancho del grupo ya no son por nombre de rama (el
contenido es ACF) sino por posición (:nth-child) y por cantidad de logos.
============================================================ */
.fal-eco-panel {
background: var(--fal-eco-bg);
border-radius: var(--radius-small, 24px);
padding: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 3vw, 3rem);
}
.fal-eco-header { max-width: 55rem; margin-inline: auto; }
.fal-eco-header .section-title { color: var(--color-primary); }
.fal-eco-subtitle { color: var(--color-text-muted); font-size: var(--font-size-body-lg); font-weight: 300; }
.fal-eco-subtitle strong { font-weight: 600; }
.fal-viewport {
display: flex;
justify-content: center;
align-items: center;
padding: clamp(16px, 3vw, 32px);
}
.fal-scaler { position: relative; overflow: visible; }
.fal-ecosystem {
position: relative;
width: 1920px;
height: 1348px;
overflow: visible;
font-size: 16px;
font-family: var(--fal-eco-font);
transform-origin: top left;
}
.fal-connectors {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
z-index: 2;
}
.fal-connectors path {
fill: none;
stroke: #b7cbe9;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.fal-chart {
position: absolute;
left: 0;
top: 50%;
transform: translateY(calc(-50% - 1.3%));
width: 33.2%;
height: 74.7%;
z-index: 1;
}
.fal-chart__rings { position: absolute; inset: 0; }
.fal-ring {
position: absolute;
border-radius: 50%;
border: 0.125em solid var(--fal-eco-border);
left: 38%;
top: 50%;
opacity: 0;
}
.fal-ring--1 { width: 142%; aspect-ratio: 1; background: var(--fal-eco-ring-1); }
.fal-ring--2 { width: 116%; aspect-ratio: 1; background: var(--fal-eco-ring-2); }
.fal-ring--3 { width: 92%; aspect-ratio: 1; background: var(--fal-eco-ring-3); }
.fal-ring--4 { width: 69%; aspect-ratio: 1; background: var(--fal-eco-ring-4); }
.fal-ring--5 { width: 47%; aspect-ratio: 1; background: var(--fal-eco-ring-5); }
.fal-chart__hub {
position: absolute;
left: 0;
top: 50%;
transform: translateY(calc(-50% - 1.3%));
width: 33.2%;
height: 74.7%;
z-index: 3;
pointer-events: none;
}
.fal-chart__core {
position: absolute;
left: 38%;
top: 50%;
width: 31%;
aspect-ratio: 1;
border-radius: 50%;
background: #fff;
border: 0.125em solid var(--fal-eco-border-muted);
box-shadow: var(--fal-eco-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
/* //cambio: 3.72% en vez de 12% — el padding porcentual de un elemento absolute se calcula
contra el ancho de su containing block (.fal-chart__hub, 33.2% del lienzo), no contra el
31% propio de este círculo. 12% * 31% = 3.72% recupera el 12% de padding relativo al
tamaño real del círculo (antes el logo quedaba con un espacio interno 3x más chico). */
padding: 3.72%;
pointer-events: auto;
cursor: default;
}
.fal-chart__logo {
display: block;
width: auto;
height: auto;
max-width: min(13.0625em, 80%);
max-height: min(4.4375em, 56%);
object-fit: contain;
}
.fal-branches {
position: absolute;
right: 0;
top: 0;
width: 68%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6.8% 0 5.5%;
z-index: 4;
}
.fal-branch {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 19.4%;
}
.fal-branch__group {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 16.375em;
width: 63.7%;
border: 0.0625em solid var(--fal-eco-border);
border-radius: 12.5em;
padding: 1.5em 3em 1.5em 9.375em;
opacity: 0;
}
/* //cambio: ancho ancho por cantidad de logos (repeater ACF), no por nombre de rama */
.fal-branch__group--wide { width: 94%; }
/* Globo de categoría — color y offset por posición de la rama en el repeater */
.fal-branch__label {
position: absolute;
top: 50%;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 0.5em;
height: 3.5em;
padding: 1em 1.5em;
border-radius: 3.75em;
color: var(--color-primary);
font-size: 1.5em;
letter-spacing: -0.01em;
line-height: 1.2;
white-space: nowrap;
opacity: 0;
transform: translateY(-50%);
flex-shrink: 0;
}
.fal-branch:nth-child(1) .fal-branch__label { left: -10.0625em; background: var(--fal-eco-cat-1); gap: 1em; }
.fal-branch:nth-child(1) .fal-branch__label img { max-width: 1.1875em; max-height: 1.1875em; }
.fal-branch:nth-child(2) .fal-branch__label { left: -11.3125em; background: var(--fal-eco-cat-2); }
.fal-branch:nth-child(3) .fal-branch__label { left: -7.5625em; background: var(--fal-eco-cat-3); }
.fal-branch:nth-child(4) .fal-branch__label { left: -8.8125em; background: var(--fal-eco-cat-4); }
.fal-branch__label img {
display: block;
width: auto;
height: auto;
max-width: 1.5em;
max-height: 1.5em;
object-fit: contain;
flex-shrink: 0;
}
.fal-branch__logos-wrap {
width: 100%;
display: flex;
justify-content: center;
transform-origin: left center;
transform: scaleX(0);
opacity: 0;
}
.fal-branch__group.is-visible { opacity: 1; }
.fal-branch__logos {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5em;
flex-wrap: nowrap;
}
.fal-logo-pod {
position: relative;
flex: 0 0 13.375em;
width: 13.375em;
height: 13.375em;
border-radius: 50%;
background: #fff;
border: 0.0625em solid var(--fal-eco-border-muted);
box-shadow: var(--fal-eco-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
padding: 1em;
opacity: 0;
transform: scale(0.6);
cursor: pointer;
transition: border-color 0.3s ease, box-shadow 0.35s ease;
text-decoration: none;
}
.fal-logo-pod:focus-visible {
outline: 0.125em solid var(--color-primary);
outline-offset: 0.25em;
}
.fal-logo-pod.is-bubble {
z-index: 2;
border-color: var(--fal-eco-border);
box-shadow:
0 14px 32px -6px rgba(0, 61, 160, 0.18),
0 6px 14px -4px rgba(0, 0, 0, 0.1);
}
/* //cambio: tamaño genérico (los logos son ACF, no hay clase fija por marca) */
.fal-logo-pod img {
display: block;
width: auto;
height: auto;
max-width: 78%;
max-height: 50%;
object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
.fal-logo-pod { transition: none; }
}
/* ── Mobile ── */
@media (max-width: 767px) {
.fal-viewport { padding: 16px 12px; }
.fal-scaler {
width: 100% !important;
height: auto !important;
}
.fal-ecosystem {
display: flex;
flex-direction: column;
gap: 0;
width: 100% !important;
height: auto !important;
transform: none !important;
font-size: clamp(12px, 3.5vw, 16px);
}
.fal-chart {
position: relative;
left: auto;
top: auto;
transform: none;
width: min(280px, 85vw);
height: auto;
aspect-ratio: 1;
margin: 0 auto 8px;
flex-shrink: 0;
}
.fal-ring { left: 50%; }
.fal-chart__hub {
position: relative;
left: auto;
top: auto;
transform: none;
width: min(280px, 85vw);
height: auto;
aspect-ratio: 1;
margin: calc(-1 * min(280px, 85vw)) auto 8px;
z-index: 3;
}
.fal-chart__core { left: 50%; width: 38%; }
.fal-branches {
position: relative;
right: auto;
width: 100%;
height: auto;
padding: 0;
gap: 20px;
}
.fal-branch {
flex-direction: column;
align-items: stretch;
gap: 10px;
min-height: unset;
}
.fal-branch__group {
display: flex;
flex-direction: column;
gap: 10px;
width: 100% !important;
height: auto;
min-height: 10em;
padding: 1em 0.75em !important;
border-radius: 7.5em;
}
.fal-branch__label {
position: relative;
left: auto !important;
top: auto;
transform: none;
align-self: flex-start;
font-size: 1.25em;
height: 3em;
padding: 0.75em 1.25em;
}
.fal-branch__logos-wrap {
transform: none;
opacity: 1;
}
.fal-branch__logos {
overflow-x: auto;
justify-content: flex-start;
padding: 4px 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.fal-branch__logos::-webkit-scrollbar { display: none; }
.fal-connectors path { stroke-width: 2; }
}
/* ============================================================
REFORMA SWIPER — //cambio (2026-07-28): las cards de "Lo que habilita la reforma" pasan a
markup swiper (inc/fal/reforma.php) para el carrusel mobile del Figma (3134:2275). En
desktop el swiper se "apaga" con el mismo patrón que .benefits-swiper: el wrapper vuelve a
ser una grilla de 3 y la botonera se oculta. El grid viejo (.fal-ref-cards) quedó comentado
en el partial; sus reglas CSS de más arriba no se borran (regla del proyecto).
============================================================ */
.reforma-swiper { overflow: visible; min-width: 0; max-width: 100%; }
.reforma-swiper .swiper-slide { height: auto; }
.reforma-swiper .swiper-slide .fal-ref-card { height: 100%; }
.reforma-swiper-footer { display: none; }
@media (min-width: 768px) {
.reforma-swiper .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
transform: none !important;
}
}
@media (max-width: 767.98px) {
.reforma-swiper { overflow: hidden; }
.reforma-swiper-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.5rem;
padding-inline: 0.5rem;
}
.reforma-swiper-nav { display: flex; align-items: center; gap: 0.75rem; }
.reforma-swiper-footer .carousel-nav-btn.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; }
.reforma-swiper-pagination .step-dot { display: inline-block; }
}
/* ============================================================
MOBILE FAL — //cambio (2026-07-28): pasada mobile completa contra el Figma (sección
"Mobile" 3226:2921, canvas 540px): landing 3125:1036, navbar 3125:1811, FAQ 3237:2943,
gestión 3157:4157/3160:4545, bento 3216:733. Todos los valores citan su nodo/estilo.
Va AL FINAL del archivo a propósito: a igual especificidad pisa los bloques mobile
históricos de más arriba (timeline, bento 1-col, hero <992) sin borrarlos.
============================================================ */
/* ── Primitivas globales ── */
@media (max-width: 767.98px) {
/* secciones a 60px vertical (Figma: padding 60 20 en casi todas; desktop 80-112) */
/* //cambio (2026-07-29): valores anteriores `3.75rem` (60px) → `0.75rem` → `1.5rem` (actual).
OBLIGADO por la bajada de desktop: este bloque es un override de mobile, no un mínimo, así
que si desktop baja y esto no, el celular queda con MÁS aire que la pantalla grande — al
revés de como estaba pensado (originalmente 60 < 80).
1.5rem (24px) conserva la proporción original de 0.75× respecto de desktop (32px): mobile
un poco más apretado, nunca más suelto.
El comentario de arriba se deja como registro de los valores del Figma. */
/* //cambio (2026-07-29): sube a 2rem. Valor anterior: `1.5rem`. Cadena: `3.75rem` →
`0.75rem` → `1.5rem` → `2rem`. Acompaña la suba de desktop a 2.5rem manteniendo mobile
un escalón más apretado (32px contra 40px), que es la relación que tenía originalmente
(60 contra 80). */
.section-padding,
.section-padding-lg {
padding-top: 2rem;
padding-bottom: 2rem;
}
/* paneles con radio 16 (desktop 24) */
.section-blue,
.section-gray,
.hero-inner,
.fal-ref-panel,
.calculator-section,
.impacto-panel {
border-radius: 16px;
}
/* títulos de sección: los clamp de :root bajan a 24px en 390px; el Figma mobile los
mantiene en 36px (32 para equipo-intro y cómo-funciona — style_eaa603d5) */
.section-title { font-size: 2.25rem; }
.equipo-intro .section-title,
.como-funciona-header .section-title { font-size: 2rem; }
}
/* ── Hero (Figma 3125:1066) ── */
@media (max-width: 767.98px) {
.hero-inner {
/* //cambio: el bloque <992 de arriba lo dejaba en auto/2rem — el Figma mobile pide 640
de alto con el contenido apoyado ABAJO */
min-height: 640px;
padding: 40px 20px;
align-items: flex-end;
}
/* gradiente mobile: vertical desde arriba (el desktop usa 86deg lateral) */
.hero-inner:not(.img-placeholder)::after {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(255, 251, 251, 0) 100%);
}
/* Figma mobile: 40px (el clamp de --font-size-hero da 32 en 390px) */
.hero-title { font-size: 2.5rem; }
/* CTAs mobile: Noto 500 16 (style_9934d5cb) — en desktop son Cocogoose 300 14 */
.hero-ctas .btn {
font-family: var(--font-body);
font-weight: 500;
font-size: 1rem;
}
}
/* ── Reforma (Figma 3134:2275) ── */
@media (max-width: 767.98px) {
.fal-ref-panel { padding: 56px 20px; }
.fal-ref-cierre { font-size: 1rem; } /* Figma 3134:2460: 16px */
.fal-ref-cta .btn {
font-family: var(--font-body);
font-weight: 500;
font-size: 1rem;
}
}
/* ── #equipo + timeline (Figma 3125:1090) ── */
@media (max-width: 767.98px) {
.equipo-panel { padding: 56px 20px; gap: 60px; }
/* //cambio (2026-08-04): 40px → 56px. Valor anterior: `40px`.
El Figma mobile (frame 3125:1092) separa el header del bloque de cards con 56, el mismo
valor que ya usa desktop. No había motivo para achicarlo acá. */
.equipo-panel-content { gap: 56px; }
/* //cambio (2026-07-29): el título de card baja otro escalón en mobile — 1.35rem contra los
1.55rem de desktop. En el carrusel la card es más angosta que en la fila de 4, así que
títulos como "Seguimiento en tiempo real" se parten en más líneas.
El `min-height: 2.8em` del h3 NO hay que redeclararlo: está en `em`, así que se recalcula
solo contra este font-size (1.35 × 2.8 = 3.78rem) y sigue reservando exactamente 2 líneas. */
.fal-card h3 { font-size: 1.35rem; }
/* //cambio (2026-07-28): la píldora de PERÍODO quedaba aplastada dentro de la columna del
track (24px) del grid vertical y se veía como un blob circular. El Figma mobile
(3134:3074) la muestra como fila propia a todo el ancho, centrada, sin línea. */
.timeline-step--periodo { display: flex; padding: 0 0 24px; }
.timeline-step--periodo .timeline-step-track {
flex-direction: row;
width: 100%;
height: auto;
gap: 0;
}
.timeline-step--periodo .timeline-segment { display: none; }
.timeline-periodo {
width: 100%;
text-align: center;
padding: 12px 16px;
}
}
/* ── Cómo funciona (Figma 3125:1217) ── */
@media (max-width: 767.98px) {
.step-carousel-panel-inner {
padding: 40px 20px;
border-radius: 12px;
}
/* título de slide: 24px Semilight ls -0.03 (nodo 3125:1312; desktop 32 Light) */
.como-slide-title {
font-size: 1.5rem;
font-weight: var(--font-weight-title-semibold);
}
.aporte-card-label { font-size: 1rem; } /* 16 Semilight (style_5d6e2066) */
.aporte-valor { font-size: 1.25rem; letter-spacing: -0.02em; } /* 20 (style_d24bb693) */
.aporte-valor-unidad { font-size: 1rem; }
.como-swiper-footer { padding-inline: 0.5rem; }
}
/* ── Gestión (Figma 3157:4157 / 3160:4545) ── */
@media (max-width: 767.98px) {
.gestion-section-title {
/* Figma mobile 3160:4550: 36 Light ls -0.02 — el 54 Ultralight es SOLO desktop */
font-size: 2.25rem;
font-weight: 300;
letter-spacing: -0.02em;
}
.gestion-card {
padding: 40px 24px;
border-radius: 12px;
}
.gestion-card-title { font-size: 2rem; } /* 32 (style_eaa603d5; desktop 40) */
.gestion-card .eyebrow { font-size: 1rem; } /* 16 (style_4cefc2cb; desktop 20) */
/* //cambio: el bloque histórico de arriba le dejaba padding 0 3.25rem al wrapper — sin
correlato en el Figma mobile (las cards van al ancho del panel) */
.gestion-stack-wrapper { padding: 0; }
/* proporción fija del diseño (452×305) para que las pills posicionadas en % no drifteen */
.gestion-card-media {
min-height: 0;
aspect-ratio: 452 / 305;
border-radius: 16px;
}
/* pills por card — coordenadas del Figma mobile como % de la imagen 452×305. La card de
éxito mobile es MÁS CHICA (115×118 vs 144×148 desktop) → factor 0.8 compuesto sobre
var(--pill-scale), nunca reescribiendo width/height del componente compartido. */
/* //cambio (2026-08-04): fix de DERIVA VERTICAL del badge. Medido en dev a 486px: el CSS pide
`top: 66.5%` pero rendereaba en **70.7%** — 4.2% de corrimiento (~12px sobre una imagen de
279px de alto). El Figma (3157:4026) lo quiere en 203/305 = 66.6%.
Causa: el bloque `@media (max-width: 991.98px)` le aplica `transform-origin: left center`.
Con origen centrado, al escalar el box se recentra sobre el eje vertical del box SIN
escalar, así que el borde superior baja (60 - 60×0.614)/2 ≈ 11.6px. Justo la deriva medida.
Las demás pills del bloque mobile ya usan `top left`; el badge era el único con `left
center`, heredado del bloque de tablet. Se unifica.
De paso el factor baja de 0.9 a 0.81: medido daba 123px de ancho contra los ~111px que
corresponden al Figma escalado (122 × 413/452). */
.gestion-glass-pill--badge {
transform: scale(calc(var(--pill-scale, 1) * 0.81));
transform-origin: top left;
}
[data-gestion-card="0"] .gestion-glass-pill--badge {
left: 65%; top: 66.5%; right: auto; /* 294/452, 203/305 */
}
[data-gestion-card="0"] .gestion-glass-pill--card-pause {
left: 54.4%; top: 18.4%; bottom: auto; /* 246/452, 56/305 */
/* //cambio (2026-08-04): el factor baja de 0.8 a 0.675. Medido en dev a 486px: la card de
éxito rendereaba 124×118 contra los ~105×108 que corresponden al Figma escalado
(115×118 sobre imagen 452 → ×413/452). Era ~18% más grande — el "enormes" reportado.
0.675 sale de despejar el ancho: 105/198 = 0.530 de escala total, y 0.530/0.785
(--pill-scale) = 0.675. */
transform: scale(calc(var(--pill-scale, 1) * 0.675));
transform-origin: top left;
}
[data-gestion-card="1"] .gestion-glass-pill--badge {
left: 52.4%; top: 55%; right: auto; /* 237/452, 168/305 */
}
[data-gestion-card="1"] .gestion-glass-pill--card-move {
left: 10.4%; top: 30%; right: auto; bottom: auto; /* 47/452, 92/305 */
/* //cambio (2026-08-04): el factor baja de 0.8 a 0.675. Medido en dev a 486px: la card de
éxito rendereaba 124×118 contra los ~105×108 que corresponden al Figma escalado
(115×118 sobre imagen 452 → ×413/452). Era ~18% más grande — el "enormes" reportado.
0.675 sale de despejar el ancho: 105/198 = 0.530 de escala total, y 0.530/0.785
(--pill-scale) = 0.675. */
transform: scale(calc(var(--pill-scale, 1) * 0.675));
transform-origin: top left;
}
[data-gestion-card="2"] .gestion-glass-pill--card-pause {
left: 4.2%; top: 27.5%; bottom: auto; /* 19/452, 84/305 */
/* //cambio (2026-08-04): faltaba el factor reductor. Valor anterior:
`transform: scale(var(--pill-scale, 1))` — SIN factor, o sea a escala de desktop.
Las cards 0 y 1 sí lo tenían (0.8, bajado a 0.675 en esta misma tanda) y esta quedó
afuera. Medido en dev a 486px: rendereaba 155×148 contra los ~105×108 del Figma
escalado — 48% más grande. Ese es el "la card 3 está enorme" reportado.
Se unifica en 0.675, el mismo de las otras dos. */
transform: scale(calc(var(--pill-scale, 1) * 0.675));
transform-origin: top left;
}
[data-gestion-card="2"] .gestion-glass-pill--resume {
left: auto; right: 1%; top: 61%; /* 212/452 → derecha; 186/305 */
/* //cambio (2026-08-04): el switch tampoco tenía reducción mobile — heredaba el
`translateY(-50%) scale(0.9)` del bloque ≤991.98px sobre una base de 12rem (192px) y
rendereaba 173px, o sea 41.9% del ancho de la imagen (413px). En desktop la misma
píldora ocupa 216 sobre imagen de 602 = 35.9%. Manteniendo esa proporción sobre 413
da 148px → 148/192 = 0.77. Se conserva el translateY y el origin `center right` del
bloque de arriba: con `right: 1%` el borde derecho queda anclado al escalar. */
transform: translateY(-50%) scale(0.77);
}
}
/* ── Calculadora (Figma 3192:993) ── */
@media (max-width: 767.98px) {
/* //cambio (2026-07-29): baja a 2rem para igualar al resto de las secciones en mobile.
Valor anterior: `3.75rem` (60px). Este override venía de la pasada mobile del Figma, donde
TODAS las secciones estaban en 60px; al bajar las demás a 32px quedó siendo la única con
casi el doble de aire. Ahora toma el mismo valor que `.section-padding` en este breakpoint. */
.calculadora-section { padding-block: 2rem; }
.calculadora-title { font-size: 2.25rem; }
.calculator-section { padding: 40px 20px; }
.calculator-card { padding: 40px 12px; }
.segment-toggle button { padding: 10px 14px; font-size: 0.8125rem; }
}
/* ── Bento (Figma 3216:733) ── */
@media (max-width: 767.98px) {
/* //cambio (2026-07-28): pila 1-col con alturas fijas del diseño y orden visual propio;
"23 años" y "+600" van etiqueta+número EN FILA. El grid pasa a flex para poder usar
order (pisa el grid 1-col del bloque histórico de arriba). OJO data-driven: el mapeo se
apoya en las clases de color/filas que hoy trae la data ACF (gris=Activos, navy=23 años,
azul+filas-1=+600, azul+filas-2=Calificaciones, celeste=Patrimonio) — si un editor las
cambia en el admin, este orden se desarma. */
.fal-bento-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.fal-bento-tile--gris { order: 1; min-height: 188px; } /* Activos */
.fal-bento-tile--navy {
order: 2;
min-height: 114px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 24px;
}
.fal-bento-tile--navy .fal-bento-etiqueta { margin: 0; }
.fal-bento-tile--azul.fal-bento-tile--filas-1 {
order: 3;
min-height: 114px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
.fal-bento-tile--azul.fal-bento-tile--filas-1 .fal-bento-desc { font-size: 1.25rem; line-height: 1.3; }
.fal-bento-tile--azul.fal-bento-tile--filas-2 {
order: 4;
padding: 24px;
/* //cambio (2026-07-28): reportado por el usuario — las calificaciones no se veían como
el Figma (3216:810). Medido en el preview: el gap título→lista y el gap entre
calificaciones estaban INVERTIDOS respecto al diseño. .fal-bento-tile trae gap:1rem
(16px) por default (title→ratings-ul, ver regla base) y .fal-bento-ratings trae
gap:2rem (32px, item→item) — son los valores del layout DESKTOP, que en mobile el
Figma (#3216:816 gap:32 / #3216:819 gap:16) pide al revés. Se pisan ambos, scopeados
a esta tile para no tocar desktop ni el resto del bento. */
gap: 2rem;
}
.fal-bento-tile--azul.fal-bento-tile--filas-2 .fal-bento-ratings { gap: 1rem; }
.fal-bento-tile--celeste { order: 5; min-height: 148px; } /* Patrimonio */
.fal-bento-valor { font-size: 4rem; line-height: 1; } /* 64px (style_d7a082d6) */
.fal-bento-rating-valor {
font-size: 2.25rem; /* 36px (style_9a24f14b) */
letter-spacing: -0.02em; /* Figma nodo "A.ar" #3216:822 */
}
/* calificaciones: valor + label en fila (Figma 3216:820/824/828 — gap real 16px) */
.fal-bento-rating {
flex-direction: row;
align-items: flex-end;
gap: 1rem; /* //cambio: era 12px, el Figma mide 16 en 2 de las 3 filas */
}
}
/* ── Contacto (Figma 3125:1637) ── */
@media (max-width: 767.98px) {
#contacto .section-title { font-size: 2.25rem; letter-spacing: -0.03em; }
/* Figma mobile 3191:822: bajada en Cocogoose Light 20 (desktop va en Noto) */
#contacto .section-subtitle {
font-family: var(--font-title);
font-size: 1.25rem;
}
/* botón Enviar a la derecha, 56 de alto, Noto 500 16 (Figma 3125:1668) */
#contacto button[type="submit"] {
display: flex;
margin-left: auto;
height: 56px;
font-family: var(--font-body);
font-weight: 500;
font-size: 1rem;
}
}
/* ── Footer (Figma 3225:2835) ── */
@media (max-width: 767.98px) {
.fal-footer { padding: 2.5rem 0; }
.fal-footer .container { padding-inline: 1.875rem; } /* Figma: laterales 30px */
}
/* ── FAQ (Figma 3237:2943) — el bloque <992 de arriba (nav horizontal) queda para tablet ── */
@media (max-width: 767.98px) {
.fal-faq-titulo { font-size: 2.5rem; letter-spacing: -0.03em; } /* 40px (3237:2950) */
/* menú de categorías: columna apilada (Figma 3237:2954) — pisa el row con scroll de <992 */
.fal-faq-nav ul {
flex-direction: column;
overflow-x: visible;
gap: 0;
}
.fal-faq-nav-link {
white-space: normal;
padding: 12px 16px;
font-size: 1rem; /* inactivo: 16 UPPER gris (style_54b9bc71) */
border-bottom: 0;
}
.fal-faq-nav-link.is-active {
font-size: 1.125rem; /* activo: 18 Semilight UPPER azul + subrayado (3237:2961) */
font-weight: var(--font-weight-title-semibold);
border-bottom: 1px solid var(--color-border);
}
/* preguntas (style_52d5de0c: Noto SemiBold 16 ls -0.03) y respuestas (Noto 14) */
.fal-faq-toggle {
font-weight: 600;
letter-spacing: -0.03em;
color: var(--color-text-muted);
padding: 20px 0;
}
.fal-faq-item { border-bottom-color: var(--color-primary); }
.fal-faq-respuesta { font-size: 0.875rem; }
.fal-faq-cat + .fal-faq-cat { margin-top: 3rem; }
.fal-faq-layout { gap: 2rem; }
}