/* WeWash Nocturno · sistema visual
   Negro de parking + papel cálido. El rojo WeWash es la única luz; el amarillo, solo para el ozono. */

:root {
  --ink-950: #0A0A0B; --ink-900: #111113; --ink-850: #16161A; --ink-800: #1A1A1E;
  --line-dark: rgba(255, 255, 255, .10); --line-dark-strong: rgba(255, 255, 255, .18); --field-border: #74747C;
  --text-hi: #F4F2EE; --text-md: #B9B6B0; --text-lo: #8C8A86; --text-on-video: #E6E3DE;
  --paper: #F4F1EC; --paper-2: #EAE6DF; --card-light: #FFFFFF;
  --ink-on-paper: #121214; --ink-md-on-paper: #4A4844; --ink-lo-on-paper: #625F5A; --line-light: rgba(18, 18, 20, .12);
  --red: #A80E00; --red-hover: #BF1300; --red-press: #8A0B00; --red-signal: #F2493C; --red-glow: rgba(168, 14, 0, .32);
  --ozone: #FCD226; --ozone-glow: rgba(252, 210, 38, .10);
  --error: #FF7A6E; --error-on-paper: #B3261E; --success: #6FCF97; --success-on-paper: #1D6A3F;
  --scrim-left: linear-gradient(90deg, rgba(10,10,11,.88) 0%, rgba(10,10,11,.74) 40%, rgba(10,10,11,.25) 64%, rgba(10,10,11,0) 80%);
  --scrim-bottom: linear-gradient(0deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.5) 28%, rgba(10,10,11,0) 50%);
  --scrim-mobile: linear-gradient(0deg, #0A0A0B 0%, rgba(10,10,11,.84) 42%, rgba(10,10,11,.2) 70%, rgba(10,10,11,.45) 100%);
  --card-on-video: rgba(10, 10, 11, .92);
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --shadow-pop: 0 40px 120px rgba(0, 0, 0, .7);
  --shadow-card-light: 0 1px 0 rgba(18,18,20,.04), 0 12px 32px rgba(18,18,20,.06);
  --z-nav: 50; --z-bar: 60; --z-fab: 70; --z-wiwi: 80; --z-sheet: 85; --z-dialog: 90; --z-toast: 100;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --f-display: 'Inter Tight', 'Inter Tight Fallback', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-text: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-serif: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --fs-display: clamp(3.1rem, 1.6rem + 7vw, 9.5rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 4.8vw, 6.5rem);
  --fs-h2: clamp(2.2rem, 1.5rem + 3vw, 4.5rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
  --fs-lead: clamp(1.0625rem, 1.02rem + .35vw, 1.3125rem);
  --fs-body: 1rem; --fs-sm: .9375rem; --fs-xs: .8125rem; --fs-label: .75rem;
  --fs-figure: clamp(3rem, 2rem + 4vw, 5rem);
  --gutter: clamp(20px, 4vw, 64px);
  --sec-y: clamp(80px, 11vw, 176px);
  --nav-h: 60px;
}
/* Tipografías alojadas en la propia web (assets/fonts): los mismos archivos que servía Google Fonts, subconjuntos latin
   y latin-ext (este solo se descarga si una página usa sus caracteres). Sin conexiones a Google ni a terceros.
   Inter e Inter Tight son variables: un archivo cubre todos los pesos que usa la web */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../assets/fonts/inter-tight-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../assets/fonts/inter-tight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/instrument-serif-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'); size-adjust: 96%; }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Roboto'); size-adjust: 106%; }
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Georgia Italic'), local('Georgia-Italic'), local('Georgia'); font-style: italic; size-adjust: 81%; }
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Georgia'); size-adjust: 81%; }
@media (min-width: 1024px) { :root { --nav-h: 76px; --fs-body: 1.0625rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--ink-950); color: var(--text-hi); font: 400 var(--fs-body)/1.65 var(--f-text); overflow-x: clip; -webkit-font-smoothing: antialiased; font-synthesis: none; text-rendering: optimizeLegibility; }
body.is-locked { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-signal); outline-offset: 3px; border-radius: 2px; }
.paper :focus-visible { outline-color: var(--red); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--text-hi); color: var(--ink-on-paper); padding: 12px 18px; border-radius: var(--r-sm); font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.hide-sm { display: none; }
@media (min-width: 600px) { .hide-sm { display: inline; } }

/* ---------- Tipografía ---------- */
.label { font: 600 var(--fs-label)/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text-lo); }
.paper .label { color: var(--ink-lo-on-paper); }
.display, .h1, .h2, .h3 { font-family: var(--f-display); font-weight: 600; text-wrap: balance; }
.display { font-size: var(--fs-display); line-height: .92; letter-spacing: -.045em; }
.h1 { font-size: var(--fs-h1); line-height: .95; letter-spacing: -.04em; }
.h2 { font-size: var(--fs-h2); line-height: 1; letter-spacing: -.035em; }
.h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -.02em; }
.display em, .h1 em, .h2 em, .h3 em, .manifesto em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-md); max-width: 60ch; text-wrap: pretty; }
.paper .lead { color: var(--ink-md-on-paper); }
p { text-wrap: pretty; }
.link { display: inline; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: currentColor; transition: text-decoration-color .25s; font: inherit; }
.link:hover { text-decoration-color: var(--red-signal); }
.paper .link:hover { text-decoration-color: var(--red); }
.fine { font-size: var(--fs-xs); color: var(--text-lo); max-width: 52ch; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 28px; border-radius: var(--r-xs); font: 600 .9375rem/1 var(--f-display); letter-spacing: .005em; transition: background-color .2s, color .2s, border-color .2s, transform .2s; white-space: nowrap; cursor: pointer; }
.btn svg { flex: none; transition: transform .2s; }
.btn:active { transform: scale(.98); }
.btn-primary, .btn-red { background: var(--red); color: #fff; }
.btn-primary:hover, .btn-red:hover { background: var(--red-hover); }
.btn-primary:hover svg:last-child { transform: translateX(4px); }
.btn-primary:active { background: var(--red-press); }
.btn-primary[disabled], .btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.btn-line, .btn-outline-dark { border: 1px solid rgba(255, 255, 255, .28); color: var(--text-hi); }
.btn-line:hover, .btn-outline-dark:hover { border-color: var(--text-hi); background: rgba(255, 255, 255, .06); }
.paper .btn-line { border-color: rgba(18, 18, 20, .28); color: var(--ink-on-paper); }
.paper .btn-line:hover { background: var(--ink-on-paper); color: var(--text-hi); }
.btn-dark { background: var(--ink-on-paper); color: var(--text-hi); }
.btn-dark:hover { background: #2a2a2e; }
.btn-light { background: var(--text-hi); color: var(--ink-on-paper); }
.btn-light:hover { background: #fff; }
.btn-white { background: #fff; color: var(--ink-on-paper); }
.btn-white:hover { background: var(--paper); }
.btn-line-white { border: 1px solid rgba(255, 255, 255, .7); color: #fff; }
.btn-line-white:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .875rem; }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 1rem; }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: inherit; transition: background-color .2s, border-color .2s; flex: none; }
.icon-btn:hover { background: rgba(255, 255, 255, .08); }
.icon-btn-line { border: 1px solid rgba(255, 255, 255, .28); }
.icon-btn-line:hover { border-color: var(--text-hi); }
.paper .icon-btn-line { border-color: rgba(18, 18, 20, .24); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--field-border); font: 500 .875rem/1.2 var(--f-text); color: var(--text-hi); background: transparent; transition: background-color .2s, color .2s, border-color .2s; text-align: left; }
.chip:hover { border-color: var(--text-hi); }
.chip.is-on, .chip[aria-selected="true"] { background: var(--text-hi); color: var(--ink-950); border-color: var(--text-hi); }
.paper .chip { border-color: rgba(18, 18, 20, .24); color: var(--ink-on-paper); }
.paper .chip:hover { border-color: var(--ink-on-paper); }
.paper .chip.is-on, .paper .chip[aria-selected="true"] { background: var(--ink-on-paper); color: var(--text-hi); border-color: var(--ink-on-paper); }
@media (max-width: 599px) { .chip { min-height: 44px; } }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Medios ---------- */
.media-video { width: 100%; height: 100%; object-fit: cover; background: var(--ink-900); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E"); z-index: 2; }

/* ---------- Navegación ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); height: calc(var(--nav-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: linear-gradient(180deg, rgba(10,10,11,.6), rgba(10,10,11,0)); transition: background-color .3s, transform .4s var(--ease-out), border-color .3s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: rgba(10, 10, 11, .86); border-bottom-color: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav.is-scrolled { background: rgba(10, 10, 11, .96); } }
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner { height: var(--nav-h); max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Logo horizontal WEWASH.es (unas 5 veces más ancho que alto): en móvil comparte fila con «Reservar» y el menú; en
   escritorio, con los enlaces centrados, cabe en su columna (~180 px hasta 1279 px, ~300 px desde 1280 px) */
.brand img { height: 30px; width: auto; object-fit: contain; object-position: left center; }
@media (max-width: 359px) { .brand img { height: 25px; } }
@media (min-width: 400px) { .brand img { height: 34px; } }
@media (min-width: 1024px) { .brand img { height: 33px; } }
.nav-links { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-tel, .nav-wa { display: none; }
.nav-actions .btn-sm { min-height: 36px; padding: 0 16px; }
.menu-btn { width: 44px; height: 44px; display: grid; place-content: center; gap: 7px; }
.menu-btn span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease-out); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
@media (min-width: 1024px) {
  .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-links { display: flex; gap: 30px; justify-self: center; }
  .nav-links a { position: relative; font: 500 .875rem/1 var(--f-display); color: var(--text-md); padding: 8px 0; transition: color .2s; }
  .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
  .nav-links a:hover { color: var(--text-hi); }
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-links a[aria-current="true"] { color: var(--text-hi); }
  .nav-links a[aria-current="true"]::before { content: ''; position: absolute; left: 50%; bottom: -10px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red-signal); }
  .nav-actions { justify-self: end; }
  .nav-wa { display: inline-grid; width: 40px; height: 40px; }
  .nav-actions .btn-sm { min-height: 40px; padding: 0 20px; }
  .menu-btn { display: none; }
}
@media (min-width: 1200px) { .nav-tel { display: inline; font: 500 .875rem/1 var(--f-display); color: var(--text-md); margin-right: 6px; } .nav-tel:hover { color: var(--text-hi); } }
.mobile-menu { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: var(--ink-950); padding: calc(var(--nav-h) + env(safe-area-inset-top) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease-io); }
.mobile-menu.is-open { clip-path: inset(0); }
.mobile-menu li { border-bottom: 1px solid var(--line-dark); overflow: hidden; }
.mobile-menu li a { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; font: 600 clamp(1.9rem, 8vw, 2.25rem)/1.1 var(--f-display); letter-spacing: -.03em; }
.mobile-menu li a span { font: 600 .8125rem/1 var(--f-display); color: var(--text-lo); letter-spacing: .1em; }
.mobile-menu-foot { display: grid; gap: 12px; }
.mobile-menu-foot .btn { min-height: 52px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: max(600px, 100svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media video { position: absolute; inset: 0; object-position: 62% 50%; }
.hero-scrim { position: absolute; inset: 0; background: var(--scrim-mobile); z-index: 1; }
.cine-bar { position: absolute; left: 0; right: 0; height: 50%; background: var(--ink-950); z-index: 4; pointer-events: none; transform-origin: top; animation: cine-abre 1.1s var(--ease-io) .15s both; }
.cine-top { top: 0; }
.cine-bottom { bottom: 0; transform-origin: bottom; }
@keyframes cine-abre { to { transform: scaleY(0); visibility: hidden; } }
.hero-media { animation: hero-zoom 2.4s var(--ease-out) backwards; }
@keyframes hero-zoom { from { transform: scale(1.1); } }
.hero-inner { animation: hero-sube 1.3s var(--ease-out) .45s backwards; }
@keyframes hero-sube { from { transform: translateY(28px); } }
.hero-inner { position: relative; z-index: 3; padding-top: calc(var(--nav-h) + 40px); padding-bottom: calc(40px + env(safe-area-inset-bottom)); display: grid; gap: 32px; align-items: end; }
.hero-label { color: var(--text-on-video); opacity: .85; margin-bottom: 18px; }
.hero h1 { color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, .35); font-size: clamp(3.1rem, 13.5vw, 9.5rem); }
.hero-lead { color: var(--text-on-video); margin-top: 20px; max-width: 520px; }
.hero-ctas { display: grid; gap: 12px; margin-top: 28px; }
.hero-ctas .btn { min-height: 52px; }
.hero-sec { display: flex; align-items: center; gap: 16px; }
.hero-precios { padding: 0 26px; }
.play-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; font: 600 .9375rem/1 var(--f-display); color: #fff; }
.play-ring { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); display: grid; place-items: center; transition: border-color .2s, background-color .2s; }
.play-link:hover .play-ring { border-color: #fff; background: rgba(255, 255, 255, .08); }
.quick { display: none; }
.scroll-cue { display: none; }
@media (orientation: landscape) and (max-height: 500px) { .hero { min-height: 420px; } .hero h1 { font-size: 2.6rem; } .hero-lead { display: none; } }
@media (min-width: 600px) {
  .hero-ctas { display: flex; align-items: center; gap: 24px; }
}
@media (min-width: 1024px) {
  .hero { min-height: clamp(680px, 100svh, 1100px); }
  .hero-scrim { background: var(--scrim-left), var(--scrim-bottom); }
  .hero-inner { grid-template-columns: 1fr 420px; gap: 48px; padding-bottom: 14vh; }
  .hero h1 { font-size: var(--fs-display); }
  .quick { display: grid; gap: 12px; background: rgba(17, 17, 19, .92); border: 1px solid #2A2A2F; border-radius: var(--r-md); padding: 16px; }
  .scroll-cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 10px; font: 600 .6875rem/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--text-md); }
  .scroll-cue span { width: 1px; height: 56px; background: rgba(255, 255, 255, .5); transform-origin: top; animation: cue 1.8s var(--ease-io) infinite; }
  .scroll-cue.is-stopped span { animation: none; }
}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.quick-next { font-size: .8125rem; color: var(--text-md); min-height: 1.4em; }
.quick-next strong { color: var(--text-hi); font-weight: 600; }
.select-wrap { position: relative; }
.select-wrap::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; opacity: .8; }
select, input[type="text"], input[type="tel"], input[type="email"] { width: 100%; min-height: 56px; border-radius: var(--r-sm); background: var(--ink-800); border: 1px solid var(--field-border); padding: 0 16px; font-size: 16px; color: var(--text-hi); transition: border-color .2s; }
select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
select:hover, input:hover { border-color: #9a9aa2; }
select:focus-visible, input:focus-visible { border-color: var(--text-hi); outline: 2px solid var(--red-signal); outline-offset: 2px; }
::placeholder { color: var(--text-lo); opacity: 1; }
optgroup { font-weight: 600; }

/* ---------- Secciones ---------- */
.section { position: relative; padding: var(--sec-y) 0; }
.paper { background: var(--paper); color: var(--ink-on-paper); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 88px); }
.section-head .label { margin-bottom: 18px; }
@media (min-width: 1024px) { .section-head { grid-template-columns: 7fr 5fr; align-items: end; gap: 48px; } }

/* Manifiesto */
.strip { padding: clamp(88px, 12vw, 160px) 0 clamp(72px, 10vw, 120px); }
.manifesto { font: 500 clamp(1.75rem, 1.1rem + 2.8vw, 4.5rem)/1.12 var(--f-display); letter-spacing: -.03em; max-width: 21ch; margin: 0 auto 0 0; color: var(--text-hi); }
@media (min-width: 1024px) { .manifesto { margin-left: calc(100% / 12); max-width: 19ch; font-size: var(--fs-h2); line-height: 1.08; } }
.figures { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line-dark); }
.figures > div { padding: 24px 16px 8px 0; border-bottom: 1px solid var(--line-dark); }
.figures > div:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.figures > div:nth-child(even) { padding-left: 16px; }
.figure { font: 600 clamp(2.5rem, 1.6rem + 4vw, 5rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--text-hi); }
.figures dd { margin-top: 12px; font-size: .875rem; color: var(--text-lo); max-width: 24ch; }
@media (min-width: 1024px) { .figures { grid-template-columns: repeat(4, 1fr); } .figures > div { padding: 32px 24px 0; border-bottom: 0; border-right: 1px solid var(--line-dark); } .figures > div:first-child { padding-left: 0; } .figures > div:last-child { border-right: 0; } }

/* ---------- Centros ---------- */
/* Mapa grande de España; al pulsar un punto se amplía hasta el plano de calles del centro (Leaflet + OpenStreetMap)
   y el panel pasa de la lista de centros a la ficha para reservar. En escritorio el panel flota sobre el mapa;
   en móvil va debajo. */
.centros-top { display: grid; gap: 20px; margin-bottom: 32px; }
.centros-top .label { margin-bottom: 18px; }
.centros-ayuda { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .9375rem; color: var(--ink-md-on-paper); }
.mc-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(168, 14, 0, .16); flex: none; }

.mapa-centros { position: relative; }
.mc-mapa { position: relative; height: clamp(340px, 92vw, 460px); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); border: 1px solid var(--line-light); isolation: isolate; }
.mc-espana { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; transition: opacity .5s var(--ease-out); }
.map { width: 100%; height: 100%; margin: 0; }
.map svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; transition: transform .75s var(--ease-io); }
.mc-mapa.is-calles .mc-espana { opacity: 0; pointer-events: none; }
.mc-mapa.is-calles .map svg { transform: scale(var(--mc-zoom, 3)); }
.map .land { fill: #E2DDD4; stroke: rgba(18, 18, 20, .22); stroke-width: .8; }
.map .near { fill: #EDE9E2; stroke: rgba(18, 18, 20, .08); stroke-width: .6; }
.map .pin { cursor: pointer; }
.map .pin circle.dot { fill: var(--red); stroke: var(--paper); stroke-width: 2; transition: r .25s var(--ease-out); }
.map .pin circle.halo { fill: var(--red); opacity: 0; transition: opacity .25s; }
.map .pin:hover circle.halo, .map .pin:focus-visible circle.halo, .map .pin.is-hot circle.halo { opacity: .2; }
.map .pin:hover circle.dot, .map .pin.is-hot circle.dot { r: 11; }
.map .pin text { font: 600 11px var(--f-display); fill: var(--ink-on-paper); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
/* El plano de calles: aparece al ampliar, en tonos cálidos para ir con la web */
.mc-calles { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .55s var(--ease-out) .15s; z-index: 1; }
.mc-mapa.is-calles .mc-calles { opacity: 1; pointer-events: auto; }
.mc-calles.leaflet-container { background: var(--paper); font-family: var(--f-text); }
.mc-calles .leaflet-tile-pane { filter: grayscale(1) sepia(.16) brightness(1.04) contrast(.92); }
.mc-calles .leaflet-control-zoom { border: 0; box-shadow: 0 2px 10px rgba(18, 18, 20, .16); border-radius: 10px; overflow: hidden; }
.mc-calles .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; color: var(--ink-on-paper); font: 500 1.25rem/40px var(--f-text); }
.mc-calles .leaflet-control-attribution { font-size: .6875rem; background: rgba(255, 255, 255, .85); }
.mc-volver { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--card-light); color: var(--ink-on-paper); font: 600 .875rem/1 var(--f-text); box-shadow: 0 2px 12px rgba(18, 18, 20, .18); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.mc-volver:hover { box-shadow: 0 4px 18px rgba(18, 18, 20, .24); }
/* Puntos del plano de calles */
.mc-pin { background: none; border: 0; }
.mc-pin-dot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); transition: transform .25s var(--ease-out), box-shadow .25s; }
.mc-pin-nombre { position: absolute; left: 30px; top: 11px; transform: translateY(-50%); white-space: nowrap; padding: 6px 9px; border-radius: 6px; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 6px rgba(0, 0, 0, .16); font: 600 .8125rem/1 var(--f-display); color: var(--ink-on-paper); pointer-events: none; }
.mc-pin:hover .mc-pin-dot, .mc-pin.is-hot .mc-pin-dot { transform: scale(1.15); }
.mc-pin.is-sel .mc-pin-dot { transform: scale(1.3); box-shadow: 0 0 0 9px rgba(168, 14, 0, .2), 0 2px 8px rgba(0, 0, 0, .35); }
.mc-pin.is-sel .mc-pin-nombre { color: var(--red); }
.mc-pin:focus { outline: none; }
.mc-pin:focus-visible .mc-pin-dot { outline: 2px solid var(--red-signal); outline-offset: 4px; }
.mc-pin.is-pronto .mc-pin-dot { background: #fff; border-color: var(--red); }
.mc-pin-nombre small { display: block; margin-top: 4px; font: 600 .625rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

/* Panel: lista de centros o ficha del elegido */
.mc-panel { margin-top: 16px; }
.mc-lista-tit { margin-bottom: 14px; font: 600 1.125rem/1.2 var(--f-display); letter-spacing: -.01em; }
.centros-dir { display: grid; gap: 18px; }
.dir-region { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line-light); font: 600 var(--fs-label)/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
.dir-region .n { font-variant-numeric: tabular-nums; letter-spacing: 0; opacity: .8; }
.dir-lista { display: grid; gap: 2px; }
.dir-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border-radius: var(--r-md); text-align: left; color: var(--ink-on-paper); cursor: pointer; transition: background-color .2s; }
.dir-item:hover, .dir-item.is-hot { background: var(--paper-2); }
.dir-nombre { flex: 1; min-width: 0; font: 600 1rem/1.25 var(--f-display); letter-spacing: -.01em; }
.dir-ciudad { display: block; margin-top: 2px; font: 400 .8125rem/1.3 var(--f-text); color: var(--ink-lo-on-paper); }
.dir-estado { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: .8125rem; font-weight: 500; color: var(--ink-lo-on-paper); }
.dir-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.dir-estado.is-open { color: var(--success-on-paper); }
.dir-estado.is-open::before { opacity: 1; }
.dir-estado.is-pronto { color: var(--red); }
.dir-estado.is-pronto::before { background: transparent; border: 1.5px solid currentColor; opacity: 1; }
.dir-flecha { flex: none; color: var(--ink-lo-on-paper); transform: rotate(-90deg); }
/* En móvil la ficha va en su tarjeta blanca bajo el mapa */
.mc-ficha { padding: 18px 18px 14px; background: var(--card-light); border: 1px solid var(--line-light); border-radius: var(--r-lg); box-shadow: var(--shadow-card-light); }
.mc-atras { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px 0 6px; font: 600 .875rem/1 var(--f-text); color: var(--ink-md-on-paper); cursor: pointer; }
.mc-atras:hover { color: var(--ink-on-paper); }
.mc-ficha.is-cambio .centro-detalle { animation: cd-entra .4s var(--ease-out); }
@keyframes cd-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Ficha del centro */
.centro-detalle { display: flex; flex-direction: column; }
.centro-detalle:focus { outline: none; }
.centro-detalle > * { min-width: 0; }
.cd-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; }
.center-city { font: 600 var(--fs-label)/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
.center-rating { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font: 600 .9375rem/1 var(--f-display); color: var(--ink-on-paper); }
.center-rating svg { color: var(--red); }
.center-rating small { font: 500 .75rem/1 var(--f-text); color: var(--ink-lo-on-paper); }
.center-rating:hover small { text-decoration: underline; }
.cd-nombre { margin-top: 6px; font: 600 clamp(1.625rem, 1.3rem + 1vw, 2rem)/1.08 var(--f-display); letter-spacing: -.025em; }
.cd-dir { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--ink-md-on-paper); }
.live { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--paper); font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--ink-md-on-paper); }
.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-lo-on-paper); flex: none; }
.live.is-open { background: rgba(29, 106, 63, .09); color: var(--success-on-paper); }
.live.is-open::before { background: var(--success-on-paper); }
.live.is-pronto { background: rgba(168, 14, 0, .08); color: var(--red); }
.live.is-pronto::before { background: transparent; border: 1.5px solid currentColor; }
.cd-pronto { margin-top: 14px; font-size: .9375rem; line-height: 1.55; color: var(--ink-md-on-paper); }
.cd-cerca { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-light); }
.cd-cerca-tit { margin-bottom: 6px; font: 600 .6875rem/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
.cd-cerca ul { display: grid; gap: 2px; margin: 0 -12px; }
.cd-cerca-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border-radius: var(--r-md); text-align: left; color: var(--ink-on-paper); cursor: pointer; transition: background-color .2s; }
.cd-cerca-item:hover { background: var(--paper-2); }
.cd-cerca-item:focus-visible { outline: 2px solid var(--red-signal); outline-offset: -2px; }
.center-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-light); }
.center-facts dt { font: 600 .6875rem/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
.center-facts dd { display: flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--ink-on-paper); font-variant-numeric: tabular-nums; }
.center-facts dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.center-facts .next { display: flex; align-items: center; }
.next-btn { text-align: left; font-weight: 600; color: var(--ink-on-paper); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; min-height: 32px; }
.next-btn:hover { text-decoration-color: var(--red); }
.next-skel { display: inline-block; width: 92px; height: 14px; border-radius: 3px; background: var(--paper-2); animation: pulse 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes pulse { 50% { opacity: .5; } }
.center-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.center-actions .btn { min-height: 52px; padding: 0 12px; }
.paper .btn-link { border: 1px solid rgba(18, 18, 20, .28); color: var(--ink-on-paper); }
.paper .btn-link:hover { background: var(--ink-on-paper); color: var(--text-hi); }
.cd-resena { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--paper); }
.cd-resena blockquote { margin: 0; font: italic 400 1.1875rem/1.35 var(--f-serif, 'Instrument Serif', Georgia, serif); color: var(--ink-on-paper); }
.cd-resena figcaption { margin-top: 8px; font-size: .8125rem; color: var(--ink-lo-on-paper); }
.cd-resena figcaption a { text-decoration: underline; text-underline-offset: 2px; }
.cd-mas { margin-top: 14px; border-top: 1px solid var(--line-light); }
.cd-mas summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font: 500 .875rem/1 var(--f-text); color: var(--ink-md-on-paper); cursor: pointer; list-style: none; }
.cd-mas summary::-webkit-details-marker { display: none; }
.cd-mas summary:hover { color: var(--ink-on-paper); }
.cd-mas summary svg { transition: transform .25s; }
.cd-mas[open] summary svg { transform: rotate(180deg); }
.cd-info { display: grid; gap: 12px; padding-bottom: 6px; }
.cd-info dt { font: 600 .6875rem/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
.cd-info dd { margin-top: 6px; font-size: .875rem; line-height: 1.55; color: var(--ink-md-on-paper); }
.cd-info dd.mono { color: var(--ink-on-paper); }
.note { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: .9375rem; color: var(--ink-md-on-paper); }
.note svg { color: var(--red); flex: none; }

@media (min-width: 640px) and (max-width: 1023px) {
  .centros-dir { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .mc-mapa { height: 480px; }
}
@media (min-width: 1024px) {
  .centros-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 64px; margin-bottom: 40px; }
  .centros-top .h2 { font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.5rem); }
  .mc-mapa { height: clamp(600px, 74vh, 700px); }
  /* España a la izquierda, sin quedar debajo del panel */
  .mc-espana { padding: 28px 436px 28px 28px; }
  .map .pin text { font-size: 15px; }
  .mc-panel { position: absolute; top: 16px; right: 16px; z-index: 4; width: 392px; max-height: calc(100% - 32px); margin: 0; padding: 22px 22px 18px; overflow-y: auto; overscroll-behavior: contain; background: var(--card-light); border-radius: var(--r-lg); box-shadow: 0 1px 0 rgba(18, 18, 20, .04), 0 20px 50px rgba(18, 18, 20, .14); scrollbar-width: thin; }
  .centros-dir { gap: 14px; }
  .dir-item { min-height: 48px; }
  .mc-ficha { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .map svg, .mc-espana, .mc-calles, .mc-pin-dot { transition: none; }
  .mc-ficha.is-cambio .centro-detalle { animation: none; }
}

/* Precios va justo debajo de Centros (las dos en papel): una línea las separa */
.centros + .tarifas { padding-top: 0; }
.centros + .tarifas > .container { padding-top: var(--sec-y); border-top: 1px solid var(--line-light); }

/* ---------- Proceso ---------- */
.proceso { position: relative; background: var(--ink-950); padding-top: var(--sec-y); }
.proc-intro { display: grid; gap: 20px; padding-bottom: 48px; }
.proc-intro .label { margin-bottom: 18px; }
.proc-intro .lead { margin-top: 20px; }
.skip-proc { justify-self: start; color: var(--text-md); font-size: .9375rem; }
@media (min-width: 1024px) { .proc-intro { grid-template-columns: 7fr 5fr; align-items: end; padding-bottom: 72px; } .skip-proc { justify-self: end; } }
/* Móvil / tablet (y alternativa sin GSAP): marco fijo arriba y bloques de texto con scroll nativo */
.proc-track { position: relative; }
/* Franja negra fija a lo ancho (tapa las tarjetas que pasan por debajo) con el marco redondeado dentro */
.proc-stage { position: sticky; top: var(--nav-h); z-index: 2; height: calc(min(46svh, 420px) + 20px); background: var(--ink-950); isolation: isolate; --fi: 8px 16px 12px 16px; }
.proc-frame, .proc-stage > .proc-scrim, .proc-stage > .grain { position: absolute; inset: 8px 16px 12px 16px; border-radius: 12px; overflow: hidden; }
.proc-frame { background: var(--ink-900); }
.proc-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.proc-layer.is-on { opacity: 1; }
.proc-layer.is-on video, .proc-layer.is-on img.cover { animation: kenburns 6s linear both; }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
.proc-layer img.cover { width: 100%; height: 100%; object-fit: cover; }
.proc-layer.native { display: grid; place-items: center; background: var(--ink-950); }
.proc-layer.native img { max-width: min(780px, 88%); max-height: 88%; width: auto; border-radius: 6px; }
.proc-layer.is-interior { clip-path: circle(0% at 55% 50%); transition: clip-path .7s var(--ease-out), opacity .2s; }
.proc-layer.is-interior.is-on { clip-path: circle(75% at 55% 50%); }
.proc-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,11,.45), transparent 40%); z-index: 1; pointer-events: none; }
.proc-stories { position: absolute; top: 20px; left: 28px; right: 28px; display: flex; gap: 4px; z-index: 3; }
.proc-stories i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2); transition: background-color .3s; }
.proc-stories i.is-done { background: var(--text-hi); }
.proc-num, .proc-pip, .proc-rail { display: none; }
.proc-cards { position: relative; z-index: 1; padding: 24px 16px 0; }
.pcard { min-height: 72svh; display: flex; align-items: center; }
.pcard-in { width: 100%; background: var(--ink-850); border-radius: 12px; padding: 20px; border: 1px solid var(--line-dark); transition: border-color .3s; }
.pcard.is-oz .pcard-in { border-left: 2px solid var(--ozone); }
.pcard-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pcard-step { font: 600 .8125rem/1 var(--f-display); color: var(--text-lo); letter-spacing: .04em; }
.phase { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .08); font: 600 .6875rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-md); }
.phase.is-oz { background: var(--ozone); color: var(--ink-950); }
.pcard h3 { font: 600 1.5rem/1.15 var(--f-display); letter-spacing: -.02em; }
.pcard p { margin-top: 10px; font-size: .9375rem; color: var(--text-md); }
.pcard-use { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-dark); font-size: .875rem; color: var(--text-md); }
.pcard-use .label { display: block; margin-bottom: 6px; }
.proc-outro { display: grid; gap: 32px; justify-items: start; padding-top: clamp(72px, 10vw, 140px); padding-bottom: var(--sec-y); }
/* Escritorio con GSAP: escenario fijado (pin) a pantalla completa */
.proc-pinned .proc-track { height: 100svh; }
.proc-pinned .proc-stage { position: absolute; inset: 0; top: 0; height: 100%; margin: 0; border-radius: 0; }
.proc-pinned .proc-frame, .proc-pinned .proc-stage > .proc-scrim, .proc-pinned .proc-stage > .grain { inset: 0; border-radius: 0; }
.proc-pinned .proc-frame { background: var(--ink-950); }
.proc-pinned .proc-layer { transition: none; opacity: 1; visibility: hidden; }
.proc-pinned .proc-layer.is-interior, .proc-pinned .proc-layer.is-interior.is-on { transition: none; }
.proc-pinned .proc-layer.is-on video, .proc-pinned .proc-layer.is-on img.cover { animation: none; }
.proc-pinned .proc-stories { display: none; }
.proc-pinned .proc-scrim { background: radial-gradient(80% 70% at 0% 100%, rgba(10,10,11,.8), transparent 60%); }
.proc-pinned .proc-cards { position: absolute; left: 48px; bottom: 48px; width: 460px; padding: 0; z-index: 4; }
.proc-pinned .pcard { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 0; display: block; opacity: 0; transform: translateY(24px); transition: opacity .35s ease, transform .5s var(--ease-out); pointer-events: none; }
.proc-pinned .pcard.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s; }
.proc-pinned .pcard-in { background: var(--card-on-video); padding: 32px; border-radius: var(--r-md); }
.proc-pinned .pcard h3 { font-size: var(--fs-h3); }
.proc-pinned .pcard p { font-size: 1rem; }
.proc-pinned .proc-num { display: block; position: absolute; right: 6vw; bottom: -4vw; z-index: 1; font: 500 22vw/1 var(--f-display); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; letter-spacing: -.06em; color: rgba(244, 242, 238, .06); pointer-events: none; }
.proc-pinned .proc-pip { display: block; position: absolute; right: 120px; top: 50%; width: 280px; height: 350px; margin-top: -175px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-dark-strong); z-index: 3; opacity: 0; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.proc-pip video { width: 100%; height: 100%; object-fit: cover; }
.proc-pip span { position: absolute; left: 12px; bottom: 12px; font: 600 .6875rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; background: rgba(10,10,11,.8); padding: 6px 8px; border-radius: 3px; }
.proc-pinned .proc-rail { display: flex; position: absolute; right: 36px; top: 50%; transform: translateY(-50%); z-index: 4; gap: 18px; align-items: stretch; }
.proc-rail ol { display: grid; gap: 14px; text-align: right; }
.proc-rail button { font: 500 .8125rem/1.2 var(--f-display); color: var(--text-lo); transition: color .25s; min-height: 24px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.proc-rail button:hover { color: var(--text-md); }
.proc-rail button[aria-current="step"] { color: var(--text-hi); }
.proc-rail button .mono { opacity: 0; transition: opacity .25s; }
.proc-rail button[aria-current="step"] .mono { opacity: 1; }
.rail-line { width: 1px; background: rgba(255, 255, 255, .16); position: relative; }
.rail-line span { position: absolute; inset: 0; background: var(--red-signal); transform-origin: top; transform: scaleY(0); }
.oz-halo { position: absolute; top: -20%; right: -10%; width: 70%; height: 80%; background: radial-gradient(closest-side, rgba(252, 210, 38, .16), transparent); z-index: 2; opacity: 0; pointer-events: none; }

/* ---------- Ozono ---------- */
.ozono { background: radial-gradient(60% 60% at 85% 85%, rgba(252, 210, 38, .08), transparent 70%), var(--ink-950); }
.ozono-grid { display: grid; gap: 56px; }
.ozono .label-oz { color: var(--text-lo); margin-bottom: 18px; }
.ozono .lead { margin-top: 20px; }
.oz-word { font-weight: 600; color: var(--ozone); }
.benefits { margin-top: 40px; border-top: 1px solid var(--line-dark); }
.benefits li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-dark); }
.benefits svg { color: var(--ozone); margin-top: 2px; }
.benefits h3 { font: 600 1.25rem/1.25 var(--f-display); letter-spacing: -.01em; }
.benefits p { font-size: .9375rem; color: var(--text-md); margin-top: 4px; }
.oz-panel { margin-top: 32px; }
.oz-panel ol { display: grid; gap: 1px; margin-top: 14px; border-top: 1px solid var(--line-dark); }
.oz-panel li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); color: var(--text-md); }
.oz-panel li .mono { color: var(--ozone); font-weight: 600; }
.oz-mol-wrap { display: grid; justify-items: center; gap: 14px; order: -1; }
/* Molécula de ozono: tres esferas de cristal que flotan; al pulsarla se abre «Cómo actúa el ozono» */
.oz-mol { position: relative; display: grid; justify-items: center; width: min(100%, 260px); padding: 8px 0 0; border-radius: var(--r-lg); color: var(--text-hi); }
.oz-escena { position: relative; display: block; width: 100%; }
.oz-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 42px rgba(140, 200, 240, .22)); transition: transform .5s var(--ease-out), opacity .6s var(--ease-out); }
.oz-mol:hover .oz-svg { transform: scale(1.03); }
/* Molécula 3D (js/ozono3d.js): aparece sobre el dibujo cuando pinta su primer fotograma; los bordes se funden con la sección */
.oz-canvas { position: absolute; left: -14%; top: -16%; width: 128%; height: 126%; opacity: 0; pointer-events: none; transition: opacity .8s var(--ease-out); filter: drop-shadow(0 0 46px rgba(140, 200, 240, .22)); }
.oz-escena.is-3d .oz-canvas { opacity: 1; }
.oz-escena.is-3d .oz-svg { opacity: 0; }
.oz-escena.is-3d .oz-flota, .oz-escena.is-3d .oz-sombra { animation-play-state: paused; }
.oz-flota { transform-box: fill-box; transform-origin: 50% 50%; animation: ozFlota 7s ease-in-out infinite; }
.oz-sombra { transform-box: fill-box; transform-origin: 50% 50%; animation: ozSombra 7s ease-in-out infinite; }
@keyframes ozFlota { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes ozSombra { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.86); opacity: .6; } }
.oz-formula { position: absolute; left: 0; top: 0; display: grid; justify-items: start; text-align: left; pointer-events: none; }
.oz-f { font: 600 2.5rem/1 var(--f-display); letter-spacing: -.04em; color: #EAF5FC; }
.oz-f sub { font-size: .5em; vertical-align: baseline; position: relative; top: .12em; margin-left: .04em; color: #A9D3EC; }
.oz-fn { margin-top: 6px; font: 500 .875rem/1 var(--f-text); color: #A9D3EC; letter-spacing: .02em; }
.oz-ver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0 18px; border: 1px solid rgba(169, 211, 236, .35); border-radius: var(--r-pill); font: 600 .875rem/1 var(--f-display); color: #DCEEF8; transition: background-color .2s, border-color .2s; }
.oz-ver svg { transition: transform .3s var(--ease-out); }
.oz-mol:hover .oz-ver { background: rgba(169, 211, 236, .08); border-color: rgba(169, 211, 236, .6); }
.oz-mol[aria-expanded="true"] .oz-ver svg { transform: rotate(45deg); }
.oz-mol:focus-visible { outline: 2px solid #A9D3EC; outline-offset: 6px; }
.oz-caption { font-size: .8125rem; color: var(--text-lo); text-align: center; }
@media (prefers-reduced-motion: reduce) { .oz-flota, .oz-sombra { animation: none; } }
@media (min-width: 1024px) { .ozono-grid { grid-template-columns: 7fr 5fr; align-items: center; gap: 80px; } .oz-mol-wrap { order: 0; } .oz-mol { width: min(100%, 340px); } .oz-f { font-size: 3.25rem; } }

/* ---------- Servicios ---------- */
.servicios { background: var(--ink-900); }
.serv-grid { display: grid; gap: 32px; }
.serv-list { counter-reset: s; border-top: 1px solid var(--line-dark); }
.serv-item { border-bottom: 1px solid var(--line-dark); }
.serv-btn { width: 100%; text-align: left; display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: baseline; padding: 22px 0; }
.serv-btn .mono { font: 600 .875rem/1 var(--f-display); color: var(--text-lo); }
.serv-name { font: 600 clamp(1.6rem, 1rem + 2.6vw, 2.75rem)/1.05 var(--f-display); letter-spacing: -.03em; color: var(--text-lo); transition: color .3s; }
.serv-item.is-on .serv-name, .serv-btn:hover .serv-name { color: var(--text-hi); }
.serv-body { padding: 0 0 24px 44px; display: grid; gap: 16px; justify-items: start; }
.serv-body p { color: var(--text-md); font-size: .9375rem; max-width: 52ch; }
.chip-oz { display: inline-flex; align-items: center; gap: 8px; font: 600 .6875rem/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-md); }
.chip-oz::before, .dot-oz { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ozone); display: inline-block; }
.serv-body .link { font-weight: 600; font-family: var(--f-display); }
.serv-thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; position: relative; background: var(--ink-850); }
.serv-thumb video, .serv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.serv-media { display: none; }
.compare-wrap { display: none; }
.serv-thumb .compare { position: absolute; inset: 0; }
.compare { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3; background: var(--ink-850); margin: 0; --pos: 50%; touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-after { clip-path: inset(0 0 0 var(--pos)); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--text-hi); pointer-events: none; }
.compare-handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--text-hi); box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.compare-handle span::before, .compare-handle span::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; border-left: 1.5px solid var(--ink-950); border-bottom: 1.5px solid var(--ink-950); }
.compare-handle span::before { left: 12px; transform: translateY(-50%) rotate(45deg); }
.compare-handle span::after { right: 12px; transform: translateY(-50%) rotate(-135deg); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; min-height: 0; }
.compare input:focus-visible ~ .compare-handle span { outline: 2px solid var(--red-signal); outline-offset: 3px; }
.compare-tag { position: absolute; top: 12px; font-size: .75rem; background: rgba(10,10,11,.7); padding: 5px 8px; border-radius: 3px; pointer-events: none; }
.compare-tag-a { left: 12px; } .compare-tag-b { right: 12px; }
.compare figcaption { position: absolute; left: 12px; bottom: 12px; font-size: .75rem; color: var(--text-hi); background: rgba(10,10,11,.7); padding: 5px 8px; border-radius: 3px; pointer-events: none; }
@media (min-width: 1024px) {
  .serv-grid { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
  .serv-thumb { display: none; }
  .serv-media { display: block; position: sticky; top: 120px; aspect-ratio: 4 / 5; max-width: 460px; width: 100%; justify-self: end; border-radius: 8px; overflow: hidden; background: var(--ink-850); }
  .serv-media .media { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
  .serv-media .media.is-active { opacity: 1; }
  .serv-media .media video { transform: scale(1.06); transition: transform .7s var(--ease-out); }
  .serv-media .media.is-active video { transform: scale(1); }
  .serv-media .compare { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  .serv-body { padding-left: 44px; }
}
.specials-title { margin: clamp(64px, 8vw, 112px) 0 20px; }
.specials { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.special { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 24px 0; border-bottom: 1px solid var(--line-dark); }
.special-img { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: var(--ink-850); }
.special-img img { width: 100%; height: 100%; object-fit: cover; }
.special-ic { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-dark-strong); display: grid; place-items: center; color: var(--text-md); }
.special h3 { font: 600 1.25rem/1.25 var(--f-display); }
.special p { font-size: .9375rem; color: var(--text-md); }
.special .link { font-weight: 600; font-family: var(--f-display); justify-self: start; }
@media (min-width: 700px) { .specials { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
@media (min-width: 1024px) { .specials { grid-template-columns: repeat(4, 1fr); } .special { align-content: start; } }

/* ---------- Tarifas ---------- */
.tar-aviso { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--line-paper, rgba(10, 10, 11, .14)); border-left: 3px solid var(--red); border-radius: var(--r-sm); background: #fff; color: var(--ink-950); font-size: .9375rem; line-height: 1.5; }
.tar-aviso svg { flex: none; color: var(--red); margin-top: 1px; }
.tar-aviso strong { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; }
.tar-tools { display: grid; gap: 28px; margin-bottom: 32px; }
.tar-centros { display: flex; flex-wrap: wrap; gap: 8px; }
.size-finder label { display: block; font: 600 .9375rem/1.3 var(--f-display); margin-bottom: 10px; }
.size-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.size-row input { background: #fff; border-color: rgba(18, 18, 20, .28); color: var(--ink-on-paper); }
.size-row input:focus-visible { border-color: var(--ink-on-paper); outline-color: var(--red); }
.size-row .btn { min-height: 56px; }
.size-out { margin-top: 10px; font-size: .9375rem; color: var(--ink-md-on-paper); min-height: 1.6em; }
.size-out strong { color: var(--ink-on-paper); }
@media (min-width: 600px) { .size-row { grid-template-columns: 1fr auto; } }
@media (min-width: 1024px) { .tar-tools { grid-template-columns: 1fr 440px; align-items: end; gap: 48px; } }
.tar-panel { background: #fff; border: 1px solid rgba(18, 18, 20, .08); border-radius: var(--r-md); box-shadow: var(--shadow-card-light); overflow: hidden; }
.tar-note-top { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 20px 20px 0; font-size: .875rem; color: var(--ink-md-on-paper); }
.tar-note-top strong { color: var(--ink-on-paper); font-family: var(--f-display); }
.tar-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tar-table caption { text-align: left; }
.tar-table th, .tar-table td { padding: 14px 12px; border-bottom: 1px solid var(--line-light); text-align: right; font-variant-numeric: tabular-nums; }
.tar-table thead th { font: 600 .6875rem/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-lo-on-paper); vertical-align: bottom; }
.tar-table th[scope="row"] { text-align: left; font: 600 .9375rem/1.3 var(--f-display); color: var(--ink-on-paper); }
.tar-table tbody tr:hover { background: var(--paper); }
.tar-table .is-col { background: rgba(168, 14, 0, .06); color: var(--red); font-weight: 600; }
.tar-table thead .is-col { color: var(--red); box-shadow: inset 0 2px 0 var(--red); }
.tar-table td { font-family: var(--f-display); font-weight: 500; color: var(--ink-on-paper); white-space: nowrap; }
/* Descripción de cada servicio: resumen bajo el nombre y «Qué incluye» desplegable */
.tar-svc { display: grid; justify-items: start; gap: 3px; width: 100%; text-align: left; color: inherit; cursor: pointer; }
.tar-svc-nombre { display: block; font: 600 .9375rem/1.3 var(--f-display); color: var(--ink-on-paper); }
.tar-svc-res { display: block; margin-top: 3px; font: 400 .8125rem/1.45 var(--f-text); color: var(--ink-md-on-paper); max-width: 46ch; }
.tar-svc-mas { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 600 .75rem/1 var(--f-text); color: var(--red); }
.tar-svc-mas svg { transition: transform .2s; }
.tar-svc:hover .tar-svc-mas { text-decoration: underline; text-underline-offset: 3px; }
.tar-svc[aria-expanded="true"] .tar-svc-mas svg { transform: rotate(180deg); }
.tar-table tr:has(+ .tar-det:not([hidden])) > * { border-bottom-color: transparent; }
.tar-table .tar-det td { padding-top: 0; text-align: left; white-space: normal; font-family: var(--f-text); font-weight: 400; color: var(--ink-md-on-paper); }
.tar-det p { max-width: 72ch; font-size: .875rem; line-height: 1.55; }
.tar-det .tar-det-res { font-weight: 600; color: var(--ink-on-paper); }
.tar-det .tar-det-res + p { margin-top: 6px; }
.tar-det p + .tar-incluye { margin-top: 10px; }
.tar-incluye { display: grid; gap: 6px 28px; }
.tar-incluye li { position: relative; padding-left: 18px; font-size: .875rem; line-height: 1.45; }
.tar-incluye li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--red); }
.tar-extra-desc { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--ink-md-on-paper); }
@media (min-width: 700px) { .tar-incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tar-foot { display: grid; gap: 24px; padding: 20px; background: var(--paper); border-top: 1px solid var(--line-light); }
.tar-extras { display: grid; gap: 0; }
.tar-extras li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-light); font-size: .9375rem; }
.tar-extras li span:last-child { font-family: var(--f-display); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tar-notes { display: grid; gap: 8px; font-size: .875rem; color: var(--ink-md-on-paper); }
.tar-notes li::before { content: '· '; }
.tar-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 699px) {
  .tar-table thead { display: none; }
  .tar-table, .tar-table tbody, .tar-table tr { display: block; }
  .tar-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line-light); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 4px; }
  .tar-table th[scope="row"] { grid-column: 1 / -1; padding: 0 0 4px; border: 0; }
  .tar-table td { border: 0; padding: 8px 4px; text-align: center; border-radius: 4px; background: var(--paper); font-size: .9375rem; }
  .tar-table td::before { content: attr(data-col); display: block; font: 600 .625rem/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-lo-on-paper); margin-bottom: 3px; }
  .tar-table td.is-col::before { color: var(--red); }
  .tar-table tr:has(+ .tar-det:not([hidden])) { border-bottom-color: transparent; padding-bottom: 6px; }
  .tar-table tr.tar-det { display: block; padding-top: 0; }
  .tar-table .tar-det td { display: block; padding: 0; background: none; text-align: left; }
  .tar-table .tar-det td::before { content: none; }
}
@media (min-width: 1024px) { .tar-foot { grid-template-columns: 1.3fr 1fr; gap: 48px; padding: 28px 32px; } .tar-note-top { padding: 24px 32px 0; } .tar-table th, .tar-table td { padding: 16px 24px; } .tar-table th:first-child, .tar-table .tar-det td { padding-left: 32px; } .tar-table td:last-child, .tar-table th:last-child { padding-right: 32px; } }

/* ---------- Cómo reservar ---------- */
.como { background: var(--ink-900); }
.como-cta { display: grid; gap: 14px; justify-items: start; }
.como-cta .link { color: var(--text-md); }
.steps { position: relative; display: grid; gap: 36px; padding-left: 36px; }
.steps li { position: relative; opacity: .35; transition: opacity .4s; }
.steps li.is-on, .no-anim .steps li { opacity: 1; }
.step-mark { position: absolute; left: -36px; top: 4px; width: 10px; height: 10px; border: 1.5px solid var(--text-hi); background: var(--ink-900); transition: background-color .3s, border-color .3s; }
.steps li.is-on .step-mark { background: var(--red-signal); border-color: var(--red-signal); }
.step-n { font: 600 .9375rem/1 var(--f-display); color: var(--red-signal); }
.steps h3 { font: 600 1.5rem/1.2 var(--f-display); letter-spacing: -.02em; margin: 12px 0 8px; }
.steps p { color: var(--text-md); max-width: 32ch; }
.steps-line { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, .15); }
.steps-line span { position: absolute; inset: 0; background: var(--red-signal); transform-origin: top; transform: scaleY(0); }
.no-anim .steps-line span { transform: none; }
@media (min-width: 1024px) {
  .como-cta { justify-items: end; }
  .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 36px 0 0; }
  .step-mark { left: 0; top: -41px; }
  .steps-line { left: 0; right: 0; top: -37px; bottom: auto; width: auto; height: 1px; }
  .steps-line span { transform-origin: left; transform: scaleX(0); height: 2px; top: -.5px; }
}

/* ---------- Conoce a Wiwi ---------- */
.wiwi-sec { background: var(--ink-950); overflow: hidden; }
.wiwi-grid { display: grid; gap: 48px; }
.seal-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.medal { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.wiwi-copy .lead { margin-top: 20px; }
.checks { margin: 32px 0; border-top: 1px solid var(--line-dark); }
.checks li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-dark); color: var(--text-md); }
.checks svg { color: var(--red-signal); flex: none; }
.ask-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 28px; padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.ask-chips::-webkit-scrollbar { display: none; }
.ask-chips .chip { flex: none; }
.wiwi-copy .btn { min-height: 52px; }
.wiwi-copy .fine { margin-top: 20px; }
/* --wh: alto de la figura (de la punta de la antena al suelo). El recorte (722 x 1072) trae aire arriba (67 px)
   y bajo el suelo (14 px): márgenes negativos para que la figura ocupe lo mismo que antes y los pies pisen la línea */
.studio { --wh: min(46svh, 380px); position: relative; display: grid; place-items: end center; min-height: var(--wh); order: -1; }
.studio-halo { position: absolute; inset: 0; background: radial-gradient(50% 45% at 50% 62%, rgba(168, 14, 0, .32), transparent 70%); }
/* Envoltorio: lo anima la entrada (GSAP) y contiene el canvas 2.5D y la sombra de contacto (la pone el componente) */
.studio-fig { position: relative; z-index: 1; }
.studio-wiwi { position: relative; display: block; height: calc(var(--wh) * 1.0817); width: auto; max-width: none; margin: calc(var(--wh) * -.0676) 0 calc(var(--wh) * -.0141); }
.studio-floor { position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: rgba(255, 255, 255, .08); }
.studio-card { display: none; }
@media (min-width: 1024px) {
  .wiwi-sec { min-height: max(720px, 100vh); display: flex; align-items: center; }
  .wiwi-grid { grid-template-columns: 6fr 6fr; align-items: center; gap: 64px; }
  .studio { --wh: min(70vh, 495px); order: 0; min-height: 620px; }
  .ask-chips { flex-wrap: wrap; overflow: visible; margin: 0 0 28px; padding: 0; }
  .studio-card { display: grid; gap: 10px; position: absolute; left: -24px; bottom: 40px; width: 300px; z-index: 2; background: var(--ink-850); border: 1px solid var(--line-dark); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-pop); font-size: .875rem; }
  .studio-card .b { padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--ink-800); color: var(--text-hi); line-height: 1.45; }
  .studio-card .b-user { background: var(--red); color: #fff; border-radius: 12px 12px 4px 12px; justify-self: end; max-width: 88%; }
  .studio-card .b-draft { font-size: .75rem; color: var(--text-md); border: 1px solid var(--field-border); border-radius: 8px; padding: 10px 12px; }
}

/* ---------- Galería ---------- */
.galeria { background: var(--ink-900); }
.gal-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery::-webkit-scrollbar { display: none; }
.shot { flex: none; width: min(82vw, var(--w, 82vw)); scroll-snap-align: center; margin: 0; }
.shot-img { position: relative; border-radius: 4px; overflow: hidden; background: var(--ink-850); }
.shot img { width: 100%; height: auto; filter: contrast(1.04) saturate(.92); }
.shot figcaption { display: flex; gap: 10px; margin-top: 10px; font-size: .8125rem; color: var(--text-lo); }
.shot figcaption .mono { color: var(--text-md); }
.gal-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.gal-nav .mono { margin-right: auto; font-size: .875rem; color: var(--text-md); }
@media (min-width: 1024px) {
  .gallery { display: block; columns: 3; column-gap: 24px; overflow: visible; margin: 0; padding: 0; }
  .shot { width: auto; break-inside: avoid; margin-bottom: 32px; display: block; }
  .shot-img { max-width: var(--w, 100%); }
  .gal-nav { display: none; }
}

/* ---------- Opiniones ---------- */
.op-grid { display: grid; gap: 48px; }
.op-side .label { margin-bottom: 18px; }
.op-score { font: 600 clamp(3.5rem, 2rem + 4vw, 4.5rem)/1 var(--f-display); letter-spacing: -.03em; margin-top: 32px; }
.stars { display: flex; gap: 4px; margin-top: 12px; color: var(--red); }
.op-note { margin-top: 10px; font-size: .9375rem; color: var(--ink-md-on-paper); }
.op-fuente { margin-top: 10px; font-size: .8125rem; line-height: 1.5; color: var(--ink-lo-on-paper); max-width: 44ch; }
.op-list { margin-top: 28px; border-top: 1px solid var(--line-light); }
.op-list summary { min-height: 48px; display: flex; align-items: center; font: 600 .9375rem/1 var(--f-display); cursor: pointer; list-style: none; }
.op-list summary::-webkit-details-marker { display: none; }
.op-list li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; border-bottom: 1px solid var(--line-light); font-size: .9375rem; }
.op-list li a:hover { color: var(--red); }
.op-list li .mono { font-family: var(--f-display); font-weight: 600; }
.reviews { display: grid; gap: 16px; }
.review { background: #fff; border: 1px solid rgba(18, 18, 20, .08); border-radius: var(--r-md); padding: 28px; box-shadow: var(--shadow-card-light); display: grid; gap: 18px; align-content: space-between; margin: 0; }
.review .stars { margin: 0; }
.review .stars svg { width: 14px; height: 14px; }
.review blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-on-paper); }
.review.is-featured blockquote { font: italic 400 1.75rem/1.3 var(--f-serif); letter-spacing: -.01em; }
.review figcaption { display: flex; align-items: center; gap: 12px; font-size: .875rem; }
.review .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink-on-paper); color: var(--text-hi); display: grid; place-items: center; font: 600 .8125rem/1 var(--f-display); flex: none; }
.review figcaption strong { display: block; font-weight: 600; }
.review figcaption small { color: var(--ink-lo-on-paper); font-size: .8125rem; }
.review figcaption small a { text-decoration: underline; text-underline-offset: 2px; }
.review figcaption small a:hover { color: var(--red); }
.rv-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rv-centro { font: 600 var(--fs-label)/1.3 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
/* Las reseñas largas de Google se recortan; enteras en Google */
.review blockquote { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.review.is-featured blockquote { -webkit-line-clamp: 9; }
.more-reviews { justify-self: start; }
@media (min-width: 1024px) {
  .op-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .op-side { position: sticky; top: 120px; }
  .reviews { grid-template-columns: 1fr 1fr; }
  .review.is-featured { grid-row: span 2; }
  .more-reviews { display: none; }
  .review[hidden] { display: grid !important; }
}

/* ---------- Preguntas ---------- */
.preguntas { background: var(--ink-900); }
.faq-grid { display: grid; gap: 48px; }
.faq-side .label { margin-bottom: 18px; }
.faq-side .lead { margin-top: 20px; }
.invoice { margin-top: 40px; background: var(--ink-850); border: 1px solid var(--line-dark); border-radius: var(--r-md); padding: 28px; display: grid; gap: 12px; justify-items: start; }
.invoice svg { color: var(--text-md); }
.invoice h3 { font: 600 1.25rem/1.2 var(--f-display); }
.invoice p { color: var(--text-md); font-size: .9375rem; }
.invoice .sel { color: var(--text-hi); user-select: all; font-weight: 500; word-break: break-all; }
.invoice-actions { display: flex; align-items: center; gap: 18px; margin-top: 6px; flex-wrap: wrap; }
.faq { border-top: 1px solid var(--line-dark); }
.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 56px; padding: 22px 0; text-align: left; font: 600 1.125rem/1.35 var(--f-display); letter-spacing: -.01em; }
.faq-q .pm { position: relative; width: 16px; height: 16px; flex: none; transition: transform .3s var(--ease-out); }
.faq-q .pm::before, .faq-q .pm::after { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 1.5px; margin-top: -.75px; background: currentColor; }
.faq-q .pm::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .pm { transform: rotate(45deg); }
.faq-a { overflow: hidden; }
.faq-a p { padding: 0 0 24px; color: var(--text-md); max-width: 64ch; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 4fr 7fr; gap: 80px; align-items: start; } .faq-side { position: sticky; top: 120px; } .faq-q { font-size: 1.25rem; } }

/* ---------- Contacto ---------- */
.contacto { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; padding: 96px 0; }
.contact-media { position: absolute; inset: 0; z-index: -1; background: #3a0400; }
.contact-media video { position: absolute; inset: 0; }
.contact-scrim { position: absolute; inset: 0; background: rgba(10, 10, 11, .3); z-index: 1; }
.contact-inner { position: relative; z-index: 2; }
.contact-inner .label { color: rgba(255, 255, 255, .8); margin-bottom: 18px; }
.contact-inner .h1 { color: #fff; max-width: 12ch; }
.contact-inner .lead { color: rgba(255, 255, 255, .92); margin-top: 20px; max-width: 560px; }
.contact-ctas { display: grid; gap: 12px; margin-top: 36px; }
.contact-ctas .btn { min-height: 52px; }
.contact-note { margin-top: 24px; font-size: .875rem; color: rgba(244, 242, 238, .85); }
@media (min-width: 700px) { .contact-ctas { display: flex; flex-wrap: wrap; } }
@media (min-width: 1024px) { .contacto { min-height: min(100vh, 900px); } }

/* ---------- Footer ---------- */
.footer { position: relative; background: var(--ink-950); padding: 96px 0 calc(64px + env(safe-area-inset-bottom)); overflow: hidden; border-top: 1px solid var(--line-dark); }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; }
.foot-brand img { height: 52px; width: auto; }
.foot-brand p { color: var(--text-md); max-width: 36ch; font-size: .9375rem; }
.social { display: flex; gap: 8px; }
.footer .label { margin-bottom: 16px; }
.foot-links { display: grid; gap: 10px; justify-items: start; }
.foot-links a, .foot-links button { font-size: .9375rem; color: var(--text-md); transition: color .2s; text-align: left; min-height: 28px; }
.foot-links a:hover, .foot-links button:hover { color: var(--text-hi); }
.foot-links .foot-pronto { font-size: .9375rem; color: var(--text-lo); min-height: 28px; }
.legal { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: .8125rem; color: var(--text-lo); position: relative; z-index: 1; }
.legal a:hover { color: var(--text-hi); }
.wordmark { position: absolute; left: 50%; bottom: -.18em; transform: translateX(-50%); font: 700 22vw/1 var(--f-display); letter-spacing: -.05em; color: rgba(244, 242, 238, .04); white-space: nowrap; pointer-events: none; user-select: none; }
@media (min-width: 1024px) { .footer { padding: 120px 0 40px; } .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; } .foot-brand { grid-column: auto; } .wordmark { font-size: 19vw; } }

/* ---------- Selector de centro ---------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgba(5, 5, 6, .6); display: flex; align-items: flex-end; opacity: 0; transition: opacity .3s; }
.sheet.is-open { opacity: 1; }
.sheet-panel { width: 100%; max-height: 88svh; display: flex; flex-direction: column; background: var(--ink-900); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-pop); transform: translateY(100%); transition: transform .42s var(--ease-out); padding-bottom: env(safe-area-inset-bottom); }
.sheet.is-open .sheet-panel { transform: none; }
.sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); margin: 10px auto 0; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 8px 20px; }
.sheet-head h2 { font: 600 1.25rem/1.2 var(--f-display); }
.sheet-serv { margin: 0 20px 8px; }
.sheet-list { overflow-y: auto; padding: 0 12px 16px; overscroll-behavior: contain; }
.sheet-group { font: 600 var(--fs-label)/1.4 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text-lo); padding: 16px 8px 6px; }
.sheet-opt { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 10px 8px; border-radius: 8px; text-align: left; }
.sheet-opt:hover, .sheet-opt:focus-visible, .sheet-opt[aria-selected="true"] { background: var(--ink-800); }
.sheet-opt strong { display: block; font: 600 1rem/1.3 var(--f-text); }
.sheet-opt small { display: block; font-size: .875rem; color: var(--text-md); }
.sheet-opt .when { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet-opt .when::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.sheet-opt .when.is-wa::before, .sheet-opt .when.is-none::before { background: var(--text-lo); }
@media (min-width: 1024px) {
  .sheet { background: transparent; align-items: flex-start; justify-content: flex-end; padding: calc(var(--nav-h) + 8px) var(--gutter) 0; pointer-events: none; }
  .sheet-panel { width: 400px; max-height: 560px; border-radius: var(--r-lg); transform: translateY(-6px); transition: transform .2s ease; pointer-events: auto; border: 1px solid var(--line-dark); }
  .sheet-grip { display: none; }
}

/* ---------- Diálogo de reserva ---------- */
.booking { position: fixed; inset: 0; z-index: var(--z-dialog); background: rgba(5, 5, 6, .78); display: flex; align-items: flex-end; opacity: 0; transition: opacity .3s; }
.booking.is-open { opacity: 1; }
.booking-panel { width: 100%; height: 100dvh; display: flex; flex-direction: column; background: var(--ink-900); transform: translateY(100%); transition: transform .48s var(--ease-out); overflow: hidden; }
.booking.is-open .booking-panel { transform: none; }
.bk-side { background: var(--ink-950); padding: calc(12px + env(safe-area-inset-top)) 20px 12px; border-bottom: 1px solid var(--line-dark); flex: none; }
.bk-photo, .bk-typo { display: none; }
.bk-side-body .label { display: none; }
.bk-side h2 { font: 600 1.25rem/1.25 var(--f-display); letter-spacing: -.01em; padding-right: 48px; }
.bk-more { font-size: .875rem; color: var(--text-md); text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.bk-info { display: none; gap: 8px; font-size: .9375rem; color: var(--text-md); padding: 8px 0 4px; }
.bk-info.is-open { display: grid; }
.bk-info .mono { color: var(--text-hi); font-size: .875rem; }
.bk-access { font-size: .875rem; }
.bk-links { display: flex; gap: 18px; flex-wrap: wrap; }
.bk-oz { display: flex; align-items: center; gap: 10px; font-size: .875rem; }
.bk-demo { margin-top: 10px; font-size: .75rem; color: var(--text-md); border: 1px dashed var(--field-border); border-radius: 6px; padding: 8px 10px; }
.bk-main { flex: 1; overflow-y: auto; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overscroll-behavior: contain; }
.bk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.bk-top [data-close-booking] { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px; }
.bk-steps { display: flex; gap: 14px; font: 600 .75rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-lo); position: relative; padding-bottom: 12px; }
.bk-steps li { display: flex; align-items: center; gap: 6px; }
.bk-steps span { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--field-border); display: grid; place-items: center; font-size: .6875rem; }
.bk-steps .is-active { color: var(--text-hi); }
.bk-steps .is-active span { border-color: var(--red-signal); background: var(--red); color: #fff; }
.bk-steps .is-done span { background: var(--text-hi); color: var(--ink-950); border-color: var(--text-hi); }
.bk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.bk-view h3 { font: 600 1.375rem/1.2 var(--f-display); letter-spacing: -.01em; }
.bk-view h3:focus { outline: none; }
.bk-head .mono { font-size: .875rem; color: var(--text-md); }
.days-wrap { display: flex; align-items: center; gap: 8px; }
.days-arrow { display: none; }
.days { flex: 1; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; width: 64px; height: 84px; border-radius: var(--r-sm); border: 1px solid var(--field-border); display: grid; place-content: center; gap: 2px; text-align: center; scroll-snap-align: start; transition: border-color .2s, background-color .2s; }
.day:hover:not([aria-disabled="true"]) { border-color: var(--text-hi); }
.day-w, .day-m { font: 600 .6875rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--text-md); }
.day-n { font: 600 1.5rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.day.is-sel { background: var(--red); border-color: var(--red); color: #fff; }
.day.is-sel .day-w, .day.is-sel .day-m { color: rgba(255, 255, 255, .85); }
.day[aria-disabled="true"], .day:disabled { opacity: .35; cursor: not-allowed; }
.slots-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 26px 0 12px; }
.slots-head h4 { font: 600 .75rem/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text-lo); }
.slots-head span { font-size: .875rem; color: var(--text-md); }
.slots { display: grid; gap: 18px; }
.slot-group p { font: 600 .6875rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-lo); margin-bottom: 8px; }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { min-height: 48px; border-radius: var(--r-xs); border: 1px solid var(--field-border); font: 500 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; transition: border-color .2s, background-color .2s; }
.slot:hover { border-color: var(--text-hi); }
.slot.is-sel { background: var(--red); border-color: var(--red); color: #fff; }
.slot.skeleton { border-color: transparent; background: var(--ink-800); animation: pulse 1.2s ease-in-out infinite; }
.slots-empty { color: var(--text-md); font-size: .9375rem; }
.slots-empty a, .link-btn { color: var(--text-hi); text-decoration: underline; text-underline-offset: 3px; }
.bk-foot { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 24px -20px calc(-24px - env(safe-area-inset-bottom)); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--ink-900); border-top: 1px solid var(--line-dark); display: grid; gap: 10px; }
.bk-sel { font-size: .9375rem; color: var(--text-md); }
.bk-sel strong { color: var(--text-hi); font-weight: 600; }
.bk-wiwi { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-md); margin-top: 8px; }
.bk-wiwi img, .bk-ask img { width: 24px; height: 24px; border-radius: 50%; }
.bk-summary { display: flex; gap: 12px; align-items: center; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line-dark); border-radius: var(--r-md); background: var(--ink-850); font-size: .9375rem; color: var(--text-md); }
.bk-summary strong { color: var(--text-hi); }
.bk-summary svg { color: var(--red-signal); flex: none; }
.bk-summary .link { margin-left: auto; font-size: .875rem; }
.err-summary { border: 1px solid var(--error); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 16px; font-size: .9375rem; color: var(--text-hi); }
.err-summary ul { margin-top: 6px; display: grid; gap: 4px; }
.err-summary a { color: var(--error); text-decoration: underline; }
.form-grid { display: grid; gap: 18px; }
/* Páginas Cancelar tu cita y Solicitar factura (sobre papel) */
.cx { max-width: 560px; }
.cx-form { display: grid; gap: 20px; }
.cx-form[hidden] { display: none; }
.cx-campo label { display: block; margin-bottom: 6px; font: 600 .9375rem/1.3 var(--f-text); color: var(--ink-on-paper); }
.cx-campo input { width: 100%; min-height: 52px; padding: 0 14px; border: 1px solid rgba(18, 18, 20, .28); border-radius: var(--r-md); background: #fff; font: 500 1rem/1.2 var(--f-text); color: var(--ink-on-paper); }
.cx-campo input:focus-visible { outline: 2px solid var(--red-signal); outline-offset: 2px; }
#cxRef { text-transform: uppercase; letter-spacing: .04em; }
#cxRef::placeholder { text-transform: none; letter-spacing: 0; }
.cx-ayuda { margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: var(--ink-lo-on-paper); }
.cx-form .btn { justify-self: start; }
.cx-estado { margin-top: 20px; padding: 14px 16px; border-radius: var(--r-md); font-size: .9375rem; line-height: 1.5; }
.cx-estado:empty { display: none; }
.cx-estado.is-ok { background: rgba(29, 106, 63, .09); color: var(--success-on-paper); }
.cx-estado.is-error { background: rgba(168, 14, 0, .07); color: var(--red); }
.cx-nota { margin-top: 24px; font-size: .9375rem; line-height: 1.55; color: var(--ink-md-on-paper); }
.cx-nota a { text-decoration: underline; text-underline-offset: 3px; }
.fx { max-width: 720px; }
.fx-form { gap: 18px; }
.fx-tit { font: 600 .6875rem/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
.fx-tit:not(:first-child) { margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--line-light); }
.fx-opc { font-weight: 400; color: var(--ink-lo-on-paper); }
.cx-campo select { width: 100%; min-height: 52px; padding: 0 40px 0 14px; border: 1px solid rgba(18, 18, 20, .28); border-radius: var(--r-md); font: 500 1rem/1.2 var(--f-text); color: var(--ink-on-paper);
  appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23121214' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.cx-campo select:focus-visible { outline: 2px solid var(--red-signal); outline-offset: 2px; }
.cx-campo [aria-invalid="true"] { border-color: var(--red); }
#fxRef, #fxMatricula, #fxNif { text-transform: uppercase; }
#fxRef::placeholder, #fxMatricula::placeholder, #fxNif::placeholder { text-transform: none; }
.fx-error { margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: var(--red); }
.fx-error:empty { display: none; }
.fx-listo p + p { margin-top: 6px; }
.fx-listo a { text-decoration: underline; text-underline-offset: 3px; }
.fx-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fx-acciones .btn { color: var(--ink-on-paper); }
@media (min-width: 640px) {
  .fx-form { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .fx-form .fx-tit, .fx-form .fx-ancho { grid-column: 1 / -1; }
  .fx-form .fx-ancho.btn { justify-self: start; }
}
/* Matrícula: en mayúsculas al escribir; la nota del servicio ocupa toda la fila */
#fMatricula { text-transform: uppercase; }
#fMatricula::placeholder { text-transform: none; }
#bkForm .bk-serv-nota { grid-column: 1 / -1; }
@media (max-width: 767px) {
  /* en móvil, marca y matrícula comparten fila para que el formulario quepa sin desplazarse */
  #bkForm .form-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  #bkForm .form-grid > .field:not(.field-marca):not(.field-matricula) { grid-column: 1 / -1; }
}
.bk-serv-nota { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--line-dark); border-radius: var(--r-md); background: var(--ink-850); font-size: .875rem; line-height: 1.5; color: var(--text-md); }
.bk-serv-nota strong { color: var(--text-hi); }
.bk-serv-nota svg { color: var(--red-signal); flex: none; margin-top: 2px; }
.field label { display: block; font: 500 .875rem/1.3 var(--f-text); color: var(--text-md); margin-bottom: 8px; }
.tel-row { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
.tel-row select { padding-right: 24px; font-size: 15px; }
.hint { font-size: .8125rem; color: var(--text-lo); margin-top: 6px; }
.hint strong { color: var(--text-hi); }
.error { font-size: .8125rem; color: var(--error); margin-top: 6px; display: flex; gap: 6px; }
.error:empty { display: none; }
.error:not(:empty)::before { content: '!'; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font-size: .6875rem; font-weight: 700; flex: none; }
.field.has-error input, .field.has-error select { border-color: var(--error); }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; font-size: .875rem; color: var(--text-md); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: none; border: 1px solid var(--field-border); border-radius: 4px; margin: 0; background: var(--ink-800); display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--red); border-color: var(--red); }
.check input:checked::after { content: ''; width: 6px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(45deg); }
.check a { color: var(--text-hi); text-decoration: underline; }
.bk-actions { display: grid; gap: 14px; justify-items: center; margin-top: 22px; }
.bk-actions .link { color: var(--text-md); min-height: 32px; }
.bk-done { display: grid; justify-items: center; text-align: center; gap: 14px; padding-top: 12px; }
/* Wiwi en la confirmación: sube desde abajo con fundido y salta (el salto lo hace js/booking.js). --dh: alto de la imagen;
   el margen negativo quita el aire transparente de encima de la antena (el canvas lo usa para el salto) */
.done-wiwi { --dh: clamp(150px, 24svh, 210px); position: relative; margin-bottom: -4px; }
.done-wiwi img { position: relative; display: block; height: var(--dh); width: auto; max-width: none; margin-top: calc(var(--dh) * -.0625); }
.bk-done:not([hidden]) .done-wiwi { animation: doneWiwi .62s var(--ease-out) both; }
@keyframes doneWiwi { from { opacity: 0; transform: translateY(32px); } }
.done-mark { color: var(--text-hi); flex: none; }
.done-mark circle { stroke-dasharray: 82; stroke-dashoffset: 82; animation: draw .6s .25s var(--ease-out) forwards; }
.done-mark path { stroke-dasharray: 18; stroke-dashoffset: 18; animation: draw .45s .6s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.bk-done h3 { font-size: 1.75rem; display: inline-flex; align-items: center; gap: 10px; }
.bk-done > p { color: var(--text-md); max-width: 44ch; }
.done-card { width: 100%; max-width: 440px; border-top: 1px solid var(--line-dark); text-align: left; }
.done-card div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); font-size: .9375rem; }
.done-card span { color: var(--text-md); }
.done-card strong { text-align: right; font-weight: 600; }
.done-actions { display: grid; gap: 10px; width: 100%; max-width: 440px; }
.bk-ask { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.bk-done .link { color: var(--text-md); }
@media (min-width: 1024px) {
  .booking { align-items: center; justify-content: center; }
  .booking-panel { flex-direction: row; width: min(1040px, 90vw); height: min(720px, 88vh); border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--shadow-pop); transform: translateY(24px) scale(.98); opacity: 0; transition: transform .42s var(--ease-out), opacity .42s var(--ease-out); }
  .booking.is-open .booking-panel { transform: none; opacity: 1; }
  .bk-side { width: 360px; padding: 0; border: 0; border-right: 1px solid var(--line-dark); overflow-y: auto; }
  .bk-photo { display: block; height: 200px; }
  .bk-photo img { width: 100%; height: 100%; object-fit: cover; }
  .bk-typo { display: flex; align-items: flex-end; height: 200px; padding: 24px 28px; background: linear-gradient(160deg, #0A0A0B 20%, rgba(168, 14, 0, .35)); }
  .bk-side-body { padding: 28px; }
  .bk-side-body .label { display: block; margin-bottom: 10px; }
  .bk-side h2 { font-size: 1.75rem; padding: 0; margin-bottom: 18px; }
  .bk-more { display: none; }
  .bk-info { display: grid; gap: 12px; }
  .bk-main { padding: 28px 40px 0; }
  .bk-top { margin-bottom: 28px; }
  .bk-top [data-close-booking] { position: static; }
  .bk-steps { gap: 24px; }
  .bk-steps::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--line-dark); }
  .days-arrow { display: inline-grid; width: 40px; height: 40px; }
  .slot-grid { grid-template-columns: repeat(5, 1fr); }
  .bk-foot { bottom: 0; margin: 28px -40px 0; padding: 18px 40px; grid-template-columns: 1fr auto; align-items: center; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .bk-done { padding-top: 24px; }
  .done-actions { grid-template-columns: 1fr 1fr; }
  .done-actions .btn:first-child { grid-column: 1 / -1; }
}

/* ---------- Wiwi ---------- */
.wiwi-fab { display: none; }
.wiwi-tip { display: none; }
@media (min-width: 1024px) {
  .wiwi-fab { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-fab); display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--ink-950); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 12px 32px rgba(0, 0, 0, .45); transition: transform .2s var(--ease-out), opacity .25s; }
  .wiwi-fab img { width: 100%; height: 100%; object-fit: cover; }
  .wiwi-fab:hover { transform: scale(1.04); }
  .wiwi-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(.85); }
  .wiwi-tip:not([hidden]) { display: flex; position: fixed; right: 100px; bottom: 36px; z-index: var(--z-fab); align-items: center; gap: 4px; background: var(--text-hi); color: var(--ink-on-paper); border-radius: var(--r-pill); padding: 4px 4px 4px 16px; font-size: .875rem; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: tipIn .4s var(--ease-out); }
  .wiwi-tip-x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
  .wiwi-tip-x:hover { background: rgba(18, 18, 20, .08); }
}
@keyframes tipIn { from { opacity: 0; transform: translateY(8px); } }
.wiwi { position: fixed; inset: 0; z-index: var(--z-wiwi); display: flex; flex-direction: column; background: var(--ink-900); color: var(--text-hi); padding-bottom: env(safe-area-inset-bottom); animation: wiwiUp .44s var(--ease-out); }
@keyframes wiwiUp { from { transform: translateY(100%); } }
@media (min-width: 1024px) {
  .wiwi { inset: auto 24px 24px auto; width: 408px; height: min(640px, calc(100svh - 48px)); border-radius: var(--r-lg); border: 1px solid var(--line-dark); box-shadow: var(--shadow-pop); overflow: hidden; transform-origin: bottom right; animation: wiwiIn .36s var(--ease-out); }
}
@keyframes wiwiIn { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.wiwi-head { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: calc(10px + env(safe-area-inset-top)) 10px 10px 16px; border-bottom: 1px solid var(--line-dark); flex: none; }
@media (min-width: 1024px) { .wiwi-head { padding-top: 10px; } }
.wiwi-head div { flex: 1; display: grid; line-height: 1.3; }
.wiwi-head strong { font: 600 1rem/1.3 var(--f-display); }
.wiwi-head span { font-size: .8125rem; color: var(--text-md); display: flex; align-items: center; gap: 6px; }
.dot-on { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: inline-block; }
.wiwi-orb { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.wiwi-orb img, .msg-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.wiwi-body { flex: 1; overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
/* Ningún mensaje se encoge cuando la conversación no cabe (el cuadro de precios, con overflow:hidden, se aplastaba) */
.wiwi-body > * { flex-shrink: 0; }
/* Bienvenida: Wiwi (medio cuerpo, 2.5D o imagen) asoma sobre la línea inferior y saluda hasta el primer mensaje.
   Al escribir: Wiwi se va (fundido, baja y encoge) y después se recoge el hueco, sin saltos */
/* Dos tiempos (js/wiwi.js): .is-saliendo (Wiwi y el texto se van: opacidad y transform, en el compositor) y, ~0,35 s
   después, .is-folded (se recoge el hueco desde su alto real, --hola-h, con curva suave) */
.wiwi-hello { display: grid; grid-template-columns: 124px 1fr; align-items: end; gap: 14px; margin: -18px -14px 6px; padding: 18px 16px 0; background: radial-gradient(60% 70% at 26% 88%, rgba(168, 14, 0, .38), transparent 70%), var(--ink-950); border-bottom: 1px solid var(--line-dark); max-height: var(--hola-h, 260px); overflow: hidden; flex: none; transition: max-height .5s var(--ease-io), padding-top .5s var(--ease-io), opacity .3s ease, border-color .3s ease .2s; }
.wiwi-hello-fig { position: relative; align-self: end; transform-origin: 50% 100%; transition: opacity .34s ease, transform .4s var(--ease-out); }
.wiwi-hello-fig img { position: relative; display: block; width: 124px; height: auto; max-width: none; }
.wiwi-hello-txt { padding-bottom: 18px; transition: opacity .3s ease .08s; }
.wiwi-hello strong { display: block; font: 600 1.375rem/1.2 var(--f-display); margin-bottom: 6px; }
.wiwi-hello p { font-size: .875rem; line-height: 1.45; color: var(--text-md); }
.wiwi-hello.is-saliendo .wiwi-hello-fig, .wiwi-hello.is-folded .wiwi-hello-fig { opacity: 0; transform: translateY(16px) scale(.94); }
.wiwi-hello.is-saliendo .wiwi-hello-txt, .wiwi-hello.is-folded .wiwi-hello-txt { opacity: 0; }
.wiwi-hello.is-folded { max-height: 0; opacity: 0; padding-top: 0; border-color: transparent; }
/* Móvil con el teclado abierto y poca altura visible: bienvenida más compacta (el campo de texto sigue a la vista) */
.wiwi.is-bajo .wiwi-hello { grid-template-columns: 88px 1fr; padding-top: 12px; }
.wiwi.is-bajo .wiwi-hello-fig img { width: 88px; }
.wiwi.is-bajo .wiwi-hello strong { font-size: 1.125rem; margin-bottom: 4px; }
.wiwi.is-bajo .wiwi-hello p { font-size: .8125rem; line-height: 1.4; }
.wiwi.is-bajo .wiwi-hello-txt { padding-bottom: 12px; }
/* Reserva confirmada en el chat: al final de la conversación (a la derecha, bajo el último mensaje) se abre sitio,
   Wiwi asoma desde abajo, salta y a los ~3,5 s se va y el hueco se recoge. No tapa ningún mensaje */
.wiwi-fiesta { position: relative; flex: none; align-self: flex-end; width: 150px; height: 0; margin: -10px 2px 0 0; overflow: hidden; pointer-events: none; transition: height .5s var(--ease-io); }
.wiwi-fiesta.is-in { height: 206px; }
.wiwi-fiesta.is-out { height: 0; transition: height .46s var(--ease-io) .28s; }
.wiwi-fiesta-fig { position: absolute; left: 0; right: 0; bottom: 8px; display: grid; justify-items: center; opacity: 0; transform: translateY(110%); transition: transform .56s var(--ease-out), opacity .3s ease; }
.wiwi-fiesta-fig img { position: relative; display: block; height: 168px; width: auto; max-width: none; }
.wiwi-fiesta.is-in .wiwi-fiesta-fig { opacity: 1; transform: none; }
.wiwi-fiesta.is-out .wiwi-fiesta-fig { opacity: 0; transform: translateY(60%); transition: transform .4s cubic-bezier(.55, 0, .75, .2), opacity .3s ease .08s; }
.msg-row { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 92%; animation: msgIn .25s var(--ease-out); }
.msg-avatar { width: 28px; height: 28px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; animation: msgIn .25s var(--ease-out); }
.msg-row .msg { max-width: 100%; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg-bot { background: var(--ink-800); border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px 14px 14px 4px; color: var(--text-hi); }
.msg-user { align-self: flex-end; background: var(--red); color: #fff; border-radius: 14px 14px 4px 14px; }
.msg a { color: var(--text-hi); text-decoration: underline; text-underline-offset: 3px; }
.msg-user a { color: #fff; }
.msg strong { font-weight: 600; }
.msg-typing { display: flex; gap: 5px; padding: 14px 16px; align-self: flex-start; }
.msg-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-md); animation: blink 1.2s infinite; }
.msg-typing span:nth-child(2) { animation-delay: .2s; } .msg-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.msg-card { align-self: stretch; max-width: 100%; background: var(--ink-850); border: 1px solid var(--field-border); border-radius: 12px; padding: 16px; }
.card-title { font: 600 1rem/1.3 var(--f-display); margin-bottom: 10px; }
.msg-card dl { display: grid; gap: 0; margin-bottom: 12px; }
.msg-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-dark); font-size: .875rem; }
.msg-card dt { color: var(--text-md); }
/* Cuadro de precios de Wiwi: aviso grande arriba y «Servicio | precio» en filas */
.msg-precios { padding: 0; overflow: hidden; }
.pc-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--paper); color: var(--ink-950); }
.pc-aviso svg { flex: none; color: var(--red); margin-top: 1px; }
.pc-aviso strong { display: block; font: 600 1.0625rem/1.25 var(--f-display); letter-spacing: -.01em; }
.pc-aviso span { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.45; color: var(--ink-lo-on-paper); }
.msg-precios .card-title { padding: 14px 16px 0; margin-bottom: 4px; }
.pc-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; margin-bottom: 6px; }
.pc-tabla th[scope="row"] { text-align: left; font-weight: 500; color: var(--text-hi); padding: 11px 12px 11px 16px; line-height: 1.35; }
.pc-tabla td { padding: 11px 16px 11px 14px; text-align: right; vertical-align: middle; border-left: 1px solid var(--field-border); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-tabla tbody tr + tr > * { border-top: 1px solid var(--line-dark); }
.pc-precio { display: block; font: 600 1rem/1.2 var(--f-display); color: #fff; }
.pc-nota { display: block; max-width: 150px; margin: 3px 0 0 auto; font-size: .6875rem; line-height: 1.35; color: var(--text-md); white-space: normal; }
.pc-multi thead th { padding: 10px 8px 4px; font: 500 .6875rem/1 var(--f-text); letter-spacing: .04em; text-transform: uppercase; color: var(--text-md); text-align: right; white-space: nowrap; }
.pc-multi thead abbr { text-decoration: none; }
.pc-multi thead th:last-child { padding-right: 16px; }
.pc-multi td { padding: 11px 8px; border-left: 0; font-weight: 600; color: #fff; }
.pc-multi td:last-child { padding-right: 16px; }
.pc-multi th[scope="row"] + td { border-left: 1px solid var(--field-border); }
.pc-tabla tfoot > tr > * { border-top: 1px solid var(--field-border); }
.pc-tabla tfoot th { font-weight: 600; }
.msg-card dd { font-weight: 500; text-align: right; }
.card-check { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; color: var(--text-md); margin-bottom: 12px; }
.card-check input { width: 18px; height: 18px; accent-color: var(--red); margin: 1px 0 0; flex: none; }
.card-rgpd { margin: -4px 0 12px; font-size: .75rem; line-height: 1.5; color: var(--text-md); }
.card-rgpd a { color: var(--text-hi); text-decoration: underline; text-underline-offset: 2px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card-actions .btn { min-height: 40px; }
.card-err { color: var(--error); font-size: .8125rem; margin-top: 8px; }
.card-ok { color: var(--success); font-weight: 600; font-size: .9375rem; }
.wiwi-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 10px; scrollbar-width: none; flex: none; }
.wiwi-chips::-webkit-scrollbar { display: none; }
.wiwi-chips .chip { flex: none; min-height: 36px; font-size: .8125rem; }
.wiwi-input { display: flex; gap: 8px; padding: 10px 14px 6px; border-top: 1px solid var(--line-dark); flex: none; }
.wiwi-input input { min-height: 52px; border-radius: 12px; }
.wiwi-input button { width: 44px; height: 44px; margin-top: 4px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; transition: background-color .2s; }
.wiwi-input button:hover { background: var(--red-hover); }
.wiwi-fine { padding: 2px 14px 10px; font-size: .75rem; color: var(--text-lo); flex: none; }
.wiwi-fine a { color: var(--text-md); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Barra móvil ---------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: flex; gap: 10px; align-items: center; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: rgba(10, 10, 11, .94); border-top: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(110%); transition: transform .4s var(--ease-out); }
.mobile-bar.is-on { transform: none; }
.mb-book { flex: 1; min-height: 48px; display: grid; place-content: center; gap: 2px; line-height: 1.1; }
.mb-book small { font: 500 .6875rem/1 var(--f-text); opacity: .85; }
.mb-book small:empty { display: none; }
.mb-wa { width: 48px; height: 48px; }
.mb-wiwi { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.mb-wiwi img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .mobile-bar { display: none; } }
@media (max-width: 1023px) { .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: var(--z-toast); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; background: var(--text-hi); color: var(--ink-on-paper); border-radius: var(--r-sm); padding: 12px 18px; font-size: .875rem; font-weight: 500; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); transition: opacity .3s, transform .3s var(--ease-out); max-width: calc(100vw - 32px); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: #FFE9E6; color: #5A0F08; }
@media (min-width: 1024px) { .toast { bottom: 32px; } }

/* ---------- Animación: estados iniciales SOLO con html.anim (si falla GSAP todo queda visible) ---------- */
.anim [data-reveal] { opacity: 0; transform: translateY(24px); }
.anim [data-split]:not(.is-split) { visibility: hidden; }
.anim .shot-img[data-clip] { clip-path: inset(100% 0 0 0); }
.split-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Ajustes tras revisión en móvil ---------- */
.centros-grid > *, .serv-grid > *, .op-grid > *, .faq-grid > *, .wiwi-grid > *, .ozono-grid > *, .section-head > * { min-width: 0; }
.figure { white-space: nowrap; font-size: clamp(2.1rem, 9.5vw, 5rem); }
@media (min-width: 1024px) { .figure { font-size: var(--fs-figure); } }
/* Proceso en móvil: la franja fija llega hasta arriba (la barra de menú se oculta al bajar) */
@media (max-width: 1023px) {
  .proc-stage { top: 0; height: calc(min(46svh, 420px) + 20px + var(--nav-h)); }
  .proc-frame, .proc-stage > .proc-scrim, .proc-stage > .grain { top: calc(var(--nav-h) + 8px); }
  .proc-stories { top: calc(var(--nav-h) + 20px); }
}
/* Galería en móvil: marcos iguales para que el carrusel no deje huecos */
@media (max-width: 1023px) {
  .shot { width: min(82vw, 420px); }
  .shot-img { aspect-ratio: 4 / 3; }
  .shot-img img { height: 100%; object-fit: cover; }
}
/* Objetivos táctiles de 44 px */
.next-btn { display: inline-flex; align-items: center; min-height: 44px; }
.serv-body .link, .special .link, .como-cta .link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1023px) { .map .pin text { font-size: 21px; } }
.tar-table thead th:first-child { text-align: left; }
.proc-pinned .proc-pip { right: 260px; top: 16%; margin-top: 0; }

/* ---------- Correcciones de la revisión (móvil, horizontal y zonas seguras) ---------- */
:root { --sl: max(var(--gutter), env(safe-area-inset-left)); --sr: max(var(--gutter), env(safe-area-inset-right)); }
.container, .nav-inner { padding-left: var(--sl); padding-right: var(--sr); }
.mobile-bar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
/* Menú móvil: se puede desplazar si no cabe (horizontal) */
.mobile-menu { overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; }
.mobile-menu-foot { margin-top: auto; padding-top: 24px; }
@media (orientation: landscape) and (max-height: 500px) {
  .mobile-menu li a { font-size: 1.5rem; padding: 8px 0; }
  .mobile-menu-foot { grid-template-columns: 1fr 1fr; }
  /* Reserva en horizontal: cabecera y pie más compactos */
  .bk-foot { grid-template-columns: 1fr auto; align-items: center; padding: 8px 20px calc(8px + env(safe-area-inset-bottom)); }
  .bk-foot .btn-lg { min-height: 48px; }
  .bk-side { padding-top: 8px; padding-bottom: 8px; }
  .bk-more { display: none; }
  .day { height: 64px; }
  /* Proceso en horizontal: vídeo a la izquierda, pasos a la derecha */
  .proc-track { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .proc-stage { top: 0; height: 100svh; }
  .proc-frame, .proc-stage > .proc-scrim, .proc-stage > .grain { top: calc(var(--nav-h) + 8px); bottom: 12px; }
  .proc-cards { padding-top: 0; }
  .pcard { min-height: 100svh; }
}
/* Fotos a tamaño nativo dentro de su marco (paso 1 y salida) */
.proc-layer.native { grid-template-rows: 100%; grid-template-columns: 100%; }
.proc-layer.native img { object-fit: contain; }
/* Prefijo telefónico legible y sin zoom en iOS */
.tel-row { grid-template-columns: 136px 1fr; }
.tel-row select { font-size: 16px; padding: 0 28px 0 12px; }
/* Galería en móvil y tablet: misma altura, sin ampliar fotos por encima de su tamaño */
@media (max-width: 1023px) {
  .shot { width: auto; }
  .shot-img { aspect-ratio: auto; height: min(320px, 56svh); }
  .shot-img img { height: 100%; width: auto; max-width: 82vw; object-fit: cover; }
  .wiwi-chips .chip, .card-actions .btn { min-height: 44px; }
  .center-rating, .skip-proc, .invoice-actions .link { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-links { gap: 0; }
  .foot-links a, .foot-links button { min-height: 44px; display: inline-flex; align-items: center; }
  .foot-links .foot-pronto { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 1023px), (pointer: coarse) { .chip { min-height: 44px; } }
/* Reserva: el pie queda abajo aunque haya pocas horas */
#bkStep1:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; }
#bkStep1 .bk-foot { margin-top: auto; }
#bkStep1 .slots { margin-bottom: 24px; }
/* Tarifas a 360 px */
.tar-foot { grid-template-columns: minmax(0, 1fr); }
.tar-foot > * { min-width: 0; }
.tar-cta .btn { white-space: normal; text-align: center; max-width: 100%; }
@media (min-width: 1024px) { .tar-foot { grid-template-columns: 1.3fr 1fr; } }
.special { align-content: start; }

/* ---------- Correcciones de la revisión de diseño ---------- */
@media (min-width: 1024px) {
  /* H1 del hero siempre en dos líneas */
  .hero h1 { font-size: min(7.75rem, 8.2vw); }
  /* Galería: filas justificadas, sin ampliar ninguna foto */
  .gallery { display: flex; flex-wrap: wrap; gap: 32px 24px; columns: auto; }
  .gallery::after { content: ''; flex: 999 1 0; }
  .shot { flex: var(--r) 1 calc(var(--r) * 230px); margin: 0; width: auto; }
  .shot-img { max-width: none; aspect-ratio: var(--r); }
  .shot-img img { height: 100%; object-fit: cover; }
  /* Cómo reservar: marcadores sobre la línea */
  .steps-line { top: 0; }
  .step-mark { top: -4px; }
  /* Estudio de Wiwi: el personaje a la derecha, la tarjeta de ejemplo no lo tapa */
  .studio { justify-items: end; }
  .studio-halo { background: radial-gradient(50% 45% at 70% 62%, rgba(168, 14, 0, .32), transparent 70%); }
  .studio-floor { left: 30%; right: 0; }
}
/* Raíl del proceso legible sobre clips claros */
.proc-pinned .proc-scrim { background: radial-gradient(80% 70% at 0% 100%, rgba(10,10,11,.8), transparent 60%), linear-gradient(270deg, rgba(10,10,11,.7), transparent 32%); }
.proc-rail button { color: #B9B6B0; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.proc-pinned .proc-stage { overflow: hidden; }
/* Servicios especiales: motos con el mismo marco que las fotos */
.special-img--ic { display: grid; place-items: center; background: var(--ink-850); color: var(--text-md); border: 1px solid var(--line-dark); }
/* Footer y opiniones */
.foot-brand { align-content: start; }
.review.is-featured { align-content: start; }
.review.is-featured blockquote { font-size: clamp(1.75rem, 1.2rem + 1vw, 2.25rem); }
/* Nav transparente sin línea sobre el vídeo; contenido alineado con la rejilla */
.nav { background-repeat: no-repeat; }
.nav-inner { max-width: 1320px; }
@media (min-width: 1280px) { .brand img { height: 50px; } }
/* Páginas legales: la cabecera solo lleva el logo y «Volver a la web» */
@media (min-width: 1024px) { .lg-nav .brand img { height: 46px; } }
/* Textos pequeños: nunca por debajo de 12 px en elementos clave */
.phase, .proc-pip span, .pcard-step { font-size: .75rem; }
.day-w, .day-m, .slot-group p { font-size: .75rem; }
.tar-cta .link, #copyEmail { font-size: .9375rem; }
/* Ozono: la leyenda no roza el anillo y el halo se funde */
.oz-mol-wrap { gap: 18px; }
.ozono { background: radial-gradient(45% 50% at 78% 50%, rgba(120, 185, 230, .09), transparent 70%), var(--ink-950); }
@media (max-width: 1023px) { .ozono { background: radial-gradient(70% 32% at 50% 20%, rgba(120, 185, 230, .1), transparent 70%), var(--ink-950); } }
/* Mapa: los países vecinos se funden en los bordes */
/* Mapa: los países vecinos se funden en los bordes (máscara dentro del SVG, solo en la tierra: los puntos siempre nítidos) */

/* ---------- Correcciones de accesibilidad ---------- */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
@media (max-width: 1023px) { html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
/* Menú legible sobre el vídeo del hero */
.nav:not(.is-scrolled) { background-image: linear-gradient(180deg, rgba(10,10,11,.75), rgba(10,10,11,.35) 70%, rgba(10,10,11,0)); }
.nav:not(.is-scrolled) .nav-links a { color: var(--text-hi); }
/* Raíl del proceso sobre un velo oscuro: legible con cualquier fotograma */
.proc-pinned .proc-rail { padding: 16px 20px; border-radius: 12px; background: rgba(10, 10, 11, .8); }
.proc-rail button { color: var(--text-md); }
/* Columnas fijas que no caben en portátiles bajos: dejan de ser fijas */
@media (min-width: 1024px) and (max-height: 1000px) { .op-side { position: static; } }
/* Buscador de tamaño con contraste suficiente */
.size-row input { border-color: #7A7772; }
.size-row input::placeholder { color: var(--ink-lo-on-paper); }

/* ---------- Aviso de privacidad y cookies, primera capa (js/aviso.js) ----------
   Abajo, sin bloquear la web. En móvil sube por encima de la barra de reserva cuando está a la vista; en escritorio
   va a la izquierda (el botón de Wiwi está a la derecha). Por debajo del menú, el chat, el selector y la reserva.
   «Rechazar» y «Aceptar» tienen exactamente el mismo estilo y tamaño; «Configurar» es secundario */
.aviso { position: fixed; z-index: 48; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 12px; padding: 14px 14px 12px 16px; background: rgba(17, 17, 19, .9); border: 1px solid var(--line-dark-strong); border-radius: var(--r-md); box-shadow: 0 24px 64px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); color: var(--text-md); font-size: .8125rem; line-height: 1.5; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), bottom .4s var(--ease-out), background-color .35s ease, border-color .35s ease, box-shadow .35s ease, color .35s ease, visibility 0s linear .6s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .aviso { background: rgba(17, 17, 19, .98); } }
.aviso.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.aviso.is-tapado { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.aviso.sobre-barra { bottom: calc(76px + env(safe-area-inset-bottom)); }
.aviso-cuerpo { min-width: 0; }
.aviso-tit { margin-bottom: 4px; color: var(--text-lo); transition: color .35s ease; }
.aviso-txt { min-width: 0; text-wrap: pretty; }
.aviso-txt a { color: var(--text-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.aviso-txt a:hover { text-decoration-color: var(--red-signal); }
.aviso-acciones { display: flex; align-items: center; gap: 8px; }
.aviso-config { flex: none; min-height: 44px; margin: 0 auto 0 -8px; padding: 0 8px; border-radius: var(--r-xs); font: 600 .875rem/1 var(--f-display); color: var(--text-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(244, 242, 238, .45); transition: text-decoration-color .2s, color .2s; }
.aviso-config:hover { text-decoration-color: var(--red-signal); }
.aviso-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 14px; background: var(--text-hi); color: var(--ink-on-paper); }
.aviso-btn:hover { background: #fff; }
.aviso-btn:focus-visible, .aviso-config:focus-visible { outline: 2px solid var(--red-signal); outline-offset: 3px; }
/* Sobre las secciones de papel (js/aviso.js pone .is-claro): tarjeta clara, como el resto de esa sección */
.aviso.is-claro { background: rgba(255, 255, 255, .92); border-color: rgba(18, 18, 20, .10); box-shadow: 0 18px 48px rgba(18, 18, 20, .16), 0 2px 6px rgba(18, 18, 20, .06); color: var(--ink-md-on-paper); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .aviso.is-claro { background: #fff; } }
.aviso.is-claro .aviso-tit { color: var(--ink-lo-on-paper); }
.aviso.is-claro .aviso-txt a { color: var(--ink-on-paper); text-decoration-color: rgba(18, 18, 20, .38); }
.aviso.is-claro .aviso-txt a:hover, .aviso.is-claro .aviso-config:hover { text-decoration-color: var(--red); }
.aviso.is-claro .aviso-config { color: var(--ink-on-paper); text-decoration-color: rgba(18, 18, 20, .38); }
.aviso.is-claro .aviso-btn { background: var(--ink-on-paper); color: var(--text-hi); }
.aviso.is-claro .aviso-btn:hover { background: #2a2a2e; }
.aviso.is-claro :focus-visible, .aviso.is-claro .aviso-btn:focus-visible, .aviso.is-claro .aviso-config:focus-visible { outline-color: var(--red); }
@media (min-width: 600px) { .aviso-btn { flex: none; min-width: 120px; padding: 0 22px; } }
@media (min-width: 1024px) {
  /* En escritorio, texto a la izquierda y los tres botones a la derecha: así queda bajo (≈135 px) y no tapa el botón
     principal de la portada ni en portátiles de 720 px de alto */
  .aviso { left: max(24px, env(safe-area-inset-left)); right: auto; bottom: 24px; width: min(880px, calc(100vw - 192px)); grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 28px; padding: 14px 16px 14px 22px; font-size: .875rem; }
  .aviso-config { margin: 0 4px 0 0; }
  /* La barra de reserva móvil no existe en escritorio: el aviso no sube aunque la web la marque como activa */
  .aviso.sobre-barra { bottom: 24px; }
  /* En escritorio el aviso llegaría hasta el indicador «Desliza» del centro: mientras se ve, el indicador se aparta */
  .scroll-cue { transition: opacity .3s ease; }
  html.con-aviso .scroll-cue { opacity: 0; }
}
/* En pantallas de 1024 a 1239 px la burbuja «¿Te ayudo a reservar?» de Wiwi caería encima del aviso: mientras se ve, no sale */
@media (min-width: 1024px) and (max-width: 1239px) { html.con-aviso .wiwi-tip:not([hidden]) { display: none; } }
/* Proceso fijo (escritorio): la tarjeta del paso sube lo que mide el aviso para que no le tape el texto */
@media (min-width: 1024px) {
  .proc-pinned .proc-cards { transition: bottom .5s var(--ease-out); }
  html.con-aviso .proc-pinned .proc-cards { bottom: calc(var(--aviso-h, 0px) + 48px); }
  body:has(> .aviso.is-in:not(.is-tapado)) .toast { bottom: calc(40px + var(--aviso-h, 0px)); }
}
/* Móvil en horizontal: la portada se ajusta a la pantalla para que el botón principal quede por encima del aviso */
@media (orientation: landscape) and (max-height: 500px) { html.con-aviso .hero { min-height: 100svh; } }
/* Con el aviso a la vista, lo que recibe el foco (teclado, campos al escribir en el móvil) se coloca por encima de él */
@media (max-width: 1023px) { html.con-aviso { scroll-padding-bottom: calc(92px + var(--aviso-h, 0px) + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { html.con-aviso { scroll-padding-bottom: calc(48px + var(--aviso-h, 0px)); } }
/* Los enlaces legales del pie no se parten entre dos líneas */
.legal a, .legal-btn { white-space: nowrap; }
/* «Configurar cookies» del pie: botón con el mismo aspecto que los enlaces legales (abre la segunda capa) */
.legal-btn { font: inherit; color: inherit; cursor: pointer; transition: color .2s; }
.legal-btn:hover { color: var(--text-hi); }
/* Zona de pulsación de 44 px de alto en los enlaces legales y en «Configurar cookies» sin cambiar cómo se ven: una capa
   invisible centrada en cada uno. En móvil, donde la línea se parte, cada línea mide 44 px para que no se pisen */
.legal a, .legal-btn { position: relative; }
.legal a::after, .legal-btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
@media (max-width: 1023px) { .legal { line-height: 44px; } .legal-btn { line-height: 1.65; } }
/* Mientras se ve el aviso, la portada y el pie dejan su hueco: no tapa los botones del hero ni los enlaces legales */
.hero-inner { transition: padding-bottom .5s var(--ease-out); }
@media (max-width: 1023px) {
  html.con-aviso .hero-inner { padding-bottom: calc(28px + var(--aviso-h, 0px) + env(safe-area-inset-bottom)); }
  html.con-aviso .footer { padding-bottom: max(calc(96px + env(safe-area-inset-bottom)), calc(var(--aviso-h, 0px) + 40px + env(safe-area-inset-bottom))); }
}
/* En móvil los mensajes breves (toast) salen por encima del aviso mientras se ve */
@media (max-width: 1023px) {
  body:has(> .aviso.is-in:not(.is-tapado)) .toast { bottom: calc(24px + var(--aviso-h, 0px) + env(safe-area-inset-bottom)); }
  body:has(> .aviso.is-in.sobre-barra:not(.is-tapado)) .toast { bottom: calc(88px + var(--aviso-h, 0px) + env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) {
  html.con-aviso .hero-inner { padding-bottom: max(14vh, calc(var(--aviso-h, 0px) + 56px)); }
  html.con-aviso .footer { padding-bottom: calc(var(--aviso-h, 0px) + 48px); }
}

/* Pantallas bajas con el aviso a la vista (su texto legal es largo): mientras se ve, la portada se compacta para que el
   botón principal siga a la vista y sin tapar. Al decidir, el aviso se va y la portada vuelve a ser la de siempre */
@media (max-width: 1023px) and (orientation: portrait) and (max-height: 660px) {
  html.con-aviso .hero-lead { display: none; }
  html.con-aviso .hero-inner { padding-top: calc(var(--nav-h) + 24px); }
  .aviso { gap: 10px; padding: 12px 12px 10px 14px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  html.con-aviso .hero-label { display: none; }
  html.con-aviso .hero-inner { padding-top: calc(var(--nav-h) + 16px); }
}
/* Móvil en horizontal: como en escritorio, texto a la izquierda y botones a la derecha (el aviso queda más bajo) */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) and (max-width: 1023px) {
  .aviso { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding: 12px 12px 12px 16px; }
  /* columna de botones estrecha: «Configurar» arriba y «Rechazar» | «Aceptar» debajo (mismo orden que al tabular) */
  .aviso-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  .aviso-config { grid-column: 1 / -1; justify-self: center; margin: 0; }
  .aviso-btn { min-width: 96px; padding: 0 16px; }
}

/* Casilla de aceptación (reserva y tarjeta del chat): enlaces a las condiciones y a la privacidad */
.bk-rgpd { margin-top: 14px; font-size: .75rem; line-height: 1.55; color: var(--text-md); }
.bk-rgpd strong { color: var(--text-hi); font-weight: 600; }
.bk-rgpd a { color: var(--text-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.check a, .card-check a { color: var(--text-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.check a:hover, .card-check a:hover { text-decoration-color: var(--red-signal); }

/* ---------- Página legal (condiciones.html) ---------- */
.lg-nav { position: sticky; top: 0; z-index: var(--z-nav); padding-top: env(safe-area-inset-top); background: rgba(10, 10, 11, .88); border-bottom: 1px solid var(--line-dark); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lg-nav { background: rgba(10, 10, 11, .97); } }
.lg-nav-in { height: var(--nav-h); max-width: 1320px; margin: 0 auto; padding: 0 var(--sr) 0 var(--sl); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lg-volver { min-height: 44px; padding: 0 18px 0 14px; gap: 8px; }
.lg-hero { position: relative; padding: clamp(56px, 9vw, 128px) 0 clamp(48px, 6vw, 80px); background: radial-gradient(55% 90% at 88% 0%, rgba(168, 14, 0, .26), transparent 70%), var(--ink-950); overflow: hidden; }
.lg-hero .label { margin-bottom: 18px; }
.lg-hero .h1 { font-size: clamp(2.75rem, 1.5rem + 5.4vw, 6rem); max-width: 12ch; }
.lg-hero .lead { margin-top: 24px; max-width: 54ch; }
.lg-meta { margin-top: 28px; font-size: .875rem; color: var(--text-lo); }
.lg-resumen { display: grid; margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-dark); }
.lg-resumen li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-size: .9375rem; line-height: 1.45; color: var(--text-md); }
.lg-resumen svg { flex: none; color: var(--red-signal); margin-top: 1px; }
.lg-resumen strong { display: block; font: 600 1rem/1.3 var(--f-display); color: var(--text-hi); margin-bottom: 2px; }
@media (min-width: 900px) {
  .lg-resumen { grid-template-columns: repeat(3, 1fr); }
  .lg-resumen li { padding: 24px 28px 6px 0; border-bottom: 0; }
  .lg-resumen li + li { padding-left: 28px; border-left: 1px solid var(--line-dark); }
}
.lg-body { padding: clamp(48px, 7vw, 112px) 0 clamp(72px, 9vw, 144px); }
.lg-grid { display: grid; gap: 40px; }
.lg-grid > * { min-width: 0; }
.lg-toc .label { margin-bottom: 8px; }
.lg-toc ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; border-top: 1px solid var(--line-light); }
.lg-toc li { border-bottom: 1px solid var(--line-light); }
.lg-toc a { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 8px 0; font: 500 .9375rem/1.3 var(--f-text); color: var(--ink-md-on-paper); transition: color .2s; }
.lg-toc a:hover { color: var(--ink-on-paper); }
.lg-toc a .mono { flex: none; min-width: 20px; font: 600 .75rem/1 var(--f-display); color: var(--ink-lo-on-paper); transition: color .2s; }
.lg-toc a:hover .mono { color: var(--red); }
.lg-doc { max-width: 60ch; color: var(--ink-on-paper); }
.lg-doc section { padding: 40px 0; border-top: 1px solid var(--line-light); scroll-margin-top: env(safe-area-inset-top); }
.lg-doc section:first-child { padding-top: 0; border-top: 0; }
.lg-doc section:last-child { padding-bottom: 0; }
.lg-doc h2 { display: flex; gap: 16px; align-items: baseline; margin-bottom: 18px; font: 600 clamp(1.375rem, 1.15rem + .8vw, 1.875rem)/1.2 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.lg-doc h2 .mono { flex: none; font: 600 .875rem/1 var(--f-display); letter-spacing: .04em; color: var(--red); }
.lg-doc p, .lg-doc li, .lg-doc dd { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-md-on-paper); }
.lg-doc p + p, .lg-doc p + ul, .lg-doc ul + p, .lg-doc dl + p, .lg-doc p + dl { margin-top: 16px; }
.lg-doc ul { display: grid; gap: 10px; }
.lg-doc ul li { position: relative; padding-left: 24px; }
.lg-doc ul li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 10px; height: 2px; background: var(--red); }
.lg-doc strong { font-weight: 600; color: var(--ink-on-paper); }
.lg-doc a { color: var(--ink-on-paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(18, 18, 20, .38); transition: text-decoration-color .2s; }
.lg-doc a:hover { text-decoration-color: var(--red); }
.lg-doc :focus-visible, .lg-toc :focus-visible { outline-color: var(--red); }
.lg-datos { border-top: 1px solid var(--line-light); }
.lg-datos div { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line-light); }
.lg-datos dt { font: 600 var(--fs-label)/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
.lg-doc .lg-datos dd { color: var(--ink-on-paper); overflow-wrap: anywhere; }
.lg-centros { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .lg-datos div { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: baseline; }
  .lg-doc .lg-centros { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.lg-fecha { margin-top: 28px; padding: 18px 20px; border-radius: var(--r-md); background: var(--card-light); border: 1px solid rgba(18, 18, 20, .08); box-shadow: var(--shadow-card-light); }
.lg-doc .lg-fecha { font-size: .9375rem; line-height: 1.6; }
@media (min-width: 1024px) {
  .lg-grid { grid-template-columns: 240px minmax(0, 1fr); gap: clamp(56px, 7vw, 112px); align-items: start; }
  .lg-toc { position: sticky; top: calc(var(--nav-h) + 40px); }
  .lg-toc ol { grid-template-columns: 1fr; }
  .lg-toc a { min-height: 44px; }
}
.lg .foot-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .lg .foot-grid { grid-template-columns: 2fr 1fr 1fr; } }
@media (max-width: 1023px) { .lg .footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } }
.legal a[aria-current="page"] { color: var(--text-hi); }

/* ---------- Preferencias de cookies: segunda capa (diálogo que crea js/aviso.js) ----------
   Hoja inferior en móvil y ventana centrada desde 768 px. Por encima de todo salvo los mensajes breves (toast) */
.ck { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 5, 6, .64); opacity: 0; transition: opacity .3s ease; }
.ck.is-open { opacity: 1; }
.ck-panel { position: relative; width: 100%; max-height: min(92svh, 780px); display: flex; flex-direction: column; background: var(--ink-900); color: var(--text-hi); border: 1px solid var(--line-dark); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: var(--shadow-pop); transform: translateY(28px); transition: transform .45s var(--ease-out); padding-bottom: env(safe-area-inset-bottom); }
.ck.is-open .ck-panel { transform: none; }
.ck-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 12px 16px 22px; border-bottom: 1px solid var(--line-dark); }
.ck-head .label { margin-bottom: 8px; }
.ck-head h2 { font: 600 1.5rem/1.15 var(--f-display); letter-spacing: -.02em; }
.ck-head h2:focus { outline: none; }
.ck-head h2:focus-visible { outline: 2px solid var(--red-signal); outline-offset: 4px; }
.ck-x { margin-top: -4px; }
.ck-x:focus-visible { outline-offset: 0; }
.ck-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 6px; }
.ck-intro { font-size: .9375rem; line-height: 1.55; color: var(--text-md); max-width: 58ch; }
.ck-cats { margin-top: 16px; border-top: 1px solid var(--line-dark); }
.ck-cat { padding: 12px 0 16px; border-bottom: 1px solid var(--line-dark); }
.ck-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.ck-nombre { flex: 1; min-width: 0; font: 600 1.0625rem/1.3 var(--f-display); letter-spacing: -.01em; }
.ck-nombre label { display: flex; align-items: center; min-height: 48px; cursor: pointer; }
.ck-siempre { flex: none; padding: 7px 12px; border: 1px solid var(--line-dark-strong); border-radius: var(--r-pill); font: 600 .75rem/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-md); }
.ck-desc { margin-top: 2px; font-size: .875rem; line-height: 1.6; color: var(--text-md); max-width: 58ch; }
.ck-mas { margin: 14px 0 12px; font-size: .875rem; color: var(--text-md); }
.ck-mas a { color: var(--text-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.ck-mas a:hover { text-decoration-color: var(--red-signal); }
/* Interruptor: casilla nativa con role="switch", zona táctil de 56 × 48 px; encendido en claro, como los botones */
.ck-switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 56px; height: 48px; margin: 0 -2px 0 0; background: none; border: 0; border-radius: var(--r-pill); cursor: pointer; }
.ck-switch::before { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 30px; margin-top: -15px; border-radius: var(--r-pill); background: var(--ink-800); border: 1px solid var(--field-border); transition: background-color .2s, border-color .2s; }
.ck-switch::after { content: ''; position: absolute; left: 7px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--text-md); transition: transform .25s var(--ease-out), background-color .2s; }
.ck-switch:checked::before { background: var(--text-hi); border-color: var(--text-hi); }
.ck-switch:checked::after { transform: translateX(22px); background: var(--ink-950); }
.ck-switch:hover::before { border-color: var(--text-hi); }
.ck-switch:focus-visible { outline: 2px solid var(--red-signal); outline-offset: 0; }
.ck-foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--line-dark); }
.ck-btn { min-height: 48px; padding: 0 14px; }
.ck-guardar { grid-column: 1 / -1; border: 1px solid rgba(255, 255, 255, .28); color: var(--text-hi); }
.ck-guardar:hover { border-color: var(--text-hi); background: rgba(255, 255, 255, .06); }
.ck-decide { background: var(--text-hi); color: var(--ink-on-paper); }
.ck-decide:hover { background: #fff; }
@media (min-width: 768px) {
  .ck { align-items: center; padding: 24px; }
  .ck-panel { width: min(600px, 100%); max-height: min(88vh, 780px); border-bottom: 1px solid var(--line-dark); border-radius: var(--r-lg); padding-bottom: 0; transform: translateY(14px) scale(.985); }
  .ck-head { padding: 26px 16px 18px 28px; }
  .ck-head h2 { font-size: 1.75rem; }
  .ck-body { padding: 20px 28px 6px; }
  .ck-foot { grid-template-columns: auto 1fr 1fr; padding: 16px 28px 22px; }
  .ck-guardar { grid-column: auto; padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) { .ck, .ck-panel, .ck-switch::after { transition: none; } }
/* Pantallas muy bajas (móvil en horizontal con las barras del navegador, zoom grande): se desplaza todo el panel y no solo
   la lista, para que las categorías no queden en una franja de pocos píxeles entre la cabecera y los botones */
@media (max-height: 360px) {
  .ck-panel { overflow-y: auto; overscroll-behavior: contain; }
  .ck-body { flex: none; overflow: visible; }
}
/* Alto contraste de Windows: los botones de decidir conservan su borde y el interruptor dibuja su estado con los colores
   del sistema (sin esto el círculo desaparece y «activado» y «desactivado» se ven iguales) */
@media (forced-colors: active) {
  .aviso-btn, .ck-decide { border: 1px solid; }
  .ck-switch { forced-color-adjust: none; }
  .ck-switch::before { background: Canvas; border-color: CanvasText; }
  .ck-switch:hover::before { border-color: Highlight; }
  .ck-switch::after { background: CanvasText; }
  .ck-switch:checked::before { background: Highlight; border-color: Highlight; }
  .ck-switch:checked::after { background: HighlightText; }
  .ck-switch:focus-visible { outline-color: CanvasText; }
}

/* ---------- Política de cookies (cookies.html): tabla del almacenamiento técnico, botón y estado de tu elección ---------- */
.lg-tabla-wrap { margin-top: 20px; }
.lg-tabla { width: 100%; border-collapse: collapse; }
.lg-tabla thead th { text-align: left; vertical-align: bottom; padding: 0 14px 10px 0; border-bottom: 1px solid var(--line-light); font: 600 .6875rem/1.3 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
.lg-tabla tbody th, .lg-tabla td { text-align: left; vertical-align: top; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line-light); }
.lg-tabla tbody th { font: 600 .875rem/1.5 var(--f-display); color: var(--ink-on-paper); white-space: nowrap; }
.lg-tabla td { font-size: .9375rem; line-height: 1.55; color: var(--ink-md-on-paper); }
.lg-tabla td:last-child { min-width: 9.5em; }
.lg-empresas tbody th { white-space: normal; }
.lg-empresas .lg-ciudad { display: block; margin-top: 2px; font: 400 .8125rem/1.4 var(--f-text); color: var(--ink-lo-on-paper); }
.lg-empresas td:last-child { min-width: 0; white-space: nowrap; }
.lg-tabla-wrap + .lg-nota, .lg-nota + .lg-nota { margin-top: 12px; }
.lg-doc .lg-nota { margin-top: 16px; font-size: .875rem; line-height: 1.6; }
.lg-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.lg-accion + p { margin-top: 22px; }
.lg-doc .lg-estado { font-size: .9375rem; line-height: 1.5; color: var(--ink-on-paper); }
.lg-estado:empty { display: none; }
@media (max-width: 767px) {
  /* En móvil cada fila es una ficha: nombre, para qué sirve y, debajo, tipo y duración */
  .lg-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lg-tabla, .lg-tabla tbody { display: block; }
  .lg-tabla tr { display: grid; grid-template-columns: auto 1fr; column-gap: 28px; row-gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line-light); }
  .lg-tabla tbody tr:first-child { border-top: 1px solid var(--line-light); }
  .lg-tabla tbody th, .lg-tabla td { display: block; padding: 0; border: 0; }
  .lg-tabla tbody th, .lg-tabla td:first-of-type { grid-column: 1 / -1; }
  .lg-tabla tbody th { white-space: normal; overflow-wrap: anywhere; }
  .lg-tabla td:last-child { min-width: 0; }
  .lg-tabla td:not(:first-of-type)::before { content: attr(data-col); display: block; margin-bottom: 2px; font: 600 .6875rem/1.3 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-lo-on-paper); }
}

/* App de WeWash (sección oculta hasta que haya enlace o archivo en WEWASH_CONFIG.APP) */
.app-sec { background: radial-gradient(50% 70% at 15% 50%, rgba(168, 14, 0, .16), transparent 70%), var(--ink-950); }
.app-grid { display: grid; gap: 28px; align-items: center; }
.app-icono { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.app-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.app-nota { max-width: 560px; margin-top: 16px; font-size: .875rem; line-height: 1.55; color: var(--text-lo); }
@media (min-width: 1024px) { .app-grid { grid-template-columns: auto 1fr; gap: 56px; } .app-icono { width: 168px; height: 168px; border-radius: 38px; } }

/* Página 404 */
.e404-hero { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; }
.e404-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.e404-ayuda { margin-top: 28px; font-size: .9375rem; color: var(--text-md); }
.e404-ayuda a { color: var(--text-hi); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) { .e404-acciones .btn { width: 100%; } }
.foot-brand > a { display: inline-block; }

/* El lienzo de la molécula es algo más ancho que su caja (para que el brillo no se corte): la sección recorta en horizontal */
.ozono { overflow-x: hidden; overflow-x: clip; }

/* ---------- Reserva: calendario del mes y horas (sustituye a la tira de días y la barra de pasos) ---------- */
.bk-sub { margin-top: 2px; padding-right: 48px; font-size: .8125rem; line-height: 1.4; color: var(--text-md); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bk-top { justify-content: flex-end; margin-bottom: 8px; }
.bk-demo { margin-top: 8px; padding: 0; border: 0; font-size: .75rem; line-height: 1.4; color: var(--text-lo); text-align: center; grid-column: 1 / -1; }
.bk-elegir { display: grid; gap: 22px; margin-top: 18px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cal-mes { font: 600 1.0625rem/1 var(--f-display); letter-spacing: -.01em; color: var(--text-hi); }
.cal-nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text-hi); transition: background-color .2s, opacity .2s; }
.cal-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.cal-nav:disabled { opacity: .25; cursor: default; }
.cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; justify-items: center; }
.cal-sem span { padding: 8px 0 6px; font: 600 .6875rem/1 var(--f-display); letter-spacing: .08em; color: var(--text-lo); }
.cal-dias .day, .cal-fuera { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 500 .9375rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cal-dias .day { flex: none; border: 0; gap: 0; color: var(--text-hi); cursor: pointer; transition: background-color .15s, color .15s; }
.cal-dias .day:hover:not([aria-disabled="true"]):not(.is-sel) { background: rgba(255, 255, 255, .09); }
.cal-dias .day[aria-disabled="true"] { color: var(--text-lo); opacity: .55; cursor: not-allowed; text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-dias .day.is-hoy::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red-signal); }
.cal-dias .day.is-sel { background: var(--red); color: #fff; font-weight: 600; }
.cal-dias .day.is-sel::after { background: #fff; }
.cal-fuera { color: var(--text-lo); opacity: .3; }
.bk-horas .slots-head { margin: 0 0 12px; }
.bk-horas .slots-head h4 { font: 600 1rem/1.3 var(--f-display); letter-spacing: -.01em; text-transform: none; color: var(--text-hi); }
.slot { border-radius: var(--r-pill); border-color: rgba(255, 255, 255, .16); min-height: 46px; font-weight: 500; }
.slot:hover:not(.is-sel) { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .04); }
.slot.skeleton { border-radius: var(--r-pill); }
.slot-group p { margin-bottom: 10px; }
.bk-actions .bk-demo { margin-top: 2px; }
@media (min-width: 1024px) {
  .bk-sub { display: none; }
  .bk-top { margin-bottom: 4px; }
  /* calendario a la izquierda y horas a la derecha */
  .bk-elegir { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 22px; }
  .bk-horas { padding-top: 6px; }
  .bk-horas .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .cal-dias .day, .cal-fuera { width: 40px; height: 40px; font-size: .875rem; }
}

/* Reserva en el móvil: cada paso cabe en la pantalla, sin subir ni bajar */
@media (max-width: 1023px) {
  .bk-side { padding-bottom: 10px; }
  .bk-main { padding-top: 6px; }
  .bk-top { margin-bottom: 0; }
  .bk-view:not(.bk-done) > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bk-elegir { gap: 10px; margin-top: 0; }
  .cal-head { margin-bottom: 0; }
  .cal-sem span { padding: 2px 0 4px; }
  .cal-dias { row-gap: 2px; }
  .cal-dias .day, .cal-fuera { width: 40px; height: 40px; }
  .bk-horas .slots-head { margin-bottom: 6px; }
  .slots { gap: 8px; }
  .slot-group p { margin-bottom: 5px; }
  .bk-horas .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .bk-horas .slot { min-height: 40px; font-size: .9375rem; }
  .bk-foot { grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; margin-top: 12px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); }
  .bk-foot .btn-lg { min-height: 48px; padding: 0 22px; }
  .bk-sel { font-size: .875rem; line-height: 1.35; }
  .bk-foot .bk-demo { margin-top: 2px; font-size: .6875rem; }
  /* Tus datos */
  .bk-summary { margin: 0 0 10px; padding: 9px 12px; }
  .form-grid { gap: 10px; }
  .field label { margin-bottom: 4px; }
  #bkForm input[type="text"], #bkForm input[type="tel"], #bkForm select { min-height: 46px; }
  .hint { margin-top: 3px; }
  .bk-serv-nota { padding: 8px 12px; font-size: .8125rem; line-height: 1.4; }
  .check { margin-top: 10px; }
  .bk-rgpd { margin-top: 6px; font-size: .6875rem; line-height: 1.45; }
  .bk-actions { gap: 4px; margin-top: 12px; }
  .bk-actions .btn-lg { min-height: 50px; }
  .bk-sum-centro { display: none; }
  .bk-summary { font-size: .875rem; }
  .bk-serv-nota { padding: 0; border: 0; background: none; }
  .bk-main { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .bk-foot { bottom: calc(-12px - env(safe-area-inset-bottom)); margin-bottom: calc(-12px - env(safe-area-inset-bottom)); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  /* portátiles bajos: sin el título de cada paso */
  .bk-view:not(.bk-done) > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bk-main { padding-top: 22px; }
  .bk-summary { margin-top: 0; }
}
@media (min-width: 1024px) {
  /* Tus datos en dos columnas: cabe en portátiles bajos */
  #bkForm .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 14px; }
  #bkForm .bk-serv-nota { align-self: center; padding: 0; border: 0; background: none; }
  /* la X de cerrar en la esquina, sin ocupar una fila */
  .bk-main { position: relative; }
  .bk-top { position: absolute; top: 6px; right: 6px; margin: 0; z-index: 2; }
  .bk-top [data-close-booking] { width: 34px; height: 34px; }
  .bk-summary { margin: 12px 0; }
  .check { margin-top: 14px; }
}

/* Vídeos: sin el botón de reproducir que añade Safari cuando el móvil bloquea el arranque automático */
video.media-video::-webkit-media-controls,
video.media-video::-webkit-media-controls-start-playback-button,
video.media-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }