/* ============================================================
   ADAMS Corredora de Propiedades — pages.css
   Bloques de página. Sin cajas ni sombras: la estructura la dan
   las líneas de 1px y el espacio en blanco.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   PORTADA CINEMATOGRÁFICA
   Los paisajes de Osorno a sangre bajo la barra, cruzándose uno
   sobre otro con un acercamiento lento. Encima va el titular, y
   abajo el pie de foto con el selector. Mismo planteamiento que
   la portada de InMosso, con fotos en vez de vídeo.
   ════════════════════════════════════════════════════════════ */
.hero{ padding:var(--nav-h) 0 0 }

.cine{
  position:relative; height:clamp(520px,80vh,820px);
  overflow:hidden; background:#221E1B; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end;
}
/* Dos paneles en vez de una sola foto a todo el ancho: la mayoría de los
   paisajes son verticales y, estirados a 16:9, se recortaban tanto que
   perdían el encuadre y se veían blandos. A media pantalla cada panel
   queda casi cuadrado y la foto entra mucho mejor. */
.cine-panes{ position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:1fr 1fr; gap:3px }
.cine-pane{ position:relative; overflow:hidden; background:#221E1B }
.cine-foto{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.5s var(--ease);
}
.cine-foto.on{ opacity:1 }
/* El acercamiento va con transición, no con @keyframes: al quitarle la
   clase `on` la animación se cortaría de golpe y la foto pegaría un salto
   justo mientras se está desvaneciendo. Con transición vuelve suave. */
.cine-foto img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform 8.5s linear;
}
.cine-foto.on img{ transform:scale(1.1) }

/* Sólo lo justo para que el texto se lea: el peso baja donde no hay texto
   (el centro y la derecha) y sube donde sí lo hay (izquierda y borde
   inferior, donde va la barra). La foto tiene que verse. */
.cine-velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(28,25,22,.28) 0%, rgba(28,25,22,.05) 30%, rgba(28,25,22,.2) 68%, rgba(28,25,22,.7) 100%),
    linear-gradient(100deg, rgba(28,25,22,.44) 0%, rgba(28,25,22,.12) 36%, transparent 56%);
}

.cine-txt{ position:relative; z-index:3; padding-bottom:clamp(36px,5vw,60px) }
/* El texto se queda dentro del panel izquierdo. Como los dos paneles parten
   la pantalla al medio y el .wrap está centrado, la mitad del wrap coincide
   exactamente con el borde entre paneles: una rejilla de dos columnas deja
   el texto justo donde termina la primera foto, sin números mágicos.
   Antes el titular se salía y quedaba encima de la foto de la derecha. */
