*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; color: var(--ink); font: 400 1rem/1.65 var(--font-body); min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip;
  /* Grano de papel: apenas perceptible, sin sombras */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .16 0 0 0 0 .12 0 0 0 0 .14 0 0 0 .055 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"), var(--surface);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a, button { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); text-underline-offset: .22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-sm); }
.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--brand); color: var(--on-brand); padding: .5rem 1rem; border-radius: 999px; z-index: 10; }
.skip:focus { top: var(--gutter); }

/* Cabecera: sobre la portada es transparente y marfil; al bajar toma cuerpo con desenfoque */
.top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); max-width: 76rem; margin: 0 auto; }
.top--over { position: fixed; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--on-deep); }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--brand); line-height: 1; }
.top--over .mark, .foot-brand { color: var(--on-deep); }
.mark-text { display: inline-flex; flex-direction: column; align-items: flex-start; }
.mark-flower, .foot-flower { display: block; height: auto; }
.mark-name { font: 500 1.875rem/1 var(--font-display); font-variant-numeric: lining-nums; }
.mark-sub { font: 500 .625rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .2em; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); }
.nav-l { font-size: .875rem; letter-spacing: .02em; color: var(--ink-muted); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .35s cubic-bezier(.3,.7,.2,1), color .2s; }
@media (hover: hover) { .nav-l:hover { color: var(--brand); background-size: 100% 1px; } }
.top--over .nav-l { color: var(--on-deep-soft); } @media (hover: hover) { .top--over .nav-l:hover { color: var(--on-deep); } }
.nav-cta { font-size: .875rem; font-weight: 500; text-decoration: none; background: var(--brand); color: var(--on-brand); padding: 9px 20px; border-radius: 999px; transition: transform .18s, opacity .2s; }
.top--over .nav-cta { background: var(--petal); color: #2A1F24; }
@media (hover: hover) { .nav-cta:hover { opacity: .9; } }
@media (max-width: 40rem) { .nav-l:not(.lang) { display: none; } .mark-name { font-size: 1.625rem; } }

main { flex: 1; width: 100%; }
.wrap { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }
.prose, .booking, .links { margin-inline: auto; }
h1, h2 { font-family: var(--font-display); font-weight: 500; color: var(--brand); margin: 0; }
h1 em { font-style: italic; }
.label { font: 500 .75rem/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .18em; color: var(--label); margin: 0 0 20px; display: flex; align-items: center; gap: 14px; }
.label::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex: none; }
.lead { font-size: 1.1875rem; line-height: 1.6; max-width: 30rem; margin: 0 0 28px; }
.rule { display: none; }
.note { color: var(--ink-muted); margin: 0; font-size: .9375rem; }

/* Portada: profundidad con luz, marco fino y medallón recortado por el borde */
.hero { position: relative; background: var(--deep); color: var(--on-deep); overflow: clip; isolation: isolate;
  background-image:
    radial-gradient(60% 70% at 78% 42%, var(--glow), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(166,124,61,.20), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .95 0 0 0 .05 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>"); }
.hero::after { content: ""; position: absolute; inset: 78px 12px 12px; border: 1px solid rgba(166,124,61,.38); border-radius: 28px; pointer-events: none; z-index: -1; }
.hero-in { max-width: 76rem; margin: 0 auto; padding: 128px clamp(32px, 6vw, 56px) 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; position: relative; }
.hero-copy { position: relative; z-index: 1; max-width: 40rem; }
.hero h1 { font-size: clamp(2.5rem, 7.2vw, 5.75rem); line-height: 1; letter-spacing: -.018em; margin: 0 0 24px; color: var(--on-deep); }
.hero h1 em { color: var(--petal); }
.hero .label { color: var(--petal); }
.hero .lead { color: var(--on-deep-soft); font-size: 1.25rem; }
.hero .note { color: var(--on-deep-soft); }
.hero-act { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-medal { --tx: 16%; display: block; width: min(92vw, 560px); height: auto; margin: -8px 0 0 auto; transform: translateX(var(--tx)); }
.hero-glow { position: absolute; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; right: -18%; top: 4%; background: radial-gradient(closest-side, rgba(228,184,194,.14), transparent); z-index: -1; }
@media (min-width: 56rem) {
  .hero { min-height: min(100svh, 58rem); display: flex; align-items: center; }
  .hero::after { inset: 92px 20px 20px; }
  .hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; width: 100%; padding-block: 140px 96px; }
  .hero-medal { --tx: 20%; width: min(46vw, 620px); margin: 0; }
}

/* Cinta de servicios */
.ribbon { overflow: hidden; background: var(--surface-2); border-block: 1px solid var(--line); padding: 20px 0; }
.ribbon-in { display: flex; gap: 40px; width: max-content; align-items: center; font: italic 500 clamp(1.5rem, 3.4vw, 2.25rem)/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--brand); white-space: nowrap; }
.ribbon-in i { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }

/* Servicios: tarjetas con arte propio, escalonadas */
.svc { padding: clamp(64px, 11vw, 128px) 0 clamp(40px, 7vw, 80px); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.card a { display: block; text-decoration: none; color: var(--ink); }
.card-art { position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden; background: var(--flower); border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 96px; }
.tone-2 .card-art { background: var(--sage); border-radius: var(--r-lg) 96px var(--r-lg) var(--r-lg); }
.tone-3 .card-art { background: var(--surface-2); border-radius: 96px var(--r-lg) var(--r-lg) var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; mix-blend-mode: multiply; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.card-n { position: absolute; left: 20px; bottom: 6px; font: italic 500 4.5rem/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--brand); }
.card-t { display: block; font: 500 clamp(2rem, 4vw, 2.5rem)/1.05 var(--font-display); font-variant-numeric: lining-nums; color: var(--brand); margin: 22px 0 6px; }
.card-d { display: block; color: var(--ink-muted); }
.card-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.card-more svg { transition: transform .35s cubic-bezier(.3,.7,.2,1); }
@media (hover: hover) { .card a:hover .card-img { transform: scale(1.05); } }
@media (hover: hover) { .card a:hover .card-more svg { transform: translateX(8px); } }
@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
  .card-art { aspect-ratio: 4 / 5; }
  .card.tone-2 { margin-top: 56px; } .card.tone-3 { margin-top: 112px; }
}

/* Promesas */
.pro { padding: 0 0 clamp(56px, 9vw, 104px); }
.pro ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.pro li { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.pro-t { font: 500 1.625rem/1.15 var(--font-display); font-variant-numeric: lining-nums; color: var(--brand); }
.pro-d { color: var(--ink-muted); max-width: 22rem; }
@media (min-width: 48rem) {
  .pro ul { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
  .pro li { border-bottom: 0; padding: 36px 32px; } .pro li + li { border-left: 1px solid var(--line); } .pro li:first-child { padding-left: 0; }
}

/* Cómo funciona: banda profunda */
.how { position: relative; background: var(--deep); color: var(--on-deep); padding: clamp(64px, 11vw, 128px) 0; overflow: clip; isolation: isolate; }
.how-glow { position: absolute; inset: auto -10% -40% auto; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: radial-gradient(closest-side, var(--glow), transparent); z-index: -1; }
.how .label { color: var(--petal); }
.how h2 { color: var(--on-deep); font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.04; max-width: 20ch; margin-bottom: clamp(36px, 6vw, 72px); }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; counter-reset: s; }
.how li { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: baseline; padding-top: 20px; border-top: 1px solid rgba(166,124,61,.55); }
.step-n { font: italic 500 3.5rem/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--petal); }
.step-t { font-size: 1.1875rem; color: var(--on-deep); }
@media (min-width: 48rem) {
  .how ol { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
  .how li { grid-template-columns: 1fr; row-gap: 14px; }
  .how li:nth-child(2) { margin-top: 28px; } .how li:nth-child(3) { margin-top: 56px; }
  .step-n { font-size: 5rem; }
}

/* Cierre */
.close { background: var(--flower); color: var(--ink); padding: clamp(56px, 10vw, 112px) 0; text-align: center; }
.close h2 { color: var(--ink); font-size: clamp(2rem, 5.5vw, 3.75rem); line-height: 1.06; max-width: 18ch; margin: 0 auto 16px; }
.close .lead { margin-inline: auto; color: var(--ink); }
.close .btn { background: var(--ink); color: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .close .btn { background: var(--brand); color: var(--on-brand); } :root:not([data-theme="light"]) .close, :root:not([data-theme="light"]) .close h2, :root:not([data-theme="light"]) .close .lead { color: var(--on-deep); } }

/* Galería con recortes orgánicos y posiciones a mano */
.gallery { margin: clamp(56px, 10vw, 112px) 0 clamp(40px, 8vw, 80px); }
.gallery-row { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; align-items: start; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface-2); }
.gallery figcaption { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 10px; }
.shape-a img { border-radius: 58% 42% 8px 46% / 42% 52% 8px 58%; }
.shape-b { margin-top: 36px; transform: rotate(-1.2deg); }
.shape-b img { border-radius: 48% 52% 44% 56% / 58% 44% 56% 42%; }
.shape-c { grid-column: 1 / -1; width: min(70%, 22rem); margin-left: auto; transform: rotate(.8deg); }
.shape-c img { border-radius: 46% 54% 52% 48% / 40% 48% 52% 60%; }
@media (min-width: 48rem) {
  .gallery-row { grid-template-columns: 1.1fr .9fr .8fr; gap: 40px; }
  .shape-c { grid-column: auto; width: auto; margin-top: 72px; }
}

/* Pie */
.foot { position: relative; overflow: hidden; isolation: isolate; background: var(--deep); color: var(--on-deep-soft); padding: 48px var(--gutter) 40px; }
.foot-in { max-width: 76rem; margin: 0 auto; display: grid; gap: 8px; }
.foot-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.foot p { margin: 0; font-size: .875rem; }
.foot a { color: var(--on-deep); }
.foot-desc { letter-spacing: .12em; text-transform: uppercase; font-size: .75rem !important; }
.foot-copy { margin-top: 18px !important; padding-top: 18px; border-top: 1px solid rgba(166,124,61,.4); }

/* Botón (primero que aparezca: reservar) */
.btn { display: inline-block; background: var(--brand); color: var(--on-brand); padding: 12px 28px; border: 0; border-radius: 999px; text-decoration: none; font: 500 1rem/1.2 var(--font-body); min-height: 48px; cursor: pointer; transition: transform .18s cubic-bezier(.3,.7,.2,1), opacity .2s; }
@media (hover: hover) { .btn:hover { opacity: .92; } }
.btn:active { transform: scale(.975); }
.btn-lg { padding: 16px 40px; min-height: 56px; font-size: 1.0625rem; letter-spacing: .02em; }
.hero .btn, .foot .btn { background: var(--petal); color: #2A1F24; }
.btn-quiet { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Movimiento: solo CSS (sin JavaScript) y solo si el navegador lo permite */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; } .hero-copy > :nth-child(5) { animation-delay: .3s; }
  .hero-medal { animation: spin-in 2.6s cubic-bezier(.16,.84,.24,1) both; }
  .ribbon-in { animation: slide 60s linear infinite; }
  @supports (animation-timeline: view()) {
    .rv { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .top--over { animation: stick linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes spin-in { 0% { opacity: 0; transform: translateX(var(--tx)) rotate(-300deg) scale(.7); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateX(var(--tx)) rotate(0) scale(1); } }
@keyframes bloom { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.5); } 28% { opacity: .6; } 62% { opacity: .38; } 100% { opacity: 0; transform: translate(var(--dx), -70px) rotate(var(--r)) scale(1.1); } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } }
@keyframes stick { to { background: color-mix(in srgb, var(--deep) 90%, transparent); box-shadow: 0 1px 0 rgba(228,184,194,.16); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Navegadores sin animación por scroll (Safari iOS): la cabecera sobre la banda lleva fondo propio desde el inicio */
@supports not (animation-timeline: scroll()) {
  .top--over { background: color-mix(in srgb, var(--deep) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}
@media (prefers-reduced-motion: reduce) { .top--over { background: var(--deep); } }

/* Páginas interiores: la cabecera es pegajosa, no flota; el contenido lleva su propio margen lateral */
main > .prose, main > .booking { padding-inline: var(--gutter); }
.hero > .hero-copy { padding: 140px var(--gutter) 80px; margin-inline: auto; }
.hero > h1, .hero > .lead, .hero > p { max-width: 40rem; margin-inline: auto; padding-inline: var(--gutter); }
.card-test { position: absolute; right: 14px; top: 12px; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 3px 10px; border-radius: 999px; }

/* Mini flores del héroe: aparecen, giran y se desvanecen (decorativas; solo con movimiento permitido) */
.flora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fl { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); opacity: 0; background: url("/assets/brand/ume-mark-ivory.svg") center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) { .fl { animation: bloom var(--t) ease-in-out var(--dl) infinite; } }
.f1 { --x: 6%;  --y: 62%; --s: 26px; --t: 9s;  --dl: 1.2s; --dx: 40px;  --r: 220deg; }
.f2 { --x: 22%; --y: 18%; --s: 18px; --t: 11s; --dl: 3.4s; --dx: -30px; --r: -260deg; }
.f3 { --x: 38%; --y: 78%; --s: 32px; --t: 10s; --dl: .4s;  --dx: 50px;  --r: 300deg; }
.f4 { --x: 48%; --y: 30%; --s: 20px; --t: 12s; --dl: 5.2s; --dx: -40px; --r: -200deg; }
.f5 { --x: 58%; --y: 86%; --s: 24px; --t: 9.5s; --dl: 2.6s; --dx: 30px; --r: 180deg; }
.f6 { --x: 68%; --y: 12%; --s: 30px; --t: 10.5s; --dl: 6.4s; --dx: -50px; --r: 320deg; }
.f7 { --x: 80%; --y: 70%; --s: 16px; --t: 8.5s; --dl: 4.2s; --dx: 36px;  --r: -240deg; }
.f8 { --x: 90%; --y: 24%; --s: 22px; --t: 11.5s; --dl: .9s; --dx: -34px; --r: 260deg; }
.f9 { --x: 12%; --y: 40%; --s: 14px; --t: 13s; --dl: 7.5s; --dx: 24px;  --r: -180deg; }
.f10 { --x: 74%; --y: 46%; --s: 18px; --t: 9s; --dl: 8.4s; --dx: -26px; --r: 200deg; }
.hero-in { z-index: 1; }

/* Lienzo de la transición de pétalos (js/petals.js) */
.petal-cv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }

/* Detalles de gama alta */
.btn, .nav-cta { position: relative; overflow: hidden; border: 1px solid var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.btn::after, .nav-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%); transform: translateX(-130%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .btn::after, .nav-cta::after { animation: shine 4.8s ease-in-out 1.2s infinite; }
  @media (hover: hover) { .btn:hover::after, .nav-cta:hover::after { animation-duration: 1.4s; } }
}
@keyframes shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.btn-quiet { border-color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn, :root:not([data-theme="light"]) .nav-cta { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(201,161,90,.22), 0 0 22px rgba(201,161,90,.18); }
  :root:not([data-theme="light"]) .btn-quiet { border-color: var(--gold-bright); color: var(--ink); }
}
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .nav-cta { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(201,161,90,.22), 0 0 22px rgba(201,161,90,.18); }
.hero .btn, .foot .btn, .top--over .nav-cta { border-color: var(--gold-bright); }
.card-art::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(74,36,51,.22); border-radius: inherit; pointer-events: none; }

.foot .flora { z-index: -1; }
.foot-in { position: relative; }

/* Banda de título de páginas interiores (servicios, política, etc.) */
.page-hero { position: relative; overflow: clip; isolation: isolate; background: var(--deep); color: var(--on-deep);
  background-image: radial-gradient(55% 90% at 85% 20%, var(--glow), transparent 70%), radial-gradient(40% 70% at 0% 100%, rgba(166,124,61,.2), transparent 70%); }
.page-hero::after { content: ""; position: absolute; inset: 66px 10px 8px; border: 1px solid rgba(166,124,61,.38); border-radius: 22px; pointer-events: none; z-index: -1; }
.page-hero-in { max-width: 68rem; margin: 0 auto; padding: 84px clamp(24px, 6vw, 48px) 58px; position: relative; z-index: 1; }
.page-hero h1 { color: var(--on-deep); font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.05; margin: 0 0 10px; }
.page-hero .label { color: var(--petal); margin-bottom: 10px; }
.page-hero .lead { color: var(--on-deep-soft); margin: 0; font-size: 1.0625rem; }
.page-hero .flora { z-index: 0; }
@media (max-width: 61.99rem) { .page-hero .flora { display: none; } }
body:has(.page-hero) { background-color: var(--surface-2); }
.page-hero + .prose { position: relative; z-index: 2; width: min(46rem, calc(100% - 20px)); max-width: none; margin: -30px auto 56px; background: var(--surface); border-radius: var(--r-lg); padding: clamp(22px, 5vw, 40px) clamp(20px, 5vw, 40px); box-shadow: 0 26px 60px -34px rgba(74,36,51,.55), 0 0 0 1px rgba(166,124,61,.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body:has(.page-hero) { background-color: #1C1418; }
  :root:not([data-theme="light"]) .page-hero + .prose { background: #271D22; box-shadow: 0 26px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(201,161,90,.4); }
}

/* Foco programático (títulos al cambiar de paso): sin anillo; el foco de teclado sigue visible */
[tabindex="-1"]:focus { outline: none; }

/* Rendimiento: las secciones bajo el pliegue se pintan cuando se acercan a la pantalla */
.svc, .pro, .how, .close { content-visibility: auto; contain-intrinsic-size: auto 900px; }
@media (max-width: 47.99rem) { .card-img { mix-blend-mode: normal; opacity: .75; } }

/* Cuenta en la cabecera */
.nav-ghost { font-size: .875rem; font-weight: 500; text-decoration: none; color: var(--brand); padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--gold); transition: background .2s; }
.top--over .nav-ghost { color: var(--on-deep); box-shadow: inset 0 0 0 1px var(--gold-bright); }
.nav-ico { display: none; color: var(--brand); width: 44px; height: 44px; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.top--over .nav-ico { color: var(--on-deep); box-shadow: inset 0 0 0 1px rgba(232,203,150,.5); }
@media (max-width: 60rem) { .nav-ghost { display: none; } }
@media (max-width: 40rem) { .nav-ico { display: grid; } .nav { gap: 10px; } }
@media (hover: hover) { .nav-ghost:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); } }
.hero-signup { flex-basis: 100%; margin-top: 4px; color: var(--on-deep-soft); font-size: .9375rem; text-decoration: underline; text-decoration-color: rgba(201,161,90,.7); text-underline-offset: .25em; }