/* Finques Torrent — inmobiliaria de Vilanova i la Geltrú, fundada en 1988.
   Ejemplo ficticio de Consult·IT.

   Idea de diseño opuesta a la del hotel: aquí nadie viene a soñar, viene a
   filtrar. El buscador manda desde el primer píxel y las fichas van cargadas
   de datos (referencia, m², habitaciones, certificado energético) porque es
   exactamente lo que se compara. Palo seco, mucha retícula, cero fotos a
   sangre gigantes. */

@font-face { font-family: 'Manrope'; src: url('/ejemplos/inmobiliaria-torrent/fonts/manrope-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/ejemplos/inmobiliaria-torrent/fonts/manrope-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/ejemplos/inmobiliaria-torrent/fonts/manrope-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --tinta: #0F1B2D;
  --tinta-2: #46566E;
  --gris: #7A899E;
  --linea: #DCE3EC;
  --fondo: #F4F6F9;
  --verde: #0E7A5F;
  --verde-osc: #0A5C47;
  --ambar: #B8600C;
  --radio: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.65; color: var(--tinta); background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }

.envoltorio { width: min(1220px, 92vw); margin-inline: auto; }

.aviso { background: var(--tinta); color: #C7D3E4; text-align: center; font-size: 13px; padding: 11px 18px; }
.aviso a { color: #fff; }

/* ── Barra superior de servicio + cabecera ──────────────── */
.barra-superior {
  background: var(--tinta); color: #B9C6D9; font-size: 13.5px;
}
.barra-superior .envoltorio { display: flex; gap: 26px; padding: 9px 0; }
.barra-superior strong { color: #fff; font-weight: 600; }
.barra-superior .derecha { margin-left: auto; display: flex; gap: 22px; }
.barra-superior a { text-decoration: none; }

.cabecera { border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: #fff; z-index: 40; }
.cabecera .envoltorio { display: flex; align-items: center; gap: 34px; padding: 18px 0; }
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-marca {
  width: 38px; height: 38px; border-radius: 8px; background: var(--verde);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px;
}
.logo b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.logo b + span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }

.nav { margin-left: auto; display: flex; gap: 26px; list-style: none; font-size: 15px; font-weight: 600; }
.nav a { text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nav a:hover { border-color: var(--verde); }
.btn { display: inline-block; background: var(--verde); color: #fff; text-decoration: none; font-weight: 600; padding: 11px 20px; border-radius: var(--radio); font-size: 15px; border: 0; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--verde-osc); }
.btn-linea { background: #fff; color: var(--tinta); border: 1.5px solid var(--linea); }
.btn-linea:hover { background: var(--fondo); border-color: var(--gris); }

/* ── Hero-buscador ──────────────────────────────────────
   Foto de fondo discreta, oscurecida: el protagonista es el formulario. */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,27,45,.92) 24%, rgba(15,27,45,.55)); }
.hero .envoltorio { position: relative; z-index: 2; padding: 66px 0 74px; }
.hero h1 { font-size: clamp(31px, 4vw, 45px); max-width: 720px; }
.hero p.lema { margin-top: 14px; font-size: 18px; color: #BCCADD; max-width: 620px; }

.buscador { margin-top: 32px; background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 18px 44px rgba(6,14,26,.34); }
.pestanas { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 4px 10px; }
.pestanas button {
  font: inherit; font-weight: 600; font-size: 14.5px; border: 0; cursor: pointer;
  background: transparent; color: var(--gris); padding: 8px 18px; border-radius: 8px;
}
.pestanas button[aria-selected="true"] { background: var(--fondo); color: var(--tinta); }
.campos { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr auto; gap: 8px; }
.campo { background: var(--fondo); border-radius: 8px; padding: 10px 14px; }
.campo label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.campo select, .campo input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--tinta); padding-top: 2px; }
.campos .btn { padding-inline: 30px; }

.atajos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; position: relative; z-index: 2; font-size: 14px; }
.atajos span { color: #93A4BA; }
.atajos a { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 100px; padding: 5px 14px; text-decoration: none; color: #E4EBF4; }
.atajos a:hover { background: rgba(255,255,255,.2); }

/* ── Secciones ─────────────────────────────────────────── */
section { padding: 78px 0; }
.titular { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 34px; }
.titular h2 { font-size: clamp(26px, 3vw, 34px); }
.titular p { color: var(--tinta-2); margin-top: 6px; }
.titular a { margin-left: auto; white-space: nowrap; font-weight: 600; color: var(--verde); text-decoration: none; }
.titular a:hover { text-decoration: underline; }

/* Fichas de inmueble */
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ficha { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.ficha:hover { box-shadow: 0 12px 30px rgba(15,27,45,.11); transform: translateY(-3px); }
.ficha .foto { position: relative; }
.ficha .foto img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.etiqueta {
  position: absolute; top: 12px; left: 12px; background: var(--tinta); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 5px;
}
.etiqueta.nueva { background: var(--ambar); }
.etiqueta.bajada { background: var(--verde); }
.ref { position: absolute; bottom: 12px; right: 12px; background: rgba(15,27,45,.82); color: #fff; font-size: 11.5px; padding: 4px 9px; border-radius: 5px; }

.ficha-cuerpo { padding: 18px 20px 20px; }
.ficha-precio { display: flex; align-items: baseline; gap: 10px; }
.ficha-precio strong { font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.ficha-precio s { color: var(--gris); font-size: 15px; }
.ficha h3 { font-size: 17px; margin-top: 4px; }
.ficha .zona { color: var(--gris); font-size: 14.5px; }
.atributos { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--tinta-2); }
.atributos b { font-weight: 800; color: var(--tinta); }
.energia {
  margin-left: auto; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 4px; color: #fff; font-size: 12px; font-weight: 800;
}
.e-a { background: #0E7A5F; } .e-b { background: #4A9E2F; } .e-c { background: #A8B814; }
.e-d { background: #E0A800; } .e-e { background: #E06D00; }

/* Vender: proceso en tres pasos */
.vender { background: var(--fondo); }
.vender .envoltorio { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pasos { list-style: none; margin-top: 28px; counter-reset: p; }
.pasos li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid var(--linea); }
.pasos li::before {
  content: counter(p); width: 34px; height: 34px; border-radius: 50%;
  background: var(--verde); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
}
.pasos b { display: block; }
.pasos span { color: var(--tinta-2); font-size: 15px; }
.tarjeta-valoracion { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 32px; }
.tarjeta-valoracion h3 { font-size: 21px; }
.tarjeta-valoracion p { color: var(--tinta-2); font-size: 15px; margin-top: 8px; }
.formulario { display: grid; gap: 12px; margin-top: 22px; }
.formulario input, .formulario select, .formulario textarea {
  font: inherit; font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--linea);
  border-radius: 8px; background: #fff; color: var(--tinta); width: 100%;
}
.formulario .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formulario small { color: var(--gris); font-size: 12.5px; line-height: 1.5; }

/* Cifras */
.cifras { background: var(--tinta); color: #fff; padding: 54px 0; }
.cifras .envoltorio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cifras strong { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.cifras span { color: #9FB0C6; font-size: 14.5px; }

/* Zonas */
.zonas .envoltorio { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.lista-zonas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 26px; margin-top: 22px; list-style: none; }
.lista-zonas li { padding: 9px 0; border-bottom: 1px solid var(--linea); display: flex; justify-content: space-between; font-size: 15px; }
.lista-zonas span { color: var(--gris); }
.zonas img { border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; }

/* Equipo / oficina */
.oficina { background: var(--fondo); }
.oficina .envoltorio { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.oficina img { border-radius: 14px; aspect-ratio: 3/2; object-fit: cover; }
.oficina p { color: var(--tinta-2); margin-top: 16px; }
.datos-oficina { list-style: none; margin-top: 24px; font-size: 15px; }
.datos-oficina li { padding: 10px 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 130px 1fr; gap: 14px; }
.datos-oficina b { color: var(--gris); font-weight: 600; }

/* Pie */
.pie { background: var(--tinta); color: #9FB0C6; font-size: 14.5px; padding: 64px 0 28px; }
.pie .envoltorio { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; }
.pie h4 { color: #fff; font-size: 15px; font-weight: 800; margin-bottom: 14px; letter-spacing: 0; }
.pie ul { list-style: none; }
.pie li { padding: 3px 0; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; }
.pie .logo b, .pie .logo b + span { color: #fff; }
.legal { margin-top: 46px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; color: #74869E; display: flex; flex-wrap: wrap; gap: 8px 22px; }

@media (max-width: 1040px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos .btn { grid-column: span 2; }
  .vender .envoltorio, .zonas .envoltorio, .oficina .envoltorio { grid-template-columns: 1fr; gap: 40px; }
  .pie .envoltorio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .nav, .barra-superior .derecha { display: none; }
  .rejilla, .cifras .envoltorio, .lista-zonas { grid-template-columns: 1fr; }
  .titular { flex-direction: column; align-items: flex-start; gap: 10px; }
  .titular a { margin-left: 0; }
  section { padding: 56px 0; }
}