/* ============================================================================ Seguridad y Privacidad — página pública (informativa, estática) ---------------------------------------------------------------------------- Página standalone: NO carga el shell admin (app.css). Se auto-contiene con los tokens canónicos teal del sistema (--primary #199c82, CLAUDE.md) para coherencia de marca sin arrastrar ~8k líneas de CSS del panel a una landing pública. Namespace `sp-` para aislar de cualquier otro CSS. Identidad: teal clínico + tipografía display Fraunces (misma familia que la portada /demo) sobre Inter para el cuerpo. Diseño calmo, serio, confiable — sin jerga de "hacker", pensado para psicólogas no técnicas. ============================================================================ */ :root { /* Marca (teal canónico, anclado — no depende del branding global que podría ser azul y descuadraría). */ --sp-primary: #199c82; --sp-primary-600: #168a73; --sp-primary-700: #116d5b; --sp-primary-050: #e6f7f3; --sp-primary-rgb: 25, 156, 130; /* Neutrales (slate del sistema). */ --sp-ink: #0f172a; --sp-ink-2: #334155; --sp-muted: #64748b; --sp-faint: #94a3b8; --sp-line: #e6ecec; --sp-bg: #f5faf8; --sp-card: #ffffff; /* Forma. */ --sp-radius: 18px; --sp-radius-md: 14px; --sp-radius-sm: 10px; /* Elevación (suave, sin filtros caros). */ --sp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04); --sp-shadow-md: 0 10px 30px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04); --sp-shadow-lg: 0 26px 64px rgba(16, 109, 91, .12), 0 6px 16px rgba(15, 23, 42, .05); --sp-maxw: 1140px; /* Tipografía. */ --sp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sp-display: 'Fraunces', 'Georgia', 'Times New Roman', serif; /* Escala fluida. */ --sp-fs-sm: clamp(0.86rem, 0.82rem + 0.18vw, 0.95rem); --sp-fs-base: clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem); --sp-fs-lead: clamp(1.08rem, 1.00rem + 0.42vw, 1.28rem); --sp-fs-h3: clamp(1.12rem, 1.04rem + 0.40vw, 1.32rem); --sp-fs-h2: clamp(1.5rem, 1.28rem + 1.05vw, 2.15rem); --sp-fs-h1: clamp(1.95rem, 1.5rem + 2.4vw, 3.15rem); } /* ─── Reset acotado a la página ────────────────────────────────────────── */ .sp-page *, .sp-page *::before, .sp-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .sp-page { margin: 0; /* reset del margen por defecto del (evita franja alrededor del footer oscuro) */ font-family: var(--sp-font); color: var(--sp-ink); background: var(--sp-bg); line-height: 1.65; font-size: var(--sp-fs-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; /* red de seguridad anti-overflow horizontal */ } .sp-page img { max-width: 100%; display: block; } .sp-page svg { display: block; } .sp-page a { color: var(--sp-primary-700); text-decoration: none; } .sp-page a:hover { text-decoration: underline; } .sp-container { width: 100%; max-width: var(--sp-maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); } /* Skip-link accesible (oculto hasta foco por teclado). */ .sp-skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--sp-primary-700); color: #fff; padding: 10px 16px; border-radius: var(--sp-radius-sm); font-weight: 600; transition: top 160ms ease; } .sp-skip:focus { top: 12px; text-decoration: none; } /* ─── Barra de navegación ──────────────────────────────────────────────── */ .sp-nav { background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--sp-line); backdrop-filter: saturate(1.4) blur(6px); -webkit-backdrop-filter: saturate(1.4) blur(6px); } /* Visitante desde la DEMO: barra fija para que "Volver a la demo" esté siempre a la vista en esta página larga (no queda varado al hacer scroll). */ .sp-nav--demo { position: sticky; top: 0; z-index: 50; } /* Texto/ícono BLANCO en el botón teal "Volver a la demo": `.sp-page a` (línea ~80) le gana en especificidad al `color:#fff` de `.sp-btn--primary` y dejaba el texto en teal oscuro (teal sobre teal, bajo contraste). Lo forzamos aquí. */ .sp-nav--demo .sp-btn--primary, .sp-nav--demo .sp-btn--primary:hover, .sp-nav--demo .sp-btn--primary svg { color: #fff; stroke: #fff; } .sp-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 68px; padding-block: 12px; } .sp-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; } .sp-brand__logo { width: 42px; height: 42px; flex: none; border-radius: 13px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--sp-primary), var(--sp-primary-700)); color: #fff; box-shadow: 0 8px 18px rgba(var(--sp-primary-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .25); } .sp-brand__logo img { width: 100%; height: 100%; object-fit: cover; } .sp-brand__logo svg { width: 22px; height: 22px; } .sp-brand__name { font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; color: var(--sp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; /* touch target WCAG 2.5.5 */ padding: 11px 20px; border-radius: 999px; font-family: inherit; font-size: var(--sp-fs-sm); font-weight: 600; line-height: 1; cursor: pointer; border: 1.5px solid transparent; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; white-space: nowrap; } .sp-btn:hover { text-decoration: none; } .sp-btn:focus-visible { outline: 3px solid rgba(var(--sp-primary-rgb), .35); outline-offset: 2px; } .sp-btn--primary { background: var(--sp-primary); color: #fff; box-shadow: 0 8px 20px rgba(var(--sp-primary-rgb), .28); } .sp-btn--primary:hover { background: var(--sp-primary-600); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--sp-primary-rgb), .34); } .sp-btn--ghost { background: #fff; color: var(--sp-primary-700); border-color: rgba(var(--sp-primary-rgb), .35); } .sp-btn--ghost:hover { background: var(--sp-primary-050); transform: translateY(-1px); } .sp-btn--lg { min-height: 50px; padding: 14px 26px; font-size: var(--sp-fs-base); } /* ─── Hero ─────────────────────────────────────────────────────────────── */ .sp-hero { position: relative; overflow: hidden; background: radial-gradient(1200px 520px at 50% -8%, rgba(var(--sp-primary-rgb), .16), transparent 62%), linear-gradient(180deg, #ffffff 0%, var(--sp-bg) 100%); border-bottom: 1px solid var(--sp-line); } .sp-hero__inner { text-align: center; padding-block: clamp(48px, 8vw, 96px); max-width: 780px; margin-inline: auto; } .sp-hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(var(--sp-primary-rgb), .1); border: 1px solid rgba(var(--sp-primary-rgb), .22); color: var(--sp-primary-700); font-size: var(--sp-fs-sm); font-weight: 600; margin-bottom: 26px; } .sp-hero__badge svg { width: 18px; height: 18px; flex: none; } .sp-hero__title { font-family: var(--sp-display); font-optical-sizing: auto; font-weight: 600; font-size: var(--sp-fs-h1); line-height: 1.08; letter-spacing: -.015em; color: var(--sp-ink); margin-bottom: 18px; /* Defensa: el título incluye el systemName dinámico ({{ $systemName }}). Un nombre largo (o un idioma sin espacios) nunca debe desbordar el viewport en móvil — que parta la palabra antes que salirse. */ overflow-wrap: anywhere; word-break: break-word; } .sp-hero__title span { color: var(--sp-primary-700); } .sp-hero__subtitle { font-size: var(--sp-fs-lead); color: var(--sp-ink-2); max-width: 640px; margin-inline: auto; text-align: justify; text-align-last: center; /* última línea centrada (coherente con el hero) */ hyphens: auto; -webkit-hyphens: auto; } .sp-hero__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 30px; } .sp-hero__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sp-fs-sm); font-weight: 500; color: var(--sp-ink-2); } .sp-hero__trust svg { width: 18px; height: 18px; color: var(--sp-primary); flex: none; } /* ─── Sección genérica ─────────────────────────────────────────────────── */ .sp-section { padding-block: clamp(44px, 7vw, 84px); } .sp-section--tint { background: linear-gradient(180deg, #ffffff, #f2f8f6); border-block: 1px solid var(--sp-line); } .sp-section__head { max-width: 720px; margin: 0 auto clamp(30px, 5vw, 50px); text-align: center; } /* Eyebrow como chip-pill (gemelo de `.trm-doc__eyebrow`) → hermana los documentos. */ .sp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-primary-700); background: var(--sp-primary-050); border: 1px solid rgba(var(--sp-primary-rgb), .22); padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; } .sp-h2 { font-family: var(--sp-display); font-optical-sizing: auto; font-weight: 600; font-size: var(--sp-fs-h2); line-height: 1.15; letter-spacing: -.01em; color: var(--sp-ink); } .sp-section__intro { margin-top: 14px; font-size: var(--sp-fs-lead); color: var(--sp-ink-2); } /* ─── Compromiso (lead) ────────────────────────────────────────────────── */ .sp-lead { max-width: 860px; margin-inline: auto; background: var(--sp-card); border: 1px solid var(--sp-line); border-left: 4px solid var(--sp-primary); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-md); padding: clamp(24px, 4vw, 40px); text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .sp-lead p + p { margin-top: 16px; } .sp-lead strong { color: var(--sp-ink); font-weight: 700; } /* ─── Grid de medidas ──────────────────────────────────────────────────── */ .sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2.4vw, 24px); } .sp-card { background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: clamp(22px, 3vw, 30px); box-shadow: var(--sp-shadow-sm); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; min-width: 0; } .sp-card:hover { transform: translateY(-3px); box-shadow: var(--sp-shadow-md); border-color: rgba(var(--sp-primary-rgb), .35); } .sp-card__icon { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, rgba(var(--sp-primary-rgb), .16), rgba(var(--sp-primary-rgb), .06)); color: var(--sp-primary-700); border: 1px solid rgba(var(--sp-primary-rgb), .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); margin-bottom: 18px; } .sp-card__icon svg { width: 26px; height: 26px; } .sp-card__title { font-size: var(--sp-fs-h3); font-weight: 700; letter-spacing: -.01em; color: var(--sp-ink); margin-bottom: 9px; } .sp-card__text { color: var(--sp-ink-2); font-size: var(--sp-fs-base); text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* ─── Panel de cumplimiento normativo ──────────────────────────────────── */ .sp-legal { max-width: 940px; margin-inline: auto; background: radial-gradient(600px 240px at 100% 0%, rgba(var(--sp-primary-rgb), .1), transparent 60%), var(--sp-card); border: 1px solid rgba(var(--sp-primary-rgb), .25); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-lg); padding: clamp(26px, 4vw, 44px); } .sp-legal__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .sp-legal__head svg { width: 30px; height: 30px; color: var(--sp-primary-700); flex: none; } .sp-legal__head h3 { font-family: var(--sp-display); font-weight: 600; font-size: var(--sp-fs-h3); color: var(--sp-ink); } .sp-legal p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .sp-legal p + p { margin-top: 15px; } .sp-legal strong { color: var(--sp-ink); } .sp-note { margin-top: 22px; padding: 16px 18px; border-radius: var(--sp-radius-sm); background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .28); color: #7c4a03; font-size: var(--sp-fs-sm); display: flex; gap: 12px; } .sp-note svg { width: 20px; height: 20px; flex: none; color: #b45309; margin-top: 2px; } /* ─── Derechos ─────────────────────────────────────────────────────────── */ .sp-rights { max-width: 860px; margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; list-style: none; } .sp-rights li { display: flex; align-items: flex-start; gap: 13px; background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-md); padding: 18px 20px; box-shadow: var(--sp-shadow-sm); } .sp-rights__ic { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--sp-primary-050); color: var(--sp-primary-700); display: flex; align-items: center; justify-content: center; } .sp-rights__ic svg { width: 20px; height: 20px; } .sp-rights b { display: block; color: var(--sp-ink); font-size: var(--sp-fs-base); margin-bottom: 2px; } .sp-rights span { color: var(--sp-muted); font-size: var(--sp-fs-sm); } .sp-rights__foot { max-width: 860px; margin: 22px auto 0; text-align: center; color: var(--sp-muted); font-size: var(--sp-fs-sm); } /* ─── Contacto (CTA) ───────────────────────────────────────────────────── */ .sp-contact { max-width: 940px; margin-inline: auto; text-align: center; background: linear-gradient(150deg, var(--sp-primary-700), var(--sp-primary)); color: #fff; border-radius: var(--sp-radius); box-shadow: var(--sp-shadow-lg); padding: clamp(34px, 5vw, 56px); position: relative; overflow: hidden; } .sp-contact::after { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 260px at 15% 0%, rgba(255, 255, 255, .16), transparent 60%); pointer-events: none; } .sp-contact > * { position: relative; z-index: 1; } .sp-contact h2 { font-family: var(--sp-display); font-weight: 600; font-size: var(--sp-fs-h2); margin-bottom: 12px; } .sp-contact p { color: rgba(255, 255, 255, .9); font-size: var(--sp-fs-lead); max-width: 560px; margin: 0 auto 26px; } .sp-contact .sp-btn--primary { background: #fff; color: var(--sp-primary-700); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); } .sp-contact .sp-btn--primary:hover { background: #f0fbf8; } .sp-contact__mail { margin-top: 18px; font-size: var(--sp-fs-sm); color: rgba(255, 255, 255, .82); } .sp-contact__mail a { color: #fff; text-decoration: underline; font-weight: 600; } /* ─── Footer ───────────────────────────────────────────────────────────── */ .sp-footer { background: var(--sp-ink); color: #cbd5e1; padding-block: clamp(28px, 4vw, 40px); } .sp-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .sp-footer__brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; } .sp-footer__brand svg { width: 22px; height: 22px; color: var(--sp-primary); } .sp-footer__meta { font-size: var(--sp-fs-sm); color: #94a3b8; } .sp-footer a { color: #e2e8f0; } .sp-footer__links { display: inline-flex; gap: 20px; flex-wrap: wrap; } /* ─── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 768px) { .sp-footer__inner { flex-direction: column; text-align: center; } } @media (max-width: 480px) { .sp-nav__inner { min-height: 60px; } .sp-brand__logo { width: 38px; height: 38px; border-radius: 11px; } .sp-brand__name { font-size: 1rem; } .sp-btn { padding: 11px 16px; } /* En móvil chico el nombre de marca puede ceder espacio al botón. */ .sp-nav .sp-brand__name { max-width: 42vw; } } /* Respeto por usuarios que prefieren menos movimiento. */ @media (prefers-reduced-motion: reduce) { .sp-page * { transition: none !important; animation: none !important; } .sp-btn:hover, .sp-card:hover { transform: none; } }