/* =====================================================================
   Sabugo – estilos base comunes a los temas.
   Cada tema (css/temas/*.css) define las variables y algunos ajustes.
   ===================================================================== */
:root {
  --c-navy: #012152; --c-navy-2: #0A1B45; --c-azul: #1563BC; --c-naranja: #F97C11;
  --c-fondo: #fff; --c-superficie: #fff; --c-texto: #1d2433; --c-suave: #5f6878;
  --c-primario: var(--c-navy); --c-titulos: var(--c-navy); --c-acento: var(--c-naranja); --c-acento-texto: #fff;
  --c-tinte: #f4f6fa; --c-borde: #e6e2da; --c-enlace: var(--c-azul);
  --c-pie: var(--c-navy-2); --c-pie-texto: #b9c4d8;
  --f-titulos: Georgia, serif; --f-texto: system-ui, sans-serif; --peso-titulos: 600; --espaciado-titulos: -0.01em;
  --radio: 18px; --radio-grande: 28px; --radio-boton: 999px;
  --sombra: 0 1px 2px rgba(1,33,82,.05), 0 18px 40px -24px rgba(1,33,82,.35);
  --sombra-fuerte: 0 24px 60px -20px rgba(1,33,82,.35);
  --ancho: 1280px;
  --hero-img: none; --hero-pos: center;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f-texto); background: var(--c-fondo); color: var(--c-texto); font-size: 16px; line-height: 1.55; font-synthesis: none; }
img { max-width: 100%; display: block; }
a { color: var(--c-enlace); }
h1, h2, h3, h4 { font-family: var(--f-titulos); font-weight: var(--peso-titulos); color: var(--c-titulos); letter-spacing: var(--espaciado-titulos); line-height: 1.1; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 2px; border-radius: 6px; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--c-primario); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.saltar:focus { top: 12px; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
@media (min-width: 900px) { .contenedor { padding: 0 40px; } }
[hidden] { display: none !important; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--c-acento); color: var(--c-acento-texto); border-radius: var(--radio-boton); padding: 13px 24px; font-weight: 600; font-size: 15px;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--c-acento) 80%, transparent); transition: transform .15s, filter .15s; }
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-sec { background: var(--c-primario); color: #fff; box-shadow: none; }
.btn-borde { background: transparent; color: var(--c-primario); border: 1.5px solid color-mix(in srgb, var(--c-primario) 25%, transparent); box-shadow: none; }
.btn-wa { background: #25D366; color: #fff; box-shadow: none; }
.btn-peq { padding: 9px 16px; font-size: 14px; }

/* ---------- cabecera ---------- */
.cabecera { background: var(--header-bg, #fff); position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 color-mix(in srgb, var(--c-primario) 8%, transparent); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 84px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-titulos); flex-shrink: 0; }
.marca img { width: 64px; height: 64px; }
.marca span { font-family: var(--f-titulos); font-size: 13px; line-height: 1.2; color: var(--c-suave); display: none; }
.marca span b { display: block; font-size: 19px; color: var(--c-titulos); letter-spacing: .02em; }
@media (min-width: 1400px) { .marca span { display: block; } }
.menu { display: none; }
.menu a { color: var(--c-titulos); text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 2px; }
.menu a[aria-current="page"] { color: var(--c-acento); box-shadow: inset 0 -2px 0 var(--c-acento); }
.cab-cta { display: none; }
.btn-menu { background: none; border: 1.5px solid var(--c-borde); border-radius: 12px; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer; }
@media (min-width: 1100px) {
  .menu { display: flex; gap: 22px; align-items: center; }
  .btn-menu { display: none; }
  .cab-cta { display: inline-flex; }
}
.menu.abierto { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 84px; background: var(--header-bg, #fff); padding: 12px 20px 24px; box-shadow: var(--sombra); gap: 4px; }
.menu.abierto a { padding: 12px 4px; border-bottom: 1px solid var(--c-borde); }

/* ---------- hero ---------- */
.hero { position: relative; margin-top: 20px; }
.hero-foto { border-radius: var(--radio-grande); background: #445 var(--hero-img) var(--hero-pos) / cover no-repeat; min-height: 420px; position: relative; overflow: hidden; }
.hero-texto .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-acento); margin-bottom: 16px; }
.hero-texto h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.02; }
.hero-texto h1 em { font-style: italic; color: var(--c-acento); font-weight: 400; }
.hero-texto p { font-size: 18px; max-width: 520px; color: var(--c-suave); }
.buscador { position: relative; z-index: 2; background: var(--c-superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra-fuerte); padding: 14px; display: grid; gap: 10px; margin: -40px 12px 0; }
.buscador-barra { display: contents; }
.buscador .campo { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; }
.buscador label, .buscador .etq { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-suave); }
.buscador select { border: 0; background: transparent; font-weight: 600; font-size: 17px; color: var(--c-titulos); padding: 4px 0; cursor: pointer; }
.segmentado { display: inline-flex; background: var(--c-tinte); border-radius: 999px; padding: 4px; width: max-content; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado label { padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--c-suave); cursor: pointer; text-transform: none; letter-spacing: 0; }
.segmentado input:checked + label { background: var(--c-primario); color: #fff; }
.segmentado input:focus-visible + label { outline: 3px solid var(--c-azul); }
.buscador .btn { padding: 16px 30px; font-size: 16px; border-radius: calc(var(--radio) - 2px); }
@media (min-width: 900px) {
  .buscador { grid-template-columns: 1.1fr 1.3fr 1.1fr auto; align-items: center; margin: -60px 56px 0; gap: 0; }
  .buscador .campo { padding: 10px 22px; border-right: 1px solid var(--c-borde); }
  .buscador .campo:nth-child(3) { border-right: 0; }
}
.credito-foto { position: absolute; right: 16px; top: 14px; font-size: 11px; color: rgba(255,255,255,.8); background: rgba(0,0,0,.25); padding: 3px 10px; border-radius: 999px; z-index: 2; }
.credito-foto a { color: inherit; }
.datos-rapidos { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: center; margin: 36px 0 0; color: var(--c-suave); font-size: 15px; }
.datos-rapidos b { font-family: var(--f-titulos); font-size: 24px; color: var(--c-titulos); margin-right: 6px; }
.datos-rapidos #dato-visitas-semana { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* ---------- secciones ---------- */
.seccion { padding: 72px 0 0; }
.seccion-tinte { background: var(--c-tinte); padding: 64px 0; margin-top: 72px; }
.cab-seccion { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: end; margin-bottom: 30px; }
.cab-seccion h2 { font-size: clamp(32px, 4vw, 48px); margin: 0; }
.cab-seccion p { color: var(--c-suave); margin: 8px 0 0; font-size: 17px; }
.titulo-pagina { padding: 48px 0 8px; }
.titulo-pagina h1 { font-size: clamp(36px, 5vw, 56px); }
.titulo-pagina p { color: var(--c-suave); font-size: 18px; max-width: 700px; }

/* ---------- tarjetas de inmueble ---------- */
.rejilla { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.tarjeta { color: inherit; text-decoration: none; background: var(--c-superficie); border-radius: var(--radio-grande); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; cursor: pointer; transition: transform .2s, box-shadow .2s; text-align: left; border: 0; padding: 0; width: 100%; }
.tarjeta:hover { transform: translateY(-3px); }
.tarjeta-foto { aspect-ratio: 4 / 3; background: var(--c-tinte); position: relative; overflow: hidden; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.04); }
.sin-foto { width: 100%; height: 100%; display: grid; place-items: center; color: var(--c-suave); font-size: 14px; }
.etiquetas { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta { background: rgba(255,255,255,.95); color: var(--c-titulos); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; letter-spacing: .02em; }
.etiqueta.acento { background: var(--c-acento); color: var(--c-acento-texto); }
.etiqueta.reservado { background: #7a1f2b; color: #fff; }
.num-fotos { position: absolute; right: 14px; bottom: 14px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.tarjeta-cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.zona { font-size: 13px; font-weight: 600; color: var(--c-enlace); letter-spacing: .02em; }
.tarjeta h3 { font-size: 21px; margin: 6px 0 12px; line-height: 1.25; }
.carac { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--c-suave); font-size: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--c-borde); margin: 0; list-style: none; padding-left: 0; }
.carac li { display: flex; align-items: center; gap: 6px; }
.carac svg { width: 17px; height: 17px; stroke: var(--c-primario); opacity: .75; fill: none; stroke-width: 2; }
.precio-fila { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; margin-top: auto; }
.precio { font-family: var(--f-titulos); font-size: 26px; font-weight: var(--peso-titulos); color: var(--c-titulos); }
.precio small { font-family: var(--f-texto); font-size: 14px; color: var(--c-suave); font-weight: 500; }
.ver-ficha { color: var(--c-acento); font-weight: 600; font-size: 14px; }
.vacio { text-align: center; padding: 60px 20px; background: var(--c-superficie); border-radius: var(--radio-grande); color: var(--c-suave); }
.cargando { opacity: .55; }
.esqueleto { background: linear-gradient(90deg, var(--c-tinte), color-mix(in srgb, var(--c-tinte) 60%, #fff), var(--c-tinte)); background-size: 200% 100%; animation: brillo 1.2s infinite; border-radius: var(--radio-grande); min-height: 380px; }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- filtros de listado ---------- */
.filtros { background: var(--c-superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 18px; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin: 20px 0 28px; }
.filtros label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-suave); }
.filtros select, .filtros input { border: 1.5px solid var(--c-borde); background: var(--c-fondo); border-radius: 12px; padding: 11px 12px; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--c-texto); font-weight: 500; }
.filtros .acciones { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; align-items: end; }
@media (min-width: 900px) { .filtros { grid-template-columns: repeat(5, 1fr) auto; align-items: end; } .filtros .acciones { grid-column: auto; } }
/* Con el filtro «Municipio» (inmuebles del CRM en varios municipios) hay 6 desplegables */
@media (min-width: 900px) and (max-width: 1199px) { .filtros.con-municipio { grid-template-columns: repeat(3, 1fr); } .filtros.con-municipio .acciones { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .filtros.con-municipio { grid-template-columns: repeat(6, 1fr) auto; } }
.resultado-info { color: var(--c-suave); margin-bottom: 16px; font-size: 15px; }

/* ---------- bloques informativos ---------- */
.dos-col { display: grid; gap: 28px; }
@media (min-width: 900px) { .dos-col { grid-template-columns: 1fr 1fr; } }
.bloque { background: var(--c-superficie); border-radius: var(--radio-grande); padding: 36px; box-shadow: var(--sombra); }
.bloque h3 { font-size: 28px; }
.bloque p { color: var(--c-suave); }
.bloque.alt { background: var(--c-tinte); box-shadow: none; }
.valores { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 24px; }
.valor { background: var(--c-superficie); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); }
.valor b { display: block; font-family: var(--f-titulos); font-size: 20px; color: var(--c-titulos); margin-bottom: 6px; }
.valor span { color: var(--c-suave); font-size: 15px; }
.agencia-foto { position: relative; overflow: hidden; border-radius: var(--radio-grande); min-height: 340px; background: center / cover no-repeat; }
.agencia-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.agencia-foto .hero-carrusel { border-radius: inherit; }
.agencia-foto .hc-slide { transition: opacity 1.6s ease-in-out; }
html[data-tema] .agencia-foto .hc-slide { transition: opacity 2.6s ease-in-out; }
.agencia-foto .hero-carrusel.animado .hc-slide.activa img,
.agencia-foto .hero-carrusel.animado .hc-slide.saliente img { animation: hc-zoom 9s ease-out forwards; }
.agencia-foto .hc-puntos { top: auto; bottom: 10px; left: 0; right: 0; justify-content: center; }
.datos-rapidos > [hidden] { display: none; }

/* ---------- formularios ---------- */
.formulario { display: grid; gap: 14px; }
.formulario .fila { display: grid; gap: 14px; }
@media (min-width: 700px) { .formulario .fila { grid-template-columns: 1fr 1fr; } }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--c-titulos); }
.formulario input, .formulario select, .formulario textarea { border: 1.5px solid var(--c-borde); background: var(--c-fondo); border-radius: 12px; padding: 12px 14px; font-size: 16px; font-weight: 400; color: var(--c-texto); }
.formulario textarea { min-height: 120px; resize: vertical; }
.formulario .check { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--c-suave); }
.formulario .check input { margin-top: 3px; width: 18px; height: 18px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { padding: 12px 16px; border-radius: 12px; font-size: 15px; }
.aviso.ok { background: #e7f6ec; color: #17603a; }
.aviso.error { background: #fdeaea; color: #8a1c1c; }

/* ---------- simulador ---------- */
.simulador { display: grid; gap: 28px; }
@media (min-width: 900px) { .simulador { grid-template-columns: 1.1fr 1fr; } }
.rango { display: grid; gap: 8px; }
.rango .cab { display: flex; justify-content: space-between; font-weight: 600; color: var(--c-titulos); }
.rango output, .rango .val { font-family: var(--f-titulos); font-size: 20px; }
.rango input[type=range] { width: 100%; accent-color: var(--c-acento); }
.resultado-sim { background: var(--c-primario); color: #fff; border-radius: var(--radio-grande); padding: 36px; }
.resultado-sim h2, .resultado-sim h3 { color: #fff; }
.cuota { font-family: var(--f-titulos); font-size: clamp(44px, 6vw, 64px); line-height: 1; margin: 8px 0 20px; }
.resultado-sim dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; margin: 0; border-top: 1px solid rgba(255,255,255,.2); padding-top: 18px; }
.resultado-sim dt { opacity: .8; } .resultado-sim dd { margin: 0; font-weight: 700; text-align: right; }
.nota { font-size: 13px; opacity: .8; margin-top: 16px; }

/* ---------- modal de inmueble ---------- */
dialog.modal { border: 0; padding: 0; width: min(1180px, 100vw); max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; background: var(--c-superficie); color: var(--c-texto); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
@media (min-width: 900px) { dialog.modal { margin: auto; height: auto; max-height: 92vh; border-radius: var(--radio-grande); } }
dialog.modal::backdrop { background: rgba(1, 20, 45, .65); backdrop-filter: blur(3px); }
.modal-inner { display: grid; overflow: auto; max-height: inherit; height: 100%; }
@media (min-width: 900px) { .modal-inner { grid-template-columns: 1.35fr 1fr; max-height: 92vh; } }
.modal-cerrar { position: absolute; right: 14px; top: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); font-size: 24px; cursor: pointer; color: var(--c-navy); }
.galeria { background: #0d1320; position: relative; display: flex; flex-direction: column; min-height: 300px; }
.galeria-principal { position: relative; flex: 1; min-height: 300px; display: grid; place-items: center; }
.galeria-principal img { width: 100%; height: 100%; max-height: 70vh; object-fit: contain; }
@media (min-width: 900px) { .galeria-principal img { max-height: calc(92vh - 110px); height: calc(92vh - 110px); } }
.galeria-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); cursor: pointer; font-size: 22px; color: var(--c-navy); }
.galeria-nav.prev { left: 14px; } .galeria-nav.next { right: 14px; }
.galeria-contador { position: absolute; left: 14px; bottom: 14px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.miniaturas { display: flex; gap: 8px; padding: 10px; overflow-x: auto; background: #0d1320; }
.miniaturas button { flex: 0 0 auto; width: 84px; height: 62px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; opacity: .6; background: #222; }
.miniaturas button[aria-current="true"] { border-color: var(--c-acento); opacity: 1; }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.ficha { padding: 28px 26px 110px; overflow: auto; }
@media (min-width: 900px) { .ficha { max-height: 92vh; } }
.ficha h2 { font-size: 28px; margin: 6px 0 8px; padding-right: 40px; }
.ficha .precio { font-size: 32px; color: var(--c-acento); }
.ficha .ref { color: var(--c-suave); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.chips li { background: var(--c-tinte); padding: 7px 12px; border-radius: 10px; font-size: 14px; }
.ficha .descripcion { white-space: pre-line; color: var(--c-texto); }
.tabla-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 14px 0 20px; font-size: 14px; }
.tabla-datos div { display: flex; flex-direction: column; border-bottom: 1px solid var(--c-borde); padding-bottom: 8px; }
.tabla-datos span { color: var(--c-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.mapa-inmueble { isolation: isolate; position: relative; height: 240px; border-radius: var(--radio); overflow: hidden; background: var(--c-tinte); margin: 10px 0 6px; }
.mapa-inmueble iframe { width: 100%; height: 100%; border: 0; }
.nota-mapa { font-size: 13px; color: var(--c-suave); }
.enlace-gmaps { color: var(--c-enlace); font-weight: 600; text-decoration: none; }
.enlace-gmaps:hover { text-decoration: underline; }
.acciones-ficha { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.form-visita { background: var(--c-tinte); border-radius: var(--radio); padding: 18px; margin-top: 10px; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante { position: fixed; right: 22px; bottom: 22px; width: 62px; height: 62px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 12px 30px -6px rgba(37,211,102,.6), 0 4px 10px rgba(0,0,0,.15); z-index: 60; text-decoration: none; }
.wa-flotante svg { width: 32px; height: 32px; fill: #fff; }
.wa-flotante .burbuja { position: absolute; right: 74px; background: #fff; color: var(--c-navy); font-weight: 600; font-size: 14px; padding: 9px 13px; border-radius: 14px; white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(0,0,0,.3); display: none; }
@media (min-width: 700px) { .wa-flotante .burbuja { display: block; } }
dialog .wa-flotante { position: fixed; }

/* ---------- pie ---------- */
.pie { margin-top: 84px; background: var(--c-pie); color: var(--c-pie-texto); padding: 56px 0 26px; }
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-rejilla { display: grid; gap: 32px; }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.pie-marca { display: flex; gap: 16px; align-items: center; }
.pie-marca img { width: 100px; height: 100px; }
.pie-marca p { font-family: var(--f-titulos); font-size: 20px; color: #fff; line-height: 1.3; margin: 0; }
.pie h4 { color: #fff; font-family: var(--f-texto); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { padding: 4px 0; font-size: 15px; }
.pie-bajo { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; font-size: 13px; }
.creditos { font-size: 12px; opacity: .8; margin-top: 14px; }
/* Botón «Actividad de la web» del pie: aspecto de enlace discreto (subrayado punteado = abre un diálogo) */
.pie-actividad {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; line-height: inherit; cursor: pointer;
  text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.pie-actividad:hover { text-decoration-style: solid; }
.pie-actividad:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
[data-solo-tema] { display: none; }
html[data-tema="cantabrico"] [data-solo-tema="cantabrico"],
html[data-tema="minimal"] [data-solo-tema="minimal"],
html[data-tema="fresco"] [data-solo-tema="fresco"],
html[data-tema="caliza"] [data-solo-tema="caliza"],
html[data-tema="nocturno"] [data-solo-tema="nocturno"],
html[data-tema="cine"] [data-solo-tema="cine"] { display: inline; }
.texto-legal { max-width: 820px; }
.texto-legal h2 { font-size: 26px; margin-top: 32px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* =====================================================================
   Carrusel de portada (fotos emblemáticas de Gijón)
   Sustituye a la foto fija; se mantiene el degradado/superposición de cada tema.
   ===================================================================== */
.hero-foto.con-carrusel { background-image: none; background-color: #1c2638; }
.hero-foto::before { z-index: 1; }
.hero-texto, .hero-foto.con-carrusel { touch-action: pan-y pinch-zoom; }
.hero-carrusel { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.hc-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease-in-out; }
.hc-slide.activa { opacity: 1; z-index: 1; }
.hc-slide.saliente { z-index: 0; }
.hc-slide picture, .hc-slide img { display: block; width: 100%; height: 100%; }
.hc-slide img { object-fit: cover; object-position: var(--pos, center); transform-origin: 60% 50%; }
@media (max-width: 700px) { .hc-slide img { object-position: var(--pos-m, center); } }
/* Ken Burns muy suave (se desactiva con prefers-reduced-motion) */
.hero-carrusel.animado .hc-slide.activa img, .hero-carrusel.animado .hc-slide.saliente img { animation: hc-zoom 9s ease-out forwards; }
@keyframes hc-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.credito-foto { z-index: 3; text-decoration: none; max-width: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.credito-foto:hover { color: #fff; }
.hc-puntos { position: absolute; right: 8px; top: 36px; z-index: 4; display: flex; }
.hc-puntos button { width: 22px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
.hc-puntos button::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.35); transition: width .35s, background-color .35s; }
.hc-puntos button:hover::before { background: rgba(255,255,255,.85); }
.hc-puntos button[aria-current="true"]::before { width: 18px; background: #fff; }
@media (pointer: coarse) { .hc-puntos { top: 30px; right: 6px; } .hc-puntos button { width: 26px; height: 44px; } }

/* =====================================================================
   Ajustes para móvil y tableta (no afectan al escritorio ≥ 1100 px)
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
.contenedor { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (min-width: 900px) { .contenedor { padding-left: max(40px, env(safe-area-inset-left)); padding-right: max(40px, env(safe-area-inset-right)); } }

/* menú móvil */
.btn-menu { color: var(--c-titulos); flex-shrink: 0; }
.btn-menu .ico-cerrar { display: none; }
.btn-menu[aria-expanded="true"] .ico-abrir { display: none; }
.btn-menu[aria-expanded="true"] .ico-cerrar { display: block; }
.menu-cta { display: none; }
@media (max-width: 1099px) {
  .menu.abierto { top: 100%; max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; padding: 8px max(20px, env(safe-area-inset-right)) 22px max(20px, env(safe-area-inset-left)); border-top: 1px solid var(--c-borde); }
  .menu.abierto a { min-height: 48px; display: flex; align-items: center; font-size: 16px; }
  .menu.abierto a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--c-acento); padding-left: 14px; }
  .menu.abierto .menu-cta { display: inline-flex; justify-content: center; margin-top: 14px; border-bottom: 0; color: var(--c-acento-texto); padding: 13px 24px; }
  html[data-tema="minimal"] .menu.abierto .menu-cta { background: #111; color: #fff; }
}
@media (max-width: 699px) {
  .cabecera .contenedor { height: 72px; }
  html[data-tema="minimal"] .cabecera .contenedor { height: 76px; }
  .marca img { width: 56px; height: 56px; }
  .menu.abierto { max-height: calc(100dvh - 72px); }
}

/* botones y objetivos táctiles */
@media (max-width: 899px) {
  .btn-peq { min-height: 44px; }
  .segmentado label { padding: 11px 18px; }
  .buscador select { padding: 10px 0; min-height: 44px; }
  .filtros select, .filtros input { min-height: 46px; }
  .formulario input, .formulario select { min-height: 48px; }
  .formulario .check input { width: 22px; height: 22px; margin-top: 0; flex-shrink: 0; }
  .formulario .check { align-items: center; }
  .rango input[type=range] { min-height: 44px; }
  main a[href^="tel:"], main a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
  .enlace-gmaps, .ficha a[href^="/hipoteca"] { display: inline-flex; align-items: center; min-height: 44px; }
  .leaflet-touch .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
}

/* portada */
.hero-texto p { font-size: clamp(16px, 1.2vw + 12px, 18px); }
@media (max-width: 899px) {
  .buscador { grid-template-columns: 1fr 1fr; }
  .buscador .campo:first-child, .buscador .btn { grid-column: 1 / -1; }
  .buscador .campo { min-width: 0; }
  .buscador select { width: 100%; min-width: 0; text-overflow: ellipsis; }
}
@media (max-width: 359px) {
  .buscador { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .datos-rapidos { gap: 10px 24px; font-size: 14px; }
  .datos-rapidos b { font-size: 21px; }
  .credito-foto { font-size: 10px; right: 12px; top: 12px; max-width: calc(100% - 24px); }
}

/* listados: filtros apilados sin desbordar */
.filtros label { min-width: 0; }
.filtros select { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 899px) {
  .filtros:not(.con-municipio) .filtro-orden { grid-column: 1 / -1; }
  .filtros .acciones .btn { width: 100%; }
}
@media (max-width: 359px) { .filtros { grid-template-columns: 1fr; } }

/* bloques, formularios y simulador */
@media (max-width: 699px) {
  .seccion { padding-top: 56px; }
  .seccion-tinte { padding: 48px 0; margin-top: 56px; }
  .bloque, .resultado-sim { padding: 26px 22px; }
  .bloque h3 { font-size: 24px; }
  .formulario .btn[type=submit], .form-visita .btn { width: 100%; }
  .cab-seccion { margin-bottom: 22px; }
  .titulo-pagina { padding-top: 32px; }
  .agencia-foto { min-height: 240px; }
  .resultado-sim dl { gap: 10px 14px; }
}

/* ficha (modal) */
@media (max-width: 899px) {
  dialog.modal { width: 100vw; height: 100dvh; max-height: 100dvh; }
  .modal-inner { display: block; overscroll-behavior: contain; }
  .modal-cerrar { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
  .galeria { min-height: 0; }
  .galeria-principal { min-height: 0; aspect-ratio: 4 / 3; max-height: 62vh; touch-action: pan-y; }
  .galeria-principal img { height: 100%; max-height: none; object-fit: contain; }
  .miniaturas { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .miniaturas button { width: 72px; height: 54px; scroll-snap-align: start; }
  .ficha { overflow: visible; padding: 22px max(20px, env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .ficha h2 { font-size: clamp(24px, 6.4vw, 28px); padding-right: 0; }
  .acciones-ficha .btn { flex: 1 1 auto; min-height: 46px; }
  .mapa-inmueble { height: 260px; }
  dialog .wa-flotante .burbuja { display: none; }
}
@media (max-width: 380px) { .tabla-datos { grid-template-columns: 1fr; } }

/* WhatsApp flotante: más pequeño y respetando zonas seguras */
@media (max-width: 699px) {
  .wa-flotante { width: 56px; height: 56px; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
  .wa-flotante svg { width: 29px; height: 29px; }
  .pie { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* pie */
@media (max-width: 899px) {
  .pie { margin-top: 64px; padding-top: 44px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .pie-rejilla > .pie-marca, .pie-rejilla > div:last-child { grid-column: 1 / -1; }
  .pie-marca img { width: 76px; height: 76px; }
  .pie li { padding: 0; }
  .pie li a { display: inline-flex; align-items: center; min-height: 44px; }
  .pie-bajo a, .pie-bajo .pie-actividad { display: inline-block; padding: 12px 2px; }
  .pie-bajo { gap: 4px 24px; }
}
@media (max-width: 359px) { .pie-rejilla { grid-template-columns: 1fr; } }
.lista-creditos { padding-left: 20px; }
.lista-creditos li { margin-bottom: 8px; overflow-wrap: anywhere; }

/* ---- v2 móvil: cabecera con borde al desplazar, crédito sin «píldora», WhatsApp sin tapar el buscador ---- */
.cabecera { transition: box-shadow .2s; }
@media (max-width: 1099px) {
  .cabecera.desplazada, html[data-tema] .cabecera.desplazada { box-shadow: 0 1px 0 var(--c-borde), 0 8px 18px -14px rgba(0,0,0,.35); }
}
@media (max-width: 699px) {
  .credito-foto { background: none; padding: 0; top: 10px; right: 12px; max-width: 72%; color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
}
@media (max-width: 899px) {
  .wa-flotante { transition: opacity .25s, transform .25s, visibility .25s; }
  body.wa-oculto > .wa-flotante { opacity: 0; visibility: hidden; transform: scale(.85); pointer-events: none; }
}

/* =====================================================================
   Protección de datos (RGPD): aviso de primera capa en formularios,
   casilla comercial opcional, mapas «clic para cargar» y páginas legales.
   ===================================================================== */
.rgpd-form { display: grid; gap: 10px; }
.rgpd-form:empty { display: none; }
.info-rgpd { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--c-suave); background: var(--c-tinte); border-radius: 12px; padding: 10px 14px; }
.info-rgpd b { color: var(--c-titulos); }
.info-rgpd a { color: var(--c-enlace); }
.formulario .check-marketing { font-size: 14px; }
.formulario .check-marketing em { font-style: normal; opacity: .85; }
mark.pendiente { background: #fff3b0; color: #7a4b00; border: 1px dashed #d99a00; border-radius: 4px; padding: 0 4px; font-weight: 600; font-size: .95em; }
.mapa-aviso { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; background: var(--c-tinte); }
.mapa-aviso p { margin: 0; max-width: 420px; font-size: 13.5px; line-height: 1.5; color: var(--c-suave); }
.mapa-aviso p b { display: block; color: var(--c-titulos); font-size: 15px; margin-bottom: 4px; }
.mapa-aviso a { color: var(--c-enlace); }

.texto-legal h3 { font-size: 19px; margin-top: 24px; }
.texto-legal li { margin-bottom: 6px; }
.legal-meta { color: var(--c-suave); font-size: 14px; }
.legal-indice { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 8px; padding: 12px 16px; background: var(--c-tinte); border-radius: 12px; font-size: 15px; }
.legal-datos { list-style: none; padding: 0; }
.envoltura-tabla-legal { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.tabla-legal { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.tabla-legal th, .tabla-legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--c-borde); }
.tabla-legal th { color: var(--c-titulos); background: var(--c-tinte); }
.texto-legal h2[id], .texto-legal [id] { scroll-margin-top: 96px; }
@media (max-width: 700px) {
  .legal-indice { flex-direction: column; gap: 2px; }
  .legal-indice a { padding: 8px 0; }
  .mapa-aviso .btn { width: auto; }
}
.texto-legal.titulo-pagina p { font-size: 16px; color: var(--c-texto); max-width: none; }
.texto-legal.titulo-pagina p.legal-meta { color: var(--c-suave); font-size: 14px; }
.texto-legal { padding-bottom: 48px; }


/* Diálogo centrado de consentimiento / métricas GA4 (no a pantalla completa) */
.cookies-banner.cookies-modal {
  position: fixed; z-index: 10000; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: transparent; border: 0; box-shadow: none;
}
.cookies-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 16, 32, .48);
  backdrop-filter: blur(2px);
}
.cookies-dialog {
  position: relative; z-index: 1;
  width: min(520px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: var(--c-fondo, #fff); color: var(--c-texto);
  border: 1px solid var(--c-borde, #e1e6ef);
  border-radius: 16px;
  box-shadow: 0 24px 64px -20px rgba(0,0,0,.45);
  padding: 22px 22px 18px;
}
.cookies-cerrar {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: transparent; color: var(--c-suave, #5f6878);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.cookies-cerrar:hover, .cookies-cerrar:focus-visible { background: rgba(0,0,0,.06); color: var(--c-titulos, #012152); }
.cookies-titulo {
  margin: 0 36px 10px 0; font-size: 1.15rem; color: var(--c-titulos, #012152); line-height: 1.3;
}
.cookies-intro { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--c-suave, #5f6878); }
.cookies-intro b { color: var(--c-titulos, #012152); font-weight: 600; }
.cookies-intro a { color: var(--c-enlace); }
.cookies-banner-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.cookies-metricas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px;
}
.cookies-metricas div {
  background: rgba(0,0,0,.03); border: 1px solid var(--c-borde, #e1e6ef);
  border-radius: 12px; padding: 10px 12px; min-width: 0;
}
.cookies-metricas b { display: block; font-size: 1.15rem; color: var(--c-titulos, #012152); line-height: 1.2; }
.cookies-metricas span { display: block; margin-top: 2px; font-size: 12px; color: var(--c-suave, #5f6878); }
.cookies-metricas-disp { grid-column: 1 / -1; }
.cookies-metricas-msg { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--c-suave, #5f6878); }
/* Actividad propia (fallback sin GA4): layout distinto al panel admin */
.cookies-actividad { margin: 0 0 12px; }
.cookies-actividad-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--c-suave, #5f6878); }
.cookies-actividad-lead b { color: var(--c-titulos, #012152); font-weight: 600; }
.cookies-actividad-cifras {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cookies-actividad-cifras li {
  flex: 1 1 90px; min-width: 0;
  text-align: center;
  padding: 12px 8px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(1,33,82,.06), rgba(1,33,82,.02));
  border: 1px solid rgba(1,33,82,.1);
}
.cookies-actividad-cifras strong {
  display: block; font-size: 1.2rem; color: var(--c-titulos, #012152); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.cookies-actividad-cifras span {
  display: block; margin-top: 3px; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: var(--c-suave, #5f6878);
}
.cookies-actividad-h {
  margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--c-titulos, #012152);
}
.cookies-actividad-top {
  list-style: none; margin: 0; padding: 0;
  border: 1px dashed var(--c-borde, #e1e6ef); border-radius: 14px; overflow: hidden;
}
.cookies-actividad-top li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  padding: 9px 12px; border-bottom: 1px dashed var(--c-borde, #e1e6ef);
  font-size: 13.5px;
}
.cookies-actividad-top li:last-child { border-bottom: 0; }
.cookies-actividad-top .cat-nombre { grid-column: 1; color: var(--c-titulos, #012152); overflow-wrap: anywhere; }
.cookies-actividad-top .cat-ref { grid-column: 1; font-size: 11.5px; color: var(--c-suave, #5f6878); }
.cookies-actividad-top .cat-n {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-enlace, #0b5cab);
  background: rgba(11,92,171,.08); border-radius: 999px; padding: 4px 9px; font-size: 12.5px;
}
html.sabugo-cookies-abierto { overflow: hidden; }
@media (max-width: 600px) {
  .cookies-banner-acciones { width: 100%; }
  .cookies-banner-acciones .btn { flex: 1 1 auto; justify-content: center; }
  .cookies-metricas { grid-template-columns: 1fr; }
  .cookies-actividad-cifras li { flex: 1 1 100%; border-radius: 12px; }
}

/* =====================================================================
   Anti-desbordes (campos, textos largos y rejillas)
   Causa: los <input>/<select>/<textarea> tienen un ancho intrínseco (~20 caracteres)
   y los hijos de grid/flex tienen min-width:auto, así que una rejilla de 2 columnas
   (Teléfono | Email) no podía encoger por debajo de ese mínimo y se salía de la ficha.
   También palabras/URLs/emails largos sin espacios ensanchaban su columna.
   ===================================================================== */
body { overflow-wrap: break-word; }
.modal input, .modal select, .modal textarea, .modal button { max-width: 100%; }
.form-visita .formulario > *, .form-visita .formulario .fila > *, .form-visita .formulario label { min-width: 0; }
.form-visita .formulario input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
.form-visita .formulario select, .form-visita .formulario textarea { width: 100%; min-width: 0; }
.rango input[type=range] { margin-left: 0; margin-right: 0; }
.filtros input { width: 100%; min-width: 0; }
.pie-rejilla > *, .filtros > *, .buscador > * { min-width: 0; }
a[href^="mailto:"], .info-rgpd, .texto-legal li, .legal-datos li { overflow-wrap: anywhere; }

/* ficha (modal): columnas que pueden encoger y datos largos que parten línea */
.modal-inner > * { min-width: 0; }
@media (min-width: 900px) { .modal-inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.ficha h2, .ficha .descripcion, .ficha .nota-mapa, .ficha .ref, .chips li { overflow-wrap: anywhere; }
.tabla-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tabla-datos div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 380px) { .tabla-datos { grid-template-columns: minmax(0, 1fr); } }
.form-visita { min-width: 0; container-type: inline-size; }
@container (max-width: 440px) { .form-visita .formulario .fila { grid-template-columns: minmax(0, 1fr); } }
.acciones-ficha .btn { max-width: 100%; }

/* ficha (modal): WhatsApp en el flujo del contenido y hueco libre bajo el botón de cierre */
body.modal-abierto > .wa-flotante { display: none; }   /* el botón flotante de la página no asoma con el modal abierto */
.wa-ficha { margin: 22px 0 0; }
.wa-ficha .btn { gap: 10px; max-width: 100%; }
.wa-ficha svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.ficha { padding-bottom: 32px; }   /* antes 110 px: reservaba sitio para el botón flotante, que ya no existe dentro del modal */
@media (min-width: 900px) {
  /* el × (44 px, a 14 px del borde) queda en una franja propia: ningún campo ni texto pasa por debajo al desplazar */
  .ficha { padding-right: 68px; }
  .ficha h2 { padding-right: 0; }
}
@media (max-width: 899px) {
  .ficha { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .wa-ficha .btn { width: 100%; min-height: 46px; }
}

/* =====================================================================
   Marca (versión «branding», 10/2026): logotipo redondo, barra superior con
   teléfonos, botón de llamada en móvil y sellos de confianza (1988 · ASOCIAS · CRS).
   ===================================================================== */
.marca .logo { display: block; flex-shrink: 0; line-height: 0; }
.marca img { width: 72px; height: 72px; }
@media (max-width: 699px) { .marca img { width: 56px; height: 56px; } }
/* barra superior (solo escritorio y tableta horizontal; se desplaza con la página, no es fija) */
.barra-sup { display: none; }
@media (min-width: 900px) {
  .barra-sup { display: block; background: var(--c-pie); color: var(--c-pie-texto); font-size: 13px; line-height: 1.3; }
  .barra-sup .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  .barra-lema { margin: 0; display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
  .barra-lema span:first-child { color: #fff; font-weight: 600; }
  .barra-contacto { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 14px; }
  .barra-contacto a { color: #fff; text-decoration: none; white-space: nowrap; }
  .barra-contacto a:hover { text-decoration: underline; }
  .barra-contacto li:first-child a::before { content: "Tel. "; color: var(--c-pie-texto); }
}
@media (min-width: 900px) and (max-width: 1099px) { .barra-lema .barra-sep, .barra-lema span:last-child { display: none; } }
/* botón de llamada (móvil y tableta) */
.btn-llamar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--c-borde); color: var(--c-titulos); margin-left: auto; flex-shrink: 0; }
.btn-llamar svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .btn-llamar { display: none; } }
.cabecera .contenedor { gap: 12px; }
@media (min-width: 900px) { .cabecera .contenedor { gap: 20px; } }
/* teléfonos dentro del menú desplegable */
.menu-tels { display: none; }
.menu.abierto .menu-tels { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 10px 0 0; padding: 0; }
.menu.abierto .menu-tels a { border-bottom: 0; color: var(--c-titulos); font-weight: 600; }
.menu.abierto .menu-tels a::before { content: "Tel. "; font-weight: 400; color: var(--c-suave); margin-right: 4px; }
/* pie */
.pie-marca .logo { flex-shrink: 0; line-height: 0; }
.pie-marca > div { min-width: 0; }
.pie-marca .pie-desde { font-family: var(--f-texto); font-size: 14px; color: var(--c-pie-texto); margin-top: 8px; line-height: 1.45; }
.pie-sellos { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 32px; }
/* sellos de confianza */
.sello { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #1b2a44; border-radius: 14px; padding: 8px 14px; font-size: 13px; line-height: 1.3; font-weight: 500; min-width: 0; }
.sello img { height: 36px; width: auto; flex-shrink: 0; }
.sello picture { flex-shrink: 0; line-height: 0; }
.sello-desde b { font-family: var(--f-titulos); font-size: 22px; line-height: 1; color: #012152; font-weight: 700; }
/* franja de confianza de la portada */
.confianza { margin-top: 28px; }
.confianza-rejilla { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .confianza-rejilla { grid-template-columns: repeat(3, 1fr); } }
.confianza .sello { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--radio); padding: 16px 18px; font-size: 14.5px; gap: 14px; box-shadow: var(--sombra); }
.confianza .sello img { height: 46px; }
.confianza .sello-desde b { font-size: 30px; color: var(--c-titulos); }
.confianza .sello strong { display: block; color: var(--c-titulos); font-size: 15.5px; }
.confianza .sello small { display: block; color: var(--c-suave); font-size: 13.5px; font-weight: 400; margin-top: 2px; }
/* bloque «La empresa» de la página de la agencia */
/* 22/10/2026: logo solo junto al título; el texto, subtítulos y valores ocupan todo el ancho */
/* 26/10/2026: sin logotipo redondo; el texto ocupa todo el ancho */
.agencia-desde > div > h2 { margin: 0; }
.agencia-desde > div > p:first-of-type { margin-top: 20px; }
.agencia-tels { margin: 4px 0 16px; font-size: 17px; }
.agencia-tels a { font-weight: 600; }
.agencia-sellos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.agencia-sellos .sello { border: 1px solid var(--c-borde); }
.hero-texto .hero-lema { display: block; font-weight: 600; margin-bottom: 4px; color: inherit; }
.eyebrow-agencia { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-acento); margin-bottom: 12px; line-height: 1.5; }
.agencia-empresa p { color: var(--c-suave); font-size: 16.5px; }
/* La agencia: subtítulos y valores (22/10/2026) */
.agencia-sub { font-family: var(--f-titulos); color: var(--c-titulos); font-size: clamp(19px, 2vw, 22px); font-weight: var(--peso-titulos); letter-spacing: var(--espaciado-titulos); line-height: 1.25; margin: 26px 0 10px; }
.agencia-valores { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.agencia-valores li { position: relative; padding: 12px 16px 12px 34px; background: var(--c-tinte); border: 1px solid var(--c-borde); border-radius: var(--radio); color: var(--c-texto); font-size: 16.5px; line-height: 1.55; }
.agencia-valores li::before { content: ""; position: absolute; left: 15px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-acento); }
.agencia-valores strong { color: var(--c-titulos); }
@media (max-width: 699px) { .agencia-valores li { padding: 11px 13px 11px 30px; font-size: 16px; } .agencia-valores li::before { left: 13px; top: 20px; } }
.agencia-cita { margin: 26px 0 0; padding: 18px 22px; border-left: 4px solid var(--c-acento); background: var(--c-tinte); border-radius: 0 var(--radio) var(--radio) 0; }
.agencia-cita p { font-family: var(--f-titulos); font-size: clamp(19px, 2vw, 23px); color: var(--c-titulos) !important; margin: 0 0 4px; font-style: italic; }
.agencia-cita footer { font-size: 14.5px; color: var(--c-suave); }
@media (max-width: 699px) {
  .confianza { margin-top: 22px; }
  .confianza-rejilla { gap: 10px; }
  .confianza .sello { padding: 12px 14px; }
  .confianza .sello img { height: 40px; }
  .confianza .sello-desde b { font-size: 26px; }
}
.sello > span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }

/* ---------------------------------------------------------------- destacados de la portada (carrusel) */
.destacados-carrusel { position: relative; }
.destacados-pista {
  display: grid; grid-auto-flow: column; gap: 24px;
  grid-auto-columns: 86%;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 2px;
  padding: 6px 2px 18px; margin: -6px -2px 0; /* sitio para la sombra de las tarjetas */
  scrollbar-width: thin; scrollbar-color: var(--c-borde) transparent;
}
.destacados-pista > * { scroll-snap-align: start; min-width: 0; }
.destacados-pista > .vacio { grid-column: 1 / -1; }
.destacados-pista:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 4px; }
@media (min-width: 640px) { .destacados-pista { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (min-width: 1000px) { .destacados-pista { grid-auto-columns: calc((100% - 56px) / 3); gap: 28px; } }
.dc-flecha {
  position: absolute; top: calc(50% - 30px); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--c-borde); background: var(--c-superficie); color: var(--c-titulos, var(--c-navy));
  box-shadow: var(--sombra); font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 4px;
}
.dc-flecha:disabled { opacity: 0; visibility: hidden; } /* en el extremo no se muestra (no tapa la tarjeta) */
.dc-flecha:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 3px; }
.dc-ant { left: -18px; } .dc-sig { right: -18px; }
@media (max-width: 639px) { .dc-flecha { display: none; } } /* en móvil se desliza con el dedo */
.destacados-num { white-space: nowrap; font-size: 14px; }

/* ---------------------------------------------------------------- paginación numerada de los listados */
.paginacion { margin: 34px 0 8px; }
.paginacion ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.paginacion a, .paginacion span.pag-paso, .paginacion .pag-hueco {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; text-decoration: none; font-variant-numeric: tabular-nums; gap: 6px;
}
.paginacion a:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 2px; }
.paginacion a { background: var(--c-superficie); color: var(--c-texto); border: 1.5px solid var(--c-borde); }
.paginacion a:hover { border-color: var(--c-primario); }
.paginacion a[aria-current="page"] { background: var(--c-primario); border-color: var(--c-primario); color: #fff; }
.paginacion span.pag-paso { color: var(--c-suave); opacity: .5; border: 1.5px solid transparent; }
.paginacion .pag-hueco { min-width: 20px; padding: 0; color: var(--c-suave); }
@media (max-width: 599px) {
  .paginacion ul { gap: 4px; }
  .paginacion a, .paginacion span.pag-paso { min-width: 38px; padding: 0 8px; }
  .paginacion .pag-hueco { min-width: 14px; }
  .paginacion .pag-txt { display: none; } /* solo ‹ › (con aria-label) */
}

/* Pie: el botón flotante de WhatsApp no tapa «Acceso agencia» ni los créditos al llegar al final */
body:not([data-sin-wa]) .pie { padding-bottom: 92px; }   /* móvil: botón de 56 px a 14 px del borde */
@media (min-width: 700px) { body:not([data-sin-wa]) .pie { padding-bottom: 108px; } } /* escritorio: 62 px a 22 px + burbuja */

/* ---------------------------------------------------------------- listado completo en la portada (pestañas + rejilla 3×4) */
.portada-listado { scroll-margin-top: 90px; }
.portada-listado #t-listado:focus { outline: none; }
.pestanas { display: inline-flex; gap: 4px; background: var(--c-tinte); border-radius: 999px; padding: 4px; margin: 0 0 20px; }
.pestana {
  font: inherit; font-weight: 600; font-size: 16px; color: var(--c-suave); background: transparent; border: 0; cursor: pointer;
  min-height: 44px; padding: 0 26px; border-radius: 999px; transition: background .15s, color .15s;
}
.pestana:hover { color: var(--c-texto); }
.pestana[aria-selected="true"] { background: var(--c-primario); color: #fff; }
.pestana:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 2px; }
html[data-tema="fresco"] .pestanas { border-radius: 16px; }
html[data-tema="fresco"] .pestana { border-radius: 12px; }
html[data-tema="minimal"] .pestana[aria-selected="true"] { background: #111; }
.panel-listado .resultado-info:focus { outline: none; }
.panel-listado .resultado-info:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 599px) { .pestanas { display: flex; } .pestana { flex: 1; padding: 0 12px; } }

/* =====================================================================
   Mejoras visuales (10/2026). TODO con las variables del tema (--c-*, --radio*, --sombra, --f-*):
   al cambiar de tema en Configuración, estos componentes cambian de color, radio y tipografía solos.
   ===================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- esqueletos de carga (tarjetas, ficha) ---------- */
.esqueleto-tarjeta { display: flex; flex-direction: column; gap: 12px; background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--radio-grande); padding: 0 0 22px; overflow: hidden; min-height: 380px; }
.sk-foto, .sk-linea, .sk-galeria { display: block; background: linear-gradient(90deg, var(--c-tinte) 25%, color-mix(in srgb, var(--c-tinte) 45%, var(--c-superficie)) 50%, var(--c-tinte) 75%); background-size: 200% 100%; animation: brillo 1.4s ease-in-out infinite; }
.sk-foto { aspect-ratio: 4 / 3; width: 100%; }
.sk-linea { height: 14px; border-radius: 7px; margin: 0 20px; }
.sk-linea.corta { width: 45%; }
.sk-linea.titulo { height: 26px; width: 80%; margin-top: 6px; margin-bottom: 8px; }
.ficha .sk-linea { margin: 10px 0; }
.sk-galeria { position: absolute; inset: 0; background: linear-gradient(90deg, #121a2b 25%, #1c2638 50%, #121a2b 75%); background-size: 200% 100%; }
.destacados-pista .esqueleto-tarjeta { flex: 0 0 min(320px, 82%); }
/* fotos de tarjeta: fondo del tema mientras cargan */
.tarjeta-foto { background-color: var(--c-tinte); }

/* ---------- filtros de Comprar / Alquilar ---------- */
.filtro-titulo { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-suave); padding: 0; margin-bottom: 6px; }
.filtro-precio { grid-column: 1 / -1; min-width: 0; }
.filtro-precio .precio-rango-txt { float: right; margin-top: -24px; font-weight: 700; font-size: 14px; color: var(--c-titulos); }
.rango-doble { position: relative; height: 40px; --pista: var(--c-borde); }
.rango-doble::before { content: ""; position: absolute; left: 11px; right: 11px; top: 18px; height: 5px; border-radius: 3px; background: var(--pista); }
.rango-doble::after { content: ""; position: absolute; top: 18px; height: 5px; border-radius: 3px; background: var(--c-primario);
  left: calc(11px + (100% - 22px) * var(--desde-n, 0)); right: calc(11px + (100% - 22px) * (1 - var(--hasta-n, 1))); }
.filtro-precio { --desde-n: 0; --hasta-n: 1; }
.rango-doble input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 40px; border: 0; padding: 0; z-index: 1; }
.rango-doble input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--c-superficie); border: 3px solid var(--c-primario); box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor: grab; }
.rango-doble input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--c-superficie); border: 3px solid var(--c-primario); box-shadow: 0 2px 6px rgba(0,0,0,.18); cursor: grab; }
.rango-doble input[type=range]::-webkit-slider-runnable-track { background: none; }
.rango-doble input[type=range]::-moz-range-track { background: none; }
.rango-doble input[type=range]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--c-acento); outline-offset: 2px; }
.rango-doble input[type=range]:focus-visible::-moz-range-thumb { outline: 3px solid var(--c-acento); outline-offset: 2px; }
.filtro-chips { border: 0; padding: 0; margin: 0; min-width: 0; grid-column: 1 / -1; }
.filtro-chips .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.filtro-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filtro-chips label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 42px; padding: 0 11px; border: 1.5px solid var(--c-borde); border-radius: var(--radio-boton); background: var(--c-fondo); color: var(--c-texto); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; flex-direction: row; }
.filtro-chips label:hover { border-color: var(--c-primario); }
.filtro-chips input:checked + label { background: var(--c-primario); border-color: var(--c-primario); color: var(--c-fondo); }
.filtro-chips input:focus-visible + label { outline: 3px solid var(--c-acento); outline-offset: 2px; }
.btn-filtros { display: none; }
.filtros-cuenta { margin-left: 2px; }
@media (min-width: 900px) {
  /* fila 1: selectores (tipo, municipio, zona, orden) · fila 2: precio (2 columnas), habitaciones, limpiar */
  .filtros, .filtros.con-municipio { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
  .filtros .filtro-precio, .filtros .filtro-chips, .filtros .acciones { order: 2; }
  .filtros .filtro-precio { grid-column: span 2; padding-right: 12px; }
  .filtros .filtro-chips { grid-column: span 1; }
  .filtros .acciones, .filtros.con-municipio .acciones { grid-column: span 1; align-self: end; }
  .filtros .filtro-orden, .filtros:not(.con-municipio) .filtro-orden { grid-column: span 1; }
  .filtros:not(.con-municipio) .filtro-orden { grid-column: span 2; }
}
@media (max-width: 899px) {
  .btn-filtros { display: inline-flex; width: 100%; margin: 18px 0 0; justify-content: center; min-height: 48px; }
  .filtros { display: none; margin-top: 12px; }
  .filtros.abierto { display: grid; }
}

/* ---------- ficha: galería a pantalla completa, mapa grande, barra fija en móvil ---------- */
.galeria-completa-btn { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; }
.galeria-completa-btn:hover, .galeria-completa-btn:focus-visible { background: rgba(0,0,0,.8); }
.galeria-principal img { cursor: zoom-in; }
.galeria-principal img { transition: opacity .2s ease; }
@media (min-width: 900px) { .galeria { min-height: 520px; } }
dialog.modal.galeria-completa .galeria { position: fixed; inset: 0; z-index: 20; min-height: 0; background: #05080f; }
dialog.modal.galeria-completa .galeria-principal img { max-height: calc(100dvh - 92px); height: calc(100dvh - 92px); cursor: default; }
dialog.modal.galeria-completa .galeria-principal { aspect-ratio: auto; max-height: none; }
dialog.modal.galeria-completa .modal-cerrar, dialog.modal.galeria-completa .barra-ficha { display: none; }
.mapa-inmueble { height: 320px; }
@media (min-width: 900px) { .ficha .mapa-inmueble { height: 380px; } }
.barra-ficha { display: none; }
@media (max-width: 899px) {
  .barra-ficha { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; position: sticky; bottom: 0; z-index: 6;
    padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--c-superficie) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--c-borde); box-shadow: 0 -10px 24px -18px rgba(0,0,0,.4); }
  .barra-ficha a, .barra-ficha button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: var(--radio-boton); border: 1.5px solid var(--c-borde); background: var(--c-superficie); color: var(--c-titulos); font: 700 13px/1.1 var(--f-texto); text-decoration: none; cursor: pointer; padding: 6px 4px; }
  .barra-ficha .bf-wa { background: #25D366; border-color: #25D366; color: #fff; }
  .barra-ficha .bf-visita { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-acento-texto); }
  .barra-ficha svg { width: 20px; height: 20px; }
  .barra-ficha .bf-wa svg { fill: #fff; }
  .ficha .wa-ficha { display: none; } /* en móvil WhatsApp ya está en la barra */
  .galeria-principal { aspect-ratio: 4 / 3.2; }
}
.ficha { scroll-margin-top: 20px; }
.form-visita { scroll-margin-top: 70px; }

/* ---------- franja de confianza (sin testimonios) ---------- */
.confianza-titulo { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 14px; color: var(--c-titulos); }
.confianza-titulo span { color: var(--c-acento); }
@media (min-width: 760px) { .confianza-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .confianza-rejilla { grid-template-columns: repeat(4, 1fr); } }
.sello-oficina { text-decoration: none; color: inherit; transition: border-color .2s, transform .2s; }
.sello-oficina:hover { border-color: var(--c-primario); transform: translateY(-2px); }
.sello-ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--c-tinte); color: var(--c-primario); }

/* ---------- La agencia: oficina con mapa ---------- */
.agencia-oficina .dos-col { align-items: stretch; }
.lista-datos { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 12px; }
.lista-datos li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-borde); font-size: 16px; overflow-wrap: anywhere; }
.lista-datos li[hidden] { display: none; }
.lista-datos b { color: var(--c-suave); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
.mapa-oficina { height: 450px; min-height: 340px; margin: 0; border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.agencia-foto { border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.valores .valor { border: 1px solid var(--c-borde); }

/* ---------- páginas legales ---------- */
.texto-legal.titulo-pagina { background: var(--c-superficie); border: 1px solid var(--c-borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 44px clamp(22px, 5vw, 56px) 40px; margin-top: 32px; }
.texto-legal h2 { padding-top: 26px; border-top: 1px solid var(--c-borde); scroll-margin-top: 110px; font-size: clamp(22px, 2.6vw, 28px); }
.texto-legal h3 { font-size: 18px; margin: 22px 0 6px; color: var(--c-titulos); }
.texto-legal p, .texto-legal li { line-height: 1.7; }
.legal-indice { border: 1px solid var(--c-borde); }
.legal-indice a { text-decoration: none; font-weight: 600; color: var(--c-enlace); }
.legal-indice a:hover { text-decoration: underline; }
.legal-datos { background: var(--c-tinte); border-radius: var(--radio); padding: 14px 18px; display: grid; gap: 6px; }

/* ---------- cabecera móvil (menú) y pie: espaciado y tipografía coherentes ---------- */
@media (max-width: 1099px) {
  .menu.abierto { gap: 0; }
  .menu.abierto a { font-family: var(--f-texto); font-weight: 600; letter-spacing: 0; }
  .menu.abierto a:last-of-type { border-bottom: 0; }
  .menu.abierto .menu-tels { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-borde); }
}
.pie { padding-top: 64px; }
.pie-rejilla { gap: 36px 40px; }
.pie h4 { margin-bottom: 16px; opacity: .95; }
.pie li { padding: 5px 0; line-height: 1.5; }
.pie-sellos { margin-top: 36px; }
.pie-bajo { margin-top: 32px; line-height: 1.6; }
@media (max-width: 699px) { .pie-rejilla { gap: 28px; } .pie-marca img { width: 84px; height: 84px; } }

/* ---------- movimiento: suave y desactivable ---------- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  .sk-foto, .sk-linea, .sk-galeria, .esqueleto { animation: none !important; }
  .sello-oficina:hover { transform: none; }
}

/* =====================================================================
   Hero de portada v2 (10/2026): fotos de Gijón a sangre con velo oscuro, titular corto, dos botones
   y buscador en tarjeta translúcida. Mismas reglas para todos los temas (selector con html[data-tema]
   para imponerse a la maquetación propia de cada tema); colores, radios y fuentes salen de las variables.
   ===================================================================== */
html .hero.hero-v2, html[data-tema] .hero.hero-v2 {
  --hero-lateral: max(20px, calc((100vw - var(--ancho)) / 2 + 24px));
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: none;
  position: relative; max-width: none; width: 100%; padding: 0; margin: 0; gap: 0; min-height: 0;
}
html[data-tema] .hero.hero-v2 .hero-foto { grid-area: auto; grid-row: 1 / 3; grid-column: 1; min-height: 0; border-radius: 0; margin: 0; }
html[data-tema] .hero.hero-v2 .hero-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,12,24,.62) 0%, rgba(5,12,24,.38) 45%, rgba(5,12,24,.12) 80%),
              linear-gradient(180deg, rgba(5,12,24,.30) 0%, rgba(5,12,24,.05) 35%, rgba(5,12,24,.55) 100%);
}
html[data-tema] .hero.hero-v2 .hc-slide { transition: opacity 2.6s ease-in-out; }
html[data-tema] .hero.hero-v2 .hero-texto {
  grid-area: auto; grid-row: 1; grid-column: 1; z-index: 2; align-self: end; max-width: none; background: none; border-radius: 0;
  padding: 120px var(--hero-lateral) 28px; color: #fff;
}
html[data-tema] .hero.hero-v2 .hero-texto h1 { color: #fff; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; max-width: 13ch; margin: 0 0 14px; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
html[data-tema] .hero.hero-v2 .hero-sub { color: rgba(255,255,255,.94); font-size: clamp(17px, 1.4vw + 10px, 21px); max-width: 560px; margin: 0 0 10px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
html[data-tema] .hero.hero-v2 .hero-confianza { color: rgba(255,255,255,.82); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 24px; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-ctas .btn { min-height: 52px; padding: 14px 28px; font-size: 16px; font-weight: 700; border-radius: var(--radio-boton); box-shadow: 0 10px 26px -12px rgba(0,0,0,.55); }
.hero-ctas .hero-cta-1 { background: var(--c-acento); color: var(--c-acento-texto); }
.hero-ctas .hero-cta-2 { background: #fff; color: var(--c-titulos); }
.hero-ctas .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
html[data-tema] .hero.hero-v2 .buscador {
  grid-area: auto; grid-row: 2; grid-column: 1; z-index: 2; align-self: start;
  margin: 0 var(--hero-lateral) 56px; width: auto; max-width: 760px;
  background: color-mix(in srgb, var(--c-superficie) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.45); border-radius: var(--radio-grande); box-shadow: 0 24px 50px -24px rgba(0,0,0,.6);
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 12px;
}
html[data-tema] .hero.hero-v2 .buscador .btn { border-radius: calc(var(--radio) - 2px); }
html[data-tema] .hero.hero-v2 .hc-puntos { top: auto; bottom: 18px; right: var(--hero-lateral); left: auto; transform: none; }
html[data-tema] .hero.hero-v2 .credito-foto { z-index: 3; }
@media (min-width: 900px) {
  html[data-tema] .hero.hero-v2 { min-height: min(680px, calc(100svh - 110px)); grid-template-rows: 1fr auto; }
  html[data-tema] .hero.hero-v2 .hero-texto { padding-top: 96px; }
}
/* móvil: hero más bajo, solo titular + botones apilados; el buscador va justo debajo de la foto */
@media (max-width: 699px) {
  html[data-tema] .hero.hero-v2 .hero-foto { grid-row: 1 / 2; }
  html[data-tema] .hero.hero-v2 .hero-foto::before { background: linear-gradient(180deg, rgba(5,12,24,.25) 0%, rgba(5,12,24,.15) 30%, rgba(5,12,24,.72) 100%); }
  html[data-tema] .hero.hero-v2 .hero-texto { min-height: min(400px, max(310px, calc(100svh - 250px))); display: flex; flex-direction: column; justify-content: flex-end; padding: 84px 20px 26px; }
  html[data-tema] .hero.hero-v2 .hero-texto h1 { font-size: clamp(34px, 9.5vw, 42px); max-width: 12ch; }
  html[data-tema] .hero.hero-v2 .hero-sub, html[data-tema] .hero.hero-v2 .hero-confianza { display: none; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  html[data-tema] .hero.hero-v2 .buscador { grid-row: 2; margin: 14px 12px 0; background: var(--c-superficie); backdrop-filter: none; border: 1px solid var(--c-borde); box-shadow: var(--sombra); grid-template-columns: auto minmax(0, 1fr); gap: 6px; padding: 10px; }
  html[data-tema] .hero.hero-v2 .buscador .campo, html[data-tema] .hero.hero-v2 .buscador .campo:first-child { padding: 4px 6px; grid-column: auto; min-width: 0; }
  html[data-tema] .hero.hero-v2 .buscador .segmentado label { padding: 8px 12px; }
  html[data-tema] .hero.hero-v2 .buscador .btn { grid-column: 1 / -1; padding: 13px; }
  /* 22/10/2026: puntos abajo y centrados, lejos del menú y la llamada de la cabecera */
  html[data-tema] .hero.hero-v2 .hc-puntos { top: auto; bottom: 2px; left: 0; right: 0; justify-content: center; z-index: 4; }
  html[data-tema] .hero.hero-v2 .hero-texto { padding-bottom: 46px; }
  /* tema minimal: la foto crece con el texto para que botones y puntos queden dentro */
  html[data-tema="minimal"] .hero.hero-v2 .hero-foto { height: auto; min-height: clamp(300px, 88vw, 420px); margin-bottom: 0; }
}

/* =====================================================================
   Cabecera móvil con nombre de marca + pistas visuales del carrusel de
   destacados (versión «header», 11/10/2026). Colores y fuentes del tema.
   ===================================================================== */
.marca .marca-movil { display: none; }
@media (max-width: 899px) {
  .cabecera .marca { flex-shrink: 1; min-width: 0; gap: 10px; }
  .marca .marca-movil {
    display: flex; flex-direction: column; justify-content: center; min-width: 0;
    font-family: var(--f-titulos); color: var(--c-titulos); line-height: 1.15;
  }
  .marca .marca-movil b {
    display: block; font-size: clamp(14px, 3.85vw, 17px); font-weight: 700; color: var(--c-titulos);
    letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .marca .marca-movil small {
    display: block; font-family: var(--f-texto); font-size: 12px; font-weight: 500; color: var(--c-suave);
    margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
@media (max-width: 389px) { .marca img { width: 48px; height: 48px; } .cabecera .marca { gap: 8px; } }
@media (max-width: 339px) { .marca .marca-movil small { display: none; } .marca .marca-movil b { font-size: 13px; } }

/* destacados: tarjeta siguiente asomando (~15 %) en móvil, flechas e indicador sincronizado */
@media (max-width: 639px) {
  .destacados-pista { grid-auto-columns: 84%; gap: 12px; }
}
.dc-flecha:disabled { opacity: .35; visibility: visible; cursor: default; box-shadow: none; }
.dc-flecha:not(:disabled):hover { border-color: var(--c-acento); color: var(--c-acento); }
.dc-indicador { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; min-height: 44px; }
.dc-indicador[hidden] { display: none; }
.dc-puntos { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.dc-puntos[hidden] { display: none; }
.dc-punto { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dc-punto::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--c-borde); transition: width .25s, background-color .25s; }
.dc-punto.activo::before { width: 22px; background: var(--c-acento); }
.dc-punto:focus-visible { outline: 3px solid var(--c-azul); outline-offset: 1px; border-radius: 6px; }
.dc-contador { font-size: 14px; color: var(--c-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) {
  /* en móvil las flechas van debajo, a los lados del indicador (no tapan las fotos) */
  .destacados-carrusel { display: grid; grid-template-columns: 44px 1fr 44px; grid-template-areas: "pista pista pista" "ant ind sig"; align-items: center; column-gap: 8px; }
  .destacados-pista { grid-area: pista; }
  .dc-flecha { display: grid; position: static; grid-row: 2; width: 44px; height: 44px; font-size: 26px; box-shadow: none; }
  .dc-flecha[hidden] { display: none; }
  .dc-ant { grid-area: ant; } .dc-sig { grid-area: sig; }
  .dc-indicador { grid-area: ind; margin-top: 0; gap: 8px; min-width: 0; }
  .dc-puntos { gap: 0; }
  .dc-punto { width: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .destacados-pista { scroll-behavior: auto; }
  .dc-punto::before { transition: none; }
}

/* ---------- versión «credenciales» (13/10/2026): 1988 · ASOCIAS · CRS una sola vez por pantalla ----------
   Escritorio (≥ 900 px): solo en la barra superior. Móvil/tableta (barra oculta): una línea discreta en el pie. */
.pie-marca .pie-credenciales { display: none; font-family: var(--f-texto); font-size: 13px; color: var(--c-pie-texto); margin-top: 8px; line-height: 1.45; }
@media (max-width: 899px) { .pie-marca .pie-credenciales { display: block; } }

/* ---------- versión «resumen» (13/10/2026): globo de avisos del equipo (solo dispositivos activados en el panel) ---------- */
.aviso-globo { font-family: var(--f-texto); }
.aviso-cabecera { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--c-acento); color: var(--c-acento-texto); text-decoration: none; font-size: 13.5px; font-weight: 600; flex-shrink: 1; min-width: 0; max-width: 340px; box-shadow: var(--sombra); margin-left: 8px; animation: aviso-entrar .35s ease-out both; }
.aviso-cabecera b { font-weight: 800; }
.aviso-cabecera .aviso-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.aviso-cabecera:focus-visible { outline: 3px solid var(--c-primario); outline-offset: 2px; }
@media (max-width: 899px) { .aviso-cabecera { padding: 0 8px; gap: 4px; } }
@media (max-width: 899px) { .aviso-cabecera { margin-left: 6px; height: 36px; } .aviso-cabecera .aviso-texto { display: none; } }
@media (min-width: 900px) { .aviso-cabecera { display: none; } }
.aviso-barra { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--c-acento); color: var(--c-acento-texto); text-decoration: none; font-size: 12.5px; font-weight: 600; max-width: 460px; min-width: 0; animation: aviso-entrar .35s ease-out both; }
.aviso-barra svg { width: 14px; height: 14px; flex-shrink: 0; }
.aviso-barra .aviso-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.aviso-barra:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 1679px) { .aviso-barra .aviso-texto { display: none; } }
.aviso-pie { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--c-acento); color: var(--c-acento-texto); font-size: 12px; font-weight: 800; line-height: 1; vertical-align: 1px; }
@keyframes aviso-entrar { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso-cabecera, .aviso-barra { animation: none; } }

/* ---------- versión «sellos» (13/10/2026): estilo original de la barra + logotipos de ASOCIAS y CRS ----------
   Escritorio: barra superior. Móvil: línea corta en el pie. Logos de 19 px en un chip blanco (legibles sobre azul marino). */
.sellos-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sellos-linea .lema-fuerte { color: #fff; font-weight: 600; }
.sellos-linea .lema-suave { color: var(--c-pie-texto); font-weight: 400; }
.barra-lema.sellos-linea span:first-child { color: #fff; font-weight: 600; }
.barra-lema.sellos-linea .barra-sep { display: inline; opacity: .7; }
.sello-chip { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 1px 6px; background: #fff; border-radius: 6px; line-height: 0; flex-shrink: 0; }
.sello-chip picture { line-height: 0; }
.sello-chip img { height: 19px; width: auto; display: block; }
.barra-lema.sellos-linea .lema-suave { display: inline; }
@media (min-width: 900px) and (max-width: 1199px) { .barra-lema.sellos-linea .crs-texto { display: none; } }
.pie-marca .pie-credenciales.sellos-linea { display: none; }
@media (max-width: 899px) { .pie-marca .pie-credenciales.sellos-linea { display: flex; } }
/* Una sola línea: la barra conserva su altura (36 px). Lo que no cabe se recorta por tramos de anchura. */
@media (min-width: 900px) {
  .barra-lema.sellos-linea { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  .barra-sup .barra-contacto { flex-wrap: nowrap; flex-shrink: 0; }
}
/* El email no cabe junto a los sellos: se quita de la barra (sigue en el pie, Contacto y La agencia) */
@media (min-width: 900px) { .barra-sup .barra-contacto li:has(a[data-cfg="email"]) { display: none; } }
@media (min-width: 900px) and (max-width: 999px) { .barra-lema.sellos-linea .lema-suave { display: none; } }
.tel-etq { font-size: .78em; opacity: .75; font-weight: 500; margin-right: .15em; }
.aviso-busca { margin-top: 18px; }
.aviso-busca summary { cursor: pointer; color: var(--c-acento); font-weight: 600; }

/* ---------- 22/10/2026: zona de rebote (overscroll) de iOS/macOS ----------
   El documento no tiene espacio extra tras el pie (scrollHeight = final del pie). Lo que se veía bajo el pie oscuro
   era el lienzo de html (transparente -> color de body) al estirar la página en Safari. El lienzo toma ahora el color
   del pie; body sigue con el fondo del tema y una capa fija con el color de la cabecera cubre el rebote superior. */
html { background-color: var(--c-pie); }
body { background: var(--c-fondo); min-height: 100vh; min-height: 100dvh; }
body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 50vh; background: var(--header-bg, var(--c-fondo)); z-index: -1; pointer-events: none; }

/* =====================================================================
   Logo más grande en la cabecera (26/10/2026), común a los 6 temas.
   Escritorio/tableta 72→88 px (cabecera 84→96), móvil 56→66 px (cabecera 72→76),
   móvil estrecho (<390 px) 48→58 px. Centrado vertical y sin desplazar textos.
   ===================================================================== */
:root { --logo-cab: 88px; --cab-alto: 96px; }
@media (max-width: 699px) { :root { --logo-cab: 66px; --cab-alto: 76px; } }
@media (max-width: 389px) { :root { --logo-cab: 58px; } }
html[data-tema="minimal"] { --cab-alto: 100px; }
@media (max-width: 699px) { html[data-tema="minimal"] { --logo-cab: 64px; --cab-alto: 74px; } }
@media (max-width: 389px) { html[data-tema="minimal"] { --logo-cab: 58px; } }
html[data-tema] .cabecera .contenedor { height: var(--cab-alto); }
html[data-tema] .cabecera .marca img, .cabecera .marca img { width: var(--logo-cab); height: var(--logo-cab); }
.menu.abierto { top: 100%; }
@media (max-width: 899px) { html[data-tema] .menu.abierto { max-height: calc(100dvh - var(--cab-alto)); } }

/* =====================================================================
   Logotipo horizontal en la cabecera de todas las páginas (26/10/2026), todos los temas.
   Escritorio y tableta 56 px de alto, móvil 44, móvil estrecho 40.
   ===================================================================== */
.cabecera .marca.marca-portada { gap: 0; flex-shrink: 1; min-width: 0; }
html[data-tema] .cabecera .marca.marca-portada img { height: var(--logo-portada, 56px); width: auto; max-width: 100%; aspect-ratio: 560 / 109; border-radius: 3px; display: block; }
@media (max-width: 1099px) { :root { --logo-portada: 56px; } }
/* Escritorio: el menú un poco más compacto (solo separación) para dejar sitio al logotipo ancho */
@media (min-width: 1100px) {
  body .menu { gap: 14px; }
  html[data-tema="fresco"] body .menu { gap: 2px; }
  html[data-tema="fresco"] body .menu a { padding-left: 10px; padding-right: 10px; }
}
/* Portátil estrecho (1100–1279 px): se oculta el botón «Valora tu casa gratis» de la cabecera
   («Vender tu piso» sigue en el menú) para que el logotipo se lea sin que el menú salte de línea */
@media (min-width: 1100px) and (max-width: 1279px) { body .cabecera .cab-cta { display: none; } }
@media (max-width: 699px)  { :root { --logo-portada: 44px; } }
@media (max-width: 389px)  { :root { --logo-portada: 40px; } }
/* Portátil estrecho (1100–1199 px): el logotipo redondo vuelve a 72 px y el menú de «fresco» se aprieta un poco,
   para que el menú nunca salte de línea (en «fresco» ya ocurría antes a 1100–1120 px) */
@media (min-width: 1100px) and (max-width: 1199px) {
  :root { --logo-cab: 72px; }
}

/* =====================================================================
   26/10/2026 (v2): el logotipo horizontal se encoge para caber; los botones
   (llamar, globo de avisos, WhatsApp, menú) nunca se encogen ni se solapan.
   ===================================================================== */
html[data-tema] .cabecera .marca.marca-portada { flex: 1 1 auto; min-width: 0; max-width: calc(var(--logo-portada, 56px) * 560 / 109); }
html[data-tema] .cabecera .marca.marca-portada .logo { display: block; flex: 1 1 auto; min-width: 0; width: 100%; }
html[data-tema] .cabecera .marca.marca-portada img { width: 100%; height: auto; max-width: 100%; max-height: var(--logo-portada, 56px); }
html[data-tema] .cabecera .contenedor > :not(.marca):not(.menu) { flex-shrink: 0; }
@media (max-width: 899px) {
  html[data-tema] .cabecera .contenedor { gap: 8px; }
  html[data-tema] .cabecera .aviso-cabecera { margin-left: 0; }
}
@media (max-width: 389px) {
  html[data-tema] .cabecera .contenedor { gap: 6px; }
  html[data-tema] .cabecera .btn-llamar, html[data-tema] .cabecera .btn-menu { width: 42px; height: 42px; }
  html[data-tema] .cabecera .aviso-cabecera { padding: 0 7px; height: 34px; }
}