/* ===== BOTONES ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-4); border-radius: var(--radius-card); font-family: var(--font-heading); font-weight: 600; font-size: 1rem; text-decoration: none; border: none; cursor: pointer; transition: all var(--transition-normal); min-height: 48px; gap: var(--space-1); }
.btn-primary { background-color: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background-color: var(--color-accent); transform: translateY(-2px); }
.btn-secondary { background-color: var(--color-warm); color: var(--color-white); }
.btn-secondary:hover { background-color: #B85A1F; transform: translateY(-2px); }
.btn-tertiary { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.btn-tertiary:hover { background-color: var(--color-primary); color: var(--color-white); }

/* ===== NAVEGACIÓN ===== */
/* Fixed navbar - always visible at top, with main content offset to prevent overlap */
.navbar {
  background-color: var(--color-white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

.navbar .container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 12px var(--container-padding);  /* Reduced from var(--space-3) (24px) for more compact header */
}

/* Offset main content to account for fixed navbar */
/* This ensures hero is fully visible and not cropped */
main#main-content {
  margin-top: 64px; /* Navbar height: logo (40px) + vertical padding (12px × 2) = 64px */
}

.nav-brand { justify-self: start; position: relative; z-index: 999; }
.nav-menu { justify-self: end; }
.nav-actions {
  justify-self: end;
  margin-left: clamp(12px, 2vw, 24px);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.logo { font-family: var(--font-brand); font-size: 1.5rem; font-weight: 900; color: var(--color-primary); text-decoration: none; }
.logo-image { display: block; height: 40px; width: auto; transition: filter 0.3s ease; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }

.nav-list {
  display: flex;
  list-style: none;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 2vw, 32px);
  flex-wrap: nowrap; /* Never wrap - switch to hamburger instead */
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-1) var(--space-2);
  border-radius: 8px;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}

.nav-link:hover { color: var(--color-accent); background-color: rgba(11, 63, 34, 0.1); }
.nav-link.active { color: var(--color-accent); background-color: rgba(11, 63, 34, 0.1); }

.primary-nav { justify-self: end; }
.actions { margin-left: clamp(12px, 2vw, 24px); }

.primary-nav .nav-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 1.2vw, 18px);
}

.primary-nav .nav-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  padding-inline: clamp(8px, 0.9vw, 12px);
  padding-block: 12px;
}

.primary-nav .nav-list a.cta {
  height: 48px;  /* Match language button height */
  padding: 0 20px;  /* Horizontal padding only, vertical centering via flexbox */
  border-radius: 12px;  /* Match language button corner radius */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  background: var(--color-primary);
  color: var(--color-white);
}

@media (min-width: 1280px) {
  .primary-nav .nav-list { gap: clamp(6px, 1vw, 14px); }
  .primary-nav .nav-list a { padding-inline: clamp(6px, 0.7vw, 10px); }
}

/* ===== SHARED HEADER ICON BUTTON STYLES ===== */
/* Common sizing for language toggle and hamburger */
.header-icon-btn {
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
}

/* Language toggle - always visible */
.lang-toggle {
  background: none;
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary);
  gap: 8px;
}

.lang-toggle:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.caret { display: none !important; }

.lang-toggle.flag-only {
  padding: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

/* Text fallback for language toggle */
.lang-toggle .lang-text {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  z-index: 1;
  position: relative;
}

/* Hide text when flag background is loaded */
.lang-toggle.flag-only[style*="background-image"] .lang-text {
  opacity: 0;
}

/* Hamburger toggle - same size as language button */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background-color: transparent;
  padding: 0;
}

/* Remove default focus outline, use custom style */
.nav-toggle:focus {
  outline: none;
}

/* Custom focus-visible and hover states with rounded shadow */
.nav-toggle:focus-visible,
.nav-toggle:hover {
  box-shadow: 0 0 0 3px rgba(26, 25, 72, 0.15);
  border-color: var(--color-accent);
}

/* Hamburger lines - default (closed) state */
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: all var(--transition-normal);
}

/* Inverted/negative state when menu is open */
.nav-toggle[aria-expanded="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.nav-toggle[aria-expanded="true"] span {
  background-color: var(--color-white);
}

/* ===== HAMBURGER MENU BREAKPOINT (≤1150px) ===== */
@media (max-width: 1150px) {
  /* Switch to mobile layout */
  .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* --- Navbar inverts to dark when menu is open --- */
  .navbar {
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .navbar.menu-open {
    background-color: var(--color-primary);
    box-shadow: none;
  }

  /* Logo inverts to white when menu is open */
  .navbar.menu-open .logo-image {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
  }

  /* Language toggle inverts when menu is open */
  .navbar.menu-open .lang-toggle {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .navbar.menu-open .lang-toggle .lang-text {
    color: rgba(255, 255, 255, 0.9);
  }

  /* ---- Full-screen dark overlay menu ---- */
  .nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background:
      radial-gradient(ellipse 70% 50% at 15% 85%, rgba(11, 63, 34, 0.18), transparent),
      radial-gradient(ellipse 50% 40% at 85% 15%, rgba(198, 113, 41, 0.08), transparent),
      var(--color-primary);
    z-index: 998;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px clamp(2rem, 8vw, 5rem) clamp(3rem, 6vh, 5rem);
    box-sizing: border-box;
    /* Entrance: clip from top (wipe reveal) */
    clip-path: inset(0 0 100% 0);
    opacity: 1;
    visibility: hidden;
    transition: clip-path 0.55s cubic-bezier(0.77, 0, 0.175, 1),
                visibility 0s 0.55s;
    pointer-events: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Decorative grid texture on the overlay */
  .nav-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image:
      linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
  }

  /* Copper accent line at top */
  .nav-menu::after {
    content: '';
    position: absolute;
    top: 64px;
    left: clamp(2rem, 8vw, 5rem);
    right: clamp(2rem, 8vw, 5rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 113, 41, 0.3), transparent);
    pointer-events: none;
    z-index: 0;
  }

  .nav-menu.active {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    pointer-events: auto;
    transition: clip-path 0.55s cubic-bezier(0.77, 0, 0.175, 1),
                visibility 0s 0s;
  }

  /* ---- Vertical menu layout ---- */
  .nav-list {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
  }

  /* Staggered entrance — items sweep up from below with a dramatic reveal */
  .nav-list li {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0s;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav-list li:last-child {
    border-bottom: none;
  }

  .nav-menu.active .nav-list li {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger delays — dramatic cascade timing */
  .nav-menu.active .nav-list li:nth-child(1) { transition-delay: 0.15s; }
  .nav-menu.active .nav-list li:nth-child(2) { transition-delay: 0.21s; }
  .nav-menu.active .nav-list li:nth-child(3) { transition-delay: 0.27s; }
  .nav-menu.active .nav-list li:nth-child(4) { transition-delay: 0.33s; }
  .nav-menu.active .nav-list li:nth-child(5) { transition-delay: 0.39s; }
  .nav-menu.active .nav-list li:nth-child(6) { transition-delay: 0.45s; }
  .nav-menu.active .nav-list li:nth-child(7) { transition-delay: 0.51s; }

  /* ---- Premium nav links — large, editorial typography ---- */
  .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(14px, 2.5vh, 22px) 0;
    text-align: left;
    border-radius: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 3.5vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                letter-spacing 0.3s ease;
    position: relative;
  }

  /* Copper accent bar on hover — slides in from left */
  .nav-link::before {
    content: '';
    position: absolute;
    left: -clamp(2rem, 8vw, 5rem);
    top: 50%;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    width: clamp(1rem, 4vw, 2.5rem);
    height: 2px;
    background: var(--color-warm);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    color: #fff;
    transform: translateX(6px);
    letter-spacing: 0.01em;
  }

  .nav-link:hover::before,
  .nav-link:focus-visible::before {
    transform: translateY(-50%) scaleX(1);
  }

  /* Active page — bright white with copper accent */
  .nav-link.active {
    color: #fff;
    background: none;
  }

  .nav-link.active::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-warm);
    margin-left: 4px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(198, 113, 41, 0.4);
  }

  /* CTA link — copper gradient button at bottom */
  .nav-link.cta {
    margin-top: clamp(16px, 3vh, 32px);
    background: linear-gradient(135deg, var(--color-warm), #d4873f);
    color: #fff !important;
    text-align: center;
    border-radius: 14px;
    font-weight: 700;
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    padding: 16px 32px;
    letter-spacing: 0.04em;
    display: inline-flex;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(198, 113, 41, 0.25);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease;
    border-bottom: none;
  }

  .nav-link.cta::before {
    display: none;
  }

  .nav-link.cta::after {
    display: none;
  }

  .nav-link.cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 32px rgba(198, 113, 41, 0.4);
    letter-spacing: 0.04em;
  }

  /* ---- Show hamburger button ---- */
  .nav-toggle {
    display: flex !important;
    z-index: 999;
    position: relative;
  }

  /* Hamburger → X morphing animation */
  .nav-toggle span {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease,
                background-color 0.3s ease;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* ---- Header icon buttons — polished at mobile ---- */
  .header-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 999;
  }

  /* Flag toggle — cleaner rendering */
  .lang-toggle.flag-only {
    border-color: var(--color-neutral);
    background-size: 110%;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease;
  }

  .lang-toggle.flag-only:hover {
    border-color: var(--color-primary);
    transform: scale(1.05);
  }

  .lang-toggle.flag-only:active {
    transform: scale(0.97);
  }
}

/* ===== FOOTER ===== */
.footer {
  background:
    radial-gradient(ellipse 80% 60% at 10% 90%, rgba(11, 63, 34, 0.12), transparent),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(198, 113, 41, 0.06), transparent),
    var(--color-primary);
  color: var(--color-white);
  padding: 0;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 80px) clamp(24px, 4vw, 48px) clamp(24px, 3vh, 40px);
}

/* Brand block */
.footer__brand {
  margin-bottom: clamp(24px, 4vh, 40px);
}

.footer__logo {
  height: clamp(28px, 3.5vw, 38px);
  width: auto;
  display: block;
  margin-bottom: 10px;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.footer__tagline {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}

/* Divider */
.footer__divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(198, 113, 41, 0.3), rgba(255, 255, 255, 0.08) 50%, transparent);
  margin-bottom: clamp(32px, 5vh, 48px);
}

/* Columns grid */
.footer__columns {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-bottom: clamp(40px, 5vh, 56px);
}

/* Column headings */
.footer__heading {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-warm);
  margin-bottom: 20px;
}

/* Navigation column */
.footer__nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}

.footer__nav a {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
  display: block;
  padding: 2px 0;
}

.footer__nav a:hover {
  color: #fff;
}

/* Contact column */
.footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__contact-link:hover {
  color: #fff;
}

.footer__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.55;
}

.footer__linkedin .footer__icon {
  opacity: 0.8;
}

.footer__contact-link:hover .footer__icon {
  opacity: 1;
}

.footer__response {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 8px;
  font-style: italic;
}

/* Location column */
.footer__address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}

.footer__address p {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
}

.footer__address strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* Bottom bar */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: clamp(16px, 2vh, 24px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer__legal button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__legal button:hover {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
}

/* Blocker warning — visible by default, hidden by privacy-modal.js once it runs */
.pp-blocked-hint {
  display: block;
  font-size: 0.68rem;
  font-style: italic;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.25);
}

.footer__legal .pp-blocked-hint {
  display: inline;
  margin-top: 0;
  margin-left: 4px;
}

/* Contact page context — dark background button, lighter text */
.ct-trust__line .pp-blocked-hint {
  display: inline;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0;
  margin-left: 4px;
}

/* Footer responsive — Tablet */
@media (max-width: 1024px) {
  .footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
  }
  .footer__nav {
    grid-template-columns: 1fr;
  }
}

/* Footer responsive — Mobile */
@media (max-width: 767px) {
  .footer__columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 6px;
  }
}

/* ===== PRIVACY POLICY MODAL ===== */
.pp-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pp-modal.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.pp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 30, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pp-modal__dialog {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 740px;
  max-height: 85vh;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  outline: none;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pp-modal.is-open .pp-modal__dialog {
  transform: translateY(0) scale(1);
}

/* Header */
.pp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-neutral);
  flex-shrink: 0;
}
.pp-modal__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}
.pp-modal__close-x {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.pp-modal__close-x:hover {
  background: var(--color-neutral);
}
.pp-modal__close-x svg {
  width: 20px;
  height: 20px;
}

/* Body — scrollable */
.pp-modal__body {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  color: var(--color-text);
}
.pp-modal__body h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: var(--space-4) 0 var(--space-1) 0;
}
.pp-modal__body h3:first-child {
  margin-top: 0;
}
.pp-modal__body p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-light);
  margin: 0 0 var(--space-2) 0;
}
.pp-modal__body ul {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-light);
  margin: 0 0 var(--space-2) 0;
  padding-left: var(--space-4);
}
.pp-modal__body ul li {
  margin-bottom: 4px;
}
.pp-modal__body a {
  color: var(--color-warm);
  text-decoration: none;
  font-weight: 600;
}
.pp-modal__body a:hover {
  text-decoration: underline;
}
.pp-modal__update {
  font-size: 0.9rem !important;
  color: var(--color-text-muted) !important;
  font-style: italic;
}
.pp-modal__email-block {
  padding: var(--space-2) var(--space-3);
  background: rgba(198, 113, 41, 0.07);
  border-left: 3px solid var(--color-warm);
  border-radius: 0 8px 8px 0;
}

/* Footer */
.pp-modal__footer {
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-neutral);
  text-align: right;
  flex-shrink: 0;
}
.pp-modal__close-btn {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-4);
  min-height: 42px;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pp-modal__close-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Responsive — mobile */
@media (max-width: 767px) {
  .pp-modal__dialog {
    width: 100%;
    max-width: none;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }
  .pp-modal__header {
    padding: var(--space-3) var(--space-3) var(--space-2);
  }
  .pp-modal__body {
    padding: var(--space-3);
  }
  .pp-modal__footer {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pp-modal,
  .pp-modal__dialog {
    transition: none;
  }
}

/* ===== FORMULARIOS ===== */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-1); }
.form-input, .form-textarea, .form-select { width: 100%; padding: var(--space-2) var(--space-3); border: 2px solid var(--color-neutral); border-radius: 16px; font-family: var(--font-body); font-size: 1rem; transition: border-color var(--transition-fast); min-height: 48px; }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(11, 63, 34, 0.2); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-required { color: var(--color-warm); }

