/* ============================================================
   Estilos propios del SITIO WEB (complementan main.css)
   ============================================================ */

/* Header sólido en páginas internas */
body.page-inner{padding-top:var(--header-h)}
body.page-inner .header::before{opacity:1}
.nav a.is-current{color:var(--c-accent)}
.nav a.is-current::after{width:100%}

/* ---------- HERO CON PRODUCTOS DESTACADOS ---------- */
.hero--shop .hero__inner{
  max-width:none;display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:center;
}
.hero--shop .hero__copy{max-width:580px}
.hero__picks{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.pick{
  display:flex;flex-direction:column;gap:.55rem;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);
  padding:1.1rem;background:rgba(255,255,255,.04);backdrop-filter:blur(4px);
  transition:border-color .4s ease,background .4s ease;
}
.pick:hover{border-color:var(--c-accent);background:rgba(255,255,255,.07)}
.pick img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:rgba(255,255,255,.08)}
.pick h4{font-size:1.25rem;font-weight:600;color:#fff;margin-top:.4rem}
.pick small{color:rgba(255,255,255,.8);font-size:.84rem;line-height:1.65;font-weight:400}
.pick__price{
  font-size:.95rem;color:#fff;letter-spacing:.02em;
  padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.14);
}
.pick .btn{width:100%}

/* ---------- CABECERA DE PÁGINA ---------- */
.pagehead{
  background:var(--c-bg-alt);border-bottom:1px solid var(--c-border);
  padding:clamp(3rem,6vw,4.5rem) 0;
}
.pagehead h1{font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:600;margin-bottom:.8rem}
.pagehead p{color:var(--c-text-soft);max-width:58ch;font-weight:400}
.crumbs{
  font-size:.68rem;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--c-text-soft);margin-bottom:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap;
}
.crumbs a:hover{color:var(--c-accent)}

/* ---------- CATÁLOGO ---------- */
.catalog{display:grid;grid-template-columns:230px 1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.filters{position:sticky;top:calc(var(--header-h) + 2rem)}
.filters h4{
  font-size:.68rem;text-transform:uppercase;letter-spacing:var(--track);
  color:var(--c-text);font-family:var(--font-body);font-weight:600;
  padding-bottom:.9rem;border-bottom:1px solid var(--c-border);margin-bottom:1.1rem;
}
.filter-list{list-style:none;display:grid;gap:.15rem;margin-bottom:2.6rem}
.filter-list button{
  width:100%;text-align:left;padding:.5rem 0;font-size:.92rem;font-weight:400;
  color:var(--c-text-soft);transition:color .3s;position:relative;
}
.filter-list button:hover{color:var(--c-text)}
.filter-list button.is-active{color:var(--c-text)}
.filter-list button.is-active::before{
  content:"";position:absolute;left:-1rem;top:50%;width:6px;height:1px;background:var(--c-accent);
}
.search{
  width:100%;padding:.75rem 0;border:0;border-bottom:1px solid var(--c-border);
  background:transparent;color:var(--c-text);font:inherit;font-size:.92rem;font-weight:400;
}
.search:focus{outline:0;border-color:var(--c-accent)}
.catalog__bar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-bottom:2.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--c-border);flex-wrap:wrap;
}
.catalog__count{font-size:.68rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--c-text-soft)}
#orden{width:auto;padding:.4rem 0;border-bottom:0;cursor:pointer;font-size:.68rem;letter-spacing:var(--track);text-transform:uppercase}

