/* =========================================================
   SIC / Intro
   Ajustes construidos específicamente para esta composición.
   No usa framework visual ni librería de animación.
   ========================================================= */

:root{
    --sic-bg:#07100d;
    --sic-bg-deep:#030806;
    --sic-ink:#f0eee8;
    --sic-muted:rgba(240,238,232,.62);
    --sic-line:rgba(240,238,232,.13);
    --sic-green:#78d7ad;
    --sic-green-soft:rgba(120,215,173,.18);

    /* medidas afinadas para la escena de escritorio */
    --sic-edge:clamp(22px,3.2vw,54px);
    --sic-product-width:min(61vw,980px);
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;min-width:320px;min-height:100%;background:var(--sic-bg-deep)}
body{
    overflow:hidden;
    color:var(--sic-ink);
    font-family:Inter,Arial,sans-serif;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}

/* ---------- marco general ---------- */

.sic-intro{
    position:relative;
    width:100%;
    min-height:100vh;
    min-height:100svh;
    overflow:hidden;
    background:#050b09;
}

/* línea ambiental discreta; sustituye los glows genéricos */
.sic-intro::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:58%;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(120,215,173,.05) 18%,
        rgba(120,215,173,.13) 62%,
        transparent 100%
    );
    pointer-events:none;
}

/* ---------- cabecera ---------- */

.sic-intro__header{
    position:absolute;
    z-index:30;
    left:var(--sic-edge);
    right:var(--sic-edge);
    top:24px;

    display:grid;
    grid-template-columns:210px 1fr auto;
    align-items:center;
    gap:26px;
}

.sic-intro__logo{
    display:inline-flex;
    align-items:center;
    width:max-content;
}

.sic-intro__logo img{
    width:176px;
    max-height:56px;
    object-fit:contain;
    object-position:left center;
}

.sic-intro__header-copy{
    margin:0;
    justify-self:center;
    color:rgba(240,238,232,.42);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.sic-intro__enter{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:11px;
    padding:8px 0 9px;
    color:#9be2c3;
    font-size:13px;
    font-weight:600;
}

.sic-intro__enter::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:34px;
    height:1px;
    background:#78d7ad;
    transition:width .22s ease;
}

.sic-intro__enter:hover::after{width:100%}

/* ---------- escena ---------- */

.sic-intro__scene{
    position:relative;
    width:100%;
    height:100vh;
    height:100svh;
    min-height:720px;
}

/* ---------- titular ---------- */

.sic-intro__headline{
    position:absolute;
    z-index:8;
    left:var(--sic-edge);
    top:19vh;
    width:min(46vw,690px);
}

.sic-intro__eyebrow{
    margin:0 0 17px;
    max-width:370px;
    color:rgba(240,238,232,.48);
    font-size:11px;
    line-height:1.55;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.sic-intro__headline h1{
    margin:0;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-size:clamp(72px,7.8vw,124px);
    font-weight:500;
    line-height:.80;
    letter-spacing:-.052em;
}

.sic-intro__headline em{
    color:var(--sic-green);
    font-style:normal;
}

/* ---------- producto ---------- */

.sic-intro__product{
    position:absolute;
    z-index:5;
    right:-2.2vw;
    top:15vh;
    width:var(--sic-product-width);
    transform-origin:62% 58%;
    will-change:transform;
}

.sic-intro__product-frame{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:22px;
    box-shadow:
        0 34px 68px rgba(0,0,0,.38),
        0 1px 0 rgba(255,255,255,.04);
}

/* cada área utiliza el mismo asset, pero con encuadre distinto;
   esto hace que el producto responda al contenido sin inventar tarjetas */
.sic-intro__product-frame img{
    width:100%;
    transform:scale(var(--image-scale,1));
    transform-origin:var(--image-origin,50% 50%);
    transition:
        transform .42s ease,
        filter .42s ease;
    filter:
        saturate(var(--image-sat,.92))
        contrast(var(--image-contrast,1.03))
        brightness(var(--image-bright,1));
}

.sic-intro__product-frame::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(3,8,6,.27),transparent 19%),
        linear-gradient(180deg,transparent 72%,rgba(3,8,6,.14));
}

/* ---------- texto secundario ---------- */

.sic-intro__summary{
    position:absolute;
    z-index:10;
    left:var(--sic-edge);
    bottom:22vh;
    width:min(320px,28vw);
}

.sic-intro__summary p{
    margin:0 0 18px;
    color:var(--sic-muted);
    font-size:14px;
    line-height:1.65;
}

.sic-intro__summary-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding-bottom:6px;
    font-size:13px;
    font-weight:600;
}

.sic-intro__summary-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:46px;
    height:1px;
    background:rgba(120,215,173,.62);
    transition:width .22s ease;
}

.sic-intro__summary-link:hover::after{width:100%}

/* ---------- navegación de áreas ---------- */

.sic-intro__areas{
    position:absolute;
    z-index:18;
    left:var(--sic-edge);
    right:var(--sic-edge);
    bottom:26px;

    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    border-top:1px solid var(--sic-line);
}

.sic-intro__area{
    position:relative;
    min-width:0;
    padding:17px 14px 2px 0;

    border:0;
    background:transparent;
    color:rgba(240,238,232,.37);

    text-align:left;
    font-size:11px;
    font-weight:500;

    cursor:pointer;
    transition:color .18s ease;
}

.sic-intro__area::before{
    content:"";
    position:absolute;
    left:0;
    top:-1px;
    width:0;
    height:2px;
    background:var(--sic-green);
    transition:width .24s ease;
}

.sic-intro__area:hover{color:rgba(240,238,232,.72)}
.sic-intro__area.is-active{color:#91dfbd}
.sic-intro__area.is-active::before{width:64%}

/* ---------- salida ---------- */

.sic-intro__leave{
    position:fixed;
    inset:0;
    z-index:200;
    pointer-events:none;
    background:var(--sic-bg-deep);
    opacity:0;
}

body.is-leaving .sic-intro__scene,
body.is-leaving .sic-intro__header{
    transition:opacity .38s ease,transform .48s ease;
    opacity:0;
}

body.is-leaving .sic-intro__scene{transform:scale(1.01)}
body.is-leaving .sic-intro__leave{animation:sicLeave .48s ease forwards}

@keyframes sicLeave{to{opacity:1}}

/* ---------- ajustes por resolución ---------- */

@media(max-width:1100px){
    :root{--sic-product-width:min(70vw,900px)}
    .sic-intro__header-copy{display:none}
    .sic-intro__headline{width:56vw}
    .sic-intro__summary{width:300px;bottom:24vh}
}

@media(max-width:860px){
    body{overflow-y:auto}

    .sic-intro{
        min-height:100svh;
        overflow:visible;
    }

    .sic-intro__header{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        width:calc(100% - 36px);
        margin:18px auto 0;
        grid-template-columns:1fr auto;
    }

    .sic-intro__logo img{width:148px}

    .sic-intro__scene{
        height:auto;
        min-height:calc(100svh - 74px);
        padding:64px 18px 148px;
        display:flex;
        flex-direction:column;
    }

    .sic-intro__headline{
        position:relative;
        left:auto;
        top:auto;
        width:100%;
    }

    .sic-intro__headline h1{
        font-size:clamp(60px,15vw,92px);
        line-height:.82;
    }

    .sic-intro__product{
        position:relative;
        right:auto;
        top:auto;
        width:116%;
        margin:24px -8% 0;
    }

    .sic-intro__summary{
        position:relative;
        left:auto;
        bottom:auto;
        width:min(100%,430px);
        margin-top:24px;
    }

    .sic-intro__areas{
        left:18px;
        right:18px;
        bottom:18px;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0 18px;
    }

    .sic-intro__area{
        padding-top:13px;
        padding-bottom:9px;
    }

    .sic-intro__area.is-active::before{width:100%}
}

@media(max-width:520px){
    .sic-intro__headline h1{font-size:clamp(54px,16vw,74px)}
    .sic-intro__eyebrow{font-size:9px}
    .sic-intro__product-note{right:4%;bottom:3%;width:190px}
    .sic-intro__areas{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        scroll-behavior:auto!important;
        animation-duration:.001ms!important;
        transition-duration:.001ms!important;
    }
}





/* ---------- cinco escenas: solo cambia el contenido visual de la laptop ---------- */

.sic-intro__backgrounds{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    background:#050b09;
}

.sic-intro__background{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;

    opacity:0;
    visibility:visible;
    transform:scale(1.008);

    /* Crossfade suave entre escenas: el fondo anterior se desvanece
       mientras el siguiente aparece, evitando el corte brusco. */
    transition:
        opacity .95s cubic-bezier(.4,0,.2,1),
        transform 1.6s cubic-bezier(.4,0,.2,1);
    will-change:opacity,transform;

    user-select:none;
    -webkit-user-drag:none;
}

.sic-intro__background.is-active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

/* El contenido HTML sigue independiente y siempre queda encima del background. */
.sic-intro__header,
.sic-intro__scene{
    position:relative;
    z-index:2;
}

/* En desktop el header de la V3 era absoluto; conservamos su comportamiento. */
.sic-intro__header{
    position:absolute;
}

/* El viejo asset móvil/flotante permanece desactivado. */
.sic-intro__product,
.sic-intro__product-frame,
.sic-intro__product-frame img{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

@media(max-width:860px){
    .sic-intro__background{
        object-position:58% center;
    }

    .sic-intro__header{
        position:relative;
    }
}