/* Pedido y Mi cuenta de la v4: el diseño original del sitio (Poppins, negro, blanco y el azul verdoso del logo),
   con el encabezado y el pie del sitio nuevo y sin degradados. Mantiene las formas redondeadas del sistema.
   El azul verdoso (#aabfb9) toma el lugar del dorado: es el único acento, también para lo premium.
   Se carga después de sitio.css y solo cambia lo visual. */
:root {
  --azul: #aabfb9;
  --azul-claro: #c9d7d3;
  --oro: var(--azul);
  --oro-suave: var(--azul);
  --claro: #f4f6f5;
  --salvia-fondo: #f4f6f5;
  --sombra: 0 1px 0 rgba(0, 0, 0, 0.04), 0 22px 44px -30px rgba(0, 0, 0, 0.35);
}
.contenedor { width: min(1240px, calc(100% - 2rem)); }

/* ---------- barra: la del sitio nuevo */
.barra { height: 68px; padding: 0 clamp(16px, 4vw, 56px); gap: 2rem; border-bottom: 1px solid #1f1f1f; }
.barra-logo img { height: 28px; width: auto; display: block; }
.mundos-barra { flex: 1; display: flex; justify-content: center; gap: 2.4rem; font: 500 0.875rem var(--fuente); }
.mundos-barra a { position: relative; color: #fff; opacity: 0.68; text-decoration: none; padding-block: 0.25rem; transition: opacity 0.3s; }
.mundos-barra a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1); }
.mundos-barra a:hover, .mundos-barra a[aria-current] { opacity: 1; }
.mundos-barra a:hover::after, .mundos-barra a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.redes { gap: 0; }
.redes a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; transition: background 0.3s; }
.redes a:hover { background: rgba(255, 255, 255, 0.12); }
.cuenta-barra button { border-color: rgba(255, 255, 255, 0.35); color: #fff; padding: 0.35rem 1rem; }
.cuenta-barra button:hover { background: #fff; color: #000; border-color: #fff; }
.cb-cuenta { border: 0 !important; padding: 0 !important; }
.cb-cuenta:hover { background: none !important; color: #fff !important; }
.avatar-s { background: var(--azul); color: #000; width: 2.1rem; height: 2.1rem; }
.cb-cuenta .cb-nombre { text-decoration: none; }

/* ---------- portada negra con el logo oficial */
.portada { text-align: left; padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(1.8rem, 3vw, 2.6rem); }
.portada-in { width: min(1240px, calc(100% - 2rem)); margin: 0 auto clamp(1.8rem, 3.5vw, 2.8rem); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.portada-logo { width: clamp(130px, 14vw, 190px); margin: 0; }
.portada h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; }
.portada-texto p { margin: 0.9rem 0 0; max-width: 42rem; color: #c9c9c9; }
.pasos { width: min(1240px, calc(100% - 2rem)); max-width: none; padding: 1.4rem 0 0; border-top: 1px solid #262626; }
.pasos li.actual button .ps-num { border-color: var(--azul); box-shadow: 0 0 0 5px rgba(170, 191, 185, 0.22); }
.pasos li button .ps-txt, .pasos .actual button .ps-txt, .pasos .hecho button .ps-txt { color: inherit; background: none; }
h1, h2, h3 { letter-spacing: -0.025em; }

/* ---------- secciones: gris claro con tarjetas blancas, sin degradados */
.sec.claro, .mc2 { background: var(--claro); }
.sec { padding-bottom: clamp(3rem, 6vw, 5rem); }
.tarjeta-acceso, .semana-col, .opciones-plato, .dia-res, .listo-final, .auth, .mc-card, .mc2-numeros, .mc2-bloque, .gracias { box-shadow: var(--sombra); }
.carta { background: #262626; }
.vitrina, .escenario { background: #111; }
.auth-lado { background: #000; }
.cinta { background: var(--azul); }
.barra-premium.activa { background: #1a1a1a; border-color: var(--azul); }
.mc2-entrega { background: #000; }
.mc2-mes { background: #000; border-color: var(--azul); }
.mc2-mes.activo { background: #fff; border-color: var(--azul); }
.mc2-mes.activo .mc2-eti { color: #3e564f; }
.mc2-linea li.actual i { box-shadow: 0 0 0 5px rgba(170, 191, 185, 0.22); }

/* ---------- lo que era dorado pasa al azul verdoso */
.btn-pagar:hover, .btn.servir:hover, .btn-oro:hover { background: var(--azul-claro); border-color: var(--azul-claro); }
.btn-pagar, .btn.servir, .btn-oro { color: #000; }
.pend-s { background: #eef3f1; color: #2c3e39; }
.mini-extra, .mc2-dia em { background: #e3ebe8; color: #3e564f; }
.chip-v.prem small { background: #e3ebe8; color: #3e564f; }
.chip-v.prem.activa small { background: var(--azul); color: #000; }
.bloque-op.cerrado { border-color: var(--azul); }
.plan-mes { background: #111; border-color: var(--azul); }
.plan-mes small { color: #c9d3d0; }
.nota-full { background: #eef3f1; color: #2c3e39; }
.calc-full { background: #fff; }
.calc-res > div { border-color: #dfe7e4; }
.n-sem.mes { border-color: var(--azul); }
.n-sem.mes.activa { background: #eef3f1; border-color: #3e564f; }
.sello-s.oro { background: #1f2b28; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(170, 191, 185, 0.55); } 70% { box-shadow: 0 0 0 16px rgba(170, 191, 185, 0); } 100% { box-shadow: 0 0 0 0 rgba(170, 191, 185, 0); } }
@keyframes subir-prem { 0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(170, 191, 185, 0.6); } 60% { transform: scale(1.01); box-shadow: 0 0 0 12px rgba(170, 191, 185, 0); } 100% { transform: none; } }

/* ---------- pie: el del sitio nuevo */
.pie { text-align: left; padding: 3.6rem clamp(16px, 4vw, 56px) 2rem; font-size: 0.875rem; color: #a6a6a6; }
.pie-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.pie img { width: 180px; margin-bottom: 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pie a { color: inherit; text-decoration: none; }
.pie a:hover { color: #fff; }
.pie-demo { max-width: 1240px; margin: 2.4rem auto 0; padding-top: 1.2rem; border-top: 1px solid #1f1f1f; color: #6b6b6b; font-size: 0.8125rem; }
.pie-demo a { text-decoration: underline; }
.wa-flotante { background: var(--azul); }
.wa-flotante svg { fill: #000; }

@media (max-width: 960px) {
  .barra { height: 60px; padding: 0 1rem; gap: 0.8rem; }
  .mundos-barra { display: none; }
  .barra-logo { margin-right: auto; }
  .barra-logo img { height: 22px; }
  .redes { display: flex; }
  .portada-in { grid-template-columns: 1fr; }
  .portada-logo { width: 120px; }
  .pie-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .mc2-semanas .mc-sem { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } }