/* ==========================================================================
   RedVivienda · blocks.css
   Bloques editoriales de la portada y de las páginas de servicio: hero con
   fotografía y banda de búsqueda, pareja promocional, bloques alternos de
   imagen + tarjeta superpuesta, noticias, directorio y pie claro.
   Se carga después de components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero con fotografía y banda de búsqueda
   -------------------------------------------------------------------------- */
.hero-photo {
  position: relative;
  /* La fotografía no va a sangre: se ciñe al ancho de página, como el resto
     del contenido, y en pantallas anchas deja margen blanco a los lados. */
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  min-height: 620px;
  display: flex;
  align-items: center;
  background: #0B1417 url("../img/hero.jpg?v=b64adcf2") 50% 62% / cover no-repeat;
  isolation: isolate;
}
/* Velo suave: la fotografía es nocturna, así que solo se refuerza el borde
   superior (para la cabecera) y el inferior (para el corte con la página). */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,12,14,.46) 0%, rgba(6,12,14,.06) 30%,
                    rgba(6,12,14,.06) 62%, rgba(6,12,14,.42) 100%);
}

/* Pie de la fotografía: el hero es un anuncio real y enlaza a su ficha. */
.hero-photo__credit {
  position: absolute;
  right: var(--s-6);
  bottom: var(--s-5);
  z-index: 3;
  font-size: var(--fs-xs);
}
.hero-photo__credit a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(8, 14, 16, .48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .90);
  font-weight: 600;
}
.hero-photo__credit a:hover { background: rgba(8, 14, 16, .68); color: var(--c-white); }

/* --------------------------------------------------------------------------
   Banda de búsqueda: franja a sangre sobre la fotografía
   -------------------------------------------------------------------------- */
.searchband {
  position: relative;
  z-index: 2;
  width: 100%;
  /* La banda se ciñe a su contenido —la fila de campos más el margen
     interior— en lugar de estirarse de lado a lado de la pantalla. */
  max-width: 1320px;
  margin-inline: auto;
  /* Translúcida: la fotografía se intuye por debajo, como en los portales
     de referencia. */
  background: rgba(195, 230, 247, .96);
  padding-block: var(--s-5) var(--s-4);
}
.searchband__inner {
  width: 100%;
  padding-inline: var(--s-6);
}
.searchband__title {
  font-size: clamp(23px, 2.4vw, var(--fs-2xl));
  font-weight: 800;
  letter-spacing: -.03em;
  text-align: center;
  color: var(--c-ink-900);
  margin-bottom: var(--s-4);
}
.searchband__form {
  /* Todo en una sola línea: operación, tipo (o fechas), destino y Buscar.
     Es flex y no grid para que, si la pantalla no da de sí, los campos
     bajen de fila por su cuenta en vez de desbordarse. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: stretch;
  max-width: 1272px;
  margin-inline: auto;
}
.searchband__form > .op-toggle,
.searchband__form > .typepick,
.searchband__form > .estancia,
.searchband__submit { flex: 0 0 auto; }
/* El destino se queda con todo el ancho sobrante, pero nunca por debajo
   de lo que hace falta para leer lo que se escribe. */
.searchband__input-wrap { flex: 1 1 220px; }

/* Campos: blancos, esquina apenas redondeada, sin filete. */
.searchband .select,
.searchband .input {
  height: 50px;
  background: var(--c-white);
  border: 0;
  border-radius: 4px;
  font-size: var(--fs-md);
  box-shadow: none;
}
.searchband .input:focus { box-shadow: 0 0 0 3px rgba(27,124,173,.38); }
.searchband__input-wrap { position: relative; min-width: 196px; }
.searchband__input-icon {
  position: absolute;
  left: var(--s-4); top: 50%;
  transform: translateY(-50%);
  color: var(--c-ink-500);
  display: flex;
  pointer-events: none;
}
.searchband__input-wrap .input { padding-left: 46px; }
.searchband__input-wrap .input::placeholder { color: var(--c-ink-500); }

.searchband__submit {
  height: 50px;
  padding-inline: var(--s-5);
  border-radius: 4px;
  background: var(--c-brand-600);
  color: var(--c-white);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -.01em;
}
.searchband__submit:hover { background: var(--c-brand-700); color: var(--c-white); }

/* Operación: cajas blancas; la activa se marca con filete y texto de marca. */
.op-toggle { display: flex; gap: var(--s-2); }
.op-toggle button {
  height: 50px;
  padding-inline: var(--s-3);
  border-radius: 4px;
  background: var(--c-white);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-ink-800);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--t-fast), color var(--t-fast);
}
.op-toggle button:hover { color: var(--c-brand-700); }
.op-toggle button[aria-pressed="true"] {
  color: var(--c-brand-700);
  background: var(--c-brand-050);
  box-shadow: inset 0 0 0 2px var(--c-brand-600);
}

/* Desplegable de tipo de inmueble */
.typepick { position: relative; }
.typepick__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
  min-width: 172px;
  height: 50px;
  padding-inline: var(--s-4);
  border-radius: 4px;
  background: var(--c-white);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--c-ink-900);
  text-align: left;
}
/* El de alojamiento lleva menos texto que el de vivienda. */
.typepick__btn--estancia { min-width: 140px; gap: var(--s-3); }

.typepick__caret { color: var(--c-ink-700); transition: transform var(--t-fast); }
.typepick__btn[aria-expanded="true"] .typepick__caret { transform: rotate(180deg); }
/* El panel es más ancho que el botón y baja sobre el contenido, sin scroll:
   las doce opciones caben de una vez. */
.typepick__panel {
  position: absolute;
  z-index: var(--z-dropdown);
  top: 100%;
  left: 0;
  width: 400px;
  max-width: 92vw;
  max-height: min(72vh, 720px);
  overflow-y: auto;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 14px 34px rgba(20, 24, 27, .18);
  padding-block: var(--s-2);
}
/* Título de grupo: se lee, no se elige. */
.typepick__grupo {
  padding: var(--s-3) var(--s-4) 4px;
  font-size: var(--fs-3xs);
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-500);
  cursor: default;
}

.typepick__panel li {
  padding: 15px var(--s-6);
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--c-ink-900);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast);
}
.typepick__panel li:hover,
.typepick__panel li.is-active { background: var(--c-ink-050); }
.typepick__panel li[aria-selected="true"] {
  background: var(--c-ink-050);
  color: var(--c-brand-700);
  font-weight: 650;
}

/* Estancia: fechas y huéspedes de la pestaña vacacional. Ocupan la casilla
   que en compra y alquiler usa el desplegable de tipo, así que la fila del
   buscador no cambia de forma al saltar de una pestaña a otra. */
.estancia { display: flex; gap: var(--s-2); }
.estancia__campo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: 50px;
  padding: 0 var(--s-3);
  border-radius: 4px;
  background: var(--c-white);
  cursor: pointer;
  transition: box-shadow var(--t-fast);
}
.estancia__campo:focus-within { box-shadow: 0 0 0 3px rgba(27,124,173,.38); }
.estancia__etiqueta {
  font-size: var(--fs-3xs);
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-500);
}
.estancia__valor {
  width: 116px;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--c-ink-900);
  cursor: pointer;
}
.estancia__valor:focus { outline: none; }
.estancia__campo--huespedes .estancia__valor { width: 44px; }
/* El icono nativo del selector de fecha se acerca al texto. */
.estancia__valor::-webkit-calendar-picker-indicator { margin-left: 0; opacity: .55; cursor: pointer; }
.estancia__valor::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Enlace de acción editorial
   -------------------------------------------------------------------------- */
.action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-link);
}
.action-link:hover { text-decoration: underline; color: var(--c-link); }
.action-link + .action-link { margin-top: var(--s-2); }

/* --------------------------------------------------------------------------
   Pareja de tarjetas promocionales
   -------------------------------------------------------------------------- */
/* Los bloques editoriales no crecen con la página: pasado cierto ancho la
   ilustración se vuelve enorme y la tarjeta queda perdida. */
.promo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  max-width: 1280px;
  margin-inline: auto;
}
.promo-card {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-xl);
  background: var(--c-white);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.promo-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.promo-card:hover .promo-card__media img { transform: scale(1.05); }
.promo-card__media { background: var(--c-ink-050); }
.promo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.promo-card__body { padding: 28px; display: flex; flex-direction: column; gap: var(--s-3); }
.promo-card__body h3 { font-size: var(--fs-xl); letter-spacing: -.025em; }
.promo-card__body p { font-size: var(--fs-md); color: var(--c-ink-700); }
.promo-card__body .action-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   Bloque alterno imagen + tarjeta superpuesta
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  margin-block: var(--s-16);
  max-width: 1280px;
  margin-inline: auto;
}
.feature__media {
  grid-row: 1;
  grid-column: 1;
  aspect-ratio: 4 / 3;
  background: var(--c-ink-050);
  overflow: hidden;
  border-radius: var(--r-xl);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature__card {
  grid-row: 1;
  grid-column: 2;
  position: relative;
  z-index: 2;
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  padding: var(--s-10);
  margin-left: calc(var(--s-16) * -1);
}
.feature--reverse .feature__media { grid-column: 2; }
.feature--reverse .feature__card {
  grid-column: 1;
  margin-left: 0;
  margin-right: calc(var(--s-16) * -1);
}
.feature__card h2 { font-size: var(--fs-3xl); letter-spacing: -.035em; line-height: 1.12; }
.feature__card p { margin-top: var(--s-4); font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--c-ink-600); }
.feature__eyebrow {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: var(--c-brand-050);
  color: var(--c-brand-700);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feature__list { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.feature__list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
}
.feature__list li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 7px;
  border-radius: 2px;
  background: var(--c-brand-500);
}
.feature__actions { margin-top: var(--s-5); display: flex; flex-direction: column; align-items: flex-start; }
.feature--highlight .feature__card {
  border-top: 0;
  box-shadow: var(--sh-lg), inset 0 4px 0 var(--c-brand-600);
}

/* --------------------------------------------------------------------------
   Noticias
   -------------------------------------------------------------------------- */
.news__brand { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.04em; }
.news__brand b { color: var(--c-ink-400); font-weight: 800; }
.news__lead { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-500); }
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-6);
  max-width: 1440px;
}
.news-card {
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-xl);
  background: var(--c-white);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.news-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.news-card:hover .news-card__media img { transform: scale(1.05); }
.news-card__media { aspect-ratio: 16 / 9; background: var(--c-ink-100); overflow: hidden; }
.news-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.news-card__body { padding: var(--s-6); }
.news-card__body h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: -.02em; }
.news-card__body .action-link { margin-top: var(--s-4); font-size: var(--fs-sm); }
.news__more { margin-top: var(--s-6); text-align: center; }

/* --------------------------------------------------------------------------
   Barra de pestañas (radar y directorio)
   -------------------------------------------------------------------------- */
.tabbar {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-6);
  border-bottom: 1px solid var(--c-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button {
  position: relative;
  padding-block: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink-500);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.tabbar button:hover { color: var(--c-ink-800); }
.tabbar button[aria-selected="true"] { color: var(--c-ink-900); }
.tabbar button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--c-brand-600);
}
.tabbar--sub {
  border-bottom: 0;
  margin-top: var(--s-3);
  gap: var(--s-4);
}
.tabbar--sub button { padding-block: var(--s-2); font-size: var(--fs-xs); font-weight: 650; }
.tabbar--sub button[aria-selected="true"]::after { height: 2px; bottom: 0; background: var(--c-ink-900); }

/* --------------------------------------------------------------------------
   Directorio por provincia y municipio
   -------------------------------------------------------------------------- */
.directory__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-8);
  align-items: start;
  margin-top: var(--s-6);
}
.directory__group { break-inside: avoid; margin-bottom: var(--s-6); }
.directory__group h3 {
  font-size: var(--fs-md);
  color: var(--c-brand-700);
  margin-bottom: var(--s-3);
}
.directory__item {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-2);
}
.directory__count {
  flex: 0 0 62px;
  text-align: right;
  color: var(--c-ink-600);
  font-variant-numeric: tabular-nums;
}
.directory__item a { color: var(--c-link); }
.directory__item a:hover { text-decoration: underline; }
.directory__sub { padding-left: 74px; font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.directory__sub::before { content: "\2514 "; color: var(--c-ink-300); }
.directory__sub a { color: var(--c-link); }
.directory__sub a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Granja de enlaces (tres columnas)
   -------------------------------------------------------------------------- */
.linkfarm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
}
.linkfarm h2 { font-size: var(--fs-xl); margin-bottom: var(--s-5); }
.linkfarm li { margin-bottom: var(--s-3); font-size: var(--fs-md); }
.linkfarm a { color: var(--c-link); }
.linkfarm a:hover { text-decoration: underline; }
.linkfarm .is-current { color: var(--c-ink-400); }

/* --------------------------------------------------------------------------
   Pie claro
   -------------------------------------------------------------------------- */
.footer-light {
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-12) var(--s-8);
  color: var(--c-ink-700);
}
.footer-light__top {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}
.footer-light__top .brand__name { color: var(--c-ink-900); }
.footer-light__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
}
.footer-light h3 {
  font-size: var(--fs-md);
  color: var(--c-ink-500);
  margin-bottom: var(--s-4);
}
.footer-light li { margin-bottom: var(--s-3); font-size: var(--fs-sm); }
.footer-light a { color: var(--c-link); }
.footer-light a:hover { text-decoration: underline; }

.footer-light__note {
  font-size: var(--fs-sm);
  color: var(--c-ink-600);
  max-width: 34ch;
  margin-bottom: var(--s-2);
}

.social-list--dark a { background: var(--c-ink-200); color: var(--c-ink-800); }
.social-list--dark a:hover { background: var(--c-brand-600); color: var(--c-white); }

.footer-light__legal {
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--c-ink-500);
}
.footer-light__legal nav { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-left: auto; }

/* --------------------------------------------------------------------------
   Fichero de inquilinos morosos
   -------------------------------------------------------------------------- */
.service-hero {
  background: linear-gradient(140deg, var(--c-brand-900), var(--c-brand-700) 62%, var(--c-brand-600));
  color: var(--c-white);
  padding-block: var(--s-12);
}
.service-hero h1 { color: var(--c-white); font-size: clamp(26px, 3.2vw, 38px); max-width: 20ch; }
.service-hero p { color: rgba(255,255,255,.82); margin-top: var(--s-4); max-width: 62ch; font-size: var(--fs-lg); }
.service-hero__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-10); align-items: center; }
.service-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.service-hero__stat {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.service-hero__stat b { display: block; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; }
.service-hero__stat span { font-size: var(--fs-xs); color: rgba(255,255,255,.72); }

.service-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-8); }
.service-tab {
  display: grid;
  gap: var(--s-2);
  text-align: left;
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.service-tab:hover { border-color: var(--c-ink-300); }
.service-tab[aria-selected="true"] {
  border-color: var(--c-brand-600);
  box-shadow: 0 0 0 1px var(--c-brand-600);
  background: var(--c-brand-050);
}
.service-tab b { font-size: var(--fs-md); }
.service-tab span { font-size: var(--fs-sm); color: var(--c-ink-500); }

.query-result {
  margin-top: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  overflow: hidden;
}
.query-result__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  color: var(--c-white);
}
.query-result--clear .query-result__head { background: var(--c-brand-600); }
.query-result--debt .query-result__head { background: var(--c-accent); }
.query-result--unknown .query-result__head { background: var(--c-ink-600); }
.query-result__head b { font-size: var(--fs-lg); display: block; }
.query-result__head span { font-size: var(--fs-sm); opacity: .9; }
.query-result__body { padding: var(--s-5); background: var(--c-white); }

.step-list { counter-reset: step; display: grid; gap: var(--s-4); }
.step-list li {
  counter-increment: step;
  position: relative;
  padding-left: var(--s-10);
  font-size: var(--fs-md);
  color: var(--c-ink-700);
}
.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  background: var(--c-brand-050);
  color: var(--c-brand-800);
  display: grid; place-items: center;
  font-size: var(--fs-sm);
  font-weight: 750;
}
.step-list li b { display: block; color: var(--c-ink-900); }

.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.plan {
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  background: var(--c-white);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.plan--featured { border-color: var(--c-brand-600); box-shadow: var(--sh-md); }
.plan__price { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.03em; color: var(--c-ink-900); }
.plan__price small { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-500); }
.plan ul { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.plan li { display: flex; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-700); }
.plan li svg { color: var(--c-brand-600); flex-shrink: 0; }
.plan .btn { margin-top: auto; }