/*
 * conexus.css
 * Conexus landing — overrides over evermind-template.css design tokens.
 *
 * Load order in <head>:
 *   1. normalize.css
 *   2. evermind-template.css   (template tokens, untouched)
 *   3. components.css          (template components, untouched)
 *   4. conexus.css             (this file — overrides + Conexus styles)
 *
 * Strategy: redefine the original CSS variables in :root so existing template
 * selectors (.text-h1, .cta-main, .eyebrow, etc.) automatically inherit the
 * Conexus palette and type scale without touching evermind-template.css.
 */

/* ---------- 1. Palette overrides --------------------------------------- */

:root {
  /* Conexus palette (decision: LANDING_PLAN.md §7) */
  --_🎨-color---accent--everglow: #0066CC;       /* CTAs, accents, numbers */
  --_🎨-color---neutral--dark-100: #0A2540;      /* deep blue, dark backgrounds */
  --_🎨-color---neutral--light-100: #F8FAFC;     /* light background */
  --_🎨-color---background--eversand-for-navigation-bar: #F8FAFCCC; /* nav bg */

  /* New text tokens (template did not expose these) */
  --conexus-text-primary: #1A2332;               /* body text on light bg */
  --conexus-text-on-dark: #FFFFFF;               /* body text on #0A2540 */
}

/* ---------- 2. Aliases without emoji (ergonomics for new code) --------- */

:root {
  --accent: var(--_🎨-color---accent--everglow);
  --dark:   var(--_🎨-color---neutral--dark-100);
  --light:  var(--_🎨-color---neutral--light-100);
  --text:   var(--conexus-text-primary);
  --text-on-dark: var(--conexus-text-on-dark);
}

/* ---------- 3. Type scale +15–20% (desktop) ---------------------------- */

:root {
  /* Headings (serif: Merriweather) */
  --_🔠-typography---size--h1:        72px;
  --_🔠-typography---line-height--h1: 76px;
  --_🔠-typography---size--h2:        56px;
  --_🔠-typography---line-height--h2: 60px;
  --_🔠-typography---size--h3:        48px;
  --_🔠-typography---line-height--h3: 52px;
  --_🔠-typography---size--h4:        40px;
  --_🔠-typography---line-height--h4: 48px;

  /* Headings (sans: 42 Dotsans) */
  --_🔠-typography---size--h5:        34px;
  --_🔠-typography---line-height--h5: 38px;
  --_🔠-typography---size--h6:        28px;
  --_🔠-typography---line-height--h6: 32px;

  /* Body (sans: 42 Dotsans) */
  --_🔠-typography---size--body-1:        24px;
  --_🔠-typography---line-height--body-1: 32px;
  --_🔠-typography---size--body-2:        19px;  /* default body */
  --_🔠-typography---line-height--body-2: 28px;
  --_🔠-typography---size--body-3:        14px;
  --_🔠-typography---line-height--body-3: 18px;

  /* Labels */
  --_🔠-typography---size--label-1:        14px;
  --_🔠-typography---line-height--label-1: 18px;
  --_🔠-typography---size--label-2:        12px;
  --_🔠-typography---line-height--label-2: 14px;
}

/* ---------- 4. Type scale (mobile ≤991px, proportional shrink) --------- */

@media screen and (max-width: 991px) {
  :root {
    --_🔠-typography---size--h1:        56px;
    --_🔠-typography---line-height--h1: 60px;
    --_🔠-typography---size--h2:        44px;
    --_🔠-typography---line-height--h2: 48px;
    --_🔠-typography---size--h3:        36px;
    --_🔠-typography---line-height--h3: 40px;
    --_🔠-typography---size--h4:        30px;
    --_🔠-typography---line-height--h4: 36px;
    --_🔠-typography---size--h5:        26px;
    --_🔠-typography---line-height--h5: 30px;
    --_🔠-typography---size--h6:        22px;
    --_🔠-typography---line-height--h6: 26px;
    --_🔠-typography---size--body-1:        20px;
    --_🔠-typography---line-height--body-1: 28px;
    --_🔠-typography---size--body-2:        17px;
    --_🔠-typography---line-height--body-2: 25px;
  }
}

/* ---------- 5. Base body color (matches new palette) ------------------ */

body {
  color: var(--text);
  background-color: var(--light);
}

/* Anchor scroll: clear the fixed .master-navigation when jumping to #problema, #solucion, #planes, #waitlist. */
html {
  scroll-padding-top: 120px;
}
.section {
  scroll-margin-top: 120px;
}

/* ---------- Fase F' overrides ------------------------------------------ */

/* Stats section: collapse 2-col grid to single column when image removed */
.column-halves.single-col {
  grid-template-columns: 1fr;
}

/* Section subtitles: paragraph below h2/h3 introducing the block */
.section-subtitle {
  max-width: 56ch;
  margin-top: var(--spacing--12, 12px);
  margin-bottom: var(--spacing--16, 16px);
  font-size: var(--_🔠-typography---size--body-1);
  line-height: var(--_🔠-typography---line-height--body-1);
}

/* F'.2 — Cómo se gestiona hoy (4 cards) */
.problema-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing--24, 24px);
  margin-top: var(--spacing--32, 32px);
}
.problema-card {
  padding: var(--spacing--32, 32px);
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-left: 3px solid #B23A48;
  border-radius: var(--_🔘-radius---radius--small, 8px);
  background-color: #FFFFFF;
}
.problema-card .card-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing--16, 16px);
  color: rgba(26, 35, 50, 0.6);
}
.problema-card .text-h5 {
  margin-bottom: var(--spacing--12, 12px);
}
@media screen and (max-width: 767px) {
  .problema-cards-grid { grid-template-columns: 1fr; }
}

/* F'.3 / Cambio 5 — La solución: recovered template expandable cards */
.solucion-section .image-wrap-expandable.card-bg-proveedores {
  background: linear-gradient(135deg, var(--accent) 0%, var(--dark) 100%);
}
.solucion-section .image-wrap-expandable.card-bg-empresas {
  background: linear-gradient(135deg, var(--dark) 0%, var(--accent) 100%);
}

/* Portada card images: 16:9 cover + hover-zoom. Template accordion expand
   (width:150% on hover) is preserved; the image also scales 1.06 within
   overflow:hidden, so both motions coexist on hover. */
.solucion-section .card-expandable-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease-out;
  z-index: 0;
}
.solucion-section .card-expandable:hover .card-expandable-img {
  transform: scale(1.06);
}
/* Plant photo runs brighter than the tablet shot — even out luminosity. */
.solucion-section .card-bg-proveedores .card-expandable-img {
  filter: brightness(0.92);
}
/* Legibility overlay over the image; badge + title sit above at z-index 2. */
.solucion-section .overlay-expandable {
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 70%);
}
@media screen and (max-width: 767px) {
  .solucion-section .card-bg-proveedores .card-expandable-img {
    object-position: center right;
  }
}

