/* ============================================================
   AVANTYS — Brutalist WHMCS theme (Phase 1: shell)
   Navy #002040 · Cyan #00B8C4 · Bone #F5F1EA
   Cabinet Grotesk (display) · IBM Plex Sans (body) · JetBrains Mono (labels)
   Override of Bootstrap 4.5.3 / Twenty-One. CSS-only restyle.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Display face — Cabinet Grotesk, self-hosted in ../fonts/ */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../fonts/CabinetGrotesk-Extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('../fonts/CabinetGrotesk-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #002040;
  --navy-dark: #001528;
  --navy-light: #003366;
  --cyan: #00b8c4;
  --cyan-light: #5ee2ec;
  --cyan-dark: #008996;
  --bone: #f5f1ea;
  --paper: #ffffff;
  --ash: #4a4a4a;

  --font-display: 'Cabinet Grotesk', 'Archivo Black', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  --border: 2px solid var(--navy);
  --shadow-brutal: 6px 6px 0 0 var(--navy);
  --shadow-brutal-sm: 3px 3px 0 0 var(--navy);
  --shadow-brutal-cyan: 6px 6px 0 0 var(--cyan);
}

/* ----------------------------------------------------------------
   Global base
---------------------------------------------------------------- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: var(--bone) !important;
  color: var(--navy);
  font-family: var(--font-sans);
}

body.primary-bg-color {
  background: var(--bone) !important;
}

::selection {
  background: var(--cyan);
  color: var(--navy);
}

a {
  color: var(--navy);
  text-decoration: none;
}
a:hover {
  color: var(--cyan-dark);
}

/* Kill rounded corners everywhere — brutalist */
*,
.btn,
.card,
.panel,
.form-control,
.custom-select,
.input-group-text,
.dropdown-menu,
.modal-content,
.badge,
.alert,
.nav-tabs .nav-link,
.list-group-item,
.pagination .page-link,
.well,
.jumbotron,
img.logo-img {
  border-radius: 0 !important;
}

/* Headings — Cabinet Grotesk, tight, uppercase for big ones */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--navy);
}
h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* Mono eyebrow helper (// LABEL) */
.eyebrow,
.text-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--cyan-dark);
}

/* ----------------------------------------------------------------
   Header / top bar / navbar
---------------------------------------------------------------- */
.header {
  background: var(--bone);
  border-bottom: var(--border);
}

/* Logged-in topbar → navy strip.
   Nexus deja .topbar transparente con regla más específica → forzamos navy. */
.header .topbar {
  background-color: var(--navy) !important;
  border-bottom: var(--border);
}
.header .topbar,
.header .topbar .btn,
.header .topbar .input-group-text,
.header .topbar a,
.header .topbar i,
.header .topbar .btn-active-client span {
  color: var(--bone) !important;
}
.header .topbar .input-group-text {
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}
/* Todos los botones de la barra superior: borde bone, hover cyan legible */
.header .topbar .btn {
  border: 2px solid var(--bone) !important;
  background-color: transparent !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.header .topbar .btn:hover,
.header .topbar .btn-active-client:hover {
  background-color: var(--cyan) !important;
  color: var(--navy) !important;
  border-color: var(--cyan) !important;
}
.header .topbar .btn:hover i,
.header .topbar .btn:hover span {
  color: var(--navy) !important;
}

/* Botón flotante "Volver al área de administración": pestaña fija rotada de
   Nexus. Vive dentro de .topbar (la regla .header .topbar .btn lo dejaba
   transparente y flota sobre fondo claro → invisible). Especificidad alta +
   sólido navy/cyan, y mantener la rotación al pulsar para no romper el clic. */
.header .topbar .btn.btn-return-to-admin,
a.btn.btn-return-to-admin,
.btn-return-to-admin {
  background-color: var(--navy) !important;
  color: var(--bone) !important;
  border: 2px solid var(--cyan) !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1000 !important;
}
.header .topbar .btn.btn-return-to-admin:hover,
a.btn.btn-return-to-admin:hover,
.btn-return-to-admin:hover {
  background-color: var(--cyan) !important;
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}
.btn-return-to-admin:active {
  transform: rotate(90deg) !important;
}

/* Brand wordmark — AVANTYS. typographic logo */
.navbar-brand {
  font-family: var(--font-display) !important;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--navy) !important;
  line-height: 1;
  display: inline-flex;
  align-items: flex-end;
}
.navbar-brand .brand-wordmark {
  color: var(--navy);
  transition: color 0.15s ease;
}
.navbar-brand:hover .brand-wordmark {
  color: var(--cyan);
}
.navbar-brand .brand-dot {
  color: var(--cyan);
}

.navbar.navbar-light {
  background: var(--bone);
}

