/* =========================================================
   LANDINGS DE SECTOR — plantilla común
   (inmobiliaria, comercial, grabación, música)
   ========================================================= */

/* ---------- Hero con foto ---------- */
.l-hero{
    position: relative; isolation: isolate; color: var(--crema);
    min-height: calc(92svh - var(--header-h));
    display: flex; align-items: flex-end;
    padding-block: clamp(3rem, 8vh, 6rem); padding-block: round(clamp(3rem, 8vh, 6rem), .5rem);
    border-radius: var(--radio-hero); overflow: hidden;
    background: var(--c-oscuro);
}
.l-hero > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.l-hero::after{
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(20 10 10 / .2) 0%, rgb(20 10 10 / .5) 35%, rgb(30 14 15 / .92) 100%);
}
.l-hero .eyebrow{ color: var(--c-marca-hover); }
.l-hero h1{ font-size: var(--t-3xl); font-weight: 500; max-width: 14ch; margin-bottom: 1.2rem; }
.l-hero .lead{ margin-bottom: 2rem; }
.l-hero .boton-linea{ color: var(--crema); }
.insignia{
    display: inline-block; margin-bottom: 1rem;
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    background: var(--c-marca); color: var(--crema); padding: .5rem 1rem; border-radius: 99px;
}

/* ---------- Beneficios ---------- */
.beneficios-grid{ display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.beneficio .num{ font-family: var(--f-titulos); font-size: var(--t-2xl); color: var(--c-marca); line-height: 1; display: block; margin-bottom: .5rem; }
.beneficio h3{ font-size: var(--t-lg); font-family: var(--f-texto); font-weight: 700; margin-bottom: .4rem; }
.beneficio p{ font-weight: 300; }

/* ---------- Servicios ---------- */
.servicios{ background: var(--blanco); }
[data-hero="crema"] .servicios{ background: #F7EFE5; }
.servicios-grid{ display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.servicio{
    position: relative; display: flex; flex-direction: column; gap: .9rem;
    background: var(--c-fondo); border-radius: var(--radio-lg); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); padding: round(clamp(1.5rem, 1.2rem + 1vw, 2rem), .5rem);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.servicio:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgb(63 32 33 / .12); }
.servicio .icono{ width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--c-marca); color: var(--crema); }
.servicio .icono svg{ width: 26px; height: 26px; }
.servicio h3{ font-size: var(--t-xl); }
.servicio p{ font-weight: 300; }
.servicio ul{ list-style: none; display: grid; gap: .35rem; font-size: var(--t-sm); }
.servicio ul li::before{ content: "—"; color: var(--c-marca); margin-right: .5rem; }
.servicio .precio{ margin-top: auto; padding-top: 1rem; border-top: 1px solid rgb(63 32 33 / .12); font-size: var(--t-sm); }
.servicio .precio b{ font-family: var(--f-titulos); font-size: var(--t-xl); }
.servicio .enlace{ font-weight: 700; font-size: var(--t-sm); color: var(--c-marca); text-decoration: none; }
.servicio .enlace:hover{ color: var(--c-oscuro); }
.servicio .nuevo{
    position: absolute; top: 1.2rem; right: 1.2rem;
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    background: var(--c-profundo); color: var(--crema); padding: .5rem 1rem; border-radius: 99px;
}

/* ---------- Paquetes ---------- */
.paquetes{ background: var(--c-profundo); color: var(--c-texto-claro); }
.paquetes .eyebrow{ color: var(--c-marca-hover); }
.paquetes-grid{ display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: stretch; }
.paquete{
    border: 1px solid rgb(239 224 205 / .25); border-radius: var(--radio-lg);
    padding: clamp(1.5rem, 1.2rem + 1vw, 2.5rem); padding: round(clamp(1.5rem, 1.2rem + 1vw, 2.5rem), .5rem); display: flex; flex-direction: column; gap: 1rem;
}
.paquete.destacado{ background: var(--crema); color: var(--c-oscuro); border-color: transparent; }
.paquete h3{ font-size: var(--t-xl); }
.paquete .precio{ font-family: var(--f-titulos); font-size: var(--t-2xl); line-height: 1; }
.paquete .precio small{ font-family: var(--f-texto); font-size: var(--t-sm); opacity: .7; }
.paquete ul{ list-style: none; display: grid; gap: .5rem; font-size: var(--t-sm); flex: 1; }
.paquete ul li::before{ content: "✓"; color: var(--c-marca-hover); margin-right: .6rem; font-weight: 700; }
.paquete.destacado ul li::before{ color: var(--c-marca); }
.paquete .boton1, .paquete .boton-linea{ align-self: stretch; }

/* ---------- Perfil: ¿qué tipo de cliente eres? ---------- */
.perfiles{ display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.perfil-card{
    display: flex; flex-direction: column; gap: .6rem; text-decoration: none;
    border: 1.5px solid rgb(63 32 33 / .18); border-radius: var(--radio-lg); padding: clamp(1.5rem, 1rem + 1vw, 2rem); padding: round(clamp(1.5rem, 1rem + 1vw, 2rem), .5rem);
    transition: border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease);
}
.perfil-card:hover{ border-color: var(--c-marca); background: rgb(216 96 24 / .06); transform: translateY(-3px); }
.perfil-card h3{ font-size: var(--t-xl); }
.perfil-card p{ font-weight: 300; flex: 1; }
.perfil-card .enlace{ font-weight: 700; font-size: var(--t-sm); color: var(--c-marca); }

/* ---------- Extras a la carta ---------- */
.extras{ margin-top: calc(var(--gap) * 2); border-top: 1px solid rgb(239 224 205 / .25); padding-top: var(--gap); }
.extras h3{ font-size: var(--t-xl); margin-bottom: 1rem; }
.extras-lista{ list-style: none; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.extras-lista li{
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 1rem 1rem; border-radius: var(--radio); background: rgb(239 224 205 / .08);
}
.extras-lista b{ font-weight: 700; }

/* ---------- Proceso ---------- */
.pasos{ list-style: none; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); counter-reset: paso; }
.pasos li{ counter-increment: paso; border-top: 2px solid var(--c-marca); padding-top: 1rem; }
.pasos li::before{ content: "0" counter(paso); font-family: var(--f-titulos); font-size: var(--t-xl); color: var(--c-marca); display: block; margin-bottom: .3rem; }
.pasos h3{ font-family: var(--f-texto); font-size: var(--t-lg); font-weight: 700; margin-bottom: .3rem; }
.pasos p{ font-weight: 300; }

/* ---------- Proyectos relacionados ---------- */
.relacionados{ background: var(--c-profundo); color: var(--c-texto-claro); }
.relacionados .eyebrow{ color: var(--c-marca-hover); }

/* ---------- Preguntas frecuentes ---------- */
.faq{ max-width: 860px; }
.faq details{ border-bottom: 1px solid rgb(63 32 33 / .18); }
.faq summary{
    cursor: pointer; list-style: none; padding: 1.5rem 2.5rem 1.5rem 0; position: relative;
    font-family: var(--f-titulos); font-size: var(--t-lg); font-weight: 600;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{ content: "+"; position: absolute; right: .3rem; top: 50%; translate: 0 -50%; font-size: 1.6rem; color: var(--c-marca); transition: rotate var(--dur); }
.faq details[open] summary::after{ rotate: 45deg; }
.faq details p{ padding-bottom: 1.5rem; font-weight: 300; max-width: 65ch; }

/* ---------- Otras áreas (navegación entre landings) ---------- */
.otras-areas{ display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.otras-areas a{
    position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radio);
    aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 1rem;
    color: var(--crema); text-decoration: none; font-family: var(--f-titulos); font-size: var(--t-lg);
}
.otras-areas img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.otras-areas a::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 30%, rgb(30 14 15 / .85)); }
.otras-areas a:hover img{ transform: scale(1.06); }