@media (min-width:861px){
  .cine-txt{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(32px,4vw,64px) }
  .cine-txt > *{ grid-column:1; max-width:100% }
}
.cine-txt .label{ color:rgba(255,255,255,.72) }
.cine-txt .display{
  color:#fff; margin-top:20px;
  font-size:clamp(2.3rem,4.4vw,3.7rem); letter-spacing:-.04em; line-height:1.02;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
/* sobre foto el granate de marca se apaga: se usa el tono aclarado */
.cine-txt .display em{ color:var(--acc-lt) }
.cine-sub{
  margin-top:16px;
  font:400 clamp(1.1rem,1.7vw,1.5rem)/1.28 var(--font-d); letter-spacing:-.02em;
  color:var(--acc-lt); text-shadow:0 2px 22px rgba(0,0,0,.4);
}
.cine-txt .lead{ color:rgba(255,255,255,.82); margin-top:16px; font-size:1rem }
/* la promesa concreta, subrayada por una línea fina */
.cine-claim{
  margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.28);
  font:500 .92rem/1.5 var(--font-b); color:#fff;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:13px; margin-top:36px }
/* sobre foto los botones van claros */
.cine-txt .btn{ background:#fff; border-color:#fff; color:var(--ink) }
.cine-txt .btn:hover{ background:var(--acc); border-color:var(--acc); color:#fff }
.cine-txt .btn--line{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff }
.cine-txt .btn--line:hover{ background:#fff; border-color:#fff; color:var(--ink) }

/* barra inferior: pie de foto + selector de paisaje */
.cine-barra{ position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.2) }
.cine-barra .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 0 20px;
}
.cine-pie{
  font:400 .74rem/1 var(--font-b); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.cine-pie b{ font-weight:400; color:rgba(255,255,255,.5); margin-right:12px }
.cine-puntos{ display:flex; align-items:center; gap:9px }
/* El activo se distingue por ancho, no por grosor: una barra de 2px
   escalada en vertical cae en medio pixel y se lee gris, no blanca. */
.cine-puntos button{
  width:24px; height:2px; background:rgba(255,255,255,.32); padding:0;
  transition:background .3s var(--ease), width .3s var(--ease);
}
.cine-puntos button:hover{ background:rgba(255,255,255,.7) }
.cine-puntos button[aria-current="true"]{ background:#fff; width:46px }
@media (max-width:860px){
  /* dos paneles en 390px serían dos franjas de 190: mejor uno solo */
  .cine-panes{ grid-template-columns:1fr }
  .cine-pane:nth-child(2){ display:none }
}
@media (max-width:760px){
  .cine{ height:clamp(470px,74vh,620px) }
  .cine-barra .wrap{ flex-direction:column; align-items:flex-start; gap:13px }
  .cine-pie{ font-size:.68rem }
  .cine-puntos button{ width:18px }
  .cine-puntos button[aria-current="true"]{ width:34px }
}
@media (prefers-reduced-motion:reduce){
  .cine-foto{ transition:none }
  .cine-foto.on img{ animation:none }
}

/* ════════════════════════════════════════════════════════════
   CIFRAS
   ════════════════════════════════════════════════════════════ */
.cifras{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.cifra{ background:var(--bg); padding:26px 24px }
.cifra .n{ font:500 clamp(1.7rem,2.6vw,2.2rem)/1 var(--font-d); color:var(--acc); font-variant-numeric:tabular-nums }
.cifra .l{ font-size:.85rem; color:var(--dim); margin-top:10px; line-height:1.5; max-width:34ch }
/* dentro de la sección oscura las cifras heredan ese fondo */
.seccion.oscura .cifras{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14) }
.seccion.oscura .cifra{ background:var(--char) }
.seccion.oscura .cifra .n{ color:var(--acc-lt) }
.seccion.oscura .cifra .l{ color:#B6AEA5 }

/* ---------- bloque de Patricia ---------- */
.corredora-grid{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(36px,5vw,80px); align-items:start;
}
.corredora-grid h2 + .lead{ margin-top:24px }
@media (max-width:900px){ .corredora-grid{ grid-template-columns:1fr; gap:40px } }
@media (max-width:480px){ .cifras{ grid-template-columns:1fr } }

/* ════════════════════════════════════════════════════════════
   INTRO
   ════════════════════════════════════════════════════════════ */
.intro-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:start }
@media (max-width:900px){ .intro-grid{ grid-template-columns:1fr } }

/* ════════════════════════════════════════════════════════════
   TARJETAS DE PROPIEDAD
   Sin fondo ni borde: sólo la foto, una línea fina y el texto.
   ════════════════════════════════════════════════════════════ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3vw,44px) }
@media (max-width:1000px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr } }

.card{ display:block }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--panel) }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-o) }
.card:hover .card-media img{ transform:scale(1.04) }
.card-tags{ position:absolute; top:12px; left:12px; display:flex; flex-wrap:wrap; gap:6px }

.card-body{ padding-top:18px; display:flex; flex-direction:column }
.card-loc{ font:400 .68rem/1.5 var(--font-b); letter-spacing:.16em; text-transform:uppercase; color:var(--faint) }
.card h3{ margin:12px 0 0; line-height:1.25; font-size:1.18rem; transition:color .3s }
.card:hover h3{ color:var(--acc) }

.card-specs{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px }
.card-specs li{ font:400 .82rem/1 var(--font-b); color:var(--dim) }
.card-specs li + li::before{ content:"·"; margin-right:14px; color:var(--faint) }

/* El costo total manda: va grande y con "/ mes" al lado. El desglose queda
   debajo en cuerpo chico, porque es el respaldo del número, no el titular. */
.card-price{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line) }
.card-total{ display:flex; align-items:baseline; gap:7px }
.card-total b{
  font:500 1.6rem/1 var(--font-d); font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.card-total .mes{ font:400 .84rem/1 var(--font-b); color:var(--dim) }
.card-break{ margin-top:9px; font-size:.82rem; color:var(--dim) }

.card-go{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font:500 .82rem/1 var(--font-b); color:var(--acc);
}
.card-go .arr{ transition:translate .3s var(--ease) }
.card:hover .card-go .arr{ translate:5px 0 }

/* ════════════════════════════════════════════════════════════
   LA SUMA, EN GRANDE
   Arriendo + gastos comunes = lo que se paga. Es la propuesta de
   valor del sitio, así que va con tamaño de titular, no de tabla.
   ════════════════════════════════════════════════════════════ */
.formula{
  display:grid; grid-template-columns:1fr auto 1fr auto 1.15fr;
  align-items:center; gap:clamp(16px,2.4vw,34px);
  border:1px solid var(--line); background:var(--bg);
  padding:clamp(26px,3.4vw,44px) clamp(22px,3vw,40px);
}
.formula-parte .k{
  display:block; font:400 .66rem/1.4 var(--font-b); letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint);
}
.formula-parte b{
  display:block; margin-top:12px; font-weight:500;
  font:500 clamp(1.4rem,2.5vw,2rem)/1 var(--font-d); font-variant-numeric:tabular-nums;
  letter-spacing:-.03em; color:var(--dim);
}
/* centrados en la fila: con align-self:end quedaban por debajo de la
   insignia del recargo, descolgados de las cifras que unen */
.formula-op{
  font:400 clamp(1.3rem,2vw,1.7rem)/1 var(--font-d); color:var(--faint);
  align-self:center;
}
.formula-parte--total b{ color:var(--acc); font-size:clamp(1.9rem,3.6vw,2.9rem) }
.formula-parte--total .k{ color:var(--ink) }
.formula-alza{
  display:inline-block; margin-top:12px;
  font:500 .72rem/1 var(--font-b); letter-spacing:.06em;
  color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, transparent);
  padding:6px 9px;
}
.formula-pie{ margin-top:18px; font-size:.85rem; color:var(--dim) }
.formula-pie a{ color:var(--acc); border-bottom:1px solid color-mix(in srgb, var(--acc) 40%, transparent) }
.formula-pie a:hover{ border-bottom-color:var(--acc) }

@media (max-width:820px){
  /* en columna la suma se lee de arriba a abajo, con los signos centrados */
  .formula{ grid-template-columns:1fr; gap:14px; text-align:left }
  .formula-op{ align-self:start; padding:0 }
  .formula-parte--total{ margin-top:6px; padding-top:20px; border-top:1px solid var(--line) }
}

.comp-bloque{ margin-top:clamp(52px,6vw,84px) }
.comp-bloque > h3{ margin-bottom:22px; color:var(--dim); font-weight:400 }
.comp-bloque .nota{ margin-top:30px; max-width:74ch }

/* ════════════════════════════════════════════════════════════
   SECTORES
   ════════════════════════════════════════════════════════════ */
.sectores{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line) }
@media (max-width:900px){ .sectores{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .sectores{ grid-template-columns:1fr } }
.sector{
  display:flex; flex-direction:column; background:var(--bg);
  padding:clamp(26px,2.6vw,34px); transition:background .3s var(--ease);
}
.sector:hover{ background:var(--bg2) }
.sector-n{ font:400 .7rem/1 var(--font-b); letter-spacing:.2em; color:var(--faint) }
.sector h3{ margin:18px 0 12px; transition:color .3s }
.sector:hover h3{ color:var(--acc) }
.sector p{ color:var(--dim); font-size:.9rem; line-height:1.62; flex:1; max-width:38ch }
.sector-go{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font:500 .8rem/1 var(--font-b); color:var(--acc);
}
.sector-go .arr{ transition:translate .3s var(--ease) }
.sector:hover .sector-go .arr{ translate:4px 0 }
/* la tarjeta de consulta cierra la rejilla y se distingue del resto */
.sector--consulta{ background:var(--bg2) }
.sector--consulta:hover{ background:var(--panel) }
.sector--consulta .sector-n{ color:var(--acc) }

/* ════════════════════════════════════════════════════════════
   CIERRE
   ════════════════════════════════════════════════════════════ */
.cierre{
  padding:clamp(72px,9vw,120px) 0; border-top:1px solid var(--line); background:var(--bg2);
}
.cierre h2{ max-width:14ch }
.cierre .lead{ margin-top:22px }

/* ════════════════════════════════════════════════════════════
   COMPARADOR
   ════════════════════════════════════════════════════════════ */
/* el fondo lo pone .seccion (crema/oscura), no el bloque */
.comp-rows{ border-top:1px solid var(--line) }
.comp-row{
  display:grid; grid-template-columns:minmax(180px,1fr) 2.3fr 190px;
  gap:28px; align-items:center; padding:24px 0; border-bottom:1px solid var(--line);
}
.comp-name b{ display:block; font:500 1.05rem/1.3 var(--font-d) }
.comp-name span{ display:block; font:400 .72rem/1 var(--font-b); letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-top:8px }

.comp-bar{ display:flex; height:8px; background:rgba(42,39,36,.07) }
.comp-bar i{ display:block; height:100%; width:0; transition:width 1s var(--ease-o) }
.comp-bar .b-renta{ background:var(--acc) }
.comp-bar .b-gc{ background:var(--moss) }

.comp-total{ text-align:right }
.comp-total b{ font:500 1.25rem/1 var(--font-d); font-variant-numeric:tabular-nums }
.comp-total span{ display:block; font:400 .74rem/1 var(--font-b); color:var(--faint); margin-top:9px }
.comp-total span.up{ color:var(--acc) }

.comp-legend{ display:flex; flex-wrap:wrap; gap:26px; margin-top:26px; font-size:.82rem; color:var(--dim) }
.comp-legend i{ display:inline-block; width:20px; height:8px; margin-right:9px; vertical-align:0 }
.comp-legend .b-renta{ background:var(--acc) }
.comp-legend .b-gc{ background:var(--moss) }

@media (max-width:940px){
  .comp-row{ grid-template-columns:1fr auto; gap:14px 20px }
  .comp-bar{ grid-column:1/-1; order:3 }
}

/* ════════════════════════════════════════════════════════════
   SERVICIOS
   ════════════════════════════════════════════════════════════ */
.servicios{ border-top:1px solid var(--line) }
.servicio{
  display:grid; grid-template-columns:60px 1fr 1.4fr; gap:clamp(20px,4vw,56px);
  padding:clamp(28px,3.4vw,42px) 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.servicio .n{ font:400 .78rem/1 var(--font-b); color:var(--faint); letter-spacing:.1em }
.servicio p{ color:var(--dim); font-size:.95rem }
@media (max-width:800px){
  .servicio{ grid-template-columns:44px 1fr; gap:14px 20px }
  .servicio p{ grid-column:2 }
}

/* ════════════════════════════════════════════════════════════
   BLOQUE DE CITA
   ════════════════════════════════════════════════════════════ */

.quote .wrap{ max-width:min(880px,90vw); text-align:center }
.quote .lead{ margin:26px auto 0 }

/* ════════════════════════════════════════════════════════════
   CABECERA DE PÁGINA INTERIOR
   ════════════════════════════════════════════════════════════ */
.page-head{ padding:calc(var(--nav-h) + clamp(58px,8vw,110px)) 0 clamp(40px,5vw,64px); border-bottom:1px solid var(--line) }
.page-head .display{ max-width:16ch }
.page-head .lead{ margin-top:22px }
.crumb{ font:400 .7rem/1.7 var(--font-b); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:24px }
.crumb a:hover{ color:var(--acc) }

/* ════════════════════════════════════════════════════════════
   FILTROS
   ════════════════════════════════════════════════════════════ */
.filters{
  position:sticky; top:var(--nav-h); z-index:40;
  background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:16px 0;
}
.filters .wrap{ display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between }
.filtros-grupos{ display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center }
.filtros-selects{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center }
/* separación fina entre el grupo de tipo y el de dormitorios */
.filtros-grupos > .chips + .chips{ padding-left:22px; border-left:1px solid var(--line) }
@media (max-width:760px){
  .filtros-grupos > .chips + .chips{ padding-left:0; border-left:0 }
  .filtros-selects{ width:100% }
  .filtros-selects .sort{ flex:1 }
  .filtros-selects select{ width:100% }
}
.chips{ display:flex; flex-wrap:wrap; gap:8px }

.listado-cabeza{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:32px }
.count-total{ color:var(--faint) }
.limpiar{
  font:500 .76rem/1 var(--font-b); letter-spacing:.04em; color:var(--acc);
  border:1px solid color-mix(in srgb, var(--acc) 32%, transparent); padding:9px 13px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.limpiar:hover{ background:var(--acc); color:#fff; border-color:var(--acc) }
.chip{
  font:400 .84rem/1 var(--font-b); padding:10px 15px;
  border:1px solid var(--line); color:var(--dim); transition:.26s var(--ease);
}
/* en pantallas táctiles el chip crece hasta el mínimo razonable de dedo */
@media (pointer:coarse){
  .chip{ padding:13px 17px; font-size:.86rem }
  .limpiar{ padding:13px 16px }
  .sort select{ padding:13px }
}
.chip:hover{ border-color:var(--line-2); color:var(--ink) }
.chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg) }
.chip small{ opacity:.6; margin-left:6px }
.sort{ display:flex; align-items:center; gap:11px; font:400 .72rem/1 var(--font-b); letter-spacing:.14em; text-transform:uppercase; color:var(--faint) }
.sort select{ background:var(--bg); border:1px solid var(--line); padding:10px 12px; font:400 .84rem/1 var(--font-b); cursor:pointer }
/* el margen inferior lo pone .listado-cabeza, que agrupa el conteo y el
   botón de quitar filtros */
.count-line{ font:400 .72rem/1 var(--font-b); letter-spacing:.16em; text-transform:uppercase; color:var(--faint) }
.empty{ padding:80px 0; text-align:center; color:var(--dim) }

/* ════════════════════════════════════════════════════════════
   GALERÍA DE LA FICHA
   Un visor simple: la foto grande, flechas y tira de miniaturas.
   ════════════════════════════════════════════════════════════ */
.gal{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--panel) }
.gal figure{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease-o) }
.gal figure.on{ opacity:1 }
.gal img{ width:100%; height:100%; object-fit:cover; cursor:zoom-in }
.gal-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
  background:var(--bg); color:var(--ink); border:1px solid var(--line);
  transition:.28s var(--ease);
}
.gal-nav:hover{ background:var(--acc); border-color:var(--acc); color:#fff }
.gal-prev{ left:16px } .gal-next{ right:16px }
.gal-count{
  position:absolute; right:16px; bottom:16px; z-index:3;
  font:400 .72rem/1 var(--font-b); letter-spacing:.16em; color:var(--ink);
  background:var(--bg); padding:9px 13px; border:1px solid var(--line);
}
.gal-grupo{
  position:absolute; left:16px; top:16px; z-index:3;
  font:400 .64rem/1 var(--font-b); letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  background:var(--bg); padding:9px 13px; border:1px solid var(--line);
}
@media (max-width:620px){ .gal-nav{ width:38px; height:38px } .gal-prev{ left:8px } .gal-next{ right:8px } }

.thumbs{ display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding-bottom:6px }
.thumbs button{ flex:none; width:98px; aspect-ratio:3/2; overflow:hidden; opacity:.45; transition:opacity .3s }
.thumbs button:hover{ opacity:.8 }
.thumbs button[aria-current="true"]{ opacity:1 }
.thumbs img{ width:100%; height:100%; object-fit:cover }
.thumb-sep{ flex:none; width:1px; background:var(--line-2); margin:0 6px }

/* ---------- cuerpo de la ficha ---------- */
.detail{ display:grid; grid-template-columns:1.55fr .8fr; gap:clamp(36px,5vw,80px); align-items:start; margin-top:clamp(48px,6vw,82px) }
@media (max-width:980px){ .detail{ grid-template-columns:1fr } }
.detail-body p{ color:var(--dim) }
.detail-block{ margin-top:clamp(38px,5vw,58px) }
.detail-block > h3{ margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line) }
.feats{ columns:2; column-gap:40px }
@media (max-width:620px){ .feats{ columns:1 } }
.feats li{ break-inside:avoid; color:var(--dim); font-size:.92rem; padding:7px 0 7px 18px; position:relative }
.feats li::before{ content:""; position:absolute; left:0; top:16px; width:6px; height:1px; background:var(--acc) }
.notas{ display:flex; flex-direction:column; gap:14px }

