/* ==========================================================================
   VOLTERRA — Sistema de diseño
   Mobile-first real: se diseña desde 360px y se expande.
   Todo lo que crece con la pantalla usa clamp(), no saltos bruscos.
   ========================================================================== */

:root{
  /* Marca */
  --bosque:#1E3A2A;
  --medio:#2E5540;
  --oliva:#6F7D3E;
  --dorado:#C7A15A;
  --dorado-osc:#8F6B2F;      /* contraste AA sobre fondos claros */
  --beige:#EFE7D4;
  --arena:#E3CBA0;
  --pizarra:#232B33;
  --negro:#0D1410;
  --blanco:#FFFFFF;

  /* Semánticos */
  --fondo:#FFFFFF;
  --fondo-alt:#FAF8F3;
  --texto:#1F262C;
  --texto-suave:#5A6470;
  --borde:#E4DFD4;
  --borde-fuerte:#CFC7B6;

  /* Tipografía */
  --serif:'Cinzel',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Escala fluida — el mínimo es lo que se ve en un teléfono */
  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-base:1rem;
  --t-lg:clamp(1.05rem,1rem + .25vw,1.18rem);
  --t-xl:clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --t-2xl:clamp(1.45rem,1.25rem + 1vw,2rem);
  --t-3xl:clamp(1.75rem,1.4rem + 1.75vw,2.75rem);
  --t-4xl:clamp(2.1rem,1.6rem + 2.5vw,3.8rem);

  /* Espacio */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --seccion:clamp(2.5rem,7vw,5.5rem);
  --lateral:clamp(1.15rem,4vw,2rem);

  --ancho:1240px;
  --radio:4px;
  --sombra:0 4px 20px rgba(30,58,42,.07);
  --sombra-alta:0 14px 44px rgba(30,58,42,.15);
  --trans:.3s cubic-bezier(.2,.7,.3,1);
  --cabecera-h:64px;
}

@media(min-width:900px){ :root{ --cabecera-h:76px; } }

/* Reset ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--cabecera-h) + 1rem);
  /* clip en vez de hidden: recorta desbordes accidentales sin romper
     position:sticky (hidden crea un contexto de scroll que lo inutiliza) */
  overflow-x:clip;
}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.6;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  /* Evita el desbordamiento lateral sin ocultar contenido válido */
  overflow-wrap:break-word;
}
img,svg,video,iframe{max-width:100%;display:block}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--dorado);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{
  font-family:var(--serif);font-weight:600;line-height:1.2;
  margin:0 0 var(--s4);letter-spacing:.01em;
  /* overflow-wrap protege contra palabras larguísimas SIN partir con
     guiones: hyphens:auto partía "ingeniero" en "inge-niero" incluso
     en escritorio, donde sobraba espacio. */
  overflow-wrap:break-word
}
h1{font-size:var(--t-4xl)} h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl)} h4{font-size:var(--t-lg)}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}

/* Utilidades ------------------------------------------------------------- */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--lateral)}
.seccion{padding-block:var(--seccion)}
/* Las secciones oscuras heredan la atmósfera del hero: degradado radial
   sutil en vez de color plano, para que el verde tenga profundidad. */
