@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Syne:wght@700&display=swap');

:root {
  --color-primary:   #6F00FF;
  --color-secondary: #CCCCFF;
  --color-bg-light:  #F4F2FF;
  --color-accent:    #00FFC8;
  --color-text-dark: #52525B;

  --spacing: 1rem;
  --radius:  1rem;
  --shadow:  0 10px 30px rgba(0,0,0,.08);
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  margin: 0;
  padding: var(--spacing);
  height: 100%;
  scroll-behavior: smooth;

  /* FONDO (grid) */
  background-color: #fff;
  background-image:
    linear-gradient(rgba(82,82,91,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,82,91,0.1) 1px, transparent 1px);
  background-size: 30px 30px;
}

body {
  margin: 0;
  min-height: 100%;
  font: 500 18px/1.5 "Space Grotesk", sans-serif;
  color: var(--color-text-dark);
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

a:focus,
button:focus,
.rail:focus {
  outline: 2px dashed var(--color-accent);
  outline-offset: 3px;
}

/* Layout principal */
.screen {
  min-height: calc(100vh - 2 * var(--spacing));
  display: grid;
  place-items: center;
}

.shell {
  width: min(1100px, 100%);
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: calc(var(--radius) + .5rem);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(82,82,91,.15);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}

/* overlay suave estilo “hero” */
.shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(102,0,255,0.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,255,200,0.12) 0%, transparent 45%);
  pointer-events: none;
}

.shell > * { position: relative; z-index: 1; }

.brand {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.brand-logo { width: 9rem; }
.brand-tag  { font-weight: 700; color: rgba(82,82,91,.85); }

.layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}

.title {
  font: 700 clamp(2.2rem, 4.5vw, 4rem) / 1.05 "Syne", sans-serif;
  letter-spacing: -0.02em;
}

.accent { color: var(--color-primary); }

.bio {
  margin-top: 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  max-width: 58ch;
}

.now {
  margin-top: 1.25rem;
  padding: .9rem 1rem;

  border-radius: var(--radius);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(82,82,91,.12);
}

.now-title {
  display: flex;
  align-items: center;
  gap: .5rem;

  font: 700 1rem "Syne", sans-serif;
  color: var(--color-primary);
  margin-bottom: .35rem;
}

.now-title img {
  width: 1rem;
  opacity: .85;
}

.now-text {
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.45;
}

.meta {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border-radius: 999px;
  background: rgba(244,242,255,.9);
  border: 1px solid rgba(111,0,255,.12);
  font-weight: 700;
  font-size: .95rem;
}

.side {
  display: grid;
  gap: 1rem;
}

.links {
  display: grid;
  gap: .75rem;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
  border-radius: 999px;
  text-decoration: none;

  background: rgba(111,0,255,.10);
  border: 1px solid rgba(111,0,255,.20);
  font-weight: 800;
  transition: transform .15s ease, background .2s ease;
}

.link-btn i:first-child { width: 1.2rem; text-align: center; }

.link-btn:hover {
  transform: translateY(-2px);
  background: rgba(111,0,255,.16);
}

.link-btn.subtle {
  background: rgba(82,82,91,.06);
  border-color: rgba(82,82,91,.14);
}

.carousel {
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(244,242,255,.7);
  border: 1px solid rgba(82,82,91,.12);
}

.mini-title {
  font: 700 1.1rem "Syne", sans-serif;
  color: var(--color-primary);
  margin-bottom: .75rem;
}

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: .75rem;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .25rem;
}

.card {
  scroll-snap-align: start;
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(82,82,91,.12);
}

.card h3 {
  font: 700 1.1rem "Syne", sans-serif;
  margin-bottom: .35rem;
}

.card-title {
  display: flex;
  align-items: center;
  gap: .5rem;

  font: 700 1.1rem "Syne", sans-serif;
  margin-bottom: .35rem;
}

.card-title img {
  width: 1.1rem;
  height: auto;
  flex-shrink: 0;
}

.card p {
  font-weight: 500;
  margin-bottom: .75rem;
}

.chip {
  display: inline-flex;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  background: rgba(0,255,200,.14);
  border: 1px solid rgba(0,255,200,.22);
}

.hint {
  margin-top: .6rem;
  font-size: .95rem;
  opacity: .8;
}

.foot {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
  opacity: .9;
}

.foot a { text-decoration: underline; }