:root {
  /* Acento de marca (verde neón del logo) */
  --accent: #39ff88;
  --accent-strong: #24e070;
  --accent-contrast: #07160d;

  /* Los nombres se mantienen por compatibilidad con todo el CSS existente,
     pero ahora representan la paleta oscura: --black es el texto principal (claro),
     --bg/--bg-soft son fondos oscuros y --surface es para tarjetas "flotantes" sobre --bg-soft. */
  --black: #f3f3f3;
  --gray-dark: #bdbdc2;
  --gray: #8b8b91;
  --gray-light: #2b2b2e;
  --bg: #0b0b0c;
  --bg-soft: #161617;
  --surface: #1e1f21;
  --radius: 10px;
  --max-width: 1200px;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--black);
  background: var(--bg);
  line-height: 1.5;
}

/* Con el menú mobile a pantalla completa abierto, no tiene sentido dejar scrollear lo de atrás. */
body.nav-lock-scroll {
  overflow: hidden;
}

a, button, input, select, textarea {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  color: inherit;
}

ul, li {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

[hidden] {
  display: none !important;
}

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

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 2.5rem;
  letter-spacing: -0.02em;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent);
}

.btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px rgba(57, 255, 136, 0.15), 0 10px 24px rgba(57, 255, 136, 0.25);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--outline {
  width: 100%;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.btn--outline:hover {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0 0 4px rgba(57, 255, 136, 0.15), 0 10px 24px rgba(57, 255, 136, 0.2);
  transform: translateY(-2px);
}

.btn--outline:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 12, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-light);
}

.header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.logo {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  justify-self: start;
}

.logo span {
  color: var(--accent);
}

.nav {
  justify-self: center;
}

.nav__list {
  display: flex;
  gap: 2.2rem;
}

.nav__link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-dark);
  position: relative;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.nav__link:hover {
  color: var(--black);
}

.nav__link:hover::after {
  width: 100%;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: end;
}

.icon-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--black);
  display: flex;
  border-radius: 50%;
}

.icon-btn:hover {
  color: var(--accent);
  background: rgba(57, 255, 136, 0.1);
  transform: scale(1.08);
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

.icon-btn__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.65rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 26px;
  /* .icon-btn trae padding: 0.5rem, pero con box-sizing: border-box eso deja solo 10px
     de alto para las 3 líneas (que necesitan 16px con sus gaps) — el flex column las
     encogía a height: 0 y el botón quedaba invisible. Sin padding entran justas. */
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  /* currentColor = var(--black) heredado de .icon-btn, que en este tema oscuro es
     casi blanco (#f3f3f3) — así se cumple "líneas blancas" sin hardcodear el color. */
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburguesa -> X cuando el menú está abierto */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

.btn--small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  width: fit-content;
}

/* ---------- Carrito (widget del header) ---------- */

.cart-menu {
  position: relative;
}

.cart-preview {
  position: absolute;
  top: 100%;
  right: 0;
  width: 300px;
  padding-top: 0.8rem;
  display: none;
  z-index: 200;
}

.cart-menu:hover .cart-preview {
  display: block;
}

.cart-preview__list,
.cart-preview__footer {
  background: var(--surface);
  border: 1px solid var(--gray-light);
}

.cart-preview__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-height: 280px;
  overflow-y: auto;
  padding: 0.9rem;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cart-preview__list:empty {
  display: none;
}

.cart-preview__empty {
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1rem 0.9rem;
  color: var(--gray);
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cart-preview__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 0.6rem;
  align-items: center;
}

.cart-preview__item-image {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}

.cart-preview__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-preview__item-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  font-size: 0.85rem;
}

.cart-preview__item-info span {
  color: var(--gray);
  font-size: 0.78rem;
}

.cart-preview__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray);
  font-size: 1.1rem;
  line-height: 1;
}

.cart-preview__remove:hover {
  color: var(--accent);
  transform: scale(1.15);
}

