/* ==========================================================================
   SecureVolt — Design System
   ========================================================================== */

:root {
  /* Brand palette — "Clockwork" (warm neutrals + burnt orange).
     The source swatch has no dark tone, so --ink/--navy-* are a warm
     charcoal scale derived from the mid grey (#919599) to keep the
     dark hero/footer sections working with the same warm hue family. */
  --ink: #1c1b1a;
  --navy-900: #1c1b1a;
  --navy-800: #34322f;
  --navy-700: #4a4744;
  --navy-600: #64615d;
  --amber-500: #e56515;
  --amber-600: #be5411;
  --amber-100: #fcf0e7;
  --teal-400: #fba45c;
  --teal-600: #4a4744;
  --surface: #f8f8f8;
  --surface-alt: #efefed;
  --card: #ffffff;
  --text: #211f1d;
  --text-muted: #5b5854;
  --text-inverse: #f7f6f4;
  --text-inverse-muted: #b8b4ae;
  --border: #cdcdcb;
  --border-dark: #1c1b1a;
  --success: #22c55e;

  /* Type */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", var(--font-body);

  /* Layout */
  --container: 1180px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px -2px rgba(13, 21, 38, 0.08);
  --shadow: 0 12px 32px -12px rgba(13, 21, 38, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(13, 21, 38, 0.35);
  --header-h: 76px;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--teal-400);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--amber-500);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 999;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* ---- Section rhythm ---- */
section {
  padding: 96px 0;
  position: relative;
}

.section--tight {
  padding: 64px 0;
}

.section--alt {
  background: var(--surface-alt);
}

.section--dark {
  background: var(--navy-900);
  color: var(--text-inverse);
}

.section--dark .section-eyebrow {
  color: var(--teal-400);
}

.section--dark h2,
.section--dark h3 {
  color: var(--text-inverse);
}

.section--dark p {
  color: var(--text-inverse-muted);
}

.section-head {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head--left {
  margin: 0 0 48px;
  text-align: left;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 14px;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.section-head h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem);
  color: var(--text);
}

.section-head p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--amber-500);
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(229, 101, 21, 0.6);
}

.btn-primary:hover {
  background: var(--amber-600);
  box-shadow: 0 14px 30px -10px rgba(190, 84, 17, 0.65);
}

/* Disabled state (e.g. the contact form's Send button while a request is
   in flight) needs to visually read as "busy", not just be unclickable —
   without this, a disabled-but-still-orange button looks identical to
   the normal state and visitors can't tell anything happened. */
.btn:disabled {
  background: var(--border);
  color: var(--text-muted);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}

.btn:disabled:hover {
  background: var(--border);
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  border-color: rgba(247, 246, 244, 0.35);
  color: var(--text-inverse);
}

.btn-ghost:hover {
  background: rgba(247, 246, 244, 0.1);
  border-color: rgba(247, 246, 244, 0.6);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-dark);
  color: var(--navy-900);
}

.btn-outline:hover {
  background: var(--navy-900);
  color: var(--text-inverse);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.88rem;
}

/* ---- Icon injection base ---- */
.icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  z-index: 500;
  background: rgba(28, 27, 26, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(247, 246, 244, 0.08);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.site-header.is-scrolled {
  background: rgba(28, 27, 26, 0.92);
  box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.5);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--amber-500);
  flex-shrink: 0;
}

.brand-mark {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand-mark img {
  /* Sized to match the natural height of the two-line "SECUREVOLT /
     Electrical, Security & IT" text stack next to it (~48px). Width is
     auto so the image's own (non-square) aspect ratio is preserved —
     forcing 1:1 here left visible padding above/below the artwork. */
  height: 48px;
  width: auto;
}

.brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-inverse-muted);
}

.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
}

.main-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-inverse-muted);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--text-inverse);
  background: rgba(247, 246, 244, 0.08);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lang-switch {
  position: relative;
}

.lang-switch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(247, 246, 244, 0.08);
  border: 1px solid rgba(247, 246, 244, 0.16);
  color: var(--text-inverse);
  padding: 9px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.lang-switch-btn .icon {
  width: 16px;
  height: 16px;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--navy-800);
  border: 1px solid rgba(247, 246, 244, 0.12);
  border-radius: var(--radius-sm);
  padding: 6px;
  min-width: 168px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.lang-switch.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-inverse-muted);
}

.lang-menu a:hover {
  background: rgba(247, 246, 244, 0.08);
  color: var(--text-inverse);
}

.lang-menu a[aria-current="true"] {
  color: var(--amber-500);
  font-weight: 600;
}

.lang-flag {
  font-size: 1rem;
}

.header-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  /* On narrow phones, brand + lang switch + WhatsApp + the hamburger don't
     all fit in one row — drop the header WhatsApp icon so the hamburger
     (needed to open the nav at all) never gets pushed off-screen. It's
     still reachable via the contact card further down the page.
     The brand subtitle is dropped too: it's the single biggest width
     contributor, and the ES/DE text ("ELECTRICIDAD, SEGURIDAD Y REDES")
     is long enough that hiding WhatsApp alone still wasn't enough to
     keep the hamburger on-screen on real phones (verified against an
     iPhone-17-sized viewport, 402px). */
  .header-whatsapp {
    display: none;
  }

  .brand small {
    display: none;
  }
}

@media (max-width: 400px) {
  /* Still not enough room on the smallest common phones (375px and
     below) even with the subtitle and WhatsApp icon gone — shrink the
     language switcher to just its globe icon (drop the "ES"/"EN"/"DE"
     label and the chevron) so the hamburger stays fully on-screen. */
  .lang-switch-btn {
    padding: 9px 10px;
  }

  .lang-switch-btn span:not(.icon),
  .lang-switch-btn [data-icon="chevronDown"] {
    display: none;
  }

  .site-header .container {
    padding: 0 12px;
  }
}

.header-whatsapp img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.header-whatsapp:hover img {
  opacity: 0.85;
  transform: scale(1.05);
}

.nav-toggle {
  display: none;
  background: rgba(247, 246, 244, 0.08);
  border: 1px solid rgba(247, 246, 244, 0.16);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
}

.nav-toggle .icon {
  width: 20px;
  height: 20px;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-open .nav-toggle .icon-open {
  display: none;
}

.nav-open .nav-toggle .icon-close {
  display: block;
}

@media (max-width: 1180px) {
  /* Raised from 900px: with the extra nav items (Projects, and
     Colabora on the ES pages) plus the header WhatsApp icon, the
     header content no longer fits inline below ~1180px — this now
     matches --container's own max-width, so the switch to the
     hamburger menu happens right as the header would otherwise start
     overflowing. */
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: rgba(28, 27, 26, 0.98);
    backdrop-filter: blur(14px);
    padding: 10px 20px 26px;
    gap: 2px;
    border-bottom: 1px solid rgba(247, 246, 244, 0.1);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .nav-open .main-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .main-nav a {
    padding: 13px 14px;
  }

  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 680px;
  padding: calc(var(--header-h) + 60px) 0 80px;
  display: flex;
  align-items: center;
  color: var(--text-inverse);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Centers the (possibly-smaller-than-the-section) image box below, both
     when it's narrower than the section (see max-width) and when it's
     shorter (see aspect-ratio) — e.g. German/Spanish headlines wrap to an
     extra line and grow .hero taller than the photo's native height. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fallback for the letterbox margin this produces — matches the scrim's
     dark tone so it blends in rather than showing as a blank gap. */
  background: var(--ink);
}

.hero-bg-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center 42%;
  /* Source photo is brighter on its left (lit villa) than its right (dim sea) —
     mirrored so the brighter side lands under the transparent side of the
     scrim instead of the dark side covering the text. */
  transform: scaleX(-1);
  /* Cap both dimensions at the photo's native resolution (1400x763) so it's
     never stretched past its real pixel density and turns soft — whether
     the section is wider than 1400px, or taller than 763px tall because
     the headline wrapped to an extra line in a longer language. It centers
     instead, with .hero-bg's background filling the margin. */
  max-width: 1400px;
  aspect-ratio: 1400 / 763;
}

/* On screens wider than the photo's native resolution, it no longer fills
   the full width (see max-width above) — fade its own left/right edges out
   so it blends smoothly into the dark .hero-bg margin instead of showing a
   hard cut line. */
@media (min-width: 1400px) {
  .hero-bg-img {
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0, black 120px, black calc(100% - 120px), transparent 100%);
  }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(28, 27, 26, 0.95) 0%,
      rgba(28, 27, 26, 0.85) 25%,
      rgba(28, 27, 26, 0.5) 48%,
      rgba(28, 27, 26, 0.15) 68%,
      rgba(28, 27, 26, 0) 85%),
    linear-gradient(to top, rgba(28, 27, 26, 0.7) 0%, rgba(28, 27, 26, 0) 35%),
    linear-gradient(to bottom, rgba(28, 27, 26, 0.35) 0%, rgba(28, 27, 26, 0) 18%);
}

@media (max-width: 700px) {
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(28, 27, 26, 0.8) 0%, rgba(28, 27, 26, 0.6) 40%, rgba(28, 27, 26, 0.85) 100%),
      linear-gradient(100deg, rgba(28, 27, 26, 0.65) 0%, rgba(28, 27, 26, 0.3) 75%);
  }
}

.hero .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-content {
  max-width: 640px;
}

@media (max-width: 700px) {
  .hero-content {
    max-width: 100%;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(247, 246, 244, 0.08);
  border: 1px solid rgba(247, 246, 244, 0.16);
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-inverse-muted);
  margin-bottom: 24px;
}

.hero-badge .icon {
  width: 16px;
  height: 16px;
  color: var(--teal-400);
}

.hero h1 {
  font-size: clamp(2.3rem, 1.7rem + 2.6vw, 3.4rem);
  color: var(--text-inverse);
  max-width: 16ch;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--amber-500), var(--teal-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  font-size: 1.15rem;
  color: var(--text-inverse-muted);
  max-width: 46ch;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 44px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-inverse-muted);
}

.hero-trust-item .icon {
  color: var(--amber-500);
  width: 20px;
  height: 20px;
}

.hero-trust-item strong {
  color: var(--text-inverse);
  font-weight: 700;
}

/* ==========================================================================
   Services
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 700px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--service-tint, var(--amber-100)) 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}

.service-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
}

.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* These two photos have their subject near the top — anchor the crop there so
   heads aren't cut off. */
.service-photo img[src*="electrical.jpg"],
.service-photo img[src*="automation.jpg"] {
  object-position: 50% 0%;
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--service-tint, var(--amber-100));
  color: var(--service-color, var(--amber-600));
  position: absolute;
  left: 24px;
  bottom: 0;
  transform: translateY(50%);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.service-icon .icon {
  width: 28px;
  height: 28px;
}

.service-body {
  padding: 32px 28px 28px;
  position: relative;
  z-index: 1;
}

.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.service-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.service-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.service-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text);
}

.service-list .icon {
  width: 16px;
  height: 16px;
  color: var(--teal-600);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .service-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   About
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: start;
}

.about-visual {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--navy-800), var(--navy-900));
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 22px;
  overflow: hidden;
}

.about-visual::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(251, 164, 92, 0.35), transparent 70%);
}

.about-visual-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-inverse);
  font-weight: 700;
  font-family: var(--font-display);
}

.about-visual-badge .icon {
  width: 26px;
  height: 26px;
  color: var(--amber-500);
}

.about-visual-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-visual-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-inverse-muted);
  font-size: 0.92rem;
}