.seccion--oscura{
  background:radial-gradient(110% 100% at 50% 0%,var(--medio) 0%,var(--bosque) 58%,#172B1F 100%);
  color:var(--beige);position:relative;overflow:hidden
}
.seccion--oscura::after{
  content:'';position:absolute;pointer-events:none;
  width:60vmin;height:60vmin;border-radius:50%;
  top:-10%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(199,161,90,.08) 0%,transparent 65%)
}
.seccion--oscura > .contenedor{position:relative;z-index:1}
.seccion--oscura h1,.seccion--oscura h2,.seccion--oscura h3{color:var(--beige)}
.seccion--alt{background:linear-gradient(180deg,#FAF8F3 0%,#F3EFE5 100%)}
.centro{text-align:center}
.medida{max-width:62ch}
.medida-centro{max-width:62ch;margin-inline:auto}

.oculto{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.oculto:focus{
  position:fixed!important;top:.5rem;left:.5rem;width:auto;height:auto;
  clip:auto;padding:.75rem 1.25rem;background:var(--dorado);color:var(--negro);z-index:999
}

.kicker{
  font-size:var(--t-xs);letter-spacing:.28em;text-transform:uppercase;
  color:var(--dorado-osc);font-weight:500;margin-bottom:var(--s3);display:block
}
.seccion--oscura .kicker{color:var(--dorado)}

/* Separador con un rombo al centro. Sin el rombo, el hueco entre las dos
   líneas parece un error de maquetación en lugar de un adorno. */
.filete{display:flex;align-items:center;gap:var(--s3);margin-block:var(--s5)}
.filete::before,.filete::after{content:'';height:1px;flex:1;background:var(--borde)}
.filete__punto{
  width:6px;height:6px;flex:0 0 auto;background:var(--dorado);
  transform:rotate(45deg);opacity:.85
}
.seccion--oscura .filete::before,.seccion--oscura .filete::after{background:rgba(199,161,90,.32)}

/* Texto centrado: en pantallas chicas, un párrafo largo centrado cuesta
   leerlo porque cada línea arranca en un punto distinto. Los títulos
   siguen centrados; el cuerpo se alinea a la izquierda. */
@media(max-width:600px){
  .centro p,.medida-centro p{text-align:left}
  .centro .btn,.medida-centro .btn{text-align:center}
}

/* Botones ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:50px;padding:.8rem 1.5rem;border-radius:var(--radio);
  font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;border:1px solid transparent;transition:var(--trans);
  text-align:center;line-height:1.25
}
.btn svg{flex:0 0 auto}
@media(min-width:600px){.btn{padding-inline:1.9rem;letter-spacing:.13em}}

.btn--dorado{background:var(--dorado);color:var(--negro);box-shadow:0 5px 18px rgba(199,161,90,.25)}
.btn--dorado:hover{background:#B8924D;transform:translateY(-2px);box-shadow:0 12px 26px rgba(199,161,90,.32)}
.btn--verde{background:var(--bosque);color:var(--beige)}
.btn--verde:hover{background:var(--medio);transform:translateY(-2px)}
.btn--linea{border-color:var(--borde-fuerte);color:var(--texto);background:transparent}
.btn--linea:hover{border-color:var(--bosque);background:var(--bosque);color:var(--beige)}
/* Sobre fondos oscuros el texto tiene que invertirse. El hero se incluye
   explícitamente: no lleva la clase .seccion--oscura pero su fondo es negro,
   y sin esto el botón queda con texto gris sobre negro — ilegible. */
.seccion--oscura .btn--linea,
.hero .btn--linea,
.pie .btn--linea{border-color:rgba(239,231,212,.5);color:var(--beige)}
.seccion--oscura .btn--linea:hover,
.hero .btn--linea:hover,
.pie .btn--linea:hover{border-color:var(--dorado);background:var(--dorado);color:var(--negro)}
.btn--wa{background:#25D366;color:#06300F}
.btn--wa:hover{background:#1DB954;transform:translateY(-2px)}
.btn--bloque{width:100%}

/* En móvil, los grupos de botones se apilan a ancho completo */
.acciones{display:flex;flex-direction:column;gap:var(--s3)}
@media(min-width:520px){.acciones{flex-direction:row;flex-wrap:wrap}}

/* Cabecera --------------------------------------------------------------- */
.cabecera{
  position:sticky;top:0;z-index:100;
  background:rgba(13,20,16,.94);
  border-bottom:1px solid rgba(199,161,90,.16)
}
@supports(backdrop-filter:blur(1px)){
  .cabecera{background:rgba(13,20,16,.82);backdrop-filter:blur(14px)}
}
.cabecera__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);min-height:var(--cabecera-h)
}

.marca{display:flex;align-items:center;gap:.6rem;color:var(--beige);min-width:0}
.marca__logo{width:32px;height:32px;flex:0 0 auto}
.marca__txt{
  font-family:var(--serif);font-size:.95rem;letter-spacing:.16em;
  line-height:1;white-space:nowrap
}
.marca__sub{
  display:block;font-family:var(--sans);font-size:.5rem;
  letter-spacing:.24em;color:var(--dorado);margin-top:3px;white-space:nowrap
}
@media(min-width:400px){
  .marca__logo{width:36px;height:36px}
  .marca__txt{font-size:1.05rem;letter-spacing:.2em}
  .marca__sub{font-size:.55rem;letter-spacing:.28em}
}

.nav{display:none}
.nav a:not(.btn){
  color:var(--beige);font-size:var(--t-sm);letter-spacing:.08em;
  text-transform:uppercase;padding-block:var(--s2);position:relative;transition:var(--trans)
}
.nav a:not(.btn)::after{
  content:'';position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--dorado);transition:var(--trans)
}
.nav a:not(.btn):hover::after,.nav .current-menu-item>a::after{right:0}
.nav .btn{min-height:42px;padding:.55rem 1.15rem}

.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;background:none;border:0;padding:12px;margin-right:-8px;
  flex:0 0 auto;
  /* Safari (iPad): dentro de un contenedor con backdrop-filter a veces no
     pinta a los hijos aunque sigan siendo tocables. Forzar capa propia. */
  transform:translateZ(0)
}
.menu-btn span{display:block;height:2px;background:var(--beige);transition:var(--trans);transform-origin:center}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Menú móvil.
   Se oculta con opacidad + visibility, no desplazándolo fuera de pantalla:
   un elemento posicionado más allá del borde derecho extiende el área de
   scroll del documento y provoca desplazamiento horizontal en toda la
   página — el error de maquetación móvil más difícil de rastrear.
   Al abrirse, el scroll de la página se bloquea con una clase en <html>
   para que el fondo no se mueva mientras el menú está abierto. */
html.menu-abierto{overflow:hidden}
.nav-movil{
  position:fixed;left:0;right:0;top:var(--cabecera-h);bottom:0;
  background:
    radial-gradient(100% 70% at 50% 0%,rgba(46,85,64,.4) 0%,transparent 60%),
    var(--negro);
  padding:var(--s6) var(--lateral) var(--s8);
  overflow-y:auto;overscroll-behavior:contain;z-index:99;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s
}
.nav-movil.abierto{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .28s ease,visibility 0s
}
.nav-movil ul{list-style:none;margin:0;padding:0}
.nav-movil li{
  border-bottom:1px solid rgba(239,231,212,.1);
  opacity:0;transform:translateY(12px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)
}
.nav-movil.abierto li{opacity:1;transform:none}
.nav-movil.abierto li:nth-child(1){transition-delay:.06s}
.nav-movil.abierto li:nth-child(2){transition-delay:.11s}
.nav-movil.abierto li:nth-child(3){transition-delay:.16s}
.nav-movil.abierto li:nth-child(4){transition-delay:.21s}
.nav-movil.abierto li:nth-child(5){transition-delay:.26s}
.nav-movil.abierto li:nth-child(6){transition-delay:.31s}
.nav-movil a:not(.btn){
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) 0;color:var(--beige);
  font-family:var(--serif);font-size:1.2rem;letter-spacing:.05em;min-height:56px
}
.nav-movil a:not(.btn)::after{content:'→';color:var(--dorado);opacity:.55;font-size:.9em}
.nav-movil .btn{margin-top:var(--s6)}

/* Selector de idioma ES · EN (solo aparece con Polylang activo) */
.idiomas{display:flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.14em;font-weight:500}
.idiomas__op{color:rgba(239,231,212,.5);text-decoration:none;padding:4px 2px;transition:var(--trans)}
.idiomas__op:hover{color:var(--beige)}
.idiomas__op.es-actual{color:var(--dorado)}
.idiomas__sep{color:rgba(239,231,212,.25)}
.idiomas--movil{justify-content:center;gap:14px;margin-top:var(--s6);font-size:.9rem}

/* El menú de escritorio entra recién a 1080px: entre 920 y 1080 (iPad Pro
   vertical, laptops chicas) los 5 enlaces + idiomas + botón quedaban
   apretados y hasta en dos líneas. Mejor hamburguesa cómoda que banner
   apretado. */
@media(min-width:1080px){
  .nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
  .menu-btn,.nav-movil{display:none}
}

/* Hero ------------------------------------------------------------------- */
/* Hero ------------------------------------------------------------------
   Réplica del lenguaje visual de la página "próximamente", que es la
   referencia aprobada: degradado radial como luz de atardecer, resplandor
   dorado difuso, composición centrada, logo con sombra que flota apenas,
   y entrada escalonada de los elementos. La atmósfera vive aquí. */
.hero{
  position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 85% at 50% -10%,var(--medio) 0%,var(--bosque) 48%,var(--negro) 100%);
  min-height:560px
}
@supports(height:100svh){
  .hero{min-height:min(76svh,700px)}
  .hero--con-imagen{min-height:min(88svh,800px)}
}

/* Resplandor dorado difuso, como el de "próximamente" */
.hero::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:74vmin;height:74vmin;border-radius:50%;
  top:4%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(199,161,90,.13) 0%,transparent 65%)
}

.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);will-change:transform /* margen para el paralaje */
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(46,85,64,.5) 0%,transparent 60%),
    linear-gradient(180deg,rgba(13,20,16,.6) 0%,rgba(13,20,16,.32) 42%,rgba(13,20,16,.94) 100%)
}

