/* ============================================================
   MOBAU — hoja de estilos compartida
   Plataforma de diseño para proyectos completos (RD)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* color */
  --bg:        #F7F5F1;
  --surface:   #EFEBE3;
  --surface-2: #E7E1D5;
  --ink:       #1C1F1E;
  --ink-soft:  #56534B;
  --ink-faint: #8B8778;
  --line:      #DCD6C9;
  --line-strong: #C7C0AF;
  --accent:    #0F5C52;
  --accent-ink:#0B453D;
  --accent-soft: #E3ECE9;
  --brass:     #A9793F;
  --brass-soft:#F1E7D6;
  --white:     #FFFFFF;
  --danger:    #A23B2E;

  /* type */
  --f-head: 'Space Grotesk', 'DM Sans', sans-serif;
  --f-body: 'Inter', 'DM Sans', sans-serif;
  --f-mono: 'Space Grotesk', monospace;

  /* layout */
  --maxw: 1180px;
  --radius: 3px;
  --radius-lg: 4px;
}

*, *::before, *::after{ box-sizing: border-box; }
/* scrollbar-gutter:stable reserva siempre el ancho de la barra de
   scroll vertical, exista o no en un momento dado — evita que el
   contenido salte horizontalmente cuando una página cambia de alto
   (por ejemplo, al abrir el menú de cuenta cerca del final de una
   página corta) y la barra aparece o desaparece. */
html{ scroll-behavior: smooth; scrollbar-gutter: stable; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{
  font-family: var(--f-head);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em 0;
  letter-spacing: -0.01em;
}
p{ margin: 0 0 1em 0; color: var(--ink-soft); max-width: 62ch; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }

/* El atributo hidden debe ganar siempre, incluso sobre clases con su
   propio display (p.ej. .btn usa inline-flex) — evita el parpadeo de
   elementos que deben empezar ocultos desde el primer render. */
[hidden]{ display:none !important; }

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow{
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 18px; height: 1px;
  background: var(--accent);
  display:inline-block;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--accent); color: var(--white); }
