/* =========================================================
   TechStore — estilo gamer RGB para el resto de páginas
   (catálogo, detalle, carrito, pago, pedidos, favoritos,
   páginas informativas, iniciar sesión y registro).

   Solo cambia la apariencia. Se carga al final de cada página,
   así que manda sobre los estilos viejos. Para volver al aspecto
   anterior de una página basta con quitar la línea que lo carga.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800;1,900&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --negro: #050508;
  --negro-2: #0a0a10;
  --panel: #0e0e16;
  --panel-2: #14141e;
  --linea: rgba(255, 255, 255, 0.08);
  --linea-2: rgba(255, 255, 255, 0.16);
  --texto: #f5f5fa;
  --texto-2: #a9a9bd;
  --texto-3: #6c6c82;
  --magenta: #ff2bd6;
  --violeta: #8b5cff;
  --cian: #00e5ff;
  --verde: #39ff88;
  --rojo: #ff4d6d;
  --ambar: #ffb000;
  --rgb: linear-gradient(90deg, #ff2bd6, #8b5cff, #00e5ff, #39ff88, #ffb000, #ff2bd6);
  --chaflan: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  --chaflan-chico: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --rapido: cubic-bezier(0.2, 0.8, 0.2, 1);
  --golpe: cubic-bezier(0.16, 1, 0.3, 1);
  --titulo: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --letra: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

@keyframes gp-correr { to { background-position: 200% 0; } }
@keyframes gp-entrar { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes gp-avanzar { to { background-position: 0 56px; } }

body {
  font-family: var(--letra);
  background-color: var(--negro);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

/* ===================== Piezas comunes ===================== */

/* Paneles oscuros con esquinas cortadas */
.product-card,
.producto-card,
.imagen-principal,
.info-producto,
.cart-item,
.cart-total,
.checkout-form,
.order-summary,
.confirmation-container,
.pedido-card,
.producto-item,
.custom-alert,
.info-card,
.stat-box,
.contact-card,
.contact-form-wrapper,
.feature-item,
.faq-item,
.coverage-item,
.price-card,
.carrier-item,
.tracking-item,
.contact-item,
.legal-content,
.empty-state,
.login-card,
.register-card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel) 70%) !important;
  border: 1px solid var(--linea-2) !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.18) !important;
  color: var(--texto);
}

/* Títulos grandes de cada página */
.products-header h1,
.info-producto h1,
.cart-container > h1,
.checkout-container > h1,
.pedidos-container h1,
.favoritos-header h1,
.detalle-container h1,
.confirmation-container h1,
.page-hero .hero-title {
  font-family: var(--titulo) !important;
  font-style: italic;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92 !important;
  color: var(--texto);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.products-header h1,
.cart-container > h1,
.checkout-container > h1,
.pedidos-container h1,
.favoritos-header h1,
.detalle-container h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem) !important;
  margin-bottom: 0.4em;
}

.products-header h1::after,
.cart-container > h1::after,
.checkout-container > h1::after,
.pedidos-container h1::after,
.favoritos-header h1::after,
.detalle-container h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 14px;
  background: var(--rgb);
  background-size: 200% 100%;
  animation: gp-correr 4s linear infinite;
  box-shadow: 0 0 12px rgba(255, 43, 214, 0.5);
}

/* Subtítulos y textos de sección */
h2, h3, h4 { font-family: var(--titulo); letter-spacing: 0.01em; }

.section-header h2,
.content-text h2,
.legal-content h2,
.faq-footer h3,
.cta-section h2,
.especificaciones h3,
.cart-total h2,
.order-summary h2,
.order-summary h3,
.checkout-form h2,
.checkout-form h3,
.payment-header h3 {
  font-family: var(--titulo) !important;
  font-style: italic;
  font-weight: 800 !important;
  text-transform: uppercase;
  color: var(--texto) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Precios en azul neón */
.product-price,
.producto-precio,
.precio,
.price-card .price,
.summary-total,
.summary-total span,
#totalPrice {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  color: var(--cian) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 0 16px rgba(0, 229, 255, 0.4);
  letter-spacing: -0.01em;
}

