:root{
  --bg: #faf8ff;
  --card: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --accent: #8ab6f9; /* azul cielo pastel */
  --accent-2: #f7b2d9; /* rosa pastel */
  --ring: #94a3b8;
  --shadow: 0 10px 24px rgba(31,41,55,.08);
}

*{box-sizing: border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg),#fff);
  line-height:1.6;
}

.container{max-width:1024px;margin:0 auto;padding:0 1rem}
.section{padding:3rem 0}

.site-header{
  position: sticky; top:0; z-index: 1000;
  background:#fff; box-shadow: var(--shadow);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 1rem; gap:1rem;
}
.logo{font-weight:800; letter-spacing:.3px; text-decoration:none; color:var(--ink)}
.nav-links{
  display:flex; gap:1rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; color:var(--ink); padding:.5rem .75rem; border-radius:.5rem;
}
.nav-links a:hover{ background: #f3f4f6 }
.nav-toggle{
  display:none; background:transparent; border:1px solid #e5e7eb; padding:.4rem .6rem; border-radius:.5rem;
}
.lang-switch select{
  border:1px solid #e5e7eb; border-radius:.5rem; padding:.4rem .6rem; background:#fff;
}

/* Responsive nav */
@media (max-width: 880px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute; top:60px; right:1rem; background:#fff; border:1px solid #e5e7eb;
    border-radius:.75rem; padding:.5rem; flex-direction:column; width:min(220px,90vw);
    display:none;
  }
  .nav-links.is-open{display:flex}
}

.hero{
  display:grid; place-items:center; padding:4rem 1rem 2rem;
  background: radial-gradient(1200px 600px at 10% -10%, var(--accent-2) 0%, transparent 60%),
              radial-gradient(1200px 600px at 110% -20%, var(--accent) 0%, transparent 60%);
}
.hero-content{ text-align:center; max-width:760px }
.hero-photo{
  width:140px; height:140px; border-radius:50%; object-fit:cover;
  border:6px solid #fff; box-shadow: var(--shadow);
  margin-bottom:1rem;
}
.hero h1{ margin:.25rem 0 0; font-size:clamp(1.4rem,1.2rem + 1.8vw,2.2rem) }
.hero-quote{ color:var(--muted); margin:.5rem 0 0 }