.btn-primary:hover{ background: var(--accent-ink); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover{ border-color: var(--ink); }
.btn-ghost{ background: transparent; color: var(--accent); padding: 13px 4px; }
.btn-ghost:hover{ text-decoration: underline; }
.btn-block{ width:100%; justify-content:center; }
.btn-added{ background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.btn-added:hover{ background:#D7E6E2; }
.btn-sm{ padding: 9px 16px; font-size: 13.5px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

#cart-link.has-items{ border-color: var(--accent); color: var(--accent); }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(247,245,241,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 76px;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family: var(--f-head);
  font-weight:700;
  font-size: 21px;
  color: var(--ink);
  flex-shrink:0;
}
.brand span{
  font-family: var(--f-body);
  font-weight:500;
  font-size: 12px;
  color: var(--ink-faint);
  border-left: 1px solid var(--line-strong);
  padding-left:10px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 26px;
}
.nav-links a{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active{
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.nav-links .nav-sep{
  width:1px; height:16px; background: var(--line-strong); display:inline-block;
}
.nav-cta{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-strong); border-radius: var(--radius);
  width:40px; height:40px; align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:1.5px; background: var(--ink); position:relative;
  transition: transform .15s ease, opacity .15s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- menú de cuenta (Punto 14) ---------- */
.account-menu{ position:relative; }
.account-menu-trigger{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; padding:6px 0; margin:0;
  font-family: var(--f-body); font-size:14px; font-weight:500; color: var(--ink-soft);
  cursor:pointer; white-space:nowrap;
}
.account-menu-trigger:hover{ color: var(--ink); }
.account-menu-trigger svg{ transition: transform .15s ease; }
.account-menu-trigger[aria-expanded="true"] svg{ transform: rotate(180deg); }
.account-menu-panel{
  position:absolute; top: calc(100% + 10px); right:0;
  min-width:230px; background: var(--bg);
  border:1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(20,18,12,.12);
  padding:8px; z-index:50;
  /* Oculto por opacidad/visibilidad, nunca por display:none: el panel
     ya está fuera del flujo (position:absolute dentro de .account-menu,
     que es position:relative), así que abrir/cerrar nunca desplaza el
     header ni el resto de la página — solo cambia su propia opacidad. */
  opacity:0; visibility:hidden; pointer-events:none;
  transform: translateY(-4px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.account-menu-panel.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0);
}
.account-menu-header{ padding:8px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.account-menu-name{ font-weight:600; font-size:14px; color: var(--ink); }
.account-menu-email{ font-size:12.5px; color: var(--ink-faint); margin-top:2px; word-break:break-all; }
.account-menu-panel a, .account-menu-panel .account-menu-item{
  display:block; width:100%; text-align:left;
  background:none; border:none; border-radius: var(--radius);
  font-family: var(--f-body); font-size:14px; color: var(--ink-soft);
  padding:9px 12px; cursor:pointer;
}
.account-menu-panel a:hover, .account-menu-panel .account-menu-item:hover{ background: var(--surface); color: var(--ink); }
.account-menu-panel a:focus-visible, .account-menu-panel .account-menu-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  margin-top: 96px;
  padding: 56px 0 32px;
  background: var(--surface);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-grid h4{ font-size:14px; margin-bottom: 16px; }
.footer-grid p{ font-size: 14px; }
.footer-grid ul li{ margin-bottom: 10px; }
.footer-grid ul a{ font-size: 14px; color: var(--ink-soft); }
.footer-grid ul a:hover{ color: var(--accent); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 24px; font-size: 13px; color: var(--ink-faint);
}

/* ============================================================
   HOME
   ============================================================ */
/* Hero editorial a pantalla ancha con carrusel de fondo (3 fotos reales,
   images/hero/). La altura la fija .hero (min-height), nunca la imagen —
   los slides son position:absolute dentro de .hero-slides, así que cambiar
   de foto jamás mueve el header ni el resto de la página. El texto es HTML
   real superpuesto (.hero-content), nunca escrito dentro de las imágenes. */
.hero{
  position:relative;
  overflow:hidden;
  min-height: 680px;
  display:flex;
  align-items:flex-end;
  padding:0;
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; margin:0;
  opacity:0;
  transition: opacity .9s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* object-position ajustado por foto: cada una se analizó para dejar la
   esquina inferior izquierda (donde vive el texto) en su zona más despejada
   — nunca centrado por defecto encima de lo más cargado de la imagen. */
.hero-slide:nth-child(1) img{ object-position: 50% 30%; }   /* sala con estantería: lo más cargado queda arriba */
.hero-slide:nth-child(2) img{ object-position: 30% 50%; }   /* baño: pared lisa junto a la ducha, a la izquierda */
.hero-slide:nth-child(3) img{ object-position: 20% 55%; }   /* sala/comedor: ventana y planta a la izquierda */

.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(28,31,30,.82) 0%, rgba(28,31,30,.55) 42%, rgba(28,31,30,.15) 68%, rgba(28,31,30,0) 100%),
    linear-gradient(180deg, rgba(28,31,30,.30) 0%, rgba(28,31,30,.05) 30%, rgba(28,31,30,.15) 75%, rgba(28,31,30,.5) 100%);
}

/* .hero-inner es el mismo .wrap de siempre (max-width:1180px + el mismo
   padding lateral que ya usa el header) — así el bloque de texto arranca
   exactamente en el mismo margen izquierdo que el logo "Mobau", en vez de
   quedar centrado dentro de una caja angosta como en la primera versión.
   width:100% porque .hero es flex y .wrap, fuera de aquí, nunca necesitó
   ocupar todo el ancho de su contenedor. */
.hero-inner{ width:100%; }
.hero-content{
  position:relative; z-index:2;
  width: fit-content;
  max-width: 640px;
  padding: 64px 0 80px;
}
.hero-content::before{
  content:"";
  position:absolute; inset:-24px -20px -20px;
  background: rgba(28,31,30,.24);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(2px);
  z-index:-1;
}
.hero .eyebrow{ color: var(--brass-soft); }
.hero .eyebrow::before{ background: var(--brass-soft); }
.hero h1{
  font-size: 38px;
  max-width: 17ch;
  color: var(--white);
}
.hero .lede{
  font-size: 17px;
  max-width: 48ch;
  margin-bottom: 28px;
  color: rgba(255,255,255,.88);
}
.hero-actions{ display:flex; align-items:center; gap: 22px; }
.hero .btn-ghost{ color: var(--white); }
.hero .btn-ghost:hover{ color: var(--white); }
.hero .pill{ background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: var(--white); }
.hero :focus-visible{ outline-color: var(--white); }

.hero-dots{
  position:absolute; z-index:2; right:32px; bottom:28px;
  display:flex; gap:10px;
}
.hero-dot{
  width:10px; height:10px; padding:0; margin:0;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.25);
  cursor:pointer;
}
.hero-dot.is-active{ background: var(--white); }

/* prefers-reduced-motion: la transición de fade pasa a instantánea (0s) —
   el cambio manual con los indicadores sigue funcionando igual, el
   autoplay se detiene aparte desde script.js. */
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition: none; }
}

.section{ padding: 72px 0; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 24px; margin-bottom: 40px;
}
.section-head h2{ font-size: 28px; max-width: 22ch; }
.section-head p{ margin:0; }

.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.step{
  padding: 32px 28px;
  border-right: 1px solid var(--line);
}
.step:first-child{ padding-left: 0; }
.step:last-child{ border-right:none; padding-right: 0; }
.step .num{
  font-family: var(--f-head);
  font-size: 15px;
  color: var(--brass);
  margin-bottom: 18px;
}
.step h3{ font-size: 18px; margin-bottom: 8px; }
.step p{ font-size: 14.5px; margin:0; }

/* franja de categorías FF&E — presentadas como ejemplos, no como límite */
.ffe-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ffe-item{ padding: 28px 26px; border-right: 1px solid var(--line); }
.ffe-item:last-child{ border-right:none; }
.ffe-item svg{ width:30px; height:30px; color: var(--brass); margin-bottom: 14px; }
.ffe-item h3{ font-size: 15.5px; margin-bottom: 6px; }
.ffe-item p{ font-size: 13.5px; margin:0; }

.providers-section{ background: var(--surface); }
.providers-intro{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; margin-bottom: 44px; }
.providers-intro p{ font-size: 16px; }
.logo-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.logo-tile{
  border: 1px solid var(--line-strong);
  background: var(--bg);
  padding: 26px 18px;
  text-align:center;
  border-radius: var(--radius);
}
.logo-tile.featured{ border-color: var(--accent); background: var(--accent-soft); }
.logo-tile .wordmark{
  font-family: var(--f-head);
  font-weight:700;
  font-size: 15px;
  letter-spacing: .01em;
}
.logo-tile .cat{
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-top: 6px;
}
.logo-tile.featured .cat{ color: var(--accent-ink); }

.cta-band{
  border: 1px solid var(--line-strong);
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 48px 56px;
  display:flex; justify-content:space-between; align-items:center; gap: 32px;
}
.cta-band h2{ color: var(--bg); font-size: 26px; margin-bottom:6px; max-width: 22ch;}
.cta-band p{ color: #C9C6BC; margin:0; }

/* ============================================================
   CATALOGO
   ============================================================ */
.page-head{
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--line);
}
.page-head .eyebrow{ margin-bottom: 10px; }
.page-head h1{ font-size: 30px; }

.catalog-layout{
  display:grid;
  grid-template-columns: 250px 1fr;
  gap: 48px;
  padding: 40px 0 96px;
  align-items:start;
}
.filters{
  position:sticky; top: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--surface);
}
.filters h3{ font-size: 13px; text-transform:none; margin-bottom: 4px; }
.filter-group{ padding: 18px 0; border-bottom: 1px solid var(--line); }
.filter-group:last-child{ border-bottom:none; }
.filter-group legend{
  font-family: var(--f-head);
  font-size: 13.5px;
  font-weight:600;
  margin-bottom: 12px;
  padding:0;
}
.filter-option{
  display:flex; align-items:center; gap: 9px;
  font-size: 14px; color: var(--ink-soft);
  margin-bottom: 9px;
  cursor:pointer;
}
.filter-option input{ accent-color: var(--accent); width:14px; height:14px; }
.filter-option:hover{ color: var(--ink); }
.filters .clear{
  margin-top: 6px;
  font-size: 13px;
  color: var(--accent);
  background:none; border:none; cursor:pointer; padding:0;
}

.search-bar{ margin-bottom: 22px; }
.search-bar input{
  width:100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 15px;
  color: var(--ink);
  font-family: var(--f-body);
}
.search-bar input:focus{ border-color: var(--accent); outline:none; }
.search-bar input::placeholder{ color: var(--ink-faint); }

.catalog-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 22px;
}
.result-count{ font-size: 14px; color: var(--ink-faint); }
.sort-select{
  font-family: var(--f-body); font-size: 13.5px;
  border: 1px solid var(--line-strong); background: var(--bg);
  padding: 8px 12px; border-radius: var(--radius); color: var(--ink);
}

