/* ============================================================ * Essencial — Umbrella Homepage (Constelación II) * Ported from mockup-homepage-v11.html * ============================================================ */ /* Safety net: si algún módulo PS default quedara enganchado a displayHome (ps_imageslider/ps_featuredproducts/etc.), ocultar sus outputs dentro de #content cuando la umbrella home está activa. La atmo+constellation del módulo essencial siguen visibles porque usan clases prefijadas. */ body.essencial-umbrella-home #content > section.hero-slider, body.essencial-umbrella-home #content > section.products-section, body.essencial-umbrella-home #content > section.home-reassurance, body.essencial-umbrella-home #content > section.slick-slider, body.essencial-umbrella-home #content > #custom-text, body.essencial-umbrella-home #content > .ps-banner, body.essencial-umbrella-home #content > .banner { display: none !important; } body.essencial-umbrella-home { --brand-bg: #FAF8F5; --brand-bg-warm: #F0EAE0; --brand-gold: #b8960c; --brand-gold-light: #d4af37; --brand-text: #1a1a1a; --brand-body: #4A4540; --brand-muted: #9A928A; --brand-border: #E5DED6; --uni-j: #C9A96E; --uni-p: #C4566A; --uni-a: #7AB830; --uni-n: #C8B48A; --font-h: var(--essencial-font-heading, 'Cormorant Garamond', Georgia, serif); --font-b: var(--essencial-font-body, 'Jost', sans-serif); --ease: cubic-bezier(0.22, 1, 0.36, 1); background: var(--brand-bg); overflow-x: hidden; } /* v2.1.330 — Scroll snap proximity: cuando el user scrollea en mobile, el browser "ayuda" a encajar en .atmo o .ess-gateway, evitando posiciones intermedias donde se ven ambos a la vez (problema iOS Safari con URL bar dinámica). Proximity (NO mandatory) → el snap solo activa si el user está CERCA del snap point, permite free scroll en otras zonas. Scoped a home paraguas vía :has(). */ html:has(body.essencial-umbrella-home) { scroll-snap-type: y proximity; } body.essencial-umbrella-home .atmo, body.essencial-umbrella-home .ess-gateway { scroll-snap-align: start; scroll-snap-stop: normal; } body.essencial-umbrella-home #wrapper > [data-landing="essencial"] { font-family: var(--font-b); color: var(--brand-body); } /* ===== Ornament ===== */ body.essencial-umbrella-home .ornament { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 0 auto; } body.essencial-umbrella-home .ornament::before, body.essencial-umbrella-home .ornament::after { content: ''; height: 1px; width: 32px; background: linear-gradient(90deg, transparent, var(--brand-gold-light), transparent); opacity: 0.45; } body.essencial-umbrella-home .ornament__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-gold-light); opacity: 0.45; } /* ===== Prisma ===== */ body.essencial-umbrella-home .prisma { display: flex; justify-content: center; gap: 4px; } body.essencial-umbrella-home .prisma__s { height: 2.5px; width: 0; border-radius: 2px; animation: euSegIn 0.5s var(--ease) forwards; } body.essencial-umbrella-home .prisma__s--j { background: var(--uni-j); opacity: 0.6; } body.essencial-umbrella-home .prisma__s--p { background: var(--uni-p); opacity: 0.6; } body.essencial-umbrella-home .prisma__s--a { background: var(--uni-a); opacity: 0.6; } body.essencial-umbrella-home .prisma__s--n { background: var(--uni-n); opacity: 0.6; } @keyframes euSegIn { to { width: var(--sw, 24px); } } /* ===== ATMOSPHERE ===== */ /* v2.1.441: cascada vh → lvh → svh. svh garantiza que el atmo SIEMPRE cabe en viewport visible mínimo (URL bar iOS visible). Sin esto el atmo ocupaba 844px en pantalla de 750px útiles → "Descubre" (constellation) quedaba casi fuera de pantalla. Scroll-snap proximity activo en :has() umbrella ayuda al usuario a encajar las secciones. */ body.essencial-umbrella-home .atmo { position: relative; min-height: 100vh; min-height: 100dvh; /* v2.1.442: --vh-real (JS visualViewport.height) refleja viewport real visible en iOS Safari incluyendo toolbar inferior (svh/lvh/dvh fallan). */ min-height: var(--vh-real, 100dvh); padding: 0 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; /* overflow:hidden contiene los .atmo__orb--* que están posicionados con right/left negativos (eg right:-3%). Sin esto se generaba scroll horizontal ~52px en viewports ≥1700. El orb sigue fade-out normal. */ overflow: hidden; /* v2.1.327 — gradient termina en bg-warm (no bg pálido) para empalmar sin salto con el canvas del gateway que viene debajo. */ background: linear-gradient(175deg, var(--brand-bg) 0%, var(--brand-bg-warm) 35%, #EDE6D9 55%, var(--brand-bg-warm) 75%, var(--brand-bg-warm) 100%); } body.essencial-umbrella-home .atmo__orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.16; pointer-events: none; will-change: transform; } body.essencial-umbrella-home .atmo__orb--j { width: 380px; height: 380px; background: var(--uni-j); top: -5%; left: -5%; animation: euOrb1 22s ease-in-out infinite; } body.essencial-umbrella-home .atmo__orb--p { width: 320px; height: 320px; background: var(--uni-p); top: 0%; right: -3%; animation: euOrb2 26s ease-in-out infinite; } body.essencial-umbrella-home .atmo__orb--a { width: 340px; height: 340px; background: var(--uni-a); bottom: 10%; left: 5%; animation: euOrb3 24s ease-in-out infinite; } body.essencial-umbrella-home .atmo__orb--n { width: 300px; height: 300px; background: var(--uni-n); bottom: 5%; right: 3%; animation: euOrb4 20s ease-in-out infinite; } @media (max-width: 767px) { body.essencial-umbrella-home .atmo__orb { filter: blur(70px); opacity: 0.08; } body.essencial-umbrella-home .atmo__orb--j { width: 180px; height: 180px; } body.essencial-umbrella-home .atmo__orb--p { width: 150px; height: 150px; } body.essencial-umbrella-home .atmo__orb--a { width: 160px; height: 160px; } body.essencial-umbrella-home .atmo__orb--n { width: 140px; height: 140px; } } @keyframes euOrb1 { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(25px,-18px) scale(1.04)} 50%{transform:translate(-12px,20px) scale(0.96)} 75%{transform:translate(18px,12px) scale(1.02)} } @keyframes euOrb2 { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(-20px,14px) scale(0.97)} 50%{transform:translate(18px,-25px) scale(1.04)} 75%{transform:translate(-8px,-12px) scale(1.01)} } @keyframes euOrb3 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(20px,-12px) scale(1.03)} 66%{transform:translate(-16px,16px) scale(0.96)} } @keyframes euOrb4 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-14px,-20px) scale(1.05)} 66%{transform:translate(12px,8px) scale(0.98)} } body.essencial-umbrella-home .atmo__hero { position: relative; z-index: 2; margin-top: auto; margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); } body.essencial-umbrella-home .atmo__wordmark { width: clamp(280px, 60vw, 700px); margin: 0 auto 1em; opacity: 0; transform: translateY(16px) scale(0.97); animation: euHeroIn 0.9s var(--ease) 0.3s forwards; } body.essencial-umbrella-home .atmo__logo { width: 100%; height: auto; display: block; } body.essencial-umbrella-home .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } body.essencial-umbrella-home .atmo__brand { font-family: var(--font-h); font-size: clamp(2.6rem, 7vw, 5.5rem); font-weight: 400; letter-spacing: 0.02em; color: var(--brand-text); line-height: 1; margin: 0; } body.essencial-umbrella-home .atmo__byline { display: block; font-family: var(--font-h); font-size: clamp(0.9rem, 1.5vw, 1.1rem); font-style: italic; font-weight: 300; color: var(--brand-muted); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.5rem; } body.essencial-umbrella-home .atmo__gold-line { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-gold-light), transparent); margin: 0 auto 1.5rem; opacity: 0; transform: scaleX(0); animation: euLineIn 0.7s var(--ease) 0.75s forwards; } body.essencial-umbrella-home .atmo__tagline { font-family: var(--font-h); font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 300; font-style: italic; color: var(--brand-gold); letter-spacing: 0.06em; margin-bottom: 3.5rem; opacity: 0; transform: translateY(10px); animation: euFadeUp 0.6s var(--ease) 0.65s forwards; } body.essencial-umbrella-home .atmo__scroll { z-index: 2; margin-top: auto; padding-bottom: clamp(1.5rem, 3vh, 2.5rem); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; opacity: 0; animation: euFadeUp 0.6s var(--ease) 2s forwards; text-decoration: none; cursor: pointer; transition: opacity 0.3s ease; color: var(--brand-muted); } body.essencial-umbrella-home .atmo__scroll:hover { color: var(--brand-gold); } body.essencial-umbrella-home .atmo__scroll-text { font-family: var(--font-b); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; } body.essencial-umbrella-home .atmo__scroll-line { width: 1px; height: 32px; background: linear-gradient(180deg, var(--brand-gold-light), rgba(212,175,55,0.2)); } body.essencial-umbrella-home .atmo .prisma__s { --sw: 24px; } body.essencial-umbrella-home .atmo .prisma__s:nth-child(1) { animation-delay: 1.05s; } body.essencial-umbrella-home .atmo .prisma__s:nth-child(2) { animation-delay: 1.13s; } body.essencial-umbrella-home .atmo .prisma__s:nth-child(3) { animation-delay: 1.21s; } body.essencial-umbrella-home .atmo .prisma__s:nth-child(4) { animation-delay: 1.29s; } body.essencial-umbrella-home .atmo__manifesto { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; padding-bottom: clamp(1.5rem, 3vh, 2.5rem); } body.essencial-umbrella-home .atmo__manifesto p { font-family: var(--font-b); font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 300; line-height: 1.8; color: var(--brand-muted); max-width: 600px; margin: 0 auto; } body.essencial-umbrella-home .atmo__manifesto strong { font-weight: 400; color: var(--brand-body); } body.essencial-umbrella-home .atmo__manifesto em { font-style: italic; color: var(--brand-gold); } /* ===== THREAD ===== */ body.essencial-umbrella-home .thread { display: flex; flex-direction: column; align-items: center; padding: 0 0 clamp(0.5rem, 1vh, 0.8rem); z-index: 2; } body.essencial-umbrella-home .thread__line { width: 1px; height: clamp(40px, 6vh, 70px); background: linear-gradient(180deg, rgba(212,175,55,0.2) 0%, var(--brand-gold-light) 20%, rgba(212,175,55,0.4) 60%, rgba(212,175,55,0.15) 100%); opacity: 0; transform: scaleY(0); transform-origin: top; animation: euThreadGrow 1s var(--ease) 1.5s forwards; } body.essencial-umbrella-home .thread__label { margin-top: 0.4rem; font-family: var(--font-b); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-muted); opacity: 0; animation: euFadeUp 0.6s var(--ease) 2s forwards; } @keyframes euThreadGrow { to { opacity: 1; transform: scaleY(1); } } /* ===== CONSTELLATION ===== */ body.essencial-umbrella-home .constellation { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; min-height: 100vh; min-height: 100dvh; min-height: var(--vh-real, 100dvh); display: flex; flex-direction: column; } body.essencial-umbrella-home .constellation__orbs-area { position: relative; flex: 1; min-height: 0; } body.essencial-umbrella-home .constellation__ambient { position: absolute; inset: -10%; z-index: 0; pointer-events: none; } body.essencial-umbrella-home .constellation__cloud { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; will-change: transform; } body.essencial-umbrella-home .constellation__cloud--j { width: 300px; height: 300px; background: var(--uni-j); opacity: 0.16; top: 3%; left: 5%; animation: euOrb1 20s ease-in-out infinite; } body.essencial-umbrella-home .constellation__cloud--p { width: 280px; height: 280px; background: var(--uni-p); opacity: 0.14; top: -2%; right: 7%; animation: euOrb2 24s ease-in-out infinite; } body.essencial-umbrella-home .constellation__cloud--a { width: 280px; height: 280px; background: var(--uni-a); opacity: 0.14; bottom: 3%; left: 9%; animation: euOrb3 22s ease-in-out infinite; } body.essencial-umbrella-home .constellation__cloud--n { width: 270px; height: 270px; background: var(--uni-n); opacity: 0.16; bottom: -2%; right: 5%; animation: euOrb4 18s ease-in-out infinite; } body.essencial-umbrella-home .constellation__cloud--center { width: 240px; height: 240px; background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, transparent 70%); opacity: 1; filter: blur(50px); top: 50%; left: 50%; transform: translate(-50%, -50%); } body.essencial-umbrella-home .constellation__lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; } body.essencial-umbrella-home .constellation__lines svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.55)) drop-shadow(0 0 10px rgba(212, 175, 55, 0.3)); } body.essencial-umbrella-home .constellation__lines line { stroke: var(--brand-gold-light, #d4af37); stroke-width: 1.3; stroke-linecap: round; opacity: 0; stroke-dasharray: 6 8; } body.essencial-umbrella-home .constellation.vis .constellation__lines line { opacity: 0.65; animation: euLineReveal 1.2s var(--ease) forwards, euLineShimmer 7s linear infinite; } body.essencial-umbrella-home .constellation.vis .constellation__lines line:nth-child(1) { animation-delay: 0.6s; } body.essencial-umbrella-home .constellation.vis .constellation__lines line:nth-child(2) { animation-delay: 0.7s; } body.essencial-umbrella-home .constellation.vis .constellation__lines line:nth-child(3) { animation-delay: 0.8s; } body.essencial-umbrella-home .constellation.vis .constellation__lines line:nth-child(4) { animation-delay: 0.9s; } body.essencial-umbrella-home .constellation.vis .constellation__lines line:nth-child(5) { animation-delay: 0.75s; } body.essencial-umbrella-home .constellation.vis .constellation__lines line:nth-child(6) { animation-delay: 0.85s; } @keyframes euLineReveal { from { stroke-dashoffset: 500; opacity: 0; } to { stroke-dashoffset: 0; opacity: 0.65; } } @keyframes euLineShimmer { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -56; } } body.essencial-umbrella-home .constellation__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; } body.essencial-umbrella-home .constellation__center-jewel { width: 14px; height: 14px; transform: rotate(45deg); background: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold)); border-radius: 2px; box-shadow: 0 0 20px rgba(212,175,55,0.3), 0 0 50px rgba(212,175,55,0.1); animation: euJewelPulse 4s ease-in-out infinite; } body.essencial-umbrella-home .constellation__center-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 28px; height: 28px; border: 1px solid rgba(212,175,55,0.15); border-radius: 3px; animation: euJewelPulse 4s ease-in-out infinite reverse; } @keyframes euJewelPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* ===== ORB ===== */ body.essencial-umbrella-home .orb { position: absolute; z-index: 5; text-decoration: none; cursor: pointer; transition: transform 0.6s var(--ease), z-index 0s; } body.essencial-umbrella-home .orb:hover { transform: scale(1.06); z-index: 15; } body.essencial-umbrella-home .orb--j { top: 7%; left: 12%; } body.essencial-umbrella-home .orb--p { top: 5%; right: 14%; } body.essencial-umbrella-home .orb--n { bottom: 7%; left: 16%; } body.essencial-umbrella-home .orb--a { bottom: 9%; right: 10%; } body.essencial-umbrella-home .orb__circle { position: relative; width: clamp(184px, 21.3vw, 275px); height: clamp(184px, 21.3vw, 275px); border-radius: 50%; overflow: hidden; background: var(--orb-bg); border: 1px solid var(--orb-border); box-shadow: 0 8px 32px var(--orb-shadow), 0 2px 8px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 40px var(--orb-inner-glow); transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease), background 0.6s var(--ease); } body.essencial-umbrella-home .orb:hover .orb__circle { box-shadow: 0 16px 48px var(--orb-shadow-hover), 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 0 50px var(--orb-inner-glow-hover), 0 0 50px var(--glow); border-color: var(--orb-border-hover); background: var(--orb-bg-hover); } body.essencial-umbrella-home .orb__atmosphere { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 1; transition: opacity 0.6s ease; } body.essencial-umbrella-home .orb--j .orb__atmosphere { background: radial-gradient(circle at 25% 25%, rgba(201,169,110,0.30) 0%, transparent 55%), radial-gradient(circle at 75% 70%, rgba(184,150,12,0.10) 0%, transparent 50%); } body.essencial-umbrella-home .orb--p .orb__atmosphere { background: radial-gradient(circle at 75% 25%, rgba(196,86,106,0.28) 0%, transparent 55%), radial-gradient(circle at 30% 70%, rgba(168,69,96,0.10) 0%, transparent 50%); } body.essencial-umbrella-home .orb--a .orb__atmosphere { background: radial-gradient(circle at 25% 70%, rgba(122,184,48,0.28) 0%, transparent 55%), radial-gradient(circle at 70% 30%, rgba(58,85,37,0.10) 0%, transparent 50%); } body.essencial-umbrella-home .orb--n .orb__atmosphere { background: radial-gradient(circle at 75% 70%, rgba(200,180,138,0.30) 0%, transparent 55%), radial-gradient(circle at 30% 25%, rgba(74,61,40,0.10) 0%, transparent 50%); } body.essencial-umbrella-home .orb__shimmer { position: absolute; inset: -50%; border-radius: 50%; pointer-events: none; z-index: 2; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,255,255,0.06) 60deg, transparent 120deg, rgba(255,255,255,0.04) 200deg, transparent 260deg, rgba(255,255,255,0.05) 330deg, transparent 360deg); animation: euShimmerRotate 15s linear infinite; } @keyframes euShimmerRotate { to { transform: rotate(360deg); } } body.essencial-umbrella-home .orb__ring { position: absolute; top: 8%; left: 8%; right: 8%; bottom: 8%; border-radius: 50%; border: 1px solid var(--accent-line); pointer-events: none; z-index: 2; opacity: 0.35; transition: opacity 0.5s ease; } body.essencial-umbrella-home .orb:hover .orb__ring { opacity: 0.55; } body.essencial-umbrella-home .orb--j { --glow: rgba(201,169,110,0.22); --accent-line: rgba(184,150,12,0.55); --name-color: #8A7030; --orb-bg: #F8F0E0; --orb-bg-hover: #F5EBCF; --orb-border: rgba(201,169,110,0.30); --orb-border-hover: rgba(201,169,110,0.50); --orb-shadow: rgba(201,169,110,0.12); --orb-shadow-hover: rgba(201,169,110,0.22); --orb-inner-glow: rgba(201,169,110,0.10); --orb-inner-glow-hover: rgba(201,169,110,0.18); } body.essencial-umbrella-home .orb--p { --glow: rgba(196,86,106,0.20); --accent-line: rgba(196,86,106,0.50); --name-color: #A84560; --orb-bg: #FBE8EC; --orb-bg-hover: #F8DDE3; --orb-border: rgba(196,86,106,0.22); --orb-border-hover: rgba(196,86,106,0.40); --orb-shadow: rgba(196,86,106,0.10); --orb-shadow-hover: rgba(196,86,106,0.20); --orb-inner-glow: rgba(196,86,106,0.08); --orb-inner-glow-hover: rgba(196,86,106,0.15); } body.essencial-umbrella-home .orb--a { --glow: rgba(122,184,48,0.20); --accent-line: rgba(122,184,48,0.50); --name-color: #4A7A20; --orb-bg: #EBF5DE; --orb-bg-hover: #E2F0D0; --orb-border: rgba(122,184,48,0.22); --orb-border-hover: rgba(122,184,48,0.40); --orb-shadow: rgba(122,184,48,0.10); --orb-shadow-hover: rgba(122,184,48,0.20); --orb-inner-glow: rgba(122,184,48,0.08); --orb-inner-glow-hover: rgba(122,184,48,0.15); } /* Orb Novela: noche literaria — bg negro absoluto + name cream + accents gold. Coherente con el modo inmersivo (.novela-immersive bg #0f0f0f gold #c9a96e cream). Single-orb override (NO afecta a la landing /novela ni a otros componentes). */ body.essencial-umbrella-home .orb--n { --glow: rgba(201,169,110,0.30); --accent-line: rgba(201,169,110,0.65); --name-color: #F5F0E8; --orb-bg: #0f0f0f; --orb-bg-hover: #1a1a1a; --orb-border: rgba(201,169,110,0.30); --orb-border-hover: rgba(201,169,110,0.55); --orb-shadow: rgba(0,0,0,0.50); --orb-shadow-hover: rgba(0,0,0,0.70); --orb-inner-glow: rgba(201,169,110,0.10); --orb-inner-glow-hover: rgba(201,169,110,0.20); } body.essencial-umbrella-home .orb__content { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 1.5rem; text-align: center; } body.essencial-umbrella-home .orb__icon { width: 44px; height: 44px; margin-bottom: 0.7rem; opacity: 0.55; transition: opacity 0.4s var(--ease), width 0.4s var(--ease), height 0.4s var(--ease), margin-bottom 0.4s var(--ease); } body.essencial-umbrella-home .orb:hover .orb__icon { opacity: 0.8; width: 32px; height: 32px; margin-bottom: 0.4rem; } body.essencial-umbrella-home .orb__icon svg { width: 100%; height: 100%; stroke: var(--accent-line); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; display: block; } body.essencial-umbrella-home .orb__name { font-family: var(--font-h); font-size: clamp(1.8rem, 2.8vw, 2.4rem); font-weight: 400; color: var(--name-color, var(--brand-text)); line-height: 1.2; margin-bottom: 0.8rem; transition: font-size 0.4s var(--ease), margin-bottom 0.4s var(--ease); } body.essencial-umbrella-home .orb:hover .orb__name { font-size: clamp(1.35rem, 2vw, 1.65rem); margin-bottom: 0.4rem; } body.essencial-umbrella-home .orb__accent-line { width: 42px; height: 2px; border-radius: 1px; margin: 0 auto 0.3rem; transition: width 0.4s var(--ease), height 0.4s var(--ease), opacity 0.4s var(--ease); opacity: 0.75; } body.essencial-umbrella-home .orb:hover .orb__accent-line { width: 32px; height: 1.5px; opacity: 0.9; } body.essencial-umbrella-home .orb--j .orb__accent-line { background: var(--uni-j); } body.essencial-umbrella-home .orb--p .orb__accent-line { background: var(--uni-p); } body.essencial-umbrella-home .orb--a .orb__accent-line { background: var(--uni-a); } body.essencial-umbrella-home .orb--n .orb__accent-line { background: #c9a96e; } /* ── Orb Novela: textura "ascua de vela en la noche" ──────────────────── Override creative del orb negro para que se sienta literario y dorado: - Name "Novela" en gold luminoso (#D4B783) con halo cálido - Tagline en cream italic (literario, ligeramente más visible sobre negro) - CTA "Entrar" en gold con flecha brillante - Hover: glow gold pulsante (efecto ascua) */ body.essencial-umbrella-home .orb--n .orb__icon { color: #c9a96e; opacity: 0.85; } body.essencial-umbrella-home .orb--n .orb__name { color: #D4B783; text-shadow: 0 0 28px rgba(201,169,110,0.28); letter-spacing: 0.005em; } body.essencial-umbrella-home .orb--n .orb__tagline { color: rgba(245,240,232,0.82); font-style: italic; letter-spacing: 0.01em; } body.essencial-umbrella-home .orb--n .orb__cta { color: #D4B783; letter-spacing: 0.18em; } body.essencial-umbrella-home .orb--n .orb__cta svg { stroke: #D4B783; } body.essencial-umbrella-home .orb--n:hover .orb__circle { box-shadow: 0 0 0 1px rgba(201,169,110,0.45), 0 14px 36px rgba(0,0,0,0.55), 0 0 60px 6px rgba(201,169,110,0.18), inset 0 0 64px rgba(201,169,110,0.10); } body.essencial-umbrella-home .orb--n:hover .orb__name { color: #E0C290; text-shadow: 0 0 36px rgba(201,169,110,0.50), 0 0 8px rgba(201,169,110,0.25); } body.essencial-umbrella-home .orb--n:hover .orb__icon { color: #E0C290; opacity: 1; } /* Sprint Novela Fino — Ola 4 C1: glow candil hover desktop. Halo radial cálido extra sobre la atmósfera del orb. */ @media (hover: hover) and (pointer: fine) { body.essencial-umbrella-home .orb--n:hover .orb__atmosphere { background: radial-gradient(circle at 50% 50%, rgba(212,183,131,0.30) 0%, transparent 45%), radial-gradient(circle at 75% 70%, rgba(200,180,138,0.40) 0%, transparent 55%), radial-gradient(circle at 30% 25%, rgba(74,61,40,0.10) 0%, transparent 50%); transition: background 0.6s ease; } } body.essencial-umbrella-home .orb__tagline { font-family: var(--font-b); font-size: clamp(0.78rem, 1vw, 0.88rem); font-weight: 300; color: var(--brand-body); line-height: 1.45; max-width: 190px; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(4px); transition: opacity 0.4s var(--ease), max-height 0.4s var(--ease), transform 0.4s var(--ease); } body.essencial-umbrella-home .orb:hover .orb__tagline { opacity: 0.8; max-height: 60px; transform: translateY(0); } body.essencial-umbrella-home .orb__cta { margin-top: 0.8rem; font-family: var(--font-b); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--name-color, var(--brand-muted)); display: inline-flex; align-items: center; gap: 0.4rem; opacity: 0; transform: translateY(4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } body.essencial-umbrella-home .orb:hover .orb__cta { opacity: 0.85; transform: translateY(0); } body.essencial-umbrella-home .orb__cta svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease); } body.essencial-umbrella-home .orb:hover .orb__cta svg { transform: translateX(3px); } body.essencial-umbrella-home .orb--j { animation: euFloat1 5s ease-in-out infinite; } body.essencial-umbrella-home .orb--p { animation: euFloat2 6s ease-in-out infinite; } body.essencial-umbrella-home .orb--a { animation: euFloat3 4.5s ease-in-out infinite; } body.essencial-umbrella-home .orb--n { animation: euFloat4 6.5s ease-in-out infinite; } @keyframes euFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(4px,-8px)} } @keyframes euFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6px,-5px)} } @keyframes euFloat3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5px,7px)} } @keyframes euFloat4 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-4px,6px)} } body.essencial-umbrella-home .orb { opacity: 0; } body.essencial-umbrella-home .constellation.vis .orb--j { animation: euOrbReveal 0.8s var(--ease) 0.2s forwards, euFloat1 5s ease-in-out 1.2s infinite; } body.essencial-umbrella-home .constellation.vis .orb--p { animation: euOrbReveal 0.8s var(--ease) 0.35s forwards, euFloat2 6s ease-in-out 1.35s infinite; } body.essencial-umbrella-home .constellation.vis .orb--a { animation: euOrbReveal 0.8s var(--ease) 0.5s forwards, euFloat3 4.5s ease-in-out 1.5s infinite; } body.essencial-umbrella-home .constellation.vis .orb--n { animation: euOrbReveal 0.8s var(--ease) 0.65s forwards, euFloat4 6.5s ease-in-out 1.65s infinite; } @keyframes euOrbReveal { from { opacity: 0; transform: scale(0.85) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ===== CLOSE ===== */ body.essencial-umbrella-home .constellation__close { text-align: center; z-index: 10; padding: clamp(0.4rem, 1vh, 0.8rem) 2rem clamp(0.6rem, 1.5vh, 1rem); } body.essencial-umbrella-home .constellation__close-question { font-family: var(--font-h); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 400; color: var(--brand-text); line-height: 1.4; margin: 0; } body.essencial-umbrella-home .constellation__close-hint { margin: 0.3rem 0 0; font-family: var(--font-h); font-size: clamp(0.85rem, 1.4vw, 1rem); font-weight: 300; font-style: italic; color: var(--brand-gold); letter-spacing: 0.02em; } /* ===== MOBILE: Constelación 2×2 Grid ===== */ @media (max-width: 699px) { body.essencial-umbrella-home .atmo .prisma { margin-bottom: clamp(1.2rem, 3vh, 2rem); } body.essencial-umbrella-home .constellation { min-height: var(--vh-real, 100dvh); padding: 0 1rem 1rem; max-width: 100%; box-sizing: border-box; } body.essencial-umbrella-home .thread { padding: 0 0 0.4rem; flex-shrink: 0; } body.essencial-umbrella-home .thread__line { height: clamp(14px, 2.5vh, 24px); } /* --- Grid 2×2 con stagger orgánico --- */ body.essencial-umbrella-home .constellation__orbs-area { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 0.6rem; justify-items: center; position: relative; flex: 1 0 auto; padding: 0.8rem 0; } /* Col derecha desplazada abajo para stagger orgánico */ body.essencial-umbrella-home .orb--p, body.essencial-umbrella-home .orb--a { transform: translateY(22px); } body.essencial-umbrella-home .constellation__center, body.essencial-umbrella-home .constellation__lines { display: none; } /* Ambient clouds: mostrar suavemente */ body.essencial-umbrella-home .constellation__ambient { display: block; opacity: 0.15; pointer-events: none; } /* --- Orbe base mobile --- */ body.essencial-umbrella-home .orb { position: relative; width: min(42vw, 170px); height: min(42vw, 170px); display: flex; align-items: center; justify-content: center; opacity: 0; top: auto; left: auto; right: auto; bottom: auto; flex: none; } /* Orden explícito: j(1) p(2) n(3) a(4) */ body.essencial-umbrella-home .orb--j { order: 1; z-index: 6; } body.essencial-umbrella-home .orb--p { order: 2; z-index: 5; } body.essencial-umbrella-home .orb--n { order: 3; z-index: 4; } body.essencial-umbrella-home .orb--a { order: 4; z-index: 3; } body.essencial-umbrella-home .orb__circle { width: 100%; height: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; background: radial-gradient(circle at 35% 30%, #ffffff, #f3ece0); border: 1px solid rgba(184,150,12,0.55); box-shadow: inset 0 0 24px rgba(184,150,12,0.08), 0 8px 24px rgba(74,53,30,0.18), 0 2px 6px rgba(74,53,30,0.1); } body.essencial-umbrella-home .orb__ring { display: block; opacity: 0.25; } body.essencial-umbrella-home .orb__shimmer { display: none; } body.essencial-umbrella-home .orb__atmosphere { border-radius: 50%; opacity: 0.35; } body.essencial-umbrella-home .orb__content { gap: 0.3rem; padding: 0.6rem; border-radius: 50%; } body.essencial-umbrella-home .orb__icon { width: 22px; height: 22px; margin-bottom: 0.15rem; opacity: 0.5; } body.essencial-umbrella-home .orb:hover .orb__icon { width: 22px; height: 22px; margin-bottom: 0.15rem; opacity: 0.5; } body.essencial-umbrella-home .orb__icon svg { stroke-width: 1; } body.essencial-umbrella-home .orb__accent-line { display: none; } body.essencial-umbrella-home .orb__name { font-size: 1rem; letter-spacing: 0.04em; margin-bottom: 0; line-height: 1.2; } body.essencial-umbrella-home .orb__tagline { opacity: 0.7; max-height: none; transform: none; overflow: visible; font-size: 0.64rem; line-height: 1.3; font-weight: 300; font-style: italic; max-width: 82%; margin-top: 0.25rem; padding: 0 2px; word-break: normal; hyphens: none; -webkit-hyphens: none; } /* Novela en mobile: noche absoluta unificada (revisión Elizabeth v2.1.263). Antes era gradient cocoa #4A3D28→#2C2017 como suavización, pero Elizabeth rechaza cualquier matiz marrón — mantiene noche absoluta #0f0f0f en mobile igual que desktop. */ body.essencial-umbrella-home .orb--n .orb__circle { background: radial-gradient(circle at 35% 30%, #1a1a1a, #0f0f0f) !important; border-color: rgba(201, 169, 110, 0.4) !important; box-shadow: inset 0 0 24px rgba(201, 169, 110, 0.06), 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18) !important; } body.essencial-umbrella-home .orb--n .orb__name { color: #D4B783 !important; } body.essencial-umbrella-home .orb--n .orb__tagline { color: rgba(245, 240, 232, 0.82) !important; opacity: 1 !important; } body.essencial-umbrella-home .orb--n .orb__icon { opacity: 0.7; } body.essencial-umbrella-home .orb--n .orb__icon svg { stroke: #D4B783 !important; } body.essencial-umbrella-home .orb__cta { display: none; } /* Neutralizar hover en mobile */ body.essencial-umbrella-home .orb:hover .orb__name { font-size: 1rem; } body.essencial-umbrella-home .orb:hover .orb__tagline { opacity: 0.6; } body.essencial-umbrella-home .orb:hover .orb__circle { transform: none; } body.essencial-umbrella-home .orb:hover { transform: none; } /* Border colors por universo */ body.essencial-umbrella-home .orb--j .orb__circle { border-color: rgba(201,169,110,0.4); } body.essencial-umbrella-home .orb--p .orb__circle { border-color: rgba(196,86,106,0.4); } body.essencial-umbrella-home .orb--n .orb__circle { border-color: rgba(200,180,138,0.4); } body.essencial-umbrella-home .orb--a .orb__circle { border-color: rgba(122,184,48,0.4); } /* Reveal + float — stagger escalonado, col derecha arranca con translateY */ body.essencial-umbrella-home .constellation.vis .orb--j { animation: euMiniReveal 0.6s var(--ease) 0.12s forwards, euMiniFloat1 5s ease-in-out 1s infinite !important; } body.essencial-umbrella-home .constellation.vis .orb--p { animation: euMiniRevealStagger 0.6s var(--ease) 0.24s forwards, euMiniFloatStagger2 5.6s ease-in-out 1.2s infinite !important; } body.essencial-umbrella-home .constellation.vis .orb--n { animation: euMiniReveal 0.6s var(--ease) 0.36s forwards, euMiniFloat1 5.3s ease-in-out 1.4s infinite !important; } body.essencial-umbrella-home .constellation.vis .orb--a { animation: euMiniRevealStagger 0.6s var(--ease) 0.48s forwards, euMiniFloatStagger2 5.8s ease-in-out 1.6s infinite !important; } body.essencial-umbrella-home .constellation__close { padding: 0.4rem 0.5rem 0.8rem; flex-shrink: 0; } } /* ===== Reveal helper ===== */ body.essencial-umbrella-home .reveal { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); } body.essencial-umbrella-home .reveal.vis { opacity: 1; transform: translateY(0) scale(1); } @keyframes euMiniReveal { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } @keyframes euMiniRevealStagger { from { opacity: 0; transform: translateY(22px) scale(0.7); } to { opacity: 1; transform: translateY(22px) scale(1); } } @keyframes euMiniFloat1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes euMiniFloat2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes euMiniFloatStagger2 { 0%,100% { transform: translateY(22px); } 50% { transform: translateY(18px); } } @keyframes euHeroIn { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes euFadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes euLineIn { to { opacity: 1; transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { body.essencial-umbrella-home .atmo__orb, body.essencial-umbrella-home .atmo__wordmark, body.essencial-umbrella-home .atmo__tagline, body.essencial-umbrella-home .atmo__gold-line, body.essencial-umbrella-home .prisma__s, body.essencial-umbrella-home .thread__line, body.essencial-umbrella-home .thread__label { animation: none !important; opacity: 1 !important; transform: none !important; } body.essencial-umbrella-home .prisma__s { width: var(--sw, 24px) !important; } body.essencial-umbrella-home .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } body.essencial-umbrella-home .orb { opacity: 1 !important; animation: none !important; transform: none !important; } body.essencial-umbrella-home .orb__shimmer { animation: none !important; } body.essencial-umbrella-home .constellation__lines line { opacity: 0.25 !important; animation: none !important; } body.essencial-umbrella-home .constellation__center-jewel, body.essencial-umbrella-home .constellation__center-ring { animation: none !important; } body.essencial-umbrella-home .orb__circle, body.essencial-umbrella-home .orb__icon, body.essencial-umbrella-home .orb__accent-line, body.essencial-umbrella-home .orb__cta { transition: none !important; } } /* ===== Subtle floating language switcher ===== */ body.essencial-umbrella-home .umbrella-lang { position: fixed; top: 1.75rem; right: 2rem; z-index: 50; display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.9rem; background: rgba(250, 248, 245, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(184, 150, 12, 0.18); border-radius: 999px; font-family: var(--font-b); font-size: 11px; letter-spacing: 0.12em; font-weight: 500; box-shadow: 0 2px 12px rgba(58, 44, 30, 0.06); opacity: 0; animation: umbrellaLangIn 0.8s var(--ease) 0.6s forwards; } body.essencial-umbrella-home .umbrella-lang__item { color: var(--brand-muted); text-decoration: none; padding: 0.15rem 0.25rem; transition: color 0.25s var(--ease); } body.essencial-umbrella-home .umbrella-lang__item:hover { color: var(--brand-gold); } body.essencial-umbrella-home .umbrella-lang__item.is-active { color: var(--brand-text); font-weight: 600; } body.essencial-umbrella-home .umbrella-lang__sep { color: var(--brand-border); font-size: 10px; } @keyframes umbrellaLangIn { to { opacity: 1; } } @media (max-width: 600px) { body.essencial-umbrella-home .umbrella-lang { top: 1rem; right: 1rem; padding: 0.35rem 0.75rem; font-size: 10px; } } @media (prefers-reduced-motion: reduce) { body.essencial-umbrella-home .umbrella-lang { animation: none; opacity: 1; } } /* ============================================================ * Universe Gateway (v2.1.319) — Hero full-viewport * Iteración Elizabeth: composición de colores ocupa TODA la * página como hero. Sin intro/eyebrow/question/hint. Los 4 * paneles ocupan 100vh del viewport con emblema central grande. * ============================================================ */ body.essencial-umbrella-home .ess-gateway { --gw-center-size: clamp(120px, 12vw, 180px); --gw-overlay-base: 1; --gw-overlay-hover: 0.62; --gw-text-cream: #FAF8F5; /* v2.1.332 — "Halo edition" text-shadow del hero Aromaterapia con primera capa reforzada (0.65→0.85) para silueta más nítida sobre zonas claras de foto. 3 capas con noche profunda azulada: (1) blur 2px alpha 0.85 — silueta nítida MÁS contraste (2) blur 14px alpha 0.55 + offset 3px — peso anclado debajo (3) blur 48px alpha 0.35 + no offset — atmósfera difusa */ --gw-text-shadow: 0 1px 2px rgba(8, 4, 16, 0.85), 0 3px 14px rgba(8, 4, 16, 0.55), 0 0 48px rgba(8, 4, 16, 0.35); --gw-gold: #d4af37; --gw-gold-soft: rgba(212,175,55,0.55); --gw-hairline: rgba(212,175,55,0.32); --gw-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Scrim angle default (joyería top-left) — modifiers per universe abajo */ --gw-scrim-angle: 135deg; position: relative; margin: 0; padding: 0; max-width: none; width: 100%; /* Hero full viewport: canvas ocupa viewport real (JS visualViewport). v2.1.442 — --vh-real refleja viewport visible iOS Safari incluyendo toolbar inferior. lvh/svh no descuentan eso → mal. */ min-height: 100vh; min-height: 100dvh; min-height: var(--vh-real, 100dvh); text-align: left; /* v2.1.337 — bg cream warm del section (matchea canvas + atmo final). Sin esto, el padding lateral mobile dejaba ver el body bg pálido (#FAF8F5) en lugar del cream warm (#F0EAE0). */ background: var(--brand-bg-warm); } /* ─── Canvas ocupa todo el viewport ─── */ /* v2.1.325: bg cream warm para unificar con el disc central — las zonas "blancas" expuestas por los bordes torn paper ahora tienen el mismo tono cream warm que el emblema central, en lugar del cream pálido casi-blanco del body bg. */ body.essencial-umbrella-home .ess-gateway__canvas { position: relative; width: 100%; height: 100vh; height: 100dvh; height: var(--vh-real, 100dvh); margin: 0; max-width: none; isolation: isolate; background: var(--brand-bg-warm); } /* ─── Panel base ─── */ body.essencial-umbrella-home .ess-gateway__panel { position: absolute; display: block; text-decoration: none; color: var(--gw-text-cream); overflow: hidden; isolation: isolate; background: var(--gw-panel-color, #3a3a3a); transition: transform 700ms var(--gw-ease), filter 500ms var(--gw-ease); will-change: transform; } /* Layer 1: texture */ body.essencial-umbrella-home .ess-gateway__panel-bg { position: absolute; inset: -4%; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1); transition: transform 1200ms var(--gw-ease); } /* Layer 2: scrim atmosférico direccional + tint universo v2.1.332 — Subido alphas + extendido el rango denso del scrim para garantizar legibilidad incluso sobre fotos con zonas blancas/claras en el corner del content (caso Propósito con cristales blancos en zona top-right). Patrón base del hero Aromaterapia, alphas reforzados a 0.92/0.78/0.50/0.22/0 con fade hasta 85%. */ body.essencial-umbrella-home .ess-gateway__panel-overlay { position: absolute; inset: 0; z-index: 2; background: /* Scrim direccional noche profunda azulada — más denso y extendido */ linear-gradient(var(--gw-scrim-angle, 135deg), rgba(20, 14, 28, 0.92) 0%, rgba(20, 14, 28, 0.78) 18%, rgba(20, 14, 28, 0.50) 38%, rgba(20, 14, 28, 0.22) 60%, rgba(20, 14, 28, 0) 85%), /* Tint del universo como capa secundaria (sutil) */ linear-gradient(135deg, var(--gw-panel-color, #3a3a3a) 0%, transparent 78%); opacity: 1; transition: opacity 600ms var(--gw-ease); } /* Layer 3: pointer halo (desktop only via JS --gw-mx/--gw-my) */ body.essencial-umbrella-home .ess-gateway__panel-glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--gw-mx, 50%) var(--gw-my, 50%), rgba(255,255,255,0.18) 0%, transparent 45%); transition: opacity 500ms ease; } /* Layer 4: roman numeral watermark — anchored opposite to content */ body.essencial-umbrella-home .ess-gateway__panel-roman { position: absolute; z-index: 4; pointer-events: none; font-family: var(--font-h); font-style: italic; font-weight: 400; line-height: 1; font-size: clamp(7rem, 14vw, 14rem); color: var(--gw-text-cream); opacity: 0.10; letter-spacing: -0.02em; text-shadow: 0 2px 16px rgba(0,0,0,0.25); transition: opacity 700ms var(--gw-ease), transform 700ms var(--gw-ease); } /* ─── Content block — anchored to OUTER corner (away from center) ─── */ body.essencial-umbrella-home .ess-gateway__panel-content { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 0.35rem; max-width: 14em; } /* Marker: N.º X · hairline · icon */ body.essencial-umbrella-home .ess-gateway__panel-marker { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; opacity: 0.92; } body.essencial-umbrella-home .ess-gateway__panel-num { font-family: var(--font-b); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gw-gold); white-space: nowrap; /* v2.1.331 — noche profunda azulada (igual paleta que halo edition) */ text-shadow: 0 1px 2px rgba(8, 4, 16, 0.85), 0 2px 6px rgba(8, 4, 16, 0.55); } body.essencial-umbrella-home .ess-gateway__panel-rule { display: block; width: 22px; height: 1px; background: var(--gw-gold); opacity: 0.7; transition: width 500ms var(--gw-ease), opacity 500ms ease; } body.essencial-umbrella-home .ess-gateway__panel-icon { width: clamp(20px, 1.8vw, 26px); height: clamp(20px, 1.8vw, 26px); color: var(--gw-gold); flex-shrink: 0; } body.essencial-umbrella-home .ess-gateway__panel-icon svg { width: 100%; height: 100%; display: block; /* v2.1.331 — drop-shadow azulado (paleta halo edition) */ filter: drop-shadow(0 1px 2px rgba(8, 4, 16, 0.75)) drop-shadow(0 2px 6px rgba(8, 4, 16, 0.45)); } body.essencial-umbrella-home .ess-gateway__panel-name { font-family: var(--font-h); /* v2.1.333 — subido de clamp(2.2,4.6vw,4.4) a (2.8,5.8vw,5.6) */ font-size: clamp(2.8rem, 5.8vw, 5.6rem); font-weight: 400; font-style: italic; line-height: 1.02; letter-spacing: -0.005em; color: var(--gw-text-cream); text-shadow: var(--gw-text-shadow); margin: 0; } body.essencial-umbrella-home .ess-gateway__panel-tagline { font-family: var(--font-h); font-style: italic; font-size: clamp(0.95rem, 1.3vw, 1.18rem); line-height: 1.4; color: rgba(250, 248, 245, 0.9); text-shadow: 0 1px 3px rgba(0,0,0,0.45); margin: 0; max-width: 22ch; opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--gw-ease), transform 500ms var(--gw-ease); } body.essencial-umbrella-home .ess-gateway__panel-cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.4rem; font-family: var(--font-b); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gw-gold); opacity: 0; transform: translateY(4px); transition: opacity 450ms var(--gw-ease) 80ms, transform 450ms var(--gw-ease) 80ms; } body.essencial-umbrella-home .ess-gateway__panel-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* ─── Hover/focus (desktop) ─── */ @media (hover: hover) and (pointer: fine) { body.essencial-umbrella-home .ess-gateway__panel:hover, body.essencial-umbrella-home .ess-gateway__panel:focus-visible { transform: scale(1.015); z-index: 6; } body.essencial-umbrella-home .ess-gateway__panel:hover .ess-gateway__panel-bg, body.essencial-umbrella-home .ess-gateway__panel:focus-visible .ess-gateway__panel-bg { transform: scale(1.06); } body.essencial-umbrella-home .ess-gateway__panel:hover .ess-gateway__panel-overlay, body.essencial-umbrella-home .ess-gateway__panel:focus-visible .ess-gateway__panel-overlay { opacity: var(--gw-overlay-hover); } body.essencial-umbrella-home .ess-gateway__panel:hover .ess-gateway__panel-glow, body.essencial-umbrella-home .ess-gateway__panel:focus-visible .ess-gateway__panel-glow { opacity: 1; } body.essencial-umbrella-home .ess-gateway__panel:hover .ess-gateway__panel-tagline, body.essencial-umbrella-home .ess-gateway__panel:focus-visible .ess-gateway__panel-tagline, body.essencial-umbrella-home .ess-gateway__panel:hover .ess-gateway__panel-cta, body.essencial-umbrella-home .ess-gateway__panel:focus-visible .ess-gateway__panel-cta { opacity: 1; transform: translateY(0); } body.essencial-umbrella-home .ess-gateway__panel:hover .ess-gateway__panel-rule, body.essencial-umbrella-home .ess-gateway__panel:focus-visible .ess-gateway__panel-rule { width: 42px; opacity: 1; } body.essencial-umbrella-home .ess-gateway__panel:hover .ess-gateway__panel-roman, body.essencial-umbrella-home .ess-gateway__panel:focus-visible .ess-gateway__panel-roman { opacity: 0.22; } body.essencial-umbrella-home .ess-gateway__canvas:has(.ess-gateway__panel:hover) .ess-gateway__panel:not(:hover), body.essencial-umbrella-home .ess-gateway__canvas:has(.ess-gateway__panel:focus-visible) .ess-gateway__panel:not(:focus-visible) { filter: brightness(0.86) saturate(0.85); } body.essencial-umbrella-home .ess-gateway__canvas:has(.ess-gateway__panel:hover) .ess-gateway__center-disc, body.essencial-umbrella-home .ess-gateway__canvas:has(.ess-gateway__panel:focus-visible) .ess-gateway__center-disc { transform: scale(1.05); } body.essencial-umbrella-home .ess-gateway__canvas:has(.ess-gateway__panel:hover) .ess-gateway__center-halo, body.essencial-umbrella-home .ess-gateway__canvas:has(.ess-gateway__panel:focus-visible) .ess-gateway__center-halo { opacity: 1; } } body.essencial-umbrella-home .ess-gateway__panel:focus-visible { outline: 2px solid var(--gw-gold); outline-offset: -2px; } /* ─── No-texture fallback ─── */ body.essencial-umbrella-home .ess-gateway__panel--no-texture .ess-gateway__panel-bg { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 55%), linear-gradient(160deg, var(--gw-panel-color, #3a3a3a) 0%, color-mix(in srgb, var(--gw-panel-color, #3a3a3a) 70%, #000) 100%); } body.essencial-umbrella-home .ess-gateway__panel--no-texture .ess-gateway__panel-overlay { opacity: 0.25; } /* ─── Per-universe color tokens + scrim angle por esquina del content ─── */ /* v2.1.331 — --gw-scrim-angle apunta DESDE la esquina del content HACIA la esquina opuesta. Primer stop (denso) está en el corner del content, fade a transparent en el corner opuesto. Esto permite ver la foto en su mayoría del área pero garantiza zona oscura donde está el texto. Ángulos CSS gradient: - 135deg: from top-left to bottom-right - 225deg: from top-right to bottom-left - 45deg: from bottom-left to top-right - 315deg: from bottom-right to top-left */ body.essencial-umbrella-home .ess-gateway__panel--joyeria { --gw-panel-color: #7A5639; --gw-gold: #d4af37; --gw-scrim-angle: 135deg; /* content top-left */ } body.essencial-umbrella-home .ess-gateway__panel--proposito { --gw-panel-color: #6E2A3A; --gw-gold: #F0C7CE; --gw-scrim-angle: 225deg; /* content top-right */ } body.essencial-umbrella-home .ess-gateway__panel--novela { --gw-panel-color: #0f0f0f; --gw-gold: #c9a96e; --gw-scrim-angle: 45deg; /* content bottom-left */ } body.essencial-umbrella-home .ess-gateway__panel--aromaterapia { --gw-panel-color: #2d4a37; --gw-gold: #C3D88F; --gw-scrim-angle: 315deg; /* content bottom-right */ } /* ============================================================ * Desktop ≥1024px — Torn-paper 2x2 composition (v2.1.318) * * Cada panel = "trozo de fotografía rasgada". * Bordes EXTERNOS (los que dan al borde de canvas/página) = TORN * con variación orgánica IRREGULAR (~16 puntos, saltos no * rítmicos, picos puntuales de hasta -8% para parecer rasgado * real, no zigzag). * Bordes INTERNOS hacia el centro = CORTES DIAGONALES LIMPIOS * (3 vértices: top-corner → inner-apex → bottom-corner). * * Rotación leve por panel (±0.5-0.8deg) + drop-shadow sutil * para sugerir grosor de papel sobre fondo cream. * * Canvas 16:10, max-height 60vh — todo cabe en 1 viewport. * ============================================================ */ @media (min-width: 1024px) { /* Canvas = full viewport (hero), no aspect-ratio limit */ body.essencial-umbrella-home .ess-gateway__canvas { aspect-ratio: auto; width: 100%; height: 100vh; height: 100dvh; height: var(--vh-real, 100dvh); min-height: 540px; max-height: none; } /* v2.1.326 — drop-shadow CSS eliminado en desktop porque con mask:url(#) aplicado, filter:drop-shadow se renderea sobre el bounding box rectangular ANTES del mask → sombra rectangular visible fuera del shape torn (feo). La rotación leve por panel + el cream warm canvas dan suficiente naturalidad. Si se quiere recuperar el shadow siguiendo el torn shape, hacer wrapper. */ /* v2.1.326 — Bordes "foto rota" via SVG mask con feTurbulence + feDisplacementMap. El polygon base (pentagonal hacia inner apex) se distorsiona orgánicamente por el ruido fractal. Cada panel tiene su seed único en el filter → distorsión irrepetible (no simétrica). El text/content del panel NO se distorsiona — solo el polygon del mask, generando la silueta torn. */ /* JOYERÍA — TOP-LEFT. Outer edges torn (top + left); inner diagonals clean toward inner apex (~94,94) */ body.essencial-umbrella-home .ess-gateway__panel--joyeria { top: 0; left: 0; width: 52%; height: 52%; rotate: -0.7deg; -webkit-mask: url(#ess-gw-mask-joyeria); mask: url(#ess-gw-mask-joyeria); } /* PROPÓSITO — TOP-RIGHT. Outer edges torn (top + right); inner diagonals clean toward inner apex (~6,94) */ body.essencial-umbrella-home .ess-gateway__panel--proposito { top: 0; right: 0; width: 52%; height: 52%; rotate: 0.5deg; -webkit-mask: url(#ess-gw-mask-proposito); mask: url(#ess-gw-mask-proposito); } /* NOVELA — BOTTOM-LEFT. Outer edges torn (bottom + left); inner diagonals clean toward inner apex (~94,6) */ body.essencial-umbrella-home .ess-gateway__panel--novela { top: auto; bottom: 0; left: 0; width: 52%; height: 52%; rotate: 0.8deg; -webkit-mask: url(#ess-gw-mask-novela); mask: url(#ess-gw-mask-novela); } /* AROMATERAPIA — BOTTOM-RIGHT. Outer edges torn (bottom + right); inner diagonals clean toward inner apex (~6,6) */ body.essencial-umbrella-home .ess-gateway__panel--aromaterapia { top: auto; bottom: 0; right: 0; width: 52%; height: 52%; rotate: -0.55deg; -webkit-mask: url(#ess-gw-mask-aromaterapia); mask: url(#ess-gw-mask-aromaterapia); } /* Content positioning per panel — anchored to OUTER torn corner. Lejos del centro y del corte interno limpio. Roman watermark al lado OPUESTO (cerca del corte interno). */ body.essencial-umbrella-home .ess-gateway__panel--joyeria .ess-gateway__panel-content { top: 12%; left: 11%; text-align: left; align-items: flex-start; } body.essencial-umbrella-home .ess-gateway__panel--joyeria .ess-gateway__panel-roman { bottom: 12%; right: 18%; } body.essencial-umbrella-home .ess-gateway__panel--proposito .ess-gateway__panel-content { top: 12%; right: 11%; text-align: right; align-items: flex-end; } body.essencial-umbrella-home .ess-gateway__panel--proposito .ess-gateway__panel-roman { bottom: 12%; left: 18%; } /* v2.1.325 FIX desalineación: en paneles bottom-anchored (Novela + Aromaterapia), el content rectangular tenía altura natural y la parte visible (marker+name) quedaba al TOP del content (= ~73% del viewport, no pegada al bottom). La parte inferior del content (tagline + CTA con opacity:0 por default) quedaba invisible pero ocupando espacio → visualmente parecía texto "en medio". Fix: inset top+bottom + justify-content flex-end empuja items al bottom-edge real del content, simétrico a Joyería/Propósito. */ body.essencial-umbrella-home .ess-gateway__panel--novela .ess-gateway__panel-content { top: 12%; bottom: 12%; left: 11%; right: auto; max-width: 14em; text-align: left; align-items: flex-start; justify-content: flex-end; } body.essencial-umbrella-home .ess-gateway__panel--novela .ess-gateway__panel-roman { top: 12%; right: 18%; } body.essencial-umbrella-home .ess-gateway__panel--aromaterapia .ess-gateway__panel-content { top: 12%; bottom: 12%; right: 11%; left: auto; max-width: 14em; text-align: right; align-items: flex-end; justify-content: flex-end; } body.essencial-umbrella-home .ess-gateway__panel--aromaterapia .ess-gateway__panel-roman { top: 12%; left: 18%; } } /* ============================================================ * Tablet 768-1023px — Hero full viewport con grid 2x2. * Sin clip-path torn (cards limpias). Emblema central visible. * Cada celda ocupa 50vh × 50% del ancho. * ============================================================ */ @media (min-width: 768px) and (max-width: 1023px) { body.essencial-umbrella-home .ess-gateway__canvas { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; aspect-ratio: auto; width: 100%; height: 100vh; height: 100dvh; height: var(--vh-real, 100dvh); min-height: 640px; } body.essencial-umbrella-home .ess-gateway__panel { position: relative; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; top: auto; left: auto; right: auto; bottom: auto; clip-path: none !important; rotate: 0deg !important; filter: none !important; box-shadow: none; } /* v2.1.327 — Torn paper también en tablet (4 bordes rasgados por panel). Mismas masks rectangulares que mobile, seeds únicos. */ body.essencial-umbrella-home .ess-gateway__panel--joyeria { -webkit-mask: url(#ess-gw-mask-mobile-joyeria); mask: url(#ess-gw-mask-mobile-joyeria); } body.essencial-umbrella-home .ess-gateway__panel--proposito { -webkit-mask: url(#ess-gw-mask-mobile-proposito); mask: url(#ess-gw-mask-mobile-proposito); } body.essencial-umbrella-home .ess-gateway__panel--novela { -webkit-mask: url(#ess-gw-mask-mobile-novela); mask: url(#ess-gw-mask-mobile-novela); } body.essencial-umbrella-home .ess-gateway__panel--aromaterapia { -webkit-mask: url(#ess-gw-mask-mobile-aromaterapia); mask: url(#ess-gw-mask-mobile-aromaterapia); } body.essencial-umbrella-home .ess-gateway__panel-content { position: absolute; inset: auto 1.4rem 1.4rem 1.4rem; max-width: 100%; text-align: left; align-items: flex-start; } body.essencial-umbrella-home .ess-gateway__panel-roman { top: 0.8rem !important; right: 1.2rem !important; bottom: auto !important; left: auto !important; font-size: clamp(5rem, 12vw, 8rem); } body.essencial-umbrella-home .ess-gateway__panel-name { font-size: clamp(1.8rem, 4.4vw, 2.6rem); } body.essencial-umbrella-home .ess-gateway__panel-tagline, body.essencial-umbrella-home .ess-gateway__panel-cta { opacity: 0.95; transform: none; } /* Center emblem visible at tablet — over the grid intersection */ body.essencial-umbrella-home .ess-gateway__center { display: block; width: clamp(80px, 11vw, 120px); height: clamp(80px, 11vw, 120px); } } /* ============================================================ * Mobile <768px — Stack vertical, hero impactante por panel. * Cada panel ocupa ~25vh (4 paneles = 100vh exacto, sin scroll * para que el "hero" full-page se mantenga). En portrait pequeño * (iPhone SE 568px) los paneles caen a min-height para que el * texto editorial respire. * ============================================================ */ @media (max-width: 767px) { body.essencial-umbrella-home .ess-gateway { /* v2.1.336 — padding lateral cream warm para que el torn paper de los bordes laterales tenga espacio visible (antes flush al viewport, bumps positivos quedaban fuera). 14px da margen suficiente sin sacrificar tamaño foto. v2.1.385 — lvh → svh (small viewport height). svh asume la URL bar SIEMPRE visible (viewport mínimo), garantizando que los 4 paneles caben en pantalla aunque la URL bar de Safari iOS esté expandida (estado al cargar la página). Sin layout shift cuando la URL bar se contrae al scrollear — el viewport min queda fijo. Fallbacks chain: vh → lvh → svh para browsers progresivamente más modernos (svh con soporte 2023+). */ padding: 0 14px; min-height: 100vh; min-height: 100dvh; min-height: var(--vh-real, 100dvh); } body.essencial-umbrella-home .ess-gateway__canvas { display: flex; flex-direction: column; gap: 0; aspect-ratio: auto; width: 100%; height: 100vh; height: 100dvh; height: var(--vh-real, 100dvh); /* v2.1.442 — viewport real visible iOS */ min-height: 560px; } body.essencial-umbrella-home .ess-gateway__panel { position: relative; width: 100%; flex: 1 1 0; min-height: 140px; aspect-ratio: auto; border-radius: 0; top: auto; left: auto; right: auto; bottom: auto; height: auto; clip-path: none !important; rotate: 0deg !important; filter: none !important; box-shadow: none; } /* v2.1.327 — Torn paper mobile (4 bordes rasgados rectangulares). Mismos seeds que desktop para coherencia visual cross-breakpoint (cada universo conserva su "personalidad" de rasgado). */ body.essencial-umbrella-home .ess-gateway__panel--joyeria { -webkit-mask: url(#ess-gw-mask-mobile-joyeria); mask: url(#ess-gw-mask-mobile-joyeria); } body.essencial-umbrella-home .ess-gateway__panel--proposito { -webkit-mask: url(#ess-gw-mask-mobile-proposito); mask: url(#ess-gw-mask-mobile-proposito); } body.essencial-umbrella-home .ess-gateway__panel--novela { -webkit-mask: url(#ess-gw-mask-mobile-novela); mask: url(#ess-gw-mask-mobile-novela); } body.essencial-umbrella-home .ess-gateway__panel--aromaterapia { -webkit-mask: url(#ess-gw-mask-mobile-aromaterapia); mask: url(#ess-gw-mask-mobile-aromaterapia); } /* v2.1.328 — Padding interior mobile aumentado para que texto NO toque los torn edges. Marker subido a 1.4rem para evitar corte por el rasgado superior. */ body.essencial-umbrella-home .ess-gateway__panel-content { position: absolute; inset: auto 1.4rem 1.4rem 1.4rem; max-width: 100%; text-align: left; align-items: flex-start; } body.essencial-umbrella-home .ess-gateway__panel-roman { top: 1.4rem !important; right: 1.4rem !important; bottom: auto !important; left: auto !important; font-size: clamp(3.4rem, 13vw, 5rem); } /* v2.1.340 — Fix legibilidad mobile (texto sobre foto): 1. SCRIM angle universal a 45deg (from bottom-left → top-right). El content de TODOS los paneles mobile está bottom-left, así que el primer stop denso del scrim debe estar en esa esquina. Antes cada panel usaba su scrim-angle desktop (135/225/45/315) → en Joyería/Propósito/Aromaterapia el content caía en zona TRANSPARENTE del scrim → texto sin oscurecimiento. 2. OVERLAY opacity restaurado a 1 (era 0.40 legacy del cuando scrim usaba multiply). Ahora con scrim direccional opaco, opacity 1 da el oscurecimiento completo definido en los stops. 3. TEXT-SHADOW reforzado en mobile — más capa cercana sharp para nitidez de la silueta sobre fotos con detalle (cristales, gotero, etc.) */ body.essencial-umbrella-home .ess-gateway__panel { --gw-scrim-angle: 45deg; } body.essencial-umbrella-home .ess-gateway__panel-overlay { opacity: 1; } body.essencial-umbrella-home .ess-gateway__panel-name { font-size: clamp(1.7rem, 7.2vw, 2.4rem); /* Sombra mobile reforzada — silueta más sharp + peso anclado */ text-shadow: 0 1px 2px rgba(8, 4, 16, 0.95), 0 2px 8px rgba(8, 4, 16, 0.70), 0 4px 20px rgba(8, 4, 16, 0.45); } body.essencial-umbrella-home .ess-gateway__panel-tagline, body.essencial-umbrella-home .ess-gateway__panel-cta { opacity: 0.95; transform: none; } body.essencial-umbrella-home .ess-gateway__panel-tagline { max-width: 32ch; text-shadow: 0 1px 2px rgba(8, 4, 16, 0.85), 0 2px 8px rgba(8, 4, 16, 0.55); } body.essencial-umbrella-home .ess-gateway__center { display: none; } } /* ============================================================ * Central emblem (desktop only) * ============================================================ */ body.essencial-umbrella-home .ess-gateway__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 8; width: var(--gw-center-size); height: var(--gw-center-size); } body.essencial-umbrella-home .ess-gateway__center-disc { position: relative; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, var(--brand-bg) 0%, var(--brand-bg-warm) 80%); box-shadow: 0 8px 26px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08), inset 0 0 0 1px var(--gw-hairline), inset 0 0 20px rgba(212,175,55,0.07); display: flex; align-items: center; justify-content: center; transition: transform 600ms var(--gw-ease); } body.essencial-umbrella-home .ess-gateway__center-logo { width: 62%; height: auto; display: block; position: relative; z-index: 2; } body.essencial-umbrella-home .ess-gateway__center-mono { font-family: var(--font-h); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); color: var(--brand-text); line-height: 1; letter-spacing: -0.02em; position: relative; z-index: 2; } body.essencial-umbrella-home .ess-gateway__center-halo { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,0.20) 0%, transparent 60%); opacity: 0.55; pointer-events: none; transition: opacity 700ms ease; } body.essencial-umbrella-home .ess-gateway__center-ring { position: absolute; inset: -8%; border-radius: 50%; border: 1px solid var(--gw-hairline); pointer-events: none; animation: euGatewayRingPulse 6s ease-in-out infinite; } @keyframes euGatewayRingPulse { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.75; transform: scale(1.04); } } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { body.essencial-umbrella-home .ess-gateway__panel, body.essencial-umbrella-home .ess-gateway__panel-bg, body.essencial-umbrella-home .ess-gateway__panel-overlay, body.essencial-umbrella-home .ess-gateway__panel-glow, body.essencial-umbrella-home .ess-gateway__panel-roman, body.essencial-umbrella-home .ess-gateway__panel-tagline, body.essencial-umbrella-home .ess-gateway__panel-cta, body.essencial-umbrella-home .ess-gateway__panel-rule, body.essencial-umbrella-home .ess-gateway__panel-icon, body.essencial-umbrella-home .ess-gateway__center-disc, body.essencial-umbrella-home .ess-gateway__center-halo, body.essencial-umbrella-home .ess-gateway__center-ring { transition: none !important; animation: none !important; } body.essencial-umbrella-home .ess-gateway__panel-tagline, body.essencial-umbrella-home .ess-gateway__panel-cta { opacity: 1; transform: none; } body.essencial-umbrella-home .ess-gateway__panel-rule { width: 42px; opacity: 1; } } /* ============================================================ v2 HERO LIFE (2026-05-31) — vida en el hero sin tocar la identidad editorial: destello del wordmark (luz de joya), ciclo lento por los 4 universos en las auras, manifiesto editorial y DESCUBRE dorado con luz descendente. Solo transform/opacity/mask. Respeta prefers-reduced-motion. ============================================================ */ /* — Auras: ciclo lento por los 4 universos (joyería→propósito→novela→aromaterapia). Desktop. — */ @media (min-width: 768px) { body.essencial-umbrella-home .atmo__orb--j { animation: euOrb1 22s ease-in-out infinite, euUniCyc 12s ease-in-out 0s infinite; } body.essencial-umbrella-home .atmo__orb--p { animation: euOrb2 26s ease-in-out infinite, euUniCyc 12s ease-in-out 3s infinite; } body.essencial-umbrella-home .atmo__orb--n { animation: euOrb4 20s ease-in-out infinite, euUniCyc 12s ease-in-out 6s infinite; } body.essencial-umbrella-home .atmo__orb--a { animation: euOrb3 24s ease-in-out infinite, euUniCyc 12s ease-in-out 9s infinite; } } @keyframes euUniCyc { 0% { opacity: 0.14; } 8% { opacity: 0.32; } 26% { opacity: 0.14; } 100% { opacity: 0.14; } } /* — Destello de joya recorriendo el wordmark (máscara = forma del logo) — */ body.essencial-umbrella-home .atmo__wordmark { position: relative; } body.essencial-umbrella-home .atmo__wordmark::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask: url('/themes/essencial/assets/img/essencial_logo.svg') center / contain no-repeat; mask: url('/themes/essencial/assets/img/essencial_logo.svg') center / contain no-repeat; background: linear-gradient(115deg, transparent 40%, var(--essm-sheen, rgba(247,229,186,0.9)) 50%, transparent 60%); background-size: 300% 100%; background-position: 160% 0; animation: euWordmarkSweep 4.5s ease-in-out 1.4s infinite; } @keyframes euWordmarkSweep { 0% { background-position: 160% 0; } 55% { background-position: -60% 0; } 100% { background-position: -60% 0; } } /* — Manifiesto editorial: frase-líder en Cormorant, 4 disciplinas color-codificadas, firma dorada — */ body.essencial-umbrella-home .atmo__manifesto::before { content: "\25C6"; display: block; text-align: center; color: var(--brand-gold); font-size: 0.7rem; letter-spacing: 0.3em; opacity: 0.8; margin-bottom: 1rem; } body.essencial-umbrella-home .atmo__manifesto p { color: var(--brand-body); } body.essencial-umbrella-home .atmo__manifesto .essm-lead { display: block; font-family: var(--font-h); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; line-height: 1.25; color: var(--brand-text); letter-spacing: 0.005em; margin-bottom: 0.7rem; } body.essencial-umbrella-home .atmo__manifesto strong { color: inherit; font-weight: 400; } body.essencial-umbrella-home .atmo__manifesto .essm-u { font-weight: 600; } body.essencial-umbrella-home .atmo__manifesto .essm-j { color: var(--essm-j, #8A6038); } body.essencial-umbrella-home .atmo__manifesto .essm-p { color: var(--essm-p, #7A2E3A); } body.essencial-umbrella-home .atmo__manifesto .essm-a { color: var(--essm-a, #4A7020); } body.essencial-umbrella-home .atmo__manifesto .essm-n { color: var(--essm-n, #4B3A57); } body.essencial-umbrella-home .atmo__manifesto p:last-child { font-family: var(--font-h); font-size: clamp(1.35rem, 2.3vw, 1.7rem); margin-top: 1rem; } /* "Esto es Essencial." — firma más grande, en carbón de marca (sin dorado). */ body.essencial-umbrella-home .atmo__manifesto p:last-child em { color: var(--brand-text); } /* — DESCUBRE: bronce, más grande y con peso para que resalte + luz que desciende por la línea — */ body.essencial-umbrella-home .atmo__scroll-text { color: var(--essm-descubre, #7A5838); letter-spacing: 0.42em; font-size: 0.9rem; font-weight: 600; } body.essencial-umbrella-home .atmo__scroll-line { position: relative; overflow: hidden; width: 1px; height: 52px; background: var(--essm-descubre-track, rgba(122,88,56,0.22)); } body.essencial-umbrella-home .atmo__scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%; background: linear-gradient(180deg, transparent, var(--essm-descubre, #7A5838)); animation: euScrollDrip 2.1s cubic-bezier(0.6, 0.04, 0.3, 1) 2.4s infinite; } @keyframes euScrollDrip { 0% { transform: translateY(-120%); opacity: 0; } 25% { opacity: 1; } 90% { opacity: 0.6; } 100% { transform: translateY(240%); opacity: 0; } } /* — El logo dibujándose (inline SVG inyectado por JS la 1ª visita/sesión) — */ body.essencial-umbrella-home .atmo__logo--draw { width: 100%; height: auto; display: block; overflow: visible; } @media (prefers-reduced-motion: reduce) { body.essencial-umbrella-home .atmo__orb--j, body.essencial-umbrella-home .atmo__orb--p, body.essencial-umbrella-home .atmo__orb--a, body.essencial-umbrella-home .atmo__orb--n, body.essencial-umbrella-home .atmo__scroll-line::after { animation: none !important; } body.essencial-umbrella-home .atmo__wordmark::after { animation: none !important; display: none; } }