/* ============================================================
   FUNDAS · versión hueso (combina con el menú, el carrito y el boleto del checkout)
   Se carga después de fundas-modern.css. Para volver atrás: quita esta línea de fundas.html.
   Hueso frío #E7E6E1 · tinta #151515 · naranja #ff8346 · amarillo #F2C94C
   ============================================================ */
html body.fundas-body{--fr-bone:#E7E6E1;--fr-bone2:#DCDBD5;--fr-ink:#151515;--fr-mute:#5f5c55;--fr-orange:#ff8346;--fr-gold:#F2C94C;--fr-line:#D3D1CA;--fr-cut:#fff}

/* ---------- Cómo funciona: 3 pasos ---------- */
html body.fundas-body .fz-how{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:clamp(18px,2.4vw,28px) 0 0;padding:0}
html body.fundas-body .fz-how li{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:16px;background:var(--fr-bone)}
html body.fundas-body .fz-how b{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--fr-ink);color:#fff;font:700 13px/1 Raleway,Arial,sans-serif}
html body.fundas-body .fz-how span{display:grid;gap:2px;font:500 13.5px/1.4 Raleway,Arial,sans-serif;color:var(--fr-mute)}
html body.fundas-body .fz-how strong{font:800 16px/1.2 Raleway,Arial,sans-serif;color:var(--fr-ink);letter-spacing:-.01em}

/* ---------- Filtros como pastillas ---------- */
html body.fundas-body .fz-strip{gap:8px;border-bottom:0;padding-bottom:2px}
html body.fundas-body .fz-sb{padding:9px 15px;border-radius:999px;background:var(--fr-bone);font:700 13px/1 Raleway,Arial,sans-serif;margin:0;box-shadow:none}
html body.fundas-body .fz-sb[aria-pressed="true"]{background:var(--fr-ink);color:#fff;padding:9px 15px;margin:0}
html body.fundas-body .fz-sb:not([aria-pressed="true"]):hover{box-shadow:none;background:var(--fr-bone2)}
html body.fundas-body .fz-sb small{font:600 11px/1 Raleway,Arial,sans-serif;color:var(--fr-mute)}
html body.fundas-body .fz-sb[aria-pressed="true"] small{color:#c9c6bd}
html body.fundas-body .fz-sb:focus-visible{outline:2px solid var(--fr-ink);outline-offset:2px}
html body.fundas-body .fz-tools{padding:14px 0 18px}
html body.fundas-body .fz-find{border:1.5px solid var(--fr-line);border-radius:999px;padding:0 16px;background:#fff;max-width:360px}
html body.fundas-body .fz-find input{min-height:42px}
html body.fundas-body .fz-count{display:none}

/* ---------- Tarjetas de diseño: sin barra negra ---------- */
html body.fundas-body #fzGrid .fz-pcard .product-photo{background:var(--fr-bone)!important;border-radius:18px!important}
html body.fundas-body #fzGrid .fz-pcard .card-info{margin-top:12px}
html body.fundas-body #fzGrid .fz-pcard .card-info h3{font:800 16px/1.2 Raleway,Arial,sans-serif;letter-spacing:-.02em}
html body.fundas-body #fzGrid .fz-pcard .card-info p{font:500 12.5px/1.3 Raleway,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:var(--fr-mute)!important;opacity:1!important}
html body.fundas-body #fzGrid .fz-pcard .card-info b{font:800 15px Raleway,Arial,sans-serif!important}
html body.fundas-body #fzGrid .fz-go{display:inline-flex!important;width:auto!important;align-self:flex-start!important;max-width:max-content!important;justify-content:flex-start!important;align-items:center;gap:8px;margin-top:10px;padding:9px 16px;border:1.5px solid var(--fr-ink);border-radius:999px;background:transparent;color:var(--fr-ink);font:700 13px/1 Raleway,Arial,sans-serif;letter-spacing:0;text-transform:none;transition:background .15s,color .15s,border-color .15s}
html body.fundas-body #fzGrid .fz-pcard .card-open:hover .fz-go,html body.fundas-body #fzGrid .fz-pcard .card-open:focus-visible .fz-go{background:var(--fr-orange);border-color:var(--fr-orange);color:var(--fr-ink)}
html body.fundas-body #fzGrid .fz-pcard .card-open:focus-visible{outline:2px solid var(--fr-ink);outline-offset:4px;border-radius:18px}

/* ---------- Crea tu propia funda: en hueso, una sola fila ---------- */
html body.fundas-body .fz-tile{grid-row:span 1;border-radius:22px;overflow:hidden;background:var(--fr-bone);color:var(--fr-ink)}
html body.fundas-body .fz-tile-ph{background:var(--fr-bone2)}
html body.fundas-body .fz-tile-ph svg{filter:drop-shadow(0 16px 20px rgba(0,0,0,.18));width:min(100%,190px)}
html body.fundas-body .fz-tile h3{color:var(--fr-ink)}
html body.fundas-body .fz-tile p{color:var(--fr-mute)}
html body.fundas-body .fz-tile-tag{border-radius:4px}
html body.fundas-body .fz-tb{border-radius:999px;padding:14px 20px;font:700 14px/1 Raleway,Arial,sans-serif;letter-spacing:0;text-transform:none}
html body.fundas-body .fz-tb-alt{background:#fff;border:1.5px solid var(--fr-ink)}
html body.fundas-body .fz-tb-alt:hover{background:var(--fr-ink);color:#fff}
html body.fundas-body .fz-tb:focus-visible{outline:2px solid var(--fr-ink);outline-offset:3px}
html body.fundas-body .fz-tile .fz-tile-ft{font:500 12.5px/1.4 Raleway,Arial,sans-serif;color:var(--fr-mute);letter-spacing:0}

/* ---------- Combos como boletos ---------- */
html body.fundas-body .fz-combos{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border-top:0;margin-top:6px}
html body.fundas-body .fz-combo{position:relative;display:flex;flex-direction:column;padding:0 20px 20px;border:0;border-radius:20px;background:var(--fr-bone);color:var(--fr-ink);text-decoration:none;transition:transform .18s}
html body.fundas-body .fz-combo:first-child{padding-left:20px}
html body.fundas-body .fz-combo:hover{transform:translateY(-3px)}
html body.fundas-body .fz-combo:focus-visible{outline:3px solid var(--fr-ink);outline-offset:3px}
html body.fundas-body .fz-combo .fz-pic{order:-1;position:relative;display:flex;justify-content:center;align-items:flex-end;height:150px;margin:0 -20px 18px;padding:18px 10px 16px;background:transparent;border-bottom:2px dashed #aaa69b;overflow:visible}
html body.fundas-body .fz-combo:hover .fz-pic{background:transparent}
html body.fundas-body .fz-combo .fz-pic::before,html body.fundas-body .fz-combo .fz-pic::after{content:'';position:absolute;bottom:-14px;width:26px;height:26px;border-radius:50%;background:var(--fr-cut)}
html body.fundas-body .fz-combo .fz-pic::before{left:-13px}
html body.fundas-body .fz-combo .fz-pic::after{right:-13px}
html body.fundas-body .fz-combo .fz-pic svg{height:100px;margin-left:-8px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2))}
html body.fundas-body .fz-combo .fz-pic svg:nth-child(odd){transform:rotate(-6deg)}
html body.fundas-body .fz-combo .fz-pic svg:nth-child(even){transform:rotate(5deg) translateY(-4px)}
html body.fundas-body .fz-combo .fz-mono{font:700 13px/1.2 Raleway,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--fr-mute)}
html body.fundas-body .fz-combo h3{margin:4px 0 6px;font-size:clamp(26px,2.4vw,34px)}
html body.fundas-body .fz-combo:hover h3{color:var(--fr-ink)}
html body.fundas-body .fz-combo .fz-cp{font:800 clamp(30px,2.8vw,40px)/1 Raleway,Arial,sans-serif;letter-spacing:-.04em}
html body.fundas-body .fz-combo .fz-cs{margin-top:10px;font:500 13px/1.45 Raleway,Arial,sans-serif;color:var(--fr-mute)}
html body.fundas-body .fz-combo .fz-cs b{color:#c4521b;font-weight:800}
html body.fundas-body .fz-combo .fz-tag{align-self:flex-start;margin-top:auto;padding:7px 12px;border-radius:999px;background:#fff;color:#1d6b3a;font:700 12px/1 Raleway,Arial,sans-serif;letter-spacing:0;text-transform:none;transform:translateY(8px)}
html body.fundas-body .fz-combo:last-child::after{content:'La que más ahorra';position:absolute;top:12px;right:12px;padding:6px 10px;border-radius:4px;background:var(--fr-gold);color:var(--fr-ink);font:800 12px/1 Raleway,Arial,sans-serif;transform:rotate(3deg);box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
html body.fundas-body .fz-fine{margin-top:20px}

/* ---------- Personalizador ---------- */
html body.fundas-body .fz-veil{background:rgba(21,21,21,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html body.fundas-body .fz-studio{border-radius:22px;background:#fff}
html body.fundas-body .fz-left{background:var(--fr-bone);border-right:0;color:var(--fr-ink)}
html body.fundas-body .fz-ttl{background:transparent;border:0;color:var(--fr-ink)}
html body.fundas-body .fz-ttl h3{color:var(--fr-ink)}
html body.fundas-body .fz-ttl .fz-mono{color:#c4521b}
html body.fundas-body .fz-studio .fz-view{background:transparent}
html body.fundas-body .fz-studio .fz-ctl{background:#fff}
html body.fundas-body .fz-x{border-radius:50%;border:1.5px solid #15151540;width:38px;height:38px;font-size:20px}
html body.fundas-body .fz-x:hover{background:var(--fr-ink);color:#fff}
html body.fundas-body .fz-btn{border-radius:999px;padding:15px 22px;border-color:var(--fr-orange);background:var(--fr-orange);color:var(--fr-ink);font:800 14px/1 Raleway,Arial,sans-serif;letter-spacing:0;text-transform:none}
html body.fundas-body .fz-btn:hover{background:#ff6a4f;border-color:#ff6a4f;color:var(--fr-ink)}
html body.fundas-body .fz-btn.fz-ghost{background:#fff;border-color:var(--fr-ink);color:var(--fr-ink)}
html body.fundas-body .fz-back{border-radius:999px}
html body.fundas-body .fz-mode{border-radius:16px!important;padding:16px 18px!important}
html body.fundas-body .fz-chip{border-radius:999px}
html body.fundas-body .fz-veil select,html body.fundas-body .fz-veil input[type=text]{border-radius:12px;border:1.5px solid var(--fr-line)}
html body.fundas-body .fz-veil select:focus,html body.fundas-body .fz-veil input[type=text]:focus{outline:0;border-color:var(--fr-ink);box-shadow:0 0 0 3px #ff834633}
html body.fundas-body .fz-drop{border-radius:16px}
html body.fundas-body .fz-buy{border-top:1px solid var(--fr-line)}

/* ---------- Celular y tableta ---------- */
@media (max-width:1000px){
  html body.fundas-body .fz-combos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  html body.fundas-body .fz-how{grid-template-columns:1fr;gap:8px}
  html body.fundas-body .fz-how li{padding:10px 12px;gap:10px;align-items:center}
  html body.fundas-body .fz-how b{width:26px;height:26px;font-size:12px}
  html body.fundas-body .fz-how strong{font-size:14.5px}
  html body.fundas-body .fz-how span{font-size:12.5px}
  html body.fundas-body .fz-strip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--fm-g,16px) * -1);padding-inline:var(--fm-g,16px)}
  html body.fundas-body .fz-strip::-webkit-scrollbar{display:none}
  html body.fundas-body .fz-sb{flex:none}
  html body.fundas-body .fz-tile{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  html body.fundas-body .fz-tile-ph{padding:16px 6px}
  html body.fundas-body .fz-tile-ph svg{width:110px}
  html body.fundas-body .fz-tile-tx{padding:18px 16px 18px 6px;gap:10px}
  html body.fundas-body .fz-tile h3{font-size:30px}
  html body.fundas-body .fz-tile p{font-size:13px}
  html body.fundas-body .fz-tb{padding:12px 14px;font-size:13px}
  html body.fundas-body #fzGrid .fz-go{padding:8px 12px;font-size:12.5px}
  html body.fundas-body .fz-combos{grid-template-columns:1fr;gap:14px}
  html body.fundas-body .fz-combo{display:grid;grid-template-columns:auto 1fr;column-gap:4px}
  html body.fundas-body .fz-combo .fz-pic{grid-column:1/-1}
  html body.fundas-body .fz-combo>*:not(.fz-pic){grid-column:1/-1}
  html body.fundas-body .fz-studio{border-radius:0}
  html body.fundas-body .fz-veil.fz-on{padding:0}
  html body.fundas-body .fz-studio{display:flex;flex-direction:column;min-height:100%;max-height:100%}
  html body.fundas-body .fz-left{flex:1 0 auto;display:flex;flex-direction:column}
  html body.fundas-body .fz-studio .fz-view{flex:1 0 auto;min-height:230px;margin:8px 16px 12px;padding:10px}
  html body.fundas-body .fz-studio .fz-view svg{height:min(40vh,340px);max-height:100%}
}
@media (prefers-reduced-motion:reduce){html body.fundas-body .fz-combo,html body.fundas-body .fz-go{transition:none}html body.fundas-body .fz-combo:hover{transform:none}}
/* Con el personalizador abierto se esconde el aviso flotante de "Tienes un sobre" (tapaba el botón de agregar) */
html body.fundas-body:has(.fz-veil.fz-on) .ws-chip{display:none}

/* ============================================================
   Personalizador, paso por paso: mismo naranja de la tienda, sin letra de máquina, título del paso grande
   y en celular la funda siempre completa arriba.
   ============================================================ */
html body.fundas-body .fz-veil{--accent:#ff8346;--line:#D3D1CA;--muted:#5f5c55}
html body.fundas-body .fz-ttl .fz-mono{font:800 12px/1 Raleway,Arial,sans-serif;letter-spacing:.02em;text-transform:none;color:#c4521b}
/* Título del paso */
html body.fundas-body .fz-ctl .fz-top{align-items:flex-start;padding-bottom:4px}
html body.fundas-body .fz-prog{display:grid;gap:10px;min-width:0}
html body.fundas-body .fz-stepno{display:grid;gap:2px;font:inherit;letter-spacing:0;text-transform:none;color:var(--fr-ink)}
html body.fundas-body .fz-stepno small{font:700 12.5px/1.2 Raleway,Arial,sans-serif;color:var(--fr-mute)}
html body.fundas-body .fz-stepno b{font:800 22px/1.15 Raleway,Arial,sans-serif;letter-spacing:-.02em}
html body.fundas-body .fz-dots{display:flex;gap:6px}
html body.fundas-body .fz-dots i{width:34px;height:6px;border-radius:999px;background:var(--fr-line)}
html body.fundas-body .fz-dots i.on{background:var(--fr-orange)}
/* Etiquetas de cada grupo */
html body.fundas-body .fz-grp>.fz-lab,html body.fundas-body .fz-grp>label.fz-lab{font:800 14px/1.2 Raleway,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--fr-ink)}
html body.fundas-body .fz-veil .fz-hint{font:500 12.5px/1.45 Raleway,Arial,sans-serif;color:var(--fr-mute)}
/* Opciones (tipo de funda y material): seleccionada = contorno tinta y fondo hueso */
html body.fundas-body .fz-chip.fz-mode,html body.fundas-body .fz-chip.fz-mat{border:1.5px solid var(--fr-line)!important;background:#fff!important;color:var(--fr-ink)!important;box-shadow:none!important;border-radius:16px!important}
html body.fundas-body .fz-chip.fz-mode:hover,html body.fundas-body .fz-chip.fz-mat:hover{border-color:var(--fr-ink)!important}
html body.fundas-body .fz-chip.fz-mode[aria-pressed="true"],html body.fundas-body .fz-chip.fz-mat[aria-pressed="true"]{border:2px solid var(--fr-ink)!important;background:var(--fr-bone)!important;color:var(--fr-ink)!important}
html body.fundas-body .fz-chip.fz-mode small,html body.fundas-body .fz-chip.fz-mat small,html body.fundas-body .fz-chip[aria-pressed="true"] small{color:var(--fr-mute)!important}
html body.fundas-body .fz-mode b{font:800 16px/1.2 Raleway,Arial,sans-serif}
html body.fundas-body .fz-badge{display:inline-block;justify-self:start;padding:4px 8px;border-radius:4px;background:var(--fr-gold)!important;color:var(--fr-ink)!important;font:800 11.5px/1 Raleway,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;font-style:normal}
html body.fundas-body .fz-mat em{font:800 12.5px/1 Raleway,Arial,sans-serif!important;color:var(--fr-ink)!important}
html body.fundas-body .fz-chip.fz-mat[aria-pressed="true"] em{color:#1d6b3a!important}
/* Colores */
html body.fundas-body .fz-sw{gap:10px}
html body.fundas-body .fz-sw button{border:2px solid #15151526}
html body.fundas-body .fz-sw button[aria-pressed="true"]{outline:3px solid var(--fr-ink);outline-offset:3px;box-shadow:none}
html body.fundas-body .fz-swname{font:600 12.5px Raleway,Arial,sans-serif;color:var(--fr-mute)}
/* Campos */
html body.fundas-body .fz-veil input[type=text]{min-height:48px;font:800 16px Raleway,Arial,sans-serif;letter-spacing:.06em}
html body.fundas-body .fz-veil input.fz-search{font:500 14px Raleway,Arial,sans-serif;letter-spacing:0;text-transform:none}
html body.fundas-body .fz-veil select{min-height:46px;font:600 15px Raleway,Arial,sans-serif}
html body.fundas-body .fz-veil input[type=checkbox]{accent-color:var(--fr-ink);width:18px;height:18px}
html body.fundas-body .fz-tog{font:600 14px Raleway,Arial,sans-serif;color:var(--fr-ink)}
/* Tu imagen */
html body.fundas-body .fz-drop{border:2px dashed var(--fr-orange);background:#fff8f3}
html body.fundas-body .fz-fileok{border:1.5px solid var(--fr-line);border-radius:14px;background:#fff}
html body.fundas-body .fz-fileok img{border-radius:8px}
html body.fundas-body .fz-change{border:1.5px solid var(--fr-ink)!important;border-radius:999px!important;padding:8px 14px!important;font:700 13px/1 Raleway,Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important;background:#fff!important;color:var(--fr-ink)!important;cursor:pointer}
html body.fundas-body #fzImgMsg{color:#b4501f}
html body.fundas-body #fzZoom{accent-color:var(--fr-orange);width:100%}
html body.fundas-body .fz-rights{font:500 12.5px/1.45 Raleway,Arial,sans-serif;color:var(--fr-mute)}
/* Paso 4: revisa */
html body.fundas-body .fz-sum dt{font:500 14px Raleway,Arial,sans-serif;color:var(--fr-mute)}
html body.fundas-body .fz-sum dd{font:800 14.5px Raleway,Arial,sans-serif;color:var(--fr-ink)}
html body.fundas-body .fz-review .fz-facts{display:grid;gap:8px;margin:14px 0;padding:14px 16px;border-radius:14px;background:var(--fr-bone);list-style:none}
html body.fundas-body .fz-review .fz-facts li{font:600 13.5px/1.35 Raleway,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--fr-ink);padding-left:22px;position:relative}
html body.fundas-body .fz-review .fz-facts li::before{content:'✓';position:absolute;left:0;top:0;color:#1d6b3a;font-weight:800}
html body.fundas-body .fz-pol{font:500 12.5px/1.45 Raleway,Arial,sans-serif;color:var(--fr-mute)}
/* Barra de abajo y listo */
html body.fundas-body .fz-buy{background:#fff}
html body.fundas-body .fz-back{border:0;background:none;font:700 14px Raleway,Arial,sans-serif;color:var(--fr-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html body.fundas-body .fz-err{border-radius:12px;font:600 13.5px/1.4 Raleway,Arial,sans-serif}
html body.fundas-body .fz-done{border-radius:16px;background:var(--fr-bone);padding:16px}
html body.fundas-body .fz-done b{font:800 17px/1.2 Raleway,Arial,sans-serif}
/* Celular: la funda siempre completa (no se corta en los pasos largos) */
@media (max-width:760px){
  html body.fundas-body .fz-left{flex:0 0 auto}
  html body.fundas-body .fz-ttl{padding:14px 16px 0}
  html body.fundas-body .fz-ttl h3{font-size:26px}
  html body.fundas-body .fz-studio .fz-view{flex:0 0 auto;height:min(34vh,290px);min-height:0;margin:6px 16px 10px;padding:6px}
  html body.fundas-body .fz-studio .fz-view svg{height:100%;max-height:none}
  html body.fundas-body .fz-studio .fz-ctl{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  html body.fundas-body .fz-stepno b{font-size:20px}
  html body.fundas-body .fz-studio .fz-ctl{padding-bottom:0}
  html body.fundas-body .fz-buy{position:sticky;bottom:0;z-index:3;margin-top:auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -1px 0 var(--fr-line)}
}

/* El cursor encima solo resalta un poco; la opción elegida se distingue por el circulito y el borde grueso. */
html body.fundas-body .fz-chip.fz-mat:not([aria-pressed="true"]):hover{border-color:var(--fr-line)!important;background:#faf9f6!important}
html body.fundas-body .fz-mat .fz-rd{border-color:#8a877e}
html body.fundas-body .fz-chip.fz-mat[aria-pressed="true"] .fz-rd{border-color:var(--fr-ink)}
html body.fundas-body .fz-chip.fz-mat[aria-pressed="true"] em{color:var(--fr-ink)!important}