/* GUERRERA+ TEKO BOLD + MOTION PATCH
   Subir como: assets/phase1-teko-motion.css
   Requiere estar cargado después de assets/style.css
*/

@import url('https://fonts.googleapis.com/css2?family=Teko:wght@700&display=swap');

:root{
    --guerrera-title:'Teko', Impact, "Arial Black", sans-serif;
}

/* TITULARES MÁS LEGIBLES */
.hero-title,
.section-title h2,
.page-hero h1,
.premium-event-body h3,
.landing-content h1{
    font-family:var(--guerrera-title)!important;
    letter-spacing:.015em!important;
    font-weight:700!important;
}

/* HERO PRINCIPAL */
.phase1-hero{
    isolation:isolate;
}

.phase1-hero:before{
    content:"";
    position:absolute;
    inset:-12%;
    z-index:1;
    pointer-events:none;
    background:
        radial-gradient(circle at 72% 18%,rgba(255,255,255,.20),transparent 10%),
        radial-gradient(circle at 82% 58%,rgba(255,21,48,.23),transparent 25%),
        radial-gradient(circle at 36% 12%,rgba(255,255,255,.10),transparent 14%);
    opacity:.8;
    animation:guerreraLightPulse 8s ease-in-out infinite alternate;
}

.phase1-hero:after{
    z-index:2;
}

/* Humo cinematográfico */
.phase1-hero .hero-inner:before{
    content:"";
    position:absolute;
    left:-10%;
    right:-10%;
    top:-30%;
    height:150%;
    z-index:-1;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 18% 48%,rgba(255,255,255,.10),transparent 24%),
        radial-gradient(ellipse at 48% 22%,rgba(255,255,255,.08),transparent 20%),
        radial-gradient(ellipse at 80% 38%,rgba(255,255,255,.09),transparent 22%);
    filter:blur(18px);
    opacity:.42;
    animation:guerreraSmoke 18s linear infinite alternate;
}

/* Partículas/luz muy sutil */
.phase1-hero .hero-inner:after{
    content:"";
    position:absolute;
    inset:-20%;
    z-index:-1;
    pointer-events:none;
    background-image:
        radial-gradient(circle,rgba(255,255,255,.32) 0 1px,transparent 1.5px),
        radial-gradient(circle,rgba(255,21,48,.26) 0 1px,transparent 1.5px);
    background-size:90px 90px,140px 140px;
    background-position:0 0,36px 44px;
    opacity:.16;
    animation:guerreraParticles 28s linear infinite;
}

/* Texto hero más parecido a referencia 2 */
.hero-title{
    font-size:clamp(78px,8.4vw,136px)!important;
    line-height:.86!important;
    letter-spacing:.005em!important;
    transform:skewX(-3deg)!important;
    text-shadow:
        0 5px 0 rgba(0,0,0,.34),
        0 0 26px rgba(255,255,255,.08)!important;
}

.hero-title span,
.hero-title strong{
    display:block;
    max-width:760px;
}

.hero-title span{
    color:#f3f3f3!important;
}

.hero-title strong{
    color:#ff1530!important;
    letter-spacing:.01em!important;
    margin-top:-.02em;
}

/* Más aire y mejor lectura */
.hero-sub{
    margin-top:10px!important;
    font-size:24px!important;
    max-width:500px!important;
}

/* Cards: títulos menos apelotonados */
.premium-event-body h3{
    font-size:34px!important;
    line-height:.92!important;
    letter-spacing:.01em!important;
    transform:skewX(-3deg);
}

/* Secciones */
.section-title h2{
    letter-spacing:.01em!important;
    font-size:clamp(42px,4.7vw,64px)!important;
    line-height:.9!important;
}

/* Page hero */
.page-hero h1{
    letter-spacing:.01em!important;
    transform:skewX(-3deg);
}

/* Hover más premium */
.premium-event-card:hover{
    transform:translateY(-7px) scale(1.012)!important;
    box-shadow:
        0 34px 90px rgba(255,21,48,.15),
        0 0 0 1px rgba(255,21,48,.22)!important;
}

.premium-event-img img{
    transition:transform .65s ease, filter .65s ease!important;
}

.premium-event-card:hover .premium-event-img img{
    transform:scale(1.075)!important;
    filter:contrast(1.18) saturate(1.22) brightness(.90)!important;
}

/* Botones con micro motion */
.btn,
button{
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease!important;
}

.btn.red:hover,
button.red:hover{
    box-shadow:
        0 20px 48px rgba(255,21,48,.34),
        inset 0 0 0 1px rgba(255,255,255,.18)!important;
}

/* Header más fino */
.top{
    backdrop-filter:blur(18px);
    background:rgba(0,0,0,.94)!important;
}

.top-inner{
    background:transparent!important;
}

/* Evita que el hero tape demasiado en pantallas medianas */
@media(max-width:1180px){
    .hero-title{
        max-width:650px;
        font-size:clamp(70px,10vw,118px)!important;
    }
}

/* Móvil: más limpio, compacto y legible */
@media(max-width:760px){
    .phase1-hero{
        min-height:auto!important;
        background-position:center right!important;
    }

    .phase1-hero:before{
        opacity:.55;
    }

    .hero-inner{
        padding-top:50px!important;
        padding-bottom:42px!important;
    }

    .hero-title{
        font-size:clamp(68px,20vw,92px)!important;
        line-height:.84!important;
        letter-spacing:.01em!important;
        transform:skewX(-2deg)!important;
        max-width:96vw!important;
    }

    .hero-title strong{
        margin-top:0;
    }

    .hero-sub{
        max-width:330px!important;
        font-size:19px!important;
        line-height:1.28!important;
    }

    .trust-row{
        gap:9px!important;
    }

    .trust-row div{
        min-height:56px!important;
        padding:9px!important;
    }

    .trust-row strong{
        font-size:10px!important;
    }

    .trust-row small{
        font-size:10px!important;
    }

    .btn.big{
        min-width:100%!important;
    }

    .section-title h2{
        font-size:clamp(40px,14vw,58px)!important;
    }

    .premium-event-body h3{
        font-size:32px!important;
    }
}

/* Motion accesible: si el usuario prefiere reducir movimiento */
@media (prefers-reduced-motion: reduce){
    .phase1-hero:before,
    .phase1-hero .hero-inner:before,
    .phase1-hero .hero-inner:after,
    .premium-event-img img,
    .premium-event-card,
    .btn,
    button{
        animation:none!important;
        transition:none!important;
    }
}

@keyframes guerreraLightPulse{
    0%{opacity:.50;transform:translate3d(-8px,-4px,0) scale(1)}
    100%{opacity:.88;transform:translate3d(12px,8px,0) scale(1.04)}
}

@keyframes guerreraSmoke{
    0%{transform:translate3d(-2.5%,0,0) scale(1);opacity:.32}
    50%{opacity:.48}
    100%{transform:translate3d(3.5%,2%,0) scale(1.04);opacity:.38}
}

@keyframes guerreraParticles{
    0%{transform:translate3d(0,0,0)}
    100%{transform:translate3d(-80px,70px,0)}
}