/**
 * La landing de TAGA. Hoja propia y aparte de `app.css`.
 *
 * =====================================================================
 * POR QUÉ NO CARGA `app.css`
 * =====================================================================
 * Aquélla es la hoja del SISTEMA: define el layout de trabajo, los listados,
 * los formularios y las trece grillas, y la mira todos los días alguien que ya
 * compró. Ésta la mira una vez alguien que todavía no sabe qué es TAGA.
 * Compartirlas ataría el diseño de la pantalla de venta a cada retoque del ERP
 * —y al revés, que es peor—. Es el mismo corte que ya tienen la tienda
 * (`tienda/tienda.css`) y las etiquetas.
 *
 * Todas las clases van con el prefijo `lp-` para que no puedan chocar con las
 * del sistema el día que alguien meta un partial acá adentro.
 *
 * =====================================================================
 * LAS DECISIONES DE DISEÑO, Y QUÉ SE EVITÓ A PROPÓSITO
 * =====================================================================
 * Lo que hace que una landing se vea "hecha con plantilla": gradiente violeta,
 * hero centrado, tres tarjetas con sombra difusa, iconos de línea genéricos,
 * esquinas muy redondeadas. Nada de eso está acá, y no es un gusto: es lo que
 * hace que el comerciante que la abre vea algo que no vio veinte veces.
 *
 * En su lugar, un vocabulario impreso:
 *   - papel crema y no blanco puro;
 *   - bordes DUROS de 2px y sombra SÓLIDA desplazada, nunca difusa;
 *   - tipografía editorial grande y alineada a la izquierda;
 *   - secciones numeradas 01/02/03 con su rótulo, como una publicación;
 *   - color en bloques planos: sin un solo gradiente en toda la hoja.
 */

/* =====================================================================
   1. LA PALETA
   ===================================================================== */
:root {
    /* El papel es crema y no blanco: es lo primero que separa esto de una
       plantilla, y encima el negro sobre crema cansa menos la vista. */
    --lp-papel: #f4f1ea;
    --lp-papel-2: #ebe6db;
    --lp-tinta: #15191e;
    --lp-tinta-suave: #5b6470;

    /* El azul es el del ERP (`--color-primario` de app.css): la landing y el
       sistema tienen que ser reconociblemente la misma cosa. */
    --lp-azul: #1c4e73;

    /* UN RADIO CHICO Y NO CERO. El estilo es de sombra dura y borde grueso
       —lo que le da carácter— y el ángulo vivo lo volvía áspero de más: cinco
       píxeles lo suavizan sin que deje de ser esto. Va en una variable porque
       lo llevan seis piezas y tienen que moverse juntas. */
    --lp-radio: 5px;

    /* El amarillo señal es el acento y NO se usa para texto sobre papel: no
       contrasta. Va como fondo de bloque, con tinta encima. */
    --lp-senal: #ffd02e;

    --lp-linea: rgba(21, 25, 30, .16);
    --lp-borde: 2px solid var(--lp-tinta);

    --lp-ancho: 1180px;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Quien pidió menos movimiento no quiere que la página se deslice sola: es la
   única forma de que ese ajuste del sistema signifique algo acá. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

body {
    margin: 0;
    background: var(--lp-papel);
    color: var(--lp-tinta);
    font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* El subrayado del navegador viene de su hoja de usuario y gana contra
   cualquier `color` que se declare: hay que apagarlo explícitamente. */
.lp a { text-decoration: none; }

.lp-contenedor {
    width: 100%;
    max-width: var(--lp-ancho);
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .lp-contenedor { padding: 0 18px; }
}

/* =====================================================================
   3. LA BARRA
   ===================================================================== */
.lp-barra {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--lp-papel);
    border-bottom: var(--lp-borde);
}

.lp-barra-fila {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 66px;
}

.lp-marca {
    font-weight: 900;
    font-size: 26px;
    letter-spacing: -.04em;
    /* El tracking negativo junta las letras y hace que se lea como un logo y no
       como una palabra suelta. */
    flex: 0 0 auto;
}

.lp-marca span { color: var(--lp-azul); }

.lp-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    font-size: 15px;
    font-weight: 600;
}

.lp-nav a { padding: 6px 0; border-bottom: 2px solid transparent; }
.lp-nav a:hover { border-bottom-color: var(--lp-tinta); }

/* El acceso al sistema va SIEMPRE a la vista y no escondido en un menú: es la
   red de la cascada de `Landing`. Si una terminal nueva cae acá por no haber
   sido reconocida, lo que tiene que costarle es UN CLIC y no una búsqueda. */
.lp-nav .lp-nav-sistema {
    border: var(--lp-borde);
    padding: 7px 14px;
    background: var(--lp-tinta);
    color: var(--lp-papel);
}

.lp-nav .lp-nav-sistema:hover { background: var(--lp-azul); border-color: var(--lp-azul); }

/* En el celular la barra se queda con la marca y el acceso al sistema. Los
   enlaces de sección se van: son anclas a lo que ya se recorre scrolleando, y
   una barra fija que se parte en dos renglones se come la pantalla. */
@media (max-width: 860px) {
    .lp-nav a:not(.lp-nav-sistema) { display: none; }
    .lp-barra-fila { height: 58px; }
    .lp-marca { font-size: 22px; }
}

/* =====================================================================
   4. LA APERTURA
   ===================================================================== */
.lp-apertura {
    padding: 78px 0 64px;
    border-bottom: var(--lp-borde);
}

.lp-rotulo {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.lp-rotulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--lp-linea);
}

.lp-titular {
    margin: 0;
    font-weight: 900;
    /* `clamp` y no un tamaño fijo: este titular es lo primero que se ve y en un
       teléfono a 360px un valor de escritorio lo parte en seis renglones. */
    font-size: clamp(2.5rem, 7.4vw, 5.6rem);
    line-height: .95;
    letter-spacing: -.045em;
    max-width: 15ch;
}

/* La primera línea va en su propio renglón para que el bloque amarillo arranque
   limpio. Sin esto el resaltado empieza a mitad del primer renglón y la
   apertura queda con media línea pintada y media no. */
.lp-titular-l1 { display: block; }

/**
 * El resaltado es una CAJA amarilla y no un color de letra: sobre papel crema
 * el amarillo no contrasta lo suficiente para texto.
 *
 * Y ES UN BLOQUE Y NO UN `inline` RESALTADO, que fue la primera versión y se
 * rompe: el fondo de un inline se dibuja sobre el CONTENT AREA de la fuente
 * —que depende de sus métricas y NO del `line-height`— así que con un titular
 * apretado las cajas de dos renglones seguidos se SOLAPAN y la línea de arriba
 * queda con las letras comidas por abajo. Subir el `line-height` lo arregla y
 * se lleva puesto el titular compacto, que es medio diseño.
 *
 * Como bloque es un rectángulo sólido que envuelve todas las líneas que haga
 * falta, y por lo tanto no puede romperse con ningún ancho de pantalla. El
 * margen negativo compensa el relleno para que el texto siga alineado con la
 * línea de arriba.
 */
.lp-marca-texto {
    display: block;
    background: var(--lp-senal);
    padding: .06em .16em .1em;
    margin-left: -.16em;
    width: fit-content;
}

.lp-bajada {
    margin: 28px 0 0;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    max-width: 54ch;
    color: var(--lp-tinta-suave);
    line-height: 1.5;
}

.lp-bajada strong { color: var(--lp-tinta); font-weight: 600; }

.lp-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

/* =====================================================================
   5. BOTONES — sombra SÓLIDA, no difusa
   ===================================================================== */
.lp-boton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: var(--lp-borde);
    background: var(--lp-papel);
    color: var(--lp-tinta);
    font: inherit;
    font-weight: 600;
    /* 48px de alto: es lo que hace que se pueda tocar con el pulgar, la misma
       medida que el resto del proyecto usa en sus pantallas de celular. */
    min-height: 48px;
    padding: 12px 22px;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--lp-tinta);
    transition: transform .12s ease, box-shadow .12s ease;
}

.lp-boton:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--lp-tinta);
}

