/* ===== Reset mínimo ===== */
html, body { height: 100%; margin: 0; }
body { background: #000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif; }

/* ===== Lienzo Centro Cultural ===== */
.cc-page { min-height: 100vh; min-height: 100dvh; }
.cc { width: 100%; min-height: 100vh; }

/* ===== Secciones a ALTO COMPLETO ===== */
.cc-banner,
.cc-carousel { position: relative; width: 100%; height: 100vh; overflow: hidden; }
@supports (height: 100dvh){ .cc-banner, .cc-carousel { height: 100dvh; } }

/* Imagen de banner a cover 100vh */
.cc-banner__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* Título flotante */
.cc-banner__title{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  margin:0; text-align:center; font-family:"Gotham Ultra",sans-serif;
  font-size:clamp(44px,10vw,160px); line-height:.9; letter-spacing:.02em;
  color:#fff; text-shadow:0 8px 30px rgba(0,0,0,.45);
  animation:cc-float 6s ease-in-out infinite;
}
@keyframes cc-float{ 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-10px)} }

/* Carrusel */
.cc-carousel__track{ position:absolute; inset:0; }
.cc-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .5s ease; }
.cc-slide.is-active{ opacity:1; }
.cc-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;
  border:0; border-radius:999px; background:#F28C28; color:#fff; font-size:28px; line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.22); cursor:pointer;
}
.cc-nav--prev{ left:24px; } .cc-nav--next{ right:24px; }

/* Botones flotantes */
.cc-actions{ position:fixed; right:20px; bottom:20px; display:flex; gap:10px; z-index:50; }
.cc-btn{ appearance:none; border:0; border-radius:8px; background:#F28C28; color:#fff; font-weight:800; padding:.7rem 1.1rem; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.cc-btn--ghost{ background:#fff; color:#111; text-decoration:none; display:inline-grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.18); }

.cc-btn:hover{
  background:#d37a21
}

.cc-btn--ghost:hover{
  background:#e6e6e6
}
/* ===== Hojas cayendo ===== */
.mem-leaves{ position:fixed; inset:0; pointer-events:none; z-index:40; }
.mem-leaves .leaf{
  position:absolute; top:-60px; left:0; will-change:transform;
  animation-name:leaf-fall, leaf-sway; animation-timing-function:linear, ease-in-out;
  animation-iteration-count:1, infinite;
}
@keyframes leaf-fall{ to{ transform:translateY(calc(100vh + 160px)) rotate(720deg) } }
@keyframes leaf-sway{ 0%,100%{ margin-left:0 } 50%{ margin-left:90px } }

/* =========================
   MODAL (solo texto, estilo Bioreyes)
   ========================= */
:root{
  --bio-dark:#2A3A1C;       /* flechas, X, thumb */
  --bio-paper:#FFFBDC;      /* fondo diálogo + track */
  --rail-bg:#C7C142;        /* contenedor X + rail */
  --modal-pad:28px;
  --rail-w:40px;
  --rail-gap:12px;
  --rail-gap-top:8px;
}

/* Overlay */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.38); backdrop-filter:blur(2px);
}
.modal.is-open{ display:flex; }

/* Marco */
.modal__dialog{
  width:min(1200px,92vw);
  max-height:min(88vh,900px);
  position:relative; border-radius:24px; overflow:hidden;
  padding:var(--modal-pad);
  padding-right:calc(var(--modal-pad) + var(--rail-w) + var(--rail-gap));
  box-sizing:border-box; background:var(--bio-paper);
  box-shadow:0 18px 46px rgba(0,0,0,.45);
}
.modal__dialog::before{
  content:""; position:absolute; inset:0;
  background-image:url("../img/Texturatartarjetas.svg");
  background-size:800px auto; background-repeat:repeat;
  opacity:.10; pointer-events:none; border-radius:inherit; z-index:0;
}

/* X */
.modal__close{
  position:absolute; top:var(--modal-pad); left:var(--modal-pad);
  width:var(--rail-w); height:var(--rail-w);
  background:var(--rail-bg); color:var(--bio-dark);
  border:0; border-radius:10px; box-shadow:0 2px 0 rgba(0,0,0,.15);
  font-size:22px; line-height:1; z-index:2; cursor:pointer;
}