.cart-preview__footer {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.9rem;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.cart-preview__subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Cuenta (widget del header) ---------- */

.account-menu {
  position: relative;
}

.account-preview {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 200;
}

.account-menu:hover .account-preview {
  display: flex;
}

.account-preview__greeting {
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Hero ---------- */

.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 5rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1rem;
}

.hero__title {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.hero__text {
  color: var(--gray-dark);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  max-width: 40ch;
}

.hero__slideshow {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero__slide--active {
  opacity: 1;
}

/* ---------- Categories ---------- */

.categories {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.category-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.category-card__image {
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--gray);
  font-weight: 600;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.category-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card:hover .category-card__image {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--accent);
  transform: translateY(-3px);
}

.category-card__label {
  font-weight: 600;
  text-align: center;
}

/* ---------- Products ---------- */

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.8rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.product-card__link {
  display: contents;
}

.product-card__image {
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-weight: 600;
  margin-bottom: 0.4rem;
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.product-card:hover .product-card__image img {
  transform: scale(1.06);
}

.products__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gray);
  padding: 2rem 0;
}

.product-card__name {
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.product-card:hover .product-card__name {
  color: var(--accent);
}

.product-card__price {
  color: var(--gray-dark);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

/* ---------- Benefits ---------- */

.benefits {
  background: var(--bg-soft);
  padding: 4rem 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
  border-radius: var(--radius);
}

.benefits__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.benefit {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.benefit svg {
  width: 32px;
  height: 32px;
  margin-bottom: 0.4rem;
  color: var(--accent);
}

.benefit h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

.benefit p {
  color: var(--gray);
  font-size: 0.9rem;
}

/* ---------- About ---------- */

.about {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about__location {
  font-style: normal;
}

.about__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
}

.about__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.about__address {
  margin-top: 0.8rem;
  color: var(--gray-dark);
  font-size: 0.9rem;
}

.about__map-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
}

.about__map-link:hover {
  text-decoration: underline;
}

.about__text {
  color: var(--gray-dark);
  font-size: 1.05rem;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--gray-light);
  margin-top: 3rem;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
}

.footer__brand p {
  color: var(--gray);
  font-size: 0.9rem;
  margin-top: 0.8rem;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer__col h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray);
  margin-bottom: 0.3rem;
}

.footer__col a {
  color: var(--gray-dark);
  font-size: 0.9rem;
}

.footer__col a:hover {
  color: var(--accent);
}

.footer__copy {
  text-align: center;
  color: var(--gray);
  font-size: 0.8rem;
  padding: 1.5rem;
  border-top: 1px solid var(--gray-light);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 3rem;
  }

  .hero__title {
    font-size: 2.4rem;
  }

  .categories__grid,
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .benefits__list {
    grid-template-columns: 1fr;
  }

  .about__grid {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .nav {
    display: none;
  }

  /* Doble clase a propósito: tiene que ganarle en especificidad a ".nav { display: none; }"
     de arriba sin depender del orden en que queden las reglas en la hoja de estilos.
     Pantalla completa negra sólida, pegada arriba (debajo del header) en vez de centrada
     en toda la altura. El fundido de entrada/salida lo maneja .nav--visible (ver abajo). */
  .nav.nav--overlay {
    display: flex;
    position: fixed;
    inset: 0;
    /* .nav hereda "justify-self: center" de la regla de arriba (pensada para cuando .nav es
       un item del grid del header en desktop). Ese alignment property también aplica a cajas
       con position fixed/absolute: sin este reset, "inset: 0" queda ignorado para el ancho y
       la caja se encoge al contenido y se centra en vez de cubrir todo el viewport. */
    justify-self: stretch;
    /* Por debajo del header (z-index: 100): el JS mueve este <nav> a document.body mientras
       está abierto, así que sin esto quedaría tapando al header y a su botón de cerrar. */
    z-index: 90;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6rem;
    background: var(--bg);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .nav.nav--overlay.nav--visible {
    opacity: 1;
  }

  .nav__list {
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
  }

  .nav.nav--overlay .nav__list {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav.nav--overlay.nav--visible .nav__list {
    opacity: 1;
    transform: translateY(0);
  }

  .nav__link {
    font-size: 1.6rem;
    font-weight: 700;
  }

  .nav-toggle {
    display: flex;
  }

  .header__inner {
    grid-template-columns: auto 1fr auto;
  }
}