/* Estilos exclusivos de ESTUDIO; no se cargan en HOME ni JUEGOS. */
body.studio-page {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100dvh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}
.studio-page .studio-main { display: block; min-height: auto; padding-block: clamp(28px, 3vw, 48px); }
.studio-panel {
  position: relative;
  padding: clamp(26px, 2.6vw, 44px);
  border: 1px solid #b6a58b;
  border-radius: 3px;
  background: rgba(7, 16, 25, .86);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.studio-panel::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--line); pointer-events: none; }
.studio-introduction { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 3.5vw, 60px); align-items: center; }
.studio-portrait { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1663 / 2094; justify-self: center; border-radius: 6px; }
.studio-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 350ms ease; }
.studio-portrait .portrait-a { opacity: 1; }
.studio-portrait .portrait-b { opacity: 0; }
.studio-portrait:hover .portrait-a, .studio-portrait:focus-visible .portrait-a { opacity: 0; }
.studio-portrait:hover .portrait-b, .studio-portrait:focus-visible .portrait-b { opacity: 1; }
.studio-portrait:focus-visible { outline: 2px solid var(--ivory); outline-offset: 8px; }
.studio-copy { min-width: 0; }
.studio-copy h1 { font-size: clamp(30px, 2.7vw, 46px); line-height: 1.12; letter-spacing: -.7px; margin: 0 0 25px; }
.studio-copy h1 span { display: flex; align-items: center; gap: 14px; }
.studio-copy h1 span::after { content: ""; flex: 1 0 20px; max-width: 90px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 10'%3E%3Cpath d='M0 5H80M80 5l4-4 4 4-4 4Z' fill='none' stroke='%23cfbfa4'/%3E%3C/svg%3E") right center / 100% 10px no-repeat; }
.studio-copy p { font-size: 17px; line-height: 1.65; margin: 0 0 19px; color: #e0d6c7; }
.studio-copy .studio-greeting { color: var(--ivory); font-weight: bold; font-size: clamp(19px, 1.3vw, 22px); }
.studio-copy p:last-child { margin-bottom: 0; }
.studio-copy .studio-eyebrow { margin: 0 0 17px; color: var(--coral); font-size: 11px; font-weight: 400; letter-spacing: 1.4px; line-height: 1.6; }
.studio-eyebrow::before { width: 42px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 8'%3E%3Cpath d='M0 4H40m-4-3 4 3-4 3' fill='none' stroke='%23f34e43'/%3E%3C/svg%3E") center / contain no-repeat; }
.studio-rule { display: flex; align-items: center; gap: 10px; margin-block: 30px; height: 8px; }
.studio-rule::before, .studio-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.studio-rule span { width: 8px; height: 8px; border: 1px solid #cfbfa4; transform: rotate(45deg); }
.studio-purpose { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); gap: 30px; align-items: center; padding: 28px; border: 1px solid rgba(207,191,164,.2); border-radius: 3px; background: rgba(7,16,25,.64); }
.studio-purpose .eyebrow { margin-bottom: 10px; }
.studio-purpose h2 { font-size: clamp(26px, 2vw, 32px); line-height: 1.2; letter-spacing: 0; max-width: 360px; margin: 0; }
.studio-purpose > p { border-left: 1px solid var(--line); padding-left: 30px; margin: 0; font-size: 17px; line-height: 1.7; color: #e0d6c7; }
@media (max-width: 1100px) {
  .studio-introduction { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 28px; }
}
@media (max-width: 800px) {
  .studio-introduction { grid-template-columns: 1fr; gap: 30px; }
  .studio-portrait { max-width: 300px; }
  .studio-purpose { grid-template-columns: 1fr; gap: 24px; }
  .studio-purpose > p { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
}
@media (max-width: 650px) {
  body.studio-page { background-attachment: scroll; background-size: auto 100dvh; background-position: center top; }
  .studio-page .studio-main { width: 94%; padding-block: 24px; }
  .studio-panel { padding: 26px 20px; }
  .studio-portrait { max-width: 250px; }
  .studio-copy h1 { font-size: clamp(26px, 7vw, 34px); letter-spacing: -.5px; }
  .studio-copy h1 span { gap: 6px; }
  .studio-copy h1 span::after { flex-basis: 8px; }
  .studio-rule { margin-block: 26px; }
  .studio-purpose { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-portrait img { transition: none; }
}