/* =============================================================================
 * public-landing.css — Portada (/): heroe, mockup de movil, features, CTA final.
 *
 * EXTERNALIZADO desde el bloque `<style>` de `templates/public/landing.html` (ola F1 del
 * endurecimiento CSP, 2026-07-26). Vivía inline en la plantilla, lo que obligaba
 * a `style-src 'unsafe-inline'` en la Content-Security-Policy: con esa concesión
 * un XSS podía inyectar CSS y exfiltrar datos por selectores + `url()`. Ahora la
 * hoja se sirve de `/static/css/` (mismo origen) y la CSP puede exigir
 * `style-src-elem 'self'` sin ninguna excepción.
 *
 * REGLA: no volver a meter `<style>` en la plantilla — el test
 * `crates/web/tests/csp_no_inline_style_test.rs` lo rompe a propósito.
 * El ORDEN de carga importa: este `<link>` va donde estaba el `<style>`, para
 * que la cascada (quién gana sobre `brand.css`) no cambie de aspecto.
 * ========================================================================== */
/* ── Layout general de la portada ─────────────────────────────────────── */
.lp { --lp-gap: clamp(3rem, 6vw, 5.5rem); }
.lp-section { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

/* ── HERO ─────────────────────────────────────────────────────────────── */
/* Hero contenido en un PANEL redondeado (mismo radio --radius-lg que features
   y CTA): antes era una banda a sangre con esquinas rectas; ahora es una caja
   con márgenes a los lados. overflow:hidden recorta los blobs de degradado a
   las esquinas redondeadas. */
.lp-hero {
  position: relative; overflow: hidden;
  max-width: 1180px; margin: 1.25rem auto 2rem;
  border-radius: var(--radius-lg);
  /* Sin borde a propósito: solo el tinte coral suave, para que el panel se
     difumine con el fondo en vez de marcar una línea dura. */
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 6rem);
}
/* Manchas de degradado coral de fondo (decorativas, suben el "calor" sin
   imágenes pesadas). Animadas con deriva lenta. */
.lp-hero::before, .lp-hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: 0.45; z-index: 0; pointer-events: none;
}
.lp-hero::before {
  width: 38rem; height: 38rem; top: -14rem; right: -10rem;
  background: radial-gradient(circle at 30% 30%, var(--primary), transparent 70%);
  animation: lp-drift 18s ease-in-out infinite alternate;
}
.lp-hero::after {
  width: 30rem; height: 30rem; bottom: -16rem; left: -12rem;
  background: radial-gradient(circle at 50% 50%, var(--premium), transparent 70%);
  animation: lp-drift 22s ease-in-out infinite alternate-reverse;
}
.lp-hero-grid {
  position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1.05fr 0.95fr; align-items: center;
}
.lp-hero-text { min-width: 0; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-text);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 0.4rem 0.8rem; border-radius: 999px;
}
/* Logo animado "se une / se desune": los dos círculos del símbolo (dos
   personas) se separan y vuelven a juntarse en bucle; la onda+brillo coral
   pulsan con el reencuentro. Metáfora de la marca: dos que conectan. */
.lp-logo { height: 22px; width: auto; display: block; overflow: visible; color: var(--text); }
.lp-logo-hero { height: 56px; margin: 0 0 1rem; }
.lp-logo .ring-l { animation: lp-ring-l 4.5s ease-in-out infinite; }
.lp-logo .ring-r { animation: lp-ring-r 4.5s ease-in-out infinite; }
.lp-logo .wave, .lp-logo .glow { animation: lp-meet 4.5s ease-in-out infinite; }
@keyframes lp-ring-l { 0%,100% { transform: translateX(0); } 45% { transform: translateX(-40px); } }
@keyframes lp-ring-r { 0%,100% { transform: translateX(0); } 45% { transform: translateX(40px); } }
/* Onda y brillo: fuertes cuando los círculos están juntos (reposo), tenues al
   separarse. */
@keyframes lp-meet { 0%,100% { opacity: 1; } 45% { opacity: 0.15; } }
.lp-hero-text h1 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.05;
  font-size: clamp(2.3rem, 5.5vw, 3.8rem); margin: 1rem 0 0.75rem; color: var(--text);
}
.lp-hero-text .lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--text-soft);
  max-width: 34ch; margin: 0 0 1.75rem; line-height: 1.6;
}
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
.lp-cta-row .btn { padding: 0.85rem 1.5rem; font-size: 1rem; }
/* Vuelta al login desde la portada. Antes la landing SOLO ofrecía registro:
   quien ya tenía cuenta no tenía ningún acceso salvo el (oculto) del header.
   Se le da peso tipográfico real —subrayado, color de marca, 1rem— en vez de
   un enlace gris pequeño, para que compita de verdad con el CTA de registro. */