.hero__cont{
  position:relative;color:var(--beige);width:100%;
  display:flex;flex-direction:column;align-items:center;
  padding-block:clamp(3.5rem,10vw,6rem)
}
.hero__logo{
  width:clamp(104px,24vw,168px);height:auto;margin-bottom:var(--s5);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(199,161,90,.14));
  animation:v-subir 1.3s cubic-bezier(.2,.7,.3,1) both,v-flotar 7s ease-in-out 1.3s infinite
}
.hero h1{
  margin-bottom:var(--s3);letter-spacing:.12em;
  text-shadow:0 2px 28px rgba(0,0,0,.4);
  animation:v-subir 1.3s .15s cubic-bezier(.2,.7,.3,1) both
}
.hero__sub{
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  margin-bottom:var(--s5);
  animation:v-subir 1.3s .22s cubic-bezier(.2,.7,.3,1) both
}
.hero__sub span{
  font-size:clamp(.7rem,2.4vw,.95rem);letter-spacing:.42em;padding-left:.42em;
  color:var(--dorado);font-weight:500;white-space:nowrap
}
.hero__sub::before,.hero__sub::after{content:'';height:1.5px;width:clamp(28px,8vw,70px);flex:0 0 auto}
.hero__sub::before{background:linear-gradient(90deg,transparent,var(--dorado))}
.hero__sub::after{background:linear-gradient(90deg,var(--dorado),transparent)}

.hero__lema{
  font-size:var(--t-lg);font-weight:300;letter-spacing:.05em;
  max-width:34ch;margin-inline:auto;color:rgba(239,231,212,.92);line-height:1.6;
  animation:v-subir 1.3s .3s cubic-bezier(.2,.7,.3,1) both
}
.hero__lema em{font-style:normal;color:var(--dorado)}
.hero__acciones{
  display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s6);
  width:100%;max-width:420px;
  animation:v-subir 1.3s .45s cubic-bezier(.2,.7,.3,1) both
}
@media(min-width:600px){
  .hero__acciones{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto;max-width:none}
}

@keyframes v-subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes v-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* Campos ----------------------------------------------------------------- */
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=search],input[type=date],select,textarea{
  width:100%;min-height:50px;padding:.75rem .9rem;
  font:inherit;font-size:16px; /* 16px evita el zoom automático en iOS */
  color:var(--texto);background:var(--blanco);
  border:1px solid var(--borde-fuerte);border-radius:var(--radio);
  transition:var(--trans);appearance:none
}
select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6470' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
  background-size:12px;padding-right:2.6rem
}
textarea{min-height:120px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--dorado);box-shadow:0 0 0 3px rgba(199,161,90,.18)
}
input::placeholder,textarea::placeholder{color:#9AA2AB}

/* Rejilla de propiedades ------------------------------------------------- */
.props{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:640px){.props{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.props{grid-template-columns:repeat(3,1fr)}}
/* Con 1 o 2 propiedades no se usa rejilla: se muestran grandes y centradas */
.props--pocas{grid-template-columns:1fr;max-width:820px;margin-inline:auto}

/* Tarjeta ---------------------------------------------------------------- */
.card{
  display:flex;flex-direction:column;background:var(--blanco);
  border:1px solid var(--borde);border-radius:var(--radio);
  overflow:hidden;transition:var(--trans);height:100%
}
/* Línea dorada que recorre el borde superior al pasar el cursor:
   detalle pequeño que hace la tarjeta sentirse viva sin recargarla. */
.card::after{
  content:'';position:absolute;top:0;left:0;right:100%;height:2px;
  background:linear-gradient(90deg,var(--dorado),var(--arena));
  transition:right .4s cubic-bezier(.2,.7,.3,1);z-index:1
}
.card:hover::after{right:0}
@media(hover:hover){
  .card:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta);border-color:var(--arena)}
  .card:hover .card__img img{transform:scale(1.04)}
}
.card__img{
  position:relative;aspect-ratio:4/3;background:var(--fondo-alt);
  overflow:hidden;display:block
}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card__sinfoto{
  display:flex;height:100%;align-items:center;justify-content:center;
  color:#B4AC9B;font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase
}
.card__etq,.card__estado{
  position:absolute;top:var(--s3);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:2px;font-weight:500;line-height:1.4
}
.card__etq{left:var(--s3);background:rgba(13,20,16,.82);color:var(--dorado)}
.card__estado{right:var(--s3);background:var(--dorado);color:var(--negro)}

.card__body{padding:var(--s5) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1}
@media(min-width:400px){.card__body{padding-inline:var(--s5)}}
.card__lugar{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-suave);line-height:1.5
}
.card__tit{font-family:var(--serif);font-size:var(--t-lg);line-height:1.3;margin:0}
.card__tit a::after{content:'';position:absolute;inset:0}
.card{position:relative}
.card__precio{
  font-family:var(--serif);font-size:var(--t-xl);color:var(--bosque);
  margin-top:auto;padding-top:var(--s3);line-height:1.25
}
.card__precio small{
  display:block;font-family:var(--sans);font-size:var(--t-sm);
  color:var(--texto-suave);font-weight:400;letter-spacing:.01em;margin-top:2px
}
.card__datos{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  padding-top:var(--s3);margin-top:var(--s3);
  border-top:1px solid var(--borde);
  font-size:var(--t-sm);color:var(--texto-suave)
}
.card__datos span{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}

/* Bloque destacado ------------------------------------------------------- */
.destacada{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:center}
.destacada__img{aspect-ratio:16/10;overflow:hidden;border-radius:var(--radio);background:var(--fondo-alt)}
.destacada__img img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.destacada{grid-template-columns:1.15fr 1fr;gap:var(--s8)}}
/* Sin foto no se deja un hueco ni un relleno decorativo: el bloque pasa a
   una sola columna centrada con más aire. Un marcador de posición siempre
   se ve peor que su ausencia. */
.destacada--sin-img{max-width:760px;margin-inline:auto;text-align:center}
.destacada--sin-img .caracts{justify-content:center}
@media(min-width:900px){.destacada--sin-img{grid-template-columns:1fr}}

/* Los párrafos de secciones oscuras centradas respiran mejor angostos:
   líneas largas centradas se leen desparejas (hallazgo I2). */
.seccion--oscura .medida-centro p{max-width:46ch;margin-inline:auto}

/* Título de la ficha de propiedad: un paso más chico en móvil para que
   nombres largos no ocupen media pantalla (hallazgo F1). */
.ficha-titulo{font-size:var(--t-3xl)}
@media(max-width:600px){.ficha-titulo{font-size:var(--t-2xl)}}

/* Campos opcionales plegados de los formularios (hallazgo V1):
   pedir poco de entrada; quien quiera dar más detalles, los abre. */
