/* ==========================================================================
   MEJORAS DE LA TIENDA — se cargan en la TIENDA REAL y en /demo/.
   Nacieron como "capa de la demo" (deploy.sh las inyectaba solo en /demo/)
   para que el dueño las probara sobre el dominio real sin arriesgar la tienda
   de verdad. Ya las aprobó: esto es lo que se queda, para siempre, en las dos.
   Lo que sigue siendo SOLO de la demo (franja naranja, freno de pedidos, el
   aviso que usa ese freno) se quedó en site/demo-capa.css/.js — nunca aquí.
   Todo es móvil primero: es desde donde el dueño revisa.
   ========================================================================== */

@media (max-width: 640px){
  /* ---------- 1 · Categorías: de rejilla 4x2 a CARRIL que se desliza ----------
     La tienda las pone en rejilla (regla de #circulosHome en styles.css). Aquí
     se vuelve al carril, que es lo que pidió el dueño tras ver ve.epaenlinea.com. */
  /* El carril va A SANGRE, de borde a borde de la pantalla, con las fotos
     desvaneciéndose en los extremos. Es el patrón que la propia tienda ya usa
     en .circulos-wrap (margen negativo + máscara) y que esta capa estaba
     pisando: sin él el carril quedaba metido en una caja y los círculos se
     cortaban en seco contra el borde, que es lo que se veía raro.
     El hueco de los lados va en el PADDING, no en un margen del primer/último
     hijo: con margen, el bucle tenía un salto cada vuelta.
     LAYOUT MOVIDO A LA CINTA (mejoras.js, animaCarril/aseguraCinta): el
     track ya NO lleva flex/gap — solo recorta (overflow:hidden) y gestiona
     el dedo (touch-action:pan-y, para que la página siga bajando en
     vertical). El scroll nativo se quitó porque se pinta a píxel entero
     (medido: con scrollLeft es imposible el movimiento fraccionario) — la
     marcha ahora la lleva un transform sobre .emk-cinta. */
  #circulosHome, #circulosShop{
    display: block !important;
    /* overflow-x, no el shorthand: overflow-y se deja tal cual estaba
       (visible) para no recortar el anillo de .circ-ofertas (-4px arriba) ni
       el translateY(-3px) del hover — igual que antes, cuando el track solo
       fijaba overflow-x. */
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    padding: 4px var(--gutter) 10px !important;
    /* SANGRE INDEPENDIENTE DE LA PROFUNDIDAD.
       Antes: margin: 0 calc(var(--gutter) * -1). Eso escapa UN nivel de
       relleno y en la tienda hay DOS (#shopCatalogo y #catalogo, 20,6px cada
       uno): medido, el carril de la tienda moria en 21-391 sobre 412 mientras
       el de inicio si llegaba al borde. 50% - 50vw se mide contra el
       contenedor que toque, sea cual sea, y siempre aterriza en el borde de
       la pantalla. El hueco de los lados va en el PADDING, no en un margen
       del primer/ultimo hijo: con margen el bucle daba un salto cada vuelta. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
  }
  /* La cinta interior (creada por aseguraCinta en mejoras.js) es la que
     lleva ahora el flex + gap que antes tenía el track. will-change avisa
     al navegador que el transform se mueve cada cuadro. */
  #circulosHome .emk-cinta, #circulosShop .emk-cinta{
    display: flex; gap: 16px; will-change: transform;
  }
  #circulosHome .circ, #circulosShop .circ{
    flex: 0 0 auto !important; width: auto !important; scroll-snap-align: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  #circulosHome .circ-media, #circulosShop .circ-media{ width: 84px !important; height: 84px !important }
  #circulosHome .circ-label, #circulosShop .circ-label{ font-size: 11px !important }

  /* ---------- 2 · Marcas: de 8 filas a DOS que se deslizan ---------- */
  /* OJO CON LOS SELECTORES: todo esto va por ID (#m2Wall / #m2Track0), no por
     clase. La cinta de METODOS DE PAGO (#pagosWall) reusa a proposito la misma
     mecanica —.m2-wall, .m2-row-front, .m2-track— asi que con selectores de
     clase estas reglas tambien la pisaban: se la llevaban a 100vw, en rejilla
     de dos filas y sin .emk-cinta (que solo la crea animaCarril para los
     carriles de la lista), y la seccion de pagos salia rota en movil.
     El muro de marcas vive dentro de .m2-wall (max-width + margin auto) y de
     .m2-row (overflow:hidden + su propia máscara). Eso recortaba el carril 41px
     antes del borde derecho — medido — y dejaba las marcas sin llegar a sangre
     mientras las categorías sí. Se abre el contenedor solo en móvil; la máscara
     ahora la lleva el propio carril. */
  #m2Wall{
    max-width: none !important; margin: 0 !important;
    border-radius: 0 !important; overflow: visible !important;
  }
  #m2Wall .m2-row-front{
    overflow: visible !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  #m2Track0{
    /* Ojo: la regla movil de la tienda (styles.css) le pone max-width:100%,
       que se resolvia contra los 371px del contenedor y ANULABA el margen
       negativo — el carril moria en 371 sobre una pantalla de 412. Por eso el
       bloque de sangre de abajo pisa tambien max-width.
       LAYOUT MOVIDO A LA CINTA (igual que #circulosHome/#circulosShop, ver
       arriba): el track solo recorta y gestiona el dedo. */
    display: block !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    padding: 4px var(--gutter) 6px !important;
    /* SANGRE INDEPENDIENTE DE LA PROFUNDIDAD.
       Antes: margin: 0 calc(var(--gutter) * -1). Eso escapa UN nivel de
       relleno y en la tienda hay DOS (#shopCatalogo y #catalogo, 20,6px cada
       uno): medido, el carril de la tienda moria en 21-391 sobre 412 mientras
       el de inicio si llegaba al borde. 50% - 50vw se mide contra el
       contenedor que toque, sea cual sea, y siempre aterriza en el borde de
       la pantalla. El hueco de los lados va en el PADDING, no en un margen
       del primer/ultimo hijo: con margen el bucle daba un salto cada vuelta. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important;
  }
  #m2Track0 .emk-cinta{
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
    gap: 10px; will-change: transform;
  }
  #m2Track0 .m2-tile{ width: 84px !important; margin: 0 !important }
}

/* ---------- Flechas de los carriles ---------- */
/* Se apoyan SOBRE el desvanecido de los bordes, donde no tapan ninguna foto
   entera. Discretas: cristal, sin sombra dura y medio transparentes hasta que
   se tocan. */
.emk-flecha{
  position: absolute; z-index: 6;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,11,13,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #F5F5F7; display: grid; place-items: center; cursor: pointer; padding: 0;
  opacity: .72; transition: opacity .2s ease, transform .2s ease;
}
.emk-flecha:hover{ opacity: 1 }
.emk-flecha svg{ width: 15px; height: 15px; fill: none; stroke: currentColor;
                  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.emk-flecha-izq{ left: 2px }
.emk-flecha-der{ right: 2px }
.emk-flecha:active{ transform: scale(.94) }
[data-theme="light"] .emk-flecha{
  background: rgba(255,255,255,.86); border-color: rgba(0,0,0,.12); color: #14140F;
}
/* Antes se escondían por debajo de 400px "para que no taparan un círculo", y
   eso dejaba SIN flechas justo los teléfonos más comunes (iPhone 14/15 = 390px,
   Android 360-412px) — medido: a 390px las 4 flechas existían y ninguna se
   veía. Se quedan, más pequeñas por debajo de 400px, y solo desaparecen en
   pantallas realmente estrechas donde el círculo se perdería entero. */
@media (max-width: 399px){
  .emk-flecha{ width: 28px; height: 28px }
  .emk-flecha svg{ width: 15px; height: 15px }
}
@media (max-width: 339px){ .emk-flecha{ display: none } }

/* ---------- 3 · Migas de pan ---------- */
.emk-migas{
  display: flex; align-items: center; gap: 7px; overflow-x: auto; scrollbar-width: none;
  white-space: nowrap; padding: 10px var(--gutter, 18px) 2px;
  font: 600 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.emk-migas::-webkit-scrollbar{ display: none }
.emk-migas a{ color: var(--text-2, rgba(245,245,247,.45)); text-decoration: none }
.emk-migas .sep{ opacity: .35; font-size: 11px; letter-spacing: 0 }
.emk-migas .aqui{ color: var(--text, #F5F5F7); letter-spacing: .1em }
.emk-migas svg{ width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7;
                 stroke-linecap: round; stroke-linejoin: round; display: block }

/* ---------- 4 · Submenú de subcategorías ---------- */
.emk-sheet{
  position: fixed; inset: 0; z-index: 9050; display: flex; align-items: flex-end;
  background: rgba(5,5,6,.6);
}
.emk-sheet > div{
  width: 100%; background: var(--bg, #0B0B0D); border-top-left-radius: 18px;
  border-top-right-radius: 18px; border-top: 1px solid rgba(255,255,255,.12);
  padding: 8px 0 calc(18px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto;
}
.emk-sheet .asa{ width: 38px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.22);
                  margin: 6px auto 12px }
.emk-sheet h3{ font: 700 18px/1.2 Outfit, Inter, sans-serif; margin: 0 0 12px;
                padding: 0 var(--gutter, 18px); color: var(--text, #F5F5F7) }
.emk-sheet ul{ list-style: none; margin: 0 var(--gutter, 18px); padding: 0; display: grid; gap: 1px;
                background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.09);
                border-radius: 12px; overflow: hidden }
.emk-sheet li{ background: var(--bg, #0B0B0D) }
.emk-sheet a{ display: flex; align-items: center; justify-content: space-between; gap: 12px;
               padding: 14px; text-decoration: none; color: var(--text, #F5F5F7); font-size: 14.5px }
.emk-sheet .n{ color: rgba(245,245,247,.42); font: 500 12px/1 Inter, sans-serif;
                font-variant-numeric: tabular-nums }
[data-theme="light"] .emk-sheet > div{ background: #fff }
[data-theme="light"] .emk-sheet li{ background: #fff }
[data-theme="light"] .emk-sheet h3,
[data-theme="light"] .emk-sheet a{ color: #14140F }

/* ==========================================================================
   PORTADA EN MOVIL: sin hero (dueño, 7 sep — segunda vuelta)
   Primero se probo al reves: quitar el "EMKO Design" de la barra y agrandar el
   sello. El dueño prefiere lo contrario — fuera el hero entero y que la palabra
   se quede en la cabecera. Tiene sentido: el problema era que el logotipo salia
   DOS veces en 40px; se puede resolver quitando cualquiera de las dos, y
   quitando el hero se gana ademas media pantalla antes del buscador.
   Solo movil y solo portada: .emk-portada la pone mejoras.js donde hay
   .hero, y sigue funcionando porque el hero se OCULTA, no se borra del DOM.
   La cabecera de la tienda no se toca: el dueño dijo que ahi esta bien.
   ========================================================================== */
@media (max-width: 640px){
  /* ---------- 1 · Fuera el hero ---------- */
  /* display:none y no height:0 — el hero trae fondo, brillos y el sello con su
     efecto de inclinacion; dejarlo con alto 0 seguiria pintando y animando
     cosas invisibles. La barra se queda como unica firma de marca. */
  html.emk-portada .hero{ display: none !important; }

  /* ---------- 2 · Los botones, todos del mismo tamaño ---------- */
  /* Medido: nav-theme 38px, auth-chip 34px y nav-cart/nav-burger 44px. Tres
     tamaños distintos seguidos es lo que desordenaba la fila. Se igualan a 38
     y se quita el contorno. El area tactil sigue siendo 38px. */
  html.emk-portada .nav-theme,
  html.emk-portada .auth-area .auth-chip,
  html.emk-portada .nav-cart,
  html.emk-portada .nav-burger{
    width: 38px !important; height: 38px !important;
    border: 0 !important; background: transparent !important;
  }
}

/* ==========================================================================
   PORTADA MOVIL: aprovechar el sitio que dejo el hero (dueño, 7 sep)
   Sin el hero, categorias y marcas se quedaban apretadas arriba y sobraba
   media pantalla antes de "Visitanos". Se agrandan las dos y se les da
   estructura, para que la primera pantalla sea justo eso: buscar, categorias
   y marcas — y lo siguiente al bajar, Visitanos.
   ========================================================================== */
@media (max-width: 640px){

  /* ---------- Titulos de seccion ---------- */
  /* Las marcas ya tenian su rotulo ("Trabajamos con marcas originales") pero
     las categorias no: el carril salia pegado al buscador, sin contexto. Con
     los dos rotulos las dos bandas riman y la pantalla se lee de un vistazo.
     El de categorias lo inyecta mejoras.js reusando .brands-label. */
  html.emk-portada .brands-label,
  html.emk-portada .emk-tit-cats{
    font-size: 12.5px !important; letter-spacing: .02em !important;
    margin: 0 0 12px !important;
  }

  /* ---------- Categorias mas grandes ---------- */
  html.emk-portada #circulosHome .circ-media{ width: 108px !important; height: 108px !important }
  html.emk-portada #circulosHome .circ-label{ font-size: 12.5px !important; margin-top: 8px !important }
  html.emk-portada #circulosHome .emk-cinta{ gap: 18px !important }

  /* ---------- Marcas: DOS filas, pero con las baldosas mucho mas grandes ----
     Se probo con tres filas y no valia por dos razones que solo se ven mirando:
     (1) son tres bandas de tarjetas BLANCAS sobre fondo oscuro — llenaba el
     hueco, si, pero pesaba como un muestrario, no como una tienda; y (2) con
     un numero IMPAR de filas las flechas caen en el centro, que es justo la
     fila del medio, y tapaban un logo. Con dos filas la flecha aterriza en el
     hueco entre ellas.
     Ademas el dueño ya habia pedido (6 sep) "los logos mas grandes": la
     baldosa pasa de 84x62 a 112x100 y el logo de 34 a 52px de alto, que llena
     el sitio con logo y no con cartulina. */
  /* DOS filas (dueño, 7 sep — decision final). Se llego a probar con tres y se
     volvio atras: tres bandas de tarjetas blancas pesaban como un muestrario.
     Con dos, la baldosa recupera sus 100px de alto.
     Las flechas se quedan sobre el rotulo aunque con dos filas cabrian en el
     hueco: ahi no tapan ningun logo en ningun caso, y si algun dia se vuelve a
     tocar el numero de filas no hay que reajustarlas. El relleno de la ultima
     columna que hace aseguraCinta lee grid-template-rows, asi que el bucle se
     recalcula solo: 29 marcas + 1 relleno = 30 celdas / 2 filas = 15 columnas
     exactas. */
  html.emk-portada #m2Track0 .emk-cinta{
    grid-template-rows: repeat(2, auto) !important;
    gap: 12px !important;
  }
  html.emk-portada #m2Track0 .m2-tile{ width: 112px !important; height: 100px !important }
  html.emk-portada #m2Track0 .m2-tile-media img{ max-height: 52px !important; max-width: 100% !important }
}

/* ==========================================================================
   METODOS DE PAGO — la rejilla era de 4 y hay 6 metodos
   ==========================================================================
   Medido: grid-template-columns = repeat(4, 71.5px) con 6 baldosas, o sea
   4 arriba y 2 abajo pegadas a la izquierda, con un hueco grande a la derecha.
   Eso es lo que se veia raro. Con 3 por fila salen DOS FILAS LLENAS y de paso
   cada baldosa pasa de 72 a ~111px, que le viene bien a logos como Zelle o
   Cashea. Se usa flex y no grid a proposito: si el dueño apaga un metodo y
   quedan 5, flex centra la ultima fila en vez de dejarla coja.
   Esto NO es culpa de la demo: la tienda real se ve exactamente igual. */
@media (max-width: 640px){
  /* El dueño lo quiere en UNA sola fila, asi que las seis reparten el ancho a
     partes iguales (flex:1 1 0) en vez de ir a tamaño fijo: a 390px salen a
     ~53px cada una y no hay fila coja ni desplazamiento lateral. Si algun dia
     apaga un metodo y quedan cinco, se reparten los mismos 350px y siguen
     centradas — por eso flex y no grid. */
  #pagosTrack{
    display: flex !important; flex-wrap: nowrap !important;
    justify-content: center !important; gap: 6px !important;
    grid-template-columns: none !important; overflow: visible !important;
    align-items: stretch !important;
  }
  /* Medido antes de esto: las baldosas median 36, 48, 36, 48, 27 y 48 de alto
     y se apoyaban en TRES lineas base distintas (1199, 1205, 1209) — las de
     solo logo son mas bajas que las que llevan etiqueta. Esa fila escalonada
     era buena parte de lo que se veia raro. Con stretch todas miden lo mismo
     y el contenido se centra dentro. */
  #pagosTrack > .pagos-wall-tile{
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important;
    padding: 8px 4px !important; height: auto !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 4px !important;
  }
  /* La etiqueta en una linea: a 53px de baldosa, "Pago Movil" a 8,5px mide
     unos 42px. Sin nowrap se partia en dos y descuadraba la fila. */
  #pagosTrack .pagos-wall-txt{
    font-size: 8.5px !important; white-space: nowrap !important;
    letter-spacing: 0 !important; line-height: 1.2 !important;
  }
  #pagosTrack .m2-tile-media img,
  #pagosTrack .pagos-wall-cashea{ max-width: 100% !important; height: auto !important }
  #pagosTrack svg{ width: 18px !important; height: 18px !important }
}

/* ---------- Instagram del pie: mas grande y con mas presencia ---------- */
/* En movil era un circulo de 44px con un icono de 17 al 85% de opacidad: se
   perdia. Sube a 56 con el icono a 26 y a plena opacidad, y el borde se marca
   un poco mas para que se lea como un boton y no como un adorno.
   Se queda en blanco y negro a proposito: la marca no lleva color desde el 4
   de septiembre y el degradado de Instagram no esta entre las excepciones
   (WhatsApp, Cashea, ambar y Google). */
@media (max-width: 640px){
  .footer-instagram{
    width: 56px !important; height: 56px !important;
    border-color: rgba(255,255,255,.22) !important;
  }
  .footer-instagram .fc-ico{
    width: 26px !important; height: 26px !important; opacity: 1 !important;
  }
}
[data-theme="light"] .footer-instagram{ border-color: rgba(0,0,0,.18) !important }

/* ==========================================================================
   MARCA DE LA CABECERA: entrada al cargar (dueño, 7 sep)
   ==========================================================================
   Una sola vez, al pintar la pagina — NO en bucle y NO al pasar el mouse: es
   una tienda, no un intro. El hexagono (.mark-svg) entra primero con un giro
   leve; las 4 letras del logotipo (.wm-l1..4) y la palabra "design" entran
   justo despues, escalonadas, para que se lea como una sola firma armandose,
   no como cuatro elementos sueltos. animation-fill-mode:both dejaba todo
   invisible ANTES del primer cuadro (si no, se veria un parpadeo: el icono
   ya pintado un instante antes de que la animacion arrancara). Con
   prefers-reduced-motion no hay animacion y todo queda visible de una vez —
   nunca algo invisible por un fallo del navegador en aplicar el keyframe. */
.brand-mark .mark-svg{
  animation: emk-marca-hex .52s cubic-bezier(.22,.68,.32,1) both;
}
@keyframes emk-marca-hex{
  from{ opacity: 0; transform: rotate(-14deg) scale(.86); }
  to{   opacity: 1; transform: none; }
}
/* Los 4 trazos de letra y "design" comparten la misma entrada (fundido + 5px
   de subida) con 40ms de diferencia entre uno y otro. Arrancan a los 520ms,
   justo cuando el hexagono termina el suyo — de ahi el primer retardo igual
   a la duracion de emk-marca-hex. */
.brand-vec .wm-l1, .brand-vec .wm-l2, .brand-vec .wm-l3, .brand-vec .wm-l4,
.brand-vec .wm-design{
  animation: emk-marca-letra .26s ease-out both;
}
.brand-vec .wm-l1{ animation-delay: .52s; }
.brand-vec .wm-l2{ animation-delay: .56s; }
.brand-vec .wm-l3{ animation-delay: .60s; }
.brand-vec .wm-l4{ animation-delay: .64s; }
.brand-vec .wm-design{ animation-delay: .68s; }
@keyframes emk-marca-letra{
  from{ opacity: 0; transform: translateY(5px); }
  to{   opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .brand-mark .mark-svg,
  .brand-vec .wm-l1, .brand-vec .wm-l2, .brand-vec .wm-l3, .brand-vec .wm-l4,
  .brand-vec .wm-design{ animation: none; opacity: 1; transform: none; }
}