/* Electricidad e Ingeniería Asensi (EIA) · propuesta de web · 11/11/2026
   Colores: los del logotipo (#FF0000, #00004B, #333333, #00FF00) y el verde del menú de la web actual (#009933).
   Tipografías autoalojadas, licencia SIL OFL 1.1: Big Shoulders Display (títulos) y Work Sans (texto).
   Ningún enlace lleva subrayado: ni en reposo, ni al pasar el ratón, ni en el menú. */

@font-face { font-family: "Big Shoulders"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/bigshoulders-700.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/bigshoulders-800.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/worksans-400.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/worksans-600.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/worksans-700.woff2") format("woff2"); }

:root {
  --rojo: #FF0000;
  --rojo-oscuro: #990000;
  --azul: #00004B;
  --verde: #009933;
  --verde-vivo: #00FF00;
  --gris: #333333;
  --suave: #F2F2F2;
  --linea: #CCCCCC;
  --blanco: #FFFFFF;
  --titulo: "Big Shoulders", "Arial Narrow", Arial, sans-serif;
  --texto: "Work Sans", Arial, Helvetica, sans-serif;
  --margen: 1rem;
  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--texto); color: var(--gris); background: var(--blanco); overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--azul); font-weight: 600; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: none; background: var(--verde-vivo); color: var(--azul); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 800; text-transform: uppercase; line-height: 1.02; letter-spacing: .01em; color: var(--azul); margin: 0 0 .6em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.8rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: 1.55rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 68ch; }
ul, ol { margin: 0; padding: 0; }
.contenedor { width: min(calc(100% - 2 * var(--margen)), var(--ancho)); min-width: 0; margin-inline: auto; }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .6rem 1rem; background: var(--verde-vivo); color: var(--azul); font-weight: 700; }
.saltar:focus { left: .5rem; top: .5rem; }
.seccion { padding: 3.5rem 0; }
.seccion--suave { background: var(--suave); }
.encabezado-seccion { border-top: 6px solid var(--verde); padding-top: 1rem; margin-bottom: 2rem; }
.lead { font-size: 1.2rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.pendiente { color: var(--rojo-oscuro); font-weight: 600; }

/* Franja de averías */
.urgencia { background: var(--azul); color: var(--blanco); }
.urgencia .contenedor { display: flex; justify-content: center; padding: .5rem 0; }
/* Etiqueta y número, siempre en una sola línea (también en móviles estrechos o con la letra del sistema aumentada) */
.urgencia__llamada { display: inline-flex; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: clamp(.4rem, 2vw, .8rem); max-width: 100%; padding: .1rem .5rem; white-space: nowrap; color: var(--blanco); }
.urgencia__texto { font-family: var(--titulo); font-weight: 700; text-transform: uppercase; font-size: clamp(.7rem, 3.4vw, 1.15rem); letter-spacing: .03em; }
.urgencia__numero { font-family: var(--titulo); font-weight: 800; font-size: clamp(1rem, 5.8vw, 1.7rem); letter-spacing: .02em; color: var(--rojo); }
.urgencia__llamada:hover, .urgencia__llamada:focus-visible { background: var(--verde-vivo); color: var(--azul); }
.urgencia__llamada:hover .urgencia__numero, .urgencia__llamada:focus-visible .urgencia__numero { color: var(--azul); }

/* Cabecera y menú */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 4px solid var(--rojo); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; padding-block: .6rem; }
.marca { display: flex; align-items: center; gap: .9rem; min-width: 0; color: var(--azul); }
.marca:hover, .marca:focus-visible { background: transparent; }
.marca img { width: auto; height: 50px; }
.marca__nombre { min-width: 0; overflow-wrap: anywhere; font-family: var(--titulo); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; line-height: 1.02; letter-spacing: .02em; color: var(--azul); }
.menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; list-style: none; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .95rem; background: var(--verde); color: var(--azul); font-family: var(--titulo); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="page"] { background: var(--verde-vivo); color: var(--azul); }
.boton-menu { display: none; }

/* Portada */
.portada { background: var(--azul); color: var(--blanco); }
.portada .contenedor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: stretch; padding-block: 3rem; }
.portada h1 { color: var(--blanco); }
.portada p { color: #e8e8f4; font-size: 1.15rem; }
.portada__foto { margin: 0; min-height: 240px; }
.portada__foto img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
@media (min-width: 900px) { .portada .contenedor { grid-template-columns: 1.1fr .9fr; align-items: stretch; } .portada__foto { position: relative; min-height: 380px; } .portada__foto img { position: absolute; inset: 0; height: 100%; } }

/* Botones (a todo el ancho en el móvil) */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .6rem 1.3rem; border: 0; background: var(--verde); color: var(--azul); font-family: var(--titulo); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.boton:hover, .boton:focus-visible { background: var(--verde-vivo); color: var(--azul); }
.boton--rojo { background: var(--rojo); }
@media (max-width: 599.98px) { .boton, .acciones .boton { width: 100%; } .acciones { flex-direction: column; } }

/* Servicios */
.servicios { list-style: none; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); counter-reset: servicio; }
@media (min-width: 720px) { .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.servicios li { counter-increment: servicio; background: var(--blanco); border-top: 4px solid var(--verde); padding: 1.1rem 1.25rem 1.4rem; }
.servicios li::before { content: counter(servicio, decimal-leading-zero); display: block; margin-bottom: .35rem; font-family: var(--titulo); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--rojo); }
.servicios h3 { margin-bottom: .4rem; }
.servicios p { margin: 0; }

/* Dos columnas y fotos */
.dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 860px) { .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.foto { margin: 0; min-width: 0; }
.foto img { width: 100%; height: auto; }
.foto--banda img { max-width: 950px; aspect-ratio: 950 / 360; object-fit: cover; }
.foto--pequena img { width: 200px; max-width: 100%; }
@media (max-width: 599.98px) { .foto img { width: 100% !important; max-width: none !important; } }

/* Colaborador Iberdrola */
.tarjeta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; background: var(--blanco); border: 2px solid var(--azul); padding: 1.5rem; }
.tarjeta img { width: 100%; max-width: 283px; height: auto; }
.tarjeta__llamada { margin: 0; }
.tarjeta__llamada .boton { font-size: clamp(1rem, 5.2vw, 1.3rem); padding-inline: .9rem; }
@media (min-width: 760px) { .tarjeta { grid-template-columns: auto minmax(0, 1fr); } }

/* Ayudas públicas: discretas, con sus textos y logotipos tal cual */
.ayuda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-top: 2px solid var(--azul); }
.ayuda img { width: 100%; max-width: 360px; height: auto; }
.ayuda p { margin: 0; font-size: 1rem; max-width: none; }
@media (min-width: 760px) { .ayuda { grid-template-columns: 360px minmax(0, 1fr); align-items: center; } }

/* Contacto */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 760px) { .contacto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contacto__bloque { background: var(--blanco); border-top: 4px solid var(--verde); padding: 1.25rem; min-width: 0; }
.contacto__bloque h2 { font-size: 1.6rem; }
.contacto__bloque p { margin-bottom: .6rem; overflow-wrap: anywhere; }
.numero { font-family: var(--titulo); font-weight: 800; font-size: 2rem; color: var(--azul); }

/* Plano propio (SVG con datos de OpenStreetMap) */
.plano-caja { position: relative; background: #E9E9E3; border: 2px solid var(--azul); }
.plano { display: block; width: 100%; height: auto; }
.plano__calle { fill: none; stroke: #FFFFFF; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.plano__calle--principal { stroke-width: 18; }
.plano__rotulo { font: 600 28px var(--texto); fill: #333333; paint-order: stroke; stroke: #FFFFFF; stroke-width: 7px; stroke-linejoin: round; }
.plano__etiqueta { fill: var(--azul); }
.plano__nombre { font: 800 38px var(--titulo); fill: #FFFFFF; letter-spacing: .03em; }
.plano__dato { font: 600 26px var(--texto); fill: #FFFFFF; }
.plano__pin { fill: var(--rojo); stroke: var(--azul); stroke-width: 5; }
.plano__pin-centro { fill: #FFFFFF; }
.plano__guia { stroke: var(--azul); stroke-width: 3; }
.plano__escala path { stroke: #333333; stroke-width: 4; fill: none; }
.plano__escala text { font: 600 26px var(--texto); fill: #333333; }
.plano__enlace { position: absolute; inset: 0; z-index: 1; }
.plano-credito { position: absolute; right: .4rem; bottom: .4rem; z-index: 2; margin: 0; max-width: none; font-size: .75rem; line-height: 1.3; background: rgba(255, 255, 255, .9); padding: .1rem .35rem; }
.plano-credito a { font-weight: 600; }
.plano-acciones { margin-top: 1.25rem; max-width: none; text-align: center; }
@media (max-width: 599.98px) { .plano-acciones .boton { width: 100%; } }

/* Páginas legales */
.legal dl { display: grid; gap: .6rem; margin: 0 0 1.5rem; }
.legal dl > div { display: grid; gap: .1rem; border-top: 1px solid var(--linea); padding-top: .6rem; }
@media (min-width: 760px) { .legal dl > div { grid-template-columns: 14rem minmax(0, 1fr); gap: 1rem; } }
.legal dt { font-weight: 700; color: var(--azul); }
.legal dd { margin: 0; overflow-wrap: anywhere; }
.legal h2 { font-size: 1.8rem; margin-top: 2rem; }

/* Pie */
.pie { background: var(--azul); color: #E4E4F2; padding: 2.5rem 0 1.25rem; }
.pie h3 { color: var(--blanco); font-size: 1.4rem; }
.pie a { color: var(--blanco); }
.pie a:hover, .pie a:focus-visible { background: var(--verde-vivo); color: var(--azul); }
.pie p { max-width: none; }
.pie__columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
@media (min-width: 760px) { .pie__columnas { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.pie__marca { width: 150px; height: auto; margin-bottom: .75rem; }
.pie ul { list-style: none; }
.pie li { margin-bottom: .45rem; }
.pie__base { margin-top: 2rem; padding-top: 1rem; border-top: 3px solid var(--rojo); font-size: .92rem; }

/* Menú en el móvil: centrado, a todo el ancho */
@media (max-width: 860px) {
  .boton-menu { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 52px; padding: 0 .9rem; border: 0; background: var(--verde); color: var(--azul); font-family: var(--titulo); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
  .boton-menu:hover, .boton-menu:focus-visible { background: var(--verde-vivo); }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; text-align: center; gap: .5rem; padding: .75rem var(--margen) 1.25rem; background: var(--blanco); border-bottom: 4px solid var(--rojo); box-shadow: 0 12px 24px rgba(0, 0, 0, .12); }
  .menu.abierto { display: flex; }
  .menu a { justify-content: center; width: 100%; min-height: 52px; font-size: 1.25rem; }
  .marca img { height: clamp(32px, 11vw, 42px); }
  .marca__nombre { font-size: clamp(.85rem, 4vw, 1.05rem); }
}