/* Versión 4 · Fondo blanco y colores originales de Electricistas RM. */
:root {
  --surface-line: #dfe5ef;
  --surface-soft: #f7f9fc;
  --body-copy: #526077;
}

body {
  background: #fff;
  color: var(--body-copy);
}

/* Cabecera blanca con bloque azul y corte diagonal detrás del logo. */
.site-header {
  background: #fff;
  box-shadow: 0 3px 18px rgba(3, 17, 51, .07);
}
.brand-panel {
  position: relative;
  isolation: isolate;
  background: transparent;
  padding-right: 70px;
}
.brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  z-index: -1;
}
.brand-panel img { position: relative; z-index: 1; }
.header-phone,
#navigation > a,
#navigation summary { color: var(--navy); }
.submenu {
  background: #fff;
  border: 1px solid var(--surface-line);
  border-top: 3px solid var(--yellow);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 28px rgba(3, 17, 51, .1);
}
.submenu a { color: var(--navy); }
#navigation .submenu a:hover {
  background: var(--surface-soft);
  color: var(--blue);
}

/* Los cuatro accesos de portada conservan el amarillo corporativo. */
.hero-tile {
  background: var(--yellow);
  border: 1px solid var(--yellow);
  border-top: 4px solid var(--yellow);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(3, 17, 51, .12);
}
.hero-tile svg { color: var(--navy); }
.hero-tile:hover {
  background: #ffc82c;
  border-color: var(--yellow);
  color: var(--navy);
}

/* Formulario de portada sobre blanco, con campos y CTA bien definidos. */
.appointment-band {
  background: #fff;
  color: var(--body-copy);
  border-bottom: 1px solid var(--surface-line);
}
.appointment-band h2 { color: var(--navy); }
.appointment-band h2 a { color: var(--blue); }
.appointment-band input {
  background: var(--surface-soft);
  border: 1px solid #cbd5e3;
  border-radius: 5px;
}
.appointment-band input:focus {
  background: #fff;
  border-color: var(--blue);
}
.appointment-band form > button {
  background: var(--blue);
  color: #fff;
  border-radius: 5px;
}
.appointment-band form > button:hover { background: var(--navy); }
.appointment-note { color: var(--body-copy); }

/* Secciones de contenido y tarjetas con líneas discretas. */
.home-services {
  background: #fff;
  color: var(--body-copy);
}
.services-intro h2 { color: var(--navy); }
.services-intro > p,
.services-intro > #more-services { color: var(--body-copy); }
.read-more {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 5px;
}
.read-more:hover {
  background: var(--blue);
  color: #fff;
}
.category-card {
  background: #fff;
  border: 3px solid var(--yellow);
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(3, 17, 51, .045);
}
.category-content figure { border-radius: 10px; }
.category-links a {
  border: 1.5px solid var(--yellow);
  border-radius: 12px;
  color: var(--heading);
}
.category-links a:hover {
  background: #fff8e3;
  border-color: var(--yellow);
  color: var(--navy);
}
.category-links a.all-services {
  background: var(--yellow);
  color: var(--navy);
  border: 1.5px solid var(--yellow);
  border-radius: 12px;
}
.category-links a.all-services:hover {
  background: #ffca30;
  border-color: #ffca30;
  color: var(--navy);
}
.home-coverage { border-top: 1px solid var(--surface-line); }
.coverage-contact { border-radius: 5px; }

/* La página de servicios utiliza la misma base clara. */
.quote-panel {
  background: #fff;
  border: 1px solid var(--surface-line);
  border-top: 4px solid var(--yellow);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(3, 17, 51, .055);
}
#quote-form input,
#quote-form select,
#quote-form textarea {
  background: var(--surface-soft);
  border: 1px solid #cbd5e3;
  border-radius: 5px;
}
#quote-form input:focus,
#quote-form select:focus,
#quote-form textarea:focus {
  background: #fff;
  border-color: var(--blue);
}
.form-submit { border-radius: 5px; }
.emergency-card {
  background: #fff;
  color: var(--body-copy);
  border: 1px solid var(--surface-line);
  border-top: 3px solid var(--blue);
  border-radius: 12px;
}
.emergency-card h2 { color: var(--navy); }
.emergency-card > a { color: var(--blue); }

/* Pie blanco con la marca y los datos de contacto en sus colores. */
.site-footer {
  background: #fff;
  color: var(--navy);
  border-top: 3px solid var(--yellow);
}
.footer-nav a { color: var(--heading); }
.footer-left p { color: var(--body-copy); }
.footer-contact > a:not(.quote-button) { color: var(--navy); }
.footer-bottom {
  color: var(--body-copy);
  border-top: 1px solid var(--surface-line);
}

@media (max-width: 991px) {
  .brand-panel { padding-right: 48px; }
  #navigation {
    background: #fff;
    border-top: 1px solid var(--surface-line);
    box-shadow: 0 12px 24px rgba(3, 17, 51, .1);
  }
  #navigation > a,
  #navigation summary { color: var(--navy); }
  .nav-dropdown .submenu {
    background: var(--surface-soft);
    border: 0;
    border-left: 3px solid var(--yellow);
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 600px) {
  .brand-panel { padding: 13px 25px 13px 9px; }
  .brand-panel::before {
    clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%);
  }
}