body{line-height:1.35;color:var(--color-ink-dark)}

.hero{
  position:relative;
  min-height:calc(100vh - var(--nav-h));
  padding-top:var(--nav-h);
  color:var(--white);
  background:url("/static/resources/images/home/hero.jpg") center 22%/cover no-repeat
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%),
    linear-gradient(to bottom,rgba(0,0,0,0) 55%,rgba(0,0,0,.75) 100%)
}
.hero>*{position:relative;z-index:1}
.hero-head{
  min-height:52vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 1rem;
  row-gap:1rem;
  transform:translateY(2vh)
}
.hero-head h1{font-family:var(--font-articulat);font-weight:700;font-size:clamp(1.625rem,6vw,2.875rem);line-height:1.18}
.hero-head h2{font-family:var(--font-ezra);text-transform:uppercase;font-size:clamp(1rem,3.2vw,2.25rem);margin-top:1.25rem}
.hero-bottom{
  display:flex;
  flex-direction:column;
  gap:.875rem;
  align-items:center;
  justify-content:center;
  margin-bottom:3.125rem;
  padding-inline:1rem
}
.hero-note{font-size:.8125rem;opacity:.75;max-width:38ch;text-align:center}
.cta{
  display:inline-block;
  padding:.625rem 1.125rem;
  border-radius:999px;
  border:.0625rem solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.06);
  color:var(--white);
  box-shadow:0 .75rem 1.75rem rgba(0,0,0,.28)
}
.cta:hover{background:rgba(255,255,255,.14)}

.beliefs{
  --gap:2rem;
  --radius:1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  align-items:stretch;
  padding:1.75rem var(--gutter) .5rem
}
.beliefs-media{position:relative}
.beliefs-media .team-photo{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow)
}
.beliefs-media .seal{
  position:absolute;
  right:.9rem;
  bottom:.9rem;
  width:4.875rem;
  transform:rotate(-10deg);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));
  pointer-events:none;
  z-index:2
}
.beliefs-content{display:flex;flex-direction:column;min-height:100%}
.beliefs-content h2{font-size:clamp(1.625rem,5.2vw,2.25rem);line-height:1.12;margin:0 0 .5rem}
.beliefs-list{list-style:none;display:grid;gap:1rem;margin:.5rem 0 0;padding:0;flex-grow:1}
.beliefs-list li{display:grid;grid-template-columns:2rem 1fr;gap:.625rem;align-items:start}
.beliefs-list .icon{width:1.75rem;height:1.75rem;object-fit:contain}
.beliefs-list h3{font-size:.95rem}
.beliefs-list p{font-size:.9rem;opacity:.9;margin-bottom:1.25rem}
.blurb{margin-top:auto;font-style:italic;font-size:.9rem}

.projects{
  background:var(--color-ivory-soft);
  padding:.625rem 0 0;
  margin-top:clamp(1.5rem,6vw,4rem)
}
.projects-title{
  text-align:center;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--color-ink-dark);
  font-size:2rem;
  margin-bottom:1rem
}
.intro{text-align:center;margin:0 0 clamp(1rem,3vw,1.75rem)}
.intro h3{font-size:clamp(1rem,1.6vw,1.125rem);color:var(--color-ink-dark)}

