/* =================================================================== VENTI 2026 — hoja del rediseño público (home, y después nosotros, contacto y login). Namespace `vt2`. Va DESPUÉS de test.min.css para poder afinar sin tocar ese par de archivos, que no tienen minificador que los regenere. ── Cómo funciona el color ────────────────────────────────────────── El diseño no tiene "un" tema: tiene DOS paletas completas que se alternan mientras bajas. Cada sección declara la suya con `data-tema="claro|oscuro"`, y venti2026.js escribe `data-theme` en el . La página entera transiciona. Por eso hay dos capas de variables: --vt-light-* / --vt-dark-* los tokens de Css 2026 (editables) --c-* la paleta EN USO en este momento Nada pinta con `--vt-*` directamente: todo pinta con `--c-*`, y lo único que hace el cambio de tema es reapuntar `--c-*` al juego que toca. Un solo sitio que cambiar. Los `--c-*` son nombres nuevos: no pisan `--bg`, `--fg`, `--primary` ni `--dark`, que son los del hub, el escáner y la zona admin. ── Los bordes ───────────────────────────────────────────────────── No son tokens. Se derivan del texto con color-mix, así siguen al tema solos y no hay dos cosas que mantener sincronizadas. ── La tipografía ────────────────────────────────────────────────── Sale de --font-body (Nimbus Sans, token del tema). Sin negritas en ningún sitio: el peso lo dan el tamaño y el espaciado, no el grosor. =================================================================== */ /* ══════════════════════════════════════════════════════════════════ 1. PALETA ══════════════════════════════════════════════════════════════════ */ /* Arranque oscuro: la portada es oscura. Si el JS no llega a correr, la página se ve bien igual — solo que sin cambiar de color. */ :root { --c-bg: var(--vt-dark-bg); --c-fg: var(--vt-dark-fg); --c-card: var(--vt-dark-card); --c-muted: var(--vt-dark-muted); --c-accent: var(--vt-accent); --c-accent-fg: var(--vt-accent-fg); --c-radius: var(--vt-radius); /* derivados: siempre coherentes con el texto de turno */ --c-border: color-mix(in srgb, var(--c-fg) 14%, transparent); --c-line: color-mix(in srgb, var(--c-fg) 8%, transparent); --c-soft: color-mix(in srgb, var(--c-fg) 50%, transparent); --vt-max: 72rem; --vt-pad: 1.25rem; --vt-ease: cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 768px) { :root { --vt-pad: 2rem; } } :root[data-theme="light"] { --c-bg: var(--vt-light-bg); --c-fg: var(--vt-light-fg); --c-card: var(--vt-light-card); --c-muted: var(--vt-light-muted); } :root[data-theme="dark"] { --c-bg: var(--vt-dark-bg); --c-fg: var(--vt-dark-fg); --c-card: var(--vt-dark-card); --c-muted: var(--vt-dark-muted); } /* ══════════════════════════════════════════════════════════════════ 2. LIENZO El body es quien lleva el color de fondo, no las secciones: así el cambio de tema es UNA transición de toda la página y no un mosaico de bloques cambiando cada uno por su cuenta. ══════════════════════════════════════════════════════════════════ */ body.vt-2026 { background: var(--c-bg); color: var(--c-fg); font-family: var(--font-body); transition: background-color .7s ease-in-out, color .7s ease-in-out; overflow-x: hidden; } /* test.min.css pinta el
; aquí tiene que dejarse ver el body */ body.vt-2026 main { background: transparent; } .vt2 { font-family: var(--font-body); } .vt2 *, .vt2 *::before, .vt2 *::after { box-sizing: border-box; } .vt2__wrap { width: 100%; max-width: var(--vt-max); margin-inline: auto; padding-inline: var(--vt-pad); } /* ── escala tipográfica ───────────────────────────────────────────── */ .vt2 h1, .vt2 h2, .vt2 h3, .vt2 h4 { font-weight: 400; text-transform: uppercase; letter-spacing: -.02em; margin: 0; color: var(--c-fg); text-wrap: balance; } .vt2__h1 { font-size: clamp(2.6rem, 7vw, 3.75rem); line-height: 1.05; } .vt2__h2 { font-size: clamp(2.1rem, 6vw, 3.75rem); line-height: 1.08; } .vt2__h3 { font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.15; } .vt2__eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-soft); margin: 0; } .vt2__lead { font-size: 1rem; line-height: 1.7; color: var(--c-muted); text-wrap: pretty; margin: 0; } /* ── botones ──────────────────────────────────────────────────────── */ .vt2__btn { display: inline-block; border: 0; border-radius: 999px; padding: .95rem 2.2rem; font-size: .875rem; text-decoration: none; background: var(--c-fg); color: var(--c-bg); transition: transform .3s var(--vt-ease), background-color .7s ease-in-out, color .7s ease-in-out; } .vt2__btn:hover { transform: scale(1.05); color: var(--c-bg); } .vt2__btn--accent { background: var(--c-accent); color: var(--c-accent-fg); text-transform: uppercase; letter-spacing: .04em; } .vt2__btn--accent:hover { color: var(--c-accent-fg); } .vt2__pill { display: inline-block; border: 1px solid var(--c-border); border-radius: 999px; padding: .4rem 1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-muted); } .vt2__dot-accent { color: var(--c-accent); } /* ══════════════════════════════════════════════════════════════════ 3. NAVBAR El layout la trae de Bootstrap con `.navbar.bg-body-tertiary` y un id. Eso son 1 id + 2 clases: para ganarle hay que repetir las dos clases, no basta con el id aunque lleve !important. ══════════════════════════════════════════════════════════════════ */ body.vt-2026 .navbar.bg-body-tertiary#mysNavbarA { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: .5rem 0; transition: background-color .4s ease, backdrop-filter .4s ease, padding .4s ease; } body.vt-2026 .navbar.bg-body-tertiary#mysNavbarA.vt2-scrolled { background: color-mix(in srgb, var(--c-bg) 82%, transparent) !important; backdrop-filter: blur(18px); border-bottom: 1px solid var(--c-line) !important; } body.vt-2026 #mysNavbarA .nav-link, body.vt-2026 #mysNavbarA .navbar-nav .nav-link { color: var(--c-soft) !important; font-size: .875rem; text-transform: none; transition: color .3s ease; } body.vt-2026 #mysNavbarA .nav-link:hover { color: var(--c-fg) !important; } /* ── MENU COLAPSADO EN MOVIL ─────────────────────────────────────────── test.css pinta `.navbar-collapse`/`.navbar-nav` con `var(--bg)` (el fondo claro global). En vt-2026 el texto del link es `--c-soft`, pensado para el fondo oscuro del tema: claro sobre claro, invisible. ──────────────────────────────────────────────────────────────────── */ @media (max-width: 991.98px) { body.vt-2026 #mysNavbarA .navbar-collapse, body.vt-2026 #mysNavbarA .navbar-nav { background-color: var(--c-bg) !important; } body.vt-2026 #mysNavbarA .navbar-nav li { padding-left: 12px; } } body.vt-2026 #mysNavbarA .navbar-toggler { border-color: var(--c-border) !important; filter: none; } body.vt-2026 #mysNavbarA .navbar-toggler-icon { filter: invert(var(--vt2-invert, 1)); } :root[data-theme="light"] body.vt-2026 #mysNavbarA .navbar-toggler-icon { --vt2-invert: 0; } /* ── LA MARCA ───────────────────────────────────────────────────────── El logo son dos archivos, no uno: la palabra es blanca y sobre fondo claro desaparecería. En estas páginas el fondo cambia al bajar, así que la marca tiene que cambiar con él. Se intercambian con `content:` sobre el . Es la única forma de cambiar la imagen desde CSS —el atributo `src` no es una propiedad— y funciona en los tres motores. El `src` de la plantilla sigue siendo el que ven las páginas sin rediseñar y el que sale si esto no carga. El punto azul es el mismo en los dos archivos: es el acento de marca y no sigue al tema. ──────────────────────────────────────────────────────────────────── */ body.vt-2026 #mysNavbarA #logo, body.vt-2026 #footerLogo { content: url("../img/def/venti-logo.png"); /* palabra blanca */ } :root[data-theme="light"] body.vt-2026 #mysNavbarA #logo, :root[data-theme="light"] body.vt-2026 #footerLogo { content: url("../img/def/venti-logo-dark.png"); /* palabra negra */ } /* el tamaño lo manda el alto; el ancho lo pone la propia palabra */ body.vt-2026 #mysNavbarA #logo { height: 30px; width: auto; max-height: none; } body.vt-2026 #footerLogo { height: 34px; width: auto; } /* ── y en TODAS las páginas, rediseñadas o no ───────────────────────── `test.css` dimensiona `#logo` con `max-height:100px` y unos márgenes negativos calibrados para el logo viejo, que era casi cuadrado y traía mucho margen dentro de la imagen. La palabra nueva va recortada a hueso y es ancha: con aquellas medidas saldría enorme y cortada por los márgenes negativos. Se corrige desde aquí y no desde `test.css` porque lo que se sirve es `test.min.css` y no hay minificador que lo regenere. Esta hoja carga después, así que gana. Va sin `body.vt-2026` a propósito: la galería, el carrito y el resto siguen sin rediseñar pero también llevan el logo nuevo. ──────────────────────────────────────────────────────────────────── */ .navbar #logo { max-height: 34px; width: auto; margin: 0; } @media (min-width: 992px) { .navbar #logo { max-height: 38px; } } /* ══════════════════════════════════════════════════════════════════ 4. SECCIONES ══════════════════════════════════════════════════════════════════ */ .vt2__sec { padding-block: clamp(5rem, 12vw, 10rem); position: relative; } /* ── 4.1 PORTADA ──────────────────────────────────────────────────── */ .vt2__hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-block: 7rem 8rem; } .vt2__hero__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; width: 100%; } @media (min-width: 768px) { .vt2__hero__grid { grid-template-columns: 1fr 1fr; align-items: center; } } .vt2__hero__left { display: flex; justify-content: center; } .vt2__hero__right { display: flex; flex-direction: column; align-items: flex-start; } @media (min-width: 768px) { .vt2__hero__left { justify-content: flex-start; } .vt2__hero__right { padding-left: 2rem; } } .vt2__hero__right .vt2__h1 { margin-top: 1.5rem; max-width: 36rem; } .vt2__hero__right .vt2__lead { margin-top: 1.5rem; max-width: 24rem; } .vt2__hero__acts { margin-top: 2.5rem; } .vt2__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; } .vt2__scroll span:first-child { font-size: .625rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-muted); } .vt2__scroll__linea { width: 1px; height: 2.5rem; background: linear-gradient(to bottom, var(--c-fg), transparent); } /* ── 4.2 EL PROCESO ───────────────────────────────────────────────── */ .vt2__pasos { margin-top: clamp(3rem, 8vw, 6rem); display: flex; flex-direction: column; } .vt2__paso { display: grid; grid-template-columns: 1fr; gap: 1rem; border-top: 1px solid var(--c-border); padding-block: 2rem; } @media (min-width: 768px) { .vt2__paso { grid-template-columns: repeat(12, 1fr); gap: 2rem; padding-block: 2.5rem; } .vt2__paso__n { grid-column: span 2; } .vt2__paso__t { grid-column: span 4; } .vt2__paso__x { grid-column: span 6; } } .vt2__paso__n { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .875rem; color: var(--c-muted); margin: 0; } .vt2__paso__t { font-size: clamp(1.5rem, 4vw, 1.875rem); } .vt2__paso__x { max-width: 28rem; } /* ── 4.3 ESCAPARATE (scroll pineado) ──────────────────────────────── */ .vt2__show { position: relative; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .vt2__show__textos { position: absolute; inset-inline: 0; bottom: 2rem; z-index: 30; padding-inline: var(--vt-pad); pointer-events: none; } @media (max-width: 767px) { .vt2__show__textos { inset-inline: 0; bottom: 3rem; width: 15rem; margin-inline: auto; text-align: center; } } @media (min-width: 768px) { .vt2__show__textos { inset-block: 0; inset-inline: 2rem auto; width: 20rem; display: flex; align-items: center; } } @media (min-width: 1024px) { .vt2__show__textos { inset-inline: 4rem auto; } } .vt2__show__pista { position: relative; width: 100%; height: 7rem; } @media (min-width: 768px) { .vt2__show__pista { height: 12rem; } } .vt2__etapa { position: absolute; inset: 0; } .vt2__etapa__n { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-accent); margin: 0; } .vt2__etapa__t { margin-top: .5rem; font-size: clamp(1.25rem, 3vw, 1.5rem); } .vt2__etapa__x { margin-top: .5rem; font-size: .875rem; display: none; } @media (min-width: 768px) { .vt2__etapa__x { display: block; } } @media (max-width: 767px) { .vt2__etapa__n { font-size: .5625rem; } .vt2__etapa__t.vt2__h3 { font-size: 1.125rem; } } /* ── 4.4 BENEFICIOS ───────────────────────────────────────────────── */ .vt2__rejilla { margin-top: clamp(3rem, 8vw, 4rem); display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .vt2__rejilla { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .vt2__ben--ancho { grid-column: span 2; } } .vt2__ben { border: 1px solid var(--c-border); border-radius: 1rem; background: var(--c-card); padding: 1.75rem; transition: border-color .5s ease, background-color .7s ease-in-out; } @media (min-width: 768px) { .vt2__ben { padding: 2.25rem; } } .vt2__ben:hover { border-color: color-mix(in srgb, var(--c-fg) 40%, transparent); } .vt2__ben__ico { color: var(--c-accent); margin-bottom: 1rem; display: block; } .vt2__ben__t { font-size: clamp(1.25rem, 3vw, 1.5rem); } .vt2__ben__x { margin-top: .75rem; max-width: 32rem; font-size: .9375rem; } /* ── 4.5 CIERRE ───────────────────────────────────────────────────── */ .vt2__cta { display: flex; flex-direction: column; align-items: center; text-align: center; } .vt2__cta .vt2__h2 { max-width: 48rem; line-height: .95; } .vt2__cta .vt2__lead { margin-top: 1.5rem; max-width: 28rem; } .vt2__cta__acts { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* ══════════════════════════════════════════════════════════════════ 4b. NOSOTROS Página de tema fijo claro — no cambia al bajar. La declara igual que las del home, con `data-tema="claro"`, y el mismo código de venti2026.js la resuelve: al haber una sola fase, nunca cambia. Las páginas interiores necesitan hueco arriba porque la barra es fija y aquí no hay portada a pantalla completa que lo dé. ══════════════════════════════════════════════════════════════════ */ .vt2--pag { padding-top: 4rem; } .vt2__intro { padding-block: clamp(4rem, 10vw, 9rem); } .vt2__intro .vt2__h1 { margin-top: 1rem; max-width: 56rem; line-height: .95; } .vt2__intro .vt2__lead { margin-top: 2rem; max-width: 42rem; font-size: 1.125rem; } /* ── los principios ───────────────────────────────────────────────── */ .vt2__princ { border-top: 1px solid var(--c-border); } .vt2__princ__grid { display: grid; grid-template-columns: 1fr; padding-block: clamp(3rem, 8vw, 7rem); } @media (min-width: 768px) { .vt2__princ__grid { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } } .vt2__princ__i { border-top: 1px solid var(--c-border); padding-block: 2.5rem; } @media (min-width: 768px) { .vt2__princ__i { padding-block: 3rem; } } .vt2__princ__i h2 { font-size: clamp(1.5rem, 4vw, 1.875rem); } .vt2__princ__i p { margin-top: 1rem; max-width: 36rem; } /* ── la banda del cierre ────────────────────────────────────────────── Va INVERTIDA respecto a la página: en tema claro es negra con texto blanco, y en oscuro al revés. Por eso intercambia --c-fg y --c-bg en vez de traer colores propios: así sigue al tema sin decidir nada. El acento NO se invierte: en el diseño la banda lleva las etiquetas en el mismo azul eléctrico que el resto de la página. ══════════════════════════════════════════════════════════════════ */ .vt2__banda { border-top: 1px solid var(--c-border); background: var(--c-fg); color: var(--c-bg); transition: background-color .7s ease-in-out, color .7s ease-in-out; } .vt2__banda__in { padding-block: clamp(4rem, 10vw, 8rem); } .vt2__banda h2 { color: inherit; max-width: 48rem; font-size: clamp(1.875rem, 5vw, 3rem); line-height: 1.15; } .vt2__banda__cols { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .vt2__banda__cols { grid-template-columns: repeat(3, 1fr); } } .vt2__banda__t { font-size: .875rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-accent); margin: 0; } .vt2__banda__x { margin: .5rem 0 0; line-height: 1.7; opacity: .7; color: inherit; } .vt2__banda .vt2__btn { background: var(--c-bg); color: var(--c-fg); } /* ═════════════════════════════════════════════════════════════════ 4c. CONTACTO Dos columnas: el texto a la izquierda, el formulario a la derecha. En móvil se apilan y el formulario queda debajo, que es el orden en que se lee. ═════════════════════════════════════════════════════════════════ */ .vt2__contacto__grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; } @media (min-width: 768px) { .vt2__contacto__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } .vt2__contacto .vt2__h1 { margin-top: 1rem; } .vt2__contacto__lead { margin-top: 1.5rem; max-width: 30rem; } /* ── los datos de contacto ─────────────────────────────────── */ .vt2__datos { margin: 3rem 0 0; display: flex; flex-direction: column; gap: 1.5rem; } .vt2__datos dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-soft); font-weight: 400; } .vt2__datos dd { margin: .25rem 0 0; font-size: 1.125rem; color: var(--c-fg); } /* el segundo dato es una frase, no un dato: se lee como texto corrido */ .vt2__datos div:nth-child(2) dd { font-size: 1rem; line-height: 1.7; max-width: 20rem; color: var(--c-muted); } /* ── el formulario ─────────────────────────────────────────── */ .vt2__form { display: flex; flex-direction: column; gap: 1.25rem; } .vt2__form__nota { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-soft); } .vt2__form__fila { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .vt2__form__fila { grid-template-columns: 1fr 1fr; } } .vt2__campo { display: flex; flex-direction: column; gap: .5rem; } .vt2__campo label { font-size: .75rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-fg); } .vt2__campo input, .vt2__campo select, .vt2__campo textarea { width: 100%; border: 1px solid var(--c-border); border-radius: .75rem; background: var(--c-card); color: var(--c-fg); padding: .85rem 1rem; font-size: .9375rem; font-family: inherit; transition: border-color .3s ease, background-color .7s ease-in-out, color .7s ease-in-out; } .vt2__campo textarea { resize: vertical; min-height: 8rem; line-height: 1.6; } .vt2__campo input:focus, .vt2__campo select:focus, .vt2__campo textarea:focus { outline: none; border-color: var(--c-fg); } /* El campo que el servidor rechazó. Bootstrap ya trae `.is-invalid`, pero pinta con sus propios colores: aquí se repinta con los del tema. Se marca también con un anillo, no solo con el color, porque el color solo no lo ve todo el mundo. */ .vt2__campo input.is-invalid, .vt2__campo select.is-invalid, .vt2__campo textarea.is-invalid { border-color: var(--sale-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sale-red) 18%, transparent); background-image: none; } .vt2__form .vt2__btn { align-self: flex-start; margin-top: .5rem; border: 0; cursor: pointer; } .vt2__form .vt2__btn[disabled] { opacity: .6; cursor: default; transform: none; } /* ── el panel de «mensaje recibido» ──────────────────────────── */ .vt2__ok { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; border: 1px solid var(--c-border); border-radius: 1rem; background: var(--c-card); padding: 2rem; } @media (min-width: 768px) { .vt2__ok { padding: 3rem; } } .vt2__ok__marca { display: flex; align-items: center; justify-content: center; height: 3rem; width: 3rem; border-radius: 999px; background: var(--c-accent); color: var(--c-accent-fg); font-size: 1.25rem; } .vt2__ok__otro { margin-top: .5rem; font-size: .875rem; color: var(--c-fg); text-decoration: underline; text-underline-offset: 4px; } /* ═════════════════════════════════════════════════════════════════ 4d. ACCESO (la pantalla de login) Traducción MEDIDA de `src/pages/LoginPage.tsx` y `src/components/sections/login-form.tsx` del diseño. No es «parecido»: cada número de aquí sale de una clase de Tailwind de esos dos archivos, y va anotado al lado. Si algún día hay que volver a comparar, se compara contra esa columna. LoginPage main flex min-h-svh items-center justify-center px-5 pb-16 pt-24 caja w-full max-w-md cab mb-10 text-center logo size="lg" (text-3xl) h1 mt-3 text-xl ← SIN uppercase lead mt-2 text-sm leading-relaxed pie mt-8 text-sm · enlace underline-offset-4 LoginForm form flex flex-col gap-5 rounded-2xl border border-border bg-card/50 p-7 md:p-8 backdrop-blur-sm campo flex flex-col gap-2 label text-xs uppercase tracking-widest input rounded-xl border border-input bg-card px-4 py-3.5 text-sm transition-colors duration-300 focus:border-accent botón mt-1 rounded-full bg-accent px-8 py-4 text-sm uppercase tracking-wide duration-300 hover:scale-[1.02] disabled:opacity-60 Los radios salen del mismo sitio que allí: el diseño redefine la escala de Tailwind sobre su `--radius`, que vale 0.75rem — el mismo valor que `--vt-radius` de tokens.css. Así que `rounded-xl` es radius×1.4 y `rounded-2xl` es radius×1.8, y se escriben calculados para que sigan al token si alguien lo cambia. ── Por qué los overrides van dentro de `.vt2__acceso` ────────────── `.vt2__campo` y `.vt2__btn` los comparte contacto, que se maquetó antes con valores de la casa (tracking .18em, radio .75rem, foco en --c-fg, botón .95rem/2.2rem). El diseño usa otros. Cambiarlos en el sitio compartido movería contacto, y hoy solo toca el login: por eso se afinan aquí dentro y allí no se toca nada. ⚠️ La misma desviación existe en contacto —el diseño usa el MISMO `inputClass` en su formulario— así que si algún día se quiere el sitio entero exacto, estos valores suben a las clases compartidas y este bloque se queda solo con la geometría de la página. ── El alto y el hueco de arriba ──────────────────────────────────── El diseño pone `min-h-svh` + `pt-24` (6rem) + `pb-16` (4rem) sobre un
que empieza pegado al borde, con la barra fija por encima. Aquí el
del layout ya trae `mt-5` de Bootstrap, o sea 3rem. Así que a esta sección le quedan 3rem de padding arriba (3+3 = las 6rem del diseño) y el alto se descuenta ese margen: la caja acaba midiendo exactamente una ventana desde el borde superior, igual que allí. Esos 3rem de margen además son los que dejan sitio a la franja de `feed_err` —usuario inválido, cuenta bloqueada, demasiados intentos—, que en esta página es la mitad de lo que se ve. Ojo: esta página NO lleva `.vt2--pag`. Esa clase da 4rem de aire a las páginas interiores que empiezan con un titular; aquí el hueco de arriba lo calcula la propia sección y sumarle otros 4rem descuadraba el centrado. `vh` va primero de respaldo para los motores sin `svh`: en móvil la barra del navegador entra y sale y `vh` no lo tiene en cuenta. ═════════════════════════════════════════════════════════════════ */ .vt2__acceso { display: flex; /* flex */ align-items: center; /* items-center */ justify-content: center; /* justify-center */ min-height: calc(100vh - 3rem); min-height: calc(100svh - 3rem); /* min-h-svh − mt-5 */ padding: 3rem 1.25rem 4rem; /* pt-24(−mt-5) px-5 pb-16 */ } .vt2__acceso__caja { width: 100%; max-width: 28rem; } /* max-w-md */ /* ── la cabecera ──────────────────────────────────────────────── */ .vt2__acceso__cab { text-align: center; margin-bottom: 2.5rem; } /* mb-10 */ .vt2__acceso__marca { display: inline-block; /* inline-block */ transition: opacity .3s ease; /* transition-opacity */ } .vt2__acceso__marca:hover { opacity: .9; } /* hover:opacity-90 */ /* Tercera pareja del intercambio de logo por tema, junto a #logo de la barra y #footerLogo. Mismo mecanismo: `content:` sobre el , porque `src` no es una propiedad CSS. 34px es la medida del logo del PIE, no la de la barra. En el diseño el pie y el acceso llevan los dos `size="lg"` y la barra `size="md"`, así que el acceso tiene que calzar con el pie. */ body.vt-2026 #accesoLogo { content: url("../img/def/venti-logo.png"); /* palabra blanca */ height: 34px; width: auto; } :root[data-theme="light"] body.vt-2026 #accesoLogo { content: url("../img/def/venti-logo-dark.png"); /* palabra negra */ } /* El titular del acceso NO va en mayúsculas: en el diseño es un `text-xl` a secas, sin `uppercase` ni `tracking`. La regla general `.vt2 h1` sí las pone —todos los titulares del sitio son así— y por eso hay que desactivarlas aquí a mano. Sin esto el rótulo sale gritando y con las letras apretadas, que es justo lo que no hace la maqueta. */ .vt2__acceso__t { margin-top: .75rem; /* mt-3 */ font-size: 1.25rem; /* text-xl */ line-height: 1.75rem; text-transform: none; letter-spacing: normal; } .vt2__acceso__cab .vt2__lead { margin-top: .5rem; /* mt-2 */ font-size: .875rem; /* text-sm */ line-height: 1.625; /* leading-relaxed */ } /* ── la tarjeta del formulario ────────────────────────────────── */ .vt2__tarjeta { border: 1px solid var(--c-border); /* border-border */ border-radius: calc(var(--c-radius) * 1.8); /* rounded-2xl */ background: color-mix(in srgb, var(--c-card) 50%, transparent); /* bg-card/50 */ padding: 1.75rem; /* p-7 */ -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); /* backdrop-blur-sm */ } @media (min-width: 768px) { .vt2__tarjeta { padding: 2rem; } } /* md:p-8 */ /* ── los campos, con los números del diseño ───────────────────── */ .vt2__acceso .vt2__campo label { font-size: .75rem; /* text-xs */ line-height: 1rem; letter-spacing: .1em; /* tracking-widest */ } .vt2__acceso .vt2__campo input { border-radius: calc(var(--c-radius) * 1.4); /* rounded-xl */ border-color: color-mix(in srgb, var(--c-fg) 18%, transparent); /* border-input */ padding: .875rem 1rem; /* py-3.5 px-4 */ font-size: .875rem; /* text-sm */ } /* El foco tira del acento, no del texto. Es el `--ring` del diseño y el mismo azul del botón: la pantalla entera se apoya en ese color. */ .vt2__acceso .vt2__campo input:focus { border-color: var(--c-accent); } /* ⚠️ Esta línea NO es de adorno. La regla de arriba y la del campo rechazado —`.vt2__campo input.is-invalid`, allá en el bloque de contacto— pesan EXACTAMENTE lo mismo (0,2,1): dos clases y un tipo. A igualdad de peso gana la última del archivo, y la última es la de aquí, que llega después. O sea que sin esto el borde rojo del campo que el servidor rechazó se lo comía el borde normal, y `$feed_id` dejaba de verse en esta pantalla — en silencio, porque un color que pierde la cascada no da error. Con `.vt2__acceso` delante pesa (0,3,1) y vuelve a ganar el rojo. */ .vt2__acceso .vt2__campo input.is-invalid { border-color: var(--sale-red); } /* ── el botón ─────────────────────────────────────────────────── */ .vt2__acceso .vt2__form .vt2__btn { align-self: stretch; /* el form es flex-col: ocupa el ancho */ text-align: center; margin-top: .25rem; /* mt-1 */ padding: 1rem 2rem; /* py-4 px-8 */ letter-spacing: .025em; /* tracking-wide */ } /* `:not([disabled])` porque este selector pesa más que el `.vt2__form .vt2__btn[disabled] { transform: none }` de contacto: sin él, el botón seguía creciendo al pasar por encima mientras estaba deshabilitado esperando al reCAPTCHA. */ .vt2__acceso .vt2__form .vt2__btn:not([disabled]):hover { transform: scale(1.02); /* hover:scale-[1.02] */ } /* ── los dos añadidos que el diseño no tiene ────────────────────── La maqueta es un formulario de demo: no recupera contraseñas ni lleva a ningún registro. Aquí las dos cosas existen de verdad y no se pueden quitar. Se visten para que no compitan con el diseño: el «olvidó su contraseña» cuelga del campo de la clave, pequeño y apagado, y la línea del registro ocupa el sitio del `mt-8` que en la maqueta lleva el «¿Aún no trabajas con Venti?». */ .vt2__campo__aux { align-self: flex-end; margin-top: -.15rem; font-size: .75rem; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; } .vt2__campo__aux:hover { color: var(--c-fg); } .vt2__acceso__pie { margin: 2rem 0 0; /* mt-8 */ text-align: center; /* text-center */ font-size: .875rem; /* text-sm */ line-height: 1.25rem; color: var(--c-muted); /* text-muted-foreground */ } .vt2__acceso__pie a { color: var(--c-fg); /* text-foreground */ text-decoration: underline; /* underline */ text-underline-offset: 4px; /* underline-offset-4 */ } /* ══════════════════════════════════════════════════════════════════ 5. EL MÓVIL Dibujado entero con CSS: ni una imagen. Así no hay foto que se quede vieja ni peso que descargar, y se repinta solo con el tema. ══════════════════════════════════════════════════════════════════ */ .vt2__phone { position: relative; flex-shrink: 0; width: 240px; aspect-ratio: 9 / 19.5; border: 10px solid var(--vt-device); border-radius: 3.2rem; background: var(--vt-device-scr); padding: .5rem; box-shadow: 0 25px 70px rgba(0, 0, 0, .55); /* color-fijo: sombra proyectada, no es color de tema */ } @media (min-width: 768px) { .vt2__phone { width: 320px; } } /* botones laterales */ .vt2__phone::before, .vt2__phone::after { content: ''; position: absolute; width: 3px; background: var(--vt-device-btn); } .vt2__phone::before { left: -13px; top: 22%; height: 11%; border-radius: 2px 0 0 2px; } .vt2__phone::after { right: -13px; top: 26%; height: 15%; border-radius: 0 2px 2px 0; } .vt2__phone__scr { position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: 2.6rem; background: var(--vt-device-scr); } /* isla dinámica */ .vt2__phone__isla { position: absolute; left: 50%; top: .75rem; transform: translateX(-50%); z-index: 20; height: 1.5rem; width: 6rem; border-radius: 999px; background: #000; /* color-fijo: el recorte de la cámara es negro, no es color de tema */ } /* ── contenido: el checkout de la portada ─────────────────────────── */ .vt2__chk { display: flex; flex-direction: column; height: 100%; background: var(--vt-light-card); color: var(--vt-light-fg); padding: 3rem 1rem 1.5rem; } @media (min-width: 768px) { .vt2__chk { padding: 4rem 1.5rem 2rem; } } /* La pantalla del móvil va SIEMPRE en claro: es una app, y una app no cambia de tema porque la página de detrás se aclare. Por eso pinta con los tokens `--vt-light-*` directamente y no con los `--c-*`. */ .vt2__chk__top { display: flex; align-items: center; justify-content: space-between; font-size: .625rem; text-transform: uppercase; letter-spacing: .18em; color: var(--vt-light-muted); margin-bottom: 1.5rem; } .vt2__chk__resumen { border: 1px solid color-mix(in srgb, var(--vt-light-fg) 10%, transparent); border-radius: .75rem; background: var(--vt-light-bg); padding: .875rem; } .vt2__chk__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .vt2__chk__fila h4 { font-size: .8125rem; margin: 0; text-transform: uppercase; letter-spacing: -.01em; } .vt2__chk__fila span { font-size: .8125rem; } .vt2__chk__tipo { font-size: .5625rem; text-transform: uppercase; letter-spacing: .18em; color: var(--vt-light-muted); margin: .25rem 0 0; } .vt2__chk__campos { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; } .vt2__chk__campo label { display: block; margin-left: .25rem; margin-bottom: .25rem; font-size: .5625rem; text-transform: uppercase; letter-spacing: .18em; color: var(--vt-light-muted); } .vt2__chk__campo div { display: flex; align-items: center; height: 2.25rem; border: 1px solid color-mix(in srgb, var(--vt-light-fg) 10%, transparent); border-radius: .5rem; background: var(--vt-light-bg); padding-inline: .75rem; font-size: .75rem; color: var(--vt-accent); white-space: nowrap; overflow: hidden; } .vt2__chk__pie { position: relative; margin-top: auto; padding-top: 1.25rem; } .vt2__chk__btn { width: 100%; border: 0; border-radius: 999px; background: var(--vt-light-fg); color: var(--vt-light-bg); padding: .8rem 1rem; font-size: .625rem; text-transform: uppercase; letter-spacing: .04em; font-family: inherit; } .vt2__chk__ok { position: absolute; inset: 1.25rem 0 0; display: flex; align-items: center; justify-content: center; background: var(--vt-light-bg); color: var(--vt-accent); font-size: .625rem; text-transform: uppercase; letter-spacing: .18em; visibility: hidden; } /* ── contenido: pantalla de bloqueo del escaparate ────────────────── */ .vt2__lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 5rem; background: linear-gradient(to bottom, var(--vt-lock-top), var(--vt-lock-bottom)); } .vt2__lock__hora { font-size: 4rem; line-height: 1; font-weight: 300; letter-spacing: -.02em; margin: 0; color: color-mix(in srgb, var(--vt-dark-fg) 95%, transparent); } .vt2__lock__fecha { margin-top: .5rem; font-size: .875rem; color: color-mix(in srgb, var(--vt-dark-fg) 70%, transparent); } /* etapa 1: la notificación */ .vt2__push { position: absolute; inset-inline: .5rem; top: 12rem; z-index: 10; } /* El cristal de la notificación es blanco pase lo que pase: es cómo se ven las notificaciones de iOS. Si siguiera al tema dejaría de leerse como una notificación y pasaría a ser "una caja de la página". */ .vt2__push__caja { border-radius: 1.5rem; background: rgba(255, 255, 255, .8); /* color-fijo: cristal de iOS */ backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, .2); /* color-fijo: cristal de iOS */ box-shadow: 0 10px 30px rgba(0, 0, 0, .25); /* color-fijo: sombra proyectada */ padding: .875rem; display: flex; align-items: flex-start; gap: .75rem; transform-origin: top center; } @media (max-width: 767px) { .vt2__push__caja { transform: scale(.75); } } .vt2__push__ico { flex-shrink: 0; height: 2.5rem; width: 2.5rem; border-radius: .75rem; background: var(--vt-dark-bg); color: var(--vt-dark-fg); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; text-transform: lowercase; } .vt2__push__cuerpo { min-width: 0; flex: 1; padding-top: .125rem; } .vt2__push__cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .vt2__push__app { font-size: .875rem; margin: 0; color: var(--vt-light-fg); } .vt2__push__hora { font-size: .6875rem; margin: 0; color: color-mix(in srgb, var(--vt-light-fg) 50%, transparent); } .vt2__push__txt { margin: .125rem 0 0; font-size: .875rem; line-height: 1.35; color: color-mix(in srgb, var(--vt-light-fg) 80%, transparent); } /* etapa 2: el ticket acoplado */ .vt2__acople { position: absolute; inset-inline: .75rem; top: 50%; transform: translateY(-50%); z-index: 10; } @media (max-width: 767px) { .vt2__acople { top: 17rem; } } /* etapa 3: el visor */ /* El visor imita la cámara del escáner real, que es una app oscura: tampoco sigue al tema de la página. */ .vt2__visor { position: absolute; inset: 0; z-index: 20; background: var(--vt-dark-bg); } .vt2__visor__marco { position: absolute; inset-inline: 1.5rem; top: 50%; transform: translateY(-50%); aspect-ratio: 1; } @media (max-width: 767px) { .vt2__visor__marco { top: 35%; } } .vt2__visor__esq { position: absolute; height: 1.5rem; width: 1.5rem; border: 0 solid var(--vt-accent); } .vt2__visor__esq--tl { left: 0; top: 0; border-left-width: 4px; border-top-width: 4px; border-top-left-radius: .5rem; } .vt2__visor__esq--tr { right: 0; top: 0; border-right-width: 4px; border-top-width: 4px; border-top-right-radius: .5rem; } .vt2__visor__esq--bl { left: 0; bottom: 0; border-left-width: 4px; border-bottom-width: 4px; border-bottom-left-radius: .5rem; } .vt2__visor__esq--br { right: 0; bottom: 0;border-right-width: 4px; border-bottom-width: 4px;border-bottom-right-radius: .5rem; } .vt2__visor__qr { position: absolute; inset: 1.25rem; border-radius: .5rem; background: #fff; /* color-fijo: un QR se lee por contraste, no puede seguir al tema */ padding: .5rem; } .vt2__laser { position: absolute; inset-inline: .5rem; height: 2px; border-radius: 999px; background: var(--vt-accent); box-shadow: 0 0 16px 2px var(--vt-accent); animation: vt2-laser 2.6s ease-in-out infinite; } @keyframes vt2-laser { 0% { top: 8%; opacity: .2; } 50% { top: 88%; opacity: 1; } 100% { top: 8%; opacity: .2; } } .vt2__verif { position: absolute; inset-inline: 1.25rem; bottom: 2rem; } @media (max-width: 767px) { .vt2__verif { top: 60%; bottom: auto; } } .vt2__verif__caja { border-radius: .75rem; background: var(--vt-accent); color: var(--vt-accent-fg); padding: .75rem; transform-origin: bottom center; } @media (max-width: 767px) { .vt2__verif__caja { transform: scale(.75); } } .vt2__verif__t { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; margin: 0; } .vt2__verif__d { margin-top: .375rem; display: flex; justify-content: space-between; gap: .5rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .625rem; } /* ══════════════════════════════════════════════════════════════════ 6. EL TICKET También CSS puro. Se usa en tres sitios: volando por la pantalla, acoplado dentro del móvil, y de adorno. Por eso es un bloque con modificador `--mini` y no tres copias. ══════════════════════════════════════════════════════════════════ */ .vt2__tk { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 480px; overflow: hidden; border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--c-fg) 15%, transparent); background: var(--c-fg); color: var(--c-bg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); /* color-fijo: sombra proyectada, no es color de tema */ transition: background-color .7s ease-in-out, color .7s ease-in-out; } @media (min-width: 768px) { .vt2__tk { min-height: 580px; } } .vt2__tk--mini { min-height: 240px; } @media (min-width: 768px) { .vt2__tk--mini { min-height: 240px; } } @media (max-width: 767px) { .vt2__tk--mini { min-height: 180px; transform: scale(.75); transform-origin: top center; } } .vt2__tk__cab { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.25rem; } .vt2__tk--mini .vt2__tk__cab { padding: .75rem; } .vt2__tk__marca { font-size: 1.25rem; letter-spacing: -.02em; } .vt2__tk--mini .vt2__tk__marca { font-size: .875rem; } .vt2__tk__sub { text-transform: uppercase; letter-spacing: .18em; opacity: .6; margin: .25rem 0 0; font-size: .625rem; } .vt2__tk--mini .vt2__tk__sub { font-size: .5rem; } .vt2__tk__sello { border-radius: 999px; background: var(--c-accent); color: var(--c-accent-fg); text-transform: uppercase; letter-spacing: .05em; padding: .25rem .75rem; font-size: .625rem; } .vt2__tk--mini .vt2__tk__sello { padding: .1rem .5rem; font-size: .4375rem; } .vt2__tk__hueco { flex: 1; } .vt2__tk__datos { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 1.25rem 1rem; } .vt2__tk--mini .vt2__tk__datos { padding: 0 .75rem .5rem; } .vt2__tk__ev { flex: 1; padding-right: .5rem; } .vt2__tk__ev h3 { font-size: 1.5rem; line-height: 1; margin: 0; text-transform: uppercase; color: inherit; } .vt2__tk--mini .vt2__tk__ev h3 { font-size: 1rem; } .vt2__tk__ev p { margin: .25rem 0 0; font-size: .75rem; opacity: .6; } .vt2__tk--mini .vt2__tk__ev p { font-size: .5rem; } .vt2__tk__cuando { text-align: right; } .vt2__tk__cuando b { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .875rem; font-weight: 400; } .vt2__tk__cuando i { display: block; font-style: normal; font-size: .75rem; opacity: .6; } .vt2__tk--mini .vt2__tk__cuando b { font-size: .5625rem; } .vt2__tk--mini .vt2__tk__cuando i { font-size: .5rem; } /* la perforación: dos muescas y una línea de puntos */ .vt2__tk__perf { position: relative; display: flex; align-items: center; } .vt2__tk__perf::before, .vt2__tk__perf::after { content: ''; position: absolute; height: 1.25rem; width: 1.25rem; border-radius: 999px; background: var(--c-bg); transition: background-color .7s ease-in-out; } .vt2__tk__perf::before { left: -.625rem; } .vt2__tk__perf::after { right: -.625rem; } .vt2__tk__perf span { width: 100%; border-top: 2px dashed color-mix(in srgb, var(--c-bg) 30%, transparent); } .vt2__tk__talon { display: flex; align-items: center; gap: .75rem; padding: 1.25rem; } .vt2__tk--mini .vt2__tk__talon { padding: .75rem; gap: .5rem; } .vt2__tk__cod { min-width: 0; flex: 1; } .vt2__tk__cod b { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .75rem; font-weight: 400; letter-spacing: .05em; } .vt2__tk__cod p { margin: .25rem 0 0; font-size: .625rem; line-height: 1.4; opacity: .6; } .vt2__tk--mini .vt2__tk__cod b { font-size: .5rem; } .vt2__tk--mini .vt2__tk__cod p { font-size: .4375rem; } /* el brillo de la esquina */ .vt2__tk__brillo { position: absolute; right: -2.5rem; top: -2.5rem; height: 8rem; width: 8rem; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 25%, transparent); filter: blur(48px); pointer-events: none; } /* ── el ticket en blanco, antes de que le lleguen los datos ───────── */ .vt2__tk__ph { background: color-mix(in srgb, var(--c-bg) 20%, transparent); border-radius: .25rem; display: block; } .vt2__tk .vt2__tk__ph { display: none; } .vt2__tk--vacio .vt2__tk__ph { display: block; } .vt2__tk--vacio .vt2__tk__real { display: none; } /* ══════════════════════════════════════════════════════════════════ 7. EL QR Una rejilla de cuadritos que rellena el JS. Es decorativo — lleva aria-hidden y no representa ningún código real. ══════════════════════════════════════════════════════════════════ */ .vt2__qr { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4%; aspect-ratio: 1; width: 6rem; padding: 6%; border-radius: .125rem; background: var(--c-bg); flex-shrink: 0; transition: background-color .7s ease-in-out; } .vt2__tk--mini .vt2__qr { width: 3.5rem; } .vt2__qr i { display: block; aspect-ratio: 1; border-radius: 1px; } .vt2__qr i.on { background: var(--c-fg); } /* dentro del visor el QR va sobre blanco, con sus colores fijos: ahí no puede seguir al tema o desaparecería al aclarar la página */ .vt2__visor__qr .vt2__qr { width: 100%; height: 100%; background: #fff; /* color-fijo: contraste del QR */ padding: 0; } .vt2__visor__qr .vt2__qr i.on { background: #050505; } /* color-fijo: contraste del QR */ /* ══════════════════════════════════════════════════════════════════ 8. EL TICKET QUE VUELA Va fijo a la ventana y por encima de todo. `perspective` en el contenedor y `preserve-3d` en las capas de dentro: sin las dos, las volteretas se ven planas, como un papel girando. Son cuatro capas anidadas a propósito, cada una con SU transformación, para que no se pisen: wrapper → posición en pantalla (lo mueve el scroll) giro → volteretas (lo mueve el scroll) tilt → inclinación del ratón (lo mueve el puntero) flota → vaivén constante (bucle infinito) ══════════════════════════════════════════════════════════════════ */ .vt2__vuela { position: fixed; left: 50%; top: 50%; z-index: 40; width: 15rem; perspective: 1200px; pointer-events: none; opacity: 0; } @media (min-width: 768px) { .vt2__vuela { width: 280px; } } .vt2__vuela__giro, .vt2__vuela__tilt { transform-style: preserve-3d; will-change: transform; } .vt2__vuela__flota { will-change: transform; position: relative; } /* las letras que salen volando del móvil hacia el ticket */ .vt2__chispas { position: absolute; left: 50%; top: 50%; z-index: 50; overflow: visible; } .vt2__chispa { position: absolute; white-space: nowrap; font-size: .875rem; color: var(--c-accent); pointer-events: none; } /* ══════════════════════════════════════════════════════════════════ 9. PIE ══════════════════════════════════════════════════════════════════ */ body.vt-2026 .footer-new { background: var(--c-bg); color: var(--c-fg); border-top: 1px solid var(--c-line); transition: background-color .7s ease-in-out, color .7s ease-in-out; /* test.css le pone `padding: 4rem 0 2rem`. Esos 4rem de arriba estaban pensados para cuando el primer hijo del pie eran las columnas; ahora el primero es el carrusel, que va a sangre de borde a borde, y esos 4rem quedaban como una banda negra vacía encima de la tira. El aire se lo devuelve el carrusel por debajo. */ padding-top: 0; } /* ── el carrusel de texto ───────────────────────────────────────────── Escondido por defecto. Solo aparece en las páginas ya rediseñadas: el marcado vive en el layout compartido, así que también llega a la galería, al carrito y a lo que no se ha tocado todavía, donde los `--c-*` no tienen por qué casar con el fondo que pinta la hoja vieja. Cuando esas páginas se rediseñen y ganen `vt-2026`, lo heredan solas. ──────────────────────────────────────────────────────────────────── */ .vt2-ticker { display: none; } body.vt-2026 .vt2-ticker { display: block; overflow: hidden; padding-block: 1.1rem; /* el aire que se le quitó al pie arriba, puesto donde hace falta: entre la tira y las columnas, no encima de la tira */ margin-bottom: 3.5rem; border-bottom: 1px solid var(--c-line); /* El degradado de los bordes: la tira no "empieza", se desvanece. Aquí #000 no es un color: en una máscara el negro significa «opaco» y el transparente «recortado». No tiene nada que ver con el tema y no puede salir de un token. */ -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); /* color-fijo: canal de máscara, no color */ mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); /* color-fijo: canal de máscara, no color */ } /* La separación va como padding de cada elemento, NO como `gap` del contenedor. Con `gap`, 2N elementos llevan 2N-1 huecos, así que la mitad del ancho no es exactamente una copia: queda medio hueco corto y el salto del bucle se ve. Con el padding dentro del elemento, cada copia mide justo lo mismo y -50% cae en un fotograma idéntico. (El diseño original usaba `gap` y tenía ese salto.) */ body.vt-2026 .vt2-ticker__pista { display: flex; width: max-content; white-space: nowrap; animation: vt2-marquee 28s linear infinite; } /* al pasar el ratón se para: si alguien quiere leer una, que pueda */ body.vt-2026 .vt2-ticker:hover .vt2-ticker__pista { animation-play-state: paused; } body.vt-2026 .vt2-ticker__i { flex: none; padding-right: 2.5rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .18em; color: var(--c-muted); transition: color .7s ease-in-out; } body.vt-2026 .vt2-ticker__i i { font-style: normal; margin-left: 1.5rem; color: var(--c-accent); } /* Hasta -50%, que es donde la segunda copia de la lista ocupa el sitio exacto de la primera: el salto de vuelta cae en un fotograma idéntico y no se ve. Por eso la plantilla la pinta dos veces. */ @keyframes vt2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } body.vt-2026 .footer-new .footer-link, body.vt-2026 .footer-new .footer-tagline, body.vt-2026 .footer-new .footer-issuer { color: var(--c-muted); } body.vt-2026 .footer-new .footer-link:hover { color: var(--c-fg); } body.vt-2026 .footer-new .footer-col-title { color: var(--c-fg); } /* ══════════════════════════════════════════════════════════════════ 9b. MODO EDITOR El espejo de la zona admin usa ESTA MISMA hoja y las mismas clases — esa es la idea de la regla 2. Lo que cambia es que el relato se aplana: sin ticket volando por encima de los botones y sin la sección que se queda pegada 3200px, que harían imposible editar. Es una vista distinta de lo mismo, no un diseño distinto. ══════════════════════════════════════════════════════════════════ */ body.vt-editor .vt2__vuela { display: none; } body.vt-editor .vt2__show { height: auto; flex-direction: column; gap: 2.5rem; padding-block: 4rem; } body.vt-editor .vt2__show__textos { position: static; inset: auto; width: 100%; max-width: var(--vt-max); display: block; } body.vt-editor .vt2__show__pista { height: auto; } body.vt-editor .vt2__etapa { position: static; opacity: 1 !important; visibility: visible !important; border-top: 1px solid var(--c-border); padding-block: 1.5rem; } body.vt-editor .vt2__etapa__x { display: block; } /* dentro del móvil solo se deja el ticket: las tres etapas viven superpuestas y en plano no pueden verse las tres a la vez */ body.vt-editor .vt2__push, body.vt-editor .vt2__visor { display: none; } body.vt-editor .vt2__acople { opacity: 1 !important; visibility: visible !important; } /* el ticket del editor siempre lleno: en blanco no se ve qué se edita */ body.vt-editor .vt2__tk--vacio .vt2__tk__ph { display: none; } body.vt-editor .vt2__tk--vacio .vt2__tk__real { display: revert; } /* los campos del móvil los rellena GSAP, que en el editor no corre */ body.vt-editor .vt2__chk__campo div::after { content: attr(data-demo); } .vt2__ed { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .vt2__ed .btn { font-size: .75rem; } /* ══════════════════════════════════════════════════════════════════ 10. QUIEN NO QUIERE MOVIMIENTO No es un detalle de accesibilidad de adorno: con el ticket pineado y dando vueltas, a alguien con sensibilidad vestibular esta página le sienta mal de verdad. Aquí se queda todo quieto y legible. ══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .vt2 *, body.vt-2026, body.vt-2026 .navbar, body.vt-2026 .footer-new, body.vt-2026 .footer-new * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .vt2__vuela { display: none; } .vt2__laser { animation: none; top: 48%; } /* El carrusel del pie está FUERA de `.vt2` —vive en el layout— así que no lo cubría el selector de arriba. Quieto y legible desde el principio: sin la animación, `translateX` se queda en 0 y se ven las primeras frases, que es justo lo que hace falta. */ body.vt-2026 .vt2-ticker__pista { animation: none; } }