/* Main nav strip */
.main-navbar-wrapper {
  background: var(--navy);
  border-top: var(--border);
  border-bottom: var(--border);
}
.main-navbar-wrapper .navbar-nav .nav-link,
.main-navbar-wrapper #nav > li > a,
.main-navbar-wrapper .navbar-nav > li > a {
  color: var(--bone) !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.9rem 0;
}
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li.active > a {
  color: var(--cyan) !important;
}

/* Cart + search buttons in the upper navbar */
.navbar .toolbar .cart-btn,
.navbar .toolbar .nav-link {
  color: var(--navy);
  border: var(--border);
  background: var(--paper);
  padding: 0.5rem 0.7rem;
}
.navbar .toolbar .cart-btn:hover {
  background: var(--cyan);
  color: var(--navy);
}
.navbar .badge-info {
  background: var(--cyan);
  color: var(--navy);
  font-family: var(--font-mono);
}

.navbar .search .form-control {
  border: var(--border);
  border-left: none;
}
.navbar .search .btn {
  border: var(--border);
  background: var(--navy);
  color: var(--bone);
}

/* Dropdown menus */
.dropdown-menu {
  border: var(--border);
  box-shadow: var(--shadow-brutal-sm);
  background: var(--paper);
  margin-top: 0;
}
.dropdown-item {
  font-family: var(--font-sans);
}
.dropdown-item:hover {
  background: var(--navy);
  color: var(--bone) !important;
}
.dropdown-item:hover a,
.dropdown-item:hover i {
  color: var(--bone) !important;
}
.dropdown-divider {
  border-top: 2px solid var(--navy);
}

/* ----------------------------------------------------------------
   Breadcrumb
---------------------------------------------------------------- */
.master-breadcrumb {
  background: var(--bone);
  border-bottom: var(--border);
}
.master-breadcrumb .breadcrumb {
  background: transparent;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.75rem 0;
  margin: 0;
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: var(--cyan-dark);
}
.master-breadcrumb a {
  color: var(--cyan-dark);
}

/* ----------------------------------------------------------------
   Buttons
---------------------------------------------------------------- */
.btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  font-weight: 500;
  border: var(--border);
  border-radius: 0 !important;
  padding: 0.6rem 1.3rem;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease, color 0.15s ease;
}
.btn:active {
  transform: translate(2px, 2px);
}

.btn-primary,
.btn-info {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--bone);
  box-shadow: var(--shadow-brutal-sm);
}
.btn-primary:hover,
.btn-info:hover {
  background: var(--cyan);
  border-color: var(--navy);
  color: var(--navy);
  box-shadow: var(--shadow-brutal);
}

.btn-secondary,
.btn-default {
  background: var(--paper);
  border-color: var(--navy);
  color: var(--navy);
}
.btn-secondary:hover,
.btn-default:hover {
  background: var(--navy);
  color: var(--bone);
}

.btn-success {
  background: var(--cyan);
  border-color: var(--navy);
  color: var(--navy);
  box-shadow: var(--shadow-brutal-sm);
}
.btn-success:hover {
  background: var(--navy);
  color: var(--bone);
}

.btn-danger {
  background: #e5484d;
  border-color: var(--navy);
  color: var(--paper);
}

.btn-link {
  border-color: transparent;
  box-shadow: none;
  color: var(--cyan-dark);
}

/* Botones WHMCS sin variante de color reconocida o "claros": que NUNCA
   desaparezcan al hacer hover (antes caían al gris/beige de Bootstrap). */
.btn-add,
.btn-light,
.btn-outline-light,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark {
  background: var(--paper);
  border: var(--border);
  color: var(--navy);
}
.btn-add:hover,
.btn-light:hover,
.btn-outline-light:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-dark:hover {
  background: var(--navy) !important;
  color: var(--bone) !important;
  border-color: var(--navy) !important;
}
/* Red de seguridad: ningún botón se queda sin feedback de hover */
.btn:hover {
  box-shadow: var(--shadow-brutal-sm);
}

/* Botón flotante "Volver al área de administración" (pestaña fija rotada de
   Nexus). El efecto de pulsar (.btn:active translate) le quitaba el rotate y
   cancelaba el clic → forzamos que mantenga la rotación y lo hacemos on-brand. */
.btn-return-to-admin {
  background: var(--navy) !important;
  color: var(--bone) !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1000 !important;
}
.btn-return-to-admin:hover {
  background: var(--cyan) !important;
  color: var(--navy) !important;
}
.btn-return-to-admin:active {
  transform: rotate(90deg) !important;
}

/* ----------------------------------------------------------------
   Cards / panels
---------------------------------------------------------------- */
.card,
.panel {
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-brutal-sm);
}
/* Cabecera de panel. Nexus la pone blanca/transparente con reglas contextuales
   más específicas (.card-accent-X .card-header, .sidebar .card-header) → forzamos
   navy con !important y todo el texto/iconos/links a bone para que sea legible. */
