/* Portada de la app (raiz de centralkamp.com). Solo tema claro: azul claro, blanco, azul marino y naranja. */
:root {
  color-scheme: light;
  --escenario: #d9e2ef; --fondo: #edf3fb; --sup: #ffffff; --sup2: #e2eaf5; --linea: #d3dcea; --tinta: #14243d; --suave: #596379;
  --marca: #1d365d; --naranja: #dd7520; --boton: #1d365d; --boton-txt: #ffffff;
  --ok: #2e6b4f; --ok-fondo: #dfeee5; --ok-txt: #1f4d38; --mal: #b3261e; --neutro: #1d4e9e; --pista: #e1e8f2;
  --aviso-fondo: #fbe9d2; --aviso-txt: #7a3a0e; --icono: #596379; --insignia-fondo: #1d365d; --insignia-k: #ffffff; --naranja-txt: #b85a12; --naranja-activo: #a84f0f;
  --sombra: 0 6px 20px rgba(20, 36, 61, .1);
  --fuente: ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--escenario); color: var(--tinta); font: 15px/1.45 var(--fuente); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--neutro); outline-offset: 2px; }
/* Los textos fijos del HTML esperan a que carguen los del idioma elegido (sin destello en otro idioma). */
html:not(.i18n-listo) [data-i18n], html:not(.i18n-listo) [data-i18n-b] { visibility: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.app { container-type: inline-size; position: relative; width: 100%; max-width: 480px; height: 100svh; margin: 0 auto; background: var(--fondo); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 560px) { .app { box-shadow: 0 0 40px rgba(20, 36, 61, .18); } }

/* Cabecera */
/* La cabecera flota sobre la foto (transparente) y se vuelve solida al desplazar la pantalla (inicio.js pone "desplazada").
   Si sale el aviso de "sin conexion" pasa a ir en la fila, debajo no, para que el aviso no quede tapado. */
.cab { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 14px; padding-top: max(6px, env(safe-area-inset-top, 0px)); background: transparent; border-bottom: 1px solid transparent; min-height: 58px; transition: background-color .2s, border-color .2s; }
.app.desplazada .cab, .app:has(.offline:not([hidden])) .cab { background: var(--sup); border-bottom-color: var(--linea); }
.app:has(.offline:not([hidden])) .cab { position: static; }
.logo { display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0; min-height: 44px; color: var(--marca); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.logo img { width: 34px; height: 34px; }
.logo b { color: var(--naranja); font-weight: 800; }
.esp { flex: 1; }
.ibtn { position: relative; min-width: 44px; min-height: 44px; border: 0; background: transparent; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--tinta); }
.ibtn svg { width: 23px; height: 23px; }
.num { position: absolute; top: -1px; right: -3px; min-width: 18px; height: 18px; padding: 0; border-radius: 50%; background: var(--naranja-txt); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--sup); box-sizing: content-box; }
.avatar { position: relative; width: 44px; height: 44px; margin-left: 2px; border-radius: 50%; background: var(--marca); color: var(--sup); font-weight: 800; font-size: 14px; border: 0; display: inline-flex; align-items: center; justify-content: center; }
.avatar .ins { position: absolute; right: -5px; bottom: -5px; }
.entrar { position: relative; height: 38px; margin-left: 4px; padding: 0 16px; border-radius: 19px; border: 0; background: var(--boton); color: var(--boton-txt); font-size: 14px; font-weight: 800; }
.entrar::after { content: ""; position: absolute; inset: -5px -3px; }
.offline { background: var(--aviso-fondo); color: var(--aviso-txt); font-size: 13px; font-weight: 600; padding: 8px 14px; }
.pantalla { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

/* Cabecera con foto: la foto de portada a la derecha, con su borde fundido por la izquierda, por arriba y por abajo para que se
   integre con el fondo. La palabra clave del titulo va en naranja y el texto queda sobre la zona clara. */
.hero { position: relative; isolation: isolate; min-height: 300px; padding: calc(70px + env(safe-area-inset-top, 0px)) 14px 0; overflow: hidden; background: var(--fondo); }
.hero-foto { position: absolute; right: -6%; top: calc(56px + env(safe-area-inset-top, 0px)); width: 76%; max-width: none; height: auto; z-index: -2;
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 5%, #000 29%), linear-gradient(to bottom, transparent 0, #000 7%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, transparent 5%, #000 29%), linear-gradient(to bottom, transparent 0, #000 7%, #000 78%, transparent 100%);
  mask-composite: intersect; }
.instalar:not([hidden]) + .hero { padding-top: 22px; }
.instalar:not([hidden]) + .hero .hero-foto { top: 0; }
.hero-texto { position: relative; max-width: 60%; }
/* La foto llega hasta debajo de parte del texto (decision del titular, 2026-11-09): un velo del color del fondo, mas denso bajo las letras y fundido
   hacia la foto, mantiene el contraste (la palabra naranja es la mas delicada) */
.hero-texto::before { content: ""; position: absolute; z-index: -1; inset: -18px -34% -18px -40px; pointer-events: none;
  background: radial-gradient(ellipse 62% 64% at 38% 50%, var(--fondo) 56%, transparent 100%); }
.hero h1 { margin: 0; font-size: clamp(25px, 7.4vw, 31px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.hero h1 strong { color: var(--naranja-txt); font-weight: inherit; }
.hero-sub { margin: 10px 0 0; font-size: 16px; line-height: 1.35; color: var(--tinta); text-wrap: balance; }

/* Buscador */
.buscador { padding: 0 14px 6px; }
.texto { position: relative; margin: -53px 0 14px; z-index: 1; }
.texto > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--suave); }
.texto input { width: 100%; height: 56px; border: 1px solid var(--linea); border-radius: 28px; padding: 0 56px 0 44px; background: var(--sup); box-shadow: var(--sombra); font-size: 15px; text-overflow: ellipsis; }
.tipeo { position: absolute; left: 44px; right: 56px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: 15px; color: var(--suave); pointer-events: none; }
.tipeo > span { flex: none; will-change: transform; }
.tipeo > span::after { content: ""; display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: text-bottom; background: var(--naranja); animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.ir-buscar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--naranja); color: #fff; display: flex; align-items: center; justify-content: center; }
.ir-buscar::after { content: ""; position: absolute; inset: -2px; }
.ir-buscar svg { width: 22px; height: 22px; }
.ir-buscar:disabled { background: var(--pista); color: var(--suave); cursor: not-allowed; }
.pestanas { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 14px; margin: 0 -14px 14px; padding: 0 14px; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
/* Ovalo bajo las pestanas: «Hay N anuncios en Centralkamp». Mismo alto y misma forma que el «Ver todos» de los bloques (28 px); naranja con letra blanca
   (--naranja-txt, 4,7:1) y cursiva (decision del titular, 2026-11-09). Es solo informacion: no se pulsa. */
.total-anuncios { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; height: 28px; margin: -4px auto 14px; padding: 0 14px; border-radius: 14px; background: var(--naranja-txt); color: #fff; font-size: 13px; font-weight: 800; font-style: italic; line-height: 1; white-space: nowrap; box-shadow: var(--sombra); }
.total-anuncios[hidden] { display: none; }
.pestana { flex: 0 0 84px; scroll-snap-align: start; min-height: 64px; border: 1px solid var(--linea); background: var(--sup); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--icono); border-radius: 14px; padding: 7px 2px 6px; }
.pestana svg { width: 38px; height: 28px; }
/* La pestaña elegida no lleva fondo ni borde: solo el icono y la letra en naranja (en tableta y PC, ademas, una raya naranja debajo) */
.pestana[aria-selected="true"] { background: transparent; border-color: transparent; color: var(--naranja-activo); }
.tarjeta-filtros { background: var(--sup); border-radius: 24px; padding: 16px 14px 8px; border: 1px solid var(--linea); box-shadow: var(--sombra); }
.filtros-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.filtros-t { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; letter-spacing: -.02em; }
.filtros-t svg { width: 24px; height: 24px; flex: none; color: var(--marca); }
.limpiar { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 17px; background: var(--marca); color: #fff; font-size: 14px; font-weight: 800; }
.limpiar::after { content: ""; position: absolute; inset: -5px -3px; }
.limpiar svg { width: 17px; height: 17px; flex: none; }
.limpiar:disabled { background: var(--pista); color: var(--suave); cursor: not-allowed; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.campo label .ic { display: inline-flex; flex: none; color: var(--marca); }
.campo label .ic svg { width: 19px; height: 19px; }
.campo select, .campo input { height: 46px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--fondo); padding: 0 10px; width: 100%; min-width: 0; }
.campo select:disabled { background: var(--pista); color: var(--suave); }
.campo .selector { height: 46px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--fondo); padding: 0 10px 0 12px; width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 16px; text-align: left; color: var(--tinta); }
.campo .selector span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo .selector.elegido span { font-weight: 700; }
.campo .selector svg { width: 18px; height: 18px; flex: none; color: var(--marca); }
.campo .selector:disabled { background: var(--pista); color: var(--suave); cursor: not-allowed; }
.campo .selector:disabled svg { color: var(--suave); opacity: .6; }
.hoja.con-fija { padding-top: 0; }
/* La cabecera fija lleva la misma ilustracion y en el mismo sitio que la hoja, para que al pasar de una a otra no se note el corte */
.hoja-fija { position: sticky; top: 0; z-index: 2; background: var(--clipart); margin: 0 -16px; padding: 14px 16px 2px; }
.buscar-sel { padding: 2px 0 10px; }
.buscar-sel input { width: 100%; height: 46px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--fondo); padding: 0 12px; font-size: 16px; }
.sin-coincidencias { text-align: center; padding: 14px 0; }
.boton { width: 100%; min-height: 56px; margin-top: 16px; border: 0; border-radius: 28px; background: var(--boton); color: var(--boton-txt); font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; }
.boton:disabled { background: var(--pista); color: var(--suave); cursor: not-allowed; }
.boton svg { width: 20px; height: 20px; }
.aviso-vacio { margin: 10px 0 0; font-size: 13px; color: var(--aviso-txt); background: var(--aviso-fondo); border-radius: 10px; padding: 8px 10px; }
.sec { display: flex; justify-content: center; margin-top: 2px; }
.enlace { min-height: 44px; border: 0; background: transparent; color: var(--neutro); font-weight: 700; font-size: 14px; padding: 0 4px; }

/* Aviso de instalacion */
/* Va debajo de la cabecera flotante (que mide 58 px) y, con el aviso delante, la foto no necesita su hueco de arriba */
.instalar { display: flex; align-items: center; gap: 12px; margin: calc(66px + env(safe-area-inset-top, 0px)) 14px 0; padding: 10px 6px 10px 12px; background: var(--sup); border: 1px solid var(--linea); border-radius: 16px; }
.instalar img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.instalar .txt { flex: 1; min-width: 0; font-size: 13px; color: var(--suave); line-height: 1.3; }
.instalar .txt strong { display: block; font-size: 15px; color: var(--tinta); }
.instalar .ir { min-height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--boton); color: var(--boton-txt); font-weight: 800; font-size: 14px; }
.instalar .no { width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; color: var(--suave); }
.pie .instalar-enlace { justify-self: start; margin: 4px 0; color: var(--marca); font-weight: 800; border: 0; background: var(--sup); padding: 0 16px; min-height: 44px; border-radius: 22px; font-size: 14px; }
.pasos { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 15px; }

/* Anuncios */
/* Cada bloque empieza con la ilustracion de montanas y pinos detras (se mezcla con el fondo); el titulo queda debajo de las cumbres
   y «Ver todos →» a la derecha, encima de los pinos. */
.bloque { position: relative; padding-top: 62px; }
.bloque::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 104px; pointer-events: none; mix-blend-mode: multiply;
  background: url("/hero/v1/montanas-800.webp") right bottom / auto 150px no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 70%, transparent 100%); }
.bloque > * { position: relative; }
.bloque-cab { z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; }
.bloque-cab h2 { margin: 0; min-width: 0; font-size: 22px; letter-spacing: -.02em; text-wrap: balance; }
.bloque-cab .enlace { position: relative; align-self: center; display: inline-flex; align-items: center; flex: none; gap: 6px; min-height: 0; height: 28px; padding: 0 11px 0 14px; border-radius: 14px; background: var(--boton); color: var(--boton-txt); font-size: 13px; font-weight: 800; box-shadow: var(--sombra); }
.bloque-cab .enlace::before { content: ""; order: 2; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.bloque-cab .enlace::after { content: ""; position: absolute; inset: -8px -4px; }
.bloque-sub { padding: 0 14px; margin: 0 0 10px; font-size: 13px; color: var(--suave); }
.bloque-cab + .carrusel { margin-top: 8px; }
.carrusel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 14px; padding: 2px 14px 8px; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
/* Puntos del carrusel (inicio.js): el de la posicion actual se alarga y se pone naranja */
.puntos { display: flex; justify-content: center; align-items: center; gap: 6px; height: 8px; margin-top: 2px; }
.puntos:empty { display: none; }
.puntos i { width: 8px; height: 8px; border-radius: 4px; background: var(--aviso-fondo); transition: width .2s, background-color .2s; }
.puntos i.on { width: 22px; background: var(--naranja-txt); }
.tarjeta { flex: 0 0 256px; scroll-snap-align: start; background: var(--sup); border: 1px solid var(--linea); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; text-align: left; padding: 0; box-shadow: 0 4px 14px rgba(20, 36, 61, .07); }
.foto { position: relative; aspect-ratio: 4 / 3; background: var(--pista); overflow: hidden; display: block; width: 100%; border: 0; padding: 0; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La foto acaba en una curva blanca (el cuerpo de la tarjeta sube un poco sobre ella); precio y contadores quedan por encima */
.foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 20px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V9C18 1 36 3 54 8s30 4 46-3v15z' fill='%23fff'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
.corazon { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; color: #fff; }
.corazon span { flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(10, 18, 32, .8); display: flex; align-items: center; justify-content: center; }
.corazon svg { width: 20px; height: 20px; }
.corazon[aria-pressed="true"] { color: var(--naranja); }
.corazon[aria-pressed="true"] svg { fill: currentColor; }
.info-foto { position: absolute; z-index: 1; right: 10px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none; }
.pildora { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 10px; background: rgba(10, 18, 32, .82); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.pildora svg { width: 15px; height: 15px; flex: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.plazas { display: flex; align-items: center; }
.plaza + .plaza { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--linea); }
.equipo { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.equipo li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 14px; background: var(--pista); font-size: 13px; font-weight: 700; color: var(--tinta); }
.equipo svg { width: 18px; height: 18px; flex: none; color: var(--marca); }
.bandera { width: 18px; height: 13px; flex: none; border-radius: 2px; outline: 1px solid rgba(20, 36, 61, .28); outline-offset: -1px; }
.sobre { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; }
.cuerpo { flex: 1; padding: 4px 14px 10px; display: grid; gap: 8px; align-content: start; }
/* Precio: pastilla oscura sobre la foto, encima de la curva */
.precio-foto { position: absolute; z-index: 1; left: 10px; bottom: 24px; max-width: calc(100% - 90px); padding: 3px 11px 4px; border-radius: 12px; background: rgba(10, 18, 32, .8); color: #fff; font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; pointer-events: none; }
.titulo { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
/* Datos en dos columnas con una raya entre ellas: lugar | año, km | plazas (dormir y viajar) */
.datos { display: grid; grid-template-columns: 1fr 1fr; padding-top: 8px; border-top: 1px solid var(--linea); font-size: 14px; font-weight: 500; color: var(--tinta); }
.dato { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 0; overflow-wrap: anywhere; }
.dato svg { width: 18px; height: 18px; flex: none; color: var(--marca); }
/* Lugar con distancia: el municipio y, debajo y en gris, «A 650 km» (un solo elemento para que la fila no se parta en columnas) */
.dato .lugar-txt { min-width: 0; }
.dato .lugar-txt .dist { display: block; font-size: 13px; color: var(--suave); line-height: 1.25; }
.datos > :nth-child(odd) { padding-right: 10px; border-right: 1px solid var(--linea); }
.datos > :nth-child(even) { padding-left: 12px; }
.datos > :nth-child(odd):last-child { border-right: 0; }
/* Pie: compartir y «Ver anuncio» */
.pie-tarjeta { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 4px 12px 12px; }
.compartir { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--pista); color: var(--marca); display: inline-flex; align-items: center; justify-content: center; }
.compartir svg { width: 20px; height: 20px; }
.ver-anuncio { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--boton); color: var(--boton-txt); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.ver-anuncio svg { width: 18px; height: 18px; flex: none; stroke-width: 2.2; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.et { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 3px 8px; background: var(--pista); color: var(--tinta); }
.et.dest { background: #fff; color: var(--marca); padding-left: 6px; box-shadow: 0 1px 5px rgba(20, 36, 61, .28); }
.et.dest svg { width: 14px; height: 14px; fill: var(--naranja); flex: none; }
.et.urge { background: var(--aviso-fondo); color: var(--aviso-txt); }
.et.ver { background: var(--ok-fondo); color: var(--ok-txt); padding: 2px 8px 2px 4px; }
.et.nover { background: var(--pista); color: var(--suave); font-weight: 600; }
.ins { width: 22px; height: 22px; flex: none; display: inline-flex; color: var(--ok); }
.ins svg { width: 100%; height: 100%; display: block; }
.avatar .ins { width: 24px; height: 24px; padding: 2px; box-sizing: border-box; border-radius: 50%; background: var(--sup); }
.esqueleto .barra { background: var(--pista); border-radius: 6px; height: 14px; margin-top: 8px; }
.fallo { margin: 0 14px; padding: 14px; border: 1px solid var(--linea); border-radius: 16px; background: var(--sup); font-size: 14px; flex: 1; }
.fallo p { margin: 0 0 6px; }
/* Compra y vende sin riesgo: bloque azul marino que destaca; el enlace es un badge blanco con letras azules */
.seguridad { margin: 22px 14px 0; padding: 18px 16px; border-radius: 24px; background: var(--marca); color: var(--sup); box-shadow: var(--sombra); display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: start; }
.seguridad svg { width: 44px; height: 44px; color: var(--sup); grid-row: span 3; }
.seguridad h2 { margin: 0; font-size: 17px; color: var(--sup); }
.seguridad p { margin: 0; font-size: 14px; color: var(--sup2); }
.seguridad button { position: relative; justify-self: start; height: 36px; margin-top: 8px; padding: 0 16px; border: 0; border-radius: 18px; background: var(--sup); color: var(--marca); font-size: 14px; font-weight: 800; }
.seguridad button::after { content: ""; position: absolute; inset: -4px -3px; }
.seguridad button:focus-visible { outline-color: var(--sup); outline-offset: 3px; }
/* Pie: bloque azul marino con el logo, los enlaces legales en dos columnas y las montanas muy tenues al fondo */
/* El azul ocupa todo el ancho de la app (sale de la columna centrada con margenes negativos medidos con unidades de contenedor
   de .app) y llega hasta abajo del todo; el contenido sigue alineado con el resto de bloques. */
.pie { --fuera: calc(50% - 50cqw); --sangria: 14px; position: relative; isolation: isolate; overflow: hidden; margin: 30px var(--fuera) 0; padding: 22px calc(var(--sangria) - var(--fuera)) 46px; background: var(--marca); color: var(--sup2); font-size: 13px; display: grid; gap: 6px; }
.pie::before { content: ""; position: absolute; inset: auto 0 0 0; height: 150px; z-index: -1; pointer-events: none; opacity: .16; filter: invert(1); mix-blend-mode: screen;
  background: url("/hero/v1/montanas-800.webp") right bottom / auto 150px no-repeat; }
.pie-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pie-k { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--sup); display: inline-flex; align-items: center; justify-content: center; }
.pie-k img { width: 30px; height: 30px; display: block; }
.pie-marca { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--sup); }
.pie-marca b { color: var(--naranja); font-weight: 800; }
.pie nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pie a { color: var(--sup); min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; overflow-wrap: anywhere; }
.pie a:focus-visible, .pie .instalar-enlace:focus-visible { outline-color: var(--sup); }
.pie-ia { margin: 4px 0 0; font-size: 12px; line-height: 1.35; text-align: center; color: var(--sup2); }
.pie-copy { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); text-align: center; color: var(--sup2); }

/* Barra inferior */
.barra-inf { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--sup); border-radius: 22px 22px 0 0; box-shadow: 0 -6px 20px rgba(20, 36, 61, .09); padding-bottom: env(safe-area-inset-bottom, 0px); }
.bi { position: relative; min-height: 62px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--suave); }
.bi svg { width: 24px; height: 24px; }
.bi[aria-current="page"] { color: var(--marca); font-weight: 800; }
/* Publicar: el circulo naranja sobresale por encima de la barra, con un aro blanco */
.bi .mas { width: 58px; height: 58px; margin-top: -30px; border-radius: 50%; background: var(--naranja); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--sup), 0 8px 16px rgba(221, 117, 32, .38); }
.bi .mas svg { width: 28px; height: 28px; }
.bi.pub { justify-content: flex-end; padding-bottom: 7px; color: var(--tinta); }
.bi .num { top: 2px; right: calc(50% - 34px); }
.toast { position: absolute; left: 14px; right: 14px; bottom: 76px; background: var(--marca); color: var(--sup); border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toast[hidden] { display: none; }
.toast button { flex: none; min-height: 44px; margin: -12px -6px -12px 0; padding: 0 10px; border: 0; background: transparent; color: var(--sup); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* Hojas */
.velo { position: absolute; inset: 0; background: rgba(8, 16, 30, .55); display: flex; align-items: flex-end; z-index: 5; }
/* El reto de seguridad (Cloudflare Turnstile) va en su propio velo, encima de cualquier otra hoja (p. ej. «Más filtros»). */
.velo-reto { z-index: 6; }
.reto-caja { min-height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; }
.reto-carga { font-size: 14px; color: var(--suave); }
.reto-error { margin: 0; font-size: 14px; line-height: 1.4; color: var(--mal); text-align: center; }
/* Las montanas y pinos van detras de la cabecera de cada hoja (la ilustracion tiene fondo blanco, como la hoja; se desvanece por
   la izquierda y por abajo con degradados blancos). El fondo no se desplaza con el contenido. */
.hoja, .hoja-fija { --clipart: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 45%) top / 100% 150px no-repeat,
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, #fff 100%) top / 100% 150px no-repeat,
    url("/hero/v1/montanas-800.webp") right top / auto 150px no-repeat, var(--sup); }
.hoja { overscroll-behavior: contain; width: 100%; max-height: 84%; overflow-y: auto; border-radius: 24px 24px 0 0; padding: 14px 16px 22px; background: var(--clipart); }
.asa { width: 40px; height: 4px; border-radius: 2px; background: var(--linea); margin: 0 auto 10px; }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hoja-cab h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.cerrar { width: 44px; height: 44px; border: 0; background: var(--pista); border-radius: 50%; font-size: 20px; line-height: 1; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li > button { width: 100%; min-height: 50px; text-align: left; border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; border-bottom: 1px solid var(--linea); font-size: 16px; }
.lista li:last-child > button { border-bottom: 0; }
.lista li > button[aria-pressed="true"] { font-weight: 800; color: var(--marca); }
.lista small { color: var(--suave); font-size: 12px; }
/* Hoja «Más filtros»: cabecera y «Ver N resultados» fijos; solo se desplaza el cuerpo */
.hoja.hoja-filtros { display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: 88%; }
.hoja-tope { flex: none; padding: 14px 16px 0; }
.hoja-tope .hoja-cab { gap: 8px; margin-bottom: 4px; }
.hoja-tope .limpiar { margin-left: auto; }
.hoja-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 10px; }
.hoja-pie { flex: none; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); background: var(--sup); }
.hoja-pie .boton { margin-top: 0; }
.grupo { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.grupo legend { padding: 0; margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linea); border-radius: 22px; background: var(--sup); color: var(--tinta); font-size: 15px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 800; }
/* Deslizadores (precio, kilometraje, distancia): dos <input type="range"> transparentes encima de una pista dibujada; solo los
   tiradores reciben el toque (28 px dentro de una fila de 44 px). */
.rango-txt { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--marca); font-variant-numeric: tabular-nums; }
.rango { --t: 28px; position: relative; height: 44px; margin: 0 2px 4px; }
.rango-pista, .rango-barra { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.rango-pista { left: 0; right: 0; background: var(--pista); }
.rango-barra { left: calc(var(--t) / 2 + (100% - var(--t)) * var(--a)); right: calc(var(--t) / 2 + (100% - var(--t)) * (1 - var(--b))); background: var(--naranja-txt); }
.rango-in { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; pointer-events: none; touch-action: pan-y; }
.rango-in::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.rango-in::-moz-range-track { height: 44px; background: transparent; }
.rango-in::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; pointer-events: auto; width: 28px; height: 28px; margin-top: 8px; border-radius: 50%; background: var(--sup); border: 3px solid var(--marca); box-shadow: var(--sombra); cursor: grab; }
.rango-in::-moz-range-thumb { box-sizing: border-box; pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--sup); border: 3px solid var(--marca); box-shadow: var(--sombra); cursor: grab; }
.rango-in:focus-visible { outline: none; }
.rango-in:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--neutro); outline-offset: 2px; }
.rango-in:focus-visible::-moz-range-thumb { outline: 3px solid var(--neutro); outline-offset: 2px; }
.ubic-boton { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--marca); border-radius: 24px; background: var(--sup); color: var(--marca); font-size: 15px; font-weight: 800; }
.ubic-boton svg { width: 20px; height: 20px; flex: none; }
.ubic-boton:disabled { opacity: .7; cursor: progress; }
.dist-quitar { padding-left: 0; }
/* Mapa de la distancia (plegado hasta pulsar «Ver en el mapa»): solo ensena el punto aproximado y el circulo del radio. */
.mapa-boton { margin-top: 12px; }
.mapa-caja.maplibregl-map { font-family: var(--fuente); }
.mapa-caja .maplibregl-popup { z-index: 5; }
.mapa-caja .maplibregl-popup-content { padding: 10px 44px 10px 10px; border-radius: 12px; }
.mapa-caja { position: relative; isolation: isolate; height: 320px; margin-top: 12px; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--fondo); }
.mapa-caja .maplibregl-ctrl-attrib { font-size: 11px; }
/* Botones + y − del mapa: tamano tactil de 44 px. */
.mapa-caja .maplibregl-ctrl-group button { width: 44px; height: 44px; }
.mapa-caja .maplibregl-ctrl-top-right { margin: 6px 6px 0 0; }
.mapa-ayuda { margin-top: 8px; }
/* «Buscar en esta zona»: aparece tras mover o acercar el mapa; arriba a la izquierda (los botones de zoom van a la derecha). */
.mapa-zona-btn { position: absolute; z-index: 3; top: 10px; left: 10px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--marca); border-radius: 22px; background: var(--sup); color: var(--marca); font: 800 14px/1 var(--fuente); box-shadow: var(--sombra); cursor: pointer; }
.mapa-zona-btn[hidden] { display: none; }
.mapa-zona-btn.buscando { display: inline-flex; align-items: center; gap: 8px; cursor: progress; }
.mapa-zona-btn.buscando::before { content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--linea); border-top-color: var(--naranja-txt); animation: mapa-gira .8s linear infinite; }
.mapa-zona-btn:focus-visible { outline: 3px solid var(--neutro); outline-offset: 2px; }
/* «Usar mi ubicacion» dentro del mapa: bajo los botones + y −, a la derecha, tambien de 44 px. */
.mapa-ubic-btn { position: absolute; z-index: 3; top: 114px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 4px; background: #fff; color: #333; box-shadow: 0 0 0 2px rgba(0, 0, 0, .1); cursor: pointer; }
.mapa-ubic-btn:hover { background: #f2f2f2; }
.mapa-ubic-btn:focus-visible { outline: 3px solid var(--neutro); outline-offset: 2px; }
/* El mapa en los filtros basicos: ocupa el ancho entero de la rejilla de campos, debajo del boton «Ver en el mapa». */
.mapa-bloque { grid-column: 1 / -1; display: block; margin-top: -2px; }
.mapa-bloque .nota-sesion { margin-top: 8px; }
.mapa-zona-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 14px; font-weight: 700; }
.campo .mapa-selector { cursor: pointer; }
.mapa-caja .mapa-pest { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 118px); padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--naranja-txt); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; pointer-events: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.mapa-caja .mapa-pest svg { flex: none; width: 26px; height: 16px; }
.mapa-caja .mapa-pest span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-hoja { margin-top: 14px; }
/* Rueda de espera en el centro del mapa mientras llegan las chinchetas */
.mapa-caja .mapa-espera { position: absolute; left: 50%; top: 50%; z-index: 3; width: 38px; height: 38px; margin: -19px 0 0 -19px; box-sizing: border-box; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); border-top-color: var(--naranja-txt); background: rgba(255, 255, 255, .55); box-shadow: 0 1px 6px rgba(0, 0, 0, .25); animation: mapa-gira .8s linear infinite; pointer-events: none; }
.mapa-caja .mapa-espera[hidden] { display: none; }
@keyframes mapa-gira { to { transform: rotate(360deg); } }
/* Barra plegable de filtros: solo en movil. «Filtros · n» despliega los desplegables; «Mapa» siempre a la vista */
.filtros-barra { display: none; }
@media (max-width: 719px) {
  .filtros-barra { display: flex; gap: 10px; }
  .barra-btn { flex: 1 1 0; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1.5px solid var(--linea); border-radius: 22px; background: var(--fondo); color: var(--tinta); font-size: 16px; font-weight: 700; }
  .barra-btn svg { width: 20px; height: 20px; flex: none; color: var(--marca); }
  .barra-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-btn.abierto { border-color: var(--marca); }
  .barra-btn .barra-n { flex: none; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--naranja-txt); color: #fff; font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; }
  #filtros-toggle > svg:last-child { width: 18px; height: 18px; transition: transform .15s; }
  #filtros-toggle.abierto > svg:last-child { transform: rotate(180deg); }
  #filtros-toggle { flex-grow: 1.3; }
  .tarjeta-filtros { padding: 12px 12px 8px; }
  .filtros-cab { margin: 12px 0; }
  .filtros-t { display: none; }
  .filtros-cab { justify-content: flex-end; }
  .tarjeta-filtros.plegada .filtros-cab, .tarjeta-filtros.plegada .campos > .campo, .tarjeta-filtros.plegada .sec { display: none; }   /* «Ver N resultados» (#ver) se queda siempre a la vista */
  .tarjeta-filtros.plegada .campos { margin-top: 0; }
  .tarjeta-filtros:not(.plegada) .campos { margin-top: 0; }
  @media (max-width: 360px) { .barra-btn { padding: 0 9px; gap: 6px; } #filtros-toggle > svg:first-child { display: none; } }
  .campos > .mapa-bloque { margin-top: 2px; }
  .tarjeta-filtros.plegada .campos > .mapa-bloque { margin-top: 12px; }
}
#mas-cuerpo .mapa-bloque { margin-top: 10px; }
.mapa-pines { margin-top: 8px; }
/* Anuncios en el mapa: chincheta con el logotipo (una por localidad; con numero si hay varios) y popup con lo basico del anuncio. */
.mapa-pin { position: relative; display: block; width: 44px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mapa-pin img { display: block; width: 42px; height: 48px; margin: 0 auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.mapa-pin:focus-visible { outline: 3px solid var(--neutro); outline-offset: 2px; border-radius: 12px; }
.mapa-pin-n { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--boton); color: var(--boton-txt); border: 2px solid #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
.mapa-popup { display: flex; gap: 10px; align-items: flex-start; min-width: 200px; }
.mapa-popup-foto { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--fondo); }
.mapa-popup-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mapa-popup-titulo { font-size: 14px; line-height: 1.25; color: var(--marca); overflow-wrap: anywhere; }
.mapa-popup-precio { font-size: 15px; font-weight: 800; color: var(--marca); }
.mapa-popup-lugar { font-size: 13px; color: var(--suave); }
.mapa-popup-nav { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.mapa-popup-nav button { width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 22px; background: var(--sup); color: var(--marca); font-size: 22px; font-weight: 800; line-height: 1; }
.mapa-popup-de { min-width: 52px; font-size: 13px; text-align: center; color: var(--suave); }
.mapa-caja .maplibregl-popup-close-button { width: 44px; height: 44px; font-size: 22px; }
.perfil-cab { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.perfil-cab .avatar { width: 54px; height: 54px; font-size: 19px; }
.perfil-cab strong { display: block; font-size: 18px; }
.banner { background: var(--aviso-fondo); color: var(--aviso-txt); border-radius: 14px; padding: 12px; font-size: 14px; display: grid; gap: 8px; margin-bottom: 10px; }
.banner.bien { background: var(--ok-fondo); color: var(--ok-txt); }
.banner button { justify-self: start; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--boton); color: var(--boton-txt); font-weight: 800; }
.aviso { padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.aviso small { display: block; color: var(--suave); margin-top: 2px; }
.aviso.nuevo { font-weight: 700; }
.nota-sesion { font-size: 13px; color: var(--suave); margin: 10px 0 0; }
/* «Ubicacion»: lista de sugerencias bajo el campo (en el flujo de la hoja, no flotante, para que el desplazamiento de la hoja no la recorte) */
.ubic-caja { position: relative; }
.ubic-lista { list-style: none; margin: 6px 0 0; padding: 4px; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--sup); box-shadow: var(--sombra); max-height: 360px; overflow-y: auto; }
.ubic-lista[hidden], #ubic-ninguna[hidden] { display: none; }
.ubic-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.ubic-lista li:hover { background: var(--pista); }
.ubic-lista li[aria-selected="true"] { background: var(--pista); box-shadow: inset 3px 0 0 var(--naranja-txt); }
.ubic-n { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ubic-r { flex: none; max-width: 55%; font-size: 12px; color: var(--suave); text-align: right; overflow-wrap: anywhere; }
.ubic-desde { margin: 0 0 8px; font-weight: 700; color: var(--tinta); }
.acceso { display: grid; gap: 10px; margin-top: 10px; }
.acceso button { min-height: 50px; border-radius: 25px; border: 1.5px solid var(--linea); background: var(--sup); font-weight: 700; }
.acceso button.prim { background: var(--boton); color: var(--boton-txt); border-color: var(--boton); }
/* Menu y boton Publicar de la cabecera: solo en PC */
.menu-pc, .publicar-pc { display: none; }

/* TABLET (720 px o mas): contenido centrado y mas ancho, barra de abajo igual */
@media (min-width: 720px) {
  .app { max-width: none; box-shadow: none; }
  .cab { padding-inline: max(14px, calc((100% - 900px) / 2)); }
  .pantalla { padding-inline: max(0px, calc((100% - 900px) / 2)); }
  .barra-inf { padding-inline: max(0px, calc((100% - 900px) / 2)); }
  /* En tableta y PC la foto es una tarjeta redondeada dentro de la columna, debajo de la cabecera */
  .hero { margin: 66px 14px 0; min-height: 330px; padding: 46px 40px 0; border-radius: 28px; }
  .hero-foto { right: 0; top: 0; width: auto; height: 100%; }
  .hero-texto { max-width: 48%; }
  .hero h1 { font-size: 36px; }
  .hero-sub { font-size: 18px; }
  .texto { margin-top: -55px; }
  /* La ilustracion de cada bloque es mas estrecha que la fila: se funde por la izquierda para que no se vea su borde */
  .bloque::before { height: 124px; background-size: auto 190px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent calc(100% - 540px), #000 calc(100% - 260px)), linear-gradient(to bottom, transparent 0, #000 38%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, transparent calc(100% - 540px), #000 calc(100% - 260px)), linear-gradient(to bottom, transparent 0, #000 38%, #000 70%, transparent 100%);
    mask-composite: intersect; }
  .bloque { padding-top: 78px; }
  .instalar:not([hidden]) + .hero { margin-top: 16px; padding-top: 30px; }
  .pestanas { margin-inline: 0; padding-inline: 0; }
  /* En tableta y PC las tarjetas son mas anchas y el precio y el titulo pesan menos */
  .precio-foto { font-size: 21px; font-weight: 700; }
  .titulo { font-size: 16px; font-weight: 700; }
  .pestana { flex: 1 1 0; min-width: 84px; position: relative; background: transparent; border: 0; border-radius: 0; }
  .pestana[aria-selected="true"]::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--naranja-txt); }
  .campos { grid-template-columns: repeat(3, 1fr); }
  .campo.ancho { grid-column: auto; }
  .carrusel { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; padding: 2px 14px 8px; }
  .tarjeta { flex: initial; min-width: 0; }
  .puntos { display: none; }
  .pie nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
  #c-dest .tarjeta:nth-child(n+4), #c-urge .tarjeta:nth-child(n+4) { display: none; }
  #c-ult .tarjeta:nth-child(n+7) { display: none; }
  .seguridad { max-width: 640px; margin-inline: auto; }
  .velo { align-items: center; justify-content: center; }
  .hoja { width: min(520px, 92%); border-radius: 24px; max-height: 80%; }
  .hoja, .hoja-fija { --clipart: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 45%) top / 100% 190px no-repeat,
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 30%, #fff 100%) top / 100% 190px no-repeat,
    url("/hero/v1/montanas-800.webp") right top / auto 190px no-repeat, var(--sup); }
  .toast { left: 50%; right: auto; width: min(520px, calc(100% - 28px)); transform: translateX(-50%); bottom: 84px; }
}

/* PC (1100 px o mas): menu arriba, filtros en una fila, 4 anuncios por fila */
@media (min-width: 1100px) {
  .cab { padding-inline: max(20px, calc((100% - 1200px) / 2)); min-height: 66px; gap: 6px; }
  .menu-pc { display: flex; gap: 4px; margin-left: 24px; }
  .menu-pc button { position: relative; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; font-size: 15px; font-weight: 600; color: var(--suave); display: inline-flex; align-items: center; gap: 6px; }
  .menu-pc button:hover { background: var(--pista); }
  .menu-pc button[aria-current="page"] { color: var(--marca); font-weight: 800; }
  .menu-pc .num { position: static; border: 0; }
  .publicar-pc { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 8px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--naranja-txt); color: #fff; font-size: 15px; font-weight: 800; }
  .publicar-pc svg { width: 18px; height: 18px; }
  .barra-inf { display: none; }
  .pantalla { padding-inline: max(20px, calc((100% - 1200px) / 2)); }
  .hero { margin: 78px 0 0; min-height: 380px; padding: 60px 56px 0; }
  .filtros-cab { grid-column: 1 / -1; }
  .hero h1 { font-size: 46px; }
  .hero-sub { font-size: 20px; }
  .texto input { height: 58px; font-size: 16px; }
  .tarjeta-filtros { display: grid; grid-template-columns: 1fr 240px; gap: 0 18px; align-items: end; padding: 18px; }
  .campos { grid-template-columns: repeat(6, 1fr); gap: 12px; grid-column: 1; }
  .boton { grid-column: 2; margin-top: 0; min-height: 46px; height: 46px; font-size: 16px; }
  .aviso-vacio, .sec { grid-column: 1 / -1; }
  .carrusel { grid-template-columns: repeat(4, 1fr); padding-inline: 0; }
  /* Cada bloque tiene hasta 10 anuncios (el carrusel de movil los recorre todos); en PC solo se ven filas completas de 4: 4, 4 y 8 */
  #c-dest .tarjeta:nth-child(n+4) { display: flex; }
  #c-dest .tarjeta:nth-child(n+5) { display: none; }
  #c-urge .tarjeta:nth-child(n+4) { display: flex; }
  #c-urge .tarjeta:nth-child(n+5) { display: none; }
  #c-ult .tarjeta:nth-child(n+7) { display: flex; }
  #c-ult .tarjeta:nth-child(n+9) { display: none; }
  .buscador, .bloque-cab, .bloque-sub { padding-inline: 0; }
  .instalar { margin-inline: 0; }
  .pie { --sangria: 0px; padding-bottom: 24px; }
  .instalar { max-width: 640px; }
  .fallo { margin-inline: 0; }
}
/* En tableta y PC la tipografia del sistema es Segoe UI, cuya negrita pesa mucho mas que la de los moviles: los textos de los filtros bajan un peso. */
@media (min-width: 720px) {
  .campo label, .campo .selector.elegido span, .grupo legend, .rango-txt { font-weight: 600; }
  .chip { font-weight: 500; }
  .chip[aria-pressed="true"], .limpiar, .ubic-boton, .boton, .lista li > button[aria-pressed="true"] { font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Movil estrecho: las 8 pestanas van en UNA fila dentro de un ovalo cerrado (esquinas redondeadas en los dos extremos), en «modo acordeon»: la
   elegida lleva icono y rotulo, en naranja con letra blanca (--naranja-txt: 4,7:1 con blanco), y las demas solo el icono, algo mas
   pequeno, en una zona de 44 px como minimo. El ancho de las no elegidas (--pw y flex-basis) lo calcula inicio.js para que la ultima
   visible quede cortada a la mitad. El rotulo de las no elegidas se oculta a la vista, no a los lectores de pantalla. */
@media (max-width: 719px) {
  .pestanas { position: relative; display: flex; align-items: stretch; gap: 0; overflow-x: auto; overflow-y: hidden; margin: 0 0 14px; padding: 6px; scroll-padding-left: 6px;
    scroll-snap-type: x proximity; background: var(--sup); border: 1px solid var(--linea); border-radius: 999px; }
  .pestana { position: relative; flex: 0 0 var(--pw, 44px); min-width: 0; flex-direction: row; justify-content: center; gap: 5px; min-height: 48px; margin: 0; padding: 4px 0; border: 0; border-radius: 999px; background: transparent;
    font-size: 13px; line-height: 1.15; white-space: nowrap; scroll-snap-align: start; }
  .pestana svg { width: 24px; height: 15px; flex: none; }
  .pestana span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pestana[aria-selected="true"] { padding: 4px 9px; background: var(--naranja-txt); color: #fff; border: 0; }
  .pestana[aria-selected="true"] svg { width: 32px; height: 20px; }
  .pestana[aria-selected="true"] span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .pestana + .pestana::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--linea); }
  .pestana[aria-selected="true"]::before, .pestana[aria-selected="true"] + .pestana::before { display: none; }
  .pestana[aria-selected="true"]::after { display: none; }
  /* La foto de portada, recortada hacia la pareja para que se vea con claridad en una pantalla estrecha */
  .hero-foto { right: 0; width: 62%; height: 205px; object-fit: cover; object-position: 78% 60%; }
  .hero-texto { max-width: 58%; }
}
@media (max-width: 399px) { .pestana[aria-selected="true"] { font-size: 12.5px; padding-inline: 8px; } }

/* Textos mas largos en otros idiomas: el motivo de un campo desactivado puede ocupar 2 lineas, y en moviles muy estrechos se estrechan "Entrar" y el rotulo. */
.campo .selector:disabled span { white-space: normal; font-size: 13px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 379px) {
  .entrar { padding: 0 11px; font-size: 13px; }
  .logo { gap: 5px; font-size: 17px; }
}

/* Boton de idioma: el globo arriba y el codigo del idioma debajo (ocupa menos ancho que ponerlos en fila y se ve igual en todos los anchos). */
.ibtn[data-hoja="idioma"] { flex-direction: column; gap: 1px; font-size: 11px; line-height: 1; letter-spacing: .02em; }
.ibtn[data-hoja="idioma"] svg { width: 22px; height: 22px; }

/* ===== Pantalla de resultados («Ver N resultados»). Diseno: docs/diseno-app/resultados.md (2026-11-09) ===== */
.res { flex: 1; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; position: relative; }
.res[hidden] { display: none; }
.app.en-res .cab { display: none; }
.res-cont { padding-inline: 14px; }
/* Barra fija: volver + titulo (movil); migas (tableta y PC); al bajar, en PC, la cifra y los botones */
.res-barra { position: sticky; top: 0; z-index: 3; background: var(--sup); border-bottom: 1px solid var(--linea); padding-top: env(safe-area-inset-top, 0px); }
.res-barra-i { display: flex; align-items: center; gap: 4px; min-height: 56px; }
.res-atras { width: 44px; height: 44px; margin-left: -10px; border: 0; background: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--tinta); }
.res-atras svg { width: 24px; height: 24px; }
.res-t { margin: 0; flex: 1; min-width: 0; font-size: 19px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-migas, .res-compacta { display: none; }
.res-migas { align-items: center; gap: 2px; font-size: 14px; color: var(--suave); }
.res-migas button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--suave); }
.res-migas b { color: var(--tinta); }
/* Fichas de filtros con ✕ (cada una quita UN filtro) */
.res-fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-bottom: 8px; }   /* el relleno de abajo: el area pulsable del ✕ (44 px) no queda tapada por el primer bloque */
.res-ficha { display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; min-height: 32px; padding: 0 3px 0 12px; border-radius: 16px; background: var(--sup); border: 1px solid var(--linea); font-size: 13px; font-weight: 700; }
.res-ficha button { position: relative; width: 30px; height: 30px; margin: -1px -2px -1px 0; border: 0; background: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--suave); }
.res-ficha button::after { content: ""; position: absolute; inset: -7px; }
.res-ficha button svg { width: 14px; height: 14px; }
.res-ficha button:hover { color: var(--mal); }
/* Cifra y «Ordenar» */
.res-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.res-cifra { margin: 0; font-size: 16px; font-weight: 700; color: var(--suave); font-variant-numeric: tabular-nums; }
.res-cifra strong { font-size: 28px; line-height: 1.1; letter-spacing: -.03em; color: var(--tinta); }
.res-orden { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--sup); border: 1px solid var(--linea); font-size: 14px; font-weight: 700; }
.res-orden svg { width: 20px; height: 20px; }
.res-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); flex: none; }
.res-orden small { font-size: 12px; font-weight: 600; color: var(--suave); white-space: nowrap; }
.res-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.res-btn { min-height: 46px; padding: 0 16px; border-radius: 23px; border: 0; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.res-btn svg { width: 20px; height: 20px; flex: none; }
.res-btn.prim { background: var(--boton); color: var(--boton-txt); }
.res-btn.sec { background: var(--sup); color: var(--marca); border: 2px solid var(--marca); }
.res-btn.nar { background: var(--naranja-txt); color: #fff; }
.res-btn.peq { min-height: 38px; padding: 0 14px; }
.res-acciones .res-btn { height: 46px; }
.res-btn:disabled { background: var(--pista); color: var(--suave); cursor: not-allowed; }
/* Titulos de bloque, franja de destacados y cuadricula */
.res-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px; font-size: 22px; letter-spacing: -.02em; }
.res-h svg { width: 22px; height: 22px; color: var(--naranja); }
.res-sub { margin: -2px 0 10px; font-size: 13px; color: var(--suave); }
.res-franja-w { position: relative; }
/* position: relative: los textos «solo lector de pantalla» de cada tarjeta son absolutos; sin esto escapan del recorte de la franja y ensanchan toda la pantalla */
.res-franja { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 14px 8px; margin-inline: -14px; scrollbar-width: none; }
.res-franja::-webkit-scrollbar { display: none; }
.res-franja .res-celda { flex: 0 0 256px; scroll-snap-align: start; }
.res-flecha { display: none; position: absolute; top: 38%; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--boton); color: var(--boton-txt); box-shadow: var(--sombra); align-items: center; justify-content: center; }
.res-flecha svg { width: 22px; height: 22px; }
.res-flecha.izq { left: -14px; } .res-flecha.der { right: -14px; } .res-flecha.der svg { transform: rotate(180deg); }
.res-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.res-celda { container-type: inline-size; min-width: 0; display: flex; }
.res-celda .tarjeta { flex: 1 1 auto; width: 100%; min-width: 0; }
/* Tarjeta estrecha (2 columnas en movil, ~175 px): la misma tarjeta, mas compacta; compartir va en la pantalla del anuncio (decision del titular, 2026-11-09) */
@container (max-width: 230px) {
  .precio-foto { font-size: 19px; left: 8px; padding: 2px 9px 3px; }
  .cuerpo { padding: 2px 11px 8px; gap: 6px; }
  .titulo { font-size: 15px; }
  .datos { display: flex; flex-wrap: wrap; column-gap: 12px; font-size: 13px; }
  .datos > .dato, .datos > .plazas { padding: 4px 0 !important; border: 0 !important; gap: 5px; }
  .datos > .lugar { flex-basis: 100%; }
  .dato svg { width: 16px; height: 16px; }
  .pie-tarjeta { padding: 2px 10px 10px; } .compartir { display: none; }
}
/* Estados y pie de la lista */
.res-estado { margin: 22px auto 0; max-width: 520px; padding: 22px 18px; background: var(--sup); border: 1px solid var(--linea); border-radius: 22px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.res-estado h2 { margin: 0; font-size: 19px; } .res-estado p { margin: 0; color: var(--suave); }
.res-estado hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--linea); }
.res-quitar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.res-quitar .res-btn { min-height: 44px; height: auto; padding: 8px 14px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; }   /* el nombre del filtro puede ser largo: se parte en lineas */
.res-quitar .res-btn svg { width: 16px; height: 16px; }
.res-pocos { margin-top: 18px; padding: 14px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.res-pocos p { margin: 0; font-weight: 700; flex: 1 1 200px; }
.res-mas { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 22px 0 6px; text-align: center; }
.res-viendo { font-size: 14px; color: var(--suave); font-variant-numeric: tabular-nums; }
.res-vermas { min-width: 220px; }
.res-muchos { max-width: 460px; padding: 10px 14px; border-radius: 14px; background: var(--aviso-fondo); color: var(--aviso-txt); font-size: 14px; font-weight: 600; }
.res-muchos.mal { border: 1px solid var(--mal); }
.res-subir { position: sticky; bottom: 14px; margin: -62px 14px 14px auto; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--boton); color: var(--boton-txt); box-shadow: var(--sombra); display: flex; align-items: center; justify-content: center; z-index: 2; }
.res-subir svg { width: 22px; height: 22px; }
.res-subir[hidden] { display: none; }
@media (min-width: 720px) {
  .app.en-res .cab { display: flex; position: static; background: var(--sup); border-bottom-color: var(--linea); }
  .res-cont { padding-inline: max(14px, calc((100% - 900px) / 2)); }
  #res-pie { padding-inline: max(0px, calc((100% - 900px) / 2)); }
  .res-atras, .res-t { display: none; }
  .res-migas { display: flex; }
  .res-barra-i { min-height: 52px; }
  .res.fija .res-migas { display: none; }
  .res.fija .res-compacta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .res-compacta strong { font-size: 15px; }
  #res-cab .res-cont { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
  .res-fichas { grid-column: 1 / -1; }
  .res-acciones { display: flex; gap: 10px; margin-top: 14px; }   /* (en fila y sin repartir el ancho: dentro de una rejilla «auto», el grid de dos columnas se quedaba en una) */
  .res-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .res-franja { margin-inline: 0; padding-inline: 2px; gap: 16px; }
  .res-franja .res-celda { flex: 0 0 calc((100% - 36px) / 3); }
  .res-flecha { display: inline-flex; }
  .res-subir { margin-right: max(14px, calc((100% - 900px) / 2)); }
}
@media (min-width: 1100px) {
  .res-cont { padding-inline: max(20px, calc((100% - 1200px) / 2)); }
  #res-pie { padding-inline: max(20px, calc((100% - 1200px) / 2)); }
  .res-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .res-franja { gap: 18px; }
  .res-franja .res-celda { flex: 0 0 calc((100% - 54px) / 4); }
  .res-subir { margin-right: max(20px, calc((100% - 1200px) / 2)); }
}
/* Clipart de montanas y pinos (el mismo de la portada y de las hojas): detras de lo primero que se ve bajo la barra de arriba (#res-cab: fichas,
   cifra y botones) y al empezar cada bloque (Destacados, Resultados, Te puede interesar), como `.bloque::before` de la portada. La barra de arriba
   (volver + categoria) se queda SOLIDA para tener siempre a mano ir hacia atras (decision del titular, 2026-11-09). */
#res-cab { position: relative; }
#res-cab > *, .res-bloque > * { position: relative; }
.res-bloque { position: relative; padding-top: 62px; }
.res-bloque .res-h { margin-top: 0; }
#res-cab::before, .res-bloque::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 104px; pointer-events: none; mix-blend-mode: multiply;
  background: url("/hero/v1/montanas-800.webp") right bottom / auto 150px no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 38%, #000 70%, transparent 100%); }
/* El primer bloque va justo debajo del dibujo de #res-cab: no lleva el suyo (se veian dos seguidos; el titular lo pidio, 2026-11-10). */
#res-lista > .res-bloque:first-child::before, .res-recargando > .res-bloque:first-child::before { content: none; }
#res-lista > .res-bloque:first-child, .res-recargando > .res-bloque:first-child { padding-top: 24px; }
/* El dibujo de la cabecera es un 25 % mas alto (ahora tapa tambien las fichas, que van bajo los botones): 104 -> 130 px, 124 -> 155 px (titular, 2026-11-10) */
#res-cab::before { height: 130px; background-size: auto 188px; }
@media (min-width: 720px) {
  #res-cab { min-height: 155px; }   /* tanto como el dibujo de arriba */
  .res-bloque { padding-top: 78px; }
  #res-lista > .res-bloque:first-child, .res-recargando > .res-bloque:first-child { padding-top: 24px; }
  #res-cab::before, .res-bloque::before { right: max(0px, calc((100% - 900px) / 2)); height: 124px; background-size: auto 190px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent calc(100% - 540px), #000 calc(100% - 260px)), linear-gradient(to bottom, transparent 0, #000 38%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, transparent calc(100% - 540px), #000 calc(100% - 260px)), linear-gradient(to bottom, transparent 0, #000 38%, #000 70%, transparent 100%);
    mask-composite: intersect; }
  #res-cab::before { height: 155px; background-size: auto 238px; }   /* despues de la regla de arriba, que si no la pisa */
}
@media (min-width: 1100px) {
  #res-cab::before, .res-bloque::before { right: max(20px, calc((100% - 1200px) / 2)); }
}

/* Al cambiar filtros, orden o idioma con la lista ya a la vista: la lista anterior se queda atenuada y sin poder tocarse, con la rueda naranja encima
   (la misma del mapa, animacion mapa-gira) hasta que llega la nueva. Evita el parpadeo y el salto de altura de sustituirla por huecos grises. */
.res-recargando { opacity: .45; pointer-events: none; transition: opacity .15s; }
.res-rueda-caja { position: sticky; top: 50%; height: 0; z-index: 4; }   /* en el centro de la pantalla: ahi caen las fotos, sin botones debajo */
.res-rueda { position: absolute; left: 50%; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; box-sizing: border-box; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); border-top-color: var(--naranja-txt); background: rgba(255, 255, 255, .55); box-shadow: 0 1px 6px rgba(0, 0, 0, .25); animation: mapa-gira .8s linear infinite; }