.about-visual-list .icon {
  width: 20px;
  height: 20px;
  color: var(--teal-400);
  flex-shrink: 0;
  margin-top: 2px;
}

.about-content .section-eyebrow {
  margin-bottom: 14px;
}

.about-content h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem);
}

.about-content > p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 54ch;
}

.about-certs {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.about-certs-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.about-certs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.about-cert {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 200px;
}

.about-cert .icon {
  width: 22px;
  height: 22px;
  color: var(--amber-600);
  flex-shrink: 0;
}

.about-cert strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
}

.about-cert span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}

.about-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.about-point .icon {
  width: 22px;
  height: 22px;
  color: var(--amber-600);
  flex-shrink: 0;
  margin-top: 2px;
}

.about-point h4 {
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.about-point p {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 940px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-points {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Process
   ========================================================================== */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: process;
}

.process-step {
  position: relative;
  padding-top: 8px;
}

.process-step::before {
  counter-increment: process;
  content: "0" counter(process);
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--border-dark);
  display: block;
  margin-bottom: 10px;
}

.process-step h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.process-step p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.process-connector {
  display: none;
}

@media (min-width: 900px) {
  .process-grid {
    position: relative;
  }

  .process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    left: calc(100% - 6px);
    width: calc(28px + 2px);
    height: 2px;
    background: var(--border);
  }
}

@media (max-width: 900px) {
  .process-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
}

@media (max-width: 560px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Service areas
   ========================================================================== */

.areas-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.area-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.area-pill .icon {
  width: 16px;
  height: 16px;
  color: var(--amber-600);
}

/* ==========================================================================
   Suppliers
   ========================================================================== */

.suppliers-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.suppliers-label {
  /* Same eyebrow-with-dashes treatment as .section-eyebrow (see above),
     duplicated rather than shared since this one centers under the
     suppliers bar instead of left-aligning above a heading. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-600);
}

.suppliers-label::before,
.suppliers-label::after {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.suppliers-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  row-gap: 40px;
}

.supplier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 110px;
}

.supplier-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 52px;
}

.supplier-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Ubiquiti's mark is a small square icon (no wordmark, unlike every
   other logo in this row), so even rendered as large as the box height
   allows, it leaves far more side margin than the wordmark logos next
   to it — centering can't fix that aspect-ratio mismatch on its own.
   Let it render close to full box height, and pull its column closer
   to its neighbors directly to close the resulting gap. */
.supplier-logo[src*="ubiquiti"] {
  max-width: 95%;
  max-height: 95%;
}

.supplier:has(.supplier-logo[src*="ubiquiti"]) {
  margin: 0 -42px;
}

/* Shelly's wide, short wordmark fills the full box width with zero side
   margin — same as its neighbor Bosch, so with nothing to cushion the
   gap between them they read as noticeably closer together than every
   other pair in the row. Scale it down so it gets natural side margin
   like the other logos. */
.supplier-logo[src*="shelly"] {
  max-width: 78%;
}

.supplier:hover .supplier-logo {
  filter: grayscale(0);
  opacity: 1;
}

.supplier-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--navy-600);
  opacity: 0.8;
}

/* ==========================================================================
   Projects (before / after comparison)
   ========================================================================== */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-card h3 {
  font-size: 1.1rem;
  color: var(--text);
}

.project-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.compare {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  box-shadow: var(--shadow-md);
  background: var(--surface);
}

.compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.compare-before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* These ultra-wide photos have their subject (the wallbox charger) on the left
   edge — anchor the crop there instead of the default centered crop. */
.compare-img[src*="evcharger-"] {
  object-position: left;
}

.compare-tag {
  position: absolute;
  top: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(28, 27, 26, 0.65);
  color: var(--text-inverse);
  pointer-events: none;
}

.compare-tag--before {
  left: 14px;
}

.compare-tag--after {
  right: 14px;
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 0;
  transform: translateX(-50%);
}

.compare-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--card);
  transform: translateX(-50%);
}

.compare-handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: var(--shadow-md);
  color: var(--navy-800);
}

.compare-handle-arrow {
  width: 10px;
  height: 10px;
}

.compare-handle-arrow--left {
  transform: scaleX(-1);
}

@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CTA banner
   ========================================================================== */

.cta-banner {
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700) 55%, var(--teal-600));
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: -60% -10% auto auto;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 101, 21, 0.35), transparent 70%);
}

.cta-banner-text {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.cta-banner h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  color: var(--text-inverse);
}

.cta-banner p {
  color: var(--text-inverse-muted);
  margin: 0;
}

.cta-banner-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 800px) {
  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 28px;
  }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: stretch;
}

/* The visible "card" box around the whole contact form — deliberately on
   this wrapper, not on <form> itself, since the Send button + Turnstile
   widget now live outside the <form> (see the HTML comment near them)
   but still need to visually sit inside the same card. */
.contact-form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.form-field .required {
  color: var(--amber-600);
}

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}

.form-field select {
  /* Safari ignores vertical padding on a native <select> and renders it
     at a fixed, much shorter height than a same-padded <input> —
     appearance:none opts out of native chrome (which also drops the
     OS-drawn arrow, replaced here with a matching custom one) so it
     sizes the same as the phone field next to it in every browser. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b5854' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 18px;
  padding-right: 42px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--amber-500);
  box-shadow: 0 0 0 4px rgba(229, 101, 21, 0.16);
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* Honeypot: off-screen (not display:none — some bots specifically skip
   display:none fields) rather than visually hidden in place, so it never
   affects layout and real users never see or tab into it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.form-consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

.form-consent a {
  color: var(--amber-500);
  text-decoration: underline;
}

.form-consent a:hover {
  text-decoration: none;
}

/* Send button and the Turnstile widget occupy the exact same slot: only
   the button's own visibility is toggled by JS (.is-verifying), so the
   widget appears right where the button was without the layout jumping.
   The widget's *own* container is deliberately left alone (always
   display:flex) rather than force-hidden with our own CSS — Turnstile
   already collapses itself to 0 height at rest (appearance:
   interaction-only), and toggling display:none on it ourselves was
   interfering with turnstile.reset() between attempts, causing a stale
   token to be replayed on the next submit instead of a fresh check. */
.form-submit {
  display: grid;
  min-height: 54px;
}

.form-submit > * {
  grid-area: 1 / 1;
}

.form-submit .cf-turnstile {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-submit.is-verifying .btn {
  display: none;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 14px;
  text-align: center;
}

.form-status {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.form-status.is-visible {
  display: flex;
}

.form-status.is-success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.form-status .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.contact-info-card {
  background: var(--navy-900);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: 36px;
  height: 100%;
  box-sizing: border-box;
}

.contact-info-card h3 {
  color: var(--text-inverse);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(247, 246, 244, 0.1);
}

.contact-line:first-of-type {
  border-top: none;
  padding-top: 0;
}

.contact-line .icon {
  width: 22px;
  height: 22px;
  color: var(--amber-500);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-line strong {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-inverse-muted);
  margin-bottom: 3px;
}

.contact-line a,
.contact-line span {
  font-size: 0.96rem;
  color: var(--text-inverse);
}

.contact-line a:hover {
  color: var(--amber-500);
}

.contact-line-body {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

.contact-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.whatsapp-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.contact-line .whatsapp-logo {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  transition: opacity 0.15s ease;
}

.contact-line a:hover .whatsapp-logo {
  opacity: 0.85;
}

@media (max-width: 940px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .contact-form {
    padding: 26px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--text-inverse-muted);
  padding: 72px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(247, 246, 244, 0.08);
}

.footer-brand .brand {
  color: var(--amber-500);
  margin-bottom: 14px;
}

.footer-brand p {
  font-size: 0.9rem;
  max-width: 32ch;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(247, 246, 244, 0.08);
  border: 1px solid rgba(247, 246, 244, 0.16);
  color: var(--text-inverse-muted);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover {
  color: var(--text-inverse);
  background: var(--amber-500);
  border-color: var(--amber-500);
}

.footer-social .icon {
  width: 18px;
  height: 18px;
}

.footer-col h4 {
  color: var(--text-inverse);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a,
.footer-col span {
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--amber-500);
}

.footer-bottom {
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
}

.footer-bottom-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-bottom-links a,
.footer-bottom-links button {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.footer-bottom-links a:hover,
.footer-bottom-links button:hover {
  color: var(--amber-500);
}

.footer-lang {
  display: flex;
  gap: 8px;
}

.footer-lang a {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(247, 246, 244, 0.14);
  font-size: 0.8rem;
  font-weight: 600;
}

.footer-lang a[aria-current="true"] {
  background: var(--amber-500);
  color: var(--ink);
  border-color: var(--amber-500);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Scroll reveal animation
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.14s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.2s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.26s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Responsive base
   ========================================================================== */

@media (max-width: 900px) {
  section {
    padding: 72px 0;
  }

  .services-grid {
    gap: 18px;
  }
}

@media (max-width: 640px) {
  section {
    padding: 56px 0;
  }

  .container {
    padding: 0 18px;
  }
}

/* ==========================================================================
   Legal pages (privacy / cookies)
   ========================================================================== */

.legal-hero {
  padding: calc(var(--header-h) + 56px) 0 40px;
  background: var(--navy-900);
  color: var(--text-inverse);
}

.legal-hero h1 {
  margin-bottom: 8px;
}

.legal-hero p {
  color: var(--text-inverse-muted);
  margin: 0;
}

.legal-content {
  max-width: 720px;
  padding-top: 56px;
  padding-bottom: 96px;
}

.legal-content h2 {
  font-size: 1.3rem;
  margin-top: 2.2em;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.05rem;
  margin-top: 1.6em;
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
}

.legal-content ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.legal-content li {
  margin-bottom: 0.4em;
}

.legal-content a {
  color: var(--amber-600);
  font-weight: 600;
}

.legal-content .legal-updated {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2.5em;
}

/* ==========================================================================
   Careers / "Colabora con nosotros" page
   ========================================================================== */

/* Overrides the base <section> 96px top/bottom padding — this page's
   sections sit much closer together than a typical marketing page. */
.careers-section {
  padding: 36px 0;
}

.careers-content {
  max-width: 760px;
}

.careers-content > p {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 62ch;
}

.careers-photo {
  margin-bottom: 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.careers-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Keeps the hero text and the CTA banner the same width as the cards in
   .careers-content (760px), instead of stretching to the full .container
   width like they do on other pages. */
.careers-narrow {
  max-width: 760px;
}

.careers-content .about-certs-grid.is-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}

@media (max-width: 560px) {
  .careers-content .about-certs-grid.is-2col {
    grid-template-columns: 1fr;
  }
}

.careers-callout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 40px;
  padding: 24px 26px;
  background: var(--card);
  border: 1px solid var(--amber-500);
  border-radius: var(--radius);
}

.careers-callout .icon {
  width: 30px;
  height: 30px;
  color: var(--amber-600);
  flex-shrink: 0;
  margin-top: 2px;
}

.careers-callout h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.careers-callout p {
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */

.cookie-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(13, 12, 11, 0.72);
  backdrop-filter: blur(2px);
}

.cookie-backdrop[hidden] {
  display: none;
}

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  max-width: 480px;
  max-height: fit-content;
  margin: 0 auto;
  background: var(--navy-900);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.cookie-banner p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-inverse-muted);
}

.cookie-banner a {
  color: var(--text-inverse);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.footer-bottom-links button {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
}

@media (max-width: 560px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    padding: 20px;
  }

  .cookie-banner-actions {
    width: 100%;
  }

  .cookie-banner-actions .btn {
    flex: 1;
  }
}