/* ============ VARIABLES ============ */
:root {
  --bg: #f6f6f9;
  --bg-soft: #ececf3;
  --panel: #ffffff;
  --text: #14141c;
  --muted: #5f5f6e;
  --purple: #6d4ae8;
  --purple-light: #5a3bd6;
  --violet-deep: #3b1f9e;
  --violet-ink: #241263;
  --gold: #e7c878;
  --gold-soft: rgba(231, 200, 120, 0.14);
  --grad: linear-gradient(135deg, #5a3bd6 0%, #8b5cf6 40%, #c243ff 75%, #f0a6ff 100%);
  --grad-rich: linear-gradient(135deg, #3b1f9e 0%, #5a3bd6 35%, #8b5cf6 65%, #c243ff 90%, #f0a6ff 100%);
  --grad-soft: linear-gradient(135deg, #b7a6ff, #e2b8ff 60%, #ffd2f7);
  --radius: 20px;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

html { overflow-x: clip; }

::selection { background: var(--purple); color: #fff; }

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, th, td, dt, dd { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Grano sutil para textura premium */
.noise {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Barra de progreso de lectura */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--grad);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 1100;
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.6);
}

/* Halo que sigue al cursor */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.14), transparent 60%);
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-glow.active { opacity: 1; }

/* Botón volver arriba */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1050;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.45);
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.3s;
}
.to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 16px 40px rgba(139, 92, 246, 0.6); }

/* Isotipo movible en NOSOTROS: gira a la cara al entrar en pantalla */
#nosotros .section__head { position: relative; padding-top: 30px; }
.nosotros-iso {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.nosotros-iso img {
  width: 20px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.35));
  transform: none;
  transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
  will-change: transform;
}
.nosotros-iso.face img { transform: rotate(90deg); filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.5)); }

/* Divisor decorativo entre secciones */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: min(1160px, 92%);
  margin-inline: auto;
  padding: 10px 0;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
}
.divider img {
  width: 13px;
  height: auto;
  opacity: 0.55;
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
  animation: dividerSpin 14s linear infinite;
}
@keyframes dividerSpin { to { transform: rotate(360deg); } }

.divider--mid { padding: clamp(22px, 3vw, 40px) 0; }

.accent {
  background: var(--grad-rich);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

.container { width: min(1160px, 92%); margin-inline: auto; }

/* ============ BOTONES ============ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s, border-color 0.35s;
  will-change: transform;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -160%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::after { animation: shine 0.9s var(--ease); }
@keyframes shine { to { left: 160%; } }
.btn--primary {
  background: var(--grad-rich);
  background-clip: padding-box;
  background-size: 180% 180%;
  animation: gradientShift 7s ease infinite;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 38px rgba(58, 31, 158, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.btn--primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 52px rgba(58, 31, 158, 0.5); }
.btn--ghost { border-color: rgba(23, 23, 29, 0.22); color: var(--text); background: rgba(23, 23, 29, 0.02); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--purple); background: rgba(139, 92, 246, 0.1); }
.btn:active { transform: scale(0.96); }
.btn--small { padding: 10px 22px; font-size: 14px; }
.btn--full { width: 100%; }

/* Botón "Me interesa": morado en Talleres; claro sobre los fondos morados de Coaching/Experiencias */
.btn--interest {
  background: var(--grad) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}
.btn--interest:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, 0.45);
}
.xcard__interest {
  background: #ffffff !important;
  color: var(--purple-light) !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s;
  overflow: hidden;
}
.xcard__interest:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
  background: #f4f4ff !important;
}
.card__interest .btn--interest { margin-top: 4px; }
.card[data-interest] { display: flex; flex-direction: column; }
.card[data-interest] .btn--interest { margin-top: auto; align-self: flex-start; }

.xcard__interest {
  margin-top: auto;
  align-self: center;
  padding: 10px 20px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s;
}
.xcard__interest::after {
  content: "";
  position: absolute;
  top: 0;
  left: -160%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.xcard__interest:hover::after { animation: shine 0.9s var(--ease); }
.coach-card__interest {
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  display: inline-block;
  background: #ffffff !important;
  color: var(--purple-light) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 5vw;
  transition: background 0.4s, padding 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;
}
.nav.scrolled {
  background: rgba(244, 244, 247, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 14px 5vw;
  box-shadow: 0 1px 0 rgba(23, 23, 29, 0.08);
}
.nav__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; transition: opacity 0.35s ease; }
.nav.logo-hidden .nav__logo { opacity: 0; pointer-events: none; }
.nav__buro { display: flex; align-items: center; margin-left: 0; flex-shrink: 0; transition: opacity 0.35s ease; }
.nav__buro img { height: 26px; width: auto; flex-shrink: 0; }
.nav.buro-hidden .nav__buro { opacity: 0; pointer-events: none; }
.nav__logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 14px rgba(139, 92, 246, 0.4));
  transition: transform 0.5s var(--ease), filter 0.5s;
}
.nav__logo:hover .nav__logo-img { transform: rotate(90deg); filter: drop-shadow(0 6px 22px rgba(139, 92, 246, 0.6)); }
.nav__logo-letters { height: 38px; width: auto; flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(139, 92, 246, 0.25)); }
.nav__links {
  display: flex;
  gap: 40px;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 14px;
  margin: -6px 0 -10px;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(23, 23, 29, 0.16);
  background: var(--bg-soft);
  color: var(--purple);
  font-size: 20px;
  line-height: 1;
  padding: 0 0 1px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.nav__arrow:hover { background: rgba(139, 92, 246, 0.12); border-color: var(--purple); transform: translateX(2px); box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25); }
.nav__cta { flex-shrink: 0; }
.nav__links a { font-size: 16px; font-weight: 500; color: var(--muted); position: relative; transition: color 0.3s; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.nav__burger span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.35s var(--ease), opacity 0.3s; }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgba(244, 244, 247, 0.97);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.menu-mobile.open { opacity: 1; visibility: visible; }
.menu-mobile a { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.menu-mobile a:hover { color: var(--purple-light); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  animation: drift 18s ease-in-out infinite alternate;
  will-change: transform;
}
.orb--1 { width: 520px; height: 520px; top: -160px; left: -120px; background: #c4b5fd; }
.orb--2 { width: 460px; height: 460px; bottom: -140px; right: -100px; background: #a78bfa; animation-delay: -6s; }
.orb--3 { width: 320px; height: 320px; top: 40%; left: 55%; background: #ddd6fe; opacity: 0.55; animation-delay: -12s; }

@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(60px, -40px) scale(1.15); }
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: 120px 6vw 80px;
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
}
/* Logo original de LDH + isotipo movible (rota a cara) */
.hero__brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  margin-bottom: 36px;
  cursor: pointer;
  animation: heroBrandIn 1.4s var(--ease) 0.15s both;
  will-change: transform, opacity;
}
.hero__brand.is-morphed { animation: none; opacity: 0; pointer-events: none; }
.hero__brand.is-settled { animation: none; }
.hero__brand.is-morphed .hero__brand-iso { transform: none; }

/* Logos que viajan del hero a la esquina del nav (piezas independientes) */
.morph-brand,
.morph-buro {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
}
.morph-brand img,
.morph-buro img {
  position: fixed;
  display: block;
  width: auto;
}
.hero__brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent);
  filter: blur(30px);
  z-index: -1;
  animation: pulseGlow 4.5s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes heroBrandIn {
  0% { opacity: 0; transform: translateY(34px) scale(0.92); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.hero__brand-logo,
.hero__brand-letters {
  height: clamp(56px, 8vw, 120px);
  width: auto;
  max-width: 78vw;
  filter: none;
  image-rendering: auto;
}
.hero__brand-iso {
  height: clamp(88px, 13vw, 190px);
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 18px rgba(139, 92, 246, 0.2));
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
  will-change: transform;
}
/* Isotipo: se pone de lado (cara) solo al pasar el cursor sobre él */
.hero__brand-iso:hover {
  transform: rotate(90deg);
  filter: drop-shadow(0 12px 26px rgba(139, 92, 246, 0.4));
}

/* Logo de Buró (morado, legible sobre fondo claro, clicable) */
.buro-logo {
  display: inline-block;
  height: 1.4em;
  width: auto;
  vertical-align: -0.3em;
  margin-left: 6px;
  filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.35));
  transition: transform 0.4s var(--ease), filter 0.4s;
}
.buro-link { display: inline-block; }
/* El logo de Buró no se mueve */
.hero__eyebrow .buro-logo { height: 3.2em; vertical-align: -0.9em; }
.buro-logo--footer { height: 1.7em; vertical-align: -0.35em; }
.hero__eyebrow {
  font-size: 14px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 26px;
  transition: opacity 0.5s ease;
}
.hero__eyebrow.is-morphed { opacity: 0 !important; pointer-events: none; }
.buro-link { transition: opacity 0.3s ease; }
.buro-link.is-morphed { opacity: 0; }
.hero__eyebrow strong { color: var(--purple-light); font-weight: 600; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7.5vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
}
.hero__title span { display: block; }
.gradient-text {
  background: var(--grad-rich);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 220% 220%;
  animation: gradientShift 7s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero__sub { max-width: 620px; margin: 0 auto 40px; color: var(--muted); font-size: 18px; }
.hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero__scroll { margin-top: 40px; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(23, 23, 29, 0.45); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.hero__fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30vh;
  background: linear-gradient(to top, var(--bg), transparent);
  z-index: 1;
  pointer-events: none;
}

/* Propuesta: título tras el primer tramo de marca */
.hero-main {
  position: relative;
  z-index: 2;
  background: var(--bg);
  text-align: center;
  padding: clamp(120px, 17vw, 220px) 0 clamp(70px, 10vw, 130px);
}

/* ============ SECCIONES ============ */
.content { position: relative; z-index: 2; background: var(--bg); }
.section { padding: clamp(44px, 6vw, 72px) 0; position: relative; }
/* Separación clara: aire entre las cartas de experiencias y el divisor/sección siguiente */
#experiencias { padding-bottom: clamp(36px, 4vw, 64px); }
.section--dark { background: var(--bg-soft); border-top: 1px solid rgba(23, 23, 29, 0.06); border-bottom: 1px solid rgba(23, 23, 29, 0.06); }
/* Talleres: fondo morado difuminado (efecto del cursor) para vender los talleres */
#talleres {
  background:
    radial-gradient(circle at 16% 22%, rgba(90, 59, 214, 0.18), transparent 55%),
    radial-gradient(circle at 84% 68%, rgba(139, 92, 246, 0.16), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(194, 67, 255, 0.10), transparent 60%),
    radial-gradient(circle at 82% 12%, rgba(231, 200, 120, 0.07), transparent 45%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
}
.section__head { max-width: 700px; margin-bottom: 36px; }
.section__head h2 { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 52px); line-height: 1.12; letter-spacing: -0.02em; }
.kicker { font-size: 13px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--purple-light); margin-bottom: 18px; font-weight: 600; display: inline-flex; align-items: center; gap: 12px; }
.kicker::before,
.kicker::after { display: none; }

/* NOSOTROS */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.split--single { display: flex; justify-content: center; margin: 32px 0 0; }
.split--single p { max-width: 860px; }
.split > p,
.split--2 > div {
  background: var(--panel);
  border: 1px solid rgba(23, 23, 29, 0.08);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 6px 22px rgba(23, 23, 29, 0.06);
}
.split p { font-size: 18px; color: var(--muted); }
.split strong { color: var(--text); }
.split--2 { margin-top: 56px; }
.split__title { font-family: var(--font-display); font-size: 20px; margin-bottom: 14px; }
.split--2 p { font-size: 15px; margin-bottom: 14px; }
.split--2 p:last-child { margin-bottom: 0; }

/* Propósito, Misión y Valores */
.quote--nosotros {
  margin: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 104px);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px);
  background: var(--bg-soft);
  border: 1px solid rgba(23, 23, 29, 0.06);
  border-radius: var(--radius);
  text-align: center;
}
/* ============ PROPÓSITO, MISIÓN Y VALORES ============ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 56px auto 0; width: min(760px, 100%); }
.pillar {
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.10), rgba(124, 58, 237, 0.05) 60%, rgba(255, 255, 255, 0.03)), var(--panel);
  border: 2px solid rgba(139, 92, 246, 0.4);
  padding: 30px 24px 34px;
  text-align: center;
  box-shadow: 0 6px 22px rgba(139, 92, 246, 0.10);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform;
}
/* Resplandor superior en cada pillar */
.pillar::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at 30% 20%, rgba(168, 85, 247, 0.25), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.pillar:hover::before { opacity: 1; }
.pillar:hover {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 18px 44px rgba(124, 58, 237, 0.35), 0 0 24px rgba(139, 92, 246, 0.22);
}
.pillar:nth-child(1) { border-radius: 18px 0 0 18px; border-right: 1px solid rgba(139, 92, 246, 0.25); }
.pillar:nth-child(2) { border-right: 1px solid rgba(139, 92, 246, 0.25); }
.pillar:nth-child(3) { border-radius: 0 18px 18px 0; }
.pillar__icon {
  height: 60px;
  width: auto;
  margin: 0 auto 14px;
  display: block;
  object-fit: contain;
  color: var(--purple);
}
/* El cohete (Misión) va más grande que los demás iconos */
.pillar:nth-child(2) .pillar__icon {
  height: 84px;
  margin-top: -14px;
  margin-bottom: 4px;
}
.pillar { text-align: center; }
.pillar h3 { font-family: var(--font-display); font-size: 26px; letter-spacing: 0.04em; }
.pillar p { color: var(--muted); font-size: 17.5px; line-height: 1.6; margin-top: 12px; text-align: center; }
.pillar p + p { margin-top: 7px; line-height: 1.5; }

/* ---- Animaciones de los iconos (se repiten al entrar en pantalla) ---- */
.pillar__icon { will-change: transform; }

