/* ==========================================================================
   brayan.studio · page.css
   Piezas de las páginas interiores (servicios, proyectos, zonas, 404).
   Usa los tokens de style.css: aquí no se define ningún color nuevo.
   ========================================================================== */

/* ------------------------------------------------ cabecera de página -- */

.page-head {
  padding-top: var(--bar);
}

.page-head .sign {
  min-height: clamp(280px, 44vh, 460px);
}

.page-head .lede {
  max-width: 60ch;
}

.page-head .actions {
  margin-top: 8px;
}

.facts {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--pane-2);
}

@media (min-width: 1024px) {
  .page-head .sign:not(:only-child) {
    grid-column: 1 / 9;
  }

  .page-head .facts {
    grid-column: 9 / -1;
  }
}

/* --------------------------------------------------------------- migas -- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 auto;
  padding: 0 0 28px;
  list-style: none;
  color: var(--muted);
  font-size: 0.875rem;
  font-stretch: 92%;
  font-weight: 560;
}

.crumbs li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.crumbs a {
  color: var(--text-2);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover {
    text-decoration: underline;
  }
}

.crumbs [aria-current="page"] {
  color: var(--cobalt-ink);
}

/* -------------------------------------------------------------- datos -- */

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

.kv dt {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-stretch: 92%;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.kv dd {
  overflow-wrap: anywhere;
  font-size: 1rem;
  font-weight: 560;
  line-height: 1.4;
}

.kv a {
  color: var(--cobalt-ink);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- prosa -- */

/* El SEO vive del texto, así que el texto tiene que ser legible de verdad:
   ancho de lectura cómodo, aire sobre cada título. */
.prose {
  padding-block: clamp(32px, 5vw, 72px);
}

.prose > * {
  max-width: 68ch;
}

@media (min-width: 1024px) {
  .prose {
    padding-left: calc(var(--pad) + 8%);
  }
}

.prose h2 {
  margin: clamp(2.6rem, 5vw, 4rem) 0 1.1rem;
  font-size: min(clamp(2rem, 1.2rem + 2.2vw, 3.1rem), 12vw);
  font-stretch: 62%;
  font-weight: 860;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 2.2rem 0 0.6rem;
  font-size: 1.375rem;
}

.prose p,
.prose li {
  color: var(--text-2);
  text-wrap: pretty;
}

.prose p + p {
  margin-top: 1rem;
}

.prose strong {
  color: var(--text);
  font-weight: 650;
}

.prose a:not(.btn) {
  color: var(--cobalt-ink);
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .prose a:not(.btn):hover {
    text-decoration-color: currentColor;
  }
}

.prose ul {
  display: grid;
  gap: 0.75rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.prose ul li {
  position: relative;
  padding-left: 30px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--cobalt);
}

/* ---------------------------------------------------------- vidrieras -- */

/* Proyectos: cada caso es una vidriera con el sitio completo, que se
   desplaza solo mientras pasas por delante. */
.case {
  display: grid;
  gap: var(--bar);
}

.case .case-window {
  aspect-ratio: 4 / 3;
}

.case .case-body {
  gap: 16px;
}

.case h2 {
  font-size: min(clamp(2rem, 1.2rem + 2.2vw, 3.2rem), 11vw);
}

.case .chips-static {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.case .chips-static li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bubble-in);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.8125rem;
  font-stretch: 92%;
  font-weight: 620;
}

@media (min-width: 900px) {
  .case {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .case .case-window {
    aspect-ratio: auto;
    min-height: 560px;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .case .case-window img {
      animation: shot linear both;
      animation-timeline: view();
      animation-range: cover 15% cover 85%;
    }
  }
}

/* ------------------------------------------------------- ofertas en muro -- */

@media (min-width: 900px) {
  .span-7 {
    grid-column: span 7;
  }

  .span-5 {
    grid-column: span 5;
  }

  .span-6 {
    grid-column: span 6;
  }
}

.offer .vinyl {
  margin-bottom: 4px;
}

.offer .chips-static {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding: 8px 0 0;
  list-style: none;
}

.offer .chips-static li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bubble-in);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.8125rem;
  font-stretch: 92%;
  font-weight: 620;
}

.offer--big {
  min-height: 320px;
  justify-content: flex-end;
}

/* --------------------------------------------------------------- 404 -- */

.err .sign {
  min-height: calc(100svh - var(--nav-h) - var(--bar) * 2);
  justify-content: center;
}

.err .vinyl--xl {
  font-size: clamp(6rem, 3rem + 14vw, 14rem);
  line-height: 0.8;
  color: var(--cobalt-ink);
}

.err .lede {
  margin-top: 8px;
}

/* --------------------------------------------- entrada de interiores -- */

@media (prefers-reduced-motion: no-preference) {
  /* los montantes se trazan también en la cabecera de cada página */
  .page-head {
    background:
      linear-gradient(var(--frame), var(--frame)) 0 0 / var(--draw) 100% no-repeat,
      var(--pane-2);
    animation: draw 900ms var(--ease-in-out) 60ms both;
  }

  .visto .page-head {
    animation: none;
  }

  .page-head h1[data-apply] {
    animation: apply 1100ms var(--ease-in-out) 320ms both;
  }

  .page-head .sign > .lede,
  .page-head .sign > .actions {
    animation: arrive 520ms var(--ease-out) 560ms both;
  }

  .visto .page-head .sign > .lede,
  .visto .page-head .sign > .actions {
    animation: none;
  }

  .visto .page-head h1[data-apply] {
    animation-duration: 700ms;
    animation-delay: 0ms;
  }
}

/* ---------------------------------------------------- títulos de oferta -- */

.offer .offer-title {
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem);
  font-stretch: 87.5%;
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -0.012em;
}

.offer .offer-title a {
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
}

.offer .link-go {
  margin-top: auto;
  padding-top: 8px;
}

.offer .mini-window {
  margin-bottom: 8px;
}

.pane--red .chips-static li,
.pane--cobalt .chips-static li {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

/* ------------------------------------------- vitrina en páginas de zona -- */

/* Dos vidrieras con trabajo real entre bloques de texto: el escritorio y
   el celular, para cortar la lectura larga con prueba. */
.vitrina .window {
  min-height: 0;
}

.vitrina .window-glass {
  flex: none;
  aspect-ratio: 16 / 10;
}

.vitrina .window--narrow .window-glass {
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .vitrina .window--narrow .window-glass {
    flex: 1;
    aspect-ratio: auto;
  }
}