/* Tramontana — Propiedades */
/* Todo acotado a .trp-wrap: no toca el resto del sitio */

.trp-wrap,
.trp-wrap *,
.trp-wrap *::before,
.trp-wrap *::after {
  box-sizing: border-box;
}

.trp-wrap {
  --trp-deep: #0b4f8a;
  --trp-blue: #0f71c4;
  --trp-gold: #f4c955;
  --trp-ink: #122238;
  --trp-soft: #6d7d92;
  --trp-line: #e2e9f1;
  --trp-cols: 3;

  position: relative;
  width: 100%;
  font-family: Montserrat, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.trp-wrap a { text-decoration: none; }
.trp-wrap h3 { margin: 0; }
.trp-wrap ul { margin: 0; padding: 0; list-style: none; }

.trp-i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}


/* pista: grid o carrusel */
.trp-track {
  display: grid;
  grid-template-columns: repeat(var(--trp-cols), minmax(0, 1fr));
  gap: 26px;
}

.trp-es-carrusel .trp-track {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--trp-cols) - 1) * 26px) / var(--trp-cols));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 10px;
  margin: -4px -4px -10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.trp-es-carrusel .trp-track::-webkit-scrollbar { display: none; }
.trp-es-carrusel .trp-card { scroll-snap-align: start; }


/* flechas */
.trp-nav {
  position: absolute;
  top: 118px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--trp-line);
  background: #fff;
  color: var(--trp-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(6, 26, 46, .16);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.trp-nav .trp-i { width: 20px; height: 20px; }
.trp-nav:hover { background: var(--trp-deep); border-color: var(--trp-deep); color: #fff; }
.trp-nav[disabled] { opacity: .32; pointer-events: none; }
.trp-nav--prev { left: -22px; }
.trp-nav--prev .trp-i { transform: rotate(180deg); }
.trp-nav--next { right: -22px; }

.trp-bar {
  height: 3px;
  border-radius: 3px;
  background: var(--trp-line);
  margin-top: 30px;
  overflow: hidden;
}

.trp-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--trp-deep);
  transition: width .2s ease, margin-left .2s ease;
}


/* base de la tarjeta */
.trp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--trp-line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .28s ease, border-color .28s ease;
}

.trp-card:hover {
  box-shadow: 0 20px 44px rgba(6, 26, 46, .14);
  border-color: #cddeee;
}

.trp-media {
  position: relative;
  display: block;
  height: 255px;
  overflow: hidden;
  background: #eef2f6;
}

.trp-ph {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}

.trp-card:hover .trp-ph { transform: scale(1.06); }

.trp-count {
  position: absolute;
  right: 16px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.trp-fav {
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--trp-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.trp-fav:hover { background: #fff; color: #d94a3d; }

.trp-body {
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.trp-meta {
  display: block;
  margin-bottom: 9px;
  color: var(--trp-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}

.trp-body h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.2px;
  margin-bottom: 9px;
}

.trp-body h3 a { color: var(--trp-ink); }
.trp-body h3 a:hover { color: var(--trp-deep); }

.trp-addr {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13.5px;
  color: var(--trp-soft);
  line-height: 1.45;
}

.trp-addr .trp-i { margin-top: 2px; }

.trp-f {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
}

.trp-f li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5c72;
}

.trp-f .trp-i { color: var(--trp-blue); }

/* etiquetas */
.trp-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  background: var(--trp-deep);
}

.trp-tag--rent { background: #128a5e; }
.trp-tag--feat { background: var(--trp-gold); color: #16233a; }

/* las dos etiquetas viven en una fila: se separan solas
   sin importar cuánto mida el texto de cada una */
.trp-tags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 70px);
}

.trp-tags .trp-tag {
  flex: 0 0 auto;
}


/* ESTILO 1 — precio sobre la foto */
.trp-card--1 .trp-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 18, 34, .78) 0%, rgba(4, 18, 34, .12) 40%, transparent 62%);
}

.trp-card--1 .trp-price {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.trp-card--1 .trp-price small { font-size: 13px; font-weight: 600; opacity: .85; }
.trp-card--1 .trp-addr { margin-bottom: 18px; }
.trp-card--1 .trp-f { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--trp-line); }