.card-header,
.panel-heading {
  background-color: var(--navy) !important;
  border-bottom: var(--border) !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  font-weight: 500;
}
.card-header,
.card-header .card-title,
.card-header .title,
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header a,
.card-header i,
.card-header .fas, .card-header .far, .card-header .fa,
.panel-heading,
.panel-heading * {
  color: var(--bone) !important;
}
/* Botones de acción de la cabecera navy ("Pagar ahora", "Ver todo"…): Nexus les
   da color con bg-color-X; antes los dejaba transparentes (autogol). Ahora son
   botones sólidos bone con texto navy y borde cyan → se leen y parecen botones. */
/* Especificidad ALTA a propósito: Nexus estiliza estos botones con selectores
   muy específicos (body .primary-content .client-home-cards .card … = fondo
   blanco; .client-home-cards .card-header .btn = texto claro). Para ganarles,
   prefijamos html body + las mismas clases. Botón cyan sólido + texto navy. */
html body .primary-content .client-home-cards .card .card-header .btn,
html body .client-home-cards .card-header .btn,
html body .sidebar .card .card-header .btn,
.card-header .btn {
  background-color: var(--cyan) !important;
  color: var(--navy) !important;
  border: 2px solid var(--navy) !important;
}
html body .primary-content .client-home-cards .card .card-header .btn,
html body .client-home-cards .card-header .btn,
.card-header .btn,
.card-header .btn i,
.card-header .btn .fas,
.card-header .btn .far,
.card-header .btn .fa {
  color: var(--navy) !important;
}
html body .primary-content .client-home-cards .card .card-header .btn:hover,
html body .client-home-cards .card-header .btn:hover,
.card-header .btn:hover {
  background-color: var(--navy) !important;
  color: var(--bone) !important;
  border-color: var(--navy) !important;
}
.card-header .btn:hover i { color: var(--bone) !important; }
.card-header a:hover {
  color: var(--cyan) !important;
}
.card-footer {
  background: var(--bone);
  border-top: var(--border);
}

/* WHMCS "panel" homepage tiles */
.panel-sidebar,
.sidebar .list-group {
  border: var(--border);
}

/* ----------------------------------------------------------------
   Forms / inputs
---------------------------------------------------------------- */
.form-control,
.custom-select {
  border: var(--border);
  border-radius: 0 !important;
  background: var(--paper);
  color: var(--navy);
  box-shadow: none;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--cyan-dark);
  box-shadow: 0 0 0 3px rgba(0, 184, 196, 0.25);
}
label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ash);
  font-weight: 500;
}
.input-group-text {
  border: var(--border);
  background: var(--navy);
  color: var(--bone);
}

