:root {
  --bg: #111416;
  --bg-deep: #0c0e10;
  --surface: #191c1e;
  --surface-high: #212426;
  --border: #454749;
  --shadow: none;
  --olive-900: #2d3317;
  --olive-700: #444a2b;
  --olive-500: #5b6141;
  --olive-300: #a8af89;
  --olive-200: #c4caa3;
  --gold-700: #775a16;
  --gold-600: #ae8c44;
  --gold-500: #cba65b;
  --text: #e1e2e5;
  --text-sub: rgba(225, 226, 229, 0.69);
  --text-faint: rgba(225, 226, 229, 0.45);
  --candle-a: #ffffff;
  --candle-b: #a8af89;
  --phone-shadow: drop-shadow(0 30px 44px rgba(0, 0, 0, 0.5));
  --deco-fill: rgba(255, 255, 255, 0.04);
  --deco-ring: rgba(168, 175, 137, 0.18);
  --cta-veil: linear-gradient(rgba(12, 14, 16, 0.78), rgba(12, 14, 16, 0.92));
}

[data-theme="light"] {
  --bg: #fbfcff;
  --bg-deep: #f6f6f9;
  --surface: #f6f6f9;
  --surface-high: #ffffff;
  --border: #dcdddf;
  --shadow: 0 1px 2px rgba(25, 28, 30, 0.04), 0 8px 24px rgba(25, 28, 30, 0.06);
  --olive-900: #2d3317;
  --olive-700: #444a2b;
  --olive-500: #5b6141;
  --olive-300: #5b6141;
  --olive-200: #444a2b;
  --gold-700: #5c4200;
  --gold-600: #775a16;
  --gold-500: #5c4200;
  --text: #191c1e;
  --text-sub: rgba(25, 28, 30, 0.66);
  --text-faint: rgba(25, 28, 30, 0.42);
  --candle-a: #444a2b;
  --candle-b: #92722d;
  --phone-shadow: drop-shadow(0 24px 36px rgba(25, 28, 30, 0.22));
  /* Mismo tono sutil que la franja de la version oscura (alli es blanco
     al 4% sobre grafito; aca, grafito al 6% sobre claro: igual presencia) */
  --deco-fill: rgba(25, 28, 30, 0.06);
  --deco-ring: rgba(68, 74, 43, 0.2);
  --cta-veil: linear-gradient(rgba(246, 246, 249, 0.5), rgba(246, 246, 249, 0.78));
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  transition: background 0.25s ease, color 0.25s ease;
}

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding: 10px clamp(20px, 6vw, 64px);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav-mark {
  display: flex;
  align-items: center;
  flex: none;
}

.nav-mark img {
  height: 64px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/* Boton "ventana": colores fijos, iguales en los dos temas (igual que
   las fichas invertidas de Oferta) — el cliente definio un solo diseño
   de referencia, no uno por tema. */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  background: #e9ecd7;
  border: 1.5px solid #5b6141;
  border-radius: 6px;
  color: #2d3317;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(45, 51, 23, 0.28), 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(45, 51, 23, 0.32), 0 3px 6px rgba(0, 0, 0, 0.2);
}

.nav-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(45, 51, 23, 0.28); }

.nav-btn:focus-visible { outline: 2px solid #cba65b; outline-offset: 2px; }

/* Seccion activa: verde oliva oscuro (mismo tono que --olive-900 en
   toda la pagina) + borde dorado + texto claro */
.nav-btn.is-active {
  background: #2d3317;
  border-color: #cba65b;
  color: #f4f1e2;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Botones que llevan a Skool: filete dorado inferior que los distingue
   de los anclas internas de la pagina */
.nav-btn--skool { border-bottom: 3px solid #cba65b; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  margin: 0 7px;
  background: var(--text);
}

/* El toggle de tema usa el mismo formato "ventana" que el resto del
   menu (clase .nav-btn), pero sin texto: solo el icono, boton cuadrado. */
.version-link { padding: 9px; }
.version-link svg { display: block; }

/* 9 botones-ventana necesitan mucho mas ancho que los 6 links de texto
   de antes: el corte a hamburguesa sube de 880px a 1180px. */
@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px clamp(20px, 6vw, 64px) 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    display: none;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  /* Escopado al menu: .nav-btn se reutiliza fuera del nav (selector de
     pais, etc.) y esos NO deben heredar el ancho completo del hamburguesa */
  .nav-links .nav-btn { width: 100%; padding: 12px 16px; }
}

img { max-width: 100%; }

a { color: inherit; }

/* ---------- Shared section scaffolding ---------- */

.section {
  position: relative;
  padding: clamp(72px, 12vw, 128px) clamp(20px, 6vw, 64px);
}

.section-inner {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
}

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

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--olive-300);
  text-transform: uppercase;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--olive-300);
  flex: none;
}

