/* ═══════════════════════════════════════════════════════════
   Élite Studio · capa de pulido común (home + carta)
   Se carga DESPUÉS de los estilos de cada página: gana por orden.
   ═══════════════════════════════════════════════════════════ */
:root { --ease-x: cubic-bezier(0.16, 1, 0.3, 1); }
html, body { overflow-x: clip; }
/* Cursor: el nativo SOLO se oculta cuando el cursor de lujo está activo (html.cc) */
html:not(.cc) body, html:not(.cc) .svc, html:not(.cc) .cur, html:not(.cc) .gi, html:not(.cc) label { cursor: auto !important; }
html:not(.cc) a, html:not(.cc) button, html:not(.cc) [role="button"] { cursor: pointer !important; }
html:not(.cc) #cursor, html:not(.cc) #cursorRing { display: none !important; }
#cursor { width: 8px; height: 8px; box-shadow: 0 0 0 1px rgba(244, 244, 241, 0.7); }
@view-transition { navigation: auto; }
::selection { background: var(--acc-2); color: #1a1a1e; }
#scrollProgress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 400; background: linear-gradient(90deg, var(--acc), var(--acc-2)); pointer-events: none; }

/* ── Firma SVG (mechón) ─────────────────────────────────── */
.sig { display: block; width: 100%; height: auto; overflow: visible; }
.sig-p { stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--d, 1); }
.sig-s { fill: currentColor; opacity: 0; transform-origin: 318px 18px; transform: scale(0.3) rotate(-30deg); transition: opacity 0.5s, transform 0.7s var(--ease-x); }
.done .sig-s, .drawn .sig-s, .hero-sig .sig-s, .chero-sig .sig-s { opacity: 1; transform: none; }
.hero-sig, .chero-sig { position: absolute; z-index: 1; pointer-events: none; color: var(--acc-2); }
.hero-sig { width: clamp(280px, 50vw, 680px); right: -3%; top: 22%; opacity: 0.5; }
.chero-sig { width: clamp(220px, 42vw, 520px); right: -2%; top: 18%; opacity: 0.45; }
.hero-sig .sig-p, .chero-sig .sig-p { animation: sigDraw 2.6s 0.5s var(--ease-x) forwards; }
.hero-sig .sig-s, .chero-sig .sig-s { opacity: 0; animation: sigStar 0.8s 2.6s var(--ease-x) forwards; }
@keyframes sigDraw { to { stroke-dashoffset: 0; } }
@keyframes sigStar { from { opacity: 0; transform: scale(0.3) rotate(-40deg); } to { opacity: 1; transform: none; } }
.sig-div { width: min(220px, 56vw); margin: 0 0 2.6rem; color: var(--acc); }
.sec-ink .sig-div, .ftr .sig-div { color: var(--acc-2); }
.ftr-sig { position: absolute; right: -2%; bottom: 1.2rem; width: clamp(240px, 44vw, 560px); color: var(--acc-2); opacity: 0.22; pointer-events: none; z-index: 0; }
.ftr-deco, .cta-deco { display: none !important; }

/* ── Abierto ahora ─────────────────────────────────────── */
.open-now { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 0.95rem; border: 1px solid rgba(244, 244, 241, 0.22); border-radius: 2px; color: rgba(244, 244, 241, 0.85); background: rgba(22, 22, 27, 0.28); backdrop-filter: blur(6px); line-height: 1.3; }
.on-dot { width: 7px; height: 7px; border-radius: 50%; background: #8d8d93; flex: 0 0 auto; }
.open-now.is-open .on-dot { background: #4bd07a; box-shadow: 0 0 0 0 rgba(75, 208, 122, 0.6); animation: onPulse 2.2s infinite; }
@keyframes onPulse { 70% { box-shadow: 0 0 0 7px rgba(75, 208, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(75, 208, 122, 0); } }
.hero .open-now { margin-top: 1.6rem; }
.open-now.light { color: var(--ink-soft); border-color: var(--line-2); background: transparent; backdrop-filter: none; margin-bottom: 1rem; }

/* ── Reveals modernos (por tipo de elemento) ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .sec-hd.rv h2, .about-text.rv h2, .rf-intro.rv h2, .carta-txt.rv h2, .cat-hd.rv h2 {
    clip-path: inset(0 0 100% 0); transform: translateY(0.45em);
    transition: clip-path 1.1s var(--ease-x) 0.12s, transform 1.1s var(--ease-x) 0.12s;
  }
  .rv.vis h2 { clip-path: inset(-0.3em -0.3em -0.35em -0.3em); transform: none; }
  .sec-hd.rv .sec-lead, .cat-hd.rv p { opacity: 0; transition: opacity 0.9s ease 0.45s; }
  .rv.vis .sec-lead, .rv.vis p { opacity: 1; }
  .svc.rv .svc-img, .cur.rv .cur-img img, .gi.rv img, .about-img-wrap.rv .about-img, .ba.rv .ba-box {
    clip-path: inset(12% 10% 12% 10%); scale: 1.16;
    transition: clip-path 1.25s var(--ease-x) 0.05s, scale 1.7s var(--ease-x) 0.05s, transform 0.6s ease;
  }
  .rv.vis .svc-img, .rv.vis .cur-img img, .gi.rv.vis img, .rv.vis .about-img, .ba.rv.vis .ba-box { clip-path: inset(0); scale: 1; }
  .ba.rv .ba-box { scale: 1; clip-path: inset(0 0 100% 0); }
  .pv { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.8s var(--ease-x); }
  .pv.in { opacity: 1; transform: none; }
}

/* ── CTAs ──────────────────────────────────────────────── */
.btn-hp, .bk-go, .mb-go, .btn-p, .hbtn, .btn-wa { position: relative; overflow: hidden; isolation: isolate; }
.rip { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: scale(0); animation: rip 0.7s ease-out forwards; pointer-events: none; z-index: -1; }
@keyframes rip { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .btn-hp, .chero .btn-p { animation: breathe 3.4s ease-in-out infinite; }
}
@keyframes breathe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(212, 181, 122, 0)); } 50% { filter: drop-shadow(0 0 16px rgba(212, 181, 122, 0.55)); } }
.btn-svc, .btn-cur, .bk-wa, .rf-panel-link, .cfoot a {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 28% 1px; padding-bottom: 3px;
  transition: background-size 0.45s var(--ease-x), color 0.25s;
}
.btn-svc:hover, .btn-cur:hover, .bk-wa:hover, .rf-panel-link:hover, .btn-svc:focus-visible, .btn-cur:focus-visible { background-size: 100% 1px; }
@media (hover: none) { .btn-svc, .btn-cur, .bk-wa, .rf-panel-link { background-size: 100% 1px; } }
.test-btn, .btn-o { background-image: linear-gradient(var(--acc), var(--acc)) !important; background-repeat: no-repeat !important; background-size: 0 100% !important; transition: background-size 0.45s var(--ease-x), color 0.25s, border-color 0.25s !important; }
@media (hover: hover) { .test-btn:hover, .btn-o:hover { background-size: 100% 100% !important; } }

/* ── Tarjetas: índice + filo dorado (hover o "en vista" en móvil) ── */
.svcs-grid, .cur-grid { counter-reset: card; }
.svc, .cur { counter-increment: card; }
.svc-body, .cur-body { position: relative; }
.svc-body::before, .cur-body::before { content: counter(card, decimal-leading-zero); position: absolute; top: 1.6rem; right: 1.6rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--acc); opacity: 0.8; }
.cur-body::before { color: var(--acc-2); }
.svc, .cur { box-shadow: inset 0 0 0 1px transparent; transition: border-color 0.4s, transform 0.4s var(--ease-x), box-shadow 0.5s !important; }
@media (hover: hover) { .svc:hover { box-shadow: inset 0 0 0 1px rgba(154, 123, 61, 0.45), 0 14px 40px rgba(22, 22, 27, 0.1) !important; } .cur:hover { box-shadow: inset 0 0 0 1px rgba(212, 181, 122, 0.45), 0 20px 50px rgba(0, 0, 0, 0.35) !important; } }
.svc.inview { box-shadow: inset 0 0 0 1px rgba(154, 123, 61, 0.4); }
.cur.inview { box-shadow: inset 0 0 0 1px rgba(212, 181, 122, 0.4); }
.svc.inview::after, .cur.inview::after { transform: scaleX(1); }
.test-c.inview { border-color: rgba(154, 123, 61, 0.35); }
/* raíles: el último elemento no se corta + barra de progreso */
.svcs-grid::after, .cur-grid::after, .gal::after, .test-track::after { content: ""; flex: 0 0 1px; }
.rail-prog { height: 2px; background: var(--line); margin-top: 1.4rem; overflow: hidden; border-radius: 2px; max-width: 220px; }
.rail-prog i { display: block; height: 100%; background: var(--acc); transition: transform 0.15s linear; }
.sec-ink .rail-prog { background: rgba(244, 244, 241, 0.12); }
.sec-ink .rail-prog i { background: var(--acc-2); }
@media (min-width: 961px) { .svcs-grid + .rail-prog, .cur-grid + .rail-prog { display: none; } }

/* ── Antes / Después ───────────────────────────────────── */
.ba { margin-top: 4.5rem; }
.ba-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ba-head p { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.ba-box { --x: 50%; position: relative; aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; overflow: hidden; border-radius: var(--r); background: var(--bg-2); user-select: none; touch-action: pan-y; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-before .ba-img { filter: grayscale(1) brightness(0.72) contrast(0.82) sepia(0.12); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--acc-2); transform: translateX(-0.5px); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(26, 26, 30, 0.82); border: 1px solid var(--acc-2); color: var(--acc-2); display: grid; place-items: center; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; backdrop-filter: blur(4px); }
.ba-box.hint .ba-before { transition: clip-path 0.65s var(--ease-x); }
.ba-box.hint .ba-handle { transition: left 0.65s var(--ease-x); }
.ba-tag { position: absolute; top: 1rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.4rem 0.7rem; background: rgba(26, 26, 30, 0.7); color: var(--bone); pointer-events: none; }
.ba-tag-l { left: 1rem; } .ba-tag-r { right: 1rem; color: var(--acc-2); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; -webkit-appearance: none; appearance: none; }
.ba-range:focus-visible + .ba-focus { outline: 2px solid var(--acc); }
.ba-note { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--muted); margin-top: 0.8rem; }
@media (min-width: 768px) { .ba-box { aspect-ratio: 16 / 9; } }

/* ── Reserva rápida ────────────────────────────────────── */
.bk { display: flex; flex-direction: column; gap: 1.9rem; min-width: 0; }
.bk-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.bk-step legend { display: flex; align-items: center; gap: 0.75rem; font-family: var(--display); font-weight: 500; font-size: 1.12rem; color: var(--ink); margin-bottom: 0.95rem; padding: 0; }
.bk-n { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; width: 30px; height: 30px; border-radius: 2px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--acc); transition: all 0.35s var(--ease-x); flex: 0 0 auto; }
.bk-step.ok .bk-n { background: var(--acc); border-color: var(--acc); color: var(--bone); font-size: 0; }
.bk-step.ok .bk-n::after { content: "✓"; font-size: 0.8rem; }
.bk-chips, .bk-times { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bk-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; }
.bk-chip { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 2px; padding: 0.7rem 1rem; min-height: 44px; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease-x); }
.bk-days .bk-chip { border-radius: 2px; padding: 0.55rem 0.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 0; }
.bk-days small { font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 100%; }
.bk-days b { font-family: var(--display); font-weight: 500; font-size: 1.25rem; line-height: 1; }
.bk-times .bk-chip { padding: 0.6rem 0.85rem; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .bk-chip:not(:disabled):hover { border-color: var(--acc); transform: translateY(-2px); } }
.bk-chip:active:not(:disabled) { transform: scale(0.96); }
.bk-chip.on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.bk-chip.on small { color: var(--acc-2); }
.bk-chip:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; background: transparent; }
.bk-chip:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.bk-hint, .bk-left { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--muted); }
.bk-left { margin-top: 0.7rem; min-height: 1em; }
.bk-left.few { color: var(--acc); }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.bk-fields .full { grid-column: 1 / -1; }
.bk-f label { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.bk-f input, .bk-f textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 0.55rem 0; border-radius: 0; transition: border-color 0.25s; resize: vertical; }
.bk-f input:focus, .bk-f textarea:focus { outline: none; border-bottom-color: var(--acc); }
.bk-sum { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; background: var(--dark); color: var(--bone); border-radius: 2px; border-left: 2px solid var(--acc-2); }
.bk-ring { --p: 0; width: 46px; height: 46px; flex: 0 0 auto; }
.bk-ring circle { fill: none; stroke-width: 2; }
.bk-ring .r0 { stroke: rgba(244, 244, 241, 0.14); }
.bk-ring .r1 { stroke: var(--acc-2); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0.6s var(--ease-x); }
.bk-sum-l { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc-2); }
.bk-sum strong { font-weight: 500; font-size: 0.95rem; line-height: 1.4; display: block; overflow-wrap: anywhere; }
.bk-sum strong::first-letter { text-transform: uppercase; }
.bk-acts { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.bk-go { justify-content: center; border: 0; cursor: pointer; font-family: var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.bk-go:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }
.bk-wa { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 0.45rem; }
.bk-wa svg { width: 15px; height: 15px; color: #25d366; }
.bk-ok { text-align: left; padding: 2.4rem 1.8rem; background: var(--dark); color: var(--bone); border-radius: 2px; position: relative; overflow: hidden; }
.bk-ok .sig-div { color: var(--acc-2); margin-bottom: 1.6rem; --d: 0; }
.bk-ok h3 { font-family: var(--display); font-weight: 500; font-size: 1.7rem; margin-bottom: 0.4rem; }
.bk-ok p { color: rgba(244, 244, 241, 0.75); }
.bk-ok .bk-when { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--acc-2); margin: 0.8rem 0 1.6rem; }
.bk-ok .bk-when::first-letter { text-transform: uppercase; }
.bk[hidden], .bk-ok[hidden] { display: none !important; }
.bk-ok-acts { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.bk-ok-acts a, .bk-ok-acts button { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.85rem 1.1rem; border: 1px solid rgba(244, 244, 241, 0.25); color: var(--bone); background: transparent; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.bk-ok-acts .gold { background: var(--acc-2); border-color: var(--acc-2); color: #1a1a1e; }
.rf-panel-link { display: inline-block; margin-top: 1.4rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); }
.spk { position: fixed; z-index: 500; color: var(--acc-2); pointer-events: none; animation: spk 1.2s var(--ease-x) forwards; text-shadow: 0 0 8px rgba(212, 181, 122, 0.6); }
@keyframes spk { 0% { transform: translate(0, 0) scale(0.2); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(90deg); opacity: 0; } }
@media (max-width: 600px) {
  .bk-fields { grid-template-columns: 1fr; }
  .bk-days { gap: 0.3rem; }
  .bk-days b { font-size: 1.1rem; }
  .bk-days small { font-size: 0.5rem; letter-spacing: 0.02em; }
  .bk-acts .bk-go { width: 100%; }
}

/* ── Barra fija móvil + flotantes ordenados ────────────── */
.mbar { display: none; }
@media (max-width: 767px) {
  .mbar { display: grid; grid-template-columns: 50px 1fr 1.3fr; gap: 0.45rem; position: fixed; left: 0.7rem; right: 0.7rem; bottom: calc(0.7rem + env(safe-area-inset-bottom)); z-index: 210; padding: 0.42rem; background: rgba(26, 26, 30, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(212, 181, 122, 0.28); border-radius: 4px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); transform: translateY(150%); transition: transform 0.5s var(--ease-x); }
  body.mbar-on .mbar { transform: none; }
  .mbar a { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase; border-radius: 2px; color: var(--bone); white-space: nowrap; }
  .mbar .mb-tel, .mbar .mb-2 { border: 1px solid rgba(244, 244, 241, 0.18); }
  .mbar .mb-tel { color: var(--acc-2); }
  .mbar .mb-go { background: var(--acc-2); color: #1a1a1e; font-weight: 500; }
  .wa-fl, .call-fl, .scroll-top { display: none !important; }
  .cb-toggle { bottom: calc(0.9rem + env(safe-area-inset-bottom)) !important; right: 0.9rem !important; transition: transform 0.5s var(--ease-x), opacity 0.3s !important; }
  body.mbar-on .cb-toggle:not(.fab-hide) { transform: translateY(-66px); }
  .cb-panel { bottom: 4.6rem !important; right: 0.9rem !important; width: calc(100vw - 1.8rem) !important; transition: opacity 0.25s, transform 0.25s, bottom 0.5s var(--ease-x) !important; }
  body.mbar-on .cb-panel { bottom: 8.8rem !important; }
  .ftr-bot, .cfoot { padding-bottom: 6.5rem !important; }
  .hero-sig { width: 92vw; right: -24vw; top: 12%; opacity: 0.32; }
  .chero-sig { width: 78vw; right: -18vw; top: 16%; opacity: 0.35; }
  .ftr-sig { width: 64vw; right: -8vw; top: 1.6rem; }
}

/* ── Firma del footer: se dibuja entera al aparecer ───── */
[data-sig="draw"] .sig-p { transition: stroke-dashoffset 2.6s var(--ease-x) 0.2s; }
[data-sig="draw"].drawn .sig-p { stroke-dashoffset: 0; }
[data-sig="draw"] .sig-s { transition-delay: 2.4s; }
.ftr-sig { opacity: 0.4; top: 2.2rem; bottom: auto !important; }
@media (prefers-reduced-motion: reduce) { [data-sig="draw"] .sig-p { stroke-dashoffset: 0; transition: none; } }

/* ── QR: solo tiene sentido en ordenador (en el móvil ya estás) ── */
.desk-only { display: none; }
@media (min-width: 961px) { .desk-only { display: inline; } }
@media (max-width: 960px) { .carta-qr { display: none !important; } }

/* ── Píldora Famara (como 72 HORAS, en champán) ─────── */
.fws-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(212, 181, 122, 0.32); background: rgba(212, 181, 122, 0.08); color: rgba(244, 244, 241, 0.78) !important; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0; line-height: 1; text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.fws-chip:hover { border-color: var(--acc-2); background: rgba(212, 181, 122, 0.16); }
.fws-chip img { height: 18px; width: auto; display: block; }
.fws-chip strong { color: var(--acc-2); font-weight: 600; }
.ftr-bot { align-items: center; }

/* ── Botón del asistente: SOLO texto, lenguaje de la web (filete dorado + mono) ── */
.cb-toggle { border-radius: 2px !important; background: rgba(26, 26, 30, 0.94) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(212, 181, 122, 0.4) !important; height: 48px !important; width: auto !important; padding: 0 1.15rem !important; gap: 0 !important; color: var(--bone) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; justify-content: center !important; }
.cb-toggle .cb-ic, .cb-toggle .cb-dot { display: none !important; }
.cb-toggle .lbl { display: inline-block !important; position: relative; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bone); padding-bottom: 3px; }
.cb-toggle .lbl::after { content: ""; position: absolute; left: 0; right: 0.24em; bottom: 0; height: 1px; background: var(--acc-2); transform: scaleX(0.35); transform-origin: left; transition: transform 0.5s var(--ease-x); }
.cb-toggle:hover .lbl::after, .cb-toggle:focus-visible .lbl::after { transform: scaleX(1); }
@media (hover: hover) { .cb-toggle:hover { border-color: var(--acc-2) !important; } }
.cb-head { background: var(--dark) !important; border-bottom: 1px solid rgba(212, 181, 122, 0.3); }
.cb-head .t { font-family: var(--display) !important; font-weight: 500; letter-spacing: 0.02em; }
.cb-panel { border-radius: 2px !important; }
.cb-msg { border-radius: 2px !important; }
.cb-bot { border-left: 2px solid var(--acc-2); }
/* Saludo emergente: panel oscuro, texto editorial, sin emojis */
.cb-teaser { position: fixed; z-index: 205; max-width: min(280px, calc(100vw - 2rem)); background: rgba(26, 26, 30, 0.96); color: rgba(244, 244, 241, 0.86); border: 1px solid rgba(212, 181, 122, 0.35); border-radius: 2px; padding: 1rem 2.4rem 1.05rem 1.1rem; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); font-size: 0.9rem; line-height: 1.5; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.5s var(--ease-x), transform 0.6s var(--ease-x); }
.cb-teaser.on { opacity: 1; transform: none; pointer-events: auto; }
.cb-teaser.on.off { opacity: 0; pointer-events: none; }
.cb-t-ey { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--acc-2); margin-bottom: 0.4rem; }
.cb-teaser-x { position: absolute; top: 0.35rem; right: 0.35rem; width: 32px; height: 32px; border: 0; background: none; color: rgba(244, 244, 241, 0.5); font-size: 1.1rem; cursor: pointer; }
.cb-teaser::after { content: ""; position: absolute; bottom: -6px; right: 24px; width: 10px; height: 10px; background: #1b1b1f; border-right: 1px solid rgba(212, 181, 122, 0.35); border-bottom: 1px solid rgba(212, 181, 122, 0.35); transform: rotate(45deg); }

/* ── Nota de Google ─────────────────────────────────── */
.g-rate { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-top: 1.1rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-soft); padding-bottom: 4px; border-bottom: 1px solid var(--line-2); transition: border-color 0.3s, color 0.3s; }
.g-rate b { font-family: var(--display); font-weight: 500; font-size: 1.15rem; letter-spacing: 0; color: var(--ink); }
.g-stars { --r: 5; font-size: 0.95rem; letter-spacing: 0.08em; background: linear-gradient(90deg, var(--acc) calc(var(--r) / 5 * 100%), rgba(154, 123, 61, 0.25) 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-go { color: var(--acc); transition: transform 0.3s; }
@media (hover: hover) { .g-rate:hover { border-color: var(--acc); color: var(--ink); } .g-rate:hover .g-go { transform: translateX(4px); } }
.g-rate.dark { color: rgba(244, 244, 241, 0.75); border-bottom-color: rgba(244, 244, 241, 0.25); margin-top: 0; }
.g-rate.dark b { color: var(--bone); }
.g-rate.dark .g-stars { background-image: linear-gradient(90deg, var(--acc-2) calc(var(--r) / 5 * 100%), rgba(212, 181, 122, 0.25) 0); }
.g-rate.dark .g-go { color: var(--acc-2); }
.hstat-star { color: var(--acc-2); font-size: 0.6em; margin-left: 0.15em; vertical-align: 0.35em; }
.test-note { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--muted); margin-top: 1rem; }

/* ── Tarjetas: mismo comportamiento en todas + foco de luz del Lab ── */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.svc, .cur, .test-c, .qr-card, .gi { position: relative; }
.test-c, .qr-card { transition: border-color 0.4s, transform 0.4s var(--ease-x), box-shadow 0.5s; }
.fx-spot { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 0.45s; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(212, 181, 122, 0.16), transparent 50%); }
.fx-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(212, 181, 122, 0.95), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.gi .fx-spot { background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 240, 210, 0.18), transparent 55%); }
@media (hover: hover) {
  :is(.svc, .cur, .test-c, .qr-card, .gi):hover > .fx-spot { opacity: 1; }
  .test-c:hover, .qr-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(22, 22, 27, 0.1); }
}
/* táctil: un barrido de luz dorada al aparecer en pantalla */
.fx-shine > .fx-spot { animation: fxSweep 1.6s var(--ease-x) forwards; }
@keyframes fxSweep { 0% { opacity: 0; --mx: -10%; --my: 20%; } 25% { opacity: 1; } 100% { opacity: 0.35; --mx: 110%; --my: 80%; } }
@media (prefers-reduced-motion: reduce) { .fx-shine > .fx-spot { animation: none; } }

/* CTAs: misma familia en toda la web y la carta */
.btn-hp, .btn-hs, .btn-wa, .btn-p, .btn-o, .bk-go, .hbtn { border-radius: 2px !important; font-family: var(--mono) !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; min-height: 48px; }
.cb-chip { border-radius: 2px !important; }
.bk-chip.on { box-shadow: inset 0 -2px 0 var(--acc-2); }

/* ── Sistema de formas único: rectángulo 2px en controles y contenedores ── */
.wa-fl, .call-fl, .scroll-top, .lb-nav, .lb-close, .test-btn, .rf-ok-mark, .ba-handle span, .sic, .ftr-sb, .rail-prog, .rail-prog i, .bk-ok-acts a, .bk-ok-acts button, .cb-teaser { border-radius: 2px !important; }
.wa-fl, .call-fl { width: 52px !important; height: 52px !important; }
.open-now { border-radius: 2px !important; }

/* ═══ Ritmo vertical único entre secciones ═══ */
.sec { padding: clamp(4.5rem, 10vw, 7.5rem) 0 !important; }
.sec > .ctr > .sig-div:first-child { margin-top: -0.75rem; margin-bottom: 2.2rem; }
.ba { margin-top: clamp(3rem, 7vw, 4.5rem); }

/* ═══ Fotos: TODAS las de tarjeta hacen el mismo zoom al hover ═══ */
.svc, .cur-img, .gi { overflow: hidden; }
@media (hover: hover) {
  .svc.rv .svc-img, .cur.rv .cur-img img, .gi.rv img { transition: clip-path 1.25s var(--ease-x) 0.05s, scale 1.7s var(--ease-x) 0.05s, transform 1s var(--ease-x), filter 0.8s ease !important; }
  .svc:hover .svc-img, .cur:hover .cur-img img, .gi:hover img { transform: scale(1.06) !important; }
}
/* Lab · zoom ligado al scroll en la foto del hero */
.hero-img { transform: scale(calc(1 + var(--hz, 0) * 0.14)); transform-origin: 50% 40%; will-change: transform; }
/* Lab · blur-up: borrosa → nítida al cargar */
img.bu { filter: blur(14px); transform-origin: center; }
img.bu-in { transition: filter 0.9s ease; }

/* ═══ Volver arriba: en el footer, no flotando ═══ */
.scroll-top { display: none !important; }
.to-top { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc-2) !important; border: 1px solid rgba(212, 181, 122, 0.35); border-radius: 2px; transition: border-color 0.3s, background 0.3s; cursor: pointer; background: transparent; }
.to-top span { display: inline-block; transition: transform 0.4s var(--ease-x); }
@media (hover: hover) { .to-top:hover { border-color: var(--acc-2); background: rgba(212, 181, 122, 0.08); } .to-top:hover span { transform: translateY(-3px); } }

/* ═══ CTAs de reserva: marco interior + destello + aire de joya ═══ */
.btn-hp, .bk-go, .btn-p, .mb-go { outline: 1px solid color-mix(in srgb, currentColor 30%, transparent); outline-offset: -5px; }
.btn-hp::after, .bk-go::after, .btn-p::after, .mb-go::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.32) 48%, transparent 66%); transform: translateX(-130%); transition: transform 1s var(--ease-x); }
@media (hover: hover) {
  .btn-hp:hover, .bk-go:not(:disabled):hover, .btn-p:hover { outline-offset: -3px; outline-color: color-mix(in srgb, currentColor 55%, transparent); }
  .btn-hp:hover::after, .bk-go:not(:disabled):hover::after, .btn-p:hover::after { transform: translateX(130%); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .btn-hp::after, .chero .btn-p::after, .mb-go::after { animation: ctaSheen 5.5s var(--ease-x) 2s infinite; }
}
@keyframes ctaSheen { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.btn-hp, .bk-go, .btn-p { transition: outline-offset 0.45s var(--ease-x), outline-color 0.45s, background 0.25s, color 0.25s, transform 0.25s !important; }
/* Botón → carga → ✓ (Lab · detalles deluxe) */
.bk-go.is-loading, .bk-go.is-done { pointer-events: none; opacity: 1 !important; }
.bk-go .spin { width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin 0.7s linear infinite; margin-right: 0.6rem; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.bk-go.is-done { background: var(--acc) !important; color: var(--bone) !important; }

/* ═══ Lab · texto con brillo dorado (solo estilo original) ═══ */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-style]) .h-title em, html:not([data-style]) .chero h1 em {
    background: linear-gradient(100deg, var(--acc-2) 0%, var(--acc-2) 35%, #fff4dc 48%, var(--acc-2) 61%, var(--acc-2) 100%) 0 0 / 250% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: goldShimmer 7s ease-in-out 1.6s infinite;
  }
}
@keyframes goldShimmer { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }

/* ═══ Lab · contador que rueda (cuentakilómetros) ═══ */
.odo { display: inline-flex; line-height: 1; height: 1em; overflow: hidden; vertical-align: top; }
.odo-d { display: inline-block; height: 1em; overflow: hidden; }
.odo-s { display: flex; flex-direction: column; transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1); }
.odo-s > span { height: 1em; line-height: 1; }

/* ═══ Altavoces (lectura en voz alta) — visibles en el estilo Accesible ═══ */
.speak { display: none; }
html[data-style="a11y"] .speak { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 1rem; min-height: 44px; padding: 0 1rem; font: 600 1rem/1 var(--sans); color: #111; background: #fff; border: 2px solid #111; border-radius: 2px; cursor: pointer; }
html[data-style="a11y"] .speak svg { width: 20px; height: 20px; }
html[data-style="a11y"] .speak[aria-pressed="true"] { background: #111; color: #fff; }
html[data-style="a11y"] .hero .speak, html[data-style="a11y"] .sec-ink .speak { background: transparent; color: #fff; border-color: #fff; }

/* Stats del hero en 2 columnas: sin línea suelta en el borde, cuadrícula limpia */
@media (max-width: 960px) {
  .hstat:nth-child(2n) { border-right: none !important; }
  .hstat:nth-child(-n + 2) { border-bottom: 1px solid rgba(244, 244, 241, 0.12); }
}

/* ═══ CTAs de reserva: etiqueta + celda de flecha (se lee como botón también en móvil) ═══ */
.cta-x { display: inline-flex !important; align-items: stretch !important; justify-content: space-between; gap: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 0 !important; min-height: 50px; }
.cta-x .cta-lab, .cta-x > svg { align-self: center; }
.cta-x > svg { margin-right: 0.7rem; }
.cta-x .cta-lab { display: inline-flex; align-items: center; padding: 0.95rem 0; }
.cta-arr { display: grid; place-items: center; width: 50px; flex: 0 0 auto; margin-left: 1.2rem; border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent); font-family: var(--sans); font-size: 1rem; letter-spacing: 0; transition: transform 0.45s var(--ease-x), background 0.3s; }
@media (hover: hover) { .cta-x:hover .cta-arr { background: color-mix(in srgb, currentColor 8%, transparent); } .cta-x:hover .cta-arr { transform: none; } .cta-x:hover .cta-arr { text-indent: 6px; } }
.cta-x:active .cta-arr { background: color-mix(in srgb, currentColor 14%, transparent); }
.cta-x:active { transform: scale(0.97); }
/* botones de tarjeta: bloque completo, con aire */
.btn-svc.cta-x, .btn-cur.cta-x { background-image: none !important; padding-left: 1.1rem !important; width: 100%; margin-top: 0.4rem; font-family: var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.btn-svc.cta-x .cta-arr, .btn-cur.cta-x .cta-arr { width: 46px; }
.mb-go.cta-x { padding-left: 0.9rem !important; min-height: 46px; justify-content: space-between; }
.mb-go .cta-arr { width: 38px; margin-left: 0.6rem; }
.bk-go.cta-x { padding-left: 1.4rem !important; }
@media (max-width: 600px) {
  .hero .h-acts .btn-hp.cta-x, .bk-go.cta-x, .chero .btn-p.cta-x, .cta .btn-p.cta-x { width: 100%; padding-left: 1.2rem !important; }
  .hero .h-acts .btn-hs { width: 100%; text-align: center; justify-content: center; display: inline-flex; }
}
/* destello una vez al aparecer en pantalla (en móvil no hay hover) */
@media (prefers-reduced-motion: no-preference) {
  .cta-shine::after { animation: ctaSheenOnce 1.4s var(--ease-x) 0.15s 1 both; }
  .cta-shine .cta-arr { animation: arrNudge 1.4s var(--ease-x) 0.5s 1; }
}
@keyframes ctaSheenOnce { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes arrNudge { 0%, 100% { text-indent: 0; } 40% { text-indent: 8px; } }
.btn-svc::after, .btn-cur::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(212, 181, 122, 0.28) 48%, transparent 66%); transform: translateX(-130%); }
.btn-svc, .btn-cur { position: relative; overflow: hidden; isolation: isolate; }
.cta-x { justify-content: flex-start !important; } .cta-x .cta-lab { margin-right: auto; }

/* Tarjetas: misma altura y botón siempre al pie (alineados en horizontal) */
.svcs-grid, .cur-grid { align-items: stretch !important; }
.svc, .cur { display: flex !important; flex-direction: column; }
.svc-body, .cur-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.svc-tags { margin-bottom: 1.4rem; }
.btn-svc.cta-x, .btn-cur.cta-x { margin-top: auto !important; }

/* ═══ Carruseles intuitivos: flechas + progreso + "Desliza" ═══ */
.rail-ui { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.rail-ui[hidden] { display: none; }
.rail-ui .rail-prog { flex: 1 1 auto; margin-top: 0; max-width: 260px; }
.rail-btns { display: flex; gap: 0.5rem; margin-left: auto; }
.rail-btn { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.4rem; line-height: 1; color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s; }
.rail-btn:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) { .rail-btn:not(:disabled):hover { background: var(--ink); color: var(--bone); border-color: var(--ink); } }
.sec-ink .rail-btn { color: var(--bone); border-color: rgba(244, 244, 241, 0.3); }
@media (hover: hover) { .sec-ink .rail-btn:not(:disabled):hover { background: var(--acc-2); color: #1a1a1e; border-color: var(--acc-2); } }
.rail-hint { display: none; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc); white-space: nowrap; transition: opacity 0.4s; }
.sec-ink .rail-hint { color: var(--acc-2); }
.rail-hint b { display: inline-block; font-weight: 400; animation: hintArrow 1.6s ease-in-out infinite; }
.rail-hint.gone { opacity: 0; }
@keyframes hintArrow { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
@media (hover: none) { .rail-hint { display: inline-block; } }
@media (min-width: 961px) { .svcs-grid + .rail-ui, .cur-grid + .rail-ui { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail-hint b { animation: none; } }
html[data-style="kinetic"] .rail-btn { border-color: var(--ink); }
html[data-style="deco"] .rail-btn { border-color: var(--acc); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
@media (max-width: 600px) { .svc, .cur { flex-basis: 76vw !important; } }

/* ═══ Selector de idioma en la cabecera ═══ */
.lang { position: relative; display: inline-flex; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 2px; color: var(--bone); transition: color 0.35s, border-color 0.35s; }
.hdr.scrolled .lang { color: var(--ink); }
.lang button { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; min-width: 38px; min-height: 32px; padding: 0 0.55rem; background: transparent; color: inherit; border: 0; cursor: pointer; opacity: 0.6; transition: opacity 0.25s, background 0.25s, color 0.25s; }
.lang button.on { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
@media (hover: hover) { .lang button:not(.on):hover { opacity: 1; } }
.lang-tip { position: absolute; top: calc(100% + 10px); right: 0; white-space: nowrap; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone); background: var(--dark); border: 1px solid rgba(212, 181, 122, 0.4); border-radius: 2px; padding: 0.55rem 0.75rem; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.35s, transform 0.35s; }
.lang-tip::before { content: ""; position: absolute; top: -5px; right: 14px; width: 8px; height: 8px; background: var(--dark); border-left: 1px solid rgba(212, 181, 122, 0.4); border-top: 1px solid rgba(212, 181, 122, 0.4); transform: rotate(45deg); }
.lang-tip.on { opacity: 1; transform: none; }
@media (max-width: 600px) { .hdr-r { gap: 0.9rem !important; } .lang button { min-width: 34px; padding: 0 0.4rem; } }
html[data-style="a11y"] .lang button { font-size: 0.85rem; }

/* ═══ Botón "Aa · Lectura fácil" (cabecera) ═══ */
.easy { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 34px; padding: 0 0.7rem; background: transparent; color: var(--bone); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 2px; cursor: pointer; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.35s, background 0.25s, border-color 0.35s; }
.hdr.scrolled .easy { color: var(--ink); }
.easy-a { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.easy[aria-pressed="true"] { background: #0b57d0; border-color: #0b57d0; color: #fff !important; }
@media (hover: hover) { .easy:hover { border-color: currentColor; } }
@media (max-width: 900px) { .easy-l { display: none; } .easy { padding: 0 0.6rem; } }
html[data-style="a11y"] .easy-l { display: inline; font-size: 0.9rem; letter-spacing: 0.02em; text-transform: none; }
@media (max-width: 600px) { html[data-style="a11y"] .easy-l { display: none; } }

/* Cabecera móvil con aire: "Menú" pasa a solo icono, controles de 40px y más separación */
@media (max-width: 600px) {
  .hdr-r { gap: 0.75rem !important; }
  .menu-label { display: none !important; }
  .menu-btn { width: 40px; height: 40px; justify-content: center; }
  .lang button { min-height: 38px; min-width: 36px; }
  .easy { min-height: 40px; min-width: 40px; justify-content: center; }
}
@media (max-width: 360px) { .logo-name { font-size: 1.05rem !important; } .hdr-r { gap: 0.5rem !important; } }
@media (max-width: 600px) { .hdr-i { padding: 0 1.1rem !important; } .logo-name { font-size: 1.08rem !important; letter-spacing: 0.1em !important; } .lang button { min-width: 32px; } }
@media (max-width: 360px) { .hdr-i { padding: 0 0.85rem !important; } .logo-name { font-size: 0.98rem !important; letter-spacing: 0.06em !important; } }
@media (max-width: 600px) { body[data-page="carta"] .hdr-cita { display: none !important; } }
@media (max-width: 360px) { .logo-name { font-size: 0.88rem !important; letter-spacing: 0.02em !important; } .lang button { min-width: 28px; padding: 0 0.2rem; } .easy, .menu-btn { min-width: 36px; width: 36px; } }
