/* ═══════════════════════════════════════════════════════════════════════════ Nomadic Creations · la estática, sobre Elementor ─────────────────────────────────────────────────────────────────────────── tokens.css y sitio.css son COPIA de la web estática (web/assets/css/). Esta hoja va detrás y hace dos cosas: 1. Adaptar. Elementor envuelve cada widget en un
y la clase propia cae en ese div, no en el

o el de dentro. Y trae de serie huecos, rellenos y anchos que la estática no tiene. Aquí se neutralizan. 2. Añadir las cuatro piezas de la web vieja que Damon quiere conservar (reunión del 24/09): Production Process, tarjetas con giro, logos en tarjeta blanca y pie blanco. Las reglas de sitio.css siguen valiendo: nada de overflow para tapar, nada de anchos fijos, todo sale de un token. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · Elementor, en neutro ────────────────────────────────────────────── */ /* Un contenedor de Elementor es un flex en columna con 10 px de relleno y 20 px de hueco. En esta web es un
normal: la clase de la estática decide si es rejilla, fila o bloque. Elementor escribe `--display:flex` para CADA contenedor en su CSS por documento, con especificidad (0,3,0) y a veces DESPUÉS de esta hoja (las secciones guardadas imprimen el suyo en el ). Por eso el selector repetido: (0,4,0) gana siempre y sigue siendo solo una variable. La propiedad `display` la sigue poniendo la clase de la estática. */ :root .e-con.e-con.e-con { --display: block; --width: auto; --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; --gap: 0; --row-gap: 0; --column-gap: 0; --container-widget-width: auto; --container-widget-flex-grow: 0; --flex-grow: 0; --flex-shrink: 1; --flex-basis: auto; } /* Los que en la estática son filas: Elementor fuerza la columna con (0,2,0). */ :root .e-con.nc-cabecera__interior, :root .e-con.nc-botonera, :root .e-con.nc-logos, :root .e-con.nc-audiencia__pie, :root .e-con.nc-cta-ancha, :root .e-con.nc-pie__contacto, :root .e-con.nc-icono-tarjeta, :root .e-con.nc-media__logos { --flex-direction: row; } body { --kit-widget-spacing: 0px; --widgets-spacing: 0px; } .elementor-widget:not(:last-child) { margin-block-end: 0; } .elementor-heading-title { line-height: var(--lh-titulo); } .elementor-widget-image { text-align: inherit; } .elementor-widget-image img { display: block; } .elementor-widget-image a { display: block; } /* Un contenedor-enlace (las tarjetas) no subraya ni pinta de rosa sus textos. */ a.e-con, a.e-con:hover { color: inherit; text-decoration: none; } /* Hello deja el «Skip to content» como clase sin estilo (su hoja no se carga). */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link:focus { clip-path: none; width: auto; height: auto; margin: 0; left: var(--e-2); top: var(--e-2); z-index: 100; padding: var(--e-3) var(--e-4); background: var(--c-acento-relleno); color: var(--c-sobre-acento); border-radius: var(--radio); } /* ── Botones · las reglas de .nc-boton, sobre el del widget ─────────── */ .nc-btn .elementor-button, .nc-form .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: var(--e-3) var(--e-6); border: 2px solid transparent; border-radius: var(--radio-pastilla); background: var(--c-acento-relleno); color: var(--c-sobre-acento); font-family: var(--f-titulo); font-size: var(--t-micro); font-weight: var(--p-semi); line-height: var(--lh-cuerpo); letter-spacing: var(--ls-micro); text-transform: uppercase; text-decoration: none; transition: background var(--dur) var(--curva), border-color var(--dur) var(--curva), color var(--dur) var(--curva); } .nc-btn .elementor-button:hover, .nc-btn .elementor-button:focus-visible, .nc-form .elementor-button:hover { background: var(--c-acento-hover); color: var(--c-sobre-acento); } .nc-btn--contorno .elementor-button { background: transparent; border-color: var(--c-borde-vivo); color: var(--c-texto); } .nc-btn--contorno .elementor-button:hover, .nc-btn--contorno .elementor-button:focus-visible { background: var(--c-acento-relleno); border-color: var(--c-acento-relleno); color: var(--c-sobre-acento); } .nc-btn .elementor-button-content-wrapper, .nc-form .elementor-button-content-wrapper { display: flex; align-items: center; gap: var(--e-2); } .nc-btn .elementor-button-icon, .nc-form .elementor-button-icon { display: flex; } .nc-btn .elementor-button-icon svg, .nc-form .elementor-button-icon svg { width: 1em; height: 1em; fill: currentColor; } .nc-botonera { display: flex; flex-wrap: wrap; gap: var(--e-4); } .nc-botonera--centro { justify-content: center; } /* ── Cabecera ──────────────────────────────────────────────────────────── */ /* Fija arriba. Va en el envoltorio de Elementor, que es el que mide lo mismo que la cabecera: en el contenedor de dentro el sticky no tendría recorrido. */ .elementor-location-header { position: sticky; top: 0; z-index: 50; } .nc-cabecera__logo img { width: clamp(8.5rem, 5.6rem + 7.4vw, 11.25rem); height: auto; } .nc-cabecera__logo a { display: flex; align-items: center; min-height: var(--tap); } .nc-cabecera__tel { flex: none; padding: 0; } /* el relleno de la estática va en el , no en el div */ .nc-cabecera__tel .elementor-button { padding-inline: var(--e-4); letter-spacing: 0; text-transform: none; } /* El botón y el