/* ============================================================
   METRO COLCHONES — Estilos de páginas
   ============================================================ */

/* Hero responsive */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr !important;}
  .hero-grid > div:last-child{display:none;}
}

/* Paginación */
.pager{display:flex;gap:6px;justify-content:center;margin-top:32px;flex-wrap:wrap;}
.pg{min-width:38px;height:38px;padding:0 10px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:14px;border:1px solid var(--line-strong);color:var(--ink-soft);}
.pg:hover{border-color:var(--navy);color:var(--navy);}
.pg.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.pg-dots{display:grid;place-items:center;min-width:24px;color:var(--muted);}

/* Favoritos */
.fav-btn{border:none;cursor:pointer;transition:transform .12s ease, color .15s ease;}
.fav-btn:hover{transform:scale(1.08);color:#e0245e;}
.fav-btn.on{color:#e0245e;}
.fav-btn.on svg{fill:currentColor;}

/* Autocompletar buscador */
.ac-box{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);z-index:65;overflow:hidden;}
.ac-item{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);}
.ac-item:last-child{border-bottom:0;}
.ac-item:hover{background:var(--mist);}
.ac-item img{width:42px;height:42px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--mist-2);}
.ac-thumb-ph{width:42px;height:42px;border-radius:8px;flex-shrink:0;background:var(--mist-2);}

/* Product card */
.product-card{transition:transform .18s ease, box-shadow .18s ease;}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}

/* Product grids */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.prod-grid-plp{grid-template-columns:repeat(3,1fr);}
@media (max-width:1100px){.prod-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.prod-grid,.prod-grid-plp{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media (max-width:440px){.prod-grid,.prod-grid-plp{grid-template-columns:1fr 1fr;gap:10px;}}

/* Category grid (home) */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:18px;}
.cat-card{
  position:relative;overflow:hidden;border-radius:var(--radius);text-align:left;
  border:1px solid var(--line);background:#fff;transition:transform .2s, box-shadow .2s;display:flex;flex-direction:column;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.cat-card .ph{flex:1;}
.cat-card-body{padding:16px 18px;display:flex;flex-direction:column;gap:2px;}
.cat-card-cta{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:800;font-size:13.5px;margin-top:8px;}
.cat-card-feat{grid-column:span 2;grid-row:span 2;}
.cat-card-feat .cat-card-body{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(8,31,68,.9));color:#fff;padding:24px;}
.cat-card-feat .cat-card-cta{color:var(--sky);}
@media (max-width:900px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .cat-card-feat{grid-column:span 2;grid-row:span 1;}
}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr 1fr;}.cat-card-feat{grid-column:span 2;}}

/* Finance banner */
.fin-banner{border-radius:var(--radius-lg);padding:48px;display:flex;justify-content:space-between;gap:40px;align-items:center;flex-wrap:wrap;}
.fin-stats{display:flex;gap:30px;position:relative;z-index:1;flex-wrap:wrap;}
.fin-stat{text-align:center;}
@media (max-width:760px){.fin-banner{padding:32px;}}

/* Quiz CTA (home) */
.quiz-cta{background:var(--mist);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;display:flex;gap:36px;align-items:center;}
.quiz-cta-art{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex-shrink:0;}
.quiz-bubble{width:84px;height:84px;border-radius:22px;display:grid;place-items:center;box-shadow:var(--shadow-sm);}
@media (max-width:760px){.quiz-cta{flex-direction:column;padding:28px;}.quiz-cta-art{display:none;}}

/* Reviews */
.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:980px){.review-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:540px){.review-grid{grid-template-columns:1fr;}}

