﻿/* ===== MOBILE FIRST REFINEMENTS ===== */
:root {
  --padding-x:clamp(1.1rem,5.5vw,1.5rem)
}

html,body {
  width:100%;
  overflow-x:hidden
}

body {
  font-size:16px
}

.cursor,.cursor-ring {
  display:none
}

section {
  padding:5rem var(--padding-x)
}

.section-title {
  font-size:clamp(1.85rem,9.5vw,3rem);
  line-height:1.08;
  margin-bottom:1.15rem
}

.section-label {
  gap:0.75rem;
  margin-bottom:1rem
}

.section-label-text {
  font-size:0.64rem;
  letter-spacing:0.16em
}

nav {
  height:64px;
  padding:0 var(--padding-x);
  grid-template-columns:42px 1fr 42px
}

.nav-left,.nav-right,.nav-cta {
  display:none
}

.nav-logo {
  grid-column:2;
  font-size:1.05rem;
  letter-spacing:0.16em
}

.nav-hamburger {
  grid-column:3;
  display:flex;
  justify-self:end;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px
}

body.mobile-menu-open {
  overflow:hidden
}

.mobile-menu {
  padding:1.25rem var(--padding-x)
}

.mobile-menu.open {
  box-shadow:-24px 0 80px rgba(var(--negro-rgb),0.28)
}

.mobile-menu-header {
  margin-bottom:3rem
}

.mobile-nav-links {
  gap:1.4rem
}

.mobile-nav-links a {
  font-size:clamp(1.65rem,10vw,2.7rem);
  line-height:1.05
}

#hero {
  min-height:100svh;
  height:auto;
  align-items:stretch;
  justify-content:center
}

.hero-actions {
  align-items:stretch;
  justify-content:flex-start;
  flex-direction:column;
  gap:0.75rem
}

.btn-primary,.btn-ghost {
  width:100%;
  justify-content:center;
  min-height:46px
}

.hero-dots {
  right:var(--padding-x);
  bottom:1.25rem
}

.hero-search {
  bottom:1.5rem
}

.search-container {
  border-radius:14px;
  box-shadow:0 16px 44px rgba(var(--negro-rgb),0.18)
}

.search-tabs {
  overflow-x:auto;
  scrollbar-width:none
}

.search-tabs::-webkit-scrollbar {
  display:none
}

.search-tab {
  flex:0 0 auto;
  padding:0.95rem 1.25rem;
  white-space:nowrap;
  font-size:0.68rem
}

.search-body {
  grid-template-columns:1fr 1fr
}

.search-field {
  border-right:0;
  border-bottom:1px solid rgba(var(--negro-rgb),0.07);
  padding:1rem 1.15rem
}

.search-field:first-of-type {
  grid-column:1/-1
}

.search-field-label {
  font-size:0.62rem;
  margin-bottom:6px
}

.search-field-input {
  font-size:0.92rem
}

.search-btn {
  grid-column:auto;
  min-height:58px;
  grid-column:1/-1;
  width:100%;
  padding:0 1.3rem
}

.servicios-header,.equipo-header,.contacto-grid,.legal-shell,.property-detail-grid,.detail-content-grid,.properties-browser-grid,.properties-control-form,.properties-map-view {
  grid-template-columns:1fr
}

/* intro mobile */
.intro-canvas {
  grid-template-columns:1fr;
  min-height:auto
}

.intro-content {
  padding:5rem var(--padding-x) 4rem
}

.intro-text {
  max-width:100%
}

#intro .section-title {
  font-size:clamp(2.6rem,7vw,3.5rem);
  line-height:1.0
}

.intro-body {
  font-size:0.9rem;
  line-height:1.75;
  margin-bottom:1rem;
  max-width:100%
}

.intro-proof-item {
  gap:1rem;
  font-size:0.82rem
}

.intro-visual {
  min-height:85vw
}

.intro-visual-deco {
  display:none
}

.intro-visual-main {
  clip-path:none;
  bottom:34%
}

.intro-visual-accent {
  top:66%;
  right:52%;
  clip-path:polygon(0 10%,100% 0,100% 100%,0 100%)
}

.intro-stats {
  top:66%;
  left:48%
}

.intro-stat {
  padding:0 1rem
}

.intro-stat strong {
  font-size:1.1rem
}

.intro-stat span {
  font-size:0.5rem
}

.intro-services-bridge-inner {
  grid-template-columns:1fr;
  text-align:center;
  padding:1rem 0
}

.intro-services-bridge-line {
  display:none
}

.intro-services-bridge-text {
  white-space:normal;
  line-height:1.5
}

.props-header {
  display:grid;
  gap:1.25rem;
  margin-bottom:2.4rem
}

.props-grid,.equipo-grid,.legal-list,.property-list-grid,.detail-gallery {
  grid-template-columns:1fr
}

.prop-card.featured {
  grid-row:auto
}

.prop-card-img,.prop-card.featured .prop-card-img {
  min-height:300px
}

.prop-card-info {
  padding:1.15rem
}

.prop-card.featured .prop-name,.prop-name {
  font-size:1.18rem;
  line-height:1.25
}

.prop-location {
  font-size:0.66rem;
  line-height:1.45
}

.prop-price {
  font-size:1.15rem
}

.prop-meta {
  align-items:flex-start;
  flex-direction:column;
  gap:0.75rem
}

.prop-specs {
  flex-wrap:wrap;
  gap:0.55rem
}

#servicios,#equipo {
  padding-top:5.5rem
}

/* /contacto es una página propia: necesita más aire bajo el nav fijo que una sección intermedia */
#contacto {
  padding:6.5rem var(--padding-x) 0
}

.srvt-grid {
  grid-template-columns:1fr;
  gap:3rem
}

#banner {
  min-height:390px;
  height:auto;
  padding:4.5rem var(--padding-x)
}

.banner-content {
  align-items:flex-start;
  text-align:left
}

.banner-title {
  font-size:clamp(1.95rem,9.5vw,3rem);
  line-height:1.1;
  margin-bottom:1.1rem
}

.banner-body {
  font-size:0.82rem;
  line-height:1.65;
  margin-bottom:1.55rem
}

#testimonios {
  padding:3.2rem var(--padding-x)
}

.test-header {
  margin-bottom:1.8rem
}

.test-track {
  gap:0.85rem;
  animation-duration:38s
}

.test-track-wrap {
  margin:0 calc(-1 * var(--padding-x))
}

.test-card {
  flex-basis:min(74vw,260px);
  padding:1rem;
  border-radius:10px
}

.test-card::before {
  top:0.65rem;
  right:0.9rem;
  font-size:3.6rem
}

.test-stars {
  margin-bottom:0.65rem
}

.test-text {
  font-size:0.78rem;
  line-height:1.6;
  margin-bottom:1rem
}

.test-avatar {
  width:34px;
  height:34px;
  font-size:0.82rem
}

.test-name {
  font-size:0.76rem
}

.test-role {
  font-size:0.62rem
}

.equipo-person {
  grid-template-columns:1fr;
  min-height:0
}

.equipo-photo {
  min-height:0;
  aspect-ratio:16/10
}

.form-card {
  padding:1.15rem;
  border-radius:10px
}

.form-row {
  grid-template-columns:1fr
}

.contacto-map-wrapper {
  margin-top:2rem
}

.contacto-map-wrapper iframe {
  height:220px
}

.page-shell {
  padding-top:64px
}

.properties-hero,.property-detail-hero,.legal-hero {
  padding:4.25rem var(--padding-x) 2.4rem
}

.properties-browser {
  padding:0.5rem var(--padding-x) 5rem
}

.properties-toolbar {
  position:static
}

.filter-toggle {
  display:flex;
  margin-bottom:0.75rem;
  background:var(--verde-hero);
  color:var(--arena);
  border-color:var(--verde-hero)
}

.filter-toggle-icon {
  background:var(--maiz);
  color:var(--verde-hero)
}

.filters-panel {
  display:none;
  padding:0.9rem
}

.filters-panel.open {
  display:block
}

.filter-pill-grid,.filter-range {
  grid-template-columns:1fr
}

.properties-results-head {
  align-items:stretch;
  flex-direction:column
}

.properties-results-controls {
  align-items:stretch;
  flex-direction:column;
  width:100%
}

.properties-results-controls .toolbar-select,.properties-results-controls .view-toggle {
  width:100%
}

.property-row-card {
  grid-template-columns:1fr;
  min-height:auto
}

.property-row-media {
  min-height:220px
}

.property-row-body {
  padding:1.2rem
}

.property-row-top {
  align-items:flex-start;
  flex-direction:column
}

.property-row-title {
  font-size:1.22rem
}

.property-row-price {
  font-size:1.35rem
}

.properties-map-panel {
  min-height:360px;
  padding:0
}

.properties-map-list {
  max-height:none;
  overflow:visible
}

.detail-facts {
  padding:1.25rem
}

@media (max-width:639px) {
  .legal-hero {
    clip-path:polygon(0 0,100% 0,100% calc(100% - 2rem),0 100%)
  }

  .legal-item {
    grid-template-columns:2rem 1fr;
    gap:1.2rem;
    padding:2rem 0
  }

  .legal-hero-foot {
    flex-direction:column;
    align-items:flex-start;
    gap:1rem
  }
}

