/* ============================================================================
   landing-casas-puertos.css — estilos propios de la landing /landing-casas-puertos/
   Complementaria de /casas/. Usa los tokens de site.css (--co3-orange, etc.).
   Todo scopeado con prefijo .lp- para no chocar con el resto del sitio.
   ============================================================================ */

/* ---- Header (page-header estilo casas): que crezca con el texto y respire abajo.
   .page-header-small tiene max-height:440px + overflow:hidden; con subtítulo largo
   el gradiente recortaba el texto por abajo. Lo dejamos crecer y sumamos aire. ---- */
.page-header.lp-header{max-height:none;padding-bottom:64px;}
.page-header.lp-header .lead{max-width:820px;margin-left:auto;margin-right:auto;}
@media (max-width: 767.98px){
    .page-header.lp-header{padding-bottom:46px;}
}

/* Fondo navy #012338 (pisa el gradiente naranja de casas y apaga el brillo amarillo). */
.page-header.lp-header-navy{background:#012338 !important;}
.page-header.lp-header-navy::after{background-color:transparent;background-image:none;}

/* ---- Botón CTA del header ("Modelos de casas") ------------------------------
   Botón estilo "Volver al inicio" en el header fijo. El logo queda en su tamaño
   natural; el botón se compacta un poco en mobile. (Este CSS solo carga acá.) */
#topnav .header-cta{white-space:nowrap;}
@media (max-width: 575.98px){
    #topnav .header-cta{font-size:.8rem;padding:.42rem .7rem;}
}

/* CTA full-width al final del Pilar 3 ("Ver los modelos de casas") */
.lp-pillar-cta{margin-top:10px;padding-top:14px;padding-bottom:14px;font-size:1.15rem;font-weight:700;}

/* Versión "que llame mucho la atención": amarillo, letras negras, más grande y con
   las mismas animaciones que el botón de la nav del plan (brillo que cruza, halo que
   late, flecha que empuja) + un latido suave y un rebote al entrar en pantalla. */
.lp-cta-attn{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:12px;
    background:#ffc502 !important;color:#111 !important;border:0 !important;border-radius:16px;
    font-size:1.55rem;font-weight:800;letter-spacing:.2px;line-height:1.2;padding:24px 26px !important;
    box-shadow:0 18px 34px -16px rgba(255,197,2,.95);transition:background-color .15s ease}
.lp-cta-attn:hover,.lp-cta-attn:focus{background:#ffd43b !important;color:#111 !important}
.lp-cta-attn i{font-size:1.7rem;line-height:1;flex:0 0 auto}
.lp-cta-attn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.8),rgba(255,255,255,0));transform:translateX(-150%) skewX(-20deg)}
@media(prefers-reduced-motion:no-preference){
    .lp-cta-attn{animation:lp-glow 1.8s ease-out infinite,lp-beat 2.6s ease-in-out infinite}
    .lp-cta-attn.is-seen{animation:lp-pop .7s cubic-bezier(.3,1.6,.5,1) 1 both,lp-glow 1.8s ease-out .7s infinite,lp-beat 2.6s ease-in-out .7s infinite}
    .lp-cta-attn::after{animation:lp-shine 2.4s ease-in-out infinite}
    .lp-cta-attn .lp-cta-arrow{animation:lp-nudge 1.2s ease-in-out infinite}
}
@keyframes lp-glow{0%{box-shadow:0 0 0 0 rgba(255,197,2,.85)}70%{box-shadow:0 0 0 16px rgba(255,197,2,0)}100%{box-shadow:0 0 0 0 rgba(255,197,2,0)}}
@keyframes lp-beat{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.035)}90%{transform:scale(.99)}}
@keyframes lp-shine{0%{transform:translateX(-150%) skewX(-20deg)}55%,100%{transform:translateX(400%) skewX(-20deg)}}
@keyframes lp-nudge{0%,55%,100%{transform:translateX(0)}25%{transform:translateX(7px)}}
@keyframes lp-pop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@media(max-width:575.98px){
    .lp-cta-attn{font-size:1.2rem;padding:20px 16px !important;gap:9px;border-radius:14px}
    .lp-cta-attn i{font-size:1.35rem}
}