.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: border-color .15s ease;
}
.product-card:hover{ border-color: var(--ink-faint); }
.card-media{
  aspect-ratio: 4/3;
  background: var(--surface);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  border-bottom: 1px solid var(--line);
  color: var(--ink-faint);
}
.card-media svg{ width: 54%; height:54%; }
.badge{
  position:absolute; top:12px; left:12px;
  font-size: 11px; font-weight:600;
  padding: 5px 9px; border-radius: 2px;
  background: var(--bg); border: 1px solid var(--line-strong);
  color: var(--ink-soft);
}
.badge.b-stock{ background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.badge.b-bajo-pedido{ background: var(--brass-soft); color: #6E4E22; border-color: transparent; }
.badge.b-confirmar{ background: var(--surface-2); color: var(--ink-soft); border-color: transparent; }

.card-body{ padding: 18px 18px 20px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-brand{ font-size: 12px; color: var(--ink-faint); font-family: var(--f-mono); }
.card-name{ font-size: 16.5px; font-weight:600; font-family: var(--f-head); }
.card-meta{ font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.card-actions{ display:flex; gap:8px; margin-top:auto; flex-wrap:wrap; }
.card-actions .btn{ flex:1; justify-content:center; padding:9px 10px; font-size:12.5px; white-space:nowrap; }

.empty-state{
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 64px 24px;
  text-align:center;
  color: var(--ink-faint);
}

/* ============================================================
   PRODUCTO
   ============================================================ */
.breadcrumb{
  font-size: 13px; color: var(--ink-faint);
  padding: 24px 0 0;
}
.breadcrumb a{ color: var(--ink-faint); }
.breadcrumb a:hover{ color: var(--accent); }

.product-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 28px 0 40px;
  align-items:start;
}
.gallery-main{
  aspect-ratio: 4/3;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.gallery-main svg{ width:38%; height:38%; }
.gallery-thumbs{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
.gallery-thumbs div{
  aspect-ratio: 1;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.product-info .card-brand{ margin-bottom: 6px; }
.product-info h1{ font-size: 28px; margin-bottom: 10px; }
.product-info .avail-row{ display:flex; align-items:center; gap:12px; margin-bottom: 18px; }
.product-info .desc{ font-size: 15.5px; margin-bottom: 26px; }
.product-info .section-note{ font-size: 13.5px; color: var(--ink-faint); margin-bottom: 12px; }

.spec-table{ border-top: 1px solid var(--line); margin-bottom: 30px; }
.spec-row{
  display:grid; grid-template-columns: 160px 1fr;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.spec-row dt{ color: var(--ink-faint); font-family: var(--f-mono); font-size: 13px; }
.spec-row dd{ margin:0; color: var(--ink); }

/* archivos descargables */
.resource-list{ border-top: 1px solid var(--line); margin-bottom: 10px; }
.resource-row{
  display:grid; grid-template-columns: 1fr 1fr auto;
  align-items:center; gap:12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.resource-row .r-label{ font-family: var(--f-head); font-weight:600; font-size: 14.5px; }
.resource-row .r-ext{ color: var(--ink-faint); font-family: var(--f-mono); font-size: 13px; }
.resource-row .btn{ padding: 8px 14px; font-size: 13px; }
.resource-note{ font-size: 13px; color: var(--ink-faint); margin: 10px 0 32px; }

.product-actions{ display:flex; gap:14px; margin-bottom: 36px; }

/* Fila compacta de "Cantidad" + "Añadir a la selección" en la ficha de
   producto — clase específica (no toca .product-actions, compartida)
   para que el grupo quede alineado a la derecha, sin space-between,
   y la etiqueta "Cantidad" quede en la misma fila que los controles en
   vez de apilada encima. width:100% es explícito (no solo heredado de
   ser un <div> de bloque) para que justify-content:flex-end siga
   funcionando aunque cambie el display del elemento en el futuro. */
.product-selection-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
}
.product-selection-actions .product-qty-field{
  display:flex;
  align-items:center;
  gap:8px;
}

.supplier-box{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--surface);
  display:flex; justify-content:space-between; align-items:center; gap: 20px;
}
.supplier-box .s-name{ font-family: var(--f-head); font-weight:600; font-size:15.5px; }
.supplier-box .s-loc{ font-size: 13px; color: var(--ink-faint); margin-top:3px; }
.supplier-box a{ font-size: 13.5px; color: var(--accent); white-space:nowrap; }
.supplier-box a:hover{ text-decoration:underline; }

.related-strip{ padding: 64px 0 96px; border-top: 1px solid var(--line); }

/* ============================================================
   CARRITO / PROYECTO
   ============================================================ */
.cart-list{ border-top: 1px solid var(--line); margin-bottom: 32px; }
.cart-row{
  display:grid; grid-template-columns: 64px 1.7fr 1fr auto auto;
  align-items:center; gap:16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cart-row .c-thumb{
  width:64px; height:64px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); display:flex; align-items:center; justify-content:center; color: var(--ink-faint);
}
.cart-row .c-thumb svg{ width:60%; height:60%; }
.cart-row .c-name{ font-family: var(--f-head); font-weight:600; font-size: 15px; }
.cart-row .c-brand{ font-size: 12.5px; color: var(--ink-faint); font-family: var(--f-mono); }
.cart-row .c-meta{ font-size: 13px; color: var(--ink-soft); }
.cart-row .c-qty{ display:flex; align-items:center; gap:8px; }
.cart-row .c-qty label{ font-size:12px; color: var(--ink-faint); }
.cart-row .c-qty input{
  width:56px; text-align:center; padding:8px 6px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); font-size:14px; font-family: var(--f-body);
}
.cart-row .c-remove{
  background:none; border:none; color: var(--ink-faint); cursor:pointer;
  font-size: 13px; text-decoration: underline; padding:0; white-space:nowrap;
}
.cart-row .c-remove:hover{ color: var(--danger); }

.cart-summary-band{
  display:flex; justify-content:space-between; align-items:center; gap: 24px; flex-wrap:wrap;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 30px; background: var(--surface);
}
.cart-summary-band .csb-label{ font-size: 13px; color: var(--ink-faint); margin-bottom:4px; }
.cart-summary-band .csb-count{ font-family: var(--f-head); font-size: 18px; }

.cart-empty{
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  padding: 72px 24px; text-align:center; color: var(--ink-faint);
}
.cart-empty .btn{ margin-top: 18px; }

/* Estado vacío de Mi selección — se sobrescribe por ID (no se toca
   .cart-empty, que reutilizan otras páginas). El <p> global tiene
   max-width:62ch sin margin:auto (ver regla "p" arriba), así que en un
   recuadro ancho quedaba pegado a la izquierda en vez de centrado —
   esta es la causa real, no un problema del recuadro en sí. */
#selection-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
  min-height:270px;
  box-sizing:border-box;
  padding:32px 24px;
}
#selection-empty .empty-state-content{
  width:100%;
  max-width:none;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#selection-empty .empty-state-content p:first-of-type{
  width:100%;
  margin:0 0 12px;
  text-align:center;
}
#selection-empty .empty-state-content p:last-of-type{
  width:100%;
  max-width:620px;
  margin:0 auto 20px;
  text-align:center;
}
#selection-empty .empty-state-content .btn{
  display:inline-flex;
  align-self:center;
  margin-left:auto;
  margin-right:auto;
}

/* ============================================================
   COTIZACIÓN (form)
   ============================================================ */
.rfq-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  padding: 44px 0 96px;
  align-items:start;
}
.form-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px;
  background: var(--bg);
}
fieldset{ border:none; padding:0; margin:0 0 30px; }
fieldset legend{
  font-family: var(--f-head); font-weight:600; font-size: 15px;
  padding:0 0 16px; width:100%;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.field-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field{ margin-bottom: 18px; }
.field.full{ grid-column: 1 / -1; }
.field label{
  display:block; font-size: 13.5px; font-weight:600; margin-bottom: 7px;
}
.field .hint{ font-size:12.5px; color:var(--ink-faint); font-weight:400; margin-left:6px; }
.field input, .field select, .field textarea{
  width:100%;
  font-family: var(--f-body); font-size: 14.5px; color: var(--ink);
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--accent); outline: none;
}
.field textarea{ resize: vertical; min-height: 96px; }
.file-drop{
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 24px; text-align:center;
  color: var(--ink-faint); font-size: 13.5px;
  cursor:pointer;
  background: var(--surface);
}
.file-drop:hover{ border-color: var(--accent); }