/* Etiquetas de categoría */
.product-category,
.producto-categoria,
.categoria-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 0.74rem var(--mono) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.product-category::before,
.producto-categoria::before,
.categoria-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
}

/* ===================== Botones ===================== */

/* Botón principal: relleno RGB que corre */
.btn-agregar,
.btn-checkout,
.btn-cart,
.custom-alert-btn,
.login-card .btn-primary,
.register-card .btn-primary,
.favoritos-container .btn-primary,
.products-container .btn-primary,
.confirmation-container .btn-primary,
.btn-large,
.btn-chat {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
  background: var(--rgb) !important;
  background-size: 200% 100% !important;
  animation: gp-correr 4s linear infinite;
  color: #050508 !important;
  font: italic 800 1.05rem/1 var(--titulo) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 0.25s var(--rapido), filter 0.25s !important;
}

.btn-agregar:hover:not(:disabled),
.btn-checkout:hover,
.btn-cart:hover,
.custom-alert-btn:hover,
.login-card .btn-primary:hover,
.register-card .btn-primary:hover,
.favoritos-container .btn-primary:hover,
.products-container .btn-primary:hover,
.confirmation-container .btn-primary:hover,
.btn-large:hover,
.btn-chat:hover {
  transform: translateY(-2px) !important;
  filter: drop-shadow(0 0 18px rgba(255, 43, 214, 0.55));
}

.btn-agregar:active,
.btn-checkout:active,
.btn-cart:active,
.login-card .btn-primary:active,
.register-card .btn-primary:active { transform: scale(0.97) !important; }

.btn-agregar:disabled {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--texto-3) !important;
  animation: none;
  cursor: not-allowed;
}

/* Botones secundarios: contorno que se enciende en cian */
.btn-details,
.btn-volver,
.btn-back,
.btn-ver-detalle,
.btn-copy,
.btn-link,
.cantidad-selector button,
.faq-tab,
.wishlist-container .btn,
.favoritos-container .btn:not(.btn-primary):not(.btn-danger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--linea-2) !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
  color: var(--texto) !important;
  font: italic 800 0.98rem/1 var(--titulo) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none !important;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--rapido) !important;
}

.btn-details:hover,
.btn-volver:hover,
.btn-back:hover,
.btn-ver-detalle:hover,
.btn-copy:hover,
.btn-link:hover,
.cantidad-selector button:hover,
.faq-tab:hover {
  color: var(--cian) !important;
  border-color: var(--cian) !important;
  background: rgba(0, 229, 255, 0.08) !important;
  transform: translateY(-1px) !important;
}

.faq-tab.active {
  color: #050508 !important;
  background: var(--cian) !important;
  border-color: var(--cian) !important;
}

/* Botón de peligro (quitar de favoritos, eliminar) */
.btn-danger {
  background: rgba(255, 77, 109, 0.1) !important;
  border: 1px solid rgba(255, 77, 109, 0.5) !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
  color: var(--rojo) !important;
  font: italic 800 0.98rem/1 var(--titulo) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s !important;
}

.btn-danger:hover {
  background: var(--rojo) !important;
  color: #050508 !important;
  transform: none !important;
}

/* ===================== Campos de formulario ===================== */
.form-group input,
.form-group select,
.form-group textarea,
.contact-form input,
.contact-form select,
.contact-form textarea,
.tracking-input,
.cantidad-selector input {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid var(--linea-2) !important;
  border-radius: 0 !important;
  color: var(--texto) !important;
  font-family: var(--letra) !important;
  font-size: 1rem !important;
  clip-path: var(--chaflan-chico);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s !important;
}

