/* Servicio Electrico Barcelona - tema claro, azul electrico + amarillo */
:root{
  --azul:#1464F4; --azul-oscuro:#0C3FA0; --tinta:#16232E; --gris:#5A6B7A;
  --fondo:#F6F8FB; --blanco:#FFFFFF; --borde:#E3E9F1;
  --amarillo:#FFC400; --wa:#1EBE5D;
  --radio:16px; --sombra:0 10px 30px rgba(22,35,46,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--tinta);background:var(--fondo);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.contenedor{max-width:1140px;margin:0 auto;padding:0 20px}
svg{width:1.15em;height:1.15em;vertical-align:-.2em;fill:none}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}

/* Barra info */
.barra-info{background:var(--tinta);color:#CFE0F5;font-size:.85rem}
.barra-info .contenedor{display:flex;gap:22px;align-items:center;padding:7px 20px}
.barra-info a{margin-left:auto;color:var(--amarillo);font-weight:700}
.barra-info svg{stroke:currentColor}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.cabecera .contenedor{display:flex;align-items:center;gap:26px;padding:12px 20px}
.logo{display:flex;align-items:center;gap:10px}
.logo-icono{width:40px;height:40px;border-radius:12px;background:var(--amarillo);display:grid;place-items:center}
.logo-icono svg{width:22px;height:22px;color:var(--tinta);fill:currentColor}
.logo-texto{line-height:1.1}
.logo-texto b{display:block;font-size:1.02rem}
.logo-texto small{color:var(--gris);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.menu{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:.94rem;font-weight:600}
.menu a:hover{color:var(--azul)}
.menu-cta{background:var(--azul);color:#fff!important;padding:9px 16px;border-radius:999px}
.menu-cta:hover{background:var(--azul-oscuro)}
.hamburguesa{display:none;margin-left:auto;background:none;border:0;cursor:pointer;width:42px;height:38px;padding:8px}
.hamburguesa span{display:block;height:3px;background:var(--tinta);border-radius:2px;margin:4px 0;transition:.25s}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;border-radius:999px;padding:14px 24px;transition:.2s;border:0;cursor:pointer;font-size:1rem}
.btn svg{stroke:currentColor}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-oscuro);transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{filter:brightness(.92);transform:translateY(-2px)}
.btn-wa svg{fill:currentColor;stroke:none}
.btn-amarillo{background:var(--amarillo);color:var(--tinta)}
.btn-amarillo:hover{filter:brightness(1.06);transform:translateY(-2px)}

/* Hero */
.hero{background:linear-gradient(180deg,#fff 0%,var(--fondo) 100%);overflow:hidden}
.hero-rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:56px;padding-bottom:64px}
.hero-etiqueta{display:inline-flex;align-items:center;gap:7px;background:#E8F0FE;color:var(--azul);font-weight:700;font-size:.88rem;padding:7px 14px;border-radius:999px;margin-bottom:18px}
.hero-etiqueta svg{fill:currentColor;stroke:none}
.hero h1{font-size:clamp(2rem,4.6vw,3.1rem);margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--azul)}
.hero-texto>p{color:var(--gris);font-size:1.08rem;max-width:34rem;margin-bottom:26px}
.hero-botones{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero-puntos{list-style:none;display:grid;gap:8px;font-weight:600;font-size:.95rem}
.hero-puntos svg{color:var(--wa);stroke:currentColor}
.hero-foto{position:relative}
.hero-foto img{border-radius:24px;box-shadow:var(--sombra);aspect-ratio:4/3;object-fit:cover}
.hero-tarjeta{position:absolute;left:-18px;bottom:22px;background:#fff;border-radius:14px;box-shadow:var(--sombra);display:flex;gap:12px;align-items:center;padding:13px 18px}
.hero-tarjeta svg{width:30px;height:30px;color:var(--azul);stroke:currentColor}
.hero-tarjeta b{display:block;font-size:.95rem}
.hero-tarjeta span{color:var(--gris);font-size:.82rem}

/* Franja */
.franja{background:var(--tinta);color:#fff}
.franja-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:26px;padding-bottom:26px}
.franja-item{display:flex;gap:12px;align-items:center}
.franja-item svg{width:30px;height:30px;color:var(--amarillo);stroke:currentColor;flex-shrink:0}
.franja-item b{display:block;font-size:.98rem}
.franja-item span{color:#AEBECD;font-size:.84rem}

/* Secciones */
.seccion{padding:72px 0}
.seccion-suave{background:#EDF2F8}
.cabecera-seccion{max-width:46rem;margin-bottom:40px}
.cabecera-seccion p{color:var(--gris);margin-top:12px}
.sobretitulo{display:inline-block;color:var(--azul);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin-bottom:10px}
.estrecho{max-width:820px}

/* Servicios */
.servicios-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.servicio{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:24px;transition:.22s}
.servicio:hover{transform:translateY(-4px);box-shadow:var(--sombra);border-color:#C8D9F5}
.servicio svg{width:30px;height:30px;color:var(--azul);stroke:currentColor;margin-bottom:12px}
.servicio h3{font-size:1.05rem;margin-bottom:7px}
.servicio p{color:var(--gris);font-size:.92rem}

/* Urgencias */
.urgencias{position:relative;background-size:cover;background-position:center;padding:88px 0}
.urgencias-velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,25,40,.88) 0%,rgba(12,25,40,.55) 60%,rgba(12,25,40,.3) 100%)}
.urgencias-caja{position:relative;color:#fff;max-width:36rem}
.urgencias-caja h2{margin-bottom:14px}
.urgencias-caja p{color:#D9E4EF;margin-bottom:24px}

/* Partido (texto+foto) */
.partido{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.partido.invertido{grid-template-columns:.95fr 1.05fr}
.partido.invertido .partido-texto{order:2}
.partido.invertido .partido-foto{order:1}
.partido-foto img{border-radius:var(--radio);box-shadow:var(--sombra)}
.pasos-lista{margin:20px 0 26px;padding-left:0;list-style:none;counter-reset:paso;display:grid;gap:12px}
.pasos-lista li{counter-increment:paso;display:flex;gap:12px;align-items:baseline;color:var(--gris)}
.pasos-lista li::before{content:counter(paso);flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--azul);color:#fff;font-weight:800;font-size:.85rem;display:inline-grid;place-items:center;transform:translateY(4px)}
.pasos-lista b{color:var(--tinta)}
.proceso-lista{display:grid;gap:16px;margin-top:22px}
.paso{display:flex;gap:14px;background:var(--blanco);border:1px solid var(--borde);border-radius:14px;padding:16px 18px}
.paso>span{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--amarillo);color:var(--tinta);font-weight:900;display:grid;place-items:center}
.paso p{color:var(--gris);font-size:.9rem}

/* Galeria */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.galeria figure{position:relative;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra)}
.galeria img{aspect-ratio:16/9;object-fit:cover;transition:.35s}
.galeria figure:hover img{transform:scale(1.05)}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(12,25,40,.85));color:#fff;font-weight:600;font-size:.9rem;padding:26px 14px 12px}

/* Zonas */
.zonas-chips{display:flex;flex-wrap:wrap;gap:10px}
.zonas-chips span{background:var(--blanco);border:1px solid var(--borde);border-radius:999px;padding:9px 18px;font-weight:600;font-size:.92rem;transition:.2s}
.zonas-chips span:hover{border-color:var(--azul);color:var(--azul)}

/* FAQ */
.faq-lista{display:grid;gap:12px}
.faq-lista details{background:var(--blanco);border:1px solid var(--borde);border-radius:14px;padding:0 20px}
.faq-lista summary{cursor:pointer;font-weight:700;padding:17px 26px 17px 0;list-style:none;position:relative}
.faq-lista summary::-webkit-details-marker{display:none}
.faq-lista summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--azul);font-size:1.4rem;font-weight:800;transition:.2s}
.faq-lista details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-lista details p{color:var(--gris);padding-bottom:17px}

/* Contacto */
.contacto{background:linear-gradient(180deg,var(--fondo) 0%,#E8F0FE 100%)}
.contacto-datos{display:grid;gap:12px;margin-top:22px;font-weight:600}
.contacto-datos svg{color:var(--azul);stroke:currentColor;margin-right:6px}
.contacto-datos a:hover{color:var(--azul)}
.formulario{background:var(--blanco);border-radius:20px;box-shadow:var(--sombra);padding:30px;display:grid;gap:14px}
.formulario label{font-weight:700;font-size:.9rem;display:grid;gap:6px}
.formulario input,.formulario textarea{font:inherit;border:1.5px solid var(--borde);border-radius:10px;padding:11px 13px;background:#FBFCFE}
.formulario input:focus,.formulario textarea:focus{outline:2px solid var(--azul);border-color:transparent}
.formulario small{color:var(--gris);font-weight:400;text-align:center}

/* Pie */
.pie{background:var(--tinta);color:#B9C7D4;font-size:.92rem}
.pie-rejilla{display:grid;grid-template-columns:2fr 1fr 1.4fr 1fr;gap:30px;padding-top:52px;padding-bottom:36px}
.pie b{color:#fff;display:block;margin-bottom:12px}
.pie a{display:block;margin-bottom:8px}
.pie a:hover{color:var(--amarillo)}
.pie span{display:block;margin-bottom:8px}
.logo-pie{margin-bottom:14px}
.logo-pie .logo-texto b{color:#fff;margin:0}
.logo-pie .logo-texto small{color:#8FA2B3}
.pie-abajo{border-top:1px solid #2A3B4A;padding-top:18px;padding-bottom:22px;font-size:.82rem}

/* Barra movil */
.barra-movil{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;grid-template-columns:1fr 1fr}
.barra-movil a{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;padding:14px;color:#fff}
.barra-movil svg{stroke:currentColor}
.bm-tel{background:var(--azul)}
.bm-wa{background:var(--wa)}
.bm-wa svg{fill:currentColor;stroke:none}

/* Aparecer al bajar */
.aparece{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.aparece.visto{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .aparece{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Paginas legales */
.legal{max-width:820px;margin:0 auto;padding:60px 20px}
.legal h1{margin-bottom:26px}
.legal h2{font-size:1.25rem;margin:30px 0 10px}
.legal p,.legal li{color:var(--gris);margin-bottom:10px}
.legal ul{padding-left:22px}
.legal .volver{display:inline-block;margin-bottom:30px;color:var(--azul);font-weight:700}

/* Movil */
@media (max-width:980px){
  .hero-rejilla,.partido,.partido.invertido{grid-template-columns:1fr;gap:30px}
  .partido.invertido .partido-texto{order:1}
  .partido.invertido .partido-foto{order:2}
  .servicios-rejilla{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .franja-rejilla{grid-template-columns:repeat(2,1fr)}
  .pie-rejilla{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .solo-pc{display:none}
  .menu{position:fixed;inset:0;top:0;background:#fff;flex-direction:column;justify-content:center;font-size:1.25rem;transform:translateX(100%);transition:.3s;z-index:70}
  .menu.abierto{transform:none}
  .hamburguesa{display:block;position:relative;z-index:80}
  .hamburguesa.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburguesa.abierto span:nth-child(2){opacity:0}
  .hamburguesa.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .servicios-rejilla,.galeria{grid-template-columns:1fr}
  .hero-rejilla{padding-top:34px;padding-bottom:44px}
  .hero-tarjeta{left:10px;bottom:12px}
  .seccion{padding:52px 0}
  .barra-movil{display:grid}
  body{padding-bottom:52px}
  .formulario{padding:22px}
}