/* ========================================================================== LAWYERS FOR INVESTORS — tokens.css Custom properties de marca extraídas del Figma D21POTqghYA2Jn1jJHjqC0. Fuente: recorrido de los 8 frames (1:3, 11:19, 11:613, 11:149, 11:276, 11:437, 11:525, 11:701). Todos los valores nacen del diseño, no inventados. Consolidación aplicada: - Tamaños casi idénticos fusionados a una escala coherente. El valor ORIGINAL de cada uno queda anotado en el comentario de su token. - Los decimales del header/footer (14.72 / 22.06 / 18.83) son artefactos de un grupo escalado en el canvas (se renderiza a 1442.64px en vez de 1440). Se redondean a 15 / 22 / 19; original anotado. - letter-spacing: en TODO el diseño donde existe es exactamente -0.03em (-1.2px@40, -1.5px@50, -0.84px@28, -0.69px@23, -0.6px@20, -0.45px@15…). Se unifica en un solo token. Las excepciones (nav, footer, secciones "equipo"/"servicios" del home, info y labels de Contacto) van sin tracking. ========================================================================== */ /* ========================================================================== 1. TIPOGRAFÍA — @font-face (Area Normal, Blaze Type) Los 7 estilos usados en el Figma: Thin, Regular, Regular Italic, SemiBold, Bold, Bold Italic, ExtraBold. (No se cargan Light/Medium/Black.) Preload en enqueue.php SOLO los pesos del above-the-fold (hero/nav): ExtraBold y Regular. El resto carga con swap. ========================================================================== */ @font-face { font-family: 'Area Normal'; font-style: normal; font-weight: 100; /* Thin */ font-display: swap; src: url('../fonts/Area-Normal-Thin.woff2') format('woff2'); } @font-face { font-family: 'Area Normal'; font-style: normal; font-weight: 400; /* Regular */ font-display: swap; src: url('../fonts/Area-Normal-Regular.woff2') format('woff2'); } @font-face { font-family: 'Area Normal'; font-style: italic; font-weight: 400; /* Regular Italic */ font-display: swap; src: url('../fonts/Area-Normal-Italic.woff2') format('woff2'); } @font-face { font-family: 'Area Normal'; font-style: normal; font-weight: 600; /* SemiBold */ font-display: swap; src: url('../fonts/Area-Normal-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Area Normal'; font-style: normal; font-weight: 700; /* Bold */ font-display: swap; src: url('../fonts/Area-Normal-Bold.woff2') format('woff2'); } @font-face { font-family: 'Area Normal'; font-style: italic; font-weight: 700; /* Bold Italic — nombre del cliente en single-caso */ font-display: swap; src: url('../fonts/Area-Normal-BoldItalic.woff2') format('woff2'); } @font-face { font-family: 'Area Normal'; font-style: normal; font-weight: 800; /* ExtraBold */ font-display: swap; src: url('../fonts/Area-Normal-ExtraBold.woff2') format('woff2'); } :root { /* ======================================================================== 2. FAMILIA Y PESOS ======================================================================== */ --lfi-font: 'Area Normal', system-ui, -apple-system, 'Segoe UI', sans-serif; --lfi-weight-thin: 100; /* footer (enlaces e info), labels de formulario */ --lfi-weight-regular: 400; /* cuerpo de texto, párrafos, enlaces "VER MÁS" */ --lfi-weight-semibold: 600; /* subtítulo CEO, etiqueta categoría, info Contacto */ --lfi-weight-bold: 700; /* nav activo, spans destacados, títulos de tarjeta */ --lfi-weight-extrabold: 800; /* titulares de sección y display */ /* ======================================================================== 3. COLOR Solo 3 colores + un soft en todo el diseño. Un único navy (#10214D): el #14214A que aparecía en "sobre nosotros" del HOME era un descuido del Figma, no lo define la marca. ======================================================================== */ --lfi-navy: #10214D; /* Primario 2 — texto principal navy y fondos oscuros de sección */ --lfi-red: #FF2726; /* Primario 1 — acentos, CTAs, títulos rojos */ --lfi-white: #FFFFFF; /* alto contraste + fondo de página/Actualidad */ --lfi-soft: rgba(16, 33, 77, 0.05); /* navy 5% — fondos de tarjetas (casos, actualidad) y cajas (áreas/sectores, sección "lawyers for investors") */ /* ======================================================================== 4. ESCALA TIPOGRÁFICA (font-size) Escala consolidada. Comentario = valor(es) ORIGINAL(es) del Figma + uso. Ordenada de menor a mayor. ======================================================================== */ --lfi-fs-14: 14px; /* 14 — extracto y fecha de tarjeta (Actualidad home) */ --lfi-fs-15: 15px; /* 15 (nav header 14.72→15) — nav, etiqueta categoría, labels de formulario */ --lfi-fs-17: 17px; /* 17 — "VER MÁS" de tarjeta (Actualidad home) */ --lfi-fs-19: 19px; /* 19 (footer info 18.83→19) — footer info empresa, título de post en tarjeta, info y campos de Contacto */ --lfi-fs-20: 20px; /* 20 — cuerpo de tarjeta (Servicios), nombre/cargo del cliente (single caso) */ --lfi-fs-21: 21px; /* 21 — título de área (Servicios), testimonio de tarjeta (Casos archive), texto de botón "VER MÁS X" */ --lfi-fs-22: 22px; /* 22 (footer enlaces 22.06→22) — enlaces del footer */ --lfi-fs-23: 23px; /* 23 — título de tarjeta (Casos archive), cuerpo del testimonio (single caso/post), "VER MÁS" (Casos home) */ --lfi-fs-24: 24px; /* 24 — título de sector (Servicios) */ --lfi-fs-25: 25px; /* 25 — spans del slider (home), testimonio (Casos home) */ --lfi-fs-27: 27px; /* 27 — cuerpo de EQUIPO (viewport, bio, CV) */ --lfi-fs-28: 28px; /* 28 — cuerpo "lawyers for investors", "SABER MÁS", cita en cursiva de EQUIPO */ --lfi-fs-30: 30px; /* 30 — párrafo "equipo" home, "CONÓCENOS", "VER SERVICIOS" */ --lfi-fs-31: 31px; /* 31 — "sobre nosotros": lead y "ASÍ LO HACEMOS POSIBLE" */ --lfi-fs-33: 33px; /* 33 — titular del slider (home) */ --lfi-fs-36: 36px; /* 35/36/37 consolidados. Originales: 35 (título single caso/post), 36 ("sobre nosotros" H2, subtítulo CEO equipo), 37 (bloque "servicios" en EQUIPO) */ --lfi-fs-39: 39px; /* 39 — subtítulo del viewport de EQUIPO */ --lfi-fs-40: 40px; /* 40/41 consolidados. Originales: 40 (títulos de sección: CASOS EXITO, ACTUALIDAD LFI, CURRÍCULUM, ÁREAS/SECTORES), 41 (secciones "equipo"/"servicios" del home) */ --lfi-fs-50: 50px; /* 50 — titulares de intro grandes (Servicios, Casos, Contacto) y H1 de EQUIPO */ --lfi-fs-52: 52px; /* 52 — "Santiago Hernández" (nombre, EQUIPO) */ /* ======================================================================== 5. INTERLINEADO (line-height) La mayoría del texto usa "normal". Estos son los leadings explícitos del Figma, en unitless para que escalen. Comentario = px original / tamaño. ======================================================================== */ --lfi-lh-normal: normal; --lfi-lh-solid: 0.95; /* 49px sobre display 50–52 (nombre Santiago, headings de EQUIPO con leading fijo) */ --lfi-lh-display: 1.06; /* 53/50 — titulares de intro (Servicios/Casos) */ --lfi-lh-heading: 1.14; /* 57/50 — H1 de EQUIPO */ --lfi-lh-snug: 1.16; /* 22/19 — título de post en tarjeta */ --lfi-lh-tight-body: 1.30; /* 35/27 — cuerpo de EQUIPO (viewport/bio) */ --lfi-lh-body: 1.48; /* 34/23 — cuerpo del artículo (single post) */ --lfi-lh-loose-body: 1.52; /* 41/27 — cuerpo del CV (EQUIPO) */ /* ======================================================================== 6. LETTER-SPACING (tracking) Uniforme -0.03em donde existe. Cero en las excepciones. ======================================================================== */ --lfi-ls-tight: -0.03em; /* titulares y cuerpo navy en casi todo el sitio */ --lfi-ls-none: 0; /* nav header, footer, secciones "equipo"/"servicios" del home, info y labels de Contacto */ /* ======================================================================== 7. CONTENEDOR Y GUTTERS Diseño a 1440px. El padding lateral del Figma NO es uniforme entre plantillas (izq observado: 88, 91, 93, 98, 104, 108, 128, 133px). Se define un gutter principal y dos variantes documentadas para poder defender la decisión en revisión (regla 4 del brief). ======================================================================== */ --lfi-design-width: 1440px; /* ancho del artboard de Figma (referencia) */ --lfi-gutter: 24px; /* padding lateral MÓVIL (base). Se redefine por breakpoint al final del archivo: ≥768 = 48px, ≥1024 = 108px (valor real del Figma desktop). Un solo token arrastra contenedor, header, footer y slider. DECISIÓN MÓVIL documentada. */ --lfi-gutter-narrow: 88px; /* Servicios (88) y Actualidad archive (~91) — desktop */ --lfi-gutter-wide: 128px; /* plantillas single (caso/post): 128–133 — desktop */ --lfi-tap-min: 44px; /* área táctil mínima (WCAG 2.5.5) en móvil */ --lfi-content: 1224px; /* = 1440 - 2×108. Ancho de contenido principal */ --lfi-content-read: 1184px; /* = 1440 - 2×128. Medida de lectura de artículos (single caso/post) */ /* ======================================================================== 8. ESPACIADO (gaps, paddings internos, ritmo vertical) Valores recurrentes del Figma. Los one-off viven en el CSS de su sección. ======================================================================== */ --lfi-gap-grid: 40px; /* separación entre tarjetas en rejilla. Observado: casos archive 41 (h) / 37 (v), sectores 35 (h) / 41 (v), casos home 43. Se unifica en 40 */ --lfi-pad-card: 40px; /* padding interno de tarjeta. Observado: actualidad 33, casos 40–44, servicios ~53. Referencia 40 */ --lfi-gap-heading: 72px; /* separación título de sección → contenido (observado 70–88) */ /* ======================================================================== 9. RADIOS Y BOTÓN ======================================================================== */ --lfi-radius-card: 24px; /* tarjetas y cajas (casos, actualidad, áreas, sectores, "lawyers for investors") */ --lfi-radius-btn: 13px; /* botones rojos y campos de formulario (Contacto) */ --lfi-btn-height: 56px; /* botón "VER MÁS CASOS/POSTS" (313×56) */ --lfi-btn-pad-x: 54px; /* ~ (313 - ancho de texto) / 2 */ --lfi-field-height: 55px; /* campos del formulario de Contacto */ /* ======================================================================== 10. COMPONENTE: HEADER (frame node 11:108, 1440×115.79) Medidas exactas del get_design_context. El header es fijo en las 8 plantillas; --lfi-header-h alimenta también el padding-top del body. El valor se reduce en móvil (override en layout.css) y layout lo hereda. ======================================================================== */ --lfi-header-h: 116px; /* alto de la barra (115.79→116) */ --lfi-header-pl: 59px; /* padding izq = posición X del logo */ --lfi-header-pr: 43px; /* padding der = hueco tras el último item nav */ --lfi-header-logo-w: 210px; /* caja del logo (210×51) */ --lfi-header-logo-h: 51px; --lfi-header-nav-gap: 47px; /* separación entre items (observado 44–50) */ --lfi-header-underline-h: 2px; /* subrayado rojo del item activo */ --lfi-header-h-mobile: 72px; /* alto del header en móvil/tablet; en ≥1024 layout.css lo reasigna a --lfi-header-h */ /* ======================================================================== 11. COMPONENTE: FOOTER (frame node 3:24, 1440×439.4) Layout de 3 columnas con dos separadores verticales. Posiciones X de columna (Figma): info 73 · nav 753 · legal 1131. Las columnas nav y legal arrancan más abajo que la info (stagger del Figma): nav a y=129, legal a y=163, con el bloque a y=104. ======================================================================== */ --lfi-footer-h: 439px; /* alto de la sección (min-height en desktop) */ --lfi-footer-pt: 104px; /* padding-top hasta logo / primera fila */ --lfi-footer-pb: 72px; /* padding-bottom (aire inferior) */ --lfi-footer-pl: 73px; /* padding izq (col info a X=73) */ --lfi-footer-pr: 78px; /* padding der (col legal a 78 del borde) */ --lfi-footer-logo-w: 307px; /* logo del footer (307×75) */ --lfi-footer-logo-h: 75px; --lfi-footer-logo-gap: 16px; /* logo -> primera línea de dirección (195-179) */ --lfi-footer-row: 33px; /* ritmo vertical de líneas (dirección y menús) */ --lfi-footer-nav-offset: 25px; /* desplome de la col nav (129-104) */ --lfi-footer-legal-offset: 59px; /* desplome de la col legal (163-104) */ --lfi-footer-divider-h: 179px; /* alto del separador vertical (178.6) */ --lfi-footer-divider-top: 18px; /* inicio del separador respecto al top (122-104) */ --lfi-footer-divider-inset: 90px; /* distancia del separador a la izq de su columna */ --lfi-footer-divider-color: var(--lfi-red); /* separadores verticales ROJOS (confirmado por el cliente; en el Figma 3:24 se dibujan tenues, pero manda el cliente: #FF2726) */ /* ======================================================================== 12. COMPONENTES DE SECCIÓN Tokens de las secciones de las 8 plantillas, consolidados aquí desde el CSS de cada sección. Los tamaños de tipografía/imagen y anchos marcados "(Figma)" son fieles al diseño. ESTADO ESPACIADOS: - HOME: MEDIDOS contra el frame 1:3 de la copia Pro (ppLpNuN0tRN8WkGEGsuS4F), que Marc mantiene sincronizada con el original de AMT. Ya no quedan estimados en las secciones del home. - Resto de plantillas (equipo, servicios, casos archive/single, contacto, actualidad archive/single): sus espaciados siguen marcados "(estimado)" PENDIENTES de medir (fuera del alcance de esta pasada de HOME). ======================================================================== */ /* --- HOME: hero --- */ --lfi-hero-h: 600px; /* alto viewport desktop (Figma 1440×600) */ --lfi-hero-h-tablet: 480px; /* decisión móvil */ --lfi-hero-h-mobile: 360px; /* decisión móvil */ /* --- HOME: sobre nosotros (Figma 21:24, medido en la copia Pro) --- Orden real de arriba abajo: lead(y82) · titular(y235) · sub(y286). El titular "Tenemos un negocio de éxito" va ANTES que "ASÍ LO HACEMOS POSIBLE". */ --lfi-sobre-min-h: 406px; /* alto banda navy (Figma) */ --lfi-sobre-pad-y: 82px; /* aire sup/inf (Figma 82/80) */ --lfi-sobre-gap-lead: 35px; /* lead → titular (Figma) */ --lfi-sobre-gap-title: 11px; /* titular → sub (Figma) */ /* --- HOME: slider propuestas valor (Figma 7:282/298/310, medido) --- OJO: la banda es ROJA (no navy). Texto blanco. */ --lfi-slider-min-h: 530px; /* alto banda (Figma) */ --lfi-slider-media-w: 552px; /* ancho columna imagen (Figma) */ --lfi-slider-col-gap: 79px; /* imagen→texto 631-552 (Figma) */ --lfi-slider-content-max: 700px; /* ancho columna texto (Figma) */ --lfi-slider-content-pt: 80px; /* top del texto en la banda (Figma: título y=80) */ --lfi-slider-text-gap: 41px; /* título→cuerpo (Figma, era 24 est.) */ --lfi-slider-para-gap: 24px; /* salto entre párrafos del cuerpo (Figma) */ --lfi-slider-dot-size: 12px; /* diámetro punto visible (Figma) */ --lfi-slider-dots-gap: 13px; /* separación entre puntos (Figma: fila 62px = 3·12+2·13) */ --lfi-slider-dots-mt: 24px; /* cuerpo→puntos en móvil (in-flow) */ /* Posición desktop de los dots DENTRO de la columna de texto (Figma 7:282/298/310): x=688, y=496 en la banda de 530. La columna de texto empieza en media-w(552)+col-gap(79)=631, así que la sangría de los dots es 688-631=57. El borde inferior: 530-(496+12)=22. */ --lfi-slider-dots-inset: 57px; /* sangría de los dots dentro de la col. de texto */ --lfi-slider-dots-bottom: 22px; /* dots respecto al borde inferior de la banda */ /* --- HOME: lawyers for investors (Figma 21:25, medido) --- */ --lfi-lawyers-min-h: 398px; /* alto banda (Figma) */ --lfi-lawyers-pad-top: 79px; /* texto a y79 en la banda (Figma) */ --lfi-lawyers-pad-bottom: 49px; /* aire inferior (Figma) */ /* --- HOME: casos (Figma 7:269, medido) --- */ --lfi-casos-home-pad-top: 66px; /* banda lawyers→titular CASOS (Figma) */ --lfi-casos-home-pad-bottom: 60px; /* SABER MÁS→borde inferior (Figma) */ --lfi-casos-home-title-gap: 40px; /* titular→rejilla (Figma 37→40) */ --lfi-casos-home-cta-mt: 31px; /* rejilla→CTA "SABER MÁS" (Figma) */ /* --- HOME: equipo / "Mucho más que" (Figma 7:196, medido) --- OJO: la banda es ROJA (no navy). Título/párrafo/CTA blancos. */ --lfi-equipo-home-min-h: 355px; /* alto banda (Figma) */ --lfi-equipo-home-pad-y: 82px; /* aire sup/inf (Figma 82/63; centrado cubre resto) */ --lfi-equipo-home-gap-title: 4px; /* titular→párrafo (Figma ~3) */ --lfi-equipo-home-gap-text: 41px; /* párrafo→CONÓCENOS (Figma) */ /* --- HOME: servicios (Figma 7:205, medido). Título BLANCO, CTA BLANCO --- */ --lfi-servicios-home-min-h: 355px; /* alto banda (Figma) */ --lfi-servicios-home-max-w:1198px; /* ancho titular (Figma) */ --lfi-servicios-home-pad-y: 94px; /* aire sup/inf (Figma 94/95) */ --lfi-servicios-home-gap: 16px; /* titular→CTA (Figma, era 32 est.) */ /* --- HOME: actualidad (Figma 11:17, medido) --- */ --lfi-actualidad-home-pad-top: 96px; /* header→titular (Figma) */ --lfi-actualidad-home-pad-bottom:87px; /* rejilla→borde inferior (Figma) */ --lfi-actualidad-home-title-gap: 43px; /* titular→rejilla (Figma, era 72 est.) */ --lfi-actualidad-home-col-min: 360px; /* min columna auto-fit (1 post no se estira) */ /* --- Tarjetas (componentes reutilizados) --- */ --lfi-casos-card-gap: 20px; /* interior tarjeta caso: título/testimonio/VER MÁS (estimado) */ --lfi-card-post-gap: 16px; /* interior tarjeta post: label/título/extracto (estimado) */ /* --- CASOS archive --- */ --lfi-casos-col-min: 460px; /* min columna auto-fill → 2 col a 1224 (tarjeta 594) */ --lfi-casos-pad-top: 69px; /* intro→rejilla (Figma, mitad del gap 138) */ --lfi-casos-pad-bottom: 53px; /* rejilla→botón "VER MÁS CASOS" (Figma) */ --lfi-casos-intro-pad-top: 124px; /* header→titular (Figma 240-116) */ --lfi-casos-intro-pad-bottom:69px; /* titular→rejilla (Figma, mitad del gap 138) */ /* --- CASO single --- */ --lfi-caso-hero-h: 602px; /* alto hero desktop (Figma / lfi-hero) */ --lfi-caso-hero-h-tablet: 420px; /* decisión móvil */ --lfi-caso-hero-h-mobile: 280px; /* decisión móvil */ --lfi-caso-gap-title: 16px; /* título→testimonio (Figma 907-891) */ --lfi-caso-gap-autor: 48px; /* testimonio→autor (Figma ~48) */ --lfi-caso-autor-line: 12px; /* logo/nombre/cargo/url (estimado) */ --lfi-caso-logo-h: 60px; /* alto logo cliente (estimado) */ /* --- ACTUALIDAD archive --- */ --lfi-actualidad-hero-h: 602px; /* alto hero (Figma / lfi-hero) */ --lfi-actualidad-hero-h-mobile:320px; /* decisión móvil */ --lfi-btn-min-w: 313px; /* ancho botón "VER MÁS X" (Figma 313×56) */ /* --- POST single --- */ --lfi-post-hero-h: 602px; /* alto hero desktop (Figma / lfi-hero) */ --lfi-post-hero-h-tablet: 420px; /* decisión móvil */ --lfi-post-hero-h-mobile: 280px; /* decisión móvil */ --lfi-post-gap-hero: 72px; /* hero→título (= gap-heading) */ --lfi-post-gap-hero-mobile: 32px; /* decisión móvil */ --lfi-post-gap-title-date: 16px; /* título→fecha */ --lfi-post-gap-head-body: 40px; /* cabecera→cuerpo */ --lfi-post-block-space: 34px; /* separación bloques del cuerpo (= interlineado 34) */ --lfi-post-heading-mt: 48px; /* aire antes de h2/h3 */ --lfi-post-heading-mb: 16px; /* aire después de h2/h3 */ /* --- EQUIPO (frame 11:19, MEDIDO en la copia Pro) --- Nota: la banda "servicios y sectores" de EQUIPO es ROJA (no navy) y la banda "Santiago" es SOFT con foto full-height a la izquierda. Verificado con get_design_context + screenshots. */ --lfi-equipo-py-mobile: 56px; /* aire vertical de sección en móvil */ --lfi-equipo-hero-img-h: 602px; /* banda imagen hero (Figma) */ --lfi-equipo-hero-pt: 101px; /* imagen→H1 (Figma 817-716) */ --lfi-equipo-hero-pb: 106px; /* párrafo→Santiago (Figma) */ --lfi-equipo-hero-gap-title: 19px; /* H1→subtítulo (Figma) */ --lfi-equipo-hero-gap-sub: 35px; /* subtítulo→párrafo (Figma) */ --lfi-equipo-santiago-h: 768px; /* alto banda Santiago (Figma) */ --lfi-equipo-santiago-img-w: 44%; /* ancho imagen (Figma 636/1440) */ --lfi-equipo-santiago-col-gap: 84px; /* imagen→texto (Figma 720-636) */ --lfi-equipo-santiago-gap-name: 7px; /* nombre→cargo (Figma) */ --lfi-equipo-santiago-gap-role:16px; /* cargo→cita (Figma) */ --lfi-equipo-bio-h: 602px; /* alto banda bio (Figma) */ --lfi-equipo-bio-py: 86px; /* aire vertical bio (Figma ~86/71) */ --lfi-equipo-bio-para: 35px; /* salto entre párrafos bio (= leading 35) */ --lfi-equipo-cv-para: 41px; /* salto entre párrafos CV (= leading 41) */ --lfi-equipo-cv-pt: 136px; /* bio→título CV (Figma) */ --lfi-equipo-cv-pb: 32px; /* cuerpo CV→banda servicios (Figma) */ --lfi-equipo-cv-title-gap: 25px; /* título→cuerpo CV (Figma) */ --lfi-equipo-cv-link-gap: 41px; /* cuerpo→VER CASOS DE ÉXITO (Figma) */ --lfi-equipo-servicios-h: 355px; /* alto banda servicios (Figma) */ /* --- SERVICIOS & SECTORES (frame 11:613, MEDIDO en la copia Pro) --- Todo navy sobre blanco / cajas soft. Iconos rojos. Sin bandas de color. */ --lfi-servicios-hero-img-h: 602px; /* banda imagen hero (Figma viewport 18:7) */ --lfi-servicios-icon: 56px; /* alto del icono de área/sector (Figma ~55-65) */ --lfi-servicios-intro-pad-top: 88px; /* imagen→H1 (Figma 804-716) */ --lfi-servicios-intro-pad-bottom:56px; /* H1→áreas (Figma, parte del gap 113) */ --lfi-servicios-intro-max-w: 1185px; /* ancho del H1 (Figma) */ --lfi-servicios-areas-pad-top: 57px; /* aire superior áreas (Figma, resto del gap 113) */ --lfi-servicios-areas-pad-bottom:73px; /* caja→título sectores (Figma) */ --lfi-servicios-areas-box-pad: 52px; /* padding interno caja (Figma) */ --lfi-servicios-areas-col-min: 300px; /* min columna auto-fill → 3 col */ --lfi-servicios-areas-item-gap: 16px; /* icono/título/cuerpo del item (Figma ~8/12) */ --lfi-servicios-sectores-pad-top: 40px; /* título sectores→tarjetas (Figma) */ --lfi-servicios-sectores-pad-bottom:111px; /* tarjetas→footer (Figma) */ --lfi-servicios-sectores-col-min: 560px; /* min columna auto-fill → 2 col */ --lfi-servicios-sectores-card-gap: 16px; /* icono/título/cuerpo de tarjeta (Figma) */ /* --- CONTACTO --- */ --lfi-contacto-py: 134px; /* header→título (Figma 250-116); menor en móvil */ --lfi-contacto-col-gap: 65px; /* info↔formulario (Figma 792-727) */ --lfi-contacto-info-gap: 34px; /* entre filas de info (Figma) */ --lfi-contacto-icon-size: 48px; /* alto del icono de info (Figma) */ --lfi-contacto-icon-gap: 24px; /* icono→texto (Figma 196-171) */ --lfi-contacto-form-w: 548px; /* ancho columna del formulario (Figma) */ --lfi-contacto-field-gap: 24px; /* entre campos del form (estimado) */ --lfi-contacto-label-gap: 10px; /* label→campo (estimado) */ --lfi-contacto-field-pad-x: 20px; /* padding horizontal de campos (estimado) */ --lfi-contacto-textarea-h: 160px; /* alto del textarea Mensaje (estimado) */ --lfi-contacto-title-gap: 34px; /* título→info (Figma 346-313) */ } /* ========================================================================== GUTTERS RESPONSIVOS (DECISIÓN MÓVIL) El Figma solo define desktop (gutter lateral 108px). En móvil 108px asfixiaría el contenido (a 375px dejaría ~159px útiles), así que el token se reduce por breakpoint. Al redefinir --lfi-gutter aquí, se ajustan de golpe el contenedor (.lfi-container), el header, el footer y el slider, sin tocar cada componente. Escala: móvil 24 · tablet (≥768) 48 · desktop (≥1024) 108 (réplica Figma). ========================================================================== */ @media (min-width: 768px) { :root { --lfi-gutter: 48px; } } @media (min-width: 1024px) { :root { --lfi-gutter: 108px; } }