/* ============================================================ Making·Pro — Notion-branded design Palette: Notion's warm white + dark brown + serif headings ============================================================ */ /* ── 0. FUENTES ─────────────────────────────────────────────── Inter y Lora autoalojadas (subconjunto latino) en lugar de servirse desde Google Fonts. Motivos: · elimina una petición encadenada a otro dominio (antes había que descargar y parsear el CSS de Google antes de saber siquiera la URL de cada fuente); · permite precargarlas desde el , imposible con Google Fonts porque sus URLs rotan; · ninguna IP de visitante sale hacia un tercero. Son fuentes variables: un único fichero cubre todo el rango de pesos, así que no hay un .woff2 por peso. Si algún día se usa un peso fuera del rango declarado, el navegador lo sintetiza. Se regeneran con: python3 tools-fetch-fonts.py ──────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/inter-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/lora-latin-var.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('fonts/lora-latin-italic-var.woff2') format('woff2'); } /* ── 1. VARIABLES ─────────────────────────────────────────── */ :root { --bg: #ffffff; --bg-alt: #f7f6f3; --bg-dark: #191919; --text: #37352f; --text-2: #787774; --text-3: #acaba8; --border: #e9e8e5; --border-light: #f0efec; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-pill: 100px; --section: 96px; --max-w: 1160px; --gutter: 24px; --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06); --shadow-mockup: 0 0 0 1px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.04), 0 20px 60px rgba(0,0,0,0.10); } /* ── 2. RESET ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } button { font-family: inherit; } /* ── 3. TYPOGRAPHY ────────────────────────────────────────── */ h1, h2, h3 { font-family: var(--font-serif); line-height: 1.2; } h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 600; } h2 { font-size: clamp(1.65rem, 3.5vw, 2.4rem); font-weight: 600; } h3 { font-size: 1.15rem; font-weight: 600; } p { font-size: 1rem; line-height: 1.75; } em { font-style: italic; } /* ── 4. LAYOUT ────────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } section { padding: var(--section) 0; } .section-header { text-align: center; max-width: 620px; margin: 0 auto 64px; } /* Los rótulos de sección (EL PROBLEMA, LA SOLUCIÓN…) quedaban muy apagados: gris secundario sobre fondo casi del mismo tono. Ahora van en negativo, que es lo que los hace legibles de un vistazo al escanear la página. */ .section-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--text); border: 1px solid var(--text); padding: 6px 16px; border-radius: var(--r-pill); margin-bottom: 20px; } /* Las secciones de fondo oscuro ya tienen su propia variante más abajo (.cta-final .section-tag), que sigue mandando por orden de aparición. */ .section-sub { margin-top: 16px; color: var(--text-2); font-size: 1.05rem; } /* ── 5. BUTTONS ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1.5px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .btn-primary { background: var(--text); color: #fff; border-color: var(--text); } .btn-primary:hover { background: #1a1915; border-color: #1a1915; } .btn-outline { background: transparent; color: var(--text); border-color: var(--border); } .btn-outline:hover { border-color: var(--text); } .btn-ghost { background: transparent; color: var(--text-2); border-color: transparent; padding-left: 0; padding-right: 0; } .btn-ghost:hover { color: var(--text); } .btn-sm { padding: 8px 18px; font-size: 0.8rem; background: var(--text); color: #fff; border-radius: var(--r-sm); border-color: var(--text); } .btn-sm:hover { background: #1a1915; } .btn-lg { padding: 15px 32px; font-size: 1rem; } /* ── 6. NAVIGATION ────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; gap: 32px; height: 60px; } .logo { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--text); flex-shrink: 0; letter-spacing: -0.01em; } .logo span { color: var(--text-2); } .nav-links { display: flex; gap: 28px; flex: 1; } .nav-links a { font-size: 0.875rem; color: var(--text-2); transition: color 0.15s; } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── 7. HERO ──────────────────────────────────────────────── */ .hero { padding: 80px 0; border-bottom: 1px solid var(--border); overflow: hidden; position: relative; background-image: radial-gradient(circle at 1px 1px, rgba(55,53,47,0.06) 1px, transparent 0); background-size: 24px 24px; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 70%, #fff 100%); pointer-events: none; } .hero > .container { position: relative; z-index: 1; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .hero-content { max-width: 500px; } .badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 500; color: var(--text-2); background: var(--bg-alt); border: 1px solid var(--border); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 24px; } .badge-dot { width: 7px; height: 7px; background: #16a34a; border-radius: 50%; box-shadow: 0 0 0 3px rgba(22,163,74,0.18); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,0.18); } 50% { box-shadow: 0 0 0 5px rgba(22,163,74,0.05); } } .highlight { background: linear-gradient(180deg, transparent 60%, #fde68a 60%); padding: 0 4px; font-style: italic; } .hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; } .trust-stars { color: #f59e0b; font-size: 0.95rem; letter-spacing: 0.05em; } .trust-text { font-size: 0.8rem; color: var(--text-2); } .hero-content h1 { margin-bottom: 20px; } .hero-sub { font-size: 1.05rem; color: var(--text-2); margin-bottom: 36px; line-height: 1.75; } .hero-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } /* ── NOTION MOCKUP ────────────────────────────────────────── */ .hero-visual { display: flex; justify-content: center; align-items: center; } .notion-mockup { width: 100%; max-width: 500px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-mockup); overflow: hidden; display: flex; font-size: 0.78rem; font-family: var(--font-sans); } .mockup-sidebar { width: 170px; flex-shrink: 0; background: var(--bg-alt); border-right: 1px solid var(--border); padding: 18px 0 18px; } .sidebar-logo { width: 22px; height: 22px; background: var(--text); border-radius: 4px; margin: 0 14px 16px; } .sidebar-item { display: flex; align-items: center; gap: 8px; padding: 6px 14px; color: var(--text-2); font-size: 0.775rem; cursor: default; transition: background 0.1s; border-radius: 0; } .sidebar-item--active { background: rgba(55,53,47,0.06); color: var(--text); font-weight: 500; } .sidebar-icon { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-right: 6px; opacity: 0.55; flex-shrink: 0; } .sidebar-icon svg { width: 100%; height: 100%; } .sidebar-item--active .sidebar-icon { opacity: 0.9; } .mockup-content { flex: 1; padding: 18px; min-width: 0; } .mockup-breadcrumb { font-size: 0.65rem; color: var(--text-3); margin-bottom: 8px; } .mockup-breadcrumb span:last-child { color: var(--text-2); font-weight: 500; } .mockup-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .mockup-title-icon { display: inline-flex; width: 16px; height: 16px; color: var(--text-2); flex-shrink: 0; } .mockup-title-icon svg { width: 100%; height: 100%; } .mockup-tabs { display: flex; gap: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 6px; } .mockup-tab { font-size: 0.65rem; color: var(--text-2); padding-bottom: 4px; cursor: default; display: inline-flex; align-items: center; gap: 4px; } .mockup-tab svg { width: 11px; height: 11px; flex-shrink: 0; } .mockup-tab--active { color: var(--text); font-weight: 600; border-bottom: 1.5px solid var(--text); margin-bottom: -7px; padding-bottom: 5px; } .mockup-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; } .kpi { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 8px; } .kpi-num { font-size: 1.15rem; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 3px; } .kpi-label { font-size: 0.6rem; color: var(--text-2); line-height: 1.3; } .mockup-table { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .table-head { display: grid; grid-template-columns: 2fr 1.3fr 0.7fr; background: var(--bg-alt); padding: 5px 10px; font-weight: 600; font-size: 0.65rem; color: var(--text-2); gap: 6px; border-bottom: 1px solid var(--border); } .table-row { display: grid; grid-template-columns: 2fr 1.3fr 0.7fr; padding: 6px 10px; gap: 6px; align-items: center; font-size: 0.7rem; color: var(--text); border-bottom: 1px solid var(--border-light); } .table-row:last-child { border-bottom: none; } .tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; font-size: 0.62rem; font-weight: 500; width: fit-content; } .tag--blue { background: #dbeafe; color: #1d4ed8; } .tag--green { background: #dcfce7; color: #15803d; } .tag--orange { background: #fff7ed; color: #c2410c; } /* ── 8. METRICS BAR ───────────────────────────────────────── */ .metrics-bar { padding: 40px 0; border-bottom: 1px solid var(--border); } .metrics-grid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .metric { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 44px; gap: 4px; } .metric strong { font-size: 1.7rem; font-weight: 700; font-family: var(--font-serif); color: var(--text); line-height: 1; } .metric span { font-size: 0.78rem; color: var(--text-2); max-width: 130px; line-height: 1.4; } .metric-divider { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; } /* Atribución de las métricas de la portada. */ .metrics-fuente { margin-top: 18px; text-align: center; font-size: 0.78rem; color: var(--text-3); } /* ── 8b. LOGOS BAR ────────────────────────────────────────── */ .logos-bar { padding: 40px 0 56px; background: var(--bg); } /* Interruptor del bloque: con `hidden` en el
queda oculto y sin animación. Quitar el atributo en el HTML para volver a activarlo. */ .logos-bar[hidden] { display: none; } .logos-strip { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .logos-track { display: flex; width: max-content; animation: logos-scroll 32s linear infinite; will-change: transform; } .logo-item { flex-shrink: 0; width: 160px; height: 44px; margin-right: 72px; display: flex; align-items: center; justify-content: center; filter: grayscale(1) opacity(0.55); transition: filter 0.3s ease; } .logo-item:hover { filter: grayscale(0) opacity(1); } .logo-item svg { height: 40px; width: auto; display: block; } @keyframes logos-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .logos-track { animation: none; } } /* ── 8c. PÁGINAS INTERIORES ─────────────────────────────────── Variantes que usan las páginas distintas de la portada: /precios/, /reservar/, /gracias/, las legales y el 404. Sobre la especificidad: estas variantes se declaran ANTES de las reglas base a las que modifican, así que con una sola clase la base ganaría por orden de aparición. Por eso van con la clase doblada — .solucion-grid.solucion-grid--duo — que sube la especificidad y hace el resultado independiente del orden. La contrapartida es que también ganan a las reglas de móvil del bloque responsive, así que cada variante lleva aquí mismo su propio comportamiento en pantallas estrechas. ──────────────────────────────────────────────────────────── */ /* Cabecera a una columna: el hero de la portada es una rejilla de dos y su .hero-content está limitado a 500px, demasiado estrecho cuando no hay ilustración al lado. */ .page-head { max-width: 760px; } .page-head h1 { margin-bottom: 20px; } /* .solucion-grid es de tres columnas; esta variante es para los bloques de dos, que si no quedan encajados a la izquierda con una tercera columna vacía al lado. */ .solucion-grid.solucion-grid--duo { grid-template-columns: repeat(2, 1fr); } /* En la portada cada .solucion-item lleva un solo párrafo; cuando lleva más de uno hacen falta separarlos. */ .solucion-item p + p { margin-top: 14px; } /* La comparativa de la portada tiene cinco columnas. Esta variante es para tablas de cuatro, que si no dejan una columna vacía. */ .comparativa-table--4 .comparativa-row { grid-template-columns: 1.5fr 1fr 1.2fr 0.8fr; } /* Comportamiento en pantallas estrechas de las dos variantes de arriba. Va aquí y no en el bloque responsive porque su especificidad es mayor y allí no llegaría a aplicarse. */ @media (max-width: 860px) { .comparativa-table--4 .comparativa-row { grid-template-columns: 1.3fr 0.9fr 1fr 0.7fr; } } @media (max-width: 540px) { .solucion-grid.solucion-grid--duo { grid-template-columns: 1fr; } } /* Aviso de cookies. Sólo aparece cuando consent.js tiene configurado un identificador de GA4; hasta entonces nada de esto llega al DOM. Aceptar y rechazar comparten tamaño y posición: la AEPD pide que rechazar no sea más costoso que aceptar. */ .aviso-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; margin: 0 auto; max-width: 640px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .aviso-cookies-texto { flex: 1 1 260px; margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--text-2); } .aviso-cookies-texto a { text-decoration: underline; } .aviso-cookies-botones { display: flex; gap: 10px; flex-shrink: 0; } /* .btn-sm se declara después de .btn-outline y le pisa el fondo, así que sin esto los dos botones salen idénticos y no se distingue rechazar de aceptar. El borde va en el tono fuerte y ambos comparten tamaño: la AEPD pide que rechazar no sea menos accesible que aceptar. */ .aviso-cookies .btn-outline { background: transparent; color: var(--text); border-color: var(--text); } .aviso-cookies .btn-outline:hover { background: var(--bg-alt); } @media (prefers-reduced-motion: no-preference) { .aviso-cookies { animation: aviso-cookies-entrada 0.3s ease-out; } } @keyframes aviso-cookies-entrada { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Aclaración bajo el botón de /reservar/: el calendario de Notion no se puede incrustar (no publican código de embed y no permiten el framing desde otros dominios), así que la reserva se completa en una pestaña nueva y conviene avisar antes del clic. */ .reserva-nota { margin-top: 16px; font-size: 0.875rem; color: var(--text-2); } /* ── 9. PROBLEMA ──────────────────────────────────────────── */ .problema { background: var(--bg-alt); } .problema-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 860px; margin: 0 auto; } .problema-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 32px; transition: box-shadow 0.2s; } .problema-card:hover { box-shadow: var(--shadow-card); } .problema-icon { display: inline-flex; width: 32px; height: 32px; margin-bottom: 16px; color: var(--text); } .problema-icon svg { width: 100%; height: 100%; } .problema-card h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin-bottom: 8px; } .problema-card p { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; } /* ── 10. SOLUCIÓN ─────────────────────────────────────────── */ /* Este párrafo explica la estructura base y es la pieza que hace entender el servicio, así que se destaca como bloque: fondo propio, tipografía mayor y texto en el tono fuerte en lugar del secundario. */ .solucion-base { max-width: 720px; margin: 0 auto 56px; padding: 28px 32px; text-align: left; color: var(--text); font-size: 1.15rem; line-height: 1.65; background: var(--bg-alt); border: 1px solid var(--border); border-left: 4px solid var(--text); border-radius: var(--r-md); } .solucion-base p { font-size: inherit; line-height: inherit; } @media (max-width: 640px) { .solucion-base { padding: 22px 20px; font-size: 1.05rem; } } .solucion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .solucion-item { border-top: 2px solid var(--text); padding-top: 28px; } .solucion-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 12px; } .solucion-item h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; } .solucion-item p { font-size: 0.875rem; color: var(--text-2); line-height: 1.7; } /* ── 11. SERVICIOS ────────────────────────────────────────── */ .servicios { background: var(--bg-alt); } .servicios-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; max-width: 860px; margin: 0 auto; } .servicio-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 18px; } .servicio-card--featured { border-color: var(--text); box-shadow: 0 0 0 2px var(--text); } .servicio-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); background: var(--bg-alt); padding: 4px 10px; border-radius: var(--r-sm); display: inline-block; width: fit-content; } .servicio-label--featured { background: var(--text); color: #fff; } .servicio-card h3 { font-family: var(--font-serif); font-size: 1.15rem; margin: 0; } .servicio-desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; margin: 0; } .servicio-nota { font-size: 0.75rem; color: var(--text-3); font-style: italic; margin: 0; } .pricing-table { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; font-size: 0.78rem; } .pricing-table-head { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--bg-alt); padding: 7px 12px; font-weight: 600; font-size: 0.68rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); } .pricing-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 7px 12px; border-bottom: 1px solid var(--border-light); color: var(--text); } .pricing-row--last { border-bottom: none; background: linear-gradient(90deg, rgba(253,230,138,0.15), transparent); font-weight: 600; } /* En la portada esta tabla vive dentro de una tarjeta estrecha. En /precios/ ocupa el contenedor entero y las cifras quedaban flotando a media columna. Esta variante la acota, alinea a la derecha las dos columnas de importes y usa cifras de ancho fijo para que los decimales caigan en la misma vertical. */ .pricing-table--pagina { max-width: 660px; margin: 0 auto; font-size: 0.95rem; } .pricing-table--pagina .pricing-table-head, .pricing-table--pagina .pricing-row { grid-template-columns: 1.1fr 1fr 1fr; padding: 12px 22px; gap: 16px; } .pricing-table--pagina .pricing-table-head { font-size: 0.7rem; } .pricing-table--pagina .pricing-table-head span + span, .pricing-table--pagina .pricing-row span + span { text-align: right; font-variant-numeric: tabular-nums; } .pricing-table--pagina + .servicio-nota { max-width: 660px; margin: 14px auto 0; text-align: center; } @media (max-width: 560px) { .pricing-table--pagina { font-size: 0.85rem; } .pricing-table--pagina .pricing-table-head, .pricing-table--pagina .pricing-row { padding: 10px 14px; gap: 8px; } } .servicio-lista { display: flex; flex-direction: column; gap: 9px; flex: 1; } .servicio-lista li { font-size: 0.85rem; color: var(--text-2); padding-left: 20px; position: relative; line-height: 1.5; } .servicio-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--text); font-weight: 700; } .servicio-precio { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-direction: column; gap: 3px; } .precio-desde { font-size: 0.7rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; } .precio-valor { font-size: 1.35rem; font-weight: 700; font-family: var(--font-serif); color: var(--text); line-height: 1; } .precio-plus { font-size: 1rem; font-weight: 400; color: var(--text-2); } .precio-rango { font-size: 0.8rem; color: var(--text-2); margin-top: 4px; } /* ── 12. PROCESO ──────────────────────────────────────────── */ .proceso-steps { display: flex; flex-direction: column; max-width: 660px; margin: 0 auto; } .step { display: grid; grid-template-columns: 48px 1fr; gap: 24px; align-items: start; padding: 24px 0; } .step-num { width: 48px; height: 48px; background: var(--text); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0; } .step-content h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin-bottom: 8px; } .step-content p { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; margin-bottom: 8px; } .step-time { font-size: 0.7rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; } .step-connector { margin-left: 23px; width: 2px; height: 20px; background: var(--border); } /* ── 13. EJEMPLOS ─────────────────────────────────────────── */ .ejemplos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border: 2px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .ejemplo-card { background: #fff; padding: 32px; transition: background 0.18s; } .ejemplo-card:hover { background: var(--bg-alt); } .ejemplo-icon { display: inline-flex; width: 28px; height: 28px; margin-bottom: 14px; color: var(--text); } .ejemplo-icon svg { width: 100%; height: 100%; } .ejemplo-card h3 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin-bottom: 8px; } .ejemplo-card p { font-size: 0.85rem; color: var(--text-2); line-height: 1.65; margin-bottom: 16px; } .ejemplo-tags { display: flex; gap: 6px; flex-wrap: wrap; } .ejemplo-tags span { font-size: 0.68rem; font-weight: 500; color: var(--text-2); background: var(--bg-alt); border: 1px solid var(--border); padding: 3px 10px; border-radius: var(--r-sm); } /* ── 14. TESTIMONIOS ──────────────────────────────────────── */ .testimonios { background: var(--bg-alt); } .testimonios-carousel { position: relative; } .testimonios-viewport { overflow: hidden; padding: 4px 0 8px; } .testimonios-viewport:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: var(--r-md); } .testimonios-track { display: flex; gap: 20px; transform: translate3d(0, 0, 0); will-change: transform; cursor: grab; touch-action: pan-y; } .testimonios-track.is-grabbing { cursor: grabbing; } .testimonios-track .testimonio { flex: 0 0 calc((100% - 60px) / 4); user-select: none; } .carousel-controls { display: contents; } .carousel-dots { display: none; } .carousel-arrow { position: absolute; top: 50%; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 3; opacity: 0; visibility: hidden; transform: translateY(-50%); box-shadow: var(--shadow-card); transition: opacity .2s ease, visibility .2s ease, background .15s, border-color .15s; } .testimonios-carousel:hover .carousel-arrow, .testimonios-carousel:focus-within .carousel-arrow { opacity: 1; visibility: visible; } .carousel-arrow:hover { background: var(--bg-alt); border-color: var(--text-3); } .carousel-arrow:active { transform: translateY(-50%) scale(0.94); } .carousel-arrow svg { width: 18px; height: 18px; } .carousel-arrow--prev { left: -20px; } .carousel-arrow--next { right: -20px; } @media (max-width: 860px) { .carousel-arrow--prev { left: 4px; } .carousel-arrow--next { right: 4px; } } .testimonio { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 28px; display: flex; flex-direction: column; gap: 0; } .testimonio p { font-size: 0.9rem; color: var(--text); line-height: 1.7; font-style: italic; font-family: var(--font-serif); margin-bottom: 20px; flex: 1; } .testimonio footer { border-top: 1px solid var(--border-light); padding-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .testimonio footer strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); font-style: normal; } .testimonio footer span { font-size: 0.75rem; color: var(--text-2); font-style: normal; } .testimonio-tag { display: inline-block; margin-top: 8px; padding: 3px 10px; font-size: 0.7rem !important; color: var(--text-2) !important; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-pill); letter-spacing: 0.02em; } /* ── 14b. AUTOR ───────────────────────────────────────────── */ .autor { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--section) 0; } .autor-inner { display: grid; grid-template-columns: 200px 1fr; gap: 64px; align-items: start; max-width: 860px; margin: 0 auto; } .autor-photo-wrap { position: sticky; top: 96px; } .autor-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: center 20%; display: block; border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--border), var(--shadow-card); background: var(--bg-alt); } .autor-photo--mirror { transform: scaleX(-1); } .autor-content .section-tag { margin-bottom: 8px; } .autor-content h2 { font-size: 2rem; margin-bottom: 24px; } .autor-bio { color: var(--text-2); line-height: 1.75; margin-bottom: 16px; font-size: 1rem; } .autor-bio:last-of-type { margin-bottom: 28px; } .autor-linkedin { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; color: var(--text-2); text-decoration: none; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 8px 16px; transition: color .2s, border-color .2s; } .autor-linkedin:hover { color: var(--text); border-color: var(--text-3); } /* ── 15. FAQ ──────────────────────────────────────────────── */ .faq-list { max-width: 700px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item:last-child { border-bottom: none; } .faq-item summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-size: 0.925rem; font-weight: 500; cursor: pointer; list-style: none; color: var(--text); transition: background 0.12s; gap: 16px; user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.3rem; font-weight: 300; color: var(--text-2); flex-shrink: 0; line-height: 1; } .faq-item[open] > summary { background: var(--bg-alt); } .faq-item[open] > summary::after { content: "−"; } .faq-item summary:hover { background: var(--bg-alt); } .faq-answer { padding: 16px 24px 24px; font-size: 0.875rem; color: var(--text-2); line-height: 1.75; background: var(--bg-alt); border-top: 1px solid var(--border); } /* ── 16. CTA FINAL ────────────────────────────────────────── */ .cta-final { background: var(--bg-dark); color: #fff; text-align: center; } .cta-content { max-width: 580px; margin: 0 auto; } .cta-final .section-tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.15); } .cta-final h2 { color: #fff; margin-bottom: 20px; } .cta-final > .container > .cta-content > p { color: rgba(255,255,255,0.65); margin-bottom: 36px; } .cta-final .btn-primary { background: #fff; color: var(--bg-dark); border-color: #fff; } .cta-final .btn-primary:hover { background: #e8e7e4; border-color: #e8e7e4; } .cta-note { margin-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.4); margin-bottom: 0; } .cta-note a { color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .cta-note a:hover { color: #fff; } /* ── 17. FOOTER ───────────────────────────────────────────── */ .footer { border-top: 1px solid var(--border); padding-top: 48px; } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-bottom: 48px; flex-wrap: wrap; } .footer-brand .logo { margin-bottom: 10px; display: inline-block; } .footer-brand p { font-size: 0.82rem; color: var(--text-2); max-width: 240px; line-height: 1.55; } .footer-nav { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; } .footer-nav a { font-size: 0.82rem; color: var(--text-2); transition: color 0.15s; } .footer-nav a:hover { color: var(--text); } .footer-bottom { border-top: 1px solid var(--border); padding: 18px 0; } .footer-bottom p { font-size: 0.78rem; color: var(--text-3); text-align: center; } /* Línea legal del pie: aviso legal, privacidad y cookies tienen que ser accesibles desde cualquier página. */ .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 20px; } .footer-legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; } .footer-legal a { font-size: 0.78rem; color: var(--text-3); transition: color 0.15s; } .footer-legal a:hover { color: var(--text-2); } /* ── PÁGINAS LEGALES ──────────────────────────────────────── */ .legal { max-width: 720px; } .legal h2 { font-size: 1.35rem; margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--border); } .legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .legal h3 { font-size: 1rem; margin: 24px 0 8px; } .legal p { color: var(--text-2); margin-bottom: 14px; } .legal p strong { color: var(--text); font-weight: 500; } .legal ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; color: var(--text-2); } .legal li { margin-bottom: 8px; line-height: 1.7; } .legal a { text-decoration: underline; } /* Ficha de datos identificativos del aviso legal. */ .legal-datos { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 0 0 24px; padding: 22px 24px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 0.9rem; } .legal-datos dt { font-weight: 500; color: var(--text); } .legal-datos dd { color: var(--text-2); } @media (max-width: 560px) { .legal-datos { grid-template-columns: 1fr; gap: 2px; } .legal-datos dd { margin-bottom: 12px; } } /* Tabla de cookies: se desplaza sola en pantallas estrechas. */ .legal-tabla { overflow-x: auto; margin: 0 0 20px; } .legal-tabla table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.85rem; } .legal-tabla th, .legal-tabla td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; } .legal-tabla th { background: var(--bg-alt); color: var(--text); font-weight: 500; white-space: nowrap; } /* ── CASO DE ÉXITO ────────────────────────────────────────── */ .caso { padding: var(--section) 0; } .caso-card { background: linear-gradient(135deg, #fffbea 0%, #fef3c7 100%); border: 1px solid #fde68a; border-radius: var(--r-lg); padding: 56px 48px; max-width: 920px; margin: 0 auto; position: relative; overflow: hidden; } .caso-card::before { content: "\201C"; position: absolute; top: -40px; right: 30px; font-family: var(--font-serif); font-size: 14rem; color: rgba(180,140,30,0.08); line-height: 1; pointer-events: none; } .caso-content { position: relative; z-index: 1; } .caso-content .section-tag { background: rgba(180,140,30,0.08); border-color: rgba(180,140,30,0.2); color: #a07d33; } .caso-content h2 { font-style: italic; max-width: 720px; margin: 0 0 16px; font-size: clamp(1.3rem, 2.5vw, 1.8rem); } .caso-meta { font-size: 0.85rem; color: var(--text-2); margin-bottom: 32px; } .caso-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 32px 0 36px; padding: 24px 0; border-top: 1px solid rgba(180,140,30,0.2); border-bottom: 1px solid rgba(180,140,30,0.2); } .caso-stat { display: flex; flex-direction: column; gap: 4px; } .caso-stat strong { font-size: 1.9rem; font-weight: 700; font-family: var(--font-serif); color: var(--text); line-height: 1; } .caso-stat span { font-size: 0.78rem; color: var(--text-2); line-height: 1.4; } /* ── COMPARATIVA ───────────────────────────────────────────── */ .comparativa { background: var(--bg-alt); } .comparativa-table { max-width: 960px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .comparativa-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; border-bottom: 1px solid var(--border); } .comparativa-row:last-child { border-bottom: none; } .comparativa-row > div { padding: 18px 20px; font-size: 0.875rem; color: var(--text-2); display: flex; align-items: center; } .comparativa-row > div:first-child { font-weight: 500; color: var(--text); } .comparativa-row--head > div { background: var(--bg-alt); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); border-bottom: 1px solid var(--border); } .cell-no { color: #b91c1c; font-weight: 600; } .cell-mid { color: #a16207; font-weight: 500; } .cell-yes { color: #15803d; font-weight: 600; } .comparativa-highlight { background: linear-gradient(180deg, rgba(253,230,138,0.15) 0%, rgba(253,230,138,0.25) 100%); position: relative; } .comparativa-row--head .comparativa-highlight { background: var(--text) !important; color: #fff !important; } /* ── 18. SCROLL ANIMATIONS ────────────────────────────────── */ .fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* ── 19. RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 1024px) { .servicios-grid { grid-template-columns: 1fr 1fr; } .servicios-grid .servicio-card:first-child { grid-column: span 2; max-width: 440px; margin: 0 auto; width: 100%; } .solucion-grid { gap: 36px; } .testimonios-track .testimonio { flex: 0 0 calc((100% - 40px) / 3); } } @media (max-width: 860px) { :root { --section: 72px; } .nav-links { display: none; position: fixed; top: 60px; left: 0; right: 0; background: #fff; flex-direction: column; gap: 0; padding: 8px 0; border-bottom: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .nav-links.open { display: flex; } .nav-links a { padding: 14px var(--gutter); font-size: 0.95rem; border-bottom: 1px solid var(--border-light); } .nav-toggle { display: flex; } .hero-inner { grid-template-columns: 1fr; gap: 40px; } .hero-content { max-width: 100%; } .hero-visual { justify-content: flex-start; } .notion-mockup { font-size: 0.72rem; } .mockup-sidebar { width: 140px; } .metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .metric { padding: 16px 20px; } .metric-divider { display: none; } .caso-card { padding: 40px 28px; } .caso-stats { grid-template-columns: 1fr 1fr; gap: 20px; } .caso-content h2 { font-size: 1.3rem; } .comparativa-table { font-size: 0.78rem; } .comparativa-row { grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 0.9fr; } .comparativa-row > div { padding: 12px 8px; font-size: 0.72rem; } .comparativa-row--head > div { font-size: 0.62rem; padding: 10px 6px; } .autor-inner { grid-template-columns: 1fr; gap: 36px; } .autor-photo-wrap { position: static; display: flex; justify-content: center; } .autor-content { text-align: left; } .problema-grid { grid-template-columns: 1fr; } .solucion-grid { grid-template-columns: 1fr; gap: 28px; } .servicios-grid { grid-template-columns: 1fr; } .servicios-grid .servicio-card:first-child { grid-column: span 1; max-width: 100%; } .ejemplos-grid { grid-template-columns: 1fr 1fr; } .testimonios-track .testimonio { flex: 0 0 100%; } .footer-inner { flex-direction: column; gap: 28px; } } @media (max-width: 540px) { :root { --section: 56px; --gutter: 16px; } .hero-ctas { flex-direction: column; align-items: flex-start; } .notion-mockup { max-width: 100%; } .mockup-sidebar { display: none; } .ejemplos-grid { grid-template-columns: 1fr; } .metrics-grid { grid-template-columns: 1fr; } .caso-stats { grid-template-columns: 1fr 1fr; } .servicios-grid { grid-template-columns: 1fr; } .servicio-card--featured { order: -1; } }