/* ===== ATSA Quilmes — estilos públicos ===== */
:root{color-scheme:light;
  --verde:#1b8a3f;
  --verde-osc:#0f5c2a;
  --tinta:#16382a;          /* verde-tinta para header/footer */
  --tinta2:#0e2c20;
  --crema:#f6efd6;
  --gris:#f4f6f4;
  --texto:#2c352f;
  --muted:#6b7770;
  --linea:#e3e8e3;
  --sombra:0 6px 24px rgba(20,50,35,.10);
  --radio:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Segoe UI',Roboto,system-ui,-apple-system,sans-serif;
  color:var(--texto);background:#fff;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:var(--verde-osc);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
h1,h2,h3{color:var(--tinta);line-height:1.2;margin:.2em 0 .5em}
.btn{display:inline-block;background:var(--verde);color:#fff;padding:11px 22px;border-radius:999px;
  font-weight:600;border:none;cursor:pointer;transition:.2s;text-decoration:none}
.btn:hover{background:var(--verde-osc);text-decoration:none}
.btn-ghost{background:transparent;border:2px solid #fff;color:#fff}
.btn-ghost:hover{background:#fff;color:var(--verde-osc)}
.sec{padding:64px 0}
.sec-titulo{text-align:center;margin-bottom:8px}
.sec-titulo h2{font-size:2rem;position:relative;display:inline-block}
.sec-titulo h2::after{content:"";display:block;width:64px;height:4px;background:var(--verde);
  border-radius:3px;margin:12px auto 0}
.sec-sub{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 40px}

/* ===== Barra superior ===== */
.topbar{background:var(--tinta2);color:#cfe0d4;font-size:.85rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#cfe0d4}
.topbar .ti{display:inline-flex;align-items:center;gap:6px;margin-right:16px}
.topbar .right{display:flex;align-items:center;gap:14px}
.topbar .recaudacion{background:var(--verde);color:#fff;padding:4px 12px;border-radius:999px;font-weight:600}
.topbar .recaudacion:hover{background:#fff;color:var(--verde-osc);text-decoration:none}
.topbar .topcta{background:#ffd24a;color:#16382a;padding:4px 14px;border-radius:999px;font-weight:800}
.topbar .topcta:hover{background:#ffdd72;color:#16382a;text-decoration:none}

/* ===== Header / Nav ===== */
.header{background:var(--tinta);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:16px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-badge{width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.brand-badge img{width:48px;height:48px;object-fit:contain;display:block}
.brand .bt{color:#fff;font-weight:800;font-size:1.22rem;line-height:1.05;letter-spacing:.3px}
.brand .bt small{display:block;color:#9ec9ab;font-weight:500;font-size:.68rem;letter-spacing:.4px;margin-top:3px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:#e7f1ea;padding:10px 14px;border-radius:8px;font-weight:600;font-size:.95rem}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer}

/* ===== Carrusel ===== */
.carousel{position:relative;overflow:hidden;background:#0b261b}
.slides{display:flex;transition:transform .6s ease}
.slide{min-width:100%;position:relative;height:clamp(320px,50vw,560px)}
.slide img,.slide video{width:100%;height:100%;object-fit:cover;opacity:.92}
/* Afiches: imagen completa (contain) sobre fondo blur CLARO de sí misma — nada se recorta ni queda negro */
.slide img.bg{position:absolute;inset:0;filter:blur(22px) brightness(1.02) saturate(1.05);transform:scale(1.12);opacity:1}
.slide img.fg{position:relative;object-fit:contain;opacity:1}
.slide .cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 8%;background:linear-gradient(90deg,rgba(11,38,27,.82) 0%,rgba(11,38,27,.5) 42%,rgba(11,38,27,.12) 78%,rgba(11,38,27,0) 100%)}
.slide .cap h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.8rem);max-width:720px;margin:0 0 12px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.slide .cap p{color:#eef5f0;font-size:clamp(1rem,1.5vw,1.2rem);max-width:600px;margin:0 0 22px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);
  color:#fff;border:none;width:46px;height:46px;border-radius:50%;font-size:1.4rem;cursor:pointer;z-index:3}
.car-btn:hover{background:var(--verde)}
.car-prev{left:18px}.car-next{right:18px}
.dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:3}
.dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.5);border:none;cursor:pointer}
.dot.active{background:var(--verde);transform:scale(1.2)}

/* ===== Acuerdos: acordeones por convenio/rama (estilo ATSA nacional, paleta propia) ===== */
.cct-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start;margin-top:26px}
.cct{border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--sombra);border:1px solid var(--linea)}
.cct summary{list-style:none;cursor:pointer;background:var(--verde);color:#fff;font-weight:700;
  padding:14px 18px;display:flex;align-items:center;gap:12px;border-bottom:4px solid var(--tinta);
  transition:background .15s;user-select:none}
.cct summary::-webkit-details-marker{display:none}
.cct summary:hover{background:var(--verde-osc,#157034)}
.cct .flecha{transition:transform .2s;font-size:.9rem}
.cct[open] .flecha{transform:rotate(90deg)}
.cct-nombre{flex:1}
.cct-cant{background:rgba(255,255,255,.22);border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:600}
.cct-body{padding:6px 18px}
.esc{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px dashed var(--linea);flex-wrap:wrap}
.esc:last-child{border-bottom:none}
.esc-info strong{color:var(--tinta)}
.esc-badge{display:inline-block;background:var(--crema);color:var(--verde-osc,#157034);font-size:.72rem;font-weight:700;
  border-radius:999px;padding:2px 10px;margin-left:8px;text-transform:uppercase;letter-spacing:.4px}
.esc-per{display:inline-block;color:var(--muted);font-size:.82rem;margin-left:10px}
.esc-desc{color:var(--muted);font-size:.88rem;margin:6px 0 0}
.esc:not(.vig) .esc-info strong{font-weight:600;color:var(--muted)}
.esc-links{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){.cct-grid{grid-template-columns:1fr}}

/* ===== Tarjetas / grid ===== */
.grid{display:grid;gap:24px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;
  box-shadow:var(--sombra);transition:.2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px)}
.card .ph{height:200px;background:var(--gris) center/contain no-repeat;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.card .ph i{font-size:2.6rem;color:#b8ccbe}
.card .ph video{width:100%;height:100%;object-fit:cover;pointer-events:none;background:#000}
/* Tarjetas: mismas dos capas que el carrusel (blur claro + imagen entera) — ideal formato Instagram */
.card .ph img.phbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(16px) brightness(1.02);transform:scale(1.15)}
.card .ph img.phfg{position:relative;width:100%;height:100%;object-fit:contain}
.card .ph .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.card .ph .play i{font-size:3rem;color:rgba(255,255,255,.9);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.card .body{padding:20px;flex:1;display:flex;flex-direction:column}
.card .body h3{font-size:1.18rem;margin-top:0}
.card .body p{color:var(--muted);margin:0 0 14px;flex:1}
.card .tag{display:inline-block;background:var(--crema);color:var(--verde-osc);font-size:.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:999px;margin-bottom:10px;align-self:flex-start}

/* Secretarías */
.sec-card{text-align:center;padding:30px 22px}
.sec-card .ic{width:72px;height:72px;border-radius:50%;background:var(--crema);display:flex;align-items:center;
  justify-content:center;margin:0 auto 16px;font-size:1.8rem;color:var(--verde)}
.aut-badge{width:68px;height:68px;border-radius:50%;background:var(--verde);color:#fff;display:flex;
  align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.7rem}
.cargo-label{display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--verde-osc)}
.comision-head{text-align:center;margin-bottom:36px}
.comision-head .tag{margin-bottom:10px}
.comision-head h2{font-size:1.9rem;margin:.15em 0}
.vocal-title{font-size:1.4rem;margin:50px 0 18px;padding-bottom:8px;border-bottom:2px solid var(--linea);color:var(--tinta)}
.vocales{columns:2;column-gap:44px;counter-reset:v;list-style:none;padding:0;margin:0}
.vocales li{break-inside:avoid;padding:9px 0 9px 40px;position:relative;border-bottom:1px solid var(--linea)}
.vocales li::before{counter-increment:v;content:counter(v) "º";position:absolute;left:0;top:9px;color:var(--verde);font-weight:700;width:32px}
@media(max-width:680px){.vocales{columns:1}}

/* Institucional */
.intro{background:var(--gris)}
.intro .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.stat-row{display:flex;gap:30px;flex-wrap:wrap;margin-top:24px}
.stat b{display:block;font-size:2.2rem;color:var(--verde);line-height:1}
.stat span{color:var(--muted);font-size:.95rem}
.intro .emblem{text-align:center}
.intro .emblem img{margin:0 auto;max-height:280px;width:auto}

/* ===== Acuerdos: filtros ===== */
.filtros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.filtro{background:#fff;border:2px solid var(--linea);color:var(--texto);padding:9px 18px;border-radius:999px;
  font-weight:600;cursor:pointer;transition:.2s;font-size:.92rem}
.filtro:hover{border-color:var(--verde)}
.filtro.active{background:var(--verde);border-color:var(--verde);color:#fff}
.acuerdo{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--linea);
  border-left:5px solid var(--verde);border-radius:12px;padding:18px 22px;margin-bottom:14px;box-shadow:var(--sombra)}
.acuerdo .ico{font-size:1.8rem;color:var(--verde)}
.acuerdo .meta{flex:1}
.acuerdo .meta .cat{font-size:.74rem;font-weight:700;text-transform:uppercase;color:var(--verde-osc);letter-spacing:.5px}
.acuerdo .meta h3{margin:.2em 0;font-size:1.12rem}
.acuerdo .meta p{margin:0;color:var(--muted);font-size:.92rem}
.acuerdo .estado{background:var(--crema);color:var(--verde-osc);font-weight:700;font-size:.78rem;padding:5px 12px;border-radius:999px;white-space:nowrap;text-align:center}
.acuerdo.hist{border-left-color:#bcc7c0}
.acuerdo.hist .ico{color:#9aa8a0}
.acuerdo .meta .per{font-weight:600;color:var(--verde-osc);margin:.25em 0;font-size:.9rem}
.acc-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.estado.hist{background:#eef0ee;color:#7a857e}

/* ===== Formulario ===== */
.form{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:32px;box-shadow:var(--sombra)}
.form label{display:block;font-weight:600;margin:14px 0 6px;color:var(--tinta)}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--linea);
  border-radius:10px;font-size:1rem;font-family:inherit;background:#fff;color:var(--texto)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--verde)}
.form textarea{min-height:130px;resize:vertical}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ===== Page header (subpáginas) ===== */
.page-head{background:var(--tinta);color:#fff;padding:54px 0 46px;text-align:center}
.page-head h1{color:#fff;font-size:2.3rem;margin:0}
.page-head .crumbs{color:#9ec9ab;font-size:.9rem;margin-top:8px}
.page-head .crumbs a{color:#cfe0d4}

/* ===== Sedes ===== */
.sede{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra);margin-bottom:28px}
.sede .info{padding:30px}
.sede .info h3{margin-top:0}
.sede .info li{list-style:none;margin:10px 0;display:flex;gap:10px;color:var(--texto)}
.sede .info li i{color:var(--verde);width:20px;text-align:center;margin-top:4px}
.sede ul{padding:0;margin:14px 0 0}
.sede iframe{width:100%;height:100%;min-height:300px;border:0}
.mapbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:300px;height:100%;background:linear-gradient(135deg,#eef4ee,#dcebe0);
  background:repeating-linear-gradient(45deg,#eef3ee,#eef3ee 18px,#e6efe6 18px,#e6efe6 36px);
  color:var(--verde-osc);text-decoration:none;text-align:center;padding:24px}
.mapbox:hover{text-decoration:none;filter:brightness(.98)}
.mapbox i.fa-map-location-dot{font-size:3.4rem;color:var(--verde)}
.mapbox span:not(.btn){font-weight:600;color:var(--tinta)}
/* Mapa Leaflet/OSM */
.sede-map{position:relative;min-height:320px}
.lmap{height:100%;min-height:320px;width:100%;background:var(--gris)}
.leaflet-container{font-family:inherit}
.comollegar{position:absolute;bottom:14px;right:14px;z-index:1000;background:var(--verde);color:#fff;
  padding:9px 16px;border-radius:999px;font-weight:600;font-size:.9rem;box-shadow:0 4px 14px rgba(0,0,0,.3);text-decoration:none}
.comollegar:hover{background:var(--verde-osc);color:#fff;text-decoration:none}

/* ===== Alertas ===== */
.alert{padding:14px 18px;border-radius:10px;margin-bottom:18px;font-weight:500}
.alert-ok{background:#e6f6ec;color:#15672f;border:1px solid #bce4c9}
.alert-err{background:#fdecec;color:#a3271f;border:1px solid #f3c2bf}

/* ===== Footer ===== */
.footer{background:var(--tinta);color:#cbd8cf;padding:54px 0 0}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px;padding-bottom:40px}
.footer h4{color:#fff;font-size:1.05rem;margin:0 0 16px}
.footer img.flogo{height:54px;margin-bottom:16px}
.footer .fbrand{display:flex;align-items:center;gap:12px}
.footer .fbadge{width:84px;height:84px;object-fit:contain;flex-shrink:0}
.footer a{color:#cbd8cf}
.footer a:hover{color:#fff}
.footer li{list-style:none;margin:9px 0;display:flex;gap:10px;align-items:flex-start}
.footer ul{padding:0;margin:0}
.footer li i{color:var(--verde);width:18px;margin-top:5px}
.redes a{display:inline-flex;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);
  align-items:center;justify-content:center;color:#fff;margin-right:10px;font-size:1.1rem}
.redes a:hover{background:var(--verde)}
.footer .bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;text-align:center;font-size:.85rem;color:#9ab0a1}

/* ===== Responsive ===== */
@media(max-width:900px){
  .nav{position:fixed;inset:78px 0 auto 0;background:var(--tinta);flex-direction:column;gap:0;
    padding:10px 0;transform:translateY(-150%);transition:.3s;box-shadow:0 12px 24px rgba(0,0,0,.3)}
  .nav.open{transform:translateY(0)}
  .nav a{width:100%;padding:14px 24px;border-radius:0}
  .nav-toggle{display:block}
  .g3,.g2,.intro .inner,.sede,.cols2,.footer .cols{grid-template-columns:1fr}
  .sede iframe{min-height:240px}
  .topbar .left{display:none}
}
@media(max-width:600px){
  .topbar{font-size:.8rem}
  .topbar .right{gap:8px;flex-wrap:wrap;justify-content:flex-end;padding:5px 0}
  .topbar .topcta,.topbar .recaudacion{padding:3px 10px;font-size:.74rem}
  .slide .cap{padding:0 6%}
  .slide .cap h2{font-size:1.45rem;margin-bottom:8px}
  .slide .cap p{font-size:.95rem;margin-bottom:16px}
  .sec{padding:44px 0}
  .brand .bt{font-size:1.08rem}
}