/* ==========================================================================
   BRASA — la ficha de una hamburguesa.
   Una pagina por hamburguesa: arriba el despiece a pantalla completa y debajo
   los datos del plato. El despiece trae sus propios estilos de despiece.css.
   ========================================================================== */

/* En la ficha el despiece es la portada, asi que empieza pegado arriba y se
   estira un poco mas: aqui el visitante ha venido justo a verlo. */
#capas{height:400vh}
#capas .fijo{padding-top:104px}
#capas h2{font-size:clamp(38px,6vw,86px)}

/* ---------- los datos del plato ---------- */
#ficha{background:var(--crema);color:var(--marron);padding-top:70px}
.ficha-caja{max-width:var(--caja);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
#ficha h1{font-size:clamp(44px,6.4vw,92px);color:var(--vino);line-height:.92}
#ficha .precio{font-family:var(--display);font-weight:400;font-size:clamp(38px,5vw,64px);color:var(--naranja-txt);
  line-height:1;margin:10px 0 18px;display:block}
#ficha .entradilla{font-size:24px;line-height:1.4;margin-bottom:18px}
#ficha .detalle{font-size:21px;line-height:1.45;opacity:.9;font-style:italic;
  border-left:5px solid var(--naranja);padding-left:18px;margin-bottom:24px}
.acciones-ficha{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.acciones-ficha .anadir{font-size:21px;padding:13px 28px}

/* tarjeta lateral: capas, alérgenos y datos sueltos */
.lateral{background:#fff;border-radius:26px;padding:28px 30px;box-shadow:var(--sombra)}
.lateral h3{font-size:26px;color:var(--vino);margin-bottom:12px}
.capas-lista{list-style:none;margin-bottom:24px;counter-reset:capa}
.capas-lista li{display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px dashed rgba(102,44,0,.2);font-size:20px}
.capas-lista li:last-child{border-bottom:0}
.capas-lista li:before{counter-increment:capa;content:counter(capa);
  font-family:var(--display);font-weight:400;font-size:20px;color:var(--naranja);
  min-width:22px;text-align:right}
.datos-sueltos{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.datos-sueltos span{background:rgba(102,44,0,.08);border-radius:99px;padding:7px 15px;font-size:18px}
.alerg-ficha{font-size:19px;line-height:1.4}
.alerg-ficha b{color:var(--vino)}
.lateral .nota{font-size:17px;opacity:.75;margin-top:14px;line-height:1.35}

/* ---------- las otras hamburguesas ---------- */
#otras{background:var(--tinta)}
#otras h2{color:var(--limon);text-align:center;font-size:clamp(34px,4.6vw,64px);margin-bottom:14px}
#otras .sub{text-align:center;opacity:.9;font-size:21px;margin-bottom:40px}
.otras-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:var(--caja);margin:0 auto}
.otra{position:relative;display:block;text-decoration:none;border-radius:24px;
  overflow:hidden;background:var(--vino2);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.otra:hover{transform:translateY(-8px)}
.otra img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:.85;transition:.3s}
.otra:hover img{opacity:1}
.otra .txt{padding:18px 22px 22px}
.otra h3{font-size:26px;color:var(--limon)}
.otra p{font-size:19px;opacity:.9;margin-top:4px}
.otra .ver{display:inline-block;margin-top:10px;font-size:18px;color:var(--naranja);
  text-transform:uppercase;letter-spacing:.07em}
.otra.actual{opacity:.72;pointer-events:none}
.otra.actual:after{content:'Estás aquí';position:absolute;top:12px;right:12px;
  background:var(--limon);color:var(--marron);font-size:16px;padding:4px 12px;
  border-radius:99px;text-transform:uppercase;letter-spacing:.06em}

@media(max-width:980px){
  .ficha-caja{grid-template-columns:1fr;gap:32px}
  .otras-lista{grid-template-columns:1fr}
}
@media(max-width:760px){
  #capas{height:340vh}
  #capas .fijo{padding-top:86px}
}