:root { --wd-text-font: "Lato", Arial, Helvetica, sans-serif; --wd-text-font-weight: 400; --wd-text-color: rgb(118,118,118); --wd-text-font-size: 15px; --wd-title-font: "Lato", Arial, Helvetica, sans-serif; --wd-title-font-weight: 700; --wd-title-color: #242424; --wd-entities-title-font: "Lato", Arial, Helvetica, sans-serif; --wd-entities-title-font-weight: 700; --wd-entities-title-color: #333333; --wd-entities-title-color-hover: rgb(51 51 51 / 65%); --wd-alternative-font: "Satisfy", Arial, Helvetica, sans-serif; --wd-widget-title-font: "Lato", Arial, Helvetica, sans-serif; --wd-widget-title-font-weight: 700; --wd-widget-title-transform: uppercase; --wd-widget-title-color: #333; --wd-widget-title-font-size: 16px; --wd-header-el-font: "Lato", Arial, Helvetica, sans-serif; --wd-header-el-font-weight: 700; --wd-header-el-transform: uppercase; --wd-header-el-font-size: 13px; --wd-otl-style: dotted; --wd-otl-width: 2px; --wd-primary-color: rgb(123,187,221); --wd-alternative-color: #fbbc34; --btn-default-bgcolor: #f7f7f7; --btn-default-bgcolor-hover: #efefef; --btn-accented-bgcolor: rgb(123,187,221); --btn-accented-bgcolor-hover: rgb(103,167,202); --wd-form-brd-width: 1px; --notices-success-bg: #459647; --notices-success-color: #fff; --notices-warning-bg: #E0B252; --notices-warning-color: #fff; --wd-link-color: #333333; --wd-link-color-hover: #242424; } .wd-age-verify-wrap { --wd-popup-width: 500px; } .wd-popup.wd-promo-popup { background-color: #111111; background-image: url(); background-repeat: no-repeat; background-size: cover; background-position: center center; } .wd-promo-popup-wrap { --wd-popup-width: 800px; --wd-popup-padding: 15px; } :is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content { max-height: 223px; } .wd-footer { background-color: #ffffff; background-image: url(https://bellaragazza.com.pe/wp-content/uploads/2025/09/Recurso-5@3x-8-scaled.png); } :is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) { background-image: url(https://bellaragazza.com.pe/wp-content/uploads/2025/09/Recurso-5@3x-8-scaled.png); } .mfp-wrap.wd-popup-quick-view-wrap { --wd-popup-width: 920px; } :root{ --wd-container-w: 1222px; --wd-form-brd-radius: 0px; --btn-default-color: #333; --btn-default-color-hover: #333; --btn-accented-color: #fff; --btn-accented-color-hover: #fff; --btn-default-brd-radius: 0px; --btn-default-box-shadow: none; --btn-default-box-shadow-hover: none; --btn-default-box-shadow-active: none; --btn-default-bottom: 0px; --btn-accented-bottom-active: -1px; --btn-accented-brd-radius: 0px; --btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); --btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15); --wd-brd-radius: 0px; } @media (min-width: 1222px) { section.elementor-section.wd-section-stretch > .elementor-container { margin-left: auto; margin-right: auto; } } .wd-page-title { background-color: #0a0a0a; } /* ============================================================================ BELLA RAGAZZA — CSS GLOBAL PARA ELEMENTOR ---------------------------------------------------------------------------- PEGA ESTE ARCHIVO COMPLETO, UNA SOLA VEZ, EN: Elementor → Ajustes del sitio → CSS personalizado (Elementor Pro) o bien Apariencia → Personalizar → CSS adicional (cualquier WP) o bien style.css de tu tema hijo NO lo repitas en cada sección. Va una vez y sirve para toda la página. El fondo de París va incrustado como data URI: no hay que subir ningún SVG. ========================================================================== */ /* ---- Fuentes de marca ---- */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Yellowtail&display=swap'); /* ============================================================================ CAPA DE COMPATIBILIDAD CON ELEMENTOR Hace que cada sección pegada en un widget HTML se comporte como si fuera una sección nativa a sangre completa, sin tener que tocar ajustes. ========================================================================== */ /* Las secciones rompen el contenedor de Elementor y ocupan todo el ancho. --br-sbw lo calcula el JS: es el ancho de la barra de scroll. Sin él, 100vw provoca scroll horizontal en Windows. */ .elementor-widget-html > .elementor-widget-container > section, .elementor-widget-html > .elementor-widget-container > header, .elementor-widget-html > .elementor-widget-container > .marquee, .elementor-widget-html > .elementor-widget-container > .preload, .elementor-widget-html > .elementor-widget-container > .progress{ width:calc(100vw - var(--br-sbw,0px)); margin-left:calc(50% - (100vw - var(--br-sbw,0px)) / 2); max-width:none; } /* El widget no debe añadir su propio espaciado ni recortar los pines */ .elementor-widget-html > .elementor-widget-container{ padding:0;margin:0;overflow:visible; } /* ScrollTrigger necesita que ningún ancestro recorte ni transforme. Si un carrusel horizontal no se fija, revisa el overflow del contenedor. */ .elementor-widget-html, .elementor-widget-html .elementor-widget-container{overflow:visible} /* El theme puede imponer max-width a los

/

dentro del widget */ .elementor-widget-html p, .elementor-widget-html h1,.elementor-widget-html h2, .elementor-widget-html h3,.elementor-widget-html h4{max-width:none} /* Evita que el tema pinte de nuevo los enlaces y listas de las secciones */ .elementor-widget-html a{text-decoration:none;box-shadow:none} .elementor-widget-html ul,.elementor-widget-html ol{list-style:none;margin:0;padding:0} .elementor-widget-html img{display:block} /* Algunos temas fuerzan overflow-x:hidden en wrappers; lo necesitamos en body */ html,body{overflow-x:hidden} /* ============================================================================ A PARTIR DE AQUÍ: EL CSS MAESTRO DEL LANDING (sin cambios) ========================================================================== */ /* ============================================================================ BELLA RAGAZZA — MASTER CSS · v2 (identidad de catálogo) Paleta crema/durazno + morado de marca + line-art de París Motion: scroll cinematográfico (Lenis + GSAP ScrollTrigger) ---------------------------------------------------------------------------- 01. Tokens y reset 11. Tecnología de reticulación 02. Tipografía 12. Gráficos de datos 03. Layout 13. Línea facial (scroll horizontal) 04. Fondo París 14. Tabla comparativa 05. Componentes base 15. Línea corporal 06. Preloader 16. Exosomas 07. Navegación 17. Mapa de profundidades 08. Hero 18. Protocolo · Métricas · FAQ 09. Marquee 19. CTA · Footer 10. Beneficios 20. Animaciones · Responsive ========================================================================== */ /* ===== 01. TOKENS Y RESET ================================================= */ :root{ /* Superficies — muestreadas del catálogo oficial */ --cream:#FDEBDD; /* fondo base durazno */ --paper:#FEF5EE; /* papel claro */ --paper-2:#FFF9F4; --peach:#FBE0CE; --line:#F0D9C6; --line-soft:#F6E7DA; /* Marca */ --purple:#90348B; /* morado oficial */ --purple-d:#6B2468; --purple-xd:#4A1848; --lilac:#E3D0E6; /* lavanda de las curvas */ --lilac-2:#C9A8DC; --lilac-wash:#F3EAF6; --coral:#E0401F; /* script de nombres de producto */ /* Datos — validados para fondo crema (ΔE deutan 13.0, contraste ≥ 3:1) */ --data-a:#90348B; --data-b:#0094C4; --aqua-tint:#7FCBDB; /* decorativo, nunca marca de dato */ /* Tinta */ --ink:#1F1319; --ink-2:#55424D; --ink-3:#8B7681; --ink-4:#B9A6AF; /* Exosomas — color por línea */ --exo-hair:#0094C4; --exo-bright:#D6246E; --exo-wrinkle:#2B3F94; --exo-artem:#2E9E5B; --exo-sol:#6B4FA8; /* Tipografía */ --sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --script:'Yellowtail',cursive; /* Ritmo */ --gutter:clamp(20px,5vw,72px); --max:1440px; --sect:clamp(84px,12vh,160px); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-stopped{overflow:hidden} body{ margin:0;background:var(--cream);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:none;background:none;cursor:pointer} ul,ol{margin:0;padding:0;list-style:none} table{border-collapse:collapse;width:100%} ::selection{background:var(--purple);color:#fff} /* ===== 02. TIPOGRAFÍA ===================================================== */ .display{font-size:clamp(40px,6.2vw,98px);line-height:1;letter-spacing:-.035em;font-weight:700;margin:0} .h1{font-size:clamp(30px,5vw,66px);line-height:1.06;letter-spacing:-.03em;font-weight:700;margin:0} .h2{font-size:clamp(26px,3.6vw,48px);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin:0} .h3{font-size:clamp(19px,2vw,26px);line-height:1.22;letter-spacing:-.015em;font-weight:600;margin:0} .lead{font-size:clamp(15.5px,1.25vw,18.5px);line-height:1.7;color:var(--ink-2);margin:0;font-weight:400} .body{font-size:15px;line-height:1.75;color:var(--ink-3);margin:0} .tiny{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:0} .num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} /* Script de marca — nombres de producto */ .script{font-family:var(--script);font-weight:400;color:var(--coral); letter-spacing:.005em;line-height:1.25;display:inline-block} .script--purple{color:var(--purple)} .script--lg{font-size:clamp(34px,5vw,64px)} .eyebrow{display:inline-flex;align-items:center;gap:9px; font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--purple);margin:0} .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--purple);flex:none} .eyebrow--light{color:rgba(255,255,255,.72)} .eyebrow--light::before{background:var(--lilac-2)} /* ===== 03. LAYOUT ========================================================= */ .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .wrap--narrow{max-width:1080px} .section{padding-block:var(--sect);position:relative} .grid{display:grid;gap:clamp(20px,2.4vw,36px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center} .stack-sm>*+*{margin-top:12px} .stack>*+*{margin-top:20px} .center{text-align:center} .head{max-width:620px;position:relative;z-index:2} .head--center{max-width:700px;margin-inline:auto;text-align:center} /* ===== 04. FONDO PARÍS ==================================================== */ .paris{position:relative;isolation:isolate} .paris::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%221100%22%20viewBox%3D%220%200%20900%201100%22%20fill%3D%22none%22%20stroke%3D%22%23D9906A%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%221%22%3E%20%3C!--%20%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20BELLA%20RAGAZZA%20%C2%B7%20Fondo%20line-art%20de%20Par%C3%ADs%20Se%20usa%20como%20textura%20de%20fondo%20a%20baja%20opacidad%20(ver%20master.css)%20%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%3D%20--%3E%20%3C!--%20----------%20Torre%20Eiffel%20(centro)%20----------%20--%3E%20%3Cg%20transform%3D%22translate(430%2C120)%22%3E%20%3Cpath%20d%3D%22M20%200h10v22h-10z%22%2F%3E%20%3Cpath%20d%3D%22M25%2022v18%22%2F%3E%20%3Cpath%20d%3D%22M14%2040h22M12%2046h26%22%2F%3E%20%3Cpath%20d%3D%22M18%2046%202%20170M32%2046l16%20124%22%2F%3E%20%3Cpath%20d%3D%22M8%20118h34M4%20170h42%22%2F%3E%20%3Cpath%20d%3D%22M12%20118%20-8%20300M38%20118%2058%20300%22%2F%3E%20%3Cpath%20d%3D%22M-14%20300h78%22%2F%3E%20%3Cpath%20d%3D%22M-8%20300-40%20430M58%20300%2090%20430%22%2F%3E%20%3Cpath%20d%3D%22M-46%20430h142%22%2F%3E%20%3Cpath%20d%3D%22M-20%20300%2025%20430M70%20300%2025%20430%22%20opacity%3D%22.5%22%2F%3E%20%3Cpath%20d%3D%22M-2%20170%2025%20300M52%20170%2025%20300%22%20opacity%3D%22.5%22%2F%3E%20%3Cpath%20d%3D%22M-24%20360h98%22%20opacity%3D%22.6%22%2F%3E%20%3Cpath%20d%3D%22M-34%20400h118%22%20opacity%3D%22.6%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Arco%20del%20Triunfo%20(arriba%20derecha)%20----------%20--%3E%20%3Cg%20transform%3D%22translate(720%2C60)%22%3E%20%3Cpath%20d%3D%22M0%20150V26a6%206%200%200%201%206-6h108a6%206%200%200%201%206%206v124%22%2F%3E%20%3Cpath%20d%3D%22M0%20150h120%22%2F%3E%20%3Cpath%20d%3D%22M36%20150V86a24%2024%200%200%201%2048%200v64%22%2F%3E%20%3Cpath%20d%3D%22M0%2040h120M0%20118h120%22%2F%3E%20%3Cpath%20d%3D%22M22%20118v32M98%20118v32%22%2F%3E%20%3Cpath%20d%3D%22M14%2056v46M106%2056v46%22%20opacity%3D%22.6%22%2F%3E%20%3Cpath%20d%3D%22M42%2046h36%22%20opacity%3D%22.6%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Notre%20Dame%20(izquierda)%20----------%20--%3E%20%3Cg%20transform%3D%22translate(40%2C70)%22%3E%20%3Cpath%20d%3D%22M0%20200V60h40v140M78%20200V60h40v140%22%2F%3E%20%3Cpath%20d%3D%22M0%20200h118%22%2F%3E%20%3Cpath%20d%3D%22M40%20200V98h38v102%22%2F%3E%20%3Ccircle%20cx%3D%2259%22%20cy%3D%2276%22%20r%3D%2217%22%2F%3E%20%3Cpath%20d%3D%22M59%2059v34M42%2076h34%22%20opacity%3D%22.55%22%2F%3E%20%3Cpath%20d%3D%22M8%2060V40h24v20M86%2060V40h24v20%22%2F%3E%20%3Cpath%20d%3D%22M10%20112h20v38H10zM88%20112h20v38H88%22%2F%3E%20%3Cpath%20d%3D%22M50%20140a9%209%200%200%201%2018%200v28H50z%22%2F%3E%20%3Cpath%20d%3D%22M0%20160h118%22%20opacity%3D%22.5%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Pir%C3%A1mide%20del%20Louvre%20(izquierda%2C%20medio)%20----------%20--%3E%20%3Cg%20transform%3D%22translate(60%2C520)%22%3E%20%3Cpath%20d%3D%22M90%200%20180%20112H0z%22%2F%3E%20%3Cpath%20d%3D%22M90%200v112%22%2F%3E%20%3Cpath%20d%3D%22M45%2056h90M22%2084h136%22%20opacity%3D%22.6%22%2F%3E%20%3Cpath%20d%3D%22M58%200%200%20112M122%200l58%20112%22%20opacity%3D%22.35%22%2F%3E%20%3Cpath%20d%3D%22M-30%20112h240%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Mont%20Saint-Michel%20(derecha%2C%20medio)%20----------%20--%3E%20%3Cg%20transform%3D%22translate(690%2C480)%22%3E%20%3Cpath%20d%3D%22M0%20190c22-14%2032-44%2040-74s24-46%2046-46%2038%2016%2046%2046%2018%2060%2040%2074z%22%2F%3E%20%3Cpath%20d%3D%22M86%2070V28%22%2F%3E%20%3Cpath%20d%3D%22M86%2028l-9%2014h18z%22%2F%3E%20%3Cpath%20d%3D%22M52%20120h68v70H52z%22%2F%3E%20%3Cpath%20d%3D%22M64%20136h12v18H64zM96%20136h12v18H96z%22%20opacity%3D%22.6%22%2F%3E%20%3Cpath%20d%3D%22M26%20158h26v32H26zM120%20158h26v32h-26z%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M0%20190h172%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Moulin%20Rouge%20%2F%20molino%20(abajo%20centro)%20----------%20--%3E%20%3Cg%20transform%3D%22translate(380%2C790)%22%3E%20%3Cpath%20d%3D%22M30%20170V86l34-30%2034%2030v84z%22%2F%3E%20%3Cpath%20d%3D%22M30%20170h68%22%2F%3E%20%3Cpath%20d%3D%22M55%20120h18v50H55z%22%2F%3E%20%3Cpath%20d%3D%22M64%2056V30%22%2F%3E%20%3Cg%20transform%3D%22translate(64%2C30)%22%3E%20%3Cpath%20d%3D%22M0%200%204-52-4-52zM0%200%2052-4%2052%204zM0%200-4%2052%204%2052zM0%200-52%204-52-4z%22%2F%3E%20%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%225%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D%22M14%20170h100%22%20opacity%3D%22.6%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Edificio%20haussmanniano%20(abajo%20izquierda)%20----------%20--%3E%20%3Cg%20transform%3D%22translate(30%2C840)%22%3E%20%3Cpath%20d%3D%22M0%20160V46l16-16h108l16%2016v114z%22%2F%3E%20%3Cpath%20d%3D%22M0%20160h140%22%2F%3E%20%3Cpath%20d%3D%22M0%2076h140M0%20112h140%22%20opacity%3D%22.55%22%2F%3E%20%3Cpath%20d%3D%22M18%2052h16v18H18zM62%2052h16v18H62zM106%2052h16v18h-16z%22%2F%3E%20%3Cpath%20d%3D%22M18%2088h16v18H18zM62%2088h16v18H62zM106%2088h16v18h-16z%22%2F%3E%20%3Cpath%20d%3D%22M18%20124h16v30H18zM62%20124h16v30H62zM106%20124h16v30h-16z%22%2F%3E%20%3Cpath%20d%3D%22M44%2030%2070%2012%2096%2030%22%20opacity%3D%22.6%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Arco%20de%20triunfo%20peque%C3%B1o%20(abajo%20derecha)%20----------%20--%3E%20%3Cg%20transform%3D%22translate(700%2C880)%22%3E%20%3Cpath%20d%3D%22M0%20120V22h96v98%22%2F%3E%20%3Cpath%20d%3D%22M0%20120h96%22%2F%3E%20%3Cpath%20d%3D%22M28%20120V74a20%2020%200%200%201%2040%200v46%22%2F%3E%20%3Cpath%20d%3D%22M0%2040h96M0%2096h96%22%20opacity%3D%22.55%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Volutas%20%2F%20flourishes%20----------%20--%3E%20%3Cg%20opacity%3D%22.75%22%3E%20%3Cpath%20d%3D%22M160%20300c40-26%2074%206%2042%2030s-70-16-30-38%2096-4%2096%2028%22%2F%3E%20%3Cpath%20d%3D%22M268%20320c0-14%2012-24%2026-20%22%2F%3E%20%3Cpath%20d%3D%22M600%20330c-38-26-72%206-40%2030s68-16%2028-38-94-4-94%2028%22%2F%3E%20%3Cpath%20d%3D%22M250%20690c34-22%2064%206%2036%2026s-60-14-26-32%2082-4%2082%2024%22%2F%3E%20%3Cpath%20d%3D%22M540%20700c-32-22-62%206-34%2026s58-14%2024-32-80-4-80%2024%22%2F%3E%20%3Cpath%20d%3D%22M300%201020c46-20%2086%204%20118%200s52-20%2052-20%22%2F%3E%20%3Cpath%20d%3D%22M470%201000c22%206%2044%2022%2078%2022s62-18%2062-18%22%20opacity%3D%22.6%22%2F%3E%20%3C%2Fg%3E%20%3C!--%20----------%20Peque%C3%B1os%20detalles%20----------%20--%3E%20%3Cg%20opacity%3D%22.55%22%3E%20%3Cpath%20d%3D%22M820%20300c0-18%2014-30%2030-30s30%2012%2030%2030v44h-60z%22%2F%3E%20%3Cpath%20d%3D%22M850%20270v-16%22%2F%3E%20%3Cpath%20d%3D%22M820%20344h60%22%2F%3E%20%3Cpath%20d%3D%22M14%20440h44v38H14zM22%20440v-14h28v14%22%2F%3E%20%3Cpath%20d%3D%22M14%20478h44%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); background-size:760px auto;background-repeat:repeat;background-position:center top; opacity:.26; } .paris--soft::before{opacity:.15} .paris--xl::before{background-size:1020px auto;opacity:.2} /* ===== 05. COMPONENTES BASE =============================================== */ /* -- Botones -- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 28px;border-radius:999px;font-size:13.5px;font-weight:600; transition:transform .4s var(--ease),background .3s,color .3s,border-color .3s;cursor:pointer} .btn svg{width:15px;height:15px;flex:none;transition:transform .4s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn:hover svg{transform:translateX(4px)} .btn--purple{background:var(--purple);color:#fff} .btn--purple:hover{background:var(--purple-d);color:#fff} .btn--light{background:var(--paper);color:var(--ink);border:1px solid var(--line)} .btn--light:hover{border-color:var(--purple);color:var(--purple)} .btn--ghost{border:1px solid rgba(255,255,255,.34);color:#fff} .btn--ghost:hover{background:rgba(255,255,255,.12)} .btn--sm{padding:11px 20px;font-size:12.5px} /* -- Pill flotante -- */ .pill{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px; padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.92); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 26px rgba(31,19,25,.11); font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap} .pill i{width:6px;height:6px;border-radius:50%;background:var(--purple);flex:none} .pill--lilac i{background:var(--lilac-2)} .pill--coral i{background:var(--coral)} .pill--aqua i{background:var(--data-b)} .pill b{font-weight:500;color:var(--ink-3);font-size:11.5px} /* -- Tarjeta -- */ .card{background:var(--paper);border:1px solid var(--line);border-radius:18px; padding:clamp(22px,2.3vw,32px); transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)} .card:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(144,52,139,.10)} .card__n{font-family:var(--script);font-size:32px;color:var(--lilac-2);line-height:1; margin-bottom:14px;display:block} /* -- Marcador de imagen pendiente -- */ .ph{position:relative;width:100%;height:100%;display:grid;place-items:center; background:radial-gradient(120% 85% at 50% 18%,rgba(255,255,255,.6),transparent 62%), linear-gradient(165deg,var(--peach),var(--lilac) 70%,var(--lilac-2))} .ph::after{content:attr(data-label);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:rgba(31,19,25,.3);font-weight:600;padding:0 18px;text-align:center;line-height:1.9} /* -- Arco -- */ .arch{position:relative;overflow:hidden;aspect-ratio:3/4; border-radius:50% 50% 16px 16px / 34% 34% 16px 16px;background:var(--lilac)} .arch img{width:100%;height:100%;object-fit:cover} /* -- Retícula -- */ .reticle{position:absolute;z-index:2;width:60px;height:60px;pointer-events:none} .reticle--sm{width:50px;height:50px} .reticle--xs{width:42px;height:42px} .reticle svg{width:100%;height:100%;overflow:visible} .reticle .ring{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.1} .reticle .tick{stroke:rgba(255,255,255,.95);stroke-width:1.3;stroke-linecap:round} .reticle .core{fill:rgba(255,255,255,.9)} .reticle__pulse{position:absolute;inset:0;border-radius:50%; border:1px solid rgba(255,255,255,.6);animation:reticlePulse 3.2s var(--ease-out) infinite} @keyframes reticlePulse{0%{transform:scale(.55);opacity:.85}70%{transform:scale(1.5);opacity:0}100%{opacity:0}} /* -- Estrellas de reticulación (★ del catálogo) -- */ .stars{display:inline-flex;gap:3px;align-items:center} .stars i{width:13px;height:13px;display:block;background:var(--data-b); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} .stars i.off{background:var(--line)} .stars--purple i{background:var(--purple)} /* -- Tarjeta de datos flotante -- */ .datacard{background:rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.75);border-radius:16px;padding:20px 22px; box-shadow:0 20px 48px rgba(31,19,25,.13);min-width:252px} .datacard__top{display:flex;align-items:center;justify-content:space-between; padding-bottom:12px;border-bottom:1px solid var(--line-soft)} .datacard__top .eyebrow{font-size:9.5px} .datacard__pct{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--purple)} .datacard__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:11px 0;border-bottom:1px solid var(--line-soft)} .datacard__row:last-child{border-bottom:none;padding-bottom:0} .datacard__row span{font-size:12.5px;color:var(--ink-3)} .datacard__row b{font-size:18px;font-weight:600;letter-spacing:-.02em} /* ===== 06. PRELOADER ====================================================== */ .preload{position:fixed;inset:0;z-index:999;background:var(--cream);display:grid;place-items:center} .preload__inner{text-align:center} /* Logo oficial: base tenue + relleno que avanza con la carga */ .preload__logo{width:min(340px,62vw);margin:0 auto 28px; opacity:0;transform:translateY(12px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} .preload__logo.in{opacity:1;transform:none} .preload__logo svg{width:100%;height:auto;display:block} .preload__logo-base{fill:rgba(31,19,25,.13)} .preload__logo-fill{fill:var(--ink)} .preload__bar{width:min(220px,46vw);height:2px;background:var(--line);margin:0 auto; overflow:hidden;border-radius:2px} .preload__bar i{display:block;height:100%;width:0;background:var(--purple)} .preload__pct{margin-top:14px;font-size:10.5px;letter-spacing:.22em;color:var(--ink-3);font-weight:600} body.is-loading{overflow:hidden} /* ===== 07. NAVEGACIÓN ===================================================== */ .nav{position:fixed;top:0;left:0;right:0;z-index:90;padding:18px var(--gutter); transition:transform .6s var(--ease),background .4s,border-color .4s,padding .4s; border-bottom:1px solid transparent} .nav.is-stuck{background:rgba(253,235,221,.86);backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);border-bottom-color:var(--line);padding-block:12px} .nav.is-hidden{transform:translateY(-110%)} .nav__in{max-width:var(--max);margin-inline:auto;display:grid; grid-template-columns:1fr auto 1fr;align-items:center;gap:20px} .nav__brand{justify-self:center;grid-column:2;display:block;width:clamp(124px,12vw,168px); transition:opacity .3s} .nav__brand:hover{opacity:.65} .nav__brand svg{width:100%;height:auto;display:block;fill:var(--ink)} .nav__links{display:flex;align-items:center;gap:28px;grid-column:1} .nav__link{font-size:13px;font-weight:500;color:var(--ink-2);position:relative;padding-block:4px;transition:color .3s} .nav__link::after{content:'';position:absolute;left:0;bottom:0;height:1.5px;width:0; background:var(--purple);transition:width .45s var(--ease)} .nav__link:hover{color:var(--purple)} .nav__link:hover::after{width:100%} .nav__actions{display:flex;align-items:center;gap:12px;justify-self:end;grid-column:3} .nav__burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line); align-items:center;justify-content:center;background:var(--paper)} .nav__burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative} .nav__burger span::before,.nav__burger span::after{content:'';position:absolute;left:0;width:16px; height:1.5px;background:var(--ink);transition:transform .4s var(--ease)} .nav__burger span::before{top:-5px}.nav__burger span::after{top:5px} .nav.is-open .nav__burger span{background:transparent} .nav.is-open .nav__burger span::before{transform:translateY(5px) rotate(45deg)} .nav.is-open .nav__burger span::after{transform:translateY(-5px) rotate(-45deg)} .nav__drawer{position:fixed;inset:0;z-index:89;background:var(--cream); padding:110px var(--gutter) 40px;transform:translateY(-100%); transition:transform .7s var(--ease-out);display:flex;flex-direction:column;justify-content:space-between} .nav__drawer.is-open{transform:translateY(0)} .nav__drawer a{font-size:clamp(26px,6.6vw,42px);font-weight:600;letter-spacing:-.03em; display:block;padding-block:10px;border-bottom:1px solid var(--line)} .nav__drawer a .script{font-size:1.05em} .progress{position:fixed;top:0;left:0;height:2.5px;width:100%;z-index:95;transform-origin:0 50%} .progress i{display:block;height:100%;width:100%;background:var(--purple);transform:scaleX(0);transform-origin:0 50%} /* ===== 08. HERO (split: texto · imagen) ================================= */ .hero{position:relative;background:var(--cream);overflow:hidden; padding:clamp(96px,11vh,130px) 0 clamp(26px,5vh,54px)} .hero__grid{max-width:var(--max);margin-inline:auto; display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr); align-items:center;gap:0;min-height:min(78vh,760px)} /* ---- Columna de texto ---- */ .hero__col{position:relative;z-index:6;padding-inline:var(--gutter) clamp(20px,3vw,48px); display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.8vh,22px)} .hero__badge{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px; background:#fff;border:1px solid var(--line);font-size:10.5px;font-weight:600; letter-spacing:.17em;text-transform:uppercase;color:var(--purple)} .hero__badge i{width:6px;height:6px;border-radius:50%;background:var(--purple); animation:dotPulse 2.4s infinite} @keyframes dotPulse{0%{box-shadow:0 0 0 0 rgba(144,52,139,.5)} 70%{box-shadow:0 0 0 11px rgba(144,52,139,0)}100%{box-shadow:0 0 0 0 rgba(144,52,139,0)}} .hero__title{margin:0} .hero__title .display{font-size:clamp(38px,4.6vw,76px)} .hero__title .script{display:block;margin-top:.06em;font-size:clamp(30px,3.5vw,56px)} .hero__word{font-family:var(--script);font-size:clamp(32px,3.8vw,62px);line-height:1; color:var(--purple);margin:0} .hero__note{max-width:42ch} .hero__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .hero__social{display:flex;align-items:center;gap:11px} .hero__avs{display:flex} .hero__avs span{width:30px;height:30px;border-radius:50%;border:2px solid var(--cream); margin-left:-9px;background:linear-gradient(140deg,var(--lilac),var(--lilac-2))} .hero__avs span:first-child{margin-left:0} .hero__social p{margin:0} /* ---- Columna de imagen ---- */ .hero__visual{position:relative;align-self:stretch;min-height:min(78vh,760px); border-radius:clamp(14px,1.6vw,24px) 0 0 clamp(14px,1.6vw,24px);overflow:hidden} .hero__media{position:absolute;inset:0;z-index:1} .hero__media img,.hero__media .ph{width:100%;height:100%;object-fit:cover; object-position:var(--hero-x,36%) var(--hero-y,center)} /* El fondo de la foto es verde menta (#E7F6F3): este velo cálido lo acerca a la paleta crema de la marca sin alterar el tono de piel. */ .hero__warm{position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(135deg,rgba(253,235,221,.42),rgba(251,224,206,.26) 55%,rgba(227,208,230,.3)); mix-blend-mode:multiply;opacity:.75} /* Funde el borde izquierdo de la foto con la columna de texto */ .hero__blend{position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(90deg,var(--cream) 0%,rgba(253,235,221,.82) 7%, rgba(253,235,221,.3) 16%,rgba(253,235,221,0) 28%)} /* Retículas y etiquetas: cada una con su propio left/top en % de la columna, así se recolocan solas al cambiar de tamaño la pantalla. */ .hero__visual .reticle, .hero__visual .pill{position:absolute;z-index:5;transform:translate(-50%,-50%)} .hero__card{position:absolute;right:clamp(16px,2vw,30px);bottom:clamp(16px,2.4vw,34px);z-index:6} .hero__scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:7; display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9.5px; letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);font-weight:600} .hero__scroll i{display:block;width:1.5px;height:30px; background:linear-gradient(var(--lilac-2),transparent);animation:scrollHint 2.2s var(--ease) infinite} @keyframes scrollHint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* Sellos del catálogo (ISO · CE · Francia) */ .seals{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .seal{width:38px;height:38px;border-radius:50%;background:var(--purple);color:#fff; display:grid;place-items:center;font-size:9.5px;font-weight:700; line-height:1.05;text-align:center;transition:transform .4s var(--ease)} .seal:hover{transform:translateY(-3px) scale(1.06)} .seal--fr{background:linear-gradient(90deg,#0055A4 33.3%,#fff 33.3% 66.6%,#EF4135 66.6%); border:1px solid var(--line)} .seal svg{width:18px;height:18px;fill:#fff} /* ===== 09. MARQUEE ======================================================== */ .marquee{border-block:1px solid var(--line);background:var(--paper);padding-block:18px;overflow:hidden} .marquee__track{display:flex;width:max-content;animation:marquee 44s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__set{display:flex;align-items:center;gap:36px;padding-right:36px} .marquee__set span{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-2);white-space:nowrap} .marquee__set i{width:5px;height:5px;border-radius:50%;background:var(--lilac-2);flex:none} @keyframes marquee{to{transform:translateX(-50%)}} /* ===== 10. BENEFICIOS ===================================================== */ .ben__icons{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,30px); margin-top:clamp(36px,4.4vw,60px)} .ben__ico{text-align:center} .ben__circle{width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);border-radius:50%; background:var(--purple);display:grid;place-items:center;margin:0 auto 18px; transition:transform .5s var(--ease-out),background .4s} .ben__ico:hover .ben__circle{transform:translateY(-7px) scale(1.04);background:var(--purple-d)} .ben__circle svg{width:clamp(30px,3.4vw,44px);height:clamp(30px,3.4vw,44px); stroke:#fff;fill:none;stroke-width:1.6} .ben__circle b{color:#fff;font-size:clamp(13px,1.5vw,18px);font-weight:700;line-height:1.08;text-align:center} .ben__ico h4{font-size:clamp(16px,1.7vw,21px);font-weight:600;color:var(--purple); margin:0;line-height:1.2;letter-spacing:-.015em} .ben__bars{margin-top:clamp(44px,5.4vw,78px);display:flex;flex-direction:column;gap:14px} .ben__bar{display:grid;grid-template-columns:clamp(150px,19vw,250px) 1fr;gap:clamp(18px,3vw,44px); align-items:center;background:var(--paper);border-radius:0 999px 999px 0; border-left:4px solid var(--purple);padding:clamp(18px,2vw,26px) clamp(24px,3vw,44px); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)} .ben__bar:hover{transform:translateX(7px);box-shadow:0 18px 44px rgba(144,52,139,.1)} .ben__bar h4{font-size:clamp(19px,2.3vw,30px);font-weight:700;color:var(--purple); margin:0;line-height:1.08;letter-spacing:-.02em} .ben__bar p{font-size:clamp(13.5px,1.25vw,16px);line-height:1.6;color:var(--ink-2);margin:0;font-weight:500} /* ===== 11. TECNOLOGÍA DE RETICULACIÓN ===================================== */ .tech__flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center; gap:clamp(10px,1.6vw,24px);background:var(--paper);border-radius:999px; border-left:4px solid var(--purple);padding:clamp(22px,2.6vw,36px) clamp(26px,3.4vw,52px); margin-top:clamp(32px,4vw,52px)} .tech__step{text-align:center} .tech__disc{width:clamp(76px,9vw,124px);height:clamp(76px,9vw,124px);border-radius:50%; border:1.5px solid var(--line);display:grid;place-items:center;margin:0 auto 12px; background:var(--paper-2);transition:border-color .4s,transform .5s var(--ease-out)} .tech__step:hover .tech__disc{border-color:var(--purple);transform:translateY(-5px)} .tech__disc svg{width:62%;height:62%;overflow:visible} .tech__step p{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0;line-height:1.4} .tech__arrow{color:var(--data-b);display:grid;place-items:center} .tech__arrow svg{width:clamp(20px,2.4vw,34px);height:auto;stroke:currentColor;fill:none;stroke-width:2} .tech__cap{font-size:clamp(15px,1.5vw,19px);font-weight:600;color:var(--purple); margin:18px 0 0;text-align:center;letter-spacing:-.01em} /* ===== 12. GRÁFICOS DE DATOS ============================================== */ .chart{background:var(--paper);border-radius:22px;border-left:4px solid var(--purple); padding:clamp(24px,3vw,40px) clamp(26px,3.4vw,48px)} .chart__title{font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:600; color:var(--ink-3);margin:0 0 22px} .chart__cap{font-size:clamp(14.5px,1.45vw,18px);font-weight:600;color:var(--purple); margin:18px 0 0;letter-spacing:-.01em} /* Barras de contenido de agua */ .wrow{display:grid;grid-template-columns:clamp(86px,11vw,150px) 1fr auto;gap:clamp(12px,1.8vw,26px); align-items:center;padding:9px 0} .wrow__lbl{font-size:13.5px;font-weight:500;color:var(--ink-2)} .wrow--own .wrow__lbl{font-weight:700;color:var(--purple)} .wrow__track{height:22px;position:relative;display:flex;align-items:center} .wrow__fill{height:22px;width:0;border-radius:3px 11px 11px 3px;background:var(--data-b); transition:width 1.4s var(--ease-out)} .wrow--own .wrow__fill{background:var(--purple)} .wrow__val{font-size:16px;font-weight:700;color:var(--ink-2);min-width:46px;text-align:right} .wrow--own .wrow__val{color:var(--purple);font-size:19px} .wrow__drop{width:15px;height:19px;flex:none;margin-right:9px; background:var(--data-b);opacity:.3; clip-path:path('M7.5 0C7.5 0 15 9 15 13.2A7.5 7.5 0 0 1 0 13.2C0 9 7.5 0 7.5 0Z')} .wrow--own .wrow__drop{background:var(--purple);opacity:.55} /* Curva de viscosidad */ .visc{position:relative} .visc svg{width:100%;height:auto;overflow:visible;display:block} .visc .vgrid{stroke:var(--line);stroke-width:1} .visc .vaxis{stroke:var(--line);stroke-width:1.5} .visc .vfill{fill:url(#viscGrad)} .visc .vline{fill:none;stroke:var(--data-b);stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .visc .vdot{fill:var(--paper);stroke:var(--data-b);stroke-width:2} .visc .vdot--hot{fill:var(--data-b)} .visc .vlbl{font-size:12px;font-weight:700;fill:var(--ink-2)} .visc .vtick{font-size:10.5px;fill:var(--ink-3);font-weight:500} .visc .vcross{stroke:var(--purple);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .2s} .visc.is-hot .vcross{opacity:1} .visc__tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-130%); background:var(--ink);color:#fff;border-radius:9px;padding:8px 12px;font-size:12px; white-space:nowrap;transition:opacity .2s;z-index:3;line-height:1.4} .visc__tip b{font-weight:600} .visc.is-hot .visc__tip{opacity:1} .visc__table{margin-top:16px;font-size:12.5px} .visc__table caption{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);font-weight:600;padding-bottom:8px} .visc__table th,.visc__table td{border-bottom:1px solid var(--line-soft);padding:7px 10px;text-align:right} .visc__table th:first-child,.visc__table td:first-child{text-align:left} .visc__table th{font-weight:600;color:var(--ink-2);font-size:11.5px} .visc__table td{color:var(--ink-3)} /* ===== 13. LÍNEA FACIAL — SCROLL HORIZONTAL =============================== */ .fl{background:var(--cream);position:relative;overflow:hidden} .fl__intro{padding-top:var(--sect);padding-bottom:clamp(30px,3.6vw,50px)} .fl__pin{height:100svh;display:flex;align-items:center;overflow:hidden} .fl__track{display:flex;gap:clamp(16px,1.8vw,26px);padding-inline:var(--gutter);will-change:transform} .fl__card{flex:none;width:clamp(300px,33vw,470px);border-radius:24px;overflow:hidden; background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column; min-height:min(74vh,620px)} .fl__media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--lilac)} .fl__media .ph{height:100%} .fl__box{position:absolute;right:16px;bottom:-26px;z-index:2;width:clamp(74px,8vw,104px); border-radius:7px;overflow:hidden;box-shadow:0 14px 34px rgba(31,19,25,.22);background:#fff} .fl__box .ph{aspect-ratio:1/2.6} .fl__body{padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;flex:1} .fl__name{font-family:var(--script);font-size:clamp(34px,3.6vw,50px);color:var(--coral); line-height:1;margin:0 0 4px} .fl__sub{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600; color:var(--purple);margin:0 0 16px} .fl__uses{margin:0 0 20px} .fl__uses li{display:flex;gap:10px;align-items:flex-start;padding:5px 0; font-size:14px;font-weight:600;color:var(--purple);line-height:1.45} .fl__uses li::before{content:'';width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px; border:1.5px solid var(--purple)} .fl__specs{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft)} .fl__specs li{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:7px 0;font-size:13px;color:var(--ink-3)} .fl__specs b{color:var(--ink);font-weight:600;text-align:right} .fl__counter{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.6vw,36px); padding-inline:var(--gutter);max-width:var(--max);margin-inline:auto;width:100%} .fl__rail{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden} .fl__rail i{display:block;height:100%;width:20%;background:var(--purple); border-radius:2px;transform-origin:0 50%} .fl__hint{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3); font-weight:600;white-space:nowrap} /* ===== 14. TABLA COMPARATIVA ============================================== */ .tbl__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--paper); border:1px solid var(--line);border-radius:20px;margin-top:clamp(32px,4vw,52px)} .tbl{min-width:880px} .tbl th,.tbl td{padding:15px 18px;text-align:center;font-size:13px; border-bottom:1px solid var(--line-soft)} .tbl thead th{background:var(--lilac-wash);border-bottom:2px solid var(--purple); padding-block:18px;position:sticky;top:0;z-index:1} .tbl thead th:first-child{text-align:left} .tbl .pname{font-family:var(--script);font-size:25px;color:var(--coral);line-height:1;display:block} .tbl .pkind{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple); font-weight:600;margin-top:5px;display:block} .tbl tbody th{text-align:left;font-weight:600;color:var(--ink-2);font-size:12px; letter-spacing:.07em;text-transform:uppercase;background:var(--paper-2);white-space:nowrap} .tbl tbody td{color:var(--ink-2);font-weight:500} .tbl tbody tr:hover td{background:var(--lilac-wash)} .tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:none} .tbl__hint{display:none;text-align:center;font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--purple);font-weight:600;margin:0 0 12px} @media(max-width:980px){.tbl__hint{display:block}} /* ===== 15. LÍNEA CORPORAL ================================================= */ .bod{background:var(--purple-xd);color:#fff;position:relative;overflow:hidden} .bod::before{content:'';position:absolute;width:780px;height:780px;border-radius:50%; border:1px solid rgba(255,255,255,.08);right:-270px;top:-310px;pointer-events:none} .bod::after{content:'';position:absolute;width:540px;height:540px;border-radius:50%; border:1px solid rgba(255,255,255,.06);left:-210px;bottom:-250px;pointer-events:none} .bod__head{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between; gap:32px;flex-wrap:wrap;margin-bottom:clamp(36px,4.4vw,60px)} .bod__name{font-family:var(--script);font-size:clamp(42px,6.6vw,96px);line-height:1; color:#fff;margin:12px 0 0} .bod__alias{font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--lilac-2);margin:10px 0 0;font-weight:600} .bod__pills{display:flex;gap:9px;flex-wrap:wrap} .bod__pills span{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.24); background:rgba(255,255,255,.08);font-size:12.5px;font-weight:600} .bod__layout{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr 1fr; gap:clamp(26px,3vw,48px);align-items:start} .bod__specs{border-top:1px solid rgba(255,255,255,.16)} .bod__spec{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:17px 0; border-bottom:1px solid rgba(255,255,255,.1)} .bod__spec dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--lilac-2);font-weight:600} .bod__spec dd{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.9)} .bod__spec dd b{color:#fff;font-weight:600} .bod__uses{display:flex;flex-direction:column;gap:10px} .bod__use{border:1px solid rgba(255,255,255,.17);border-radius:14px;padding:17px 20px; background:rgba(255,255,255,.05);display:flex;gap:12px;align-items:center; font-size:14.5px;font-weight:600;transition:background .4s,transform .5s var(--ease-out)} .bod__use:hover{background:rgba(255,255,255,.1);transform:translateX(5px)} .bod__use i{width:8px;height:8px;border-radius:50%;background:var(--lilac-2);flex:none} .bod__quote{position:relative;z-index:2;margin-top:clamp(36px,4.4vw,60px); border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(26px,3.2vw,42px); display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end} .bod__quote p{font-size:clamp(19px,2.6vw,34px);line-height:1.3;letter-spacing:-.02em; margin:0;max-width:880px;color:#fff;font-weight:600} .zones{display:grid;grid-template-columns:repeat(4,1fr);gap:14px; margin-top:clamp(32px,3.8vw,54px);position:relative;z-index:2} .zone{border:1px solid rgba(255,255,255,.17);border-radius:16px;padding:24px 22px; background:rgba(255,255,255,.05);transition:transform .55s var(--ease-out),background .4s} .zone:hover{transform:translateY(-6px);background:rgba(255,255,255,.1)} .zone__ico{width:40px;height:40px;border-radius:50%;background:rgba(201,168,220,.2); display:grid;place-items:center;margin-bottom:16px} .zone__ico svg{width:19px;height:19px;stroke:var(--lilac-2);fill:none;stroke-width:1.5} .zone h4{font-size:17px;font-weight:600;margin:0 0 7px} .zone__badge{display:inline-block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; font-weight:600;color:var(--lilac-2);margin-bottom:10px} .zone p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.64);margin:0} /* ===== 16. EXOSOMAS ======================================================= */ .exo{background:var(--paper);position:relative;overflow:hidden} .exo__intro{padding-top:var(--sect);padding-bottom:clamp(30px,3.6vw,50px)} .exo__pin{height:100svh;display:flex;align-items:center;overflow:hidden} .exo__track{display:flex;gap:clamp(16px,1.8vw,26px);padding-inline:var(--gutter);will-change:transform} .exo__card{flex:none;width:clamp(290px,31vw,430px);border-radius:22px;overflow:hidden; position:relative;background:var(--cream);border:1px solid var(--line); display:flex;flex-direction:column;min-height:min(70vh,560px)} .exo__top{height:5px;width:100%} .exo__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--lilac)} .exo__media .ph{height:100%} .exo__vial{position:absolute;right:18px;bottom:16px;z-index:2;padding:7px 13px;border-radius:999px; background:rgba(255,255,255,.92);backdrop-filter:blur(10px);font-size:11px;font-weight:600;color:var(--ink-2)} .exo__body{padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;flex:1} .exo__kick{font-size:10px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;margin:0 0 9px} .exo__name{font-size:clamp(21px,2.1vw,28px);font-weight:700;letter-spacing:-.025em;margin:0 0 14px;line-height:1.1} .exo__benes{margin:0 0 20px;flex:1} .exo__benes li{display:flex;gap:10px;align-items:flex-start;padding:7px 0; font-size:13.5px;line-height:1.6;color:var(--ink-2)} .exo__benes li::before{content:'';width:5px;height:5px;border-radius:50%;flex:none;margin-top:8px;background:currentColor} .exo__proto{display:flex;gap:6px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line-soft)} .exo__proto span{font-size:10.5px;font-weight:600;padding:6px 11px;border-radius:999px} .exo__counter{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,2.8vw,38px); padding-inline:var(--gutter);max-width:var(--max);margin-inline:auto;width:100%} .exo__rail{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden} .exo__rail i{display:block;height:100%;width:20%;background:var(--purple);border-radius:2px;transform-origin:0 50%} .exo__hint{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3); font-weight:600;white-space:nowrap} /* ===== 17. MAPA DE PROFUNDIDADES ========================================== */ .map{background:var(--cream)} .map__layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,78px); align-items:center;margin-top:clamp(36px,4.4vw,60px)} .map__fig{position:relative;background:var(--paper);border:1px solid var(--line); border-radius:22px;padding:clamp(24px,3vw,44px);display:grid;place-items:center} .map__fig svg.face{width:100%;max-width:320px;height:auto} .map__fig .outline{fill:none;stroke:var(--lilac-2);stroke-width:1.6;stroke-linecap:round} .map__hot{cursor:pointer} .map__hot .dot{fill:var(--paper);stroke:var(--purple);stroke-width:2;transition:fill .35s,r .35s} .map__hot .lbl{font-size:10px;font-weight:700;fill:var(--purple);transition:fill .35s} .map__hot:hover .dot,.map__hot.on .dot{fill:var(--purple);r:13} .map__hot:hover .lbl,.map__hot.on .lbl{fill:#fff} .map__list{display:flex;flex-direction:column;gap:9px} .map__row{display:flex;align-items:center;justify-content:space-between;gap:18px; padding:16px 22px;border:1px solid var(--line);border-left:3px solid var(--line); border-radius:12px;background:var(--paper);cursor:pointer; transition:border-color .4s,transform .45s var(--ease),box-shadow .45s var(--ease)} .map__row:hover{border-left-color:var(--lilac-2);transform:translateX(5px)} .map__row.on{border-left-color:var(--purple);box-shadow:0 14px 34px rgba(144,52,139,.12);background:#fff} .map__row h4{font-size:15px;font-weight:600;margin:0;letter-spacing:-.015em} .map__row p{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)} .map__mm{font-size:17px;font-weight:700;color:var(--purple);white-space:nowrap;letter-spacing:-.02em} .map__note{margin-top:clamp(24px,2.8vw,38px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .map__note div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px 22px} .map__note strong{display:block;font-size:14px;font-weight:600;margin-bottom:5px} .map__note span{font-size:13px;line-height:1.65;color:var(--ink-3)} /* ===== 18. PROTOCOLO · MÉTRICAS · FAQ ===================================== */ .proto{background:var(--peach)} .proto__list{margin-top:clamp(36px,4.4vw,62px);border-top:1px solid var(--line)} .proto__item{display:grid;grid-template-columns:86px 1fr 1.25fr;gap:clamp(18px,3vw,48px); padding:clamp(24px,2.8vw,38px) 0;border-bottom:1px solid var(--line);align-items:start;transition:background .4s} .proto__item:hover{background:rgba(255,255,255,.45)} .proto__n{font-family:var(--script);font-size:clamp(28px,3.2vw,44px);color:var(--lilac-2);line-height:1} .proto__item:hover .proto__n{color:var(--purple)} .proto__t{font-size:clamp(18px,2vw,25px);font-weight:600;letter-spacing:-.02em;margin:0} .proto__d{font-size:14.5px;line-height:1.78;color:var(--ink-3);margin:0} .proto__safety{margin-top:clamp(32px,3.8vw,52px);background:var(--ink);color:var(--paper); border-radius:20px;padding:clamp(26px,3.2vw,42px);display:grid; grid-template-columns:auto 1fr;gap:22px;align-items:start} .proto__safety .ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center} .proto__safety .ico svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.7} .proto__safety h4{font-size:11px;letter-spacing:.17em;text-transform:uppercase; color:rgba(255,255,255,.58);margin:0 0 11px;font-weight:600} .proto__safety p{font-size:clamp(15px,1.5vw,18.5px);line-height:1.7;margin:0;color:rgba(255,255,255,.9)} .proto__safety p b{color:#fff;font-weight:600} .stats{background:var(--cream);border-top:1px solid var(--line)} .stats__grid{display:grid;grid-template-columns:repeat(4,1fr)} .stats__item{padding:clamp(32px,3.8vw,54px) clamp(16px,2vw,30px);border-right:1px solid var(--line)} .stats__item:last-child{border-right:none} .stats__v{font-size:clamp(32px,4.4vw,62px);font-weight:700;letter-spacing:-.04em; line-height:1;margin:0;color:var(--purple)} .stats__l{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); font-weight:600;margin:14px 0 0;line-height:1.55} .faq{background:var(--paper)} .faq__layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(32px,5vw,78px);align-items:start} .faq__side{position:sticky;top:116px} .faq__cats{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px} .faq__cat{padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--cream); font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3); transition:all .35s var(--ease)} .faq__cat:hover{border-color:var(--purple);color:var(--purple)} .faq__cat.on{background:var(--purple);border-color:var(--purple);color:#fff} .faq__item{border-bottom:1px solid var(--line)} .faq__item[hidden]{display:none} .faq__q{width:100%;text-align:left;display:flex;align-items:flex-start;justify-content:space-between; gap:24px;padding:23px 0;font-size:clamp(15.5px,1.45vw,18.5px);font-weight:600; letter-spacing:-.018em;line-height:1.4;transition:color .3s} .faq__q:hover{color:var(--purple)} .faq__ic{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;position:relative;margin-top:2px;transition:all .4s var(--ease)} .faq__ic::before,.faq__ic::after{content:'';position:absolute;background:var(--ink); transition:transform .4s var(--ease),background .3s} .faq__ic::before{width:10px;height:1.5px} .faq__ic::after{width:1.5px;height:10px} .faq__item.on .faq__ic{background:var(--purple);border-color:var(--purple)} .faq__item.on .faq__ic::before,.faq__item.on .faq__ic::after{background:#fff} .faq__item.on .faq__ic::after{transform:scaleY(0)} .faq__a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease-out)} .faq__a p{font-size:14.5px;line-height:1.82;color:var(--ink-3);margin:0 0 24px;padding-right:clamp(0px,6vw,88px)} .faq__a p b{color:var(--ink-2);font-weight:600} /* ===== 19. CTA · FOOTER =================================================== */ .cta{background:var(--purple);color:#fff;position:relative;overflow:hidden} .cta::before{content:'';position:absolute;width:900px;height:900px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 62%); left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none} .cta__in{position:relative;z-index:2;text-align:center} .cta__title{font-size:clamp(34px,6.4vw,96px);line-height:1.02;letter-spacing:-.04em;font-weight:700;margin:0} .cta__title .script{color:#fff;display:block;font-weight:400;letter-spacing:0} .cta__sub{max-width:520px;margin:24px auto 0;color:rgba(255,255,255,.78);font-size:16px;line-height:1.7} .cta__form{max-width:470px;margin:clamp(28px,3.4vw,42px) auto 0;display:flex;gap:8px;padding:7px; border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26)} .cta__form input{flex:1;background:none;border:none;outline:none;padding:12px 20px; color:#fff;font-size:14.5px;font-family:inherit} .cta__form input::placeholder{color:rgba(255,255,255,.52)} .cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px} .cta__legal{margin-top:16px;font-size:12px;color:rgba(255,255,255,.55)} .foot{background:var(--ink);color:rgba(255,255,255,.62);padding-block:clamp(42px,5vw,70px) 28px} .foot__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(22px,3vw,42px)} .foot__brand{margin:0 0 18px;width:clamp(160px,17vw,210px)} .foot__brand svg{width:100%;height:auto;display:block;fill:#fff} .foot__brand+p{font-size:14px;line-height:1.72;max-width:290px;margin:0} .foot h5{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.42); margin:0 0 16px;font-weight:600} .foot li+li{margin-top:10px} .foot li a{font-size:14px;transition:color .3s} .foot li a:hover{color:#fff} .foot__seals{display:flex;gap:9px;margin-top:22px} .foot__seals .seal{width:34px;height:34px;font-size:9px;background:rgba(255,255,255,.14)} .foot__legal{margin-top:clamp(32px,3.8vw,54px);padding-top:22px; border-top:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.8;color:rgba(255,255,255,.4)} .foot__legal p{margin:0 0 12px;max-width:920px} .foot__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; margin-top:18px;font-size:11.5px} /* ===== 20. ANIMACIONES · RESPONSIVE ======================================= */ [data-reveal]{opacity:0;transform:translateY(24px)} [data-reveal].in{opacity:1;transform:none;transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)} [data-reveal-stagger]>*{opacity:0;transform:translateY(20px)} [data-reveal-stagger].in>*{opacity:1;transform:none; transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)} [data-reveal-stagger].in>*:nth-child(1){transition-delay:.05s} [data-reveal-stagger].in>*:nth-child(2){transition-delay:.12s} [data-reveal-stagger].in>*:nth-child(3){transition-delay:.19s} [data-reveal-stagger].in>*:nth-child(4){transition-delay:.26s} [data-reveal-stagger].in>*:nth-child(5){transition-delay:.33s} [data-reveal-stagger].in>*:nth-child(6){transition-delay:.4s} .line-mask{overflow:hidden;display:block} .line-mask>span{display:block;transform:translateY(102%);transition:transform 1.05s var(--ease-out)} .in .line-mask>span,.line-mask.in>span{transform:none} .line-mask:nth-child(2)>span{transition-delay:.09s} .line-mask:nth-child(3)>span{transition-delay:.18s} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} [data-reveal],[data-reveal-stagger]>*{opacity:1 !important;transform:none !important} .line-mask>span{transform:none !important} } @media (max-width:1180px){ .bod__layout{grid-template-columns:1fr} .zones{grid-template-columns:repeat(2,1fr)} .stats__grid{grid-template-columns:repeat(2,1fr)} .stats__item:nth-child(2){border-right:none} .stats__item:nth-child(1),.stats__item:nth-child(2){border-bottom:1px solid var(--line)} .ben__icons{grid-template-columns:repeat(2,1fr);row-gap:34px} } @media (max-width:1200px){ /* Por debajo de este ancho la ficha flotante se solapa con la cara */ .hero__card{display:none} } @media (max-width:1024px){ .nav__links{display:none} .nav__burger{display:flex} .nav__in{grid-template-columns:auto 1fr auto} .nav__brand{justify-self:start;grid-column:2;margin-left:4px} .map__layout,.faq__layout{grid-template-columns:1fr} .faq__side{position:static} .hero__title{max-width:min(74vw,520px)} .tech__flow{grid-template-columns:1fr;border-radius:28px;row-gap:18px} .tech__arrow{transform:rotate(90deg)} } @media (max-width:860px){ .split{grid-template-columns:1fr} .g-3,.g-4{grid-template-columns:1fr} .proto__item{grid-template-columns:58px 1fr;row-gap:12px} .proto__d{grid-column:2} .foot__grid{grid-template-columns:1fr 1fr} .map__note{grid-template-columns:1fr} .bod__quote{grid-template-columns:1fr} .bod__spec{grid-template-columns:1fr;gap:6px} .ben__bar{grid-template-columns:1fr;row-gap:8px;border-radius:0 20px 20px 0} } @media (max-width:980px){ /* El hero se apila: foto arriba, texto debajo */ .hero{padding-top:92px} .hero__grid{grid-template-columns:1fr;min-height:0;gap:clamp(24px,4vh,40px)} .hero__visual{order:-1;min-height:0;aspect-ratio:16/11;border-radius:0} .hero__blend{background:linear-gradient(to bottom,rgba(253,235,221,.5) 0%, rgba(253,235,221,0) 26%,rgba(253,235,221,0) 72%,var(--cream) 100%)} .hero__col{padding-inline:var(--gutter)} .hero__scroll{display:none} } @media (max-width:640px){ .hero__visual{aspect-ratio:4/3} .hero__visual .pill{display:none} .hero__card{display:none} .ben__icons{grid-template-columns:1fr 1fr;gap:22px} .fl__card,.exo__card{width:80vw;min-height:auto} .stats__grid{grid-template-columns:1fr} .stats__item{border-right:none;border-bottom:1px solid var(--line)} .foot__grid{grid-template-columns:1fr} .wrow{grid-template-columns:70px 1fr auto;gap:10px} .paris::before{background-size:520px auto} }