/* ============================================================ Bloq Web Studio — estilos compartidos (Fase 4) Generado a partir del CSS idéntico que se repetía inline en las 16 páginas principales (es/en). No tocar sin revisar las 16 páginas que lo enlazan. Temas: para index/servicios/contacto, para aviso-legal/política-cookies/ política-privacidad/términos-condiciones. ============================================================ */ /* ---- Reset y accesibilidad (universal) ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .lang-btn-mobile:active { transform: scale(0.9); } @keyframes spin { to { transform: rotate(360deg); } } .lang-modal > * { position: relative; } .lang-modal-close svg { width: 15px; height: 15px; } .lang-modal-close:hover { color: var(--ink); border-color: rgba(255,255,255,0.25); transform: rotate(90deg); } .lang-modal-backdrop.open .lang-modal-icon { transform: scale(1) rotate(0deg); opacity: 1; animation: langGlobeSpin 5s linear infinite 0.7s; } @keyframes langGlobeSpin { 0%, 92% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .lang-modal-icon svg { width: 28px; height: 28px; } .lang-modal-actions .btn-primary, .lang-modal-actions .btn-outline { width: 100%; justify-content: center; } .btn-primary svg { width: 17px; height: 17px; } .lang-modal-backdrop.open { opacity: 1; visibility: visible; background: rgba(6, 6, 12, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .4s ease, background .4s ease, backdrop-filter .4s ease, visibility 0s linear 0s; } .lang-modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s, transform .2s; } .lang-modal-backdrop.open .lang-modal { transform: scale(1) translateY(0); opacity: 1; transition-delay: .08s; } /* ═══════════════════════════════════════ VENTANA EMERGENTE: confirmar cambio de idioma (móvil) ═══════════════════════════════════════ */ .lang-modal-backdrop { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 6, 12, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); opacity: 0; visibility: hidden; transition: opacity .4s ease, background .4s ease, backdrop-filter .4s ease, visibility 0s linear .4s; } .lang-modal-actions { display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(10px); transition: transform .4s ease, opacity .4s ease; transition-delay: .32s; } .btn-outline { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.04); color: var(--ink); font-size: 15px; font-weight: 600; padding: 15px 28px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; transition: border-color .25s, background .25s, transform .2s; } /* ---- Tokens de diseño (universal) ---- */ :root { --bg: #0a0a14; --bg-2: #10101f; --ink: #f4f4fb; --muted: #9a9ab5; --line: rgba(255,255,255,0.08); --violet: #7c3aed; --pink: #ec4899; --orange: #f97316; --cyan: #06d6f9; --lime: #a3e635; --yellow: #facc15; --grad-hot: linear-gradient(120deg, var(--violet), var(--pink) 50%, var(--orange)); --grad-cool: linear-gradient(120deg, var(--cyan), var(--violet)); /* Acento sobrio usado por las páginas legales (aviso legal, políticas, términos): nada de degradados ni de rosa/violeta llamativos. */ --accent: #9fb0d9; } /* ============================================================ TEMA APP — index / servicios / contacto ============================================================ */ h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } ::selection { background: var(--pink); color: #fff; } .site-header.scrolled { transform: translateY(-100%); opacity: 0; pointer-events: none; } .header-brand { display: flex; align-items: center; gap: 12px; } .header-brand .brand-name em { font-style: normal; background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; } .lang-modal p { color: var(--muted); font-size: 0.92rem; max-width: 32ch; margin: 0 auto 26px; opacity: 0; transform: translateY(10px); transition: transform 0.4s ease, opacity 0.4s ease; transition-delay: 0.24s; } .lang-modal-backdrop.open .lang-modal h3, .lang-modal-backdrop.open .lang-modal p, .lang-modal-backdrop.open .lang-modal-actions { opacity: 1; transform: translateY(0); } .nav-slider { position: absolute; top: 6px; left: 0; height: calc(100% - 12px); background: var(--grad-hot); border-radius: 999px; pointer-events: none; box-shadow: 0 2px 14px rgba(236, 72, 153, 0.5); transition: transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1), width 0.38s cubic-bezier(0.34, 1.2, 0.64, 1); will-change: transform, width; } .nav-links { display: flex; align-items: center; position: relative; } .nav-link { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; cursor: pointer; border: none; background: none; overflow: hidden; max-width: 200px; margin-right: 2px; transition: color 0.25s ease, max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding-left 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding-right 0.5s cubic-bezier(0.22, 1, 0.36, 1), margin-right 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; z-index: 1; } .nav-link:last-child { margin-right: 0; } .nav-link:hover { color: var(--ink); } .nav-link.active { color: #fff; font-weight: 600; } .nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); } .nav-link { -webkit-user-select: none; user-select: none; } .eyebrow { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; } .grad-hot { background: var(--grad-hot); -webkit-background-clip: text; background-clip: text; color: transparent; } .reveal.in { opacity: 1; transform: translateY(0); } .contact-card::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, var(--violet), var(--pink), var(--orange), var(--cyan), var(--violet)); opacity: 0.16; animation: spin 12s linear infinite; pointer-events: none; } .contact-card > * { position: relative; } .contact-card h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: 16px; } .contact-card p { color: var(--muted); max-width: 480px; margin: 0 auto 34px; } .btn-wa { display: inline-flex; align-items: center; gap: 10px; background: #15803d; color: #fff; font-size: 16px; font-weight: 700; padding: 16px 32px; border-radius: 999px; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s; box-shadow: 0 10px 30px rgba(21, 128, 61, 0.4); } .btn-wa:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 40px rgba(21, 128, 61, 0.55); } .btn-wa svg { width: 20px; height: 20px; } .contact-mail { display: block; margin-top: 18px; font-size: 0.9rem; color: var(--muted); } .contact-mail a { color: var(--cyan); } .contact-mail a:hover { text-decoration: underline; } .foot .brand-mini { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ink); } .foot .brand-mini img { height: 26px; width: auto; display: block; } .foot-links { display: flex; gap: 1.2rem; } .foot-links a:hover { color: var(--ink); } /* -- Variantes con el mismo nombre de clase que el tema legal -- */ .theme-app .btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 38px rgba(236, 72, 153, 0.55); } .theme-app .btn-primary { position: relative; display: inline-flex; align-items: center; gap: 9px; background: var(--grad-hot); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; padding: 15px 30px; border-radius: 999px; border: none; cursor: pointer; overflow: hidden; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s; box-shadow: 0 8px 28px rgba(236, 72, 153, 0.4); } .theme-app .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); } html.theme-app { overflow-x: clip; } .theme-app .lang-modal-icon { width: 62px; height: 62px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--cyan) 16%, transparent); color: var(--cyan); transform: scale(0.6) rotate(-25deg); opacity: 0; transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; transition-delay: 0.18s; } .theme-app .lang-modal { position: relative; width: min(400px, 100%); padding: 40px 30px 32px; border-radius: 26px; text-align: center; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); transform: scale(0.82) translateY(18px); opacity: 0; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease; } .theme-app .lang-modal h3 { font-size: 1.35rem; margin-bottom: 12px; opacity: 0; transform: translateY(10px); transition: transform 0.4s ease, opacity 0.4s ease; transition-delay: 0.16s; } html.theme-app a { color: inherit; text-decoration: none; } .theme-app .lang-btn-mobile svg { width: 17px; height: 17px; } .theme-app .wrap { width: min(1160px, 92%); margin-inline: auto; } html.theme-app body { font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; overflow-x: clip; max-width: 100%; -webkit-font-smoothing: antialiased; } .theme-app .btn-outline:hover { border-color: var(--cyan); background: rgba(6, 214, 249, 0.08); transform: translateY(-2px); } @media (hover: hover) and (pointer: fine) { .theme-app .lang-btn-mobile:hover { border-color: rgba(255, 255, 255, 0.3); } } /* ============================================================ TEMA LEGAL — aviso-legal / política-cookies / política-privacidad / términos-condiciones ============================================================ */ * { -webkit-tap-highlight-color: transparent; } /* Bloquea el scroll mientras está abierta la ventana de cambio de idioma (móvil) */ html.intro-lock, body.intro-lock { overflow: hidden !important; height: 100%; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg) url('/media/background_index.webp') center center / cover no-repeat; pointer-events: none; } .simple-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 76px; display: flex; align-items: center; background: linear-gradient(rgba(10,10,20,.78), rgba(10,10,20,.6)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(255,255,255,.07); } .simple-header .wrap { width: min(1160px, 92%); display: flex; align-items: center; justify-content: space-between; } .simple-header img { height: 28px; width: auto; display: block; } .simple-header-right { display: flex; align-items: center; gap: 16px; } .back-home { font-weight: 600; font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; text-decoration: none; transition: color .25s; } .back-home:hover { color: var(--ink); } /* ═══ BOTÓN DE IDIOMA (globo) — en TODOS los tamaños de pantalla. ═══ */ .lang-btn-mobile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); color: var(--ink); cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s; } .lang-modal::before { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 0deg, var(--accent), transparent 35%, var(--accent) 70%, transparent 100%); opacity: 0.10; animation: spin 12s linear infinite; pointer-events: none; } .lang-modal p.lang-modal-desc { color: var(--muted); font-size: .92rem; max-width: 32ch; margin: 0 auto 26px; opacity: 0; transform: translateY(10px); transition: transform .4s ease, opacity .4s ease; transition-delay: .24s; } .lang-modal-backdrop.open .lang-modal h3, .lang-modal-backdrop.open .lang-modal p.lang-modal-desc, .lang-modal-backdrop.open .lang-modal-actions { opacity: 1; transform: translateY(0); } main { padding: 9rem 0 5rem; } h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -.03em; margin-bottom: .5rem; } .updated { color: var(--muted); font-size: .85rem; margin-bottom: 2.6rem; } h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.2rem; margin: 2.6rem 0 1rem; color: var(--ink); padding-bottom: .7rem; border-bottom: 1px solid var(--line); } /* Los títulos de las páginas "app" (home, servicios, contacto) van en Sora, como en la versión original. Las reglas h1/h2 de arriba (Space Grotesk) son para las páginas legales (theme-legal); al no estar acotadas se colaban en las demás, cambiando su tipografía. Este override las devuelve a Sora. */ .theme-app h1, .theme-app h2, .theme-app h3 { font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif; } p, li { color: #d4d4e6; font-size: .98rem; } p + p { margin-top: .9rem; } ul { margin: .8rem 0 0 1.2rem; } li { margin-bottom: .5rem; } li::marker { color: var(--accent); } strong { color: var(--ink); } a.inline { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } a.inline:hover { color: var(--ink); } footer { border-top: 1px solid var(--line); padding: 2.2rem 0; } .foot img { height: 22px; width: auto; opacity: .8; } .foot span, .foot a { color: var(--muted); font-size: .85rem; } .foot a:hover { color: var(--ink); } /* -- Variantes con el mismo nombre de clase que el tema app -- */ .theme-legal .btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 38px rgba(159, 176, 217, 0.45); } .theme-legal .btn-primary { position: relative; display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: #0a0a14; font-family: inherit; font-size: 15px; font-weight: 700; padding: 15px 30px; border-radius: 999px; border: none; cursor: pointer; overflow: hidden; text-decoration: none; transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; box-shadow: 0 8px 28px rgba(159, 176, 217, 0.3); } .theme-legal .foot { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; text-align: center; } html.theme-legal { overflow-x: clip; scroll-behavior: smooth; } .theme-legal .lang-modal-icon { width: 62px; height: 62px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); transform: scale(0.6) rotate(-25deg); opacity: 0; transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s ease; transition-delay: .18s; } .theme-legal .lang-modal { position: relative; width: min(400px, 100%); padding: 40px 30px 32px; border-radius: 26px; text-align: center; overflow: hidden; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); transform: scale(0.82) translateY(18px); opacity: 0; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease; } .theme-legal .lang-modal h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; margin-bottom: 12px; opacity: 0; transform: translateY(10px); transition: transform .4s ease, opacity .4s ease; transition-delay: .16s; } html.theme-legal a { color: inherit; } .theme-legal .lang-btn-mobile svg { width: 16px; height: 16px; } .theme-legal .wrap { width: min(760px, 92%); margin-inline: auto; } html.theme-legal body { font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.7; -webkit-font-smoothing: antialiased; } .theme-legal .btn-outline:hover { border-color: var(--accent); background: rgba(159, 176, 217, 0.08); transform: translateY(-2px); } @media (hover: hover) and (pointer: fine) { .theme-legal .lang-btn-mobile:hover { border-color: rgba(255, 255, 255, 0.25); } }