/* ==========================================================================
   AllMenu — hoja de estilos general (v2, rediseño)
   Rojo/dorado de la marca, ejecutado con más aire, mejor tipografía
   y jerarquía visual más clara.
   ========================================================================== */

:root{
  --rojo: #D3122A;
  --rojo-fuerte: #A50E22;
  --rojo-suave: #FBEAEA;
  --dorado: #EBA400;
  --dorado-fuerte: #C88900;
  --dorado-suave: #FFF3D9;
  --tinta: #201A14;
  --tinta-suave: #756757;
  --tinta-tenue: #9A8E7E;
  --superficie: #FFFFFF;
  --fondo: #FBF7F0;
  --fondo-alt: #F4EDE1;
  --borde: #EAE0CF;
  --exito: #1F8A5C;
  --exito-suave: #E6F5EC;
  --alerta: #B23A2E;
  --alerta-suave: #FBEBE8;

  --radio-sm: 10px;
  --radio-md: 16px;
  --radio-lg: 24px;

  --sombra-sm: 0 1px 2px rgba(32,26,20,.05), 0 2px 8px -2px rgba(32,26,20,.08);
  --sombra-md: 0 4px 10px -2px rgba(32,26,20,.08), 0 16px 32px -12px rgba(32,26,20,.16);
  --sombra-lg: 0 8px 24px -6px rgba(32,26,20,.14), 0 30px 60px -20px rgba(32,26,20,.24);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:'Manrope','IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Sora','Manrope',sans-serif;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font-family:inherit; }
::selection{ background:var(--dorado-suave); color:var(--tinta); }
:focus-visible{ outline:2.5px solid var(--dorado); outline-offset:2px; }

.container{
  max-width:1120px;
  margin:0 auto;
  padding-inline:22px;
}

/* ---------- topbar ---------- */
.topbar{
  background:rgba(251,247,240,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20;
  border-bottom:1px solid var(--borde);
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:12px;
}
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.08rem; color:var(--tinta); }
.brand img{ width:40px; height:40px; border-radius:12px; box-shadow:var(--sombra-sm); }
.brand small{ display:block; font-weight:600; font-size:.66rem; color:var(--dorado-fuerte); letter-spacing:.08em; text-transform:uppercase; margin-top:1px; }
.nav-links{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.nav-links a{
  font-size:.87rem; font-weight:700; padding:9px 16px; border-radius:999px;
  transition:background .15s ease, color .15s ease, transform .1s ease;
  color:var(--tinta-suave);
}
.nav-links a:hover{ background:var(--fondo-alt); color:var(--tinta); }
.nav-links a.btn-outline{ border:1.5px solid var(--borde); color:var(--tinta); }
.nav-links a.btn-outline:hover{ border-color:var(--rojo); color:var(--rojo); background:transparent; }
.nav-links a.btn-solid{ background:var(--rojo); color:#fff; box-shadow:var(--sombra-sm); }
.nav-links a.btn-solid:hover{ background:var(--rojo-fuerte); transform:translateY(-1px); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding-block:42px 18px;
  overflow:hidden;
}
.hero::before, .hero::after{
  content:''; position:absolute; border-radius:50%; z-index:0; filter:blur(60px); opacity:.5;
}
.hero::before{ width:360px; height:360px; background:var(--dorado-suave); top:-160px; right:8%; }
.hero::after{ width:280px; height:280px; background:var(--rojo-suave); top:40px; left:2%; }

.hero-card{
  position:relative; z-index:1;
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-lg);
  box-shadow:var(--sombra-lg);
  padding:30px 36px 28px;
  max-width:780px;
  margin:0 auto;
}
.hero-card .eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rojo);
  background:var(--rojo-suave);
  padding:5px 12px;
  border-radius:999px;
}
.hero-card h1{
  font-size:clamp(1.6rem, 4vw, 2.3rem);
  font-weight:800;
  margin:14px 0 20px;
  line-height:1.16;
}
.hero-card p{ color:var(--tinta-suave); margin:0 0 22px; max-width:56ch; font-size:1.02rem; }

/* ---------- barra de búsqueda ---------- */
.search-bar{
  display:flex; align-items:center; gap:10px;
  background:var(--fondo);
  border:1.5px solid var(--borde);
  border-radius:999px;
  padding:8px 8px 8px 16px;
  margin:0 0 20px;
}
.search-bar > svg{ color:var(--rojo); flex:none; }
.search-bar input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:inherit; font-size:.9rem; font-weight:600; color:var(--tinta);
}
.search-bar input::placeholder{ color:var(--tinta-tenue); font-weight:500; }
.search-bar-btn{
  flex:none;
  background:var(--dorado); color:var(--tinta); font-weight:800; font-size:.82rem;
  border:none; border-radius:999px; padding:9px 18px; cursor:pointer; white-space:nowrap;
  font-family:inherit; transition:background .15s ease, color .15s ease;
}
.search-bar-btn:hover{ background:var(--dorado-fuerte); color:#fff; }

.cat-row{ display:flex; gap:10px; flex-wrap:wrap; }
.cat-chip{
  display:flex; align-items:center; gap:9px;
  background:var(--fondo);
  border:1.5px solid var(--borde);
  border-radius:999px;
  padding:7px 18px 7px 7px;
  font-weight:700; font-size:.88rem;
  color:var(--tinta);
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.cat-chip .ico{
  width:30px; height:30px; border-radius:50%;
  background:var(--superficie);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  box-shadow:inset 0 0 0 1px var(--borde);
}
.cat-chip:hover{ border-color:var(--dorado); transform:translateY(-1px); box-shadow:var(--sombra-sm); }
.cat-chip.activo{ background:var(--tinta); border-color:var(--tinta); color:#fff; }
.cat-chip.activo .ico{ background:var(--dorado); box-shadow:none; }

/* ---------- por qué elegir AllMenu ---------- */
.features{ padding-block:6px 4px; }
.features-title{ margin:20px 0 20px; }
.features-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}
.feature-card{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-md);
  padding:22px 20px 20px;
  box-shadow:var(--sombra-sm);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--sombra-md); border-color:#DED0B4; }
.feature-card .ico-wrap{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px;
  margin-bottom:14px;
}
.feature-card .ico-wrap svg{ width:22px; height:22px; }
.feature-card .ico-wrap-rojo{ background:var(--rojo-suave); color:var(--rojo); }
.feature-card .ico-wrap-dorado{ background:var(--dorado-suave); color:var(--dorado-fuerte); }
.feature-card h3{ margin:0 0 6px; font-size:1rem; font-weight:800; }
.feature-card p{ margin:0; color:var(--tinta-suave); font-size:.85rem; line-height:1.55; }

/* ---------- listado de comercios ---------- */
.section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; row-gap:4px;
  margin:44px 0 18px;
}
.section-title h2{ font-size:1.3rem; margin:0; font-weight:800; }
.section-title span{ color:var(--tinta-tenue); font-size:.85rem; font-weight:600; }

.grid-comercios{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:18px;
  padding-bottom:48px;
}
.card-comercio{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-md);
  overflow:hidden;
  box-shadow:var(--sombra-sm);
  display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card-comercio:hover{ transform:translateY(-3px); box-shadow:var(--sombra-md); border-color:#DED0B4; }
.card-comercio .foto{
  height:104px;
  position:relative;
  background:
    radial-gradient(120% 160% at 15% -10%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, var(--rojo), var(--rojo-fuerte));
  display:flex; align-items:center; justify-content:center;
}
.card-comercio .foto .avatar{
  width:46px; height:46px; border-radius:14px;
  background:var(--dorado);
  color:var(--tinta);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:1.15rem;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.card-comercio .info{ padding:15px 17px 18px; display:flex; flex-direction:column; gap:5px; flex:1; }
.card-comercio .cat{
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  color:var(--dorado-fuerte);
}
.card-comercio h3{ margin:1px 0 0; font-size:1.04rem; font-weight:700; }
.card-comercio p{ margin:0; color:var(--tinta-suave); font-size:.86rem; flex:1; line-height:1.5; }
.card-comercio .ver{
  margin-top:11px; align-self:flex-start;
  font-weight:800; font-size:.83rem; color:var(--rojo);
  display:flex; align-items:center; gap:5px;
  transition:gap .15s ease;
}
.card-comercio:hover .ver{ gap:9px; }

/* ---------- platos destacados (home) ---------- */
.destacados-scroll{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px;
  padding-bottom:6px;
}
.card-plato{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-md);
  overflow:hidden;
  box-shadow:var(--sombra-sm);
  display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card-plato:hover{ transform:translateY(-3px); box-shadow:var(--sombra-md); border-color:#DED0B4; }
.card-plato .foto{
  height:96px; position:relative;
  background:
    radial-gradient(120% 160% at 15% -10%, rgba(255,255,255,.2), transparent 55%),
    linear-gradient(135deg, var(--dorado), var(--dorado-fuerte));
  display:flex; align-items:center; justify-content:center;
}
.card-plato .foto svg{ width:32px; height:32px; color:#fff; opacity:.92; }
.card-plato .info{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:3px; }
.card-plato .comercio{ font-size:.66rem; font-weight:800; color:var(--tinta-tenue); text-transform:uppercase; letter-spacing:.04em; }
.card-plato h4{ margin:1px 0 0; font-size:.9rem; font-weight:800; line-height:1.25; }
.card-plato .precio{ font-weight:800; color:var(--tinta); font-size:.9rem; margin-top:2px; }
.card-plato .badge-comision{
  align-self:flex-start; margin-top:5px;
  background:var(--dorado-suave); color:var(--dorado-fuerte);
  font-size:.63rem; font-weight:800; padding:3px 9px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em;
}

/* ---------- formularios (login/registro) ---------- */
.auth-wrap{
  max-width:420px; margin:56px auto; padding-inline:20px;
}
.auth-card{
  background:var(--superficie);
  border:1px solid var(--borde);
  border-radius:var(--radio-lg);
  box-shadow:var(--sombra-lg);
  padding:34px 30px 30px;
}
.auth-card h1{ font-size:1.4rem; margin:0 0 5px; font-weight:800; }
.auth-card p.sub{ color:var(--tinta-suave); margin:0 0 24px; font-size:.92rem; }
.campo{ margin-bottom:16px; }
.campo label{ display:block; font-size:.8rem; font-weight:700; margin-bottom:6px; color:var(--tinta-suave); }
.campo input, .campo select, .campo textarea{
  width:100%; padding:11px 14px;
  border:1.5px solid var(--borde); border-radius:var(--radio-sm);
  font-size:.95rem; font-family:inherit; background:var(--fondo); color:var(--tinta);
  transition:border-color .15s ease, background .15s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--dorado); background:var(--superficie);
  box-shadow:0 0 0 3px var(--dorado-suave);
}
.btn{
  display:inline-block; width:100%; text-align:center;
  background:var(--rojo); color:#fff; font-weight:800;
  padding:12px 16px; border:none; border-radius:var(--radio-sm); font-size:.96rem;
  cursor:pointer; transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow:var(--sombra-sm);
}
.btn:hover{ background:var(--rojo-fuerte); transform:translateY(-1px); box-shadow:var(--sombra-md); }
.btn-secundario{ background:var(--tinta); }
.btn-secundario:hover{ background:#3a3024; }
.auth-card .alt{ margin-top:18px; font-size:.87rem; color:var(--tinta-suave); text-align:center; }
.msg-error{
  background:var(--alerta-suave); color:var(--alerta);
  padding:11px 15px; border-radius:var(--radio-sm); font-size:.87rem; margin-bottom:18px;
  font-weight:600;
}
.msg-ok{
  background:var(--exito-suave); color:var(--exito);
  padding:11px 15px; border-radius:var(--radio-sm); font-size:.87rem; margin-bottom:18px;
  font-weight:600;
}

/* ---------- paneles (comercio/repartidor/admin) ---------- */
.panel-layout{ display:flex; min-height:calc(100vh - 65px); }
.panel-side{
  width:230px; flex:none; background:var(--tinta); color:#fff;
  padding:24px 16px;
}
.panel-side .rol-tag{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--dorado); font-weight:800; margin-bottom:16px; padding-left:12px;
}
.panel-side a{
  display:block; padding:10px 12px; border-radius:10px; font-size:.9rem; font-weight:600;
  color:#D8CFC1; margin-bottom:3px;
  transition:background .15s ease, color .15s ease;
}
.panel-side a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.panel-side a.activo{ background:var(--rojo); color:#fff; }
.panel-main{ flex:1; padding:32px 36px; }
.panel-main h1{ margin-top:0; font-size:1.5rem; font-weight:800; }

.stat-row{ display:flex; gap:14px; flex-wrap:wrap; margin:22px 0 32px; }
.stat-tile{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-md);
  padding:16px 20px; min-width:160px; box-shadow:var(--sombra-sm);
}
.stat-tile .k{ font-size:.72rem; text-transform:uppercase; color:var(--tinta-tenue); letter-spacing:.05em; font-weight:700; }
.stat-tile .v{ font-size:1.55rem; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums; font-family:'Sora',sans-serif; }

.tabla-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radio-md); }
table.tabla-panel{ width:100%; min-width:560px; border-collapse:collapse; background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio-md); overflow:hidden; box-shadow:var(--sombra-sm); }
table.tabla-panel th, table.tabla-panel td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--borde); font-size:.9rem; }
table.tabla-panel thead th{ background:var(--fondo-alt); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--tinta-suave); font-weight:700; }
table.tabla-panel tbody tr:last-child td{ border-bottom:none; }
table.tabla-panel tbody tr:hover{ background:var(--fondo); }
table.tabla-panel td.num, table.tabla-panel th.num{ font-variant-numeric:tabular-nums; }