.rfq-summary{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  background: var(--surface);
  position: sticky; top: 96px;
}
.rfq-summary h3{ font-size: 15px; margin-bottom: 14px; }
.rfq-summary .sum-row{
  display:flex; justify-content:space-between; gap: 12px;
  font-size: 13.5px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.rfq-summary .sum-row span:first-child{ color: var(--ink-faint); }
.rfq-summary .sum-empty{ font-size: 13.5px; color: var(--ink-faint); padding: 6px 0 14px; }
.rfq-summary p.note{ font-size: 13px; margin-top: 16px; }

/* ============================================================
   GRACIAS
   ============================================================ */
.confirm-wrap{
  max-width: 560px; margin: 0 auto;
  padding: 110px 0 140px;
  text-align:left;
}
.confirm-mark{
  width: 52px; height:52px; border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 28px;
}
.confirm-wrap h1{ font-size: 30px; }
.confirm-ref{
  font-family: var(--f-mono); font-size: 13px; color: var(--ink-faint);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px 0; margin: 28px 0;
  display:flex; justify-content:space-between;
}
.confirm-actions{ display:flex; gap:14px; margin-top: 8px; }

/* ============================================================
   DISTRIBUIDORES
   ============================================================ */
.provider-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  padding: 40px 0 100px;
}
.provider-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display:flex; flex-direction:column; gap: 14px;
  background: var(--bg);
}
.provider-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.provider-mark{
  font-family: var(--f-head); font-weight:700; font-size: 18px;
}
.provider-loc{ font-size: 13px; color: var(--ink-faint); }
.provider-cats{ display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 6px; }
.chip{
  font-size: 12px; padding: 5px 10px; border-radius: 2px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft);
}
.provider-card .btn{ align-self:flex-start; margin-top: 6px; }
.provider-card .icon-btn-muted{ align-self:flex-start; margin-top: 6px; }

