/* Pantallas anchas (iPad y compu). Se enlaza con media="(min-width: 700px) and (min-height: 500px)":
   el teléfono no lo aplica. */
:root{--top-h:70px}
.top{padding-left:max(24px,calc((100vw - 1180px)/2));padding-right:max(24px,calc((100vw - 1180px)/2))}
.top-logo{height:52px}
main{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
.saludo{margin-left:10px;font-size:28px}

/* inicio: plancha grande y tarjetas en grilla */
#v-inicio.activa{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
#v-inicio>.saludo,#v-inicio>.plancha,#v-inicio>.cinta,#v-inicio>.pie-legal{grid-column:1/-1}
.plancha{margin:0}
.pl-cab{min-height:132px;padding-top:26px}
.pl-titulo{font-size:58px}
.pl-escena{height:400px}
.pl-burger{width:46%;max-width:420px}
.rot{font-size:14px;max-width:150px}
.sello{width:122px;height:122px}.se-in b{font-size:26px}
.pl-sello{right:calc(27% - 70px);bottom:18px}
.pl-pie{flex-direction:row;align-items:center;max-width:760px;margin:0 auto;width:100%}
.pl-pie .seg{flex:1}.pl-sumar{flex:1;width:auto}
.pl-nav{max-width:760px;margin:0 auto}
.cinta{margin:30px -24px 0}
.card-smash,.bloque{margin:28px 0 0;width:auto}
.card-smash{min-height:270px}
.newjohn{min-height:100%}
.nj-burger{width:360px}
.locales{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#v-inicio .bloque:has(.locales){grid-column:1/-1}

/* carta en dos y tres columnas */
.carta{display:block;padding:4px 0 0}
.ca-sec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.ca-sec h2{grid-column:1/-1}
.titulo-vista{font-size:60px;margin-left:6px}
.sub-vista{margin-left:8px}
.cats{padding-left:4px;padding-right:4px}

/* pedido: dos columnas */
#v-pedido #pedido{max-width:760px;margin:0 auto}

/* tour */
.pasaporte{margin:8px 0 0;min-height:290px}
.pa-cab h1{font-size:88px}
.pa-logo{width:120px}
#v-tour.activa{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
#v-tour>.pasaporte,#v-tour>.bloque:nth-of-type(2){grid-column:1/-1}
.ruta{grid-template-columns:repeat(4,1fr)}

/* barra como dock */
.barra{left:50%;right:auto;width:560px;transform:translateX(-50%)}

/* hojas como diálogo */
.hoja{align-items:center}
.hoja-in{border-radius:28px;max-height:88vh}
.ficha-in .fi-top{border-radius:28px 28px 0 0}
.fi-escena{height:330px}
.hoja .fi-pie{border-radius:0 0 28px 28px}

/* juego */
.sm-plancha{max-width:760px;width:100%;margin:0 auto}
.sm-pie,.sm-titulo{max-width:620px;width:100%;margin-left:auto;margin-right:auto}

/* historias: columna 9:16 centrada */
.historias .hi-pista,.historias .hi-barras{left:50%;right:auto;width:min(100vw,calc(100vh*9/16));transform:translateX(-50%)}
.historias .hi-barras{width:calc(min(100vw,calc(100vh*9/16)) - 20px)}

@media (min-width:700px) and (max-width:899px){
  #v-inicio.activa,#v-tour.activa{grid-template-columns:1fr}
  .pl-burger{width:56%}
  .pl-sello{right:calc(22% - 60px)}
  .ruta{grid-template-columns:repeat(3,1fr)}
}

/* propuesta «La bolsa»: naranja de borde a borde, bolsa centrada y la burger más grande */
#v-inicio>.bolsa{grid-column:1/-1}
.bolsa{margin:0 calc(50% - 50vw);--alto:clamp(620px, calc(100svh - var(--top-h) - 92px), 900px);--lado:max(24px, calc(50vw - 320px));
  --hundir:60px;--logo-y:26px;--bajo:34px;--pie:clamp(30px, calc((100svh - 900px) * .4), 90px);--st:64px}
.bo-pista{left:max(12px, calc(50% - 360px));right:max(12px, calc(50% - 360px))}
.bo-frente{padding-left:24px;padding-right:24px}
.bo-etiqueta{padding:13px 92px 15px 20px;border-radius:18px}
.bo-grupo{font-size:12px}
.bo-nombre{font-size:42px}
.bo-sello{width:124px;height:124px;margin-top:-66px;right:-50px}.bo-sello b{font-size:31px}.bo-sello small{font-size:11.5px}
.bo-tam{height:46px;margin-bottom:14px}.bo-tam button{font-size:18px}
.bo-sumar{height:62px;font-size:22px}
.bo-cuenta{width:80px;height:80px;top:-96px;right:-14px}.bo-cuenta b{font-size:32px}.bo-cuenta small{font-size:10px;max-width:62px}
.bo-saltar{justify-content:center;gap:16px;padding:10px 24px 12px;margin:10px 0 26px}
.bolsa+.cinta{margin-left:calc(50% - 50vw - 10px);margin-right:calc(50% - 50vw - 10px)}

/* compu y tablet acostada: la bolsa a la izquierda, el sticker, el sello y el botón a la derecha sobre el naranja */
@media (min-width:1000px){
  .bolsa{--alto:clamp(540px, calc(100svh - var(--top-h) - 104px), 820px);--bw:min(440px, 36vw);--lado:0px;--hundir:64px;--logo-y:24px;
    --col:min(440px, 36vw);--sep:min(90px, 6vw)}
  .bo-escena{flex:1 1 auto;width:var(--bw);margin:0 0 54px calc(50% - (var(--bw) + var(--col) + var(--sep)) / 2)}
  .bolsa+.cinta{margin-top:0}
  .bo-pista{left:calc(-1 * min(70px, 5vw));right:calc(-1 * min(70px, 5vw))}
  .bo-fondo{left:7px;right:7px}.bo-cuadrille{left:0;right:0}
  .bo-frente{height:calc(var(--alto) * .5);padding:0}
  .bo-controles{position:absolute;left:calc(100% + var(--sep));bottom:0;width:var(--col);max-width:none;margin:0}
  .bo-etiqueta{left:calc(100% + var(--sep));bottom:calc(46px + 14px + 62px + 46px);width:calc(var(--col) - 40px);transform:rotate(-4deg)}
  .bo-etiqueta:active{transform:rotate(-4deg) translateY(2px)}
  .bo-cuenta{top:-34px;right:-22px}
  .bo-saltar{position:absolute;top:auto;bottom:calc(54px + 168px + 150px + 22px);left:calc(50% - (var(--bw) + var(--col) + var(--sep)) / 2 + var(--bw) + var(--sep));width:var(--col);
    margin:0;padding:8px 6px;flex-wrap:wrap;justify-content:flex-start;gap:12px;overflow:visible;--st:min(54px, calc((var(--col) - 84px) / 7))}
  .bo-saltar::before{content:"Elegí otra";flex:0 0 100%;font:700 12px/1 var(--cuerpo);letter-spacing:.16em;text-transform:uppercase;color:#7A2E05;margin-bottom:4px}
}