/* MONTAGUS — ESTILOS DEL PEDIDO
   ----------------------------------------------------------------------------
   Todo lo que solo aparece DESPUÉS de que el cliente toca algo: la capa oscura,
   las hojas de papel, el configurador, el carrito y el checkout.

   Se carga sin bloquear (media="print" y luego all en index.html), así la
   portada y la carta pintan con menos CSS. Llega mucho antes de que alguien
   alcance a tocar un producto.
   ========================================================================== */

/* CAPA */
.capa{
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6,6,6,.72);
  opacity: 0; transition: opacity var(--salida);
}
.capa[hidden]{ display: none; }
.capa.visible{ opacity: 1; }

/* PAPEL La superficie clara. Sube desde abajo y tapa la pared. */
.papel{
  position: fixed; z-index: 51;
  left: 0; right: 0; bottom: 0;
  max-height: 92vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--salida);
  color: var(--tinta);
}
.papel[hidden]{ display: none; }
.papel.abierto{ transform: translateY(0); }
.papel:focus{ outline: none; }

.papel__borde{
  height: 14px; flex: none;
  background: var(--papel-encerado);
  clip-path: polygon(0 100%,0 38%,2% 66%,5% 22%,8% 52%,11% 30%,14% 61%,18% 18%,
    21% 48%,25% 68%,28% 26%,32% 55%,35% 34%,39% 63%,43% 20%,46% 50%,50% 30%,
    54% 60%,58% 24%,61% 54%,65% 36%,69% 66%,72% 22%,76% 48%,80% 62%,84% 28%,
    87% 56%,91% 32%,94% 60%,97% 24%,100% 46%,100% 100%);
}

.papel__cuerpo{
  background-color: var(--papel-encerado);
  background-image: repeating-linear-gradient(
    -8deg, transparent 0 22px, rgba(160,140,100,.055) 22px 23px);
  display: flex; flex-direction: column;
  min-height: 0; flex: 1 1 auto;
  padding-bottom: env(safe-area-inset-bottom);
}

.papel__cab{
  display: flex; align-items: flex-start; gap: var(--e3);
  padding: var(--e4) var(--canal) var(--e3);
  border-bottom: 2px solid var(--tinta);
  flex: none;
}
.papel__titulo{
  margin: 0;
letter-spacing: -0.01em; line-height: .96;
  font-size: 30px;
}
.papel__desc{ margin: var(--e2) 0 0; font-size: 13px; line-height: 1.4; color: #5A5148; }

.cerrar{
  margin-left: auto; flex: none;
  width: 40px; height: 40px; line-height: 1;
  background: transparent; border: 2px solid var(--tinta);
  border-radius: var(--rad-chico);
  font-size: 24px; color: var(--tinta);
}
.cerrar:active{ transform: translateY(1px); }

.papel__scroll{
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--e4) var(--canal);
  flex: 1 1 auto; min-height: 0;
}

.papel__pie{
  flex: none;
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) var(--canal) var(--e4);
  border-top: 2px solid var(--tinta);
  background: var(--papel-sombra);
}
.papel__pie--col{ flex-direction: column; align-items: stretch; }

/* grupos de opciones */
.grupo{ margin: 0 0 var(--e6); border: 0; padding: 0; min-width: 0; }
.grupo__cab{
  display: flex; align-items: baseline; gap: var(--e2);
  border-bottom: 2px dotted var(--papel-linea);
  padding-bottom: var(--e1); margin-bottom: var(--e3);
}
.grupo__nombre{
  margin: 0;
letter-spacing: .01em; font-size: 17px;
}
.grupo__ayuda{
  margin-left: auto; text-align: right;
  font-family: var(--comanda); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: #6E6357;
}
.grupo__ayuda--obl{ color: var(--rojo-tinta); }

.opcion{
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--papel-linea);
  cursor: pointer;
}
.opcion:last-child{ border-bottom: 0; }
.opcion input{
  flex: none; width: 22px; height: 22px; margin: 0;
  accent-color: var(--rojo-montagus);
}
.opcion__texto{ min-width: 0; }
.opcion__nombre{ font-size: 15px; }
.opcion__nota{ display: block; font-size: 11px; color: #6E6357; }
.opcion__precio{
  margin-left: auto; flex: none;
  font-family: var(--comanda); font-size: 14px; font-variant-numeric: tabular-nums;
}
.opcion--bloqueada{ cursor: not-allowed; opacity: .38; }

.campo{ display: block; margin-bottom: var(--e4); }
.campo__eti{
  display: block; margin-bottom: var(--e1);
font-size: 15px; letter-spacing: .01em;
}
.campo__ayuda{
  display: block; font-family: var(--comanda); font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em; color: #6E6357;
  margin-bottom: var(--e2);
}
.campo input, .campo textarea, .campo select{
  width: 100%; font-family: var(--texto); font-size: 16px;
  padding: var(--e3); color: var(--tinta);
  background: #FBF7EF;
  border: 2px solid var(--tinta); border-radius: var(--rad-chico);
}
.campo textarea{ resize: vertical; min-height: 68px; }
.campo--error input, .campo--error textarea, .campo--error select{ border-color: var(--rojo-montagus); }
.campo__error{
  display: block; margin-top: var(--e1);
  color: var(--rojo-tinta); font-size: 13px; font-weight: 600;
}

/* Total / Pagas con / Cambio, en vivo bajo el campo de efectivo */
.cambio{
  margin: calc(var(--e4) * -1) 0 var(--e4);
  padding: var(--e3);
  background: var(--papel-sombra);
  border: 2px solid var(--tinta); border-radius: var(--rad-chico);
}
.cambio__fila{
  display: flex; align-items: baseline; gap: var(--e3);
  margin: 0; font-size: 14px;
}
.cambio__fila + .cambio__fila{ margin-top: var(--e1); }
.cambio__val{
  margin-left: auto;
  font-family: var(--comanda); font-variant-numeric: tabular-nums;
}
.cambio__bien{ color: var(--verde-abierta); font-weight: 700; }
.cambio__mal{ color: var(--rojo-tinta); font-weight: 700; }

/* stepper */
.stepper{
  display: flex; align-items: center; flex: none;
  border: 2px solid var(--tinta); border-radius: var(--rad-chico);
  background: #FBF7EF;
}
.stepper__b{
  width: 42px; height: 42px; background: none; border: 0;
  font-size: 21px; line-height: 1; color: var(--tinta);
}
.stepper__b:disabled{ opacity: .3; }
.stepper__n{
  min-width: 30px; text-align: center;
  font-family: var(--comanda); font-size: 16px; font-variant-numeric: tabular-nums;
}

/* sello */
.sello{
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4); min-height: 46px;
  background: var(--rojo-montagus); color: #fff;
  border: 2px solid var(--tinta); border-radius: var(--rad-chico);
  text-transform: uppercase; font-size: 17px; letter-spacing: .02em;
  text-decoration: none;
  transition: transform 140ms ease;
}
.sello:active{ transform: translateY(2px); }
.sello:disabled{ opacity: .45; }
.sello--ancho{ width: 100%; }
.sello--fantasma{
  background: transparent; color: var(--tinta);
  justify-content: center; gap: var(--e2);
}
.sello--amarillo{ background: var(--amarillo-cinta); color: #000; }

/* Los sellos del pie de sección viven sobre la pared, no sobre el papel */
.cat-pie .sello{ border-color: #000; }
.cat-pie .sello--fantasma{
  background: var(--gris-ladrillo); color: var(--amarillo-cinta);
  border-color: var(--amarillo-cinta);
}
.sello__precio{
  font-family: var(--comanda); font-size: 15px; font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* LÍNEAS CARRITO */
.linea{
  border-bottom: 2px dotted var(--papel-linea);
  padding-bottom: var(--e3); margin-bottom: var(--e4);
}
.linea:last-of-type{ border-bottom: 0; margin-bottom: 0; }

.linea__cab{ display: flex; align-items: baseline; gap: var(--e2); }
.linea__n{
  flex: none; font-family: var(--comanda); font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--rojo-tinta);
}
.linea__nombre{
font-size: 19px; line-height: 1.05;
  letter-spacing: -0.01em;
}
.linea__sub{
  margin-left: auto; flex: none;
  font-family: var(--comanda); font-size: 15px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.linea__mods{
  list-style: none; margin: var(--e2) 0 0; padding: 0 0 0 var(--e3);
  font-size: 13px; color: #5A5148; line-height: 1.5;
}
.linea__mods li::before{ content: "· "; color: var(--rojo-tinta); }
.linea__nota{
  margin: var(--e2) 0 0; padding-left: var(--e3);
  font-size: 13px; color: #5A5148; font-style: italic;
}
.linea__acciones{
  display: flex; align-items: center; gap: var(--e4);
  margin-top: var(--e3);
}
.stepper--chico .stepper__b{ width: 38px; height: 38px; font-size: 18px; }
.stepper--chico .stepper__n{ font-size: 14px; }

.enlace{
  background: none; border: 0;
  padding: var(--e2) var(--e1); min-height: 36px;
  color: var(--tinta); text-decoration: underline;
font-size: 14px; letter-spacing: .02em;
}
.enlace--rojo{ color: var(--rojo-tinta); margin-left: auto; }

/* estado vacío */
.vacio__titulo{
  margin: var(--e5) 0 0;
  text-transform: uppercase; font-size: 26px; line-height: 1; letter-spacing: -0.01em;
}
.vacio__texto{ margin: var(--e2) 0 var(--e4); color: #5A5148; font-size: 14px; }
.vacio__sugeridos{ display: grid; gap: var(--e2); }
.sugerido{
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; text-align: left;
  padding: var(--e3) var(--e4);
  background: #FBF7EF; color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: var(--rad-chico);
  transition: transform 140ms ease;
}
.sugerido:active{ transform: translateY(1px); }
.sugerido__nombre{
font-size: 17px;
}
.sugerido__precio{
  margin-left: auto; font-family: var(--comanda); font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* resumen */
.resumen{ width: 100%; }
.resumen__fila{
  display: flex; align-items: baseline; gap: var(--e3);
font-size: 18px;
}
.resumen__valor{
  margin-left: auto; font-family: var(--comanda); font-weight: 400;
  font-size: 20px; font-variant-numeric: tabular-nums;
}
.resumen__nota{
  margin: var(--e1) 0 var(--e3);
  font-family: var(--comanda); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: #6E6357;
}

/* checkout */
.paso-titulo{
  display: flex; align-items: center; gap: var(--e2);
  margin: var(--e5) 0 var(--e3);
  text-transform: uppercase; font-size: 19px; letter-spacing: .01em;
}
.paso-titulo:first-child{ margin-top: 0; }
.paso-titulo__n{
  flex: none; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rojo-montagus); color: #fff;
  border-radius: 7px 2px 7px 2px;
  font-family: var(--comanda); font-size: 12px;
}

.segmentos{ display: flex; gap: var(--e2); margin-bottom: var(--e4); }
.segmento{
  flex: 1 1 0; padding: var(--e3) var(--e2);
  background: #FBF7EF; color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: var(--rad-chico);
font-size: 15px; letter-spacing: .01em;
}
.segmento--activo{ background: var(--tinta); color: var(--papel-encerado); }

.elige-sedes{ display: grid; gap: var(--e2); margin-bottom: var(--e4); }
.elige-sede{
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; text-align: left;
  padding: var(--e3) var(--e4);
  background: #FBF7EF; color: var(--tinta);
  border: 2px solid var(--tinta); border-left-width: 5px;
  border-radius: var(--rad-chico);
}
.elige-sede--activa{ border-left-color: var(--rojo-montagus); background: var(--papel-sombra); }
/* igual que en la sección de sedes: no se atenúa, se dice con el texto */
.elige-sede[data-abierta="0"] .elige-sede__estado{ color: #925315; } /* 5.06:1 sobre papel */
.elige-sede__txt{ min-width: 0; }
.elige-sede__nombre{
  display: block;
font-size: 17px; line-height: 1.1;
}
.elige-sede__dir{ display: block; font-size: 12px; color: #6E6357; }
.elige-sede__estado{
  margin-left: auto; flex: none; text-align: right;
  font-family: var(--comanda); font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: #6E6357;
}
.elige-sede[data-abierta="1"] .elige-sede__estado{ color: var(--verde-abierta); }

/* enviado */
.enviado{ position: relative; text-align: center; padding: var(--e5) 0 var(--e4); }
.enviado__aspa{
  position: absolute; top: 50%; left: -6%;
  width: 112%; height: auto; transform: translateY(-50%);
  fill: var(--naranja-plancha); opacity: .3; pointer-events: none;
}
.enviado__eti, .enviado__codigo, .enviado__texto{ position: relative; }
.enviado__eti{
  margin: 0; font-family: var(--comanda); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: #6E6357;
}
.enviado__codigo{
  margin: var(--e2) 0 0;
  font-family: var(--comanda); font-size: clamp(34px, 11vw, 52px);
  letter-spacing: .02em; color: var(--tinta);
}
.enviado__texto{
  margin: var(--e4) auto 0; max-width: 34ch;
  font-size: 14px; line-height: 1.5; color: #5A5148;
}

.papel__pie--col .sello{ width: 100%; justify-content: center; }
.papel__pie--col > * + *{ margin-top: var(--e2); }