/* base.css: estructura y componentes. NINGUN valor de color, tipo, radio ni espaciado a mano: todo sale de tema.css. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--page-glow) no-repeat top / 100% 46rem, var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--size-m); line-height: var(--leading-body); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--color-accent); text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: var(--line-width-strong) solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-s); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-3); top: -4rem; background: var(--color-ink); color: var(--color-paper); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); z-index: 10; }
.skip:focus { top: var(--space-3); }
.wrap { width: 100%; max-width: var(--page-width); margin-inline: auto; padding-inline: var(--space-4); }
main { padding-block: var(--space-4) var(--space-6); }
h1, h2, h3 { font-family: var(--font-display); font-feature-settings: var(--display-features); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); font-weight: var(--weight-display); margin: 0 0 var(--space-3); text-wrap: balance; }
h1 { font-size: var(--size-xxl); margin-bottom: var(--space-4); }
h2 { font-size: var(--size-xl); margin-top: 0; }
h3 { font-size: var(--size-l); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
.lede { font-size: var(--size-m); color: var(--color-ink-soft); max-width: var(--measure); }
.muted { color: var(--color-ink-soft); }
ul.plain { padding-left: var(--space-5); margin: 0 0 var(--space-4); max-width: var(--measure); }
ul.plain li { margin-bottom: var(--space-2); }
.block { margin-top: var(--space-6); }
.block > h2 { padding-top: var(--space-2); }

/* Cabecera y pie */
.site { border-bottom: var(--line-width) solid var(--color-line); }
.site__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); padding-block: var(--space-1); }
.brand { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--size-xl); color: var(--color-ink); text-decoration: none; min-height: var(--touch); display: inline-flex; align-items: center; }
.site__nav { max-width: 100%; overflow-x: auto; }
.site__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 0 var(--space-4); white-space: nowrap; }
.site__nav a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--color-ink-soft); text-decoration: none; font-size: var(--size-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.site__nav a:hover, .site__nav a[aria-current] { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: var(--line-width-strong); text-underline-offset: 0.35em; }
.site-foot { border-top: var(--line-width) solid var(--color-line); background: var(--color-paper-sunk); padding-block: var(--space-5); font-size: var(--size-s); }
.foot__note { max-width: var(--measure); }
.foot__links { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.foot__links a { display: inline-flex; min-height: var(--touch); align-items: center; }
.foot__small { color: var(--color-ink-soft); font-size: var(--size-xs); margin: 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: 0; margin: 0 0 var(--space-3); font-size: var(--size-xs); color: var(--color-ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-line-strong); }
.crumbs a { color: var(--color-ink-soft); }

/* Botones y chips */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: var(--space-2) var(--space-5); border-radius: var(--radius-button); border: var(--line-width-strong) solid var(--color-accent); background: transparent; color: var(--color-accent); font: inherit; font-weight: var(--weight-medium); text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--color-accent-hover); color: var(--color-accent-hover); }
.btn--primary { background: var(--color-button); border-color: var(--color-button); color: var(--color-button-ink); }
.btn--primary:hover { background: var(--color-button-hover); border-color: var(--color-button-hover); color: var(--color-button-ink); }
.btn--soon { border-style: dashed; border-color: var(--color-line-strong); color: var(--color-ink-soft); cursor: default; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-2) 0 0; }
.chip { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-4); border: var(--line-width) solid var(--color-line-strong); border-radius: var(--radius-pill); background: var(--glass); color: var(--color-ink); font: inherit; font-family: var(--font-mono); font-size: var(--size-s); text-decoration: none; cursor: pointer; }
.chip:hover, .chip[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-tint); color: var(--color-ink); }
.chip--link { min-height: 2.25rem; }

/* Tarjetas, avisos, respuesta directa */
.card { background: var(--glass); border: var(--line-width) solid var(--glass-edge); border-radius: var(--radius-m); padding: var(--space-5) var(--space-4); margin-top: var(--space-5); box-shadow: var(--shadow-raised); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.callout { background: var(--color-accent-tint); border-left: var(--line-width-strong) solid var(--color-gold); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); max-width: var(--measure); }
.callout--warn { background: var(--color-warn-paper); border-left-color: var(--color-warn-line); }
.callout > :last-child { margin-bottom: 0; }
.answer { background: var(--glass); border: var(--line-width) solid var(--glass-edge); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); margin-top: var(--space-3); }
.answer__text { font-size: var(--size-l); margin-bottom: var(--space-3); font-weight: var(--weight-medium); }
.answer__aside { color: var(--color-ink-soft); margin: 0; font-size: var(--size-s); }
.stamp { font-family: var(--font-mono); font-weight: var(--weight-bold); }
.eyebrow { margin: 0 0 var(--space-3); font-size: var(--size-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-gold); }
.badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-s); background: var(--color-warn-paper); border: var(--line-width) solid var(--color-warn-line); font-size: var(--size-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.cta { margin-top: var(--space-7); border-top: var(--line-width) solid var(--color-gold); padding-top: var(--space-5); }
.cta h2 { font-size: var(--size-xl); }

/* Tablas */
.table-scroll { overflow-x: auto; border: var(--line-width) solid var(--glass-edge); border-radius: var(--radius-m); background: var(--glass); }
table.data { border-collapse: collapse; width: 100%; font-size: var(--size-s); min-width: 20rem; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: var(--line-width) solid var(--color-line); }
table.data thead th { background: var(--color-paper-sunk); font-size: var(--size-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-ink-soft); }
table.data tbody th { font-weight: var(--weight-medium); width: 34%; }
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }

/* Listas de enlaces */
.grid-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: var(--space-3); }
.grid-links a { display: flex; flex-direction: column; gap: var(--space-1); min-height: var(--touch); padding: var(--space-3) var(--space-4); border: var(--line-width) solid var(--color-line); border-radius: var(--radius-m); background: var(--glass); color: var(--color-ink); text-decoration: none; height: 100%; }
.grid-links a:hover { border-color: var(--color-accent); }
.grid-links span { color: var(--color-ink-soft); font-size: var(--size-xs); }
.sources { padding-left: var(--space-5); max-width: var(--measure); }
.sources li { margin-bottom: var(--space-2); }
.steps-list { max-width: var(--measure); padding-left: var(--space-5); }
.steps-list li { margin-bottom: var(--space-2); }

/* Preguntas frecuentes */
.faq { border-bottom: var(--line-width) solid var(--color-line); max-width: var(--measure); }
.faq summary { cursor: pointer; padding: var(--space-3) 0; font-weight: var(--weight-medium); min-height: var(--touch); }
.faq p { color: var(--color-ink-soft); }

/* Formularios */
.field { margin-bottom: var(--space-4); min-width: 0; }
.field__label { display: block; font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.field__pair { display: flex; gap: var(--space-2); }
.field__pair > input { flex: 1 1 auto; min-width: 0; }
.field__input { width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-3); font: inherit; color: var(--color-ink); background: var(--color-paper-sunk); border: var(--line-width) solid var(--color-line-strong); border-radius: var(--radius-s); }
select.field__input { width: auto; flex: 0 0 auto; max-width: 48%; }
.field__input:focus-visible { outline-offset: 0; }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
.field__hint { margin: var(--space-2) 0 0; font-size: var(--size-xs); color: var(--color-ink-soft); }
.more { margin-bottom: var(--space-4); }
.more summary { cursor: pointer; min-height: var(--touch); display: flex; align-items: center; font-weight: var(--weight-medium); color: var(--color-accent); }
.more__grid { display: grid; gap: var(--space-4); padding-top: var(--space-3); }

/* Calculadora y buscador */
.calc h2, .finder h2 { margin-bottom: var(--space-4); }
.calc__form { display: grid; gap: 0 var(--space-5); }
.result { border-top: var(--line-width) solid var(--color-line); padding-top: var(--space-4); margin-top: var(--space-2); outline: none; }
.result__value { font-family: var(--font-display); font-feature-settings: var(--display-features); font-size: var(--size-hero-number); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); margin: 0; }
.result__range { color: var(--color-ink-soft); margin: var(--space-1) 0 var(--space-3); }
.result__tag { margin-bottom: var(--space-3); }
.result__label { color: var(--color-ink-soft); font-size: var(--size-s); margin: 0 0 var(--space-1); }
.working { list-style: none; counter-reset: paso; padding: 0; margin: var(--space-4) 0; max-width: var(--measure); }
.working li { counter-increment: paso; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0 var(--space-2); padding: var(--space-2) 0; border-bottom: var(--line-width) solid var(--color-line); }
.working li::before { content: counter(paso); color: var(--color-ink-soft); font-family: var(--font-mono); }
.working__what { font-weight: var(--weight-medium); }
.working__calc { grid-column: 2; font-family: var(--font-mono); font-size: var(--size-s); color: var(--color-ink-soft); overflow-wrap: anywhere; }
.working__out { grid-column: 2; font-family: var(--font-mono); font-size: var(--size-s); }
.notes { padding-left: var(--space-5); font-size: var(--size-s); color: var(--color-ink-soft); max-width: var(--measure); }
.calc__where { font-size: var(--size-xs); margin: var(--space-3) 0 0; }
.finder__out .card { margin-top: var(--space-4); }
.finder__out h3 { font-family: var(--font-mono); }
.hit__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

@media (min-width: 48rem) {
  .calc__form { grid-template-columns: 1fr 1fr; }
  .calc__form .field--weight, .calc__form .field--stamp, .calc__form .field--stones, .calc__form .field--price { grid-column: auto; }
  .calc__form .more { grid-column: 1 / -1; }
  .more__grid { grid-template-columns: repeat(3, 1fr); }
  .wrap { padding-inline: var(--space-5); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .chip, .grid-links a { transition: border-color 0.12s, background-color 0.12s; }
}
@media print { .site, .site-foot, .cta, .skip { display: none; } }

/* La sala: portada, vitrina y creditos de las fotos */
.room { display: grid; grid-template-columns: 1fr; overflow: hidden; margin-block: var(--space-4) var(--space-5); border: var(--line-width) solid var(--glass-edge); border-radius: var(--radius-l); background: var(--room-bg); }
.room__text { position: relative; z-index: 1; align-self: center; padding: var(--space-6) var(--space-5) var(--space-3); }
.room__title { margin: 0 0 var(--space-4); font-size: var(--size-hero); line-height: var(--leading-tight); }
.room__voice { margin: 0 0 var(--space-5); max-width: 30rem; font-family: var(--font-display); font-style: italic; font-size: var(--size-l); line-height: 1.35; color: var(--color-ink-soft); }
.room__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.room__stage { position: relative; margin: 0; min-height: 19rem; }
.room__floor { position: absolute; inset: auto 0 0 0; height: 5.5rem; background: var(--room-floor); }
.room__floor::before { content: ""; position: absolute; left: 50%; top: 0; width: 9rem; height: 1rem; transform: translate(-50%, -50%); border-radius: var(--radius-pill); background: var(--room-contact); filter: blur(5px); }
.room__halo { position: absolute; left: 50%; top: 2%; width: min(28rem, 92%); aspect-ratio: 1; transform: translateX(-50%); background: var(--room-halo); filter: blur(10px); }
.room__piece, .room__reflect { position: absolute; left: 50%; height: 14rem; width: auto; max-width: none; transform: translateX(-50%); }
.room__piece { bottom: 5.5rem; filter: var(--room-piece-shadow); }
.room__reflect { top: calc(100% - 5.5rem); transform: translateX(-50%) scaleY(-1); opacity: var(--room-reflect-opacity); filter: blur(1.2px); -webkit-mask-image: var(--room-reflect-mask); mask-image: var(--room-reflect-mask); }
.room__caption { position: absolute; right: var(--space-4); bottom: var(--space-2); max-width: 15rem; margin: 0; font-size: var(--size-xs); line-height: 1.35; text-align: right; color: var(--color-ink-soft); }
.vitrine__list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding: 0; margin: var(--space-4) 0; }
.niche { margin: 0; }
.niche__arch { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 14rem; padding-bottom: var(--space-5); overflow: hidden; border: var(--line-width) solid var(--glass-edge); border-radius: var(--radius-arch); background: var(--niche-1); }
.niche--2 .niche__arch { background: var(--niche-2); }
.niche--3 .niche__arch { background: var(--niche-3); }
.niche--4 .niche__arch { background: var(--niche-4); }
.niche__arch::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; background: var(--niche-floor); border-top: var(--line-width) solid var(--room-edge); }
.niche__arch img { position: relative; z-index: 1; height: 10.5rem; width: auto; max-width: 80%; object-fit: contain; filter: var(--room-piece-shadow); }
.niche figcaption { padding-top: var(--space-2); font-size: var(--size-s); line-height: 1.35; }
.niche figcaption strong { display: block; font-weight: var(--weight-medium); }
.niche figcaption span { color: var(--color-ink-soft); font-size: var(--size-xs); }
.credits { max-width: var(--measure); padding-left: var(--space-5); font-size: var(--size-xs); color: var(--color-ink-soft); }
.credits li { margin-bottom: var(--space-1); }
.legal h2 { margin-top: var(--space-5); }
@media (min-width: 48rem) {
  .room { grid-template-columns: 1.1fr 1fr; }
  .room__text { padding: var(--space-7) var(--space-6) var(--space-7) var(--space-7); }
  .room__stage { min-height: 34rem; }
  .room__floor { height: 8.5rem; -webkit-mask-image: var(--room-floor-mask); mask-image: var(--room-floor-mask); }
  .room__piece, .room__reflect { height: 25rem; }
  .room__piece { bottom: 8.5rem; }
  .room__reflect { top: calc(100% - 8.5rem); }
  .vitrine__list { grid-template-columns: repeat(4, 1fr); }
  .niche__arch { height: 17rem; }
  .niche__arch img { height: 12.5rem; }
}
.brand__dot { color: var(--color-spark); }