.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 11px; border-radius:999px; font-size:.75rem; font-weight:700; }
.badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-pendiente{ background:var(--dorado-suave); color:var(--dorado-fuerte); }
.badge-activo, .badge-al_dia, .badge-entregado, .badge-disponible{ background:var(--exito-suave); color:var(--exito); }
.badge-suspendido, .badge-vencida, .badge-cancelado{ background:var(--alerta-suave); color:var(--alerta); }

footer.site-footer{
  border-top:1px solid var(--borde); margin-top:40px;
  padding:26px 0; color:var(--tinta-tenue); font-size:.83rem; text-align:center;
}
footer.site-footer a{ font-weight:700; color:var(--tinta-suave); }
footer.site-footer a:hover{ color:var(--rojo); }

/* ---------- barra inferior (solo celular, estilo app) ---------- */
.bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--superficie);
  border-top:1px solid var(--borde);
  box-shadow:0 -6px 18px -8px rgba(32,26,20,.14);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px;
  font-size:.68rem; font-weight:700; color:var(--tinta-tenue);
}
.bottom-nav a svg{ width:21px; height:21px; }
.bottom-nav a.activo{ color:var(--rojo); }
@media (max-width:720px){
  .bottom-nav{ display:flex; }
  body{ padding-bottom:60px; }
}

@media (max-width:720px){
  .panel-layout{ flex-direction:column; }
  .panel-side{ width:100%; display:flex; gap:6px; overflow-x:auto; padding:14px; }
  .panel-side .rol-tag{ display:none; }
  .panel-side a{ white-space:nowrap; margin-bottom:0; padding:11px 14px; }
  .panel-main{ padding:20px 16px; }
  .auth-wrap{ margin:28px auto; }
  .auth-card{ padding:26px 22px 22px; }
  .section-title{ margin:32px 0 16px; }

  /* en celular, el menú de arriba lo reemplaza la barra inferior de pestañas */
  body.con-nav-movil .nav-links{ display:none; }
  body.con-nav-movil .topbar .container{ justify-content:center; }

  /* encabezado tipo app: panel rojo de borde a borde en vez de tarjeta flotante */
  .hero{ padding:0 0 22px; overflow:visible; }
  .hero::before, .hero::after{ display:none; }
  .hero > .container{ padding-inline:0; }
  .hero-wave{ display:none; }
  .hero-card{
    position:relative; z-index:1;
    max-width:none; margin:0;
    background:linear-gradient(160deg, var(--rojo), var(--rojo-fuerte));
    border:none; border-radius:0 0 26px 26px;
    box-shadow:var(--sombra-lg);
    padding:18px 20px 20px;
  }
  .hero-card .eyebrow{ background:rgba(255,255,255,.16); color:#fff; }
  .hero-card h1{ color:#fff; font-size:1.4rem; margin:12px 0 16px; }
  .hero-card p{ color:rgba(255,255,255,.86); font-size:.88rem; }
  .search-bar{ background:var(--superficie); border:none; box-shadow:var(--sombra-md); }

  /* carrusel horizontal de platos destacados */
  .destacados-scroll{
    display:flex; gap:14px; overflow-x:auto;
    padding:2px 2px 10px; margin:0 -2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .destacados-scroll::-webkit-scrollbar{ display:none; }
  .destacados-scroll .card-plato{ flex:none; width:150px; }
}

/* topbar en celular: si no cabe en una sola fila, que baje limpio a una
   segunda fila en vez de encimarse con el logo */
@media (max-width:640px){
  .topbar .container{
    flex-wrap:wrap;
    row-gap:6px;
    padding-block:10px;
  }
  .brand{ flex:1 1 auto; }
  .nav-links{
    flex:1 1 100%;
    justify-content:flex-start;
    order:3;
  }
  .nav-links a{ padding:10px 15px; }
}

/* pantallas de celular angostas: menos aire perdido en los bordes
   y estadísticas del panel en 2 columnas en vez de 1 */
@media (max-width:480px){
  .container{ padding-inline:16px; }
  .stat-row{ gap:10px; }
  .stat-tile{ min-width:0; flex:1 1 calc(50% - 5px); padding:14px 16px; }
  .stat-tile .v{ font-size:1.3rem; }
  .features-grid, .grid-comercios{ gap:12px; }
  .feature-card{ padding:18px 16px 16px; }

  /* categorías como íconos en fila con scroll horizontal, estilo app */
  .cat-row{
    flex-wrap:nowrap; overflow-x:auto; gap:16px;
    padding:2px 2px 6px; margin:0 -2px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .cat-row::-webkit-scrollbar{ display:none; }
  .cat-chip{
    flex:none; width:62px; flex-direction:column; gap:6px;
    background:transparent; border:none; padding:0; text-align:center;
    font-size:.74rem;
  }
  .cat-chip .ico{ width:54px; height:54px; margin:0 auto; }
  .cat-chip .ico .ico-svg{ width:23px; height:23px; }
  .cat-chip.activo{ background:transparent; color:var(--rojo); }
  .cat-chip.activo .ico{ background:var(--rojo); box-shadow:var(--sombra-sm); }
  .cat-row .cat-chip.activo .ico .ico-svg{ color:#fff; }
  .search-bar input{ font-size:.85rem; }
}

/* ==========================================================================
   Decoración: iconos de línea, tiras y elementos flotantes
   ========================================================================== */

.ico-svg{
  width:18px; height:18px;
  stroke:currentColor;
  vertical-align:middle;
}
.cat-chip .ico .ico-svg{ width:16px; height:16px; color:var(--rojo); }
.cat-chip:nth-child(3n+1) .ico .ico-svg{ color:var(--rojo); }
.cat-chip:nth-child(3n+2) .ico .ico-svg{ color:var(--dorado-fuerte); }
.cat-chip:nth-child(3n+3) .ico .ico-svg{ color:var(--rojo-fuerte); }
.cat-chip.activo .ico .ico-svg{ color:var(--tinta); }

/* tira decorativa de iconos (arriba de la barra, y encima del footer) */
.deco-strip{
  overflow:hidden;
  background:linear-gradient(90deg, var(--rojo), var(--rojo-fuerte));
  padding-block:7px;
}
.deco-strip-track{
  display:flex; align-items:center; gap:26px;
  width:max-content;
  animation:deco-scroll 42s linear infinite;
}
.deco-strip:hover .deco-strip-track{ animation-play-state:paused; }
.deco-ico{
  width:17px; height:17px; flex:none;
  color:var(--dorado);
  opacity:.9;
}
.deco-ico:nth-child(4n+2){ color:#fff; opacity:.55; }
.deco-ico:nth-child(4n+3){ color:var(--dorado-suave); opacity:.8; }
.deco-strip-footer{ background:linear-gradient(90deg, var(--tinta), #33291C); }
@keyframes deco-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-4.16667%); } /* 100% / 24 copias del set de iconos */
}
@media (prefers-reduced-motion: reduce){
  .deco-strip-track{ animation:none; }
}

/* iconos flotantes alrededor del hero */
.hero-deco{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.hero-deco .hd{
  position:absolute;
  opacity:.55;
}
.hd-1{ width:34px; height:34px; top:14%;  left:5%;  color:var(--rojo); transform:rotate(-12deg); }
.hd-2{ width:44px; height:44px; top:62%;  left:3%;  color:var(--dorado); transform:rotate(8deg); }
.hd-3{ width:38px; height:38px; top:8%;   right:6%; color:var(--tinta-suave); transform:rotate(10deg); }
.hd-4{ width:30px; height:30px; top:70%;  right:9%; color:var(--rojo-fuerte); transform:rotate(-8deg); }
.hd-5{ width:26px; height:26px; top:38%;  left:10%; color:var(--dorado-fuerte); transform:rotate(-16deg); }
.hd-6{ width:30px; height:30px; top:20%;  right:16%;color:var(--rojo); transform:rotate(14deg); }
.hd-7{ width:24px; height:24px; bottom:6%;left:20%; color:var(--dorado); transform:rotate(6deg); }
.hd-8{ width:26px; height:26px; top:78%;  right:22%;color:var(--tinta-suave); transform:rotate(-10deg); }
.hd-9{ width:20px; height:20px; top:4%;   left:32%; color:var(--dorado-fuerte); transform:rotate(0deg); }
@media (max-width:860px){
  .hero-deco{ display:none; }
}

.hero-wave{
  display:block; width:100%; height:36px;
  position:relative; z-index:0; margin-top:-4px;
}

/* watermark de icono dentro de la tarjeta de comercio */
.card-comercio .foto{ position:relative; overflow:hidden; }
.card-comercio .foto-deco{
  position:absolute; width:74px; height:74px;
  top:50%; left:16px; transform:translateY(-50%) rotate(-10deg);
  color:#fff; opacity:.16;
}