/* ==========================================================================
   La tienda con el acabado de tech.latamprovider.com
   ==========================================================================
   Se carga la última, después de latam-ui.css y pedidos.css, y por eso manda.
   Lo que toma de tech: la letra Public Sans, las esquinas de 8 px, las
   superficies blancas con líneas de 1px sobre un fondo suave, la banda azul
   con el menú y la portada con banner y oferta del día. Lo que NO toma: sus
   colores (aquí mandan los de LATAM Streaming), sus sombras y sus pesos 700
   y 900. Un solo acento, el azul; el resto del color significa un estado.

   Cada bloque va en el orden en que se ve la página: tokens, cabecera,
   portada, tarjeta, catálogo, ficha, acceso, panel del cliente, pie.
   ========================================================================== */

/* --- 0. Tokens ----------------------------------------------------------- */

:root {
    --ls-fuente: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* El radio de tech, para toda la tienda. marca.css lo fija en 3px para
       el panel de administración, que no carga esta hoja. */
    --radio: 8px;
    --ls-radius: 8px;
    /* Fondo de las imágenes de producto, que casi siempre traen fondo propio
       y quedan mejor sobre un gris apenas más oscuro que la tarjeta. */
    --ls-lienzo: #F5F7FB;
    --ls-acento-fondo: rgba(11, 99, 246, .08);
}

:root[data-theme="dark"] {
    --ls-lienzo: #0B1226;
    --ls-acento-fondo: rgba(34, 211, 238, .1);
}

body,
.pagina-publica,
.pagina-publica input,
.pagina-publica button,
.pagina-publica select,
.pagina-publica textarea,
body > .modal,
.my-modal {
    font-family: var(--ls-fuente);
}

body { font-size: var(--t-3); }

/* Sin negritas del navegador: el peso fuerte de la escala es 600. */
.pagina-publica b,
.pagina-publica strong { font-weight: var(--p-fuerte); }

/* Todo lo que se pulsa o se rellena lleva el radio de la casa. */
.pagina-publica .btn,
.pagina-publica .form-control,
.pagina-publica .form-select,
.pagina-publica .alert,
.pagina-publica .badge,
.pagina-publica .card,
.pagina-publica .list-group-item,
.pagina-publica .page-link,
.pagina-publica .dropdown-menu {
    border-radius: var(--radio);
}

.pagina-publica .badge {
    border-radius: 999px;
    padding: .3em .7em;
    font-weight: var(--p-medio);
}

/* Bootstrap deja el foco en una sombra azul: contorno, no sombra. */
.pagina-publica .form-control:focus,
.pagina-publica .form-select:focus {
    border-color: var(--marca-azul);
    outline: 2px solid var(--marca-azul);
    outline-offset: -1px;
    box-shadow: none;
}

.modal-content,
.my-modal-content { border-radius: var(--radio) !important; }

/* --- 1. Cabecera ---------------------------------------------------------- */

.ls-topbar { font-size: var(--t-2); }

/* El buscador en píldora, como el de tech. La variable es la del tema, que
   gana por especificidad a un border-radius directo. */
.instasearch-form { --search-border-radius: 999px; }

.instasearch-form .instasearch-term {
    height: 44px;
    border-radius: 999px;
    font-size: var(--t-3);
}

/* Ingresar en azul; Registrarse con línea, no en rojo: en esta marca el
   rojo significa «vencido» y no se gasta en un botón. */
#barratieneda-usuario .gt-btn {
    border-radius: var(--radio);
    padding: .55rem 1.1rem;
    font-size: var(--t-3);
    font-weight: var(--p-medio);
    letter-spacing: 0;
}

#barratieneda-usuario .gt-btn.btn-danger {
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    color: var(--ls-text);
}

#barratieneda-usuario .gt-btn.btn-danger:hover,
#barratieneda-usuario .gt-btn.btn-danger:focus-visible {
    border-color: var(--marca-azul);
    color: var(--marca-azul-texto);
    filter: none;
}

:root[data-theme="dark"] #barratieneda-usuario .gt-btn.btn-danger:hover { color: var(--marca-cian); }

.ls-user-balance,
.ls-user-panel,
.ls-user-logout,
.ls-menu-tienda-boton,
.ls-switch-toggle,
.ls-theme-toggle,
.ls-menu,
.ls-vendedor-opciones { border-radius: var(--radio); }

.ls-menu-tienda-boton {
    width: 44px;
    height: 44px;
    border-radius: 999px;
}

/* La banda azul del menú, como en tech: el color de la marca de lado a
   lado, con los enlaces en blanco (5.09 de contraste). tema.css la pinta en
   negro con un selector de dos clases; se iguala y se fuerza. */
.megamenu-section .navbar,
.megamenu-section .navbar.navbar-light {
    background: var(--marca-azul) !important;
    padding: 0 !important;
}

/* Bootstrap pone el contenedor del navbar a envolver y el menú a ancho
   completo: «Categorías» caía a su propia línea. Una sola fila; si los
   enlaces no caben, la fila se desliza de lado en vez de cortarse. */
.megamenu-section .navbar > .megamenu-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
}

.megamenu-section .megamenu.simple,
.megamenu-section .cms-menu-navbar {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    /* El tema lo recortaba (overflow hidden) y la lista de «Más», que cae
       por debajo de la banda, no se veía. */
    overflow: visible;
}

.megamenu-section #menu-main {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    /* Hasta que el guion recoge lo que sobra en «Más», lo que no cabe se
       corta en vez de desbordar la página. Luego el menú queda abierto para
       que la lista de «Más» pueda caer por debajo de la banda. */
    overflow: hidden;
}

.megamenu-section #menu-main.is-listo { overflow: visible; }

.megamenu-section #menu-main > .nav-item { flex: none; display: flex; }

.megamenu-section .nav-link.menu-link {
    display: flex;
    align-items: center;
    padding: .9rem 1rem !important;
    color: #FFFFFF !important;
    font-size: var(--t-3);
    font-weight: var(--p-medio);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Con el id delante para ganarle al tema, que pinta de rojo el enlace al
   pasar el ratón, al enfocarlo y el activo. */
.megamenu-section #menu-main .nav-link.menu-link:hover,
.megamenu-section #menu-main .nav-link.menu-link:focus,
.megamenu-section #menu-main .nav-item.active .nav-link.menu-link {
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF !important;
    outline: none;
}

.megamenu-nav { display: none !important; }

/* «Más», al final de la banda: recoge los enlaces que no caben. Se abre al
   pasar el ratón o con el teclado, como «Categorías». */
.megamenu-section .ls-mas { position: relative; margin-left: auto; }
.megamenu-section .ls-mas.is-vacio { display: none !important; }

.megamenu-section .ls-mas-boton { gap: var(--e-2); }
.megamenu-section .ls-mas-boton .ls-caret { width: 10px; height: 6px; }

.megamenu-section .ls-mas-lista {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1090;
    min-width: 14rem;
    margin: 0;
    padding: var(--e-2) 0;
    list-style: none;
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: 0 0 var(--radio) var(--radio);
}

.megamenu-section .ls-mas:hover .ls-mas-lista,
.megamenu-section .ls-mas:focus-within .ls-mas-lista { display: block; }

.megamenu-section .ls-mas-lista > .nav-item { display: block; }

.megamenu-section #menu-main .ls-mas-lista .nav-link.menu-link {
    justify-content: flex-start;
    padding: var(--e-2) var(--e-4) !important;
    color: var(--ls-text) !important;
    font-weight: var(--p-normal);
    text-align: left;
}

.megamenu-section #menu-main .ls-mas-lista .nav-link.menu-link:hover,
.megamenu-section #menu-main .ls-mas-lista .nav-link.menu-link:focus {
    background: var(--ls-acento-fondo);
    color: var(--ls-text) !important;
}

/* «Categorías» a la izquierda de la banda, con su lista desplegable. Se
   abre al pasar el ratón o con el teclado; sin JavaScript. */
.ls-catmenu {
    position: relative;
    flex: none;
    display: flex;
}

.ls-catmenu-boton {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 0 1.25rem;
    margin: 0;
    border: 0;
    border-right: var(--linea) solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
    font: inherit;
    font-size: var(--t-3);
    font-weight: var(--p-fuerte);
    cursor: pointer;
    white-space: nowrap;
}

.ls-catmenu-boton .ls-caret { width: 10px; height: 6px; }

.ls-catmenu-lista {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1090;
    min-width: 17rem;
    margin: 0;
    padding: var(--e-2) 0;
    list-style: none;
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: 0 0 var(--radio) var(--radio);
}

.ls-catmenu:hover .ls-catmenu-lista,
.ls-catmenu:focus-within .ls-catmenu-lista { display: block; }

.ls-catmenu-lista a {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-4);
    color: var(--ls-text);
    font-size: var(--t-3);
    text-decoration: none;
}

.ls-catmenu-lista a:hover,
.ls-catmenu-lista a:focus-visible {
    background: var(--ls-acento-fondo);
    color: var(--ls-text);
    text-decoration: none;
    outline: none;
}

.ls-catmenu-lista img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background: #FFFFFF;
    flex: none;
}

.ls-catmenu-lista .ls-catmenu-todas {
    margin-top: var(--e-1);
    padding-top: var(--e-3);
    border-top: var(--linea) solid var(--ls-border);
    color: var(--marca-azul-texto);
    font-weight: var(--p-medio);
}

:root[data-theme="dark"] .ls-catmenu-lista .ls-catmenu-todas { color: var(--marca-cian); }

/* El menú del teléfono, con las categorías debajo de los enlaces. */
.ls-menu-movil-panel { border-radius: 0 var(--radio) var(--radio) 0; }

.ls-menu-movil-grupo {
    padding: var(--e-4) 1.1rem var(--e-1);
    font-size: var(--t-1);
    color: var(--ls-muted);
}

.ls-menu-movil-panel a img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 6px;
    background: #FFFFFF;
}

/* --- 2. La banda del título (migas) --------------------------------------
   Antes era una franja con fondo propio y tres imágenes decorativas del tema
   viejo. Ahora es una línea: las migas en gris y el título debajo. */

.breadcrumb-wrapper {
    padding: var(--e-5) 0 var(--e-2);
    margin: 0;
    background: transparent;
    border: 0;
}

.breadcrumb-wrapper .page-heading h1 {
    margin: var(--e-1) 0 0;
    font-size: var(--t-6);
    font-weight: var(--p-fuerte);
    letter-spacing: -.01em;
}

.breadcrumb-wrapper .breadcrumb-items {
    font-size: var(--t-2);
    color: var(--ls-muted);
}

.breadcrumb-wrapper .breadcrumb-items a { color: var(--ls-muted); }
.breadcrumb-wrapper .breadcrumb-items a:hover { color: var(--marca-azul-texto); }

.ls-boton-catalogo {
    border-radius: var(--radio);
    font-weight: var(--p-medio);
}

/* --- 3. Portada ----------------------------------------------------------- */

.ls-portada {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--e-4);
    margin: var(--e-5) 0 var(--e-4);
}

/* El banner: tinta de la marca con el texto en Humo, como el pie. Sin foto
   de modelo ni degradado: el titular y el botón hacen el trabajo. */
.ls-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    align-items: center;
    gap: var(--e-5);
    padding: var(--e-6);
    border-radius: var(--radio);
    background: var(--marca-tinta);
    color: var(--marca-humo);
}

:root[data-theme="dark"] .ls-hero {
    background: var(--marca-grafito);
    border: var(--linea) solid var(--ls-border);
}

.ls-hero-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--e-4);
    min-width: 0;
}

/* --- El anillo 3D del banner ---------------------------------------------
   Los logos de las plataformas, cada uno en una teja, repartidos en un
   cilindro que gira sin parar. Las tejas de atrás se esconden
   (backface-visibility): quedan solo las que miran al frente, como en un
   carrusel. El eje se inclina con el ratón desde latam-ui.js.
   El recorte va en esta caja y no en el banner: recortar capas 3D con
   esquinas redondeadas hace que Chrome pinte rayas de color en el borde. */

.ls-hero-3d {
    --ls-anillo-n: 14;
    --ls-anillo-radio: 205px;
    --ls-anillo-teja: 92px;
    --ls-eje-x: 12deg;
    --ls-eje-y: 0deg;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20rem;
    margin-right: calc(-1 * var(--e-6));
    overflow: hidden;
    perspective: 900px;
    perspective-origin: 50% 45%;
}

.ls-anillo-eje {
    transform-style: preserve-3d;
    transform: rotateX(var(--ls-eje-x)) rotateY(var(--ls-eje-y));
    transition: transform .4s ease;
}

.ls-anillo {
    position: relative;
    width: var(--ls-anillo-teja);
    height: var(--ls-anillo-teja);
    transform-style: preserve-3d;
    animation: ls-anillo-gira 10s linear infinite;
}

/* El logo es el fondo de la teja (--ls-logo lo pone cada una en su style):
   con un <img> dentro, Safari en el iPhone pintaba la teja en blanco. */
.ls-anillo-teja {
    --ls-logo: none;
    position: absolute;
    inset: 0;
    padding: .8rem;
    background: #FFFFFF var(--ls-logo) center / contain no-repeat;
    background-origin: content-box;
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(calc(var(--i) * 360deg / var(--ls-anillo-n))) translateZ(var(--ls-anillo-radio));
}

@keyframes ls-anillo-gira {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ls-anillo { animation: none; }
    .ls-anillo-eje { transition: none; }
}

.ls-hero-cintillo {
    margin: 0;
    font-size: var(--t-2);
    color: var(--marca-cian);
    font-weight: var(--p-medio);
}

.ls-hero h1 {
    max-width: 18ch;
    margin: 0;
    font-size: var(--t-7);
    font-weight: var(--p-fuerte);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--marca-humo);
}

.ls-hero p {
    max-width: 40rem;
    margin: 0;
    font-size: var(--t-4);
    line-height: 1.6;
    color: #93A2C4;
}

.ls-hero-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    margin-top: var(--e-2);
}

.ls-hero-boton,
.ls-hero-boton--linea {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-5);
    border: var(--linea) solid var(--marca-azul);
    border-radius: var(--radio);
    background: var(--marca-azul);
    color: #FFFFFF;
    font-size: var(--t-3);
    font-weight: var(--p-medio);
    text-decoration: none;
}

.ls-hero-boton:hover,
.ls-hero-boton:focus-visible {
    background: var(--marca-azul-texto);
    border-color: var(--marca-azul-texto);
    color: #FFFFFF;
    text-decoration: none;
}

.ls-hero-boton--linea {
    background: transparent;
    border-color: rgba(242, 246, 255, .35);
    color: var(--marca-humo);
}

.ls-hero-boton--linea:hover,
.ls-hero-boton--linea:focus-visible {
    border-color: var(--marca-humo);
    color: var(--marca-humo);
    text-decoration: none;
}