/* Stats compact — section 2 after headline + subtitle removed */
.stats-compact .headline-column {
  margin-bottom: var(--spacing--32, 32px);
}
.stats-compact .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing--24, 24px);
}
@media screen and (max-width: 767px) {
  .stats-compact .stats-grid { grid-template-columns: 1fr; }
}

/* Fase G' — Hero background: animated Mexico SVG (replaces template video) */
.hero-bg-wrap {
  position: relative;
  overflow: hidden;
}
/* Pass clicks through the decorative dark overlay to the hero buttons beneath */
.video-home-a .overlay-dark-16 {
  pointer-events: none;
}
.hero-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.7;
  pointer-events: none;
}
/* Lift hero content above the absolute SVG background */
.hero-bg-wrap > .w-layout-blockcontainer.main-container {
  position: relative;
  z-index: 1;
}
/* Mexico outline: one-shot draw, then stays visible (no erase loop). */
.hero-bg-svg .mx-outline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawMxOutline 12s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}
@keyframes drawMxOutline {
  to { stroke-dashoffset: 0; }
}

/* Connection lines between cities: draw in sequence 1.5s after the outline finishes, then stay. */
.hero-bg-svg .mx-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawLine 1.2s ease-out forwards;
}
.hero-bg-svg .mx-line:nth-child(1) { animation-delay: 13.8s; }
.hero-bg-svg .mx-line:nth-child(2) { animation-delay: 14.4s; }
.hero-bg-svg .mx-line:nth-child(3) { animation-delay: 15.0s; }
.hero-bg-svg .mx-line:nth-child(4) { animation-delay: 15.6s; }
.hero-bg-svg .mx-line:nth-child(5) { animation-delay: 16.2s; }
.hero-bg-svg .mx-line:nth-child(6) { animation-delay: 16.8s; }
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* City dots: continuous gentle pulse (unchanged behavior, runs forever). */
.hero-bg-svg .city {
  fill: var(--accent);
  filter: drop-shadow(0 0 12px var(--accent));
  /* Animate transform, never the `r` attribute: `r` forces a layout + full
     repaint of the SVG on every frame, and the fixed navbar painted on top of
     it gets dragged into the same repaint (that is the stuttering logo). */
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.hero-bg-svg .city:nth-child(1) { animation: pulseCity 3s ease-in-out 0.0s infinite; }
.hero-bg-svg .city:nth-child(2) { animation: pulseCity 3s ease-in-out 0.4s infinite; }
.hero-bg-svg .city:nth-child(3) { animation: pulseCity 3s ease-in-out 0.8s infinite; }
.hero-bg-svg .city:nth-child(4) { animation: pulseCity 3s ease-in-out 1.2s infinite; }
.hero-bg-svg .city:nth-child(5) { animation: pulseCity 3s ease-in-out 1.6s infinite; }
.hero-bg-svg .city:nth-child(6) { animation: pulseCity 3s ease-in-out 2.0s infinite; }
.hero-bg-svg .city:nth-child(7) { animation: pulseCity 3s ease-in-out 2.4s infinite; }
@keyframes pulseCity {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.57); opacity: 0.45; }
}

/* Radar pings: concentric circles growing from each city center. */
.hero-bg-svg .city-ping {
  fill: var(--accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.hero-bg-svg .city-ping:nth-child(1) { animation: radarPing 9s ease-out 18.5s infinite; }
.hero-bg-svg .city-ping:nth-child(2) { animation: radarPing 9s ease-out 19.8s infinite; }
.hero-bg-svg .city-ping:nth-child(3) { animation: radarPing 9s ease-out 21.1s infinite; }
.hero-bg-svg .city-ping:nth-child(4) { animation: radarPing 9s ease-out 22.4s infinite; }
.hero-bg-svg .city-ping:nth-child(5) { animation: radarPing 9s ease-out 23.7s infinite; }
.hero-bg-svg .city-ping:nth-child(6) { animation: radarPing 9s ease-out 25.0s infinite; }
.hero-bg-svg .city-ping:nth-child(7) { animation: radarPing 9s ease-out 26.3s infinite; }
@keyframes radarPing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(5); opacity: 0; }
}

/* Respect prefers-reduced-motion: stop all hero animations, show the final state. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-svg .mx-outline,
  .hero-bg-svg .mx-line,
  .hero-bg-svg .city,
  .hero-bg-svg .city-ping {
    animation: none !important;
  }
  .hero-bg-svg .mx-outline { stroke-dashoffset: 0; }
  .hero-bg-svg .mx-line    { stroke-dashoffset: 0; }
  .hero-bg-svg .city-ping  { opacity: 0; }
}

/* Fase J'.3 — Issue #5 — Tabs: stock images removed, feature bullets added per COPY */
.tab-bullets {
  list-style: none;
  margin: var(--spacing--12, 12px) 0 0;
  padding: 0;
}
.tab-bullets li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
  font-family: inherit;
  font-size: var(--_🔠-typography---size--body-2, 17px);
  line-height: var(--_🔠-typography---line-height--body-2, 24px);
  color: var(--text);
}
.tab-bullets li:last-child {
  border-bottom: none;
}
.tab-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
/* Tab panes show SVG diagrams (Tarea J'.4). features-image-placeholder remains as right-column spacer for the absolute .tabs-content-features. */
.tab-diagram {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
}
/* Webflow tab JS toggles .w--tab-active on the visible pane and leaves others as .w-tab-pane
   (which has display:none in components.css). Scope flex+padding+bg to the active pane only
   so inactive panes stay hidden. */
.tab-pane-features.w--tab-active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing--24, 24px);
  background-color: rgba(10, 37, 64, 0.02);
  border-radius: 8px;
}
/* Subtle animations: pulse on marketplace center, dashed-rotate on stamp */
.mp-center {
  transform-box: fill-box;
  transform-origin: center;
  animation: mpCenterPulse 3.5s ease-in-out infinite;
}
@keyframes mpCenterPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.doc-stamp {
  transform-box: fill-box;
  transform-origin: center;
  animation: docStampRotate 24s linear infinite;
}
@keyframes docStampRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.data-bar-grow {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: dataBarGrow 4s ease-in-out infinite;
}
@keyframes dataBarGrow {
  0%, 100% { transform: scaleY(0.85); }
  50%      { transform: scaleY(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-center,
  .doc-stamp,
  .data-bar-grow {
    animation: none;
  }
}
@media screen and (max-width: 991px) {
  .tab-pane-features.w--tab-active {
    padding: var(--spacing--16, 16px);
  }
}

/* F'.4 — Conexus vs ChatGPT */
.vs-chatgpt-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--spacing--32, 32px);
}
.vs-chatgpt-table th,
.vs-chatgpt-table td {
  padding: var(--spacing--24, 24px);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}
