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

:root {
  --red:         #C01212;
  --red-dark:    #8B0000;
  --red-light:   #D63031;
  --red-faint:   rgba(192,18,18,0.08);
  --dark:        #111111;
  --charcoal:    #1e1e1e;
  --gray-900:    #111827;
  --gray-700:    #374151;
  --gray-500:    #6b7280;
  --gray-400:    #9ca3af;
  --gray-300:    #e5e7eb;
  --gray-200:    #f3f4f6;
  --gray-100:    #f9fafb;
  --white:       #ffffff;
  --radius:      6px;
  --radius-lg:   12px;
  --shadow:      0 1px 10px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--gray-900); background: var(--white); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── NAVBAR ── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--white); border-bottom: 3px solid var(--red);
  transition: box-shadow 0.25s;
}
.navbar.scrolled { box-shadow: 0 2px 18px rgba(0,0,0,0.10); }
.nav-container {
  max-width: 1200px; margin: 0 auto; padding: 0 28px;
  height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.logo-img { height: 40px; width: auto; object-fit: contain; }
.nav-links { display: flex; list-style: none; gap: 4px; }
.nav-links a {
  display: block; padding: 7px 15px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 600; color: var(--gray-700);
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { background: var(--red-faint); color: var(--red); }
.nav-links a.active { background: var(--red); color: var(--white); }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { width: 24px; height: 2px; background: var(--gray-700); border-radius: 2px; }

/* ── HERO ── */
.hero {
  min-height: 100vh; display: flex; align-items: center; position: relative;
  overflow: hidden; padding: 100px 28px 64px;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 55%, #2d0000 100%);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 20%, rgba(192,18,18,0.22) 0%, transparent 52%),
              radial-gradient(ellipse at 10% 80%, rgba(192,18,18,0.10) 0%, transparent 45%);
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 56px;
}
.hero-content { flex: 1 1 0; min-width: 0; }
.hero-badge {
  display: inline-block; background: rgba(192,18,18,0.18); color: #ff8080;
  border: 1px solid rgba(192,18,18,0.38); padding: 5px 16px; border-radius: 100px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 3.2rem); font-weight: 800; color: var(--white);
  line-height: 1.12; margin-bottom: 18px; letter-spacing: -0.02em;
}
.hero-accent { color: #ff6b6b; }
.hero p { font-size: 1rem; color: rgba(255,255,255,0.60); margin-bottom: 36px; max-width: 500px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }

/* ── HERO VISUAL (mosaico de fotos) ── */
.hero-visual { flex: 0 0 420px; }
.hero-mosaic {
  display: flex; gap: 6px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 28px 60px rgba(0,0,0,0.55);
  margin-bottom: 12px;
}
.hm-main { flex: 0 0 58%; overflow: hidden; }
.hm-main img { width: 100%; height: 370px; object-fit: cover; display: block; transition: transform 0.5s; }
.hm-main:hover img { transform: scale(1.04); }
.hm-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.hm-item { flex: 1; overflow: hidden; }
.hm-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.hm-item:hover img { transform: scale(1.06); }
.hero-div-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-pill {
  display: inline-block; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 100px;
  padding: 4px 13px; font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.65); letter-spacing: 0.02em;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px;
  border-radius: var(--radius); font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: all 0.18s; border: 2px solid transparent;
  letter-spacing: 0.01em;
}
.btn-primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(192,18,18,0.40); }
.btn-secondary { background: var(--dark); color: var(--white); border-color: var(--dark); }
.btn-secondary:hover { background: #2a2a2a; border-color: #2a2a2a; transform: translateY(-2px); }
.btn-outline { border-color: rgba(255,255,255,0.4); color: var(--white); background: transparent; }
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-full { width: 100%; justify-content: center; }

/* ── HERO STATS ── */
.hero-stats { display: flex; align-items: center; gap: 28px; }
.stat { display: flex; flex-direction: column; }
.stat-number { font-size: 1.85rem; font-weight: 800; color: var(--white); line-height: 1; }
.stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.40); font-weight: 500; margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.stat-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.14); }

/* ── SECTIONS BASE ── */
.section { padding: 88px 28px; }
.container { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 52px; }
.section-tag {
  display: inline-block; background: var(--red-faint); color: var(--red);
  padding: 4px 14px; border-radius: 100px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 14px;
  border: 1px solid rgba(192,18,18,0.18);
}
.section-header h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.3rem); font-weight: 800;
  color: var(--gray-900); line-height: 1.2; letter-spacing: -0.02em;
}
.section-header p { font-size: 0.97rem; color: var(--gray-500); margin-top: 10px; }

/* ── NOSOTROS ── */
.bg-light { background: var(--gray-100); }
.nosotros-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.nosotros-text p { font-size: 0.97rem; color: var(--gray-700); margin-bottom: 16px; line-height: 1.75; }
.feature-list { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.feature-item { display: flex; align-items: flex-start; gap: 12px; }
.fcheck {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; background: var(--red); color: white;
  border-radius: 50%; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; margin-top: 3px;
}
.feature-item strong { display: block; font-weight: 700; color: var(--gray-900); font-size: 0.92rem; }
.feature-item p { font-size: 0.84rem; color: var(--gray-500); margin: 2px 0 0; }
.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.info-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 24px 22px;
  box-shadow: var(--shadow); border-top: 3px solid var(--red);
  transition: transform 0.2s, box-shadow 0.2s;
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.info-card h4 { font-weight: 700; font-size: 0.82rem; color: var(--red); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.info-card p { font-size: 0.85rem; color: var(--gray-500); line-height: 1.6; }

/* ── CAROUSEL ── */
.carousel-section { background: var(--white); overflow: hidden; }
.carousel-wrapper { position: relative; }
.carousel-outer { overflow: hidden; border-radius: var(--radius); }
.carousel-track {
  display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform;
}
.carousel-item {
  flex: 0 0 calc(25% - 18px); margin-right: 24px;
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); border: 1.5px solid var(--gray-300);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.carousel-item:hover { border-color: var(--red); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.carousel-item-img { aspect-ratio: 1; overflow: hidden; background: var(--gray-100); }
.carousel-item-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.carousel-item:hover .carousel-item-img img { transform: scale(1.05); }
.carousel-item-body { padding: 16px 18px 20px; }
.c-tag {
  display: inline-block; background: var(--red-faint); color: var(--red);
  font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 100px; margin-bottom: 7px;
  border: 1px solid rgba(192,18,18,0.15);
}
.carousel-item-body h3 { font-size: 0.9rem; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; line-height: 1.35; }
.carousel-item-body p {
  font-size: 0.79rem; color: var(--gray-500); line-height: 1.55; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2;
  line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-btn { font-size: 0.8rem; font-weight: 700; color: var(--red); background: none; border: none; cursor: pointer; padding: 0; }
.c-btn:hover { text-decoration: underline; }

.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.carousel-prev, .carousel-next {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--red);
  background: var(--white); color: var(--red); font-size: 1rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.carousel-prev:hover, .carousel-next:hover { background: var(--red); color: var(--white); }
.carousel-dots { display: flex; gap: 7px; align-items: center; }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300);
  border: none; cursor: pointer; transition: all 0.2s; padding: 0;
}
.carousel-dot.active { width: 20px; border-radius: 4px; background: var(--red); }
.carousel-cta { text-align: center; margin-top: 36px; }

/* ── NOVEDADES ── */
.novedades-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.novedad-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); border: 1.5px solid var(--gray-300);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.novedad-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--red); }
.nov-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--gray-100); }
.nov-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.novedad-card:hover .nov-img img { transform: scale(1.04); }
.nov-date {
  position: absolute; bottom: 10px; left: 10px; background: var(--red); color: white;
  font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 4px;
}
.nov-body { padding: 18px 20px; }
.nov-body h3 { font-size: 0.93rem; font-weight: 700; margin-bottom: 8px; line-height: 1.45; color: var(--gray-900); }
.nov-body p { font-size: 0.83rem; color: var(--gray-500); line-height: 1.65; margin-bottom: 12px; }
.nov-link { font-size: 0.82rem; font-weight: 700; color: var(--red); }
.nov-link:hover { text-decoration: underline; }

/* ── SERVICIOS ── */
.bg-primary {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 55%, #2d0000 100%);
}
.bg-primary .section-tag { background: rgba(192,18,18,0.2); color: #ff8888; border-color: rgba(192,18,18,0.35); }
.bg-primary .section-header h2 { color: var(--white); }
.servicios-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.serv-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg); padding: 28px 24px; transition: all 0.2s;
}
.serv-card:hover { background: rgba(255,255,255,0.09); border-color: rgba(0,0,0,0.5); transform: translateY(-3px); }
.serv-bar { width: 28px; height: 3px; background: var(--red); border-radius: 2px; margin-bottom: 18px; }
.serv-card h3 { font-size: 0.97rem; font-weight: 700; color: var(--white); margin-bottom: 8px; }
.serv-card p { font-size: 0.83rem; color: rgba(255,255,255,0.52); line-height: 1.68; }

/* ── CONTACTO ── */
.contacto-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 52px; align-items: start; }
.contacto-info { display: flex; flex-direction: column; gap: 20px; }
.ct-item { display: flex; align-items: flex-start; gap: 14px; }
.ct-icon {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
  width: 40px; height: 40px; background: var(--white); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); flex-shrink: 0; border-top: 2px solid var(--red);
  color: var(--red); text-transform: uppercase;
}
.ct-item h4 { font-weight: 700; font-size: 0.82rem; color: var(--red); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.ct-item p, .ct-item a { font-size: 0.86rem; color: var(--gray-700); display: block; line-height: 1.6; }
.ct-item a:hover { color: var(--red); }
.contacto-form {
  background: var(--white); border-radius: var(--radius-lg); padding: 36px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 16px;
  border-top: 4px solid var(--red);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
label { font-size: 0.8rem; font-weight: 700; color: var(--gray-700); letter-spacing: 0.03em; }
input, select, textarea {
  padding: 10px 14px; border: 1.5px solid var(--gray-300); border-radius: var(--radius);
  font-family: inherit; font-size: 0.88rem; color: var(--gray-900);
  background: var(--gray-100); outline: none; width: 100%;
  transition: border-color 0.18s, background 0.18s;
}
input:focus, select:focus, textarea:focus { border-color: var(--red); background: var(--white); }
textarea { resize: vertical; }
optgroup { font-weight: 700; color: var(--red); }

/* ── FOOTER ── */
.footer { background: var(--dark); color: rgba(255,255,255,0.55); padding: 60px 28px 28px; }
.footer-grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 24px;
}
.footer-logo { height: 42px; width: auto; filter: brightness(0) invert(1); opacity: 0.80; margin-bottom: 14px; }
.footer-brand p { font-size: 0.83rem; line-height: 1.75; margin-bottom: 16px; }
.fb-btn {
  display: inline-block; background: #1877f2; color: white !important;
  padding: 8px 16px; border-radius: var(--radius); font-size: 0.8rem; font-weight: 700;
  transition: opacity 0.18s;
}
.fb-btn:hover { opacity: 0.85; }
.footer-links h4, .footer-contact h4 {
  color: var(--white); font-weight: 700; font-size: 0.8rem;
  margin-bottom: 14px; letter-spacing: 0.07em; text-transform: uppercase;
}
.footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 0.82rem; transition: color 0.18s; }
.footer-links a:hover { color: var(--white); }
.footer-contact p, .footer-contact a { font-size: 0.82rem; margin-bottom: 7px; display: block; }
.footer-contact a:hover { color: var(--white); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;
  font-size: 0.76rem; color: rgba(255,255,255,0.28);
}

/* ── PAGE HERO (Productos / Producto) ── */
.page-hero {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0000 55%, #2d0000 100%);
  padding: 110px 28px 52px; text-align: center; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 65% 30%, rgba(192,18,18,0.22) 0%, transparent 50%);
}
.page-hero h1 { font-size: clamp(1.7rem,4vw,2.6rem); font-weight: 800; color: var(--white); position: relative; letter-spacing: -0.02em; }
.page-hero p { font-size: 0.97rem; color: rgba(255,255,255,0.60); margin-top: 10px; position: relative; }
.breadcrumb { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 16px; position: relative; }
.breadcrumb a { font-size: 0.8rem; color: rgba(255,255,255,0.50); }
.breadcrumb a:hover { color: rgba(255,255,255,0.85); }
.breadcrumb span { font-size: 0.8rem; color: rgba(255,255,255,0.30); }
.breadcrumb .current { font-size: 0.8rem; color: #ff8888; font-weight: 600; }

/* ── FILTRO ── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; }
.filter-btn {
  padding: 8px 20px; border-radius: 100px; border: 1.5px solid var(--gray-300);
  background: var(--white); color: var(--gray-500); font-size: 0.84rem; font-weight: 600;
  cursor: pointer; transition: all 0.18s;
}
.filter-btn:hover { border-color: var(--red); color: var(--red); }
.filter-btn.active { background: var(--red); border-color: var(--red); color: var(--white); }

/* ── CATÁLOGO ── */
.cat-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--gray-400); margin: 36px 0 14px; padding-bottom: 10px;
  border-bottom: 1.5px solid var(--gray-300); display: block;
}
.prod-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 6px; }
.prod-card {
  background: var(--white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); border: 1.5px solid var(--gray-300);
  transition: all 0.2s; cursor: pointer;
}
.prod-card:hover { border-color: var(--red); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.prod-img { aspect-ratio: 1; overflow: hidden; background: var(--gray-100); position: relative; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.prod-card:hover .prod-img img { transform: scale(1.05); }

/* ── STOCK BADGE ── */
.stock-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-size: 0.67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px; pointer-events: none;
}
.stock-badge.agotado      { background: #c62828; color: #fff; }
.stock-badge.pocas        { background: #e65100; color: #fff; }
.stock-badge.descontinuado{ background: #546e7a; color: #fff; }

/* Dimear imagen si está agotado */
.prod-card.stock-agotado .prod-img img   { filter: grayscale(40%) brightness(0.92); }
.prod-card.stock-agotado                 { opacity: .85; }

/* Aviso de stock en página de detalle */
.stock-notice {
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.88rem; line-height: 1.5;
  margin-bottom: 4px;
}
.stock-notice-agotado      { background: rgba(198,40,40,.08); border-left: 4px solid #c62828; color: #7f1d1d; }
.stock-notice-descontinuado{ background: rgba(84,110,122,.08); border-left: 4px solid #546e7a; color: #37474f; }
.stock-notice-pocas        { background: rgba(230,81,0,.08);  border-left: 4px solid #e65100; color: #7c2d12; }
.prod-body { padding: 14px 16px 18px; }
.prod-tag {
  display: inline-block; background: var(--red-faint); color: var(--red);
  font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; margin-bottom: 6px;
  border: 1px solid rgba(192,18,18,0.15);
}
.prod-body h3 { font-size: 0.87rem; font-weight: 700; color: var(--gray-900); margin-bottom: 5px; line-height: 1.35; }
.prod-body p {
  font-size: 0.77rem; color: var(--gray-500); line-height: 1.55; margin-bottom: 10px;
  display: -webkit-box; -webkit-line-clamp: 2;
  line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.prod-ver { font-size: 0.79rem; font-weight: 700; color: var(--red); background: none; border: none; cursor: pointer; padding: 0; }
.prod-ver:hover { text-decoration: underline; }

/* ── PRODUCTO INDIVIDUAL ── */
.producto-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.gallery-main { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-100); margin-bottom: 10px; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb {
  width: 66px; height: 66px; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  border: 1.5px solid var(--gray-300); transition: border-color 0.18s;
  flex-shrink: 0; background: var(--gray-100);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.active, .thumb:hover { border-color: var(--red); }

.producto-info { display: flex; flex-direction: column; gap: 18px; }
.producto-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--gray-500); }
.producto-back:hover { color: var(--red); }
.producto-tag {
  display: inline-block; background: var(--red-faint); color: var(--red);
  font-size: 0.72rem; font-weight: 700; padding: 3px 11px; border-radius: 100px;
  border: 1px solid rgba(192,18,18,0.18);
}
.producto-info h1 { font-size: clamp(1.4rem,3vw,1.9rem); font-weight: 800; color: var(--gray-900); line-height: 1.2; letter-spacing: -0.02em; }
.producto-desc { font-size: 0.94rem; color: var(--gray-700); line-height: 1.75; }
.aplicaciones { display: flex; flex-wrap: wrap; gap: 6px; }
.aplic-tag {
  background: var(--gray-100); color: var(--gray-700);
  font-size: 0.74rem; font-weight: 600; padding: 3px 10px; border-radius: 100px;
  border: 1px solid var(--gray-300);
}

/* ── SPEC TABLE ── */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.spec-table thead tr { background: var(--red); }
.spec-table thead th { padding: 10px 14px; text-align: left; color: var(--white); font-weight: 700; font-size: 0.78rem; }
.spec-table tbody tr:nth-child(even) { background: var(--gray-100); }
.spec-table tbody tr:nth-child(odd) { background: var(--white); }
.spec-table tbody td { padding: 9px 14px; color: var(--gray-700); border-bottom: 1px solid var(--gray-300); }
.spec-table tbody td:first-child { font-weight: 600; color: var(--gray-900); width: 46%; }
.producto-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── RELACIONADOS ── */
.relacionados-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* ── PRECIOS ── */
.precio-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--red); color: var(--white);
  font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: 100px;
  margin-bottom: 8px; letter-spacing: 0.01em;
}
.consultar-badge {
  display: inline-block; background: var(--gray-100); color: var(--gray-700);
  font-size: 0.72rem; font-weight: 600; padding: 3px 10px;
  border-radius: 100px; margin-bottom: 8px; border: 1px solid var(--gray-300);
}
.precio-section {
  background: var(--gray-100); border-radius: var(--radius-lg);
  padding: 20px 22px; border-left: 4px solid var(--red);
}
.precio-section-label {
  font-size: 0.72rem; font-weight: 700; color: var(--gray-600);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px;
}
.precio-footer {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-300);
}
.precio-footer span { font-size: 0.72rem; color: var(--gray-400); line-height: 1.5; }
.precio-tabla { width: 100%; border-collapse: collapse; font-size: 0.84rem; border-radius: var(--radius); overflow: hidden; }
.precio-tabla thead tr { background: var(--red); }
.precio-tabla thead th { padding: 9px 12px; text-align: left; color: var(--white); font-weight: 700; font-size: 0.75rem; }
.precio-tabla tbody tr:nth-child(even) { background: rgba(192,18,18,0.04); }
.precio-tabla tbody tr:nth-child(odd)  { background: var(--white); }
.precio-tabla tbody td { padding: 8px 12px; color: var(--gray-700); border-bottom: 1px solid var(--gray-300); }
.precio-tabla tbody td:first-child { font-weight: 500; color: var(--gray-900); }
.precio-tabla tbody td.precio-val { font-weight: 800; color: var(--red-dark); white-space: nowrap; font-size: 0.88rem; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 28px; right: 28px; background: var(--dark); color: white;
  padding: 14px 22px; border-radius: var(--radius); font-size: 0.86rem; font-weight: 600;
  box-shadow: var(--shadow-lg); transform: translateY(60px); opacity: 0;
  transition: all 0.26s; z-index: 9999; border-left: 4px solid var(--red);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .hero-visual { flex: 0 0 360px; }
  .hm-main img { height: 320px; }
  .prod-grid { grid-template-columns: repeat(3,1fr); }
  .relacionados-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 1024px) {
  .hero-inner { flex-direction: column; gap: 40px; align-items: flex-start; }
  .hero-visual { flex: 0 0 auto; width: 100%; max-width: 560px; }
  .hm-main img { height: 280px; }
  .nosotros-grid { grid-template-columns: 1fr; gap: 40px; }
  .carousel-item { flex: 0 0 calc(50% - 12px); }
  .servicios-grid { grid-template-columns: repeat(2,1fr); }
  .novedades-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .producto-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; gap: 0; }
  .nav-links.open {
    display: flex; position: absolute; top: 64px; left: 0; right: 0;
    background: white; border-bottom: 3px solid var(--red); padding: 12px 20px;
    box-shadow: var(--shadow-md);
  }
  .nav-links.open li { padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
  .hamburger { display: flex; }
  .hero { padding: 90px 24px 56px; }
  .hero-inner { gap: 32px; }
  .hero-visual { max-width: 100%; }
  .hm-main img { height: 220px; }
  .hero-stats { gap: 18px; }
  .info-cards { grid-template-columns: 1fr 1fr; }
  .carousel-item { flex: 0 0 100%; margin-right: 0; }
  .servicios-grid { grid-template-columns: 1fr; }
  .novedades-grid { grid-template-columns: 1fr; }
  .contacto-grid { grid-template-columns: 1fr; }
  .contacto-form { padding: 24px 18px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
  .prod-grid { grid-template-columns: repeat(2,1fr); }
  .relacionados-grid { grid-template-columns: repeat(2,1fr); }
  .section { padding: 64px 20px; }
}
@media (max-width: 480px) {
  .hero-mosaic { flex-direction: column; }
  .hm-main { flex: none; }
  .hm-main img { height: 200px; }
  .hm-col { flex-direction: row; }
  .hm-item { height: 130px; }
  .prod-grid { grid-template-columns: 1fr; }
  .info-cards { grid-template-columns: 1fr; }
  .relacionados-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; gap: 16px; }
  .stat-divider { display: none; }
}

/* ── LOADER ── */
.cas-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s;
}
.cas-loader-spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--gray-300);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: cas-spin 0.7s linear infinite;
}
@keyframes cas-spin { to { transform: rotate(360deg); } }

/* ── PROMO BANNER ── */
.promo-banner-section {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  margin-top: 64px;
}
.promo-track-wrap { overflow: hidden; }
.promo-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.promo-slide {
  flex: 0 0 100%;
  min-height: 420px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.promo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.28) 100%);
}
.promo-content {
  position: relative; z-index: 1;
  text-align: center; color: var(--white);
  padding: 48px 24px;
  max-width: 700px;
}
.promo-badge {
  display: inline-block;
  background: var(--red); color: var(--white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 20px;
  margin-bottom: 14px;
}
.promo-content h2 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800; line-height: 1.15;
  margin-bottom: 12px;
}
.promo-sub {
  font-size: 1.1rem; font-weight: 500; opacity: .9;
  margin-bottom: 8px;
}
.promo-desc {
  font-size: 0.95rem; opacity: .78;
  margin-bottom: 24px;
}
.promo-btn { font-size: .9rem; padding: 12px 30px; }

.promo-prev, .promo-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; background: rgba(255,255,255,0.15); border: none; cursor: pointer;
  color: var(--white); font-size: 1.3rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.promo-prev:hover, .promo-next:hover { background: rgba(255,255,255,0.30); }
.promo-prev { left: 16px; }
.promo-next { right: 16px; }

.promo-dots {
  position: absolute; bottom: 16px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
}
.promo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.45); border: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.promo-dot.active { background: var(--white); transform: scale(1.3); }

@media (max-width: 600px) {
  .promo-slide { min-height: 300px; }
  .promo-prev, .promo-next { width: 36px; height: 36px; font-size: 1rem; }
}

/* ── PRECIO PROMOCIONAL ── */
.precio-group { display: flex; flex-direction: column; gap: 3px; }
.precio-original-tachado {
  font-size: 0.78rem; color: var(--gray-400);
  text-decoration: line-through;
}
.precio-promo-badge {
  display: inline-block;
  background: var(--red); color: var(--white);
  font-size: 0.82rem; font-weight: 800;
  padding: 4px 12px; border-radius: 20px;
  width: fit-content;
}

/* Precio promo en pagina de detalle */
.precio-promo-section {
  background: rgba(192,18,18,0.06);
  border: 1.5px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.precio-promo-label {
  display: block;
  font-size: 0.7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
}
.precio-promo-display {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.precio-promo-valor {
  font-size: 2.1rem; font-weight: 900; color: var(--red); line-height: 1;
}
.precio-promo-original {
  font-size: 0.87rem; color: var(--gray-500);
}
.precio-promo-original del { text-decoration: line-through; }

/* ── ETIQUETAS DE CATEGORÍA CON COLOR ── */
/* aplica a .prod-tag (catálogo), .c-tag (carrusel) y .producto-tag (detalle) */
[data-cat] { transition: background 0.15s, color 0.15s; }

[data-cat="tanques"]         { background: rgba(0,188,212,.13);  color: #00697a; }
[data-cat="implementos"]     { background: rgba(76,175,80,.13);  color: #2e7d32; }
[data-cat="repuestos"]       { background: rgba(255,193,7,.16);  color: #795548; }
[data-cat="ganaderia"]       { background: rgba(0,150,136,.13);  color: #00695c; }
[data-cat="higiene"]         { background: rgba(233,30,99,.12);  color: #ad1457; }
[data-cat="industrial"]      { background: rgba(156,39,176,.12); color: #6a1b9a; }
[data-cat="plastico-div"]    { background: rgba(33,150,243,.12); color: #1565c0; }
[data-cat="metalmecanica-div"]{ background: rgba(255,152,0,.14); color: #bf360c; }

/* Botones de filtro con acento de color */
.filter-btn[data-cat="plastico-div"]:hover,
.filter-btn[data-cat="plastico-div"].active    { border-color: #1565c0; background: #1565c0; color: #fff; }
.filter-btn[data-cat="metalmecanica-div"]:hover,
.filter-btn[data-cat="metalmecanica-div"].active { border-color: #bf360c; background: #bf360c; color: #fff; }
.filter-btn[data-cat="implementos"]:hover,
.filter-btn[data-cat="implementos"].active     { border-color: #2e7d32; background: #2e7d32; color: #fff; }
.filter-btn[data-cat="repuestos"]:hover,
.filter-btn[data-cat="repuestos"].active       { border-color: #795548; background: #795548; color: #fff; }
.filter-btn[data-cat="tanques"]:hover,
.filter-btn[data-cat="tanques"].active         { border-color: #00697a; background: #00697a; color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   LIQUID GLASS — CAS Theme (rojo oscuro)
   Solo agrega; no modifica ninguna clase existente.
═══════════════════════════════════════════════════════════════════════ */

/* ── Navbar dark glass ── */
.navbar {
  background: rgba(8,2,2,0.72) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.08) !important;
  backdrop-filter: blur(28px) saturate(190%) brightness(1.08) !important;
  border-bottom: 2px solid rgba(192,18,18,0.50) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.35),
              inset 0 -1px 0 rgba(192,18,18,0.12),
              inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.navbar.scrolled {
  background: rgba(5,1,1,0.90) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.55),
              inset 0 -1px 0 rgba(192,18,18,0.22) !important;
}
.nav-links a         { color: rgba(255,255,255,0.78) !important; }
.nav-links a:hover   { background: rgba(192,18,18,0.18) !important; color: #fff !important; }
.nav-links a.active  { background: var(--red) !important; color: var(--white) !important; }
.hamburger span      { background: rgba(255,255,255,0.82) !important; }

@media (max-width: 768px) {
  .nav-links.open {
    background: rgba(8,2,2,0.96) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    backdrop-filter: blur(22px) !important;
    border-bottom-color: rgba(192,18,18,0.50) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.40) !important;
  }
  .nav-links.open li { border-bottom-color: rgba(255,255,255,0.07) !important; }
}

/* ── Botones carrito/favoritos en navbar ── */
.nav-actions-cas { display: flex; gap: 10px; align-items: center; }

.icon-btn-nav {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.11);
  -webkit-backdrop-filter: blur(22px) saturate(200%) brightness(1.14);
  backdrop-filter: blur(22px) saturate(200%) brightness(1.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-top: 1px solid rgba(255,255,255,0.40);
  box-shadow: 0 5px 20px rgba(0,0,0,0.28),
              inset 0 1px 0 rgba(255,255,255,0.32),
              inset 0 -1px 0 rgba(0,0,0,0.10);
  border-radius: 14px; cursor: pointer;
  color: white; transition: all 0.28s; font-size: 1rem;
}
.icon-btn-nav:hover {
  background: rgba(255,255,255,0.20);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.40);
}
.icon-btn-nav:active { transform: scale(0.96) translateY(0); }

/* Carrito — glow rojo */
.ibn-cart {
  border-color: rgba(192,18,18,0.35);
  box-shadow: 0 5px 20px rgba(0,0,0,0.26),
              0 0 0 1px rgba(192,18,18,0.08),
              inset 0 1px 0 rgba(255,255,255,0.28);
}
.ibn-cart:hover {
  background: rgba(192,18,18,0.22) !important;
  border-color: rgba(192,18,18,0.60);
  box-shadow: 0 10px 32px rgba(192,18,18,0.28),
              0 0 20px rgba(192,18,18,0.14),
              inset 0 1px 0 rgba(255,100,100,0.28);
}

/* Favoritos — glow rosa */
.ibn-wish {
  border-color: rgba(244,63,94,0.28);
  box-shadow: 0 5px 20px rgba(0,0,0,0.26),
              0 0 0 1px rgba(244,63,94,0.06),
              inset 0 1px 0 rgba(255,255,255,0.28);
}
.ibn-wish:hover {
  background: rgba(244,63,94,0.20) !important;
  border-color: rgba(244,63,94,0.55);
  box-shadow: 0 10px 32px rgba(244,63,94,0.24),
              0 0 20px rgba(244,63,94,0.12),
              inset 0 1px 0 rgba(255,150,150,0.28);
}

.ibn-ico { font-size: 1.35rem; line-height: 1; }
.ibn-lbl {
  font-size: 0.80rem; font-weight: 700;
  letter-spacing: 0.02em; color: rgba(255,255,255,0.90);
}

.nav-badge {
  position: absolute; top: -8px; right: -8px;
  background: var(--red); color: #fff;
  font-size: 0.64rem; font-weight: 900;
  min-width: 22px; height: 22px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  box-shadow: 0 3px 10px rgba(192,18,18,0.65);
  animation: casBadgePop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes casBadgePop { 0%{transform:scale(0) rotate(-12deg)} 100%{transform:scale(1) rotate(0)} }

@media (max-width: 480px) {
  .ibn-lbl { display: none; }
  .icon-btn-nav { padding: 9px 12px; }
}

/* ── Sección carrusel — fondo oscuro para glass ── */
.carousel-section {
  background: linear-gradient(180deg,#0d0d0d 0%,#1a0000 55%,#0d0d0d 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.carousel-section .section-tag {
  background: rgba(192,18,18,0.20) !important;
  color: #ff8888 !important;
  border-color: rgba(192,18,18,0.35) !important;
}

/* ── Glass pill carousel header (dIMAR style) ── */
.cas-carousel-header {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-top: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
  padding: 26px 32px;
  margin-bottom: 32px;
  box-shadow: inset 0 0 40px rgba(255,255,255,0.04), 0 20px 40px rgba(0,0,0,0.40);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cas-carousel-header::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.cas-ch-left { position: relative; z-index: 1; }
.cas-carousel-header h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800; color: #fff;
  letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 4px;
}
.cas-carousel-header p { color: rgba(255,255,255,0.52); font-size: 0.88rem; }
.cas-ver-catalogo {
  position: relative; z-index: 1;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); transition: color 0.2s; white-space: nowrap;
}
.cas-ver-catalogo:hover { color: #fff; }
.cas-ver-catalogo span { display: inline-block; transition: transform 0.2s; }
.cas-ver-catalogo:hover span { transform: translateX(4px); }
.carousel-cta .btn-secondary {
  background: rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-top: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  color: #fff !important; border-radius: 8px !important;
}
.carousel-cta .btn-secondary:hover {
  background: rgba(255,255,255,0.18) !important;
  transform: translateY(-2px) !important;
}

/* Orbes de fondo (necesarios para que el glass sea visible) */
.cs-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(40px); opacity: 0.50;
  transform: translateZ(0);
  will-change: transform;
}
.cs-orb-1 { width: 700px; height: 700px; background: radial-gradient(circle,#8b0000,#1a0000); top: -200px; left: -150px; }
.cs-orb-2 { width: 500px; height: 500px; background: radial-gradient(circle,#c01212,#500000); top: 0; right: -100px; opacity: 0.30; }
.cs-orb-3 { width: 400px; height: 400px; background: radial-gradient(circle,#200800,#050000); bottom: 0; left: 30%; }

/* ═══════════════════════════════════════
   3D STACKED CAROUSEL
═══════════════════════════════════════ */
.stack-clip {
  position: relative; height: 480px;
  overflow: visible;
  margin-bottom: 6px;
}
.stack-stage {
  position: absolute; inset: 0;
  overflow: visible;
  contain: layout style;
}
.stack-card {
  position: absolute; left: 50%; top: 50%;
}

/* ── Navigation arrows (glass pill — dIMAR style) ── */
.nav-arrow-3d {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 80;
  background: rgba(0,0,0,0.42);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.90); font-size: 1.1rem;
  padding: 10px 22px; border-radius: 100px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.22s;
}
.nav-arrow-3d:hover {
  background: rgba(0,0,0,0.65);
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
.nav-arrow-3d.prev { left: 12px; }
.nav-arrow-3d.next { right: 12px; }

/* ── Dots ── */
.stack-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.stack-dot {
  width: 8px; height: 8px; border-radius: 4px; border: none;
  background: rgba(192,18,18,0.30); cursor: pointer;
  transition: all 0.32s; padding: 0;
}
.stack-dot:hover { background: rgba(192,18,18,0.50); }
.stack-dot.on {
  background: var(--red); width: 24px;
  box-shadow: 0 0 8px rgba(192,18,18,0.60);
}

/* ══════════════════════════════════════════════════════
   PRODUCT CARD — imagen arriba + cuerpo abajo (glass)
══════════════════════════════════════════════════════ */
.prod-card-3d {
  width: 100%;
  overflow: hidden; border-radius: 18px;
  position: relative;
  background: rgba(14,4,4,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 18px 50px rgba(0,0,0,0.50),
              0 0 40px rgba(192,18,18,0.06),
              inset 0 1px 0 rgba(255,255,255,0.22);
  cursor: pointer;
  transition: box-shadow 0.35s, transform 0.60s cubic-bezier(0.16,1,0.3,1);
}
.stack-card.is-center .prod-card-3d {
  background: rgba(14,4,4,0.88);
  box-shadow: 0 28px 70px rgba(0,0,0,0.60),
              0 0 60px rgba(192,18,18,0.20),
              inset 0 1px 0 rgba(255,255,255,0.32);
}
.stack-card.is-center .prod-card-3d:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 36px 80px rgba(0,0,0,0.65),
              0 0 70px rgba(192,18,18,0.28);
}

/* Imagen */
.p3d-img {
  position: relative; height: 200px;
  overflow: hidden; border-radius: 18px 18px 0 0;
}
.p3d-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.60s cubic-bezier(0.16,1,0.3,1); display: block;
}
.stack-card.is-center .p3d-img img { transform: scale(1.05); }

/* Gradiente inferior sobre imagen */
.p3d-img::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to top, rgba(14,4,4,0.75) 0%, transparent 100%);
  pointer-events: none;
}

/* Promo badge (top-left sobre imagen) */
.p3d-promo {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: var(--red); color: #fff;
  font-size: 0.62rem; font-weight: 900;
  padding: 3px 10px; border-radius: 6px; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 3px 12px rgba(192,18,18,0.55);
}

/* Botón favorito circular flotante (top-right sobre imagen) — dIMAR style */
.btn-wish-circle {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.85); font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.btn-wish-circle:hover {
  background: rgba(244,63,94,0.32);
  border-color: rgba(244,63,94,0.60);
  color: #ff8fa3;
  transform: scale(1.15);
}
.btn-wish-circle.on {
  background: rgba(244,63,94,0.45);
  border-color: rgba(244,63,94,0.75);
  color: #ff4d6d;
  box-shadow: 0 0 14px rgba(244,63,94,0.45);
}
.btn-wish-circle.burst { animation: casHeartBurst 0.65s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes casHeartBurst {
  0%  { transform: scale(1); }
  28% { transform: scale(1.55) rotate(-10deg); }
  60% { transform: scale(1.12) rotate(6deg); }
  100%{ transform: scale(1); }
}

/* Cuerpo de la tarjeta */
.p3d-body { padding: 14px 16px 16px; }
.p3d-tag {
  display: inline-block; font-size: 0.60rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #ff8888; background: rgba(192,18,18,0.20);
  border: 1px solid rgba(192,18,18,0.35);
  padding: 2px 8px; border-radius: 6px; margin-bottom: 6px;
}
.p3d-name {
  font-size: 0.92rem; font-weight: 700; color: #fff;
  margin-bottom: 5px; line-height: 1.30;
}
.p3d-price-row {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 10px; min-height: 22px;
}
.p3d-old   { font-size: 0.73rem; color: rgba(255,255,255,0.38); text-decoration: line-through; }
.p3d-price { font-size: 1.00rem; font-weight: 800; color: #ff8888; }
.p3d-stock-tag         { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.45); }
.p3d-stock-tag.agotado { color: #f87171; }

/* ── Fila de botones: Carrito + Favorito ── */
.p3d-btns { display: flex; gap: 8px; margin-bottom: 8px; }

.btn-add-cart {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #C01212;
  border: none;
  border-top: 1px solid rgba(255,140,140,0.30);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.14);
  color: #fff; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.82rem; padding: 11px 10px; border-radius: 12px;
  cursor: pointer;
  transition: background 0.20s, transform 0.20s, box-shadow 0.20s;
  position: relative; overflow: hidden;
}
.btn-add-cart::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none; border-radius: inherit;
}
.btn-add-cart:hover {
  background: #d41515;
  box-shadow: 0 8px 26px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
  transform: translateY(-2px);
}
.btn-add-cart:active { transform: scale(0.96) translateY(0); }
.btn-add-cart.popped { animation: casCartPop 0.42s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes casCartPop { 0%{transform:scale(1)} 35%{transform:scale(0.93)} 100%{transform:scale(1)} }

/* Botón Favorito (rectangular, para carrusel) */
.btn-add-wish {
  flex: 0 0 auto;
  background: rgba(244,63,94,0.14);
  border: 1.5px solid rgba(244,63,94,0.38);
  border-top: 1.5px solid rgba(255,130,155,0.55);
  box-shadow: 0 2px 10px rgba(244,63,94,0.18);
  color: #ff8fa3; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.80rem; padding: 11px 11px; border-radius: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all 0.20s; white-space: nowrap;
}
.btn-add-wish .btn-txt { font-size: 0.76rem; }
.btn-add-wish:hover {
  background: rgba(244,63,94,0.28); border-color: rgba(244,63,94,0.65);
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(244,63,94,0.35);
}
.btn-add-wish.on {
  background: rgba(244,63,94,0.30); border-color: rgba(244,63,94,0.70);
  color: #ffb3c1; box-shadow: 0 4px 16px rgba(244,63,94,0.38);
}

/* Botón “Ver ficha” */
.btn-ver-prod {
  display: block; width: 100%;
  font-size: 0.75rem; font-weight: 600; color: rgba(255,200,200,0.55);
  background: transparent; border: none;
  padding: 6px 0 0; cursor: pointer; text-align: center;
  transition: color 0.18s; font-family: 'Inter', sans-serif;
}
.btn-ver-prod:hover { color: rgba(255,200,200,0.85); }

.btn-ico { font-size: 1rem; line-height: 1; }
.btn-txt { font-size: 0.8rem; }

/* btn-hover-ver oculto (solo para compatibilidad) */
.btn-hover-ver { display: none; }

/* ── Fly to cart ── */
.fly-dot-cas {
  position: fixed; width: 26px; height: 26px;
  background: rgba(192,18,18,0.35); -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,100,100,0.40); border-radius: 50%;
  z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem;
  animation: casFlyCurve 0.70s cubic-bezier(0.34,0.6,0.64,1) forwards;
}
@keyframes casFlyCurve {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  60%  { opacity: 0.88; }
  100% { transform: translate(var(--tx),var(--ty)) scale(0.05); opacity: 0; }
}

/* ═══════════════════════════════════════
   DRAWERS — Carrito y Favoritos
═══════════════════════════════════════ */
.cas-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: casOvIn 0.22s ease;
}
@keyframes casOvIn { from{opacity:0} to{opacity:1} }

.cas-drawer-wish { z-index: 1510; }
.cas-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 390px; max-width: 96vw; z-index: 1500;
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.44s cubic-bezier(0.32,1.18,0.64,1);
}
.cas-drawer.open { transform: translateX(0); }

.cas-drawer-in {
  height: 100%; display: flex; flex-direction: column;
  background: rgba(8,2,2,0.94);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  backdrop-filter: blur(36px) saturate(200%);
  border-left: 1px solid rgba(192,18,18,0.20);
  box-shadow: -10px 0 60px rgba(0,0,0,0.55), inset 1px 0 0 rgba(255,255,255,0.04);
}
.cas-drawer-hd {
  padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(192,18,18,0.05);
}
.cas-drawer-hd h2 { font-size: 1.15rem; font-weight: 700; color: #fff; }

.cas-x-btn {
  background: rgba(255,255,255,0.07); -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 1px solid rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.70); width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; transition: all 0.2s;
}
.cas-x-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

.cas-drawer-list {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.cas-drawer-list::-webkit-scrollbar { width: 3px; }
.cas-drawer-list::-webkit-scrollbar-thumb { background: rgba(192,18,18,0.30); border-radius: 2px; }

.cas-d-item {
  display: flex; align-items: center; gap: 10px; padding: 11px;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.09);
  border-top: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius: 13px;
}
.cas-d-item img { width: 54px; height: 54px; object-fit: cover; border-radius: 9px; flex-shrink: 0; }
.cas-d-info { flex: 1; min-width: 0; }
.cas-d-info h4 { font-size: 0.80rem; font-weight: 600; color: #fff; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cas-d-info span { font-size: 0.75rem; color: #ff8888; font-weight: 700; }

.cas-qty-row {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  border-top: 1px solid rgba(255,255,255,0.20); border-radius: 8px; padding: 2px;
}
.cas-qty-btn {
  background: rgba(255,255,255,0.08); border: none; color: #fff;
  width: 24px; height: 24px; border-radius: 5px;
  cursor: pointer; font-size: 0.95rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.18s;
}
.cas-qty-btn:hover { background: rgba(192,18,18,0.32); }
.cas-qty-num { font-size: 0.82rem; font-weight: 800; color: #fff; min-width: 16px; text-align: center; }

.cas-rm-btn {
  background: rgba(192,18,18,0.10); border: 1px solid rgba(192,18,18,0.22);
  color: #f87171; width: 28px; height: 28px; border-radius: 7px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; flex-shrink: 0; transition: all 0.2s;
}
.cas-rm-btn:hover { background: rgba(192,18,18,0.28); }

.cas-drawer-ft { display: none; padding: 16px; border-top: 1px solid rgba(255,255,255,0.07); }
.cas-sub-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cas-sub-lbl { font-size: 0.84rem; color: rgba(255,255,255,0.48); }
.cas-sub-amt { font-size: 1.28rem; font-weight: 900; color: #fff; }

.cas-checkout-btn {
  width: 100%;
  background: rgba(192,18,18,0.22);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(192,18,18,0.38);
  border-top: 1px solid rgba(192,18,18,0.68);
  box-shadow: 0 4px 20px rgba(192,18,18,0.16), inset 0 1px 0 rgba(255,100,100,0.14);
  color: #fff; font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 0.97rem; padding: 13px;
  border-radius: 12px; cursor: pointer; transition: all 0.28s;
}
.cas-checkout-btn:hover {
  background: rgba(192,18,18,0.38);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(192,18,18,0.28), inset 0 1px 0 rgba(255,100,100,0.22);
}

.cas-mv-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-top: 1px solid rgba(255,255,255,0.28);
  color: #ffcaca; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 0.72rem; padding: 5px 10px; border-radius: 8px;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
}
.cas-mv-btn:hover { background: rgba(192,18,18,0.22); }

.cas-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; color: rgba(255,255,255,0.28);
}
.cas-empty .e-ico { font-size: 2.8rem; }
.cas-empty p { font-size: 0.90rem; }

@media (max-width: 768px) { .stack-clip { height: 440px; } }
@media (max-width: 480px) { .cas-drawer { width: 100vw; } .stack-clip { height: 420px; } }

/* ═══════════════════════════════════════════════════════════════════════
   BOTONES — Rediseño completo limpio y moderno
   ═══════════════════════════════════════════════════════════════════════ */

/* ── .btn-primary — Rojo sólido con brillo ── */
.btn-primary {
  background: rgba(26, 26, 26, 0.80) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.50) !important;
  box-shadow: 0 4px 20px rgba(192,18,18,0.42), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  color: #fff !important;
  position: relative !important; overflow: hidden !important;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s !important;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, transparent 55%);
  pointer-events: none; border-radius: inherit;
}
.btn-primary:hover {
  background: rgba(40, 40, 40, 0.90) !important;
  box-shadow: 0 8px 28px rgba(192,18,18,0.54), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transform: translateY(-2px) !important;
}
.btn-primary:active { transform: scale(0.97) translateY(0) !important; }

/* ── .btn-outline — Borde blanco translúcido (sobre fondo oscuro del hero) ── */
.btn-outline {
  background: rgba(255,255,255,0.08) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255,255,255,0.50) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
  color: #fff !important;
  transition: background 0.18s, border-color 0.18s, transform 0.18s !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.85) !important;
  transform: translateY(-2px) !important;
}
.btn-outline:active { transform: scale(0.97) !important; }

/* ── .filter-btn — Sólido blanco, se vuelve rojo al activar ── */
.filter-btn {
  background: #fff !important;
  border: 1.5px solid var(--gray-300) !important;
  color: var(--gray-700) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.14s, box-shadow 0.18s !important;
}
.filter-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 3px 12px rgba(0,0,0,0.12) !important; }
.filter-btn.active, .filter-btn:focus-visible {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(192,18,18,0.32) !important;
}

/* ── .fb-btn — Facebook azul sólido ── */
.fb-btn {
  background: rgba(24, 119, 242, 0.85) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.50) !important;
  box-shadow: 0 4px 16px rgba(24,119,242,0.38), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  color: #fff !important;
  position: relative !important; overflow: hidden !important;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s !important;
}
.fb-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none; border-radius: inherit;
}
.fb-btn:hover {
  background: rgba(21, 101, 216, 0.90) !important;
  box-shadow: 0 8px 24px rgba(24,119,242,0.52), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transform: translateY(-2px) !important;
}

/* ── .nov-link — Vínculo de texto rojo ── */
.nov-link {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--red) !important; font-weight: 700 !important; padding: 0 !important;
  transition: gap 0.18s, opacity 0.18s !important;
}
.nov-link:hover { opacity: 0.72 !important; gap: 10px !important; transform: none !important; }

/* ── Flechas del banner de promociones ── */
.promo-prev, .promo-next {
  background: rgba(0,0,0,0.48) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.28) !important;
  transition: background 0.18s, transform 0.18s !important;
}
.promo-prev:hover, .promo-next:hover {
  background: rgba(192,18,18,0.72) !important;
  transform: scale(1.12) !important;
}

/* ── Flechas del carrusel principal ── */
.carousel-prev, .carousel-next {
  background: rgba(26, 26, 26, 0.80) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.50) !important;
  box-shadow: 0 4px 16px rgba(192,18,18,0.40), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  color: #fff !important;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s !important;
}
.carousel-prev:hover, .carousel-next:hover {
  background: rgba(40, 40, 40, 0.90) !important;
  transform: scale(1.12) !important;
  box-shadow: 0 8px 24px rgba(192,18,18,0.55), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* ── Botones de nave (carrito + favoritos) ── */
.icon-btn-nav {
  background: rgba(255,255,255,0.10) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-top: 1px solid rgba(255,255,255,0.38) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.icon-btn-nav:hover {
  background: rgba(255,255,255,0.18) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.26) !important;
}
.ibn-cart:hover { background: rgba(192,18,18,0.26) !important; border-color: rgba(192,18,18,0.55) !important; }
.ibn-wish:hover { background: rgba(244,63,94,0.24) !important; border-color: rgba(244,63,94,0.55) !important; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-outline, .btn-secondary, .filter-btn, .fb-btn,
  .promo-prev, .promo-next, .carousel-prev, .carousel-next,
  .btn-add-cart, .btn-add-wish, .btn-ver-prod, .icon-btn-nav {
    transition: none !important;
  }
}
/* -- PREMIUM BUTTON STYLES -- */
.btn-add-cart, .c-btn, .prod-ver {
  background: linear-gradient(135deg, #e53935 0%, #c62828 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all 0.25s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 8px !important;
}
.btn-add-cart:hover, .c-btn:hover, .prod-ver:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(198, 40, 40, 0.4) !important;
  background: linear-gradient(135deg, #ef5350 0%, #d32f2f 100%) !important;
}

.btn-add-wish {
  background: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  color: #495057 !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}
.btn-add-wish:hover {
  background: #e9ecef !important;
  color: #212529 !important;
  transform: translateY(-2px) !important;
}
.btn-add-wish.on {
  background: #ffe3e3 !important;
  border-color: #ffc9c9 !important;
  color: #fa5252 !important;
}

.p3d-btns {
  display: flex !important;
  flex-direction: column !important; /* Stack vertically for cleaner look */
  gap: 8px !important;
  margin-bottom: 8px !important;
}
/* -- WHATSAPP BUTTON -- */

.wa-float:hover {
  transform: scale(1.1) translateY(-4px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.6);
  color: #fff;
}


/* -- CAROUSEL WIDER -- */
.carousel-section .container {
  max-width: 1400px !important;
}
.carousel-item { flex: 0 0 calc(25% - 18px) !important; }

/* -- WA BUTTON pulse ring -- */
.wa-float::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.5);
  animation: wa-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* -- UTILITY CLASSES TO REPLACE INLINE STYLES -- */
.nav-icons { display: flex; gap: 10px; margin-left: 15px; }
.text-gray-500 { color: var(--gray-500); }
.mt-64 { margin-top: 64px; }
.text-left { text-align: left; }
.mb-24 { margin-bottom: 24px; }
.text-xl { font-size: 1.4rem; }
.d-none { display: none; }

.c-btn, .prod-ver {
  display: block; width: 100%; text-align: center;
  background: rgba(26, 26, 26, 0.80) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.50) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.16) !important;
  color: #fff !important; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.82rem; padding: 10px; border-radius: 12px;
  cursor: pointer; transition: all 0.2s !important;
  text-decoration: none !important; margin-top: 10px;
}
.c-btn:hover, .prod-ver:hover {
  background: rgba(40, 40, 40, 0.90) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transform: translateY(-2px) !important;
  color: #fff !important; text-decoration: none !important;
}
.wa-float {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  width: 60px !important;
  height: 60px !important;
  background-color: #25d366 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(37,211,102,0.4) !important;
  z-index: 999999 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}
.wa-float svg {
  width: 35px !important;
  height: 35px !important;
  fill: #ffffff !important;
}
/*
 * redesign.css — Industrias CAS · Rediseño profesional para ventas
 * Cargado DESPUÉS de styles.css, sin romper estilos existentes.
 */

/* ══════════════════════════════════════════════════════
   VARIABLES ADICIONALES
══════════════════════════════════════════════════════ */
:root {
  --green-wa: #25d366;
  --green-wa-dark: #1da851;
  --brand-red: #C01212;
  --brand-dark: #0a0808;
  --transition-smooth: all 0.28s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════════════════
   NAVBAR — Botón "Pedir cotización"
══════════════════════════════════════════════════════ */
.nav-quote-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  background: var(--brand-red);
  color: #fff !important;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 14px rgba(192,18,18,0.40);
  border: 1px solid rgba(255,255,255,0.14);
  white-space: nowrap;
}
.nav-quote-cta:hover {
  background: #a30f0f;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(192,18,18,0.55);
}
@media (max-width: 900px) { .nav-quote-cta { display: none; } }

/* ══════════════════════════════════════════════════════
   HERO — Fondo animado
══════════════════════════════════════════════════════ */
.rds-hero { position: relative; overflow: hidden; }

/* Neutralizar el ::before del hero original para usar el nuevo fondo */
.rds-hero::before { display: none !important; }

.rds-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #080202 0%, #160000 50%, #220000 100%);
  z-index: 0;
}

.rds-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(192,18,18,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,18,18,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.rds-orb {
  position: absolute; border-radius: 50%;
  filter: blur(50px); pointer-events: none;
  animation: rds-float 8s ease-in-out infinite alternate;
}
.rds-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(192,18,18,0.30) 0%, transparent 70%);
  top: -150px; right: -100px;
  animation-duration: 9s;
}
.rds-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(192,18,18,0.18) 0%, transparent 70%);
  bottom: -80px; left: -80px;
  animation-duration: 11s;
}
.rds-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,80,80,0.12) 0%, transparent 70%);
  top: 40%; left: 35%;
  animation-duration: 7s;
}
@keyframes rds-float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.08); }
}

