: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; }
: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. */
body { margin: 0; font-family: 'Lato', system-ui, sans-serif; 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-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. */
.mv-blog-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 1.25rem; margin: 1.5rem 0; }
/* 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). */
.mv-blog-categoria { display: inline-block; 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); }
.mv-blog-tarjeta--grande { grid-column: span 2; grid-row: span 2; }
.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; }
.mv-blog-tarjeta__titulo { display: block; font-family: 'Varela Round', system-ui, sans-serif; font-weight: 600; 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; }
/* 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; }
@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. */
.mv-mapa { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; aspect-ratio: 16 / 9; max-height: 420px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.14); border: 2px dashed rgba(255,255,255,0.45); text-align: center; padding: 1rem; }
.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: #eaf2fb; color: #1a5a9e; }
/* 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; }

/* ==========================================================
 * 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; }

/* 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; }
/* 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; }
.mv-oferta-estado { font-size: 0.8rem; color: #888; font-style: italic; }
.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); }
}