.vs-chatgpt-table th {
  background-color: rgba(0, 102, 204, 0.06);
  font-weight: 700;
  color: var(--dark);
  font-family: var(--_🔠-typography---font-family--button-1, inherit);
}
.vs-chatgpt-table .td-dimension {
  font-weight: 700;
  color: var(--dark);
  width: 30%;
}
.vs-chatgpt-table td:nth-child(2) {
  color: rgba(10, 37, 64, 0.64);
}
.vs-chatgpt-table .td-conexus {
  color: var(--dark);
  background-color: rgba(0, 102, 204, 0.08);
}
/* Issue #6 — zebra striping (light bg, so dark transparency), hover, contrast */
.vs-chatgpt-table tbody tr:nth-child(even) td {
  background-color: rgba(10, 37, 64, 0.025);
}
.vs-chatgpt-table tbody tr:nth-child(even) td.td-conexus {
  background-color: rgba(0, 102, 204, 0.10);
}
.vs-chatgpt-table tbody tr td {
  transition: background-color 0.2s;
}
.vs-chatgpt-table tbody tr:hover td {
  background-color: rgba(0, 102, 204, 0.05);
}
.vs-chatgpt-table tbody tr:hover td.td-conexus {
  background-color: rgba(0, 102, 204, 0.13);
}
@media screen and (max-width: 991px) {
  .vs-chatgpt-table thead { display: none; }
  .vs-chatgpt-table,
  .vs-chatgpt-table tbody,
  .vs-chatgpt-table tr,
  .vs-chatgpt-table td { display: block; width: 100%; }
  .vs-chatgpt-table tr {
    margin-bottom: var(--spacing--16, 16px);
    padding: var(--spacing--24, 24px);
    border: 1px solid rgba(10, 37, 64, 0.12);
    border-radius: var(--_🔘-radius---radius--small, 8px);
    background-color: #FFFFFF;
  }
  .vs-chatgpt-table td {
    padding: var(--spacing--8, 8px) 0;
    border: none;
  }
  .vs-chatgpt-table .td-dimension {
    width: auto;
    font-size: var(--_🔠-typography---size--h6);
    line-height: var(--_🔠-typography---line-height--h6);
    margin-bottom: var(--spacing--8, 8px);
  }
  .vs-chatgpt-table .td-conexus {
    background-color: transparent;
  }
  .vs-chatgpt-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--_🔠-typography---size--label-1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(10, 37, 64, 0.48);
    margin-bottom: 4px;
  }
}

/* F'.5 — Planes y precios (4 cards) */
.planes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing--24, 24px);
  margin-top: var(--spacing--32, 32px);
  align-items: stretch;
}
/* Issue #7 — 4 cols only at >=1400px. Below that, fall back gracefully. */
@media screen and (max-width: 1399px) {
  .planes-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .planes-grid { grid-template-columns: 1fr; }
}
.planes-grid .card-pricing {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing--16, 16px);
}
.planes-grid .card-pricing.featured {
  border: 2px solid var(--accent);
  border-radius: var(--_🔘-radius---radius--small, 8px);
  padding-top: var(--spacing--32, 32px);
}
.plan-badge {
  position: absolute;
  top: calc(-1 * var(--spacing--12, 12px));
  right: var(--spacing--16, 16px);
  padding: 4px 12px;
  border-radius: 999px;
  background-color: var(--accent);
  color: #FFFFFF;
  font-size: var(--_🔠-typography---size--label-2, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 2;
}
/* F'.6 — Respaldo institucional (3 stats) */
.respaldo-stats {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--spacing--32, 32px);
}
.respaldo-stats .text-h2 {
  color: var(--accent);
}
@media screen and (max-width: 767px) {
  .respaldo-stats { grid-template-columns: 1fr; }
}

/* Fase H' — Waitlist form (inside .cta-master, dark bg) */
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
  margin: var(--spacing--40, 40px) auto 0;
  width: 100%;
}
.waitlist-form input[type="text"],
.waitlist-form input[type="email"] {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-family: inherit;
  font-size: var(--_🔠-typography---size--body-2);
  line-height: var(--_🔠-typography---line-height--body-2);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.waitlist-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.waitlist-form input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
}
.waitlist-submit {
  margin-top: 4px;
  padding: 16px 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--accent);
  color: #FFFFFF;
  font-family: inherit;
  font-size: var(--_🔠-typography---size--button-1);
  font-weight: 600;
  letter-spacing: var(--_🔠-typography---letter-spacing--button-1);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s, opacity 0.2s;
  width: 100%;
}
.waitlist-submit:hover {
  background-color: #1A78D4;
}
.waitlist-submit:active {
  transform: translateY(1px);
}
.waitlist-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.waitlist-disclaimer {
  margin: 16px 0 0;
  font-size: var(--_🔠-typography---size--body-3);
  line-height: var(--_🔠-typography---line-height--body-3);
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
.waitlist-success {
  max-width: 500px;
  margin: var(--spacing--40, 40px) auto 0;
  text-align: center;
  color: #FFFFFF;
}
.waitlist-success h3 {
  margin: 0 0 var(--spacing--12, 12px);
  color: #FFFFFF;
}
.waitlist-success p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--_🔠-typography---size--body-1);
  line-height: var(--_🔠-typography---line-height--body-1);
}
.waitlist-error {
  max-width: 500px;
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(178, 58, 72, 0.5);
  border-radius: 8px;
  background-color: rgba(178, 58, 72, 0.2);
}
.waitlist-error p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--_🔠-typography---size--body-2);
  line-height: var(--_🔠-typography---line-height--body-2);
}

/* Fase J' — CTA-master centered layout + Evermind treatment restored */
.cta-master.cta-centered {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: 160px;
  padding-bottom: 160px;
  background-color: #0A2540;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.28) 100%);
  background-size: 100% 200%;
  background-position: 0% 0%;
  animation: ctaGradientBreathe 22s ease-in-out infinite;
}
.cta-master.cta-centered .cta-dots-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/Dots.svg');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  animation: ctaDotsDrift 28s ease-in-out infinite;
  will-change: background-position;
}
@keyframes ctaGradientBreathe {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes ctaDotsDrift {
  0%   { background-position: 50% 50%; }
  50%  { background-position: 52% 48%; }
  100% { background-position: 50% 50%; }
}
.cta-master.cta-centered .eyebrow,
.cta-master.cta-centered .eyebrow .label-small {
  color: var(--accent);
}
.cta-master.cta-centered .heading-cta h2 {
  color: #FFFFFF;
}
.cta-master.cta-centered .section-subtitle {
  color: rgba(255, 255, 255, 0.75);
}
.cta-master.cta-centered .waitlist-disclaimer {
  color: rgba(255, 255, 255, 0.5);
}
.cta-master.cta-centered .cta-content-wrap {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.cta-master.cta-centered .eyebrow {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cta-master.cta-centered .heading-cta {
  display: flex;
  justify-content: center;
}
.cta-master.cta-centered .heading-cta h2 {
  text-align: center;
  max-width: 18ch;
}
.cta-master.cta-centered .section-subtitle {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.cta-master.cta-centered .waitlist-form {
  margin-left: auto;
  margin-right: auto;
}
.cta-master.cta-centered .waitlist-success,
.cta-master.cta-centered .waitlist-error {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 991px) {
  .cta-master.cta-centered {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  .cta-master.cta-centered .cta-dots-layer {
    background-size: cover;
    opacity: 0.18;
  }
}
@media screen and (max-width: 767px) {
  .cta-master.cta-centered {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .cta-master.cta-centered .cta-dots-layer {
    background-size: cover;
    opacity: 0.14;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-master.cta-centered {
    animation: none;
    background-position: 0% 50%;
  }
  .cta-master.cta-centered .cta-dots-layer {
    animation: none;
    background-position: 50% 50%;
  }
}

/* Fase J'.3 — Issue #4 — External link icon on "Interactuar con Connie" card */
.card-external .text-h6 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.external-link-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s, transform 0.2s;
}
.card-external:hover .external-link-icon {
  color: #FFFFFF;
  transform: translate(2px, -2px);
}

/* Fase J'.3 — Issue #2 — Split $500K + MXN to prevent overflow on narrow viewports */
.stat-number-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.stat-number-big {
  display: block;
  line-height: 1;
}
.stat-number-unit {
  display: block;
  font-family: inherit;
  font-size: var(--_🔠-typography---size--h5, 24px);
  line-height: 1.2;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

/* Fase J'.3 — Issue #1 — Align hero secondary CTA with primary */
.button-wrap-home-a .cta-book.light-2 {
  padding: var(--spacing--12, 12px) var(--spacing--16, 16px);
  justify-content: center;
  align-items: center;
}

/* Hero CTA primario — white text on accent blue for readability on dark hero bg */
.hero-home-a-section .cta-main {
  color: var(--light);
  transition: color 0.2s ease;
}
.hero-home-a-section .cta-main .button-text {
  text-shadow: 0 1.5em 0 var(--light);
}
.hero-home-a-section .cta-main .button-bg {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.35);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hero-home-a-section .cta-main:hover .button-bg {
  background-color: #0052A3;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.45);
}

/* Remove invisible-but-expensive backdrop blur from all solid-color button bgs (scroll perf) */
.button-bg {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Hero CTA terciario — Platica con Connie (ghost borde cyan, no compite con el primario accent) */
.cta-connie-hero {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--8, 8px);
  padding: var(--spacing--12, 12px) var(--spacing--16, 16px);
  background-color: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.cta-connie-hero:hover {
  background-color: rgba(0, 200, 255, 0.12);
  border-color: #00C8FF;
  transform: translateY(-2px);
}
.cta-connie-hero:focus-visible {
  outline: 2px solid #00C8FF;
  outline-offset: 2px;
}

/* Fase J'.3 — Issue #10 — Conexus typographic brand (nav + footer) */
.brand-text {
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}
.brand-text-nav { font-size: 32px; }
.brand-text-footer { font-size: 24px; }
@media screen and (max-width: 767px) {
  .brand-text-nav { font-size: 28px; }
  .brand-text-footer { font-size: 22px; }
}

/* ====================================================================== */
/* === /proveedores.html ================================================ */
/* ====================================================================== */

/* L'.1 — Skeleton: hero (light) + footer */
.proveedores-page {
  background-color: var(--light);
}
/* Hero — light, typographic, no map. Marketplace SVG on the right. */
.proveedores-hero {
  background-color: var(--light);
  padding-top: 200px;
  padding-bottom: var(--spacing--120, 120px);
  scroll-margin-top: 120px;
}
.proveedores-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--spacing--64, 64px);
}
.proveedores-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--16, 16px);
}
.proveedores-hero-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--dark);
  max-width: 14ch;
}
.proveedores-hero-subtitle {
  color: rgba(10, 37, 64, 0.64);
  font-size: var(--_🔠-typography---size--body-1);
  line-height: var(--_🔠-typography---line-height--body-1);
  max-width: 48ch;
}
.proveedores-hero-cta {
  margin-top: var(--spacing--16, 16px);
}
.proveedores-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.proveedores-hero-svg {
  width: 100%;
  max-width: 460px;
  height: auto;
}
.prov-center {
  transform-box: fill-box;
  transform-origin: center;
  animation: provCenterPulse 3.5s ease-in-out infinite;
}
@keyframes provCenterPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
/* Footer on light page: keep the master-footer light bg, no video */
.proveedores-footer {
  background-color: var(--light);
}
@media screen and (max-width: 991px) {
  .proveedores-hero {
    padding-top: 160px;
  }
  .proveedores-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing--40, 40px);
  }
  .proveedores-hero-visual {
    order: -1;
  }
  .proveedores-hero-svg {
    max-width: 320px;
  }
}
@media screen and (max-width: 767px) {
  .proveedores-hero {
    padding-top: 140px;
    padding-bottom: var(--spacing--64, 64px);
  }
  .proveedores-hero-svg {
    max-width: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .prov-center { animation: none; }
}

/* L'.2 — "Cómo funciona": 3-step section (light) */
.proveedores-pasos {
  background-color: var(--light);
  padding-top: var(--spacing--120, 120px);
  padding-bottom: var(--spacing--120, 120px);
}
.proveedores-pasos-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--16, 16px);
  margin-bottom: var(--spacing--64, 64px);
}
.proveedores-pasos-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--dark);
  max-width: 18ch;
}
.proveedores-pasos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing--32, 32px);
}
.proveedores-paso-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--12, 12px);
  background-color: #FFFFFF;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 12px;
  padding: var(--spacing--40, 40px);
}
.proveedores-paso-num {
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  color: var(--accent);
}
.proveedores-paso-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--dark);
  font-size: var(--_🔠-typography---size--h6, 28px);
  line-height: var(--_🔠-typography---line-height--h6, 32px);
  font-weight: 600;
}
.proveedores-paso-desc {
  margin: 0;
  color: rgba(26, 35, 50, 0.8);
  font-size: var(--_🔠-typography---size--body-2, 19px);
  line-height: var(--_🔠-typography---line-height--body-2, 28px);
}
@media screen and (max-width: 991px) {
  .proveedores-pasos {
    padding-top: var(--spacing--80, 80px);
    padding-bottom: var(--spacing--80, 80px);
  }
  .proveedores-pasos-grid {
    gap: var(--spacing--24, 24px);
  }
}
@media screen and (max-width: 767px) {
  .proveedores-pasos-grid {
    grid-template-columns: 1fr;
  }
  .proveedores-paso-card {
    padding: var(--spacing--32, 32px);
  }
  .proveedores-paso-num {
    font-size: 48px;
  }
}

/* L'.3 — "Categorías": 8-card services grid (light) */
.proveedores-categorias {
  background-color: var(--light);
  padding-top: var(--spacing--120, 120px);
  padding-bottom: var(--spacing--120, 120px);
}
.proveedores-cat-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--16, 16px);
  margin-bottom: var(--spacing--64, 64px);
  max-width: 720px;
}
.proveedores-cat-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--dark);
  max-width: 20ch;
}
.proveedores-cat-subtitle {
  margin: 0;
  color: rgba(26, 35, 50, 0.8);
  font-size: var(--_🔠-typography---size--body-2, 19px);
  line-height: var(--_🔠-typography---line-height--body-2, 28px);
  max-width: 56ch;
}
.proveedores-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing--24, 24px);
}
.proveedores-cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--8, 8px);
  background-color: #FFFFFF;
  border: 1px solid rgba(10, 37, 64, 0.08);
  border-radius: 12px;
  padding: var(--spacing--24, 24px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.proveedores-cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 102, 204, 0.4);
  box-shadow: 0 12px 28px rgba(10, 37, 64, 0.08);
}
.proveedores-cat-icon {
  width: 36px;
  height: 36px;
  color: var(--accent);
  margin-bottom: var(--spacing--8, 8px);
}
.proveedores-cat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.proveedores-cat-name {
  margin: 0;
  color: var(--dark);
  font-size: var(--_🔠-typography---size--h6, 28px);
  line-height: var(--_🔠-typography---line-height--h6, 32px);
  font-weight: 600;
}
.proveedores-cat-desc {
  margin: 0;
  color: rgba(26, 35, 50, 0.8);
  font-size: var(--_🔠-typography---size--body-3, 14px);
  line-height: var(--_🔠-typography---line-height--body-3, 18px);
}
@media screen and (max-width: 991px) {
  .proveedores-categorias {
    padding-top: var(--spacing--80, 80px);
    padding-bottom: var(--spacing--80, 80px);
  }
  .proveedores-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .proveedores-cat-grid {
    grid-template-columns: 1fr;
  }
}

/* L'.4 — "Por qué Conexus": stats (dark block for contrast) */
.proveedores-porque {
  background-color: var(--dark);
  color: var(--light);
  padding-top: var(--spacing--120, 120px);
  padding-bottom: var(--spacing--120, 120px);
}
.proveedores-porque-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--16, 16px);
  margin-bottom: var(--spacing--64, 64px);
  max-width: 760px;
}
.proveedores-porque .label-small {
  color: rgba(255, 255, 255, 0.72);
}
.proveedores-porque .eyebrow-circle {
  background-color: var(--accent);
}
.proveedores-porque-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--light);
  max-width: 22ch;
}
.proveedores-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing--40, 40px);
}
.proveedores-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--12, 12px);
  padding-top: var(--spacing--24, 24px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.proveedores-stat-num {
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.proveedores-stat-label {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--_🔠-typography---size--body-2, 19px);
  line-height: var(--_🔠-typography---line-height--body-2, 28px);
}
@media screen and (max-width: 991px) {
  .proveedores-porque {
    padding-top: var(--spacing--80, 80px);
    padding-bottom: var(--spacing--80, 80px);
  }
  .proveedores-stats-grid {
    gap: var(--spacing--32, 32px);
  }
  .proveedores-stat-num {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  .proveedores-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing--40, 40px);
  }
}