/* ----------------------------------------------------------------
   Tables
---------------------------------------------------------------- */
.table {
  background: var(--paper);
  border: var(--border);
}
.table thead th {
  background: var(--navy);
  color: var(--bone);
  border-bottom: var(--border);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.table td,
.table th {
  border-top: 1px solid rgba(0, 32, 64, 0.15);
}
.table-hover tbody tr:hover {
  background: var(--bone);
}

/* ----------------------------------------------------------------
   Alerts / badges / labels
---------------------------------------------------------------- */
.alert {
  border: var(--border);
  border-radius: 0 !important;
  box-shadow: var(--shadow-brutal-sm);
  font-weight: 500;
}
.alert-success { background: #e6f7f8; color: var(--navy); border-color: var(--cyan-dark); }
.alert-info    { background: var(--bone); color: var(--navy); }
.alert-warning { background: #fff3d6; color: var(--navy); border-color: #f59e0b; }
.alert-danger  { background: #fdeaea; color: #8a1c1c; border-color: #e5484d; }

.badge {
  border-radius: 0 !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  border: 2px solid var(--navy);
  padding: 0.3em 0.55em;
}
.badge-primary, .badge-info { background: var(--cyan); color: var(--navy); }
.badge-success { background: var(--cyan); color: var(--navy); }
.badge-secondary { background: var(--bone); color: var(--navy); }
.badge-danger { background: #e5484d; color: var(--paper); }

/* Status pills used across client area */
.label,
.status-tag {
  font-family: var(--font-mono);
  text-transform: uppercase;
  border: 2px solid var(--navy);
  border-radius: 0 !important;
}

/* ----------------------------------------------------------------
   Sidebar (client area nav)
---------------------------------------------------------------- */
.sidebar .list-group-item {
  border: none;
  border-bottom: 1px solid rgba(0, 32, 64, 0.12);
  background: var(--paper);
  font-family: var(--font-sans);
}
.sidebar .list-group-item:hover {
  background: var(--bone);
}
.sidebar .list-group-item.active,
.sidebar .panel-sidebar .list-group-item.active {
  background: var(--navy);
  color: var(--bone);
  border-color: var(--navy);
}
.sidebar .panel-heading,
.sidebar .list-group-header {
  background: var(--navy);
  color: var(--bone);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: var(--border);
}

/* ----------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
.footer {
  background-color: var(--navy) !important;
  color: var(--bone);
  border-top: var(--border);
  margin-top: 4rem;
}
.footer a,
.footer .nav-link {
  color: var(--bone);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}
.footer a:hover,
.footer .nav-link:hover {
  color: var(--cyan);
}
.footer .copyright {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(245, 241, 234, 0.6);
}
.footer .btn {
  background: transparent;
  border: 2px solid var(--bone);
  color: var(--bone);
}
.footer .btn:hover {
  background: var(--bone) !important;
  border-color: var(--bone) !important;
  color: var(--navy) !important;
}
.footer .btn .iti-flag {
  vertical-align: middle;
}

/* ----------------------------------------------------------------
   Misc — pagination, modals, focus
---------------------------------------------------------------- */
.pagination .page-link {
  border: var(--border);
  color: var(--navy);
  margin: 0 -1px 0 0;
}
.pagination .page-item.active .page-link {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--bone);
}

.modal-content {
  border: var(--border);
  box-shadow: var(--shadow-brutal);
}
.modal-header {
  background: var(--navy);
  color: var(--bone);
  border-bottom: var(--border);
}
.modal-header .close {
  color: var(--bone);
  opacity: 1;
}

*:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* Domain search hero on homepage */
#domain-checker,
.domain-search {
  background: var(--navy);
  border-bottom: var(--border);
  color: var(--bone);
}
#domain-checker h1,
.domain-search h1 {
  color: var(--bone);
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bone); }
::-webkit-scrollbar-thumb { background: var(--navy); border: 2px solid var(--bone); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ----------------------------------------------------------------
   Refinamientos Fase 1 (post-revisión en staging)
---------------------------------------------------------------- */

/* Menú desplegable (¡Hola, Cliente! etc.): sello brutalista — borde 2px,
   sombra dura y cada opción invierte a navy al pasar el ratón. */
.dropdown-menu {
  border: 2px solid var(--navy) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow-brutal) !important;
  padding: 0 !important;
  margin-top: 2px !important;
}
.dropdown-menu .dropdown-item {
  padding: 0.6rem 1.1rem !important;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--navy) !important;
  border-bottom: 1px solid rgba(0, 32, 64, 0.08);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:active {
  background-color: var(--navy) !important;
  color: var(--bone) !important;
}
.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i {
  color: var(--bone) !important;
}
.dropdown-menu .dropdown-divider {
  border-top: 2px solid var(--navy) !important;
  margin: 0 !important;
}

/* Caja "Registrar un nuevo dominio" del dashboard: el input quedaba en 64px
   porque los botones se comían el ancho. Lo reorganizamos: input a lo ancho
   arriba, botones (Registrar/Transferir) repartidos debajo. */
form[action*="domainchecker"] .input-group,
form[action*="cart.php"] .input-group {
  flex-wrap: wrap !important;
}
form[action*="domainchecker"] .input-group > .form-control,
form[action*="cart.php"] .input-group > .form-control {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 8px !important;
  padding: 0.55rem 0.75rem !important;
}
form[action*="domainchecker"] .input-group-append,
form[action*="cart.php"] .input-group-append {
  width: 100% !important;
  display: flex !important;
  gap: 8px !important;
}
form[action*="domainchecker"] .input-group-append .btn,
form[action*="cart.php"] .input-group-append .btn {
  flex: 1 1 auto !important;
}

/* Stat-tiles del dashboard (.tiles): iconos on-brand + bloque brutalista.
   Antes los iconos salían en gris flojo (parecían sin diseño). */
.tiles {
  border: var(--border) !important;
  background: var(--paper);
  box-shadow: var(--shadow-brutal-sm);
}
.tiles .tile {
  position: relative;
  padding: 1rem 1.25rem !important;
  border-right: 2px solid var(--navy);
}
.tiles .row > [class*="col-"]:last-child .tile {
  border-right: none;
}
.tiles .tile i {
  color: var(--cyan) !important;
  opacity: 1 !important;
  font-size: 1.9rem !important;
}
.tiles .tile .stat {
  font-family: var(--font-display) !important;
  font-weight: 900;
  color: var(--navy) !important;
  letter-spacing: -0.03em;
}
.tiles .tile .title {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--ash) !important;
}
.tiles .tile:hover {
  background: var(--bone);
}
/* La barrita .highlight a color de marca (cyan), uniforme y limpia */
.tiles .tile .highlight {
  height: 3px !important;
  background: var(--cyan) !important;
}

/* Enlaces-botón y nav-links sueltos en el contenido (carrito, etc.).
   Antes salían en gris flojo. Scopeado a #main-body para NO tocar el nav. */
.btn-link {
  color: var(--cyan-dark) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none !important;
  border-color: transparent !important;
}
.btn-link:hover {
  color: var(--navy) !important;
}
#main-body a.nav-link {
  color: var(--navy) !important;
}
/* Toggle "Aplicar código promocional" (a.nav-link.active suelto en el carrito) */
#main-body a.nav-link.active {
  background: var(--bone) !important;
  border: 2px solid var(--navy) !important;
  border-radius: 0 !important;
  padding: 0.4rem 0.9rem !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--navy) !important;
}
#main-body a.nav-link.active:hover {
  background: var(--navy) !important;
  color: var(--bone) !important;
}

