/* Vivir en Puebla — hoja de estilos (v2, limpia)
   Concepto: blanco de cal y azul cobalto, como las placas de talavera con los nombres de las calles de Puebla.
   Mucho aire, pocas cajas, un solo color de marca. Lo memorable: las placas con el nombre de cada zona.
   Tipografía: Alegreya SC para las placas (letra de azulejo), Alegreya para títulos, Alegreya Sans para texto. */

@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Alegreya SC"; src: url("../fonts/alegreya-sc-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya SC"; src: url("../fonts/alegreya-sc-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fondo: #FFFFFF;
  --cal: #F5F6F2;          /* fondo alterno, blanco de cal */
  --superficie: #FFFFFF;
  --basalto: #1D2026;      /* texto */
  --gris: #5F6672;
  --linea: #E3E5E0;
  --talavera: #1E3F94;     /* único color de marca */
  --talavera-hover: #16316F;
  --talavera-tinta: #EEF2FB;
  --azulejo: #FBFBF7;      /* blanco del azulejo */
  --maiz: #D99A22;         /* solo en detalles de los azulejos */
  --nopal: #2E6B4E;
  --nopal-tinta: #E3F0E9;
  --wa: #137A43;
  --wa-hover: #0F6336;
  --sombra: 0 1px 2px rgb(29 32 38 / .05), 0 6px 20px rgb(29 32 38 / .06);
  --f-placa: "Alegreya SC", "Alegreya", Georgia, serif;
  --f-titulo: "Alegreya", "Iowan Old Style", Georgia, serif;
  --f-texto: "Alegreya Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-xs: .875rem; --t-sm: 1rem; --t-md: 1.125rem; --t-lg: 1.375rem; --t-xl: 1.75rem; --t-2xl: 2.25rem;
  --t-hero: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  --ancho: 1160px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --r: 10px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--fondo); color: var(--basalto); font-family: var(--f-texto); font-size: var(--t-md); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--talavera); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--talavera-hover); }
:focus-visible { outline: 3px solid var(--maiz); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 700; line-height: 1.12; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-hero); font-weight: 800; letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); letter-spacing: -.005em; }
h3 { font-size: var(--t-lg); }
p { margin: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--gris); }
.small { font-size: var(--t-xs); }

