/* =======================================================================
   Fonema — Landing v2 «Edición Cinemática»
   Fondo oscuro azul-led, tipografía colosal, hojas claras como capítulos.
   Construida sobre los tokens de marca (colors_and_type.css).
   ======================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

.v2 {
  /* Paleta cinemática derivada de la marca (azul-led) */
  --d-bg: #0D141B;                 /* más profundo que Space Black */
  --d-bg-2: var(--fonema-space);   /* #161E25 */
  --d-surface: #18222C;
  --d-line: rgba(255,255,255,.12);
  --d-line-soft: rgba(255,255,255,.07);
  --d-fg: #F4F7F9;
  --d-fg-soft: rgba(244,247,249,.72);
  --d-fg-mute: rgba(244,247,249,.45);
  --glow: #93C3DE;  /* azul-luz para acentos sobre oscuro */
  --accent: var(--fonema-blue);
  --sheet-r: clamp(22px, 3.5vw, 40px);

  background: var(--d-bg); color: var(--d-fg);
  font-family: var(--font-sans);
  overflow-x: clip;
}
.v2 img { max-width: 100%; display: block; }
.v2 ::selection { background: color-mix(in srgb, var(--fonema-blue) 35%, transparent); }

.wrap2 { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }

/* ---------- Tipos ---------- */
.d1 {
  font-family: var(--font-display); font-weight: 100;
  font-size: clamp(36px, 5.6vw, 84px); line-height: 1.05; letter-spacing: -0.02em;
  margin: 0; text-wrap: balance;
}
.d2 {
  font-family: var(--font-display); font-weight: 100;
  font-size: clamp(36px, 5.4vw, 84px); line-height: 0.97; letter-spacing: -0.025em;
  margin: 0; text-wrap: balance;
}
.d3 {
  font-family: var(--font-display); font-weight: 100;
  font-size: clamp(26px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.lead2 { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.62; margin: 0; text-wrap: pretty; }
.eb {
  font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-wider);
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
}
.eb::before { content: ""; width: 30px; height: 1px; background: currentColor; opacity: .6; }
.fn-script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }

/* Capítulo */
.chap { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(28px, 4vw, 48px); }
.chap .cnum { font-family: var(--font-display); font-weight: 100; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .12em; }
.chap .crule { flex: 1; height: 1px; background: currentColor; opacity: .14; }
.chap .clbl { font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-wider); opacity: .6; }

/* Palabra subrayada que se dibuja */
.udraw { position: relative; white-space: nowrap; }
.udraw::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.16em; height: .055em;
  background: var(--glow); transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease-out) .25s;
}
.udraw.is-in::after { transform: scaleX(1); }

