@charset "UTF-8";

/* ===========================
   BASE / LAYOUT
=========================== */
.container{max-width:75rem;margin:0 auto;}
.swiper{width:100%;height:auto;overflow:hidden;position:relative;}
.swiper-slide{background:#000;position:relative;}

.banner-container{
  width: 100vw;        /* Take the full viewport width */
  max-width: 100vw;    /* Prevent any extra max-width constraints */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;  /* Center a 100vw-wide element inside a constrained container */
  margin-right: -50vw;
}

/* Always show Swiper arrows and pagination */
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
  opacity: 1 !important;      /* Always visible */
  visibility: visible !important;
}

body{
  overflow-x: hidden;
}

/* Aspect ratios */
.aspect-ratio{position:relative;width:100%;aspect-ratio:8/3;overflow:hidden;}
.aspect-ratio picture,
.aspect-ratio img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* ===========================
   SWIPER CONTROLS
=========================== */
.swiper-button-next,.swiper-button-prev{color:#fff;font-size:2rem;text-shadow:1px 1px 2px #000;}
.swiper-pagination-bullet{background:#fff;opacity:.6;width:12px;height:12px;transition:all .5s;}
.swiper-pagination-bullet-active{background:#fcbf49;opacity:1;}

/* ===========================
   SHARED BUTTON
=========================== */
.btn-prison,.btn-prison:hover{
  display:inline-block;padding:.5rem 1.25rem;border-radius:5px;
  font-weight:700;text-decoration:none;transition:background-color .3s ease;
}
.btn-prison{background:#fcbf49;color:#000;}
.btn-prison:hover{background:#f77f00;color:#fff;}

/* ===========================
   KEYFRAMES (other slides)
=========================== */
@keyframes fadeInPrisonDesktop{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(-50%)}}
@keyframes fadeInTodayDesktop{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(-200%)}}
@keyframes fadeInAbortionDesktop{from{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(-50%)}}
@keyframes fadeInPrisonMobile{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInAbortionMobile{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.animate-prison-desktop{animation:fadeInPrisonDesktop 1s ease-out both;}
.animate-today-desktop{animation:fadeInTodayDesktop 1s ease-out both;}
.animate-abortion-desktop{animation:fadeInAbortionDesktop 1s ease-out both;}

/* ===========================
   SOD (Layered slide + effects)
   — Positions & timing via CSS variables
=========================== */

/* Desktop defaults */
.slide-sod{
  /* positions/sizes */
  --image-top:7%; --image-left:50%; --image-width:45%;
  --logo-top:3%;   --logo-left:-1%;  --logo-width:50%;
  --text1-top:57%; --text1-left:6%; --text1-width:56%;
  --text2-top:68%; --text2-left:37%; --text2-width:65%;
  /* animation */
  --fx-duration:800ms; --fx-ease:cubic-bezier(.2,.7,.3,1);
  --fx-distance:24px;  --fx-delay-1:0ms; --fx-delay-2:240ms; --fx-delay-3:480ms;
}

/* KINDLING: custom positions & stagger (desktop default) */
.slide-sod.slide-kindling{
  /* Positions / sizes on desktop */
  --logo-top:6%; --logo-left:-3%; --logo-width:55%;
  --text1-top:40%; --text1-left:4%; --text1-width:54%;
  /* Optional: make the stagger a bit more pronounced on this slide */
  --fx-delay-1: 0ms;      /* logo */
  --fx-delay-2: 260ms;    /* text */
  --fx-delay-3:520ms;     /* CTA */
}

/* Mobile: variable overrides for Kindling */
@media (max-width:767px){
  .slide-sod.slide-kindling{
    --logo-top:5%; --logo-left:-8%; --logo-width:120%;
    --text1-top:40%; --text1-left:-3%; --text1-width:105%;
    --cta-top:63%;  --cta-left:8%;
    --fx-delay-1: 0ms;
    --fx-delay-2: 220ms;
    --fx-delay-3:420ms;
  }
}

/* Layer layout */
.slide-sod .sod-bg{position:absolute;inset:0;z-index:1;}
.slide-sod .sod-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.slide-sod .sod-layer{position:absolute;pointer-events:none;}
.slide-sod .sod-image{z-index:2;top:var(--image-top);left:var(--image-left);width:var(--image-width);height:auto;}
.slide-sod .fx{z-index:3;}
.slide-sod .sod-logo{ top:var(--logo-top);  left:var(--logo-left);  width:var(--logo-width);  height:auto;}
.slide-sod .sod-text1{top:var(--text1-top); left:var(--text1-left); width:var(--text1-width); height:auto;}
.slide-sod .sod-text2{top:var(--text2-top); left:var(--text2-left); width:var(--text2-width); height:auto;}

/* Override global rule for layer images */
.slide-sod .sod-layer img{position:static!important;width:100%!important;height:auto!important;display:block;object-fit:contain!important;}

/* States + animation */
.slide-sod .fx>img{opacity:0;transform:translateY(var(--fx-distance));will-change:opacity,transform;}
@keyframes sod-rise-in{from{opacity:0;transform:translateY(var(--fx-distance))}to{opacity:1;transform:translateY(0)}}
.slide-sod.animate-sod .fx-1>img{animation:sod-rise-in var(--fx-duration) var(--fx-ease) var(--fx-delay-1) both;}
.slide-sod.animate-sod .fx-2>img{animation:sod-rise-in var(--fx-duration) var(--fx-ease) var(--fx-delay-2) both;}
.slide-sod.animate-sod .fx-3>img{animation:sod-rise-in var(--fx-duration) var(--fx-ease) var(--fx-delay-3) both;}

/* ===================================================================== */
/* ======================== MEDIA QUERIES (grouped) ===================== */
/* ===================================================================== */

/* Desktop / Tablet ≥768px */
@media (min-width:768px){
  .slide-prison-caption{
    position:absolute;top:50%;left:10%;transform:translateY(-50%);color:#fff;max-width:40%;
    z-index:2;font-family:'Georgia',serif;padding:1rem 1.5rem;border-radius:8px;
  }
  .slide-prison-caption h2{color:#fcbf49;font-size:2.25rem;font-weight:500;font-family:'Oswald',sans-serif!important;margin-bottom:.75rem;}
  .slide-prison-caption p{font-size:1.1rem;font-weight:300;margin-bottom:1rem;}

  .slide-today-caption{position:absolute;bottom:2rem;right:2rem;transform:translateY(-100%);z-index:2;font-family:'Georgia',serif;}
  .btn-today{background:#fcbf49;color:#000;padding:.5rem 1.25rem;border-radius:5px;font-weight:700;text-decoration:none;transition:background-color .3s ease;}
  .btn-today:hover{background:#f77f00;color:#fff;}

  .slide-abortion-caption{
    position:absolute;top:50%;left:10%;transform:translateY(-50%);color:#000;max-width:40%;
    z-index:10;font-family:'Georgia',serif;padding:1rem 1.5rem;border-radius:8px;
  }
  .slide-abortion-caption p{font-size:2rem;font-weight:300;margin:25% 0 1rem;}
  .btn-abortion{width:450px;}
}

/* Mobile ≤767px */
@media (max-width:767px){
  /* 4:5 ratio */
  .aspect-ratio{aspect-ratio:1/1;height:auto;padding-top:0!important;}
  .aspect-ratio picture,.aspect-ratio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .swiper,.swiper-wrapper,.swiper-slide{height:auto!important;}

  /* disable desktop animations on mobile */
  .animate-prison-desktop,.animate-today-desktop,.animate-abortion-desktop{animation:none!important;}

  /* prison caption (mobile) */
  .slide-prison-caption{
    position:absolute;bottom:3rem;background:rgba(255,255,255,.8);font-family:'Georgia',serif;color:#000;border-radius:12px;
    text-align:center;box-shadow:0 5px 20px rgba(0,0,0,.2);padding:5px;margin:15px;z-index:10;
  }
  .animate-prison-mobile{animation:fadeInPrisonMobile 1s ease-out both;}
  .animate-abortion-mobile{animation:fadeInAbortionMobile 1s ease-out both;}
  .slide-prison-caption h2,.text-title-prison{display:none!important;}
  .slide-prison-caption p{font-size:1rem;color:#333;margin-bottom:.75rem;text-align:center;}
  .slide-prison-caption a.btn-prison{font-size:1rem;padding:.5rem 1rem;display:inline-block;}

  .slide-abortion-caption{position:absolute;top:4rem;padding:5px;margin:15px;z-index:10;}
  .slide-abortion-caption p{font-family:'Georgia',serif;font-size:1.1rem;font-weight:300;margin-bottom:1rem;}
  .btn-abortion{width:350px;}

  /* SOD: mobile vars */
  .slide-sod{
    --image-top:23%; --image-left:14%; --image-width:70%;
    --logo-top:1%;   --logo-left:9%;  --logo-width:80%;
    --text1-top:61%; --text1-left:6%; --text1-width:88%;
    --text2-top:74%; --text2-left:6%; --text2-width:88%;
    --fx-distance:16px; --fx-delay-1:0ms; --fx-delay-2:180ms; --fx-delay-3:360ms;
  }
}

/* Full-slide hit area (on top of layers) */
.slide-sod .sod-hit{
  position:absolute; inset:0;
  z-index:5;               /* above bg/image/text; keep arrows above this */
  display:block;
  pointer-events:auto;     /* allow click/tap */
  background:transparent;  /* no visual overlay */
  cursor:pointer;
}

/* Default CTA position (desktop/tablet) */
.slide-sod { --cta-top: 72%; --cta-left: 8%; --cta-width: 22%;  }

/* KINDLING: desktop/tablet only - make CTA ~40% smaller, position on left side, push it down */
@media (min-width: 768px){
  .slide-sod.slide-kindling{
    --cta-width: 13.2%;
    /* Use % positioning so CTA scales/moves with the background (like mobile) */
    --cta-left: 12%;
    --cta-top: 85%;
  }
}

/* CTA container positioning + enable click */
.slide-sod .sod-cta{
  position: absolute;
  z-index: 4;
  top: var(--cta-top);
  left: var(--cta-left);
  pointer-events: auto; /* Important: allow click */
  display: block;                 /* ← NUEVO */
  width: var(--cta-width); 
}

/* CTA image */
.slide-sod .cta-image{
  position: static !important;   
  inset: auto !important;  
  display: block;
  width: 100%;  
  height: auto;
  animation: sod-float 6s ease-in-out calc(var(--fx-delay-3) + 800ms) infinite;
}

.slide-sod .cta-image img{
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain !important;
}

/* Arrow sizing and alignment */
.slide-sod .btn-kindling .arrow{
  width: 56px;
  height: 24px;
  display: block;
  overflow: visible; /* Avoid clipping the tip */
  transform: translateY(1px);
}

@keyframes sod-float{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* Mobile (≤767px): position and size adjustments */
@media (max-width: 767px){
  /* Per-slide mobile position override - keep original size */
  .slide-sod.slide-kindling{ --cta-top: 63%; --cta-left: 12%; --cta-width: 40%; }

}
/* Include CTA in layered animations */
.slide-sod .fx>*{opacity:0;transform:translateY(var(--fx-distance));will-change:opacity,transform;}
.slide-sod.animate-sod .fx-1>*{animation:sod-rise-in var(--fx-duration) var(--fx-ease) var(--fx-delay-1) both;}
.slide-sod.animate-sod .fx-2>*{animation:sod-rise-in var(--fx-duration) var(--fx-ease) var(--fx-delay-2) both;}
.slide-sod.animate-sod .fx-3>*{animation:sod-rise-in var(--fx-duration) var(--fx-ease) var(--fx-delay-3) both;}

.mySwiper {
  position: relative; 
}

.mySwiper .swiper-pagination,
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
  z-index: 9999 !important;
  pointer-events: auto;
}


.slide-sod .sod-hit {
  z-index: 10;
}