.lp-cta-alt { margin: -0.9rem 0 1.75rem; font-size: 1rem; color: var(--text-soft); }
.lp-cta-alt a { color: var(--primary-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lp-cta-alt a:hover { color: var(--primary-text); }
/* En la banda final (fondo coral) el enlace debe leerse en blanco. */
.lp-final-inner .lp-cta-alt { color: rgba(255,255,255,0.92); margin: 1.1rem 0 0; }
.lp-final-inner .lp-cta-alt a { color: #fff; }
/* Tira de "garantías": iconos + título de cada principio (claves traducidas). */
.lp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin: 0; padding: 0; }
.lp-trust li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--text-soft); font-weight: 500; }
.lp-trust svg { width: 20px; height: 20px; color: var(--success-text); flex: none; }

/* ── Mockup de móvil con la tarjeta del feed ──────────────────────────── */
.lp-hero-visual { display: flex; justify-content: center; }
.lp-phone {
  position: relative; width: clamp(240px, 30vw, 310px); aspect-ratio: 9 / 19;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 38px; padding: 12px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.45), 0 8px 20px -10px rgba(0,0,0,0.25);
  animation: lp-float 6s ease-in-out infinite;
}
.lp-phone::before { /* muesca superior (notch) */
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 18px; background: var(--surface-2); border-radius: 0 0 12px 12px; z-index: 3;
}
.lp-cards { position: relative; width: 100%; height: 100%; }
.lp-card {
  position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.lp-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tarjeta de detrás: ligeramente girada y atenuada → sensación de "pila". */
.lp-card-back { transform: rotate(-5deg) scale(0.96); filter: brightness(0.9); }
/* Tarjeta de delante: hace un "nudge" tipo swipe-like en bucle (sutil). */
.lp-card-front { animation: lp-swipe 7s ease-in-out infinite; transform-origin: bottom center; }
.lp-card-grad { /* degradado inferior para legibilidad del nombre */
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(20,16,14,0.82), rgba(20,16,14,0.15) 60%, transparent);
}
.lp-chip {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--primary); color: #fff;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.72rem;
  padding: 0.3rem 0.6rem; border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4); animation: lp-pulse 2.6s ease-in-out infinite;
}
.lp-chip svg { width: 13px; height: 13px; }
.lp-card-meta {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; color: #fff;
}
.lp-card-meta strong { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; display: block; line-height: 1.15; }
.lp-card-meta span { font-size: 0.85rem; opacity: 0.9; display: inline-flex; align-items: center; gap: 0.3rem; }
.lp-card-meta span svg { width: 13px; height: 13px; }
/* Corazón que "salta" al ritmo del swipe (decorativo). */
.lp-like {
  position: absolute; top: 42%; right: 18px; z-index: 4; color: var(--primary);
  opacity: 0; transform: scale(0.4) rotate(-12deg); animation: lp-like 7s ease-in-out infinite;
}
.lp-like svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }

/* ── Sección "por qué" (features con iconos) ──────────────────────────── */
.lp-why { padding: var(--lp-gap) 0; }
.lp-why-head { text-align: center; max-width: 40ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.lp-why-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 0.5rem; }
.lp-why-head p { color: var(--text-soft); margin: 0; font-size: 1.05rem; }
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.lp-feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.75rem; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.lp-feature:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0,0,0,0.4); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.lp-feat-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 1rem; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.lp-feat-icon svg { width: 26px; height: 26px; }
.lp-feature h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin: 0 0 0.5rem; }
.lp-feature p { color: var(--text-soft); margin: 0; line-height: 1.6; font-size: 0.95rem; }

