/* =====================================================================
   El Rincón del Feriante · propio.css
   Único CSS propio de la web (Bootstrap 5.3 es la base).
   Los colores son variables: --color-acento y --color-principal se pueden
   cambiar desde Admin → Ajustes (se inyectan en la cabecera).
   Al modificar este archivo SUBE VERSION_ESTATICOS en app/arranque.php.
   ===================================================================== */

/* ---------- Fuente propia (títulos) ---------- */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../vendor/fuentes/archivo-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../vendor/fuentes/archivo-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Variables del sistema de diseño ---------- */
:root {
    --color-principal: #004ca0;      /* azul de la web original (color de marca) */
    --color-principal-oscuro: #003775;
    --color-tinta: #0d2b52;          /* títulos */
    --color-azul-claro: #08acf8;     /* azul cielo del logotipo: detalles */
    --color-azul-suave: #eaf2fb;     /* fondo azul muy claro */
    --color-acento: #004ca0;         /* botones: azul de marca con texto blanco */
    --color-rojo: #e3063f;           /* rojo del logotipo: SOLO «Publicar» y avisos */
    --color-acento-oscuro: #003775;
    --color-sobre-acento: #ffffff;   /* texto sobre los botones azules */
    --color-destacado: #08acf8;      /* azul cielo del logotipo: anuncios destacados */
    --color-texto: #2a3549;
    --color-texto-suave: #5b6678;
    --color-fondo: #f4f6f9;
    --color-superficie: #ffffff;
    --color-borde: #e3e8f0;
    --color-exito: #13795b;
    --color-error: #c4142c;
    --radio: 14px;
    --radio-pequeno: 10px;
    --sombra: 0 1px 2px rgba(0, 76, 160, .04), 0 4px 16px rgba(0, 76, 160, .06);
    --sombra-alta: 0 12px 32px rgba(0, 76, 160, .12);
    --fuente-titulos: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Bootstrap hereda la paleta de la marca */
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--color-texto);
    --bs-body-bg: var(--color-fondo);
    --bs-primary: var(--color-principal);
    --bs-link-color: var(--color-principal);
    --bs-link-hover-color: var(--color-principal-oscuro);
    --bs-link-color-rgb: 0, 76, 160;
    --bs-link-hover-color-rgb: 0, 55, 117;
    --bs-border-color: var(--color-borde);
    --bs-border-radius: var(--radio-pequeno);
    --bs-focus-ring-color: rgba(0, 76, 160, .35);
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; }
h1, h2, h3, h4, .titular { font-family: var(--fuente-titulos); font-weight: 650; letter-spacing: -.005em; line-height: 1.25; color: var(--color-tinta); }
h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.25rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); }
h3 { font-size: 1.2rem; }
a { text-underline-offset: .18em; }
img { max-width: 100%; height: auto; }
.text-suave { color: var(--color-texto-suave) !important; }

/* Foco muy visible para quien navega con teclado (WCAG 2.2) */
:focus-visible { outline: 3px solid var(--color-principal); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .25rem rgba(0, 76, 160, .3); }