.lp-boton:active { transform: translate(4px, 4px); box-shadow: none; }

.lp-boton-fuerte { background: var(--lp-senal); }
.lp-boton-tinta  { background: var(--lp-tinta); color: var(--lp-papel); }

.lp-boton-wa { background: #25d366; }

.lp-boton svg { flex: 0 0 auto; }

/* =====================================================================
   6. SECCIONES
   ===================================================================== */
.lp-seccion { padding: 72px 0; border-bottom: var(--lp-borde); }

.lp-seccion-cabeza {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 48px;
}

/* El número de sección es del vocabulario impreso: dice dónde se está parado
   sin gastar un renglón de texto. */
.lp-num {
    font-weight: 900;
    font-size: 54px;
    line-height: .8;
    letter-spacing: -.05em;
    color: var(--lp-tinta);
    opacity: .18;
}

.lp-titulo {
    margin: 0;
    font-weight: 900;
    font-size: clamp(1.7rem, 4vw, 2.9rem);
    line-height: 1.03;
    letter-spacing: -.035em;
    max-width: 22ch;
}

.lp-sub {
    margin: 14px 0 0;
    color: var(--lp-tinta-suave);
    max-width: 58ch;
}

@media (max-width: 640px) {
    .lp-seccion { padding: 52px 0; }
    .lp-seccion-cabeza { grid-template-columns: 1fr; gap: 8px; margin-bottom: 34px; }
    .lp-num { font-size: 38px; }
}

/* =====================================================================
   7. LA LÍNEA DEL DÍA
   ===================================================================== */
.lp-reglas {
    display: flex;
    gap: 0;
    border: var(--lp-borde);
    background: var(--lp-papel-2);
    margin-bottom: 56px;
    /* En un teléfono las seis horas no entran: se desliza con el dedo, y el
       corte de la última es la única señal de que hay más. Apiladas ocuparían
       media pantalla antes de la primera escena. */
    overflow-x: auto;
    scrollbar-width: thin;
}

.lp-regla {
    flex: 1 0 auto;
    min-width: 128px;
    padding: 14px 16px;
    border-right: 1px solid var(--lp-linea);
    font-weight: 600;
    font-size: 14px;
    color: var(--lp-tinta-suave);
    white-space: nowrap;
}

.lp-regla:last-child { border-right: 0; }

.lp-regla b {
    display: block;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -.03em;
    color: var(--lp-tinta);
}

.lp-regla:hover { background: var(--lp-senal); }

/* --- las escenas --- */
.lp-escena {
    display: grid;
    /* `minmax(0, …)` en las dos y no `1fr` pelado: `1fr` es `minmax(auto, 1fr)`
       y ese `auto` es el ancho MÍNIMO DEL CONTENIDO, así que una captura ancha
       estira su columna y desborda la página a lo ancho. Es exactamente lo que
       ya pagó la ficha de producto de la tienda. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 46px;
    align-items: center;
    padding: 44px 0;
    border-top: 1px solid var(--lp-linea);
}

.lp-escena:first-of-type { border-top: 0; padding-top: 0; }

/* Alternadas: la captura cambia de lado en las pares. Es lo que hace que seis
   escenas seguidas no se lean como una lista.

   Y HAY QUE DAR VUELTA TAMBIÉN LAS COLUMNAS, no sólo el orden: `order` cambia
   QUÉ va en cada celda pero no cuánto mide cada una, así que con las
   proporciones fijas la captura caía en la columna ANGOSTA en la mitad de las
   escenas — el sistema se veía diminuto justo donde tiene que leerse.

   Y ES `nth-of-type` Y NO `nth-child`, que es lo que había y se rompió al meter
   las escenas adentro de `.lp-dia`: ahí `.lp-reglas` pasó a ser el primer hijo,
   así que la escena 1 quedó siendo el hijo PAR y las seis se dieron vuelta —la
   primera captura salía chiquita, en la columna angosta—. `nth-of-type` cuenta
   sólo los `<article>`, o sea las escenas, y no le importa qué más haya al lado.
   Lo cazó mirar una captura y no una prueba; por eso ahora hay una que lo
   mide. */
.lp-escena:nth-of-type(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.lp-escena:nth-of-type(even) .lp-escena-texto { order: 2; }

.lp-hora {
    display: inline-block;
    font-weight: 900;
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.05em;
    background: var(--lp-senal);
    padding: 4px 10px;
    margin-bottom: 18px;
}

.lp-escena h3 {
    margin: 0 0 14px;
    font-weight: 900;
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
    line-height: 1.12;
    letter-spacing: -.03em;
}

/* La cita es la voz del comerciante y por eso se dibuja como una cita: es lo
   que hace que la escena sea SU problema y no una descripción de una función. */
.lp-cita {
    margin: 0 0 16px;
    padding-left: 16px;
    border-left: 4px solid var(--lp-azul);
    font-size: 1.05em;
    font-style: italic;
    color: var(--lp-azul);
}

.lp-escena p { margin: 0 0 12px; color: var(--lp-tinta-suave); }
.lp-escena p:last-child { margin-bottom: 0; }
.lp-escena strong { color: var(--lp-tinta); font-weight: 600; }

.lp-captura {
    border: var(--lp-borde);
    background: #fff;
    box-shadow: 10px 10px 0 var(--lp-azul);
    overflow: hidden;
}

.lp-escena:nth-of-type(even) .lp-captura { box-shadow: -10px 10px 0 var(--lp-senal); }

.lp-captura img { width: 100%; height: auto; }

@media (max-width: 860px) {
    /**
     * LAS DOS, Y CON LA MISMA ESPECIFICIDAD QUE LA REGLA QUE PISAN.
     *
     * `.lp-escena:nth-of-type(even)` es (0,2,0) y `.lp-escena` a secas (0,1,0):
     * estar adentro de una media query NO suma nada, así que con la regla
     * suelta las escenas pares se quedaban en DOS COLUMNAS en el celular y la
     * página desbordaba a lo ancho. Es la trampa del logo de la tienda.
     */
    .lp-escena,
    .lp-escena:nth-of-type(even) { grid-template-columns: 1fr; }

    .lp-escena { gap: 26px; padding: 34px 0; }
    /* En una columna el orden lo pone el marcado y la alternancia deja de tener
       sentido: sin esto, en la mitad de las escenas la captura aparece ANTES
       que el texto que la explica. */
    .lp-escena:nth-of-type(even) .lp-escena-texto { order: 0; }
    .lp-captura,
    .lp-escena:nth-of-type(even) .lp-captura { box-shadow: 6px 6px 0 var(--lp-azul); }
}

/* =====================================================================
   8. PARA QUIÉN
   ===================================================================== */
.lp-rubros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: 0;
    border: var(--lp-borde);
}

/* Una grilla con líneas compartidas: los bloques se tocan y las divisiones son
   una sola línea, como una tabla impresa. Con tarjetas separadas y sombra
   volvería el look de plantilla. */
/* La tarjeta es un ENLACE al día de ese rubro: `display: block` porque un `<a>`
   es en línea de fábrica y así el relleno no se aplicaría arriba y abajo. */
.lp-rubro {
    display: block;
    padding: 26px 24px;
    border-right: 1px solid var(--lp-linea);
    border-bottom: 1px solid var(--lp-linea);
}

/* «Ver su día», que es lo único que dice que la tarjeta lleva a algún lado. Sin
   esto se lee como un cuadro de texto y no la toca nadie. */
.lp-rubro-ver {
    display: inline-block;
    margin-top: 12px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--lp-azul);
}

.lp-rubro:hover .lp-rubro-ver { text-decoration: underline; }

.lp-rubro h3 {
    margin: 0 0 8px;
    font-weight: 900;
    font-size: 1.12rem;
    letter-spacing: -.02em;
}

.lp-rubro p { margin: 0; font-size: .95rem; color: var(--lp-tinta-suave); }

.lp-rubro:hover { background: var(--lp-papel-2); }

/* =====================================================================
   9. DIFERENCIALES
   ===================================================================== */
.lp-fuertes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 28px;
}

.lp-fuerte { border-top: var(--lp-borde); padding-top: 18px; }

.lp-fuerte-num {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--lp-azul);
}

.lp-fuerte h3 {
    margin: 6px 0 10px;
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1.15;
    letter-spacing: -.03em;
}

.lp-fuerte p { margin: 0; color: var(--lp-tinta-suave); font-size: .97rem; }

/* =====================================================================
   10. BLOQUES DE COLOR (ayuda y cierre)
   ===================================================================== */
.lp-bloque {
    border: var(--lp-borde);
    padding: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
}

.lp-bloque-azul { background: var(--lp-azul); color: #fff; }
.lp-bloque-azul .lp-bloque-texto p { color: rgba(255, 255, 255, .82); }

.lp-bloque h2 {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: clamp(1.4rem, 3.2vw, 2.1rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.lp-bloque-texto p { margin: 0; max-width: 52ch; color: var(--lp-tinta-suave); }

@media (max-width: 760px) {
    .lp-bloque { grid-template-columns: 1fr; padding: 28px; gap: 22px; }
}

/* --- el cierre --- */
.lp-cierre { background: var(--lp-senal); border-bottom: var(--lp-borde); padding: 72px 0; }
.lp-cierre .lp-titulo { max-width: 20ch; }
.lp-cierre p { color: var(--lp-tinta); opacity: .78; max-width: 50ch; }

/* =====================================================================
   11. PIE
   ===================================================================== */
.lp-pie {
    /* EL HUECO DE ABAJO LO DA EL PIE Y NO EL `body`.
       El botón de WhatsApp es `position: fixed` a 20px del borde y mide 52 de
       alto (56 en el celular): sin este relleno se le monta encima al último
       renglón del pie, que es justamente donde está la ubicación. Puesto en el
       `body`, el hueco quedaría DESPUÉS del pie —o sea abajo de todo— y no
       separaría nada: es la lección que ya pagó la tienda. */
    padding: 34px 0 110px;
    font-size: .9rem;
    color: var(--lp-tinta-suave);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
}

.lp-pie a { border-bottom: 1px solid var(--lp-linea); }
.lp-pie a:hover { border-bottom-color: var(--lp-tinta); }
.lp-pie-sep { margin-left: auto; }

@media (max-width: 640px) {
    .lp-pie-sep { margin-left: 0; }
}

/* =====================================================================
   12. EL BOTÓN FLOTANTE DE WHATSAPP
   ===================================================================== */
.lp-wa-flota {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    color: var(--lp-tinta);
    border: var(--lp-borde);
    box-shadow: 4px 4px 0 var(--lp-tinta);
    padding: 12px 18px;
    min-height: 52px;
    font-weight: 600;
    text-decoration: none;
}

.lp-wa-flota:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--lp-tinta); }

/* En el celular queda el círculo: el rótulo se come el ancho de la pantalla y
   el ícono de WhatsApp lo reconoce todo el mundo. */
@media (max-width: 640px) {
    .lp-wa-flota span { display: none; }
    .lp-wa-flota { padding: 0; width: 56px; height: 56px; justify-content: center; }
}

/* =====================================================================
   13. LA PANTALLA DE DESCARGAS
   =====================================================================
   Usa esta misma hoja y no una propia: es la continuación de la landing y el
   que llega tiene que ver que sigue en el mismo lugar. Lo único que necesita
   de más es un formulario y unos avisos.

   Y VAN ACÁ Y NO EN UN `<style>` DE ESA PANTALLA: una clase que se escribe en
   el marcado y no existe en ninguna hoja sale con el dibujo por defecto del
   navegador —sin ningún error y sin ninguna regla rota—, que es el modo de
   fallar más silencioso que tiene el CSS.
   ===================================================================== */
.lp-aviso {
    border: var(--lp-borde);
    padding: 14px 18px;
    margin: 0 0 26px;
    background: var(--lp-papel-2);
}

.lp-aviso-error { background: #fbeae9; border-color: #a3231c; color: #6d1713; }
.lp-aviso code { background: rgba(21, 25, 30, .08); padding: 1px 5px; }

.lp-form {
    border: var(--lp-borde);
    background: var(--lp-papel-2);
    padding: 28px;
    max-width: 420px;
    display: grid;
    gap: 10px;
}

.lp-form label { font-weight: 600; font-size: .95rem; }

.lp-form input {
    border: var(--lp-borde);
    background: #fff;
    padding: 12px 14px;
    /* 48px de alto y 16px de letra: abajo de eso iOS hace zoom solo al
       enfocar y la pantalla queda corrida con la mitad afuera. */
    min-height: 48px;
    font: inherit;
    font-size: 16px;
    border-radius: 0;
}

.lp-form input:focus { outline: 3px solid var(--lp-senal); outline-offset: 0; }
.lp-form .lp-boton { justify-content: center; margin-top: 6px; }

.lp-notas {
    border-top: var(--lp-borde);
    margin-top: 40px;
    padding-top: 22px;
    max-width: 68ch;
}

.lp-notas h3 { margin: 0 0 12px; font-weight: 900; font-size: 1.05rem; letter-spacing: -.02em; }
.lp-notas ul { margin: 0; padding-left: 20px; color: var(--lp-tinta-suave); }
.lp-notas li { margin-bottom: 8px; }
.lp-notas strong { color: var(--lp-tinta); }

.lp-salir { margin-top: 34px; }

.lp code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: .9em;
    background: rgba(21, 25, 30, .08);
    padding: 1px 5px;
}

@media print {
    .lp-wa-flota, .lp-barra { display: none; }
}

/* =====================================================================
   13. EL RADIO, EN UN SOLO LUGAR
   =====================================================================
   Las seis piezas con caja propia lo llevan juntas: seis declaraciones
   dispersas se separan solas, y el día que el radio cambie quedarían dos
   botones redondeados y uno no.

   VA AL FINAL A PROPÓSITO: `.lp-form input` declara `border-radius: 0` para
   apagar el que el navegador le pone de fábrica, y son la misma especificidad
   (0,1,1) — así que lo que decide es la posición. */
.lp-boton,
.lp-nav .lp-nav-sistema,
.lp-wa-flota,
.lp-rubro,
.lp-fuerte,
.lp-form input,
.lp-chip { border-radius: var(--lp-radio); }

/* =====================================================================
   14. EL SELECTOR DE RUBRO
   ===================================================================== */
.lp-elegir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 44px;
}

