/* ============ Reset & base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #12141a;
  --gray-900: #1c1f26;
  --gray-600: #5c606b;
  --gray-400: #9296a1;
  --line: #e2e2e6;
  --line-soft: #eeeeef;
  --paper: #ffffff;
  --paper-alt: #f6f6f7;
  --accent: #f6835c;
  --accent-dark: #bf6647;
  --accent-soft: #fdece6;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --container: 1320px;
  --gutter: 32px;
  --header-bg: rgba(255, 255, 255, 0.88);

  /* Fixed-dark surfaces (primary button, highlighted price card, the
     WhatsApp mockup's own chrome): these stay the same dark navy in
     both light and dark site themes, so they don't reuse --ink, which
     flips to a light color in dark mode. */
  --dark-surface: #12141a;
  --dark-surface-hover: #1c1f26;
}

@media (max-width: 1024px) { :root { --gutter: 24px; } }
@media (max-width: 620px)  { :root { --gutter: 18px; } }

/* ============ Dark mode ============
   Toggled by JS via [data-theme] on <html>. Only the text/surface
   tokens flip; brand accent and the fixed-dark surfaces above stay
   constant so the interface reads as the same product in both modes. */
:root[data-theme="dark"] {
  --ink: #f3f2ef;
  --gray-900: #e7e6e2;
  --gray-600: #b7bac4;
  --gray-400: #7d8290;
  --line: #2b2e37;
  --line-soft: #24262e;
  --paper: #101114;
  --paper-alt: #18191d;
  --accent-soft: #693e2e;
  --header-bg: rgba(16, 17, 20, 0.82);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Every section uses this exact class for its horizontal margins,
   so the left/right gutter is identical everywhere on the page. */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }

.section-head {
  max-width: 620px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-title {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.14;
  margin-bottom: 14px;
}
.section-title-left {
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.14;
  margin-bottom: 18px;
}
.section-sub {
  font-size: 17px;
  color: var(--gray-600);
  line-height: 1.6;
}

/* ============ Buttons — square corners, no exceptions ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 0;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  border: 1px solid transparent;
}
.btn-dark { background: var(--dark-surface); color: #fff; }
.btn-dark:hover { background: var(--dark-surface-hover); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-lg { padding: 15px 32px; font-size: 16px; }
.btn-block { width: 100%; }

/* Hover effect: the label blurs and sharpens back in, without
   blurring the button's border/background. Shared by .btn labels
   and nav links so the whole site feels consistent. */
.btn-label,
.nav-label {
  display: inline-block;
  transition: filter 0.25s ease;
  filter: blur(0);
}
.btn:hover .btn-label,
.nav-link:hover .nav-label,
.mobile-nav-link:hover .nav-label {
  filter: blur(3px);
}
@media (prefers-reduced-motion: reduce) {
  .btn-label, .nav-label { transition: none; }
  .btn:hover .btn-label,
  .nav-link:hover .nav-label,
  .mobile-nav-link:hover .nav-label {
    filter: blur(0);
  }
}

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 18px var(--gutter);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  /* Instrument Serif only ships one weight, so font-weight can't nudge
     it — a hair of stroke gives it a touch more presence without
     jumping all the way to the browser's synthetic bold. */
  -webkit-text-stroke: 0.4px currentColor;
  letter-spacing: -0.005em;
  color: var(--ink);
  flex-shrink: 0;
}
.logo-mark {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
}
.nav-link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--gray-600);
  transition: color 0.15s ease;
}
.nav-link:hover { color: var(--ink); }

/* ---- Desktop megamenu: hovering (or focusing, for keyboard users) a
   nav item with a dropdown reveals its panel. Pure CSS — no JS. ---- */
.nav-item { position: relative; }
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.nav-caret { width: 9px; height: 6px; flex-shrink: 0; color: var(--gray-400); transition: transform 0.2s ease; }
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 300px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -20px rgba(18, 20, 26, 0.25);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 120;
}
/* Invisible bridge so the pointer can travel from the trigger down
   into the panel without the gap between them closing it. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-viewall {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
  padding: 6px 8px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-dropdown-viewall:hover { color: var(--accent-dark); }
.nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 8px;
  transition: background-color 0.15s ease;
}
.nav-dropdown-item:hover { background: var(--paper-alt); }
.nav-dropdown-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
}
.nav-dropdown-item-icon svg { width: 16px; height: 16px; }
.nav-dropdown-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.nav-dropdown-item small {
  display: block;
  font-size: 12.5px;
  color: var(--gray-600);
  margin-top: 2px;
  line-height: 1.4;
}
.nav-dropdown-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-400);
  padding: 4px 8px 8px;
}
.nav-dropdown-simple-link {
  display: block;
  padding: 9px 8px;
  font-size: 14px;
  color: var(--ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-dropdown-simple-link:hover { background: var(--paper-alt); color: var(--accent-dark); }
.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.header-actions .btn { padding: 10px 20px; font-size: 14px; }

/* ---- Language selector: just the flag + caret, no boxed button,
   height-matched to the hamburger so the header controls sit flush. ---- */
.lang-switch { position: relative; }
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 2px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.lang-toggle:hover { opacity: 1; }
.lang-caret { width: 10px; height: 7px; flex-shrink: 0; transition: transform 0.2s ease; }
.lang-switch.open .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px -12px rgba(18, 20, 26, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 110;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lang-option:hover { background: var(--paper-alt); color: var(--ink); }
.lang-option[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.lang-flag {
  display: inline-flex;
  width: 21px;
  height: 15px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(18, 20, 26, 0.14);
}
.lang-flag svg { width: 100%; height: 100%; display: block; }

/* ---- Dark mode toggle: a pill switch. The clickable button keeps
   the same 36px-tall hit target as the flag selector and hamburger,
   but the visible pill itself is drawn smaller and centered inside
   it, so its rendered "ink" matches the optical scale of the flag
   icon and the menu glyph instead of filling the whole 36px box. ---- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  flex-shrink: 0;
}
.theme-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 42px;
  height: 24px;
  padding: 3px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.theme-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(18, 20, 26, 0.3);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease;
}
.theme-icon {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}
.theme-icon-sun { right: 4px; color: var(--gray-400); opacity: 1; }
.theme-icon-moon { left: 4px; color: #cfd2db; opacity: 0; }
:root[data-theme="dark"] .theme-track { background: var(--dark-surface); border-color: var(--dark-surface); }
:root[data-theme="dark"] .theme-knob { transform: translateX(18px); background: #3a3d47; }
:root[data-theme="dark"] .theme-icon-sun { opacity: 0; }
:root[data-theme="dark"] .theme-icon-moon { opacity: 1; }
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}
.menu-toggle:hover { background: var(--paper-alt); }
.menu-toggle svg { width: 20px; height: 20px; }
/* ---- Mobile nav: a full-page panel that slides in from the right
   over the site, instead of pushing the header content down. A
   backdrop dims and blocks the rest of the page while it's open. ---- */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 14, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 190;
}
.mobile-nav-backdrop.open { opacity: 1; visibility: visible; }
.mobile-nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  width: 100%;
  padding: 0 var(--gutter) 28px;
  background: var(--paper);
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  z-index: 200;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav-logo { pointer-events: none; }
.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ink);
  flex-shrink: 0;
}
.mobile-nav-close:hover { background: var(--paper-alt); }
.mobile-nav-close svg { width: 22px; height: 22px; }
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.mobile-nav-link {
  padding: 15px 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  transition: opacity 0.15s ease;
}
.mobile-nav-link:hover { opacity: 0.6; }
/* ---- Accordion groups (Producto / Negocios): expand in place to
   show the same items their desktop megamenu dropdown has. ---- */
.mobile-nav-group-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.mobile-nav-group-caret {
  width: 11px;
  height: 8px;
  flex-shrink: 0;
  /* Nudge in from the edge to line up with the X icon inside the
     36px close button, which is inset (36 - 22) / 2 = 7px. */
  margin-right: 7px;
  color: var(--gray-400);
  transition: transform 0.2s ease;
}
.mobile-nav-group.open .mobile-nav-group-caret { transform: rotate(180deg); }
.mobile-nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.mobile-nav-group.open .mobile-nav-submenu { grid-template-rows: 1fr; }
.mobile-nav-submenu-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mobile-nav-sublink {
  padding: 11px 0 11px 4px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-600);
  transition: color 0.15s ease;
}
.mobile-nav-sublink:hover { color: var(--ink); }
.mobile-nav-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.mobile-nav-foot a {
  font-size: 13px;
  color: var(--gray-400);
}
.mobile-nav-foot a:hover { color: var(--ink); }
body.nav-open { overflow: hidden; }

