/* Shidco — estilos base */

:root{

  --color-primario:#232D6D;

  --color-acento:#FFB703;

  --color-texto:#1A1A1A;

  --color-fondo:#F7F8FA;

  --surface-1:#ffffff;

  --surface-2:#f7f8fa;

  --on-dark:#ffffff;

  --on-accent:#111111;

  --radius:10px;

  --shadow:0 4px 12px rgba(0,0,0,.08);

  /* Gradiente de fondo (difuminado) */

  --bg-gradient: radial-gradient(circle at top, #11284d 0%, #050b15 55%, #03060d 100%);

}

*{box-sizing:border-box}

html,body{margin:0;padding:0;color:var(--color-texto);background:var(--bg-gradient), var(--color-fondo);font-family:Inter,Roboto,system-ui,Segoe UI,Arial,sans-serif;line-height:1.5;min-height:100vh}

/* Estilo de fondo y glows tipo referencia para HOME */

body.home{color:#f5f7fb}
body.home::before, body.home::after{content:"";position:fixed;width:30vw;height:30vw;filter:blur(90px);opacity:.45;z-index:-1;border-radius:50%}
body.home::before{top:5vh;left:10vw;background:rgba(255,195,0,.35)}
body.home::after{bottom:10vh;right:5vw;background:rgba(25,180,198,.35)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.container{max-width:1320px;margin:0 auto;padding:0 24px}

.grid{display:grid;gap:24px}

.section-surface{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.1) blur(2px)}
/* Productos: sección inmediatamente debajo de Categorías con fondo blanco sólido */
#productosPage .section-categories + .section-surface{background:#ffffff !important;backdrop-filter:none !important;border:none !important;box-shadow:none !important}
#productosPage .section-categories + .section-surface > .container{background:#ffffff !important}
#productosPage .section-categories + .section-surface .toolbar,
#productosPage .section-categories + .section-surface .catalog-layout{background:#ffffff}
#productosPage .section-surface.section-categories{padding-bottom:80px;background:#ffffff;border:1px solid rgba(255,255,255,.8);box-shadow:0 20px 50px rgba(15,23,42,.08)}
.section-trajectory{background:transparent; position:relative; overflow:hidden; padding:104px 0 64px; color:#f5f5f5}
.section-trajectory::before,
.section-trajectory::after{display:none}
.trajectory-shell{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:32px;width:100%;max-width:none;margin:0;padding:0 clamp(20px,4vw,48px);align-items:stretch}

.trajectory-left{background:transparent;border-radius:0;padding:0 0 0 12px;margin-top:14px;display:flex;flex-direction:column;gap:1.5rem;justify-content:flex-start;text-align:left}

.trajectory-right{position:relative;border-radius:28px;padding:36px 34px 38px;background:linear-gradient(180deg,rgba(10,18,41,.95),rgba(15,23,42,.92));overflow:hidden;}

.trajectory-right::before{content:'';position:absolute;inset:10px;left:auto;right:auto;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 60%);pointer-events:none;}



.tag{display:inline-flex;letter-spacing:1px;text-transform:uppercase;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;background:#ffd54f;color:#0f172a;margin-bottom:6px}

.trajectory-left .section-sub{color:#fbbf24;margin-top:0;font-weight:600}

.trajectory-left h2{color:#ffd54f;font-size:clamp(3rem,4vw,4.2rem);margin:0;padding-bottom:14px;letter-spacing:2px;position:relative;text-transform:uppercase}
.trajectory-left h2::after{content:'';position:absolute;left:0;bottom:2px;width:150px;height:4px;border-radius:4px;background:#ffd54f}
.trajectory-left h2.no-decor::after{content:none}
.u-accent{position:relative;display:inline-block}
.u-accent::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:4px;background:#ffd54f;border-radius:4px}
.trajectory-left p{color:rgba(255,255,255,.85);line-height:1.7;margin-bottom:0}

.trajectory-stats{display:flex;gap:48px;margin-top:32px;flex-wrap:wrap;justify-content:center;align-items:flex-end;width:100%}

.trajectory-stats .stat{flex:0 0 auto;background:transparent;border:none;border-radius:0;padding:0;text-align:left;box-shadow:none}

.trajectory-stats .stat-number{display:block;font-size:clamp(3rem,4vw,4.8rem);font-weight:700;color:#ffd54f;line-height:1;letter-spacing:1px}

.trajectory-stats .stat-number[data-suffix]::after{content:attr(data-suffix);font-size:0.6em;margin-left:0.1em}

.trajectory-stats .stat p{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:15px;text-transform:uppercase;letter-spacing:1px}

.timeline.vertical{display:grid;grid-template-columns:32px 1fr;gap:32px;position:relative;align-items:stretch;margin-top:24px;min-height:420px}

.timeline-pipe{grid-column:1;grid-row:1;width:16px;height:100%;background:#11172b;border-radius:999px;position:relative;overflow:hidden;box-shadow:0 16px 32px rgba(0,0,0,.65);border:2px solid rgba(255,255,255,.2);margin:4px 0}

.timeline-pipe::before{content:'';position:absolute;left:-3px;right:-3px;top:-10px;height:16px;background:radial-gradient(circle at center,#ffe066 0%,rgba(255,255,255,0) 60%)}

.timeline-fill{position:absolute;inset:0;background:linear-gradient(180deg,#ffe066,#f59e0b,#f97316);transform:scaleY(0);transform-origin:top;transition:transform .4s ease-out;display:block}

.timeline-items{display:flex;flex-direction:column;gap:34px;flex:1;grid-column:2}

.timeline-row{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:flex-start}

.timeline-year{font-size:20px;font-weight:700;color:#f1f5f9;width:90px;letter-spacing:1.4px;text-transform:uppercase}

.timeline-row h4{margin:6px 0 2px;color:#f1f5f9;font-size:18px}

.timeline-row p{margin:4px 0 0;color:#dfeeff;line-height:1.6;max-width:420px}

/* PLP catálogo (catálogo de productos) */
.catalog-plp .plp__toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:16px 0}
.catalog-plp .toolbar__container{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.catalog-plp .toolbar__search input{padding:10px 12px;border:1px solid #e6e8ee;border-radius:8px;min-width:260px}
.catalog-plp .plp__layout{display:flex;gap:24px;align-items:flex-start}
.catalog-plp .plp__filter-section{flex:0 0 280px;border:1px solid #e6e8ee;background:#fff;border-radius:12px;padding:16px;max-height:none;overflow:visible}
.catalog-plp .filter-controls{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.catalog-plp .filter-controls .control-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.catalog-plp .filter-controls input[type="search"]{padding:10px 12px;border:1px solid #e6e8ee;border-radius:8px;width:100%}
.catalog-plp .filter-controls .toolbar__sortby select,
.catalog-plp .filter-controls .toolbar__pagesize select{padding:10px 12px;border:1px solid #e6e8ee;border-radius:8px;background:#fff}
.catalog-plp .facet-container__list__title{font-weight:600;margin:0 0 8px 0}
.catalog-plp .facet-group{margin-top:8px;padding-top:8px;border-top:1px dashed #e6e8ee}
.catalog-plp .facet-title{font-weight:600;margin:6px 0}
.catalog-plp .facet-item{margin:4px 0}
.catalog-plp .plp__result-slot{flex:1 1 auto}
.catalog-plp .product__listing{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.catalog-plp .product__item{background:#fff;border:1px solid #e6e8ee;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.catalog-plp .product__item__top{position:relative;background:#fafbfe;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.catalog-plp .product__item__top img{width:100%;height:100%;display:block;object-fit:contain;padding:8px}
.catalog-plp .product__item__information{padding:12px 12px 14px}
.catalog-plp .product__item__name{margin:4px 0 6px;font-size:15px;min-height:38px}
.catalog-plp .product__item__meta{color:#667085;font-size:13px;margin-bottom:10px}
.catalog-plp .product__item__cta{display:flex;gap:8px;flex-wrap:wrap}
.catalog-plp .product__listing__stats{display:flex;justify-content:center;align-items:center;margin:16px 0}
.catalog-plp .pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:12px}
.catalog-plp .pager-nums{display:flex;gap:8px;align-items:center}
.catalog-plp .pager .btn{padding:8px 10px;border:1px solid #e6e8ee;border-radius:8px;background:#fff}
.catalog-plp .pager .btn[disabled]{opacity:.5;cursor:default}
.catalog-plp .pager .page{padding:6px 10px;border:1px solid #e6e8ee;border-radius:8px;background:#fff;cursor:pointer}
.catalog-plp .pager .page.active{background:var(--color-acento);color:#111;border-color:#d8a602}
.catalog-plp .pager .ellipsis{color:#98a2b3;padding:0 4px}

/* Ficha técnica: mosaico de imágenes */
.modal .mosaic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;margin:8px 0 12px;height:140px;overflow:auto;-webkit-overflow-scrolling:touch;padding:4px;border:1px solid #e6e8ee;border-radius:10px;background:#fff}
.modal .mosaic-item{position:relative;display:block;border:1px solid #e6e8ee;border-radius:8px;overflow:hidden;background:#fafbfe;aspect-ratio:1/1;cursor:pointer}
.modal .mosaic-item img{width:100%;height:100%;object-fit:cover;display:block}

/* Visor de imágenes a pantalla completa */
#imgLightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(3,6,13,.6);backdrop-filter:blur(6px);z-index:200}
#imgLightbox.open{display:flex}
#imgLightbox .lb-img{max-width:90vw;max-height:80vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#000}
#imgLightbox .lb-close,#imgLightbox .lb-prev,#imgLightbox .lb-next{position:absolute;background:rgba(17,24,39,.6);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
#imgLightbox .lb-close{top:24px;right:28px;font-size:22px}
#imgLightbox .lb-prev{left:24px}
#imgLightbox .lb-next{right:24px}
#imgLightbox .lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(17,24,39,.6);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.4);font-size:12px}

@media (max-width: 1200px){
  .catalog-plp .product__listing{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 900px){
  .catalog-plp .plp__layout{flex-direction:column}
  .catalog-plp .plp__filter-section{position:fixed;inset:auto 0 0 0;height:70vh;max-height:70vh;overflow:auto;transform:translateY(105%);transition:transform .25s ease;background:#fff;border-radius:12px 12px 0 0;z-index:30}
  .catalog-plp .plp__filter-section.open{transform:translateY(0%)}
  .catalog-plp .product__listing{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
  .catalog-plp .product__listing{grid-template-columns:repeat(1,1fr)}
  .catalog-plp .toolbar__search input{min-width:0;width:100%}
}

/* Facetas plegables (categorías, subcategorías, atributos) */
#plpFilters h3, #plpFilters .facet-title{ cursor:pointer; user-select:none; }
#facet-categories.collapsed .facet-item{ display:none; }
#facet-subcategories.collapsed .facet-item{ display:none; }
#facet-attrs .facet-group.collapsed .facet-item{ display:none; }

/* Facetas colapsables nuevas (scope catálogo) */
#productosPage .plp__filter-section .facet-collapsible{border:1px solid #e6e8ee;background:#fff;border-radius:10px;padding:10px;margin-bottom:12px}
#productosPage .plp__filter-section .facet-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px;background:transparent;border:0;cursor:pointer;font-weight:600}
#productosPage .plp__filter-section .facet-body{margin-top:8px}
#productosPage .plp__filter-section .facet-collapsible:not(.open) .facet-body{display:none}
#productosPage .plp__filter-section .facet-arrow{transition:transform .2s ease}
#productosPage .plp__filter-section .facet-collapsible:not(.open) .facet-arrow{transform:rotate(-90deg)}

/* Overrides: quitar franja divisoria superior (borde/banda) */
.site-header{ border-bottom: none !important; }
.section-surface.section-categories{ border: none !important; }
.catalog-section{ border-top: none !important; }
.section-surface.section-categories{ box-shadow: none !important; margin-bottom: 0 !important; }
.timeline-row.active .timeline-year,

.timeline-row.active h4,

.timeline-row.active p{color:#ffe36b}

/* Trayectoria */

/* Se eliminó la versión original para evitar conflicto con la nueva apariencia */



/* Versiones glass para HOME */

body.home .section-surface{background:transparent;border:0;backdrop-filter:none}
body.home .section-categories + .section-surface{background:transparent !important;backdrop-filter:none !important;border:none !important;box-shadow:none !important}
body.home .section-title{color:#f5f7fb}

body.home .section-sub{color:#8da0bf}

body.home .btn-secondary{color:#fff;border-color:rgba(255,255,255,.8)}

.on-gradient{color:var(--on-dark)}

.on-gradient h1,.on-gradient h2,.on-gradient h3,.on-gradient p{color:var(--on-dark)}

.on-gradient .btn-secondary{color:#fff;border-color:#fff}

.on-gradient .chip{background:rgba(255,255,255,.18);color:#fff}

/* Sección: Categorías */

.section-categories{padding:56px 0;position:relative}

.categories-header{max-width:960px;margin:0 auto 32px;text-align:center;display:flex;flex-direction:column;gap:12px;padding:0 16px}

.section-sub{margin:0 auto;text-align:center;color:#9fb1d2;letter-spacing:0.3em;text-transform:uppercase;font-size:12px}

.section-title{margin:0;font-size:32px;color:var(--color-primario);line-height:1.2}

.section-lead{margin:0 auto;max-width:640px;color:rgba(255,255,255,.75);line-height:1.6;text-align:center}

.category-pill-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}

.category-pill-row span{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,.04);color:#fff}

.categories-bleed{position:relative;left:50%;right:50%;margin:0 calc(-50vw + 20px);width:calc(100vw - 40px);margin-bottom:-20px;padding-bottom:40px}

.categories-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:stretch}

.category-panel{background:rgba(5,10,24,.85);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 48px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.08);min-height:320px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}

.category-panel:hover{transform:translateY(-4px);border-color:rgba(255,209,85,.6);box-shadow:0 32px 60px rgba(0,0,0,.55)}

.panel-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.panel-media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(5%);transition:transform .4s ease}
.category-panel[data-theme="emerald"] .panel-media img{object-position:center 35%}
.category-panel:hover .panel-media img{transform:scale(1.05)}

.panel-body{display:flex;flex-direction:column;gap:10px;padding:24px 26px 32px;color:#f5f7fb}

.node-caption{text-transform:uppercase;letter-spacing:0.25em;font-size:11px;color:rgba(255,255,255,.5)}

.category-panel h3{margin:0;font-size:1.6rem}

.category-panel p{margin:0;color:rgba(255,255,255,.75);line-height:1.6}

.btn-link{align-self:flex-start;margin-top:auto;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.12em;color:#ffd455;border-bottom:1px solid transparent;padding-bottom:4px;transition:border .2s ease}

.btn-link:hover{border-color:#ffd455}

.category-panel[data-theme="amber"] .btn-link{color:#ffd855}

.category-panel[data-theme="sky"] .btn-link{color:#68b8ff}

.category-panel[data-theme="emerald"] .btn-link{color:#81e6d9}

.category-panel[data-theme="coral"] .btn-link{color:#ffa8a3}

@media (max-width: 1023px){

  .categories-bleed{margin:0 -20px;width:calc(100% + 40px)}

}

@media (max-width: 767px){

  .section-categories{padding:40px 0}

  .categories-bleed{margin:0 -16px;width:calc(100% + 32px)}

  .category-pill-row{justify-content:center}

  body.home .section-surface{padding:20px}

}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:600}

.btn-primary{background:var(--color-acento);color:#111}

.btn-secondary{background:transparent;color:var(--color-primario);border-color:var(--color-primario)}

.btn-whatsapp{background:#25D366;color:#fff;border-color:#1b8f50;box-shadow:0 6px 14px rgba(37,211,102,.25)}

.btn-whatsapp:hover,.btn-whatsapp:focus-visible{background:#1DA857;border-color:#198f4a;color:#fff}

.btn-whatsapp:active{transform:translateY(1px)}

/* CTA contrast button for yellow band */

.btn-cta{background:#ffffff;color:#111;border:2px solid #111;box-shadow:0 6px 14px rgba(0,0,0,.15)}

.btn-cta:hover,.btn-cta:focus-visible{background:#f6f7fa}

.chip{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef; font-size:12px}



/* Header */

.site-header{

  position:sticky;

  top:0;

  z-index:30;

  width:100%;

  background:#030712;

  border-bottom:1px solid rgba(255,255,255,.08);

  box-shadow:0 12px 36px rgba(0,0,0,.55);

  font-family:'Montserrat', 'Outfit', sans-serif;

}

.site-header .header-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:24px;

  position:relative;

  padding:32px 0;
  min-height:120px;
  width:min(1320px,100%);

  margin:0 auto;

}

.site-header > .container{

  max-width:none;

  padding:0 clamp(24px,4vw,64px);

}

.brand-logo{
  height:78px;
  width:auto;
}
.menu-toggle svg{width:24px;height:24px;display:block}
.site-nav{

  display:flex;

  align-items:center;

  gap:30px;

  font-size:16px;

  text-transform:uppercase;

  letter-spacing:1.7px;

  font-weight:700;

  color:#dfe3f9;

}

.site-nav a{

  position:relative;

  color:#dfe3f9;

  padding:8px 0;

  transition:color .25s ease;

}

.site-nav a:hover,

.site-nav a:focus-visible{

  color:#fff;

}

.site-nav a.active{

  color:#fff;

}

.site-nav a.active::after{

  content:'';

  position:absolute;

  bottom:-6px;

  left:0;

  width:100%;

  height:2px;

  background:var(--color-acento);

  border-radius:2px;

}

.header-actions{

  display:flex;

  align-items:center;

  gap:18px;

}

.header-contact{

  display:flex;

  flex-direction:column;

  gap:3px;

  font-size:14px;

  letter-spacing:0.6px;

  text-transform:uppercase;

  color:#9da7d6;

}

.contact-label{

  font-size:12px;

  letter-spacing:1.4px;

  color:#7f8aaf;

}

.phone-link{

  display:flex;

  align-items:center;

  gap:8px;

  font-size:20px;

  font-weight:800;

  color:#fff;

}

.phone-icon svg{

  width:20px;

  height:20px;

  fill:var(--color-acento);

}

.btn.menu-toggle{

  display:none;

  width:48px;

  height:48px;

  border-radius:12px;

  font-size:20px;

  background:#1b244f;

  color:#fff;

  padding:0;

}

@media (max-width: 1024px){
  .header-actions{
    margin-left:auto;
  }
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:14px;
    padding:18px 24px;
    background:#030712;
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 32px rgba(0,0,0,.45);
    z-index:29;
  }
  .site-nav.open{
    display:flex;
  }
  .header-contact{
    display:none;
  }
  .menu-toggle{
    display:inline-flex;
  }
}
/* Expandir comportamiento de hamburguesa hasta 1200px para evitar colapso en portátiles */
@media (max-width: 1200px){
  .header-actions{ margin-left:auto; }
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column; gap:14px;
    padding:18px 24px;
    background:#030712;
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 32px rgba(0,0,0,.45);
    z-index:29;
  }
  .site-nav.open{ display:flex; }
  .header-contact{ display:none; }
  .menu-toggle{ display:inline-flex; }
  /* Ajustes extra: header compacto y claro */
  #cotOpen{ display:none; }
  .site-header .header-inner{ flex-wrap:nowrap; gap:12px; }
  .brand-logo{ height:56px; width:auto; }
  .site-nav{ z-index: 999; }
}
@media (max-width: 640px){
  /* Mantener header en una fila y compacto */
  .site-header .header-inner{ flex-wrap:nowrap; }
  .header-actions{ width:auto; justify-content:flex-end; }
}


/* Hero */

.hero{
  padding:0 0 24px;
}



.hero.hero-slider .hero-slide{

  position:relative;

  min-height:520px;

  padding:80px 0;

  background-size:cover;

  background-position:center;

  background-repeat:no-repeat;

  overflow:hidden;

}



.hero.hero-slider .hero-slide::after{

  content:'';

  position:absolute;

  inset:0;

  background:linear-gradient(120deg, rgba(3,7,18,.65) 30%, rgba(3,7,18,.35) 80%);

}



.hero.hero-slider .container{

  position:relative;

  z-index:1;

  max-width:1320px;

  margin:0 auto;

  padding:0 24px;

}

.hero-slider{

  position:relative;

  border-radius:12px;

  overflow:hidden;

  box-shadow:var(--shadow);

  background:#0d152e;

  height:clamp(520px,60vh,620px);

}

.hero-overlay{

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

  z-index:2;

  display:flex;

  flex-direction:column;

  gap:16px;

  width:min(780px,90vw);

  color:#fff;

  align-items:center;

  text-align:center;

  justify-content:center;

  opacity:0;

  animation:overlayFade 1s ease-out 0.35s forwards;

}

.hero-overlay .section-sub{
  font-size:13px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#ffffff;
  margin:0;
  text-shadow:0 10px 38px rgba(0,0,0,.85);
}
.hero-overlay h1{
  font-size:46px;
  line-height:1.2;
  margin:0;
  text-shadow:0 18px 32px rgba(0,0,0,.65);
  color:#ffe36b;
}
.hero-overlay .lead{
  font-size:18px;
  margin:0;
  color:#fff4d1;
  text-shadow:0 12px 28px rgba(0,0,0,.55);
}
.hero-overlay .hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  opacity:0;
  animation:overlayBtn 1s ease-out 0.7s forwards;
}

.hero-overlay .hero-actions .btn-secondary{
  padding:14px 32px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.7);
  background:#fff;
  color:#0a1224;
  font-weight:700;
  text-shadow:0 4px 14px rgba(0,0,0,.35);
  box-shadow:0 20px 40px rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.6);
  transition:transform .25s ease, box-shadow .25s ease;
}

.hero-overlay .hero-actions .btn-secondary:hover,
.hero-overlay .hero-actions .btn-secondary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 24px 48px rgba(0,0,0,.75), inset 0 0 0 2px rgba(255,255,255,.7);
}


@media (max-width: 991px){

  .hero-overlay{

    width:85vw;

    padding:0 12px;

  }

  .hero-overlay h1{

    font-size:36px;

  }

  .hero-overlay .lead{

    font-size:16px;

  }

}



@media (max-width: 640px){

  .hero-overlay{

    width:92vw;

  }

  .hero-overlay h1{

    font-size:28px;

  }

  .hero-overlay .hero-actions{

    flex-direction:column;

    align-items:center;

  }

}



@keyframes overlayFade {

  from {

    opacity:0;

    transform:translate(-50%,-55%);

  }

  to {

    opacity:1;

    transform:translate(-50%,-50%);

  }

}



@keyframes overlayBtn {

  from {

    opacity:0;

    transform:translateY(16px);

  }

  to {

    opacity:1;

    transform:translateY(0);

  }

}



@keyframes slideZoom {

  from {

    transform:scale(1);

  }

  to {

    transform:scale(1.08);

  }

}

.hero .right .hero-slider{

  width:100%;

  min-height:420px;

}

.hero-slider img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}

.hero-slider::before{

  content:"";

  display:block;

  padding-top:56.25%;

}

.hero-slide{

  position:absolute;

  inset:0;

  opacity:0;

  transition:opacity .6s ease;

  transform:scale(1);

  will-change:opacity, transform;

}



.hero-slide.active{

  opacity:1;

  animation:slideZoom 12s ease-in-out infinite alternate;

}

.hero-nav{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  width:36px;

  height:36px;

  border-radius:50%;

  border:1px solid rgba(255,255,255,.5);

  background:rgba(0,0,0,.25);

  color:#fff;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

}

.hero-nav.prev{

  left:8px;

}

.hero-nav.next{

  right:8px;

}

.hero-dots{

  position:absolute;

  left:0;

  right:0;

  bottom:10px;

  display:flex;

  justify-content:center;

  gap:8px;

}

.hero-dot{

  width:8px;

  height:8px;

  border-radius:50%;

  background:rgba(255,255,255,.6);

  border:1px solid rgba(0,0,0,.2);

}

.hero-dot.active{

  background:var(--color-acento);

}



@media (max-width: 1023px){

  .hero-slider{

    min-height:360px;

  }

}



.hero-slide-content{

  max-width:640px;

  display:flex;

  flex-direction:column;

  gap:16px;

  color:#fff;

}



.hero-slide-content h1{

  font-size:48px;

  line-height:1.2;

  margin:0;

}



.hero-slide-content .lead{

  font-size:18px;

  color:#f0f4ff;

  margin:0;

}



.hero-slide-content p{

  margin:0;

  color:#f5f7ff;

}



.hero-slide-content .section-sub{

  letter-spacing:1.8px;

  font-size:13px;

  text-transform:uppercase;

  color:#9fb1d9;

  margin:0;

}



.hero-actions{

  display:flex;

  gap:12px;

  flex-wrap:wrap;

  margin-top:8px;

}



@media (max-width: 991px){

  .hero-slide-content h1{

    font-size:38px;

  }

}



@media (max-width: 640px){

  .hero-slide{

    padding:56px 0;

  }

  .hero-slide-content h1{

    font-size:30px;

  }

}





/* Layout de productos */

.catalog-layout{display:grid;grid-template-columns:280px 1fr 340px;gap:24px}

.filters{background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:16px}

.filters h3{margin:0 0 12px;font-size:16px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.card{background:#fff;border:1px solid #e6e8ee;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}

.card .body{padding:12px 12px 16px;display:flex;flex-direction:column;gap:6px}

.card .meta{font-size:12px;color:#555}

.card .actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}

.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}

.toolbar input[type="search"]{flex:1;padding:10px 12px;border-radius:8px;border:1px solid #d8dbe6}

.toolbar .select{padding:10px 12px;border-radius:8px;border:1px solid #d8dbe6;background:#fff}



/* Panel Cotización */

.drawer{position:sticky;top:96px;align-self:start;background:#fff;border:1px solid #e6e8ee;border-radius:12px;padding:16px;max-height:calc(100vh - 116px);overflow:auto}

.drawer h3{margin:0 0 12px}

.drawer .item{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #f0f2f7}

.drawer .item:last-child{border-bottom:none}

.drawer .qty{display:flex;align-items:center;gap:6px}

.drawer .note{width:100%;padding:6px;border:1px solid #e6e8ee;border-radius:6px}

.drawer .footer{margin-top:12px;display:flex;justify-content:space-between;align-items:center}



/* Modal */

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:50}

.modal.open{display:flex}

.modal .dialog{background:#fff;width:min(920px,92vw);max-height:90vh;border-radius:12px;overflow:auto;padding:16px}

.modal .dialog h3{margin:0 0 8px}



/* Soluciones: nuevos paneles */

.solutions-section{padding:60px 0 40px;background:linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,0));}

.solutions-header{max-width:840px;margin:0 auto 32px;text-align:center;display:flex;flex-direction:column;gap:12px;padding:0 16px}

.solutions-header .section-title{font-size:32px;line-height:1.2}

.solutions-header .section-sub{letter-spacing:0.4em;text-transform:uppercase;font-size:12px;color:#9fb1d2;max-width:320px}

.solutions-header .section-lead{max-width:680px;margin:0 auto;color:rgba(255,255,255,.78);line-height:1.6}

.solutions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}

.solution-panel{background:rgba(5,10,24,.85);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.45);transition:border .2s ease,transform .2s ease}

.solution-panel:hover{transform:translateY(-4px);border-color:rgba(255,195,0,.6)}

.solution-panel h3{margin:0;font-size:1.5rem;color:#fff}

.solution-panel p{margin:0;color:rgba(255,255,255,.7);line-height:1.6}

.solution-panel .btn-link{margin-top:auto;padding-bottom:4px;border-bottom:1px solid transparent;color:#ffd855;font-size:0.85rem;letter-spacing:0.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;transition:border .2s ease}

.solution-panel .btn-link:hover{border-bottom-color:#ffd855}

.solution-panel[data-theme="amber"]{border-color:rgba(255,209,85,.35)}

.solution-panel[data-theme="sky"]{border-color:rgba(96,165,250,.35)}

.solution-panel[data-theme="emerald"]{border-color:rgba(34,197,94,.35)}

.solution-panel[data-theme="coral"]{border-color:rgba(248,113,113,.35)}

.solutions-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:38px}



/* Nosotros */

.columns-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* About teaser (home) */

.section-about .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}

.section-about .about-media img{width:100%;height:100%;max-height:360px;object-fit:cover;border-radius:16px}

.section-about .about-copy h3{margin:0 0 8px}

.section-about .about-list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:8px;color:#d6d9e5}

.section-about .about-list li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-acento);margin-right:8px;transform:translateY(-1px)}

.section-about .about-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

@media (max-width: 1023px){

  .section-about .about-grid{grid-template-columns:1fr}

}



/* Soluciones: Mapa de Flujo */

.flow-section{padding:28px 0}

.flow-header{max-width:960px;margin:0 auto 20px;padding:0 16px;display:flex;flex-direction:column;gap:10px;align-items:center}

.flow-header .section-title{font-size:32px}

.flow-header .section-lead{max-width:640px;text-align:center;margin:0;color:rgba(255,255,255,.75);line-height:1.6}

.flow-hero{margin:32px 0 24px}

.flow-layout{width:100%;padding:0 16px;margin:32px 0 24px;gap:32px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}

.flow-layout::before{content:"";height:80%;width:1px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));margin:0 12px}

.flow-visual{display:flex;justify-content:center;align-items:center;min-height:320px}

.flow-story{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
.flow-story h3{margin:0 0 12px;font-size:1.4rem;color:#fff}

.flow-story p{margin:0 0 14px;color:rgba(255,255,255,.85);line-height:1.6}

.flow-story ul{margin:0;padding-left:18px;color:rgba(255,255,255,.75);line-height:1.6;display:flex;flex-direction:column;gap:6px}

.flow-map{max-width:fit-content}

.flow-content{

.flow-details{display:flex;flex-direction:column;gap:18px;flex:1;min-width:280px}

.flow-notes-inline{display:flex;gap:18px;width:100%}

background:rgba(7,12,32,.92);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:18px;box-shadow:0 28px 60px rgba(0,0,0,.48);margin-top:6px;width:100%;max-width:540px;margin-left:auto;margin-right:auto;}

.flow-details{display:flex;flex-direction:column;gap:18px;width:100%;max-width:640px;margin-left:auto;margin-right:auto;}

.flow-notes-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}

.flow-content-lead{margin:0;font-size:1rem;color:rgba(255,255,255,.9);line-height:1.8}

.flow-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;justify-items:center}

.flow-note{padding:18px;border-radius:18px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px;min-height:180px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}

.flow-note h3{margin:0;font-size:1.3rem;color:#fff}

.flow-note p{margin:0;color:rgba(255,255,255,.76);line-height:1.6}

.flow-note .btn-link{margin-top:auto;padding-bottom:2px;border-bottom:1px solid transparent;color:#ffd855;font-size:0.85rem;letter-spacing:0.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;transition:border .2s ease}

.flow-note .btn-link:hover{border-bottom-color:#ffd855}

.flow-note[data-theme="amber"]{box-shadow:0 18px 40px rgba(255,209,85,.2)}

.flow-note[data-theme="sky"]{box-shadow:0 18px 40px rgba(96,165,250,.2)}

.flow-note[data-theme="coral"]{box-shadow:0 18px 40px rgba(248,113,113,.2)}

.flow-note:hover{transform:translateY(-4px);border-color:rgba(255,209,85,.6);box-shadow:0 32px 60px rgba(0,0,0,.55)}

.flow-notes-horizontal{display:flex;gap:18px;justify-content:space-between;width:100%;max-width:1160px;margin:32px auto;flex-wrap:wrap}

.flow-notes-horizontal .flow-note{flex:1;min-width:200px}

.flow-kits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;width:100%;max-width:960px}

.flow-kits-grid.flow-kits-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr))}

.flow-kit{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:20px;background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,255,255,0));border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px rgba(0,0,0,.45);min-height:210px}

.flow-kit strong{font-size:1.1rem;color:#fff}

.flow-kit p{margin:0;color:rgba(255,255,255,.78);line-height:1.4}

.flow-kit .btn{align-self:flex-start;}

.flow-kit[data-theme="emerald"]{border-top:3px solid #6ee0cb}

.flow-kit[data-theme="amber"]{border-top:3px solid #ffd855}

.flow-kit[data-theme="sky"]{border-top:3px solid #8fc6ff}

.flow-kit[data-theme="coral"]{border-top:3px solid #ffb4a3}

@media (max-width: 1023px){

  .flow-layout{grid-template-columns:1fr}

}

@media (max-width: 767px){

}

.flow-map{background:rgba(255,255,255,.96);border:1px solid #e6e8ee;border-radius:16px;box-shadow:var(--shadow);padding:12px;position:relative}
.flow-map.dark{background:rgba(8,19,38,.75);color:#f5f7fb;border:1px solid rgba(255,255,255,.12)}
  .flow-canvas{width:100%;height:100%;min-height:380px;display:block}
/* Espaciado superior solo en Productos antes del CTA final */
#productosPage ~ .footer-cta{margin-top:0;padding-top:0;background:var(--color-acento)}

  .section-header{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;text-align:center;align-items:center}
  .section-header h2{margin:0}
  .section-header .section-sub{margin:0;font-size:1rem;max-width:760px}
  .category-slider-shell{display:flex;align-items:center;gap:12px}
  .category-slider{display:flex;gap:20px;width:100%;overflow:hidden;/* no snap for marquee */scroll-snap-type:none;scroll-behavior:auto;padding-bottom:4px;align-items:stretch;height:550px;will-change:scroll-position;cursor:grab}
  .category-slider.dragging{cursor:grabbing}
  .category-slider .category-card{flex:0 0 302.125px;min-width:302.125px;height:550px}
  .category-slider__control{display:none}
  @media (max-width: 900px){
  .category-slider-shell{gap:4px}
  .category-slider{overflow-x:hidden}
  .category-slider .category-card{flex:0 0 100%;min-width:100%}
  .category-slider__control{display:none}
  }
.category-card{background:rgba(255,255,255,.9);border-radius:18px;border:1px solid rgba(15,23,42,.2);overflow:hidden;display:flex;flex-direction:column;min-height:520px;box-shadow:0 18px 45px rgba(0,0,0,.15);height:100%}
.category-card .media img{width:100%;height:220px;object-fit:cover}
.category-card .body{padding:24px 24px 38px;display:flex;flex-direction:column;gap:16px;flex:1}
.category-card h3{margin:0;font-size:1.5rem;color:#101828}
.category-card .meta{margin:0;font-size:0.95rem;color:#64748b;min-height:48px;line-height:1.4}
  .spec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:0.95rem;color:#0f172a;flex:1;min-height:120px;max-height:150px;overflow-y:auto}
  .spec-list li::before{content:'•';color:#f7c948;margin-right:6px}
  .card-more{background:linear-gradient(135deg,var(--color-acento),#ffc107);color:#0f172a;font-weight:700;border:none;padding:8px 18px;border-radius:999px;align-self:center;margin-bottom:8px;box-shadow:0 18px 30px rgba(255,183,7,.3);transition:transform .2s ease,box-shadow .2s ease}
  .card-more:hover{transform:translateY(-2px);box-shadow:0 20px 32px rgba(255,183,7,.45)}
  .category-card__actions .btn-primary{padding:10px 20px;font-weight:600}
.node{cursor:pointer}

.node .halo{fill:rgba(0,0,0,.35);stroke:rgba(255,255,255,.18);stroke-width:1}

.flow-map.dark .node .halo{fill:rgba(0,0,0,.45);stroke:rgba(255,255,255,.22)}

.node .ring{fill:none;stroke:var(--color-acento);stroke-width:3}

.node .core{fill:#0d152e}

.flow-map.dark .node .core{fill:rgba(13,23,43,.95)}

.node:hover .ring,.node:focus-visible .ring{stroke:#FFC300;stroke-width:4;filter:drop-shadow(0 0 6px rgba(255,195,0,.35))}

.node.active .core{fill:#FFC300}

.node .label{font:600 13px/1.2 Inter, Arial, sans-serif;fill:#f5f7fb;paint-order:stroke fill;stroke:rgba(0,0,0,.55);stroke-width:2;text-anchor:middle}

.detail-panel{background:#fff;border:1px solid #e6e8ee;border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px}

.dark .detail-panel,.flow-map.dark + .detail-panel{background:rgba(13,23,43,.9);border:1px solid rgba(255,255,255,.12);color:#f5f7fb}

.dark .detail-panel p{color:#d5deef}

.detail-panel h3{margin:0}

.kpi{display:inline-flex;gap:6px;align-items:center;padding:4px 8px;border-radius:999px;background:#eef;font-size:12px}

.dark .kpi{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28)}

/* For home flow-panel: enforce high contrast KPI chips */

.flow-map.dark + .detail-panel .kpi{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32)!important}

.detail-panel .btn-secondary{color:#fff;border-color:rgba(255,255,255,.85)}

.detail-panel .btn-primary{background:var(--color-acento);color:#111}

@media (max-width: 1023px){

  .flow-wrap{grid-template-columns:1fr}

  .kits-row{grid-template-columns:repeat(2,1fr)}

}

@media (max-width: 1100px){

  .flow-layout{grid-template-columns:1fr}

}

@media (max-width: 767px){

  .kits-row{grid-template-columns:1fr}

  .flow-info{padding:20px}

}



/* Contacto */

form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

form input,form select,form textarea{padding:12px;border-radius:8px;border:1px solid #d8dbe6;font:inherit}

form textarea{min-height:120px}



/* Footer robusto */

.footer-cta{background:var(--color-acento);color:#111}

.footer-cta .bar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 0;flex-wrap:wrap}

.footer{background:#040914;color:#f5f7fb;padding:0}

.footer-main{background:#040914;color:#f5f7fb;padding:40px 0 16px}

.footer-main > .container{width:100%;max-width:none;margin:0;padding:0 clamp(24px,4vw,64px)}

.footer-shell{width:100%;margin:0;padding:0;display:flex;flex-direction:column;gap:32px}

.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:32px;align-items:start;width:100%}

.footer-grid .brand-col{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;padding:20px 4px 0}

.footer-grid .brand-col img{width:clamp(120px,15vw,180px);height:auto}

.footer-grid .brand-col p{color:rgba(255,255,255,.75);margin:0;font-size:15px;line-height:1.7;max-width:320px}
.footer-link{color:#fff;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px}

.footer-link::after{content:'';display:block;height:1px;width:0;background:#fff;transition:width .2s ease}

.footer-link:hover::after{width:56px}

.footer-block{display:flex;flex-direction:column;gap:12px}
.footer-grid .contact-block{ margin-top:-10px }
.contact-block .hours{ margin-top: 10px }
.support-block h4,.quick-links-block h4,.contact-block h4{margin:0}

.support-links{display:flex;flex-direction:column;gap:8px;font-size:16px}
.support-links a{color:#cfd7ea;transition:color .2s ease}

.support-links a:hover{color:var(--color-acento)}

.quick-links-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}

.quick-links-list a{color:#cfd7ea;transition:color .2s ease;font-size:16px}
.quick-links-list a:hover{color:var(--color-acento)}

.footer-main h4{margin:0 0 10px}

.footer-main a{color:#8da0bf;opacity:1}

.footer-main a:hover{color:var(--color-acento);text-decoration:underline;text-decoration-color:var(--color-acento);text-underline-offset:6px}

.footer-main p{color:#cfd7ea; font-size:16px}
/* Unify footer colors across all structures */

footer .footer-shell h4{color:#f5f7fb}

footer .footer-shell p{color:#cfd7ea}

footer .footer-shell a{color:#8da0bf}

footer .footer-shell a:hover{color:var(--color-acento);text-decoration:underline;text-decoration-color:var(--color-acento);text-underline-offset:6px}

.sub-footer{background:transparent;color:#8da0bf;font-size:13px}

.sub-footer .bar{padding:12px 0;text-align:center;border-top:1px solid rgba(255,255,255,.12)}



/* Footer: horarios de atención */

.hours{margin-top:10px}

.hours__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}

.hours__status{font-weight:600;font-size:12px;color:var(--color-acento)}

.hours__status.closed{color:#8da0bf}

.hours__grid{display:grid;gap:6px;border-top:1px solid rgba(255,255,255,.08);padding-top:6px}

.hours__grid .row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06)}

.hours__grid .row:last-child{border-bottom:0}

.hours__grid .day{color:#f5f7fb}

.hours__grid .time{color:#8da0bf}

.hours__grid .row.is-today .day,.hours__grid .row.is-today .time{color:var(--color-acento)}



/* WhatsApp flotante y barra mobile */

.whatsapp-fab{position:fixed;right:16px;bottom:24px;background:transparent;border-radius:999px;width:64px;height:64px;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow);z-index:60}
.whatsapp-fab img{width:100%;height:100%;display:block}

.wapp-tip{position:fixed;right:96px;bottom:40px;background:var(--color-acento);color:var(--on-accent);padding:10px 12px;border-radius:10px;box-shadow:var(--shadow);z-index:31;display:flex;align-items:center;gap:8px;opacity:1;transform:translateY(0);transition:opacity .2s ease, transform .2s ease}

.wapp-tip.hide{opacity:0;transform:translateY(4px);pointer-events:none}

.wapp-tip .close{background:transparent;border:0;color:#111;cursor:pointer;font-weight:700;line-height:1}



@media (max-width: 1100px){

  .footer-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

}

.wapp-tip::after{content:"";position:absolute;right:-8px;bottom:20px;border-left:8px solid var(--color-acento);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* Normalize size of hours status to match row text */
.hours__status{ font-size: inherit; }

/* Footer alignment tweaks: align Contact column and hours with others */
footer .footer-grid .contact-block { margin-top: -10px; }
footer .footer-grid .contact-block .hours { margin-top: 0; }
footer .footer-shell .contact-block p { margin: 0 0 6px; }
.mobile-sticky{display:none !important}



/* Responsive */

@media (max-width: 1023px){

  .catalog-layout{grid-template-columns:1fr}

  .cards{grid-template-columns:repeat(2,1fr)}

  .drawer{position:fixed;top:0;right:0;height:100vh;max-height:none;width:min(420px,96vw);transform:translateX(100%);transition:transform .25s ease;z-index:40}

  .drawer.open{transform:translateX(0)}

}

@media (max-width: 767px){

  .hero .cols{display:block}

  .cards{grid-template-columns:1fr}

  .footer-grid{grid-template-columns:1fr}

  /* mobile-sticky deshabilitado */

  .whatsapp-fab{bottom:84px}

  .wapp-tip{right:96px;bottom:128px}

  .wapp-tip::after{bottom:24px}

}



/* --- Overrides HOME (glass sections and spacing) --- */

body.home{color:#f5f7fb}

body.home .section-surface{margin:64px 0; padding:0}

body.home .section-surface > .container{background:rgba(8,19,38,.75);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:32px;max-width:1100px;width:min(1100px,92vw)}

body.home .section-categories{padding:72px 0}



/* Drawer visibility: hidden by default except in catalog layout; overlay when open */

.drawer{display:none}
.catalog-layout .drawer{display:block}
.drawer.open{display:block;position:fixed;top:0;right:0;height:100vh;max-height:none;width:min(420px,96vw);z-index:50;border-radius:12px;background:#fff;border:1px solid #e6e8ee}

.whatsapp-modal{
  position:fixed;
  bottom:calc(84px + 16px);
  right:24px;
  display:flex;
  align-items:flex-end;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  z-index:90;
}
.whatsapp-modal.open{
  opacity:1;
  pointer-events:auto;
}
.whatsapp-modal__card{
  position:relative;
  background:#0f172a;
  color:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  width:260px;
  text-align:center;
}
.whatsapp-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  background:transparent;
  border:none;
  font-size:24px;
  color:#fff;
  cursor:pointer;
}
.whatsapp-modal__lead{
  margin:8px 0 20px;
  color:rgba(255,255,255,.85);
}
.whatsapp-modal__options{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.whatsapp-modal__option{
  border:none;
  border-radius:14px;
  padding:14px 24px;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-modal__option.option-accent{ background: var(--color-acento); color: var(--on-accent, #111); box-shadow:0 12px 28px rgba(255,183,3,.35); }
.whatsapp-modal__option.option-primary{ background: var(--color-acento); color: var(--on-accent, #111); box-shadow:0 12px 28px rgba(255,183,3,.35); }
.whatsapp-modal__option span{
  font-weight:700;
}
.whatsapp-modal__option:hover,
.whatsapp-modal__option:focus-visible{ transform:translateY(-2px); }
.whatsapp-modal__option.option-accent:hover,
.whatsapp-modal__option.option-accent:focus-visible{ box-shadow:0 18px 40px rgba(255,183,3,.55); }
.whatsapp-modal__option.option-primary:hover,
.whatsapp-modal__option.option-primary:focus-visible{ box-shadow:0 18px 40px rgba(255,183,3,.55); }
.whatsapp-modal__card::after{
  content:'';
  position:absolute;
  bottom:-16px;
  right:28px;
  width:0;
  height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-top:16px solid #0f172a;
}
@media (max-width: 640px){
  .whatsapp-modal__card{padding:22px;}
}






/* Flow layout overrides */

.flow-layout{width:100%;padding:0 16px;margin:32px 0 24px;gap:32px;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}

.flow-layout::before{content:'';height:80%;width:1px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.3),rgba(255,255,255,0));margin:0 12px}

.flow-visual{display:flex;justify-content:center;align-items:center;min-height:320px}

.flow-details{display:flex;flex-direction:column;gap:22px;flex:1;min-width:280px}

.flow-content{background:transparent;border:0;border-radius:0;padding:26px 0;display:flex;flex-direction:column;gap:18px;margin-top:6px;width:100%;max-width:540px;margin-left:auto;margin-right:auto}
.flow-content-lead{margin:0;font-size:1rem;color:rgba(255,255,255,.9);line-height:1.8}

.flow-notes-inline{display:flex;gap:18px;width:100%;flex-wrap:wrap;margin-top:12px}

.flow-notes-horizontal{display:flex;gap:18px;justify-content:space-between;width:100%;max-width:1160px;margin:32px auto 0;flex-wrap:wrap}

.flow-notes-horizontal .flow-note{flex:1;min-width:220px}

.flow-note{padding:18px;border-radius:18px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:8px;min-height:200px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}

.flow-note h3{margin:0;font-size:1.3rem;color:#fff}

.flow-note p{margin:0;color:rgba(255,255,255,.76);line-height:1.6}

.flow-note .btn-link{margin-top:auto;padding-bottom:2px;border-bottom:1px solid transparent;color:#ffd855;font-size:0.85rem;letter-spacing:0.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;transition:border .2s ease}

.flow-note .btn-link:hover{border-bottom-color:#ffd855}

.flow-note[data-theme="amber"]{box-shadow:0 18px 40px rgba(255,209,85,.2)}

.flow-note[data-theme="sky"]{box-shadow:0 18px 40px rgba(96,165,250,.2)}

.flow-note[data-theme="coral"]{box-shadow:0 18px 40px rgba(248,113,113,.2)}

.flow-note:hover{transform:translateY(-4px);border-color:rgba(255,209,85,.6);box-shadow:0 32px 60px rgba(0,0,0,.55)}

.flow-map{background:rgba(255,255,255,.96);border:1px solid #e6e8ee;border-radius:16px;box-shadow:var(--shadow);padding:12px;position:relative}

.flow-map.dark{background:rgba(8,19,38,.75);color:#f5f7fb;border:1px solid rgba(255,255,255,.12)}

.flow-canvas{width:100%;height:100%;min-height:380px;display:block}
/* Separador blanco entre secciones (productos) */
.spacer-white{width:100%;height:64px;background:#ffffff}
#productosPage ~ .mobile-sticky{background:#ffffff}

/* Catalog full-width section */
.catalog-section{ background:#ffffff !important; }
.catalog-section > .container{ max-width:none; width:100%; padding:0; }
.catalog-section .toolbar{ max-width:1400px; margin:0 auto 12px; padding:12px 16px; }
.catalog-section .catalog-layout{ display:grid; grid-template-columns:280px 1fr; gap:24px; max-width:1400px; margin:0 auto; padding:0 16px; }
.catalog-section #prodGrid.cards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
@media (max-width: 900px){
  .catalog-section .catalog-layout{ grid-template-columns:1fr; }
  .catalog-section #prodGrid.cards{ grid-template-columns:1fr; }
}

/* Soluciones: secciones full-width sin tarjetas */
.section-full{ width:100%; background:transparent; padding:48px 0; }
.section-full.on-dark{ background:transparent; color:#f5f7fb; }
.container-wide{ width:100%; max-width:none; padding:0 clamp(24px,6vw,80px); margin:0; }
.slice .slice-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; align-items:center; }
.slice.alt .slice-grid{ grid-auto-flow:dense; }
.slice .slice-copy h2, .slice .slice-copy h3{ margin:0 0 10px; color:#f5f7fb; }
.slice.alt .slice-copy h3{ color:#f5f7fb; }
.section-full.on-dark .slice-copy h3, .section-full.on-dark h3{ color:#fff; }
.slice .slice-copy p{ margin:0 0 10px; color:rgba(245,247,251,.9); }
.slice .bullet{ margin:10px 0 0; padding-left:18px; color:rgba(245,247,251,.85); }
.slice .bullet li{ margin:6px 0; }
.slice .slice-media img, .slice .slice-media video{ width:100%; height:360px; object-fit:cover; display:block; border-radius:12px; box-shadow:var(--shadow); }
.slice .slice-actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 900px){ .slice .slice-grid{ grid-template-columns:1fr; } }

/* Contacto: hero más destacado */
#contactoPage .contact-hero{ padding:64px 0 32px; }
#contactoPage .contact-hero .slice-copy h2{ font-size:clamp(2.6rem,5vw,3.8rem); line-height:1.12; }
#contactoPage .contact-hero .slice-copy p{ font-size:1.1rem; }

/* Proceso (banda oscura) */
.process-band{ background:linear-gradient(180deg,#0b1224 0%, #0d1430 100%); color:#e6ecff; }
.process-band h3{ margin:0 0 16px; }
.process-steps{ position:relative; display:flex; gap:28px; flex-wrap:nowrap; align-items:flex-start; padding-top:56px; }
.process-steps .track{ position:absolute; top:38px; left:8%; right:8%; height:8px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden; }
.process-steps .track .fill{ position:absolute; top:0; left:0; height:100%; width:0%; background:linear-gradient(90deg, #FFB703, #FFD166); box-shadow:0 0 18px rgba(255,183,3,.55); }
.process-steps .track .fill::after{ content:''; position:absolute; top:0; left:-20%; width:40%; height:100%; background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.6), rgba(255,255,255,.0)); filter:blur(6px); animation: shine 2.8s linear infinite; }
@keyframes shine { 0%{ transform:translateX(0) } 100%{ transform:translateX(300%) } }
.process-steps .step{ flex:1 1 0; background:none; border:none; border-radius:0; padding:0; text-align:center; position:relative; }
.process-steps .step .dot{ display:inline-flex; width:22px; height:22px; border-radius:999px; align-items:center; justify-content:center; background:rgba(255,255,255,.3); border:2px solid rgba(255,255,255,.5); margin-bottom:10px; position:relative; z-index:1; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease; cursor:default; outline:none; -webkit-tap-highlight-color: transparent; }
.process-steps .step.done .dot{ background:#FFB703; border-color:#FFB703; box-shadow:0 0 12px rgba(255,183,3,.6); }
.process-steps .step.active .dot{ transform:scale(1.15); }
.process-steps .step strong{ display:block; margin-bottom:6px; color:#fff; }
.process-steps .step p{ margin:0; color:#cfd7ea; }
.process-steps .step:hover .dot{ box-shadow:0 0 0 6px rgba(255,183,3,.18); }
.process-steps .step.done:hover .dot{ box-shadow:0 0 12px rgba(255,183,3,.6), 0 0 0 6px rgba(255,183,3,.18); }

/* Tooltip simple sobre el dot */
.process-steps .step[data-title] .dot:hover::after{ content:attr(data-title); position:absolute; bottom:150%; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:6px 8px; border-radius:6px; font-size:12px; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.35); z-index:10; pointer-events:none; }
.process-steps .step[data-title] .dot:hover::before{ content:''; position:absolute; bottom:135%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#111827; }

@media (max-width: 900px){
  .process-steps{ flex-direction:column; gap:22px; padding-top:0; padding-left:32px; }
  .process-steps .track{ top:auto; left:18px; right:auto; width:2px; height:calc(100% - 10px); }
  .process-steps .track .fill{ width:100%; height:0%; }
  .process-steps .step{ text-align:left; }
  .process-steps .step .dot{ margin-bottom:6px; }
}

/* Evitar tooltip en dispositivos táctiles para prevenir estados hover pegados */
@media (hover: none){
  .process-steps .step[data-title] .dot:hover::after,
  .process-steps .step[data-title] .dot:hover::before{ display:none; content:none; }
}

/* Galería de capacidades */
.gallery h3{ margin:0 0 16px; color:#f5f7fb; }
.gallery-grid{ display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.gallery-grid figure{ margin:0; }
.gallery-grid img{ width:100%; height:220px; object-fit:cover; display:block; border-radius:12px; box-shadow:var(--shadow); }
.gallery-grid figcaption{ margin-top:6px; color:#cfd7ea; font-size:14px; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns:1fr; } }

/* Contacto: quick links + form */
.contact-quick .quick-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.contact-quick .quick-card{ display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid rgba(255,255,255,.14); border-radius:12px; color:#e6ecff; background:rgba(255,255,255,.04); text-decoration:none }
.contact-quick .quick-card strong{ color:#fff }
.contact-quick .quick-card:hover{ background:rgba(255,255,255,.08) }
@media (max-width: 900px){ .contact-quick .quick-grid{ grid-template-columns:1fr } }

.form-layout{ display:grid; gap:24px; grid-template-columns:2fr 1fr; align-items:start }
@media (max-width: 1024px){ .form-layout{ grid-template-columns:1fr } }
.contact-form .form-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.contact-form .field{ display:flex; flex-direction:column; gap:6px }
.contact-form .field.full{ grid-column:1/-1 }
.contact-form label{ color:#cfd7ea; font-size:14px }
.contact-form input, .contact-form select, .contact-form textarea{
  background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:10px 12px; outline:none
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  border-color: var(--color-acento); box-shadow: 0 0 0 3px rgba(255,183,3,.2)
}
.pref-group{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:8px 0 4px }
.pref-group .label{ color:#e6ecff; font-weight:600; margin-right:6px }
.pref-group .hint{ color:#cbd5e1 }
.contact-form .policy{ display:flex; align-items:center; gap:10px; margin-top:8px }
.contact-form .actions{ margin-top:10px }
.quote-summary{ border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px; background:rgba(255,255,255,.04); color:#e6ecff }
.quote-summary h3{ margin:0 0 8px; color:#fff }
.quote-summary .mini-actions{ margin-top:10px }
.quote-summary .map{ width:100%; height:220px; border:0; border-radius:12px; box-shadow:var(--shadow) }

/* Soluciones: fondo transparente y texto claro en toda la landing */
.solutions-section{ background:transparent !important; backdrop-filter:none !important; border:none !important; box-shadow:none !important; }
.solutions-section, .solutions-section *{ color:inherit }
.solutions-section .solutions-header .section-title{ color:#f5f7fb }
.solutions-section .solutions-header h2{ color:#f5f7fb; font-size:clamp(2.2rem,4vw,3.2rem); line-height:1.2 }
.solutions-section .solutions-header .section-sub{ color:#cbd5e1 }
.solutions-section .solutions-header .section-lead{ color:rgba(245,247,251,.9) }
/* Asegurar color del H2 en soluciones (sin clase) */
.solutions-section .solutions-header h2{ color:#f5f7fb }
/* Botones en Soluciones (contraste en fondo oscuro) */
.solutions-section .btn:not(.btn-primary),
.section-full .btn:not(.btn-primary),
.gallery .btn:not(.btn-primary){
  color:#fff; border-color:#fff; background:transparent;
}
.solutions-section .btn:not(.btn-primary):hover,
.section-full .btn:not(.btn-primary):hover,
.gallery .btn:not(.btn-primary):hover{ background:var(--color-acento); border-color:var(--color-acento); color:#111; }
/* details/summary estilos para facetas */
.catalog-plp details.facet-section > summary{
  list-style:none; cursor:pointer; font-weight:600; padding:6px 0; position:relative;
}
.catalog-plp details.facet-section > summary::-webkit-details-marker{ display:none }
.catalog-plp details.facet-section > summary::after{
  content:''; position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(0deg); transition:transform .2s ease;
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid currentColor;
}
.catalog-plp details.facet-section[open] > summary::after{ transform:translateY(-50%) rotate(180deg); }
/* Facetas en recuadros */
.catalog-plp details.facet-section{
  border:1px solid #e6e8ee; border-radius:10px; padding:6px 10px; background:#fff; margin-bottom:12px;
}
.catalog-plp .facet-group details.facet-section{ margin-bottom:8px; }
.catalog-plp details.facet-section > summary{ display:flex; align-items:center; justify-content:space-between; }

/* Evitar selección/arrastre en carrusel */
.category-slider, .category-slider *{
  -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
.category-slider{ touch-action: pan-y; }
.category-slider img{ -webkit-user-drag: none; user-drag: none; }


#productosPage .category-slider{ touch-action: pan-x; }



/* Contact page: center WhatsApp quick-card content */
#contactoPage .contact-quick .quick-card[data-wa-direct]{
  align-items:center;
  text-align:center;
}

/* Footer-CTA responsive alignment (laptop/tablet only) */
@media (max-width: 1200px){
  .footer-cta .bar{ justify-content:center; text-align:center; }
  .footer-cta .bar > strong{ text-align:center; }
  .footer-cta .bar > div{ justify-content:center; }
}
@media (max-width: 900px){
  .footer-cta .bar{ flex-direction:column; align-items:center; }
}

/* Home > Categorías destacadas: mobile/tablet fixes */
body.home{ overflow-x:hidden; }
@media (max-width: 1023px){
  .home .section-categories .categories-bleed{
    left:auto; right:auto;
    margin: 0 -20px;
    width: calc(100% + 40px);
  }
  .home .section-categories .categories-panels{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:16px;
  }
}
@media (max-width: 767px){
  .home .section-categories{ padding:40px 0; }
  .home .section-categories .categories-bleed{
    left:auto; right:auto;
    margin: 0 -16px;
    width: calc(100% + 32px);
    margin-bottom: 0;
  }
  .home .section-categories .categories-panels{
    grid-template-columns: 1fr;
    gap:16px;
  }
  /* Reducir altura general de las tarjetas de categorías en móvil */
  .home .section-categories .category-panel{ min-height: clamp(220px, 42vh, 300px) !important; }
  /* Imagen menos alta para compactar la tarjeta */
  .home .section-categories .panel-media{ aspect-ratio: 4/3 !important; }
  /* Tipografía y paddings más contenidos */
  .home .section-categories .panel-body{ padding: 16px 16px 20px !important; text-align:center; }
  .home .section-categories .category-panel h3{ font-size: 1.2rem !important; }
  .home .section-categories .category-panel p{ font-size: .95rem !important; }
  .home .section-categories .panel-body{ text-align:center; }
  .home .section-categories .btn-link{ align-self:center; }
  /* Ocultar solo las cards en mobile, mantener encabezado */
  .home .section-categories .categories-bleed{ display:none !important; }
}

/* Home > Hero: mejorar navegación y altura en mobile */
@media (max-width: 767px){
  .home .hero-slider{ height: clamp(360px, 65vh, 520px); }
  .home .hero .hero-slide{ min-height: clamp(360px, 65vh, 520px); padding: 48px 0; }
  .home .hero-overlay{ width: 92vw; padding: 0 12px; }
  .home .hero-nav{ width: 48px; height: 48px; z-index: 5; pointer-events: auto; background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.6); }
  .home .hero-nav.prev{ left: 8px; top: 50%; transform: translateY(-50%); }
  .home .hero-nav.next{ right: 8px; top: 50%; transform: translateY(-50%); }
}

/* Home > Trayectoria: stats horizontales compactas en mobile */
@media (max-width: 767px){
  .home .section-trajectory .trajectory-stats{ display:flex; flex-wrap:nowrap; justify-content:space-around; align-items:flex-start; gap:12px; }
  .home .section-trajectory .trajectory-stats .stat{ text-align:center; }
  .home .section-trajectory .trajectory-stats .stat-number{ font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .home .section-trajectory .trajectory-stats .stat p{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
}

/* Home > Trayectoria: ocultar números en móvil, mantener etiquetas */
@media (max-width: 767px){
  .home .section-trajectory .trajectory-stats .stat-number{ display:none !important; }
}

/* Soluciones > ajustar grid y tarjetas en mobile */
@media (max-width: 767px){
  .solutions-grid{ grid-template-columns: 1fr !important; gap: 14px !important; }
  .solution-panel{ padding: 14px !important; border-radius: 18px !important; }
  .solution-panel h3{ font-size: 1.15rem !important; }
  .solution-panel p{ font-size: .9rem !important; }
}

/* Header responsive fixes (scoped overrides) */
.site-header{ position:sticky; top:0; z-index:40; width:100%; }
.site-header .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand .brand-logo, .site-header .brand .brand-logo{ height:68px; width:auto; display:block; }
.menu-toggle{ display:none; }
.site-nav{ display:flex; align-items:center; gap:30px; }
.site-nav a{ padding:8px 0; }

@media (max-width: 1200px){
  .site-header .header-inner{ flex-wrap:nowrap; }
  .site-header .brand .brand-logo{ height:68px; }
  .header-contact{ display:none !important; }
  #cotOpen{ display:none !important; }
  .menu-toggle{ display:inline-flex !important; }
  .site-nav{
    display:none !important;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:14px; padding:18px 24px;
    background:#030712; border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 32px rgba(0,0,0,.45); z-index:9999;
  }
  .site-nav.open{ display:flex !important; }
}

/* Botón hamburguesa: sin fondo, líneas blancas y más grandes */
.btn.menu-toggle, .menu-toggle{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px;
}
.menu-toggle svg{ width: 32px; height: 32px; display:block; }
.menu-toggle svg path{ fill: #fff !important; }

@media (max-width: 640px){
  .site-header .brand .brand-logo{ height:64px; }
}

/* Footer: mobile-only visibility adjustments */
@media (max-width: 767px){
  footer .footer-grid .quick-links-block{ display:none !important; }
  footer .footer-grid .support-block{ display:none !important; }
  footer .footer-grid .contact-block .hours{ display:none !important; }
}

/* Oil background overlay (applied when body.oil-bg is present) */
#bgOil{ position:fixed; inset:-35%; z-index:0; pointer-events:none; mix-blend-mode: screen; }
#bgOil .l1, #bgOil .l2{ position:absolute; inset:0; display:block; }
#bgOil .l1{
  filter: blur(45px); opacity:.75; animation: flow 24s ease-in-out infinite;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,183,3,0.55), transparent 55%),
    radial-gradient(circle at 65% 50%, rgba(255,183,3,0.15), transparent 65%),
    radial-gradient(circle at 40% 75%, rgba(255,255,255,0.08), transparent 45%),
    conic-gradient(from 210deg, rgba(4,18,53,0.7), rgba(8,40,80,0.8), rgba(18,45,90,0.9));
}
#bgOil .l2{
  filter: blur(60px); opacity:.65; animation: flow 28s ease-in-out -8s infinite;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,183,3,0.55), transparent 55%),
    radial-gradient(circle at 65% 50%, rgba(255,183,3,0.15), transparent 65%),
    radial-gradient(circle at 40% 75%, rgba(255,255,255,0.08), transparent 45%),
    conic-gradient(from 210deg, rgba(4,18,53,0.7), rgba(8,40,80,0.8), rgba(18,45,90,0.9));
}
body.oil-bg header, body.oil-bg main, body.oil-bg footer{ position:relative; z-index:1; }
body.oil-bg.home::before, body.oil-bg.home::after{ display:none; }
@keyframes flow{
  0%{ transform: translate3d(-18%, -10%, 0) scale(1) rotate(-5deg); }
  40%{ transform: translate3d(12%, -8%, 0) scale(1.15) rotate(2deg); }
  70%{ transform: translate3d(18%, 6%, 0) scale(1.2) rotate(3deg); }
  100%{ transform: translate3d(-18%, -10%, 0) scale(1) rotate(-5deg); }
}