/* =========================================================
   IDEMPE NH3 — Página: Capacitación con amoníaco
   Se carga después de styles.css y reutiliza sus tokens.
   ========================================================= */
.nav-blue{color:#1f2f86}
.btn-sm{padding:10px 18px;font-size:13px;gap:10px}
.btn-sm .ico{font-size:15px}
.btn-lg{padding:18px 30px;font-size:17px}
.hl-green{color:var(--green)}

/* ---------- HERO ---------- */
.amo-hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.amo-hero-media{position:absolute;inset:0 0 0 47%;background:url(../img/amo-hero.jpg) left center/cover no-repeat}
.amo-hero-media::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 0%,rgba(14,23,38,.6) 12%,rgba(14,23,38,.1) 40%,rgba(14,23,38,0) 70%)}
.amo-hero-inner{position:relative;z-index:2;padding-top:70px;padding-bottom:10px;min-height:540px}
.amo-hero h1{color:#fff;font-size:clamp(34px,3.5vw,50px);line-height:1.1;margin:30px 0 20px;max-width:760px}
.amo-hero .hero-lead{font-size:17px;max-width:620px}
.amo-tags{display:flex;flex-wrap:wrap;gap:0;font-size:14px;color:#aeb6c6;margin:20px 0 26px}
.amo-tags span+span::before{content:"•";margin:0 12px}
.amo-hero .hero-actions{margin-top:0}
.amo-features{position:relative;z-index:2;background:rgba(14,23,38,.9);border-top:1px solid rgba(255,255,255,.08);margin-top:40px}
.amo-features-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
.amo-features ul{display:flex}
.amo-features li{display:flex;gap:18px;align-items:center;padding:24px 30px;border-left:1px solid rgba(255,255,255,.14)}
.amo-features li:first-child{border-left:0;padding-left:0}
.amo-features .ico{font-size:40px;color:var(--yellow);stroke-width:1.6}
.amo-features b{display:block;font-family:var(--font-head);font-size:15px;font-weight:600}
.amo-features span{font-size:13.5px;color:#b9c1d1}
.amo-features .hero-words{margin:0;font-size:12px;padding:14px 0;display:block;white-space:nowrap;align-self:center}

/* ---------- Secciones ---------- */
.amo-sec{position:relative;padding:46px 0 30px;background:linear-gradient(180deg,#f6f8fb,#fff 40%)}
.amo-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;position:relative;z-index:1}
.amo-sec h2{font-size:clamp(30px,3.5vw,52px);font-weight:800;margin:14px 0 10px;letter-spacing:-.025em}
.amo-sec h2.xl{font-size:clamp(36px,4.4vw,62px)}
.amo-lead{font-size:18px;line-height:1.4;color:var(--text);max-width:1080px;margin:0}
.amo-lead.navy{color:#1f2f86}
.side-words{font-size:12px;letter-spacing:.2em;line-height:1.8;text-transform:uppercase;color:#98a3b8;margin:0;padding-bottom:10px;border-bottom:3px solid var(--yellow);align-self:start}

.amo-strip{position:relative;z-index:1;display:flex;align-items:center;gap:22px;background:#fff;border-radius:10px;box-shadow:0 10px 30px -18px rgba(16,28,61,.35);padding:14px 26px;margin-top:22px}
.amo-strip>.ico{font-size:34px;color:var(--yellow);stroke-width:1.5;padding-right:22px;border-right:1px solid #d8deea;box-sizing:content-box}
.amo-strip p{margin:0;font-size:14px;color:var(--navy);flex:1}
.amo-strip p b{font-weight:600}
.strip-note{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#98a3b8;line-height:1.6;padding-left:22px;border-left:1px solid #d8deea}
.strip-inline{border-left:0;letter-spacing:.2em}

/* ---------- Necesidades ---------- */
.need-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.need-card{position:relative;display:grid;grid-template-columns:1fr 1.05fr;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 14px 34px -22px rgba(16,28,61,.4);min-height:240px}
.need-copy{padding:22px 0 22px 24px;position:relative;z-index:1}
.need-copy>.ico{font-size:40px;color:var(--yellow);stroke-width:1.5}
.need-card h3{font-size:25px;font-weight:700;margin:10px 0 8px;letter-spacing:-.02em}
.need-card p{font-size:15.5px;line-height:1.4;margin-bottom:16px;max-width:280px}
.need-card img{width:100%;height:100%;object-fit:cover;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}

/* ---------- Programas ---------- */
.prog-row4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.prog-row3{display:grid;grid-template-columns:1fr 1fr 1.48fr;gap:16px;margin-top:16px}
.prog{background:#fff;border-radius:8px;box-shadow:0 10px 28px -20px rgba(16,28,61,.45);overflow:hidden;display:flex;flex-direction:column}
.prog>img{width:100%;height:126px;object-fit:cover}
.prog-row3 .prog>img{height:100px}
.prog-body{padding:14px 18px 18px;display:flex;flex-direction:column;flex:1}
.prog-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.lvl{font-size:12px;font-weight:600;padding:4px 12px;border-radius:5px;color:var(--navy)}
.lvl-basic{background:#dff5d0}
.lvl-mid{background:#dbe4ff}
.lvl-resp{background:#ffdcdc;color:#b42323}
.lvl-adv{background:#e6e0ff}
.lvl-cert{background:var(--yellow)}
.dur{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.dur .ico{font-size:18px;color:var(--yellow)}
.prog h3{font-size:17px;font-weight:700;line-height:1.2;margin-bottom:6px}
.prog p{font-size:13.5px;line-height:1.45;color:var(--muted);margin-bottom:14px;flex:1}
.prog .btn{align-self:flex-start}
.prog-tea{border:1.5px solid var(--yellow);background:#fffaf0;padding:10px}
.prog-tea-media{position:relative}
.prog-tea-media>img:first-child{width:calc(100% - 120px);height:100px;object-fit:cover;border-radius:4px}
.tea-seal{position:absolute;right:0;top:-6px;width:118px;height:auto}
.prog-tea .prog-body{padding:12px 8px 6px}
.tea-row{display:grid;grid-template-columns:1fr 118px;gap:18px;flex:1}
.tea-row>div{display:flex;flex-direction:column}
.tea-note{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-left:3px solid var(--yellow);padding-left:10px;line-height:1.5;margin:0;align-self:start}

/* ---------- Ruta ---------- */
.amo-ruta{overflow:hidden}
.amo-ruta-bg{position:absolute;right:8%;top:0;width:38%;height:300px;background:url(../img/amo-ruta-bg.jpg) center/cover no-repeat;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 80%,transparent),linear-gradient(transparent,#000)}
.amo-ruta .amo-head .side-words{background:rgba(255,255,255,.6)}
.ruta{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(6,1fr);gap:22px;position:relative;z-index:1}
.step{position:relative;background:#fff;border-radius:8px;box-shadow:0 12px 30px -22px rgba(16,28,61,.45);padding:0 0 18px}
.step img{width:100%;height:134px;object-fit:cover;border-radius:8px 8px 0 0}
.step .num{position:absolute;left:10px;top:-14px;width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--yellow);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--navy);z-index:1}
.step:not(:last-child)::after{content:"";position:absolute;right:-16px;top:124px;width:10px;height:10px;border-top:3px solid var(--yellow);border-right:3px solid var(--yellow);transform:rotate(45deg)}
.step-body{padding:14px 16px 0}
.step-body .ico{font-size:44px;color:var(--yellow);stroke-width:1.5}
.step h3{font-size:18px;font-weight:700;margin:8px 0 6px;line-height:1.2}
.step p{font-size:14.5px;color:var(--muted);line-height:1.45;margin:0}
.step-final{background:#fff7e3;border:1.5px solid var(--yellow)}
.step-final .num{background:var(--yellow);color:#fff}
.step-final h3{font-size:18px}
.ruta-strip{padding:18px 26px;margin-top:30px}
.ruta-strip p{font-size:15px}
.checks{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--navy);padding:0 22px;border-left:1px solid #d8deea}
.checks li{display:flex;gap:10px;align-items:center}
.checks .ico{color:var(--yellow);stroke-width:2.6;font-size:15px}

/* ---------- Adaptada ---------- */
.amo-adapt{background:linear-gradient(180deg,#f3f6fa,#fff 60%)}
.adapt-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-top:26px;align-items:stretch}
.adapt-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.adapt-card{background:#fff;border-radius:8px;box-shadow:0 12px 30px -24px rgba(16,28,61,.5);padding:24px 26px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-content:start}
.adapt-card .ico{font-size:52px;color:var(--yellow);stroke-width:1.4;grid-row:span 1}
.adapt-card h3{font-size:23px;font-weight:700;line-height:1.15;align-self:center}
.adapt-card p{grid-column:1/-1;font-size:16px;color:var(--muted);line-height:1.5;margin:14px 0 0}
.adapt-img{width:100%;height:100%;min-height:300px;object-fit:cover;border-radius:14px 0 0 14px;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%)}
.amo-adapt .amo-strip .btn-yellow{margin-left:auto}
.strip-tags{font-size:13px}

/* ---------- Secciones verdes (respaldo, experiencia, cierre) ---------- */
.amo-green{background:linear-gradient(180deg,#f3f7f9,#fff 45%)}
.amo-tank{position:absolute;right:0;top:0;width:24%;height:240px;background:url(../img/amo-tanque.jpg) center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.head-logo{position:absolute;left:52%;top:-30px;width:170px;height:auto;mix-blend-mode:multiply}
.resp-grid{display:grid;grid-template-columns:1fr 1.06fr 1fr;gap:18px;margin-top:26px;position:relative;z-index:1}
.resp-card{background:#fff;border-radius:10px;box-shadow:0 14px 34px -24px rgba(16,28,61,.45);padding:24px 26px}
.resp-card h3.bar{font-size:20px;font-weight:700;color:#14206b;padding-top:14px;position:relative;margin-bottom:16px}
.resp-card h3.bar::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--green)}
.icon-list li{display:flex;align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid #e6ebf2;font-size:16px;color:#1f2f86;line-height:1.35}
.icon-list li:last-child{border-bottom:0}
.icon-list li>span{flex:none;width:52px;height:52px;border-radius:50%;background:#e3f7ea;display:grid;place-items:center}
.icon-list .ico{font-size:26px;color:#14206b;stroke-width:1.6}
.icon-list.two-line b{display:block;font-weight:600;font-size:15.5px;color:#14206b}
.icon-list.two-line div{font-size:13px;color:var(--muted)}
.resp-stps{border:2.5px solid var(--green);text-align:center;padding-top:14px}
.stps-tag{display:inline-block;background:var(--green);color:#fff;font-family:var(--font-head);font-weight:600;font-size:17px;padding:6px 22px;border-radius:5px;margin:0 0 10px}
.resp-stps img{max-width:330px;width:100%;margin:0 auto 6px;mix-blend-mode:multiply}
.resp-stps .icon-list{text-align:left}
.tea-word{font-family:var(--font-head);font-weight:800;font-size:64px;line-height:1;color:#14206b;text-align:center;margin:0 0 8px;letter-spacing:.02em}
.tea-word small{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.green-strip{background:linear-gradient(90deg,#f1fbf4,#eef6f8);box-shadow:0 10px 30px -22px rgba(16,28,61,.35)}
.green-strip>.ico{color:var(--green);font-size:40px}
.green-strip p{color:#14206b;font-size:15px;max-width:460px}
.green-strip .btn-green{padding:15px 60px}

.exp-grid{display:grid;grid-template-columns:2.85fr 1fr;gap:14px;margin-top:22px;position:relative;z-index:1}
.exp-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.exp-gallery figure{margin:0;position:relative;border-radius:8px;overflow:hidden}
.exp-gallery img{width:100%;height:190px;object-fit:cover}
.exp-main{grid-column:1/-1}
.exp-main img{height:200px}
.exp-gallery figcaption{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:40px;padding:4px 18px 4px 4px;font-family:var(--font-head);font-weight:600;font-size:13px;color:#14206b}
.exp-gallery figcaption .ico{width:36px;height:36px;padding:7px;border-radius:50%;background:#e3f7ea;color:#14206b}
.exp-side{padding:22px 22px}

.amo-close{padding-top:70px;overflow:hidden}
.amo-close-bg{position:absolute;right:0;top:0;width:50%;height:500px;background:url(../img/amo-cierre.jpg) center 30%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.close-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.7fr 1fr;gap:28px;align-items:end}
.amo-close h2{color:#14206b;max-width:720px}
.amo-close .amo-lead{max-width:680px;font-size:18px}
.close-actions{display:flex;gap:18px;flex-wrap:wrap;margin:26px 0 30px}
.close-actions .btn-green{min-width:300px}
.close-actions .btn-outline-navy{min-width:300px;border-color:#1f2f86;color:#14206b}
.close-icons{display:flex;flex-wrap:nowrap}
.close-icons li{display:flex;align-items:center;gap:12px;padding:0 16px;border-left:1px solid #d8deea;font-size:14px;color:#1f2f86;line-height:1.3}
.close-icons li:first-child{padding-left:0;border-left:0}
.close-icons li>span{flex:none;width:54px;height:54px;border-radius:50%;background:#e3f7ea;display:grid;place-items:center}
.close-icons .ico{font-size:32px;color:#14206b;stroke-width:1.5}
.close-card{padding:22px 26px}
.close-strip .ico{font-size:50px}
.close-strip p.big{font-size:21px;max-width:none;line-height:1.3;color:#1f2f86}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .ruta{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .step:nth-child(3)::after{display:none}
  .prog-row4{grid-template-columns:1fr 1fr}
  .prog-row3{grid-template-columns:1fr 1fr}
  .prog-tea{grid-column:1/-1}
  .resp-grid{grid-template-columns:1fr 1fr}
  .resp-stps{grid-column:1/-1;order:-1}
  .exp-grid{grid-template-columns:1fr}
  .close-grid{grid-template-columns:minmax(0,1fr)}
  .close-icons{flex-wrap:wrap;row-gap:14px}
  .ruta-strip{flex-wrap:wrap}
}
@media (max-width:900px){
  .amo-hero-media{inset:0}
  .amo-hero-media::before{background:linear-gradient(90deg,rgba(14,23,38,.95),rgba(14,23,38,.7))}
  .amo-features-inner{display:block}
  .amo-features ul{flex-direction:column}
  .amo-features li{border-left:0;padding:14px 0;border-top:1px solid rgba(255,255,255,.1)}
  .amo-features .hero-words{display:none}
  .amo-head{grid-template-columns:1fr}
  .side-words{display:none}
  .head-logo{display:none}
  .need-grid{grid-template-columns:1fr}
  .adapt-grid{grid-template-columns:1fr}
  .adapt-img{border-radius:14px;clip-path:none;max-height:380px}
  .amo-strip{flex-wrap:wrap}
  .strip-note{display:none}
  .amo-adapt .amo-strip .btn-yellow{margin-left:0}
  .amo-ruta-bg,.amo-tank{opacity:.35}
}
@media (max-width:640px){
  .need-card{grid-template-columns:1fr}
  .need-card img{clip-path:none;height:180px;order:-1}
  .need-copy{padding:20px}
  .prog-row4,.prog-row3{grid-template-columns:1fr}
  .tea-row{grid-template-columns:1fr}
  .prog-tea-media>img:first-child{width:100%}
  .tea-seal{width:90px;top:auto;bottom:-20px;right:6px}
  .ruta{grid-template-columns:1fr 1fr;gap:26px 14px}
  .step::after{display:none}
  .adapt-cards{grid-template-columns:1fr}
  .resp-grid{grid-template-columns:1fr}
  .exp-gallery{grid-template-columns:1fr}
  .close-actions .btn{min-width:0;width:100%}
  .close-icons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .close-icons li{min-width:0;font-size:13px}
  .close-icons li{border-left:0;padding:0}
  .amo-strip>.ico{border-right:0;padding-right:0}
  .checks{border-left:0;padding:0}
  .green-strip .btn-green{padding:15px 24px;width:100%}
}
#programas-amoniaco h2{font-size:clamp(28px,3.1vw,46px)}
.amo-ruta .amo-lead,.amo-adapt .amo-lead{max-width:640px}
.amo-ruta h2.xl,.amo-adapt h2.xl{max-width:780px}

@media (max-width:380px){
  .amo-sec h2,.amo-sec h2.xl,.amo-hero h1{font-size:28px;overflow-wrap:break-word}
  .close-actions .btn{padding:15px 16px}
  .ruta{grid-template-columns:1fr}
}