/* =========================================================
   LANDING v2 — una sola acción: escribir por WhatsApp
   ========================================================= */
/* Barra de promoción (se apaga con data-activa="no" o al pasar data-hasta) */
.promo-barra{
    background: var(--c-oscuro); color: var(--crema); text-align: center;
    padding: .5rem var(--gutter); font-size: var(--t-sm); line-height: 1.4;
}
.promo-barra a{ color: var(--c-marca-hover); font-weight: 700; text-decoration: none; white-space: nowrap; margin-left: .4rem; }
.promo-barra a:hover{ text-decoration: underline; }

/* CTA al final de cada bloque */
.cta-bloque{ display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.cta-bloque .boton1{ padding: 1rem 1.5rem; }
.cta-bloque small{ font-size: var(--t-sm); opacity: .75; }
.boton1 svg{ width: 18px; height: 18px; flex: none; }

/* Problema: tres razones sin numeración */
.razones{ display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.razon{ border-top: 2px solid var(--c-marca); padding-top: 1rem; }
.razon h3{ font-family: var(--f-texto); font-size: var(--t-lg); font-weight: 700; margin-bottom: .4rem; }
.razon p{ font-weight: 300; }

/* Objetivos: dos caminos */
.objetivos{ display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.objetivo{
    display: flex; flex-direction: column; gap: 1rem;
    background: var(--blanco); border-radius: var(--radio-lg); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); padding: round(clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem), .5rem);
}
.objetivo .para{ font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-marca); }
.objetivo h3{ font-size: var(--t-xl); }
.objetivo .gancho{ font-family: var(--f-titulos); font-style: italic; font-size: var(--t-lg); }
.objetivo .recomendado{ font-size: var(--t-sm); }
.objetivo .recomendado b{ display: block; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem; opacity: .7; }
.objetivo ul{ list-style: none; display: grid; gap: .35rem; }
.objetivo ul li::before{ content: "+"; color: var(--c-marca); font-weight: 700; margin-right: .5rem; }
.objetivo .boton1{ margin-top: auto; align-self: flex-start; }
.cierre{ font-family: var(--f-titulos); font-size: var(--t-2xl); line-height: 1.1; text-align: center; margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); text-wrap: balance; }
.link-discreto{ display: block; text-align: center; margin-top: 1rem; font-size: var(--t-sm); color: inherit; opacity: .7; text-decoration: none; }
.link-discreto:hover{ opacity: 1; color: var(--c-marca); }