/* ESTILO 2 — clásico, precio abajo y features con divisores */
.trp-card--2 .trp-labels {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.trp-card--2 .trp-label {
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  line-height: 1.3;
  color: #fff;
  background: var(--trp-deep);
}

.trp-card--2 .trp-label--feat { background: var(--trp-gold); color: #16233a; }
.trp-card--2 .trp-media { height: 230px; }
.trp-card--2 .trp-addr { margin-bottom: 14px; }

.trp-card--2 .trp-price--abajo {
  margin-top: auto;
  font-size: 20px;
  font-weight: 800;
  color: var(--trp-deep);
  letter-spacing: -.4px;
}

.trp-card--2 .trp-price--abajo small { font-size: 13px; font-weight: 600; color: var(--trp-soft); }

.trp-card--2 .trp-f {
  display: flex;
  border-top: 1px solid var(--trp-line);
  gap: 0;
}

.trp-card--2 .trp-f li {
  flex: 1;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 14px 6px;
  border-right: 1px solid var(--trp-line);
  font-size: 12.5px;
  text-align: center;
}

.trp-card--2 .trp-f li:last-child { border-right: 0; }


/* ESTILO 3 — overlay completo */
.trp-card--3 { border: 0; }
.trp-card--3 .trp-media { height: 420px; }

.trp-card--3 .trp-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 18, 34, .92) 0%, rgba(4, 18, 34, .35) 48%, rgba(4, 18, 34, .05) 100%);
}

.trp-card--3 .trp-labels {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.trp-card--3 .trp-tag,
.trp-card--3 .trp-tag--feat { flex: 0 0 auto; }

.trp-card--3 .trp-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: block;
  padding: 26px;
  color: #fff;
}

.trp-card--3 .trp-addr { color: rgba(255, 255, 255, .8); margin-bottom: 8px; }

.trp-card--3 h3 {
  font: 700 22px/1.25 Georgia, "Times New Roman", serif;
  letter-spacing: -.5px;
  margin-bottom: 14px;
  color: #fff;
}

.trp-card--3 .trp-f { margin-bottom: 14px; }
.trp-card--3 .trp-f li { color: rgba(255, 255, 255, .88); }
.trp-card--3 .trp-f .trp-i { color: var(--trp-gold); }

.trp-card--3 .trp-price {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--trp-gold);
  letter-spacing: -.5px;
}


/* responsive */
@media (max-width: 1180px) {
  .trp-wrap { --trp-cols: 2; }
  .trp-nav--prev { left: -14px; }
  .trp-nav--next { right: -14px; }
}

@media (max-width: 767px) {
  .trp-wrap { --trp-cols: 1; }
  .trp-track { gap: 16px; }
  .trp-es-carrusel .trp-track { grid-auto-columns: 88%; gap: 16px; }
  .trp-nav { display: none; }
  .trp-media { height: 220px; }
  .trp-card--3 .trp-media { height: 340px; }
}


/* ---------- encabezado de sección ---------- */
/* Selectores con especificidad alta: Houzez pisa h2 y button */

.trp-sec {
  width: 100%;
  font-family: Montserrat, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.trp-sec .trp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px 40px;
  margin-bottom: 48px;
}

.trp-sec .trp-head__txt {
  max-width: 760px;
  flex: 1 1 420px;
}

.trp-sec .trp-head .trp-tabs { flex: 0 0 auto; }

.trp-sec span.trp-eyebrow {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  color: #0b4f8a;
  font-family: Montserrat, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.trp-sec h2.trp-titulo {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.3px;
  text-transform: none;
  color: #122238;
}

.trp-sec p.trp-bajada {
  margin: 16px 0 0;
  padding: 0;
  font-family: Montserrat, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  text-transform: none;
  color: #4f5f73;
}


/* ---------- pestañas ---------- */

.trp-sec .trp-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 0;
  border-radius: 6px;
  background: #e6edf5;
}

.trp-sec .trp-tabs button.trp-tab {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 12px 24px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #64748b;
  font-family: Montserrat, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.trp-sec .trp-tabs button.trp-tab:hover {
  background: rgba(255, 255, 255, .6);
  color: #0b4f8a;
}

.trp-sec .trp-tabs button.trp-tab[aria-selected="true"] {
  background: #0b4f8a;
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 79, 138, .26);
}


/* ---------- estado de carga ---------- */

.trp-wrap { position: relative; }

.trp-cargando {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(2px);
  border-radius: 8px;
}

.trp-cargando[hidden] { display: none; }

.trp-cargando span {
  width: 34px;
  height: 34px;
  border: 3px solid #dbe4ee;
  border-top-color: #0b4f8a;
  border-radius: 50%;
  animation: trp-giro .7s linear infinite;
}

@keyframes trp-giro { to { transform: rotate(360deg); } }

.trp-track { transition: opacity .2s ease; }
.trp-wrap.is-cargando .trp-track { opacity: .4; }


@media (max-width: 991px) {
  .trp-sec h2.trp-titulo { font-size: 38px; letter-spacing: -.9px; }
  .trp-sec .trp-head { margin-bottom: 34px; }
}

@media (max-width: 767px) {
  .trp-sec h2.trp-titulo { font-size: 30px; letter-spacing: -.6px; }
  .trp-sec p.trp-bajada { font-size: 15px; }
  .trp-sec .trp-tabs button.trp-tab { padding: 10px 16px; font-size: 11.5px; }
}