/* L'.5 — FAQ: native details/summary accordion (light, JS-free) */
.proveedores-faq {
  background-color: var(--light);
  padding-top: var(--spacing--120, 120px);
  padding-bottom: var(--spacing--120, 120px);
}
.proveedores-faq-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--16, 16px);
  margin-bottom: var(--spacing--48, 48px);
}
.proveedores-faq-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--dark);
}
.proveedores-faq-list {
  max-width: 820px;
}
.proveedores-faq-item {
  border-bottom: 1px solid rgba(10, 37, 64, 0.12);
}
.proveedores-faq-item:first-child {
  border-top: 1px solid rgba(10, 37, 64, 0.12);
}
.proveedores-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--24, 24px);
  padding: var(--spacing--24, 24px) 0;
  cursor: pointer;
  list-style: none;
  color: var(--dark);
  font-size: var(--_🔠-typography---size--h6, 28px);
  line-height: var(--_🔠-typography---line-height--h6, 32px);
  font-weight: 600;
}
.proveedores-faq-q::-webkit-details-marker {
  display: none;
}
.proveedores-faq-chevron {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.proveedores-faq-item[open] .proveedores-faq-chevron {
  transform: rotate(180deg);
}
.proveedores-faq-a {
  padding: 0 0 var(--spacing--24, 24px);
  max-width: 64ch;
  color: rgba(26, 35, 50, 0.8);
  font-size: var(--_🔠-typography---size--body-2, 19px);
  line-height: var(--_🔠-typography---line-height--body-2, 28px);
}
@media screen and (max-width: 991px) {
  .proveedores-faq {
    padding-top: var(--spacing--80, 80px);
    padding-bottom: var(--spacing--80, 80px);
  }
}
@media screen and (max-width: 767px) {
  .proveedores-faq-q {
    font-size: var(--_🔠-typography---size--body-1, 24px);
    line-height: 1.3;
    gap: var(--spacing--16, 16px);
  }
}

/* L'.6 — Registration form (light, defined inputs, accent button) */
.proveedores-registro {
  background-color: var(--light);
  padding-top: var(--spacing--120, 120px);
  padding-bottom: var(--spacing--120, 120px);
  scroll-margin-top: 120px;
}
.proveedores-registro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  gap: var(--spacing--16, 16px);
}
.proveedores-registro-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--dark);
}
.proveedores-registro-subtitle {
  margin: 0;
  color: rgba(26, 35, 50, 0.8);
  font-size: var(--_🔠-typography---size--body-2, 19px);
  line-height: var(--_🔠-typography---line-height--body-2, 28px);
  max-width: 44ch;
}
.proveedores-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--12, 12px);
  width: 100%;
  margin-top: var(--spacing--24, 24px);
  scroll-margin-top: 140px;
}
.proveedores-form input {
  width: 100%;
  padding: var(--spacing--16, 16px);
  background-color: #FFFFFF;
  border: 1px solid rgba(10, 37, 64, 0.15);
  border-radius: 8px;
  color: var(--dark);
  font-family: inherit;
  font-size: var(--_🔠-typography---size--body-2, 19px);
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.proveedores-form input::placeholder {
  color: rgba(10, 37, 64, 0.4);
}
.proveedores-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}
.proveedores-form-submit {
  width: 100%;
  margin-top: var(--spacing--8, 8px);
  padding: var(--spacing--16, 16px);
  background-color: var(--accent);
  border: none;
  border-radius: 8px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: var(--_🔠-typography---size--body-2, 19px);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.proveedores-form-submit:hover {
  background-color: #0A2540;
}
.proveedores-form-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.proveedores-form-disclaimer {
  margin: var(--spacing--8, 8px) 0 0;
  color: rgba(26, 35, 50, 0.56);
  font-size: var(--_🔠-typography---size--body-3, 14px);
  line-height: var(--_🔠-typography---line-height--body-3, 18px);
}
.proveedores-form-success {
  margin-top: var(--spacing--24, 24px);
  text-align: center;
}
.proveedores-form-success h3 {
  margin: 0;
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  color: var(--dark);
  font-size: var(--_🔠-typography---size--h4, 40px);
  line-height: var(--_🔠-typography---line-height--h4, 48px);
}
.proveedores-form-error {
  margin-top: var(--spacing--16, 16px);
  padding: var(--spacing--12, 12px) var(--spacing--16, 16px);
  background-color: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
}
.proveedores-form-error p {
  margin: 0;
  color: #B91C1C;
  font-size: var(--_🔠-typography---size--body-3, 14px);
  line-height: var(--_🔠-typography---line-height--body-3, 18px);
}
@media screen and (max-width: 991px) {
  .proveedores-registro {
    padding-top: var(--spacing--80, 80px);
    padding-bottom: var(--spacing--80, 80px);
  }
}

/* === connie.html ====================================================== */
/* Dedicated Connie page: deep-navy identity + cyan #00C8FF accents. */
.connie-page {
  background-color: var(--dark);
  color: var(--light);
}
.connie-footer {
  background-color: var(--dark);
}
/* Connie identity eyebrow: cyan dot + cyan label */
.connie-eyebrow .eyebrow-circle {
  background-color: #00C8FF;
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.6);
}
.connie-eyebrow .label-small {
  color: #00C8FF;
}
/* Hero */
.connie-hero {
  background-color: var(--dark);
  padding-top: 200px;
  padding-bottom: var(--spacing--80, 80px);
}
.connie-hero-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--16, 16px);
  max-width: 800px;
}
.connie-hero-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--light);
  max-width: 16ch;
}
.connie-hero-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--_🔠-typography---size--body-1, 24px);
  line-height: var(--_🔠-typography---line-height--body-1, 32px);
  max-width: 52ch;
}
.connie-hero-cta {
  margin-top: var(--spacing--16, 16px);
}
/* Content section */
.connie-content {
  background-color: var(--dark);
  padding-top: var(--spacing--64, 64px);
  padding-bottom: var(--spacing--120, 120px);
}
.connie-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--16, 16px);
  margin-bottom: var(--spacing--48, 48px);
  max-width: 760px;
}
.connie-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--light);
  max-width: 18ch;
}
.connie-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--_🔠-typography---size--body-1, 24px);
  line-height: var(--_🔠-typography---line-height--body-1, 32px);
  max-width: 52ch;
}
/* Block 1 — feature cards */
.connie-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing--24, 24px);
}
.connie-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--8, 8px);
  padding: var(--spacing--32, 32px);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
.connie-card-icon {
  width: 40px;
  height: 40px;
  color: #00C8FF;
  margin-bottom: var(--spacing--8, 8px);
}
.connie-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.connie-card-title {
  margin: 0;
  color: var(--light);
  font-size: var(--_🔠-typography---size--h6, 28px);
  line-height: var(--_🔠-typography---line-height--h6, 32px);
  font-weight: 600;
}
.connie-card-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--_🔠-typography---size--body-2, 19px);
  line-height: var(--_🔠-typography---line-height--body-2, 28px);
}
/* Screenshot placeholders (replace inner span with <img> later) */
.connie-screenshot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin: var(--spacing--48, 48px) auto 0;
  aspect-ratio: 16 / 10;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 200, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
}
.connie-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.connie-screenshot-label {
  padding: var(--spacing--16, 16px);
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--_🔠-typography---size--body-2, 19px);
}
/* Divider between block 1 and block 2 */
.connie-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: var(--spacing--80, 80px) 0;
}
/* Block 2 — usage steps */
.connie-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing--32, 32px);
}
.connie-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--8, 8px);
}
.connie-step-num {
  font-family: Merriweather, Georgia, serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  color: var(--accent);
}
.connie-step-title {
  margin: var(--spacing--8, 8px) 0 0;
  color: var(--light);
  font-size: var(--_🔠-typography---size--h6, 28px);
  line-height: var(--_🔠-typography---line-height--h6, 32px);
  font-weight: 600;
}
.connie-step-desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--_🔠-typography---size--body-2, 19px);
  line-height: var(--_🔠-typography---line-height--body-2, 28px);
}
.connie-step-example {
  display: block;
  margin-bottom: var(--spacing--8, 8px);
  padding: var(--spacing--12, 12px) var(--spacing--16, 16px);
  background-color: rgba(0, 200, 255, 0.08);
  border-left: 2px solid #00C8FF;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
}
/* Final CTA */
.connie-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing--16, 16px);
  margin-top: var(--spacing--80, 80px);
  text-align: center;
}
.connie-cta-support {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: var(--_🔠-typography---size--body-2, 19px);
}
.connie-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--8, 8px);
  padding: var(--spacing--16, 16px) var(--spacing--32, 32px);
  background-color: var(--accent);
  border: 1px solid #00C8FF;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: var(--_🔠-typography---size--body-2, 19px);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.connie-cta:hover {
  background-color: #0A2540;
  box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.25);
  transform: translateY(-2px);
}
.connie-cta:focus-visible {
  outline: 2px solid #00C8FF;
  outline-offset: 2px;
}
.connie-cta-large {
  padding: var(--spacing--16, 16px) var(--spacing--40, 40px);
}
.connie-cta-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
@media screen and (max-width: 991px) {
  .connie-hero {
    padding-top: 160px;
  }
  .connie-content {
    padding-bottom: var(--spacing--80, 80px);
  }
  .connie-cards,
  .connie-steps {
    gap: var(--spacing--24, 24px);
  }
  .connie-divider {
    margin: var(--spacing--64, 64px) 0;
  }
}
@media screen and (max-width: 767px) {
  .connie-hero {
    padding-top: 140px;
  }
  .connie-cards,
  .connie-steps {
    grid-template-columns: 1fr;
  }
  .connie-step-num {
    font-size: 48px;
  }
}

