/* =====================================================================
   Página de inicio (landing) de TuDistri — solo el orden de las secciones.
   Usa las piezas aprobadas de base.css (botones, tarjetas, ícono en círculo, etiquetas);
   acá solo van los espacios, las columnas y los dos dibujitos que todavía no estaban en la guía.
   Celular primero: todo en una columna y, a partir de 600 / 900 / 1000 px, en columnas.
   ===================================================================== */

/* Colores de la marca TuDistri (los del folleto, pedido de Dirección el 19/10/2026): naranja y negro.
   Solo en esta página: se cambian los mismos nombres de color que usan las piezas de base.css,
   así los botones, tarjetas y etiquetas siguen siendo las piezas aprobadas, con el color de la marca. */
:root {
  --color: #E8590C;
  --color-oscuro: #C2410C;
  --color-suave: #FFF1E8;
  --texto: #111827;
  --marca-azul: #2563EB;   /* la cinta "Gratis para siempre" del folleto */
}
body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--color-oscuro); }
.boton:hover { background: var(--color-oscuro); }
.boton-secundario:hover { background: #FFE2CF; }
:is(.boton, .boton-secundario, .boton-link):focus-visible { outline-color: #F7B98C; }
/* el naranja con letra blanca necesita letra grande y gruesa para leerse bien */
.landing .boton-grande { font-size: 19px; font-weight: 700; min-height: 58px; }
@media (max-width: 400px) { .landing .boton-grande { font-size: 19px; } }

/* Marca: el cuadradito naranja con el local, "Tu" en negro y "Distri" en naranja */
.marca { display: inline-flex; align-items: center; gap: 0; }
.marca-ico { margin-right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--color); color: #fff; flex: none; }
.marca .marca-ico, .marca .marca-ico .ico { color: #fff; }
.marca-ico .ico { width: 24px; height: 24px; }
.marca span:not(.marca-ico):not(.ico) { color: var(--color); }

/* Dos dibujitos de línea con el mismo estilo que los de base.css (candidatos a sumarse a la guía) */
.ico-planilla { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='2'/%3E%3Cpath d='M3.5 9h17M3.5 14.5h17M9.5 9v11.5'/%3E%3C/svg%3E"); }

.landing section { padding: 48px 0; }
@media (min-width: 768px) { .landing section { padding: 72px 0; } }
.landing h2 { font-size: clamp(26px, 5vw, 36px); text-align: center; margin-bottom: 10px; }
.landing .bajada-seccion { text-align: center; color: var(--texto-suave); font-size: 18px; max-width: 640px; margin: 0 auto 32px; }
.landing .fondo-blanco { background: var(--tarjeta); }

/* La cabecera: marca a la izquierda, "Ya tengo cuenta" a la derecha */
.cabecera .contenedor { gap: 12px; }
.cabecera .boton-secundario { min-height: 44px; padding: 8px 16px; flex: none; }
.marca { font-size: 24px; letter-spacing: -0.02em; }

/* ---------- 1. Portada ---------- */
.portada { background: linear-gradient(180deg, var(--color-suave), var(--fondo)); }
.landing .portada { padding: 36px 0 48px; }
.portada .contenedor { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) {
  .portada .contenedor { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; }
  .landing .portada { padding: 64px 0 72px; }
}
.para-quien { display: inline-block; margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--color-oscuro); text-transform: uppercase; letter-spacing: .08em; }
.portada h1 { font-size: clamp(34px, 8vw, 60px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 8px; }
.portada h1 span { color: var(--color); }
.a-mano { font-family: "Caveat", cursive; font-size: clamp(30px, 6vw, 40px); font-weight: 700; color: var(--color); line-height: 1.1; margin: 0 0 16px; }
.portada .bajada { font-size: clamp(18px, 2.4vw, 21px); color: var(--texto-suave); margin: 0 0 24px; max-width: 560px; }
.portada .boton-grande { width: 100%; }
@media (min-width: 480px) { .portada .boton-grande { width: auto; min-width: 300px; } }
.ya-tengo { margin: 10px 0 0; font-size: 16px; color: var(--texto-suave); }
.ya-tengo a { display: inline-block; min-height: 44px; padding: 10px 4px; font-weight: 600; }

/* Las tres promesas, a la vista (no en letra chica) */
.promesas { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.promesas li { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; font-weight: 600; }
.promesas .ico-ok, .pronto .ico-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color); color: #fff; flex: none; }
.promesas .ico-ok .ico, .pronto .ico-ok .ico { width: 17px; height: 17px; vertical-align: 0; }
.promesas small { display: block; font-weight: 400; font-size: 16px; color: var(--texto-suave); }

/* El celular con una tienda de ejemplo */
.celular { position: relative; margin: 0 auto; width: 100%; max-width: 300px; }
/* Sello "0 % comisión por venta" y cinta "Gratis para siempre", como en el folleto */
.sello { position: absolute; left: -14px; bottom: 120px; width: 124px; height: 124px; border-radius: 50%; background: var(--texto); color: #fff;
  box-shadow: 0 0 0 6px var(--color), 0 12px 28px rgba(16, 24, 40, .25); display: grid; place-content: center; text-align: center; line-height: 1; transform: rotate(-8deg); }
.sello small { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sello small:first-child { color: #FF9A52; }
.sello b { font-size: 42px; font-weight: 800; margin: 4px 0; }
.cinta { position: absolute; right: -10px; bottom: 54px; padding: 8px 16px; border-radius: 10px; background: var(--marca-azul); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transform: rotate(-5deg); box-shadow: 0 8px 20px rgba(37, 99, 235, .3); }
@media (max-width: 359px) { .sello { left: -6px; width: 112px; height: 112px; } .sello b { font-size: 36px; } .cinta { right: -4px; font-size: 14px; } }
.celular img { width: 100%; height: auto; border: 8px solid var(--texto); border-radius: 34px; background: #fff;
  box-shadow: 0 24px 50px rgba(16, 24, 40, .18); }
.vitrina figcaption { margin-top: 12px; text-align: center; font-size: 16px; color: var(--texto-suave); }

/* ---------- 2. Cómo funciona: tres pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: paso; }
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pasos li { counter-increment: paso; }
.pasos li::before { content: counter(paso); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color); color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.pasos h3, .incluye h3 { font-size: 20px; margin-bottom: 6px; }
.pasos p, .incluye p { margin: 0; color: var(--texto-suave); }
.centrado { text-align: center; margin-top: 32px; }

/* ---------- 3. Qué incluye: tarjetas con dibujito ---------- */
.incluye { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 600px) { .incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .incluye { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.incluye li { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; }
.incluye li > div { min-width: 0; }
@media (min-width: 1000px) { .incluye li { flex-direction: column; gap: 12px; } }
.incluye .ico-circulo { width: 52px; height: 52px; background: var(--color-suave); color: var(--color-oscuro); box-shadow: none; }
.incluye .ico-circulo .ico { width: 26px; height: 26px; }

/* ---------- 4. Así te llegan los pedidos: ver "Mejoras del 19/10/2026" al final ---------- */

/* ---------- 5. Para quién es ---------- */

/* ---------- 6. Muy pronto ---------- */
.pronto { max-width: 820px; margin: 0 auto; }
.pronto .etiqueta-estado { font-size: 15px; margin-bottom: 12px; }
.pronto ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
@media (min-width: 768px) { .pronto ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } }
.pronto li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-suave); }
.pronto li b { color: var(--texto); font-weight: 600; }
.pronto li .ico-ok { margin-top: -.05em; }

/* ---------- 7. Preguntas frecuentes: todas a la vista, sin nada que abrir ---------- */
.preguntas { max-width: 820px; margin: 0 auto; }
.preguntas .tarjeta { padding-top: 6px; padding-bottom: 6px; }
.pregunta { padding: 18px 0; border-bottom: 1px solid var(--borde); }
.pregunta:last-child { border-bottom: 0; }
.pregunta h3 { font-size: 19px; margin-bottom: 6px; }
.pregunta p { margin: 0; color: var(--texto-suave); }

/* ---------- 8. Cierre ---------- */
.cierre { text-align: center; max-width: 720px; margin: 0 auto; }
.cierre p { color: var(--texto-suave); font-size: 18px; margin: 0 0 24px; }
.cierre .boton-grande { width: 100%; }
@media (min-width: 480px) { .cierre .boton-grande { width: auto; min-width: 300px; } }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde); padding: 28px 0 36px; color: var(--texto-suave); font-size: 16px; text-align: center; background: var(--tarjeta); }
.pie .marca { font-size: 20px; min-height: 48px; }
.pie p { margin: 6px 0 0; }
.pie nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-top: 10px; }
.pie nav a { display: inline-block; min-height: 44px; padding: 10px 2px; white-space: nowrap; }

/* ---------- A prueba de todo (19/10/2026) ---------- */
/* una palabra larguísima pasa de renglón en lugar de empujar la página de costado */
.landing, .pie { overflow-wrap: anywhere; }

@media (max-width: 899px) { .portada .contenedor { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .pasos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .incluye { grid-template-columns: minmax(0, 1fr); } }
.promesas li > span:last-child, .pronto li > span:last-child { min-width: 0; }
.marca { min-height: 48px; }
/* cabecera en celulares angostos o con la letra agrandada: todo entra; si no entra, el botón baja */
.cabecera .contenedor { flex-wrap: wrap; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 399px) {
  .marca { font-size: 21px; }
  .marca-ico { width: 34px; height: 34px; border-radius: 10px; margin-right: 8px; }
  .marca-ico .ico { width: 20px; height: 20px; }
  .cabecera .boton-secundario { padding: 8px 14px; font-size: 15px; }
}
@media (max-width: 339px) { .cabecera .marca-ico { display: none; } }
@media (max-width: 299px) { .cinta, .pie nav a { white-space: normal; } .cinta { right: 0; } }
.cabecera { overflow-wrap: anywhere; } .cabecera .boton-secundario { flex: 0 1 auto; }

/* ---------- Mejoras del 19/10/2026 (tomadas del volante) ---------- */

.lado-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.antes .lado-titulo { color: var(--texto-suave); }
.ahora .lado-titulo { color: var(--color-oscuro); }
.antes .ico { color: var(--error); }
.antes .lado-titulo .ico { color: var(--texto-suave); }
.ahora .ico-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color); color: #fff; flex: none; }
.ahora .ico-ok .ico { width: 17px; height: 17px; vertical-align: 0; }
/* el chat de WhatsApp dibujado: fondo beige y globitos */
.chat { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; border-radius: var(--radio-grande); background: #E9E4DC; }
.burbuja { align-self: flex-start; max-width: 88%; padding: 8px 12px; border-radius: 4px 16px 16px 16px; background: #fff; color: var(--texto);
  font-size: 17px; line-height: 1.3; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); overflow-wrap: anywhere; }
.burbuja.mia { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: #D9FDD3; }

/* Botón fijo abajo (solo celular y tablet) */
.barra-crear { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); box-shadow: 0 -6px 20px rgba(16, 24, 40, .1); animation: deshacer-entra .2s ease-out; }
.barra-crear .boton-grande { width: 100%; }
.barra-crear[hidden] { display: none; }
body.con-barra { padding-bottom: 84px; }
@media (min-width: 900px) { .barra-crear { display: none !important; } body.con-barra { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .barra-crear { animation: none; } }


/* Botón de WhatsApp para consultas: la misma pieza "A" de la tienda (tienda.css, 12/10/2026), verde #198845 que se lee con letra blanca */
.boton-whatsapp { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; gap: 8px;
  min-height: 54px; padding: 0 22px 0 16px; border-radius: 99px; background: #198845; color: #fff; font-weight: 700; font-size: 18px;
  text-decoration: none; box-shadow: 0 8px 24px rgba(31, 168, 85, .35), 0 2px 6px rgba(0, 0, 0, .12); transition: background .15s, transform .15s; }
.boton-whatsapp:hover { background: #157a3d; color: #fff; transform: translateY(-1px); }
.boton-whatsapp:focus { outline: none; }
.boton-whatsapp:focus-visible { outline: 3px solid #F7B98C; outline-offset: 2px; }
.boton-whatsapp .ico { width: 26px; height: 26px; }
/* con el botón naranja fijo abajo (celular), el de WhatsApp sube y queda arriba de él */
body.con-barra .boton-whatsapp { bottom: calc(90px + env(safe-area-inset-bottom)); }
/* el pie deja lugar abajo para que el botón no tape los enlaces legales */
.pie { padding-bottom: 96px; }
@media (prefers-reduced-motion: reduce) { .boton-whatsapp { transition: none; } }

/* ---------- Portada: la tienda en la compu (atrás) y en el celular (adelante), aprobado por Dirección el 19/10/2026 ----------
   La compu es un dibujo hecho con HTML: todo lo de adentro se mide en "cqw" (centésimas del ancho de la pantallita),
   así se achica parejo como una foto. Menos de 768 px: solo el celular, como antes. */
.vitrina { margin: 0; }
.compu { display: none; }
@media (min-width: 900px) { .portada .contenedor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 768px) {
  .vitrina { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 620px; margin: 0 auto; }
  .compu { display: block; grid-area: 1 / 1; align-self: start; margin: 0 5% 0 20%; min-width: 0; }
  .vitrina .celular { grid-area: 1 / 1; align-self: end; justify-self: start; width: 34%; max-width: none; margin: 33.5% 0 0; z-index: 1; }
  .vitrina .celular img { border-width: 6px; border-radius: 24px; }
  .vitrina figcaption { grid-area: 2 / 1; }
  /* sello y cinta más chicos para el celular más chico */
  .vitrina .sello { width: 104px; height: 104px; left: -26px; bottom: 34%; box-shadow: 0 0 0 5px var(--color), 0 10px 24px rgba(16, 24, 40, .25); }
  .vitrina .sello small { letter-spacing: .02em; }
  .vitrina .sello b { font-size: 34px; margin: 2px 0; }
  .vitrina .cinta { right: auto; left: 52%; bottom: 9%; }
}
.compu-pantalla { container-type: inline-size; aspect-ratio: 16 / 10.4; overflow: hidden; background: #fff;
  border: 8px solid var(--texto); border-bottom-width: 10px; border-radius: 14px 14px 0 0; box-shadow: 0 24px 50px rgba(16, 24, 40, .16); }
.compu-base { position: relative; height: 12px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#e5e7eb, #9ca3af);
  box-shadow: 0 10px 18px rgba(16, 24, 40, .14); }
.compu-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 4px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #9ca3af; }

/* La tienda en miniatura (mismos colores y partes que la tienda real del celular) */
.cp-tienda { font-size: 1.55cqw; line-height: 1.25; color: var(--texto); text-align: left; overflow-wrap: normal; }
.cp-tienda span, .cp-tienda b, .cp-tienda i { font-style: normal; }
.cp-cabecera { display: flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2.4cqw; border-bottom: .2cqw solid var(--borde); }
.cp-logo { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #FFF1E8; color: var(--color-oscuro); font-weight: 800; font-size: 1.4cqw; flex: none; }
.cp-nombre { font-weight: 800; font-size: 1.9cqw; white-space: nowrap; }
.cp-buscar { flex: 1; min-width: 0; padding: 1cqw 2cqw; border-radius: 99px; background: var(--gris-suave); color: #8b93a1; white-space: nowrap; overflow: hidden; }
.cp-carrito { display: inline-flex; align-items: center; gap: .8cqw; padding: .8cqw 1.6cqw; border-radius: 99px; background: #FFF1E8; color: var(--color-oscuro); font-weight: 700; white-space: nowrap; }
.cp-carrito b { display: grid; place-items: center; min-width: 2.6cqw; height: 2.6cqw; border-radius: 99px; background: var(--color); color: #fff; font-size: 1.3cqw; }
.cp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 34%; gap: 2cqw; margin: 1.8cqw 2.4cqw 0; align-items: start; }
.cp-productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; }
.cp-prod { display: flex; flex-direction: column; gap: .3cqw; min-width: 0; }
.cp-prod img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1.2cqw; background: #f5f5f4; margin-bottom: .6cqw; }
.cp-prod span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-prod b { font-size: 2cqw; font-weight: 800; }
.cp-prod i { color: var(--ok); font-size: 1.3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pedido { padding: 1.8cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0 0 .2cqw var(--borde), 0 .6cqw 2cqw rgba(16, 24, 40, .08); }
.cp-pedido-titulo { display: block; font-size: 2cqw; font-weight: 800; margin-bottom: 1cqw; }
.cp-renglon { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8cqw; align-items: center; padding: .7cqw 0; border-bottom: .15cqw solid var(--borde); font-size: 1.3cqw; }
.cp-renglon span:first-child { padding: .2cqw .7cqw; border-radius: 99px; background: #FFF1E8; color: var(--color-oscuro); font-weight: 700; }
.cp-renglon span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-renglon span:last-child { font-weight: 700; white-space: nowrap; }
.cp-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1cqw; font-weight: 700; }
.cp-total b { font-size: 2.2cqw; font-weight: 800; }
.cp-transf { margin-top: .3cqw; color: var(--ok); font-size: 1.3cqw; font-weight: 600; }
.cp-boton { display: block; margin-top: 1.4cqw; padding: 1.1cqw; border-radius: 99px; background: var(--color); color: #fff; text-align: center; font-weight: 700; }
/* compu grande: la portada (y la cabecera, para que el logo quede alineado) usa un poco más de ancho,
   así el título queda en 2 renglones como antes y la compu se ve bien */
@media (min-width: 1280px) {
  .cabecera .contenedor, .portada .contenedor { max-width: 1240px; }
  .portada .contenedor { grid-template-columns: minmax(0, 610px) minmax(0, 1fr); gap: 56px; }
}
.cp-prod img { height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
@media (min-width: 900px) and (max-width: 1023.98px) { .portada .contenedor { grid-template-columns: minmax(0, 1fr); } }   /* compu chica en dos columnas: mejor abajo del texto, como en tablet */
.leyenda-grande { display: none; } @media (min-width: 768px) { .leyenda-chica { display: none; } .leyenda-grande { display: inline; } }
.boton-whatsapp { max-width: calc(100% - 32px); } @media (max-width: 239px) { .boton-whatsapp { padding: 0 12px; font-size: 15px; gap: 6px; } .boton-whatsapp .ico { width: 22px; height: 22px; } }   /* zoom muy fuerte: el botón verde no se sale de la pantalla */

/* Tienda de la compu personalizada (19/10/2026, pedido de Dirección: "más linda, personalizada con fotos; tenemos un buen editor").
   Solo partes que el Editor ya tiene: barra de aviso, logo, portada con fotos, categorías con foto en círculos y producto en oferta. */
.compu-pantalla { aspect-ratio: 16 / 11; }
.cp-aviso { padding: .9cqw 2cqw; background: var(--texto); color: #fff; text-align: center; font-size: 1.3cqw; font-weight: 600; white-space: nowrap; overflow: hidden; }
.cp-cabecera { padding: 1.3cqw 2.4cqw; }
.cp-logo { background: linear-gradient(135deg, #F59E0B, #E8590C); color: #fff; width: 4.6cqw; height: 4.6cqw; }
.cp-logo svg { width: 3cqw; height: 3cqw; }
.cp-nombre { font-size: 2cqw; letter-spacing: -.02em; }
.cp-nombre em { font-style: normal; color: var(--color); }
/* portada: texto a la izquierda sobre naranja, fotos del negocio a la derecha */
.cp-portada { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 1cqw;
  margin: 1.4cqw 2.4cqw 0; padding: 2cqw 2.4cqw; min-height: 17cqw; border-radius: 1.8cqw; overflow: hidden;
  background: radial-gradient(circle at 85% 30%, #FDBA74 0, transparent 45%), linear-gradient(120deg, #9A3412, #E8590C 70%); color: #fff; }
.cp-portada-texto small { display: inline-block; padding: .3cqw 1cqw; border-radius: 99px; background: rgba(255, 255, 255, .2); font-size: 1.2cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cp-portada-texto b { display: block; margin: .8cqw 0 .5cqw; font-size: 2.7cqw; line-height: 1.1; font-weight: 800; }
.cp-portada-texto span { display: block; font-size: 1.4cqw; opacity: .95; }
.cp-portada-texto i { display: inline-block; margin-top: 1.2cqw; padding: .8cqw 2cqw; border-radius: 99px; background: #fff; color: var(--color-oscuro); font-style: normal; font-weight: 700; font-size: 1.4cqw; }
.cp-portada-fotos { position: relative; height: 14cqw; }
.cp-portada-fotos img { position: absolute; width: 10.5cqw; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1.4cqw; background: #fff;
  border: .5cqw solid #fff; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .25); }
.cp-portada-fotos img:nth-child(1) { left: 0; top: 1.6cqw; transform: rotate(-8deg); }
.cp-portada-fotos img:nth-child(2) { left: 31%; top: 0; z-index: 1; transform: rotate(3deg); }
.cp-portada-fotos img:nth-child(3) { right: 0; top: 2.4cqw; transform: rotate(9deg); }
/* cuerpo: categorías en círculos y productos a la izquierda, el pedido a la derecha */
.cp-cuerpo { margin-top: 1.6cqw; }
.cp-izquierda { min-width: 0; }
.cp-categorias { display: flex; gap: 2cqw; margin-bottom: 1.4cqw; }
.cp-categorias span { display: flex; flex-direction: column; align-items: center; gap: .5cqw; font-size: 1.2cqw; font-weight: 600; }
.cp-categorias img { width: 6.4cqw; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .3cqw var(--color-suave), 0 0 0 .5cqw var(--color); }
.cp-prod { position: relative; }
.cp-prod b s { color: var(--texto-suave); font-weight: 500; font-size: 1.3cqw; margin-right: .3cqw; }
.cp-oferta { position: absolute; left: .8cqw; top: .8cqw; z-index: 1; padding: .3cqw .9cqw; border-radius: 99px; background: var(--error); color: #fff; font-style: normal; font-size: 1.1cqw; font-weight: 700; }
@media (max-width: 199px) { .pronto .etiqueta-estado { white-space: normal; } }   /* zoom extremo: "Muy pronto" puede bajar de renglón */


.equilibrada { text-wrap: balance; }   /* el subtítulo se reparte parejo en los renglones (no deja una palabra sola abajo) */

/* ---------- Los dos lados: el pedido sale del celular del cliente y llega al instante al panel ----------
   En la compu: celular | flecha | panel, con la MISMA altura (celular 9:19,5 y panel 4:3; los anchos de las columnas salen de esa cuenta).
   En celular y tablet: carrito, flecha hacia abajo, panel. */
.lados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px;
  grid-template-areas: "n1" "celu" "l1" "flecha" "n2" "panel" "l2"; }
.lado-n1 { grid-area: n1; } .lado-n2 { grid-area: n2; } .pv-celu { grid-area: celu; } .recorrido { grid-area: flecha; } .pv-panel { grid-area: panel; }
.lado-l1 { grid-area: l1; } .lado-l2 { grid-area: l2; }
@media (min-width: 1024px) {
  .lados { grid-template-columns: minmax(0, 34.62fr) minmax(0, 16fr) minmax(0, 100fr); column-gap: 0; row-gap: 20px;
    grid-template-areas: "n1 . n2" "celu flecha panel" "l1 l1 l2"; }
}
.lado-nombre { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; font-weight: 800; }
@media (max-width: 1023px) { .lado-nombre { justify-content: center; } .lado-n2 { margin-top: 4px; } }
.lado-num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color); color: #fff; font-size: 17px; }
.lado-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (max-width: 1023px) { .lado-lista { width: fit-content; max-width: 100%; margin: 0 auto; } }
.lado-lista li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.lado-lista li > span:last-child { min-width: 0; }
.lado-lista .ico-ok { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color); color: #fff; flex: none; }
.lado-lista .ico-ok .ico { width: 17px; height: 17px; vertical-align: 0; }

/* la flecha "Llega al instante": de costado en la compu, hacia abajo en celular y tablet */
.recorrido { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; }
.recorrido-etiqueta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 14px; background: var(--color-suave); color: var(--color-oscuro);
  font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; }
.recorrido-etiqueta .ico { flex: none; }
.recorrido-linea { position: relative; width: 100%; height: 0; border-top: 3px dashed var(--color); }
.recorrido-linea::after { content: ""; position: absolute; right: -2px; top: -9px; border-left: 13px solid var(--color); border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; }
@media (max-width: 1023px) {
  .recorrido { flex-direction: column-reverse; padding: 4px 0; }
  .recorrido-linea { width: 0; height: 40px; border-top: 0; border-left: 3px dashed var(--color); }
  .recorrido-linea::after { right: auto; left: -9px; top: auto; bottom: -4px; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-top: 13px solid var(--color); border-bottom: 0; }
}

/* el carrito, en un celular con proporción de teléfono de verdad */
.pv-celu { position: relative; justify-self: center; width: 100%; max-width: 280px; aspect-ratio: 9 / 19.5; border: 9px solid var(--texto); border-radius: 38px; overflow: hidden;
  background: #fff; box-shadow: 0 20px 44px rgba(16, 24, 40, .16); }
@media (min-width: 1024px) { .pv-celu { max-width: none; } }
.pv-celu::before { content: ""; position: absolute; left: 50%; top: 7px; z-index: 1; width: 30%; height: 16px; transform: translateX(-50%); border-radius: 99px; background: var(--texto); }   /* la camarita */
.pv-celu-pantalla { container-type: inline-size; display: flex; flex-direction: column; height: 100%; text-align: left; line-height: 1.25; overflow-wrap: normal; }
.pc-estado { display: flex; justify-content: space-between; align-items: center; padding: calc(3.4cqw * var(--kc, 1)) calc(7cqw * var(--kc, 1)) calc(1.4cqw * var(--kc, 1)); font-size: calc(3.6cqw * var(--kc, 1)); }
.pc-estado span { width: calc(7cqw * var(--kc, 1)); height: calc(3.4cqw * var(--kc, 1)); border-radius: calc(1cqw * var(--kc, 1)); background: var(--texto); }
.pc-cab { display: flex; align-items: center; gap: calc(3cqw * var(--kc, 1)); padding: calc(3.4cqw * var(--kc, 1)) calc(5cqw * var(--kc, 1)); border-bottom: calc(.4cqw * var(--kc, 1)) solid var(--borde); }
.pc-logo { display: grid; place-items: center; flex: none; width: calc(9cqw * var(--kc, 1)); height: calc(9cqw * var(--kc, 1)); border-radius: 50%; background: #FFF1E8; color: #C2410C; font-weight: 800; font-size: calc(3.2cqw * var(--kc, 1)); }
.pc-cab b { flex: 1; font-size: calc(5.2cqw * var(--kc, 1)); font-weight: 800; }
.pc-cant { font-size: calc(3.6cqw * var(--kc, 1)); color: var(--texto-suave); white-space: nowrap; }
.pc-item { display: grid; grid-template-columns: calc(13cqw * var(--kc, 1)) minmax(0, 1fr) auto; align-items: center; gap: calc(3cqw * var(--kc, 1)); padding: calc(2.6cqw * var(--kc, 1)) calc(5cqw * var(--kc, 1)); border-bottom: calc(.4cqw * var(--kc, 1)) solid var(--borde); }
.pc-item img { width: calc(13cqw * var(--kc, 1)); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(2.4cqw * var(--kc, 1)); background: #F5F5F4; }
.pc-item > div span { display: block; font-size: calc(3.6cqw * var(--kc, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-item > div b { display: block; font-size: calc(4.1cqw * var(--kc, 1)); font-weight: 800; }
.pc-mas { display: inline-flex; align-items: center; gap: calc(1.8cqw * var(--kc, 1)); padding: calc(1cqw * var(--kc, 1)); border-radius: 99px; background: var(--gris-suave); font-size: calc(3.7cqw * var(--kc, 1)); font-weight: 700; }
.pc-mas i { display: grid; place-items: center; width: calc(6cqw * var(--kc, 1)); height: calc(6cqw * var(--kc, 1)); border-radius: 50%; background: #fff; color: #C2410C; font-style: normal; }
.pc-fila { display: flex; justify-content: space-between; gap: calc(2cqw * var(--kc, 1)); padding: calc(2.2cqw * var(--kc, 1)) calc(5cqw * var(--kc, 1)) 0; font-size: calc(3.7cqw * var(--kc, 1)); }
.pc-fila b { font-weight: 700; white-space: nowrap; }
.pc-total { padding-top: calc(3cqw * var(--kc, 1)); font-size: calc(4.6cqw * var(--kc, 1)); font-weight: 700; }
.pc-total b { font-size: calc(5.6cqw * var(--kc, 1)); font-weight: 800; }
.pc-verde { color: var(--ok); }
.pc-pago { display: flex; align-items: center; gap: calc(2.4cqw * var(--kc, 1)); margin: calc(3.4cqw * var(--kc, 1)) calc(5cqw * var(--kc, 1)) 0; padding: calc(3cqw * var(--kc, 1)) calc(3.6cqw * var(--kc, 1)); border-radius: calc(3cqw * var(--kc, 1)); background: #FFF1E8; box-shadow: inset 0 0 0 calc(.5cqw * var(--kc, 1)) #E8590C; font-size: calc(3.8cqw * var(--kc, 1)); font-weight: 600; }
.pc-radio { flex: none; width: calc(4.6cqw * var(--kc, 1)); height: calc(4.6cqw * var(--kc, 1)); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(1.3cqw * var(--kc, 1)) #E8590C; }
.pc-boton { display: block; margin: auto calc(5cqw * var(--kc, 1)) 0; padding: calc(3.6cqw * var(--kc, 1)); border-radius: 99px; background: #E8590C; color: #fff; text-align: center; font-size: calc(4.4cqw * var(--kc, 1)); font-weight: 700; }
.pc-home { display: block; flex: none; width: 34%; height: calc(1.3cqw * var(--kc, 1)); margin: calc(3.4cqw * var(--kc, 1)) auto calc(2.6cqw * var(--kc, 1)); border-radius: 99px; background: var(--texto); }

/* el panel del comerciante, con los colores y nombres reales del panel (azul; Inicio, Productos, Pedidos, Mi tienda) */
.pv-panel { width: 100%; max-width: 640px; justify-self: center; border: 9px solid var(--texto); border-radius: 16px; overflow: hidden; background: #F5F6F8; box-shadow: 0 20px 44px rgba(16, 24, 40, .16); }
@media (min-width: 1024px) { .pv-panel { max-width: none; aspect-ratio: 4 / 3; } }
.pv-panel-pantalla { container-type: inline-size; display: grid; grid-template-columns: 21% minmax(0, 1fr); height: 100%; text-align: left; line-height: 1.25; overflow-wrap: normal; }
.pp-menu { display: flex; flex-direction: column; gap: calc(1cqw * var(--k, 1)); padding: calc(2.6cqw * var(--k, 1)) calc(1.6cqw * var(--k, 1)); background: #fff; box-shadow: 1px 0 0 var(--borde); }
.pp-marca { margin: 0 0 1.6cqw 1.2cqw; font-size: 2.4cqw; font-weight: 800; color: #2459C7; }
.pp-menu > span:not(.pp-marca) { display: flex; align-items: center; gap: 1cqw; padding: 1.3cqw 1.2cqw; border-radius: 1.4cqw; font-size: 1.9cqw; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.pp-menu > span.activo { background: #EAF1FE; color: #2459C7; }
.pp-menu .ico { width: 2.5cqw; height: 2.5cqw; vertical-align: 0; font-style: normal; }
.pp-menu b { margin-left: auto; padding: .1cqw 1cqw; border-radius: 99px; background: #B42318; color: #fff; font-size: 1.6cqw; }
.pp-cuerpo { display: flex; flex-direction: column; gap: calc(1.6cqw * var(--k, 1)); min-width: 0; padding: calc(2.6cqw * var(--k, 1)); }
.pp-cab { display: flex; align-items: center; justify-content: space-between; }
.pp-cab > b { font-size: calc(3.2cqw * var(--k, 1)); font-weight: 800; }
.pp-campana { position: relative; display: grid; place-items: center; width: calc(5.4cqw * var(--k, 1)); height: calc(5.4cqw * var(--k, 1)); border-radius: 50%; background: #EAF1FE; color: #2459C7; }
.pp-campana .ico { width: calc(2.9cqw * var(--k, 1)); height: calc(2.9cqw * var(--k, 1)); vertical-align: 0; font-style: normal; }
.pp-campana b { position: absolute; top: calc(-.6cqw * var(--k, 1)); right: calc(-.6cqw * var(--k, 1)); display: grid; place-items: center; min-width: calc(2.6cqw * var(--k, 1)); height: calc(2.6cqw * var(--k, 1));
  padding: 0 .6cqw; border-radius: 99px; background: #B42318; color: #fff; font-size: calc(1.5cqw * var(--k, 1)); box-shadow: 0 0 0 .4cqw #F5F6F8; }
/* el aviso del momento ("Pedido nuevo"), como en el panel real */
.pp-aviso { display: flex; align-items: center; gap: calc(1.4cqw * var(--k, 1)); padding: calc(1.4cqw * var(--k, 1)) calc(1.8cqw * var(--k, 1)); border-radius: calc(1.8cqw * var(--k, 1)); background: #fff;
  box-shadow: 0 1cqw 2.6cqw rgba(16, 24, 40, .16), 0 0 0 .2cqw rgba(16, 24, 40, .06); }
.pp-aviso > div { min-width: 0; }
.pp-aviso-circ { display: grid; place-items: center; flex: none; width: calc(4.6cqw * var(--k, 1)); height: calc(4.6cqw * var(--k, 1)); border-radius: 50%; background: #EAF1FE; color: #2459C7; }
.pp-aviso-circ .ico { width: calc(2.4cqw * var(--k, 1)); height: calc(2.4cqw * var(--k, 1)); vertical-align: 0; font-style: normal; }
.pp-aviso b { display: block; font-size: calc(1.9cqw * var(--k, 1)); font-weight: 700; }
.pp-aviso span { display: block; font-size: calc(1.6cqw * var(--k, 1)); color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pastillas { display: flex; flex-wrap: wrap; gap: 1cqw; }
.pp-pastillas span { padding: .9cqw 1.5cqw; border-radius: 99px; background: #fff; font-size: 1.7cqw; font-weight: 600; white-space: nowrap; color: var(--texto); }
.pp-pastillas span.activo { background: #2F6FEA; color: #fff; }
.pp-pedido { display: flex; align-items: center; justify-content: space-between; gap: calc(2cqw * var(--k, 1)); padding: calc(1.8cqw * var(--k, 1)) calc(2.2cqw * var(--k, 1)); border-radius: calc(1.8cqw * var(--k, 1)); background: #fff; box-shadow: 0 .2cqw .6cqw rgba(16, 24, 40, .06); }
.pp-pedido.nuevo { background: #F2F7FF; box-shadow: inset calc(.7cqw * var(--k, 1)) 0 0 #2F6FEA, 0 0 0 .3cqw #BFD4FB; }
.pp-pedido > div:first-child { min-width: 0; }
.pp-pedido > div:first-child b { display: block; font-size: calc(2cqw * var(--k, 1)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pedido em { display: inline-block; margin-left: .8cqw; padding: .1cqw 1cqw; border-radius: 99px; background: #2F6FEA; color: #fff; font-style: normal; font-size: calc(1.5cqw * var(--k, 1)); vertical-align: .2cqw; }
.pp-pedido > div:first-child span { display: block; margin-top: .5cqw; font-size: calc(1.7cqw * var(--k, 1)); color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-der { display: flex; flex-direction: column; align-items: flex-end; gap: .8cqw; flex: none; }
.pp-der b { font-size: calc(2.4cqw * var(--k, 1)); font-weight: 800; color: #2459C7; white-space: nowrap; }
.pp-boton, .pp-boton2 { padding: calc(.9cqw * var(--k, 1)) calc(1.8cqw * var(--k, 1)); border-radius: 99px; font-size: calc(1.7cqw * var(--k, 1)); font-weight: 700; white-space: nowrap; }
.pp-boton { background: #2F6FEA; color: #fff; }
.pp-boton2 { background: #EAF1FE; color: #2459C7; }
.pp-herramientas { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: auto; }
.pp-herramientas span { display: inline-flex; align-items: center; gap: .8cqw; padding: 1cqw 1.8cqw; border-radius: 99px; background: #EAF1FE; color: #2459C7; font-size: 1.75cqw; font-weight: 600; white-space: nowrap; }
.pp-herramientas .ico { width: 2.3cqw; height: 2.3cqw; vertical-align: 0; font-style: normal; }
/* celular: el panel recortado a la lista de pedidos (sin menú, pestañas ni herramientas) y con letra grande */
@media (max-width: 599px) {
  .pv-panel { max-width: 380px; border-radius: 24px; }
  .pv-panel-pantalla { --k: 1.75; grid-template-columns: minmax(0, 1fr); }
  .pp-menu, .pp-pastillas, .pp-herramientas, .pp-pedido:nth-of-type(6) { display: none; }
}
.pv-celu-pantalla { --kc: 1.24; }   /* el carrito llena la pantalla del celular y se lee mejor */
.recorrido-etiqueta { flex-direction: column; gap: 4px; padding: 8px 10px; overflow-wrap: normal; }   /* "Llega al instante" en 2 renglones limpios, sin partir palabras */
@media (max-width: 1023px) { .recorrido-etiqueta { flex-direction: row; } }
.pc-item > div span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; overflow-wrap: normal; }   /* el nombre del producto entero, en 2 renglones si hace falta */
.pp-der b, .pc-item > div b, .pc-fila b { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }   /* un precio larguísimo no se sale de su lugar */
.pc-item > div span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }   /* tope de 2 renglones: un nombre larguísimo no empuja el carrito fuera del celular */
@media (max-width: 599px) { .pp-pedido > div:first-child b { white-space: normal; } }   /* "#1048 · Almacén Don José  Nuevo" entero en el celular */

/* ---------- Del volante de la Expo (20/10/2026) ---------- */
/* La oferta: la franja negra del volante (Sistema 100 % gratis · $ 30.000 por mes · Oferta Expo) */
.landing .oferta { background: var(--texto); color: #fff; padding: 40px 0; }
.oferta-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (min-width: 900px) { .oferta-caja { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } }
.landing .oferta h2 { text-align: left; margin: 0 0 4px; color: #fff; font-size: clamp(28px, 5vw, 40px); }
.oferta h2 span { color: #FF9A52; }
.oferta-bajada { margin: 0 0 14px; font-size: 19px; color: #E5E7EB; }
.oferta-precio { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px; }
.oferta-precio s { font-size: 22px; color: #9CA3AF; }
.oferta-precio b { font-size: clamp(36px, 7vw, 48px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.oferta-mes { font-size: 20px; color: #E5E7EB; }
.oferta-descuento { padding: 4px 14px; border-radius: 99px; background: var(--color); color: #fff; font-size: 18px; font-weight: 800; }
.oferta-expo { margin: 0; font-size: 18px; color: #E5E7EB; }
.oferta-expo b { color: #FF9A52; }
.oferta .boton-grande { flex: none; width: 100%; }
@media (min-width: 480px) { .oferta .boton-grande { width: auto; min-width: 300px; } }
.oferta .boton:focus-visible { outline-color: #FF9A52; }

.perfiles-chip { flex: none; padding: 10px 18px; border-radius: 99px; background: var(--marca-azul); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.portada h1 span { display: block; }   /* como el volante: "Tus clientes" / "piden solos" en naranja, cada uno en su renglón */
.perfiles-chip { white-space: normal; max-width: 100%; text-align: center; }   /* la píldora y el texto nunca empujan la página de costado */
.oferta-junto { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; } @media (max-width: 299px) { .oferta-junto { white-space: normal; flex-wrap: wrap; } }   /* "$ 30.000 por mes" juntos */
/* "Así te llegan los pedidos": arriba el antes (mensajes sueltos), abajo el ahora (celular → panel). 20/10/2026 */
.antes-bloque { max-width: 820px; margin: 0 auto 28px; display: flex; flex-direction: column; gap: 12px; }
.antes-bloque .antes { display: flex; flex-direction: column; gap: 10px; }
.chat-fila { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.chat-fila .burbuja { max-width: 100%; }
.chat-fila .burbuja.mia { align-self: flex-start; }
.antes-bloque .ahora { display: flex; justify-content: center; margin-top: 8px; }

/* ---------- El diferencial: portal para mayoristas, el mismo producto con tres precios (20/10/2026) ---------- */
.portal-chip { text-align: center; margin: 0 0 12px; }
.portal-precios { list-style: none; padding: 0; margin: 0 auto 28px; max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .portal-precios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.portal-precios li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
@media (max-width: 699px) {   /* celular: foto al costado, para que las tres tarjetas no queden altísimas */
  .portal-precios li { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "quien quien" "foto prod" "foto precio" "foto lista"; column-gap: 16px; row-gap: 2px; align-items: center; text-align: left; }
  .portal-precios .pr-quien { grid-area: quien; justify-self: start; margin-bottom: 8px; }
  .portal-precios img { grid-area: foto; width: 88px; }
  .pr-prod { grid-area: prod; } .pr-precio { grid-area: precio; } .pr-lista { grid-area: lista; }
}
.pr-quien { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 6px 12px; border-radius: 99px; background: var(--gris-suave); font-size: 15px; font-weight: 700; color: var(--texto); }
.pr-mayorista .pr-quien { background: var(--color-suave); color: var(--color-oscuro); }
.portal-precios img { width: 120px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); background: #F5F5F4; }
.pr-prod { font-size: 16px; color: var(--texto-suave); }
.pr-precio { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pr-mayorista .pr-precio { color: var(--color-oscuro); }
.pr-lista { font-size: 15px; font-weight: 600; color: var(--texto-suave); }
.pr-mayorista { box-shadow: inset 0 0 0 2px #F7B98C, var(--sombra); }
@media (max-width: 299px) { .portal-precios li { display: flex; flex-direction: column; align-items: center; text-align: center; } .portal-precios .pr-quien { justify-self: auto; } .portal-precios img { width: 88px; } }   /* zoom muy fuerte: foto arriba, precio abajo */
/* el precio minorista arriba del mayorista, en las tarjetas de los clientes habilitados (20/10/2026) */
.pr-antes { font-size: 15px; color: var(--texto-suave); }
@media (max-width: 699px) {
  .portal-precios li { grid-template-areas: "quien quien" "foto prod" "foto antes" "foto precio" "foto lista"; }
  .pr-antes { grid-area: antes; }
}
.oferta-tope { display: inline-block; margin-left: 0; padding: 2px 12px; border-radius: 99px; background: #FF9A52; color: var(--texto); font-weight: 800; white-space: nowrap; }   /* "hasta 1.000 productos", bien a la vista (22/10/2026) */
@media (max-width: 299px) { .oferta-tope { white-space: normal; } .oferta-caja > div { min-width: 0; max-width: 100%; } }   /* zoom muy fuerte: la píldora puede bajar de renglón */