/*
 * COMPAR CBD — Capa de Diseño Premium
 * Cargado después de compar-cbd.css — sobreescribe estilos seleccionados.
 * Estética: "Apotecario Botánico Editorial"
 */

/* ══════════════════════════════════════════
   FUENTES EDITORIALES
   Cormorant Garamond (serif, luxury display)
   DM Sans (clean, geometric body)
══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ══════════════════════════════════════════
   VARIABLES — Paleta más profunda y cálida
══════════════════════════════════════════ */
:root {
  /* Tipografía editorial */
  --font-h: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-b: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Fondo kraft más rico */
  --bg:    #EDE8DF;
  --bg2:   #DDD7CB;
  --card:  #F8F4ED;
  --card2: #F0EAE0;

  /* Tintas más cálidas */
  --ink:   #231F1A;
  --ink2:  #3E3932;
  --ink3:  #6C6456;
  --ink4:  #9C9488;

  /* Verde botánico más profundo */
  --green:      #284828;
  --green-lt:   #486A48;
  --green-pale: #C2D4BE;

  /* Ámbar más saturado */
  --amber:      #7A4918;
  --amber-lt:   #A06626;
  --amber-pale: #EDD8B0;

  /* Bordes cálidos */
  --border:  rgba(100,65,25,0.08);
  --border2: rgba(100,65,25,0.18);

  /* Radio más generoso */
  --r:    24px;
  --r-sm: 14px;
  --r-xs: 8px;

  /* Sombras con tinte cálido */
  --shadow-xs: 0 1px 4px  rgba(100,60,20,0.06);
  --shadow-sm: 0 3px 14px rgba(100,60,20,0.09);
  --shadow-md: 0 10px 36px rgba(100,60,20,0.13);
  --shadow-lg: 0 22px 64px rgba(100,60,20,0.18);
  --shadow-xl: 0 40px 100px rgba(100,60,20,0.22);

  /* Transición suave tipo Expo */
  --t: 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════
   TEXTURA GRAIN — Papel artesanal kraft
   Mix-blend multiply sobre el fondo
══════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ══════════════════════════════════════════
   CUERPO — Tipografía base
══════════════════════════════════════════ */
body {
  font-family: var(--font-b) !important;
  font-size: 15px;
  line-height: 1.68;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Serif para todo lo que es display/heading */
h1, h2, h3, h4, h5,
.nav-name,
.footer-brand-name,
.hero-h1,
.f-hero-title,
.h-hero-title,
.slider-title,
.products-title,
.f-card-name,
.h-card-name,
.prod-name,
.h-prod-name,
.slide-card-name,
.blog-title,
.cat-card-title,
.f-info-title,
.h-info-title,
.h-item-name,
.nl-title,
.sn-hero-title,
.sn-card-title,
.sn-step-title,
.sn-feat-title,
.info-text h4,
.section-title {
  font-family: var(--font-h) !important;
  letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.topbar {
  background: #1A1714 !important;
  font-family: var(--font-b) !important;
  letter-spacing: 0.07em;
}

.topbar-pill {
  border-color: rgba(255,255,255,0.12) !important;
}

/* ══════════════════════════════════════════
   NAVEGACIÓN PRINCIPAL
══════════════════════════════════════════ */
.main-nav {
  background: rgba(242,237,228,0.95) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Logo: cuadrado con trazo verde botánico */
.nav-mark {
  border-radius: 9px !important;
  border: 1.5px solid var(--green) !important;
  color: var(--green) !important;
  font-family: var(--font-h) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

.nav-name {
  font-family: var(--font-h) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

ul.nav-menu > li > a {
  font-family: var(--font-b) !important;
  font-size: 0.79rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

ul.nav-menu > li.current-menu-item > a,
ul.nav-menu > li.current-page-ancestor > a {
  border-bottom-color: var(--green) !important;
  color: var(--green) !important;
}

.nav-cart-btn {
  border-color: var(--green) !important;
  color: var(--green) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 0.48rem 1.1rem !important;
}

.nav-cart-btn:hover {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}

.cart-count-badge {
  background: var(--amber) !important;
}

/* Menú móvil */
ul.mob-nav-list > li > a {
  font-family: var(--font-h) !important;
  font-size: clamp(2.2rem, 7vw, 3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer {
  background: #181410 !important;
}

.footer-brand-name {
  font-family: var(--font-h) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #F5F0E8 !important;
}

.footer-brand p {
  font-size: 0.8rem !important;
  line-height: 1.75 !important;
  color: rgba(245,240,232,0.38) !important;
}

.footer-col h4 {
  font-family: var(--font-b) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(245,240,232,0.28) !important;
  margin-bottom: 1rem !important;
}

.footer-col ul li a {
  font-size: 0.83rem !important;
  color: rgba(245,240,232,0.52) !important;
  transition: color 0.2s, padding-left 0.25s !important;
}

.footer-col ul li a:hover {
  color: #F5F0E8 !important;
  padding-left: 5px !important;
}

.footer-copy {
  color: rgba(245,240,232,0.2) !important;
}

/* ══════════════════════════════════════════
   BOTONES GLOBALES
══════════════════════════════════════════ */
.btn-cta-solid {
  background: var(--green) !important;
  border-radius: 10px !important;
  font-family: var(--font-b) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 0.85rem 2rem !important;
  transition: all var(--t) !important;
}

.btn-cta-solid:hover {
  background: var(--ink) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.btn-cta-ghost {
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 0.85rem 1.75rem !important;
  border-color: var(--border2) !important;
  transition: all var(--t) !important;
}

.btn-cta-ghost:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: rgba(40,72,40,0.04) !important;
}

/* ══════════════════════════════════════════
   HERO SECCIONES — Tipografía editorial
══════════════════════════════════════════ */

/* Home hero */
.hero-h1 {
  font-size: clamp(2.8rem, 5.5vw, 4.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.025em !important;
}

/* Flores & Hash heroes */
.f-hero-title,
.h-hero-title {
  font-size: clamp(3rem, 6.5vw, 5.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.025em !important;
}

.f-hero-title span,
.h-hero-title span {
  font-style: italic !important;
}

/* Eyebrow (pequeño texto sobre el título) */
.f-hero-eyebrow,
.h-hero-eyebrow,
.section-eyebrow,
.slider-eyebrow,
.products-eyebrow {
  font-family: var(--font-b) !important;
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.17em !important;
  text-transform: uppercase !important;
}

/* Stats del hero */
.f-hero-stat-num {
  font-family: var(--font-h) !important;
  font-size: 2.6rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* Títulos de sección */
.slider-title,
.products-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}

/* Sobre nosotros hero */
.sn-hero-title {
  font-size: clamp(3.2rem, 7.5vw, 6rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 0.93 !important;
}

/* ══════════════════════════════════════════
   HERO RIGHT PANEL (home)
══════════════════════════════════════════ */
.hero-right {
  background: var(--card) !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--r) !important;
}

.hero-tag {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-color: var(--border2) !important;
}

/* ══════════════════════════════════════════
   TARJETAS DE PRODUCTO — Rediseño completo
══════════════════════════════════════════ */

/* Base de tarjetas: sin borde, sombra cálida */
.prod-card,
.f-card,
.h-prod-card {
  border: none !important;
  border-radius: var(--r) !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform var(--t), box-shadow var(--t) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Acento verde en la base al hacer hover */
.prod-card::after,
.f-card::after,
.h-prod-card::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--green), var(--green-lt)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--t) !important;
  border-radius: 0 !important;
  z-index: 2 !important;
}

.prod-card:hover::after,
.f-card:hover::after,
.h-prod-card:hover::after {
  transform: scaleX(1) !important;
}

/* Hover: ligera elevación con leve rotación */
.prod-card:hover,
.f-card:hover,
.h-prod-card:hover {
  transform: translateY(-7px) rotate(-0.25deg) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Zona de imagen */
.prod-card-img,
.f-card-img,
.h-prod-img {
  background: linear-gradient(145deg, #EBE4D9 0%, #E0D8CB 100%) !important;
  border-radius: calc(var(--r) - 4px) calc(var(--r) - 4px) 0 0 !important;
}

/* Nombre del producto */
.prod-name,
.f-card-name,
.h-prod-name {
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
}

/* Precio en serif con color verde */
.prod-price,
.f-card-price,
.h-prod-price {
  font-family: var(--font-h) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--green) !important;
}

/* Subtipo/categoría del producto */
.prod-cat,
.f-card-type,
.h-prod-cat {
  color: var(--amber) !important;
  font-size: 0.59rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
}

/* Badges: rectangulares estilo sello */
.prod-badge,
.f-card-badge,
.h-prod-badge,
.slide-card-badge {
  border-radius: 6px !important;
}

.b-green,
.h-badge-green {
  background: var(--green) !important;
}

.f-card-badge {
  background: var(--green) !important;
  border-radius: 6px !important;
}

.f-card-badge.new {
  background: var(--amber) !important;
}

/* Botón añadir al carrito */
.prod-cta,
.h-prod-cta {
  background: var(--green) !important;
  border-radius: 9px !important;
  font-family: var(--font-b) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 0.58rem 1rem !important;
  transition: background var(--t), transform 0.15s !important;
}

.prod-card:hover .prod-cta,
.h-prod-card:hover .h-prod-cta {
  background: var(--ink) !important;
}

/* Botón circular (flores) */
.f-card-btn {
  background: var(--green) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  transition: all var(--t) !important;
}

.f-card-btn:hover {
  background: var(--amber) !important;
  transform: none !important;
}

/* Aroma tags */
.f-card-aroma-tag {
  border-radius: 5px !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.04em !important;
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════════
   SLIDE CARDS (Novedades)
══════════════════════════════════════════ */
.slide-card {
  border-radius: var(--r) !important;
  min-height: 360px !important;
}

.slide-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-xl) !important;
}

.slide-card-name {
  font-size: clamp(1.5rem, 2.8vw, 2.3rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ══════════════════════════════════════════
   HASH ITEMS (lista)
══════════════════════════════════════════ */
.h-item {
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--t) !important;
}

.h-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: transparent !important;
}

.h-item-name {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

.h-item-btn {
  background: var(--green) !important;
  border-radius: 10px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.03em !important;
}

.h-item-btn:hover {
  background: var(--ink) !important;
}

.h-item-badge {
  background: var(--amber) !important;
  border-radius: 6px !important;
}

.h-item-price {
  font-family: var(--font-h) !important;
  color: var(--green) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

/* Hash grid */
.h-grid .h-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Hash strip */
.h-strip {
  border-radius: var(--r) !important;
  overflow: hidden !important;
  background: var(--border) !important;
}

.h-strip-item {
  background: var(--card) !important;
}

.h-strip-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════
   CATEGORY CARDS (home)
══════════════════════════════════════════ */
.cat-card {
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--card) !important;
  transition: all var(--t) !important;
}

.cat-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.cat-card-title {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ══════════════════════════════════════════
   INFO CARDS (envío, pago, etc.)
══════════════════════════════════════════ */
.info-card {
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--card) !important;
  transition: all var(--t) !important;
}

.info-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}

.info-text h4 {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ══════════════════════════════════════════
   BLOG CARDS
══════════════════════════════════════════ */
.blog-card {
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--t) !important;
}

.blog-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.blog-title {
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
}

.blog-title-sm {
  font-size: 1.0rem !important;
}

.blog-cat {
  color: var(--amber) !important;
  letter-spacing: 0.12em !important;
}

/* ══════════════════════════════════════════
   FILTER PILLS
══════════════════════════════════════════ */
.fpill,
.f-filter-btn,
.filter-btn {
  border-radius: 9px !important;
  font-size: 0.73rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 1.05rem !important;
  letter-spacing: 0.02em !important;
  transition: all var(--t) !important;
}

.fpill.active, .fpill:hover,
.f-filter-btn.active, .f-filter-btn:hover,
.filter-btn.active, .filter-btn:hover {
  background: var(--green) !important;
  border-color: var(--green) !important;
}

/* ══════════════════════════════════════════
   FAQ ITEMS
══════════════════════════════════════════ */
.f-faq-item,
.h-tipo {
  border: none !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-xs) !important;
  background: var(--card) !important;
}

.f-faq-q {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* ══════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════ */
.newsletter {
  background: #181410 !important;
}

.nl-title {
  font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.03 !important;
}

.nl-input {
  border-radius: 10px !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.btn-nl {
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* ══════════════════════════════════════════
   CHECKOUT
══════════════════════════════════════════ */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--card) !important;
}

.woocommerce-checkout #order_review {
  border: none !important;
  border-top: none !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--card) !important;
}

.woocommerce-checkout #order_review_heading {
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(40,72,40,0.08) !important;
}

.woocommerce-checkout #place_order {
  background: var(--green) !important;
  border-radius: 12px !important;
  letter-spacing: 0.04em !important;
  font-weight: 700 !important;
}

.woocommerce-checkout #place_order:hover {
  background: var(--ink) !important;
}

/* ══════════════════════════════════════════
   SINGLE PRODUCT (WooCommerce)
══════════════════════════════════════════ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button.button {
  border-radius: 10px !important;
  font-family: var(--font-b) !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════
   SCROLL REVEAL — Más suave y dramático
══════════════════════════════════════════ */
.reveal {
  opacity: 0 !important;
  transform: translateY(22px) !important;
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger para grids de tarjetas */
.prod-card:nth-child(1),  .f-card:nth-child(1),  .h-prod-card:nth-child(1)  { animation-delay: 0ms; }
.prod-card:nth-child(2),  .f-card:nth-child(2),  .h-prod-card:nth-child(2)  { animation-delay: 70ms; }
.prod-card:nth-child(3),  .f-card:nth-child(3),  .h-prod-card:nth-child(3)  { animation-delay: 140ms; }
.prod-card:nth-child(4),  .f-card:nth-child(4),  .h-prod-card:nth-child(4)  { animation-delay: 210ms; }
.prod-card:nth-child(5),  .f-card:nth-child(5),  .h-prod-card:nth-child(5)  { animation-delay: 280ms; }
.prod-card:nth-child(6),  .f-card:nth-child(6),  .h-prod-card:nth-child(6)  { animation-delay: 350ms; }
.prod-card:nth-child(7),  .f-card:nth-child(7),  .h-prod-card:nth-child(7)  { animation-delay: 420ms; }
.prod-card:nth-child(8),  .f-card:nth-child(8),  .h-prod-card:nth-child(8)  { animation-delay: 490ms; }

/* ══════════════════════════════════════════
   SOBRE NOSOTROS
══════════════════════════════════════════ */
.sn-stat-num {
  font-family: var(--font-h) !important;
  font-size: 3.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

.sn-card,
.sn-feat {
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--t) !important;
}

.sn-card:hover,
.sn-feat:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-md) !important;
}

.sn-contacto-inner {
  border-radius: var(--r) !important;
}

/* ══════════════════════════════════════════
   LEGAL WRAP
══════════════════════════════════════════ */
.legal-wrap h1 {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  letter-spacing: -0.02em !important;
}

/* ══════════════════════════════════════════
   PAGINACIÓN
══════════════════════════════════════════ */
.pagination-wrap .page-numbers {
  border-radius: 9px !important;
  border-color: var(--border2) !important;
}

.pagination-wrap .page-numbers.current,
.pagination-wrap .page-numbers:hover {
  background: var(--green) !important;
  border-color: var(--green) !important;
}

/* ══════════════════════════════════════════
   LINK VER TODO
══════════════════════════════════════════ */
.link-ver-todo {
  border-radius: 10px !important;
  font-size: 0.79rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.link-ver-todo:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
}

/* ══════════════════════════════════════════
   CARRITO
══════════════════════════════════════════ */
.woocommerce-cart .woocommerce {
  border-radius: var(--r) !important;
}

.cart_totals {
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--card) !important;
}

/* ══════════════════════════════════════════
   ANIMACIÓN KEYFRAMES — Page load shimmer
══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Entrada de la nav */
.main-nav {
  animation: fadeIn 0.5s ease both !important;
}

/* Entrada del topbar */
.topbar {
  animation: fadeIn 0.4s ease both !important;
}