/* =========================================================
   aEnergía — Réplica fiel del old (aenergia.es)
   Paleta y tipografías capturadas del DOM real del old
   ========================================================= */

/* =========================================================
   Fuentes AUTOALOJADAS (11-ago-2026, lote WEB-LISTA-PARA-EL-SWITCH).
   Antes se cargaban desde fonts.googleapis.com / fonts.gstatic.com, lo que
   transmitía la IP del visitante a un tercero sin su consentimiento.
   Los ficheros .woff2 son los mismos que servía Google (Amaranth v19,
   Cabin v35), bajo licencia SIL OFL 1.1 — ver /assets/fonts/OFL-*.txt.
   Cabin es variable: un solo fichero cubre de 400 a 700.
   ========================================================= */

@font-face {
  font-family: 'Amaranth';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/amaranth-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Amaranth';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/amaranth-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/cabin-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/cabin-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Paleta extraída del old */
  --green-dark: #283C21;       /* títulos H1-H4, iconos pilares — rgb(40,60,33) */
  --text-main:  #3D3D3D;       /* cuerpo de texto — rgb(61,61,61) */
  --nav-active: #30649C;       /* enlace activo navbar — rgb(48,100,156) */
  --cta-bg:     #1C2936;       /* fondo botones CTA — rgb(28,41,54) */
  --cta-bg-hov: #0F1825;       /* hover CTA */
  --cta-text:   #F7F7F7;       /* texto CTA — rgb(247,247,247) */
  --bg-body:    #EEEEEE;       /* fondo body — rgb(238,238,238) */
  --bg-white:   #FFFFFF;
  --bg-soft:    #F5F7F4;       /* fondo hero suave (verde claro) */
  --bg-tab-l:   #F5F5F5;       /* fondo tarjetas productos */
  --border:     #E0E0E0;
  --copyright-bg: #2B2B2B;     /* banda copyright */

  /* Tipografías */
  --font-heading: 'Amaranth', Georgia, serif;
  --font-body:    'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== Reset mínimo ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-main);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--green-dark); margin: 0 0 0.5em; line-height: 1.2; }
ul { margin: 0; padding: 0; }

/* ===== Skip link (a11y) ===== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: var(--green-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px;
  z-index: 10000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Anclas heredadas del sitio antiguo (#PRODUCTOSYSERVICIOS, #CONTACTO) — sin ocupar espacio */
.anchor-alias { display: block; height: 0; overflow: hidden; }

/* ===== Container ===== */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ===== Navbar ===== */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-white);
  border-bottom: 1px solid #f0f0f0;
}
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 100px;
  gap: 24px;
}
.navbar__logo { display: inline-flex; align-items: center; padding: 8px 0; }
.navbar__logo img { width: auto; height: 64px; }
.navbar__nav ul {
  display: flex; gap: 36px; list-style: none;
  align-items: center;
}
.navbar__nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: color 0.2s;
}
.navbar__nav a:hover,
.navbar__nav a:focus,
.navbar__nav a.is-active { color: var(--nav-active); }

/* Hamburger */
.navbar__toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 8px;
}
.navbar__toggle span {
  display: block; width: 28px; height: 3px;
  background: var(--text-main); margin: 5px 0;
  border-radius: 2px; transition: all 0.2s;
}
.navbar__mobile { display: none; }

/* ===== Hero ===== */
.section { padding: 60px 0; }
.section--hero {
  background: var(--bg-soft);
  padding: 90px 0 70px;
  text-align: center;
}
.hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 65px);
  line-height: 1.05;
  color: var(--green-dark);
  margin: 0 0 24px;
}
.hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(18px, 2vw, 26px);
  color: var(--green-dark);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.4;
}

/* ===== Pilares (3 columnas) ===== */
.section--pillars {
  background: var(--bg-white);
  padding: 70px 0 90px;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
.pillar__icon { display: flex; justify-content: center; margin-bottom: 20px; }
.pillar__icon svg { width: 100px; height: 100px; fill: var(--green-dark); }
.pillar__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  color: var(--green-dark);
  margin-bottom: 16px;
}
.pillar__list {
  list-style: disc;
  text-align: left;
  padding-left: 22px;
  font-family: var(--font-body);
  color: var(--text-main);
  font-size: 16px;
  line-height: 1.6;
}
.pillar__list li { margin-bottom: 10px; }

/* ===== Productos y servicios ===== */
.section--products {
  background: var(--bg-white);
  padding: 80px 0;
}
.section__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 48px);
  color: var(--green-dark);
  text-align: center;
  margin: 0 0 56px;
}
.products__grid { display: flex; flex-direction: column; gap: 60px; }
.product-card {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 40px;
  align-items: center;
  background: var(--bg-tab-l);
  padding: 32px;
  border-radius: 6px;
}
.product-card--reverse { grid-template-columns: 7fr 5fr; }
.product-card--reverse .product-card__img { order: 2; }
.product-card--reverse .product-card__body { order: 1; }
.product-card__img img { border-radius: 4px; }
.product-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--green-dark);
  margin-bottom: 18px;
}
.product-card__list {
  list-style: disc;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-main);
  line-height: 1.65;
  margin-bottom: 22px;
}
.product-card__list li { margin-bottom: 10px; }

/* ===== Botones CTA ===== */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn--cta {
  background: var(--cta-bg);
  color: var(--cta-text);
  padding: 16px 36px;
}
.btn--cta:hover, .btn--cta:focus { background: var(--cta-bg-hov); text-decoration: none; }

/* ===== Banda contacto (con imagen edificio + overlay verde claro) ===== */
.section--contact-banner {
  position: relative;
  padding: 70px 0;
  background-color: var(--bg-soft);
  /* Fondo decorativo tras un overlay al 82 %: WebP (18 KB, antes PNG de 305 KB).
     En un navegador sin WebP queda el background-color de arriba, que es el diseño sin foto. */
  background-image:
    linear-gradient(rgba(232,240,228,0.82), rgba(232,240,228,0.72)),
    url('/assets/img/oficina.webp');
  background-size: cover;
  background-position: center;
  text-align: center;
}
.contact-banner__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 40px);
  color: var(--green-dark);
  margin: 0 0 20px;
}
.contact-banner__intro {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--text-main);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ===== Sección contacto (info + formulario) ===== */
.section--contact { background: var(--bg-white); padding: 60px 0 80px; }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
}
.contact__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  color: var(--green-dark);
  margin-bottom: 18px;
}
.contact__line {
  font-family: var(--font-body);
  color: var(--text-main);
  margin: 0 0 10px;
  font-size: 16px;
}
.contact__line a { color: var(--green-dark); }
.contact__logo { margin-top: 28px; }
.contact__logo img { width: auto; height: 180px; max-width: 100%; }

/* Formulario */
.contact__form-wrap form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; }
.form-group label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
  margin-bottom: 6px;
  font-weight: 700;
}
.form-group input,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-main);
  background: #fff;
  transition: border-color 0.2s;
  width: 100%;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green-dark);
}
/* Consentimiento RGPD — art. 13: la casilla es la base legal que invoca la política */
.form-consent { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.form-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green-dark);
  cursor: pointer;
}
.form-consent label {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0;
  cursor: pointer;
}
.form-consent label a { color: var(--green-dark); text-decoration: underline; }

.form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.form-feedback {
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 8px;
}
.form-feedback--success { background: #E8F5E9; color: #1B5E20; }
.form-feedback--error   { background: #FFEBEE; color: #B71C1C; }

/* ===== Footer ===== */
.footer {
  background: var(--copyright-bg);
  color: rgba(255,255,255,0.85);
  padding: 22px 0;
  font-family: var(--font-body);
  font-size: 14px;
}
.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__bar p { margin: 0; }
.footer__links a {
  color: rgba(255,255,255,0.9);
  margin: 0 8px;
  text-decoration: none;
}
.footer__links a:hover { text-decoration: underline; color: #fff; }
.footer__links span { color: rgba(255,255,255,0.5); }

/* =========================================================
   RESPONSIVE: tablet/mobile (≤ 768px)
   ========================================================= */
@media (max-width: 768px) {
  .navbar__inner { min-height: 80px; }
  .navbar__logo img { height: 60px; }
  .navbar__nav { display: none; }
  .navbar__toggle { display: block; }
  .navbar__mobile {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--bg-white);
    border-top: 1px solid #f0f0f0;
  }
  .navbar__mobile--open { max-height: 300px; }
  .navbar__mobile ul {
    list-style: none;
    padding: 12px 20px;
  }
  .navbar__mobile li { margin: 12px 0; }
  .navbar__mobile a {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    text-decoration: none;
  }

  .pillars { grid-template-columns: 1fr; gap: 50px; }
  .product-card,
  .product-card--reverse {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .product-card--reverse .product-card__img,
  .product-card--reverse .product-card__body { order: initial; }

  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
  .form-actions { justify-content: stretch; }
  .form-actions .btn { width: 100%; text-align: center; }

  .footer__bar { flex-direction: column; text-align: center; }
}