/* Theme Name: Enfold Child Template: enfold Version: 7.0 */ /* ========================================================================= GENESAL - style.css del TEMA HIJO (enfold-child) IMPORTANTE: la cabecera de arriba (Theme Name + Template: enfold) es OBLIGATORIA y debe ser lo PRIMERO del archivo. No la borres. Pega este archivo COMPLETO como contenido del style.css del tema hijo. Capas: (1) tokens DS - (2) base global - (3) componentes .gen-* ========================================================================= */ /* ============================ (1) TOKENS DS ============================ */ /* ========================================================================= DS-GENESAL · Foundations (CAPA LIMPIA) Fuente: Figma · página "❖ Foundations" (nodeId 0:1) · Figma MCP Espejo fiel de origen: ./_raw/foundations.raw.json -------------------------------------------------------------------------- Convenciones: - Namespace --gen-* para evitar colisiones en el proyecto (50 páginas). - Valores numéricos de Figma (px) expresados con unidad explícita. - Tokens SEMÁNTICOS referencian PRIMITIVOS vía var() — no repiten hex. - Excluidos (viven sólo en raw): var(--p-...) Polaris, Shapermint/*, Avenir Next. Erratas corregidas: succes→success, subtittle→subtitle, pretittle→pretitle. - NO editar a mano valores: regenerar desde Figma (ver ../README.md). ========================================================================= */ :root { /* ---------------------------------------------------------------------- COLOR · PRIMITIVOS ---------------------------------------------------------------------- */ /* Primary (rojo corporativo) */ --gen-color-primary-025: #fdf6f9; --gen-color-primary-050: #fae6ec; --gen-color-primary-100: #f0b2c4; --gen-color-primary-200: #e98ca7; --gen-color-primary-300: #df587f; --gen-color-primary-400: #d93766; --gen-color-primary-500: #cf0540; /* base */ --gen-color-primary-600: #bc053a; --gen-color-primary-700: #93042d; --gen-color-primary-800: #720323; --gen-color-primary-900: #720323; /* ⚠ idéntico a 800 en origen */ /* Grey / Secondary */ --gen-color-grey-0: #ffffff; /* origen: "Grey/Secondary 00" */ --gen-color-grey-025: #fafafa; --gen-color-grey-050: #f5f5f5; --gen-color-grey-100: #efefef; --gen-color-grey-200: #e1e1e1; --gen-color-grey-300: #bebebe; --gen-color-grey-400: #9f9f9f; --gen-color-grey-500: #767676; --gen-color-grey-600: #626262; --gen-color-grey-700: #434343; --gen-color-grey-800: #222222; --gen-color-grey-900: #000000; /* Light (verde-blancos de superficie) */ --gen-color-light-100: #fefefe; --gen-color-light-200: #fdfefd; --gen-color-light-300: #fdfefc; --gen-color-light-400: #fcfdfb; --gen-color-light-500: #fafcf8; --gen-color-light-600: #f5f9f1; --gen-color-light-700: #f0f6ea; --gen-color-light-800: #e5f0db; --gen-color-light-900: #e0edd4; /* Otros primitivos */ --gen-color-corporate-secondary: #151515; --gen-color-neutral-500: #4c4c4c; --gen-color-red-500: #e30613; /* ⚠ rojo distinto al primary-500 */ --gen-color-black-alpha-8: #0000001c; /* RGBA-hex de origen */ /* ---------------------------------------------------------------------- COLOR · SEMÁNTICOS (referencian primitivos) ---------------------------------------------------------------------- */ /* Texto */ --gen-text-primary: #292929; /* origen: text/primary · text/default/primary */ --gen-text-secondary: #585d5c; --gen-text-medium: var(--gen-color-grey-600); /* #626262 */ --gen-text-dark: var(--gen-color-grey-700); /* #434343 */ --gen-text-darker: var(--gen-color-grey-900); /* #000000 */ --gen-text-error: #801313; /* Bordes */ --gen-border-primary: #e2e3e3; --gen-border-secondary: #a6a6a6; /* origen: border/default/secondary */ /* Superficies */ --gen-surface-1: #f9f9fa; /* origen: surface-surface_1 */ --gen-bg-surface-primary: var(--gen-color-grey-0); /* #ffffff */ --gen-bg-surface-secondary-light: var(--gen-color-light-500); /* #fafcf8 */ --gen-bg-surface-secondary-dark: var(--gen-color-light-600); /* #f5f9f1 */ --gen-bg-surface-tertiary-light: var(--gen-color-grey-100); /* #efefef */ --gen-bg-surface-tertiary-dark: var(--gen-color-grey-200); /* #e1e1e1 */ --gen-bg-surface-accent-subtle: var(--gen-color-primary-025); /* #fdf6f9 */ --gen-bg-surface-accent: var(--gen-color-primary-500); /* #cf0540 */ --gen-bg-surface-dark: var(--gen-color-grey-900); /* #000000 */ /* Rellenos (fill) */ --gen-bg-fill-white: var(--gen-color-grey-0); /* #ffffff */ --gen-bg-fill-primary: var(--gen-color-primary-500); /* #cf0540 */ --gen-bg-fill-hover: var(--gen-color-primary-600); /* #bc053a */ --gen-bg-fill-pressed: var(--gen-color-primary-700); /* #93042d */ --gen-bg-fill-disabled: var(--gen-color-grey-100); /* #efefef */ --gen-bg-fill-medium: var(--gen-color-grey-400); /* #9f9f9f */ --gen-bg-fill-dark: var(--gen-color-grey-700); /* #434343 */ /* Estados — Success (corrige errata "succes") */ --gen-bg-success-primary: #8abd89; --gen-bg-success-secondary: #4c684b; /* Estados — Danger */ --gen-bg-danger-primary: #ca2a2c; --gen-bg-danger-secondary: #6f1718; --gen-bg-danger-tertiary: #faeaea; /* Estados — Warning */ --gen-bg-warning-primary: #d69451; --gen-bg-warning-secondary: #98693a; --gen-bg-warning-tertiary: #f2dec9; /* Estados — Error */ --gen-bg-error-tertiary: #fce3e3; /* ---------------------------------------------------------------------- ESPACIADO (escala por valor en px) ---------------------------------------------------------------------- */ --gen-space-0: 0; --gen-space-4: 4px; --gen-space-6: 6px; /* origen: space/1,5 */ --gen-space-8: 8px; --gen-space-12: 12px; --gen-space-16: 16px; --gen-space-24: 24px; --gen-space-32: 32px; --gen-space-40: 40px; --gen-space-48: 48px; --gen-space-56: 56px; --gen-space-64: 64px; --gen-space-72: 72px; /* origen: "Size - 11" (≠ size-11=64) */ --gen-space-80: 80px; --gen-space-104: 104px; --gen-space-160: 160px; /* ---------------------------------------------------------------------- RADIOS ---------------------------------------------------------------------- */ --gen-radius-8: 8px; /* origen: var(--p-border-radius-200) */ --gen-radius-12: 12px; /* origen: var(--p-border-radius-card) */ /* ---------------------------------------------------------------------- ELEVACIÓN / SOMBRAS ---------------------------------------------------------------------- */ --gen-elevation-e2: 0 3px 3px -1.5px var(--gen-color-black-alpha-8), 0 1px 1px -0.5px var(--gen-color-black-alpha-8); /* ---------------------------------------------------------------------- GRID / LAYOUT (referencia Web de Figma) ---------------------------------------------------------------------- */ --gen-layout-container: 343px; /* Container 4/6/8/9/12 cols (todos 343 en origen) */ --gen-layout-section: 375px; --gen-layout-margin: 16px; --gen-grid-columns: 4; --gen-grid-gutter: 12px; --gen-grid-row-height: 4px; --gen-grid-row-gutter: 4px; --gen-grid-row-offset: 4px; /* ---------------------------------------------------------------------- TIPOGRAFÍA · PRIMITIVOS ---------------------------------------------------------------------- */ --gen-font-helvetica: "Helvetica Neue", Arial, sans-serif; /* family/helvetica · Family/Content */ --gen-font-inter: "Inter", sans-serif; /* family/inter (uso legacy) */ --gen-font-weight-regular: 400; --gen-font-weight-medium: 500; --gen-font-weight-bold: 700; /* Tamaños (px) */ --gen-font-size-display-md: 68px; --gen-font-size-heading-lg: 39px; --gen-font-size-heading-md: 31px; --gen-font-size-heading-sm: 25px; --gen-font-size-heading-xs: 18px; --gen-font-size-subtitle-md: 18px; --gen-font-size-body-md: 15px; --gen-font-size-body-sm: 13px; --gen-font-size-body-xs: 12px; --gen-font-size-label-md: 14px; --gen-font-size-label-sm: 12px; --gen-font-size-caption-md: 12px; --gen-font-size-button-md: 15px; --gen-font-size-button-sm: 14px; --gen-font-size-pretitle: 13px; /* Interlineados (px) */ --gen-line-height-display-md: 68px; --gen-line-height-heading-lg: 44px; --gen-line-height-heading-md: 38px; --gen-line-height-heading-sm: 31px; --gen-line-height-heading-xs: 24px; --gen-line-height-subtitle-md: 24px; --gen-line-height-body-md: 21px; --gen-line-height-body-sm: 16px; --gen-line-height-body-xs: 16px; --gen-line-height-label-md: 20px; --gen-line-height-label-sm: 20px; --gen-line-height-caption-md: 20px; --gen-line-height-button-md: 21px; --gen-line-height-button-sm: 20px; --gen-line-height-pretitle: 16px; /* Tracking / letter-spacing (px) — ruido de float normalizado */ --gen-letter-spacing-heading-lg: -0.5px; --gen-letter-spacing-heading-md: -0.5px; --gen-letter-spacing-heading-sm: -0.5px; --gen-letter-spacing-heading-xs: -0.2px; --gen-letter-spacing-subtitle-md: -0.2px; --gen-letter-spacing-pretitle: 0.3px; --gen-letter-spacing-body-sm: 0.5px; --gen-letter-spacing-body-xs: 0.5px; --gen-letter-spacing-display-md: 0; --gen-letter-spacing-body-md: 0; --gen-letter-spacing-label-md: 0; --gen-letter-spacing-label-sm: 0; --gen-letter-spacing-caption-md: 0; --gen-letter-spacing-button-md: 0; --gen-letter-spacing-button-sm: 0; } /* ========================================================================= TIPOGRAFÍA · ESTILOS COMPUESTOS (text styles GENESAL · familia Helvetica) Clases utilitarias listas para aplicar. Los estilos legacy basados en Inter y Avenir Next se conservan sólo en _raw/foundations.raw.json. ========================================================================= */ .gen-display-md { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-display-md); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-display-md); letter-spacing: var(--gen-letter-spacing-display-md); } .gen-heading-lg { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-heading-lg); font-weight: var(--gen-font-weight-bold); line-height: var(--gen-line-height-heading-lg); letter-spacing: var(--gen-letter-spacing-heading-lg); } .gen-heading-md { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-heading-md); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-heading-md); letter-spacing: var(--gen-letter-spacing-heading-md); } .gen-heading-sm { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-heading-sm); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-heading-sm); letter-spacing: var(--gen-letter-spacing-heading-sm); } .gen-heading-xs { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-heading-xs); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-heading-xs); letter-spacing: var(--gen-letter-spacing-heading-xs); } .gen-subtitle-md { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-subtitle-md); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-subtitle-md); letter-spacing: var(--gen-letter-spacing-subtitle-md); } .gen-pretitle { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-pretitle); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-pretitle); letter-spacing: var(--gen-letter-spacing-pretitle); } .gen-body-md-regular { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-body-md); font-weight: var(--gen-font-weight-regular); line-height: var(--gen-line-height-body-md); letter-spacing: var(--gen-letter-spacing-body-md); } .gen-body-md-medium { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-body-md); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-body-md); letter-spacing: var(--gen-letter-spacing-body-md); } .gen-body-sm-regular { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-body-sm); font-weight: var(--gen-font-weight-regular); line-height: var(--gen-line-height-body-sm); letter-spacing: var(--gen-letter-spacing-body-sm); } .gen-body-sm-medium { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-body-sm); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-body-sm); letter-spacing: var(--gen-letter-spacing-body-sm); } .gen-body-xs-regular { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-body-xs); font-weight: var(--gen-font-weight-regular); line-height: var(--gen-line-height-body-xs); letter-spacing: var(--gen-letter-spacing-body-xs); } .gen-label-md-regular { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-label-md); font-weight: var(--gen-font-weight-regular); line-height: var(--gen-line-height-label-md); letter-spacing: var(--gen-letter-spacing-label-md); } .gen-label-md-medium { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-label-md); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-label-md); letter-spacing: var(--gen-letter-spacing-label-md); } .gen-label-sm { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-label-sm); font-weight: var(--gen-font-weight-regular); line-height: var(--gen-line-height-label-sm); letter-spacing: var(--gen-letter-spacing-label-sm); } .gen-caption-md { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-caption-md); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-caption-md); letter-spacing: var(--gen-letter-spacing-caption-md); } .gen-button-md { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-button-md); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-button-md); letter-spacing: var(--gen-letter-spacing-button-md); } .gen-button-sm { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-button-sm); font-weight: var(--gen-font-weight-medium); line-height: var(--gen-line-height-button-sm); letter-spacing: var(--gen-letter-spacing-button-sm); } /* ========================================================================= (2) BASE GLOBAL · aplica a toda la web (complementa Theme Options) Theme Options ya fija: tamaños de heading/body, pesos, colores. Aquí va lo que Theme Options NO expone. ========================================================================= */ /* Familia de marca (por si Fuentes no la fija en algún elemento) */ #top body, #top .av-special-heading-tag, #top h1, #top h2, #top h3, #top h4, #top h5, #top h6 { font-family: var(--gen-font-helvetica); text-transform: none; } /* Color de titulares = negro del DS (text/darker #000). Sin !important para no pisar el barrido gris->oscuro de gen-anim-reveal (que anima opacity sobre este color base). */ #top h1, #top h2, #top h3, #top h4, #top h5, #top h6, #top .av-special-heading-tag { color: var(--gen-text-darker, #000000); } /* Interlineado de párrafos de contenido al ritmo del DS (Theme Options deja body a 1.65em) */ #top .avia_textblock, #top .avia_textblock p, #top .avia_textblock li { font-size: var(--gen-font-size-body-md, 15px) !important; line-height: var(--gen-line-height-body-md, 21px) !important; color: var(--gen-text-medium, #626262) !important; } /* Negritas del cuerpo: nunca rojo, siempre gris oscuro de marca */ #top .avia_textblock strong, #top .avia_textblock b { color: var(--gen-text-dark, #434343) !important; } /* Tracking de titulares (no está en Theme Options) */ #top .av-special-heading-h1 .av-special-heading-tag, #top h1 { letter-spacing: var(--gen-letter-spacing-heading-lg, -0.5px); } #top .av-special-heading-h2 .av-special-heading-tag, #top h2 { letter-spacing: var(--gen-letter-spacing-heading-md, -0.5px); } #top .av-special-heading-h3 .av-special-heading-tag, #top h3 { letter-spacing: var(--gen-letter-spacing-heading-sm, -0.5px); } #top .av-special-heading-h4 .av-special-heading-tag, #top h4 { letter-spacing: var(--gen-letter-spacing-heading-xs, -0.2px); } /* Quitar el separador decorativo de los headings de Enfold */ #top .special-heading-border, #top .special-heading-inner-border { display: none !important; } /* Hover de enlaces a rojo oscuro de marca */ #top .main_color a:hover { color: var(--gen-bg-fill-hover, #bc053a); } /* Ancho de contenido del DS: contenedor 1310px, padding 15px/lado -> 1280px utiles. El grid de 12 columnas (gutter 24px) vive dentro de esos 1280px. */ #top .container { max-width: 1310px; padding-left: 15px !important; padding-right: 15px !important; } /* GLOBAL: quitar el padding 50px del contenedor de pagina de Enfold; el espacio arriba/abajo lo define el padding de cada seccion. */ #top .template-page { padding-top: 0 !important; padding-bottom: 0 !important; } /* Formularios (av_contact) coherentes en toda la web */ #top .avia_ajax_form .text_input, #top .avia_ajax_form textarea, #top .avia_ajax_form select { border: 1px solid var(--gen-border-primary, #e2e3e3); border-radius: var(--g-ui-radius, 4px); padding: var(--gen-space-12, 12px) 14px; font-size: var(--gen-font-size-body-md, 15px); background: var(--gen-bg-fill-white, #fff); } #top .avia_ajax_form .button { background: var(--gen-bg-fill-primary, #cf0540); color: var(--gen-bg-fill-white, #fff); border: 0; border-radius: var(--g-ui-radius, 4px); padding: 14px var(--gen-space-40, 40px); text-shadow: none; } #top .avia_ajax_form .button:hover { background: var(--gen-bg-fill-hover, #bc053a); } /* ========================================================================= (3) COMPONENTES opt-in · aplica solo donde pongas la clase .gen-* ========================================================================= */ :root { /* radio de UI: el DS define 8/12; la página usaba 4. Pendiente decidir con diseño. */ --g-ui-radius: 4px; /* placeholder de la banda de vídeo del hero (hasta poner vídeo/imagen real) */ --g-video-bg: #2a2a2a; /* SISTEMA DE ICONOS DS = Lucide (trazo, frame 24px, stroke 1.5, caps/joins redondeados). Se aplican con `mask` + `background-color: currentColor` para que hereden el color. Fuente: DS-GENESAL · "24px / arrows" (Figma). Añadir aquí más iconos según haga falta. */ --gen-icon-move-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12H22'/%3E%3Cpath d='M18 8L22 12L18 16'/%3E%3C/svg%3E"); --gen-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E"); --gen-icon-chevron-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15L12 9L6 15'/%3E%3C/svg%3E"); /* Flecha izquierda (Lucide move-left) — enlace "Volver" del single de noticia */ --gen-icon-move-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8L2 12L6 16'/%3E%3Cpath d='M2 12H22'/%3E%3C/svg%3E"); /* Iconos de "Compartir esta entrada" (glifos de marca + sobre Lucide) */ --gen-icon-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E"); --gen-icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E"); --gen-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.9 1.5h3.68l-8.04 9.19L24 22.5h-7.41l-5.8-7.58-6.64 7.58H.46l8.6-9.83L0 1.5h7.6l5.24 6.93L18.9 1.5zm-1.29 18.8h2.04L6.48 3.6H4.29L17.61 20.3z'/%3E%3C/svg%3E"); --gen-icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } /* Pretitle / eyebrow */ #top .gen-eyebrow, #top .gen-eyebrow p, #top .gen-eyebrow .avia_textblock p { font-family: var(--gen-font-helvetica); font-size: var(--gen-font-size-pretitle, 13px) !important; line-height: var(--gen-line-height-pretitle, 16px) !important; font-weight: var(--gen-font-weight-medium, 500); letter-spacing: var(--gen-letter-spacing-pretitle, 0.3px); text-transform: uppercase; color: var(--gen-text-dark, #434343); margin: 0; } #top .gen-eyebrow { margin: 0 0 var(--gen-space-24, 24px); } /* GLOBAL: anular el margin-top por defecto (~50px) de Enfold en TODOS los titulos. El espacio superior lo controla el padding de la seccion. */ #top .av-special-heading { margin-top: 0 !important; } /* Filete rojo sobre un titular (poner la clase en el Heading) */ .gen-acc:before { content: ""; display: block; width: 24px; height: 4px; background: var(--gen-bg-fill-primary, #cf0540); border-radius: 0; margin: 0 0 var(--gen-space-16, 16px); } /* CTA: Boton de Avia como enlace rojo con flecha (la clase gen-cta puede ir en el wrap o en el boton) */ #top .gen-cta.avia-button, #top .gen-cta .avia-button { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; height: auto !important; line-height: var(--gen-line-height-body-md, 21px) !important; color: var(--gen-bg-fill-primary, #cf0540) !important; font-size: var(--gen-font-size-body-md, 15px); font-weight: var(--gen-font-weight-medium, 500); letter-spacing: var(--gen-letter-spacing-body-md, 0); text-transform: none !important; } #top .gen-cta .avia_button_background { display: none !important; } #top .gen-cta.avia-button .avia_iconbox_title, #top .gen-cta .avia-button .avia_iconbox_title, #top .gen-cta.avia-button span, #top .gen-cta .avia-button span { color: var(--gen-bg-fill-primary, #cf0540) !important; } #top .gen-cta.avia-button:after, #top .gen-cta .avia-button:after { content: ""; display: inline-block; width: 20px; height: 20px; margin-left: 8px; vertical-align: middle; background-color: currentColor; -webkit-mask: var(--gen-icon-move-right) no-repeat center / contain; mask: var(--gen-icon-move-right) no-repeat center / contain; } #top .gen-cta.avia-button:hover, #top .gen-cta .avia-button:hover, #top .gen-cta .avia-button:hover span { color: var(--gen-bg-fill-hover, #bc053a) !important; } /* ========================================================================= BOTÓN DE RELLENO PRIMARIO (Avia theme-color) — estados normal/hover/pressed. El texto SIEMPRE blanco: Enfold y la regla global `#top .main_color a:hover` (color #bc053a) teñían el texto de rojo al pasar el ratón → ilegible sobre el fondo rojo. Fondos: normal #CF0540 · hover #BC053A · pressed (:active) #93042D. Se EXCLUYEN las variantes NO rellenas (gen-cta = enlace, gen-cta--light, gen-btn-outline), que tienen sus propias reglas; la exclusión va en el wrap Y en el botón porque el custom_class de Avia puede caer en cualquiera de los dos. La capa .avia_button_background de Enfold se oculta para que el fondo lo controle el de forma determinista en todos los estados. ========================================================================= */ #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) { background: var(--gen-bg-fill-primary, #cf0540) !important; color: #fff !important; } #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia_iconbox_title, #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) span { color: #fff !important; } #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia_button_background { display: none !important; } /* hover */ #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline):hover { background: var(--gen-bg-fill-hover, #bc053a) !important; color: #fff !important; } #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline):hover .avia_iconbox_title, #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline):hover span { color: #fff !important; } /* pressed */ #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline):active { background: var(--gen-bg-fill-pressed, #93042d) !important; color: #fff !important; } #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline):active .avia_iconbox_title, #top .avia-button-wrap:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline) .avia-button.avia-color-theme-color:not(.gen-cta):not(.gen-cta--light):not(.gen-btn-outline):active span { color: #fff !important; } /* Botón de envío del formulario (Avia ajax form) — mismos estados/colores. */ #top .avia_ajax_form .button { color: #fff !important; } #top .avia_ajax_form .button:active { background: var(--gen-bg-fill-pressed, #93042d) !important; color: #fff !important; } /* Imagen a ancho completo (tarjetas / banda) */ .gen-card-img.avia-image-container, .gen-media.avia-image-container { width: 100%; max-width: 100%; margin: 0; } .gen-card-img .avia-image-container-inner, .gen-media .avia-image-container-inner { margin: 0; } .gen-card-img img, .gen-media img { width: 100%; height: auto; display: block; } /* Imagen en columna con bloque rojo (filete) debajo: 24px imagen -> bloque, SIEMPRE */ #top .gen-card-img.avia-image-container { margin: 0 0 var(--gen-space-24, 24px) !important; } .gen-media { margin-top: var(--gen-space-24, 24px); } /* Tarjeta con H4 (filete encima del h4): - bloque de color 16x4px - bloque -> h4 = 24px - h4 -> body = 24px - body -> CTA = 32px */ #top .av-special-heading-h4.gen-acc:before { width: 16px; height: 4px; margin-bottom: var(--gen-space-24, 24px); } #top .av-special-heading-h4 { margin-bottom: var(--gen-space-24, 24px) !important; } #top .av-special-heading-h4 + .av_textblock_section { margin-top: 0 !important; } #top .av_textblock_section:has(+ .avia-button-wrap.gen-cta) { margin-bottom: 0 !important; } #top .av_textblock_section + .avia-button-wrap.gen-cta { margin-top: var(--gen-space-32, 32px) !important; } /* Destacado (poner la clase en el Heading; tag = p): ancho máx 750px, padding interno 48px, texto centrado 500, líneas 1px #bc053a arriba/abajo al mismo ancho que el bloque (box-sizing border-box -> línea = 750px). */ .gen-highlight { max-width: 750px; margin: 0 auto; box-sizing: border-box; padding: var(--gen-space-48, 48px) !important; border-top: 1px solid var(--gen-color-primary-600, #bc053a) !important; border-bottom: 1px solid var(--gen-color-primary-600, #bc053a) !important; } .gen-highlight:before, .gen-highlight:after { display: none !important; } .gen-highlight .av-special-heading-tag { text-align: center; font-weight: var(--gen-font-weight-medium, 500) !important; letter-spacing: -0.5px !important; line-height: var(--gen-line-height-heading-sm, 31px) !important; } /* ============================================================ HOME · bloque rojo (gen-claimband) — Figma node 1:27886 "Section - destacado". Sección roja, contenido 954 alineado a la IZQUIERDA, padding 72/72. Ceja blanca + titular heading-lg "de corrido" (39/44/700, -0.5) blanco + CTA claro. ⚠ Medir en staging. ============================================================ */ /* Hero: la ceja "Grupos electrógenos en Perú" ES el H1 (39/44) con filete 24x8 encima */ #top .av-special-heading-h1.gen-acc:before { width: 24px; height: 8px; margin-bottom: var(--gen-space-24, 24px); } /* Sección roja, contenido 954 a la izquierda */ #top .gen-claimband { background: var(--gen-bg-fill-primary, #cf0540) !important; } .gen-claimband.avia-section { padding-top: var(--gen-space-72, 72px); padding-bottom: var(--gen-space-72, 72px); } #top .gen-claimband .av-special-heading, #top .gen-claimband .av_textblock_section, #top .gen-claimband .avia-button-wrap { max-width: 954px; } /* Ceja blanca */ #top .gen-claimband .gen-eyebrow, #top .gen-claimband .gen-eyebrow p { color: #fff !important; } /* Titular "de corrido": heading-lg blanco (tag p), tope 954 */ #top .gen-claim__title .av-special-heading-tag { color: #fff !important; font-size: var(--gen-font-size-heading-lg, 39px) !important; line-height: var(--gen-line-height-heading-lg, 44px) !important; font-weight: var(--gen-font-weight-bold, 700) !important; letter-spacing: var(--gen-letter-spacing-heading-lg, -0.5px) !important; } #top .gen-claim__title { margin-bottom: var(--gen-space-24, 24px) !important; } /* CTA claro (variante de gen-cta): texto (incl. .avia_iconbox_title, donde va la etiqueta) y flecha en BLANCO (fondos oscuros/rojos). */ #top .gen-cta--light.avia-button, #top .gen-cta--light .avia-button, #top .gen-cta--light.avia-button span, #top .gen-cta--light .avia-button span, #top .gen-cta--light.avia-button .avia_iconbox_title, #top .gen-cta--light .avia-button .avia_iconbox_title { color: #fff !important; } #top .gen-cta--light.avia-button:hover, #top .gen-cta--light .avia-button:hover, #top .gen-cta--light .avia-button:hover span, #top .gen-cta--light .avia-button:hover .avia_iconbox_title { color: rgba(255,255,255,.85) !important; } /* Hero mosaico (plugin [gen_hero]): los títulos son

, y el `#top p` del tema (con id) les gana el tamaño → salían 15/21 en vez de 25/31 (main) y 18/24 (sec). El letter-spacing del plugin sí entra. Forzamos aquí los tamaños del diseño para no tocar el plugin. */ #top .gen-he-main .gen-he-title { font-size: 25px !important; line-height: 31px !important; } #top .gen-he-sec .gen-he-title { font-size: 18px !important; line-height: 24px !important; } #top .gen-he .gen-he-title { color: #000 !important; } /* ============================================================ HOME · banda de VÍDEO de fondo con texto (bloque Alquiler). Vídeo a sangre que cubre TODA la sección (alto 560), scrim para legibilidad, contenido en columna ~410 a la DERECHA (filete 24x8 + H2 31/38 + body 18/24 + 2 botones). 56px de gap blanco ARRIBA y ABAJO. El vídeo va en av_codeblock. ⚠ Primera pasada — confirmar con Figma y MEDIR en staging. ============================================================ */ #top .gen-vidband { position: relative; overflow: hidden; margin-top: var(--gen-space-56, 56px); margin-bottom: var(--gen-space-56, 56px); } /* El contenedor NO debe recortar: si Enfold le pone overflow:hidden, el vídeo a 100vw quedaría clipado a 1310 y NO iría de lado a lado. La sección (overflow:hidden) recorta a viewport. */ #top .gen-vidband > .container { position: relative; overflow: visible !important; max-width: var(--gen-w-content, 1310px); } /* Vídeo de fondo a sangre: cubre toda la sección (100vw × alto completo, sin franja) */ #top .gen-vidband .gen-vidband__media { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; z-index: 0; margin: 0 0 0 -50vw !important; padding: 0 !important; } #top .gen-vidband .gen-vidband__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Scrim (más oscuro a la DERECHA, donde va el texto) */ #top .gen-vidband .gen-vidband__media:after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.1), rgba(0,0,0,.55)); } /* Columna de contenido (~410, one_third) por encima, a la derecha */ #top .gen-vidband .flex_column { position: relative; z-index: 2; } #top .gen-vidband .av-special-heading-tag { color: #fff !important; } #top .gen-vidband .av-special-heading-h2.gen-acc { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-vidband .gen-vidband__body, #top .gen-vidband .gen-vidband__body p { color: #fff !important; font-size: 18px !important; line-height: 24px !important; } #top .gen-vidband .gen-vidband__body { margin-bottom: var(--gen-space-32, 32px) !important; } /* Ceja "ALQUILER" en BLANCO sobre el vídeo, con filete rojo encima. El filete pasa de la H2 a la ceja para el orden Figma filete→ceja→H2. */ #top .gen-vidband .gen-eyebrow, #top .gen-vidband .gen-eyebrow p { color: #fff !important; } #top .gen-vidband .gen-vidband__eyebrow:before { content: ""; display: block; width: 24px; height: 4px; background: var(--gen-bg-fill-primary, #cf0540); margin: 0 0 var(--gen-space-16, 16px); } #top .gen-vidband .av-special-heading-h2.gen-acc:before { display: none !important; } /* Dos botones en línea (la columna es contexto de bloque -> inline-block funciona) */ #top .gen-vidband .avia-button-wrap { display: inline-block; margin: 0 16px 0 0; } /* Botones del bloque: texto en MAYÚSCULAS + padding interno 8/24 (8 24 8 24) */ #top .gen-vidband .avia-button, #top .gen-vidband .avia-button .avia_iconbox_title { text-transform: uppercase !important; } #top .gen-vidband .avia-button { padding: 8px 24px 8px 24px !important; height: auto !important; min-height: 0 !important; line-height: var(--gen-line-height-button-md, 21px) !important; } /* Botón outline claro (2º botón, sobre vídeo) */ #top .gen-btn-outline .avia-button { background: transparent !important; border: 1px solid #fff !important; box-shadow: none !important; color: #fff !important; } #top .gen-btn-outline .avia-button span { color: #fff !important; } #top .gen-btn-outline .avia-button:hover { background: rgba(255,255,255,.12) !important; } /* Botón RELLENO estándar (gen-btn): rojo (Enfold color=theme-color) + texto en MAYÚSCULAS + padding interno 8/24. Reutilizable (p.ej. "Cotizar grupo", "Ver equipos disponibles"). */ #top .gen-btn .avia-button, #top .gen-btn.avia-button { text-transform: uppercase !important; padding: 8px 24px 8px 24px !important; height: auto !important; min-height: 0 !important; line-height: var(--gen-line-height-button-md, 21px) !important; } #top .gen-btn .avia-button .avia_iconbox_title, #top .gen-btn.avia-button .avia_iconbox_title { text-transform: uppercase !important; } /* ============================================================ HOME · bloque OCASIÓN centrado (gen-s-ocasion). Filete 24x8 + H2 + body en columna CENTRADA de 608, imagen centrada debajo, CTA centrado. Fondo #FAFCF8, padding 80/80. Sin ceja. ⚠ Huecos body→imagen (48) e imagen→CTA (32): confirmar/medir en staging. ============================================================ */ #top .gen-s-ocasion { text-align: center; } .gen-s-ocasion.avia-section { padding-top: var(--gen-space-56, 56px); padding-bottom: var(--gen-space-56, 56px); } /* bloque de texto (filete + H2 + body) centrado, máx 608 */ /* Ceja "OCASIÓN" en ROJO corporativo, centrada, con filete encima (reubicado desde la H2 → orden filete→ceja→H2). */ #top .gen-s-ocasion .gen-oca-eyebrow, #top .gen-s-ocasion .gen-oca-eyebrow p { color: var(--gen-bg-fill-primary, #cf0540) !important; } #top .gen-s-ocasion .gen-oca-eyebrow:before { content: ""; display: block; width: 24px; height: 4px; background: var(--gen-bg-fill-primary, #cf0540); margin: 0 auto var(--gen-space-16, 16px); } #top .gen-s-ocasion .av-special-heading-h2.gen-acc:before { display: none !important; } #top .gen-s-ocasion .av-special-heading, #top .gen-s-ocasion .gen-oca-body { max-width: 608px; margin-left: auto; margin-right: auto; } #top .gen-s-ocasion .av-special-heading-h2.gen-acc .av-special-heading-tag { max-width: 608px !important; text-align: center; } #top .gen-s-ocasion .gen-oca-body, #top .gen-s-ocasion .gen-oca-body p { text-align: center; } /* filete rojo centrado (sigue 24x8) */ #top .gen-s-ocasion .gen-acc:before { margin-left: auto; margin-right: auto; } /* H2 -> body = 24 (no los 64 del titular de bloque) */ #top .gen-s-ocasion .av-special-heading-h2.gen-acc { margin-bottom: var(--gen-space-24, 24px) !important; } /* imagen centrada y con tope de ancho (evita que salga a 1043px), separación body->imagen */ #top .gen-s-ocasion .gen-oca-img.avia-image-container { margin: var(--gen-space-48, 48px) auto 0 !important; max-width: 608px; text-align: center; } #top .gen-s-ocasion .gen-oca-img .avia-image-container-inner { margin-left: auto !important; margin-right: auto !important; max-width: 608px; } #top .gen-s-ocasion .gen-oca-img img { margin-left: auto !important; margin-right: auto !important; max-width: 608px; height: auto; } /* Fundir el blanco de la foto con el fondo (#FAFCF8): multiply */ #top .gen-s-ocasion .gen-oca-img img { mix-blend-mode: multiply; } /* Botón centrado bajo la imagen */ #top .gen-s-ocasion .avia-button-wrap { margin-top: var(--gen-space-32, 32px) !important; } /* Móvil: el tope de 608px del contenedor de imagen desborda por la derecha en viewports estrechos (margin:auto no puede centrar un bloque más ancho que su contenedor) → se capa a 100% para que quede centrada. */ @media (max-width: 767px) { #top .gen-s-ocasion .gen-oca-img.avia-image-container, #top .gen-s-ocasion .gen-oca-img .avia-image-container-inner, #top .gen-s-ocasion .gen-oca-img img { max-width: 100% !important; } } /* ============================================================ HOME · Mantenimiento (gen-s-mant) — Figma node 12232:12157. bg #fafcf8, padding 80/80. Título a 501 IZQUIERDA (filete 24x4 + ceja #bc053a + H2 31/38 #222 + body 15/21 #626262). 64px al bloque de 3 columnas (icono 72 + filete 16x4 + subtítulo 18/28 #222). Sin CTA en el nodo. ⚠ Iconos = placeholder: exportar los 3 SVG de Figma y subirlos. Medir en staging. ============================================================ */ #top .gen-s-mant { background: var(--gen-bg-surface-secondary-light, #fafcf8) !important; } .gen-s-mant.avia-section { padding-top: var(--gen-space-80, 80px); padding-bottom: var(--gen-space-80, 80px); } /* Título (izquierda, máx 501) */ #top .gen-s-mant .gen-mant-eyebrow { max-width: 501px; margin: 0 0 var(--gen-space-24, 24px); } #top .gen-s-mant .gen-mant-eyebrow:before { content: ""; display: block; width: 24px; height: 4px; background: var(--gen-bg-fill-primary, #cf0540); margin: 0 0 var(--gen-space-24, 24px); } #top .gen-s-mant .gen-mant-eyebrow, #top .gen-s-mant .gen-mant-eyebrow p { color: var(--gen-color-primary-600, #bc053a) !important; } #top .gen-s-mant .gen-mant-h2 { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-s-mant .gen-mant-h2 .av-special-heading-tag { max-width: 501px !important; color: #222 !important; } #top .gen-s-mant .gen-mant-body, #top .gen-s-mant .gen-mant-body p { max-width: 501px; color: #626262 !important; } #top .gen-s-mant .gen-mant-body { margin-bottom: var(--gen-space-64, 64px) !important; } /* 3 columnas: anular el margin-top ~50px de Enfold en las flex_column para que el gap body→columnas sea el margin-bottom del body (64) y no 64+50=114. */ #top .gen-s-mant .gen-mant-col { margin-top: 0 !important; } /* 3 columnas: icono 72 + filete 16x4 + subtítulo 18/28 */ #top .gen-s-mant .gen-mant-ico { width: 72px; height: 72px; margin: 0 0 var(--gen-space-24, 24px); background-repeat: no-repeat; background-position: left center; background-size: contain; } /* iconos: SVG subidos a la Media Library */ #top .gen-s-mant .gen-mant-ico--emp { background-image: url("/wp-content/uploads/2026/07/employee.svg"); } #top .gen-s-mant .gen-mant-ico--trans { background-image: url("/wp-content/uploads/2026/07/transport.svg"); } #top .gen-s-mant .gen-mant-ico--equip { background-image: url("/wp-content/uploads/2026/07/equipos.svg"); } #top .gen-s-mant .gen-mant-sub:before { content: ""; display: block; width: 16px; height: 4px; background: var(--gen-bg-fill-primary, #cf0540); margin: 0 0 var(--gen-space-24, 24px); } #top .gen-s-mant .gen-mant-sub, #top .gen-s-mant .gen-mant-sub p { max-width: 286px; color: #222 !important; font-size: 18px !important; line-height: 28px !important; letter-spacing: -0.2px; font-weight: var(--gen-font-weight-medium, 500); } /* CTA "Solicitar asistencia técnica" (gen-cta: texto + flecha) bajo las 3 columnas, a 64px. El clear:both de gen-cta introduce CLEARANCE que se come el margin-top (el CTA quedaba pegado a las columnas), así que el hueco se da con padding-top. */ #top .gen-s-mant .gen-mant-cta { margin-top: 0 !important; padding-top: var(--gen-space-64, 64px) !important; } /* ============================================================ HOME · Red de servicios (gen-s-red) — Figma node 12232:12172. Sin bg, padding 80/80. Contenido ~1035 centrado: texto IZQUIERDA (608) + mapa DERECHA (415). Título: filete 24x4 + ceja #bc053a + H2 31/38 #222 + body 15/21 #626262 (máx 498). Sedes: "Sedes:" (25/28) + Lima/Piura apiladas (filete 16x4 + nombre 18/28 + dirección 15/21). ⚠ Mapa = placeholder: exportar el mapa (415x480, marcadores Lima/Piura) de Figma y subir. Medir en staging. ============================================================ */ .gen-s-red.avia-section { padding-top: var(--gen-space-80, 80px); padding-bottom: var(--gen-space-80, 80px); } /* Contenido a ANCHO COMPLETO (1280, x=80→1360) para alinear con el resto de la página (Mantenimiento/Claim/Alquiler arrancan en x=80): texto a la IZQUIERDA + mapa pegado al borde DERECHO (space-between). Mapa centrado verticalmente respecto al texto (align-items:center). Nota: Figma dic2025 mete esta banda a 1035 centrada (x≈203); se usa ancho completo por coherencia con el build. */ #top .gen-s-red .entry-content-wrapper { display: flex; align-items: center; justify-content: space-between; max-width: none; gap: 24px; } /* El .clearfix añade ::before/::after que en flex cuentan como ítems (0-width) y desplazan las columnas 12px (el hueco extra). Anularlos deja SOLO texto + mapa. */ #top .gen-s-red .entry-content-wrapper:before, #top .gen-s-red .entry-content-wrapper:after { content: none !important; display: none !important; } #top .gen-s-red .flex_column { width: auto !important; margin: 0 !important; } #top .gen-s-red .flex_column.gen-red-text { flex: 0 0 608px; width: 608px; max-width: 608px; } /* Mapa AUMENTADO a 480×555 (proporción 415:480 del diseño) y movido a la IZQUIERDA: margin-right 122 lleva su borde dcho a x≈1238 (cota Figma del mapa), en vez de pegado al borde de página (1360). */ #top .gen-s-red .flex_column.gen-red-mapcol { flex: 0 0 480px; width: 480px; max-width: 480px; margin-right: 122px !important; } /* Título (Tittle_S, máx 498) */ #top .gen-s-red .gen-red-eyebrow { max-width: 498px; margin: 0 0 var(--gen-space-24, 24px); } #top .gen-s-red .gen-red-eyebrow:before { content: ""; display: block; width: 24px; height: 4px; background: var(--gen-bg-fill-primary, #cf0540); margin: 0 0 var(--gen-space-24, 24px); } #top .gen-s-red .gen-red-eyebrow, #top .gen-s-red .gen-red-eyebrow p { color: var(--gen-color-primary-600, #bc053a) !important; } #top .gen-s-red .gen-red-h2 { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-s-red .gen-red-h2 .av-special-heading-tag { max-width: 498px !important; color: #222 !important; } #top .gen-s-red .gen-red-body, #top .gen-s-red .gen-red-body p { max-width: 498px; color: #626262 !important; } #top .gen-s-red .gen-red-body { margin-bottom: var(--gen-space-64, 64px) !important; } /* "Sedes:" (25/28) */ #top .gen-s-red .gen-red-sedes .av-special-heading-tag { font-size: 25px !important; line-height: 28px !important; color: #222 !important; letter-spacing: -0.5px; } #top .gen-s-red .gen-red-sedes { margin-bottom: var(--gen-space-32, 32px) !important; } /* Sede: filete 16x4 + nombre 18/28 + dirección 15/21 */ #top .gen-s-red .gen-red-sede-name:before { content: ""; display: block; width: 16px; height: 4px; background: var(--gen-bg-fill-primary, #cf0540); margin: 0 0 var(--gen-space-16, 16px); } #top .gen-s-red .gen-red-sede-name, #top .gen-s-red .gen-red-sede-name p { color: #222 !important; font-size: 18px !important; line-height: 28px !important; letter-spacing: -0.2px; font-weight: var(--gen-font-weight-medium, 500); margin-bottom: var(--gen-space-16, 16px) !important; } #top .gen-s-red .gen-red-sede-addr, #top .gen-s-red .gen-red-sede-addr p { color: #626262 !important; font-size: 15px !important; line-height: 21px !important; } #top .gen-s-red .gen-red-sede-name--2 { margin-top: var(--gen-space-40, 40px) !important; } /* mapa: SVG subido a la Media Library (415x480, marcadores Lima/Piura) */ #top .gen-s-red .gen-red-map { width: 480px; height: 555px; max-width: 100%; background: url("/wp-content/uploads/2026/07/mapa.svg") no-repeat center / contain; } /* Contenedor del formulario Mautic (antes placeholder gris). Ya no es placeholder: envuelve el formulario real que inyecta el shortcode [gen_mautic]. Neutralizado — sin caja gris, sin min-height ni centrado; el estilo lo pone el propio Mautic, igual que en el Code Block de la página Flota. */ #top .gen-mautic { display: block; min-height: 0; background: none; color: inherit; text-align: left; letter-spacing: normal; } #top .gen-mautic p { margin: 0; } /* Botón de envío del formulario Mautic ("Quiero mi cotización"): rojo corporativo + texto blanco. Mautic trae el botón con clases Bootstrap (.btn.btn-default) y su hoja fuerza fondo blanco, por eso hace falta !important para que gane el rojo del DS. */ #top .gen-mautic .mauticform-button.btn.btn-default, #top .gen-mautic button.mauticform-button { background: var(--gen-bg-fill-primary, #cf0540) !important; color: #fff !important; border: 0 !important; border-radius: 3px !important; padding: 13px 30px !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.2 !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer; transition: background .2s ease; } #top .gen-mautic .mauticform-button.btn.btn-default:hover, #top .gen-mautic button.mauticform-button:hover { background: var(--gen-bg-fill-hover, #bc053a) !important; } /* Formulario Mautic a DOS COLUMNAS en desktop (≥768px). El contenedor de campos (.mauticform-page-wrapper) pasa a flex-wrap; por defecto cada fila ocupa el 100% (una columna) y solo los pares indicados van al 50%. ⚠ Los pares se identifican por la clase numérica .mauticform-field-N que Mautic asigna por ORDEN de campo. Mapa actual del form 66: f2 Nombre · f3 Apellidos → par f4 Empresa · f5 RUC de la Empresa → par f6 Correo · f7 Teléfono → par f8 Tipo de cliente · f9 Sector → par f11 ¿Qué necesita? · f12 Tiempo de alquiler → par f14 Potencia · f15 Voltaje → par El resto (f1/f10 cabeceras, f13 Lugar de instalación, f16 Otros detalles, condiciones, captcha y botón) quedan a ancho completo. Si se reordenan/añaden campos en Mautic, estos números cambian y hay que revisar el mapa. La especificidad del selector del par incluye .mauticform-row para ganar al width:100%. */ @media (min-width: 768px) { #top .gen-mautic .mauticform-page-wrapper { display: flex; flex-wrap: wrap; column-gap: 24px; align-items: flex-start; } #top .gen-mautic .mauticform-page-wrapper > .mauticform-row { width: 100%; } #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-2, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-3, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-4, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-5, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-6, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-7, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-8, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-9, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-11, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-12, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-14, #top .gen-mautic .mauticform-page-wrapper > .mauticform-row.mauticform-field-15 { width: calc(50% - 12px); } } /* Formulario Mautic en MÓVIL (<768px): la columna del formulario (2/3) no colapsaba a ancho completo (se quedaba en ~215px e indentada). Enfold la fija con `#top .flex_column.av_two_third { width: calc(66.6667% - 8px) !important }`, que además vence a su propia regla de colapso móvil (esa NO lleva !important). Para ganarle hay que igualar/superar su especificidad Y usar !important → por eso el selector incluye .av_two_third/.av_one_third (no basta con `.gen-s-form .flex_column`, empataba y perdía por orden de carga). Así el form ocupa el mismo ancho que el contenido (p. ej. 335px en un iPhone de 430px). */ @media (max-width: 767px) { #top .gen-s-form .flex_column.av_one_third, #top .gen-s-form .flex_column.av_two_third { width: 100% !important; margin-left: 0 !important; clear: both !important; } #top .gen-s-form .gen-mautic, #top .gen-s-form .gen-mautic .mauticform-page-wrapper { width: 100% !important; } } /* Densidad vertical del formulario Mautic: entre campos 12px (Mautic trae 20px); las cabeceras de sección (freehtml: "Datos personales" / "Datos técnicos") dejan 24px hasta los primeros campos. Aplica en todos los tamaños. */ #top .gen-mautic .mauticform-row { margin-bottom: 12px !important; } #top .gen-mautic .mauticform-row.mauticform-freehtml { margin-bottom: 24px !important; } /* Página de agradecimiento (/agradecimiento-de-contacto/): pantalla de confirmación centrada. Reutiliza el hero del DS (gen-section--hero) pero centra todo el contenido y le da aire vertical. Hay que anular el float:left que Enfold pone en el H1 y el botón, si no quedan a la izquierda. Provisional hasta cotejar con Figma. */ #top .gen-s-gracias { padding-top: 140px; padding-bottom: 140px; } #top .gen-s-gracias .container { text-align: center !important; } #top .gen-s-gracias .gen-eyebrow, #top .gen-s-gracias .gen-eyebrow p, #top .gen-s-gracias .av-special-heading h1, #top .gen-s-gracias .gen-subtitle, #top .gen-s-gracias .gen-subtitle p { text-align: center !important; } #top .gen-s-gracias .av-special-heading, #top .gen-s-gracias .av-special-heading h1 { float: none !important; margin-left: auto !important; margin-right: auto !important; } /* El subtítulo y la ceja son av_textblock_section: se topan a 560 y se centran con margin auto. Hay que anular el float de Enfold en TODOS (H1, botón, textblocks), si no se van a la izquierda. */ #top .gen-s-gracias .av_textblock_section, #top .gen-s-gracias .gen-subtitle { max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; float: none !important; } #top .gen-s-gracias .avia-button-wrap { display: inline-block !important; float: none !important; margin: 32px auto 0 !important; } #top .gen-s-gracias .avia-button { float: none !important; } /* Etiqueta de la Biblioteca de bloques: barra AMARILLO LIMA con el nombre del bloque encima de cada estructura, con gran separación arriba para distinguir bloques. Uso interno del repositorio (no de páginas reales). */ #top .gen-lbl { display: inline-block !important; background: #c6ff00 !important; padding: 5px 9px !important; margin: 96px 0 0 !important; } #top .gen-lbl, #top .gen-lbl p { font-family: var(--gen-font-helvetica); color: #111 !important; font-size: 11px !important; line-height: 15px !important; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } #top .gen-lbl p { margin: 0 !important; } /* Aviso rojo (Promobox) */ .gen-notice { background: var(--gen-bg-fill-primary, #cf0540) !important; border: 0 !important; border-radius: var(--g-ui-radius, 4px); } .gen-notice, .gen-notice * { color: #fff !important; } /* Modificadores de ritmo de sección (poner la clase en la Color Section) */ .gen-section.avia-section { padding-top: var(--gen-space-56, 56px); padding-bottom: var(--gen-space-56, 56px); } .gen-section--lg.avia-section { padding-top: var(--gen-space-80, 80px); padding-bottom: var(--gen-space-80, 80px); } .gen-section--hero.avia-section { padding-top: var(--gen-space-40, 40px) !important; padding-bottom: var(--gen-space-72, 72px) !important; } /* Banda de imagen a sangre completa (reutilizable, cualquier posición). Sin imagen real muestra un placeholder gris claro y SIN círculo. La altura la fija Enfold (min_height del Layout Builder). */ .gen-imgband.avia-section { position: relative; padding: 0; min-height: 460px; background: var(--gen-color-grey-100, #efefef); } /* Banda de vídeo del hero (oscura + botón play) */ .gen-video.avia-section { position: relative; padding: 0; min-height: 460px; background: var(--g-video-bg, #2a2a2a); } .gen-video.avia-section:after { content: ""; position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.8); } /* ========================================================================= GLOBALES (revisión por puntos) ========================================================================= */ /* Botones: por defecto RELLENOS (Enviar, Pide tu presupuesto). Las CTAs estilo enlace van con la clase .gen-cta (sin fondo + flecha) -> ver Componentes. */ /* Sin líneas de lado a lado: quitar bordes de las secciones */ #top .avia-section { border-top: 0 !important; border-bottom: 0 !important; } /* Line-heights de titulares EXACTOS en px (evita el redondeo em de Theme Options) */ #top .av-special-heading-h1 .av-special-heading-tag { line-height: var(--gen-line-height-heading-lg, 44px) !important; } #top .av-special-heading-h2 .av-special-heading-tag { line-height: var(--gen-line-height-heading-md, 38px) !important; } /* H2 MENSAJE GENERAL (sin filete): ancho máximo 954px */ #top .av-special-heading-h2 .av-special-heading-tag { max-width: 954px !important; } /* H2 TITULAR DE BLOQUE (con filete .gen-acc): ancho máximo 628px */ #top .av-special-heading-h2.gen-acc .av-special-heading-tag { max-width: 628px !important; } /* H2 TITULAR (con filete): separación al bloque siguiente = 64px SIEMPRE */ #top .av-special-heading-h2.gen-acc { margin-bottom: var(--gen-space-64, 64px) !important; } /* H2 GENERAL (sin filete): separación al CTA inferior = 24px SIEMPRE. Determinista: el H2 aporta los 24px y se anula el margin-top del CTA contiguo. */ #top .av-special-heading-h2:not(.gen-acc) { margin-bottom: var(--gen-space-24, 24px) !important; } #top .av-special-heading-h2:not(.gen-acc) + .avia-button-wrap.gen-cta { margin-top: 0 !important; } /* H2 con filete (.gen-acc): bloque rojo 24x8 y 24px de hueco hasta el titular */ #top .av-special-heading-h2.gen-acc:before { width: 24px; height: 8px; margin-bottom: var(--gen-space-24, 24px); } #top .av-special-heading-h3 .av-special-heading-tag { line-height: var(--gen-line-height-heading-sm, 31px) !important; } #top .av-special-heading-h4 .av-special-heading-tag { line-height: var(--gen-line-height-heading-xs, 24px) !important; } /* Grid: gutter lateral de 24px entre columnas (grid 12 columnas, gutter 24px) */ #top .flex_column { margin-left: 24px !important; } #top .flex_column.first { margin-left: 0 !important; } #top .flex_column.av_one_half { width: calc((100% - 24px) / 2) !important; } #top .flex_column.av_one_third { width: calc((100% - 48px) / 3) !important; } #top .flex_column.av_two_third { width: calc((100% - 48px) / 3 * 2 + 24px) !important; } /* Suavizado de fuentes (antialiasing) en toda la web */ #top, #top body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* CTA (.gen-cta) SIEMPRE en bloque, debajo del texto, a 24px */ #top .gen-cta { display: block !important; clear: both; margin-top: var(--gen-space-24, 24px) !important; } /* Sin líneas horizontales NUNCA: sombra de sección (avia-shadow), hr y divisores */ #top .avia-section { box-shadow: none !important; } #top .container_wrap { box-shadow: none !important; border: 0 !important; } #top hr, #top .av_hr, #top .avia-divider, #top .hr_invisible, #top .av-section-color-overlay { border: 0 !important; box-shadow: none !important; } /* FIX raíz: al ocultar special-heading-border el wrapper colapsaba (título flotado). flow-root hace que el wrapper contenga su texto -> alturas y gaps correctos. */ #top .av-special-heading { display: flow-root; } /* ========================================================================= H3 con filete + Subtítulo (header de columna) + sección Nacional/Internacional ========================================================================= */ /* H3 con filete: bloque rojo 24x4 y 24px hasta el h3 */ #top .av-special-heading-h3.gen-acc:before { width: 24px; height: 4px; margin-bottom: var(--gen-space-24, 24px); } /* Subtítulo / header de columna (18/24/500, no negrita). Clase .gen-subtitle en el textblock. Gana al base de .avia_textblock por orden de cascada. */ #top .gen-subtitle, #top .gen-subtitle p { font-size: var(--gen-font-size-subtitle-md, 18px) !important; line-height: var(--gen-line-height-subtitle-md, 24px) !important; font-weight: var(--gen-font-weight-medium, 500) !important; letter-spacing: var(--gen-letter-spacing-subtitle-md, -0.2px); color: var(--gen-color-grey-800, #222222) !important; /* DS: subtítulo = text/Genesal/dark #222 */ margin: 0; } /* LAYOUT REUTILIZABLE .gen-cols-5-5 (en la Color Section): dos bloques de 5 columnas con 2 columnas (3 gutters) de separación. 1 col = (100% - 11*24px)/12 ; bloque = 5col+4g ; separación = 2col+3g. Usado en Nacional/Internacional y Seguimiento. */ #top .gen-cols-5-5 .flex_column.av_one_half { width: calc((100% - 264px) / 12 * 5 + 96px) !important; } #top .gen-cols-5-5 .flex_column.av_one_half.first { margin-left: 0 !important; } #top .gen-cols-5-5 .flex_column.av_one_half:not(.first) { margin-left: calc((100% - 264px) / 12 * 2 + 72px) !important; } /* Variante .gen-cols-6-6: dos bloques iguales (6+6) con gutter 24px = comportamiento por defecto de av_one_half (628px c/u). No necesita override de ancho; solo el espaciado interno. */ /* Espaciado interno de cada bloque (compartido por gen-cols-5-5 y gen-cols-6-6): filete->h3 24 (arriba) · h3->subtítulo/body 24 · subtítulo->body 24 */ #top .gen-cols-5-5 .av-special-heading-h3, #top .gen-cols-6-6 .av-special-heading-h3 { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-cols-5-5 .av_textblock_section, #top .gen-cols-6-6 .av_textblock_section { margin: 0 !important; } #top .gen-cols-5-5 .av_textblock_section + .av_textblock_section, #top .gen-cols-6-6 .av_textblock_section + .av_textblock_section { margin-top: var(--gen-space-24, 24px) !important; } /* Bloque .gen-band (imagen banda a sangre): la imagen "posee" sus huecos = 64px ARRIBA y ABAJO. Arriba via padding-top (la imagen tiene clear:both y la clearance absorbería un margin-top); abajo via margin-bottom. Hay que ganar al !important de Enfold con la clase .avia-image-container. Clase reutilizable (en la Color Section); usada en Nacional/Internacional y en band-highlight. */ #top .gen-band .gen-media.avia-image-container { margin-top: 0 !important; padding-top: var(--gen-space-64, 64px) !important; margin-bottom: var(--gen-space-64, 64px) !important; } /* ========================================================================= gen-logos — banda de LOGOS de marcas/partners (motores y alternadores). Alternativa a gen-band cuando se quieren mostrar marcas en vez de una imagen. FLEX con huecos UNIFORMES de 24px (horizontal y vertical) + salto forzado tras el 8º logo (8 fila 1, 7 fila 2, ambas centradas); en tablet/móvil, wrap natural. Alto del logo = 80px. Fondo #fff. Cada logo es un av_image con enlace manual + target _blank (se abre en NUEVA pestaña) a la web de la marca. Los logos van en grayscale + opacidad reducida por defecto y pasan a color al hover. El grid se aplica sobre .entry-content-wrapper (padre real de las av_image en el DOM de Enfold). Cada av_image lleva gen-logo. ========================================================================= */ #top .gen-logos { background-color: #fff !important; } #top .gen-logos.avia-section { padding-top: 0 !important; } /* pegado al bloque de texto anterior (sin los 56 top) */ #top .gen-logos .entry-content-wrapper { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; column-gap: var(--gen-space-32, 32px) !important; row-gap: 0 !important; } #top .gen-logos .gen-logo.avia-image-container { margin: 0 !important; width: auto !important; flex: 0 0 auto !important; } #top .gen-logos .gen-logo .avia-image-container-inner { margin: 0 !important; } #top .gen-logos .gen-logo a.avia_image { display: block; } #top .gen-logos .gen-logo img { width: auto; height: 80px; max-width: 138px; object-fit: contain; display: block; filter: grayscale(100%); opacity: 0.55; transition: filter .25s ease, opacity .25s ease; } #top .gen-logos .gen-logo:hover img { filter: none; opacity: 1; } /* salto de fila forzado tras el 8º logo (8 arriba / 7 abajo, ambas filas centradas). El break es un av_textblock vacío a ancho completo; su altura = el hueco vertical entre las dos filas (32, verificado en el DOM real de staging: el break rinde 1:1). En tablet/móvil se oculta y el hueco lo da row-gap (32). */ #top .gen-logos .av_textblock_section { flex: 0 0 100% !important; width: 100% !important; height: var(--gen-space-32, 32px) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #top .gen-logos .av_textblock_section .avia_textblock { display: none !important; } /* tablet/móvil: wrap natural con hueco 32 y sin salto forzado */ @media (max-width: 989px) { #top .gen-logos .entry-content-wrapper { row-gap: var(--gen-space-32, 32px) !important; } #top .gen-logos .av_textblock_section { display: none !important; } } /* Ajustes de hueco POR PÁGINA (scope a la clase semántica única de cada banda): distancia bloque anterior -> imagen de la banda = 120px. Se anula el padding-top de la sección banda (80) y se fija el hueco en el padding-top de la imagen, contando el padding-bottom (80) de la sección de contenido anterior. Verificar el 120 exacto en staging y afinar el padding-top de la imagen. */ /* P1 Sobre nosotros — CTA "Experiencia en Perú" -> imagen banda (80 + 40 = 120) */ #top .gen-s-ccl.avia-section { padding-top: 0 !important; } #top .gen-s-ccl .gen-media.avia-image-container { padding-top: 40px !important; } /* P3 Experiencia en Perú — bloque "Una trayectoria..." -> imagen banda (80 + 24 lista + 16 = 120) */ #top .gen-s-conocimiento.avia-section { padding-top: 0 !important; } #top .gen-s-conocimiento .gen-media.avia-image-container { padding-top: 16px !important; } /* P6 Presencia nacional — bloque "Nuestras sedes" -> imagen banda (80 + 40 = 120) */ #top .gen-s-despliegue.avia-section { padding-top: 0 !important; } #top .gen-s-despliegue .gen-media.avia-image-container { padding-top: 40px !important; } /* gen-p-general — PÁRRAFO con la MISMA visualización que el H2 "mensaje general" (31/38/500, tracking -0.5, #000, caja normal, ancho 954). Para el bloque intro-cta cuando el texto es un

y no un H2: misma apariencia + mismo barrido (añadir también la clase gen-anim-reveal) + mismo hueco al CTA (24). IMPORTANTE: las clases van en el custom_class del av_textblock (NO en un

inline: Avia/TinyMCE borra los class de HTML dentro del textblock). El custom_class cae en .avia_textblock; por eso se estila también el

interno (.gen-p-general p), igual que gen-subtitle. El JS encuentra .gen-anim-reveal en .avia_textblock y trocea su texto en .gr-c (respetando los ). */ #top .gen-p-general, #top .gen-p-general p { font-size: var(--gen-font-size-heading-md, 31px) !important; line-height: var(--gen-line-height-heading-md, 38px) !important; font-weight: var(--gen-font-weight-medium, 500) !important; letter-spacing: var(--gen-letter-spacing-heading-md, -0.5px) !important; color: var(--gen-color-grey-900, #000000) !important; text-transform: none !important; max-width: 954px !important; margin: 0 !important; } /* las negritas del brief NO deben romper la apariencia de titular -> heredan color/peso del H2 (uniforme) */ #top .gen-p-general strong, #top .gen-p-general b { color: inherit !important; font-weight: var(--gen-font-weight-medium, 500) !important; } /* hueco p→CTA = 24 (paridad con el H2 general). El body queda a 0 (regla global del textblock+CTA) y el CTA aporta los 24. Scoped a .gen-s-intro (clase de la sección) -> robusto y gana a la regla global de textblock+CTA (32), sin depender de dónde caiga la clase gen-p-general (Avia la pone en .av_textblock_section). */ #top .gen-s-intro .av_textblock_section + .avia-button-wrap.gen-cta { margin-top: var(--gen-space-24, 24px) !important; } /* Varios párrafos en un MISMO gen-p-general de un gen-s-intro (p.ej. 1.6.4/1.6.5: subtítulo movido + intro del brief, dentro de un solo av_textblock para que el barrido gen-anim-reveal sea CONTINUO — en orden, no al unísono): hueco 24 entre párrafos. El caso de 1 solo párrafo no se ve afectado. */ #top .gen-s-intro .gen-p-general p + p { margin-top: var(--gen-space-24, 24px) !important; } /* ========================================================================= TXT + IMG (texto y imagen lado a lado / imagen a sangre debajo) 1 col = (100% - 11*24px)/12. Texto = 6col+5g (628). Imagen = 5col+4g (519). Hueco entre ambos = 1col + 2g (≈133). Variante --rev = imagen a la izquierda. ========================================================================= */ #top .gen-txtimg .flex_column.av_one_half.first { width: calc((100% - 264px) / 12 * 6 + 120px) !important; margin-left: 0 !important; } #top .gen-txtimg .flex_column.av_one_half:not(.first) { width: calc((100% - 264px) / 12 * 5 + 96px) !important; margin-left: calc((100% - 264px) / 12 + 48px) !important; } /* invertida: imagen (5col) izquierda + texto (6col) derecha */ #top .gen-txtimg--rev .flex_column.av_one_half.first { width: calc((100% - 264px) / 12 * 5 + 96px) !important; margin-left: 0 !important; } #top .gen-txtimg--rev .flex_column.av_one_half:not(.first) { width: calc((100% - 264px) / 12 * 6 + 120px) !important; margin-left: calc((100% - 264px) / 12 + 48px) !important; } /* Imagen de txt-img = retrato 519×632 (la imagen real; el placeholder se recorta con cover) */ #top .gen-txtimg .gen-card-img img, #top .gen-txtimg--rev .gen-card-img img { aspect-ratio: 519 / 632; object-fit: cover; height: auto; } /* Espaciado interno (como en el resto del kit): filete→título 24 (global) · título→body 24 */ #top .gen-txtimg .av-special-heading-h2.gen-acc, #top .gen-txtimg--rev .av-special-heading-h2.gen-acc { margin-bottom: var(--gen-space-24, 24px) !important; } /* txt-img-full: filete→título 24 · título→body 24 · body→imagen a sangre 48. Cuerpo de varios bloques (H3/listas/párrafos): ritmo interno 24; SOLO el textblock pegado a la imagen conserva los 48. En el caso simple (un único body antes de la imagen), ese body ES el pegado -> 48 (sin regresión respecto al comportamiento anterior). */ #top .gen-txtimg-full .av-special-heading-h2.gen-acc { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-txtimg-full .av_textblock_section { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-txtimg-full .av_textblock_section:has(+ .gen-media) { margin-bottom: var(--gen-space-48, 48px) !important; } #top .gen-txtimg-full .gen-media { margin-top: 0 !important; } /* ancho del bloque de TEXTO = 628 (H2, H3 y body/listas topados a 628; alineados a la izquierda). La imagen .gen-media NO se topa -> sigue a sangre (ancho completo del contenedor). */ #top .gen-txtimg-full .av-special-heading .av-special-heading-tag { max-width: 628px !important; } #top .gen-txtimg-full .avia_textblock { max-width: 628px; } /* txt-img-full--noimg: variante SIN imagen = cabecera de texto (H2 + body). Conserva el hueco inferior de 48 (el que dejaba la imagen) como padding antes del contenido siguiente (p.ej. tablas). título→body 24 · body→siguiente 48. El tope de 628 SOLO afecta al título y al body que va justo tras él (NO a lo que venga después: shortcodes, tablas, etc.). Reutilizable. */ #top .gen-txtimg-full--noimg .av-special-heading-h2.gen-acc { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-txtimg-full--noimg .av-special-heading-h2 .av-special-heading-tag { max-width: 628px !important; } #top .gen-txtimg-full--noimg .av-special-heading-h2.gen-acc + .av_textblock_section { margin-bottom: var(--gen-space-48, 48px) !important; } #top .gen-txtimg-full--noimg .av-special-heading-h2.gen-acc + .av_textblock_section .avia_textblock { max-width: 628px; } /* Bloque de texto a 6 columnas (628): título + body. filete→título 24 (global) · título→body 24 */ #top .gen-txt .av-special-heading-h2.gen-acc { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-txt .avia_textblock { max-width: 628px; } /* ========================================================================= ACORDEÓN (gen-accordion) — reestilo del av_toggle de Enfold. Sin cajas; cada item con línea inferior #767676; tipografía de marca. El abrir/cerrar lo gestiona Enfold (no JS propio). Estilos finos a afinar en staging. */ /* línea inferior a TODO el ancho; el contenido (título, body, chevron) va con 16px de padding interno a izquierda y derecha (el padding va en .single_toggle; la línea es su border-bottom). */ #top .gen-accordion .single_toggle { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--gen-color-grey-500, #767676) !important; box-shadow: none !important; margin: 0 !important; border-radius: 0 !important; padding: 0 var(--gen-space-16, 16px) !important; } #top .gen-accordion .toggler { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: var(--gen-space-16, 16px) 40px var(--gen-space-16, 16px) 0 !important; margin: 0 !important; color: var(--gen-text-primary, #292929) !important; font-family: var(--gen-font-helvetica) !important; font-size: var(--gen-font-size-heading-xs, 18px) !important; line-height: var(--gen-line-height-heading-xs, 24px) !important; font-weight: var(--gen-font-weight-medium, 500) !important; letter-spacing: var(--gen-letter-spacing-heading-xs, -0.2px) !important; position: relative; cursor: pointer; } #top .gen-accordion .toggler:hover { color: var(--gen-bg-fill-primary, #cf0540) !important; } /* ABIERTO: el titular del item desplegado va en ROJO (Enfold marca .activeTitle en el .toggler y .active_tab en el .single_toggle; se cubren las dos por si cambia el marcado). */ #top .gen-accordion .toggler.activeTitle, #top .gen-accordion .single_toggle.active_tab .toggler { color: var(--gen-bg-fill-primary, #cf0540) !important; } /* Icono = chevron del DS (Lucide): down = cerrado, up = abierto. Color ROJO #cf0540 en AMBOS estados (el estado abierto solo cambia la máscara, hereda este background-color). Se oculta el +/- nativo de Enfold y se pinta el chevron con mask sobre .toggle_icon (derecha). */ #top .gen-accordion .vert_icon, #top .gen-accordion .hor_icon { display: none !important; } #top .gen-accordion .toggle_icon { left: auto !important; right: 0 !important; top: 50% !important; margin-top: -12px !important; width: 24px !important; height: 24px !important; border: 0 !important; border-radius: 0 !important; transform: none !important; background-color: var(--gen-bg-fill-primary, #cf0540) !important; -webkit-mask: var(--gen-icon-chevron-down) no-repeat center / contain; mask: var(--gen-icon-chevron-down) no-repeat center / contain; } /* abierto: chevron hacia arriba (Enfold marca .activeTitle en el toggler / .active_tab en el item) */ #top .gen-accordion .toggler.activeTitle .toggle_icon, #top .gen-accordion .single_toggle.active_tab .toggle_icon { transform: none !important; -webkit-mask-image: var(--gen-icon-chevron-up) !important; mask-image: var(--gen-icon-chevron-up) !important; } /* cuerpo del item */ #top .gen-accordion .toggle_wrap, #top .gen-accordion .toggle_content { background: transparent !important; border: 0 !important; } #top .gen-accordion .toggle_content { padding: 0 0 var(--gen-space-16, 16px) !important; } #top .gen-accordion .toggle_content, #top .gen-accordion .toggle_content p { font-size: var(--gen-font-size-body-md, 15px) !important; line-height: var(--gen-line-height-body-md, 21px) !important; color: var(--gen-text-medium, #626262) !important; } /* hueco body -> acordeón = 40px (el body anterior no aporta margen inferior) */ #top .gen-accordion { margin-top: var(--gen-space-40, 40px) !important; } #top .av_textblock_section:has(+ .gen-accordion) { margin-bottom: 0 !important; } /* ========================================================================= PÁGINA EMPRESA — bloques de texto del DS (nodo Figma 1-32739) Componente maestro "Block text" del DS: stack vertical con gap 24 UNIFORME entre TODOS los elementos (filete · pretitle · título · subtítulo · body · botones). Filete H2 = 24×8 / H3 = 24×4 (ya global). Variantes de ancho 628 / 954 / 410 (grid 1280/12). ========================================================================= */ /* LEAD a 628 — es el H2 "mensaje general" (sin filete -> coge gen-anim-reveal auto) pero topado a 628 en vez de 954. Clase .gen-lead-narrow en el av_heading. */ #top .av-special-heading-h2.gen-lead-narrow .av-special-heading-tag { max-width: 628px !important; } /* gen-textblock — bloque de texto = filete + H2 + (subtítulo) + body. Body a 954, ritmo interno uniforme 24 (filete→H2 24 global · H2→subtítulo/body 24 · subtítulo→body 24). Clase .gen-textblock en la Color Section. */ #top .gen-textblock .av-special-heading-h2.gen-acc { margin-bottom: var(--gen-space-24, 24px) !important; } #top .gen-textblock .avia_textblock { max-width: 954px; } #top .gen-textblock .av_textblock_section { margin: 0 !important; } #top .gen-textblock .av_textblock_section + .av_textblock_section { margin-top: var(--gen-space-24, 24px) !important; } /* gen-textblock--narrow — variante opt-in: body topado a 628 (= media columna / ancho del texto de gen-txtimg) en vez de 954. El titular H2 gen-acc ya va a 628; esto alinea el body a ese ancho. Misma especificidad que la base y posterior en el orden → gana sin !important. */ #top .gen-textblock.gen-textblock--narrow .avia_textblock { max-width: 628px; } /* gen-h3-box — H3 "encabezado de lista/bloque" con filete + sangría (nace del bloque "Evaluación técnica…": gen-textblock = H2 + body + H3 + lista/body). El H3 lleva: caja roja 24×4 (vía gen-acc, con su hueco caja→texto 24) + padding-left 32 + margin-top 32 (hueco desde el body anterior) + margin-bottom 24 (hueco al body/lista siguiente). Reutilizable en cualquier bloque: custom_class='gen-acc gen-h3-box' en el av_heading H3. Gana al reset global (#top .av-special-heading margin-top:0 !important) por especificidad + !important. */ #top .av-special-heading-h3.gen-h3-box { margin-top: var(--gen-space-48, 48px) !important; /* body anterior → caja roja del H3 = 48 */ margin-bottom: var(--gen-space-24, 24px) !important; /* H3 → body/lista siguiente = 24 */ padding-left: var(--gen-space-32, 32px); /* sangría del H3 (caja + texto) = 32 */ } /* Determinista en CUALQUIER contexto: el wrapper del H3 es flow-root (no colapsa márgenes), así que el H3 "posee" sus huecos y se anula el margen del vecino contiguo (si no, en gen-txtimg —body sin margin:0— y gen-txtimg-full —body margin-bottom:24— los huecos se sumarían). */ #top .av_textblock_section:has(+ .av-special-heading-h3.gen-h3-box) { margin-bottom: 0 !important; } /* el body/lista BAJO el H3 se ALINEA con el H3 (misma sangría 32) y no aporta margen superior. En listas se anula el sangrado propio del