/* "Abrir" + "Archivar" en la tarjeta de un proyecto activo: misma
   altura exacta pase lo que pase con el largo del texto — height fijo
   en vez de depender solo del padding, box-sizing:border-box para que
   borde y padding no la aumenten, sin permitir que el texto envuelva. */
.project-action-btn{
  height:40px;
  box-sizing:border-box;
  line-height:1;
  white-space:nowrap;
}

/* ============================================================
   Botón de icono pequeño y neutro (p.ej. "Eliminar proyecto" en
   proyectos archivados) — mismo patrón que .selection-item__icon-button
   pero sin depender de esa clase, para no acoplar Mi selección con
   Mis proyectos. Nunca usa rojo: la confirmación ya avisa del riesgo.
   ============================================================ */
.icon-btn-muted{
  width:38px; height:38px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink-soft); cursor:pointer;
}
.icon-btn-muted:hover{ background: var(--line-strong); }
.icon-btn-muted:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ============================================================
   CUENTA / LOGIN / REGISTRO
   ============================================================ */
.auth-wrap{ padding: 84px 0 130px; }
.auth-card{ max-width: 440px; margin: 0 auto; }
.auth-card .eyebrow{ justify-content:center; }
.auth-card h1{ text-align:center; font-size: 26px; }
.auth-card > p{ text-align:center; margin: 0 auto 28px; }
.auth-switch{ text-align:center; font-size:14px; color:var(--ink-soft); margin-top:22px; }
.auth-switch a{ color:var(--accent); }
.auth-switch a:hover{ text-decoration:underline; }

.account-section{ margin-bottom: 48px; }
.account-section h2{ font-size: 20px; margin-bottom: 18px; }
.demo-note{ font-size: 12.5px; color: var(--ink-faint); margin: -8px 0 20px; }

.current-project-box{
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 26px; background: var(--surface);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.current-project-box .cp-label{ font-size:13px; color: var(--ink-faint); margin-bottom:4px; }
.current-project-box .cp-value{ font-family: var(--f-head); font-size: 17px; }

.saved-project{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 12px; background: var(--bg);
}
.saved-project .sp-name{ font-family:var(--f-head); font-weight:600; font-size:15.5px; }
.saved-project .sp-meta{ font-size:13px; color:var(--ink-faint); margin-top:3px; }

/* ============================================================
   MI SELECCIÓN — tarjeta compacta con control de cantidad
   (aislado de .saved-project a propósito: esa clase la usan
   otras páginas sin control de cantidad y no debe verse afectada)
   ============================================================ */
.selection-item{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 18px; margin-bottom: 10px; background: var(--bg);
}

.selection-item__thumb{
  width:44px; height:44px; flex-shrink:0;
  background: var(--surface); border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-faint);
}
.selection-item__thumb svg{ width:58%; height:58%; }

.selection-item__content{ flex:1 1 200px; min-width:0; }
.selection-item__content .sp-name{
  font-family:var(--f-head); font-weight:600; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.selection-item__meta{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; }

.selection-item__quantity{ flex-shrink:0; display:flex; align-items:center; gap:8px; }

/* Visualmente oculta en escritorio (el contexto ya deja claro qué es),
   pero sigue en el árbol de accesibilidad para lectores de pantalla. */
.selection-item__qty-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.quantity-control{ display:flex; align-items:center; gap:6px; }
.quantity-control__button{
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1; cursor:pointer;
}
.quantity-control__button:hover{ border-color:var(--ink); }
.quantity-control__button:disabled{ opacity:.4; cursor:not-allowed; }
.quantity-control__button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.quantity-control__input{
  width:48px; height:30px; flex-shrink:0; text-align:center;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  font-size:14px; font-family:var(--f-body); -moz-appearance:textfield;
}
.quantity-control__input::-webkit-outer-spin-button,
.quantity-control__input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.quantity-control__input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.quantity-control__unit{ font-size:12.5px; color:var(--ink-faint); min-width:22px; }

.selection-item__actions{ flex-shrink:0; display:flex; align-items:center; gap:6px; }
.selection-item__icon-button{
  width:30px; height:30px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--bg); color:var(--ink); cursor:pointer; text-decoration:none;
}
.selection-item__icon-button:hover{ border-color:var(--ink); }
.selection-item__icon-button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.selection-item__icon-button--danger{ color: var(--brass); }
.selection-item__icon-button--danger:hover{ border-color: var(--brass); }