.form-group input::placeholder,
.contact-form textarea::placeholder,
.contact-form input::placeholder,
.tracking-input::placeholder { color: var(--texto-3) !important; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.tracking-input:focus {
  outline: none !important;
  border-color: var(--cian) !important;
  background: rgba(0, 229, 255, 0.05) !important;
  box-shadow: inset 0 0 0 1px var(--cian), 0 0 0 0 transparent !important;
}

.form-group select option { background: var(--panel); color: var(--texto); }

.form-group label,
.contact-form label {
  font: 500 0.74rem var(--mono) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-2) !important;
}

/* Avisos */
.alert-error,
.alerta-error {
  background: rgba(255, 77, 109, 0.08) !important;
  border: 0 !important;
  border-left: 3px solid var(--rojo) !important;
  border-radius: 0 !important;
  color: #ffc2cd !important;
}

.alert-success {
  background: rgba(57, 255, 136, 0.08) !important;
  border: 0 !important;
  border-left: 3px solid var(--verde) !important;
  border-radius: 0 !important;
  color: #c8ffdd !important;
}

.alert-info,
.privacy-notice,
.note,
.info-box.warning {
  background: rgba(0, 229, 255, 0.06) !important;
  border: 0 !important;
  border-left: 3px solid var(--cian) !important;
  border-radius: 0 !important;
  color: var(--texto-2) !important;
}

.info-box.warning {
  background: rgba(255, 176, 0, 0.07) !important;
  border-left-color: var(--ambar) !important;
}

/* Colores viejos escritos directamente en algunas páginas */
[style*="color: #667eea"],
[style*="color:#667eea"],
[style*="color: #a78bfa"] { color: var(--cian) !important; }

[style*="linear-gradient(135deg, #667eea"] {
  background: var(--rgb) !important;
  background-size: 200% 100% !important;
  color: #050508 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
  font-family: var(--titulo) !important;
  font-style: italic;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Ventana de aviso (producto agregado, etc.) */
.custom-alert-overlay {
  background: rgba(3, 3, 6, 0.8) !important;
  backdrop-filter: blur(6px) !important;
}

.custom-alert { border-top: 2px solid var(--cian) !important; }

.custom-alert-title {
  font: italic 800 1.6rem/1 var(--titulo) !important;
  text-transform: uppercase;
  color: var(--texto) !important;
}

.custom-alert-message { color: var(--texto-2) !important; }

/* ===================== Catálogo (productos.php) ===================== */
.products-container {
  margin-top: 130px !important;
  animation: gp-entrar 0.6s var(--golpe) both;
}

.products-count {
  font: 500 0.82rem var(--mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3) !important;
}

.products-container .products-grid { gap: 20px !important; }

.product-card,
.producto-card {
  overflow: hidden;
  transition: transform 0.3s var(--rapido), border-color 0.3s !important;
}

.product-card:hover,
.producto-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--cian) !important;
}

.product-card .product-image,
.producto-imagen {
  background: #000 !important;
  border-radius: 0 !important;
}

.product-card .product-image img,
.producto-imagen img {
  border-radius: 0 !important;
  transition: transform 0.7s var(--golpe) !important;
}

.product-card:hover .product-image img,
.producto-card:hover .producto-imagen img { transform: scale(1.06); }

.product-info h3,
.producto-nombre {
  font: italic 800 1.4rem/1.05 var(--titulo) !important;
  text-transform: uppercase;
  color: var(--texto) !important;
}

.product-info .product-price { font-size: 1.5rem !important; }

.btn-cart,
.btn-details { padding: 14px 16px !important; width: 100%; }

.no-products {
  color: var(--texto-2);
  font-family: var(--letra);
}

/* ===================== Detalle de producto ===================== */

/* La página de detalle redefine partes de la barra superior: aquí se restauran */
.navbar .nav-content { gap: 24px; }
.navbar .nav-actions { gap: 8px; }

.navbar .user-btn {
  height: 44px;
  padding: 4px 14px 4px 4px;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-radius: 0;
  clip-path: var(--chaflan-chico);
  font: 700 0.95rem/1 var(--titulo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: none;
  transform: none;
}

.navbar .user-btn:hover {
  background: rgba(0, 229, 255, 0.1);
  color: var(--cian);
  transform: none;
}

.navbar .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: var(--rgb);
  background-size: 200% 100%;
  color: #050508;
  font: 900 1.05rem/1 var(--titulo);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.producto-container {
  margin-top: 130px !important;
  animation: gp-entrar 0.6s var(--golpe) both;
}

.producto-container .btn-volver { padding: 12px 18px !important; margin-bottom: 26px; }

.producto-grid { gap: 28px !important; }

.imagen-principal {
  background: #000 !important;
  padding: 0 !important;
  overflow: hidden;
}

.imagen-principal img { border-radius: 0 !important; }

.miniatura {
  border-radius: 0 !important;
  border: 1px solid var(--linea-2) !important;
  background: #000 !important;
  clip-path: var(--chaflan-chico);
  transition: border-color 0.2s, transform 0.2s var(--rapido) !important;
}

.miniatura:hover,
.miniatura.active {
  border-color: var(--cian) !important;
  transform: translateY(-2px);
}

.miniatura img { border-radius: 0 !important; }

.info-producto { padding: 32px !important; }

.info-producto h1 {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  margin: 12px 0 16px !important;
}

.stock-info {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  background: rgba(57, 255, 136, 0.08) !important;
  border: 0 !important;
  border-left: 3px solid var(--verde) !important;
  border-radius: 0 !important;
  color: var(--verde) !important;
  font: 500 0.8rem var(--mono) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stock-info.sin-stock {
  background: rgba(255, 77, 109, 0.08) !important;
  border-left-color: var(--rojo) !important;
  color: var(--rojo) !important;
}

.info-producto .precio {
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  margin: 18px 0 !important;
}

.descripcion {
  color: var(--texto-2) !important;
  line-height: 1.7 !important;
}

.especificaciones {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--linea) !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
}

.especificaciones li { border-bottom-color: var(--linea) !important; }

.spec-label {
  font: 500 0.76rem var(--mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-3) !important;
}

.spec-value { color: var(--texto) !important; }

.cantidad-selector button {
  width: 44px !important;
  height: 44px !important;
  font-size: 1.2rem !important;
  padding: 0 !important;
}

.cantidad-selector input {
  height: 44px !important;
  text-align: center;
  font-family: var(--mono) !important;
}

.btn-agregar {
  width: 100%;
  padding: 18px 24px !important;
  font-size: 1.15rem !important;
}

/* ===================== Carrito ===================== */
.cart-container {
  margin-top: 130px !important;
  animation: gp-entrar 0.6s var(--golpe) both;
}

.cart-item {
  padding: 20px 22px !important;
  margin-bottom: 12px !important;
  gap: 18px !important;
  transition: border-color 0.2s !important;
}

.cart-item:hover { border-color: var(--cian) !important; }

/* Foto del producto en el carrito */
.cart-thumb {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--linea-2);
  clip-path: var(--chaflan-chico);
}

.cart-item .cart-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.5s var(--golpe);
}

.cart-item:hover .cart-thumb img { transform: scale(1.06); }

.cart-thumb-vacia { font-size: 1.8rem; }

.cart-item h3 {
  font: italic 800 1.3rem/1.1 var(--titulo) !important;
  text-transform: uppercase;
}

.cart-item p[style*="font-weight: 700"] {
  font-family: var(--mono) !important;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
}

