/* JC Propiedades: estilos propios sobre el sistema (assets/system.css).
   Usa solo los tokens del sistema: --bg, --surface, --ink, --muted, --line, --action, --s-*, --r-*, --t-*. */

/* ---------------------------------------------------------------- sello y marca */
.nav__logo .sello, .footer .nav__logo .sello { width: auto; height: 32px; aspect-ratio: 685 / 655; flex: none; }
.nav--split .nav__logo { gap: var(--s-3); }
@media (max-width: 639px) { .nav__logo .sello { height: 26px; } }
.footer .nav__logo { font-size: 30px; }
.footer .nav__logo .sello { height: 40px; }

/* ---------------------------------------------------------------- portada: héroe con foto */
@media (min-width: 1024px) { #hero-h { font-size: min(var(--t-h1, 72px), 66px); } }
.hero--film .hero__media img { object-position: var(--ly-pos, 50% 50%); }
@media (max-width: 639px) { #hero-h { max-width: 16ch; }
.hero--film .hero__media img { object-position: var(--ly-pos-phone, var(--ly-pos, 50% 50%)); } }

/* ---------------------------------------------------------------- buscador */
.buscador { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); align-items: end; margin-bottom: var(--s-6); }
.buscador[data-filtros] { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: var(--s-4); }
.buscador .field { min-width: 0; }
.buscador__btn .btn { width: 100%; }
@media (max-width: 1023px) {
  .buscador, .buscador[data-filtros] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buscador__btn { grid-column: 1 / -1; }
}
@media (max-width: 639px) { #propiedades .buscador .field:nth-child(n+3) { display: none; } }

/* ---------------------------------------------------------------- tarjeta de propiedad */
.prop-grid { align-items: stretch; }
.prop-grid > div { display: flex; }
.prop-card { display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); width: 100%; min-height: 0; }
.prop-card[hidden] { display: none; }
.prop-card__media { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 3 / 2; background: var(--surface); }
.prop-card__media img, .prop-card__media .img-falta { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .prop-card:hover .prop-card__media img { transform: scale(1.03); } }
.prop-card__body { display: grid; gap: var(--s-2); align-content: start; }
.prop-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); }
.prop-card__title { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: 0; }
.prop-card__title a { color: inherit; text-decoration: none; }
.prop-card__title a::after { content: ""; }
.prop-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.prop-card__specs { color: var(--ink); font-size: var(--t-body); }
.prop-card__price { font: var(--display-weight) 26px/1.15 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.prop-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-1); }
.prop-card__wa { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
.prop-card__wa:hover { text-decoration-color: currentColor; }
.badge--estado { background: var(--ink); color: var(--bg); }
.badge--ejemplo { position: absolute; left: var(--s-3); top: var(--s-3); background: var(--bg); color: var(--ink); }
.mas { margin-top: var(--s-6); }
/* portada: las dos filas de tarjetas ocupan su pantalla sin estirar las fotos */
#propiedades .prop-grid.fill { flex: 0 0 auto; }
@media (max-width: 1023px) and (min-width: 640px) { #propiedades .prop-grid > div:nth-child(3) { display: none; } }
@media (max-width: 639px) { #propiedades .prop-grid > div:nth-child(n+2) { display: none; } }

/* ---------------------------------------------------------------- servicios, educación */
.rows--links .rows__name { color: var(--ink); text-decoration: none; }
.rows--links .rows__name:hover { text-decoration: underline; text-underline-offset: 4px; }
.rows__value { color: var(--muted); font-size: var(--t-small); }
.frame--fill { min-height: 0; }
.frame--photo .frame__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- nosotros */
.hechos { display: grid; gap: 0; border-top: 1px solid var(--line); }
.hechos li { display: grid; grid-template-columns: 10ch minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.hechos span { color: var(--muted); font-size: var(--t-small); padding-top: 2px; }
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(600px, 100%); background: var(--surface); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }

/* ---------------------------------------------------------------- contacto y formularios */
.contacto { display: grid; gap: 0; border-top: 1px solid var(--line); }
.contacto > div { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.contacto dt { font-size: var(--t-small); color: var(--muted); }
.contacto dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.provisorio { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-3); border-radius: 999px; border: 1px dashed var(--line-strong); font-size: var(--t-label); color: var(--muted); }
.form-panel { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-7); }
@media (max-width: 639px) { .form-panel { padding: var(--s-5); } }
.jc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); --error: color-mix(in oklab, #d92d20 72%, var(--ink)); }
.jc-form > :is(.field--full, .btn-row, p, .consent) { grid-column: 1 / -1; }
@media (max-width: 639px) { .jc-form { grid-template-columns: minmax(0, 1fr); } }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); line-height: 1.5; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--action); flex: none; }
.consent a { color: inherit; text-underline-offset: 3px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jc-form .btn-row .btn { min-width: 200px; }
@media (max-width: 639px) { .jc-form .btn-row .btn { width: 100%; } }

/* ---------------------------------------------------------------- páginas interiores */
main.sub > section { height: auto; min-height: 0; padding: 0; }
main.sub > section > .wrap { height: auto; display: block; }
main.sub > section > .wrap.grid { display: grid; }
main.sub .stack-6 > * + *, main.sub .stack-4 > * + * { margin-top: 0; }
.sub-head { padding-top: calc(var(--nav) + var(--s-8)) !important; padding-bottom: var(--s-7) !important; }
.sub-head .wrap { display: grid !important; gap: var(--s-4); }
.sub-head h1 { font: var(--display-weight) clamp(36px, 3vw + 20px, 60px)/1.05 var(--font-display); letter-spacing: var(--display-tracking-xl); max-width: 22ch; text-wrap: balance; }
.sub-body { padding-block: var(--s-7) var(--s-9) !important; }
.sub-body--alt { background: var(--surface); padding-block: var(--s-9) !important; }
.sub-body--alt .form-panel { background: var(--bg); }
.migas { font-size: var(--t-small); color: var(--muted); }
.migas a { color: inherit; text-underline-offset: 3px; }
.measure-wrap { max-width: 760px; }
.h3 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); }
.resultado { font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-5); }
.vacio { display: grid; gap: var(--s-3); padding: var(--s-8) 0; max-width: 60ch; }
.vacio h2 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); }
main.sub .prop-grid { row-gap: var(--s-8); }