/* ══════════════════════════════════════════════════════
   HERO — Contenido
══════════════════════════════════════════════════════ */
.rds-hero-inner { position: relative; z-index: 2; }
.rds-hero-content { position: relative; z-index: 2; }

.rds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(192,18,18,0.14);
  border: 1px solid rgba(192,18,18,0.32);
  color: #ff9999;
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.rds-eyebrow-dot {
  width: 7px; height: 7px;
  background: #ff6b6b; border-radius: 50%;
  animation: rds-blink 1.6s ease-in-out infinite;
}
@keyframes rds-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

.rds-h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 22px !important;
}
.rds-accent {
  font-style: normal;
  color: transparent !important;
  background: linear-gradient(90deg, #ff6b6b 0%, #ff3333 50%, #ff8c8c 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.rds-hero-desc {
  font-size: 1.02rem !important;
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.78 !important;
  max-width: 520px !important;
  margin-bottom: 38px !important;
}
.rds-hero-desc strong { color: rgba(255,255,255,0.90); }

/* ── CTAs ── */
.rds-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}

.rds-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: var(--brand-red);
  color: #fff;
  border-radius: 10px;
  font-weight: 700; font-size: 0.92rem;
  text-decoration: none;
  transition: var(--transition-smooth);
  box-shadow: 0 6px 22px rgba(192,18,18,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative; overflow: hidden;
}
.rds-btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.rds-btn-primary:hover {
  background: #a30f0f;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(192,18,18,0.60);
  color: #fff;
}

.rds-btn-wa {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px;
  background: var(--green-wa);
  color: #fff;
  border-radius: 10px;
  font-weight: 700; font-size: 0.92rem;
  text-decoration: none;
  transition: var(--transition-smooth);
  box-shadow: 0 6px 20px rgba(37,211,102,0.40);
  border: 1px solid rgba(255,255,255,0.15);
}
.rds-btn-wa:hover {
  background: var(--green-wa-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(37,211,102,0.55);
  color: #fff;
}

.rds-btn-ghost {
  display: inline-flex; align-items: center;
  padding: 14px 24px;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.82);
  border-radius: 10px;
  font-weight: 600; font-size: 0.92rem;
  text-decoration: none;
  transition: var(--transition-smooth);
}
.rds-btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.60);
  color: #fff;
  transform: translateY(-2px);
}

/* ── Stats del hero ── */
.rds-hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.rhs-item { display: flex; flex-direction: column; }
.rhs-num {
  font-size: 2rem; font-weight: 900; color: #fff; line-height: 1;
}
.rhs-num sup { font-size: 0.65em; vertical-align: super; }
.rhs-lbl {
  font-size: 0.68rem; color: rgba(255,255,255,0.40);
  font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 4px; line-height: 1.4;
}
.rhs-sep { width: 1px; height: 38px; background: rgba(255,255,255,0.12); }

/* ══════════════════════════════════════════════════════
   HERO — Visual derecho
══════════════════════════════════════════════════════ */
.rds-hero-visual { position: relative; z-index: 2; }

.rds-img-frame {
  display: flex; gap: 8px;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 32px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06);
  margin-bottom: 14px;
}

.rds-img-main {
  flex: 0 0 58%;
  position: relative; overflow: hidden;
}
.rds-img-main img {
  width: 100%; height: 380px;
  object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.rds-img-main:hover img { transform: scale(1.04); }

.rds-img-badge {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  background: rgba(8,2,2,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(192,18,18,0.28);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.rds-ib-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff6b6b; flex-shrink: 0;
  animation: rds-blink 2s ease-in-out infinite;
}
.rds-img-badge strong { font-size: 0.82rem; font-weight: 700; color: #fff; display: block; }
.rds-img-badge small { font-size: 0.68rem; color: rgba(255,255,255,0.50); }

.rds-img-side {
  flex: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.rds-img-card {
  flex: 1; overflow: hidden; position: relative;
  background: var(--brand-dark);
}
.rds-img-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.rds-img-card:hover img { transform: scale(1.07); }
.rds-ic-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.85);
  text-align: center;
}

.rds-pills-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rds-pill {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.60);
  padding: 5px 14px; border-radius: 100px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .rds-img-main img { height: 240px; }
  .rds-img-frame { flex-direction: column; }
  .rds-img-side { flex-direction: row; height: 140px; }
  .rds-img-card { height: 100%; }
  .rds-h1 { font-size: 2rem !important; }
  .rds-cta-group { flex-direction: column; }
  .rds-btn-primary, .rds-btn-wa, .rds-btn-ghost { justify-content: center; text-align: center; }
  .rds-hero-stats { gap: 18px; }
  .rhs-sep { height: 28px; }
}

/* ══════════════════════════════════════════════════════
   TRUST MARQUEE
══════════════════════════════════════════════════════ */
.rds-marquee-wrap {
  background: linear-gradient(90deg, #0a0202 0%, #150000 50%, #0a0202 100%);
  border-top: 1px solid rgba(192,18,18,0.20);
  border-bottom: 1px solid rgba(192,18,18,0.20);
  overflow: hidden;
  padding: 14px 0;
  position: relative;
  z-index: 10;
}
.rds-marquee-wrap::before,
.rds-marquee-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 100px;
  z-index: 2; pointer-events: none;
}
.rds-marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, #0a0202 0%, transparent 100%);
}
.rds-marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, #0a0202 0%, transparent 100%);
}