.cart-item button[onclick^="eliminarItem"] {
  margin-top: 6px;
  color: var(--rojo) !important;
  font: 500 0.78rem var(--mono) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cart-total {
  padding: 26px !important;
  margin-top: 20px !important;
}

.cart-total h2 {
  font-size: 1.8rem !important;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-checkout {
  width: 100%;
  padding: 18px 24px !important;
  margin-top: 16px;
  font-size: 1.15rem !important;
}

/* ===================== Pago (checkout) ===================== */
.checkout-container {
  margin-top: 130px !important;
  animation: gp-entrar 0.6s var(--golpe) both;
}

.checkout-grid { gap: 24px !important; }

.checkout-form,
.order-summary { padding: 28px !important; }

.summary-item {
  border-bottom: 1px solid var(--linea) !important;
  color: var(--texto-2);
}

.summary-total {
  border-top: 1px solid var(--linea-2) !important;
  font-size: 1.4rem !important;
}

.payment-details,
.transfer-info {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--linea) !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
}

.transfer-info .info-card {
  background: rgba(255, 255, 255, 0.03) !important;
  clip-path: var(--chaflan-chico);
}

.info-label {
  font: 500 0.72rem var(--mono) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3) !important;
}

.info-value {
  font-family: var(--mono) !important;
  color: var(--cian) !important;
}

.btn-copy { padding: 8px 12px !important; font-size: 0.85rem !important; }

/* ===================== Confirmación de pedido ===================== */
.confirmation-container {
  margin-top: 130px !important;
  padding: 44px 32px !important;
  animation: gp-entrar 0.6s var(--golpe) both;
}

.success-icon {
  filter: drop-shadow(0 0 20px rgba(57, 255, 136, 0.55));
}

.confirmation-container h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
}

.confirmation-container p { color: var(--texto-2); }

.order-details {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--linea) !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
}

.detail-row { border-bottom-color: var(--linea) !important; }

/* ===================== Mis pedidos y detalle de pedido ===================== */
.pedidos-container,
.detalle-container {
  margin-top: 130px !important;
  animation: gp-entrar 0.6s var(--golpe) both;
}

.pedido-card {
  padding: 22px 24px !important;
  margin-bottom: 14px !important;
  transition: border-color 0.2s, transform 0.25s var(--rapido) !important;
}

.pedido-card:hover {
  border-color: var(--cian) !important;
  transform: translateY(-2px);
}

.pedido-header {
  border-bottom-color: var(--linea) !important;
  font-family: var(--titulo);
}

.pedido-header h3,
.pedido-header strong {
  font: italic 800 1.3rem/1 var(--titulo) !important;
  text-transform: uppercase;
}

.estado {
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  font: 700 0.72rem var(--mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.btn-ver-detalle { padding: 10px 16px !important; }

.producto-item {
  padding: 16px !important;
  margin-bottom: 10px !important;
}

.producto-item img {
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
  background: #000;
}

/* ===================== Favoritos ===================== */
.favoritos-container {
  margin-top: 130px !important;
  animation: gp-entrar 0.6s var(--golpe) both;
}

.favoritos-container .productos-grid { gap: 20px !important; }

.producto-info { padding: 18px !important; }

.producto-acciones { gap: 10px !important; }

.producto-acciones .btn,
.producto-acciones .btn-primary,
.producto-acciones .btn-danger { padding: 12px 14px !important; }

.fecha-agregado {
  font: 500 0.72rem var(--mono) !important;
  letter-spacing: 0.06em;
  color: var(--texto-3) !important;
}

.empty-state {
  padding: 56px 28px !important;
  text-align: center;
}

.empty-state h2 {
  font: italic 900 2.2rem/1 var(--titulo) !important;
  text-transform: uppercase;
}

.empty-icon { filter: drop-shadow(0 0 18px rgba(255, 43, 214, 0.5)); }

/* ===================== Páginas informativas ===================== */
.page-hero {
  position: relative;
  padding: 170px 0 90px !important;
  background:
    radial-gradient(700px 360px at 20% 0%, rgba(139, 92, 255, 0.28), transparent 70%),
    radial-gradient(600px 320px at 85% 20%, rgba(255, 43, 214, 0.2), transparent 70%),
    var(--negro) !important;
  overflow: hidden;
}

.page-hero::before {
  left: -50% !important;
  right: -50% !important;
  top: auto !important;
  bottom: -20% !important;
  width: auto !important;
  height: 70% !important;
  border-radius: 0 !important;
  transform: perspective(520px) rotateX(64deg) !important;
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 43, 214, 0.25) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: gp-avanzar 2.4s linear infinite;
  opacity: 0.8;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rgb);
  background-size: 200% 100%;
  animation: gp-correr 6s linear infinite;
  opacity: 0.6;
}

