/* Páginas institucionales: /tasaciones, /nosotros y /politica-de-privacidad.
   Complementa /css/seo-components.css (.seo-section, .faq-list, .cta-band, .btn, .grid-propiedades, .form-privacy)
   y usa las variables de /css/root/root.css (--color1, --color2, --fondo, --fuente). */


/* ---------- Cabecera (texto + formulario / foto) ---------- */
.inst-hero {
  background: linear-gradient(180deg, #e6edf4 0%, var(--fondo) 100%);
  font-family: var(--fuente), sans-serif;
  color: #1d2b38;
}
.inst-hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.inst-kicker {
  margin: 0 0 8px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a5a6a;
}
.inst-hero h1 {
  margin: 0 0 16px;
  color: var(--color1);
  font-size: 2.4em;
  line-height: 1.15;
}
.inst-lead {
  font-size: 1.1em;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 60ch;
}
.inst-checks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.inst-checks li {
  position: relative;
  padding-left: 28px;
  line-height: 1.5;
}
.inst-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color1);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inst-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}
.inst-rating {
  margin: 0;
  font-size: 0.9em;
  color: #4a5a6a;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.inst-rating a { color: var(--color1); font-weight: 700; text-decoration: none; }
.inst-rating a:hover { text-decoration: underline; }
.inst-rating [aria-hidden="true"] { color: #e0a800; }
.inst-rating .inst-rating-sep { color: #8a97a5; }

.inst-foto { margin: 0; }
.inst-foto img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-left: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(25, 77, 125, 0.18);
}
.inst-foto figcaption {
  max-width: 420px;
  margin: 8px 0 0 auto;
  font-size: 0.85em;
  color: #4a5a6a;
}

/* ---------- Tarjeta del formulario ---------- */
.lead-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 6px 30px rgba(121, 121, 121, 0.25);
  font-family: var(--fuente), sans-serif;
}
.lead-card .lead-card-titulo {
  margin: 0 0 4px;
  color: var(--color2);
  font-size: 1.5em;
  line-height: 1.2;
}
.lead-card .lead-card-texto {
  margin: 0 0 16px;
  color: #4a5a6a;
  font-size: 0.95em;
}
.lead-form { display: grid; gap: 12px; }
.lead-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end; /* si una etiqueta ocupa dos líneas, los campos siguen alineados */
}
.lead-form .form-group label { color: #1d2b38; }
.lead-form .form-group input,
.lead-form .form-group select,
.lead-form .form-group textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 9px;
  border: 1px solid #c7d3df;
  background: #fff;
  padding: 9px 10px;
  font: inherit;
  font-size: 15px;
  color: #1d2b38;
}
.lead-form .form-group textarea { resize: vertical; min-height: 84px; }
.lead-form .form-group input:focus,
.lead-form .form-group select:focus,
.lead-form .form-group textarea:focus {
  outline: 2px solid var(--color1);
  outline-offset: 1px;
  border-color: var(--color1);
}
.lead-form .form-group input[type="submit"] {
  border: 0;
  padding: 12px 0;
  font-weight: 700;
  font-size: 1em;
  background: var(--color1);
  color: #fff;
}
.lead-form .form-group input[type="submit"]:hover { background: var(--color2); }
.lead-form .form-group input[type="submit"]:disabled { background: #6f8aa3; cursor: not-allowed; }
.lead-form .message-error { max-width: none; font-size: 12px; }
.lead-form .form-privacy { margin: 0; }
.lead-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #e7f6ec;
  color: #14572f;
  font-weight: 700;
}
.lead-status[hidden] { display: none; }
/* Propiedad de referencia (/tasaciones?ref=ID) y línea de matrícula junto al formulario / datos de contacto. */
.lead-card .lead-card-ref {
  margin: -8px 0 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #e6edf4;
  color: #1d2b38;
  font-size: 0.9em;
}
.inst-matricula {
  margin: 12px 0 0;
  font-size: 0.85em;
  color: #4a5a6a;
}
.seo-section .nap-card .inst-matricula { margin: 0 0 12px; font-size: 0.9em; }