.rds-marquee-track {
  display: flex;
  animation: rds-marquee 30s linear infinite;
}
@keyframes rds-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.rds-marquee-track:hover { animation-play-state: paused; }

.rds-marquee-set {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.rds-mi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.58);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0 24px;
  white-space: nowrap;
}
.rds-mi svg { color: var(--brand-red); flex-shrink: 0; }

.rds-mi-dot {
  color: rgba(192,18,18,0.40);
  font-size: 0.5rem;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   POR QUÉ ELEGIRNOS
══════════════════════════════════════════════════════ */
.rds-why-section {
  background: var(--gray-100, #f9fafb);
}

.rds-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .rds-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .rds-why-grid { grid-template-columns: 1fr; } }

.rds-why-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 26px;
  border: 1.5px solid #e5e7eb;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
.rds-why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.rds-why-card:hover::before { transform: scaleX(1); }
.rds-why-card:hover {
  border-color: rgba(192,18,18,0.30);
  box-shadow: 0 10px 36px rgba(0,0,0,0.10);
  transform: translateY(-4px);
}

.rds-wc-icon {
  width: 52px; height: 52px;
  background: rgba(192,18,18,0.08);
  border: 1px solid rgba(192,18,18,0.16);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-red);
  margin-bottom: 18px;
  transition: var(--transition-smooth);
}
.rds-why-card:hover .rds-wc-icon {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  transform: scale(1.08);
}

.rds-why-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
  line-height: 1.3;
}
.rds-why-card p {
  font-size: 0.86rem;
  color: #6b7280;
  line-height: 1.72;
}

/* ══════════════════════════════════════════════════════
   STATS COUNTER
══════════════════════════════════════════════════════ */
.rds-stats-section {
  background: linear-gradient(135deg, #080202 0%, #1a0000 55%, #220000 100%);
  padding: 72px 28px;
  position: relative;
  overflow: hidden;
}
.rds-stats-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(192,18,18,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(192,18,18,0.10) 0%, transparent 50%);
  pointer-events: none;
}

.rds-stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.rds-sc-item {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 0 52px;
}
.rds-sc-divider {
  width: 1px; height: 64px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.rds-sc-num {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
  font-feature-settings: "tnum";
}
.rds-sc-lbl {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 768px) {
  .rds-stats-grid { gap: 28px; }
  .rds-sc-divider { display: none; }
  .rds-sc-item { padding: 0 24px; }
}

/* ══════════════════════════════════════════════════════
   NOSOTROS — mejoras
══════════════════════════════════════════════════════ */
.rds-nosotros-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.rds-btn-dark-outline {
  display: inline-flex; align-items: center;
  padding: 11px 22px;
  border: 2px solid #374151;
  background: transparent;
  color: #374151;
  border-radius: 8px;
  font-weight: 700; font-size: 0.88rem;
  text-decoration: none;
  transition: var(--transition-smooth);
}
.rds-btn-dark-outline:hover {
  background: #111827;
  border-color: #111827;
  color: #fff;
  transform: translateY(-2px);
}

.rds-ic-emoji {
  font-size: 1.5rem;
  margin-bottom: 8px;
  display: block;
}

/* ══════════════════════════════════════════════════════
   NOVEDADES — header flex
══════════════════════════════════════════════════════ */
.rds-section-hdr-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.rds-section-hdr-flex h2 { margin-top: 8px; }
.rds-ver-mas-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--brand-red);
  text-decoration: none;
  transition: opacity 0.18s;
  white-space: nowrap;
  padding-bottom: 4px;
}
.rds-ver-mas-link:hover { opacity: 0.70; }

/* ══════════════════════════════════════════════════════
   SERVICIOS — íconos
══════════════════════════════════════════════════════ */
.rds-serv-icon {
  width: 48px; height: 48px;
  background: rgba(192,18,18,0.15);
  border: 1px solid rgba(192,18,18,0.25);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #ff8080;
  margin-bottom: 16px;
  transition: var(--transition-smooth);
}
.serv-card:hover .rds-serv-icon {
  background: rgba(192,18,18,0.30);
  border-color: rgba(192,18,18,0.50);
  transform: scale(1.08);
}
/* Oculta la barra decorativa anterior */
.rds-servicios-grid .serv-bar { display: none; }

/* ══════════════════════════════════════════════════════
   CONTACTO — WhatsApp promo bar
══════════════════════════════════════════════════════ */
.rds-wa-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #0d2e18 0%, #0a3d1e 100%);
  border: 1px solid rgba(37,211,102,0.25);
  border-radius: 14px;
  padding: 22px 28px;
  margin-bottom: 44px;
  box-shadow: 0 6px 28px rgba(37,211,102,0.12);
}

.rds-wap-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rds-wap-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--green-wa);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,211,102,0.45);
}

.rds-wap-left strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}
.rds-wap-left span {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

.rds-wap-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: var(--green-wa);
  color: #fff;
  border-radius: 10px;
  font-weight: 700; font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 16px rgba(37,211,102,0.40);
  flex-shrink: 0;
}
.rds-wap-btn:hover {
  background: var(--green-wa-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37,211,102,0.55);
  color: #fff;
}

@media (max-width: 600px) {
  .rds-wa-promo { flex-direction: column; text-align: center; }
  .rds-wap-left { flex-direction: column; text-align: center; }
  .rds-wap-btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   CONTACTO — nota del form
══════════════════════════════════════════════════════ */
.rds-form-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: -4px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f3f4f6;
}
.rds-form-note {
  font-size: 0.78rem;
  color: #9ca3af;
  text-align: center;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════
   FOOTER — mejoras
══════════════════════════════════════════════════════ */
/* mantener emoji + texto en la misma línea */
.footer-contact p {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  margin-bottom: 7px !important;
}
.footer-contact a { display: inline !important; }
.rds-footer-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* botones redes footer — simétricos */
.rds-footer-soc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 0.80rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.rds-footer-soc-btn svg { flex-shrink: 0; }

.rds-footer-soc-btn--fb {
  background: rgba(24,119,242,0.80);
  border-color: rgba(24,119,242,0.40);
  box-shadow: 0 2px 10px rgba(24,119,242,0.22);
  color: #fff !important;
}
.rds-footer-soc-btn--fb:hover {
  background: rgba(21,101,216,0.95);
  border-color: rgba(21,101,216,0.60);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(24,119,242,0.38);
  color: #fff !important;
}

.rds-footer-soc-btn--wa {
  background: rgba(37,211,102,0.16);
  border-color: rgba(37,211,102,0.32);
  color: #6ee7a0 !important;
  box-shadow: 0 2px 10px rgba(37,211,102,0.12);
}
.rds-footer-soc-btn--wa svg { fill: #6ee7a0; }
.rds-footer-soc-btn--wa:hover {
  background: rgba(37,211,102,0.28);
  border-color: rgba(37,211,102,0.50);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(37,211,102,0.28);
  color: #fff !important;
}
.rds-footer-soc-btn--wa:hover svg { fill: #fff; }

/* ══════════════════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════════════════ */
.rds-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.rds-why-card.rds-reveal,
.novedad-card.rds-reveal { transition-duration: 0.60s; }
.rds-reveal:nth-child(2) { transition-delay: 0.07s; }
.rds-reveal:nth-child(3) { transition-delay: 0.14s; }
.rds-reveal:nth-child(4) { transition-delay: 0.21s; }
.rds-reveal:nth-child(5) { transition-delay: 0.28s; }
.rds-reveal:nth-child(6) { transition-delay: 0.35s; }

.rds-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ══════════════════════════════════════════════════════
   CONTACTO — info panel unificado sin cuadrados
══════════════════════════════════════════════════════ */
.rds-contacto-info-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 36px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #eef0f4;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.rci-item {
  flex: 1 1 calc(33.333% - 1px);
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  border-right: 1px solid #f0f2f6;
  border-bottom: 1px solid #f0f2f6;
  transition: background 0.18s ease;
}
.rci-item:hover { background: #fafbfc; }

/* quitar borde derecho en col 3 */
.rci-item:nth-child(3n) { border-right: none; }
/* quitar borde inferior en fila 2 (items 4-6) */
.rci-item:nth-child(n+4) { border-bottom: none; }

.rci-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px;
  background: rgba(192,18,18,0.07);
  color: #C01212;
  display: flex; align-items: center; justify-content: center;
}
.rci-icon--fb {
  background: rgba(24,119,242,0.08);
  color: #1877f2;
}
.rci-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.rci-lbl {
  font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: #9ca3af;
}
.rci-val {
  font-size: 0.87rem; font-weight: 500;
  color: #111827; line-height: 1.45;
  text-decoration: none; white-space: normal;
}
a.rci-val:hover { color: #C01212; }
.rci-item--fb a.rci-val:hover { color: #1565d8; }

@media (max-width: 820px) {
  .rci-item {
    flex: 1 1 50%;
    min-width: 0;
  }
  .rci-item:nth-child(3n)   { border-right: 1px solid #f0f2f6; }
  .rci-item:nth-child(2n)   { border-right: none; }
  .rci-item:nth-child(n+4)  { border-bottom: 1px solid #f0f2f6; }
  .rci-item:nth-child(n+5)  { border-bottom: none; }
}
@media (max-width: 500px) {
  .rci-item {
    flex: 1 1 100%;
    border-right: none !important;
    border-bottom: 1px solid #f0f2f6 !important;
  }
  .rci-item:last-child { border-bottom: none !important; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — ajustes globales
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rds-stats-grid { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .rds-sc-item { padding: 16px 28px; }
  .rds-sc-divider { display: none; }
}

@media (max-width: 480px) {
  .rhs-num { font-size: 1.6rem; }
  .rds-hero-stats { gap: 14px; }
  .rhs-sep { display: none; }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .rds-orb,
  .rds-marquee-track,
  .rds-eyebrow-dot,
  .rds-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/*
 * buttons.css — Sistema de botones unificado CAS
 * Estética: píldoras redondeadas, tamaño delicado,
 * hover suave y satisfactorio, sin excesos.
 */

/* ═══════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════ */
:root {
  --cas-ease:     cubic-bezier(0.34, 0, 0.46, 1);
  --cas-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cas-dur:      0.26s;
  --cas-dur-fast: 0.12s;
  --cas-r:        100px;   /* radio píldora — todos los botones */
  --shimmer: linear-gradient(
    108deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%
  );
}

/* ═══════════════════════════════════════════════════
   BASE — overflow + cursor en todos
═══════════════════════════════════════════════════ */
.btn, .rds-btn-primary, .rds-btn-wa, .rds-btn-ghost,
.rds-btn-dark-outline, .nav-quote-cta, .rds-wap-btn,
.rds-footer-wa-btn, .fb-btn, .btn-add-cart, .btn-add-wish,
.c-btn, .prod-ver, .btn-ver-prod, .carousel-prev,
.carousel-next, .promo-prev, .promo-next,
.filter-btn, .cas-checkout-btn, .icon-btn-nav {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}
/* Flechas del carrusel 3D — rectangulares redondeadas, en los bordes, altura de botones */
.nav-arrow-3d {
  position: absolute !important;
  top: auto !important;
  bottom: 72px !important;
  transform: none !important;
  border-radius: 10px !important;
  padding: 22px 11px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}
.nav-arrow-3d:hover {
  transform: scale(1.06) !important;
}
.nav-arrow-3d.prev { left: 0 !important; }
.nav-arrow-3d.next { right: 0 !important; }

/* el flotante necesita sus propios position/overflow para no romper fixed */
.wa-float {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════
   SHIMMER — brillo diagonal en hover (botones sólidos)
═══════════════════════════════════════════════════ */
.btn-primary::after,
.rds-btn-primary::after,
.rds-btn-wa::after,
.nav-quote-cta::after,
.rds-wap-btn::after,
.fb-btn::after,
.btn-add-cart::after,
.cas-checkout-btn::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important; left: -80% !important;
  width: 55% !important; height: 200% !important;
  background: var(--shimmer) !important;
  transform: skewX(-12deg) !important;
  transition: left 0.50s var(--cas-ease-out) !important;
  pointer-events: none !important; z-index: 2 !important;
}
.btn-primary:hover::after,
.rds-btn-primary:hover::after,
.rds-btn-wa:hover::after,
.nav-quote-cta:hover::after,
.rds-wap-btn:hover::after,
.fb-btn:hover::after,
.btn-add-cart:hover::after,
.cas-checkout-btn:hover::after {
  left: 130% !important;
}

/* ═══════════════════════════════════════════════════
   FEEDBACK DE CLICK — leve presión táctil
═══════════════════════════════════════════════════ */
.btn-primary:active, .rds-btn-primary:active,
.rds-btn-wa:active, .btn-secondary:active,
.nav-quote-cta:active, .rds-wap-btn:active,
.fb-btn:active, .btn-add-cart:active,
.cas-checkout-btn:active, .rds-btn-dark-outline:active,
.rds-btn-ghost:active, .btn-outline:active {
  transform: scale(0.96) translateY(1px) !important;
  transition-duration: var(--cas-dur-fast) !important;
}
.filter-btn:active, .carousel-prev:active,
.carousel-next:active, .nav-arrow-3d:active {
  transform: scale(0.93) !important;
  transition-duration: var(--cas-dur-fast) !important;
}

/* ═══════════════════════════════════════════════════
   BTN-PRIMARY — rojo, píldora
═══════════════════════════════════════════════════ */
.btn-primary {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  padding: 10px 22px !important;
  background: #C01212 !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cas-r) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  box-shadow: 0 3px 12px rgba(192,18,18,0.28) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.btn-primary:hover {
  background: #a80f0f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(192,18,18,0.40) !important;
  color: #fff !important;
}
/* Variante sobre fondo oscuro (carrusel) */
.carousel-section .btn-primary,
.bg-primary .btn-primary {
  background: rgba(192,18,18,0.22) !important;
  backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(192,18,18,0.40) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.25) !important;
}
.carousel-section .btn-primary:hover,
.bg-primary .btn-primary:hover {
  background: rgba(192,18,18,0.34) !important;
  box-shadow: 0 6px 20px rgba(192,18,18,0.30) !important;
}
.btn-full { width: 100% !important; justify-content: center !important; }

/* ═══════════════════════════════════════════════════
   BTN-SECONDARY — oscuro, píldora
═══════════════════════════════════════════════════ */
.btn-secondary {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  padding: 10px 22px !important;
  background: #111827 !important;
  color: #fff !important;
  border: 1.5px solid transparent !important;
  border-radius: var(--cas-r) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.86rem !important; font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.16) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.btn-secondary:hover {
  background: #1e293b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.26) !important;
  color: #fff !important;
}
/* Variante carrusel */
.carousel-cta .btn-secondary,
.carousel-section .btn-secondary {
  background: rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 3px 14px rgba(0,0,0,0.22) !important;
}
.carousel-cta .btn-secondary:hover,
.carousel-section .btn-secondary:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.30) !important;
  box-shadow: 0 7px 22px rgba(0,0,0,0.30) !important;
}

/* ═══════════════════════════════════════════════════
   BTN-OUTLINE — ghost sobre fondo oscuro (hero)
═══════════════════════════════════════════════════ */
.btn-outline {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  padding: 10px 22px !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(255,255,255,0.32) !important;
  color: rgba(255,255,255,0.85) !important;
  border-radius: var(--cas-r) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.86rem !important; font-weight: 600 !important;
  text-decoration: none !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease) !important;
}
.btn-outline:hover {
  background: rgba(255,255,255,0.13) !important;
  border-color: rgba(255,255,255,0.65) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════
   HERO CTAs
═══════════════════════════════════════════════════ */
.rds-btn-primary {
  border-radius: var(--cas-r) !important;
  padding: 11px 24px !important;
  font-size: 0.88rem !important; font-weight: 600 !important;
  background: #C01212 !important;
  box-shadow: 0 3px 14px rgba(192,18,18,0.30) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.rds-btn-primary:hover {
  background: #a80f0f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 20px rgba(192,18,18,0.42) !important;
  color: #fff !important;
}

.rds-btn-wa {
  border-radius: var(--cas-r) !important;
  padding: 11px 22px !important;
  font-size: 0.88rem !important; font-weight: 600 !important;
  background: #25d366 !important;
  box-shadow: 0 3px 14px rgba(37,211,102,0.28) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.rds-btn-wa:hover {
  background: #1dbe5a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 20px rgba(37,211,102,0.42) !important;
  color: #fff !important;
}

.rds-btn-ghost {
  border-radius: var(--cas-r) !important;
  padding: 11px 22px !important;
  font-size: 0.88rem !important; font-weight: 600 !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease) !important;
}
.rds-btn-ghost:hover {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,0.60) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

.rds-btn-dark-outline {
  border-radius: var(--cas-r) !important;
  padding: 9px 20px !important;
  font-size: 0.84rem !important; font-weight: 600 !important;
  border: 1.5px solid #d1d5db !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.rds-btn-dark-outline:hover {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 16px rgba(0,0,0,0.18) !important;
}

/* ═══════════════════════════════════════════════════
   NAV — Cotización pill
═══════════════════════════════════════════════════ */
.nav-quote-cta {
  border-radius: 100px !important;
  padding: 9px 20px !important;
  font-size: 0.82rem !important; font-weight: 700 !important;
  background: #C01212 !important;
  box-shadow: 0 4px 14px rgba(192,18,18,0.40) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.nav-quote-cta:hover {
  background: #a80f0f !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(192,18,18,0.38) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════
   NAV — Carrito / Favoritos
═══════════════════════════════════════════════════ */

.icon-btn-nav {
  overflow: visible !important;
  border-radius: 100px !important;
  padding: 9px 18px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important;
  color: #fff !important;
  letter-spacing: 0.02em !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease) !important;
}
.icon-btn-nav:hover {
  background: rgba(255,255,255,0.14) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.30) !important;
}

/* Badge inline — dentro del botón, nunca recortado */
.nav-badge {
  display: none !important;
  background: #e53935 !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-size: .58rem !important;
  font-weight: 800 !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}
.nav-badge.vis {
  display: inline-flex !important;
}

/* ═══════════════════════════════════════════════════
   WhatsApp — barra promo
═══════════════════════════════════════════════════ */
.rds-wap-btn {
  border-radius: var(--cas-r) !important;
  padding: 10px 22px !important;
  font-size: 0.85rem !important; font-weight: 600 !important;
  background: #25d366 !important;
  box-shadow: 0 3px 12px rgba(37,211,102,0.30) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.rds-wap-btn:hover {
  background: #1dbe5a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(37,211,102,0.42) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════
   Facebook
═══════════════════════════════════════════════════ */
.fb-btn {
  border-radius: var(--cas-r) !important;
  padding: 7px 15px !important;
  font-size: 0.79rem !important; font-weight: 600 !important;
  background: #1877f2 !important;
  box-shadow: 0 2px 10px rgba(24,119,242,0.26) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.fb-btn:hover {
  background: #1565d8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(24,119,242,0.40) !important;
  opacity: 1 !important; color: #fff !important;
}

/* ═══════════════════════════════════════════════════
   Footer WhatsApp pill
═══════════════════════════════════════════════════ */
.rds-footer-wa-btn {
  border-radius: var(--cas-r) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease) !important;
}
.rds-footer-wa-btn:hover {
  background: rgba(37,211,102,0.25) !important;
  border-color: rgba(37,211,102,0.45) !important;
  color: #fff !important; transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════
   ADD TO CART
═══════════════════════════════════════════════════ */
.btn-add-cart {
  background: #C01212 !important;
  border: none !important; color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important; font-size: 0.80rem !important;
  padding: 9px 12px !important;
  border-radius: var(--cas-r) !important;
  box-shadow: 0 2px 10px rgba(192,18,18,0.24) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.btn-add-cart:hover {
  background: #a80f0f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 16px rgba(192,18,18,0.36) !important;
}
.btn-add-cart.popped {
  animation: casCartPop 0.42s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes casCartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.90); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════
   ADD TO WISHLIST
═══════════════════════════════════════════════════ */
.btn-add-wish {
  background: rgba(244,63,94,0.08) !important;
  border: 1.5px solid rgba(244,63,94,0.24) !important;
  color: #f87171 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important; font-size: 0.80rem !important;
  padding: 9px 11px !important;
  border-radius: var(--cas-r) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.btn-add-wish:hover {
  background: rgba(244,63,94,0.18) !important;
  border-color: rgba(244,63,94,0.52) !important;
  color: #ff8fa3 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(244,63,94,0.20) !important;
}
.btn-add-wish.on {
  background: rgba(244,63,94,0.22) !important;
  border-color: rgba(244,63,94,0.62) !important;
  color: #ffb3c1 !important;
}

/* ═══════════════════════════════════════════════════
   VER FICHA (dark glass, en carrusel)
═══════════════════════════════════════════════════ */
.c-btn {
  display: block !important; width: 100% !important; text-align: center !important;
  padding: 8px 12px !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.65) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important; font-weight: 600 !important;
  border-radius: var(--cas-r) !important;
  text-decoration: none !important; margin-top: 8px !important;
  box-shadow: none !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease) !important;
}
.c-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.26) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════
   VER PRODUCTO (catálogo — texto link rojo)
═══════════════════════════════════════════════════ */
.prod-ver {
  display: inline-block !important;
  width: auto !important; padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: none !important;
  color: #C01212 !important;
  font-size: 0.80rem !important; font-weight: 700 !important;
  border-radius: 0 !important; margin-top: 6px !important;
  box-shadow: none !important;
  transition: color var(--cas-dur) var(--cas-ease) !important;
}
.prod-ver:hover {
  color: #8B0000 !important;
  text-decoration: none !important;
  background: transparent !important;
  transform: none !important;
}

/* btn-ver-prod (texto minimalista en cards 3D) */
.btn-ver-prod {
  background: transparent !important; border: none !important;
  color: rgba(255,200,200,0.48) !important;
  font-size: 0.72rem !important; font-weight: 500 !important;
  padding: 5px 0 !important; text-align: center !important;
  width: 100% !important; display: block !important;
  transition: color var(--cas-dur) var(--cas-ease) !important;
}
.btn-ver-prod:hover { color: rgba(255,200,200,0.85) !important; }

/* ═══════════════════════════════════════════════════
   CHECKOUT (drawer)
═══════════════════════════════════════════════════ */
.cas-checkout-btn {
  background: rgba(192,18,18,0.18) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(192,18,18,0.36) !important;
  box-shadow: 0 3px 14px rgba(192,18,18,0.14) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important; font-size: 0.90rem !important;
  padding: 12px !important;
  border-radius: var(--cas-r) !important;
  width: 100% !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.cas-checkout-btn:hover {
  background: rgba(192,18,18,0.30) !important;
  border-color: rgba(192,18,18,0.58) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(192,18,18,0.24) !important;
}

/* ═══════════════════════════════════════════════════
   DRAWER — qty / remove / mover
═══════════════════════════════════════════════════ */
.cas-qty-btn { transition: background var(--cas-dur-fast) var(--cas-ease) !important; }
.cas-rm-btn {
  border-radius: 8px !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease) !important;
}
.cas-rm-btn:hover { background: rgba(192,18,18,0.28) !important; transform: scale(1.08) !important; }
.cas-mv-btn { border-radius: 8px !important; transition: background var(--cas-dur) var(--cas-ease) !important; }

/* ═══════════════════════════════════════════════════
   FLECHAS CARRUSEL
═══════════════════════════════════════════════════ */
.carousel-prev, .carousel-next {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  background: rgba(192,18,18,0.12) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(192,18,18,0.28) !important;
  color: #ff9999 !important;
  font-size: 0.95rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.carousel-prev:hover, .carousel-next:hover {
  background: #C01212 !important; border-color: #C01212 !important;
  color: #fff !important; transform: scale(1.10) !important;
  box-shadow: 0 4px 14px rgba(192,18,18,0.36) !important;
}

/* ═══════════════════════════════════════════════════
   FLECHAS PROMO
═══════════════════════════════════════════════════ */
.promo-prev, .promo-next {
  background: rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.82) !important;
  transition: background var(--cas-dur) var(--cas-ease), transform var(--cas-dur) var(--cas-ease) !important;
}
.promo-prev:hover, .promo-next:hover {
  background: rgba(192,18,18,0.60) !important;
  transform: scale(1.08) translateY(-50%) !important;
}

/* ═══════════════════════════════════════════════════
   FLECHA 3D
═══════════════════════════════════════════════════ */
.nav-arrow-3d {
  background: rgba(0,0,0,0.34) !important;
  backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.82) !important;
  border-radius: 100px !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.nav-arrow-3d:hover {
  background: rgba(192,18,18,0.44) !important;
  border-color: rgba(192,18,18,0.55) !important;
  transform: translateY(-50%) scale(1.05) !important;
  box-shadow: 0 4px 14px rgba(192,18,18,0.24) !important;
}

/* ═══════════════════════════════════════════════════
   FILTROS (pills catálogo)
═══════════════════════════════════════════════════ */
.filter-btn {
  padding: 7px 18px !important;
  border-radius: var(--cas-r) !important;
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  color: #6b7280 !important;
  font-size: 0.81rem !important; font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.filter-btn:hover {
  border-color: #C01212 !important; color: #C01212 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(192,18,18,0.12) !important;
  background: rgba(192,18,18,0.03) !important;
}
.filter-btn.active {
  background: #C01212 !important; border-color: #C01212 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(192,18,18,0.30) !important;
  transform: translateY(-1px) !important;
}
.filter-btn[data-cat="plastico-div"].active,
.filter-btn[data-cat="plastico-div"]:hover {
  background: #1565c0 !important; border-color: #1565c0 !important;
  color: #fff !important; box-shadow: 0 3px 10px rgba(21,101,192,0.28) !important;
}
.filter-btn[data-cat="metalmecanica-div"].active,
.filter-btn[data-cat="metalmecanica-div"]:hover {
  background: #bf360c !important; border-color: #bf360c !important;
  color: #fff !important; box-shadow: 0 3px 10px rgba(191,54,12,0.28) !important;
}
.filter-btn[data-cat="implementos"].active,
.filter-btn[data-cat="implementos"]:hover {
  background: #2e7d32 !important; border-color: #2e7d32 !important;
  color: #fff !important; box-shadow: 0 3px 10px rgba(46,125,50,0.28) !important;
}
.filter-btn[data-cat="repuestos"].active,
.filter-btn[data-cat="repuestos"]:hover {
  background: #795548 !important; border-color: #795548 !important;
  color: #fff !important; box-shadow: 0 3px 10px rgba(121,85,72,0.28) !important;
}
.filter-btn[data-cat="tanques"].active,
.filter-btn[data-cat="tanques"]:hover {
  background: #00697a !important; border-color: #00697a !important;
  color: #fff !important; box-shadow: 0 3px 10px rgba(0,105,122,0.28) !important;
}

/* ═══════════════════════════════════════════════════
   LINKS de texto
═══════════════════════════════════════════════════ */
.nov-link {
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  color: #C01212 !important; font-weight: 600 !important; font-size: 0.82rem !important;
  background: none !important; border: none !important; padding: 0 !important;
  text-decoration: none !important;
  transition: gap var(--cas-dur) var(--cas-ease), color var(--cas-dur) var(--cas-ease) !important;
}
.nov-link:hover { gap: 9px !important; color: #a80f0f !important; opacity: 1 !important; transform: none !important; }

.cas-ver-catalogo {
  font-size: 0.74rem !important; font-weight: 600 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important; text-decoration: none !important;
  transition: color var(--cas-dur) var(--cas-ease) !important;
}
.cas-ver-catalogo:hover { color: #fff !important; }
.cas-ver-catalogo span { display: inline-block !important; transition: transform var(--cas-dur) var(--cas-ease-out) !important; }
.cas-ver-catalogo:hover span { transform: translateX(5px) !important; }

.rds-ver-mas-link {
  font-size: 0.82rem !important;
  transition: opacity var(--cas-dur) var(--cas-ease) !important;
}
.rds-ver-mas-link:hover { opacity: 0.60 !important; }

/* ═══════════════════════════════════════════════════
   FAVORITO CIRCULAR (sobre imagen)
═══════════════════════════════════════════════════ */
.btn-wish-circle {
  transition:
    background var(--cas-dur) var(--cas-ease),
    border-color var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease-out),
    box-shadow var(--cas-dur) var(--cas-ease) !important;
}
.btn-wish-circle:hover {
  background: rgba(244,63,94,0.26) !important;
  border-color: rgba(244,63,94,0.58) !important;
  color: #ff8fa3 !important; transform: scale(1.15) !important;
}
.btn-wish-circle.on {
  background: rgba(244,63,94,0.42) !important;
  border-color: rgba(244,63,94,0.72) !important;
  color: #ff4d6d !important;
  box-shadow: 0 0 12px rgba(244,63,94,0.38) !important;
}
.btn-wish-circle.burst { animation: casHeartBurst 0.55s cubic-bezier(0.34,1.56,0.64,1) !important; }

/* ═══════════════════════════════════════════════════
   WHATSAPP FLOTANTE
═══════════════════════════════════════════════════ */
.wa-float {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  background-color: #25d366 !important;
  box-shadow: 0 3px 14px rgba(37,211,102,0.36) !important;
  transition:
    transform 0.30s var(--cas-ease-out),
    box-shadow 0.30s var(--cas-ease),
    opacity 0.30s ease !important;
}
.wa-float--hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.82) translateY(10px) !important;
}
.wa-float:hover {
  transform: scale(1.10) translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(37,211,102,0.50) !important;
  color: #fff !important;
}
.wa-float:active { transform: scale(1.03) translateY(0) !important; }
.wa-float::after {
  content: '' !important; position: absolute !important;
  inset: -4px !important; border-radius: 50% !important;
  border: 2px solid rgba(37,211,102,0.38) !important;
  animation: waPulse 2.6s ease-out infinite !important;
  pointer-events: none !important;
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: 0.65; }
  70%  { transform: scale(1.38); opacity: 0; }
  100% { transform: scale(1.38); opacity: 0; }
}
.wa-float svg { width: 32px !important; height: 32px !important; fill: #fff !important; }

/* ═══════════════════════════════════════════════════
   DOTS
═══════════════════════════════════════════════════ */
.carousel-dot, .promo-dot, .stack-dot {
  transition:
    background var(--cas-dur) var(--cas-ease),
    width var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease) !important;
  cursor: pointer !important;
}
.promo-dot:hover, .carousel-dot:hover { transform: scale(1.20) !important; }

/* ═══════════════════════════════════════════════════
   CERRAR DRAWER (X)
═══════════════════════════════════════════════════ */
.cas-x-btn {
  transition:
    background var(--cas-dur) var(--cas-ease),
    color var(--cas-dur) var(--cas-ease),
    transform var(--cas-dur) var(--cas-ease) !important;
}
.cas-x-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  transform: rotate(90deg) scale(1.06) !important;
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* enhancements.css — Industrias CAS · Visual Upgrades */

/* ══ DRAWER FAVORITOS — botón "Ver productos" en estado vacío ══ */
.cas-wish-go-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 11px 26px;
  background: rgba(192,18,18,0.22);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(192,18,18,0.38);
  border-top: 1px solid rgba(192,18,18,0.68);
  box-shadow: 0 4px 20px rgba(192,18,18,0.16), inset 0 1px 0 rgba(255,100,100,0.14);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.90rem;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.28s;
}
.cas-wish-go-btn:hover {
  background: rgba(192,18,18,0.38);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(192,18,18,0.28), inset 0 1px 0 rgba(255,100,100,0.22);
  color: #fff;
}

/* ══ NUESTROS CLIENTES — Carrusel de logos ══ */
.cas-clientes-section {
  padding: 56px 0 48px;
  background: #080202;
  overflow: hidden;
}
.logos-marquee-wrap {
  overflow: hidden;
  margin-top: 36px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.logos-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logos-scroll 40s linear infinite;
}
.logos-marquee-track:hover { animation-play-state: paused; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logos-mi {
  padding: 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.logos-mi img {
  height: 54px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.85) opacity(0.5);
  transition: filter 0.35s ease;
  display: block;
}
.logos-mi:hover img {
  filter: grayscale(0) brightness(1) opacity(1);
}

/* ══ SCROLL PROGRESS BAR ══ */
#cas-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #8B0000, #C01212, #ff5555, #C01212);
  background-size: 300% 100%;
  animation: cas-progress-shine 3s linear infinite;
  z-index: 10000;
  box-shadow: 0 0 12px rgba(192,18,18,.7), 0 0 24px rgba(192,18,18,.3);
  transition: width .1s linear;
  pointer-events: none;
}
@keyframes cas-progress-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* ══ CUSTOM SCROLLBAR ══ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #080202; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C01212, #8B0000);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #ff4444; }
* { scrollbar-width: thin; scrollbar-color: #C01212 #080202; }

/* ══ NAVBAR DIRECTION-AWARE ══ */
.navbar {
  transition: transform .45s cubic-bezier(0.4,0,0.2,1),
              background .35s ease,
              box-shadow .35s ease !important;
}
.navbar.nav-hidden {
  transform: translateY(-120%) !important;
}

/* ══ MOUSE SPOTLIGHT ══ */
#cas-spotlight {
  position: fixed;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(192,18,18,0.055) 0%,
    rgba(192,18,18,0.02) 40%,
    transparent 70%
  );
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 1;
  will-change: transform;
  mix-blend-mode: screen;
}

/* ══ HERO PARTICLES CANVAS ══ */
#cas-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}
/* Ensure hero content stays above canvas */
.rds-hero-inner {
  position: relative;
  z-index: 2;
}
.rds-hero-bg {
  z-index: 1 !important;
}

/* ══ HERO ACCENT GRADIENT ANIMATED ══ */
.rds-accent {
  background: linear-gradient(90deg, #C01212 0%, #ff6666 40%, #fff 55%, #ff6666 70%, #C01212 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: cas-accent-flow 5s linear infinite;
}
@keyframes cas-accent-flow {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* ══ HERO STATS GRADIENT TEXT ══ */
.rhs-num {
  background: linear-gradient(180deg, #ffffff 50%, rgba(255,255,255,.45) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══ HERO PILLS HOVER ══ */
.rds-pill {
  transition: background .22s, border-color .22s, transform .22s !important;
  cursor: default;
}
.rds-pill:hover {
  background: rgba(192,18,18,.18) !important;
  border-color: rgba(192,18,18,.5) !important;
  transform: translateY(-2px) scale(1.03);
}

/* ══ ORB ENHANCED ANIMATIONS ══ */
.rds-orb-1 {
  animation: orbDrift1 14s ease-in-out infinite !important;
}
.rds-orb-2 {
  animation: orbDrift2 18s ease-in-out infinite !important;
}
.rds-orb-3 {
  animation: orbDrift3 22s ease-in-out infinite !important;
}
@keyframes orbDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  25%     { transform: translate(45px,-35px) scale(1.08); }
  50%     { transform: translate(-25px,25px) scale(0.96); }
  75%     { transform: translate(15px,40px) scale(1.04); }
}
@keyframes orbDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-55px,40px) scale(1.12); }
  66%     { transform: translate(35px,-30px) scale(0.92); }
}
@keyframes orbDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(30px,55px) scale(1.1); }
  70%     { transform: translate(-20px,-25px) scale(0.95); }
}

/* ══ EYEBROW DOT PULSE ══ */
.rds-eyebrow-dot {
  animation: dotPulse 2.5s ease-in-out infinite !important;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,18,18,.6); }
  50%     { box-shadow: 0 0 0 6px rgba(192,18,18,0); }
}

/* ══ SECTION GRADIENT DIVIDER ══ */
.cas-sec-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(192,18,18,.08) 20%,
    rgba(192,18,18,.35) 50%,
    rgba(192,18,18,.08) 80%,
    transparent 100%);
  margin: 0;
}

/* ══ SCROLL REVEAL SYSTEM ══ */
.cas-sr {
  opacity: 0;
}
.cas-sr-up    { transform: translateY(48px); }
.cas-sr-left  { transform: translateX(-50px); }
.cas-sr-right { transform: translateX(50px); }
.cas-sr-scale { transform: scale(0.86); }
.cas-sr-fade  { /* opacity only */ }

.cas-sr {
  transition:
    opacity  .72s cubic-bezier(0.4,0,0.2,1),
    transform .72s cubic-bezier(0.4,0,0.2,1);
}
.cas-sr.cas-visible {
  opacity: 1;
  transform: none !important;
}

/* Stagger delays */
.cas-d0 { transition-delay: 0s !important; }
.cas-d1 { transition-delay: .08s !important; }
.cas-d2 { transition-delay: .16s !important; }
.cas-d3 { transition-delay: .24s !important; }
.cas-d4 { transition-delay: .32s !important; }
.cas-d5 { transition-delay: .40s !important; }
.cas-d6 { transition-delay: .48s !important; }

/* ══ WHY CARDS ENHANCED ══ */
.rds-why-card {
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(0.4,0,0.2,1),
              box-shadow .28s ease,
              border-color .28s ease !important;
  will-change: transform;
}
/* Shimmer on hover */
.rds-why-card::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.05),
    transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.rds-why-card:hover::after { left: 140%; }

/* Stagger existing why cards */
.rds-why-card:nth-child(1) { transition-delay: .0s; }
.rds-why-card:nth-child(2) { transition-delay: .08s; }
.rds-why-card:nth-child(3) { transition-delay: .16s; }
.rds-why-card:nth-child(4) { transition-delay: .24s; }
.rds-why-card:nth-child(5) { transition-delay: .32s; }
.rds-why-card:nth-child(6) { transition-delay: .40s; }

/* ══ SERVICE CARDS ENHANCED ══ */
.serv-card {
  position: relative;
  overflow: hidden;
  transition: transform .28s cubic-bezier(0.4,0,0.2,1),
              box-shadow .28s ease !important;
  will-change: transform;
}
.serv-card::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.06),
    transparent);
  transform: skewX(-18deg);
  transition: left .5s ease;
  pointer-events: none;
}
.serv-card:hover::after { left: 140%; }

/* ══ NOVEDADES CARD ENHANCED ══ */
.novedad-card {
  transition: transform .28s cubic-bezier(0.4,0,0.2,1),
              box-shadow .28s ease !important;
  will-change: transform;
}
.novedad-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.35) !important;
}
.nov-img { overflow: hidden !important; }
.nov-img img {
  transition: transform .55s cubic-bezier(0.4,0,0.2,1) !important;
}
.novedad-card:hover .nov-img img {
  transform: scale(1.09) !important;
}

/* ══ INFO CARDS ENHANCED ══ */
.info-card {
  transition: transform .28s cubic-bezier(0.4,0,0.2,1),
              box-shadow .28s ease,
              border-color .28s ease !important;
  will-change: transform;
}
.info-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 28px 52px rgba(0,0,0,.38) !important;
  border-color: rgba(192,18,18,.28) !important;
}

/* ══ FEATURE ITEMS ══ */
.feature-item {
  transition: transform .22s ease;
}
.feature-item:hover { transform: translateX(7px); }

.fcheck {
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #C01212, #8B0000);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  box-shadow: 0 0 14px rgba(192,18,18,.35);
  transition: box-shadow .22s, transform .22s;
}
.feature-item:hover .fcheck {
  box-shadow: 0 0 22px rgba(192,18,18,.6);
  transform: scale(1.12);
}

/* ══ STATS NUMBERS GLOW ══ */
.rds-sc-num {
  transition: text-shadow .3s;
}
.rds-sc-item:hover .rds-sc-num {
  text-shadow: 0 0 50px rgba(192,18,18,.55), 0 0 100px rgba(192,18,18,.25);
}

/* ══ WA PROMO ENHANCED ══ */
.rds-wa-promo {
  transition: box-shadow .4s ease, transform .28s ease !important;
}
.rds-wa-promo:hover {
  box-shadow: 0 0 0 4px rgba(37,211,102,.12), 0 20px 50px rgba(37,211,102,.12) !important;
  transform: translateY(-2px);
}

/* ══ CONTACT INFO ITEMS ══ */
.rci-item {
  transition: transform .22s ease, background .22s ease !important;
}
.rci-item:hover {
  transform: translateX(5px);
  background: rgba(192,18,18,.04) !important;
}

/* ══ MARQUEE PAUSE ON HOVER ══ */
.rds-marquee-wrap:hover .rds-marquee-track {
  animation-play-state: paused;
}

/* ══ SECTION HEADER h2 UNDERLINE REVEAL ══ */
.section-header h2,
.cas-ch-left h2,
.rds-section-hdr-flex h2 {
  display: inline-block;
  position: relative;
}
.section-header h2::after,
.cas-ch-left h2::after,
.rds-section-hdr-flex h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  height: 3px; width: 0;
  background: linear-gradient(90deg, #C01212, #ff6666);
  border-radius: 2px;
  transition: width .7s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 10px rgba(192,18,18,.4);
}
.cas-visible .section-header h2::after,
.section-header.cas-visible h2::after,
.cas-ch-left.cas-visible h2::after,
.rds-section-hdr-flex.cas-visible h2::after,
h2.underline-revealed::after {
  width: 100%;
}

/* ══ NAV LINKS HOVER ══ */
.nav-links a {
  position: relative;
  transition: color .22s !important;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -3px;
  width: 0; height: 2px;
  background: #C01212;
  border-radius: 1px;
  transition: width .22s ease, left .22s ease;
  box-shadow: 0 0 6px rgba(192,18,18,.5);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%; left: 0;
}

/* ══ FOOTER LINKS HOVER ══ */
.footer-links ul li a {
  position: relative;
  transition: color .2s, padding-left .2s !important;
}
.footer-links ul li a:hover { padding-left: 8px; color: #C01212 !important; }

/* ══ SECTION TAG ENHANCED ══ */
.section-tag {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.section-tag::before {
  content: '';
  position: absolute;
  left: -100%; top: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(192,18,18,.3), transparent);
  animation: tagShine 3s ease-in-out infinite;
}
@keyframes tagShine {
  0%   { left: -100%; }
  50%,100% { left: 150%; }
}

/* ══ SMOOTH SCROLL GLOBAL ══ */
html { scroll-behavior: smooth; }

/* ══ MAGNETIC BUTTON WRAPPER ══ */
.cas-magnetic {
  display: inline-block;
  transition: transform .4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* ══════════════════════════════════════════
   HERO VISUAL — COMPLETE 3D REDESIGN
══════════════════════════════════════════ */

/* ── H1 más impactante ── */
.rds-h1 {
  font-size: clamp(2.8rem, 5vw, 5.4rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -.025em !important;
  font-weight: 900 !important;
}

/* ── Descripción hero ── */
.rds-hero-desc {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.72) !important;
  max-width: 520px;
}

/* ── Hero layout full width ── */
.rds-hero-inner {
  gap: 48px !important;
  align-items: center !important;
}

/* ── Contenedor visual ── */
.rds-hero-visual {
  position: relative;
  flex: 1;
  max-width: 600px !important;
}

/* Aureola de glow detrás del frame */
.rds-hero-visual::before {
  content: '';
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(ellipse 65% 55% at 48% 52%,
      rgba(192,18,18,.14) 0%,
      rgba(192,18,18,.04) 50%,
      transparent 75%);
  pointer-events: none;
  z-index: 0;
  animation: heroAura 7s ease-in-out infinite;
}
@keyframes heroAura {
  0%,100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ── Frame 3D principal ── */
.rds-img-frame {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 1.65fr 1fr !important;
  gap: 10px !important;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(-13deg) rotateX(3deg) !important;
  transform-origin: 55% center;
  transition: transform .7s cubic-bezier(0.34,1.2,0.64,1),
              filter .5s ease !important;
  will-change: transform;
  filter:
    drop-shadow(0 50px 90px rgba(0,0,0,.65))
    drop-shadow(0 0 80px rgba(192,18,18,.07)) !important;
}
/* JS controla el transform en mousemove — clase reset en mouseleave */
.rds-img-frame.cas-reset {
  transform: perspective(1400px) rotateY(-13deg) rotateX(3deg) !important;
}

/* ── Imagen principal ── */
.rds-img-main {
  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  aspect-ratio: 4/3 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: #120000 !important;
  transform: translateZ(24px);
  box-shadow:
    0 0 0 1px rgba(192,18,18,.18),
    0 24px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Reflejo en el borde superior (rim light) */
.rds-img-main::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.25) 40%,
    rgba(192,18,18,.4) 65%,
    transparent 100%);
  z-index: 10;
  pointer-events: none;
}

.rds-img-main img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .65s cubic-bezier(0.4,0,0.2,1) !important;
}
.rds-img-main:hover img { transform: scale(1.05) !important; }

/* Overlay gradiente sobre imagen principal */
.rds-img-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 50%, rgba(192,18,18,.06) 100%),
    linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
  z-index: 2;
}

/* ── Badge glassmorphism ── */
.rds-img-badge {
  position: absolute !important;
  bottom: 14px !important; left: 14px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  background: rgba(8,2,2,.72) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(192,18,18,.08) !important;
  max-width: calc(100% - 28px) !important;
}

.rds-ib-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25) !important;
  animation: badgeLive 2s ease-in-out infinite !important;
  flex-shrink: 0;
}
@keyframes badgeLive {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
  50%      { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
}

.rds-img-badge strong {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: block !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}
.rds-img-badge small {
  font-size: 9px !important;
  color: rgba(255,255,255,.5) !important;
  display: block;
}

/* ── Side cards ── */
.rds-img-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transform: translateZ(10px);
}

.rds-img-card {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: #120000 !important;
  transition:
    transform .3s cubic-bezier(0.4,0,0.2,1),
    border-color .3s,
    box-shadow .3s !important;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}

.rds-img-card:hover {
  transform: translateY(-4px) scale(1.025) !important;
  border-color: rgba(192,18,18,.4) !important;
  box-shadow:
    0 20px 45px rgba(0,0,0,.55),
    0 0 20px rgba(192,18,18,.12) !important;
}

.rds-img-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .55s cubic-bezier(0.4,0,0.2,1) !important;
}
.rds-img-card:hover img { transform: scale(1.1) !important; }

/* Gradient overlay en side cards */
.rds-img-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important; z-index: 1 !important;
  background: linear-gradient(to top,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.1) 55%,
    transparent 100%) !important;
  pointer-events: none;
}

/* Rim light on side cards */
.rds-img-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.18), transparent);
  z-index: 2;
}

.rds-ic-label {
  position: absolute !important;
  bottom: 9px !important; left: 10px !important; right: 10px !important;
  z-index: 3 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .04em !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

/* ── Pills row redesign ── */
.rds-pills-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  position: relative;
  z-index: 2;
}

.rds-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 14px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: all .22s ease !important;
  letter-spacing: .03em !important;
}
.rds-pill:hover {
  background: rgba(192,18,18,.16) !important;
  border-color: rgba(192,18,18,.45) !important;
  color: #fff !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(192,18,18,.15) !important;
}

/* ── Stats hero mejorados ── */
.rds-hero-stats {
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  margin-top: 8px !important;
}
.rhs-num {
  font-size: 2rem !important;
  font-weight: 900 !important;
  background: linear-gradient(180deg, #fff 40%, rgba(255,255,255,.5) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -.02em;
}
.rhs-lbl {
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.4) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════
   NEW HERO — cas-hero
══════════════════════════════════════════ */

/* ── Wrapper ── */
.cas-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #070202;
}

/* ── Background ── */
.cas-hbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Noise texture via SVG filter */
.cas-hbg-noise {
  position: absolute;
  inset: 0;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Perspective grid */
.cas-hbg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(192,18,18,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,18,18,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 65% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 65% 40%, black 30%, transparent 80%);
}

/* Orbs */
.cas-horb {
  position: absolute;
  border-radius: 50%;
  filter: blur(45px);
  pointer-events: none;
}
.cas-horb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(192,18,18,.18) 0%, transparent 70%);
  top: -100px; right: 5%;
  animation: orb1d 14s ease-in-out infinite;
}
.cas-horb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(192,18,18,.10) 0%, transparent 70%);
  bottom: -60px; left: 10%;
  animation: orb2d 18s ease-in-out infinite;
}
.cas-horb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(80,0,0,.22) 0%, transparent 70%);
  top: 40%; left: 45%;
  animation: orb3d 22s ease-in-out infinite;
}
@keyframes orb1d {
  0%,100%{ transform:translate(0,0) scale(1); }
  40%    { transform:translate(-40px,50px) scale(1.1); }
  70%    { transform:translate(30px,-30px) scale(.93); }
}
@keyframes orb2d {
  0%,100%{ transform:translate(0,0) scale(1); }
  35%    { transform:translate(60px,-40px) scale(1.12); }
  65%    { transform:translate(-30px,20px) scale(.9); }
}
@keyframes orb3d {
  0%,100%{ transform:translate(0,0); }
  50%    { transform:translate(-50px,40px); }
}

/* Edge vignette */
.cas-hbg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,.65) 100%);
}

/* ── Inner grid ── */
.cas-hw {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  padding-top: 80px; /* navbar offset */
  align-items: center;
  gap: 32px;
  min-height: calc(100vh - 60px);
}

/* ── LEFT content ── */
.cas-hl {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 60px 0;
}

/* Eyebrow */
.cas-heyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px 14px;
  border-radius: 100px;
  width: fit-content;
}
.cas-heyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #C01212;
  box-shadow: 0 0 0 3px rgba(192,18,18,.25);
  animation: dotPulse2 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes dotPulse2 {
  0%,100%{ box-shadow: 0 0 0 3px rgba(192,18,18,.25); }
  50%    { box-shadow: 0 0 0 7px rgba(192,18,18,0); }
}
.cas-heyebrow-sep { opacity: .3; }

/* H1 */
.cas-hh1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3rem, 4.5vw, 5.2rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -.03em;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.cas-hh1-line { display: block; }
.cas-hh1-sm   { font-size: .8em; color: rgba(255,255,255,.85); }
.cas-hh1-accent {
  display: block;
  font-style: normal;
  color: #C01212;
}

/* Description */
.cas-hdesc {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,.6);
  max-width: 480px;
  margin: 0;
}
.cas-hdesc strong { color: rgba(255,255,255,.9); font-weight: 600; }

/* CTAs */
.cas-hctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cas-hbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: all .22s cubic-bezier(0.4,0,0.2,1);
  position: relative;
  overflow: hidden;
  letter-spacing: .01em;
  border: none;
  white-space: nowrap;
}

.cas-hbtn-primary {
  background: #C01212;
  color: #fff;
  box-shadow: 0 4px 20px rgba(192,18,18,.4), 0 1px 0 rgba(255,255,255,.1) inset;
}
.cas-hbtn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-100%);
  transition: transform .45s ease;
}
.cas-hbtn-primary:hover { background: #a30f0f; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(192,18,18,.5); }
.cas-hbtn-primary:hover::before { transform: translateX(100%); }

.cas-hbtn-wa {
  background: #22c55e;
  color: #fff;
  box-shadow: 0 4px 18px rgba(34,197,94,.35);
}
.cas-hbtn-wa:hover { background: #16a34a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,197,94,.45); }

.cas-hbtn-ghost {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.cas-hbtn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); transform: translateY(-1px); }

/* Stats row */
.cas-hstats {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cas-hstat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 24px 0 0;
}
.cas-hstat:first-child { padding-left: 0; }
.cas-hstat-n {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(170deg, #fff 40%, rgba(255,255,255,.45) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cas-hstat-n sup {
  font-size: .45em;
  vertical-align: super;
  -webkit-text-fill-color: rgba(192,18,18,.9);
}
.cas-hstat-l {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
}
.cas-hstat-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.08);
  margin: 0 24px 0 0;
  flex-shrink: 0;
}

/* ── RIGHT visual ── */
.cas-hr {
  position: relative;
  height: 580px;
}

/* Atmospheric glow */
.cas-hr-aura {
  position: absolute;
  inset: -80px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%,
      rgba(192,18,18,.13) 0%,
      transparent 70%);
  pointer-events: none;
  animation: auraBreath 8s ease-in-out infinite;
}
@keyframes auraBreath {
  0%,100%{ opacity:.75; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.07); }
}

/* MAIN IMAGE */
.cas-hr-main {
  position: absolute;
  width: 65%;
  aspect-ratio: 4/3;
  top: 50%;
  left: 50%;
  transform: translate(-52%, -50%) perspective(1300px) rotateY(-10deg) rotateX(2deg);
  transform-origin: center center;
  transform-style: preserve-3d;
  z-index: 3;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(192,18,18,.15),
    0 30px 70px rgba(0,0,0,.7),
    0 0 120px rgba(192,18,18,.06);
  transition: transform .7s cubic-bezier(0.34,1.1,0.64,1);
  will-change: transform;
}
.cas-hr-main img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Gradient overlay */
.cas-hr-main-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(135deg, transparent 50%, rgba(192,18,18,.05) 100%),
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}
/* Rim light top */
.cas-hr-rim {
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; z-index: 2;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.3) 40%, rgba(192,18,18,.5) 65%, transparent);
}
/* Badge glassmorphism */
.cas-hr-badge {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(5,0,0,.72);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(192,18,18,.07);
}
.cas-hr-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
  animation: livePulse2 2s ease-in-out infinite;
}
@keyframes livePulse2 {
  0%,100%{ box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
  50%    { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
}
.cas-hr-badge strong {
  font-size: 11px; font-weight: 700; color: #fff;
  display: block; line-height: 1.2; margin-bottom: 2px;
}
.cas-hr-badge small { font-size: 9px; color: rgba(255,255,255,.48); display: block; }

/* SIDE CARDS */
.cas-hr-card {
  position: absolute;
  z-index: 2;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  transition: transform .35s cubic-bezier(0.4,0,0.2,1), box-shadow .35s;
  cursor: pointer;
}
.cas-hr-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s;
}
.cas-hr-card:hover img { transform: scale(1.08); }
.cas-hr-card:hover {
  transform: var(--card-base-t) translateY(-6px) scale(1.03) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.65), 0 0 20px rgba(192,18,18,.12);
  border-color: rgba(192,18,18,.35);
}
.cas-hr-card-ovl {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 55%);
  pointer-events: none;
}
/* Rim light on cards */
.cas-hr-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  z-index: 2;
}
.cas-hr-card-lbl {
  position: absolute; bottom: 9px; left: 10px; right: 10px;
  z-index: 3; font-size: 10px; font-weight: 700; color: #fff;
  letter-spacing: .04em; text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

/* Card A — top right */
.cas-hr-card-a {
  width: 38%;
  aspect-ratio: 4/3;
  top: 4%;
  right: 0%;
  --card-base-t: rotate(2deg) perspective(700px) rotateY(6deg);
  transform: var(--card-base-t);
}

/* Card B — bottom left */
.cas-hr-card-b {
  width: 36%;
  aspect-ratio: 4/3;
  bottom: 4%;
  left: 0%;
  --card-base-t: rotate(-2deg) perspective(700px) rotateY(-5deg);
  transform: var(--card-base-t);
}

/* FLOATING STATS */
.cas-hr-float {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(5,0,0,.75);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(192,18,18,.06);
  animation: floatBob 8s ease-in-out infinite;
}
.cas-hr-float:nth-child(2) { animation-delay: -4s; }
@keyframes floatBob {
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-4px); }
}
.cas-hrf-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}
.cas-hrf-num sup { font-size: .5em; vertical-align: super; color: #C01212; }
.cas-hrf-lbl {
  font-size: 9px; font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .08em;
  display: block; margin-top: 3px;
  white-space: nowrap;
}
.cas-hrf-ico { font-size: 1.4rem; line-height: 1; }

/* Float positions */
.cas-hr-float-a {
  top: 14%;
  left: 2%;
}
.cas-hr-float-b {
  bottom: 14%;
  right: 2%;
}

/* ── SCROLL INDICATOR ── */
.cas-hscroll {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 0 48px 28px;
  color: rgba(255,255,255,.25);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
}
.cas-hscroll-line {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.25), transparent);
}

/* ── PARTICLE CANVAS (for new hero) ── */
#cas-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .45;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .cas-hw { grid-template-columns: 1fr; padding-top: 72px; gap: 0; }
  .cas-hl { padding: 40px 0 20px; }
  .cas-hr { height: 420px; }
  .cas-hr-main { width: 60%; }
  .cas-hh1 { font-size: clamp(2.4rem, 6vw, 3.8rem); }
}
@media (max-width: 768px) {
  .cas-hw { padding: 0 20px; padding-top: 72px; }
  .cas-hr { height: 320px; }
  .cas-hr-float { display: none; }
  .cas-hstat-n { font-size: 1.7rem; }
  .cas-hh1 { font-size: clamp(2.2rem, 7vw, 3rem); }
  .cas-hctas { flex-direction: column; align-items: flex-start; }
}

/* ══ REDUCED MOTION ══ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .cas-sr { opacity: 1 !important; transform: none !important; }
  #cas-progress { display: none; }
  #cas-spotlight { display: none; }
  #cas-particles { display: none; }
}

/* ══════════════════════════════════════════
   OPTIMIZACIONES DE RENDIMIENTO MOBILE
   Agregado por optimización de performance
══════════════════════════════════════════ */

/* Desactivar backdrop-filter en mobile (muy costoso en GPU) */
@media (max-width: 768px) {
  .navbar,
  .navbar.scrolled {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(5, 1, 1, 0.97) !important;
  }
  .nav-links.open {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(5, 1, 1, 0.99) !important;
  }
  .icon-btn-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.14) !important;
  }
  .promo-prev, .promo-next {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }
  /* Reducir parallax transforms para evitar reflow en mobile */
  .cas-hl, .cas-hr {
    will-change: auto !important;
    transform: none !important;
  }
}

/* Forzar aceleración GPU en elementos animados clave */
.cas-loader-spinner,
.carousel-track,
.promo-track,
.cas-drawer,
.fly-dot-cas {
  will-change: transform;
}

/* Reducir la cantidad de sombras en mobile (costosas) */
@media (max-width: 768px) {
  .icon-btn-nav {
    box-shadow: 0 2px 8px rgba(0,0,0,0.20) !important;
  }
  .rds-why-card,
  .serv-card,
  .info-card {
    box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
  }
}