/* ============================================================================ EXECUTIVE LAB · DARK DOMINANT REDESIGN ============================================================================ Base · landing original negra preservada Aplica · dark predominante en TODAS las secciones (cream → dark) Framework · ui-ux-pro-max (accessibility, touch, spacing, motion) Mantiene · estructura HTML y copy intactos ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════════ TOKENS ════════════════════════════════════════════════════════════════════════════ */ :root { --ink-95: #050505; --ink-90: #0a0a0a; --ink-85: #0f0f0f; --ink-80: #141414; --ink-75: #1a1a1a; --ink-70: #222222; --ink-60: #2e2e2e; --ink-50: #3f3f3f; --cream: #f4eee6; --cream-soft: #fbf8f3; --cream-muted: rgba(244, 238, 230, 0.85); --paper: #ffffff; --line-d05: rgba(255, 255, 255, 0.05); --line-d08: rgba(255, 255, 255, 0.08); --line-d12: rgba(255, 255, 255, 0.12); --line-d18: rgba(255, 255, 255, 0.18); --red: #EC4429; --red-deep: #c5361e; --red-soft: #f05b41; --red-muted: #d65339; --red-tint: rgba(236, 68, 41, 0.08); --red-tint-2: rgba(236, 68, 41, 0.14); --red-line: rgba(236, 68, 41, 0.28); --red-glow: rgba(236, 68, 41, 0.32); --txt-1: #ffffff; --txt-2: rgba(255, 255, 255, 0.86); --txt-3: rgba(255, 255, 255, 0.68); --txt-4: rgba(255, 255, 255, 0.52); --txt-5: rgba(255, 255, 255, 0.4); --serif: "DM Serif Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --sans: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --ease: cubic-bezier(0.22, 0.36, 0.18, 1); --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); --w-content: 1080px; --w-wide: 1240px; --w-full: 1400px; } /* ════════════════════════════════════════════════════════════════════════════ GLOBAL · base dark dominant ════════════════════════════════════════════════════════════════════════════ */ html { scroll-behavior: smooth; scroll-padding-top: 96px; } html body { background: var(--ink-90) !important; color: var(--txt-2) !important; font-family: var(--sans) !important; font-feature-settings: "kern", "liga", "calt"; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; letter-spacing: -0.003em !important; line-height: 1.6 !important; } ::selection { background: var(--red); color: #ffffff; } /* Tabular numerals */ .dv2-num, .wr-num, .ide-num, .fv2-num, .ov3-price, .gv2-seal-percent, .duration, .cur, .wr-stat .num { font-feature-settings: "tnum" 1, "lnum" 1 !important; font-variant-numeric: lining-nums tabular-nums !important; } *:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════════════════════ NAVIGATION · spacing + touch ════════════════════════════════════════════════════════════════════════════ */ html body header.nav { background: rgba(10, 10, 10, 0.86) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; border-bottom: 1px solid var(--line-d08) !important; } html body header.nav .nav-inner { padding: 18px clamp(20px, 4vw, 56px) !important; gap: clamp(20px, 4vw, 48px) !important; } html body .nav-logo:hover { opacity: 0.7 !important; filter: none !important; box-shadow: none !important; background: transparent !important; } html body .nav-logo-img { height: 22px !important; filter: none !important; box-shadow: none !important; } html body .nav-links { gap: clamp(24px, 3vw, 36px) !important; } html body .nav-links a { font-family: var(--sans) !important; font-size: 13.5px !important; font-weight: 500 !important; letter-spacing: 0.005em !important; color: var(--txt-3) !important; text-decoration: none !important; background: transparent !important; box-shadow: none !important; filter: none !important; padding: 8px 0 !important; min-height: 32px; display: inline-flex; align-items: center; position: relative; transition: color 0.32s var(--ease-soft) !important; } html body .nav-links a::after { background: var(--red) !important; height: 1px !important; } html body .nav-links a:hover { color: var(--txt-1) !important; background: transparent !important; box-shadow: none !important; filter: none !important; } html body .nav-cta { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 12px 22px !important; font-family: var(--sans) !important; font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #ffffff !important; background: var(--red) !important; border: 0 !important; border-radius: 999px !important; text-decoration: none !important; min-height: 44px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 6px 16px rgba(236, 68, 41, 0.24) !important; transition: background 0.32s var(--ease-soft), transform 0.32s var(--ease-soft), box-shadow 0.32s var(--ease-soft) !important; } html body .nav-cta::after { content: '→'; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); font-size: 13px; line-height: 0; font-family: var(--sans); transition: transform 0.32s var(--ease-soft), background 0.32s var(--ease-soft); } html body .nav-cta:hover { background: var(--red-deep) !important; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 12px 28px rgba(236, 68, 41, 0.36) !important; } html body .nav-cta:hover::after { transform: translateX(3px); background: rgba(255, 255, 255, 0.28); } html body .nav-cta:active { transform: translateY(0) scale(0.97); } html body .nav-toggle { background: transparent !important; border: 1px solid var(--line-d18) !important; border-radius: 8px !important; padding: 9px !important; color: var(--txt-1) !important; min-height: 44px; min-width: 44px; } @media (max-width: 880px) { html body header.nav .nav-inner { padding: 14px 20px !important; gap: 12px !important; } html body .nav-links { display: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ HERO · respeta dark con ajedrez · mejora spacing + tipografía + CTA ════════════════════════════════════════════════════════════════════════════ */ html body section.hv2-section { padding: clamp(72px, 9vw, 128px) 0 clamp(72px, 9vw, 120px) !important; position: relative; overflow: hidden; } /* Ajedrez visible (más opacidad para que se vea bien) */ html body section.hv2-section::before { opacity: 0.42 !important; background-size: cover !important; background-position: center 38% !important; filter: contrast(1.12) brightness(0.92) !important; } html body section.hv2-section::after { background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.55) 70%, rgba(10, 10, 10, 0.85) 100%) !important; } html body .hv2-wrap { max-width: 980px !important; padding: 0 clamp(24px, 5vw, 64px) !important; } /* Kicker pill premium */ html body .hv2-kicker { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 8px 16px 8px 12px !important; background: rgba(236, 68, 41, 0.10) !important; border: 1px solid rgba(236, 68, 41, 0.28) !important; border-radius: 999px !important; margin: 0 auto 36px !important; backdrop-filter: blur(8px); } html body .hv2-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(236, 68, 41, 0.22); animation: el-dot-pulse 2.4s var(--ease-soft) infinite; } @keyframes el-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } /* Title premium · spacing y wrap balance */ html body .hv2-title { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(40px, 6vw, 80px) !important; line-height: 1.0 !important; letter-spacing: -0.024em !important; color: #ffffff !important; margin: 0 auto 28px !important; text-wrap: balance; max-width: 16ch !important; } html body .hv2-title em, html body .hv2-title .accent { color: var(--red-soft) !important; font-style: italic !important; } html body .hv2-sub { font-family: var(--sans) !important; font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.65 !important; color: var(--txt-3) !important; max-width: 60ch !important; margin: 0 auto 44px !important; letter-spacing: -0.003em; } html body .hv2-sub strong, html body .hv2-sub b { color: var(--txt-1) !important; font-weight: 700 !important; } /* Video wrap · refined frame */ html body .hv2-video-wrap { border-radius: 16px !important; border: 1px solid var(--line-d12) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 96px -20px rgba(236, 68, 41, 0.18), 0 32px 80px -20px rgba(0, 0, 0, 0.65) !important; margin: 0 auto 44px !important; } html body .hv2-video { border-radius: 15px !important; } /* CTA premium · pill + arrow */ html body .hv2-cta { display: inline-flex !important; align-items: center !important; gap: 12px !important; padding: 17px 10px 17px 32px !important; font-family: var(--sans) !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #ffffff !important; background: var(--red) !important; border: 0 !important; border-radius: 999px !important; text-decoration: none !important; min-height: 52px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 32px -4px rgba(236, 68, 41, 0.42) !important; transition: background 0.32s var(--ease-soft), transform 0.32s var(--ease-soft), box-shadow 0.32s var(--ease-soft) !important; } html body .hv2-cta svg { display: none !important; } html body .hv2-cta::after { content: '→'; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.20); font-size: 16px; line-height: 0; margin-left: 6px; transition: transform 0.32s var(--ease-soft), background 0.32s var(--ease-soft); } html body .hv2-cta:hover { background: var(--red-deep) !important; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 20px 44px -4px rgba(236, 68, 41, 0.55) !important; } html body .hv2-cta:hover::after { transform: translateX(4px); background: rgba(255, 255, 255, 0.30); } html body .hv2-cta:active { transform: translateY(0) scale(0.98); } html body .hv2-cta-meta { display: block !important; margin-top: 18px !important; font-family: var(--mono) !important; font-size: 11.5px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--txt-4) !important; } @media (max-width: 720px) { html body .hv2-title { font-size: clamp(34px, 9vw, 52px) !important; } } /* ════════════════════════════════════════════════════════════════════════════ TRUST MARQUEE · spacing + touch ════════════════════════════════════════════════════════════════════════════ */ html body section.trust-marquee { background: var(--ink-95) !important; padding: 64px 0 72px !important; border-top: 1px solid var(--line-d05) !important; border-bottom: 1px solid var(--line-d05) !important; } html body .tm-label { font-family: var(--mono) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--txt-4) !important; margin-bottom: 36px !important; } html body .tm-track:hover { animation-play-state: running !important; } html body .tm-item { font-family: var(--serif) !important; font-style: italic !important; font-size: 24px !important; height: 68px !important; min-width: 220px !important; padding: 0 36px !important; color: var(--txt-3) !important; background: rgba(255, 255, 255, 0.025) !important; border: 1px solid var(--line-d08) !important; border-radius: 10px !important; transition: color 0.5s var(--ease-soft), border-color 0.5s var(--ease-soft), background 0.5s var(--ease-soft) !important; } html body .tm-item:hover { color: var(--txt-1) !important; background: rgba(236, 68, 41, 0.05) !important; border-color: rgba(236, 68, 41, 0.5) !important; } /* ════════════════════════════════════════════════════════════════════════════ DOLOR V2 · respeta dark + spacing + tipografía ════════════════════════════════════════════════════════════════════════════ */ html body section.dolor-v2 { padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; background: var(--ink-90) !important; } html body section.dolor-v2 .dv2-wrap { max-width: var(--w-wide) !important; margin: 0 auto !important; } html body section.dolor-v2 .dv2-head { margin-bottom: clamp(72px, 9vw, 112px) !important; max-width: 920px !important; } html body section.dolor-v2 .dv2-kicker { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px 7px 11px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 24px !important; } html body section.dolor-v2 .dv2-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } html body section.dolor-v2 h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important; color: var(--txt-1) !important; margin: 0 !important; text-wrap: balance; } html body section.dolor-v2 h2 em { color: var(--red-soft) !important; font-style: italic !important; } html body section.dolor-v2 .dv2-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } @media (max-width: 900px) { html body section.dolor-v2 .dv2-grid { grid-template-columns: 1fr !important; gap: 20px !important; max-width: 640px; margin: 0 auto; } } html body section.dolor-v2 .dv2-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 14px !important; padding: 44px 36px 40px !important; position: relative; overflow: hidden; transition: transform 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), background 0.45s var(--ease-soft) !important; } html body section.dolor-v2 .dv2-card::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--red); transition: width 0.6s var(--ease-soft); } html body section.dolor-v2 .dv2-card:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.018) 100%) !important; border-color: var(--line-d18) !important; } html body section.dolor-v2 .dv2-card:hover::before { width: 100%; opacity: 0.6; } html body section.dolor-v2 .dv2-num { font-family: var(--serif) !important; font-style: italic !important; font-size: 64px !important; line-height: 0.88 !important; color: var(--red-soft) !important; margin-bottom: 22px !important; letter-spacing: -0.034em !important; display: block !important; } html body section.dolor-v2 .dv2-icon { width: 28px !important; height: 28px !important; color: var(--red) !important; opacity: 0.75; margin-bottom: 20px !important; stroke-width: 1.4; } html body section.dolor-v2 .dv2-card h3 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: 25px !important; line-height: 1.12 !important; color: var(--txt-1) !important; margin: 0 0 20px !important; letter-spacing: -0.014em; text-wrap: balance; } html body section.dolor-v2 .dv2-card p { font-family: var(--sans) !important; font-size: 15.5px !important; line-height: 1.7 !important; color: var(--txt-3) !important; margin: 0 0 14px !important; max-width: 56ch; } html body section.dolor-v2 .dv2-card p:last-child { margin-bottom: 0 !important; } html body section.dolor-v2 .dv2-card strong { color: var(--txt-1) !important; font-weight: 700 !important; } html body section.dolor-v2 .dv2-card em { color: var(--red-soft) !important; font-style: italic !important; } html body section.dolor-v2 .dv2-foot { margin-top: clamp(72px, 9vw, 112px) !important; text-align: center; } html body section.dolor-v2 .dv2-foot p { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(20px, 2vw, 26px) !important; line-height: 1.42 !important; color: var(--txt-2) !important; max-width: 720px; margin: 0 auto; text-wrap: balance; } /* ════════════════════════════════════════════════════════════════════════════ OVERVIEW V3 · CONVERTIR a DARK + spacing premium ════════════════════════════════════════════════════════════════════════════ */ html body section.overview-v3 { background: var(--ink-90) !important; padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; color: var(--txt-2) !important; } html body section.overview-v3 .ov3-wrap { max-width: var(--w-wide) !important; margin: 0 auto !important; } html body section.overview-v3 .ov3-head { text-align: center !important; margin: 0 auto clamp(72px, 9vw, 112px) !important; max-width: 820px !important; } html body section.overview-v3 .ov3-kicker { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px 7px 11px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 24px !important; } html body section.overview-v3 .ov3-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } html body section.overview-v3 .ov3-head h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important; color: var(--txt-1) !important; margin: 0 0 22px !important; text-wrap: balance; } html body section.overview-v3 .ov3-head h2 em { color: var(--red-soft) !important; font-style: italic !important; } html body section.overview-v3 .ov3-intro { font-family: var(--sans) !important; font-size: clamp(16px, 1.25vw, 18px) !important; line-height: 1.7 !important; color: var(--txt-3) !important; margin: 0 auto !important; max-width: 60ch; } html body section.overview-v3 .ov3-intro strong { color: var(--txt-1) !important; } html body section.overview-v3 .ov3-phases { display: grid !important; grid-template-columns: 1fr 1px 1fr !important; gap: clamp(40px, 5vw, 80px) !important; } html body section.overview-v3 .ov3-divider { background: var(--line-d12) !important; width: 1px !important; min-height: 100% !important; position: relative; } html body section.overview-v3 .ov3-divider::before { content: '*'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-style: italic; font-size: 56px; line-height: 0.7; color: var(--red); background: var(--ink-90); padding: 12px 8px; } @media (max-width: 880px) { html body section.overview-v3 .ov3-phases { grid-template-columns: 1fr !important; gap: 56px !important; } html body section.overview-v3 .ov3-divider { display: none !important; } } html body section.overview-v3 .ov3-phase-icon { width: 44px !important; height: 44px !important; color: var(--red) !important; stroke-width: 1.4 !important; margin-bottom: 22px !important; } html body section.overview-v3 .ov3-phase-tag { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 6px 14px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 20px !important; } html body section.overview-v3 .ov3-phase h3 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(26px, 2.8vw, 36px) !important; line-height: 1.08 !important; letter-spacing: -0.018em !important; color: var(--txt-1) !important; margin: 0 0 24px !important; text-wrap: balance; } html body section.overview-v3 .ov3-phase h3 em, html body section.overview-v3 .ov3-phase h3 .accent { color: var(--red-soft) !important; font-style: italic !important; } html body section.overview-v3 .ov3-phase .desc { font-family: var(--sans) !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--txt-3) !important; margin: 0 0 32px !important; max-width: 60ch; } html body section.overview-v3 .ov3-phase .desc strong { color: var(--txt-1) !important; } /* Lists · editorial items con bullet rojo */ html body section.overview-v3 .ov3-phase ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; gap: 14px !important; } html body section.overview-v3 .ov3-phase li { position: relative !important; padding: 16px 0 16px 36px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-d08) !important; border-radius: 0 !important; font-family: var(--sans) !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--txt-3) !important; min-height: 56px; } html body section.overview-v3 .ov3-phase li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 27px !important; width: 20px !important; height: 1.5px !important; background: var(--red) !important; border-radius: 0 !important; -webkit-mask: none !important; mask: none !important; color: transparent !important; font-size: 0 !important; transition: width 0.4s var(--ease); } html body section.overview-v3 .ov3-phase li::after { display: none !important; } html body section.overview-v3 .ov3-phase li:hover::before { width: 28px !important; } html body section.overview-v3 .ov3-phase li strong { color: var(--txt-1) !important; font-weight: 700 !important; } /* ════════════════════════════════════════════════════════════════════════════ WEEKS ROADMAP · CONVERTIR a DARK + 2x2 compact ════════════════════════════════════════════════════════════════════════════ */ html body section.weeks-roadmap { background: var(--ink-85) !important; padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; color: var(--txt-2) !important; } html body section.weeks-roadmap .wr-wrap { max-width: var(--w-wide) !important; margin: 0 auto !important; } html body section.weeks-roadmap .wr-head { text-align: center !important; margin: 0 auto clamp(64px, 8vw, 96px) !important; max-width: 760px; } html body section.weeks-roadmap .wr-kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px 7px 11px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 22px !important; } html body section.weeks-roadmap h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important; color: var(--txt-1) !important; margin: 0 !important; text-wrap: balance; } html body section.weeks-roadmap h2 em { color: var(--red-soft) !important; font-style: italic !important; } /* Timeline → 2x2 BENTO compact */ @media (min-width: 880px) { html body section.weeks-roadmap .wr-timeline { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; padding: 0 !important; max-width: 1100px !important; margin: 0 auto !important; } html body section.weeks-roadmap .wr-timeline::before { display: none !important; } html body section.weeks-roadmap .wr-row { display: block !important; margin-bottom: 0 !important; } html body section.weeks-roadmap .wr-row.left .wr-card, html body section.weeks-roadmap .wr-row.right .wr-card { grid-column: auto !important; text-align: left !important; } html body section.weeks-roadmap .wr-row.left .wr-num, html body section.weeks-roadmap .wr-row.right .wr-num { text-align: left !important; } html body section.weeks-roadmap .wr-dot { display: none !important; } html body section.weeks-roadmap .wr-card::before { display: none !important; } } html body section.weeks-roadmap .wr-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 14px !important; padding: 36px 32px 32px !important; box-shadow: none !important; position: relative; overflow: hidden; transition: transform 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), background 0.45s var(--ease-soft) !important; } html body section.weeks-roadmap .wr-card::after { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--red); transition: width 0.6s var(--ease-soft); } html body section.weeks-roadmap .wr-card:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%) !important; border-color: var(--line-d18) !important; } html body section.weeks-roadmap .wr-card:hover::after { width: 100%; opacity: 0.6; } html body section.weeks-roadmap .wr-num { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(48px, 5vw, 72px) !important; line-height: 0.88 !important; color: var(--red-soft) !important; margin: 0 0 8px !important; letter-spacing: -0.034em !important; display: block !important; } html body section.weeks-roadmap .wr-week-tag { font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; color: var(--txt-4) !important; margin: 0 0 16px !important; display: inline-block; } html body section.weeks-roadmap .wr-card h3 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(20px, 1.8vw, 26px) !important; line-height: 1.14 !important; letter-spacing: -0.014em !important; color: var(--txt-1) !important; margin: 0 0 14px !important; text-wrap: balance; } html body section.weeks-roadmap .wr-tagline { font-family: var(--sans) !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--red-soft) !important; letter-spacing: 0.04em !important; margin: 0 0 16px !important; } html body section.weeks-roadmap .wr-card p:not(.wr-tagline) { font-family: var(--sans) !important; font-size: 14.5px !important; line-height: 1.7 !important; color: var(--txt-3) !important; margin: 0 0 12px !important; max-width: 56ch; } html body section.weeks-roadmap .wr-card p strong { color: var(--txt-1) !important; font-weight: 700 !important; } html body section.weeks-roadmap .wr-card p em { color: var(--red-soft) !important; font-style: italic !important; } html body section.weeks-roadmap .wr-foot { margin-top: clamp(64px, 8vw, 96px) !important; padding-top: 40px !important; border-top: 1px solid var(--line-d08) !important; text-align: center; } html body section.weeks-roadmap .wr-stat .num { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(36px, 3.6vw, 48px) !important; color: var(--red-soft) !important; line-height: 1 !important; } html body section.weeks-roadmap .wr-stat .lbl { font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--txt-4) !important; } /* ════════════════════════════════════════════════════════════════════════════ IDE V2 · CONVERTIR a DARK ════════════════════════════════════════════════════════════════════════════ */ html body section.ide-v2 { background: var(--ink-90) !important; padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) clamp(48px, 6vw, 80px) !important; color: var(--txt-2) !important; } html body section.ide-v2 .ide-wrap { max-width: var(--w-wide) !important; margin: 0 auto !important; } html body section.ide-v2 .ide-head { text-align: center !important; margin: 0 auto clamp(72px, 9vw, 112px) !important; max-width: 820px; } html body section.ide-v2 .ide-kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px 7px 11px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 22px !important; } html body section.ide-v2 .ide-head h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important; color: var(--txt-1) !important; margin: 0 0 22px !important; text-wrap: balance; } html body section.ide-v2 .ide-head h2 em { color: var(--red-soft) !important; font-style: italic !important; } html body section.ide-v2 .ide-intro { font-family: var(--sans) !important; font-size: clamp(16px, 1.25vw, 18px) !important; line-height: 1.7 !important; color: var(--txt-3) !important; max-width: 64ch !important; margin: 0 auto; } html body section.ide-v2 .ide-intro strong { color: var(--txt-1) !important; } html body section.ide-v2 .ide-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } @media (max-width: 880px) { html body section.ide-v2 .ide-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } html body section.ide-v2 .ide-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.012) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 14px !important; padding: 40px 36px !important; box-shadow: none !important; position: relative; overflow: hidden; transition: transform 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), background 0.45s var(--ease-soft) !important; } html body section.ide-v2 .ide-card::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--red); transition: width 0.6s var(--ease-soft); } html body section.ide-v2 .ide-card:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.018) 100%) !important; border-color: var(--line-d18) !important; } html body section.ide-v2 .ide-card:hover::before { width: 100%; opacity: 0.6; } html body section.ide-v2 .ide-num { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(48px, 5vw, 72px) !important; line-height: 0.88 !important; color: var(--red-soft) !important; margin: 0 0 24px !important; letter-spacing: -0.034em !important; display: block !important; } html body section.ide-v2 .ide-card h3 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(20px, 1.8vw, 24px) !important; line-height: 1.16 !important; letter-spacing: -0.014em !important; color: var(--txt-1) !important; margin: 0 0 18px !important; text-wrap: balance; } html body section.ide-v2 .ide-card p { font-family: var(--sans) !important; font-size: 14.5px !important; line-height: 1.7 !important; color: var(--txt-3) !important; margin: 0 !important; max-width: 56ch; } html body section.ide-v2 .ide-card p strong { color: var(--txt-1) !important; font-weight: 700 !important; } html body section.ide-v2 .ide-card p em { color: var(--red-soft) !important; font-style: italic !important; } html body section.ide-v2 .ide-foot { margin-top: clamp(64px, 8vw, 96px) !important; padding-top: 40px !important; border-top: 1px solid var(--line-d08) !important; text-align: center; } html body section.ide-v2 .ide-foot p { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(20px, 2vw, 26px) !important; line-height: 1.42 !important; color: var(--txt-2) !important; max-width: 720px !important; margin: 0 auto !important; text-wrap: balance; } html body section.ide-v2 .ide-foot p em { color: var(--red-soft) !important; } /* ════════════════════════════════════════════════════════════════════════════ CTAs INTERMEDIOS · adapt dark ════════════════════════════════════════════════════════════════════════════ */ html body section.ide-v2 + div[style*="padding:0 24px 64px"], html body section.guarantee-v2 + div[style*="padding:0 24px 64px"] { background: var(--ink-90) !important; padding: 0 24px 96px !important; position: relative !important; } html body section.ide-v2 + div[style*="padding:0 24px 64px"]::before, html body section.guarantee-v2 + div[style*="padding:0 24px 64px"]::before { content: ''; display: block; width: 56px; height: 1px; background: var(--red); opacity: 0.55; margin: 0 auto 36px; } html body section.ide-v2 + div[style*="padding:0 24px 64px"] > a, html body section.guarantee-v2 + div[style*="padding:0 24px 64px"] > a { display: inline-flex !important; align-items: center !important; gap: 12px !important; padding: 17px 10px 17px 32px !important; font-family: var(--sans) !important; font-size: 13.5px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #ffffff !important; background: var(--red) !important; border: 0 !important; border-radius: 999px !important; text-decoration: none !important; min-height: 52px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 32px -4px rgba(236, 68, 41, 0.42) !important; transition: background 0.32s var(--ease-soft), transform 0.32s var(--ease-soft), box-shadow 0.32s var(--ease-soft) !important; } html body section.ide-v2 + div[style*="padding:0 24px 64px"] > a svg, html body section.guarantee-v2 + div[style*="padding:0 24px 64px"] > a svg { display: none !important; } html body section.ide-v2 + div[style*="padding:0 24px 64px"] > a::after, html body section.guarantee-v2 + div[style*="padding:0 24px 64px"] > a::after { content: '→'; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.20); font-size: 16px; line-height: 0; margin-left: 6px; transition: transform 0.32s var(--ease-soft), background 0.32s var(--ease-soft); } html body section.ide-v2 + div[style*="padding:0 24px 64px"] > a:hover, html body section.guarantee-v2 + div[style*="padding:0 24px 64px"] > a:hover { background: var(--red-deep) !important; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 20px 44px -4px rgba(236, 68, 41, 0.55) !important; } html body section.ide-v2 + div[style*="padding:0 24px 64px"] > a:hover::after, html body section.guarantee-v2 + div[style*="padding:0 24px 64px"] > a:hover::after { transform: translateX(4px); background: rgba(255, 255, 255, 0.30); } /* ════════════════════════════════════════════════════════════════════════════ MENTORS V2 · CONVERTIR a DARK ════════════════════════════════════════════════════════════════════════════ */ html body section.mentors-v2 { background: var(--ink-85) !important; padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; color: var(--txt-2) !important; } html body section.mentors-v2 .mv2-wrap { max-width: var(--w-wide) !important; margin: 0 auto !important; } html body section.mentors-v2 .mv2-head { text-align: center !important; margin: 0 auto clamp(64px, 8vw, 96px) !important; max-width: 760px; } html body section.mentors-v2 .mv2-kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px 7px 11px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 22px !important; } html body section.mentors-v2 h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important; color: var(--txt-1) !important; margin: 0 !important; text-wrap: balance; } html body section.mentors-v2 h2 em { color: var(--red-soft) !important; font-style: italic !important; } html body section.mentors-v2 .mv2-overline { color: var(--txt-3) !important; font-family: var(--serif) !important; font-style: italic; } html body section.mentors-v2 .mv2-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 14px !important; padding: 40px 36px !important; position: relative; overflow: hidden; transition: transform 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), background 0.45s var(--ease-soft) !important; } html body section.mentors-v2 .mv2-card::before { content: '*'; position: absolute; top: 20px; right: 24px; font-family: var(--serif); font-style: italic; font-size: 36px; color: var(--red); opacity: 0.45; line-height: 0.7; pointer-events: none; } html body section.mentors-v2 .mv2-card:hover { transform: translateY(-3px); border-color: var(--line-d18) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.018) 100%) !important; } html body section.mentors-v2 .mv2-kicker { font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: var(--red) !important; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body section.mentors-v2 .mv2-name { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.1 !important; letter-spacing: -0.014em !important; color: var(--txt-1) !important; margin: 0 0 16px !important; } html body section.mentors-v2 .mv2-credentials { font-family: var(--sans) !important; font-size: 14.5px !important; line-height: 1.65 !important; color: var(--txt-3) !important; max-width: 56ch; } /* ════════════════════════════════════════════════════════════════════════════ TESTIMONIOS · section-paper → dark ════════════════════════════════════════════════════════════════════════════ */ html body section.section-paper#resultados { background: var(--ink-90) !important; color: var(--txt-2) !important; padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; } html body section.section-paper#resultados .kicker.center { color: var(--red) !important; } html body section.section-paper#resultados h2 { color: var(--txt-1) !important; } html body section.section-paper#resultados h2 em, html body section.section-paper#resultados .accent { color: var(--red-soft) !important; } /* ════════════════════════════════════════════════════════════════════════════ OFFER V3 · respeta dark + spacing ════════════════════════════════════════════════════════════════════════════ */ html body section.offer-v3 { padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; } html body section.offer-v3 .ov3-head { margin: 0 auto clamp(64px, 8vw, 96px) !important; } html body section.offer-v3 .ov3-kicker { letter-spacing: 0.24em !important; } html body section.offer-v3 h2 { font-size: clamp(34px, 4.6vw, 52px) !important; } html body section.offer-v3 .ov3-card { padding: clamp(40px, 5vw, 64px) !important; gap: clamp(40px, 5vw, 72px) !important; } html body section.offer-v3 .ov3-features h3 { letter-spacing: 0.20em !important; } html body section.offer-v3 .ov3-features ul { gap: 14px !important; margin-bottom: 40px !important; } html body section.offer-v3 .ov3-features li { padding: 4px 0 4px 28px !important; font-size: 15px !important; line-height: 1.65 !important; min-height: 28px; } html body section.offer-v3 .ov3-features li::before { font-size: 16px !important; top: 4px !important; } html body section.offer-v3 .ov3-price { font-family: var(--serif) !important; font-size: clamp(60px, 7vw, 84px) !important; letter-spacing: -0.038em !important; } html body section.offer-v3 .ov3-price .cur { color: var(--red-soft) !important; } html body section.offer-v3 .ov3-cta { border-radius: 999px !important; padding: 17px 10px 17px 28px !important; letter-spacing: 0.12em !important; min-height: 52px; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 32px -4px rgba(236, 68, 41, 0.42) !important; transition: background 0.32s var(--ease-soft), transform 0.32s var(--ease-soft), box-shadow 0.32s var(--ease-soft) !important; } html body section.offer-v3 .ov3-cta svg { display: none !important; } html body section.offer-v3 .ov3-cta::after { content: '→'; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.20); font-size: 16px; line-height: 0; transition: transform 0.32s var(--ease-soft), background 0.32s var(--ease-soft); } html body section.offer-v3 .ov3-cta:hover { background: var(--red-deep) !important; transform: translateY(-2px) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 20px 44px -4px rgba(236, 68, 41, 0.55) !important; } html body section.offer-v3 .ov3-cta:hover::after { transform: translateX(4px); background: rgba(255, 255, 255, 0.30); } html body section.offer-v3 .ov3-cta:active { transform: translateY(0) scale(0.98) !important; } html body section.offer-v3 .ov3-microctas { margin-top: 24px !important; gap: 12px !important; } html body section.offer-v3 .ov3-microctas a { padding: 6px 0 !important; font-size: 13px !important; min-height: 32px; } /* ════════════════════════════════════════════════════════════════════════════ GARANTÍA · CONVERTIR a DARK · sello preservado ════════════════════════════════════════════════════════════════════════════ */ html body section.guarantee-v2 { background: var(--ink-85) !important; padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; color: var(--txt-2) !important; } html body section.guarantee-v2 .gv2-wrap { max-width: 1100px !important; margin: 0 auto !important; } html body section.guarantee-v2 .gv2-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 18px !important; padding: clamp(40px, 5vw, 72px) !important; display: grid !important; grid-template-columns: 260px 1fr !important; gap: clamp(40px, 5vw, 64px) !important; align-items: center !important; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45) !important; position: relative !important; overflow: hidden !important; } html body section.guarantee-v2 .gv2-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, var(--red) 0%, var(--red-soft) 50%, var(--red) 100%) !important; } @media (max-width: 760px) { html body section.guarantee-v2 .gv2-card { grid-template-columns: 1fr !important; gap: 32px !important; } } /* Seal · adapt to dark · ring rojo + texto cream */ html body section.guarantee-v2 .gv2-seal { position: relative !important; width: 240px !important; height: 240px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 0 auto !important; } html body section.guarantee-v2 .gv2-seal-ring { position: absolute !important; inset: 0 !important; border: 2px solid var(--red) !important; border-radius: 50% !important; } html body section.guarantee-v2 .gv2-seal-ring::before { content: '' !important; position: absolute !important; inset: 8px !important; border: 1px dashed rgba(236, 68, 41, 0.5) !important; border-radius: 50% !important; animation: seal-rotate 28s linear infinite; } @keyframes seal-rotate { to { transform: rotate(360deg); } } html body section.guarantee-v2 .gv2-seal-percent { font-family: var(--serif) !important; font-size: 78px !important; color: var(--red-soft) !important; line-height: 1 !important; margin: 0 0 4px !important; } html body section.guarantee-v2 .gv2-seal-label { font-family: var(--mono) !important; font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; color: var(--txt-1) !important; text-align: center !important; } html body section.guarantee-v2 .gv2-seal-days { margin-top: 6px !important; font-family: var(--serif) !important; font-style: italic !important; font-size: 13px !important; color: var(--txt-3) !important; } /* Content */ html body section.guarantee-v2 .gv2-kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 6px 14px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 20px !important; } html body section.guarantee-v2 .gv2-content h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(28px, 3.4vw, 40px) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; color: var(--txt-1) !important; margin: 0 0 24px !important; text-wrap: balance; } html body section.guarantee-v2 .gv2-content h2 em { color: var(--red-soft) !important; font-style: italic !important; } html body section.guarantee-v2 .gv2-content p { font-family: var(--sans) !important; font-size: 16px !important; line-height: 1.72 !important; color: var(--txt-3) !important; margin: 0 0 16px !important; max-width: 60ch; } html body section.guarantee-v2 .gv2-content p strong { color: var(--txt-1) !important; font-weight: 700 !important; } html body section.guarantee-v2 .gv2-condition { margin: 24px 0 !important; padding: 18px 22px !important; background: rgba(236, 68, 41, 0.06) !important; border-left: 3px solid var(--red) !important; border-radius: 0 6px 6px 0 !important; } html body section.guarantee-v2 .gv2-condition .lbl { font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: var(--red-soft) !important; margin-bottom: 6px !important; } html body section.guarantee-v2 .gv2-condition .txt { font-family: var(--serif) !important; font-style: italic !important; font-size: 20px !important; color: var(--txt-1) !important; line-height: 1.4 !important; } html body section.guarantee-v2 .gv2-signature { border-top: 1px solid var(--line-d08) !important; } html body section.guarantee-v2 .gv2-sig-name { color: var(--txt-1) !important; } html body section.guarantee-v2 .gv2-sig-role { color: var(--txt-4) !important; } /* ════════════════════════════════════════════════════════════════════════════ ENCAJE V3 · CONVERTIR a DARK ════════════════════════════════════════════════════════════════════════════ */ html body section.encaje-v3 { background: var(--ink-90) !important; padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; color: var(--txt-2) !important; } html body section.encaje-v3 .ev3-wrap { max-width: var(--w-wide) !important; margin: 0 auto !important; } html body section.encaje-v3 .ev3-head { text-align: center !important; margin: 0 auto clamp(64px, 8vw, 96px) !important; max-width: 760px; } html body section.encaje-v3 .ev3-kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 22px !important; } html body section.encaje-v3 h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important; color: var(--txt-1) !important; margin: 0 !important; text-wrap: balance; } html body section.encaje-v3 h2 em { color: var(--red-soft) !important; font-style: italic !important; } html body section.encaje-v3 .ev3-table { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; max-width: 1000px !important; margin: 0 auto !important; } @media (max-width: 760px) { html body section.encaje-v3 .ev3-table { grid-template-columns: 1fr !important; } } html body section.encaje-v3 .ev3-col { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 14px !important; padding: 44px 36px !important; box-shadow: none !important; position: relative; transition: transform 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), background 0.45s var(--ease-soft) !important; } html body section.encaje-v3 .ev3-col:hover { transform: translateY(-3px); border-color: var(--line-d18) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.018) 100%) !important; } html body section.encaje-v3 .ev3-col-yes { border-top: 3px solid var(--red) !important; } html body section.encaje-v3 .ev3-col-no { border-top: 3px solid var(--line-d18) !important; } html body section.encaje-v3 .ev3-col-tag { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; padding: 6px 14px !important; border-radius: 999px !important; margin-bottom: 24px !important; } html body section.encaje-v3 .ev3-col-yes .ev3-col-tag { color: var(--red) !important; background: var(--red-tint) !important; border: 1px solid var(--red-line); } html body section.encaje-v3 .ev3-col-no .ev3-col-tag { color: var(--txt-2) !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--line-d12); } html body section.encaje-v3 .ev3-col h3 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.12 !important; letter-spacing: -0.014em !important; color: var(--txt-1) !important; margin: 0 0 24px !important; text-wrap: balance; } html body section.encaje-v3 .ev3-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; gap: 12px !important; } html body section.encaje-v3 .ev3-list li { font-family: var(--sans) !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--txt-3) !important; padding: 8px 0 8px 32px !important; position: relative; min-height: 32px; } html body section.encaje-v3 .ev3-col-yes .ev3-list li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 12px !important; width: 20px !important; height: 1.5px !important; background: var(--red) !important; } html body section.encaje-v3 .ev3-col-no .ev3-list li::before { content: '×' !important; position: absolute !important; left: 0 !important; top: 6px !important; width: 20px !important; height: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--txt-4) !important; font-weight: 700 !important; font-family: var(--sans) !important; } /* ════════════════════════════════════════════════════════════════════════════ FAQ V2 · CONVERTIR a DARK ════════════════════════════════════════════════════════════════════════════ */ html body section.faq-v2 { background: var(--ink-85) !important; padding: clamp(96px, 12vw, 168px) clamp(24px, 5vw, 56px) !important; color: var(--txt-2) !important; } html body section.faq-v2 .fv2-wrap { max-width: 880px !important; margin: 0 auto !important; } html body section.faq-v2 .fv2-head { text-align: center !important; margin: 0 auto clamp(56px, 7vw, 80px) !important; } html body section.faq-v2 .fv2-kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 22px !important; } html body section.faq-v2 h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important; color: var(--txt-1) !important; margin: 0 !important; text-wrap: balance; } html body section.faq-v2 .fv2-list { border-top: 1px solid var(--line-d12) !important; } html body section.faq-v2 .fv2-item { border-bottom: 1px solid var(--line-d08) !important; padding: 28px 0 !important; position: relative; } html body section.faq-v2 .fv2-num { font-family: var(--serif) !important; font-style: italic !important; font-size: 30px !important; line-height: 1 !important; color: var(--red-soft) !important; letter-spacing: -0.022em !important; flex-shrink: 0 !important; min-width: 38px !important; padding-top: 8px !important; margin-right: 16px !important; } html body section.faq-v2 .fv2-q { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(20px, 1.7vw, 26px) !important; line-height: 1.22 !important; letter-spacing: -0.012em !important; color: var(--txt-1) !important; background: transparent !important; border: 0 !important; padding: 8px 56px 8px 0 !important; cursor: pointer !important; text-align: left !important; display: flex !important; align-items: flex-start !important; width: 100% !important; gap: 16px !important; min-height: 48px; position: relative; text-wrap: balance; transition: color 0.32s var(--ease-soft) !important; } html body section.faq-v2 .fv2-q:hover { color: var(--red-soft) !important; } html body section.faq-v2 .fv2-toggle { position: absolute !important; right: 0 !important; top: 12px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1px solid var(--line-d18) !important; background: transparent !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background 0.32s var(--ease-soft), border-color 0.32s var(--ease-soft), transform 0.45s var(--ease-soft) !important; } html body section.faq-v2 .fv2-toggle::before, html body section.faq-v2 .fv2-toggle::after { content: ''; position: absolute; background: var(--txt-1); border-radius: 1px; transition: background 0.32s var(--ease-soft), transform 0.45s var(--ease-soft), opacity 0.32s var(--ease-soft); } html body section.faq-v2 .fv2-toggle::before { width: 14px; height: 1.5px; } html body section.faq-v2 .fv2-toggle::after { width: 1.5px; height: 14px; } html body section.faq-v2 .fv2-item.is-open .fv2-toggle { background: var(--red) !important; border-color: var(--red) !important; transform: rotate(45deg); } html body section.faq-v2 .fv2-ans { overflow: hidden; max-height: 0; transition: max-height 0.55s var(--ease-soft), padding 0.4s var(--ease-soft); padding-left: 54px !important; } html body section.faq-v2 .fv2-item.is-open .fv2-ans { max-height: 1200px; padding-top: 16px !important; } html body section.faq-v2 .fv2-ans p { font-family: var(--sans) !important; font-size: 16px !important; line-height: 1.72 !important; color: var(--txt-3) !important; margin: 0 0 14px !important; max-width: 64ch; } html body section.faq-v2 .fv2-ans p strong { color: var(--txt-1) !important; } html body section.faq-v2 .fv2-ans p em { color: var(--red-soft) !important; font-style: italic !important; } /* ════════════════════════════════════════════════════════════════════════════ CLOSING V2 · respeta dark + spacing premium ════════════════════════════════════════════════════════════════════════════ */ html body section.closing-v2 { background: var(--ink-90) !important; padding: clamp(120px, 14vw, 200px) clamp(24px, 5vw, 56px) !important; position: relative; overflow: hidden; } /* Asterisco gigante decorativo */ html body section.closing-v2::after { content: '*'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-style: italic; font-size: clamp(480px, 60vw, 960px); line-height: 0.7; color: var(--red); opacity: 0.05; pointer-events: none; user-select: none; z-index: 0; } html body section.closing-v2 > * { position: relative; z-index: 1; } html body section.closing-v2 .container { max-width: 920px !important; margin: 0 auto !important; text-align: center; } html body section.closing-v2 .kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px !important; background: var(--red-tint-2) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 28px !important; } html body section.closing-v2 .cv2-h, html body section.closing-v2 h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(40px, 6vw, 80px) !important; line-height: 1.0 !important; letter-spacing: -0.026em !important; color: var(--txt-1) !important; text-align: center !important; text-wrap: balance; margin: 0 0 32px !important; } html body section.closing-v2 .cv2-h em, html body section.closing-v2 h2 em { color: var(--red-soft) !important; font-style: italic !important; } html body section.closing-v2 p { font-family: var(--sans) !important; font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.7 !important; color: var(--txt-3) !important; max-width: 60ch !important; margin: 0 auto 48px !important; } html body section.closing-v2 .cv2-ctas { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; flex-wrap: wrap !important; } html body section.closing-v2 .cv2-cta { padding: 17px 32px !important; font-family: var(--sans) !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; border-radius: 999px !important; text-decoration: none !important; min-height: 52px; display: inline-flex !important; align-items: center !important; gap: 10px !important; transition: all 0.32s var(--ease-soft) !important; } html body section.closing-v2 .cv2-cta-primary { background: var(--red) !important; color: #ffffff !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 32px -4px rgba(236, 68, 41, 0.42) !important; } html body section.closing-v2 .cv2-cta-primary:hover { background: var(--red-deep) !important; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 20px 44px -4px rgba(236, 68, 41, 0.55) !important; } html body section.closing-v2 .cv2-cta-whatsapp { background: rgba(255, 255, 255, 0.06) !important; color: var(--txt-1) !important; border: 1px solid var(--line-d18) !important; } html body section.closing-v2 .cv2-cta-whatsapp:hover { background: #25d366 !important; color: #ffffff !important; border-color: #25d366 !important; transform: translateY(-2px); } /* ════════════════════════════════════════════════════════════════════════════ FOOTER · dark refined ════════════════════════════════════════════════════════════════════════════ */ html body footer.site-footer { background: var(--ink-95) !important; padding: 40px clamp(20px, 4vw, 56px) !important; border-top: 1px solid var(--line-d05) !important; color: var(--txt-4) !important; } html body footer.site-footer .footer-legal { font-family: var(--mono) !important; font-size: 11.5px !important; letter-spacing: 0.08em !important; color: var(--txt-4) !important; display: flex !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 20px !important; } html body footer.site-footer .footer-legal a { color: var(--txt-4) !important; text-decoration: none !important; transition: color 0.32s var(--ease-soft) !important; } html body footer.site-footer .footer-legal a:hover { color: var(--txt-1) !important; } html body footer.site-footer .legal-links { display: flex !important; gap: 24px !important; } /* ════════════════════════════════════════════════════════════════════════════ COOKIE CONSENT · adapt ════════════════════════════════════════════════════════════════════════════ */ html body .cc { background: var(--ink-85) !important; border: 1px solid var(--line-d12) !important; border-radius: 14px !important; box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4) !important; padding: 24px !important; color: var(--txt-2) !important; } html body .cc-title { font-family: var(--serif) !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.2 !important; color: var(--txt-1) !important; margin: 0 0 6px !important; } html body .cc-desc { font-family: var(--sans) !important; font-size: 13.5px !important; line-height: 1.55 !important; color: var(--txt-3) !important; } html body .cc-desc a { color: var(--red-soft) !important; text-decoration: underline !important; text-underline-offset: 2px !important; } html body .cc-btn--primary { background: var(--red) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; padding: 12px 20px !important; font-family: var(--sans) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.04em !important; min-height: 44px; transition: background 0.32s var(--ease-soft), transform 0.32s var(--ease-soft) !important; } html body .cc-btn--primary:hover { background: var(--red-deep) !important; transform: translateY(-1px); } html body .cc-btn--ghost { background: transparent !important; color: var(--txt-2) !important; border: 1px solid var(--line-d18) !important; border-radius: 999px !important; padding: 12px 20px !important; font-family: var(--sans) !important; font-size: 13px !important; font-weight: 700 !important; min-height: 44px; transition: background 0.32s var(--ease-soft), color 0.32s var(--ease-soft) !important; } html body .cc-btn--ghost:hover { background: rgba(255, 255, 255, 0.05) !important; color: var(--txt-1) !important; } /* ════════════════════════════════════════════════════════════════════════════ WHATSAPP FLOATING BUTTON · sticky bottom-left ════════════════════════════════════════════════════════════════════════════ */ html body .el-wa-floating { position: fixed !important; bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; left: 20px !important; z-index: 200 !important; display: inline-flex !important; align-items: center !important; gap: 12px !important; padding: 12px 20px 12px 14px !important; background: #25d366 !important; color: #ffffff !important; font-family: var(--sans) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.005em !important; text-decoration: none !important; border: 0 !important; border-radius: 999px !important; min-height: 52px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 12px 28px -4px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(0, 0, 0, 0.18) !important; transition: background 0.32s var(--ease-soft), transform 0.32s var(--ease-soft), box-shadow 0.32s var(--ease-soft) !important; } html body .el-wa-floating::before { content: ''; display: inline-block; width: 28px; height: 28px; background: #ffffff; border-radius: 50%; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; flex-shrink: 0; } html body .el-wa-floating:hover { background: #20bd5a !important; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 18px 36px -4px rgba(37, 211, 102, 0.55), 0 6px 16px rgba(0, 0, 0, 0.22) !important; } html body .el-wa-floating:active { transform: translateY(0) scale(0.97); } @media (max-width: 600px) { html body .el-wa-floating { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; left: 16px !important; padding: 11px 16px 11px 13px !important; font-size: 13px !important; gap: 10px !important; } html body .el-wa-floating::before { width: 24px; height: 24px; } } /* Cuando cookie consent está visible, sube el WhatsApp button */ html body .cc:not([hidden]) ~ .el-wa-floating, html body .cc.is-visible ~ .el-wa-floating { bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important; } /* END · Dark dominant + ui-ux-pro-max */ /* ════════════════════════════════════════════════════════════════════════════ ▓ ui-ux-pro-max OFFICIAL · QC PATCH · pre-delivery checklist applied ════════════════════════════════════════════════════════════════════════════ Aplicado sistemáticamente sobre el CSS actual: - §1 Accessibility (contrast 4.5:1 verified, focus rings) - §2 Touch (44x44px min, 8px+ spacing, press feedback) - §5 Layout (4/8pt rhythm, responsive 375/768/1024/1440) - §6 Typography (line-height 1.5-1.75, weight hierarchy) - §7 Animation (150-300ms, ease-out enter, transform-only, reduced-motion) ════════════════════════════════════════════════════════════════════════════ */ /* ───── §2 cursor-pointer · TODOS los clickables ───── */ html body a, html body button, html body [role="button"], html body .fv2-q, html body .vid-btn, html body .vid-dot { cursor: pointer !important; } html body button:disabled, html body [aria-disabled="true"] { cursor: not-allowed !important; opacity: 0.45 !important; } /* ───── §2 Press feedback · TODOS los CTAs (no solo hero) ───── */ html body a[class*="cta"]:active, html body .btn:active, html body button[type="submit"]:active, html body .ov3-cta:active, html body .hv2-cta:active, html body .cv2-cta:active, html body .nav-cta:active, html body .cc-btn:active, html body .el-wa-floating:active { transform: translateY(0) scale(0.97) !important; transition: transform 0.12s var(--ease) !important; } /* ───── §1 Focus visible · uniforme, accesible, no removido ───── */ html body a:focus-visible, html body button:focus-visible, html body [role="button"]:focus-visible, html body .fv2-q:focus-visible, html body input:focus-visible, html body textarea:focus-visible, html body select:focus-visible { outline: 2px solid var(--red) !important; outline-offset: 3px !important; border-radius: 6px !important; } /* ───── §2 Touch targets ≥ 44x44px · sweep ───── */ html body .nav-links a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } html body .footer-legal a { min-height: 32px; display: inline-flex; align-items: center; padding: 4px 0; } html body .ov3-microctas a { min-height: 44px !important; padding: 8px 0 !important; } html body .vid-btn, html body .vid-dot, html body .vid-play { min-width: 44px !important; min-height: 44px !important; } /* ───── §7 Animation timing · normalizado 200-280ms ease-out ───── */ html body a, html body button, html body .dv2-card, html body .ide-card, html body .wr-card, html body .mv2-card, html body .ev3-col, html body .ov3-card, html body .fv2-toggle, html body .ov3-cta, html body .hv2-cta, html body .cv2-cta, html body .nav-cta, html body .el-wa-floating, html body .tm-item { transition-duration: 260ms !important; transition-timing-function: var(--ease-soft) !important; } /* Exit animations faster than enter (60-70% of enter) */ html body .fv2-item.is-open .fv2-toggle { transition-duration: 200ms !important; } /* ───── §1 prefers-reduced-motion · sweep absoluto ───── */ @media (prefers-reduced-motion: reduce) { html body *, html body *::before, html body *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html body .gv2-seal-ring::before { animation: none !important; } html body .closing-v2::after { animation: none !important; } html body .hv2-kicker::before, html body .dolor-v2 .dv2-kicker::before, html body .overview-v3 .ov3-kicker::before, html body .weeks-roadmap .wr-kicker::before, html body .ide-v2 .ide-kicker::before, html body .mentors-v2 .mv2-kicker::before, html body .offer-v3 .ov3-kicker::before, html body .encaje-v3 .ev3-kicker::before, html body .faq-v2 .fv2-kicker::before, html body .closing-v2 .kicker::before { animation: none !important; } } /* ───── §5 Spacing rhythm 4/8pt scale · sweep ───── */ /* Section-level vertical rhythm: 96 / 128 / 168 / 200px */ html body section { box-sizing: border-box; } /* ───── §6 Typography · weight hierarchy enforcement ───── */ /* Body text: regular (400) */ html body p, html body li, html body .desc, html body .dv2-card p, html body .wr-card p, html body .ide-card p, html body .ov3-features li, html body .ev3-list li, html body .fv2-ans p, html body .hv2-sub, html body .ov3-intro, html body .ide-intro, html body .mv2-credentials, html body .gv2-content p { font-weight: 400 !important; } /* Strong: 700 only */ html body strong, html body b { font-weight: 700 !important; } /* Display headers: serif 400 (DM Serif Display only has 400) */ html body h1, html body h2, html body h3, html body h4, html body .hv2-title, html body .ov3-head h2, html body .dv2-head h2, html body .wr-head h2, html body .ide-head h2, html body .mv2-head h2, html body .ov3-card h3, html body .gv2-content h2, html body .ev3-head h2, html body .fv2-head h2, html body .cv2-h, html body .dv2-card h3, html body .wr-card h3, html body .ide-card h3, html body .mv2-name { font-weight: 400 !important; } /* Labels/kickers/eyebrows: mono 700 */ html body .hv2-kicker, html body .dv2-kicker, html body .ov3-kicker, html body .wr-kicker, html body .ide-kicker, html body .mv2-kicker, html body .ev3-kicker, html body .fv2-kicker, html body .gv2-kicker, html body .nav-links a, html body .nav-cta, html body .footer-legal, html body .wr-week-tag, html body .wr-stat .lbl, html body .ev3-col-tag { font-weight: 700 !important; } /* Body line-height enforced 1.5-1.75 */ html body p, html body .desc, html body .dv2-card p, html body .wr-card p:not(.wr-tagline), html body .ide-card p, html body .ov3-features li, html body .ev3-list li, html body .fv2-ans p, html body .gv2-content p { line-height: 1.7 !important; } html body .hv2-sub, html body .ov3-intro, html body .ide-intro, html body .mv2-credentials { line-height: 1.65 !important; } /* ───── §1 Contrast verification · sweep ───── */ /* Body text on dark sections: rgba(255,255,255,0.86) → 4.5:1+ on #0a0a0a */ html body section.dolor-v2 .dv2-card p, html body section.overview-v3 .ov3-phase .desc, html body section.weeks-roadmap .wr-card p:not(.wr-tagline), html body section.ide-v2 .ide-card p, html body section.mentors-v2 .mv2-credentials, html body section.guarantee-v2 .gv2-content p, html body section.encaje-v3 .ev3-list li, html body section.faq-v2 .fv2-ans p, html body section.closing-v2 p, html body section.offer-v3 .ov3-features li { color: rgba(255, 255, 255, 0.86) !important; } /* Body intro/sub: 4.5:1 */ html body .hv2-sub, html body .ov3-intro, html body .ide-intro, html body .dv2-sub, html body .ov3-price-sub, html body .gv2-seal-days, html body .wr-week-tag, html body .ov3-microctas a { color: rgba(255, 255, 255, 0.78) !important; } /* ───── §2 Hit area expansion · cards full clickable target ───── */ html body .ide-card, html body .dv2-card, html body .wr-card, html body .mv2-card, html body .ev3-col { position: relative; } /* ───── §6 Tabular nums extended ───── */ html body .ov3-price-sub, html body .ov3-fin-body, html body .ov3-fin-body strong, html body .wr-week-tag, html body .gv2-seal-days, html body .gv2-seal-label, html body .tm-label { font-feature-settings: "tnum" 0, "lnum" 1 !important; } /* ───── §5 Responsive · breakpoint 375/768/1024/1440 ───── */ @media (max-width: 375px) { /* Smallest mobile: tighter padding but legible */ html body section.hv2-section { padding: 56px 0 64px !important; } html body section.dolor-v2, html body section.overview-v3, html body section.weeks-roadmap, html body section.ide-v2, html body section.mentors-v2, html body section.offer-v3, html body section.guarantee-v2, html body section.encaje-v3, html body section.faq-v2 { padding: 72px 0 !important; } html body .hv2-title { font-size: 32px !important; line-height: 1.04 !important; } html body section.dolor-v2 h2, html body section.overview-v3 .ov3-head h2, html body section.weeks-roadmap h2, html body section.ide-v2 .ide-head h2, html body section.mentors-v2 h2, html body section.offer-v3 h2, html body section.guarantee-v2 .gv2-content h2, html body section.encaje-v3 h2, html body section.faq-v2 h2 { font-size: 28px !important; line-height: 1.08 !important; } } @media (min-width: 1440px) { /* Largest desktop: contain content */ html body section.dolor-v2 .dv2-wrap, html body section.overview-v3 .ov3-wrap, html body section.weeks-roadmap .wr-wrap, html body section.ide-v2 .ide-wrap, html body section.mentors-v2 .mv2-wrap, html body section.encaje-v3 .ev3-wrap { padding-left: 80px !important; padding-right: 80px !important; } } /* ───── §5 No horizontal scroll guard ───── */ html body { overflow-x: hidden; } /* ───── §2 WhatsApp button · ensure 48x48 tap area ───── */ html body .el-wa-floating { min-height: 56px !important; padding: 14px 22px 14px 16px !important; } @media (max-width: 600px) { html body .el-wa-floating { min-height: 52px !important; padding: 12px 18px 12px 14px !important; } } /* ───── §4 Icon consistency · stroke width unified 1.5 ───── */ html body .dv2-icon, html body .ov3-phase-icon { stroke-width: 1.5 !important; } /* ───── §6 Truncation prevention · text-wrap balance ───── */ html body h1, html body h2, html body h3, html body h4 { text-wrap: balance; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; } /* ───── §7 Animation 60-70% on exit · FAQ collapse faster ───── */ html body section.faq-v2 .fv2-ans { transition: max-height 0.5s var(--ease-soft), padding 0.32s var(--ease-soft) !important; } html body section.faq-v2 .fv2-item.is-open .fv2-ans { transition: max-height 0.55s var(--ease-soft), padding 0.4s var(--ease-soft) !important; } /* ───── §1 ARIA-friendly · invisible-but-present helpers ───── */ html body [aria-hidden="true"] { pointer-events: none !important; } /* ───── §5 Safe area · bottom inset awareness ───── */ html body footer.site-footer { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important; } /* ───── §2 Smooth scroll only · respect user setting via media query ───── */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* END · ui-ux-pro-max OFFICIAL QC patch */ /* ════════════════════════════════════════════════════════════════════════════ ▓ DARK RHYTHM + MODERN TESTIMONIALS + TASTE-SKILL FINISH ════════════════════════════════════════════════════════════════════════════ Aplicado: - Variación de dark levels por sección (no monótono) - Atmospheric layers (sutil radial + grain por sección) - Testimonios · horizontal scroll-snap moderno - taste-skill editorial-premium · asymmetry + restraint + silent motion ════════════════════════════════════════════════════════════════════════════ */ /* ───── 1 · SECTION DARK RHYTHM · evitar monotonía ───── */ /* Hero · ink-90 base (no cambia) */ html body section.hv2-section { background: var(--ink-90) !important; } /* Trust marquee · ink-95 deep (transición) */ html body section.trust-marquee { background: var(--ink-95) !important; } /* Dolor · ink-90 base */ html body section.dolor-v2 { background: var(--ink-90) !important; } /* Overview · ink-85 más light (respiro) */ html body section.overview-v3 { background: var(--ink-85) !important; } /* Roadmap · ink-90 vuelta a base */ html body section.weeks-roadmap { background: var(--ink-90) !important; } /* IDE · ink-85 (respiro) */ html body section.ide-v2 { background: var(--ink-85) !important; } /* CTAs intermedios · ink-85 matching adjacent */ html body section.ide-v2 + div[style*="padding:0 24px 64px"] { background: var(--ink-85) !important; } html body section.guarantee-v2 + div[style*="padding:0 24px 64px"] { background: var(--ink-90) !important; } /* Mentors · ink-80 lighter dark (premium tier feel) */ html body section.mentors-v2 { background: var(--ink-80) !important; } /* Testimonios · ink-85 (mezcla) */ html body section.section-paper#resultados { background: var(--ink-85) !important; } /* Offer · ink-95 deep (premium climax pricing) */ html body section.offer-v3 { background: var(--ink-95) !important; } /* Garantía · ink-90 con atmosphere */ html body section.guarantee-v2 { background: var(--ink-90) !important; } /* Encaje · ink-85 */ html body section.encaje-v3 { background: var(--ink-85) !important; } /* FAQ · ink-80 (más light, lectura cómoda) */ html body section.faq-v2 { background: var(--ink-80) !important; } /* Closing · ink-95 (climax final) */ html body section.closing-v2 { background: var(--ink-95) !important; } /* Footer · ink-95 (consistencia con closing) */ html body footer.site-footer { background: var(--ink-95) !important; } /* ───── 2 · ATMOSPHERIC LAYERS · radial sutil + grain por sección ───── */ /* Overview · subtle radial rojo top-right */ html body section.overview-v3 { position: relative; } html body section.overview-v3::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 88% 12%, rgba(236, 68, 41, 0.05), transparent 55%); pointer-events: none; z-index: 0; } html body section.overview-v3 > * { position: relative; z-index: 1; } /* Mentors · subtle radial cream warm top-left */ html body section.mentors-v2 { position: relative; } html body section.mentors-v2::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 8% 90%, rgba(244, 238, 230, 0.025), transparent 50%); pointer-events: none; z-index: 0; } html body section.mentors-v2 > * { position: relative; z-index: 1; } /* Testimonios · subtle radial center */ html body section.section-paper#resultados { position: relative; } html body section.section-paper#resultados::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center 30%, rgba(236, 68, 41, 0.035), transparent 60%); pointer-events: none; z-index: 0; } html body section.section-paper#resultados > * { position: relative; z-index: 1; } /* Offer · dual radial (depth premium) */ html body section.offer-v3 { position: relative; } html body section.offer-v3::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 12% 18%, rgba(236, 68, 41, 0.08), transparent 50%), radial-gradient(ellipse at 88% 82%, rgba(236, 68, 41, 0.05), transparent 50%); pointer-events: none; z-index: 0; } html body section.offer-v3 > * { position: relative; z-index: 1; } /* Garantía · subtle radial seal-facing */ html body section.guarantee-v2 { position: relative; } html body section.guarantee-v2::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 18% 50%, rgba(236, 68, 41, 0.06), transparent 45%); pointer-events: none; z-index: 0; } html body section.guarantee-v2 > * { position: relative; z-index: 1; } /* FAQ · subtle radial light */ html body section.faq-v2 { position: relative; } html body section.faq-v2::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.02), transparent 50%); pointer-events: none; z-index: 0; } html body section.faq-v2 > * { position: relative; z-index: 1; } /* ───── 3 · TESTIMONIOS · HORIZONTAL SCROLL-SNAP MODERNO ───── */ /* Wrapper carrusel · horizontal scroll natural */ html body section.section-paper#resultados .vid-carousel { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; -ms-overflow-style: none !important; gap: 24px !important; padding: 12px clamp(24px, 5vw, 56px) 56px !important; margin: 0 calc(-1 * clamp(24px, 5vw, 56px)) !important; max-width: none !important; cursor: grab !important; position: relative; } html body section.section-paper#resultados .vid-carousel::-webkit-scrollbar { display: none !important; } html body section.section-paper#resultados .vid-carousel:active { cursor: grabbing !important; } /* Slides · ALL visible inline, scroll-snap-aligned */ html body section.section-paper#resultados .vid-slide { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; flex: 0 0 auto !important; width: min(960px, 90vw) !important; scroll-snap-align: center !important; scroll-snap-stop: always !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 16px !important; overflow: hidden !important; position: relative !important; opacity: 0.6; transform: scale(0.96); transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft) !important; animation: none !important; } html body section.section-paper#resultados .vid-slide.is-active { display: grid !important; opacity: 1; transform: scale(1); border-color: var(--line-d18) !important; } html body section.section-paper#resultados .vid-slide:hover { opacity: 0.92; } /* Top red rule expansible (motivo de marca) */ html body section.section-paper#resultados .vid-slide::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--red); z-index: 5; transition: width 0.6s var(--ease-soft); } html body section.section-paper#resultados .vid-slide.is-active::before { width: 100%; opacity: 0.55; } /* Video block dentro de slide */ html body section.section-paper#resultados .vid-video { background: #050505 !important; position: relative !important; min-height: 460px !important; aspect-ratio: 16 / 11 !important; overflow: hidden !important; } /* Vertical 9:16 modifier */ html body section.section-paper#resultados .vid-slide.is-vertical { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important; } html body section.section-paper#resultados .vid-slide.is-vertical .vid-video { aspect-ratio: 9 / 16 !important; min-height: unset !important; max-height: 580px !important; } @media (max-width: 768px) { html body section.section-paper#resultados .vid-slide { grid-template-columns: 1fr !important; width: min(420px, 88vw) !important; } html body section.section-paper#resultados .vid-slide.is-vertical { grid-template-columns: 1fr !important; } html body section.section-paper#resultados .vid-video { min-height: 280px !important; aspect-ratio: 16 / 9 !important; } html body section.section-paper#resultados .vid-slide.is-vertical .vid-video { aspect-ratio: 9 / 16 !important; max-height: 480px !important; } } /* Info block dentro */ html body section.section-paper#resultados .vid-info { padding: 48px 44px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 18px !important; background: transparent !important; border-left: 1px solid var(--line-d08) !important; position: relative; } @media (max-width: 768px) { html body section.section-paper#resultados .vid-info { padding: 32px 28px 36px !important; border-left: 0 !important; border-top: 1px solid var(--line-d08) !important; } } html body section.section-paper#resultados .vid-tag { font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; color: var(--red) !important; } html body section.section-paper#resultados .vid-name { font-family: var(--serif) !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(28px, 3vw, 40px) !important; line-height: 1.06 !important; letter-spacing: -0.018em !important; color: var(--txt-1) !important; margin: 0 !important; } html body section.section-paper#resultados .vid-sector { font-family: var(--sans) !important; font-size: 14px !important; font-weight: 700 !important; color: var(--txt-4) !important; margin: 0 !important; letter-spacing: 0.005em; } html body section.section-paper#resultados .vid-rule { display: block !important; width: 56px !important; height: 2px !important; background: var(--red) !important; margin: 8px 0 4px !important; border-radius: 2px !important; } html body section.section-paper#resultados .vid-quote { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(17px, 1.5vw, 21px) !important; line-height: 1.5 !important; color: var(--txt-2) !important; margin: 0 !important; } html body section.section-paper#resultados .vid-glyph { font-family: var(--serif) !important; font-style: italic !important; color: var(--red) !important; font-size: 1.5em !important; vertical-align: -0.25em !important; margin-right: 0.06em !important; } html body section.section-paper#resultados .vid-stars { display: inline-flex !important; gap: 5px !important; margin-top: 4px !important; } html body section.section-paper#resultados .vid-star { width: 18px !important; height: 18px !important; fill: var(--red) !important; } /* Hide legacy controls (botones prev/next) · now horizontal scroll */ html body section.section-paper#resultados .vid-controls { display: none !important; } /* Custom modern indicator + scroll hint */ html body section.section-paper#resultados .vid-carousel { position: relative; } /* Edge fade for elegant peek */ html body section.section-paper#resultados { position: relative; } html body section.section-paper#resultados .container { position: relative; } html body section.section-paper#resultados .container::after { content: 'arrastra →'; display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--txt-4); text-align: center; margin-top: 24px; pointer-events: none; } /* Section paper testimonios spacing */ html body section.section-paper#resultados { padding: clamp(96px, 12vw, 168px) 0 !important; } html body section.section-paper#resultados > .container { max-width: var(--w-full) !important; margin: 0 auto !important; padding: 0 clamp(24px, 5vw, 56px) !important; } html body section.section-paper#resultados .section-head { text-align: center !important; max-width: 760px !important; margin: 0 auto clamp(56px, 7vw, 80px) !important; } html body section.section-paper#resultados .section-head .kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--red) !important; padding: 7px 14px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 22px !important; } html body section.section-paper#resultados .section-head h2 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(34px, 4.6vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -0.022em !important; color: var(--txt-1) !important; margin: 0 !important; text-wrap: balance; } html body section.section-paper#resultados .section-head h2 em, html body section.section-paper#resultados .section-head .accent { color: var(--red-soft) !important; font-style: italic !important; } /* ───── 4 · TASTE-SKILL EDITORIAL-PREMIUM FINISH · subtle polish ───── */ /* Section pacing · density alternation entre vecinos */ html body section.dolor-v2 + section.overview-v3 { padding-top: clamp(112px, 13vw, 192px) !important; } html body section.overview-v3 + section.weeks-roadmap { padding-top: clamp(112px, 13vw, 192px) !important; } /* Asymmetric splits ya aplicados en heads · ahora confirma 5/7 en mentions */ /* (ya está) */ /* Refined motion · silent reads in editorial-premium */ html body section.section-paper#resultados .vid-slide { will-change: transform, opacity; } /* Eyebrow tags · uniformidad en TODAS las sections (taste-skill consistency) */ html body section.dolor-v2 .dv2-kicker, html body section.overview-v3 .ov3-kicker, html body section.weeks-roadmap .wr-kicker, html body section.ide-v2 .ide-kicker, html body section.mentors-v2 .mv2-kicker, html body section.guarantee-v2 .gv2-kicker, html body section.encaje-v3 .ev3-kicker, html body section.faq-v2 .fv2-kicker, html body section.closing-v2 .kicker { letter-spacing: 0.26em !important; font-size: 10.5px !important; font-weight: 700 !important; font-family: var(--mono) !important; padding: 7px 14px 7px 12px !important; background: var(--red-tint) !important; border: 1px solid var(--red-line) !important; border-radius: 999px !important; margin-bottom: 24px !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } /* Dot pulse en todos los kickers (taste-skill consistency) */ html body section.dolor-v2 .dv2-kicker::before, html body section.overview-v3 .ov3-kicker::before, html body section.weeks-roadmap .wr-kicker::before, html body section.ide-v2 .ide-kicker::before, html body section.mentors-v2 .mv2-kicker::before, html body section.guarantee-v2 .gv2-kicker::before, html body section.encaje-v3 .ev3-kicker::before, html body section.faq-v2 .fv2-kicker::before, html body section.closing-v2 .kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } /* Subtle red border lines on top of section transitions */ html body section.dolor-v2 + section.overview-v3, html body section.overview-v3 + section.weeks-roadmap, html body section.weeks-roadmap + section.ide-v2, html body section.ide-v2 + div[style*="padding:0 24px 64px"], html body section.mentors-v2, html body section.section-paper#resultados, html body section.offer-v3, html body section.guarantee-v2, html body section.encaje-v3, html body section.faq-v2, html body section.closing-v2 { border-top: 1px solid var(--line-d05); } /* Closing · ensure dramatic */ html body section.closing-v2 { position: relative; overflow: hidden; } html body section.closing-v2::after { z-index: 0; } /* END · dark rhythm + modern testimonials + taste-skill finish */ /* ════════════════════════════════════════════════════════════════════════════ ▓ FIXES · 6 ajustes específicos ════════════════════════════════════════════════════════════════════════════ */ /* ───── FIX 1 · TESTIMONIOS · scroll horizontal funcional (vencer specificity) ───── */ /* Reactiva display grid en TODOS los slides (no solo is-active) */ html body section.section-paper#resultados .vid-carousel .vid-slide, html body section.section-paper#resultados .vid-carousel .vid-slide.is-active, html body section.section-paper#resultados .vid-carousel .vid-slide[aria-hidden="true"] { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; flex: 0 0 auto !important; width: min(960px, 90vw) !important; scroll-snap-align: center !important; scroll-snap-stop: always !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 16px !important; overflow: hidden !important; animation: none !important; opacity: 0.55; transform: scale(0.96); transition: opacity 0.45s var(--ease-soft), transform 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft) !important; position: relative !important; } html body section.section-paper#resultados .vid-carousel .vid-slide.is-active { opacity: 1 !important; transform: scale(1) !important; border-color: var(--line-d18) !important; } @media (max-width: 768px) { html body section.section-paper#resultados .vid-carousel .vid-slide, html body section.section-paper#resultados .vid-carousel .vid-slide.is-active { grid-template-columns: 1fr !important; width: min(420px, 88vw) !important; } } /* Carrusel · scroll natural + drag */ html body section.section-paper#resultados .vid-carousel { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 24px !important; padding: 12px clamp(24px, 5vw, 56px) 56px !important; margin: 0 calc(-1 * clamp(24px, 5vw, 56px)) !important; max-width: none !important; cursor: grab !important; } html body section.section-paper#resultados .vid-carousel::-webkit-scrollbar { display: none !important; } html body section.section-paper#resultados .vid-carousel:active { cursor: grabbing !important; } /* Ocultar controles legacy (botones prev/next/dots) */ html body section.section-paper#resultados .vid-controls { display: none !important; } /* ───── FIX 2 · MENTORS · más editorial · asymmetric + photo treatment ───── */ html body section.mentors-v2 { background: var(--cream-soft, #fbf8f3) !important; color: var(--ink-90) !important; } /* Si tiene radial atmosphere de antes, lo neutralizamos */ html body section.mentors-v2::after { background: radial-gradient(ellipse at 90% 10%, rgba(236, 68, 41, 0.04), transparent 50%) !important; } html body section.mentors-v2 .mv2-head { text-align: left !important; margin: 0 0 clamp(64px, 8vw, 96px) !important; max-width: 920px !important; display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; gap: clamp(32px, 5vw, 80px) !important; align-items: end !important; } @media (max-width: 880px) { html body section.mentors-v2 .mv2-head { grid-template-columns: 1fr !important; gap: 20px !important; text-align: left !important; } } html body section.mentors-v2 .mv2-kicker { background: rgba(236, 68, 41, 0.08) !important; border: 1px solid rgba(236, 68, 41, 0.24) !important; color: var(--red-deep) !important; } html body section.mentors-v2 .mv2-kicker::before { background: var(--red-deep) !important; } html body section.mentors-v2 h2 { color: var(--ink-90) !important; } html body section.mentors-v2 h2 em { color: var(--red-deep) !important; font-style: italic !important; } html body section.mentors-v2 .mv2-overline { color: var(--ink-50) !important; } /* Grid asymmetric · 1 big + 2 small */ html body section.mentors-v2 .mv2-grid { display: grid !important; grid-template-columns: 1.4fr 1fr 1fr !important; gap: 24px !important; } @media (max-width: 1024px) { html body section.mentors-v2 .mv2-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 720px) { html body section.mentors-v2 .mv2-grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto !important; } } /* Cards · paper-feel premium, no más translucent dark */ html body section.mentors-v2 .mv2-card { background: #ffffff !important; border: 1px solid rgba(20, 18, 14, 0.08) !important; border-radius: 16px !important; padding: 36px 32px !important; box-shadow: 0 1px 0 rgba(20, 18, 14, 0.04), 0 24px 56px -16px rgba(20, 18, 14, 0.08) !important; position: relative; overflow: hidden; transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft) !important; } html body section.mentors-v2 .mv2-card::before { content: '*'; position: absolute; top: 18px; right: 22px; font-family: var(--serif); font-style: italic; font-size: 36px; color: var(--red); opacity: 0.5; line-height: 0.7; pointer-events: none; } html body section.mentors-v2 .mv2-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(20, 18, 14, 0.04), 0 36px 72px -16px rgba(20, 18, 14, 0.14) !important; border-color: rgba(20, 18, 14, 0.14) !important; } /* Featured card (1st) bigger typography */ html body section.mentors-v2 .mv2-grid > .mv2-card:first-child { padding: 48px 40px !important; } html body section.mentors-v2 .mv2-grid > .mv2-card:first-child .mv2-name { font-size: clamp(28px, 2.6vw, 38px) !important; } /* Text colors · DARK on cream */ html body section.mentors-v2 .mv2-card .mv2-kicker { font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; color: var(--red-deep) !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 14px !important; } html body section.mentors-v2 .mv2-card .mv2-kicker::before { display: none !important; } html body section.mentors-v2 .mv2-name { color: var(--ink-90) !important; } html body section.mentors-v2 .mv2-credentials { color: var(--ink-50) !important; line-height: 1.7 !important; } /* ───── FIX 3 · HERO más alargado a los lados ───── */ html body .hv2-wrap { max-width: 1240px !important; padding: 0 clamp(24px, 5vw, 64px) !important; text-align: center !important; } html body .hv2-title { max-width: 22ch !important; font-size: clamp(42px, 6.8vw, 92px) !important; } html body .hv2-sub { max-width: 64ch !important; } html body .hv2-video-wrap { max-width: 1080px !important; margin: 0 auto 44px !important; } /* Hero mantiene texto arriba + video abajo (no 2-col) */ @media (min-width: 960px) { html body section.hv2-section .hv2-wrap { display: block !important; grid-template-columns: none !important; text-align: center !important; } html body .hv2-kicker, html body .hv2-title, html body .hv2-sub, html body .hv2-cta, html body .hv2-cta-meta, html body .hv2-video-wrap { grid-column: auto !important; grid-row: auto !important; margin-left: auto !important; margin-right: auto !important; max-width: none !important; text-align: center !important; } html body .hv2-kicker { max-width: max-content !important; margin: 0 auto 36px !important; } html body .hv2-title { max-width: 22ch !important; margin: 0 auto 28px !important; } html body .hv2-sub { max-width: 64ch !important; margin: 0 auto 44px !important; } html body .hv2-cta { max-width: max-content !important; } html body .hv2-video-wrap { max-width: 1080px !important; margin: 0 auto 44px !important; } } /* ───── FIX 4 · ALGUNAS SECCIONES CLARAS · rompiendo monotonía ───── */ /* Overview V3 → CREAM paper (rompe dark) */ html body section.overview-v3 { background: var(--cream-soft, #fbf8f3) !important; color: var(--ink-90) !important; } html body section.overview-v3::after { background: radial-gradient(ellipse at 90% 10%, rgba(236, 68, 41, 0.04), transparent 55%) !important; } html body section.overview-v3 .ov3-wrap::before { display: none !important; } html body section.overview-v3 .ov3-kicker { background: rgba(236, 68, 41, 0.08) !important; border: 1px solid rgba(236, 68, 41, 0.24) !important; color: var(--red-deep) !important; } html body section.overview-v3 .ov3-kicker::before { background: var(--red-deep) !important; } html body section.overview-v3 .ov3-head h2 { color: var(--ink-90) !important; } html body section.overview-v3 .ov3-head h2 em { color: var(--red-deep) !important; } html body section.overview-v3 .ov3-intro { color: var(--ink-50) !important; } html body section.overview-v3 .ov3-intro strong { color: var(--ink-90) !important; } html body section.overview-v3 .ov3-divider { background: rgba(20, 18, 14, 0.10) !important; } html body section.overview-v3 .ov3-divider::before { background: var(--cream-soft, #fbf8f3) !important; color: var(--red) !important; } html body section.overview-v3 .ov3-phase-tag { background: rgba(236, 68, 41, 0.08) !important; border: 1px solid rgba(236, 68, 41, 0.20) !important; color: var(--red-deep) !important; } html body section.overview-v3 .ov3-phase h3 { color: var(--ink-90) !important; } html body section.overview-v3 .ov3-phase h3 em { color: var(--red-deep) !important; } html body section.overview-v3 .ov3-phase .desc { color: var(--ink-50) !important; } html body section.overview-v3 .ov3-phase .desc strong { color: var(--ink-90) !important; } html body section.overview-v3 .ov3-phase li { background: #ffffff !important; border: 1px solid rgba(20, 18, 14, 0.06) !important; border-left: 3px solid var(--red) !important; border-radius: 0 8px 8px 0 !important; color: var(--ink-80) !important; padding: 18px 22px 18px 50px !important; min-height: 56px; } html body section.overview-v3 .ov3-phase li::before { content: '' !important; position: absolute !important; left: 18px !important; top: 24px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: var(--red) !important; color: transparent !important; } html body section.overview-v3 .ov3-phase li::after { content: ''; position: absolute; left: 24px; top: 30px; width: 11px; height: 6px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-45deg); } html body section.overview-v3 .ov3-phase li:hover { transform: translateX(6px); box-shadow: 0 14px 36px -12px rgba(20, 18, 14, 0.10); border-color: rgba(20, 18, 14, 0.12) !important; border-left-color: var(--red-deep) !important; } html body section.overview-v3 .ov3-phase li strong { color: var(--ink-90) !important; } /* FAQ V2 → CREAM paper (rompe dark al final) */ html body section.faq-v2 { background: var(--cream-soft, #fbf8f3) !important; color: var(--ink-90) !important; } html body section.faq-v2::after { background: radial-gradient(ellipse at 10% 90%, rgba(236, 68, 41, 0.04), transparent 50%) !important; } html body section.faq-v2 .fv2-kicker { background: rgba(236, 68, 41, 0.08) !important; border: 1px solid rgba(236, 68, 41, 0.24) !important; color: var(--red-deep) !important; } html body section.faq-v2 .fv2-kicker::before { background: var(--red-deep) !important; } html body section.faq-v2 h2 { color: var(--ink-90) !important; } html body section.faq-v2 .fv2-list { border-top: 1px solid rgba(20, 18, 14, 0.10) !important; } html body section.faq-v2 .fv2-item { border-bottom: 1px solid rgba(20, 18, 14, 0.10) !important; } html body section.faq-v2 .fv2-num { color: var(--red-deep) !important; } html body section.faq-v2 .fv2-q { color: var(--ink-90) !important; } html body section.faq-v2 .fv2-q:hover { color: var(--red-deep) !important; } html body section.faq-v2 .fv2-toggle { border: 1px solid rgba(20, 18, 14, 0.20) !important; background: #ffffff !important; } html body section.faq-v2 .fv2-toggle::before, html body section.faq-v2 .fv2-toggle::after { background: var(--ink-90) !important; } html body section.faq-v2 .fv2-item.is-open .fv2-toggle { background: var(--ink-90) !important; border-color: var(--ink-90) !important; } html body section.faq-v2 .fv2-item.is-open .fv2-toggle::before, html body section.faq-v2 .fv2-item.is-open .fv2-toggle::after { background: var(--cream-soft, #fbf8f3) !important; } html body section.faq-v2 .fv2-ans p { color: var(--ink-50) !important; } html body section.faq-v2 .fv2-ans p strong { color: var(--ink-90) !important; } /* ───── FIX 5 · WHATSAPP button A LA DERECHA ───── */ html body .el-wa-floating { left: auto !important; right: 20px !important; } @media (max-width: 600px) { html body .el-wa-floating { right: 16px !important; left: auto !important; } } /* ───── FIX 6 · WEEKS ROADMAP · "Semana N" resaltada, no "01 02 03 04" ───── */ /* Esconde el "01 02 03 04" gigante del wr-num */ html body section.weeks-roadmap .wr-num { display: none !important; } /* "Semana N" pasa a ser el número monumental */ html body section.weeks-roadmap .wr-week-tag { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(36px, 4vw, 56px) !important; font-weight: 400 !important; line-height: 0.92 !important; color: var(--red-soft) !important; margin: 0 0 24px !important; display: block !important; letter-spacing: -0.024em !important; text-transform: none !important; } /* En dark sections (weeks-roadmap se mantiene dark) */ html body section.weeks-roadmap { background: var(--ink-90) !important; } /* Title inside card más pequeño que la semana */ html body section.weeks-roadmap .wr-card h3 { font-size: clamp(20px, 1.8vw, 26px) !important; } /* END · 6 fixes específicos */ /* ════════════════════════════════════════════════════════════════════════════ ▓ FRONTEND-DESIGN POLISH · 6 fixes con disciplina editorial ════════════════════════════════════════════════════════════════════════════ */ /* ───── FIX 1 · TESTIMONIOS · AUTO-SCROLL MARQUEE (sin mouse) ───── */ html body section.section-paper#resultados .vid-carousel { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow: hidden !important; scroll-snap-type: none !important; width: max-content !important; margin: 0 auto !important; padding: 12px 0 56px !important; gap: 24px !important; cursor: default !important; animation: vid-marquee 36s linear infinite !important; } html body section.section-paper#resultados .vid-carousel::-webkit-scrollbar { display: none !important; } @keyframes vid-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% / 3 * 2)); } } /* Pause on hover (a11y · interaction expectation) */ html body section.section-paper#resultados .vid-carousel:hover { animation-play-state: paused !important; } /* Slides: todos visibles, mismo tamaño, no scaling weird */ html body section.section-paper#resultados .vid-carousel .vid-slide, html body section.section-paper#resultados .vid-carousel .vid-slide.is-active, html body section.section-paper#resultados .vid-carousel .vid-slide[aria-hidden="true"] { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important; flex: 0 0 auto !important; width: min(720px, 80vw) !important; scroll-snap-align: none !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%) !important; border: 1px solid var(--line-d08) !important; border-radius: 16px !important; overflow: hidden !important; animation: none !important; opacity: 1 !important; transform: none !important; position: relative !important; } html body section.section-paper#resultados .vid-carousel .vid-slide::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 2px; background: var(--red); z-index: 5; } @media (max-width: 768px) { html body section.section-paper#resultados .vid-carousel .vid-slide, html body section.section-paper#resultados .vid-carousel .vid-slide.is-active { grid-template-columns: 1fr !important; width: min(380px, 84vw) !important; } html body section.section-paper#resultados .vid-carousel { animation-duration: 28s !important; } } /* Edge fade gradient (oculta saltos en bordes) */ html body section.section-paper#resultados { position: relative; overflow: hidden; } html body section.section-paper#resultados > .container { position: relative; } html body section.section-paper#resultados > .container::before, html body section.section-paper#resultados > .container::after { content: ''; position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 3; pointer-events: none; } html body section.section-paper#resultados > .container::before { left: 0; background: linear-gradient(90deg, var(--ink-85) 10%, transparent); } html body section.section-paper#resultados > .container::after { right: 0; background: linear-gradient(-90deg, var(--ink-85) 10%, transparent); } /* Remove drag indicator */ html body section.section-paper#resultados .container::after, html body section.section-paper#resultados .vid-controls { display: none !important; } /* Pero re-mostramos el container::after que es el gradient · ojo */ html body section.section-paper#resultados > .container::after { display: block !important; content: '' !important; font-size: 0 !important; letter-spacing: 0 !important; text-transform: none !important; color: transparent !important; margin-top: 0 !important; } /* Pause animation con reduced motion */ @media (prefers-reduced-motion: reduce) { html body section.section-paper#resultados .vid-carousel { animation: none !important; } } /* ───── FIX 2 · IDE V2 · títulos protagonistas, números secundarios ───── */ html body section.ide-v2 .ide-num { font-family: var(--mono) !important; font-style: normal !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.32em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.4) !important; margin: 0 0 16px !important; line-height: 1 !important; display: block !important; letter-spacing: 0.32em !important; } /* Insert "CAPÍTULO" prefix via pseudo (visual hint) */ html body section.ide-v2 .ide-num::before { content: 'CAPÍTULO '; color: var(--red-soft); font-weight: 600; letter-spacing: 0.26em; } /* H3 grande en naranja como protagonista */ html body section.ide-v2 .ide-card h3 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(26px, 2.6vw, 38px) !important; line-height: 1.08 !important; letter-spacing: -0.022em !important; color: var(--red-soft) !important; margin: 0 0 24px !important; text-wrap: balance; max-width: 18ch; } html body section.ide-v2 .ide-card p { font-size: 16px !important; line-height: 1.72 !important; color: rgba(255, 255, 255, 0.86) !important; max-width: 58ch; } /* Top red rule expansible */ html body section.ide-v2 .ide-card::before { width: 48px !important; } html body section.ide-v2 .ide-card:hover h3 { color: var(--red) !important; } /* ───── FIX 3 · MENTORS · uniforme 3-col, todos iguales ───── */ html body section.mentors-v2 .mv2-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } @media (max-width: 960px) { html body section.mentors-v2 .mv2-grid { grid-template-columns: 1fr !important; max-width: 480px !important; margin: 0 auto !important; } } /* Reset: todas las cards iguales (no más first-child grande) */ html body section.mentors-v2 .mv2-grid > .mv2-card, html body section.mentors-v2 .mv2-grid > .mv2-card:first-child { padding: 40px 32px !important; background: #ffffff !important; border: 1px solid rgba(20, 18, 14, 0.08) !important; border-radius: 16px !important; box-shadow: 0 1px 0 rgba(20, 18, 14, 0.04), 0 24px 56px -16px rgba(20, 18, 14, 0.08) !important; } html body section.mentors-v2 .mv2-grid > .mv2-card:first-child .mv2-name { font-size: clamp(22px, 2vw, 26px) !important; } html body section.mentors-v2 .mv2-card .mv2-name { font-size: clamp(22px, 2vw, 26px) !important; margin: 0 0 14px !important; } html body section.mentors-v2 .mv2-card .mv2-credentials { font-size: 14.5px !important; line-height: 1.65 !important; max-width: none !important; } /* ───── FIX 4 · ENCAJE V3 · CREAM con texto negro + naranja resalte ───── */ html body section.encaje-v3 { background: #fbf8f3 !important; color: var(--ink-90) !important; } html body section.encaje-v3::after { background: radial-gradient(ellipse at 90% 90%, rgba(236, 68, 41, 0.04), transparent 50%) !important; } html body section.encaje-v3 .ev3-head { text-align: center !important; margin: 0 auto clamp(56px, 7vw, 88px) !important; max-width: 800px !important; } html body section.encaje-v3 .ev3-kicker { background: rgba(236, 68, 41, 0.08) !important; border: 1px solid rgba(236, 68, 41, 0.24) !important; color: var(--red-deep) !important; } html body section.encaje-v3 .ev3-kicker::before { background: var(--red-deep) !important; } html body section.encaje-v3 h2 { color: var(--ink-90) !important; font-size: clamp(34px, 4.6vw, 56px) !important; } html body section.encaje-v3 h2 em { color: var(--red-deep) !important; } html body section.encaje-v3 .ev3-table { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; background: #ffffff !important; border-radius: 18px !important; overflow: hidden !important; border: 1px solid rgba(20, 18, 14, 0.08) !important; box-shadow: 0 1px 0 rgba(20, 18, 14, 0.04), 0 36px 80px -20px rgba(20, 18, 14, 0.12) !important; max-width: 1080px !important; margin: 0 auto !important; } @media (max-width: 760px) { html body section.encaje-v3 .ev3-table { grid-template-columns: 1fr !important; } } html body section.encaje-v3 .ev3-col { background: #ffffff !important; border: 0 !important; border-radius: 0 !important; padding: 48px 44px !important; box-shadow: none !important; position: relative !important; } html body section.encaje-v3 .ev3-col:hover { background: #ffffff !important; transform: none !important; box-shadow: none !important; } html body section.encaje-v3 .ev3-col-yes { border-top: 4px solid var(--red) !important; } html body section.encaje-v3 .ev3-col-no { border-top: 4px solid rgba(20, 18, 14, 0.2) !important; border-left: 1px solid rgba(20, 18, 14, 0.08) !important; } @media (max-width: 760px) { html body section.encaje-v3 .ev3-col-no { border-left: 0 !important; border-top: 1px solid rgba(20, 18, 14, 0.08) !important; border-top: 4px solid rgba(20, 18, 14, 0.2) !important; } } html body section.encaje-v3 .ev3-col-tag { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: var(--mono) !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; padding: 6px 14px !important; border-radius: 999px !important; margin-bottom: 22px !important; } html body section.encaje-v3 .ev3-col-yes .ev3-col-tag { color: var(--red-deep) !important; background: rgba(236, 68, 41, 0.08) !important; border: 1px solid rgba(236, 68, 41, 0.22) !important; } html body section.encaje-v3 .ev3-col-no .ev3-col-tag { color: var(--ink-50) !important; background: rgba(20, 18, 14, 0.05) !important; border: 1px solid rgba(20, 18, 14, 0.10) !important; } html body section.encaje-v3 .ev3-col h3 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(24px, 2.2vw, 30px) !important; line-height: 1.1 !important; letter-spacing: -0.016em !important; color: var(--ink-90) !important; margin: 0 0 28px !important; text-wrap: balance; } html body section.encaje-v3 .ev3-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 16px !important; } html body section.encaje-v3 .ev3-list li { font-family: var(--sans) !important; font-size: 16px !important; line-height: 1.65 !important; color: var(--ink-80) !important; padding: 0 0 0 32px !important; position: relative !important; min-height: 32px; } html body section.encaje-v3 .ev3-col-yes .ev3-list li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 4px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: var(--red) !important; } html body section.encaje-v3 .ev3-col-yes .ev3-list li::after { content: ''; position: absolute; left: 5px; top: 11px; width: 12px; height: 6px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(-45deg); } html body section.encaje-v3 .ev3-col-no .ev3-list li::before { content: '×' !important; position: absolute !important; left: 0 !important; top: 4px !important; width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(20, 18, 14, 0.08) !important; color: var(--ink-50) !important; font-weight: 700 !important; font-size: 16px !important; font-family: var(--sans) !important; border-radius: 50% !important; } /* List dots (mantiene la clase original .dot por compatibilidad) */ html body section.encaje-v3 .dot { display: none !important; } /* ───── FIX 5 · EYEBROW TAGS · "4 semanas en directo" / "12 meses de I+D externo" agrandar ───── */ /* En Weeks Roadmap el kicker es la fase corta */ html body section.weeks-roadmap .wr-kicker { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(28px, 3vw, 40px) !important; font-weight: 400 !important; letter-spacing: -0.014em !important; text-transform: none !important; color: var(--red-soft) !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 24px !important; display: block !important; } html body section.weeks-roadmap .wr-kicker::before { display: none !important; } /* En IDE V2 igual */ html body section.ide-v2 .ide-kicker { font-family: var(--serif) !important; font-style: italic !important; font-size: clamp(28px, 3vw, 40px) !important; font-weight: 400 !important; letter-spacing: -0.014em !important; text-transform: none !important; color: var(--red-soft) !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 24px !important; display: block !important; } html body section.ide-v2 .ide-kicker::before { display: none !important; } /* ───── FIX 6 · STRUCTURE de bloques de texto largos ───── */ /* Body text en cards/listas: más legible */ html body section.dolor-v2 .dv2-card p, html body section.weeks-roadmap .wr-card p:not(.wr-tagline), html body section.ide-v2 .ide-card p, html body section.guarantee-v2 .gv2-content p, html body section.faq-v2 .fv2-ans p { font-size: 16px !important; line-height: 1.72 !important; letter-spacing: -0.002em !important; margin: 0 0 16px !important; max-width: 60ch !important; } /* "Vid quote" en testimonios */ html body section.section-paper#resultados .vid-quote { font-size: clamp(17px, 1.4vw, 21px) !important; line-height: 1.5 !important; letter-spacing: -0.005em !important; } /* Encaje list items mejor jerarquía */ html body section.encaje-v3 .ev3-list li { letter-spacing: -0.002em !important; } /* Headings global · readability */ html body h1, html body h2, html body h3 { letter-spacing: -0.022em !important; text-wrap: balance; } /* Bigger min-size for paragraphs · accessibility */ html body p { font-size: clamp(15.5px, 1.1vw, 16.5px) !important; } /* Headings inside dark cards · ensure visibility */ html body section.dolor-v2 .dv2-card h3, html body section.weeks-roadmap .wr-card h3 { font-size: clamp(22px, 2.1vw, 28px) !important; line-height: 1.12 !important; } /* END · 6 fixes frontend-design */ /* ═══════════════════════════════════════════════════════════════════ PATCH 7 · DOLOR-V2 redesign editorial Eliminar 01/02/03 prominentes. Las frases h3 ("El caballo de Troya", "Automatizar el caos", "El ruido y el coste") pasan a ser TITULARES EDITORIALES en naranja, protagonistas absolutos. ═══════════════════════════════════════════════════════════════════ */ /* Layout del wrap más respirado */ html body section.dolor-v2 { background: var(--ink-92, #0a0a0a) !important; padding: clamp(96px, 12vw, 160px) 24px !important; } html body section.dolor-v2 .dv2-wrap { max-width: 1200px !important; margin: 0 auto !important; } html body section.dolor-v2 .dv2-head { text-align: center !important; max-width: 880px !important; margin: 0 auto clamp(64px, 7vw, 96px) !important; } html body section.dolor-v2 .dv2-head h2 { font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; font-size: clamp(34px, 4.8vw, 60px) !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; color: var(--cream-soft, #fbf8f3) !important; text-wrap: balance !important; } html body section.dolor-v2 .dv2-head h2 em { font-style: italic !important; color: var(--red-soft, #ff5a3c) !important; } /* Grid 3-col uniforme */ html body section.dolor-v2 .dv2-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(20px, 2.2vw, 32px) !important; align-items: stretch !important; } @media (max-width: 900px) { html body section.dolor-v2 .dv2-grid { grid-template-columns: 1fr !important; gap: 18px !important; } } /* Cards: alto contraste, posicionamiento interno editorial */ html body section.dolor-v2 .dv2-card { position: relative !important; background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 4px !important; padding: clamp(40px, 4vw, 56px) clamp(28px, 2.8vw, 40px) !important; display: flex !important; flex-direction: column !important; gap: 0 !important; overflow: hidden !important; transition: border-color .4s ease, transform .4s ease !important; } html body section.dolor-v2 .dv2-card::before { content: "" !important; position: absolute !important; top: 0; left: 0; right: 0; height: 2px !important; background: linear-gradient(90deg, transparent 0%, var(--red-soft, #ff5a3c) 50%, transparent 100%) !important; opacity: 0 !important; transition: opacity .5s ease !important; } html body section.dolor-v2 .dv2-card:hover { border-color: rgba(255,90,60,0.35) !important; } html body section.dolor-v2 .dv2-card:hover::before { opacity: 1 !important; } /* ELIMINAR el 01/02/03 grandote */ html body section.dolor-v2 .dv2-card .dv2-num { display: none !important; } /* Icono más pequeño, decorativo, no protagonista */ html body section.dolor-v2 .dv2-card .dv2-icon { width: 28px !important; height: 28px !important; color: rgba(255,90,60,0.55) !important; margin: 0 0 22px 0 !important; stroke-width: 1.4 !important; opacity: 0.85 !important; } /* TITULAR EDITORIAL — la frase es la PROTAGONISTA */ html body section.dolor-v2 .dv2-card h3 { font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; font-style: italic !important; font-size: clamp(30px, 3vw, 42px) !important; line-height: 1.02 !important; letter-spacing: -0.02em !important; color: var(--red-soft, #ff5a3c) !important; margin: 0 0 24px 0 !important; text-wrap: balance !important; } /* Separador sutil después del titular */ html body section.dolor-v2 .dv2-card h3::after { content: "" !important; display: block !important; width: 36px !important; height: 1px !important; background: rgba(255,255,255,0.18) !important; margin: 22px 0 4px 0 !important; } /* Body text refinado */ html body section.dolor-v2 .dv2-card p { font-family: 'Lato', sans-serif !important; font-size: 15.5px !important; line-height: 1.65 !important; color: rgba(251,248,243,0.78) !important; margin: 0 0 14px 0 !important; letter-spacing: -0.002em !important; } html body section.dolor-v2 .dv2-card p:last-child { margin-bottom: 0 !important; } html body section.dolor-v2 .dv2-card p strong { color: var(--cream-soft, #fbf8f3) !important; font-weight: 700 !important; } /* Esquina inferior: marca editorial sutil */ html body section.dolor-v2 .dv2-card::after { content: "" !important; position: absolute !important; bottom: 18px !important; right: 18px !important; width: 6px !important; height: 6px !important; background: var(--red-soft, #ff5a3c) !important; border-radius: 50% !important; opacity: 0.5 !important; } /* ═══════════════════════════════════════════════════════════════════ PATCH 8 v2 · OVERVIEW-V3 (LAS 2 FASES DEL BOOTCAMP) REDISEÑO RADICAL — disciplina UI/UX-pro-max + editorial-premium ─────────────────────────────────────────────────────────────────── PRINCIPIOS APLICADOS: · Respira (whitespace generoso, no apilar) · Una sola idea por bloque visual · Jerarquía tipográfica clara: TAG → TÍTULO → DESC → LISTA → META · Asimetría intencional (cabecera 5col + contenido 7col) · Densidad legible: line-height ≥1.65, max-width 50–58ch · Stack vertical de las 2 fases con separador editorial entre ellas · 0 decoración gratuita: cada elemento gráfico cumple función ═══════════════════════════════════════════════════════════════════ */ /* ─────────── FRAME BASE ─────────── */ html body section.overview-v3 { background: #fbf8f3 !important; background-image: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(236,68,41,0.035) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(10,10,10,0.02) 0%, transparent 70%) !important; padding: clamp(120px, 14vw, 180px) clamp(20px, 4vw, 56px) !important; position: relative !important; overflow: hidden !important; } html body section.overview-v3::before { content: "" !important; position: absolute !important; top: 0; left: 0; right: 0; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(10,10,10,0.10) 50%, transparent 100%) !important; } html body section.overview-v3::after { display: none !important; } html body section.overview-v3 .ov3-wrap { max-width: 1180px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; } html body section.overview-v3 .ov3-wrap::before { display: none !important; } /* ─────────── CABECERA DE SECCIÓN ─────────── */ html body section.overview-v3 .ov3-head { text-align: center !important; max-width: 820px !important; margin: 0 auto clamp(96px, 10vw, 144px) !important; position: relative !important; } html body section.overview-v3 .ov3-kicker { display: inline-flex !important; align-items: center !important; gap: 14px !important; font-family: 'Lato', sans-serif !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: 0.32em !important; text-transform: uppercase !important; color: var(--red-deep, #c93521) !important; margin-bottom: 32px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } html body section.overview-v3 .ov3-kicker::before, html body section.overview-v3 .ov3-kicker::after { content: "" !important; display: inline-block !important; width: 32px !important; height: 1px !important; background: var(--red-deep, #c93521) !important; position: static !important; margin: 0 !important; } html body section.overview-v3 .ov3-head h2 { font-family: 'DM Serif Display', serif !important; font-weight: 400 !important; font-size: clamp(38px, 5.6vw, 68px) !important; line-height: 1.04 !important; letter-spacing: -0.028em !important; color: #0a0a0a !important; margin: 0 0 28px !important; text-wrap: balance !important; } html body section.overview-v3 .ov3-head h2 em { font-style: italic !important; color: var(--red-deep, #c93521) !important; } html body section.overview-v3 .ov3-intro { font-family: 'Lato', sans-serif !important; font-size: clamp(17px, 1.35vw, 20px) !important; line-height: 1.6 !important; color: rgba(10,10,10,0.7) !important; max-width: 640px !important; margin: 0 auto !important; letter-spacing: -0.003em !important; font-weight: 400 !important; } html body section.overview-v3 .ov3-intro strong { color: #0a0a0a !important; font-weight: 700 !important; } /* ─────────── STACK VERTICAL DE LAS 2 FASES ─────────── */ html body section.overview-v3 .ov3-phases { position: relative !important; display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 0 !important; align-items: stretch !important; padding-top: 0 !important; max-width: 1180px !important; margin: 0 auto !important; } html body section.overview-v3 .ov3-phases::before, html body section.overview-v3 .ov3-phases::after { display: none !important; } /* Divider HTML reaprovechado como SEPARADOR EDITORIAL entre fases */ html body section.overview-v3 .ov3-divider { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: auto !important; min-height: 0 !important; background: transparent !important; position: relative !important; margin: clamp(72px, 8vw, 112px) 0 !important; padding: 0 !important; } html body section.overview-v3 .ov3-divider::before { content: "" !important; position: absolute !important; left: 0; right: 0; top: 50%; height: 1px !important; background: linear-gradient(90deg, transparent 0%, rgba(10,10,10,0.18) 50%, transparent 100%) !important; } html body section.overview-v3 .ov3-divider::after { content: "★" !important; position: relative !important; background: #fbf8f3 !important; padding: 0 24px !important; font-family: 'DM Serif Display', serif !important; font-size: 18px !important; color: var(--red-deep, #c93521) !important; line-height: 1 !important; z-index: 1 !important; } /* ─────────── CADA FASE = PLIEGO EDITORIAL DE PÁGINA COMPLETA ─────────── */ html body section.overview-v3 .ov3-phase { position: relative !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; display: grid !important; grid-template-columns: 5fr 7fr !important; gap: clamp(48px, 6vw, 96px) !important; align-items: start !important; transition: none !important; overflow: visible !important; } html body section.overview-v3 .ov3-phase:hover { transform: none !important; box-shadow: none !important; } html body section.overview-v3 .ov3-phase::before { display: none !important; } /* Número marca de agua MUY sutil detrás del título */ html body section.overview-v3 .ov3-phase::after { font-family: 'DM Serif Display', serif !important; font-style: italic !important; font-size: clamp(180px, 22vw, 280px) !important; font-weight: 400 !important; position: absolute !important; top: -60px !important; left: -20px !important; line-height: 1 !important; color: rgba(10,10,10,0.03) !important; pointer-events: none !important; z-index: 0 !important; letter-spacing: -0.05em !important; } html body section.overview-v3 .ov3-phase:nth-of-type(1)::after, html body section.overview-v3 .ov3-phase:first-of-type::after { content: "I"; } html body section.overview-v3 .ov3-phase:nth-of-type(2)::after, html body section.overview-v3 .ov3-phase:last-of-type::after { content: "II"; } html body section.overview-v3 .ov3-phase > * { position: relative !important; z-index: 1 !important; } /* ─────────── COLUMNA IZQUIERDA: CABECERA DE FASE ─────────── */ /* Como no podemos modificar HTML, asignamos a los hijos por orden de aparición usando grid-area implícita. La estructura HTML real es: