/* ==========================================================================
   TU ZONA TECNOLÓGICA — Tema oscuro premium (Fase C)
   Se carga después de styles.css. Paleta: negro #090B0A, verde #A4F500,
   amarillo #FFD32B, blanco #FFFFFF y gris carbón #1C211D.
   ========================================================================== */

:root {
  --ink: #FFFFFF;
  --navy: #090B0A;
  --blue: #A4F500;
  --blue-dark: #8FDB00;
  --blue-soft: #20261F;
  --teal: #A4F500;
  --teal-bright: #A4F500;
  --amber: #FFD32B;
  --bg: #090B0A;
  --surface: #1C211D;
  --line: #30372F;
  --text: #FFFFFF;
  --muted: #B7C2B8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.72);
}

body {
  color: var(--text);
  background: var(--bg);
}

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #090B0A;
}

::selection {
  background: var(--blue);
  color: #090B0A;
}

.skip-link {
  background: var(--blue);
  color: #090B0A;
}

/* ---------- Barra de demostración ---------- */

.demo-bar {
  background: #030504;
  color: #E6ECE4;
  border-bottom: 1px solid #222922;
}

.demo-bar__tag {
  background: var(--amber);
  color: #090B0A;
}

/* ---------- Encabezado ---------- */

.site-header {
  background: rgba(9, 11, 10, 0.93);
  border-bottom: 1px solid var(--line);
}

.brand__name {
  color: #FFFFFF;
}

.brand__slogan {
  color: #A9B4AA;
}

.nav a {
  color: #E6ECE4;
}

.nav a:hover {
  background: #1C211D;
  color: var(--blue);
}

.cart-button {
  border-color: #3A453C;
  background: #1C211D;
  color: #FFFFFF;
}

.cart-button:hover {
  border-color: var(--blue);
  background: #232A25;
}

.cart-button.has-items {
  border-color: rgba(164, 245, 0, 0.55);
  box-shadow: 0 4px 18px rgba(164, 245, 0, 0.14);
}

.cart-button__icon {
  color: var(--blue);
}

.cart-button__count {
  background: var(--blue);
  color: #090B0A;
}

/* ---------- Botones ---------- */

.btn--primary {
  background: var(--blue);
  color: #090B0A;
  box-shadow: 0 8px 24px rgba(164, 245, 0, 0.18);
}

.btn--primary:hover {
  background: #B4FF1F;
}

.btn--light {
  background: var(--blue);
  color: #090B0A;
  box-shadow: 0 10px 26px rgba(164, 245, 0, 0.16);
}

.btn--light:hover {
  background: #B4FF1F;
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

.btn--ghost:hover {
  border-color: var(--blue);
  background: rgba(164, 245, 0, 0.1);
  color: var(--blue);
}

.btn--outline {
  border-color: #3A453C;
  background: #232A25;
  color: var(--blue);
}

.btn--outline:hover {
  border-color: var(--blue);
  background: #2A332A;
}

.btn--link {
  color: var(--blue);
}

.btn--link:hover {
  color: #B4FF1F;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
}

/* WhatsApp: fondo negro, texto amarillo e icono verde. */

.btn--whatsapp {
  border-color: rgba(255, 211, 43, 0.55);
  background: #090B0A;
  color: var(--amber);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.btn--whatsapp:hover {
  border-color: var(--amber);
  background: #141814;
  color: var(--amber);
}

.btn--whatsapp[aria-disabled="true"] {
  border-color: #3A453C;
  background: #1C211D;
  color: #8D998E;
}

.wa-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  color: #25D366;
}

.wa-icon svg {
  width: 19px;
  height: 19px;
}

.btn--whatsapp[aria-disabled="true"] .wa-icon {
  color: #6E7A6F;
}

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

.hero {
  border: 1px solid #2A3129;
  background:
    radial-gradient(circle at 84% 14%, rgba(164, 245, 0, 0.18), transparent 42%),
    radial-gradient(circle at 10% 94%, rgba(255, 211, 43, 0.12), transparent 42%),
    linear-gradient(140deg, #090B0A 0%, #111611 58%, #090B0A 100%);
  box-shadow: var(--shadow-lg);
}

.hero::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

.eyebrow {
  border-color: rgba(164, 245, 0, 0.34);
  background: rgba(164, 245, 0, 0.08);
  color: #D8FFA0;
}

.eyebrow__dot {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(164, 245, 0, 0.16);
}

.hero h1 span {
  color: var(--blue);
}

.hero__lead {
  color: #C8D2C9;
}

.hero__stats {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.hero__stats dt {
  color: #A9B4AA;
}

.hero__stats dd {
  color: #FFFFFF;
}

.hero__visual img {
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.6));
}

.hero__badge {
  border-color: rgba(164, 245, 0, 0.35);
  background: rgba(9, 11, 10, 0.84);
  color: #D8FFA0;
}

/* ---------- Franja de características ---------- */

.trust__inner {
  border-color: var(--line);
  background: #141814;
  box-shadow: var(--shadow-sm);
}

.trust__icon {
  background: rgba(164, 245, 0, 0.12);
  color: var(--blue);
}

.trust__item strong {
  color: #FFFFFF;
}

.trust__item span:not(.trust__icon) {
  color: var(--muted);
}

/* ---------- Secciones ---------- */

.section__eyebrow {
  color: var(--blue);
}

.section h2 {
  color: #FFFFFF;
}

.section__lead {
  color: var(--muted);
}

/* ---------- Categorías ---------- */

.category-card {
  border-color: var(--line);
  background: #141814;
  box-shadow: var(--shadow-sm);
}

.category-card:hover {
  border-color: #4A554B;
  box-shadow: var(--shadow-md);
}

.category-card[aria-pressed="true"] {
  border-color: var(--blue);
  background: rgba(164, 245, 0, 0.12);
  box-shadow: 0 0 0 1px var(--blue) inset;
}

.category-card__icon {
  background: #232A25;
  color: var(--blue);
}

.category-card[aria-pressed="true"] .category-card__icon {
  background: var(--blue);
  color: #090B0A;
}

.category-card__name {
  color: #FFFFFF;
}

.category-card__count {
  color: var(--muted);
}

/* ---------- Franja promocional ---------- */

.promo-strip__inner {
  border: 1px solid #2A3129;
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 211, 43, 0.18), transparent 38%),
    radial-gradient(circle at 6% 92%, rgba(164, 245, 0, 0.16), transparent 42%),
    linear-gradient(120deg, #111611 0%, #090B0A 100%);
  box-shadow: var(--shadow-md);
}

.promo-strip__tag {
  border-color: rgba(255, 211, 43, 0.4);
  color: var(--amber);
}

.promo-strip p:not(.promo-strip__tag) {
  color: #C8D2C9;
}

/* ---------- Catálogo ---------- */

.results-count {
  border-color: var(--line);
  background: #141814;
  color: var(--muted);
}

.search-field__icon {
  color: var(--muted);
}

.search-field__input {
  border-color: var(--line);
  background: #141814;
  color: #FFFFFF;
}

.search-field__input::placeholder {
  color: #8D998E;
}

.search-field__input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(164, 245, 0, 0.18);
}

.search-field__clear {
  background: #232A25;
  color: #C8D2C9;
}

.search-field__clear:hover {
  background: #2E372F;
  color: var(--blue);
}

.sort-field label {
  color: var(--muted);
}

.sort-field select {
  border-color: var(--line);
  background-color: #141814;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4F500' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #FFFFFF;
}

.chip {
  border-color: var(--line);
  background: #141814;
  color: #E6ECE4;
}

.chip:hover {
  border-color: #4A554B;
  background: #232A25;
}

.chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: #090B0A;
}

.chip__count {
  background: rgba(164, 245, 0, 0.14);
  color: var(--blue);
}

.chip[aria-pressed="true"] .chip__count {
  background: rgba(9, 11, 10, 0.2);
  color: #090B0A;
}

/* ---------- Tarjetas de producto ---------- */

.product-card {
  border-color: var(--line);
  background: #1C211D;
  box-shadow: var(--shadow-sm);
}

.product-card:hover {
  border-color: #4A554B;
  box-shadow: var(--shadow-md);
}

.product-card__media {
  background: #0F120F;
}

.demo-badge {
  border-color: rgba(255, 211, 43, 0.4);
  background: rgba(9, 11, 10, 0.84);
  color: var(--amber);
}

.product-card__photo-count {
  background: rgba(9, 11, 10, 0.82);
  color: #E6ECE4;
}

.badge--disponible {
  background: var(--blue);
  color: #090B0A;
}

.badge--disponible::before {
  background: #090B0A;
}

.badge--agotado {
  background: #3A423B;
  color: #FFFFFF;
}

.badge--bajo-pedido {
  background: var(--amber);
  color: #090B0A;
}

.badge--nuevo {
  border: 1px solid rgba(164, 245, 0, 0.5);
  background: #090B0A;
  color: var(--blue);
}

.badge--oferta {
  background: var(--amber);
  color: #090B0A;
}

.badge--destacado {
  background: #FFFFFF;
  color: #090B0A;
}

.product-card__cat {
  color: var(--blue);
}

.product-card h3 {
  color: #FFFFFF;
}

.product-card__desc {
  color: var(--muted);
}

.product-card__variants {
  color: #A9B4AA;
}

.product-card__variants strong {
  color: #E6ECE4;
}

.product-card__promo {
  border-color: rgba(255, 211, 43, 0.4);
  background: rgba(255, 211, 43, 0.08);
  color: #FFE58A;
}

.product-card__stock {
  color: var(--amber);
}

.product-card__footer {
  border-top-color: var(--line);
}

.price {
  color: var(--amber);
}

.price-old {
  color: #9AA69B;
}

.price-discount {
  background: var(--amber);
  color: #090B0A;
}

.price-note {
  color: var(--muted);
}

.product-card__availability {
  color: var(--muted);
}

.btn-card-add {
  border-color: var(--blue);
  background: var(--blue);
  color: #090B0A;
}

.btn-card-add:hover {
  border-color: #B4FF1F;
  background: #B4FF1F;
}

.btn-card-add:disabled {
  border-color: #30372F;
  background: #2A312A;
  color: #8D998E;
}

.btn-detail {
  border-color: #3A453C;
  background: #232A25;
  color: var(--blue);
}

.btn-detail:hover {
  border-color: var(--blue);
  background: #2A332A;
  color: var(--blue);
}

/* ---------- Detalle de producto ---------- */

.product-dialog {
  background: #141814;
  color: #FFFFFF;
}

.product-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.product-dialog__media {
  background: #0F120F;
}

.product-dialog__thumb {
  border-color: rgba(255, 255, 255, 0.4);
  background: #1C211D;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.product-dialog__thumb.is-active {
  border-color: var(--blue);
  outline-color: #090B0A;
}

.product-dialog__close {
  border-color: #3A453C;
  background: rgba(28, 33, 29, 0.96);
  color: #FFFFFF;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.product-dialog__close:hover {
  background: #232A25;
  color: var(--blue);
}

.product-dialog__cat {
  color: var(--blue);
}

.product-dialog h2 {
  color: #FFFFFF;
}

.product-dialog__desc {
  color: var(--muted);
}

.product-dialog__price-row {
  border-color: var(--line);
}

.product-dialog__price {
  color: var(--amber);
}

.product-dialog__promo,
.product-dialog__notice {
  border-color: rgba(255, 211, 43, 0.4);
  background: rgba(255, 211, 43, 0.08);
  color: #FFE58A;
}

.product-dialog__facts dt {
  color: var(--muted);
}

.product-dialog__facts dd {
  color: #FFFFFF;
}

.product-dialog__variant-wrap label {
  color: var(--muted);
}

.product-dialog__variant-wrap select {
  border-color: var(--line);
  background-color: #1C211D;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4F500' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #FFFFFF;
}

/* ---------- Carrito ---------- */

.cart-dialog {
  background: #141814;
  color: #FFFFFF;
}

.cart-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.cart-dialog__head {
  border-bottom-color: var(--line);
}

.cart-dialog__eyebrow {
  color: var(--blue);
}

.cart-dialog h2 {
  color: #FFFFFF;
}

.cart-dialog__description {
  color: var(--muted);
}

.cart-dialog__close {
  border-color: #3A453C;
  background: #232A25;
  color: #FFFFFF;
}

.cart-dialog__close:hover {
  border-color: var(--blue);
  background: #2A332A;
  color: var(--blue);
}

.cart-persistence {
  border-color: rgba(255, 211, 43, 0.4);
  background: rgba(255, 211, 43, 0.08);
  color: #FFE58A;
}

.cart-empty__icon {
  background: rgba(164, 245, 0, 0.12);
  color: var(--blue);
}

.cart-empty h3 {
  color: #FFFFFF;
}

.cart-empty p {
  color: var(--muted);
}

.cart-item {
  border-bottom-color: var(--line);
}

.cart-item__media {
  background: #0F120F;
}

.cart-item__demo {
  background: rgba(9, 11, 10, 0.82);
  color: var(--amber);
}

.cart-item h3 {
  color: #FFFFFF;
}

.cart-item__meta {
  color: var(--muted);
}

.cart-item__remove {
  border-color: #3A453C;
  background: #232A25;
  color: #FF9B9B;
}

.cart-item__remove:hover {
  border-color: #FF9B9B;
  background: rgba(255, 90, 90, 0.14);
  color: #FFC2C2;
}

.cart-qty {
  border-color: var(--line);
  background: #1C211D;
}

.cart-qty__button {
  background: #232A25;
  color: var(--blue);
}

.cart-qty__button:hover:not(:disabled) {
  background: #2A332A;
}

.cart-qty__button:disabled {
  background: #20261F;
  color: #6E7A6F;
}

.cart-qty__value {
  color: #FFFFFF;
}

.cart-item__label {
  color: var(--muted);
}

.cart-item__select {
  border-color: var(--line);
  background-color: #1C211D;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4F500' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: #FFFFFF;
}

.cart-item__single {
  color: var(--muted);
}

.cart-item__price {
  color: var(--muted);
}

.cart-item__subtotal {
  color: var(--amber);
}

.cart-item__note {
  border-color: rgba(255, 211, 43, 0.4);
  background: rgba(255, 211, 43, 0.08);
  color: #FFE58A;
}

.cart-item--issue .cart-item__note {
  border-color: rgba(255, 120, 120, 0.5);
  background: rgba(255, 90, 90, 0.1);
  color: #FFC2C2;
}

.cart-summary {
  border-top-color: var(--line);
  background: #101410;
}

.cart-summary__row {
  color: var(--muted);
}

.cart-summary__row strong {
  color: #FFFFFF;
}

.cart-summary__row--total {
  border-top-color: var(--line);
}

.cart-summary__row--total strong {
  color: var(--amber);
}

.cart-summary__note {
  color: var(--muted);
}

.cart-issues {
  border-color: rgba(255, 120, 120, 0.5);
  background: rgba(255, 90, 90, 0.1);
  color: #FFC2C2;
}

.cart-checkout-note {
  color: var(--muted);
}

.cart-checkout[aria-disabled="true"] {
  border-color: #3A453C;
  background: #1C211D;
  color: #8D998E;
}

.cart-copy {
  border-color: #3A453C;
  background: #232A25;
  color: var(--blue);
}

.cart-copy-box label {
  color: var(--muted);
}

.cart-copy-box textarea {
  border-color: var(--line);
  background: #101410;
  color: #FFFFFF;
}

.cart-demo-note {
  color: #9AA69B;
}

/* ---------- Aviso flotante ---------- */

.toast {
  background: var(--blue);
  color: #090B0A;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.toast__action {
  border-color: rgba(9, 11, 10, 0.35);
  background: rgba(9, 11, 10, 0.12);
  color: #090B0A;
}

.toast__action:hover {
  background: rgba(9, 11, 10, 0.2);
}

/* ---------- Estados vacío / error ---------- */

.empty-state {
  border-color: #3A453C;
  background: #141814;
}

.empty-state h3 {
  color: #FFFFFF;
}

.empty-state p {
  color: var(--muted);
}

.app-error {
  border-color: rgba(255, 120, 120, 0.5);
  background: rgba(255, 90, 90, 0.1);
  color: #FFC2C2;
}

.noscript-note {
  border-color: rgba(255, 211, 43, 0.4);
  background: rgba(255, 211, 43, 0.08);
  color: #FFE58A;
}

/* ---------- Pie de página ---------- */

.footer {
  background:
    radial-gradient(circle at 8% 0%, rgba(164, 245, 0, 0.14), transparent 34%),
    #090B0A;
  color: #C3CDC4;
}

.footer__logo {
  color: #FFFFFF;
}

.footer__slogan {
  color: #E9F0E9;
}

.footer__note {
  color: #9AA69B;
}

.footer__col h3 {
  color: #FFFFFF;
}

.footer__links button {
  color: #C3CDC4;
}

.footer__links button:hover {
  color: var(--blue);
}

.footer__contact span {
  color: #9AA69B;
}

.footer__contact strong {
  color: #E9F0E9;
}

.footer__small {
  color: #9AA69B;
}

.footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #97A398;
}

/* ---------- Ajustes de marca en pantallas muy estrechas ---------- */

@media (max-width: 380px) {
  .header__inner {
    gap: 8px 12px;
  }

  .brand {
    gap: 8px;
  }

  .brand__logo {
    width: 40px;
    height: 40px;
  }

  .brand__name {
    font-size: 12.5px;
    letter-spacing: 0.02em;
  }
}

/* ---------- Impresión ---------- */

@media print {
  body {
    background: #FFFFFF;
  }

  .footer {
    background: #FFFFFF;
    color: #090B0A;
  }
}