/* =============================================================
   LA ROJA RP v1.17 — HERO + FOOTER CLAVADOS AL MOCKUP
   ============================================================= */

:root{
  --lr117-red:#e7191d;
  --lr117-red-dark:#790709;
  --lr117-gold:#ffc13a;
  --lr117-black:#020202;
}

/* =============================================================
   ANCHO REAL COMPLETO
   ============================================================= */
body.laroja-v19-page,
body.laroja-v19-page #page,
body.laroja-v19-page .site,
body.laroja-v19-page .site-content,
body.laroja-v19-page .content-area,
body.laroja-v19-page .site-main,
body.laroja-v19-page .entry-content,
body.laroja-v19-page .wp-site-blocks,
body.laroja-v19-page .wp-block-post-content,
body.laroja-v19-page .ast-container,
body.laroja-v19-page .container,
body.laroja-v19-page .site-container{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
}
body.laroja-v19-page .lr19-site{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:0!important;
    left:auto!important;
    position:relative!important;
    overflow:hidden!important;
}

/* No crest/logo graphic */
.lr19-brand-shield{display:none!important}

/* =============================================================
   PORTADA — PROPORCIÓN DEL MOCKUP, NO ESTIRADA
   ============================================================= */
.lr114-home-hero{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1983 / 511!important;
    padding:clamp(26px,2.5vw,48px) clamp(28px,4vw,76px) clamp(82px,7vw,116px)!important;
    grid-template-columns:minmax(0,1.48fr) minmax(315px,.52fr)!important;
    align-items:center!important;
    background:
      linear-gradient(90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.61) 25%,
        rgba(4,0,0,.22) 49%,
        rgba(0,0,0,.10) 65%,
        rgba(0,0,0,.58) 100%),
      url("visuals-v117/hero-approved-clean.jpg") center center / 100% 100% no-repeat!important;
    border:0!important;
    border-bottom:2px solid rgba(221,26,25,.65)!important;
    box-shadow:inset 0 -60px 90px rgba(0,0,0,.45)!important;
}
.lr114-home-hero:before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background:
      radial-gradient(circle at 58% 36%,rgba(255,32,14,.08),transparent 20rem),
      linear-gradient(180deg,transparent 72%,rgba(0,0,0,.53))!important;
    pointer-events:none!important;
}
.lr114-home-hero:after{display:none!important}

.lr114-home-copy{
    max-width:700px!important;
    align-self:center!important;
}
.lr114-home-copy .lr19-kicker{
    font-size:10px!important;
    margin-bottom:4px!important;
}
.lr114-home-copy h1{
    font-size:clamp(54px,6.2vw,112px)!important;
    line-height:.86!important;
    margin:6px 0 0!important;
    white-space:nowrap;
    text-shadow:0 13px 35px rgba(0,0,0,.85)!important;
}
.lr114-home-copy h2{
    margin:13px 0 8px!important;
    font-size:clamp(13px,1.1vw,20px)!important;
}
.lr114-home-copy p{
    max-width:575px!important;
    margin:0!important;
    font-size:clamp(10px,.8vw,14px)!important;
    line-height:1.55!important;
}
.lr19-home-actions{
    margin-top:17px!important;
}
.lr19-home-actions a{
    min-height:43px!important;
    min-width:145px!important;
    padding:0 19px!important;
    font-size:10px!important;
}
.lr19-home-meta{
    margin-top:15px!important;
    gap:15px!important;
    font-size:9px!important;
}

/* Right promo/Discord column compact enough to match mockup height */
.lr116-hero-side{
    width:min(385px,100%)!important;
    gap:8px!important;
    align-self:center!important;
}
.lr116-promo-card{
    padding:15px 17px 14px!important;
    border-radius:8px!important;
}
.lr116-promo-kicker{font-size:8px!important}
.lr116-promo-value{
    margin:5px 0 1px!important;
    font-size:clamp(27px,2.5vw,43px)!important;
}
.lr116-promo-sub{font-size:10px!important}
.lr116-promo-code{
    min-height:39px!important;
    margin:10px 0 8px!important;
    font-size:9px!important;
}
.lr116-promo-code b{font-size:12px!important}
.lr116-promo-timer-wrap{padding-top:7px!important}
.lr116-promo-timer{gap:5px!important;margin-top:5px!important}
.lr116-promo-timer>span{
    min-width:50px!important;
    min-height:37px!important;
    padding:5px!important;
    font-size:13px!important;
}
.lr116-promo-cta{
    min-height:39px!important;
    margin-top:9px!important;
    font-size:9px!important;
}
.lr116-discord-panel{
    min-height:105px!important;
    padding:12px 14px!important;
    border-radius:8px!important;
}
.lr116-discord-panel>.lr19-discord-big{
    width:58px!important;height:58px!important;
}
.lr116-discord-panel>.lr19-discord-big svg{
    width:54px!important;height:42px!important;
}
.lr116-discord-panel>span{font-size:9px!important}
.lr116-discord-panel>p{font-size:9px!important;line-height:1.4!important}
.lr116-discord-panel>.lr19-discord-login-main{
    min-height:36px!important;
    font-size:9px!important;
}

/* Roleplay stats like the visual blocks from the approved mockup */
.lr115-roleplay-stats{
    left:clamp(28px,4vw,76px)!important;
    bottom:16px!important;
    width:min(690px,58%)!important;
    height:58px!important;
    grid-template-columns:repeat(4,1fr)!important;
    background:rgba(2,2,2,.82)!important;
    border:1px solid rgba(255,130,22,.28)!important;
}
.lr115-roleplay-stats>div{min-height:56px!important}
.lr115-roleplay-stats b{
    font-size:12px!important;
    color:#fff!important;
}
.lr115-roleplay-stats span{
    margin-top:2px!important;
    font-size:7px!important;
    color:#d6b5aa!important;
}

/* Payment mini-card remains but visually secondary */
.lr113-payments-card{
    right:clamp(28px,4vw,76px)!important;
    bottom:16px!important;
    width:min(300px,24%)!important;
    min-height:58px!important;
    padding:8px 12px!important;
    background:rgba(2,2,2,.80)!important;
}
.lr113-payments-card>span{font-size:7px!important}
.lr113-payments-card>small{font-size:6px!important;margin:2px 0 4px!important}
.lr113-payments-card>div{font-size:8px!important}

/* =============================================================
   ANIMACIÓN DEL TÍTULO "LA ROJA RP"
   ============================================================= */
