/* ==========================================================
   TOKENS
   ========================================================== */
:root{
  --bg: #0d0e12;
  --bg-raised: #16181f;
  --bg-card: #1a1d25;
  --line: #2a2e39;
  --text: #f2f3f6;
  --text-muted: #9398a6;
  --accent: #ff7a3d;         /* filamento PLA naranja */
  --accent-2nd: #ffb27a;     /* variante clara del acento, para degradados */
  --accent-soft: #ff7a3d1f;
  --accent-2: #4fd6e8;       /* brillo de boquilla / cian */
  --danger: #ff5470;
  --radius: 14px;
  --radius-sm: 9px;
  --font-display: 'Sora', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --shadow-1: 0 2px 10px rgba(0,0,0,.25);
  --shadow-2: 0 16px 40px -14px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px rgba(255,122,61,.12), 0 12px 34px -12px rgba(255,122,61,.35);
}

/* ---------- Tema claro ---------- */
:root[data-theme="light"]{
  --bg: #fbfaf8;
  --bg-raised: #ffffff;
  --bg-card: #f3f2ee;
  --line: #e3e1da;
  --text: #16171b;
  --text-muted: #6b7080;
  --accent-soft: #ff7a3d16;
  --shadow-1: 0 2px 10px rgba(20,20,20,.06);
  --shadow-2: 0 16px 40px -18px rgba(20,20,20,.18);
  --shadow-glow: 0 0 0 1px rgba(255,122,61,.15), 0 12px 30px -14px rgba(255,122,61,.28);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:
    radial-gradient(1100px 500px at 12% -10%, rgba(255,122,61,.06), transparent 55%),
    radial-gradient(900px 480px at 92% 8%, rgba(79,214,232,.05), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .3s ease, color .3s ease;
}

body, body *{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.hidden{ display:none !important; }

button{ font-family:inherit; cursor:pointer; }
input, textarea{ font-family:inherit; }

::selection{ background:var(--accent); color:#161616; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* ==========================================================
   ANIMACIONES REUTILIZABLES
   ========================================================== */
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes popIn{
  from{ opacity:0; transform:translateY(16px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes floatSlow{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-10px) scale(1.03); }
}
@keyframes drip{
  0%, 100%{ opacity:.3; transform:translateY(0) scale(.8); }
  50%{ opacity:1; transform:translateY(2px) scale(1); }
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes shimmerSweep{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}
@keyframes softPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(255,122,61,.35); }
  50%{ box-shadow:0 0 0 6px rgba(255,122,61,0); }
}

/* ==========================================================
   MOTIVO DE FIRMA: línea de acento
   ========================================================== */
.layer-strip{
  height:3px;
  width:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2nd), var(--accent-2));
  background-size:200% auto;
  animation:shimmerSweep 6s linear infinite;
}

/* ==========================================================
   PANTALLA DE CARGA
   ========================================================== */
#loading-screen{
  position:fixed; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px;
  background:var(--bg);
  z-index:100;
  animation:fadeIn .3s ease both;
}
.spinner{
  width:48px; height:48px;
  border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--accent);
  border-right-color:var(--accent-2);
  animation:spin .9s cubic-bezier(.5,.1,.5,.9) infinite;
}
#loading-screen p{ color:var(--text-muted); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; }

/* ==========================================================
   PANTALLA DE LOGIN / REGISTRO
   ========================================================== */
#auth-screen{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  position:relative;
  overflow:hidden;
}
#auth-screen::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(620px 420px at 12% 8%, var(--accent-soft), transparent 60%),
    radial-gradient(520px 400px at 92% 92%, #4fd6e81c, transparent 60%);
  pointer-events:none;
  animation:floatSlow 10s ease-in-out infinite;
}
.auth-card{
  position:relative;
  width:100%; max-width:410px;
  background:var(--bg-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  animation:popIn .5s cubic-bezier(.2,.8,.3,1) both;
}
.auth-card-body{ padding:40px 36px 34px; }
.auth-eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
  font-weight:500;
}
.auth-card h1{
  font-family:var(--font-display);
  font-size:1.85rem;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.auth-card p.sub{ color:var(--text-muted); font-size:.92rem; margin-bottom:28px; line-height:1.5; }

.tabs{ display:flex; gap:4px; margin-bottom:24px; background:var(--bg-card); border-radius:10px; padding:4px; }
.tab-btn{
  flex:1; padding:10px; border:none; background:transparent; color:var(--text-muted);
  border-radius:7px; font-size:.85rem; font-weight:600; transition:.2s;
}
.tab-btn.active{ background:var(--accent); color:#17100a; box-shadow:0 4px 14px -4px rgba(255,122,61,.6); }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.78rem; color:var(--text-muted); margin-bottom:7px; font-weight:500; }
.field input{
  width:100%; padding:12px 13px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--text); font-size:.92rem; outline:none; transition:.2s;
}
.field input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.password-wrap{ position:relative; }
.password-wrap input{ padding-right:46px; }
.toggle-password{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:transparent;
  color:var(--text-muted); font-size:1rem; border-radius:7px;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.toggle-password:hover{ color:var(--text); background:var(--line); }

.btn-primary{
  width:100%; padding:13px; margin-top:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2nd));
  color:#1a1206; border:none; border-radius:var(--radius-sm);
  font-weight:700; font-size:.92rem; letter-spacing:.01em;
  transition:.2s; box-shadow:0 10px 24px -10px rgba(255,122,61,.55);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 30px -10px rgba(255,122,61,.65); }
.btn-primary:active{ transform:translateY(0); }
.btn-primary:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.auth-msg{ font-size:.82rem; margin-top:14px; text-align:center; min-height:1.2em; }
.auth-msg.error{ color:var(--danger); }
.auth-msg.ok{ color:var(--accent-2); }

/* ==========================================================
   APP / CATÁLOGO
   ========================================================== */

/* La cabecera se mantiene SIEMPRE oscura, en ambos temas. */
header.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 30px;
  background:rgba(13,14,18,.78);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
  gap:16px;
  box-shadow:0 1px 0 rgba(255,122,61,.15);
}

/* Bloque de contacto (izquierda) */
.topbar-contact{
  display:flex; align-items:center; gap:10px;
  flex:1;
  min-width:0;
}
.contact-icon{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:#1a1d25; border:1px solid #2a2e39; color:#9aa3b5;
  flex-shrink:0; transition:.2s;
}
.contact-icon:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 16px -8px rgba(255,122,61,.5); }
.contact-text{
  font-size:.82rem; color:#9aa3b5; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:12px;
  pointer-events:none;
}
.brand .nozzle-icon{ flex-shrink:0; filter:drop-shadow(0 2px 6px rgba(255,122,61,.35)); }
.brand .nozzle-drip{ animation:drip 1.8s ease-in-out infinite; transform-origin:center; }
.brand span{
  font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:-.01em;
  color:#f2f3f6;
  background:linear-gradient(135deg, #f2f3f6 40%, var(--accent-2nd) 120%);
  -webkit-background-clip:text; background-clip:text;
}

.topbar-actions{ display:flex; align-items:center; gap:10px; flex:1; justify-content:flex-end; }
.icon-btn{
  display:flex; align-items:center; gap:7px;
  background:#1a1d25; border:1px solid #2a2e39; color:#f2f3f6;
  padding:9px 14px; border-radius:var(--radius-sm); font-size:.82rem; font-weight:600;
  transition:.2s;
  position:relative;
}
.icon-btn:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(255,122,61,.5); }
.icon-btn.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.icon-btn.icon-only{
  padding:9px; width:40px; height:40px; justify-content:center;
}
.icon-btn.icon-only:hover{ color:var(--accent); }
.hidden-count{ display:none; }

/* Buscador */
.search-wrap{ display:flex; align-items:center; position:relative; }
.search-input{
  width:0; opacity:0; padding:0; margin-right:0;
  background:#1a1d25; border:1px solid #2a2e39; border-radius:var(--radius-sm);
  color:#f2f3f6; font-size:.85rem; height:40px;
  transition:width .25s ease, opacity .2s ease, padding .2s ease, margin .2s ease;
}
.search-input:not(.hidden){ width:210px; opacity:1; padding:0 13px; margin-right:8px; }
.search-input.hidden{ display:block; pointer-events:none; }
.search-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,61,.18); }

/* Menú de cuenta (avatar + salir) */
.account-wrap{ position:relative; }
.account-btn{
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-2nd)); border:1px solid var(--accent); color:#1a1206;
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
  display:flex; align-items:center; justify-content:center;
  transition:.2s; box-shadow:0 6px 16px -6px rgba(255,122,61,.6);
}
.account-btn:hover{ transform:translateY(-2px) scale(1.03); }
.account-menu{
  position:absolute; top:calc(100% + 12px); right:0;
  width:225px;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-2);
  overflow:hidden; z-index:30;
  animation:popIn .18s ease both;
}
.account-menu-head{ padding:15px 17px; border-bottom:1px solid var(--line); }
.account-menu-head p:first-child{
  font-size:.87rem; font-weight:700; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-menu-head p:last-child{
  font-family:var(--font-mono); font-size:.72rem; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-menu-item{
  width:100%; display:flex; align-items:center; gap:9px;
  padding:12px 17px; background:transparent; border:none;
  color:var(--danger); font-size:.85rem; font-weight:600; text-align:left;
  transition:.15s;
}
.account-menu-item:hover{ background:#ff547015; padding-left:20px; }

/* Carrito */
.btn-cart{
  padding:14px; border-radius:var(--radius-sm); border:none;
  background:linear-gradient(135deg, var(--accent), var(--accent-2nd)); color:#1a1206;
  font-weight:700; font-size:.92rem; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:.2s; box-shadow:0 10px 22px -10px rgba(255,122,61,.55);
}
.btn-cart:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(255,122,61,.65); }

.cart-card{ max-width:530px; }

.cart-header{
  display:flex; align-items:center; gap:14px;
  padding:30px 30px 0;
}
.cart-header-icon{
  width:46px; height:46px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cart-header h2{ font-family:var(--font-display); font-size:1.35rem; font-weight:700; margin-bottom:2px; }
.cart-header-sub{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); }

.cart-modal-body{ padding:22px 30px 30px; }

.cart-items{
  display:flex; flex-direction:column; gap:11px;
  margin-bottom:22px; max-height:360px; overflow-y:auto; padding-right:4px;
}

.cart-item{
  display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:12px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px;
  transition:.2s;
}
.cart-item:hover{ border-color:var(--accent); transform:translateX(2px); }
.cart-item img{ width:54px; height:54px; border-radius:9px; object-fit:cover; background:var(--bg-raised); }
.cart-item .thumb-fallback{
  width:54px; height:54px; border-radius:9px; font-size:.62rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-raised); color:var(--text-muted); font-family:var(--font-mono);
}
.cart-item-info{ min-width:0; }
.cart-item-info h4{
  font-size:.88rem; font-weight:600; margin-bottom:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cart-item-info .price{ font-family:var(--font-mono); color:var(--text-muted); font-size:.76rem; }

.cart-item-side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cart-item-subtotal{ font-family:var(--font-mono); color:var(--accent); font-weight:700; font-size:.85rem; }
.cart-item-controls{ display:flex; align-items:center; gap:6px; }
.cart-item-qty{
  display:flex; align-items:center;
  border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--bg-raised);
}
.cart-item-qty button{ background:transparent; border:none; color:var(--text); width:25px; height:25px; font-size:.85rem; }
.cart-item-qty button:hover{ color:var(--accent); }
.cart-item-qty span{ width:22px; text-align:center; font-family:var(--font-mono); font-size:.78rem; }
.cart-item-remove{
  background:none; border:none; color:var(--text-muted); font-size:.85rem;
  padding:5px; border-radius:6px; transition:.15s; line-height:1;
}
.cart-item-remove:hover{ color:var(--danger); background:#ff547015; }

.cart-total-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:18px; margin-bottom:22px; border-top:1px dashed var(--line);
}
.cart-total-row span:first-child{
  font-size:.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.09em; font-weight:700;
}
.cart-total-row span:last-child{ font-family:var(--font-mono); font-weight:700; font-size:1.4rem; color:var(--accent); }

.cart-modal-actions{ display:flex; gap:10px; }
.cart-modal-actions .btn-whatsapp{ flex:1; }

.btn-ghost{
  flex:0 0 112px;
  padding:12px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent;
  color:var(--text-muted); font-weight:600; font-size:.85rem; transition:.2s;
}
.btn-ghost:hover{ border-color:var(--danger); color:var(--danger); }

.cart-empty{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--text-muted); font-size:.85rem; text-align:center; padding:48px 0;
}
.cart-empty svg{ opacity:.3; }

main{ max-width:1200px; margin:0 auto; padding:40px 30px 84px; }

.intro-banner{
  background:var(--bg-raised);
  border:1px solid transparent;
  background-image:
    linear-gradient(var(--bg-raised), var(--bg-raised)),
    linear-gradient(120deg, var(--accent), transparent 40%, transparent 60%, var(--accent-2));
  background-origin:border-box;
  background-clip:padding-box, border-box;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:48px;
  box-shadow:var(--shadow-1);
  animation:fadeInUp .5s ease both;
}
.intro-banner-body{ padding:34px 34px; max-width:780px; margin:0 auto; text-align:center; }
.intro-eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px; font-weight:500;
}
.intro-title{
  font-family:var(--font-display); font-size:1.7rem; font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:14px; line-height:1.25;
}
.intro-text{ color:var(--text-muted); font-size:.96rem; line-height:1.7; }

.catalog-section{ margin-bottom:36px; animation:fadeInUp .5s ease both; }
.section-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.section-thumb{
  width:54px; height:54px; border-radius:12px;
  object-fit:cover; border:1px solid var(--line); flex-shrink:0;
  box-shadow:var(--shadow-1);
}
.section-title{
  font-family:var(--font-display); font-size:1.55rem; font-weight:700; letter-spacing:-.01em;
}
.section-count{ font-family:var(--font-mono); font-size:.78rem; color:var(--text-muted); white-space:nowrap; }
.section-rule{ height:1px; background:linear-gradient(90deg, var(--line), transparent); flex:1; }

.section-toggle{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-card); border:1px solid var(--line); color:var(--text);
  padding:10px 15px; border-radius:var(--radius-sm); font-size:.82rem; font-weight:600;
  white-space:nowrap; transition:.2s;
}
.section-toggle:hover{ border-color:var(--accent); transform:translateY(-1px); }
.section-toggle .chevron{ display:inline-block; transition:transform .25s; color:var(--accent); }
.section-toggle.open .chevron{ transform:rotate(180deg); }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(225px,1fr));
  gap:20px;
}
.grid.collapsed{ display:none; }

.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  position:relative;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s, box-shadow .25s;
  animation:fadeInUp .45s ease both;
}
.grid .card:nth-child(1){ animation-delay:.02s; }
.grid .card:nth-child(2){ animation-delay:.06s; }
.grid .card:nth-child(3){ animation-delay:.10s; }
.grid .card:nth-child(4){ animation-delay:.14s; }
.grid .card:nth-child(5){ animation-delay:.18s; }
.grid .card:nth-child(6){ animation-delay:.22s; }
.grid .card:nth-child(n+7){ animation-delay:.24s; }

.card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:var(--shadow-glow); }
.card .thumb{
  width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--bg-raised);
  display:block; transition:transform .4s ease;
}
.card:hover .thumb{ transform:scale(1.05); }
.card .thumb-fallback{
  width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--bg-raised); color:var(--text-muted); font-family:var(--font-mono); font-size:.75rem;
}
.card .card-body{ padding:15px 15px 17px; }
.card h3{ font-size:.96rem; font-weight:600; margin-bottom:7px; line-height:1.35; }
.card .price{ font-family:var(--font-mono); color:var(--accent); font-weight:700; font-size:.96rem; }
.card .fav-mark{
  position:absolute; top:11px; right:11px;
  width:32px; height:32px; border-radius:50%;
  background:#000000b0; backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; opacity:0; transition:.2s;
}
.card.is-fav .fav-mark{ opacity:1; color:var(--accent); animation:softPulse 1.6s ease-out; }

.card .photo-count{
  position:absolute; top:11px; left:11px;
  background:#000000b0; backdrop-filter:blur(4px); color:#fff; font-family:var(--font-mono);
  font-size:.68rem; padding:4px 9px; border-radius:20px;
}

.empty-state{
  color:var(--text-muted); font-size:.85rem; padding:22px 0; font-family:var(--font-mono);
}

/* ==========================================================
   MODAL DE PRODUCTO
   ========================================================== */
.modal{
  position:fixed; inset:0; z-index:50;
  background:rgba(8,8,11,.72);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:fadeIn .2s ease both;
}
.modal-card{
  width:100%; max-width:530px; max-height:90vh; overflow-y:auto;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  animation:popIn .3s cubic-bezier(.2,.8,.3,1) both;
}
.modal-close{
  position:absolute; top:15px; right:15px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:#000000b0; backdrop-filter:blur(4px); border:none; color:#fff; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.modal-close:hover{ background:var(--accent); color:#1a1206; transform:rotate(90deg); }
.modal-img-wrap{ position:relative; }
.modal-img-wrap img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--bg-card); }

.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:none;
  background:#000000b0; backdrop-filter:blur(4px); color:#fff; font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.gallery-nav:hover{ background:var(--accent); color:#1a1206; }
.gallery-nav.prev{ left:13px; }
.gallery-nav.next{ right:13px; }
.gallery-nav.hidden{ display:none; }

.gallery-dots{
  position:absolute; bottom:11px; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.gallery-dots .dot-btn{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background:#ffffff70; transition:.2s;
}
.gallery-dots .dot-btn.active{ background:var(--accent); width:20px; border-radius:4px; }
.modal-body{ padding:28px 30px 30px; }
.modal-body h2{ font-family:var(--font-display); font-size:1.45rem; font-weight:700; letter-spacing:-.01em; margin-bottom:9px; }
.modal-price{ font-family:var(--font-mono); color:var(--accent); font-size:1.2rem; font-weight:700; margin-bottom:18px; }
.modal-desc{ color:var(--text-muted); font-size:.93rem; line-height:1.6; margin-bottom:24px; }

.qty-row{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.qty-row label{ font-size:.82rem; color:var(--text-muted); font-weight:500; }
.qty-control{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.qty-control button{ background:var(--bg-card); border:none; color:var(--text); width:36px; height:36px; font-size:1rem; transition:.15s; }
.qty-control button:hover{ background:var(--accent-soft); color:var(--accent); }
.qty-control input{ width:48px; text-align:center; background:var(--bg-card); border:none; color:var(--text); font-family:var(--font-mono); }

.modal-actions{ display:flex; flex-direction:column; gap:10px; }
.btn-fav{
  padding:13px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg-card); color:var(--text);
  font-weight:600; font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:.2s;
}
.btn-fav:hover{ border-color:var(--accent); }
.btn-fav.is-fav{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.btn-whatsapp{
  padding:14px; border-radius:var(--radius-sm); border:none; background:#25D366; color:#0a1f10;
  font-weight:700; font-size:.92rem; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:.2s; box-shadow:0 10px 22px -10px rgba(37,211,102,.5);
}
.btn-whatsapp:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(37,211,102,.6); }

/* ==========================================================
   TOAST
   ========================================================== */
#toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(24px);
  background:var(--bg-raised); border:1px solid var(--accent); color:var(--text);
  padding:13px 22px; border-radius:10px; font-size:.85rem; font-weight:500;
  box-shadow:var(--shadow-2);
  opacity:0; pointer-events:none; transition:.3s cubic-bezier(.2,.8,.3,1); z-index:80;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{
  margin-top:24px;
  border-top:1px solid var(--line);
}
.footer-body{
  max-width:1200px; margin:0 auto;
  padding:40px 30px 46px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
}
.footer-social{ display:flex; align-items:center; gap:12px; }
.social-btn{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-card); border:1px solid var(--line); color:var(--text);
  padding:10px 18px; border-radius:24px; font-size:.85rem; font-weight:600;
  text-decoration:none; transition:.2s;
}
.social-btn:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(255,122,61,.4); }

.footer-copy{ color:var(--text-muted); font-size:.82rem; }
.footer-credit{ color:var(--text-muted); font-size:.8rem; }
.footer-credit a{ color:var(--accent-2); text-decoration:none; font-weight:500; }
.footer-credit a:hover{ text-decoration:underline; }

/* ==========================================================
   BOTÓN MODO OSCURO / CLARO
   ========================================================== */
.theme-toggle{
  position:fixed; left:22px; bottom:22px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--line); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-2);
  transition:.25s;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-3px) rotate(12deg); box-shadow:var(--shadow-glow); }
.theme-toggle:active{ transform:scale(.94); }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:760px){
  .contact-text{ display:none; }
}

/* Cabecera en móvil: pasa a 2 filas (contacto+cuenta arriba, título
   centrado abajo) para que nada se pise, sin tocar el resto del diseño. */
@media (max-width:640px){
  header.topbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "contact actions"
      "brand   brand";
    align-items:center;
    row-gap:10px;
    padding:12px 16px;
  }
  .topbar-contact{ grid-area:contact; justify-self:start; flex:0 1 auto; }
  .topbar-actions{ grid-area:actions; justify-self:end; flex:0 1 auto; }
  .brand{
    grid-area:brand;
    position:static;
    transform:none;
    width:100%;
    justify-content:center;
    pointer-events:auto;
  }
  .brand span{ font-size:1.25rem; }
}

@media (max-width:600px){
  header.topbar{ padding:12px 14px; }
  main{ padding:28px 18px 64px; }
  .icon-btn span.label{ display:none; }
  .section-toggle span.label{ display:none; }
  .grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:13px; }
  .account-menu{ right:-8px; }
  .theme-toggle{ left:16px; bottom:16px; width:44px; height:44px; }
}

/* Pantallas muy angostas: icones un poco más chicos para que las dos
   filas quepan sin apretarse. */
@media (max-width:380px){
  .topbar-contact{ gap:6px; }
  .topbar-actions{ gap:6px; }
  .contact-icon{ width:32px; height:32px; }
  .icon-btn.icon-only{ width:34px; height:34px; }
  .account-btn{ width:34px; height:34px; font-size:.82rem; }
  .brand span{ font-size:1.1rem; }
  .brand .nozzle-icon{ width:15px; height:22px; }
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Foco visible para accesibilidad */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--accent-2); outline-offset:2px;
}

.brand-title {
  display: inline-flex;
  align-items: baseline;
}

.brand-part {
  position: relative;
  display: inline-block;
}

.brand-marin {
  color: var(--accent); /* opcional: si quieres "Marin" en naranja como el logo, si no, quita esta línea */
}

.wave-underline {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: auto;
  color: var(--text-color, #fff);
  pointer-events: none;
}