.aside{ position:sticky; top:calc(var(--nav-h) + 26px) }
.price-box{ border:1px solid var(--line); padding:28px }
.price-box .k{ font:400 .66rem/1 var(--font-b); letter-spacing:.22em; text-transform:uppercase; color:var(--faint) }
.price-box .big{ font:500 clamp(2rem,3.2vw,2.6rem)/1 var(--font-d); margin-top:16px; font-variant-numeric:tabular-nums }
.price-box .sub{ font-size:.85rem; color:var(--dim); margin-top:12px }
.price-box .rows{ margin:24px 0 8px; border-top:1px solid var(--line) }
.price-box .row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.89rem }
.price-box .row span{ color:var(--dim) }
.price-box .row b{ font-weight:500; font-variant-numeric:tabular-nums }
.price-box .acciones{ display:flex; flex-direction:column; gap:10px; margin-top:24px }
.price-box .btn{ width:100% }
.aside-note{ font-size:.79rem; color:var(--faint); line-height:1.65; margin-top:16px }

/* ---------- barra fija de la ficha en móvil ---------- */
.barra-movil{ display:none }
@media (max-width:980px){
  .barra-movil{
    position:fixed; left:0; right:0; bottom:0; z-index:64;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:12px clamp(16px,5vw,24px);
    background:color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter:blur(12px); border-top:1px solid var(--line);
  }
  .barra-movil-precio b{
    display:block; font:500 1.15rem/1 var(--font-d); font-variant-numeric:tabular-nums;
  }
  .barra-movil-precio span{ display:block; margin-top:5px; font-size:.68rem; color:var(--dim) }
  .barra-movil .btn{ padding:13px 22px; flex:none }
  /* El hueco va sólo en la ficha, que es la única que monta la barra.
     Puesto en `body` a secas dejaba un vacío al final de todas las páginas. */
  body.con-barra{ padding-bottom:76px }

  /* El asistente y los botones de contacto viven pegados al borde inferior
     y quedaban tapados por la barra —y tapando el botón "Consultar"—.
     En la ficha suben lo justo. Los selectores llevan `body.con-barra`
     delante para ganarle a los estilos que esos scripts inyectan en
     tiempo de ejecución, sin recurrir a !important. */
  body.con-barra .aia-fab{ bottom:92px }
  body.con-barra #m3-contacto-flotante{ bottom:166px }
}