.lp-elegir-rotulo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
    margin-right: 4px;
}

.lp-chip {
    display: inline-flex;
    align-items: center;
    border: var(--lp-borde);
    background: var(--lp-papel);
    padding: 9px 16px;
    font-size: 15px;
    font-weight: 600;
    /* 44px de alto: es lo que se toca con el pulgar sin errarle. */
    min-height: 44px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.lp-chip:hover { background: var(--lp-papel-2); }

/* El elegido se distingue por FONDO y no sólo por un borde: en una fila de seis
   iguales, un borde más grueso no se ve de un vistazo. */
.lp-chip-activo,
.lp-chip-activo:hover {
    background: var(--lp-tinta);
    color: var(--lp-papel);
    box-shadow: 3px 3px 0 var(--lp-senal);
}

/* En el celular la fila envuelve sola; lo único que se saca es el rótulo, que
   ahí se lleva un renglón entero para decir dos palabras. */
@media (max-width: 640px) {
    .lp-elegir-rotulo { display: none; }
    .lp-chip { font-size: 14px; padding: 8px 13px; }
}

/**
 * `hidden` VIENE DE LA HOJA DE USUARIO DEL NAVEGADOR, y ésa pierde contra
 * cualquier declaración de esta hoja. Hoy `.lp-dia` no declara `display`, así
 * que funcionaría igual; se declara porque es la forma en que esta página
 * pliega cosas y el día que a `.lp-dia` —o a lo que se agregue— le toque un
 * `display: flex`, el rubro oculto se vería igual y no habría ninguna regla
 * rota que mirar. Es el mismo bug que ya pagaron la tienda y el panel.
 */
[hidden] { display: none !important; }