/* Catalogo de plantillas HSEQ - hoja compartida. Se enlaza desde las 98
   fichas en vez de repetir el bloque <style> en cada una: una sola descarga
   cacheada y un solo sitio donde cambiar el diseno. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--ip-blue:#0052CC;--ip-blue-dark:#003A8C;--ip-blue-light:#4C9AFF;--ip-navy:#0A1628;
--ip-green:#36B37E;--ip-orange:#FF8B00;--ip-red:#DE350B;--ip-purple:#6554C0;
--ip-gray-50:#F7F8FA;--ip-gray-100:#EBECF0;--ip-gray-200:#DFE1E6;--ip-gray-500:#6B778C;
--ip-gray-700:#42526E;--ip-gray-900:#172B4D;--ip-radius:12px;--ip-radius-lg:20px;
--font-display:'Space Grotesk',sans-serif;--font-body:'Inter',sans-serif;
--ip-shadow-md:0 4px 16px rgba(9,30,66,.1);--ip-shadow-lg:0 12px 40px rgba(9,30,66,.12)}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);color:var(--ip-gray-900);background:#fff;line-height:1.66;overflow-x:hidden}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:880px;margin:0 auto;padding:0 24px}

.borrador{background:#FFF8E1;border-bottom:1px solid #FFE0B2;color:#7a5600;font-size:13.5px;padding:10px 0}
.borrador .wrap{display:flex;gap:10px;align-items:flex-start}
.borrador b{color:#5d4200}

.hero{background:linear-gradient(135deg,var(--ip-navy) 0%,#13294b 60%,var(--ip-blue-dark) 100%);color:#fff;padding:64px 0 56px}
.crumb{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:16px}
.crumb a:hover{color:#fff;text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.chip{border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.hero h1{font-family:var(--font-display);font-size:clamp(28px,4.2vw,44px);line-height:1.14;font-weight:700;max-width:22ch;margin-bottom:16px}
.hero p{font-size:clamp(15.5px,1.9vw,18px);color:rgba(255,255,255,.84);max-width:62ch}

.section{padding:60px 0}
.eyebrow{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ip-blue);margin-bottom:11px}
h2.t{font-family:var(--font-display);font-size:clamp(23px,3vw,33px);font-weight:700;line-height:1.2;margin-bottom:14px}
h3.t{font-family:var(--font-display);font-size:19px;font-weight:600;margin:26px 0 10px}
.sub{color:var(--ip-gray-700);font-size:17px;max-width:70ch}

.caja{border:1px solid var(--ip-gray-200);border-radius:var(--ip-radius-lg);padding:28px;background:#fff;box-shadow:var(--ip-shadow-md)}
.datos{list-style:none;margin:0}
.datos li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--ip-gray-100);font-size:15px}
.datos li:last-child{border-bottom:none}
.datos span{color:var(--ip-gray-500)}
.datos b{font-weight:600;text-align:right}

.entregables{list-style:none;margin:0}
.entregables li{display:flex;gap:11px;padding:9px 0;color:var(--ip-gray-700);font-size:16px}
.entregables .material-symbols-outlined{color:var(--ip-green);font-size:21px;flex-shrink:0;margin-top:2px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;margin-top:34px}
.card{border:1px solid var(--ip-gray-200);border-radius:var(--ip-radius);padding:22px;background:#fff;transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--ip-shadow-lg);border-color:transparent}
.card .niv{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:9px}
.card h3{font-family:var(--font-display);font-size:17px;font-weight:600;margin-bottom:7px;line-height:1.3}
.card p{color:var(--ip-gray-700);font-size:14.5px;flex:1}
.card .norma{font-size:12px;color:var(--ip-blue);font-weight:600;margin-bottom:8px;line-height:1.35}
.card .pie{margin-top:14px;padding-top:12px;border-top:1px solid var(--ip-gray-100);font-size:12.5px;color:var(--ip-gray-500);display:flex;justify-content:space-between;gap:10px}

/* ── Filtros ─────────────────────────────────────────────────────────────
   Se queda pegada arriba: con 98 tarjetas, un filtro al que hay que volver
   subiendo no se usa. El 72px del top deja sitio a la barra de navegacion. */
.filtros{position:sticky;top:72px;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--ip-gray-200);padding:14px 0 13px}
.f-fila{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.f-busca{flex:1;min-width:230px;display:flex;align-items:center;gap:9px;border:1px solid var(--ip-gray-200);border-radius:10px;padding:0 13px;background:#fff;transition:.2s}
.f-busca:focus-within{border-color:var(--ip-blue);box-shadow:0 0 0 3px rgba(0,82,204,.1)}
.f-busca .material-symbols-outlined{color:var(--ip-gray-500);font-size:20px}
.f-busca input{flex:1;border:none;outline:none;padding:11px 0;font-family:var(--font-body);font-size:15px;color:var(--ip-gray-900);background:transparent}
.f-cuenta{font-size:14px;color:var(--ip-gray-500);white-space:nowrap}
.f-cuenta b{font-family:var(--font-display);font-size:19px;color:var(--ip-gray-900)}
.f-grupos{margin-top:11px;align-items:flex-start;gap:20px}
.f-g{display:flex;flex-direction:column;gap:6px}
.f-et{font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--ip-gray-500)}
.f-chips{display:flex;flex-wrap:wrap;gap:6px}
.f-chips button{border:1px solid var(--ip-gray-200);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-family:var(--font-body);color:var(--ip-gray-700);cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:6px}
.f-chips button:hover{border-color:var(--ip-blue);color:var(--ip-blue)}
.f-chips button.on{background:var(--ip-blue);border-color:var(--ip-blue);color:#fff;font-weight:600}
.f-chips button i{font-style:normal;font-size:11px;opacity:.65;font-weight:600}
.f-chips button.on i{opacity:.85}
.f-chips .f-limpiar{border-style:dashed;color:var(--ip-gray-500)}
.f-chips .f-limpiar:hover{border-color:var(--ip-red);color:var(--ip-red);border-style:solid}

.f-vacio{display:none;text-align:center;padding:64px 24px}
.f-vacio .material-symbols-outlined{font-size:46px;color:var(--ip-gray-200)}
.f-vacio p{color:var(--ip-gray-500);font-size:16px;margin:12px 0 18px}
.btn-lim{border:1px solid var(--ip-gray-200);background:#fff;border-radius:9px;padding:10px 20px;font-size:14.5px;font-family:var(--font-body);cursor:pointer;color:var(--ip-gray-700)}
.btn-lim:hover{border-color:var(--ip-blue);color:var(--ip-blue)}
@media(max-width:700px){.filtros{top:64px;padding:11px 0}.f-grupos{gap:12px}.f-et{display:none}}

.bloque{margin-bottom:54px}
.bloque-cab{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}
.bloque-ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bloque-ico .material-symbols-outlined{font-size:26px}
.bloque h2{font-family:var(--font-display);font-size:25px;font-weight:700;margin-bottom:4px}
.bloque .n{color:var(--ip-gray-500);font-size:14px}
.bloque .d{color:var(--ip-gray-700);font-size:16px;margin:10px 0 0;max-width:72ch}

.cta{background:linear-gradient(135deg,var(--ip-navy),var(--ip-blue-dark));color:#fff;border-radius:var(--ip-radius-lg);padding:44px 38px;text-align:center;margin:56px 0}
.cta h2{font-family:var(--font-display);font-size:clamp(21px,2.7vw,29px);margin-bottom:12px}
.cta p{color:rgba(255,255,255,.85);max-width:56ch;margin:0 auto 24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:10px;font-weight:600;font-size:16px;background:#25D366;color:#0a2e17;transition:.3s}
.btn:hover{background:#1ebe5a;transform:translateY(-2px)}
.btn-g{background:transparent;border:1px solid rgba(255,255,255,.38);color:#fff;margin-left:10px}
.btn-g:hover{background:rgba(255,255,255,.1)}

.dos{display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:start}

/* ── Copy de venta: gancho, problema, puente y cierre ───────────────────
   Lo que convierte la ficha de hoja tecnica en conversacion. El gancho va en
   el hero porque es lo primero que lee quien llego desde un buscador. */
.hero .gancho{font-size:clamp(17px,2.2vw,20px);color:rgba(255,255,255,.93);max-width:62ch;line-height:1.56;margin-bottom:20px}
.hero-norma{display:inline-flex;align-items:flex-start;gap:9px;font-size:13.5px;color:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.16);padding-top:16px;max-width:60ch}
.hero-norma .material-symbols-outlined{font-size:17px;flex-shrink:0;margin-top:1px}
/* El H1 es la busqueda; el nombre comercial queda debajo como rotulo. Antes el H1 era el nombre y la busqueda no aparecia en ninguna parte. */
.hero .nombre-comercial{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--ip-blue-light);margin:-10px 0 18px}

.parrafo{color:var(--ip-gray-700);font-size:17px;line-height:1.68;margin-bottom:16px;max-width:68ch}

.dolor{list-style:none;margin:22px 0 0;max-width:66ch}
.dolor li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--ip-gray-100);color:var(--ip-gray-700);font-size:16px}
.dolor li:last-child{border-bottom:none}
.dolor .material-symbols-outlined{color:var(--ip-red);font-size:19px;flex-shrink:0;margin-top:3px}

.cta-lateral{margin-top:20px;border:1px solid var(--ip-gray-200);border-radius:var(--ip-radius-lg);padding:24px;background:#fff}
.cta-lateral .cta-et{font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ip-orange);margin-bottom:9px}
.cta-lateral p{color:var(--ip-gray-700);font-size:14.5px;margin-bottom:16px}
.cta-lateral .btn{width:100%;justify-content:center}

.puente{display:flex;gap:22px;align-items:flex-start;border:1px solid var(--ip-gray-200);border-left:4px solid var(--ip-blue);border-radius:0 var(--ip-radius-lg) var(--ip-radius-lg) 0;padding:30px 32px;background:var(--ip-gray-50)}
.puente-ico{width:48px;height:48px;border-radius:14px;background:#E3F2FD;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.puente-ico .material-symbols-outlined{color:var(--ip-blue);font-size:25px}
.enlace-puente{color:var(--ip-blue);font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:6px}
.enlace-puente:hover{text-decoration:underline}

.cierre{text-align:center;border:1px solid var(--ip-gray-200);border-radius:var(--ip-radius-lg);padding:40px 34px;background:#fff}
.cierre-ico{width:52px;height:52px;border-radius:50%;background:#E8F5E9;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.cierre-ico .material-symbols-outlined{color:var(--ip-green);font-size:26px}
.cierre .parrafo{margin-left:auto;margin-right:auto;font-size:16px}
.cierre .btn{display:inline-flex}
.btn-wa{background:#25D366;color:#0a2e17;display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:10px;font-weight:600;font-size:15.5px;transition:.3s}
.btn-wa:hover{background:#1ebe5a;transform:translateY(-2px)}

@media(max-width:700px){.puente{flex-direction:column;gap:16px;padding:24px}}
@media(max-width:880px){.dos{grid-template-columns:1fr;gap:30px}.section{padding:44px 0}.cta{padding:32px 22px}.btn-g{margin-left:0;margin-top:10px}}