/* ======= Layout base ======= */
:root{
  --brand:#b50f0f;
  --text:#0f172a;
  --muted:#64748b;
}

html, body { width: 100%; overflow-x: hidden; } /* sin scroll horizontal */
img { max-width: 100%; height: auto; }          /* ninguna imagen rompe el ancho */


body{
  margin:0;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#686868;
  position:relative;

  min-height:100svh;                 /* mejor que 100vh en móviles */
  display:block;                     /* no centrar verticalmente el body */
  overflow-y:auto;                   /* permite scroll vertical */
  overflow-x:hidden;                 /* evita scroll horizontal */
  -webkit-overflow-scrolling:touch;  /* scroll suave iOS */
  touch-action: manipulation; 
  padding-top: calc(env(safe-area-inset-top) + 12px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

/* Fondo fullscreen */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("../img/background.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:translateZ(0);
  z-index:-2;
  pointer-events: none; 
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:rgba(255,255,255,.35);
  z-index:-1;
  pointer-events: none; 
}

/* --- Contenedor Bootstrap --- */
.container{
  padding-left: clamp(16px, 4vw, 48px) !important;
  padding-right: clamp(16px, 4vw, 48px) !important;
}

/* ======= Card (glass) ======= */
.card{
  background: rgba(255,255,255,0.35);                  /* más transparente, efecto vidrio */
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 22px;

  box-shadow:
    0 25px 50px rgba(0,0,0,0.25),                     /* sombra suave flotante */
    0 8px 20px rgba(0,0,0,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.3);

  width: min(92vw, 980px);
  margin: clamp(18px, 5vh, 64px) auto;
  padding: 32px 28px 28px;
  text-align: center;
  position: relative;

  transform: translateY(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* efecto hover/flotante sutil */
.card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 32px 60px rgba(0,0,0,0.25),
    0 12px 24px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* En pantallas grandes puede ampliarse un poco */
@media (min-width: 1024px){
  .card{
    width: min(80vw, 500px);
    margin-top: 60px;
  }
}

/* ======= Logo ======= */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}
.brand img{
  height:120px;         /* ajusta según tu logo */
  width:auto;
  display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}

/* ======= Tipografía ======= */
h1{font-size:1.45rem;margin:.25rem 0 .35rem}
p{margin:.25rem 0 .8rem;color:var(--text)}
.muted{color:var(--muted)}

/* ======= Spinner ======= */
.spinner{
  width:36px;
  height:36px;
  border:4px solid var(--brand);
  border-bottom-color:transparent;
  border-radius:50%;
  display:inline-block;
  vertical-align:middle;
  animation:spin .9s linear infinite;
}
/* Variante pequeña opcional: <span class="spinner spinner--mini"></span> */
.spinner.spinner--mini{
  width:22px;
  height:22px;
  border-width:3px;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Contenedor para un spinner centrado arriba del título */
.center-spinner{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:10px;
  transition: opacity .4s ease, transform .4s ease;
}
.center-spinner.hidden{
  opacity:0;
  transform:scale(.85);
  pointer-events:none;
}

/* ======= Línea de carga con texto (si pones spinner junto al título) */
.loading-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  animation: fadeInText 1s ease forwards;
}
@keyframes fadeInText{ to{ opacity:1; } }

/* (Si conservas los '...') Animación de puntos sin saltos */
.dots{
  display:inline-block;
  vertical-align:baseline;
  overflow:hidden;
  width:0ch;
  letter-spacing:0;
  margin-left:0;
  animation:dotsBlink 1.5s steps(4,end) infinite;
}
.dots::before{ content:'...'; }
@keyframes dotsBlink{
  0%{ width:0ch; }
  25%{ width:1ch; }
  50%{ width:2ch; }
  75%{ width:3ch; }
  100%{ width:0ch; }
}

/* ======= Botones ======= */
.btn{
  appearance:none;border:0;cursor:pointer;
  padding:10px 16px;border-radius:12px;font-weight:700;
  margin:8px 6px 0 6px;
  transition:transform .06s ease, opacity .2s ease;
}
.btn:active{ transform: translateY(1px) }
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.btn-primary{
  background:var(--brand); color:#fff;
  box-shadow:0 8px 18px rgba(233,14,14,.35);
}
.btn-secondary{
  background:rgba(255,255,255,.88); color:var(--text);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* ======= Inputs admin ======= */
.input-row{
  display:flex; align-items:center; gap:.6rem;
  margin:.6rem 0; padding:.35rem .6rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.7rem;
  background:rgba(255,255,255,.9);
}
.input-row .ico{ width:18px; height:18px; opacity:.8 }
.input-row input{
  flex:1; border:0; outline:0;
  background:transparent; color:var(--text);
}

/* ======= Carrusel ======= */
.carousel-title{
  width:100%;
  max-width:520px;
  margin:1.5rem auto .6rem;
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.2px;
}

.carousel-box{
  position: relative;              
  width:100%;
  max-width:520px;
  margin:0.1rem auto 0;
  height:min(22vh, 140px);
  border-radius:14px;
  background:rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
}

.carousel-img{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .25s ease-in-out;
  position:relative;
  z-index:1;
}
.carousel-img.show{ opacity:1; }

#carouselSpinner{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  pointer-events: none;     
  align-items:center;
  z-index:1;                 /* encima del <img> */
}
#carouselSpinner.hidden{ display:none; }

@keyframes spin { to { transform: rotate(360deg); } }



/* ======= Ocultación / animaciones ======= */
.hidden{ display:none }
.fade-out{ animation: fadeOut .25s ease forwards }
.fade-in { animation: fadeIn  .25s ease forwards }
@keyframes fadeOut{ to{ opacity:0; transform: translateY(-6px) } }
@keyframes fadeIn { from{ opacity:0; transform: translateY(6px) } to{ opacity:1; transform:none } }

/* ======= Footer ======= */
.card-footer-custom {
  background-color: transparent;
  color: #000; /* color general del texto */
  padding: 1rem 0.5rem;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  font-size: 0.9rem;
}

.card-footer-custom .footer-link {
  color: inherit;            
  text-decoration: none;     
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.card-footer-custom .footer-link:hover {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.footer-logo {
  max-width: 80px;
  height: auto;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.3));
}

/* ======= Responsive ======= */
@media (min-width:1024px){
  body::before{ background-position:center }
  .card{ max-width:600px; }
}
@media (max-width:767.98px){
  body::before{ background-position:left center; background-size:cover; }
}

/* Seguridad: ninguna imagen debe romper el layout */
img{ max-width:100%; height:auto; }

/* ===== MODAL ===== */
.wr-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
}
.wr-modal.is-open { display: flex; }

.wr-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.65);
}

