/* Centro Ónix · vista previa de Candil Web
   Mundo visual: el del logo de Centro Ónix (piedra clara, tinta grafito, sombra gris desplazada y firma taupe).
   Bodoni Moda para la voz, Jost para el texto. Fotos reales del centro como protagonistas. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/bodoni.woff2) format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/bodoni-italic.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../fonts/jost.woff2) format("woff2"); }
:root {
  --ground: #f3f2f0; --ground-2: #ede7e2; --ground-3: #e2dad3;
  --ink: #3a3937; --ink-2: #5a5652; --stone: #aaa7a3; --taupe: #94867e; --taupe-ink: #6f6158;
  --line: #d8d5d0; --line-strong: #85807a;
  --tile-dark: #3a3937; --tile-dark-fg: #f3f2f0; --tile-dark-fg2: #d3cfc9;
  --on-ink: #f3f2f0; --ok: #4f6f4c; --chat: #e6ddd5; --bubble: #fff; --bubble-ink: #2f2e2c;
  --scrim: rgba(243,242,240,.94); --pend: #8a5a2b; --pend-bg: #f6ead9;
  --display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --text: "Jost", "Avenir Next", Futura, "Segoe UI", system-ui, sans-serif;
  --s--1: .875rem; --s-0: 1.0625rem; --s-1: 1.3rem; --s-2: 1.7rem;
  --s-3: clamp(2rem, 1.45rem + 2vw, 2.9rem);
  --s-4: clamp(2.45rem, 1.6rem + 2.1vw, 3.4rem);
  --s-5: clamp(3rem, 1.9rem + 4.6vw, 6rem);
  --wrap: 1240px;
  --gut-l: max(clamp(18px, 4vw, 48px), env(safe-area-inset-left, 0px));
  --gut-r: max(clamp(18px, 4vw, 48px), env(safe-area-inset-right, 0px));
  --head-h: 68px; --ease: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #1c1b1a; --ground-2: #262422; --ground-3: #2f2c2a; --ink: #ecebe8; --ink-2: #bdb8b2; --stone: #55504b;
  --taupe: #b9aa9f; --taupe-ink: #cbbdb2; --line: #3a3734; --line-strong: #7a756f; --tile-dark: #2f2c2a; --tile-dark-fg: #ecebe8; --tile-dark-fg2: #c3beb8;
  --on-ink: #1c1b1a; --ok: #93b98c; --chat: #232120; --bubble: #2f2c2a; --bubble-ink: #ecebe8; --scrim: rgba(28,27,26,.94); --pend: #e9b98a; --pend-bg: #3a2e22;
  color-scheme: dark; } }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); -webkit-text-size-adjust: 100%; scrollbar-color: var(--stone) var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--text); font-size: var(--s-0); line-height: 1.62; -webkit-font-smoothing: antialiased; }
::selection { background: var(--taupe); color: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .28em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; color: var(--ink); }
p { margin: 0; text-wrap: pretty; }
input, button, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--taupe-ink); outline-offset: 3px; }
.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.sec { padding-block: clamp(72px, 9vw, 132px); }
.sec-tint { background: var(--ground-2); }
.sec-head { align-content: start; display: grid; gap: 14px; margin-bottom: clamp(32px, 4.5vw, 56px); max-width: 46rem; }
.sec-head h2 { font-size: var(--s-3); line-height: 1.06; letter-spacing: -.01em; }
.sec-head p { color: var(--ink-2); max-width: 52ch; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 10px 14px; text-decoration: none; }
.skip:focus { left: var(--gut-l); }
/* Pendiente: marca visible para datos sin confirmar (solo en la vista previa) */
.pend { display: inline-flex; align-items: center; gap: .4em; font-family: var(--text); font-style: normal; font-size: .82rem; line-height: 1.35; font-weight: 500; color: var(--pend); background: var(--pend-bg); border: 1px dashed currentColor; padding: .25em .6em; letter-spacing: .01em; }
/* Botones: la sombra gris desplazada del logo */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 1.45em; font-family: var(--text); font-size: 1rem; font-weight: 500; letter-spacing: .01em; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 0; background: none; transition: transform .28s var(--ease), box-shadow .28s var(--ease), background-color .25s, color .25s, border-color .25s; }
.btn-ink { background: var(--ink); color: var(--on-ink); box-shadow: 5px 5px 0 var(--stone); }
.btn-ink:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--stone); }
.btn-ink:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--stone); }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--on-ink); }
/* Banda de vista previa */
.proposal { background: var(--ink); color: var(--on-ink); font-size: .8rem; letter-spacing: .02em; }
.proposal .wrap { padding-block: 7px; text-align: center; }
.proposal strong { font-weight: 600; }
/* Cabecera */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--scrim); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.2); }
.head-in { height: var(--head-h); display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
.brand { display: flex; align-items: center; min-height: 44px; color: var(--ink); margin-right: auto; flex: none; }
.brand svg { display: block; height: 30px; width: auto; overflow: visible; }
.brand use { fill: currentColor; stroke: currentColor; stroke-width: 2.2; }
.nav { display: flex; gap: clamp(14px, 2.2vw, 30px); order: 1; }
.nav a { text-decoration: none; color: var(--ink-2); font-size: .97rem; min-height: 44px; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.head-cta { order: 2; min-height: 44px; padding: 0 1.1em; box-shadow: 4px 4px 0 var(--stone); }
.menu-btn { order: 3; display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: none; cursor: pointer; color: var(--ink); }
.menu-btn .ic { width: 22px; height: 22px; }
/* Portada */
.hero { position: relative; overflow: clip; }
.hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; column-gap: clamp(28px, 5vw, 80px); min-height: min(calc(100svh - var(--head-h) - 31px), 820px); }
.hero-copy { display: grid; align-content: center; gap: 26px; padding-block: clamp(40px, 6vw, 88px); position: relative; z-index: 1; }
.hero h1 { font-size: var(--s-5); line-height: .98; letter-spacing: -.025em; }
.hero h1 em { font-style: italic; color: var(--taupe-ink); display: block; }
.lede { color: var(--ink-2); font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .97rem; }
.proof a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.proof a:hover .proof-t { text-decoration: underline; }
.proof .stars .ic { width: 17px; height: 17px; }
.proof b { font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums; }
.hero-fig { position: relative; margin: 0; align-self: stretch; padding-block: clamp(24px, 3vw, 48px); }
.hero-photo { position: relative; height: 100%; min-height: 420px; }
.hero-photo::before { content: ""; position: absolute; inset: 0; transform: translate(18px, 18px); background: var(--stone); opacity: .55; }
picture { display: contents; }
.hero-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.hero-photo .cap { position: absolute; left: 0; bottom: 0; z-index: 1; background: var(--ground); color: var(--ink-2); font-size: .82rem; padding: 6px 12px; }
.hero-mark { position: absolute; z-index: 2; left: clamp(-90px, -6vw, -40px); bottom: clamp(36px, 6vw, 80px); width: clamp(180px, 20vw, 290px); background: var(--ground); padding: 18px 22px 14px; box-shadow: 0 18px 40px -18px rgba(40,36,32,.35); }
.hero-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.mono .m-sh { fill: var(--stone); } .mono .m-ink { fill: var(--ink); } .mono .m-sc { fill: var(--taupe); }
@media (prefers-reduced-motion: no-preference) {
  .mono .m-sh { animation: castShadow 1.6s var(--ease) .35s both; }
  .mono .m-sc { animation: writeScript 1.9s cubic-bezier(.45,0,.2,1) .8s both; }
  .hero-photo::before { animation: shadowIn 1.6s var(--ease) .2s both; }
}
@keyframes castShadow { from { transform: translate(-36px, -36px); } to { transform: none; } }
@keyframes writeScript { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes shadowIn { from { transform: translate(0, 0); opacity: 0; } to { transform: translate(18px, 18px); opacity: .55; } }
/* Cinta de tratamientos */
.marquee { border-block: 1px solid var(--line); overflow: hidden; }
.mq-track { display: flex; width: max-content; }
.mq-track ul { display: flex; margin: 0; padding: 0; list-style: none; }
.mq-track li { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); padding: 16px 0; display: flex; align-items: center; white-space: nowrap; }
.mq-track li::after { content: ""; width: 1px; height: 1.1em; background: var(--stone); margin-inline: clamp(22px, 3vw, 40px); }
@media (prefers-reduced-motion: no-preference) { .mq-track { animation: marquee 70s linear infinite; } .marquee:hover .mq-track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Tratamientos */
.bento { display: grid; gap: clamp(14px, 1.8vw, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
.tile { display: flex; flex-direction: column; min-width: 0; }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile.tall { grid-row: span 2; }
.tile.tall .tile-img { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
.tile-feature { grid-row: span 2; position: relative; overflow: hidden; justify-content: flex-end; }
.tile-feature h3 { font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.5rem); }
.tile-feature p { font-size: 1.02rem; }
.tile-feature .tile-txt { margin-top: 0; }
.tile-feature .mk { width: 78%; height: auto; margin-bottom: auto; padding-bottom: 28px; }
.tile-feature .mk .m-sh { fill: var(--stone); } .tile-feature .mk .m-ink { fill: var(--ink); }
.tile-img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ground-2); }
.tile.big .tile-img { aspect-ratio: auto; flex: 1 1 auto; min-height: 360px; }
.tile.big .tile-img img { object-position: 50% 78%; }
.tile.wide .tile-img { aspect-ratio: 16 / 10; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tile:hover .tile-img img { transform: scale(1.035); }
.tile-txt { display: grid; gap: 6px; padding-top: 16px; justify-items: start; }
.tile h3 { font-size: 1.5rem; line-height: 1.12; font-weight: 500; }
.tile.big h3 { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
.tile p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; max-width: 46ch; }
.price { font-variant-numeric: lining-nums tabular-nums; color: var(--ink); font-weight: 500; font-size: .95rem; }
.tile-cta { display: inline-block; padding-block: 10px; margin-top: -4px; margin-bottom: -10px; font-weight: 500; font-size: .95rem; text-decoration: underline; text-decoration-color: var(--stone); text-underline-offset: .32em; transition: text-decoration-color .2s; }
.tile-cta:hover { text-decoration-color: var(--ink); }
.tile-plain, .tile-dark { padding: clamp(20px, 2.2vw, 28px); gap: 14px; }
.tile-plain { background: var(--ground-2); }
.tile-pend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding: 22px clamp(20px, 2.2vw, 28px); border: 1px dashed var(--line-strong); }
.tile-pend > div { display: grid; gap: 8px; justify-items: start; }
.tile-pend h3 { font-size: 1.3rem; }
.tile-pend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tile-pend li { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--ink-2); }
.tile-plain ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tile-plain li { font-family: var(--display); font-size: 1.2rem; line-height: 1.25; }
.tile-plain .tile-txt, .tile-dark .tile-txt { margin-top: auto; padding-top: 6px; }
.tile-dark { background: var(--tile-dark); color: var(--tile-dark-fg); position: relative; overflow: hidden; }
.tile-dark > * { position: relative; }
.tile-dark h3 { color: var(--tile-dark-fg); }
.tile-dark p { color: var(--tile-dark-fg2); }
.tile-dark .tile-cta { color: var(--tile-dark-fg); text-decoration-color: var(--tile-dark-fg2); }
.tile-dark :focus-visible { outline-color: var(--tile-dark-fg); }
.tile-dark .wm { position: absolute; right: -6%; bottom: -18%; width: 70%; height: auto; opacity: .1; pointer-events: none; }
.tile-dark .wm use { fill: var(--tile-dark-fg); }
.trat-note { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; color: var(--ink-2); }
/* Laura */
.laura { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.laura-fig { margin: 0; }
.laura-fig .ph { position: relative; }
.laura-fig .ph::before { content: ""; position: absolute; inset: 0; transform: translate(-18px, 18px); background: var(--stone); opacity: .45; }
.laura-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; position: relative; }
.laura-fig figcaption { margin-top: 30px; display: grid; gap: 8px; justify-items: start; }
.laura-fig figcaption { margin-top: 12px; font-size: .86rem; color: var(--ink-2); }
.laura-ph { aspect-ratio: 4 / 5; position: relative; background: var(--ground-3); display: grid; place-items: center; text-align: center; padding: 24px; }
.laura-txt { display: grid; gap: 22px; }
.laura-txt h2 { font-size: var(--s-4); line-height: 1.04; letter-spacing: -.015em; }
.laura-txt > p { color: var(--ink-2); font-size: 1.1rem; max-width: 50ch; }
.voices { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; border-left: 1px solid var(--line-strong); padding-left: 22px; }
.voices li { font-family: var(--display); font-style: italic; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.35; }
.voices small a { color: inherit; }
.voices small { display: block; font-family: var(--text); font-style: normal; font-size: .85rem; color: var(--ink-2); margin-top: 2px; }
.pend-list { display: flex; flex-wrap: wrap; gap: 8px; }
/* Primera visita */
/* Galería */
.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.gal figure { margin: 0; position: relative; overflow: hidden; background: var(--ground-3); grid-column: span 3; aspect-ratio: 1; }
.gal figure:nth-child(1) { grid-column: span 6; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.gal figure:nth-child(2) { grid-column: span 6; aspect-ratio: 16 / 9; }
.gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.gal figure:hover img { transform: scale(1.03); }
.gal-foot { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; color: var(--ink-2); font-size: .95rem; }
/* Opiniones */
.op { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.score-box { display: grid; gap: 10px; justify-items: start; position: sticky; top: calc(var(--head-h) + 32px); }
.score { font-family: var(--display); font-size: var(--s-5); line-height: .9; font-variant-numeric: lining-nums; text-shadow: .06em .06em 0 var(--stone); }
.stars { display: flex; gap: 3px; color: var(--taupe); }
.stars .ic { width: 22px; height: 22px; }
.score-box .meta { color: var(--ink-2); }
.score-box a { font-weight: 500; margin-top: 6px; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px); }
.q { margin: 0; display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.q blockquote { margin: 0; }
.q blockquote p { font-size: 1.04rem; line-height: 1.6; }
.q.lg { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
.q.lg blockquote p { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2rem); line-height: 1.32; max-width: 32em; }
.q figcaption { font-size: .9rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.q figcaption b { font-weight: 500; color: var(--ink); }
/* Reserva */
.book { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.book-form .sec-head { margin-bottom: 28px; }
form { display: grid; gap: 26px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 500; font-size: .98rem; margin-bottom: 10px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); background: var(--ground); font-size: .95rem; line-height: 1.2; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--taupe-ink); outline-offset: 2px; }
.field { display: grid; gap: 8px; max-width: 26rem; }
.field label { font-weight: 500; font-size: .98rem; display: flex; align-items: center; gap: .3em; min-height: 44px; margin-bottom: -10px; cursor: pointer; }
.field label span { font-weight: 400; color: var(--ink-2); }
.field input { height: 50px; padding: 0 14px; border: 1px solid var(--line-strong); background: var(--ground); border-radius: 0; caret-color: var(--taupe-ink); }
.field input:focus { border-color: var(--ink); }
.check { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding-right: 12px; font-size: .98rem; cursor: pointer; justify-self: start; }
.check input { width: 24px; height: 24px; flex: none; accent-color: var(--ink); margin: 0; cursor: pointer; }
.send { justify-self: start; }
.book-preview { position: sticky; top: calc(var(--head-h) + 32px); display: grid; gap: 14px; }
.pv-label { font-size: .92rem; color: var(--ink-2); }
.chat { background: var(--chat); border: 1px solid var(--line); padding: 16px 16px 22px; display: grid; gap: 16px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--ground); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: none; }
.avatar svg { width: 40px; height: auto; }
.avatar .a-sh { fill: var(--stone); } .avatar .a-ink { fill: var(--ink); }
.chat-head b { display: block; font-weight: 500; line-height: 1.2; }
.chat-head small { color: var(--ink-2); font-size: .85rem; font-variant-numeric: tabular-nums; }
.bubble { justify-self: end; max-width: 34ch; background: var(--bubble); color: var(--bubble-ink); padding: 11px 13px 9px; border-radius: 12px 12px 3px 12px; font-size: .98rem; line-height: 1.5; box-shadow: 0 1px 2px rgba(40,36,32,.12); overflow-wrap: anywhere; }
.call { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .98rem; color: var(--ink-2); }
.call a { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* Dónde estamos */
.visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.visit h2 { font-size: var(--s-3); line-height: 1.06; margin-bottom: 18px; }
.visit h3 { font-family: var(--text); font-size: 1rem; font-weight: 500; margin: 34px 0 12px; }
.addr { font-family: var(--display); font-size: var(--s-2); line-height: 1.25; font-style: normal; }
.addr span { display: block; font-family: var(--text); font-size: 1rem; color: var(--ink-2); margin-top: 6px; }
.v-btns { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 26px; }
.hours { width: 100%; max-width: 30rem; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .97rem; }
.hours th { text-align: left; font-weight: 400; color: var(--ink-2); padding: 7px 10px 7px 8px; }
.hours td { padding: 7px 8px 7px 10px; color: var(--ink-2); white-space: nowrap; }
.hours tr.today th, .hours tr.today td { color: var(--ink); font-weight: 500; }
.hours tr.today { background: var(--ground-2); }
.status { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 500; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--stone); }
.status.is-open .dot { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.note { font-size: .9rem; color: var(--ink-2); margin-top: 8px; }
.map { position: relative; min-height: 420px; background: var(--ground-2); border: 1px solid var(--line); }
.shop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 32px; }
.shop li { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line-strong); }
.shop b { font-weight: 500; }
.shop span { color: var(--ink-2); font-size: .94rem; }
/* Preguntas */
.faq { align-items: start; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--display); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--taupe-ink); }
.faq .ans { padding: 0 0 24px; color: var(--ink-2); max-width: 62ch; display: grid; gap: 10px; }
/* Regalo */
.gift { background: var(--tile-dark); color: var(--tile-dark-fg); position: relative; overflow: hidden; }
.gift-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: clamp(56px, 7vw, 96px); position: relative; }
.gift h2 { font-size: var(--s-4); line-height: 1.04; margin-bottom: 12px; color: var(--tile-dark-fg); }
.gift p { color: var(--tile-dark-fg2); max-width: 46ch; }
.gift .btn-ink { background: var(--tile-dark-fg); color: var(--tile-dark); box-shadow: 5px 5px 0 #77736e; }
.gift :focus-visible { outline-color: var(--tile-dark-fg); }
.gift .wm { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(560px, 60%); opacity: .07; pointer-events: none; }
.gift .wm use { fill: var(--tile-dark-fg); }
/* Pie */
.foot { padding-block: clamp(56px, 7vw, 96px) 40px; }
.foot-in { display: grid; gap: 28px; }
.foot-logo { display: block; width: min(560px, 100%); height: auto; color: var(--taupe); overflow: visible; }
.foot-logo use { fill: currentColor; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; align-items: end; padding-top: 24px; border-top: 1px solid var(--line); }
.foot-links, .legal-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot-links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.foot-links a:hover, .legal-links a:hover { text-decoration: underline; }
.legal-links a { color: var(--ink-2); font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.fine { font-size: .86rem; color: var(--ink-2); }
/* Barra fija móvil */
.mbar { display: none; }
/* Páginas legales */
.legal { padding-block: clamp(48px, 7vw, 96px); }
.legal .wrap { max-width: 820px; }
.legal h1 { font-size: var(--s-4); line-height: 1.05; margin-bottom: 24px; }
.legal h2 { font-size: var(--s-2); margin: 40px 0 12px; }
.legal p, .legal li { color: var(--ink-2); max-width: 70ch; }
.legal p + p { margin-top: 12px; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; }
.legal dt { font-weight: 500; }
.legal dd { margin: 0; color: var(--ink-2); }
/* Movimiento al hacer scroll: ver el bloque v8 al final del archivo */

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .hero-mark { left: -24px; }
}
@media (max-width: 899px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ground); border-bottom: 1px solid var(--line); flex-direction: column; gap: 0; padding: 8px var(--gut-r) 16px var(--gut-l); }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .menu-btn { display: inline-flex; }
  .hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-fig { order: -1; padding: 0; margin-inline: calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r)); }
  .hero-photo { min-height: 0; aspect-ratio: 4 / 3.4; }
  .hero-photo::before { display: none; }
  .hero-mark { left: var(--gut-l); bottom: -34px; width: 168px; padding: 12px 14px 9px; }
  .hero-copy { padding-block: 64px 48px; gap: 22px; }
  .op, .book, .laura, .faq, .visit { grid-template-columns: minmax(0, 1fr); }
  .score-box, .book-preview { position: static; }
  .laura-fig { max-width: 520px; }
  .map { min-height: 340px; }
}
@media (max-width: 760px) {
  .head-cta { display: none; }
  .brand svg { height: 26px; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal figure, .gal figure:nth-child(n) { grid-column: span 1; grid-row: auto; aspect-ratio: 1; min-height: 0; }
  .gal figure:nth-child(1), .gal figure:nth-child(2) { grid-column: span 2; aspect-ratio: 16 / 10; }
  .mbar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px var(--gut-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gut-l); background: var(--scrim); border-top: 1px solid var(--line); }
  .mbar .btn { min-height: 50px; }
  .mbar .btn-ink { flex: 1; box-shadow: 3px 3px 0 var(--stone); }
  .mbar .btn-line { width: 52px; padding: 0; }
  .mbar .btn-line .ic { width: 24px; height: 24px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .bento { gap: 14px; }
  .tile.big, .tile.wide, .tile-feature { grid-column: 1 / -1; grid-row: auto; }
  .tile.tall { grid-column: 1 / -1; grid-row: auto; }
  .tile.tall .tile-img { aspect-ratio: 4 / 3.6; min-height: 0; flex: none; }
  .tile-feature .mk { width: 46%; }
  .tile.big .tile-img { aspect-ratio: 4 / 3.6; min-height: 0; flex: none; }
  .tile h3 { font-size: 1.2rem; }
  .tile p { font-size: .93rem; }
  .shop { grid-template-columns: minmax(0, 1fr); }
  .hero-cta .btn { flex: 1 1 100%; }
  .legal dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; } }
@media (max-width: 899px) { .laura-fig img { aspect-ratio: 4 / 3.3; object-position: 0 45%; } }

/* ——— Tratamientos editoriales ——— */
.trat-intro { padding-top: clamp(80px, 10vw, 140px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.trat-intro h2 { font-size: var(--s-4); line-height: 1.02; letter-spacing: -.015em; }
.trat-intro p { color: var(--ink-2); font-size: 1.1rem; max-width: 44ch; }
.feat { position: relative; }
.feat-madera .feat-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: center; padding-block: clamp(56px, 8vw, 120px); }
.feat-word { font-family: var(--display); font-style: italic; font-size: clamp(4rem, 2rem + 8vw, 10.5rem); line-height: .86; letter-spacing: -.03em; color: var(--ink); text-shadow: .045em .045em 0 var(--stone); }
.feat-body { display: grid; gap: 18px; justify-items: start; }
.feat-body h3, .bleed-card h3, .split-txt h3 { font-size: var(--s-3); line-height: 1.05; }
.feat-body > p, .bleed-card p, .split-txt p { color: var(--ink-2); font-size: 1.08rem; max-width: 46ch; }
.pull { margin: 6px 0 4px; padding: 0; }
.pull p { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.3; color: var(--taupe-ink); }
.pull footer { font-size: .85rem; color: var(--ink-2); margin-top: 6px; }
.feat-bleed { min-height: clamp(520px, 62vw, 860px); display: flex; align-items: flex-end; color: var(--ink); }
.feat-bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.feat-bleed .wrap { position: relative; width: 100%; padding-bottom: clamp(28px, 5vw, 72px); }
.bleed-card { background: var(--ground); max-width: 34rem; padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; justify-items: start; box-shadow: 12px 12px 0 rgba(28,27,26,.35); }
.feat-split .split-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: center; padding-block: clamp(64px, 9vw, 132px); }
.split-txt { display: grid; gap: 16px; justify-items: start; }
.split-txt strong { font-weight: 500; color: var(--ink); }
.split-fig { margin: 0 calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + var(--gut-r))) 0 0; }
.split-fig img { width: 100%; aspect-ratio: 4 / 3.6; max-height: 82vh; object-fit: cover; object-position: 50% 70%; }
.more { padding-bottom: clamp(72px, 9vw, 132px); }
.more-title { font-family: var(--display); font-size: var(--s-2); font-weight: 400; margin-bottom: 12px; }
.more-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.more-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-strong); }
.more-list h4 { margin: 0 0 4px; font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 1.2rem + .7vw, 1.9rem); line-height: 1.15; }
.more-list p { color: var(--ink-2); max-width: 56ch; }
.more-list .more-reel { grid-template-columns: minmax(0, 1fr) auto auto; }
.reel { display: block; width: 96px; aspect-ratio: 9 / 16; overflow: hidden; transform: rotate(2.5deg); box-shadow: 6px 8px 18px -6px rgba(40,36,32,.45); transition: transform .4s var(--ease); }
.reel:hover { transform: rotate(0) scale(1.04); }
.reel img { width: 100%; height: 100%; object-fit: cover; }
.more-note { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; color: var(--ink-2); }
/* Galería a sangre */
.gal { display: grid; grid-template-columns: 5fr 4fr 3fr; grid-template-rows: clamp(220px, 22vw, 360px) clamp(240px, 26vw, 420px); gap: 6px; max-width: none; padding: 0; }
.gal figure, .gal figure:nth-child(n) { grid-column: auto; grid-row: auto; aspect-ratio: auto; min-height: 0; margin: 0; position: relative; overflow: hidden; }
.gal figure:nth-child(1) { grid-row: span 2; }
.gal figure:nth-child(2) { grid-column: span 2; }
@media (max-width: 899px) {
  .trat-intro, .feat-madera .feat-in, .feat-split .split-in { grid-template-columns: minmax(0, 1fr); }
  .split-fig { margin: 0 calc(-1 * var(--gut-r)) 0 calc(-1 * var(--gut-l)); order: -1; }
  .feat-bleed { min-height: 0; display: block; }
  .feat-bleed img { position: static; aspect-ratio: 4 / 3.2; }
  .feat-bleed .wrap { margin-top: -64px; }
  .bleed-card { box-shadow: 8px 8px 0 rgba(28,27,26,.25); }
  .gal { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .gal figure:nth-child(3), .gal figure:nth-child(4) { aspect-ratio: 1; }
  .gal figure:nth-child(1) { grid-row: auto; grid-column: span 2; min-height: 0; aspect-ratio: 4 / 3; }
  .gal figure:nth-child(2) { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .more-list li, .more-list .more-reel { grid-template-columns: minmax(0, 1fr) auto; }
  .more-list .more-reel .reel { grid-row: span 2; grid-column: 2; }
  .more-list li > .tile-cta { justify-self: start; }
  .more-list li { grid-template-columns: minmax(0, 1fr); }
  .more-list .more-reel { grid-template-columns: minmax(0, 1fr) 80px; }
  .more-list .more-reel > div { grid-column: 1; }
  .more-list .more-reel .reel { width: 80px; grid-row: 1 / span 2; }
}

/* Opiniones: una cita grande y el resto en columnas, sin cajas */
.op { grid-template-columns: minmax(0, 1fr); }
.score-box { position: static; grid-auto-flow: column; justify-content: start; align-items: center; gap: 18px; }
.score-box .score { font-size: clamp(3.4rem, 2.4rem + 3vw, 5.5rem); }
.quotes { display: block; columns: 3 18rem; column-gap: clamp(28px, 4vw, 56px); }
.q { break-inside: avoid; margin-bottom: clamp(28px, 3vw, 40px); border-top: 0; padding-top: 0; }
.q.lg { column-span: all; margin-bottom: clamp(40px, 5vw, 72px); }
.q.lg blockquote p { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); line-height: 1.22; max-width: 26em; color: var(--ink); }
@media (max-width: 760px) { .score-box { grid-auto-flow: row; } }

.pv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 5vw, 80px); align-items: start; }
.pv h2 { grid-row: span 2; }
.pv-say { font-family: var(--display); font-style: italic; font-size: var(--s-2); line-height: 1.3; max-width: 34ch; text-wrap: pretty; }
.score-box .write { display: inline-block; margin-top: 10px; }
@media (min-width: 761px) { .score-box .write { margin-block: -10px; } } /* D1 v7b: mismos márgenes que «Leer todas en Google» (padding 10 / margin -10), así quedan a la misma altura */
@media (max-width: 1023px) { .pv { grid-template-columns: minmax(0, 1fr); } .pv h2 { grid-row: auto; } }

/* Zonas táctiles de 44 px en los enlaces de texto (medidas con Playwright) */
.voices small a, .q-src, .score-box a, .gal-foot a, .call a, .map-attr a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.voices small a, .map-attr a { padding-block: 13px; margin-block: -13px; }
.faq .ans a, .more-list p a { padding-block: 12px; }
/* Recuadro único de pendientes en «Soy Laura» */
.pend-box { border: 1px dashed var(--pend); background: var(--pend-bg); color: var(--pend); padding: 14px 18px; font-size: .88rem; line-height: 1.45; max-width: 46ch; }
.pend-box .pend-h { font-weight: 600; margin-bottom: 6px; }
.pend-box ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
/* Mapa estático */
.map { margin: 0; min-height: 0; display: grid; align-content: start; gap: 8px; background: none; border: 0; }
.map-link { position: relative; display: block; border: 1px solid var(--line); overflow: hidden; background: var(--ground-2); }
.map-link img { width: 100%; height: clamp(340px, 34vw, 460px); object-fit: none; object-position: 50% 50%; }
.map-link:hover { border-color: var(--ink); }
.map-attr { font-size: .8rem; color: var(--ink-2); }
/* Titulares a una columna (varían la maquetación frente a las secciones partidas) */
.trat-intro { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
.trat-intro p { max-width: 52ch; }
.pv { grid-template-columns: minmax(0, 1fr); max-width: 52rem; gap: 18px; }
.pv h2 { grid-row: auto; }
@media (max-width: 899px) { .feat-bleed img { object-position: 78% 40%; } }
.pv h2 { font-size: var(--s-3); line-height: 1.06; letter-spacing: -.01em; }
.pv .pv-say { font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.3rem); line-height: 1.28; max-width: 36ch; }

/* 404 */
.nf .wrap { min-height: 46vh; display: grid; align-content: center; justify-items: start; gap: 18px; }
.nf h1 { margin-bottom: 0; }
.nf-kicker { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.nf .v-btns { margin-top: 10px; }

/* Origen de las reseñas (Directiva (UE) 2019/2161) */
.op-src { max-width: 62ch; font-size: .9rem; color: var(--ink-2); padding-top: 18px; border-top: 1px solid var(--line); }
.op-src a { padding-block: 14px; }

/* ——— v8: aire, cabecera flotante y movimiento ———
   Entrar como en un spa: solo fundidos lentos de opacidad, sin parallax, sin escalas ni desplazamientos.
   Una sola curva: cubic-bezier(.32,.72,0,1), sin rebotes. Fundidos por tiempo de 600 ms.
   Todo el contenido está visible por defecto; el estado transparente solo existe si hay movimiento permitido. */
:root { --ease-v8: cubic-bezier(.32, .72, 0, 1); --dur-v8: .6s; }
/* Aire: más espacio entre secciones y titulares más grandes */
.sec { padding-block: clamp(96px, 12vw, 176px); }
.sec-head h2, .pv h2, .visit h2 { font-size: var(--s-4); line-height: 1.03; letter-spacing: -.015em; }
.trat-intro { padding-top: clamp(104px, 13vw, 184px); }
.trat-intro h2 { font-size: var(--s-5); line-height: .98; letter-spacing: -.025em; }
/* Cabecera flotante: barra separada del borde, translúcida y con desenfoque. Esquinas rectas, como todo Ónix (sin píldora) */
.site-head { background: none; border-bottom: 0; backdrop-filter: none; padding: 10px clamp(8px, 1.6vw, 20px) 0; }
.site-head .head-in { height: 58px; max-width: calc(var(--wrap) - 2 * clamp(8px, 1.6vw, 20px)); padding-inline: clamp(14px, 2vw, 26px); background: color-mix(in srgb, var(--ground) 86%, transparent); border: 1px solid color-mix(in srgb, var(--line-strong) 35%, transparent); box-shadow: 0 12px 32px -20px rgba(28, 27, 26, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-head .head-in { background: var(--scrim); } }
/* v8b (D2): en el móvil, fondo casi sólido y sin desenfoque. A CPU ×4 el desenfoque de la barra fija daba más fotogramas largos que la v7d */
@media (max-width: 760px) { .site-head .head-in { background: color-mix(in srgb, var(--ground) 96%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-transparency: reduce) { .site-head .head-in { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 899px) { .nav { top: calc(100% + 6px); left: clamp(8px, 1.6vw, 20px); right: clamp(8px, 1.6vw, 20px); border: 1px solid var(--line); } }
/* Portada: los dos versos aparecen uno tras otro; la foto (LCP) no se toca */
.hero h1 .hl { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .hl { animation: fadeIn var(--dur-v8) var(--ease-v8) .05s both; }
  .hero h1 em.hl { animation-delay: .3s; }
  .hero .lede { animation: fadeIn var(--dur-v8) var(--ease-v8) .35s both; }
  .hero .hero-cta { animation: fadeIn var(--dur-v8) var(--ease-v8) .4s both; }
  .hero .proof { animation: fadeIn var(--dur-v8) var(--ease-v8) .5s both; }
}
/* Entre páginas, un fundido; la cabecera se queda quieta. @view-transition va fuera del media (D3 del REVISOR) y, además,
   en un <style> al principio del <head> de cada página (build.py): Chrome puede mirar si la página acepta la transición
   antes de terminar de leer el CSS externo, y entonces la aborta («ViewTransition opt-in disabled»).
   Con «reducir movimiento» se apagan las animaciones, no la transición. */
@view-transition { navigation: auto; }
.site-head { view-transition-name: cabecera; }
::view-transition-old(root) { animation: fadeOut .3s ease-out both; }
::view-transition-new(root) { animation: fadeIn .5s var(--ease-v8) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes shadeIn { from { text-shadow: 0 0 0 transparent; } }
/* Con scroll-driven animations (Chrome, Edge, Safari 26): la opacidad sigue al scroll, sin moverse */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .rv { animation: fadeIn linear both; animation-timing-function: var(--ease-v8); animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 9%) cover 30%; }
    .lsplit { view-timeline: --titular; }
    .lsplit .ln { display: block; }
    .lsplit .ln { animation: fadeIn linear both; animation-timing-function: var(--ease-v8); animation-timeline: --titular; animation-range: entry calc(var(--i, 0) * 18%) cover 40%; }
    .uv { animation: fadeIn linear both; animation-timing-function: var(--ease-v8); animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 8%) cover 40%; }
    .feat-word { animation: shadeIn linear both; animation-timing-function: var(--ease-v8); animation-timeline: view(); animation-range: entry 30% cover 55%; }
    .laura-fig .ph::before { animation: fadeIn linear both; animation-timeline: view(); animation-range: entry 40% cover 60%; }
  }
}
/* Sin scroll-driven animations (Firefox): el mismo fundido, por tiempo, al entrar en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .rv-io :is(.rv, .uv) { transition: opacity var(--dur-v8) var(--ease-v8); transition-delay: calc(var(--i, 0) * 120ms); }
  .rv-io :is(.rv, .uv):not(.in) { opacity: 0; }
}
/* Galería fija con fundido (v8b, M1 del REVISOR). No es un paseo: el paseo espera un vídeo real.
   La foto se queda quieta en su marco y, al pasar cada umbral del recorrido, la siguiente entra por TIEMPO (600 ms) encima
   de la anterior, que sigue opaca debajo hasta que acaba el fundido: nunca se quedan dos fotos a medias aunque pares el dedo.
   app.js pone .gal-on (solo sin «reducir movimiento»); sin JS o con «reducir movimiento», el mosaico de siempre. */
.gal-stage { display: contents; }
.gal-cap, .gal-mk { display: none; }
.gal.gal-on { display: block; position: relative; height: 200svh; max-width: none; padding-inline: var(--gut-l) var(--gut-r); }
.gal-on .gal-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; column-gap: clamp(32px, 5vw, 88px);
  position: sticky; top: var(--head-h); height: calc(100svh - var(--head-h)); width: min(100%, 1100px); margin-inline: auto; }
.gal-on .gal-stage figure, .gal-on .gal-stage figure:nth-child(n) { grid-area: 1 / 2; position: relative; margin: 0; min-height: 0;
  height: min(720px, calc(100svh - var(--head-h) - 64px)); width: auto; aspect-ratio: 4 / 5; opacity: 0; z-index: 0; }
.gal-on .gal-stage figure.was { opacity: 1; z-index: 1; }
.gal-on .gal-stage figure, .gal-on .gal-stage figure:nth-child(n) { background: none; } /* v8c (D-b): sin fondo, para que una foto aún sin pintar no tape la de debajo */
.gal-on .gal-stage figure.on { opacity: 1; z-index: 2; transition: opacity .6s var(--ease-v8); }
.gal-on .gal-stage figure img { transition: none; }
.gal-on figure:hover img { transform: none; }
.gal-on .gal-cap { display: grid; grid-area: 1 / 1; margin: 0; align-self: center; font-family: var(--display); font-style: italic; font-size: var(--s-4); line-height: 1.15; color: var(--ink); }
/* v8c (D-c): los pies van en secuencia, nunca dos a medias: el que sale se va en 250 ms y el que entra empieza a los 250 ms */
.gal-on .gal-cap span { grid-area: 1 / 1; opacity: 0; transition: opacity .25s var(--ease-v8); }
.gal-on .gal-cap span.on { opacity: 1; transition: opacity .35s var(--ease-v8) .25s; }
.gal-on .gal-mk { display: block; position: absolute; left: 0; width: 1px; bottom: 0; pointer-events: none; visibility: hidden; }
/* El mural no entra en la galería fija: el original (1.170×575) enseña el aire acondicionado y la tira LED, y recortarlo deja una foto diminuta. Sigue en el mosaico. */
.gal-on .gal-stage figure.gal-out { display: none; }
@media (max-width: 760px) {
  .gal.gal-on { height: 180svh; padding-inline: 0; }
  .gal-on .gal-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; justify-items: center; row-gap: 14px;
    height: calc(100svh - var(--head-h) - 76px); width: 100%; } /* entre la cabecera y la barra de abajo */
  .gal-on .gal-stage figure, .gal-on .gal-stage figure:nth-child(n) { grid-area: 1 / 1; height: auto; width: min(100%, calc((100svh - var(--head-h) - 76px - 64px) * .8)); }
  .gal-on .gal-cap { grid-area: 2 / 1; font-size: var(--s-1); justify-self: center; text-align: center; }
}