/* CTA principal de pago: que el botón "Pagar" destaque (sólido cyan) frente a
   los secundarios outline. */
.btn-checkout, #btnCompleteOrder, .checkout-btn,
a.btn[href*="checkout"], .cart-buttons .btn-primary {
  background-color: var(--cyan) !important;
  color: var(--navy) !important;
  border: 2px solid var(--navy) !important;
  box-shadow: var(--shadow-brutal-sm) !important;
}
.btn-checkout:hover, #btnCompleteOrder:hover,
a.btn[href*="checkout"]:hover, .cart-buttons .btn-primary:hover {
  background-color: var(--navy) !important;
  color: var(--bone) !important;
}

/* Etiquetas de estado de WHMCS (.label.status.status-*): salían como cajas vacías
   (texto blanco sobre fondo transparente). Badges sólidos, semánticos y
   legibles. Afecta a facturas, servicios y dominios (mismo sistema). */
.label.status,
span.label[class*="status-"] {
  display: inline-block !important;
  border: 2px solid var(--navy) !important;
  border-radius: 0 !important;
  padding: 0.25em 0.6em !important;
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  background-color: var(--navy) !important;
  color: var(--bone) !important;
  line-height: 1.4;
}
.label.status > span,
.label.status [class^="text"],
.label.status [class*=" text"] {
  color: inherit !important;
}
.label.status.status-paid,
.label.status.status-active,
.label.status.status-completed,
.label.status.status-open {
  background-color: var(--cyan) !important;
  color: var(--navy) !important;
}
.label.status.status-unpaid,
.label.status.status-overdue,
.label.status.status-collections {
  background-color: #e5484d !important;
  color: #fff !important;
}
.label.status.status-cancelled,
.label.status.status-refunded,
.label.status.status-draft,
.label.status.status-terminated,
.label.status.status-closed {
  background-color: var(--ash) !important;
  color: #fff !important;
}
.label.status.status-pending,
.label.status.status-payment-pending,
.label.status.status-suspended {
  background-color: #f59e0b !important;
  color: var(--navy) !important;
}

/* ----------------------------------------------------------------
   Fase 2 — Login / autenticación
---------------------------------------------------------------- */
/* Eyebrow brutalista (// ETIQUETA) reutilizable */
.brutal-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--cyan-dark);
  margin-bottom: 0.5rem;
}
/* Tarjeta de login/registro: franja cyan superior + sombra dura */
.login-form > .card,
.signup-form > .card,
form[action*="register"] > .card {
  border: var(--border) !important;
  border-top: 6px solid var(--cyan) !important;
  box-shadow: var(--shadow-brutal) !important;
}
.login-form .card-footer,
form[action*="register"] .card-footer {
  background: var(--bone);
  border-top: var(--border);
}
.login-form .card-footer a,
form[action*="register"] .card-footer a {
  color: var(--cyan-dark);
  font-weight: 700;
}
/* Título del login en Cabinet Grotesk grande */
.login-form h6.h3 {
  font-family: var(--font-display) !important;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--navy);
}

/* Eyebrow de marca en cabeceras de panel del dashboard: ocultamos el icono
   decorativo y prefijamos con "//" cyan (firma Avantys, como en la web). */
.client-home-cards .card-header .card-title > i {
  display: none !important;
}
.client-home-cards .card-header .card-title::before {
  content: '// ';
  color: var(--cyan) !important;
  font-weight: 700;
  margin-right: 0.15em;
}

/* Eyebrow "//" también en los paneles de la barra lateral (.card-sidebar).
   Ocultamos solo el icono decorativo, NO el chevron de colapsar (.card-minimise). */
.card-sidebar .card-header .card-title > i:not(.card-minimise) {
  display: none !important;
}
.card-sidebar .card-header .card-title::before {
  content: '// ';
  color: var(--cyan) !important;
  font-weight: 700;
  margin-right: 0.15em;
}

/* ----------------------------------------------------------------
   Fase 2 — Factura individual (viewinvoice.tpl, página standalone)
---------------------------------------------------------------- */
.invoice-container {
  max-width: 1000px;
  margin: 2.5rem auto;
  padding: 0 1.25rem;
}
.invoice-header h2 {
  font-family: var(--font-display) !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.invoice-header h3 {
  font-family: var(--font-mono) !important;
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cyan-dark);
}
.invoice-container hr {
  border-top: 2px solid var(--navy);
}
/* Estado de la factura — badges semánticos brutalistas */
.invoice-status span {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  border: 2px solid var(--navy);
  border-radius: 0;
  padding: 0.35em 0.9em;
  font-size: 0.95rem;
}
.invoice-status .unpaid,
.invoice-status .collections { background: #e5484d; color: #fff; }
.invoice-status .paid { background: var(--cyan); color: var(--navy); }
.invoice-status .draft,
.invoice-status .cancelled,
.invoice-status .refunded { background: var(--ash); color: #fff; }
/* Filas de totales */
.invoice-container .total-row {
  font-weight: 700;
  background: var(--bone);
}
.invoice-container address { font-style: normal; }

/* Botones dentro de paneles de la barra lateral (.card-sidebar): WHMCS genera
   algunos (p.ej. "Pagar todo") con texto claro sobre fondo claro = invisibles.
   Los forzamos a botón outline navy legible, hover invertido. */
.card-sidebar .btn,
.card-sidebar .card-footer .btn,
.card-sidebar .card-body .btn {
  background-color: var(--paper) !important;
  color: var(--navy) !important;
  border: 2px solid var(--navy) !important;
  box-shadow: var(--shadow-brutal-sm) !important;
}
.card-sidebar .btn i,
.card-sidebar .btn span {
  color: var(--navy) !important;
}
.card-sidebar .btn:hover {
  background-color: var(--navy) !important;
  color: var(--bone) !important;
}
.card-sidebar .btn:hover i,
.card-sidebar .btn:hover span {
  color: var(--bone) !important;
}

/* Listado de pago masivo / facturas agrupadas: las filas cabecera "Núm. de
   factura X" (td.bg-default) destacan como agrupador; totales enfatizados. */
.table td.bg-default {
  background-color: var(--bone) !important;
  border-top: 2px solid var(--navy) !important;
  border-bottom: 1px solid rgba(0, 32, 64, 0.15);
}
.table td.bg-default strong {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--navy);
}
.masspay-invoice-detail td {
  padding-left: 1.25rem;
}
.masspay-total td {
  background-color: var(--bone);
  font-weight: 700;
  color: var(--navy);
}
.masspay-total:last-of-type td {
  border-top: 2px solid var(--navy);
  font-size: 1.05rem;
}

/* ----------------------------------------------------------------
   Fase 2 — Detalle de servicio / pestañas (reutilizable)
---------------------------------------------------------------- */
/* Pestañas brutalistas (.nav-tabs): servicio, dominio, factura… */
.nav-tabs {
  border-bottom: 2px solid var(--navy);
}
.nav-tabs .nav-link {
  border: 2px solid transparent;
  border-radius: 0 !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.76rem;
  color: var(--navy);
  margin-right: 4px;
  margin-bottom: -2px;
}
.nav-tabs .nav-link:hover {
  border-color: var(--navy) var(--navy) transparent var(--navy);
  background: var(--bone);
  color: var(--navy);
}
.nav-tabs .nav-link.active {
  background: var(--navy) !important;
  color: var(--bone) !important;
  border: 2px solid var(--navy) !important;
}
.nav-tabs .nav-link.active i {
  color: var(--bone) !important;
}
.product-details-tab-container {
  border: 2px solid var(--navy);
  border-top: none;
}

/* Bloque de estado del servicio (.product-status) */
.product-status {
  border: 2px solid var(--navy);
  background: var(--bone);
  padding: 1.5rem;
}
.product-status .product-icon .fa-stack {
  font-size: 2rem;
}
.product-status .fa-circle {
  color: var(--navy);
}
.product-status-active .fa-circle {
  color: var(--cyan);
}
.product-status-suspended .fa-circle {
  color: #f59e0b;
}
.product-status-terminated .fa-circle,
.product-status-cancelled .fa-circle,
.product-status-fraud .fa-circle {
  color: #e5484d;
}
.product-status .fa-inverse {
  color: var(--bone) !important;
}
.product-status h3 {
  font-family: var(--font-display) !important;
  font-weight: 900;
  margin-top: 0.75rem;
}
.product-status h4 {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  color: var(--cyan-dark);
}
.product-status-text {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-align: center;
  margin-top: 1rem;
  color: var(--navy);
}

/* ================================================================
   LANDINGS STANDALONE (páginas de producto fuera de la home)
   Patrón reutilizable: dominios.tpl, y futuros productos secundarios.
   Secciones: .lp-hero · .lp-section · .tld-grid · .benefit-grid ·
   .cross-grid · .faq-lp · .lp-cta
   ================================================================ */

/* La landing va a sangre completa: rompe el container del shell */
.lp {
  margin-top: 0;
}
/* En páginas-landing el CTA a sangre pega directo con el footer:
   se anula el margen superior por defecto del footer del tema. */
body:has(.lp) #footer.footer {
  margin-top: 0;
}
/* Sangre completa real en WHMCS: con $skipMainBodyContainer el tema deja aún el
   .row (márgenes negativos) y .primary-content (padding 15px). Se neutralizan
   para que las franjas de color del hero/CTA lleguen a los bordes. */
body:has(.lp) #main-body {
  padding-top: 0;
}
body:has(.lp) #main-body > div > .row {
  margin-left: 0;
  margin-right: 0;
}
body:has(.lp) #main-body .primary-content {
  padding-left: 0;
  padding-right: 0;
}
.lp-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}
.lp-section {
  padding: 4.5rem 0;
  border-bottom: 2px solid var(--navy);
}
.lp-section-head {
  margin-bottom: 2.5rem;
}
.lp-section-head .eyebrow {
  color: var(--cyan-dark);
  margin-bottom: 0.75rem;
}
.lp-section-head h2 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin: 0;
}
.lp-section-head p {
  font-size: 1.1rem;
  color: var(--ash);
  max-width: 52ch;
  margin-top: 1rem;
}

/* ---- HERO ---- */
.lp-hero {
  background: var(--navy);
  color: var(--bone);
  border-bottom: 2px solid var(--navy);
  padding: 5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.lp-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--cyan);
}
.lp-hero .eyebrow {
  color: var(--cyan);
}
.lp-hero h1 {
  color: var(--bone);
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin: 0.75rem 0 1.25rem;
}
.lp-hero h1 .accent {
  color: var(--cyan);
}
.lp-hero .lead {
  font-size: 1.25rem;
  color: rgba(245, 241, 234, 0.85);
  max-width: 50ch;
  margin-bottom: 2.5rem;
}

/* Buscador de dominio */
.domain-search {
  display: flex;
  max-width: 680px;
  border: 2px solid var(--cyan);
  background: var(--paper);
  box-shadow: var(--shadow-brutal-cyan);
}
.domain-search input {
  flex: 1;
  border: 0;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--navy);
  background: var(--paper);
}
.domain-search input:focus {
  outline: none;
}
.domain-search input::placeholder {
  color: rgba(0, 32, 64, 0.4);
}
.domain-search button {
  border: 0;
  border-left: 2px solid var(--navy);
  background: var(--cyan);
  color: var(--navy);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding: 0 1.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.domain-search button:hover {
  background: var(--navy);
  color: var(--bone);
}
.hero-hint {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgba(245, 241, 234, 0.6);
}
.hero-hint a {
  color: var(--cyan);
  text-decoration: underline;
}

/* ---- GRID DE TLDs DESTACADOS ---- */
.tld-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.tld-card {
  border: var(--border);
  background: var(--paper);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.tld-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal);
}
.tld-card .tld-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1;
}
.tld-card .tld-discount {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--cyan);
  color: var(--navy);
  border: 2px solid var(--navy);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
}
.tld-card .tld-price {
  margin: 1rem 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}
.tld-card .tld-price small {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ash);
}
.tld-card .tld-was {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ash);
  text-decoration: line-through;
}
.tld-card .btn {
  margin-top: auto;
  margin-top: 1.25rem;
}

/* ---- BENEFICIOS ---- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.benefit {
  border: var(--border);
  background: var(--bone);
  padding: 1.75rem;
}
.benefit .benefit-ico {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--cyan);
  font-size: 1.4rem;
  margin-bottom: 1.25rem;
}
.benefit h3 {
  font-size: 1.15rem;
  font-family: var(--font-sans);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.benefit p {
  color: var(--ash);
  font-size: 0.95rem;
  margin: 0;
}

/* ---- SERVICIOS COMPLEMENTARIOS ---- */
.cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.cross-card {
  border: var(--border);
  background: var(--paper);
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: background 0.12s ease, color 0.12s ease;
}
.cross-card:hover {
  background: var(--navy);
}
.cross-card:hover h3,
.cross-card:hover p,
.cross-card:hover .cross-ico {
  color: var(--bone);
}
.cross-card .cross-ico {
  font-size: 1.5rem;
  color: var(--cyan-dark);
  flex-shrink: 0;
}
.cross-card h3 {
  font-size: 1.05rem;
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 0 0 0.35rem;
}
.cross-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ash);
}

/* ---- FAQ ---- */
.faq-lp {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border: var(--border);
  background: var(--paper);
  margin-bottom: 0.85rem;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.35rem;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--cyan-dark);
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-item[open] summary {
  background: var(--navy);
  color: var(--bone);
}
.faq-item[open] summary::after {
  color: var(--cyan);
}
.faq-item .faq-body {
  padding: 1.1rem 1.35rem;
  color: var(--ash);
  border-top: 2px solid var(--navy);
}
.faq-item .faq-body ul,
.faq-item .faq-body ol {
  margin: 0;
  padding-left: 1.25rem;
}
.faq-item .faq-body li {
  margin-bottom: 0.5rem;
}
.faq-item .faq-body li:last-child {
  margin-bottom: 0;
}