/* focus visibility (keyboard nav) */
a:focus-visible,
button:focus-visible,
.faq-question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============ Hero ============ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 120px;
}
.hero-rays {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-rays svg { width: 100%; height: 100%; display: block; opacity: 0.6; }
.hero-rays::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34% 40% at 50% 50%, var(--paper) 0%, var(--paper) 18%, transparent 72%);
}
@media (max-width: 900px) {
  .hero-rays::before { background: radial-gradient(ellipse 60% 42% at 50% 48%, var(--paper) 0%, var(--paper) 20%, transparent 74%); }
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-copy { max-width: 640px; margin: 0 auto; text-align: center; }
.hero-title {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.hero-title-muted { color: var(--gray-600); }
.hero-sub {
  font-size: 17px;
  color: var(--gray-600);
  max-width: 480px;
  line-height: 1.65;
  margin: 0 auto 32px;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.hero-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-rating-icon { width: 16px; height: 16px; flex-shrink: 0; }
.hero-rating-score { font-size: 14px; font-weight: 600; color: var(--ink); }
.hero-stars { color: #f5a623; letter-spacing: 1px; font-size: 13px; }
.hero-rating-label { font-size: 13px; color: var(--gray-400); }

.hero-badges { display: flex; gap: 10px; }
.hero-badge {
  width: 64px;
  padding: 8px 5px 20px;
  background: var(--paper-alt);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
  filter: drop-shadow(0 1px 2px rgba(18, 20, 26, 0.14));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.hb-top {
  font-size: 5.2px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gray-400);
  line-height: 1.3;
}
.hb-main { font-size: 11.5px; font-weight: 700; color: var(--ink); }

/* ============ 2. Logos de clientes (carrusel) ============ */
.logos-section { padding: 0 0 120px; }
/* .logos-mask sits INSIDE .container, as its own box (not sharing the
   container's own padding) so the mask's 0%/100% line up with the
   exact same edge every other section's content stops at — the fade
   happens within that boundary, nothing bleeds past it into the
   margin. */
.logos-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}
.logos-track {
  display: flex;
  width: max-content;
  animation: scroll-logos 26s linear infinite;
}
.logos-row {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: nowrap;
  padding-right: 56px;
}
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}
.trust-logo {
  font-size: 21px;
  font-weight: 700;
  color: var(--gray-400);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.trust-logo-serif { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.trust-logo-caps { text-transform: uppercase; font-size: 16px; letter-spacing: 0.03em; }
.trust-logo-round { font-family: var(--sans); font-weight: 600; text-transform: lowercase; }

/* Hero visual: agent runtime card */
.hero-visual { position: relative; width: 100%; }
.agent-card {
  position: relative;
  width: 100%;
  background: #14161b;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(18, 20, 26, 0.4);
}
.agent-card-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: #1a1c23;
  border-bottom: 1px solid #262932;
}
.agent-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.agent-dot-r { background: #ec6a5e; }
.agent-dot-y { background: #f4bf4f; }
.agent-dot-g { background: #61c554; }
.agent-card-title {
  margin-left: 8px;
  font-size: 12px;
  color: #7a7d87;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace;
}
.agent-graph {
  position: relative;
  height: 210px;
  margin: 22px 24px 0;
}
.agent-graph-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.agent-line { stroke: #333744; stroke-width: 1.5; }
.agent-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.agent-node-in, .agent-node-out {
  background: #1e2129;
  border: 1px solid #2c2f39;
  color: #c7c9d1;
  width: 90px;
}
.agent-node-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 0 0 8px rgba(20, 128, 79, 0.18), 0 12px 30px -8px rgba(20, 128, 79, 0.6);
}
.agent-terminal {
  padding: 6px 20px 22px;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.9;
}
.agent-line-log {
  color: #8b8e99;
  opacity: 0;
  transform: translateY(4px);
  animation: agent-log-in 0.4s ease forwards;
}
.agent-line-log:nth-child(1) { animation-delay: 0.3s; }
.agent-line-log:nth-child(2) { animation-delay: 1.1s; }
.agent-line-log:nth-child(3) { animation-delay: 1.9s; }
.agent-line-log:nth-child(4) { animation-delay: 2.9s; }
@keyframes agent-log-in { to { opacity: 1; transform: translateY(0); } }
.agent-prompt { color: var(--accent); margin-right: 6px; }
.agent-line-log em { font-style: normal; color: #e4e5ea; }
.agent-line-log em.agent-ok { color: #61c554; }

/* ============ 3. Product explanation (phone mockup) ============ */
.product-section { padding: 0 0 128px; }
.product-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 72px;
  align-items: stretch;
}
.product-visual { display: flex; justify-content: center; align-items: stretch; }

/* Straight-edged card wrapping the WhatsApp mockup (replaces the old
   iPhone hardware shell — same idea as the reference chat screenshot,
   but with sharp corners instead of rounded ones). Height matches the
   copy column (align-items: stretch above) instead of a fixed aspect
   ratio, so the two sides line up evenly; the aspect-ratio fallback
   below only kicks in once the columns stack on smaller screens. */
.chat-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 100%;
  min-height: 460px;
  background: #1a1b1f;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(243, 242, 239, 0.18);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.phone-frame {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--dark-surface);
  overflow: hidden;
}
.phone-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #1f2c34;
  border-bottom: 1px solid #16232b;
}
.phone-back { width: 20px; height: 20px; color: #8b8e99; flex-shrink: 0; }
.phone-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: #00a884;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.phone-avatar img { width: 100%; height: 100%; object-fit: cover; }
.phone-bar-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.phone-name { color: #fff; font-size: 14px; font-weight: 600; }
.phone-status { color: #8b8e99; font-size: 11.5px; transition: color 0.2s ease; }
.phone-status.is-typing { color: #00a884; }
.phone-bar-icons { display: flex; align-items: center; gap: 16px; color: #8b8e99; flex-shrink: 0; }
.phone-bar-icons svg { width: 18px; height: 18px; display: block; }
.phone-body {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #0b141a;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 16px 16px;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.phone-body-fade { opacity: 0; filter: blur(2px); }
.wa-bubble {
  position: relative;
  max-width: 82%;
  padding: 7px 9px 6px 10px;
  border-radius: 7.5px;
  font-size: 13.5px;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 8px;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: wa-appear 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.wa-bubble + .wa-bubble { margin-top: 2px; }
.wa-text { flex: 1 1 auto; word-break: break-word; }
.wa-meta { margin-left: auto; display: flex; align-items: center; gap: 3px; font-size: 10px; white-space: nowrap; opacity: 0.65; padding-top: 3px; }
.wa-meta svg { width: 14px; height: 10px; }
.wa-in { align-self: flex-start; background: #1f2c34; color: #e9edef; border-top-left-radius: 0; }
.wa-in::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 10px;
  height: 12px;
  background: #1f2c34;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.wa-out { align-self: flex-end; background: #005c4b; color: #e9edef; border-top-right-radius: 0; }
.wa-out::before {
  content: "";
  position: absolute;
  top: 0;
  right: -7px;
  width: 10px;
  height: 12px;
  background: #005c4b;
  clip-path: polygon(0 0, 0 100%, 100% 0);
}
.wa-out .wa-meta-tick { color: #53bdeb; }
@keyframes wa-appear { to { opacity: 1; transform: translateY(0) scale(1); } }
.phone-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #1f2c34;
}
.phone-input span {
  flex: 1;
  display: block;
  padding: 9px 14px;
  background: #2a3942;
  border-radius: 999px;
  color: #8696a0;
  font-size: 12.5px;
}
.phone-input-icon { width: 20px; height: 20px; color: #8696a0; flex-shrink: 0; }

.product-copy { max-width: 540px; }
.product-lead {
  font-size: 16.5px;
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: 40px;
  max-width: 480px;
}
.feature-list { display: flex; flex-direction: column; gap: 0; }
.feature-list li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  position: relative;
  padding-bottom: 34px;
}
.feature-list li:last-child { padding-bottom: 0; }
.feature-list li::before {
  content: '';
  position: absolute;
  left: 16.5px;
  top: 9px;
  bottom: -9px;
  width: 1px;
  background: var(--line);
}
.feature-list li:last-child::before { display: none; }
.feature-chip {
  flex-shrink: 0;
  width: 34px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.feature-chip::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--accent);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.feature-list h3 { font-size: 16.5px; margin-bottom: 6px; }
.feature-list p { font-size: 14.5px; color: var(--gray-600); line-height: 1.6; }

/* ============ 4. Segments (para quién es) — image placeholders ============ */
.segments-section { padding: 0 0 128px; }
.segments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.segment-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.segment-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(18, 20, 26, 0.08); }
.segment-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  background: var(--paper-alt);
  background-image: repeating-linear-gradient(135deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 14px);
  position: relative;
}
.segment-image::after {
  content: attr(data-label);
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--gray-400);
  background: var(--paper);
  padding: 4px 8px;
  border: 1px solid var(--line);
}
.segment-image.has-image { background-image: none; aspect-ratio: auto; }
.segment-image.has-image::after { content: none; }
.segment-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.segment-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.segment-card h3 { font-size: 19px; margin-bottom: 8px; }
.segment-problem { font-size: 14.5px; color: var(--gray-600); line-height: 1.55; margin: 0; }
.segment-divider {
  height: 0;
  border-top: 1px dashed var(--line);
  margin: auto -24px 20px;
}
.segment-solution { display: flex; align-items: flex-start; gap: 12px; }
.segment-solution-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.segment-solution-icon svg { width: 15px; height: 15px; }
.segment-solution p { font-size: 14.5px; font-weight: 600; line-height: 1.45; margin: 0; color: var(--ink); }

/* ============ 5. Testimonials — image placeholders ============ */
.testimonials-section { padding: 0 0 128px; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.testimonial-card {
  border: 1px solid var(--line);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(18, 20, 26, 0.08); }
.testimonial-stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-quote { font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 24px; flex-grow: 1; }
.testimonial-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

/* ============ 6. Pricing ============ */
.pricing-section { padding: 0 0 112px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: stretch;
}
.price-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
}
.price-card.highlight { background: var(--dark-surface); color: #fff; border-color: var(--dark-surface); }
.price-card.highlight h3 { color: #fff; }
.price-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 12px;
}
.price-card h3 { font-size: 18px; margin-bottom: 8px; }
.price-desc { font-size: 13.5px; color: var(--gray-600); margin-bottom: 24px; line-height: 1.55; min-height: 40px; }
.price-card.highlight .price-desc { color: #b7bac3; }
.price-amount {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 400;
  -webkit-text-stroke: 0.4px currentColor;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.price-amount span { font-size: 14px; font-weight: 500; color: var(--gray-600); }
.price-card.highlight .price-amount span { color: #b7bac3; }
.price-setup { font-size: 13px; color: var(--gray-600); margin-bottom: 24px; }
.price-card.highlight .price-setup { color: #b7bac3; }
.price-features { margin-bottom: 28px; flex-grow: 1; }
.price-features li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
.price-features li svg { position: absolute; left: 0; top: 3px; width: 15px; height: 15px; color: var(--accent); }
.price-card.highlight .price-features li svg { color: #6fd6a0; }
.pricing-note { text-align: center; font-size: 13px; color: var(--gray-400); margin-top: 28px; }

/* ============ Final CTA (light band before footer) ============ */
.final-cta { padding: 88px 0; background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.final-cta-inner { text-align: center; }
.final-cta h2 { font-size: clamp(32px, 4.4vw, 48px); max-width: 680px; margin: 0 auto 32px; line-height: 1.16; }
.final-cta-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ============ FAQ (before footer) ============ */
.faq-section { padding: 128px 0; background: var(--paper); }
.faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 72px;
  align-items: start;
}
.faq-head { position: sticky; top: 120px; }
.faq-head .eyebrow { margin-bottom: 18px; }
.faq-list { width: 100%; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  text-align: left;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.faq-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.faq-item.open .faq-icon { transform: rotate(135deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p {
  padding: 0 32px 26px 4px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-600);
}
.faq-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.faq-cta p { font-size: 16px; font-weight: 600; color: var(--ink); }

/* ============ 7. Footer ============ */
.site-footer { padding: 56px 0 40px; }
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.footer-brand { max-width: 260px; flex-shrink: 0; }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { font-size: 14px; color: var(--gray-600); line-height: 1.6; }
.footer-cols { display: flex; gap: 48px; }
.footer-col h4 {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-400);
  margin-bottom: 16px;
}
.footer-col a { display: block; font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-bottom p { font-size: 13px; color: var(--gray-400); }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { font-size: 13px; color: var(--gray-400); }
.footer-legal a:hover { color: var(--ink); }

/* ============ "Coming soon" placeholder pages ============
   Shared by the Meta Ads and per-business pages linked from the
   megamenu — a minimal header (logo only), a centered banner, and a
   minimal footer bar, so they read as part of the same site while
   the real content isn't built yet. */
.construction-section { padding: 150px 0 130px; text-align: center; }
.construction-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 28px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.construction-badge svg { width: 26px; height: 26px; }
.construction-section .btn { margin-top: 30px; }
.minimal-footer {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.minimal-footer p { font-size: 13px; color: var(--gray-400); }
.minimal-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
}
.minimal-footer-links a { font-size: 13px; color: var(--gray-400); }
.minimal-footer-links a:hover { color: var(--accent); }

/* ============ Legal pages (Privacidad / Términos / Cookies) ============ */
.legal-section { padding: 90px 0 130px; }
.legal-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.legal-head .eyebrow { justify-content: center; }
.legal-updated { font-size: 13px; color: var(--gray-400); margin-top: 10px; }
.legal-content { max-width: 720px; margin: 0 auto; }
.legal-content h2 {
  font-size: 22px;
  font-weight: 400;
  margin: 44px 0 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { font-size: 15px; line-height: 1.75; color: var(--gray-600); margin-bottom: 16px; }
.legal-content ul { margin: 0 0 16px; padding-left: 4px; }
.legal-content li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-600);
}
.legal-content li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--accent); }
.legal-placeholder {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 0 4px;
  border-radius: 2px;
}
/* ============ Scroll reveal ============ */
/* Scroll-reveal animation removed: content is always visible. */
.reveal { opacity: 1; transform: none; }

/* ============ Responsive ============
   Tablet and mobile breakpoints both reuse --gutter (redefined above)
   so every section keeps identical left/right margins at every size. */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy { max-width: 100%; }
  .product-grid { grid-template-columns: 1fr; gap: 56px; }
  .chat-card { height: auto; min-height: 0; aspect-ratio: 9 / 16.5; }
  .product-copy { max-width: 100%; text-align: center; margin: 0 auto; }
  .product-lead { margin-left: auto; margin-right: auto; }
  .feature-list li { text-align: left; }
  .segments-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-head { position: static; }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-cols { gap: 40px; flex-wrap: wrap; }
}

@media (max-width: 620px) {
  /* The full-width CTA already lives inside the mobile menu, so the
     header keeps only the logo, language, theme and the hamburger at
     this width — enough room, and no risk of overflow. */
  .header-actions .btn { display: none; }
  .header-actions { gap: 10px; }
  .lang-toggle .btn-label { display: none; }
  .hero { padding: 40px 0 72px; }
  .agent-node-in, .agent-node-out { width: 70px; font-size: 10px; padding: 6px 8px; }
  .agent-node-core { width: 60px; height: 60px; font-size: 11px; }
  .agent-graph { margin: 22px 14px 0; }
  .product-section { padding-bottom: 96px; }
  .segments-section, .testimonials-section, .pricing-section { padding-bottom: 88px; }
  .segments-grid { grid-template-columns: 1fr; }
  .final-cta { padding: 64px 0; }
  .faq-section { padding: 64px 0; }
  .faq-question { padding: 20px 4px; font-size: 16px; gap: 14px; }
  .faq-answer-inner p { padding-right: 4px; }
  .faq-cta { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }
  .footer-cols { gap: 28px; }
}

/* ============ Contact page ============ */
.contact-section { padding: 56px 0 130px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 80px;
  align-items: start;
}
.contact-intro .section-title-left { margin-bottom: 16px; }
.contact-intro .section-sub { margin-bottom: 40px; }

.contact-info-list { display: flex; flex-direction: column; gap: 22px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 14px; }
.contact-info-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  margin-top: 2px;
}
.contact-info-icon svg { width: 19px; height: 19px; }
.contact-info-item strong { display: block; font-size: 14px; margin-bottom: 2px; }
.contact-info-item a,
.contact-info-item span { font-size: 14.5px; color: var(--gray-600); }
.contact-info-item a:hover { color: var(--ink); }

.contact-steps-section { padding: 0 0 128px; }
.contact-steps-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-400);
  text-align: center;
  margin-bottom: 40px;
}
.contact-steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.contact-step-h { position: relative; }
.contact-step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 13px;
  color: var(--accent-dark);
  position: relative;
}
.contact-step-h p { font-size: 14.5px; color: var(--gray-600); line-height: 1.55; max-width: 300px; }

.contact-steps-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--gray-600);
  text-align: center;
}
.contact-steps-note svg { width: 15px; height: 15px; color: var(--accent-dark); flex-shrink: 0; }
.contact-steps-note strong { color: var(--ink); font-weight: 600; }

.contact-form-wrap {
  border: 1px solid var(--line);
  background: var(--paper-alt);
  padding: 40px;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form[hidden] { display: none; }
.contact-form-honeypot { position: absolute; left: -5000px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color 0.15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235c606b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 7px; padding-right: 36px; }

/* Phone field: country-code dropdown + number input, styled as one control */
.phone-field { display: flex; }
.phone-field input#telefono { flex: 1; min-width: 0; }
.phone-prefix { position: relative; flex-shrink: 0; }
.phone-prefix-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 10px;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-right: none;
  transition: border-color 0.15s ease;
}
.phone-prefix.open .phone-prefix-toggle { border-color: var(--ink); }
.phone-prefix-caret { width: 9px; height: 6px; flex-shrink: 0; color: var(--gray-400); transition: transform 0.2s ease; }
.phone-prefix.open .phone-prefix-caret { transform: rotate(180deg); }
.phone-prefix-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: min(240px, 78vw);
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px -12px rgba(18, 20, 26, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 120;
}
.phone-prefix.open .phone-prefix-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.phone-prefix-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--gray-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.phone-prefix-option:hover { background: var(--paper-alt); color: var(--ink); }
.phone-prefix-option[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.phone-prefix-option small { margin-left: auto; color: var(--gray-400); font-weight: 400; }
.phone-prefix-flag {
  display: inline-flex;
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(18, 20, 26, 0.14);
}
.phone-prefix-flag svg { width: 100%; height: 100%; display: block; }

.contact-form-note { font-size: 12.5px; color: var(--gray-400); text-align: center; }
.contact-form-note a { text-decoration: underline; color: var(--gray-400); }
.contact-form-note a:hover { color: var(--ink); }

.contact-form-success {
  padding: 30px 0;
  text-align: center;
}
.contact-form-success svg { width: 40px; height: 40px; color: var(--accent-dark); margin: 0 auto 18px; }
.contact-form-success h3 { font-size: 22px; margin-bottom: 10px; }
.contact-form-success p { font-size: 14.5px; color: var(--gray-600); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form-wrap { padding: 28px; }
  .contact-steps-row { grid-template-columns: 1fr; gap: 28px; }
  .contact-step-h p { max-width: none; }
  .contact-steps-note { flex-direction: column; gap: 4px; }
}
@media (max-width: 560px) {
  .contact-section { padding: 40px 0 80px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .contact-form-wrap { padding: 22px; }
  .contact-steps-section { padding-bottom: 90px; }
}

/* ============ Nosotros (About us) ============
   Built only from the home page's own patterns: the real .hero, the
   FAQ-style two-column block, the business cards (.segment-card) and
   .section-head + grid. No extra max-widths, no coloured backgrounds:
   .container alone sets the side margins and every section uses the
   same 0 / 128px padding rhythm. */
.about-hero { padding: 56px 0 120px; }

.about-story-section { padding: 0 0 128px; }
.about-story-grid,
.about-careers-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 72px;
  align-items: start;
}
.about-story-head .eyebrow,
.about-careers-head .eyebrow { margin-bottom: 18px; }
.about-story-body p { font-size: 15px; line-height: 1.65; color: var(--gray-600); margin-bottom: 18px; }
.about-story-body p:last-child { margin-bottom: 0; }

/* Team — plain columns, no boxes */
.about-team { margin-top: 96px; }
.about-team .eyebrow { margin-bottom: 14px; }
.about-team-intro { font-size: 15px; line-height: 1.65; color: var(--gray-600); margin-bottom: 40px; }
.about-people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 72px; }
.about-photo {
  width: 88px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: var(--paper-alt);
  background-image: repeating-linear-gradient(135deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 14px);
  position: relative;
}
.about-photo::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  background: var(--paper);
  padding: 3px 8px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.about-person h3 { font-size: 22px; margin-bottom: 6px; text-align: center; }
.about-person-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 6px;
  text-align: center;
}
.about-person-origin { font-size: 13.5px; color: var(--gray-400); text-align: center; margin-bottom: 16px; }
.about-person-bio { font-size: 15px; line-height: 1.65; color: var(--gray-600); }

/* Offices — same business cards as the home, two columns */
.about-offices-section { padding: 0 0 128px; }
.about-offices-grid { grid-template-columns: repeat(2, 1fr); }
.about-offices-grid .segment-image { aspect-ratio: 16 / 9; }

/* Careers — FAQ-style list of open positions */
.about-cta-section { padding: 0 0 128px; }
.about-careers-head .section-sub { margin-top: 0; }
.about-jobs { width: 100%; }
.about-job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
}
.about-job:first-child { border-top: 1px solid var(--line); }
.about-job h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; margin-bottom: 6px; }
.about-job-desc { font-size: 15px; line-height: 1.55; color: var(--gray-600); margin-bottom: 8px; }
.about-job-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-dark); }
.about-job-arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); transition: transform 0.2s ease; }
.about-job:hover .about-job-arrow { transform: translateX(4px); }
.about-jobs-note { font-size: 15px; color: var(--gray-600); margin-top: 28px; }
.about-jobs-note a { color: var(--ink); font-weight: 600; }
.about-jobs-note a:hover { color: var(--accent); }

@media (max-width: 1024px) {
  .about-story-grid, .about-careers-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-people { gap: 48px; }
}
@media (max-width: 900px) {
  .about-people, .about-offices-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .about-hero { padding: 40px 0 72px; }
  .about-story-section, .about-offices-section, .about-cta-section { padding-bottom: 88px; }
  .about-team { margin-top: 64px; }
  .about-job { padding: 20px 4px; }
}

/* ============ Meta Ads page — campaign panel (illustrative) ============
   Same dark card as the home's WhatsApp mockup (.chat-card), filled with
   a small campaign dashboard instead of a chat. */
.ads-card { padding: 20px 18px 18px; gap: 18px; color: #fff; justify-content: space-between; }
.ads-head { display: flex; align-items: center; gap: 12px; }
.ads-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(246, 131, 92, 0.16); color: var(--accent); }
.ads-icon svg { width: 18px; height: 18px; }
.ads-head-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ads-title { font-size: 14px; font-weight: 600; color: #fff; }
.ads-sub { font-size: 11.5px; color: #8b8e99; }
.ads-status { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #6fd6a0; background: rgba(111, 214, 160, 0.12); padding: 4px 8px; }
.ads-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ads-kpi { background: rgba(255, 255, 255, 0.05); padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.ads-kpi-label { font-size: 11px; color: #8b8e99; }
.ads-kpi-value { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.ads-block { display: flex; flex-direction: column; gap: 10px; }
.ads-block-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #8b8e99; }
.ads-chart { display: flex; align-items: flex-end; gap: 8px; height: 76px; }
.ads-chart span { flex: 1; background: var(--accent); opacity: 0.85; }
.ads-chart span:last-child { opacity: 1; }
.ads-plat { display: grid; grid-template-columns: 74px 1fr 34px; align-items: center; gap: 10px; font-size: 12.5px; color: #d5d7de; }
.ads-plat-bar { height: 5px; background: rgba(255, 255, 255, 0.1); display: block; }
.ads-plat-bar i { display: block; height: 100%; background: var(--accent); }
.ads-plat-pct { text-align: right; color: #8b8e99; font-size: 12px; }
.ads-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; color: #8b8e99; }
.ads-foot strong { font-size: 17px; font-weight: 600; color: #fff; }
.price-amount .price-from { margin-right: 6px; }

/* Meta Ads page — reserved blank visual (future real Meta Ads photo) */
.ads-blank { width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; }

.about-photo.has-photo { background: none; overflow: hidden; }
.about-photo.has-photo::after { display: none; }
.about-photo.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }