tres.ovh — HTML home → Elementor V4 nativo (vía MCP)

Fuente: ~/Downloads/home-elementor-widget.html (Nuevo Estadio Atlas/UdeG). Resultado: página id 48 “Inicio — Nuevo Estadio” (borrador), template elementor_header_footer, título oculto.

Cómo se construyó

• 11 variables globales: ink, paper, muted, rule, gutter, measure, step-display/title/body/small, space-section.
• 31 clases globales atl-* (root, wrap, section, eyebrow, display, title, body, ph, tab, tabmenu, panel*, over-, split, acc*, spec*, milestone, dot, logo, note).
• Widgets nativos: e-tabs (x2), e-accordion (x3, native
  ), e-grid (specs, logos), e-flexbox (timeline).
• 4 llamadas build-composition (hero+tabs / proyecto+specs / experiencia+distrito / timeline+jugadores+cierre).

Pérdidas vs HTML

• Acordeón que cambia la imagen lateral: no nativo → imagen fija (primera).
• Placeholders .ph = div con rayas + etiqueta; reemplazar por imágenes reales.
• Botón “Ver el video” sin acción (original era alert()).
• Selector de tab activo usa &[aria-selected="true"] en clase atl-tab — funciona.

Gotcha crítico

Site URL = http://tres.ovh → Elementor V4 enlaza global-/local-*.css por http → mixed content, página sin estilos en https. Fix: Ajustes → Generales → ambas URLs a https://tres.ovh.

Timeline gotcha

e-div-block en flex row ocupa 100% → poner flex: 1 1 0; width: auto en el hijo. overflow-x:auto recorta puntos absolutos (y también se vuelve overflow-y).

Fusión con estilo de página 66 (TERRA, V3) — 2026-09-25

Tomado de TERRA: display serif light (Cormorant Garamond 300), labels Montserrat 600 uppercase tracking .22em, divisor hairline 60px bajo cada título, entradas con fade al hacer scroll. Conservado del estadio: paleta B/N, layout izquierda, grids/tabs/acordeones. Legibilidad: body sin justificar (left), line-height 1.75, max 62ch, Montserrat 15–17px.

• Variables nuevas: font-display, font-text; step-display/title/body reescalados (Cormorant tiene x-height bajo).
• Clase nueva atl-rule (e-divider x6). Interactions: hero load fade; scrollIn fade en bloques de título, specs, cierre.
• Revertir: cambiar valores de font-display/font-text o de las clases atl-display/atl-title/atl-eyebrow.

home-clone (página 100) — versión final con sistema Roboto de Kinsta — 2026-09-25

Fuente de estilos: https://unnuevoestadioparajalisco.kinsta.cloud/ (Elementor 4.2.4; solo hero + tabs son reales, el resto es demo “Air/Earth/Water”). Tokens Kinsta (verificados en render de tres.ovh, idénticos):

• H1 hero: Roboto 400 80px / lh .9 / -0.3px
• Títulos panel/sección: Roboto 300 64px / lh .9
• Título de sección (“Porqué un nuevo estadio”): Roboto 400 30px
• Body: Roboto Flex 500 16px / 1.6
• Botón “Ver el video”: Roboto 500 25px uppercase
• Labels spec: Roboto Condensed 700 uppercase
• Gutter ~3vw (43px @1440), B/N. Clases propias fin-* (32) + variables font-roboto*, fin-gutter/hero/display/section → página 48 intacta. Copy actualizado desde Kinsta (hero largo, tabs de 3 líneas, textos largos de los 4 primeros paneles). Panel 5 en Kinsta repite el texto de panel 1 (placeholder) → se dejó el texto propio. Corregido: “localia”→“localía”, “jaliscience”→“jalisciense”, espacio faltante “sus partes”.

Import a Kinsta: CUIDADO

Kinsta = Elementor 4.2.4 (paragraph = html-v3). tres.ovh = 4.3.2 (escaped-html). Exportar de tres → importar en Kinsta FALLA (“paragraph: invalid_value”). Actualizar Kinsta a 4.3.x antes de importar.