/* ═══════════════════════════════════════════════════════════
   Cuaderno de Mesilla · style.css
   Paleta nocturna · Índigo profundo + Luna pálida + Ámbar suave
   Mobile-first · Breakpoints: 480 · 768 · 900 · 1100px
═══════════════════════════════════════════════════════════ */

:root {
  /* Base warm-neutrals (hereda del sistema Sphaera) */
  --sand:     #f5f0e8;
  --linen:    #ede7d9;
  --terra:    #8b6b4a;
  --sage:     #7a8c7e;
  --charcoal: #2c2925;
  --warm-mid: #6b5c48;
  --mist:     #ddd6c8;
  --white:    #fdfaf5;
  --accent:   #a0764e;

  /* Noche: paleta específica de esta herramienta */
  --night:        #0f0d1a;       /* Fondo nocturno profundo */
  --night-mid:    #1c1927;       /* Superficie oscura intermedia */
  --night-soft:   #252235;       /* Tarjetas y contenedores nocturnos */
  --moon:         #e8e2d5;       /* Texto principal en modo noche */
  --moon-dim:     #a09890;       /* Texto secundario en noche */
  --indigo:       #6b74c4;       /* Acento indigo · foco y activos */
  --indigo-light: #eef0ff;       /* Fondo suave indigo */
  --indigo-mid:   #8b94d4;       /* Indigo medio para chips activos */
  --amber-glow:   #c4933a;       /* Ámbar suave (cálido, como una vela) */
  --amber-soft:   #fdf3e0;       /* Fondo ámbar muy suave */

  /* Chips */
  --chip-bg:          var(--linen);
  --chip-border:      var(--mist);
  --chip-sel-bg:      #4a4d8a;
  --chip-sel-border:  #393d72;
  --chip-sel-text:    #f0eeff;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:'Jost', sans-serif;
  background:var(--sand);
  color:var(--charcoal);
  font-weight:300;
  overflow-x:hidden;
  min-height:100vh;
}

img { max-width:100%; display:block; }

/* ─── PAGE HEADER (nocturno) ─── */
.page-header {
  position:relative;
  padding:100px 20px 44px;
  text-align:center;
  background:linear-gradient(175deg, var(--night) 0%, #1a172e 55%, #2a2240 100%);
  border-bottom:1px solid rgba(107,116,196,.15);
  overflow:hidden;
}

/* Estrellas decorativas */
.stars-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.star {
  position:absolute;
  color:rgba(224,218,255,0.35);
  font-size:8px;
  animation:starFloat 8s ease-in-out infinite;
}
.s1 { top:14%; left:8%;  animation-delay:0s;    font-size:10px; }
.s2 { top:22%; left:22%; animation-delay:1.2s;  font-size:5px; }
.s3 { top:10%; left:55%; animation-delay:2.5s;  font-size:8px; }
.s4 { top:30%; left:70%; animation-delay:0.8s;  font-size:5px; }
.s5 { top:18%; left:85%; animation-delay:3.1s;  font-size:9px; }
.s6 { top:38%; left:38%; animation-delay:1.7s;  font-size:4px; }
.s7 { top:42%; left:92%; animation-delay:4s;    font-size:7px; }
@keyframes starFloat {
  0%,100% { opacity:.35; transform:translateY(0); }
  50%      { opacity:.7;  transform:translateY(-4px); }
}

.page-eyebrow {
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--indigo-mid); margin-bottom:14px; display:block;
}
.page-greeting {
  display:block; font-family:'Cormorant Garamond', serif;
  font-size:15px; font-style:italic; color:var(--moon-dim);
  margin-bottom:6px;
}
.page-title {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(30px,8vw,50px); font-weight:300; line-height:1.18;
  color:var(--moon); margin-bottom:16px;
}
.page-title em { font-style:italic; color:var(--amber-glow); }
.page-subtitle {
  font-size:clamp(13px,3.5vw,15px); line-height:1.8;
  color:rgba(224,218,213,.6); max-width:500px; margin:0 auto 28px;
}

/* ─── RITUAL BANNER ─── */
.ritual-banner {
  display:flex; gap:14px; align-items:flex-start;
  max-width:560px; margin:0 auto;
  background:rgba(196,147,58,.08);
  border:1px solid rgba(196,147,58,.2);
  border-left:3px solid var(--amber-glow);
  padding:18px 20px;
  text-align:left;
}
.ritual-banner__icon { font-size:22px; flex-shrink:0; line-height:1.3; }
.ritual-banner__body { font-size:13px; line-height:1.75; color:rgba(224,218,213,.75); }
.ritual-banner__body strong {
  display:block; font-weight:500; color:var(--amber-glow);
  font-size:13.5px; margin-bottom:5px;
}
.ritual-banner__body em { font-style:italic; color:var(--moon); }

/* ─── PROGRESS ─── */
.progress-bar {
  display:flex; align-items:center; justify-content:center;
  gap:0; padding:20px;
  background:var(--white);
  border-bottom:1px solid var(--mist);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.progress-step {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; min-width:56px; cursor:pointer; opacity:.4; transition:opacity .3s;
}
.progress-step.active { opacity:1; }
.progress-step.done  { opacity:.65; }
.step-dot {
  width:10px; height:10px; border-radius:50%; background:var(--mist);
  transition:background .3s, transform .3s;
}
.progress-step.active .step-dot { background:var(--indigo); transform:scale(1.3); }
.progress-step.done  .step-dot  { background:var(--indigo-mid); }
.step-line { width:28px; height:1px; background:var(--mist); margin-bottom:16px; flex-shrink:0; }
.step-label {
  font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--warm-mid); text-align:center; line-height:1.3; white-space:nowrap;
}
.progress-step.active .step-label { color:var(--indigo); font-weight:500; }

/* ─── APP MAIN ─── */
.app-main { max-width:680px; margin:0 auto; padding:32px 20px 80px; }

.step { display:none; }
.step.active { display:block; animation:stepIn .35s ease; }
@keyframes stepIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── STEP HEADER ─── */
.step-header { margin-bottom:28px; }
.step-num {
  font-family:'Cormorant Garamond', serif; font-size:11px;
  font-weight:300; font-style:italic;
  color:var(--indigo); letter-spacing:.1em; margin-bottom:8px; display:block;
}
.step-title {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(22px,6vw,30px); font-weight:300; line-height:1.2;
  color:var(--charcoal); margin-bottom:8px;
}
.step-desc { font-size:13.5px; line-height:1.75; color:var(--warm-mid); }

/* ─── NIGHT BOX (equivalente a sphaera-box pero nocturno) ─── */
.night-box {
  background:var(--indigo-light);
  border-left:3px solid var(--indigo);
  padding:18px 20px 16px;
  margin-bottom:24px;
}
.night-box-label {
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--indigo); margin-bottom:9px; display:block;
}
.night-box-text { font-size:13px; line-height:1.7; color:var(--warm-mid); }

/* ─── FIELDS ─── */
.field-label {
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--warm-mid); margin-bottom:6px; display:block;
}
.field-label-opt {
  font-size:10px; font-weight:300; text-transform:none;
  letter-spacing:0; color:#aaa;
}
.field-input {
  width:100%; background:var(--white); border:1px solid var(--mist);
  padding:14px 16px; font-family:'Jost', sans-serif;
  font-size:16px; font-weight:300; color:var(--charcoal);
  outline:none; transition:border-color .2s; -webkit-appearance:none;
}
.field-input:focus { border-color:var(--indigo); }
.field-input::placeholder { color:var(--mist); }

.field-textarea {
  width:100%; background:var(--white); border:1px solid var(--mist);
  padding:14px 16px; font-family:'Jost', sans-serif;
  font-size:16px; font-weight:300; color:var(--charcoal);
  resize:vertical; min-height:90px; outline:none;
  line-height:1.7; transition:border-color .2s; -webkit-appearance:none;
}
.field-textarea:focus { border-color:var(--indigo); }
.field-textarea::placeholder { color:var(--mist); }
.field-note { font-size:11.5px; color:var(--indigo); margin-top:6px; }

.field-sep    { height:1px; background:var(--mist); margin:28px 0; }
.field-sep-sm { height:1px; background:var(--mist); margin:16px 0; }

/* ─── CHIPS ─── */
.chips-group { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.chip {
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 16px; background:var(--chip-bg);
  border:1.5px solid var(--chip-border);
  font-family:'Jost', sans-serif; font-size:13px; font-weight:300;
  color:var(--charcoal); cursor:pointer; transition:all .2s;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.chip:hover { border-color:var(--indigo); }
.chip.selected {
  background:var(--chip-sel-bg);
  border-color:var(--chip-sel-border);
  color:var(--chip-sel-text);
}

/* ─── ESCALA ─── */
.scale-wrap { margin-bottom:8px; }
.scale-label-row {
  display:flex; justify-content:space-between;
  font-size:10.5px; color:var(--warm-mid); letter-spacing:.06em; margin-bottom:12px;
}
.scale-track { display:flex; gap:6px; }
.scale-btn {
  flex:1; aspect-ratio:1; max-width:52px;
  background:var(--chip-bg); border:1.5px solid var(--chip-border);
  font-family:'Cormorant Garamond', serif; font-size:16px; font-weight:300;
  color:var(--charcoal); cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.scale-btn:hover { border-color:var(--indigo); }
.scale-btn.selected { background:var(--indigo); border-color:#393d72; color:#fff; }

/* ─── NAV STEPS ─── */
.step-nav {
  display:flex; gap:12px; margin-top:36px;
  align-items:center; flex-wrap:wrap;
}
.btn-next {
  font-family:'Jost', sans-serif;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); background:var(--indigo);
  padding:14px 32px; border:none; cursor:pointer;
  transition:background .2s, transform .15s;
  -webkit-tap-highlight-color:transparent;
}
.btn-next:hover { background:var(--chip-sel-bg); transform:translateY(-1px); }
.btn-back {
  font-family:'Jost', sans-serif; font-size:11px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--warm-mid); background:none; padding:14px 0;
  border:none; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; transition:color .2s;
}
.btn-back:hover { color:var(--indigo); }

/* ─── RESUMEN ─── */
.summary-wrap {
  background:var(--white); border:1px solid var(--mist);
  padding:28px 24px; margin-bottom:28px;
}
.summary-section {
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid var(--mist);
}
.summary-section:last-child { border-bottom:none; margin-bottom:0; }

.summary-label {
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--indigo); margin-bottom:10px; display:block;
}
.summary-chips { display:flex; flex-wrap:wrap; gap:8px; }
.summary-chip {
  font-size:12.5px; padding:6px 12px;
  background:var(--linen); color:var(--charcoal); border:1px solid var(--mist);
}
.summary-text {
  font-size:14px; line-height:1.75; color:var(--charcoal); font-style:italic;
}
.summary-prioridad {
  font-family:'Cormorant Garamond', serif;
  font-size:20px; font-weight:300; line-height:1.4;
  color:var(--charcoal); font-style:italic;
}
.summary-score {
  font-family:'Cormorant Garamond', serif;
  font-size:36px; font-weight:300; color:var(--indigo);
}
.summary-score-label {
  font-family:'Cormorant Garamond', serif;
  font-size:18px; font-weight:300; color:var(--warm-mid);
  vertical-align:middle;
}

/* Items de preocupaciones en el resumen */
.preocupacion-item {
  display:flex; gap:12px; align-items:flex-start;
  margin-bottom:14px; padding:14px 16px;
  background:var(--indigo-light);
  border-left:3px solid rgba(107,116,196,.3);
}
.preocupacion-item:last-child { margin-bottom:0; }
.preocupacion-num {
  font-size:16px; flex-shrink:0; margin-top:1px; color:var(--indigo);
}
.preocupacion-item p {
  font-size:14px; line-height:1.7; color:var(--charcoal); font-style:italic;
}

/* ─── RITUAL FINAL ─── */
.ritual-final {
  display:flex; gap:16px; align-items:center;
  background:linear-gradient(135deg, #0f0d1a, #1c1927);
  border:1px solid rgba(196,147,58,.2);
  border-left:3px solid var(--amber-glow);
  padding:22px 20px;
  margin-bottom:28px;
}
.ritual-final__moon { font-size:28px; flex-shrink:0; }
.ritual-final__body { font-size:13.5px; line-height:1.75; color:rgba(224,218,213,.75); }
.ritual-final__body strong {
  display:block; color:var(--amber-glow); font-weight:500;
  font-size:14.5px; margin-bottom:5px;
}

/* ─── ACTIONS ─── */
.actions-row {
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;
}
.btn-action {
  font-family:'Jost', sans-serif;
  font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--indigo); background:none;
  padding:12px 22px; border:1.5px solid var(--indigo); cursor:pointer;
  transition:all .2s; display:inline-flex; align-items:center; gap:7px;
}
.btn-action:hover { background:var(--indigo); color:var(--white); }

/* ─── SHARE BLOCK ─── */
.share-block {
  background:linear-gradient(135deg, var(--night), #1c1927);
  border-left:3px solid var(--indigo);
  padding:24px 20px; margin-top:4px;
}
.share-title {
  font-family:'Cormorant Garamond', serif;
  font-size:22px; font-weight:300; font-style:italic;
  color:var(--moon); margin-bottom:8px;
}
.share-text { font-size:13px; line-height:1.8; color:rgba(224,218,213,.6); }


/* ─── PRINT ─── */
@media print {
  nav, .progress-bar, .step-nav, .share-block, .ritual-final{ display:none !important; }
  .page-header { padding:20px; background:white !important; }
  body { background:white; }
}

/* ══ 480px ══ */
@media (min-width:480px) {
  .app-main { padding:36px 28px 80px; }
  .scale-track { gap:8px; }
}

/* ══ 768px ══ */
@media (min-width:768px) {
  .page-header { padding:110px 44px 52px; }
  .app-main { padding:40px 44px 80px; }
  .ritual-banner { padding:22px 24px; }
}

/* ══ 900px ══ */
@media (min-width:900px) {
  .page-header { padding:120px 60px 56px; }
}

/* ══ 1100px ══ */
@media (min-width:1100px) {
}