/* Sesiones */
.sesiones-cabecera{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.sesiones-cabecera .titulo-seccion{ margin: 0; }
@media (min-width: 900px){ .v2 #sesiones .servicios-grid{ grid-template-columns: repeat(3, 1fr); } }  /* 6 sesiones = 2 filas de 3 */
.servicio .entrega{ font-size: var(--t-sm); }
.servicio .entrega b{ display: block; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: .3rem; }
.servicio .enlace{ margin-top: auto; padding-top: .5rem; }
.addons{ margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.addons h3{ font-size: var(--t-xl); margin-bottom: 1rem; }
.addons-lista{ list-style: none; display: grid; gap: .6rem; max-width: 860px; }
.addons-lista li{
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 1rem 1rem; border-radius: var(--radio); border: 1.5px solid rgb(63 32 33 / .15);
}
.addons-lista li span{ font-size: var(--t-sm); }
.addons-lista li small{ display: block; opacity: .7; font-size: var(--t-xs); margin-top: .2rem; }
.addons-lista li .precio{ white-space: nowrap; font-family: var(--f-titulos); font-size: var(--t-lg); font-weight: 600; }

/* Banda: varias propiedades */
.banda{ background: var(--c-marca); color: var(--crema); }
.banda .contenedor{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem 3rem; }
.banda h2{ font-size: var(--t-xl); max-width: 26ch; }
.banda p{ max-width: 52ch; font-weight: 400; margin-top: .5rem; }
.banda .boton1{ background: var(--crema); color: var(--c-oscuro); }
.banda .boton1:hover{ background: var(--c-oscuro); color: var(--crema); }
.banda .cta-bloque{ margin-top: 0; }

/* Contacto v2: WhatsApp primero */
.wa-grande{ display: inline-flex; align-items: center; gap: .8rem; font-size: var(--t-lg); padding: 1rem 2rem; }
.contacto .o{ display: block; margin: 2rem 0 1rem; font-size: var(--t-sm); opacity: .7; }

/* ---------- Inmobiliaria final: servicios en 3 columnas con opciones ---------- */
@media (min-width: 900px){ .servicios-3{ grid-template-columns: repeat(3, 1fr); } }
.servicio .opciones{ list-style: none; display: grid; gap: .9rem; margin-top: .3rem; padding-top: 1rem; border-top: 1px solid rgb(63 32 33 / .12); }
.servicio .opciones li{ font-size: var(--t-sm); font-weight: 300; line-height: 1.5; }
.servicio .opciones li::before{ content: none; }
.servicio .opciones b{ display: block; font-weight: 700; font-size: var(--t-base); }
.extras-linea{ margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); font-size: var(--t-sm); text-align: center; }
.link-discreto.planes{ cursor: pointer; }

/* ---------- Interiorismo (2026-10-10) ---------- */
.idea-grid{ display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
@media (min-width: 860px){ .idea-grid{ grid-template-columns: 2fr 3fr; } }
.idea figure{ margin: 0; border-radius: var(--radio-lg); overflow: hidden; }
.idea figure img{ display: block; width: 100%; height: auto; }
.idea blockquote{ font-family: var(--f-titulos); font-size: var(--t-xl); line-height: 1.2; margin: .5rem 0 1.5rem; color: var(--c-marca); }
.idea p{ font-weight: 300; max-width: 60ch; margin-bottom: 1rem; }
.servicio-principal{ border: 2px solid var(--c-marca); }
.mosaico{ columns: 3 260px; column-gap: .5rem; }
.mosaico figure{ margin: 0 0 .5rem; break-inside: avoid; border-radius: 1rem; overflow: hidden; }
.mosaico img{ display: block; width: 100%; height: auto; }
.mosaico:not(.abierto) figure:nth-child(n+19){ display: none; }
.formas .perfil-card{ gap: 1rem; }
.formas .perfil-card .boton1{ align-self: flex-start; }
.formas .ideal{ font-size: var(--t-sm); }
.formas .destacada{ background: var(--c-oscuro); color: var(--crema); border-color: transparent; }
.formas .destacada .eyebrow{ color: var(--c-marca-hover); }
.entregables{ grid-template-columns: 1fr; }
@media (min-width: 560px){ .entregables{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .entregables{ grid-template-columns: repeat(3, 1fr); } }
.entregables b{ display: block; }
.entregables li{ display: block; background: var(--crema); padding: 1.5rem; font-weight: 300; }
.entregables b{ font-weight: 700; margin-bottom: .5rem; }
.formas .destacada:hover{ background: var(--c-oscuro); }