/*
 * Identidad visual de Zuri.
 * Reutiliza la arquitectura accesible de Aurelia y cambia el lenguaje visual
 * hacia empatía, vínculos y comunidad con la paleta oficial de Zuri.
 */
.la-zuri-page {
  --la-reef-navy: #0b4f7a;
  --la-character-deep: #762d49;
  --la-character-primary: #f26d82;
  --la-character-accent: #c94e6f;
  --la-character-soft: #ffe2e8;
  --la-character-glow: #ff9ba8;
  --la-reef-bright: #18bfd1;
  --la-coral: #ffe39b;
  --la-sand: #fff6ee;
  --la-paper: #fffdf9;
  --la-ink: #513540;
  --la-muted: #79636b;
}

.la-zuri-page :focus-visible {
  outline-color: var(--la-reef-bright);
}

#la-zuri-personaje,
#la-zuri-metodo,
#la-zuri-serie,
#la-zuri-conversacion {
  scroll-margin-top: 110px;
}

.la-zuri-page .la-aurelia-header {
  border-bottom-color: rgba(242, 109, 130, 0.16);
  background: rgba(255, 253, 249, 0.95);
}

.la-zuri-page .la-aurelia-header nav a::after {
  background: var(--la-character-primary);
}

.la-zuri-page .la-aurelia-header-cta {
  color: #593220 !important;
  background: var(--la-coral);
  box-shadow: 0 9px 24px rgba(194, 148, 35, 0.18);
}

.la-zuri-page .la-aurelia-hero {
  min-height: 760px;
  background:
    radial-gradient(circle at 86% 24%, rgba(24, 191, 209, 0.14), transparent 29%),
    linear-gradient(128deg, #fff0f3 0%, #fffdf9 50%, #eaf9fb 100%);
}

.la-zuri-page .la-aurelia-hero::before {
  border-color: rgba(242, 109, 130, 0.2);
  box-shadow:
    0 0 0 7rem rgba(255, 155, 168, 0.055),
    0 0 0 14rem rgba(24, 191, 209, 0.025);
}

.la-zuri-page .la-aurelia-hero-glow {
  background: rgba(255, 155, 168, 0.34);
  filter: blur(82px);
}

.la-zuri-page .la-aurelia-breadcrumb b,
.la-zuri-page .la-aurelia-eyebrow span {
  color: var(--la-character-primary);
  background: var(--la-character-primary);
}

.la-zuri-page .la-aurelia-hero h1 {
  max-width: 800px;
  font-size: clamp(3rem, 5.15vw, 5.7rem);
  line-height: 1;
}

.la-zuri-page .la-aurelia-hero h1 em {
  color: var(--la-character-accent);
  font-style: normal;
  font-weight: 700;
}

.la-zuri-page .la-aurelia-hero h1 em::after {
  height: 8px;
  background: var(--la-reef-bright);
  opacity: 0.36;
}

.la-zuri-page .la-aurelia-button-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #f26d82, #c94e6f);
  box-shadow: 0 13px 30px rgba(201, 78, 111, 0.25);
}

.la-zuri-page .la-aurelia-button-coral {
  color: #50381a !important;
  background: var(--la-coral);
  box-shadow: 0 12px 28px rgba(207, 160, 42, 0.2);
}

.la-zuri-page .la-aurelia-text-link {
  border-bottom-color: rgba(201, 78, 111, 0.36);
  color: var(--la-character-accent) !important;
}

.la-zuri-page .la-aurelia-microcopy {
  color: #4f7180;
  font-weight: 750;
}

.la-zuri-page .la-aurelia-image-frame {
  width: min(88%, 530px);
  aspect-ratio: 0.8;
  border-color: rgba(255, 255, 255, 0.86);
  border-radius: 41% 59% 48% 52% / 45% 42% 58% 55%;
  box-shadow:
    0 35px 80px rgba(118, 45, 73, 0.24),
    0 0 0 1px rgba(242, 109, 130, 0.08);
  transform: rotate(-1.2deg);
}

.la-zuri-page .la-aurelia-image-frame img {
  object-position: 50% 39%;
  transform: scale(1.01);
}

.la-zuri-page .la-aurelia-image-frame::after {
  box-shadow: inset 0 -85px 115px rgba(118, 45, 73, 0.2);
}

.la-zuri-page .la-aurelia-label {
  border-left-color: var(--la-reef-bright);
  box-shadow: 0 12px 30px rgba(118, 45, 73, 0.18);
}

.la-zuri-page .la-aurelia-bubble {
  border-color: rgba(24, 191, 209, 0.62);
}

.la-zuri-page .la-aurelia-orbit {
  border-color: rgba(255, 255, 255, 0.82);
  color: var(--la-character-deep);
  background: rgba(255, 253, 249, 0.93);
  box-shadow: 0 12px 28px rgba(118, 45, 73, 0.12);
}

.la-zuri-page .la-aurelia-orbit-one {
  right: 2%;
  top: 17%;
}

.la-zuri-page .la-aurelia-orbit-two {
  right: -1%;
  top: 42%;
}

.la-zuri-page .la-aurelia-orbit-three {
  right: 4%;
  bottom: 21%;
}

.la-zuri-page .la-aurelia-orbit-four {
  left: 1%;
  top: 31%;
}

.la-zuri-page .la-aurelia-identity {
  background:
    radial-gradient(circle at 86% 20%, rgba(24, 191, 209, 0.15), transparent 27%),
    var(--la-character-deep);
  color: #fff5f7;
}

.la-zuri-page .la-aurelia-identity::after {
  content: "★";
  right: 1vw;
  bottom: -10rem;
  color: rgba(255, 155, 168, 0.07);
  font-size: 29rem;
}

.la-zuri-page .la-aurelia-identity-copy > p {
  color: #f7dce3;
}

.la-zuri-page .la-aurelia-identity blockquote {
  border-left-color: var(--la-reef-bright);
  background: rgba(255, 255, 255, 0.075);
}

.la-zuri-page .la-aurelia-identity blockquote > span,
.la-zuri-page .la-aurelia-identity blockquote cite {
  color: var(--la-coral);
}

.la-zuri-page .la-aurelia-meet {
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 155, 168, 0.3), transparent 35%),
    linear-gradient(135deg, #fff0f3, #fffdf9 58%, #eaf9fb);
}

.la-zuri-page .la-aurelia-meet-video {
  background: var(--la-character-deep);
  box-shadow: 0 28px 65px rgba(118, 45, 73, 0.22);
}

.la-zuri-page .la-aurelia-problem {
  background: #fff6ee;
}

.la-zuri-page .la-aurelia-problem-visual {
  border-color: rgba(242, 109, 130, 0.17);
  background:
    radial-gradient(circle at 55% 35%, rgba(255, 155, 168, 0.72), rgba(242, 109, 130, 0.16) 42%, rgba(234, 249, 251, 0.62) 43%);
}

.la-zuri-page .la-zuri-effect-card {
  box-shadow: 0 25px 60px rgba(118, 45, 73, 0.15);
}

.la-zuri-page .la-zuri-effect-card > p {
  color: var(--la-character-accent);
}

.la-zuri-page .la-zuri-effect-card div span {
  background: #ffe5ea;
}

.la-zuri-page .la-zuri-effect-card div b {
  max-width: 4.6rem;
  color: var(--la-reef-navy);
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.la-zuri-page .la-zuri-effect-card i {
  border-top-color: rgba(242, 109, 130, 0.18);
  color: var(--la-character-accent);
}

.la-zuri-page .la-aurelia-method-card {
  border-color: rgba(242, 109, 130, 0.15);
  box-shadow: 0 12px 34px rgba(118, 45, 73, 0.07);
}

.la-zuri-page .la-aurelia-method-card:nth-child(even) .la-aurelia-step-number {
  color: #27454b;
  background: var(--la-reef-bright);
}

.la-zuri-page .la-aurelia-formula b {
  color: var(--la-reef-bright);
}

.la-zuri-page .la-aurelia-series {
  background:
    radial-gradient(circle at 90% 8%, rgba(24, 191, 209, 0.13), transparent 25%),
    #ffe9ee;
}

.la-zuri-page .la-aurelia-series-status {
  border-color: rgba(242, 109, 130, 0.22);
  background: linear-gradient(125deg, rgba(255, 226, 232, 0.88), rgba(255, 253, 249, 0.97));
  box-shadow: 0 14px 36px rgba(118, 45, 73, 0.08);
}

.la-zuri-page .la-aurelia-series-status > span {
  background: var(--la-character-primary);
  box-shadow: 0 8px 22px rgba(201, 78, 111, 0.24);
}

.la-zuri-page .la-aurelia-player {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 155, 168, 0.24), transparent 34%),
    linear-gradient(135deg, var(--la-character-deep), var(--la-reef-navy));
  box-shadow: 0 22px 54px rgba(118, 45, 73, 0.2);
}

.la-zuri-page .la-aurelia-player-copy,
.la-zuri-page .la-aurelia-player-copy > p:not(.la-aurelia-kicker):not(.la-aurelia-player-label) {
  color: #f7dce3;
}

.la-zuri-page .la-aurelia-player-copy .la-aurelia-kicker,
.la-zuri-page .la-aurelia-player-label {
  color: var(--la-coral);
}

.la-zuri-page .la-aurelia-player-copy > strong {
  color: var(--la-character-deep);
  background: var(--la-coral);
}

.la-zuri-page .la-aurelia-episode-card {
  border-color: rgba(242, 109, 130, 0.14);
  box-shadow: 0 10px 30px rgba(118, 45, 73, 0.08);
}

.la-zuri-page .la-aurelia-episode-card.has-video:hover,
.la-zuri-page .la-aurelia-episode-card.has-video:focus-within {
  border-color: rgba(242, 109, 130, 0.42);
  box-shadow: 0 18px 35px rgba(118, 45, 73, 0.15);
}

.la-zuri-page .la-aurelia-episode-card.is-selected {
  border-color: var(--la-reef-bright);
  box-shadow: 0 18px 35px rgba(24, 191, 209, 0.2);
}

.la-zuri-page .la-aurelia-episode-art {
  background:
    radial-gradient(circle at 70% 30%, rgba(255, 227, 155, 0.36), transparent 32%),
    linear-gradient(145deg, var(--la-character-primary), var(--la-character-deep));
}

.la-zuri-page .la-aurelia-episode-art.is-upcoming {
  background:
    radial-gradient(circle at 70% 30%, rgba(24, 191, 209, 0.18), transparent 32%),
    linear-gradient(145deg, #b7657c, var(--la-character-deep));
}

.la-zuri-page .la-aurelia-play {
  color: var(--la-character-deep);
  background: var(--la-coral);
}

.la-zuri-page .la-aurelia-episode-art.is-available .la-aurelia-play {
  color: #fff;
  background: var(--la-reef-bright);
}

.la-zuri-page .la-aurelia-episode-copy p {
  color: var(--la-character-accent);
}

.la-zuri-page .la-aurelia-episode-copy strong,
.la-zuri-page .la-aurelia-episode-copy span,
.la-zuri-page .la-aurelia-episode-youtube {
  color: var(--la-character-accent) !important;
}

.la-zuri-page .la-aurelia-question-list li {
  border-color: rgba(242, 109, 130, 0.15);
}

.la-zuri-page .la-aurelia-question-list li:nth-child(2) span {
  color: #23474d;
  background: var(--la-reef-bright);
}

.la-zuri-page .la-aurelia-conversation-close {
  background: linear-gradient(135deg, var(--la-character-accent), var(--la-character-deep));
}

.la-zuri-page .la-aurelia-conversation-close span {
  color: var(--la-coral);
}

.la-zuri-page .la-aurelia-reef {
  background:
    radial-gradient(circle at 12% 95%, rgba(242, 109, 130, 0.12), transparent 30%),
    var(--la-reef-navy);
}

.la-zuri-page .la-aurelia-reef::before {
  border-color: rgba(24, 191, 209, 0.17);
  box-shadow:
    0 0 0 8rem rgba(24, 191, 209, 0.035),
    0 0 0 16rem rgba(255, 155, 168, 0.018);
}

.la-zuri-page .la-aurelia-character-card a {
  color: var(--la-coral) !important;
}

.la-zuri-page .la-aurelia-final {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 155, 168, 0.22), transparent 32%),
    linear-gradient(145deg, #fff6ee, #fffdf9 60%, #eaf9fb);
}

.la-zuri-page .la-aurelia-final-mark {
  border-color: rgba(242, 109, 130, 0.14);
}

.la-zuri-page .la-aurelia-final-mark span {
  color: rgba(242, 109, 130, 0.065);
}

.la-zuri-page .la-aurelia-final h2 {
  max-width: 1050px;
  margin-bottom: 1.3rem;
  font-size: clamp(3rem, 6vw, 6.4rem);
}

.la-zuri-final-signature {
  margin: 0 auto 2rem;
  color: var(--la-character-accent);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 850;
}

@media (max-width: 640px) {
  .la-zuri-page .la-aurelia-hero h1 {
    font-size: clamp(2.65rem, 13vw, 4rem);
  }

  .la-zuri-page .la-aurelia-image-frame {
    width: min(88vw, 420px);
  }

  .la-zuri-page .la-zuri-effect-card div {
    grid-template-columns: 1fr;
  }

  .la-zuri-page .la-zuri-effect-card div b {
    max-width: none;
  }
}