.story h2, .carousel h2{ font-size:1.4rem; margin:.25rem 0 1rem }
.story p{ color:#374151; font-size:1.05rem }

.carousel-track{
  position:relative; background:var(--card); border:1px solid #eef2f7; border-radius:1rem;
  padding:1rem; box-shadow: var(--shadow);
  outline:none;
}
.carousel-slides{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:.5rem;
}
.slide{ display:none }
.slide.is-active{ display:block; }
.slide img{ width:100%; height:clamp(220px,40vw,420px); object-fit:cover; border-radius:.75rem }
.caption{ margin:.5rem 0 0; color:var(--muted); font-size:.95rem }

.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; border:1px solid #e5e7eb; border-radius:.7rem; width:42px; height:42px;
  display:grid; place-items:center; cursor:pointer; box-shadow: var(--shadow);
}
.carousel-btn:hover{ background:#f9fafb }
.carousel-btn.prev{ left:.5rem }
.carousel-btn.next{ right:.5rem }

.dots{ display:flex; gap:.4rem; justify-content:center; margin-top:.75rem }
.dot{
  width:10px; height:10px; border-radius:999px; border:1px solid #cbd5e1; background:#fff;
}
.dot.is-active{ background: var(--accent) }

.cta .btn{
  display:inline-block; background: var(--accent); color:#0b3a73; font-weight:700;
  text-decoration:none; padding:.9rem 1.2rem; border-radius:.8rem; box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.cta .btn:hover{ transform: translateY(-1px) }

.site-footer{
  padding:2rem 1rem; text-align:center; color:var(--muted); font-size:.95rem;
  border-top:1px solid #eef2f7; background:#fff;
}

/* Accesibilidad: focus anillo visible solo al navegar con teclado */
.user-is-tabbing :focus{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Utilidades */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ---------- Timeline ---------- */
.under-nav{
  padding: 1.25rem 0 0.25rem;
  border-bottom: 1px solid #eef2f7;
}
.timeline-hero h1{ margin: 0; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.8rem); }
.timeline-hero .muted{ color: var(--muted); margin-top: .25rem; }

.year-bar{
  display: flex; gap: .5rem; flex-wrap: wrap;
  background: #fff; border: 1px solid #eef2f7; border-radius: .75rem;
  padding: .5rem; box-shadow: var(--shadow);
}
.year-chip{
  appearance: none; border: 1px solid #e5e7eb; background: #fff; color: var(--ink);
  padding: .5rem .75rem; border-radius: 999px; cursor: pointer; transition: transform .12s ease;
}
.year-chip:hover{ transform: translateY(-1px); }
.year-chip.is-active{ background: var(--accent); border-color: transparent; color: #0b3a73; font-weight: 700; }

/* Milestones */
.milestones{
  display: grid; gap: 1rem;
}
.milestone{
  background: var(--card); border: 1px solid #eef2f7; border-radius: 1rem; box-shadow: var(--shadow);
  overflow: clip;
}
.milestone-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1rem 0.5rem 1rem;
}
.milestone-title{
  margin: 0; font-size: 1.1rem;
}
.milestone .toggle{
  border: 1px solid #e5e7eb; background: #fff; border-radius: .5rem; width: 38px; height: 32px;
  cursor: pointer;
}
.milestone-body{
  padding: .25rem 1rem 1rem 1rem; animation: slideDown .18s ease-out;
}
.milestone[aria-expanded="false"] .milestone-body{ display: none; }
.note{ color: #374151; }

/* Fondos pastel por año en <body> */
.bg-2009{
  background:
    radial-gradient(900px 500px at 10% -10%, #f7b2d94d 0%, transparent 60%),
    linear-gradient(180deg, #faf8ff, #ffffff);
}
.bg-2014{
  background:
    radial-gradient(900px 500px at 90% -10%, #8ab6f94d 0%, transparent 60%),
    linear-gradient(180deg, #faf8ff, #ffffff);
}
.bg-2019{
  background:
    radial-gradient(900px 500px at 0% 0%, #ffd6a84d 0%, transparent 60%),
    linear-gradient(180deg, #faf8ff, #ffffff);
}
.bg-2021{
  background:
    radial-gradient(900px 500px at 100% 0%, #a7f3d04d 0%, transparent 60%),
    linear-gradient(180deg, #faf8ff, #ffffff);
}
.bg-2023{
  background:
    radial-gradient(900px 500px at 10% -10%, #c7d2fe4d 0%, transparent 60%),
    linear-gradient(180deg, #faf8ff, #ffffff);
}
.bg-2025{
  background:
    radial-gradient(900px 500px at 90% -10%, #fde68a4d 0%, transparent 60%),
    linear-gradient(180deg, #faf8ff, #ffffff);
}

/* Animación sutil al expandir */
@keyframes slideDown{
  from{ opacity:.6; transform: translateY(-2px); }
  to{ opacity:1; transform: translateY(0); }
}
/* ===== Fondo: overlay con fade ===== */
.bg-fx{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 0; /* por debajo del header (que tiene z:1000) y contenido */
  background:
    radial-gradient(1200px 600px at 12% -10%, var(--bg-fx-color, #0000) 0%, transparent 60%),
    radial-gradient(1200px 600px at 110% -20%, color-mix(in oklab, var(--bg-fx-color, #0000) 40%, transparent) 0%, transparent 60%);
}

/* Cuando “pulsa” el cambio de año */
.bg-fx.is-on { opacity: 1; }

/* Set de colores por año (usa las mismas paletas pastel) */
.bg-2009 { --bg-fx-color: #f7b2d980; } /* rosa suave */
.bg-2014 { --bg-fx-color: #8ab6f980; } /* azul cielo */
.bg-2019 { --bg-fx-color: #ffd6a880; } /* durazno */
.bg-2021 { --bg-fx-color: #a7f3d080; } /* verde menta */
.bg-2023 { --bg-fx-color: #c7d2fe80; } /* lavanda */
.bg-2025 { --bg-fx-color: #fde68a80; } /* amarillo suave */

/* ===== Micro-animaciones en UI ===== */
.year-chip{
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.year-chip.is-active{ transform: translateY(-1px) scale(1.02); }

/* Milestone: fade+slide al abrir */
.milestone-body{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.milestone[aria-expanded="true"] .milestone-body{
  opacity: 1;
  transform: translateY(0);
  display: block; /* asegúrate que sea visible */
}
/* ---------- Trading ---------- */
.trading-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 960px){
  .trading-grid{ grid-template-columns: 1fr; }
}
.card{
  background: var(--card); border:1px solid #eef2f7; border-radius:1rem; box-shadow: var(--shadow);
  padding: 1rem;
}
.card h2{ margin-top: 0; font-size: 1.15rem; }

#noteText{
  width: 100%;
  border:1px solid #e5e7eb; border-radius:.6rem; padding:.7rem .8rem; font-size:1rem; background:#fff;
  margin: .5rem 0 .5rem 0;
}
.notes-list{ list-style: none; padding: 0; margin: .5rem 0 0 0; display: grid; gap: .5rem; }
.note-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem;
  border:1px solid #e5e7eb; border-radius:.6rem; padding:.6rem .7rem; background:#fff;
}
.note-time{ display:block; font-size:.85rem; color: var(--muted); margin-bottom: .25rem; }
.note-text{ margin: 0; }
.note-del{
  border:1px solid #e5e7eb; background:#fff; border-radius:.5rem; width:36px; height:32px; cursor:pointer;
}

.portfolio-wrap{
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; align-items: start;
}
@media (max-width: 960px){
  .portfolio-wrap{ grid-template-columns: 1fr; }
}
.portfolio-table table{
  width:100%; border-collapse: collapse; font-size: .98rem;
}
.portfolio-table th, .portfolio-table td{
  border-bottom:1px solid #eef2f7; padding:.6rem .5rem; text-align:left;
}
.chart-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem;
}
/* Portfolio controls */
.portfolio-controls{
  display: grid; gap: .75rem; margin-bottom: 1rem;
}
.portfolio-controls .tf-group{
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.portfolio-controls .add-group{
  display: grid; grid-template-columns: 140px 140px 1fr auto; gap: .5rem; align-items: end;
}
.portfolio-controls .inline{ display:flex; flex-direction:column; gap:.3rem; }
.portfolio-controls .inline.grow input{ width: 100%; }
.actions-col{ width: 110px; }
/* ===== Mini-Browser (Automations) ===== */
.wrap{ max-width:1120px; margin:40px auto; padding:0 20px; }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:22px; padding:20px; box-shadow:0 10px 30px rgba(15,18,38,.06), 0 2px 8px rgba(15,18,38,.04); margin-bottom:24px; }
.card-title{ margin:0 0 6px; font-weight:800; letter-spacing:-0.02em; }
.card-subtitle{ margin:0 0 16px; color:#6b7280; }

.controls{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.nav-btn{
  appearance:none; border:1px solid #e5e7eb; background:#fff;
  padding:10px 14px; border-radius:999px; box-shadow:0 10px 30px rgba(15,18,38,.06),0 2px 8px rgba(15,18,38,.04);
  cursor:pointer; font-weight:600;
}
.nav-btn:hover{ transform: translateY(-1px); }

.safari-frame{ background:#fff; border-radius:22px; box-shadow:0 10px 30px rgba(15,18,38,.06),0 2px 8px rgba(15,18,38,.04); overflow:hidden; border:1px solid #e5e7eb; }
.safari-topbar{ padding:12px; background:linear-gradient(180deg,#f8f9fb 0%, #eef1f6 100%); border-bottom:1px solid #e5e7eb; }
.traffic{ display:flex; gap:8px; padding:0 8px 10px; }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.dot.red{ background:#ff5f56; } .dot.yellow{ background:#ffbd2e; } .dot.green{ background:#27c93f; }

.toolbar{ display:grid; grid-template-columns:auto auto 1fr auto; gap:10px; align-items:center; }
.circle-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid #e5e7eb; background:#fff; box-shadow:0 10px 30px rgba(15,18,38,.06),0 2px 8px rgba(15,18,38,.04);
  font-size:18px; line-height:34px; text-align:center; cursor:pointer;
}
.urlbar{
  height:40px; border:1px solid #e5e7eb; border-radius:999px; background:#fff;
  display:flex; align-items:center; gap:10px; padding:0 14px; box-shadow:0 10px 30px rgba(15,18,38,.06),0 2px 8px rgba(15,18,38,.04);
  font-weight:600; color:#1f2937; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.urlbar .lock{ opacity:.7; }

.iframe-wrap{ position:relative; height:70vh; background:#fff; }
#iframeLoading{ position:absolute; inset:0; display:grid; place-items:center; }
#miniFrame{ width:100%; height:100%; border:0; display:block; background:#fff; }

.fallback{ position:absolute; inset:0; background:linear-gradient(180deg,#ffffff 0%,#f6f7fb 100%); display:flex; align-items:center; justify-content:center; padding:24px; }
.hidden{ display:none; }
.fallback-card{
  width:min(520px, 92%); border:1px solid #e5e7eb; border-radius:16px; padding:20px; background:#fff;
  box-shadow:0 10px 30px rgba(15,18,38,.06), 0 2px 8px rgba(15,18,38,.04);
}
.fallback-card h3{ margin:0 0 8px; }
.fallback-card p{ color:#6b7280; margin:6px 0; }
.fallback-card a{
  display:inline-block; margin-top:10px; font-weight:700; text-decoration:none;
  border:1px solid #e5e7eb; padding:10px 14px; border-radius:12px; background:#fff;
}