/* Catalog layout */
.catalog-layout{display:grid;grid-template-columns:264px 1fr;gap:32px;align-items:start;}
.filters{display:flex;flex-direction:column;gap:22px;position:sticky;top:100px;}
.filter-block{padding-bottom:20px;border-bottom:1px solid var(--line);}
.filter-h{font-weight:800;font-size:14px;margin-bottom:12px;color:var(--ink);}
.filter-radio{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink-soft);transition:background .12s;}
.filter-radio:hover{background:var(--mist);}
.filter-radio.on{background:var(--navy);color:#fff;}
.filter-check{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.filter-check input{position:absolute;opacity:0;}
.filter-check .cbox{width:20px;height:20px;border:2px solid var(--line-strong);border-radius:6px;display:grid;place-items:center;color:transparent;transition:all .12s;flex-shrink:0;}
.filter-check input:checked + .cbox{background:var(--navy);border-color:var(--navy);color:#fff;}
.range{width:100%;accent-color:var(--navy);margin-bottom:8px;}
@media (max-width:860px){
  .catalog-layout{grid-template-columns:1fr;}
  .filters-desktop{display:none;}
  .filters-mobile-btn{display:inline-flex !important;}
}
@keyframes slideInLeft{from{transform:translateX(-100%);}to{transform:none;}}

/* PDP */
.pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;}
.pdp-gallery{display:flex;gap:14px;}
.pdp-thumbs{display:flex;flex-direction:column;gap:10px;width:74px;flex-shrink:0;}
.pdp-thumb{border-radius:10px;overflow:hidden;border:2px solid var(--line);transition:border .15s;}
.pdp-thumb.on{border-color:var(--navy);}
.firm-bar{height:8px;background:var(--mist-2);border-radius:999px;overflow:hidden;}
.firm-fill{height:100%;background:linear-gradient(90deg,var(--sky),var(--navy));border-radius:999px;}
.size-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.size-btn{padding:9px 16px;border:1.5px solid var(--line-strong);border-radius:10px;font-weight:700;font-size:14px;color:var(--ink-soft);transition:all .12s;}
.size-btn:hover{border-color:var(--navy);}
.size-btn.on{background:var(--navy);color:#fff;border-color:var(--navy);}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:10px;overflow:hidden;}
.qty button{width:46px;height:50px;font-size:20px;font-weight:700;color:var(--navy);transition:background .12s;}
.qty button:hover{background:var(--mist);}
.qty span{min-width:40px;text-align:center;font-weight:800;}
.qty-sm button{width:32px;height:32px;font-size:16px;}
.qty-sm span{min-width:28px;font-size:14px;}
.pdp-assure{margin-top:24px;border-top:1px solid var(--line);padding-top:8px;}
@media (max-width:860px){
  .pdp-grid{grid-template-columns:minmax(0,1fr);gap:28px;}
  .pdp-grid > *{min-width:0;}
  .pdp-gallery{flex-direction:column-reverse;min-width:0;}
  .pdp-info{min-width:0;}
  .pdp-thumbs{flex-direction:row;width:auto;flex-wrap:wrap;}
  .pdp-thumb{width:64px;}
  /* Evita que la imagen principal ocupe toda la pantalla en móvil/tablet */
  .pdp-gallery > div:last-child{max-width:430px;width:100%;margin:0 auto;}
}

/* Tabs */
.tab-bar{display:flex;gap:4px;border-bottom:2px solid var(--line);overflow-x:auto;}
.tab-btn{padding:14px 20px;font-weight:800;font-size:15px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:color .15s,border-color .15s;}
.tab-btn.on{color:var(--navy);border-bottom-color:var(--navy);}
.tab-body{padding:28px 0;}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.spec-table{width:100%;border-collapse:collapse;max-width:640px;}
.spec-table td{padding:13px 16px;font-size:14.5px;border-bottom:1px solid var(--line);}
.spec-table td:first-child{font-weight:700;color:var(--ink-soft);width:42%;}
.spec-table tr:nth-child(odd){background:var(--mist);}
.review-summary{display:flex;gap:36px;align-items:center;flex-wrap:wrap;background:var(--mist);padding:28px;border-radius:var(--radius);}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}

/* Cart drawer */
.cart-line{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);position:relative;}
.cart-remove{position:absolute;top:14px;right:0;color:var(--muted);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;transition:all .12s;}
.cart-remove:hover{background:var(--mist-2);color:var(--ink);}

/* Checkout */
.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;margin-top:20px;}
.steps{display:flex;gap:8px;}
.step{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:var(--mist);font-weight:700;font-size:14px;color:var(--muted);flex:1;}
.step.on{background:var(--navy);color:#fff;}
.step-num{width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:13px;flex-shrink:0;}
.step:not(.on) .step-num{background:var(--line-strong);color:#fff;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ship-opt{display:flex;align-items:center;gap:12px;padding:16px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--mist);}
.pay-opt{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;transition:all .12s;width:100%;}
.pay-opt:hover{border-color:var(--navy);}
.pay-opt.on{border-color:var(--navy);background:var(--mist);}
.pay-radio{width:20px;height:20px;border:2px solid var(--line-strong);border-radius:999px;display:grid;place-items:center;flex-shrink:0;}
.pay-opt.on .pay-radio{border-color:var(--navy);}
.pay-radio span{width:10px;height:10px;border-radius:999px;background:var(--navy);}
@media (max-width:860px){.checkout-grid{grid-template-columns:1fr;}.form-grid{grid-template-columns:1fr;}.checkout-summary{order:-1;}}

/* Quiz */
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.quiz-opt{display:flex;align-items:center;gap:16px;padding:20px;border:2px solid var(--line);border-radius:var(--radius);background:#fff;transition:all .15s;position:relative;}
.quiz-opt > div{flex:1;min-width:0;}
.quiz-opt > div > div:first-child{line-height:1.2;}
.quiz-opt:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.quiz-opt.on{border-color:var(--navy);background:var(--mist);}
.quiz-opt-ic{width:54px;height:54px;border-radius:14px;background:var(--mist-2);color:var(--navy);display:grid;place-items:center;flex-shrink:0;}
.quiz-opt.on .quiz-opt-ic{background:var(--navy);color:#fff;}
.quiz-opt-check{margin-left:auto;width:26px;height:26px;border-radius:999px;border:2px solid var(--line-strong);display:grid;place-items:center;color:transparent;flex-shrink:0;}
.quiz-opt.on .quiz-opt-check{background:var(--navy);border-color:var(--navy);color:#fff;}
.quiz-result-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;background:#fff;border-radius:var(--radius-lg);padding:28px;align-items:center;}
@media (max-width:680px){.quiz-opts{grid-template-columns:1fr;}.quiz-result-hero{grid-template-columns:1fr;}}

/* Tweaks panel host (right side) */
.fade-up{animation:fadeUp .5s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}