.form__mas{border:1px dashed var(--borde-fuerte);border-radius:var(--radio);padding:0}
.form__mas summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5em;
  padding:var(--s4);min-height:52px;
  font-size:var(--t-sm);font-weight:500;letter-spacing:.04em;color:var(--bosque)
}
.form__mas summary::-webkit-details-marker{display:none}
.form__mas summary::before{
  content:'+';font-family:var(--serif);font-size:1.3em;color:var(--dorado-osc);
  line-height:1;transition:transform var(--trans)
}
.form__mas[open] summary::before{transform:rotate(45deg)}
.form__mas summary span{color:var(--texto-suave);font-weight:400}
.form__mas-campos{
  display:grid;gap:var(--s4);grid-template-columns:1fr;
  padding:0 var(--s4) var(--s4)
}
@media(min-width:640px){.form__mas-campos{grid-template-columns:repeat(2,1fr)}}

/* Galería ---------------------------------------------------------------- */
.galeria{display:grid;gap:var(--s2)}
.galeria__ppal{
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--radio);
  background:var(--fondo-alt)
}
.galeria__ppal img{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.galeria__mini{
  display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:var(--s2);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin
}
.galeria__mini::-webkit-scrollbar{height:4px}
.galeria__mini::-webkit-scrollbar-thumb{background:var(--borde-fuerte);border-radius:2px}
.galeria__mini button{
  flex:0 0 72px;aspect-ratio:1;border:2px solid transparent;border-radius:2px;
  overflow:hidden;padding:0;background:none;transition:var(--trans);
  scroll-snap-align:start;opacity:.65
}
.galeria__mini button[aria-current="true"]{border-color:var(--dorado);opacity:1}
.galeria__mini img{width:100%;height:100%;object-fit:cover}
@media(min-width:700px){
  .galeria__ppal{aspect-ratio:16/9}
  .galeria__mini button{flex-basis:104px}
}

/* Ficha ------------------------------------------------------------------ */
.ficha{display:grid;gap:var(--s7);grid-template-columns:1fr}
@media(min-width:1000px){.ficha{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s8);align-items:start}}

.migas{
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-suave);margin-bottom:var(--s4);line-height:1.7
}
.migas a:hover{color:var(--dorado-osc)}

.precio-grande{
  font-family:var(--serif);font-size:var(--t-3xl);color:var(--bosque);line-height:1.1
}
.precio-conv{
  font-size:var(--t-lg);color:var(--texto-suave);
  font-family:var(--sans);font-weight:300;margin-top:4px
}
.precio-tc{font-size:var(--t-xs);color:var(--texto-suave);letter-spacing:.02em;margin-top:var(--s2)}

/* "Precio a consultar": discreto e invitador, no un titular que grita.
   La ausencia de precio se convierte en una razón para escribir. */
.precio-consultar{display:flex;flex-direction:column;gap:4px}
.precio-consultar span{
  font-family:var(--serif);font-size:var(--t-xl);color:var(--dorado-osc);
  letter-spacing:.04em
}
.precio-consultar a{
  font-size:var(--t-sm);color:var(--texto-suave);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--arena);transition:var(--trans);width:fit-content
}
.precio-consultar a:hover{color:var(--dorado-osc);text-decoration-color:var(--dorado)}
.card__precio--consultar{
  font-family:var(--sans);font-size:var(--t-sm);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dorado-osc)
}

.datos{
  display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr);
  margin-block:var(--s6);padding-block:var(--s5);
  border-block:1px solid var(--borde)
}
@media(min-width:640px){.datos{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
.dato{display:flex;flex-direction:column;gap:2px;min-width:0}
.dato__v{font-family:var(--serif);font-size:var(--t-xl);color:var(--bosque);line-height:1.1}
.dato__k{
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--texto-suave);line-height:1.4
}

.specs{list-style:none;margin:0 0 var(--s7);padding:0;display:grid;grid-template-columns:1fr}
@media(min-width:640px){.specs{grid-template-columns:repeat(2,1fr);column-gap:var(--s7)}}
.specs li{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--borde);font-size:var(--t-sm)
}
.specs .k{color:var(--texto-suave);flex:0 1 auto}
.specs .v{font-weight:500;text-align:right;flex:1 1 auto;min-width:0}

.caracts{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:0 0 var(--s7);padding:0}
.caracts li{
  padding:.45rem 1rem;background:var(--fondo-alt);border:1px solid var(--borde);
  border-radius:100px;font-size:var(--t-sm);color:var(--texto);line-height:1.4
}
.caracts--iconos li{display:inline-flex;align-items:center;gap:.45em}
.caracts--iconos svg{width:16px;height:16px;color:var(--dorado-osc);flex:0 0 auto}

/* Ficha por tipo (v1.4) --------------------------------------------------- */
.sellos{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.sello{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:.4rem .8rem;border-radius:2px;line-height:1.4
}
.sello svg{width:14px;height:14px}
.sello--estado{background:var(--dorado);color:var(--negro)}
.sello--adj{background:var(--bosque);color:var(--beige)}

.dato{position:relative}
.dato__i{display:block;color:var(--dorado-osc);margin-bottom:4px}
.dato__i svg{width:22px;height:22px}

/* Ficha técnica en mosaico: cada dato es una loseta con icono grande,
   valor en negrita y etiqueta pequeña. Se lee de un vistazo con 3 datos
   o con 15, y los iconos tienen tamaño suficiente para reconocerse. */
.ficha-tec{
  list-style:none;margin:0 0 var(--s7);padding:0;display:grid;gap:var(--s3);
  grid-template-columns:repeat(2,1fr)
}
@media(min-width:560px){.ficha-tec{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.ficha-tec{grid-template-columns:repeat(4,1fr)}}
.ficha-tec li{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  background:var(--fondo-alt);border:1px solid var(--borde);border-radius:var(--radio);
  padding:var(--s4) var(--s4) var(--s3);font-size:var(--t-sm)
}
.ficha-tec__i{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(199,161,90,.14);color:var(--dorado-osc);margin-bottom:2px
}
.ficha-tec__i svg{width:22px;height:22px;stroke-width:1.7}
.ficha-tec .v{font-weight:500;line-height:1.35;overflow-wrap:anywhere;color:var(--texto);font-size:var(--t-base)}
.ficha-tec .k{color:var(--texto-suave);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;line-height:1.4;order:3}
.ficha-tec--compacta{margin:var(--s4) 0 0}
.ficha-tec--compacta li{background:rgba(255,255,255,.55);border-color:rgba(199,161,90,.3)}

/* Iconos resumen en la tarjeta ------------------------------------------- */
.card__icos{display:flex;flex-wrap:wrap;gap:6px;padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid var(--borde)}
.ico{
  position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--borde);
  background:var(--fondo-alt);color:var(--dorado-osc);display:inline-flex;align-items:center;justify-content:center;
  padding:0;transition:var(--trans);font:500 .75rem/1 var(--sans);text-decoration:none
}
.ico svg{width:18px;height:18px;stroke-width:1.7}
.ico:hover,.ico.activo,.ico:focus-visible{background:var(--bosque);border-color:var(--bosque);color:var(--beige)}
.ico--mas{color:var(--texto);letter-spacing:0}
/* Etiqueta flotante (hover con mouse, toque en celular) */
.ico::after{
  content:attr(data-etq);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--negro);color:var(--beige);font-size:.72rem;letter-spacing:.02em;line-height:1.3;
  padding:.38rem .6rem;border-radius:3px;white-space:nowrap;max-width:220px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.ico::before{
  content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--negro);opacity:0;transition:opacity .2s;pointer-events:none
}
.ico:hover::after,.ico:hover::before,.ico.activo::after,.ico.activo::before,.ico:focus-visible::after,.ico:focus-visible::before{opacity:1;transform:translateX(-50%) translateY(0)}
.ico:hover::before,.ico.activo::before,.ico:focus-visible::before{transform:translateX(-50%)}
/* En la primera y última columna la etiqueta no se sale de la tarjeta */
.card__icos .ico:first-child::after{left:0;transform:translateX(0) translateY(4px)}
.card__icos .ico:first-child:hover::after,.card__icos .ico:first-child.activo::after{transform:translateX(0)}

