/* ════════════════════════════════════════════════════════════════════════════
 * TLG · SEDAIIO DESIGN SYSTEM
 * Sistema de diseño inspirado en Sedaiio (Behance) aplicado con palette TLG.
 *
 * Principios:
 *  1. Minimalismo cinético — menos contenido por pantalla, más impacto
 *  2. Asimetría intencionada — 60/40, 70/30, no rejilla rígida
 *  3. Alternancia oscuro/claro estratégica entre secciones
 *  4. Tipografía a escala monumental — sirve como visual
 *  5. Aire blanco generoso — 100-160px entre secciones grandes
 *  6. Hover con transform (scale, translate, brightness)
 *  7. Botones outline + flecha (sin bloques sólidos agresivos)
 *  8. Hierarchy por tamaño, no por peso
 *
 * Este archivo se carga AL FINAL para sobreescribir estilos previos.
 * ════════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. TIPOGRAFÍA DE ESCALA MONUMENTAL ═══════════════════════════════════ */

.sedai-display {
  font-family: var(--serif);
  font-size: clamp(56px, 8vw, 140px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--arena);
}
.sedai-display em {
  font-style: italic;
  color: var(--oro);
}

.sedai-h2 {
  font-family: var(--serif);
  font-size: clamp(42px, 5.5vw, 80px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.sedai-h2 em { font-style: italic; color: var(--oro); }

.sedai-h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.sedai-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--oro);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sedai-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--oro);
}

.sedai-lead {
  font-family: var(--sans);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: rgba(245,241,235,.75);
  font-weight: 300;
  max-width: 56ch;
}
.sedai-on-light .sedai-lead { color: rgba(14,13,11,.7); }


/* ═══ 2. SECCIÓN STAGE — Asimétrico con aire abundante ════════════════════ */

.sedai-section {
  padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 80px);
  position: relative;
}
.sedai-section--light {
  background: var(--arena);
  color: var(--tinta);
}
.sedai-section--light .sedai-display,
.sedai-section--light .sedai-h2,
.sedai-section--light .sedai-h3 { color: var(--tinta); }
.sedai-section--light .sedai-eyebrow { color: #8a6e3a; }
.sedai-section--light .sedai-eyebrow::before { background: #8a6e3a; }

.sedai-section--dark {
  background: var(--tinta);
  color: var(--arena);
}

.sedai-container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Splits asimétricos Sedai-style */
.sedai-split-7030 {
  display: grid;
  grid-template-columns: 0.7fr 0.3fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: end;
}
.sedai-split-6040 {
  display: grid;
  grid-template-columns: 0.6fr 0.4fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
.sedai-split-4060 {
  display: grid;
  grid-template-columns: 0.4fr 0.6fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
@media (max-width: 900px) {
  .sedai-split-7030,
  .sedai-split-6040,
  .sedai-split-4060 {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ═══ 3. BOTONES SEDAI — outline + flecha + hover deslizante ══════════════ */

.sedai-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: transparent;
  border: 1px solid var(--oro);
  border-radius: 999px;
  color: var(--oro);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s ease, border-color .35s ease;
  isolation: isolate;
}
.sedai-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--oro);
  transform: translateY(101%);
  transition: transform .45s cubic-bezier(.7,0,.3,1);
  z-index: -1;
}
.sedai-btn:hover { color: var(--tinta); border-color: var(--oro); }
.sedai-btn:hover::before { transform: translateY(0); }
.sedai-btn .arrow {
  display: inline-block;
  transition: transform .35s ease;
}
.sedai-btn:hover .arrow { transform: translateX(4px); }

.sedai-btn--solid {
  background: var(--oro);
  color: var(--tinta);
  border-color: var(--oro);
}
.sedai-btn--solid::before { background: var(--tinta); }
.sedai-btn--solid:hover { color: var(--oro); }

.sedai-btn--ghost {
  border-color: rgba(245,241,235,.25);
  color: var(--arena);
}
.sedai-section--light .sedai-btn--ghost {
  border-color: rgba(14,13,11,.2);
  color: var(--tinta);
}
.sedai-btn--ghost::before { background: var(--arena); }
.sedai-section--light .sedai-btn--ghost::before { background: var(--tinta); }
.sedai-section--light .sedai-btn--ghost:hover { color: var(--arena); }


/* ═══ 4. SOBRESCRIBIR BOTONES EXISTENTES con feel Sedai ═══════════════════ */

.btn-main, .btn-primary {
  border-radius: 999px !important;
  letter-spacing: .15em !important;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease !important;
}
.btn-main:hover, .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(201,169,110,.25) !important;
}
.btn-ghost {
  border-radius: 999px !important;
  letter-spacing: .15em !important;
}


/* ═══ 5. CARDS con hover Sedai (scale + brightness) ═══════════════════════ */

.medico-card, .pkg, .pkg-card, .dif-card, .testi, .hud-card,
article.hud, .proto-step, .ai-btn {
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              border-color .35s ease,
              background .35s ease,
              box-shadow .35s ease !important;
}
.medico-card:hover, .pkg-card:hover, .dif-card:hover,
.testi:hover, .hud-card:hover, article.hud:hover,
.proto-step:hover, .ai-btn:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,.35) !important;
}


/* ═══ 6. DIVISORES ENTRE SECCIONES — hairline dorado animado ══════════════ */

.sedai-divider {
  position: relative;
  height: 1px;
  background: var(--borde);
  margin: 0;
  overflow: hidden;
}
.sedai-divider::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--oro) 50%, transparent);
  transition: width 1.2s cubic-bezier(.22,.61,.36,1);
}
.sedai-divider.in::before { width: 100%; }


/* ═══ 7. NAV REFINADA estilo Sedai ════════════════════════════════════════ */

nav#navbar {
  padding: 24px clamp(24px, 5vw, 56px) !important;
}
nav#navbar.scrolled {
  padding: 14px clamp(24px, 5vw, 56px) !important;
  background: rgba(14,13,11,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
nav#navbar .nav-links a {
  position: relative;
  padding: 6px 0;
}
nav#navbar .nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--oro);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
nav#navbar .nav-links a:hover::after,
nav#navbar .nav-links a.active::after { width: 100%; }


/* ═══ 8. SCROLLBAR PERSONALIZADA ══════════════════════════════════════════ */

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--tinta); }
::-webkit-scrollbar-thumb {
  background: rgba(201,169,110,.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,.5); }


/* ═══ 9. UPDATES PARA HERO — más asimétrico, más aire ═════════════════════ */

#hero {
  padding: clamp(140px, 18vh, 220px) clamp(24px, 5vw, 80px) clamp(80px, 12vh, 140px) !important;
  display: grid !important;
  grid-template-columns: 0.62fr 0.38fr !important;
  gap: clamp(40px, 5vw, 96px) !important;
  align-items: center !important;
  min-height: 100vh;
}
#hero .hero-left h1 {
  font-size: clamp(48px, 7.5vw, 116px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
  font-weight: 300 !important;
}
#hero .hero-eyebrow {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  margin-bottom: clamp(24px, 3vw, 36px) !important;
}
#hero .hero-sub {
  font-size: clamp(16px, 1.3vw, 19px) !important;
  line-height: 1.6 !important;
  max-width: 50ch !important;
  margin-top: clamp(24px, 3vw, 32px) !important;
  color: rgba(245,241,235,.75) !important;
}
#hero .hero-ctas {
  margin-top: clamp(32px, 4vw, 48px) !important;
  display: flex; gap: 14px; flex-wrap: wrap;
}
@media (max-width: 900px) {
  #hero { grid-template-columns: 1fr !important; padding: 110px 24px 60px !important; }
  #hero .hero-left h1 { font-size: clamp(40px, 9vw, 64px) !important; }
}


/* ═══ 10. SECCIÓN MÉDICOS — Asimétrica con foto-placeholder grande ════════ */

#medicos { padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 80px) !important; }
#medicos > div.reveal:first-child { max-width: 880px; margin-bottom: 80px; }
#medicos h2 {
  font-family: var(--serif) !important;
  font-size: clamp(42px, 5.5vw, 80px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  font-weight: 300 !important;
}


/* ═══ 11. SECCIÓN PAQUETES — Cards Sedai-style ════════════════════════════ */

#paquetes { padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 80px) !important; }
#paquetes h2 {
  font-family: var(--serif) !important;
  font-size: clamp(42px, 5.5vw, 80px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  font-weight: 300 !important;
}
.pkg, .pkg-card {
  border-radius: 8px !important;
  border: 1px solid var(--borde) !important;
  background: rgba(245,241,235,.02) !important;
  padding: 48px 40px !important;
}
.pkg.featured, .pkg-card.featured {
  background: linear-gradient(135deg, rgba(201,169,110,.06), transparent) !important;
  border-color: var(--oro) !important;
}


/* ═══ 12. DIFERENCIADORES — Aire generoso + cards minimal ═════════════════ */

#diferencia { padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 80px) !important; }
#diferencia h2 {
  font-family: var(--serif) !important;
  font-size: clamp(42px, 5.5vw, 80px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  font-weight: 300 !important;
}
.dif-card {
  background: transparent !important;
  border: 1px solid var(--borde) !important;
  padding: 40px 36px !important;
}
.dif-card:hover {
  background: rgba(201,169,110,.04) !important;
  border-color: var(--oro) !important;
}


/* ═══ 13. SECCIONES NUEVAS — Refinamiento Sedai ═══════════════════════════ */

/* Metric strip más limpia */
section.reveal[style*="border-top:1px solid var(--borde);border-bottom"] {
  padding: clamp(60px, 8vw, 100px) clamp(24px, 5vw, 80px) !important;
}

/* Protocolo cards */
.proto-step {
  padding: 40px 32px !important;
  border-radius: 8px !important;
}

/* Comp4 más respirable */
.comp4 {
  border-radius: 10px !important;
  margin-top: 64px !important;
}
.comp4-cell { padding: 24px 22px !important; }


/* ═══ 14. SCROLL CUE animado ══════════════════════════════════════════════ */

.scroll-cue {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(245,241,235,.5) !important;
  position: absolute;
  bottom: 32px; left: clamp(24px, 5vw, 80px);
  display: flex; align-items: center; gap: 12px;
  z-index: 10;
}
.scroll-cue::before {
  content: '';
  display: block;
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, transparent, var(--oro));
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.6); opacity: .5; }
  50%      { transform: scaleY(1); opacity: 1; }
}


/* ═══ 15. RESPONSIVE MÓVIL — Mantener jerarquía ═══════════════════════════ */

@media (max-width: 720px) {
  .sedai-section { padding: 60px 20px !important; }
  .sedai-display { font-size: clamp(40px, 11vw, 64px) !important; }
  .sedai-h2 { font-size: clamp(32px, 9vw, 48px) !important; }
  #hero .hero-left h1 { font-size: clamp(38px, 11vw, 56px) !important; }
}


/* ═══ 16. ANIMACIÓN MÁS REFINADA EN REVEAL ════════════════════════════════ */

.reveal {
  transform: translateY(48px) !important;
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1),
              transform 1.1s cubic-bezier(.22,.61,.36,1) !important;
}
.reveal.in { transform: translateY(0) !important; }