@media (min-width:640px) {
  :root {
    --padding-x:clamp(1.5rem,4vw,2.5rem)
  }

  .search-btn {
    grid-column:1/3
  }

  .legal-list,.property-list-grid,.detail-gallery {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .properties-results-controls {
    align-items:center;
    flex-direction:row
  }

}

@media (min-width:768px) {
  section {
    padding:6rem var(--padding-x)
  }

  .hero-actions {
    align-items:center;
    justify-content:center;
    flex-direction:row
  }

  .btn-primary,.btn-ghost {
    width:auto
  }

  .props-header {
    display:flex
  }

  .equipo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .srvt-grid {
    grid-template-columns:1fr 1fr;
    gap:4rem
  }

  .contacto-grid,.servicios-header,.equipo-header {
    grid-template-columns:1fr 1fr
  }

  .intro-canvas {
    grid-template-columns:1fr 0.9fr;
    min-height:85vh
  }

  .intro-content {
    padding:7rem var(--padding-x)
  }

  .intro-visual {
    min-height:auto
  }

  .intro-visual-deco {
    display:block
  }

  .footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .property-row-card {
    grid-template-columns:minmax(220px,0.38fr) minmax(0,1fr)
  }

}

/* El navbar completo (9 links + CTA) necesita más ancho que el resto de los reflows;
   recién pasa de hamburguesa a full-nav a partir de 1280px para no chocar con el logo centrado. */
@media (min-width:1280px) {
  nav {
    height:76px;
    grid-template-columns:1fr auto 1fr
  }

  nav.scrolled {
    height:62px
  }

  .nav-left {
    display:flex
  }

  .nav-right {
    display:flex
  }

  .nav-cta {
    display:inline-block
  }

  .nav-logo {
    grid-column:auto;
    font-size:1.55rem;
    letter-spacing:0.22em
  }

  .nav-hamburger {
    display:none
  }
}

@media (min-width:901px) {
  :root {
    --padding-x:4vw
  }

  .cursor,.cursor-ring {
    display:block
  }

  #hero {
    height:100svh;
    align-items:center
  }

  .hero-search {
    bottom:2.75rem
  }

  .search-body {
    grid-template-columns:repeat(4,minmax(160px,1fr)) minmax(160px,auto)
  }

  .search-btn {
    grid-column:auto;
    min-height:82px
  }

  .search-field:first-of-type {
    grid-column:auto
  }

  .search-field {
    border-bottom:0;
    border-right:1px solid rgba(var(--negro-rgb),0.07);
    padding:1.5rem 1.75rem
  }

  .banner-content {
    align-items:center;
    text-align:center
  }

  .banner-btn {
    margin-left:auto;
    margin-right:auto
  }

  .equipo-person {
    grid-template-columns:minmax(210px,0.9fr) minmax(0,1.1fr);
    min-height:340px;
    height:100%
  }

  .equipo-card {
    height:100%
  }

  .equipo-photo {
    min-height:0;
    height:100%;
    aspect-ratio:auto
  }

  #contacto {
    padding:9rem var(--padding-x) 0
  }

  .contacto-grid {
    grid-template-columns:minmax(0,0.92fr) minmax(420px,0.78fr);
    gap:5rem;
    align-items:start
  }

  .form-card {
    border-radius:12px;
    padding:1.55rem;
    border:1px solid rgba(var(--negro-rgb),0.08);
    box-shadow:0 24px 60px rgba(var(--negro-rgb),0.14)
  }

  .form-row {
    grid-template-columns:1fr 1fr;
    gap:0.8rem;
    margin-bottom:0.8rem
  }

  .form-group {
    margin-bottom:0.7rem
  }

  .form-label {
    font-size:0.58rem;
    margin-bottom:6px
  }

  .form-input,.form-select {
    border-radius:8px;
    padding:0.66rem 0.85rem;
    font-size:0.82rem
  }

  textarea.form-input {
    min-height:88px
  }

  .form-submit {
    padding:0.78rem;
    font-size:0.7rem;
    margin-top:0.35rem
  }

}

@media (min-width:981px) {
  section {
    padding:8rem var(--padding-x)
  }

  .intro-canvas {
    min-height:92vh
  }

  .intro-content {
    padding:9rem var(--padding-x)
  }

  .props-grid {
    grid-template-columns:2fr 1fr 1fr
  }

  .prop-card.featured {
    grid-row:1/3
  }

  .prop-card-img {
    min-height:280px
  }

  .prop-card.featured .prop-card-img {
    min-height:580px
  }

  .prop-card.featured .prop-name {
    font-size:2.2rem
  }

  .prop-name {
    font-size:1.6rem
  }

  .prop-meta {
    align-items:center;
    flex-direction:row
  }

  .equipo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .footer-grid {
    grid-template-columns:minmax(300px,1.2fr) repeat(3,minmax(150px,0.7fr));
    column-gap:clamp(2.5rem,4vw,5rem);
    row-gap:3rem;
    padding-bottom:4rem
  }

  .footer-grid > div:not(:first-child) {
    justify-self:center;
    min-width:150px
  }

  .footer-bottom {
    align-items:center;
    flex-direction:row
  }

  .footer-credit {
    text-align:center
  }

  .properties-browser-grid,.properties-control-form {
    grid-template-columns:270px minmax(0,1fr)
  }

  .properties-toolbar {
    position:sticky
  }

  .filter-toggle {
    display:none
  }

  .filters-panel {
    display:block
  }

  .property-list-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .property-detail-grid {
    grid-template-columns:minmax(0,0.9fr) minmax(320px,1.1fr)
  }

  .detail-content-grid {
    grid-template-columns:minmax(0,1fr) 320px
  }

  .properties-map-view {
    grid-template-columns:minmax(0,1fr) minmax(300px,340px)
  }

  .properties-map-panel,.properties-map-list {
    min-height:calc(100svh - 170px);
    max-height:calc(100svh - 170px)
  }

  .filter-pill-grid,.filter-range {
    grid-template-columns:1fr 1fr
  }

}

