/* =========================================================
   < 500px  (mobile small)
   ========================================================= */

/* -----------------------------
   00) GLOBAL / TYPO / SPACING
-------------------------------- */
@media (max-width: 499.98px){
  :root{
    --pad: 14px;
  }
  .title{
    font-size: 38px;
    line-height: 1.05;
    margin-bottom: 14px;
  }
  .lead{
    font-size: 14px;
    line-height: 1.6;
  }
  .btn{
    font-size: 11px;
    padding: 6px 10px;
    letter-spacing: 0.1em;
  } 
  .btn--primary{
        outline: 1px solid rgba(201, 168, 134, .55);
    outline-offset: 2px;
  }
}

/* -----------------------------
   CURSOR FIX (mobile / tablet)
-------------------------------- */
@media (hover: none), (pointer: coarse){
  .spotlight,
  .cursor-ring{
    display: none !important;
  }

  body{
    cursor: auto !important;
  }
}

/* -----------------------------
   10) NAV  (<500px)
-------------------------------- */
@media (max-width: 499.98px){
  .nav{
    position: fixed;
    top: 12px;
    right: 12px;
    left: auto;
    transform: none;

    width: auto;
    max-width: none;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;

    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    overflow: visible;
    z-index: 9999;
  }
  .nav__toggle{
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;

    border-radius: 3px;
    border: none;
    background: rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .nav__burger{
    position: relative;
    width: 18px;
    height: 2px;
    background: rgba(242,242,242,.85);
    display: block;
  }
  .nav__burger::before,
  .nav__burger::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background: rgba(242,242,242,.85);
  }
  .nav__burger::before{ top:-6px; }
  .nav__burger::after { top: 6px; }
  .nav__links{
    display: none;

    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);

    width: min(320px, calc(100vw - 20px));
    padding: 12px;

    border-radius: 3px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(10,10,10,.38);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 80px rgba(0,0,0,.55);

    flex-direction: column;
    gap: 6px;

    z-index: 10000;
  }
  .nav.nav--open .nav__links{
    display: flex;
    animation: navDrop .18s ease-out;
  }
  @keyframes navDrop{
    from{ opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to  { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  .nav__links a{
    width: 100%;
    padding: 12px 12px;

    border-radius: 3px;
    font-size: 12px;
    letter-spacing: .18em;
    text-align: center;

    color: rgba(242,242,242,.78);
    opacity: .95;
  }
  .nav__links a:hover{ background: rgba(255,255,255,.06); }
  .nav__links a.is-active{ background: rgba(255,255,255,.08); color: rgba(242,242,242,.92); }
}

/* -----------------------------
   20) Recepcion
-------------------------------- */
@media (max-width: 499.98px){
  .lobby-card{
    width: min(92vw, 520px);
    padding: 18px 16px;
    margin-bottom: 34px;
  }
  .lobby-card::before,
  .lobby-card::after{
    inset: 12px; 
  }
}
/* -----------------------------
   30) GALLERY / DOORS (panel)
-------------------------------- */
@media (max-width: 499.98px){
  .scene--door{
    --panelX: 16px;
    --panelY: auto;
    --panelW: min(520px, 92vw);
  }
  .scene--door .door__panel{
    top: auto;
    bottom: 18px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: var(--panelW);
    text-align: left;
  }
  .scene--door.is-panel-right .door__panel{
    left: 50%;
  }
  .scene--door.is-panel-right .door__panel .door__panel--btns{
    align-items: end;
  }
  .scene--door .door__panel--btns{
    gap: 12px;
    padding: 14px 0 0;
    align-items: stretch; 
  }
  .scene--galleryIntro .scene__photo{
    background-position: 38% center;
    filter: contrast(1.05) saturate(.9) brightness(1.5);
  }
  .content--galleryIntro{
    grid-template-columns: 1fr;
    grid-template-rows: auto 2fr auto;
    column-gap: 0;
    padding: 0px var(--pad) 26px var(--pad);
  }
  .scene--galleryIntro .title{
    font-size: 42px;
    letter-spacing: .10em;
    line-height: .95;
  }
  .scene--galleryIntro .lead{
    grid-row: 2;
    grid-column: 1;
    max-width: 40ch;
    margin-top: 12px;
  }
  .content--galleryIntro .btn{
    grid-row: 3;
    grid-column: 1;
    justify-self: start;
    margin-top: 18px;
  }
  #gallery-room-02.scene.scene--door{
    background-position: 42% center;
  }
  #gallery-room-03.scene.scene--door{
    background-position: 27% center;
  }
}