/* ficha de propiedad */
.galeria { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s-2); aspect-ratio: 16 / 7; border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-8); }
.galeria__main { grid-row: 1 / -1; }
.galeria > div { min-height: 0; background: var(--surface); }
.galeria img, .galeria .img-falta { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria:not(:has(.galeria__item:nth-child(3))) { grid-template-columns: 2fr 1fr; }
.galeria:not(:has(.galeria__item:nth-child(3))) .galeria__item { grid-row: 1 / -1; }
.galeria--una { grid-template-columns: 1fr; }
@media (max-width: 767px) { .galeria { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; } .galeria > div { aspect-ratio: 4 / 3; } .galeria__item { display: none; } }
.detalle { row-gap: var(--s-8); }
.resumen-precio { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); }
.resumen-precio .btn { width: 100%; }
.precio-grande { font: var(--display-weight) 40px/1.1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.compartir { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips li { padding: var(--s-2) var(--s-4); border-radius: 999px; background: var(--surface); font-size: var(--t-small); }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); border-top: 1px solid var(--line); }
.ficha > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.ficha dt { color: var(--muted); font-size: var(--t-small); }
.ficha dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .ficha { grid-template-columns: 1fr; } }

/* texto largo de artículos y fichas */
.prosa { display: grid; gap: var(--s-4); font-size: 17px; line-height: 1.7; }
.prosa h2 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); margin-top: var(--s-5); }
.prosa h3 { font: 500 var(--t-lead)/1.3 var(--font-text); margin-top: var(--s-3); }
.prosa ul, .prosa ol { display: grid; gap: var(--s-2); padding-left: 1.25em; }
.prosa ul { list-style: disc; } .prosa ol { list-style: decimal; }
.prosa a { color: var(--ink); text-underline-offset: 3px; }
.prosa strong { font-weight: 500; }
.art-hero { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.art-hero img, .art-hero .img-falta { width: 100%; height: 100%; object-fit: cover; display: block; }
.nota { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.cta-art { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-7); border-radius: var(--r-lg); background: var(--surface); }

/* blog */
.categorias { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-btn { min-height: 44px; padding: 0 var(--s-5); border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.art-grid { row-gap: var(--s-8); }
.art-card { display: grid; gap: var(--s-3); align-content: start; }
.art-card[hidden] { display: none; }
.art-card__media { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.art-card__media img, .art-card__media .img-falta { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .art-card:hover .art-card__media img { transform: scale(1.03); } }
.art-card h2 a { color: inherit; text-decoration: none; }
.art-card h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 640px) and (max-width: 1023px) { .art-grid > .span-4, main.sub .prop-grid > .span-4 { grid-column: auto / span 6; } }

/* foto que falta: recuadro sobrio con la casa del sello */
.img-falta { display: grid; place-items: center; width: 100%; height: 100%; background: var(--surface); color: var(--muted); }
.img-falta svg { width: 48px; height: 48px; }

/* tablet y celular: los bloques que llenan la pantalla en computador crecen con su contenido */
@media (max-width: 1023px) {
  main > section.section > .wrap > .fill, main > section.section > .wrap > .group > .fill { flex: none; }
  .frame--fill { aspect-ratio: 4 / 3; height: auto; }
  main > section .grid.fill > .frame--fill { margin-top: var(--s-7); }
}

/* pantallas bajas de computador (1024 a 1279): se esconden líneas secundarias para que cada sección quepa */
@media (min-width: 1024px) and (max-width: 1279px) {
  #propiedades .section-head p, #educacion .section-head p, #servicios .section-head p { display: none; }
  #educacion .rows > li:nth-child(4) { display: none; }
  #servicios .rows > li > p { display: none; }
}
@media (min-width: 640px) and (max-width: 1279px) {
  #propiedades .prop-card__media { aspect-ratio: 16 / 9; }
  #propiedades .buscador { margin-bottom: var(--s-4); }
  #propiedades .mas { margin-top: var(--s-3); }
  #propiedades .prop-card { gap: var(--s-3); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .prop-grid > .span-4 { grid-column: auto / span 6; }
}

/* el cierre: el botón grande puede partir en dos líneas en pantallas muy angostas */
.closing__cta .btn--xl { max-width: 100%; white-space: normal; text-align: left; }
@media (min-width: 1280px) {
  #propiedades .prop-card__media { aspect-ratio: 16 / 10; }
  #propiedades .buscador { margin-bottom: var(--s-5); }
}
.contacto-foto { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); }
.contacto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1279px) and (min-width: 1024px) { .contacto-foto { display: none; } }