.other{ border-top:1px solid var(--line) }

/* ════════════════════════════════════════════════════════════
   CONTACTO
   ════════════════════════════════════════════════════════════ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr } }
.contact-list{ border-top:1px solid var(--line) }
.contact-list li{ padding:22px 0; border-bottom:1px solid var(--line) }
.contact-list .k{ display:block; font:400 .66rem/1 var(--font-b); letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-bottom:11px }
.contact-list .v{ display:block; font:500 1.12rem/1.45 var(--font-d) }
.contact-list a.v:hover{ color:var(--acc) }
.contact-list .v small{ display:block; font:400 .84rem/1.55 var(--font-b); color:var(--dim); margin-top:7px }

.form{ border:1px solid var(--line); padding:clamp(26px,3.4vw,40px) }
.field{ margin-bottom:20px }
.field label{ display:block; font:400 .66rem/1 var(--font-b); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:11px }
.field input,.field select,.field textarea{
  width:100%; background:var(--bg); border:1px solid var(--line);
  padding:13px 14px; font:400 .93rem/1.5 var(--font-b); transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--acc); outline:none }
.field textarea{ resize:vertical; min-height:112px }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr } }
.form .btn{ width:100% }
.form-note{ font-size:.79rem; color:var(--faint); margin-top:16px; line-height:1.62 }
.form-note a{ color:var(--acc) }