@media (max-width: 640px){
  .selection-item{ flex-direction:row; }
  .selection-item__content{ flex-basis:100%; }
  .selection-item__qty-label{
    position:static; width:auto; height:auto; padding:0; margin:0 2px 0 0;
    overflow:visible; clip:auto; white-space:nowrap;
    font-size:12px; color:var(--ink-faint);
  }
}

/* Mi selección en escritorio: productos a la izquierda (columna
   flexible), resumen + acciones en una barra lateral estable a la
   derecha — dentro del mismo .wrap ancho que ya usan el encabezado y
   el resto de la página (sin un límite propio más estrecho). */
.selection-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items:start;
}
.selection-layout__side{
  position: sticky;
  top: 96px; /* debajo del header sticky (76px) + margen */
}

@media (max-width: 900px){
  .selection-layout{ grid-template-columns: 1fr; }
  .selection-layout__side{ position: static; top: auto; width:100%; }
}

.selection-summary{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 24px 28px; margin-top: 24px;
}
.selection-summary__label{ font-size:13px; color:var(--ink-faint); margin:0 0 4px; }
.selection-summary__count{ font-family:var(--f-head); font-size:17px; font-weight:600; margin:0; }
.selection-summary__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* En la barra lateral (angosta por diseño) el resumen se apila en
   vertical en vez de repartirse en una fila horizontal — igual que ya
   hacía en móvil, reutilizado aquí porque el ancho es comparable. */
.selection-layout__side .selection-summary{
  flex-direction:column; align-items:stretch; margin-top:0;
}
.selection-layout__side .selection-summary__actions{ width:100%; }
.selection-layout__side .selection-summary__actions .btn{ width:100%; }

.status-chip{ font-size:12px; font-weight:600; padding:5px 10px; border-radius:2px; white-space:nowrap; }
.status-chip.sent{ background:var(--accent-soft); color:var(--accent-ink); }
.status-chip.progress{ background:var(--brass-soft); color:#6E4E22; }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position: fixed; left:50%; bottom: 28px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: var(--bg);
  padding: 12px 22px; border-radius: var(--radius);
  font-size: 14px; font-weight:500;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 90;
  white-space:nowrap;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   PILOTO — badges y mensajes de estado (sin estadísticas ficticias)
   ============================================================ */
.pill-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.pill{
  font-size:12.5px; font-weight:600; padding:9px 15px; border-radius:20px;
  border:1px solid var(--line-strong); color:var(--ink-soft); background:var(--bg);
}

/* ============================================================
   CATEGORÍAS — grid de 6 categorías del piloto (home + catálogo)
   ============================================================ */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-tile{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px; background:var(--surface); transition:border-color .15s ease;
}
.cat-tile:hover{ border-color:var(--ink-faint); }
.cat-tile svg{ width:28px; height:28px; color:var(--accent); margin-bottom:12px; }
.cat-tile h3{ font-size:15px; margin-bottom:6px; }
.cat-tile p{ font-size:12.5px; margin:0; }

.info-banner{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); padding:28px 32px;
}
.info-banner h3{ font-size:17px; margin-bottom:8px; }
.info-banner p{ margin:0; font-size:14.5px; }

/* ============================================================
   RFQ agrupado por distribuidor
   ============================================================ */
.rfq-group-title{
  font-family:var(--f-head); font-weight:600; font-size:13.5px;
  color:var(--accent); margin:20px 0 8px; text-transform:none;
}
.rfq-group-title:first-child{ margin-top:0; }
.rfq-split-note{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--ink-soft);
  background:var(--accent-soft); border-radius:var(--radius);
  padding:12px 16px; margin-bottom:18px;
}
.legal-note{
  font-size:12.5px; color:var(--ink-faint); line-height:1.5;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-top:16px;
}

/* estados de RFQ (cuenta.html) */
.status-chip.draft{ background:var(--surface-2); color:var(--ink-soft); }
.status-chip.review{ background:var(--brass-soft); color:#6E4E22; }
.status-chip.quoted{ background:#DCEEE9; color:var(--accent-ink); }
.status-chip.closed{ background:var(--line); color:var(--ink-soft); }

.rfq-status-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px 22px; margin-bottom:12px; background:var(--bg);
}
.rfq-status-row .rs-dist{ font-family:var(--f-head); font-weight:600; font-size:15px; }
.rfq-status-row .rs-meta{ font-size:12.5px; color:var(--ink-faint); margin-top:3px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .nav-links{ gap: 18px; }
  .nav-links a{ font-size: 13.5px; }

  .hero{ min-height: 560px; }
  .hero h1{ font-size: 32px; }
}
@media (max-width: 900px){
  .wrap{ padding: 0 20px; }
  .nav-links, .nav-cta .btn-outline{ display:none; }
  .nav-toggle{ display:flex; }
  body.nav-open .nav-links{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; top:76px; left:0; right:0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 18px 20px 26px; gap: 4px;
  }
  body.nav-open .nav-links a{ padding: 10px 0; width:100%; }
  body.nav-open .nav-links .nav-sep{ display:none; }
  .nav-cta #cart-link{ display:inline-flex; }

  /* Menú de cuenta dentro del desplegable móvil: mismo ancho completo
     que el resto de enlaces, panel en flujo normal (no flotante) en
     vez de superpuesto, para que no tape nada en una pantalla angosta. */
  body.nav-open .account-menu{ width:100%; }
  body.nav-open .account-menu-trigger{ width:100%; justify-content:space-between; padding:10px 0; }
  body.nav-open .account-menu-panel{
    position:static; box-shadow:none; border:none;
    padding:0 0 8px 14px; margin-top:2px; min-width:0;
    /* Aquí sí colapsa por display: al pasar a position:static (flujo
       normal) dentro del propio desplegable móvil, opacity/visibility
       dejarían un hueco vacío del alto del panel mientras está cerrado.
       Esto vive dentro del overlay del menú móvil (ya position:absolute
       aparte) — no toca el header real ni la barra de scroll de la
       página. */
    display:none;
  }
  body.nav-open .account-menu-panel.is-open{ display:block; }

  /* Hero en móvil: altura suficiente para leer todo el contenido sin que
     el recorte de la foto tape el título o los botones; texto a casi todo
     el ancho, con márgenes; object-position recalculado por foto porque el
     recorte vertical (retrato) no despeja las mismas zonas que en horizontal. */
  .hero{ min-height: 560px; align-items:flex-end; }
  .hero-content{ width:auto; max-width:none; padding: 40px 0 72px; }
  .hero h1{ font-size: 27px; }
  .hero .lede{ font-size: 15.5px; }
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(28,31,30,.35) 0%, rgba(28,31,30,.15) 35%, rgba(28,31,30,.55) 70%, rgba(28,31,30,.88) 100%);
  }
  .hero-slide:nth-child(1) img{ object-position: 62% 15%; }
  .hero-slide:nth-child(2) img{ object-position: 38% 40%; }
  .hero-slide:nth-child(3) img{ object-position: 30% 35%; }
  .hero-dots{ right:50%; transform:translateX(50%); bottom:16px; }
  .steps{ grid-template-columns: 1fr; }
  .step{ border-right:none; border-bottom: 1px solid var(--line); padding: 24px 0; }
  .step:first-child{ padding-top:0; }
  .ffe-strip{ grid-template-columns: repeat(2,1fr); }
  .ffe-item{ border-bottom:1px solid var(--line); }
  .ffe-item:nth-child(2n){ border-right:none; }
  .providers-intro{ grid-template-columns: 1fr; }
  .logo-row{ grid-template-columns: repeat(2,1fr); }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 28px; }

  .catalog-layout{ grid-template-columns: 1fr; }
  .filters{ position:static; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }

  .product-layout{ grid-template-columns: 1fr; }
  .resource-row{ grid-template-columns: 1fr; align-items:flex-start; gap:6px; }
  .rfq-layout{ grid-template-columns: 1fr; }
  .rfq-summary{ position:static; }
  .field-grid{ grid-template-columns: 1fr; }
  .provider-grid{ grid-template-columns: 1fr; }

  .cart-row{ grid-template-columns: 56px 1fr; row-gap:10px; }
  .cart-row .c-qty{ grid-column: 1 / -1; }
  .cart-row .c-remove{ grid-column: 1 / -1; justify-self:flex-start; }

  .saved-project{ flex-direction:column; align-items:flex-start; }
  .current-project-box{ flex-direction:column; align-items:flex-start; }

  .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .rfq-status-row{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 560px){
  .product-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero-stats{ flex-wrap:wrap; gap: 24px; }
  .ffe-strip{ grid-template-columns: 1fr; }
  .ffe-item{ border-right:none !important; }
  .cat-grid{ grid-template-columns: 1fr; }
}