/* =========================
   ROOT: TIPOGRAFÍA FLUIDA
   ========================= */
:root {
  --fs-0: 14px;
  --fs-1: 16px;
  --fs-2: 18px;
  --fs-3: 22px;
  --fs-4: 30px;
  --fs-5: 40px;
  --vw-min: 360;
  --vw-max: 1200;
  --fluid: clamp(0, (100vw - (var(--vw-min) * 1px)) / ((var(--vw-max) - var(--vw-min)) * 1px), 1);
  --text-sm: calc(var(--fs-0) + (2px * var(--fluid)));
  --text: calc(var(--fs-1) + (2px * var(--fluid)));
  --text-lg: calc(var(--fs-2) + (2px * var(--fluid)));
  --title: calc(var(--fs-3) + (4px * var(--fluid)));
  --supertitle: calc(var(--fs-4) + (6px * var(--fluid)));
  --megatitle: calc(var(--fs-5) + (8px * var(--fluid)));
}

/* ======================
   ROOT: PALETA BUHONEA
   ====================== */
:root {
  --bh-bg: #070707;
  --bh-card: rgba(255,255,255,0.04);
  --bh-glass: rgba(255,255,255,0.06);
  --bh-border: rgba(255,255,255,0.12);
  --bh-text: #f4f6ff;
  --bh-subtext: #b9bdd1;
  --bh-pink: #ff6ec7;
  --bh-purple: #8a7dff;
  --bh-accent: linear-gradient(135deg, var(--bh-pink), var(--bh-purple));
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 26px rgba(0,0,0,0.30);
  --focus-ring-c: #66bce0;
  --dur: 220ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  --wrap: 820px;
  --pad: clamp(16px, 3vw, 26px);
  --font: "Dosis", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--font);
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.55;
  color: var(--bh-text);
  background: var(--bh-bg);
  overflow-x: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.wrap { width: min(var(--wrap), calc(100% - (var(--pad) * 2))); margin-inline: auto; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.skip {
  position: absolute; left: 12px; top: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  transform: translateY(-140%);
  transition: transform var(--dur) var(--ease);
  z-index: 9999;
}
.skip:focus { transform: translateY(0); outline: none; box-shadow: 0 0 0 4px rgba(102,188,224,0.25); }

/* ===== Fondo suave (dinámico, pero sin molestar) ===== */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(255,110,199,0.08), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, rgba(138,125,255,0.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 40%, rgba(0,0,0,0.22));
  filter: saturate(1.05);
}
.bg::before{
  content:"";
  position:absolute; inset:-20%;
  background: radial-gradient(closest-side, rgba(102,188,224,0.06), transparent 60%);
  filter: blur(40px);
  animation: drift 14s var(--ease) infinite;
  opacity: 0.65;
}
@keyframes drift{
  0%{ transform: translate3d(-2%, -1%, 0); }
  50%{ transform: translate3d(2%, 1%, 0); }
  100%{ transform: translate3d(-2%, -1%, 0); }
}

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(7,7,7,0.62);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
}

.logo { display:flex; align-items:center; gap: 12px; }
.logo img {
  width: 44px; height: 44px;
}
.logo__txt { display:flex; flex-direction:column; line-height: 1.1; }
.logo__kicker {
    font-size: var(--text-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(208 34 146);
}
.logo__name { font-weight: 800; font-size: var(--text-lg); }

/* ===== Botón ===== */
.btn{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 14px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-weight: 700;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(102,188,224,0.20);
  border-color: rgba(102,188,224,0.55);
}

/* Hover distinto para el botón del header (Ir a mi panel) */
.header .btn{
  position: relative;
}
.header .btn:hover{
  transform: translateY(-2px);
  background: var(--bh-accent);
  border-color: transparent;
  color: #0b0b0b;
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}
.header .btn:active{ transform: translateY(0); filter: brightness(0.98); }

/* ===== Main ===== */
.main {
    padding: clamp(60px, 3vw, 34px) 0 30px;
    display: grid;
    place-items: center;
    padding-left: 5px;
    padding-right: 5px;
}
.hero { display: grid; gap: 18px; width: 100%; max-width: 720px; }

.h1 {
    margin: 0 0 1rem;
    font-size: var(--megatitle);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: 1.9px;
}
.p{
  margin: 0 0 1rem;
  font-size: var(--text-lg);
  color: rgba(185,189,209,0.92);
}
.p strong{ color: var(--bh-text); font-weight: 800; }

.chips{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 3rem; }
.chip{
  padding: 8px 12px;
  border-radius: 5px;
  font-size: var(--text-lg);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(244,246,255,0.92);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
  will-change: transform;
}

.chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.chip:active{ transform: translateY(0); filter: brightness(0.98); }

/* ===== Nota perfil ===== */
.note {
    border-radius: var(--radius);
    background: rgba(255,255,255,0.04);
    box-shadow: var(--shadow);
    padding: 14px 30px;
    border: 2px solid rgba(255, 110, 199, 0.22);
    margin-top: 2rem;
    overflow: hidden;
}
.note__tag {
    display: inline-flex;
    padding: 6px 10px;
    border-top-left-radius: 10px;
    font-size: var(--text-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 800;
    background: rgba(255,110,199,0.12);
    border: 1px solid rgba(255,110,199,0.22);
    margin-bottom: 20px;
    position: relative;
    left: -30px;
    top: -15px;
}
.note__text{ margin: 0; color: rgba(185,189,209,0.95); font-size: var(--text); }
.path {
    display: inline-block;
    padding: 2px 15px;
    border-radius: 5px;
    color: white;
    font-size: var(--text-sm);
    margin-left: 0px;
    margin-right: 5px;
    font-weight: bold;
    background: rgba(255, 110, 199, 0.12);
    border: 1px solid rgba(255, 110, 199, 0.22);
    margin-top: 10px;
}
.boom{ color: var(--bh-text); font-weight: 700; }

/* ===== Desplegable (simple + con +/− via CSS) ===== */
.drop{
  border-radius: 5px;
  border: 5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
}
.drop__sum{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 800;
  font-size: var(--title);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.drop__sum::-webkit-details-marker{ display:none; }

.drop__sum::after {
    content: "";
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: rgba(255, 110, 199, 0.12);
    border: 1px solid rgba(255, 110, 199, 0.22);

    /* Dibuja el + con dos líneas (animable a −) */
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 14px 2px, 2px 14px;

    transition:
      transform var(--dur) var(--ease),
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      background-size var(--dur) var(--ease);
}
.drop[open] .drop__sum::after{
  transform: translateY(-1px) rotate(180deg);
  background-color: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  /* Oculta la línea vertical -> queda el − */
  background-size: 14px 2px, 2px 0px;
}

/* animación clean: panel 0fr->1fr */
.drop__panel{
  display:grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.drop[open] .drop__panel{
  grid-template-rows: 1fr;
  opacity: 1;
}
.drop__content{
  overflow:hidden;
  padding: 0 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(-6px);
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}

.drop[open] .drop__content{ transform: translateY(0); }

.fine {
    margin: 2rem 2rem 1rem;
    font-size: var(--text-sm);
    color: rgba(185,189,209,0.90);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(244, 246, 255, 0.92);
    padding: 12px;
    border-radius: 15px;
    text-align: center;
}

strong {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

/* ===== Footer ===== */
.footer{
  padding: 18px 0 26px;
  color: rgba(185,189,209,0.75);
  font-size: var(--text-sm);
}

/* ===== Reveal ===== */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

body.is-leaving{
  transition: opacity 200ms var(--ease);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  .bg::before{ animation:none; }
  .reveal{ opacity: 1; transform:none; transition:none; }
  body.is-leaving{ transition:none; opacity: 1; }
}