/* Pedido semanal con la identidad de drchrisfit.com: Poppins, negro, blanco, salvia y dorado para lo premium. */
:root {
  --negro: #000;
  --carbon: #1c1c1c;
  --gris-tarjeta: #3a3a3a;
  --gris-borde: #4a4a4a;
  --texto: #333;
  --suave: #646464;
  --salvia: #aabfb9;
  --salvia-media: #6d8c83;
  --salvia-oscura: #3e564f;
  --salvia-fondo: #cddbd7;
  --claro: #f4f6f5;
  --oro: #eaba4e;
  --oro-suave: #d7c06d;
  --alerta: #c0412f;
  --radio: 28px;
  --fuente: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 300 1rem/1.6 var(--fuente); color: var(--texto); background: #fff; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; margin: 0; }
p { margin: 0 0 0.6rem; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 1rem; top: 1rem; z-index: 99; background: #fff; padding: 0.5rem 1rem; border-radius: 40px; }
.contenedor { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }

/* ---------- barra y portada, como el sitio */
.barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.5rem; padding: 0.9rem 2rem; background: var(--negro); }
.menu-icono { width: 26px; height: 20px; background: none; border: 0; padding: 0; display: grid; gap: 5px; cursor: pointer; }
.menu-icono span { display: block; height: 2.5px; background: #fff; border-radius: 2px; }
.pildoras { flex: 1; display: flex; justify-content: center; gap: 2.5rem; }
.pildoras a { min-width: 10rem; text-align: center; padding: 0.42rem 1.4rem; border-radius: 45px; font-size: 0.8125rem; font-weight: 500; text-decoration: none; color: #fff; }
.pildoras .p1 { background: var(--salvia); color: #1c2a26; }
.pildoras .p2 { background: var(--salvia-media); }
.pildoras .p3 { background: var(--salvia-oscura); box-shadow: inset 0 0 0 1.5px #fff; }
.redes { display: flex; gap: 0.9rem; }
.redes svg, .wa-flotante svg { width: 18px; height: 18px; fill: #fff; display: block; }
.portada { background: var(--negro); color: #fff; padding: 2.5rem 1rem 2rem; text-align: center; }
.portada-logo { width: 220px; height: auto; display: block; margin: 0 auto 1.25rem; }
.portada h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.portada-texto p { max-width: 46rem; margin: 0.9rem auto 1.75rem; font-weight: 300; color: #d6dedb; }
.pasos { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; counter-reset: paso; }
.pasos button { display: inline-flex; align-items: center; gap: 0.55rem; border: 1.5px solid #555; background: transparent; color: #c9d3d0; border-radius: 45px; padding: 0.4rem 1.1rem 0.4rem 0.45rem; cursor: pointer; font-size: 0.875rem; }
.pasos button span { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: #2b2b2b; font-weight: 600; }
.pasos .hecho button { border-color: var(--salvia-media); color: #fff; }
.pasos .hecho button span { background: var(--salvia-media); }
.pasos .actual button { background: #fff; color: #111; border-color: #fff; font-weight: 600; }
.pasos .actual button span { background: var(--salvia-oscura); color: #fff; }
.pasos button:disabled { opacity: 0.45; cursor: default; }

/* ---------- secciones */
.sec { padding: 3rem 0; }
.sec.claro { background: var(--salvia-fondo); }
.sec.blanco { background: #fff; }
.sec.oscuro { background: var(--negro); color: #fff; }
.titulo-sec { font-size: clamp(1.7rem, 3.5vw, 2.4rem); color: var(--salvia-oscura); margin-bottom: 1.25rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1.5px solid var(--salvia-oscura); background: var(--salvia-oscura); color: #fff; border-radius: 45px; padding: 0.7rem 1.6rem; font-weight: 500; font-size: 0.9375rem; cursor: pointer; text-decoration: none; transition: background 0.2s, color 0.2s; }
.btn:hover { background: #2b3f39; }
.btn.grande { padding: 0.85rem 2rem; font-size: 1rem; }
.btn.claro { background: #fff; color: #111; border-color: #fff; }
.btn.claro:hover { background: transparent; color: #fff; }
.btn.sec-btn { background: transparent; color: var(--salvia-oscura); }
.btn.sec-btn:hover { background: rgba(62, 86, 79, 0.08); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.ancho { width: 100%; }
.enlace-s { background: none; border: 0; padding: 0; color: var(--salvia-oscura); text-decoration: underline; cursor: pointer; font-weight: 500; margin-left: 0.5rem; }
.acciones-s { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.nota-demo { display: block; font-size: 0.8125rem; color: var(--suave); font-weight: 400; margin: 0.25rem 0 0.4rem; }

/* ---------- formularios */
.campo-s { display: block; font-weight: 500; font-size: 0.9375rem; color: var(--salvia-oscura); margin-bottom: 1rem; border: 0; padding: 0; min-width: 0; }
.campo-s legend { padding: 0; margin-bottom: 0.4rem; }
.campo-s input, .campo-s select, .campo-s textarea { display: block; width: 100%; margin-top: 0.35rem; font: 400 0.9375rem var(--fuente); color: var(--texto); background: #eef3f1; border: 1.5px solid transparent; border-radius: 40px; padding: 0.7rem 1.1rem; }
.campo-s textarea { border-radius: 22px; resize: vertical; }
.campo-s input:focus, .campo-s select:focus, .campo-s textarea:focus { border-color: var(--salvia-media); outline: none; background: #fff; }
.rejilla-s { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1.25rem; }
.chips-s { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-s { position: relative; display: inline-block; }
.chip-s input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.chip-s span { display: inline-block; padding: 0.4rem 1rem; border-radius: 40px; border: 1.5px solid var(--salvia); font-weight: 400; color: var(--texto); cursor: pointer; }
.chip-s input:checked + span { background: var(--salvia-oscura); border-color: var(--salvia-oscura); color: #fff; }
.chip-s input:focus-visible + span { outline: 3px solid var(--oro); outline-offset: 2px; }
.errores { background: #fbe8e5; border-radius: 20px; padding: 0.9rem 1.25rem; margin-bottom: 1.25rem; color: #7a2216; }
.errores ul { margin: 0.2rem 0 0; padding-left: 1.2rem; }

/* ---------- paso 1 */
.acceso { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
.tarjeta-acceso { background: #fff; border-radius: var(--radio); padding: 2rem; }
.tarjeta-acceso h2 { font-size: 1.6rem; color: var(--salvia-oscura); margin-bottom: 0.6rem; }
.tarjeta-acceso.oscura { background: var(--gris-tarjeta); color: #fff; }
.tarjeta-acceso.oscura h2 { color: var(--salvia); }
.planes-elegir { border: 0; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.planes-elegir legend { font-weight: 600; font-size: 1.15rem; color: var(--salvia-oscura); margin-bottom: 0.75rem; }
.plan-op { position: relative; display: grid; gap: 0.15rem; background: var(--gris-tarjeta); color: #fff; border-radius: var(--radio); padding: 1.25rem 1.25rem 1.1rem; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s, border-color 0.2s; }
.plan-op input { position: absolute; opacity: 0; }
.plan-op img { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; margin-bottom: 0.4rem; }
.plan-op .plan-nombre { font-size: 1.35rem; font-weight: 600; color: var(--salvia); line-height: 1.15; }
.plan-op.premium { background: #000; border-color: var(--oro-suave); }
.plan-op.premium .plan-nombre { color: var(--oro); }
.plan-op .plan-precio { font-weight: 600; margin-top: 0.4rem; }
.plan-op .plan-precio small, .plan-op .plan-kcal, .plan-op .plan-costo { font-size: 0.8125rem; color: #c9d3d0; font-weight: 300; }
.plan-op:has(input:checked) { border-color: #fff; transform: translateY(-4px); box-shadow: 0 14px 24px rgba(0, 0, 0, 0.25); }
.plan-op:has(input:focus-visible) { outline: 3px solid var(--oro); outline-offset: 3px; }

/* ---------- paso 2 */
.semana-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 2rem; align-items: start; }
.plan-card { position: sticky; top: 5rem; background: var(--salvia-oscura); color: #fff; border-radius: var(--radio); padding: 1.75rem; text-align: left; }
.plan-card.premium { background: #000; border: 2px solid var(--oro-suave); }
.plan-card img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; display: block; margin: -0.25rem auto 1rem; background: #fff; }
.plan-de { font-size: 0.875rem; color: #d6e0dc; margin: 0; }
.plan-card h3 { font-size: 1.7rem; margin-bottom: 0.75rem; }
.plan-card.premium h3 { color: var(--oro); }
.lista-check { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.9375rem; }
.lista-check li { padding-left: 1.5rem; position: relative; margin-bottom: 0.35rem; }
.lista-check li::before { content: ''; position: absolute; left: 0.2rem; top: 0.45rem; width: 0.55rem; height: 0.3rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.alergias-de { font-size: 0.875rem; }
.tag-alergia { display: inline-block; background: #fff; color: #7a2216; border-radius: 30px; padding: 0.05rem 0.6rem; font-size: 0.75rem; font-weight: 600; margin: 0.15rem 0.2rem 0 0; }
.revision { font-size: 0.8125rem; border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 0.7rem; margin: 0; }
.revision.pendiente { color: var(--oro); }
.semana-col { background: #fff; border-radius: var(--radio); padding: 2rem; }
.semana-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.semana-cab h2 { font-size: clamp(1.4rem, 3vw, 2rem); color: var(--salvia-oscura); }
.cierre { color: var(--suave); font-size: 0.9375rem; margin-top: 0.3rem; }
.semana-nav { display: flex; gap: 0.4rem; }
.semana-nav button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--salvia); background: #fff; font-size: 1.3rem; cursor: pointer; }
.sub { font-size: 1.1rem; margin: 1.75rem 0 0.75rem; color: var(--salvia-oscura); }
.dias-s { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.dia-s { background: var(--claro); border-radius: 20px; padding: 0.7rem 0.5rem; text-align: center; transition: background 0.2s; }
.dia-s.con { background: #e3ebe8; }
.dia-s p { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.4rem; }
.dia-s small { display: block; font-weight: 300; color: var(--suave); font-size: 0.75rem; }
.tiempo-s { display: block; width: 100%; margin-top: 0.35rem; border: 1.5px solid var(--salvia); background: #fff; border-radius: 30px; padding: 0.35rem 0.2rem; font-size: 0.8125rem; cursor: pointer; }
.tiempo-s[aria-pressed='true'] { background: var(--salvia-oscura); border-color: var(--salvia-oscura); color: #fff; font-weight: 500; }
.resumen-dias { margin-top: 0.8rem; color: var(--suave); }
.envases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.envase-op { display: grid; justify-items: center; gap: 0.15rem; background: var(--claro); border: 2px solid transparent; border-radius: 22px; padding: 0.75rem; cursor: pointer; }
.envase-op svg { width: 100%; height: auto; }
.envase-op span { font-weight: 600; }
.envase-op small { color: var(--suave); font-size: 0.75rem; text-align: center; }
.envase-op.activa { border-color: var(--salvia-oscura); background: #e3ebe8; }

/* ---------- paso 3: carrusel */
.armador-cab { padding-top: 2rem; padding-bottom: 1rem; overflow: hidden; }
.tabs-platos { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: thin; }
.tab-plato { flex: none; display: grid; justify-items: start; border: 1.5px solid #444; background: #111; color: #ddd; border-radius: 18px; padding: 0.35rem 0.9rem; cursor: pointer; font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
.tab-plato small { font-weight: 300; font-size: 0.75rem; color: #9aa7a3; }
.tab-plato.lista { border-color: var(--salvia-media); }
.tab-plato.lista small { color: var(--salvia); }
.tab-plato.activa { background: #fff; color: #111; border-color: #fff; }
.tab-plato.activa small { color: var(--salvia-oscura); }
.titulo-plato { font-size: clamp(1.5rem, 3.5vw, 2.4rem); margin-top: 1.25rem; }
.sub-plato { color: #b9c5c1; margin: 0.4rem 0 0; max-width: 60rem; }
.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pild { border: 1.5px solid var(--salvia); background: transparent; border-radius: 40px; padding: 0.35rem 1rem; cursor: pointer; font-size: 0.875rem; }
.oscuro .pild { color: #e6ecea; border-color: #5a6b66; }
.pild.activa { background: var(--salvia-oscura); border-color: var(--salvia-oscura); color: #fff; }
.oscuro .pild.activa { background: var(--salvia); border-color: var(--salvia); color: #111; font-weight: 500; }
.carrusel { position: relative; height: 330px; margin-top: 0.75rem; overflow: hidden; }
.cartas { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; outline: none; touch-action: pan-y; }
.cartas:focus-visible { outline: 3px solid var(--oro); outline-offset: -3px; border-radius: 30px; }
.carta { position: absolute; left: 50%; top: 16px; width: 196px; background: linear-gradient(180deg, #3d3d3d, #2b2b2b); border: 1.5px solid var(--gris-borde); border-radius: 26px; padding: 0.9rem 1rem 1rem; text-align: center; cursor: pointer; user-select: none;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s, border-color 0.3s, box-shadow 0.3s; will-change: transform; }
.carta.centro { border-color: var(--salvia); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(170, 191, 185, 0.4); }
.carta.elegida { border-color: var(--oro); }
.carta-img { height: 120px; display: grid; place-items: center; }
.carta-img svg { width: 100%; height: 100%; transition: transform 0.5s; }
.carta.centro .carta-img svg { animation: flotar 3.2s ease-in-out infinite; }
.carta h4 { font-size: 1.1rem; color: #fff; margin-top: 0.3rem; }
.carta-origen { font-size: 0.75rem; color: var(--salvia); margin: 0.1rem 0 0.35rem; min-height: 1.1em; }
.carta-datos { font-size: 0.8125rem; color: #cfd8d5; margin: 0 0 0.5rem; }
.carta-datos b { color: #fff; font-weight: 600; }
.sello-s { display: inline-block; font-size: 0.75rem; border-radius: 30px; padding: 0.15rem 0.7rem; background: #233430; color: var(--salvia); }
.sello-s.oro { background: #3a2f12; color: var(--oro); }
.carta.bloqueada { filter: grayscale(1); opacity: 0.6; cursor: not-allowed; }
.bloqueo { font-size: 0.75rem; color: #f0a39a; margin: 0.4rem 0 0; }
.en-plato { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--oro); color: #111; font-size: 0.75rem; font-weight: 600; border-radius: 30px; padding: 0.1rem 0.7rem; white-space: nowrap; }
.flecha { position: absolute; top: 128px; z-index: 40; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid #666; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.6rem; cursor: pointer; }
.flecha:hover { background: var(--salvia-oscura); }
.flecha.izq { left: 0; }
.flecha.der { right: 0; }
.carrusel-pie { min-height: 3.4rem; display: flex; justify-content: center; align-items: center; text-align: center; }
.btn.servir { background: var(--oro); border-color: var(--oro); color: #111; font-weight: 600; padding: 0.8rem 2.2rem; box-shadow: 0 0 0 0 rgba(234, 186, 78, 0.6); animation: latido 2.4s ease-out infinite; }
.btn.servir:hover { background: #f3c96b; }
.servida { color: var(--oro); font-weight: 500; }
.bloqueo-pie { color: #f0a39a; max-width: 40rem; }
.volando { position: fixed; z-index: 60; pointer-events: none; }

/* ---------- paso 3: escenario y opciones */
.sec.armador { background: var(--claro); padding-top: 2rem; }
.columna-der { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-width: 0; }
.columna-der > * { min-width: 0; }
.vitrina { background: radial-gradient(130% 100% at 50% 0%, #2a2a2a 0%, #0b0b0b 75%); color: #fff; border-radius: var(--radio); padding: 1.5rem 1.25rem 1rem; overflow: hidden; }
.vitrina h3 { font-size: 1.35rem; color: #fff; }
.sub-vitrina { color: #b9c5c1; font-size: 0.875rem; margin: 0.3rem 0 0.8rem; }
.armador-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 2rem; align-items: start; }
.escenario { position: sticky; top: 5rem; background: radial-gradient(120% 90% at 50% 20%, #2f2f2f 0%, #111 70%); color: #fff; border-radius: var(--radio); padding: 1.5rem 1.5rem 1.25rem; }
.escenario-plato svg { width: 100%; height: auto; display: block; }
.detalles-prep { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 1rem; }
.detalles-prep span { font-size: 0.75rem; border: 1px solid #555; border-radius: 30px; padding: 0.1rem 0.6rem; color: #d7dfdc; }
.nutri-s { display: grid; grid-template-columns: 128px 1fr; gap: 0.5rem 1.25rem; align-items: center; }
.anillo { position: relative; width: 128px; height: 128px; }
.anillo svg { width: 128px; height: 128px; }
.anillo-valor { transition: stroke-dasharray 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.anillo p { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; margin: 0; line-height: 1; }
.anillo b { font-size: 2rem; font-weight: 600; }
.anillo span { font-size: 0.8125rem; color: #b9c5c1; }
.macro p { display: flex; justify-content: space-between; font-size: 0.8125rem; margin: 0 0 0.2rem; color: #cfd8d5; }
.macro p b { color: #fff; font-weight: 600; }
.macro { margin-bottom: 0.55rem; }
.macro-pista { position: relative; height: 8px; border-radius: 6px; background: #2c2c2c; overflow: hidden; }
.macro-rango { position: absolute; top: 0; bottom: 0; background: rgba(170, 191, 185, 0.28); }
.macro-valor { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.meta-txt { grid-column: 1 / -1; font-size: 0.8125rem; color: #b9c5c1; margin: 0; }
.precio-s { margin-top: 1rem; border-top: 1px solid #3a3a3a; padding-top: 0.9rem; }
.precio-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.precio-total b { font-size: 1.6rem; font-weight: 600; color: var(--oro); }
.precio-nota { font-size: 0.8125rem; color: #b9c5c1; margin: 0.2rem 0 0; }
.opciones-plato { background: #fff; border-radius: var(--radio); padding: 1.75rem; }
.bloque-op { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid #e5ebe9; }
.bloque-op h3 { font-size: 1.15rem; color: var(--salvia-oscura); margin-bottom: 0.6rem; display: flex; align-items: baseline; gap: 0.6rem; }
.ayuda { color: var(--suave); font-size: 0.875rem; }
.contador { font-size: 0.8125rem; font-weight: 500; color: var(--alerta); }
.contador.ok { color: var(--suave); }
.fila-opciones { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; align-items: start; margin: 0.6rem 0; }
.fila-opciones > p { font-size: 0.875rem; font-weight: 500; margin: 0.35rem 0 0; color: var(--texto); }
.pildoras-op { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.terminos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.termino-op { display: grid; justify-items: center; gap: 0.2rem; border: 2px solid transparent; background: var(--claro); border-radius: 18px; padding: 0.5rem; cursor: pointer; font-size: 0.8125rem; }
.termino-op svg { width: 100%; max-width: 110px; height: auto; transition: transform 0.3s; }
.termino-op.activa { border-color: var(--salvia-oscura); background: #e3ebe8; font-weight: 600; }
.termino-op:hover svg { transform: scale(1.06); }
.harinas-s { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.6rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.harina-op { flex: none; width: 104px; display: grid; justify-items: center; gap: 0.1rem; border: 2px solid transparent; background: var(--claro); border-radius: 18px; padding: 0.4rem 0.3rem 0.5rem; cursor: pointer; scroll-snap-align: start; font-size: 0.8125rem; line-height: 1.25; text-align: center; }
.harina-op svg { width: 88px; height: auto; }
.harina-op small { color: var(--suave); font-size: 0.6875rem; }
.harina-op.activa { border-color: var(--salvia-oscura); background: #e3ebe8; font-weight: 600; }
.harina-op.no, .chip-v.no, .grasa-op:disabled { opacity: 0.45; }
.chips-v { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-v { display: inline-flex; align-items: center; gap: 0.4rem; border: 1.5px solid #d3ddd9; background: #fff; border-radius: 40px; padding: 0.3rem 0.85rem 0.3rem 0.45rem; cursor: pointer; font-size: 0.875rem; }
.chip-v.activa { background: var(--salvia-oscura); border-color: var(--salvia-oscura); color: #fff; }
.chip-v:disabled { cursor: not-allowed; }
.chip-v.no:not(.activa) { text-decoration: line-through; }
.color-veg { width: 0.95rem; height: 0.95rem; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.12); }
.grasas-s { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.grasa-op { display: grid; justify-items: center; gap: 0.2rem; border: 2px solid transparent; background: var(--claro); border-radius: 18px; padding: 0.7rem 0.4rem; cursor: pointer; font-size: 0.875rem; text-align: center; }
.grasa-op i { width: 2.2rem; height: 2.2rem; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1.5px #d3ddd9; }
.grasa-op small { color: var(--suave); font-size: 0.75rem; }
.grasa-op.activa { border-color: var(--salvia-oscura); background: #e3ebe8; font-weight: 600; }
.pend-s { background: #fbf3dc; border-radius: 18px; padding: 0.8rem 1.1rem; font-size: 0.875rem; color: #6b4c05; }
.pend-s p { font-weight: 600; margin: 0 0 0.2rem; }
.pend-s ul { margin: 0; padding-left: 1.1rem; }
.listo-s { color: var(--salvia-oscura); font-weight: 600; }

/* ---------- paso 4 */
.confirmar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; align-items: start; }
.semana-resumen { display: grid; gap: 1rem; }
.dia-res { background: #fff; border-radius: 22px; padding: 1rem 1.1rem; }
.dia-res-t { font-weight: 600; color: var(--salvia-oscura); margin-bottom: 0.5rem; }
.mini-plato { display: grid; grid-template-columns: 116px 1fr; grid-template-rows: auto auto auto auto; column-gap: 1rem; text-align: left; width: 100%; border: 0; background: var(--claro); border-radius: 16px; padding: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; font-size: 0.875rem; }
.mini-plato:hover { background: #e3ebe8; }
.mini-img { grid-row: 1 / 5; }
.mini-img svg { width: 116px; height: auto; display: block; }
.mini-t { color: var(--suave); font-size: 0.75rem; }
.mini-plato b { font-weight: 600; }
.mini-plato span:not(.mini-img) { color: var(--suave); }
.caja-total { position: sticky; top: 5rem; background: var(--gris-tarjeta); color: #fff; border-radius: var(--radio); padding: 1.75rem; }
.caja-total h3 { color: var(--salvia); font-size: 1.4rem; margin-bottom: 0.75rem; }
.caja-total dl { margin: 0 0 0.9rem; }
.caja-total dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid #4d4d4d; font-size: 0.9375rem; }
.caja-total dd { margin: 0; font-weight: 500; white-space: nowrap; }
.caja-total .total { border-bottom: 0; font-weight: 600; font-size: 1.1rem; }
.caja-total .total dd { color: var(--oro); }
.nota-total { font-size: 0.8125rem; color: #cfd8d5; }
.acepto { display: block; font-size: 0.875rem; margin: 1rem 0; }
.acepto input { margin-right: 0.4rem; accent-color: var(--salvia); }
.caja-total .btn.sec-btn { color: #fff; border-color: #777; margin-top: 0.5rem; }
.caja-total .pend-s { margin-bottom: 0.5rem; }
.listo-final { background: #fff; border-radius: var(--radio); padding: 2.5rem; max-width: 48rem; }
.listo-final h2 { font-size: 2rem; color: var(--salvia-oscura); margin-bottom: 0.75rem; }

/* ---------- sellos, pie, avisos */
.calidad { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; padding: 2.5rem 1rem; background: #fff; }
.calidad figure { margin: 0; width: 7rem; text-align: center; }
.calidad img { width: 6.5rem; height: auto; }
.calidad img.invertir { filter: invert(1); }
.calidad figcaption { font-size: 0.75rem; font-weight: 600; line-height: 1.25; margin-top: 0.3rem; }
.pie { background: var(--negro); color: #c9d3d0; text-align: center; padding: 2.5rem 1rem 3rem; font-size: 0.875rem; }
.pie img { width: 220px; height: auto; margin-bottom: 0.75rem; }
.pie-demo { color: #8a9692; }
.pie a { color: var(--salvia); }
.wa-flotante { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 40; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
.wa-flotante svg { width: 28px; height: 28px; }
.aviso-flotante { visibility: hidden; position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 140%); background: #111; color: #fff; border: 1px solid var(--salvia-media); border-radius: 40px; padding: 0.6rem 1.4rem; z-index: 70; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); font-size: 0.9375rem; }
.aviso-flotante.ver { visibility: visible; transform: translate(-50%, 0); }

/* ---------- animaciones del plato */
.envase-svg .hueco-slot text { font: 500 14px var(--fuente); fill: #9a7d52; }
.envase-svg .texto-slot { font: 500 14px var(--fuente); fill: #9a7d52; }
.vapor path { opacity: 0; transform-box: fill-box; animation: vapor 2.8s ease-in-out infinite; }
.slot-in { transform-box: fill-box; transform-origin: 50% 80%; }
.servido .slot-in { animation: aterriza 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
.onda { transform-box: fill-box; transform-origin: center; animation: onda 0.9s ease-out forwards; }
.slot-veg { animation: aparecer 0.35s ease-out; }
@keyframes vapor { 0% { opacity: 0; transform: translateY(10px) scaleY(0.8); } 35% { opacity: 0.55; } 100% { opacity: 0; transform: translateY(-28px) scaleY(1.1); } }
@keyframes aterriza { 0% { transform: scale(1.25, 0.7); } 45% { transform: scale(0.92, 1.1); } 75% { transform: scale(1.04, 0.97); } 100% { transform: scale(1); } }
@keyframes onda { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes aparecer { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(234, 186, 78, 0.55); } 70% { box-shadow: 0 0 0 16px rgba(234, 186, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(234, 186, 78, 0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vapor { display: none; }
}

/* ---------- pantallas angostas */
@media (max-width: 960px) {
  .barra { padding: 0.7rem 1rem; gap: 0.8rem; }
  .pildoras { gap: 0.4rem; overflow-x: auto; justify-content: flex-start; }
  .pildoras a { min-width: 0; padding: 0.35rem 0.9rem; white-space: nowrap; }
  .redes { display: none; }
  .acceso, .semana-grid, .armador-grid, .confirmar { grid-template-columns: minmax(0, 1fr); }
  .plan-card, .escenario, .caja-total { position: static; }
  .dias-s { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
  .semana-col, .opciones-plato, .tarjeta-acceso { padding: 1.25rem; }
  .carrusel { height: 310px; }
  .carta { width: 164px; padding: 0.7rem; }
  .carta-img { height: 96px; }
  .flecha { top: 120px; width: 2.5rem; height: 2.5rem; }
  .fila-opciones { grid-template-columns: 1fr; gap: 0.25rem; }
  .envases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .envase-op small { display: none; }
  .nutri-s { grid-template-columns: 104px 1fr; }
  .anillo, .anillo svg { width: 104px; height: 104px; }
}

/* ---------- acceso: iniciar sesión y crear cuenta */
.cuenta-barra { display: flex; align-items: center; gap: 0.5rem; color: #fff; font-size: 0.875rem; margin-right: 0.5rem; }
.cuenta-barra button { border: 1.5px solid var(--salvia-media); background: none; color: var(--salvia); border-radius: 40px; padding: 0.25rem 0.9rem; font-size: 0.8125rem; cursor: pointer; }
.cuenta-barra button:hover { background: var(--salvia-oscura); color: #fff; border-color: var(--salvia-oscura); }
.avatar-s { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--salvia-oscura); color: #fff; font-weight: 600; font-size: 0.75rem; flex: none; }
.cb-nombre { font-weight: 500; }
.auth { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); background: #fff; border-radius: var(--radio); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35); max-width: 1060px; margin: 0 auto; }
.auth-lado { position: relative; background: radial-gradient(120% 90% at 30% 0%, #2c2c2c 0%, #000 72%); color: #fff; padding: 2.5rem 2.2rem; display: flex; flex-direction: column; }
.auth-foto { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 6px rgba(170, 191, 185, 0.25); margin-bottom: 1.5rem; }
.auth-lado h2 { font-size: 1.7rem; margin-bottom: 1rem; color: #fff; }
.auth-lado .lista-check { color: #d6dedb; font-size: 0.9375rem; }
.auth-lado .lista-check li { margin-bottom: 0.7rem; }
.auth-sellos { margin-top: auto; display: flex; gap: 1rem; padding-top: 1.5rem; }
.auth-sellos img { width: 58px; height: auto; filter: invert(1); opacity: 0.8; }
.auth-form { padding: 2rem 2.4rem 2.4rem; min-width: 0; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--claro); border-radius: 40px; padding: 0.3rem; margin-bottom: 1.6rem; }
.auth-tabs button { border: 0; background: none; border-radius: 40px; padding: 0.6rem; font-weight: 500; cursor: pointer; color: var(--suave); }
.auth-tabs button[aria-selected='true'] { background: var(--salvia-oscura); color: #fff; box-shadow: 0 6px 14px -6px rgba(62, 86, 79, 0.7); }
.login h2, .reg-cuerpo h2 { font-size: 1.6rem; color: var(--salvia-oscura); }
.sub-auth { color: var(--suave); margin: 0.3rem 0 1.2rem; }
.error-auth { background: #fbe8e5; color: #7a2216; border-radius: 16px; padding: 0.6rem 1rem; font-size: 0.9375rem; animation: sacudir 0.4s; }
.clave-env { position: relative; display: block; }
.clave-env input { padding-right: 3rem; }
.ver-clave { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-38%); width: 2.2rem; height: 2.2rem; border: 0; background: none; cursor: pointer; color: var(--salvia-oscura); border-radius: 50%; }
.ver-clave svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ver-clave:hover { background: #e3ebe8; }
.fila-auth { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: -0.2rem 0 1.2rem; font-size: 0.875rem; }
.recordar { display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; }
.recordar input { accent-color: var(--salvia-oscura); }
.girando { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: girar 0.8s linear infinite; vertical-align: -0.15em; }
.cambiar-auth { text-align: center; margin: 1rem 0 0; color: var(--suave); font-size: 0.9375rem; }
.demo-cuentas { margin-top: 1.6rem; padding: 1rem 1.1rem; border: 1.5px dashed var(--salvia); border-radius: 20px; background: #f7faf9; font-size: 0.875rem; }
.demo-cuentas code { background: #fff; border-radius: 6px; padding: 0.05rem 0.4rem; font-weight: 600; color: var(--salvia-oscura); }
.demo-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.7rem 0; }
.demo-chip { display: inline-flex; align-items: center; gap: 0.5rem; border: 1.5px solid #dbe4e0; background: #fff; border-radius: 40px; padding: 0.25rem 0.9rem 0.25rem 0.3rem; cursor: pointer; text-align: left; font-size: 0.8125rem; line-height: 1.15; transition: border-color 0.2s, transform 0.2s; }
.demo-chip small { display: block; color: var(--suave); font-size: 0.6875rem; }
.demo-chip:hover { border-color: var(--salvia-oscura); transform: translateY(-1px); }
.demo-chip:disabled { opacity: 0.55; cursor: wait; }
.otra-demo { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; color: var(--salvia-oscura); }
.otra-demo select { flex: 1; min-width: 0; font: 400 0.875rem var(--fuente); border: 1.5px solid #dbe4e0; border-radius: 40px; padding: 0.4rem 0.8rem; background: #fff; }
.reg-pasos { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.reg-pasos li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--suave); border-bottom: 3px solid #e3ebe8; padding-bottom: 0.5rem; }
.reg-pasos li span { width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: #e3ebe8; font-weight: 600; flex: none; }
.reg-pasos li span svg { width: 1rem; height: 1rem; fill: none; stroke: #fff; stroke-width: 2.6; }
.reg-pasos li.actual { color: var(--texto); font-weight: 600; border-color: var(--salvia-oscura); }
.reg-pasos li.actual span { background: var(--salvia-oscura); color: #fff; }
.reg-pasos li.hecho { border-color: var(--salvia-media); }
.reg-pasos li.hecho span { background: var(--salvia-media); }
.reg-cuerpo { animation: aparecer-paso 0.35s ease-out; }
.planes-reg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.2rem; }
.plan-reg { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 0.8rem; align-items: center; text-align: left; border: 2px solid transparent; background: var(--gris-tarjeta); color: #fff; border-radius: 22px; padding: 0.8rem 1rem; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.plan-reg img { grid-row: 1 / 4; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff; }
.plan-reg b { font-size: 1.05rem; color: var(--salvia); font-weight: 600; line-height: 1.2; }
.plan-reg .pr { font-weight: 600; font-size: 0.9375rem; }
.plan-reg .pr small, .plan-reg > small { font-weight: 300; font-size: 0.75rem; color: #c9d3d0; }
.plan-reg.premium { background: #000; border-color: var(--oro-suave); }
.plan-reg.premium b { color: var(--oro); }
.plan-reg.activa { border-color: #fff; transform: translateY(-3px); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, 0.5), 0 0 0 3px var(--salvia); }
.cinta { position: absolute; top: -9px; right: 14px; background: linear-gradient(90deg, #d7c06d, #eaba4e); color: #111; font-size: 0.625rem; font-weight: 700; border-radius: 4px; padding: 0.1rem 0.5rem; }
.resumen-reg { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--claro); border-radius: 18px; padding: 0.9rem 1.1rem; margin-top: 0.4rem; }
.resumen-reg b { font-size: 1.4rem; color: var(--salvia-oscura); font-weight: 600; white-space: nowrap; }
.nota-s { font-size: 0.8125rem; color: var(--suave); margin: 0.5rem 0 0; }
.resumen-pago { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; background: var(--gris-tarjeta); color: #fff; border-radius: 20px; padding: 0.9rem 1.1rem; margin: 1rem 0 1.2rem; }
.resumen-pago img { width: 56px; height: 56px; border-radius: 50%; background: #fff; object-fit: cover; }
.resumen-pago small { display: block; color: #c9d3d0; font-size: 0.8125rem; }
.resumen-pago .monto { font-size: 1.5rem; color: var(--oro); font-weight: 600; }
.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.metodo { display: grid; gap: 0.15rem; text-align: left; border: 2px solid #dbe4e0; background: #fff; border-radius: 18px; padding: 0.8rem 1rem; cursor: pointer; }
.metodo small { color: var(--suave); font-size: 0.75rem; }
.metodo.activa { border-color: var(--salvia-oscura); background: #f2f7f5; }
.caja-simulada { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; margin-top: 1rem; border-radius: 18px; padding: 1rem 1.1rem; background: #f7faf9; border: 1.5px dashed var(--salvia); font-size: 0.875rem; }
.caja-simulada svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--salvia-oscura); stroke-width: 1.8; }
.caja-simulada p { margin: 0; }
.btn-pagar { background: var(--oro); border-color: var(--oro); color: #111; }
.btn-pagar:hover { background: #f3c96b; }
.btn-pagar .girando { border-color: rgba(0, 0, 0, 0.2); border-top-color: #111; }
.pago-ok { text-align: center; padding: 1rem 0; }
.sello-ok { width: 84px; height: 84px; border-radius: 50%; background: var(--salvia-oscura); display: grid; place-items: center; margin: 0 auto 1rem; animation: latir-ok 0.6s cubic-bezier(0.3, 1.6, 0.5, 1); box-shadow: 0 0 0 10px rgba(62, 86, 79, 0.15); }
.sello-ok svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazo 0.5s 0.25s ease-out forwards; }
.pago-ok .acciones-s { justify-content: center; }
.fuerza { display: block; height: 5px; border-radius: 4px; background: #e3ebe8; margin-top: 0.4rem; overflow: hidden; }
.fuerza i { display: block; height: 100%; width: 0; background: var(--alerta); transition: width 0.3s, background 0.3s; }
.fuerza[data-n='1'] i { width: 20%; }
.fuerza[data-n='2'] i { width: 45%; background: var(--oro); }
.fuerza[data-n='3'] i { width: 65%; background: var(--oro); }
.fuerza[data-n='4'] i { width: 85%; background: var(--salvia-media); }
.fuerza[data-n='5'] i { width: 100%; background: var(--salvia-oscura); }
.acepto-s { display: block; font-size: 0.875rem; margin: 0.4rem 0 0.2rem; }
.acepto-s input { margin-right: 0.4rem; accent-color: var(--salvia-oscura); }
.caja-total .pagado-l dt, .caja-total .pagado-l dd { color: #9fd4b8; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes sacudir { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes aparecer-paso { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes latir-ok { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@media (max-width: 960px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-lado { padding: 1.6rem 1.4rem; }
  .auth-foto { width: 110px; height: 110px; margin-bottom: 1rem; }
  .auth-lado .lista-check, .auth-sellos { display: none; }
  .auth-form { padding: 1.4rem 1.2rem 1.8rem; }
  .planes-reg, .metodos { grid-template-columns: minmax(0, 1fr); }
  .cb-nombre { display: none; }
  .reg-pasos li { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) { .girando { animation: none; } }

@media (max-width: 960px) {
  .pildoras { min-width: 0; }
  .pildoras a { flex: none; }
  .cuenta-barra { flex: none; margin-right: 0; }
  .cuenta-barra button { padding: 0.2rem 0.7rem; font-size: 0.75rem; }
}

/* ---------- paso 4: plan pagado y diferencia */
.caja-total .pagado-l dt { display: flex; gap: 0.4rem; align-items: flex-start; }
.caja-total .pagado-l dt svg { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: #9fd4b8; stroke-width: 2.6; margin-top: 0.15rem; }
.caja-total .pagado-l small { display: block; font-size: 0.75rem; color: #c7d0cd; }
.caja-total .subtot { border-top: 1px solid #6a6a6a; font-weight: 600; }
.mini-extra { font-style: normal; font-weight: 600; color: #8a6410; background: #fbf3dc; border-radius: 20px; padding: 0 0.45rem; margin-left: 0.3rem; }
.listo-final .sello-ok { margin: 0 0 1rem; }
.recibo { margin: 1rem 0; background: var(--claro); border-radius: 18px; padding: 0.6rem 1.1rem; }
.recibo div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid #e0e8e5; font-size: 0.9375rem; }
.recibo div:last-child { border-bottom: 0; }
.recibo dd { margin: 0; font-weight: 500; white-space: nowrap; }
.recibo .tot { font-weight: 600; }
.recibo .tot dd { color: var(--salvia-oscura); }

/* ---------- "no está aquí": casilla al final del grupo y su cuadro */
.chip-otro span { border-style: dashed; color: var(--salvia-oscura); font-weight: 500; }
.chip-otro span::before { content: '+'; margin-right: 0.35rem; font-weight: 600; }
.chip-otro input:checked + span::before { content: '\2013'; }
.otro-campo { margin-top: 0.7rem; animation: abrir-otro 0.25s ease-out; }
.otro-campo[hidden] { display: none; }
@keyframes abrir-otro { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .otro-campo { animation: none; } }

/* ---------- plato premium: el botón de la esquina del escenario */
.barra-premium { display: flex; align-items: center; gap: 0.8rem; justify-content: space-between; margin: -0.4rem 0 0.9rem; padding: 0.6rem 0.6rem 0.6rem 1rem; border-radius: 22px; background: #1d1d1d; border: 1px solid #333; }
.barra-premium div { display: grid; gap: 0.1rem; min-width: 0; }
.barra-premium b { font-weight: 600; font-size: 0.9375rem; }
.barra-premium small { color: #aeb9b5; font-size: 0.75rem; line-height: 1.4; }
.barra-premium .btn-oro { flex: none; }
.barra-premium.es-plan { justify-content: flex-start; padding: 0.5rem 0.9rem; }
.barra-premium.activa { background: linear-gradient(120deg, #2e2512, #1b1a14 70%); border-color: #6d5a22; }
.barra-premium.activa b { color: var(--oro); }
.barra-premium .estrella { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--oro); color: #111; font-size: 1.1rem; }
.barra-premium.recien { animation: subir-prem 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.barra-premium.recien .estrella { animation: brillo-prem 1s ease-out; }
@keyframes subir-prem { 0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(234, 186, 78, 0.6); } 60% { transform: scale(1.01); box-shadow: 0 0 0 12px rgba(234, 186, 78, 0); } 100% { transform: none; } }
@keyframes brillo-prem { 0% { transform: rotate(-90deg) scale(0.4); } 70% { transform: rotate(10deg) scale(1.15); } 100% { transform: none; } }
.btn-oro { background: var(--oro); border-color: var(--oro); color: #111; display: inline-grid; justify-items: center; gap: 0; line-height: 1.2; }
.btn-oro small { font-weight: 500; font-size: 0.75rem; opacity: 0.8; }
.btn-oro:hover { background: #f3c96b; }
.bloqueo-pie.oro { color: var(--oro); }
.carta.cerrada .carta-img { filter: grayscale(0.55) brightness(0.85); }
.tab-plato.premium { border-color: var(--oro); }
.tab-plato.premium::after { content: 'Premium'; font-size: 0.625rem; font-weight: 600; color: var(--oro); }
.titulo-plato .sello-s { vertical-align: middle; font-size: 0.75rem; }
.chip-v.prem small { font-size: 0.625rem; font-weight: 600; color: #6b4c05; background: #f7ecd0; border-radius: 20px; padding: 0 0.4rem; margin-left: 0.15rem; }
.chip-v.prem.activa small { background: var(--oro); color: #111; }
.bloque-op.cerrado { border: 1.5px dashed #c9b37a; border-radius: 20px; padding: 1rem 1.1rem; }
.bloque-op.cerrado h3 { display: flex; gap: 0.5rem; align-items: center; }
.mini-plato.premium { border-color: var(--oro); }

/* ---------- calorías aproximadas */
.anillo b.rango-k { font-size: 1.35rem; display: grid; line-height: 1.05; }
.anillo b.rango-k i { font-style: normal; font-size: 0.6875rem; font-weight: 400; color: #b9c5c1; }

/* ---------- un solo pago al final */
.sub-pago { margin: 1.1rem 0 0.6rem; font-size: 1rem; color: var(--salvia); }
.caja-total .metodos { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
.caja-total .metodo { padding: 0.6rem 0.9rem; color: var(--texto); }
.guia-pago { margin-top: 0.8rem; background: #f7faf9; color: var(--texto); border-radius: 18px; padding: 0.9rem 1rem; }
.guia-pago ol { margin: 0 0 0.6rem; padding-left: 1.2rem; font-size: 0.875rem; display: grid; gap: 0.35rem; }
.guia-pago .nota-total { color: var(--suave); margin: 0 0 0.6rem; }
.subir-comp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: center; border: 2px dashed var(--salvia-media); border-radius: 16px; padding: 0.75rem; cursor: pointer; background: #fff; position: relative; margin-bottom: 0.7rem; }
.subir-comp:hover { border-color: var(--salvia-oscura); }
.subir-comp input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.subir-comp:focus-within { outline: 3px solid var(--oro); outline-offset: 2px; }
.subir-comp span { display: grid; gap: 0.1rem; min-width: 0; }
.subir-comp b { font-weight: 600; overflow-wrap: anywhere; }
.subir-comp small { color: var(--suave); font-size: 0.75rem; }
.subir-comp .mas-s { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--salvia-oscura); color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 400; }
.subir-comp img { width: 3.6rem; height: 4.4rem; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid #dbe4e0; }
.subir-comp.con { border-style: solid; border-color: var(--dato, #2a9064); background: #f1f8f4; }
.subir-comp .pdf-s { width: 3.2rem; height: 3.8rem; border-radius: 10px; background: #fff; border: 1px solid #dbe4e0; display: grid; place-items: center; font-weight: 600; color: var(--salvia-oscura); }
.guia-pago .campo-s small { font-weight: 400; color: var(--suave); }
@media (max-width: 640px) {
  .barra-premium { flex-wrap: wrap; }
  .barra-premium .btn-oro { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .barra-premium.recien, .barra-premium.recien .estrella { animation: none; } }
.barra-premium .enlace-s { flex: none; font-size: 0.8125rem; color: var(--salvia); white-space: nowrap; }
.aviso-flotante { pointer-events: none; }

/* ---------- varias semanas, plan del mes y envío */
.n-semanas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.n-sem { display: grid; gap: 0.15rem; text-align: left; border: 2px solid #dbe4e0; background: #fff; border-radius: 18px; padding: 0.7rem 0.9rem; cursor: pointer; font: inherit; color: var(--texto); }
.n-sem b { font-weight: 600; }
.n-sem small { color: var(--suave); font-size: 0.75rem; line-height: 1.35; }
.n-sem.activa { border-color: var(--salvia-oscura); background: #f2f7f5; }
.n-sem.mes { border-style: dashed; border-color: #c9a64a; }
.n-sem.mes.activa { border-style: solid; border-color: var(--oro); background: #fbf5e6; }
.semanas-compra { display: flex; gap: 0.5rem; overflow-x: auto; margin: 1rem 0 0.4rem; padding-bottom: 0.2rem; }
.semanas-compra button { flex: none; display: grid; gap: 0.05rem; text-align: left; border: 1.5px solid #d3ddd9; background: #fff; border-radius: 16px; padding: 0.45rem 0.9rem; cursor: pointer; font: inherit; color: var(--texto); }
.semanas-compra button small { font-size: 0.75rem; color: var(--suave); }
.semanas-compra button span { font-size: 0.75rem; color: var(--salvia-oscura); font-weight: 500; }
.semanas-compra button[aria-selected='true'] { border-color: var(--salvia-oscura); background: var(--salvia-oscura); color: #fff; }
.semanas-compra button[aria-selected='true'] small, .semanas-compra button[aria-selected='true'] span { color: #dfe8e5; }
.semanas-compra.oscuro button { background: #111; border-color: #444; color: #ddd; }
.semanas-compra.oscuro button[aria-selected='true'] { background: var(--salvia); border-color: var(--salvia); color: #111; }
.semanas-compra.oscuro button[aria-selected='true'] small, .semanas-compra.oscuro button[aria-selected='true'] span { color: #23302c; }
.zona-reg { align-items: end; }
.envio-reg { display: grid; gap: 0.2rem; align-content: end; padding-bottom: 0.4rem; }
.envio-reg p { margin: 0; font-size: 0.8125rem; color: var(--suave); }
.envio-reg .enlace-s { justify-self: start; }
.caja-total dl .sem-cab { border-top: 1px solid #555; padding-top: 0.5rem; margin-top: 0.3rem; font-weight: 600; }
.caja-total dl .lin-sem dt { padding-left: 0.8rem; font-size: 0.8125rem; color: #dfe6e3; }
.caja-total dl .lin-sem dd { color: #dfe6e3; }
.caja-total dl .envio-l dt, .caja-total dl .envio-l dd { color: #c8d3cf; }
.plan-mes { display: grid; gap: 0.6rem; background: #2c2715; border: 1px solid #6d5a22; border-radius: 18px; padding: 0.9rem 1rem; margin: 0 0 0.9rem; }
.plan-mes div { display: grid; gap: 0.2rem; }
.plan-mes b { color: var(--oro); font-weight: 600; }
.plan-mes small { color: #d9d2bf; font-size: 0.8125rem; line-height: 1.4; }
.plan-mes .btn-oro { justify-self: start; }
@media (max-width: 640px) { .n-semanas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- v7: semana de martes a lunes, Full Personalizado, ficha nueva y factura electrónica */
.dia-s.corte { box-shadow: inset 3px 0 0 var(--salvia-media); }
.aviso-hora { margin: 0.2rem 0 1rem; padding: 0.6rem 1rem; border-radius: 16px; background: #e3ebe8; color: var(--salvia-oscura); font-size: 0.875rem; font-weight: 500; }
.envio-reg .aviso-hora { margin: 0 0 0.4rem; }
.ayuda-s { font-size: 0.8125rem; font-weight: 400; color: var(--suave); margin: 0 0 0.5rem; }
.plan-reg.full .cinta { background: #000; color: var(--oro); }
.nota-full { padding: 0.6rem 1rem; border-radius: 16px; background: #fbf4df; color: #5c4a14; }
.macros-full { background: #fff; border: 1.5px solid var(--oro); border-radius: 22px; padding: 1.1rem 1.2rem 0.8rem; }
.macros-full h3 { flex-wrap: wrap; }
.macro-full { display: grid; grid-template-columns: minmax(6.5rem, auto) 2.4rem minmax(0, 1fr) 2.4rem 4.2rem; align-items: center; gap: 0.5rem; margin: 0.6rem 0; }
.macro-full label { font-weight: 600; color: var(--salvia-oscura); font-size: 0.9375rem; }
.macro-full label small { display: block; font-weight: 400; color: var(--suave); font-size: 0.75rem; }
.macro-full input[type="range"] { width: 100%; accent-color: var(--salvia-oscura); min-height: 2.4rem; }
.macro-full output { font-weight: 700; font-size: 1.05rem; text-align: right; font-variant-numeric: tabular-nums; }
.paso-m { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--salvia-media); background: #fff; color: var(--salvia-oscura); font: 600 1.2rem var(--fuente); cursor: pointer; }
.paso-m:hover:not(:disabled) { background: #e3ebe8; }
.paso-m:disabled { opacity: 0.35; cursor: default; }
.paso-m:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.factura-s { margin: 0.6rem 0 0.2rem; padding-top: 0.6rem; border-top: 1px solid #4d4d4d; }
.factura-s .acepto { margin: 0.4rem 0; }
.factura-campos { grid-template-columns: 1fr; }
.factura-s .campo-s { color: var(--salvia); font-size: 0.8125rem; margin-bottom: 0.6rem; }
.factura-s .campo-s input, .factura-s .campo-s select { padding: 0.55rem 0.9rem; }
@media (max-width: 560px) {
  .macro-full { grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem 4rem; }
  .macro-full label { grid-column: 1 / -1; }
}
.barra-premium .sello-s { white-space: nowrap; }
.caja-total .caja-simulada { color: var(--texto); }

/* ---------- calculadora del Full Personalizado en el registro */
.calc-full { margin: 1rem 0 0.5rem; padding: 1.1rem 1.2rem; border-radius: 22px; background: #fffaf0; border: 1.5px solid var(--oro); }
.calc-full h3 { margin: 0 0 0.3rem; font-size: 1.15rem; color: #000; }
.calc-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.calc-res > div { background: #fff; border-radius: 16px; padding: 0.7rem 0.8rem; border: 1px solid #f0e2bd; }
.calc-res span { display: block; font-size: 0.75rem; color: var(--suave); }
.calc-res b { display: block; font-size: 1.05rem; color: #000; font-variant-numeric: tabular-nums; }
.calc-res small { display: block; font-size: 0.6875rem; color: var(--suave); margin-top: 0.15rem; }
@media (max-width: 640px) { .calc-res { grid-template-columns: 1fr; } }

@media (min-width: 561px) { .macro-full { grid-template-columns: 9.5rem 2.4rem minmax(0, 1fr) 2.4rem 4.2rem; } }

/* ---------- fotos reales de los ingredientes */
.foto-ing { display: block; width: 100%; height: 100%; object-fit: cover; }
.carta-img .foto-carne { width: 100%; height: 100%; border-radius: 16px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); transition: transform 0.5s; }
.carta.centro .carta-img .foto-carne { animation: flotar 3.2s ease-in-out infinite; }
.harina-op .foto-harina { width: 88px; height: 62px; border-radius: 12px; }
.foto-chip { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, 0.25); }
.chip-v .foto-chip { margin-left: -0.35rem; }
.carta-img .foto-carne { height: 120px; }
.harina-op .foto-harina { flex: none; }
@media (max-width: 960px) { .carta-img .foto-carne { height: 96px; } }

/* ---------- Mi cuenta: el panel del cliente */
.mi-cuenta { display: grid; gap: 1.4rem; }
.mc-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.mc-hola { margin: 0; color: var(--salvia-oscura); font-weight: 500; }
.mc-cab h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0.1rem 0 0.4rem; }
.mc-plan { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.875rem; }
.mc-rev { color: var(--suave); }
.mc-rev.revisada { color: var(--salvia-oscura); }
.mc-acc { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.mc-card { background: #fff; border-radius: 24px; padding: 1.3rem 1.4rem; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); min-width: 0; }
.mc-card h3 { font-size: 1.1rem; margin: 0 0 0.8rem; color: #000; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.mc-card h3 small { font-weight: 400; font-size: 0.8125rem; color: var(--suave); }
.mc-entrega { grid-column: span 2; background: #000; color: #fff; }
.mc-entrega h3 { color: var(--salvia); }
.mc-entrega .mc-nota { color: #cfd8d5; }
.mc-nutri { grid-column: span 4; }
.mc-semanas { grid-column: span 6; }
.mc-ficha, .mc-datos, .mc-clave { grid-column: span 2; }
.mc-fecha { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.4rem; }
.mc-est { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; border-radius: 30px; padding: 0.3rem 0.85rem; margin: 0 0 0.7rem; }
.mc-est i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }
.mc-est.est-prep { background: #2b2b2b; color: var(--salvia); }
.mc-est.est-ruta { background: var(--oro); color: #000; }
.mc-est.est-ok { background: #2a9064; color: #fff; }
.mc-nota { font-size: 0.8125rem; color: var(--suave); margin: 0.3rem 0 0; }
.mc-vacio { color: var(--suave); margin: 0 0 0.8rem; }
.mc-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.mc-cifras b { display: block; font-size: 1.35rem; color: #000; font-variant-numeric: tabular-nums; }
.mc-cifras span { font-size: 0.75rem; color: var(--suave); }
.mc-barras { position: relative; height: 150px; display: flex; align-items: flex-end; gap: 6px; padding: 0 2px 22px; border-bottom: 1px solid #e3e8e6; }
.mc-meta { position: absolute; left: 0; right: 0; background: rgba(42, 144, 100, 0.12); border-top: 1px dashed rgba(42, 144, 100, 0.6); border-bottom: 1px dashed rgba(42, 144, 100, 0.6); margin-bottom: 22px; }
.mc-barra { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.mc-barra i { width: min(100%, 34px); border-radius: 8px 8px 3px 3px; background: var(--salvia-oscura); }
.mc-barra small { position: absolute; bottom: -20px; font-size: 0.6875rem; color: var(--suave); white-space: nowrap; }
.mc-fav { font-size: 0.875rem; margin: 0.8rem 0 0; }
.mc-lista { list-style: none; margin: 0; padding: 0; }
.mc-lista > li { border-top: 1px solid #edf1ef; padding: 0.8rem 0; }
.mc-lista > li:first-child { border-top: 0; padding-top: 0; }
.mc-sem { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr) auto; gap: 0.8rem; align-items: center; }
.mc-sem b { display: block; }
.mc-sem small { color: var(--suave); font-size: 0.8125rem; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.mc-chip { font-size: 0.75rem; font-weight: 500; border-radius: 30px; padding: 0.15rem 0.6rem; background: #eef2f0; color: var(--salvia-oscura); }
.mc-chip.ok { background: #dcefe3; color: #1d6142; }
.mc-chip.ruta { background: #fbf0d2; color: #6b4e00; }
.mc-chip.rev, .mc-chip.pend { background: #fbf0d2; color: #6b4e00; }
.mc-chip.mal { background: #fbe8e5; color: #b3261e; }
.mc-btns { display: flex; gap: 0.8rem; margin: 0; }
.mc-platos { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem; }
.mc-platos li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.6rem; align-items: center; background: var(--claro); border-radius: 16px; padding: 0.5rem; font-size: 0.8125rem; }
.mc-platos b { display: block; }
.mc-platos small { display: block; color: var(--suave); }
.mc-env svg { width: 96px; height: auto; display: block; }
.mc-dl { margin: 0 0 0.8rem; display: grid; gap: 0.5rem; }
.mc-dl dt { font-size: 0.75rem; color: var(--suave); }
.mc-dl dd { margin: 0; font-size: 0.875rem; }
.mc-form .campo-s { font-size: 0.8125rem; margin-bottom: 0.6rem; }
.mc-form .campo-s input, .mc-form .campo-s select, .mc-form .campo-s textarea { padding: 0.55rem 0.9rem; font-size: 0.875rem; }
.mc-form .campo-s textarea { border-radius: 18px; }
.mc-sol { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: 0.8125rem; display: grid; gap: 0.35rem; }
.cb-cuenta { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.cb-cuenta .cb-nombre { text-decoration: underline; text-underline-offset: 3px; }
.cb-cuenta:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 30px; }
@media (max-width: 1000px) {
  .mc-grid { grid-template-columns: 1fr 1fr; }
  .mc-entrega, .mc-nutri, .mc-semanas, .mc-ficha, .mc-datos, .mc-clave { grid-column: span 2; }
}
@media (max-width: 640px) {
  .mc-sem { grid-template-columns: 1fr; }
  .mc-cifras { grid-template-columns: 1fr 1fr; }
  .mc-acc .btn { width: 100%; }
}

/* ---------- Mi cuenta, versión completa */
.mc2 { background: linear-gradient(180deg, #e7eeeb 0, #f3f6f5 420px); }
.mc2 .mi-cuenta { gap: 1.2rem; }
.mc2-perfil-cab .mc-plan { gap: 0.6rem; }
.mc2-eti { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--salvia); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.mc2-eti small { font-weight: 400; color: inherit; opacity: 0.8; }
.mc2-eti.oscuro { color: var(--salvia-oscura); margin-top: 1rem; }
.mc2-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.2rem; }
.mc2-entrega { background: radial-gradient(120% 90% at 100% 0, #2c3a36 0, #000 60%); color: #fff; border-radius: 28px; padding: 1.6rem 1.7rem; display: flex; flex-direction: column; min-width: 0; }
.mc2-entrega h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 0.6rem; line-height: 1.1; }
.mc2-falta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin: 0 0 1.1rem; color: #cfd8d5; font-size: 0.9375rem; }
.mc2-falta .mc-est { margin: 0; }
.mc2-linea { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.mc2-linea li { position: relative; display: grid; justify-items: center; gap: 0.45rem; text-align: center; font-size: 0.75rem; color: #8b9692; }
.mc2-linea li::before { content: ''; position: absolute; top: 0.55rem; left: -50%; width: 100%; height: 2px; background: #3a4440; }
.mc2-linea li:first-child::before { display: none; }
.mc2-linea li i { position: relative; z-index: 1; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #000; border: 2px solid #3a4440; }
.mc2-linea li.hecho { color: var(--salvia); }
.mc2-linea li.hecho::before, .mc2-linea li.actual::before { background: var(--salvia); }
.mc2-linea li.hecho i { background: var(--salvia); border-color: var(--salvia); }
.mc2-linea li.actual { color: #fff; font-weight: 600; }
.mc2-linea li.actual i { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 0 5px rgba(234, 186, 78, 0.22); }
.mc2-cajas { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.mc2-cajas span { width: 96px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 4px; }
.mc2-cajas svg { width: 100%; height: auto; display: block; }
.mc2-cajas .mc2-mas { display: grid; place-items: center; width: 56px; font-weight: 700; color: var(--salvia); }
.mc2-nota { font-size: 0.8125rem; color: var(--suave); margin: 0.4rem 0 0; }
.mc2-entrega .mc2-nota { color: #b9c5c1; margin-top: auto; }
.mc2-entrega .btn { align-self: flex-start; margin-top: 1rem; }
.mc2-numeros { background: #fff; border-radius: 28px; padding: 1.5rem 1.6rem; min-width: 0; box-shadow: 0 10px 30px rgba(30, 50, 44, 0.06); }
.mc2-numeros .mc2-eti { color: var(--salvia-oscura); }
.mc2-anillos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 1.1rem; }
.mc2-anillo { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.mc2-anillo svg { width: 64px; height: 64px; flex: none; }
.mc2-anillo b { display: block; font-size: 1.1rem; color: #000; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mc2-anillo span { display: block; font-size: 0.6875rem; color: var(--suave); line-height: 1.3; }
.mc2-acciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.mc2-accion { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; text-align: left; background: #fff; border: 1.5px solid #e1e9e6; border-radius: 22px; padding: 1rem 1.1rem; font: inherit; color: var(--texto); text-decoration: none; cursor: pointer; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.mc2-accion:hover { border-color: var(--salvia-media); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(30, 50, 44, 0.08); }
.mc2-accion:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.mc2-accion .mc2-ico { grid-row: 1 / 3; width: 2.6rem; height: 2.6rem; border-radius: 14px; display: grid; place-items: center; background: #e3ebe8; }
.mc2-accion .mc2-ico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--salvia-oscura); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc2-accion b { font-size: 0.9375rem; }
.mc2-accion small { font-size: 0.75rem; color: var(--suave); }
.mc2-accion.principal { background: var(--salvia-oscura); border-color: var(--salvia-oscura); color: #fff; }
.mc2-accion.principal small { color: #cfe0da; }
.mc2-accion.principal .mc2-ico { background: rgba(255, 255, 255, 0.14); }
.mc2-accion.principal .mc2-ico svg { stroke: #fff; }
.mc2-mes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; border-radius: 28px; padding: 1.4rem 1.7rem; background: linear-gradient(120deg, #1a1a1a 0, #000 55%, #2a2210 100%); color: #fff; border: 1.5px solid rgba(234, 186, 78, 0.55); }
.mc2-mes .mc2-eti { color: var(--oro); }
.mc2-mes h3 { font-size: 1.35rem; margin: 0 0 0.4rem; color: #fff; }
.mc2-mes p { margin: 0; color: #d9d2bf; max-width: 46rem; }
.mc2-mes p b { color: var(--oro); }
.mc2-mes ul { margin: 0.6rem 0 0; padding-left: 1.1rem; color: #cfc8b5; font-size: 0.875rem; }
.mc2-mes.activo { background: linear-gradient(120deg, #fbf4df, #fff 70%); color: var(--texto); }
.mc2-mes.activo h3 { color: #000; }
.mc2-mes.activo p { color: var(--suave); }
.mc2-mes.activo .mc2-eti { color: #8a6a12; }
.mc2-bloque { background: #fff; border-radius: 28px; padding: 1.4rem 1.6rem; min-width: 0; box-shadow: 0 10px 30px rgba(30, 50, 44, 0.05); }
.mc2-cab-b { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1rem; }
.mc2-cab-b h3 { margin: 0; font-size: 1.2rem; color: #000; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.mc2-cab-b h3 small { font-weight: 400; font-size: 0.8125rem; color: var(--suave); }
.mc2-menu { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 0.8rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x mandatory; }
.mc2-plato { scroll-snap-align: start; background: var(--claro); border-radius: 20px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.mc2-plato.extra { box-shadow: inset 0 0 0 1.5px var(--oro); }
.mc2-plato-img svg { width: 100%; height: auto; display: block; }
.mc2-dia { margin: 0.2rem 0 0; font-size: 0.75rem; font-weight: 600; color: var(--salvia-oscura); }
.mc2-dia em { font-style: normal; color: #8a6a12; background: #fbf0d2; border-radius: 20px; padding: 0 0.45rem; margin-left: 0.3rem; }
.mc2-desc { margin: 0; font-size: 0.8125rem; line-height: 1.35; }
.mc2-macro { margin: auto 0 0; font-size: 0.75rem; color: var(--suave); }
.mc2-sumar { border: 2px dashed #c9d6d1; background: #fff; display: grid; place-content: center; justify-items: center; text-align: center; cursor: pointer; font: inherit; color: var(--salvia-oscura); }
.mc2-sumar span { font-size: 2rem; line-height: 1; }
.mc2-sumar small { color: var(--suave); font-size: 0.75rem; }
.mc2-sumar:hover { border-color: var(--salvia-media); }
.mc2-dos { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.2rem; align-items: start; }
.mc2-semanas .mc-sem { grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr) auto; }
.mc2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.mc2-stats div { background: var(--claro); border-radius: 18px; padding: 0.8rem; }
.mc2-stats b { display: block; font-size: 1.4rem; color: #000; font-variant-numeric: tabular-nums; }
.mc2-stats span { font-size: 0.75rem; color: var(--suave); }
.mc2-favs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.mc2-favs li { display: flex; align-items: center; gap: 0.6rem; }
.mc2-favs img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; }
.mc2-favs b { display: block; font-size: 0.875rem; }
.mc2-favs small { color: var(--suave); font-size: 0.75rem; }
.mc2-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; background: var(--claro); border-radius: 40px; padding: 0.25rem; }
.mc2-tabs button { border: 0; background: none; font: 500 0.8125rem var(--fuente); color: var(--texto); padding: 0.45rem 0.95rem; border-radius: 40px; cursor: pointer; }
.mc2-tabs button[aria-selected="true"] { background: var(--salvia-oscura); color: #fff; }
.mc2-tabs button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.mc2-dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.mc2-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; align-items: end; }
.mc2-form .ancho, .mc2-form .mc2-nota { grid-column: 1 / -1; }
.mc2-form .btn { justify-self: start; margin-bottom: 0.6rem; }
.tiempo-s.ya-pedido { opacity: 0.55; cursor: not-allowed; background: #e3ebe8; }
.tiempo-s.ya-pedido small { display: block; font-size: 0.625rem; }
@media (max-width: 1000px) {
  .mc2-top, .mc2-dos, .mc2-dos-col { grid-template-columns: 1fr; }
  .mc2-acciones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .mc2-acciones, .mc2-form { grid-template-columns: 1fr; }
  .mc2-anillos { grid-template-columns: 1fr; }
  .mc2-entrega, .mc2-numeros, .mc2-bloque, .mc2-mes { padding: 1.2rem; border-radius: 22px; }
  .mc2-linea li span { font-size: 0.625rem; }
  .mc2-menu { grid-auto-columns: 78%; }
  .mc2-favs { grid-template-columns: 1fr; }
}

.tiempo-s.cerrado { opacity: 0.45; cursor: not-allowed; background: #eceeed; text-decoration: line-through; }
.tiempo-s.cerrado small { display: block; font-size: 0.625rem; text-decoration: none; }
.mc2-acciones { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---------- pasos del pedido: una línea de progreso con número, título y para qué sirve cada paso */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 880px; width: 100%; margin: 0 auto; padding: 0 0.5rem; }
.pasos[hidden] { display: none; }
.pasos li { position: relative; }
.pasos li::before { content: ''; position: absolute; top: 1.25rem; left: calc(-50% + 1.7rem); right: calc(50% + 1.7rem); height: 2px; background: #3a3a3a; border-radius: 2px; }
.pasos li:first-child::before { display: none; }
.pasos li.hecho::before, .pasos li.actual::before { background: var(--salvia); }
.pasos li button { width: 100%; display: grid; justify-items: center; gap: 0.5rem; border: 0; background: none; color: #7f8a86; padding: 0 0.3rem; border-radius: 16px; cursor: pointer; text-align: center; font: inherit; }
.pasos li button:disabled { opacity: 1; cursor: default; }
.pasos li button .ps-num { position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: #161616; border: 2px solid #3a3a3a; font-weight: 600; color: #9aa5a1; transition: border-color 0.2s, box-shadow 0.2s; }
.pasos li button .ps-num svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pasos li button .ps-txt { width: auto; height: auto; background: none; border-radius: 0; display: block; }
.pasos li button .ps-txt b { display: block; font-size: 0.875rem; font-weight: 600; }
.pasos li button .ps-txt small { display: block; font-size: 0.6875rem; opacity: 0.85; margin-top: 0.1rem; }
.pasos li.hecho button { color: #dfe8e5; background: none; }
.pasos li.hecho button .ps-num { background: var(--salvia-oscura); border-color: var(--salvia); color: #fff; }
.pasos li.actual button { color: #fff; background: none; }
.pasos li.actual button .ps-num { background: #fff; border-color: var(--oro); color: #000; box-shadow: 0 0 0 5px rgba(234, 186, 78, 0.22); }
.pasos li button:not(:disabled):hover .ps-num { border-color: var(--salvia); }
.pasos li button:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
@media (max-width: 640px) {
  .pasos li button .ps-txt small { display: none; }
  .pasos li button .ps-txt b { font-size: 0.6875rem; line-height: 1.2; }
  .pasos li button .ps-num { width: 2.1rem; height: 2.1rem; }
  .pasos li::before { top: 1.05rem; left: calc(-50% + 1.4rem); right: calc(50% + 1.4rem); }
}

/* ---------- gracias: al terminar el pedido */
.gracias { max-width: 62rem; background: #fff; border-radius: 32px; padding: clamp(1.6rem, 4vw, 3rem); box-shadow: 0 20px 50px rgba(30, 50, 44, 0.08); }
.gr-cab { text-align: center; max-width: 38rem; margin: 0 auto 1.8rem; }
.gr-cab .sello-ok { margin: 0 auto 1rem; }
.gr-eti { font-size: 0.8125rem; font-weight: 600; color: var(--salvia-media); margin: 0 0 0.3rem; }
.gr-cab h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #000; margin: 0 0 0.6rem; line-height: 1.15; }
.gr-cab p { color: var(--suave); margin: 0; }
.gr-cuerpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.2rem; }
.gr-resumen { background: var(--claro); border-radius: 24px; padding: 1.2rem; }
.gr-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 1rem; }
.gr-datos dt { font-size: 0.75rem; color: var(--suave); }
.gr-datos dd { margin: 0; font-weight: 600; color: #000; }
.gr-cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.gr-cajas span { background: #fff; border-radius: 14px; padding: 4px; }
.gr-cajas svg { width: 100%; height: auto; display: block; }
.gr-cajas .gr-mas { display: grid; place-items: center; font-weight: 700; color: var(--salvia-oscura); }
.gr-entregas { border: 1.5px solid #e1e9e6; border-radius: 24px; padding: 1.2rem; }
.gr-entregas h3 { font-size: 1rem; margin: 0 0 0.7rem; color: #000; }
.gr-entregas ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.gr-entregas li { display: flex; justify-content: space-between; gap: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid #edf1ef; font-size: 0.875rem; }
.gr-entregas li span { color: var(--suave); }
.gr-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 1.8rem 0 0.8rem; }
.gr-mas-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; margin: 0; font-size: 0.875rem; }
.gracias .nota-demo { text-align: center; margin-top: 0.8rem; }
@media (max-width: 760px) { .gr-cuerpo { grid-template-columns: 1fr; } .gr-acc .btn { width: 100%; } }