/* ========================================================================== VLIV · Sistema de diseño compartido Este archivo reemplaza el bloque de estilos duplicado en cada landing. Al montar una landing en Elementor, borra de su HTML todo lo que ya esté aquí y deja solo lo específico de esa página. ========================================================================== */ :root { /* ---- Color ---- */ --vliv-verde: #12241F; --vliv-acento: #2FBF9B; --vliv-verde-txt: #15705C; /* acento legible sobre fondo claro */ --vliv-crema: #FAF7F1; --vliv-crema-alto: #FFFDF8; --vliv-tinta: #1A1F1D; --vliv-gris: #6B7280; /* límite AA sobre crema: 4.52:1 */ --vliv-gris-2: #545B66; /* atenuado accesible: 6.41:1 */ --vliv-error: #C0392B; /* Derivados. Nunca apliques opacidad a un gris para atenuar texto: sobre crema cae por debajo del mínimo legible. Usa --vliv-gris-2. */ --vliv-acento-12: rgba(47,191,155,.12); --vliv-acento-28: rgba(47,191,155,.28); --vliv-acento-55: rgba(47,191,155,.55); --vliv-hairline: rgba(26,31,29,.06); --vliv-hairline-clr: rgba(250,247,241,.12); /* ---- Color por producto y cluster ---- */ --vliv-c-vegana: #2FBF9B; --vliv-c-grassfed: #C9973F; --vliv-c-electrolitos: #2B9FD6; --vliv-c-polvo: #1E7A8C; --vliv-c-stress: #7C6BA8; /* ---- Espaciado ---- */ --esp-xs: .5rem; --esp-sm: 1rem; --esp-md: 2rem; --esp-lg: 4rem; --esp-xl: 8rem; --esp-2xl: 12rem; --esp-sec: clamp(6rem, 12vw, 12rem); /* ---- Radios (doble bisel) ---- */ --vliv-rad: 2rem; --vliv-rad-pad: 7px; --vliv-rad-in: calc(2rem - 7px); /* ---- Movimiento ---- */ --vliv-ease: cubic-bezier(.32,.72,0,1); --vliv-dur-micro: 300ms; --vliv-dur-rev: 800ms; --vliv-dur-estado: 500ms; /* ---- Tipografía ---- */ --vliv-sans: 'Alexandria'; --vliv-cond: 'Alexandria'; --vliv-serif: 'Alexandria'; /* ---- Capas ---- */ --z-grano: 9; --z-nav: 20; --z-panel: 40; --z-modal: 60; } /* ========================================================================== Grano de película IMPORTANTE: va sobre , no dentro de un contenedor de Elementor. Si un contenedor padre usa transform o filter se convierte en bloque contenedor y position:fixed deja de anclarse al viewport. Ese es el motivo por el que el grano dejaba de cubrir la pantalla. ========================================================================== */ body.vliv-grano::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grano); pointer-events: none; opacity: .032; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========================================================================== Doble bisel Capa externa con hairline y padding; núcleo interno con radio concéntrico. Un radio interior igual al exterior delata el truco. ========================================================================== */ .vliv-bisel { padding: var(--vliv-rad-pad); border-radius: var(--vliv-rad); border: 1px solid var(--vliv-hairline); background: rgba(26,31,29,.02); } .vliv-bisel--clr { border-color: var(--vliv-hairline-clr); background: rgba(250,247,241,.04); } .vliv-bisel > .vliv-nucleo { border-radius: var(--vliv-rad-in); background: var(--vliv-crema-alto); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); overflow: hidden; } /* ========================================================================== Revelado al entrar en viewport El desplazamiento y las transformaciones decorativas se COMPONEN en una sola declaración. Si el revelado usara transform:none borraría cualquier rotación o desfase del mismo elemento. Todo decorativo se declara como --rev-dec, nunca como transform suelto. ========================================================================== */ .vliv-rev { --rev-y: 0rem; --rev-dec: ; transform: translateY(var(--rev-y)) var(--rev-dec); transition: opacity var(--vliv-dur-rev) var(--vliv-ease), transform var(--vliv-dur-rev) var(--vliv-ease), filter var(--vliv-dur-rev) var(--vliv-ease); } .vliv-anim .vliv-rev { --rev-y: 2.5rem; opacity: 0; filter: blur(6px); } .vliv-anim .vliv-rev.vliv-in { --rev-y: 0rem; opacity: 1; filter: blur(0); } /* ========================================================================== Tipografía base ========================================================================== */ .vliv-h1 { font-family: var(--vliv-cond); font-weight: 600; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 6rem); line-height: .88; letter-spacing: -.02em; text-wrap: balance; } .vliv-h1__acento { font-family: var(--vliv-serif); font-style: italic; font-weight: 400; text-transform: none; font-size: .52em; letter-spacing: 0; } .vliv-h2 { font-family: var(--vliv-serif); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; } .vliv-etq { font-family: var(--vliv-sans); font-size: 10px; text-transform: uppercase; letter-spacing: .24em; color: var(--vliv-gris-2); } .vliv-cuerpo { font-family: var(--vliv-sans); font-size: 1.0625rem; line-height: 1.75; color: var(--vliv-tinta); max-width: 68ch; text-wrap: pretty; } /* Píldora de antetítulo */ .vliv-pill { display: inline-block; padding: 4px 14px; border-radius: 999px; font-family: var(--vliv-sans); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .24em; border: 1px solid var(--vliv-acento-28); background: var(--vliv-acento-12); color: var(--vliv-verde-txt); } /* Variante para fondo oscuro: el acento brillante solo es legible ahí */ .vliv-pill--clr { color: var(--vliv-acento); border-color: var(--vliv-acento-55); background: rgba(47,191,155,.14); } /* ========================================================================== Botón con flecha en círculo contenedor ========================================================================== */ .vliv-btn { display: inline-flex; align-items: center; gap: .75rem; padding: .75rem .75rem .75rem 1.5rem; border-radius: 999px; font-family: var(--vliv-sans); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color var(--vliv-dur-micro) var(--vliv-ease), color var(--vliv-dur-micro) var(--vliv-ease), border-color var(--vliv-dur-micro) var(--vliv-ease), transform var(--vliv-dur-micro) var(--vliv-ease); } .vliv-btn--solido { background: var(--vliv-verde); color: var(--vliv-crema); } .vliv-btn--linea { background: transparent; color: var(--vliv-tinta); border-color: var(--vliv-hairline); } .vliv-btn:active { transform: scale(.98); } .vliv-btn__circ { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(255,255,255,.14); transition: transform var(--vliv-dur-micro) var(--vliv-ease); } .vliv-btn--linea .vliv-btn__circ { background: rgba(26,31,29,.06); } .vliv-btn:hover .vliv-btn__circ { transform: translate(2px,-1px) scale(1.05); } /* ========================================================================== Utilidades ========================================================================== */ .vliv-solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .vliv-saltar { position: absolute; left: 1rem; top: -100px; z-index: var(--z-modal); padding: .75rem 1.25rem; border-radius: 999px; background: var(--vliv-verde); color: var(--vliv-crema); font-family: var(--vliv-sans); font-size: 13px; letter-spacing: .04em; transition: top var(--vliv-dur-micro) var(--vliv-ease); } .vliv-saltar:focus-visible { top: 1rem; } [id] { scroll-margin-top: 5rem; } .vliv-hairline { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--vliv-hairline), transparent); } .vliv-img { display: block; width: 100%; height: 100%; object-fit: cover; } .vliv-ph { color: var(--vliv-gris-2); } /* Foco visible. Nunca elimines outline sin reemplazarlo. */ .vliv-sec :focus-visible, [class^="vliv-"]:focus-visible { outline: 2px solid var(--vliv-verde-txt); outline-offset: 3px; } /* ========================================================================== Movimiento reducido Sin !important ni selector universal: se apagan solo los componentes propios, para no interferir con el resto del sitio. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .vliv-rev, .vliv-anim .vliv-rev { --rev-y: 0rem; opacity: 1; filter: none; transition: none; } .vliv-btn, .vliv-btn__circ, .vliv-bisel, .vliv-saltar { transition: none; } } /* ========================================================================== Colapso móvil Toda asimetría, rotación y desfase se elimina: en móvil provocan conflictos de área táctil. ========================================================================== */ @media (max-width: 767px) { .vliv-rev { --rev-dec: ; } :root { --esp-sec: clamp(4rem, 14vw, 6rem); } }