/* Tres garantías en una fila dividida por líneas, no tres tarjetas. */
.ls-hero-puntos {
    display: flex;
    flex-wrap: wrap;
    margin: var(--e-3) 0 0;
    padding: var(--e-4) 0 0;
    border-top: var(--linea) solid rgba(242, 246, 255, .18);
    list-style: none;
    font-size: var(--t-2);
    color: #93A2C4;
}

.ls-hero-puntos li {
    padding-right: var(--e-4);
    margin-right: var(--e-4);
    border-right: var(--linea) solid rgba(242, 246, 255, .18);
}

.ls-hero-puntos li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.ls-hero-puntos strong {
    display: block;
    margin-bottom: 2px;
    color: var(--marca-humo);
    font-weight: var(--p-medio);
}

/* La oferta del día: la tarjeta azul de tech, con la tarjeta blanca
   dentro. Es el único bloque de la portada en el color del acento, y por
   eso llama la atención sin gritar. */
.ls-oferta {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    padding: var(--e-4);
    border-radius: var(--radio);
    background: var(--marca-azul);
    color: #FFFFFF;
}

.ls-oferta-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
}

.ls-oferta-cab h2 {
    margin: 0;
    font-size: var(--t-4);
    font-weight: var(--p-fuerte);
    color: #FFFFFF;
}

.ls-oferta-marca {
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--marca-cian);
    color: var(--marca-tinta);
    font-size: var(--t-1);
    font-weight: var(--p-fuerte);
}

.ls-oferta-tarjeta {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--e-4);
    border-radius: var(--radio);
    background: var(--ls-surface);
    color: var(--ls-text);
}

.ls-oferta-imagen {
    display: block;
    aspect-ratio: 1;
    margin-bottom: var(--e-3);
    border-radius: var(--radio);
    background: var(--ls-lienzo);
    overflow: hidden;
}

.ls-oferta-imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ls-oferta-nombre {
    display: block;
    margin: 0 0 var(--e-2);
    font-size: var(--t-3);
    font-weight: var(--p-fuerte);
    line-height: 1.35;
    color: var(--ls-text);
    text-decoration: none;
}

.ls-oferta-nombre:hover { color: var(--marca-azul-texto); text-decoration: none; }

.ls-oferta-precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e-2);
    margin-bottom: var(--e-3);
    font-size: var(--t-5);
    font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums;
}

.ls-oferta-precio del {
    font-size: var(--t-2);
    font-weight: var(--p-normal);
    color: var(--ls-muted);
}

.ls-oferta-ahorro {
    font-size: var(--t-2);
    font-weight: var(--p-medio);
    color: var(--marca-verde-texto);
}

:root[data-theme="dark"] .ls-oferta-ahorro { color: var(--marca-verde); }

.ls-oferta-tarjeta .btn-comprar { margin-top: auto; width: 100%; }

/* --- La cinta de categorías, en 3D ------------------------------------------
   Dos efectos, los dos sin sombras ni degradados: la profundidad la dan la
   perspectiva y un canto visible, no un difuminado.

   1. Mientras la cinta corre, cada teja gira según dónde esté: de frente en
      el centro y de canto hacia los bordes, como un coverflow. El ángulo y
      la altura los pone latam-ui.js a cada fotograma (--ls-giro, --ls-alto).
   2. Al pasar el ratón, la teja se inclina hacia el cursor (--ls-tilt-x/-y)
      y el logo se despega del fondo (--ls-logo-z).

   Con «reducir movimiento» activado, nada de esto ocurre. */

@property --ls-tilt-x { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ls-tilt-y { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* Este sí se hereda: lo fija la teja y lo lee la imagen de dentro. */
@property --ls-logo-z { syntax: '<length>'; inherits: true; initial-value: 0px; }

.ls-cats {
    --ls-cats-tam: 128px;
    --ls-cats-canto: #C9D4EA;
    margin: 0 0 var(--e-5);
}

:root[data-theme="dark"] .ls-cats { --ls-cats-canto: #0A1330; }

.ls-cats-viewport {
    perspective: 1100px;
    perspective-origin: 50% 40%;
    /* Sitio para que las tejas inclinadas no se corten arriba ni abajo: el
       recorte de la cinta respeta el relleno. */
    padding: var(--e-5) 0 var(--e-3);
    margin: calc(-1 * var(--e-5)) 0 calc(-1 * var(--e-3));
}

.ls-cats-track,
.ls-cats-item { transform-style: preserve-3d; }

.ls-cats-item > a {
    /* Los valores de reposo; el guion los cambia en línea a cada fotograma. */
    --ls-giro: 0deg;
    --ls-alto: 0px;
    --ls-tilt-x: 0deg;
    --ls-tilt-y: 0deg;
    --ls-logo-z: 0px;
    position: relative;
    width: var(--ls-cats-tam);
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--ls-giro) + var(--ls-tilt-y))) rotateX(var(--ls-tilt-x)) translateZ(var(--ls-alto));
    transition: --ls-tilt-x .18s ease, --ls-tilt-y .18s ease;
    will-change: transform;
}

/* El canto: una placa detrás, un poco más abajo, que asoma al inclinarse. */
.ls-cats-item > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--ls-cats-tam);
    border-radius: var(--radio);
    background: var(--ls-cats-canto);
    transform: translateZ(-10px) translateY(7px);
}

.ls-cats-disc {
    width: var(--ls-cats-tam);
    height: var(--ls-cats-tam);
    border-radius: var(--radio);
    border: var(--linea) solid var(--ls-border);
    /* Sin recorte: con overflow oculto el navegador aplana el 3D y el logo
       no puede despegarse. La imagen ya cabe por su max-width. */
    overflow: visible;
    transform-style: preserve-3d;
}

.ls-cats-disc img {
    transform: translateZ(var(--ls-logo-z));
    transition: transform .18s ease;
}

.ls-cats-item > a.is-3d { --ls-logo-z: 26px; }

@media (max-width: 767.98px) {
    /* El tema quita el margen del contenedor del pie en el teléfono y las
       columnas quedaban pegadas al borde; la franja de abajo sí lo tenía. */
    .footer-main .ls-pie { padding: 0 var(--e-4); }

    .ls-cats { --ls-cats-tam: 96px; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-cats-item > a { transform: none; transition: none; }
    .ls-cats-item > a::before { display: none; }
    .ls-cats-disc img { transform: none; }
}

/* Cada sección de productos en su superficie: título a la izquierda y
   «Ver todo» a la derecha, como en tech. */
.ls-seccion {
    margin-bottom: var(--e-5);
    padding: var(--e-5);
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
}

.ls-seccion-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}

.ls-seccion-cab h2 {
    margin: 0;
    font-size: var(--t-5);
    font-weight: var(--p-fuerte);
    color: var(--ls-text);
}

.ls-seccion-enlace {
    font-size: var(--t-2);
    font-weight: var(--p-medio);
    color: var(--marca-azul-texto);
    text-decoration: none;
    white-space: nowrap;
}

.ls-seccion-enlace:hover { color: var(--marca-azul-texto); text-decoration: underline; }
:root[data-theme="dark"] .ls-seccion-enlace { color: var(--marca-cian); }

.ls-seccion-vacia {
    margin: 0;
    padding: var(--e-6) 0;
    text-align: center;
    color: var(--ls-muted);
}

/* Con la oferta al lado, el banner no da para texto y anillo en columnas
   hasta los 1200 px: antes de eso el anillo pasa arriba del texto. */
@media (max-width: 1199.98px) {
    .ls-hero { grid-template-columns: 1fr; }
    .ls-hero-3d { order: -1; height: 11rem; margin-right: 0; --ls-anillo-radio: 170px; --ls-anillo-teja: 76px; }
}

@media (max-width: 991.98px) {
    .ls-portada { grid-template-columns: 1fr; }
    .ls-hero { padding: var(--e-6) var(--e-5); }
    .ls-hero h1 { font-size: var(--t-6); }
    /* El anillo, más pequeño. */
    .ls-hero-3d { height: 10rem; --ls-anillo-radio: 150px; --ls-anillo-teja: 66px; }
    .ls-hero-puntos li { flex-basis: 100%; padding: var(--e-2) 0; margin: 0; border-right: 0; border-bottom: var(--linea) solid rgba(242, 246, 255, .18); }
    .ls-hero-puntos li:last-child { border-bottom: 0; }
    .ls-hero-puntos strong { display: inline; margin-right: var(--e-2); }
}

@media (max-width: 575.98px) {
    .ls-portada { margin-top: var(--e-4); }
    .ls-hero { padding: var(--e-5) var(--e-4); }
    .ls-hero-3d { height: 9rem; --ls-anillo-radio: 128px; --ls-anillo-teja: 58px; }
    .ls-seccion { padding: var(--e-4); }
    .ls-seccion-cab h2 { font-size: var(--t-4); }
}

/* --- 4. La rejilla y la tarjeta de producto --------------------------------
   La rejilla es propia, no la de tema.css: sus anchos por columnas y sus
   márgenes negativos no dejaban poner un hueco limpio entre tarjetas. La
   tarjeta sigue siendo `.art` con sus clases de siempre, porque el guion
   de compra y las cintas cuelgan de ellas; solo cambia cómo se ve. */

.ls-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    /* Sin huecos: las tarjetas se separan con una línea, no con aire. */
    gap: 0;
}

/* En el catálogo, tres por fila en un portátil y cuatro en pantallas
   anchas: Felix quería las fotos más grandes que en la portada. */
.ls-rejilla--ancha { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* En tablet, tres por fila en vez de dos. Va después de la regla base
   para ganarle a igual especificidad. */
@media (max-width: 1199.98px) {
    .ls-rejilla--ancha { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
}

@media (max-width: 575.98px) {
    .ls-rejilla,
    .ls-rejilla--ancha {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ls-rejilla > .art {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    /* Sin esto la tarjeta no baja de lo que mide su línea más larga y la
       rejilla pierde una columna. */
    min-width: 0;
    /* Cada tarjeta lleva su borde y pisa un píxel a la vecina: entre dos
       queda una sola línea, y el marco del ratón sale entero. */
    margin: 0 calc(-1 * var(--linea)) calc(-1 * var(--linea)) 0;
    padding: 0;
    border: var(--linea) solid var(--ls-border);
    border-radius: 0;
    background: var(--ls-surface);
    overflow: hidden;
}

/* En las secciones de la portada las tarjetas van sin líneas, como en tech:
   la caja de la sección ya las agrupa y solo se enmarca la que se toca. */
.ls-seccion .ls-rejilla > .art { border-color: transparent; }

/* El marco azul al pasar el ratón, como en tech. Se levanta (z-index)
   para que sus cuatro lados pisen las líneas de las vecinas. */
.ls-rejilla > .art:hover,
.ls-rejilla > .art:focus-within { border-color: var(--marca-azul); z-index: 1; }

:root[data-theme="dark"] .ls-rejilla > .art:hover,
:root[data-theme="dark"] .ls-rejilla > .art:focus-within { border-color: var(--marca-cian); }

.ls-rejilla .art-picture-block {
    width: auto;
    max-width: none;
    margin: 0;
    background: var(--ls-surface);
}

.ls-rejilla .art-picture-block img {
    padding: var(--e-2);
    object-fit: contain;
}

/* La cinta diagonal pasa a ser una pastilla en la esquina de la imagen:
   dice lo mismo, con los mismos colores, sin tapar el producto. */
.ls-rejilla .cinta-izquierda {
    top: var(--e-2);
    left: var(--e-2);
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 2;
}

.ls-rejilla .cinta-color {
    position: static;
    width: auto;
    padding: .2rem .6rem;
    border-radius: 999px;
    transform: none !important;
    text-shadow: none;
    font-size: var(--t-1);
    font-weight: var(--p-fuerte);
    line-height: 1.5;
    white-space: nowrap;
}

/* El pliegue de la cinta (dos triángulos que dibujaba el tema) ya no
   tiene cinta que plegar. */
.ls-rejilla .cinta-color::before,
.ls-rejilla .cinta-color::after,
.ls-rejilla .cinta-izquierda::before,
.ls-rejilla .cinta-izquierda::after { display: none; }

/* Los tres accesos (condiciones, información, cómo se pide) como botones
   redondos sobre la imagen, a la derecha. */
.ls-rejilla .art-personalizado {
    top: var(--e-2);
    right: var(--e-2);
    width: auto;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
    transform: none !important;
    opacity: 1 !important;
    z-index: 2;
}

.ls-rejilla .art-personalizado a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: var(--linea) solid var(--ls-border);
    border-radius: 50%;
    background: var(--ls-surface);
    color: var(--ls-muted);
    font-size: 13px;
    text-decoration: none;
}

.ls-rejilla .art-personalizado a:hover {
    border-color: var(--marca-azul);
    color: var(--marca-azul-texto);
}

/* El tema daba 17 px al icono; un paso de la escala. */
.ls-rejilla .art-personalizado-icon { font-size: var(--t-2); }

/* Con ratón, los tres accesos aparecen al enmarcar la tarjeta, como los
   iconos de tech; en el teléfono no hay ratón y se quedan a la vista. */
@media (hover: hover) {
    .ls-rejilla .art-personalizado { opacity: 0 !important; transition: opacity .15s ease; }
    .ls-rejilla > .art:hover .art-personalizado,
    .ls-rejilla > .art:focus-within .art-personalizado { opacity: 1 !important; }
}

/* «Nuevo» y «Más bajo» van sobre la foto, bajo la pastilla de stock. El
   descuento no: va junto al precio, que es a lo que se refiere. */
.ls-rejilla .ls-etiquetas {
    position: absolute;
    top: 2.6rem;
    left: var(--e-2);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e-1);
    margin: 0;
}

/* Sobre una foto, la etiqueta sin fondo no se leería. */
.ls-rejilla .ls-etiqueta--barato { background: var(--ls-surface); }

/* El nombre en peso medio y en caja normal (titulo_producto): en
   mayúsculas y negrita tapaba al precio, que es lo que manda. */
.ls-rejilla .art-name {
    margin: var(--e-2) var(--e-3) 0;
    font-size: var(--t-3);
    /* latam-ui pone 600 !important a todo h3 de la tienda; aquí no. */
    font-weight: var(--p-medio) !important;
    line-height: 1.35;
    min-height: calc(var(--t-3) * 1.35 * 2);
    text-transform: none;
}

.ls-rejilla .art-name > a {
    color: var(--ls-text);
    text-decoration: none;
}

.ls-rejilla .art-name > a:hover { color: var(--marca-azul-texto); }

/* Quién vende, en gris bajo el nombre; sin el rótulo «Proveedor». */
.ls-rejilla .art-proveedor {
    /* latam-ui lo centra como hijo del flex (align-self); aquí ocupa su
       línea entera y se alinea con el nombre. */
    align-self: stretch;
    margin: var(--e-1) var(--e-3) 0;
    font-size: var(--t-1);
    line-height: 1.4;
    color: var(--ls-muted);
    text-align: left;
}

.ls-rejilla .art-proveedor strong { font-weight: var(--p-normal); }
.ls-rejilla .art-proveedor-rotulo { display: none; }

.ls-rejilla .art-escasez {
    margin: var(--e-1) var(--e-3) 0;
    font-size: var(--t-1);
    line-height: 1.4;
    color: var(--ls-muted);
}

/* El precio manda: un paso más grande, en azul, con el de antes tachado
   en gris y la rebaja como pastilla al lado. */
.ls-rejilla .art-price-block {
    margin: var(--e-2) var(--e-3) 0;
}

.ls-rejilla .art-price-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-1) var(--e-2);
    font-size: var(--t-5);
    font-weight: var(--p-fuerte);
    line-height: 1.2;
    color: var(--marca-azul-texto);
}

.ls-rejilla .art-price-value .ls-precio-antes {
    margin: 0;
    font-weight: var(--p-normal);
    color: var(--ls-muted);
}

.ls-rejilla .art-price-value .ls-etiqueta {
    align-self: center;
    line-height: 1.35;
}

/* La línea pequeña: la otra moneda y el anzuelo del plan. */
.ls-rejilla .art-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--e-2);
    margin: var(--e-1) var(--e-3) var(--e-2);
    font-size: var(--t-1);
    line-height: 1.4;
    color: var(--ls-muted);
}

:root[data-theme="dark"] .ls-rejilla .art-price-value { color: var(--marca-cian); }

/* El botón, siempre visible y dentro del flujo de la tarjeta: tema.css lo
   escondía debajo hasta pasar el ratón, que en el teléfono no existe. */
.ls-rejilla .art-drop {
    position: static;
    margin-top: auto;
    padding: 0 var(--e-3) var(--e-3);
    background: transparent;
    clip-path: none;
    opacity: 1;
    visibility: visible;
    z-index: auto;
    inset: auto;
}

.ls-rejilla .btn-comprar,
.btn-comprar {
    border-radius: var(--radio);
    font-size: var(--t-3);
    font-weight: var(--p-medio);
    /* «COMPRAR» a gritos no vende más; en tech va en caja normal. */
    text-transform: none;
    letter-spacing: 0;
}

.ls-rejilla .btn-comprar {
    width: 100%;
    min-width: 0;
    padding: .55rem var(--e-3);
}

/* «Nuevo», «-29 %», «Oferta»: pastillas, como las de tech. */
.ls-etiqueta { border-radius: 999px; padding: .2rem .6rem; }

/* El precio tachado iba en .8em (9,6 y 12,8 px según dónde): un paso de la
   escala, siempre el mismo. */
.ls-precio-antes { font-size: var(--t-1); }

/* --- 5. Catálogo: categorías a la izquierda, rejilla a la derecha -------- */

.ls-catalogo {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--e-5);
    margin: var(--e-5) 0 var(--e-7);
}

/* La columna de la rejilla no puede heredar el ancho de la fila de
   pastillas (que se desliza): sin esto, en el teléfono medía 1300 px. */
.ls-catalogo > * { min-width: 0; }

.ls-catalogo-lateral {
    align-self: start;
    position: sticky;
    top: var(--e-4);
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
    overflow: hidden;
}

.ls-catalogo-lateral h2 {
    margin: 0;
    padding: var(--e-3) var(--e-4);
    border-bottom: var(--linea) solid var(--ls-border);
    font-size: var(--t-3);
    font-weight: var(--p-fuerte);
    color: var(--ls-text);
}

.ls-catalogo-lista {
    margin: 0;
    padding: var(--e-2) 0;
    list-style: none;
}

.ls-catalogo-lista a {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-4);
    color: var(--ls-text);
    font-size: var(--t-3);
    text-decoration: none;
}

.ls-catalogo-lista a:hover { background: var(--ls-acento-fondo); color: var(--ls-text); text-decoration: none; }

.ls-catalogo-lista a.is-actual {
    background: var(--ls-acento-fondo);
    color: var(--marca-azul-texto);
    font-weight: var(--p-medio);
}

:root[data-theme="dark"] .ls-catalogo-lista a.is-actual { color: var(--marca-cian); }

.ls-catalogo-lista img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    border-radius: 6px;
    background: #FFFFFF;
    flex: none;
}

.ls-catalogo-lista span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ls-catalogo-lista small {
    font-size: var(--t-1);
    color: var(--ls-muted);
    font-variant-numeric: tabular-nums;
}

.ls-catalogo-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    margin-bottom: var(--e-4);
}

.ls-catalogo-cab h1 {
    margin: 0;
    font-size: var(--t-6);
    font-weight: var(--p-fuerte);
    letter-spacing: -.01em;
    color: var(--ls-text);
}

.ls-catalogo-cab p {
    margin: 0;
    font-size: var(--t-2);
    color: var(--ls-muted);
}

/* En el teléfono las categorías son una fila de pastillas que se desliza. */
.ls-chips {
    display: none;
    gap: var(--e-2);
    margin-bottom: var(--e-4);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ls-chips::-webkit-scrollbar { display: none; }

.ls-chips a {
    flex: none;
    padding: var(--e-1) var(--e-3);
    border: var(--linea) solid var(--ls-border);
    border-radius: 999px;
    background: var(--ls-surface);
    color: var(--ls-text);
    font-size: var(--t-2);
    text-decoration: none;
    white-space: nowrap;
}

.ls-chips a.is-actual {
    background: var(--marca-azul);
    border-color: var(--marca-azul);
    color: #FFFFFF;
}

.ls-catalogo-vacio {
    padding: var(--e-7) var(--e-4);
    text-align: center;
    color: var(--ls-muted);
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
}

.ls-catalogo-paginas { margin-top: var(--e-5); }

@media (max-width: 991.98px) {
    .ls-catalogo { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--e-4); }
    .ls-catalogo-lateral { display: none; }
    .ls-chips { display: flex; }
}

/* --- 6. La ficha del producto --------------------------------------------- */

.ls-ficha {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e-6);
    margin: var(--e-5) 0;
    padding: var(--e-6);
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
}

.ls-ficha-imagen {
    aspect-ratio: 1;
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
    background: var(--ls-lienzo);
    overflow: hidden;
}

.ls-ficha-imagen img {
    width: 100%;
    height: 100%;
    padding: var(--e-4);
    object-fit: contain;
}

.ls-ficha-cintillo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin: 0 0 var(--e-3);
    font-size: var(--t-2);
    color: var(--ls-muted);
}

.ls-ficha-cintillo a { color: var(--marca-azul-texto); text-decoration: none; }
.ls-ficha-cintillo a:hover { text-decoration: underline; }
:root[data-theme="dark"] .ls-ficha-cintillo a { color: var(--marca-cian); }

.ls-ficha h1 {
    margin: 0 0 var(--e-3);
    font-size: var(--t-6);
    font-weight: var(--p-fuerte);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--ls-text);
    overflow-wrap: anywhere;
}

.ls-ficha .art-proveedor { margin: 0 0 var(--e-4); font-size: var(--t-2); }

.ls-ficha-precio {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-3);
    margin: 0 0 var(--e-2);
    font-size: var(--t-7);
    font-weight: var(--p-fuerte);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--ls-text);
    font-variant-numeric: tabular-nums;
}