.wr-dialog {
  position: relative; z-index: 1;
  width: min(94vw, 820px);
  height: min(92svh, 92vh, 92dvh);
  border-radius: 22px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.wr-modal.ready .wr-dialog { opacity: 1; transform: translateY(0); }

.wr-dialog img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

/* Botón X: negro, circular, esquina superior derecha */
.wr-close{
  position: absolute;
  top: 10px;      /* ajusta si quieres 12px o 8px */
  right: 10px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 9999px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.wr-close:hover{ transform: scale(1.08); background: #111; }
.wr-close:active{ transform: scale(.98); }
.wr-close svg{ display:block; pointer-events:none; } /* el tap llega al botón */
@media (max-width: 768px){
  .wr-close{ width: 50px; height: 50px; }
  .wr-close svg{ width: 24px; height: 24px; }
}
#btnVerActividades {
  background: linear-gradient(90deg, #ff3b3b, #b50f0f);
  box-shadow: 0 10px 20px rgba(181,15,15,.35);
  position: relative;
  z-index: 2;
}
#btnVerActividades:hover { filter: brightness(1.05); }

/* Viñetas rojas en los modales específicos */
#modalPolitica .modal-body ul li::marker,
#modalDescargo .modal-body ul li::marker {
  color: #920c0c; /* rojo marca */
}

/* Ajustes de espaciado para que se vea más prolijo */
#modalPolitica .modal-body ul,
#modalDescargo .modal-body ul {
  margin-left: 1.25rem;   /* sangría */
  padding-left: 0.75rem;
  list-style: disc;       /* bullets clásicos */
}

/* Asegura scroll interno en el cuerpo del modal */
#modalPolitica .modal-body,
#modalDescargo .modal-body {
  max-height: min(70vh, 520px);
  overflow: auto;
}

/* Efecto al habilitar el botón de cierre (pulse) */
.pulse {
  animation: pulse 1s ease-in-out 2;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(225, 25, 0, .6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(225, 25, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(225, 25, 0, 0);
  }
}