/*
  04-pages.css — 224live · HOME
  Estilos específicos de las secciones de la Home (index).
  ────────────────────────────────────────────────────────────────────────
  · Parte 1 (HERO → CONTACTO): FIEL al HTML original.
  · Parte 2 "SECCIONES LIMPIADAS": clases nuevas que sustituyen los estilos
    inline que el HTML original tenía en #propiedades y #mercado (riesgo R6),
    + estructura de consentimiento RGPD y mensaje de confirmación del
    formulario (preparación Fluent Forms).
  Nota: los estilos de Servicios y Aviso legal se reincorporarán en sus fases
  (esta entrega es solo Home, para mantener la base ágil).
*/

/* ══════════════════════════════════════════════════════════════════════════
   HOME — index.html  (FIEL)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── HERO ──────────────────────────────────────────────────────────────── */
#hero {
  height: 100svh;
  min-height: 640px;
  display: grid;
  grid-template-columns: 44fr 56fr;
  overflow: hidden;
  position: relative;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--ph) 80px;
  background: var(--bg);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.hero-watermark {
  position: absolute;
  right: -10%;
  bottom: -5%;
  width: 88%;
  opacity: 0.09;
  pointer-events: none;
  transform-origin: bottom right;
  animation: fl 9s ease-in-out infinite;
}

.hero-eyebrow { margin-bottom: 24px; }

.hero-title {
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--text);
}

.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--orange);
}

.hero-sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--t2);
  line-height: 1.72;
  max-width: 38ch;
  margin-bottom: 44px;
}

.hero-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-btns .btn-ghost { margin-left: 0; }

.hero-right {
  position: relative;
  overflow: hidden;
}

/* MEJORA R7 ampliado — scrim muy leve en el borde superior de la imagen,
   solo donde cae el header glass, para que la franja se asiente sobre la
   zona de imagen como decisión de diseño (no como parche). Funde el inicio
   de la foto hacia el cálido de marca; no oscurece ni tapa la composición. */
.hero-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 132px;
  background: linear-gradient(to bottom,
              rgba(248, 245, 240, 0.55) 0%,
              rgba(248, 245, 240, 0.18) 55%,
              rgba(248, 245, 240, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-right-caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(20, 20, 22, .6);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 10px 16px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-kpis {
  display: flex;
  gap: 0;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.hero-kpi { flex: 1; }

.hero-kpi:not(:last-child) {
  padding-right: 20px;
  border-right: 1px solid var(--line);
  margin-right: 20px;
}

.hero-kpi .val {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}

.hero-kpi .desc {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--t3);
  margin-top: 5px;
  letter-spacing: 0.04em;
}

/* ─── ACCESOS ───────────────────────────────────────────────────────────── */
#accesos {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-dark);
}

.accesos-statement {
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 300;
  color: rgba(255, 255, 255, .65);
  line-height: 1.6;
  margin-bottom: 56px;
}

.accesos-statement strong {
  font-weight: 700;
  color: #fff;
}

.accesos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.acceso-card {
  padding: 44px 36px 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background .25s;
  cursor: pointer;
}

.acceso-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.acceso-vender             { background: #141416; }
.acceso-vender::before     { background: var(--orange); }
.acceso-vender:hover       { background: #1c1c20; }

.acceso-comprar            { background: #111318; }
.acceso-comprar::before    { background: var(--blue); }
.acceso-comprar:hover      { background: #191d22; }

.acceso-asesoria           { background: #101614; }
.acceso-asesoria::before   { background: var(--green); }
.acceso-asesoria:hover     { background: #161e1b; }

.acceso-num {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, .28);
  margin-bottom: 20px;
}

.acceso-card h3 {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.acceso-card p {
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
  line-height: 1.65;
  flex: 1;
}

.acceso-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: gap .2s;
}

.acceso-vender .acceso-cta  { color: var(--orange); }
.acceso-comprar .acceso-cta { color: #5b9ee8; }
.acceso-asesoria .acceso-cta { color: #5cc8a6; }

.acceso-card:hover .acceso-cta { gap: 14px; }

/* ─── PROBLEMA ──────────────────────────────────────────────────────────── */
#problema {
  padding: var(--pv) 0;
  border-top: 1px solid var(--line);
}

.problema-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
}

.problema-left .eyebrow { margin-bottom: 22px; }

.problema-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

.problema-body {
  color: var(--t2);
  font-size: 1rem;
  font-weight: 300;
}

.problema-list {
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.problema-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--t2);
}

.problema-list li::before {
  content: '';
  width: 16px;
  height: 1.5px;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 11px;
}

.problema-punch {
  margin-top: 32px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.problema-img { position: relative; }

.problema-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.problema-quote {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-dark);
  color: #fff;
  padding: 22px 26px;
}

.problema-quote p {
  font-size: 0.88rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
}

/* ─── PROPUESTA ─────────────────────────────────────────────────────────── */
#propuesta {
  padding: var(--pv) 0;
  background: var(--bg-dark);
}

.propuesta-intro {
  max-width: 620px;
  margin-bottom: 72px;
}

.propuesta-intro .eyebrow {
  color: rgba(255, 255, 255, .3);
  margin-bottom: 20px;
}

.propuesta-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.propuesta-sub {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
}

.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #222226;
}

.pilar {
  padding: 44px 36px;
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
  transition: background .3s;
}

.pilar:hover { background: #1a1a1e; }

.pilar-bar {
  width: 40px;
  height: 3px;
  margin-bottom: 28px;
  border-radius: 2px;
}

.pilar-bar.o { background: var(--orange); }
.pilar-bar.b { background: var(--blue); }
.pilar-bar.g { background: var(--green); }

.pilar h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.2;
}

.pilar p {
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .48);
  line-height: 1.75;
}

/* ─── SERVICIOS (home) ──────────────────────────────────────────────────── */
#servicios { padding: var(--pv) 0; }

.servicios-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 24px;
}

.servicios-header .eyebrow { margin-bottom: 14px; }

.servicios-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.servicios-note {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--t2);
  max-width: 36ch;
  text-align: right;
}

.s-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.s-card {
  background: var(--bg-alt);
  position: relative;
  overflow: hidden;
}

.s-card-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

.s-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.s-card:hover .s-card-img img { transform: scale(1.05); }

.s-card-body { padding: 28px 26px 32px; }

.s-num {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--t3);
  margin-bottom: 10px;
}

.s-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}

.s-card p {
  font-size: 0.87rem;
  font-weight: 300;
  color: var(--t2);
  line-height: 1.72;
}

.s-soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
}

.s-soon::after {
  content: '→';
  transition: transform .2s;
}

.s-card:hover .s-soon::after { transform: translateX(4px); }

/* ─── CONCEPTO ──────────────────────────────────────────────────────────── */
#concepto {
  padding: var(--pv) 0;
  background: var(--bg-alt);
}

.concepto-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.concepto-vis { position: relative; }

.concepto-img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top;
}

.concepto-bird {
  position: absolute;
  bottom: -8%;
  right: -8%;
  width: 52%;
  filter: drop-shadow(0 24px 64px rgba(0, 0, 0, .2));
  animation: fl 7s ease-in-out infinite;
}

.concepto-text .eyebrow { margin-bottom: 20px; }

.concepto-tagline {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 28px;
}

.concepto-tagline .t  { color: var(--orange); }
.concepto-tagline .tm { color: var(--blue); }
.concepto-tagline .tf { color: var(--green); }

.concepto-text p {
  font-size: 0.97rem;
  font-weight: 300;
  color: var(--t2);
  line-height: 1.78;
  max-width: 44ch;
}

.concepto-text p + p { margin-top: 16px; }

.concepto-vals {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cv {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
}

.cv-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cv-dot.o { background: var(--orange); }
.cv-dot.b { background: var(--blue); }
.cv-dot.g { background: var(--green); }

.cv strong { font-weight: 700; }
.cv span   { font-weight: 300; color: var(--t2); }

/* ─── CIERRE ────────────────────────────────────────────────────────────── */
#cierre { padding: var(--pv) 0; }

.cierre-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cierre-text .eyebrow { margin-bottom: 20px; }

.cierre-title {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.cierre-title em {
  font-weight: 300;
  font-style: italic;
  color: var(--t2);
}

.cierre-sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--t2);
  margin-bottom: 36px;
}

.cierre-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center 30%;
}

/* ─── CONTACTO ──────────────────────────────────────────────────────────── */
#contacto {
  padding: var(--pv) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}

.contacto-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}

.c-l .eyebrow { margin-bottom: 16px; }