/* Propósito (flecha): knockback a la izquierda, como cuando la flecha da en el blanco */
.pillar:nth-child(1) .pillar__icon.animate {
  animation: iconProposito 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: 1.1s;
  animation-fill-mode: backwards;
}
@keyframes iconProposito {
  0%   { transform: translateX(0) scale(1); }
  22%  { transform: translateX(-14px) scale(1.06, 0.94); }
  40%  { transform: translateX(4px) scale(0.98, 1.04); }
  60%  { transform: translateX(-5px) scale(1.02, 0.98); }
  100% { transform: translateX(0) scale(1); }
}

/* Misión (cohete): temblor breve */
.pillar:nth-child(2) .pillar__icon.animate {
  animation: iconMision 0.6s linear;
  animation-delay: 1.35s;
  animation-fill-mode: backwards;
  transform-origin: center;
}
@keyframes iconMision {
  0%   { transform: translate(0, 0) rotate(0deg); }
  15%  { transform: translate(-4px, 2px) rotate(-3deg); }
  30%  { transform: translate(4px, -3px) rotate(3deg); }
  45%  { transform: translate(-4px, 1px) rotate(-2deg); }
  60%  { transform: translate(4px, 2px) rotate(2deg); }
  75%  { transform: translate(-3px, -1px) rotate(-1deg); }
  90%  { transform: translate(2px, 1px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Valores (diamante): sube y brilla */
.pillar:nth-child(3) .pillar__icon.animate {
  animation: iconValores 1.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 1.6s;
  animation-fill-mode: backwards;
  filter: drop-shadow(0 0 0 rgba(231, 200, 120, 0));
}
@keyframes iconValores {
  0%   { transform: translateY(0);   filter: drop-shadow(0 0 0 rgba(231, 200, 120, 0)); }
  42%  { transform: translateY(-11px); filter: drop-shadow(0 0 0 rgba(231, 200, 120, 0)); }
  50%  { transform: translateY(-11px); filter: drop-shadow(0 0 26px rgba(255, 255, 255, 1)); }
  58%  { transform: translateY(-11px); filter: drop-shadow(0 0 0 rgba(231, 200, 120, 0)); }
  100% { transform: translateY(0);   filter: drop-shadow(0 0 0 rgba(231, 200, 120, 0)); }
}

/* Pillars: cada bloque emerge con suavidad, se asienta y enciende un resplandor */
@media (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .pillars .pillar { will-change: transform, opacity; }
  .pillars .pillar.reveal {
    transform: none;
    opacity: 0;
    transition: none;
    animation: pillarPop 1.1s var(--ease) both;
    animation-play-state: paused;
  }
  .pillars .pillar.reveal.visible { animation-play-state: running; }
  .pillars .pillar:nth-child(1).reveal { animation-name: pillarPop; animation-delay: 0s; }
  .pillars .pillar:nth-child(2).reveal { animation-name: pillarPop; animation-delay: 0.22s; }
  .pillars .pillar:nth-child(3).reveal { animation-name: pillarPop; animation-delay: 0.44s; }
  .pillars .pillar { position: relative; }
  .pillars .pillar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    opacity: 0;
    pointer-events: none;
  }
  .pillars .pillar.reveal.visible::after {
    animation: pillarGlow 1.1s var(--ease) both;
  }
  @keyframes pillarPop {
    0% { opacity: 0; transform: translateY(46px) scale(0.94); }
    60% { opacity: 1; transform: translateY(-8px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes pillarGlow {
    0% { opacity: 0; box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
    55% { opacity: 1; box-shadow: 0 0 34px 6px rgba(139, 92, 246, 0.45); }
    100% { opacity: 1; box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
  }
}

/* ============ COACHING ============ */
.section__lead {
  color: var(--muted);
  font-size: 17px;
  margin-top: 14px;
}
.coach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.coach-card {
  position: relative;
  border-radius: 22px;
  padding: 34px 30px 38px;
  background: var(--grad-rich);
  color: #fff;
  box-shadow: 0 24px 60px rgba(124, 58, 237, 0.35);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.coach-card--alt {
  background: var(--grad-rich);
}
.coach-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at 90% -10%, rgba(255, 255, 255, 0.35), transparent 55%);
  pointer-events: none;
}
.coach-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px;
  position: relative;
}
.coach-card__badge {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.coach-card__icon {
  width: 58px;
  height: 58px;
  flex: none;
  color: #fff;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
}
.coach-card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
}
.coach-card__text {
  position: relative;
  color: rgba(255, 255, 255, 0.95);
  font-size: 16.5px;
  line-height: 1.6;
  text-align: left;
  flex: 1 1 auto;
  margin-bottom: 22px;
}

/* Sección Coaching: fondo morado difuminado (mismo efecto que talleres) */
#coaching {
  background:
    radial-gradient(circle at 12% 18%, rgba(90, 59, 214, 0.14), transparent 55%),
    radial-gradient(circle at 88% 78%, rgba(139, 92, 246, 0.14), transparent 55%),
    radial-gradient(circle at 50% 0%, rgba(194, 67, 255, 0.08), transparent 60%),
    radial-gradient(circle at 18% 88%, rgba(231, 200, 120, 0.05), transparent 42%),
    var(--bg);
}

/* Coaching: hover 3D más llamativo (elevación, giro y glow) */
.coach-grid { perspective: 1400px; }
.coach-card {
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
  will-change: transform;
}
.coach-card:hover {
  transform: translateY(-14px) rotateX(3deg) rotateY(-4deg) scale(1.02);
  box-shadow: 0 32px 80px rgba(124, 58, 237, 0.5), 0 0 0 1px rgba(168, 85, 247, 0.35);
}
.coach-card--alt:hover {
  transform: translateY(-14px) rotateX(3deg) rotateY(4deg) scale(1.02);
  box-shadow: 0 32px 80px rgba(109, 40, 217, 0.55), 0 0 0 1px rgba(168, 85, 247, 0.4);
}
.coach-card__icon { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.coach-card:hover .coach-card__icon { transform: scale(1.15) rotate(-6deg); }
.coach-card__title { transition: color 0.3s ease; }
.coach-card:hover .coach-card__title { color: #ede9fe; }
.coach-card__interest { transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.coach-card:hover .coach-card__interest {
  background: #fff;
  color: #7c3aed;
  border-color: #fff;
  transform: translateY(-2px);
}

.card p { text-align: justify; }
.social-link { display: inline-flex; align-items: center; color: var(--muted); transition: color 0.3s, transform 0.3s var(--ease); }
.social-link:hover { color: var(--purple); transform: translateY(-5px); }
.social-link svg { width: 22px; height: 22px; }
.footer__slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 3vw, 28px);
  text-align: center;
  margin-top: 34px;
  background: linear-gradient(120deg, var(--purple), var(--purple-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.badge-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 56px; }
.badge {
  padding: 10px 20px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.08);
  color: var(--purple-light);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.3s var(--ease), background 0.3s;
}
.badge:hover { transform: translateY(-4px); background: rgba(139, 92, 246, 0.18); }

/* TALLERES */
/* Grid con ancho máximo: las tarjetas nunca se estiran a ancho completo (evita
   que en 1 columna se expandan e invadan la siguiente sección) y quedan centradas. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 400px)); gap: 24px; justify-content: center; }

/* ============ MAZO DE CARTAS (Experiencias) ============ */
/* overflow clip: fija el "set point" de la sección: nada (cartas, tilt, animación)
   puede salirse ni interponerse con la sección siguiente. El padding vertical da
   aire para que la primera carta no se corte arriba ni la última abajo. */
.xstage { position: relative; min-height: clamp(400px, 50vw, 500px); overflow: visible; padding: 26px 0 30px; }
.xfan {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 26px;
  padding-top: 20px;
  perspective: 1400px;
}
.xcard {
  /* se ajusta a la relación de aspecto: limita el ancho por altura (vh) en pantallas
     panorámicas para que la carta nunca desborde el alto disponible */
  width: min(270px, 30vw, 42vh);
  flex: 0 1 auto;
  aspect-ratio: 4 / 5.6;
  margin: 0;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  transform: none;
  transition: transform 0.6s var(--ease), filter 0.4s;
  outline: none;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Sin volteo automático ni rotación de abanico: hover solo eleva la tarjeta */
@media (hover: hover) {
  .xcard:hover { transform: translateY(-16px); z-index: 5; }
}
.xcard:focus-visible { transform: translateY(-16px); z-index: 5; }
.xcard.picked { z-index: 10; }
.xcard.picked .xcard__inner { transform: rotateY(180deg); }
.xstage.entered .xcard { animation: cardEnter 2.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.xstage.entered .xcard:nth-child(1) { animation-delay: 0.1s; }
.xstage.entered .xcard:nth-child(2) { animation-delay: 0.6s; }
.xstage.entered .xcard:nth-child(3) { animation-delay: 1.1s; }
@keyframes cardEnter {
  0% { opacity: 0; transform: translateY(54px) scale(0.97); }
  50% { opacity: 1; transform: translateY(0) scale(1); }
  66% { transform: translateY(9px) scale(0.94); }
  82% { transform: translateY(-4px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.xcard__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.7s var(--ease);
  will-change: transform;
}
.xcard__face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 36px rgba(23, 23, 29, 0.22);
  overflow: hidden;
}
.xcard__face--back {
  background: var(--panel);
  border: 1px solid rgba(23, 23, 29, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px;
  text-align: center;
}
.xcard__face--back img { width: 24%; opacity: 0.9; }
.xcard__name {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.xcard__tagline {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 210px;
}
.xcard__face--front {
  transform: rotateY(180deg);
  background: var(--grad);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.xcard__face--front h3 { font-family: var(--font-display); font-size: 19px; color: #fff; flex: none; }
.xcard__face--front p { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.93); text-align: justify; flex: 1 1 auto; overflow-wrap: break-word; }
@media (max-width: 1000px) {
  .xstage { min-height: 0; }
  .xfan { flex-direction: column; align-items: center; gap: 22px; padding-top: 0; }
  .xcard {
    flex: 0 0 auto;
    margin: 0;
    transform: none;
    transform-origin: center;
    width: min(80vw, 300px);
    aspect-ratio: 4 / 4.3;
  }
  .xcard__inner { height: 100%; }
  .xcard__face { position: absolute; inset: 0; border-radius: 14px; }
  .xcard__face--back { display: flex; }
  .xcard__face--front { transform: rotateY(180deg); display: flex; flex-direction: column; gap: 12px; padding: 26px 22px; min-height: 0; }
  .xcard:focus-visible { transform: translateY(-4px); }
  @media (hover: hover) {
    .xcard:hover { transform: translateY(-4px); }
  }
  .xcard.picked { transform: scale(1.02); }
}
/* Botón "¿Qué es?" en las tarjetas de experiencias */
.xcard__what {
  flex: none;
  padding: 8px 14px;
  font-size: 12px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--purple);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 999px;
  margin-top: 20px;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.xcard__what:hover { background: var(--grad); color: #fff; transform: translateY(-2px); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.cards--3 .card { text-align: center; }
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(23, 23, 29, 0.08);
  border-radius: var(--radius);
  padding: 36px 32px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(23, 23, 29, 0.05);
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s;
  will-change: transform;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, 0.14), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card:hover { transform: translateY(-8px); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 24px 50px rgba(139, 92, 246, 0.18); }
.card:hover::before { opacity: 1; }
.card__num { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--purple); margin-bottom: 18px; letter-spacing: 0.15em; }
.card h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.card__tags { display: flex; gap: 10px; flex-wrap: wrap; }
.card__tags span { font-size: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(23, 23, 29, 0.14); color: var(--muted); }
.card--cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--grad); border: none; }
.card--cta h3 { color: #fff; }
.card--cta p { color: rgba(255, 255, 255, 0.85); }
.card--cta .btn--primary { background: rgba(255, 255, 255, 0.16); box-shadow: none; backdrop-filter: blur(8px); }
.card--cta .btn--primary:hover { background: rgba(255, 255, 255, 0.26); }

/* TALLERES: recorrido horizontal al bajar por la página
   El sticky fija la sección a la pantalla y el scroll vertical del documento
   compra el avance del carrusel. La altura del section se estira en JS con la
   distancia de viaje del track para que haya suficiente recorrido. */
#talleres { padding: 0; }
.talleres-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 3vw, 30px);
  padding: calc(clamp(22px, 4vh, 44px) + 110px) clamp(20px, 5vw, 64px) calc(clamp(22px, 4vh, 44px) + 44px);
  overflow: hidden;
}
.talleres-head { flex: none; }
.talleres-head .section__head { margin-bottom: 0; }
.talleres-head h2 { font-size: clamp(24px, 3.6vw, 42px); }
.talleres-track {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(20px, 3vw, 30px);
  width: max-content;
  padding-inline: clamp(20px, 5vw, 64px);
  will-change: transform;
}
.talleres-track .card {
  flex: 0 0 auto;
  width: clamp(280px, 26vw, 420px);
  height: 100%;
}
@media (max-height: 640px) {
  .talleres-sticky { gap: 12px; padding: calc(14px + 76px) clamp(20px, 5vw, 64px) calc(14px + 24px); }
  .talleres-head .kicker { margin-bottom: 8px; }
  .talleres-head h2 { font-size: 21px; }
  .talleres-track .card { padding: 22px 22px 24px; }
  .talleres-track .card__num { margin-bottom: 10px; }
  .talleres-track .card p { margin-bottom: 12px; }
}

/* METODOLOGÍA */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 36px; position: relative; }
.step { position: relative; padding-top: 70px; }
.step__n {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: #fff;
  background: var(--grad);
  border-radius: 14px;
  margin-bottom: 22px;
  box-shadow: 0 10px 26px rgba(139, 92, 246, 0.35);
}
.step__line { position: absolute; top: 26px; left: 76px; right: 20px; height: 1px; background: linear-gradient(to right, rgba(139, 92, 246, 0.4), transparent); }
.step h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 15px; }

/* Efecto dominó: cada número salta una vez, el siguiente arranca al terminar el anterior */
.steps.domino .step__n { animation: stepJump 0.85s cubic-bezier(0.34, 1.4, 0.5, 1) both; }
.steps.domino .step:nth-child(1) .step__n { animation-delay: 0.1s; }
.steps.domino .step:nth-child(2) .step__n { animation-delay: 0.8s; }
.steps.domino .step:nth-child(3) .step__n { animation-delay: 1.5s; }
.steps.domino .step:nth-child(4) .step__n { animation-delay: 2.2s; }
@keyframes stepJump {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-30px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* MARQUEE */
.marquee { overflow: hidden; padding: 26px 0; margin: 26px 0; border-top: 1px solid rgba(23, 23, 29, 0.06); border-bottom: 1px solid rgba(23, 23, 29, 0.06); background: linear-gradient(90deg, #f4f1ff, #ffffff 28%, #ffffff 72%, #f4f1ff); }
.marquee__track { display: flex; width: max-content; animation: scrollX 80s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; margin: 0 20px; }
.marquee__track i { color: var(--purple); font-style: normal; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* Marquee de arriba (Resultados): copy del inferior, direccion opuesta = izquierda a derecha */
.marquee--top .marquee__track { animation-name: scrollXR; animation-direction: normal; }
@keyframes scrollXR { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* RESULTADOS */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 40px; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 5vw, 68px); background: var(--grad-rich); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; filter: drop-shadow(0 6px 18px rgba(139, 92, 246, 0.28)); }
.section__note { color: var(--muted); font-size: 15px; letter-spacing: 0.08em; }
.stat p { color: var(--muted); margin-top: 12px; font-size: 15px; }

/* CITA */
.section--quote { text-align: center; }
.section__head--left,
.section__head--left h2 { text-align: left; }
.quote { max-width: 760px; margin-inline: auto; }
.quote p { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 38px); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }
.quote footer { margin-top: 28px; color: var(--muted); font-size: 15px; }
.quote footer span { color: var(--purple-light); }

/* CONTACTO */
.section--contact { padding-bottom: 40px; overflow-x: clip; }
.contact-card { overflow: hidden; }

.contact-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  background: var(--panel);
  border: 1px solid rgba(23, 23, 29, 0.08);
  border-radius: 28px;
  box-shadow: 0 8px 30px rgba(23, 23, 29, 0.06);
  padding: clamp(32px, 6vw, 72px);
}
.contact-card > div,
.contact-form,
.contact-form label,
.contact-form .interest-drop,
.contact-form input,
.contact-form textarea { min-width: 0; max-width: 100%; }
.contact-card h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin-bottom: 20px; }
.contact-card__text { color: var(--muted); margin-bottom: 28px; }
.contact-card__mail a { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--purple-light); border-bottom: 1px solid transparent; transition: border-color 0.3s; overflow-wrap: anywhere; word-break: break-word; }
.contact-card__mail a:hover { border-color: var(--purple-light); }
.contact-form { display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 8px; }
.contact-form label > span { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
.contact-form__flabel { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
.contact-form input, .contact-form textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid rgba(23, 23, 29, 0.14);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.3s, box-shadow 0.3s;
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(23, 23, 29, 0.32); }
.contact-form__msg { font-size: 14px; color: #16a34a; min-height: 20px; }
.contact-form__undo svg { width: 18px; height: 18px; }
.contact-form__undo { gap: 10px; }
.contact-form__undo[hidden] { display: none !important; }
.interest-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--grad);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(124, 58, 237, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  z-index: 3000;
  max-width: 90vw;
}
.interest-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.interest-drop {
  position: relative;
  display: grid;
  gap: 0;
}
.interest-drop__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid rgba(23, 23, 29, 0.14);
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  transition: border-color 0.3s, box-shadow 0.3s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.interest-drop__toggle:hover { border-color: rgba(139, 92, 246, 0.5); }
.interest-drop__toggle[aria-expanded="true"] {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}
.interest-drop__placeholder {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 400;
  color: rgba(23, 23, 29, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interest-drop__count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.interest-drop__caret {
  width: 16px;
  height: 16px;
  color: var(--purple);
  transition: transform 0.3s var(--ease);
}
.interest-drop__toggle[aria-expanded="true"] .interest-drop__caret { transform: rotate(180deg); }
.interest-drop__panel {
  border: none;
  padding: 0;
  margin: 10px 0 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), margin 0.3s;
}
.interest-drop__panel.open { opacity: 1; }
.interest-drop__custom {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.interest-drop__custom[hidden] { display: none; }
.interest-drop__custom input {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid rgba(23, 23, 29, 0.14);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.interest-drop__custom input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}
.interest-drop__custom input::placeholder { color: rgba(23, 23, 29, 0.32); }
.interest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px;
}
.interest {
  display: flex !important;
  align-items: center;
  gap: 9px;
  background: var(--bg-soft);
  border: 1px solid rgba(23, 23, 29, 0.14);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.interest:hover { border-color: rgba(139, 92, 246, 0.5); }
.interest:has(input:checked) {
  border-color: var(--purple);
  background: rgba(139, 92, 246, 0.08);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
.interest input { width: auto; accent-color: var(--purple); flex: none; }
.interest span {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}

/* FOOTER */
.footer { padding: 60px 0 30px; border-top: 1px solid rgba(23, 23, 29, 0.06); background: var(--bg-soft); }
.footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; padding-bottom: 40px; border-bottom: 1px solid rgba(23, 23, 29, 0.06); }
.footer__links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer__links a { font-size: 14px; color: var(--muted); transition: color 0.3s; }
.footer__links a:hover { color: var(--purple-light); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; font-size: 13px; color: var(--muted); }
.footer__bottom strong { color: var(--purple-light); }
.heart { color: #f472b6; }

/* ============ REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: 0.1s; }
.reveal--d2 { transition-delay: 0.2s; }
.reveal--d3 { transition-delay: 0.3s; }
.reveal--d4 { transition-delay: 0.4s; }
.reveal--d5 { transition-delay: 0.5s; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #c9c9d4; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ============ RESPONSIVE ============ */
.btn, .to-top { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ============ Máquina de escribir (Nosotros) ============ */
.ty-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--purple);
  animation: tyBlink 0.85s steps(1) infinite;
}
@keyframes tyBlink { 50% { opacity: 0; } }

.nav__arrow[hidden] { display: none !important; }

@media (max-width: 480px) {
  .nav { padding: 16px 4vw; gap: 12px; }
  .nav.scrolled { padding: 10px 4vw; }
  .nav__logo { gap: 7px; }
  .nav__logo-img { width: 28px; height: 28px; }
  .nav__logo-letters { height: min(26px, 7vw); }
  .nav__buro img { height: 20px; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__arrow { display: none; }
  .nav__burger { display: flex; }
  .split, .contact-card { grid-template-columns: 1fr; }
  .contact-card { padding: clamp(24px, 6vw, 40px) clamp(18px, 5vw, 40px); }
  .contact-card__mail a { font-size: 16px; }
  .pillars { grid-template-columns: 1fr; width: min(360px, 100%); gap: 16px; }
  .pillar,
  .pillar:nth-child(1),
  .pillar:nth-child(2),
  .pillar:nth-child(3) {
    border-radius: 18px;
    border: 2px solid rgba(139, 92, 246, 0.4);
  }
  .coach-grid { grid-template-columns: 1fr; }
  .interest-grid { grid-template-columns: 1fr; }
  .step__line { display: none; }
  .steps { gap: 18px; }
  .step { padding-top: 44px; }
  .step__n { width: 46px; height: 46px; font-size: 18px; margin-bottom: 16px; }
  .footer__top { flex-direction: column; align-items: flex-start; }
}

/* Contacto: los cuadros se compactan dinámicamente según la relación de
   aspecto. Cuanto más vertical/angosta la pantalla, menores los paddings,
   gaps y tipografías para que todo quede dentro del cuadro blanco. */
@media (max-aspect-ratio: 3 / 4) {
  .contact-card { gap: 24px; }
  .contact-form { gap: 12px; }
  .contact-card h2 { font-size: clamp(24px, 6.5vw, 30px); }
  .contact-card__mail a { font-size: clamp(15px, 4.2vw, 18px); }
  .contact-form label { gap: 6px; }
  .contact-form label > span,
  .contact-form__flabel { font-size: 12px; }
  /* input ≥ 16px: evita el zoom automático de iOS al enfocar */
  .contact-form input, .contact-form textarea,
  .interest-drop__toggle, .interest-drop__custom input {
    font-size: 16px;
    padding: 12px 13px;
  }
  .interest span { font-size: 12.5px; }
  .interest { padding: 9px 11px; }
  .btn--full { padding: 13px 20px; }
}

/* Pantallas de poca altura (landscape de celular / ventanas bajas):
   se compacta el espaciado vertical para que cada sección quepa mejor. */
@media (max-height: 520px) and (max-width: 900px) {
  .section { padding: 26px 0; }
  .section__head { margin-bottom: 18px; }
  .split, .split--2 { margin-top: 18px; gap: 26px; }
  .split > p, .split--2 > div { padding: 22px; }
  .pillars { margin: 24px auto 0; gap: 10px; }
  .coach-grid { gap: 16px; margin-top: 22px; }
  .xfan { gap: 14px; }
  .divider--mid { padding: 10px 0; }
  .cards { gap: 14px; }
  .badge-row { gap: 8px; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  /* Las animaciones son parte del diseño de la marca, así que corren con su
     duración real incluso si iOS trae "Reduce Motion". El fallo anterior
     (duration 0.01ms en todo) hacía girar el carrusel/divisores a velocidad
     de vértigo y volcaba las cartas sin animación. */
  html { scroll-behavior: auto; }
  .marquee__track, .divider img { animation-duration: 60s; }
}