/* =========================================================
   HOME — hero con video, nosotros, áreas, proyectos, testimonios
   ========================================================= */

/* ---------- Video de fondo (fijo, detrás de todo) ---------- */
#bg_vid{
    position: fixed; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2;
}

/* Capa del color del hero, translúcida, detrás del bloque:
   solo se ve a través de las letras (el video queda teñido). */
.hero-tinte{ position: relative; isolation: isolate; }
.hero-tinte::before{
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--c-hero); opacity: var(--hero-tinte);
    border-radius: var(--radio-hero);
}

/* ---------- Hero: bloque de color con el logo calado ----------
   Las letras de AEDOS son "ventanas" hacia el video.
   Técnica: capa sólida + logo, combinadas con mask-composite. */
.hero{
    /* header + hero = 90% de la pantalla; el 10% restante ya deja ver el video */
    height: calc(90svh - var(--header-h));
    min-height: 420px;
    --logo-w: min(84vw, 760px);
    --logo-h: calc(var(--logo-w) * .3145);   /* proporción del logotipo recortado (830×261) */
    --logo-y: calc(50% - 2.5rem);            /* el logo sube un poco para dejar lugar a los íconos */
    background: var(--c-hero);
    border-radius: var(--radio-hero);
    position: relative;
    -webkit-mask:
        linear-gradient(#000 0 0),
        url(../assets/img/brand/Aedos_LogotipoPrincipal-09.png) center var(--logo-y) / var(--logo-w) auto no-repeat;
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#000 0 0),
        url(../assets/img/brand/Aedos_LogotipoPrincipal-09.png) center var(--logo-y) / var(--logo-w) auto no-repeat;
            mask-composite: exclude;
}
.hero-frase{
    position: absolute; left: 0; right: 0; bottom: clamp(4rem, 9vh, 6rem);
    text-align: center; padding-inline: var(--gutter);
    font-family: var(--f-titulos); font-style: italic; font-weight: 400;
    font-size: var(--t-lg); color: var(--c-texto-claro);
}
[data-hero="crema"] .hero-frase{ color: var(--c-oscuro); }
/* redes debajo del logo */
.hero-redes{
    position: absolute; left: 0; right: 0;
    top: calc(50% - 2.5rem + var(--logo-h) / 2 + clamp(1.5rem, 4vh, 2.5rem));
    display: flex; justify-content: center; gap: clamp(1.8rem, 5vw, 3rem);
}
.hero-redes a{ color: var(--c-texto-claro); display: grid; place-items: center; transition: transform var(--dur) var(--ease), opacity var(--dur); }
.hero-redes a:hover{ transform: translateY(-3px); opacity: .8; }
.hero-redes svg{ height: clamp(26px, 2.2vw, 32px); width: auto; }
[data-hero="crema"] .hero-redes a{ color: var(--c-oscuro); }

/* flecha: chevron delgado, sin círculo */
.hero-flecha{
    position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); translate: -50% 0;
    color: var(--c-texto-claro); text-decoration: none; padding: .5rem;
    animation: flotar 2.4s ease-in-out infinite;
}
.hero-flecha svg{ width: clamp(48px, 5vw, 64px); height: auto; display: block; }
[data-hero="crema"] .hero-flecha{ color: var(--c-oscuro); }
@keyframes flotar{ 50%{ transform: translateY(6px); } }

/* ---------- Ventana al video (100vh transparente) ---------- */
.ventana-video{ height: 100svh; }


/* ---------- Nosotros ---------- */
.nosotros{ background: var(--c-profundo); color: var(--c-texto-claro); }
.nosotros-grid{ display: grid; gap: clamp(2.5rem, 1rem + 5vw, 6rem); }
@media (min-width: 900px){ .nosotros-grid{ grid-template-columns: 7fr 5fr; align-items: end; } }
.nosotros blockquote{
    font-family: var(--f-titulos); font-size: var(--t-xl); font-weight: 400; line-height: 1.25;
}
.nosotros blockquote strong{ color: var(--c-marca-hover); font-weight: 600; }
.nosotros blockquote p + p{ margin-top: 1.2em; }
.nosotros .datos-nos{ list-style: none; display: grid; gap: 1.6rem; }
.nosotros .datos-nos li{ border-top: 1px solid rgb(239 224 205 / .25); padding-top: 1rem; }
.nosotros .datos-nos b{ display: block; font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--c-acento); margin-bottom: .3rem; }
.nosotros .datos-nos span{ font-weight: 300; }

/* ---------- Áreas: paneles (Grabación y Música ocultas desde 2026-10-10) que se expanden (patrón de Varios/Web) ---------- */
.areas{ background: var(--c-fondo); }
.areas .cabecera{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.areas .cabecera .titulo-seccion{ margin: 0; }
.panel[hidden]{ display: none !important; }
.paneles{ display: grid; gap: .6rem; padding-inline: clamp(.5rem, 1vw, 1rem); padding-inline: round(clamp(.5rem, 1vw, 1rem), .5rem); }
.panel{
    position: relative; overflow: hidden; border-radius: var(--radio-lg);
    color: var(--crema); text-decoration: none; isolation: isolate;
    min-height: 440px; display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(1rem, 1rem + 1vw, 2rem); padding: round(clamp(1rem, 1rem + 1vw, 2rem), .5rem);
}
.panel img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease), filter .6s; }
.panel::after{
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(0 0 0 / .05) 15%, rgb(30 14 15 / .55) 45%, rgb(30 14 15 / .92) 100%);
    transition: background .6s;
}
.panel-num{ font-size: var(--t-xs); letter-spacing: .2em; opacity: .8; }
.panel h3{ font-size: clamp(1.6rem, 1rem + 1.3vw, 2.4rem); font-weight: 500; margin: .2rem 0 .8rem; }
.panel-cuerpo p{ font-weight: 300; max-width: 40ch; margin-bottom: 1rem; }
.chips{ list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.chips li{ font-size: var(--t-xs); letter-spacing: .06em; padding: .5rem 1rem; border-radius: 99px; border: 1px solid rgb(239 224 205 / .5); }
.panel .boton1{ align-self: flex-start; }

/* tablet / celular: tarjetas apiladas, texto siempre visible */
@media (min-width: 640px){ .paneles{ grid-template-columns: 1fr 1fr; } }

/* escritorio con mouse: acordeón horizontal */
@media (min-width: 1000px) and (hover: hover){
    .paneles{ display: flex; height: min(82svh, 780px); }
    .panel{ flex: 1; min-height: 0; min-width: 0; transition: flex .8s var(--ease); }
    .paneles:hover .panel, .paneles:focus-within .panel{ flex: .75; }
    .paneles .panel:hover, .paneles .panel:focus-visible{ flex: 3; }
    .panel-cuerpo{
        max-height: 0; opacity: 0; overflow: hidden; width: min(40ch, 36vw);
        transition: opacity .4s ease, max-height .6s var(--ease);
    }
    .panel:hover .panel-cuerpo, .panel:focus-visible .panel-cuerpo{ max-height: 22rem; opacity: 1; transition-delay: .25s; }
    .panel:hover img{ transform: scale(1.05); }
    .panel h3{ white-space: nowrap; }
}

/* Variación: paneles en duotono, se colorean al pasar el mouse */
[data-paneles="duotono"] .panel img{ filter: grayscale(1) contrast(1.05); }
[data-paneles="duotono"] .panel::after{ background: linear-gradient(180deg, rgb(216 96 24 / .35), rgb(63 32 33 / .9)); }
[data-paneles="duotono"] .panel:hover img{ filter: none; }
[data-paneles="duotono"] .panel:hover::after{ background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(30 14 15 / .88) 100%); }

/* ---------- Proyectos ---------- */
.proyectos{ background: var(--c-profundo); color: var(--c-texto-claro); }
.proyectos .cabecera{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.proyectos .eyebrow{ color: var(--c-marca-hover); }

/* ---------- Testimonios (reservado) ---------- */
.testimonios{ background: var(--c-fondo); }
.testimonios-grid{ display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.testimonio{
    border: 1.5px dashed rgb(63 32 33 / .3); border-radius: var(--radio-lg);
    padding: 2rem; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
}
.testimonio p{ font-family: var(--f-titulos); font-size: var(--t-lg); font-style: italic; opacity: .55; }
.testimonio span{ font-size: var(--t-xs); letter-spacing: .15em; text-transform: uppercase; opacity: .55; }