.ls-ficha-precio del {
    font-size: var(--t-4);
    font-weight: var(--p-normal);
    letter-spacing: 0;
    color: var(--ls-muted);
}

.ls-ficha-equivale {
    margin: 0 0 var(--e-4);
    font-size: var(--t-2);
    color: var(--ls-muted);
}

.ls-ficha-equivale .ls-gancho-plan { display: block; margin-top: var(--e-1); }

.ls-ficha .art-ficha { margin: 0 0 var(--e-5); }

.ls-ficha-accion .btn-comprar {
    width: 100%;
    padding: var(--e-3) var(--e-5);
    font-size: var(--t-4);
}

.ls-ficha-enlaces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-4);
    margin: var(--e-3) 0 0;
    font-size: var(--t-2);
}

.ls-ficha-enlaces a {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    color: var(--marca-azul-texto);
    text-decoration: none;
}

.ls-ficha-enlaces a:hover { text-decoration: underline; }
:root[data-theme="dark"] .ls-ficha-enlaces a { color: var(--marca-cian); }

.ls-ficha-descripcion {
    margin-bottom: var(--e-5);
    padding: var(--e-5);
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
}

.ls-ficha-descripcion h2 {
    margin: 0 0 var(--e-3);
    padding-bottom: var(--e-2);
    border-bottom: var(--linea) solid var(--ls-border);
    font-size: var(--t-4);
    font-weight: var(--p-fuerte);
    color: var(--ls-text);
}

.ls-ficha-descripcion-texto {
    font-size: var(--t-3);
    line-height: 1.7;
    color: var(--ls-text);
    white-space: pre-line;
}

@media (max-width: 767.98px) {
    .ls-ficha { grid-template-columns: 1fr; gap: var(--e-4); padding: var(--e-4); margin-top: var(--e-4); }
    .ls-ficha h1 { font-size: var(--t-5); }
    .ls-ficha-precio { font-size: var(--t-6); }
}

/* --- 7. Ingresar y registrarse ---------------------------------------------
   Como el acceso de tech: dos mitades, la marca a un lado y el formulario al
   otro, en una superficie. Sin la foto del modelo: el lado de la marca lleva
   el logo y lo que se gana con la cuenta. */

.ls-acceso {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    width: min(64rem, calc(100% - 2rem));
    margin: var(--e-6) auto var(--e-7);
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
    overflow: hidden;
}

.ls-acceso-marca {
    display: flex;
    flex-direction: column;
    padding: var(--e-6);
    background: var(--marca-tinta);
    color: var(--marca-humo);
}

:root[data-theme="dark"] .ls-acceso-marca { background: var(--marca-grafito); }

.ls-acceso-logo {
    display: block;
    width: 11rem;
    height: auto;
    margin-bottom: var(--e-6);
}

.ls-acceso-marca h2 {
    margin: 0 0 var(--e-4);
    font-size: var(--t-5);
    font-weight: var(--p-fuerte);
    color: var(--marca-humo);
}

.ls-acceso-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ls-acceso-lista li {
    padding: var(--e-3) 0;
    border-top: var(--linea) solid rgba(242, 246, 255, .14);
    font-size: var(--t-3);
    color: #DCE4F5;
}

.ls-acceso-nota {
    margin: auto 0 0;
    padding-top: var(--e-5);
    font-size: var(--t-2);
    color: #93A2C4;
}

.ls-acceso-nota a { color: var(--marca-humo); text-decoration: none; }
.ls-acceso-nota a:hover { text-decoration: underline; color: var(--marca-humo); }

.ls-acceso-olvido {
    font-size: var(--t-2);
    color: var(--marca-azul-texto);
    text-decoration: none;
}

.ls-acceso-olvido:hover { text-decoration: underline; }
:root[data-theme="dark"] .ls-acceso-olvido { color: var(--marca-cian); }

.ls-acceso-form {
    padding: var(--e-6);
}

.ls-acceso-form .inicio-sesion-formulario {
    align-items: stretch;
    max-width: 26rem;
    margin: 0 auto;
}

.ls-acceso-form .inicio-sesion-formulario > h3 { display: none; }

.ls-acceso-form .inicio-sesion-titulo {
    margin: 0 0 var(--e-1);
    font-size: var(--t-6);
    font-weight: var(--p-fuerte);
    text-align: left;
    color: var(--ls-text);
}

.ls-acceso-entrada {
    margin: 0 0 var(--e-5);
    font-size: var(--t-3);
    color: var(--ls-muted);
}

.ls-acceso-form .form-control,
.ls-acceso-form .form-select {
    min-height: 44px;
    border-radius: var(--radio);
}

.ls-acceso-form .btn-login {
    padding: var(--e-3) var(--e-5);
    border: 0;
    border-radius: var(--radio);
    background: var(--marca-azul);
    color: #FFFFFF;
    font-size: var(--t-3);
    font-weight: var(--p-medio);
}

.ls-acceso-form .btn-login:hover,
.ls-acceso-form .btn-login:focus-visible {
    background: var(--marca-azul-texto);
    color: #FFFFFF;
}

.ls-acceso-form .ls-boton-google { border-radius: var(--radio); }

.ls-acceso-pie {
    margin: var(--e-5) 0 0;
    padding-top: var(--e-4);
    border-top: var(--linea) solid var(--ls-border);
    font-size: var(--t-2);
    color: var(--ls-muted);
    text-align: center;
}

.ls-acceso-pie a {
    color: var(--marca-azul-texto);
    font-weight: var(--p-medio);
    text-decoration: none;
}

.ls-acceso-pie a:hover { text-decoration: underline; }
:root[data-theme="dark"] .ls-acceso-pie a { color: var(--marca-cian); }

/* El tema traía una foto de fondo en el acceso: fuera. */
.inicio-sesion-contenedor { background: none !important; }
.inicio-sesion-contenido { padding-bottom: 0 !important; }

@media (max-width: 767.98px) {
    .ls-acceso { grid-template-columns: 1fr; margin: var(--e-4) auto var(--e-6); }
    .ls-acceso-marca { flex-direction: row; align-items: center; gap: var(--e-4); padding: var(--e-4); }
    .ls-acceso-logo { width: 8rem; margin: 0; }
    .ls-acceso-marca h2 { margin: 0; font-size: var(--t-4); }
    .ls-acceso-lista, .ls-acceso-nota { display: none; }
    .ls-acceso-form { padding: var(--e-5) var(--e-4); }
}

/* --- 8. El panel del cliente ------------------------------------------------
   Barra lateral con la persona arriba y una superficie de contenido, como el
   panel de vendedor. */

.dashboard-container { gap: var(--e-5); }

.dashboard-container .sidebar {
    flex-basis: 16rem;
    width: 16rem;
    gap: 2px;
    padding: var(--e-4);
    border-radius: var(--radio);
}

.dashboard-container .sidebar .user-info {
    flex-direction: row;
    align-items: center;
    gap: var(--e-3);
    padding-bottom: var(--e-4);
    margin-bottom: var(--e-3);
    text-align: left;
}

.dashboard-container .sidebar .avatar {
    width: 48px;
    height: 48px;
    border: var(--linea) solid var(--ls-border);
}

.dashboard-container .sidebar .user-info h3 {
    font-size: var(--t-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-container .sidebar .user-info small {
    display: block;
    font-size: var(--t-1);
    color: var(--ls-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-container .sidebar > a {
    padding: var(--e-2) var(--e-3);
    border-radius: var(--radio);
    color: var(--ls-text);
    font-size: var(--t-3);
    font-weight: var(--p-normal);
}

.dashboard-container .sidebar > a i { width: 1.1rem; color: var(--ls-muted); text-align: center; }

.dashboard-container .sidebar > a:hover { background: var(--ls-acento-fondo); color: var(--ls-text); }

.dashboard-container .sidebar > a.active,
.dashboard-container .sidebar > a.active:hover {
    background: var(--ls-acento-fondo);
    color: var(--marca-azul-texto);
    font-weight: var(--p-medio);
}

.dashboard-container .sidebar > a.active i { color: inherit; }
:root[data-theme="dark"] .dashboard-container .sidebar > a.active { color: var(--marca-cian); }

.ls-sidebar-toggle { border-radius: var(--radio); font-weight: var(--p-medio); }

.ls-panel {
    padding: var(--e-5);
    border-radius: var(--radio);
}

.ls-panel-title {
    margin-bottom: var(--e-4);
    font-size: var(--t-5);
}

/* Las cabeceras de tabla en caja normal, como todo lo demás. */
.main-content .table th {
    font-size: var(--t-2);
    font-weight: var(--p-medio);
    text-transform: none;
    letter-spacing: 0;
}

.main-content .table td { font-size: var(--t-3); }

.main-content h1,
.main-content h2 { font-size: var(--t-5); }

.ls-billetera { border-radius: var(--radio); }
.ls-billetera-etiqueta { font-size: var(--t-3); }
.ls-billetera-saldo { font-size: var(--t-7); }

@media (max-width: 575.98px) {
    .ls-billetera-saldo { font-size: var(--t-6); }
}

/* La «o» entre el botón de entrar y el de Google iba en un gris fijo que en
   oscuro no llegaba al mínimo. */
.ls-o-divisor span { color: var(--ls-muted); }
.ls-billetera .btn-comprar,
.ls-billetera .btn-outline-light,
.ls-billetera-aviso { border-radius: var(--radio); }

/* Las cifras del inicio: una fila dividida por líneas, no dos tarjetas. */
.ls-cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: var(--e-5);
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
}

.ls-cifra {
    padding: var(--e-4) var(--e-5);
    border-left: var(--linea) solid var(--ls-border);
    color: inherit;
    text-decoration: none;
}

.ls-cifra:first-child { border-left: 0; }
a.ls-cifra:hover { background: var(--ls-acento-fondo); color: inherit; text-decoration: none; }

.ls-cifra-nombre {
    display: block;
    font-size: var(--t-2);
    font-weight: var(--p-medio);
    color: var(--ls-muted);
}

.ls-cifra-valor {
    display: block;
    margin-top: var(--e-1);
    font-size: var(--t-6);
    font-weight: var(--p-fuerte);
    line-height: 1.2;
    color: var(--ls-text);
    font-variant-numeric: tabular-nums;
}

.ls-cifra-texto {
    margin: var(--e-1) 0 0;
    font-size: var(--t-2);
    color: var(--ls-muted);
}

.ls-cifra-texto.es-aviso { color: var(--marca-ambar-texto); font-weight: var(--p-medio); }
:root[data-theme="dark"] .ls-cifra-texto.es-aviso { color: var(--marca-ambar); }

@media (max-width: 575.98px) {
    .ls-cifras { grid-template-columns: 1fr; }
    .ls-cifra { border-left: 0; border-top: var(--linea) solid var(--ls-border); }
    .ls-cifra:first-child { border-top: 0; }
}

/* Atajos del inicio: una lista con líneas, cada uno con su destino. */
.ls-atajos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--e-3);
    margin-bottom: var(--e-5);
}

.ls-atajo {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    background: var(--ls-surface);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
    color: var(--ls-text);
    text-decoration: none;
}

.ls-atajo:hover { border-color: var(--marca-azul); color: var(--ls-text); text-decoration: none; }

.ls-atajo i {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 50%;
    background: var(--ls-acento-fondo);
    color: var(--marca-azul-texto);
}

:root[data-theme="dark"] .ls-atajo i { color: var(--marca-cian); }

.ls-atajo-texto { display: flex; flex-direction: column; min-width: 0; }

.ls-atajo strong {
    font-size: var(--t-3);
    font-weight: var(--p-medio);
    color: var(--ls-text);
}

.ls-atajo small {
    font-size: var(--t-2);
    color: var(--ls-muted);
}

.dashboard-container .sidebar .user-info > div { min-width: 0; }

.ls-bienvenida { margin-bottom: var(--e-4); }
.ls-bienvenida-texto { font-size: var(--t-6); }
.ls-bienvenida-frase { font-size: var(--t-3); font-weight: var(--p-normal); }

/* --- 9. El pie y los flotantes --------------------------------------------- */

.ls-boletin-forma input,
.ls-boletin-forma button,
.ls-app-boton,
.ls-pie-libro-img { border-radius: var(--radio); }

/* El globo del botón de WhatsApp, sin emojis ni parpadeo: una pastilla. */
.welcome-message {
    border-radius: 999px !important;
    border: var(--linea) solid var(--ls-border) !important;
    background: var(--ls-surface) !important;
    color: var(--ls-text) !important;
    font-family: var(--ls-fuente);
    font-size: var(--t-2) !important;
    font-weight: var(--p-medio) !important;
    padding: .5rem 1rem !important;
}

.whatsapp-button img { border: 0 !important; }
.whatsapp-button:hover { transform: none; }
.whatsapp-button:hover img { transform: none; }

/* Las etiquetas de estado de la tienda, en pastilla. */
body .badge.bg-success,
body .badge.bg-warning,
body .badge.bg-info,
body .badge.bg-primary,
body .badge.bg-danger,
body .badge.bg-secondary { border-radius: 999px; }

/* Botón de volver arriba del tema, redondo y plano. */
.scrollto {
    border-radius: 50% !important;
    background: var(--ls-surface) !important;
    border: var(--linea) solid var(--ls-border) !important;
    color: var(--ls-text) !important;
}

/* --- La ventana que pide el WhatsApp --------------------------------------- */

.ls-dialogo {
    width: min(28rem, calc(100% - 2rem));
    padding: var(--e-6);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
    background: var(--ls-surface);
    color: var(--ls-text);
}

.ls-dialogo::backdrop { background: rgba(6, 11, 26, .55); }

.ls-dialogo h2 {
    margin: 0 0 var(--e-2);
    font-size: var(--t-5);
    font-weight: var(--p-fuerte);
    color: var(--ls-text);
}

.ls-dialogo p {
    margin: 0 0 var(--e-4);
    font-size: var(--t-3);
    line-height: 1.6;
    color: var(--ls-muted);
}

.ls-dialogo .ls-whatsapp-pais { width: 8.5rem; }
.ls-dialogo small { margin-top: var(--e-1); font-size: var(--t-1); }

.ls-dialogo-acciones {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    margin-top: var(--e-4);
}

.ls-dialogo-acciones .btn-comprar { width: 100%; padding: .7rem var(--e-4); }

.ls-dialogo-luego {
    padding: var(--e-2);
    border: 0;
    background: none;
    color: var(--ls-muted);
    font: inherit;
    font-size: var(--t-3);
    cursor: pointer;
}

.ls-dialogo-luego:hover { color: var(--ls-text); text-decoration: underline; }

/* --- Las ventanas de pago (Binance Pay y Yape con el centro de cobros) ---- */
/* Una sola superficie: cabecera, pasos y contenido se separan con líneas de
   1px, no con cajas. El acento solo marca el paso activo y la acción. */

.ls-pago {
    width: min(26rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    overflow-y: auto;
}

.ls-pago-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--e-4) var(--e-5);
    border-bottom: var(--linea) solid var(--ls-border);
}

.ls-pago-cabecera h2 { margin: 0; font-size: var(--t-4); }

.ls-pago-cerrar {
    width: 2rem;
    height: 2rem;
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
    background: none;
    color: var(--ls-muted);
    font-size: var(--t-5);
    line-height: 1;
    cursor: pointer;
}

.ls-pago-cerrar:hover { color: var(--ls-text); }

.ls-pago-pasos {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: var(--linea) solid var(--ls-border);
}

.ls-pago-pasos li {
    flex: 1;
    padding: var(--e-3) var(--e-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--ls-muted);
    font-size: var(--t-2);
    text-align: center;
}

.ls-pago-pasos li span { font-variant-numeric: tabular-nums; }

.ls-pago-pasos li.es-activo {
    border-bottom-color: var(--ls-primary);
    color: var(--ls-primary);
    font-weight: var(--p-medio);
}

.ls-pago-paso { padding: var(--e-5); }

.ls-dialogo.ls-pago p { margin: 0; }

.ls-dialogo.ls-pago .ls-pago-centro {
    font-size: var(--t-2);
    text-align: center;
}

.ls-dialogo.ls-pago .ls-pago-monto {
    margin: var(--e-1) 0 var(--e-2);
    color: var(--ls-text);
    font-size: var(--t-6);
    font-weight: var(--p-fuerte);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ls-pago-campo {
    margin: var(--e-4) 0 0;
    padding: 0;
    border: 0;
}

.ls-pago-campo label,
.ls-pago-campo legend {
    display: block;
    margin-bottom: var(--e-1);
    color: var(--ls-text);
    font-size: var(--t-2);
    font-weight: var(--p-medio);
}

.ls-pago-copiable { display: flex; gap: var(--e-2); }

.ls-pago-copiable .form-control { font-variant-numeric: tabular-nums; }

.ls-pago-copiar {
    flex: none;
    padding: 0 var(--e-3);
    border: var(--linea) solid var(--ls-primary);
    border-radius: var(--radio);
    background: none;
    color: var(--ls-primary);
    font: inherit;
    font-size: var(--t-2);
    cursor: pointer;
}

.ls-dialogo.ls-pago .ls-pago-nota,
.ls-dialogo.ls-pago .ls-pago-instrucciones {
    margin-top: var(--e-1);
    font-size: var(--t-1);
}

.ls-dialogo.ls-pago .ls-pago-instrucciones { margin-top: var(--e-4); white-space: pre-line; }

.ls-pago-qr {
    display: block;
    width: 11rem;
    margin: var(--e-4) auto 0;
    border-radius: var(--radio);
}

.ls-pago-lista {
    margin: var(--e-4) 0 0;
    padding-left: var(--e-5);
    color: var(--ls-muted);
    font-size: var(--t-2);
    line-height: 1.5;
}

.ls-pago-lista li + li { margin-top: var(--e-1); }

.ls-pago .ls-pago-boton {
    width: 100%;
    margin-top: var(--e-5);
    padding: .7rem var(--e-4);
}

/* Lo que ya se pagó, en una fila partida por una línea vertical */
.ls-pago-resumen {
    display: flex;
    margin: 0 0 var(--e-2);
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
}

.ls-pago-resumen div {
    flex: 1;
    padding: var(--e-2) var(--e-3);
    text-align: center;
}

.ls-pago-resumen div + div { border-left: var(--linea) solid var(--ls-border); }

.ls-pago-resumen dt { color: var(--ls-muted); font-size: var(--t-1); font-weight: var(--p-normal); }

.ls-pago-resumen dd {
    margin: 0;
    color: var(--ls-text);
    font-size: var(--t-3);
    font-weight: var(--p-fuerte);
    font-variant-numeric: tabular-nums;
}

.ls-pago-ilustracion {
    display: block;
    width: 100%;
    max-width: 16rem;
    margin: var(--e-4) auto 0;
}

.ls-pago-error {
    margin: var(--e-2) 0 var(--e-4);
    padding: var(--e-2) var(--e-3);
    border: var(--linea) solid var(--ls-peligro);
    border-radius: var(--radio);
    color: var(--ls-peligro);
    font-size: var(--t-2);
}

.ls-pago-paso .ls-pago-origen { margin-top: 0; }

.ls-pago-paso > .ls-pago-error:first-child { margin-top: 0; }

.ls-pago-origen label {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: var(--e-2) 0 0;
    font-weight: var(--p-normal);
}

.ls-pago-secundarias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-2);
    margin-top: var(--e-2);
}

.ls-pago-secundarias a.ls-dialogo-luego { text-decoration: none; }

.ls-dialogo.ls-pago .ls-pago-estado {
    color: var(--ls-text);
    font-size: var(--t-4);
    font-weight: var(--p-medio);
    text-align: center;
}

.ls-dialogo.ls-pago [data-yp-detalle] { margin-top: var(--e-2); }

/* «Buscando tu yapeo…»: avanza con cada consulta, sin animación propia */
.ls-pago-barra {
    height: 3px;
    margin: var(--e-5) 0 var(--e-2);
    background: var(--ls-border);
    overflow: hidden;
}

.ls-pago-barra span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--ls-primary);
    transition: width .3s linear;
}

.ls-pago [hidden] { display: none !important; }


/* --- Soporte: tickets y, al costado, los canales de WhatsApp -------------- */
/* Una sola superficie para los canales, separados por líneas de 1px. El
   verde es el de WhatsApp (estado «activo» de la marca), no un acento más. */

.ls-soporte {
    display: grid;
    /* minmax(0, …): sin esto la tabla de tickets ensancha la columna y la
       página se desborda en el móvil. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-5);
    align-items: start;
}

@media (min-width: 992px) {
    .ls-soporte { grid-template-columns: minmax(0, 1fr) 18rem; }
}

.ls-soporte-canales {
    border: var(--linea) solid var(--ls-border);
    border-radius: var(--radio);
    background: var(--ls-surface);
}

.ls-soporte-canales h2 {
    margin: 0;
    padding: var(--e-4) var(--e-4) 0;
    color: var(--ls-text);
    font-size: var(--t-4);
    font-weight: var(--p-fuerte);
}

.ls-soporte-canales p {
    margin: var(--e-1) 0 0;
    padding: 0 var(--e-4) var(--e-4);
    color: var(--ls-muted);
    font-size: var(--t-2);
    line-height: 1.5;
}

.ls-soporte-canales ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ls-soporte-canales li { border-top: var(--linea) solid var(--ls-border); }

.ls-soporte-canales a {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    color: var(--ls-text);
    text-decoration: none;
}

.ls-soporte-canales a:hover { background: var(--ls-acento-fondo); }

.ls-soporte-canales a > i:first-child {
    flex: none;
    width: 1.25rem;
    color: var(--ls-exito);
    font-size: var(--t-5);
    text-align: center;
}

.ls-soporte-canales a > span { flex: 1; min-width: 0; }

.ls-soporte-canales strong {
    display: block;
    font-size: var(--t-3);
    font-weight: var(--p-medio);
}

.ls-soporte-canales small {
    display: block;
    color: var(--ls-muted);
    font-size: var(--t-1);
    line-height: 1.4;
}

.ls-soporte-salir {
    flex: none;
    color: var(--ls-muted);
    font-size: var(--t-1);
}