/* -----------------------------
   40) ATELIER (mobile como Galería)
-------------------------------- */
@media (max-width: 499.98px){
  .scene--workshops{
    padding: 0 var(--pad) 22px;
  }

  .scene--workshops .atelierLeft,
  .scene--workshops .atelierCenter,
  .scene--workshops .atelierRight,
  .scene--workshops .atelierMore{
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;

    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .scene--workshops .title{
    font-size: 42px;
    letter-spacing: .10em;
    line-height: .95;
    margin: 5px 0 10px;
  }

  .scene--workshops .lead{
    max-width: 40ch;
    margin: 0 0 14px;
  }

  .scene--workshops .atelierCenter{
    margin: 10px auto 14px;
    pointer-events: auto;
  }

  .atelierWheel{
    width: 100%;
    height: 230px;
    --arrow-offset-y: 45px;
    --arrow-gap: 5px;
    --arrow-size: 38px;
  }

  .scene--workshops .atelierRight{
    margin: 40px auto 10px;
  }

  .atelierMore{
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    padding: 10px 12px;
  }
  .atelierInfo{
    margin-bottom: 20px;
  }
  .kicker.atelierInfo__kicker,
  .atelierInfo__meta{
    display: none;
  }
  
}

/* -----------------------------
   60) EPILOGO (1 col)
-------------------------------- */
@media (max-width: 499.98px){
  .epilogoGrid{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 45px;
    margin-top: 40px;
  }

  .epilogoCol .lead{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px; 
  }
  .scene--epilogo .title{
    font-size: 18px;
    line-height: 1.02;
    letter-spacing: .06em;
  }
  .epilogoBack{
    margin-top: 40px
  }

}

/* =========================================================
   500–1023px  (mobile large / tablet)
   ========================================================= */

/* -----------------------------
   00) GLOBAL / TYPO / SPACING
-------------------------------- */
@media (min-width: 500px) and (max-width: 1023.98px){
  :root{ --pad: 16px; }

  .title{
    font-size: 38px;
    line-height: 1.02;
    margin-bottom: 16px;
  }

  .scene--galleryIntro .title,
  .scene--workshops .title{
    font-size: 54px;
    letter-spacing: .10em;
    line-height: .95;
  }

  .lead{
    font-size: 14.5px;
    line-height: 1.65;
  }

  .btn{
    font-size: 11px;
    padding: 8px 12px;
    letter-spacing: .14em;
  }
}

/* -----------------------------
   10) NAV 
-------------------------------- */
@media (min-width: 500px) and (max-width: 1023.98px){

  /* NAV: usar desktop (links visibles) */
  .nav__toggle{ display: none !important; }

  .nav__links{
    display: flex !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: auto !important;
    padding: 0 !important;
    flex-direction: row !important;
    gap: 22px;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* por si quedó la clase abierta de mobile */
  .nav.nav--open .nav__links{ display: flex !important; }
}

/* -----------------------------
   20) RECEPCION (card)
-------------------------------- */
@media (min-width: 500px) and (max-width: 1023.98px){
  .lobby-card{
    width: min(86vw, 640px);
    padding: 22px 22px;
    margin-bottom: 44px;
  }
  .lobby-card::before,
  .lobby-card::after{ inset: 14px; }
}

/* -----------------------------
   30) GALLERY INTRO (1 columna)
-------------------------------- */
@media (min-width: 500px) and (max-width: 1023.98px){
  .scene--galleryIntro .scene__photo{
    background-position: 50% center;
    filter: contrast(1.05) saturate(.9) brightness(.95);
  }
  .content--galleryIntro{
    grid-template-columns: 1.5fr 1fr;
    justify-items: start;         
    text-align: left;
    padding-left: calc(var(--pad) + 18px);
    padding-right: calc(var(--pad) + 18px);
  }

  .scene--galleryIntro .lead{
    margin-left: 0;
    margin-right: 0;
    max-width: 58ch;
  }

  .content--galleryIntro .btn{
    justify-self: end;
  }
}

/* -----------------------------
   35) DOORS (panel abajo centrado)
-------------------------------- */
@media (min-width: 500px) and (max-width: 1023.98px){
  .scene--door{
    --panelX: 18px;
    --panelY: auto;
    --panelW: min(640px, 92vw);
  }

  .scene--door .door__panel{
    top: auto;
    bottom: 22px;
    left: 43%;
    right: auto;
    transform: translateX(-50%);
    width: var(--panelW);
    text-align: left;
  }

  .scene--door.is-panel-right .door__panel{ left: 57%; }

  .scene--door .door__panel--btns{
    gap: 12px;
    padding: 14px 0 0;
    align-items: end;
  }
  
  #gallery-room-03.scene.scene--door {
    background-position: 38% center;
  }
}

/* -----------------------------
   40) ATELIER (tablet = 1 columna compacta)
-------------------------------- */
@media (min-width: 500px) and (max-width: 1023.98px){
   .scene--workshops {
    --leadShiftY: 25px;
  }
  .scene--workshops{
    padding: 0 var(--pad) 28px;
  }

  .scene--workshops .atelierLeft,
  .scene--workshops .atelierCenter,
  .scene--workshops .atelierRight{
    position: relative;
    left: auto;
    right: auto;
    top: 60px;
    transform: none;

    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .scene--workshops .lead{
    max-width: 56ch;
    margin: 0px;
    top: var(--leadShiftY);
  }

  .scene--workshops .atelierCenter{
    margin: 14px auto 18px;
    pointer-events: auto;
  }

  .atelierWheel{
    width: 100%;
    height: 150px;
    --arrow-offset-y: 95px;
    --arrow-gap: 10px;
    --arrow-size: 35px;
  }

  .scene--workshops .atelierRight{
    margin: 46px auto 10px;
  }

  .atelierInfo{ margin-bottom: 18px; }
  .kicker.atelierInfo__kicker,
  .atelierInfo__meta{
    display: none;
  }
}

/* -----------------------------
   60) EPILOGO (1 col hasta 1024)
-------------------------------- */
@media (min-width: 500px) and (max-width: 1023.98px){
  .epilogoGrid{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    margin-top: 46px;
  }

  .epilogoCol .lead{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;
  }

  .epilogoBack{ margin-top: 42px; }
}


/* =========================================================
   1024–1399px  (desktop base / laptop)
   ========================================================= */

/* -----------------------------
   00) GLOBAL / PAD
-------------------------------- */
@media (min-width: 1024px) and (max-width: 1399.98px){
  :root{ --pad: 26px; }
}

/* -----------------------------
   30) GALLERY INTRO 
-------------------------------- */
@media (min-width: 1024px) and (max-width: 1399.98px){
  .scene--galleryIntro{
    --maxContent: 1180px;
    --leadMax: 50ch;
    --padTop: 96px;
    --padBottom: 32px;
  }

  .scene--galleryIntro .scene__photo{
    background-position: 70% center;
  }
}

/* -----------------------------
   35) DOORS (ajuste fino paneles)
-------------------------------- */
@media (min-width: 1024px) and (max-width: 1399.98px){
  /* panel un poco más compacto */
  .scene--door{
    --panelW: min(520px, 82vw);
  }

  /* recorta offsets exagerados que hoy están hardcodeados por sala */
  #gallery-room-01{ --panelX: 86px; --panelY: 210px; }
  #gallery-room-02{ --panelX: 74px; --panelY: 220px; }
  #gallery-room-03{ --panelX: 86px; --panelY: 150px; }
}

/* -----------------------------
   40) ATELIER (laptop: mantiene 3 paneles, pero más compacto)
-------------------------------- */
@media (min-width: 1024px) and (max-width: 1399.98px){
  .scene--workshops{
    --panelLeftY: 26%;
    --panelLeftW: min(320px, 26vw);

    --atelier-center-top: 62%;

    --panelRightY: 60%;
    --panelRightW: min(340px, 28vw);
  }

  .atelierWheel{
    width: min(420px, 46vw);
    height: 270px;
  }

  .atelierInfo__desc{ font-size: 13.5px; }
}

/* -----------------------------
   60) EPILOGO (laptop)
-------------------------------- */
@media (min-width: 1024px) and (max-width: 1399.98px){
  .epilogoGrid{
    gap: clamp(22px, 3vw, 44px);
    margin-top: 70px;
  }
  .epilogoCol .lead{ max-width: 50ch; }
}