/*
IonCore S.A.S. - custom site-wide styles (shared across all IonCore pages)
Layered on top of the Webster theme + skin-ioncore.css brand-color overrides.
*/

#hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* IonCore brand logo: the real logo (color mark + serif wordmark) with the wordmark recolored white
   (logo-ioncore-full-light.png). Every place the logo sits is dark — the hero, the sticky header
   (theme bg #323232) and the black footer — so the full-color version is used as-is, no filters. */
.ioncore-brand { display: flex; align-items: center; text-decoration: none; }
/* !important needed: the theme's own ".mega-menu .menu-logo img" / sticky-state selectors are more
   specific than a single class and would otherwise force their own 40px/30px heights. */
.ioncore-brand-logo { height: 84px !important; width: auto !important; transition: height .3s ease; }
.mega-menu.desktopTopFixed .ioncore-brand-logo { height: 60px !important; }
.mega-menu .menu-logo { padding: 16px 0; }
@media (max-width: 991px) {
  .ioncore-brand-logo { height: 66px !important; }
}
@media (max-width: 575px) {
  .ioncore-brand-logo { height: 58px !important; }
}

/* Footer logo: the theme sizes "img#logo-footer" by id (34px/40px), which beats a class,
   so height/width need !important to make the wordmark readable. */
.ioncore-footer-logo { height: 100px !important; width: auto !important; max-width: none !important; margin-bottom: 16px !important; }
@media (max-width: 767px) {
  .ioncore-footer-logo { height: 84px !important; }
}

/* IonCore CTA: secondary accent color from the logo (orange/gold) */
.menu-links > li > a.cta-ion {
  background: #F3AD10;
  color: #ffffff !important;
  padding: 10px 22px;
  border-radius: 3px;
}
.menu-links > li > a.cta-ion:hover {
  background: #d99200;
  color: #ffffff !important;
}

/* ===== Hero ===== */
.hero-ioncore { position: relative; padding: 230px 0 150px; overflow: hidden; }
.hero-ioncore .container { position: relative; z-index: 2; }
.hero-ioncore .hero-eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; font-weight: 700; color: #F3AD10 !important; margin-bottom: 18px; }
.hero-ioncore .hero-title { font-size: 46px; line-height: 1.25; font-weight: 700; margin-bottom: 22px; }
.hero-ioncore .accent-gold { color: #F3AD10; }
.hero-ioncore .hero-subtitle { font-size: 19px; font-weight: 500; margin-bottom: 18px; }
.hero-ioncore .hero-support { font-size: 16px; opacity: 0.88; max-width: 640px; margin-bottom: 38px; }
.hero-ioncore .hero-buttons a { margin: 0 15px 15px 0; display: inline-block; }
.hero-ioncore .hero-trust-badges { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 10px; }
.hero-ioncore .hero-trust-badges span { color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500; }
.hero-ioncore .hero-trust-badges span i { color: #F3AD10; margin-right: 6px; }
/* .hero-sm modifier: shorter hero for inner pages, with breadcrumb */
.hero-ioncore.hero-sm { padding: 190px 0 80px; }
.hero-ioncore.hero-sm .hero-title { font-size: 38px; margin-bottom: 18px; }
.hero-ioncore.hero-sm .hero-support { max-width: 720px; margin-bottom: 26px; }
.hero-ioncore .breadcrumb-ion { margin-top: 24px; }
.hero-ioncore .breadcrumb-ion a,
.hero-ioncore .breadcrumb-ion span { font-size: 14px; color: rgba(255,255,255,0.7); }
.hero-ioncore .breadcrumb-ion a:hover { color: #F3AD10; }
.hero-ioncore .breadcrumb-ion i { margin: 0 10px; font-size: 10px; color: rgba(255,255,255,0.4); }
@media (max-width: 991px) {
  .hero-ioncore { padding: 170px 0 110px; }
  .hero-ioncore .hero-title { font-size: 34px; }
  .hero-ioncore.hero-sm { padding: 160px 0 70px; }
}
@media (max-width: 575px) {
  .hero-ioncore .hero-title { font-size: 26px; }
  .hero-ioncore .hero-subtitle { font-size: 17px; }
  .hero-ioncore.hero-sm .hero-title { font-size: 25px; }
}

/* ===== Cifras / stats strip (bridges hero to Section 2) ===== */
.ioncore-stats-strip { padding: 55px 0 40px; border-bottom: 1px solid #ebedf2; }
.ioncore-stats-strip .counter.left-icon { padding-left: 62px; }
.ioncore-stats-strip .counter.left-icon .icon { font-size: 32px; line-height: 32px; }
.ioncore-stats-strip .counter .timer { font-size: 36px; margin: 0 0 6px; }
.ioncore-stats-strip .counter label { font-size: 14px; font-weight: 500; color: #666; text-transform: none; line-height: 1.4; }

/* ===== Pillars / training-line cards (image + icon + title + text) ===== */
.pillar-card { background: #fff; border-radius: 6px; box-shadow: 0 15px 40px rgba(20,40,80,0.08); overflow: hidden; height: 100%; transition: transform .3s ease, box-shadow .3s ease; }
.pillar-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(20,40,80,0.14); }
.pillar-card .pillar-img { height: 210px; overflow: hidden; }
.pillar-card .pillar-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pillar-card:hover .pillar-img img { transform: scale(1.08); }
.pillar-card .pillar-body { padding: 32px 28px 34px; }
.pillar-card .pillar-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(49,96,170,0.1); display: flex; align-items: center; justify-content: center; margin-top: -55px; position: relative; margin-bottom: 18px; border: 4px solid #fff; }
.pillar-card .pillar-icon i { font-size: 22px; color: #3160AA; }
.pillar-card .pillar-body ul.temario-list { list-style: none; padding-left: 0; margin: 18px 0 0; }
.pillar-card .pillar-body ul.temario-list li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 14px; color: #555; line-height: 1.5; }
.pillar-card .pillar-body ul.temario-list li:before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: 0; top: 1px; color: #3160AA; font-size: 12px; }

/* ===== Why IonCore (dark split section) ===== */
.why-ioncore { position: relative; }
.benefit-row { display: flex; gap: 18px; margin-bottom: 34px; }
.benefit-row .benefit-icon { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%; background: rgba(243,173,16,0.15); display: flex; align-items: center; justify-content: center; }
.benefit-row .benefit-icon i { color: #F3AD10; font-size: 20px; }
.benefit-row h5 { color: #fff; margin-bottom: 8px; }
.benefit-row p { color: rgba(255,255,255,0.75); margin-bottom: 0; }
.brand-compat-box { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 28px 30px; margin-top: 10px; }
.brand-compat-box .brand-pill { display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; padding: 8px 18px; border-radius: 30px; margin: 0 10px 10px 0; font-size: 14px; font-weight: 500; }
.brand-compat-box .brand-disclaimer { color: rgba(255,255,255,0.5); font-size: 10.5px; line-height: 1.55; margin: 14px 0 0; }

/* ===== Benefit chip: light-bg icon + title + text (reused across pages) ===== */
.benefit-chip { text-align: left; padding: 8px 0 24px; }
.benefit-chip .benefit-chip-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(49,96,170,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.benefit-chip .benefit-chip-icon i { font-size: 22px; color: #3160AA; }
.benefit-chip h5 { margin-bottom: 10px; }
.benefit-chip p { color: #666; margin-bottom: 0; }
.benefit-chip.gold .benefit-chip-icon { background: rgba(243,173,16,0.15); }
.benefit-chip.gold .benefit-chip-icon i { color: #F3AD10; }

/* ===== Info pill box: light-bg pill list (normativas / industrias) ===== */
.info-pill-box { background: #f7f9fc; border: 1px solid #e7ebf3; border-radius: 6px; padding: 30px 32px; }
/* add .h-100 (Bootstrap utility) on info-pill-box only when boxes sit side-by-side in the same row;
   stacked boxes (e.g. Normativas + Industrias) must keep their natural height or the flex row stretches
   every box to fill the whole column and blows up the spacing */
.info-pill-box h6.info-pill-title { text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 700; color: #3160AA; margin-bottom: 16px; }
.info-pill-box h6.info-pill-title i { margin-right: 8px; }
.info-pill-box + .info-pill-box { margin-top: 20px; }
.info-pill-box .info-pill { display: inline-block; background: #fff; border: 1px solid #d7dfec; color: #2b3648; padding: 7px 16px; border-radius: 30px; margin: 0 8px 10px 0; font-size: 13px; font-weight: 600; }

/* ===== Rounded photo (used in split image+content rows) ===== */
.rounded-photo { border-radius: 6px; overflow: hidden; box-shadow: 0 15px 40px rgba(20,40,80,0.1); height: 100%; min-height: 280px; }
.rounded-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== Process steps (Alcance / Bloque 2): swap flaticon glyphs for Font Awesome ===== */
.process-list .process-icon i { font-size: 34px; color: #3160AA; line-height: 1; }
/* the theme's .border-area corner pieces are hardcoded to a white background (#fff),
   so the zigzag steps need a white panel behind them even when the parent section isn't white */
.ioncore-process-panel { background: #fff; border-radius: 6px; padding: 55px 45px 25px; box-shadow: 0 15px 40px rgba(20,40,80,0.06); }
@media (max-width: 767px) { .ioncore-process-panel { padding: 40px 20px 15px; } }

/* ===== Productos Destacados / category cards ===== */
.product-cat-card { background: #fff; border: 1px solid #ebedf2; border-radius: 6px; padding: 40px 32px; height: 100%; text-align: center; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.product-cat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(20,40,80,0.1); border-color: transparent; }
.product-cat-card .product-cat-icon { width: 74px; height: 74px; line-height: 74px; border-radius: 50%; background: #3160AA; margin: 0 auto 24px; }
.product-cat-card .product-cat-icon i { color: #fff; font-size: 28px; }
.product-cat-card h5 { margin-bottom: 14px; }
.product-cat-card ul { text-align: left; padding-left: 18px; margin-bottom: 26px; }
.product-cat-card ul li { margin-bottom: 8px; color: #666; }
.product-cat-card .button { width: 100%; }

/* ===== CTA Final ===== */
.cta-final-widgets { margin-top: 40px; }
.cta-final-widgets .button { margin: 0 12px 15px 0; }

/* ===== Conexion inmediata (contact channels, reused site-wide) ===== */
.channel-card { background: #fff; border-radius: 6px; box-shadow: 0 15px 40px rgba(20,40,80,0.08); padding: 40px 30px; text-align: center; height: 100%; }
.channel-card .channel-icon { width: 64px; height: 64px; line-height: 64px; border-radius: 50%; margin: 0 auto 22px; }
.channel-card .channel-icon i { font-size: 24px; }
.channel-card.whatsapp .channel-icon { background: rgba(37,211,102,0.12); }
.channel-card.whatsapp .channel-icon i { color: #25D366; }
.channel-card.email .channel-icon { background: rgba(49,96,170,0.12); }
.channel-card.email .channel-icon i { color: #3160AA; }
.channel-card.calendly .channel-icon { background: rgba(243,173,16,0.15); }
.channel-card.calendly .channel-icon i { color: #F3AD10; }
.channel-card p.channel-detail { color: #777; min-height: 48px; }
.btn-whatsapp { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; }
.btn-whatsapp:hover { background: #1ebe57 !important; border-color: #1ebe57 !important; color: #fff !important; }
.legal-footer-box { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; margin-top: 18px; }
.legal-footer-box p { color: rgba(255,255,255,0.55); font-size: 13px; margin-bottom: 4px; }

/* ===== Ionpedia: short-video teaser card (vertical, "Proximamente") ===== */
.short-video-card { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 9 / 16; box-shadow: 0 15px 40px rgba(20,40,80,0.14); background: #0e1a2b; }
.short-video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.short-video-card:hover img { transform: scale(1.06); }
.short-video-card .video-overlay-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,28,0.25) 0%, rgba(8,14,28,0.05) 30%, rgba(6,12,24,0.92) 100%); }
.short-video-card .video-category { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 12px; border-radius: 20px; }
.short-video-card .video-badge-soon { position: absolute; top: 16px; right: 16px; background: #F3AD10; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px; border-radius: 20px; }
.short-video-card .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.3); transition: transform .3s ease; }
.short-video-card:hover .video-play-btn { transform: translate(-50%,-50%) scale(1.1); }
.short-video-card .video-play-btn i { color: #3160AA; font-size: 20px; margin-left: 3px; }
.short-video-card .video-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 18px; }
.short-video-card .video-caption .video-hook { color: #fff; font-weight: 700; font-size: 15px; line-height: 1.35; margin-bottom: 6px; }
.short-video-card .video-caption .video-topic { color: rgba(255,255,255,0.72); font-size: 12px; margin-bottom: 0; }

/* ===== Ionpedia: glossary accordion icon prefix ===== */
.accordion .acd-heading i { margin-right: 10px; color: #3160AA; }
.accordion .acd-group.acd-active .acd-heading i { color: #fff; }

/* ===== Ionpedia: consumable-care guide card ("PDF Proximamente") ===== */
.guide-card { background: #fff; border: 1px solid #ebedf2; border-radius: 6px; padding: 38px 30px; height: 100%; text-align: center; transition: box-shadow .3s ease, transform .3s ease; }
.guide-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(20,40,80,0.1); }
.guide-card .guide-icon { width: 64px; height: 64px; line-height: 64px; border-radius: 50%; background: rgba(49,96,170,0.1); margin: 0 auto 20px; }
.guide-card .guide-icon i { color: #3160AA; font-size: 24px; }
.guide-card h5 { margin-bottom: 10px; }
.guide-card p { color: #666; font-size: 14px; margin-bottom: 22px; }
.guide-card .guide-soon-badge { display: inline-flex; align-items: center; gap: 6px; background: #f2f4f8; color: #8a94a6; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 9px 18px; border-radius: 20px; }
.guide-card .guide-soon-badge i { font-size: 11px; }

/* ===================================================================
   Nosotros / Criterio IonCore — premium editorial treatment
   =================================================================== */

/* ===== Manifiesto (split hero, dark + editorial) ===== */
/* photo as a real <img> (not jarallax) so the particle layer can be pinned to the hologram */
.manifesto-section .manifesto-visual { overflow: hidden; background: #2c2c2c; }
.manifesto-section .manifesto-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 92% 50%; display: block; }
/* desktop: the header sits over this section, so start the text and the photo below it —
   the advisor's face is at the very top-right of the photo and would otherwise hide behind the menu */
@media (min-width: 992px) {
  .manifesto-section.page-section-ptb { padding-top: 215px; }
  .manifesto-section.split-section .img-side { top: 170px; height: calc(100% - 170px); }
}
/* soft fade on the photo's left edge into the text panel; also de-emphasizes the lab-coat figure */
.manifesto-section .manifesto-visual:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 26%); }
.manifesto-particles { position: absolute; z-index: 2; -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); }
/* the hologram area of the photo is already bright, so plain white particles disappear into it;
   a warm amber halo keeps them readable and makes them read as part of the hologram's glow */
.manifesto-particles canvas { display: block; filter: drop-shadow(0 0 1px rgba(90,45,0,0.75)) drop-shadow(0 0 5px rgba(255,150,0,1)); }
.manifesto-section .container { position: relative; z-index: 2; }
.manifesto-text { position: relative; padding: 20px 0; }
.manifesto-quote-mark { position: absolute; top: -58px; left: -6px; font-size: 150px; line-height: 1; font-family: Georgia, 'Times New Roman', serif; color: rgba(243,173,16,0.18); z-index: 0; pointer-events: none; user-select: none; }
.manifesto-text .manifesto-eyebrow { position: relative; z-index: 1; display: inline-block; text-transform: uppercase; letter-spacing: 3px; font-size: 13px; font-weight: 700; color: #F3AD10; margin-bottom: 22px; }
.manifesto-text h1 { position: relative; z-index: 1; font-size: 40px; line-height: 1.32; font-weight: 800; color: #fff; margin-bottom: 28px; }
.manifesto-text h1 .accent-gold { color: #F3AD10; }
.manifesto-text p.manifesto-body { position: relative; z-index: 1; font-size: 17px; line-height: 1.85; color: rgba(255,255,255,0.78); margin-bottom: 0; }
@media (max-width: 991px) {
  .manifesto-quote-mark { font-size: 110px; top: -42px; }
  .manifesto-text h1 { font-size: 30px; }
  /* the theme hides .split-section .img-side entirely below 991px (display:none) —
     restore it as a normal stacked block so the manifesto photo still shows on mobile,
     at the photo's own proportions so the whole scene is visible */
  .manifesto-section.split-section .side-background { position: relative; }
  .manifesto-section.split-section .img-side { display: block; position: relative !important; top: auto; left: auto !important; right: auto !important; width: 100%; height: auto; aspect-ratio: 1344 / 814; }
  .manifesto-section.split-section .img-holder { position: relative; height: 100%; width: 100%; }
  .manifesto-section .manifesto-visual:after { display: none; }
}

/* ===== Promesa Operativa: dark band with ringed icons ===== */
.promise-band { background: linear-gradient(135deg, #0c1420 0%, #16273f 100%); padding: 95px 0 80px; position: relative; }
.promise-pillar { text-align: center; padding: 0 18px; height: 100%; }
.promise-pillar .promise-icon { width: 86px; height: 86px; border-radius: 50%; border: 1.5px solid rgba(243,173,16,0.45); display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.promise-pillar:hover .promise-icon { border-color: #F3AD10; background: rgba(243,173,16,0.08); transform: translateY(-5px); }
.promise-pillar .promise-icon i { color: #F3AD10; font-size: 30px; }
.promise-pillar h5 { color: #fff; font-size: 18px; margin-bottom: 14px; }
.promise-pillar p { color: rgba(255,255,255,0.62); font-size: 14px; line-height: 1.7; margin-bottom: 0; }

/* ===== Alianzas de autoridad: brand strip on the same dark band ===== */
.authority-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 70px 0 55px; }
.authority-strip { text-align: center; }
.authority-strip .brand-pill-lg { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 168px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 18px 26px; border-radius: 8px; margin: 0 8px 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.3px; transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.authority-strip .brand-pill-lg:hover { border-color: #F3AD10; background: rgba(243,173,16,0.07); transform: translateY(-4px); }
.authority-disclaimer { color: rgba(255,255,255,0.42); font-size: 12px; margin: 30px auto 0; max-width: 700px; }

/* ===== Cifras con Impacto Real ===== */
.impact-stats-section { padding: 90px 0; }
.impact-stat { text-align: center; padding: 0 20px; }
.impact-stat .impact-number { font-size: 62px; font-weight: 800; line-height: 1; color: #3160AA; margin-bottom: 16px; letter-spacing: -1px; }
.impact-stat .impact-number .timer { font-size: inherit; font-weight: inherit; }
.impact-stat .impact-number.gold { color: #F3AD10; }
.impact-stat .impact-icon-big { font-size: 46px; color: #F3AD10; margin-bottom: 18px; display: block; }
.impact-stat h6 { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 800; color: #1b2733; margin-bottom: 10px; }
.impact-stat p { color: #777; font-size: 14px; margin-bottom: 0; max-width: 280px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) {
  .impact-stat { margin-bottom: 40px; }
  .impact-stat .impact-number { font-size: 48px; }
}

/* ===================================================================
   Portafolio de Consumibles — bridge / assistance page
   =================================================================== */

/* ===== Hero gradient (no photo — the search bar IS the visual) ===== */
.hero-ioncore.hero-gradient { background: linear-gradient(135deg, #0a1420 0%, #14243c 55%, #1c3358 100%); }

.catalog-search-box { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 8px; display: flex; align-items: center; gap: 8px; max-width: 640px; margin-top: 8px; backdrop-filter: blur(6px); }
.catalog-search-box i.search-icon { color: rgba(255,255,255,0.5); font-size: 17px; padding-left: 14px; }
.catalog-search-box input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #fff; font-size: 15px; padding: 14px 6px; }
.catalog-search-box input::placeholder { color: rgba(255,255,255,0.45); }
.catalog-search-box button { background: #F3AD10; color: #fff; border: none; padding: 14px 24px; border-radius: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; white-space: nowrap; transition: background .3s ease; }
.catalog-search-box button:hover { background: #d99200; }
.catalog-quick-links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.catalog-quick-links span.qlabel { color: rgba(255,255,255,0.5); font-size: 13px; margin-right: 4px; }
.catalog-quick-links a { color: rgba(255,255,255,0.75); font-size: 13px; border: 1px solid rgba(255,255,255,0.18); padding: 6px 16px; border-radius: 20px; transition: all .3s ease; }
.catalog-quick-links a:hover { border-color: #F3AD10; color: #F3AD10; }
@media (max-width: 575px) {
  .catalog-search-box { flex-wrap: wrap; padding: 14px; }
  .catalog-search-box input { flex: 1 1 100%; padding: 8px 6px; }
  .catalog-search-box button { flex: 1 1 100%; }
}

/* ===== Category cards (Paso 1) ===== */
.catalog-category-card { display: flex; flex-direction: column; background: #fff; border-radius: 10px; padding: 44px 34px 34px; height: 100%; box-shadow: 0 10px 34px rgba(20,40,80,0.06); border: 1px solid #eef1f6; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; position: relative; overflow: hidden; }
.catalog-category-card:hover { transform: translateY(-8px); box-shadow: 0 26px 55px rgba(20,40,80,0.14); border-color: transparent; }
.catalog-category-card .cat-badge-premium { position: absolute; top: 22px; right: -40px; background: #F3AD10; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 6px 44px; transform: rotate(45deg); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.catalog-category-card .cat-icon { width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(135deg, #3160AA, #1d3f7a); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; flex: 0 0 78px; }
.catalog-category-card .cat-icon i { color: #fff; font-size: 30px; }
.catalog-category-card h5 { margin-bottom: 14px; font-size: 19px; }
.catalog-category-card .cat-includes { color: #666; font-size: 14px; margin-bottom: 24px; line-height: 1.75; }
.catalog-category-card .cat-includes strong { color: #333; }
.catalog-category-card .cat-official-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #3160AA; font-size: 14px; border-top: 1px solid #eef1f6; padding-top: 20px; width: 100%; margin-top: auto; text-decoration: none; }
.catalog-category-card .cat-official-link i { font-size: 12px; }
.catalog-category-card .cat-official-link:hover { color: #F3AD10; }

/* ===== Compatibilidad multimarca: light brand grid ===== */
.brand-grid-light { text-align: center; }
.brand-grid-light .brand-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; background: #f7f9fc; border: 1px solid #e7ebf3; color: #1b2733; padding: 20px 30px; border-radius: 8px; margin: 0 8px 16px; font-size: 15px; font-weight: 700; transition: all .3s ease; }
.brand-grid-light .brand-chip:hover { border-color: #3160AA; background: #fff; box-shadow: 0 14px 30px rgba(20,40,80,0.08); transform: translateY(-4px); }

/* ===== Asistente virtual (chat block) ===== */
.assistant-block { background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(20,40,80,0.08); }
.assistant-photo-col { position: relative; min-height: 380px; height: 100%; }
.assistant-photo-col img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; }
.assistant-badge-bot { position: absolute; bottom: 20px; left: 20px; background: rgba(255,255,255,0.95); border-radius: 30px; padding: 6px 18px 6px 6px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.assistant-badge-bot .dot { width: 32px; height: 32px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; flex: 0 0 32px; }
.assistant-badge-bot .dot i { color: #fff; font-size: 13px; }
.assistant-badge-bot span { font-size: 11px; font-weight: 800; color: #1b2733; text-transform: uppercase; letter-spacing: 0.5px; }
.assistant-content-col { padding: 56px 50px; }
@media (max-width: 991px) { .assistant-content-col { padding: 44px 30px; } }
.assistant-chat-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.assistant-chat-label .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 4px rgba(37,211,102,0.18); }
.assistant-chat-label span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #25D366; }
.assistant-chat-bubble { background: #fff; border-radius: 4px 18px 18px 18px; padding: 22px 26px; box-shadow: 0 10px 30px rgba(20,40,80,0.08); margin-bottom: 28px; }
.assistant-chat-bubble p { color: #333; font-size: 15px; line-height: 1.75; margin-bottom: 0; font-style: italic; }

/* ===== Formulario de cotizacion rapida ===== */
.quote-form-card { background: #fff; border-radius: 12px; padding: 48px 44px; box-shadow: 0 20px 55px rgba(20,40,80,0.08); border: 1px solid #eef1f6; }
@media (max-width: 767px) { .quote-form-card { padding: 32px 22px; } }
.quote-form-card .form-control { border: 1px solid #dfe4ec; border-radius: 6px; padding: 14px 16px; height: auto; font-size: 14px; }
.quote-form-card .form-control:focus { border-color: #3160AA; box-shadow: 0 0 0 3px rgba(49,96,170,0.1); }
.quote-file-note { background: #f7f9fc; border: 1px dashed #d7dfec; border-radius: 8px; padding: 16px 20px; color: #667; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.quote-file-note i { color: #3160AA; font-size: 15px; }
.quote-form-note-ok { display: none; background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.3); color: #178a45; border-radius: 8px; padding: 14px 20px; font-size: 14px; margin-top: 18px; }