/* Ajustes de la plantilla Nido para castellano.
 *
 * El tema pone `text-transform: capitalize` en varios títulos porque en inglés los títulos se
 * escriben con cada palabra en mayúscula. En castellano no: sólo va mayúscula la primera palabra
 * (y los nombres propios). Sin esto se lee "Detalle De La Propiedad" o "Últimas Publicadas".
 *
 * Va en un archivo aparte y NO tocando nido.css, que es el bundle vendorizado del template: así se
 * puede regenerar el bundle sin perder estos ajustes. Se carga después, en (sitio)/layout.tsx.
 */
.box-title .title,
.single-property-element .title,
.box-service .content .title,
.map-listing-item .content .title,
.flat-blog-item .content-box .title,
.sidebar-blog .recent .recent-post-item .content .title,
.tf-faq .title {
  text-transform: none;
}

/* Tipografía del tema (ver src/lib/sitioPublico/tema.ts).
 *
 * El template usa una sola familia para todo, así que para poder ofrecer PARES (una para títulos y
 * otra para el texto, como pide el spec) hace falta esta regla: el cuerpo lo cambia la variable
 * --nido-fuente, que ya está metida dentro del bundle, y los títulos los cambia ésta. Si la agencia
 * no eligió un par, las dos variables quedan sin definir y manda el diseño original. */
h1, h2, h3, h4, h5, h6, .title, .title-large {
  font-family: var(--nido-fuente-titulo, var(--nido-fuente, Manrope)), sans-serif;
}

/* La pregunta del acordeón, igual que los títulos: el tema la capitaliza palabra por palabra
 * ("¿Qué Papeles Necesito Para Alquilar?"), que en castellano está mal. */
.box-faq .faq-item .faq-header {
  text-transform: none;
}

/* El acordeón del template es un <a>; acá es un <button> para que se pueda usar con el teclado sin
 * inventar roles. Un botón trae fondo, borde y ancho propios del navegador, así que se los sacamos
 * para que quede exactamente como el <a> del tema. */
.box-faq .faq-item button.faq-header {
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
}

/* Video de fondo de la portada (ver src/lib/sitioPublico/familias/nido/Hero.tsx).
 *
 * Va detrás de todo lo de la portada: el overlay del tema y el contenido tienen z-index propio, así
 * que alcanza con mandarlo al fondo y taparlo con el mismo overlay que oscurece la foto.
 *
 * En pantallas chicas se esconde y queda el poster —que es la foto de la portada—: reproducir un
 * video decorativo en un celular es batería y datos a cambio de nada. */
.nido-video-portada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

@media (max-width: 767px) {
  .nido-video-portada {
    display: none;
  }
}

/* Fondo por defecto de la portada.
 *
 * Las fotos de fondo que trae el template son placeholders GRISES: ThemeForest saca del paquete las
 * imágenes con licencia (ver README-build.md). Así que una agencia que todavía no subió su foto
 * veía un rectángulo gris, que es peor que no tener foto.
 *
 * En vez de meter una foto de banco —que hay que licenciar y que igual no le va a quedar bien a
 * todas— el fondo por defecto es un degradado del COLOR DE MARCA de la agencia. Se ve intencional,
 * no necesita licencia de nadie, y cambia solo cuando la agencia cambia su color.
 *
 * Cuando la agencia sube su foto, la sección lleva `.nido-fondo-propio` (abajo) y la foto le gana a
 * esto. */
.flat-slider.home-1,
.flat-slider.home-3,
.flat-slider.home-5 {
  background-image: linear-gradient(135deg, var(--nido-primario, #1563df) 0%, #161e2d 100%);
}

/* La foto propia de la portada, en su versión web (SUP-323): la de 1920 en pantallas grandes y la de
 * 1280 en el celular. Las dos URLs vienen como variables en el estilo de la sección (ver
 * `fondoPropio` en heroes.tsx); va después del degradado de arriba para ganarle con la misma
 * especificidad. */
.flat-slider.nido-fondo-propio {
  background-image: var(--fondo-portada);
}

@media (max-width: 767px) {
  .flat-slider.nido-fondo-propio {
    background-image: var(--fondo-portada-chico);
  }
}


/* Títulos con la etiqueta que les toca por jerarquía y el tamaño de la que tenían (SUP-321 y
 * SUP-112). Para Google, el título de una página es su H1 y los bloques son H2; el template, en
 * cambio, elegía la etiqueta por el tamaño: el título del listado era un h3, el de la ficha también,
 * y los bloques de la ficha h5 y h6. Estas clases repiten lo que el bundle les da a h3, h5 y h6 (lo
 * demás —peso, color, márgenes— es igual para todos los títulos), así que cambiar la etiqueta no
 * cambia nada de lo que se ve. Las clases de Bootstrap (.h3, .h5) no sirven: son otros tamaños. */
.como-h3 {
  font-size: 36px;
  line-height: 44px;
}
.como-h5 {
  font-size: 24px;
  line-height: 30px;
}
.como-h6 {
  font-size: 18px;
  line-height: 25.2px;
}
@media only screen and (max-width: 991px) {
  .como-h3 {
    font-size: 26px;
    line-height: 34px;
  }
  .como-h5 {
    font-size: 18px;
    line-height: 22px;
  }
  .como-h6 {
    font-size: 16px;
    line-height: 23.2px;
  }
}

/* Migas de la ficha (Inicio / Venta / Casas / Gualeguaychú). El bundle centra .breadcrumb porque en
 * el template va dentro de un banner; acá va arriba del título, alineada con él. */
.breadcrumb.migas-ficha {
  justify-content: flex-start;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 21px;
}
.breadcrumb.migas-ficha a {
  color: #5c6368; /* el de .text-variant-1 del bundle */
}
.breadcrumb.migas-ficha a:hover {
  color: var(--nido-primario, #1563df);
}

/* El cartel de una propiedad señada (SUP-312), en la tarjeta y en la ficha. Ámbar oscuro con letra
 * blanca (5:1, AA) y no el color de marca, que es el de "Destacada": no se tienen que confundir. Sin el
 * cambio de color al pasar el mouse que el bundle le pone a todo .flag-tag. */
.flag-tag.cartel-reservada,
.flag-tag.cartel-reservada:hover {
  background-color: #b45309;
  color: #fff;
  cursor: default;
}
.aviso-reservada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
  color: #5c6368;
}