/* ============================================================
   ALBESOLAR - Estilos globales (header, footer y página contacto)
   Ubicación: public/css/albesolar.css
   ============================================================ */
:root{
  --negro:#1f1f1f;
  --gris:#555;
  --gris-claro:#a5a5a5;
  --amarillo:#f2c718;
  --azul-enlace:#2e9fe6;
  --borde:#dcdcdc;
  --footer-bg:#2b2a29;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Poppins',sans-serif;color:var(--negro);background:#fff;font-size:16px;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ===== HEADER ===== */
.header{
  position:sticky;top:0;z-index:100;background:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 48px;box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.logo img{height:64px;width:auto;}
.nav{display:flex;align-items:center;gap:21px;}
.nav > a, .nav .dropdown > a{
  font-size:18px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;
  padding:8px 0;border-bottom:2px solid transparent;transition:border-color .2s;display:inline-block;
}
.nav > a:hover,.nav > a.activo,.nav .dropdown > a:hover{border-bottom-color:var(--negro);}
.dropdown{position:relative;}
.dropdown > a::after{
  content:"\25BE";              /* triángulo ▾ */
  font-size:13px;
  display:inline-block;
  margin-left:6px;
  vertical-align:middle;         /* a la altura media del texto */
  position:relative;
  top:-1px;                      /* ajuste fino */
}
.submenu{
  position:absolute;top:100%;left:0;background:#fff;min-width:230px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;
  transform:translateY(8px);transition:all .2s;padding:6px 0;z-index:50;
}
.dropdown:hover > .submenu,.dropdown:focus-within > .submenu{opacity:1;visibility:visible;transform:translateY(0);}
.submenu a{display:block;padding:12px 22px;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:background .2s;text-align:center;}
.submenu a:hover{background:#f7f7f7;}
/* Opciones del primer nivel (AUTOCONSUMO y SERVICIOS) SIEMPRE centradas */
.nav > .dropdown > .submenu > a,
.nav > .dropdown > .submenu > .dropdown > a{text-align:center;}

/* El desplegable de primer nivel (el de "Servicios") se centra bajo su enlace */
.nav > .dropdown > .submenu{left:50%;transform:translate(-50%,8px);}
.nav > .dropdown:hover > .submenu,
.nav > .dropdown:focus-within > .submenu{transform:translate(-50%,0);}

/* Submenú de segundo nivel (lateral) */
.submenu .dropdown{position:relative;}
.submenu .dropdown > a::after{content:"\203A";font-size:16px;display:inline-block;margin-left:6px;vertical-align:middle;position:relative;top:-1px;}
.submenu .submenu{top:0;left:100%;transform:translateX(8px);}
.submenu .dropdown:hover > .submenu{transform:translateX(0);}
.submenu .submenu a{text-transform:none;font-weight:400;font-size:16px;text-align:left;}
.hamburguesa{display:none;background:none;border:none;font-size:32px;cursor:pointer;}

/* ===== HERO =====
   La imagen de fondo NO va aquí: cada página define la suya con la
   variable CSS --hero-img en el atributo style de la sección, p. ej.:
   <section class="hero" style="--hero-img:url('{{ asset('img/hero-contacto.jpg') }}')">
   Si una página no define --hero-img, se muestra un fondo gris suave. */
.hero{
  position:relative;min-height:460px;display:flex;align-items:center;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 70%),
    var(--hero-img, linear-gradient(#e9e9e9, #e9e9e9));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero-contenido{padding:60px 48px;max-width:640px;}
.hero-eyebrow{font-size:15px;font-weight:600;letter-spacing:6px;text-transform:uppercase;margin-bottom:18px;}
.hero h1{font-size:52px;font-weight:600;line-height:1.15;color:#3a3a3a;}

/* ===== BARRA DE CONTACTO ===== */
.barra-contacto{
  background:linear-gradient(90deg,#dff3f5 0%,#f4f6df 55%,#fbf3d3 100%);
  display:grid;grid-template-columns:repeat(3,1fr) auto;gap:24px;align-items:center;
  padding:32px 48px;
}
.dato{display:flex;align-items:center;gap:16px;}
.dato .icono{font-size:30px;flex-shrink:0;color:#3a3a3a;}
.dato p{font-weight:700;font-size:15px;line-height:1.5;}
.dato a{color:var(--azul-enlace);font-weight:700;}
.btn-contactar{
  justify-self:end;border:2px solid var(--negro);background:transparent;
  padding:16px 40px;font-family:inherit;font-size:15px;font-weight:600;
  letter-spacing:1px;cursor:pointer;transition:all .25s;
}
.btn-contactar:hover{background:var(--negro);color:#fff;}

/* ===== SECCIÓN PRINCIPAL ===== */
.contenedor{max-width:1060px;margin:0 auto;padding:70px 24px;}
.titulo-seccion{font-size:16px;font-weight:700;letter-spacing:5px;text-transform:uppercase;margin-bottom:28px;}
.titulo-seccion.amarillo{color:var(--amarillo);}
.horario{display:grid;grid-template-columns:1fr 1fr;gap:12px 60px;max-width:760px;margin-bottom:70px;}
.horario-fila{display:grid;grid-template-columns:170px 1fr;font-size:15px;}
.horario-fila span:first-child{font-weight:500;}
.intro-form{margin-bottom:36px;font-size:16px;color:#333;}

/* ===== FORMULARIO ===== */
.fila-doble{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;}
.campo input,.campo textarea{
  width:100%;border:1px solid var(--borde);padding:16px 18px;
  font-family:inherit;font-size:15px;color:var(--negro);outline:none;
  transition:border-color .2s;background:#fff;
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--gris-claro);}
.campo input:focus,.campo textarea:focus{border-color:var(--amarillo);}
.campo{margin-bottom:24px;}
.campo textarea{min-height:150px;resize:vertical;}
/* Mensajes de error de campo: en rojo, estén donde estén
   (campos, checkbox de privacidad, captcha...) */
.error-campo{color:#c62828;font-size:13px;margin-top:5px;display:block;}
.contador{text-align:right;font-size:12px;color:var(--gris-claro);margin-top:4px;}
.privacidad{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:20px;}
.privacidad input{width:18px;height:18px;accent-color:var(--amarillo);cursor:pointer;}
.privacidad a{color:var(--azul-enlace);}
.captcha{margin-bottom:24px;}
/* Honeypot anti-spam: oculto para humanos */
.hp-field{position:absolute !important;left:-9999px !important;opacity:0;height:0;overflow:hidden;}
.btn-enviar{
  background:var(--amarillo);border:none;padding:14px 34px;
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:1px;
  cursor:pointer;text-transform:uppercase;transition:filter .2s;
}
.btn-enviar:hover{filter:brightness(.95);}
.btn-enviar:disabled{opacity:.6;cursor:not-allowed;}
.mensaje-estado{margin-top:18px;font-size:14px;font-weight:500;}
.mensaje-estado.ok{color:#2e7d32;}
.mensaje-estado.error{color:#c62828;}

/* ===== MAPA ===== */
.mapa{width:100%;height:420px;border:0;display:block;}
.franja-color{height:6px;background:linear-gradient(90deg,#38c1c9,#f2c718,#f2c718);}

/* ===== FOOTER ===== */
.footer{background:var(--footer-bg);color:#cfcfcf;padding:70px 48px 30px;}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.1fr;gap:40px;
  max-width:1280px;margin:0 auto;
}
.footer h4{color:#fff;font-size:17px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:22px;text-align:center;}
.footer-col{text-align:center;}
.footer-col a{display:block;padding:7px 0;font-size:14px;color:#e0e0e0;transition:color .2s;}
.footer-col a:hover{color:var(--amarillo);}
.footer-col p{font-size:14px;line-height:1.7;}
.footer-marca{text-align:left;}
.footer-marca img{width:220px;height:auto;margin-bottom:22px;}
.footer-marca p{font-size:13px;line-height:1.8;color:#bdbdbd;}
.footer-legal{
  max-width:1280px;margin:50px auto 0;padding-top:24px;
  border-top:1px solid #454545;text-align:right;font-size:14px;
}
.footer-legal a{color:#e0e0e0;}
.footer-legal a:hover{color:var(--amarillo);}
.footer-financiacion{
  display:flex;justify-content:center;align-items:center;gap:50px;flex-wrap:wrap;
  margin-top:44px;
}
.footer-financiacion img{height:60px;width:auto;}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .barra-contacto{grid-template-columns:1fr 1fr;}
  .btn-contactar{justify-self:start;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .header{padding:12px 20px;}
  .logo img{height:54px;}
  .nav{
    position:fixed;inset:90px 0 auto 0;background:#fff;flex-direction:column;
    align-items:flex-start;padding:20px;gap:6px;box-shadow:0 12px 24px rgba(0,0,0,.12);
    display:none;max-height:calc(100vh - 90px);overflow-y:auto;
  }
  .nav.abierto{display:flex;}
  .hamburguesa{display:block;}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding-left:16px;display:none;}
  .dropdown.abierto > .submenu{display:block;}
  .submenu .submenu{padding-left:16px;}
  .hero h1{font-size:36px;}
  .hero-contenido{padding:40px 24px;}
  .barra-contacto{grid-template-columns:1fr;padding:28px 24px;}
  .fila-doble,.horario{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-legal{text-align:center;}
}