@font-face{font-family:'Duddy Black';src:url('fonts/DuddyBlack.woff2') format('woff2'),url('fonts/DuddyBlack.woff') format('woff'),url('fonts/DuddyBlack.otf') 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:#baae9c; --paper-raised:#5e4826; --ink:#f3ece0; --ink-soft:#bcae9b;
      --line:#725730; --line-strong:#84673b;
      --btn-gray:#8a8175; --btn-gray-deep:#6f675c;
    }
  }
  :root[data-theme="dark"]{
    --paper:#baae9c; --paper-raised:#5e4826; --ink:#f3ece0; --ink-soft:#bcae9b;
    --line:#725730; --line-strong:#84673b;
    --btn-gray:#8a8175; --btn-gray-deep:#6f675c;
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased}
  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{border-bottom:3px solid var(--ink); background:var(--paper); position:relative; z-index:30}
  .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:22px; height:26px; -webkit-mask-image:url('icon-pasaporte.png'); mask-image:url('icon-pasaporte.png')}
  .hicon-maleta{width:26px; height:30px; -webkit-mask-image:url('icon-maleta.png'); mask-image:url('icon-maleta.png')}
  .hicon-pasaporte--auth{width:39px; height:70px; background-color:var(--accent); margin:0 auto}
  .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}
  .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:44px; display:block}

  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-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{
    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-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{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}

  /* ================= PROMO PILL ================= */
  .promo-strip{
    max-width:1140px; margin:52px auto 0; display:flex; align-items:center; justify-content:center; gap:18px;
    flex-wrap:wrap; background:var(--pastel-blue); border:2px solid var(--ink); border-radius:999px;
    padding:16px 32px; box-shadow:var(--shadow);
  }
  .promo-strip .msg{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); display:flex; align-items:center; gap:10px; text-align:center}
  .promo-strip .msg .ic{font-size:20px}
  .promo-strip .sep{width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.4}
  @media (max-width:640px){ .promo-strip{border-radius:22px; padding:18px 20px} }

  /* ================= 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%; max-width:100%; border-radius:20px; margin-bottom:28px; display:block; object-fit:cover; max-height:360px}
  .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; text-transform:uppercase; letter-spacing:-.01em}
  .section-head-center p{color:var(--ink-soft); font-size:15px; margin:0}
  .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}
  .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(--btn-gray); color:#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(--btn-gray-deep)}
  .prod h4{margin:11px 0 3px; font-family:var(--font-display); font-size:14px; font-weight:700; text-wrap:balance}
  .prod .meta{font-size:11.5px; color:var(--ink-soft); margin:0 0 6px}
  .prod .price{font-family:var(--font-mono); font-weight:600; font-size:14.5px}
  .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)}
  .dots span:first-child{background:var(--accent)}
  .wave-img{display:block; width:220px; height:auto; margin:4px auto 30px}
  .section-divider-img{width:100%; height:56px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2086%2062%22%3E%3Cpath%20d%3D%22M0%2C40%20A43%2C43%200%200%201%2086%2C40%20L86%2C62%20L0%2C62%20Z%22%20fill%3D%22%23AEDCDA%22%20stroke%3D%22%231D1712%22%20stroke-width%3D%224%22/%3E%3C/svg%3E"); background-repeat:repeat-x; background-position:center bottom; background-size:78px 56px}
  .banded-section{background:var(--pastel-blue); padding:44px 0 56px; margin-top:0}
  .banded-section .section-head-center{padding:0 28px}
  .banded-section .section-head-center h2{color:#2A4A36}
  .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}
  .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}

  @media (max-width:700px){
    .rail{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; overflow:visible}
    .prod{flex:auto; width:100%}
    .dots{display:none}
  }

  /* ================= COMPRAR POR PERSONAJE ================= */
  .char-rail{display:flex; gap:22px; overflow-x:auto; padding:8px 4px 16px; scrollbar-width:none}
  .char-rail::-webkit-scrollbar{display:none}
  .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}

  /* ================= 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(--pastel-yellow); -webkit-text-stroke:2px 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}
  @media (max-width:600px){ .news-form input{flex-basis:100%} .news-form button{flex:1 1 100%} }
  .news-msg{font-size:12px; margin:-10px 0 18px}
  .foot-social{display:flex; gap:10px}
  .foot-social a{width:36px; height:36px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); color:var(--ink); 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-logo{height:28px; display:block}

  /* ================= 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}
  /* ===== 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)}
  .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:space-between; padding:18px 22px; 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{background:none; border:none; font-size:19px; cursor:pointer; color:var(--ink); width:32px; height:32px; border-radius:50%; position:relative; top:7px}
  .cart-close:hover{background:var(--paper-raised)}
  .cart-gift-btn{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; position:relative; top:7px}
  .cart-gift-btn:hover{background:var(--paper-raised)}
  .cart-shipping{padding:8px 22px; 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)}
  .cart-shipping .bar{position:relative; height:8px; border-radius:999px; background:var(--line); overflow:visible}
  .cart-shipping .bar .fill{display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .3s}
  .cart-shipping .bar .goal-dot{position:absolute; top:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--paper); border:2px solid var(--ink); transform:translateY(-50%); z-index:2}
  .cart-shipping .bar .goal-dot.reached{background:var(--accent)}
  .cart-shipping .goal-labels{position:relative; height:13px; margin-top:5px}
  .cart-shipping .goal-label{position:absolute; top:0; transform:translateX(-50%); font-size:10px; font-weight:700; color:var(--ink-soft); white-space:nowrap}
  .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:14px 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)}
  .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-right{display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between}
  .cart-line-right .price{font-family:var(--font-mono); font-weight:700; font-size:13px; white-space:nowrap}
  .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-cross{padding:0 22px}
  .cart-cross h5{margin:16px 0 10px; 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}
  .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)}
  .cart-foot{border-top:2px solid var(--ink); padding:16px 22px 10px; background:var(--paper-raised); flex:0 0 auto; margin-top:auto}
  .cart-promo{display:flex; gap:8px; margin-bottom:14px}
  .cart-promo input{flex:1; min-width:0; border:2px solid var(--ink); border-radius:999px; padding:9px 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:9px 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:12px}
  .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; overflow-y:auto}
  .checkout-back{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:18px 22px 22px; display:flex; flex-direction:column; gap:14px}
  .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-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}
  .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; font-weight:700}
  .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(--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}
  .qv-addbag:hover{background:var(--accent-deep)}
  .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} }

  /* ================= 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'); 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}
  #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:var(--paper-raised); border:2px solid var(--line); 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.completado .pp-sello-badge-inner{border-color:var(--accent)}
  .pp-sello-cell.reclamado .pp-sello-badge-inner{border-color:#2E8B57}
  .pp-sello-cell.pendiente .pp-sello-badge-inner{opacity:.5; filter:grayscale(85%)}
  .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))}}

  .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'); 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-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)}

  /* Barra de progreso de envio (diseno "avion en ruta") - usada por core.js (carrito), agregada aqui para que funcione en todas las paginas, no solo index.html */
  .ship-route{position:relative; width:100%; margin:0 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:column; align-items:center; gap:0; text-align:center; pointer-events:none; width:96px}
  .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}

  /* Etiquetas "Unidad 1/2/3.." del selector de regalo por unidad en el carrito - usado por core.js, agregado aqui para que funcione en todas las paginas */
  .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}

  /* Skeleton de carga de secciones ("wc-skel", cubre toda la seccion mientras llega la config visual), riel de resenas (rev-*), resaltado de beneficio y estado tactil del boton de WhatsApp - todo esto lo usa core.js mas alla de index.html, se agrega aqui para que funcione en cualquier pagina */
  @keyframes heroSkelShine{0%{background-position:0% 0}100%{background-position:-200% 0}}
  .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; pointer-events:none; transition:opacity .25s ease}
  .wc-skel.is-out{opacity:0}
  .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}
  .benef-title .benef-hl{color:#fff; text-shadow:0 2px 0 rgba(29,23,18,.15)}
  .wa-float.is-touched{right:10px}