/* Sistema de landings de Lummen * * Salio de academias.html, que era la unica landing terminada y define el * registro: editorial contenido, cero gradientes, tipografia chica y densa, * y nada de controles nativos del navegador. * * Una sola estructura, tres recetas de color. El tema se elige con una clase * en el : .v-academias, .v-boutiques o .v-gimnasios. * * Los valores de cada receta salen de assets/design/tokens/lummen-ui.css * (--lm-vertical-*). Si cambian alla, cambian aca: correr ./sync-design.sh * para ver si el token de origen se movio. * * Sobre los *-rgb: las superficies de acento llevan texto encima, y ese texto * no siempre es claro. En academias y boutiques el acento es oscuro y el texto * va en chalk; en gimnasios el acento es lime y el texto tiene que ir en ink. * Por eso los colores "sobre acento" se declaran como triplete RGB y se usan * con alpha, en vez de hardcodear rgba(255,253,248,...). */ /* Subseteadas al rango latin mas flechas, en WOFF2: 1,05 MB de TTF pasaron a 132 KB. Los dos siguen siendo variables, asi que los pesos intermedios que usa la hoja (560, 620, 660) los interpola la fuente y no el navegador. La ruta va sin "../": la hoja vive en la raiz. */ @font-face { font-family: "Inter"; src: url("assets/design/fonts/inter/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Comfortaa"; src: url("assets/design/fonts/comfortaa/Comfortaa.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- Base comun a las tres verticales --------------------------------------------------------------- */ :root { --ease: cubic-bezier(.2, .8, .2, 1); --shell: min(100% - 48px, 1140px); --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-brand: "Comfortaa", var(--font-ui); } @media (max-width: 420px) { :root { --shell: min(100% - 40px, 1140px); } } /* --------------------------------------------------------------- Recetas por vertical --------------------------------------------------------------- */ /* Academias — danza, patin, teatro y canto. Papel calido, violeta, acentos en ambar y clay. */ .v-academias { --l-paper: #fff6e8; --l-paper-rgb: 255, 246, 232; --l-panel: #fffdf8; --l-ink: #171717; --l-muted: #66706b; --l-line: #ded8cc; --l-accent: #8171c8; --l-accent-rgb: 129, 113, 200; /* Variante profunda para las superficies que cargan texto. El violeta de marca con texto claro encima da 4.03:1 y no pasa AA. */ --l-accent-deep: #675aa0; --l-accent-hover: #5a4f8c; --l-accent-weak: #ebe7f8; --l-accent-text: #5f4fa8; --l-on-accent-rgb: 255, 253, 248; --l-error-on-accent: #ffd2c6; --l-error-border: #f0a898; --l-error-fill: rgba(240, 168, 152, .16); /* El panel de postulacion. En las verticales claras se rellena con el acento; en la oscura es una superficie elevada y el acento queda solo en el boton. Por eso el panel tiene sus propias variables. */ --l-apply-bg: var(--l-accent-deep); --l-apply-on-rgb: 255, 253, 248; --l-apply-border: 0; --l-apply-btn-bg: var(--l-panel); --l-apply-btn-fg: var(--l-ink); --l-apply-btn-hover: #ffffff; --l-shadow-card: 0 10px 30px rgba(23, 23, 23, .12); --l-shadow-pop: 0 14px 34px rgba(23, 23, 23, .22); --l-logo-filter: none; --l-eyebrow: #975d4c; --l-night: #241d31; --l-night-eyebrow: #d99a3d; --l-on-night-rgb: 255, 253, 248; } /* Estudios boutique — yoga y pilates. Rosa palido, acento rose, soporte violeta. */ .v-boutiques { --l-paper: #fff7fb; --l-paper-rgb: 255, 247, 251; --l-panel: #fffdf8; --l-ink: #171717; --l-muted: #70636b; --l-line: #e6d8de; --l-accent: #c76f8f; --l-accent-rgb: 199, 111, 143; /* El rosa de marca con texto claro encima da 3.39:1. */ --l-accent-deep: #8b4e64; --l-accent-hover: #7a4457; --l-accent-weak: #f7e5ed; --l-accent-text: #9c4e6c; --l-on-accent-rgb: 255, 253, 248; --l-error-on-accent: #ffe0c9; --l-error-border: #f2b98f; --l-error-fill: rgba(242, 185, 143, .18); /* El panel de postulacion. En las verticales claras se rellena con el acento; en la oscura es una superficie elevada y el acento queda solo en el boton. Por eso el panel tiene sus propias variables. */ --l-apply-bg: var(--l-accent-deep); --l-apply-on-rgb: 255, 253, 248; --l-apply-border: 0; --l-apply-btn-bg: var(--l-panel); --l-apply-btn-fg: var(--l-ink); --l-apply-btn-hover: #ffffff; --l-shadow-card: 0 10px 30px rgba(23, 23, 23, .12); --l-shadow-pop: 0 14px 34px rgba(23, 23, 23, .22); --l-logo-filter: none; --l-eyebrow: #7466b4; --l-night: #3b2a35; --l-night-eyebrow: #8fc7ac; --l-on-night-rgb: 255, 253, 248; } /* Fitness y fuerza — gimnasios, musculacion y boxes. Oscuro, acento lime. Ojo: sobre lime el texto va en ink, no en chalk. El bleed se invierte a claro porque oscuro sobre oscuro no separa nada. Se termina de ajustar cuando se construya la landing. */ .v-gimnasios { --l-paper: #141414; --l-paper-rgb: 20, 20, 20; --l-panel: #202322; --l-ink: #fffdf8; --l-muted: #a8afa4; --l-line: #333834; /* Teal con ink encima da 5.42:1: no necesita variante profunda. */ --l-accent: #3d9c8e; --l-accent-rgb: 61, 156, 142; --l-accent-deep: #3d9c8e; --l-accent-hover: #348a7d; --l-accent-weak: #172825; --l-accent-text: #4fb3a4; --l-on-accent-rgb: 23, 23, 23; /* Aca el panel NO se rellena con el acento: un bloque de color saturado a pantalla completa aplasta la pagina. Es una superficie elevada y el acento queda solo en el boton. Los errores, por lo tanto, van claros sobre oscuro y no oscuros sobre color. */ --l-apply-bg: #1c1f1e; --l-apply-on-rgb: 255, 253, 248; --l-apply-border: 1px solid #3c423d; --l-apply-btn-bg: #3d9c8e; --l-apply-btn-fg: #171717; --l-apply-btn-hover: #348a7d; --l-error-on-accent: #f0a898; --l-error-border: #c96a52; --l-error-fill: rgba(201, 106, 82, .16); /* Una sombra ink sobre papel #141414 no se ve. En oscuro la elevacion necesita negro pleno y mucha mas opacidad. */ --l-shadow-card: 0 10px 30px rgba(0, 0, 0, .55); --l-shadow-pop: 0 14px 34px rgba(0, 0, 0, .7); /* El logo es ink: sobre papel oscuro hay que invertirlo. */ --l-logo-filter: brightness(0) invert(1); --l-eyebrow: #d99a3d; --l-night: #f5f1e8; --l-night-eyebrow: #2f776d; --l-on-night-rgb: 23, 23, 23; } /* Lummen Core — la pagina general, sin vertical. Neutra: papel chalk, acento teal. Es la unica receta sin bleed propio ni panel de postulacion, porque el index no capta: deriva. */ .v-core { --l-paper: #fffdf8; --l-paper-rgb: 255, 253, 248; --l-panel: #f8faf7; --l-ink: #171717; --l-muted: #5f6965; --l-line: #e2ded3; --l-accent: #2f776d; --l-accent-rgb: 47, 119, 109; --l-accent-deep: #2a6b62; --l-accent-hover: #235850; --l-accent-weak: #dcece6; --l-accent-text: #1f5a52; --l-on-accent-rgb: 255, 253, 248; --l-error-on-accent: #ffd2c6; --l-error-border: #f0a898; --l-error-fill: rgba(240, 168, 152, .16); --l-apply-bg: var(--l-accent-deep); --l-apply-on-rgb: 255, 253, 248; --l-apply-border: 0; --l-apply-btn-bg: var(--l-panel); --l-apply-btn-fg: var(--l-ink); --l-apply-btn-hover: #ffffff; --l-shadow-card: 0 10px 30px rgba(23, 23, 23, .12); --l-shadow-pop: 0 14px 34px rgba(23, 23, 23, .22); --l-logo-filter: none; --l-eyebrow: #975d4c; --l-night: #1d2422; --l-night-eyebrow: #8fc7ac; --l-on-night-rgb: 255, 253, 248; } /* --------------------------------------------------------------- Reset y tipografia --------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--l-paper); color: var(--l-ink); font-family: var(--font-ui); font-size: 17px; font-weight: 420; line-height: 1.58; -webkit-font-smoothing: antialiased; /* Red de seguridad. Nada desborda hoy; esto evita que un contenido futuro genere scroll horizontal en pantallas angostas. */ overflow-x: hidden; } h1, h2, h3, h4, p, ul { margin: 0; } ul { padding: 0; list-style: none; } a { color: inherit; } img { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--l-accent-deep); outline-offset: 3px; border-radius: 3px; } .shell { width: var(--shell); margin-inline: auto; } .section { padding-block: clamp(56px, 7vw, 96px); } .lead { font-size: clamp(17.5px, 1.6vw, 21px); font-weight: 400; line-height: 1.5; color: var(--l-muted); max-width: 52ch; } .eyebrow { font-family: var(--font-brand); font-size: 12px; font-weight: 600; letter-spacing: .16em; line-height: 1; text-transform: uppercase; color: var(--l-eyebrow); margin-bottom: 14px; } .h1 { font-size: clamp(34px, 5vw, 62px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; max-width: 15ch; } .h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; max-width: 20ch; } /* --------------------------------------------------------------- Botones --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--l-accent-deep); color: rgb(var(--l-on-accent-rgb)); font-size: 16px; font-weight: 620; letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: background 120ms var(--ease); } .btn:hover { background: var(--l-accent-hover); } .btn--ghost { background: transparent; color: var(--l-ink); border: 1px solid var(--l-line); } .btn--ghost:hover { background: var(--l-panel); } .btn--block { width: 100%; } /* --------------------------------------------------------------- Franja de estado y navegacion --------------------------------------------------------------- */ .status { background: var(--l-accent-weak); border-bottom: 1px solid rgba(var(--l-accent-rgb), .25); font-size: 13.5px; } .status .shell { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 44px; padding-block: 9px; flex-wrap: wrap; } .status b { font-weight: 660; } .status a { font-weight: 620; color: var(--l-accent-text); white-space: nowrap; } .nav { position: sticky; top: 0; z-index: 20; background: rgba(var(--l-paper-rgb), .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--l-line); } .nav .shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; } .nav-logo { width: 146px; filter: var(--l-logo-filter); } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a { font-size: 15px; font-weight: 560; text-decoration: none; color: var(--l-muted); } .nav-links a:hover { color: var(--l-ink); } .nav-links .btn { min-height: 44px; padding: 0 18px; font-size: 15px; color: rgb(var(--l-on-accent-rgb)); white-space: nowrap; } .nav-short { display: none; } @media (max-width: 880px) { .nav-links a:not(.btn) { display: none; } .nav-long { display: none; } .nav-short { display: inline; } } /* --------------------------------------------------------------- Hero --------------------------------------------------------------- */ .hero { padding-block: clamp(52px, 6.5vw, 88px) clamp(44px, 5.5vw, 72px); } .hero .lead { margin-top: 22px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .hero-fine { margin-top: 22px; font-size: 14.5px; color: var(--l-muted); max-width: 56ch; } /* --------------------------------------------------------------- Para quien es --------------------------------------------------------------- */ .who { border-top: 1px solid var(--l-line); border-bottom: 1px solid var(--l-line); padding-block: clamp(32px, 4vw, 46px); } .who-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; } .who h2 { font-size: 12px; font-weight: 620; letter-spacing: .14em; text-transform: uppercase; color: var(--l-muted); margin-top: 9px; } .who-list { display: flex; flex-wrap: wrap; gap: 10px; } .who-list li { border: 1px solid var(--l-line); background: var(--l-panel); border-radius: 999px; padding: 9px 17px; font-size: 15.5px; font-weight: 540; } .who-note { margin-top: 18px; color: var(--l-muted); font-size: 15.5px; max-width: 62ch; } @media (max-width: 820px) { .who-grid { grid-template-columns: 1fr; gap: 18px; } .who h2 { margin-top: 0; } } /* --------------------------------------------------------------- Que incluye --------------------------------------------------------------- */ .feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; margin-top: clamp(32px, 4vw, 48px); } .feat li { padding: 22px 0; border-top: 1px solid var(--l-line); } .feat b { display: block; font-size: 17px; font-weight: 660; letter-spacing: -.012em; } .feat span { display: block; margin-top: 5px; color: var(--l-muted); font-size: 15.5px; } @media (max-width: 900px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; } } @media (max-width: 600px) { .feat { grid-template-columns: 1fr; } } /* --------------------------------------------------------------- Bloque a sangre --------------------------------------------------------------- */ /* No hace falta ninguna tecnica de "full bleed": la seccion es hija directa de
y ya ocupa todo el ancho. La version con calc(50% - 50vw) la estiraba 15px de mas, porque 50vw incluye la barra de scroll, y eso generaba una barra horizontal sin cambiar nada visualmente. */ .night { background: var(--l-night); color: rgb(var(--l-on-night-rgb)); } .night .lead { color: rgba(var(--l-on-night-rgb), .74); } .night .eyebrow { color: var(--l-night-eyebrow); } .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .chips li { border: 1px solid rgba(var(--l-on-night-rgb), .28); border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 520; } /* --------------------------------------------------------------- Tarjetas de vertical (solo en el index) Cada tarjeta lleva la clase de tema de su vertical, asi que se pinta con su propia receta aunque este dentro de una pagina core. Es una muestra real del sistema, no una aproximacion. --------------------------------------------------------------- */ .verticals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); } @media (max-width: 900px) { .verticals { grid-template-columns: 1fr; } } .vcard { display: grid; align-content: space-between; gap: 30px; min-height: 280px; padding: clamp(22px, 2.6vw, 30px); border: 1px solid var(--l-line); border-radius: 14px; background: var(--l-paper); color: var(--l-ink); text-decoration: none; transition: border-color 160ms var(--ease), transform 160ms var(--ease); } .vcard:hover { border-color: var(--l-accent-deep); transform: translateY(-2px); } .vcard-eyebrow { display: block; margin-bottom: 12px; font-family: var(--font-brand); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; line-height: 1; text-transform: uppercase; color: var(--l-eyebrow); } .vcard h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.024em; line-height: 1.06; } .vcard p { margin-top: 10px; color: var(--l-muted); font-size: 15.5px; line-height: 1.5; } .vcard-go { display: inline-flex; align-items: center; gap: 9px; color: var(--l-accent-deep); font-size: 15px; font-weight: 640; } .vcard-go::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 160ms var(--ease); } .vcard:hover .vcard-go::after { transform: rotate(45deg) translate(2px, -2px); } /* --------------------------------------------------------------- Preguntas --------------------------------------------------------------- */ .faq { margin-top: clamp(28px, 3.5vw, 42px); } .faq li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; padding: 24px 0; border-top: 1px solid var(--l-line); align-items: start; } .faq li:last-child { border-bottom: 1px solid var(--l-line); } .faq h3 { font-size: 18px; font-weight: 660; letter-spacing: -.015em; line-height: 1.3; } .faq p { color: var(--l-muted); } @media (max-width: 820px) { .faq li { grid-template-columns: 1fr; gap: 8px; } } /* --------------------------------------------------------------- Programa fundador --------------------------------------------------------------- */ /* El foco global es --l-accent-deep, y dentro de este panel ese color ES el fondo: el contorno desaparece (contraste 1.00). Va con el color de texto del panel, que si contrasta en las cuatro recetas. */ .apply :focus-visible { outline-color: rgb(var(--l-on-accent-rgb)); } .apply { background: var(--l-apply-bg); color: rgb(var(--l-apply-on-rgb)); border: var(--l-apply-border); /* Dentro del panel, "sobre acento" pasa a significar "sobre este panel". Todo lo de adentro hereda el triplete correcto sin reglas extra. */ --l-on-accent-rgb: var(--l-apply-on-rgb); border-radius: 14px; padding: clamp(30px, 4.2vw, 60px); box-shadow: var(--l-shadow-card); } .apply .eyebrow { color: rgba(var(--l-on-accent-rgb), .85); } .apply .lead { color: rgba(var(--l-on-accent-rgb), .88); margin-top: 20px; } .apply-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .apply-cupo { font-size: 12px; font-weight: 660; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(var(--l-on-accent-rgb), .45); border-radius: 999px; padding: 7px 15px; white-space: nowrap; } .deal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: clamp(34px, 4vw, 50px); } .deal h3 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--l-on-accent-rgb), .85); margin-bottom: 14px; } .deal li { padding: 13px 0; border-top: 1px solid rgba(var(--l-on-accent-rgb), .2); } .deal b { display: block; font-size: 16.5px; font-weight: 640; margin-bottom: 2px; } .deal span { font-size: 15px; color: rgba(var(--l-on-accent-rgb), .85); } @media (max-width: 760px) { .deal { grid-template-columns: 1fr; gap: 24px; } } /* --------------------------------------------------------------- Formulario --------------------------------------------------------------- */ .form { margin-top: clamp(34px, 4vw, 50px); padding-top: clamp(30px, 3.5vw, 40px); border-top: 1px solid rgba(var(--l-on-accent-rgb), .2); display: grid; gap: 16px; max-width: 680px; } .form-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 2px; } .form-sub { color: rgba(var(--l-on-accent-rgb), .85); font-size: 15px; margin-bottom: 10px; max-width: 46ch; } .field { display: grid; gap: 6px; } .field label { font-size: 12.5px; font-weight: 620; color: rgba(var(--l-on-accent-rgb), .85); } .field input, .field textarea { width: 100%; min-height: 46px; padding: 11px 13px; border-radius: 8px; border: 1px solid rgba(var(--l-on-accent-rgb), .55); background: rgba(var(--l-on-accent-rgb), .12); color: rgb(var(--l-on-accent-rgb)); font-size: 16px; } .field textarea { min-height: 88px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: rgba(var(--l-on-accent-rgb), .82); } .form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 560px) { .form-2 { grid-template-columns: 1fr; } } /* Select propio: nunca el nativo del navegador, cuyo desplegable no se puede estilar y cambia en cada sistema operativo. */ .select { position: relative; } .select-btn { width: 100%; min-height: 46px; padding: 11px 40px 11px 13px; border-radius: 8px; border: 1px solid rgba(var(--l-on-accent-rgb), .55); background: rgba(var(--l-on-accent-rgb), .12); color: rgb(var(--l-on-accent-rgb)); font-size: 16px; text-align: left; cursor: pointer; display: flex; align-items: center; } .select-btn[data-placeholder="true"] { color: rgba(var(--l-on-accent-rgb), .82); } .select-btn::after { content: ""; position: absolute; right: 15px; top: 50%; width: 9px; height: 9px; border-right: 2px solid rgba(var(--l-on-accent-rgb), .7); border-bottom: 2px solid rgba(var(--l-on-accent-rgb), .7); transform: translateY(-70%) rotate(45deg); pointer-events: none; transition: transform 120ms var(--ease); } .select.is-open .select-btn::after { transform: translateY(-25%) rotate(225deg); } .select-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: var(--l-panel); color: var(--l-ink); border: 1px solid var(--l-line); border-radius: 10px; box-shadow: var(--l-shadow-pop); padding: 6px; max-height: 264px; overflow-y: auto; display: none; } .select.is-open .select-list { display: block; } .select-option { padding: 11px 13px; border-radius: 6px; font-size: 15.5px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .select-option[data-active="true"] { background: var(--l-accent-weak); } .select-option[aria-selected="true"] { font-weight: 640; } .select-option[aria-selected="true"]::after { content: "✓"; color: var(--l-accent-deep); font-weight: 800; font-size: 13px; } /* Validacion propia: solo completitud, y nunca los globos del navegador. El form lleva novalidate. Filtrar leads con un regex de formato es peor que recibir un dato imperfecto. */ .field-error { display: none; font-size: 13px; font-weight: 560; color: var(--l-error-on-accent); } .field.is-invalid .field-error { display: block; } .field.is-invalid input, .field.is-invalid textarea, .field.is-invalid .select-btn { border-color: var(--l-error-border); background: var(--l-error-fill); } /* Honeypot: tiene que ser invisible para personas pero completable por un bot que rellene el DOM. Por eso no va display:none, que muchos bots detectan y saltean. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Error de envio, distinto de los errores de campo: aca fallo el guardado, no la carga. */ .form-error { display: none; padding: 12px 14px; border: 1px solid var(--l-error-border); border-radius: 8px; background: var(--l-error-fill); color: rgb(var(--l-on-accent-rgb)); font-size: 14.5px; } .form-error.is-visible { display: block; } .btn[aria-busy="true"] { opacity: .7; cursor: progress; } .apply .btn { background: var(--l-apply-btn-bg); color: var(--l-apply-btn-fg); margin-top: 6px; justify-self: start; padding: 0 34px; } .apply .btn:hover { background: var(--l-apply-btn-hover); } .form-note { font-size: 13.5px; color: rgba(var(--l-on-accent-rgb), .85); } .form-done { display: none; margin-top: clamp(34px, 4vw, 50px); padding: 24px; border: 1px solid rgba(var(--l-on-accent-rgb), .45); border-radius: 10px; background: rgba(var(--l-on-accent-rgb), .14); } .form-done b { font-weight: 660; } /* --------------------------------------------------------------- Footer --------------------------------------------------------------- */ .footer { border-top: 1px solid var(--l-line); padding-block: 48px 36px; font-size: 15px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; } .footer h4 { margin: 0 0 12px; font-size: 11px; font-weight: 620; letter-spacing: .14em; text-transform: uppercase; color: var(--l-muted); } .footer li { padding: 5px 0; color: var(--l-muted); } .footer li b { color: var(--l-ink); font-weight: 560; } .footer-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 620; letter-spacing: .08em; text-transform: uppercase; color: var(--l-eyebrow); border: 1px solid var(--l-line); border-radius: 999px; padding: 2px 8px; } .footer-logo { width: 128px; margin-bottom: 14px; filter: var(--l-logo-filter); } .footer-note { color: var(--l-muted); max-width: 34ch; } .footer-legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--l-line); font-size: 13.5px; color: var(--l-muted); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } } /* --------------------------------------------------------------- Aviso de privacidad El unico lugar del sitio con prosa larga: las ocho landings son bloques cortos y ninguna clase servia para leer seguido. Una columna angosta, jerarquia por tamano y nada mas. --------------------------------------------------------------- */ .legal { max-width: 64ch; } .legal h2 { margin-top: 44px; font-size: clamp(19px, 1.9vw, 23px); font-weight: 660; letter-spacing: -.01em; line-height: 1.2; } .legal h2:first-child { margin-top: 0; } .legal p, .legal li { margin-top: 14px; font-size: 16.5px; line-height: 1.62; color: var(--l-muted); } .legal ul { margin-top: 6px; } .legal li { position: relative; padding-left: 19px; } .legal li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--l-accent-rgb), .6); } .legal b { color: var(--l-ink); font-weight: 620; } /* Las dos leyendas de la Ley 25.326 son cita textual, no nuestra voz. Van marcadas como tal para que se lea que no las escribimos nosotros. */ .legal-cite { margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--l-line); font-size: 14.5px; line-height: 1.55; } .legal-updated { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--l-line); font-size: 14px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; } }