/* ---- CTA FINAL ---- */
.lp-cta {
  background: var(--cyan);
  border-bottom: none;
  text-align: center;
}
.lp-cta h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--navy);
}
.lp-cta p {
  color: var(--navy);
  font-size: 1.15rem;
  margin: 1rem auto 2rem;
  max-width: 46ch;
}

/* ---- TABLA DE EXTENSIONES POR CATEGORÍA (#6) ---- */
.tld-filters-lp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.tld-chip {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border: 2px solid var(--navy);
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.tld-chip:hover {
  background: var(--bone);
  color: var(--navy);
}
.tld-chip.active {
  background: var(--navy);
  color: var(--bone);
}
.pricing-table-wrap {
  border: var(--border);
  background: var(--paper);
  overflow-x: auto;
}
table.pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
table.pricing-table thead th {
  background: var(--navy);
  color: var(--bone);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.85rem 1rem;
  text-align: left;
  white-space: nowrap;
}
table.pricing-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(0, 32, 64, 0.12);
  font-size: 0.95rem;
  color: var(--navy);
  white-space: nowrap;
}
table.pricing-table tbody tr:hover td {
  background: var(--bone);
}
table.pricing-table .tld-cell {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
}
table.pricing-table .cat-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ash);
}
table.pricing-table td .btn {
  padding: 0.35rem 0.9rem;
  font-size: 0.72rem;
}

/* ---- ALTERNATIVAS: "TU DOMINIO IDEAL YA ESTÁ OCUPADO" (#7) ---- */
.alt-search {
  border: var(--border);
  background: var(--paper);
  box-shadow: var(--shadow-brutal);
  max-width: 760px;
  margin: 0 auto;
}
.alt-taken {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--navy);
  color: var(--bone);
  border-bottom: 2px solid var(--navy);
}
.alt-taken .alt-status {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  background: #e5484d;
  color: #fff;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
.alt-taken .alt-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--bone);
}
.alt-list {
  padding: 0.5rem 1.5rem 1.5rem;
}
.alt-list .alt-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  color: var(--ash);
  margin: 1rem 0 0.75rem;
}
.alt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(0, 32, 64, 0.12);
}
.alt-row:last-child { border-bottom: 0; }
.alt-row .alt-domain {
  font-weight: 700;
  color: var(--navy);
}
.alt-row .alt-domain .alt-ok {
  color: var(--cyan-dark);
  margin-right: 0.4rem;
}
.alt-row .alt-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.alt-row .alt-price {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--navy);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .tld-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .cross-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .alt-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
@media (max-width: 575px) {
  .tld-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: 1fr; }
  .cross-grid { grid-template-columns: 1fr; }
  .domain-search { flex-direction: column; }
  .domain-search button { border-left: 0; border-top: 2px solid var(--navy); padding: 1rem; }
}

/* ================================================================
   LANDINGS — extras: pasos (transferir), full-bleed dentro de
   container (extensiones) y restyle de la tabla nativa de TLDs.
   ================================================================ */

/* Romper a sangre dentro de una página con .container (domain-pricing) */
.lp-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---- PASOS (transferir) ---- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.step {
  border: var(--border);
  background: var(--paper);
  padding: 1.75rem;
}
.step .step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--cyan);
}
.step h3 {
  font-size: 1.1rem;
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 0.75rem 0 0.5rem;
}
.step p {
  color: var(--ash);
  font-size: 0.92rem;
  margin: 0;
}

/* ---- RESTYLE de la página nativa domain-pricing.tpl ---- */
.domain-pricing { padding-top: 2rem; }
.featured-tlds-container { margin-bottom: 3rem; }
.featured-tld {
  border: var(--border);
  background: var(--paper);
  padding: 1.5rem 1rem;
  text-align: center;
  margin-bottom: 1.5rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.featured-tld:hover {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-brutal);
}
.featured-tld .img-container img { max-height: 44px; width: auto; }
.featured-tld .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--navy);
  margin-top: 0.85rem;
}

/* Filtros por categoría (badges nativos) */
.tld-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
}
.tld-filters a.badge {
  border: 2px solid var(--navy);
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.74rem;
  cursor: pointer;
}
.tld-filters a.badge-success {
  background: var(--navy) !important;
  color: var(--bone) !important;
}

/* Tabla de precios nativa (DataTables) */
#tableDomainPricing { border: var(--border); }
#tableDomainPricing thead th {
  background: var(--navy);
  color: var(--bone);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  border: none;
}
#tableDomainPricing tbody td { border-bottom: 1px solid rgba(0, 32, 64, 0.12); }
.dataTables_wrapper .dataTables_filter input {
  border: var(--border) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono);
}

@media (max-width: 991px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .steps-grid { grid-template-columns: 1fr; }
}