/* Panel interior */
.modal__panel{
  position:relative; z-index:1; background:var(--bio-paper);
  border-radius:24px; height:100%;
  margin-right:20px; display:grid; grid-template-columns:1fr;
  gap:0; padding:16px 20px 20px; box-sizing:border-box;
  max-height:calc(100% - 2 * var(--modal-pad));
  overflow:hidden;
}

/* Texto (único que scrollea) */
.modal__content{ min-width:0; height:100%; position:relative; }
.modal__text{
  height:100%; max-height:100%; overflow:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y;
  padding:18px 28px 56px; box-sizing:border-box;
  color:var(--bio-dark); line-height:1.65; text-align:justify;
}
.modal__text::-webkit-scrollbar{ width:0; height:0; }

/* Rail */
.modal__rail{
  position:absolute;
  top:calc(var(--modal-pad) + var(--rail-gap-top));
  right:var(--modal-pad); bottom:var(--modal-pad);
  width:var(--rail-w); background:var(--rail-bg);
  border-radius:10px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  display:grid; grid-template-rows:40px 1fr 40px; align-items:center; justify-items:center;
  z-index:1; pointer-events:none;
}
.modal__rail *{ pointer-events:auto; }
.modal__btn{ width:36px; height:36px; border:0; border-radius:8px; background:var(--rail-bg); cursor:pointer; position:relative; }
.modal__btn::before{
  content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent;
}
.modal__btn--up::before{ border-bottom:14px solid var(--bio-dark); }
.modal__btn--down::before{ border-top:14px solid var(--bio-dark); }
.modal__track{ position:relative; width:14px; height:calc(100% - 16px); margin:6px auto; background:var(--bio-paper); border-radius:8px; }
.modal__thumb{ position:absolute; left:50%; transform:translateX(-50%); width:10px; min-height:38px; background:var(--bio-dark); border-radius:6px; cursor:grab; }
.modal__thumb:active{ cursor:grabbing; }

/* Responsive */
@media (max-width:1024px){
  .modal__dialog{ --modal-pad:24px; --rail-w:36px; }
  .modal__rail{ grid-template-rows:36px 1fr 36px; }
  .modal__btn{ width:34px; height:34px; }
}
@media (max-width:820px){
  .modal{ align-items:flex-start; padding:12px 0; overflow:auto; }
  .modal__dialog{ width:min(740px,96vw); max-height:none; padding:18px; padding-right:18px; }
  .modal__panel{ height:auto; max-height:none; margin-right:0; padding:14px; overflow:visible; }
  .modal__rail{ display:none; }
  .modal__close{ left:18px; top:18px; width:28px; height:28px; font-size:18px; }
  .modal__text{ max-height:none; overflow:auto; }
}
/* Móvil “full-screen”: 600px o menos */
/* Móvil 600px ↓ — ventana flotante grande y contenido que crece */
@media (max-width: 600px){
    /* centrada, sin ocupar toda la pantalla */
    .modal{
      align-items: center;
      padding: 10px 0;
    }
  
    /* marco/textura más grande pero flotante */
    .modal__dialog{
      --modal-pad: 16px;         
      width: 92vw;               
      max-width: 520px;
      height: auto;
      max-height: 92dvh;       
      border-radius: 18px;
      padding: var(--modal-pad);
      padding-right: var(--modal-pad); 
    }
  
    .modal__panel{
      margin-right: 0;
      padding: 12px;
      height: auto;
      max-height: calc(92dvh - (var(--modal-pad) * 2));
      overflow: hidden;         
    }
  
    .modal__content{
      height: 100%;
      min-height: 0;          
    }
  
    .modal__text{
      height: 100%;
      max-height: 100%;
      overflow: auto;            
      padding: 12px 14px 18px;
    }
  
    .modal__rail{ display: none; }
    .modal__close{
      left: var(--modal-pad);
      top:  var(--modal-pad);
      width: 28px; height: 28px; font-size: 18px;
      border-radius: 8px;
    }
  }