/* ---------- contenedor ---------- */
.wrap { max-width: var(--ancho); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.prosa { max-width: 66ch; }
.prosa > * + * { margin-top: 1em; }
.stack { display: grid; gap: var(--gap, 1rem); }
.stack > *, .detalle > *, .guia > *, .calc > * { min-width: 0; }
.seccion { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.seccion + .seccion { padding-top: 0; }
.seccion.alterna { background: var(--cal); }
.seccion.alterna + .seccion, .seccion + .seccion.alterna { padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.seccion-cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: 2rem; }
.seccion-cabeza p { max-width: 56ch; color: var(--gris); margin-top: .5rem; }

/* ---------- encabezado ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--fondo); }
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera .wrap { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.marca { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav a { color: var(--gris); text-decoration: none; padding: .45rem .7rem; border-radius: 999px; font-weight: 500; }
.nav a:hover { color: var(--basalto); background: var(--cal); }
.nav a[aria-current="page"] { color: var(--talavera); background: var(--talavera-tinta); }
.menu-btn { display: none; }
@media (max-width: 1000px) {
  .menu-btn { display: inline-flex; align-items: center; background: none; border: 1px solid var(--linea); color: var(--basalto); font: 500 1rem var(--f-texto); padding: .45rem .8rem; border-radius: 999px; }
  .nav { position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; background: var(--fondo); border-bottom: 1px solid var(--linea); padding: .5rem var(--gutter-r) 1rem var(--gutter); box-shadow: var(--sombra); }
  .nav[data-abierto="false"] { display: none; }
  .nav a { padding: .85rem .5rem; font-size: 1.15rem; border-radius: 6px; }
  .cabecera .btn-wa .txt { display: none; }
}

/* logotipo: placa de talavera con el nombre */
.logo-placa { display: inline-grid; place-items: center; padding: .38rem .9rem .42rem; background: var(--azulejo); color: #1E3F94; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #1E3F94, inset 0 0 0 4px var(--azulejo), inset 0 0 0 5px #1E3F94; font: 700 1.12rem/1 var(--f-placa); letter-spacing: .03em; white-space: nowrap; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 700 1rem/1.2 var(--f-texto); padding: .8rem 1.25rem; border-radius: 999px; border: 1px solid transparent; background: var(--talavera); color: #fff; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.btn:hover { background: var(--talavera-hover); color: #fff; }
.btn-sec { background: transparent; color: var(--basalto); border-color: var(--linea); }
.btn-sec:hover { background: var(--cal); color: var(--basalto); border-color: var(--gris); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-hover); color: #fff; }
.btn-chico { padding: .5rem .9rem; font-size: .95rem; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn[disabled] { opacity: .6; cursor: progress; }
.enlace { font-weight: 700; text-decoration: none; }
.enlace:hover { text-decoration: underline; }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 500; padding: .22rem .65rem; border-radius: 999px; background: var(--cal); color: var(--basalto); border: 1px solid var(--linea); max-width: 100%; }
.chip.azul { background: var(--talavera-tinta); color: var(--talavera); border-color: transparent; }
.chip.nopal { background: var(--nopal-tinta); color: var(--nopal); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- héroe ---------- */
.heroe { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.heroe .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.heroe h1 { max-width: 13ch; }
.heroe .bajada { font-size: clamp(1.15rem, 1rem + .45vw, 1.35rem); color: var(--gris); max-width: 44ch; margin-top: 1.1rem; }
.heroe-foto { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--cal); }
.heroe-foto img { width: 100%; height: 100%; object-fit: cover; }
.heroe-datos { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .98rem; color: var(--gris); }
.heroe-datos b { color: var(--basalto); }
@media (max-width: 860px) { .heroe .wrap { grid-template-columns: minmax(0, 1fr); } .heroe-foto { aspect-ratio: 16 / 9; } }

.buscador { margin-top: 1.75rem; max-width: 660px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, 1.15fr) auto; gap: .4rem; padding: .4rem; border: 1px solid var(--linea); border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra); }
.buscador select { border: 0; background: transparent; border-radius: 12px; }
.buscador select:hover { background: var(--cal); }
@media (max-width: 640px) { .buscador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .buscador > :first-of-type, .buscador > button { grid-column: 1 / -1; } }

/* ---------- placas de talavera (una por zona) ---------- */
.placas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1rem); }
@media (max-width: 900px) { .placas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .placas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.placa { position: relative; display: grid; place-content: center; justify-items: center; gap: .35rem; min-height: 132px; padding: 1.6rem 1.1rem; text-align: center; text-decoration: none;
  background: var(--azulejo); color: #1E3F94; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #1E3F94, inset 0 0 0 6px var(--azulejo), inset 0 0 0 7px #1E3F94, 0 1px 2px rgb(0 0 0 / .06);
  transition: transform .2s ease, box-shadow .2s ease; }
.placa:hover { color: #1E3F94; transform: translateY(-2px); box-shadow: inset 0 0 0 2px #1E3F94, inset 0 0 0 6px var(--azulejo), inset 0 0 0 7px #1E3F94, 0 10px 24px rgb(30 63 148 / .14); }
.placa-nombre { font: 700 clamp(1.05rem, .9rem + .5vw, 1.3rem)/1.1 var(--f-placa); letter-spacing: .02em; text-wrap: balance; }
.placa-sub { font: 500 .85rem/1.2 var(--f-texto); color: #4A5A86; }
.placa .esq { position: absolute; width: 16px; height: 16px; }
.placa .esq.a { top: 10px; left: 10px; } .placa .esq.b { top: 10px; right: 10px; transform: scaleX(-1); }
.placa .esq.c { bottom: 10px; left: 10px; transform: scaleY(-1); } .placa .esq.d { bottom: 10px; right: 10px; transform: scale(-1); }
@media (max-width: 600px) { .placa { min-height: 112px; padding: 1.4rem .8rem; } .placa .esq { width: 14px; height: 14px; } }

/* ---------- tarjetas de propiedad ---------- */
.grid-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 2rem 1.25rem; }
.prop { display: grid; align-content: start; gap: .7rem; color: var(--basalto); text-decoration: none; }
.prop:hover { color: var(--basalto); }
.prop:hover .prop-foto img { transform: scale(1.03); }
.prop:hover .prop-titulo { text-decoration: underline; text-underline-offset: .2em; }
.prop-foto { position: relative; aspect-ratio: 4 / 3; background: var(--cal); border-radius: 12px; overflow: hidden; }
.prop-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.prop-foto .sin-foto { width: 100%; height: 100%; display: grid; place-items: center; }
.prop-foto .sin-foto svg { width: 30%; height: auto; }
.prop-foto .chips { position: absolute; top: .6rem; left: .6rem; }
.prop-foto .chip { background: rgb(255 255 255 / .94); color: #1D2026; border-color: transparent; }
.prop-cuerpo { display: grid; gap: .15rem; }
.prop-precio { font-family: var(--f-texto); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.prop-precio small { font-size: .85rem; font-weight: 500; color: var(--gris); }
.prop-precio del { font-size: .9rem; font-weight: 400; color: var(--gris); margin-left: .35rem; }
.prop-titulo { font-weight: 500; line-height: 1.35; }
.prop-zona { font-size: .95rem; color: var(--gris); }
.prop-datos { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .93rem; color: var(--gris); font-variant-numeric: tabular-nums; margin-top: .25rem; }
.prop-datos b { color: var(--basalto); font-weight: 700; }

/* ---------- catálogo ---------- */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linea); }
.campo { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.campo label, .campo legend { font-size: .92rem; font-weight: 700; color: var(--basalto); padding: 0; }
.campo small { color: var(--gris); font-size: .85rem; }
input, select, textarea { font: inherit; font-size: 1rem; color: var(--basalto); background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; padding: .7rem .8rem; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--talavera); outline-offset: 0; border-color: var(--talavera); }
.resumen-filtros { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-block: 1.25rem 1.75rem; }
.vacio { padding: 3rem 1rem; text-align: center; color: var(--gris); border: 1px dashed var(--linea); border-radius: var(--r); }
.vacio .btn { margin-top: 1rem; }

/* ---------- detalle de propiedad ---------- */
.detalle { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .detalle { grid-template-columns: minmax(0, 1fr); } .ficha-lado { position: static !important; } }
.galeria-principal { aspect-ratio: 3 / 2; background: var(--cal); border-radius: 14px; overflow: hidden; position: relative; }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-nav { position: absolute; inset: 50% .6rem auto; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.galeria-nav button { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .92); color: #1D2026; font-size: 1.4rem; cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / .18); }
.galeria-cuenta { position: absolute; right: .7rem; bottom: .7rem; background: rgb(0 0 0 / .55); color: #fff; font-size: .85rem; padding: .15rem .55rem; border-radius: 999px; }
.miniaturas { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: .4rem; overflow-x: auto; margin-top: .5rem; padding-bottom: .25rem; }
.miniaturas button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; aspect-ratio: 3/2; cursor: pointer; background: var(--cal); }
.miniaturas button[aria-current="true"] { border-color: var(--talavera); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.ficha-lado { position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); display: grid; gap: 1rem; }
.caja { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 1.4rem; }
.datos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem 1.5rem; padding-block: 1.25rem; border-block: 1px solid var(--linea); }
.datos-grid b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.datos-grid span { font-size: .92rem; color: var(--gris); }
.descripcion { white-space: pre-line; }

/* ---------- mapa de zonas ---------- */
.mapa-app { display: grid; grid-template-columns: minmax(0, 1fr) 420px; height: calc(100dvh - 68px - env(safe-area-inset-top, 0px)); min-height: 520px; }
.mapa-wrap { position: relative; min-width: 0; min-height: 0; }
.mapa-wrap #mapa { position: absolute; inset: 0; background: #EEF1F5; }
.panel { overflow-y: auto; background: var(--fondo); border-left: 1px solid var(--linea); padding: 1.4rem max(1.4rem, env(safe-area-inset-right, 0px)) 2rem 1.4rem; display: grid; align-content: start; gap: 1.2rem; }
.panel > * { min-width: 0; }
.panel-zona-cabeza .placa { min-height: 96px; }
.lista-placas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.lista-placas .placa { min-height: 92px; padding: 1.2rem .6rem; cursor: pointer; border: 0; font: inherit; }
.lista-placas .placa .placa-nombre { font-size: 1rem; }
.tabla-traslados { width: 100%; border-collapse: collapse; font-size: .98rem; table-layout: fixed; }
.tabla-traslados td { padding: .45rem 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-traslados td:first-child { color: var(--gris); width: 52%; }
.tabla-traslados td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; padding-left: 1rem; overflow-wrap: anywhere; }
.pros-contras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1.25rem; }
.pros-contras ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.pros-contras li + li { margin-top: .3rem; }
.pros-contras h4 { font-family: var(--f-texto); font-size: 1rem; }
.pros-contras .pros h4 { color: var(--nopal); }
.pros-contras .contras h4 { color: var(--gris); }
.etiqueta-zona { background: transparent; border: 0; box-shadow: none; font: 700 13px/1.1 var(--f-placa); color: #1E3F94; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; white-space: nowrap; }
#mapa.sin-etiquetas .etiqueta-zona, #mapa.sin-chicas .etiqueta-zona.chica { display: none; }
.leaflet-container { font-family: var(--f-texto); }
.leaflet-tile-pane { filter: grayscale(.85) brightness(1.04) contrast(.92); }
.pin-prop { width: 12px; height: 12px; border-radius: 50%; background: #1E3F94; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .25); }
.leaflet-popup-content { margin: 10px; font-size: 14px; }
.popup-prop { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .6rem; color: #1D2026; text-decoration: none; width: 260px; }
.popup-prop img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; background: #F5F6F2; }
.mapa-controles { position: absolute; z-index: 500; top: .75rem; right: .75rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.mapa-controles button { font: 700 .9rem var(--f-texto); padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--linea); background: var(--superficie); color: var(--basalto); cursor: pointer; box-shadow: var(--sombra); }
.mapa-controles button[aria-pressed="true"] { background: #1E3F94; color: #fff; border-color: #1E3F94; }
@media (max-width: 900px) {
  .mapa-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 55dvh auto; height: auto; }
  .panel { border-left: 0; border-top: 1px solid var(--linea); padding-inline: var(--gutter) var(--gutter-r); }
}

/* comparador y tablas */
.comparador { overflow-x: auto; }
.comparador table { border-collapse: collapse; min-width: 520px; width: 100%; font-size: .98rem; }
.comparador th, .comparador td { padding: .65rem .75rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.comparador thead th { font-family: var(--f-placa); font-size: 1.1rem; color: var(--talavera); }
.comparador tbody th { color: var(--gris); font-weight: 500; width: 11rem; }

/* ---------- guía de zona ---------- */
.guia-cabeza { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); border-bottom: 1px solid var(--linea); }
.guia-cabeza .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.guia-cabeza .placa { min-height: 170px; }
.guia-cabeza .placa .placa-nombre { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.guia-cabeza .tagline { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); color: var(--gris); margin-top: .7rem; max-width: 52ch; }
.migas { font-size: .95rem; color: var(--gris); margin-bottom: .6rem; }
.migas a { color: var(--gris); }
@media (max-width: 760px) { .guia-cabeza .wrap { grid-template-columns: minmax(0, 1fr); } .guia-cabeza .placa { order: -1; max-width: 340px; min-height: 130px; } .guia-cabeza .chips { display: none; } }
.guia { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-block: 2.5rem 4rem; }
@media (max-width: 960px) { .guia { grid-template-columns: minmax(0, 1fr); } .en-corto { position: static !important; } }
.guia-cuerpo { display: grid; gap: 3rem; min-width: 0; }
.guia-cuerpo section { display: grid; gap: 1rem; scroll-margin-top: 90px; }
.guia-cuerpo h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem); }
.en-corto { position: sticky; top: calc(88px + env(safe-area-inset-top, 0px)); display: grid; gap: 1rem; }
.en-corto dl { margin: 0; display: grid; }
.en-corto dt { font-size: .9rem; color: var(--gris); margin-top: .7rem; }
.en-corto dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.lugares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1.5rem 2rem; }
.lugares h3 { font-family: var(--f-texto); font-size: 1.05rem; margin-bottom: .4rem; }
.lugares ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.lugares li b { display: block; font-weight: 500; }
.lugares li span { font-size: .92rem; color: var(--gris); }
.faq details { border-top: 1px solid var(--linea); padding-block: 1rem; }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--talavera); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: .6rem; max-width: 68ch; color: var(--gris); }
.fuentes { font-size: .92rem; color: var(--gris); }
.fuentes ol { padding-left: 1.2rem; margin: .5rem 0 0; display: grid; gap: .25rem; }
.fuentes a { color: var(--gris); word-break: break-word; }
.nota { font-size: .95rem; color: var(--gris); border-left: 2px solid var(--talavera); padding: .15rem 0 .15rem .9rem; }

