/* SENSEI VIRTUAL V3 — DESIGN SYSTEM (WORLD-CLASS EDITORIAL & CONVERSATIONAL UX) */
:root {
  /* Color Palette */
  --bg-base: #05070B;
  --bg-deep: #08111E;
  --bg-surface: #0D1724;
  --bg-surface-elevated: #132032;
  --bg-card: rgba(13, 23, 36, 0.75);
  --bg-card-hover: rgba(19, 32, 50, 0.85);

  --text-primary: #F4F0E8;
  --text-secondary: #A6AFBE;
  --text-tertiary: #6F7886;
  --text-muted: #566070;

  --gold-primary: #DAB75A;
  --gold-soft: #B99A4F;
  --gold-light: #F1D98F;
  --gold-glow: rgba(218, 183, 90, 0.18);
  --gold-border: rgba(218, 183, 90, 0.32);

  --jorge-blue: #3D8BFF;
  --jorge-bg: rgba(61, 139, 255, 0.1);
  --jorge-border: rgba(61, 139, 255, 0.25);

  --diana-violet: #8C6FE8;
  --diana-bg: rgba(140, 111, 232, 0.1);
  --diana-border: rgba(140, 111, 232, 0.25);

  --sensei-gold: #DAB75A;
  --sensei-bg: rgba(218, 183, 90, 0.1);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(218, 183, 90, 0.25);
  --border-active: rgba(218, 183, 90, 0.45);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --page-max: 1200px;
  --chat-max: 820px;
  --header-height: 64px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 10px 30px rgba(218, 183, 90, 0.15);

  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] { display: none !important; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(31, 76, 124, 0.25), transparent 45rem),
    radial-gradient(circle at 10% 40%, rgba(218, 183, 90, 0.05), transparent 30rem),
    radial-gradient(circle at 50% 90%, rgba(13, 23, 36, 0.8), transparent 50rem);
  pointer-events: none;
  z-index: -1;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* Typography Utilities */
.font-display { font-family: var(--font-display); }
.text-gold { color: var(--gold-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.gold-gradient {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Base Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
  min-height: 42px;
}

.btn:hover {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-primary));
  color: #040810;
  font-weight: 600;
  border-color: var(--gold-primary);
  box-shadow: 0 4px 14px rgba(218, 183, 90, 0.2);
}

.btn.btn-gold:hover {
  box-shadow: 0 6px 20px rgba(218, 183, 90, 0.35);
  filter: brightness(1.04);
}

.btn.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
}

.btn.btn-ghost:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.btn.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  min-height: 32px;
}

.btn.btn-icon {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

/* Layout Containers */
.wrap {
  width: min(100% - 2.5rem, var(--page-max));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - 2.5rem, 880px);
  margin-inline: auto;
}

/* SVGs Icons helper */
.icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 22px; height: 22px; }