/* ---------- DETALLE ---------- */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.gallery__main{overflow:hidden;background:var(--c-bg-alt);aspect-ratio:4/3;border-radius:var(--radius)}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.gallery__thumbs{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.gallery__thumbs img{
  width:92px;height:69px;object-fit:cover;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;background:var(--c-bg-alt);
  opacity:.6;transition:opacity .3s,border-color .3s;
}
.gallery__thumbs img:hover{opacity:1}
.gallery__thumbs img.is-active{opacity:1;border-color:var(--c-accent)}
.detail h1{font-size:clamp(2rem,4vw,3rem);font-weight:600;margin-bottom:1rem}
.detail__price{display:flex;align-items:baseline;gap:1rem;margin:1.6rem 0;padding-bottom:1.6rem;border-bottom:1px solid var(--c-border)}
.detail__price strong{font-family:var(--font-title);font-size:2.4rem;font-weight:600}
.detail__price s{color:var(--c-text-soft)}
.detail__price .off{
  font-size:.66rem;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--c-accent);border:1px solid var(--c-accent);padding:.28rem .6rem;border-radius:var(--radius);
}
.detail__actions{display:flex;gap:1rem;flex-wrap:wrap;margin:2rem 0}
.detail h3{
  font-family:var(--font-body);font-size:.7rem;font-weight:600;
  letter-spacing:var(--track);text-transform:uppercase;margin-top:2.4rem;
}
.specs{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.94rem;font-weight:400}
.specs th,.specs td{padding:.9rem 0;border-bottom:1px solid var(--c-border);text-align:left}
.specs th{color:var(--c-text-soft);font-weight:400;width:42%}
.trust{display:grid;gap:.9rem;margin-top:2.2rem;font-size:.88rem;color:var(--c-text-soft);font-weight:400}
.trust li{display:flex;gap:.9rem;align-items:center;list-style:none}
.trust li::before{content:"";width:6px;height:6px;background:var(--c-accent);transform:rotate(45deg);flex:none}

/* ---------- CONTACTO ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.field{display:grid;gap:.5rem;margin-bottom:1.8rem}
.field label{font-size:.66rem;letter-spacing:var(--track);text-transform:uppercase;color:var(--c-text-soft)}
.field input,.field textarea,.field select{
  padding:.8rem 0;border:0;border-bottom:1px solid var(--c-border);border-radius:0;
  background:transparent;color:var(--c-text);font:inherit;font-size:.98rem;font-weight:400;
  transition:border-color .3s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--c-text-soft);opacity:.55}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--c-accent)}
.field textarea{min-height:120px;resize:vertical}
.info-card{
  background:var(--c-bg-alt);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:clamp(1.8rem,4vw,2.6rem);display:grid;gap:1.6rem;
}
.info-row{display:flex;gap:1.1rem;align-items:flex-start;font-size:.96rem;font-weight:400}
.info-row strong{
  display:block;font-size:.66rem;letter-spacing:var(--track);text-transform:uppercase;
  color:var(--c-text-soft);font-weight:600;margin-bottom:.3rem;
}
.info-row a:hover{color:var(--c-accent)}
.info-icon{
  flex:none;width:38px;height:38px;display:grid;place-items:center;font-size:.95rem;
  border:1px solid var(--c-line);border-radius:var(--radius);color:var(--c-accent);
}
.channels{display:grid;gap:.9rem;margin-top:.6rem}

/* ---------- LOGIN ---------- */
.auth{min-height:calc(100svh - var(--header-h));display:grid;place-items:center;padding:4rem 0;background:var(--c-bg-alt)}
.auth__card{
  width:min(440px,100%);background:var(--c-bg);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:clamp(2rem,5vw,3.2rem);
}
.auth__card h1{font-size:2rem;font-weight:600;margin-bottom:.5rem;text-align:center}
.auth__card > p{
  text-align:center;color:var(--c-text-soft);font-size:.7rem;font-weight:400;
  letter-spacing:var(--track);text-transform:uppercase;margin-bottom:2.6rem;
}
.auth__switch{text-align:center;font-size:.84rem;color:var(--c-text-soft);margin-top:1.6rem;font-weight:400}
.auth__switch button{color:var(--c-accent);border-bottom:1px solid currentColor;padding-bottom:1px}
.auth__note{
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--c-border);
  font-size:.78rem;color:var(--c-text-soft);text-align:center;font-weight:400;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero--shop .hero__inner{grid-template-columns:1fr}
  .catalog{grid-template-columns:1fr}
  .filters{position:static}
  .detail,.contact{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero__picks{grid-template-columns:1fr}
}