/* ── CTA final ────────────────────────────────────────────────────────── */
.lp-final { padding: 0 0 var(--lp-gap); }
.lp-final-inner {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, var(--primary), var(--premium));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
.lp-final-inner h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3.5vw, 2.5rem); margin: 0 0 0.75rem; color: #fff; }
.lp-final-inner p { max-width: 46ch; margin: 0 auto 1.75rem; opacity: 0.95; line-height: 1.6; }
.lp-final-inner .btn { background: #fff; color: var(--primary-text); padding: 0.9rem 2rem; font-size: 1.05rem; font-weight: 700; }
.lp-final-inner .btn:hover { background: var(--surface); }

/* Entrada elegante (fade + subida), escalonada. */
.lp-rise { opacity: 0; transform: translateY(18px); animation: lp-rise 700ms cubic-bezier(.2,.7,.2,1) forwards; }
.lp-d1 { animation-delay: 80ms; } .lp-d2 { animation-delay: 200ms; }
.lp-d3 { animation-delay: 320ms; } .lp-d4 { animation-delay: 440ms; }

@keyframes lp-rise { to { opacity: 1; transform: none; } }
@keyframes lp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes lp-drift { from { transform: translate(0,0) scale(1); } to { transform: translate(2rem,1.5rem) scale(1.12); } }
@keyframes lp-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* Swipe-like: reposo, pequeño giro a la derecha (like) y vuelta. */
@keyframes lp-swipe {
  0%, 60%, 100% { transform: rotate(0) translateX(0); }
  72% { transform: rotate(7deg) translateX(10px); }
  84% { transform: rotate(0) translateX(0); }
}
@keyframes lp-like {
  0%, 60%, 100% { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  72% { opacity: 1; transform: scale(1.1) rotate(-12deg); }
  84% { opacity: 0; transform: scale(1.2) rotate(-12deg); }
}

/* Responsive: una columna en móvil, móvil-mockup debajo del texto. */
@media (max-width: 860px) {
  /* En móvil el panel del hero conserva un margen lateral (si no, con margin
     auto tocaría los bordes y volvería a verse "a sangre"). */
  .lp-hero { margin-left: 0.9rem; margin-right: 0.9rem; }
  .lp-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .lp-hero-text .lead { margin-left: auto; margin-right: auto; }
  .lp-logo-hero { margin-left: auto; margin-right: auto; }
  .lp-cta-row, .lp-trust { justify-content: center; }
  .lp-features { grid-template-columns: 1fr; }
}

/* ── Vida extra (mejoras 2026-07-19) ─────────────────────────────────────
   Movimiento sutil y con intención, fiel al carácter cálido/calmado. Todo
   degrada con gracia: sin JS o con "menos movimiento", el contenido se ve
   igual y quieto. */

/* Header pegajoso SOLO en la portada (este <style> solo se sirve aquí) + una
   sombra suave que aparece al desplazar. El JS (landing-life.js) añade
   .is-scrolled; sin JS el header simplemente no proyecta sombra. */
header.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow .28s ease, border-color .28s ease;
}
header.site-header.is-scrolled {
  box-shadow: 0 6px 24px -12px rgba(0,0,0,0.28); border-bottom-color: transparent;
}

/* Reveal al hacer scroll (features + CTA). Estado oculto SOLO si el JS marca
   <html class="js-reveal">: si el script no carga, todo queda visible (no se
   "traga" el contenido). El JS añade .is-visible al entrar en viewport. */
.js-reveal .lp-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.js-reveal .lp-reveal.is-visible { opacity: 1; transform: none; }
/* Escalonado de las tres features (entran en cascada, no de golpe). */
.js-reveal .lp-features .lp-feature:nth-child(2) { transition-delay: .08s; }
.js-reveal .lp-features .lp-feature:nth-child(3) { transition-delay: .16s; }

/* Ken Burns: la foto del héroe "respira" con un zoom lentísimo. La tarjeta
   tiene overflow:hidden, así que el zoom se recorta limpio. */
.lp-card-front img { animation: lp-kenburns 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes lp-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }

/* CTA con más presencia: halo coral al hover + micro-hundimiento al pulsar.
   Acotado a los botones de la portada (no toca los .btn globales). */
.lp-cta-row .btn.primary, .lp-final-inner .btn {
  transition: transform .12s ease, box-shadow .25s ease, background-color .2s ease;
}
.lp-cta-row .btn.primary:hover { box-shadow: 0 8px 28px -8px color-mix(in srgb, var(--primary) 65%, transparent); }
.lp-final-inner .btn:hover { box-shadow: 0 10px 30px -10px rgba(0,0,0,0.30); }
.lp-cta-row .btn.primary:active, .lp-final-inner .btn:active { transform: translateY(1px); }

/* Accesibilidad: si el usuario pide menos movimiento, todo quieto. */
@media (prefers-reduced-motion: reduce) {
  .lp-hero::before, .lp-hero::after, .lp-phone, .lp-card-front, .lp-card-front img,
  .lp-chip, .lp-like, .lp-rise,
  .lp-logo .ring-l, .lp-logo .ring-r, .lp-logo .wave, .lp-logo .glow { animation: none !important; }
  .lp-rise { opacity: 1; transform: none; }
  /* Por si acaso: nunca ocultar contenido revelable cuando se pide menos
     movimiento (el JS ya evita añadir .js-reveal, esto es cinturón y tirantes). */
  .js-reveal .lp-reveal { opacity: 1; transform: none; transition: none; }
}