/* ---------- Botones ---------- */
.b2 {
  font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  padding: 15px 26px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard), transform var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard);
  will-change: transform;
}
.b2:active { transform: scale(.97); }
.b2:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.b2--lg { font-size: 16px; padding: 17px 30px; }
.b2--light { background: #fff; color: var(--fonema-ink); }
.b2--light.b2--accent-red { background: #fff; color: var(--fonema-imperial); }
.b2--light.b2--accent-red:hover { background: #E7EDF1; }
.b2--light:hover { background: #E7EDF1; box-shadow: 0 14px 40px -12px rgba(255,255,255,.25); }
.b2--blue { background: var(--fonema-blue); color: #fff; }
.b2--blue:hover { background: var(--fonema-blue-700, #1E455B); box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--fonema-blue) 55%, transparent); }
.b2--ghost-d { background: transparent; color: var(--d-fg); border-color: rgba(255,255,255,.32); }
.b2--ghost-d:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.b2--ghost-l { background: transparent; color: var(--fonema-ink); border-color: var(--fonema-line); }
.b2--ghost-l:hover { border-color: var(--fonema-blue); color: var(--fonema-blue); }
.btn-row2 { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Duotono azul (color grade de estudio) ---------- */
.duo { position: relative; overflow: hidden; isolation: isolate; }
.duo > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.92); }
.duo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #2E6E96; mix-blend-mode: color; opacity: 1;
}
.duo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--d-bg) 30%, transparent), transparent 35%, color-mix(in srgb, var(--d-bg) 55%, transparent));
  mix-blend-mode: multiply;
}

/* ---------- NAV ---------- */
.nav2 {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 76px;
  display: flex; align-items: center;
  --nav-fg: #fff; --nav-fg-soft: rgba(255,255,255,.78);
  background: transparent;
  transition: background .45s var(--ease-standard), color .45s var(--ease-standard), box-shadow .45s var(--ease-standard);
}
.nav2.th-dark { background: color-mix(in srgb, var(--d-bg) 92%, transparent); box-shadow: 0 1px 0 var(--d-line-soft); }
.nav2.th-light { background: var(--fonema-paper); --nav-fg: var(--fonema-ink); --nav-fg-soft: var(--fonema-graphite); box-shadow: 0 1px 0 var(--fonema-line); }
.nav2.th-blue { background: var(--fonema-blue); box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.nav2-inner { display: flex; align-items: center; gap: 32px; width: 100%; }
.brand2 { display: flex; align-items: center; gap: 11px; text-decoration: none; border: none; position: relative; z-index: 41; }
.iso-swap { position: relative; display: inline-flex; height: 30px; width: 30px; flex: none; }
.iso-swap img { position: absolute; inset: 0; height: 30px; width: auto; transition: opacity .3s var(--ease-standard); }
.iso-swap .iso-for-dark { opacity: 1; }
.iso-swap .iso-for-light { opacity: 0; }
.nav2.th-light .iso-swap .iso-for-dark { opacity: 0; }
.nav2.th-light .iso-swap .iso-for-light { opacity: 1; }
.brand2 .isoW { height: 30px; width: auto; }
.brand2 .wm { font-family: var(--font-display); font-weight: 100; font-size: 21px; letter-spacing: 0.07em; color: var(--nav-fg); transition: color .45s var(--ease-standard); }
.nav2-links { display: flex; gap: 30px; margin-inline: auto; }
.nav2-links a {
  font-size: 14px; color: var(--nav-fg-soft); text-decoration: none; border: none; cursor: pointer;
  white-space: nowrap;
  transition: color .3s var(--ease-standard);
}
.nav2-links a:hover { color: var(--nav-fg); }
.nav2-cta { display: flex; align-items: center; gap: 18px; }
.nav2-tel { font-size: 13.5px; color: var(--nav-fg-soft); text-decoration: none; border: none; display: inline-flex; align-items: center; gap: 8px; transition: color .3s; white-space: nowrap; }
.nav2-tel:hover { color: var(--nav-fg); }
.nav2 .b2 { padding: 11px 20px; font-size: 14px; }
.nav2.th-light .b2--light { background: var(--fonema-blue); color: #fff; }

/* Burger (móvil) */
.nav2-burger {
  display: none; background: none; border: none; cursor: pointer; padding: 10px;
  position: relative; z-index: 41; color: var(--nav-fg);
}
.nav2-burger .bars { display: flex; flex-direction: column; gap: 6px; width: 24px; }
.nav2-burger .bars span { height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-standard), opacity .3s; }
.nav2.menu-open .bars span:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
.nav2.menu-open .bars span:nth-child(2) { opacity: 0; }
.nav2.menu-open .bars span:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }
.nav2.menu-open { --nav-fg: #fff; --nav-fg-soft: rgba(255,255,255,.8); background: transparent; box-shadow: none; }

.nav2-sheet {
  position: fixed; inset: 0; z-index: 39;
  background: color-mix(in srgb, var(--d-bg) 84%, transparent);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  color: #fff; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-standard);
}
.nav2.menu-open .nav2-sheet { opacity: 1; pointer-events: auto; }
.nav2-sheet[hidden] { display: none; }
.nav2-sheet-inner { position: absolute; inset: 76px 0 0 0; display: flex; flex-direction: column; padding: clamp(20px, 7vw, 36px) clamp(20px, 6vw, 40px) clamp(28px, 7vw, 40px); }
.nav2-sheet-eyebrow { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-wider); color: rgba(255,255,255,.5); margin: 0 0 8px; }
.nav2-sheet-links { display: flex; flex-direction: column; }
.nav2-sheet-links a {
  display: flex; align-items: baseline; gap: 16px; text-decoration: none; border: none;
  padding: 18px 2px; border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff; font-family: var(--font-display); font-weight: 100; font-size: 23px; letter-spacing: -0.01em;
}
.nav2-sheet-links a .ix { font-size: 12px; font-weight: 500; color: var(--glow); letter-spacing: .08em; min-width: 22px; font-family: var(--font-sans); }
.nav2-sheet-links a .lbl { flex: 1; }
.nav2-sheet-links a .ar { color: rgba(255,255,255,.35); font-size: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .nav2.menu-open .nav2-sheet-links a { animation: sheetIn2 .5s var(--ease-out) both; }
  .nav2.menu-open .nav2-sheet-links a:nth-child(2) { animation-delay: .06s; }
  .nav2.menu-open .nav2-sheet-links a:nth-child(3) { animation-delay: .12s; }
  .nav2.menu-open .nav2-sheet-links a:nth-child(4) { animation-delay: .18s; }
  .nav2.menu-open .nav2-sheet-links a:nth-child(5) { animation-delay: .24s; }
  @keyframes sheetIn2 { from { transform: translateY(14px); } to { transform: none; } }
}
.nav2-sheet-foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; padding-top: 28px; }
.nav2-sheet-foot .b2 { width: 100%; }
.nav2-sheet-contacts { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.nav2-sheet-contacts a { font-size: 14px; color: rgba(255,255,255,.78); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: none; }

/* ---------- HERO ---------- */
.hero2 { position: relative; min-height: clamp(640px, 92svh, 920px); display: flex; align-items: center; overflow: clip; isolation: isolate; }
.hero2-media { position: absolute; inset: 0; z-index: 0; will-change: transform; transform-origin: center 30%; }
.hero2-media .duo { width: 100%; height: 100%; }
.hero2-media .duo > img { object-position: center 26%; }
.hero2-media .hero2-photo-team > img { object-position: 55% 38%; }
.hero2-media .hero2-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s cubic-bezier(0.4,0,0.2,1); }
.hero2-media .hero2-photo.on { opacity: 1; z-index: 1; }
.hero2-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,20,27,.62) 0%, rgba(13,20,27,.18) 34%, rgba(13,20,27,.55) 68%, var(--d-bg) 100%),
    linear-gradient(90deg, rgba(13,20,27,.55) 0%, rgba(13,20,27,.15) 55%, rgba(13,20,27,.05) 100%);
}
.hero2-veil { position: absolute; inset: 0; z-index: 2; background: var(--d-bg); opacity: 0; pointer-events: none; }
.hero2-inner { position: relative; z-index: 3; width: 100%; min-height: clamp(540px, 74vh, 880px); padding-block: clamp(140px, 18vh, 220px) clamp(72px, 10vh, 120px); will-change: transform; }
.hero2-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: inherit; opacity: 0; transition: opacity 1.1s cubic-bezier(0.4,0,0.2,1) .2s, transform 1.1s cubic-bezier(0.4,0,0.2,1) .2s; transform: translateY(14px); pointer-events: none; }
.hero2-slide.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hero2-eb { color: rgba(255,255,255,.82); margin-bottom: clamp(20px, 3vh, 34px); }
.hero2 h1 { color: #fff; max-width: 26ch; text-shadow: 0 2px 40px rgba(5,10,14,.45); }
.hero2 h1 .hl { color: var(--glow); }
.hero2-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(32px, 5vh, 56px); flex-wrap: wrap; }
.hero2-lead { color: rgba(255,255,255,.88); max-width: 460px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; margin: 0 0 26px; text-wrap: pretty; }
.hero2-lead strong { color: #fff; font-weight: 500; }
.hero2-mini { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.72); margin-top: 24px; }
.hero2-mini strong { color: #fff; font-weight: 500; }
.hero2-mini .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.4); }

