/* ============================================================
   AYCOMER · Estructura: franja, cabecera y pie
   Archivo: layout.css
   No edites colores aquí: todos viven en tokens.css
   ============================================================ */

/* ============================================================
   BARRA SUPERIOR + CABECERA
   ============================================================ */
.franja{background:var(--tinta);color:#EDE9F7;font-size:12.5px}
[data-tema="noche"] .franja{background:#0A0E1E}
.franja .contenedor{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px}
.franja-izq{display:flex;align-items:center;gap:8px;font-weight:500;min-width:0}
.franja-izq b{color:var(--miel-txt);font-weight:800}
.franja-der{display:flex;align-items:center;gap:20px}
.franja-der button:hover{color:var(--miel-txt)}
.franja-marquesina{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cabecera{
  position:sticky;top:0;z-index:70;background:var(--sup);
  border-bottom:1px solid var(--linea);
}
.cabecera::after{content:"";display:block;height:2px;background:var(--grad);opacity:.9}
.cab-fila{display:flex;align-items:center;gap:14px;padding:14px 0}

.marca{display:flex;align-items:center;gap:11px;flex:none}
.marca svg{width:42px;height:42px;flex:none}

/* ---- RANURA DEL LOGO ---------------------------------------
   Aquí entra el archivo que subas a /assets/img/logo/.
   La caja es cuadrada de 42x42: el símbolo debe venir recortado
   sin márgenes propios. Ver docs/LOGO.md para las medidas. */
.marca-logo{width:42px;height:42px;flex:none;object-fit:contain}
.pie-marca .marca-logo{width:46px;height:46px}
@media (max-width:640px){ .marca-logo{width:36px;height:36px} }
/* Si el archivo del logo todavía no existe, el hueco no se ve roto */
.marca-logo:not([src]),.marca-logo[src=""]{visibility:hidden}
.marca-txt{display:flex;flex-direction:column;line-height:1}
.marca-txt strong{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.045em;color:var(--texto)}
.marca-txt span{font-size:10.5px;font-weight:600;color:var(--texto-3);letter-spacing:.02em;margin-top:2px}

/* Selector de territorio: el elemento firma del sitio */
.territorio{
  display:flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;
  background:var(--sup-2);border:1.5px solid var(--linea);flex:none;transition:.18s;text-align:left;
}
.territorio:hover{border-color:var(--fucsia-txt);box-shadow:0 6px 18px -10px rgba(175,39,125,.7)}
.territorio .pin{width:30px;height:30px;border-radius:50%;background:var(--grad);display:grid;place-items:center;flex:none}
.territorio .pin svg{width:16px;height:16px;stroke:#fff}
.territorio-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.territorio-txt small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--texto-3)}
.territorio-txt strong{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}

.buscador{flex:1;position:relative;min-width:0}
.buscador input{
  width:100%;padding:14px 116px 14px 46px;border-radius:999px;
  border:1.5px solid var(--linea);background:var(--sup-2);font-size:14.5px;font-weight:500;
  transition:.18s;
}
.buscador input:focus{outline:none;border-color:var(--fucsia-txt);background:var(--sup);box-shadow:0 0 0 4px rgba(175,39,125,.1)}
.buscador input::placeholder{color:var(--texto-3);font-weight:500}
.buscador .lupa{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:19px;height:19px;stroke:var(--texto-3);pointer-events:none}
.buscador .ir{position:absolute;right:6px;top:6px;bottom:6px;padding:0 20px}
.sugerencias{
  position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--sup);
  border:1px solid var(--linea);border-radius:var(--r-m);box-shadow:var(--sombra-l);
  overflow:hidden;z-index:80;
}
.sugerencias li button{display:flex;width:100%;align-items:center;gap:12px;padding:11px 16px;text-align:left;font-size:14px}
.sugerencias li button:hover{background:var(--sup-2)}
.sugerencias .sg-cat{font-size:11.5px;color:var(--texto-3);margin-left:auto;font-weight:600}
.sugerencias .sg-tit{padding:10px 16px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-3)}

.cab-acciones{display:flex;align-items:center;gap:6px;flex:none}
.icono-btn{
  position:relative;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  border:1.5px solid transparent;transition:.16s;
}
.icono-btn:hover{background:var(--sup-2);border-color:var(--linea)}
.icono-btn svg{width:21px;height:21px;stroke:var(--texto);fill:none;stroke-width:1.8}
.globo{
  position:absolute;top:4px;right:3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--grad);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;
  border:2px solid var(--sup);
}
.globo:empty,.globo[data-n="0"]{display:none}

/* Navegación de categorías */
.nav-cat{border-top:1px solid var(--linea);background:var(--sup);position:relative}

.nav-cat .contenedor{
  display:flex;align-items:center;gap:4px;
  overflow-x:auto;scrollbar-width:none;padding:6px 16px;
  scroll-behavior:smooth;
  /* Que nunca se corte una categoría a mitad de palabra */
  scroll-snap-type:x proximity;
  scroll-padding-inline:44px;
}
.nav-cat .contenedor>button{scroll-snap-align:start}
.nav-cat .contenedor::-webkit-scrollbar{display:none}
.nav-cat button{
  padding:9px 13px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--texto-2);
  white-space:nowrap;transition:.15s;display:flex;align-items:center;gap:7px;
}
.nav-cat button:hover{background:var(--sup-2);color:var(--texto)}
.nav-cat button.on{color:var(--fucsia-txt);background:rgba(175,39,125,.12)}
.nav-cat .todo{font-weight:800;color:var(--texto)}
.nav-cat svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}


/* ============================================================
   BLOQUES DE CONFIANZA / PIE
   ============================================================ */
.tira-valor{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.valor{display:flex;gap:13px;padding:20px;background:var(--sup);border:1px solid var(--linea);border-radius:var(--r-l);align-items:flex-start}
.valor .glifo{width:42px;height:42px;border-radius:13px;background:var(--grad-suave);display:grid;place-items:center;flex:none}
.valor svg{width:21px;height:21px;stroke:var(--fucsia-txt);fill:none;stroke-width:1.8}
.valor b{font-size:14.5px;display:block;margin-bottom:3px}
.valor p{margin:0;font-size:13px;color:var(--texto-2);line-height:1.45}

.vender{
  background:var(--tinta);border-radius:var(--r-xl);padding:44px;color:#fff;position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:center;
}
.vender::before{content:"";position:absolute;top:-120px;right:-90px;width:340px;height:340px;border-radius:50%;background:var(--grad);opacity:.5;filter:blur(20px)}
.vender > *{position:relative;z-index:1}
.vender h2{font-size:clamp(24px,3vw,36px);margin-bottom:12px}
.vender p{color:rgba(255,255,255,.78);font-size:15px;margin:0 0 22px;max-width:46ch}
.vender-lista{display:grid;gap:11px}
.vender-lista li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.9)}
.vender-lista svg{width:19px;height:19px;stroke:var(--miel);fill:none;stroke-width:2.4;flex:none;margin-top:2px}

.pie{background:var(--sup);border-top:1px solid var(--linea);padding:48px 0 0;margin-top:44px}
.pie-rejilla{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;padding-bottom:36px}
.pie-marca p{font-size:13.5px;color:var(--texto-2);margin:14px 0 18px;max-width:32ch}
.redes{display:flex;gap:8px}
.redes a{width:38px;height:38px;border-radius:11px;border:1.5px solid var(--linea);display:grid;place-items:center;transition:.16s}
.redes a:hover{border-color:transparent;background:var(--grad)}
.redes a:hover svg{stroke:#fff}
.redes svg{width:17px;height:17px;stroke:var(--texto-2);fill:none;stroke-width:1.9}
.pie-col h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3);margin-bottom:14px;font-family:var(--texto-f);font-weight:800}
.pie-col li{margin-bottom:9px}
.pie-col a{font-size:13.5px;color:var(--texto-2);font-weight:500}
.pie-col a:hover{color:var(--fucsia-txt)}
.pie-bajo{border-top:1px solid var(--linea);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--texto-3);font-weight:600}
.medios-pago{display:flex;gap:6px;flex-wrap:wrap}
.boletin{display:flex;gap:8px;margin-top:14px}
.boletin input{flex:1;padding:12px 14px;border-radius:12px;border:1.5px solid var(--linea);background:var(--sup-2);font-size:13.5px;font-weight:600}
.boletin input:focus{outline:none;border-color:var(--fucsia-txt)}


/* ============================================================
   MENÚ DE CATEGORÍAS · 15 ago 2026
   Sustituye a la barra que se desplazaba en horizontal, donde el
   40% de las categorías quedaba fuera de alcance. Aquí caben las
   14 completas, a la vista de una sola vez.
   ============================================================ */
.nav-cat .todo{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;color:var(--texto);
  background:var(--sup-2);border:1.5px solid var(--linea);
  border-radius:11px;padding:8px 14px;
}
.nav-cat .todo:hover{border-color:var(--cta);background:var(--cta-suave);color:var(--cta)}
.nav-cat .todo .chevron{
  width:14px;height:14px;transform:rotate(90deg);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.nav-cat .todo.abierto .chevron{transform:rotate(-90deg)}
.nav-cat .todo.abierto{border-color:var(--cta);color:var(--cta);background:var(--cta-suave)}

.nav-cat .ver-mas{
  font-weight:700;color:var(--texto-2);
  border:1.5px dashed var(--linea-fuerte);border-radius:11px;padding:8px 12px;
}
.nav-cat .ver-mas:hover{color:var(--cta);border-color:var(--cta);border-style:solid}

/* ---- El panel ---- */
.menu-cat{
  position:absolute;left:0;right:0;top:100%;z-index:40;
  padding:0 16px;
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1), visibility .24s;
}
.menu-cat.on{opacity:1;visibility:visible;transform:translateY(0)}

.menu-cat-caja{
  max-width:var(--max);margin:0 auto;
  background:var(--sup);
  border:1px solid var(--linea);
  border-radius:0 0 var(--r-l) var(--r-l);
  box-shadow:var(--sombra-l);
  padding:18px 20px 22px;
}
.menu-cat-cab{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--linea);
}
.menu-cat-cab b{font-family:var(--display);font-size:16px;color:var(--texto)}
.cerrar-menu{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:var(--texto-2);transition:.15s;
}
.cerrar-menu:hover{background:var(--sup-2);color:var(--texto)}
.cerrar-menu svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}

.menu-cat-rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:8px;
}
.menu-cat-rejilla button{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:var(--r-s);
  border:1.5px solid transparent;
  text-align:left;font-size:14px;font-weight:650;color:var(--texto);
  transition:background .16s, border-color .16s, transform .16s;
}
.menu-cat-rejilla button:hover{
  background:var(--sup-2);border-color:var(--linea);
  transform:translateY(-1px);
}
.menu-cat-rejilla button.on{border-color:var(--cta);background:var(--cta-suave);color:var(--cta)}
.menu-cat-rejilla .glifo{
  width:34px;height:34px;border-radius:10px;flex:none;
  display:grid;place-items:center;background:var(--grad-suave);
}
.menu-cat-rejilla .glifo svg{width:17px;height:17px;stroke:var(--fucsia-txt);fill:none;stroke-width:1.8}
.menu-cat-rejilla button:focus-visible{outline:3px solid var(--cta);outline-offset:2px}

/* En celular el panel ocupa el ancho completo y las categorías van
   en dos columnas: se leen bien y se tocan sin fallar. */
@media (max-width:760px){
  .menu-cat{padding:0}
  .menu-cat-caja{border-radius:0 0 var(--r-m) var(--r-m);padding:14px 14px 18px;max-height:70vh;overflow-y:auto}
  .menu-cat-rejilla{grid-template-columns:repeat(2,1fr)}
  .menu-cat-rejilla button{padding:10px;font-size:13px}
  .nav-cat .ver-mas{display:none}
}
/* Si la persona pidió menos movimiento en su sistema, se respeta. */
@media (prefers-reduced-motion:reduce){
  .menu-cat{transition:opacity .01s}
  .menu-cat,.menu-cat.on{transform:none}
  .nav-cat .todo .chevron{transition:none}
  .menu-cat-rejilla button:hover{transform:none}
}