/* --- N'.2 — Hero chat mockup + simulated typing animation -------------- */
.connie-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--spacing--64, 64px);
}
.connie-hero-visual {
  display: flex;
  justify-content: center;
  width: 100%;
}
.connie-chat-mockup {
  width: 100%;
  max-width: 420px;
  padding: var(--spacing--16, 16px) var(--spacing--16, 16px) var(--spacing--24, 24px);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 200, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.connie-chat-header {
  display: flex;
  align-items: center;
  gap: var(--spacing--8, 8px);
  padding-bottom: var(--spacing--12, 12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.connie-chat-header-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00C8FF;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.7);
}
.connie-chat-header-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 600;
}
.connie-chat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 240px;
  padding-top: var(--spacing--16, 16px);
}
.connie-chat-bubble {
  box-sizing: border-box;
  max-width: 88%;
  padding: var(--spacing--12, 12px) var(--spacing--16, 16px);
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.4;
  color: #FFFFFF;
}
.connie-chat-bubble-user {
  align-self: flex-end;
  background-color: var(--accent);
  border-bottom-right-radius: 4px;
  animation: connieUserMsg 8s ease-in-out infinite;
}
.connie-chat-typing {
  box-sizing: border-box;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--spacing--12, 12px) var(--spacing--16, 16px);
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  overflow: hidden;
  animation: connieTyping 8s ease-in-out infinite;
}
.connie-chat-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #00C8FF;
  animation: connieDotBounce 1.4s ease-in-out infinite;
}
.connie-chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.connie-chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }
.connie-chat-bubble-connie {
  box-sizing: border-box;
  align-self: flex-start;
  background-color: rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
  overflow: hidden;
  animation: connieReply 8s ease-in-out infinite;
}
/* User message: in at 0s, out at ~7.5s, restart at 8s */
@keyframes connieUserMsg {
  0%     { opacity: 0; transform: translateY(14px); }
  3.75%  { opacity: 1; transform: translateY(0); }
  90%    { opacity: 1; transform: translateY(0); }
  96%    { opacity: 0; transform: translateY(0); }
  100%   { opacity: 0; transform: translateY(14px); }
}
/* Typing indicator: in at 1.5s, out at 3s. Collapses via max-height. */
@keyframes connieTyping {
  0%      { opacity: 0; max-height: 0; margin-top: 0; }
  18.75%  { opacity: 0; max-height: 0; margin-top: 0; }
  22.5%   { opacity: 1; max-height: 52px; margin-top: 12px; }
  37.5%   { opacity: 1; max-height: 52px; margin-top: 12px; }
  40%     { opacity: 0; max-height: 0; margin-top: 0; }
  100%    { opacity: 0; max-height: 0; margin-top: 0; }
}
/* Connie reply: in at 3s, visible through 6s pause, out at ~7.5s */
@keyframes connieReply {
  0%      { opacity: 0; transform: translateY(14px); max-height: 0; margin-top: 0; }
  37.5%   { opacity: 0; transform: translateY(14px); max-height: 0; margin-top: 0; }
  41.25%  { opacity: 1; transform: translateY(0); max-height: 240px; margin-top: 12px; }
  90%     { opacity: 1; transform: translateY(0); max-height: 240px; margin-top: 12px; }
  96%     { opacity: 0; transform: translateY(0); max-height: 240px; margin-top: 12px; }
  100%    { opacity: 0; max-height: 0; margin-top: 0; }
}
@keyframes connieDotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}
@media screen and (max-width: 991px) {
  .connie-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing--40, 40px);
  }
  .connie-hero-visual {
    justify-content: center;
  }
  .connie-chat-mockup {
    max-width: 100%;
  }
}
/* Reduced motion: show full conversation, static, no typing, no loop */
@media (prefers-reduced-motion: reduce) {
  .connie-chat-bubble-user,
  .connie-chat-bubble-connie {
    animation: none;
    opacity: 1;
    transform: none;
    max-height: none;
    margin-top: 12px;
  }
  .connie-chat-bubble-user { margin-top: 0; }
  .connie-chat-typing { display: none; }
  .connie-chat-typing-dot { animation: none; }
  .connie-chat-body { min-height: 0; }
}

/* Real capturas (chat + pdf): containers drop the placeholder 16:10 so they
   size to each image's native ratio; cyan glow matches Connie identity.
   Multi-class selector (0,2,0) beats the generic .connie-screenshot img
   (0,1,1) to override object-fit:cover → contain. */
.connie-screenshot-1,
.connie-screenshot-2 {
  aspect-ratio: auto;
  box-shadow: 0 0 32px rgba(0, 200, 255, 0.15);
}
.connie-screenshot .connie-captura-chat,
.connie-screenshot .connie-captura-pdf {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
/* Deliverable sub-heading above the PDF captura */
.connie-deliverable-title {
  margin: var(--spacing--80, 80px) 0 var(--spacing--24, 24px);
  color: var(--light);
  font-size: var(--_🔠-typography---size--h5, 34px);
  line-height: var(--_🔠-typography---line-height--h5, 38px);
  font-weight: 600;
  text-align: center;
}
.connie-deliverable-title + .connie-screenshot {
  margin-top: 0;
}

/* ====================================================================== */
/* === Connie-first CTAs + mobile hardening ============================= */
/* The waitlist and proveedores forms were removed: every action now hands  */
/* the user over to the Connie app, where they log in and work.            */
/* ====================================================================== */

/* ---------- Primary "Platica con Connie" button ----------------------- */

.cta-connie-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
  font-size: 17px;
  line-height: 1.2;
  padding: 16px 24px;
  border-radius: 10px;
  min-height: 52px;
  justify-content: center;
}
.cta-connie-primary:hover {
  background-color: #0052a6;
  border-color: #0052a6;
}
.cta-connie-primary .connie-cta-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Supporting line under a Connie CTA.
   Defaults to the dark-on-light pairing; the dark sections opt into light. */
.hero-cta-note,
.cta-connie-note {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: rgba(26, 35, 50, 0.72);
  max-width: 42ch;
}
.hero-cta-note,
.cta-master .cta-connie-note,
.connie-page .cta-connie-note {
  color: rgba(255, 255, 255, 0.72);
}

.button-wrap-home-a {
  flex-flow: column;
  align-items: flex-start;
  gap: var(--spacing--12, 12px);
}

.cta-connie-actions {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--spacing--12, 12px);
  text-align: center;
}
.cta-connie-actions .cta-connie-note {
  text-align: center;
}

/* Footer band: the template's background <video> assets do not exist, so the
   markup was dropped. Keep the same visual weight with a static background. */
.footer-bg-static {
  background-color: var(--dark);
  background-image: radial-gradient(circle at 20% 0%, rgba(0, 102, 204, 0.35), transparent 55%),
                    radial-gradient(circle at 85% 30%, rgba(0, 200, 255, 0.18), transparent 50%);
}

/* ---------- Hero background: stop painting when it is off screen ------- */
/* conexus.js toggles .hero-offscreen via IntersectionObserver. */
.hero-bg-wrap.hero-offscreen .hero-bg-svg * {
  animation-play-state: paused !important;
}

/* ====================================================================== */
/* === Mobile (<= 991px) ================================================ */
/* ====================================================================== */

@media screen and (max-width: 991px) {

  /* -- Navbar ---------------------------------------------------------- */

  /* The template paints the bar with an absolutely positioned layer that fills
     .navbar — and .navbar grows to wrap the open dropdown, so the "bar" bled
     down the screen as a slab of dead white. Paint .nav-wrap instead, which is
     exactly the bar, and let the dropdown be its own floating card.
     Dropping backdrop-filter here also matters: re-blurring the page behind a
     fixed bar on every scrolled frame is what made the logo stutter. */
  .nav-bg-wrap {
    display: none;
  }
  .nav-wrap {
    background-color: #F8FAFC;
    border-radius: var(--_🔘-radius---radius--large, 16px);
  }
  .nav-blur {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(10, 37, 64, 0.6);
  }

  .master-navigation {
    padding-top: 12px;
    padding-right: 12px;
    padding-left: 12px;
  }
  .nav-wrap {
    grid-column-gap: 8px;
    padding: 8px 8px 8px 12px;
  }
  .brand-navbar {
    max-width: none;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
  }
  .brand-text-nav {
    font-size: 24px;
  }

  /* The nav CTA has to survive next to the brand and the burger. */
  .cta-nav-connie {
    flex: none;
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Match the burger to the CTA so both clear the 44px tap-target guideline. */
  .menu-button {
    width: 44px;
    height: 44px;
  }
  .cta-nav-connie .button-text {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }

  /* Mobile dropdown links: real tap targets, full width. */
  .nav-menu .wrap-nav-links {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }
  .nav-menu .nav-link {
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* -- Hero CTA -------------------------------------------------------- */

  .button-wrap-home-a {
    width: 100%;
    align-items: stretch;
  }
  .cta-connie-primary {
    width: 100%;
  }
  .hero-cta-note {
    max-width: none;
  }
}

@media screen and (max-width: 767px) {

  .brand-text-nav {
    font-size: 22px;
  }
  .cta-nav-connie .button-text {
    font-size: 13px;
  }

  /* Plan / section / page-hero buttons: full width, thumb-sized. */
  .plan-button-wrap .cta-main,
  .proveedores-hero-cta .cta-main,
  .connie-hero-cta .connie-cta,
  .cta-connie-actions .cta-connie-primary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* Cards in "La solución" stack; keep them tall enough to read. */
  .expandable-halves {
    grid-template-columns: 1fr;
  }
}

/* ---------- Coarse pointers: drop the per-frame hero effects ----------- */
/* Phones repaint the whole hero SVG for the glow + radar pings. The outline
   and the connection lines still draw; only the looping work is dropped. */
@media (hover: none) and (pointer: coarse) {
  .hero-bg-svg .city {
    filter: none;
    animation: none;
    opacity: 0.95;
  }
  .hero-bg-svg .city-ping {
    display: none;
  }
}

/* ---------- Hero entrance ---------------------------------------------- */
/* The template shipped these two blocks with inline `opacity:0` and relied on
   a Webflow IX2 interaction to reveal them. When that interaction did not fire
   the whole hero — headline and CTA included — stayed invisible.
   The entrance is plain CSS now, and deliberately uses no animation-delay and
   no fill-mode: the resting state of both elements is fully visible, so if the
   animation never runs (reduced motion, a backgrounded tab, an old engine)
   the hero simply renders. The stagger lives inside the keyframes instead. */
.hero-reveal {
  animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-reveal-delayed {
  animation: heroRevealDelayed 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes heroReveal {
  0%   { opacity: 0; filter: blur(12px); transform: translateY(12px); }
  100% { opacity: 1; filter: blur(0);    transform: none; }
}
@keyframes heroRevealDelayed {
  0%, 21% { opacity: 0; filter: blur(12px); transform: translateY(12px); }
  100%    { opacity: 1; filter: blur(0);    transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-reveal,
  .hero-reveal-delayed {
    animation: none;
  }
}

/* ---------- Mobile navigation ------------------------------------------ */
/* The navbar no longer uses Webflow's w-nav module (it left a full-page
   overlay behind that swallowed every tap once the menu had been opened).
   conexus.js toggles .nav-open on .navbar and everything below keys off it. */

/* The burger only exists on the collapsed layout. */
.menu-button {
  display: none;
}

@media screen and (max-width: 991px) {
  .menu-button {
    display: flex;
    appearance: none;
    background: none;
    cursor: pointer;
  }

  /* Collapsed: the links live in the dropdown, which is closed by default. */
  .nav-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 5;
    background-color: #F8FAFC;
    border: 1px solid rgba(10, 37, 64, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(10, 37, 64, 0.18);
    padding: 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .navbar.nav-open .nav-menu {
    display: block;
  }

  /* Swap burger for X. */
  .menu-button-inner.open,
  .navbar.nav-open .menu-button-inner.close {
    display: flex;
  }
  .menu-button-inner.close,
  .navbar.nav-open .menu-button-inner.open {
    display: none;
  }

  .menu-button .icon-menu {
    color: var(--dark);
  }
  .navbar.nav-open .menu-button {
    background-color: var(--dark);
    border-color: var(--dark);
  }
  .navbar.nav-open .menu-button .icon-menu {
    color: #FFFFFF;
  }

  /* The dropdown is positioned against the bar. */
  .nav-wrap {
    position: relative;
    z-index: 1;
  }
}

/* ---------- Footer spacing + tap targets ------------------------------- */

@media screen and (max-width: 991px) {
  /* The template separates the CTA band from the footer card with a 180px
     gap, which reads as a dead screen on a phone. */
  .video-footer {
    grid-row-gap: var(--spacing--48, 48px);
  }

  .footer-legal-column {
    flex-flow: wrap;
    align-items: center;
    row-gap: 4px;
  }
  .footer-legal-link {
    padding: 8px 0;
    font-size: 14px;
  }

  /* Section-level CTAs: thumb-sized, not 40px pills. */
  .headline-selling-points .cta-main,
  .headline-column .cta-main {
    min-height: 48px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Connie page CTAs: full-width thumb targets on phones. */
@media screen and (max-width: 767px) {
  .connie-cta,
  .connie-cta-large {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}