/* Estilos propios de la home (views/home.hbs) agregados con la optimización SEO/conversión.
   Reutiliza style.css (hero, buscador, testimonios) y seo-components.css (.seo-section, .btn, .cta-band, .faq-list). */

/* ---------- Hero ---------- */
.home-hero .heading {
  width: auto;
  font-size: clamp(2em, 3.4vw, 2.6em);
}
.home-hero .titulos-container { grid-row-gap: .8em; padding-right: 1.5em; }
.hero-marca {
  margin: 0;
  color: var(--color1);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: .01em;
}
.home-hero .paragraph-1 { margin: 0; }

/* Pestañas del buscador: botones con el mismo aspecto que los <li> originales. */
.operation-input ul li { list-style: none; }
.operation-input ul li button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.home-hero .div-block { margin: 0; }
.home-hero .link-block { border: 0; cursor: pointer; font-family: inherit; }
.home-hero .input-container select { cursor: pointer; }
.home-hero .o-container label { cursor: pointer; }
.home-hero .ref-input-container { margin: 0; }
.home-hero .ref-input-container input { width: 11em; }
.home-hero .ref-input-container button { cursor: pointer; }

/* La columna izquierda del hero queda centrada verticalmente respecto de la foto
   (style.css le da height: 100% y el contenido se pegaba arriba). */
.home-hero .div-block-89 { align-self: center; }
.home-hero .div-block-5 { height: auto; max-height: none; justify-content: center; }

.home-hero picture { display: contents; }

/* ---------- Propiedades destacadas ---------- */
.home-destacadas { padding-top: 2em; }
/* El <header> ahora reserva el alto del menú fijo (seo-components.css): se descuenta del margen del hero. */
.home-hero .container-0 { margin-top: 50px; }
@media (max-width: 767px) { .home-hero .container-0 { margin-top: 75px; } }
/* La tarjeta (views/partials/property-card.hbs) usa anchos fijos pensados para el carrusel viejo;
   dentro de la grilla se adapta al ancho de la columna. */
.home-destacadas .titulo-propiedades-descatacads p { margin: 0; }
.home-aviso { margin: 0; }
.home-aviso a { color: var(--color1); }
.home-mas-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* Las secciones nuevas se alinean con el ancho de .container-2 (1100px) del resto de la home. */
.home-tipos, .home-nosotros, .home-faq, .home-banda {
  max-width: 1100px;
  padding-left: 1em;
  padding-right: 1em;
  box-sizing: border-box;
}

/* ---------- Tipos de propiedad (links a las landings) ---------- */
.home-tipos-lista {
  list-style: none;
  padding: 0 !important;
  margin: 20px 0 0;
  max-width: none !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16em), 1fr));
  gap: 14px;
}
.home-tipo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.home-tipo:hover, .home-tipo:focus-visible {
  border-color: var(--color1);
  box-shadow: 0 4px 16px rgba(25, 77, 125, .12);
}
.home-tipo-nombre { font-weight: 700; color: var(--color1); }
.home-tipo-cantidad { font-size: .9em; color: #4a5a6a; }

/* ---------- Bandas de llamado a la acción ---------- */
.home-banda {
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 24px;
}
.home-banda .cta-band > div:first-child { flex: 1 1 28em; }
.home-banda .cta-band h2 { font-size: 1.5em; line-height: 1.25; margin-bottom: 8px; }
.home-banda .cta-band p { max-width: 60ch; line-height: 1.6; }
.home-banda-final { padding-bottom: 56px; }

/* ---------- Nosotros / texto SEO ---------- */
.home-nosotros-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.home-etiqueta {
  display: inline-flex;
  margin-bottom: 16px;
}
.home-nosotros-texto ul { margin: 0 0 14px; }
.home-nosotros-texto li { margin-bottom: 8px; }
.home-oficina {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 1.8em rgba(0, 0, 0, .09);
  position: sticky;
  top: 120px;
}
.home-oficina-foto {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 20%;
}
.home-oficina-datos { padding: 18px 20px 22px; font-size: .95em; }
.home-oficina-datos address { font-style: normal; margin-bottom: 8px; }
.seo-section .home-oficina-titulo { font-weight: 700; color: var(--color1); margin: 0 0 6px; }
.seo-section .home-oficina-horarios { margin: 0 0 10px; color: #4a5a6a; }
.home-oficina-contacto {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 16px;
}
.home-oficina-contacto li { margin-bottom: 4px; }
.home-oficina-contacto a { word-break: break-word; }

/* ---------- Reseñas ---------- */
.home-resenas .testimonios-container { gap: 16px; }
.home-resenas .testimonio { flex: 1 1 0; min-width: 14em; }
.home-resenas .home-resenas-resumen { margin: 0; font-size: 1em; }
.home-resenas .home-resenas-resumen a { color: var(--color1); font-weight: 600; }
.home-estrellas {
  color: #f4b400;
  font-size: 1.25em;
  letter-spacing: 2px;
  line-height: 1;
}
.home-estrella-vacia { color: #d0d7de; }

/* ---------- Preguntas frecuentes ---------- */
.home-faq { padding-top: 16px; }

@media screen and (max-width: 991px) {
  /* Sin la imagen (oculta en style.css) el bloque del hero queda centrado. */
  .home-hero .container-0 { justify-content: center; padding-left: 1.5em; padding-right: 1.5em; }
  .home-hero .div-block-89 { width: 100%; }
  .home-hero .div-block-5 { max-width: 40em; margin: 0 auto; }
  .home-hero .titulos-container { align-items: center; text-align: center; }
  .home-nosotros-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-oficina { position: static; max-width: 560px; }
}

@media screen and (max-width: 767px) {
  .home-hero .container-0 { padding-left: 0; padding-right: 0; }
  .home-destacadas .container-2.propiedades { padding-bottom: 1.5em; }
  .home-mas-links .btn { width: 100%; box-sizing: border-box; text-align: center; }
  .home-banda { padding-top: 16px; padding-bottom: 16px; }
  .home-banda .cta-actions, .home-banda .cta-actions .btn { width: 100%; box-sizing: border-box; }
  .home-oficina-foto { height: 220px; }
  .home-tipos-lista { gap: 10px; }
  .home-tipo { padding: 12px 14px; gap: 2px; }
}

@media screen and (max-width: 479px) {
  .hero-marca { font-size: .9em; }
  .home-hero .ref-input-container input { width: 8em; }
}

/* ---------- Cifras de confianza (franja debajo del hero) ---------- */
.home-confianza {
  background: #fff;
  border-top: 1px solid #e3eaf2;
  border-bottom: 1px solid #e3eaf2;
  margin-top: 2.5em;
}
.home-confianza-lista {
  list-style: none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.75em 1em;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25em;
  text-align: center;
  font-family: var(--fuente), sans-serif;
}
.home-confianza-lista li { display: flex; justify-content: center; }
.home-confianza-lista li,
.home-confianza-google {
  flex-direction: column;
  align-items: center;
  gap: .25em;
}
.home-confianza-google { display: flex; text-decoration: none; color: inherit; }
.home-confianza-valor {
  font-size: 2.25em;
  font-weight: 700;
  line-height: 1.1;
  color: #0f0f0f;
  font-variant-numeric: tabular-nums;
}
.home-confianza-google .home-confianza-valor { color: var(--color1); }
.home-confianza-texto { color: #636363; font-size: .95em; }
.home-confianza-google:hover .home-confianza-texto,
.home-confianza-google:focus-visible .home-confianza-texto { text-decoration: underline; }

@media (max-width: 767px) {
  .home-confianza { margin-top: 0; } /* .container-0 ya deja 3em debajo del buscador */
  .home-confianza-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.5em 1em; gap: 1.25em .75em; }
  .home-confianza-valor { font-size: 1.8em; }
  .home-confianza-texto { font-size: .85em; }
}