/* =========================================================================
   custom.css — M Conde Ocasión
   Solo lo que Bootstrap NO cubre: paleta de marca (utilidades), variantes de
   botón y unos pocos componentes. El resto, utilidades de Bootstrap en el HTML.
   ========================================================================= */

:root {
    /* Paleta de marca. Cambiar un tono aquí lo cambia en todo el sitio. */
    --mc-azul: #0019FF;
    --mc-azul-dark: #000326;
    --mc-lima: #C1FE00;
    --mc-lima-700: #AEE500;
    --mc-azul-700: #0014CC;
    --mc-soft: #CFDBFF;

    --bs-body-font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--mc-azul-dark);
}

a { text-decoration: none; }

/* ---- Utilidades de color de marca ---- */
.text-azul       { color: var(--mc-azul) !important; }
.text-azul-dark  { color: var(--mc-azul-dark) !important; }
.text-lima       { color: var(--mc-lima) !important; }
.bg-azul         { background-color: var(--mc-azul) !important; }
.bg-azul-dark    { background-color: var(--mc-azul-dark) !important; }
.bg-lima         { background-color: var(--mc-lima) !important; }
.bg-soft         { background-color: var(--mc-soft) !important; }
.border-azul      { border-color: var(--mc-azul) !important; }
.border-azul-dark { border-color: var(--mc-azul-dark) !important; }
.border-lima      { border-color: var(--mc-lima) !important; }

/* ---- Variantes de botón (usan las variables de .btn de Bootstrap) ---- */
.btn-lima {
    --bs-btn-bg: var(--mc-lima); --bs-btn-border-color: var(--mc-lima); --bs-btn-color: var(--mc-azul-dark);
    --bs-btn-hover-bg: var(--mc-lima-700); --bs-btn-hover-border-color: var(--mc-lima-700); --bs-btn-hover-color: var(--mc-azul-dark);
    --bs-btn-active-bg: var(--mc-lima-700); --bs-btn-active-border-color: var(--mc-lima-700); --bs-btn-active-color: var(--mc-azul-dark);
}
.btn-azul {
    --bs-btn-bg: var(--mc-azul); --bs-btn-border-color: var(--mc-azul); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--mc-azul-700); --bs-btn-hover-border-color: var(--mc-azul-700); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--mc-azul-700); --bs-btn-active-border-color: var(--mc-azul-700); --bs-btn-active-color: #fff;
}
.btn-azul-dark {
    --bs-btn-bg: var(--mc-azul-dark); --bs-btn-border-color: var(--mc-azul-dark); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-hover-color: #fff;
}
/* Botón outline azul (+ estado activo del btn-check: selección de plazos en el admin) */
.btn-outline-azul {
    --bs-btn-color: var(--mc-azul); --bs-btn-border-color: var(--mc-azul);
    --bs-btn-hover-bg: var(--mc-azul); --bs-btn-hover-border-color: var(--mc-azul); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--mc-azul); --bs-btn-active-border-color: var(--mc-azul); --bs-btn-active-color: #fff;
}
/* CTA un poco más ancho/alto */
.btn-wide { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: .6rem; }

/* ---- Componentes (lo que no se puede con utilidades) ---- */
.hover-lift { transition: transform .15s ease, box-shadow .15s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.15) !important; }

/* Botón-icono circular (acciones de tarjeta, flechas de galería) */
.mc-icon-btn { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; padding: 0; }

/* Ítem activo del menú público: texto lima + subrayado lima en escritorio (sin mover el layout). */
.navbar-nav .mc-nav-active { color: var(--mc-lima) !important; }
@media (min-width: 992px) {
    .navbar-nav .nav-link { border-bottom: 3px solid transparent; margin-bottom: -3px; }
    .navbar-nav .mc-nav-active { border-bottom-color: var(--mc-lima); }
}
.mc-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--mc-azul-dark); font-size: 1rem; text-decoration: none; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.mc-social-icon:hover { background: var(--mc-lima); color: var(--mc-azul-dark); transform: translateY(-2px); }
/* El SVG del logo reserva hueco arriba (la tilde) pero no abajo; añadimos ese mismo
   hueco abajo (~22% de la altura) para que las letras queden ópticamente centradas
   respecto a los items del menú. */
.mc-logo { height: 22px; width: auto; padding-bottom: 4.5px; box-sizing: content-box; }
.mc-admin-logo { height: 34px; width: auto; }
/* Franjas de marcas (la lima del pie y la de /quienes-somos bajo el hero).
   NO se fuerza el alto de los logos: vienen con proporciones muy dispares (un
   wordmark como el de Škoda es 7:1 y el de VW 1:1), y normalizarlos por altura
   disparaba el ancho de los alargados. Cada uno se pinta al tamaño de su fichero
   —o sea, el tamaño se controla al exportarlo— y el reparto del ancho lo hace
   justify-content-between, que deja la misma separación entre todos y los alinea
   con los bordes del bloque.
   min-width:0 es lo que permite que encojan en proporción cuando no caben (un
   flex item con una imagen dentro no baja de su ancho intrínseco sin esto). */
.mc-marcas > * { min-width: 0; }
.mc-marca-logo { width: auto; height: auto; max-width: 100%; }
.mc-footer-logo { height: 90px; width: auto; }

/* Heroes: la imagen se pasa por --mc-hero-img y el degradado lo pone cada variante.
   Si además se sube una imagen para móvil (--mc-hero-img-movil), en pantallas
   pequeñas se usa esa; si no, sigue valiendo la de escritorio. */
.mc-hero, .mc-hero-vender, .mc-hero-plain { --mc-hero-src: var(--mc-hero-img); }
@media (max-width: 767.98px) {
    .mc-hero, .mc-hero-vender, .mc-hero-plain { --mc-hero-src: var(--mc-hero-img-movil, var(--mc-hero-img)); }
}

/* Hero (el degradado va aquí; la imagen se pasa por --mc-hero-img) */
.mc-hero {
    height: 400px;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), var(--mc-hero-src);
}
@media (max-width: 575.98px) { .mc-hero { height: 220px; } }

/* Tarjeta "tipo de coche" */
.mc-tipo { width: 120px; height: 120px; transition: background-color .15s ease, transform .15s ease; }
.mc-tipo:hover { background-color: var(--mc-lima) !important; transform: translateY(-3px); }
.mc-tipo img { max-height: 42px; width: auto; }
/* Specs de la tarjeta de vehículo (año/km/combustible/cambio): compactas para caber en una línea;
   si un valor es muy largo (p. ej. "Híbrido enchufable") hace wrap como red de seguridad. */
.mc-specs { font-size: .75rem; }
.mc-specs .vr { margin-inline: .1rem; }

/* Tarjeta "búsqueda frecuente" (solo lo que no cubren utilidades: alto mín. y radio grande; el hover = .hover-lift) */
.mc-frec { min-height: 106px; border-radius: 24px; }

/* Imagen de los bloques del banner */
.mc-banner-img { max-height: 360px; }

/* Carrusel de imagen a ancho completo (bloque «Quiénes somos» de la Home):
   la imagen ocupa todo el ancho del bloque.
   Proporción fija para que el carrusel no pegue saltos al pasar de una foto a otra
   (las que sube el cliente no tienen por qué medir lo mismo); en móvil se acerca al
   cuadrado, porque una apaisada a ese ancho quedaría en una franja diminuta.
   El tope de alto evita que a pantalla completa (16/9 sobre ~1300 px daba 729 px)
   la imagen se coma el alto y deje el texto fuera de la vista. */
.mc-carrusel-slide { aspect-ratio: 16 / 9; max-height: 520px; object-fit: cover; }
@media (max-width: 767.98px) { .mc-carrusel-slide { aspect-ratio: 4 / 3; max-height: none; } }

/* Carrusel dentro de una columna, no a ancho completo (bloque «Experiencia» de
   /quienes-somos): 4/3, que es la proporción en la que vienen las fotos de los
   concesionarios (1448x1086), así que no se recorta nada. */
.mc-carrusel-slide-col { aspect-ratio: 4 / 3; object-fit: cover; }

/* Imagen de tarjeta con alto fijo (todas las cards igualan) */
.mc-card-media { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }   /* misma proporción que las fotos (1024x768): llena sin recortar ni barras */
/* La foto llena SIEMPRE la caja 4/3 (posición absoluta): evita que la altura dependa de
   la cadena h-100 del carrusel, que dentro del slider flex daba fotos de tamaños distintos. */
.mc-card-media > .carousel { position: absolute; inset: 0; }
.mc-card-media .carousel-inner, .mc-card-media .carousel-item, .mc-card-media .carousel-item img { height: 100%; }
.mc-card-media .carousel-item img { width: 100%; object-fit: cover; }

/* Hero de imagen (banner sin texto, p.ej. blog) */
.mc-hero-img { height: 400px; overflow: hidden; }
@media (max-width: 575.98px) { .mc-hero-img { height: 220px; } }

/* Hero "Vender coche" (overlay azul sobre la imagen) */
.mc-hero-vender {
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(rgba(0, 25, 255, .82), rgba(0, 25, 255, .82)), var(--mc-hero-src);
}

/* Hero con imagen de fondo sin overlay (texto oscuro) */
.mc-hero-plain { background-size: cover; background-position: center; background-image: var(--mc-hero-src); }

/* Iconos de la página Vender coche */
.mc-benef-icon { height: 90px; width: auto; }
.mc-paso-icon { height: 120px; width: auto; }
.mc-paso-num { width: 28px; height: 28px; font-size: .9rem; flex: 0 0 auto; }

/* Chips de marca (Quiénes somos) */
.mc-chip { width: 180px; }
.mc-chip-logo { height: 50px; display: flex; align-items: center; justify-content: center; }
.mc-chip-logo img { max-height: 42px; max-width: 130px; width: auto; }

/* Chips usados como pestañas (Contacto): base, hover y estado activo. Ancho fijo para que las 9 marcas quepan en una línea. */
.mc-chip-tab { width: 124px; background-color: var(--mc-soft); border: 1px solid var(--mc-azul); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.mc-chip-tab .mc-chip-logo { width: 100%; height: 40px; }
.mc-chip-tab .mc-chip-logo img { max-width: 100%; max-height: 36px; }
.mc-chip-tab:hover { transform: translateY(-3px); }
.mc-chip-tab.active { background-color: var(--mc-lima); border-color: var(--mc-azul-dark); border-width: 2px; }

/* Errores de formulario (FormHelper de CakePHP) */
.error-message { color: #DC3545; font-size: .8rem; font-weight: 600; margin-top: .15rem; }
.input.error .form-control { border-color: #DC3545; }

/* Hover de los botones de acción de la tarjeta (email/favorito/whatsapp) */
.mc-action { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.mc-action:hover { background-color: var(--mc-azul) !important; border-color: var(--mc-azul) !important; color: #fff !important; }

/* ---- Slider de tarjetas (arrastre con ratón + dots) ---- */
.mc-slider__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .5rem .75rem 1rem;     /* sitio al shadow de las cards (arriba/laterales/abajo) */
    margin-inline: -.75rem;         /* compensa el padding lateral: las cards no pierden ancho ni se cortan por los lados */
    scroll-padding-inline: .75rem;  /* el snap tiene en cuenta el padding lateral */
    scrollbar-width: none;          /* Firefox: sin barra */
    cursor: grab;
}
.mc-slider__track::-webkit-scrollbar { display: none; }   /* WebKit: sin barra */
.mc-slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.mc-slider__track img { -webkit-user-drag: none; user-select: none; }
.mc-slider__item { flex: 0 0 calc(25% - 1.125rem); min-width: 0; scroll-snap-align: start; }
@media (max-width: 991.98px) {
    .mc-slider__item { flex-basis: 44%; }    /* ~2 cards + la siguiente asomando */
}
@media (max-width: 575.98px) { .mc-slider__item { flex-basis: 80%; } }   /* 1 card + la siguiente asomando */
/* Variante peek: en desktop estrecha las cards para que la última asome (señal de que es un slider) */
@media (min-width: 992px) { .mc-slider--peek .mc-slider__item { flex-basis: 30%; } }

.mc-slider__dots { display: flex; justify-content: center; gap: 12px; margin-top: 1.5rem; }
.mc-slider__dots button { width: 14px; height: 14px; border-radius: 50%; border: 0; padding: 0; background: var(--mc-soft); }
.mc-slider__dots button.active { background: var(--mc-azul-dark); }
/* En móvil no hacen falta: la tarjeta cortada ya avisa de que hay más a la derecha.
   ⚠️ Esta regla va DESPUÉS de la de arriba: si se pone dentro del @media anterior,
   el `display: flex` posterior la anula (misma especificidad, gana la última). */
@media (max-width: 991.98px) { .mc-slider__dots { display: none; } }

/* Scroll horizontal sin barra (móvil) */
.hide-scrollbar { scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Logo más pequeño en móvil (como en el diseño) */
@media (max-width: 991.98px) { .mc-logo { height: 17px; padding-bottom: 3.5px; } }

/* ---- Ficha de vehículo ---- */
/* Layout: galería + contenido a la izq., panel de info sticky a la dcha. (CSS Grid para que el sticky funcione) */
@media (min-width: 992px) {
    .mc-ficha-layout {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-areas: "gallery panel" "content panel";
        column-gap: 2.5rem;
        row-gap: 1.5rem;
    }
    .mc-area-gallery { grid-area: gallery; }
    .mc-area-panel   { grid-area: panel; }
    .mc-area-content { grid-area: content; }
    .mc-info-panel { position: sticky; top: 6rem; }
}

/* Galería: la foto principal ocupa el 100% del ancho a su proporción natural (sin recortes ni barras).
   Un tope de alto evita fotos desproporcionadas; el fondo soft solo se vería en casos raros. */
.mc-gallery-main { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.mc-fav-btn { width: 44px; height: 44px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
/* Corazón "favorito" activo (tarjeta + ficha) */
.mc-fav-toggle.is-fav { background-color: var(--mc-lima) !important; border-color: var(--mc-lima) !important; }
.mc-fav-toggle.is-fav i { color: var(--mc-azul-dark) !important; }
.mc-thumb { width: 84px; height: 60px; background-size: cover; background-position: center; background-image: var(--mc-thumb); opacity: .6; box-shadow: inset 0 0 0 2px transparent; transition: opacity .15s ease, box-shadow .15s ease; }
.mc-thumb.active, .mc-thumb:hover { opacity: 1; box-shadow: inset 0 0 0 3px var(--mc-azul); }
/* Tira de miniaturas: arrastre con ratón, sin barra (como el resto de scrolls de la web) */
.mc-thumbs { cursor: grab; }
.mc-thumbs.is-dragging { cursor: grabbing; user-select: none; }
.mc-thumbs img, .mc-thumbs .mc-thumb { -webkit-user-drag: none; }

/* Bloque de características: cada icono crece para ocupar el 100% del ancho */
.mc-caract-item { flex: 1 1 100px; }

/* Detalles y equipamiento: pestañas tipo "pill" que hacen wrap (nunca se cortan) */
.mc-detalle-tab { padding: .5rem 1rem; font-size: .9rem; font-weight: 600; color: var(--mc-azul-dark); background: var(--mc-soft); border: 0; border-radius: 50rem; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.mc-detalle-tab:hover:not(.active) { background: #bfccff; }
.mc-detalle-tab.active { background: var(--mc-azul); color: #fff; }
.mc-spec-row { border-bottom: 1px solid rgba(0, 25, 255, .1); }


/* Botón "Avísame si baja de precio" (outline azul, como en el diseño) */
.mc-btn-aviso { background: #fff; border: 1px solid var(--mc-azul); color: var(--mc-azul); }
.mc-btn-aviso:hover { background: var(--mc-soft); color: var(--mc-azul); }
/* Estado activo: alerta de precio ("Te avisaremos…") y búsqueda guardada */
.mc-alert-toggle.is-on, .mc-btn-aviso.is-on { background-color: var(--mc-lima) !important; border-color: var(--mc-lima) !important; color: var(--mc-azul-dark) !important; opacity: 1; }

/* Calculadora de financiación: botones de meses */
.mc-finance-month { background: #fff; border: 1px solid var(--mc-azul); color: var(--mc-azul); font-weight: 600; }
.mc-finance-month.active { background: var(--mc-azul); border-color: var(--mc-azul); color: #fff; }
/* Nota-resumen bajo las cuotas: texto muy pequeño y discreto */
.mc-finance-nota { font-size: .72rem; line-height: 1.35; }
/* Aviso legal del pie: fina, centrada y no demasiado ancha */
.mc-legal-nota { max-width: 60rem; font-size: .72rem; line-height: 1.5; }
/* Texto enriquecido (WYSIWYG) del CMS: sin margen inferior sobrante en el último bloque */
.mc-rte > :last-child { margin-bottom: 0; }
.mc-rte img { max-width: 100%; height: auto; border-radius: .5rem; }

/* Combobox filtrable (categorías, etc.) */
.mc-combo-menu {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
    max-height: 240px; overflow-y: auto;
    background: #fff; border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
    margin-top: .25rem; padding: .25rem;
}
.mc-combo-opt, .mc-combo-create {
    display: block; width: 100%; text-align: left;
    border: 0; background: transparent; padding: .4rem .6rem;
    border-radius: .375rem; font-size: .95rem; cursor: pointer;
}
.mc-combo-opt:hover, .mc-combo-create:hover { background: var(--mc-soft); }
.mc-combo-create { border-top: 1px solid var(--bs-border-color, #dee2e6); margin-top: .25rem; }
/* Modal de "gracias": icono de confirmación circular */
.mc-gracias-icon { width: 84px; height: 84px; font-size: 2.2rem; }
/* Campo de formulario autorrellenado y bloqueado (readonly) con datos de la cuenta */
.mc-readonly, .mc-readonly:focus {
    background-color: #e9ecef;
    color: #6c757d;
    border-style: dashed;
    cursor: not-allowed;
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M8 1a3 3 0 0 0-3 3v3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-3-3zM6 4a2 2 0 1 1 4 0v3H6V4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: .85rem;
    padding-right: 2rem;
}

/* Modal "Me interesa": foto del coche y botones de alternancia (info / cita) */
.mc-modal-foto { height: 200px; }
.mc-modal-toggle { padding: .55rem 1.6rem; border-radius: 56px; border: 1px solid var(--mc-azul); background: #fff; color: var(--mc-azul); font-weight: 600; font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.mc-modal-toggle.active { background: var(--mc-azul); color: #fff; }

/* Listado /coches: grupos de filtro plegables (<details>) */
.mc-filtro { border-bottom: 1px solid rgba(0, 25, 255, .15); padding: .7rem 0; }
.mc-filtro:last-of-type { border-bottom: 0; }
.mc-filtro > summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--mc-azul); display: flex; align-items: center; justify-content: space-between; }
.mc-filtro > summary::-webkit-details-marker { display: none; }
.mc-filtro > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--mc-azul); border-bottom: 2px solid var(--mc-azul); transform: rotate(45deg); transition: transform .15s ease; }
.mc-filtro[open] > summary::after { transform: rotate(-135deg); }
.mc-filtro-body { display: grid; gap: .5rem; padding-top: .75rem; }
.mc-filtro-body label { cursor: pointer; }
.mc-filtro-list { display: grid; gap: .5rem; max-height: 220px; overflow-y: auto; }

/* Sliders de rango con doble control (Precio/Km/Antigüedad/Potencia) */
.mc-range-slider { position: relative; height: 28px; }
.mc-range-slider::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; background: #fff; border: 1px solid var(--mc-azul); border-radius: 4px; }
.mc-range-fill { position: absolute; top: 12px; height: 4px; background: var(--mc-azul); border-radius: 4px; }
.mc-range-input { position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.mc-range-input::-webkit-slider-runnable-track { height: 28px; background: none; }
.mc-range-input::-moz-range-track { height: 28px; background: none; }
.mc-range-input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; margin-top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--mc-azul); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }
.mc-range-input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--mc-azul); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; }

/* =========================================================================
   Panel de administración (/admin). Layout propio con la paleta de marca.
   ========================================================================= */
.mc-admin-sidebar { width: 250px; flex: 0 0 250px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.mc-admin-link { color: rgba(255,255,255,.85); border-radius: .6rem; padding: .55rem .85rem; font-weight: 500; }
.mc-admin-link:hover:not(.disabled) { background: rgba(255,255,255,.1); color: #fff; }
.mc-admin-link.active { background: var(--mc-lima); color: var(--mc-azul-dark); }
.mc-admin-link.disabled { pointer-events: none; }
.mc-admin-ico { width: 1.25rem; }
.mc-admin-topbar { position: sticky; top: 0; z-index: 1020; }
/* El área principal es un flex item: sin min-width:0 no puede encoger y su contenido ancho
   (tablas) desborda el viewport. Bootstrap no tiene utilidad `min-vw-0`, así que se fija aquí. */
.mc-admin-main { min-width: 0; }
/* Aviso flotante del panel: visible haya el scroll que haya (guardado por bloque salta a un ancla). */
.mc-admin-flash { top: 4rem; z-index: 1090; width: min(92vw, 520px); }
/* Reordenar por arrastre (gestores del admin). */
[data-sortable-item] { cursor: grab; }
/* Reordenar arrastrando: la fila ENTERA se arrastra (no un botón-asa), con el
   icono de agarre como pista visual y el número de posición a la vista. */
[data-sortable-item].mc-dragging { opacity: .45; background: var(--mc-soft); }
.mc-grab { cursor: grab; }
.mc-grab:active { cursor: grabbing; }
/* Editor WYSIWYG (Quill) en el admin. OJO: el elemento .mc-wysiwyg-editor ES el propio
   .ql-container (Quill le añade la clase), así que el override va con selector COMPUESTO
   (sin espacio). Quill trae height:100% y con overflow visible el editor desbordaba y
   tapaba lo de debajo → altura automática, alto mínimo bajo y arrastrable. */
.mc-wysiwyg-editor.ql-container { height: auto; overflow: visible; border-bottom-left-radius: .375rem; border-bottom-right-radius: .375rem; }
.mc-wysiwyg-editor .ql-editor { height: auto; min-height: 140px; max-height: 70vh; overflow-y: auto; resize: vertical; font-size: 1rem; }
.ql-toolbar.ql-snow { border-top-left-radius: .375rem; border-top-right-radius: .375rem; }
/* Los slugs/URLs largos de las tablas del panel rompen línea en cualquier ancho (evita scroll horizontal). */
.mc-admin .table code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
/* En móvil, además, la fuente de las tablas encoge un poco. */
@media (max-width: 575.98px) {
    .mc-admin .table { font-size: .8125rem; }
}
.mc-error-code { font-size: clamp(5rem, 20vw, 10rem); line-height: 1; letter-spacing: -.03em; }
.mc-wysiwyg-source { min-height: 160px; }
button.mc-ql-source { width: auto !important; padding: 0 .35rem !important; }
button.mc-ql-source.mc-ql-active { color: var(--mc-azul); }
.mc-admin-flash .alert { margin-bottom: .5rem; box-shadow: 0 .5rem 1.5rem rgba(0,3,38,.18); }

/* Hero con vídeo de fondo (YouTube/Vimeo gestionado desde el admin) */
.mc-hero-video { background: #000; }
.mc-hero-video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.mc-hero-video-wrap iframe {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: max(100vw, 177.78vh); height: max(56.25vw, 100vh);
    border: 0; pointer-events: none;
}
.mc-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 1; }

/* ---- Anclas a secciones ---- */
/* La cabecera es sticky: sin este margen el destino de un enlace #ancla queda debajo. */
.mc-anchor { scroll-margin-top: 6.5rem; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}