/* ---- Video destacado --------------------------------------------------------- */
.lp-video-wrap{max-width:960px;margin:0 auto;}
.lp-video-frame{
    position:relative;width:100%;padding-top:56.25%; /* 16:9 */
    border-radius:18px;overflow:hidden;
    box-shadow:0 34px 70px -24px rgba(0,0,0,.45);
    background:#000;
}
.lp-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---- El problema: lista de "lo que siempre falta" --------------------------- */
.lp-problem-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;}
.lp-problem-list li{
    display:flex;align-items:center;gap:16px;
    background:#fff;border:1px solid #ececec;border-radius:12px;
    padding:20px 26px;font-size:1.3rem;font-weight:600;
}
.lp-problem-list li i{color:var(--co3-orange);font-size:1.7rem;flex:0 0 auto;}
/* Frase remate del bloque del problema: negra y grande */
.lp-problem-punch{font-size:1.75rem;font-weight:800;color:var(--co3-orange);line-height:1.3;}

/* ---- 4 empresas / piezas ----------------------------------------------------- */
.lp-partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px;}
.lp-partner{
    background:#fff;border:1px solid #e6e6e6;border-radius:16px;padding:28px 20px;text-align:center;
    transition:transform .2s ease;
}
.lp-partner:hover{transform:translateY(-4px);}
/* Cada logo en un MARCO idéntico (mismo alto/ancho) → se ven parejos pese a que
   unos son wordmarks anchos (Puertos, Banco Ciudad) y otros emblemas cuadrados
   (CO3, Nueva Casa). object-fit:contain escala cada uno dentro del mismo recuadro. */
.lp-partner-logo{
    height:96px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;border-radius:12px;
    padding:16px 20px;margin-bottom:16px;
}
.lp-partner-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;}
/* CO3: el emblema es cuadrado y queda chico junto a los wordmarks. Lo acompañamos
   con el texto "Comunidad CO3" al lado para que el conjunto tenga una presencia
   (ancho) similar a los demás logos. */
.lp-partner-logo--co3{gap:10px;padding-left:10px;padding-right:10px;}
.lp-partner-logo--co3 img{max-height:62px;flex:0 0 auto;}
.lp-co3-wordmark{flex:0 1 auto;font-weight:800;line-height:1.02;color:#012338;font-size:19px;letter-spacing:.2px;text-align:left;}
.lp-partner .lp-role{display:block;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;color:#7a7a7a;font-weight:600;margin:0;}

/* ---- Fórmula: TIERRA + MATERIALES + FINANCIACIÓN + CONSTRUCCIÓN -------------- */
.lp-formula{position:relative;overflow:hidden;color:#fff;border-radius:24px;padding:40px 30px;
    background:linear-gradient(135deg,#FF8A3D 0%,#F75700 55%,#D63F00 100%);
    box-shadow:0 34px 70px -30px rgba(247,87,0,.75);}
.lp-formula::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 90% at 12% 0,rgba(255,255,255,.22),transparent 48%);}
.lp-formula-lead{position:relative;margin:0 auto 28px;max-width:800px;text-align:center;
    font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:700;line-height:1.4;}
.lp-formula-row{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:12px;}
.lp-formula-item{flex:1 1 180px;max-width:230px;display:flex;flex-direction:column;align-items:center;gap:6px;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:22px 16px;text-align:center;
    transition:transform .18s ease,background-color .18s ease;}
.lp-formula-item:hover{transform:translateY(-4px);background:rgba(255,255,255,.18);}
.lp-formula-item i{font-size:2rem;line-height:1;margin-bottom:6px;}
.lp-formula-name{font-weight:800;font-size:1.12rem;letter-spacing:.6px;line-height:1.05;}
.lp-formula-sub{font-size:.82rem;font-weight:500;opacity:.95;letter-spacing:.2px;line-height:1.25;max-width:170px;}
.lp-formula-plus{align-self:center;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.22);font-weight:800;font-size:1.25rem;}
.lp-formula-or{font-style:italic;font-size:1.05rem;text-transform:lowercase;}