h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, main:focus { outline: none; }
.saltar-contenido { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; padding: .75rem 1rem; }
.saltar-contenido:focus { left: 1rem; top: 1rem; }
.campo-trampa { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Botones grandes y claros ---------- */
.btn { font-weight: 600; border-radius: var(--radio-pequeno); padding: .7rem 1.2rem; font-size: 1.0625rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; }
.btn-lg { padding: .9rem 1.5rem; font-size: 1.15rem; min-height: 56px; }
.btn-sm { min-height: 40px; padding: .45rem .85rem; font-size: .95rem; }
.btn-acento { background: var(--color-acento); border-color: var(--color-acento); color: var(--color-sobre-acento); box-shadow: 0 3px 10px rgba(0, 76, 160, .22); }
.btn-rojo { background: var(--color-rojo); border-color: var(--color-rojo); color: #fff; box-shadow: 0 3px 10px rgba(227, 6, 63, .25); }
.btn-rojo:hover, .btn-rojo:focus-visible, .btn-rojo:active { background: #c00434; border-color: #c00434; color: #fff; }
.btn-acento:hover, .btn-acento:focus-visible, .btn-acento:active { background: var(--color-acento-oscuro); border-color: var(--color-acento-oscuro); color: var(--color-sobre-acento); }
.btn-blanco { background: #fff; border: 1px solid #cfe3f3; color: var(--color-principal); }
.btn-blanco:hover { background: var(--color-azul-suave); border-color: var(--color-azul-claro); color: var(--color-principal); }
.btn-primary { --bs-btn-bg: var(--color-principal); --bs-btn-border-color: var(--color-principal); --bs-btn-hover-bg: var(--color-principal-oscuro); --bs-btn-hover-border-color: var(--color-principal-oscuro); --bs-btn-active-bg: var(--color-principal-oscuro); }
.btn-outline-primary { --bs-btn-color: var(--color-principal); --bs-btn-border-color: var(--color-principal); --bs-btn-hover-bg: var(--color-principal); --bs-btn-hover-border-color: var(--color-principal); }
.btn-whatsapp { background: #0b7a3e; border-color: #0b7a3e; color: #fff; }
.btn-whatsapp:hover { background: #08602f; color: #fff; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.btn .spinner-border { width: 1.1rem; height: 1.1rem; border-width: .18em; }

/* ---------- Formularios ---------- */
.form-label { font-weight: 600; margin-bottom: .35rem; }
.form-control, .form-select { min-height: 52px; font-size: 1.0625rem; border-radius: var(--radio-pequeno); border-color: #cfd7e3; }
.form-control:focus, .form-select:focus { border-color: var(--color-azul-claro); }
.input-group-text { background: var(--color-azul-suave); border-color: #cfd7e3; color: var(--color-principal); }
textarea.form-control { min-height: 140px; }
.form-text { color: var(--color-texto-suave); font-size: .95rem; }
.obligatorio { color: var(--color-error); font-weight: 700; }
.invalid-feedback { font-size: .95rem; font-weight: 600; }
.form-check-input { width: 1.4em; height: 1.4em; margin-top: .15em; }
.form-check-label { padding-left: .35rem; }
.opcion-grande { display: block; border: 2px solid var(--color-borde); border-radius: var(--radio); padding: 1rem; background: #fff; cursor: pointer; height: 100%; transition: border-color .15s, box-shadow .15s; }
.opcion-grande:hover { border-color: var(--color-principal); }
.btn-check:checked + .opcion-grande { border-color: var(--color-principal); box-shadow: 0 0 0 3px rgba(0, 76, 160, .2); background: #f0f6ff; }
.btn-check:focus-visible + .opcion-grande { outline: 3px solid var(--color-principal); outline-offset: 2px; }
.opcion-grande .bi { font-size: 1.8rem; color: var(--color-principal); }
.opcion-grande strong { display: block; font-size: 1.08rem; }
.opcion-grande small { color: var(--color-texto-suave); }

/* ---------- Cabecera ---------- */
.cabecera { background: #fff; border-bottom: 1px solid var(--color-borde); position: sticky; top: 0; z-index: 1030; }
.cabecera-fila { display: flex; align-items: center; gap: 1rem; padding: .6rem 0; }
.logo img { display: block; height: 46px; width: auto; }
.buscador-cabecera { flex: 1; max-width: 560px; }
.buscador { display: flex; background: #fff; border: 2px solid var(--color-principal); border-radius: 999px; overflow: hidden; }
.buscador input { border: 0; flex: 1; padding: .7rem 1.1rem; font-size: 1.05rem; min-width: 0; outline: none; background: transparent; }
.buscador button { border: 0; background: var(--color-principal); color: #fff; padding: 0 1.2rem; font-weight: 650; display: flex; align-items: center; gap: .4rem; }
.buscador button:hover { background: var(--color-principal-oscuro); }
.acciones-cabecera { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.enlace-cuenta { position: relative; }
.burbuja { position: absolute; top: -4px; right: -4px; background: var(--color-rojo); color: #fff; font-size: .75rem; font-weight: 700; min-width: 1.35rem; height: 1.35rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .3rem; }
.menu-categorias { background: #fff; border-bottom: 1px solid var(--color-borde); }
.menu-categorias .nav-link { color: var(--color-tinta); font-weight: 600; padding: .7rem .9rem; white-space: nowrap; }
.menu-categorias .nav-link:hover, .menu-categorias .nav-link.active { background: var(--color-azul-suave); color: var(--color-principal); box-shadow: inset 0 -3px 0 var(--color-principal); }
.menu-categorias .dropdown-menu { border-radius: var(--radio-pequeno); box-shadow: var(--sombra-alta); border: 0; padding: .5rem; }
.menu-categorias .dropdown-item { border-radius: 8px; padding: .6rem .9rem; font-weight: 550; }
/* Guirnalda de bombillas de feria bajo el menú (detalle de marca) */
.guirnalda { display: none; }

@media (max-width: 991.98px) {
    .logo img { height: 40px; }
    .buscador-cabecera { order: 3; flex-basis: 100%; max-width: none; }
    .cabecera-fila { flex-wrap: wrap; }
    .acciones-cabecera .texto-escritorio { display: none; }
}

/* ---------- Portada ---------- */
.portada-hero { background: radial-gradient(circle at 85% 15%, rgba(8, 172, 248, .25), transparent 45%), linear-gradient(135deg, #004ca0 0%, #00336e 100%);
    color: #fff; padding: 3rem 0; position: relative; overflow: hidden; }
.portada-hero h1 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.9rem); font-weight: 700; max-width: 20ch; margin-bottom: .75rem; }
.portada-hero p.lead { color: rgba(255, 255, 255, .85); max-width: 56ch; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); margin-bottom: 1.4rem; }
.hero-etiqueta { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .3rem .85rem; font-weight: 600; font-size: .92rem; margin-bottom: .9rem; }
.hero-etiqueta .bi { color: var(--color-azul-claro); }
.buscador-hero { max-width: 640px; margin-bottom: 1rem; }
.portada-hero .buscador { border: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.portada-hero .buscador input { padding: .95rem 1.3rem; font-size: 1.1rem; }
.portada-hero .buscador button { background: var(--color-principal-oscuro); color: #fff; padding: 0 1.5rem; font-size: 1.05rem; }
.portada-hero .buscador button:hover { background: var(--color-acento-oscuro); }
.botones-hero { display: flex; flex-wrap: wrap; gap: .6rem; }
.cifras-hero { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.3rem 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, .85); font-size: .97rem; }
.cifras-hero li { display: inline-flex; align-items: center; gap: .4rem; }
.cifras-hero strong { color: #fff; }
.cifras-hero .bi { color: var(--color-azul-claro); font-size: 1.1rem; }
.portada-hero .btn-blanco { background: transparent; border: 2px solid rgba(255, 255, 255, .6); color: #fff; }
.portada-hero .btn-acento { background: #fff; border-color: #fff; color: var(--color-principal); box-shadow: none; }
.portada-hero .btn-acento:hover { background: var(--color-azul-suave); color: var(--color-principal-oscuro); }
.hero-vender .btn-acento { background: var(--color-principal); border-color: var(--color-principal); color: #fff; }
.portada-hero .btn-blanco:hover { background: #fff; color: var(--color-principal); }
.portada-hero .btn-rojo { box-shadow: 0 6px 18px rgba(227, 6, 63, .45); }
.btn-cielo { background: var(--color-azul-claro); border-color: var(--color-azul-claro); color: var(--color-principal); }
.btn-cielo:hover, .btn-cielo:focus-visible { background: #3fc0ff; border-color: #3fc0ff; color: var(--color-principal); }
@media (max-width: 575.98px) {
    .portada-hero { padding: 1.5rem 0 1.75rem; }
    .portada-hero .buscador input { padding: .8rem 1rem; font-size: 1rem; }
    .portada-hero .buscador button { padding: 0 1.1rem; }
    .botones-hero .btn { width: 100%; }
    .cifras-hero { gap: .4rem 1rem; font-size: .9rem; }
    .buscador-hero { display: none; } /* en móvil ya está el buscador de la cabecera */
}

.categoria-tarjeta { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 1rem 1.1rem; text-decoration: none; color: var(--color-texto); box-shadow: var(--sombra); height: 100%; transition: transform .15s, box-shadow .15s; }
.categoria-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); color: var(--color-texto); }
.categoria-tarjeta { position: relative; overflow: hidden; }
.categoria-tarjeta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-azul-claro); transition: background .15s; }
.categoria-tarjeta:hover::before { background: var(--color-principal); }
.categoria-tarjeta { padding: 1.3rem 1.4rem; gap: 1.15rem; min-height: 112px; }
.categoria-tarjeta img { width: 72px; height: 72px; flex-shrink: 0; background: var(--color-azul-suave); border-radius: 16px; padding: 8px; }
.categoria-tarjeta .contador { display: inline-block; margin-top: .3rem; background: #00336e; color: #fff !important; border-radius: 999px; padding: .1rem .65rem; font-size: .82rem !important; font-weight: 600; }
.categoria-tarjeta .contador b { color: #fff; }
.categoria-tarjeta > div { flex: 1; }
.categoria-tarjeta .flecha { color: var(--color-azul-claro); font-size: 1.2rem; transition: transform .15s; }
.categoria-tarjeta:hover { border-color: var(--color-azul-claro); }
.categoria-tarjeta:hover .flecha { transform: translateX(3px); color: var(--color-principal); }
.categoria-tarjeta strong { display: block; font-family: var(--fuente-titulos); font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--color-principal); }
.categoria-tarjeta span { color: var(--color-texto-suave); font-size: .95rem; }

.pasos { counter-reset: paso; }
.paso { position: relative; background: #fff; border-radius: var(--radio); padding: 1.4rem 1.2rem 1.2rem 4.4rem; box-shadow: var(--sombra); height: 100%; }
.paso::before { counter-increment: paso; content: counter(paso); position: absolute; left: 1.1rem; top: 1.2rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--color-acento); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulos); font-size: 1.15rem; }
.paso h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.paso p { margin: 0; color: var(--color-texto-suave); }

.bloque-publicar { background: var(--color-azul-suave); border: 2px solid var(--color-destacado); border-radius: var(--radio); padding: 1.5rem; }

/* ---------- Cabecera de sección / listados ---------- */
.cabecera-seccion { background: #fff; border-bottom: 1px solid var(--color-borde); padding: 1.1rem 0 1.2rem; }
.cabecera-seccion h1 { margin-bottom: .35rem; }
.cabecera-seccion .intro { color: var(--color-texto-suave); max-width: 80ch; margin: 0; }
.migas { font-size: .95rem; margin-bottom: .4rem; }
.migas .breadcrumb { margin: 0; }
.migas a { color: var(--color-texto-suave); }

.barra-resultados { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between; margin: 1rem 0; }
.barra-resultados .total { font-weight: 650; }
.filtros-activos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.etiqueta-filtro { background: #e9f0fb; color: var(--color-principal-oscuro); border-radius: 999px; padding: .35rem .8rem; font-weight: 600; font-size: .95rem; text-decoration: none; display: inline-flex; gap: .35rem; align-items: center; }
.etiqueta-filtro:hover { background: #d6e4f8; }

/* Filtros: barra lateral fija al hacer scroll en escritorio; panel desplegable en móvil */
.panel-filtros { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem; }
.panel-filtros h2 { font-size: 1.15rem; }
.panel-filtros .lista-enlaces a { display: flex; justify-content: space-between; padding: .45rem .6rem; border-radius: 8px; text-decoration: none; color: var(--color-texto); font-weight: 550; }
.panel-filtros .lista-enlaces a:hover { background: var(--color-fondo); }
.panel-filtros .lista-enlaces a.activo { background: #e9f0fb; color: var(--color-principal-oscuro); }
@media (min-width: 992px) {
    .columna-filtros { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: none; }
    .columna-filtros::-webkit-scrollbar { display: none; }
}

/* ---------- Tarjeta de anuncio ---------- */
.tarjeta { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; height: 100%; display: flex; flex-direction: column; position: relative; transition: transform .15s, box-shadow .15s; border: 1px solid transparent; }
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tarjeta.es-destacado { border: 2px solid var(--color-destacado); }
.tarjeta-foto { aspect-ratio: 4 / 3; background: var(--color-azul-suave); position: relative; overflow: hidden; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-foto img.ilustracion { object-fit: contain; padding: 14%; background: linear-gradient(160deg, var(--color-azul-suave), #fff); }
.tarjeta-etiquetas { position: absolute; left: .6rem; top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.tarjeta-fotos { position: absolute; right: .6rem; bottom: .6rem; background: rgba(0, 0, 0, .65); color: #fff; font-size: .85rem; font-weight: 600; border-radius: 999px; padding: .15rem .6rem; }
.etiqueta { display: inline-block; font-size: .8rem; font-weight: 750; border-radius: 6px; padding: .2rem .5rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .02em; }
.etiqueta-tipo { background: rgba(0, 76, 160, .9); color: #fff; }
.etiqueta-destacado { background: var(--color-destacado); color: var(--color-sobre-acento); }
.etiqueta-vendido { background: #1b2230; color: #fff; }
.etiqueta-profesional { background: #fff; color: var(--color-principal-oscuro); border: 1px solid var(--color-principal); }
.tarjeta-cuerpo { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.tarjeta-titulo { font-family: var(--fuente-titulos); font-size: 1.08rem; font-weight: 700; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-titulo a { color: var(--color-texto); text-decoration: none; }
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta-precio { font-family: var(--fuente-titulos); font-size: 1.3rem; font-weight: 700; color: var(--color-principal-oscuro); }
.tarjeta-precio.consultar { font-size: 1.05rem; color: var(--color-texto-suave); }
.tarjeta-datos { color: var(--color-texto-suave); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin-top: auto; }

/* Bloques de publicidad (siempre etiquetados) */
.publi, .banner { text-align: center; margin: 1.25rem 0; }
.publi:has(ins[data-ad-status="unfilled"]) { display: none; }
.publi-etiqueta { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-texto-suave); margin-bottom: .25rem; }
.banner img { border-radius: 8px; }
.publi-tarjeta { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: .75rem; height: 100%; margin: 0; }
.lateral-fijo { position: sticky; top: 140px; }

/* ---------- Paginación ---------- */
.paginacion .page-link { min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 650; color: var(--color-principal); border-radius: var(--radio-pequeno) !important; margin: 0 .2rem; }
.paginacion .active > .page-link { background: var(--color-principal); border-color: var(--color-principal); color: #fff; }

/* ---------- Ficha ---------- */
.ficha-cabecera { background: #fff; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--color-borde); }
.ficha-cabecera h1 { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: .4rem; }
.referencia { display: inline-block; background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 6px; padding: .1rem .5rem; font-weight: 700; font-size: .9rem; color: var(--color-texto-suave); white-space: nowrap; }
.galeria-principal { position: relative; background: #11161f; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3; }
.galeria-principal img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.galeria-principal img.ilustracion { object-fit: contain; padding: 15%; background: #eef3fb; cursor: default; }
.galeria-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--color-texto); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); }
.galeria-flecha.anterior { left: .75rem; }
.galeria-flecha.siguiente { right: .75rem; }
.galeria-contador { position: absolute; right: .75rem; bottom: .75rem; background: rgba(0, 0, 0, .7); color: #fff; border-radius: 999px; padding: .2rem .7rem; font-weight: 600; font-size: .9rem; }
.galeria-miniaturas { display: flex; gap: .5rem; overflow-x: auto; padding: .6rem 0 .2rem; scrollbar-width: thin; }
.galeria-miniaturas button { border: 3px solid transparent; padding: 0; border-radius: 10px; overflow: hidden; flex: 0 0 auto; width: 92px; height: 70px; background: #e8ecf3; }
.galeria-miniaturas button[aria-current="true"] { border-color: var(--color-azul-claro); }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.caja { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.25rem; }
.caja + .caja { margin-top: 1rem; }
.caja h2 { font-size: 1.25rem; margin-bottom: .8rem; }
.precio-ficha { font-family: var(--fuente-titulos); font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); font-weight: 700; color: var(--color-principal-oscuro); line-height: 1.1; }
.precio-ficha.consultar { font-size: 1.5rem; color: var(--color-texto-suave); }
.datos-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; margin: 0; }
.datos-ficha div { background: var(--color-fondo); border-radius: var(--radio-pequeno); padding: .7rem .85rem; }
.datos-ficha dt { font-size: .85rem; color: var(--color-texto-suave); font-weight: 600; margin: 0; }
.datos-ficha dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.descripcion-ficha { font-size: 1.08rem; white-space: normal; overflow-wrap: anywhere; }
.vendedor { display: flex; gap: .9rem; align-items: center; }
.vendedor-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--color-principal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--fuente-titulos); font-weight: 800; font-size: 1.4rem; flex-shrink: 0; }
.estrellas { color: #e0a800; letter-spacing: .05em; }
.aviso-estado { border-radius: var(--radio); padding: 1rem 1.2rem; font-weight: 600; }
@media (min-width: 992px) {
    .columna-contacto { position: sticky; top: 140px; }
}
/* Barra inferior fija en móvil con el precio y el botón de contacto */
.barra-contacto-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; background: #fff; border-top: 1px solid var(--color-borde); box-shadow: 0 -6px 20px rgba(16, 24, 40, .12); padding: .65rem .9rem calc(.65rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .75rem; }
.barra-contacto-movil .precio { font-family: var(--fuente-titulos); font-weight: 800; font-size: 1.2rem; color: var(--color-principal-oscuro); }
@media (max-width: 991.98px) { body.con-barra-movil { padding-bottom: 84px; } }
.video-previo { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #000; border: 0; width: 100%; padding: 0; }
.video-previo img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-previo .bi { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; color: #fff; background: rgba(227, 6, 63, .92); border-radius: 50%; }

/* ---------- Publicar por pasos ---------- */
.pasos-indicador { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; counter-reset: indicador; }
.pasos-indicador li { flex: 1; text-align: center; font-weight: 650; font-size: .95rem; color: var(--color-texto-suave); }
.pasos-indicador li::before { counter-increment: indicador; content: counter(indicador); display: flex; margin: 0 auto .35rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; align-items: center; justify-content: center; background: #e2e7f0; color: var(--color-texto-suave); font-weight: 800; }
.pasos-indicador li.hecho::before { content: "✓"; background: var(--color-exito); color: #fff; }
.pasos-indicador li.actual { color: var(--color-texto); }
.pasos-indicador li.actual::before { background: var(--color-acento); color: var(--color-sobre-acento); }
@media (max-width: 575.98px) { .pasos-indicador li span { display: none; } }
.zona-fotos { border: 3px dashed #9fb0cc; border-radius: var(--radio); background: #f7f9fd; padding: 2rem 1rem; text-align: center; cursor: pointer; transition: background .15s, border-color .15s; }
.zona-fotos.arrastrando, .zona-fotos:hover { background: #eaf1fc; border-color: var(--color-principal); }
.zona-fotos .bi { font-size: 2.8rem; color: var(--color-principal); }
.lista-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-top: 1rem; }
.foto-subida { position: relative; border-radius: var(--radio-pequeno); overflow: hidden; background: #e8ecf3; aspect-ratio: 4 / 3; box-shadow: var(--sombra); }
.foto-subida img { width: 100%; height: 100%; object-fit: cover; }
.foto-subida .acciones { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .3rem; padding: .35rem; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.foto-subida .acciones .btn { min-height: 36px; padding: .25rem .5rem; font-size: .85rem; }
.foto-subida .portada { position: absolute; top: .4rem; left: .4rem; }
.foto-subida.subiendo::after { content: "Subiendo…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .8); font-weight: 700; }

/* ---------- Zona privada ---------- */
.menu-cuenta .list-group-item { border: 0; border-radius: var(--radio-pequeno) !important; font-weight: 600; padding: .8rem 1rem; display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem; }
.menu-cuenta .list-group-item.active { background: var(--color-principal); }
.menu-cuenta .bi { font-size: 1.2rem; }
.anuncio-panel { display: flex; gap: 1rem; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: .9rem; align-items: flex-start; }
.anuncio-panel + .anuncio-panel { margin-top: .9rem; }
.anuncio-panel .miniatura { width: 130px; aspect-ratio: 4 / 3; border-radius: var(--radio-pequeno); object-fit: cover; background: #e8ecf3; flex-shrink: 0; }
.anuncio-panel .botones { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
@media (max-width: 575.98px) { .anuncio-panel { flex-direction: column; } .anuncio-panel .miniatura { width: 100%; } }
.estado { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .9rem; border-radius: 999px; padding: .2rem .7rem; }
.estado-publicado { background: #def5ea; color: #0b5c43; }
.estado-revision, .estado-borrador { background: #fff4cc; color: #6b5300; }
.estado-pausado { background: #e8ecf3; color: #3c4658; }
.estado-vendido { background: #1b2230; color: #fff; }
.estado-rechazado, .estado-eliminado { background: #fde3e6; color: #8e0f22; }

/* Chat */
.chat { background: #eef2f8; border-radius: var(--radio); padding: 1rem; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem; }
.burbuja-chat { max-width: 82%; background: #fff; border-radius: 16px 16px 16px 4px; padding: .65rem .9rem; box-shadow: var(--sombra); overflow-wrap: anywhere; }
.burbuja-chat.mio { align-self: flex-end; background: #dcebff; border-radius: 16px 16px 4px 16px; }
.burbuja-chat small { display: block; color: var(--color-texto-suave); font-size: .8rem; margin-top: .2rem; }

/* ---------- Avisos (toasts) y mensajes ---------- */
.zona-avisos { position: fixed; z-index: 2100; left: 50%; transform: translateX(-50%); bottom: 1rem; width: min(560px, calc(100% - 1.5rem)); display: flex; flex-direction: column; gap: .5rem; }
.aviso { display: flex; gap: .75rem; align-items: flex-start; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra-alta); padding: 1rem 1.1rem; border-left: 6px solid var(--color-principal); font-weight: 600; animation: entrar .2s ease-out; }
.aviso.exito { border-color: var(--color-exito); }
.aviso.error { border-color: var(--color-error); }
.aviso .bi { font-size: 1.4rem; line-height: 1; }
.aviso.exito .bi { color: var(--color-exito); }
.aviso.error .bi { color: var(--color-error); }
.aviso button { margin-left: auto; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: var(--color-texto-suave); }
@keyframes entrar { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Aviso de cookies ---------- */
.modal-cookies .modal-content { border-radius: var(--radio); border: 0; }
.modal-cookies .modal-body { font-size: 1.02rem; }
.cookies-no-bloquea .modal-backdrop { display: none; }

/* ---------- Pie ---------- */
.pie { background: #0b2545; color: #d3deec; margin-top: 3rem; padding: 2.5rem 0 1.5rem; }
.pie h2, .pie .pie-titulo { color: #fff; font-size: 1.05rem; font-weight: 600; font-family: var(--fuente-titulos); margin-bottom: .8rem; }
.pie a { color: #d6deeb; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .45rem; }
.pie .legal { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 2rem; padding-top: 1.2rem; font-size: .92rem; }
.pie .boton-enlace { background: none; border: 0; padding: 0; color: #d6deeb; text-decoration: underline; }

/* ---------- Contenido editable (páginas legales, servicios...) ---------- */
.contenido-editable { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(1.1rem, 3vw, 2.2rem); overflow-wrap: anywhere; line-height: 1.7; color: #3a465b; }
.contenido-editable h2, .contenido-editable h3, .contenido-editable h4 { font-weight: 600; color: var(--color-principal); }
.contenido-editable h3 { font-size: 1.15rem; margin-top: 1.4rem; }
.contenido-editable strong { font-weight: 600; color: var(--color-texto); }
.contenido-editable h2 { margin-top: 1.6rem; }
.contenido-editable h2:first-child, .contenido-editable h3:first-child { margin-top: 0; }
.contenido-editable table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.contenido-editable th, .contenido-editable td { border: 1px solid var(--color-borde); padding: .55rem .7rem; vertical-align: top; }
.contenido-editable th { background: var(--color-fondo); }
@media (max-width: 575.98px) { .contenido-editable table { display: block; overflow-x: auto; } }

/* ---------- Tarifas ---------- */
.tarifa { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.4rem; height: 100%; display: flex; flex-direction: column; border-top: 4px solid var(--color-azul-claro); }
.tarifa .precio { font-family: var(--fuente-titulos); font-size: 1.9rem; font-weight: 700; color: var(--color-principal-oscuro); }
.tarifa .tamano { display: inline-block; background: var(--color-fondo); border-radius: 6px; padding: .1rem .5rem; font-weight: 700; font-size: .9rem; }
.croquis { background: #eef2f8; border-radius: 8px; height: 90px; position: relative; margin: .8rem 0; }
.croquis span { position: absolute; background: var(--color-destacado); border: 2px dashed var(--color-principal); border-radius: 4px; }

/* ---------- Utilidades ---------- */
.seccion { padding: 2.2rem 0; }
.seccion-titulo { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.seccion-titulo h2 { margin: 0; }
.vacio { text-align: center; background: #fff; border-radius: var(--radio); padding: 2.5rem 1rem; box-shadow: var(--sombra); }
.vacio .bi { font-size: 3rem; color: var(--color-azul-claro); }
.cuadricula-anuncios { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
@media (min-width: 1200px) { .cuadricula-anuncios { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; } }

/* Aviso de cookies en páginas legales: no bloquea la lectura */
.modal-cookies.cookies-no-bloquea { pointer-events: none; }
.modal-cookies.cookies-no-bloquea .modal-dialog { pointer-events: auto; align-items: flex-end; min-height: calc(100% - 1rem); }
.modal-cookies.cookies-no-bloquea .modal-content { box-shadow: var(--sombra-alta); }
body.cookies-sin-bloqueo { overflow: auto !important; padding-right: 0 !important; }
.texto-error { color: var(--color-error) !important; }
/* Botón de peligro con contraste AA sobre fondos grises */
.btn-outline-danger { --bs-btn-color: var(--color-error); --bs-btn-border-color: var(--color-error); --bs-btn-hover-bg: var(--color-error); --bs-btn-hover-border-color: var(--color-error); --bs-btn-active-bg: var(--color-error); }

/* =====================================================================
   v1.0.3 · Restyling: contacto, páginas en tarjetas, reportajes y datos protegidos
   ===================================================================== */
.icono-circulo { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--color-azul-suave); color: var(--color-principal); font-size: 1.25rem; flex-shrink: 0; }
.icono-circulo.grande { width: 3.6rem; height: 3.6rem; font-size: 1.7rem; }
.cabecera-contacto { background: linear-gradient(180deg, var(--color-azul-suave), #fff); }

/* Contacto */
.contacto-form { padding: clamp(1.2rem, 3vw, 2rem); }
.opcion-motivo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; height: 100%; min-height: 92px; padding: .8rem .5rem; border: 2px solid var(--color-borde); border-radius: var(--radio); background: #fff; cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--color-texto); transition: border-color .15s, background .15s; }
.opcion-motivo .bi { font-size: 1.5rem; color: var(--color-azul-claro); }
.opcion-motivo:hover { border-color: var(--color-azul-claro); }
.btn-check:checked + .opcion-motivo { border-color: var(--color-principal); background: var(--color-azul-suave); color: var(--color-principal); }
.btn-check:checked + .opcion-motivo .bi { color: var(--color-acento); }
.btn-check:focus-visible + .opcion-motivo { outline: 3px solid var(--color-principal); outline-offset: 2px; }
.lista-iconos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.lista-iconos li { display: flex; gap: .8rem; align-items: flex-start; }
.lista-iconos .bi { font-size: 1.3rem; color: var(--color-azul-claro); background: var(--color-azul-suave); border-radius: 12px; width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lista-iconos strong { display: block; color: var(--color-principal); font-weight: 600; }
.lista-iconos span { color: var(--color-texto-suave); font-size: .95rem; }
.caja-publicar { background: linear-gradient(135deg, var(--color-azul-suave), #fff); border: 1px solid #bfe6fb; }
.pregunta { border-bottom: 1px solid var(--color-borde); padding: .7rem 0; }
.pregunta:last-child { border-bottom: 0; padding-bottom: 0; }
.pregunta summary { cursor: pointer; font-weight: 600; color: var(--color-principal); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; color: var(--color-azul-claro); font-size: 1.3rem; line-height: 1; }
.pregunta[open] summary::after { content: "−"; }
.pregunta p { margin: .5rem 0 0; color: var(--color-texto-suave); }

/* Webs amigas y servicios: un bloque por tarjeta */
.contenido-intro { border-left: 4px solid var(--color-azul-claro); }
.tarjeta-enlace { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.3rem 1.4rem; height: 100%; border: 1px solid var(--color-borde); overflow-wrap: anywhere; transition: border-color .15s, box-shadow .15s; }
.tarjeta-enlace:hover { border-color: #cfe3f3; box-shadow: var(--sombra-alta); }
.tarjeta-enlace h3 { font-size: 1.12rem; font-weight: 600; color: var(--color-principal); margin: .2rem 0 .6rem; }
.tarjeta-enlace p { color: var(--color-texto-suave); margin-bottom: .45rem; line-height: 1.6; }
.tarjeta-enlace p:last-child { margin-bottom: 0; }
.tarjeta-enlace p > strong:first-child { font-weight: 600; color: var(--color-texto); }
.tarjeta-enlace a { word-break: break-word; }
.chip-categoria { display: inline-block; background: var(--color-azul-suave); color: var(--color-principal); border-radius: 999px; padding: .15rem .7rem; font-size: .82rem; font-weight: 600; }
.bloque-aparecer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(135deg, var(--color-azul-suave), #fff); border: 1px solid #bfe6fb; border-radius: var(--radio); padding: 1.3rem 1.4rem; }

/* Reportajes: envío de fotos */
.envio-reportaje { padding: clamp(1.2rem, 3vw, 2rem); border-top: 4px solid var(--color-acento); }
.pasos-cortos { padding-left: 1.2rem; color: var(--color-texto-suave); }
.pasos-cortos li { margin-bottom: .3rem; }
.envio-reportaje .zona-fotos { border-color: #b8d9f0; }

/* Datos del titular protegidos (páginas legales) */
.dato-protegido { font-family: ui-monospace, monospace; color: var(--color-texto-suave); }
.dato-protegido.mostrado { font-family: inherit; color: var(--color-texto); }
.acciones-cabecera .btn { white-space: nowrap; }

/* Tarjetas de categoría de la portada: baldosa grande con el icono grande arriba */
.rejilla-categorias .categoria-tarjeta { flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: 1.8rem 1rem 1.5rem; min-height: 0; }
.rejilla-categorias .categoria-tarjeta::before { display: none; }
.rejilla-categorias .categoria-tarjeta { border: 1px solid var(--color-borde); }
.rejilla-categorias .categoria-tarjeta:hover { border-color: var(--color-principal); }
.rejilla-categorias .categoria-tarjeta img { width: 120px; height: 120px; padding: 16px; border-radius: 50%; }
.rejilla-categorias .categoria-tarjeta strong { font-size: 1.25rem; }
.rejilla-categorias .categoria-tarjeta .flecha { display: none; }
.rejilla-categorias .categoria-tarjeta:hover img { transform: scale(1.05); }
.rejilla-categorias .categoria-tarjeta img { transition: transform .15s; }
@media (max-width: 575.98px) {
    .rejilla-categorias .categoria-tarjeta { padding: 1.2rem .6rem 1rem; }
    .rejilla-categorias .categoria-tarjeta img { width: 84px; height: 84px; padding: 12px; }
    .rejilla-categorias .categoria-tarjeta strong { font-size: 1.02rem; }
}

/* =====================================================================
   v1.0.14 · Cartel del hero, franja blanca, cabeceras azules, filtros y pasos
   ===================================================================== */
/* Cartel «Vende tu atracción en 3 pasos» (solo escritorio) */
.hero-vender { background: #fff; color: var(--color-texto); border-radius: 20px; box-shadow: 0 24px 50px rgba(0, 20, 60, .35); overflow: hidden; position: relative; }
.hero-vender::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--color-azul-claro), var(--color-principal), var(--color-rojo)); }
.hero-vender-cabecera { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 1.5rem 1rem; background: linear-gradient(180deg, var(--color-azul-suave), #fff); }
.hero-vender-icono { width: 3rem; height: 3rem; border-radius: 14px; background: var(--color-principal); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; transform: rotate(-6deg); box-shadow: 0 6px 14px rgba(0, 76, 160, .3); }
.hero-vender-titulo { font-family: var(--fuente-titulos); font-weight: 700; color: var(--color-tinta); font-size: 1.22rem; margin: 0; line-height: 1.2; }
.hero-vender-sub { margin: .15rem 0 0; color: var(--color-texto-suave); font-size: .9rem; }
.hero-vender ol { list-style: none; padding: .4rem 1.5rem 0; margin: 0 0 1.2rem; position: relative; }
.hero-vender ol::before { content: ""; position: absolute; left: calc(1.5rem + 1.2rem); top: 1.2rem; bottom: 1.6rem; border-left: 2px dashed #c9dbf0; }
.hero-vender li { display: flex; gap: .9rem; align-items: flex-start; padding: .55rem 0; position: relative; }
.hero-vender li > .bi { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; border: 2px solid var(--color-principal); color: var(--color-principal); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; position: relative; z-index: 1; }
.hero-vender li strong { display: block; color: var(--color-tinta); font-weight: 600; }
.hero-vender li span { color: var(--color-texto-suave); font-size: .93rem; }
.hero-vender .btn { margin: 0 1.5rem; width: calc(100% - 3rem) !important; }
.hero-vender-pie { text-align: center; color: var(--color-texto-suave); font-size: .88rem; margin: .8rem 0 1.2rem; }
.hero-vender-pie .bi { color: var(--color-azul-claro); }

/* Anuncios de la portada sobre franja blanca a todo el ancho */
.franja-blanca { background: transparent; }

/* Cabeceras de sección (listados, fichas, páginas): azul de marca con textos claros */
.cabecera-seccion, .ficha-cabecera, .cabecera-contacto { background: linear-gradient(135deg, var(--color-principal) 0%, #00336e 100%); border-bottom: 0; color: #fff; }
.cabecera-seccion h1, .ficha-cabecera h1, .cabecera-seccion .h1 { color: #fff; }
.cabecera-seccion .intro, .cabecera-seccion p, .ficha-cabecera p, .cabecera-seccion .text-suave, .ficha-cabecera .text-suave { color: rgba(255, 255, 255, .85) !important; }
.cabecera-seccion .migas a, .ficha-cabecera .migas a, .cabecera-seccion .breadcrumb-item, .ficha-cabecera .breadcrumb-item { color: rgba(255, 255, 255, .8); }
.cabecera-seccion .breadcrumb-item.active, .ficha-cabecera .breadcrumb-item.active { color: #fff; }
.cabecera-seccion .breadcrumb-item + .breadcrumb-item::before, .ficha-cabecera .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .55); }
.ficha-cabecera .text-danger { color: #ff8fa6 !important; }
.cabecera-seccion .referencia, .ficha-cabecera .referencia { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
.cabecera-seccion .btn-outline-primary { color: #fff; border-color: rgba(255, 255, 255, .7); }
.cabecera-seccion .btn-outline-primary:hover { background: #fff; color: var(--color-principal); }

/* Filtros: cada grupo separado y con su encabezado resaltado */
.panel-filtros > .mb-3 { border-top: 1px solid var(--color-borde); padding-top: .9rem; margin-bottom: .9rem !important; }
.panel-filtros > #titulo-filtros + .mb-3 { border-top: 0; padding-top: 0; }
.panel-filtros .form-label { display: flex !important; align-items: center; gap: .45rem; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; font-weight: 700; color: var(--color-principal); background: var(--color-azul-suave); border-left: 3px solid var(--color-principal); border-radius: 6px; padding: .4rem .65rem; margin-bottom: .55rem; }
#titulo-filtros { font-size: 1.15rem; margin-bottom: .8rem; }

/* Asistente: pasos seleccionables */
.pasos-indicador li.clicable { cursor: pointer; border-radius: 10px; transition: background .15s; padding: .3rem 0; }
.pasos-indicador li.clicable:hover { background: var(--color-azul-suave); color: var(--color-principal); }
.pasos-indicador li.clicable:focus-visible { outline: 3px solid var(--color-principal); outline-offset: 2px; }

/* Botón amarillo huevo (administración, avisos) y barra superior del panel */
.btn-amarillo { background: #f6c945; border-color: #f6c945; color: #2b2300; }
.btn-amarillo:hover, .btn-amarillo:focus-visible { background: #e9b824; border-color: #e9b824; color: #2b2300; }
.barra-admin { background: linear-gradient(135deg, var(--color-principal) 0%, #00336e 100%); }
.barra-admin .burbuja { background: var(--color-rojo); color: #fff; }

/* Cabeceras azules de sección: más aire y decoración feriante */
.cabecera-seccion, .ficha-cabecera { position: relative; overflow: hidden; padding: 2.2rem 0 2.4rem;
    background:
        radial-gradient(circle at 10px 6px, rgba(255, 255, 255, .5) 2px, transparent 2.5px) 0 0 / 36px 12px repeat-x,
        radial-gradient(circle at 92% 30%, rgba(8, 172, 248, .28), transparent 40%),
        linear-gradient(135deg, var(--color-principal) 0%, #00336e 100%); }
.cabecera-seccion::after, .ficha-cabecera::after { content: ""; position: absolute; right: -70px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%); border-radius: 50%;
    border: 14px dashed rgba(255, 255, 255, .08); box-shadow: 0 0 0 30px rgba(255, 255, 255, .03), inset 0 0 0 46px rgba(255, 255, 255, .04); pointer-events: none; }
.cabecera-seccion .container, .ficha-cabecera .container { position: relative; z-index: 1; }
.cabecera-seccion h1, .ficha-cabecera h1 { margin-bottom: .9rem; }
.cabecera-seccion .intro { max-width: 120ch; font-size: 1.05rem; line-height: 1.65; }
@media (max-width: 767.98px) { .cabecera-seccion, .ficha-cabecera { padding: 1.5rem 0 1.7rem; } .cabecera-seccion::after, .ficha-cabecera::after { width: 180px; height: 180px; right: -60px; } }