.adjudicado{
  background:linear-gradient(135deg,rgba(199,161,90,.10),rgba(199,161,90,.03));
  border:1px solid rgba(199,161,90,.45);border-left:4px solid var(--dorado);
  border-radius:var(--radio);padding:var(--s5);margin:0 0 var(--s7)
}
.adjudicado__cab{display:flex;gap:var(--s4);align-items:flex-start}
.adjudicado__cab>svg{width:28px;height:28px;color:var(--dorado-osc);flex:0 0 auto;margin-top:2px}
.adjudicado__cab strong{display:block;font-family:var(--serif);font-size:var(--t-lg);color:var(--bosque);line-height:1.2;margin-bottom:4px}
.adjudicado__cab p{margin:0;font-size:var(--t-sm);color:var(--texto-suave)}

/* Video corto en tarjetas ------------------------------------------------- */
.card__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;pointer-events:none;background:#000
}
.card--reproduciendo .card__video{opacity:1}
.card--reproduciendo .card__img img{transform:none}
.card__play{
  position:absolute;right:var(--s3);bottom:var(--s3);width:30px;height:30px;
  border-radius:50%;background:rgba(13,20,16,.72);color:var(--beige);
  display:flex;align-items:center;justify-content:center;transition:opacity .3s
}
.card__play svg{width:18px;height:18px}
.card--reproduciendo .card__play{opacity:0}
.card__estado--adj{background:var(--bosque);color:var(--beige)}

.panel{
  background:var(--fondo-alt);border:1px solid var(--borde);
  border-radius:var(--radio);padding:var(--s5)
}
@media(min-width:1000px){.panel{position:sticky;top:calc(var(--cabecera-h) + 1.5rem)}}
.panel h3{margin-bottom:var(--s2)}
.panel .btn{margin-bottom:var(--s2)}
.panel .btn:last-of-type{margin-bottom:0}

/* Botón flotante de WhatsApp ----------------------------------------------
   Siempre visible en toda página: la persona nunca tiene que buscar cómo
   contactar. En escritorio muestra una etiqueta al pasar el cursor.
   En la ficha de propiedad (móvil) ya existe la barra inferior, así que
   ahí se oculta para no duplicar. */
.wa-flot{
  position:fixed;right:16px;bottom:16px;z-index:95;
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.3);
  transition:var(--trans)
}
.wa-flot:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.wa-flot svg{width:30px;height:30px}
.wa-flot::before{
  content:attr(data-etq);position:absolute;right:calc(100% + 14px);
  background:var(--negro);color:var(--beige);
  font-size:var(--t-xs);letter-spacing:.06em;white-space:nowrap;
  padding:.55rem 1rem;border-radius:4px;
  opacity:0;transform:translateX(8px);transition:var(--trans);pointer-events:none
}
@media(hover:hover){.wa-flot:hover::before{opacity:1;transform:none}}
/* Anillo que late suavemente para atraer la mirada sin ser molesto */
.wa-flot::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid #25D366;
  animation:v-latido 3s ease-out infinite
}
@keyframes v-latido{
  0%{transform:scale(1);opacity:.6}
  70%,100%{transform:scale(1.5);opacity:0}
}
/* No duplicar canales: donde está la barra inferior de la ficha, el
   flotante se esconde (en escritorio la barra no existe, vuelve a verse) */
body.tiene-wa-fijo .wa-flot{display:none}
@media(min-width:1000px){body.tiene-wa-fijo .wa-flot{display:flex}}
/* Que no tape el botón el menú abierto */
html.menu-abierto .wa-flot{display:none}

/* CTA WhatsApp fijo en móvil --------------------------------------------- */
.wa-fijo{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:var(--s3) var(--lateral);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.97);border-top:1px solid var(--borde);
  display:flex;gap:var(--s2);
  box-shadow:0 -6px 24px rgba(0,0,0,.08)
}
@supports(backdrop-filter:blur(1px)){
  .wa-fijo{background:rgba(255,255,255,.9);backdrop-filter:blur(12px)}
}
.wa-fijo .btn{flex:1;min-height:52px}
body.tiene-wa-fijo{padding-bottom:88px}
@media(min-width:1000px){
  .wa-fijo{display:none}
  body.tiene-wa-fijo{padding-bottom:0}
}

/* Listado y filtros ------------------------------------------------------ */
.listado{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:1000px){
  .listado{grid-template-columns:290px minmax(0,1fr);gap:var(--s7);align-items:start}
  .listado__filtros{position:sticky;top:calc(var(--cabecera-h) + 1.5rem)}
}

.filtros{
  background:var(--fondo-alt);border:1px solid var(--borde);
  border-radius:var(--radio);padding:var(--s4)
}
@media(min-width:640px){.filtros{padding:var(--s5)}}
.filtros__toggle{
  display:flex;width:100%;justify-content:space-between;align-items:center;
  background:none;border:0;padding:0;min-height:44px;
  font-family:var(--serif);font-size:var(--t-lg);text-align:left
}
.filtros__toggle span{transition:transform var(--trans);font-size:.8em;color:var(--dorado-osc)}
.filtros__toggle[aria-expanded="true"] span{transform:rotate(180deg)}
@media(min-width:1000px){.filtros__toggle{pointer-events:none}.filtros__toggle span{display:none}}