/* ---- Pilares (Lote / Materiales / Construcción) ----------------------------- */
.lp-pillar{
    background:#fff;border:1px solid #eee;border-radius:18px;overflow:hidden;
    box-shadow:0 16px 40px -26px rgba(0,0,0,.3);
}
.lp-pillar + .lp-pillar{margin-top:26px;}
.lp-pillar-head{
    display:flex;align-items:center;gap:18px;
    background:#f8f2ed;padding:22px 26px;border-bottom:1px solid #efe6dd;
}
.lp-pillar-num{
    flex:0 0 auto;width:56px;height:56px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#FF7A2A,#D63F00);color:#fff;font-weight:800;font-size:1.5rem;
}
.lp-pillar-kicker{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--co3-orange);font-weight:600;}
.lp-pillar-title{font-size:1.5rem;font-weight:800;line-height:1.1;margin:2px 0 0;}
.lp-pillar-body{padding:24px 26px;}
.lp-pillar-body p{margin:0 0 14px;font-size:1.05rem;}
.lp-pillar-body p:last-child{margin-bottom:0;}
.lp-example{
    background:#fff8f2;border:1px dashed #f0b389;border-radius:12px;
    padding:16px 18px;margin:4px 0 14px;color:#7a3b12;
}
.lp-check{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px;}
.lp-check li{display:flex;gap:12px;align-items:flex-start;font-size:1.03rem;}
.lp-check li i{color:#32b845;font-size:1.2rem;flex:0 0 auto;margin-top:2px;}

/* ---- Repaso ------------------------------------------------------------------ */
.lp-recap{background:transparent;border-radius:0;padding:0;}
.lp-recap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px;}
.lp-recap-card{background:#fff;border-radius:14px;padding:22px 20px;box-shadow:0 10px 30px -20px rgba(0,0,0,.25);}
.lp-recap-card i{font-size:1.7rem;color:var(--co3-orange);}
.lp-recap-card h4{font-size:1.05rem;font-weight:800;margin:10px 0 8px;}
.lp-recap-card p{margin:0;font-size:.98rem;color:#444;}

/* ---- Cierre reflexivo -------------------------------------------------------- */
.lp-close{background:#111;color:#fff;border-radius:20px;padding:44px 32px;text-align:center;}
.lp-close .lp-close-title{font-size:1.9rem;font-weight:800;line-height:1.2;max-width:760px;margin:0 auto;}
.lp-close .lp-close-sub{margin:16px auto 26px;max-width:620px;color:#cfcfcf;font-size:1.08rem;}
.lp-close .lp-close-title b{color:var(--co3-yellow);}
.lp-close .btn{text-transform:uppercase;letter-spacing:.5px;}

/* ---- Responsive -------------------------------------------------------------- */
@media (max-width: 991.98px){
    .lp-partner-grid{grid-template-columns:repeat(2,1fr);}
    .lp-recap-grid{grid-template-columns:1fr;}
    /* fórmula: 2x2 limpio, sin conectores sueltos */
    .lp-formula-plus{display:none;}
    .lp-formula-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
    .lp-formula-item{max-width:none;}
}
@media (max-width: 575.98px){
    .lp-partner-grid{grid-template-columns:1fr;}
    .lp-formula-row{grid-template-columns:1fr;}
    .lp-pillar-head{flex-wrap:wrap;gap:12px;}
    .lp-hero-cta .btn{width:100%;}
    .lp-problem-list li{font-size:1.02rem;padding:14px 16px;gap:12px;}
    .lp-problem-list li i{font-size:1.3rem;}
    .lp-problem-punch{font-size:1.25rem;}
}