/* ============================
   Eporelec
   hoja de estilos unica
   ============================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #2b2b2b;
    background: #fff;
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', Arial, sans-serif;
    line-height: 1.2;
    color: #15191d;
}

h1 { font-size: 42px; }
h2 { font-size: 30px; margin-bottom: 18px; }
h3 { font-size: 19px; margin-bottom: 10px; }

a { color: #15191d; }

p { margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; display: block; }

.contenedor {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

.gris { background: #f4f4f2; }

section { padding: 70px 0; }

/* botones */
.btn {
    display: inline-block;
    padding: 13px 26px;
    background: #24be10;
    color: #1c1c1c;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.btn:hover { background: #1ea30d; }

.btn-azul {
    background: #15191d;
    color: #fff;
}
.btn-azul:hover { background: #000000; }

.btn-linea {
    background: none;
    border: 2px solid #fff;
    color: #fff;
    padding: 11px 24px;
}
.btn-linea:hover { background: rgba(255,255,255,.15); }

/* ---- cabecera ---- */
header {
    background: #fff;
    border-bottom: 1px solid #e3e3e0;
    position: sticky;
    top: 0;
    z-index: 50;
}

header .contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.logo {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #15191d;
    text-decoration: none;
    letter-spacing: -0.5px;
    display: inline-block;
    line-height: 0;
}
.logo img { height: 26px; width: auto; display: block; }
footer .logo img, .hero-int .logo img { height: 24px; }

nav a {
    font-size: 15px;
    text-decoration: none;
    margin-left: 24px;
    color: #444;
}
nav a:hover { color: #24be10; }

.tel-cabecera {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    color: #15191d !important;
}

/* ---- portada ---- */
#portada {
    background: #15191d;
    color: #fff;
    padding: 0;
}

.portada-foto {
    min-height: 460px;
    background: #1a2026;
    /* cuando esten las fotos:
       background: url(fotos/portada.jpg) center/cover no-repeat; */
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 5px solid #24be10;
}

.portada-foto .contenedor { padding-top: 60px; padding-bottom: 60px; }

#portada h1 { color: #fff; max-width: 620px; }

#portada .entradilla {
    font-size: 18px;
    max-width: 540px;
    margin-top: 18px;
    color: #dbe4ee;
}

.botones-portada { margin-top: 30px; }
.botones-portada .btn { margin-right: 10px; margin-bottom: 10px; }

/* barra de ventajas debajo de la portada */
.ventajas {
    background: #0b0e11;
    color: #cfdaea;
    font-size: 14px;
    padding: 16px 0;
}
.ventajas ul { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; }
.ventajas li:before { content: "✓ "; color: #24be10; font-weight: bold; }

/* ---- servicios ---- */
.servicios { display: flex; gap: 26px; flex-wrap: wrap; }

.servicio {
    flex: 1;
    min-width: 280px;
    background: #fff;
    border: 1px solid #e0e0dd;
    border-top: 4px solid #24be10;
    padding: 26px;
}

.servicio ul {
    margin: 14px 0 0 18px;
    font-size: 15px;
    color: #555;
}
.servicio li { margin-bottom: 6px; }

.foto-hueco {
    background: #ececea;
    border: 2px dashed #c5c5c1;
    color: #8a8a86;
    font-size: 13px;
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 18px;
}
.foto-hueco b { display: block; color: #15191d; margin-bottom: 4px; }

/* ---- calculadora ---- */
.calculadora {
    background: #fff;
    border: 1px solid #e0e0dd;
    padding: 30px;
    max-width: 620px;
}

.calculadora label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}

#factura { width: 100%; accent-color: #24be10; }

#valor-factura {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #15191d;
    float: right;
}

.check { margin: 18px 0 24px; font-size: 15px; }
.check input { margin-right: 6px; }

.resultado {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #e0e0dd;
    padding-top: 20px;
}
.resultado div { flex: 1; min-width: 130px; }
.resultado span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #777;
}
.resultado b {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    color: #15191d;
}
.resultado .destaca b { color: #d38a10; }

.letra-pequena { font-size: 13px; color: #777; margin-top: 20px; }

/* ---- tabla cargadores ---- */
.tabla-scroll { overflow-x: auto; }

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
    background: #fff;
    font-size: 15px;
}
th, td {
    border: 1px solid #e0e0dd;
    padding: 12px 14px;
    text-align: left;
}
thead th {
    background: #15191d;
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
}
tbody th {
    background: #f7f7f5;
    font-weight: 600;
    width: 150px;
    color: #555;
}
.recomendada { background: #ecf9e9; }
thead th.recomendada { background: #24be10; color: #15191d; }

/* ---- pasos ---- */
.pasos { display: flex; gap: 30px; flex-wrap: wrap; }
.paso { flex: 1; min-width: 250px; }
.paso .numero {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: #24be10;
    line-height: 1;
    margin-bottom: 8px;
}

/* ---- preguntas ---- */
.pregunta { border-bottom: 1px solid #e0e0dd; }
.pregunta summary {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #15191d;
    padding: 16px 0;
    cursor: pointer;
}
.pregunta summary:hover { color: #24be10; }
.pregunta p { padding-bottom: 16px; color: #555; max-width: 720px; }

/* ---- contacto ---- */
.contacto { display: flex; gap: 45px; flex-wrap: wrap; }
.contacto-datos { flex: 1; min-width: 260px; }
.contacto-form { flex: 1.4; min-width: 300px; }

.contacto-datos li {
    list-style: none;
    padding: 12px 0;
    border-bottom: 1px solid #dcdcd8;
}
.contacto-datos li span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #777;
    letter-spacing: .7px;
}
.contacto-datos li a, .contacto-datos li b {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 17px;
    text-decoration: none;
}

form .fila { display: flex; gap: 16px; flex-wrap: wrap; }
form .fila > div { flex: 1; min-width: 180px; }

form label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 5px; }

input[type=text], input[type=tel], input[type=email], select, textarea {
    width: 100%;
    padding: 11px;
    border: 1px solid #c9c9c5;
    border-radius: 3px;
    font-family: inherit;
    font-size: 15px;
    margin-bottom: 16px;
    background: #fff;
}
textarea { height: 120px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: 2px solid #24be10;
    border-color: #24be10;
}

.acepto { font-size: 14px; margin-bottom: 18px; }
.acepto input { margin-right: 6px; }

/* ---- pie ---- */
footer {
    background: #15191d;
    color: #aeb6bd;
    font-size: 14px;
    padding: 45px 0 25px;
}
footer .logo { color: #fff; }
footer a { color: #aeb6bd; text-decoration: none; }
footer a:hover { color: #fff; }
.pie-cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.pie-cols > div { min-width: 200px; }
.pie-cols h4 { color: #fff; font-size: 14px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .8px; }
.pie-cols li { list-style: none; margin-bottom: 6px; }

.pie-abajo {
    border-top: 1px solid #2a3138;
    margin-top: 30px;
    padding-top: 18px;
    font-size: 13px;
    color: #8d959c;
}

.aviso-borrador {
    border: 1px dashed #39424a;
    padding: 12px 14px;
    margin-top: 18px;
    font-size: 13px;
    color: #8d959c;
}

/* boton flotante whatsapp */
.wsp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    background: #25d366;
    color: #fff;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    text-align: center;
    line-height: 56px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
.wsp svg { width: 28px; height: 28px; margin: 14px auto; fill: #fff; }


/* ---- bloques grandes de servicio (solar y recarga) ---- */
.bloque-serv {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}
.bloque-serv:last-child { margin-bottom: 0; }
.bloque-serv .media { flex: 1; min-width: 290px; }
.bloque-serv .texto { flex: 1.15; min-width: 300px; }
.bloque-serv.vuelta .media { order: 2; }

.bloque-serv .media .foto-hueco { margin-bottom: 0; padding: 80px 20px; }

.etiqueta-serv {
    display: inline-block;
    background: #e2f5de;
    color: #177a08;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.bloque-serv h3 { font-size: 26px; margin-bottom: 12px; }
.bloque-serv ul { margin: 16px 0 20px 18px; color: #555; font-size: 15px; }
.bloque-serv li { margin-bottom: 6px; }

/* ---- lo que tambien hacemos, en pequeño ---- */
.tambien {
    border-top: 1px solid #e0e0dd;
    padding-top: 30px;
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
}
.tambien > div { flex: 1; min-width: 230px; }
.tambien h3 { font-size: 17px; margin-bottom: 6px; }
.tambien p { font-size: 15px; color: #666; }
.tambien-intro { max-width: 620px; margin-bottom: 26px; }
.tambien-intro h2 { font-size: 23px; }

/* ---- tabla de precios ---- */
td.dcha { text-align: right; }
table caption {
    caption-side: bottom;
    text-align: left;
    font-size: 13px;
    color: #777;
    padding-top: 10px;
}

/* ---- preguntas ---- */
.pregunta { border-bottom: 1px solid #e0e0dd; }
.pregunta summary {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #15191d;
    padding: 15px 0;
    cursor: pointer;
}
.pregunta summary:hover { color: #24be10; }
.pregunta p { padding-bottom: 15px; color: #555; max-width: 760px; }

@media (max-width: 900px) {
    .bloque-serv { gap: 24px; margin-bottom: 42px; }
    .bloque-serv.vuelta .media { order: 0; }
    .bloque-serv h3 { font-size: 22px; }
    .bloque-serv .media .foto-hueco { padding: 50px 20px; }
}


/* ---- zonas donde trabajamos ---- */
.zonas { display: flex; gap: 28px; flex-wrap: wrap; }
.zonas .zona {
    flex: 1;
    min-width: 215px;
    border-left: 3px solid #24be10;
    padding-left: 18px;
}
.zonas .zona h3 { font-size: 18px; margin-bottom: 8px; }
.zonas .zona p { font-size: 15px; color: #555; }

.zona-recarga {
    margin-top: 40px;
    background: #f7f7f5;
    border: 1px solid #e0e0dd;
    padding: 26px;
}
.zona-recarga h3 { font-size: 19px; }
.zona-recarga p { max-width: 720px; color: #555; font-size: 15px; }

/* ============ movil ============ */
@media (max-width: 900px) {
    h1 { font-size: 31px; }
    h2 { font-size: 25px; }
    section { padding: 45px 0; }
    nav a { display: none; }
    nav a.tel-cabecera { display: inline; margin-left: 0; }
    .portada-foto { min-height: 380px; }
    .ventajas ul { gap: 8px 20px; }
    .contacto { gap: 30px; }
    .calculadora { padding: 20px; }
    #valor-factura { font-size: 22px; }
}

/* ---- paginas de provincia ---- */
.migas {
    background: #f7f7f5;
    border-bottom: 1px solid #e0e0dd;
    font-size: 13px;
    color: #777;
    padding: 10px 0;
}
.migas a { color: #777; text-decoration: none; }
.migas a:hover { color: #15191d; }

.hero-int {
    background: #15191d;
    color: #fff;
    padding: 55px 0 50px;
    border-bottom: 5px solid #24be10;
}
.hero-int h1 { color: #fff; font-size: 38px; max-width: 18ch; }
.hero-int p {
    font-size: 18px;
    color: #dbe4ee;
    max-width: 600px;
    margin-top: 16px;
}
.hero-int .botones-portada { margin-top: 26px; }

.dato-local {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
    background: #ecf9e9;
    border: 1px solid #cceac6;
    padding: 22px 26px;
    margin: 0 0 34px;
}
.dato-local > div { flex: 1; min-width: 150px; }
.dato-local span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #177a08;
}
.dato-local b {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 23px;
    color: #15191d;
}

.texto-largo { max-width: 700px; }
.texto-largo h2 { margin-top: 42px; }
.texto-largo h3 { margin-top: 26px; }
.texto-largo p { margin-bottom: 15px; }
.texto-largo ul { margin: 0 0 18px 20px; color: #555; }
.texto-largo li { margin-bottom: 7px; }

.pueblos {
    background: #f7f7f5;
    border: 1px solid #e0e0dd;
    padding: 20px 24px;
    font-size: 15px;
    color: #555;
    margin-top: 26px;
}
.pueblos b { color: #15191d; font-family: 'Montserrat', Arial, sans-serif; }

.otras-paginas {
    border-top: 1px solid #e0e0dd;
    padding-top: 26px;
    margin-top: 10px;
}
.otras-paginas h3 { font-size: 17px; margin-bottom: 14px; }
.otras-paginas ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; }
.otras-paginas li a {
    display: inline-block;
    border: 1px solid #d5d5d0;
    border-radius: 3px;
    padding: 7px 13px;
    font-size: 14px;
    text-decoration: none;
    color: #15191d;
}
.otras-paginas li a:hover { border-color: #24be10; color: #177a08; }

@media (max-width: 900px) {
    .hero-int h1 { font-size: 27px; }
    .hero-int { padding: 38px 0 34px; }
    .dato-local { gap: 18px; padding: 18px; }
    .dato-local b { font-size: 20px; }
}

/* ---- fotos reales ---- */
.foto-real { border: none; padding: 0; background-size: cover; background-position: center; min-height: 300px; }
.foto-cortijo { background-image: url(fotos/cubierta-cortijo.jpg); }
.foto-adosado { background-image: url(fotos/cubierta-adosado.jpg); }
.foto-cargador { background-image: url(fotos/cargador-garaje.jpg); background-position: center 62%; }

.portada-foto {
    background-image: linear-gradient(rgba(12,16,20,.70), rgba(12,16,20,.80)), url(fotos/cubierta-cortijo.jpg);
    background-size: cover;
    background-position: center 60%;
}
.hero-int {
    background-image: linear-gradient(rgba(12,16,20,.80), rgba(12,16,20,.88)), url(fotos/cubierta-cortijo.jpg);
    background-size: cover;
    background-position: center 60%;
}

/* ---- galeria de trabajos ---- */
.galeria { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.galeria figure { flex: 1; min-width: 250px; margin: 0; }
.galeria .img { height: 230px; background-size: cover; background-position: center; border-radius: 3px; }
.galeria figcaption { font-size: 14px; color: #666; margin-top: 8px; }

@media (max-width: 900px) {
    .foto-real { min-height: 210px; }
    .galeria .img { height: 190px; }
}

.zonas .zona h3 a { text-decoration: none; }
.zonas .zona h3 a:hover { color: #24be10; }
.zona-recarga a { color: #177a08; }

.zonas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 28px; }
.zonas .zona { border-left: 3px solid #24be10; padding-left: 18px; min-width: 0; }
.zonas .zona p.mas { margin-top: 8px; font-size: 14px; }
.zonas .zona p.mas a { color: #177a08; text-decoration: none; font-weight: 600; }
.zonas .zona p.mas a:hover { text-decoration: underline; }
.pie-cols > div { min-width: 150px; }
.pie-cols ul { column-count: 2; column-gap: 20px; }
.pie-cols div:first-child ul, .pie-cols div:last-child ul { column-count: 1; }
@media (max-width: 950px) { .zonas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .zonas { grid-template-columns: 1fr; } .pie-cols ul { column-count: 1; } }

/* ---- aviso de cookies ---- */
#aviso-cookies {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 300;
    max-width: 780px;
    margin: 0 auto;
    background: #15191d;
    color: #d9dee3;
    border: 1px solid #2e363e;
    border-top: 3px solid #24be10;
    border-radius: 5px;
    padding: 20px 22px;
    font-size: 14px;
    line-height: 1.55;
    box-shadow: 0 6px 26px rgba(0,0,0,.35);
}
#aviso-cookies b { color: #fff; font-family: 'Montserrat', Arial, sans-serif; }
#aviso-cookies .ck-texto b { display: block; margin-bottom: 6px; font-size: 15px; }
#aviso-cookies p { margin: 0; }
#aviso-cookies a { color: #4fd93a; }

.ck-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ck-btn {
    flex: 1;
    min-width: 120px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 16px;
    border-radius: 4px;
    border: 1px solid #454f59;
    background: #232a31;
    color: #e6eaee;
    cursor: pointer;
}
.ck-btn:hover { border-color: #6a7682; }
.ck-btn.ck-aceptar { background: #24be10; border-color: #24be10; color: #0d1a07; }
.ck-btn.ck-aceptar:hover { background: #2bd414; }

.ck-panel { margin-top: 18px; border-top: 1px solid #2e363e; padding-top: 14px; }
.ck-fila { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #23292f; }
.ck-fila b { display: block; }
.ck-fila span { display: block; }
.ck-check { cursor: pointer; justify-content: space-between; }
.ck-check input { width: 18px; height: 18px; accent-color: #24be10; margin-top: 2px; flex: none; }
.ck-panel .ck-btn { margin-top: 14px; flex: none; }

@media (max-width: 620px) {
    #aviso-cookies { left: 8px; right: 8px; bottom: 8px; padding: 16px; font-size: 13.5px; }
    .ck-botones .ck-btn { min-width: 0; }
}

/* ---- paginas legales ---- */
.legal { max-width: 800px; }
.legal h2 { font-size: 22px; margin: 34px 0 12px; }
.legal h3 { font-size: 17px; margin: 22px 0 8px; }
.legal p, .legal li { font-size: 16px; }
.legal ul, .legal ol { margin: 0 0 16px 22px; color: #444; }
.legal li { margin-bottom: 7px; }
.legal table { font-size: 14px; }
.legal .actualizado { font-size: 14px; color: #777; margin-bottom: 26px; }
.legal .ojo {
    border-left: 3px solid #24be10;
    background: #f3faf1;
    padding: 14px 18px;
    margin: 22px 0;
    font-size: 15px;
}

mark.falta {
    background: #fff3b0;
    color: #6b5200;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    font-size: .95em;
}
.borrador-legal {
    border: 1px dashed #c7c7c2;
    background: #fafaf8;
    padding: 14px 18px;
    margin-top: 40px;
    font-size: 14px;
    color: #666;
}