*{box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
--azul:#0755a4;--azul-osc:#063667;--azul-prof:#052b52;--verde:#168a45;
--celeste:#20a9d8;--naranja:#f17821;--amarillo:#f4b942;--texto:#26384b;
--gris:#68788b;--fondo:#f4f8fc;--borde:#dbe5ef;--blanco:#fff;
--sombra:0 10px 30px rgba(23,57,91,.09)
}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--texto);background:#fff;line-height:1.55}
a{color:inherit}.contenedor{width:min(1180px,calc(100% - 40px));margin:auto}
.header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.98);border-bottom:1px solid #e2eaf2;box-shadow:0 2px 13px rgba(18,57,97,.06)}
.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{width:225px;max-width:44vw;height:auto;display:block}
.menu{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:bold}
.menu a{text-decoration:none;color:#35506d}.menu a:hover{color:var(--azul)}.menu .acceso{color:#fff;background:var(--azul);padding:10px 14px;border-radius:8px}
.hero{position:relative;color:#fff;min-height:560px;display:flex;align-items:center;overflow:hidden;background:#063667}
.hero:before{content:"";position:absolute;inset:0;background:url("img/hero_saneamiento.jpg") center 44%/cover no-repeat}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,36,70,.95) 0%,rgba(5,55,104,.80) 47%,rgba(5,55,104,.26) 77%,rgba(4,36,70,.10) 100%)}
.hero-inner{position:relative;z-index:2;padding:72px 0;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.hero-kicker{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);font-size:12px;font-weight:bold;letter-spacing:.7px;text-transform:uppercase}
.hero h1{font-size:48px;line-height:1.07;margin:17px 0 18px;max-width:730px}.hero p{margin:0;max-width:670px;font-size:18px;color:#e4eff9}
.hero-botones{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 17px;border-radius:8px;text-decoration:none;font-weight:bold;font-size:13px;border:1px solid transparent;cursor:pointer}
.btn-blanco{background:#fff;color:var(--azul-osc)}.btn-azul{background:var(--azul);color:#fff}.btn-naranja{background:var(--naranja);color:#fff}.btn-transparente{border-color:rgba(255,255,255,.58);color:#fff;background:rgba(255,255,255,.07)}
.hero-panel{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);border-radius:18px;padding:24px;box-shadow:0 15px 40px rgba(0,0,0,.16)}
.hero-panel h3{font-size:20px;margin:0 0 7px}.hero-panel p{font-size:13px;margin:0 0 15px;color:#e4eff9}
.validar-form{display:flex;gap:8px}.validar-form input{min-width:0;flex:1;border:0;border-radius:8px;padding:12px 13px;font-size:14px}.validar-form button{border:0;background:var(--naranja);color:#fff;border-radius:8px;padding:0 16px;font-weight:bold;cursor:pointer}
.ayuda-codigo{font-size:11px!important;margin:10px 0 0!important;color:#dbeafb!important}
.seccion{padding:66px 0}.seccion-suave{background:var(--fondo)}
.encabezado-seccion{text-align:center;max-width:770px;margin:0 auto 34px}.etiqueta-seccion{color:var(--azul);font-weight:bold;text-transform:uppercase;letter-spacing:.8px;font-size:12px}
.encabezado-seccion h2{color:var(--azul-osc);font-size:33px;line-height:1.18;margin:7px 0 11px}.encabezado-seccion p{margin:0;color:var(--gris)}
.servicios-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.servicio-foto{background:#fff;border:1px solid var(--borde);border-radius:15px;overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column}
.servicio-foto img{width:100%;height:205px;object-fit:cover;display:block}.servicio-foto-body{padding:18px;flex:1}.servicio-foto h3{margin:0 0 7px;color:#124a83;font-size:18px}.servicio-foto p{margin:0;color:var(--gris);font-size:13px}
.servicio-foto:nth-child(5){border-top:5px solid #f4b942}.servicio-foto:nth-child(6){border-top:5px solid #d94b45}
.info-resumen{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.info-card{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:20px;box-shadow:0 6px 20px rgba(31,72,112,.045)}
.info-card .ico{font-size:29px}.info-card h3{font-size:17px;color:#174a7d;margin:7px 0}.info-card p{font-size:12px;color:var(--gris);margin:0 0 12px}.info-card a{text-decoration:none;color:var(--azul);font-size:12px;font-weight:bold}
.info-cta{text-align:center;margin-top:24px}
.cinta{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}.cinta-foto img{width:100%;height:340px;object-fit:cover;border-radius:16px;box-shadow:var(--sombra)}
.cinta h2{font-size:31px;color:var(--azul-osc);margin:8px 0 12px}.cinta p{color:var(--gris)}
.certificados{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}.certificados h2{font-size:32px;color:var(--azul-osc);margin:7px 0 12px}.certificados p{color:var(--gris)}
.cert-card{background:linear-gradient(145deg,#073f7c,#0755a4);color:#fff;padding:28px;border-radius:17px;box-shadow:0 14px 35px rgba(7,63,124,.22)}.cert-card p{color:#dceafa}
.contacto{background:linear-gradient(135deg,#062f5c,#074c91);color:#fff}.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.contacto h2{font-size:33px;margin:7px 0 13px}.contacto p{color:#dceafb}.contact-items{display:grid;gap:11px}.contact-item{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:13px}.contact-item b{display:block;font-size:12px;color:#cfe3f6}.contact-item a{text-decoration:none;color:#fff}
footer{background:#052542;color:#afc5d9;padding:26px 0;font-size:12px}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-links{display:flex;gap:17px}.footer-links a{text-decoration:none;color:#cbdbea}

/* Página información */
.page-hero{background:linear-gradient(135deg,#052b52,#0755a4);color:#fff;padding:55px 0}.page-hero h1{font-size:38px;margin:8px 0 10px}.page-hero p{max-width:760px;color:#dceafb;margin:0}
.mareas-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;align-items:start}
.mareas-info{background:#fff;border:1px solid var(--borde);border-radius:15px;padding:23px;box-shadow:var(--sombra)}.mareas-info h2{color:#124a83;margin:5px 0 8px}.mareas-info p{font-size:13px;color:var(--gris)}.mareas-info ul{padding-left:19px;color:#52677c;font-size:13px}
.mareas-view{background:#fff;border:1px solid var(--borde);border-radius:15px;overflow:hidden;box-shadow:var(--sombra)}
.mareas-view-head{background:#073f7c;color:#fff;padding:14px 17px;font-weight:bold}.mareas-view iframe{display:block;width:100%;height:680px;border:0;background:#eef4f9}
.mareas-nota{padding:11px 14px;font-size:11px;color:#718092;background:#f8fafc;border-top:1px solid #e3ebf2}
.recursos{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.recurso{border:1px solid var(--borde);background:#fff;border-radius:14px;padding:20px;display:flex;flex-direction:column;min-height:235px}.recurso .ico{font-size:29px}.recurso h3{margin:8px 0 7px;color:#143f6d;font-size:17px}.recurso p{font-size:12px;color:var(--gris);margin:0 0 11px}.recurso .dato{background:#f6f9fc;border:1px solid #e2eaf2;border-radius:9px;padding:10px 11px;font-size:11px;color:#456078;margin-bottom:12px}.recurso .fuente{font-size:10px;text-transform:uppercase;font-weight:bold;color:#8794a1;margin-top:auto}.recurso a{margin-top:7px;text-decoration:none;color:var(--azul);font-size:12px;font-weight:bold}

@media(max-width:980px){.menu a:not(.acceso){display:none}.hero-inner{grid-template-columns:1fr}.servicios-foto{grid-template-columns:1fr 1fr}.info-resumen{grid-template-columns:1fr 1fr}.cinta,.mareas-grid{grid-template-columns:1fr}.recursos{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.contenedor{width:min(100% - 28px,1180px)}.header-inner{min-height:68px}.logo img{width:190px}.menu .acceso{padding:9px 10px;font-size:11px}.hero{min-height:auto}.hero-inner{padding:52px 0}.hero h1{font-size:35px}.hero p{font-size:16px}.validar-form{display:block}.validar-form button{width:100%;height:42px;margin-top:8px}.servicios-foto,.info-resumen,.recursos,.certificados,.contacto-grid{grid-template-columns:1fr}.seccion{padding:52px 0}.encabezado-seccion h2,.certificados h2,.contacto h2{font-size:28px}.mareas-view iframe{height:520px}.footer-inner{display:block;text-align:center}.footer-links{justify-content:center;margin-top:12px;flex-wrap:wrap}}


.sst-portada{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:stretch}
.sst-resumen{background:linear-gradient(135deg,#063667,#0755a4);color:#fff;border-radius:17px;padding:28px;box-shadow:var(--sombra)}
.sst-resumen h2{font-size:30px;margin:7px 0 12px}.sst-resumen p{color:#dceafb;font-size:14px}
.sst-fecha{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:8px 10px;border-radius:9px;font-size:12px;margin-top:10px}
.sst-claves{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.sst-clave{background:#fff;border:1px solid var(--borde);border-radius:13px;padding:18px}
.sst-clave .ico{font-size:26px}.sst-clave h3{font-size:16px;color:#174a7d;margin:6px 0}.sst-clave p{font-size:12px;color:var(--gris);margin:0}
.dataset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}
.dataset{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:21px;box-shadow:0 6px 18px rgba(31,72,112,.045)}
.dataset h3{font-size:18px;color:#143f6d;margin:6px 0 8px}.dataset p{font-size:12px;color:var(--gris);margin:0 0 10px}
.dataset ul{padding-left:18px;color:#52677c;font-size:12px}.dataset a{text-decoration:none;color:var(--azul);font-size:12px;font-weight:bold}
.sst-nota{background:#fff8e8;border:1px solid #f0d99f;border-radius:12px;padding:15px 16px;font-size:12px;color:#685530;margin-top:20px}
@media(max-width:980px){.sst-portada{grid-template-columns:1fr}.dataset-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.sst-claves,.dataset-grid{grid-template-columns:1fr}}


/* Cursos SST */
.cursos-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px;
}
.curso-card{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:14px;
    padding:21px;
    box-shadow:0 6px 18px rgba(31,72,112,.05);
    position:relative;
    overflow:hidden;
}
.curso-card:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:var(--azul);
}
.curso-card:nth-child(2):before{background:var(--naranja)}
.curso-card:nth-child(3):before{background:var(--verde)}
.curso-card:nth-child(4):before{background:#e3ad24}
.curso-card:nth-child(5):before{background:#5b67b4}
.curso-card:nth-child(6):before{background:#d34b41}
.curso-icono{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#edf5fc;
    font-size:28px;
    margin-bottom:14px;
}
.curso-card h3{
    color:#143f6d;
    font-size:18px;
    line-height:1.3;
    margin:0 0 8px;
}
.curso-card p{
    color:var(--gris);
    font-size:12.5px;
    margin:0;
}
.cursos-cta{
    margin-top:24px;
    border-radius:15px;
    padding:20px 22px;
    background:linear-gradient(135deg,#063667,#0755a4);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}
.cursos-cta strong{
    display:block;
    font-size:17px;
    margin-bottom:4px;
}
.cursos-cta span{
    display:block;
    color:#dceafb;
    font-size:12.5px;
}
@media(max-width:980px){
    .cursos-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
    .cursos-grid{grid-template-columns:1fr}
    .cursos-cta{display:block}
    .cursos-cta .btn{margin-top:14px;width:100%}
}


/* SST v2.8 - fuentes oficiales */
.dataset-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.dataset{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:15px;
    padding:22px;
    box-shadow:0 6px 18px rgba(31,72,112,.045);
    position:relative;
    overflow:hidden;
}
.dataset:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:var(--azul);
}
.dataset-mortal:before{background:#a94b4b}
.dataset-incidente:before{background:var(--naranja)}
.dataset-enfermedad:before{background:#6d62b5}
.dataset-icono{font-size:30px;margin-bottom:8px}
.dataset h3{font-size:18px;color:#143f6d;margin:4px 0 8px}
.dataset p{font-size:12.5px;color:var(--gris);margin:0 0 13px}
.dataset-resumen{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    background:#f5f8fb;
    border:1px solid #e1e9f1;
    border-radius:9px;
    padding:10px 11px;
    margin-bottom:13px;
    font-size:11.5px;
}
.dataset-resumen strong{color:#37536e}
.dataset-resumen span{color:#173f68;font-weight:bold;text-align:right}
.dataset-link{
    display:inline-block;
    text-decoration:none;
    color:var(--azul);
    font-size:12px;
    font-weight:bold;
}
.sst-publicacion{
    margin-top:24px;
    background:#fff;
    border:1px solid var(--borde);
    border-radius:15px;
    padding:20px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}
.sst-publicacion h3{
    color:#143f6d;
    font-size:21px;
    margin:5px 0 6px;
}
.sst-publicacion p{
    max-width:760px;
    color:var(--gris);
    font-size:12.5px;
    margin:0;
}
@media(max-width:720px){
    .dataset-grid{grid-template-columns:1fr}
    .sst-publicacion{display:block}
    .sst-publicacion .btn{width:100%;margin-top:14px}
}


/* Observatorio SST TAPAQOK v2.9 */
.observatorio-cabecera{
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:center;
    background:linear-gradient(135deg,#063667,#0755a4);
    color:#fff;
    border-radius:16px;
    padding:23px 25px;
    margin-bottom:18px;
}
.observatorio-badge{
    display:inline-block;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    padding:6px 10px;
    font-size:10px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.observatorio-cabecera h3{
    font-size:27px;
    margin:9px 0 5px;
}
.observatorio-cabecera p{
    color:#e5f0fa;
    margin:0;
    max-width:700px;
    font-size:13px;
}
.observatorio-fuente{
    min-width:245px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.16);
    padding:13px 14px;
    border-radius:11px;
}
.observatorio-fuente strong,.observatorio-fuente span,.observatorio-fuente small{display:block}
.observatorio-fuente strong{font-size:10px;text-transform:uppercase;color:#cce2f6}
.observatorio-fuente span{font-size:12px;font-weight:bold;margin:3px 0}
.observatorio-fuente small{font-size:10px;color:#d8e8f7}

.indicadores-sst{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:18px;
}
.indicador-sst{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:14px;
    padding:18px;
    box-shadow:0 5px 16px rgba(31,72,112,.04);
}
.indicador-principal{border-top:5px solid var(--azul)}
.indicador-sst:nth-child(2){border-top:5px solid #a94b4b}
.indicador-sst:nth-child(3){border-top:5px solid var(--naranja)}
.indicador-sst:nth-child(4){border-top:5px solid #6d62b5}
.indicador-icono{font-size:25px}
.indicador-numero{font-size:29px;font-weight:bold;color:#123f6f;line-height:1.1;margin-top:6px}
.indicador-titulo{font-size:12px;font-weight:bold;color:#34516d;margin-top:4px}
.indicador-porcentaje{font-size:10px;color:#8996a4;margin-top:2px}

.observatorio-doble{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:18px;
    margin-bottom:18px;
}
.panel-sst{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:15px;
    padding:21px;
}
.panel-sst-titulo{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-bottom:15px;
}
.panel-sst-titulo>span{font-size:25px}
.panel-sst-titulo h3{margin:0;color:#143f6d;font-size:18px}
.panel-sst-titulo p{margin:2px 0 0;font-size:11px;color:var(--gris)}

.barra-sst{margin-bottom:12px}
.barra-sst-texto{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-bottom:4px}
.barra-sst-texto span{color:#4d647b}
.barra-sst-texto strong{color:#163f6c}
.barra-sst-fondo{height:7px;background:#edf2f7;border-radius:99px;overflow:hidden}
.barra-sst-valor{height:100%;background:linear-gradient(90deg,#0755a4,#20a9d8);border-radius:99px}

.hallazgo-sst{
    padding:11px 0;
    border-bottom:1px solid #edf1f5;
}
.hallazgo-sst:last-child{border-bottom:0}
.hallazgo-sst strong{display:block;color:#163f6c;font-size:12px;margin-bottom:3px}
.hallazgo-sst p{margin:0;color:var(--gris);font-size:11.5px}
.hallazgo-destacado{
    margin-top:8px;
    border:0;
    background:#edf7f1;
    border-radius:10px;
    padding:11px 12px;
}
.hallazgo-destacado strong{color:#14733d}

.accidentes-frecuentes{margin-bottom:18px}
.frecuentes-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:11px;
}
.frecuente-item{
    background:#f7fafc;
    border:1px solid #e4ebf1;
    border-radius:10px;
    padding:12px;
}
.frecuente-item strong{
    display:block;
    font-size:21px;
    color:#0755a4;
}
.frecuente-item span{
    display:block;
    font-size:10.5px;
    line-height:1.35;
    color:#596f84;
    margin-top:3px;
}
.observatorio-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:#fff;
    border:1px solid var(--borde);
    border-radius:13px;
    padding:16px 18px;
    font-size:11px;
}
.observatorio-footer strong,.observatorio-footer span{display:block}
.observatorio-footer strong{color:#173f68}
.observatorio-footer span{color:#718092;margin-top:2px}

@media(max-width:980px){
    .indicadores-sst{grid-template-columns:repeat(2,1fr)}
    .observatorio-doble{grid-template-columns:1fr}
    .frecuentes-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
    .observatorio-cabecera{display:block}
    .observatorio-fuente{min-width:0;margin-top:14px}
    .indicadores-sst{grid-template-columns:1fr 1fr}
    .frecuentes-grid{grid-template-columns:1fr 1fr}
    .observatorio-footer{display:block}
    .observatorio-footer .btn{width:100%;margin-top:13px}
}
@media(max-width:430px){
    .indicadores-sst{grid-template-columns:1fr}
    .frecuentes-grid{grid-template-columns:1fr}
    .observatorio-cabecera h3{font-size:23px}
}