@font-face { font-family:'Inter'; font-weight:400; src:url('/letras/Inter-400.woff2') format('woff2'); font-display:swap; }
  @font-face { font-family:'Inter'; font-weight:500 650; src:url('/letras/Inter-600.woff2') format('woff2'); font-display:swap; }
  @font-face { font-family:'Inter'; font-weight:700; src:url('/letras/Inter-700.woff2') format('woff2'); font-display:swap; }
  :root { --negro:#0E0E0E; --gris:#6B6B6B; --tarjeta:#F1F1F0; --linea:#E4E4E2; --rojo:#C0261B; --ease:cubic-bezier(0.16,1,0.3,1); --ancho:1240px; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; font:400 15px/1.5 'Inter', system-ui, sans-serif; color:var(--negro); background:#fff; -webkit-tap-highlight-color:transparent; }
  button { font-family:inherit; }
  .caja { max-width:var(--ancho); margin:0 auto; padding:0 12px; }
  img { display:block; }

  /* ---------- barra ---------- */
  header { position:sticky; top:0; z-index:20; background:rgb(255 255 255 / 86%); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .barra { display:flex; align-items:center; gap:2px; height:60px; padding:0 6px 0 18px; max-width:var(--ancho); margin:0 auto; }
  .logo { color:var(--negro); text-decoration:none; line-height:1; margin-right:auto; margin-left:-.03em; position:relative; top:-2px; }
  nav.menu { display:none; gap:28px; margin-right:auto; }
  nav.menu a { color:var(--negro); text-decoration:none; font-size:14px; font-weight:500; }
  nav.menu a:hover { text-decoration:underline; text-underline-offset:4px; }
  .ico { width:44px; height:44px; display:grid; place-items:center; background:none; border:0; color:var(--negro); cursor:pointer; position:relative; border-radius:50%; }
  .ico:hover { background:var(--tarjeta); }
  .ico svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .ico .n { position:absolute; top:6px; right:5px; min-width:16px; height:16px; border-radius:8px; background:var(--negro); color:#fff; font-size:10px; font-weight:600; display:none; place-items:center; padding:0 4px; }
  .ico .n.ver { display:grid; }
  .lugar { display:none; max-width:var(--ancho); margin:0 auto; padding:0 18px 8px; }
  .lugar.ver { display:block; }
  .lugar button { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--gris); background:none; border:0; padding:0; min-height:32px; cursor:pointer; }
  .lugar button u { color:var(--negro); text-underline-offset:3px; }
  .lugar svg { width:14px; height:14px; fill:var(--negro); }

  /* ---------- portada ---------- */
  .hero { background:var(--tarjeta); border-radius:22px; padding:30px 20px 0; overflow:hidden; display:grid; position:relative; }
  .chip { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; background:#fff; border-radius:999px; padding:5px 12px; justify-self:start; }
  .chip i { width:6px; height:6px; border-radius:50%; background:var(--negro); }
  .hero h1 { font-size:clamp(40px, 11vw, 84px); font-weight:500; line-height:1; letter-spacing:-.045em; margin:18px 0 12px; }
  .hero h1 .p { display:inline-block; opacity:0; transform:translateY(.35em); filter:blur(6px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); }
  .hero h1.entra .p { opacity:1; transform:none; filter:none; }
  .hero h1 mark { background:var(--negro); color:#fff; padding:0 .12em; border-radius:3px; }
  .hero p { color:var(--gris); font-size:16px; margin:0 0 22px; max-width:30ch; }
  .btn { display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:500; color:var(--negro); background:#fff; border:0; border-radius:999px; padding:0 7px 0 20px; min-height:50px; cursor:pointer; text-decoration:none; justify-self:start; box-shadow:0 1px 2px rgb(0 0 0 / 8%); transition:transform .2s var(--ease); }
  .btn:active { transform:scale(.97); }
  .btn span { width:36px; height:36px; border-radius:50%; background:var(--negro); color:#fff; display:grid; place-items:center; transition:transform .3s var(--ease); }
  .btn:hover span { transform:rotate(45deg); }
  .hero .foto { position:relative; margin:18px auto -14px; width:min(100%, 320px); }
  .hero .foto img { width:100%; animation:flota 6s ease-in-out infinite; }
  @keyframes flota { 50% { transform:translateY(-8px); } }
  .hero .etq { position:absolute; font-size:11px; font-weight:500; background:#fff; border-radius:999px; padding:5px 10px; display:flex; gap:6px; align-items:center; box-shadow:0 4px 14px -6px rgb(0 0 0 / 25%); white-space:nowrap; }
  .hero .etq i { width:6px; height:6px; border-radius:50%; background:var(--negro); }

  /* ---------- por qué ---------- */
  .razones { display:grid; gap:10px; margin-top:36px; }
  .razon { background:var(--tarjeta); border-radius:18px; padding:18px; }
  .razon .r-ico { width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center; margin-bottom:26px; }
  .razon svg { width:16px; height:16px; fill:none; stroke:var(--negro); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .razon h3 { margin:0; font-size:16px; font-weight:500; letter-spacing:-.01em; }
  .razon p { margin:3px 0 0; color:var(--gris); font-size:14px; }
  .chulo { width:52px; height:52px; display:block; margin:0 0 14px; fill:none; stroke:var(--negro); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
  .chulo circle { stroke-dasharray:151; stroke-dashoffset:151; animation:trazo .6s cubic-bezier(.65,0,.35,1) forwards; }
  .chulo path { stroke-dasharray:36; stroke-dashoffset:36; animation:trazo .35s cubic-bezier(.65,0,.35,1) .5s forwards; }
  @keyframes trazo { to { stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce) { .chulo circle, .chulo path { animation:none; stroke-dashoffset:0; } }
  .letra-chica { margin:28px 0 0; color:var(--gris); font-size:12px; line-height:1.5; }

  /* ---------- tienda ---------- */
  .sec { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:46px 6px 16px; }
  .sec h2 { margin:0; font-size:clamp(24px, 6vw, 36px); font-weight:500; letter-spacing:-.035em; line-height:1.1; }
  .sec p { margin:4px 0 0; color:var(--gris); font-size:14px; }
  .filtros { display:flex; gap:8px; padding:0 6px 18px; overflow-x:auto; scrollbar-width:none; }
  .filtros button { font-size:13px; font-weight:500; border:1px solid var(--linea); background:#fff; color:var(--negro); border-radius:999px; padding:0 16px; min-height:40px; cursor:pointer; white-space:nowrap; transition:background .2s, color .2s; }
  .filtros button[aria-pressed="true"] { background:var(--negro); color:#fff; border-color:var(--negro); }
  .rejilla { display:grid; grid-template-columns:1fr 1fr; gap:24px 10px; padding-bottom:20px; }
  .prod { cursor:pointer; transition:opacity .35s var(--ease), transform .45s var(--ease); }
  .prod.sale { opacity:0; transform:scale(.94); }
  .prod .foto { position:relative; aspect-ratio:4/5; background:var(--tarjeta); border-radius:16px; display:grid; place-items:center; overflow:hidden; }
  .prod .foto img { width:96%; transition:transform .7s var(--ease), opacity .25s; }
  .prod:hover .foto img { transform:scale(1.07); }
  .prod .ir { position:absolute; right:8px; bottom:8px; width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:13px; transition:background .2s, color .2s; }
  .prod:hover .ir { background:var(--negro); color:#fff; }
  .nombre { font-size:14px; font-weight:500; letter-spacing:-.01em; margin:10px 2px 0; line-height:1.3; }
  .fila { display:flex; justify-content:space-between; align-items:center; margin:3px 2px 0; gap:6px; }
  .precio { font-size:13px; color:var(--gris); }
  .precio b { color:var(--negro); font-weight:500; }
  .verprecio { font-size:13px; font-weight:500; color:var(--negro); background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:28px; }
  .bolitas { display:flex; gap:5px; }
  .bolitas button { width:16px; height:16px; border-radius:50%; border:1px solid #c9c9c6; padding:0; cursor:pointer; position:relative; }
  .bolitas button::after { content:''; position:absolute; inset:-8px; }
  .bolitas button[aria-pressed="true"] { outline:1.5px solid var(--negro); outline-offset:2px; }

  /* ---------- preguntas ---------- */
  .preguntas { border-top:1px solid var(--linea); }
  details { border-bottom:1px solid var(--linea); }
  summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 6px; font-size:16px; font-weight:500; cursor:pointer; min-height:44px; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:'+'; font-size:22px; font-weight:400; transition:transform .3s var(--ease); }
  details[open] summary::after { transform:rotate(45deg); }
  details p { margin:0; padding:0 6px 18px; color:var(--gris); max-width:60ch; }

  footer { margin-top:60px; background:var(--negro); color:#fff; border-radius:22px 22px 0 0; padding:40px 24px calc(30px + env(safe-area-inset-bottom)); }
  footer .logo { color:#fff; font-size:56px; display:block; margin:0 0 12px -.065em; }  /* la Didot trae aire a la izquierda */
  footer p { color:#a9a9a9; margin:0 0 20px; font-size:14px; max-width:36ch; }
  footer a { color:#fff; font-size:14px; }
  footer .pie { display:flex; flex-wrap:wrap; gap:14px 26px; }

  /* ---------- ventanas ---------- */
  .velo { position:fixed; inset:0; z-index:50; background:rgb(14 14 14 / 45%); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
  .velo.abierta { opacity:1; pointer-events:auto; }
  .centro { display:flex; align-items:center; justify-content:center; padding:20px; }
  .ventana { width:100%; max-width:420px; background:#fff; border-radius:22px; padding:24px 18px 18px; transform:translateY(14px) scale(.97); transition:transform .45s var(--ease); }
  .velo.abierta .ventana { transform:none; }
  .ventana h3 { margin:0 0 16px; font-size:26px; font-weight:500; letter-spacing:-.035em; }
  .campo { position:relative; }
  .campo input { width:100%; font:400 16px 'Inter'; color:var(--negro); background:var(--tarjeta); border:1.5px solid transparent; border-radius:14px; padding:0 16px; min-height:54px; outline:none; transition:border-color .2s, background .2s; }
  .campo input:focus { border-color:var(--negro); background:#fff; }
  .campo.error input { border-color:var(--rojo); background:#fff; animation:tiembla .35s; }
  @keyframes tiembla { 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
  .msj { display:none; color:var(--rojo); font-size:13px; font-weight:500; margin:8px 2px 0; }
  .campo.error + .msj { display:block; }
  .sugs { list-style:none; margin:8px 0 0; padding:0; }
  .sugs li button { width:100%; display:flex; justify-content:space-between; gap:10px; align-items:center; background:none; border:0; border-radius:10px; padding:0 10px; min-height:44px; font-size:15px; color:var(--negro); cursor:pointer; text-align:left; }
  .sugs li button:hover, .sugs li button.activa { background:var(--tarjeta); }
  .sugs li small { color:var(--gris); font-size:13px; white-space:nowrap; }
  .ok { width:100%; margin-top:12px; font-size:15px; font-weight:500; color:#fff; background:var(--negro); border:0; border-radius:999px; min-height:52px; cursor:pointer; }
  .ok:disabled { opacity:.25; cursor:default; }

  /* ficha: hoja desde abajo (celular), dos columnas (PC) — Hudson Row */
  .ficha { position:absolute; left:0; right:0; bottom:0; max-height:92%; overflow:auto; background:#fff; border-radius:22px 22px 0 0; padding:10px 14px calc(18px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .5s var(--ease); }
  .velo.abierta .ficha { transform:none; }
  .ficha .asa { width:40px; height:5px; border-radius:3px; background:#d6d6d3; margin:0 auto 10px; }
  .ficha .f-foto { background:var(--tarjeta); border-radius:16px; aspect-ratio:1; display:grid; place-items:center; overflow:hidden; }
  .ficha .f-foto { position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
  .ficha .f-foto img { width:92%; pointer-events:none; transition:transform .25s var(--ease); }
  .ficha .f-foto.sin img { transition:none; }
  .z-pista { position:absolute; right:10px; bottom:10px; background:#fff; border-radius:999px; font-size:12px; font-weight:500; padding:6px 11px; pointer-events:none; transition:opacity .2s; }
  @media (hover:hover) and (pointer:fine) { .ficha .f-foto { cursor:zoom-in; } .ficha .f-foto:hover .z-pista { opacity:0; } }
  @media (prefers-reduced-motion: reduce) { .ficha .f-foto img { transition:none; } }
  .m-fila { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 0 6px; }
  .m-fila::-webkit-scrollbar { display:none; }
  .m-fila .prod { flex:0 0 min(62%, 250px); scroll-snap-align:start; min-width:0; }
  @media (min-width:880px) { .m-fila { overflow:visible; } .m-fila .prod { flex:1 1 0; max-width:250px; } }
  .m-num { position:absolute; left:10px; top:6px; font-size:44px; font-weight:500; letter-spacing:-.05em; line-height:1; color:var(--negro); z-index:1; pointer-events:none; }
  .ficha .f-info { padding:16px 4px 0; }
  .ficha h3 { margin:0; font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.15; }
  .ficha .tela { color:var(--gris); font-size:14px; margin:4px 0 0; }
  .ficha .f-precio { font-size:18px; font-weight:500; margin:12px 0 0; }
  .ficha .f-precio small { color:var(--gris); font-size:13px; font-weight:400; }
  .rot { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); margin:20px 0 8px; }
  .opciones { display:flex; gap:8px; flex-wrap:wrap; }
  .opciones button { min-width:52px; min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--linea); background:#fff; font-size:14px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
  .opciones button[aria-pressed="true"] { border-color:var(--negro); background:var(--negro); color:#fff; }
  .opciones button[aria-pressed="true"] .pinta { border-color:#fff; }
  .opciones .pinta { width:14px; height:14px; border-radius:50%; border:1px solid #bbb; }
  .cerrar { position:absolute; top:12px; right:12px; width:44px; height:44px; border-radius:50%; border:0; background:var(--tarjeta); cursor:pointer; font-size:18px; display:grid; place-items:center; z-index:2; }

  /* bolsa: se desliza desde la derecha — aimen */
  .bolsa { position:absolute; top:0; right:0; bottom:0; width:min(420px, 100%); background:#fff; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .5s var(--ease); }
  .velo.abierta .bolsa { transform:none; }
  .bolsa .b-cab { display:flex; justify-content:space-between; align-items:center; padding:16px 12px 10px 20px; }
  .bolsa h3 { margin:0; font-size:22px; font-weight:500; letter-spacing:-.03em; }
  .bolsa .b-lista { flex:1; overflow:auto; padding:0 20px; }
  .item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--linea); }
  .item .i-foto { width:76px; height:86px; border-radius:12px; background:var(--tarjeta); display:grid; place-items:center; flex:none; }
  .item .i-foto img { width:92%; }
  .item .i-txt { flex:1; font-size:14px; }
  .item .i-txt b { font-weight:500; display:block; }
  .item .i-txt span { color:var(--gris); font-size:13px; }
  .cant { display:inline-flex; align-items:center; border:1px solid var(--linea); border-radius:999px; margin-top:8px; }
  .cant button { width:36px; height:34px; border:0; background:none; cursor:pointer; font-size:16px; }
  .cant span { min-width:18px; text-align:center; color:var(--negro) !important; font-size:14px !important; }
  .bolsa .b-pie { padding:16px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--linea); }
  .total { display:flex; justify-content:space-between; font-size:17px; font-weight:500; margin-bottom:4px; }
  .b-nota { color:var(--gris); font-size:13px; margin:0 0 12px; }
  .vacia { color:var(--gris); padding:30px 0; text-align:center; }

  /* aparecer al bajar */
  .rev { opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .rev.ver { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; }
    .rev, .hero h1 .p { opacity:1; transform:none; filter:none; }
  }

  /* ---------- PC ---------- */
  @media (min-width: 760px) {
    .caja { padding:0 28px; }
    .barra { height:72px; padding:0 22px 0 28px; }
    .logo { font-size:32px; margin-right:48px; }
    nav.menu { display:flex; }
    .ico.solo-cel { display:none; }
    .lugar { padding:0 28px 10px; }
    .hero { grid-template-columns:1.1fr .9fr; align-items:center; padding:56px 0 0 56px; min-height:540px; border-radius:28px; }
    .hero .txt { padding-bottom:56px; }
    .hero .foto { margin:0 auto; width:min(100%, 470px); align-self:end; }
    .razones { grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:16px; }
    .razon { padding:22px; }
    .sec { padding:80px 0 20px; }
    .filtros { padding:0 0 22px; }
    .rejilla { grid-template-columns:repeat(4, 1fr); gap:34px 16px; }
    .nombre { font-size:15px; }
    .preguntas-c { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; }
    footer { border-radius:28px 28px 0 0; padding:64px 56px 40px; }
    footer .logo { font-size:120px; }
    .ficha { left:50%; top:50%; bottom:auto; right:auto; width:min(980px, 92vw); max-height:88vh; border-radius:24px; padding:16px; display:grid; grid-template-columns:1.1fr .9fr; gap:28px;
             transform:translate(-50%, -46%) scale(.97); opacity:0; transition:transform .5s var(--ease), opacity .3s; }
    .velo.abierta .ficha { transform:translate(-50%, -50%); opacity:1; }
    .ficha .asa { display:none; }
    .ficha .f-info { padding:48px 20px 20px 0; }
    .ficha h3 { font-size:32px; }
  }
  @media (min-width: 1100px) { .hero h1 { font-size:92px; } }

  /* ---------- v6 ---------- */
  [hidden] { display:none !important; }
  [id] { scroll-margin-top:110px; }
  .chip b { font-weight:600; }
  .wa { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:30; display:flex; align-items:center; gap:8px; background:var(--negro); color:#fff; text-decoration:none; border-radius:999px; padding:0 18px 0 14px; min-height:52px; font-size:14px; font-weight:500; box-shadow:0 10px 30px -10px rgb(0 0 0 / 45%); transition:transform .2s var(--ease); }
  .wa:active { transform:scale(.96); }
  .wa svg { width:22px; height:22px; fill:#fff; }
  .cerrar-c { position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; border:0; background:var(--tarjeta); cursor:pointer; display:grid; place-items:center; }
  .cerrar-c svg, .cerrar svg { width:16px; height:16px; stroke:var(--negro); stroke-width:2.2; stroke-linecap:round; fill:none; }
  .ventana { position:relative; }

  /* puesta y reseñas */
  .puesta { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .puesta figure { margin:0; position:relative; aspect-ratio:3/4; border-radius:16px; overflow:hidden; background:var(--tarjeta); }
  .puesta img { width:100%; height:100%; object-fit:cover; }
  .puesta figcaption { position:absolute; left:10px; bottom:10px; font-size:12px; font-weight:500; background:#fff; border-radius:999px; padding:4px 10px; }
  .falta { display:grid; place-items:center; text-align:center; color:var(--gris); font-size:13px; padding:16px; height:100%; border:1.5px dashed #cfcfcc; border-radius:16px; }
  .resenas { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
  .resena { flex:0 0 82%; scroll-snap-align:start; background:var(--tarjeta); border-radius:18px; padding:12px; }
  .resena .r-foto { aspect-ratio:1; border-radius:12px; background:#e3e3e0; margin-bottom:12px; }
  .resena .estrellas { letter-spacing:2px; font-size:13px; }
  .resena p { margin:6px 0 8px; font-size:14px; }
  .resena small { color:var(--gris); font-size:13px; }
  .ejemplo { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#8a5a00; background:#fff3d6; border-radius:6px; padding:3px 8px; margin:0 6px 12px; }
  .nosotros { background:var(--tarjeta); border-radius:22px; padding:26px 20px; margin-top:46px; }
  .nosotros h2 { margin:0 0 10px; font-size:clamp(24px, 6vw, 36px); font-weight:500; letter-spacing:-.035em; }
  .nosotros p { margin:0 0 10px; color:var(--gris); max-width:60ch; }

  /* ficha v6 */
  .galeria { display:flex; gap:8px; margin-top:8px; overflow-x:auto; scrollbar-width:none; }
  .galeria button { flex:none; width:64px; height:64px; border-radius:12px; border:1.5px solid transparent; background:var(--tarjeta); padding:0; cursor:pointer; overflow:hidden; display:grid; place-items:center; font-size:10px; color:var(--gris); line-height:1.2; }
  .galeria button[aria-pressed="true"] { border-color:var(--negro); }
  .galeria img { width:100%; height:100%; object-fit:cover; }
  .f-foto .falta { border:0; }
  .verso { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; background:var(--tarjeta); border-radius:999px; padding:5px 11px; margin-top:12px; }
  .rot-fila { display:flex; justify-content:space-between; align-items:baseline; }
  .enlace { font-size:13px; font-weight:500; color:var(--negro); background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:32px; }
  .botones { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:22px; }
  .botones .ok { margin-top:0; }
  .ok.claro { background:#fff; color:var(--negro); border:1.5px solid var(--negro); }
  .llega { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--gris); margin:14px 0 0; }
  .llega svg { width:16px; height:16px; flex:none; margin-top:2px; fill:none; stroke:var(--negro); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .duda { display:block; text-align:center; font-size:13px; color:var(--gris); margin-top:12px; }
  .duda a { color:var(--negro); font-weight:500; }

  /* tabla de tallas */
  .tabla { width:100%; border-collapse:collapse; font-size:14px; margin-top:6px; }
  .tabla th, .tabla td { text-align:left; padding:11px 6px; border-bottom:1px solid var(--linea); }
  .tabla th { font-size:12px; color:var(--gris); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
  .nota { color:var(--gris); font-size:13px; margin:12px 0 0; }

  /* bolsa v6: pasos */
  .aviso { display:flex; gap:8px; background:#fff3d6; color:#5c3d00; border-radius:12px; padding:10px 12px; font-size:13px; margin:10px 0 0; }
  .aviso.verde { background:#e3f4ea; color:#145c33; }
  .descuento { display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px dashed #cfcfcc; border-radius:12px; padding:10px 12px; margin-top:12px; font-size:14px; }
  .descuento button { font-size:13px; font-weight:500; border:0; border-radius:999px; background:var(--negro); color:#fff; padding:0 14px; min-height:36px; cursor:pointer; white-space:nowrap; }
  .descuento button[aria-pressed="true"] { background:#fff; color:var(--negro); border:1px solid var(--negro); }
  .linea-t { display:flex; justify-content:space-between; font-size:14px; color:var(--gris); margin-bottom:4px; }
  .form { display:grid; gap:12px; padding:4px 0 10px; }
  .form label { display:grid; gap:5px; font-size:13px; font-weight:500; }
  .form input:not([type=checkbox]) { font:400 16px 'Inter'; color:var(--negro); background:var(--tarjeta); border:1.5px solid transparent; border-radius:12px; padding:0 14px; min-height:50px; outline:none; }
  .form input:focus { border-color:var(--negro); background:#fff; }
  .form .ayuda { color:var(--gris); font-weight:400; font-size:12px; }
  .ciudad-fila { display:flex; justify-content:space-between; align-items:center; background:var(--tarjeta); border-radius:12px; padding:0 8px 0 14px; min-height:50px; font-size:15px; }
  .check { display:flex !important; grid-template-columns:none; gap:10px !important; align-items:flex-start; font-weight:400 !important; color:var(--gris); }
  .check input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--negro); flex:none; }
  .atras { display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:500; background:none; border:0; padding:0 4px; min-height:44px; min-width:44px; cursor:pointer; }
  .listo-ico { width:56px; height:56px; border-radius:50%; background:var(--negro); display:grid; place-items:center; margin:20px 0 14px; }
  .listo-ico svg { width:26px; height:26px; stroke:#fff; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .pago { background:var(--tarjeta); border-radius:16px; padding:16px; margin:14px 0; font-size:14px; }
  .pago div { display:flex; justify-content:space-between; padding:6px 0; }
  .pago b { font-weight:600; }

  /* buscador y menú */
  .buscador { position:absolute; top:0; left:0; right:0; background:#fff; border-radius:0 0 22px 22px; padding:14px 14px 18px; transform:translateY(-100%); transition:transform .45s var(--ease); max-height:80%; overflow:auto; }
  .velo.abierta .buscador { transform:none; }
  .b-barra { display:flex; gap:8px; align-items:center; }
  .b-barra input { flex:1; font:400 16px 'Inter'; background:var(--tarjeta); border:1.5px solid transparent; border-radius:999px; padding:0 18px; min-height:50px; outline:none; }
  .b-barra input:focus { border-color:var(--negro); background:#fff; }
  .resultados { list-style:none; padding:0; margin:10px 0 0; }
  .resultados button { width:100%; display:flex; gap:12px; align-items:center; background:none; border:0; border-radius:12px; padding:6px; cursor:pointer; text-align:left; font-size:15px; }
  .resultados button:hover { background:var(--tarjeta); }
  .resultados .mini { width:52px; height:52px; border-radius:10px; background:var(--tarjeta); display:grid; place-items:center; flex:none; }
  .resultados .mini img { width:90%; }
  .resultados small { display:block; color:var(--gris); font-size:13px; }
  .menu-lat { position:absolute; top:0; right:0; bottom:0; width:min(340px, 88%); background:#fff; padding:14px 20px; transform:translateX(100%); transition:transform .45s var(--ease); display:flex; flex-direction:column; }
  .velo.abierta .menu-lat { transform:none; }
  .menu-lat a, .menu-lat button.m { display:flex; align-items:center; min-height:52px; font-size:20px; font-weight:500; letter-spacing:-.02em; color:var(--negro); text-decoration:none; border:0; background:none; padding:0; border-bottom:1px solid var(--linea); cursor:pointer; text-align:left; }
  .menu-lat button.m.sub { font-size:15px; color:var(--gris); padding-left:12px; min-height:44px; }

  /* ---------- v7 ---------- */
  footer .enlace { font-size:14px; font-weight:400; }
  footer .pie > * { display:inline-flex; align-items:center; min-height:44px; line-height:1; }
  footer .pie { gap:0 26px; }
  footer .logo { margin-left:0; }
  .verso-t { font-size:12.5px; font-weight:400; color:var(--gris); letter-spacing:0; margin:1px 2px 0; line-height:1.3; }
  .tabla.chica { font-size:13px; }
  .tabla.chica th, .tabla.chica td { padding:10px 4px; }
  .tabla.chica th { font-size:11px; letter-spacing:.03em; line-height:1.25; }

  /* completa el look (bolsa) */
  .look { margin:18px 0 6px; }
  .look h4 { margin:0; font-size:16px; font-weight:500; letter-spacing:-.01em; }
  .look > p { margin:2px 0 10px; color:var(--gris); font-size:13px; }
  .look-fila { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -20px; padding:0 20px 4px; }
  .look-it { flex:0 0 132px; scroll-snap-align:start; }
  .look-it .lf { position:relative; aspect-ratio:4/5; background:var(--tarjeta); border-radius:14px; display:grid; place-items:center; border:0; padding:0; width:100%; cursor:pointer; }
  .look-it .lf img { width:92%; }
  .look-it .mas { position:absolute; right:6px; bottom:6px; min-width:44px; height:44px; border-radius:999px; border:0; background:#fff; color:var(--negro); font-size:13px; font-weight:600; padding:0 12px; cursor:pointer; box-shadow:0 2px 8px -3px rgb(0 0 0 / 25%); transition:background .2s, color .2s, transform .2s var(--ease); }
  .look-it .mas:active { transform:scale(.94); }
  .look-it .mas.puesto { background:var(--negro); color:#fff; }
  .look-it b { display:block; font-size:13px; font-weight:500; margin:7px 2px 0; line-height:1.25; }
  .look-it small { display:block; font-size:12px; color:var(--gris); margin:1px 2px 0; }

  /* gracias y seguimiento: página completa */
  .pagina { position:absolute; inset:0; background:#fff; overflow:auto; opacity:0; transform:translateY(20px); transition:opacity .35s var(--ease), transform .5s var(--ease); }
  .velo.abierta .pagina { opacity:1; transform:none; }
  .pagina .p-cab { position:sticky; top:0; z-index:2; background:rgb(255 255 255 / 90%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 6px 0 18px; }
  .pagina .p-cuerpo { max-width:560px; margin:0 auto; padding:8px 20px calc(40px + env(safe-area-inset-bottom)); }
  .pagina h2 { margin:0; font-size:clamp(30px, 8vw, 44px); font-weight:500; letter-spacing:-.04em; line-height:1.05; }
  .pagina .sub { color:var(--gris); margin:8px 0 0; }
  .num-ped { display:inline-flex; gap:6px; font-size:13px; font-weight:500; background:var(--tarjeta); border-radius:999px; padding:5px 12px; margin-top:14px; }
  .bloque { background:var(--tarjeta); border-radius:18px; padding:16px; margin-top:16px; }
  .bloque h4 { margin:0 0 10px; font-size:15px; font-weight:600; }
  .bloque .pago { background:#fff; margin:0 0 12px; }
  .copiar { font-size:12px; font-weight:600; border:1px solid var(--linea); background:#fff; border-radius:999px; padding:0 12px; min-height:32px; margin-left:8px; cursor:pointer; }
  .copiar { position:relative; }
  .copiar::after { content:""; position:absolute; inset:-6px -4px; }
  .pago .llave { display:flex; align-items:center; }
  .pasos { list-style:none; padding:0; margin:4px 0 0; }
  .pasos li { display:grid; grid-template-columns:28px 1fr; gap:12px; padding-bottom:18px; position:relative; }
  .pasos li::before { content:''; position:absolute; left:13px; top:30px; bottom:2px; width:2px; border-radius:1px; background:#d9d9d6; }
  .pasos li:last-child { padding-bottom:0; }
  .pasos li:last-child::before { display:none; }
  .pasos li.hecho::before { background:var(--negro); }
  .pasos .pt { width:28px; height:28px; border-radius:50%; border:2px solid #cfcfcc; background:#fff; display:grid; place-items:center; }
  .pasos .pt svg { width:14px; height:14px; stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .pasos li.hecho .pt { background:var(--negro); border-color:var(--negro); }
  .pasos li.ahora .pt { border-color:var(--negro); }
  .pasos li.ahora .pt::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--negro); animation:late 1.6s ease-in-out infinite; }
  @keyframes late { 50% { transform:scale(.6); opacity:.5; } }
  .pasos b { display:block; font-size:15px; font-weight:500; line-height:28px; }
  .pasos li:not(.hecho):not(.ahora) b { color:var(--gris); }
  .pasos small { display:block; color:var(--gris); font-size:13px; margin-top:-2px; }
  .resumen .item:last-child { border-bottom:0; }
  .p-botones { display:grid; gap:8px; margin-top:20px; }
  .p-botones .ok { margin-top:0; display:grid; place-items:center; text-decoration:none; }
  .demo { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#8a5a00; background:#fff3d6; border-radius:6px; padding:3px 8px; margin-top:12px; }
  .form-v { display:grid; gap:12px; }
  .form-v label { display:grid; gap:5px; font-size:13px; font-weight:500; }
  .form-v input { font:400 16px 'Inter'; color:var(--negro); background:var(--tarjeta); border:1.5px solid transparent; border-radius:12px; padding:0 14px; min-height:50px; outline:none; }
  .form-v input:focus { border-color:var(--negro); background:#fff; }
  .form-v input.mal { border-color:var(--rojo); background:#fff; }

  @media (min-width: 760px) {
    .puesta { grid-template-columns:repeat(4, 1fr); gap:16px; }
    .resena { flex:0 0 calc(25% - 8px); }
    .nosotros { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; padding:48px 56px; border-radius:28px; margin-top:80px; }
    .wa { right:28px; bottom:28px; }
  }

  /* ---------- tienda real (nov-01): clases en vez de estilos en línea (la CSP no los deja) ---------- */
  .logo img { height:22px; width:auto; display:block; }
  footer .logo img { height:44px; filter:invert(1); }
  .p-cab .logo { margin:0; }
  .logo-btn { background:none; border:0; padding:11px 0; cursor:pointer; }
  .volver-t { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 14px 0 8px; margin-right:6px; border:0; border-radius:22px; background:var(--tarjeta); color:var(--negro); font:inherit; font-size:14px; font-weight:500; cursor:pointer; }
  .volver-t svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .chip-btn { border:0; cursor:pointer; font-family:inherit; }
  .preguntas.fin { align-self:end; }
  .fuerte { color:var(--negro); font-weight:500; }
  .enlace.alto { display:inline-flex; align-items:center; min-height:44px; }
  .enlace.blanco { color:#fff; }
  .enlace.sin-mayus { text-transform:none; letter-spacing:0; }
  footer .caja { padding:0; }
  .mt0 { margin-top:0; } .mt8 { margin-top:8px; }
  .ventana.larga { max-height:86vh; overflow:auto; }
  .menu-cerrar { display:flex; justify-content:flex-end; }
  .b-titulo { display:flex; align-items:center; gap:4px; }
  .cerrar.estatica { position:static; }
  .nota.centrada { text-align:center; }
  .nota.vacio { padding:10px 6px; }
  .descuento b { font-weight:600; } .descuento small { color:var(--gris); }
  .i-foto.blanca { background:#fff; }
  .look-it .rel { position:relative; }
  .pago .g-tit { text-align:right; }
  .ok.enlace-ok { display:grid; place-items:center; text-decoration:none; margin-top:0; }
  .total.arriba { margin:12px 0 0; }
  .b-nota.r-entrega { margin:2px 0 0; }
  .texto-largo { white-space:pre-line; }
  .trampa { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
  input.mal { border-color:var(--rojo); }
  .telas-dif { font-size:13px; color:var(--gris); margin:6px 0 0; min-height:1.5em; }
  /* etiqueta sobre el borde de la caja, no dentro; el espacio de arriba es para que no toque el título TELA */
  #fTela { padding-top:9px; }
  .opciones button:has(.reco) { position:relative; }
  .opciones .t-ultimas { font-size:10px; font-weight:600; letter-spacing:.02em; }
  .opciones button.agotada { color:var(--gris); text-decoration:line-through; border-style:dashed; }
  .opciones button.agotada[aria-pressed="true"] { background:#fff; color:var(--gris); border-color:var(--negro); }
  .dispo { font-size:13px; margin:10px 0 0; }
  .dispo a { color:inherit; font-weight:600; text-decoration:underline; }
  .bolitas { align-items:center; }
  .b-mas { font-size:11px; color:var(--gris); margin-left:2px; }
  .opciones .reco { position:absolute; top:-9px; left:12px; padding:2px 8px; border-radius:999px; background:#fff; color:var(--negro); border:1px solid var(--negro); font-size:10px; line-height:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
  .codigo-fila { display:flex; gap:8px; }
  .codigo-fila input { flex:1; }
  .codigo-msj { font-size:13px; margin:4px 0 0; color:var(--gris); }
  .codigo-msj.ok-txt { color:#1d6b34; }
  .error-txt { color:var(--rojo); font-size:14px; margin:8px 0 0; }
  .cargando { opacity:.6; pointer-events:none; }
  #turnstile:empty { display:none; }
  .rot-campo { font-size:13px; font-weight:500; margin-bottom:5px; }

  /* ---------- cuenta de cliente (nov-02, maqueta v3) ---------- */
  .ico .ini { position:absolute; inset:9px; border-radius:50%; background:var(--negro); color:#fff; font-size:13px; font-weight:600; display:grid; place-items:center; }
  .ico.con-ini svg { visibility:hidden; }
  .toast { position:fixed; left:12px; right:12px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:90; max-width:420px; margin:0 auto; background:var(--negro); color:#fff; border-radius:14px; padding:6px 8px 6px 16px; min-height:48px; font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgb(255 255 255 / 18%); box-shadow:0 10px 30px -10px rgb(0 0 0 / 45%); animation:sube .35s var(--ease); }
  .toast .enlace { padding:0 8px; min-height:40px; }
  @keyframes sube { from { transform:translateY(12px); opacity:0; } }
  .e-nota { margin-bottom:14px; }
  .codigo-6 { display:grid; gap:5px; margin-top:14px; }
  .codigo-6 input { font:500 28px 'Inter'; letter-spacing:.5em; text-align:center; padding:0 0 0 .5em; color:var(--negro); background:var(--tarjeta); border:1.5px solid transparent; border-radius:14px; min-height:60px; outline:none; width:100%; }
  .codigo-6 input:focus { border-color:var(--negro); background:#fff; }
  #fEntrar .check { margin-top:12px; font-size:13px; }
  .e-otro { display:flex; justify-content:space-between; gap:12px; margin-top:8px; }
  .e-otro .enlace { min-height:44px; }
  .e-otro .enlace:disabled { color:var(--gris); text-decoration:none; cursor:default; }
  #tsEntrar:empty { display:none; }

  .cta { max-width:560px; margin:0 auto; padding:4px 20px calc(40px + env(safe-area-inset-bottom)); }
  .cta .cta-sec { display:none; }
  .cta.en-seccion .cta-menu { display:none; }
  .cta.en-seccion .cta-sec { display:block; }
  .hola { display:flex; gap:12px; align-items:center; margin:6px 0 16px; }
  .foto-p { width:52px; height:52px; border-radius:50%; background:var(--tarjeta); display:grid; place-items:center; font-weight:600; font-size:19px; flex:none; }
  .hola h2 { margin:0; font-size:24px; font-weight:500; letter-spacing:-.035em; line-height:1.1; }
  .hola small { color:var(--gris); font-size:13px; overflow-wrap:anywhere; }
  .bienv, .en-camino { display:block; width:100%; text-align:left; background:var(--negro); color:#fff; border:0; border-radius:18px; padding:16px; margin-bottom:12px; font-family:inherit; }
  .en-camino { background:var(--tarjeta); color:var(--negro); cursor:pointer; }
  .bienv small, .en-camino small { display:block; font-size:12.5px; color:#a9a9a9; }
  .en-camino small { color:var(--gris); }
  .bienv b, .en-camino b { display:block; font-size:24px; font-weight:500; letter-spacing:-.03em; line-height:1.15; margin:2px 0 4px; }
  .bienv .b { margin-top:10px; background:#fff; color:var(--negro); border:0; border-radius:999px; padding:0 16px; min-height:40px; font:500 13px 'Inter'; cursor:pointer; }
  .filas { border-top:1px solid var(--linea); }
  .fila-m { display:flex; align-items:center; gap:12px; width:100%; padding:6px 2px; min-height:56px; border:0; border-bottom:1px solid var(--linea); background:none; font:500 15px 'Inter'; color:var(--negro); text-align:left; text-decoration:none; cursor:pointer; }
  .fila-m:hover, .fila-m.activa { background:linear-gradient(90deg, var(--tarjeta), #fff); }
  .fila-m .i { width:34px; height:34px; border-radius:50%; background:var(--tarjeta); display:grid; place-items:center; flex:none; }
  .fila-m .i svg { width:16px; height:16px; stroke:var(--negro); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .fila-m em { margin-left:auto; font-style:normal; color:var(--gris); font-size:13px; font-weight:400; }
  .fila-m .fl { color:#b5b5b2; font-size:18px; margin-left:auto; }
  .fila-m em + .fl { margin-left:0; }
  .fila-m small { display:block; font-weight:400; color:var(--gris); font-size:12.5px; line-height:1.35; }
  .fila-m.rojo { color:var(--rojo); }
  .salir { display:block; margin:18px auto 0; color:var(--gris); }
  .sub-cab { display:flex; align-items:center; gap:8px; margin:6px 0 14px; }
  .sub-cab h3 { margin:0; font-size:26px; font-weight:500; letter-spacing:-.035em; }
  .atras-c { width:40px; height:40px; border-radius:50%; border:0; background:var(--tarjeta); display:grid; place-items:center; cursor:pointer; flex:none; }
  .atras-c svg { width:18px; height:18px; stroke:var(--negro); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .sw { margin-left:auto; width:46px; height:28px; border-radius:14px; border:0; background:#d6d6d3; position:relative; flex:none; cursor:pointer; transition:background .2s; }
  .sw::before { content:""; position:absolute; inset:-8px 0; }
  .sw::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:left .25s var(--ease); }
  .sw[aria-checked="true"] { background:var(--negro); }
  .sw[aria-checked="true"]::after { left:21px; }
  .cta .t { background:var(--tarjeta); border-radius:18px; padding:14px; margin-bottom:10px; }
  .cta .t h4 { margin:0 0 10px; font-size:14px; font-weight:600; display:flex; justify-content:space-between; gap:8px; }
  .cta .t h4 span { font-weight:500; color:var(--gris); letter-spacing:.04em; }
  .cta .t p { margin:4px 0 0; font-size:13px; color:var(--gris); overflow-wrap:anywhere; }
  .ped { display:flex; gap:10px; align-items:center; margin-top:8px; }
  .mini-f { width:52px; height:64px; background:#fff; border-radius:10px; flex:none; display:grid; place-items:center; overflow:hidden; }
  .mini-f img { width:100%; height:100%; object-fit:contain; }
  .ped .d { font-size:13px; line-height:1.35; flex:1; }
  .ped .d b { display:block; font-size:14px; font-weight:500; }
  .ped .d span { color:var(--gris); }
  .acc { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .btn-c { font:500 13px 'Inter'; background:#fff; color:var(--negro); border:1px solid var(--linea); border-radius:999px; padding:0 14px; min-height:40px; display:inline-flex; align-items:center; text-decoration:none; cursor:pointer; white-space:nowrap; }
  .btn-c.n { background:var(--negro); color:#fff; border-color:var(--negro); }
  .btn-c.off { color:#a9a9a9; background:#f7f7f6; cursor:default; }
  .dias { font-size:13px; color:var(--gris); margin-top:10px; }
  .dias b { color:var(--negro); font-weight:600; }
  .favs { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .fav { display:grid; gap:6px; background:none; border:0; padding:0; text-align:left; font:500 13px 'Inter'; color:var(--negro); cursor:pointer; }
  .fav .mini-f { width:100%; height:auto; aspect-ratio:4/5; background:var(--tarjeta); border-radius:14px; }
  .fav.off { color:var(--gris); cursor:default; }
  .enlace-inv small { display:block; color:var(--gris); font-size:12.5px; }
  .enlace-inv b { font-weight:500; overflow-wrap:anywhere; }
  .cifras { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
  .cifras div { background:var(--tarjeta); border-radius:16px; padding:14px; }
  .cifras b { display:block; font-size:28px; font-weight:500; letter-spacing:-.03em; }
  .cifras small { color:var(--gris); font-size:13px; }
  .ok.peligro { background:var(--rojo); }
  .form.borrar { margin-top:14px; border-top:1px solid var(--linea); padding-top:14px; }
  .form.borrar .ok { margin-top:0; }
  @media (min-width: 1024px) {
    .cta { max-width:1040px; display:grid; grid-template-columns:340px 1fr; gap:48px; padding-top:20px; }
    .cta .cta-sec, .cta.en-seccion .cta-menu { display:block; }
    .cta-menu { position:sticky; top:80px; align-self:start; }
    .atras-c.solo-cel { display:none; }
    .favs { grid-template-columns:repeat(3, 1fr); }
  }
  .corazon { position:absolute; top:8px; right:8px; width:44px; height:44px; border-radius:50%; border:0; background:none; display:grid; place-items:center; cursor:pointer; padding:0; }
  .corazon::before { content:""; position:absolute; inset:6px; border-radius:50%; background:#fff; transition:transform .2s var(--ease); }
  .corazon:active::before { transform:scale(.88); }
  .corazon svg { position:relative; width:16px; height:16px; fill:none; stroke:var(--negro); stroke-width:1.9; stroke-linejoin:round; transition:fill .2s; }
  .corazon[aria-pressed="true"] svg { fill:var(--negro); }
  .f-tit { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .f-tit h3 { margin-right:0; }
  .guardar { display:inline-flex; align-items:center; gap:6px; flex:none; font:500 13px 'Inter'; color:var(--negro); background:#fff; border:1px solid var(--linea); border-radius:999px; padding:0 14px; min-height:40px; cursor:pointer; margin-top:4px; }
  .guardar svg { width:14px; height:14px; fill:none; stroke:var(--negro); stroke-width:1.9; stroke-linejoin:round; }
  .guardar[aria-pressed="true"] svg { fill:var(--negro); }
  .de-cuenta { display:inline-flex; align-items:center; gap:6px; justify-self:start; font-size:12px; font-weight:500; background:var(--tarjeta); border-radius:999px; padding:4px 11px; }
  .de-cuenta i { width:6px; height:6px; border-radius:50%; background:var(--negro); }

  /* ---------- arma tu outfit (js/outfit.js) ---------- */
  .outfit { display:grid; gap:20px; padding:0 6px 20px; }
  .o-foto { background:var(--tarjeta); border-radius:20px; overflow:hidden; }
  .o-foto canvas { display:block; width:100%; aspect-ratio:2/3; object-fit:contain; padding:18px 12px 4px; box-sizing:border-box; transition:opacity .25s; }
  .o-foto canvas[aria-busy="true"] { opacity:.6; }
  .o-vistas.filtros { padding:4px 12px 14px; flex-wrap:wrap; }
  .o-vistas.filtros button, .o-quien.filtros button { min-height:44px; }
  .o-quien.filtros { padding:0 0 4px; }
  .o-grupo { padding-top:16px; border-top:1px solid var(--linea); margin-top:16px; }
  .o-tit { margin:0 0 10px; font-size:14px; font-weight:600; }
  .o-tit b { font-weight:400; color:var(--gris); margin-left:6px; }
  .o-colores { display:flex; flex-wrap:wrap; gap:5px; }
  .o-colores button { width:38px; height:38px; border-radius:50%; padding:0; cursor:pointer; background:var(--c); border:1px solid rgb(0 0 0 / 14%); transition:transform .2s var(--ease); position:relative; }
  .o-colores button::after { content:''; position:absolute; inset:-3px; }
  @media (min-width: 760px) { .o-colores { gap:8px; } .o-colores button { width:44px; height:44px; } }
  .o-colores button:hover { transform:scale(1.06); }
  .o-colores button[aria-pressed="true"] { outline:2px solid var(--negro); outline-offset:3px; }
  .o-colores button:focus-visible { outline:2px solid var(--negro); outline-offset:3px; }
  .o-sugerir { margin-top:18px; background:none; border:0; padding:0; min-height:44px; font-size:14px; font-weight:500; color:var(--negro); text-decoration:underline; text-underline-offset:4px; cursor:pointer; text-align:left; }
  @media (min-width: 760px) {
    .outfit { grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:40px; align-items:start; padding:0 0 20px; }
    .o-foto canvas { aspect-ratio:4/5; padding:28px 20px 8px; }
    .o-vistas.filtros { padding:4px 20px 18px; }
    .o-panel { padding-top:8px; position:sticky; top:84px; }
  }
  @media (prefers-reduced-motion: reduce) { .o-colores button, .o-foto canvas { transition:none; } }

/* Diseño en la espalda del outfit */
.o-grupo select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--linea, #d8d8d6); border-radius: 12px; background: #fff; font: inherit; color: inherit; }
.o-colores button:disabled { opacity: .3; cursor: not-allowed; }
.o-nota { margin: 8px 0 0; font-size: .85rem; color: #6b6b68; }

  /* ---------- pedidos para grupos (index: franja; grupo.html: líder, miembro y lista). Del demo aprobado (versión A) ---------- */
  .g-franja { margin-top:10px; background:var(--negro); color:#fff; border-radius:22px; padding:26px 22px; display:grid; gap:16px; }
  .g-franja h2 { margin:0; font-size:clamp(24px, 5vw, 34px); font-weight:500; letter-spacing:-.03em; line-height:1.1; }
  .g-franja p { margin:6px 0 0; color:#bdbdbd; font-size:14px; }
  .g-franja .btn { justify-self:start; }
  .g-gl { display:grid; gap:22px; padding:24px 6px 10px; }
  .g-gl h1 { font-size:clamp(30px, 6vw, 52px); font-weight:500; letter-spacing:-.04em; line-height:1.02; margin:12px 0 0; }
  .g-gl > div > p { margin:10px 0 0; color:var(--gris); max-width:44ch; }
  .g-etq { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background:var(--tarjeta); border-radius:999px; padding:3px 9px; color:var(--gris); }
  .g-pasos { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
  .g-pasos li { display:flex; gap:12px; align-items:flex-start; font-size:14px; }
  .g-pasos i { flex:none; width:26px; height:26px; border-radius:50%; background:var(--negro); color:#fff; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:600; }
  .g-campo { display:block; margin:0 0 12px; font-size:13px; font-weight:600; }
  .g-campo input { display:block; width:100%; height:48px; margin-top:5px; border:1px solid transparent; background:var(--tarjeta); border-radius:12px; padding:0 14px; font:400 16px 'Inter', sans-serif; color:var(--negro); }
  .g-campo input:focus { outline:0; border-color:var(--negro); background:#fff; }
  .g-campo.error input { border-color:var(--rojo); background:#fff; }
  .g-tit { display:block; font-size:13px; font-weight:600; }
  .g-ops { display:flex; flex-wrap:wrap; gap:8px; margin:5px 0 14px; }
  .g-ops button { min-height:44px; min-width:48px; padding:0 13px; border-radius:12px; border:1px solid var(--linea); background:#fff; font:500 14px 'Inter', sans-serif; color:var(--negro); cursor:pointer; }
  .g-ops button[aria-pressed=true] { background:var(--negro); border-color:var(--negro); color:#fff; }
  .g-ir { display:block; width:100%; min-height:52px; border:0; border-radius:999px; background:var(--negro); color:#fff; font:600 15px 'Inter', sans-serif; cursor:pointer; text-align:center; text-decoration:none; line-height:52px; }
  .g-ir:disabled { background:#bdbdbd; cursor:default; }
  .g-ir2 { background:#fff; color:var(--negro); border:1px solid var(--linea); margin-top:8px; line-height:50px; }
  .g-tlista { display:grid; gap:8px; margin:12px 0 14px; }
  .g-top { position:relative; display:grid; grid-template-columns:1fr auto; column-gap:10px; text-align:left; padding:13px 14px; border:1px solid var(--linea); border-radius:14px; background:#fff; cursor:pointer; font-family:inherit; color:var(--negro); min-height:44px; }
  .g-top b { font-weight:600; font-size:14px; }
  .g-top small { grid-row:2; color:var(--gris); font-size:12px; }
  .g-pre { grid-column:2; grid-row:1 / 3; align-self:center; font-weight:600; font-size:13px; }
  .g-top[aria-pressed=true] { background:var(--negro); border-color:var(--negro); color:#fff; }
  .g-top[aria-pressed=true] small { color:#c9c9c9; }
  .g-sol { position:absolute; top:-9px; left:12px; padding:2px 8px; border-radius:999px; background:#fff; color:var(--negro); border:1px solid var(--negro); font-size:10px; line-height:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
  .g-cols { display:flex; flex-wrap:wrap; margin:2px 0 0 -6px; }
  .g-col { width:44px; height:44px; border:0; background:var(--c, #111); background-clip:content-box; padding:8px; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 8px #fff, inset 0 0 0 9px var(--linea); }
  .g-col[aria-pressed=true] { box-shadow:inset 0 0 0 5px #fff, inset 0 0 0 7px var(--negro); }
  .g-esc { display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; margin:6px 0 2px; }
  .g-esc div { background:var(--tarjeta); border-radius:10px; padding:7px 2px; text-align:center; }
  .g-esc small { display:block; font-size:11px; color:var(--gris); }
  .g-esc b { font-size:12px; font-weight:600; }
  .g-esc .si { background:var(--negro); color:#fff; }
  .g-esc .si small { color:#c9c9c9; }
  .g-nota { font-size:12px; color:var(--gris); margin:10px 0 14px; }
  .g-ok { background:var(--tarjeta); border-radius:14px; padding:14px; font-size:14px; margin-top:10px; }
  .g-error { color:var(--rojo); font-size:13px; margin:10px 0 0; min-height:1px; }
  .g-cel { border:1px solid var(--linea); border-radius:22px; padding:16px; background:#fff; min-width:0; max-width:560px; margin:24px auto 0; }
  .g-cel h1 { font-size:22px; font-weight:500; letter-spacing:-.025em; margin:0; line-height:1.15; }
  .g-sub { color:var(--gris); font-size:13px; margin:3px 0 12px; }
  .g-camf { background:var(--tarjeta); border-radius:14px; display:grid; place-items:center; height:220px; margin-bottom:12px; overflow:hidden; }
  .g-camf img { max-height:210px; max-width:100%; }
  .g-camf i { width:110px; height:110px; border-radius:50%; background:var(--c, #111); box-shadow:inset 0 0 0 1px var(--linea); }
  .g-bar { height:8px; background:var(--tarjeta); border-radius:8px; overflow:hidden; margin:6px 0 4px; }
  .g-bar i { display:block; height:100%; width:var(--p, 0%); background:var(--negro); transition:width .4s var(--ease); }
  .g-per { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; border-bottom:1px solid var(--linea); font-size:14px; }
  .g-per > span { min-width:0; overflow-wrap:anywhere; }
  .g-per small { color:var(--gris); }
  .g-per .g-acc { display:flex; gap:6px; flex:none; }
  .g-est { display:inline-flex; align-items:center; border:0; background:var(--tarjeta); border-radius:999px; padding:0 12px; min-height:44px; font:600 12px 'Inter', sans-serif; color:var(--negro); cursor:pointer; white-space:nowrap; }
  .g-est.si { background:var(--negro); color:#fff; }
  .g-est.fija { cursor:default; }
  .g-quitar { width:44px; height:44px; border:0; border-radius:50%; background:none; color:var(--gris); font-size:20px; cursor:pointer; }
  .g-tall { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px; }
  .g-tall span { background:var(--tarjeta); border-radius:9px; padding:6px 10px; font-size:13px; font-weight:600; }
  .g-tot { display:flex; justify-content:space-between; font-size:14px; padding:5px 0; }
  .g-tot b { font-weight:600; }
  .g-adv { background:var(--tarjeta); border-radius:12px; padding:10px 12px; font-size:13px; margin:0 0 12px; }
  .g-cabeza { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
  @media (min-width:880px) {
    .g-franja { grid-template-columns:1fr auto; align-items:center; padding:34px 40px; }
    .g-gl { grid-template-columns:1.05fr .95fr; padding:44px 20px 10px; gap:44px; }
    .g-cel { padding:24px; margin-top:36px; }
  }
  @media (prefers-reduced-motion: reduce) { .g-bar i { transition:none; } }

.ver-mas { display:block; margin:8px auto 32px; min-height:48px; padding:0 28px; border:1px solid var(--linea); border-radius:999px; background:#fff; color:var(--negro); font:inherit; font-weight:500; font-size:14px; cursor:pointer; }
.ver-mas[hidden] { display:none; }
.ver-mas:hover { background:var(--negro); color:#fff; }
.o-comprar { display:block; width:100%; margin-top:18px; min-height:52px; border:0; border-radius:999px; background:var(--negro); color:#fff; font:inherit; font-weight:600; font-size:15px; cursor:pointer; }
.o-comprar[hidden] { display:none; }
.o-comprar:hover { opacity:.88; }