/* ===== HERO ACTIONS (shared) ===== */
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.hero-actions .btn { background-color: var(--color-white); color: var(--color-primary); }
.hero-actions .btn:hover { background-color: var(--color-neutral); transform: translateY(-2px); }
.hero-actions .btn-secondary { background-color: var(--color-warm); color: var(--color-white); }
.hero-actions .btn-secondary:hover { background-color: #B85A1F; }

/* ============================================================================
   LOGO MARQUEE v5.0.1 — HORIZONTAL INFINITE SCROLL WITH PER-LOGO CARDS
   ============================================================================
   
   **Single Source of Truth:** src/assets/data/logo-size-map.json
   All logo sizing multipliers are defined in JSON. CSS reads from JSON values.
   
   **Per-Logo Card System:**
   - Each card sized to 1.05× its logo's scaled dimensions (BOTH width AND height)
   - Card width = ceil(logo_width × 1.05) (rounded up to whole pixels)
   - Card height = ceil(logo_height × 1.05) (rounded up to whole pixels)
   - Logos centered with object-fit: contain (no cropping)
   - Variable card widths AND heights create organic, logo-appropriate sizing
   
   **Equal Spacing:**
   - Single --logo-gap variable applied between all cards
   - Spacing visually equal despite variable card widths
   - No ad-hoc margins or per-logo adjustments
   
   **Marquee Features:**
   - Seamless infinite loop (duplicate-set pattern)
   - GPU-accelerated transform (no layout thrash)
   - Pause on hover/touch
   - Reduced-motion support
   - No horizontal page scroll or CLS
   - Loop distance calculated from sum of all card widths + gaps
   
   **Architecture:**
   .logo-marquee        → Viewport (overflow container, edge fades)
   .logo-marquee__track → Animated track (2× logo set, translateX)
   .client-logo         → Per-logo card container (variable dimensions)
   img                  → Logo image (scaled per src/assets/data/logo-size-map.json)
   
   **Customization:**
   Adjust rail height: --logo-rail-h-desktop / --logo-rail-h-mobile
   Adjust spacing: --logo-gap (single variable for all cards)
   Adjust logo scale: Update JSON first, then sync CSS scale() rules
   
   **Documentation:** /docs/engineering/LOGO-MARQUEE-v5.0-PER-LOGO-CARDS.md
   
   ============================================================================ */

:root {
  /* ============================================================================
     CLIENTS MARQUEE — DESKTOP SOURCE OF TRUTH (DO NOT EDIT)
     Date locked: October 17, 2025
     ============================================================================
     
     These Desktop values are the CANONICAL source of truth for all logo sizes,
     chip/backplate dimensions, and manual alignment offsets.
     
     Mobile derives all values by applying MOBILE_SCALE (see mobile breakpoint).
     Logos, chips, and offsets scale proportionally to preserve visual alignment.

     To adjust sizes: edit Desktop values below.
     To adjust mobile scale: change --mobile-scale-factor in @media (max-width: 767px).
     
     ============================================================================ */
  
  /* Control variables */
  --logo-gap: clamp(20px, 2.5vw, 32px);       /* Desktop/iPad gap (50% reduced from 40-64px) */
  --marquee-duration-base: 36s;                /* Base scroll duration (Desktop/iPad) */
  --marquee-speed-multiplier: 1;               /* Speed adjustment multiplier (1 = normal speed) */
  --logo-duration: calc(var(--marquee-duration-base) * var(--marquee-speed-multiplier)); /* Computed duration */
  --logo-count: 11;                            /* Number of unique logos */
  --logo-pad-x: clamp(24px, 4.5vw, 40px);     /* Horizontal section padding */
  --logo-chip-pad: 10px;                       /* Padding inside each logo chip */
  
  /* Dynamic values (set by JS at runtime) */
  --marquee-loop-distance: 0px;                /* Loop distance for seamless animation */
  --clients-title-scale: 1;                    /* Title size multiplier (fine-tune ±10%) */
  --clients-center-nudge: 0px;                 /* Vertical nudge for title↔marquee center alignment (±2px max) */
  --clientes-gap-mobile: 0px;                 /* Mobile-only: fixed gap between watermark phrase and marquee (consistent across all mobile viewports 320-767px) */
  
  /* ===== ADAPTIVE SIZING SYSTEM (v8.0) ===== */
  /* MOBILE_SCALE: canonical minimum size (never go smaller than this) */
  --mobile-scale: 0.49;  /* Lowered to allow tablet/desktop at 49% — HARD MINIMUM */
  
  /* CLIENT_STAGE_SCALE: current desired scale (can be fluid or manual) */
  /* Default = 1 (full Desktop). Set to 0.70 at Mobile breakpoint. */
  /* Can interpolate smoothly between breakpoints for fluid sizing. */
  --client-stage-scale: 1;
  
  /* EFFECTIVE_SCALE: clamped scale applied to all sizes */
  /* Ensures we never go below MOBILE_SCALE or above 1 (Desktop) */
  --effective-scale: clamp(var(--mobile-scale), var(--client-stage-scale), 1);

  /* Clientes marquee structural measurements (Desktop baseline) */
  --clients-marquee-card-height-base: 231px;
  --clients-marquee-extra-top: 40px;
  --clients-marquee-extra-bottom: 60px;
  --clients-marquee-padding-top: 30px;
  
  /* Reserved for future per-logo manual adjustments (currently unused) */
  --chip-offset-x: 0px;
  --chip-offset-y-bottom: 0px;
  --logo-offset-y-bottom: 0px;
  
  /* ===== DESKTOP BASE DIMENSIONS (SOURCE OF TRUTH — DO NOT EDIT) ===== */
  /* These are the canonical Desktop sizes. All current sizes derive from these
     via: current = base × EFFECTIVE_SCALE
     
     EFFECTIVE_SCALE = clamp(MOBILE_SCALE, CLIENT_STAGE_SCALE, 1)
     - At Desktop: CLIENT_STAGE_SCALE = 1 → EFFECTIVE = 1 → full size
     - At Mobile: CLIENT_STAGE_SCALE = 0.70 → EFFECTIVE = 0.70 → 70% size
     - Never goes below MOBILE_SCALE (0.70) or above 1 (Desktop)
  */
  
  /* Mars: AR 3.390728 — Cumulative scale 0.5472 (0.80 × 0.90 × 0.95 × 0.80 = 45.28% reduction) — Step applied: ×0.80 (20% reduction) */
  --logo-w-mars-base: 178.120166px;
  --logo-h-mars-base: 52.531px;
  --chip-w-mars-base: 194.685005px;
  --chip-h-mars-base: 52.531px;
  
  /* P&G: AR 1.000000 */
  --logo-w-pg-base: 150px;
  --logo-h-pg-base: 150px;
  --chip-w-pg-base: 170px;
  --chip-h-pg-base: 170px;
  
  /* Beiersdorf: AR 6.122449 — Cumulative scale 0.589 (0.80 × 0.95 × 0.90 × 0.80 = 41.12% reduction) — Step applied: ×0.80 (20% reduction) */
  --logo-w-beiersdorf-base: 314.081685px;
  --logo-h-beiersdorf-base: 51.3px;
  --chip-w-beiersdorf-base: 335.256615px;
  --chip-h-beiersdorf-base: 65.151px;
  
  /* Red Bull: AR 1.777778 */
  --logo-w-redbull-base: 213.336px;
  --logo-h-redbull-base: 120px;
  --chip-w-redbull-base: 224.0px;
  --chip-h-redbull-base: 145px;
  
  /* Bacardi: AR 1.777778 */
  --logo-w-bacardi-base: 266.67px;
  --logo-h-bacardi-base: 150px;
  --chip-w-bacardi-base: 230px;
  --chip-h-bacardi-base: 157.5px;
  
  /* Sunstar: AR 1.000000 */
  --logo-w-sunstar-base: 189px;
  --logo-h-sunstar-base: 189px;
  --chip-w-sunstar-base: 189px;
  --chip-h-sunstar-base: 130px;
  
  /* Unilever: AR 0.909091 */
  --logo-w-unilever-base: 150px;
  --logo-h-unilever-base: 165px;
  --chip-w-unilever-base: 165px;
  --chip-h-unilever-base: 178px;
  
  /* FIFCO: AR 2.668790 */
  --logo-w-fifco-base: 320.256px;
  --logo-h-fifco-base: 120px;
  --chip-w-fifco-base: 336.27px;
  --chip-h-fifco-base: 135px;
  
  /* Herdez: AR 1.000000 */
  --logo-w-herdez-base: 180px;
  --logo-h-herdez-base: 180px;
  --chip-w-herdez-base: 150px;
  --chip-h-herdez-base: 150px;
  
  /* Diageo: AR 4.623494 — Cumulative scale 0.646 (0.80 × 0.95 × 0.85 = 35.4% reduction) — Step applied: ×0.85 (15% reduction) */
  --logo-w-diageo-base: 224.008575px;
  --logo-h-diageo-base: 48.45px;
  --chip-w-diageo-base: 242.313793px;
  --chip-h-diageo-base: 68.153px;
  
  /* ===== UNIFIED HEIGHT SYSTEM (matches diageo_logo) ===== */
  /* All logos now use the same height as diageo_logo, widths adjust automatically */
  --logo-uniform-height-base: 75px;  /* Same as diageo_logo base height */
  
  /* Duracell: AR 6.756757 — Cumulative scale 0.646 (0.80 × 0.95 × 0.85 = 35.4% reduction) — Step applied: ×0.85 (15% reduction) */
  --logo-w-duracell-base: 294.628326px;
  --logo-h-duracell-base: 43.605px;
  --chip-w-duracell-base: 317.112356px;
  --chip-h-duracell-base: 61.77375px;
  
  /* ===== COMPUTED DIMENSIONS (BASE × EFFECTIVE_SCALE) ===== */
  /* These are the actual sizes used by the layout.
     They adapt automatically when EFFECTIVE_SCALE changes. */
  
  /* Mars */
  --logo-w-mars: calc(var(--logo-w-mars-base) * var(--effective-scale));
  --logo-h-mars: calc(var(--logo-h-mars-base) * var(--effective-scale));
  --chip-w-mars: calc(var(--chip-w-mars-base) * var(--effective-scale));
  --chip-h-mars: calc(var(--chip-h-mars-base) * var(--effective-scale));
  
  /* P&G */
  --logo-w-pg: calc(var(--logo-w-pg-base) * var(--effective-scale));
  --logo-h-pg: calc(var(--logo-h-pg-base) * var(--effective-scale));
  --chip-w-pg: calc(var(--chip-w-pg-base) * var(--effective-scale));
  --chip-h-pg: calc(var(--chip-h-pg-base) * var(--effective-scale));
  
  /* Beiersdorf */
  --logo-w-beiersdorf: calc(var(--logo-w-beiersdorf-base) * var(--effective-scale));
  --logo-h-beiersdorf: calc(var(--logo-h-beiersdorf-base) * var(--effective-scale));
  --chip-w-beiersdorf: calc(var(--chip-w-beiersdorf-base) * var(--effective-scale));
  --chip-h-beiersdorf: calc(var(--chip-h-beiersdorf-base) * var(--effective-scale));
  
  /* Red Bull */
  --logo-w-redbull: calc(var(--logo-w-redbull-base) * var(--effective-scale));
  --logo-h-redbull: calc(var(--logo-h-redbull-base) * var(--effective-scale));
  --chip-w-redbull: calc(var(--chip-w-redbull-base) * var(--effective-scale));
  --chip-h-redbull: calc(var(--chip-h-redbull-base) * var(--effective-scale));
  
  /* Bacardi */
  --logo-w-bacardi: calc(var(--logo-w-bacardi-base) * var(--effective-scale));
  --logo-h-bacardi: calc(var(--logo-h-bacardi-base) * var(--effective-scale));
  --chip-w-bacardi: calc(var(--chip-w-bacardi-base) * var(--effective-scale));
  --chip-h-bacardi: calc(var(--chip-h-bacardi-base) * var(--effective-scale));
  
  /* Sunstar */
  --logo-w-sunstar: calc(var(--logo-w-sunstar-base) * var(--effective-scale));
  --logo-h-sunstar: calc(var(--logo-h-sunstar-base) * var(--effective-scale));
  --chip-w-sunstar: calc(var(--chip-w-sunstar-base) * var(--effective-scale));
  --chip-h-sunstar: calc(var(--chip-h-sunstar-base) * var(--effective-scale));
  
  /* Unilever */
  --logo-w-unilever: calc(var(--logo-w-unilever-base) * var(--effective-scale));
  --logo-h-unilever: calc(var(--logo-h-unilever-base) * var(--effective-scale));
  --chip-w-unilever: calc(var(--chip-w-unilever-base) * var(--effective-scale));
  --chip-h-unilever: calc(var(--chip-h-unilever-base) * var(--effective-scale));
  
  /* FIFCO */
  --logo-w-fifco: calc(var(--logo-w-fifco-base) * var(--effective-scale));
  --logo-h-fifco: calc(var(--logo-h-fifco-base) * var(--effective-scale));
  --chip-w-fifco: calc(var(--chip-w-fifco-base) * var(--effective-scale));
  --chip-h-fifco: calc(var(--chip-h-fifco-base) * var(--effective-scale));
  
  /* Herdez */
  --logo-w-herdez: calc(var(--logo-w-herdez-base) * var(--effective-scale));
  --logo-h-herdez: calc(var(--logo-h-herdez-base) * var(--effective-scale));
  --chip-w-herdez: calc(var(--chip-w-herdez-base) * var(--effective-scale));
  --chip-h-herdez: calc(var(--chip-h-herdez-base) * var(--effective-scale));
  
  /* Diageo */
  --logo-w-diageo: calc(var(--logo-w-diageo-base) * var(--effective-scale));
  --logo-h-diageo: calc(var(--logo-h-diageo-base) * var(--effective-scale));
  --chip-w-diageo: calc(var(--chip-w-diageo-base) * var(--effective-scale));
  --chip-h-diageo: calc(var(--chip-h-diageo-base) * var(--effective-scale));
  
  /* Duracell */
  --logo-w-duracell: calc(var(--logo-w-duracell-base) * var(--effective-scale));
  --logo-h-duracell: calc(var(--logo-h-duracell-base) * var(--effective-scale));
  --chip-w-duracell: calc(var(--chip-w-duracell-base) * var(--effective-scale));
  --chip-h-duracell: calc(var(--chip-h-duracell-base) * var(--effective-scale));
  
  /* ===== UNIFIED HEIGHT (COMPUTED) ===== */
  /* Responsive uniform height: base × effective-scale */
  --logo-uniform-height: calc(var(--logo-uniform-height-base) * var(--effective-scale));
}

/* ===== Logo Marquee Section (v8.7 — Two-Layer Layout) =====
   Two-layer stacking: "Clientes" watermark behind flowing marquee
   - Watermark: position absolute, z-index 0, top-left (FROZEN — do not edit)
   - Marquee: position absolute, z-index 1, bottom-aligned to watermark
   - Section: position relative (stacking context)
   - NO TOP PADDING: Starts immediately after Hero (seamless transition)
   - Section height calculated by JS to contain both layers
   ========================================================= */
.logo-marquee-section {
  /* Constrain to same max-width as all other page containers */
  max-width: var(--container-max-width, 1680px);
  margin-left: auto;
  margin-right: auto;

  /* Stacking context for layered layout */
  position: relative;
  overflow: visible;  /* Allow watermark to extend naturally */

  /* Remove inherited .section padding, add only bottom padding */
  padding-top: 0 !important;  /* Override .section padding, seamless with Hero */
  padding-bottom: var(--space-5, 3rem);
  
  /* Responsive marquee baseline position - scales with viewport */
  /* Uses clamp for fluid scaling between mobile and desktop */
  /* Mobile (375px): ~15vh ≈ 80px | Desktop (1440px): ~19.5vh capped at 220px (desktop -60px) */
  --marquee-fixed-bottom-position: clamp(80px, 19.5vh, 220px);
  
  /* Section height = baseline position + bottom padding */
  /* This ensures the section ends right at the baseline, next section starts after padding */
  height: calc(var(--marquee-fixed-bottom-position) + var(--space-5, 3rem));
}

/* Debug baseline removed after verification */

/* Visually hidden semantic heading (accessibility) */
.logo-marquee-section .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== Clients Watermark (v8.5 — Background Layer) =====
   Decorative "Clientes" as background behind flowing marquee
   - Absolutely positioned, out of layout flow
   - TOP-LEFT positioning for seamless transition from Hero
   - EVSA copper, Barlow Condensed Medium (weight 500)
   - Overlays behind marquee logos (visible between white chips)
   ======================================================= */
.clients-watermark {
  /* Positioning: absolute, out of flow, behind marquee */
  position: absolute;
  top: 30px;  /* 10px gap from Hero */
  left: 5px;
  z-index: 0;  /* Behind marquee (z-index 1) */
  
  /* EVSA copper color */
  color: var(--color-warm, #C67129);
  opacity: 0.85;  /* Subtle transparency for watermark/background effect */
  
  /* Responsive font sizing:
     Desktop/iPad: Auto-calibrated by JS to maintain visual proportion
     Mobile: Uses clamp formula (original CSS)
     
     On Desktop/iPad, --clients-title-font-size is set by clients-alignment-lock.js
     Falls back to clamp if JS doesn't run or on mobile
  */
  font-size: var(--clients-title-font-size, clamp(3.5rem, 15.4vw, 7rem));
  
  /* Heading font — matches hero title */
  font-family: var(--font-heading, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-weight: 600;  /* Bold to match hero headings */
  line-height: 1.0;  /* Tight line-height */
  letter-spacing: -0.015em;  /* Subtle tightening */
  text-transform: uppercase; /* Render as CLIENTES (without changing node) */
  
  /* Prevent wrapping */
  white-space: nowrap;
  
  /* No margin/padding (positioned absolutely) */
  margin: 0;
  padding: 0;
  
  /* Pointer events: allow clicks to pass through */
  pointer-events: none;
  
  /* Stability (no animations) */
  will-change: auto;
}

/* ===== MOBILE LAYOUT (≤767px) — Full-width marquee with heading above =====
   Position title "Elegido por empresas líderes" with precise spacing
   - Left: 1.5vw (1.5% inset from left edge)
   - Width: 50vw (occupies exactly 50% of viewport)
   - Right: 48.5vw remaining (1.5% + 50% + 48.5% = 100%)
   - Size: 40% of previous mobile title (60% reduction)
   - Marquee: 30% slower (duration × 1.428571)
   ======================================================= */
@media (max-width: 767px) {
  :root {
    /* Fine-tuning knobs for mobile title positioning */
    --clients-mobile-nudge-x: 0px;    /* Horizontal nudge (add to left position) */
    --clients-mobile-nudge-w: 0px;    /* Width adjustment if needed */

    /* Fixed vertical gap: Consistent across all mobile viewports
       ───────────────────────────────────────────────────────────────────────────
       NORMALIZED GAP STRATEGY:
       • Single source of truth for phrase-to-marquee spacing
       • Applied uniformly: 320px → 430px → 767px = same value (no scaling)
       • Prevents gap inconsistency across different mobile device widths
       • Maintains visual harmony without viewport-dependent growth
       • Positions marquee relative to watermark bottom (not vh-dependent)
       ─────────────────────────────────────────────────────────────────────────── */
    --clientes-gap-mobile: 0px;  /* Fixed gap between watermark and marquee across all mobile viewports (320px–767px) */

    /* Marquee speed control (mobile only) */
    --marquee-speed-multiplier: 1.428571;  /* 30% slower = duration × 1.428571 */
  }

  .logo-marquee-section .clients-watermark {
    /* Position: 1.5% from left edge, occupies 50% width (1.5% | 50% | 48.5% layout) */
    left: calc(1.5vw + var(--clients-mobile-nudge-x, 0px)) !important;

    /* Fixed width: 50% of viewport */
    width: 50vw !important;
    max-width: 50vw !important;

    /* Single line - no wrapping */
    white-space: nowrap !important;
    overflow: visible !important;

    /* Mobile sizing: 80px → 22vw → 160px */
    font-size: var(--clients-mobile-font-size, clamp(0.9rem, 3.96vw, 1.8rem)) !important;

    /* Slightly tighter spacing for mobile */
    letter-spacing: -0.02em;

    /* Remove uppercase transform - use sentence case */
    text-transform: none !important;

    /* Transform controlled by JS for exact fit (if needed) */
    transform: var(--clients-mobile-transform, none);
    transform-origin: left center;

    /* Ensure proper box model */
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
}

/* ============================================================================
   TABLET & DESKTOP LAYOUT (≥768px) — 1/3-2/3 Split with Proportional Scaling
   ============================================================================
   Two-column layout with heading left, marquee right, both vertically centered.

   Layout:
   - Left 1/3: "CLIENTES" heading (uppercase, vertically centered)
   - Right 2/3: Horizontal logos marquee (scrolling, vertically centered)
   - Proportional scaling: Tablet (768px) at 85% → Desktop (1024px+) at 100%
   - No overlap, no intermediate states
   ============================================================================ */
@media (min-width: 768px) {
  :root {
    /* Proportional scaling: 0.85 at 768px → 1.0 at 1024px → capped at 1.0 */
    /* Formula: 0.85 + (viewport_width - 768) * (0.15 / 256) */
    --clients-scale: clamp(0.85, calc(0.85 + (100vw - 768px) * 0.0005859375), 1.0);

    /* Logo scale: base × 0.76 (9% larger than mobile's 0.56) */
    --client-stage-scale: 0.76;
  }

  /* Constrain marquee to right 2/3 of section (left 1/3 for heading) */
  .logo-marquee {
    left: 33.333% !important;  /* Preserve original 1/3 proportion — 100% zoom baseline */
    right: 0 !important;       /* Fill remaining 66.667% */
    width: auto !important;    /* Width computed from left/right */
    max-width: none !important;
    margin-left: -2rem;        /* Slight overlap: closes gap at zoom-out without shifting 100% layout */
    z-index: 4;  /* Below CLIENTES watermark — logos tuck behind text */
    overflow: hidden;  /* Clip logos at left/right edges */
    /* Fade in from left edge (covers overlap zone), fade out at right */
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%) !important;
  }

  /* Heading: Fill left 1/3 plus scaled overlap */
  .logo-marquee-section .clients-watermark {
    /* Position: 10px from left edge for breathing room */
    left: 10px !important;

    /* Font-size calculated to make text naturally span 33.333vw + 5px */
    /* For "CLIENTES" (8 chars, condensed font), width/font-size ratio ≈ 4.45 */
    /* So font-size = (33.333vw + 5px) / 4.45 ≈ 7.5vw */
    font-size: clamp(3.6rem, 7.5vw, 6.8rem) !important;

    /* Desktop styling - restore from base, override mobile */
    text-transform: uppercase !important;  /* CLIENTES in uppercase */
    letter-spacing: -0.015em !important;   /* Desktop letter spacing */
    white-space: nowrap !important;
    overflow: visible !important;
    text-align: left;
    padding: 0 !important;
    padding-left: calc(5px * var(--clients-scale, 1)) !important;
    margin: 0 !important;
    transform: none !important;  /* Remove any mobile transforms */
    box-sizing: border-box !important;

    z-index: 5 !important;  /* Above marquee (z-index 4) — logos tuck behind CLIENTES text */
  }

  /* English: "CLIENTS" (7 chars) needs larger font-size to span the same 33.333vw as "CLIENTES" (8 chars).
     "CLIENTES" ratio ≈ 4.45 → 7.5vw fills 33.333vw.
     "CLIENTS" ratio ≈ 3.894 (= 4.45 × 7/8) → font-size = 33.333vw / 3.894 ≈ 8.571vw (= 7.5vw × 8/7).
     Clamp limits scaled by the same 8/7 factor. */
  html[lang="en"] .logo-marquee-section .clients-watermark {
    font-size: clamp(4.11rem, 8.571vw, 7.77rem) !important;
  }

  /* Section: Adjust baseline positioning with scaling */
  .logo-marquee-section {
    --marquee-fixed-bottom-position: calc(clamp(80px, 19.5vh, 280px) * var(--clients-scale) + 20px);

    /* Add scalable spacing above and below on desktop/iPad */
    /* Top: Scales from ~30px at 768px (35px × 0.85 = 29.75px) to 35px at 1024px+ */
    margin-top: clamp(29.75px, calc(29.75px + (100vw - 768px) * 0.0205078125), 35px) !important;
    /* Bottom: Scales from ~38px at 768px (45px × 0.85 = 38.25px) to 45px at 1024px+ */
    margin-bottom: clamp(38.25px, calc(38.25px + (100vw - 768px) * 0.026367188), 45px) !important;
  }
}

/* ===== Logo Marquee Viewport (v8.7 — Foreground Layer) =====
   Marquee flows above "Clientes" watermark
   - position: absolute, bottom-aligned to watermark's bottom edge
   - z-index: 1 (above watermark at z-index 0)
   - Bottom offset calculated by JS to align with watermark
   - Mobile: Full-width breakout (edge-to-edge)
   - Desktop: Constrained to right 2/3 of section (left 1/3 empty)
   - Overflow hidden clips wide track
   - Edge fades via mask-image
   ======================================================= */
.logo-marquee {
  display: block;
  position: absolute;  /* Positioned relative to .logo-marquee-section */
  left: 0;        /* Mobile default: full-width */
  right: 0;
  --clients-marquee-rail-height: calc(
    (var(--clients-marquee-card-height-base) * var(--effective-scale)) +
    var(--clients-marquee-extra-top) +
    var(--clients-marquee-extra-bottom)
  );
  /* Position marquee - uses dynamic top when alignment lock is active (Desktop/iPad) */
  /* Fallback: center of marquee at baseline position */
  /* Dynamic: set by clients-alignment-lock.js based on watermark bottom */
  top: var(--marquee-dynamic-top, calc(var(--marquee-fixed-bottom-position) - (var(--clients-marquee-rail-height) / 2)));
  width: 100%;    /* Mobile default: full-width */
  max-width: 100%;
  margin: 0;  /* No margin offsets */
  transform: none;  /* Wrapper must not translateY */
  overflow: hidden;  /* Critical: clip wide track horizontally */
  z-index: 1;  /* Above watermark (z-index 0) */
  
  /* Height sized for tallest chip + padding */
  height: var(--clients-marquee-rail-height);  /* Tallest chip scales with --effective-scale */
  /* Padding only on top so track baseline (bottom) aligns to wrapper bottom */
  padding-top: var(--clients-marquee-padding-top);
  padding-bottom: 0;
  
  /* Horizontal padding with safe-area support */
  padding-inline-start: calc(var(--logo-pad-x) + env(safe-area-inset-left));
  padding-inline-end: calc(var(--logo-pad-x) + env(safe-area-inset-right));
  
  /* Edge fades: transparent → solid → transparent */
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* ===== Logo Marquee Track =====
   Similar to Hero's .hmarquee__track
   - Horizontal grid layout
   - CSS animation with transform (GPU accelerated)
   - Seamless loop (2× logo set)
   ================================ */
.logo-marquee__track {
  display: grid;
  grid-auto-flow: column;  /* Logos in a row */
  grid-auto-columns: auto; /* Each logo's natural width */
  column-gap: var(--logo-gap);  /* Space between logos */
  align-items: center;   /* Vertically center all logos in marquee */
  
  /* Animation: smooth infinite scroll using CSS transform */
  animation: scroll-logos var(--logo-duration) linear infinite;
  will-change: transform;  /* Hint for browser optimization */
  
  /* Reset list styles */
  margin: 0;
  padding: 0;
  list-style: none;
  
  /* Width: as wide as needed for all items */
  width: max-content;
}

/* Remove gap after the last logo (22nd) for seamless loop */
/* This prevents a gap when animation wraps from end to beginning */
.logo-marquee__track li:nth-child(22) {
  margin-right: calc(-1 * var(--logo-gap));
}

/* Pause animation on hover/touch
   NOTE: CSS hover disabled for Clients marquee — now controlled by clients-hover-control.js
   for precise hit-testing (only pause when directly over logo, not over gaps/track).
   Keyboard focus pause still works via JS. */
/* .logo-marquee:hover .logo-marquee__track,
.logo-marquee:active .logo-marquee__track {
  animation-play-state: paused;
} */

/* List items - uniform alignment across all breakpoints */
.logo-marquee__track li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;  /* Center-align all logos */
}

/* Mobile: Ensure uniform LI height for proper centering */
@media (max-width: 767px) {
  .logo-marquee__track li {
    height: 52.5px;  /* Match the tallest logo height (uniform height base, mobile scale) */
  }
}

/* Tablet & Desktop: Proportionally scaled uniform height */
@media (min-width: 768px) {
  .logo-marquee__track li {
    /* Base: 75px at desktop (1024px+), scaled down to 63.75px at tablet (768px) */
    height: calc(75px * var(--clients-scale));
  }
}

/* ===== Client Logo Container =====
   UNIFORM HEIGHT SYSTEM:
   - All logos have the same height (diageo_logo height)
   - Width adjusts automatically based on logo aspect ratio
   - No backplates, no per-logo dimensions
   - Bottom-aligned to common baseline
   ====================================== */
.client-logo {
  position: relative;
  display: inline-flex;  /* Changed to inline-flex for natural sizing */
  align-items: center;  /* Center logo vertically */
  justify-content: center;  /* Center logo horizontally */
  
  /* Container auto-sizes to content (logo) */
  width: auto;
  height: auto;
  
  padding: 0;  /* No padding needed without backplates */
  margin: 0;
  transition: transform 0.3s ease;
  box-sizing: border-box;
}

/* Bottom-anchored chip/backplate (background + shadow) */
/* BACKPLATES DISABLED — To re-enable: remove "display: none" and restore styles */
.client-logo::before {
  display: none;  /* Backplates turned off */
  
  /* Original styles preserved for re-enabling: */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(calc(-50% + var(--chip-offset-x))) translateY(var(--chip-offset-y-bottom));
  transform-origin: 50% 100%;  /* Bottom-center for scaling */
  width: 100%;
  height: 100%;
  /* background: rgba(255, 255, 255, 0.96); */
  border-radius: inherit;
  /* box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06); */
  pointer-events: none;
  z-index: 0;
}

/* Per-logo chip dimensions - DISABLED (no backplates, uniform height system) */
/* Original per-logo container sizing preserved below for re-enabling:

.client-logo[data-logo="Mars_logo"] { 
  width: var(--chip-w-mars); 
  height: var(--chip-h-mars); 
}
.client-logo[data-logo="P&G_logo"] { 
  width: var(--chip-w-pg); 
  height: var(--chip-h-pg); 
}
.client-logo[data-logo="Beiersdorf_logo"] { 
  width: var(--chip-w-beiersdorf); 
  height: var(--chip-h-beiersdorf); 
}
.client-logo[data-logo="RedBull_logo"] { 
  width: var(--chip-w-redbull); 
  height: var(--chip-h-redbull); 
}
.client-logo[data-logo="Bacardi_logo"] { 
  width: var(--chip-w-bacardi); 
  height: var(--chip-h-bacardi); 
}
.client-logo[data-logo="Sunstar_logo"] { 
  width: var(--chip-w-sunstar); 
  height: var(--chip-h-sunstar); 
}
.client-logo[data-logo="Unilever_logo"] { 
  width: var(--chip-w-unilever); 
  height: var(--chip-h-unilever); 
}
.client-logo[data-logo="FIFCO_logo"] { 
  width: var(--chip-w-fifco); 
  height: var(--chip-h-fifco); 
}
.client-logo[data-logo="Herdez_logo"] { 
  width: var(--chip-w-herdez); 
  height: var(--chip-h-herdez); 
}
.client-logo[data-logo="diageo_logo"] { 
  width: var(--chip-w-diageo); 
  height: var(--chip-h-diageo); 
}
.client-logo[data-logo="Duracell_logo"] { 
  width: var(--chip-w-duracell); 
  height: var(--chip-h-duracell); 
}
*/

.client-logo:hover {
  transform: translateY(-4px);  /* Slightly more lift for larger size */
}

/* Logo images - UNIFORM HEIGHT SYSTEM (with per-logo exceptions) */
/* Most logos use the same height (diageo_logo height), widths adjust automatically */
/* Exception: Mars, Diageo, Beiersdorf, Duracell have per-logo 0.80 scale applied */
.client-logo img {
  position: relative;  /* Changed from absolute for simpler layout */
  display: block;
  
  /* UNIFIED SIZING: same height for all, width auto-adjusts */
  height: var(--logo-uniform-height);  /* Uniform height (75px base × scale) */
  width: auto;  /* Width adjusts automatically to preserve aspect ratio */
  
  object-fit: contain;  /* No cropping, no distortion */
  object-position: center;
  filter: brightness(1) contrast(1.03) saturate(1.02);  /* Crisp, vibrant rendering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.2s ease;
  z-index: 1;  /* Above chip */
}

/* ===== PER-LOGO SCALE OVERRIDES (0.80 scale applied) ===== */
/* These four logos use per-logo dimensions (20% smaller than standard) */

.client-logo[data-logo="Mars_logo"] img {
  width: var(--logo-w-mars);
  height: var(--logo-h-mars);
  display: block;  /* Ensure proper centering */
}

.client-logo[data-logo="Beiersdorf_logo"] img {
  width: var(--logo-w-beiersdorf);
  height: var(--logo-h-beiersdorf);
  display: block;  /* Ensure proper centering */
}

.client-logo[data-logo="diageo_logo"] img {
  width: var(--logo-w-diageo);
  height: var(--logo-h-diageo);
  display: block;  /* Ensure proper centering */
}

.client-logo[data-logo="Duracell_logo"] img {
  width: var(--logo-w-duracell);
  height: var(--logo-h-duracell);
  display: block;  /* Ensure proper centering */
}

/* ===== VERTICAL ALIGNMENT - UNIFIED ACROSS ALL BREAKPOINTS =====
   All breakpoints now use the same centering logic:
   - Uniform LI height (scales with breakpoint)
   - Center alignment for all logos
   - No per-logo overrides needed
   ================================================================ */

/* Mobile: Additional safeguards for resized logos */
@media (max-width: 767px) {
  .client-logo[data-logo="Mars_logo"],
  .client-logo[data-logo="Beiersdorf_logo"],
  .client-logo[data-logo="diageo_logo"],
  .client-logo[data-logo="Duracell_logo"] {
    align-self: center !important;  /* Force center alignment */
    transform: none !important;  /* Remove any transforms */
    margin: 0 !important;  /* Remove any margins */
    padding: 0 !important;  /* Remove any padding */
  }

  /* Also ensure the images inside are properly displayed */
  .client-logo[data-logo="Mars_logo"] img,
  .client-logo[data-logo="Beiersdorf_logo"] img,
  .client-logo[data-logo="diageo_logo"] img,
  .client-logo[data-logo="Duracell_logo"] img {
    margin: 0 auto !important;
    vertical-align: middle !important;
  }

  /* P&G is a 1:1 square — scale down on mobile so it doesn't dominate the strip */
  .client-logo[data-logo="P&G_logo"] img {
    height: calc(var(--logo-uniform-height) * 0.95);
    width: auto;
  }
}

/* Tablet & Desktop: Same centering approach, no special overrides needed */
/* The uniform LI height + center alignment handles everything */

/* ===== PER-LOGO VERTICAL OFFSET (FIFCO only) =====
   FIFCO logo needs a small upward nudge that scales proportionally
   with logo height across breakpoints */

:root {
  --fifco-offset-px: 0px;        /* Absolute offset (default: none) */
  --fifco-offset-mult: 0;        /* Multiplier × logo height (set by JS) */
  --fifco-logo-height: 1px;      /* Current measured height (updated by JS) */
}

.client-logo[data-logo="FIFCO_logo"] img {
  /* Apply proportional vertical offset: absolute + (multiplier × height) */
  transform: translateY(calc(var(--fifco-offset-px, 0px) + (var(--fifco-offset-mult, 0) * var(--fifco-logo-height, 1px))));
}

/* ===== PER-LOGO EXACT DIMENSIONS =====
   DISABLED: Now using uniform height system (all logos = diageo_logo height)
   
   Original per-logo sizing rules preserved below (commented out for re-enabling):
   ================================================================ */

/* DISABLED - Using uniform height instead
.client-logo[data-logo="Mars_logo"] img {
  width: var(--logo-w-mars);
  height: var(--logo-h-mars);
}

.client-logo[data-logo="P&G_logo"] img {
  width: var(--logo-w-pg);
  height: var(--logo-h-pg);
}

.client-logo[data-logo="Beiersdorf_logo"] img {
  width: var(--logo-w-beiersdorf);
  height: var(--logo-h-beiersdorf);
}

.client-logo[data-logo="RedBull_logo"] img {
  width: var(--logo-w-redbull);
  height: var(--logo-h-redbull);
}

.client-logo[data-logo="Bacardi_logo"] img {
  width: var(--logo-w-bacardi);
  height: var(--logo-h-bacardi);
}

.client-logo[data-logo="Sunstar_logo"] img {
  width: var(--logo-w-sunstar);
  height: var(--logo-h-sunstar);
}

.client-logo[data-logo="Unilever_logo"] img {
  width: var(--logo-w-unilever);
  height: var(--logo-h-unilever);
}

.client-logo[data-logo="FIFCO_logo"] img {
  width: var(--logo-w-fifco);
  height: var(--logo-h-fifco);
}

.client-logo[data-logo="Herdez_logo"] img {
  width: var(--logo-w-herdez);
  height: var(--logo-h-herdez);
}

.client-logo[data-logo="diageo_logo"] img {
  width: var(--logo-w-diageo);
  height: var(--logo-h-diageo);
}

.client-logo[data-logo="Duracell_logo"] img {
  width: var(--logo-w-duracell);
  height: var(--logo-h-duracell);
}
*/

/* ===== Seamless Loop Animation (v9.2) =====
   Pixel-perfect seamless loop with JS-computed distance:
   - Translates exactly one set width (12 logos + gaps)
   - Track contains 2 identical sets for seamless wrap
   - Linear timing (no easing) for smooth continuous scroll
   - GPU-accelerated (translate3d) for performance
   - Duration: 28s desktop, auto-calibrated for iPad/mobile
   - Respects prefers-reduced-motion (pauses animation)
   
   JS measures logos in real-time, computes total width, and updates
   --marquee-loop-distance as a CSS custom property.
   Animation wraps perfectly at 100% → 0% transition.
   ============================================ */
@keyframes scroll-logos {
  0%   { transform: translate3d(0, 0, 0); }
  100% { 
    /* Scroll exactly one full set width (set dynamically by JS) */
    transform: translate3d(calc(-1 * var(--marquee-loop-distance)), 0, 0); 
  }
}

/* ============================================================================
   MOBILE BREAKPOINT (≤767px) — ADAPTIVE SIZING SYSTEM (v8.0)
   ============================================================================
   
   At Mobile, we set CLIENT_STAGE_SCALE = MOBILE_SCALE (0.70).
   This keeps mobile at its current size (unchanged).
   
   EFFECTIVE_SCALE = clamp(MOBILE_SCALE, CLIENT_STAGE_SCALE, 1)
   → At Mobile: clamp(0.70, 0.70, 1) = 0.70
   
   All dimensions automatically scale via: base × EFFECTIVE_SCALE
   No need to override individual logo/chip dimensions.
   
   Desktop base dimensions remain the source of truth.
   ============================================================================ */
@media (max-width: 767px) {
  :root {
    /* Mobile logo scale: 20% smaller than previous (0.70 × 0.8 = 0.56) */
    --client-stage-scale: 0.56;

    /* Mobile-specific spacing and timing */
    --logo-gap: clamp(28px, 6vw, 44px);  /* Mobile gap unchanged (as requested) */
    --marquee-duration-base: 32s;         /* Mobile base duration (was 32s) */
    --marquee-speed-multiplier: 1.428571; /* 30% slower = duration × 1.428571 (70% speed) */
    --logo-duration: calc(var(--marquee-duration-base) * var(--marquee-speed-multiplier)); /* Explicitly recompute: 32s × 1.428571 = 45.714s */
    --logo-chip-pad: 8px;                 /* Mobile internal padding */
    --clients-marquee-card-height-base: 220px;
    --clients-marquee-extra-top: 32px;
    --clients-marquee-extra-bottom: 40px;
    --clients-marquee-padding-top: 20px;
  }

  .client-logo {
    padding: 0;  /* No padding needed (uniform height system, no backplates) */
  }

  /* Mobile-only: Position marquee relative to watermark bottom edge
     ───────────────────────────────────────────────────────────────────────────
     FIXED GAP STRATEGY:
     • Calculate from watermark bottom (not viewport-dependent bottom position)
     • Watermark: top=30px, height=clamp(5rem, 22vw, 10rem)
     • Marquee: positioned at watermark-bottom + fixed-gap
     • Result: Consistent spacing across all mobile viewports (320-767px)
     ─────────────────────────────────────────────────────────────────────────── */
  .logo-marquee {
    /* Position marquee: watermark-top + watermark-height + fixed-gap */
    /* Watermark: top=30px, font-size=clamp(5rem, 22vw, 10rem) ≈ height due to line-height:1.0 */
    /* Using !important to override desktop positioning logic on mobile */
    top: calc(0px + (0.5 * clamp(5rem, 22vw, 10rem)) + var(--clientes-gap-mobile)) !important;
  }
}

/* ===== Reduced Motion Support =====
   Respect user's motion preferences
   (same as Hero's mobile marquee)
   ==================================== */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none !important;
  }

  /* Static layout when motion disabled */
  .logo-marquee {
    overflow-x: auto;  /* Allow manual scrolling */
  }
}