/*
Theme Name: GeneratePress Electricistas
Theme URI: https://electricistaspr.com
Description: Custom GeneratePress child theme for ElectricistasPR.
Author: Jomar Cruz
Author URI: https://jomarcruz.com
Template: generatepress
Version: 1.4.3
Text Domain: generatepress-electricistas
*/

:root {
  --epr-navy: #0B264A;
  --epr-navy-dark: #071B36;
  --epr-navy-alt: #102E57;
  --epr-yellow: #FFC72C;
  --epr-yellow-dark: #FFC72C;
  --epr-white: #FFFFFF;
  --epr-white-dim: #C7D1E0;
  --epr-text: #1A1F29;
  --epr-text-muted: #6B7582;
  --epr-page-bg: #F6F8FB;
  --epr-divider: #E6EBF0;
  --epr-photo: #D9DEE8;
  --epr-photo-dark: #3A4860;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--epr-text);
  background: #FFFFFF;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.015em;
  margin: 0;
}

/* ============================================================
   Full-bleed page content — strip GP's default container chrome.
   GP wraps page content in 6 nested containers (.site → .site-content →
   .content-area → .site-main → .inside-article → .entry-content), each
   with its own padding/max-width. Override them all so our .epr-section
   blocks render edge-to-edge.
   ============================================================ */
body { margin: 0; }

