:root {
  color-scheme: light;
  --blue-900: #083f7a;
  --blue-700: #1464a3;
  --blue-100: #dff4ff;
  --sky-50: #f2fbff;
  --mint-500: #31bfa6;
  --mint-100: #dff8ee;
  --coral-500: #ee6f68;
  --coral-100: #ffe7e1;
  --yellow-400: #ffd36a;
  --yellow-100: #fff5cf;
  --ink: #162238;
  --muted: #5f6c7b;
  --line: #d9e4ee;
  --surface: #ffffff;
  --soft: #f7fbf6;
  --shadow: 0 18px 45px rgba(23, 104, 132, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: visible;
  color: var(--ink);
  background:
    linear-gradient(180deg, #fffaf0 0, var(--sky-50) 34%, #f7fbf6 100%);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea {
  font: inherit;
}

button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--yellow-400);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(16px, 4vw, 44px);
  background: rgba(255, 253, 246, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 850;
  color: var(--blue-900);
}

.brand-mark {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.main-nav,
.header-actions {
  display: none;
}

.main-nav.open,
.header-actions.open {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.main-nav a,
.ghost-link,
.primary-link,
.text-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 9px 12px;
  border: 1px solid transparent;
  font-weight: 750;
}

.main-nav a.active {
  color: var(--blue-900);
  background: var(--yellow-100);
}

.ghost-link {
  border-color: var(--line);
  background: #fff;
}

.primary-link,
.primary-button {
  border: 0;
  color: #fff;
  background: #0d6b9f;
  box-shadow: 0 12px 24px rgba(8, 63, 122, 0.22);
}

.text-button {
  color: var(--blue-900);
  background: transparent;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.menu-button span {
  width: 18px;
  height: 2px;
  display: block;
  background: var(--blue-900);
  margin: 2px 0;
}

main {
  min-height: calc(100vh - 180px);
  overflow: visible;
}

.section {
  padding: clamp(44px, 8vw, 86px) clamp(16px, 4vw, 48px);
}

.section-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.hero {
  min-height: calc(100vh - 88px);
  display: grid;
  align-items: end;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(8, 55, 102, 0.9), rgba(18, 121, 152, 0.52), rgba(255, 211, 106, 0.18)),
    url("/assets/hero-classroom.png") center / cover;
  padding: clamp(28px, 7vw, 72px) clamp(16px, 4vw, 48px);
}

.hero-content {
  width: min(760px, 100%);
  padding-bottom: clamp(34px, 8vw, 78px);
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #d89500;
}

.hero .eyebrow {
  color: var(--yellow-400);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.2rem, 5.8vw, 4.7rem);
  max-width: 12ch;
}

h2 {
  font-size: clamp(1.55rem, 3.2vw, 2.6rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0;
  color: var(--muted);
}

.hero p {
  max-width: 58ch;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 2vw, 1.22rem);
}

.hero-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 11px 16px;
  font-weight: 850;
}

.secondary-button {
  border: 1px solid var(--line);
  color: var(--blue-900);
  background: #fff;
}

.danger-button {
  border: 0;
  color: #fff;
  background: #b63c3c;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.two,
.grid.three,
.dashboard-grid {
  grid-template-columns: 1fr;
}

.card,
.resource-card,
.form-panel,
.admin-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(8, 63, 122, 0.06);
}

.card,
.resource-card {
  padding: 18px;
}

.card {
  border-top: 6px solid var(--yellow-400);
}

.grid.three .card:nth-child(2) {
  border-top-color: var(--mint-500);
}

.grid.three .card:nth-child(3) {
  border-top-color: var(--coral-500);
}

.card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 14px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--mint-100);
  color: var(--blue-900);
  font-size: 0.83rem;
  font-weight: 800;
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 5vw, 54px);
  align-items: center;
}

.media-frame {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.media-frame img {
  width: 100%;
  display: block;
}

.page-title {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}

.page-title p {
  max-width: 72ch;
}

.form-wrap {
  width: min(880px, 100%);
  margin: 0 auto;
}

.register-layout {
  display: grid;
  width: min(1120px, 100%);
  gap: 22px;
}

.register-visual {
  min-height: 290px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(8, 63, 122, 0.08);
}

.register-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.login-page {
  background:
    linear-gradient(135deg, rgba(223, 244, 255, .72), transparent 38%),
    linear-gradient(315deg, rgba(255, 245, 207, .66), transparent 42%),
    #f9fcff;
}

.login-shell {
  display: grid;
  gap: 30px;
  align-items: stretch;
}

.login-main {
  display: grid;
  align-content: center;
  gap: 20px;
}

.login-intro {
  display: grid;
  gap: 12px;
}

.login-intro h1 {
  max-width: 680px;
  margin: 0;
  color: var(--blue-900);
  font-size: clamp(2.15rem, 4.8vw, 3.65rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.login-intro > p:last-of-type {
  max-width: 66ch;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.login-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.login-benefits li {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(20, 100, 163, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  color: var(--blue-900);
  font-size: .88rem;
  font-weight: 800;
}

.login-benefits li span {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow-100);
  color: var(--blue-700);
}

.login-form-card {
  width: 100%;
  padding: clamp(22px, 4vw, 32px);
  border-color: rgba(20, 100, 163, .18);
  box-shadow: 0 18px 42px rgba(8, 63, 122, .11);
}

.login-form-card .button-row {
  align-items: stretch;
  margin-top: 22px;
}

.login-form-card .button-row > * {
  flex: 1 1 180px;
}

.login-form-card .access-helper {
  margin: 18px 0 0;
  text-align: center;
}

.login-trust {
  margin: -6px 4px 0;
  color: var(--muted);
  font-size: .83rem;
  line-height: 1.45;
}

.login-visual {
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(20, 100, 163, .15);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(8, 63, 122, .14);
}

.login-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 520px) {
  .login-benefits { grid-template-columns: 1fr; }
  .login-visual { min-height: 360px; }
}

.form-panel,
.admin-panel {
  padding: clamp(18px, 4vw, 30px);
}

.form-intro {
  display: grid;
  gap: 6px;
  margin: 6px 0 18px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--yellow-100);
  border-left: 6px solid var(--yellow-400);
}

.form-intro + .form-grid {
  margin-bottom: 24px;
}

.form-intro h2 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-weight: 780;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  min-height: 46px;
  width: 100%;
  border: 1px solid #c9d8e6;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}

.field textarea {
  min-height: 104px;
  resize: vertical;
}

.check-field {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  margin-top: 8px;
}

.check-field input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.check-field a {
  color: var(--blue-900);
  font-weight: 850;
  text-decoration-color: rgba(13, 107, 159, .35);
  text-underline-offset: 3px;
}

.helper {
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-page {
  background:
    radial-gradient(circle at 9% 8%, rgba(255, 225, 236, .72) 0 96px, transparent 97px),
    radial-gradient(circle at 93% 18%, rgba(255, 229, 151, .48) 0 112px, transparent 113px),
    linear-gradient(180deg, #f2fbff 0%, #ffffff 54%, #f8fcff 100%);
}

.legal-shell {
  display: grid;
  gap: 22px;
}

.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid #d5e8f8;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(237, 248, 255, .94));
  box-shadow: 0 16px 36px rgba(8, 63, 122, .08);
}

.legal-hero h1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--blue-900);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0;
}

.legal-hero h1 span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #0657f9, #40c4ff);
  font-size: 22px;
}

.legal-hero p:not(.eyebrow) {
  max-width: 62ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.06rem;
}

.legal-hero img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  justify-self: end;
}

.legal-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(8, 63, 122, .07);
}

.legal-section {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid #e0ecf7;
  border-left: 6px solid #0d6b9f;
  border-radius: 8px;
  background: linear-gradient(90deg, #f6fbff, #fff);
}

.legal-section:nth-child(2) { border-left-color: #f5b11b; background: linear-gradient(90deg, #fffaf0, #fff); }
.legal-section:nth-child(3) { border-left-color: #20a766; background: linear-gradient(90deg, #f3fff7, #fff); }
.legal-section:nth-child(4) { border-left-color: #9557f2; background: linear-gradient(90deg, #fbf7ff, #fff); }
.legal-section:nth-child(5) { border-left-color: #f05287; background: linear-gradient(90deg, #fff7fb, #fff); }

.legal-section-title {
  display: flex;
  gap: 10px;
  align-items: center;
}

.legal-section-title span {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0d6b9f;
  font-size: .9rem;
  font-weight: 850;
}

.legal-section:nth-child(2) .legal-section-title span { background: #f5b11b; }
.legal-section:nth-child(3) .legal-section-title span { background: #20a766; }
.legal-section:nth-child(4) .legal-section-title span { background: #9557f2; }
.legal-section:nth-child(5) .legal-section-title span { background: #f05287; }

.legal-section h2 {
  margin: 0;
  color: var(--blue-900);
  font-size: 1.15rem;
}

.legal-section p {
  margin: 0;
  color: var(--muted);
}

.legal-section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-section li {
  position: relative;
  padding-left: 18px;
  color: var(--ink);
  font-size: .96rem;
  line-height: 1.38;
}

.legal-section li::before {
  position: absolute;
  top: .55em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0d6b9f;
  content: "";
}

.legal-section:nth-child(2) li::before { background: #f5b11b; }
.legal-section:nth-child(3) li::before { background: #20a766; }
.legal-section:nth-child(4) li::before { background: #9557f2; }
.legal-section:nth-child(5) li::before { background: #f05287; }

.legal-note {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--blue-900);
  background: var(--yellow-100);
  font-weight: 750;
}

@media (max-width: 640px) {
  .legal-card {
    grid-template-columns: 1fr;
  }

  .legal-hero {
    grid-template-columns: 1fr;
  }

  .legal-hero img {
    width: 82px;
    height: 82px;
    justify-self: start;
  }

  .legal-hero h1 {
    align-items: flex-start;
  }
}

.dashboard-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.dashboard-sidebar {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  background:
    linear-gradient(180deg, #0b5994 0%, #0f7f9c 58%, #159a8a 100%);
  color: #fff;
  box-shadow: var(--shadow);
}

.dashboard-sidebar p {
  color: rgba(255, 255, 255, 0.8);
}

.dashboard-sidebar a {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.dashboard-sidebar a:hover {
  background: rgba(255, 255, 255, 0.25);
}

.dashboard-main {
  display: grid;
  gap: 18px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat {
  padding: 16px;
  border-radius: 8px;
  background: #fffdf7;
  border: 1px solid var(--line);
  border-left: 6px solid var(--yellow-400);
}

.stat strong {
  display: block;
  font-size: 1.55rem;
  color: var(--blue-900);
}

.calendar-list,
.news-list {
  display: grid;
  gap: 10px;
}

.calendar-item,
.news-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--mint-500);
  border-radius: 8px;
  background: #fffdf7;
}

.resource-card {
  border-left: 6px solid var(--coral-500);
  background: #ffffff;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

th,
td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  color: var(--blue-900);
  background: #f0f7fd;
}

.qr-box {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.qr-box img {
  width: 180px;
  height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--blue-900);
  font-weight: 800;
}

.site-footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px clamp(16px, 4vw, 44px);
  border-top: 1px solid var(--line);
  background: #fff;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-weight: 750;
  color: var(--blue-900);
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 14px;
  border-radius: 8px;
  color: #fff;
  background: var(--blue-900);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.empty {
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fff;
}

[hidden] { display: none !important; }

@media (min-width: 760px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
  }

  .menu-button {
    display: none;
  }

  .main-nav,
  .header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .main-nav {
    justify-content: center;
  }

  .main-nav a,
  .ghost-link,
  .primary-link,
  .text-button {
    min-height: 38px;
  }

  .grid.two,
  .split,
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .register-layout {
    grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    align-items: stretch;
  }

  .login-shell {
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
  }

  .login-visual {
    min-height: 720px;
  }

  .dashboard-shell {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
  }

  .dashboard-sidebar {
    position: sticky;
    top: 88px;
    min-height: calc(100vh - 108px);
    border-radius: 0 8px 8px 0;
  }

  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Home oficial aprobada */
.home-route { background: #fff; color: #071b5b; }
.home-route > .site-footer { display: none; }
.community-route > .site-footer { display: flex; }
.home-route .site-header { position: relative; background: #fff; border-bottom: 0; box-shadow: none; }
.home-route .site-header { width: min(960px, calc(100% - 48px)); min-height: 78px; margin: 0 auto; padding: 0; }
.home-route .brand { max-width: 145px; color: #071b5b; font-size: 15px; line-height: 1.05; }
.home-route .brand span { width: 82px; }
.home-route .brand img { width: 38px; height: 38px; }
.home-route .main-nav { gap: 25px; }
.home-route .main-nav a { color: #071b5b; font-size: 12px; font-weight: 700; }
.home-route .main-nav a.active { border-radius: 0; border-bottom-color: #0657f9; background: transparent; color: #0657f9; }
.home-route .primary-link { min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: #0657f9; box-shadow: none; color: #fff; font-size: 12px; }

.home-official { overflow: hidden; background: #fff; color: #071b5b; font-family: Arial, Helvetica, sans-serif; }
.home-shell { width: min(960px, calc(100% - 48px)); margin: 0 auto; }
.home-hero { position: relative; min-height: 386px; background: #fff; }
.home-hero::after {
  position: absolute;
  z-index: 0;
  right: 42%;
  bottom: 0;
  width: 62%;
  height: 92px;
  border-radius: 0 100% 0 0;
  background:
    linear-gradient(178deg, transparent 0 27%, #ffe6f1 28% 38%, transparent 39%),
    linear-gradient(174deg, transparent 0 43%, #f2ddff 44% 54%, transparent 55%),
    linear-gradient(170deg, transparent 0 59%, #dceeff 60% 70%, transparent 71%),
    linear-gradient(166deg, transparent 0 75%, #e4f7e9 76% 86%, transparent 87%);
  content: "";
}
.home-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 43% 57%; min-height: 386px; }
.home-hero-copy { align-self: center; padding: 20px 18px 55px 30px; }
.home-kicker { margin: 0 0 10px; color: #071b5b; font-size: 15px; letter-spacing: 3px; }
.home-hero h1 { margin: 0; color: #071b5b; font-size: 57px; font-weight: 800; line-height: .94; letter-spacing: 0; }
.home-hero h1 span { color: #0657f9; }
.home-intro { margin: 23px 0 20px; color: #071b5b; font-size: 15px; line-height: 1.45; }
.tone-pink { color: #f52c79; }
.tone-orange { color: #f3a000; }
.tone-green { color: #1fa557; }
.home-actions { display: flex; gap: 17px; }
.home-button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 39px; padding: 0 17px; border-radius: 7px; font-size: 12px; font-weight: 800; text-decoration: none; }
.home-button-primary { border: 1px solid #0657f9; background: #0657f9; color: #fff; }
.home-button-outline { border: 1px solid #0657f9; background: #fff; color: #0657f9; }
.home-hero-media { height: 386px; }
.home-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.home-story { display: grid; grid-template-columns: 36% 54%; justify-content: space-between; align-items: center; padding: 32px 56px 28px; }
.home-section-label { margin: 0 0 26px; color: #0657f9; font-size: 14px; font-weight: 800; }
.home-section-label::after { display: block; width: 20px; height: 2px; margin-top: 10px; background: #0657f9; content: ""; }
.home-story h2 { margin: 0 0 16px; color: #071b5b; font-size: 25px; line-height: 1.25; letter-spacing: 0; }
.home-story p:not(.home-section-label) { margin: 0 0 16px; color: #071b5b; font-size: 12px; line-height: 1.55; }
.home-story a { color: #0657f9; font-size: 12px; font-weight: 700; text-decoration: none; }
.home-story img { width: 100%; border-radius: 8px; }

.home-pillars { padding: 3px 61px 15px; }
.home-centered-title { margin: 0; text-align: center; color: #071b5b; font-size: 17px; font-weight: 800; letter-spacing: 0; }
.home-title-line { width: 24px; height: 2px; margin: 8px auto; background: #0657f9; }
.home-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home-pillar { display: grid; grid-template-columns: 74px 1fr; align-items: center; min-height: 123px; padding: 14px 15px; border: 1px solid; border-radius: 8px; }
.home-pillar-icon { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 50%; color: #fff; font-size: 37px; }
.home-pillar h3 { margin: 0 0 8px; font-size: 15px; }
.home-pillar p { margin: 0; color: #071b5b; font-size: 10px; line-height: 1.45; }
.home-card-line { display: block; width: 23px; height: 2px; margin-top: 14px; }
.home-pillar-emotion { border-color: #f7c9d8; background: #fffafb; }
.home-pillar-emotion h3 { color: #f52c79; }
.home-pillar-emotion .home-pillar-icon { background: #f52c79; }
.home-pillar-emotion .home-card-line { background: #f52c79; }
.home-pillar-music { border-color: #f4d9b0; background: #fffcf8; }
.home-pillar-music h3 { color: #f3a000; }
.home-pillar-music .home-pillar-icon { background: #ffa50d; }
.home-pillar-music .home-card-line { background: #f3a000; }
.home-pillar-learning { border-color: #cde2d6; background: #fbfefc; }
.home-pillar-learning h3 { color: #1fa557; }
.home-pillar-learning .home-pillar-icon { background: #28aa5d; }
.home-pillar-learning .home-card-line { background: #1fa557; }

.home-universe { padding: 0 15px 27px; }
.home-universe .home-centered-title { margin-bottom: 11px; }
.home-universe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.home-universe-card { position: relative; height: 199px; overflow: hidden; border-radius: 8px; color: #fff; text-decoration: none; }
.home-universe-card img, .home-universe-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-universe-card img { object-fit: cover; }
.home-universe-overlay { background: linear-gradient(to top, rgba(0, 54, 173, .92), transparent 67%); }
.home-universe-card:nth-child(2) .home-universe-overlay { background: linear-gradient(to top, rgba(0, 169, 155, .94), transparent 67%); }
.home-universe-card:nth-child(3) .home-universe-overlay { background: linear-gradient(to top, rgba(91, 40, 164, .94), transparent 67%); }
.home-universe-card:nth-child(4) .home-universe-overlay { background: linear-gradient(to top, rgba(238, 76, 24, .94), transparent 67%); }
.home-universe-copy { position: absolute; left: 15px; bottom: 17px; }
.home-universe-copy strong, .home-universe-copy small { display: block; }
.home-universe-copy strong { margin-bottom: 7px; font-size: 14px; }
.home-universe-copy small { font-size: 11px; line-height: 1.4; }
.home-universe-arrow { position: absolute; right: 13px; bottom: 18px; display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: #fff; color: #0657f9; font-size: 19px; }

.home-join { display: grid; grid-template-columns: 45% 55%; min-height: 167px; overflow: hidden; border-radius: 8px; background: #f3f7ff; }
.home-join-copy { align-self: center; padding: 20px 30px 20px 77px; }
.home-join h2 { margin: 0 0 8px; color: #071b5b; font-size: 27px; letter-spacing: 0; }
.home-join h2 span { color: #fa5b91; }
.home-join p { margin: 0 0 17px; color: #071b5b; font-size: 13px; }
.home-join .home-button { min-width: 300px; }
.home-join img { width: 100%; height: 167px; object-fit: cover; }

.home-footer { margin-top: 17px; padding: 25px 0 10px; background: #f3f7ff; color: #071b5b; }
.home-footer-grid { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr) 1.2fr; gap: 27px; }
.home-footer-brand > a { display: flex; align-items: center; color: #071b5b; font-size: 11px; line-height: .95; text-decoration: none; }
.home-footer-brand > a strong { color: #0657f9; font-size: 22px; }
.home-footer-brand img { width: 32px; height: 32px; object-fit: contain; margin-right: 6px; }
.home-footer-brand p, .home-subscribe p { font-size: 9px; line-height: 1.5; }
.home-socials { display: flex; gap: 14px; align-items: center; font-weight: 800; }
.home-footer h3 { margin: 8px 0 12px; font-size: 9px; }
.home-footer-grid > div > a:not(:first-child) { display: block; margin-bottom: 7px; color: #071b5b; font-size: 9px; text-decoration: none; }
.home-subscribe div { display: grid; grid-template-columns: 1fr 28px; }
.home-subscribe input { min-width: 0; height: 30px; padding: 0 8px; border: 1px solid #cfdaf2; border-radius: 6px 0 0 6px; font-size: 9px; }
.home-subscribe button { border: 0; border-radius: 0 6px 6px 0; background: #0657f9; color: #fff; }
.home-copyright { margin: 17px 0 0; text-align: center; font-size: 9px; }

@media (max-width: 900px) {
  .home-route .site-header, .home-shell { width: min(100% - 32px, 720px); }
  .home-route .main-nav { display: none; }
  .home-hero h1 { font-size: 48px; }
  .home-story { padding-right: 24px; padding-left: 24px; }
  .home-pillars { padding-right: 20px; padding-left: 20px; }
  .home-pillar { grid-template-columns: 58px 1fr; padding: 12px 10px; }
  .home-pillar-icon { width: 50px; height: 50px; font-size: 28px; }
  .home-footer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .home-route .site-header, .home-shell { width: calc(100% - 28px); }
  .home-route .site-header { min-height: 68px; }
  .home-route .brand { font-size: 13px; }
  .home-route .primary-link { padding: 0 10px; font-size: 10px; }
  .home-hero { min-height: 0; }
  .home-hero-grid { display: flex; flex-direction: column; }
  .home-hero-copy { padding: 34px 10px 30px; }
  .home-kicker { font-size: 12px; }
  .home-hero h1 { font-size: 46px; }
  .home-intro { font-size: 14px; }
  .home-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .home-hero-media { height: 270px; margin: 0 -14px; }
  .home-hero::after { display: none; }
  .home-story { grid-template-columns: 1fr; gap: 24px; padding: 40px 10px 30px; }
  .home-story h2 { font-size: 25px; }
  .home-pillars { padding: 0 0 30px; }
  .home-pillar-grid { grid-template-columns: 1fr; }
  .home-pillar { min-height: 110px; }
  .home-universe { padding-right: 0; padding-left: 0; }
  .home-universe-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .home-universe-card { height: 190px; }
  .home-universe-copy { left: 12px; }
  .home-universe-copy strong { font-size: 12px; }
  .home-universe-copy small { font-size: 10px; }
  .home-universe-arrow { width: 30px; height: 30px; right: 9px; }
  .home-join { grid-template-columns: 1fr; }
  .home-join-copy { padding: 28px 22px; }
  .home-join h2 { font-size: 24px; }
  .home-join .home-button { min-width: 0; width: 100%; font-size: 10px; }
  .home-join img { height: 150px; }
  .home-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .home-footer-brand, .home-subscribe { grid-column: 1 / -1; }
}

/* Recursos Azulín oficial */
.resources-official {
  overflow: hidden;
  background: #fff;
  color: #071b5b;
  font-family: Arial, Helvetica, sans-serif;
}

.resources-shell {
  width: min(976px, calc(100% - 48px));
  margin: 0 auto;
}

.resources-hero {
  position: relative;
  display: grid;
  width: min(1180px, calc(100% - 48px));
  height: 300px;
  grid-template-columns: minmax(0, 55%) minmax(0, 45%);
  align-items: stretch;
  gap: 22px;
  padding: 20px;
  overflow: hidden;
  border-radius: 38px 38px 38px 72px;
  background: #eff7ff;
}

.resources-hero::after {
  position: absolute;
  left: 18px;
  bottom: 7px;
  width: 48px;
  height: 58px;
  border-left: 4px solid #9bc9bb;
  border-radius: 50%;
  transform: rotate(-22deg);
  content: "";
}

.resources-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 600px;
  flex-direction: column;
  justify-content: center;
  padding: 4px 18px 4px 34px;
}

.resources-hero h1 {
  margin: 0 0 10px;
  color: #071b5b;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.resources-hero p {
  margin: 0 0 21px;
  font-size: 15px;
  line-height: 1.55;
}

.resources-hero-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
}

.resources-hero .resources-button {
  min-height: 34px;
  padding-inline: 13px;
}

.resources-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 39px;
  padding: 0 16px;
  border: 1px solid #0657f9;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.resources-button-primary {
  background: #0657f9;
  color: #fff;
}

.resources-button-outline {
  background: #fff;
  color: #0657f9;
}

.resources-hero > img {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: cover;
  object-position: right center;
}

.resources-filters {
  display: grid;
  grid-template-columns: 1.05fr repeat(6, 1fr);
  gap: 24px;
  padding: 20px 6px 22px;
}

.resources-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid #d8dfef;
  border-radius: 8px;
  background: #fff;
  color: #071b5b;
  font-size: 12px;
  font-weight: 800;
}

.resources-filter span {
  color: #0657f9;
  font-size: 22px;
}

.resources-filter:nth-child(2) span { color: #fa4d96; }
.resources-filter:nth-child(3) span { color: #23a75c; }
.resources-filter:nth-child(4) span { color: #ff7d00; }
.resources-filter:nth-child(5) span { color: #743ee8; }

.resources-filter.active {
  border-color: #0657f9;
  background: #0657f9;
  box-shadow: 0 8px 16px rgba(6, 87, 249, .2);
  color: #fff;
}

.resources-filter.active span { color: #fff; }
.resources-section { padding-bottom: 17px; }

.resources-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.resources-section-heading h2 {
  position: relative;
  margin: 0;
  color: #071b5b;
  font-size: 18px;
  letter-spacing: 0;
}

.resources-section-heading h2::after {
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 24px;
  height: 2px;
  background: #0657f9;
  content: "";
}

.resources-section-heading a {
  color: #0657f9;
  font-size: 12px;
  font-weight: 800;
}

.resources-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19px;
}

.resources-featured-card {
  overflow: hidden;
  border: 1px solid #dce3ef;
  border-radius: 8px;
  background: #fff;
  color: #071b5b;
  text-decoration: none;
}

.resources-card-media {
  position: relative;
  height: 158px;
}

.resources-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resources-play {
  position: absolute;
  right: 13px;
  bottom: 14px;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(7, 27, 91, .16);
  color: #071b5b;
  font-size: 15px;
}

.resources-featured-copy {
  min-height: 137px;
  padding: 10px 13px 10px;
}

.resources-category {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 7px;
  background: #ffdce9;
  color: #f33578;
  font-size: 10px;
}

.resources-featured-copy h3 {
  margin: 7px 0 5px;
  color: #071b5b;
  font-size: 17px;
  line-height: 1.15;
}

.resources-featured-copy p {
  min-height: 38px;
  margin: 0 0 9px;
  font-size: 12px;
  line-height: 1.45;
}

.resources-featured-copy > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.resources-featured-copy strong {
  color: #0657f9;
  font-size: 11px;
}

.resources-age {
  padding: 3px 9px;
  border-radius: 7px;
  background: #e8f1ff;
  font-size: 10px;
}

.resources-universe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.resources-universe-grid > a {
  position: relative;
  height: auto;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: 8px;
  color: #071b5b;
}

.resources-universe-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resources-universe-grid a > span {
  position: absolute;
  left: 14px;
  bottom: 13px;
}

.resources-universe-grid strong,
.resources-universe-grid b,
.resources-universe-grid small {
  display: block;
}

.resources-universe-grid strong {
  color: #0657f9;
  font-size: 37px;
  line-height: .9;
}

.resources-universe-grid a:nth-child(2) strong { color: #218d4c; }
.resources-universe-grid a:nth-child(3) strong { color: #7444e6; }
.resources-universe-grid a:nth-child(4) strong { color: #ff6500; }
.resources-universe-grid b { margin: 9px 0 7px; font-size: 15px; }
.resources-universe-grid small { font-size: 10px; line-height: 1.45; }

.resources-universe-grid i {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #0657f9;
  font-size: 19px;
  font-style: normal;
}

.resources-recommend {
  display: grid;
  grid-template-columns: 19% 22% 59%;
  align-items: center;
  min-height: 183px;
  margin-top: 4px;
  margin-bottom: 14px;
  padding: 9px 31px 9px 12px;
  border-radius: 8px;
  background: #f0f6ff;
}

.resources-recommend-character {
  width: 100%;
  max-height: 166px;
  object-fit: contain;
}

.resources-recommend-copy {
  padding-left: 10px;
}

.resources-recommend-copy h2 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 0;
}

.resources-recommend-copy p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

.resources-recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.resources-recommend-grid a {
  overflow: hidden;
  min-width: 0;
  min-height: 149px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #fff;
  color: #071b5b;
}

.resources-recommend-grid img {
  width: 100%;
  height: 98px;
  object-fit: cover;
}

.resources-recommend-grid .resources-category {
  margin: 4px 8px 2px;
  padding: 2px 7px;
  font-size: 8px;
}

.resources-recommend-grid strong {
  display: block;
  padding: 0 9px 7px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-orange { background: #ffe4c8; color: #e86800; }
.category-purple { background: #e8dcff; color: #6731d6; }
.resources-library { padding-bottom: 8px; }
.resources-library-tabs { display: flex; gap: 10px; margin: 2px 0 10px; }

.resources-library-tabs button {
  min-width: 110px;
  height: 29px;
  border: 1px solid #d9e1ee;
  border-radius: 7px;
  background: #fff;
  color: #071b5b;
  font-size: 11px;
  font-weight: 800;
}

.resources-library-tabs button.active {
  border-color: #0657f9;
  background: #0657f9;
  color: #fff;
}

.resources-library-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.resources-library-card {
  overflow: hidden;
  border: 1px solid #dce3ef;
  border-radius: 8px;
  background: #fff;
  color: #071b5b;
}

.resources-library-card > div {
  position: relative;
  height: 109px;
}

.resources-library-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resources-play-small {
  right: 10px;
  bottom: 9px;
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.resources-library-copy {
  display: grid;
  grid-template-columns: 25px 1fr;
  align-items: center;
  min-height: 49px;
  padding: 5px 10px;
}

.resources-library-copy > b {
  color: #f34891;
  font-size: 20px;
}

.resources-library-copy span,
.resources-library-copy strong,
.resources-library-copy small {
  display: block;
}

.resources-library-copy strong { font-size: 11px; }
.resources-library-copy small { margin-top: 2px; font-size: 8px; }

.resources-footer {
  padding: 16px 0 7px;
  background: #edf5ff;
  color: #071b5b;
}

.resources-footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr) 1.2fr;
  gap: 27px;
}

.resources-footer-brand > a {
  display: flex;
  align-items: center;
  color: #071b5b;
  font-size: 10px;
  line-height: .95;
}

.resources-footer-brand > a strong { color: #0657f9; font-size: 20px; }
.resources-footer-brand img { width: 30px; height: 30px; margin-right: 6px; object-fit: contain; }
.resources-footer-brand p, .resources-subscribe p { font-size: 8px; line-height: 1.5; }
.resources-socials { display: flex; gap: 13px; font-weight: 800; }
.resources-footer h3 { margin: 6px 0 10px; font-size: 8px; }
.resources-footer-grid > div > a:not(:first-child) { display: block; margin-bottom: 5px; font-size: 8px; }
.resources-subscribe div { display: grid; grid-template-columns: 1fr 27px; }
.resources-subscribe input { min-width: 0; height: 28px; padding: 0 7px; border: 1px solid #cfdaf2; border-radius: 5px 0 0 5px; font-size: 8px; }
.resources-subscribe button { border: 0; border-radius: 0 5px 5px 0; background: #0657f9; color: #fff; }
.resources-copyright { margin: 10px 0 0; text-align: center; font-size: 8px; }

@media (max-width: 900px) {
  .resources-shell { width: min(100% - 32px, 720px); }
  .resources-hero.resources-shell { width: min(100% - 32px, 720px); }
  .resources-hero h1 { font-size: 40px; }
  .resources-hero-copy { width: 100%; padding-left: 18px; }
  .resources-filters { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .resources-recommend { grid-template-columns: 22% 28% 50%; }
  .resources-recommend-grid { gap: 7px; }
  .resources-footer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .resources-shell { width: calc(100% - 28px); }
  .resources-hero { display: flex; height: auto; min-height: 0; flex-direction: column; border-radius: 24px 24px 24px 40px; }
  .resources-hero-copy { position: relative; width: 100%; padding: 32px 22px 28px; }
  .resources-hero h1 { font-size: 42px; white-space: normal; }
  .resources-hero p { font-size: 13px; }
  .resources-hero p br { display: none; }
  .resources-hero-actions { flex-direction: column; gap: 9px; }
  .resources-hero > img {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: calc(100% - 32px);
    height: 190px;
    margin: 0 16px 16px;
  }
  .resources-filters { display: flex; overflow-x: auto; padding: 16px 0 20px; scrollbar-width: none; }
  .resources-filter { flex: 0 0 auto; min-width: 112px; }
  .resources-section-heading h2 { font-size: 18px; }
  .resources-section-heading a { font-size: 10px; }
  .resources-featured-grid { grid-template-columns: 1fr; }
  .resources-featured-card[hidden], .resources-library-card[hidden] { display: none; }
  .resources-universe-grid { grid-template-columns: 1fr; gap: 10px; }
  .resources-universe-grid > a { height: auto; }
  .resources-recommend { grid-template-columns: 35% 65%; padding: 14px; }
  .resources-recommend-character { max-height: 160px; }
  .resources-recommend-grid { grid-column: 1 / -1; grid-template-columns: 1fr; margin-top: 12px; }
  .resources-recommend-grid a { display: grid; grid-template-columns: 42% 58%; min-height: 90px; }
  .resources-recommend-grid img { grid-row: 1 / 3; height: 90px; }
  .resources-recommend-grid .resources-category { align-self: end; justify-self: start; }
  .resources-library-tabs { overflow-x: auto; }
  .resources-library-tabs button { flex: 0 0 110px; }
  .resources-library-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .resources-library-card > div { height: 100px; }
  .resources-footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .resources-footer-brand, .resources-subscribe { grid-column: 1 / -1; }
}

/* Conoce a Azulín oficial */
.conoce-official {
  overflow: hidden;
  background: #fff;
  color: #071b5b;
  font-family: Arial, Helvetica, sans-serif;
}

.conoce-shell {
  width: min(928px, calc(100% - 48px));
  margin: 0 auto;
}

.conoce-hero {
  position: relative;
  height: 354px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background: #fff;
}

.conoce-hero::after {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 62px;
  background:
    linear-gradient(176deg, transparent 0 35%, #ffe4ee 36% 44%, transparent 45%),
    linear-gradient(172deg, transparent 0 51%, #eadcff 52% 60%, transparent 61%),
    linear-gradient(168deg, transparent 0 67%, #d7eaff 68% 76%, transparent 77%),
    linear-gradient(164deg, transparent 0 83%, #dff5e9 84% 92%, transparent 93%);
  content: "";
}

.conoce-hero-copy {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 43%;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px 38px 61px;
}

.conoce-kicker {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 4px;
}

.conoce-hero h1 {
  margin: 0 0 18px;
  color: #071b5b;
  font-size: 68px;
  line-height: .95;
  letter-spacing: 0;
}

.conoce-hero-copy > p:last-of-type {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
}

.conoce-actions {
  display: flex;
  gap: 18px;
}

.conoce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #0657f9;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
}

.conoce-button-primary {
  background: #0657f9;
  color: #fff;
}

.conoce-button-outline {
  background: #fff;
  color: #0657f9;
}

.conoce-hero > img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 64%;
  height: 100%;
  object-fit: cover;
}

.conoce-story {
  display: grid;
  grid-template-columns: 39% 55%;
  justify-content: space-between;
  align-items: center;
  min-height: 243px;
  margin-top: 24px;
  padding: 0 22px 0 46px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 24px rgba(20, 66, 133, .05);
}

.conoce-section-label {
  margin: 0 0 14px;
  color: #f24a86;
  font-size: 13px;
  letter-spacing: 3px;
}

.conoce-story h2 {
  margin: 0 0 16px;
  color: #071b5b;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
}

.conoce-story-copy > p:last-child {
  max-width: 275px;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.conoce-story > img {
  width: 100%;
  height: 242px;
  border-radius: 8px;
  object-fit: cover;
}

.conoce-pillars {
  padding: 23px 33px 25px;
}

.conoce-centered-title {
  margin: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 3px;
}

.conoce-title-line {
  display: block;
  width: 31px;
  height: 2px;
  margin: 8px auto 10px;
  background: #0657f9;
}

.conoce-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.conoce-pillar {
  position: relative;
  height: 187px;
  overflow: hidden;
  border-radius: 8px;
}

.conoce-pillar-emotion { background: #fff1f5; }
.conoce-pillar-music { background: #fff9eb; }
.conoce-pillar-learning { background: #effaf3; }

.conoce-pillar-copy {
  position: relative;
  z-index: 2;
  width: 53%;
  padding: 13px 0 10px 14px;
}

.conoce-pillar-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: #ff5b8f;
  color: #fff;
  font-size: 25px;
}

.conoce-pillar-music .conoce-pillar-icon { background: #ffad2f; }
.conoce-pillar-learning .conoce-pillar-icon { background: #2bb561; }

.conoce-pillar h3 {
  margin: 14px 0 10px;
  color: #f54a83;
  font-size: 18px;
}

.conoce-pillar-music h3 { color: #f2a000; }
.conoce-pillar-learning h3 { color: #20a557; }

.conoce-pillar p {
  margin: 0;
  font-size: 9px;
  line-height: 1.55;
}

.conoce-pillar img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 54%;
  height: 100%;
  object-fit: cover;
}

.conoce-universe {
  padding: 0 33px 21px;
}

.conoce-section-heading h2 {
  position: relative;
  margin: 0 0 18px;
  font-size: 18px;
  letter-spacing: 0;
}

.conoce-section-heading h2::after {
  position: absolute;
  left: 104px;
  bottom: -8px;
  width: 30px;
  height: 2px;
  background: #0657f9;
  content: "";
}

.conoce-universe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.conoce-universe-grid > a {
  position: relative;
  height: auto;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: 8px;
  color: #071b5b;
}

.conoce-universe-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.conoce-join {
  display: grid;
  grid-template-columns: 48% 52%;
  height: 167px;
  overflow: hidden;
  border-radius: 8px;
  background: #ecf6ff;
}

.conoce-join-copy {
  align-self: center;
  padding-left: 45px;
}

.conoce-join h2 {
  margin: 0 0 7px;
  color: #0a3598;
  font-size: 34px;
  letter-spacing: 0;
}

.conoce-join h2 span { color: #fa5a91; }
.conoce-join p { margin: 0 0 16px; font-size: 13px; }
.conoce-join img { width: 100%; height: 167px; object-fit: cover; }

.conoce-footer {
  width: min(976px, calc(100% - 48px));
  margin: 15px auto 0;
  padding: 14px 0 7px;
  border-radius: 8px 8px 0 0;
  background: #edf5ff;
}

.conoce-footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr) 1.2fr;
  gap: 27px;
}

.conoce-footer-brand > a {
  display: flex;
  align-items: center;
  color: #071b5b;
  font-size: 10px;
  line-height: .95;
}

.conoce-footer-brand > a strong { color: #0657f9; font-size: 20px; }
.conoce-footer-brand img { width: 30px; height: 30px; margin-right: 6px; object-fit: contain; }
.conoce-footer-brand p, .conoce-subscribe p { font-size: 8px; line-height: 1.5; }
.conoce-socials { display: flex; gap: 13px; font-weight: 800; }
.conoce-footer h3 { margin: 6px 0 10px; font-size: 8px; }
.conoce-footer-grid > div > a:not(:first-child) { display: block; margin-bottom: 5px; font-size: 8px; }
.conoce-subscribe div { display: grid; grid-template-columns: 1fr 27px; }
.conoce-subscribe input { min-width: 0; height: 28px; padding: 0 7px; border: 1px solid #cfdaf2; border-radius: 5px 0 0 5px; font-size: 8px; }
.conoce-subscribe button { border: 0; border-radius: 0 5px 5px 0; background: #0657f9; color: #fff; }
.conoce-copyright { margin: 9px 0 0; text-align: center; font-size: 8px; }

@media (max-width: 900px) {
  .conoce-shell { width: min(100% - 32px, 720px); }
  .conoce-hero-copy { width: 48%; padding-left: 34px; }
  .conoce-hero h1 { font-size: 56px; }
  .conoce-hero-copy > p:last-of-type { font-size: 12px; }
  .conoce-story { padding-left: 25px; }
  .conoce-pillar-grid { gap: 10px; }
  .conoce-pillar-copy { width: 60%; }
  .conoce-footer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .conoce-shell { width: calc(100% - 28px); }
  .conoce-hero { display: flex; height: auto; flex-direction: column; }
  .conoce-hero-copy { position: relative; width: 100%; padding: 35px 22px 40px; }
  .conoce-hero h1 { font-size: 58px; }
  .conoce-hero-copy > p:last-of-type { font-size: 13px; }
  .conoce-actions { flex-direction: column; gap: 9px; }
  .conoce-hero > img { position: relative; width: 100%; height: 265px; }
  .conoce-hero::after { display: none; }
  .conoce-story { grid-template-columns: 1fr; gap: 22px; padding: 32px 22px 0; }
  .conoce-story h2 { font-size: 30px; }
  .conoce-story > img { height: 230px; }
  .conoce-pillars { padding: 32px 0; }
  .conoce-pillar-grid { grid-template-columns: 1fr; }
  .conoce-pillar { height: 190px; }
  .conoce-pillar-copy { width: 55%; }
  .conoce-pillar p { font-size: 10px; }
  .conoce-universe { padding: 0 0 25px; }
  .conoce-universe-grid { grid-template-columns: 1fr; gap: 10px; }
  .conoce-universe-grid > a { height: auto; }
  .conoce-join { grid-template-columns: 1fr; height: auto; }
  .conoce-join-copy { padding: 28px 22px; }
  .conoce-join h2 { font-size: 28px; }
  .conoce-join img { height: 165px; }
  .conoce-footer { width: 100%; }
  .conoce-footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .conoce-footer-brand, .conoce-subscribe { grid-column: 1 / -1; }
}

/* Música Azulín 2.0 */
.music-official {
  overflow: hidden;
  background: #fff;
  color: #071b5b;
  font-family: Arial, Helvetica, sans-serif;
}

.music-shell {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
}

.music-hero {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 330px;
  overflow: hidden;
  border-radius: 8px;
  background: #eef6ff;
}

.music-hero-copy {
  align-self: center;
  padding: 42px 38px 42px 48px;
}

.music-kicker,
.music-library-intro > p,
.music-community > div > p {
  margin: 0 0 10px;
  color: #0657f9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
}

.music-hero h1 {
  margin: 0 0 14px;
  color: #071b5b;
  font-size: 53px;
  line-height: 1;
  letter-spacing: 0;
}

.music-hero-copy > p:not(.music-kicker) {
  margin: 0 0 25px;
  font-size: 17px;
}

.music-hero-actions {
  display: flex;
  gap: 12px;
}

.music-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #0657f9;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
}

.music-button-primary {
  background: #0657f9;
  color: #fff;
}

.music-button-outline {
  background: #fff;
  color: #0657f9;
}

.music-hero-media {
  position: relative;
  min-height: 330px;
}

.music-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-placeholder-label {
  position: absolute;
  right: 13px;
  bottom: 13px;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .88);
  color: #071b5b;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.music-categories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 20px 0 27px;
}

.music-categories a {
  display: flex;
  min-height: 72px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dbe4f1;
  border-radius: 8px;
  background: #fff;
  color: #071b5b;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}

.music-categories span {
  color: #0657f9;
  font-size: 25px;
  line-height: 1;
}

.music-categories a:nth-child(2) span { color: #f54b83; }
.music-categories a:nth-child(3) span { color: #ff9f19; }
.music-categories a:nth-child(4) span { color: #24a65b; }
.music-categories a:nth-child(5) span { color: #8a4cdb; }
.music-categories a:nth-child(6) span { color: #f06a32; }

.music-library-intro {
  max-width: 620px;
  margin-bottom: 24px;
}

.music-library-intro h2 {
  margin: 0 0 8px;
  font-size: 28px;
  letter-spacing: 0;
}

.music-library-intro > span {
  color: #5f6c7b;
  font-size: 13px;
}

.music-library-row {
  padding: 0 0 29px;
  scroll-margin-top: 20px;
}

.music-row-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.music-row-heading h2 {
  position: relative;
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.music-row-heading h2::after {
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 7px;
  background: #0657f9;
  content: "";
}

.music-row-heading a {
  color: #0657f9;
  font-size: 10px;
  font-weight: 800;
}

.music-song-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.music-song-card {
  overflow: hidden;
  border: 1px solid #dbe4f1;
  border-radius: 8px;
  background: #fff;
}

.music-song-image {
  position: relative;
  height: 120px;
  background: #edf4ff;
}

.music-song-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-song-image > span {
  position: absolute;
  right: 10px;
  bottom: 9px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #0657f9;
  font-size: 17px;
}

.music-song-copy {
  padding: 11px;
}

.music-song-copy > small {
  color: #657189;
  font-size: 9px;
}

.music-song-copy h3 {
  min-height: 34px;
  margin: 5px 0 11px;
  color: #071b5b;
  font-size: 14px;
  line-height: 1.2;
}

.music-song-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.music-song-actions button,
.music-song-actions a {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 6px;
  border: 1px solid #d5dfed;
  border-radius: 6px;
  background: #fff;
  color: #071b5b;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}

.music-song-actions button {
  border-color: #0657f9;
  background: #0657f9;
  color: #fff;
}

.music-song-actions button.playing {
  border-color: #1da563;
  background: #1da563;
}

.music-coming-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}

.music-coming-grid article {
  display: flex;
  min-height: 90px;
  align-items: center;
  gap: 17px;
  padding: 17px 22px;
  border-radius: 8px;
  background: #f3f8ff;
  scroll-margin-top: 20px;
}

.music-coming-grid article:last-child { background: #fff7ed; }
.music-coming-grid > article > span { color: #23a65b; font-size: 32px; }
.music-coming-grid article:last-child > span { color: #f06a32; }
.music-coming-grid h3 { margin: 0 0 4px; font-size: 16px; }
.music-coming-grid p { margin: 0; color: #657189; font-size: 11px; }

.music-community {
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 175px;
  overflow: hidden;
  border-radius: 8px;
  background: #f0f6ff;
}

.music-community > div {
  align-self: center;
  padding: 24px 30px 24px 48px;
}

.music-community h2 {
  margin: 0 0 8px;
  color: #071b5b;
  font-size: 29px;
  letter-spacing: 0;
}

.music-community > div > span {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  line-height: 1.45;
}

.music-community img {
  width: 100%;
  height: 175px;
  object-fit: cover;
}

.music-official > .home-footer {
  margin-top: 18px;
}

/* Comunidad Azulín */
.community-route { background: #fff; color: #071b5b; }

.community-official {
  min-height: calc(100vh - 78px);
  padding: 8px 0 46px;
  background:
    linear-gradient(138deg, transparent 0 62%, rgba(255, 228, 151, .26) 62.2% 66%, transparent 66.2%),
    linear-gradient(144deg, transparent 0 67%, rgba(255, 139, 185, .20) 67.2% 70%, transparent 70.2%),
    linear-gradient(150deg, transparent 0 72%, rgba(81, 210, 187, .16) 72.2% 75%, transparent 75.2%),
    linear-gradient(180deg, #fffdfb 0%, #eef8ff 42%, #fff7fb 100%);
  color: #071b5b;
  font-family: Arial, Helvetica, sans-serif;
}

.community-shell {
  display: grid;
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
  gap: 14px;
}

.community-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr);
  gap: 28px;
  align-items: center;
  min-height: 250px;
  padding: 26px 30px;
  overflow: hidden;
  border: 1px solid rgba(82, 166, 255, .35);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 249, 255, .94));
  box-shadow: 0 20px 46px rgba(44, 81, 126, .10), 0 8px 24px rgba(255, 181, 64, .08);
}

.community-block::before {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 0;
  color: rgba(6, 87, 249, .12);
  font-size: 42px;
  font-weight: 800;
  content: "♡";
}

.community-block::after {
  position: absolute;
  left: 23px;
  bottom: 20px;
  z-index: 0;
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0657f9, #40c4ff, #f75f9b);
  content: "";
}

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

.community-block-hero {
  min-height: 350px;
  border-color: #c8e3ff;
  background:
    linear-gradient(135deg, rgba(239, 250, 255, .98) 0%, #fff 38%, rgba(255, 245, 251, .96) 100%);
}

.community-block:nth-child(even):not(.community-block-hero) {
  grid-template-columns: minmax(400px, 1.1fr) minmax(0, .9fr);
}

.community-block:nth-child(even):not(.community-block-hero) .community-copy {
  order: 2;
}

.community-block:nth-child(even):not(.community-block-hero) .community-placeholder {
  order: 1;
}

.community-block-credential {
  border-color: #ffe3a8;
  background: linear-gradient(135deg, #fff8e8 0%, #ffffff 42%, #f0f8ff 100%);
}

.community-block-resources {
  border-color: #cfeada;
  background: linear-gradient(135deg, #effcf5 0%, #ffffff 44%, #f2f8ff 100%);
}

.community-block-premieres {
  border-color: #decfff;
  background: linear-gradient(135deg, #f8f2ff 0%, #ffffff 43%, #f2f6ff 100%);
}

.community-block-allies {
  border-color: #ffd8bd;
  background: linear-gradient(135deg, #fff3eb 0%, #ffffff 44%, #f1fbff 100%);
}

.community-block-ambassadors {
  min-height: 230px;
  border-color: #ffd2e2;
  background: linear-gradient(135deg, #fff0f7 0%, #ffffff 44%, #f4fbff 100%);
}

.community-block-roadmap {
  grid-template-columns: 1fr;
  min-height: 0;
  padding: 22px 26px;
  border-color: #cbefff;
  background:
    linear-gradient(135deg, #effaff 0%, #ffffff 42%, #fff8ed 100%);
}

.community-block-roadmap .community-eyebrow { margin-bottom: 8px; }
.community-block-roadmap .community-copy h2 { margin-bottom: 7px; font-size: 28px; }
.community-block-roadmap .community-copy p { font-size: 14px; }

.community-block-credential::before { color: rgba(245, 177, 27, .2); content: "★"; }
.community-block-resources::before { color: rgba(32, 167, 102, .18); content: "▤"; }
.community-block-premieres::before { color: rgba(149, 87, 242, .18); content: "♪"; }
.community-block-allies::before { color: rgba(255, 122, 27, .18); content: "⌂"; }
.community-block-ambassadors::before { color: rgba(240, 82, 135, .18); content: "✦"; }
.community-block-roadmap::before { color: rgba(6, 87, 249, .16); content: "→"; }

.community-block-credential::after { background: linear-gradient(90deg, #f5b11b, #ffcf63, #0657f9); }
.community-block-resources::after { background: linear-gradient(90deg, #20a766, #7bd88f, #0657f9); }
.community-block-premieres::after { background: linear-gradient(90deg, #9557f2, #b986ff, #f05287); }
.community-block-allies::after { background: linear-gradient(90deg, #ff7a1b, #ffc05c, #0657f9); }
.community-block-ambassadors::after { background: linear-gradient(90deg, #f05287, #ff9abc, #0657f9); }
.community-block-roadmap::after { background: linear-gradient(90deg, #0657f9, #40c4ff, #f5b11b, #20a766); }

.community-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 14px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(6, 87, 249, .12);
  background: linear-gradient(90deg, #edf5ff, #fff);
  color: #0657f9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.community-block-credential .community-eyebrow { background: linear-gradient(90deg, #fff1c8, #fff); color: #a66f00; }
.community-block-resources .community-eyebrow { background: linear-gradient(90deg, #e7f9ed, #fff); color: #16834d; }
.community-block-premieres .community-eyebrow { background: linear-gradient(90deg, #f1e8ff, #fff); color: #7440ca; }
.community-block-allies .community-eyebrow { background: linear-gradient(90deg, #ffe9d8, #fff); color: #c55308; }
.community-block-ambassadors .community-eyebrow { background: linear-gradient(90deg, #ffe6f0, #fff); color: #c43f72; }

.community-copy h1,
.community-copy h2 {
  max-width: 520px;
  margin: 0 0 13px;
  color: #071b5b;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.community-block-hero .community-copy h1 {
  font-size: 48px;
}

.community-copy p {
  max-width: 560px;
  margin: 0;
  color: #2c3f6d;
  font-size: 16px;
  line-height: 1.55;
}

.community-examples {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.community-examples li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #071b5b;
  font-size: 13px;
  font-weight: 800;
}

.community-examples span {
  color: #f5b11b;
}

.community-roadmap {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: roadmap;
}

.community-roadmap li {
  position: relative;
  display: grid;
  min-height: 66px;
  align-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: 1px solid #d9e9f8;
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  text-align: center;
  box-shadow: 0 10px 22px rgba(7, 27, 91, .06);
  counter-increment: roadmap;
}

.community-roadmap li::before {
  display: grid;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #0657f9;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  content: counter(roadmap);
}

.community-roadmap li:nth-child(2)::before { background: #f5b11b; }
.community-roadmap li:nth-child(3)::before { background: #20a766; }
.community-roadmap li:nth-child(4)::before { background: #9557f2; }
.community-roadmap li:nth-child(5)::before { background: #f05287; }
.community-roadmap li:nth-child(6)::before { background: #ff7a1b; }
.community-roadmap li:nth-child(7)::before { background: #0d6b9f; }

.community-roadmap span {
  color: #071b5b;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
}

.community-access-cta,
.community-block:nth-child(even):not(.community-block-hero).community-access-cta {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  gap: 24px;
  padding: 22px 28px;
  border-color: #bcdcff;
  background: linear-gradient(100deg, #edf7ff 0%, #fff 52%, #fff3d8 100%);
}

.community-access-cta .community-copy {
  order: initial;
}

.community-access-cta .community-eyebrow {
  margin-bottom: 8px;
}

.community-access-cta .community-copy h2 {
  max-width: none;
  margin-bottom: 7px;
  font-size: 28px;
}

.community-access-cta .community-copy p {
  max-width: none;
  font-size: 14px;
}

.community-access-button {
  min-width: 180px;
  align-self: center;
  justify-self: end;
}

.community-placeholder {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  min-height: 224px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(236, 246, 255, .95) 0%, rgba(255, 255, 255, .95) 45%, rgba(255, 241, 225, .95) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
}

.community-block-hero .community-placeholder {
  min-height: 224px;
}

.community-placeholder-number {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #55709d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.community-visual-card {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 206px;
  place-items: center;
  border: 1px solid rgba(6, 87, 249, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.community-block-hero .community-visual-card {
  min-height: 206px;
}

.community-visual-icon {
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #0657f9;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.community-block-credential .community-visual-icon { background: #f5b11b; }
.community-block-resources .community-visual-icon { background: #20a766; }
.community-block-premieres .community-visual-icon { background: #9557f2; }
.community-block-allies .community-visual-icon { background: #ff7a1b; }
.community-block-ambassadors .community-visual-icon { background: #f05287; }

.community-visual-card img {
  width: min(168px, 68%);
  max-height: 178px;
  object-fit: contain;
}

.community-visual-photo-card {
  height: 100%;
  min-height: 224px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 32px rgba(7, 27, 91, .13), 0 6px 18px rgba(255, 154, 65, .10);
}

.community-block-hero .community-visual-photo-card {
  min-height: 224px;
}

.community-visual-card img.community-official-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
}

.community-block-hero .community-official-photo { object-position: center center; }
.community-block-credential .community-official-photo { object-position: center center; }
.community-block-resources .community-official-photo { object-position: center center; }
.community-block-premieres .community-official-photo { object-position: center center; }
.community-block-allies .community-official-photo { object-position: center center; }
.community-block-ambassadors .community-official-photo { object-position: center center; }

.community-visual-photo-card .community-visual-icon {
  display: none;
}

.community-visual-lines {
  display: grid;
  width: 68%;
  gap: 12px;
}

.community-visual-lines span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: #d7e6fb;
}

.community-visual-lines span:nth-child(2) {
  width: 78%;
  background: #e8effa;
}

.community-visual-lines span:nth-child(3) {
  width: 56%;
  background: #cde8d9;
}

@media (max-width: 900px) {
  .community-shell { width: min(100% - 32px, 720px); }
  .community-block,
  .community-block:nth-child(even):not(.community-block-hero) {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 28px;
  }
  .community-block:nth-child(even):not(.community-block-hero) .community-copy,
  .community-block:nth-child(even):not(.community-block-hero) .community-placeholder {
    order: initial;
  }
  .community-copy h1,
  .community-copy h2,
  .community-block-hero .community-copy h1 {
    font-size: 38px;
  }
  .community-block-roadmap .community-copy h2 { font-size: 28px; }
  .community-roadmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .community-access-cta,
  .community-block:nth-child(even):not(.community-block-hero).community-access-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 20px 22px;
  }
  .community-placeholder { min-height: 360px; }
  .community-block-hero .community-placeholder { min-height: 360px; }
  .community-visual-card,
  .community-visual-photo-card,
  .community-block-hero .community-visual-card,
  .community-block-hero .community-visual-photo-card {
    min-height: 100%;
  }
}

@media (max-width: 900px) {
  .music-shell { width: min(100% - 32px, 720px); }
  .music-hero-copy { padding-left: 30px; }
  .music-hero h1 { font-size: 43px; }
  .music-hero-actions { flex-direction: column; align-items: stretch; }
  .music-categories { grid-template-columns: repeat(3, 1fr); }
  .music-song-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .music-shell { width: calc(100% - 28px); }
  .music-hero { grid-template-columns: 1fr; }
  .music-hero-copy { padding: 38px 22px 31px; }
  .music-hero h1 { font-size: 45px; }
  .music-hero-media { min-height: 230px; }
  .music-categories { display: flex; overflow-x: auto; padding: 15px 0 24px; scrollbar-width: none; }
  .music-categories a { flex: 0 0 120px; }
  .music-library-intro h2 { font-size: 25px; }
  .music-row-heading { align-items: flex-end; }
  .music-row-heading h2 { font-size: 18px; }
  .music-row-heading a { max-width: 95px; text-align: right; }
  .music-song-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .music-song-image { height: 105px; }
  .music-song-copy { padding: 9px; }
  .music-song-copy h3 { font-size: 12px; }
  .music-song-actions { grid-template-columns: 1fr; }
  .music-song-actions button,
  .music-song-actions a { min-height: 31px; }
  .music-coming-grid { grid-template-columns: 1fr; }
  .music-community { grid-template-columns: 1fr; }
  .music-community > div { padding: 28px 22px; }
  .music-community h2 { font-size: 27px; }
  .music-community img { height: 155px; }
  .community-official { padding-top: 0; }
  .community-shell { width: calc(100% - 28px); gap: 14px; }
  .community-block {
    min-height: 0;
    padding: 26px 18px;
  }
  .community-copy h1,
  .community-copy h2,
  .community-block-hero .community-copy h1 {
    font-size: 30px;
  }
  .community-block-roadmap .community-copy h2 { font-size: 24px; }
  .community-copy p {
    font-size: 14px;
  }
  .community-roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .community-roadmap li {
    min-height: 64px;
    grid-template-columns: 1fr;
    align-items: initial;
    text-align: center;
  }
  .community-roadmap li::before {
    margin: 0 auto;
  }
  .community-access-cta,
  .community-block:nth-child(even):not(.community-block-hero).community-access-cta {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 18px;
  }
  .community-access-cta .community-copy h2 { font-size: 24px; }
  .community-access-button { width: 100%; min-width: 0; justify-self: stretch; }
  .community-placeholder,
  .community-block-hero .community-placeholder {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
  .community-visual-card,
  .community-visual-photo-card,
  .community-block-hero .community-visual-card,
  .community-block-hero .community-visual-photo-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
  .community-block::before {
    top: 12px;
    right: 14px;
    font-size: 32px;
  }
}

/* Approved full-art assets: show each PNG complete inside its card. */
.conoce-pillar {
  background: #fff;
}

.conoce-pillar-copy {
  display: none;
}

.conoce-pillar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.conoce-universe-grid > a,
.resources-universe-grid > a,
.home-universe-card {
  background: #fff;
}

.conoce-universe-grid img,
.resources-universe-grid img,
.home-universe-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.resources-universe-grid a > span,
.resources-universe-grid i,
.home-universe-overlay,
.home-universe-copy,
.home-universe-arrow {
  display: none;
}

.conoce-join,
.home-join {
  position: relative;
  display: block;
  height: auto;
  min-height: 0;
  aspect-ratio: 1672 / 941;
  background: #fff;
}

.conoce-join-copy,
.home-join-copy {
  display: none;
}

.conoce-join img,
.home-join img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.home-join-click-target,
.conoce-join-click-target {
  position: absolute;
  z-index: 4;
  top: 62%;
  left: 4.2%;
  width: 21.5%;
  height: 8%;
  min-height: 34px;
  border-radius: 8px;
}

.home-join-click-target:focus-visible,
.conoce-join-click-target:focus-visible {
  outline: 3px solid #ffd36a;
  outline-offset: 3px;
}