/* ── MEDITACIONES Y VISUALIZACIONES (v3.5) ─────────────────────────── */
.med-hero-asset{width:100%;max-width:420px;border-radius:16px;margin:0 auto 1rem;display:block;border:1px solid rgba(201,162,75,.25);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.med-starter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;margin:1rem 0}
.med-starter-card{position:relative;min-height:210px;aspect-ratio:4/5;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;justify-content:flex-end;text-align:left;background-color:#0a1424;background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid rgba(120,150,210,.16);border-radius:16px;padding:1rem 1.05rem .95rem;color:var(--text,#E8ECF2);cursor:pointer;overflow:hidden;isolation:isolate;transition:transform 260ms cubic-bezier(.2,.8,.2,1),filter 260ms ease,border-color 260ms ease}
.med-starter-card:hover{border-color:rgba(130,165,230,.4);transform:translateY(-3px);filter:brightness(1.04)}
.med-starter-overlay{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(7,14,26,.18) 0%,rgba(7,14,26,.42) 44%,rgba(7,14,26,.82) 78%,rgba(7,14,26,.94) 100%)}
.med-starter-icon-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(15,26,45,.55);border:1px solid rgba(140,170,225,.18);margin-bottom:.35rem}
.med-starter-icon{width:24px;height:24px;color:#E9EEF6}
.med-starter-title{font-weight:700;font-size:.96rem;color:#F2F5FA;line-height:1.25}
.med-starter-hint{font-size:.78rem;color:rgba(216,226,242,.82);line-height:1.35}
.med-creator{display:flex;flex-direction:column;gap:.6rem;margin:.9rem 0}
.med-intent-input{width:100%;background:#0D1420;border:1px solid var(--border,#1E2733);border-radius:12px;color:#E8ECF2;padding:.75rem .9rem;font-size:.95rem;resize:vertical;font-family:inherit}
.med-intent-input:focus{outline:none;border-color:#C9A24B99}
.med-hint{color:var(--muted,#8A94A3);font-size:.86rem}
.med-status{font-size:.9rem;margin:.5rem 0}
.med-creator-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.med-curated-card{background:linear-gradient(160deg,#0B1018,#0e1520);border:1px solid var(--line,#1E2733);border-radius:16px;padding:1rem 1.1rem;margin:.7rem 0}
.med-curated-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.med-curated-head h3{margin:0;font-size:1.02rem;color:#E8ECF2}
.med-voice-tag{font-size:.72rem;color:var(--gold,#C9A24B);border:1px solid #3A3220;border-radius:999px;padding:2px 10px;white-space:nowrap}
.med-curated-meta{font-size:.82rem;color:var(--muted,#8A94A3);margin-top:.35rem}
.med-curated-desc{font-size:.9rem;color:#CBD3DE;margin:.45rem 0 .3rem}
.med-curated-source{font-size:.8rem;color:#B9C2CF;margin:.3rem 0}
.med-curated-row{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;margin:.35rem 0 .6rem}
.med-player audio{width:100%;height:42px}
.med-curated-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.med-creating-steps{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.5rem}
.med-creating-steps li{color:#5E6A7D;font-size:.9rem;padding-left:1.35rem;position:relative;display:flex;align-items:center;gap:.45rem;transition:color .35s ease}
.med-creating-steps li .med-step-dot{width:10px;height:10px;border-radius:50%;border:1px solid #3a4556;flex:none;transition:all .35s ease;position:relative}
.med-creating-steps li.med-step-active{color:var(--gold,#C9A24B)}
.med-creating-steps li.med-step-active .med-step-dot{border-color:#C9A24B}
.med-creating-steps li.med-step-active .med-step-dot::after{content:'';position:absolute;inset:1px;border-radius:50%;background:radial-gradient(circle,#f0e2b6,#C9A24B);animation:medPulse 2.4s ease-in-out infinite}
.med-creating-steps li.med-step-done{color:#9BD8A8}
.med-creating-steps li.med-step-done .med-step-dot{background:#7fb069;border-color:#7fb069}
.med-creating-steps li.med-step-done .med-step-dot::after{content:'✓';position:absolute;inset:0;font-size:9px;line-height:10px;text-align:center;color:#05130a;font-weight:700}
@keyframes medPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.8);opacity:1}}
.med-creating-title{font-size:1.15rem;margin:.4rem 0 .2rem;letter-spacing:.02em}
.meditions-creating .med-status{margin-top:.7rem}
.med-breath-ring{position:relative;width:130px;height:130px;margin:0 auto 1rem}
.med-breath-core{position:absolute;top:50%;left:50%;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#3b4a6e,#171f33 70%);box-shadow:0 0 34px 4px rgba(90,140,220,.28), inset 0 0 18px rgba(160,190,255,.18);animation:medBreathe 5.6s ease-in-out infinite}
.med-breath-orbit{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,162,75,.35);opacity:.8}
.med-breath-orbit.o1{animation:medOrbit 9s linear infinite}
.med-breath-orbit.o2{inset:12px;border-color:rgba(122,150,255,.28);animation:medOrbit 13s linear infinite reverse}
.med-breath-orbit.o3{inset:24px;border-color:rgba(201,162,75,.22);animation:medOrbit 17s linear infinite}
.med-breath-orbit::before{content:'';position:absolute;top:-2px;left:50%;width:4px;height:4px;border-radius:50%;background:#e8d9a2;box-shadow:0 0 8px 2px rgba(232,217,162,.55)}
@keyframes medOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes medBreathe{0%,100%{transform:translate(-50%,-50%) scale(.82)}50%{transform:translate(-50%,-50%) scale(1)}
}
.med-particles{position:absolute;inset:-14px;pointer-events:none}
.med-particles i{position:absolute;width:2px;height:2px;border-radius:50%;background:rgba(190,170,255,.75);opacity:0;animation:medFloat 7s ease-in-out infinite}
.med-particles i:nth-child(1){left:12%;top:30%;animation-delay:0s}
.med-particles i:nth-child(2){left:80%;top:18%;animation-delay:1.2s}
.med-particles i:nth-child(3){left:64%;top:78%;animation-delay:2.4s}
.med-particles i:nth-child(4){left:28%;top:84%;animation-delay:3.6s}
.med-particles i:nth-child(5){left:44%;top:6%;animation-delay:4.6s}
.med-particles i:nth-child(6){left:90%;top:58%;animation-delay:5.4s}
@keyframes medFloat{0%{opacity:0;transform:translateY(6px) scale(.7)}35%{opacity:.9}100%{opacity:0;transform:translateY(-14px) scale(1.15)}}
.med-voice-selector{display:flex;align-items:center;gap:.4rem;margin:.6rem 0 .4rem;flex-wrap:wrap}
.med-voice-label{font-size:.8rem;color:var(--muted,#8A94A3);text-transform:uppercase;letter-spacing:.08em}
.med-voice-opt{background:transparent;border:1px solid #2a3550;color:#B9C2CF;border-radius:999px;padding:5px 14px;font-size:.82rem;cursor:pointer;transition:all .25s ease}
.med-voice-opt:hover{border-color:#C9A24B88;color:#E8ECF2}
.med-voice-opt.is-active{background:linear-gradient(135deg,#C9A24B,#a8863a);color:#0a0d14;border-color:transparent;font-weight:600}
.med-creating-art{font-size:2rem;text-align:center;margin:.4rem 0}
.med-result-desc{color:#CBD3DF;font-size:.92rem;margin:.4rem 0}
.med-result-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted,#8A94A3);margin:.45rem 0}
.med-voice-note{color:#C9A24B}
.med-player{margin:.5rem 0 .7rem}
.med-aff-list{display:grid;gap:.6rem;margin-top:.6rem}
@media (max-width:560px){
  .med-starter-grid{grid-template-columns:1fr}
  .med-curated-head{flex-direction:column;align-items:flex-start}
}
@media (min-width:561px) and (max-width:859px){
  .med-starter-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:860px){
  .med-starter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── M I S   R E C U R S O S  (Mi Proceso → tarjetas premium) ──────────── */
.med-resources-grid{display:grid;gap:.8rem;margin-top:.7rem}
.med-resource-card{background:linear-gradient(160deg,#0b1018,#0e1522);border:1px solid rgba(201,162,75,.22);border-radius:14px;padding:.9rem 1rem}
.med-resource-head{display:flex;justify-content:space-between;gap:.5rem;align-items:flex-start}
.med-resource-head h4{margin:0 0 .15rem;color:#E8ECF2;font-size:.98rem}
.med-resource-meta{display:flex;gap:.9rem;flex-wrap:wrap;font-size:.8rem;color:#8A94A3;margin:.45rem 0 .55rem}
.med-resource-src{color:#B9C2CF}
.med-resource-card .btn-med-unlink{margin-top:.5rem}
@media (max-width:560px){.med-resource-head{flex-direction:column}}

/* ── MI FILOSOFÍA — experiencia editorial de escucha ─────────────────── */
.philosophy-view{width:min(100%,760px);margin:0 auto;padding:1.2rem 0 3rem}
.philosophy-cover{width:min(100%,290px);aspect-ratio:2/3;object-fit:cover;object-position:50% 34%;border-radius:18px;margin:0 auto 1.4rem;border:1px solid rgba(218,183,90,.25);box-shadow:0 18px 50px rgba(0,0,0,.38)}
.philosophy-view h1{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.1;margin:.35rem 0 .45rem;color:var(--text-primary)}
.philosophy-subtitle{font-size:1.08rem;color:var(--gold-light);max-width:600px}
.philosophy-lead{color:var(--text-secondary);font-size:1rem;line-height:1.8;margin:1.3rem 0 1.5rem}
.philosophy-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin:1rem 0 1.4rem}
.philosophy-actions .btn{min-height:46px}
.philosophy-action-meta{color:var(--gold-light);margin-left:.25rem}
.philosophy-progress{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:.75rem 0;color:var(--text-tertiary);font-size:.86rem}
.philosophy-progress strong{color:var(--gold-light)}
.philosophy-chapters{display:grid;gap:.75rem;margin-top:1.25rem;scroll-margin-top:1rem}
.philosophy-chapter{border:1px solid var(--border-subtle);border-radius:14px;background:rgba(13,23,36,.62);overflow:hidden}
.philosophy-chapter-head{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1rem;color:var(--text-primary);font-weight:600}
.philosophy-chapter-head small{color:var(--gold-light);font-weight:500}
.philosophy-piece-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border-subtle)}
.philosophy-piece-link{display:flex;align-items:center;gap:.6rem;text-align:left;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.055);color:var(--text-secondary);min-width:0}
.philosophy-piece-link:hover{background:rgba(218,183,90,.08);color:var(--text-primary)}
.philosophy-piece-link span{color:var(--gold-light);font-size:.78rem;min-width:2rem}
.philosophy-piece-link strong{font-size:.86rem;font-weight:500;overflow-wrap:anywhere}
.philosophy-back-link{color:var(--text-secondary);font-size:.9rem;padding:.25rem 0;margin-bottom:1.2rem}
.philosophy-back-link:hover{color:var(--gold-light)}
.philosophy-piece-chapter{color:var(--text-tertiary);margin-top:-.15rem;margin-bottom:1.2rem}
.philosophy-audio{display:block;width:100%;height:48px;margin:1.35rem 0 .7rem;accent-color:var(--gold-primary)}
.philosophy-audio-error{color:#ffb0a8;font-size:.9rem;margin:.5rem 0}
.philosophy-piece-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0}
.philosophy-transcript,.philosophy-reflection,.philosophy-answer{white-space:pre-wrap;border-left:2px solid var(--gold-primary);background:rgba(255,255,255,.035);padding:1rem 1.1rem;border-radius:0 10px 10px 0;color:var(--text-secondary);line-height:1.75;margin:.8rem 0}
.philosophy-reflection p{margin-top:.4rem;color:var(--text-primary)}
.philosophy-nav{display:flex;justify-content:space-between;gap:.7rem;margin-top:1.5rem;border-top:1px solid var(--border-subtle);padding-top:1rem}
.philosophy-finale{margin-top:2rem;padding:1.3rem;border:1px solid var(--gold-border);border-radius:16px;background:linear-gradient(145deg,rgba(218,183,90,.11),rgba(13,23,36,.72))}
.philosophy-finale h2{font-family:var(--font-display);margin:.25rem 0 .5rem}
.philosophy-finale p{color:var(--text-secondary)}
.philosophy-ask textarea{width:100%;resize:vertical;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;padding:.85rem;color:var(--text-primary);margin:1rem 0 .75rem}
.philosophy-ask textarea:focus{outline:none;border-color:var(--gold-border);box-shadow:0 0 0 3px var(--gold-glow)}
.philosophy-answer h3{font-size:.9rem;color:var(--gold-light);margin:1rem 0 .5rem}
.philosophy-related{display:grid;gap:.35rem}
@media (max-width:560px){
  .philosophy-view{padding-top:.7rem}
  .philosophy-cover{width:min(68vw,250px)}
  .philosophy-lead{font-size:.94rem;line-height:1.7}
  .philosophy-actions{display:grid;grid-template-columns:1fr}
  .philosophy-actions .btn{width:100%;justify-content:flex-start}
  .philosophy-piece-list{grid-template-columns:1fr}
  .philosophy-piece-link{min-height:48px}
  .philosophy-nav .btn{min-height:44px}
}

/* ── MI CUENTA (edición de perfil y seguridad) ─────────────────────── */
.ac-input{width:100%;background:#0D1624;border:1px solid var(--border-subtle);border-radius:10px;color:var(--text-primary);padding:.7rem .85rem;font-size:.92rem;font-family:inherit}
.ac-input:focus{outline:none;border-color:var(--gold-border);box-shadow:0 0 0 3px var(--gold-glow)}