#page.site,
.site,
#content.site-content,
.site-content,
#primary.content-area,
.content-area,
main#main.site-main,
.site-main,
article.post,
.post,
.hentry,
.inside-article,
.entry-content {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Kill the entry header (page title) on every page */
.entry-header,
.entry-title,
.page .entry-header,
article > .entry-header {
  display: none !important;
}

/* Kill default block top/bottom margins between sections so backgrounds touch */
.entry-content > *,
.entry-content > section,
.entry-content > .gb-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* GP's "separate-containers" mode adds a top padding to .site-content — kill it */
.separate-containers .site-content,
.separate-containers .inside-article {
  padding: 0 !important;
  margin: 0 !important;
}

/* Sometimes GP adds margin-top: 40px to article in separate-containers mode */
.separate-containers .site-main > article,
.separate-containers article.post {
  margin: 0 !important;
}

/* GP container width — make global helpers full-width */
.grid-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ============================================================
   Sections
   ============================================================ */
.epr-section {
  display: block;
  width: 100%;
  padding: 72px 0;
}
.epr-section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

.epr-bg-white      { background: #FFFFFF; }
.epr-bg-pagebg     { background: var(--epr-page-bg); }
.epr-bg-navy       { background: var(--epr-navy); }
.epr-bg-navy-dark  { background: var(--epr-navy-dark); padding-top: 56px; padding-bottom: 56px; }
.epr-bg-yellow     { background: var(--epr-yellow); padding-top: 36px; padding-bottom: 36px; }

.epr-center        { text-align: center; }
.epr-max-680       { max-width: 680px; margin-left: auto; margin-right: auto; }

/* ============================================================
   Hero — home
   ============================================================ */
.epr-hero-home {
  position: relative;
  background-color: var(--epr-navy);
  background-image: url('https://wordpress-874921-6474900.cloudwaysapps.com/wp-content/uploads/2026/06/FOTO-1.webp');
  background-size: cover;
  background-position: center;
  width: 100% !important;
  max-width: none !important;
}
.epr-hero-home-overlay {
  background: linear-gradient(90deg,
    rgba(7,27,54,0.92) 0%,
    rgba(7,27,54,0.78) 40%,
    rgba(7,27,54,0.35) 75%,
    rgba(7,27,54,0.0) 100%);
  width: 100% !important;
  max-width: none !important;
}

/* ============================================================
   Page heroes — same look as home (bg image + gradient overlay).
   Each page has its own bg image; gradient is shared.
   ============================================================ */
.epr-hero-page {
  position: relative;
  background-color: var(--epr-navy);
  background-size: cover;
  background-position: center;
  width: 100% !important;
  max-width: none !important;
}
.epr-hero-page-overlay {
  background: linear-gradient(90deg,
    rgba(7,27,54,0.92) 0%,
    rgba(7,27,54,0.78) 40%,
    rgba(7,27,54,0.35) 75%,
    rgba(7,27,54,0.0) 100%);
  width: 100% !important;
  max-width: none !important;
}
.epr-hero-svc { background-image: url('https://wordpress-874921-6474900.cloudwaysapps.com/wp-content/uploads/2026/06/FOTO-23.webp'); }
.epr-hero-prj { background-image: url('https://wordpress-874921-6474900.cloudwaysapps.com/wp-content/uploads/2026/06/FOTO-17.webp'); }
.epr-hero-gen { background-image: url('https://wordpress-874921-6474900.cloudwaysapps.com/wp-content/uploads/2026/06/FOTO-25.webp'); }
.epr-hero-ct  { background-image: url('https://wordpress-874921-6474900.cloudwaysapps.com/wp-content/uploads/2026/06/FOTO-30.webp'); }

/* Half navy / half white background — for the "Práctica y Segura" section so card photos sit on navy and bodies on white */
.epr-section-split-bg {
  background: linear-gradient(to bottom, #0B264A 0%, #0B264A 70%, #FFFFFF 70%, #FFFFFF 100%) !important;
}
@media (max-width: 900px) {
  /* On mobile cards stack vertically — push split very low so most photos still hit navy */
  .epr-section-split-bg { background: linear-gradient(to bottom, #0B264A 0%, #0B264A 22%, #FFFFFF 22%, #FFFFFF 100%) !important; }
}

.epr-hero-content-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.epr-hero-content-inner > * { max-width: 580px; }
.epr-section-inner-1280 {
  max-width: 1280px;
  margin: 0 auto;
}

/* ============================================================
   Layout classes for GB Container / Grid wrappers
   These get added to .gb-container or .gb-grid-wrapper via the
   block's className attribute, then CSS turns them into flex/grid.
   ============================================================ */

/* ---------- GB Grid layout overrides — beat GB's negative-margin flex system ---------- */
/* GB renders <div class="gb-grid-wrapper gb-grid-wrapper-{uid} {customCls}"> with flex+negative-margin.
   We override to CSS grid for true N-column layouts, and reset GB's column padding/margin. */
.gb-grid-wrapper.epr-grid-2,
.gb-grid-wrapper.epr-grid-3,
.gb-grid-wrapper.epr-grid-4,
.gb-grid-wrapper.epr-about-grid {
  display: grid !important;
  margin-left: 0 !important;
}
.gb-grid-wrapper.epr-grid-2 > .gb-grid-column,
.gb-grid-wrapper.epr-grid-3 > .gb-grid-column,
.gb-grid-wrapper.epr-grid-4 > .gb-grid-column,
.gb-grid-wrapper.epr-about-grid > .gb-grid-column {
  width: auto !important;
  padding: 0 !important;
}
.gb-grid-wrapper.epr-grid-2 { grid-template-columns: 1fr 1fr; gap: 32px; }
.gb-grid-wrapper.epr-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gb-grid-wrapper.epr-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gb-grid-wrapper.epr-about-grid { grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }

/* GB sets `.gb-grid-wrapper > .gb-grid-column > .gb-container { display: flex; flex-direction: column }`
   on every container inside a grid column. Override for commit boxes (we want row dir). */
.gb-grid-wrapper > .gb-grid-column > .gb-container.epr-commit-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  height: auto !important;
}

/* V2 home: GB's auto-CSS handles per-column widths via the `width` attribute on each container.
   No custom override needed — the grid wrapper IS the flex/wrap layout. The only fix is to make
   the auto-generated mobile rule (width:100% under 767px) also apply at our 900px break, so cards
   don't squeeze into 33% strips on tablets. */
@media (max-width: 900px) {
  .gb-grid-wrapper > .gb-grid-column { width: 50% !important; }
}
@media (max-width: 560px) {
  .gb-grid-wrapper > .gb-grid-column { width: 100% !important; }
}

/* Flex row — content split left + right, vertical center */
.gb-container.epr-flex-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Flex row — centered (for hero stats) */
.gb-container.epr-flex-wrap {
  display: flex !important;
  flex-wrap: wrap;
  gap: 32px 36px;
}

/* Inline-flex item (single stat: icon + text) */
.gb-container.epr-flex-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

/* Vertical stack (text column) */
.gb-container.epr-stack {
  display: flex !important;
  flex-direction: column;
}

/* Card wrapper — overflow hidden so rounded corners clip image */
.gb-container.epr-card {
  background: #FFFFFF;
  border: 1px solid var(--epr-divider);
  border-radius: 10px;
  overflow: hidden;
}
/* Card photos: top corners rounded (already by card overflow:hidden), bottom corners flush with body. */
.gb-container.epr-card .gb-image,
.gb-container.epr-card figure.gb-block-image img {
  border-radius: 0 !important;
  display: block;
}

/* Commit box (the 4 boxes in Nuestro Compromiso) */
.gb-container.epr-commit-box {
  display: flex !important;
  align-items: center;
  gap: 14px;
  background: var(--epr-navy);
  border-radius: 10px;
  padding: 18px;
}

/* Yellow CTA flex row */
.gb-container.epr-cta-row {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.gb-container.epr-cta-left {
  display: flex !important;
  align-items: center;
  gap: 18px;
}

@media (max-width: 900px) {
  .gb-grid-wrapper.epr-grid-2,
  .gb-grid-wrapper.epr-grid-3,
  .gb-grid-wrapper.epr-grid-4,
  .gb-grid-wrapper.epr-about-grid,
  .gb-container.epr-grid-2,
  .gb-container.epr-grid-3,
  .gb-container.epr-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .gb-grid-wrapper.epr-grid-2,
  .gb-grid-wrapper.epr-grid-3,
  .gb-grid-wrapper.epr-grid-4,
  .gb-grid-wrapper.epr-about-grid,
  .gb-container.epr-grid-2,
  .gb-container.epr-grid-3,
  .gb-container.epr-grid-4 {
    grid-template-columns: 1fr;
  }
}

.epr-hero-home-overlay {
  background: linear-gradient(90deg,
    rgba(7,27,54,0.92) 0%,
    rgba(7,27,54,0.78) 40%,
    rgba(7,27,54,0.35) 75%,
    rgba(7,27,54,0.0) 100%);
}
.epr-hero-home-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px 40px;
  max-width: calc(1280px); /* same as inner */
}
.epr-hero-home-content > * {
  max-width: 580px;
}

.epr-h-display {
  color: var(--epr-white);
  font-size: 54px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 4px 0;
}
.epr-h-display-y {
  color: var(--epr-yellow);
  font-size: 54px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 24px 0;
}

.epr-lead {
  color: #E6EBF0;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 32px 0;
  max-width: 480px;
}
.epr-lead-dark {
  color: var(--epr-text-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 28px 0;
}

/* Hero feature stats row */
.epr-hero-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 36px;
  margin: 0 0 36px 0;
}
.epr-feat {
  display: flex;
  gap: 12px;
  align-items: center;
}
.epr-feat-icon {
  color: var(--epr-yellow);
  display: inline-flex;
  flex-shrink: 0;
}
.epr-feat-icon svg { display: block; }
.epr-feat-text { display: flex; flex-direction: column; }
.epr-feat-title {
  color: var(--epr-white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.epr-feat-sub {
  color: var(--epr-white-dim);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
}

/* ============================================================
   Hero — generic page
   ============================================================ */
.epr-hero {
  background: var(--epr-navy);
  padding: 80px 0;
}
.epr-hero .epr-section-inner { padding: 0 40px; }

.epr-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.epr-hero-text { min-width: 0; }
.epr-hero-image {
  background: var(--epr-photo-dark);
  border-radius: 12px;
  min-height: 380px;
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  color: var(--epr-white-dim);
  font-size: 13px;
}

.epr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--epr-navy-alt);
  color: var(--epr-yellow);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
/* eyebrow on light bg uses different colors */
.epr-bg-white .epr-eyebrow,
.epr-section .epr-eyebrow:not(.epr-center) {
  /* keep navy_alt bg fallback */
}
.epr-eyebrow.epr-center {
  display: block;
  background: transparent;
  color: var(--epr-yellow-dark);
  text-align: center;
  padding: 0;
  margin: 0 0 8px 0;
}

/* ============================================================
   Section headings
   ============================================================ */
.epr-h-section {
  color: var(--epr-navy);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 16px 0;
}
.epr-h-section.epr-center { text-align: center; margin: 0 0 12px 0; }

.epr-h-section-w {
  color: var(--epr-white);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 4px 0;
}
.epr-h-section-y {
  color: var(--epr-yellow);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  margin: 0 0 40px 0;
}
.epr-h-section-w-c {
  color: var(--epr-white);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 40px 0;
}
.epr-h-small {
  color: var(--epr-navy);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 32px 0;
}
.epr-h-card {
  color: var(--epr-navy);
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 16px 0;
}

/* ============================================================
   Buttons
   ============================================================ */
.gb-button.epr-btn,
.epr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 10px !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease,
              box-shadow .18s ease,
              background-color .18s ease,
              color .18s ease;
}
.epr-btn-yellow {
  background: var(--epr-yellow);
  color: var(--epr-navy);
}
.epr-btn-yellow:hover {
  background: var(--epr-yellow-dark) !important;
  color: var(--epr-navy-dark) !important;
  transform: translateY(-1px);
}
.epr-btn-navy {
  background: var(--epr-navy);
  color: var(--epr-white);
}
.epr-btn-navy:hover {
  background: var(--epr-navy-alt) !important;
  color: var(--epr-white) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11, 38, 74, 0.32);
}

.epr-btn svg { transition: transform .18s ease; }
.epr-btn:hover svg { transform: translateX(4px); }

/* "Ver más" link button (renders as text) */
.gb-button.epr-link,
.epr-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent !important;
  color: var(--epr-yellow-dark) !important;
  padding: 0;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 10px;
  text-decoration: none;
  transition: color .15s ease;
}
.epr-link:hover { color: var(--epr-yellow) !important; }

/* button-container — make a row */
.gb-button-wrapper { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   About / 2-col grid (text + image)
   ============================================================ */
.epr-about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.epr-about-text > * + * { margin-top: 16px; }
.epr-about-image {
  background: var(--epr-photo);
  border-radius: 12px;
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  color: var(--epr-text-muted);
  font-size: 13px;
}

/* ============================================================
   Grids
   ============================================================ */
.gb-grid-wrapper.epr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.gb-grid-wrapper.epr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gb-grid-wrapper.epr-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gb-grid-wrapper.epr-stats-grid { display: grid; grid-template-columns: repeat(3, auto); gap: 32px; margin-top: 28px; }

/* ============================================================
   Card (services / soluciones)
   ============================================================ */
.epr-card {
  background: #FFFFFF;
  border: 1px solid var(--epr-divider);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.epr-card-photo {
  background: var(--epr-photo);
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  color: var(--epr-text-muted);
  font-size: 13px;
}
.epr-card-photo-dark {
  background: var(--epr-photo-dark);
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  color: var(--epr-white-dim);
  font-size: 13px;
}
.epr-card-photo-label { padding: 4px 8px; }
.epr-card-body { padding: 22px; }
.epr-card-title {
  color: var(--epr-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px 0;
}
.epr-card-text {
  color: var(--epr-text-muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
.epr-card-loc {
  color: var(--epr-yellow-dark);
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

/* ============================================================
   Stats (Generadores about)
   ============================================================ */
.epr-stat { display: flex; flex-direction: column; }
.epr-stat-num {
  color: var(--epr-yellow-dark);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}
.epr-stat-label {
  color: var(--epr-text-muted);
  font-size: 12px;
  font-weight: 500;
}

/* ============================================================
   Commit boxes (Nuestro Compromiso)
   ============================================================ */
.epr-h-section-w-c { /* heading already styled above */ }

.epr-commit {
  background: var(--epr-navy);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.epr-commit-dot {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--epr-yellow);
  flex-shrink: 0;
}
.epr-commit-text { display: flex; flex-direction: column; }
.epr-commit-title {
  color: var(--epr-white);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px 0;
}
.epr-commit-body {
  color: var(--epr-white-dim);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

/* ============================================================
   Yellow CTA strip
   ============================================================ */
.epr-bg-yellow .epr-section-inner { padding: 0 40px; }
.epr-cta-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.epr-cta-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.epr-cta-icon { color: var(--epr-navy); display: inline-flex; flex-shrink: 0; }
.epr-cta-text { display: flex; flex-direction: column; gap: 4px; }
.epr-cta-heading {
  color: var(--epr-navy);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.epr-cta-sub {
  color: var(--epr-navy);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

/* ============================================================
   Brand strip (Generadores)
   ============================================================ */
.epr-brand-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.epr-brand-chip {
  background: var(--epr-page-bg);
  border-radius: 10px;
  padding: 18px 28px;
  color: var(--epr-text-muted);
  font-weight: 600;
  font-size: 14px;
  min-width: 140px;
  text-align: center;
}

/* ============================================================
   Contacto — info cards + features row
   ============================================================ */
.epr-info {
  background: #FFFFFF;
  border: 1px solid var(--epr-divider);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.epr-info-dot {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--epr-yellow);
  flex-shrink: 0;
}
.epr-info-text { display: flex; flex-direction: column; }
.epr-info-key {
  color: var(--epr-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.epr-info-val {
  color: var(--epr-navy);
  font-size: 15px;
  font-weight: 600;
}
.epr-info-col { min-width: 0; }
.epr-info-col .epr-map-ph { margin-top: 16px; aspect-ratio: 5/3; }

.epr-form-card {
  background: var(--epr-page-bg);
  border: 1px solid var(--epr-divider);
  border-radius: 12px;
  padding: 32px 28px;
}
.epr-form-card .epr-h-card { margin-bottom: 8px; }
.epr-form-card .epr-lead-dark { margin-bottom: 20px; font-size: 13px; }
.epr-form-slot { /* container for Fluent Forms shortcode */ }

.epr-feature {
  background: #FFFFFF;
  border: 1px solid var(--epr-divider);
  border-radius: 10px;
  padding: 22px;
}
.epr-feature-dark {
  background: var(--epr-navy);
  border: 0;
}
.epr-feature-dot {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--epr-yellow);
  margin-bottom: 12px;
}
.epr-feature-title {
  color: var(--epr-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 6px 0;
}
.epr-feature-dark .epr-feature-title { color: var(--epr-white); }
.epr-feature-body {
  color: var(--epr-text-muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.epr-feature-dark .epr-feature-body { color: var(--epr-white-dim); }

/* ============================================================
   GP Elements — TOP BAR
   ============================================================ */
.epr-top-bar {
  background: var(--epr-navy-dark);
  padding: 10px 0;
}
.epr-topbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  line-height: 1.4;
}
.epr-topbar-left, .epr-topbar-right {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.epr-topbar-item { color: var(--epr-white-dim); font-weight: 500; }
.epr-topbar-phone a { color: var(--epr-yellow); font-weight: 600; text-decoration: none; }
.epr-topbar-mail a { color: var(--epr-white-dim); font-weight: 500; text-decoration: none; }
.epr-top-bar a { transition: opacity .15s ease; }
.epr-top-bar a:hover { opacity: 0.78; }

/* ============================================================
   GP Elements — SITE HEADER
   ============================================================ */
.epr-site-header {
  background: #FFFFFF;
  padding: 18px 0;
  border-bottom: 1px solid var(--epr-divider);
}
.epr-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.epr-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.epr-logo-mark {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--epr-yellow);
  flex-shrink: 0;
}
.epr-logo-text { display: flex; flex-direction: column; line-height: 1; }
.epr-logo-name {
  color: var(--epr-navy);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.epr-logo-suffix {
  color: var(--epr-yellow-dark);
  font-weight: 600;
  font-size: 11px;
  margin-top: 2px;
}
.epr-primary-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.epr-nav-item a {
  color: var(--epr-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 4px;
  transition: color .15s ease;
}
.epr-nav-item a:hover { color: var(--epr-yellow-dark); }

/* Site Header nav links — yellow underline on hover (no inline JS allowed by WP) */
.epr-nav-link {
  color: #1A1F29;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 4px 6px;
  border-bottom: 3px solid transparent;
  transition: border-color .15s ease, color .15s ease;
  display: inline-block;
  line-height: 1;
}
.epr-nav-link:hover,
.epr-nav-link:focus {
  border-bottom-color: var(--epr-yellow);
  color: #1A1F29;
}
/* Current page indicator (active link) — same yellow underline */
.epr-nav-link.is-current,
body.home .epr-nav-link[href="/"],
body.page-id-8 .epr-nav-link[href="/servicios/"],
body.page-id-9 .epr-nav-link[href="/generadores/"],
body.page-id-10 .epr-nav-link[href="/proyectos/"],
body.page-id-11 .epr-nav-link[href="/contacto/"] {
  border-bottom-color: var(--epr-yellow);
}

/* ============================================================
   GP Elements — SITE FOOTER
   ============================================================ */
.epr-site-footer {
  background: var(--epr-navy-dark);
  color: var(--epr-white-dim);
  padding: 56px 0 24px;
}
.epr-site-footer .epr-section-inner { padding: 0 40px; }
.gb-grid-wrapper.epr-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 36px;
}
.epr-footer-col, .epr-footer-col-brand { min-width: 0; }
.epr-footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.epr-footer-brand-row .epr-logo-mark { width: 40px; height: 40px; }
.epr-footer-brandname {
  color: var(--epr-white);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.epr-footer-tag {
  color: var(--epr-white-dim);
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 20px 0;
  max-width: 320px;
}
.epr-footer-socials { display: flex; gap: 10px; }
.epr-social {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--epr-navy);
  transition: background .18s ease, transform .18s ease;
  cursor: pointer;
}
.epr-social:hover { background: var(--epr-yellow); transform: translateY(-1px); }

.epr-footer-heading {
  color: var(--epr-yellow);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 14px 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.epr-footer-ul { list-style: none; padding: 0; margin: 0; }
/* Base footer list item — flex row with icon slot on the left */
.epr-footer-li-plain,
.epr-footer-li-check,
.epr-footer-li-phone,
.epr-footer-li-mail,
.epr-footer-li-clock,
.epr-footer-li-pin {
  color: var(--epr-white-dim);
  font-size: 12px;
  margin-bottom: 8px;
  list-style: none !important;
  display: flex;
  align-items: center;
  line-height: 1.4;
  padding: 0;
}

/* ENLACES — plain menu, no icon prefix, no indent. */
.epr-footer-li-plain { /* nothing extra */ }

/* Yellow checkmark prefix (SERVICIOS column) */
.epr-footer-li-check::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 9px;
  flex-shrink: 0;
  background-color: var(--epr-yellow);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* Contact icons (CONTACTO column) — phone / mail / clock / pin, yellow */
.epr-footer-li-phone::before,
.epr-footer-li-mail::before,
.epr-footer-li-clock::before,
.epr-footer-li-pin::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  flex-shrink: 0;
  background-color: var(--epr-yellow);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.epr-footer-li-phone::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.epr-footer-li-mail::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><polyline points='22,6 12,13 2,6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><polyline points='22,6 12,13 2,6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>");
}
.epr-footer-li-clock::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><polyline points='12 6 12 12 16 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/><polyline points='12 6 12 12 16 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.epr-footer-li-pin::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><circle cx='12' cy='10' r='3' fill='none' stroke='black' stroke-width='2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/><circle cx='12' cy='10' r='3' fill='none' stroke='black' stroke-width='2'/></svg>");
}

/* Footer link colors + hover */
.epr-footer-link {
  color: var(--epr-white-dim);
  text-decoration: none;
  transition: color .15s ease;
}
.epr-footer-link:hover { color: var(--epr-yellow); }

/* Reset any default ul indent inside the footer columns */
.epr-site-footer ul { padding: 0 !important; margin: 0 !important; list-style: none !important; }

/* Footer social icons */
.epr-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0B264A;
  color: #C7D1E0;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  text-decoration: none;
}
.epr-footer-social:hover {
  background: var(--epr-yellow);
  color: var(--epr-navy);
  transform: translateY(-1px);
}
.epr-footer-social svg { display: block; }

.epr-footer-bottom {
  border-top: 1px solid var(--epr-navy);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.epr-footer-copy, .epr-footer-by {
  color: var(--epr-white-dim);
  font-size: 11px;
  margin: 0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .epr-section { padding: 56px 0; }
  .epr-hero { padding: 60px 0; }
  .epr-hero-grid { grid-template-columns: 1fr; }
  .epr-about-grid { grid-template-columns: 1fr; gap: 32px; }
  .epr-h-display, .epr-h-display-y { font-size: 38px; }
  .epr-h-section, .epr-h-section-w, .epr-h-section-y { font-size: 26px; }
  .gb-grid-wrapper.epr-grid-2,
  .gb-grid-wrapper.epr-grid-3,
  .gb-grid-wrapper.epr-grid-4 { grid-template-columns: 1fr 1fr; }
  .epr-cta-flex { flex-direction: column; align-items: flex-start; }
  .epr-hero-home-content { padding: 60px 24px; }
}
@media (max-width: 560px) {
  .gb-grid-wrapper.epr-grid-2,
  .gb-grid-wrapper.epr-grid-3,
  .gb-grid-wrapper.epr-grid-4 { grid-template-columns: 1fr; }
  .epr-section-inner { padding: 0 24px; }
  .epr-h-display, .epr-h-display-y { font-size: 30px; }
}

/* === EPR_HOME_BLOCK_CSS_START === */
/* === EPR_HOME_BLOCK_CSS_END === */


/* ────────────────────────────────────────────────────────────────────────
   V2 mobile responsiveness — narrowly-scoped overrides for the major
   section heading sizes (h2/h3/h4) used in the V2 hero/sections.
   Targeted by `.gb-text` class only (text-block, not container).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    h2.gb-text { font-size: 26px !important; line-height: 1.2 !important; }
    h3.gb-text { font-size: 17px !important; }
    h4.gb-text { font-size: 15px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   SITE HEADER + TOP BAR — mobile layout
   - Top bar collapses to 2 stacked rows (left col → row 1, right col → row 2)
   - Site header gets a hamburger button on the right; nav becomes a drawer
   The GP element targets here are the uniqueIds emitted by
   epr-setup-site-header.php — keep them in sync if that script is rerun.
   ──────────────────────────────────────────────────────────────────────── */

/* Hamburger button — hidden on desktop, shown on mobile */
.epr-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  gap: 5px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.epr-hamburger:hover { background-color: rgba(11, 38, 74, 0.08); }
.epr-hamburger:focus-visible {
  outline: 2px solid var(--epr-yellow);
  outline-offset: 2px;
  background-color: rgba(11, 38, 74, 0.08);
}
.epr-hamburger:active { background-color: rgba(11, 38, 74, 0.14); }
.epr-hamburger .epr-hamburger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--epr-navy);
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease, background-color .18s ease;
  transform-origin: center;
}
/* Open state — yellow square + navy X for clear "menu is open" cue and AAA contrast */
.epr-hamburger[aria-expanded="true"] {
  background-color: var(--epr-yellow);
}
.epr-hamburger[aria-expanded="true"]:hover { background-color: var(--epr-yellow-dark); }
.epr-hamburger[aria-expanded="true"] .epr-hamburger-bar { background-color: var(--epr-navy); }
.epr-hamburger[aria-expanded="true"] .epr-hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.epr-hamburger[aria-expanded="true"] .epr-hamburger-bar:nth-child(2) {
  opacity: 0;
}
.epr-hamburger[aria-expanded="true"] .epr-hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile breakpoint for header + top bar */
@media (max-width: 900px) {

  /* ── TOP BAR — 2 rows ──────────────────────────────────────────────── */
  /* The inner top-bar grid: stack the two columns vertically */
  .gb-element-2a28398 {
    grid-template-columns: 1fr !important;
    row-gap: 6px !important;
    column-gap: 0 !important;
  }
  /* Outer top-bar section: tighten padding */
  .gb-element-56302e7 { padding: 8px 0 !important; }
  .gb-element-4c47750 { padding: 0 20px !important; }

  /* Left column: hours + 24/7 — centered, wrap as needed */
  .gb-element-8a1050b {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Right column: phone / email / socials — centered, keep phone+email un-broken */
  .gb-element-4b4cd10 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Each icon+text group in the top bar — keep text on one line if possible */
  .gb-element-d6615ab,
  .gb-element-42fb9f6,
  .gb-element-924788d { white-space: nowrap; }
  /* Socials divider line — remove on mobile (the row break is enough separation) */
  .gb-element-9d9247e {
    border-left: 0 !important;
    padding-left: 0 !important;
  }

  /* ── SITE HEADER — hamburger menu ──────────────────────────────────── */
  /* Make the header section the positioning context for the drawer */
  .gb-element-07ade29 { position: relative; }
  /* Header inner grid: logo on the left, hamburger on the right */
  .gb-element-178a62e {
    grid-template-columns: 1fr auto !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
  }
  .gb-element-b1ed220 { padding: 0 20px !important; }
  /* The nav's column — align hamburger to the right */
  .gb-element-b0cc812 {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  /* Show the hamburger on mobile */
  .epr-hamburger { display: inline-flex; }

  /* Desktop nav becomes a drop-down drawer, hidden by default */
  nav.gb-element-28680c8 {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    padding: 8px 20px 16px !important;
    background: #FFFFFF;
    border-top: 1px solid var(--epr-divider);
    box-shadow: 0 12px 24px rgba(7, 27, 54, 0.08);
    z-index: 200;
  }
  nav.gb-element-28680c8.epr-nav-open { display: flex !important; }

  /* Each nav link becomes a full-width tap target */
  nav.gb-element-28680c8 > .gb-text {
    display: block !important;
    width: 100% !important;
    padding: 14px 12px !important;
    font-size: 16px !important;
    color: var(--epr-navy) !important;
    border-bottom: 1px solid var(--epr-divider) !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    line-height: 1.3 !important;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, border-left-color .15s ease, padding-left .15s ease, color .15s ease;
  }
  nav.gb-element-28680c8 > .gb-text:last-child { border-bottom: 0 !important; }
  /* Hover / focus / active drawer-link states — yellow accent stripe + subtle navy tint
     keeps navy text on near-white bg, so contrast stays well above WCAG AA. */
  nav.gb-element-28680c8 > .gb-text:hover,
  nav.gb-element-28680c8 > .gb-text:focus,
  nav.gb-element-28680c8 > .gb-text:focus-visible {
    background-color: rgba(255, 199, 44, 0.10) !important;
    border-left-color: var(--epr-yellow) !important;
    border-bottom-color: var(--epr-divider) !important;
    color: var(--epr-navy) !important;
    padding-left: 16px !important;
    outline: none;
  }
  nav.gb-element-28680c8 > .gb-text:active {
    background-color: rgba(255, 199, 44, 0.18) !important;
  }
}

/* Smaller phones — tighten everything a touch more */
@media (max-width: 480px) {
  .gb-element-56302e7 { font-size: 11px; }
  .gb-element-56df014,
  .gb-text-56df014,
  .gb-text-84dd3c4,
  .gb-text-5f1c2b6,
  .gb-text-0fd8d6a { font-size: 11px !important; }
  .gb-element-8a1050b,
  .gb-element-4b4cd10 { gap: 10px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   HOME "Práctica y Segura" 3-card banner — split navy/white background.
   Desktop: linear-gradient(180deg, navy 70%, white 70%) sits navy behind the
   card photos. On mobile the 3 cards stack, so the gradient's 70% line only
   covers the first card and the last card ("Mantenimiento") lands on white,
   looking detached. Fix: make the section solid navy once the cards stack
   (≤768px, the breakpoint v2cols() uses) so the whole stack reads as one
   navy banner.
   `f55b329` = current live deploy hash; `dfe33c2` = current pages.py source
   hash. Targeting both so this survives a future home-page redeploy.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gb-element-f55b329,
  .gb-element-dfe33c2 {
    background-image: none !important;
    background-color: var(--epr-navy) !important;
    padding-bottom: 56px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   YELLOW CTA ("¿Necesitas un Electricista de Confianza?") — global GP Element
   rendered before the footer on every page except Contacto. Desktop grid is
   `1fr auto` (text | button). On mobile collapse to a single column / two
   rows: text on row 1, button on row 2. !important needed because the block's
   own CSS ships in a late <style> tag that would otherwise win on order.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gb-element-45dc9de {
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
    column-gap: 0 !important;
    align-items: start !important;
  }
  /* Button column — left-align under the text; button keeps its own width */
  .gb-element-5df1768 { justify-self: start !important; }
  /* Tighten the yellow band a touch on phones */
  .gb-element-11bb569 { padding: 28px 0 !important; }
}
@media (max-width: 480px) {
  /* Full-width button = bigger tap target on small phones */
  .gb-element-5df1768 { width: 100% !important; }
  .gb-text-9f5a3d5 {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   SITE FOOTER — responsive columns.
   Live footer (epr-setup-elements.php) is an inline-styled grid
   `1.7fr 1fr 1fr 1.2fr` inside `.epr-site-footer > div > div:first-child`.
   The grid uses an inline style attribute, so overrides need !important.
   ≤900px → 2 columns (brand spans full width); ≤560px → single column.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .epr-site-footer > div > div:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 40px !important;
  }
  /* Brand/intro column spans the full row */
  .epr-site-footer > div > div:first-child > div:first-child {
    grid-column: 1 / -1 !important;
  }
  /* Footer outer padding — match the rest of the mobile layout */
  .epr-site-footer > div { padding: 0 24px !important; }
}
@media (max-width: 560px) {
  .epr-site-footer > div > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Bottom bar (copyright / credit) stacks and centers */
  .epr-site-footer > div > div:last-child {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   Brand rule: every button on the site uses 10px border-radius. Covers
   GenerateBlocks buttons, native WP block buttons, Fluent Forms submit,
   raw <button>/<input type=submit>, and any GP wp-element-button. The
   .epr-eyebrow pill is intentionally excluded — it's a label, not a button.
   ──────────────────────────────────────────────────────────────────────── */
button[type="submit"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wp-element-button,
.ff-btn,
.ff-btn-submit,
.gb-button,
.gb-text[class*="gb-text-"][href] {
  border-radius: 5px !important;
}

/* Nav links are TEXT links with a border-bottom hover indicator — they are
   not buttons. Reset radius so the hover underline stays a straight line at
   the ends instead of curving with the 5px button radius above. */
nav .gb-text[class*="gb-text-"][href] {
  border-radius: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   FluentForm (Contacto, form id 1) — styled to match the brand reference.
   Labels hidden in the form config; each field shows a placeholder + a left
   icon (background-image SVG). Rounded light inputs + full-width yellow submit.
   ════════════════════════════════════════════════════════════════════════ */
.fluentform .ff-el-group { margin-bottom: 14px; }
.fluentform .ff-el-input--label { display: none !important; }      /* hide labels */
.fluentform .ff-el-input--content { margin: 0 !important; }

/* Base input / select / textarea */
.fluentform .ff-el-form-control {
  width: 100%;
  border: 1px solid #E6EBF0;
  background-color: #F6F8FB;
  border-radius: 10px;
  padding: 14px 16px 14px 46px;     /* left room for the icon */
  font-size: 14px;
  color: #0B264A;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.fluentform .ff-el-form-control::placeholder { color: #6B7582; opacity: 1; }
.fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: #FFC72C;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(255,199,44,0.18);
}
.fluentform textarea.ff-el-form-control { min-height: 120px; resize: vertical; padding-top: 14px; }

/* Per-field left icons */
.fluentform .epr-f-name .ff-el-form-control     { background: #F6F8FB url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7582%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22/%3E%3C/svg%3E")  no-repeat 16px center; }
.fluentform .epr-f-phone .ff-el-form-control    { background: #F6F8FB url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7582%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13%20.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E") no-repeat 16px center; }
.fluentform .epr-f-email .ff-el-form-control    { background: #F6F8FB url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7582%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z%22/%3E%3Cpolyline%20points%3D%2222%206%2012%2013%202%206%22/%3E%3C/svg%3E")  no-repeat 16px center; }
.fluentform .epr-f-service .ff-el-form-control  { background: #F6F8FB url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7582%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%228%22%20y1%3D%226%22%20x2%3D%2221%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2221%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2218%22%20x2%3D%2221%22%20y2%3D%2218%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%226%22%20x2%3D%223.01%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%223.01%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2218%22%20x2%3D%223.01%22%20y2%3D%2218%22/%3E%3C/svg%3E")  no-repeat 16px center; }
.fluentform .epr-f-message .ff-el-form-control  { background: #F6F8FB url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7582%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E")  no-repeat 16px 16px; }
/* keep the icon visible while typing (focus changes bg to white) */
.fluentform .epr-f-name .ff-el-form-control:focus     { background-color: #FFFFFF; }
.fluentform .epr-f-phone .ff-el-form-control:focus    { background-color: #FFFFFF; }
.fluentform .epr-f-email .ff-el-form-control:focus    { background-color: #FFFFFF; }
.fluentform .epr-f-service .ff-el-form-control:focus  { background-color: #FFFFFF; }
.fluentform .epr-f-message .ff-el-form-control:focus  { background-color: #FFFFFF; }

/* Select — custom chevron on the right, hide native arrow */
.fluentform .epr-f-service select.ff-el-form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7582%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%228%22%20y1%3D%226%22%20x2%3D%2221%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2212%22%20x2%3D%2221%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%228%22%20y1%3D%2218%22%20x2%3D%2221%22%20y2%3D%2218%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%226%22%20x2%3D%223.01%22%20y2%3D%226%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2212%22%20x2%3D%223.01%22%20y2%3D%2212%22/%3E%3Cline%20x1%3D%223%22%20y1%3D%2218%22%20x2%3D%223.01%22%20y2%3D%2218%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7582%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 16px center, right 16px center;
  padding-right: 44px;
  cursor: pointer;
}

/* Submit button — full-width yellow with paper-plane icon */
.fluentform .ff-el-group.ff_submit_btn_wrapper,
.fluentform .ff-el-group.ff-el-group-submit { margin-top: 4px; }
.fluentform .ff-btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: #FFC72C !important;
  color: #0B264A !important;
  border: 0; border-radius: 10px;
  padding: 16px 24px;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.fluentform .ff-btn-submit::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230B264A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cline%20x1%3D%2222%22%20y1%3D%222%22%20x2%3D%2211%22%20y2%3D%2213%22/%3E%3Cpolygon%20points%3D%2222%202%2015%2022%2011%2013%202%209%2022%202%22/%3E%3C/svg%3E") no-repeat center / contain;
}
.fluentform .ff-btn-submit:hover {
  transform: translateY(-1px);
}

/* Validation error text */
.fluentform .error.text-danger, .fluentform .ff-el-is-error .text-danger {
  color: #C0392B; font-size: 12px; margin-top: 4px;
}
.fluentform .ff-el-is-error .ff-el-form-control { border-color: #E5B0AB; }

/* Footer text-links (Enlaces / Contacto / Términos / Privacidad).
   GeneratePress's a:visited / a:active / a:focus default to var(--contrast)
   (#222), which is unreadable against the navy footer. Pin all states to
   white-dim base; only hover shifts to yellow. Targets .gb-text[href] so
   the social icon links (rendered as .gb-element) keep their own yellow.   */
footer .gb-text[class*="gb-text-"][href]:link,
footer .gb-text[class*="gb-text-"][href]:visited,
footer .gb-text[class*="gb-text-"][href]:active,
footer .gb-text[class*="gb-text-"][href]:focus {
  color: var(--epr-white-dim) !important;
}
footer .gb-text[class*="gb-text-"][href]:hover {
  color: var(--epr-yellow) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   Sitewide button HOVER — subtle 1px lift + soft yellow glow halo.
   Catches: GB v2 buttons (.gb-text[href]), Fluent Forms submit, WP block
   buttons, raw <button>/<input type=submit>. Plain text links in nav + 
   footer are explicitly excluded so they keep their own indicators.
   ──────────────────────────────────────────────────────────────────────── */
button[type="submit"],
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wp-element-button,
.ff-btn,
.ff-btn-submit,
.gb-button,
.gb-text[class*="gb-text-"][href] {
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease, filter .18s ease;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.ff-btn:hover,
.ff-btn-submit:hover,
.gb-button:hover,
.gb-text[class*="gb-text-"][href]:hover {
  transform: translateY(-1px);
}

button[type="submit"]:active,
input[type="submit"]:active,
.wp-block-button__link:active,
.wp-element-button:active,
.ff-btn:active,
.ff-btn-submit:active,
.gb-button:active,
.gb-text[class*="gb-text-"][href]:active {
  transform: translateY(0);
}

/* Plain text links inside <nav> and <footer> aren't buttons — they have
   border-bottom (nav) or color-shift (footer) hover. Don't lift them. */
nav .gb-text[class*="gb-text-"][href]:hover,
footer .gb-text[class*="gb-text-"][href]:hover,
nav .gb-text[class*="gb-text-"][href]:active,
footer .gb-text[class*="gb-text-"][href]:active {
  transform: none !important;
  box-shadow: none !important;
}


/* ────────────────────────────────────────────────────────────────────────
   Inline text-links INSIDE a text block (descendant anchors) — added 2026-06-12.
   e.g. the footer "Desarrollado por Jomar Cruz Web Developer" credit: a plain
   <a> inside a <p class="gb-text">. The footer rule above targets a.gb-text[href]
   (anchor IS the element), so it does NOT catch these descendant anchors and they
   fall through to GeneratePress's default blue + underline. Make them read like
   text: inherit the surrounding color, no underline; brand-yellow on hover; no
   blue focus box. Buttons / nav / top-bar phone are a.gb-text (anchor IS element)
   and are NOT matched by `.gb-text a`, so they keep their own styling.
   ──────────────────────────────────────────────────────────────────────── */
.gb-text a { transition: color .15s ease; }
.gb-text a:link,
.gb-text a:visited,
.gb-text a:active {
  color: inherit !important;
  text-decoration: none !important;
}
.gb-text a:hover,
.gb-text a:focus {
  color: var(--epr-yellow) !important;
  text-decoration: none !important;
}
.gb-text a:focus { outline: none; }
.gb-text a:focus-visible {
  outline: 2px solid var(--epr-yellow);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ────────────────────────────────────────────────────────────────────────
   Footer copyright line size fix — added 2026-06-12.
   The copyright <p> (uid md5("copy")=ad11013) contains an inline <a> (the
   "Jomar Cruz Web Developer" credit). The footer renders after wp_head, so GB
   inlines each block's <style> at render time — but it drops the inline <style>
   for a text block whose content holds raw <a> HTML. Result: the <p> loses its
   font-size:11px and falls back to the body size (looked too big). Pin it here.
   ──────────────────────────────────────────────────────────────────────── */
.gb-text-ad11013 {
  font-size: 11px !important;
  color: var(--epr-white-dim) !important;
  line-height: 1.4;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────────────
   Active nav state — the menu link matching the current page keeps the
   yellow border-bottom (the same underline you see on :hover).
   Driven by WP's auto-injected body classes (page-id-N + parent-pageid-N
   for sub-pages); scoped to <nav> so plain text-links elsewhere don't
   pick it up.
   ──────────────────────────────────────────────────────────────────────── */
body.page-id-271 nav .gb-text[class*="gb-text-"][href="/"],
body.home        nav .gb-text[class*="gb-text-"][href="/"],
body.page-id-8   nav .gb-text[class*="gb-text-"][href="/servicios/"],
body.page-id-9   nav .gb-text[class*="gb-text-"][href="/generadores/"],
body.page-id-10  nav .gb-text[class*="gb-text-"][href="/proyectos/"],
body.page-id-11  nav .gb-text[class*="gb-text-"][href="/contacto/"],
body.parent-pageid-11 nav .gb-text[class*="gb-text-"][href="/contacto/"] {
  border-bottom-color: var(--epr-yellow) !important;
}