.page-hero .hero-title {
  font-size: clamp(2.8rem, 7vw, 5.6rem) !important;
  animation: gp-entrar 0.7s var(--golpe) both;
}

.page-hero .hero-title .gradient-text {
  background: var(--rgb) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.page-hero .hero-subtitle {
  color: var(--texto-2) !important;
  animation: gp-entrar 0.7s var(--golpe) 0.1s both;
}

.content-section { background: transparent !important; }

.content-section.bg-dark {
  background: var(--negro-2) !important;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.section-header h2,
.content-text h2,
.cta-section h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem) !important;
  line-height: 0.95 !important;
}

.section-header p,
.content-text p { color: var(--texto-2) !important; }

.content-image img,
.image-placeholder {
  border-radius: 0 !important;
  clip-path: var(--chaflan);
}

.stat-box h3 {
  font: italic 900 2.6rem/1 var(--titulo) !important;
  color: var(--cian) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.4);
}

.stat-box p {
  font: 500 0.74rem var(--mono) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3) !important;
}

.info-card,
.contact-card,
.feature-item,
.coverage-item,
.price-card,
.carrier-item,
.tracking-item,
.contact-item {
  transition: border-color 0.25s, transform 0.3s var(--rapido) !important;
}

.info-card:hover,
.contact-card:hover,
.feature-item:hover,
.coverage-item:hover,
.price-card:hover,
.carrier-item:hover,
.tracking-item:hover,
.contact-item:hover {
  border-color: var(--cian) !important;
  transform: translateY(-4px) !important;
}

.info-card h3,
.contact-card h3,
.feature-item h4,
.coverage-item h3,
.price-card h3,
.carrier-item h3,
.step-content h3,
.faq-item h3,
.legal-content h3 {
  font-family: var(--titulo) !important;
  font-style: italic;
  font-weight: 800 !important;
  text-transform: uppercase;
  color: var(--texto) !important;
}

.info-card p,
.contact-card p,
.feature-item p,
.coverage-item p,
.carrier-item p,
.contact-item small,
.contact-card small { color: var(--texto-2) !important; }

.card-icon,
.contact-icon,
.feature-item .icon,
.coverage-item .icon,
.tracking-item .icon,
.contact-item .icon {
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.35));
}

.price-card.featured {
  border-color: var(--magenta) !important;
  box-shadow: inset 0 2px 0 var(--magenta) !important;
}

.price-card .badge {
  background: var(--magenta) !important;
  color: #050508 !important;
  border-radius: 0 !important;
  font: 700 0.72rem var(--mono) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-content { padding: 40px !important; }

.legal-content h2 {
  font-size: 2rem !important;
  color: var(--texto) !important;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 10px;
}

.legal-content p,
.legal-content li { color: var(--texto-2) !important; }

.legal-content a { color: var(--cian) !important; }

.shipping-table {
  border-collapse: collapse;
  border: 1px solid var(--linea-2) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.shipping-table th {
  background: rgba(0, 229, 255, 0.08) !important;
  color: var(--cian) !important;
  font: 700 0.76rem var(--mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shipping-table td {
  border-bottom: 1px solid var(--linea) !important;
  color: var(--texto-2);
}

.shipping-table tr:hover td { background: rgba(255, 255, 255, 0.03) !important; }

.step-number {
  border-radius: 0 !important;
  background: var(--rgb) !important;
  background-size: 200% 100% !important;
  animation: gp-correr 4s linear infinite;
  color: #050508 !important;
  font: italic 900 1.4rem/1 var(--titulo) !important;
  clip-path: var(--chaflan-chico);
}

.step:not(:last-child)::after { background: var(--linea-2) !important; }

.checklist li::before { color: var(--verde) !important; }

.faq-item.active { border-color: var(--cian) !important; }

.faq-question {
  font-family: var(--titulo) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0.02em;
  color: var(--texto) !important;
}

.faq-icon { color: var(--cian) !important; }

.faq-answer { color: var(--texto-2) !important; }

.cta-section {
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(255, 43, 214, 0.18), transparent 70%),
    var(--negro-2) !important;
  border: 1px solid var(--linea-2) !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan);
}

.map-placeholder {
  background:
    linear-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.08) 1px, transparent 1px),
    var(--panel) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  border: 1px solid var(--linea-2) !important;
  border-radius: 0 !important;
  clip-path: var(--chaflan);
}

