/* Portada adaptable: texto legible sin superposición con el personaje. */
.hero {
  min-height: 640px;
}
.hero-art {
  width: min(100%, 1440px);
  left: auto;
  right: 0;
  z-index: -3;
}
.hero-art img {
  object-position: 72% top;
}
.hero-person {
  display: none;
}
.hero::after {
  z-index: -2;
  background: linear-gradient(90deg, #000 0%, #000 43%, transparent 65%), linear-gradient(0deg, #000, transparent 20%);
}
.hero .hero-inner {
  width: calc(100% - 2 * clamp(20px, 4vw, 96px));
  padding-block: clamp(48px, 5vw, 80px);
}
.hero-copy {
  width: 54%;
  max-width: 660px;
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(3rem, 5.8vw, 5.5rem);
  line-height: 1.04;
}
.hero h1 .title-line {
  display: block;
  color: var(--text);
}
.hero h1 .title-accent {
  color: var(--accent);
}
.hero-description {
  max-width: 460px;
}
.hero-note {
  display: none; /* El eslogan ya se muestra completo en el título. */
}

@media (min-width: 701px) and (max-width: 1000px) {
  .navigation { gap: 20px; }
  .header-inner { gap: 16px; }
  .brand { font-size: 1.7rem; }
  .brand-logo { width: 52px; height: 52px; }
  .hero { min-height: 560px; }
  .hero-copy { width: 54%; }
  .hero h1 { font-size: clamp(2.6rem, 5.5vw, 4rem); }
  .philosophy-grid { gap: 32px; }
}
@media (max-width: 700px) {
  .hero {
    display: grid;
    align-items: end;
    min-height: clamp(600px, 84svh, 780px);
  }
  .hero .hero-inner {
    padding-block: 36px 40px;
  }
  .hero-copy { width: 100%; max-width: 520px; }
  .hero h1 {
    font-size: clamp(2.65rem, 10vw, 4.4rem);
    margin-top: 0;
    margin-bottom: 24px;
  }
  .hero-description { max-width: 460px; color: var(--muted); }
  .hero-copy .button { display: none; }
  .hero-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero-art img { object-position: 74% top; }
  .hero::after {
    inset: 0;
    height: 100%;
    background: linear-gradient(0deg, #000 0%, #000e 20%, #0008 48%, #0002 80%), linear-gradient(90deg, #000c, #0004 65%, transparent);
  }
  .footer-inner { align-items: center; flex-direction: column; gap: 16px; text-align: center; }
  .contact-hours { margin-top: 24px; }
}

.about-photo { width: 100%; max-width: 420px; height: auto; margin-top: 28px; border: 1px solid var(--border); }
.philosophy-grid { align-items: center; }
.philosophy h2 { font-size: clamp(2.4rem, 3.6vw, 3.5rem); }
@media (max-width: 700px) { .about-photo { max-width: 420px; } }

.avatar-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 64px; }
.avatar-scene { position: relative; margin: 0; overflow: hidden; aspect-ratio: 1 / 1.7; border: 1px solid var(--border); }
.avatar-scene img { position: absolute; width: 300%; max-width: none; height: auto; top: 0; }
.avatar-scene:nth-child(2) img { left: -100%; }
.avatar-scene:nth-child(3) img { left: -200%; }
.avatar-scene figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 14px; background: var(--background); color: var(--text); border-left: 3px solid var(--accent); font-weight: 700; }
@media (max-width: 700px) {
  .avatar-scenes {
    display: flex;
    gap: 14px;
    margin-bottom: 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--surface);
    padding-bottom: 12px;
  }
  .avatar-scene {
    flex: 0 0 78%;
    max-width: 300px;
    height: 320px;
    aspect-ratio: auto;
    scroll-snap-align: start;
  }
  .avatar-scene figcaption {
    left: 12px;
    bottom: 12px;
    padding: 6px 10px;
    font-size: .85rem;
  }

}