.filtros__grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:640px) and (max-width:999px){
  .filtros__grid{grid-template-columns:repeat(2,1fr)}
  .filtros__grid > .ancho-total,.filtros__mas{grid-column:1/-1}
}
.filtros__mas{padding-top:var(--s4);border-top:1px solid var(--borde)}
.filtros label{
  display:block;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-suave);margin-bottom:6px
}
.rango{display:flex;gap:var(--s2);align-items:center}
.rango input{min-width:0}
.rango span{color:var(--texto-suave);font-size:var(--t-sm);flex:0 0 auto}

.resultados-cab{
  display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:baseline;justify-content:space-between;margin-bottom:var(--s5)
}

/* Sin resultados = oportunidad ------------------------------------------- */
.sin-result{
  text-align:center;padding:var(--s7) var(--s4);
  background:var(--bosque);color:var(--beige);border-radius:var(--radio)
}
@media(min-width:640px){.sin-result{padding:var(--s8) var(--s6)}}
.sin-result h3{color:var(--beige);font-size:var(--t-2xl)}
.sin-result p{max-width:50ch;margin-inline:auto;color:rgba(239,231,212,.85)}

/* Formularios ------------------------------------------------------------ */
.form{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:640px){
  .form{grid-template-columns:repeat(2,1fr)}
  .form .ancho-total{grid-column:1/-1}
}
.form label{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);display:block;margin-bottom:6px
}
.form .req::after{content:' *';color:var(--dorado-osc)}
.aviso{
  padding:var(--s4);border-radius:var(--radio);font-size:var(--t-sm);
  grid-column:1/-1;margin-bottom:var(--s4)
}
.aviso--ok{background:#EAF5EC;border:1px solid #9CC7A9;color:#1B5430}
.aviso--err{background:#FBEDED;border:1px solid #DDA5A5;color:#832626}

/* Contenido del editor --------------------------------------------------- */
.contenido{font-size:var(--t-base);line-height:1.75;color:var(--texto)}
.contenido > *:first-child{margin-top:0}
.contenido > *:last-child{margin-bottom:0}
.contenido h2{font-size:var(--t-xl);margin-top:var(--s6)}
.contenido h3{font-size:var(--t-lg);margin-top:var(--s5)}
.contenido p{margin-bottom:var(--s4)}
.contenido ul,.contenido ol{margin:0 0 var(--s4);padding-left:1.35rem}
.contenido li{margin-bottom:.4rem}
.contenido li::marker{color:var(--dorado-osc)}
.contenido a{color:var(--bosque);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--arena)}
.contenido a:hover{text-decoration-color:var(--dorado)}
.contenido strong{font-weight:500;color:var(--bosque)}
.contenido img{border-radius:var(--radio);margin-block:var(--s5)}
.contenido blockquote{
  margin:var(--s5) 0;padding:var(--s2) 0 var(--s2) var(--s5);
  border-left:2px solid var(--dorado);font-family:var(--serif);
  font-size:var(--t-lg);line-height:1.5;color:var(--bosque)
}
.contenido hr{border:0;border-top:1px solid var(--borde);margin-block:var(--s6)}
.contenido table{width:100%;border-collapse:collapse;font-size:var(--t-sm);display:block;overflow-x:auto}
.contenido th,.contenido td{padding:.65rem .8rem;border-bottom:1px solid var(--borde);text-align:left}
.contenido th{background:var(--fondo-alt);font-weight:500}
.seccion--oscura .contenido{color:rgba(239,231,212,.9)}
.seccion--oscura .contenido strong{color:var(--dorado)}

/* Contacto: canales directos ----------------------------------------------
   Tarjetas grandes y tocables: el 90% va a querer el WhatsApp,
   así que va primero y con acento verde. */
.canales{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:640px){.canales{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.canales{grid-template-columns:repeat(4,1fr)}}
.canal{
  display:flex;flex-direction:column;gap:4px;
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  padding:var(--s5);transition:var(--trans);min-height:100%
}
a.canal:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--arena)}
.canal__icono{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--fondo-alt);color:var(--bosque);margin-bottom:var(--s2)
}
.canal__icono svg{width:20px;height:20px}
.canal__icono--wa{background:#E7F8EC;color:#1DA851}
.canal__k{
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-suave)
}
.canal__v{font-family:var(--serif);font-size:var(--t-lg);color:var(--bosque);line-height:1.3}
.canal__nota{font-size:var(--t-xs);color:var(--texto-suave);margin-top:2px;line-height:1.5}
.canal--info{background:var(--fondo-alt)}

/* Nosotros ----------------------------------------------------------------
   La foto es la protagonista: retrato vertical 4:5 con la firma debajo.
   Sin foto, un monograma de marca — nunca una persona de stock. */
.nosotros{display:grid;gap:var(--s7);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.nosotros{grid-template-columns:400px minmax(0,1fr);gap:var(--s8)}}
.nosotros__foto{max-width:420px}
@media(max-width:899px){.nosotros__foto{margin-inline:auto}}
.nosotros__foto img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radio);box-shadow:var(--sombra-alta)
}
.nosotros__marcador{
  aspect-ratio:4/5;border-radius:var(--radio);
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(80% 60% at 50% 20%,rgba(199,161,90,.12) 0%,transparent 60%),
    radial-gradient(120% 100% at 50% 0%,var(--medio) 0%,var(--bosque) 60%,#16291E 100%)
}
.nosotros__marcador svg{width:46%;height:auto;opacity:.9}
.nosotros__firma{
  margin-top:var(--s4);padding-top:var(--s4);
  border-top:2px solid var(--dorado);
  display:flex;flex-direction:column;gap:2px
}
.nosotros__firma strong{
  font-family:var(--serif);font-size:var(--t-lg);
  font-weight:600;letter-spacing:.03em;color:var(--bosque)
}
.nosotros__firma span{
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);line-height:1.6
}

/* Pilares */
.pilares{display:grid;gap:var(--s5);grid-template-columns:1fr;margin-top:var(--s7)}
@media(min-width:760px){.pilares{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.pilar{
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);
  padding:var(--s6) var(--s5)
}
.pilar__num{
  font-family:var(--serif);font-size:var(--t-2xl);color:var(--dorado);
  display:block;margin-bottom:var(--s3);line-height:1
}
.pilar h3{font-size:var(--t-lg);margin-bottom:var(--s2)}
.pilar p{font-size:var(--t-sm);color:var(--texto-suave);margin:0}

/* Pie -------------------------------------------------------------------- */
.pie{background:var(--negro);color:rgba(239,231,212,.72);padding:var(--s8) 0 var(--s5)}
.pie__grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:700px){.pie__grid{grid-template-columns:1.4fr 1fr 1fr}}
.pie h4{
  color:var(--dorado);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;font-family:var(--sans);font-weight:500;margin-bottom:var(--s3)
}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.pie li a{display:inline-block;padding-block:4px;transition:var(--trans)}
.pie a:hover{color:var(--dorado)}
.pie .marca{margin-bottom:var(--s4)}
.pie__legal{
  margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid rgba(239,231,212,.12);
  font-size:var(--t-xs);color:rgba(239,231,212,.45);text-align:center;line-height:1.7
}

