/* Página Productos CYSM: Pilz con catálogo detallado y marcas con asesoría. */
:root{
  --products-ink:#0b1220;
  --products-muted:#5d6877;
  --products-line:#dfe5eb;
  --products-soft:#f3f6f8;
  --products-yellow:#ffd000;
  --products-blue:#1464a5;
  --products-teal:#008f88;
  --products-green:#2f9b57;
}

html{scroll-behavior:smooth}
body.products-page{margin:0;background:#f6f8fa;color:var(--products-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;overflow-x:hidden}
.products-page main{padding-top:92px}
.products-container{width:min(1160px,92%);margin:0 auto}
.products-eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:#6f7a86;font-size:.75rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.products-eyebrow::before{content:"";width:28px;height:3px;border-radius:99px;background:var(--products-yellow)}
.products-page h1,.products-page h2,.products-page h3{margin:0;line-height:1.08;letter-spacing:-.035em}
.products-page p{margin:0}
.products-page a{color:inherit}
.products-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:46px;padding:.72rem 1.1rem;border:1px solid transparent;border-radius:999px;font-weight:850;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.products-btn:hover{transform:translateY(-2px)}
.products-btn--yellow{background:var(--products-yellow);box-shadow:0 12px 26px rgba(255,208,0,.22)}
.products-btn--yellow:hover{box-shadow:0 16px 32px rgba(255,208,0,.3)}
.products-btn--dark{background:var(--products-ink);color:#fff!important;box-shadow:0 12px 24px rgba(11,18,32,.16)}
.products-btn--light{background:#fff;border-color:var(--products-line);color:var(--products-ink)!important}
.products-btn--light:hover{border-color:#b8c4d0;box-shadow:0 10px 24px rgba(11,18,32,.08)}

/* Hero */
.products-hero{position:relative;isolation:isolate;min-height:590px;display:grid;align-items:center;color:#fff;background:linear-gradient(90deg,rgba(7,17,29,.94) 0%,rgba(7,17,29,.84) 42%,rgba(7,17,29,.52) 100%),url('/assets/img/productos/hero-productos.webp') center/cover no-repeat;overflow:hidden}
.products-hero::before,.products-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.products-hero::before{width:620px;height:620px;right:-180px;top:-260px;background:radial-gradient(circle,rgba(255,208,0,.24),transparent 66%)}
.products-hero::after{width:700px;height:700px;left:-410px;bottom:-500px;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 68px rgba(255,255,255,.025)}
.products-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:70px;align-items:center}
.products-hero__copy{padding:56px 0}
.products-hero .products-eyebrow{color:#dce8ef}
.products-hero h1{max-width:720px;margin-top:18px;font-size:clamp(2.6rem,5vw,5rem);font-weight:950}
.products-hero h1 strong{color:var(--products-yellow)}
.products-hero__lead{max-width:660px;margin-top:24px!important;color:#e3edf2;font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.65}
.products-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.products-hero__note{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px;color:#bdd0da;font-size:.9rem}
.products-hero__note span{display:inline-flex;align-items:center;gap:7px}
.products-hero__note span::before{content:"✓";display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--products-yellow);color:var(--products-ink);font-size:.75rem;font-weight:950}


/* Intro */
.products-intro{padding:80px 0 38px;background:#fff}
.products-intro__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:60px;align-items:end}
.products-intro h2{margin-top:16px;font-size:clamp(2rem,3.5vw,3.3rem)}
.products-intro__copy{max-width:680px;color:var(--products-muted);font-size:1.08rem;line-height:1.72}
.products-intro__copy strong{color:var(--products-ink)}

/* Pilz catalog */
.products-pilz{padding:38px 0 92px;background:#fff}
.products-pilz__header{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}
.products-pilz__header h2{margin-top:16px;font-size:clamp(2rem,3.6vw,3.35rem)}
.products-pilz__header p{max-width:560px;color:var(--products-muted);font-size:1.02rem}
.products-pilz__label{display:inline-flex;align-items:center;gap:8px;padding:.42rem .68rem;border:1px solid #ffe06b;border-radius:99px;background:#fff9d7;color:#6b5700;font-size:.77rem;font-weight:900}
.products-pilz__label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--products-yellow)}
.products-family-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.products-family{grid-column:span 4;display:flex;flex-direction:column;min-height:390px;border:1px solid var(--products-line);border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 12px 34px rgba(12,31,45,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.products-family:hover{transform:translateY(-5px);border-color:#f0c800;box-shadow:0 18px 42px rgba(12,31,45,.13)}
.products-family--wide{grid-column:span 6}
.products-family__media{position:relative;height:200px;display:grid;place-items:center;padding:18px;background:linear-gradient(145deg,#f4f7f9,#e9eef2);overflow:hidden}
.products-family__media::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;border:1px solid rgba(11,18,32,.08);box-shadow:0 0 0 22px rgba(11,18,32,.025),0 0 0 44px rgba(11,18,32,.018)}
.products-family__media img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(11,18,32,.14));transition:transform .35s ease}
.products-family:hover .products-family__media img{transform:scale(1.04)}
.products-family__body{display:flex;flex:1;flex-direction:column;padding:21px 22px 22px}
.products-family__body h3{font-size:1.34rem}
.products-family__body p{margin-top:10px;color:var(--products-muted);font-size:.94rem;line-height:1.6}
.products-family__action{margin-top:auto;padding-top:18px;color:#806900;font-weight:900;text-decoration:none}
.products-family__action::after{content:" →";transition:padding .2s ease}.products-family__action:hover::after{padding-left:4px}
.products-pilz .products-family__media{background:linear-gradient(145deg,#f4f7f9,#e9eef2)}
.products-pilz .products-family__media img{visibility:hidden}
.products-pilz .products-family__media::before{content:"";position:absolute;inset:0;z-index:1;background-position:center;background-repeat:no-repeat;background-size:contain;transition:transform .35s ease}
.products-pilz .products-family:nth-child(1) .products-family__media::before{background-image:url('/assets/img/catalogos/pilz/producto-reles.webp')}
.products-pilz .products-family:nth-child(2) .products-family__media::before{background-image:url('/assets/img/catalogos/pilz/accesosmlock.webp')}
.products-pilz .products-family:nth-child(3) .products-family__media::before{background-image:url('/assets/img/catalogos/pilz/senpsen.webp')}
.products-pilz .products-family:nth-child(4) .products-family__media::before{background-image:url('/assets/img/catalogos/pilz/psencopt.webp')}
.products-pilz .products-family:nth-child(5) .products-family__media::before{background-image:url('/assets/img/catalogos/pilz/psenrscan.webp')}
.products-pilz .products-family:nth-child(6) .products-family__media::before{background-image:url('/assets/img/catalogos/pilz/productopitbox.webp')}
.products-pilz .products-family:hover .products-family__media::before{transform:scale(1.04)}
.products-page .products-pilz .products-family,.products-page .products-pilz .products-family--wide{grid-column:span 6}

/* Other brands */
.products-other{position:relative;padding:94px 0 100px;background:var(--products-soft);overflow:hidden}
.products-other::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,var(--products-blue),var(--products-teal),var(--products-green))}
.products-other__header{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:end;margin-bottom:34px}
.products-other__header h2{margin-top:16px;font-size:clamp(2rem,3.6vw,3.25rem)}
.products-other__header p{max-width:610px;color:var(--products-muted);font-size:1.05rem;line-height:1.7}
.products-brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.products-brand-card{position:relative;display:flex;flex-direction:column;min-height:420px;padding:27px;border:1px solid var(--products-line);border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 14px 34px rgba(12,31,45,.06);transition:transform .25s ease,box-shadow .25s ease}
.products-brand-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(12,31,45,.12)}
.products-brand-card::before{content:"";position:absolute;inset:0 0 auto;height:7px;background:var(--brand-color)}
.products-brand-card--hirschmann{--brand-color:var(--products-blue)}
.products-brand-card--pepperl{--brand-color:var(--products-teal)}
.products-brand-card--gobo{--brand-color:var(--products-green)}
.products-brand-card__visual{display:grid;place-items:center;height:145px;margin:-27px -27px 25px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand-color) 16%,#fff),#fff);color:var(--brand-color)}
.products-brand-card__visual img{display:block;width:min(88%,260px);height:130px;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(12,31,45,.16));animation:brand-product-float 5s ease-in-out infinite}
.products-brand-card:nth-child(2) .products-brand-card__visual img{animation-delay:-1.6s}.products-brand-card:nth-child(3) .products-brand-card__visual img{animation-delay:-3.2s}
.products-brand-card:hover .products-brand-card__visual img{animation-play-state:paused;transform:translateY(-4px) scale(1.03)}
@keyframes brand-product-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.brand-visual__network{position:relative;width:165px;height:86px}
.brand-visual__network::before,.brand-visual__network::after{content:"";position:absolute;left:28px;right:28px;height:1px;background:currentColor;opacity:.45}
.brand-visual__network::before{top:22px;transform:rotate(25deg)}.brand-visual__network::after{bottom:22px;transform:rotate(-25deg)}
.brand-visual__network span{position:absolute;display:grid;place-items:center;width:42px;height:42px;border:3px solid currentColor;border-radius:12px;background:#fff;font-size:1.1rem;font-weight:950}
.brand-visual__network span:nth-child(1){left:0;top:22px}.brand-visual__network span:nth-child(2){left:61px;top:22px}.brand-visual__network span:nth-child(3){right:0;top:22px}
.brand-visual__sensor{position:relative;width:125px;height:95px;border:4px solid currentColor;border-radius:18px;transform:rotate(-8deg)}
.brand-visual__sensor::before{content:"";position:absolute;left:-32px;top:34px;width:39px;height:23px;border:4px solid currentColor;border-right:0;border-radius:18px 0 0 18px}.brand-visual__sensor::after{content:"";position:absolute;right:18px;top:24px;width:29px;height:29px;border-radius:50%;border:4px solid currentColor;box-shadow:0 0 0 8px color-mix(in srgb,var(--brand-color) 15%,transparent)}
.brand-visual__projector{position:relative;width:116px;height:60px;border:4px solid currentColor;border-radius:14px 14px 22px 22px;transform:rotate(-8deg)}
.brand-visual__projector::before{content:"";position:absolute;left:20px;top:-30px;width:62px;height:30px;border:4px solid currentColor;border-bottom:0;border-radius:50% 50% 0 0}.brand-visual__projector::after{content:"";position:absolute;left:15px;right:-35px;bottom:-63px;height:50px;background:linear-gradient(155deg,transparent 22%,color-mix(in srgb,var(--brand-color) 24%,transparent) 23% 77%,transparent 78%);clip-path:polygon(0 0,100% 23%,100% 77%,0 100%)}
.products-brand-card__name{font-size:1.55rem;color:var(--brand-color)}
.products-brand-card__tag{margin-top:6px;color:#77828c;font-size:.78rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.products-brand-card p{margin-top:15px;color:var(--products-muted);font-size:.94rem;line-height:1.65}
.products-brand-card__action{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:22px}
.products-brand-card__action .products-btn--dark{background:var(--brand-color);box-shadow:none}

/* Solicitud */
.products-help{position:relative;isolation:isolate;overflow:hidden;padding:104px 0;background:var(--products-ink);color:#fff}
.products-help::after{content:"";position:absolute;right:-120px;bottom:-310px;z-index:-1;width:620px;height:620px;border:78px solid rgba(255,208,0,.16);border-radius:50%}
.products-help__box{display:flex;align-items:center;justify-content:space-between;gap:45px;position:relative}
.products-help h2{max-width:760px;font-size:clamp(2.4rem,4.5vw,4.5rem)}
.products-help p{max-width:640px;margin-top:15px;color:#cbd9e0;line-height:1.7}
.products-help__actions{position:relative;z-index:1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:11px}

@media(max-width:980px){
  .products-hero__grid{grid-template-columns:1fr;gap:5px}.products-hero__copy{padding:70px 0 25px}.products-hero{min-height:0}
  .products-intro__grid,.products-other__header{grid-template-columns:1fr;gap:18px;align-items:start}.products-pilz__header{display:block}.products-pilz__header p{margin-top:16px}
  .products-family{grid-column:span 6}.products-family--wide{grid-column:span 6}.products-brand-grid{grid-template-columns:1fr 1fr}.products-brand-card:last-child{grid-column:span 2}
  .products-help__box{display:block}.products-help__actions{justify-content:flex-start;margin-top:28px}
}
@media(max-width:680px){
  .products-page main{padding-top:74px}.products-container{width:min(100% - 32px,560px)}
  .products-hero__copy{padding:56px 0 20px}.products-hero h1{font-size:clamp(2.25rem,13vw,3.5rem)}.products-hero__lead{font-size:1rem}.products-hero__actions .products-btn{width:100%}.products-hero__note{display:grid;gap:10px}
  .products-intro{padding:60px 0 28px}.products-pilz{padding:28px 0 66px}.products-pilz__header h2,.products-other__header h2{font-size:2.25rem}
  .products-family,.products-family--wide{grid-column:span 12;min-height:0}.products-family__media{height:185px}.products-family__body{min-height:205px}
  .products-other{padding:68px 0}.products-brand-grid{grid-template-columns:1fr}.products-brand-card,.products-brand-card:last-child{grid-column:span 1;min-height:385px}
  .products-help{padding:70px 0}.products-help__actions .products-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.products-btn,.products-family,.products-brand-card,.products-family__media img{transition:none}.products-brand-card__visual img{animation:none}.products-reveal{opacity:1!important;transform:none!important}}

/* Entrada suave del contenido, sin afectar accesibilidad ni carga. */
.products-reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.products-reveal.is-visible{opacity:1;transform:none}