/* Vaucai — shared styles (landing + legal pages)
Pre-Fase-B: estilos compartidos del sitio estático.
En Fase B esto se sustituirá por la cadena de Tailwind/Next.js. */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* iOS Safari rubber-band overscroll expone el fondo del por
debajo y por encima del body. background var(--bg) elimina el flash
blanco bajo el footer negro. overscroll-behavior: none mata la
animacion de rebote en si misma (Safari iOS 16+, no-op en anteriores).
color-scheme asegura que scrollbar nativa y form controls hereden
tema oscuro sin parpadeo. */
html {
background: var(--bg);
color-scheme: dark;
overscroll-behavior: none;
}
:root {
--bg: #0a0a0a;
--bg-deep: #050506;
--surface: #18181b;
--surface-elevated: #111317;
--surface-soft: #16181D;
--border: #27272a;
--border-soft: #1E2127;
--border-light: #2A2D35;
--fg: #fafafa;
--fg-soft: #E5E5E7;
--muted: #a1a1aa;
--muted-soft: #8A909C;
--accent: #007FFF;
--accent-hover: #3399FF;
--error: #ef4444;
/* Aliases + new tokens introducidos en el brief de la landing narrativa.
Las páginas legales siguen usando los nombres originales. */
--void: var(--bg);
--void-raised: #0F1115;
--void-elevated: #14171D;
--text: var(--fg);
--text-soft: var(--muted);
--text-faint: var(--muted-soft);
--text-whisper: #3E434C;
--vaucai-blue: var(--accent);
--vaucai-blue-hover: #3399FF;
--line: var(--border);
--line-soft: var(--border-soft);
--line-bright: var(--border-light);
--post-it: #FCE88C;
--ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--fg);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Reveal animations */
@keyframes riseIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: riseIn 0.6s ease-out forwards; }
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.15s; }
.reveal-3 { animation-delay: 0.25s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; animation: none; }
}
/* Nav */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.logo a { color: inherit; text-decoration: none; }
.logo img { height: 44px; width: auto; display: block; }
.nav-links a {
color: var(--muted);
text-decoration: none;
margin-left: 2rem;
font-size: 0.95rem;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--fg); }
/* ----- Contact CTA dropdown (top-right of nav) ----- */
.contact-cta-wrap {
position: relative;
display: inline-flex;
}
.contact-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 200px;
padding: 6px;
background: var(--surface-elevated);
border: 1px solid var(--border-soft);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 2px;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.03);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition:
opacity 0.16s ease,
transform 0.16s ease,
visibility 0s linear 0.16s;
z-index: 100;
}
.contact-cta-wrap[data-open="true"] .contact-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity 0.16s ease,
transform 0.16s ease,
visibility 0s linear 0s;
}
.contact-cta-wrap[data-open="true"] > .header-cta-btn {
background: rgba(32, 106, 244, 0.10);
}
.contact-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
color: var(--text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.contact-menu-item:hover,
.contact-menu-item:focus-visible {
background: rgba(32, 106, 244, 0.12);
color: var(--text);
outline: none;
}
.contact-menu-item svg {
width: 18px;
height: 18px;
flex: 0 0 18px;
color: var(--text-soft);
transition: color 0.15s ease;
}
.contact-menu-item:hover svg,
.contact-menu-item:focus-visible svg {
color: var(--vaucai-blue);
}
@media (max-width: 480px) {
.contact-menu { min-width: 180px; }
}
main { flex: 1; width: 100%; }
/* Hero (landing) */
.hero-shell {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0;
}
.hero {
text-align: center;
padding: 4rem 2rem;
/* Sesión-16 — max-width 800 → 1200. A 800px el title se rompía
(wrap natural del browser) en font-size > ~88px, neutralizando
cualquier aumento. 1200 deja que "Crea tu asistente personal"
(26 chars) quepa en 1 línea hasta font ~85-90px. El subtítulo
sigue limitado por su propio max-width: 540px. */
max-width: 1200px;
width: 100%;
}
.hero h1 {
/* Sesión-16 (2026-05-10) — mobile-first, tipografía replicando
.scene-d h2 ("Llévame contigo"):
font-family: hereda system sans-serif default
font-weight: 800 (bold, NO semibold)
letter-spacing: -0.03em
line-height: 1.1
BASE = mobile a 40px. A este tamaño "Crea tu asistente personal"
(26 chars) NO cabe en 1 línea en iPhone 14 Pro (358px disponibles,
necesitaría ~570px); el
manual entre "personal" y "en
segundos" se oculta y el browser hace wrap natural balanceado a
~3 líneas. Tradeoff aceptado para tener presencia visual real
(ratio título/subtítulo = 40/17 = 2.4x).
margin-bottom 2rem (32px) — "un poco más" de separación con
el subtítulo según spec. */
/* Sesión-16 — tipografía replicando .scene-d h2 ("Llévame
contigo") con Inter explícita para render consistente
cross-device. Sin
en HTML — wrap natural en mobile
(3 líneas balanceadas, sin overflow); en desktop, max-width
tipográfico + text-wrap: balance fuerzan wrap a 2 líneas
limpias. */
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 30px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
/* Sesión-28 rev 13: 12px de separación (0.75rem). Punto medio
entre 0 (demasiado pegado, rev 12) y 20px (demasiado aireado,
rev 10) — el subtítulo se nota como continuación del h1 pero
respira lo justo. */
margin: 0 auto 0.75rem;
color: #ffffff;
}
@media (min-width: 768px) {
.hero h1 {
font-size: clamp(4.5rem, 7.2vw, 7.5rem);
letter-spacing: -0.035em;
line-height: 1.05;
max-width: 18ch;
}
}
.hero h1 .brand { color: var(--accent); }
.hero p {
/* Subtítulo (~125 chars). BASE = mobile spec del fundador:
font-size 17px, line-height 1.5, max-width 340px,
color gris (var(--muted) heredado), centrado por
margin auto. */
font-size: 17px;
line-height: 1.5;
color: var(--muted);
max-width: 340px;
margin: 0 auto 2.5rem;
text-wrap: pretty;
}
@media (min-width: 768px) {
.hero p {
/* DESKTOP: max-width más amplio + escala con clamp para
viewport wide. */
font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
line-height: 1.55;
max-width: 540px;
}
}
/* CTA Form (landing) */
.cta-form {
display: flex;
gap: 0.75rem;
max-width: 480px;
margin: 0 auto;
}
.cta-form input {
flex: 1;
padding: 1rem 1.25rem;
font-size: 1.1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--fg);
outline: none;
transition: border-color 0.2s;
}
.cta-form input:focus { border-color: var(--accent); }
.cta-form input::placeholder { color: #52525b; }
.cta-form input[aria-invalid="true"] { border-color: var(--error); }
.cta-form button {
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
background: var(--accent);
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
white-space: nowrap;
}
.cta-form button:hover { background: var(--accent-hover); }
.cta-form button:active { transform: scale(0.98); }
.cta-form button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Legal pages */
.legal-page {
padding: 80px 40px;
max-width: 720px;
margin: 0 auto;
}
.legal-content h1 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: clamp(40px, 8vw, 80px);
font-weight: 800;
color: var(--fg);
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 8px;
}
.legal-content > p:first-of-type {
margin-bottom: 48px;
}
.legal-content > p:first-of-type em {
font-size: 14px;
color: var(--muted-soft);
font-style: normal;
}
.legal-content em { font-style: normal; }
.legal-content h2 {
font-size: 22px;
font-weight: 500;
color: var(--fg);
margin-top: 48px;
margin-bottom: 16px;
line-height: 1.3;
}
.legal-content h3 {
font-size: 18px;
font-weight: 500;
color: var(--fg);
margin-top: 32px;
margin-bottom: 12px;
line-height: 1.35;
}
.legal-content p {
font-size: 16px;
line-height: 1.65;
color: var(--fg-soft);
margin-bottom: 16px;
}
.legal-content ul,
.legal-content ol {
margin: 0 0 16px;
padding-left: 24px;
line-height: 1.65;
color: var(--fg-soft);
font-size: 16px;
}
.legal-content li { margin-bottom: 6px; }
.legal-content li > strong { color: var(--fg); }
.legal-content a {
color: var(--accent);
text-decoration: none;
}
.legal-content a:hover { text-decoration: underline; }
.legal-content strong { color: var(--fg); font-weight: 600; }
.legal-content code {
background: var(--surface-soft);
padding: 2px 6px;
border-radius: 4px;
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 13px;
color: var(--fg);
}
.legal-content table.legal-table {
width: 100%;
border-collapse: collapse;
margin: 16px 0 24px;
font-size: 14px;
color: var(--fg-soft);
}
.legal-content table.legal-table th {
text-align: left;
padding: 10px;
background: var(--surface-soft);
color: var(--fg);
font-weight: 600;
border-bottom: 1px solid var(--border-soft);
}
.legal-content table.legal-table td {
padding: 10px;
border-bottom: 1px solid var(--border-soft);
vertical-align: top;
}
/* Site footer (compartido landing + legal pages).
La landing duplica estos estilos inline en index.html (legacy del
refactor narrativo); aqui viven los autoritativos para que las
legal pages no queden sin layout. */
.site-footer {
background: #0a0a0a;
padding: 120px 32px 88px;
color: #fff;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
text-align: center;
}
.site-footer-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
min-width: 0;
}
.site-footer-logo {
display: block;
line-height: 0;
margin: 0;
padding: 0;
}
.site-footer-logo img {
display: block;
height: 72px;
width: auto;
}
.site-footer-why {
display: inline-block;
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: 22px;
line-height: 1.1;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.site-footer-why:hover { color: var(--accent); }
.site-footer-legal {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
grid-auto-flow: column;
column-gap: 56px;
row-gap: 12px;
}
.site-footer-legal li { line-height: 1; }
.site-footer-legal a {
display: block;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 14px;
line-height: 1;
white-space: nowrap;
transition: color 0.2s;
}
.site-footer-legal a:hover { color: #fff; }
@media (max-width: 900px) {
/* Audit 2026-05-06: keep 2×2 grid on mobile (the majority of
traffic comes from phones; collapsing to a single column
breaks the symmetry the founder asked for). Tighter
column-gap so the four labels fit comfortably even on
narrow viewports (~340-360px). */
.site-footer-legal {
column-gap: 32px;
justify-content: center;
}
}
.site-footer-social-col {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 16px;
align-items: center;
}
.site-footer-social-col a {
display: inline-flex;
color: rgba(255, 255, 255, 0.6);
transition: color 0.2s, transform 0.2s;
}
.site-footer-social-col a:hover {
color: var(--accent);
transform: scale(1.1);
}
.site-footer-social-col svg { width: 20px; height: 20px; display: block; }
@media (max-width: 900px) {
.site-footer { padding: 56px 24px; }
.site-footer-logo img { height: 52px; }
}
/* Back link para legal pages — siempre visible en mobile (la nav-links
se oculta en <600px y el wordmark no parece "back" para el visitante
medio). Se renderiza dentro del article, encima del h1. */
.legal-back {
display: inline-flex;
align-items: center;
gap: 6px;
/* Azul vaucai (--accent) — color de marca, consistente entre
/crear/, páginas legales y por-que-vaucai. Audit 2026-05-06:
antes era var(--muted) (gris) — el fundador pidió que los
enlaces de "volver" usen el color de la marca para no romper
estética entre páginas. */
color: var(--accent);
text-decoration: none;
font-size: 14px;
margin-bottom: 32px;
transition: color 0.2s;
}
.legal-back:hover { color: var(--accent-hover); }
.legal-back-arrow {
display: inline-block;
transition: transform 0.2s;
}
.legal-back:hover .legal-back-arrow { transform: translateX(-3px); }
/* Cookie banner */
.cookie-banner {
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--surface-elevated);
border-top: 1px solid var(--border-soft);
padding: 1.5rem 2rem;
display: none;
z-index: 100;
}
.cookie-banner.visible { display: block; animation: riseIn 0.4s ease-out; }
.cookie-banner-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 2rem;
}
.cookie-banner-text {
flex: 1;
font-size: 0.9rem;
color: var(--muted);
line-height: 1.5;
}
.cookie-banner-text a { color: var(--fg); text-decoration: underline; }
.cookie-banner-text a:hover { color: var(--accent); }
.cookie-banner-actions {
display: flex;
gap: 12px;
flex-shrink: 0;
}
/* Cookie banner buttons — AEPD 2024: aceptar y rechazar con el mismo
peso visual (tamaño idéntico, contraste similar). Personalizar queda
como terciario sin fondo. */
.cookie-btn {
padding: 10px 22px;
border-radius: 100px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
color: var(--fg);
border: 1px solid transparent;
transition: background 0.2s, border-color 0.2s, opacity 0.2s;
white-space: nowrap;
min-width: 110px;
text-align: center;
}
.cookie-btn-accept {
background: var(--accent);
color: white;
border-color: var(--accent);
}
.cookie-btn-accept:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cookie-btn-reject {
background: transparent;
color: var(--fg);
border-color: var(--border-light);
}
.cookie-btn-reject:hover { background: var(--surface-soft); border-color: var(--muted-soft); }
.cookie-btn-customize {
background: transparent;
color: var(--muted);
border-color: transparent;
}
.cookie-btn-customize:hover { color: var(--fg); }
/* Inline "Configurar cookies" affordance on /cookies/ page (audit
2026-05-06: footer link removed, accessibility kept here per GDPR).
Lives inside .cookie-prefs-box, a sticky-but-subtle banner placed
right after the page title so the user sees it immediately on
landing — no need to scroll into section 4. */
.cookie-prefs-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 16px 20px;
margin: 24px 0 32px;
background: var(--surface-soft);
border: 1px solid var(--border-light);
border-radius: 12px;
}
.cookie-prefs-box-text {
font-size: 14px;
color: var(--fg);
line-height: 1.5;
flex: 1 1 240px;
}
.cookie-prefs-box-text strong { font-weight: 600; }
.cookie-prefs-btn {
padding: 10px 22px;
border-radius: 100px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
background: var(--fg);
color: var(--bg);
border: 1px solid var(--fg);
transition: opacity 0.2s, transform 0.1s;
white-space: nowrap;
}
.cookie-prefs-btn:hover { opacity: 0.85; }
.cookie-prefs-btn:active { transform: scale(0.98); }
@media (max-width: 600px) {
.cookie-prefs-box {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.cookie-prefs-btn { width: 100%; }
}
/* Cookie modal */
.cookie-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: 200;
padding: 1rem;
}
.cookie-modal-overlay.visible { display: flex; }
.cookie-modal {
background: var(--surface-elevated);
border-radius: 16px;
padding: 2rem;
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
}
.cookie-modal h2 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.cookie-modal-desc {
font-size: 0.9rem;
color: var(--muted);
margin-bottom: 1.5rem;
line-height: 1.5;
}
.cookie-category {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--border-soft);
}
.cookie-category:last-of-type { border-bottom: none; }
.cookie-category-info { flex: 1; }
.cookie-category-name { font-weight: 500; font-size: 0.95rem; margin-bottom: 0.25rem; }
.cookie-category-desc { font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
/* Toggle switch */
.toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
margin-top: 0.15rem;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--border);
border-radius: 24px;
transition: background 0.2s;
}
.toggle-slider::before {
content: '';
position: absolute;
height: 18px; width: 18px;
left: 3px; top: 3px;
background: white;
border-radius: 50%;
transition: transform 0.2s;
}
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle input:disabled + .toggle-slider { opacity: 0.6; cursor: not-allowed; }
.cookie-modal-actions {
display: flex;
gap: 12px;
margin-top: 1.5rem;
}
.cookie-modal-actions button {
flex: 1;
padding: 10px 20px;
border-radius: 100px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
color: white;
border: none;
transition: background 0.2s;
}
.cookie-modal-save { background: var(--accent); }
.cookie-modal-save:hover { background: var(--accent-hover); }
.cookie-modal-accept-all {
background: transparent;
border: 1px solid var(--border-light);
}
.cookie-modal-accept-all:hover { background: var(--surface-soft); }
/* Responsive */
@media (max-width: 768px) {
.legal-page { padding: 64px 24px; }
.legal-content h1 { font-size: 32px; }
.legal-content table.legal-table { font-size: 13px; }
.legal-content table.legal-table th,
.legal-content table.legal-table td { padding: 8px; }
/* Footer legacy mobile: estilos movidos a inline