/* ElectroSolution Écija · estilos propios de la web (dirección G «Clásica», D-014).
   Solo lo que Elementor no trae: colores de la G, foco, etiquetas de vinilo, tablas técnicas,
   títulos con filete verde, enlaces de tarjeta, WhatsApp flotante y barra móvil de contacto.
   El resto (tipografías, colores globales, botones, contenedores) lo resuelve el kit de Elementor. */

:root {
  --c-titulo: #454442; --c-texto: #1C1C1B; --c-suave: #4A4A48; --c-linea: #DDDDD9;
  --c-claro: #F5F5F3; --c-oscuro: #2B2B2A; --c-pie: #1C1C1B;
  --es-texto: var(--c-texto); --es-texto-suave: var(--c-suave); --es-borde: var(--c-linea); --es-foco: var(--c-titulo);
}
:focus-visible { outline: 3px solid var(--es-foco); outline-offset: 3px; }
.es-sobre-oscuro { --es-foco: var(--es-verde); }
.es-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.es-mono { font-family: var(--es-font-mono); font-variant-numeric: tabular-nums; }

/* Título de sección con el filete verde debajo: clase «es-titulo» en el widget Título */
.es-titulo .elementor-heading-title::after { content: ""; display: block; width: 64px; height: 4px; margin: 16px auto 0; background: var(--es-verde); }
.es-titulo--izq .elementor-heading-title::after { margin-left: 0; }

/* Enlace de tarjeta subrayado en verde oscuro (nunca texto verde sobre blanco) */
.es-enlace a, a.es-enlace { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-texto); font-size: var(--es-fs-0); font-weight: 600; text-decoration: underline; text-decoration-color: var(--es-verde-sombra); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.es-enlace a:hover, a.es-enlace:hover { text-decoration-color: var(--c-texto); }

/* Etiqueta de vinilo: esquina cortada, como las rotulaciones de los cuadros */
.es-vinilo { display: inline-block; padding: .3em .7em; font: 600 var(--es-fs-0)/1.2 var(--es-font-body); background: var(--es-gris-100); color: var(--es-gris-900); clip-path: polygon(0 0, calc(100% - var(--es-corte)) 0, 100% var(--es-corte), 100% 100%, 0 100%); }
.es-vinilo--oscuro { background: var(--es-gris-700); color: var(--es-blanco); }
.es-vinilo--verde { background: var(--es-verde); color: var(--es-gris-900); }

/* Tabla técnica (dimensiones, pesos, grados IP) */
.es-tabla { border-collapse: collapse; width: 100%; font-family: var(--es-font-mono); font-size: var(--es-fs-0); font-variant-numeric: tabular-nums; }
.es-tabla th, .es-tabla td { text-align: left; padding: .55em .8em; border-bottom: 1px solid var(--c-linea); vertical-align: top; }
.es-tabla th { font-weight: 400; color: var(--c-suave); }
.es-tabla thead th { color: var(--c-texto); font-weight: 600; font-family: var(--es-font-body); border-bottom: 2px solid var(--c-titulo); }
.es-tabla td:last-child, .es-tabla th:last-child { text-align: right; }

/* Barra móvil persistente de contacto (FR-009) */
.es-barra-movil { position: fixed; inset: auto 0 0 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--es-gris-700); padding-bottom: env(safe-area-inset-bottom); }
.es-barra-movil a { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 56px; background: var(--es-gris-900); color: var(--es-blanco); text-decoration: none; font: 600 var(--es-fs-1)/1 var(--es-font-body); }
.es-barra-movil a:first-child { background: var(--es-verde); color: var(--es-gris-900); }
.es-barra-movil svg { width: 22px; height: 22px; }
@media (min-width: 768px) { .es-barra-movil { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 56px; } }

/* WhatsApp flotante en escritorio; en móvil ya está la barra */
.es-whatsapp { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: none; align-items: center; gap: .55em; min-height: 56px; padding: 0 1.4em 0 1.15em; border-radius: 999px; background: var(--es-verde); color: var(--es-gris-900); font: 600 var(--es-fs-1)/1 var(--es-font-body); text-decoration: none; box-shadow: 0 12px 32px rgba(0,0,0,.32); transition: transform var(--es-dur-1) var(--es-ease), background var(--es-dur-2) var(--es-ease); }
.es-whatsapp:hover { background: #8CFF2E; color: var(--es-gris-900); transform: translateY(-2px); }
.es-whatsapp svg { width: 24px; height: 24px; flex: none; }
@media (min-width: 768px) { .es-whatsapp { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .es-whatsapp { transition: none; } }

/* Tabla de motores en móvil: cada modelo en una ficha de tres datos (como en la G) */
@media (max-width: 560px) {
  .es-tabla--motores thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .es-tabla--motores tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--c-linea); }
  .es-tabla--motores td { padding: 0; border: 0; }
  .es-tabla--motores td:last-child { text-align: left; }
  .es-tabla--motores td:first-child { grid-column: 1 / -1; font: 600 var(--es-fs-1)/1.3 var(--es-font-body); }
  .es-tabla--motores td[data-dato]::before { content: attr(data-dato); display: block; color: var(--c-suave); font-size: 11px; }
}

/* Tablas técnicas: sin las rayas ni los bordes verticales que pone el tema */
.es-tabla th, .es-tabla td { border-width: 0 0 1px; border-style: solid; border-color: var(--c-linea); background: none; }
.es-tabla thead th { border-bottom: 2px solid var(--c-titulo); }
.es-tabla tbody > tr:nth-child(odd) > td, .es-tabla tbody > tr:nth-child(odd) > th,
.es-tabla tbody tr:hover > td, .es-tabla tbody tr:hover > th { background: none; }

/* Recuadro de aviso con la raya verde a la izquierda (media y alta tensión) */
.es-aviso { border-left-color: var(--es-verde) !important; }

/* Imagen enlazada que ocupa toda la tarjeta */
.es-img-bloque a { display: block; }

/* El color de enlaces del kit se carga después: estas reglas necesitan más peso */
nav.es-barra-movil a { color: var(--es-blanco); }
nav.es-barra-movil a:first-child, body a.es-whatsapp, body a.es-whatsapp:hover { color: var(--es-gris-900); }

/* Enlaces de texto sobre fondo oscuro (pie, portada, contacto): heredan el color claro */
body .es-sobre-oscuro a:not(.elementor-button) { color: inherit; text-underline-offset: 3px; }
body .es-sobre-oscuro a:not(.elementor-button):hover { color: var(--es-blanco); }
.es-lista-pie { margin: 0; padding: 0; list-style: none; }
.es-lista-pie li { margin: 0 0 .5em; }
.es-lista-pie a { text-decoration: none; }
.es-lista-pie a:hover { text-decoration: underline; }

/* Textos legales: títulos más pequeños que los de sección y lectura a 760 px */
.elementor-widget-text-editor.es-legal h2 { margin: 1.6em 0 .5em; font-size: 1.375rem; line-height: 1.3; }
.elementor-widget-text-editor.es-legal h2:first-child { margin-top: 0; }
.elementor-widget-text-editor.es-legal ul { margin: 0 0 1em; padding-left: 1.2em; }
.elementor-widget-text-editor.es-legal li { margin-bottom: .35em; }

/* Enlaces dentro del texto: subrayados para que no dependan solo del color (WCAG 1.4.1) */
.elementor-widget-text-editor p a, .elementor-widget-text-editor li a { text-decoration: underline; text-underline-offset: 3px; }
.elementor-widget-text-editor .es-lista-pie a { text-decoration: none; }
.elementor-widget-text-editor .es-lista-pie a:hover { text-decoration: underline; }

/* Listas de nombres (marcas y clientes de Quiénes somos): en línea, centradas y sin viñetas */
.es-nombres { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.es-nombres li { padding: .45em .9em; border: 1px solid var(--c-linea); border-radius: 4px; background: var(--es-blanco); font: 500 var(--es-fs-1)/1.3 var(--es-font-body); color: var(--c-texto); }

/* Región principal: recibe el foco desde «Ir al contenido» sin dibujar un marco alrededor de toda la página */
main#content:focus { outline: none; }

/* Portada: la foto del hero es una imagen a todo el bloque, con el velo oscuro encima y el texto por delante.
   Va como imagen, y no como fondo, para que el navegador la pida en cuanto lee el HTML (LCP). */
.es-hero { position: relative; overflow: hidden; }
.es-hero > .es-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; z-index: 0; }
.es-hero > .es-hero__foto > .elementor-widget-container { height: 100%; }
.es-hero > .es-hero__foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; opacity: .28; }
.es-hero > .es-hero__texto { position: relative; z-index: 1; }

/* Banner de cookies (Complianz) con los colores de la marca. Complianz declara estas variables en :root;
   aquí se declaran en el propio banner, que manda. Aceptar y denegar tienen el mismo peso visual. */
.cmplz-cookiebanner, #cmplz-manage-consent .cmplz-manage-consent {
  --cmplz_banner_border_radius: 4px 4px 4px 4px;
  --cmplz_banner_border_color: var(--c-linea);
  --cmplz_banner_border_width: 1px 1px 1px 1px;
  --cmplz_text_color: var(--c-texto);
  --cmplz_hyperlink_color: var(--c-texto);
  --cmplz_text_font_size: 14px;
  --cmplz_link_font_size: 13px;
  --cmplz_title_font_size: 16px;
  --cmplz_category_body_font_size: 13px;
  --cmplz_category_header_always_active_color: var(--c-suave);
  --cmplz_button_font_size: 15px;
  --cmplz_button_border_radius: 4px 4px 4px 4px;
  --cmplz_button_accept_background_color: var(--es-verde);
  --cmplz_button_accept_border_color: var(--es-verde);
  --cmplz_button_accept_text_color: var(--c-texto);
  --cmplz_button_deny_background_color: var(--c-texto);
  --cmplz_button_deny_border_color: var(--c-texto);
  --cmplz_button_deny_text_color: var(--es-blanco);
  --cmplz_button_settings_background_color: var(--es-blanco);
  --cmplz_button_settings_border_color: var(--c-texto);
  --cmplz_button_settings_text_color: var(--c-texto);
  --cmplz_slider_active_color: var(--c-titulo);
  font-family: var(--es-font-body);
}
.cmplz-cookiebanner .cmplz-btn { font-weight: 600; }
.cmplz-cookiebanner a { text-decoration: underline; text-underline-offset: 3px; }
/* La pestaña flotante de Complianz tapaba el botón de WhatsApp: el consentimiento se cambia desde el pie y desde la política de cookies */
#cmplz-manage-consent .cmplz-manage-consent { display: none !important; }
/* Botón «Configurar cookies» del pie y de la política: parece un enlace, pero es un botón porque abre el banner */
button.cmplz-manage-consent.es-cookies { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.cmplz-manage-consent.es-cookies:hover { color: var(--es-blanco); }
.es-legal button.cmplz-manage-consent.es-cookies:hover { color: var(--c-titulo); }
/* Política de cookies generada por Complianz, con la tipografía de la web */
#cmplz-document { max-width: 100%; font-family: var(--es-font-body); font-size: var(--es-fs-1); color: var(--c-texto); }
#cmplz-document a { color: var(--c-texto); text-decoration: underline; text-underline-offset: 3px; }