/* =====================================================================
   css/ch-servicios.css · Colombia House Inmobiliaria
   Sección «¿Qué necesita hoy?» de la portada (inc/servicios_portada.php).
   Maqueta v2 aprobada el 26-sep-2026 · OC-20260926-03-servicios.
   Todo va dentro de .chsol: no depende de Tailwind y no cambia nada fuera de la sección.
   Solo modo claro, como el resto del sitio. Contrastes AA medidos en la especificación
   (disenos/2026-09-25-seccion-servicios-portada.md).
   ===================================================================== */

.chsol {
  --chsol-blanco: #FFFFFF;
  --chsol-suave: #F8FAFC;
  --chsol-texto: #0F172A;
  --chsol-texto-2: #475569;
  --chsol-enlace: #0369A1;
  --chsol-primario: #0284C7;
  --chsol-borde: #E2E8F0;
  --chsol-borde-hover: #BAE6FD;
  --chsol-icono-fondo: #F0F9FF;
  --chsol-ambar: #FBBF24;
  --chsol-ambar-hover: #F59E0B;
  --chsol-ambar-texto: #0F172A;
  --chsol-wa: #25D366;
  --chsol-wa-hover: #1EBE5A;
  --chsol-wa-texto: #0F172A;
  --chsol-estrella: #D97706;
  --chsol-foco: #0369A1;
  padding: 48px 0 56px;
  background: var(--chsol-blanco);
  color: var(--chsol-texto);
  border-top: 1px solid var(--chsol-borde);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.chsol *, .chsol *::before, .chsol *::after { box-sizing: border-box; }
@media (min-width: 768px) { .chsol { padding: 80px 0 88px; } }

.chsol-contenedor { max-width: 80rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .chsol-contenedor { padding: 0 24px; } }
@media (min-width: 1024px) { .chsol-contenedor { padding: 0 32px; } }

/* ---------- Cabecera de la sección ---------- */
.chsol-cabecera { max-width: 44rem; margin: 0 auto 28px; text-align: center; }
@media (min-width: 768px) { .chsol-cabecera { margin-bottom: 44px; } }
.chsol-ceja { margin: 0; color: var(--chsol-enlace); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 768px) { .chsol-ceja { font-size: 14px; letter-spacing: .08em; } }
.chsol-titulo { margin: 8px 0 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--chsol-texto); }
@media (min-width: 360px) { .chsol-titulo { font-size: 30px; } }
@media (min-width: 768px) { .chsol-titulo { font-size: 36px; } }
.chsol-intro { margin: 10px auto 0; max-width: 34rem; font-size: 17px; line-height: 1.55; color: var(--chsol-texto-2); }

.chsol-rejilla { display: grid; gap: 16px; }
@media (min-width: 960px) { .chsol-rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; } }

/* ---------- Tarjeta principal: propietario ---------- */
.chsol-principal {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 22px 20px 24px; border-radius: 24px; color: #FFFFFF;
  background:
    radial-gradient(110% 80% at 100% 0%, rgb(56 189 248 / .14) 0%, rgb(56 189 248 / 0) 55%),
    linear-gradient(150deg, #075985 0%, #0C4A6E 50%, #0F172A 100%);
  box-shadow: 0 18px 40px -22px rgb(2 6 23 / .55);
}
@media (min-width: 420px) { .chsol-principal { padding: 28px 28px 30px; } }
@media (min-width: 768px) { .chsol-principal { padding: 36px 40px 40px; } }
.chsol-chip { margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 30px; max-width: 100%; padding: 4px 12px; border-radius: 999px; background: #E0F2FE; color: #075985; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.chsol-chip svg { display: block; width: 16px; height: 16px; flex: none; }
.chsol-principal-titulo { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; color: #FFFFFF; }
@media (min-width: 420px) { .chsol-principal-titulo { font-size: 30px; } }
@media (min-width: 768px) { .chsol-principal-titulo { font-size: 34px; } }
.chsol-lista { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 12px; }
.chsol-lista li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; margin: 0; font-size: 16px; line-height: 1.5; color: #F1F5F9; }
@media (min-width: 768px) { .chsol-lista li { font-size: 17px; } }
.chsol-lista svg { display: block; width: 22px; height: 22px; margin-top: 1px; color: #7DD3FC; }
.chsol-precio { align-self: stretch; margin: auto 0 0; padding: 14px 16px; border-radius: 14px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
.chsol-precio p { margin: 0; }
.chsol-precio-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: #E2E8F0; font-size: 15px; line-height: 1.4; }
.chsol-precio-plan { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #BAE6FD; }
.chsol-precio strong { font-size: 18px; font-weight: 800; color: #FFFFFF; }
@media (min-width: 420px) { .chsol-precio strong { font-size: 20px; } }
.chsol-precio .chsol-precio-nota { margin-top: 6px; color: #E2E8F0; font-size: 14px; line-height: 1.45; }
.chsol-acciones { align-self: stretch; margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 520px) { .chsol-acciones { flex-direction: row; flex-wrap: wrap; } }
.chsol-boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 8px 18px; border-radius: 14px; font-size: 16px; font-weight: 800; line-height: 1.25; text-decoration: none; text-align: center; transition: background-color .15s ease-out; }
@media (min-width: 420px) { .chsol-boton { font-size: 17px; padding: 8px 22px; } }
.chsol-boton svg { display: block; width: 20px; height: 20px; flex: none; }
.chsol-boton-texto { min-width: 0; }
.chsol-boton--ambar { background: var(--chsol-ambar); color: var(--chsol-ambar-texto); }
.chsol-boton--ambar:hover { background: var(--chsol-ambar-hover); color: var(--chsol-ambar-texto); }
.chsol-boton--wa { background: var(--chsol-wa); color: var(--chsol-wa-texto); font-weight: 700; }
.chsol-boton--wa:hover { background: var(--chsol-wa-hover); color: var(--chsol-wa-texto); }
@media (min-width: 520px) { .chsol-boton--ambar { flex: 1 1 auto; } .chsol-boton--wa { flex: 0 0 auto; } }
.chsol-principal a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.chsol-nowrap { white-space: nowrap; }

/* ---------- Tarjetas secundarias: vender y comprar ---------- */
.chsol-secundarias { display: grid; gap: 16px; }
@media (min-width: 600px) and (max-width: 959.98px) { .chsol-secundarias { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .chsol-secundarias { grid-template-rows: 1fr 1fr; gap: 24px; } }
.chsol-tarjeta { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icono titulo" "texto texto" "enlace enlace"; column-gap: 14px; align-items: center; padding: 20px; border-radius: 20px; background: var(--chsol-blanco); border: 1px solid var(--chsol-borde); box-shadow: 0 1px 2px rgb(15 23 42 / .05); transition: box-shadow .15s ease-out, border-color .15s ease-out, transform .15s ease-out; }
.chsol-tarjeta > .chsol-icono { grid-area: icono; width: 44px; height: 44px; border-radius: 12px; }
.chsol-tarjeta > .chsol-icono svg { display: block; width: 24px; height: 24px; }
.chsol-tarjeta > .chsol-tarjeta-titulo { grid-area: titulo; }
.chsol-tarjeta > .chsol-tarjeta-texto { grid-area: texto; margin-top: 10px; }
.chsol-tarjeta > .chsol-enlace { grid-area: enlace; justify-self: start; }
@media (min-width: 960px) {
  .chsol-tarjeta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icono" "titulo" "texto" "enlace"; grid-template-rows: auto auto 1fr auto; align-items: start; padding: 28px; }
  .chsol-tarjeta > .chsol-icono { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px; }
  .chsol-tarjeta > .chsol-icono svg { width: 28px; height: 28px; }
  .chsol-tarjeta > .chsol-tarjeta-texto { margin-top: 6px; }
}
.chsol-tarjeta:hover { border-color: var(--chsol-borde-hover); box-shadow: 0 12px 28px -16px rgb(15 23 42 / .30); transform: translateY(-2px); }
.chsol-tarjeta:focus-within { border-color: var(--chsol-enlace); }
.chsol-icono { display: inline-grid; place-items: center; flex: none; background: var(--chsol-icono-fondo); color: var(--chsol-primario); }
.chsol-tarjeta-titulo { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--chsol-texto); }
.chsol-tarjeta-texto { margin: 0; font-size: 16px; line-height: 1.55; color: var(--chsol-texto-2); }

/* ---------- Enlaces de texto ---------- */
.chsol-enlace { display: inline-block; padding: 2px 0; margin-top: 12px; color: var(--chsol-enlace); font-size: 16px; line-height: 1.4; font-weight: 700; text-decoration: none; }
.chsol-enlace svg { display: inline-block; width: 18px; height: 18px; margin-left: 4px; vertical-align: -3px; transition: transform .15s ease-out; }
.chsol-tarjeta:hover .chsol-enlace svg { transform: translateX(3px); }
.chsol-enlace--estirado::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; }
.chsol-enlace:hover { color: var(--chsol-enlace); text-decoration: underline; text-underline-offset: .18em; }
.chsol-enlace:focus-visible { outline: 3px solid var(--chsol-foco); outline-offset: 3px; border-radius: 6px; }

/* ---------- Arriendo para quien busca dónde vivir ---------- */
.chsol-alterno { margin: 18px 0 0; text-align: center; font-size: 16px; line-height: 1.5; color: var(--chsol-texto-2); }
.chsol-alterno .chsol-enlace { margin-top: 0; }

/* ---------- Datos que el visitante puede comprobar ---------- */
.chsol-pruebas { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chsol-pruebas--1 { grid-template-columns: minmax(0, 1fr); }
.chsol-pruebas--3 > .chsol-prueba:last-child { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .chsol-pruebas { gap: 16px; }
  .chsol-pruebas--4 { grid-template-columns: 1.25fr 1fr 1fr 1fr; }
  .chsol-pruebas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chsol-pruebas--3 > .chsol-prueba:last-child { grid-column: auto; }
}
.chsol-prueba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--chsol-suave); border: 1px solid var(--chsol-borde); }
@media (min-width: 600px) { .chsol-prueba { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px; } }
.chsol-prueba-icono { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--chsol-icono-fondo); color: var(--chsol-primario); }
.chsol-prueba-icono svg { display: block; width: 18px; height: 18px; }
@media (min-width: 600px) {
  .chsol-prueba-icono { width: 40px; height: 40px; border-radius: 12px; }
  .chsol-prueba-icono svg { width: 22px; height: 22px; }
}
.chsol-prueba-dato { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--chsol-texto); }
@media (min-width: 600px) { .chsol-prueba-dato { font-size: 17px; } }
.chsol-prueba-nota { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: var(--chsol-texto-2); }
.chsol-prueba .chsol-enlace { margin-top: 4px; font-size: 15px; }
.chsol-estrellas { display: inline-flex; color: var(--chsol-estrella); }
.chsol-estrellas svg { display: block; width: 80px; height: 16px; }
.chsol-fuente { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--chsol-texto-2); text-align: center; }

/* ---------- Opiniones autorizadas (fase 2: el servidor solo genera el bloque con 3) ---------- */
.chsol-opiniones { margin-top: 40px; }
.chsol-opiniones-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.chsol-opiniones-titulo { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--chsol-texto); }
.chsol-opiniones-sub { margin: 4px 0 0; font-size: 14px; color: var(--chsol-texto-2); }
.chsol-opiniones-cabecera .chsol-enlace { margin-top: 0; }
.chsol-opiniones-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .chsol-opiniones-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chsol-opiniones-lista > li { margin: 0; }
.chsol-opinion { margin: 0; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 20px; background: var(--chsol-blanco); border: 1px solid var(--chsol-borde); }
.chsol-opinion blockquote { margin: 0; padding: 0; border: 0; font-size: 16px; line-height: 1.6; color: var(--chsol-texto); }
.chsol-opinion blockquote p { margin: 0; }
.chsol-opinion figcaption { margin-top: auto; font-size: 14px; line-height: 1.5; color: var(--chsol-texto-2); }
.chsol-opinion-autor { font-weight: 700; color: var(--chsol-texto); }

/* ---------- Única regla fuera de .chsol ----------
   La cabecera de la portada es fija (sticky, 81 px medidos el 26-sep-2026 a 390 y 1280 px). Sin este margen,
   al recorrer la página con el teclado el enlace enfocado puede quedar debajo de ella (WCAG 2.2, 2.4.11).
   Esta hoja solo se carga en la portada. */
html { scroll-padding-top: 6rem; }

/* ---------- Utilidades ---------- */
.chsol-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; }
@media (prefers-reduced-motion: reduce) {
  .chsol *, .chsol *::before, .chsol *::after { transition: none !important; }
  .chsol-tarjeta:hover, .chsol-tarjeta:hover .chsol-enlace svg { transform: none; }
}