/* Samu.ai V2 — Custom styles
   Tailwind se carga vía CDN en index.html.
   Acá van variables de marca, fonts y animaciones que Tailwind no cubre.
*/

:root {
  /* Colores de marca (del brand guide) */
  --samu-purple-primary: #B388FF;
  --samu-blue-primary: #82B1FF;
  --samu-purple-dark: #534AB7;
  --samu-purple-darker: #3C3489;
  --samu-purple-light: #EEEDFE;
  --samu-purple-50: #F6F5FE;

  /* Neutrales */
  --samu-ink: #1a1a1a;
  --samu-ink-soft: #4a4a4a;
  --samu-ink-mute: #8a8a8a;
  --samu-paper: #ffffff;
  --samu-paper-soft: #f7f7f5;
  --samu-paper-line: #ececec;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--samu-ink);
  background: var(--samu-paper);
  font-feature-settings: "ss01", "cv11";
}

/* === Tipografía editorial del sitio === */
.h-display {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.h-section {
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--samu-purple-dark);
}

/* === Hero rotator === */
.rotator {
  display: inline-block;
  color: var(--samu-purple-dark);
  transition: opacity 0.45s ease;
  min-height: 1em;
  min-width: 230px;
}

/* === Chat bubbles (hero + módulo estrella) === */
.bubble-user {
  background: var(--samu-purple-dark);
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 80%;
  margin-left: auto;
}

.bubble-samu {
  background: var(--samu-paper-soft);
  color: var(--samu-ink);
  padding: 12px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.55;
  max-width: 92%;
}

.bubble-samu strong {
  font-weight: 500;
  color: var(--samu-purple-darker);
}

/* === Cards genéricas === */
.card {
  background: var(--samu-paper);
  border: 1px solid var(--samu-paper-line);
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--samu-purple-dark);
}

/* === Story (Antes de Samu) === */
.stamp {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: 0.02em;
  display: inline-block;
}

.stamp-start { background: #EAF3DE; color: #3B6D11; }
.stamp-warn  { background: #FAEEDA; color: #633806; }
.stamp-bad   { background: #FCEBEB; color: #791F1F; }
.stamp-lost  { background: #1a1a1a; color: #fff; }

/* === Bridge box === */
.bridge {
  background: var(--samu-purple-light);
  border-radius: 14px;
  padding: 24px 28px;
}

/* === Botones === */
.btn-primary {
  background: var(--samu-purple-dark);
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--samu-purple-darker);
}

.btn-secondary {
  background: transparent;
  color: var(--samu-ink);
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--samu-paper-line);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.btn-secondary:hover {
  background: var(--samu-paper-soft);
  border-color: var(--samu-ink-mute);
}

/* === Nav === */
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--samu-ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--samu-purple-dark);
}

/* === Logo strip (trust bar) — wordmark style hasta tener SVG reales === */
.logo-chip {
  font-size: 15px;
  font-weight: 600;
  color: #6a6a6a;
  padding: 10px 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.logo-chip:hover {
  opacity: 1;
  color: var(--samu-ink);
}

/* === Pilar cards === */
.pilar {
  background: #fff;
  border: 1px solid var(--samu-paper-line);
  border-radius: 16px;
  padding: 28px;
  transition: border-color 0.2s ease;
}

.pilar:hover {
  border-color: var(--samu-purple-dark);
}

.pilar-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--samu-purple-dark);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

/* === Flujograma (3 columnas) === */
.flow-col {
  background: #fff;
  border: 1px solid var(--samu-paper-line);
  border-radius: 14px;
  padding: 22px;
}

.flow-col-middle {
  background: var(--samu-purple-light);
  border-color: #CECBF6;
}

.flow-arrow {
  color: var(--samu-purple-dark);
  font-size: 22px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .flow-arrow {
    transform: rotate(90deg);
    margin: 8px 0;
  }
}

/* === ROI metric cards === */
.roi-metric {
  background: var(--samu-paper-soft);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}

.roi-metric-value {
  font-size: 38px;
  font-weight: 500;
  color: var(--samu-purple-darker);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}

.roi-metric-label {
  font-size: 13px;
  color: var(--samu-ink-soft);
  letter-spacing: 0.02em;
}

/* === Persona cards (5 roles) === */
.persona {
  background: #fff;
  border: 1px solid var(--samu-paper-line);
  border-radius: 14px;
  padding: 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.persona:hover {
  border-color: var(--samu-purple-dark);
  transform: translateY(-2px);
}

/* === Casos === */
.case-card {
  background: #fff;
  border: 1px solid var(--samu-paper-line);
  border-radius: 14px;
  padding: 24px;
}

.case-quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--samu-ink);
  margin-bottom: 18px;
}

/* === Final CTA === */
.final-cta {
  background: linear-gradient(135deg, var(--samu-purple-light) 0%, #F0EBFF 100%);
  border-radius: 18px;
  padding: 56px 32px;
}

/* === FAQ === */
.faq-item {
  border-bottom: 1px solid var(--samu-paper-line);
  padding: 22px 0;
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-q {
  font-size: 17px;
  font-weight: 500;
  color: var(--samu-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--samu-purple-dark);
  transition: transform 0.2s ease;
}

details[open] .faq-q::after {
  content: "-";
}

.faq-a {
  font-size: 15px;
  color: var(--samu-ink-soft);
  line-height: 1.6;
  margin-top: 12px;
}

/* === Animaciones leves === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.6s ease both;
}

/* === Responsive helpers === */
@media (max-width: 768px) {
  .hide-mobile { display: none; }
}

/* === Footer === */
.footer-link {
  font-size: 14px;
  color: var(--samu-ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-link:hover {
  color: var(--samu-purple-dark);
}