/**
 * RB Skins — Halloween
 * Toque estacional elegante sobre el design system RB (sin romper marca).
 */

:root{
  --rb-skin-accent: #E87722;
  --rb-skin-accent-deep: #B84E0C;
  --rb-skin-night: #1A1210;
  --rb-skin-mist: #2A1C18;
}

/* Slim seasonal ribbon */
.rb-skin--halloween .rb-skin-banner{
  position:relative;
  z-index:1000;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:9px 16px;
  background:
    linear-gradient(90deg, #1A1210 0%, #2C1810 35%, #3D220F 50%, #2C1810 65%, #1A1210 100%);
  color:#F6E7D8;
  font-family:var(--rb-font-body, "Source Sans 3", sans-serif);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(232,119,34,.45);
  overflow:hidden;
}
.rb-skin--halloween .rb-skin-banner::before,
.rb-skin--halloween .rb-skin-banner::after{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--rb-skin-accent);
  box-shadow:0 0 0 3px rgba(232,119,34,.22);
  flex:0 0 auto;
}
.rb-skin--halloween .rb-skin-banner__text{
  opacity:.95;
}
.rb-skin--halloween .rb-skin-banner::after{
  animation: rbSkinPulse 2.8s ease-in-out infinite;
}

/* Header warmth */
.rb-skin--halloween .elementor-location-header,
.rb-skin--halloween .rb-site-header,
.rb-skin--halloween .v2-header{
  box-shadow:0 1px 0 rgba(232,119,34,.28), 0 10px 28px rgba(26,18,16,.06);
}
.rb-skin--halloween .elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
.rb-skin--halloween .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active{
  color:var(--rb-skin-accent-deep) !important;
}
.rb-skin--halloween .elementor-location-header .elementor-nav-menu--main .elementor-item:before,
.rb-skin--halloween .elementor-location-header .elementor-nav-menu--main .elementor-item:after{
  background-color:var(--rb-skin-accent) !important;
}

/* Soft page atmosphere */
.rb-skin--halloween .site-content,
.rb-skin--halloween #content{
  background-image:
    radial-gradient(1200px 420px at 10% -10%, rgba(232,119,34,.08), transparent 60%),
    radial-gradient(900px 380px at 95% 0%, rgba(26,18,16,.06), transparent 55%);
  background-repeat:no-repeat;
}

/* Buttons */
.rb-skin--halloween .elementor-button.elementor-button-primary,
.rb-skin--halloween .rb-btn--primary,
.rb-skin--halloween .v2-btn--fill,
.rb-skin--halloween .v2-btn--white{
  background-color:var(--rb-skin-accent) !important;
  border-color:var(--rb-skin-accent) !important;
  color:#1A1210 !important;
}
.rb-skin--halloween .elementor-button.elementor-button-primary:hover,
.rb-skin--halloween .rb-btn--primary:hover,
.rb-skin--halloween .v2-btn--fill:hover{
  background-color:var(--rb-skin-accent-deep) !important;
  border-color:var(--rb-skin-accent-deep) !important;
  color:#fff !important;
}
.rb-skin--halloween .v2-btn--ghost,
.rb-skin--halloween .v2-btn--ghost-white{
  border-color:var(--rb-skin-accent) !important;
  color:var(--rb-skin-accent-deep) !important;
}

/* Header CTA: never orange-on-red */
.rb-skin--halloween .elementor-location-header .elementor-button,
.rb-skin--halloween .elementor-location-header .elementor-button-link,
.rb-skin--halloween .elementor-location-header a.elementor-button{
  background-color:var(--rb-skin-accent) !important;
  border-color:var(--rb-skin-accent) !important;
  color:#1A1210 !important;
}
.rb-skin--halloween .elementor-location-header .elementor-button .elementor-button-text,
.rb-skin--halloween .elementor-location-header .elementor-button span{
  color:#1A1210 !important;
}
.rb-skin--halloween .elementor-location-header .elementor-button:hover,
.rb-skin--halloween .elementor-location-header .elementor-button-link:hover{
  background-color:var(--rb-skin-accent-deep) !important;
  border-color:var(--rb-skin-accent-deep) !important;
  color:#fff !important;
}
.rb-skin--halloween .elementor-location-header .elementor-button:hover .elementor-button-text,
.rb-skin--halloween .elementor-location-header .elementor-button:hover span{
  color:#fff !important;
}

/* Cover / CTA seasonal tint */
.rb-skin--halloween .v2-cover__pill{
  background:var(--rb-skin-accent) !important;
  color:#1A1210 !important;
}
.rb-skin--halloween .v2-cover__veil{
  background:linear-gradient(120deg, rgba(26,18,16,.72) 0%, rgba(26,18,16,.35) 55%, rgba(232,119,34,.18) 100%) !important;
}
.rb-skin--halloween .v2-cta,
.rb-skin--halloween .v2-cta--ficha{
  background:linear-gradient(135deg, #1A1210 0%, #2A1812 55%, #3A220F 100%) !important;
}
.rb-skin--halloween .v2-facts__label{
  color:var(--rb-skin-accent-deep) !important;
}

.rb-skin--halloween .v2-story__num,
.rb-skin--halloween .v2-flowlist__mark,
.rb-skin--halloween .v2-checkgrid__mark{
  background:var(--rb-skin-accent) !important;
}
.rb-skin--halloween .v2-flowlist__mark{
  box-shadow:0 0 0 4px rgba(232,119,34,.16) !important;
}
.rb-skin--halloween .v2-story--airy .v2-story__block.is-band{
  background:linear-gradient(135deg, rgba(232,119,34,.08) 0%, rgba(250,248,247,.75) 100%) !important;
  border-color:rgba(232,119,34,.18) !important;
}
.rb-skin--halloween .v2-story--airy .v2-story__block.is-soft{
  border-left-color:rgba(232,119,34,.55) !important;
}

.rb-skin--halloween .elementor-location-footer{
  background:#140E0C !important;
  box-shadow:inset 0 1px 0 rgba(232,119,34,.25);
}
.rb-skin--halloween .rb-footer-slogan em,
.rb-skin--halloween .v2-footer-copy a{
  color:#F0B27A !important;
}

@keyframes rbSkinPulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.25);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .rb-skin--halloween .rb-skin-banner::after{animation:none}
  .rb-skin-fx__aurora,
  .rb-skin-fx__shaft,
  .rb-skin-fx__ember,
  .rb-skin-fx__dusk{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

.admin-bar.rb-skin--halloween .rb-skin-banner{top:32px}
@media (max-width:782px){
  .admin-bar.rb-skin--halloween .rb-skin-banner{top:46px}
}

/* =========================================================
   Entrance FX — cinematic dusk aurora
   Full viewport with bottom fade-mask: presence without blackout.
   ========================================================= */
.rb-skin-fx{
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  overflow:hidden;
  opacity:1;
  transition:opacity .9s ease;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.rb-skin-fx.is-out{opacity:0 !important}

.rb-skin-fx__dusk{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(232,119,34,.34), transparent 58%),
    radial-gradient(ellipse 55% 45% at 8% 30%, rgba(184,78,12,.22), transparent 62%),
    radial-gradient(ellipse 50% 40% at 92% 25%, rgba(120,40,18,.18), transparent 60%),
    linear-gradient(180deg, rgba(26,18,16,.38), rgba(26,18,16,.12) 55%, transparent 100%);
  animation: rbSkinDusk 4s ease both;
}
.rb-skin-fx.is-home .rb-skin-fx__dusk{
  background:
    radial-gradient(ellipse 95% 75% at 50% -8%, rgba(232,119,34,.42), transparent 56%),
    radial-gradient(ellipse 60% 50% at 6% 28%, rgba(184,78,12,.28), transparent 60%),
    radial-gradient(ellipse 55% 45% at 94% 22%, rgba(100,30,12,.22), transparent 58%),
    linear-gradient(180deg, rgba(26,18,16,.45), rgba(26,18,16,.16) 50%, transparent 100%);
  animation-duration:4.6s;
}

.rb-skin-fx__auroras{
  position:absolute;
  inset:0;
}
.rb-skin-fx__aurora{
  position:absolute;
  left:var(--x, 50%);
  top:var(--y, 20%);
  width:var(--w, 42vw);
  height:var(--h, 28vw);
  margin:calc(var(--h, 28vw) / -2) 0 0 calc(var(--w, 42vw) / -2);
  border-radius:50%;
  background:radial-gradient(ellipse at 40% 40%, var(--c1, rgba(255,170,80,.55)), var(--c2, rgba(232,119,34,.18)) 45%, transparent 70%);
  filter:blur(28px);
  opacity:0;
  mix-blend-mode:screen;
  animation: rbSkinAurora var(--dur, 4s) var(--delay, 0s) ease both;
  will-change:transform, opacity;
}
.rb-skin-fx.is-home .rb-skin-fx__aurora{
  filter:blur(32px);
}

.rb-skin-fx__shaft{
  position:absolute;
  top:-10%;
  left:-35%;
  width:42%;
  height:120%;
  background:linear-gradient(
    105deg,
    transparent 32%,
    rgba(255,236,210,.28) 47%,
    rgba(232,119,34,.16) 52%,
    transparent 68%
  );
  transform:skewX(-14deg);
  animation: rbSkinShaft 3.4s cubic-bezier(.2,.75,.2,1) both;
}
.rb-skin-fx.is-home .rb-skin-fx__shaft{
  width:48%;
  animation-duration:3.8s;
}

.rb-skin-fx__embers{
  position:absolute;
  inset:0;
}
.rb-skin-fx__ember{
  position:absolute;
  left:var(--x, 50%);
  top:var(--y, 60%);
  width:var(--size, 8px);
  height:var(--size, 8px);
  margin:calc(var(--size, 8px) / -2) 0 0 calc(var(--size, 8px) / -2);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE2B0, #E87722 55%, transparent 72%);
  box-shadow:0 0 12px 3px rgba(232,119,34,.45);
  opacity:0;
  animation: rbSkinEmber var(--dur, 3.2s) var(--delay, 0s) ease both;
  will-change:transform, opacity;
}

@keyframes rbSkinDusk{
  0%{opacity:0}
  12%{opacity:1}
  62%{opacity:1}
  100%{opacity:0}
}
@keyframes rbSkinAurora{
  0%{transform:translate3d(0,12%,0) scale(.85);opacity:0}
  18%{opacity:.9}
  55%{opacity:.85}
  100%{transform:translate3d(var(--dx, 4%), var(--dy, -8%), 0) scale(1.15);opacity:0}
}
@keyframes rbSkinShaft{
  0%{transform:translate3d(-25%,0,0) skewX(-14deg);opacity:0}
  16%{opacity:1}
  100%{transform:translate3d(260%,0,0) skewX(-14deg);opacity:0}
}
@keyframes rbSkinEmber{
  0%{transform:translate3d(0,20px,0) scale(.5);opacity:0}
  15%{opacity:1}
  100%{
    transform:translate3d(var(--dx, 0px), var(--dy, -120px), 0) scale(1.1);
    opacity:0;
  }
}

/* Mobile: kill stylesheet keyframes; motion comes from Web Animations API. */
.rb-skin-fx.is-mobile-fx .rb-skin-fx__dusk,
.rb-skin-fx.is-mobile-fx .rb-skin-fx__aurora,
.rb-skin-fx.is-mobile-fx .rb-skin-fx__shaft,
.rb-skin-fx.is-mobile-fx .rb-skin-fx__ember,
.rb-skin-fx.is-mobile-fx [data-rb-dusk],
.rb-skin-fx.is-mobile-fx [data-rb-shaft],
.rb-skin-fx.is-mobile-fx [data-rb-ember]{
  animation:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}
.rb-skin-fx.is-mobile-fx .rb-skin-fx__dusk,
.rb-skin-fx.is-mobile-fx [data-rb-dusk]{
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(232,119,34,.72), transparent 55%),
    radial-gradient(ellipse 90% 70% at 0% 40%, rgba(184,78,12,.52), transparent 58%),
    radial-gradient(ellipse 80% 60% at 100% 30%, rgba(100,30,12,.42), transparent 55%),
    linear-gradient(180deg, rgba(26,18,16,.72), rgba(26,18,16,.36) 40%, transparent 75%) !important;
}
@media (max-width:700px){
  .rb-skin-fx__ember,
  .rb-skin-fx [data-rb-ember]{
    box-shadow:0 0 16px 5px rgba(232,119,34,.65);
  }
}