/* Backlight — utilidades de marca compartidas. Extraído 1:1 de v3/styles.css. NO incluye reset global de body/img/a: en WordPress esas capas las gobierna Elementor. Solo componentes namespaced que los widgets y las secciones nativas reutilizan. */ .solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } a.solo-lectores:focus { position: fixed; z-index: 100; top: var(--bl-e-2); left: var(--bl-e-2); width: auto; height: auto; clip-path: none; background: var(--bl-solar); color: var(--bl-espresso); padding: var(--bl-e-2) var(--bl-e-4); text-decoration: none; } /* ---------- Botones ---------- background !important: los widgets de Elementor (e-button atómico / button clásico) traen su propio background; forzamos el sistema .btn. Solo el background lo necesita (borde/color/padding ya ganan por especificidad). Mismo criterio que el display de los contenedores de layout. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--bl-target-min); padding: 0 var(--bl-e-6); background: transparent !important; border: 1px solid transparent; border-radius: 0; font-family: var(--bl-font-texto); font-size: var(--bl-t-base); font-weight: var(--bl-peso-bold); text-decoration: none; cursor: pointer; transition: background var(--bl-dur-lock) var(--bl-ease-lock), color var(--bl-dur-lock) var(--bl-ease-lock), border-color var(--bl-dur-lock) var(--bl-ease-lock); } .btn--primario { background: var(--bl-accion) !important; color: var(--bl-accion-texto); } .btn--primario:hover { background: var(--bl-blanco) !important; } .btn--secundario { border-color: var(--bl-piedra); color: var(--bl-humo); } .btn--secundario:hover { border-color: var(--bl-solar); color: var(--bl-solar); } .btn--fantasma { color: var(--bl-solar); padding: 0 var(--bl-e-3); } .btn--fantasma:hover { color: var(--bl-blanco); } .btn--chico { min-height: 40px; padding: 0 var(--bl-e-4); font-size: var(--bl-t-sm); } /* El e-button atómico trae `display:block` en su base (`.elementor .e-button-base`, 0-2-0 y cargada DESPUÉS que este archivo): empata en 0-1-0 con el `.btn` de arriba y gana por orden, con lo que se pierde el centrado flex y el texto queda pegado al borde superior de la caja (el `min-height` sí aplica, así que sobra todo el aire abajo). Se repone a 0-2-1, mismo criterio que el border-width del CTA del nav. */ .elementor a.btn, .elementor button.btn { display: inline-flex; align-items: center; justify-content: center; /* En v3 el `.btn` hereda el line-height del body (--bl-lh-texto: 1.55). Aquí el body es de Elementor (1.5), así que se declara explícito para que el texto caiga en el mismo sitio que en el build certificado. */ line-height: var(--bl-lh-texto); } /* ---------- El globo de diálogo (regla dura de marca #1) ---------- Único por pieza. Lleno = encendido. Cola abajo-izquierda, esquina viva. */ .globo { position: relative; display: inline-block; padding: 0.18em 0.42em 0.24em; background: var(--bl-solar); color: var(--bl-espresso); border: max(var(--bl-globo-trazo), var(--bl-globo-trazo-min)) solid var(--bl-solar); border-radius: var(--bl-globo-radio); } .globo::after { content: ""; position: absolute; left: var(--bl-globo-cola-x); top: 100%; width: var(--bl-globo-cola-ancho); height: var(--bl-globo-cola-alto); background: var(--bl-solar); clip-path: polygon(0 0, 100% 0, 0 100%); } /* ---------- Secciones ---------- v1.1.0 — Los ESTILOS DE TEXTO del encabezado (eyebrow / título / intro: color, tamaño, tracking, peso) viven ahora como **Clases Globales de Elementor** (editables por el cliente desde el panel, ver Global Classes «BL Eyebrow / BL Titulo Seccion / BL Texto Seccion»). Aquí quedan solo el andamiaje estructural (padding/borde/ancho de sección) y las utilidades ligadas al motor JS, que no son «estilo» que el cliente ajuste — y que además no existen como prop de Clase Global v4 (border, scroll-margin, text-wrap). Extraído 1:1 de v3/styles.css. */ .contenedor { max-width: 72rem; margin: 0 auto; padding: 0 var(--bl-e-6); } .seccion { padding: var(--bl-e-24) 0; scroll-margin-top: 72px; border-top: 1px solid var(--bl-carbon); } /* text-wrap: balance no existe como prop de Clase Global v4 → utilidad para el título de sección */ .bl-balance { text-wrap: balance; } /* Encendido al entrar: SOLO transform, desde estado visible (nunca opacity 0) */ .anim-lock { transition: transform var(--bl-dur-ignition) var(--bl-ease-ignition); } .anim-lock.pre { transform: translateY(16px); } /* ---------- Formatos: jerarquía real, nunca cards idénticas (andamiaje 1:1 de v3) ---------- Los ROLES DE TEXTO (nombre / nota) viven como Clases Globales editables (bl-card-titulo, bl-card-nota). Aquí queda la superficie del componente card y los estados (hover), como .btn. NOTA display !important: el contenedor atómico de Elementor trae `.elementor .e-div-block-base { display:block }` (0-2-0, carga después) que pisaría el grid; !important es el override mínimo del display (Elementor no lo usa ahí). Solo el display lo necesita — el resto aplica normal. */ .formatos { display: grid !important; gap: var(--bl-e-4); grid-template-columns: repeat(3, 1fr); } .formato { padding: var(--bl-e-6); background: var(--bl-noche); border: 1px solid var(--bl-carbon); transition: border-color var(--bl-dur-lock) var(--bl-ease-lock); } .formato:hover { border-color: var(--bl-solar); } .formato--destacado { grid-column: 1 / -1; padding: var(--bl-e-8); } /* Especificidad 0-3-0: gana a la Clase Global (.elementor .bl-card-*, 0-2-0, que carga después). */ .formatos .formato--destacado .formato__nombre { font-size: var(--bl-t-lg); } .formatos .formato--destacado .formato__nota { max-width: 60ch; font-size: var(--bl-t-md); } .formatos__cierre { margin: var(--bl-e-8) 0 0; color: var(--bl-humo); } /* ---------- Clientes: wordmarks tipográficos ---------- Color/tipo/peso base → Clase Global bl-cliente. Aquí solo el layout flex y el hover. */ .clientes { list-style: none; margin: var(--bl-e-8) 0 0; padding: 0; display: flex !important; flex-wrap: wrap; gap: var(--bl-e-3) var(--bl-e-8); } .clientes__item { transition: color var(--bl-dur-lock) var(--bl-ease-lock); } /* 0-3-0: gana el hover a la Clase Global bl-cliente (.elementor .bl-cliente, 0-2-0). */ .clientes .clientes__item:hover { color: var(--bl-humo); } /* ---------- Contacto: layout + datos ---------- El formulario es el widget Form de Elementor Pro (estilos por sus controles nativos). */ .contacto { display: grid !important; grid-template-columns: 3fr 2fr; gap: var(--bl-e-16); align-items: start; } .datos-contacto p { margin: 0 0 var(--bl-e-6); color: var(--bl-humo); } .datos-contacto a { color: var(--bl-humo); text-decoration: none; } .datos-contacto a:hover { color: var(--bl-solar); } .datos-contacto strong { display: block; margin-bottom: var(--bl-e-1); font-weight: var(--bl-peso-medium); font-size: var(--bl-t-xs); letter-spacing: var(--bl-tracking-label); text-transform: uppercase; color: var(--bl-solar); } /* Formulario (widget Form de Elementor Pro): look de marca, espeja .bl-campo de v3. Scoped a .contacto (0-2-0) → gana a los defaults del form (0-1-0). El cliente edita campos y textos desde el panel; el look de marca vive aquí. */ .contacto .elementor-field-group > label { color: var(--bl-piedra); font-size: var(--bl-t-sm); letter-spacing: var(--bl-tracking-label); text-transform: uppercase; } .contacto .elementor-field-textual, .contacto select.elementor-field { background: var(--bl-carbon); border: 1px solid var(--bl-borde-fuerte); color: var(--bl-humo); border-radius: 0; min-height: var(--bl-target-min); font-family: var(--bl-font-texto); } .contacto .elementor-field-textual::placeholder { color: var(--bl-piedra); } .contacto .elementor-field-textual:focus, .contacto select.elementor-field:focus { border-color: var(--bl-solar); box-shadow: var(--bl-halo-cerca); outline: none; } .contacto .elementor-button { background: var(--bl-solar); color: var(--bl-espresso); border-radius: 0; font-family: var(--bl-font-texto); font-weight: var(--bl-peso-bold); } .contacto .elementor-button:hover { background: var(--bl-blanco); color: var(--bl-espresso); } /* El globo del título de contacto necesita aire para su cola (como .contacto__display en v3). 0-3-0 (.seccion .contenedor .globo) gana a .elementor .e-heading-base (0-2-0). Solo matchea aquí: hero no es .seccion; formatos/clientes no llevan globo. */ .seccion .contenedor .globo { margin-bottom: var(--bl-e-12); } /* ---------- Footer diseñado (andamiaje) ---------- Textos (frase / títulos de columna / enlaces / legal) → Clases Globales bl-footer-*. */ .footer { border-top: 1px solid var(--bl-carbon); padding: var(--bl-e-16) 0 var(--bl-e-8); background: var(--bl-noche); } .footer__grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr; gap: var(--bl-e-8); } .footer__logo img { width: 190px; height: auto; display: block; } /* Listas del footer (widget text-editor: