/* ═══════════════════════════════════════════════════════════════════════
   /mreservas5 — Turbopos Reservas para clientes actuales (desde el TPV)

   Lenguaje de la home (Montserrat, naranja #FF8C20→#f97316; un solo negro, #1b1b1b,
   para texto y fondos oscuros) SIN header/footer del sitio. Móvil primero.

   Principios de esta hoja (revisión 21/09, "menos ruido"):
   - Una sola alineación: a la izquierda; centrado solo precio y cierre.
   - Naranja solo en el CTA, el remate del titular y tres H2.
   - Un único estilo de tarjeta (borde 1px, radio 20, sombra suave). Las
     imágenes van sin marcos ni cajas. Listas planas.
   - Párrafos 18/19 px a peso 400, medida de 44 caracteres, interlineado 1.6.
   - Táctil ≥ 60 px. Sin animaciones de entrada. Foco visible.
   - prefers-reduced-motion respetado. El modo oscuro NO: la página es clara siempre.
     23/09: se quitaron los tokens de (prefers-color-scheme: dark). Al salir del modo
     $lite entraron header.php y footer.php, que no lo soportan —ninguna otra hoja del
     sitio lo hace—, y con el sistema en oscuro la página quedaba a trozos: secciones
     oscuras entre un menú y un pie claros, y la franja y la tarjeta, que son claras
     siempre por estar fijadas a mano, cortadas contra ellas.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --mr5-orange: #FF8C20;
    --mr5-grad: linear-gradient(135deg, #FF8C20, #f97316);
    /* 24/09: todos los negros de la web son #1b1b1b, también el de las bandas oscuras
       (demo y cierre), que antes eran #1b1b1b, y el del hero (#1b1b1b). */
    --mr5-hero: #1b1b1b;
    --mr5-band: #1b1b1b;
    --mr5-red: #dc2626;

    --mr5-bg: #ffffff;
    --mr5-card: #ffffff;
    /* 23/09: un solo negro en toda la página, el #1b1b1b que ya usaba la franja de
       iconos. Antes había dos tintas (#1b1b1b para titulares y #5b6370, un gris azulado,
       para los párrafos); ahora titular y descripción van del mismo color. */
    --mr5-ink: #1b1b1b;
    --mr5-muted: #1b1b1b;
    --mr5-line: #e6e6ec;
    --mr5-line-soft: #ececf0;
    --mr5-row-focus: #fff7ef;
    --mr5-row-error: #fef2f2;
    --mr5-shadow-card: 0 28px 64px rgba(16, 17, 22, .28);   /* la tarjeta de Miguel (home) */
    --mr5-shadow-soft: 0 18px 44px rgba(16, 17, 22, .10);   /* tarjetas de contenido e imágenes */

    --mr5-text: 18px;
    /* Alto del menú del sitio (header.php, fixed). Medido en el navegador: 48 px tanto
       en escritorio (<header>) como en móvil (.header-mobile). El 4rem que aparece en
       header.min.css es de .navheader-placeholder, que aquí no se usa: reservando 64 en
       móvil sobraban 16 y asomaba el fondo del body como un filete oscuro bajo el menú. */
    --mr5-bar-h: 48px;
}
@media (min-width: 900px) { :root { --mr5-text: 19px; } }

/* ── Base ─────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mr5-bar-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .mr5-body * { transition: none !important; }
}
body.mr5-body {
    /* 24/09: sin padding-top. El hero sube bajo el menú fijo (que es translúcido) y el
       vídeo se ve también detrás de él, como en /tpv-software-hosteleria; antes el menú
       quedaba sobre el blanco del body y se veía como una barra gris. El alto del menú se
       le suma al hero (ver .mr5-hero). */
    margin: 0;
    background: var(--mr5-bg); color: var(--mr5-ink);
    font-family: 'Montserrat', Arial, sans-serif; font-size: var(--mr5-text); line-height: 1.6;
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.mr5-body img, .mr5-body video, .mr5-body svg { max-width: 100%; }
.mr5-body :where(h1, h2, p, ul, ol, figure) { margin: 0; }
.mr5-body button { font-family: inherit; }
.mr5-body :focus { outline: none; }
.mr5-body :focus-visible { outline: 3px solid var(--mr5-orange); outline-offset: 3px; border-radius: 8px; }

.mr5-skip { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 14px 18px; background: var(--mr5-orange); color: #fff; font-weight: 700; border-radius: 10px; }
.mr5-skip:focus { top: calc(var(--mr5-bar-h) + 8px); }

.mr5-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.mr5-wrap--narrow { max-width: 760px; }
.mr5-sec { padding: clamp(56px, 7vw, 88px) 0; }
.mr5-center { text-align: center; }
.mr5-center > p { margin-left: auto; margin-right: auto; }

.mr5-body h2 {
    /* 23/09: el mínimo sube de 1,6 a 1,8rem. Por debajo de 711 px de ancho el clamp se
       queda siempre en el mínimo (3,6vw son 14 px a 390), así que ese valor es, él solo,
       el tamaño de todos los titulares de sección en móvil: pasan de 25,6 a 28,8 px.
       Escritorio intacto: a 900 px los 3,6vw ya dan 32,4 y mandan ellos. */
    font-size: clamp(1.8rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
    max-width: 20ch;
}
.mr5-center h2 { max-width: none; }
/* Sin el 20ch de arriba, que a este titular le sobra: con la imagen al lado el texto vive
   en media caja y el tope lo estrechaba todavía más. Se reparte en las líneas que quepan. */
#mr5-pn-h2, #mr5-asi-h2 { max-width: none; }
.mr5-body h2 em { font-style: normal; color: var(--mr5-orange); }
.mr5-body :where(p) { color: var(--mr5-muted); font-weight: 400; max-width: 44ch; }
.mr5-body h2 + p { margin-top: 16px; }
.mr5-body p + p { margin-top: 12px; }
.mr5-minor { font-size: .9em; }

/* ── Botones: la pastilla de la home ─────────────────────────────────── */
.mr5-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 60px; padding: 0 26px; border: 0; border-radius: 999px;
    font-weight: 700; font-size: .98em; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.mr5-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.mr5-btn--primary { color: #fff; background: var(--mr5-grad); box-shadow: 0 10px 26px rgba(255, 140, 32, .38); }
.mr5-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(255, 140, 32, .5); }
.mr5-btn--primary:active { transform: none; }
.mr5-btn--bar { min-height: 48px; padding: 0 16px; font-size: .9em; color: #fff; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .5); }
.mr5-btn--bar:hover { background: rgba(255, 255, 255, .14); }
.mr5-btn--bar svg { width: 18px; height: 18px; }
.mr5-btn--bar { position: relative; }
.mr5-btn--bar::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }   /* 48 + 12 = 60 px táctiles */

.mr5-link {
    display: inline-flex; align-items: center; justify-content: center; min-height: 56px; width: 100%; padding: 0 12px;
    background: none; border: 0; color: var(--mr5-muted); font-size: .9em; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.mr5-link:hover { color: var(--mr5-ink); }

/* ── 1. Barra fija ───────────────────────────────────────────────────── */
.mr5-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--mr5-bar-h);
    background: rgba(27,27,27, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mr5-bar__in { max-width: 1100px; height: 100%; margin: 0 auto; padding: 0 14px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mr5-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: #fff; text-decoration: none; }
.mr5-brand img { width: 112px; height: 22px; display: block; }
.mr5-brand__mod { font-weight: 700; font-size: .9em; color: #fff; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .28); line-height: 1; }
@media (max-width: 420px) {
    .mr5-brand img { width: 96px; height: 19px; }
    .mr5-btn--bar span { display: none; }
    .mr5-btn--bar { width: 48px; padding: 0; }
}

/* OJO con el orden: estas reglas van DESPUÉS de `.mr5-body :where(p)`, que pinta
   todos los párrafos en --mr5-muted y peso 400. Tienen la misma especificidad (0,1,0),
   así que solo ganan por ir más abajo. Arriba del archivo, la píldora y la línea de
   "3 meses GRATIS" salían en gris y sin negrita. No mover este bloque hacia arriba. */
/* Piezas traídas de otras landings. Esta página va en modo $lite y solo carga
   style.css, así que ni tpv.css ni productos.css están disponibles: se copian aquí
   con los mismos valores y el prefijo mr5-, no se enlazan aquellas hojas. */

/* Recuadro con los valores de .rl-hero-badge de /tpv-software-hosteleria (las cajas de
   "Sin permanencia" y "Verifactu integrado" de su hero, en tpv.css): esquina de 10 px en
   vez de píldora, fondo blanco al 12 % y borde al 30 %. Sin backdrop-filter, que aquellas
   no lo llevan. El cuerpo de texto se mantiene, para no descuadrar el alto del logotipo. */
/* 25/09: sin recuadro. Con fondo y borde se leía como un botón que no hacía nada; ahora es
   una etiqueta: texto en versalitas espaciadas entre dos filetes finos, uno arriba y otro
   abajo, que la destacan sin invitar a pulsar. */
.mr5-chip {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
    padding: 9px 4px; border: 0; border-top: 1px solid rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .55); border-radius: 0; background: none;
    color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; text-shadow: none;
}
/* El logotipo va ahora DETRÁS del texto, así que el padding se invierte: el lado ancho
   pasa a la izquierda. Alto atado al del texto para que no baile si cambia el cuerpo. */
.mr5-chip__g { width: auto; height: 18px; flex: none; display: block; }   /* logo suelto, sin tocar el recuadro ni el texto */

/* Botón naranja del hero de /tpv-software-hosteleria (.bl-btn--orange en tpv.css). */
.mr5-bl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-width: 270px; margin-top: 14px; font: inherit; font-weight: 700; font-size: 1rem;
    line-height: 1; text-transform: uppercase; padding: 1rem 1.7rem; border-radius: 100px;
    border: none; cursor: pointer; text-decoration: none; color: #fff;
    background: linear-gradient(135deg, #FF8C20, #f97316);
    box-shadow: 0 10px 26px rgba(255, 140, 32, .4);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.mr5-bl-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.mr5-bl-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255, 140, 32, .55); }

/* Precio del hero de hostelería (.tpv-price): cifra a 32 px y la línea de regalo debajo.
   Nombre propio a propósito: el bloque 9 usó .mr5-price para una rejilla de tres cajas
   (ya retirada) y su display:grid sentaba estas dos líneas en columnas. */
.mr5-hero__price { display: block; width: 100%; margin-top: 14px; }
.mr5-hero__price h4 { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }   /* 22 = #tpv_mobile */
/* Pegada a la cifra: son una sola unidad de precio, no dos líneas sueltas. La sombra va
   ceñida (6 px, no 12) porque a 16 px un halo ancho apaga el blanco y parece gris fino. */
/* max-width: none para anular el 44ch de `.mr5-body :where(p)`: al ser un bloque más
   estrecho que el copy y sin márgenes automáticos, se pegaba a la izquierda y quedaba
   descolgado de la cifra ahora que el hero va centrado. */
.mr5-hero__price-sub { display: block; max-width: none; margin-top: 0; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }

/* ── 2. Hero con vídeo de fondo ────────────────────────────────
   Receta copiada de /tpv-software-hosteleria (assets/css/tpv.css, bloque
   "Hero estilo datáfono"): vídeo a sangre con object-fit: cover y brightness(.7),
   y encima un velo doble —negro plano para bajar el contraste general, más un
   degradado vertical que oscurece arriba y abajo— para que el titular se lea sobre
   cualquier fotograma. Mismos valores que el original, sin retocar.

   Lo único propio de esta página es la caja del copy: centrada en móvil y alineada
   a la izquierda a media altura en escritorio, como venía de la versión 4. El fondo
   Fondo #1b1b1b, el negro de la web: es lo que se ve el instante previo al póster.
   El pie deja aire para los 44 px que la tarjeta de Miguel sube sobre el hero. */
.mr5-hero {
    position: relative; overflow: hidden; color: #fff; background: #1b1b1b;
    /* Alto igual que el hero de /tpv-software-hosteleria, medido en su página: 610 px en
       móvil (#tpv_mobile a 390) y 600 en escritorio (#tpv a 1440). OJO: no valen los
       valores de tpv.css (100svh - 120px), porque esa landing los pisa en un <style>
       inline de su index.php. Va como min-height y no como height para que, si el copy
       crece o el navegador agranda la letra, el hero crezca en vez de recortar el botón. */
    min-height: calc(610px + var(--mr5-bar-h));   /* + el menú fijo, que va encima */
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(40px + var(--mr5-bar-h)) 0 40px;
}
.mr5-hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; filter: brightness(.7);
}
.mr5-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28)),
                linear-gradient(180deg, rgba(20, 14, 9, .55) 0%, rgba(20, 14, 9, .2) 35%, rgba(20, 14, 9, .45) 70%, rgba(20, 14, 9, .85) 100%);
}
/* Tipografías y márgenes calcados de #tpv_mobile en /tpv-software-hosteleria (están en el
   <style> inline de su index.php, no en tpv.css). Lo único que NO se copia es el
   white-space: nowrap del h1: allí el titular es corto ("Mucho más que un TPV") y aquí
   ¡Activa las reservas de tu negocio! se saldría de la pantalla. */
.mr5-hero__copy { position: relative; z-index: 2; text-align: center; max-width: 720px; margin: 0 auto; padding: 0 20px; }
/* El subtítulo copia el de #tpv_mobile (1rem, peso 500, blanco al 82 %). El titular NO:
   hostelería usa clamp(1.45rem, 7vw, 2.4rem) — 27,3 px a 390 — y aquí va un escalón por
   encima para que pese más frente al subtítulo: 33,5 px a 390, el doble que el sub. */
.mr5-hero h1 { font-size: clamp(1.75rem, 8.6vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.mr5-hero h1 em { font-style: normal; color: var(--mr5-orange); }
.mr5-hero__sub { margin: 10px auto 0; max-width: 40ch; color: rgba(255, 255, 255, .82); font-size: 1rem; font-weight: 500; line-height: 1.4; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

@media (min-width: 900px) {
    /* Escritorio y tablet de 15": el copy baja a media altura y se alinea a la
       izquierda dentro de la misma medida de 1100 px que el resto de la página. */
    .mr5-hero { min-height: calc(600px + var(--mr5-bar-h)); }   /* los 600 de #tpv en hostelería, más el menú */
    /* Escritorio con las métricas de #tpv en /tpv-software-hosteleria, medidas en su
       página a 1440: h1 54,4 px peso 800 y subtítulo 19,2 px peso 500 al 85 % de blanco,
       centrados en una medida de 860 px (.tpv-sidebar: max-width 860, text-align center). */
    .mr5-hero__copy { max-width: 860px; padding: 0 20px; align-self: center; width: 100%; text-align: center; }
    .mr5-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; max-width: none; }
    /* 23/09: el subtítulo comparte caja con el h1 (los 860 de .mr5-hero__copy menos sus
       20 de padding) en vez de estrecharse a 52ch. Se va con él el text-wrap: balance,
       que reparte las líneas a lo largo y corto y por tanto no llena el ancho. */
    .mr5-hero__sub { margin: 10px auto 18px; max-width: none; font-size: 1.2rem; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .85); }
    .mr5-bl-btn { margin-top: 0; margin-bottom: 14px; }
    .mr5-chip { font-size: .86rem; padding: 11px 6px; margin-bottom: 24px; }
    .mr5-chip__g { height: 20px; }
    .mr5-hero__price { margin-top: 0; }
    .mr5-hero__price h4 { font-size: 36px; }
    .mr5-hero__price-sub { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    /* Sin movimiento: mreservas5.js no llega a darle src, así que el <video> se queda
       con el póster fijo. La regla está por si algún navegador autoreproduce igualmente. */
    .mr5-hero__video { animation: none !important; }
}

/* ── 3. Captura: la tarjeta de Miguel de la home (hablar-experto) ─────── */
/* Fondo claro FIJO, no por tokens. La tarjeta sube 40 px sobre el hero, así que el
   fondo de esta sección asoma justo debajo del vídeo: con el token quedaba una banda
   oscura entre el vídeo y la franja clara. En hostelería no se ve ninguna costura
   porque a hablar-experto.php le pasan $hlBg = '#f4f5f7', el mismo color de .dc-stats. */
.mr5-capture { position: relative; z-index: 4; background: #f4f5f7; padding: 1px 16px clamp(12px, 2.5vw, 24px); }
/* Geometría de la tarjeta "Hablar con un experto" de /reservas (.hl-card en
   hablar-experto.php): 880 px, solape de 54 y todo más compacto. El color sigue
   saliendo de los tokens y no fijo en blanco, para no romper el modo oscuro que
   esta página respeta por spec; en claro queda igual que la de /reservas. */
.mr5-card {
    max-width: 880px; margin: -40px auto 0; padding: clamp(16px, 2.6vw, 24px);
    background: var(--mr5-card); border: 1px solid var(--mr5-line-soft); border-radius: 20px; box-shadow: var(--mr5-shadow-card);
    display: flex; flex-direction: column; align-items: stretch; gap: 16px; text-align: center;
}
.mr5-card[hidden], .mr5-trust[hidden] { display: none; }
.mr5-card__left { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.mr5-card__copy { min-width: 0; }
.mr5-card__title { font-size: 1.16rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; max-width: none; }
.mr5-card__sub { margin-top: 2px; font-size: .9rem; font-weight: 600; line-height: 1.4; max-width: none; }

.mr5-expert { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.mr5-expert img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; border: 2.5px solid var(--mr5-card); box-shadow: 0 8px 20px rgba(16, 17, 22, .22); }
.mr5-expert__dot { position: absolute; right: 1px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 3px solid var(--mr5-card); }
.mr5-expert__dot.is-off { display: none; }

.mr5-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 9px; margin-top: 7px; font-size: .8rem; font-weight: 700; color: var(--mr5-muted); }
.mr5-trust b { color: var(--mr5-ink); font-weight: 800; }
.mr5-trust__g { display: inline-flex; align-items: center; gap: 5px; }
.mr5-trust__g img { height: 13px; width: auto; display: block; }
.mr5-stars { height: 11px; width: auto; display: block; }
.mr5-trust__sep { color: #d0d2d8; margin-right: 5px; }
/* El separador y "+2.000 hosteleros" son una unidad: si la fila no cabe, salta entera
   y el "·" no se queda solo colgando al final de la línea de Google. */
.mr5-trust__more { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.mr5-form { flex: 0 0 auto; text-align: left; }
.mr5-step { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.mr5-row { position: relative; min-width: 0; }
.mr5-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mr5-row input {
    display: block; width: 100%; height: 42px; box-sizing: border-box; margin: 0; padding: 0 13px;
    border: 1.5px solid var(--mr5-line); border-radius: 10px; background: var(--mr5-card);
    font-family: inherit; font-size: 1em; font-weight: 600; color: var(--mr5-ink); text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mr5-row input::placeholder { color: #9aa0ac; font-weight: 500; }
.mr5-row input:focus { outline: none; border-color: var(--mr5-orange); background: var(--mr5-row-focus); box-shadow: 0 0 0 3px rgba(255, 140, 32, .12); }
.mr5-row.is-error input { border-color: var(--mr5-red); background: var(--mr5-row-error); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.mr5-row__err { display: none; margin: 6px 4px 0; font-size: .8em; font-weight: 600; color: var(--mr5-red); text-align: left; max-width: none; }
.mr5-row.is-error .mr5-row__err { display: block; }

.mr5-cta {
    display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 42px; padding: 0 18px; white-space: nowrap;
    border: 0; border-radius: 10px; background: var(--mr5-grad); color: #fff; font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 140, 32, .3); transition: filter .15s ease, transform .15s ease;
}
.mr5-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.mr5-cta:disabled { opacity: .7; cursor: default; transform: none; }

.mr5-micro { display: block; width: 0; min-width: 100%; margin: 10px 0 0; font-size: .8em; font-weight: 600; color: #9aa0ac; text-align: center; line-height: 1.45; max-width: none; }
.mr5-micro--on { color: var(--mr5-muted); }
.mr5-micro__dot { display: inline-block; vertical-align: middle; width: 9px; height: 9px; margin: -2px 7px 0 0; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

.mr5-done {
    max-width: 880px; margin: -40px auto 0; padding: clamp(22px, 3vw, 30px) 24px;
    background: var(--mr5-card); border: 1px solid var(--mr5-line-soft); border-radius: 20px; box-shadow: var(--mr5-shadow-card);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.mr5-done[hidden] { display: none; }
.mr5-done:focus-visible { outline: none; }
.mr5-done__check { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: linear-gradient(135deg, #34d399, #16a34a); color: #fff; box-shadow: 0 10px 24px rgba(22, 163, 74, .35); }
.mr5-done__check svg { width: 28px; height: 28px; }

@media (min-width: 841px) {
    .mr5-card { margin-top: -54px; flex-direction: row; align-items: center; gap: clamp(16px, 3vw, 30px); text-align: left; }
    .mr5-done { margin-top: -54px; }
    .mr5-card__left { flex: 1 1 0; flex-direction: row; align-items: center; gap: 14px; }
    .mr5-card__title { white-space: nowrap; }
    /* A 880 px la columna izquierda va justa: con el gap y las estrellas por defecto,
       "+2.000 hosteleros" saltaba a una segunda línea y la tarjeta crecía 26 px. */
    .mr5-trust { justify-content: flex-start; flex-wrap: nowrap; gap: 5px 6px; font-size: .76rem; }
    .mr5-trust__g img { height: 12px; }
    .mr5-stars { height: 10px; }
    .mr5-step { flex-direction: row; align-items: flex-start; gap: 8px; }
    .mr5-row { flex: 0 0 auto; }
    .mr5-row input { width: 144px; }   /* 132 como .hl-step, +12 porque aquí el placeholder es "Tu teléfono" y se cortaba */
    #mr5RowShop input { width: 260px; }
    .mr5-cta { width: auto; }
    .mr5-micro { text-align: left; margin-left: 2px; font-size: .76em; white-space: nowrap; }
    .mr5-link { width: auto; min-height: 44px; padding: 0 4px; margin-top: 4px; }
}

/* ── Bloques texto + gráfico (4, 5, 6, 7) ────────────────────────────────
   Texto a la izquierda, gráfico a la derecha (o a la izquierda en --rev).
   Las imágenes van limpias: radio 20 y sombra suave, sin marcos. */
.mr5-split { display: grid; gap: 28px; align-items: center; }
.mr5-split__fig { line-height: 0; }
.mr5-split__fig img, .mr5-split__fig video { width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: var(--mr5-shadow-soft); }
/* El montaje de los dos móviles. Al revés que las capturas de interfaz, esta imagen ya
   viene sobre hormigón casi negro: no necesita filete para despegarse del blanco.
   24/09: lleva la misma sombra que la ficha de Casa Lola (.mr5-gbiz), que va justo debajo,
   para que las dos figuras se lean como un par. */
.mr5-split__fig--web { max-width: 520px; margin: 0 auto; }   /* el mismo ancho que la del panel */
.mr5-split__fig--web img { box-shadow: 0 24px 50px rgba(0,0,0,.12); }   /* radio de 20, el del resto de figuras */
/* El panel de adminreservas. Conserva el radio de 20 del resto de figuras y cambia
   la sombra por una muy leve: la de --mr5-shadow-soft levanta demasiado una captura
   que ya trae su propio marco. Filete porque la captura es casi blanca y se fundiría con el fondo. */
.mr5-split__fig--panel { max-width: 520px; margin: 0 auto; }
.mr5-split__fig--panel img { border: 1px solid var(--mr5-line-soft); box-shadow: 0 4px 14px rgba(16, 17, 22, .10); }

/* ── Carrusel del panel (24/09) ──────────────────────────────
   Tres capturas apiladas en un escenario con la proporción del webp (1200x759). El filete
   y la sombra leve que llevaba la captura suelta pasan al escenario, que es el que recorta.
   Cambio: fundido lento de 1,2 s; la entrante sube encima de la saliente, que sigue opaca
   debajo, para que nunca asome el fondo. Debajo, el indicador: tres líneas gruesas, la
   activa más larga y en naranja; se pueden pulsar. */
.mr5-slides { line-height: normal; width: 100%; }   /* las capturas van en absolute y no dan ancho: sin esto, el margin auto del grid la encogía */
.mr5-slides__stage { position: relative; aspect-ratio: 1200 / 759; overflow: hidden; border-radius: 20px; border: 1px solid var(--mr5-line-soft); background: #fff; box-shadow: 0 4px 14px rgba(16, 17, 22, .10); }
.mr5-split__fig--panel .mr5-slides__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; opacity: 0; z-index: 0; transition: opacity 1.2s ease; }
.mr5-slides__img.is-leaving { opacity: 1; z-index: 1; }
.mr5-slides__img.is-active { opacity: 1; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .mr5-split__fig--panel .mr5-slides__img { transition: none; } }
/* Indicador. El botón mide 44x24 para que se pueda pulsar con el dedo; la línea que se ve
   es su ::before (22x4, la activa 40 px y naranja). */
/* Fuera del flujo (colgado bajo el escenario): así la figura mide lo que la imagen y el
   texto de al lado se centra con ella, no con imagen + indicador. */
.mr5-slides { position: relative; }
.mr5-slides__dots { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: center; gap: 2px; margin-top: 14px; }
.mr5-slides__dot { position: relative; width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.mr5-slides__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 4px; margin: -2px 0 0 -11px; border-radius: 4px; background: #d9dbe1; transition: width .35s ease, margin .35s ease, background-color .35s ease; }
.mr5-slides__dot:hover::before { background: #b9bcc5; }
.mr5-slides__dot.is-active::before { width: 40px; margin-left: -20px; background: var(--mr5-orange); }

@media (min-width: 900px) {
    .mr5-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); }
    .mr5-split--rev .mr5-split__txt { order: 2; }
    .mr5-split--rev .mr5-split__fig { order: 1; }
}


/* ── 6 y 11. Bandas oscuras ──────────────────────────────────────────── */
.mr5-band { background: var(--mr5-band); color: #fff; }
.mr5-band :where(p) { color: rgba(255, 255, 255, .7); }

/* ── 3 ter. Prestaciones del panel ────────────────────────────
   La gemela clara de .mr5-list: misma burbuja naranja y mismo icono, pero con el texto en
   --mr5-ink porque este bloque va sobre blanco, no sobre la banda negra. En escritorio
   caen a dos columnas: son etiquetas cortas y en una sola quedaban cuatro renglones
   sueltos con medio ancho vacío al lado. */
.mr5-feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
/* Mismos valores que un párrafo cualquiera de la página (`.mr5-body :where(p)` sobre el
   body): cuerpo var(--mr5-text) —18 px en móvil, 19 en escritorio—, interlineado 1,6,
   peso 400 y color --mr5-muted. Así estas líneas se leen igual que el texto del bloque
   "Te buscan en Google", que es lo que se busca: son prosa, no etiquetas. */
.mr5-feats li { display: flex; align-items: center; gap: 12px; font-size: 1em; font-weight: 400; line-height: 1.6; color: var(--mr5-muted); }
/* 23/09: sin burbuja y más grandes. Los del panel son de trazo, no macizos: dentro de
   un círculo de fondo perdían detalle y no se reconocían como los del menú.
   El color lo heredan del <li>, o sea --mr5-muted: los SVG pintan con currentColor,
   así que icono y frase van siempre del mismo gris sin repetir el valor. */
.mr5-feats svg { width: 28px; height: 28px; flex: 0 0 auto; color: inherit; }
@media (min-width: 900px) {
    /* Una sola columna también en escritorio: desde que la sección es .mr5-split, el texto
       vive en media caja (487 px a 1100) y a dos columnas cada etiqueta se partía. */
    .mr5-feats { gap: 16px; margin-top: 28px; }
}

/* ── 3 quater. Mientras tú sirves ─────────────────────────────
   Copia de la sección #asi de /reservas (tp-reservas.css: .tpr-asi, .ui-gbiz, .ui-ticket y
   .ui-state), con prefijo mr5- y los mismos valores. 24/09: solo queda la ficha de
   Google, sin el ticket ni la flecha, y sin la tarjeta oscura (.tpr-card) que la
   envolvía; suelta sobre el blanco de la sección, conserva el filete y la sombra suave
   de la ficha original para no fundirse con el fondo. */
/* El logotipo de Google dentro del titular, algo mayor que el texto para que pese como
   una palabra más del titular. En el SVG (165,8x54,36) la línea base cae al 77 % del alto
   y el resto es el rabo de la g: bajar el 23 % del alto (.29em de 1,25) apoya el logo en
   la misma línea base que "Conectado con". */
.mr5-h2-g { display: inline-block; height: 1.25em; width: auto; vertical-align: -.29em; margin-left: .1em; }
/* "tu perfil de Google" no se parte: si no cabe todo en una línea, baja junto y el logo
   nunca se queda solo en un renglón. */
.mr5-nowrap { white-space: nowrap; }
/* 24/09: sin padding arriba. Pegada a "Tu web de reservas", la separación entre las dos es
   solo el padding de abajo de aquella: el mismo clamp(56px, 7vw, 88px) que hay entre la
   franja gris de iconos y la foto de los móviles, en vez del doble. */
#asi.mr5-sec { padding-top: 0; }
/* 24/09: la ficha mide lo mismo que la imagen de "Tu web de reservas" (.mr5-split__fig--web):
   mismo ancho máximo, 520, y misma proporción, la de su webp de 1200x742. El alto que
   sobra se lo queda la foto de cabecera (ver .mr5-gbiz__photo). */
.mr5-asi__visual { line-height: normal; max-width: 520px; margin: 0 auto; width: 100%; }
.mr5-asi__visual .mr5-gbiz { aspect-ratio: 1200 / 742; display: flex; flex-direction: column; }

/* ── 3 quinquies. Y al instante, en tu TPV ─────────────────────
   Fondo y bloque de .tpr-migra de /reservas: #f6f6f8 con filete arriba y centrado en 760. */
/* 25/09: el precio va en el mismo gris que la sección del TPV (#migracion). */
#precio { background: #f6f6f8; }
.mr5-migra { background: #f6f6f8; border-top: 1px solid var(--mr5-line-soft); padding-bottom: 0; overflow: hidden; }
/* El TPV sale desde el borde de abajo de la franja: sin padding inferior en la sección, la
   imagen (4:3 desde arriba, como en /tpv-software-hosteleria) termina donde termina el gris
   y el borde corta el pie. */
.mr5-migra__tpv { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 600px; line-height: 0; }
.mr5-migra__tpv img { display: block; width: 100%; height: auto; }
/* El párrafo en una sola línea en escritorio: sin el tope de 44ch de los párrafos, cabe
   en los 760 de la caja. En móvil se parte donde toque. */
.mr5-migra p { max-width: none; }

.mr5-ui { color: #1b1b1b; text-align: left; }
/* Ficha de Google */
.mr5-gbiz { background: #fff; border-radius: 18px; border: 1px solid #e3e5ea; box-shadow: 0 24px 50px rgba(0,0,0,.12); overflow: hidden; }
/* 24/09: la franja naranja con rayas de /reservas se cambia por una foto real de una barra
   de pinchos. El degradado se queda de fondo mientras carga. El archivo ya viene recortado
   a la franja de los pinchos, así que basta un cover centrado. Alto flexible: crece hasta
   completar la proporción de la ficha, con 96 px de mínimo en móvil. */
.mr5-gbiz__photo { flex: 1 1 auto; min-height: 96px; background: linear-gradient(135deg, #f2c28b, #c4622d 60%, #7a2f13); overflow: hidden; }
.mr5-gbiz__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.mr5-gbiz__body { padding: 14px 16px 16px; }
.mr5-gbiz__name { font-size: 1.15rem; font-weight: 700; color: #1b1b1b; letter-spacing: -.01em; }
.mr5-gbiz__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; font-size: .78rem; color: #5f6368; }
.mr5-gbiz__meta b { color: #1b1b1b; font-weight: 600; }
.mr5-gbiz__stars { color: #fbbc04; font-size: .78rem; letter-spacing: -1px; }
.mr5-gbiz__actions { display: flex; gap: 8px; margin-top: 12px; }
.mr5-gbiz__act { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 100px; border: 1px solid #dadce0; font-size: .74rem; font-weight: 600; color: #1a73e8; background: #fff; white-space: nowrap; }
.mr5-gbiz__act--book { flex: 1.4; background: #1a73e8; color: #fff; border-color: #1a73e8; box-shadow: 0 8px 18px rgba(26,115,232,.35); position: relative; }
.mr5-gbiz__act--book::after { content: ""; position: absolute; inset: -6px; border-radius: 100px; border: 2px solid rgba(26,115,232,.45); animation: mr5Pulse 2.2s ease-out infinite; }
@keyframes mr5Pulse { 0% { opacity: 1; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .mr5-gbiz__act--book::after { animation: none; display: none; } }
.mr5-gbiz__hours { margin-top: 12px; font-size: .74rem; color: #188038; font-weight: 600; }
.mr5-gbiz__hours span { color: #5f6368; font-weight: 500; }

/* ── 6+7. La demo: la receta "Una demo vale más que mil palabras" de la home ──
   Banda #1b1b1b, eyebrow naranja, titular centrado, vídeo 16:9 a 920 px con radio
   16 y sombra profunda; debajo, texto + lista a la izquierda y capítulos a la derecha. */
.mr5-eyebrow { display: inline-block; margin-bottom: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mr5-orange); }
.mr5-demo__head { max-width: 680px; margin: 0 auto clamp(18px, 2.6vw, 26px); text-align: center; }
.mr5-demo__head h2 { max-width: none; }
.mr5-demo__video { max-width: 920px; margin: 0 auto; aspect-ratio: 16 / 9; background: #1b1b1b; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.mr5-demo__video iframe { width: 100%; height: 100%; display: block; border: 0; }
@media (max-width: 899px) {
    .mr5-demo__video { border-radius: 12px; }   /* el de .tpv-demo__video en móvil */
}

/* ── 8. Puesta en marcha ─────────────────────────────────────────────── */
/* 24/09: filete fino en el negro de la web (#1b1b1b) en el borde de arriba de la sección,
   a lo ancho de la caja de contenido: la separa del panel, que va encima en el mismo blanco. */
#montaje { position: relative; }
#montaje::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1060px, calc(100% - 40px)); height: 1px; background: #1b1b1b; }
.mr5-steps { list-style: none; margin-top: 28px; display: grid; gap: 14px; }
.mr5-steps li { padding: 22px 22px 24px; background: var(--mr5-card); border: 1px solid var(--mr5-line-soft); border-radius: 20px; box-shadow: var(--mr5-shadow-soft); }
.mr5-steps__n { display: block; margin-bottom: 8px; font-size: .74em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mr5-orange); }
.mr5-steps p { color: var(--mr5-ink); font-weight: 600; line-height: 1.4; max-width: 28ch; }
@media (min-width: 900px) {
    .mr5-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .mr5-steps li { padding: 26px 24px 28px; }
}

/* ── 9. Precio ───────────────────────────────────────────────────────── */
/* 24/09: el precio es el titular, de un solo color y un solo tamaño, algo mayor que el
   resto de titulares; debajo, "3 meses gratis" en naranja entre dos filetes finos. */
.mr5-pricecard { max-width: 640px; margin: 0 auto; padding: clamp(30px, 5vw, 44px) clamp(22px, 5vw, 48px); border-radius: 20px; background: #fff; border: 1px solid var(--mr5-line-soft); box-shadow: var(--mr5-shadow-soft); }
.mr5-pricecard p { margin-left: auto; margin-right: auto; }
/* 28/09: lo que incluyen los 30 €. Lista a la izquierda, centrada como bloque en la
   tarjeta; cada punto con un círculo verde y check blanco (el verde de .mr5-done__check). */
.mr5-incl__title { color: var(--mr5-ink); font-weight: 800; }   /* dentro del texto descriptivo */
.mr5-incl { display: table; margin: 16px auto 0; padding: 0; list-style: none; text-align: left; }
.mr5-incl li { display: flex; align-items: center; gap: 10px; color: var(--mr5-ink); font-weight: 600; line-height: 1.35; }
.mr5-incl li + li { margin-top: 10px; }
.mr5-incl svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: linear-gradient(135deg, #34d399, #16a34a); color: #fff; }
/* Botón del hero bajo la tarjeta, sin los márgenes que lleva allí. */
.mr5-pricecta { margin-top: clamp(24px, 4vw, 34px); }
.mr5-pricecta .mr5-bl-btn { margin: 0; }
.mr5-body h2.mr5-bigprice { max-width: none; }   /* 24/09: mismo tamaño que el resto de titulares (el de `.mr5-body h2`), como "No es otro programa." */
/* 25/09: el importe crece (hasta ~2,4 veces el titular); debajo, "Al mes, y ya está." con
   el tamaño de titular. */
.mr5-bigprice__fig { display: block; font-size: clamp(4.2rem, 11vw, 5.4rem); line-height: .85; margin-bottom: 0; }
.mr5-bigprice__amount { letter-spacing: -.01em; }
/* 25/09: los filetes pasan de los lados a arriba y abajo, a lo ancho del texto (como la
   etiqueta de Google del hero). padding-left = letter-spacing para centrar el texto óptico. */
.mr5-body .mr5-free { display: table; max-width: none; margin: 12px auto 0; padding: 9px 4px 9px calc(4px + .16em); border-top: 1px solid var(--mr5-orange); border-bottom: 1px solid var(--mr5-orange); color: var(--mr5-orange); font-size: .9em; font-weight: 800; letter-spacing: .16em; line-height: 1; text-transform: uppercase; }
.mr5-body .mr5-free + p { margin-top: 18px; }

/* ── 10. Dudas ───────────────────────────────────────────────────────── */
/* 28/09: el diseño de la FAQ de la home (estilos en línea de index.php, .faq), copiado
   tal cual: banda oscura con degradado, preguntas numeradas 01-05, barra naranja a la
   izquierda y botón redondo que se rellena al abrir. Diferencias con la home:
   - el titular conserva el tamaño de los demás de esta página (`.mr5-body h2`);
   - abajo lleva el mismo aire que arriba: aquí no le sigue el cierre .faq-final;
   - los `.mr5-body` delante ganan al 44ch y al gris de `.mr5-body :where(p)`. */
.faq { background: radial-gradient(130% 90% at 50% 0, #191b22 0, #1b1b1b 58%); color: #fff; padding: clamp(48px, 7vw, 92px) 16px; }
.faq__head { max-width: 760px; margin: 0 auto clamp(26px, 4.5vw, 44px); text-align: center; }
.faq__eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--mr5-orange); margin: 0 0 14px; }
.mr5-body .faq__head h2 { max-width: none; margin: 0 0 12px; text-wrap: balance; }
.mr5-body .faq__head p { max-width: none; margin: 0; font-size: clamp(1rem, 2.4vw, 1.18rem); color: rgba(255, 255, 255, .6); line-height: 1.5; }
.faq__list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 11px; }
.faq-item { position: relative; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .035); overflow: hidden; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.faq-item.is-open { border-color: rgba(255, 140, 32, .5); background: rgba(255, 140, 32, .055); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
/* Barra de acento naranja a la izquierda que crece al abrir */
.faq-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#FF8C20, #f97316); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.faq-item.is-open::before { transform: scaleY(1); }
.faq-q { width: 100%; display: flex; align-items: center; gap: clamp(12px, 2.5vw, 18px); padding: clamp(16px, 2.5vw, 20px) clamp(16px, 2.5vw, 22px); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; color: #fff; }
/* Número itálico fantasma → se enciende naranja al abrir */
.faq-q__n { flex: 0 0 auto; min-width: 30px; font-size: 1.05rem; font-weight: 800; font-style: italic; letter-spacing: -.02em; color: rgba(255, 255, 255, .28); transition: color .2s ease; }
.faq-item.is-open .faq-q__n { color: var(--mr5-orange); }
.faq-q__t { flex: 1; min-width: 0; font-size: clamp(1.02rem, 2.5vw, 1.2rem); font-weight: 800; line-height: 1.28; letter-spacing: -.01em; }
/* Botón redondo con la flecha, que gira y se rellena de naranja al abrir */
.faq-q__ic { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); color: #fff; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .3s ease; }
.faq-q:hover .faq-q__ic { border-color: var(--mr5-orange); color: var(--mr5-orange); }
.faq-item.is-open .faq-q__ic { background: linear-gradient(135deg, #FF8C20, #f97316); border-color: transparent; color: #fff; transform: rotate(180deg); }
.faq-q__ic svg { width: 18px; height: 18px; }
/* Desplegable animado (texto corto → grid-rows va suave y sin JS de alturas) */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a__inner { overflow: hidden; min-height: 0; }
/* Respuesta alineada bajo el texto de la pregunta (sangrada tras el número) */
.mr5-body .faq-a p { max-width: none; margin: 0; padding: 0 clamp(16px, 2.5vw, 22px) 18px clamp(46px, 7vw, 62px); color: rgba(255, 255, 255, .74); font-size: clamp(.94rem, 2.2vw, 1.05rem); line-height: 1.62; }
@media (prefers-reduced-motion: reduce) { .faq-a, .faq-q__ic, .faq-item::before { transition: none; } }



/* ── 3 bis. Franja de condiciones, pop-up y tarjeta en blanco ───────────
   Todo este bloque va al final a propósito: manda sobre `.mr5-body :where(p)` y sobre
   las reglas por tokens de más arriba. */

/* La tarjeta de Miguel, con el color de la de /reservas (.hl-card): blanca SIEMPRE,
   también con el sistema en modo oscuro. Por eso hay que fijar también los colores de
   dentro: si se quedaran en tokens, en oscuro saldría texto claro sobre blanco. */
.mr5-card, .mr5-done { background: #fff; border-color: #ececf0; box-shadow: 0 28px 64px rgba(16, 17, 22, .28); }
/* El título lo pisaba `.mr5-body h2` (0,1,1), más específico que .mr5-card__title (0,1,0):
   salía a 35 px en vez de a los 1,16 rem de .hl-title. Se sube la especificidad. */
.mr5-card .mr5-card__title, .mr5-done h3 { color: #1b1b1b; }
/* max-width: none anula el 20ch de `.mr5-body h2` (0,1,1). Con él, el título formaba un
   bloque más estrecho que la tarjeta y, al no tener márgenes automáticos, se quedaba
   pegado a la izquierda: en móvil la pregunta salía descentrada 28 px respecto al resto. */
.mr5-card .mr5-card__title { font-size: 1.16rem; max-width: none; }
.mr5-modal .mr5-card .mr5-card__title { font-size: 1.32rem; white-space: normal; }
/* margin-top 2 como .hl-sub: lo pisaba `.mr5-body h2 + p` (0,1,2) con 16 px, que era la
   mayor parte de los 24 px que esta tarjeta medía de más. Los interlineados también van
   fijos: la página hereda 1,6 y la tarjeta de /reservas es más apretada. */
.mr5-card .mr5-card__sub { color: #6b7280; margin-top: 2px; line-height: 1.25; }
.mr5-card .mr5-trust { line-height: 1.2; }
.mr5-card .mr5-trust { color: #5b6370; }
.mr5-card .mr5-trust b { color: #1b1b1b; }
.mr5-card .mr5-trust__g img { filter: none; }
.mr5-card .mr5-expert img, .mr5-card .mr5-expert__dot { border-color: #fff; }
.mr5-card .mr5-row input { background: #fff; border-color: #e6e6ec; color: #1b1b1b; }
.mr5-card .mr5-row input:focus { background: #fff7ef; border-color: var(--mr5-orange); }
.mr5-card .mr5-row.is-error input { background: #fef2f2; border-color: var(--mr5-red); }
.mr5-card .mr5-micro { color: #9aa0ac; }
/* La .hl-card de /reservas no lleva microcopy bajo los campos, y esos 24 px eran toda la
   diferencia de alto (154 frente a 130). Se oculta en la tarjeta embebida y se conserva
   dentro del pop-up, donde sobra sitio y es donde de verdad ayuda a decidir. Como la
   tarjeta se MUEVE al pop-up, basta con acotar la regla a su sección. */
.mr5-capture .mr5-micro { display: none; }
.mr5-card .mr5-micro--on { color: #6b7280; }
.mr5-done p { color: #6b7280; }

/* Franja de iconos: .dc-stats de /tpv-software-hosteleria, con sus mismos valores
   (fondo #f4f5f7, icono de 46 px, filete de 2 px, 1,125 rem en móvil y 1,75 en ancho). */
.mr5-strip { background: #f4f5f7; padding: 18px 12px; }
/* Tres columnas desde el 23/09. En móvil van en rejilla de 1fr, como las de hostelería:
   con flex, "comisiones + permanencia + de soporte" suman más de 390 px y se salen. */
.mr5-strip__in { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; align-items: stretch; max-width: 1072px; margin: 0 auto; }
.mr5-strip__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 2px 6px; text-align: center; }
.mr5-strip__item + .mr5-strip__item { border-left: 2px solid #1b1b1b; }
.mr5-strip__ic { display: block; width: 46px; height: 46px; color: #1b1b1b; }
.mr5-strip__ic svg, .mr5-strip__ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mr5-strip__line { margin: 0; max-width: none; font-weight: 700; color: #1b1b1b; font-size: clamp(.9rem, 4.6vw, 1.125rem); line-height: 1.2; letter-spacing: -.01em; }
.mr5-strip__line span { white-space: nowrap; }
.mr5-strip__line span + span { display: block; }
@media (min-width: 601px) {
    .mr5-strip { padding: 24px; }
    .mr5-strip__in { display: flex; }
    .mr5-strip__item { flex-direction: row; align-items: center; gap: 12px; padding: 6px 34px; }
    .mr5-strip__line { font-size: 1.75rem; white-space: nowrap; }
    .mr5-strip__line span + span { display: inline; }
}

/* Pop-up de llamada, con el montaje del call-modal de hostelería. */
.mr5-modal[hidden] { display: none; }
.mr5-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
.mr5-modal__veil { position: absolute; inset: 0; background: rgba(9, 10, 13, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mr5-modal__panel {
    position: relative; width: 100%; max-width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - 40px); overflow: auto; -webkit-overflow-scrolling: touch;
    background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); padding: 30px 24px 20px;
}
/* Filo degradado de marca arriba, como en form#form-call. */
.mr5-modal__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #FF8C20 30%, #f97316 70%, transparent); }
.mr5-modal__x { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #f1f1f4; color: #1b1b1b; cursor: pointer; }
.mr5-modal__x:hover { background: #e6e6ea; color: var(--mr5-orange); }
.mr5-modal__x svg { width: 20px; height: 20px; }
/* Dentro del pop-up la tarjeta pierde el solape y vuelve a su forma en columna. */
.mr5-modal .mr5-card, .mr5-modal .mr5-done { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.mr5-modal .mr5-card { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; }
.mr5-modal .mr5-card__left { flex-direction: column; align-items: center; gap: 10px; }
.mr5-modal .mr5-card__title { white-space: normal; font-size: 1.32rem; }
.mr5-modal .mr5-trust { justify-content: center; }
.mr5-modal .mr5-step { flex-direction: column; align-items: stretch; gap: 10px; }
.mr5-modal .mr5-row, .mr5-modal .mr5-row input, .mr5-modal #mr5RowShop input { width: 100%; }
/* Los dos campos como un solo grupo (el .call-fields del header de hostelería, estilo iOS):
   una caja con un hairline en medio. Se consigue solapando los bordes en vez de envolver
   los campos en otro div, para no tocar el HTML que ya usa el formulario de la tarjeta. */
.mr5-modal .mr5-step { gap: 0; }
.mr5-modal .mr5-row input { height: auto; padding: 15px 16px; border-radius: 0; font-weight: 500; }
.mr5-modal .mr5-row:first-child input { border-radius: 14px 14px 0 0; }
.mr5-modal .mr5-row + .mr5-row input { margin-top: -1.5px; border-radius: 0 0 14px 14px; }
.mr5-modal #mr5RowShop input { border-radius: 14px; margin-top: 0; }
.mr5-modal .mr5-row.is-error input { position: relative; z-index: 1; }
/* El botón de hostelería: ancho completo, 15/18 de padding, radio 12 y peso 800. */
.mr5-modal .mr5-cta { width: 100%; height: auto; margin-top: 14px; padding: 15px 18px; border-radius: 12px; font-size: 1rem; font-weight: 800; box-shadow: 0 8px 22px rgba(249, 115, 22, .32); }
.mr5-modal .mr5-micro { text-align: center; margin-left: 0; white-space: normal; font-size: .8rem; }
/* Con el pop-up abierto, la sección de la tarjeta se queda vacía: se colapsa para que no
   deje un hueco (hostelería hace lo mismo con html:has(.call-modal.open-call-modal)). */
.mr5-capture.is-moved { display: none; }
body.mr5-locked { overflow: hidden; }

/* ── hablar-experto.php: aislarlo de los estilos de esta página ───────────
   La tarjeta es el mismo componente que en /tpv-software-hosteleria y trae su propio
   <style>, pero lo que no declara lo HEREDA del body, y aquí el body no es el del sitio:
     - font-size 19px (var(--mr5-text)) en vez de 16px  -> .hl-sub y .hl-trust más altos
     - line-height 1.6 en vez de normal                 -> otros 5 px por línea
     - .mr5-body p + p { margin-top: 12px }             -> el subtítulo se separaba 12
       en vez de los 2 de .hl-sub
     - .mr5-body :where(p) { max-width: 44ch }          -> limitaba el ancho del título
   Sumaba 21 px: la tarjeta medía 135 aquí y 114 allí. Se le devuelve su contexto en vez
   de tocar el componente, que es compartido con la home y con otras landings. */
.hl-sec { font-size: 16px; line-height: normal; }
.hl-sec :where(p) { max-width: none; color: inherit; font-weight: inherit; }
.hl-sec p + p { margin-top: 0; }
.hl-sec .hl-sub { margin-top: 2px; }
.hl-sec .hl-trust { margin-top: 7px; }

/* ── Footer de la home (.rl-footer, 24/09) ───────────────────────────────
   Sus estilos vienen con él, en el <style> copiado de index.php. Lo único que hay que
   devolverle es la base de la home: esta página pone el body a 18/19 px con interlineado
   1,6, y el footer lo heredaba (los enlaces salían más separados que en la home). */
body.mr5-body .rl-footer { font-size: 16px; line-height: normal; }
/* El padding de abajo de la home suma 84 px de reserva para la barra flotante que allí va
   encima del footer (footer.php). Aquí no hay barra: se queda solo el clamp de base. */
body.mr5-body .rl-footer { padding-bottom: clamp(24px, 4vw, 40px); }