/* índice de zonas (guía general) */
.indice-zonas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.25rem 2rem; }
.indice-zonas a { display: grid; gap: .2rem; padding-block: .9rem; border-top: 1px solid var(--linea); color: var(--basalto); text-decoration: none; }
.indice-zonas a:hover b { color: var(--talavera); }
.indice-zonas b { font-family: var(--f-placa); font-size: 1.2rem; color: var(--talavera); }
.indice-zonas p { font-size: .97rem; color: var(--gris); }
.indice-zonas .rango { font-size: .92rem; font-weight: 700; }

/* ---------- formularios ---------- */
.bloque-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); background: var(--cal); border-radius: 20px; }
.bloque-lead p { color: var(--gris); }
.bloque-lead .form-lead-wrap, .bloque-lead > .caja { background: var(--superficie); padding: 1.4rem; border-radius: 14px; box-shadow: var(--sombra); }
@media (max-width: 800px) { .bloque-lead { grid-template-columns: minmax(0, 1fr); } }
.form-lead { display: grid; gap: .9rem; }
.form-lead .fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .9rem; }
.form-lead .legal { font-size: .85rem; color: var(--gris); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-ok { display: grid; gap: .75rem; }
.form-ok h3 { color: var(--nopal); }
.form-error { color: #B3401F; font-size: .95rem; }

/* ---------- herramientas en inicio ---------- */
.herramientas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.herramientas > a { display: grid; align-content: space-between; gap: 1.5rem; padding: 1.6rem; border-radius: 16px; text-decoration: none; color: var(--basalto); border: 1px solid var(--linea); background: var(--superficie); min-height: 220px; transition: border-color .15s; }
.herramientas > a:hover { border-color: var(--talavera); color: var(--basalto); }
.herramientas h3 { font-size: 1.5rem; }
.herramientas p { color: var(--gris); margin-top: .5rem; }
.herramientas .ir { font-weight: 700; color: var(--talavera); }
@media (max-width: 860px) { .herramientas { grid-template-columns: minmax(0, 1fr); } .herramientas > a { min-height: 0; } }

/* quién soy */
.sobre { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.sobre-foto { border-radius: 18px; overflow: hidden; background: #15110F; aspect-ratio: 4 / 5; }
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sobre-texto { display: grid; gap: 1.1rem; }
.sobre-texto p { color: var(--gris); max-width: 58ch; }
.sobre-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem 1.5rem; padding-block: 1.25rem; border-block: 1px solid var(--linea); }
.sobre-datos b { display: block; font-size: 1.05rem; }
.sobre-datos span { color: var(--gris); font-size: .95rem; }
@media (max-width: 760px) { .sobre { grid-template-columns: minmax(0, 1fr); } .sobre-foto { max-width: 320px; } }

/* ---------- calculadora y perfilamiento ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } }
.calc-form { display: grid; gap: 1.2rem; }
.fila2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1rem; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; background: var(--superficie); width: fit-content; max-width: 100%; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { padding: .45rem 1rem; cursor: pointer; font-weight: 500; color: var(--gris); font-size: 1rem; border-radius: 999px; }
.seg input:checked + label { background: var(--talavera); color: #fff; }
.seg input:focus-visible + label { outline: 3px solid var(--maiz); outline-offset: 1px; }
.prefijo { position: relative; }
.prefijo span { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--gris); pointer-events: none; }
.prefijo input { padding-left: 1.65rem; font-variant-numeric: tabular-nums; }
.escenarios { display: grid; gap: .75rem; }
.escenario { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline; padding: 1.1rem 1.25rem; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); }
.escenario.mejor { border-color: var(--talavera); box-shadow: 0 0 0 1px var(--talavera); }
.escenario h3 { font-family: var(--f-texto); font-size: 1.05rem; }
.escenario .monto { font-family: var(--f-titulo); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--talavera); grid-row: span 2; align-self: center; }
.escenario p { font-size: .92rem; color: var(--gris); }
.escenario .detalle-esc { grid-column: 1 / -1; font-size: .92rem; color: var(--gris); display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; margin-top: .35rem; font-variant-numeric: tabular-nums; }
.escenario .detalle-esc b { color: var(--basalto); }
.escenario.no-aplica { opacity: .55; }
.pasos-perfil { display: flex; gap: .4rem; margin-bottom: .25rem; }
.pasos-perfil i { height: 4px; flex: 1; border-radius: 999px; background: var(--linea); }
.pasos-perfil i.on { background: var(--talavera); }
.perfil fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .9rem; }
.perfil legend { font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 700; padding: 0; margin-bottom: .2rem; }

/* ---------- quiz ---------- */
.quiz { max-width: 760px; margin-inline: auto; }
.quiz-progreso { height: 4px; background: var(--linea); border-radius: 999px; overflow: hidden; margin-bottom: 2rem; }
.quiz-progreso i { display: block; height: 100%; background: var(--talavera); width: 0; transition: width .3s; }
.quiz fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1rem; }
.quiz legend { font-family: var(--f-titulo); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); font-weight: 700; line-height: 1.15; margin-bottom: 1rem; padding: 0; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .6rem; }
.opciones input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opciones label { display: block; padding: 1rem 1.1rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); cursor: pointer; font-weight: 500; line-height: 1.3; }
.opciones label:hover { border-color: var(--gris); }
.opciones label small { display: block; color: var(--gris); font-weight: 400; margin-top: .2rem; }
.opciones input:checked + label { border-color: var(--talavera); box-shadow: inset 0 0 0 1px var(--talavera); background: var(--talavera-tinta); }
.opciones input:focus-visible + label { outline: 3px solid var(--maiz); outline-offset: 2px; }
.quiz-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.resultado-quiz { display: grid; gap: 1.5rem; }
.ganadora { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (max-width: 600px) { .ganadora { grid-template-columns: minmax(0, 1fr); } }
.medidor { display: flex; align-items: center; gap: .6rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.barra { height: 8px; border-radius: 999px; background: var(--talavera-tinta); overflow: hidden; display: flex; flex: 1; }
.barra i { display: block; height: 100%; background: var(--talavera); }

/* ---------- pie ---------- */
.pie { margin-top: 3rem; background: var(--cal); border-top: 1px solid var(--linea); padding-block: 3rem calc(2rem + env(safe-area-inset-bottom, 0px)); font-size: 1rem; }
.pie .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.pie h4 { font-family: var(--f-texto); font-size: .95rem; color: var(--basalto); margin-bottom: .6rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pie a { color: var(--gris); text-decoration: none; }
.pie a:hover { color: var(--talavera); text-decoration: underline; }
.pie p { color: var(--gris); }
.pie .legal { grid-column: 1 / -1; font-size: .88rem; color: var(--gris); border-top: 1px solid var(--linea); padding-top: 1.25rem; display: grid; gap: .4rem; }
@media (max-width: 800px) { .pie .wrap { grid-template-columns: 1fr 1fr; } .pie .wrap > :first-child { grid-column: 1 / -1; } }

.wa-flotante { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgb(0 0 0 / .22); }
.wa-flotante svg { width: 30px; height: 30px; }
.wa-flotante:hover { background: var(--wa-hover); color: #fff; }
@media (min-width: 1001px) { .wa-flotante { display: none; } }

.aviso-preview { background: var(--talavera-tinta); color: var(--basalto); font-size: .95rem; padding: .6rem 0; }