@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-bold.woff2') format('woff2'); font-weight:600 900; font-display:swap; } @font-face { font-family:'Fraunces'; src:url('../fonts/fraunces-italic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; } @font-face { font-family:'Karla'; src:url('../fonts/karla.woff2') format('woff2'); font-weight:400 600; font-display:swap; } @font-face { font-family:'Space Mono'; src:url('../fonts/spacemono-400.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Space Mono'; src:url('../fonts/spacemono-700.woff2') format('woff2'); font-weight:700; font-display:swap; } :root { /* v3.1 contrast pass: wider luminance steps between panel tones, a brighter/more saturated light band, hotter gold, darker ink — so bands read as distinct rather than blending into a single grey mid-tone. */ --bg:#0A0A0A; --bg-raised:#1A1A1A; --bg-raised-2:#242424; --light:#F7F7F5; --light-raised:#FBDCCB; --ink:#141414; --paper:#FAFAF8; /* --muted-d brightened to near-white per client feedback: the grey secondary text on dark sections (subtitle, quotes, plan fine print) was "casi no se ve" — this is used everywhere that text was too dim to read comfortably. --muted-l (secondary text on the light bands) wasn't part of that complaint — dark grey on a light background reads fine — so it's untouched. */ --muted-d:#F0EEEA; --muted-l:#57534E; --gold:#F9642D; --gold-hot:#FF8656; --gold-deep:#B8380F; --line-d:rgba(249,100,45,.32); --line-l:rgba(184,56,15,.35); --display:'Fraunces', Georgia, serif; --body:'Karla', system-ui, sans-serif; --mono:'Space Mono', ui-monospace, monospace; color-scheme: dark; } * { box-sizing:border-box; } /* NOTE: no global `scroll-behavior:smooth` on — that makes the browser animate every scroll, including normal wheel/trackpad scrolling, which reads as sluggish. Smooth scroll is instead applied only to the CTA's jump-to-#planes click, in tut-script.js, leaving normal scrolling at native speed. */ /* Mobile horizontal-scroll fix: overflow-x:hidden on body alone doesn't reliably stop iOS Safari's rubber-band scroll from revealing content that overflows past the viewport — needs it too. */ html { overflow-x: hidden; } body { margin:0; background:var(--bg); color:var(--paper); font-family:var(--body); font-size:18.5px; line-height:1.62; overflow-x:hidden; } /* CSS Grid items default to min-width:auto, meaning a grid column won't shrink smaller than its content's longest unbreakable word — on a narrow phone screen, a label like "MEJOR COMUNICACIÓN" in the stat row (or any grid) can force its column wider than the viewport, pushing the whole page into horizontal scroll. This is what the client hit. */ .plans-grid > *, .callout .stat-row > *, .benefits-grid > *, .icon-row > * { min-width: 0; overflow-wrap: break-word; } /* Divi wraps every et_pb_code module in its own section/row/column divs, each carrying Divi's own default white background + max-width + padding. Those defaults were showing through as white bands around/between our own full-bleed dark/light sections. Strip them so our own
backgrounds are the only backgrounds on the page. */ .et_pb_section, .et_pb_row, .et_pb_column, .et_pb_code, .et_pb_module { background: transparent !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } img,svg { max-width:100%; display:block; } a { color:inherit; } h1,h2,h3 { font-family:var(--display); font-weight:900; text-wrap:balance; margin:0; } /* Client flagged section headings on dark bands as barely legible — heavy Fraunces at these sizes reads thin/washed-out in white against black. Rather than leave it to inheritance, force the brand orange directly on every heading inside a dark section for guaranteed contrast. Scoped to .band-dark specifically so light-band headings (already dark-on-light, unaffected) are untouched. This sits early in the file on purpose: the .hero h1 and .final-cta h2 overrides further down share this same specificity (one class + one type) and must come later in source order to keep winning and stay white, per that earlier, separate fix. */ .band-dark h1, .band-dark h2, .band-dark h3 { color: var(--gold); } .wrap { max-width:1280px; margin:0 auto; padding:0 clamp(24px,6vw,72px); } .prose { max-width:60ch; } .prose p { margin:0 0 1.1em; } .prose p:last-child { margin-bottom:0; } .band-dark { background:var(--bg); color:var(--paper); } .band-light { background:var(--light); color:var(--ink); } .band-dark .tag { color:var(--gold); } .band-light .tag { color:var(--gold-deep); } .tag { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; } .rule-d { border-top:1px solid var(--line-d); } .rule-l { border-top:1px solid var(--line-l); } .sec { padding:clamp(46px,7.5vw,80px) 0; } .sec-head { margin-bottom:30px; text-align:center; } .sec-head h2 { font-size:clamp(1.6rem,3.6vw,2.3rem); margin-top:10px; } .sec-head.left { text-align:left; } /* Client flagged left-aligned titles (El problema, Testimonios) as looking wrong on mobile — that left-align was paired with a two-column desktop layout, but on mobile everything stacks to one column anyway, so a left title above centered/full-width stacked content reads as misaligned. Recenter on narrow screens only; desktop is unaffected. */ @media (max-width: 760px) { .sec-head.left { text-align: center; } .wrap.prose { text-align: center; } } .cta-btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--bg); background:linear-gradient(135deg,var(--gold-hot),var(--gold)); padding:16px 28px; border:1px solid var(--gold-hot); box-shadow:0 0 0 rgba(255,134,86,0); transition:box-shadow .25s ease, transform .2s ease; } .cta-btn:hover { box-shadow:0 0 26px rgba(255,134,86,.45); transform:translateY(-1px); } a:focus-visible, summary:focus-visible, .cta-btn:focus-visible { outline:2px solid var(--gold-hot); outline-offset:3px; } /* header */ .site-header { display:flex; align-items:center; justify-content:center; padding:22px clamp(20px,5vw,56px); } .wordmark { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; } .wordmark svg { width:22px; height:22px; } .wordmark b { color:var(--gold-hot); font-weight:700; } .wordmark-logo { height:80px; width:auto; } /* two-tone hero headline */ .hero h1 .accent { color:var(--gold-hot); } /* ---- hero / stage ---- */ .hero { position:relative; padding:clamp(36px,6vw,64px) 0 clamp(56px,9vw,96px); } /* Stacked hero: centered copy on top, a wide standard-aspect video below, CTA underneath — replaces the earlier side-by-side split, which assumed a portrait phone-shot video. The actual hero video is landscape, so a wide centered player reads far better than squeezing 16:9 into a narrow side column. */ .hero .wrap.hero-stack { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(28px,4.5vw,40px); } .hero-copy { max-width:820px; } /* Client flagged the plain (non-accent) portion of this headline as looking grey/low-contrast — hardcoding --paper here guarantees it regardless of any inheritance path, same fix applied to .final-cta h2 earlier for the same class of complaint. */ .hero h1 { font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.08; margin:16px 0 20px; color:var(--paper); } .hero .subtitle { font-family:var(--display); font-style:italic; font-weight:500; color:var(--muted-d); font-size:1.2rem; max-width:46ch; margin:0 auto; } .stage { position:relative; width:100%; margin:0 auto; } .stage--standard { max-width:900px; } .stage-glow { position:absolute; left:50%; top:50%; width:520px; height:520px; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,134,86,.30) 0%, rgba(255,134,86,.12) 32%, rgba(255,134,86,0) 68%); filter:blur(4px); pointer-events:none; animation: breathe 4.5s ease-in-out infinite; } @keyframes breathe { 0%,100% { opacity:.85; transform:translate(-50%,-50%) scale(1); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.09); } } @media (prefers-reduced-motion: reduce) { .stage-glow { animation:none; } } /* Standard display: a clean 16:9 rectangular frame, no device chrome — the earlier phone-bezel/notch treatment assumed vertical phone-shot footage, but the actual hero video is landscape, so it now reads as a normal video player rather than a mocked-up device. */ .video-frame { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:14px; background:var(--bg-raised); border:1px solid rgba(255,134,86,.4); box-shadow:0 0 60px rgba(255,134,86,.18), 0 20px 50px rgba(0,0,0,.5); cursor:pointer; } /* Frame and thumbnail are both landscape now, so cover just does a mild crop to fill the frame edge-to-edge like a normal video player — no more drastic portrait-vs-landscape mismatch to work around. */ .video-frame img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; filter:saturate(.92) brightness(.85); } .video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .play-ring1, .play-ring2 { position:absolute; border-radius:50%; border:1px solid rgba(255,134,86,.45); } .play-ring1 { width:88px; height:88px; animation:pulse 2.6s ease-out infinite; } .play-ring2 { width:88px; height:88px; } @keyframes pulse { 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.45); opacity:0; } } .play-core { position:relative; width:64px; height:64px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-hot), var(--gold) 70%); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.4); } .play-core svg { width:18px; height:18px; fill:#141414; margin-left:3px; } @media (prefers-reduced-motion: reduce) { .play-ring1 { animation:none; } } /* No margin-top here — .hero-stack's flex `gap` already spaces it from the video above; this is now a direct flex child, not a column child. */ /* ---- checklist ---- */ .checklist { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px; } .checklist li { display:flex; gap:13px; align-items:center; font-size:1.03rem; } .band-dark .checklist .tick { color:var(--gold-hot); } .band-light .checklist .tick { color:var(--gold-deep); } .checklist .tick { font-family:var(--mono); flex:none; } /* Icon-chip treatment: every tick/arrow glyph becomes a small circular badge instead of a bare character, giving the page the icon-forward texture without hand-drawing a different pictogram per item. */ .tick, .benefits-grid .tick { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:.7rem; flex:none; } .band-dark .tick { border:1px solid var(--line-d); background:var(--bg-raised); } .band-light .tick { border:1px solid var(--line-l); background:var(--light-raised); } .tick--lg { width:46px; height:46px; font-size:1.05rem; } /* Horizontal icon row (Debajo del vídeo) */ .icon-row { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:28px; text-align:center; } @media (max-width:760px) { .icon-row { grid-template-columns:1fr 1fr; } } @media (max-width:480px) { .icon-row { grid-template-columns:1fr; } } .icon-row__item { display:flex; flex-direction:column; align-items:center; gap:12px; } .icon-row__item p { font-size:.88rem; color:var(--muted-d); margin:0; } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,84px); align-items:center; } @media (max-width:760px) { .two-col { grid-template-columns:1fr; } } .benefits-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px 48px; list-style:none; margin:30px 0 0; padding:0; } @media (max-width:980px) { .benefits-grid { grid-template-columns:1fr 1fr; } } @media (max-width:640px) { .benefits-grid { grid-template-columns:1fr; } } .benefits-grid li { display:flex; gap:12px; } .callout { padding:clamp(24px,4.5vw,42px); margin-top:32px; } .band-light .callout { background:var(--light-raised); } .band-dark .callout { background:var(--bg-raised); } .callout--quote { margin-top:0; border:1px solid var(--line-d); } .band-light .callout--quote { border-color:var(--line-l); background:var(--light-raised); } .callout .stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; padding-top:20px; } .callout .stat-row.stat-row--5 { grid-template-columns:repeat(5,1fr); } .band-light .callout .stat-row { border-top:1px solid var(--line-l); } .band-dark .callout .stat-row { border-top:1px solid var(--line-d); } @media (max-width:720px) { .callout .stat-row, .callout .stat-row.stat-row--5 { grid-template-columns:1fr 1fr; } } .callout .stat-row div { font-family:var(--mono); font-weight:700; font-size:.78rem; letter-spacing:.03em; } .band-light .callout .stat-row div { color:var(--gold-deep); } .band-dark .callout .stat-row div { color:var(--gold); } .diff-quote { font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(1.35rem,3vw,1.8rem); color:var(--gold-hot); text-wrap:balance; max-width:44ch; margin:0 auto 24px; text-align:center; } /* ---- testimonial reel ---- */ .reel-wrap { position:relative; } .reel-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:38px; height:38px; border-radius:50%; background:var(--bg-raised); border:1px solid var(--line-d); color:var(--paper); font-size:1.2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease, border-color .2s ease, transform .2s ease; } .reel-arrow:hover { background:var(--gold); color:var(--bg); border-color:var(--gold); } .reel-arrow--prev { left:-6px; } .reel-arrow--next { right:-6px; } @media (max-width:760px) { .reel-arrow { display:none; } } .reel { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x proximity; padding:34px 0 10px; margin-top:6px; -webkit-overflow-scrolling:touch; } .reel::-webkit-scrollbar { height:6px; } .reel::-webkit-scrollbar-thumb { background:var(--line-d); } .reel-card { flex:none; scroll-snap-align:start; width:min(230px, 64vw); aspect-ratio:9/16; background:linear-gradient(165deg, var(--bg-raised-2), var(--bg-raised)); border:1px solid var(--line-d); position:relative; } .reel-card.has-video { padding: 0; border-radius: 12px; overflow: hidden; border-color: rgba(249,100,45,.55); box-shadow: 0 10px 26px rgba(0,0,0,.45); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; } .reel-card.has-video:hover, .reel-card.has-video:focus-within { transform: translateY(-6px) scale(1.015); border-color: var(--gold-hot); box-shadow: 0 22px 44px rgba(0,0,0,.55), 0 0 32px rgba(255,134,86,.22); } /* Testimonials are YouTube-hosted now (client uploaded them himself) — each card is a thumbnail + play button that swaps in a real YouTube iframe on click, same click-to-embed pattern as the hero video. No name label — client asked for the videos with no titles shown. */ .reel-card.has-video img, .reel-card.has-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; border: 0; } .reel-card.has-video img { filter: saturate(.92) brightness(.75); } .reel-card__play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; } .reel-card__play svg { width: 46px; height: 46px; padding: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--gold-hot), var(--gold) 70%); fill: #141414; margin-left: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.4); } @media (prefers-reduced-motion: reduce) { .reel-card.has-video:hover { transform: none; } } /* Footer logo */ .site-footer { display: flex; align-items: center; justify-content: center; gap: 10px; } .footer-logo { border-radius: 50%; opacity: .85; } /* Compromiso photo of Kevin */ .compromiso-photo { aspect-ratio: 4/5; overflow: hidden; border: 1px solid var(--line-d); } .compromiso-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; image-orientation: from-image; } @media (max-width: 760px) { .compromiso-photo { margin-top: 24px; max-width: 340px; margin-left: auto; margin-right: auto; } } /* Kevin photos used in the diferenciación and intro sections */ .two-col--photo { align-items: stretch; } .person-photo { aspect-ratio: 3/4; overflow: hidden; } .person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; image-orientation: from-image; transition: transform .6s ease; } .person-photo:hover img { transform: scale(1.05); } .band-dark .person-photo { border: 1px solid var(--line-d); } .person-photo--light { border: 1px solid var(--line-l); } @media (max-width: 760px) { .person-photo { margin-top: 24px; max-width: 360px; margin-left: auto; margin-right: auto; } } /* ---- FAQ ---- */ .faq-item { padding:18px 0; } .band-light .faq-item { border-top:1px solid var(--line-l); } .band-light .faq-item:last-child { border-bottom:1px solid var(--line-l); } .faq-item summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--display); font-weight:600; font-size:1.12rem; } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary .ind { font-family:var(--mono); color:var(--gold-deep); flex:none; } .faq-item p { color:var(--muted-l); margin:14px 0 0; max-width:64ch; } /* ---- compromiso ---- */ .compromiso { border-top:1px solid var(--gold); border-bottom:1px solid var(--line-d); background:var(--bg-raised); } /* ---- pricing ---- */ .plans-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-d); border:1px solid var(--line-d); margin-top:36px; } @media (max-width:980px) { .plans-grid { grid-template-columns:1fr 1fr; } } @media (max-width:560px) { .plans-grid { grid-template-columns:1fr; } } .plan { background:var(--bg-raised-2); padding:26px 22px 28px; display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease, opacity .5s ease; } .plan:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.4); } .plan .plan-eyebrow { font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-d); min-height:14px; } .plan .plan-name { font-family:var(--display); font-weight:600; font-size:1.08rem; margin:8px 0 4px; } .plan .plan-price { font-family:var(--mono); font-weight:700; font-size:1.85rem; color:var(--gold); font-variant-numeric:tabular-nums; margin-bottom:18px; } .plan ul { list-style:none; margin:0 0 24px; padding:0; flex:1; display:grid; gap:10px; } .plan ul li { font-size:.87rem; display:flex; gap:8px; } .plan ul li.no { color:var(--muted-d); } .plan ul li .m { font-family:var(--mono); flex:none; } .plan .cta-btn { text-align:center; justify-content:center; font-size:.74rem; padding:13px 16px; } .plan.recommended { background:linear-gradient(165deg, #241510, #1A1A1A); border-top:2px solid var(--gold-hot); margin-top:-14px; padding-top:40px; position:relative; z-index:1; box-shadow:0 0 40px rgba(255,134,86,.12); } .plan.recommended .plan-eyebrow { color:var(--gold-hot); } .plan.recommended .plan-price { color:var(--gold-hot); } /* "The Experience" — deliberately made loud (client's word: "llamativa"). No price shown anywhere here, by design — it exists only to flag that this tier exists, is unavailable right now, and can be asked about via WhatsApp. Sits below the 4 plan buttons, same position as before, just no longer a quiet dashed-border footnote. */ .experience-banner { margin-top:28px; padding:clamp(22px,4vw,32px); display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:linear-gradient(135deg, var(--bg-raised-2), var(--bg-raised)); border:2px solid var(--gold); border-radius:14px; box-shadow:0 0 0 rgba(249,100,45,0); animation: experience-glow 3s ease-in-out infinite; } @keyframes experience-glow { 0%,100% { box-shadow:0 0 20px rgba(249,100,45,.15); } 50% { box-shadow:0 0 36px rgba(249,100,45,.35); } } @media (prefers-reduced-motion: reduce) { .experience-banner { animation:none; box-shadow:0 0 24px rgba(249,100,45,.2); } } .experience-banner__badge { flex:none; align-self:flex-start; font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bg); background:var(--gold-hot); padding:6px 12px; border-radius:999px; } .experience-banner__body { flex:1 1 320px; } .experience-banner__body h3 { font-family:var(--display); font-weight:900; font-size:1.5rem; color:var(--paper); margin:0 0 8px; } .experience-banner__body p { margin:0 0 6px; color:var(--muted-d); font-size:.92rem; } .experience-banner__status { font-family:var(--mono); font-size:.78rem; letter-spacing:.02em; color:var(--gold-hot); font-weight:700; } .experience-banner__cta { flex:none; } @media (max-width:700px) { .experience-banner { flex-direction:column; align-items:stretch; text-align:center; } .experience-banner__badge { align-self:center; } .experience-banner__cta { width:100%; justify-content:center; } } /* ---- final cta ---- */ .final-cta { position:relative; text-align:center; padding:clamp(60px,9vw,104px) 0; } .final-cta::before { content:""; position:absolute; left:50%; top:20%; width:460px; height:460px; transform:translateX(-50%); background:radial-gradient(circle, rgba(255,134,86,.16) 0%, transparent 65%); pointer-events:none; } .final-cta .wrap { position:relative; } .final-cta .prose { max-width:50ch; margin:0 auto 26px; color:var(--muted-d); } .final-cta h2 { font-size:clamp(1.7rem,4vw,2.5rem); margin-bottom:24px; color:var(--paper); } .trust-line { display:flex; align-items:center; justify-content:center; gap:8px; margin:18px 0 0; font-family:var(--mono); font-size:.76rem; letter-spacing:.03em; color:var(--muted-d); } .trust-line svg { width:15px; height:15px; stroke:var(--gold); stroke-width:1.6; fill:none; flex:none; } .site-footer { text-align:center; padding:30px 20px 50px; font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--muted-d); } .reveal { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } } /* Staggered entrance for the pricing cards and testimonial reel: each card hides independently and only animates in once its parent section's .reveal.in fires, with a per-card delay for a cascading effect. Uses the standalone `translate` property (not `transform`) for this offset specifically so it composes with, instead of fighting, the hover-lift `transform` rules on .plan and .reel-card — otherwise the higher-specificity ".reveal.in ..." rule would silently cancel hover. */ .plans-grid .plan, .reel .reel-card { opacity: 0; translate: 0 18px; transition: opacity .5s ease, translate .5s ease; } .reveal.in .plans-grid .plan, .reveal.in .reel .reel-card { opacity: 1; translate: 0 0; } .plans-grid .plan:nth-child(1), .reel .reel-card:nth-child(1) { transition-delay: .05s; } .plans-grid .plan:nth-child(2), .reel .reel-card:nth-child(2) { transition-delay: .12s; } .plans-grid .plan:nth-child(3), .reel .reel-card:nth-child(3) { transition-delay: .19s; } .plans-grid .plan:nth-child(4), .reel .reel-card:nth-child(4) { transition-delay: .26s; } .reel .reel-card:nth-child(5) { transition-delay: .33s; } .reel .reel-card:nth-child(6) { transition-delay: .40s; } .reel .reel-card:nth-child(7) { transition-delay: .47s; } .reel .reel-card:nth-child(8) { transition-delay: .54s; } @media (prefers-reduced-motion: reduce) { .plans-grid .plan, .reel .reel-card { opacity:1; translate:0 0; transition:none; } } /* ---- testimonial cards: hover-preview only, no inline controls ---- */ .reel-card.has-video { cursor:pointer; } .reel-card.has-video video { pointer-events:none; } .reel-card.has-video:focus-visible { outline:2px solid var(--gold-hot); outline-offset:3px; } /* ---- video modal (opened by clicking a testimonial card) ---- */ .video-modal { position:fixed; inset:0; z-index:100; background:rgba(6,6,6,.92); display:flex; align-items:center; justify-content:center; padding:5vh 4vw; opacity:0; pointer-events:none; transition:opacity .25s ease; } .video-modal.open { opacity:1; pointer-events:auto; } .video-modal__inner { width:100%; max-width:1000px; aspect-ratio:16/9; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.6); } .video-modal__inner video { width:100%; height:100%; } .video-modal__close { position:absolute; top:20px; right:20px; z-index:2; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:var(--paper); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease; } .video-modal__close:hover { background:rgba(255,255,255,.18); } .video-modal__close:focus-visible { outline:2px solid var(--gold-hot); outline-offset:2px; } @media (prefers-reduced-motion: reduce) { .video-modal { transition:none; } }