.section-title {
  margin: 18px 0 0;
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.1;
  color: var(--text);
}

/* ---------- Candle chart layers (hero + final CTA) ---------- */

.chart-layer {
  position: absolute;
  inset: 0;
  opacity: 0.20;
  pointer-events: none;
  overflow: hidden;
}

.candle {
  width: 12px;
  position: absolute;
}

.candle .wick {
  position: absolute;
  left: 4.75px;
  top: 0;
  width: 2.5px;
  height: 100%;
}

.candle .body {
  position: absolute;
  left: 0;
  width: 12px;
  border-radius: 1px;
}

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

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px clamp(20px, 6vw, 64px);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 900px;
}

.hero-logo {
  width: min(810px, 100%);
  height: auto;
  display: block;
}

.hero h1 {
  margin: clamp(28px, 8vw, 56px) 0 0;
  width: min(800px, 100%);
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  font-size: clamp(1.8rem, 6.5vw, 4rem);
  line-height: 1.05;
}

.hero h1 .line-1 { color: var(--text); }
.hero h1 .line-2 { color: var(--olive-200); }

.hero .eyebrow {
  margin-top: clamp(32px, 9vw, 72px);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  /* Mismo verde oliva oscuro y texto fijo que .btn-academia/.nav-btn.is-active */
  background: var(--olive-900);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn:hover { background: var(--olive-700); }

.btn:focus-visible {
  outline: 2px solid var(--olive-200);
  outline-offset: 3px;
}

.btn-gold {
  background: var(--gold-600);
  color: var(--bg);
}

.btn-gold:hover { background: var(--gold-500); }

.hero .btn { margin-top: 22px; }

/* ---------- Objetivo Central ---------- */

/* Foto del aula con velo degradado propio (16% arriba -> 80% abajo,
   nota F de Correccion 2): los rostros se ven arriba, el texto abajo
   mantiene contraste AA. El velo cambia de tono por tema, igual que
   --cta-veil, para que el texto (var(--text), ya theme-aware) siga
   siendo legible en las dos versiones. */
.objetivo {
  position: relative;
  min-height: 70vh;
  min-height: 70dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(72px, 12vw, 128px) clamp(20px, 6vw, 64px);
}

.objetivo::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Mismo velo y filtro que .cta-final::before, para que la foto de
     fondo se vea igual de visible/tratada en las dos secciones */
  background: var(--cta-veil), url("../img/objetivo-fondo.webp") center 38% / cover no-repeat;
  filter: grayscale(45%);
}

.objetivo .section-inner {
  max-width: 900px;
  text-align: center;
}

.objetivo .eyebrow { justify-content: center; }

.objetivo-title {
  margin: 18px 0 0;
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--text);
}

.objetivo-title .hl {
  color: var(--gold-500);
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}

.objetivo-sub {
  margin: 20px auto 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--text-sub);
}

.objetivo-list {
  margin-top: 44px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--gold-500) 45%, transparent);
  border-radius: 14px;
  /* Degradado izq->der mas opaco que el velo de la foto: el texto (numeros,
     titulos) cae del lado izquierdo, donde la foto es mas clara y le
     restaba contraste */
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--bg) 84%, transparent),
    color-mix(in srgb, var(--bg) 62%, transparent)
  );
  overflow: hidden;
}

/* Tema claro: --bg es casi blanco y la foto es bastante oscura/gris, asi
   que la misma opacidad del oscuro se ve como neblina y no como tarjeta
   solida. Necesita mas cuerpo para leerse igual de nitida. */
[data-theme="light"] .objetivo-list {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--bg) 75%, transparent),
    color-mix(in srgb, var(--bg) 59%, transparent)
  );
}

.objetivo-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 4vw, 40px);
  border-top: 1px solid color-mix(in srgb, var(--gold-500) 25%, transparent);
}

.objetivo-item:first-child { border-top: 0; }

.objetivo-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--gold-500);
}

.objetivo-item-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.objetivo-item .num {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1;
  color: var(--olive-300);
  flex: none;
}

.objetivo-item h3 {
  margin: 6px 0 0;
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  /* Mismo tamano estandar de sub-titulo que el resto de las tarjetas */
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.35;
  color: var(--text);
}

.objetivo-item-note {
  display: block;
  margin: 4px 0 10px;
  font-size: 17px;
  white-space: nowrap;
  font-style: italic;
  color: var(--text-sub);
}

.objetivo-item p {
  margin: 0;
  /* Mismo cuerpo estandar que el resto de la pagina (testimonios,
     clausulas, ficha de Julio) */
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.65;
  color: var(--text-sub);
  text-align: justify;
  text-align-last: left;
}

.objetivo-cierre {
  margin: 32px 0 0;
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--gold-500);
  letter-spacing: 0.3px;
  text-align: center;
}

.objetivo .btn-academia { margin-top: 32px; }

/* ---------- Boton estandarizado "Accede a la Academia" ----------
   Color fijo en las dos versiones (nota G de Correccion 2): un solo
   diseño de referencia, igual que .nav-btn y las fichas de Oferta. */
.btn-academia {
  display: inline-block;
  /* Mismo verde oliva oscuro que .nav-btn.is-active (--olive-900) */
  background: #2d3317;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.btn-academia:hover { background: #444a2b; }

.btn-academia:focus-visible {
  outline: 2px solid #cba65b;
  outline-offset: 3px;
}

/* ---------- Sobre Julio ---------- */

.julio-head { text-align: center; }

.julio-title {
  margin: 0;
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  /* Mismo tamaño que .section-title/.objetivo-title, para que los
     títulos de sección queden uniformes en toda la página */
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15;
  color: var(--text);
}

.julio-rule {
  display: block;
  width: 64px;
  height: 3px;
  margin: 18px auto 0;
  background: var(--gold-500);
}

.julio-kicker {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--olive-300);
}

.julio-grid {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: clamp(28px, 5vw, 56px);
  margin-top: 40px;
  /* La ficha define la altura de la fila (nota D): el video se estira
     para igualarla y su object-fit:cover absorbe la diferencia */
  align-items: stretch;
}

/* Video vertical de presentacion en el lugar de la foto */
.julio-video {
  position: relative;
  /* width explicito: si no, el stretch de la fila (alta por la ficha)
     hace que aspect-ratio calcule el ancho a partir de esa altura y
     el video se desborda de su columna */
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.julio-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.julio-play {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.julio-play:focus-visible { outline: 2px solid var(--olive-300); outline-offset: -4px; }

.julio-video.playing .julio-play { display: none; }

/* Ficha "Perfil profesional": mismo alto que el video, ocupa el resto
   del ancho hasta el margen derecho */
.julio-bio { height: 100%; }

.perfil-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold-500);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.perfil-card h3 {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  /* Mismo tamano estandar de sub-titulo que el resto de las tarjetas */
  font-size: clamp(17px, 1.9vw, 20px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-500);
}

.perfil-list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.perfil-list li {
  position: relative;
  padding-left: 28px;
  /* Mismo cuerpo que el resto de la pagina (testimonios, clausulas, etc.):
     el cliente pedia 38px pero se veia desproporcionado frente al resto */
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--text-sub);
}

.perfil-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 10px;
  height: 10px;
  background: var(--gold-500);
}

.perfil-list li strong {
  color: var(--olive-200);
  font-weight: 700;
}

/* ---------- Oferta ---------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-high);
  border: 2px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 44px);
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover { transform: translateY(-3px); }

/* Fichas con esquema INVERTIDO al tema de la pagina: claras sobre la
   version oscura... (se redefine la paleta completa en el scope .card) */
.card {
  --bg: #fbfcff;
  --surface-high: #ffffff;
  --border: #96999d;
  --shadow: 0 1px 2px rgba(25, 28, 30, 0.04), 0 8px 24px rgba(25, 28, 30, 0.06);
  --olive-300: #5b6141;
  --olive-200: #444a2b;
  --gold-700: #5c4200;
  --gold-600: #775a16;
  --gold-500: #5c4200;
  --text: #191c1e;
  --text-sub: rgba(25, 28, 30, 0.66);
  --text-faint: rgba(25, 28, 30, 0.42);
}

/* ...y oscuras sobre la version clara (con sombra para despegar del fondo) */
[data-theme="light"] .card {
  --bg: #111416;
  --surface-high: #212426;
  --border: #75797e;
  --shadow: 0 1px 2px rgba(25, 28, 30, 0.08), 0 8px 24px rgba(25, 28, 30, 0.14);
  --olive-300: #a8af89;
  --olive-200: #c4caa3;
  --gold-700: #775a16;
  --gold-600: #ae8c44;
  --gold-500: #cba65b;
  --text: #e1e2e5;
  --text-sub: rgba(225, 226, 229, 0.69);
  --text-faint: rgba(225, 226, 229, 0.45);
}

/* ---------- Ticket de membresia (Paquete Unico Inicial) ----------
   Reutiliza .card (esquema de color invertido ya establecido: ticket
   claro sobre tema oscuro, oscuro sobre tema claro) como base. */
.ticket {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 0;
  border-top: 5px solid var(--gold-600);
  border-radius: 4px 4px 8px 8px;
}

.ticket-body {
  padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px) 8px;
}

.ticket-body h3 {
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--gold-600);
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  /* Mismo tamano estandar de sub-titulo que el resto de las tarjetas */
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--text);
}

.ticket-list {
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
  display: grid;
  gap: 22px;
}

.ticket-list li {
  position: relative;
  padding-left: 26px;
  /* Mismo cuerpo estandar que el resto de la pagina */
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
  color: var(--text);
}

.ticket-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  background: var(--olive-500);
}

/* Nota E: las frases entre comillas van debajo de su punto, en cursiva,
   con filete vertical claro — no son puntos independientes */
.ticket-quote {
  display: block;
  margin-top: 8px;
  padding-left: 14px;
  border-left: 2px solid #a8af89;
  font-style: italic;
  color: var(--text-sub);
}

/* Linea de corte punteada con muescas laterales, estilo ticket fisico */
.ticket-cut {
  position: relative;
  height: 0;
  margin: 0 clamp(28px, 4vw, 40px);
  border-top: 2px dashed var(--border);
}

.ticket-cut::before,
.ticket-cut::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* "Perfora" el ticket: mismo color que el fondo real de la seccion
     (no el --surface invertido del scope .card) */
  background: var(--surface);
  transform: translateY(-50%);
}

.ticket-cut::before { left: calc(-1 * clamp(28px, 4vw, 40px) - 13px); }
.ticket-cut::after { right: calc(-1 * clamp(28px, 4vw, 40px) - 13px); }

.ticket-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 24px clamp(28px, 4vw, 40px) 0;
}

.ticket-price-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-sub);
}

.ticket-price-figure {
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--text);
  white-space: nowrap;
}

.ticket-price-figure small {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sub);
}

.ticket .btn-academia {
  display: block;
  width: calc(100% - 2 * clamp(28px, 4vw, 40px));
  margin: 24px clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px);
  text-align: center;
}

/* ---------- Contacto rapido debajo del ticket (sin seccion formal) ---------- */

.ticket-social {
  /* Mismo valor que el padding-bottom de .section: asi el espacio libre
     que queda debajo del ticket se reparte igual arriba y abajo de los
     iconos, quedando centrados en ese hueco */
  margin-top: clamp(72px, 12vw, 128px);
}

.ticket-social-icons {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.ticket-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3.5px solid var(--olive-300);
  background: var(--surface);
  color: var(--olive-300);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ticket-social-btn svg { width: 40px; height: 40px; }

.ticket-social-btn:hover,
.ticket-social-btn:focus-visible {
  color: var(--olive-900);
  border-color: var(--gold-500);
  transform: translateY(-2px);
}

[data-theme="light"] .ticket-social-btn:hover,
[data-theme="light"] .ticket-social-btn:focus-visible {
  background: var(--olive-500);
  border-color: var(--olive-500);
  color: #ffffff;
}

.ticket-social-wa { position: relative; }

.ticket-social-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 220px;
  padding: 16px;
  border-radius: 12px;
  /* Color fijo: es un popover flotante, igual criterio que el resto de
     componentes de referencia unica de la pagina */
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  text-align: center;
}

.ticket-social-tooltip[hidden] { display: none; }

.ticket-social-tooltip img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.ticket-social-tooltip p {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #4a4d50;
}

.ticket-social-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #ffffff;
}

/* ---------- Nuestro Compromiso ---------- */

/* Margen lateral y separacion foto-columnas mas generosos que el resto
   de la pagina (nota E de Correccion 5): seccion mas "declarativa" */
.perimetro {
  padding-left: clamp(24px, 10vw, 140px);
  padding-right: clamp(24px, 10vw, 140px);
}

/* Los seis compromisos flanquean la foto de quien los declara, tres
   por lado, texto centrado y misma anchura de columna */
.perimetro-layout {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 310px) 1fr;
  gap: clamp(28px, 6vw, 86px);
  align-items: center;
  margin-top: 56px;
}

.perimetro-col {
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  text-align: center;
}

.perimetro-photo {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.perimetro-photo img {
  display: block;
  width: 100%;
}

.compromiso + .compromiso {
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--border);
}

/* Tema claro: filetes separadores en verde oliva en lugar del gris
   generico del resto de la pagina */
[data-theme="light"] .compromiso + .compromiso {
  border-top-color: var(--olive-300);
}

.compromiso .cifra {
  display: block;
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--gold-500);
}

.compromiso h3 {
  margin: 8px 0 0;
  /* Escalado en linea con el cuerpo de testimonios para uniformidad */
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.compromiso p {
  margin: 10px 0 0;
  /* Mismo cuerpo que .testimonios-copy p */
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  color: var(--text-sub);
  text-align: center;
}

/* ---------- Testimonios (historias) ---------- */

/* La seccion es el marco: el telefono se ancla a su esquina inferior derecha
   y la muñeca sangra fuera del borde (el recorte se lee intencional) */
.testimonios {
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Mas corta que la imagen: el brazo se corta contra el borde inferior */
  min-height: calc(min(680px, 50vw) * 1.05);
}

.testimonios .section-inner {
  width: 100%;
  /* el .section-inner global limita a 1060px y lo centra: en esta seccion
     eso deja un hueco enorme entre el texto y el telefono (que se ancla
     al borde real de .testimonios, no a este ancho acotado). Se libera
     para que el contenido use todo el espacio real disponible. */
  max-width: none;
  margin: 0;
  /* reserva el ancho de la imagen para que el texto no pase por debajo */
  padding-right: min(700px, 52vw);
  /* La imagen de la mano trae su propio margen vacio a la derecha (el
     brazo sangra por abajo, no por el costado a esta altura); recien se
     nota como hueco real cuando el telefono toca su tope de 680px (desde
     1360px de viewport, ver min(680px,50vw) en .stories-phone). Por
     debajo de eso el espacio ya esta ajustado: la formula da 0 (clamp
     absorbe el negativo) y crece gradual hasta 222px en ~1920px, sin
     salto brusco justo en el corte. */
  padding-left: clamp(0px, calc(39.65vw - 539px), 222px);
}

/* Decoracion de fondo: franja diagonal empinada detras del telefono
   (estilo referencia), lejos del texto. Debajo de .section-inner (z1)
   y del telefono (z2). */
.testimonios::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -30%;
  right: 14%;
  width: clamp(200px, 24vw, 340px);
  height: 160%;
  background: var(--deco-fill);
  transform: rotate(20deg);
}

.testimonios::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -30%;
  right: 40%;
  width: 4px;
  height: 160%;
  background: var(--deco-ring);
  transform: rotate(20deg);
  box-shadow: -24px 0 0 var(--deco-ring);
}

.testimonios-copy {
  position: relative;
  margin-top: 48px;
}

.testimonios-copy p {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  color: var(--text-sub);
  max-width: 46ch;
  text-align: justify;
  text-align-last: left;
}

.stories-hint {
  margin-top: 18px;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--text);
}

/* Correccion 4, nota B: frase de cierre en negrita y verde claro */
.stories-hint strong {
  color: var(--olive-200);
  font-weight: 700;
}

/* Correccion 4, nota A: el kicker (mucho mas largo que antes: 5 paises)
   necesita entrar en una sola linea dentro de la columna angosta que
   deja libre el telefono */
.testimonios-kicker {
  display: block;
  max-width: 46ch;
  font-size: clamp(9px, 0.85vw, 11px);
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.country-picker { margin-top: 28px; }

.country-picker-label {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-500);
}

.country-picker-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

/* Coordenadas de la pantalla, medidas sobre mano-telefono.webp (1080x1479).
   El brazo llega hasta los bordes derecho e inferior de la imagen:
   anclada a la esquina, el recorte queda fuera de la seccion. */
.stories-phone {
  position: absolute;
  /* Por encima de .section-inner (z-index 1), que si no captura los clicks */
  z-index: 2;
  right: -2px;
  top: 56px;
  width: min(680px, 50vw);
  aspect-ratio: 1080 / 1479;
  filter: var(--phone-shadow);
  --sx: 9.64%;
  --sy: 2.08%;
  --sw: 34.11%;
  --sh: 54.54%;
}

.stories-phone .phone-img {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  pointer-events: none;
}

.stories-screen,
.stories-ui {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: var(--sw);
  height: var(--sh);
}

/* El video va DEBAJO de la imagen: el agujero transparente lo deja ver */
.stories-screen {
  z-index: 1;
  background: #000;
  overflow: hidden;
}

/* Reposo: pantalla apagada (gris) antes de elegir pais y despues de
   que termina cada video, hasta que se elige otro testimonio */
.stories-phone.is-resting .stories-screen { background: #55585c; }
.stories-phone.is-resting .stories-screen video { opacity: 0; }

.stories-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Marca + bandera sobre la pantalla en reposo: solo visible mientras
   is-resting (comienzo, antes de elegir pais, y final de cada video) */
.stories-brand {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stories-phone.is-resting .stories-brand { display: flex; }

.stories-brand-logo {
  width: 68%;
  height: auto;
  opacity: 0.95;
  flex: none;
}

/* Franja (no toda la pantalla) con la bandera del pais elegido
   (Colombia por defecto). Colores solidos por gradiente en vez de una
   imagen: se estira sin problema al ancho/alto de la franja */
.stories-brand-flag {
  width: 78%;
  height: 15%;
  margin-top: 9%;
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  flex: none;
}

.stories-brand-flag[data-flag="col"] {
  background: linear-gradient(to bottom, #FCD116 0 50%, #003893 50% 75%, #CE1126 75% 100%);
}

.stories-brand-flag[data-flag="esp"] {
  background: linear-gradient(to bottom, #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75% 100%);
}

.stories-brand-flag[data-flag="mex"] {
  background: linear-gradient(to right, #006847 0 33.33%, #ffffff 33.33% 66.66%, #CE1126 66.66% 100%);
}

.stories-brand-flag[data-flag="bol"] {
  background: linear-gradient(to bottom, #D52B1E 0 33.33%, #F9E300 33.33% 66.66%, #007934 66.66% 100%);
}

.stories-brand-flag[data-flag="arg"] {
  background:
    radial-gradient(circle at center, #F6B40E 0 7%, transparent 7.5%),
    linear-gradient(to bottom, #74ACDF 0 33.33%, #ffffff 33.33% 66.66%, #74ACDF 66.66% 100%);
}

.stories-ui { z-index: 3; }

.story-mute {
  position: absolute;
  top: 6.5%;
  right: 5%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.story-start {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.story-start .play-ring,
.julio-play .play-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 5px;
  font-size: 20px;
  transition: transform 0.2s ease;
}

.story-start:hover .play-ring,
.julio-play:hover .play-ring { transform: scale(1.08); }

.stories-ui [hidden] { display: none; }

/* ---------- CTA final ---------- */

.cta-final {
  position: relative;
  min-height: 70vh;
  min-height: 70dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: clamp(72px, 12vw, 128px) clamp(20px, 6vw, 64px);
}

/* Tema oscuro: el velo del CTA es casi negro, igual que el fondo del
   Hero — la opacity:0.20 global ya funciona bien ahi, no se toca. */

/* Tema claro: el velo del CTA es casi blanco (fondo opuesto al oscuro),
   asi que copiar los tonos/opacidad del tema oscuro deja las velas
   blanco-sobre-blanco. Necesita su propio ajuste: mas opacas y con
   tonos oscuros y saturados para competir con la foto. */
[data-theme="light"] .cta-final [data-chart] {
  opacity: 0.55;
  --candle-a: #21260f;
  --candle-b: #5c4200;
}

/* Foto de fondo con velo del tema: las velas y el texto van encima */
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cta-veil), url("../img/cta-fondo.webp") center 42% / cover no-repeat;
  filter: grayscale(45%);
}

.cta-final .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-final h2 {
  margin: 18px 0 0;
  font-family: 'Anton', sans-serif;
  font-weight: normal;
  /* Mismo tamaño que el resto de los títulos de sección */
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.1;
}

.cta-final h2 .line-2 { color: var(--olive-200); }

/* Correccion 7, nota A: caja alta y baja (no mayusculas) y 25% mas
   grande que el resto de los kickers (14px -> 17.5px) */
.cta-final .eyebrow {
  font-size: 17.5px;
  letter-spacing: 0.5px;
  text-transform: none;
}

.cta-final .btn-academia { margin-top: 40px; }

/* ---------- Footer legal ----------
   Colores fijos en las dos versiones (un solo mockup de referencia,
   igual que .nav-btn/.ticket): franja siempre oscura con texto claro,
   independiente del tema de la pagina. */

.footer {
  background: #0c0e10;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 6vw, 64px);
}

.footer-inner {
  margin: 0 auto;
  text-align: center;
}

.footer .firma {
  margin: 24px 0 0;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(225, 226, 229, 0.7);
}

.disclaimer-label {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(225, 226, 229, 0.55);
}

/* Bloque justificado, mismo tamano/fuente de texto que el resto de la
   pagina (no centrado linea a linea), columna centrada hasta 1640px,
   30px entre parrafos, filete gris fino arriba del bloque */
.aviso {
  max-width: 1640px;
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid rgba(225, 226, 229, 0.15);
}

.aviso p {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  /* Mismo tono que --text-sub en tema oscuro: el footer es siempre
     oscuro, asi que iguala el color de cuerpo del resto de la pagina */
  color: rgba(225, 226, 229, 0.69);
  text-align: justify;
  text-align-last: left;
}

.aviso p + p { margin-top: 30px; }

/* ---------- Responsive ---------- */

/* Tablet chica / phone grande: las columnas laterales necesitan ancho real */
@media (max-width: 860px) {
  .julio-grid { grid-template-columns: 1fr; }
  .julio-video { max-width: 300px; margin: 0 auto; }
  /* Correccion 2, nota H: cada bloque a una sola columna (numero+titulo
     arriba, desarrollo debajo), mismo orden y filetes de separacion */
  .objetivo-item { grid-template-columns: 1fr; gap: 10px; }
  .perimetro-layout { grid-template-columns: 1fr; gap: 40px; }
  .perimetro-photo { order: -1; max-width: 320px; margin: 0 auto; }
  .testimonios { display: block; min-height: 0; }
  .testimonios .section-inner { padding-right: 0; padding-left: 0; }
  .testimonios-copy p { max-width: none; }
  /* A todo el ancho ya no hace falta forzar una sola linea */
  .testimonios-kicker {
    white-space: normal;
    max-width: none;
    font-size: 13px;
  }
  /* En movil el texto ocupa todo el ancho: la franja arranca debajo,
     detras del telefono apilado */
  .testimonios::before { top: 28%; height: 110%; right: 8%; }
  .testimonios::after { top: 28%; height: 110%; right: 34%; }
  /* En pantallas chicas cambia el mockup: telefono solo, sin mano
     (coordenadas medidas sobre telefono.webp, 1080x2153) */
  .stories-phone {
    /* relative (no static): .stories-screen/.stories-ui son position:absolute
       con porcentajes que necesitan a .stories-phone como contenedor de
       referencia. Con static pierden esa referencia y el video se sale
       del marco (bug reportado en iPhone). */
    position: relative;
    width: min(310px, 80vw);
    aspect-ratio: 1080 / 2153;
    margin: 48px auto 0;
    --sx: 5.5%;
    --sy: 2.71%;
    --sw: 88.15%;
    --sh: 94.52%;
  }
}

/* Phone: recién acá se apila transparencia y el ticket va a ancho completo */
@media (max-width: 640px) {
  /* Nota G: ticket a ancho completo con margenes de 24px */
  .ticket { max-width: none; }
  .ticket-price { flex-direction: column; align-items: flex-start; gap: 4px; }
  /* Correccion 7, nota F: boton a ancho completo con margenes de 24px */
  .cta-final .btn-academia {
    display: block;
    width: calc(100% - 48px);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  /* Disclaimer: sigue centrado, tope de 90% del ancho */
  .aviso { max-width: 90%; }
}