/* ═══════════════════════════════════════════════════════════════════════════ HOUZAPP · DISEÑO V3 ═══════════════════════════════════════════════════════════════════════════ ── Qué es esto ───────────────────────────────────────────────────────────── Una piel nueva para toda la aplicación. **No cambia una sola línea de lógica**: ni el HTML, ni el JavaScript, ni el backend. Todo lo que hay aquí son colores, formas, sombras y movimiento. ── Por qué es un archivo y no una carpeta aparte ─────────────────────────── Porque la alternativa —duplicar las cuarenta pantallas en /v3/— significa mantener dos copias de todo: cada corrección de un formulario habría que hacerla dos veces, y la segunda se olvida siempre. A los dos meses las dos versiones no hacen lo mismo y ya no se puede volver atrás. La aplicación entera se dibuja con tokens y con clases (.tarjeta, .cifra, .boton). Una piel nueva es redefinir esos tokens y vestir esas clases. Se enciende y se apaga con un atributo, se comparan las dos en dos pestañas, y si algo no gusta se borra este archivo y no queda rastro. ── Cómo se enciende ──────────────────────────────────────────────────────── Todo aquí cuelga de `[data-diseno="v3"]` en . Sin ese atributo este archivo no pinta absolutamente nada. Lo pone `nucleo/diseno.js`, que lee `?diseno=v3` de la URL o lo que quedó guardado. ── De dónde sale la paleta ───────────────────────────────────────────────── Del logo, pero abierta. El azul #389FCC sigue mandando —es la marca— y a su lado entran dos vecinos suyos: un aqua que tira a verde y un violeta que tira a azul. Los tres están en la misma familia fría, así que mezclados no pelean; lo que hacen es que la pantalla deje de ser un solo azul plano. El ámbar del dinero no se toca: en Houzapp ese color significa una cosa y solo una. */ /* ═══════════════════════════════════════════════════════════════════════════ 1. LA PALETA ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] { /* Los dos vecinos del azul de la marca. */ --aqua-600: #12A5A8; --aqua-500: #19BFC2; --aqua-400: #45D3D5; --aqua-100: #DFF7F7; --violeta-700: #4B36C9; --violeta-600: #5E48E0; --violeta-500: #7C5CFF; --violeta-400: #9B84FF; --violeta-100: #EDE9FF; /* ── Los degradados ────────────────────────────────────────────────────── Son la firma de V3. Van en los botones principales, en las cabeceras y en los bordes de las tarjetas destacadas. Siempre en la misma dirección —de arriba-izquierda a abajo-derecha— para que toda la pantalla parezca iluminada desde el mismo sitio. */ /* ── Dos degradados de marca, y la diferencia importa ──────────────────── `--grad-marca` es el que lleva TEXTO BLANCO encima: botones principales, el número de un paso. Sus dos extremos están elegidos para que el blanco se lea sobre cualquier punto del recorrido: 4,75:1 en el azul y 4,98:1 en el verde. Es la razón de que sea más hondo de lo que apetecería. Esto no salió a la primera. La primera versión iba de #2A8DBA a #19BFC2 y se veía preciosa, pero el blanco sobre ese verde da 2,26:1 —peor que el botón plano de v2, que ya daba 3,0— y es el botón más importante de la aplicación. Un degradado con texto encima hay que medirlo en los dos extremos, no solo en el que uno mira. `--grad-vivo` es el brillante, y va donde NO hay texto: la pastilla de un icono, una barra de progreso, el marcador de una sección. Ahí el color puede cantar sin que nadie tenga que leer sobre él. */ --grad-marca: linear-gradient(135deg, #1F7BA3 0%, #127C7F 100%); --grad-vivo: linear-gradient(135deg, var(--azul-500) 0%, var(--aqua-500) 100%); --grad-hondo: linear-gradient(135deg, var(--azul-800) 0%, var(--violeta-700) 100%); --grad-suave: linear-gradient(135deg, var(--azul-100) 0%, var(--aqua-100) 100%); --grad-dinero: linear-gradient(135deg, #E0A32E 0%, #F0C674 100%); /* ── Superficies ───────────────────────────────────────────────────────── El fondo deja de ser gris neutro: lleva una gota de azul. Es un cambio de tres puntos de saturación y es lo que hace que el blanco de las tarjetas se vea blanco de verdad en vez de sucio. */ --fondo: #EEF3F8; --superficie: #FFFFFF; --superficie-2: #F6FAFD; --borde: #E1E9F0; --borde-fuerte: #C6D3DE; /* ── Formas ────────────────────────────────────────────────────────────── Más redondo. Nada aquí es cuadrado: es lo que separa una interfaz de 2019 de una de ahora. */ --radio-sm: 10px; --radio: 16px; --radio-lg: 24px; --radio-xl: 32px; --radio-arco: 32px 16px 16px 16px; /* ── Sombras ───────────────────────────────────────────────────────────── Tintadas de azul en vez de gris. Una sombra gris sobre un fondo azulado se ve sucia; tintada del mismo tono, se ve profunda. */ --sombra-1: 0 1px 2px rgba(31, 66, 92, .05), 0 4px 12px rgba(31, 66, 92, .06); --sombra-2: 0 2px 6px rgba(31, 66, 92, .07), 0 12px 32px rgba(31, 66, 92, .10); --sombra-3: 0 6px 12px rgba(31, 66, 92, .09), 0 28px 60px rgba(31, 66, 92, .16); --sombra-marca: 0 8px 24px rgba(42, 141, 186, .38); --anillo-foco: 0 0 0 3px rgba(56, 159, 204, .40); /* Títulos un punto más apretados: se leen como titular, no como párrafo. */ --letra-titulo: -0.028em; } /* ── Modo oscuro ─────────────────────────────────────────────────────────── No es el claro con los colores invertidos: es azul muy oscuro, no negro. El negro puro sobre una pantalla OLED da un contraste tan duro que cansa, y además hace que el azul de la marca se vea fluorescente. ── Por qué son DOS reglas y no una ───────────────────────────────────────── El tema tiene tres estados, no dos: claro elegido, oscuro elegido, y el que trae casi todo el mundo —ninguno elegido, y ahí manda el sistema operativo. `tokens.css` ya lo hace así: la preferencia del sistema entra por la media query y la elección explícita gana encima. Esta hoja tiene que repetir el mismo par. Con solo `[data-tema="oscuro"]`, alguien con el sistema en oscuro y sin haber tocado nunca el interruptor se llevaba el fondo oscuro de la base con los tokens claros de V3 encima: un título casi blanco sobre un panel casi blanco. Y ese es el caso más común de todos. */ [data-diseno="v3"] { --grad-panel: linear-gradient(135deg, rgba(56, 159, 204, .10) 0%, rgba(124, 92, 255, .08) 100%); } @media (prefers-color-scheme: dark) { [data-diseno="v3"]:not([data-tema="claro"]) { --fondo: #10161C; --superficie: #171F27; --superficie-2: #1D2731; --borde: #263340; --borde-fuerte: #35455480; --sombra-1: 0 1px 2px rgba(0, 0, 0, .34), 0 4px 12px rgba(0, 0, 0, .30); --sombra-2: 0 2px 6px rgba(0, 0, 0, .38), 0 12px 32px rgba(0, 0, 0, .40); --sombra-3: 0 6px 12px rgba(0, 0, 0, .44), 0 28px 60px rgba(0, 0, 0, .52); --grad-suave: linear-gradient(135deg, rgba(56, 159, 204, .18) 0%, rgba(25, 191, 194, .14) 100%); } } /* Eleccion explicita del usuario: gana sobre la preferencia del sistema. */ [data-tema="oscuro"][data-diseno="v3"] { --fondo: #10161C; --superficie: #171F27; --superficie-2: #1D2731; --borde: #263340; --borde-fuerte: #35455480; --sombra-1: 0 1px 2px rgba(0, 0, 0, .34), 0 4px 12px rgba(0, 0, 0, .30); --sombra-2: 0 2px 6px rgba(0, 0, 0, .38), 0 12px 32px rgba(0, 0, 0, .40); --sombra-3: 0 6px 12px rgba(0, 0, 0, .44), 0 28px 60px rgba(0, 0, 0, .52); --grad-suave: linear-gradient(135deg, rgba(56, 159, 204, .18) 0%, rgba(25, 191, 194, .14) 100%); } /* ═══════════════════════════════════════════════════════════════════════════ 2. EL FONDO VIVO Dos manchas de color muy difusas, fijas detrás de todo. Es lo que quita la sensación de «hoja de cálculo»: el fondo deja de ser un plano muerto sin que ninguna se note como una forma. ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60vw 60vw at 12% -8%, rgba(56, 159, 204, .16), rgba(56, 159, 204, 0) 66%), radial-gradient(52vw 52vw at 92% 12%, rgba(124, 92, 255, .12), rgba(124, 92, 255, 0) 64%), radial-gradient(46vw 46vw at 70% 96%, rgba(25, 191, 194, .10), rgba(25, 191, 194, 0) 64%); } /* El mismo par que arriba: la preferencia del sistema y la elección explícita son dos cosas distintas y las dos tienen que oscurecer. */ @media (prefers-color-scheme: dark) { [data-diseno="v3"]:not([data-tema="claro"]) body::before { background: radial-gradient(60vw 60vw at 12% -8%, rgba(56, 159, 204, .16), rgba(56, 159, 204, 0) 66%), radial-gradient(52vw 52vw at 92% 12%, rgba(124, 92, 255, .16), rgba(124, 92, 255, 0) 64%), radial-gradient(46vw 46vw at 70% 96%, rgba(25, 191, 194, .12), rgba(25, 191, 194, 0) 64%); } } [data-tema="oscuro"][data-diseno="v3"] body::before { background: radial-gradient(60vw 60vw at 12% -8%, rgba(56, 159, 204, .16), rgba(56, 159, 204, 0) 66%), radial-gradient(52vw 52vw at 92% 12%, rgba(124, 92, 255, .16), rgba(124, 92, 255, 0) 64%), radial-gradient(46vw 46vw at 70% 96%, rgba(25, 191, 194, .12), rgba(25, 191, 194, 0) 64%); } /* ═══════════════════════════════════════════════════════════════════════════ 3. BOTONES ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] .boton { border-radius: var(--radio-pilula); font-weight: var(--peso-fuerte); letter-spacing: -0.01em; transition: transform var(--transicion), box-shadow var(--transicion), filter var(--transicion); } /* ── El principal ────────────────────────────────────────────────────────── Degradado en vez de plano, y con el degradado hondo: el blanco tiene que leerse sobre los DOS extremos, no solo sobre el que se mira. Ver la nota de `--grad-marca` arriba. Lo que le da la vida no es un color más claro sino el halo de abajo, que sí puede ser brillante porque no lleva texto encima. */ [data-diseno="v3"] .boton--principal { background: var(--grad-marca); border: 0; color: #fff; box-shadow: var(--sombra-marca); } [data-diseno="v3"] .boton--principal:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(42, 141, 186, .46); filter: saturate(1.12); } [data-diseno="v3"] .boton--principal:active { transform: translateY(0); } [data-diseno="v3"] .boton--secundario { background: var(--superficie); border: 1px solid var(--borde); color: var(--marca-tinta); box-shadow: var(--sombra-1); } [data-diseno="v3"] .boton--secundario:hover { transform: translateY(-1px); border-color: var(--azul-300); box-shadow: var(--sombra-2); } [data-diseno="v3"] .boton--peligro { background: linear-gradient(135deg, #C93F3F 0%, #E06A6A 100%); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(198, 63, 63, .34); } /* ═══════════════════════════════════════════════════════════════════════════ 4. TARJETAS El acento de cada módulo ya viaja en --tarjeta-acento desde la base de datos. En v2 era una línea de 3px en el borde izquierdo. Aquí ese color manda: tiñe el icono, el halo y el borde al pasar el cursor. ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] .tarjeta { position: relative; border-radius: var(--radio-lg); border: 1px solid var(--borde); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); } /* El acento como una cinta arriba, no como una raya al lado: se ve desde más lejos y no le come el margen al texto. */ [data-diseno="v3"] .tarjeta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tarjeta-acento, var(--marca)); opacity: .9; } /* Y un halo del mismo color que aparece al acercarse. */ [data-diseno="v3"] .tarjeta::after { content: ""; position: absolute; inset: -40% 55% 55% -40%; background: radial-gradient(circle, var(--tarjeta-acento, var(--marca)), transparent 70%); opacity: 0; transition: opacity var(--transicion-lenta); pointer-events: none; } [data-diseno="v3"] a.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); border-color: color-mix(in srgb, var(--tarjeta-acento, var(--marca)) 45%, var(--borde)); } [data-diseno="v3"] a.tarjeta:hover::after { opacity: .13; } /* El icono deja de ser un cuadro gris: es una pastilla del color del módulo con su propio degradado. Es lo que hace que la cuadrícula se lea de un vistazo. */ [data-diseno="v3"] .tarjeta__icono { border-radius: var(--radio); background: linear-gradient(135deg, color-mix(in srgb, var(--tarjeta-acento, var(--marca)) 22%, transparent), color-mix(in srgb, var(--tarjeta-acento, var(--marca)) 8%, transparent)); color: var(--tarjeta-acento, var(--marca)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tarjeta-acento, var(--marca)) 22%, transparent); transition: transform var(--rebote); } [data-diseno="v3"] a.tarjeta:hover .tarjeta__icono { transform: scale(1.08) rotate(-4deg); } [data-diseno="v3"] .tarjeta__titulo { font-weight: var(--peso-negro); letter-spacing: -0.015em; } /* ═══════════════════════════════════════════════════════════════════════════ 5. CIFRAS Son lo primero que se mira en cualquier tablero. En v3 el número es el protagonista: más grande, más pesado y teñido de su propio color. ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] .cifra { position: relative; border-radius: var(--radio-lg); border: 1px solid var(--borde); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; transition: transform var(--transicion), box-shadow var(--transicion); } [data-diseno="v3"] .cifra:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); } /* El color de la cifra pasa de una raya lateral a un lavado de fondo. */ [data-diseno="v3"] .cifra::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--c, var(--marca)) 13%, transparent), transparent 62%); pointer-events: none; } [data-diseno="v3"] .cifra__valor { position: relative; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); font-weight: var(--peso-negro); letter-spacing: -0.03em; line-height: 1.05; color: var(--c, var(--marca)); } [data-diseno="v3"] .cifra__etiqueta { position: relative; font-weight: var(--peso-medio); } /* ═══════════════════════════════════════════════════════════════════════════ 6. INSIGNIAS, AVISOS Y TABLAS ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] .insignia { border-radius: var(--radio-pilula); font-weight: var(--peso-fuerte); letter-spacing: .01em; } [data-diseno="v3"] .aviso { border-radius: var(--radio); border-width: 1px; border-left-width: 3px; box-shadow: var(--sombra-1); } [data-diseno="v3"] .tabla-envoltura { border-radius: var(--radio-lg); border: 1px solid var(--borde); background: var(--superficie); box-shadow: var(--sombra-1); overflow: hidden; overflow-x: auto; } [data-diseno="v3"] .tabla th { background: var(--superficie-2); font-weight: var(--peso-fuerte); letter-spacing: var(--letra-etiqueta); text-transform: uppercase; font-size: var(--t-xs); } [data-diseno="v3"] .tabla tbody tr { transition: background var(--transicion-rapida); } [data-diseno="v3"] .tabla tbody tr:hover { background: color-mix(in srgb, var(--marca) 5%, transparent); } /* ═══════════════════════════════════════════════════════════════════════════ 7. FORMULARIOS ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] .entrada, [data-diseno="v3"] .seleccion, [data-diseno="v3"] .area-texto { border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); transition: border-color var(--transicion), box-shadow var(--transicion); } [data-diseno="v3"] .entrada:focus, [data-diseno="v3"] .seleccion:focus, [data-diseno="v3"] .area-texto:focus { border-color: var(--marca); box-shadow: var(--anillo-foco); outline: none; } [data-diseno="v3"] .campo__etiqueta { font-weight: var(--peso-fuerte); letter-spacing: -0.005em; } /* ═══════════════════════════════════════════════════════════════════════════ 8. LA CABECERA Y EL PANEL ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] .cabecera { background: color-mix(in srgb, var(--superficie) 82%, transparent); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid var(--borde); } /* El saludo del panel sobre un lavado de color: le da un principio a la página en vez de arrancar con texto sobre el fondo. */ [data-diseno="v3"] .panel > .encabezado { position: relative; padding: var(--e-6); margin-bottom: var(--e-6); border-radius: var(--radio-lg); background: var(--grad-suave); border: 1px solid var(--borde); overflow: hidden; } [data-diseno="v3"] .panel > .encabezado h1 { letter-spacing: var(--letra-titulo); font-weight: var(--peso-negro); } /* La etiqueta de sección deja de ser una línea gris: lleva un punto de color delante, que es lo que la vuelve un separador y no un texto suelto. */ [data-diseno="v3"] .etiqueta-seccion { display: flex; align-items: center; gap: var(--e-3); color: var(--texto); font-weight: var(--peso-negro); letter-spacing: .04em; } [data-diseno="v3"] .etiqueta-seccion::before { content: ""; flex: none; width: 4px; height: 1.1em; border-radius: var(--radio-pilula); background: var(--grad-vivo); } /* ═══════════════════════════════════════════════════════════════════════════ 9. MODALES ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] .modal { border-radius: var(--radio-xl); border: 1px solid var(--borde); box-shadow: var(--sombra-3); } [data-diseno="v3"] .modal::backdrop { background: rgba(16, 30, 42, .55); backdrop-filter: blur(6px); } [data-diseno="v3"] .modal__encabezado { background: var(--grad-suave); border-bottom: 1px solid var(--borde); } /* ═══════════════════════════════════════════════════════════════════════════ 10. LA LANDING Es la única pantalla que ve alguien que todavía no es cliente, así que es donde más se nota. Aquí el degradado hondo manda. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Las auroras van en el background del hero, no en una capa aparte ───── Costó tres intentos. Primero fueron un `::after` que se salía del hero y se animaba; después uno acotado y quieto. Las dos veces quedó una costura vertical dura sobre el degradado. El motivo es siempre el mismo: en cuanto los degradados viven en su propia capa —posicionada, con z-index, animada o no— el navegador la compone aparte de la del hero, y el borde de esa composición se ve como una línea recta sobre un fondo suave. Apiladas aquí, en el `background` del propio hero, son UNA sola pintada: no hay dos capas que juntar, así que no hay dónde se vea la unión. Y de paso desaparece un pseudo-elemento. El orden importa: en `background` la primera capa va ARRIBA, así que los degradados de color van antes y el degradado hondo de la marca al final, de fondo. */ [data-diseno="v3"] .hero { background: radial-gradient(70% 55% at 16% 8%, rgba(25, 191, 194, .40), rgba(25, 191, 194, 0) 72%), radial-gradient(80% 62% at 84% 22%, rgba(56, 159, 204, .44), rgba(56, 159, 204, 0) 74%), radial-gradient(65% 50% at 52% 92%, rgba(124, 92, 255, .36), rgba(124, 92, 255, 0) 72%), var(--grad-hondo); } /* El halo azul de v2 sobra: ese trabajo ahora lo hacen las auroras de arriba, y superpuesto añadía una cuarta mancha en el centro justo donde va el titular. */ [data-diseno="v3"] .hero::after { content: none; } /* ── Dos cosas que costaron tres intentos, por si alguien las repite ─────── * * 1. NUNCA terminar un degradado en `transparent`. Es rgba(0,0,0,0) —negro * con alfa cero—, así que al interpolar hacia él el navegador pasa por * grises sucios. Hay que terminar en el MISMO color con alfa cero, que es * como están escritos los de arriba. * * 2. Las auroras van en el `background` del hero y no en una capa aparte. * Se probó con un `::after` que se salía del hero y se animaba, y con uno * acotado y quieto: las dos veces quedó una costura vertical dura. En * cuanto los degradados viven en su propia capa, el navegador la compone * aparte y el borde de esa composición se ve como una línea recta sobre un * fondo suave. Apiladas en un solo `background` son una sola pintada y no * hay unión que se vea. * * El movimiento del hero no se pierde por esto: lo ponen la red de nodos, que * se dibuja sola al entrar y queda latiendo, y la entrada escalonada del * titular, la bajada y los botones. */ /* El titular con el degradado adentro de la palabra destacada. */ [data-diseno="v3"] .hero__contenido h1 em { background: linear-gradient(120deg, var(--aqua-400) 0%, #fff 46%, var(--violeta-400) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; } [data-diseno="v3"] .hero__insignia { border-radius: var(--radio-pilula); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Las secciones de la landing sobre vidrio, no sobre blanco liso. */ [data-diseno="v3"] .beneficio, [data-diseno="v3"] .plan, [data-diseno="v3"] .paso, [data-diseno="v3"] .faq { border-radius: var(--radio-lg); border: 1px solid var(--borde); background: color-mix(in srgb, var(--superficie) 84%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sombra-1); transition: transform var(--transicion), box-shadow var(--transicion); } [data-diseno="v3"] .beneficio:hover, [data-diseno="v3"] .plan:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); } [data-diseno="v3"] .plan--destacado { border-color: transparent; box-shadow: var(--sombra-2), 0 0 0 2px var(--azul-500); } [data-diseno="v3"] .pie { background: var(--grad-hondo); } /* ═══════════════════════════════════════════════════════════════════════════ 11. PESTAÑAS Y BARRAS ═══════════════════════════════════════════════════════════════════════════ */ [data-diseno="v3"] .pestana--activa { border-bottom-color: transparent; position: relative; } [data-diseno="v3"] .pestana--activa::after { content: ""; position: absolute; inset: auto 12% -1px 12%; height: 3px; border-radius: var(--radio-pilula); background: var(--grad-vivo); } [data-diseno="v3"] .barra__cuerpo, [data-diseno="v3"] .uso__relleno { background: var(--grad-vivo); } [data-diseno="v3"] .paso__numero { background: var(--grad-marca); border: 0; color: #fff; } /* ═══════════════════════════════════════════════════════════════════════════ 12. LO QUE NO SE TOCA El contraste del texto y los tamaños táctiles son de accesibilidad, no de estética: los tokens de texto, el mínimo de 44px y las reglas de prefers-reduced-motion se quedan exactamente como están en v2. Aquí solo se apaga lo que se movería de más. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { [data-diseno="v3"] .tarjeta, [data-diseno="v3"] .cifra, [data-diseno="v3"] .beneficio, [data-diseno="v3"] .plan, [data-diseno="v3"] .boton { transition: none; } [data-diseno="v3"] a.tarjeta:hover, [data-diseno="v3"] .cifra:hover, [data-diseno="v3"] .boton--principal:hover { transform: none; } } /* ── El interruptor ──────────────────────────────────────────────────────── Un botón flotante para comparar las dos versiones sin tocar la URL. Lo pinta `diseno.js` y desaparece el día que se decida. */ .cambiar-diseno { position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: var(--z-aviso); display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-pilula); background: var(--superficie); color: var(--texto); font: var(--peso-fuerte) var(--t-sm) var(--fuente-texto); box-shadow: var(--sombra-2); cursor: pointer; } .cambiar-diseno:hover { box-shadow: var(--sombra-3); } .cambiar-diseno__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--grafito-300); } [data-diseno="v3"] .cambiar-diseno__punto { background: linear-gradient(135deg, #389FCC, #19BFC2); }