/* assets/home.css?v=a530bb82cc - extraido de index.html el 20260920_162306.
   Contenido identico al que estaba inline; solo cambio de ubicacion. */

  @font-face{font-family:'Duddy Black';src:url('fonts/DuddyBlack.woff2?v=35963009f8') format('woff2'),url('fonts/DuddyBlack.woff?v=7999dcb852') format('woff'),url('fonts/DuddyBlack.otf?v=2be766de29') format('opentype');font-weight:400 900;font-style:normal;font-display:swap;}

  :root{
    color-scheme: light dark;
    --paper:#F3EADC;
    --paper-raised:#FBF5EB;
    --ink:#1D1712;
    --ink-soft:#6b5d4f;
    --line:#E3D6BF;
    --line-strong:#cbb98f;
    --accent:#CA2632;
    --accent-deep:#9c1c26;
    --accent-ink:#fff;
    --btn-gray:#4A443D;
    --btn-gray-deep:#302B25;
    --cream:#EEE6E2;
    --tresllamas:#B9752A;
    --chata:#C85C74;
    --muju:#2E7D74;
    --ari:#7C6A9C;
    --cuy:#4C7A8C;
    --yaw:#8C6E4A;
    --llamicorn:#B08A1E;
    --cuyesp:#3B5B8C;
    --churi:#6E8C4C;
    --asiy:#2E7D74;
    --pastel-yellow:#F6D34D;
    --pastel-blue:#AEDCDA;
    --pastel-pink:#F3B9C6;
    --pastel-green:#C7DDA8;
    --shadow: 0 2px 0 rgba(29,23,18,.9);
    --shadow-soft: 0 1px 2px rgba(29,23,18,.06), 0 8px 24px -12px rgba(29,23,18,.22);
    --radius: 18px;
    --font-display:'Duddy Black', ui-rounded, 'Segoe UI', sans-serif;
    --font-body:'Work Sans', system-ui, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, monospace;
    /* Colores del hero (texto y degradado sobre la foto), editables desde
       LlamiWeb — estos son los valores por defecto. */
    --hero-text-color:#fff;
    --hero-gradient-color:29,23,18;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#520a0a; --paper-raised:#672727; --accent:#d12e2e; --accent-deep:#9f2323; --pp-fill:#d12e2e; --addbag-bg:#d12e2e; --addbag-bg-deep:#9f2323; --addbag-text:#ffffff; /* = LlamiApp > Colores y fondo > Modo oscuro */ --ink:#f3ece0; --ink-soft:#bcae9b;
      --line:#725730; --line-strong:#84673b;
      --btn-gray:#8a8175; --btn-gray-deep:#6f675c;
    }
  }
  :root[data-theme="dark"]{
    --paper:#520a0a; --paper-raised:#672727; --accent:#d12e2e; --accent-deep:#9f2323; --pp-fill:#d12e2e; --addbag-bg:#d12e2e; --addbag-bg-deep:#9f2323; --addbag-text:#ffffff; /* = LlamiApp > Colores y fondo > Modo oscuro */ --ink:#f3ece0; --ink-soft:#bcae9b;
    --line:#725730; --line-strong:#84673b;
    --btn-gray:#8a8175; --btn-gray-deep:#6f675c;
  }

  *{box-sizing:border-box}
  html{overflow-x:clip; overflow-y:visible}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; overflow-y:visible}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:1140px; margin:0 auto; padding:0 28px 100px}
  h1,h2,h3,h4{text-wrap:balance}

  .util-bar{background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap; position:relative}
  .util-bar .track{display:inline-flex; width:max-content; animation:marquee 24s linear infinite}
  .util-bar .seg{display:inline-flex; align-items:center; gap:10px; padding:9px 10px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; white-space:nowrap}
  .util-bar .seg .sep{opacity:.5}
  @keyframes marquee{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){ .util-bar .track{animation:none} }

  /* ================= CHECKERBOARD ================= */
  .checker{
    height:14px;
    background-image:
      linear-gradient(45deg, var(--accent) 25%, transparent 25%, transparent 75%, var(--accent) 75%),
      linear-gradient(45deg, var(--accent) 25%, transparent 25%, transparent 75%, var(--accent) 75%);
    background-size:14px 14px;
    background-position:0 0, 7px 7px;
    background-color:var(--paper-raised);
  }

  /* ================= HEADER ================= */
  header.site{background:var(--paper); position:relative; z-index:30}
  header.site::after{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:1140px; height:3px; background:var(--ink)}
  .head-row{
    max-width:1140px; margin:0 auto; padding:18px 28px 14px;
    position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  }
  .head-side{display:flex; align-items:center; gap:18px; font-size:19px; color:var(--ink)}
  .head-side.right{justify-content:flex-end}
  .head-side .ico{cursor:pointer; position:relative; display:inline-flex; align-items:center}
  .hicon{display:block; background-color:var(--ink); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain}
  .hicon-pasaporte{width:24px; height:24px; -webkit-mask-image:url('icon-pasaporte.svg?v=b718d7c637'); mask-image:url('icon-pasaporte.svg?v=b718d7c637')}
  .hicon-maleta{width:24px; height:24px; -webkit-mask-image:url('icon-maleta.svg?v=80d27ab6bf'); mask-image:url('icon-maleta.svg?v=80d27ab6bf')}
  .hicon-pasaporte--auth{width:39px; height:70px; background-color:var(--accent); margin:0 auto; -webkit-mask-image:url('icon-pasaporte.webp?v=dd17f8c3cb'); mask-image:url('icon-pasaporte.webp?v=dd17f8c3cb')}
  .cart-ico img{height:26px; display:block}
  .cart-ico .maleta-ico{height:30px; width:auto; display:block}
  .cart-badge{position:absolute; top:-6px; right:-9px; background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--paper)}
  .head-side .search-box{
    display:flex; align-items:center; gap:6px; border:2px solid var(--ink); border-radius:999px;
    padding:7px 14px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); background:var(--paper-raised);
  }
  .head-side .search-box .search-ico-inline{font-size:15px; color:var(--ink-soft)}
  .head-side .search-input{border:none; background:none; outline:none; font-family:var(--font-mono); font-size:11.5px; color:var(--ink); width:148px; padding:0; min-width:0}
  .head-side .search-input::placeholder{color:var(--ink-soft)}
  .head-side .search-toggle{display:none; cursor:pointer; font-size:19px}
  .head-side .theme-toggle{font-size:18px; background:none; border:none; color:var(--ink); padding:0; line-height:1}
  .head-side .theme-toggle svg{display:block; width:20px; height:20px}
  .logo{
    display:flex; align-items:center; gap:8px; white-space:nowrap; justify-self:center;
  }
  .hamburger-btn{display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px}
  .hamburger-btn span{width:20px; height:2.5px; background:var(--ink); border-radius:2px}
  .logo img{height:53px; width:auto; aspect-ratio:500/384; object-fit:contain; display:block; transition:opacity .18s ease}

  nav.topnav{
    max-width:1140px; margin:0 auto; display:flex; justify-content:center; gap:6px; padding:2px 18px 14px; flex-wrap:wrap;
  }
  nav.topnav button{
    font-family:var(--font-display); font-weight:700; font-size:15.5px; background:none; border:none;
    color:var(--ink); cursor:pointer; padding:8px 16px; border-radius:999px; transition:background .15s,color .15s;
    display:flex; align-items:center; gap:5px;
  }
  nav.topnav button .chev{font-size:10px; transition:transform .15s; color:var(--ink-soft)}
  nav.topnav button.open .chev{transform:rotate(180deg)}
  nav.topnav button:hover{background:var(--paper-raised)}
  nav.topnav button.open{background:var(--accent); color:#fff}
  nav.topnav button.open .chev{color:#fff}
  nav.topnav .topnav-link{font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--ink); padding:8px 16px; border-radius:999px; display:inline-flex; align-items:center}
  nav.topnav .topnav-link:hover{background:var(--paper-raised)}

  .mega-wrap{border-top:3px solid var(--ink); background:var(--paper-raised); display:none}
  .mega-wrap.show{display:block}
  .mega{max-width:1140px; margin:0 auto; padding:30px 28px; display:none}
  .mega.show{display:block}
  .mega-inner{display:flex; gap:36px; align-items:stretch}
  .mega-grid{flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:26px 30px}
  .mega-col h4{margin:0 0 12px; font-family:var(--font-display); font-size:12.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em}
  .mega-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
  .mega-col li a{font-size:14.5px; color:var(--ink); display:flex; align-items:center; gap:7px; font-weight:500}
  .mega-col li a:hover{color:var(--accent)}
  .mega-col .see-all{margin-top:4px; font-size:12.5px; color:var(--accent); font-weight:700; display:inline-block}
  .brandcol h4{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); text-transform:none; letter-spacing:0; font-family:var(--font-display); font-weight:700}
  .brandcol h4 .dot{width:11px;height:11px;border-radius:50%}

  /* Imagen (o panel de color, si todavía no cargaste una foto en LlamiWeb)
     al costado del menú desplegable de escritorio y arriba del panel de
     subcategorías en celular. */
  .mega-promo{flex:0 0 230px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:16px; overflow:hidden; border:2px solid var(--ink); box-shadow:var(--shadow); position:relative; min-height:210px}
  .mega-promo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .mega-promo-label{position:relative; z-index:1; background:rgba(251,245,235,.92); padding:12px 14px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink)}
  .mega-promo--ropa{background:var(--pastel-pink)}
  .mega-promo--accesorios{background:var(--pastel-yellow)}
  .mega-promo--alpaca{background:var(--pastel-blue)}
  .mega-promo--regalos{background:var(--pastel-green)}
  .mega-promo--bodega{background:#EBC7A4}

  .mnav-promo{display:flex; flex-direction:column; justify-content:flex-end; width:100%; min-height:130px; border-radius:14px; overflow:hidden; border:2px solid var(--ink); margin:14px 0 20px; position:relative}
  .mnav-promo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .mnav-promo-label{position:relative; z-index:1; display:block; padding:10px 14px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); background:rgba(251,245,235,.92)}
  .mnav-promo--ropa{background:var(--pastel-pink)}
  .mnav-promo--accesorios{background:var(--pastel-yellow)}
  .mnav-promo--alpaca{background:var(--pastel-blue)}
  .mnav-promo--regalos{background:var(--pastel-green)}
  .mnav-promo--bodega{background:#EBC7A4}

  /* Menú móvil de pantalla completa, con navegación de dos niveles (estilo
     Nike): lista grande de categorías, y al tocar una con submenú, el panel
     se desliza para mostrar sus subcategorías con un botón de volver. */
  .mnav-overlay{position:fixed; inset:0; background:rgba(29,23,18,.45); opacity:0; visibility:hidden; transition:opacity .25s; z-index:95}
  .mnav-overlay.show{opacity:1; visibility:visible}
  .mnav-panel{position:fixed; top:0; left:0; height:100%; width:clamp(230px,60vw,400px); background:var(--paper); border-right:3px solid var(--ink); box-shadow:10px 0 30px rgba(0,0,0,.2); z-index:96; display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .32s ease}
  .mnav-panel.show{transform:translateX(0)}
  .mnav-head{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:3px solid var(--ink)}
  .mnav-back{display:none; align-items:center; gap:5px; background:none; border:none; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:14px; color:var(--ink-soft); padding:6px 4px 6px 0}
  .mnav-back .arrow{font-size:16px}
  .mnav-panel.level2 .mnav-back{display:inline-flex}
  .mnav-close{background:none; border:none; cursor:pointer; font-size:22px; line-height:1; color:var(--ink); padding:4px; margin-left:auto}
  .mnav-body{flex:1 1 auto; overflow:hidden; position:relative}
  .mnav-track{display:flex; width:200%; height:100%; transition:transform .3s ease}
  .mnav-panel.level2 .mnav-track{transform:translateX(-50%)}
  .mnav-utils{padding:14px 20px; border-top:3px solid var(--ink); display:flex; flex-direction:row; align-items:center; gap:10px; flex:0 0 auto}
  .mnav-utils .search-toggle{display:none}
  .mnav-utils .search-box{position:static; display:flex; align-items:center; gap:8px; flex:1; min-width:0; margin:0; padding:9px 14px; border:2px solid var(--ink); border-radius:999px; font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); background:var(--paper-raised); box-shadow:none}
  .mnav-utils .search-box .search-ico-inline{font-size:16px; color:var(--ink-soft)}
  .mnav-utils .search-input{border:none; background:none; outline:none; font-family:var(--font-mono); font-size:15px; color:var(--ink); width:auto; flex:1; min-width:0; padding:0}
  .mnav-utils .search-input::placeholder{color:var(--ink-soft)}
  /* Celular: el texto "buscar productos..." entra completo en la cajita */
  .mnav-utils .search-box{padding:9px 12px; gap:6px}
  .mnav-utils .search-input{text-overflow:ellipsis}
  .mnav-utils .search-input::placeholder{font-size:12px; letter-spacing:-.02em; text-overflow:ellipsis}
  .theme-toggle-label{display:none}
  .mnav-utils .theme-toggle{display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto; border:2px solid var(--ink); border-radius:50%; background:none; color:var(--ink); padding:0; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent}
  .mnav-utils .theme-toggle:focus:not(:focus-visible){outline:none}
  .mnav-utils .theme-toggle svg{width:20px; height:20px}
  .mnav-view{flex:0 0 50%; width:50%; height:100%; overflow-y:auto; box-sizing:border-box; padding:8px 16px 32px; -webkit-overflow-scrolling:touch}
  .mnav-view h2{font-family:var(--font-display); font-size:clamp(20px,6.5vw,25px); margin:6px 2px 4px}
  .mnav-item{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:none; border:none; text-align:left; font-family:var(--font-display); font-weight:700; font-size:clamp(17px,5vw,21px); line-height:1.2; color:var(--ink); padding:12px 2px; cursor:pointer}
  .mnav-item .mnav-chev{font-family:var(--font-body); font-weight:400; font-size:20px; color:var(--ink-soft)}
  .mnav-item .dot{width:11px; height:11px; border-radius:50%; margin-right:9px; flex:0 0 auto; display:inline-block}
  .mnav-sub-label{font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin:20px 2px 2px}
  .mnav-sub-label:first-child{margin-top:8px}

  /* En celular, la fila de botones se convierte en el menú de tres líneas,
     y la barra se queda fija arriba al bajar con el dedo */
  @media (max-width:760px){
    nav.topnav{display:none}
    .hamburger-btn{display:flex}
    .head-side .search-toggle{display:inline-flex}
    .head-side .search-box{display:none; position:absolute; top:100%; left:14px; right:14px; z-index:60; margin-top:4px; padding:9px 14px; box-shadow:0 8px 22px rgba(0,0,0,.16)}
    .search-chk:checked ~ .search-box{display:flex}
    .head-side .search-box .search-input{flex:1; width:auto; font-size:16px}
    header.site{position:-webkit-sticky; position:sticky; top:0; z-index:50}
  }

  /* ================= HERO (varios banners) ================= */
  .hero-band{background:var(--paper-raised)}
  .hero-frame-wrap{position:relative; max-width:1140px; margin:0 auto}
  .hero-frame{position:absolute; inset:0; pointer-events:none; z-index:5; --hf-w:14px}
  .hero-frame-top,.hero-frame-bottom{position:absolute; left:var(--hf-w); right:var(--hf-w); height:var(--hf-w); background-repeat:repeat-x; background-position:left top}
  .hero-frame-top{top:0}
  .hero-frame-bottom{bottom:0}
  .hero-frame-left,.hero-frame-right{position:absolute; top:var(--hf-w); bottom:var(--hf-w); width:var(--hf-w); background-repeat:repeat-y; background-position:left top}
  .hero-frame-left{left:0}
  .hero-frame-right{right:0}
  .hero-frame-corner{position:absolute; width:var(--hf-w); height:var(--hf-w); background-repeat:no-repeat; background-size:100% 100%}
  .hero-frame-corner--tl{top:0; left:0; transform-origin:center}
  .hero-frame-corner--tr{top:0; right:0; transform:rotate(90deg)}
  .hero-frame-corner--br{bottom:0; right:0; transform:rotate(180deg)}
  .hero-frame-corner--bl{bottom:0; left:0; transform:rotate(270deg)}
  /* ===== Marco configurable de la maleta (Admin › Carrito › Marco de la maleta) =====
     --cf-w    = grosor de los rieles de los LADOS (izq/der)
     --cf-wtop = grosor del riel de ARRIBA
     --cf-wbot = grosor del riel de ABAJO
     --cf-top  = tamaño de las 2 esquinas de arriba
     --cf-bot  = tamaño de las 2 esquinas de abajo
     Los lados corren ENTRE las esquinas, por eso su inset usa el tamaño de esquina. */
  .cart-frame{position:absolute; inset:0; pointer-events:none; z-index:40; --cf-w:16px; --cf-wtop:16px; --cf-wbot:16px; --cf-top:56px; --cf-bot:56px; display:none}
  .cart-frame.show{display:block}
  .cart-frame-top{position:absolute; top:0; left:var(--cf-top); right:var(--cf-top); height:var(--cf-wtop); background-repeat:repeat-x; background-position:left top; background-size:auto 100%}
  .cart-frame-bottom{position:absolute; bottom:0; left:var(--cf-bot); right:var(--cf-bot); height:var(--cf-wbot); background-repeat:repeat-x; background-position:left top; background-size:auto 100%}
  .cart-frame-left{position:absolute; left:0; top:var(--cf-top); bottom:var(--cf-bot); width:var(--cf-w); background-repeat:repeat-y; background-position:left top; background-size:100% auto}
  .cart-frame-right{position:absolute; right:0; top:var(--cf-top); bottom:var(--cf-bot); width:var(--cf-w); background-repeat:repeat-y; background-position:left top; background-size:100% auto}
  .cart-frame-corner{position:absolute; background-repeat:no-repeat; background-size:100% 100%}
  .cart-frame-corner--tl{top:0; left:0; width:var(--cf-top); height:var(--cf-top)}
  .cart-frame-corner--tr{top:0; right:0; width:var(--cf-top); height:var(--cf-top)}
  .cart-frame-corner--bl{bottom:0; left:0; width:var(--cf-bot); height:var(--cf-bot)}
  .cart-frame-corner--br{bottom:0; right:0; width:var(--cf-bot); height:var(--cf-bot)}
  .hero{
    max-width:1140px; margin:0 auto; position:relative; overflow:hidden;
    border-radius:0 0 28px 28px; min-height:min(560px, 78vh);
    padding:0;
  }
  .hero-slide{position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s}
  .hero-slide.is-active{position:relative; opacity:1; visibility:visible; transition:opacity .5s ease}
  .hero-bg{position:absolute; inset:0; z-index:0}
  .hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--hero-gradient-color),.62) 0%, rgba(var(--hero-gradient-color),.15) 42%, rgba(var(--hero-gradient-color),.05) 60%)}
  .hero.hero-sin-degradado .hero-bg::after{content:none}
  .hero-inner{position:relative; z-index:1; width:100%; padding:64px 44px 40px; display:flex; flex-direction:column; align-items:center; text-align:center; min-height:min(560px, 78vh); justify-content:space-between}
  .hero-top .eyebrow{
    display:inline-block; font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink); background:var(--pastel-yellow); padding:6px 16px; border-radius:999px; margin:0 0 18px; border:2px solid var(--ink);
  }
  .hero h1,.hero h2{font-family:var(--font-display); font-weight:800; font-size:clamp(34px,6vw,64px); margin:0 0 14px; color:var(--hero-text-color); letter-spacing:-.01em; text-shadow:0 2px 12px rgba(0,0,0,.25)}
  .hero p{color:var(--hero-text-color); font-size:16.5px; max-width:48ch; margin:0 auto; opacity:.95}
  .cta{
    display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700;
    font-size:16px; padding:15px 30px; border-radius:999px; border:2px solid var(--ink); box-shadow:var(--shadow);
    transition:transform .12s;
  }
  .cta:hover{transform:translateY(-2px)}
  .hero-bottom{margin-top:28px}
  .hero-dots{display:flex; justify-content:center; gap:9px; padding:14px 0}
  .hero-dots button{width:9px; height:9px; border-radius:50%; border:none; background:var(--line-strong); padding:0; cursor:pointer}
  .hero-dots button.is-active{background:var(--accent); width:22px; border-radius:999px}
  .hero-skel{position:absolute; inset:0; z-index:5; border-radius:inherit; background:linear-gradient(100deg, var(--paper-raised) 25%, var(--paper) 50%, var(--paper-raised) 75%); background-size:200% 100%; animation:heroSkelShine 1.4s ease-in-out infinite, heroSkelIn .18s ease .3s both; pointer-events:none}
  .hero.is-ready .hero-skel{display:none}
  .hero-band .checker{visibility:hidden}
  .hero-band.is-ready .checker{visibility:visible}
  .hero:not(.is-ready) .hero-slide{opacity:0 !important; visibility:hidden !important}
  @keyframes heroSkelShine{0%{background-position:0% 0}100%{background-position:-200% 0}}
  @keyframes heroSkelIn{from{opacity:0}to{opacity:1}}
  .wc-skel{position:absolute; inset:0; z-index:50; border-radius:inherit; background:linear-gradient(100deg, var(--paper-raised) 25%, var(--paper) 50%, var(--paper-raised) 75%); background-size:200% 100%; animation:heroSkelShine 1.4s ease-in-out infinite, heroSkelIn .2s ease; pointer-events:none; transition:opacity .25s ease}
  .wc-skel.is-out{opacity:0}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .hero-skel,:root:not([data-theme="light"]) .wc-skel{
      background:linear-gradient(100deg, var(--paper) 25%, var(--paper-raised) 50%, var(--paper) 75%);
      background:linear-gradient(100deg, var(--paper) 25%, color-mix(in srgb, var(--accent) 35%, var(--paper) 65%) 50%, var(--paper) 75%);
    }
  }
  :root[data-theme="dark"] .hero-skel,:root[data-theme="dark"] .wc-skel{
    background:linear-gradient(100deg, var(--paper) 25%, var(--paper-raised) 50%, var(--paper) 75%);
    background:linear-gradient(100deg, var(--paper) 25%, color-mix(in srgb, var(--accent) 35%, var(--paper) 65%) 50%, var(--paper) 75%);
  }

  /* ================= FRANJA DE BENEFICIOS ================= */
  .benef-band{position:relative; max-width:570px; margin:52px auto 0; aspect-ratio:1148/297;
    background:#B7D9D8; border:4px solid var(--ink); border-radius:34px; overflow:hidden;
    box-shadow:var(--shadow); container-type:inline-size}
  .benef-el{position:absolute; height:auto; pointer-events:none; user-select:none}
  .benef-avion{left:0.5%; top:37.7%; width:19.3%}
  .benef-nube-top{left:25.8%; top:1.7%; width:23.3%}
  .benef-nube-right{left:78.6%; top:45.8%; width:21.1%}
  .benef-content{position:absolute; left:51%; top:50%; transform:translate(-50%,-50%);
    width:92%; text-align:center; z-index:2}
  .benef-title{font-family:var(--font-display); font-weight:400; color:var(--ink);
    margin:0; line-height:1.0; font-size:4.95cqw; letter-spacing:.3px}
  .benef-title .benef-hl{color:#fff; text-shadow:0 2px 0 rgba(29,23,18,.15)}
  .benef-sub{font-family:var(--font-display); font-weight:400; color:var(--ink);
    margin:.05em 0 0; line-height:1.0; font-size:2.8cqw; letter-spacing:.3px}
  @media (max-width:640px){ .benef-band{margin:40px 16px 0; border-radius:22px} }

  /* ================= SECTIONS ================= */
  section{margin-top:64px}
  /* Imagen opcional arriba de la sección, editable desde LlamiWeb. Sin
     imagen cargada queda display:none (no ocupa espacio, no cambia nada). */
  .section-top-img{width:100%; display:block; height:56px; margin-top:-44px; margin-bottom:28px; background-position:left top; background-repeat:no-repeat; background-size:cover}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:22px; flex-wrap:wrap}
  .section-head h2{font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,32px); margin:0; text-transform:uppercase; letter-spacing:-.01em}
  .section-head .see-all{font-size:13.5px; color:var(--accent); font-weight:700}

  .section-head-center{text-align:center; max-width:600px; margin:0 auto 30px}
  .section-head-center h2{font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3.6vw,38px); margin:0 0 10px; letter-spacing:-.01em; color:var(--ink); line-height:1.3}
  .section-head-center .title-row{display:flex; align-items:center; justify-content:center; gap:.5em; margin:0 0 4px; color:#F0A860}
  .section-head-center .title-row h2{margin:0}
  .title-star{width:1.04em; height:1.04em; flex:none; fill:currentColor; transform:translateY(.28em)}
  .section-head-center p{color:var(--ink-soft); font-size:15px; margin:0; font-family:var(--font-display); line-height:1.3}
  .section-cta-center{display:flex; justify-content:center; margin-top:22px}
  .cta-outline{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--paper); font-family:var(--font-display); font-weight:700; font-size:14px; padding:12px 24px; border-radius:999px; width:fit-content}

  .rail-outer{position:relative}
  .rail{display:flex; gap:22px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .prod{flex:0 0 210px; scroll-snap-align:start; display:flex; flex-direction:column}
  .prod-media{aspect-ratio:2/3; position:relative; overflow:hidden; border:2px solid var(--ink); border-radius:16px; background:var(--paper-raised); box-shadow:var(--shadow)}
  .prod-media img{width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; transition:opacity .25s ease}
  .prod-media img.prod-img-2{opacity:0;background:var(--paper-raised)}
  .prod-media:hover img.prod-img-2{opacity:1}
  .prod-media .badge{position:absolute; top:8px; left:8px; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; padding:4px 9px; border-radius:999px}
  .prod .addbag{display:block; margin:12px 0 0; background:var(--addbag-bg,var(--paper)); color:var(--addbag-text,#fff); border:2px solid var(--ink); border-radius:999px; padding:7px 6px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.02em; cursor:pointer}
  .prod .addbag:hover{background:var(--addbag-bg-deep,var(--paper-raised))}
  .prod h4{margin:11px 0 3px; font-family:var(--font-display); font-size:14px; font-weight:700; text-wrap:balance; color:var(--prod-titulo, var(--ink))}
  .prod .meta{font-size:11.5px; color:var(--prod-meta, var(--ink-soft)); margin:0 0 6px}
  .prod .price{font-family:var(--font-mono); font-weight:600; font-size:14.5px; color:var(--prod-precio, var(--ink))}
  .oferta-old{text-decoration:line-through; color:var(--ink-soft); font-weight:500; font-size:.82em; margin-left:6px}
  .dots{display:flex; justify-content:center; gap:8px; margin-top:16px}
  .dots span{width:8px; height:8px; border-radius:50%; background:var(--line-strong); cursor:pointer}
  .dots span.is-active{background:var(--accent)}
  .wave-img{display:block; width:220px; height:auto; margin:4px auto 30px}
  .section-divider-img{display:none; width:100%; height:56px; background-repeat:repeat-x; background-position:center bottom; background-size:auto 100%}
  .banded-section{padding:44px 0 56px; margin-top:0}
  .banded-section .section-head-center{padding:0 28px}
  .banded-inner{max-width:1140px; margin:0 auto; padding:0 28px}
  #secCategoria{background:var(--pastel-blue)}
  #secCategoria .section-head-center h2{color:#2A4A36}
  :root[data-theme="dark"] #secCategoria .section-head-center h2{color:var(--ink)}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #secCategoria .section-head-center h2{color:var(--ink)} }
  #secMasVendidos{background:var(--paper)}
  #secResenas{background:var(--paper)}
  .collection-grid{max-width:1140px; margin:26px auto 0; padding:0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
  @media (max-width:760px){ .collection-grid{grid-template-columns:1fr; max-width:380px} }
  .collection-card{display:flex; flex-direction:column; align-items:center; gap:22px; cursor:pointer}
  .collection-card__thumb{width:100%; aspect-ratio:3/4; border-radius:20px; border:2px solid var(--ink); background-size:cover; background-position:center; background-color:var(--paper-raised); box-shadow:var(--shadow)}
  .collection-card__cta{display:flex; flex-direction:column; align-items:center; gap:10px}
  .collection-card__btn{display:inline-flex; align-items:center; gap:6px; background:var(--paper-raised); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:14px; padding:10px 26px; border-radius:999px; border:2px solid var(--ink); box-shadow:5px 6px 0 var(--accent)}
  .collection-card__link{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink); margin-top:2px}
  .collection-card__link .arrow{font-size:9px}
  .collection-card__squiggle{width:88px; height:auto; margin-top:2px; display:none}

  @media (max-width:700px){
    .rail{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; overflow:visible}
    .prod{flex:auto; width:100%}
    .dots{display:none}
    /* Celular: Lo nuevo y Más vendidos muestran solo 12 productos; el resto se ve con el botón "Ver todos" */
    #nuevosRail > :nth-child(n+13), #bestRail > :nth-child(n+13){display:none}
  }

  /* ================= COMPRAR POR PERSONAJE ================= */
  .char-rail{display:flex; gap:22px; overflow-x:auto; padding:8px 4px 16px; scrollbar-width:none; cursor:grab; touch-action:pan-x; -webkit-overflow-scrolling:touch}
  .char-rail::-webkit-scrollbar{display:none}
  .char-rail:active{cursor:grabbing}
  .rev-rail-outer{overflow-x:auto; overflow-y:hidden; width:100%; scrollbar-width:none; cursor:grab; touch-action:pan-x; -webkit-overflow-scrolling:touch}
  .rev-rail-outer::-webkit-scrollbar{display:none}
  .rev-rail-outer:active{cursor:grabbing}
  .rev-rail{display:flex; width:max-content; gap:20px; padding:6px 2px}
  .rev-card{width:280px; flex:0 0 280px; background:var(--paper-raised); border:2px solid var(--ink); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px}
  .rev-top{display:flex; align-items:center; gap:10px}
  .rev-avatar{width:36px; height:36px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; background-size:cover; background-position:center}
  .rev-name{font-family:var(--font-display); font-weight:700; font-size:13.5px}
  .rev-stars{color:#E8A33D; font-size:12px; letter-spacing:1px}
  .rev-text{font-size:13.5px; color:var(--ink); line-height:1.5; margin:0; flex:1}
  .rev-product{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); border-top:1px solid var(--line); padding-top:12px; margin-top:auto}
  .rev-product img{width:40px; height:50px; object-fit:cover; border-radius:8px; border:2px solid var(--ink); flex-shrink:0; background:var(--paper)}
  .rev-product span{font-size:12px; font-weight:700; text-wrap:balance}
  .char-card{flex:0 0 168px; display:flex; flex-direction:column; align-items:center; border:2px solid var(--ink); border-radius:22px; padding:14px 14px 16px; box-shadow:var(--shadow)}
  .char-card .imgwrap{width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--paper-raised); border:2px solid var(--ink)}
  .char-card .imgwrap img{width:100%; height:100%; object-fit:cover; display:block}
  .char-card .char-name{display:inline-block; margin-top:14px; background:var(--paper-raised); border:2px solid var(--ink); border-radius:999px; padding:8px 18px; font-family:var(--font-display); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); text-align:center; white-space:nowrap}

  /* ================= QUIZ "¿CUÁL ERES?" ================= */
  .char-card--quiz{background:var(--accent); cursor:pointer}
  .char-card--quiz .imgwrap{background:rgba(255,255,255,.16)}
  .char-card--quiz .char-name{background:var(--ink); color:#fff}
  .quiz-imgwrap{display:flex; align-items:center; justify-content:center}
  .quiz-qmark{font-family:var(--font-display); font-weight:800; font-size:54px; color:#fff}
  .quiz-overlay{position:fixed; inset:0; background:rgba(29,23,18,.55); opacity:0; visibility:hidden; transition:opacity .2s; z-index:97}
  .quiz-overlay.show{opacity:1; visibility:visible}
  .quiz-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(480px,92vw); max-height:88vh; overflow-y:auto; background:var(--paper); border:2px solid var(--ink); border-radius:22px; box-shadow:var(--shadow); z-index:98; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s}
  .quiz-modal.show{opacity:1; visibility:visible; transform:translate(-50%,-50%)}
  .quiz-scroll{padding:26px 24px 28px; position:relative}
  .quiz-close{position:absolute; top:14px; right:14px; background:var(--paper-raised); border:2px solid var(--ink); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:15px; line-height:1; z-index:2}
  .quiz-close:hover{background:var(--line)}
  .quiz-eyebrow{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; margin:0 0 8px; padding-right:32px}
  .quiz-title{font-family:var(--font-display); font-weight:800; font-size:clamp(20px,3vw,25px); margin:0 0 10px; text-wrap:balance; padding-right:32px}
  .quiz-lead{font-size:14px; color:var(--ink-soft); line-height:1.55; margin:0 0 22px}
  .quiz-start-btn, .quiz-result-cta{display:block; width:100%; background:var(--accent); color:#fff; border:2px solid var(--ink); border-radius:999px; padding:13px; font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer; text-align:center}
  .quiz-start-btn:hover{background:var(--accent-deep)}
  .quiz-result-retry{display:block; width:100%; text-align:center; background:none; border:none; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--accent); cursor:pointer; margin-top:10px; padding:6px}
  .quiz-result-retry:hover{text-decoration:underline}
  .quiz-progress{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin:0 0 8px; padding-right:32px}
  .quiz-progress-bar{height:6px; border-radius:999px; background:var(--line); overflow:hidden; margin-bottom:18px}
  .quiz-progress-fill{height:100%; background:var(--accent); border-radius:999px; transition:width .25s}
  .quiz-question{font-family:var(--font-display); font-weight:800; font-size:clamp(18px,2.6vw,21px); margin:0 0 16px; text-wrap:balance; padding-right:32px}
  .quiz-answers{display:flex; flex-direction:column; gap:10px}
  .quiz-answer-btn{display:block; width:100%; text-align:left; background:var(--paper-raised); color:var(--ink); border:2px solid var(--ink); border-radius:14px; padding:12px 16px; font-family:var(--font-body); font-weight:600; font-size:13.5px; cursor:pointer; line-height:1.4}
  .quiz-answer-btn:hover{background:var(--pastel-yellow)}
  .quiz-result-title{font-family:var(--font-display); font-weight:800; font-size:clamp(22px,3.2vw,27px); margin:0 0 18px; text-wrap:balance; padding-right:32px}
  .quiz-result-grid{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:18px}
  .quiz-result-avatar{display:flex; flex-direction:column; align-items:center; gap:6px; width:64px}
  .quiz-avatar-circle{width:56px; height:56px; border-radius:50%; border:2px solid var(--ink); background-color:var(--paper-raised); background-size:cover; background-position:center; transition:transform .2s}
  .quiz-result-avatar .quiz-avatar-name{font-family:var(--font-display); font-weight:700; font-size:9.5px; text-transform:uppercase; text-align:center; color:var(--ink-soft)}
  .quiz-result-avatar.is-winner .quiz-avatar-circle{border:3px solid var(--accent); box-shadow:0 0 0 4px rgba(202,38,50,.18); transform:scale(1.18) rotate(-3deg)}
  .quiz-result-avatar.is-winner .quiz-avatar-name{color:var(--ink); font-weight:800}
  .quiz-result-desc{font-size:13.5px; color:var(--ink); line-height:1.6; margin:0 0 22px; white-space:pre-wrap}
  .quiz-result-cta{margin-top:8px; text-decoration:none}
  @media (max-width:600px){ .quiz-modal{width:94vw} }

  /* ================= BANDA "JOY" (antes del footer) ================= */
  .joy-bar{overflow:hidden; white-space:nowrap; position:relative; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); background:var(--joybar-bg-cache, var(--paper))}
  .joy-bar .track{display:inline-flex; width:max-content; animation:marquee 26s linear infinite; padding:16px 0}
  .joy-bar .seg{display:inline-flex; align-items:center; gap:22px; padding:0 22px; font-family:var(--font-display); font-weight:800; font-size:clamp(20px,3vw,30px); letter-spacing:.01em; text-transform:uppercase; color:var(--joybar-text, var(--pastel-yellow)); -webkit-text-stroke:2px var(--joybar-stroke, var(--ink)); paint-order:stroke fill; white-space:nowrap}
  .joy-bar .seg .sep{font-size:.65em; -webkit-text-stroke:0; color:var(--ink); opacity:.6}
  @media (prefers-reduced-motion:reduce){ .joy-bar .track{animation:none} }

  /* ================= FOOTER ================= */
  footer.site{border-top:3px solid var(--ink); background:var(--footer-bg-cache, var(--paper)); margin-top:72px}
  .foot-characters{width:100%; height:112px; overflow:hidden; display:none; position:relative; margin-top:-39px}
  @media (max-width:600px){ .foot-characters{height:74px; margin-top:-26px} }
  .foot-top{padding:52px 0 34px}
  .foot-grid{max-width:1140px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:1fr 1fr 1fr 1.35fr; gap:32px}
  @media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
  .foot-col h5{font-family:var(--font-display); font-weight:800; font-size:15px; margin:0 0 16px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink)}
  .foot-col a{display:block; font-size:12px; margin-bottom:11px; color:var(--ink); text-transform:uppercase; letter-spacing:.03em; font-weight:600; opacity:.85}
  .foot-col a:hover{opacity:1}
  .foot-news p{font-size:13px; color:var(--ink); opacity:.75; margin:0 0 14px; max-width:28ch}
  .news-form{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
  .news-form input{flex:1 1 160px; min-width:0; border:2px solid var(--ink); border-radius:999px; padding:9px 14px; font-family:var(--font-body); font-size:13px; background:var(--paper-raised); color:var(--ink)}
  .news-form button{background:var(--ink); color:var(--paper); border:2px solid var(--ink); border-radius:999px; padding:9px 16px; font-family:var(--font-display); font-weight:700; font-size:12px; cursor:pointer; white-space:nowrap}
  .news-form button[disabled]{opacity:.6; cursor:default}
  .news-msg{font-size:12px; margin:-10px 0 18px}
  @media (max-width:600px){ .news-form input{flex-basis:100%} .news-form button{flex:1 1 100%} }
  .foot-social{display:flex; gap:10px}
  .foot-social a{width:36px; height:36px; border-radius:50%; background:#F3EADC; border:2px solid #1D1712; color:#1D1712; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; font-family:var(--font-display); overflow:hidden}
  .foot-social a img{width:20px; height:20px; object-fit:contain; display:block}
  .foot-bottom{border-top:2px solid var(--ink); padding:18px 28px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:var(--ink)}
  .foot-bottom span{text-align:center; text-wrap:balance}
  .foot-bottom-logo{height:28px; width:auto; aspect-ratio:500/384; object-fit:contain; display:block; transition:opacity .18s ease}

  /* ================= CARRITO (maleta) ================= */
  .cart-overlay{position:fixed; inset:0; background:rgba(29,23,18,.45); opacity:0; visibility:hidden; transition:opacity .25s; z-index:90}
  .cart-overlay.show{opacity:1; visibility:visible}
  .cart-drawer{position:fixed; top:0; right:0; height:100%; width:min(430px, calc(100vw - 40px)); background:transparent; z-index:91; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s ease}
  .cart-drawer .ck-processing{position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; background:var(--paper)}
.ck-processing[hidden]{display:none}
.ck-processing-box{text-align:center; padding:24px; max-width:280px}
.ck-processing-spin{width:38px; height:38px; margin:0 auto 14px; border:3px solid var(--line, #e3e3e3); border-top-color:var(--ink, #222); border-radius:50%; animation:ckSpin .8s linear infinite}
@keyframes ckSpin{to{transform:rotate(360deg)}}
.ck-processing-txt{margin:0; font-weight:700; font-size:17px}
.ck-processing-sub{margin:6px 0 0; font-size:13px; line-height:1.4; color:var(--muted)}
@media (prefers-reduced-motion: reduce){.ck-processing-spin{animation-duration:2.4s}}
.cart-bg{position:absolute; inset:0; z-index:0; background:var(--paper); border-left:3px solid var(--ink); box-shadow:-10px 0 30px rgba(0,0,0,.2)}
  .cart-drawer > .cart-view, .cart-drawer > .checkout-view{position:relative; z-index:1}
  .cart-drawer.cart-has-marco .ck-processing{inset:calc(var(--cf-wtop,16px) - 15px) var(--cf-w,16px) calc(var(--cf-wbot,16px) - 4px) var(--cf-w,16px); border-radius:16px}
  .cart-drawer.cart-has-marco .cart-bg{inset:calc(var(--cf-wtop,16px) - 15px) var(--cf-w,16px) calc(var(--cf-wbot,16px) - 4px) var(--cf-w,16px); border-left:none; box-shadow:none; border-radius:16px}
  .cart-drawer.cart-has-marco .cart-foot{margin-left:var(--cf-w,16px); margin-right:var(--cf-w,16px); margin-bottom:calc(var(--cf-wbot,16px) - 4px); border-bottom-left-radius:16px; border-bottom-right-radius:16px}
  .cart-drawer.show{transform:translateX(0)}
  .cart-head{display:flex; align-items:center; justify-content:center; position:relative; padding:12px 22px 4px; border-bottom:2px solid var(--ink); flex:0 0 auto}
  .cart-head h3{margin:0; font-family:var(--font-display); font-size:20px; font-weight:800; text-transform:uppercase}
  .cart-close{position:absolute; right:22px; top:calc(50% + 7px); transform:translateY(-50%); background:none; border:none; font-size:19px; cursor:pointer; color:var(--ink); width:32px; height:32px; border-radius:50%}
  .cart-close:hover{background:var(--paper-raised)}
  .cart-gift-btn{position:absolute; left:22px; top:calc(50% + 7px); transform:translateY(-50%); background:none; border:none; font-size:17px; cursor:pointer; color:var(--ink); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center}
  .cart-gift-btn:hover{background:var(--paper-raised)}
  .cart-shipping{padding:3px 22px 8px; border-bottom:1px solid var(--line); flex:0 0 auto}
  .cart-shipping p{margin:0 0 8px; font-size:12.5px; font-weight:700; color:var(--ink)}
  /* Ruta recta (barra de envio gratis / regalo) */
  .ship-route{position:relative; width:100%; margin:-9px 0 4px; overflow:visible}
  .ship-route svg.ship-svg{display:block; width:100%; height:auto}
  .ship-plane{position:absolute; transform:translate(-50%,-50%); line-height:0; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); pointer-events:none}
  .ship-node-label{position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:row; align-items:baseline; justify-content:center; gap:3px; text-align:center; pointer-events:none; width:96px; white-space:nowrap}
  .ship-tt{font-size:9px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--ink); line-height:1.05}
  .ship-amt{font-size:9px; font-weight:800; color:var(--ink-soft); font-family:var(--font-mono,inherit)}
  .ship-node-label.reached .ship-amt{color:var(--accent)}
  .cart-shipping .ship-msg{margin:5px 0 0; font-size:12px; font-weight:800; color:var(--ink); text-align:center; line-height:1.2}
  .cart-items{flex:0 1 auto; min-height:0; overflow-y:auto; padding:4px 22px}
  .cart-empty{padding:44px 6px; text-align:center; color:var(--ink-soft); font-size:14px; line-height:1.6}
  .cart-line{display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line)}
  .cart-line img{width:62px; height:78px; object-fit:cover; border-radius:10px; border:2px solid var(--ink); flex-shrink:0; background:var(--paper-raised); opacity:0; transition:opacity .12s ease}
  .cart-line img.llami-img-loaded{opacity:1}
  .cart-line-info{flex:1; min-width:0}
  .cart-line-info h4{margin:0 0 3px; font-family:var(--font-display); font-size:13.5px; font-weight:700; text-wrap:balance}
  .cart-line-info .meta{font-size:11px; color:var(--ink-soft); margin:0 0 9px}
  .cart-qty{display:inline-flex; align-items:center; gap:9px; border:2px solid var(--ink); border-radius:999px; padding:3px 5px}
  .cart-qty button{width:20px; height:20px; border-radius:50%; border:none; background:var(--paper-raised); font-weight:700; cursor:pointer; line-height:1; font-size:13px}
  .cart-qty span{font-family:var(--font-mono); font-size:12.5px; min-width:12px; text-align:center}
  .cart-line-topline{display:flex; align-items:center; gap:8px}
  .cart-line-right{display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:6px; flex-shrink:0}
  .cart-line-right .price{font-family:var(--font-mono); font-weight:700; font-size:13px; white-space:nowrap; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:2px 6px; text-align:right; max-width:130px}
  .cart-remove{background:none; border:none; color:var(--ink-soft); font-size:11.5px; cursor:pointer; text-decoration:underline; padding:0}
  .cart-gift-select{font-family:inherit; font-size:11px; color:var(--ink); background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; padding:3px 6px; max-width:104px; cursor:pointer}
  .cart-gift-empty{background:none; border:none; color:var(--ink-soft); font-size:11px; cursor:pointer; text-decoration:underline; padding:0; white-space:nowrap}
  .cart-gift-units{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
  .cart-gift-unit-row{display:flex; align-items:center; gap:4px}
  .cart-gift-unit-label{font-size:10px; color:var(--ink-soft); white-space:nowrap}
  .cart-cross{padding:0 22px}
  .cart-cross h5{margin:4px 0 8px; font-family:var(--font-display); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft)}
  .cart-cross-rail{display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none}
  .cart-cross-rail::-webkit-scrollbar{display:none}
  .cart-cross-item{flex:0 0 52px; cursor:pointer; transition:opacity .12s ease}
  .cart-cross-item img{width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:8px; border:2px solid var(--ink); display:block; background:var(--paper-raised); opacity:0; transition:opacity .12s ease}
  .cart-cross-item img.llami-img-loaded{opacity:1}
  .cart-foot{border-top:2px solid var(--ink); padding:6px 22px 10px; background:var(--paper-raised); flex:0 0 auto; margin-top:auto}
  .cart-promo{display:flex; gap:8px; margin-bottom:5px}
  .cart-promo input{flex:1; min-width:0; border:2px solid var(--ink); border-radius:999px; padding:5px 14px; font-size:12.5px; background:var(--paper); color:var(--ink)}
  .cart-promo button{background:var(--ink); color:var(--paper); border:2px solid var(--ink); border-radius:999px; padding:5px 16px; font-family:var(--font-display); font-weight:700; font-size:11.5px; cursor:pointer; white-space:nowrap}
  .cart-trust{display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:14px; font-size:11px; color:var(--ink-soft); margin:14px 0 0; overflow-x:auto; scrollbar-width:none; white-space:nowrap}
  .cart-trust::-webkit-scrollbar{display:none}
  .cart-subtotal{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-display); font-weight:800; font-size:17px; margin-bottom:2px}
  .cart-subtotal-sm{font-size:13px}
  .cart-checkout{display:block; width:100%; background:var(--accent); color:#fff; border:2px solid var(--ink); border-radius:999px; padding:10.5px; font-family:var(--font-display); font-weight:700; font-size:10.5px; cursor:pointer}
  .cart-checkout:hover{background:var(--accent-deep)}
  .cart-note{margin:6px 0 0; font-size:11.5px; color:var(--ink-soft); text-align:center}
  .cart-note:empty{display:none; margin:0}
.cart-stock-note{color:var(--accent); font-weight:600}
.llami-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:#2b2420; color:#fff; padding:10px 18px; border-radius:999px; font-size:13.5px; font-weight:600; box-shadow:0 6px 20px rgba(0,0,0,.18); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:9999; max-width:90vw; text-align:center}
.llami-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
  .cart-view{display:flex; flex-direction:column; flex:1; min-height:0}
  .checkout-view{display:flex; flex-direction:column; flex:1; min-height:0}
  .checkout-back{position:absolute; left:22px; top:calc(50% + 7px); transform:translateY(-50%); background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink); width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0}
  .checkout-back:hover{background:var(--paper-raised)}
  .checkout-body{padding:10px 22px 22px; display:flex; flex-direction:column; gap:14px; flex:1 1 auto; min-height:0; overflow-y:auto}
  .ck-field{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink)}
  .ck-field input{font-family:inherit; font-weight:400; font-size:13.5px; border:2px solid var(--ink); border-radius:10px; padding:10px 12px; background:var(--paper); color:var(--ink)}
  .ck-field select{font-family:inherit; font-weight:400; font-size:13.5px; border:2px solid var(--ink); border-radius:10px; padding:10px 12px; background:var(--paper); color:var(--ink); cursor:pointer}
  .ck-row{display:flex; gap:10px}
  .ck-row .ck-field{flex:1; min-width:0}
  .ck-section-title{font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); margin:0}
  .ck-toggle{display:flex; border:2px solid var(--ink); border-radius:999px; padding:3px; gap:3px}
  .ck-toggle-btn{flex:1; border:none; background:none; padding:8px 10px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:12px; cursor:pointer; color:var(--ink)}
  .ck-toggle-btn.active{background:var(--ink); color:var(--paper)}
  .ck-fields-group{display:flex; flex-direction:column; gap:14px}
  .ck-pickup-note{font-size:12.5px; color:var(--ink-soft); background:var(--paper-raised); border-radius:10px; padding:10px 12px; margin:0}
  .ck-error{font-size:12px; color:#B4231D; margin:0 0 6px; font-weight:700}
  .ck-check{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink); cursor:pointer}
  .ck-check input{width:16px; height:16px; accent-color:var(--ink); cursor:pointer; margin:0; flex:0 0 auto}
  .checkout-success{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; flex:1; padding:40px 28px; gap:8px}
  .ck-success-icon{font-size:48px; margin-bottom:6px}
  @media (max-width:480px){ .cart-drawer{width:calc(100vw - 40px)} }

  /* ================= VISTAZO RÁPIDO (quick view) ================= */
  .qv-overlay{position:fixed; inset:0; background:rgba(29,23,18,.55); opacity:0; visibility:hidden; transition:opacity .2s; z-index:97}
  .qv-overlay.show{opacity:1; visibility:visible}
  .qv-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(480px,92vw); max-height:88vh; overflow:hidden; background:var(--paper); border:2px solid var(--ink); border-radius:22px; box-shadow:var(--shadow); z-index:98; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; display:flex; flex-direction:column}
  .qv-modal.show{opacity:1; visibility:visible; transform:translate(-50%,-50%)}
  .qv-scroll{padding:22px 22px 26px; overflow-y:auto; flex:1; min-height:0; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
  .qv-scroll::-webkit-scrollbar{width:8px}
  .qv-scroll::-webkit-scrollbar-track{background:transparent; margin:8px 0}
  .qv-scroll::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:8px}
  .qv-close-sticky{position:sticky; top:0; right:0; height:0; z-index:3}
  .qv-close{position:absolute; top:14px; right:14px; background:var(--paper-raised); border:2px solid var(--ink); border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:15px; line-height:1; z-index:2; color:var(--ink)}
  .qv-close:hover{background:var(--line)}
  .qv-meta{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px; padding-right:36px}
  .qv-title{font-family:var(--font-display); font-weight:800; font-size:clamp(18px,2.6vw,22px); text-transform:uppercase; margin:0 0 8px; text-wrap:balance; padding-right:36px}
  .qv-rating{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); margin:0 0 14px}
  .qv-media{position:relative; border-radius:18px; overflow:hidden; border:2px solid var(--ink); aspect-ratio:1/1; background:var(--paper-raised)}
  .qv-media-main{width:100%; height:100%}
  .qv-media-main img, .qv-media-main video{width:100%; height:100%; object-fit:cover; display:block}
  .qv-arrow{position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:2px solid var(--ink); background:rgba(251,245,235,.92); cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; color:var(--ink)}
  .qv-arrow-prev{left:10px} .qv-arrow-next{right:10px}
  .qv-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
  .qv-thumbs::-webkit-scrollbar{display:none}
  .qv-thumb{flex:0 0 50px; width:50px; aspect-ratio:1/1; border-radius:9px; border:2px solid var(--line-strong); overflow:hidden; cursor:pointer; background:var(--paper-raised); position:relative; padding:0}
  .qv-thumb img{width:100%; height:100%; object-fit:cover; display:block}
  .qv-thumb.is-active{border-color:var(--accent)}
  .qv-thumb .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(29,23,18,.35); color:#fff; font-size:14px}
  .qv-tallas{margin:18px 0 0}
  .qv-tallas h5, .qv-related h5, .qv-reviews h5{font-family:var(--font-display); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 8px}
  .qv-talla-row{display:flex; flex-wrap:wrap; gap:7px}
  .qv-talla-btn{border:2px solid var(--ink); border-radius:999px; background:var(--paper-raised); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:7px 15px; cursor:pointer}
  .qv-talla-btn.is-selected{background:var(--ink); color:var(--paper)}
  .qv-colores{margin:18px 0 0}
  .qv-color-row{display:flex; flex-wrap:wrap; gap:12px}
  .qv-color-swatch{display:inline-flex; flex-direction:column; align-items:center; gap:5px}
  .qv-color-dot{width:26px; height:26px; border-radius:50%; border:2px solid var(--ink)}
  .qv-color-name{font-size:10.5px; font-weight:600; color:var(--ink-soft)}
  .qv-color-swatch{cursor:pointer}
  .qv-color-swatch.is-selected .qv-color-dot{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
  .qv-color-swatch.is-selected .qv-color-name{color:var(--ink); font-weight:700}
  .qv-talla-btn.is-agotada{opacity:.35; cursor:not-allowed; text-decoration:line-through}
  .qv-color-swatch.is-agotada{opacity:.35; cursor:not-allowed}
  .qv-color-swatch.is-agotada .qv-color-dot{position:relative}
  .qv-color-swatch.is-agotada .qv-color-dot::after{content:""; position:absolute; inset:0; margin:auto; width:130%; height:2px; background:var(--ink); transform:rotate(-45deg); top:50%; left:-15%}
  .cart-variant{font-size:12px; color:var(--ink); margin:2px 0 4px; display:flex; align-items:center; gap:5px; flex-wrap:wrap}
  .cart-cdot{display:inline-block; width:12px; height:12px; border-radius:50%; border:1px solid var(--ink); vertical-align:middle}
  .qv-desc{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:18px 0 0; white-space:pre-wrap}
  .qv-price{font-family:var(--font-mono); font-weight:700; font-size:19px; margin:18px 0 4px}
  .qv-stock-note{font-size:12px; color:var(--ink-soft); margin:0 0 10px; min-height:2px}
  .qv-addbag{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--addbag-bg,var(--paper)); color:var(--addbag-text,#fff); border:2px solid var(--ink); border-radius:999px; padding:13px; font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer}
  .qv-addbag:hover{background:var(--addbag-bg-deep,var(--paper-raised))}
  .qv-full-link{display:block; text-align:center; font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--accent); margin-top:10px}
  .qv-related{margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
  .qv-related-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
  .qv-related-row::-webkit-scrollbar{display:none}
  .qv-related-item{flex:0 0 92px; cursor:pointer}
  .qv-related-item img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; border:2px solid var(--ink); display:block; background:var(--paper-raised)}
  .qv-related-item .nm{font-size:11px; margin-top:5px; text-align:center; color:var(--ink); text-wrap:balance}
  .qv-related-item .pr{font-family:var(--font-mono); font-size:10.5px; text-align:center; color:var(--ink-soft)}
  .qv-reviews{margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
  .qv-review{border-bottom:1px solid var(--line); padding:12px 0}
  .qv-review:first-child{padding-top:0}
  .qv-review-head{display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin:0 0 3px}
  .qv-review-name{font-family:var(--font-display); font-weight:700; font-size:13px}
  .qv-review-date{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft)}
  .qv-review-stars{color:#C9A227; font-size:12px; display:block; margin:0 0 4px}
  .qv-review-text{font-size:13px; color:var(--ink); margin:0; line-height:1.55; white-space:pre-wrap}
  .qv-review-empty{color:var(--ink-soft); font-size:13px; margin:0 0 4px}
  .qv-review-toggle{display:block; width:100%; background:var(--paper-raised); color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:11px; font-family:var(--font-display); font-weight:700; font-size:12.5px; cursor:pointer; margin-top:8px}
  .qv-review-form{margin-top:12px; display:flex; flex-direction:column; gap:8px}
  .qv-review-form input, .qv-review-form textarea{border:2px solid var(--ink); border-radius:10px; padding:9px 12px; font-family:var(--font-body); font-size:13px; background:var(--paper-raised); color:var(--ink)}
  .qv-review-form textarea{resize:vertical}
  .qv-star-pick{font-size:22px; display:flex; gap:5px}
  .qv-star-pick button{background:none; border:none; cursor:pointer; padding:0; color:var(--line-strong); line-height:1}
  .qv-star-pick button.is-on{color:#C9A227}
  .qv-review-submit{background:var(--ink); color:var(--paper); border:2px solid var(--ink); border-radius:999px; padding:11px; font-family:var(--font-display); font-weight:700; font-size:12.5px; cursor:pointer}
  .qv-review-note{font-size:11.5px; color:var(--ink-soft); text-align:center; margin:6px 0 0; min-height:14px}
  @media (max-width:600px){ .qv-modal{width:94vw} }

  /* ================= PORTA PASAPORTE: ventana emergente de promo ================= */
  .ppfree-overlay{position:fixed; inset:0; background:rgba(29,23,18,.55); opacity:0; visibility:hidden; transition:opacity .2s; z-index:97}
  .ppfree-overlay.show{opacity:1; visibility:visible}
  .ppfree-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(740px,92vw); max-height:88vh; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; background:var(--paper); border:2px solid var(--ink); border-radius:24px; box-shadow:var(--shadow); z-index:98; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s}
  .ppfree-modal::-webkit-scrollbar{display:none}
  .ppfree-modal.show{opacity:1; visibility:visible; transform:translate(-50%,-50%)}
  .ppfree-close{position:absolute; top:16px; right:16px; background:var(--paper-raised); border:2px solid var(--ink); border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:15px; line-height:1; z-index:5; color:var(--ink)}
  .ppfree-close:hover{background:var(--line)}
  .ppfree-grid{display:flex; align-items:stretch}
  .ppfree-text{flex:1 1 58%; min-width:0; padding:38px 36px 34px}
  .ppfree-eyebrow{font-family:var(--font-display); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); margin:0 0 8px}
  .ppfree-title{font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3.6vw,30px); line-height:1.06; margin:0 0 26px; padding-right:34px; text-wrap:balance; color:var(--ink)}
  .ppfree-title-hi{display:block; color:var(--accent); font-size:clamp(38px,6.2vw,52px); line-height:.98; margin-top:2px}
  .ppfree-steps{display:flex; gap:20px}
  .ppfree-step{flex:1 1 0; display:flex; flex-direction:column; gap:10px; min-width:0}
  .ppfree-step-icon{width:44px; height:44px; object-fit:contain}
  .ppfree-step-title{font-family:var(--font-display); font-weight:800; font-size:14px; line-height:1.2; color:var(--ink)}
  .ppfree-step-desc{font-family:var(--font-body); font-size:12.5px; line-height:1.4; color:var(--ink-soft)}
  .ppfree-visual{flex:0 0 38%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:28px; background-image:radial-gradient(rgba(29,23,18,.10) 1px, transparent 1px); background-size:9px 9px; border-left:2px dashed var(--line)}
  .ppfree-product{display:block; width:100%; max-width:220px; text-decoration:none}
  .ppfree-product:hover{transform:translate(-1px,-1px)}
  .ppfree-product-img{width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; border:2px solid var(--ink); background:var(--paper-raised); box-shadow:var(--shadow)}
  .ppfree-product-img img{width:100%; height:100%; object-fit:cover; display:block}
  .ppfree-tiendas-btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; max-width:220px; box-sizing:border-box; background:none; color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:9px 14px; font-family:var(--font-display); font-weight:800; font-size:13px; text-decoration:none}
  .ppfree-tiendas-btn:hover{transform:translate(-1px,-1px)}
  @media (max-width:880px){
    .ppfree-modal{width:86vw}
    .ppfree-close{top:22px; right:22px; width:30px; height:30px; font-size:13px}
    .ppfree-grid{flex-direction:column}
    .ppfree-text{padding:20px 10px 14px}
    .ppfree-eyebrow{margin:0 0 4px}
    .ppfree-title{margin:0 0 14px; padding-right:24px}
    .ppfree-title-hi{margin-top:0}
    .ppfree-steps{flex-direction:column; gap:9px}
    .ppfree-step{display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:10px; row-gap:1px}
    .ppfree-step-icon{grid-column:1; grid-row:1 / 3; width:30px; height:30px; align-self:center}
    .ppfree-step-title{grid-column:2; grid-row:1}
    .ppfree-step-desc{grid-column:2; grid-row:2}
    .ppfree-visual{flex:0 0 auto; border-left:none; border-top:2px dashed var(--line); padding:12px 8px}
    .ppfree-product{max-width:160px; margin:0 auto}
    .ppfree-tiendas-btn{max-width:160px}
  }

  /* ================= REGALOS (asignar productos del carrito a personas) ================= */
  .gift-overlay{position:fixed; inset:0; background:rgba(29,23,18,.55); opacity:0; visibility:hidden; transition:opacity .2s; z-index:170}
  .gift-overlay.show{opacity:1; visibility:visible}
  .gift-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(440px,92vw); max-height:86vh; overflow-y:auto; scrollbar-width:none; background:var(--paper); border:2px solid var(--ink); border-radius:22px; box-shadow:var(--shadow); z-index:171; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s}
  .gift-modal::-webkit-scrollbar{display:none}
  .gift-modal.show{opacity:1; visibility:visible; transform:translate(-50%,-50%)}
  .gift-close{position:absolute; top:16px; right:16px; background:var(--paper-raised); border:2px solid var(--ink); border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:15px; line-height:1; color:var(--ink)}
  .gift-close:hover{background:var(--line)}
  .gift-body{padding:34px 28px 28px}
  .gift-question{margin:0 0 18px; padding-right:26px; font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink); text-wrap:balance}
  .gift-fields{display:flex; flex-direction:column; gap:10px; margin:0 0 14px}
  .gift-field-row{display:flex; align-items:center; gap:8px}
  .gift-field-input{flex:1; min-width:0; border:2px solid var(--ink); border-radius:10px; padding:9px 12px; font-family:inherit; font-size:14px; background:var(--paper-raised); color:var(--ink)}
  .gift-field-input:focus{outline:2px solid var(--accent); outline-offset:1px}
  .gift-field-remove{flex:0 0 auto; background:none; border:none; color:var(--ink-soft); font-size:15px; cursor:pointer; width:26px; height:26px; border-radius:50%}
  .gift-field-remove:hover{background:var(--paper-raised)}
  .gift-add-more{display:block; background:none; border:none; color:var(--accent); font-weight:700; font-size:13px; cursor:pointer; padding:2px 0; margin:0 0 22px; text-decoration:underline}
  .gift-save-btn{width:100%; background:var(--ink); color:var(--paper); border:none; border-radius:999px; padding:13px; font-family:var(--font-display); font-weight:800; font-size:14px; letter-spacing:.02em; text-transform:uppercase; cursor:pointer}
  .gift-save-btn:hover{opacity:.9}
  .gift-summary-list{display:flex; flex-direction:column; gap:16px; margin:0 0 20px}
  .gift-person-row{border-bottom:1px solid var(--line); padding-bottom:14px}
  .gift-person-row:last-child{border-bottom:none; padding-bottom:0}
  .gift-person-name{font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--ink); margin:0 0 6px}
  .gift-person-gifts{margin:0; padding-left:18px; font-size:12.5px; color:var(--ink-soft); line-height:1.6}
  .gift-person-empty{margin:0; font-size:12.5px; color:var(--accent); font-style:italic}
  .gift-edit-btn{position:absolute; top:16px; right:58px; height:34px; display:flex; align-items:center; background:none; border:none; color:var(--accent); font-weight:700; font-size:12.5px; cursor:pointer; padding:0; text-decoration:underline}
  .gift-edit-btn[hidden]{display:none}
  @media (max-width:480px){ .gift-modal{width:90vw} .gift-body{padding:28px 20px 22px} }

  /* ================= PASAPORTE (perfil de usuario) ================= */
  .passport-ico svg{height:26px; width:22px; display:block}
  .pp-overlay{position:fixed; inset:0; background:rgba(29,23,18,.55); opacity:0; visibility:hidden; transition:opacity .2s; z-index:97}
  .pp-overlay.show{opacity:1; visibility:visible}
  .pp-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(880px,94vw); max-height:88vh; overflow-y:auto; scrollbar-width:none; background:var(--paper); border:2px solid var(--ink); border-radius:22px; box-shadow:var(--shadow); z-index:98; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s}
  .pp-modal::-webkit-scrollbar{display:none}
  .pp-modal.pp-modal--book{background:transparent; border:none; box-shadow:none; border-radius:0}
  .pp-modal.show{opacity:1; visibility:visible; transform:translate(-50%,-50%)}
  .pp-close{position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:999px; border:2px solid var(--ink); background:var(--paper); cursor:pointer; font-size:15px; z-index:5; color:var(--ink)}
  .pp-modal.pp-modal--book .pp-close{top:4%; right:7%}
  .pp-scroll{padding:34px 30px 30px}
  .pp-modal.pp-modal--book .pp-scroll{padding:8px 0 0}
  @media (max-width:600px){ .pp-modal{width:94vw} .pp-scroll{padding:26px 18px 22px} }
  .pp-modal.pp-modal--edit{width:min(640px,92vw)}
  .pp-modal.pp-modal--edit .pp-scroll{padding:28px 26px 26px}
  @media (max-width:600px){ .pp-modal.pp-modal--edit .pp-scroll{padding:24px 18px 20px} }
  .pp-auth-head{text-align:center; margin-bottom:18px}
  .pp-auth-head svg{display:block; margin:0 auto 10px}
  .pp-auth-head h3{font-family:var(--font-display); font-size:24px; margin:0 0 4px}
  .pp-auth-head p{color:var(--ink-soft); font-size:13px; margin:0}
  .pp-auth-tabs{display:flex; gap:8px; max-width:340px; margin:0 auto 16px; background:var(--paper-raised); border-radius:999px; padding:4px; border:1px solid var(--line)}
  .pp-auth-tabs button{flex:1; border:none; background:none; padding:9px 0; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:13px; cursor:pointer; color:var(--ink-soft)}
  .pp-auth-tabs button.is-on{background:var(--ink); color:var(--paper)}
  .pp-auth-form{max-width:340px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
  .pp-auth-form input{width:100%; box-sizing:border-box; padding:12px 14px; border:2px solid var(--line-strong); border-radius:12px; font-family:var(--font-body); font-size:14px; background:var(--paper)}
  .pp-auth-submit{background:var(--accent); color:#fff; border:2px solid var(--accent-deep); border-radius:999px; padding:12px; font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer}
  .pp-auth-or{text-align:center; font-size:11.5px; color:var(--ink-soft); margin:14px 0}
  .pp-google-btn{width:100%; max-width:340px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--paper); border:2px solid var(--line-strong); border-radius:999px; padding:11px; font-family:var(--font-body); font-weight:600; font-size:13.5px; cursor:pointer}
  .pp-auth-error{max-width:340px; margin:10px auto 0; text-align:center; color:var(--accent-deep); font-size:12.5px; min-height:14px}
  .pp-auth-switch{text-align:center; margin-top:14px; font-size:12.5px; color:var(--ink-soft)}
  .pp-auth-switch button{background:none; border:none; color:var(--accent-deep); font-weight:700; cursor:pointer; text-decoration:underline; padding:0; font-size:inherit}
  .pp-book-topbar{position:absolute; left:27.5%; bottom:13%; transform:translateX(-50%); z-index:5}
  .pp-logout{background:none; border:none; padding:0; font-size:11.5px; font-weight:700; cursor:pointer; color:var(--accent-deep); text-decoration:underline}
  .pp-m-logout{position:absolute; left:14%; bottom:15%; background:none; border:none; padding:0; font-size:11.5px; font-weight:700; cursor:pointer; color:var(--accent-deep); text-decoration:underline; z-index:3}
  .pp-book{position:relative; width:100%; aspect-ratio:1536/1024; background-image:url('pasaporte-libro.webp?v=4e027aa7db'); background-size:100% 100%; background-repeat:no-repeat; margin:0 auto}
  #ppBook .pp-leaf, #ppBook .pp-book-topbar, #ppBook .pp-m-inner, #ppBook .pp-m-tab{transition:opacity .3s ease; opacity:1}
  #ppBook.pp-wait .pp-leaf, #ppBook.pp-wait .pp-book-topbar, #ppBook.pp-wait .pp-m-inner, #ppBook.pp-wait .pp-m-tab{opacity:0}
  .pp-leaf{position:absolute; top:7%; bottom:15%; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; scrollbar-width:none}
  .pp-leaf-left{left:8%; right:53%; padding-left:14px}
  .pp-leaf-right{left:53%; right:13%}
  .pp-leaf::-webkit-scrollbar{display:none}
  .pp-leaf-title{font-family:var(--font-display); font-size:19px; margin:0 0 12px; flex:none}
  .pp-traveler-card{display:flex; flex-direction:column; gap:10px; margin-bottom:18px; flex:none; background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; padding:12px}
  .pp-traveler-top{display:flex; align-items:flex-start; gap:12px}
  .pp-avatar{width:68px; height:68px; border-radius:14px; background:var(--paper); border:1px solid var(--line); flex:none; display:flex; align-items:center; justify-content:center; font-size:30px; background-size:cover; background-position:center}
  .pp-avatar.pp-avatar-empty{font-size:10.5px; font-weight:800; font-family:var(--font-display); line-height:1.15; text-align:center; color:var(--ink-soft); padding:0 4px}
  .pp-traveler-info{flex:1; min-width:0; padding-top:2px}
  .pp-traveler-info .nm{font-weight:700; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:5px}
  .pp-dato{font-size:11.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .pp-dato .ico{flex:none; font-size:12px}
  .pp-sellos-progreso{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--ink-soft); margin:-2px 0 12px}
  .pp-sellos-progreso .pp-bar{width:64px; flex:none}
  .pp-edit-link{background:none; border:none; padding:0; font-size:10.5px; color:var(--accent-deep); font-weight:700; cursor:pointer; text-decoration:underline; flex:none; align-self:flex-end; white-space:nowrap}
  .pp-compras-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; flex:none}
  .pp-compras-head h4{font-family:var(--font-display); font-size:13px; margin:0}
  .pp-ver-todas{background:none; border:none; padding:0; font-size:10.5px; color:var(--accent-deep); font-weight:700; cursor:pointer}
  .pp-compras-empty, .pp-list-empty{color:var(--ink-soft); font-size:11.5px; background:var(--paper-raised); border-radius:12px; padding:12px; text-align:center}
  .pp-pedido{display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--line)}
  .pp-pedido:last-child{border-bottom:none}
  .pp-pedido img, .pp-pedido .ph{width:30px; height:40px; border-radius:6px; object-fit:cover; background:var(--paper-raised); flex:none}
  .pp-pedido .info{flex:1; min-width:0}
  .pp-pedido .info .num{font-weight:700; font-size:11px}
  .pp-pedido .info .meta{font-size:10px; color:var(--ink-soft)}
  .pp-pedido{cursor:pointer}
  .ppo-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px}
  .ppo-head .num{font-family:var(--font-display); font-size:19px; font-weight:800}
  .ppo-head .fecha{font-size:12px; color:var(--ink-soft)}
  .ppo-prod-head{display:flex; gap:8px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); padding-bottom:6px; border-bottom:1px solid var(--line)}
  .ppo-prod-row{display:flex; gap:8px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px}
  .ppo-prod-row:last-child{border-bottom:none}
  .ppo-prod-nom{flex:1; min-width:0}
  .ppo-prod-cant{width:52px; text-align:center; flex:none}
  .ppo-prod-para{width:96px; flex:none; color:var(--ink-soft)}
  .ppo-datos{margin-top:16px; padding-top:14px; border-top:2px solid var(--ink); display:flex; flex-direction:column; gap:4px; font-size:12.5px}
  .ppo-datos .hint{color:var(--ink-soft); font-size:11.5px}
  /* El overlay/modal de detalle de pedido reutiliza el look de .qv-overlay/
     .qv-modal, pero se abre DESDE ADENTRO del Pasaporte (.pp-modal, z-index
     98) — con el mismo z-index que .qv-modal (98) quedaba empatado y el
     orden en el DOM lo mandaba detrás. Lo subimos por encima de todo lo
     demás (incluido .gift-modal, 171) para que siempre se vea arriba. */
  #ppoOverlay{z-index:176}
  #ppoModal{z-index:177}
  .pp-estado{font-size:9px; font-weight:700; border-radius:999px; padding:3px 7px; white-space:nowrap}
  .pp-estado.entregado{background:#DCEFDA; color:#1D5C33}
  .pp-estado.en_camino{background:#DCE8F5; color:#1D4E8C}
  .pp-estado.procesando{background:#F6EAC6; color:#8A6A0E}
  .pp-estado.cancelado{background:var(--paper-raised); color:var(--ink-soft)}
  .pp-bar{height:6px; border-radius:999px; background:var(--paper-raised); border:1px solid var(--line); overflow:hidden}
  .pp-bar > i{display:block; height:100%; background:var(--accent); border-radius:999px}
  .pp-sellos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px 12px; margin-top:2px}
  .pp-sello-cell{position:relative; text-align:center}
  .pp-sello-badge{width:100%; aspect-ratio:1; position:relative; cursor:pointer}
  .pp-sello-badge-inner{width:100%; height:100%; border-radius:50%; overflow:hidden; background:transparent; border:2px solid transparent; display:flex; align-items:center; justify-content:center; font-size:22px; transition:transform .15s}
  .pp-sello-badge:hover .pp-sello-badge-inner{transform:scale(1.06)}
  
  .pp-sello-cell.pendiente .pp-sello-badge-inner{filter:grayscale(100%)}
.pp-sello-badge{container-type:inline-size}
.pp-sello-tag{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-12deg); background:#fff; color:#CA2632; border:2px solid #CA2632; border-radius:4px; padding:.34em .55em; font-size:10px; font-size:clamp(8px,14cqw,13px); font-weight:700; line-height:1; text-box:trim-both cap alphabetic; white-space:nowrap; pointer-events:none; box-shadow:0 1px 3px rgba(0,0,0,.18); z-index:2}
@supports not (text-box:trim-both cap alphabetic){.pp-sello-tag{padding:.4em .55em .28em}}
  .pp-sello-badge-inner img{width:100%; height:100%; object-fit:cover}
  .pp-sello-spark{position:absolute; top:0; left:0; transform:translate(-50%,-50%) scale(0); font-size:14px; line-height:1; color:#F6D34D; text-shadow:0 0 4px rgba(246,211,77,.95), 0 0 2px rgba(255,255,255,.85); pointer-events:none; animation:ppSelloSparkTwinkle 1.5s ease-in-out 3}
  @keyframes ppSelloSparkTwinkle{0%,100%{opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0deg)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(25deg)}}
  .pp-sello-lbl{font-size:9.5px; font-weight:700; margin-top:5px; color:var(--ink-soft); line-height:1.2}
  .pp-sello-cell.completado .pp-sello-lbl, .pp-sello-cell.reclamado .pp-sello-lbl{color:var(--ink)}
  .pp-sello-mini{height:4px; border-radius:99px; background:var(--paper); border:1px solid var(--line); overflow:hidden; margin-top:5px}
  .pp-sello-mini > i{display:block; height:100%; background:var(--ink-soft)}
  .pp-sello-pop{position:fixed; z-index:150; width:200px; background:var(--paper); border:2px solid var(--ink); border-radius:14px; box-shadow:var(--shadow); padding:13px; text-align:left; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .12s, transform .12s; pointer-events:none}
  /* ===== Aviso "Reto cumplido" (sello recién completado) ===== */
  /* ===== Aviso "Reto cumplido": pila de sellos que asoma parcialmente
     desde el borde derecho, se despliega en abanico al tocarla. ===== */
  .pp-notif{position:fixed; right:-30px; bottom:22px; z-index:160}
  .pp-notif-stack{position:relative; width:92px; height:92px}
  .pp-notif-badge-btn{position:absolute; left:0; top:0; width:92px; height:92px; padding:0; margin:0; border:none; background:none; cursor:pointer; overflow:visible; transition:transform .5s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 8px 16px rgba(29,23,18,.28)); will-change:transform; -webkit-backface-visibility:hidden; backface-visibility:hidden}
  .pp-notif-badge-btn img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; pointer-events:none}
  .pp-notif-badge-btn img.pp-notif-badge-outline{filter:url(#ppSelloBlackOutline)}
  .pp-notif-badge-btn img.pp-notif-badge-fill{filter:url(#ppSelloWhiteBg)}
  .pp-notif-badge-emoji{width:100%; height:100%; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; background:var(--paper-raised); border:3px solid var(--ink)}
  .pp-notif-badge-btn:first-child{animation:ppNotifStackPulse 2s ease-in-out infinite}
  .pp-notif.is-fanned .pp-notif-badge-btn:first-child{animation:none}
  .pp-notif-caption{display:none; position:fixed; left:calc(100% - 166px); transform:translateX(-50%); bottom:30px; max-width:200px; text-align:center; font-family:var(--font-display); font-weight:800; font-size:13px; line-height:1.4; color:#000; -webkit-text-stroke:3px #fff; paint-order:stroke fill; text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 -1.5px 0 #fff,0 1.5px 0 #fff,-1.5px 0 0 #fff,1.5px 0 0 #fff; z-index:161}
  .pp-notif.is-fanned .pp-notif-caption{display:block}
  .pp-notif-arrow{display:none; position:fixed; inset:0; z-index:159; pointer-events:none}
  .pp-notif.is-fanned .pp-notif-arrow{display:block}
  @keyframes ppNotifStackPulse{0%,100%{filter:drop-shadow(0 8px 16px rgba(29,23,18,.28))} 50%{filter:drop-shadow(0 8px 20px rgba(202,38,50,.55))}}
  /* ===== Botón flotante de WhatsApp: misma esquina que el aviso de sellos
     (asoma semi oculto por el borde derecho y se revela al pasar el mouse o
     al tocarlo). El enlace se configura desde LlamiWeb (webText('whatsapp_link'));
     si no hay enlace cargado, el botón se queda oculto (ver JS más abajo). ===== */
  .wa-float{position:fixed; right:-31px; bottom:120px; z-index:80; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(29,23,18,.3); transition:right .3s cubic-bezier(.34,1.56,.64,1), transform .25s ease; text-decoration:none}
  .wa-float svg{width:56%; height:56%; display:block; pointer-events:none}
  .wa-float:active{transform:scale(.94)}
  @media (hover:hover){ .wa-float:hover{right:10px} }
  .wa-float.is-touched{right:10px}
  @media (max-width:640px){ .wa-float{bottom:104px} }
  /* ===== Personajes ocultos: 7 personajes escondidos en distintos rincones
     de la home — debajo de la tarjeta Alpaca, arriba del portapasaporte,
     en "Nuevas llegadas"/"Más vendidos" (costados de la página), dentro
     de la franja "¡Dale alegría a tu día!", detrás del botón Suscríbete,
     y boca abajo colgando del banner principal. Se tocan (clic o
     dedo), se revelan del todo un instante y desaparecen para siempre. Al
     encontrar los 7 se desbloquea el sello del Pasaporte de tipo
     "personajes_ocultos".
     Nota: los ids internos son p1,p2,p3,p4,p6,p7,p8 (sin p5) — hubo un p5
     (detrás de la foto de Bodega del menú) que el usuario pidió eliminar
     para volver de 8 a 7 personajes; no se renumeraron p6/p7/p8 para no
     tocar de nuevo su CSS/JS ya probados.
     Regla fija de diseño: SIEMPRE quedan detrás del cuadro/elemento que los
     esconde (z-index:-1 acá abajo) y solo se les asoma un 20% del tamaño
     por un borde — el 80% restante queda tapado. Al tocarlos, pasan al
     frente (z-index:50) y terminan de salir del todo antes de desvanecerse. ===== */
  .ph-peek{position:absolute; padding:0 !important; margin:0; border:none !important; background:none !important;
    border-radius:0 !important; box-shadow:none !important; cursor:pointer; z-index:-1; -webkit-appearance:none; appearance:none;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
    filter:drop-shadow(0 4px 10px rgba(29,23,18,.3)); -webkit-tap-highlight-color:transparent}
  /* Los personajes son <button>, y algunos viven dentro de contenedores que
     tienen sus propias reglas CSS genéricas para "button" (ej. .news-form
     button, con fondo negro y border-radius:999px para el botón real de
     "Suscribirme") — esas reglas (clase+etiqueta) ganan en especificidad a
     una sola clase, así que sin !important se comían el fondo/borde de acá
     arriba y el personaje quedaba tapado por un óvalo negro sólido en vez
     de mostrarse. Los !important de arriba lo blindan contra cualquier
     estilo de botón del sitio, sea el actual o uno futuro. */
  .ph-peek img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; -webkit-user-drag:none; user-select:none}
  .ph-peek.ph-revealed{z-index:50}
  .ph-peek.ph-gone{opacity:0}
  @media (hover:hover){ .ph-peek:not(.ph-revealed):not(.ph-gone):hover{filter:drop-shadow(0 7px 15px rgba(202,38,50,.45))} }

  /* p1 — detrás del botón "Alpaca", asomando por arriba, tamaño 46px,
     subido un 30% más que antes, bien girado */
  .ph-spot-p1{width:46px; height:46px; left:50%; margin-left:-23px; top:-21px; transform:rotate(-18deg)}
  .ph-spot-p1.ph-revealed{transform:translateY(-39px) rotate(-6deg)}
  .ph-spot-p1.ph-gone{transform:translateY(-60px) rotate(-26deg)}

  /* p2 — detrás del portapasaporte, asomando por arriba (58px), subido
     un 5% más que antes */
  .ph-spot-p2{width:58px; height:58px; left:24px; top:-12px; transform:rotate(-10deg)}
  .ph-spot-p2.ph-revealed{transform:translateY(-49px) rotate(-4deg)}
  .ph-spot-p2.ph-gone{transform:translateY(-74px) rotate(-18deg)}

  /* p3 — ya no detrás de la nube de envíos: ahora asoma por el borde
     derecho de la página, a la altura de "Nuevas llegadas", girado 330° */
  .ph-spot-p3{width:40px; height:40px; right:-21px; top:50%; margin-top:-20px; transform:rotate(330deg); z-index:2}
  .ph-spot-p3.ph-revealed{transform:translateX(-34px) rotate(320deg)}
  .ph-spot-p3.ph-gone{transform:translateX(-54px) rotate(306deg)}

  /* p7 — ya no detrás de la nube de envíos: ahora asoma por el borde
     izquierdo de la página, a la altura de "Más vendidos", girado 90° en
     sentido horario. Revelado por escala (mismo motivo que p4), más un
     translateX(70px) A PROPOSITO puesto ANTES del rotate() en la lista de
     transforms: con una rotacion de 90 grados, un translateX escrito
     DESPUES del rotate() se compone en el eje ya rotado y termina moviendo
     el elemento en vertical, no a la derecha en pantalla (probado en vivo:
     con "rotate(90deg) translateX(70px)" casi no se movia en horizontal).
     Puesto ANTES del rotate() se aplica en el espacio de pantalla sin
     rotar, asi que si lo saca mucho mas hacia la derecha al revelarse, tal
     como pidio el usuario ("cuando lo pisas, que salga mucho mas a la
     derecha"). */
  .ph-spot-p7{width:40px; height:40px; left:-30px; top:50%; margin-top:-20px; transform:rotate(90deg); z-index:2}
  .ph-spot-p7.ph-revealed{transform:translateX(70px) rotate(90deg) scale(1.7)}
  .ph-spot-p7.ph-gone{transform:rotate(90deg) scale(.3)}

  /* p4 — reubicado de la maleta a debajo de la franja animada "¡Dale
     alegría a tu día!" (#joyBar), casi pegado al borde derecho de la
     página, girado 225°. La maleta se descartó por completo: dentro del
     cajón del carrito, #cartView (el panel de contenido) es transparente
     pero tiene z-index:1 a propósito y es más ancho que .cart-bg — nunca
     se podía tocar el personaje sin importar el lado o el offset (ver
     historial). Posición calculada por JS (ver phPositionP4/
     ensureJoyBarWrap) — acá solo tamaño y giro. Revelado por escala en vez
     de traslación porque a rotaciones grandes un translateX se compone con
     la rotación y se ve raro. */
  .ph-spot-p4{width:50px; height:50px; left:0; top:0; transform:rotate(225deg)}
  .ph-spot-p4.ph-revealed{transform:rotate(225deg) scale(1.7)}
  .ph-spot-p4.ph-gone{transform:rotate(225deg) scale(.3)}

  /* p6 — reubicado: ya no detrás del formulario de Suscribirme (el footer
     ahora es compartido por todas las páginas del sitio vía core.js, así
     que ya no sirve como escondite exclusivo del home). Ahora asoma por el
     costado izquierdo de la sección Llamibar/chocolates (#secLlamibar
     .lb-box), a la mitad de su alto, girado 300°, detrás de la caja
     (z-index normal -1, no la excepción de p3/p7) — se le ve solo un 20%
     por fuera del borde izquierdo, el resto queda tapado por la caja.
     Posición fija por CSS, ya no requiere cálculo por JS (antes
     phPositionP6) porque ya no depende de medir un input dinámico. */
  .ph-spot-p6{width:44px; height:44px; left:-4px; top:62%; margin-top:-22px; transform:rotate(300deg)}
  .ph-spot-p6.ph-revealed{transform:translateX(-40px) rotate(300deg)}
  .ph-spot-p6.ph-gone{transform:translateX(-60px) rotate(300deg)}

  /* p8 — boca abajo, cerca de la esquina izquierda del marco del carrusel,
     asomando 55% hacia abajo (44px: 24px afuera, 20px escondidos hacia el
     banner) — bajado desde la versión anterior porque había quedado
     demasiado escondido y no se veía nada */
  .ph-spot-p8{width:44px; height:44px; left:22px; bottom:-24px; transform:rotate(180deg)}
  .ph-spot-p8.ph-revealed{transform:translateY(20px) rotate(174deg)}
  .ph-spot-p8.ph-gone{transform:translateY(39px) rotate(190deg)}

  @media (max-width:640px){
    .ph-spot-p1{width:36px; height:36px; margin-left:-18px; top:-16px}
    .ph-spot-p1.ph-revealed{transform:translateY(-31px) rotate(-6deg)}
    .ph-spot-p1.ph-gone{transform:translateY(-48px) rotate(-26deg)}
    .ph-spot-p2{width:46px; height:46px; left:14px; top:-9px}
    .ph-spot-p2.ph-revealed{transform:translateY(-39px) rotate(-4deg)}
    .ph-spot-p2.ph-gone{transform:translateY(-58px) rotate(-18deg)}
    .ph-spot-p3{width:34px; height:34px; transform:rotate(45deg); z-index:-1} /* re-anclado a la foto de "Nuevas llegadas" (nth-child(2) de #nuevosRail): asoma de su borde derecho a 45 grados. La posicion (left/top) la calcula phPositionP3(). z-index:-1 (la regla NORMAL de .ph-peek, ver linea ~736) en vez del z-index:2 de excepcion que usa p3/p7 en desktop: como ahora asoma de una FOTO (no del borde de la pantalla), debe quedar DETRAS de ella (tapado en su mayoria, solo visible por donde sobresale del borde), igual que el resto de los personajes normales. */
    .ph-spot-p3.ph-revealed{transform:rotate(45deg) scale(1.7)}
    .ph-spot-p3.ph-gone{transform:rotate(45deg) scale(.3)}
    .ph-spot-p7{width:32px; height:32px; margin-top:-16px; left:-24px}
    .ph-spot-p4{width:40px; height:40px}
    .ph-spot-p4.ph-revealed{transform:rotate(225deg) scale(1.7)}
    .ph-spot-p4.ph-gone{transform:rotate(225deg) scale(.3)}
    .ph-spot-p6{width:32px; height:32px; left:16px; margin-top:-16px}
    .ph-spot-p6.ph-revealed{transform:translateX(-28px) rotate(300deg)}
    .ph-spot-p6.ph-gone{transform:translateX(-44px) rotate(300deg)}
    .ph-spot-p8{width:34px; height:34px; left:14px; bottom:-19px}
    .ph-spot-p8.ph-revealed{transform:translateY(15px) rotate(174deg)}
    .ph-spot-p8.ph-gone{transform:translateY(30px) rotate(190deg)}
  }

  .pp-sello-pop.show{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto}
  .pp-sello-pop .t{font-weight:700; font-size:12.5px; margin-bottom:3px}
  .pp-sello-pop .d{font-size:11px; color:var(--ink-soft); margin-bottom:8px}
  .pp-sello-pop .prow{display:flex; align-items:center; gap:6px; margin-bottom:9px}
  .pp-sello-pop .prow .pp-bar{flex:1}
  .pp-sello-pop .prow .n{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); white-space:nowrap}
  .pp-sello-pop .reward{font-size:11px; font-weight:700; border-radius:10px; padding:7px 9px; text-align:center}
  .pp-sello-pop .reward.rosa{background:#F7DCE3; color:#9C2447}
  .pp-sello-pop .reward.azul{background:#DCE8F5; color:#1D4E8C}
  .pp-sello-claim{width:100%; margin-top:8px; background:var(--accent); color:#fff; border:none; border-radius:999px; padding:8px; font-family:var(--font-display); font-weight:700; font-size:11.5px; cursor:pointer}
  .pp-sello-claimed-note{font-size:10.5px; color:#2E8B57; font-weight:700; margin-top:8px; text-align:center}
  .pp-m-wrap{display:none}
  .pp-m-stack{position:relative; width:100%; aspect-ratio:941/1672; margin:0 auto}
  .pp-m-card{position:absolute; inset:0; background-image:url('pasaporte-mobile.webp?v=1be26598b1'); background-size:100% 100%; background-repeat:no-repeat; transition:transform .34s cubic-bezier(.4,0,.2,1), box-shadow .34s}
  .pp-m-card.front{transform:translate(0,0) scale(1); z-index:2; pointer-events:auto; box-shadow:0 14px 30px rgba(20,10,5,.28)}
  .pp-m-card.behind{transform:translate(3%,2%) scale(.96); z-index:1; pointer-events:none; box-shadow:none}
  .pp-m-inner{position:absolute; top:9%; bottom:16%; left:14%; right:14%; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; scrollbar-width:none}
  .pp-m-inner::-webkit-scrollbar{display:none}
  .pp-m-eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 4px; flex:none}
  .pp-m-title{font-family:var(--font-display); font-size:21px; margin:0 0 16px; flex:none}
  .pp-m-sellos-grid{gap:22px 16px; grid-template-columns:repeat(2,1fr)}
  .pp-m-tab{position:absolute; right:14%; bottom:15%; background:rgba(30,20,15,.72); color:#FBF3E7; border:none; border-radius:999px; padding:10px 16px; display:flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:12px; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); z-index:3}
  .pp-m-tab-arrow{font-size:16px; line-height:1}
  @media (prefers-reduced-motion:reduce){ .pp-m-card{transition:none} }
  @media (max-width:768px){
    .pp-book{display:none}
    .pp-m-wrap{display:block}
    .pp-modal.pp-modal--book{width:min(880px,87.4vw)}
  }
  .pp-edit-form{max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
  .pp-book-head{max-width:560px; margin:0 auto 14px}
  .pp-book-head h3{font-family:var(--font-display); font-size:19px; margin:0; text-align:left}
  .pp-edit-top{display:flex; gap:16px; align-items:flex-start}
  .pp-edit-avatar-col{display:flex; flex-direction:column; align-items:center; gap:4px; flex:none; width:90px; text-align:center}
  .pp-edit-avatar-col .pp-link-btn{font-size:10.5px}
  .pp-edit-top-fields{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:10px}
  .pp-f-nombre{flex:1 1 100%; min-width:0}
  .pp-f-cumple{flex:1 1 130px; min-width:130px}
  .pp-f-ciudad{flex:1 1 130px; min-width:130px}
  .pp-edit-form input[type="date"]{-webkit-appearance:none; appearance:none}
  #ppAvatarGallery[hidden]{display:none}
  .pp-edit-cols{display:flex; gap:10px 24px; flex-wrap:wrap}
  .pp-edit-col{flex:1 1 220px; min-width:200px; display:flex; flex-direction:column; gap:10px}
  .pp-edit-form label{font-size:12px; font-weight:700; color:var(--ink-soft); display:flex; flex-direction:column; gap:5px}
  .pp-edit-row{display:flex; gap:10px}
  .pp-edit-row>label{flex:1; min-width:0}
  .pp-edit-row-wrap{display:flex; gap:10px; flex-wrap:wrap}
  .pp-edit-row-wrap>label{flex:1 1 130px; min-width:130px}
  .pp-edit-form input{width:100%; min-width:0; max-width:100%; box-sizing:border-box; padding:9px 11px; border:2px solid var(--line-strong); border-radius:11px; font-family:var(--font-body); font-size:13px; font-weight:400; color:var(--ink)}
  .pp-edit-form select{width:100%; min-width:0; max-width:100%; box-sizing:border-box; padding:9px 11px; border:2px solid var(--line-strong); border-radius:11px; font-family:var(--font-body); font-size:13px; font-weight:400; color:var(--ink); background:var(--paper); cursor:pointer}
  .pp-edit-form input[type="date"]{min-width:0; -webkit-min-logical-width:0}
  @media (max-width:600px){
    .pp-edit-top{flex-direction:column; align-items:center; text-align:center}
    .pp-edit-avatar-col{width:auto}
    .pp-edit-top-fields{width:100%}
    .pp-edit-row-wrap{flex-direction:column}
    .pp-edit-row-wrap>label{flex:1 1 auto; min-width:100%}
    .pp-f-nombre{flex:1 1 130px; min-width:130px; order:1}
    .pp-f-ciudad{flex:1 1 130px; min-width:130px; order:2}
    .pp-f-cumple{flex:1 1 100%; min-width:100%; order:3}
  }
  .pp-edit-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}
  .pp-btn-ghost{background:none; border:1px solid var(--line-strong); border-radius:999px; padding:10px 18px; font-size:12.5px; cursor:pointer; color:var(--ink-soft)}
  .pp-btn-primary{background:var(--accent); color:#fff; border:2px solid var(--accent-deep); border-radius:999px; padding:10px 18px; font-family:var(--font-display); font-weight:700; font-size:12.5px; cursor:pointer}
  .pp-edit-avatar-wrap{display:flex; align-items:center; gap:14px}
  .pp-edit-avatar{width:60px; height:60px; border-radius:14px; background:var(--paper-raised); border:1px solid var(--line-strong); flex:none; display:flex; align-items:center; justify-content:center; font-size:26px; background-size:cover; background-position:center; cursor:pointer}
  .pp-edit-avatar.pp-avatar-empty{font-size:10px; font-weight:800; font-family:var(--font-display); line-height:1.15; text-align:center; color:var(--ink-soft); padding:0 4px}
  .pp-edit-avatar-hint{font-size:11px; color:var(--ink-soft); margin-top:3px}
  .pp-avatar-gallery{display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 4px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--paper-raised)}
  .pp-avatarpick-overlay{position:fixed; inset:0; background:rgba(29,23,18,.55); opacity:0; visibility:hidden; transition:opacity .2s; z-index:110}
  .pp-avatarpick-overlay.show{opacity:1; visibility:visible}
  .pp-avatarpick-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); width:min(420px,90vw); max-height:80vh; overflow-y:auto; scrollbar-width:none; background:var(--paper); border:2px solid var(--ink); border-radius:22px; box-shadow:var(--shadow); z-index:111; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; padding:24px}
  .pp-avatarpick-modal::-webkit-scrollbar{display:none}
  .pp-avatarpick-modal.show{opacity:1; visibility:visible; transform:translate(-50%,-50%)}
  .pp-avatarpick-close{position:absolute; top:14px; right:14px; background:var(--paper-raised); border:2px solid var(--ink); border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:15px; line-height:1; z-index:5; color:var(--ink)}
  .pp-avatarpick-title{font-family:var(--font-display); font-size:18px; margin:0 0 14px}
  .pp-avatarpick-modal .pp-avatar-gallery{margin:0; max-height:none}
  .pp-avatar-opt{width:50px; height:50px; border-radius:12px; border:2px solid var(--line-strong); background-color:var(--paper); background-size:cover; background-position:center; cursor:pointer; flex:none; position:relative}
  .pp-avatar-opt.is-selected{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
  .pp-avatar-opt.is-locked{cursor:not-allowed; filter:grayscale(1); opacity:.55}
  .pp-avatar-opt.is-locked::after{content:"🔒"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px}
  .pp-avatar-gallery-empty{font-size:11px; color:var(--ink-soft)}
  .pp-edit-form input[disabled]{opacity:.6; cursor:not-allowed}
  .pp-edit-pass-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .pp-link-btn{background:none; border:none; padding:0; font-size:12px; color:var(--accent-deep); font-weight:700; cursor:pointer; text-decoration:underline}
  .pp-edit-msg{font-size:11px; color:var(--ink-soft)}


/* --- bloque de estilos #2 (antes id=ppStyles) --- */


  #secPortaPasaporte .pp-wrap{max-width:333px; margin:0 auto; padding:0 14px}
  #secPortaPasaporte .pp-ticket{--pp-bg:#F3EADC; position:relative}
  #secPortaPasaporte .pp-stub-top{position:relative; background:var(--accent); color:#fff; border:2px solid var(--ink); border-bottom:none; border-radius:17px 17px 0 0; padding:17px 15px 19px}
  #secPortaPasaporte .pp-stub-top::before{content:""; position:absolute; inset:6px; border:2px dashed rgba(255,255,255,.55); border-radius:11px; pointer-events:none}
  #secPortaPasaporte .pp-tag{position:relative; display:inline-flex; align-self:flex-start; align-items:center; gap:6px; background:var(--pastel-yellow,#F6D34D); color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:4px 9px; font-family:var(--font-display); font-weight:800; font-size:10.6px; text-transform:uppercase; letter-spacing:.02em}
  #secPortaPasaporte .pp-title{position:relative; margin:10px 0 0; font-family:var(--font-display); font-weight:800; font-size:clamp(21.9px,4.77vw,29.9px); line-height:1.02; letter-spacing:-.02em}
  #secPortaPasaporte .pp-text{position:relative; margin:8px 0 0; font-size:13.2px; line-height:1.45; color:rgba(255,255,255,.93); max-width:269px}
  #secPortaPasaporte .pp-btn{position:relative; display:inline-flex; align-items:center; gap:8px; margin-top:13px; background:var(--paper-raised); color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:8px 14px; font-family:var(--font-display); font-weight:800; font-size:13.2px; text-decoration:none; box-shadow:none}
  #secPortaPasaporte .pp-btn:hover{transform:translate(-1px,-1px)}
  #secPortaPasaporte .pp-stub-bottom{position:relative; background:var(--paper,#fffaf0); color:var(--ink); border:2px solid var(--ink); border-top:2px dashed var(--ink); border-radius:0 0 17px 17px; padding:17px 15px 17px; background-image:radial-gradient(rgba(29,23,18,.10) 1px, transparent 1px); background-size:9px 9px; box-shadow:none}
  #secPortaPasaporte .pp-notch{position:absolute; width:22px; height:22px; border-radius:50%; background:var(--pp-bg); border:2px solid var(--ink); box-sizing:border-box}
  #secPortaPasaporte .pp-notch.left{left:0; top:0; transform:translate(-50%,-50%); clip-path:inset(0 0 0 50%)}
  #secPortaPasaporte .pp-notch.right{right:0; top:0; transform:translate(50%,-50%); clip-path:inset(0 50% 0 0)}
  #secPortaPasaporte .pp-air{font-family:var(--font-display); font-weight:800; font-size:12.2px; text-transform:uppercase; letter-spacing:.06em}
  #secPortaPasaporte .pp-big{font-family:var(--font-display); font-weight:900; font-size:clamp(41.4px,11.48vw,63.3px); line-height:.9; letter-spacing:-.02em; margin:2px 0 10px}
  #secPortaPasaporte .pp-fields{display:grid; grid-template-columns:1fr 1fr; gap:8px 11px}
  #secPortaPasaporte .pp-field{display:flex; flex-direction:column; gap:2px}
  #secPortaPasaporte .pp-flabel{font-family:var(--font-mono); font-size:9.2px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft)}
  #secPortaPasaporte .pp-fval{font-family:var(--font-display); font-weight:800; font-size:15.1px}
  #secPortaPasaporte .pp-barcode{margin-top:11px; height:22px; background-image:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 10px, transparent 10px 12px, var(--ink) 12px 13px, transparent 13px 15px)}
  #secPortaPasaporte .pp-gif-badge{position:absolute; top:18px; right:35px; width:54px; height:71px; object-fit:contain; object-position:top; z-index:4; pointer-events:none}
  @media (max-width:520px){ #secPortaPasaporte .pp-stub-top{padding:14px 11px 17px} #secPortaPasaporte .pp-stub-bottom{padding:14px 11px 14px} }
  @media (min-width:760px){
    #secPortaPasaporte .pp-wrap{max-width:666px; padding:0 18px}
    #secPortaPasaporte .pp-ticket{display:flex; align-items:stretch; border-radius:18px; box-shadow:none}
    #secPortaPasaporte .pp-stub-top{flex:1 1 60%; border:2px solid var(--ink); border-right:2px dashed var(--ink); border-radius:18px 0 0 18px; padding:30px 34px; display:flex; flex-direction:column; justify-content:center; box-shadow:none}
    #secPortaPasaporte .pp-stub-top::before{inset:10px; border-radius:13px}
    #secPortaPasaporte .pp-stub-bottom{flex:0 0 40%; border:2px solid var(--ink); border-left:none; border-top:2px solid var(--ink); border-radius:0 18px 18px 0; padding:28px 26px; display:flex; flex-direction:column; box-shadow:none}
    #secPortaPasaporte .pp-notch.left{left:0; top:0; bottom:auto; right:auto; transform:translate(-50%,-50%); clip-path:inset(50% 0 0 0)}
    #secPortaPasaporte .pp-notch.right{left:0; bottom:0; top:auto; right:auto; transform:translate(-50%,50%); clip-path:inset(0 0 50% 0)}
    #secPortaPasaporte .pp-title{font-size:clamp(29.9px,3.17vw,41.4px)}
    #secPortaPasaporte .pp-text{font-size:13.8px; max-width:346px; margin-top:10px}
    #secPortaPasaporte .pp-btn{margin-top:17px; align-self:flex-start; padding:9px 17px; font-size:13.8px}
    #secPortaPasaporte .pp-fields{margin-top:4px}
    #secPortaPasaporte .pp-barcode{margin-top:auto}
    #secPortaPasaporte .pp-gif-badge{top:22px; right:20px; width:76px; height:100px}
  }


/* --- bloque de estilos #3 (antes id=lbSectionStyles) --- */


  /* Seccion Llamibar (chocolates). Rediseno 2026-09-18 segun montaje de
     Cesar: caja marron redondeada con el chorreado de chocolate encima,
     columna izquierda con logo / "Chocolate organico" / personaje /
     lettering "Cacao Nativo Peruano" / 3 sellos, y las 4 barras a la
     derecha. Todos esos elementos son estaticos (assets/llamibar/*.webp);
     del panel solo vienen: activo, bg, subtitulo y la lista de barras
     (nombre + producto_id).

     Las medidas van en cqw (1cqw = 1% del ancho de la caja) para que la
     seccion escale igual que el montaje a cualquier ancho. El contenedor
     de consulta es .lb-wrap: su caja de contenido (sin el padding de
     22px) mide exactamente lo mismo que .lb-box. Cada linea con cqw lleva
     delante el mismo valor en px (calculado para 1076px de caja) como
     respaldo para navegadores sin container queries. */
  #secLlamibar{padding:38px 0 48px}
  #secLlamibar .lb-wrap{max-width:1120px; margin:0 auto; padding:0 22px; container-type:inline-size}
  /* Clics de los personajes escondidos. Dos problemas, misma causa:
     - p4 (el de la franja "¡Dale alegría a tu día!") asoma ~31px por debajo
       de la franja y cae justo sobre esta sección. Desde que p6 se ancla
       acá, cn() deja .lb-wrap como contexto de apilamiento posicionado, y
       al venir después en el DOM la sección pasa a pintarse por encima del
       wrapper de la franja: se comía el clic de p4 en celular y en
       cualquier ancho menor a ~1160px (arriba de eso p4 cae por fuera de
       .lb-wrap y por eso en escritorio ancho sí funcionaba).
     - p6 en celular queda entero dentro de la caja, sin costado por donde
       asomar, así que la cabecera del chorreado se comía su toque.
     En los dos casos el culpable es el mismo: una imagen o un contenedor
     capturan el puntero aunque sean completamente transparentes. Se apaga
     el puntero en todo el wrapper y se vuelve a encender solo donde hay
     algo que tocar (los botones "Agregar" viven dentro de .lb-bars, y
     .ph-peek es el propio personaje). */
  #secLlamibar .lb-wrap{pointer-events:none}
  #secLlamibar .lb-left, #secLlamibar .lb-bars, #secLlamibar .lb-seals, #secLlamibar .ph-peek{pointer-events:auto}
  #secLlamibar .lb-box{position:relative; overflow:hidden; background:var(--lb-bg,#4B3B32);
    border-radius:34px; border-radius:3.2cqw;
    display:grid; grid-template-columns:33.85% 1fr; grid-template-areas:"left bars" "seals bars";
    align-items:start}
  #secLlamibar .lb-head{display:none}
  #secLlamibar .lb-drip{position:absolute; left:0; top:0; width:100%; height:auto; display:block; pointer-events:none; z-index:1}
  #secLlamibar .lb-char{position:absolute; z-index:3; pointer-events:none; height:auto;
    left:8px; left:.7cqw; top:164px; top:15.27cqw; width:83px; width:7.67cqw}
  #secLlamibar .lb-left{grid-area:left; position:relative; z-index:2; min-width:0; color:#f6edde;
    display:flex; flex-direction:column; align-items:flex-start;
    padding:28px 0 0 59px; padding:2.64cqw 0 0 5.51cqw}
  #secLlamibar .lb-logo{display:block; height:auto; width:223px; width:20.7cqw}
  #secLlamibar .lb-sub{font-family:var(--font-body); font-weight:700; color:#f6edde; line-height:1.15;
    margin-top:11px; margin-top:1.03cqw; font-size:23px; font-size:2.2cqw}
  #secLlamibar .lb-cacao{display:block; height:auto;
    margin:131px 0 0 33px; margin:12.2cqw 0 0 3.08cqw; width:118px; width:11.01cqw}
  #secLlamibar .lb-seals{grid-area:seals; align-self:end; position:relative; z-index:2; display:flex; align-items:center;
    gap:14px; gap:1.32cqw; padding:18px 0 85px 66px; padding:1.7cqw 0 7.88cqw 6.17cqw}
  #secLlamibar .lb-seals img{display:block; height:auto; width:47px; width:4.33cqw}
  #secLlamibar .lb-bars{grid-area:bars; position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr);
    gap:22px; gap:2.06cqw; padding:80px 57px 67px 0; padding:7.4cqw 5.29cqw 6.24cqw 0}
  #secLlamibar .lb-bar{display:flex; flex-direction:column; align-items:center}
  #secLlamibar .lb-thumb{width:80%; aspect-ratio:321/683; display:block}
  #secLlamibar .lb-thumb img{width:100%; height:100%; object-fit:contain; object-position:bottom center; display:block;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,.32))}
  #secLlamibar .lb-name{width:100%; flex:1; text-align:center; color:#f6edde; font-family:var(--font-body); font-weight:700; line-height:1.25;
    margin-top:34px; margin-top:3.16cqw; font-size:13px; font-size:1.22cqw}
  #secLlamibar .lb-add{width:100%; background:#EDBE83; color:#FBF5EB; border:2px solid var(--ink); border-radius:999px; cursor:pointer;
    font-family:var(--font-body); font-weight:700; line-height:1.2;
    margin-top:13px; margin-top:1.25cqw; font-size:15px; font-size:1.4cqw; padding:8px 6px; padding:.75cqw .5cqw}
  #secLlamibar .lb-add:hover{background:#e3ab66}

  /* Celular: la seccion va a sangre. La cabecera es una sola imagen
     (personaje + chorreado con el fondo marron ya incrustado a partir del
     34.63% de su alto) y el logo va encima en absoluto. El degradado de
     .lb-box pone el marron desde esa misma altura (17.97cqw = 34.63% de
     51.9cqw, que es el alto de la imagen) hacia abajo. */
  @media (max-width:820px){
    #secLlamibar{padding:0; margin-top:-5.3%}
    /* El bloque va a sangre y arriba solo queda el papel por donde asoma
       el personaje. Ese aire contra la franja "¡Dale alegría a tu día!"
       se recorta un 30% subiendo la sección (margen negativo en % del
       ancho del viewport, para que escale con el alto de la cabecera).
       Y el aire contra el footer baja de 72px a 50px, solo acá abajo
       (no se toca el margen global de footer.site, que usan las 10 páginas). */
    #secLlamibar + footer.site{margin-top:50px}
    #secLlamibar .lb-wrap{max-width:none; padding:0}
    #secLlamibar .lb-box{grid-template-columns:1fr; grid-template-areas:"head" "left" "bars" "seals";
      border-radius:0; background:linear-gradient(to bottom,transparent 0 17.97cqw,var(--lb-bg,#4B3B32) 17.97cqw)}
    #secLlamibar .lb-head{grid-area:head; display:block; position:relative; z-index:1}
    #secLlamibar .lb-drip-m{display:block; width:100%; height:auto}
    #secLlamibar .lb-logo-m{position:absolute; left:50%; transform:translateX(-50%); top:38.1%; width:26.97cqw; height:auto; display:block}
    #secLlamibar .lb-drip{display:none}
    #secLlamibar .lb-char{display:none}
    #secLlamibar .lb-logo{display:none}
    #secLlamibar .lb-left{align-items:center; padding:0; margin-top:-9.84cqw}
    #secLlamibar .lb-cacao{order:1; margin:0; width:10.04cqw}
    #secLlamibar .lb-sub{order:2; text-align:center; margin-top:2.26cqw; font-size:max(11px,2.07cqw)}
    #secLlamibar .lb-bars{padding:0 6.2cqw; margin-top:3.74cqw; gap:3.15cqw}
    #secLlamibar .lb-name{margin-top:6.3cqw; font-size:max(9.5px,2.19cqw); line-height:1.15}
    #secLlamibar .lb-add{margin-top:1.87cqw; font-size:max(9.5px,2.19cqw); padding:.9cqw .3cqw; border-width:1.5px; min-height:26px}
    #secLlamibar .lb-seals{align-self:auto; justify-content:center; gap:1.97cqw; padding:4.2cqw 0 3.12cqw}
    #secLlamibar .lb-seals img{width:7.54cqw}
    /* Personaje oculto p6: en celular la caja va a sangre, asi que ya no
       hay costado por donde asomar. Se re-ancla arriba a la izquierda,
       justo en la linea donde arranca el marron del chorreado (17.97cqw
       desde el borde de arriba de la caja): asoma ~1/3 sobre la zona
       transparente (papel) y el resto queda tapado por el chocolate.
       Especificidad id+clase para ganarle a la regla de @media 640px. */
    #secLlamibar .ph-spot-p6{width:36px; height:36px; left:12px; top:17.97cqw; margin-top:-12px; transform:rotate(300deg)}
    #secLlamibar .ph-spot-p6.ph-revealed{transform:translateY(-34px) rotate(300deg)}
    #secLlamibar .ph-spot-p6.ph-gone{transform:translateY(-58px) rotate(300deg)}
  }

  /* "Agregar +" siempre dentro del cuadro del avatar (tarjeta y Editar perfil). */
  .pp-avatar.pp-avatar-empty,.pp-edit-avatar.pp-avatar-empty{font-size:10px; font-weight:800; font-family:var(--font-display); line-height:1.15; text-align:center; color:var(--ink-soft); padding:0 4px; box-sizing:border-box; overflow:hidden; white-space:normal; overflow-wrap:anywhere; hyphens:none; letter-spacing:0; cursor:pointer}
  #ppAvatar.pp-avatar-empty:hover,#ppAvatarM.pp-avatar-empty:hover{color:var(--accent); border-color:var(--accent)}
  /* Texto solo para buscadores y lectores de pantalla (H1 de la home) */
  .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* iPhone: Safari hace zoom al tocar un campo con letra menor a 16px. En pantallas tactiles
   los campos usan 16px para que no pase (sin bloquear el zoom con los dedos). */
@media (hover:none) and (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{font-size:16px !important}
}

/* Foco visible: solo al navegar con teclado (Tab), no con mouse ni dedo. */
:root{--focus-ring:var(--accent)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--focus-ring:#f3ece0} }
:root[data-theme="dark"]{--focus-ring:#f3ece0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible,label:focus-within>input[type=checkbox]:focus-visible{outline:3px solid var(--focus-ring) !important; outline-offset:2px !important}

/* Foto de categoria como <img> dentro del recuadro (viene directo en el HTML) */
.collection-card__thumb{position:relative; overflow:hidden}
.collection-card__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block}

  /* Precio con descuento: nuevo en rojo + etiqueta -N% */
  .precio-rebajado{color:#D0271D; font-weight:700}
  .precio-pct{display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px; background:#D0271D; color:#fff; font-size:.72em; font-weight:700; line-height:1.5; vertical-align:middle; white-space:nowrap}
  :root[data-theme="dark"] .precio-rebajado{color:#FF6B61}
  :root[data-theme="dark"] .precio-pct{background:#E0463B}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .precio-rebajado{color:#FF6B61} :root:not([data-theme="light"]) .precio-pct{background:#E0463B} }

/* Footer en celular: la columna "Unete a nuestra lista" ocupa todo el ancho y los iconos de redes bajan de linea. Antes la grilla 1fr 1fr crecia segun cuantos iconos de redes hubiera y el correo/boton se salian de la pantalla. */
@media (max-width:820px){ .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .foot-news{grid-column:1/-1} .foot-news p{max-width:none} }
.foot-news{min-width:0}
.foot-social{flex-wrap:wrap}

/* Celular: sin la columna "Secciones" del footer (ya están en el menú) */
@media (max-width:640px){ .foot-grid>.foot-col:first-child{display:none} }

/* Carrito (celular): "🎁 para.." se ve pequeño. El select real va invisible encima con 16px
   (asi el iPhone no hace zoom al tocarlo); lo que se ve es la etiqueta de 11px. */
.cart-gift-pick{position:relative; display:inline-flex; align-items:center; max-width:104px; font-size:11px; line-height:1.3; color:var(--ink); background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; padding:3px 18px 3px 6px; cursor:pointer}
.cart-gift-pick::after{content:""; position:absolute; right:7px; top:50%; width:4px; height:4px; border-right:1.2px solid currentColor; border-bottom:1.2px solid currentColor; transform:translateY(-70%) rotate(45deg); pointer-events:none}
.cart-gift-pick-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.cart-gift-pick .cart-gift-select{position:absolute; inset:0; width:100%; height:100%; max-width:none; margin:0; opacity:0; cursor:pointer; -webkit-appearance:none; appearance:none}
/* Envío y tiempo de entrega en una sola fila */
.cart-envio-row{gap:10px}
.cart-envio-row > span:first-child{min-width:0}
.cart-envio-tiempo{font-weight:600; opacity:.8}
.cart-envio-monto{white-space:nowrap; text-align:right}
/* "Tus datos": los campos nunca más anchos que el cuadro (sin barra horizontal en iPhone) */
.checkout-body{overflow-x:hidden}
.checkout-body .ck-field input, .checkout-body .ck-field select{width:100%; min-width:0; max-width:100%; box-sizing:border-box}
.checkout-body .ck-row > *{min-width:0}
/* Celular: las tarjetas de producto nunca ensanchan la grilla (en iPhone a veces la página
   quedaba más ancha que la pantalla y se podía mover de lado). */
.cat-grid > *, .cat-loading > *, .rail > .prod{min-width:0}
/* Menú del celular: luna + idioma arriba y el buscador en su propia fila, también en las páginas
   sin Kusi (juego ¿Qué miras?, postal). Kusi agrega su botón a esta misma fila. */
.mnav-utils{flex-wrap:wrap}
.mnav-utils .theme-toggle,.mnav-utils .theme-toggle-label,.mnav-utils .lang-sel{order:2}
.mnav-utils .search-box{order:3; flex:1 1 100% !important}