/* Paginación ------------------------------------------------------------- */
.pag{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s7);flex-wrap:wrap}
.pag .page-numbers{
  min-width:46px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--borde-fuerte);border-radius:var(--radio);
  font-size:var(--t-sm);transition:var(--trans);padding-inline:.6rem
}
.pag .page-numbers:hover,.pag .current{
  background:var(--bosque);color:var(--beige);border-color:var(--bosque)
}
.pag .dots{border:0}

/* Animación de entrada --------------------------------------------------- */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rev.visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .rev{opacity:1;transform:none}
}

/* ==========================================================================
   VOLTERRA AUTOS (v1.5) — misma casa, otro garaje
   Bienes Raíces vive sobre claro (luz, paisaje). Autos vive sobre verde
   bosque oscuro, como la página "próximamente" que ya se compartió. Misma
   Cinzel + Jost, mismo dorado; cambian el fondo y la proporción de la foto.
   Lo único que llama la atención es el "tablero" de la ficha.
   ========================================================================== */
body.es-autos{
  --fondo:#0F1C15;
  --fondo-alt:#16291E;
  --blanco:#1B3326;              /* superficie de tarjetas, paneles y campos */
  --texto:#EFE7D4;
  --texto-suave:rgba(239,231,212,.66);
  --borde:rgba(199,161,90,.18);
  --borde-fuerte:rgba(199,161,90,.4);
  --dorado-osc:#C7A15A;          /* sobre oscuro el dorado va completo */
  --sombra:0 4px 20px rgba(0,0,0,.3);
  --sombra-alta:0 14px 44px rgba(0,0,0,.45)
}
body.es-autos .seccion--alt{background:linear-gradient(180deg,#13241B 0%,#0F1C15 100%)}
body.es-autos .seccion--oscura{border-block:1px solid rgba(199,161,90,.16)}
body.es-autos .sin-result{border:1px solid rgba(199,161,90,.3)}

/* Lo que en claro iba en verde bosque, en oscuro va en dorado o beige */
body.es-autos .card__precio,
body.es-autos .precio-grande,
body.es-autos .panel__tel{color:var(--dorado)}
body.es-autos .dato__v,
body.es-autos .canal__v,
body.es-autos .form__mas summary,
body.es-autos .contenido strong{color:var(--beige)}
body.es-autos .contenido a{color:var(--dorado);text-decoration-color:rgba(199,161,90,.5)}

/* Botones de línea y verdes sobre fondo oscuro */
body.es-autos .btn--linea{border-color:rgba(239,231,212,.45);color:var(--beige)}
body.es-autos .btn--linea:hover{border-color:var(--dorado);background:var(--dorado);color:var(--negro)}
body.es-autos .btn--verde{background:var(--medio)}
body.es-autos .btn--verde:hover{background:#3A6A50}

/* Iconos de la tarjeta y su etiqueta */
body.es-autos .ico:hover,body.es-autos .ico.activo,body.es-autos .ico:focus-visible{background:var(--dorado);border-color:var(--dorado);color:var(--negro)}
body.es-autos .ico::after{background:var(--beige);color:var(--negro);box-shadow:0 6px 18px rgba(0,0,0,.45)}
body.es-autos .ico::before{border-top-color:var(--beige)}
body.es-autos .ico--mas{color:var(--beige)}
body.es-autos .ficha-tec--compacta li{background:rgba(255,255,255,.04)}

/* Campos: flecha del select en beige, barra inferior oscura, paginación */
body.es-autos select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C7A15A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
}
body.es-autos input::placeholder,body.es-autos textarea::placeholder{color:rgba(239,231,212,.4)}
body.es-autos .wa-fijo{background:rgba(13,20,16,.95);border-top-color:var(--borde);box-shadow:0 -6px 24px rgba(0,0,0,.4)}
@supports(backdrop-filter:blur(1px)){body.es-autos .wa-fijo{background:rgba(13,20,16,.86)}}
body.es-autos .pag .page-numbers:hover,body.es-autos .pag .current{background:var(--dorado);color:var(--negro);border-color:var(--dorado)}
body.es-autos .aviso--ok{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.4);color:#BFE8CC}
body.es-autos .aviso--err{background:rgba(220,80,80,.14);border-color:rgba(220,80,80,.4);color:#F3C7C7}

/* Hero de Autos: sin foto, solo atmósfera; algo más bajo que el de inmuebles */
.hero--autos{min-height:520px}
@supports(height:100svh){.hero--autos{min-height:min(70svh,660px)}}

/* Buscador rápido del hero: manda al catálogo con los filtros aplicados */
.buscador{
  display:grid;gap:var(--s2);grid-template-columns:1fr;
  width:100%;max-width:860px;margin-top:var(--s6);
  animation:v-subir 1.3s .45s cubic-bezier(.2,.7,.3,1) both
}
.buscador select{
  background-color:rgba(13,20,16,.55);color:var(--beige);
  border-color:rgba(239,231,212,.25);backdrop-filter:blur(8px)
}
.buscador select:focus{border-color:var(--dorado)}
@media(min-width:640px){.buscador{grid-template-columns:repeat(3,1fr) auto}}

/* Tarjeta de vehículo: foto 3:2 y el año en dorado delante del nombre */
.card--auto .card__img{aspect-ratio:3/2}
.card__anio{color:var(--dorado);margin-right:.3em}
.ficha-anio{color:var(--dorado);margin-right:.25em}

/* Tablero: las tres cifras que todos preguntan (km · transmisión · tracción) */
.tablero{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(199,161,90,.10) 0%,transparent 60%),
    var(--fondo-alt);
  border:1px solid var(--borde-fuerte);border-radius:var(--radio);
  padding:var(--s5) var(--s3);margin:0 0 var(--s6)
}
.tablero__dato{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0;padding-inline:var(--s2)}
.tablero__dato+.tablero__dato{border-left:1px solid var(--borde)}
.tablero__i{color:var(--dorado);display:block;margin-bottom:2px}
.tablero__i svg{width:22px;height:22px;stroke-width:1.6}
.tablero__v{
  font-family:var(--serif);font-weight:600;line-height:1.1;color:var(--texto);
  /* Sin cortes: "AUTOMÁTICA" se partía en dos líneas en el iPhone. */
  font-size:clamp(.82rem,.45rem + 1.6vw,1.7rem);white-space:nowrap;letter-spacing:0
}
@media(max-width:420px){.tablero{padding-inline:var(--s2)}.tablero__dato{padding-inline:4px}}
.tablero__k{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave);line-height:1.4}
@media(min-width:640px){.tablero{padding:var(--s6) var(--s5)}}

/* Puntos destacados del anuncio: tres frases cortas, antes de la descripción */
.destacados{list-style:none;margin:0 0 var(--s7);padding:0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.destacados li{display:inline-flex;align-items:center;gap:.5em;font-size:var(--t-base);font-weight:400}
.destacados svg{width:18px;height:18px;color:var(--dorado);flex:0 0 auto}

/* Nota de información de la ficha comercial */
.nota-info{
  font-size:var(--t-xs);color:var(--texto-suave);line-height:1.6;max-width:70ch;
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--borde)
}

/* Galería del vehículo: 3:2 en móvil (la foto es horizontal) */
.galeria--auto .galeria__ppal{aspect-ratio:3/2}
@media(min-width:700px){.galeria--auto .galeria__ppal{aspect-ratio:16/9}}

/* ==========================================================================
   VOLTERRA AUTOS v1.6 — ficha tipo folleto, hero con protagonista
   ========================================================================== */

/* Hero: el vehículo destacado de fondo (foto + clip) y su ficha al pie.
   El clip va opaco encima de la foto (antes ambos iban semitransparentes y
   con distinto zoom: se veían dos carros encimados). El oscurecido es una
   sola capa encima, más fuerte que en inmuebles porque el carro suele ir
   centrado, detrás del logo y el texto. */
.hero--con-auto .hero__bg::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 42%,rgba(13,20,16,.55) 0%,rgba(13,20,16,.25) 100%),
    linear-gradient(180deg,rgba(13,20,16,.35) 0%,rgba(13,20,16,.15) 45%,rgba(13,20,16,.85) 100%)
}
.hero--con-auto .hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0
}
.hero--autos .hero__lema{max-width:44ch;text-wrap:balance}
.hero__auto{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:var(--s7);padding:var(--s4) var(--s6);
  border:1px solid rgba(199,161,90,.35);border-radius:var(--radio);
  background:rgba(13,20,16,.55);color:var(--beige);transition:var(--trans);
  animation:v-subir 1.3s .6s cubic-bezier(.2,.7,.3,1) both
}
@supports(backdrop-filter:blur(1px)){.hero__auto{backdrop-filter:blur(10px)}}
.hero__auto:hover{border-color:var(--dorado);background:rgba(13,20,16,.72)}
.hero__auto-nombre{font-family:var(--serif);font-size:var(--t-lg);line-height:1.3}
.hero__auto-datos{font-size:var(--t-sm);color:rgba(239,231,212,.75);letter-spacing:.02em}
.hero__auto-ver{
  display:inline-flex;align-items:center;gap:.4em;margin-top:2px;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--dorado)
}
.hero__auto-ver svg{width:14px;height:14px}

