/* ch-propietarios.css · Colombia House · fase 1b de «Portada · captación»: cinta y ventana del propietario, WhatsApp
   (burbuja y selector) y héroe de la portada. Modo claro fijo. La carga ch_comp_cabeza() después de ch-captacion.css. */

/* Cinta (se ve solo el texto del ancho actual) */
.ch-cinta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;background:#0F172A;color:#fff;font-size:14px;font-weight:500;line-height:1.35;text-align:center;text-decoration:none}
.ch-cinta .ch-t-m,.ch-cinta .ch-t-s{display:none}
.ch-cinta-techo{flex-shrink:0;width:16px;height:16px;fill:#F2B705}
.ch-cinta-accion{color:#7DD3FC;font-weight:700;white-space:nowrap}
.ch-cinta:hover .ch-cinta-accion{color:#BAE6FD;text-decoration-thickness:2px}
.ch-cinta:focus-visible{outline:3px solid #7DD3FC;outline-offset:-3px}
@media (max-width:1023.98px){.ch-cinta .ch-t-l{display:none}.ch-cinta .ch-t-m{display:inline}}
@media (max-width:639.98px){.ch-cinta{padding:8px 12px}.ch-cinta .ch-t-m,.ch-cinta-accion-t{display:none}.ch-cinta .ch-t-s{display:inline}}

/* Enlaces de texto subrayados */
.ch-cinta-accion,.ch-v-cond a,.ch-v-planes,.ch-v-wa,.ch-v-sec,.ch-wa-arr,.ch-heroe-wa,.ch-heroe-confianza a{text-decoration:underline;text-underline-offset:3px}

/* Ventana (<dialog> modal). top/bottom !important: el aviso de cookies levanta con style.bottom los fijos con wa.me.
   Sin número de captación válido (.ch-v-pie-sin-wa), la acción principal es el formulario en todos los anchos */
html.ch-ventana-abierta{overflow:hidden}
.ch-ventana{top:0!important;bottom:0!important;width:min(1200px,calc(100vw - 64px));max-width:none;height:auto;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:0;overflow:hidden;border:0;border-top:4px solid #F2B705;border-radius:16px;background:#fff;color:#0F172A;line-height:1.5;box-shadow:0 24px 60px rgba(15,23,42,.35)}
.ch-ventana[open]{display:grid;grid-template-columns:min(460px,40%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.ch-ventana::backdrop{background:rgba(15,23,42,.6)}
.ch-v-barra{position:absolute;top:0;right:0;z-index:3;width:0;height:0}
.ch-v-cerrar,.ch-wa-cerrar{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer}
.ch-v-cerrar{top:12px;right:12px;border:1px solid #E2E8F0;background:#fff;color:#0F172A}
.ch-v-cerrar:hover,.ch-wa-cerrar:hover{background:#F1F5F9}
.ch-v-cerrar svg,.ch-wa-cerrar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.ch-v-img{position:relative;grid-row:1/3;grid-column:1;min-height:100%;overflow:hidden;background:#CAE7FD linear-gradient(#CAE7FD,#F3F5EB 45%,#D7DAE0 75%,#ADC0D8)}
.ch-v-img img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%}
.ch-v-cont{grid-column:2;grid-row:1;min-height:0;overflow:auto;padding:24px 32px 0}
.ch-v-cont::after{content:"";position:sticky;bottom:0;display:block;height:20px;margin-top:-4px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.ch-v-logo{display:none;width:120px;height:auto;margin:0 0 12px}
.ch-v-etq{display:flex;align-items:center;gap:6px;margin:0 0 8px;color:#0369A1;font-size:13px;font-weight:600;letter-spacing:.02em}
.ch-v-etq svg{width:14px;height:14px;fill:#F2B705}
.ch-ventana h2{margin:0 0 8px;font-size:27px;font-weight:700;line-height:1.2;outline:none}
.ch-v-p1{margin:0 0 6px;color:#334155;font-size:17px}
.ch-v-cond{margin:0 0 14px;color:#475569;font-size:14px}
.ch-v-h3{margin:0 0 10px;font-size:15px;font-weight:700}
.ch-v-pasos{margin:0 0 16px;padding:0;list-style:none;counter-reset:ch-paso}
.ch-v-pasos li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;margin:0 0 8px;font-size:16px;counter-increment:ch-paso}
.ch-v-pasos li::before{content:counter(ch-paso);display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#E0F2FE;color:#0369A1;font-size:14px;font-weight:700}
.ch-v-oferta{margin:0 0 4px;font-size:15px;font-weight:500}
.ch-v-cond a,.ch-v-planes,.ch-v-wa,.ch-v-sec,.ch-wa-arr{color:#0369A1;font-weight:600}
.ch-v-cond a:hover,.ch-v-planes:hover,.ch-v-wa:hover,.ch-v-sec:hover,.ch-wa-arr:hover{color:#075985}
.ch-v-planes,.ch-v-wa,.ch-v-sec,.ch-wa-arr{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px}
.ch-v-confianza{margin:12px 0 8px;color:#475569;font-size:13px}
.ch-v-pie{grid-column:2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:14px 32px 18px;border-top:1px solid #E2E8F0;background:#fff}
.ch-v-oferta-pie{flex-basis:100%;margin:0 0 -2px;font-size:15px;font-weight:500}
.ch-v-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;background:#0369A1;color:#fff;font-size:17px;font-weight:600;text-decoration:none}
.ch-v-btn:hover{background:#075985}
.ch-boton-wa,.ch-v-btn-verde{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;background:#25D366;color:#0F172A;font-weight:600;line-height:1.25;text-align:center;text-decoration:none}
.ch-v-btn-verde{width:100%;min-height:52px;padding:8px 12px;font-size:17px}
.ch-v-wa svg,.ch-v-btn-verde svg,.ch-boton-wa svg,.ch-heroe-wa svg{flex-shrink:0;width:20px;height:20px;fill:currentColor}
.ch-v-wa svg,.ch-heroe-wa svg{fill:#128C7E}
.ch-v-atencion{flex-basis:100%;margin:-4px 0 0;color:#475569;font-size:13px;line-height:1.4}
.ch-v-atencion b{color:#334155;font-weight:600}
.ch-v-oferta,.ch-v-btn-verde,.ch-v-sec{display:none}
.ch-ventana a:focus-visible,.ch-ventana button:focus-visible,.ch-wa-panel a:focus-visible,.ch-wa-cerrar:focus-visible{outline:3px solid #0369A1;outline-offset:2px}
.ch-ventana .ch-v-btn-verde:focus-visible,.ch-wa-panel .ch-boton-wa:focus-visible{outline-color:#0F172A}
/* ≥ 1024: alto máximo también ≤ ancho de la columna de imagen / 0,53 (el arco nunca se corta, p. ej. 1024 × 1366) */
@media (min-width:1024px){
.ch-ventana{height:fit-content;max-height:min(calc(100vh - 48px),868px,calc((100vw - 64px)*.754));max-height:min(calc(100dvh - 48px),868px,calc((100vw - 64px)*.754))}
.ch-v-p1{font-size:16px}
.ch-v-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ch-v-pasos li{grid-template-columns:1fr;gap:6px;margin:0;font-size:15px;line-height:1.4}
}
@media (max-width:1023.98px){
.ch-ventana{width:min(640px,calc(100vw - 48px));height:fit-content;overflow:auto;scroll-padding-top:60px;scroll-padding-bottom:calc(var(--ch-pie,0px) + 8px)}
.ch-ventana[open]{display:block}
.ch-v-barra{position:sticky;top:0;float:right}
.ch-v-img{width:100%;min-height:0;aspect-ratio:16/9;max-height:40vh;max-height:40dvh}
.ch-v-img img{object-position:50% 50%}
.ch-v-logo{display:block}
.ch-v-cont{padding:20px 24px 8px;overflow:visible}
.ch-ventana h2{font-size:24px}
.ch-v-pie{position:sticky;bottom:0;padding:12px 24px 16px}
}
@media (max-width:767.98px){
.ch-v-oferta-pie,.ch-v-btn,.ch-v-wa{display:none}
.ch-v-oferta,.ch-v-btn-verde,.ch-v-sec{display:flex}
.ch-v-sec{justify-content:center;width:100%}
.ch-v-atencion{margin:4px 0 2px;text-align:center}
.ch-v-pie-sin-wa .ch-v-btn{display:flex;width:100%}
}
@media (max-width:639.98px){
.ch-ventana{width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;border-radius:0}
.ch-v-cerrar{top:8px;right:8px}
.ch-v-cont{padding:16px 20px 8px}
.ch-v-pie{gap:2px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.ch-v-btn-verde{font-size:16px}
.ch-v-confianza span{display:block}
.ch-v-confianza .ch-v-sep{display:none}
}
@media (prefers-reduced-motion:no-preference){.ch-ventana[open]{animation:ch-v-entra .2s ease-out}.ch-ventana[open]::backdrop{animation:ch-v-velo .2s ease-out}}
@media (prefers-reduced-motion:no-preference) and (max-width:639.98px){.ch-ventana[open]{animation-name:ch-v-sube}}
@keyframes ch-v-entra{from{opacity:0;transform:scale(.98)}}
@keyframes ch-v-sube{from{opacity:0;transform:translateY(16px)}}
@keyframes ch-v-velo{from{opacity:0}}

/* WhatsApp: la caja fija (burbuja o <details> del selector) es el contenedor; el panel va encima de la burbuja.
   Abierto, el selector va sobre la cabecera (z-40) y su alto no pasa del espacio sobre la burbuja (--ch-wa-alto) */
.ch-burbuja-caja,.ch-wa{position:fixed;right:24px;bottom:24px;z-index:30}
.ch-wa[open]{z-index:60}
.ch-burbuja{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border:2px solid #fff;border-radius:50%;background:#25D366;color:#0F172A;box-shadow:0 10px 24px rgba(15,23,42,.28);list-style:none;cursor:pointer;text-decoration:none}
.ch-burbuja::-webkit-details-marker{display:none}
.ch-burbuja svg{width:30px;height:30px;fill:currentColor}
.ch-burbuja:focus-visible{outline:3px solid #0F172A;outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 7px #fff}
.ch-wa-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(320px,calc(100vw - 32px));max-height:var(--ch-wa-alto,calc(100vh - 104px));overflow-y:auto;overscroll-behavior:contain;padding:16px;border-radius:16px;background:#fff;color:#0F172A;text-align:left;box-shadow:0 12px 32px rgba(15,23,42,.18)}
.ch-wa-t{margin:0 44px 12px 0;font-size:16px;font-weight:600;line-height:1.35}
.ch-boton-wa{min-height:48px;margin:0 0 8px;padding:0 12px;font-size:16px}
.ch-wa-cerrar{top:8px;right:8px;border:0;background:transparent;color:#475569}
.ch-wa-cerrar[hidden]{display:none}
@media (max-width:639.98px){.ch-burbuja-caja,.ch-wa{right:16px;bottom:16px}}

/* Héroe de la portada */
.ch-ceja-prop{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin:0 0 20px;padding:4px 14px;border:1px solid #E2E8F0;border-radius:999px;background:rgba(255,255,255,.92);color:#0F172A;font-size:14px;font-weight:500;line-height:1.35}
.ch-ceja-prop-ic,.ch-heroe-confianza svg{flex-shrink:0;fill:none;stroke-width:2;stroke-linejoin:round}
.ch-ceja-prop-ic{width:16px;height:16px;stroke:#0369A1}
.ch-ceja-prop .ch-t-s{display:none}
.ch-heroe-sub{max-width:36rem;margin:0 0 24px;color:#0F172A;font-size:17px;font-weight:400;line-height:1.5}
.ch-heroe-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.ch-heroe-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:10px 28px;border-radius:12px;background:#0F172A;color:#fff;font-size:17px;font-weight:600;line-height:1.25;text-align:center;text-decoration:none}
.ch-heroe-btn:hover{background:#1E293B}
.ch-heroe-btn:active{transform:translateY(1px)}
.ch-heroe-wa{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:17px}
.ch-heroe-wa,.ch-heroe-confianza a{color:#0F172A;font-weight:600}
.ch-heroe-confianza{display:flex;align-items:flex-start;gap:8px;max-width:36rem;margin:14px 0 0;color:#0F172A;font-size:15px;font-weight:500}
.ch-heroe-confianza svg{width:18px;height:18px;margin-top:2px;stroke:currentColor}
.ch-busca-t{margin:28px 0 2px;color:#0F172A;font-size:20px;font-weight:700;line-height:1.3}
.ch-busca-p{margin:0 0 14px;color:#0F172A;font-size:16px}
.ch-heroe-btn:focus-visible,.ch-heroe-wa:focus-visible,.ch-heroe-confianza a:focus-visible{outline:2px solid #fff;outline-offset:0;box-shadow:0 0 0 4px #0F172A}
/* < 640: a 360 × 640 el botón queda entero en el primer pliegue y fuera de la burbuja (márgenes de 12 px, relleno de 32 px) */
@media (max-width:639.98px){
.ch-ceja-prop .ch-t-l{display:none}
.ch-ceja-prop .ch-t-s{display:inline}
.ch-heroe-acciones{gap:4px 20px}
.ch-heroe-btn{width:100%;padding:10px 16px;font-size:16px}
.ch-ceja-prop,.ch-ceja-prop+h1{margin-bottom:12px}
section:has(.ch-ceja-prop){padding-top:32px}
}
@media (min-width:1024px){.ch-heroe-sub{font-size:19px}}
/* 1024–1099: columna de 540–600 px; el botón y WhatsApp siguen en una fila */
@media (min-width:1024px) and (max-width:1099.98px){.ch-heroe-btn{padding-left:20px;padding-right:20px;font-size:16px}.ch-heroe-wa{font-size:16px}}
