/* =========================================================================
   MI CASA MARKETING — componentes de las landing pages (funnels)
   Reutiliza el sistema de estilos.css; aquí solo lo específico de landings.
   ========================================================================= */

/* --- Header minimal (sin nav, para no fugar la atención) --- */
.lp-cab{position:sticky;top:0;z-index:100;background:rgba(251,248,243,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea);padding-block:.7rem}
.lp-cab__fila{display:flex;align-items:center;gap:1rem}
.lp-cab__marca img{height:clamp(34px,4vw,46px);width:auto;display:block}
.lp-cab__acc{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.lp-cab__tel{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.9rem;color:var(--grafito)}
.lp-cab__tel svg{color:var(--oro-1)}
@media (max-width:560px){.lp-cab__tel span{display:none}}

/* --- Hero de landing --- */
.lp-hero{background:radial-gradient(120% 120% at 85% 0%,rgba(240,204,108,.16),transparent 55%),var(--crema);padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,6vw,5rem)}
.lp-hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,3.6rem);align-items:center}
.lp-hero h1{margin-bottom:1.1rem}
.lp-hero__sub{font-size:1.08rem;color:var(--tinta-suave);margin-bottom:1.4rem;max-width:42ch}
.lp-hero__sub strong{color:var(--grafito);font-weight:600}
.lista-check{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.3rem}
.lista-check li{display:flex;align-items:flex-start;gap:.6rem;font-size:.98rem;color:var(--grafito)}
.lista-check svg{color:var(--oro-1);flex:none;margin-top:3px}
.lp-hero__acc{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:.5rem}
.disclaimer{font-size:.75rem;color:var(--tinta-suave);font-style:italic;margin-top:.9rem;max-width:54ch}
.seccion--oscura .disclaimer{color:#B7AF9F}

/* --- Aviso de seguridad (evaluación: no pedimos datos sensibles) --- */
.aviso-seguro{display:flex;gap:.75rem;align-items:flex-start;background:rgba(240,204,108,.13);border:1px solid rgba(240,204,108,.4);border-radius:12px;padding:.95rem 1.1rem;margin-top:.3rem;max-width:44ch}
.aviso-seguro svg{color:var(--oro-1);flex:none;margin-top:2px}
.aviso-seguro p{font-size:.88rem;color:var(--grafito);line-height:1.5}

/* --- Programas / opciones (chips grandes) --- */
.opciones{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;max-width:760px;margin:0 auto 1.6rem}
.opciones li{display:inline-flex;align-items:center;gap:.5rem;font-size:.94rem;font-weight:500;color:var(--grafito);background:var(--blanco);border:1px solid var(--crema-3);padding:.6rem 1rem;border-radius:999px;box-shadow:var(--sombra-sutil)}
.opciones li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oro-grad);flex:none}

/* --- Comparación "con Mi Casa vs por tu cuenta" --- */
.compara{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:880px;margin-inline:auto}
.compara__col{background:var(--blanco);border:1px solid var(--crema-3);border-radius:var(--radio);padding:1.7rem 1.5rem}
.compara__col--nos{border-color:var(--oro-3);box-shadow:0 26px 60px -34px rgba(169,116,27,.5)}
.compara__col--otros{background:var(--crema-2)}
.compara__col h3{font-size:1.08rem;margin-bottom:1.1rem}
.compara__col ul{display:flex;flex-direction:column;gap:.75rem}
.compara__col li{display:flex;align-items:flex-start;gap:.6rem;font-size:.94rem;line-height:1.45}
.compara__col li svg{flex:none;margin-top:2px;width:19px;height:19px}
.compara__col--nos li{color:var(--grafito)}
.compara__col--nos li svg{color:#2FA35B}
.compara__col--otros li{color:var(--tinta-suave)}
.compara__col--otros li svg{color:#C08A8A}

/* --- Galería de cierres (placeholders por ciudad) --- */
.cierres{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.85rem}
.cierre{aspect-ratio:4/3;border-radius:13px;background:linear-gradient(160deg,#fff,var(--crema-2));border:1px dashed rgba(169,116,27,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;text-align:center;padding:1rem;color:var(--tinta-suave)}
.cierre svg{color:var(--oro-2);opacity:.85}
.cierre span{font-size:.82rem;font-weight:600;color:var(--grafito)}
.cierre small{font-size:.7rem}
.cierres__nota{text-align:center;margin-top:1.4rem;font-size:.82rem;color:var(--tinta-suave);font-style:italic}

/* --- Formulario compacto del funnel --- */
.lp-form{max-width:560px;margin-inline:auto;background:var(--crema);border-radius:calc(var(--radio) + 4px);padding:clamp(1.6rem,3.5vw,2.4rem);box-shadow:var(--sombra);display:grid;gap:.9rem}
.seccion--oscura .lp-form{color:var(--grafito)}
.lp-form__titulo{font-size:1.3rem}
.lp-form__nota{font-size:.88rem;color:var(--tinta-suave);margin-top:-.5rem}
.lp-form .boton{margin-top:.3rem}
.lp-form__pie{font-size:.76rem;color:var(--tinta-suave);text-align:center}
.lp-form__pie a{color:var(--oro-1);text-decoration:underline;text-underline-offset:2px}

/* --- Mejoras UI/UX landings --- */
.opciones li,.chips li{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.opciones li:hover{transform:translateY(-2px);border-color:var(--oro-3);box-shadow:var(--sombra-sutil)}
.compara__col{background:linear-gradient(180deg,#fff,#FDFAF4)}
.compara__col--otros{background:linear-gradient(180deg,var(--crema-2),#F1E8D9)}
.compara__col--nos{position:relative;overflow:hidden}
.compara__col--nos::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--oro-grad)}
.cierre{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.cierre:hover{transform:translateY(-3px);box-shadow:var(--sombra-sutil);border-color:var(--oro-3)}
.aviso-seguro{background:linear-gradient(180deg,rgba(240,204,108,.17),rgba(240,204,108,.07))}

/* Comparativa reencuadrada como dos puertas: cerrada (otros) vs abierta con luz (Mi Casa) */
.compara__col h3{display:flex;align-items:center;gap:.6rem}
.compara__col h3::before{content:"";width:22px;height:22px;flex:none;background:no-repeat center/contain}
.compara__col--nos h3::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9741B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l9-2v18'/%3E%3Cpath d='M4 21h16V8'/%3E%3Cpath d='M13 3l7 3'/%3E%3C/svg%3E")}
.compara__col--otros h3::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C655C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1'/%3E%3Ccircle cx='15.5' cy='12' r='.9' fill='%236C655C'/%3E%3C/svg%3E")}
.compara__col--otros{background:linear-gradient(180deg,#EEE8DD,#E6DFD1)}
.compara__col--nos::after{content:"";position:absolute;top:0;right:0;width:62%;height:100%;pointer-events:none;background:radial-gradient(120% 90% at 100% 0%,rgba(240,204,108,.16),transparent 62%)}
.compara__col--nos>*{position:relative;z-index:1}

/* --- Responsive --- */
@media (max-width:880px){
  .lp-hero__grid{grid-template-columns:1fr;gap:2.2rem}
  .lp-hero__arte{max-width:420px;margin-inline:auto;width:100%}
  .lp-hero__sub{max-width:none}
  .compara{grid-template-columns:1fr}
}