/* Precio negociable: junto al precio, no en documentación */
.precio-negociable{
  display:inline-block;margin-top:6px;font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dorado-osc)
}

/* Títulos de bloque de la ficha y notas en texto corrido */
.ficha-h2{font-size:var(--t-xl)}
.ficha-nota{color:var(--texto-suave);margin:0 0 var(--s7);max-width:70ch}

/* Hoja técnica: dos columnas de filas etiqueta/valor con líneas finas,
   como el folleto de una agencia. El tablero es la única pieza en caja. */
.hoja{margin:0 0 var(--s7);padding:0;display:grid;grid-template-columns:1fr;column-gap:var(--s7)}
@media(min-width:640px){.hoja{grid-template-columns:repeat(2,1fr)}}
.hoja__fila{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--borde);min-width:0
}
.hoja dt{color:var(--texto-suave);font-size:var(--t-sm);flex:0 0 auto}
.hoja dd{margin:0;font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}

/* Estado observado: escala con todas las opciones; la elegida en dorado */
.hoja--escala{grid-template-columns:1fr}
.hoja--escala .hoja__fila{align-items:center;flex-wrap:wrap}
.escala{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.escala__op{
  font-size:var(--t-xs);letter-spacing:.04em;line-height:1.3;
  padding:.3rem .65rem;border-radius:2px;border:1px solid var(--borde);
  color:var(--texto-suave);opacity:.55;font-weight:400
}
.escala__op.es-activa{
  opacity:1;background:var(--dorado);border-color:var(--dorado);color:var(--negro);font-weight:500
}
@media(max-width:520px){
  .hoja--escala .hoja__fila{flex-direction:column;align-items:flex-start;gap:6px}
  .escala{justify-content:flex-start}
}

/* Documentación: una línea por documento, con check si está en regla */
.docs{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;gap:var(--s2)}
.docs li{display:flex;align-items:center;gap:.6em;font-size:var(--t-base)}
.docs svg{width:18px;height:18px;flex:0 0 auto;color:var(--texto-suave)}
.docs li.es-ok svg{color:var(--dorado)}
.docs + .ficha-nota{margin-top:var(--s3)}
.docs:last-child{margin-bottom:var(--s7)}

/* Sección clara dentro de Autos ("Vende tu carro"): corta la secuencia de
   verdes oscuros. Se redefinen los tokens a los del sitio claro. */
body.es-autos .seccion--clara{
  --fondo:#FFFFFF;--fondo-alt:#FAF8F3;--blanco:#FFFFFF;
  --texto:#1F262C;--texto-suave:#5A6470;
  --borde:#E4DFD4;--borde-fuerte:#CFC7B6;--dorado-osc:#8F6B2F;
  background:linear-gradient(180deg,#F6F1E6 0%,#EFE7D4 100%);color:var(--texto)
}
body.es-autos .seccion--clara .btn--linea{border-color:var(--borde-fuerte);color:var(--texto)}
body.es-autos .seccion--clara .btn--linea:hover{border-color:var(--bosque);background:var(--bosque);color:var(--beige)}
body.es-autos .seccion--clara .form__mas summary{color:var(--bosque)}
body.es-autos .seccion--clara input::placeholder,
body.es-autos .seccion--clara textarea::placeholder{color:#9AA2AB}
body.es-autos .seccion--clara .aviso--ok{background:#EAF5EC;border-color:#9CC7A9;color:#1B5430}
body.es-autos .seccion--clara .aviso--err{background:#FBEDED;border-color:#DDA5A5;color:#832626}

/* Impresión -------------------------------------------------------------- */
@media print{
  .cabecera,.nav-movil,.wa-fijo,.pie,.filtros,.pag{display:none!important}
  body{color:#000;background:#fff}
  .seccion{padding-block:1rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}