.lr114-home-copy h1 .lr117-letter{
    display:inline-block;
    will-change:transform,filter,text-shadow;
    animation:lr117LetterFloat 3.2s ease-in-out infinite;
    animation-delay:var(--lr-delay);
}
.lr114-home-copy h1 .lr117-space{width:.26em}
.lr114-home-copy h1 strong{
    position:relative;
    display:inline-block!important;
    animation:lr117RPFire 1.65s ease-in-out infinite!important;
}
.lr114-home-copy h1 strong:after{
    content:"";
    position:absolute;
    left:5%;right:5%;bottom:-5px;height:2px;
    background:linear-gradient(90deg,transparent,#ff2d22,#ffc13a,#ff2d22,transparent);
    filter:blur(.3px);
    animation:lr117TitleLine 2s ease-in-out infinite;
}

/* =============================================================
   MUCHAS ANIMACIONES EN BOTONES
   ============================================================= */
.lr19-primary,
.lr19-secondary,
.lr19-discord-login-main,
.lr116-promo-cta,
.lr19-product-grid .lr-btn-small,
.lr113-shop ul.products li.product .button,
.lr110-product-shell .single_add_to_cart_button,
.lr110-cart-shell .checkout-button,
.lr111-checkout-shell #place_order,
.lr111-checkout-shell .wc-block-components-checkout-place-order-button,
.lr19-footer-discord{
    isolation:isolate;
}
.lr19-primary:before,
.lr19-secondary:before,
.lr19-discord-login-main:before,
.lr116-promo-cta:before,
.lr19-product-grid .lr-btn-small:before,
.lr113-shop ul.products li.product .button:before,
.lr110-product-shell .single_add_to_cart_button:before,
.lr110-cart-shell .checkout-button:before,
.lr111-checkout-shell #place_order:before,
.lr111-checkout-shell .wc-block-components-checkout-place-order-button:before,
.lr19-footer-discord:before{
    content:"";
    position:absolute;
    inset:-1px;
    z-index:-1;
    border-radius:inherit;
    opacity:0;
    background:linear-gradient(100deg,transparent,#ff4b20,#ffc13a,#ff4b20,transparent);
    filter:blur(8px);
    transition:opacity .22s ease;
}
.lr19-primary:hover:before,
.lr19-secondary:hover:before,
.lr19-discord-login-main:hover:before,
.lr116-promo-cta:hover:before,
.lr19-product-grid .lr-btn-small:hover:before,
.lr113-shop ul.products li.product .button:hover:before,
.lr110-product-shell .single_add_to_cart_button:hover:before,
.lr110-cart-shell .checkout-button:hover:before,
.lr111-checkout-shell #place_order:hover:before,
.lr111-checkout-shell .wc-block-components-checkout-place-order-button:hover:before,
.lr19-footer-discord:hover:before{
    opacity:.42;
}
.lr19-primary,
.lr116-promo-cta,
.lr110-cart-shell .checkout-button,
.lr111-checkout-shell #place_order{
    animation:lr117PrimaryBreath 2.7s ease-in-out infinite;
}

/* =============================================================
   PROMO MÁS VIVA
   ============================================================= */
.lr116-promo-card{
    animation:lr117PromoOrbit 2.8s ease-in-out infinite!important;
}
.lr116-promo-card:after{
    height:3px!important;
    animation:lr117PromoRail 1.45s ease-in-out infinite!important;
}
.lr116-promo-kicker{
    animation:lr117FireText 1s ease-in-out infinite!important;
}
.lr116-promo-value{
    animation:lr117DiscountHit 2s ease-in-out infinite!important;
}
.lr116-promo-code{
    animation:lr117CodePulse 2.1s ease-in-out infinite!important;
}
.lr116-promo-timer>span{
    animation:lr117TimerGlow 2.2s ease-in-out infinite!important;
}
.lr116-promo-timer>span.lr117-tick{
    animation:lr117Tick .28s ease!important;
}

/* =============================================================
   FOOTER ÚNICO — PROPORCIÓN Y COMPOSICIÓN DEL MOCKUP
   ============================================================= */
.lr117-footer{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1983 / 282!important;
    display:grid!important;
    grid-template-columns:1.15fr .58fr .66fr .72fr 1.55fr!important;
    gap:clamp(18px,2.2vw,38px)!important;
    align-items:center!important;
    padding:clamp(20px,2.2vw,38px) clamp(28px,4vw,72px)!important;
    border-top:2px solid rgba(223,28,27,.65)!important;
    background:
      linear-gradient(90deg,
        rgba(1,1,1,.93) 0%,
        rgba(2,2,2,.91) 47%,
        rgba(3,1,1,.58) 65%,
        rgba(3,1,1,.36) 83%,
        rgba(1,1,1,.87) 100%),
      url("visuals-v117/footer-approved-clean.jpg") center center / 100% 100% no-repeat!important;
}
.lr117-footer:before{display:none!important}
.lr117-footer .lr116-footer-brand .lr19-brand-name{
    font-size:clamp(18px,1.6vw,28px)!important;
}
.lr117-footer .lr116-footer-brand p{
    max-width:310px!important;
    font-size:9px!important;
    line-height:1.5!important;
    margin:8px 0!important;
}
.lr117-footer .lr116-footer-brand small{
    margin-top:10px!important;
    font-size:7px!important;
}
.lr117-footer .lr19-socials{margin-top:9px!important}
.lr117-footer .lr116-footer-col{gap:6px!important}
.lr117-footer .lr116-footer-col>b{
    font-size:9px!important;
    color:#fff!important;
}
.lr117-footer .lr116-footer-col a{
    font-size:8px!important;
    color:#c5b3aa!important;
}
.lr117-footer .lr116-footer-community{
    min-height:0!important;
    padding:0!important;
    align-items:center!important;
}
.lr117-footer .lr116-footer-community-copy{
    width:min(330px,100%)!important;
    padding:15px!important;
    margin-left:auto!important;
    background:linear-gradient(90deg,rgba(8,2,2,.77),rgba(8,2,2,.32))!important;
    border-left:1px solid rgba(255,126,24,.30)!important;
}
.lr117-footer .lr116-footer-community-copy>span{font-size:7px!important}
.lr117-footer .lr116-footer-community-copy h3{
    margin:4px 0 6px!important;
    font-size:14px!important;
}
.lr117-footer .lr116-footer-community-copy p{
    font-size:8px!important;
    line-height:1.45!important;
}
.lr117-footer .lr19-footer-discord{
    min-height:34px!important;
    padding:7px 11px!important;
    font-size:8px!important;
}

/* Ensure no second footer-like block remains */
.lr19-site>.lr19-why,
.lr19-site>.lr19-newsletter,
.lr19-site>.lr19-copy,
body.laroja-v19-page footer.site-footer,
body.laroja-v19-page .site-footer,
body.laroja-v19-page .wp-site-blocks>footer{
    display:none!important;
}

/* =============================================================
   KEYFRAMES
   ============================================================= */
@keyframes lr117LetterFloat{
  0%,100%{transform:translateY(0);filter:brightness(1);text-shadow:0 0 0 rgba(255,255,255,0)}
  45%{transform:translateY(-2px);filter:brightness(1.12);text-shadow:0 0 10px rgba(255,255,255,.13)}
  60%{transform:translateY(0)}
}
@keyframes lr117RPFire{
  0%,100%{transform:scale(1);filter:brightness(1);text-shadow:0 0 8px rgba(231,25,29,.18)}
  50%{transform:scale(1.026);filter:brightness(1.24);text-shadow:0 0 22px rgba(231,25,29,.52)}
}
@keyframes lr117TitleLine{
  0%,100%{opacity:.25;transform:scaleX(.4)}
  50%{opacity:1;transform:scaleX(1)}
}
@keyframes lr117PrimaryBreath{
  0%,100%{box-shadow:0 8px 25px rgba(0,0,0,.30)}
  50%{box-shadow:0 12px 34px rgba(0,0,0,.43),0 0 19px rgba(221,25,27,.18)}
}
@keyframes lr117PromoOrbit{
  0%,100%{transform:translateY(0);box-shadow:0 18px 55px rgba(0,0,0,.46),0 0 20px rgba(221,25,27,.10)}
  50%{transform:translateY(-3px);box-shadow:0 23px 62px rgba(0,0,0,.55),0 0 34px rgba(221,25,27,.23)}
}
@keyframes lr117PromoRail{
  0%,100%{opacity:.3;transform:scaleX(.55)}
  50%{opacity:1;transform:scaleX(1)}
}
@keyframes lr117FireText{
  0%,100%{color:#ff4b2e;text-shadow:0 0 7px rgba(255,66,31,.25)}
  50%{color:#ffc13a;text-shadow:0 0 14px rgba(255,193,58,.52)}
}
@keyframes lr117DiscountHit{
  0%,100%{transform:scale(1);filter:brightness(1)}
  48%{transform:scale(1.04);filter:brightness(1.28)}
  58%{transform:scale(1.015)}
}
@keyframes lr117CodePulse{
  0%,100%{border-color:rgba(232,54,43,.63);box-shadow:0 0 0 rgba(255,193,58,0)}
  50%{border-color:#ffc13a;box-shadow:0 0 18px rgba(232,54,43,.15)}
}
@keyframes lr117TimerGlow{
  0%,100%{border-color:rgba(255,145,31,.24);color:#fff}
  50%{border-color:rgba(255,193,58,.54);color:#ffd35e}
}
@keyframes lr117Tick{
  0%{transform:scale(1)}
  45%{transform:scale(1.15);filter:brightness(1.4)}
  100%{transform:scale(1)}
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media(max-width:1200px){
  .lr114-home-hero{
    aspect-ratio:auto!important;
    min-height:560px!important;
    padding-bottom:130px!important;
  }
  .lr116-hero-side{width:350px!important}
  .lr117-footer{
    aspect-ratio:auto!important;
    min-height:300px!important;
  }
}
@media(max-width:900px){
  .lr114-home-hero{
    grid-template-columns:1fr!important;
    min-height:760px!important;
    padding:40px 22px 190px!important;
    background-size:auto 100%!important;
    background-position:center!important;
  }
  .lr114-home-copy h1{white-space:normal!important}
  .lr116-hero-side{
    width:min(420px,100%)!important;
    justify-self:start!important;
    margin-top:18px!important;
  }
  .lr115-roleplay-stats{
    left:22px!important;
    width:calc(100% - 44px)!important;
    bottom:79px!important;
  }
  .lr113-payments-card{
    left:22px!important;right:auto!important;
    width:calc(100% - 44px)!important;
    bottom:13px!important;
  }
  .lr117-footer{
    grid-template-columns:1fr 1fr!important;
    min-height:480px!important;
    background-size:auto 100%!important;
    background-position:right bottom!important;
  }
  .lr117-footer .lr116-footer-community{grid-column:1/-1}
}
@media(max-width:620px){
  .lr114-home-hero{min-height:820px!important}
  .lr115-roleplay-stats{
    grid-template-columns:repeat(2,1fr)!important;
    height:auto!important;
  }
  .lr117-footer{
    grid-template-columns:1fr!important;
    min-height:auto!important;
    padding:28px 20px 190px!important;
    background-position:center bottom!important;
    background-size:auto 240px!important;
  }
  .lr117-footer .lr116-footer-community{grid-column:auto}
}