/* Metropole Beer Lab — RDW Novatech Web Studio
   Idea: un laboratorio donde la muestra eres tú: tu gusto entra, sale tu cerveza. */
:root{
  --noche:#101412;
  --vidrio:#18201d;
  --rejilla:rgba(243,236,217,.05);
  --espuma:#f3ecd9;
  --ambar:#e2952a;
  --ambar-cl:#f2b553;
  --lupulo:#a4c24a;
  --cobre:#b8542b;
  --gris:#9aa39b;
  --linea:rgba(243,236,217,.14);
  --cerveza:#d98a26;
  --tinte:#d98a26;
  --display:'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --texto:'Reddit Sans', system-ui, sans-serif;
  --mono:'Spline Sans Mono', ui-monospace, monospace;
  --ancho:1240px;
  --lado:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--noche);color:var(--espuma);font-family:var(--texto);font-size:17px;line-height:1.6;overflow-x:clip;
  background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);background-size:32px 32px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px;border-radius:4px}
p{text-wrap:pretty}
.saltar{position:absolute;left:-999px;top:8px;background:var(--ambar);color:var(--noche);padding:8px 14px;z-index:100;border-radius:6px}
.saltar:focus{left:12px}
.chico{font-size:.88rem;color:var(--gris)}
.centro{text-align:center}
.foto-ref{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin:.6rem 0 0}
.etiqueta{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--lupulo);margin:0 0 1rem}
.h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.03em;margin:0 0 1.2rem;text-wrap:balance}
.h2 em,.titular em{font-style:normal;color:var(--ambar)}

/* Botones: se llenan de abajo arriba como un vaso */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:.75rem 1.35rem;border-radius:999px;font-weight:700;
  text-decoration:none;line-height:1.1;isolation:isolate;overflow:hidden;transition:color .35s}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--espuma);transform:translateY(101%);transition:transform .45s cubic-bezier(.6,0,.2,1);
  border-radius:40% 40% 0 0/14px 14px 0 0}
@media (hover:hover) and (pointer:fine){.btn:hover::before{transform:translateY(0);border-radius:0}}
.btn-ambar{background:var(--ambar);color:var(--noche)}
.btn-linea{border:2px solid var(--espuma);color:var(--espuma)}
@media (hover:hover) and (pointer:fine){.btn-linea:hover{color:var(--noche)}}
.btn-chico{min-height:42px;padding:.5rem 1rem;font-size:.92rem}
.btn-ancho{width:100%;justify-content:center}

/* Barra */
.barra{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:.8rem;
  padding:calc(10px + env(safe-area-inset-top)) max(var(--lado), env(safe-area-inset-right)) 10px max(var(--lado), env(safe-area-inset-left));
  background:rgba(16,20,18,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.barra.con-borde{border-bottom-color:var(--linea)}
.marca{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;margin-right:auto}
.marca svg{width:26px;height:26px;fill:var(--ambar)}
.marca small{font-family:var(--mono);font-weight:400;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-left:.2rem}
.menu{display:none;gap:1.5rem;margin-right:1rem}
.menu a{text-decoration:none;font-size:.95rem;color:var(--gris);transition:color .2s}
.menu a:hover{color:var(--espuma)}
@media (min-width:900px){.menu{display:flex}}
.mas18{font-family:var(--mono);font-size:.74rem;border:1.5px solid var(--gris);color:var(--gris);border-radius:999px;padding:.2rem .5rem}

/* ---------- PORTADA ---------- */
.hero{max-width:var(--ancho);margin:0 auto;padding:clamp(24px,5vw,60px) var(--lado) clamp(40px,6vw,70px);display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:960px){.hero{grid-template-columns:1.15fr .85fr;min-height:calc(100svh - 64px)}}
.titular{font-family:var(--display);font-weight:800;font-size:clamp(3rem,10.5vw,7.4rem);line-height:.9;letter-spacing:-.045em;margin:0 0 1.4rem}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:inline-block}
.hero-bajada{max-width:34rem;font-size:1.08rem;margin:0 0 1.6rem;color:#dcd5c3}
.hero-botones{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.6rem}
.nota{display:inline-flex;align-items:center;gap:.9rem;text-decoration:none;padding:.6rem 1rem .6rem .7rem;border:1px solid var(--linea);border-radius:10px;background:var(--vidrio);line-height:1.25}
.nota b{font-family:var(--display);font-size:1.5rem}
.nota small{color:var(--gris)}
.probeta{width:16px;height:46px;border:2px solid var(--espuma);border-top:0;border-radius:0 0 8px 8px;position:relative;overflow:hidden}
.probeta span{position:absolute;left:0;right:0;bottom:0;height:calc(var(--n) * 100%);background:var(--ambar)}

.hero-copa{position:relative;justify-self:center;width:min(100%,380px)}
.copa{width:100%;height:auto;overflow:visible}
.vidrio{fill:none;stroke:var(--espuma);stroke-width:3;stroke-linecap:round}
.cerveza{fill:var(--cerveza);transition:fill .6s}
.espuma{fill:var(--espuma);transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.burbujas circle{fill:rgba(255,245,215,.75)}
@media (prefers-reduced-motion:no-preference){
  .burbujas circle{animation:burbuja 2.6s linear infinite}
  .burbujas circle:nth-child(2n){animation-duration:3.3s;animation-delay:-1.2s}
  .burbujas circle:nth-child(3n){animation-duration:2.1s;animation-delay:-.6s}
}
@keyframes burbuja{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(-110px);opacity:0}}
.rotulos{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.rotulos li{position:absolute;display:flex;align-items:center;gap:.4rem}
.rotulos li::before{content:"";width:clamp(24px,7vw,56px);height:1px;background:var(--gris)}
.r1{left:72%;top:12%}.r2{left:68%;top:38%}.r3{left:56%;top:84%}
.elementos{grid-column:1/-1;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:640px}
.elementos li{border:1.5px solid var(--linea);border-radius:6px;padding:.5rem .6rem .6rem;background:var(--vidrio);display:flex;flex-direction:column;line-height:1.1;transition:border-color .3s, transform .3s}
.elementos .num{font-family:var(--mono);font-size:.62rem;color:var(--gris)}
.elementos b{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4vw,2.3rem);color:var(--ambar);margin:.15rem 0}
.elementos li>span:last-child{font-size:.78rem}
.elementos li:nth-child(3) b{color:var(--lupulo)}
@media (hover:hover) and (pointer:fine){.elementos li:hover{border-color:var(--ambar);transform:translateY(-3px)}}

/* Entrada (solo bajo html.entra) */
.entra .ln>span{animation:sube .9s cubic-bezier(.2,.8,.2,1) both}
.entra .ln:nth-child(2)>span{animation-delay:.1s}
@keyframes sube{from{transform:translateY(108%)}}
.entra .copa .liquido{animation:llena 1.6s .2s cubic-bezier(.4,0,.2,1) both}
@keyframes llena{from{transform:translateY(160px)}}
.entra .elementos li{animation:voltea .7s cubic-bezier(.2,.8,.2,1) both}
.entra .elementos li:nth-child(2){animation-delay:.12s}.entra .elementos li:nth-child(3){animation-delay:.24s}.entra .elementos li:nth-child(4){animation-delay:.36s}
@keyframes voltea{from{transform:perspective(500px) rotateY(-80deg)}}
.entra .rotulos li{animation:rotulo .6s 1.2s both}
@keyframes rotulo{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ---------- LABORATORIO ---------- */
section{scroll-margin-top:72px}
.lab{position:relative;background:var(--espuma);color:var(--noche);margin-top:30px}
.espuma-borde{position:absolute;left:0;top:-58px;width:100%;height:60px;fill:var(--espuma);transform:translateY(var(--sube,0px))}
.lab-int{max-width:var(--ancho);margin:0 auto;padding:clamp(56px,9vw,120px) var(--lado);display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media (min-width:960px){.lab-int{grid-template-columns:.85fr 1.15fr}}
.lab .etiqueta{color:#5d7420}
.lab .h2 em{color:var(--cobre)}
.lab .chico{color:#5f5a4d}
.ficha{display:grid;gap:1.4rem;background:#fffaf0;border:1.5px solid rgba(16,20,18,.15);border-radius:14px;padding:clamp(16px,3vw,32px)}
@media (min-width:600px){.ficha{grid-template-columns:.8fr 1.2fr;align-items:center}}
.ficha-copa{position:relative;background:var(--noche);border-radius:10px;padding:16px 10px 4px}
.ficha-copa svg{width:100%;max-width:220px;margin:0 auto;display:block}
.lupulos{position:absolute;left:10px;top:10px;display:flex;gap:4px}
.lupulos i{width:16px;height:20px;background:var(--lupulo);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 4px,rgba(0,0,0,.55) 4px 5px);mask:repeating-linear-gradient(0deg,#000 0 4px,rgba(0,0,0,.55) 4px 5px);
  animation:brota .4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes brota{from{transform:scale(0)}}
.ficha .vidrio{stroke:var(--espuma)}
.perillas{display:flex;flex-direction:column;gap:1rem}
.perilla{display:flex;flex-direction:column;gap:.2rem}
.perilla-cab{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.perilla output{font-weight:500;color:var(--cobre)}
.perilla input{width:100%;height:32px;accent-color:var(--cobre)}
.resultado{margin:0;padding:.8rem 1rem;background:var(--espuma);border-left:3px solid var(--cobre);border-radius:0 6px 6px 0;font-size:.92rem}
.lab .btn-ambar::before{background:var(--noche)}
@media (hover:hover) and (pointer:fine){.lab .btn-ambar:hover{color:var(--espuma)}}

/* ---------- COLOR ---------- */
.color{background:linear-gradient(180deg,var(--espuma) 0,var(--espuma) 1px,var(--noche) 1px)}
.color-int{max-width:var(--ancho);margin:0 auto;padding:clamp(64px,10vw,130px) var(--lado)}
.tinte{color:var(--tinte)!important;transition:color .3s}
.escala{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:2.4rem}
.escala span{background:var(--c);height:clamp(90px,16vw,170px);border-radius:4px;display:flex;align-items:flex-end;padding:.5rem;font-family:var(--mono);font-size:clamp(.56rem,1.4vw,.75rem);
  text-transform:uppercase;letter-spacing:.06em;color:rgba(16,20,18,.8)}
.escala span:nth-child(n+4){color:rgba(243,236,217,.85)}
.marcador{position:absolute;top:-16px;left:var(--m,0%);width:2px;height:calc(100% + 32px);background:var(--espuma);transform:translateX(-1px)}
.marcador::before{content:"";position:absolute;top:-6px;left:-6px;width:14px;height:14px;border-radius:50%;background:var(--espuma)}

/* ---------- GRIFOS ---------- */
.grifos{max-width:var(--ancho);margin:0 auto;padding:clamp(56px,9vw,120px) var(--lado);border-top:1px solid var(--linea)}
.grifos-cab{max-width:44rem}
.palancas{--alto:clamp(110px,18vw,150px);list-style:none;padding:0;margin:2.6rem 0 1rem;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,2vw,24px);
  background:linear-gradient(#2c3531,#3a4440) 0 calc(var(--alto) + 14px)/100% 16px no-repeat}
.palanca{position:relative;width:100%;background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;padding:0 0 .4rem;min-height:calc(var(--alto) + 130px)}
.mango{display:block;width:clamp(26px,5vw,40px);height:var(--alto);background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 40%,rgba(255,255,255,.14) 60%,rgba(0,0,0,.2)),var(--c);
  border-radius:12px 12px 6px 6px;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.5,.5,1);position:relative;
  box-shadow:inset 0 -16px 0 #c9cfcc, inset 0 -18px 0 #7d8682}
.mango::after{content:"";position:absolute;left:50%;bottom:-14px;width:12px;height:14px;margin-left:-6px;background:#c9cfcc}
.mango::before{content:"";position:absolute;left:50%;bottom:-48px;width:10px;height:20px;margin-left:-5px;background:#c9cfcc;border-radius:2px 2px 4px 4px}
.gota{display:block;width:8px;height:12px;background:var(--c);border-radius:50% 50% 50% 50%/40% 40% 60% 60%;margin-top:52px;opacity:0;box-shadow:0 0 0 1px rgba(243,236,217,.3)}
.palanca.sirve .gota{animation:gota .9s ease-in both}
@keyframes gota{0%{opacity:0;transform:translateY(-6px)}20%{opacity:1}100%{opacity:0;transform:translateY(40px) scaleY(1.3)}}
.palanca.sirve .mango{transform:rotate(18deg)}
@media (hover:hover) and (pointer:fine){.palanca:hover .mango{transform:rotate(10deg)}}
.nombre{position:absolute;bottom:0;left:0;right:0;font-family:var(--mono);font-size:clamp(.56rem,1.3vw,.78rem);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.grifo-msg{text-align:center;font-size:1.05rem;min-height:3.2em;margin:1rem auto;max-width:34rem}
.grifo-msg a{color:var(--ambar);font-weight:700}

/* ---------- MUESTRAS ---------- */
.muestras{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado) clamp(56px,8vw,100px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.6vw,20px);align-items:end}
.tubo{margin:0}
.tubo img{width:100%;aspect-ratio:1/2.6;object-fit:cover;border-radius:999px 999px 26px 26px/90px 90px 26px 26px;border:2px solid var(--linea);
  clip-path:inset(var(--vacio,0%) 0 0 0 round 0 0 26px 26px);transition:clip-path 1.1s cubic-bezier(.5,0,.2,1)}
.tubo:nth-child(odd) img{aspect-ratio:1/2.2}
.tubo figcaption{font-family:var(--mono);font-size:clamp(.56rem,1.2vw,.7rem);letter-spacing:.05em;text-transform:uppercase;color:var(--gris);margin-top:.5rem}
.js .tubo:not(.lleno) img{--vacio:100%}
.muestras .foto-ref{grid-column:1/-1}
@media (max-width:640px){.muestras{grid-template-columns:repeat(3,1fr)}.tubo:nth-child(n+4){display:none}}

/* ---------- OBSERVACIONES ---------- */
.observa{max-width:var(--ancho);margin:0 auto;padding:clamp(56px,9vw,110px) var(--lado);display:grid;gap:clamp(28px,5vw,64px);border-top:1px solid var(--linea);align-items:center}
@media (min-width:900px){.observa{grid-template-columns:.7fr 1.3fr}.observa>.btn{grid-column:2;justify-self:start}}
.observa-nota{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.2rem}
.observa-nota .etiqueta{width:100%}
.cilindro{position:relative;width:70px;height:220px;border:3px solid var(--espuma);border-top:0;border-radius:0 0 12px 12px;overflow:hidden}
.nivel{position:absolute;left:0;right:0;bottom:0;height:96%;background:linear-gradient(var(--espuma) 0 10px,var(--ambar) 10px);transition:height 1.4s cubic-bezier(.4,0,.2,1)}
.js .observa:not(.visto) .nivel{height:0}
.marcas{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:4px 0}
.marcas i{font-style:normal;font-family:var(--mono);font-size:.6rem;border-top:1px solid rgba(16,20,18,.5);width:16px;padding-left:20px;line-height:1;color:var(--espuma);mix-blend-mode:difference}
.observa-cifra{margin:0;font-size:1rem;line-height:1.3}
.observa-cifra b{font-family:var(--display);font-weight:800;font-size:clamp(3.5rem,9vw,6rem);letter-spacing:-.04em;line-height:.9}
.observa-cifra span{color:var(--gris)}
.observaciones{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.observaciones li{display:grid;grid-template-columns:5.2rem 1fr;gap:1rem;padding-bottom:1rem;border-bottom:1px dashed var(--linea)}
.obs{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--lupulo);padding-top:.35rem}
.observaciones p{margin:0;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.35}

/* ---------- VISITA ---------- */
.visita{max-width:var(--ancho);margin:0 auto;padding:clamp(56px,9vw,110px) var(--lado);display:grid;gap:clamp(28px,5vw,64px);align-items:center;border-top:1px solid var(--linea)}
@media (min-width:900px){.visita{grid-template-columns:1fr 1fr}}
.direccion{font-size:1.15rem;margin:-.6rem 0 1rem;color:var(--gris)}
.visita-foto{margin:0}
.visita-foto img{border-radius:12px;width:100%;aspect-ratio:4/3;object-fit:cover}

.responsable{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:1.6rem var(--lado);text-align:center;font-size:.92rem;color:#d7d0bf}
.responsable p{margin:.3rem auto;max-width:44rem}
.responsable b{display:inline-block;border:1.5px solid var(--espuma);border-radius:999px;padding:0 .45rem;margin-right:.3rem;font-family:var(--mono);font-weight:500}

/* ---------- PIE ---------- */
.pie{padding:48px var(--lado) calc(96px + env(safe-area-inset-bottom));display:grid;gap:.6rem;justify-items:center;text-align:center}
.pie p{margin:0}
.pie-marca{font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em}
.pie-marca small{font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.burbuja{position:fixed;right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));z-index:50;width:60px;height:60px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 26px -8px rgba(0,0,0,.6);transition:transform .25s}
.burbuja svg{width:32px;height:32px;fill:currentColor}
.burbuja:hover{transform:scale(1.07)}

.js .aparece{opacity:0;transform:translateY(24px);transition:opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1)}
.js .aparece.visto{opacity:1;transform:none}

@media (max-width:599px){
  body{font-size:16px}
  .marca small{display:none}
  .hero-copa{width:min(72%,250px)}
  .rotulos{display:none}
  .observaciones li{grid-template-columns:1fr;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .aparece{opacity:1;transform:none}
  .js .tubo img{--vacio:0%!important}
}