.social-links-inline a {
  border-radius: 0 !important;
  clip-path: var(--chaflan-chico);
  background: rgba(255, 255, 255, 0.05) !important;
}

.social-links-inline a:hover {
  background: var(--magenta) !important;
  color: #050508 !important;
}

/* ===================== Iniciar sesión, registro y contraseña ===================== */
.auth-bg {
  background:
    radial-gradient(700px 400px at 15% 10%, rgba(139, 92, 255, 0.32), transparent 70%),
    radial-gradient(600px 380px at 90% 90%, rgba(255, 43, 214, 0.22), transparent 70%),
    linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--negro) !important;
}

.auth-bg .gradient-orb { opacity: 0.35 !important; }

.login-card,
.register-card {
  position: relative;
  padding: 40px 34px !important;
  width: min(440px, calc(100vw - 32px)) !important;
  max-width: 440px !important;
  animation: gp-entrar 0.7s var(--golpe) both;
}

.login-card::before,
.register-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--rgb);
  background-size: 200% 100%;
  animation: gp-correr 4s linear infinite;
}

.login-card .logo,
.register-card .logo {
  font: italic 900 2.4rem/1 var(--titulo) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--rgb) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: gp-correr 4s linear infinite;
  margin-bottom: 6px !important;
}

.login-card h2,
.register-card h2 {
  font: italic 800 1.5rem/1 var(--titulo) !important;
  text-transform: uppercase;
  color: var(--texto) !important;
  margin-bottom: 26px !important;
}

.login-card *,
.register-card * { box-sizing: border-box; }

.login-card .form-group input,
.register-card .form-group input {
  display: block;
  width: 100% !important;
  padding: 14px 16px !important;
  height: auto !important;
}

.login-card .btn-primary,
.register-card .btn-primary {
  width: 100%;
  padding: 17px 20px !important;
  margin-top: 8px;
}

.links,
.links span { color: var(--texto-3) !important; }

.links a {
  color: var(--cian) !important;
  text-decoration: none !important;
  transition: color 0.2s, text-shadow 0.2s;
}

.links a:hover {
  color: var(--texto) !important;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

/* ===================== Celular ===================== */
@media (max-width: 720px) {
  .navbar .nav-content { gap: 10px; }
  .navbar .nav-actions { gap: 6px; }
  .navbar .user-btn { height: 40px; padding-right: 4px; }

  .shipping-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .legal-content button,
  .legal-content .btn-primary,
  .legal-content .btn-secondary {
    max-width: 100%;
    white-space: normal !important;
  }

  .products-container,
  .producto-container,
  .cart-container,
  .checkout-container,
  .confirmation-container,
  .pedidos-container,
  .favoritos-container,
  .detalle-container { margin-top: 128px !important; }

  .info-producto,
  .checkout-form,
  .order-summary,
  .legal-content { padding: 22px 18px !important; }

  .page-hero { padding: 150px 0 60px !important; }

  .cart-item { padding: 16px !important; gap: 12px !important; }
  .cart-thumb { width: 64px; height: 64px; }

  .login-card,
  .register-card { padding: 32px 22px !important; }
}

/* Si el teléfono o computador pide "reducir movimiento", se apagan las animaciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}