/* Reloj de evaluación (anillo SVG) */
.ring30 { position: relative; width: clamp(120px, 12vw, 156px); aspect-ratio: 1; flex: none; }
.ring30 svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring30 .tr { stroke: rgba(255,255,255,.18); }
.ring30 .pr { stroke: var(--glow); stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease-out); }
.ring30-in { position: absolute; inset: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.ring30-in .fn-script { font-size: clamp(22px, 2.1vw, 28px); color: #fff; line-height: 1; }
.ring30-in .sub { font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255,255,255,.7); }

/* Flechas y puntos del carrusel del Hero */
.hero2-arrow {
  position: absolute; right: clamp(16px, 3vw, 32px); z-index: 6; width: 46px; height: 46px;
  border-radius: 999px; background: rgba(13,20,27,.55); border: 1px solid rgba(255,255,255,.28);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 20px; line-height: 1; transition: background var(--dur-1) var(--ease-standard), opacity var(--dur-1);
}
.hero2-arrow:hover { background: rgba(13,20,27,.82); }
.hero2-arrow-prev { top: calc(50% - 30px); }
.hero2-arrow-next { top: calc(50% + 30px); }
.hero2-arrow:disabled { opacity: .3; pointer-events: none; }
.hero2-dots { position: absolute; z-index: 6; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hero2-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.32); transition: background var(--dur-2); }
.hero2-dots span.on { background: #fff; }

/* Indicador scroll */
.hero2-scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.75); text-decoration: none; border: none;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ls-wider);
}
.hero2-scroll .line { width: 1px; height: 52px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.hero2-scroll .line::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 45%; background: #fff; transform: translateY(-110%); }
@media (prefers-reduced-motion: no-preference) {
  .hero2-scroll .line::after { animation: sp2 2.1s var(--ease-standard) infinite; }
  @keyframes sp2 { 0% { transform: translateY(-110%); } 60%, 100% { transform: translateY(240%); } }
}

/* ---------- LOGOS (marquee) ---------- */
.logos2 { position: relative; padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 88px); }
.logos2-label { text-align: center; font-size: 12px; color: var(--d-fg-mute); text-transform: uppercase; letter-spacing: var(--ls-wider); margin: 0 0 30px; }
.logos2-label b { color: var(--d-fg-soft); font-weight: 500; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 28px; width: max-content; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: mq 36s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  @keyframes mq { to { transform: translateX(-50%); } }
}
.mlogo-img { height: 38px; display: flex; align-items: center; justify-content: center; flex: none; }
.mlogo-img img { height: 100%; width: auto; object-fit: contain; max-width: 140px; opacity: .92; }
.mlogo-img.mono-flat img { filter: grayscale(1) brightness(0) invert(1); opacity: .85; }

/* ---------- STATS (counters) ---------- */
.stats2 { position: relative; padding-block: clamp(56px, 9vw, 130px); overflow: clip; }
.stats2::before {
  content: ""; position: absolute; left: -10vw; top: -16vw; width: 46vw; max-width: 640px; aspect-ratio: 1;
  background: url("assets/logos/fonema-isotype-white.png") center / contain no-repeat; opacity: .04; pointer-events: none;
}
.stats2-head { display: flex; flex-direction: column; gap: 22px; max-width: 880px; margin-bottom: clamp(48px, 7vw, 88px); }
.stats2-head .eb { color: var(--glow); }
.stats2-head .d2 { color: var(--d-fg); }
.stats2-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 3vw, 40px); }
.stat2 { border-top: 1px solid var(--d-line); padding-top: 22px; }
.stat2 .n {
  font-family: var(--font-display); font-weight: 100; font-variant-numeric: tabular-nums;
  font-size: clamp(46px, 5.4vw, 88px); line-height: .95; letter-spacing: -0.03em; color: #fff;
  display: flex; align-items: flex-start;
}
.stat2 .n sup { font-size: .4em; line-height: 1.6; margin-left: 3px; color: var(--glow); }
.stat2 .l { font-size: 13.5px; line-height: 1.5; color: var(--d-fg-soft); margin-top: 14px; max-width: 24ch; }
.stats2-note { margin-top: clamp(36px, 5vw, 56px); }

/* nota placeholder */
.ph2 {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  border: 1px dashed currentColor; border-radius: var(--radius-pill); padding: 3px 10px; opacity: .45;
  vertical-align: middle; margin-left: 10px; white-space: nowrap;
}

/* ---------- HOJA CLARA (capítulo) ---------- */
.sheet { position: relative; background: var(--fonema-paper); color: var(--fonema-ink); border-radius: var(--sheet-r); margin-inline: clamp(8px, 1.2vw, 18px); }
.sheet + .sheet { margin-top: clamp(8px, 1.2vw, 18px); }
.sheet h2, .sheet .d2 { color: var(--fonema-imperial); }
.sheet .chap { color: var(--fonema-ink); }
.sheet .chap .cnum { color: var(--fonema-ink); }
.sheet .eb { color: var(--fonema-imperial); }
.sheet .lead2 { color: var(--fonema-ink); }
.sheet-pad { padding-block: clamp(64px, 9vw, 140px); }

/* ---------- BENEFICIOS ---------- */
.ben2-head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: end; margin-bottom: clamp(44px, 6vw, 72px); }
.ben2-head .lead2 { padding-bottom: 8px; }
.ben2-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ben2 {
  grid-column: span 2;
  background: #fff; border: 1px solid var(--fonema-line); border-radius: var(--radius-lg);
  padding: 30px 28px; min-height: 250px; display: flex; flex-direction: column; gap: 16px;
  transition: transform .45s var(--ease-standard), box-shadow .45s var(--ease-standard), border-color .45s;
  will-change: transform;
}
.ben2:nth-child(4), .ben2:nth-child(5) { grid-column: span 3; }
.ben2:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--fonema-blue-100); }
.ben2 .bico { width: 46px; height: 46px; border-radius: 50%; background: var(--fonema-blue-050); color: var(--fonema-blue); display: inline-flex; align-items: center; justify-content: center; }
.ben2 h3 { font-family: var(--font-display); font-weight: 100; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.06; letter-spacing: -0.01em; margin: 0; }
.ben2 p { font-size: 14.5px; line-height: 1.58; color: var(--fonema-ink); margin: 0; }
.ben2 .bnum { margin-top: auto; font-family: var(--font-display); font-weight: 100; font-size: 15px; color: var(--fonema-ink); letter-spacing: .1em; }

/* ---------- RESULTADOS (bloque azul) ---------- */
.res2 { background: var(--fonema-blue); color: #fff; border-radius: var(--sheet-r); margin-inline: clamp(8px, 1.2vw, 18px); margin-top: clamp(8px, 1.2vw, 18px); position: relative; overflow: clip; }
.res2::after {
  content: ""; position: absolute; right: -14vw; bottom: -18vw; width: 52vw; max-width: 700px; aspect-ratio: 1;
  background: url("assets/logos/fonema-isotype-white.png") center / contain no-repeat; opacity: .07; pointer-events: none;
}
.res2-inner { position: relative; z-index: 1; padding-block: clamp(64px, 9vw, 140px); display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.res2 .chap { color: #fff; }
.res2 .chap .cnum { color: rgba(255,255,255,.85); }
.res2 .eb { color: rgba(255,255,255,.75); }
.res2 .d2 { color: #fff; }
.res2 .lead2 { color: rgba(255,255,255,.85); }
.res2-left { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.out2 { display: flex; gap: 22px; align-items: flex-start; padding: clamp(22px, 2.6vw, 34px) 0; border-top: 1px solid rgba(255,255,255,.2); }
.out2:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
.out2 .onum { font-family: var(--font-display); font-weight: 100; font-size: clamp(17px, 1.6vw, 21px); color: rgba(255,255,255,.55); width: 38px; flex: none; padding-top: 5px; }
.out2 h3 { font-family: var(--font-display); font-weight: 100; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.08; letter-spacing: -0.012em; margin: 0 0 6px; color: #fff; }
.out2 p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 0; max-width: 46ch; }

/* ---------- MÉTODO (horizontal) ---------- */
.met2-head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin-bottom: clamp(44px, 6vw, 72px); }
.met2-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
.met2-step { background: #fff; border: 1px solid var(--fonema-line); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.met2-step .midx {
  font-family: var(--font-display); font-weight: 100; font-size: clamp(52px, 5.4vw, 80px); line-height: .9; letter-spacing: -0.03em;
  color: var(--fonema-ink); display: flex; align-items: baseline; gap: 12px;
}
.met2-step .midx::after { content: ""; flex: 1; height: 1px; background: var(--fonema-line); }
.met2-step h3 { font-family: var(--font-display); font-weight: 100; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.06; margin: 6px 0 0; }
.met2-step p { font-size: 14.5px; line-height: 1.58; color: var(--fonema-ink); margin: 0; }
.met2-step ul { list-style: none; padding: 0; margin: 2px 0 0; display: flex; flex-direction: column; gap: 9px; }
.met2-step ul li { font-size: 13.5px; color: var(--fonema-ink); display: flex; gap: 10px; align-items: baseline; }
.met2-step ul li::before { content: "—"; color: var(--fonema-ink); flex: none; }

/* ---------- BANDA STATEMENT ---------- */
.band2 { position: relative; overflow: clip; isolation: isolate; margin-top: clamp(48px, 8vw, 110px); }
.band2-bg { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; }
.band2-bg .duo { width: 100%; height: 100%; }
.band2::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(96deg, rgba(13,20,27,.9) 0%, rgba(13,20,27,.66) 46%, rgba(13,20,27,.3) 100%); }
.band2-inner { position: relative; z-index: 2; padding-block: clamp(96px, 14vw, 210px); display: flex; flex-direction: column; gap: 28px; max-width: 880px; }
.band2 .eb { color: rgba(255,255,255,.75); }
.band2 h2 { color: #fff; }
.band2 h2 .fn-script { color: var(--glow); font-size: 1.06em; }
.band2 .lead2 { color: rgba(255,255,255,.86); max-width: 560px; }

/* ---------- CASO + TESTIMONIOS ---------- */
.case2 { display: grid; grid-template-columns: 1.12fr 0.88fr; border-radius: var(--radius-xl); overflow: clip; background: #fff; border: 1px solid var(--fonema-line); box-shadow: var(--shadow-1); }
.case2-body { padding: clamp(30px, 4vw, 56px); display: flex; flex-direction: column; gap: 24px; }
.case2-tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--fonema-imperial); font-weight: 500; }
.case2-q { font-family: var(--font-display); font-weight: 100; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.16; letter-spacing: -0.012em; margin: 0; }
.case2-q .hl { color: var(--fonema-imperial); }
.case2-rows { display: flex; flex-direction: column; gap: 12px; }
.case2-row { display: flex; gap: 14px; align-items: baseline; font-size: 14.5px; line-height: 1.55; color: var(--fonema-imperial); }
.case2-row b { color: var(--fonema-imperial); font-weight: 500; min-width: 84px; text-transform: uppercase; font-size: 11px; letter-spacing: var(--ls-wide); }
.case2-person { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--fonema-line); margin-top: auto; }
.case2-person .av { width: 46px; height: 46px; border-radius: 50%; background: var(--fonema-blue-050); color: var(--fonema-imperial); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 100; font-size: 17px; flex: none; }
.case2-person .nm { font-size: 14px; font-weight: 500; color: var(--fonema-imperial); }
.case2-person .rl { font-size: 12.5px; color: var(--fonema-imperial); }
.case2-metric { background: var(--fonema-prussian); color: #fff; padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; overflow: clip; }
.case2-metric::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 340px; height: 340px; background: url("assets/logos/fonema-isotype-white.png") center / contain no-repeat; opacity: .09; }
.case2-metric .big { font-family: var(--font-display); font-weight: 100; font-variant-numeric: tabular-nums; font-size: clamp(72px, 9vw, 128px); line-height: .88; letter-spacing: -0.04em; }
.case2-metric .cap { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 240px; position: relative; z-index: 1; }

.test2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.test2 { background: #fff; border: 1px solid var(--fonema-line); border-radius: var(--radius-lg); padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 20px; min-height: 270px; will-change: transform; }
.test2 .tq { font-family: var(--font-display); font-weight: 100; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; letter-spacing: -0.008em; margin: 0; flex: 1; }
.test2 .tq::before { content: "\201C"; color: var(--fonema-imperial); font-size: 1.9em; line-height: 0; vertical-align: -0.32em; margin-right: 3px; font-family: var(--font-display); }
.test2 .person { display: flex; align-items: center; gap: 13px; padding-top: 16px; border-top: 1px solid var(--fonema-line); }
.test2 .av { width: 42px; height: 42px; border-radius: 50%; background: var(--fonema-blue-050); color: var(--fonema-imperial); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 100; font-size: 15px; flex: none; }
.test2 .nm { font-size: 13.5px; font-weight: 500; color: var(--fonema-imperial); }
.test2 .rl { font-size: 12px; color: var(--fonema-imperial); }

/* ---------- FORM (capítulo final, oscuro) ---------- */
.form2 { position: relative; padding-block: clamp(72px, 11vw, 170px); overflow: clip; }
.form2::before {
  content: ""; position: absolute; right: -12vw; top: -10vw; width: 50vw; max-width: 680px; aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--fonema-blue) 30%, transparent), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.form2-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 6vw, 100px); align-items: center; }