.c-l h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  line-height: 1.15;
}

.c-l p {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--t2);
}

.c-l p + p { margin-top: 10px; }

.c-info {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--t3);
  line-height: 2;
}

.c-info strong {
  color: var(--t2);
  font-weight: 700;
}

/* ─── FORMULARIO CONTACTO ───────────────────────────────────────────────── */
.cform {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cf {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
}

.cf input,
.cf textarea,
.cf select {
  background: var(--bg);
  border: 1.5px solid var(--line);
  padding: 13px 15px;
  font-family: var(--lato);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text);
  outline: none;
  border-radius: 1px;
  width: 100%;
  transition: border-color .2s;
}

.cf input:focus,
.cf textarea:focus,
.cf select:focus {
  border-color: var(--orange);
}

.cf textarea {
  min-height: 88px;
  resize: vertical;
}

.csend {
  width: 100%;
  padding: 15px;
  background: var(--text);
  color: var(--bg);
  border: none;
  font-family: var(--lato);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 1px;
  transition: background .2s;
}

.csend:hover { background: var(--orange); }


/* ══════════════════════════════════════════════════════════════════════════
   SECCIONES LIMPIADAS  (MEJORA R6 — antes estilos inline en el HTML)
   #propiedades y #mercado: mismos valores que tenía el inline,
   ahora en clases reutilizables y responsive.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── PROPIEDADES (selección curada → portal externo) ───────────────────── */
#propiedades {
  padding: var(--pv) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
}

.propiedades .eyebrow { margin-bottom: 16px; }

.prop-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.prop-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.prop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.prop-cell {
  background: var(--bg);
  aspect-ratio: 4/3;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  border: 1px solid var(--line);
  transition: border-color .25s, background .25s, transform .2s;
}

/* Hover sutil: las celdas se leen como selección editorial deliberada,
   no como contenido sin terminar. No cambia datos ni crea buscador. */
.prop-cell:hover {
  border-color: var(--orange);
  background: var(--bg-alt);
  transform: translateY(-2px);
}

.prop-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--t3);
  margin-bottom: 6px;
}

.prop-name {
  font-size: 0.95rem;
  font-weight: 700;
}

.prop-loc {
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--t2);
}

.prop-cell-all {
  background: var(--bg-dark);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  grid-column: 1 / -1;
}

.prop-all-link {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ─── LECTURA DE MERCADO (semilla de blog — estado "Próximamente") ──────── */
#mercado {
  padding: var(--pv) 0;
  border-top: 1px solid var(--line);
}

.mercado-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  flex-wrap: wrap;
  gap: 24px;
}

.mercado-head .eyebrow { margin-bottom: 14px; }

.mercado-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.mercado-sub {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--t2);
  margin-top: 12px;
  max-width: 48ch;
}

.mercado-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.mcard {
  background: var(--bg-alt);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mcard-media {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mcard-media--video  { background: var(--bg-dark); }
.mcard-media--zona   { background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-dark) 100%); }
.mcard-media--claves { background: var(--bg-alt); border-bottom: 1px solid var(--line); }

.mcard-play {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mcard-badge {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, .45);
}

.mcard-zona      { text-align: center; }
.mcard-zona-lbl  { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; color: rgba(255, 255, 255, .45); }
.mcard-zona-val  { font-size: 1.4rem; font-weight: 900; color: rgba(255, 255, 255, .7); margin-top: 4px; }

.mcard-claves     { text-align: center; padding: 20px; }
.mcard-claves-num { font-size: 2rem; font-weight: 900; color: var(--orange); line-height: 1; }
.mcard-claves-lbl { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--t3); margin-top: 4px; }

.mcard-body { padding: 24px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.mcard-body .eyebrow { margin-bottom: 10px; }

.mcard-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
}

.mcard-text {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--t2);
}

/*
  MEJORA R4 — Enlaces muertos sustituidos.
  El HTML original tenía <a href="#">…→</a> (enlaces a ninguna parte) en los
  3 teasers. Se sustituyen por una etiqueta NO clicable de estado seguro
  ("Próximamente") hasta que exista el blog real (posts nativos WordPress).
*/
.mcard-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t3);
}

.mcard-soon::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIO — preparación Fluent Forms (MEJORA: RGPD + confirmación)
   ══════════════════════════════════════════════════════════════════════════ */

/* Consentimiento RGPD (nuevo, obligatorio legal) */
.cf-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
}

.cf-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--orange);
  cursor: pointer;
}

.cf-consent label {
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t2);
  line-height: 1.5;
}

.cf-consent a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mensaje de confirmación tras enviar (mostrado por JS; sin envío real en esta fase) */
.cform-done {
  display: none;
  padding: 32px 28px;
  background: var(--bg);
  border: 1.5px solid var(--green);
  border-radius: 1px;
}

.cform-done.show { display: block; }

.cform-done h3 {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.cform-done p {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--t2);
}

.cform.hide { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   SERVICIOS — servicios.html
   · Clases FIELES al original (hero-serv, quick-nav, tabs, feat, sinexcl,
     compra, asesoría, relocation, cta).
   · Bloque "INLINE LIMPIADO (Servicios)" al final: clases que sustituyen los
     estilos inline que el HTML original tenía en Venta (bloques extra),
     Asesoramiento (barras), Relocation/Alquiler (leads) y CTA final (R6).
   ══════════════════════════════════════════════════════════════════════════ */

/* Override de --pv para servicios (secciones algo más compactas) */
.page-servicios {
  --pv: clamp(80px, 10vw, 140px);
}

/* ─── HERO SERVICIOS ────────────────────────────────────────────────────── */
#hero-serv {
  padding-top: 72px;
  min-height: 56vh;
  background: var(--bg-dark);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

.hero-serv-bird {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: 44%;
  opacity: 0.06;
  pointer-events: none;
}

.hero-serv-inner {
  padding: clamp(56px, 8vw, 100px) 0;
  position: relative;
  z-index: 2;
}

.hero-serv-inner .eyebrow {
  color: rgba(255, 255, 255, .35);
  margin-bottom: 20px;
}

.hero-serv-title {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.hero-serv-sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .55);
  max-width: 52ch;
}

/* ─── QUICK NAV (scroll-spy) ────────────────────────────────────────────── */
#quick-nav {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 72px;
  z-index: 200;
}

.qnav-inner {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.qnav-link {
  flex-shrink: 0;
  padding: 18px 28px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t2);
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}

.qnav-link:hover  { color: var(--text); }
.qnav-link.active { color: var(--orange); border-bottom-color: var(--orange); }

/* ─── SECCIONES COMPARTIDAS ─────────────────────────────────────────────── */
.serv-section            { padding: var(--pv) 0; }
.serv-section + .serv-section { border-top: 1px solid var(--line); }
.serv-section.alt        { background: var(--bg-alt); }
.serv-section.dark       { background: var(--bg-dark); }

.section-header          { margin-bottom: 56px; }
.section-header .eyebrow { margin-bottom: 16px; }

.section-title {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.section-sub {
  font-size: 1rem;
  font-weight: 300;
  color: var(--t2);
  margin-top: 16px;
  max-width: 58ch;
}

/* ─── TAB TOGGLE (exclusiva / sin exclusiva) ────────────────────────────── */
.tab-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 56px;
  border: 1.5px solid var(--line);
  border-radius: 2px;
  width: fit-content;
  overflow: hidden;
}

.tab-btn {
  padding: 12px 28px;
  font-family: var(--lato);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--t2);
  transition: all .2s;
}

.tab-btn.active {
  background: var(--text);
  color: var(--bg);
}

.tab-panel        { display: none; }
.tab-panel.active { display: block; }

/* ─── EN EXCLUSIVA ──────────────────────────────────────────────────────── */
.excl-hero {
  padding: 44px 48px;
  background: var(--bg-dark);
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
}

.excl-hero-bird {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  opacity: 0.12;
}

.excl-concept {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 28ch;
  position: relative;
  z-index: 2;
}

.excl-concept em {
  font-style: italic;
  font-weight: 300;
  color: rgba(255, 255, 255, .6);
}

.excl-tagline {
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
}

.excl-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.feat-group {
  background: var(--bg-alt);
  padding: 32px 28px;
}

.feat-group-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 6px;
}

.feat-group-title::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--orange);
  margin-bottom: 16px;
}

/* Micro-línea de objetivo (V2) bajo cada título; cierra la cabecera del bloque */
.feat-objective {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--t2);
  line-height: 1.5;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feat-list li {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.feat-list li::before {
  content: '';
  width: 14px;
  height: 1.5px;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 9px;
}

/* ─── SIN EXCLUSIVA ─────────────────────────────────────────────────────── */
.sinexcl-intro {
  padding: 36px 40px;
  border-left: 3px solid var(--blue);
  background: var(--bg-alt);
  margin-bottom: 44px;
}

.sinexcl-intro h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.sinexcl-intro p {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--t2);
  max-width: 60ch;
}

.sinexcl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

.sinexcl-item {
  background: var(--bg-alt);
  padding: 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.sinexcl-dot {
  width: 8px;
  height: 8px;
  background: var(--blue);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.sinexcl-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.sinexcl-item p {
  font-size: 0.87rem;
  font-weight: 300;
  color: var(--t2);
}

/* ─── COMPRA / PERSONAL SHOPPER (y Alquiler, mismo layout) ──────────────── */
.compra-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.compra-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.compra-text p {
  font-size: 0.97rem;
  font-weight: 300;
  color: var(--t2);
  max-width: 46ch;
}

.compra-text p + p { margin-top: 14px; }

.process-steps {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.step:first-child { border-top: 1px solid var(--line); }

.step-n {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--t3);
  min-width: 28px;
  margin-top: 3px;
}

.step strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.step p {
  font-size: 0.87rem;
  font-weight: 300;
  color: var(--t2);
}

/* ─── ASESORAMIENTO ─────────────────────────────────────────────────────── */
.asesoria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 16px;
}

.asesoria-card {
  padding: 36px 30px;
  background: var(--bg-alt);
}

.asesoria-bar {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 24px;
}

.asesoria-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}

.asesoria-card p {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--t2);
  line-height: 1.72;
}

/* ─── RELOCATION ────────────────────────────────────────────────────────── */
.reloc-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.reloc-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.reloc-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 28px;
}

.reloc-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.reloc-item:first-child { border-top: 1px solid var(--line); }

.reloc-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}

.reloc-item p {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--text);
}

/* ─── CTA FINAL ─────────────────────────────────────────────────────────── */
#cta { background: var(--bg-dark); }

#cta h2 {
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
}

#cta p {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 44px;
}

#cta .eyebrow {
  color: rgba(255, 255, 255, .3);
  margin-bottom: 20px;
}


/* ══════════════════════════════════════════════════════════════════════════
   INLINE LIMPIADO (Servicios) — MEJORA R6
   Clases con los mismos valores que tenían los estilos inline del HTML.
   ══════════════════════════════════════════════════════════════════════════ */

/* Imagen de cabecera de Venta */
.venta-media {
  margin-bottom: 48px;
  overflow: hidden;
  max-height: 380px;
}
.venta-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center 40%;
}

/* Refuerzo dentro del bloque "en exclusiva" */
.excl-strong {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  position: relative;
  z-index: 2;
}

/* ─── MANIFIESTO DE EXCLUSIVA (pieza única; sustituye los bloques sueltos) ──
   Antes: 4 cajas independientes (nota naranja + caja negra pegada + nota azul
   + nota naranja) que se leían como suma de bloques. Ahora: una sola pieza
   con cabecera, 3 principios, una franja destacada integrada, el bloque de
   inversión y un cierre con presencia. Un único uso del oscuro, como
   centro de la composición, no como caja pegada. */
.excl-pact {
  margin-top: 44px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  overflow: hidden;
}

.exp-head {
  padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px) clamp(24px, 3vw, 36px);
}
.exp-head .eyebrow { color: var(--orange); margin-bottom: 16px; }
.exp-title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

/* 3 principios breves */
.exp-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.exp-principle {
  background: var(--bg-alt);
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 32px);
}
.exp-n {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: 16px;
}
.exp-principle strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.exp-principle p {
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--t2);
  line-height: 1.65;
}

/* Franja destacada integrada: "Trabajamos con foco" (centro de la pieza) */
.exp-focus {
  background: var(--bg-dark);
  padding: clamp(40px, 6vw, 68px) clamp(28px, 4vw, 52px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.exp-focus-bird {
  position: absolute;
  right: -2%;
  top: 50%;
  transform: translateY(-50%);
  width: 170px;
  opacity: 0.08;
  pointer-events: none;
}
.exp-focus p {
  position: relative;
  z-index: 2;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 300;
  color: rgba(255, 255, 255, .55);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.exp-focus strong {
  display: block;
  font-weight: 900;
  color: #fff;
  margin-top: 4px;
}

/* Bloque específico: inversión estratégica */
.exp-invest {
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(18px, 3vw, 48px);
  align-items: start;
}
.exp-invest-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  line-height: 1.5;
  padding-top: 3px;
}
.exp-invest p {
  font-size: 0.97rem;
  font-weight: 300;
  color: var(--t2);
  line-height: 1.75;
  max-width: 62ch;
}
.exp-invest p strong { color: var(--text); font-weight: 700; }

/* Cierre con presencia */
.exp-close {
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 52px);
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.exp-close::before {
  content: '';
  width: 30px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
  margin-top: 14px;
}
.exp-close p {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 32ch;
}


/* ══════════════════════════════════════════════════════════════════════════
   AVISO LEGAL — aviso-legal.html  (FIEL; contenido jurídico verbatim)
   ══════════════════════════════════════════════════════════════════════════ */

.legal-header {
  padding: clamp(56px, 8vw, 96px) 0 clamp(36px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.legal-header .eyebrow { margin-bottom: 16px; }
.legal-header h1 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.legal-header .updated {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--t3);
}

.legal-body { padding: clamp(44px, 7vw, 80px) 0; }

.legal-cols {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: start;
}

/* TOC: bloque agrupado, sobrio y con aire (corrección visual del índice).
   El contenedor es <aside> (no <nav>) para evitar el sangrado de las reglas
   globales de `nav` (position:fixed/sticky, height:72px, display:flex) en la
   página legal. Overrides defensivos por si algún día vuelve a ser <nav>. */
.legal-toc {
  position: static;
  height: auto;
  display: block;
  box-shadow: none;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 26px 26px 28px;
}
.legal-toc h4 {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 22px;
}
.legal-toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.legal-toc a {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--t2);
  line-height: 1.4;
  transition: color .2s;
}
.legal-toc a:hover { color: var(--orange); }

.legal-content {
  display: flex;
  flex-direction: column;
  gap: 52px;
}

.legal-art { scroll-margin-top: 96px; }
.legal-art h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.legal-art p {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--t2);
  margin-bottom: 12px;
}
.legal-art p:last-child { margin-bottom: 0; }
.legal-art strong { font-weight: 700; color: var(--text); }
.legal-art ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.legal-art ul li {
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--t2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.legal-art ul li::before {
  content: '—';
  color: var(--orange);
  flex-shrink: 0;
}

/* Nota final de "sin exclusiva" + botón a exclusiva */
.sinexcl-note {
  margin-top: 44px;
  padding: 28px 32px;
  border-left: 3px solid var(--blue);
  background: var(--bg-alt);
}
.sinexcl-note p { font-size: 1rem; font-weight: 300; color: var(--t2); max-width: 60ch; }
.sinexcl-note p strong { color: var(--text); font-weight: 700; }

.sinexcl-back-btn {
  margin-top: 14px;
  background: none;
  border: 1.5px solid var(--line);
  padding: 9px 20px;
  font-family: var(--lato);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--t2);
  transition: border-color .2s, color .2s;
  border-radius: 1px;
}
.sinexcl-back-btn:hover { border-color: var(--text); color: var(--text); }

/* Barras de color de Asesoramiento (antes inline) */
.asesoria-bar.o { background: var(--orange); }
.asesoria-bar.b { background: var(--blue); }
.asesoria-bar.g { background: var(--green); }

/* Lead de sección (Relocation / Alquiler) — antes inline */
.serv-lead {
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 300;
  color: var(--t2);
  max-width: 44ch;
}
.serv-lead--lg { font-size: 1.05rem; }
.serv-lead + .serv-lead { margin-top: 16px; max-width: 46ch; font-size: 0.97rem; }

/* Margen superior de bloques de copy / CTA en columnas de servicios */
.serv-mt    { margin-top: 24px; }
.serv-cta   { margin-top: 32px; }
.serv-cta-center { margin-top: 44px; text-align: center; }

/* CTA final con imagen de fondo atenuada */
.cta-bg-wrap { position: relative; overflow: hidden; }
.cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 2;
  padding: var(--pv) 0;
  text-align: center;
}
.cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.cta-btns .btn-outline-light { margin-left: 0; }