/* ═══════════════════════════════════════════
   JAMUDI — style.css
   Extiende css/style.css con la paleta y tipografía
   reales de la app (ver lulla/src/design-reference/tokens.js).
   No modifica css/style.css — el sitio corporativo
   de Yirafa Labs sigue intacto.
   ═══════════════════════════════════════════ */

@import url("../css/style.css");

/* ── Tokens de marca Jamudi (pisan los de Yirafa Labs) ── */
:root {
  --bg:            #FAF7F2;
  --surface:       #FFFFFF;
  --surface-muted: #F4F0E8;
  --ink:           #1F1B2E;
  --ink-muted:     #6B6585;
  --ink-soft:      #9892AE;
  --accent:        #5B4BAD;
  --accent-hover:  #4A3D94;
  --accent-soft:   #EDE9F8;
  --coral:         #E89B6F;
  --coral-soft:    #FCEFE5;
  --border:        #E5E0F0;
  --border-strong: #CFC8E0;

  --font:      'Quicksand', 'Nunito', -apple-system, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --radius-lg: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0E0C1F;
    --surface:       #1A1633;
    --surface-muted: #221D3D;
    --ink:           #F2EBFE;
    --ink-muted:     #9A92B8;
    --ink-soft:      #6B6585;
    --accent:        #8B7BC7;
    --accent-hover:  #A393D9;
    --accent-soft:   #2A2447;
    --coral:         #E89B6F;
    --coral-soft:    #3A2C24;
    --border:        #2A2447;
    --border-strong: #3D3560;
  }
}

/* ── Tipografía: Quicksand para títulos/marca, Nunito para cuerpo ── */
body { font-family: var(--font-body); }

.hero-headline,
.section-heading,
.cap-name,
.legal-title,
.nav-logo,
.project-name,
.contact-heading {
  font-family: var(--font);
}

.legal-body p,
.legal-body li,
.legal-body-inner > p:first-child {
  font-family: var(--font-body);
}

/* ══════════════════════════════════════════
   HERO — mockup de teléfono junto al texto
   ══════════════════════════════════════════ */
.hero-visual {
  width: clamp(160px, 20vw, 220px);
  flex-shrink: 0;
}

.app-mockup {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(91, 75, 173, .18));
}

/* ══════════════════════════════════════════
   CAPABILITIES — de lista editorial a tarjetas
   ══════════════════════════════════════════ */
.capabilities {
  border-top: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.capabilities li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(31, 27, 46, .08), 0 1px 2px rgba(31, 27, 46, .04);
}

.capabilities li:nth-child(even) .cap-icon {
  background: var(--coral-soft);
  color: var(--coral);
}

.cap-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
}

.cap-icon svg { width: 24px; height: 24px; }

.cap-name { font-size: 1.0625rem; }
.cap-desc { font-size: 0.9375rem; }

@media (max-width: 480px) {
  .capabilities { grid-template-columns: 1fr; }
  .capabilities li { padding: 1.5rem; }
}

/* ══════════════════════════════════════════
   LEGAL LINKS — cierre de página, sección liviana
   (menos padding que Hero/Capabilities: es un cierre,
   no un pilar de contenido — la jerarquía se nota en el
   ritmo, no solo en el tamaño de la tipografía)
   ══════════════════════════════════════════ */
.legal-cta {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

.legal-links {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.legal-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(31, 27, 46, .08), 0 1px 2px rgba(31, 27, 46, .04);
  color: var(--ink);
  transition: box-shadow 180ms ease-out, transform 180ms ease-out;
}

.legal-link:hover {
  box-shadow: 0 6px 20px rgba(91, 75, 173, .16), 0 2px 6px rgba(31, 27, 46, .06);
  transform: translateY(-1px);
}

.legal-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.legal-link:nth-child(even) .legal-link-icon {
  background: var(--coral-soft);
  color: var(--coral);
}

.legal-link-icon svg { width: 19px; height: 19px; }

.legal-link-label {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
}

.legal-link-arrow {
  width: 15px;
  height: 15px;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: transform 180ms ease-out, color 180ms ease-out;
}

.legal-link:hover .legal-link-arrow {
  transform: translateX(3px);
  color: var(--accent);
}

@media (max-width: 480px) {
  .legal-links { flex-direction: column; }
}