.form2-aside { display: flex; flex-direction: column; gap: 24px; }
.form2-aside .chap { color: var(--d-fg); margin-bottom: 0; }
.form2-aside .chap .cnum { color: var(--glow); }
.form2-aside .d2 { color: #fff; }
.form2-aside ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 15px; }
.form2-aside ul li { font-size: 15.5px; color: var(--d-fg-soft); display: flex; gap: 12px; align-items: center; }
.form2-aside ul li svg { color: var(--glow); flex: none; }
.form2-card { background: #fff; color: var(--fonema-ink); border-radius: var(--radius-xl); box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); padding: clamp(28px, 3.5vw, 48px); }
.f2field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.f2field label { font-size: 13px; font-weight: 500; color: var(--fonema-ink-2); }
.f2field input {
  font-family: var(--font-sans); font-size: 15px; color: var(--fonema-ink);
  padding: 14px 16px; border: 1px solid var(--fonema-line); border-radius: var(--radius-md);
  background: var(--fonema-white); transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1);
}
.f2field input::placeholder { color: var(--fonema-mute); }
.f2field input:focus { outline: none; border-color: var(--fonema-blue); box-shadow: var(--ring-focus); }
.form2-card .b2 { width: 100%; margin-top: 6px; }
.form2-micro { font-size: 13px; line-height: 1.5; color: var(--fonema-slate); text-align: center; margin: 14px 0 0; display: flex; gap: 8px; align-items: center; justify-content: center; }
.form2-micro svg { color: var(--fonema-success); flex: none; }
.form2-success { text-align: center; padding: 24px 8px; }
.form2-success .ck { width: 58px; height: 58px; border-radius: 50%; background: var(--fonema-blue-050); color: var(--fonema-blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.form2-success h3 { font-family: var(--font-display); font-weight: 100; font-size: 30px; margin: 0 0 10px; letter-spacing: -0.01em; }
.form2-success p { font-size: 15px; color: var(--fonema-graphite); line-height: 1.55; margin: 0; }

/* ---------- FAQ (hoja clara) ---------- */
.faq2 { max-width: 880px; margin-inline: auto; }
.faq2-item { border-top: 1px solid var(--fonema-line); }
.faq2-item:last-child { border-bottom: 1px solid var(--fonema-line); }
.faq2-q {
  width: 100%; background: none; border: none; cursor: pointer; padding: 26px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left;
  font-family: var(--font-sans); font-size: clamp(16px, 1.7vw, 19px); font-weight: 500; color: var(--fonema-ink);
}
.faq2-q .ico { color: var(--fonema-imperial); transition: transform var(--dur-2) var(--ease-standard); flex: none; }
.faq2-item.open .faq2-q .ico { transform: rotate(45deg); }
.faq2-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-3) var(--ease-out); }
.faq2-item.open .faq2-a { max-height: 280px; }
.faq2-a-in { font-size: 15.5px; line-height: 1.62; color: var(--fonema-ink); padding: 0 56px 26px 0; }

/* ---------- FOOTER ---------- */
.foot2 { position: relative; padding-block: clamp(56px, 8vw, 100px) 36px; }
.foot2-inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: clamp(32px, 5vw, 80px); }
.foot2 .brand-block { display: flex; flex-direction: column; gap: 18px; max-width: 340px; }
.foot2 .brand-block img { height: 36px; width: auto; align-self: flex-start; }
.foot2 .tag { font-size: 14px; color: var(--d-fg-soft); line-height: 1.6; }
.foot2-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot2-h { font-size: 11px; color: var(--d-fg-mute); text-transform: uppercase; letter-spacing: var(--ls-wider); margin-bottom: 14px; }
.foot2-cols a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--d-fg-soft); text-decoration: none; border: none; padding: 6px 0; }
.foot2-cols a:hover { color: #fff; }
.foot2-bottom { padding-top: 30px; margin-top: 40px; border-top: 1px solid var(--d-line-soft); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--d-fg-mute); }

/* ---------- WhatsApp FAB ---------- */
.wa-fab2 {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  background: #1f9d57; color: #fff; text-decoration: none; border: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px rgba(31,157,87,.35); cursor: pointer;
  transition: transform var(--dur-1) var(--ease-standard), background var(--dur-1), box-shadow var(--dur-1);
}
.wa-fab2 svg { width: 26px; height: 26px; }
.wa-fab2:hover { background: #178045; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,157,87,.45); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .ben2-head { grid-template-columns: 1fr; align-items: start; }
  .ben2-grid { grid-template-columns: 1fr 1fr; }
  .ben2, .ben2:nth-child(4), .ben2:nth-child(5) { grid-column: span 1; min-height: 0; }
  .res2-inner, .form2-grid { grid-template-columns: 1fr; }
  .res2-left { position: static; }
  .case2 { grid-template-columns: 1fr; }
  .met2-track { grid-template-columns: 1fr; }
  .stats2-grid { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .test2-grid { grid-template-columns: 1fr 1fr; }
  .foot2-inner { grid-template-columns: 1fr; }
}
@media (max-width: 1020px) {
  .nav2-links, .nav2-tel, .nav2 .nav2-cta .b2 { display: none; }
  .nav2-burger { display: inline-flex; }
}
@media (max-width: 680px) {
  .stats2-grid, .test2-grid, .ben2-grid { grid-template-columns: 1fr; }
  .hero2-foot { flex-direction: column; align-items: flex-start; }
  .ring30 { order: -1; }
  .hero2-arrow { width: 38px; height: 38px; font-size: 17px; right: 12px; }
  .hero2-arrow-prev { top: calc(50% - 24px); }
  .hero2-arrow-next { top: calc(50% + 24px); }
  .wa-fab2 span { display: none; }
  .wa-fab2 { padding: 14px; }
  .foot2-cols { grid-template-columns: 1fr 1fr; }
  .sheet { margin-inline: 6px; }
  .res2 { margin-inline: 6px; }
}