/*
 * FUENTES PROPIAS, NO LAS DE GOOGLE (09-08-2026).
 *
 * Antes se cargaban desde fonts.googleapis.com. PageSpeed lo señaló como el
 * mayor freno de la página: 750 ms de bloqueo del pintado solo por su hoja
 * de estilos, y luego una cadena de tres descargas más contra
 * fonts.gstatic.com. El elemento LCP era un párrafo con 0 ms de espera de
 * servidor -- no era lentitud nuestra, era el texto esperando a las fuentes.
 *
 * Y hay un segundo motivo que no es de velocidad: cada visitante mandaba su
 * IP a Google antes de aceptar nada. La política de cookies dice, con razón,
 * que no hay cookies de terceros; la IP sí se iba. Sirviéndolas de aquí, no.
 *
 * Son los MISMOS ficheros que servía Google (subconjunto latino, que cubre
 * el español entero), con licencia SIL Open Font License: Lato de Lukasz
 * Dziedzic y Varela Round de Joe Prince. La OFL permite alojarlas uno mismo.
 *
 * font-display: swap se mantiene igual que lo ponía Google: el texto se ve
 * desde el primer momento con la fuente del sistema y cambia al cargar.
 */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/lato-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/lato-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Varela Round';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/varela-round-400.woff2') format('woff2');
}

:root {
    --mv-color: #008375;
    --mv-color-oscuro: #006a5f;
    /* Verde más claro que el de marca, para el resaltado del menú del pie
       (equivalente en verde al dorado que usa el menú de la cabecera). */
    --mv-color-claro: color-mix(in srgb, var(--mv-color) 60%, white);
    --mv-texto: #3a3a3a;
    --mv-degradado-crema: linear-gradient(135deg, #f3ede0 0%, #fff 60%);
    --mv-dorado: #C9971F;
    --mv-dorado-oscuro: #a87e18;
    --mv-dorado-texto: #6b4f0e;
    /* Alto reservado para la barra fija del pie: dos filas (teléfono/correo
       arriba, avisos abajo) + botones de chat/WhatsApp, que estiran su alto
       al de la barra entera (icono + etiqueta). */
    --mv-alto-barra: 74px;
}

* { box-sizing: border-box; }

/* Los <picture> que envuelven a los iconos y al logo (ver imagen_con_avif en
   ayudantes.php) NO deben pintar caja propia: con display:contents el <img>
   sigue siendo hijo directo del contenedor flex, exactamente como antes de
   meter el AVIF. Sin esto, un <li> con display:flex trataría al <picture>
   como elemento flexible y la maquetación podría moverse. */
picture { display: contents; }
:focus-visible { outline: 3px solid var(--mv-color); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* Tema global (validado en la home 2026-07-22): fondo degradado crema en
   todo el sitio, cabecera crema con barra de datos verde, footer verde
   mordiendo en onda. El blanco puro deja de ser el fondo base. */
/* `font-synthesis: none` para que esto no vuelva a pasar en silencio: solo
   tenemos Varela Round en 400 y Lato en 400/700. Al pedir un peso que no
   existe, el navegador se lo inventa engordando los trazos y el texto se ve
   emborronado, sin dar ningún aviso. Con esto, un peso que no tenemos
   simplemente no se aplica: se nota a la vista y se arregla, en vez de quedar
   una web con los títulos sucios sin saber por qué. */
body { margin: 0; font-family: 'Lato', system-ui, sans-serif; font-synthesis: none; color: var(--mv-texto); line-height: 1.55; background: var(--mv-degradado-crema); padding-bottom: var(--mv-alto-barra); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: 'Varela Round', system-ui, sans-serif; font-weight: 500; color: var(--mv-color); line-height: 1.25; }
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

/* Cabecera de presentación (logo/buscador/cliente): NO es sticky -- se
   desplaza con la página y desaparece al hacer scroll. El sticky vive en
   .mv-pestanas-envoltorio (justo debajo), que es quien se queda fijo arriba
   mientras se navega -- así el logo grande solo se ve al principio, pero la
   pestaña-logo pequeña del menú (que no se toca) sigue siempre a la vista. */
/* flex-wrap: nowrap a propósito -- los 3 bloques deben verse SIEMPRE en la
   misma fila y en el mismo orden, en móvil igual que en escritorio (así lo
   pidió José: que la cabecera se vea igual entre dispositivos). El logo y
   la píldora de cliente no encogen (flex: 0 0 auto); la válvula de escape
   es el buscador, que sí puede estrecharse hasta su min-width. */
.mv-cabecera-superior { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.5rem; background: var(--mv-degradado-crema); }

.mv-cabecera-logo { flex: 0 0 auto; }
.mv-logo-enlace { display: inline-block; line-height: 0; }
/* drop-shadow da el toque de profundidad ("3D suave") sin generar un asset
   nuevo, más marcado que el primer intento. La animación de entrada corre
   UNA vez al cargar (arranque tipo Netflix/HBO), con más recorrido (escala
   y un giro leve) para que se note de verdad; animation-fill-mode: both
   dentro del shorthand deja el logo en su estado final (escala 1, opaco) en
   vez de volver al de partida, y prefers-reduced-motion ya la anula (regla
   global al principio del fichero). El efecto 3D de verdad llega con el
   :hover de abajo, también más pronunciado que antes. */
.mv-logo {
    height: 76px;
    width: auto;
    display: block;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.25));
    animation: mv-logo-entrada 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: transform 0.35s ease;
}
@keyframes mv-logo-entrada {
    0% { opacity: 0; transform: scale(1.5) rotate(-6deg); }
    60% { opacity: 1; transform: scale(0.96) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.mv-logo-enlace:hover .mv-logo { transform: perspective(500px) rotateY(12deg) scale(1.08); }

/* Buscador estrecho a propósito -- sitio justo para un término de unas
   5 palabras, no una barra de ancho completo. Es el único de los 3 bloques
   que encoge (flex-shrink: 1): en pantallas estrechas cede espacio a logo
   y píldora en vez de forzar que la fila entera se apile en varias líneas. */
.mv-cabecera-buscar { position: relative; flex: 0 1 260px; min-width: 44px; }
.mv-buscador-icono { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: #999; pointer-events: none; }
.mv-buscador-input { width: 100%; padding: 0.55rem 0.9rem 0.55rem 2.3rem; border: 1px solid #ddd; border-radius: 999px; font: inherit; font-size: 0.95rem; background: #fff; }
.mv-buscador-input:focus { outline: none; border-color: var(--mv-color); box-shadow: 0 0 0 3px rgba(0,131,117,0.15); }
/* El popup de resultados se ancla al CENTRO del bloque (no a su borde
   izquierdo) y se acota al ancho de la pantalla -- si colgase del borde
   izquierdo del cuadro ya encogido (a veces menos de 50px en móvil),
   podría salirse por el lado derecho de la pantalla. */
.mv-buscador-resultados { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: max(280px, 100%); max-width: calc(100vw - 2rem); background: #fff; border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,0.18); max-height: 360px; overflow-y: auto; z-index: 150; }
.mv-buscador-resultado { display: block; padding: 0.6rem 0.9rem; text-decoration: none; color: var(--mv-texto); border-bottom: 1px solid #f0f0f0; }
.mv-buscador-resultado:last-child { border-bottom: none; }
.mv-buscador-resultado:hover { background: #f7f5f0; }
.mv-buscador-resultado-tipo { display: block; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mv-color); }
.mv-buscador-resultado-titulo { display: block; font-weight: 600; }
.mv-buscador-resultado-extracto { display: block; font-size: 0.8rem; color: #777; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-buscador-vacio { padding: 0.9rem; margin: 0; color: #777; font-size: 0.88rem; }

.mv-cabecera-cliente { flex: 0 0 auto; }
/* Misma técnica de brillo/3D que las píldoras del pie: degradado fijo +
   color de fondo aparte (transiciona en el hover) + sombras de relieve.
   Más pequeña que el primer intento -- no debe competir en tamaño con el
   logo. */
.mv-cliente-pildora {
    display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border-radius: 999px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.02) 55%);
    background-color: var(--mv-color); color: #fff; text-decoration: none; font-weight: bold; font-size: 0.82rem; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.18), 0 2px 5px rgba(0,0,0,0.15);
    transition: background-color 0.15s;
}
.mv-cliente-pildora:hover { background-color: var(--mv-color-oscuro); }

/* El menú de pestañas es quien hereda el sticky que antes tenía toda la
   cabecera -- se queda fijo arriba al hacer scroll, la cabecera de encima
   no. Envoltorio en fila: las flechas son columnas REALES de ancho fijo
   (nunca se superponen a ninguna pestaña) y el <nav> ocupa el resto. Ya no
   necesita el margen negativo que tenía antes (compensaba el padding de
   .mv-cabecera, que ahora no existe) -- sin padding horizontal propio, las
   flechas quedan pegadas al borde real por su cuenta. */
.mv-pestanas-envoltorio { position: sticky; top: 0; z-index: 100; background: var(--mv-degradado-crema); box-shadow: 0 1px 4px rgba(0,0,0,0.08); padding-top: 0.7rem; display: flex; align-items: stretch; }

/* "Engranaje": cada pestaña es un diente -- el deslizamiento siempre encaja
   en una pestaña entera (scroll-snap-type: mandatory) y esa pestaña queda
   CENTRADA (scroll-snap-align: center), como una rueda de selección: la del
   centro es la que "está puesta". touch-action: pan-x bloquea el arrastre
   vertical, para que en móvil solo se mueva a los lados, nunca arriba/abajo.
   SIN scroll-behavior: smooth a propósito -- con él, el propio reajuste
   nativo del encaje (al soltar el dedo) se animaba solo, y eso es lo que se
   veía como "el menú recorre por su cuenta". El clic debe ser seco, no un
   deslizamiento -- coherente además con el propio símil del engranaje. El
   JS pide una animación suave EXPLÍCITAMENTE cuando de verdad la quiere
   (al pulsar una flecha), vía scrollIntoView({behavior:'smooth'}). */
.mv-pestanas { display: flex; align-items: flex-end; gap: 0.3rem; flex: 1 1 auto; min-width: 0; padding: 0 0.3rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; touch-action: pan-x; }
.mv-pestanas::-webkit-scrollbar { display: none; }
.mv-pestana { position: relative; top: 2px; flex-shrink: 0; scroll-snap-align: center; padding: 0.7rem 1.4rem; border-radius: 10px 10px 0 0; background: #ece4d3; color: var(--mv-texto); text-decoration: none; font-weight: 600; font-size: 1.05rem; line-height: 1.4; white-space: nowrap; transition: background-color 0.15s, color 0.15s, transform 0.15s; }
.mv-pestana:hover { background: #e2d7bf; }
/* mv-pestana-activa: la marca el servidor (funciona igual sin JS). En cuanto
   el JS arranca, el relevo del dorado pasa a mv-pestana-centrada, que se
   mueve en vivo con el dedo -- por eso comparten look. */
.mv-pestana-activa,
.mv-pestana-centrada { top: 0; background: var(--mv-dorado); color: #fff; box-shadow: 0 -1px 3px rgba(0,0,0,0.12); transform: scale(1.05); }
.mv-pestana-activa:hover,
.mv-pestana-centrada:hover { background: var(--mv-dorado); }
/* Pestaña del logo: participa del carrusel como una más -- puede quedar
   centrada y dorada igual que el resto (el contraste del logo sobre dorado
   se revisa aparte más adelante). Logo dimensionado para igualar la altura
   de las pestañas de texto. */
.mv-pestana-logo { display: flex; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.mv-pestana-logo img { display: block; height: 27px; width: auto; }

/* Flechas de aviso "esto se mueve a los lados": columnas fijas, pegadas al
   borde real de la cabecera, nunca sobre una pestaña. Se atenúan (no
   desaparecen) cuando no queda más de ese lado, así el ancho nunca salta.
   Decorativas para quien usa ratón o dedo -- por teclado o lector de
   pantalla se llega a todas las pestañas igual (de ahí aria-hidden). */
.mv-pestanas-flecha { flex: 0 0 auto; width: 1.3rem; display: flex; align-items: center; justify-content: center; border: none; padding: 0; margin: 0; cursor: pointer; background: transparent; color: var(--mv-dorado-texto); font-size: 1.3rem; line-height: 1; opacity: 0.85; transition: opacity 0.15s; }
.mv-pestanas-flecha:hover { opacity: 1; }
/* Compartida con las flechas del menú del pie -- mismo comportamiento,
   distinto color de icono según sobre qué fondo caiga cada una. */
.mv-flecha--desactivada { opacity: 0.2; cursor: default; }
main { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; min-height: 50vh; }
/* Footer verde con mordisco en onda hacia arriba, en todas las páginas --
   mismo recorte que las franjas verdes de la home. El margin-top deja un
   hueco crema (fondo del body) que la onda muerde, sin pisar contenido. */
/* Sin hueco entre la última franja y el pie: la onda se dibuja ENCIMA de
   la franja anterior (antes había 36px de separación donde asomaba el
   fondo del body, que no casaba con el degradado de la franja). */
.mv-pie { position: relative; margin-top: 0; padding: 2rem 1.5rem; text-align: center; font-size: 0.85rem; background: var(--mv-color); color: #fff; }
/* El último bloque claro deja hueco abajo para que la onda no tape texto */
main > :last-child:not(.mv-franja--verde) { padding-bottom: 6rem; }
.mv-pie::before {
    content: "";
    position: absolute;
    top: -35px;
    left: 0;
    width: 100%;
    height: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,110 350,10 600,60 C850,110 1050,10 1200,60 L1200,120 L0,120 Z' fill='%23008375'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.mv-pie a { color: #fff; }
.mv-pie a:hover { text-decoration: underline; }

/* Menú del pie: SIN mecanismo de arrastre/carrusel -- se probó en producción
   (encaje + scroll-snap, igual que la cabecera) pero el scroll se comportaba
   raro y llegaba a afectar al menú de la cabecera; José revirtió esos dos
   despliegues. Se queda solo lo que sí gustó de esos intentos: las píldoras
   con relieve/brillo y el verde más claro para la página activa. En móvil,
   al no caber todas en una fila, simplemente pasan a la siguiente (flex-wrap
   normal) -- sin JS, sin flechas, sin nada que tocar el scroll. */
.mv-menu-secundario { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
/* Con .mv-pie por delante en cada selector para ganarle en especificidad a
   .mv-pie a:hover (arriba) -- si no, su "text-decoration: underline" se
   colaba en estas píldoras, que no deben subrayarse. */
/* Brillo/3D: el degradado (background-image) se queda fijo en todos los
   estados -- solo cambia el background-color de debajo -- así el color sí
   transiciona suave (background-image no anima bien entre navegadores) y el
   brillo superior + la sombra interior de abajo dan el relieve de "botón",
   no de etiqueta plana. */
/* border/font/cursor: la píldora de "Configurar cookies" es un <button>, no
   un <a> como las demás -- sin este reset conserva el borde nativo del
   navegador (se veía como un borde negro/gris distinto al resto). */
.mv-pie .mv-pie-pestana {
    padding: 0.4rem 1rem; border: none; border-radius: 999px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.04) 55%);
    background-color: rgba(255,255,255,0.14);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.15);
    color: #fff; text-decoration: none; font: inherit; font-weight: bold; font-size: 0.95rem; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mv-pie .mv-pie-pestana:hover { background-color: rgba(255,255,255,0.26); text-decoration: none; }
.mv-pie .mv-pie-pestana:active { transform: scale(0.96); box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 4px rgba(0,0,0,0.3); }
.mv-pie .mv-pie-pestana-activa {
    background-color: var(--mv-color-claro); color: #fff;
    box-shadow: 0 3px 6px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(0,0,0,0.18);
    transform: scale(1.05);
}
.mv-pie .mv-pie-pestana-activa:hover { background-color: var(--mv-color-claro); }

/* Barra inferior del pie: abajo del todo, beige degradado con texto negro,
   fija mientras se navega. Dos filas -- arriba teléfono/correo, abajo el
   copyright (reservada para más adelante mostrar avisos/novedades tipo
   teleprómpter, a petición de José). El body reserva la altura de la barra
   (--mv-alto-barra) para que no tape el final del contenido. */
/* Los botones de chat/WhatsApp ya no flotan sueltos por encima (tapaban
   contenido en móvil y ordenador): son flex items más de esta barra, a
   cada lado -- al no tener alto propio, "estiran" (align-items: stretch,
   por defecto) hasta igualar el alto real de la barra, aunque este cambie
   (p. ej. si el contacto pasa a tres líneas en una pantalla muy estrecha). */
.mv-pie-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; display: flex; align-items: stretch; background: var(--mv-degradado-crema); color: #1a1a1a; font-size: 0.82rem; box-shadow: 0 -2px 10px rgba(0,0,0,0.12); }
.mv-pie-inferior-contacto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 0.5rem 0.75rem; }
.mv-pie-inferior-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 1.5rem; }
/* Fila de avisos (por ahora solo el copyright): separada con una línea
   fina para que se lea como una segunda franja de información, no como
   parte suelta de la primera fila. */
.mv-pie-inferior-fila--aviso { margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.75rem; }
.mv-pie-inferior-contacto a { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; color: #1a1a1a; text-decoration: underline; font-weight: bold; white-space: nowrap; }
.mv-pie-inferior-contacto a:hover { color: var(--mv-color); }
.mv-pie-inferior-contacto svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
/* Botones de la barra (chat a la izquierda, WhatsApp a la derecha): icono +
   etiqueta en columna, para que se distinga cuál es cuál ahora que la barra
   tiene dos filas. Mismo truco de brillo/3D que las píldoras -- degradado
   fijo de background-image + color de fondo aparte (así el color sí
   transiciona en el hover) y sombras interiores/exteriores para dar relieve
   de botón, no de icono plano. Ambos en el mismo verde de marca (antes el
   de WhatsApp llevaba su verde oficial; se unifica con el de Movvel). Cada
   uno lleva la sombra hacia su lado exterior (chat -> derecha, WhatsApp ->
   izquierda) para que se note el "escalón" hacia el contenido central. */
.mv-pie-boton { flex: 0 0 auto; width: 3.6rem; margin: 0 0.3rem; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; border: none; cursor: pointer; text-decoration: none; color: #fff; line-height: 1; background-image: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.02) 55%); transition: background-color 0.15s, filter 0.15s; }
.mv-pie-boton-icono { font-size: 1.4rem; line-height: 1; display: flex; }
.mv-pie-boton svg { width: 22px; height: 22px; fill: #fff; }
.mv-pie-boton-etiqueta { font-size: 0.62rem; font-weight: bold; letter-spacing: 0.02em; }
.mv-pie-boton--chat,
.mv-pie-boton--whatsapp { background-color: var(--mv-color); }
.mv-pie-boton--chat { box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 6px rgba(0,0,0,0.22), 2px 0 6px rgba(0,0,0,0.15); }
.mv-pie-boton--whatsapp { box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 6px rgba(0,0,0,0.22), -2px 0 6px rgba(0,0,0,0.15); }
.mv-pie-boton--chat:hover,
.mv-pie-boton--whatsapp:hover { background-color: var(--mv-color-oscuro); }
.mv-pie-boton:active { filter: brightness(0.9); }
/* Aviso visual periódico -- una ráfaga corta de "vibración" cada varios
   segundos (no un movimiento constante, que cansaría la vista) para llamar
   la atención sobre que se puede hablar por aquí. prefers-reduced-motion ya
   lo anula globalmente (regla al principio del fichero). */
@keyframes mv-boton-aviso {
    0%, 78%, 100% { transform: translateY(0) rotate(0deg); }
    82% { transform: translateY(-3px) rotate(-6deg); }
    86% { transform: translateY(0) rotate(6deg); }
    90% { transform: translateY(-2px) rotate(-4deg); }
    94% { transform: translateY(0) rotate(0deg); }
}
.mv-pie-boton { animation: mv-boton-aviso 6s ease-in-out infinite; }
.mv-pie-boton--whatsapp { animation-delay: 3s; }

.mv-seccion-destacada { background: var(--mv-color); color: #fff; padding: 2rem; border-radius: 16px; margin: 2rem 0; }
.mv-seccion-destacada h2, .mv-seccion-destacada h3 { color: #fff; }
.mv-seccion-destacada .mv-boton { background: #fff; color: var(--mv-color); border-color: #fff; }
.mv-seccion-destacada .mv-boton:hover { background: transparent; color: #fff; }
.mv-seccion-destacada a:not(.mv-boton) { color: #fff; }

.mv-hero { text-align: center; padding: 1rem 0 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.mv-hero-fondo { background-size: cover; background-position: center; border-radius: 16px; padding: 3rem 1.5rem; position: relative; color: #fff; }
.mv-hero-fondo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.55), rgba(0,109,119,0.55)); border-radius: 16px; }
.mv-hero-fondo > * { position: relative; z-index: 1; }
.mv-hero-fondo h1, .mv-hero-fondo p { color: #fff; }
.mv-hero-img { max-width: 280px; width: 100%; height: auto; }
.mv-eslogan { font-size: 1.15rem; color: #444; }
.mv-boton { display: inline-block; margin: 0.75rem 0; padding: 0.65rem 1.4rem; background: transparent; color: var(--mv-color); text-decoration: none; border: 2px solid var(--mv-color); border-radius: 4px; font-weight: bold; transition: background-color 0.15s, color 0.15s; }
.mv-boton:hover { background: var(--mv-color); color: #fff; }
.mv-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; margin: 1rem 0; }
.mv-badges li { display: flex; align-items: center; gap: 0.4rem; background: var(--mv-color); color: #fff; padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: bold; }
.mv-badges li img { height: 20px; width: 20px; }
/* Insignias de silo con icono: un poco más grandes y con aire, para que el
   icono se lea. Los iconos son blancos, así que sobre la píldora verde
   quedan como en WordPress; en franja crema la píldora es verde igual. */
.mv-badges--icono li { padding: 0.5rem 1rem; font-size: 0.9rem; gap: 0.5rem; }
.mv-badges--icono li img { height: 28px; width: 28px; }
.mv-porque-elegir { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; text-align: center; }
.mv-porque-elegir li { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.mv-porque-elegir img { height: 64px; width: 64px; }
.mv-porque-elegir .mv-icono-dispositivo { height: 64px; width: 64px; color: var(--mv-color); }
.mv-franja--verde .mv-porque-elegir .mv-icono-dispositivo { color: #fff; }
.mv-seccion-imagen { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.mv-seccion-imagen .mv-seccion-texto { flex: 1 1 320px; }
.mv-seccion-imagen img { flex: 0 1 260px; max-width: 100%; height: auto; }
.mv-listado-marcas { list-style: none; padding: 0; }
.mv-listado-marcas li { padding: 0.5rem 0; border-bottom: 1px solid #eee; }
.mv-nota { font-size: 0.8rem; color: #888; }
.mv-listado-modelos { columns: 2; column-gap: 2rem; padding-left: 1.2rem; }
@media (max-width: 600px) { .mv-listado-modelos { columns: 1; } }
@media (max-width: 420px) { .mv-tarifas { grid-template-columns: 1fr; } }

.mv-servicios-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.mv-servicios-grid li { background: #f3ede0; padding: 1rem; border-radius: 8px; }
.mv-blog-buscador { margin: 1.5rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.mv-blog-buscador input { flex: 1 1 240px; max-width: 400px; padding: 0.6rem 0.9rem; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.mv-blog-buscador .mv-boton { margin: 0; }
/* Paginador del listado: con miles de artículos hay muchas páginas, así que
   se pinta una ventana alrededor de la actual (…, 4, 5, [6], 7, 8, …) en vez
   de la lista entera. */
.mv-paginador { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin: 2rem 0 0.5rem; }
.mv-paginador a,
.mv-paginador__actual { padding: 0.4rem 0.75rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.mv-paginador a { background: rgba(255,255,255,0.18); color: #fff; }
.mv-paginador a:hover { background: rgba(255,255,255,0.3); text-decoration: none; }
.mv-paginador__actual { background: var(--mv-dorado); color: #fff; }
.mv-paginador__hueco { color: rgba(255,255,255,0.6); }
.mv-paginador__total { text-align: center; color: rgba(255,255,255,0.75); }
/* Rejilla tipo mosaico: tamaños fijos por fila (grid-auto-rows) para que
   "grid-column/row: span 2" (la tarjeta grande) se comporte de forma
   predecible -- con auto-fit/minmax el número de columnas cambia solo y
   una tarjeta de 2x2 puede quedar mal encajada. */
/* Tres columnas, y el ALTO LO MANDA EL CONTENIDO (José, 16-08-2026).
   Con `grid-auto-rows` en píxeles la tarjeta tenía un alto fijo y un título
   largo empujaba la fecha fuera del recuadro: se perdían datos. Con `auto`,
   cada fila crece hasta lo que necesite la tarjeta más alta y no se tapa
   nada. Las de una misma fila se igualan entre sí, que es lo que hace que la
   rejilla siga leyéndose como rejilla. */
.mv-blog-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 2rem; margin: 1.5rem 0; align-items: stretch; }
/* Página de artículo: foto a un lado (fija mientras se lee, con un
   degradado suave hacia el fondo) + una única columna de lectura al otro
   lado -- no columnas de texto de verdad (en una pantalla con scroll
   obligan a bajar y volver a subir para seguir leyendo; el aspecto
   "revista" sale de maquetar foto+texto en paralelo, no de trocear el
   cuerpo). Esta franja anula el padding/ancho estándar de .mv-franja (que
   centra en una columna fija de 900px) porque aquí es .mv-entrada__diseno
   quien controla su propio ancho -- necesita más sitio para las dos
   columnas del que daba esa franja. */
.mv-entrada__franja-principal { padding: 0; }
.mv-entrada__diseno { display: flex; gap: 3rem; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem; }
.mv-entrada__imagen-col { flex: 0 0 38%; position: sticky; top: 90px; }
.mv-entrada__destacada {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px;
    opacity: 0.92;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
    mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.mv-entrada__contenido { flex: 1 1 auto; min-width: 0; max-width: 680px; }
.mv-entrada__cuerpo { font-size: 1.08rem; line-height: 1.75; margin-top: 1rem; }
.mv-entrada__navegacion { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.1); }
.mv-entrada__nav-enlace { display: flex; align-items: center; gap: 0.4rem; max-width: 46%; text-decoration: none; color: var(--mv-texto); font-weight: 600; font-size: 0.9rem; }
.mv-entrada__nav-enlace:hover { color: var(--mv-color); }
.mv-entrada__nav-enlace--siguiente { margin-left: auto; text-align: right; justify-content: flex-end; }
.mv-entrada__nav-enlace span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Subpestañas genéricas (subpestanas.php): se pegan justo debajo del menú
   principal al hacer scroll (mismo fondo/sombra, z-index un punto por
   debajo -- 99 frente a 100 -- para que se lean como el mismo mueble sin
   costura visible) y usan el mismo mecanismo de deslizar/flechas/clic que
   ese menú (mvIniciarMenuEngranaje, compartida). El "top" real se fija por
   JS (mide el alto de .mv-pestanas-envoltorio); aquí solo hace falta que
   sea sticky para que el JS tenga algo que colocar. */
/* Sin margen: es el primer elemento de <main>, pegado a la barra principal
   desde el primer momento (antes de esto, no solo al hacer scroll). */
.mv-subpestanas-envoltorio { position: sticky; top: 0; z-index: 99; display: flex; align-items: stretch; background: var(--mv-degradado-crema); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.mv-subpestanas { display: flex; align-items: flex-end; gap: 0.3rem; flex: 1 1 auto; min-width: 0; padding: 0.5rem 0.3rem 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; touch-action: pan-x; }
.mv-subpestanas::-webkit-scrollbar { display: none; }
/* Mismo mecanismo de "ficha" que .mv-pestana (top:2px en reposo, top:0 y
   dorada la activa/centrada) -- una fila secundaria del mismo mueble, solo
   que más pequeña. */
.mv-subpestana { position: relative; top: 2px; flex-shrink: 0; scroll-snap-align: center; padding: 0.45rem 0.9rem; border-radius: 8px 8px 0 0; background: #ece4d3; color: var(--mv-texto); text-decoration: none; font-weight: 600; font-size: 0.85rem; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.mv-subpestana:hover { background: #e2d7bf; }
.mv-subpestana-activa,
.mv-subpestana-centrada { top: 0; background: var(--mv-dorado); color: #fff; box-shadow: 0 -1px 3px rgba(0,0,0,0.12); }
.mv-subpestana-activa:hover,
.mv-subpestana-centrada:hover { background: var(--mv-dorado); }
.mv-subpestanas-flecha { flex: 0 0 auto; width: 1.3rem; display: flex; align-items: center; justify-content: center; border: none; padding: 0; margin: 0; cursor: pointer; background: transparent; color: var(--mv-dorado-texto); font-size: 1.2rem; line-height: 1; opacity: 0.85; transition: opacity 0.15s; }
.mv-subpestanas-flecha:hover { opacity: 1; }

@media (max-width: 900px) {
    .mv-entrada__diseno { flex-direction: column; gap: 1.5rem; padding: 2rem 1.5rem; }
    .mv-entrada__imagen-col { position: static; flex-basis: auto; width: 100%; }
    .mv-entrada__destacada { aspect-ratio: 16 / 9; -webkit-mask-image: none; mask-image: none; opacity: 1; }
    .mv-entrada__contenido { max-width: none; }
}
/* Tarjeta del listado: foto a sangre con el título superpuesto (velo
   degradado + texto al pie), como en los blogs editoriales de referencia
   -- ya no "foto arriba + texto debajo sobre fondo blanco". La grande
   ocupa 2x2 (una por posición: la más reciente + una cada 6, ver PHP). */
/* `align-self` + `width: fit-content` porque la píldora casi siempre cae
   dentro de un contenedor flex en columna (.mv-seccion-lado__texto), y ahí el
   `stretch` por defecto la estiraba a todo el ancho de la tarjeta: una
   píldora de borde a borde con la palabra "Curiosidades" perdida en el medio
   (José, 15-08-2026). `inline-block` no basta -- como hijo de un flex se
   comporta como bloque. */
.mv-blog-categoria { display: inline-block; align-self: flex-start; width: fit-content; background: var(--mv-color); color: #fff; font-size: 0.75rem; font-weight: bold; padding: 0.2rem 0.6rem; border-radius: 999px; }
.mv-blog-tarjeta { position: relative; grid-column: span 1; grid-row: span 1; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
/* `grid-row: span 1` desde que las filas son automáticas: con `span 2` la
   grande abarcaba dos filas de alto variable y arrastraba a toda la rejilla. */
.mv-blog-tarjeta--grande { grid-column: span 2; grid-row: span 1; }
.mv-blog-tarjeta--sin-foto { background: var(--mv-color); }
.mv-blog-tarjeta__enlace { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; color: #fff; }
.mv-blog-tarjeta__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.mv-blog-tarjeta:hover .mv-blog-tarjeta__foto { transform: scale(1.05); }
.mv-blog-tarjeta__velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.35) 45%, transparent 75%); }
.mv-blog-tarjeta__categoria { position: absolute; top: 0.85rem; left: 0.85rem; }
.mv-blog-tarjeta__pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.1rem; }
/* PESO 400 Y NO 600 (José, 16-08-2026: "se ve como con poca calidad").
   Solo tenemos varela-round-400.woff2 -- no hay fichero de negrita. Al pedir
   600 el navegador NO usa otra fuente: coge la de 400 y la engorda a la
   fuerza duplicando trazos (negrita sintética), y eso se ve emborronado. Con
   la foto detrás y el texto en blanco no cantaba; en negro sobre blanco, sí.
   Si algún día hace falta un título más contundente, se sube el tamaño o se
   añade el .woff2 de la negrita de verdad -- pero no se pide un peso que no
   existe. */
.mv-blog-tarjeta__titulo { display: block; font-family: 'Varela Round', system-ui, sans-serif; font-weight: 400; font-size: 1.05rem; line-height: 1.3; }
.mv-blog-tarjeta--grande .mv-blog-tarjeta__titulo { font-size: 1.5rem; }
.mv-blog-tarjeta__fecha { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.85); margin-top: 0.3rem; }

/* =====================================================================
   TARJETA NORMAL: LA FOTO ARRIBA Y EL TEXTO DEBAJO (José, 15-08-2026)
   "Todos los artículos llevan el título incrustado en la foto y se ve
   extraño". Y era verdad: con 65 artículos la rejilla entera eran
   titulares sobre fotos, y los títulos largos del blog no caben en un
   velo de 220 px sin quedar apelotonados encima de la imagen.
   El título sobre la foto SE QUEDA, pero solo en la grande: ahí hay
   sitio de sobra y es lo que la hace destacar como pieza de portada.
   Se excluye también --sin-foto, que no tiene imagen que poner arriba y
   ya se pinta como bloque verde con el texto en blanco.
   ===================================================================== */
.mv-blog-tarjeta--normal { background: #fff; }
.mv-blog-tarjeta--normal .mv-blog-tarjeta__enlace { display: flex; flex-direction: column; height: auto; color: var(--mv-texto); }
/* La foto con proporción propia y `object-fit: cover`: antes era un
   porcentaje de un alto fijo, y según la foto recortaba por donde le daba la
   gana. Con una proporción fija todas las tarjetas recortan igual. */
.mv-blog-tarjeta--normal .mv-blog-tarjeta__foto { position: static; flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mv-blog-tarjeta--normal .mv-blog-tarjeta__velo { display: none; }
.mv-blog-tarjeta--normal .mv-blog-tarjeta__categoria { position: static; margin: 0.7rem 0.9rem 0; }
/* `margin-top: auto` empuja el pie abajo del todo: cuando una tarjeta de la
   fila es más alta que las demás, las fechas siguen alineadas entre sí en vez
   de quedar cada una a una altura. */
.mv-blog-tarjeta--normal .mv-blog-tarjeta__pie { position: static; padding: 0.45rem 0.9rem 0.9rem; margin-top: auto; }
/* Título en el color del texto y no en el verde de marca: el verde sobre
   blanco a este tamaño se lee lavado, que es el "se ve borroso" de José. */
.mv-blog-tarjeta--normal .mv-blog-tarjeta__titulo { color: var(--mv-texto); font-size: 1rem; }
.mv-blog-tarjeta--normal .mv-blog-tarjeta__fecha { color: #888; }

/* Las dos que SÍ llevan el texto encima necesitan un alto propio: su foto y
   su pie van en posición absoluta, así que sin esto la tarjeta se quedaría en
   la altura del pie al pasar la rejilla a filas automáticas. */
.mv-blog-tarjeta--grande { aspect-ratio: 16 / 10; }
.mv-blog-tarjeta--sin-foto { min-height: 220px; }
/* Hueco de banner propio, intercalado en la rejilla -- recuadro con marco
   blanco a propósito, para que se lea como "hueco" y no como un artículo
   más entre las fotos a sangre. */
.mv-blog-banner-hueco { grid-column: span 1; grid-row: span 1; background: #fff; border-radius: 14px; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.mv-blog-banner-hueco img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Secciones de portada en estilo TEXTO: título + un trozo del artículo, sin
   foto grande. Tarjetas blancas para que se lean bien sobre cualquiera de los
   dos fondos (verde o crema) que puede llevar la franja. */
.mv-seccion-texto { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.mv-seccion-texto__item { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: box-shadow 0.15s; }
.mv-seccion-texto__item:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.16); }
.mv-seccion-texto__item a { display: block; padding: 1.25rem; text-decoration: none; color: var(--mv-texto); }
.mv-seccion-texto__item h3 { margin: 0.5rem 0; font-size: 1.1rem; color: var(--mv-color); }
.mv-seccion-texto__item p { margin: 0.4rem 0; font-size: 0.9rem; color: #555; }
.mv-seccion-texto__item .mv-fecha { font-size: 0.8rem; color: #888; }
/* El banner intercalado es un <li> de rejilla igual que en el mosaico, pero
   aquí las filas no tienen alto fijo: se le da uno mínimo para que no quede
   como una raya. */
.mv-seccion-texto .mv-blog-banner-hueco { grid-column: auto; grid-row: auto; min-height: 160px; }

/* Secciones de portada en estilo AL LADO: foto a la izquierda, texto a la
   derecha, en filas. */
.mv-seccion-lado { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.mv-seccion-lado__item { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: box-shadow 0.15s; }
.mv-seccion-lado__item:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.16); }
.mv-seccion-lado__item a { display: flex; align-items: stretch; gap: 1.25rem; text-decoration: none; color: var(--mv-texto); }
.mv-seccion-lado__foto { flex: 0 0 34%; max-width: 240px; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mv-seccion-lado__foto--vacia { background: var(--mv-color); }
.mv-seccion-lado__texto { display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; padding: 1rem 1.25rem 1rem 0; min-width: 0; }
.mv-seccion-lado__titulo { font-family: 'Varela Round', system-ui, sans-serif; font-size: 1.15rem; line-height: 1.3; color: var(--mv-color); }
.mv-seccion-lado__extracto { font-size: 0.9rem; color: #555; }
.mv-seccion-lado__item .mv-fecha { font-size: 0.8rem; color: #888; }
.mv-seccion-lado .mv-blog-banner-hueco { display: flex; min-height: 120px; }

/* Archivo: los años en una sola fila de píldoras doradas y centradas. Antes no
   tenía ni una regla, así que salía la lista con viñetas de serie del
   navegador -- un año debajo de otro y la franja beige larguísima para cinco
   enlaces (José, 15-08-2026). Doradas como las del menú de la cabecera. */
.mv-blog-archivo { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.mv-blog-archivo a { display: inline-block; padding: 0.4rem 1.2rem; border-radius: 999px; background: var(--mv-dorado); color: #fff; font-weight: bold; text-decoration: none; transition: background-color 0.15s; }
.mv-blog-archivo a:hover { background: var(--mv-dorado-oscuro); }

/* Franja de poca chicha (el Archivo): mismos márgenes laterales que el resto,
   pero sin el respiro vertical de una franja con contenido de verdad. Solo se
   toca el padding vertical para no perder las guardas laterales de .mv-franja. */
.mv-franja.mv-franja--compacta { padding-block: 1.75rem; }
.mv-franja--compacta h2 { text-align: center; margin-bottom: 0; }
@media (max-width: 560px) {
    /* En móvil la foto al lado deja el texto en una columna demasiado
       estrecha: se apila. */
    .mv-seccion-lado__item a { flex-direction: column; gap: 0; }
    .mv-seccion-lado__foto { flex-basis: auto; max-width: none; width: 100%; aspect-ratio: 16 / 9; }
    .mv-seccion-lado__texto { padding: 1rem 1.25rem; }
}
@media (max-width: 900px) { .mv-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
    .mv-blog-grid { grid-template-columns: 1fr; }
    .mv-blog-tarjeta--grande { grid-column: span 1; }
}
/* Tarifas presentadas como productos: rejilla de 3 en 3, icono grande
   arriba, nombre debajo y el precio destacado al pie de la tarjeta. */
.mv-tarifas { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.mv-tarifas li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.75rem 1.25rem; background: #fff; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); transition: box-shadow 0.15s, transform 0.15s; }
.mv-tarifas li:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.12); transform: translateY(-3px); }
.mv-tarifas li img { width: 120px; height: 120px; object-fit: contain; }
.mv-tarifas__nombre { font-size: 1.05rem; font-weight: bold; color: var(--mv-texto); line-height: 1.35; }
.mv-tarifas__precio { margin-top: auto; font-family: 'Varela Round', system-ui, sans-serif; font-size: 2rem; line-height: 1; color: var(--mv-color); }
.mv-tarifas__precio small { font-size: 0.9rem; font-family: 'Lato', system-ui, sans-serif; color: #666; }
.mv-titulo-centrado { text-align: center; }

/* Mapa incrustado: mientras no se carga, la caja muestra el botón; una vez
   cargado, el iframe ocupa todo el hueco. Proporción fija para que no dé
   saltos al aparecer. */
/* El mapa: imagen fija nuestra hasta que el visitante pincha. Se acabo el
   recuadro verde vacio con borde de puntos que salia cuando no habia
   consentimiento -- ahora SIEMPRE se ve el plano. */
.mv-mapa { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 420px; border-radius: 14px; overflow: hidden; }
.mv-mapa-activar { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.mv-mapa-activar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La capa de encima: oscurece un poco el plano para que el texto se lea
   sobre cualquier zona del mapa, clara u oscura. */
.mv-mapa-capa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 1rem; text-align: center; background: rgba(0, 0, 0, 0.34); transition: background-color 0.15s; }
.mv-mapa-activar:hover .mv-mapa-capa, .mv-mapa-activar:focus-visible .mv-mapa-capa { background: rgba(0, 0, 0, 0.48); }
.mv-mapa-llamada { display: inline-block; padding: 0.6rem 1.4rem; border-radius: 999px; background: var(--mv-color); color: #fff; font-weight: bold; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
/* El aviso de que se carga Google va ANTES de pulsar, no despues: es lo que
   convierte el clic en una decision informada. */
.mv-mapa-aviso { color: #fff; font-size: 0.82rem; text-shadow: 0 1px 3px rgba(0,0,0,0.6); max-width: 34ch; }
.mv-mapa-pie { margin-top: 0.5rem; }
.mv-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mv-mapa:has(iframe) { border: 0; padding: 0; background: none; }
.mv-franja--verde .mv-mapa .mv-nota { color: rgba(255,255,255,0.8); }
.mv-tabla-precios { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.mv-tabla-precios th, .mv-tabla-precios td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #eee; }
/* FAQ como acordeón nativo (<details>/<summary>), sin JS. El summary es
   una píldora dorada tipo .mv-etiqueta que se rellena al pasar el ratón o
   al abrirse; marcador +/− a la derecha que gira. */
.mv-faq { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
.mv-faq-item { border-radius: 999px; }
.mv-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.1rem; background: rgba(201, 151, 31, 0.16); color: var(--mv-dorado-texto); font-weight: bold; border-radius: 999px; transition: background-color 0.15s, color 0.15s; }
.mv-faq-item summary::-webkit-details-marker { display: none; }
.mv-faq-item summary::after { content: "+"; font-size: 1.3rem; line-height: 1; flex-shrink: 0; transition: transform 0.2s; }
.mv-faq-item[open] summary,
.mv-faq-item summary:hover { background: var(--mv-dorado); color: #fff; }
.mv-faq-item[open] summary::after { content: "−"; }
.mv-faq-respuesta { padding: 0.5rem 1.1rem 0.25rem; }
.mv-faq-respuesta p { margin: 0.4rem 0; color: #444; }
/* En franja verde: la píldora cerrada es blanca translúcida para verse */
.mv-franja--verde .mv-faq-item summary { background: rgba(255,255,255,0.18); color: #fff; }
.mv-franja--verde .mv-faq-item[open] summary,
.mv-franja--verde .mv-faq-item summary:hover { background: #fff; color: var(--mv-color); }
.mv-franja--verde .mv-faq-respuesta p { color: #fff; }
.mv-contacto-datos, .mv-horario { list-style: none; padding: 0; }
.mv-contacto-datos li, .mv-horario li { padding: 0.3rem 0; }
.mv-form-contacto { display: flex; flex-direction: column; gap: 0.4rem; max-width: 480px; }
.mv-form-contacto input, .mv-form-contacto textarea { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
.mv-legal h3 { margin-top: 1.5rem; }
.mv-trayectoria { list-style: none; padding: 0; }
.mv-trayectoria li { padding: 0.4rem 0; border-left: 3px solid #008375; padding-left: 1rem; margin-bottom: 0.3rem; }
/* Botón oficial de Google (marca): "G" de cuatro colores sobre botón
   blanco, texto centrado. Mismo ancho que los campos del formulario. */
.mv-google-btn { display: flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; max-width: 480px; margin: 0.5rem auto; padding: 0.7rem 1rem; background: #fff; border: 1px solid #dadce0; border-radius: 999px; color: #3c4043; font-family: 'Roboto', 'Lato', system-ui, sans-serif; font-weight: bold; font-size: 0.95rem; text-decoration: none; box-shadow: 0 1px 2px rgba(60,64,67,0.15); transition: box-shadow 0.15s, background-color 0.15s; }
.mv-google-btn:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60,64,67,0.25); }
.mv-google-btn__icono { display: flex; flex-shrink: 0; }

/* Página de cuenta (registro / mi cuenta): fondo con la foto de la tienda
   y las secciones en tarjetas blancas encima, como en la web anterior. */
.mv-cuenta.mv-cuenta-fondo { max-width: none; margin: 0; padding: 2.5rem max(1.5rem, calc((100% - 1000px) / 2)) 4rem; background-image: linear-gradient(rgba(0,131,117,0.55), rgba(0,106,95,0.75)), url('/img/foto-fondo-registro.avif'); background-size: cover; background-position: center; background-attachment: fixed; }
.mv-cuenta-fondo > h1 { color: #fff; text-align: center; margin-bottom: 1.75rem; }
.mv-cuenta-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; align-items: start; }
.mv-cuenta-tarjeta { background: #fff; border-radius: 16px; padding: 1.75rem; box-shadow: 0 6px 24px rgba(0,0,0,0.18); margin-bottom: 1.5rem; }
.mv-cuenta-columnas > .mv-cuenta-tarjeta { margin-bottom: 0; }
.mv-cuenta-tarjeta--centrada { max-width: 460px; margin-inline: auto; }
.mv-cuenta-tarjeta h2 { margin-top: 0; }
/* Separador "o con tu email" con una línea a cada lado */
.mv-separador-o { display: flex; align-items: center; gap: 0.75rem; color: #888; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 1.25rem 0; }
.mv-separador-o::before, .mv-separador-o::after { content: ""; flex: 1; height: 1px; background: #e0e0e0; }
.mv-form-mensaje { padding: 0.75rem 1rem; border-radius: 6px; margin: 0.75rem 0; }
.mv-form-exito { background: #e6f4ea; color: #1e7a34; }
.mv-form-error { background: #fbe7e7; color: #a12727; }
.mv-form-info { background: #f6f0e2; color: var(--mv-color); }
/* El botón de abrir chat (.mv-chatbot-boton, id mv-chatbot-abrir) ya no
   flota por su cuenta: es el .mv-pie-boton--chat de la barra del pie (ver
   arriba). Solo el panel emergente sigue flotando, apoyado justo encima de
   esa barra. */
/* font-size: 1rem aquí es imprescindible, no cosmético: el panel es
   descendiente de .mv-pie-inferior (font-size: 0.82rem) desde que el botón
   que lo abre vive en esa barra -- sin este reset, el campo de texto del
   chat heredaba ~13px y el móvil hacía zoom automático de TODA la página al
   enfocarlo (cualquier input con menos de 16px dispara ese zoom en iOS/
   Android), dejando el chat ocupando toda la pantalla y tapando la web. */
.mv-chatbot-panel { position: fixed; bottom: calc(var(--mv-alto-barra) + 12px); left: 0.5rem; z-index: 9999; width: 320px; max-width: calc(100vw - 1rem); background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.2); display: none; flex-direction: column; overflow: hidden; font-size: 1rem; }
.mv-chatbot-panel.mv-abierto { display: flex; }
.mv-chatbot-cabecera { background: #008375; color: #fff; padding: 0.75rem 1rem; font-weight: bold; display: flex; align-items: center; justify-content: space-between; }
.mv-chatbot-cerrar { background: none; border: none; color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0; }
.mv-chatbot-cuerpo { padding: 1rem; color: #444; font-size: 0.9rem; }
.mv-chatbot-mensajes { padding: 1rem; overflow-y: auto; max-height: 360px; min-height: 160px; display: flex; flex-direction: column; gap: 0.5rem; }
.mv-chatbot-mensaje { padding: 0.55rem 0.8rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.35; max-width: 85%; word-wrap: break-word; }
.mv-chatbot-mensaje-bot { background: #f0f0f0; color: #222; align-self: flex-start; border-bottom-left-radius: 2px; }
.mv-chatbot-mensaje-usuario { background: #008375; color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }
.mv-chatbot-mensaje-bot.mv-chatbot-pensando { color: #999; font-style: italic; }
.mv-chatbot-form { display: flex; gap: 0.4rem; padding: 0.75rem; border-top: 1px solid #eee; }
.mv-chatbot-form input { flex: 1; padding: 0.5rem 0.7rem; border: 1px solid #ccc; border-radius: 20px; font: inherit; }
.mv-chatbot-form button { width: 36px; height: 36px; border-radius: 50%; border: none; background: #008375; color: #fff; cursor: pointer; font-size: 1rem; flex-shrink: 0; }

.mv-visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mv-calculadora { position: relative; z-index: 10; background: #f8f8f8; border-radius: 12px; padding: 1.5rem; margin: 2rem 0; }
.mv-calculadora h2 { margin-top: 0; }
.mv-calc-ayuda { margin: 0 0 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--mv-texto); }
.mv-calc-buscador { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.mv-calc-campo { position: relative; flex: 1 1 260px; }
.mv-calc-buscador input { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.mv-calc-buscador .mv-boton { margin: 0; background: var(--mv-color); color: #fff; cursor: pointer; font: inherit; }
.mv-calc-buscador .mv-boton:hover { background: var(--mv-color-oscuro); }
.mv-calc-resultado { margin-top: 1rem; }
.mv-calc-cargando { color: #666; font-size: 0.9rem; }
.mv-calc-lista-modelos { display: flex; flex-direction: column; gap: 0.5rem; }
.mv-calc-modelo { text-align: left; padding: 0.65rem 0.9rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; font: inherit; }
.mv-calc-modelo:hover { border-color: #008375; }
.mv-calc-modelo.mv-seleccionado { border-color: #008375; background: #e6f4f2; font-weight: bold; }
.mv-calc-label-reparacion { display: block; margin: 1rem 0 0.3rem; font-weight: bold; }
.mv-calc-select { width: 100%; max-width: 360px; padding: 0.6rem; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.mv-calc-opciones { list-style: none; padding: 0; margin: 1rem 0; }
.mv-calc-opciones li { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.9rem; background: #fff; border: 1px solid #eee; border-radius: 6px; margin-bottom: 0.4rem; }
.mv-calc-opciones li strong { color: #008375; font-size: 1.1rem; }
/* Qué cubre el precio. Va destacado y justo debajo del importe: es lo
   primero que pregunta el cliente ("¿eso con la mano de obra?"). */
.mv-calc-incluye { margin: 0.2rem 0 0; font-weight: bold; color: #008375; }
/* Calculadora apagada desde el panel: en vez de un hueco, cómo preguntarlo */
.mv-calc-contacto { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
/* Aviso de "precio orientativo" pegado al importe. Legible a propósito
   (0.85rem, no gris claro): si no se lee, no cumple su función legal. */
.mv-calc-aviso { font-size: 0.85rem; line-height: 1.45; color: #555; margin: 0.6rem 0 1rem; }
.mv-calc-aviso a { color: inherit; text-decoration: underline; }

/* ==========================================================
 * Landing "Servicio Técnico" (/servicio-tecnico/) -- destino de los ads.
 * La calculadora es el protagonista del hero: sin caja propia y con el
 * campo de búsqueda a mayor tamaño, para que sea lo primero que se toca.
 * ========================================================== */
.mv-calculadora--hero { background: none; padding: 0; margin: 1.5rem 0 0; }
.mv-calculadora--hero .mv-calc-buscador input { font-size: 1.05rem; padding: 0.85rem 1rem; }
.mv-calculadora--hero .mv-calc-buscador .mv-boton { padding: 0.85rem 1.6rem; }

.mv-st-hero { text-align: center; }
.mv-st-hero h1 { max-width: 20ch; margin-inline: auto; }
.mv-st-entrada { max-width: 60ch; margin-inline: auto; font-size: 1.05rem; }
.mv-st-hero .mv-calculadora { max-width: 620px; margin-inline: auto; text-align: left; }
.mv-st-hero .mv-calc-buscador { justify-content: center; }

.mv-st-avales { list-style: none; padding: 0; margin: 2rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; font-size: 0.9rem; font-weight: 600; }
.mv-st-avales li { display: flex; align-items: center; gap: 0.5rem; }
.mv-st-avales img { height: 26px; width: 26px; }

.mv-st-precios { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.mv-st-precios li { display: flex; flex-direction: column; gap: 0.3rem; background: #f3ede0; color: var(--mv-texto); border-radius: 12px; padding: 1.1rem 1.25rem; }
.mv-st-precios__servicio { font-weight: bold; }
.mv-st-precios__importe { color: var(--mv-dorado-texto); }
.mv-st-precios__importe strong { font-size: 1.6rem; font-family: 'Varela Round', system-ui, sans-serif; }
.mv-st-precios__detalle { font-size: 0.85rem; color: #666; }

/* Los pasos son una secuencia real y el dato que importa es el tiempo,
   así que el marcador es el plazo, no un número decorativo. */
.mv-st-pasos { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }
.mv-st-pasos li { border-top: 3px solid var(--mv-dorado); padding-top: 0.9rem; }
.mv-st-pasos__tiempo { display: inline-block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: bold; color: var(--mv-dorado-texto); }
.mv-st-pasos h3 { margin: 0.35rem 0 0.4rem; }
.mv-st-pasos p { margin: 0; }

.mv-st-cifras { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 2.5rem; }
.mv-st-cifras li { display: flex; flex-direction: column; }
.mv-st-cifras strong { font-family: 'Varela Round', system-ui, sans-serif; font-size: 2.4rem; line-height: 1; color: var(--mv-color); }
.mv-st-cifras span { font-size: 0.9rem; color: #555; }

/* ----------------------------------------------------------
 * Hero: los engranajes de reloj (líneas finas, mismo partial que "Cómo
 * funciona") van de fondo a la derecha, como los anillos de la home; el
 * contenido pasa por encima. La foto de engranajes se movió a la sección de
 * cierre "¿Lo traes?".
 * ---------------------------------------------------------- */
.mv-st-hero { position: relative; overflow: hidden; }
/* El :not() deja los engranajes en su capa de fondo (z-index 0). */
.mv-st-hero > *:not(.mv-st-engranajes) { position: relative; z-index: 1; }
/* La calculadora (protagonista) va en tarjeta clara y elevada. */
.mv-st-hero .mv-calculadora--hero {
    position: relative; z-index: 20; /* por encima de avales/engranajes para que el desplegable no quede tapado */
    background: #fff;
    border: 1px solid rgba(201,151,31,0.35);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    box-shadow: 0 12px 34px rgba(0,0,0,0.14);
    max-width: 640px;
    margin-inline: auto;
}

/* Icono "el mismo día": el png original era blanco (invisible sobre crema).
   Se sustituye por un SVG en verde Movvel, a juego con los demás avales. */
.mv-st-avales svg { height: 26px; width: 26px; flex: 0 0 auto; }

/* ----------------------------------------------------------
 * Calculadora: autocompletado (desplegable de modelos guardados mientras se
 * escribe), modelo seleccionado con su foto y popup de características.
 * ---------------------------------------------------------- */
/* Desplegable de sugerencias bajo el campo */
.mv-calc-sugerencias {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
    list-style: none; margin: 0; padding: 0.3rem;
    background: #fff; border: 1px solid #dcd7cc; border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.16); max-height: 300px; overflow-y: auto;
    text-align: left;
}
.mv-calc-sugerencias[hidden] { display: none; }
.mv-calc-sugerencia { padding: 0.6rem 0.7rem; border-radius: 7px; cursor: pointer; font-size: 0.95rem; }
.mv-calc-sugerencia:hover, .mv-calc-sugerencia.mv-activa { background: #e6f4f2; }

/* Modelo seleccionado (foto + nombre + botón de características) */
.mv-calc-sel { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem; background: #f6f3ec; border-radius: 12px; }
.mv-calc-sel__foto { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mv-calc-sel__foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mv-calc-sel__foto--generica img { width: 50%; height: 50%; opacity: 0.85; }
.mv-calc-sel__info { flex: 1 1 auto; min-width: 0; }
.mv-calc-sel__nombre { margin: 0 0 0.15rem; font-size: 1.1rem; }
.mv-calc-sel__num { display: block; font-size: 0.82rem; color: #777; margin-bottom: 0.5rem; }
.mv-calc-sel__caract { border: 1px solid var(--mv-color); background: #fff; color: var(--mv-color); border-radius: 999px; padding: 0.35rem 0.9rem; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.mv-calc-sel__caract:hover { background: var(--mv-color); color: #fff; }

/* Vende tu dispositivo (2026-08-01): cierre del widget de identificación con
   llamada a la acción, sin precio de compra automático todavía. */
.mv-calc-venta-cta { margin-top: 1rem; }
.mv-calc-venta-cta .mv-boton { margin-top: 0.25rem; }

/* Etiqueta de sub-marca sobre el H1 (p. ej. "Movvel Recompra") -- pequeña
   a propósito: refuerza marca sin competir con el H1, que es el que tiene
   que cargar con la intención de búsqueda real. */
.mv-marca-secundaria { display: block; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: bold; color: var(--mv-color); margin-bottom: 0.35rem; }
/* Variante para heros con foto de fondo (mv-hero-fondo pone h1/p en blanco;
   esta etiqueta necesita lo mismo, si no queda del color de marca sobre foto oscura). */
.mv-marca-secundaria--clara { color: #fff; }

/* La calculadora vive en tarjeta blanca (.mv-calculadora--hero) DENTRO del
   hero con foto -- .mv-hero-fondo pone color:#fff en TODO su contenido (se
   hereda), y eso se colaba dentro de la tarjeta blanca: campo de búsqueda,
   desplegable de sugerencias (texto blanco sobre su fondo verde pálido de
   hover -- "no se ven") y cualquier botón sin color propio, todo
   ilegible por blanco-sobre-blanco. Se resetea aquí el color heredado para
   toda la tarjeta de una vez, en vez de parchear cada elemento suelto. */
.mv-hero-fondo .mv-calculadora--hero { color: var(--mv-texto); }
/* El botón final ("Pedir tasación real") no tiene color propio (usa el
   .mv-boton base, contorno) -- sin esto seguiría heredando blanco de
   .mv-hero-fondo .mv-boton. El de "Buscar" NO se toca aquí: ese ya tiene su
   propio fondo/color explícitos (.mv-calc-buscador .mv-boton) y no debe
   heredar nada. */
.mv-hero-fondo .mv-calc-venta-cta .mv-boton { color: var(--mv-color); border-color: var(--mv-color); }
.mv-hero-fondo .mv-calc-venta-cta .mv-boton:hover { background: var(--mv-color); color: #fff; }

/* Condiciones de compra (Vende tu dispositivo, 2026-08-01): tarjetas claras
   sobre la franja verde -- mismo motivo que las tarjetas de oferta de
   Trabaja con nosotros, textos en negro para que se lean sobre el fondo
   claro de cada tarjeta. La de "hay que estar desbloqueado" se destaca
   más: es la condición que más descarta compras, José pidió que sea muy
   visible. */
.mv-condiciones { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1rem 0 1.5rem; }
.mv-condicion { background: #fff; border-radius: 14px; padding: 1.25rem 1.5rem; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
/* Aviso que sustituye a un cajetín cuando su conector está apagado.
   Tarjeta blanca con texto oscuro: va sobre la foto del hero, donde el texto
   heredado es blanco y sobre blanco no se leería nada -- el mismo fallo que
   ya se repitió con las tarjetas sobre franjas verdes. */
.mv-aviso-apagado { background: #fff; color: #222; border-radius: 14px; padding: 1.25rem 1.5rem; margin: 1rem auto; max-width: 640px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); text-align: left; }
.mv-aviso-apagado p { color: #222; margin: 0 0 0.5rem; }
.mv-aviso-apagado__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 0; }
.mv-aviso-apagado .mv-boton { margin: 0; }

/* La letra del grado (A/B/C/D) acompaña al nombre de marca sin competir con
   él: más pequeña, en gris y sin negrita. El nombre propio es el que manda. */
.mv-grado-letra { font-size: 0.85em; font-weight: 400; color: #6b6b6b; white-space: nowrap; }
.mv-franja--verde .mv-condicion h3 { color: #111; margin-top: 0; }
.mv-franja--verde .mv-condicion .mv-grado-letra { color: #5a5a5a; }
.mv-franja--verde .mv-condicion p { color: #333; }
.mv-franja--verde .mv-condicion a:not(.mv-boton) { color: #111; text-decoration: underline; }
.mv-condicion--aviso { border: 3px solid #c0392b; background: #fff5f4; }
.mv-condicion-etiqueta { display: inline-block; background: #c0392b; color: #fff; font-weight: bold; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 0.6rem; }
@media (min-width: 700px) {
    .mv-condiciones { grid-template-columns: repeat(2, 1fr); }
    .mv-condicion--aviso { grid-column: 1 / -1; }
}

/* Lista de resultados del respaldo "Buscar" cuando hay varios modelos */
.mv-calc-elige { margin: 1rem 0 0.4rem; font-weight: bold; }
.mv-calc-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.mv-calc-lista__item { text-align: left; width: 100%; padding: 0.65rem 0.9rem; border: 1px solid #dcd7cc; border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }
.mv-calc-lista__item:hover { border-color: var(--mv-color); background: #e6f4f2; }

/* Popup de características (ficha enriquecida de Icecat) */
.mv-calc-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.mv-calc-modal[hidden] { display: none; }
.mv-calc-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.mv-calc-modal__caja { position: relative; z-index: 1; background: #fff; color: var(--mv-texto); border-radius: 16px; max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 1.5rem 1.5rem 1.75rem; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.mv-calc-modal__cerrar { position: absolute; top: 0.5rem; right: 0.6rem; border: none; background: none; font-size: 1.8rem; line-height: 1; color: #888; cursor: pointer; padding: 0.2rem 0.4rem; }
.mv-calc-modal__cerrar:hover { color: var(--mv-texto); }
.mv-calc-modal__contenido h3 { margin: 0 1.5rem 0.75rem 0; }
.mv-calc-modal__media { float: right; width: 120px; margin: 0 0 0.75rem 1rem; }
.mv-calc-modal__media img { width: 100%; height: auto; border-radius: 8px; }
.mv-calc-modal__texto p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* ----------------------------------------------------------
 * "Precios claros": carrusel de artículos de tipo servicio publicados en
 * web. Scroll horizontal con snap contenido SOLO en la pista -- no toca
 * ni el header ni el main, así que no reproduce el problema del menú.
 * ---------------------------------------------------------- */
.mv-st-carrusel { position: relative; margin: 1.5rem 0 0.5rem; }
.mv-st-carrusel__pista {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0.25rem 0.25rem 1rem; margin: 0; list-style: none;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.mv-st-carrusel__item {
    scroll-snap-align: start; flex: 0 0 220px;
    display: flex; flex-direction: column;
    background: #fff; color: var(--mv-texto); border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.mv-st-carrusel__foto {
    aspect-ratio: 4 / 3; background: #f6f3ec;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mv-st-carrusel__foto img { width: 100%; height: 100%; object-fit: cover; }
.mv-st-carrusel__foto--generica svg { width: 44%; height: 44%; color: var(--mv-color); opacity: 0.7; }
.mv-st-carrusel__cuerpo { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 auto; }
.mv-st-carrusel__nombre { font-weight: bold; line-height: 1.3; }
.mv-st-carrusel__detalle { font-size: 0.85rem; color: #666; flex: 1 1 auto; }
.mv-st-carrusel__precio { color: var(--mv-dorado-texto); }
.mv-st-carrusel__precio strong { font-size: 1.45rem; font-family: 'Varela Round', system-ui, sans-serif; }
/* Sobre franja verde las tarjetas siguen siendo claras: se fuerza el texto
   oscuro que la franja verde pondría en blanco. */
.mv-franja--verde .mv-st-carrusel__nombre { color: var(--mv-texto); }

/* ----------------------------------------------------------
 * "Cómo funciona": engranajes de reloj girando (como los anillos de la
 * home, pero mecánicos) en cobre, latón y acero. Decorativos, detrás del
 * texto, a la derecha. SVG inline, sin imágenes externas.
 * ---------------------------------------------------------- */
.mv-st-engranajes {
    position: absolute; z-index: 0; pointer-events: none;
    width: clamp(110px, 24vw, 300px); aspect-ratio: 1; opacity: 0.85;
}
/* Hero: arriba a la izquierda. "Cómo funciona": arriba a la derecha.
   El tamaño va con clamp(vw) para que ENCOJA al reducir la ventana en vez
   de invadir el texto. */
.mv-st-hero .mv-st-engranajes { top: 8px; left: 8px; width: clamp(96px, 18vw, 220px); }
/* En "Cómo funciona" van abajo-derecha (hay hueco bajo los pasos) para no
   pisar el texto del último paso. */
.mv-st-comofunciona .mv-st-engranajes { bottom: 8px; right: 8px; width: clamp(96px, 20vw, 240px); opacity: 0.75; }
.mv-st-engranajes svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mv-st-engranajes .mv-engranaje { transform-box: fill-box; transform-origin: center; animation: mv-girar 16s linear infinite; }
.mv-st-engranajes .mv-engranaje--inv { animation-direction: reverse; animation-duration: 11s; }
.mv-st-engranajes .mv-engranaje--lento { animation-duration: 24s; }
@keyframes mv-girar { to { transform: rotate(360deg); } }
/* La franja "Cómo funciona" necesita dejar sitio a los engranajes a la
   derecha y que el texto pase por encima. */
.mv-st-comofunciona { position: relative; overflow: hidden; }
/* El :not() deja los engranajes en su capa de fondo (z-index 0); el resto
   del contenido pasa por encima. */
.mv-st-comofunciona > *:not(.mv-st-engranajes) { position: relative; z-index: 1; }

@media (max-width: 780px) {
    /* En móvil los engranajes se ven, pero pequeños y más tenues, como
       acento de esquina que no compite con el texto. */
    .mv-st-engranajes { width: clamp(78px, 26vw, 140px); opacity: 0.6; }
    .mv-st-hero .mv-st-engranajes { width: clamp(78px, 24vw, 130px); }
    .mv-calc-sel { flex-direction: column; text-align: center; }
    .mv-st-carrusel__item { flex-basis: 78%; }
    .mv-calc-modal__media { float: none; display: block; width: 120px; margin: 0 auto 0.75rem; }
}

/* ==========================================================
 * Responsivo -- adapta el mismo sitio a móvil, sin versión aparte.
 * ========================================================== */
@media (max-width: 780px) {
    /* La barra fija se compacta: menos separación y letra algo menor, para
       comer la mínima pantalla -- pero las dos filas (contacto y avisos)
       se quedan siempre visibles, la de avisos es la que José usará para
       novedades y tiene que verse también en móvil. */
    :root { --mv-alto-barra: 66px; }
    .mv-pie-inferior-contacto { padding: 0.4rem 0.6rem; font-size: 0.78rem; }
    .mv-pie-inferior-fila { gap: 0.2rem 0.9rem; }
    /* Un poco más adentro que en escritorio: pegados a la esquina, el propio
       gesto de scroll del móvil (y la zona del indicador de inicio en los
       iPhone sin botón) los dejaba medio tapados. */
    .mv-pie-boton { width: 3rem; margin: 0 0.5rem; }
    .mv-pie-boton-icono { font-size: 1.2rem; }
    .mv-pie-boton svg { width: 20px; height: 20px; }
    .mv-pie-boton-etiqueta { font-size: 0.58rem; }

    /* Pestañas: se quedan visibles y se deslizan con el dedo (scroll
       horizontal), sin hamburguesa -- el usuario ve que es un menú. */
    .mv-pestana { padding: 0.55rem 1rem; font-size: 0.88rem; }
    .mv-pie-pestana { padding: 0.35rem 0.8rem; font-size: 0.88rem; }

    /* Cabecera nueva: los 3 bloques se quedan en la MISMA fila que en
       escritorio (nowrap ya lo fija .mv-cabecera-superior arriba) -- solo
       se reducen tamaños y el hueco entre bloques, para que quepan sin
       apilarse en una pantalla estrecha. El buscador ya encoge por su
       cuenta (flex-shrink) hasta min-width si hace falta más sitio. */
    .mv-cabecera-superior { padding: 0.6rem 0.75rem; gap: 0.5rem; }
    .mv-logo { height: 54px; }
    .mv-cliente-pildora { padding: 0.35rem 0.7rem; font-size: 0.76rem; }

    main { padding: 1.5rem 1rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }

    .mv-hero-fondo { padding: 2rem 1.25rem; }
    .mv-seccion-destacada { padding: 1.25rem; }

    .mv-seccion-imagen { flex-direction: column; }
    .mv-seccion-imagen img { flex: 0 0 auto; width: 100%; max-width: 360px; order: -1; }

    .mv-tabla-precios { display: block; overflow-x: auto; white-space: nowrap; }

    /* Las tarifas pasan a 2 columnas (y a 1 en pantallas muy estrechas) */
    .mv-tarifas { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .mv-tarifas li { padding: 1.25rem 0.75rem; }
    .mv-tarifas li img { width: 90px; height: 90px; }
    .mv-tarifas__nombre { font-size: 0.95rem; }
    .mv-tarifas__precio { font-size: 1.6rem; }

    .mv-chatbot-panel { left: 0.5rem; right: 0.5rem; width: auto; max-width: none; }
}

/* ==========================================================
 * Prueba de rediseño "Pulso" -- solo en la portada (home).
 * Anillos de señal en el hero, aparición al hacer scroll,
 * cabecera y barra de contacto fijas. Sin librerías: solo
 * opacity/transform (compositor) y CSS puro para los anillos
 * y la trama, para no afectar al rendimiento.
 * ========================================================== */
/* Barra de datos en verde Movvel, de borde a borde: los márgenes negativos
   anulan el padding de la cabecera (1rem 1.5rem) para que el verde llegue
   hasta los bordes y hasta el filo inferior de la cabecera. */
.mv-inicio-rediseno {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Franjas a todo lo ancho (sin laterales blancos): el fondo llega de borde
   a borde y el contenido queda centrado a 900px vía padding lateral, sin
   envoltorios extra. Alternan el degradado crema validado y el verde
   Movvel, fusionadas: las verdes muerden a las cremas por arriba y por
   abajo con una onda (SVG en data-URI, sin imágenes externas). Sin
   esquinas redondeadas ni separación entre secciones. */
/* mv-franjas: clase para el <main> de cualquier página que use franjas
   (anula el ancho/padding del main global) -- la home usa mv-inicio-rediseno. */
.mv-franjas { max-width: none; margin: 0; padding: 0; }
.mv-franja { position: relative; padding: 3.5rem max(1.5rem, calc((100% - 900px) / 2)); }
/* Las franjas siempre pegadas entre sí: gana a reglas de página como
   ".mv-cuenta section { margin-bottom }" que dejaban huecos blancos */
main .mv-franja { margin: 0; }
.mv-franja--crema { background: var(--mv-degradado-crema); }
.mv-franja--verde { background: var(--mv-color); color: #fff; z-index: 1; }
.mv-franja--verde h1, .mv-franja--verde h2, .mv-franja--verde h3 { color: #fff; }
.mv-franja--verde a:not(.mv-boton) { color: #fff; }
/* El botón de Google tiene fondo blanco propio: si hereda el texto blanco
   de la franja verde queda invisible. Mantiene su texto oscuro. */
.mv-franja--verde .mv-boton { color: #fff; border-color: #fff; }
.mv-franja--verde .mv-boton:hover { background: #fff; color: var(--mv-color); }
.mv-franja--verde .mv-nota { color: rgba(255,255,255,0.75); }
.mv-franja--verde .mv-listado-marcas li { border-color: rgba(255,255,255,0.35); }
.mv-franja--verde .mv-badges li { background: #fff; color: var(--mv-color); }
/* Hero con foto de fondo dentro del sistema de franjas: a todo lo ancho,
   sin las esquinas redondeadas de la versión tarjeta */
.mv-franja.mv-hero-fondo, .mv-franja.mv-hero-fondo::before { border-radius: 0; }

/* =====================================================================
   TODOS LOS HEROS, EXACTAMENTE EL MISMO ALTO (José, 15-08-2026)
   El alto lo marcaba el contenido, así que cada página medía una cosa:
   sobre-nosotros (h1 y una línea) era cortísima, contacto (que además
   llevaba aspect-ratio 16/9 propio) era altísima, y las de insignias
   quedaban en medio. Al saltar de pestaña a pestaña parecía que
   cambiabas de web -- la queja no era el alto de ninguna en concreto,
   era el SALTO entre unas y otras.
   Con un alto único la transición se nota continua, y de paso el hueco
   queda reservado antes de que cargue la foto, que es justo lo que evita
   que el contenido baje de golpe (CLS) en el sitio que está en 100/100.
   Va con .mv-franja.mv-hero (dos clases) para ganarle a .mv-franja, que
   está más arriba y sólo tiene una.
   ===================================================================== */
.mv-franja.mv-hero,
.mv-franja.mv-hero-fondo {
    min-height: clamp(300px, 34vh, 380px);
    justify-content: center;
}
/* Sobre la foto oscura el botón va en blanco; al pasar el ratón, verde */
.mv-hero-fondo .mv-boton { color: #fff; border-color: #fff; }
.mv-hero-fondo .mv-boton:hover { background: var(--mv-color); border-color: var(--mv-color); color: #fff; }
/* Recuadros (servicios-grid) dentro de franja verde: tarjeta beige con
   texto oscuro y enlaces verdes -- sin esto heredaban el texto blanco de
   la franja y no se leían sobre la tarjeta clara */
.mv-franja--verde .mv-servicios-grid li { color: var(--mv-texto); }
.mv-franja--verde .mv-servicios-grid a { color: var(--mv-color); }
/* Anillos decorativos (como los del hero de la home) dentro de cualquier
   franja: a la derecha, cuadrados al alto completo de la franja (tope
   500px), y con z-index negativo para que TODO el texto pase por encima.
   Sobre franja verde van en blanco -- el dorado apenas se veía. */
.mv-franja__anillos { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); height: min(100%, 500px); aspect-ratio: 1; pointer-events: none; z-index: -1; }
.mv-franja__anillos .mv-anillo { width: 100%; height: 100%; }
.mv-franja--verde .mv-franja__anillos .mv-anillo { border-color: #fff; }
/* Si la página termina en franja verde, el footer (también verde) se funde
   con ella directamente: no hace falta dibujar la onda */
main:has(> .mv-franja--verde:last-of-type) ~ .mv-pie::before { display: none; }
.mv-franja--verde::before,
.mv-franja--verde::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,110 350,10 600,60 C850,110 1050,10 1200,60 L1200,120 L0,120 Z' fill='%23008375'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
.mv-franja--verde::before { top: -35px; }
.mv-franja--verde::after { bottom: -35px; transform: scaleY(-1); }

/* Banner de consentimiento de cookies (AEPD): fijo abajo, "Aceptar" y
   "Rechazar" con la misma prominencia. */
.mv-aviso-cookies { position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--mv-alto-barra) + 1rem); z-index: 9998; max-width: 720px; margin: 0 auto; background: #fff; color: var(--mv-texto); border: 2px solid var(--mv-color); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.22); padding: 1.1rem 1.35rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.mv-aviso-cookies[hidden] { display: none; }
.mv-aviso-cookies p { margin: 0; font-size: 0.9rem; flex: 1 1 320px; }
.mv-aviso-cookies a { color: var(--mv-color); font-weight: bold; }
.mv-aviso-cookies__botones { display: flex; gap: 0.6rem; flex-shrink: 0; }
.mv-aviso-cookies__botones .mv-boton { margin: 0; }
.mv-enlace-cookies { background: none; border: none; padding: 0; margin: 0.5rem 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

.mv-hero-pulso { overflow: hidden; display: flex; align-items: center; }
/* Anillos enteros (right positivo, ya no se cortan); el texto del hero
   puede superponerse a ellos -- son decorativos y van detrás (z-index). */
.mv-hero-pulso__anillos { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); width: 340px; height: 340px; pointer-events: none; z-index: 0; }
.mv-anillo { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--mv-dorado); opacity: 0; animation: mv-pulso 3.2s ease-out infinite; }
.mv-anillo:nth-child(2) { animation-delay: 1.05s; }
.mv-anillo:nth-child(3) { animation-delay: 2.1s; }
@keyframes mv-pulso { 0% { transform: scale(0.3); opacity: 0.55; } 100% { transform: scale(1); opacity: 0; } }
.mv-hero-pulso__texto { position: relative; z-index: 1; flex: 1 1 320px; }
.mv-etiqueta { display: inline-block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: bold; color: var(--mv-dorado-texto); background: rgba(201, 151, 31, 0.16); padding: 0.3rem 0.8rem; border-radius: 999px; margin-bottom: 0.9rem; }
/* Variante de la etiqueta usada como enlace real (píldora clicable) */
a.mv-etiqueta--enlace { text-decoration: none; transition: background-color 0.15s, color 0.15s; }
a.mv-etiqueta--enlace:hover { background: var(--mv-dorado); color: #fff; }
/* Sobre fondo verde el dorado translúcido + texto oscuro (pensado para
   fondo crema) pierde casi todo el contraste -- se ve "raro". Ahí las
   píldoras pasan a transparentes con borde blanco. */
.mv-franja--verde .mv-etiqueta { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.7); }
.mv-franja--verde a.mv-etiqueta--enlace:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: #fff; }
/* Botón con forma de píldora, conservando su tamaño y color */
.mv-boton--pildora { border-radius: 999px; }
/* Centra un elemento en línea (píldora o botón) sin centrar el texto que lo rodea */
.mv-centrado { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
/* Lista de píldoras-enlace: en fila, sin viñetas ni sangría */
.mv-pildoras { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mv-pildoras li { margin: 0; }
.mv-pildoras .mv-etiqueta { margin-bottom: 0; }
.mv-hero-pulso__texto h1 { font-size: 1.8rem; }
.mv-boton-dorado { border-color: var(--mv-dorado); color: var(--mv-dorado-texto); }
.mv-boton-dorado:hover { background: var(--mv-dorado); color: #fff; }

/* Trabaja con nosotros (2026-07-31): tarjetas de oferta sobre fondo verde,
   una oferta "destacada" (marcada con "★ " en el título del grupo, ver
   EsquemasPlantilla) se pinta claramente por encima de las demás para
   ayudar a reclutar ese puesto en concreto. */
.mv-ofertas { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1rem; }
.mv-oferta { background: #fff; color: #222; border-radius: 16px; padding: 1.5rem 1.75rem; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }
.mv-oferta h3 { margin-top: 0; }
/* Las tarjetas de oferta tienen fondo claro, pero viven dentro de una franja
   verde -- sin esto heredan el h3/.mv-boton en blanco de .mv-franja--verde
   (pensado para fondo oscuro) y quedan blanco sobre blanco, ilegibles. */
.mv-franja--verde .mv-oferta h3 { color: #111; }
.mv-franja--verde .mv-oferta .mv-boton { color: #111; border-color: #111; }
.mv-franja--verde .mv-oferta .mv-boton:hover { background: #111; color: #fff; }
.mv-oferta-detalle { margin: 0.75rem 0; padding-left: 1.15rem; }
.mv-oferta-detalle li { margin-bottom: 0.55rem; line-height: 1.4; }
.mv-oferta--destacada {
    border: 3px solid var(--mv-dorado, #e8a800);
    background: linear-gradient(135deg, #fff8e1, #ffffff);
    box-shadow: 0 10px 30px rgba(232,168,0,0.35);
    order: -1;
}
.mv-oferta-insignia { display: inline-block; background: var(--mv-dorado, #e8a800); color: #4a3600; font-weight: bold; font-size: 0.75rem; padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 0.6rem; }
@media (min-width: 700px) {
    .mv-ofertas { grid-template-columns: repeat(2, 1fr); }
    .mv-oferta--destacada { grid-column: 1 / -1; }
}

.mv-form-contacto select { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font: inherit; background: #fff; }
.mv-checkbox { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; margin: 0.5rem 0; }
.mv-checkbox input { margin-top: 0.2rem; flex-shrink: 0; }

/* Aparición al hacer scroll. Solo oculta si hay JS (.mv-js): sin JS los
   elementos se ven normales, nunca quedan invisibles por un fallo. */
.mv-js .mv-revela { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.mv-js .mv-revela.mv-visto { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .mv-anillo { animation: none; opacity: 0; }
    .mv-revela { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 780px) {
    .mv-franja { padding-top: 2.25rem; padding-bottom: 2.25rem; }
    .mv-franja--verde::before, .mv-franja--verde::after { height: 24px; }
    .mv-franja--verde::before { top: -23px; }
    .mv-franja--verde::after { bottom: -23px; }
    .mv-hero-pulso { flex-direction: column; text-align: center; }
    /* En móvil los anillos se centran detrás del texto, a tamaño reducido */
    .mv-hero-pulso__anillos { right: 50%; transform: translate(50%, -50%); width: 250px; height: 250px; }
    .mv-franja__anillos { right: 50%; transform: translate(50%, -50%); height: min(80%, 250px); }
}

/* =====================================================================
   Cita previa (/cita-previa/)
   Calendario servido entero por el servidor: se navega con enlaces
   normales (?mes= y ?fecha=), así que sin JavaScript funciona igual.
   ===================================================================== */

/* Fondo de temporada: si la foto de la estación todavía no está subida, el
   hero se queda con este degradado en vez de con un hueco roto. */
.mv-citas-hero {
    background-color: var(--mv-color);
    background-image: linear-gradient(135deg, #00695c 0%, #009688 55%, #4db6ac 100%);
    background-size: cover;
    background-position: center;
}

.mv-citas-nota-hero {
    margin-top: 1rem;
    color: #fff;
}

.mv-citas-nota-hero a {
    color: #fff;
    text-decoration: underline;
}

.mv-calendario {
    max-width: 640px;
    margin: 0 auto;
}

.mv-calendario-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mv-calendario-mes {
    font-size: 1.1rem;
    text-transform: capitalize;
    text-align: center;
}

.mv-calendario-rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}

.mv-calendario-dia-semana {
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    opacity: 0.75;
    padding-bottom: 0.25rem;
}

/* aspect-ratio: las casillas son cuadradas pase lo que pase con el ancho,
   que es lo que hace que la rejilla se lea como un calendario. */
.mv-calendario-dia,
.mv-calendario-hueco {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
}

.mv-calendario-dia {
    background: #fff;
    color: #1a1a1a;
    text-decoration: none;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.12s, box-shadow 0.12s;
}

a.mv-calendario-dia:hover,
a.mv-calendario-dia:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.mv-calendario-dia--elegido {
    border-color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Días sin huecos: se siguen viendo (el mes tiene que leerse entero) pero
   ni se pueden pulsar ni piden atención. */
.mv-calendario-dia--cerrado {
    background: rgba(255, 255, 255, 0.35);
    color: rgba(0, 0, 0, 0.4);
    box-shadow: none;
    text-decoration: line-through;
}

.mv-calendario-leyenda {
    margin-top: 1rem;
    text-align: center;
}

/* --- Horas libres ---------------------------------------------------- */
.mv-horas {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.mv-horas-campo {
    border: none;
    padding: 0;
    margin: 0 0 1rem;
}

.mv-horas-campo legend {
    font-weight: 700;
}

/* El radio de verdad se esconde pero sigue existiendo: el <label> es lo que
   se ve, y así el teclado y los lectores de pantalla siguen funcionando.
   (No se usa display:none, que lo sacaría del orden de tabulación.) */
.mv-horas input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.mv-horas label,
.mv-horas--bloqueadas span {
    display: inline-block;
    padding: 0.55rem 1rem;
    border: 2px solid var(--mv-color);
    border-radius: 999px;
    background: #fff;
    color: var(--mv-color);
    font-weight: 700;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.mv-horas input[type="radio"]:checked + label {
    background: var(--mv-color);
    color: #fff;
}

.mv-horas input[type="radio"]:focus-visible + label {
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}

/* Cuando el visitante no ha entrado en su cuenta las horas se enseñan, pero
   apagadas: que vea que hay sitio es lo que le anima a registrarse. */
.mv-horas--bloqueadas span {
    opacity: 0.5;
    cursor: default;
}

.mv-form-cita label {
    display: block;
    margin-top: 1rem;
    font-weight: 700;
}

.mv-form-cita input[type="text"],
.mv-form-cita textarea {
    width: 100%;
    max-width: 520px;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    /* 16px reales: por debajo, el navegador del móvil hace zoom solo al
       enfocar el campo y descoloca la página. */
    font-size: 1rem;
    font-family: inherit;
}

.mv-form-cita button {
    margin-top: 1.25rem;
}

/* --- Citas que el cliente ya tiene ----------------------------------- */
.mv-citas-mias {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mv-citas-mias li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mv-citas-pasos {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.7;
}

@media (max-width: 480px) {
    .mv-calendario-rejilla { gap: 0.25rem; }
    .mv-calendario-dia, .mv-calendario-hueco { font-size: 0.85rem; border-radius: 8px; }
    .mv-calendario-cabecera { flex-direction: column; }
}

/* =====================================================================
   Hero de /contacto: ya NO es un caso aparte (José, 15-08-2026).
   Tenía `aspect-ratio: 16/9` y `background-size: contain` para que la
   fachada se viera entera, sin recortar. Funcionaba, pero a cambio hacía
   esta página muchísimo más alta que las demás, y saltar de contacto a
   sobre-nosotros parecía cambiar de web. José: "estas deben ser
   exactamente de la misma altura".
   El precio de igualar el alto es que la foto ahora se recorta como en
   todas las demás. Es una decisión consciente: se cambia ver la fachada
   completa por que las páginas se sientan la misma web. Si algún día
   vuelve a interesar la foto entera, es este bloque el que hay que
   recuperar, no un apaño encima.
   ===================================================================== */

/* =====================================================================
   TIENDA (/tienda) -- Fase 0.
   Va en estilo.css y no en una hoja aparte a propósito: la web carga UNA
   sola hoja y ese es medio secreto del 100/100 de PageSpeed. Una segunda
   hoja son una petición más y un bloqueo de render más.
   La rejilla es de tarjetas iguales, todas del mismo alto, porque la
   homogeneidad de la parrilla es lo único que gustaba del tema Divi. Las
   fotos de producto llegan en la Fase 1 con el mismo criterio: lienzo
   cuadrado y mismo margen para todas.
   ===================================================================== */
.mv-tienda__entradilla { max-width: 60ch; font-size: 1.05rem; }

.mv-tienda__aviso { max-width: 60ch; color: #666; }

.mv-tienda__texto { max-width: 68ch; margin-top: 1.25rem; line-height: 1.7; }

/* Miga de pan visible. La misma jerarquía que el JSON-LD, y por eso sale de
   ControladorTienda::migaDe(): dos migas que se contradicen son peor que una. */
.mv-tienda-miga { font-size: 0.85rem; color: #6b6b6b; margin-bottom: 0.75rem; }
.mv-tienda-miga a { color: inherit; text-decoration: none; }
.mv-tienda-miga a:hover { text-decoration: underline; }
.mv-tienda-miga span { margin: 0 0.4rem; }
.mv-tienda-miga [aria-current="page"] { color: var(--mv-texto); font-weight: 600; margin: 0; }

/* auto-fill (no auto-fit): con una sola categoría publicada, auto-fit la
   estiraría a todo el ancho y la parrilla se vería rota. */
.mv-tienda-rejilla {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.mv-tienda-tarjeta { display: flex; }
.mv-tienda-tarjeta > a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; min-height: 96px; padding: 1.25rem 1rem;
    background: #fff; border: 1px solid #e8e2d6; border-radius: 12px;
    color: var(--mv-texto); text-decoration: none; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mv-tienda-tarjeta > a:hover {
    border-color: var(--mv-color); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px);
}
.mv-tienda-tarjeta__nombre { display: block; }

/* La tarjeta CON foto cambia de forma: la imagen manda arriba, a sangre, y el
   nombre debajo. La que no tiene foto se queda como estaba -- así una
   categoría sin foto no rompe la fila, sólo se ve más sobria. */
.mv-tienda-tarjeta--foto > a {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: 0; overflow: hidden;
}
.mv-tienda-tarjeta__foto {
    display: block; width: 100%;
    /* El hueco se reserva AQUÍ y no con width/height en el <img>: la foto la
       elige José y puede venir con cualquier proporción. Sin esto, la rejilla
       pega el salto al cargar las fotos y eso es lo que más penaliza en
       PageSpeed. */
    aspect-ratio: 4 / 3;
    background: #f2efe8;
}
.mv-tienda-tarjeta__foto img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
}
.mv-tienda-tarjeta--foto .mv-tienda-tarjeta__nombre { padding: 0.9rem 1rem; }

/* La cabecera de la categoría reutiliza el diseño de la página de artículo
   del blog (.mv-entrada__*): foto a un lado con el degradado que la funde con
   el fondo, y el texto al otro. Se reutiliza y no se copia a propósito -- si
   mañana se retoca ese diseño, esta cabecera va detrás sola, y en móvil hereda
   gratis el apilado y el quitar la máscara del @media de más abajo.

   Lo único propio es la PROPORCIÓN de la foto: el blog usa un retrato 4/5,
   pensado para una columna de imagen que acompaña a un artículo largo. Una
   categoría se lee en un pantallazo y su foto es de producto o de ambiente, no
   un retrato. Va dentro de un @media para no pisar el 16/9 que el bloque de
   móvil deja puesto: sin eso, esta regla (dos clases) ganaría por especificidad
   a la de allí (una) y el móvil se quedaría con la proporción del escritorio. */
@media (min-width: 901px) {
    .mv-tienda-cabecera .mv-entrada__destacada { aspect-ratio: 4 / 3; }
    /* Sin sticky: en el blog la foto acompaña mientras se lee un artículo
       largo. Aquí la franja es corta y la foto se despegaría a los dos dedos
       de scroll, que se ve como un salto y no como una intención. */
    .mv-tienda-cabecera .mv-entrada__imagen-col { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    .mv-tienda-tarjeta > a { transition: none; }
    .mv-tienda-tarjeta > a:hover { transform: none; }
}

/* --- Rejilla de productos de la tienda -------------------------------
   Todas las tarjetas del mismo alto y todas las fotos en el mismo cuadrado.
   La homogeneidad de la parrilla la dan DOS cosas a la vez: aquí el hueco
   cuadrado (aspect-ratio: 1) y, del lado del servidor,
   NormalizadorImagenProducto, que mete cada foto en un lienzo cuadrado con
   fondo blanco. Con una sola de las dos no basta. */
.mv-tienda-productos {
    list-style: none; margin: 1.5rem 0 0; padding: 0;
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.mv-producto {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e8e2d6; border-radius: 12px;
    overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mv-producto__foto { aspect-ratio: 1; background: #fff; }
/* La foto ya viene con su margen dentro del lienzo, así que aquí va a sangre:
   añadirle padding encima dejaría un blanco doble y descuadrado. */
.mv-producto__foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mv-producto__sinfoto { display: block; width: 100%; height: 100%; background: #f4f1ea; }

.mv-producto__datos { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 0.9rem 1rem; }
.mv-producto__marca { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mv-color); font-weight: 700; }
/* El nombre a dos líneas como mucho: si una tarjeta se estira a cuatro líneas
   rompe la alineación de toda la fila. */
.mv-producto__nombre {
    margin: 0; font-size: 0.95rem; line-height: 1.35; color: var(--mv-texto);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mv-producto__precio { margin: 0.35rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--mv-color); }
.mv-producto__desde { font-size: 0.75rem; font-weight: 600; color: #6b6b6b; text-transform: uppercase; letter-spacing: 0.04em; }
.mv-producto__precio--consultar { font-size: 0.95rem; color: #6b6b6b; }
.mv-producto__variantes { margin: 0.15rem 0 0; font-size: 0.78rem; color: #6b6b6b; }

.mv-tienda-paginacion { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; }
.mv-tienda-paginacion a { color: var(--mv-color); font-weight: 600; text-decoration: none; }
.mv-tienda-paginacion a:hover { text-decoration: underline; }

/* --- Ficha de producto ------------------------------------------------
   Dos columnas en escritorio, una debajo de otra en móvil. La foto se queda
   pegada arriba al hacer scroll SÓLO en escritorio: position:sticky deja de
   pegarse en cuanto su contenedor padre sale de pantalla, y en móvil, con la
   columna a lo alto, eso pasa enseguida y el efecto se ve roto. */
.mv-ficha { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1rem; }
/* La foto de la ficha. Era una caja cuadrada con un borde marcado y la foto
   pequeña en medio: mucho blanco y pinta de plantilla vieja. Ahora el borde se
   suaviza, hay algo de aire dentro y la foto crece hasta donde da el original
   sin pixelarse. */
.mv-ficha__foto { background: #fff; border: 1px solid #f0ece3; border-radius: 16px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.mv-ficha__lupa { display: block; width: 100%; height: 100%; padding: 6%; border: 0; background: none; cursor: zoom-in; }
.mv-ficha__foto img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.mv-ficha__lupa:hover img,
.mv-ficha__lupa:focus-visible img { transform: scale(1.04); }
.mv-ficha__lupa:focus-visible { outline: 3px solid var(--mv-color); outline-offset: -3px; }

/* El visor a pantalla completa. Se crea desde JS al primer clic. */
.mv-visor { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
            padding: 4vmin; background: rgba(20,18,15,.92); cursor: zoom-out; }
.mv-visor[hidden] { display: none; }
.mv-visor img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #fff; cursor: default; }
.mv-visor__cerrar { position: absolute; top: 2vmin; right: 2vmin; width: 44px; height: 44px; border: 0; border-radius: 50%;
                    background: rgba(255,255,255,.14); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.mv-visor__cerrar:hover { background: rgba(255,255,255,.26); }

@media (prefers-reduced-motion: reduce) {
    .mv-ficha__foto img { transition: none; }
    .mv-ficha__lupa:hover img, .mv-ficha__lupa:focus-visible img { transform: none; }
}
.mv-ficha__datos { display: flex; flex-direction: column; gap: 0.35rem; }
.mv-ficha__datos h1 { margin: 0.1rem 0 0.5rem; }

.mv-ficha__precio { margin: 0.5rem 0 0; font-size: 2rem; font-weight: 700; color: var(--mv-color); }
.mv-ficha__iva { margin: 0; font-size: 0.8rem; color: #6b6b6b; }
.mv-ficha__agotado { margin: 0.5rem 0 0; font-size: 1.1rem; font-weight: 700; color: var(--mv-dorado-texto); }

/* Selector de variante sin JavaScript: radios ocultos y sus labels haciendo de
   botones. El radio NO se pinta con display:none -- así no lo alcanza el
   teclado ni lo anuncia el lector de pantalla; se saca de la vista pero se
   queda en el árbol de accesibilidad. */
.mv-ficha-variantes { margin: 1.25rem 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mv-ficha-variantes legend { padding: 0; margin-bottom: 0.6rem; font-size: 0.85rem; font-weight: 600; color: #6b6b6b; }
.mv-ficha-variante__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mv-ficha-variante {
    display: flex; flex-direction: column; gap: 0.1rem; cursor: pointer;
    padding: 0.55rem 0.9rem; border: 2px solid #e0d9c9; border-radius: 10px;
    background: #fff; font-size: 0.9rem; line-height: 1.3;
    transition: border-color 0.15s, background-color 0.15s;
}
.mv-ficha-variante__nombre { font-weight: 600; }
.mv-ficha-variante__precio { font-size: 0.85rem; color: var(--mv-color); font-weight: 700; }
.mv-ficha-variante__agotado { font-size: 0.72rem; color: #9a9a9a; text-transform: uppercase; letter-spacing: 0.04em; }

.mv-ficha-variante__radio:checked + .mv-ficha-variante { border-color: var(--mv-color); background: color-mix(in srgb, var(--mv-color) 8%, white); }
.mv-ficha-variante__radio:focus-visible + .mv-ficha-variante { outline: 3px solid var(--mv-color); outline-offset: 2px; }
.mv-ficha-variante__radio:disabled + .mv-ficha-variante { opacity: 0.5; cursor: not-allowed; }

@media (min-width: 760px) {
    /* La foto manda un poco más que los datos: era 5/6 y la imagen se veía
       apretada al lado de un bloque de texto más ancho que ella. */
    .mv-ficha { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: 2.5rem; }

    /* La tira de miniaturas es un tercer hijo del grid: sin decirle dónde va,
       se colaba en la columna de los datos y los empujaba abajo. Se queda
       debajo de la foto, en su columna, y los datos ocupan las dos filas. */
    .mv-ficha__tiras { grid-column: 1; margin-top: 0; }
    .mv-ficha__datos { grid-column: 2; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
    .mv-ficha-variante { transition: none; }
}

/* La tarjeta entera es el enlace (ver categoria.php): en móvil acertar un
   título de dos líneas con el dedo es una lotería. */
.mv-producto__enlace {
    display: flex; flex-direction: column; height: 100%;
    color: inherit; text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.mv-producto:has(.mv-producto__enlace:hover) { border-color: var(--mv-color); box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.mv-producto__enlace:hover .mv-producto__nombre { color: var(--mv-color); }

/* --- Botón de comprar y carrito -------------------------------------- */
.mv-ficha__comprar { margin: 1.5rem 0 0; }
.mv-boton-comprar {
    display: inline-block; padding: 0.85rem 2rem; border: 0; border-radius: 999px;
    background: var(--mv-color); color: #fff; font-family: inherit;
    font-size: 1.05rem; font-weight: 700; cursor: pointer;
    transition: background-color 0.15s;
}
.mv-boton-comprar:hover { background: var(--mv-color-oscuro); }
.mv-ficha__ayuda { margin: 1rem 0 0; font-size: 0.9rem; color: #6b6b6b; }

.mv-carrito__aviso {
    max-width: 60ch; margin-top: 1rem; padding: 0.75rem 1rem;
    border-left: 4px solid var(--mv-dorado); background: rgba(201, 151, 31, 0.10);
    color: var(--mv-dorado-texto); font-size: 0.92rem; border-radius: 0 8px 8px 0;
}

.mv-carrito { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.mv-carrito__linea {
    display: grid; gap: 0.5rem 1rem; align-items: center;
    grid-template-columns: 1fr;
    padding: 1rem; background: #fff; border: 1px solid #e8e2d6; border-radius: 12px;
}
.mv-carrito__linea--agotada { opacity: 0.65; }
.mv-carrito__nombre { font-weight: 600; color: var(--mv-texto); text-decoration: none; }
.mv-carrito__nombre:hover { color: var(--mv-color); }
.mv-carrito__etiqueta { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--mv-dorado-texto); }

.mv-carrito__cantidad { display: flex; align-items: center; gap: 0.5rem; }
.mv-carrito__cantidad label { font-size: 0.8rem; color: #6b6b6b; }
/* 16px clavados y NO heredados: por debajo de eso, Safari en iPhone hace zoom
   solo al tocar el campo y descoloca la página entera. */
.mv-carrito__cantidad input { width: 4.5rem; padding: 0.4rem 0.5rem; font-size: 16px; font-family: inherit; border: 1px solid #d8d0be; border-radius: 8px; }
.mv-carrito__actualizar, .mv-carrito__quitar button {
    border: 0; background: none; padding: 0.4rem 0.2rem; cursor: pointer;
    font-family: inherit; font-size: 0.85rem; color: var(--mv-color); text-decoration: underline;
}
.mv-carrito__quitar button { color: #8a8a8a; }
.mv-carrito__quitar { margin: 0; }

.mv-carrito__precio { font-weight: 700; font-size: 1.1rem; color: var(--mv-color); }
.mv-carrito__precio small { display: block; font-weight: 400; font-size: 0.78rem; color: #6b6b6b; }

.mv-carrito__total {
    display: flex; justify-content: space-between; align-items: baseline;
    max-width: 24rem; margin: 1.5rem 0 0.25rem; padding-top: 1rem;
    border-top: 2px solid #e8e2d6; font-size: 1.15rem;
}
.mv-carrito__total strong { font-size: 1.6rem; color: var(--mv-color); }

@media (min-width: 700px) {
    .mv-carrito__linea { grid-template-columns: minmax(0, 1fr) auto auto auto; }
}

/* La píldora del carrito reutiliza .mv-cliente-pildora, que ya es verde sólido
   sobre crema. Sólo se le añade el contador. */
.mv-pildora-carrito { display: inline-flex; align-items: center; gap: 0.4rem; }
.mv-pildora-carrito__num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35em; height: 1.35em; padding: 0 0.3em;
    border-radius: 999px; background: #fff; color: var(--mv-color);
    font-size: 0.78rem; font-weight: 700; line-height: 1;
}

/* --- Pantalla de pago -------------------------------------------------
   Una columna en móvil, formulario + resumen en escritorio. El resumen NO va
   sticky: position:sticky deja de pegarse en cuanto su contenedor padre sale
   de pantalla, y aquí el padre es la rejilla, que acaba donde acaba el
   formulario. Se vería pegarse y despegarse a media página. */
.mv-checkout__columnas { display: grid; gap: 2rem; grid-template-columns: 1fr; }

.mv-checkout__errores {
    max-width: 60ch; margin-top: 1rem; padding: 1rem 1.25rem;
    border-left: 4px solid #b3261e; background: rgba(179, 38, 30, 0.07);
    border-radius: 0 8px 8px 0;
}
.mv-checkout__errores p { margin: 0 0 0.5rem; }
.mv-checkout__errores ul { margin: 0; padding-left: 1.2rem; }

.mv-checkout__bloque { margin: 0 0 1.75rem; padding: 0; border: 0; }
.mv-checkout__bloque legend { padding: 0; margin-bottom: 0.75rem; font-family: 'Varela Round', system-ui, sans-serif; font-size: 1.15rem; color: var(--mv-color); }

.mv-checkout__opcion { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; background: #fff; border: 1px solid #e8e2d6; border-radius: 10px; cursor: pointer; }
.mv-checkout__opcion:has(input:checked) { border-color: var(--mv-color); background: color-mix(in srgb, var(--mv-color) 6%, white); }
.mv-checkout__opcion small { display: block; color: #6b6b6b; font-size: 0.82rem; }
.mv-checkout__recargo { display: inline-block; margin-left: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--mv-dorado-texto); }

.mv-campo { margin-bottom: 0.9rem; }
.mv-campo label { display: block; margin-bottom: 0.25rem; font-size: 0.88rem; font-weight: 600; }
.mv-campo label small { font-weight: 400; color: #6b6b6b; }
/* 16px CLAVADOS, no heredados: por debajo de eso Safari en iPhone hace zoom al
   tocar el campo y descoloca la pantalla de pago entera. */
.mv-campo input, .mv-campo textarea {
    width: 100%; padding: 0.6rem 0.7rem; font-size: 16px; font-family: inherit;
    border: 1px solid #d8d0be; border-radius: 8px; background: #fff; box-sizing: border-box;
}
.mv-campo input:focus, .mv-campo textarea:focus { outline: none; border-color: var(--mv-color); box-shadow: 0 0 0 3px rgba(0,131,117,0.15); }
.mv-campo--corto input { max-width: 9rem; }

.mv-checkout__nota { font-size: 0.85rem; color: #6b6b6b; }

.mv-checkout__resumen { padding: 1.25rem; background: #fff; border: 1px solid #e8e2d6; border-radius: 12px; align-self: start; }
.mv-checkout__resumen h2 { margin-top: 0; font-size: 1.2rem; }
.mv-resumen__lineas { list-style: none; margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid #eee7da; font-size: 0.88rem; }
.mv-resumen__lineas li { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.mv-resumen__totales { margin: 0; }
.mv-resumen__totales > div { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; font-size: 0.92rem; }
.mv-resumen__totales dt, .mv-resumen__totales dd { margin: 0; }
.mv-resumen__totales dt small { color: #6b6b6b; font-weight: 400; }
.mv-resumen__total { padding-top: 0.6rem; margin-top: 0.6rem; border-top: 2px solid #e8e2d6; font-size: 1.15rem !important; font-weight: 700; }
.mv-resumen__total dd { color: var(--mv-color); font-size: 1.35rem; }

.mv-checkout__calcular { display: block; width: 100%; margin: 1rem 0; padding: 0.6rem; border: 1px solid var(--mv-color); border-radius: 999px; background: #fff; color: var(--mv-color); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.mv-checkout__calcular:hover { background: color-mix(in srgb, var(--mv-color) 8%, white); }

.mv-checkout__condiciones { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1rem 0; font-size: 0.85rem; line-height: 1.5; }
.mv-checkout__condiciones input { margin-top: 0.2rem; flex: 0 0 auto; }
.mv-checkout__confirmar { width: 100%; }

@media (min-width: 900px) {
    .mv-checkout__columnas { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); }
}

.mv-carrito__acciones { margin: 1.5rem 0 0; }
.mv-carrito__acciones .mv-boton-comprar { text-decoration: none; }
.mv-carrito__ayuda { margin: 1rem 0 0; font-size: 0.9rem; color: #6b6b6b; }

.mv-desistimiento { max-width: 34rem; }
.mv-desistimiento__hecho {
    max-width: 60ch; padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--mv-color); background: color-mix(in srgb, var(--mv-color) 7%, white);
    border-radius: 0 8px 8px 0;
}
.mv-desistimiento__hecho h2 { margin-top: 0; }

/* Un botón que se comporta como enlace: es una acción (POST), pero visualmente
   es secundaria y no debe competir con "Añadir al carrito". */
.mv-enlace-boton {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 0.9rem; color: var(--mv-color);
    text-decoration: underline;
}
.mv-ficha__deseo { margin: 0.75rem 0 0; font-size: 0.9rem; }
.mv-ficha__deseo form { display: inline; }
.mv-ficha__deseo small { color: #6b6b6b; }

/* Tira de miniaturas de la ficha de producto (23-08-2026). Un producto puede
   tener tres fotos o quince y en la tienda solo se veía la principal. */
.mv-ficha__tiras {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.mv-ficha__tira {
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    line-height: 0;
}

.mv-ficha__tira img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 6px;
}

.mv-ficha__tira.es-activa {
    border-color: var(--mv-color);
}

.mv-ficha__tira:focus-visible {
    outline: 3px solid var(--mv-color);
    outline-offset: 2px;
}

/* La frase corta, debajo del nombre: dice qué es esto antes de mirar el precio. */
.mv-ficha__corta {
    margin: 0.35rem 0 0.75rem;
    color: #4a5560;
    line-height: 1.55;
}

/* Ficha técnica en tarjetas. Rejilla que se adapta: con cuatro datos no deja
   huecos y con quince no se hace una lista interminable. */
.mv-ficha__specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.mv-ficha__spec {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #e3e8ec;
    border-radius: 10px;
    background: #fafbfc;
}

.mv-ficha__spec-etiqueta {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #7a8791;
}

.mv-ficha__spec-valor {
    font-weight: 600;
    color: #22303a;
    line-height: 1.4;
}