:root{
    --ink:#2B1B29;
    --paper:#FBF3E7;
    --paper-2:#F3E7D6;
    --plum:#4A1F42;
    --plum-2:#5E2A54;
    --gold:#E7A93C;
    --coral:#E2543A;
    --thread:#C9A87C;
    --line: rgba(43,27,41,0.14);
    --radius: 14px;
    --shadow: 0 14px 30px -14px rgba(43,27,41,0.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:84px;}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  button{font-family:inherit; cursor:pointer;}

  /* ---------- DEMO BANNER ---------- */
  .demo-banner{
    background:var(--gold); color:var(--plum); text-align:center;
    font-family:'Space Mono',monospace; font-size:12.5px; padding:8px 16px;
    display:none;
  }
  .demo-banner.show{display:block;}

  /* ---------- NAV ---------- */
  header{position:sticky; top:0; z-index:50; background:var(--plum); color:var(--paper); border-bottom:3px solid var(--gold); transition: padding .25s ease;}
  .nav{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:19px 24px; max-width:1180px; margin:0 auto;}
  header.shrink .nav{padding:12px 24px;}
  .logo{grid-column:1; font-family:'Archivo Black', sans-serif; font-size:22px; letter-spacing:0.5px; color:var(--paper); display:flex; align-items:center; gap:8px; white-space:nowrap;}
  .logo span{color:var(--gold);}
  .logo-icon{height:36px; width:auto; display:block;}
  /* Buscador del header centrado en la columna del medio (grid de 3 columnas:
     logo | buscador | acciones) — antes era flex:1 sin tope claro de centrado,
     quedaba pegado a la izquierda con espacio suelto a la derecha. */
  .search{grid-column:2; display:flex; align-items:center; gap:8px; background:rgba(251,243,231,0.1); border:1px solid rgba(251,243,231,0.25); border-radius:999px; padding:9px 16px; width:100%; max-width:380px; margin:0 auto; transition:border-color .2s, background .2s; position:relative;}
  .search-suggestions{
    display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
    background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; z-index:60;
  }
  .suggestion-item{padding:10px 16px; font-size:13.5px; color:var(--ink); cursor:pointer; border-bottom:1px solid var(--line);}
  .suggestion-item:last-child{border-bottom:none;}
  .suggestion-item:hover{background:var(--paper-2);}

  /* ---------- PÁGINA DE RESULTADOS DE BÚSQUEDA ---------- */
  .search-page{display:none; position:fixed; inset:0; z-index:60; background:var(--paper); overflow-y:auto;}
  .search-wrap{max-width:1180px; margin:0 auto; padding:20px 24px 60px;}
  .search-crumb{display:flex; align-items:center; gap:10px; font-size:13px; color:#8a7e83; margin-bottom:18px;}
  .search-crumb span{font-weight:700; color:var(--ink);}
  /* Buscador propio de la página de resultados — antes, una vez que entrabas
     a un rubro, no había forma de buscar (pedido del usuario). Mismo ícono y
     comportamiento que el buscador del header, pero en versión clara para
     este fondo (--paper) en vez del header oscuro. */
  .search-page-search{
    display:flex; align-items:center; gap:10px;
    background:#fff; border:1.5px solid var(--line); border-radius:999px;
    padding:12px 18px; margin-bottom:22px; max-width:480px;
    transition:border-color .2s ease;
  }
  .search-page-search:focus-within{border-color:var(--coral);}
  .search-page-search svg{flex-shrink:0; color:#8a7e83;}
  .search-page-search input{background:none; border:none; outline:none; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); width:100%;}
  .search-page-search input::placeholder{color:#a89ba0;}
  .search-layout{display:grid; grid-template-columns:220px 1fr; gap:32px;}
  .search-sidebar h4{font-size:13px; text-transform:uppercase; letter-spacing:0.4px; margin:20px 0 10px;}
  .search-sidebar h4:first-child{margin-top:0;}
  .tipo-compra-pills{display:flex; flex-direction:column; gap:6px;}
  .tipo-pill{text-align:left; background:#fff; border:1px solid var(--line); padding:8px 12px; border-radius:9px; font-size:13px; font-weight:600;}
  .tipo-pill.active{background:var(--plum); color:var(--paper); border-color:var(--plum);}
  .search-cat-filters{display:flex; flex-direction:column; gap:8px;}
  .search-cat-check{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer;}
  .price-filter{display:flex; gap:8px;}
  .price-filter input{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px;}
  .search-results-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:13.5px; color:#8a7e83;}
  .search-results-head select{padding:7px 10px; border-radius:8px; border:1px solid var(--line); font-size:13px; background:#fff;}
  @media (max-width:720px){ .search-layout{grid-template-columns:1fr;} }
  .search:focus-within{border-color:var(--gold); background:rgba(251,243,231,0.16);}
  .search input{background:none; border:none; outline:none; color:var(--paper); font-family:'Inter',sans-serif; font-size:14px; width:100%;}
  .search input::placeholder{color:rgba(251,243,231,0.55);}
  .nav-links{grid-column:3; display:flex; align-items:center; gap:16px; font-size:14px; font-weight:600;}
  .nav-links a, .nav-links button{background:none; border:none; color:inherit; opacity:.85; transition:opacity .2s, color .2s; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600;}
  .nav-links a:hover, .nav-links button:hover{opacity:1; color:var(--gold);}
  .btn-sumar{background:transparent; border:1.5px solid var(--gold) !important; padding:8px 16px; border-radius:999px; opacity:1 !important;}
  .btn-sumar:hover{background:rgba(231,169,60,0.15);}
  .btn-ingresar{background:var(--gold) !important; color:var(--plum) !important; padding:9px 18px; border-radius:999px; font-weight:800; opacity:1 !important;}
  button.btn-ingresar{appearance:none; -webkit-appearance:none; font-family:inherit; font-size:14px; border:none; cursor:pointer;}
  .btn-ingresar:hover{background:var(--coral); color:var(--paper) !important;}
  .nav-local-badge{display:flex; align-items:center; gap:8px; opacity:1 !important; padding:5px 14px 5px 5px; border-radius:999px; background:rgba(251,243,231,0.12);}
  .nav-local-badge:hover{background:rgba(251,243,231,0.2);}
  .nav-local-badge img, .nav-local-badge .nav-local-initials{width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0;}
  .nav-local-badge .nav-local-initials{background:var(--gold); color:var(--plum); display:flex; align-items:center; justify-content:center; font-family:'Archivo Black',sans-serif; font-size:12px;}
  .nav-local-badge span:last-child{font-size:13px; font-weight:700; color:var(--paper);}
  .btn-ingresar:hover{background:var(--coral); color:var(--paper) !important;}

  .sub-bar{background:var(--paper-2); border-bottom:1px solid var(--line); display:none;}
  .sub-bar.show{display:block;}
  .sub-bar-inner{display:flex; gap:8px; padding:10px 24px; max-width:1180px; margin:0 auto; overflow-x:auto; scrollbar-width:none;}
  .sub-bar-inner::-webkit-scrollbar{display:none;}
  .sub-pill{font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px; white-space:nowrap; border:1px solid var(--line); background:#fff; transition:all .2s ease;}
  .sub-pill:hover{border-color:var(--coral);}
  .sub-pill.active{background:var(--plum); color:var(--paper); border-color:var(--plum);}

  /* ---------- PESTAÑAS DE RUBRO (Inicio / Mujer / Hombre / Niños / Más) ---------- */
  .rubro-nav{padding:22px 0 6px;}
  .rubro-tabs{display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto; scrollbar-width:none;}
  .rubro-tabs::-webkit-scrollbar{display:none;}
  .rubro-tab{
    background:none; border:none; padding:10px 2px 14px; white-space:nowrap;
    font-size:15px; font-weight:700; color:#8a7e83;
    border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:color .2s ease;
  }
  .rubro-tab:hover{color:var(--ink);}
  .rubro-tab.active{color:var(--plum); border-bottom-color:var(--coral);}

  .rubro-banner{
    height:220px; border-radius:20px; margin-bottom:18px;
    background:var(--paper-2) center/cover no-repeat;
    box-shadow:var(--shadow);
  }
  /* Tiles de subrubro (Jeans, Pantalones, etc.) más grandes y con foto real
     cuando hay (TAXONOMY[].subsFotos). El nombre va SIEMPRE en una franja
     aparte debajo de la foto, sobre fondo sólido (--paper) — nunca superpuesto
     a la imagen. Antes el nombre iba encima de la foto con un degradé oscuro
     de contraste, pero el usuario reportó que con algunas fotos el texto se
     mezclaba y no se leía bien (problema en especial para gente mayor). Con
     el nombre en su propia franja de fondo fijo, el contraste ya no depende
     de la foto de cada subrubro. Sin foto, la franja de arriba (.subrubro-photo)
     sigue siendo el tile de color degradado de siempre. */
  .subrubro-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; margin-bottom:6px;}
  .subrubro-card{
    background:var(--paper);
    border:none; border-radius:18px; padding:0; text-align:left;
    display:flex; flex-direction:column;
    overflow:hidden; position:relative;
    box-shadow:0 8px 16px -10px rgba(43,27,41,0.4);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .subrubro-card:hover{transform:translateY(-3px); box-shadow:0 14px 24px -12px rgba(43,27,41,0.5);}
  .subrubro-photo{
    width:100%; aspect-ratio:1/1;
    background:linear-gradient(150deg, var(--plum), var(--plum-2));
    background-size:cover; background-position:center;
  }
  /* OJO: acá va "background-image", NO el shorthand "background" — el
     shorthand resetea background-size/position a sus valores por default
     (auto / 0% 0%), y .subrubro-photo fija esos dos por separado arriba;
     un "background:" en estas dos reglas se los pisaría. Esto ya causó una
     vez un bug (1 de cada 3 tiles con foto mostraba sólo una esquinita de
     la imagen) — ver historial del proyecto, Ronda 6. */
  .subrubro-card:nth-child(3n+2) .subrubro-photo{background-image:linear-gradient(150deg, #7A2E2E, var(--coral));}
  .subrubro-card:nth-child(3n+3) .subrubro-photo{background-image:linear-gradient(150deg, #8A6A1E, var(--gold));}
  .subrubro-card b{
    color:var(--ink); font-size:14.5px; font-weight:700;
    padding:12px 14px 14px; line-height:1.25;
  }
  .subrubro-card.ver-todas{background:var(--ink); justify-content:center; align-items:center; aspect-ratio:1/1;}
  .subrubro-card.ver-todas b{color:var(--paper); background:none; text-align:center; font-size:14px; padding:20px 14px;}

  /* ---------- HERO / BANNERS (pestaña "Inicio") ---------- */
  .hero-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
  .hero-head h1{font-family:'Bebas Neue',sans-serif; font-size:clamp(40px,6.4vw,68px); line-height:0.9; letter-spacing:0.3px; margin:0;}
  .hero-head h1 em{font-style:normal; color:var(--coral);}
  .hero-head p{font-size:15px; color:var(--ink); opacity:.68; max-width:360px; margin:8px 0 0; line-height:1.5;}
  .carousel{position:relative; overflow:hidden; border-radius:24px; box-shadow:var(--shadow);}
  .carousel-track{display:flex; transition:transform .6s cubic-bezier(.65,0,.35,1);}
  .slide{flex:0 0 100%; min-height:230px; display:flex; align-items:center; justify-content:space-between; padding:34px 40px; gap:20px; position:relative; overflow:hidden;}
  .slide:nth-child(1){background:linear-gradient(120deg,var(--plum),var(--plum-2));}
  .slide:nth-child(2){background:linear-gradient(120deg,#7A2E2E,var(--coral));}
  .slide:nth-child(3){background:linear-gradient(120deg,#8A6A1E,var(--gold));}
  .slide-text{color:var(--paper); position:relative; z-index:2;}
  .slide-eyebrow{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; opacity:.85;}
  .slide-text h2{font-family:'Bebas Neue',sans-serif; font-size:clamp(28px,4vw,46px); margin:4px 0; letter-spacing:0.5px;}
  .slide-cta{display:inline-block; margin-top:8px; padding:9px 20px; border-radius:999px; background:rgba(251,243,231,0.15); border:1.5px solid rgba(251,243,231,0.5); font-size:13px; font-weight:700; transition:all .2s;}
  .slide-cta:hover{background:var(--paper); color:var(--plum);}
  .slide-mark{font-family:'Archivo Black',sans-serif; font-size:120px; opacity:.14; color:#fff; position:absolute; right:20px; top:50%; transform:translateY(-50%); z-index:1; user-select:none;}
  .dots{display:flex; gap:7px; justify-content:center; margin-top:14px;}
  .dot{width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:all .25s;}
  .dot.active{background:var(--coral); width:22px; border-radius:5px;}

  /* ---------- FEATURE PILLS ---------- */
  .feature-strip{margin:38px 0;}
  .feature-strip-track{display:flex; flex-wrap:wrap; gap:12px;}
  .feature-pill{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--plum); color:var(--paper);
    font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:0.3px;
    padding:12px 20px; border-radius:999px; flex:1 1 auto; min-width:200px;
    box-shadow:var(--shadow);
  }
  .feature-pill:nth-child(2){background:var(--coral);}
  .feature-pill:nth-child(3){background:var(--gold); color:var(--plum);}
  .feature-pill:nth-child(4){background:var(--plum-2);}
  .feature-pill-ic{font-size:16px; flex-shrink:0;}
  @media (max-width:720px){ .feature-pill{min-width:0; flex:1 1 calc(50% - 6px);} }

  /* ---------- RUBROS GRID ---------- */
  .section-title{font-family:'Bebas Neue',sans-serif; font-size:30px; letter-spacing:0.5px; margin:0 0 18px; display:flex; align-items:center; gap:10px;}
  .section-title .tag{font-family:'Space Mono',monospace; font-size:11px; background:var(--gold); color:var(--plum); padding:3px 9px; border-radius:6px; letter-spacing:0.5px;}
  /* Tiles de "Más" (rubros sin pestaña propia): el nombre va SIEMPRE debajo
     de la foto/degradé, sobre fondo sólido (--paper) — mismo criterio y mismo
     motivo que .subrubro-card de acá arriba (nombre superpuesto a la foto =
     ilegible con algunas imágenes, en especial para gente mayor). */
  .rubros-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px; margin-bottom:10px;}
  .rubro-card{
    background:var(--paper);
    border:none; border-radius:18px; padding:0; text-align:left;
    display:flex; flex-direction:column; gap:0;
    overflow:hidden; position:relative;
    box-shadow:0 8px 18px -10px rgba(43,27,41,0.4);
    transition:transform .22s ease, box-shadow .22s ease;
  }
  .rubro-card:hover{transform:translateY(-4px); box-shadow:0 16px 28px -12px rgba(43,27,41,0.5);}
  .rubro-circle{
    width:100%; aspect-ratio:1/1; position:relative;
    display:flex; align-items:center; justify-content:center;
    font-size:38px; background:linear-gradient(150deg, var(--plum), var(--plum-2));
    background-size:cover; background-position:center;
  }
  .rubro-card:nth-child(4n+2) .rubro-circle{background-image:linear-gradient(150deg, #7A2E2E, var(--coral));}
  .rubro-card:nth-child(4n+3) .rubro-circle{background-image:linear-gradient(150deg, #8A6A1E, var(--gold));}
  .rubro-card:nth-child(4n+4) .rubro-circle{background-image:linear-gradient(150deg, var(--ink), var(--plum));}
  .rubro-circle::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 18%, rgba(251,243,231,0.16), transparent 55%);}
  .rubro-card b{
    color:var(--ink); font-size:14.5px; font-weight:700;
    padding:14px 14px 16px; line-height:1.25;
  }

  /* ---------- PRODUCT GRID ---------- */
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; margin-top:22px; min-height:120px;}
  .card{background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease, box-shadow .25s ease, border-color .25s ease;}
  .card.in{opacity:1; transform:translateY(0);}
  .card:hover{box-shadow:var(--shadow); border-color:var(--coral);}
  .card-media{position:relative; aspect-ratio:1/1; background:var(--swatch, linear-gradient(135deg,#e9d9c2,#d9c2a8)); display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .card-media svg{width:38%; height:38%; opacity:.5; transition:transform .35s ease;}
  .card:hover .card-media svg{transform:scale(1.12) rotate(-4deg);}
  .fold{position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 34px 34px 0; border-color:transparent var(--paper) transparent transparent; filter:drop-shadow(-2px 2px 2px rgba(0,0,0,0.15));}
  .badge{position:absolute; top:10px; left:10px; background:var(--coral); color:#fff; font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:0.3px;}
  .fav-heart{
    position:absolute; top:8px; right:8px; z-index:3;
    width:30px; height:30px; border-radius:50%; border:none;
    background:rgba(255,255,255,0.9); color:#b8adb2; font-size:15px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:transform .15s ease, color .15s ease;
  }
  .fav-heart:hover{transform:scale(1.12);}
  .fav-heart.active{color:var(--coral);}
  .card-body{padding:13px 14px 15px;}
  .card-shop{font-size:11px; color:var(--coral); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px; display:flex; align-items:center; gap:5px;}
  .card-shop-logo{width:16px; height:16px; border-radius:50%; object-fit:cover; flex-shrink:0;}
  .card-name{font-size:14px; font-weight:700; line-height:1.25; margin-bottom:6px; min-height:36px;}
  .card-price{font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:var(--plum);}
  .card-price small{font-size:11px; text-decoration:line-through; color:#9a8f95; font-weight:400; margin-left:6px;}
  .card-mayor{font-size:11px; color:var(--coral); font-weight:700; margin-top:2px;}
  .card-loc{display:flex; align-items:center; gap:4px; margin-top:6px; font-size:11px; color:#8a7e83;}
  .card-wsp{
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:10px; padding:8px; border-radius:9px; background:#25D366; color:#fff;
    font-size:12.5px; font-weight:700; transition:filter .2s;
  }
  .card-wsp:hover{filter:brightness(0.92);}
  .empty-state{grid-column:1/-1; text-align:center; padding:40px 20px; color:#8a7e83; font-size:14px;}
  .see-all{display:block; text-align:center; margin:30px auto 0; width:fit-content; font-family:'Space Mono',monospace; font-size:13px; font-weight:700; border:2px solid var(--ink); padding:11px 28px; border-radius:999px; transition:all .2s ease; background:none;}
  .see-all:hover{background:var(--ink); color:var(--paper);}

  /* ---------- CTA LOCAL ---------- */
  .cta-local{margin:60px 0; background:var(--plum); border-radius:24px; color:var(--paper); padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; position:relative; overflow:hidden;}
  .cta-local::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, rgba(231,169,60,0.06) 0 2px, transparent 2px 22px);}
  .cta-local h3{font-family:'Bebas Neue',sans-serif; font-size:32px; margin:0 0 6px; position:relative;}
  .cta-local p{margin:0; opacity:.8; font-size:14px; max-width:420px; position:relative;}
  .cta-btn{background:var(--gold); color:var(--plum); font-weight:800; padding:13px 26px; border-radius:999px; font-size:14px; white-space:nowrap; position:relative; transition:transform .2s ease, background .2s ease; border:none;}
  .cta-btn:hover{transform:translateY(-2px); background:var(--coral); color:#fff;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink); color:rgba(251,243,231,0.7); padding:40px 0 26px; margin-top:20px;}
  .foot-grid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:28px;}
  .foot-logo{font-family:'Archivo Black',sans-serif; color:var(--paper); font-size:19px;}
  .foot-logo span{color:var(--gold);}
  .foot-col h4{font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin:0 0 10px;}
  .foot-col a{display:block; font-size:13.5px; margin-bottom:7px; opacity:.85; transition:opacity .2s;}
  .foot-col a:hover{opacity:1; color:var(--gold);}
  .foot-bottom{border-top:1px solid rgba(251,243,231,0.12); padding-top:18px; font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

  section{padding:14px 0;}

  /* ---------- MODAL ---------- */
  .modal-overlay{position:fixed; inset:0; background:rgba(43,27,41,0.6); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
  .modal-overlay.show{display:flex;}
  .modal{background:var(--paper); border-radius:18px; max-width:440px; width:100%; max-height:88vh; overflow-y:auto; padding:28px; position:relative; box-shadow:var(--shadow);}
  .modal h3{font-family:'Bebas Neue',sans-serif; font-size:26px; margin:0 0 4px;}
  .modal .modal-sub{font-size:13px; color:#8a7e83; margin:0 0 18px;}
  .modal-close{position:absolute; top:16px; right:16px; background:none; border:none; font-size:20px; color:var(--ink); opacity:.6;}
  .modal-close:hover{opacity:1;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:5px;}
  .field input, .field select{width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px; font-family:'Inter',sans-serif; font-size:14px; background:#fff; color:var(--ink);}
  .field input:focus, .field select:focus{outline:none; border-color:var(--coral);}
  .modal-submit{width:100%; background:var(--plum); color:var(--paper); border:none; padding:12px; border-radius:999px; font-weight:800; font-size:14px; margin-top:6px;}
  .modal-submit:hover{background:var(--coral);}
  .modal-msg{font-size:13px; padding:10px 12px; border-radius:9px; margin-top:12px; display:none;}
  .modal-msg.ok{display:block; background:#DDEFD9; color:#2C5A25;}
  .modal-msg.err{display:block; background:#F6D9D3; color:#7A2E1E;}
  .field textarea{width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px; font-family:'Inter',sans-serif; font-size:14px; background:#fff; color:var(--ink); resize:vertical;}
  .field textarea:focus{outline:none; border-color:var(--coral);}

  /* ---------- FORMULARIO "SUMÁ TU LOCAL" — secciones largas (dirección,
     horarios, características, preguntas frecuentes) ---------- */
  .form-section-title{font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:0.3px; margin:20px 0 10px; padding-top:14px; border-top:1px solid var(--line);}
  .modal form > .form-section-title:first-of-type{border-top:none; padding-top:0;}

  .direccion-tipo{display:flex; gap:16px; margin-bottom:12px;}
  .direccion-tipo label{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; cursor:pointer;}
  .direccion-tipo input[type="radio"]{accent-color:var(--coral); width:16px; height:16px;}

  .link-btn{background:none; border:none; padding:0; font-size:12.5px; font-weight:700; color:var(--plum); text-decoration:underline; text-underline-offset:2px; margin:4px 0 2px;}
  .link-btn:hover{color:var(--coral);}
  #proponerGaleriaBox{background:var(--paper-2); border-radius:12px; padding:14px; margin-top:10px;}

  .btn-mini{background:var(--paper-2); color:var(--ink); border:1.5px solid var(--line); padding:9px 14px; border-radius:999px; font-weight:700; font-size:12.5px;}
  .btn-mini:hover{border-color:var(--coral); color:var(--coral);}
  .btn-mini.confirm{background:var(--plum); color:var(--paper); border-color:var(--plum);}
  .btn-mini.confirm:hover{background:var(--coral); border-color:var(--coral); color:var(--paper);}
  .btn-mini.cancel{background:#F6D9D3; color:#7A2E1E; border-color:#F6D9D3;}
  .btn-mini.cancel:hover{background:#EFC2B8; border-color:#EFC2B8; color:#7A2E1E;}

  .horarios-grid{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
  .horario-dia{display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:8px;}
  .horario-dia .horario-dia-label{font-size:12.5px; font-weight:700;}
  .horario-dia input[type="text"]{padding:9px 10px; border:1.5px solid var(--line); border-radius:9px; font-family:'Inter',sans-serif; font-size:13.5px; background:#fff; color:var(--ink);}
  .horario-dia input[type="text"]:disabled{background:var(--paper-2); color:#b3a6ac;}
  .horario-dia input[type="text"]:focus{outline:none; border-color:var(--coral);}
  .horario-dia-cerrado{display:flex; align-items:center; gap:5px; font-size:12px; white-space:nowrap;}
  .horario-dia-cerrado input{accent-color:var(--coral); width:15px; height:15px;}

  .caracteristicas-grid{display:flex; flex-direction:column; gap:7px; margin-bottom:6px;}
  .caracteristica-item{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:400;}
  .caracteristica-item input{accent-color:var(--coral); width:16px; height:16px; flex-shrink:0;}

  .pregunta-bloque{background:var(--paper-2); border-radius:12px; padding:14px; margin-bottom:12px;}
  .pregunta-bloque .field{margin-bottom:10px;}
  .pregunta-bloque .field:last-child{margin-bottom:0;}

  .terminos-check{display:flex; align-items:flex-start; gap:8px; font-size:13px; margin:18px 0 14px; cursor:pointer;}
  .terminos-check input{accent-color:var(--coral); width:16px; height:16px; margin-top:1px; flex-shrink:0;}
  .terminos-check a{color:var(--plum); font-weight:700;}
  .terminos-check a:hover{color:var(--coral);}

  /* ---------- DETAIL PAGE ---------- */
  .card{cursor:pointer;}
  .detail-page{display:none; position:fixed; inset:0; z-index:60; background:var(--paper); overflow-y:auto;}
  .detail-wrap{max-width:1100px; margin:0 auto; padding:20px 24px 60px;}
  .detail-crumb{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:#8a7e83; margin-bottom:18px;}
  /* Botón "‹ Volver" (detalle de publicación y página de resultados) — antes
     era texto chico sin fondo (font-size:13px, padding:0), pedido del usuario:
     hacerlo más grande. Ahora es un botón tipo píldora, más fácil de tocar. */
  .detail-back{background:var(--paper-2); border:1.5px solid var(--line); border-radius:999px; font-weight:800; color:var(--plum); font-size:15px; padding:10px 18px; transition:all .2s ease;}
  .detail-back:hover{color:var(--paper); background:var(--plum); border-color:var(--plum);}
  .detail-tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px;}
  .detail-tab{background:none; border:none; padding:10px 18px; font-weight:700; font-size:13.5px; color:#8a7e83; border-bottom:2px solid transparent; margin-bottom:-1px;}
  .detail-tab.active{color:var(--plum); border-bottom-color:var(--coral);}
  .detail-body{display:grid; grid-template-columns:360px 1fr; gap:36px;}
  .detail-media{aspect-ratio:1/1; border-radius:18px; background:var(--swatch,#E9D9C2); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); overflow:hidden;}
  .detail-media-map{aspect-ratio:auto; height:420px; font-size:60px;}
  .detail-media img{width:100%; height:100%; object-fit:cover;}
  .detail-gallery-col{display:flex; flex-direction:column; gap:10px; position:relative;}
  .detail-fav-heart{
    position:absolute; top:10px; right:10px; z-index:3;
    width:38px; height:38px; border-radius:50%; border:none;
    background:rgba(255,255,255,0.92); color:#b8adb2; font-size:18px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:transform .15s ease, color .15s ease; box-shadow:var(--shadow);
  }
  .detail-fav-heart:hover{transform:scale(1.1);}
  .detail-fav-heart.active{color:var(--coral);}
  .detail-thumbs{display:flex; gap:8px; overflow-x:auto;}
  .detail-thumb{width:56px; height:56px; flex:0 0 auto; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; opacity:.7; transition:all .2s;}
  .detail-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .detail-thumb:hover{opacity:1;}
  .detail-thumb.active{border-color:var(--coral); opacity:1;}
  .detail-media svg{width:34%; height:34%; opacity:.5;}
  .detail-info h1{font-family:'Bebas Neue',sans-serif; font-size:34px; margin:0 0 12px; letter-spacing:0.3px;}
  .detail-price{font-family:'Space Mono',monospace; font-size:28px; font-weight:700; color:var(--plum);}
  .detail-price span{font-size:13px; font-weight:400; color:#8a7e83; margin-left:6px;}
  .detail-mayor{font-size:14px; color:var(--coral); font-weight:700; margin-top:6px;}
  .detail-mayor small{display:block; font-weight:400; color:#8a7e83; font-size:12.5px;}
  .detail-meta{font-size:12.5px; color:#8a7e83; margin:14px 0; display:flex; gap:16px; flex-wrap:wrap;}
  .store-card{background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px; margin:16px 0; display:flex; align-items:center; gap:12px;}
  .store-avatar{width:46px; height:46px; border-radius:50%; background:var(--plum); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:'Archivo Black',sans-serif; font-size:14px; flex-shrink:0;}
  .store-info b{display:block; font-size:14.5px;}
  .store-info span{font-size:12.5px; color:#8a7e83;}
  .detail-wsp{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:999px; background:#25D366; color:#fff; font-weight:800; font-size:14.5px; margin-top:6px;}
  .detail-wsp:hover{filter:brightness(0.92);}
  .detail-share{width:100%; background:none; border:none; color:var(--plum); font-weight:700; font-size:13px; margin-top:10px; padding:8px;}
  .detail-share:hover{color:var(--coral);}
  .detail-desc{font-size:14px; line-height:1.6; color:var(--ink); margin-top:16px;}
  /* Info del local: cada bloque (contacto, horarios, servicios, etc.) va
     dentro de una de estas tarjetas en vez de texto suelto — antes todo
     caía en una sola columna larga sin separación clara. */
  .detail-local-card{background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:14px;}
  .detail-local-card h4{font-size:12.5px; text-transform:uppercase; letter-spacing:0.4px; margin:0 0 10px; color:var(--ink);}
  .detail-local-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px;}
  .local-contacto{display:flex; flex-direction:column; gap:2px;}
  .local-contacto a, .local-contacto span{
    display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink);
    text-decoration:none; padding:7px 0;
  }
  .local-contacto a:hover{color:var(--coral);}
  .local-contacto a:hover .local-contacto-icon{filter:brightness(0.95);}
  /* Ícono redondo por fila — antes eran emojis sueltos sin alinear. Los de
     teléfono y email piden explícitamente el logo de WhatsApp y un ícono de
     mail estilo Gmail (color de marca, sin copiar el isotipo de 4 colores
     de Google, que es una marca registrada). */
  .local-contacto-icon{
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--paper); font-size:13px; line-height:1;
  }
  .local-contacto-icon.icon-wsp{background:#25D366; color:#fff;}
  .local-contacto-icon.icon-mail{background:#EA4335; color:#fff;}
  @media (max-width:720px){ .detail-local-grid{grid-template-columns:1fr;} }
  .follow-btn{
    background:none; border:1.5px solid var(--plum); color:var(--plum);
    padding:8px 18px; border-radius:999px; font-weight:700; font-size:13px; flex-shrink:0;
  }
  .follow-btn:hover{background:var(--paper-2);}
  .follow-btn.active{background:var(--plum); color:var(--paper);}
  .talle-chip{background:var(--paper-2); border:1px solid var(--line); border-radius:7px; padding:4px 11px; font-size:12.5px; font-weight:700;}
  .detail-more{margin-top:50px;}
  @media (max-width:720px){ .detail-body{grid-template-columns:1fr;} .detail-media{max-width:320px; margin:0 auto;} .detail-media-map{max-width:100%; height:280px;} }

  @media (max-width:720px){
    .search{display:none;}
    .nav-links span.lbl{display:none;}
    .slide-mark{display:none;}
    .cta-local{flex-direction:column; text-align:center; align-items:center;}
  }

  /* ---------- FIX GRID MOBILE (celular) ---------- */
  /* En celulares el grid quedaba en 1 sola columna (productos gigantes) porque
     minmax() era muy ancho para el espacio disponible una vez restado el padding
     del .wrap. Se reduce el padding lateral y el piso de minmax() SOLO en mobile,
     para que entren 2 columnas como en una app de celular. No toca desktop/tablet. */
  @media (max-width:640px){
    .wrap{padding:0 16px;}
    .subrubro-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px;}
    .rubros-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px;}
  }


  /* ---------- FIX MOBILE: buscador visible + panel de categorias/filtros colapsable ---------- */
  /* Pedido del usuario, comparando con "Avellaneda a un Toque": en celular
     quiere la barra de busqueda visible (antes se ocultaba a proposito) y
     que al entrar a un rubro/subrubro se vean los productos de una, con las
     categorias/filtros colapsados detras de un boton (antes la sidebar
     entera quedaba siempre abierta arriba de los productos). Solo mobile:
     en desktop el buscador del header y la sidebar quedan igual que antes. */
  .mobile-filtros-toggle{display:none;}
  @media (max-width:720px){
    .nav{grid-template-columns:1fr auto; grid-template-rows:auto auto; row-gap:10px;}
    .logo{grid-column:1; grid-row:1;}
    .nav-links{grid-column:2; grid-row:1;}
    .search{display:flex; grid-column:1/-1; grid-row:2; max-width:none; margin:0;}

    .mobile-filtros-toggle{
      display:flex; align-items:center; gap:8px; width:100%;
      background:#fff; border:1.5px solid var(--line); border-radius:12px;
      padding:11px 16px; margin-bottom:14px; font-size:14px; font-weight:700;
      color:var(--ink);
    }
    .mobile-filtros-toggle svg{flex-shrink:0; color:var(--plum);}
    .search-sidebar{display:none;}
    .search-sidebar.mobile-open{
      display:block; margin-bottom:18px; padding:16px;
      background:var(--paper-2); border-radius:14px; border:1px solid var(--line);
    }
  }


  /* ---------- FIX MOBILE: header se desbordaba (Sumá tu local + Iniciar sesión
     se superponian/cortaban y por eso la barra de busqueda quedaba mas abajo
     de lo debido) ----------
     "+ Sumá tu local" del header ya existe como CTA grande mas abajo, en la
     pestaña Inicio (seccion "¿Tenés un local en Once?"), y tambien como link
     "Mi local" en el pie de pagina. En mobile alcanza con Favoritos + Iniciar
     sesión arriba (como en apps de referencia tipo Avellaneda a un Toque, que
     no repiten esa accion en el header). Asi el header entra en 1 sola linea
     y la barra de busqueda queda pegada arriba, no mas abajo. Solo mobile,
     no toca desktop/tablet. */
  @media (max-width:720px){
    .nav-links .btn-sumar{display:none;}
  }

  /* ---------- FIX: mapa en blanco en "Info del local" en celular ----------
     El contenedor del mapa (#detailMediaLocal, clases .detail-media +
     .detail-media-map) no tenia un "width" propio en mobile: solo
     "max-width:320px; margin:0 auto" heredado de .detail-media. Sin un
     ancho explicito, un contenedor vacio (el codigo lo vacia justo antes
     de crear el mapa de Google) se "encoge" a 0px de ancho -- confirmado
     midiendolo (getBoundingClientRect da width:0). Google Maps, creado
     dentro de un recuadro de 0px de ancho, queda con los "tiles" rotos/en
     blanco para siempre, sin importar que la pestaña ya este visible. Fix:
     fijar width:100% (hasta el mismo max-width:320px de siempre) para que
     el recuadro tenga un ancho real sin depender de si tiene contenido.
     Solo afecta a .detail-media-map (exclusivo del mapa) -- el recuadro de
     fotos del producto (#detailMedia, sin esa clase) no se toca. */
  @media (max-width:720px){
    .detail-media-map{width:100%;}
  }
  /* ---------- FIX: franja de "Envíos a todo el país / Mayor y menor / ..."
     probada con usuarios reales (versión interna de prueba) y confundida con
     una fila de botones, por los 4 colores sólidos tipo "pill" uno al lado
     del otro (cada uno se veía como un botón distinto). Se reemplaza por un
     cartel único, de un solo color neutro, que va rotando un mensaje a la vez
     (mismo mecanismo que el carrusel de arriba: franja + puntitos, ver
     initFeatureCarousel() en script.js). No tiene onclick ni cursor de botón:
     es puramente informativo. Las reglas viejas de .feature-strip/.feature-pill
     de más arriba quedan sin usar (no se borraron por las dudas de que algo
     más las referencie), pero ya no las genera ningún HTML. */
  .feature-carousel{
    overflow:hidden; border-radius:14px; background:var(--paper-2);
    border:1px solid var(--line); margin:24px 0;
  }
  .feature-carousel-track{display:flex; transition:transform .5s ease;}
  .feature-slide{
    flex:0 0 100%; display:flex; align-items:center; justify-content:center;
    gap:10px; padding:14px 20px; font-family:'Space Mono',monospace;
    font-size:12.5px; letter-spacing:0.3px; color:var(--ink); text-align:center;
    cursor:default;
  }
  .feature-slide-ic{font-size:16px; flex-shrink:0;}
  .feature-dots{display:flex; gap:7px; justify-content:center; margin-top:10px;}
  .feature-dot{width:7px; height:7px; border-radius:50%; background:var(--line); transition:all .25s;}
  .feature-dot.active{background:var(--coral); width:22px; border-radius:5px;}

  /* ---------- Descuentos/promos del producto (cartel "-XX% OFF", cuotas
     sin interés, descuento por efectivo/transferencia, descuento por
     compra grande, "Ver más detalles"). Pedido del usuario con captura de
     referencia de otro sitio. El "-XX% OFF" se calcula solo a partir de
     precio/precio anterior (no hay que cargar el porcentaje a mano). ---------- */
  .card-off{display:inline-block; background:var(--coral); color:#fff; font-family:'Space Mono',monospace; font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; margin-right:6px; vertical-align:middle;}
  .detail-off-badge{display:inline-block; background:var(--coral); color:#fff; font-family:'Space Mono',monospace; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; margin-right:10px; vertical-align:middle;}
  .detail-precio-anterior{font-size:14px; color:#9a8f95; text-decoration:line-through; font-weight:400; margin-top:2px;}
  .detail-descuentos{margin-top:10px;}
  .detail-desc-lineas{margin-bottom:8px;}
  .detail-desc-line{font-size:13.5px; color:var(--ink); background:var(--paper-2); border-radius:8px; padding:7px 12px; margin-bottom:6px; font-weight:600;}
  .detail-ver-mas{display:block; background:none; border:none; padding:0; margin:0 0 10px; font-size:13px; font-weight:700; color:var(--plum); text-decoration:underline; cursor:pointer;}
  .detail-info-pago{font-size:13.5px; color:var(--ink); background:var(--paper-2); border-radius:8px; padding:10px 12px; margin-bottom:10px; white-space:pre-wrap; line-height:1.5;}
  .detail-desc-mayor{font-size:13.5px; font-weight:700; color:var(--coral); background:rgba(226,84,58,0.08); border:1px solid rgba(226,84,58,0.25); border-radius:8px; padding:8px 12px;}