/* =========================================================
   INTERIORISMO — secciones a sangre: fotografía fundida con el color
   (sin cajas redondeadas; esquinas rectas en toda la página)
   ========================================================= */
.landing-interiorismo{ --radio: 0; --radio-lg: 0; }
.landing-interiorismo .boton1, .landing-interiorismo .boton-linea{ border-radius: 2px; }

/* ---------- Banda: fotografía de un lado, color del otro, unidas por un degradado ---------- */
.banda{
    --fondo: var(--cafe); --texto: var(--crema);
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--fondo); color: var(--texto);
    min-height: 100svh; display: grid; align-items: end;
}
.banda > img, .banda > picture > img{
    position: absolute; z-index: -1; inset: 0 0 auto 0; width: 100%; height: 70%; object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
            mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
.banda .contenedor{ padding-block: 40svh 4rem; }
.banda-texto{ max-width: 34rem; display: flex; flex-direction: column; gap: 1.5rem; }
.banda h2, .banda h1{ font-family: var(--f-titulos); font-weight: 500; line-height: 1.05; margin: 0; }
.banda h1{ font-size: var(--t-3xl); }
.banda h2{ font-size: var(--t-2xl); }
.banda p{ font-weight: 300; font-size: var(--t-lg); margin: 0; }
.banda .eyebrow{ color: var(--durazno); }
.banda ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-weight: 300; }
.banda ul li{ padding-left: 1.5rem; position: relative; }
.banda ul li::before{ content: "—"; position: absolute; left: 0; color: var(--naranja); }
.banda ul b{ font-weight: 700; }
.banda .botones{ display: flex; flex-wrap: wrap; gap: 1rem; }
.banda .boton-linea{ color: var(--texto); }
.banda .nota{ font-size: var(--t-sm); opacity: .8; }
.banda.crema{ --fondo: var(--crema); --texto: var(--cafe); }
.banda.crema .eyebrow{ color: var(--naranja); }
.banda.azul{ --fondo: var(--azul); }
.num-grande{ font-family: var(--f-titulos); font-size: clamp(4rem, 2rem + 8vw, 9rem); line-height: .8; color: var(--naranja); }

@media (min-width: 900px){
    .banda{ align-items: center; }
    .banda > img, .banda > picture > img{ inset: 0 auto 0 0; width: 62%; height: 100%;
        -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
                mask-image: linear-gradient(to right, #000 55%, transparent); }
    .banda .contenedor{ padding-block: 6rem; display: flex; justify-content: flex-end; }
    /* espejo: fotografía a la derecha */
    .banda.espejo > img, .banda.espejo > picture > img{ inset: 0 0 0 auto;
        -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
                mask-image: linear-gradient(to left, #000 55%, transparent); }
    .banda.espejo .contenedor{ justify-content: flex-start; }
    /* hero: fotografía completa, el color sube desde abajo a la izquierda */
    .banda.portada > img{ width: 100%;
        -webkit-mask-image: linear-gradient(to top right, transparent 15%, #000 65%);
                mask-image: linear-gradient(to top right, transparent 15%, #000 65%); }
    .banda.portada{ align-items: end; }
    .banda.portada .contenedor{ justify-content: flex-start; padding-block: 0 6rem; }
}

/* ---------- Entrada a las dos mitades ---------- */
.mitades-intro{ background: var(--crema); color: var(--cafe); padding-block: var(--sec-y) 2rem; text-align: center; }
.mitades-intro p{ font-family: var(--f-titulos); font-size: var(--t-xl); line-height: 1.25; max-width: 36ch; margin: 0 auto; }
.mitades-intro em{ color: var(--naranja); font-style: italic; }

/* ---------- Qué se incluye ---------- */
.incluye{ background: var(--crema); color: var(--cafe); padding-block: var(--sec-y); }
.incluye h2{ font-family: var(--f-titulos); font-weight: 500; font-size: var(--t-2xl); margin: .5rem 0 3rem; max-width: 18ch; }
.incluye ol{ list-style: none; padding: 0; margin: 0; display: grid; gap: 0; grid-template-columns: 1fr; counter-reset: inc; }
@media (min-width: 560px){ .incluye ol{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .incluye ol{ grid-template-columns: repeat(3, 1fr); } }
.incluye li{ counter-increment: inc; border-top: 1px solid rgb(63 32 33 / .25); padding: 1.5rem 1.5rem 2rem 0; font-weight: 300; }
.incluye li::before{ content: "0" counter(inc); display: block; font-family: var(--f-titulos); font-size: var(--t-xl); color: var(--naranja); margin-bottom: .5rem; }
.incluye li b{ display: block; font-weight: 700; margin-bottom: .5rem; }

/* landing.css ya tiene una .banda (CTA): aquí manda la de interiorismo */
.landing-interiorismo .banda .boton1{ background: var(--naranja); color: var(--crema); }
.landing-interiorismo .banda .boton1:hover{ background: var(--durazno); color: var(--cafe); }

/* Celular: la fotografía conserva su proporción original (3:2 o 2:3) y se funde hacia abajo */
@media (max-width: 899px){
    .banda{ min-height: 0; }
    .banda > img, .banda > picture > img{ height: auto; }
    .banda .contenedor{ padding-block: calc(100vw * 2 / 3 - 4rem) 4rem; }
    .banda.vertical .contenedor{ padding-top: calc(100vw * 1.25 - 6rem); }   /* Casa Aurea 02 es 4:5 */
    .banda.portada .contenedor{ padding-top: calc(100vw * 2 / 3 + 4rem); }
}



/* ---------- Portafolio: blanco, mosaico pegado a las orillas, sin separación ----------
   Columnas fijas para que el límite de 8 se redondee a filas completas: 4 (compu, 2 × 4), 3 (iPad, 9), 2 (celular, 8). */
.portafolio-blanco{ background: #fff; color: var(--cafe); padding-block: var(--sec-y); }
.portafolio-blanco .cabecera{ margin-bottom: 3rem; }
.portafolio-blanco .titulo-seccion{ margin: .5rem 0 0; }
.portafolio-blanco .eyebrow{ color: var(--naranja); }
.portafolio-blanco .galeria{ gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px){ .portafolio-blanco .galeria{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .portafolio-blanco .galeria{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.portafolio-blanco .cuadro{ border-radius: 0; }
.portafolio-blanco .galeria-pie{ margin-top: 3rem; }
.portafolio-blanco .boton-linea{ color: var(--cafe); }

/* ---------- Video de fondo + ventana ---------- */
.landing-interiorismo{ background: transparent; }
html:has(.landing-interiorismo){ background: var(--cafe); }
.landing-interiorismo #bg_vid{ position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.landing-interiorismo .ventana-video{ height: 100svh; }
.landing-interiorismo main > section:not(.ventana-video){ position: relative; z-index: 1; }

/* ---------- Inicio (opción B, 2026-10-10): logo en la barra; panel naranja casi sólido con el imagotipo calado ----------
   Compu: el texto ocupa ~la mitad; el imagotipo va centrado en el espacio que queda a la derecha, a la altura del texto.
   Celular: el alto lo pone el contenido (sin aire de sobra), imagotipo chico calado en la esquina.
   --hi-naranja: opacidad del naranja · --hi-velo: velo caqui que se ve por el imagotipo · --hi-alto: alto del panel en compu */
:root{ --hi-naranja: .92; --hi-velo: .85; --hi-alto: calc(64svh - var(--header-h)); --caqui: 138 115 86; }
.landing-interiorismo .site-header .marca img{ height: 40px; }
.hi{ position: relative; isolation: isolate; }
.hi::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(var(--caqui) / var(--hi-velo)); border-radius: 0 0 clamp(2rem, 1rem + 3vw, 4rem) clamp(2rem, 1rem + 3vw, 4rem); }
.hi-panel{
    --marca: url(../assets/img/brand/Aedos_ImagotipoPrincipal-09.png);
    --tw: min(54vw, 52rem);                                   /* ancho del texto */
    --mw: min(20vw, 300px);                                   /* imagotipo (cuadrado) */
    --mx: calc((100vw - var(--gutter) - var(--tw)) / 2 - var(--mw) / 2);   /* distancia a la orilla derecha: centrado en el hueco */
    --mt: calc(var(--hi-alto) / 2 - var(--mw) / 2);
    position: relative; height: var(--hi-alto); min-height: 440px; color: var(--crema);
    background: linear-gradient(rgb(216 96 24), rgb(216 96 24 / var(--hi-naranja)) 8rem);
    border-radius: 0 0 clamp(2rem, 1rem + 3vw, 4rem) clamp(2rem, 1rem + 3vw, 4rem);
    display: grid; align-items: center;
    -webkit-mask: linear-gradient(#000 0 0), var(--marca) right var(--mx) top var(--mt) / var(--mw) auto no-repeat; -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0), var(--marca) right var(--mx) top var(--mt) / var(--mw) auto no-repeat; mask-composite: exclude;
}
.hi-marca{ display: none; }
.hi-texto{ width: var(--tw); display: flex; flex-direction: column; gap: 1.5rem; }
.hi-texto h1{ font: 400 clamp(2.6rem, 1rem + 4.4vw, 5.6rem)/1.05 var(--f-titulos); margin: 0; }
.hi-servicios{ margin: 0; font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.hi-cotizar{ align-self: flex-start; display: inline-flex; align-items: center; padding: 1rem 2.5rem; border-radius: 99px; background: var(--crema); color: var(--naranja); font-weight: 700; text-decoration: none; letter-spacing: .04em; transition: background var(--dur), color var(--dur); }
.hi-cotizar:hover{ background: var(--cafe); color: var(--crema); }
@media (max-width: 899px){
    .landing-interiorismo .site-header .marca img{ height: 32px; }
    .hi-panel{ --mw: 64px; height: auto; min-height: 0; align-items: end;
        -webkit-mask-position: 0 0, right var(--gutter) bottom 3rem; mask-position: 0 0, right var(--gutter) bottom 3rem; }
    .hi-panel .contenedor{ padding: 1.5rem var(--gutter) 3rem; }
    .hi-texto{ width: auto; }
    .hi-texto h1{ font-size: clamp(2.2rem, 1.4rem + 4vw, 3rem); }
}

/* Portafolio: botones arriba, la sección termina con las fotografías */
.portafolio-blanco{ padding-bottom: 0; }
.portafolio-blanco .cabecera{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; }
.portafolio-blanco .cabecera .galeria-pie{ margin: 0; justify-content: flex-start; }

/* Intro "dos mitades": Lato; solo las frases clave en Cormorant cursiva */
.mitades-intro p{ font-family: var(--f-texto); font-weight: 300; font-size: var(--t-xl); line-height: 1.35; max-width: 32ch; }
.mitades-intro em{ font-family: var(--f-titulos); font-style: italic; font-weight: 600; font-size: 1.15em; }