/* Inter, served from this site (no request to Google Fonts). Same weights and font files Google served before. */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ --bg:#0A0A0D; --bg-deep:#050507; --surface:#131318; --surface-2:#1A1A22; --text:#F4F3EF; --muted:#8F8F99; --line: rgba(244,243,239,0.08); --line-strong: rgba(244,243,239,0.16); --accent:#5B7CFF; --accent-rich:#3E5AE0; --accent-soft: rgba(91,124,255,0.14); --radius-sm: 10px; --radius-md: 20px; --radius-full: 999px; --shadow-card: 0 30px 70px -32px rgba(0,0,0,0.7); --shadow-lift: 0 18px 40px -18px rgba(0,0,0,0.55); --ease: cubic-bezier(.16,.84,.44,1); --ease-in-out: cubic-bezier(.77,0,.175,1); --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", sans-serif; } /* ---------- LIGHT THEME (toggle) ---------- Same token set, light values. Everything that already reads from these variables (body text/background, borders, cards, buttons, badges...) adapts automatically — no other rule needs to change. Only the handful of places that hardcode a color instead of using a token (the Hero's own background + the nav's white text, both tuned specifically to sit on a dark backdrop) get an explicit override further below. */ :root[data-theme="light"]{ /* Matches the Hero's own outer halo tone (see .hero light override below) so the seam between the Hero and the section right after it disappears. Was #F4F6FB (slightly whiter) — swap back to that if you change your mind. */ --bg:#E8EBF2; --bg-deep:#E7EAF2; --surface:#FFFFFF; --surface-2:#F0F2F7; --text:#14151A; --muted:#5C5E6B; --line: rgba(20,21,26,0.08); --line-strong: rgba(20,21,26,0.14); --accent:#3E5AE0; --accent-rich:#2C42B8; --accent-soft: rgba(62,90,224,0.12); --shadow-card: 0 30px 70px -32px rgba(20,21,26,0.18); --shadow-lift: 0 18px 40px -18px rgba(20,21,26,0.14); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text); font-family: var(--font-sf); overflow-x:hidden; -webkit-font-smoothing:antialiased; } ::selection{ background:var(--accent); color:var(--bg); } /* Fixed edge-fade overlay: --fade-color defaults to the page's own --bg so it tracks the light/dark toggle automatically. Over the Hero (whose own background differs from --bg, especially in light mode) js/script.js adds .hero-in-view to via IntersectionObserver so the fade can switch to a color that actually matches what's behind it there. */ :root{ --fade-color: var(--bg); } body.hero-in-view{ --fade-color:transparent; } :root[data-theme="light"] body.hero-in-view{ --fade-color:transparent; } .scroll-fade-overlay{ position:fixed; inset:0; z-index:9999; pointer-events:none; background: linear-gradient(to bottom, var(--fade-color) 0%, transparent 14%), linear-gradient(to top, var(--fade-color) 0%, transparent 14%); background-repeat:no-repeat; background-position: top, bottom; background-size: 100% 160px, 100% 160px; } @media(max-width:768px){ .scroll-fade-overlay{ background-size: 100% 90px, 100% 90px; } } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } /* Global keyboard-focus ring: every link/button/custom control site-wide gets one consistent, on-brand indicator. Form inputs are excluded on purpose — they already carry their own bespoke border+glow focus treatment. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } .wrap{ max-width:1280px; margin:0 auto; padding:0 40px; position:relative; } @media(max-width:767px){ .wrap{ padding:0 16px; } } @media(prefers-reduced-motion: reduce){ *:not(.hero-showcase *):not(.hero-v2):not(.fp-panel):not(.fp-panel *):not(.fp-trigger):not(.fp-trigger *){ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } .hs-bob{ animation:none !important; } } /* ---------- NAV (floating capsule glassmorphism) ---------- */ nav{ position:fixed; top:20px; left:50%; z-index:100; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; gap:28px; width:min(1140px, calc(100vw - 32px)); padding:10px 10px 10px 24px; border-radius:9999px; background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 40px rgba(0,0,0,0.4); } /* White-tinted glass reads as a barely-visible smudge once the page behind it turns light — an inverted dark-tinted glass keeps the same floating-capsule feel with real contrast. */ :root[data-theme="light"] nav{ background: rgba(20,21,26,0.05); border: 1px solid rgba(20,21,26,0.1); box-shadow: 0 20px 40px rgba(20,21,26,0.12); } .logo{ font-family: var(--font-sf); font-weight:600; font-size:17px; letter-spacing:0.01em; display:flex; align-items:center; gap:10px; white-space:nowrap; flex-shrink:0; } .logo .dot{ width:6px;height:6px;border-radius:50%;background:var(--accent); transition:background .5s var(--ease); box-shadow:0 0 10px 1px var(--accent-soft); } .logo-mark{ width:38px; height:38px; border-radius:50%; display:block; object-fit:cover; box-shadow: 0 0 0 1px var(--line-strong), 0 6px 18px rgba(0,0,0,0.45); background: radial-gradient(circle, var(--surface), var(--bg-deep)); } .footer-col .logo-mark, .footer-top .logo-mark{ width:44px; height:44px; } .nav-pills{ display:flex; align-items:center; gap:4px; } .nav-pills a{ font-size:14.5px; font-weight:500; padding:8px 20px; border-radius:9999px; color:rgba(255,255,255,0.8); transition: all 0.25s cubic-bezier(0.4,0,0.2,1); } .nav-pills a:hover{ color:#fff; background:rgba(255,255,255,0.15); } .nav-pills a:active{ transform:scale(0.98); } .nav-item.dropdown{ position:relative; } .dropdown-trigger{ display:flex; align-items:center; gap:6px; font-family:inherit; font-size:14.5px; font-weight:500; padding:8px 18px 8px 20px; border-radius:9999px; color:rgba(255,255,255,0.8); background:none; border:none; cursor:pointer; transition: all 0.25s cubic-bezier(0.4,0,0.2,1); } .dropdown-trigger:hover{ color:#fff; background:rgba(255,255,255,0.15); } .dropdown-trigger:active{ transform:scale(0.98); } .dropdown.open .dropdown-trigger{ color:#fff; background:rgba(255,255,255,0.15); } .dropdown-trigger .chev{ width:10px; height:10px; transition:transform .3s var(--ease); flex-shrink:0; } .dropdown.open .dropdown-trigger .chev{ transform:rotate(180deg); } :root[data-theme="light"] .nav-pills a, :root[data-theme="light"] .dropdown-trigger{ color:rgba(20,21,26,0.72); } :root[data-theme="light"] .nav-pills a:hover, :root[data-theme="light"] .dropdown-trigger:hover, :root[data-theme="light"] .dropdown.open .dropdown-trigger{ color:#14151A; background:rgba(20,21,26,0.06); } .dropdown-panel{ position:absolute; top:calc(100% + 14px); left:50%; transform-origin: top center; transform:translateX(-50%) translateY(-6px) scale(0.96); width:250px; background: rgba(10,10,13,0.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:8px; box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.05); opacity:0; pointer-events:none; transition: opacity .2s var(--ease), transform .2s var(--ease); z-index:200; } :root[data-theme="light"] .dropdown-panel{ background: rgba(255,255,255,0.92); border:1px solid rgba(20,21,26,0.1); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.5); } .dropdown.open .dropdown-panel{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); } .dropdown-item{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:10px; font-size:13.5px; color:var(--text); opacity:0.82; transition: background .2s var(--ease), opacity .2s var(--ease), padding-left .2s var(--ease); } .dropdown-item:hover{ background:rgba(255,255,255,0.06); opacity:1; padding-left:18px; } :root[data-theme="light"] .dropdown-item:hover{ background:rgba(20,21,26,0.05); } .dropdown-item .tag{ font-size:10.5px; color:var(--muted); border:1px solid var(--line); padding:2px 7px; border-radius:var(--radius-full); } .dropdown-divider{ height:1px; background:var(--line); margin:6px 8px; } .nav-cta{ font-size:13px; font-weight:600; padding:11px 22px; border-radius:9999px; background:#000000; color:#ffffff; border:1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 12px rgba(0,0,0,0.5); position:relative; overflow:hidden; white-space:nowrap; flex-shrink:0; transition: all 0.25s cubic-bezier(0.4,0,0.2,1); } .nav-cta:hover{ transform:translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.6); } .nav-cta:active{ transform:scale(0.96); } /* Light/dark switch. Sun icon shows only in light mode, moon only in dark — swapped purely via the data-theme attribute, no JS re-render. */ .theme-toggle-btn{ width:40px; height:40px; border-radius:9999px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:#fff; transition: border-color .25s var(--ease), background .25s var(--ease), transform .16s var(--ease); } .theme-toggle-btn:hover{ border-color:var(--accent); background:var(--accent-soft); } .theme-toggle-btn:active{ transform:scale(0.9); } .theme-toggle-btn svg{ width:18px; height:18px; } .theme-toggle-btn .icon-sun{ display:none; } :root[data-theme="light"] .theme-toggle-btn{ color:#14151A; border-color:rgba(20,21,26,0.12); background:rgba(20,21,26,0.04); } :root[data-theme="light"] .theme-toggle-btn .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle-btn .icon-sun{ display:block; } .nav-mobile-toggle{ display:none; } @media(min-width:681px) and (max-width:920px){ nav{ padding:8px 8px 8px 18px; gap:16px; } .logo{ font-size:14.5px; gap:8px; } .logo-mark{ width:32px; height:32px; } .nav-pills{ gap:2px; } .nav-pills a{ padding:8px 12px; font-size:13px; } .dropdown-trigger{ padding:8px 10px 8px 12px; font-size:13px; } .nav-cta{ padding:9px 16px; font-size:12px; } } /* ---------- HAMBURGER + MOBILE MENU ---------- */ .hamburger-btn{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; border-radius:9999px; flex-shrink:0; background:rgba(255,255,255,0.04); border:1px solid var(--line-strong); transition: border-color .25s var(--ease), transform .16s var(--ease); position:relative; z-index:210; } .hamburger-btn:active{ transform:scale(0.94); } .hamburger-btn span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--text); transition: transform .35s var(--ease), opacity .25s var(--ease); } .hamburger-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .hamburger-btn.open span:nth-child(2){ opacity:0; } .hamburger-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mobile-menu{ position:fixed; inset:0; z-index:90; background: rgba(5,5,7,0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity:0; pointer-events:none; transition: opacity .4s var(--ease); overflow-y:auto; } /* Mobile links already read color from var(--text), which flips to dark in light mode — the overlay itself has to flip too or that text goes dark-on-dark. */ :root[data-theme="light"] .mobile-menu{ background: rgba(255,255,255,0.97); } .mobile-menu.open{ opacity:1; pointer-events:auto; } .mobile-menu-inner{ padding:110px 28px 50px; display:flex; flex-direction:column; transform:translateY(-18px); opacity:0; transition: transform .45s var(--ease) .06s, opacity .4s var(--ease) .06s; } .mobile-menu.open .mobile-menu-inner{ transform:translateY(0); opacity:1; } .mobile-link{ font-family: var(--font-sf); font-weight:600; font-size:clamp(18px,5.2vw,22px); min-height:44px; display:flex; align-items:center; padding:14px 2px; border-bottom:1px solid var(--line); color:var(--text); transition: transform .16s var(--ease), opacity .16s var(--ease); } .mobile-link:active{ transform:scale(0.98); opacity:0.7; } .mobile-accordion-trigger{ width:100%; min-height:44px; display:flex; justify-content:space-between; align-items:center; font-family: var(--font-sf); font-weight:600; font-size:clamp(18px,5.2vw,22px); padding:14px 2px; border-bottom:1px solid var(--line); color:var(--text); background:none; text-align:left; transition: transform .16s var(--ease), opacity .16s var(--ease); } .mobile-accordion-trigger:active{ transform:scale(0.98); opacity:0.7; } .mobile-accordion-trigger .chev{ width:14px; height:14px; flex-shrink:0; margin-left:12px; transition:transform .35s var(--ease); } .mobile-accordion.open .mobile-accordion-trigger .chev{ transform:rotate(180deg); } .mobile-accordion-panel{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); } .mobile-accordion.open .mobile-accordion-panel{ max-height:640px; } .mobile-sublink{ display:flex; justify-content:space-between; align-items:center; padding:11px 2px 11px 14px; font-size:clamp(13.5px,3.8vw,15px); color:var(--muted); } .mobile-sublink .tag{ font-size:10.5px; color:var(--muted); border:1px solid var(--line); padding:2px 7px; border-radius:100px; } .mobile-cta{ margin-top:28px; text-align:center; background:var(--text); color:var(--bg); font-weight:600; font-size:clamp(15px,4.2vw,16px); padding:17px; border-radius:var(--radius-full); transition: transform .16s var(--ease); } .mobile-cta:active{ transform:scale(0.97); } @media(max-width:680px){ .hamburger-btn{ display:flex; } } @media(max-width:680px){ .nav-pills{ display:none; } .nav-cta{ display:none; } nav{ padding:8px 8px 8px 20px; } } /* ---------- HERO ---------- */ .hero{ position:relative; height:100svh; min-height:640px; display:flex; flex-direction:column; justify-content:center; overflow:hidden; background-color: #000000; } :root[data-theme="light"] .hero{ /* Elliptical, and fully settled on the page color (#E8EBF2 = light --bg) by 70% — the midpoints of all four edges sit at ~70% of the way out, so the Hero's bottom edge now meets the next section with no visible seam (the old circle only reached the page color in the far corners). */ background: radial-gradient(ellipse at center, #D2D8E6 0%, #DEE3EE 38%, #E8EBF2 70%); } .hero-inner{ position:relative; z-index:10; width:100%; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; padding:150px 6% 0; gap:14px; pointer-events:none; } /* Desktop: pull the headline/description block in from the screen edge, toward the robot in the middle. */ @media(min-width:900px){ .hero-inner{ padding-left:clamp(6%, 10vw, 220px); } } /* Wide screens have a lot of empty room between the text and the robot, so pull the text further in there (narrower screens keep the value above so it can't run into the robot). */ @media(min-width:1500px){ .hero-inner{ padding-left:clamp(6%, 14vw, 340px); } } @media(max-width:640px){ .hero-inner{ padding-top:120px; } } @media(max-height:700px){ .hero-inner{ padding-top:100px; } } .particles{ position:absolute; inset:0; pointer-events:none; } .particle-wrap{ position:absolute; opacity:1; transform: translateY(0); transition: opacity .55s var(--ease), transform .55s var(--ease); } .particle-wrap.exiting{ opacity:0; transform: translateY(-46px); } .particle-wrap.entering{ opacity:0; transform: translateY(32px); } .particle-float{ animation: floaty 6s ease-in-out infinite; } .particle{ position:relative; opacity:0.9; color: rgba(0,210,255,0.85); transition: transform .1s linear; filter: drop-shadow(0 0 6px rgba(0,210,255,0.55)) drop-shadow(0 8px 14px rgba(0,0,0,0.35)); } .particle svg{ display:block; width: var(--particle-size, 28px); height: var(--particle-size, 28px); } @keyframes floaty{ 0%,100%{ transform: translateY(0px) rotate(0deg); } 50%{ transform: translateY(-16px) rotate(6deg); } } .slide-stage{ position:relative; width:100%; display:flex; align-items:center; justify-content:flex-start; height:min(38vw, 300px); pointer-events:none; } @media(max-width:640px){ .slide-stage{ height:130px; } } @media(max-height:700px){ .slide-stage{ height:110px; } } .slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start; opacity:0; pointer-events:none; transform: scale(0.94); transition: opacity .7s var(--ease), transform .7s var(--ease); } .slide-content{ position:relative; display:flex; align-items:center; justify-content:flex-start; } .slide-content .orb{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } .slide.active{ opacity:1; transform:scale(1); } .slide.exit-left{ transform: translateX(-6%) scale(0.94); opacity:0; } .slide.exit-right{ transform: translateX(6%) scale(0.94); opacity:0; } .headline{ font-family: var(--font-sf); font-weight:800; /* Same size for every slide (CLAUDE, CHATGPT, CREATIVE CLOUD, STREAMING, VPN, SOFTWARE) — was clamp(48px,9vw,120px) with a separate .long modifier only on the longer words, which made short words render much bigger than long ones and look inconsistent slide to slide. */ font-size: clamp(24px, 5vw, 68px); line-height:0.86; letter-spacing:-0.02em; color:#ffffff; text-align:left; white-space:nowrap; user-select:none; position:relative; z-index:10; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.35)); } /* A dark fill alone reads fine over the light page but disappears wherever it crosses the robot underneath. Contrast now comes from the liquid-glass panel behind the text (mobile, below) rather than a stroke/halo baked into the letters themselves. */ :root[data-theme="light"] .headline{ color:#14151A; filter: drop-shadow(0 20px 40px rgba(20,21,26,0.12)); text-shadow: 0 0 20px rgba(56,132,255,0.35); } /* "CREATIVE CLOUD" is too wide to sit left of the robot on one line, so on desktop/tablet "CLOUD" drops under "CREATIVE". Phones keep one line. */ .headline .hl-br{ display:none; } @media(min-width:641px){ .headline .hl-br{ display:inline; } } /* The floating orb is hidden in the Hero; it still renders on product subpages (.product-hero-v etc). */ .slide-stage .orb{ display:none; } .slide-meta{ position:relative; z-index:2; max-width:400px; } .slide-meta .eyebrow{ font-family: var(--font-sf); font-size:32px; font-weight:600; margin-bottom:10px; } .slide-meta p{ font-size:19px; color:var(--muted); line-height:1.55; } /* "Suscripción completa" / "Plan Plus" / "Plan Pro" / "Combo Streaming"... — this label cycles per slide, sitting right where it can cross either the light page or the dark robot circle depending on scroll/viewport. A solid blue fill + neon glow reads clearly against both. */ :root[data-theme="light"] .slide-meta .eyebrow{ color:#2F63E8; text-shadow: 0 0 16px rgba(56,132,255,0.4); } :root[data-theme="light"] .slide-meta p{ color:#14151A; } .hero-controls{ position:absolute; left:50%; bottom:150px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; z-index:10; pointer-events:auto; } @media(max-width:640px){ .hero-controls{ bottom:145px; } } .ctrl-btn{ width:44px; height:44px; border-radius:9999px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; transition: border-color .3s var(--ease), transform .16s var(--ease), background .3s var(--ease); } .ctrl-btn:hover{ border-color:var(--accent); background:var(--accent-soft); } .ctrl-btn:active{ transform:scale(0.92); } .ctrl-btn svg{ width:14px; height:14px; } .dots{ display:flex; gap:6px; margin:0 4px; } .dot-ind{ width:5px; height:5px; border-radius:50%; background:var(--line-strong); transition: background .3s var(--ease), width .3s var(--ease); } .dot-ind.active{ background:var(--accent); width:16px; border-radius:3px; box-shadow:0 0 8px var(--accent-soft); } .hero-inicia-btn{ position:absolute; left:50%; bottom:235px; transform:translateX(-50%); z-index:10; pointer-events:auto; cursor:pointer; font-family: var(--font-sf); font-size:1.6rem; font-weight:800; color:#fff; padding:20px 50px; border-radius:999px; background: linear-gradient(135deg, #2563eb, #38bdf8); box-shadow: 0 0 20px rgba(56,189,248,0.5); transition: transform .16s var(--ease), box-shadow .25s var(--ease); } .hero-inicia-btn:hover{ transform:translateX(-50%) translateY(-2px); box-shadow:0 0 30px rgba(56,189,248,0.7); } .hero-inicia-btn:active{ transform:translateX(-50%) scale(0.96); } @media(max-width:640px){ .hero-inicia-btn{ bottom:210px; padding:16px 34px; font-size:1.15rem; } } @media(max-width:640px){ /* Wider wrap box + a scaled-down eyebrow/paragraph (still bigger than the original pre-redesign sizes) so the whole text block stays short enough, top to bottom, to clear the robot now that it's been pushed toward the lower half of the screen above. */ .slide-meta{ max-width:84vw; } .slide-meta .eyebrow{ font-size:24px; margin-bottom:6px; } .slide-meta p{ font-size:15px; line-height:1.45; } .headline{ letter-spacing:-0.01em; } /* Liquid-glass chip behind the headline and behind the eyebrow+description — a blurred, translucent surface (not a flat dark box) so the text pops against the robot without needing a stroke/halo baked into the letters themselves. Neutral frost (light glass in light mode, dark glass in dark mode) rather than a color tint, so it reads as "glass" over whatever happens to be behind it instead of a fixed color block. */ .slide-content, .slide-meta{ z-index:10; background: rgba(255,255,255,0.4); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.55); border-radius: 20px; padding: 12px 18px; box-shadow: 0 8px 32px rgba(20,21,26,0.12), inset 0 1px 0 rgba(255,255,255,0.6); } :root:not([data-theme="light"]) .slide-content, :root:not([data-theme="light"]) .slide-meta{ background: rgba(20,20,30,0.4); border-color: rgba(255,255,255,0.14); box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); } .slide-meta p{ margin-bottom:0; } /* Mobile carousel controls: pushed further down so there's real breathing room between them and the "10% OFF" button above — they were sitting close enough to nearly touch it. */ .hero-controls{ bottom:115px; } } @media(max-height:700px){ .hero-controls{ bottom:105px; } } /* ---------- HERO v2: color showcase (Before -> After, per-product colors) ---------- Replaces the old robot Hero (the Spline robot was removed). The old headline/carousel markup is still in the HTML (hidden) because js/script.js drives the slides from it. Colors come from js/script.js (--hs-bg / --hs-c1 / --hs-c2 on #hero). */ @property --hs-bg{ syntax:''; inherits:true; initial-value:#A3A2AA; } @property --hs-c1{ syntax:''; inherits:true; initial-value:#B9B8BF; } @property --hs-c2{ syntax:''; inherits:true; initial-value:#94939B; } .hero.hero-v2, :root[data-theme="light"] .hero.hero-v2{ background:none; background-color:var(--hs-bg); transition: --hs-bg .9s ease, --hs-c1 .9s ease, --hs-c2 .9s ease; } .hero-v2 .hero-inner{ display:none; } .hero-showcase{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:104px 24px 36px; } .hs-stage{ width:min(1040px, 100%); display:flex; flex-direction:column; align-items:center; gap:16px; } .hs-card{ position:relative; width:100%; height:clamp(380px, 58svh, 540px); border-radius:28px; color:#fff; background: linear-gradient(160deg, var(--hs-c1), var(--hs-c2)); box-shadow: 0 50px 90px -30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.28); display:flex; flex-direction:column; transition: filter .45s ease, transform .45s ease; } .hs-topbar{ flex:none; height:60px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:13px; } .hs-brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-0.01em; } .hs-brand img{ border-radius:50%; display:block; } .hs-tabs{ display:flex; gap:10px; } .hs-tabs i{ font-style:normal; font-weight:600; font-size:12px; padding:6px 14px; border-radius:100px; background:rgba(255,255,255,0.16); transition: background .4s ease; } .hs-circles{ display:flex; gap:8px; } .hs-circles b{ width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.28); transition: background .4s ease; } .hs-real{ flex:1; min-height:0; display:flex; flex-direction:column; } .hs-body{ flex:1; min-height:0; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:20px; padding:0 44px; } .hs-copy{ transition: opacity .24s ease, transform .24s ease, filter .24s ease; } .hs-copy.swap, .hs-price.swap{ opacity:0; transform:translateY(8px); filter:blur(6px); } .hs-eyebrow{ font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; opacity:0.9; } .hs-title{ font-family:var(--font-sf); font-weight:800; font-size:clamp(34px, 4.6vw, 62px); line-height:0.98; letter-spacing:-0.025em; margin:10px 0 14px; color:#fff; } .hs-desc{ font-size:clamp(14px, 1.25vw, 17px); line-height:1.5; max-width:430px; color:rgba(255,255,255,0.92); } .hs-art{ position:relative; height:100%; display:flex; align-items:center; justify-content:center; will-change:transform; } .hs-bob{ position:relative; height:100%; aspect-ratio:1; animation: hsFloat 6s ease-in-out infinite; } @keyframes hsFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-12px) rotate(1.2deg); } } .hs-icon{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(0.84) rotate(-8deg); /* No CSS filter on the image at all: blur()/drop-shadow() on these stacked, animated images rendered as a white rectangle on iPhone Safari. The shadow is a plain gradient below (.hs-bob::before) and the swap is opacity + scale + rotate. */ transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events:none; user-select:none; z-index:1; } .hs-icon.active{ opacity:1; transform:none; } .hs-bob::before{ content:""; position:absolute; z-index:0; pointer-events:none; left:14%; right:14%; bottom:-2%; height:14%; border-radius:50%; background: radial-gradient(ellipse at center, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0) 72%); } /* Touch screens: the endless float animation is dropped (saves battery, avoids Safari repaint glitches). */ @media (hover:none), (max-width:768px){ .hs-bob{ animation:none; } .hs-art{ will-change:auto; } } .hs-foot{ flex:none; height:84px; padding:0 32px 6px 44px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; } .hs-price{ display:flex; align-items:baseline; gap:6px; transition: opacity .24s ease, transform .24s ease, filter .24s ease; } .hs-price small{ font-size:12px; opacity:0.8; } .hs-price strong{ font-family:var(--font-sf); font-size:26px; font-weight:800; letter-spacing:-0.01em; } .hs-price span{ font-size:13px; opacity:0.85; } .hs-controls{ display:flex; align-items:center; gap:10px; } .hs-controls .ctrl-btn{ width:38px; height:38px; border:1px solid rgba(255,255,255,0.45); background:rgba(255,255,255,0.14); color:#fff; } .hs-controls .ctrl-btn:hover{ background:rgba(255,255,255,0.28); border-color:#fff; } .hs-controls .dot-ind{ background:rgba(255,255,255,0.42); box-shadow:none; } .hs-controls .dot-ind.active{ background:#fff; box-shadow:none; } .hs-actions{ justify-self:end; display:flex; align-items:center; gap:10px; } .hs-link{ font-weight:600; font-size:14px; color:#fff; padding:11px 20px; border-radius:100px; border:1.5px solid rgba(255,255,255,0.7); transition: background .2s ease; } .hs-link:hover{ background:rgba(255,255,255,0.18); } .hs-cta{ font-family:var(--font-sf); font-weight:800; font-size:14px; padding:12px 22px; border-radius:100px; background:#fff; color:var(--hs-c2); cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,0.2); transition: transform .16s ease, box-shadow .2s ease; } .hs-cta:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,0.26); } .hs-cta:active{ transform:scale(0.96); } @media(max-width:768px){ .hero-showcase{ padding:92px 14px 24px; align-items:flex-start; } .hs-card{ height:auto; border-radius:22px; } .hs-topbar{ padding:0 20px; height:54px; } .hs-tabs{ display:none; } .hs-body{ grid-template-columns:1fr; padding:0 22px; gap:4px; } .hs-art{ order:-1; height:190px; } .hs-bob{ height:100%; margin-top:0; } .hs-copy{ text-align:center; } .hs-title{ font-size:clamp(30px, 9vw, 42px); margin:6px 0 10px; } .hs-desc{ margin:0 auto; font-size:14.5px; } .hs-foot{ height:auto; padding:16px 20px 20px; row-gap:14px; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"price actions" "controls controls"; } .hs-actions{ flex-wrap:wrap; justify-content:flex-end; min-width:0; } /* Software slide ("Consulta directa" + two buttons) does not fit one row on a phone: the "Consultar" button already says it, so the price text is hidden and the buttons are centered. */ .hs-foot.is-consult{ grid-template-areas:"actions actions" "controls controls"; } .hs-foot.is-consult .hs-price{ display:none; } .hs-foot.is-consult .hs-actions{ justify-self:center; justify-content:center; } .hs-price{ grid-area:price; display:grid; grid-template-columns:auto auto; justify-content:start; align-items:baseline; column-gap:5px; } .hs-price small{ grid-column:1 / -1; } .hs-price strong{ white-space:nowrap; font-size:24px; } .hs-actions{ grid-area:actions; } .hs-controls{ grid-area:controls; justify-self:center; } .hs-link{ padding:10px 14px; font-size:13px; } .hs-cta{ padding:11px 18px; } } /* ---------- PRODUCT PAGE: CLAUDE PRO ---------- */ .product-hero-v{ position:relative; height:100svh; min-height:640px; background: radial-gradient(120% 70% at 50% 20%, #10131a, #000 65%); overflow:hidden; display:flex; align-items:flex-end; } @media(max-width:768px){ /* Fixed height risks clipping/overlapping content when the copy block (title + tagline + description) needs more room than a phone screen gives it — min-height keeps the full-bleed photo effect by default, but lets the section grow instead of cutting text off or letting it sit under the fixed buttons. */ .product-hero-v{ height:auto; min-height:100svh; } } /* Gemini Pro hero: replaced with the "principal" photo — this one is a real, fully opaque room shot (blurred bokeh lights/shelves in the background), not an alpha cutout like the previous one — so the edge-fade mask is back, same treatment as Streaming's living room. */ .product-hero-v.theme-blue{ --bg-parallax: 0px; --tint: 4,6,9; background:#070c14; } .product-hero-v.theme-blue::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(var(--tint),0.05) 0%, rgba(var(--tint),0.45) 55%, rgba(var(--tint),0.92) 100%), url('../img/GEMINI PRINCIPAL.webp'); background-size: auto, cover; background-position: center, center calc(100% + var(--bg-parallax)); background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%); mask-composite: intersect; opacity: var(--bg-opacity, 1); } /* Creative Cloud hero: the designer photo is the hero's own full-bleed background (not a floating image) — lives on a ::before so it always paints behind .hero-centerpiece/.product-hero-copy/.hero-buy-btn regardless of DOM order. The PNG is already a real alpha cutout (no office/room background baked in), so its own transparency is what "fuses" it into the dark hero — no extra edge mask needed. */ .product-hero-v.theme-rainbow{ --bg-parallax: 0px; --tint: 6,4,9; background:#0e0714; } .product-hero-v.theme-rainbow::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(var(--tint),0.05) 0%, rgba(var(--tint),0.4) 55%, rgba(var(--tint),0.9) 100%), url('../img/creative-cloud-Photoroom.webp'); background-size: auto, cover; background-position: center, center calc(100% + var(--bg-parallax)); background-repeat: no-repeat; opacity: var(--bg-opacity, 1); } .product-hero-v.theme-rainbow .v-vignette{ box-shadow: inset 0 0 220px 60px #000, inset 0 -220px 200px -50px #000, inset 0 160px 180px -50px #000; background: rgba(0,0,0,0.1); } /* Streaming hero: same full-bleed background-photo treatment, but this photo is a real, fully opaque living-room shot (not an alpha cutout) — needs the edge-fade mask brought back so the room fuses into the dark hero on the left/right/top instead of showing a hard rectangle. */ .product-hero-v.theme-streaming{ --bg-parallax: 0px; --tint: 6,4,9; background:#0b0b0f; } .product-hero-v.theme-streaming::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(var(--tint),0.05) 0%, rgba(var(--tint),0.45) 55%, rgba(var(--tint),0.92) 100%), url('../img/Streaming.webp'); background-size: auto, cover; background-position: center, center calc(100% + var(--bg-parallax)); background-repeat: no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%); mask-composite: intersect; opacity: var(--bg-opacity, 1); } /* VPN hero: same full-bleed background-photo treatment as Claude Pro and Creative Cloud — this photo is already a real alpha cutout (no room background baked in), so no edge-fade mask needed here either. */ .product-hero-v.theme-vpn{ --bg-parallax: 0px; --tint: 4,4,9; background:#0b0a14; } .product-hero-v.theme-vpn::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(var(--tint),0.05) 0%, rgba(var(--tint),0.4) 55%, rgba(var(--tint),0.9) 100%), url('../img/VPN.webp'); background-size: auto, cover; background-position: center, center calc(100% + var(--bg-parallax)); background-repeat: no-repeat; opacity: var(--bg-opacity, 1); } /* Especializados hero: same full-bleed background-photo treatment as the others — real alpha cutout (no room background baked in), so no edge-fade mask needed. */ .product-hero-v.theme-special{ --bg-parallax: 0px; --tint: 6,8,9; background:#0a0e11; } .product-hero-v.theme-special::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(var(--tint),0.05) 0%, rgba(var(--tint),0.4) 55%, rgba(var(--tint),0.9) 100%), url('../img/Software.webp'); background-size: auto, cover; background-position: center, center calc(100% + var(--bg-parallax)); background-repeat: no-repeat; opacity: var(--bg-opacity, 1); } /* ChatGPT hero: same full-bleed background-photo treatment as the others — real alpha cutout (no room background baked in), so no edge-fade mask needed. */ .product-hero-v.theme-green{ --bg-parallax: 0px; --tint: 4,9,7; background:#070f0c; } .product-hero-v.theme-green::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(var(--tint),0.05) 0%, rgba(var(--tint),0.4) 55%, rgba(var(--tint),0.9) 100%), url('../img/chat gpt.webp'); background-size: auto, cover; background-position: center, center calc(100% + var(--bg-parallax)); background-repeat: no-repeat; opacity: var(--bg-opacity, 1); } /* Claude Pro hero: same full-bleed background-photo treatment as Creative Cloud — the photo lives on a ::before so it always paints behind .hero-centerpiece/.product-hero-copy/.hero-buy-btn, and its own transparency (already a real alpha cutout, no room background baked in) is what fuses it into the dark hero. */ .product-hero-v.theme-orange{ --bg-parallax: 0px; --tint: 6,4,3; background:#170b05; } .product-hero-v.theme-orange::before{ content:''; position:absolute; inset:0; z-index:0; background-image: linear-gradient(180deg, rgba(var(--tint),0.05) 0%, rgba(var(--tint),0.4) 55%, rgba(var(--tint),0.9) 100%), url('../img/CLaude pro.webp'); background-size: auto, cover; background-position: center, center calc(100% + var(--bg-parallax)); background-repeat: no-repeat; opacity: var(--bg-opacity, 1); } /* Light mode: every product hero's photo scrim (--tint), fallback color and edge vignette swap from near-black to the page's own light tone, so these sections stop looking like a dark hole punched into an otherwise light site. The photos themselves are real, moody photographs and can't be "relit" — only the tint/vignette around them changes — so text over them switches to var(--text)/var(--muted) below instead of staying white. */ :root[data-theme="light"] .product-hero-v.theme-orange, :root[data-theme="light"] .product-hero-v.theme-green, :root[data-theme="light"] .product-hero-v.theme-blue, :root[data-theme="light"] .product-hero-v.theme-rainbow, :root[data-theme="light"] .product-hero-v.theme-streaming, :root[data-theme="light"] .product-hero-v.theme-vpn, :root[data-theme="light"] .product-hero-v.theme-special{ --tint: 232,235,242; background: var(--bg); } :root[data-theme="light"] .v-vignette{ box-shadow: inset 0 0 200px 60px var(--bg), inset 0 -220px 200px -60px var(--bg), inset 0 160px 180px -60px var(--bg); } :root[data-theme="light"] .product-hero-v.theme-rainbow .v-vignette{ box-shadow: inset 0 0 220px 60px var(--bg), inset 0 -220px 200px -50px var(--bg), inset 0 160px 180px -50px var(--bg); background: rgba(232,235,242,0.1); } :root[data-theme="light"] .product-giant-title{ color:var(--text); } :root[data-theme="light"] .product-hero-tagline{ color:var(--muted); } :root[data-theme="light"] .product-hero-sub{ color:var(--text); opacity:0.82; } :root[data-theme="light"] .price-tag{ background: rgba(255,255,255,0.6); border-color: rgba(20,21,26,0.14); } /* On a narrow phone viewport, background-size:cover has to crop almost all of a landscape photo's width to fill a tall/narrow box — anchoring at dead-center (the desktop default) means whichever half happens to land at 50% wins, cutting off the person in every one of these photos since none of them are symmetrical. Shifting the horizontal anchor toward wherever the actual subject sits (matching the same side we already use for each theme's glow placement below) keeps them in frame instead of showing an empty gap between them and the screen. Only the photo layer's position changes — the gradient scrim stays centered. */ @media(max-width:768px){ .product-hero-v.theme-orange::before{ background-position: center, 25% calc(100% + var(--bg-parallax)); } .product-hero-v.theme-green::before{ background-position: center, 25% calc(100% + var(--bg-parallax)); } .product-hero-v.theme-blue::before{ background-position: center, 30% calc(100% + var(--bg-parallax)); } .product-hero-v.theme-rainbow::before{ background-position: center, 70% calc(100% + var(--bg-parallax)); } .product-hero-v.theme-streaming::before{ background-position: center, 25% calc(100% + var(--bg-parallax)); } .product-hero-v.theme-vpn::before{ background-position: center, 25% calc(100% + var(--bg-parallax)); } .product-hero-v.theme-special::before{ background-position: center, 25% calc(100% + var(--bg-parallax)); } } /* ---------- CENTERED PRODUCT IMAGE (transparent PNG, parallax + fade on scroll) ---------- */ .hero-centerpiece{ position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%); width:min(60vw, 480px); height:min(50vh, 420px); display:flex; align-items:center; justify-content:center; } .gem-glow{ position:absolute; inset:-30%; background: radial-gradient(circle, rgba(255,157,77,0.55), rgba(255,122,26,0.18) 45%, transparent 70%); filter: blur(28px); animation: gemPulse 4s ease-in-out infinite; } @keyframes gemPulse{ 0%,100%{ opacity:0.75; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } } @media(max-width:768px){ .hero-centerpiece{ width:min(74vw, 300px); height:min(40vh, 280px); } } /* Creative Cloud hero: the designer photo is now the hero's own background (see .theme-rainbow::before above), so this centerpiece no longer holds a floating — just a wide, soft violet/magenta glow sitting behind roughly where the designer appears in the frame, to accent the atmosphere without competing with the photo. */ .theme-rainbow .hero-centerpiece{ left:64%; top:62%; width:min(70vw, 720px); height:min(60vh, 520px); } .theme-rainbow .gem-glow{ inset:-15%; filter: blur(60px); } @media(max-width:768px){ .theme-rainbow .hero-centerpiece{ left:58%; top:60%; width:min(90vw, 420px); height:min(46vh, 360px); } } /* Claude Pro hero: same idea as Creative Cloud's glow above, positioned over the left side of the frame where the developer sits in this photo (screen/UI mockup fills the right side). */ .theme-orange .hero-centerpiece{ left:32%; top:55%; width:min(60vw, 620px); height:min(58vh, 500px); } .theme-orange .gem-glow{ inset:-15%; filter: blur(60px); } @media(max-width:768px){ .theme-orange .hero-centerpiece{ left:38%; top:55%; width:min(80vw, 380px); height:min(44vh, 340px); } } /* Streaming hero: glow sits behind the TV screen (right side of this photo) so it reads like the screen's own light spilling into the room, instead of floating in an arbitrary spot. */ .theme-streaming .hero-centerpiece{ left:72%; top:38%; width:min(55vw, 560px); height:min(50vh, 420px); } .theme-streaming .gem-glow{ inset:-15%; filter: blur(60px); } @media(max-width:768px){ .theme-streaming .hero-centerpiece{ left:66%; top:40%; width:min(75vw, 340px); height:min(38vh, 300px); } } /* VPN hero: glow sits behind the monitor's "CONNECTED" status panel (right side of this photo), reading like the app's own violet accent glowing outward — same idea as Streaming's TV-glow placement. */ .theme-vpn .hero-centerpiece{ left:70%; top:42%; width:min(58vw, 580px); height:min(52vh, 440px); } .theme-vpn .gem-glow{ inset:-15%; filter: blur(60px); } @media(max-width:768px){ .theme-vpn .hero-centerpiece{ left:64%; top:42%; width:min(78vw, 360px); height:min(40vh, 300px); } } /* Gemini Pro hero: in the "principal" photo the person sits on the left and the Gemini app screen fills the right — glow now sits behind the screen instead, same idea as Streaming/VPN's screen-glow placement. */ .theme-blue .hero-centerpiece{ left:68%; top:35%; width:min(58vw, 580px); height:min(52vh, 440px); } .theme-blue .gem-glow{ inset:-15%; filter: blur(60px); } @media(max-width:768px){ .theme-blue .hero-centerpiece{ left:62%; top:38%; width:min(78vw, 360px); height:min(40vh, 300px); } } /* ChatGPT hero: person sits on the left side of this photo (screen fills the right), same layout as Claude Pro — glow placed behind them. */ .theme-green .hero-centerpiece{ left:30%; top:50%; width:min(58vw, 580px); height:min(56vh, 460px); } .theme-green .gem-glow{ inset:-15%; filter: blur(60px); } @media(max-width:768px){ .theme-green .hero-centerpiece{ left:36%; top:50%; width:min(78vw, 360px); height:min(42vh, 300px); } } /* Especializados hero: glow sits behind the monitor/dashboard (right side of this photo), the colorful focal point — person in the hoodie is off to the left. */ .theme-special .hero-centerpiece{ left:68%; top:40%; width:min(58vw, 580px); height:min(52vh, 440px); } .theme-special .gem-glow{ inset:-15%; filter: blur(60px); } @media(max-width:768px){ .theme-special .hero-centerpiece{ left:62%; top:42%; width:min(78vw, 360px); height:min(40vh, 300px); } } .v-vignette{ position:absolute; inset:0; box-shadow: inset 0 0 200px 60px #000, inset 0 -220px 200px -60px #000, inset 0 160px 180px -60px #000; pointer-events:none; } .product-hero-copy{ position:relative; z-index:3; padding:0 40px 40px; max-width:760px; } .product-giant-title{ font-family: var(--font-sf); font-weight:700; color:#ffffff; font-size:2.8rem; line-height:1.08; letter-spacing:-0.02em; margin-bottom:0; } @media(max-width:768px){ .product-giant-title{ font-size:clamp(26px, 8vw, 34px); line-height:1.15; } } @media(max-width:480px){ .product-giant-title{ font-size:clamp(22px, 9vw, 28px); } } /* Standalone block below the H1 — own line, never shares it with the product name, so it can never sit beside it or get cut mid-phrase. */ .product-hero-tagline{ display:block; color:#a1a1a6; font-weight:500; font-size:1.8rem; line-height:1.2; margin-top:8px; } @media(max-width:768px){ .product-hero-tagline{ font-size:1.3rem; } } @media(max-width:480px){ .product-hero-tagline{ font-size:1.05rem; } } .product-hero-sub{ font-size:1.125rem; color:#e0e0e0; font-weight:400; line-height:1.5; margin-top:16px; max-width:520px; } @media(max-width:480px){ .product-hero-sub{ font-size:0.95rem; } } .hero-buy-btn{ position:fixed; right:clamp(26px, 2.6vw, 60px); bottom:28px; z-index:500; background: linear-gradient(160deg, var(--accent), var(--accent-rich)); color:#fff; font-weight:600; font-size:14.5px; padding:14px 30px; border-radius:var(--radius-full); box-shadow:0 14px 34px -8px rgba(62,90,224,0.55), inset 0 1px 0 rgba(255,255,255,0.16); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .hero-buy-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -8px rgba(62,90,224,0.65), inset 0 1px 0 rgba(255,255,255,0.16); } .hero-buy-btn:active{ transform:translateY(-2px) scale(0.97); } .whatsapp-fab{ position:fixed; right:clamp(26px, 2.6vw, 60px); bottom:92px; z-index:500; display:flex; align-items:center; gap:8px; background:#1fbf5c; color:#fff; font-weight:600; font-size:14.5px; padding:14px 26px; border-radius:var(--radius-full); box-shadow:0 14px 34px -8px rgba(31,191,92,0.5), inset 0 1px 0 rgba(255,255,255,0.16); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .whatsapp-fab:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -8px rgba(31,191,92,0.6), inset 0 1px 0 rgba(255,255,255,0.16); } .whatsapp-fab:active{ transform:translateY(-2px) scale(0.97); } /* Same idea on wide screens: bring the floating buttons in toward the robot (the product-page Comprar button moves with it so they stay stacked). */ @media(min-width:1500px){ .whatsapp-fab, .hero-buy-btn{ right:clamp(32px, 11vw, 300px); } } .whatsapp-fab svg{ width:18px; height:18px; flex-shrink:0; } @media(max-width:768px){ .hero-buy-btn{ right:18px; bottom:18px; padding:12px 24px; font-size:13.5px; } .whatsapp-fab{ right:16px; bottom:76px; padding:9px 16px; font-size:11.5px; gap:6px; } .whatsapp-fab svg{ width:15px; height:15px; } /* Reserve enough room below the text for BOTH stacked fixed buttons (WhatsApp sits on top of Comprar) so a longer description — like Especializados' — never renders underneath them. */ .product-hero-copy{ padding:0 24px 132px; } } @media(max-width:480px){ .whatsapp-fab{ padding:8px 14px; font-size:11px; } .hero-buy-btn{ padding:11px 20px; font-size:13px; } .product-hero-copy{ padding:0 20px 120px; } } /* ---------- HIGHLIGHTS CAROUSEL (Claude Pro page) ---------- */ .highlights-section{ padding:24px 0 120px; background:var(--bg-deep); } /* The hero copy already ends with its own bottom padding, so the section starts close behind it. */ @media(max-width:768px){ .highlights-section{ padding-top:4px; } } /* "Ver el video" button hidden everywhere until there are videos to link to (markup left in place — delete this rule to bring it back). */ .watch-link{ display:none !important; } .highlights-title-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:40px; gap:20px; flex-wrap:wrap; } /* Pill/capsule button — closed shape (not a plain text link), matching the "Plan Pro" badge treatment: solid lilac fill, white text+icon, and a lighter lilac on hover. */ .watch-link{ display:inline-flex; align-items:center; gap:8px; background:#A855F7; color:#ffffff; font-size:14px; font-weight:500; white-space:nowrap; padding:10px 20px; border-radius:9999px; transition: background .25s var(--ease); } .watch-link:hover{ background:#c084fc; } .watch-link svg{ width:20px; height:20px; color:#ffffff; } /* Coverflow / centered-scale carousel: the active card sits centered and full scale, immediate neighbors shrink and dim, the JS keeps --cf-w in sync so the side padding always leaves room for the first/last card to reach center. */ .highlights-track{ --cf-w: min(420px, 78vw); --hl-gut: 40px; /* page gutter the track bleeds into (see margin below); keeps the centering exact */ display:flex; align-items:center; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; /* Generous vertical padding on purpose: transform:scale() is paint-only and doesn't grow the flex item's layout box, so without this the browser's auto overflow-y (triggered by overflow-x:auto) clips the enlarged center card and its glow. This gives it room instead of cropping it. */ padding:90px calc(50% + var(--hl-gut) - (var(--cf-w) / 2)); -ms-overflow-style:none; scrollbar-width:none; cursor:grab; } .highlights-track:active{ cursor:grabbing; } .highlights-track::-webkit-scrollbar{ display:none; } /* .highlight-card also carries the sitewide .reveal / .reveal.in scroll-fade class; the depth values below use !important so the JS-driven coverflow scale/opacity always wins over the generic reveal transform once mounted. */ .highlight-card{ flex:0 0 auto; scroll-snap-align:center; border-radius:24px; border:1px solid rgba(255,255,255,0.1); background:var(--surface); position:relative; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; padding:24px; transition: transform .5s cubic-bezier(.25,1,.5,1), opacity .5s ease, box-shadow .5s ease, border-color .5s ease !important; } .highlight-card[data-depth="2"]{ transform:scale(0.7) !important; opacity:0.25 !important; z-index:1; } .highlight-card[data-depth="1"]{ transform:scale(0.85) !important; opacity:0.5 !important; z-index:10; } .highlight-card[data-depth="0"]{ transform:scale(1.18) !important; opacity:1 !important; z-index:20; cursor:default; border:2px solid rgba(var(--hl-rgb), 0.85); box-shadow: 0 20px 40px rgba(var(--hl-rgb), 0.28), 0 0 20px rgba(0,0,0,0.8); } /* Frame color of the centered carousel card, per product page (brand-based). Falls back to the original violet if a page doesn't set it. */ .site-page{ --hl-rgb: 168,85,247; } #page-claude{ --hl-rgb: 217,119,87; } /* Claude terracotta orange */ #page-chatgpt{ --hl-rgb: 16,163,127; } /* ChatGPT green */ #page-gemini{ --hl-rgb: 66,133,244; } /* Gemini blue */ #page-creative{ --hl-rgb: 153,153,255; } /* Adobe CC: multicolor ring below, violet glow */ #page-streaming{ --hl-rgb: 229,9,20; } /* streaming red */ #page-vpn{ --hl-rgb: 0,200,255; } /* VPN: ice cyan (shield / network) */ #page-special{ --hl-rgb: 245,158,11; } /* specialized software: amber / pro tools */ /* Creative Cloud: multicolor frame — the gradient is painted on the border-box layer and shows through the transparent 2px border (works with the rounded corners and the card's overflow:hidden). */ #page-creative .highlight-card[data-depth="0"]{ border-color:transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, #31A8FF, #9999FF 35%, #FF61F6 65%, #FF9A00) border-box; } .highlight-card.wide{ width:var(--cf-w); min-height:360px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; } .highlight-card.stat{ width:var(--cf-w); min-height:360px; display:flex; align-items:center; justify-content:center; } /* Used by the simplified stat cards (just a duration/price badge row, no label/note) so their content sits at the bottom, same height as the neighboring photo cards' badge rows, instead of dead-center. */ .highlight-card.stat.stat-compact{ justify-content:flex-end; } .highlight-copy{ font-family: var(--font-sf); font-size:15.5px; line-height:1.35; } @media(max-width:640px){ .highlight-copy{ font-size:14px; line-height:1.35; } } .highlight-copy .muted{ color:var(--muted); font-weight:400; } .model-tiles{ display:flex; gap:8px; margin-top:18px; } .model-tile{ flex:1; min-width:0; aspect-ratio:1; border-radius:12px; background:var(--tile-grad); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(255,255,255,0.1); box-shadow:0 14px 28px -18px rgba(0,0,0,0.6); overflow:hidden; padding:4px; } .model-mark{ width:16px; height:16px; opacity:0.92; flex-shrink:0; } .model-tile span{ font-family: var(--font-sf); font-weight:600; font-size:9.5px; text-align:center; line-height:1.25; color:#fff; } .stat-bg{ position:absolute; inset:0; border-radius:inherit; background: radial-gradient(120% 100% at 30% 15%, #16281f, #04120c 70%); } .stat-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px; padding:30px; text-align:center; } .stat-label{ font-size:14px; color:var(--muted); } .stat-pill{ position:relative; font-family: var(--font-sf); font-weight:700; font-size:26px; background:linear-gradient(160deg,#3fd6ae,#124f3f); color:#ffffff !important; padding:16px 34px; border-radius:100px; forced-color-adjust: none; -webkit-text-fill-color:#ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.6), 0 0 1px rgba(0,0,0,0.8); box-shadow:0 0 60px rgba(47,191,159,0.55), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.18); } .stat-dot{ position:absolute; top:-6px; right:-4px; width:12px; height:12px; border-radius:50%; background:#D9F542; box-shadow:0 0 14px 5px rgba(217,245,66,0.55); } .stat-note{ font-size:12.5px; color:var(--muted); max-width:220px; } .highlights-controls{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:30px; } /* Coverflow arrows float at the lateral extremes of the section, vertically centered on the card row by JS (card-row height varies per subpage/content). */ /* Solid blue buttons with a white arrow so they never blend into the photos behind them. */ .ctrl-btn.hl-prev, .ctrl-btn.hl-next{ position:absolute; top:50%; transform:translateY(-50%); z-index:30; color:#fff; background: linear-gradient(135deg, #3B82F6, #1D4ED8); border:1.5px solid rgba(255,255,255,0.55); box-shadow: 0 6px 18px rgba(29,78,216,0.45), 0 0 0 3px rgba(0,0,0,0.18); } .ctrl-btn.hl-prev:hover, .ctrl-btn.hl-next:hover{ background: linear-gradient(135deg, #5A98FF, #2A5FEA); border-color:#fff; } .ctrl-btn.hl-prev:active, .ctrl-btn.hl-next:active{ transform:translateY(-50%) scale(0.92); } .ctrl-btn.hl-prev svg, .ctrl-btn.hl-next svg{ width:18px; height:18px; stroke-width:2.6; } .hl-prev{ left:8px; } .hl-next{ right:8px; } @media(max-width:640px){ .hl-prev{ left:6px; } .hl-next{ right:6px; } } /* The track runs edge to edge of the screen (cancels the page gutter) so the glow of the centered card fades out naturally instead of being cut by the gutter's invisible edge. */ .highlights-track{ margin-left:calc(-1 * var(--hl-gut)); margin-right:calc(-1 * var(--hl-gut)); } @media(max-width:767px){ .highlights-track{ --hl-gut:16px; } } @media(max-width:640px){ .highlight-card.wide, .highlight-card.stat{ min-height:280px; padding:26px; } .model-tile span{ font-size:11px; } } @keyframes cardFadeInSmooth{ from{ opacity:0.4; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } /* ---------- BUY MODAL ---------- */ .modal-overlay{ position:fixed; inset:0; z-index:1000; background: radial-gradient(120% 90% at 50% 0%, rgba(91,124,255,0.16), rgba(3,3,5,0.86) 62%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition: opacity .3s var(--ease); } .modal-overlay.open{ opacity:1; pointer-events:auto; } .modal-card{ width:min(400px, 100%); max-height:86vh; overflow-y:auto; background:var(--surface); color:var(--text); border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:34px; position:relative; transform: scale(0.94) translateY(10px); transform-origin: center; opacity:0; transition: transform .32s var(--ease), opacity .28s var(--ease); box-shadow: 0 60px 140px -30px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.04); } .modal-overlay.open .modal-card{ transform:scale(1) translateY(0); opacity:1; } .modal-close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.05); border:1px solid var(--line); color:var(--text); display:flex; align-items:center; justify-content:center; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .modal-close:hover{ background:rgba(255,255,255,0.09); border-color:var(--line-strong); transform:rotate(90deg); } .modal-close svg{ width:16px; height:16px; } .modal-eyebrow{ font-size:12px; font-weight:600; color:var(--accent); letter-spacing:0.04em; text-transform:uppercase; } .modal-card h3{ font-family: var(--font-sf); font-size:22px; font-weight:700; margin:8px 0 6px; letter-spacing:-0.01em; color:var(--text); } .modal-card > p{ font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:20px; } .modal-form{ display:flex; flex-direction:column; gap:13px; } .modal-form label{ font-size:11.5px; font-weight:600; color:var(--muted); display:flex; flex-direction:column; gap:6px; } .modal-form input, .modal-form select{ font-family: var(--font-sf); font-size:14px; padding:12px 13px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .modal-form input::placeholder{ color:var(--muted); opacity:0.7; } .modal-form select option{ background:var(--surface-2); color:var(--text); } .modal-form input:focus, .modal-form select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .phone-row{ display:flex; gap:8px; } .phone-row select{ flex:0 0 84px; min-width:0; } .phone-row input{ flex:1 1 auto; min-width:0; } @media(max-width:480px){ .modal-card{ padding:28px 22px; border-radius:18px; } .modal-card h3{ font-size:22px; } .phone-row select{ flex-basis:74px; padding-left:10px; padding-right:6px; } } .modal-submit{ margin-top:6px; width:100%; background: linear-gradient(160deg, var(--accent), var(--accent-rich)); color:#fff; font-weight:600; font-size:14px; padding:14px; border-radius:var(--radius-full); box-shadow: 0 14px 30px -10px rgba(62,90,224,0.55), inset 0 1px 0 rgba(255,255,255,0.16); transition: transform .16s var(--ease), box-shadow .2s var(--ease); } .modal-submit:hover{ transform:translateY(-1px); box-shadow: 0 18px 36px -10px rgba(62,90,224,0.65), inset 0 1px 0 rgba(255,255,255,0.16); } .modal-submit:active{ transform:scale(0.97); } .modal-success{ text-align:center; padding:20px 0 6px; display:none; } .modal-success.show{ display:block; } .success-icon{ width:56px; height:56px; border-radius:50%; margin:0 auto 20px; background:rgba(61,220,122,0.14); color:#3ddc7a; border:1px solid rgba(61,220,122,0.3); display:flex; align-items:center; justify-content:center; } .success-icon svg{ width:26px; height:26px; } .modal-success h3{ margin-top:0; color:var(--text); } .modal-success p{ font-size:14px; color:var(--muted); line-height:1.55; } /* ---------- "Empezar ahora" ORDER + QR PAYMENT MODAL ---------- */ .qr-card{ width:min(420px, 100%); } .qr-card [hidden]{ display:none !important; } #qrStepForm > p{ font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:20px; font-weight:400; } .qr-amount{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--accent-soft); border:1px solid var(--line-strong); font-size:12.5px; color:var(--muted); font-weight:600; } .qr-amount strong{ font-family:var(--font-sf); font-size:22px; color:var(--text); letter-spacing:-0.01em; } .qr-error{ color:#ff6b6b; font-size:13px; margin:-2px 0 0; } .qr-pay-btn{ display:flex; align-items:center; justify-content:center; gap:9px; } .qr-pay-btn svg{ width:18px; height:18px; flex-shrink:0; } .qr-summary{ margin:10px 0 16px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line-strong); font-size:13px; line-height:1.7; color:var(--muted); } .qr-summary b{ color:var(--text); font-weight:600; } .qr-summary .qr-total{ display:block; margin-top:4px; font-size:16px; color:var(--text); } .qr-image{ display:block; width:min(240px, 100%); height:auto; margin:0 auto 10px; border-radius:18px; box-shadow:0 14px 34px -12px rgba(0,0,0,0.5); } .qr-download{ display:block; text-align:center; font-size:12px; color:var(--accent); font-weight:600; margin-bottom:14px; text-decoration:underline; text-underline-offset:3px; } .qr-steps{ margin:18px 0 0; padding-left:20px; font-size:13px; color:var(--muted); line-height:1.6; } .qr-steps li{ margin-bottom:4px; } .qr-steps b{ color:var(--text); font-weight:600; } .qr-wa-btn{ display:flex; align-items:center; justify-content:center; gap:9px; background:#1fbf5c; color:#fff; font-weight:600; font-size:14px; padding:14px; border-radius:var(--radius-full); box-shadow:0 14px 30px -10px rgba(31,191,92,0.55), inset 0 1px 0 rgba(255,255,255,0.16); transition: transform .16s var(--ease), box-shadow .2s var(--ease); } .qr-wa-btn:hover{ transform:translateY(-1px); } .qr-wa-btn svg{ width:18px; height:18px; flex-shrink:0; } .qr-back{ display:block; margin:14px auto 0; font-size:12.5px; color:var(--muted); font-weight:600; background:none; border:0; cursor:pointer; } .qr-back:hover{ color:var(--text); } /* ---------- FOCUS PICKER: custom dropdown for the order form's selects ---------- Same idea as the Apple-style "focus list": the option under the lens is crisp, blue and glowing; the rest turn gray and blur/shrink with distance. The native