/* ============================================================
   Lipoflack Tienda — estilos compartidos del storefront
   (tienda.php · producto.php · checkout.php · gracias.php)
   ============================================================ */
:root {
  --noir:   #0A0A0A;
  --carbon: #141414;
  --linea:  #262626;
  --hueso:  #F5F1EC;
  --ceniza: #8E8781;
  --fuego:  #FF6B1A;
  --oro:    #E8A020;
  --verde:  #2FBF71;
  --rojo:   #FF5757;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
::selection { background: rgba(255,107,26,.35); color: #fff; }
body {
  background: var(--noir);
  color: var(--hueso);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  padding-bottom: 90px; /* espacio para la barra de carrito móvil */
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 4px; }

/* ── Topbar ── */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(10,10,10,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
  padding: 14px 18px;
}
.brand { text-decoration: none; line-height: 1; }
.brand b {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: 3px;
  background: linear-gradient(135deg, var(--fuego), var(--oro));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.brand span { display: block; font-size: 9px; letter-spacing: 3.5px; color: var(--ceniza); text-transform: uppercase; margin-top: 3px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-link { font-size: 12px; color: var(--ceniza); text-decoration: none; padding: 8px 4px; }
.cartbtn {
  position: relative; background: var(--carbon); border: 1px solid var(--linea); border-radius: 12px;
  color: var(--hueso); font-size: 18px; padding: 9px 13px; cursor: pointer;
}
.cartbtn .n {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px;
  background: linear-gradient(135deg, var(--fuego), #FF8C42); border-radius: 10px;
  font-size: 11px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.cartbtn .n:empty { display: none; }

/* ── Hero de la tienda ── */
.hero { text-align: center; padding: 42px 20px 10px; position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, rgba(255,107,26,.14), transparent 70%);
}
.eyebrow { font-size: 10.5px; letter-spacing: 4px; text-transform: uppercase; color: var(--oro); font-weight: 600; }
.hero h1 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(38px, 9vw, 62px);
  letter-spacing: 2px; line-height: .95; margin: 12px 0 10px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--fuego), var(--oro));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero p { font-size: 14px; color: var(--ceniza); max-width: 430px; margin: 0 auto; line-height: 1.6; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px auto 6px; max-width: 560px; }
.trust span {
  font-size: 11px; color: var(--ceniza); border: 1px solid var(--linea); border-radius: 20px;
  padding: 7px 13px; background: rgba(20,20,20,.6); white-space: nowrap;
}
.trust b { color: var(--hueso); font-weight: 600; }

/* ── Grid del catálogo ── */
.catalogo { max-width: 1080px; margin: 0 auto; padding: 26px 16px 40px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 720px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.tile {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--carbon); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tile:hover {
  transform: translateY(-3px); border-color: rgba(232,160,32,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 4px 14px rgba(255,107,26,.08);
}

/* La firma: vitrina con resplandor ámbar detrás del producto */
.vitrina {
  position: relative; aspect-ratio: 1 / .92; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(62% 55% at 50% 64%, rgba(255,107,26,.30), rgba(232,160,32,.10) 48%, transparent 72%),
    #0F0E0D;
}
/* Foto COMPLETA, jamás recortada: 'contain' + fondo claro de estudio que se
   funde con el fondo propio de las fotos (placa clara sobre UI oscura). */
.vitrina img {
  width: 100%; height: 100%; object-fit: contain;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EFE7 100%);
  transition: transform .35s ease;
}
.tile:hover .vitrina img { transform: scale(1.045); }
.vitrina .emoji { font-size: clamp(46px, 10vw, 64px); filter: drop-shadow(0 14px 26px rgba(255,107,26,.35)); }
.flag {
  position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  border-radius: 8px; padding: 4px 9px; text-transform: uppercase;
}
.flag-promo   { background: linear-gradient(135deg, var(--fuego), #FF8C42); color: #fff; box-shadow: 0 4px 12px rgba(255,107,26,.35); }
.flag-agotado { background: rgba(10,10,10,.82); color: var(--rojo); border: 1px solid rgba(255,87,87,.5); }
.flag-low     { background: rgba(24,18,8,.82); color: var(--oro); border: 1px solid rgba(232,160,32,.5); }
.tile.agotado .vitrina { filter: grayscale(.9); opacity: .55; }

.tile-info { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tile-nombre { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tile-desc { font-size: 11.5px; color: var(--ceniza); line-height: 1.4; flex: 1; }
.tile-abajo { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; }
.precio { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .5px; line-height: 1; }
.precio small { font-size: 13px; vertical-align: top; }
.precio-lista { font-size: 11.5px; color: var(--ceniza); text-decoration: line-through; display: block; margin-bottom: 2px; }
.btn-add {
  background: linear-gradient(135deg, var(--fuego), #FF8C42); border: none; border-radius: 11px;
  color: #fff; font-size: 17px; font-weight: 700; width: 36px; height: 36px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-add:hover:not(:disabled) { transform: scale(1.08); box-shadow: 0 6px 16px rgba(255,107,26,.4); }
.btn-add:active { transform: scale(.92); }
.btn-add:disabled { background: var(--linea); color: var(--ceniza); cursor: default; }

/* Aparición escalonada de las vitrinas */
@media (prefers-reduced-motion: no-preference) {
  .tile { opacity: 0; transform: translateY(14px); animation: subir .5s ease forwards; }
  .tile:nth-child(1){animation-delay:.02s}.tile:nth-child(2){animation-delay:.06s}
  .tile:nth-child(3){animation-delay:.10s}.tile:nth-child(4){animation-delay:.14s}
  .tile:nth-child(5){animation-delay:.18s}.tile:nth-child(6){animation-delay:.22s}
  .tile:nth-child(7){animation-delay:.26s}.tile:nth-child(8){animation-delay:.30s}
  .tile:nth-child(9){animation-delay:.34s}.tile:nth-child(10){animation-delay:.38s}
  .tile:nth-child(11){animation-delay:.42s}.tile:nth-child(12){animation-delay:.46s}
  @keyframes subir { to { opacity: 1; transform: none; } }
}

/* ── Cómo funciona ── */
.pasos { max-width: 720px; margin: 8px auto 30px; padding: 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.paso { text-align: center; border: 1px solid var(--linea); border-radius: 14px; padding: 16px 10px; background: var(--carbon); }
.paso .ic { font-size: 22px; }
.paso b { display: block; font-size: 12.5px; margin-top: 7px; }
.paso span { display: block; font-size: 11px; color: var(--ceniza); margin-top: 3px; line-height: 1.4; }

/* ── Página de producto ── */
.producto-wrap { max-width: 960px; margin: 0 auto; padding: 16px; }
.volver { display: inline-block; font-size: 12.5px; color: var(--ceniza); text-decoration: none; margin: 4px 0 14px; }
.volver:hover { color: var(--oro); }
.producto-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 760px) { .producto-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
.vitrina-xl {
  position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--linea);
  aspect-ratio: 1 / .9; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(64% 58% at 50% 62%, rgba(255,107,26,.34), rgba(232,160,32,.12) 46%, transparent 72%),
    #0F0E0D;
}
.vitrina-xl img {
  width: 100%; height: 100%; object-fit: contain;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EFE7 100%);
}
.vitrina-xl .emoji { font-size: 110px; filter: drop-shadow(0 20px 40px rgba(255,107,26,.4)); }
.p-tagline { font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--oro); font-weight: 600; }
.p-nombre { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(30px, 6vw, 42px); letter-spacing: 1px; line-height: 1; margin: 8px 0 4px; }
.p-present { font-size: 13px; color: var(--ceniza); }
.p-precio { margin: 16px 0 4px; }
.p-precio .ahora { font-family: 'Bebas Neue', sans-serif; font-size: 42px; letter-spacing: 1px; line-height: 1; }
.p-precio .antes { font-size: 14px; color: var(--ceniza); text-decoration: line-through; margin-left: 10px; }
.p-stock { font-size: 12px; margin: 4px 0 14px; }
.p-stock.ok { color: var(--verde); }
.p-stock.low { color: var(--oro); }
.p-stock.out { color: var(--rojo); }
.compra-row { display: flex; gap: 10px; align-items: stretch; margin: 6px 0 10px; }
.qty { display: flex; align-items: center; border: 1.5px solid var(--linea); border-radius: 12px; background: var(--carbon); }
.qty button { background: none; border: none; color: var(--hueso); font-size: 18px; width: 40px; height: 48px; cursor: pointer; }
.qty span { min-width: 26px; text-align: center; font-weight: 700; font-size: 15px; }
.btn-fuego {
  flex: 1; background: linear-gradient(135deg, var(--fuego), #FF8C42); color: #fff; border: none; border-radius: 12px;
  font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: 1.5px; padding: 13px 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-fuego:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255,107,26,.38); }
.btn-fuego:active:not(:disabled) { transform: translateY(0) scale(.98); }
.btn-fuego:disabled { background: var(--linea); color: var(--ceniza); cursor: default; }
.btn-oro-borde {
  width: 100%; background: none; border: 1.5px solid rgba(232,160,32,.55); color: var(--oro); border-radius: 12px;
  font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 1.5px; padding: 12px 18px; cursor: pointer; margin-top: 2px;
}
/* Galería de fotos del producto (miniaturas + flechas + transición) */
.gal-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gal-thumbs button { width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid var(--linea); background: #0F0E0D; cursor: pointer; padding: 0; flex-shrink: 0;
  transition: border-color .2s; }
.gal-thumbs button.on { border-color: var(--fuego); }
.gal-thumbs button:hover { border-color: rgba(232,160,32,.6); }
.gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrina-xl img { transition: opacity .22s ease; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,10,.55);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
  transition: background .2s; }
.gal-nav:hover { background: rgba(232,89,12,.75); }
.gal-prev { left: 10px; }
.gal-next { right: 10px; }

.bloque { border-top: 1px solid var(--linea); margin-top: 22px; padding-top: 18px; }
.bloque h3 { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--oro); font-weight: 700; margin-bottom: 10px; }
.check-list { list-style: none; }
.check-list li { font-size: 13.5px; line-height: 1.5; padding: 4px 0 4px 26px; position: relative; color: var(--hueso); }
.check-list li::before { content: '✓'; position: absolute; left: 2px; color: var(--fuego); font-weight: 700; }
.bloque p { font-size: 13px; color: var(--ceniza); line-height: 1.65; }
.relacionados { max-width: 960px; margin: 26px auto 0; padding: 0 16px; }
.relacionados h2 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 1.5px; margin-bottom: 12px; }

/* ── Drawer del carrito ── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .25s; }
.overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); z-index: 90;
  background: #111010; border-left: 1px solid var(--linea);
  transform: translateX(105%); transition: transform .3s ease;
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.drawer-head b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 20px; letter-spacing: 2px; }
.drawer-close { background: none; border: none; color: var(--ceniza); font-size: 22px; cursor: pointer; padding: 4px 8px; }
.drawer-items { flex: 1; overflow-y: auto; padding: 10px 18px; }
.d-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.d-thumb { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 60%, rgba(255,107,26,.25), transparent 75%), #0F0E0D; border: 1px solid var(--linea); }
.d-thumb img { width: 100%; height: 100%; object-fit: cover; }
.d-info { flex: 1; min-width: 0; }
.d-nombre { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-precio { font-size: 12px; color: var(--oro); margin-top: 2px; }
.d-qty { display: flex; align-items: center; gap: 2px; }
.d-qty button { background: var(--carbon); border: 1px solid var(--linea); color: var(--hueso); width: 26px; height: 26px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.d-qty span { min-width: 22px; text-align: center; font-size: 13px; font-weight: 700; }
.d-quitar { background: none; border: none; color: var(--ceniza); font-size: 15px; cursor: pointer; padding: 4px; }
.drawer-empty { text-align: center; color: var(--ceniza); font-size: 13.5px; padding: 46px 20px; line-height: 1.6; }
.drawer-foot { border-top: 1px solid var(--linea); padding: 14px 18px 18px; }
.d-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.d-total span { font-size: 12px; color: var(--ceniza); letter-spacing: 1px; text-transform: uppercase; }
.d-total b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 28px; letter-spacing: 1px; }
.d-envio { font-size: 11px; color: var(--ceniza); text-align: center; margin-top: 9px; }

/* ── Barra de carrito móvil (zona del pulgar) ── */
.cartbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, var(--fuego), #FF8C42);
  border-radius: 16px; padding: 13px 18px; color: #fff; cursor: pointer; border: none; width: calc(100% - 24px);
  box-shadow: 0 10px 30px rgba(255,107,26,.35);
}
.cartbar.visible { display: flex; }
.cartbar .izq { font-size: 12.5px; font-weight: 600; text-align: left; }
.cartbar .izq b { display: block; font-size: 15px; }
.cartbar .der { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1.5px; white-space: nowrap; }
@media (min-width: 720px) { .cartbar { left: auto; right: 24px; width: auto; min-width: 300px; } }

/* ── Checkout ── */
.checkout-wrap { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; }
.co-titulo { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 30px; letter-spacing: 1.5px; margin: 8px 0 2px; }
.co-sub { font-size: 13px; color: var(--ceniza); margin-bottom: 18px; }
.co-card { background: var(--carbon); border: 1px solid var(--linea); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.co-card h3 { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--oro); font-weight: 700; margin-bottom: 12px; }
.co-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.co-item:last-of-type { border-bottom: none; }
.co-tot { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; color: var(--ceniza); }
.co-tot.grande { color: var(--hueso); font-weight: 700; font-size: 15px; border-top: 1px dashed var(--linea); margin-top: 8px; padding-top: 12px; }
.co-tot.grande b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: 1px; }
.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 10.5px; font-weight: 700; color: var(--ceniza); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.campo input, .campo textarea {
  width: 100%; background: var(--noir); border: 1.5px solid var(--linea); border-radius: 11px;
  color: var(--hueso); font-family: 'Inter', sans-serif; font-size: 15px; padding: 12px 14px; outline: none;
}
.campo input:focus, .campo textarea:focus { border-color: var(--fuego); }
.campo textarea { height: 64px; resize: none; }
.campo .pista { font-size: 11px; color: var(--ceniza); margin-top: 5px; }
.campo.error input { border-color: var(--rojo); }
.campo .falta { display: none; font-size: 11.5px; color: var(--rojo); margin-top: 5px; }
.campo.error .falta { display: block; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aviso-error { display: none; background: rgba(255,87,87,.1); border: 1px solid rgba(255,87,87,.4); border-radius: 11px; padding: 12px; font-size: 13px; color: var(--rojo); margin-bottom: 12px; text-align: center; }
.aviso-error.visible { display: block; }
.seguro { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px; color: var(--ceniza); margin-top: 12px; }
.metodos { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.metodos span { font-size: 10.5px; color: var(--ceniza); border: 1px solid var(--linea); border-radius: 14px; padding: 4px 10px; }

/* ── Selector de método de pago (checkout) ── */
.pago-opciones { display: flex; flex-direction: column; gap: 10px; }
.pop { display: flex; gap: 12px; align-items: flex-start; background: var(--noir); border: 1.5px solid var(--linea);
  border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.pop input { margin-top: 3px; accent-color: var(--fuego); flex-shrink: 0; }
.pop.on { border-color: var(--fuego); background: rgba(255,107,26,.06); }
.pop b { font-size: 14px; display: block; }
.pop small { font-size: 12px; color: var(--ceniza); line-height: 1.5; display: block; margin-top: 3px; }

/* Cuentas para pago manual (gracias.php) */
.cuenta { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--carbon); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; text-align: left; }
.cuenta b { font-size: 13.5px; display: block; }
.cuenta span { font-size: 12px; color: var(--ceniza); display: block; margin-top: 2px; }
.cuenta .num { font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: 1px; color: var(--oro); white-space: nowrap; }

/* ── Gracias ── */
.gracias-wrap { max-width: 480px; margin: 0 auto; padding: 46px 20px; text-align: center; }
.gracias-ic { font-size: 58px; }
.gracias-t { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 34px; letter-spacing: 2px; margin: 14px 0 8px; }
.gracias-p { font-size: 14px; color: var(--ceniza); line-height: 1.7; }
.gracias-card { background: var(--carbon); border: 1px solid var(--linea); border-radius: 16px; padding: 18px; margin: 22px 0; text-align: left; }
.gracias-card li { font-size: 13px; color: var(--hueso); line-height: 1.6; margin-left: 18px; padding: 3px 0; }

/* ── Footer ── */
.pie { border-top: 1px solid var(--linea); margin-top: 30px; padding: 26px 20px 34px; text-align: center; }
.pie .marca { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 3px;
  background: linear-gradient(135deg, var(--fuego), var(--oro)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pie p { font-size: 11.5px; color: var(--ceniza); margin-top: 8px; line-height: 1.7; }
.pie a { color: var(--oro); text-decoration: none; }

/* ============================================================
   V2 — e-commerce completo (annbar, nav, hero2, testimonios,
   footer de tienda, FAB WhatsApp, contacto, quiénes somos)
   ============================================================ */

/* Barra de anuncios */
.annbar { background: linear-gradient(90deg, var(--fuego), var(--oro)); color: #1a0d02;
  font-size: 11.5px; font-weight: 700; text-align: center; padding: 8px 14px; letter-spacing: .3px; }

/* Navegación secundaria */
.subnav { display: flex; justify-content: center; gap: 4px; border-bottom: 1px solid var(--linea);
  padding: 6px 10px; overflow-x: auto; background: rgba(10,10,10,.85); }
.subnav a { font-size: 12.5px; font-weight: 600; color: var(--ceniza); text-decoration: none;
  padding: 8px 13px; border-radius: 9px; white-space: nowrap; }
.subnav a:hover { color: var(--hueso); }
.subnav a.on { color: var(--oro); background: rgba(232,160,32,.09); }

/* Hero v2: copy + producto destacado */
.hero2 { position: relative; overflow: hidden; padding: 40px 18px 34px; }
.hero2::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 38% at 82% 22%, rgba(255,107,26,.20), transparent 70%),
    radial-gradient(40% 34% at 8% 80%, rgba(232,160,32,.10), transparent 70%); }
.hero2-grid { position: relative; max-width: 1020px; margin: 0 auto; display: grid;
  grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 860px) { .hero2-grid { grid-template-columns: 1.1fr .9fr; gap: 40px; } }
.hero2 h1 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(42px, 8.5vw, 72px);
  letter-spacing: 2px; line-height: .93; margin: 12px 0 14px; }
.hero2 h1 em { font-style: normal; background: linear-gradient(135deg, var(--fuego), var(--oro));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero2 .sub { font-size: 14.5px; color: var(--ceniza); line-height: 1.65; max-width: 460px; }
.hero2-ctas { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.hero2-ctas .btn-fuego { flex: none; padding: 14px 26px; }
.btn-ghost-verde { display: inline-flex; align-items: center; gap: 8px; background: none;
  border: 1.5px solid rgba(37,211,102,.5); color: #25D366; border-radius: 12px; text-decoration: none;
  font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 1.5px; padding: 13px 20px; }
.ministats { display: flex; gap: 20px; margin-top: 26px; flex-wrap: wrap; }
.ministats div { font-size: 11.5px; color: var(--ceniza); line-height: 1.5; }
.ministats b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: 20px; letter-spacing: 1px; color: var(--hueso); }
/* Producto destacado del hero */
.destacado { position: relative; display: block; text-decoration: none; border-radius: 24px;
  border: 1px solid rgba(232,160,32,.35); overflow: hidden; background: #0F0E0D;
  transition: transform .25s ease, border-color .25s ease; }
.destacado:hover { transform: translateY(-4px); border-color: rgba(232,160,32,.7); }
.destacado .dv { aspect-ratio: 1 / .78; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 56% at 50% 60%, rgba(255,107,26,.38), rgba(232,160,32,.12) 48%, transparent 74%); }
.destacado .dv img {
  width: 100%; height: 100%; object-fit: contain;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5EFE7 100%);
  transition: transform .35s ease;
}
.destacado:hover .dv img { transform: scale(1.03); }
.destacado .dv .emoji { font-size: clamp(80px, 14vw, 120px); filter: drop-shadow(0 22px 44px rgba(255,107,26,.45)); }
.destacado .dinfo { padding: 16px 18px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.destacado .dinfo b { font-size: 15px; display: block; }
.destacado .dinfo span { font-size: 11.5px; color: var(--ceniza); display: block; margin-top: 3px; }
.destacado .dprecio { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; color: var(--oro); white-space: nowrap; }
.destacado .dtag { position: absolute; top: 14px; left: 14px; font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase; background: linear-gradient(135deg, var(--fuego), #FF8C42);
  color: #fff; border-radius: 8px; padding: 5px 11px; }

/* Franja de beneficios */
.benefits { max-width: 1020px; margin: 0 auto; padding: 8px 16px 6px; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .benefits { grid-template-columns: repeat(4, 1fr); } }
.benefit { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linea);
  border-radius: 13px; background: var(--carbon); padding: 12px 14px; }
.benefit .ic { font-size: 20px; }
.benefit b { display: block; font-size: 12px; }
.benefit span { font-size: 10.5px; color: var(--ceniza); }

/* Títulos de sección */
.sec-head { max-width: 1080px; margin: 34px auto 0; padding: 0 16px; display: flex;
  align-items: baseline; justify-content: space-between; gap: 12px; }
.sec-head h2 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(24px, 5vw, 32px); letter-spacing: 1.5px; }
.sec-head h2 em { font-style: normal; color: var(--fuego); }
.sec-head a { font-size: 12.5px; color: var(--oro); text-decoration: none; white-space: nowrap; }

/* Testimonios */
.testis { max-width: 1020px; margin: 10px auto 0; padding: 14px 16px 4px; display: grid;
  grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .testis { grid-template-columns: repeat(3, 1fr); } }
.testi { background: var(--carbon); border: 1px solid var(--linea); border-radius: 16px; padding: 18px; }
.testi .stars { color: var(--oro); font-size: 13px; letter-spacing: 2px; }
.testi p { font-size: 13px; color: var(--hueso); line-height: 1.65; margin: 10px 0 12px; }
.testi .who { font-size: 11.5px; color: var(--ceniza); }
.testi .who b { color: var(--oro); }

/* Blog teaser en la home */
.bteaser { max-width: 1020px; margin: 10px auto 0; padding: 14px 16px 4px; display: grid;
  grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .bteaser { grid-template-columns: repeat(3, 1fr); } }
.bcard { display: flex; flex-direction: column; text-decoration: none; background: var(--carbon);
  border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; transition: transform .2s, border-color .2s; }
.bcard:hover { transform: translateY(-3px); border-color: rgba(232,160,32,.45); }
.bcard .bimg { aspect-ratio: 16/9; background: radial-gradient(60% 70% at 50% 50%, rgba(255,107,26,.18), transparent 75%), #0F0E0D;
  display: flex; align-items: center; justify-content: center; font-size: 34px; overflow: hidden; }
.bcard .bimg img { width: 100%; height: 100%; object-fit: cover; }
.bcard .btxt { padding: 13px 15px 15px; }
.bcard .bfecha { font-size: 10px; color: var(--oro); letter-spacing: 1.5px; text-transform: uppercase; }
.bcard .btit { font-size: 14px; font-weight: 700; line-height: 1.35; margin-top: 5px; }
.bcard .bres { font-size: 12px; color: var(--ceniza); line-height: 1.5; margin-top: 5px; }

/* Banda CTA final */
.cta-banda { max-width: 1020px; margin: 34px auto 0; padding: 0 16px; }
.cta-banda .inner { position: relative; overflow: hidden; border-radius: 20px; text-align: center;
  border: 1px solid rgba(232,160,32,.35); padding: 34px 22px;
  background: radial-gradient(80% 120% at 50% 0%, rgba(255,107,26,.16), transparent 70%), var(--carbon); }
.cta-banda h2 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(24px, 5vw, 34px); letter-spacing: 1.5px; }
.cta-banda p { font-size: 13px; color: var(--ceniza); margin: 8px auto 18px; max-width: 420px; line-height: 1.6; }

/* Footer de tienda (columnas) */
.pie2 { border-top: 1px solid var(--linea); margin-top: 38px; padding: 30px 20px 26px; }
.pie2-grid { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 760px) { .pie2-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 30px; } }
.pie2 .marca { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 3px;
  background: linear-gradient(135deg, var(--fuego), var(--oro)); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; }
.pie2 .desc { font-size: 12px; color: var(--ceniza); line-height: 1.7; margin-top: 8px; max-width: 300px; }
.pie2 h4 { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; }
.pie2 ul { list-style: none; }
.pie2 li { padding: 4px 0; }
.pie2 li a { font-size: 13px; color: var(--ceniza); text-decoration: none; }
.pie2 li a:hover { color: var(--hueso); }
.pie2 .legal { max-width: 1020px; margin: 22px auto 0; padding-top: 16px; border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.pie2 .legal span { font-size: 11px; color: var(--ceniza); }

/* FAB WhatsApp (flota sobre la barra del carrito) */
.fab-wa { position: fixed; right: 16px; bottom: 86px; z-index: 75; width: 54px; height: 54px;
  border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.4); transition: transform .2s ease; }
.fab-wa:hover { transform: scale(1.08); }
@media (min-width: 720px) { .fab-wa { bottom: 20px; right: 20px; } }
body.hay-cartbar .fab-wa { bottom: 86px; }

/* Contacto */
.contact-grid { max-width: 860px; margin: 0 auto; padding: 18px 16px 40px; display: grid;
  grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-card { background: var(--carbon); border: 1px solid var(--linea); border-radius: 16px; padding: 20px; }
.contact-card h3 { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 21px; letter-spacing: 1.5px; margin-bottom: 6px; }
.contact-card p { font-size: 13px; color: var(--ceniza); line-height: 1.65; margin-bottom: 14px; }
.contact-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 13.5px; }
.contact-item .ic { font-size: 20px; }
.contact-item a { color: var(--oro); text-decoration: none; }
.ok-envio { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.4); color: var(--verde);
  border-radius: 11px; padding: 12px; font-size: 13px; text-align: center; margin-bottom: 12px; }

/* Quiénes somos */
.quienes { max-width: 720px; margin: 0 auto; padding: 10px 18px 30px; }
.quienes .lead { font-size: 16px; color: var(--hueso); line-height: 1.75; }
.quienes p { font-size: 14px; color: var(--ceniza); line-height: 1.8; margin-top: 14px; }
.valores { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 24px 0 6px; }
@media (min-width: 640px) { .valores { grid-template-columns: repeat(3, 1fr); } }
.valor { background: var(--carbon); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; text-align: center; }
.valor .ic { font-size: 26px; }
.valor b { display: block; font-size: 13px; margin-top: 8px; }
.valor span { display: block; font-size: 11.5px; color: var(--ceniza); margin-top: 4px; line-height: 1.5; }

/* ── Carrusel de banners (admin/banners.php) ── */
.bslider-wrap { max-width: 1080px; margin: 14px auto 0; padding: 0 12px; position: relative; }
.bslider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
  border-radius: 18px; scrollbar-width: none; -ms-overflow-style: none; }
.bslider::-webkit-scrollbar { display: none; }
.bslide { position: relative; flex: 0 0 100%; scroll-snap-align: center; border-radius: 18px;
  overflow: hidden; border: 1px solid var(--linea); aspect-ratio: 16 / 7; display: block; text-decoration: none; }
@media (min-width: 760px) { .bslide { aspect-ratio: 21 / 7; } }
.bslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 20px 16px;
  background: linear-gradient(180deg, transparent, rgba(5,4,3,.86)); }
.bcap b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(20px, 4.5vw, 30px); letter-spacing: 1.5px; color: #fff; line-height: 1; }
.bcap span { display: block; font-size: 12px; color: rgba(245,241,236,.85); margin-top: 4px; }
.bdots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.bdots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--linea);
  cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.bdots button.on { background: var(--fuego); transform: scale(1.3); }

/* Blog v2: primer artículo destacado */
.blog-list { max-width: 860px; margin: 0 auto; padding: 10px 16px 30px; }
.bfeat { display: grid; grid-template-columns: 1fr; text-decoration: none; background: var(--carbon);
  border: 1px solid rgba(232,160,32,.35); border-radius: 18px; overflow: hidden; margin-bottom: 16px;
  transition: transform .2s, border-color .2s; }
@media (min-width: 700px) { .bfeat { grid-template-columns: 1fr 1fr; } }
.bfeat:hover { transform: translateY(-3px); }
.bfeat .bimg { aspect-ratio: 16/10; }
.bfeat .btxt { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.bfeat .btit { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: 1px; line-height: 1.05; margin-top: 6px; }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }