, con el titular y los botones dentro: bajarle la opacidad ahí apagaba la portada entera. Por eso la regla solo alcanza a la capa, nunca al contenido. */ body.aura .grid-faint.absolute { opacity: .5; } /* ─────────────────────────────────────────────────────────────────────────── 3. TIPOGRAFÍA Aura usa Syne 800. Aquí se mantiene Archivo 900, que es la cara de display que la marca ya tiene y llega al mismo peso. Lo que se importa de Aura es el TRATAMIENTO: mucho más tamaño, tracking muy cerrado, interlineado corto. ─────────────────────────────────────────────────────────────────────────── */ body.aura h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.0; letter-spacing: -.042em; font-weight: 900; } body.aura h2 { font-size: clamp(1.95rem, 3.9vw, 3.35rem); line-height: 1.03; letter-spacing: -.038em; font-weight: 900; } /* los h2 de dentro de una tarjeta o de un informe de ejemplo no son titulares de sección: se quedan como estaban */ body.aura .card-pro h2, body.aura .glass h2, body.aura .svc-card h2, body.aura [class*="rounded-"] > h2 { font-size: revert; line-height: revert; letter-spacing: -.03em; } body.aura .eyebrow { letter-spacing: .18em; font-size: .74rem; } /* ─────────────────────────────────────────────────────────────────────────── 4. COLOR DEL TEXTO SOBRE EL LIENZO OSCURO Se remapean los grises de Tailwind que quedaban ilegibles al invertir. ─────────────────────────────────────────────────────────────────────────── */ body.aura .text-gray-900, body.aura .text-gray-800, body.aura .text-slate-900, body.aura .text-slate-800 { color: var(--au-ink) !important; } body.aura .text-gray-700, body.aura .text-gray-600, body.aura .text-slate-700, body.aura .text-slate-600 { color: #b9c6e4 !important; } body.aura .text-gray-500, body.aura .text-gray-400, body.aura .text-slate-500 { color: var(--au-muted) !important; } body.aura .text-gray-300 { color: rgba(255, 255, 255, .25) !important; } body.aura .text-blue-700, body.aura .text-blue-600, body.aura .text-blue-800 { color: var(--au-accent) !important; } body.aura .text-green-600, body.aura .text-green-700 { color: #4ade80 !important; } body.aura .text-indigo-600, body.aura .text-indigo-700 { color: var(--au-accent-2) !important; } body.aura .text-emerald-600, body.aura .text-emerald-700 { color: #34d399 !important; } body.aura .border-gray-100, body.aura .border-gray-200, body.aura .border-slate-100, body.aura .border-slate-200 { border-color: var(--au-line) !important; } body.aura strong { color: var(--au-ink); } /* ─────────────────────────────────────────────────────────────────────────── 5. SUPERFICIES DE VIDRIO (.service-card de Aura) Las tarjetas blancas pasan a vidrio: fondo translúcido, borde claro, desenfoque y el levantamiento de 10 px al pasar por encima. ─────────────────────────────────────────────────────────────────────────── */ body.aura .card-pro, body.aura .svc-card, body.aura .svc-bd { background: rgba(255, 255, 255, .038) !important; border: 1px solid rgba(255, 255, 255, .075); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 32px 64px -24px rgba(0, 0, 0, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.aura .svc-card { overflow: hidden; } body.aura .svc-bd { border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent !important; } @media (hover: hover) and (pointer: fine) { body.aura .card-pro:hover, body.aura .svc-card:hover { background: rgba(255, 255, 255, .075) !important; transform: translateY(-10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 48px 88px -28px rgba(0, 0, 0, .65); } } /* las fichas de vidrio que ya existían se alinean con el mismo radio */ body.aura .glass, body.aura .glass-soft { border-radius: 20px; } @media (prefers-reduced-transparency: reduce) { body.aura .card-pro, body.aura .svc-card { background: #141c31 !important; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* campos de formulario: el blanco sobre el lienzo oscuro era un agujero */ body.aura .field { background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .14); color: var(--au-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } body.aura .field::placeholder { color: var(--au-muted); } body.aura .field:focus { border-color: var(--au-accent); box-shadow: 0 0 0 4px rgba(96, 165, 250, .16); } body.aura select.field option { background: #131a2c; color: var(--au-ink); } /* ─────────────────────────────────────────────────────────────────────────── 6. CABECERA (header de Aura) Aura usa mix-blend-mode: difference y un subrayado que entra por la izquierda. La barra aquí es pegajosa y lleva un botón de color, así que el blend se descarta (rompería el degradado del botón) y se queda el subrayado, que es el gesto que se reconoce. ─────────────────────────────────────────────────────────────────────────── */ body.aura #navbar { background: transparent; } body.aura #navbar .border-b { border-color: transparent; } body.aura #navbar.nav-scrolled { background: rgba(11, 16, 32, .82) !important; border-bottom: 1px solid var(--au-line); } body.aura #navbar a:not(.grad-btn) { position: relative; overflow: hidden; padding-bottom: 4px; } body.aura #navbar a:not(.grad-btn)::after { content: ""; position: absolute; bottom: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--au-accent), var(--au-accent-2)); transition: left .3s ease; } @media (hover: hover) and (pointer: fine) { body.aura #navbar a:not(.grad-btn):hover::after { left: 0; } } /* ─────────────────────────────────────────────────────────────────────────── 7. PORTADA (.hero de Aura) Altura casi de pantalla y revelado por máscara: el titular sube desde debajo de su propia caja con un giro de 4°, en 1 s con la curva de Aura. ─────────────────────────────────────────────────────────────────────────── */ body.aura .au-hero { min-height: 92vh; display: flex; align-items: center; } .au-line { overflow: hidden; display: block; } .au-line > span { display: block; transform: translateY(110%) rotate(4deg); transform-origin: left top; opacity: 0; transition: transform 1s var(--au-ease), opacity 1s var(--au-ease); } .au-reveal.is-in .au-line > span { transform: translateY(0) rotate(0); opacity: 1; } /* ─────────────────────────────────────────────────────────────────────────── 8. MARQUESINA (.marquee de Aura) Banda clara inclinada -2°, palabras alternando relleno y contorno. Aquí las palabras son los servicios que se venden, no adornos. ─────────────────────────────────────────────────────────────────────────── */ .au-marquee-wrap { width: 100%; padding: 3.2rem 0; margin: 4.5rem 0; overflow: hidden; display: flex; white-space: nowrap; transform: rotate(-2deg) scale(1.08); background: linear-gradient(135deg, #60a5fa, #a78bfa); color: #0f172a; } .au-marquee { font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(2rem, 4.4vw, 4rem); font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; display: flex; gap: 2.6rem; padding-right: 2.6rem; animation: auScroll 26s linear infinite; } .au-marquee span.stroke { color: transparent; -webkit-text-stroke: 2px #0f172a; } @keyframes auScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ─────────────────────────────────────────────────────────────────────────── 9. LISTA DE SERVICIOS EN FILAS (.work-item de Aura) Las filas enormes que se iluminan y empujan 2 rem al pasar por encima, con la imagen que sigue al ratón. Es el gesto más reconocible de Aura y aquí sirve de índice a las tres páginas de servicio. ─────────────────────────────────────────────────────────────────────────── */ .au-worklist { position: relative; } .au-work { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 2.4rem 0; border-bottom: 1px solid var(--au-line); text-decoration: none; position: relative; } .au-work:first-child { border-top: 1px solid var(--au-line); } .au-work h3 { font-size: clamp(1.9rem, 4.6vw, 4rem); font-weight: 900; letter-spacing: -.045em; line-height: 1; text-transform: uppercase; color: var(--au-muted); margin: 0; transition: color .4s ease, padding-left .4s ease; } .au-work .au-work-meta { font-family: var(--font-sans, system-ui, sans-serif); font-size: .95rem; font-weight: 600; color: var(--au-accent); text-transform: none; letter-spacing: 0; opacity: 0; transition: opacity .4s ease; flex-shrink: 0; } @media (hover: hover) and (pointer: fine) { .au-work:hover h3 { color: var(--au-ink); padding-left: 2rem; } .au-work:hover .au-work-meta { opacity: 1; } } /* en táctil no hay hover: la información se enseña siempre */ @media (hover: none), (pointer: coarse) { .au-work h3 { color: var(--au-ink); } .au-work .au-work-meta { opacity: 1; } } /* el rótulo flotante que persigue al ratón */ .au-follow { position: fixed; top: 0; left: 0; width: 300px; height: 200px; z-index: 40; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .4s ease, transform .4s ease; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 1.6rem; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); background: linear-gradient(135deg, #1e3a8a, #2563eb 55%, #7c3aed); } .au-follow.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); } .au-follow .au-follow-price { font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: 3.2rem; font-weight: 900; line-height: 1; letter-spacing: -.05em; color: #fff; font-variant-numeric: tabular-nums; } .au-follow .au-follow-note { color: rgba(255, 255, 255, .82); font-size: .9rem; margin-top: .45rem; line-height: 1.35; } @media (hover: none), (pointer: coarse) { .au-follow { display: none; } } /* ─────────────────────────────────────────────────────────────────────────── 10. CIERRE (.footer / .huge-text / .btn-large de Aura) ─────────────────────────────────────────────────────────────────────────── */ .au-close { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 5rem 1.5rem; } .au-huge { font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(3rem, 11vw, 9.5rem); font-weight: 900; line-height: .92; letter-spacing: -.055em; text-transform: uppercase; margin-bottom: 2rem; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .au-btn-large { display: inline-block; padding: 1.35rem 3.5rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 9999px; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--au-ink); text-decoration: none; position: relative; overflow: hidden; isolation: isolate; transition: color .3s ease, border-color .3s ease; } .au-btn-large::before { content: ""; position: absolute; inset: 0; top: 100%; background: linear-gradient(135deg, #60a5fa, #a78bfa); transition: top .3s ease; z-index: -1; } @media (hover: hover) and (pointer: fine) { .au-btn-large:hover { color: #0f172a; border-color: transparent; } .au-btn-large:hover::before { top: 0; } } .au-btn-large:active { transform: scale(.975); } /* ─────────────────────────────────────────────────────────────────────────── 11. CURSOR PROPIO (.cursor / .cursor-dot de Aura) Solo en ratón fino. En táctil no existe y el cursor del sistema se respeta. ─────────────────────────────────────────────────────────────────────────── */ @media (hover: hover) and (pointer: fine) { body.aura.au-cursor-on, body.aura.au-cursor-on * { cursor: none; } .au-cursor { position: fixed; top: 0; left: 0; width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 9998; transition: width .3s, height .3s, background-color .3s, border-color .3s; } .au-cursor.is-hover { width: 62px; height: 62px; background: rgba(96, 165, 250, .22); border-color: rgba(167, 139, 250, .9); } .au-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--au-accent); transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; transition: opacity .3s; } } @media (hover: none), (pointer: coarse) { .au-cursor, .au-dot { display: none; } } /* ─────────────────────────────────────────────────────────────────────────── 12. ENTRADA (.loader de Aura) Aura se para 1,5 s a propósito. Aquí se vende algo: se acorta a 1 s y se enseña UNA vez por sesión, para que navegar entre las cuatro páginas no cueste un telón cada vez. ─────────────────────────────────────────────────────────────────────────── */ .au-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%); transition: transform 1s cubic-bezier(.77, 0, .175, 1); } .au-loader.is-gone { transform: translateY(-100%); } .au-loader-text { font-family: var(--font-display, "Archivo", system-ui, sans-serif); font-size: clamp(1.9rem, 5.5vw, 4.2rem); font-weight: 900; letter-spacing: -.05em; text-transform: uppercase; overflow: hidden; display: flex; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .au-loader-text span { display: inline-block; transform: translateY(100%); animation: auRise .85s cubic-bezier(.77, 0, .175, 1) forwards; } @keyframes auRise { to { transform: translateY(0); } } /* ─────────────────────────────────────────────────────────────────────────── 13. RESPETO A LAS PREFERENCIAS DEL SISTEMA ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .au-marquee { animation: none; } .au-line > span { transform: none !important; opacity: 1 !important; transition: none !important; } .au-loader { display: none; } .au-follow { display: none; } .au-cursor, .au-dot { display: none; } body.aura.au-cursor-on, body.aura.au-cursor-on * { cursor: auto; } .au-work:hover h3 { padding-left: 0; } body.aura .card-pro:hover, body.aura .svc-card:hover { transform: none; } .au-btn-large::before { transition: none; } } /* ─────────────────────────────────────────────────────────────────────────── 14. MÓVIL ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { body.aura .au-hero { min-height: auto; } .au-marquee-wrap { padding: 2.2rem 0; margin: 3rem 0; } .au-work { padding: 1.6rem 0; } .au-close { min-height: auto; padding: 4rem 1.5rem; } .au-btn-large { padding: 1.1rem 2.4rem; font-size: .95rem; } } /* ─────────────────────────────────────────────────────────────────────────── 15. SUPERFICIES DE COLOR SOBRE EL LIENZO OSCURO El sitio usa recuadros de aviso teñidos (verde para lo que sí se comprueba, rojo para lo que no, ámbar para las advertencias). Sobre negro esos pasteles se convierten en manchas que ciegan. Se conserva el TONO, que es el que comunica, y se cambia el peso: translúcidos, con su borde del mismo color. ─────────────────────────────────────────────────────────────────────────── */ body.aura .bg-green-50, body.aura .bg-emerald-50 { background-color: rgba( 74, 222, 128, .07) !important; } body.aura .bg-green-100, body.aura .bg-emerald-100 { background-color: rgba( 74, 222, 128, .13) !important; } body.aura .bg-red-50, body.aura .bg-rose-50 { background-color: rgba(248, 113, 113, .07) !important; } body.aura .bg-red-100, body.aura .bg-rose-100 { background-color: rgba(248, 113, 113, .13) !important; } body.aura .bg-blue-50, body.aura .bg-sky-50 { background-color: rgba( 96, 165, 250, .07) !important; } body.aura .bg-blue-100, body.aura .bg-sky-100 { background-color: rgba( 96, 165, 250, .13) !important; } body.aura .bg-purple-50, body.aura .bg-violet-50, body.aura .bg-indigo-50 { background-color: rgba(167, 139, 250, .07) !important; } body.aura .bg-purple-100, body.aura .bg-violet-100, body.aura .bg-indigo-100 { background-color: rgba(167, 139, 250, .13) !important; } body.aura .bg-amber-50, body.aura .bg-yellow-50 { background-color: rgba(251, 191, 36, .07) !important; } body.aura .bg-amber-100, body.aura .bg-yellow-100 { background-color: rgba(251, 191, 36, .13) !important; } body.aura .bg-orange-50 { background-color: rgba(251, 146, 60, .07) !important; } body.aura .bg-orange-100 { background-color: rgba(251, 146, 60, .13) !important; } body.aura .bg-gray-200, body.aura .bg-slate-200 { background-color: rgba(255, 255, 255, .10) !important; } /* los mismos tonos, en el texto */ body.aura .text-green-800, body.aura .text-green-900, body.aura .text-emerald-800 { color: #86efac !important; } body.aura .text-red-600, body.aura .text-red-700, body.aura .text-red-800, body.aura .text-red-900 { color: #fca5a5 !important; } body.aura .text-amber-600, body.aura .text-amber-700, body.aura .text-amber-800, body.aura .text-amber-900, body.aura .text-yellow-600, body.aura .text-yellow-700, body.aura .text-yellow-800, body.aura .text-yellow-900 { color: #fcd34d !important; } body.aura .text-orange-600, body.aura .text-orange-700 { color: #fdba74 !important; } body.aura .text-purple-600, body.aura .text-purple-700, body.aura .text-violet-600 { color: #c4b5fd !important; } body.aura .text-blue-900 { color: #93c5fd !important; } /* bordes teñidos */ body.aura .border-green-200, body.aura .border-green-300 { border-color: rgba( 74, 222, 128, .28) !important; } body.aura .border-red-100, body.aura .border-red-200 { border-color: rgba(248, 113, 113, .28) !important; } body.aura .border-blue-100, body.aura .border-blue-200 { border-color: rgba( 96, 165, 250, .28) !important; } body.aura .border-amber-200, body.aura .border-yellow-200 { border-color: rgba(251, 191, 36, .28) !important; } body.aura .border-gray-300 { border-color: rgba(255, 255, 255, .18) !important; } /* ─────────────────────────────────────────────────────────────────────────── 16. AJUSTES DE LA PORTADA El titular de Aura ocupa 8vw porque detrás no hay nada que vender. Aquí sí: se queda muy por encima del tamaño anterior, pero cabiendo con los botones y la fila de precios dentro de la primera pantalla. ─────────────────────────────────────────────────────────────────────────── */ body.aura .au-hero h1 { font-size: clamp(2.3rem, 4.5vw, 3.9rem); line-height: 1.0; } @media (min-width: 1024px) { body.aura .au-hero { min-height: 88vh; } } /* ─────────────────────────────────────────────────────────────────────────── 17. LOS RECUADROS DE AVISO CON DEGRADADO EN EL ATRIBUTO style Tres tarjetas llevan el degradado escrito a mano en el HTML, así que ganan a cualquier clase. Se las alcanza por el propio valor y se les da el mismo tratamiento translúcido, conservando el tono que comunica. ─────────────────────────────────────────────────────────────────────────── */ body.aura [style*="#f0fdf4"] { /* lo que sí se comprueba, verde */ background: rgba( 74, 222, 128, .085) !important; border-color: rgba( 74, 222, 128, .28) !important; } body.aura [style*="#fffbeb"] { /* la advertencia, ámbar */ background: rgba(251, 191, 36, .085) !important; border-color: rgba(251, 191, 36, .28) !important; } body.aura [style*="#eff6ff"]:not(.pkg) { /* la nota, azul */ background: rgba( 96, 165, 250, .085) !important; border-color: rgba( 96, 165, 250, .28) !important; } /* piezas del carrito y de los planes definidas en el