/* Hero «El pase» · Microgreens®
   Dirección A de la guía: porcelana, verde bosque, Bodoni para titulares, DM Mono para datos.
   Todo va bajo .mgh para no chocar con el tema. */
.mgh{
  --porcelana:#F5F6F3; --plato:#FFFFFF; --bosque:#205426; --bosque-2:#173F1C; --tinta:#14231A;
  --salvia:#5F6E63; --linea:#DCE2DA; --amaranto:#8A2442; --papel:#FFFEF9;
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-ui:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  position:relative; color:var(--tinta); font-family:var(--f-ui);
  background:
    radial-gradient(1100px 760px at 72% 38%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    var(--porcelana);
  overflow:hidden;
}
.mgh *,.mgh *::before,.mgh *::after{box-sizing:border-box}
.mgh-in{
  max-width:1440px; margin:0 auto;
  padding-inline:clamp(16px,4vw,56px); padding-block:clamp(24px,3.4vw,48px) clamp(20px,2.6vw,36px);
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(12px,3vw,48px); align-items:center;
}

/* ——— Texto ——— */
.mgh-copy{display:flex; flex-direction:column; gap:22px; max-width:600px; position:relative; z-index:2}
.mgh-eyebrow{font:500 12px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--salvia); margin:0}
.mgh-headline{font:500 clamp(46px,6vw,92px)/.98 var(--f-display); letter-spacing:-.022em; margin:0; text-wrap:balance}
.mgh-headline em{font-style:italic; color:var(--bosque); position:relative; white-space:nowrap; display:inline-block}
.mgh-swash{position:absolute; left:-3%; bottom:-.16em; width:108%; height:.34em; color:var(--amaranto); pointer-events:none; overflow:visible;
  clip-path:inset(0 0 0 0)}
.mgh.is-ready .mgh-swash{animation:mgh-swash 1s cubic-bezier(.65,.05,.25,1) .15s both}
@keyframes mgh-swash{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.mgh-lede{font-size:clamp(16px,1.25vw,18.5px); line-height:1.6; color:#33443A; margin:0; max-width:46ch}

.mgh-doors{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:6px}
.mgh-door{position:relative; display:flex; flex-direction:column; gap:4px; padding:16px 18px 15px; border-radius:12px;
  background:rgba(255,255,255,.72); border:1px solid var(--linea); color:inherit; text-decoration:none;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease}
.mgh-door:hover{transform:translateY(-2px); border-color:var(--bosque); box-shadow:0 14px 28px -22px rgba(20,35,26,.5)}
.mgh-door b{font:500 23px/1.1 var(--f-display)}
.mgh-door span{font-size:14px; color:var(--salvia); line-height:1.45}
.mgh .mgh-door i{font-style:normal; font-weight:600; font-size:14px; color:var(--bosque); margin-top:6px; display:inline-flex; gap:6px}
.mgh-door i::after{content:"→"; transition:transform .25s ease}
.mgh-door:hover i::after{transform:translateX(4px)}
.mgh-door--pro{background:var(--bosque); border-color:var(--bosque); color:#fff}
.mgh-door--pro span{color:#CFE0D2}
.mgh .mgh-door--pro i{color:#fff}

/* ——— Escenario del plato ——— */
.mgh-stage{position:relative; width:100%; max-width:780px; justify-self:center; aspect-ratio:1/1.02; user-select:none; -webkit-user-select:none}
.mgh-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y}
.mgh-stage.is-pointing .mgh-canvas{cursor:none}

.mgh-controls{position:absolute; left:0; top:0; display:flex; gap:6px; z-index:3}
.mgh-btn{font:500 11px/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--salvia);
  background:rgba(255,255,255,.8); border:1px solid var(--linea); border-radius:999px; padding:9px 12px; cursor:pointer;
  transition:color .2s, border-color .2s}
.mgh-btn:hover{color:var(--bosque); border-color:var(--bosque)}
.mgh-btn:focus-visible,.mgh-chip:focus-visible,.mgh-door:focus-visible,.mgh-ticket-cta:focus-visible{outline:2px solid var(--bosque); outline-offset:3px}

/* Bandeja de ingredientes */
.mgh-tray{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; flex-direction:column; gap:8px}
.mgh-tray-label{font:500 11px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--salvia); display:flex; gap:8px; align-items:center}
.mgh-tray-label::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--amaranto)}
.mgh-chips{display:flex; flex-wrap:wrap; gap:8px; padding:2px 2px 6px}
.mgh-chips::-webkit-scrollbar{display:none}
.mgh-chip{flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:5px 13px 5px 5px; border-radius:999px; cursor:pointer;
  background:#fff; border:1px solid var(--linea); color:var(--tinta); font:500 13.5px/1.1 var(--f-ui);
  transition:border-color .2s, box-shadow .2s, transform .2s}
.mgh-chip:hover{transform:translateY(-1px)}
.mgh-chip img{width:34px; height:34px; object-fit:contain; border-radius:50%; background:var(--porcelana)}
.mgh-chip small{display:block; font:500 11px/1.2 var(--f-mono); color:var(--salvia); letter-spacing:.02em}
.mgh-chip[aria-pressed="true"]{border-color:var(--bosque); box-shadow:inset 0 0 0 1px var(--bosque)}

/* Comanda colgada del pase */
.mgh-rail{position:absolute; right:-1.5%; top:1%; width:min(34%,252px); z-index:2; pointer-events:none}
.mgh-rail::before{content:""; display:block; height:9px; border-radius:5px; margin:0 -14% 0 -6%;
  background:linear-gradient(180deg,#F4F6F7 0%,#B9C1C4 45%,#7E878B 100%); box-shadow:0 6px 12px -6px rgba(20,35,26,.45)}
.mgh-ticket{pointer-events:auto; position:relative; margin:-3px 8% 0 4%; padding:16px 16px 18px; background:var(--papel);
  transform:rotate(1.6deg); transform-origin:50% 0; font:400 11.5px/1.5 var(--f-mono); color:#2B332D;
  box-shadow:0 18px 30px -18px rgba(20,35,26,.45), 0 1px 0 rgba(20,35,26,.06);
  -webkit-mask:radial-gradient(6px at 50% 100%,#0000 98%,#000) 50% 100%/12px 100% repeat-x;
          mask:radial-gradient(6px at 50% 100%,#0000 98%,#000) 50% 100%/12px 100% repeat-x;
  transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.mgh-ticket.is-bump{transform:rotate(-.8deg)}
.mgh-ticket::before{content:""; position:absolute; left:50%; top:-6px; width:26px; height:12px; margin-left:-13px; border-radius:3px;
  background:linear-gradient(180deg,#E8ECEE,#9AA3A7)}
.mgh-ticket h3{font:500 11px/1.3 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; margin:0; display:flex; justify-content:space-between}
.mgh-ticket .sub{color:#7A847C; font-size:11px; margin:2px 0 10px; border-bottom:1px dashed #C9CFC6; padding-bottom:8px}
.mgh-ticket-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; min-height:18px}
.mgh-ticket-list li{display:flex; gap:6px; align-items:baseline; animation:mgh-print .35s steps(6,end) both}
.mgh-ticket-list li span:first-child{min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.mgh-ticket-list li i{flex:1; min-width:8px; border-bottom:1px dotted #AEB6AC; transform:translateY(-3px)}
.mgh-ticket-list li.empty{color:#8C958D; animation:none}
@keyframes mgh-print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.mgh-ticket-sum{display:flex; justify-content:space-between; gap:8px; white-space:nowrap; border-top:1px dashed #C9CFC6; margin-top:10px; padding-top:8px; font-weight:500; color:var(--tinta)}
.mgh-ticket-ship{font-size:10.5px; color:var(--amaranto); margin-top:4px; line-height:1.4}
.mgh-ticket-cta{margin-top:12px; width:100%; font:600 13px/1 var(--f-ui); background:var(--bosque); color:#fff; border:0; border-radius:6px; padding:11px 10px; cursor:pointer}
.mgh-ticket-cta:hover{background:var(--bosque-2)}
.mgh-ticket-note{font-size:10.5px; color:var(--salvia); margin-top:8px; line-height:1.4}

/* Etiqueta de ingrediente sobre el plato */
.mgh-tag{position:absolute; z-index:4; min-width:180px; max-width:230px; padding:12px 14px 12px; border-radius:10px; background:rgba(255,255,255,.96);
  border:1px solid var(--linea); box-shadow:0 18px 34px -20px rgba(20,35,26,.55); display:flex; flex-direction:column; gap:3px;
  transform:translate(14px,-50%); opacity:0; transition:opacity .18s ease; pointer-events:none}
.mgh-tag.is-on{opacity:1; pointer-events:auto}
.mgh-tag.is-left{transform:translate(calc(-100% - 14px),-50%)}
.mgh-tag b{font:500 19px/1.1 var(--f-display)}
.mgh-tag .n{font-size:13px; color:var(--salvia); line-height:1.4}
.mgh-tag .p{font:500 12px/1.2 var(--f-mono); letter-spacing:.04em; margin-top:4px}
.mgh-tag a{font-size:13px; font-weight:600; color:var(--bosque); text-decoration:none; margin-top:2px}
.mgh-tag a:hover{text-decoration:underline; text-underline-offset:3px}

.mgh-hint{position:absolute; left:0; bottom:88px; z-index:3; font:500 12px/1.35 var(--f-mono); color:#fff; background:var(--tinta);
  padding:9px 12px; border-radius:8px; max-width:260px; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; pointer-events:none}
.mgh-hint::after{content:""; position:absolute; left:22px; bottom:-5px; width:10px; height:10px; background:var(--tinta); transform:rotate(45deg)}
.mgh-hint.is-on{opacity:1; transform:none}

.mgh-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; padding:14px 20px; background:var(--bosque); color:#DDEBDF;
  font:500 12.5px/1.4 var(--f-mono); letter-spacing:.06em}
.mgh-strip span+span::before{content:"·"; margin-right:18px; color:#8FB596}

.mgh-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ——— Escritorio: el plato y la bandeja caben en la pantalla aunque sea baja (1840×830, 1440×800…) ———
   El escenario se limita también por la altura: alto visible − cabecera (125 px) − márgenes. */
@media (min-width:1081px){
  .mgh-stage{max-width:min(780px, calc((100svh - 205px) / 1.02))}
  .mgh-headline{font-size:clamp(44px, min(6vw, 9.2svh), 92px)}
}
@media (min-width:1081px) and (max-height:860px){
  .mgh-copy{gap:16px}
  .mgh-lede{font-size:16px}
}

/* ——— Pantallas medianas y móvil ——— */
@media (max-width:1080px){
  .mgh-in{grid-template-columns:minmax(0,1fr); gap:8px}
  .mgh-copy{max-width:680px}
  .mgh-stage{max-width:720px; aspect-ratio:1/1.05}
}
@media (max-width:640px){
  .mgh-doors{grid-template-columns:minmax(0,1fr)}
  .mgh-stage{aspect-ratio:auto; display:flex; flex-direction:column; gap:12px}
  .mgh-canvas{position:relative; inset:auto; aspect-ratio:1/1; height:auto}
  .mgh-tray{position:relative}
  .mgh-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .mgh-ticket-list,.mgh-ticket .sub{display:none}
  .mgh-ticket h3{margin-bottom:2px}
  .mgh-strip{flex-direction:column; align-items:center; gap:2px}
  .mgh-strip span+span::before{content:none}
  .mgh-rail{position:relative; right:auto; top:auto; width:100%; order:3}
  .mgh-rail::before{margin:0}
  .mgh-ticket{margin:-3px 4% 0; transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mgh *{transition:none!important; animation:none!important}
}