.filters{
  --pill-bg:var(--color-sand);
  --pill-br:2.5rem;
  --gap:.75rem;
  width:100%;
  margin:.75rem 0 clamp(1.125rem,3vw,2rem);
  padding:.75rem;
  background:var(--pill-bg);
  border-radius:var(--pill-br);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap)
}
.select,.range{display:flex;flex-direction:column;gap:.375rem}
.select label,.range label{font-size:.75rem;opacity:.8;text-align:left;padding-left:.5rem}
.select{position:relative}
.select select{
  width:100%;
  padding:.75rem 2.25rem .75rem 1rem;
  border-radius:999px;
  border:.0625rem solid #d0c5a8;
  background:var(--white);
  color:var(--color-ink-dark);
  font-size:1rem;
  line-height:1.2;
  -webkit-appearance:none;
  appearance:none
}
.select::after{
  content:"";
  position:absolute;
  right:1rem;
  top:50%;
  width:1.5rem;
  height:1.5rem;
  transform:translateY(-50%);
  pointer-events:none;
  background:currentColor;
  color:var(--color-ink-dark);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6.23 8.81a1 1 0 0 1 1.41 0L12 13.17l4.36-4.36a1 1 0 0 1 1.41 1.41l-5.06 5.07a1 1 0 0 1-1.41 0L6.23 10.22a1 1 0 0 1 0-1.41z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6.23 8.81a1 1 0 0 1 1.41 0L12 13.17l4.36-4.36a1 1 0 0 1 1.41 1.41l-5.06 5.07a1 1 0 0 1-1.41 0L6.23 10.22a1 1 0 0 1 0-1.41z'/></svg>") center/contain no-repeat
}
.select select:focus-visible{
  outline:.125rem solid color-mix(in srgb,var(--color-olive),white 30%);
  outline-offset:.125rem;
  border-color:var(--color-olive)
}
.range-wrap{display:flex;align-items:center;gap:.625rem}
.range .min,.range .max{font-size:.75rem;opacity:.8}
.range input[type=range]{
  --min:0;
  --max:100;
  --val:50;
  width:100%;
  height:.5rem;
  border-radius:999px;
  background:var(--color-olive);
  -webkit-appearance:none;
  appearance:none;
  outline:none
}
.range input[type=range]::-webkit-slider-runnable-track{height:.5rem;border-radius:999px;background:transparent}
.range input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:1.125rem;
  height:1.125rem;
  border-radius:50%;
  background:var(--white);
  border:.125rem solid var(--color-olive);
  box-shadow:0 .0625rem .1875rem rgba(0,0,0,.18);
  margin-top:calc((.5rem - 1.125rem)/2)
}
.range input[type=range]::-moz-range-track{height:.5rem;border-radius:999px;background:transparent}
.range input[type=range]::-moz-range-progress{height:.5rem;border-radius:999px;background:var(--color-olive)}
.range input[type=range]::-moz-range-thumb{
  width:1.125rem;
  height:1.125rem;
  border-radius:50%;
  background:var(--white);
  border:.125rem solid var(--color-olive);
  box-shadow:0 .0625rem .1875rem rgba(0,0,0,.18)
}

.projects-grid{
  display:grid;
  gap:1.125rem;
  grid-template-columns:1fr;
  padding:0 var(--gutter) 1rem
}
.projects article a img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.75rem;margin-bottom:.5rem}
.projects-grid h3{font-size:1.125rem;font-weight:600;color:var(--color-ink-dark)}
.projects-grid p{font-size:1rem;opacity:.85;color:var(--color-sangria);margin-top:.25rem}

.corporate{text-align:center;padding:1.375rem var(--gutter) 1.75rem}
#logo-inmobiliaria{width:11.25rem;height:auto;margin:0 auto}
.corporate .tagline{font-size:.75rem;letter-spacing:.12em;margin:.75rem auto .625rem;font-family:var(--font-ezra);color:var(--color-olive-dark)}
.corporate blockquote{font-size:.8125rem;max-width:38ch;margin:0 auto .875rem}
.corporate img{width:2.75rem;height:2.75rem;margin:0 auto}

.quote-section{margin-top:0}
.quote-grid{display:grid;grid-template-columns:1fr}
.quote-media{position:relative;min-height:15rem}
.quote-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block
}
.quote-form{
  background:var(--color-olive-dark);
  color:var(--white);
  padding:1.125rem 1rem 1.375rem;
  display:flex;
  flex-direction:column;
  gap:.875rem
}
.quote-form h2{font-size:1.125rem;font-weight:600;color:var(--color-cream-light)}
.q-row{display:grid;grid-template-columns:1fr;gap:.75rem}
.q-full{display:block}
.quote-form label{display:flex;flex-direction:column;gap:.5rem;font-size:.75rem;color:#eee9d7}
.quote-form input{
  height:2.75rem;
  border-radius:.5rem;
  border:.0625rem solid rgba(255,255,255,.25);
  background:var(--white);
  color:var(--color-ink-dark);
  padding:0 .75rem;
  font-size:.875rem
}
.q-cta{
  height:3rem;
  border-radius:.5rem;
  border:none;
  cursor:pointer;
  background:var(--color-cream-light);
  color:var(--color-ink-dark);
  font-weight:700;
  letter-spacing:.12em;
  font-family:var(--font-articulat);
  font-size:1rem
}
.q-cta:hover{filter:brightness(.96)}
.q-note{font-size:.625rem;color:var(--color-sand)}

@media (min-width:26.25rem){
  .filters{grid-template-columns:1fr 1fr}
  .filters .range{grid-column:1/-1}
}

@media (min-width:48rem){
  .hero{background-position:center 30%}
  .hero-note{font-size:1.25rem}
  .hero-inner{display:grid;place-items:center;margin:3.125rem 5rem 0}

  .beliefs{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .beliefs-media,.beliefs-content{height:100%}
  .beliefs-media{display:flex}
  .beliefs-media .team-photo{height:100%;width:100%;aspect-ratio:auto;object-fit:cover}
  .beliefs-media .seal{right:1rem;bottom:1rem;width:6rem}

  .projects-title{font-size:2rem;margin-bottom:.75rem}
  .projects-grid{grid-template-columns:repeat(2,1fr);gap:1.375rem}
}

@media (min-width:64rem){
  .hero{background-position:center 42%}
  .hero-head{min-height:50vh;transform:translateY(2.5vh)}
  .hero-bottom{flex-direction:row;gap:25rem;margin-bottom:clamp(2.5rem,5vh,5rem);padding-top:3.125rem}
  .hero-note{font-size:1.125rem;max-width:32.5rem;text-align:left}

  .beliefs{gap:2.25rem;padding:3rem var(--gutter)}
  .beliefs-media .team-photo{aspect-ratio:auto;height:31.25rem}
  .beliefs-media .seal{right:1.375rem;bottom:1.375rem;width:8.125rem}
  .beliefs-list{gap:1.75rem}
  .beliefs-list li{grid-template-columns:2.5rem 1fr;gap:.875rem}
  .beliefs-list .icon{width:2.25rem;height:2.25rem}
  .beliefs-list h3{font-size:1.25rem}
  .beliefs-list p{font-size:1rem}

  .filters{
    width:min(100% - 2*var(--gutter),55rem);
    margin:.75rem auto 1.75rem;
    gap:1.125rem;
    grid-template-columns:1fr 1fr;
  }
  .filters>*{min-width:0}
  .filters .range{grid-column:auto}
  .select{min-width:12.5rem}
  .range{min-width:18.5rem}

  .projects-title{font-size:3.375rem;margin-bottom:1.125rem}
  .projects-grid{
    grid-template-columns:repeat(3,1fr);
    gap:1.75rem;
    width:min(100%,var(--max));
    margin:0 auto;
    padding-inline:var(--gutter);
    padding-bottom:0
  }
  .projects-grid article:nth-child(n+4){margin-top:.375rem}

  .corporate{padding:6.25rem var(--gutter)}
  #logo-inmobiliaria{width:18.75rem}
  .corporate .tagline{font-size:1.8125rem}
  .corporate blockquote{font-size:1.875rem;max-width:45rem;margin-bottom:1.75rem}
  .corporate img{width:4.4375rem;height:4.4375rem}

  .quote-grid{grid-template-columns:45% 55%;align-items:stretch}
  .quote-form{padding:1.5rem 1.75rem;gap:1.125rem}
  .quote-form h2{font-size:3rem;margin:.5rem 1.875rem}
  .q-row{grid-template-columns:1fr 1fr;gap:2rem;margin:0 1.875rem}
  .q-full{margin:0 1.875rem}
  .quote-form label{font-size:1rem}
  .q-cta{margin:.625rem 1.875rem;height:3.5rem;font-size:1.375rem}
  .q-note{margin:0 1.875rem;font-size:.75rem}
}

@media (max-width:47.99rem){
  .blurb{text-align:center;font-size:.875rem}
}

.project-card img{
  display:block;
  width:100%;
  height:auto;
  transition:filter .3s ease
}
.project-card:hover img{filter:brightness(.8)}

.quote-form input.is-invalid{
  border-color:#d07653!important;
  box-shadow:0 0 0 3px rgba(198,40,40,.12)
}
.quote-form .field-error{margin-top:6px;font-size:13px;line-height:1.3;color:#d07653}



/* Estilo de foco igual al form de contacto */
.quote-form input:focus,
.quote-form textarea:focus {
    outline: none;
    border-color: var(--color-ivory-soft); /* gris/beige suave */
    box-shadow: 0 0 0 2px rgba(106, 100, 78, 0.25); /* sombra beige */
}



/* Mobile: filtros apilados (2 filas, 1 columna) */
@media (max-width: 47.99rem) {
  .filters{
    grid-template-columns: 1fr;   /* antes eran 2 columnas */
    gap: .75rem;                  /* separación vertical cómoda */
    border-radius: 1.5rem;        /* un poco menos “ovalado” en mobile (opcional) */
  }
}