/* ---------- Pasos (cómo trabajamos) ---------- */
.steps-list {
  list-style: none;
  counter-reset: paso;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 16px;
  max-width: none;
}
.steps-list li {
  counter-increment: paso;
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  border: 1px solid #d9e2ec;
}
.steps-list li::before {
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color1);
  color: #fff;
  font-weight: 700;
}
.seo-section .steps-list h3 { margin: 12px 0 6px; }
.seo-section .steps-list p { margin: 0; font-size: 0.95em; }

/* ---------- Tarjetas de factores / servicios ---------- */
.factor-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.seo-section ul.factor-grid { max-width: none; padding-left: 0; }
.factor-grid li {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  border: 1px solid #d9e2ec;
}
.seo-section .factor-grid h3 { margin: 0 0 6px; }
.seo-section .factor-grid p { margin: 0 0 8px; font-size: 0.95em; }
.seo-section .factor-grid p:last-child { margin-bottom: 0; }

/* ---------- Zonas ---------- */
.seo-section ul.zone-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: none;
}
.zone-list li {
  background: #fff;
  border: 1px solid #c7d3df;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.95em;
}

/* ---------- Números ---------- */
.seo-section ul.stats-row {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 12px;
  max-width: 900px;
}
.stats-row li,
.stats-row li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stats-row li {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid #d9e2ec;
}
.seo-section .stats-row li a { color: inherit; text-decoration: none; }
.stats-row strong { color: var(--color1); font-size: 1.6em; line-height: 1.1; }
.stats-row strong [aria-hidden="true"] { color: #e0a800; }
.stats-row span { font-size: 0.9em; color: #4a5a6a; }

.inst-more { margin-top: 24px; }

/* ---------- Tarjetas de propiedades vendidas ----------
   La tarjeta (views/partials/property-card.hbs) trae anchos fijos de la home; dentro de la grilla
   ocupa su columna. Mismo ajuste que /css/listado.css (pedido para mover a seo-components.css). */
/* ---------- Contacto (NAP + mapa + formulario) ---------- */
/* Anclas (#contacto, #pedir-tasacion): que el menú fijo no tape el título al saltar. */
#contacto,
#pedir-tasacion { scroll-margin-top: 106px; }
.contacto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.nap-card address { font-style: normal; }
.seo-section .nap-card h3:first-child { margin-top: 0; }
.seo-section .nap-card p { margin: 0 0 8px; }
.seo-section ul.nap-links { list-style: none; padding: 0; margin: 0 0 20px; }
.nap-links li { margin: 0 0 6px; }
.seo-section .nap-card a { font-weight: 600; }
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #e6edf4;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Texto legal ---------- */
.legal-text { max-width: 860px; }
.legal-text h1 {
  color: var(--color1);
  font-size: 2.2em;
  line-height: 1.2;
  margin: 8px 0 8px;
}
.legal-text .legal-fecha { color: #4a5a6a; font-size: 0.9em; }
.legal-text h2 { font-size: 1.3em; margin-top: 32px; }
.seo-section.legal-text ul { list-style: disc; padding-left: 1.4em; }
/* Mismo cuerpo de texto que los <p> del sitio (root.css). */
.legal-text li {
  margin-bottom: 8px;
  font-size: 1.125em;
  line-height: 1.7;
  color: #636363;
}
.legal-text .legal-contacto {
  margin-top: 32px;
  padding: 16px;
  border-radius: 10px;
  background: #e6edf4;
}

@media (max-width: 991px) {
  .inst-hero-grid,
  .contacto-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .inst-foto img,
  .inst-foto figcaption { margin-left: 0; }
}

@media (max-width: 767px) {
  #contacto,
  #pedir-tasacion { scroll-margin-top: 81px; }
  .inst-hero-grid { padding: 20px 16px 28px; }
  .inst-hero h1 { font-size: 1.8em; }
  .inst-lead { font-size: 1em; }
  .inst-actions .btn { flex: 1 1 100%; }
  .lead-card { padding: 18px; }
  .lead-form .form-row { grid-template-columns: minmax(0, 1fr); }
  .legal-text h1 { font-size: 1.8em; }
}