/* =========================
   HERO KAI CAMP
   CSS para WordPress
========================= */

/* Import tipografía */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;800&display=swap');

:root{
    --kai-primary:#46bab9;
    --kai-text:#111111;
    --kai-bg:#f5f5f1;
}

/* Reducir espacio entre header y hero */
header.wp-block-template-part{
    margin-bottom:0 !important;
}

header.wp-block-template-part + *{
    margin-top:0 !important;
}

/* Hero full-width sin márgenes laterales */
.kai-hero,
.kai-camp-hero,
.kai-camp-about,
.kai-camp-bars,
.kai-camp-team,
.kai-camp-dates-location,
.kai-camp-contact,
.kai-divider{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* Forzar full-width para bloques HTML */
.wp-block-html,
.wp-block-html > *{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* Evitar contenedores limitados de WordPress */
.wp-block-group:not(.has-background),
.wp-block-post-content,
.entry-content,
main.wp-block-group{
    max-width:100% !important;
}

/* Reducir padding del header */
header.wp-block-template-part .wp-block-group.alignfull{
    padding-bottom:0.75rem !important;
}

/* Base */
.hero-wrapper,
.hero-wrapper *{
    box-sizing:border-box;
}

.hero-wrapper{
    width:min(1180px,100%);
    margin:0 auto;
    background:var(--kai-bg);
    padding:30px 30px 40px;
    position:relative;
    overflow:hidden;
    font-family:"Inter Tight", sans-serif;
}

.hero{
    position:relative;
    min-height:600px;
}

/* =========================
   TITULOS
========================= */

.title{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
}

.title span{
    position:absolute;
    display:block;
    margin:0;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-0.055em;
    color:var(--kai-text);
}

/* KAI */
.title .green-1{
    top:30px;
    left:200px;
    font-size:clamp(88px, 9vw, 132px);
    line-height:0.82;
    color:var(--kai-primary);
}

/* CAMP */
.title .green-2{
    top:120px;
    left:160px;
    font-size:clamp(88px, 9vw, 132px);
    line-height:0.82;
    color:var(--kai-primary);
}

/* Texto principal */
.title .eyebrow-large{
    top:290px;
    left:40px;
    max-width:850px;
    font-size:clamp(48px, 6.2vw, 82px);
    line-height:0.92;
    color:var(--kai-text);
    white-space:normal;
}

/* =========================
   IMAGENES
========================= */

.img-card{
    position:absolute;
    overflow:hidden;
    border-radius:10px;
    z-index:2;
    background:#ddd;
}

.img-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* izquierda */
.img-left{
    width:200px;
    height:300px;
    left:10px;
    top:20px;
}

/* derecha arriba */
.img-right-top{
    width:190px;
    height:200px;
    right:40px;
    top:30px;
}

/* derecha abajo */
.img-right-bottom{
    width:180px;
    height:250px;
    right:140px;
    top:320px;
}

/* =========================
   BOTON
========================= */

.hero-btn{
    position:absolute;
    left:480px;
    bottom:10px;
    z-index:7;

    width:260px;
    height:66px;

    border:1.4px solid #000;
    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    color:#000;
    background:transparent;

    font-size:14px;
    font-weight:400;
    line-height:1;
    transition:all .25s ease;
}

.hero-btn::after{
    content:"";
    position:absolute;
    inset:6px;
    border:1px solid rgba(0,0,0,.45);
    border-radius:999px;
    pointer-events:none;
}

.hero-btn:hover{
    background:#111;
    color:#fff;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px){

    .hero-wrapper{
        padding:22px 18px 30px;
    }

    .hero{
        min-height:900px;
    }

    .title .green-1{
        left:20px;
        top:20px;
        font-size:clamp(64px, 14vw, 96px);
    }

    .title .green-2{
        left:20px;
        top:90px;
        font-size:clamp(64px, 14vw, 96px);
    }

    .title .eyebrow-large{
        left:20px;
        top:230px;
        font-size:clamp(34px, 8vw, 60px);
        max-width:90%;
        line-height:0.95;
    }

    .img-left{
        top:500px;
        left:20px;
        width:150px;
        height:220px;
    }

    .img-right-top{
        top:30px;
        right:20px;
        width:130px;
        height:150px;
    }

    .img-right-bottom{
        top:580px;
        right:20px;
        width:150px;
        height:210px;
    }

    .hero-btn{
        left:20px;
        bottom:20px;
        width:210px;
        height:58px;
        font-size:13px;
    }
}

@media (max-width: 640px){

    .hero{
        min-height:820px;
    }

    .title .green-1{
        font-size:clamp(54px, 14vw, 82px);
    }

    .title .green-2{
        top:78px;
        font-size:clamp(54px, 14vw, 82px);
    }

    .title .eyebrow-large{
        top:205px;
        font-size:clamp(30px, 8vw, 48px);
        max-width:94%;
    }

    .img-left{
        width:130px;
        height:190px;
        top:470px;
    }

    .img-right-top{
        width:115px;
        height:130px;
    }

    .img-right-bottom{
        width:130px;
        height:180px;
        top:545px;
    }

    .hero-btn{
        width:190px;
        height:54px;
    }
}