/* ADI · sitio público. Misma gráfica del sitio ADI: Karla, blanco, verde del logo y gris del logo/pie.
   Diseño: cabecera blanca fija, fotos con banda verde translúcida y contenido en columnas sobrias. */
:root{
  --verde:#4aba12;          /* verde del logo nuevo */
  --verde-boton:#2f8a2f;    /* mismo verde, un tono más firme para texto blanco legible */
  --verde-tinta:#2b7a2a;    /* enlaces y títulos chicos sobre blanco */
  --banda:rgba(29,125,28,.78); /* la banda verde sobre las fotos */
  --gris:#87898e;           /* gris del logo nuevo y del pie */
  --gris-osc:#4d5557;
  --tinta:#2c3233;
  --suave:#667072;
  --niebla:#f3f6f3;
  --linea:#e2e7e2;
  --blanco:#ffffff;
  --f:'Karla',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --ancho:1140px;
  --cab:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--cab) + 12px)}
body{margin:0;background:var(--blanco);color:var(--tinta);font:400 16px/1.6 var(--f);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--verde-tinta)}
h1,h2,h3,h4{font-weight:700;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
[hidden]{display:none!important}
.envoltura{max-width:var(--ancho);margin-inline:auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Cabecera ---------- */
.cab{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--blanco);border-bottom:1px solid var(--linea)}
.cab .envoltura{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--cab);max-width:1280px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gris);flex-shrink:0}
.marca-svg{height:40px;width:auto}
.marca-img{max-height:54px;width:auto;max-width:260px;object-fit:contain}
.pie .marca-svg{height:34px}
.pie .marca-img{max-height:44px}
.pie .marca-img.blanco{filter:brightness(0) invert(1)}
.marca .raya{width:2px;align-self:stretch;margin-block:4px;background:var(--verde)}
.marca .lema{font-size:11.5px;line-height:1.28;letter-spacing:.09em;color:var(--gris)}
.marca .lema b{color:var(--verde);font-weight:500}
.menu{display:flex;align-items:center}
.menu a{position:relative;display:block;padding:8px 15px;color:var(--gris);text-decoration:none;font-size:13px;letter-spacing:.07em;text-transform:uppercase;text-align:center;line-height:1.35}
.menu a+a::before{content:"";position:absolute;left:0;top:50%;height:14px;margin-top:-7px;width:1px;background:#b9c0c0}
.menu a:hover{color:var(--tinta)}
.menu a[aria-current="page"]{color:var(--verde-tinta)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--verde)}
.boton-menu{display:none;border:0;background:none;padding:10px;margin-right:-10px;cursor:pointer;color:var(--gris)}
.boton-menu svg{width:26px;height:26px}
@media (max-width:1060px){
  .boton-menu{display:block}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--blanco);border-bottom:1px solid var(--linea);padding:8px 0 14px;display:none}
  .menu.abierto{display:flex}
  .menu a{text-align:left;padding:12px 20px}
  .menu a+a::before{display:none}
  .menu a[aria-current="page"]::after{left:0;right:auto;top:8px;bottom:8px;width:3px;height:auto}
}

/* ---------- Banner de página (foto + banda verde) ---------- */
.banner{position:relative;height:clamp(220px,30vw,320px);background:var(--gris-osc) center/cover no-repeat;display:flex;align-items:flex-end;overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .banda{position:relative;width:100%;background:var(--banda);color:#fff;padding-block:16px 18px;margin-bottom:clamp(20px,4vw,34px)}
.banner h1{font-size:clamp(26px,3.4vw,34px);font-weight:500;letter-spacing:.005em}
.banner p{margin-top:6px;max-width:72ch;font-size:15px;line-height:1.45;opacity:.96}

/* ---------- Portada ---------- */
.hero{position:relative;background:var(--gris-osc)}
.hero .marco{position:relative;height:clamp(380px,48vw,600px);overflow:hidden}
.hero .lamina{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;display:flex;align-items:flex-end}
.hero .lamina.activa{opacity:1;z-index:1}
.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .banda{position:relative;width:100%;background:var(--banda);color:#fff;padding-block:22px 24px}
.hero .banda .envoltura{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px 48px;align-items:center}
.hero h2{font-size:clamp(28px,3.6vw,40px);font-weight:500}
.hero .banda p{font-size:15.5px;line-height:1.5}
.hero .banda a{display:inline-block;margin-top:8px;color:#fff;font-weight:700;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6)}
.hero .banda a:hover{border-bottom-color:#fff}
.flecha{position:absolute;top:40%;z-index:3;border:0;background:rgba(255,255,255,.14);color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(2px)}
.flecha:hover{background:rgba(255,255,255,.28)}
.flecha svg{width:22px;height:22px}
.flecha.ant{left:18px}.flecha.sig{right:18px}
.pestanas{border-bottom:1px solid var(--linea);background:var(--blanco)}
.pestanas .envoltura{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pestanas button{border:0;background:none;padding:16px 10px;cursor:pointer;color:var(--suave);font-size:14.5px;position:relative}
.pestanas button+button::before{content:"";position:absolute;left:0;top:50%;height:16px;margin-top:-8px;width:1px;background:#c6cccc}
.pestanas button[aria-selected="true"]{color:var(--tinta);font-weight:700}
.pestanas button[aria-selected="true"]::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;background:var(--verde)}
@media (max-width:760px){
  .hero .banda .envoltura{grid-template-columns:1fr}
  .flecha{display:none}
  .pestanas .envoltura{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pestanas button:nth-child(3)::before{display:none}
}

.seccion{padding-block:clamp(48px,7vw,84px)}
.seccion.niebla{background:var(--niebla)}
.titulo-barra{position:relative;padding-left:18px;color:var(--verde);font-size:clamp(24px,2.6vw,30px);font-weight:700}
.titulo-barra::before{content:"";position:absolute;left:0;top:.08em;bottom:.08em;width:6px;background:var(--verde)}
.titulo-barra.oscuro{color:var(--tinta)}
.cabeza-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.enlace-mas{font-weight:700;font-size:14.5px;text-decoration:none;color:var(--verde-tinta);white-space:nowrap}
.enlace-mas:hover{text-decoration:underline}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 64px}
@media (max-width:820px){.dos{grid-template-columns:1fr}}
.texto{display:grid;align-content:start;gap:14px;font-size:15.5px;color:var(--gris-osc);max-width:68ch}
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px;border-top:1px solid var(--linea);padding-top:22px}
.cifras div{display:grid;gap:2px}
.cifras strong{font-size:30px;color:var(--verde);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.cifras span{font-size:13.5px;color:var(--suave)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 20px;border-radius:4px;border:0;background:var(--verde-boton);color:#fff;font-weight:700;font-size:14.5px;line-height:1.3;text-decoration:none;cursor:pointer;text-align:left}
.btn:hover{background:#26752a}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn.claro{background:var(--blanco);color:var(--verde-tinta);border:1.5px solid var(--verde)}
.btn.claro:hover{background:var(--niebla)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* Tarjetas de publicaciones */
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:960px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rejilla{grid-template-columns:1fr}}
.tarjeta{display:flex;flex-direction:column;background:var(--blanco);text-decoration:none;color:inherit;border-bottom:3px solid var(--verde);transition:transform .2s ease,box-shadow .2s ease}
.seccion:not(.niebla) .tarjeta{box-shadow:0 0 0 1px var(--linea)}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(30,60,30,.12)}
.tarjeta .foto{aspect-ratio:16/10;background:var(--niebla);overflow:hidden}
.tarjeta .foto img{width:100%;height:100%;object-fit:cover}
.tarjeta .cuerpo{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.tarjeta h3{font-size:19px;font-weight:500;color:var(--tinta)}
.tarjeta .fecha{font-size:13px;color:var(--verde-tinta);font-weight:700;letter-spacing:.02em}
.tarjeta p{font-size:14.5px;color:var(--suave);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.chip{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--gris-osc);background:var(--niebla);border-radius:3px;padding:3px 8px}
.seccion.niebla .chip{background:#e7ece7}

/* Logos de empresas */
.logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.logos a{display:grid;place-items:center;background:var(--blanco);aspect-ratio:3/2;padding:14px}
.logos img{max-height:70px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .25s,opacity .25s}
.logos a:hover img{filter:none;opacity:1}
@media (max-width:900px){.logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- La Asociación ---------- */
.directorio{margin-top:22px;display:grid;font-size:16px}
.directorio div{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;padding:9px 0;border-bottom:1px solid var(--linea)}
.directorio dt{font-weight:500;color:var(--tinta)}
.directorio dd{margin:0;color:var(--suave)}
.subt{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-top:40px}
.descargas{display:grid;gap:10px;margin-top:14px}
.descargas .btn{justify-content:flex-start;width:100%;max-width:420px}
.titulo-verde{color:var(--verde);font-size:clamp(24px,2.6vw,30px);font-weight:500}

/* ---------- Nuestra Visión: desafíos ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:3px solid var(--verde);margin-top:56px}
.tabs button{border:0;background:none;padding:11px 16px;border-radius:4px 4px 0 0;color:var(--suave);cursor:pointer;font-size:14.5px;font-weight:500}
.tabs button:hover{color:var(--tinta)}
.tabs button[aria-selected="true"]{background:var(--verde-boton);color:#fff;font-weight:700}
.desafio-foto{position:relative;height:clamp(220px,26vw,320px);overflow:hidden;display:flex;align-items:flex-end}
.desafio-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.desafio-foto .banda{position:relative;width:100%;background:var(--banda);color:#fff;padding:18px clamp(18px,3vw,32px)}
.desafio-foto small{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.9;margin-bottom:4px}
.desafio-foto h2{font-size:clamp(21px,2.4vw,28px);font-weight:500;max-width:30ch}
.destacado{font-size:clamp(19px,1.9vw,22px);line-height:1.4;color:var(--tinta);font-weight:500;padding:4px 0 4px 20px;border-left:4px solid var(--verde);margin-bottom:6px}

/* ---------- Empresas ---------- */
.herr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.buscar{position:relative;flex:1 1 280px;max-width:420px}
.buscar input{width:100%;padding:11px 14px 11px 40px;border:1px solid #cdd4cd;border-radius:4px;background:var(--blanco)}
.buscar svg{position:absolute;left:12px;top:50%;margin-top:-9px;width:18px;height:18px;color:var(--gris)}
.cuenta{font-size:14px;color:var(--suave);font-variant-numeric:tabular-nums}
.empresa{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--linea)}
.empresa .logo{display:grid;place-items:center;aspect-ratio:2/1;background:var(--blanco);border:1px solid var(--linea);padding:12px}
.empresa .logo img{max-height:96px;width:auto;object-fit:contain}
.empresa h2{font-size:17px;letter-spacing:.04em;color:var(--gris-osc);font-weight:700}
.empresa p{font-size:14.5px;color:var(--suave);margin-top:8px;max-width:78ch}
.empresa .web{display:inline-block;margin-top:8px;font-size:14px;word-break:break-all}
@media (max-width:640px){.empresa{grid-template-columns:1fr;gap:14px}.empresa .logo{max-width:240px}}
.vacio{padding:40px 0;color:var(--suave)}

/* ---------- Socios ---------- */
.socios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:700px){.socios{grid-template-columns:1fr}}
.socio{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start;padding:24px;background:var(--niebla);border-left:4px solid var(--verde)}
.socio .logo{background:var(--blanco);display:grid;place-items:center;aspect-ratio:3/2;padding:10px}
.socio .logo img{max-height:70px;width:auto;object-fit:contain}
.socio h2{font-size:19px;font-weight:700}
.socio p{font-size:14.5px;color:var(--suave);margin-top:6px}
@media (max-width:420px){.socio{grid-template-columns:1fr}.socio .logo{max-width:160px}}

/* ---------- Publicación / nota ---------- */
.volver{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;text-decoration:none;margin-bottom:24px}
.volver svg{width:16px;height:16px}
.detalle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:start}
@media (max-width:860px){.detalle{grid-template-columns:1fr}}
.detalle .portada{background:var(--niebla);border:1px solid var(--linea)}
.detalle h1{font-size:clamp(26px,3vw,34px);font-weight:700;color:var(--tinta)}
.meta{font-size:14px;color:var(--verde-tinta);font-weight:700;margin:10px 0 18px}
.nota{max-width:760px}
.nota h1{font-size:clamp(26px,3.2vw,36px)}
.nota .foto{margin:22px 0 26px}
.nota .texto{max-width:none;font-size:16.5px;line-height:1.7;color:var(--tinta)}
.lista-notas{display:grid;gap:0}
.item-nota{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;padding:26px 0;border-bottom:1px solid var(--linea);text-decoration:none;color:inherit}
.item-nota .foto{aspect-ratio:16/10;overflow:hidden;background:var(--niebla)}
.item-nota .foto img{width:100%;height:100%;object-fit:cover}
.item-nota h2{font-size:21px;font-weight:500;margin:6px 0 8px;color:var(--tinta)}
.item-nota:hover h2{color:var(--verde-tinta)}
.item-nota p{font-size:14.5px;color:var(--suave);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.etq{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-tinta)}
.etq time{color:var(--suave);font-weight:400;letter-spacing:.02em;text-transform:none;margin-left:8px}
@media (max-width:640px){.item-nota{grid-template-columns:1fr;gap:12px}}

/* ---------- Contacto ---------- */
.form{display:grid;gap:16px;max-width:560px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--gris-osc)}
.form label span{font-weight:400;color:var(--suave)}
.form input,.form textarea{padding:11px 13px;border:1px solid #c5ccc5;border-radius:4px;background:var(--blanco);font-weight:400}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(79,173,78,.2)}
.form .error{color:#a3261c;font-size:13.5px;font-weight:700}
.aviso-datos{font-size:13px;color:var(--suave);line-height:1.5;border-top:1px solid var(--linea);padding-top:14px}
.ok{background:var(--niebla);border-left:4px solid var(--verde);padding:22px 24px;max-width:560px}
.ok h2{font-size:21px;margin-bottom:6px}
.dato{display:grid;gap:2px;margin-bottom:20px}
.dato small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.dato span,.dato a{font-size:16px;color:var(--tinta)}

/* ---------- Pie ---------- */
.pie{background:var(--gris);color:#fff;padding-block:34px 28px;font-size:14px}
.pie .envoltura{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:24px 48px;align-items:start}
.pie a{color:#fff;text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie nav{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:6px 28px}
.pie .marca{color:#fff}
.pie .marca .lema,.pie .marca .lema b{color:#fff}
.pie .marca .raya{background:#fff}
.marca img{height:46px;width:auto;max-width:240px;object-fit:contain}
.pie .marca img{height:38px}
.pie .marca img.blanco{filter:brightness(0) invert(1)}
.pie .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.28);padding-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;opacity:.92}
@media (max-width:820px){.pie .envoltura{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Piezas del sitio en PHP ---------- */
.saltar:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:var(--tinta);color:#fff;padding:10px 14px}
.migas{background:var(--niebla);border-bottom:1px solid var(--linea);font-size:13.5px}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;margin:0 auto;padding-block:9px}
.migas li+li::before{content:"›";margin:0 8px;color:var(--gris)}
.migas a{color:var(--suave);text-decoration:none}
.migas a:hover{text-decoration:underline}
.migas [aria-current]{color:var(--tinta)}
.frase{margin-top:18px;font-size:19px;line-height:1.5;color:var(--tinta)}
.logos a span{font-size:12.5px;color:var(--suave);text-align:center}
.btn small{font-weight:400;opacity:.85}
.mt-grande{margin-top:64px;margin-bottom:24px}
.mt-medio{margin-top:36px}
.pt0{padding-top:28px}
.pt-chico{padding-top:36px}
.angosta{max-width:1000px}
.suave{color:var(--suave);font-weight:400}
.etq.bloque{display:block}
.nota h1{margin-top:8px}
.nota .foto img{width:100%;height:auto}
.desafios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:960px){.desafios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.desafios{grid-template-columns:1fr}}
.desafio-tarjeta{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--niebla);border-bottom:3px solid var(--verde);transition:transform .2s ease,box-shadow .2s ease}
.desafio-tarjeta:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(30,60,30,.12)}
.desafio-tarjeta .foto{aspect-ratio:16/10;overflow:hidden;background:var(--linea)}
.desafio-tarjeta .foto img{width:100%;height:100%;object-fit:cover}
.desafio-tarjeta .cuerpo{padding:16px 18px 18px;display:grid;gap:4px}
.desafio-tarjeta small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde-tinta);font-weight:700}
.desafio-tarjeta h3{font-size:19px;font-weight:500}
.desafio-tarjeta p{font-size:14px;color:var(--suave)}
.tabs{margin-top:0;margin-bottom:0}
.tabs a{padding:11px 16px;border-radius:4px 4px 0 0;color:var(--suave);text-decoration:none;font-size:14.5px;font-weight:500}
.tabs a:hover{color:var(--tinta)}
.tabs a[aria-current="page"]{background:var(--verde-boton);color:#fff;font-weight:700}
.desafio-foto h1{font-size:clamp(21px,2.4vw,28px);font-weight:500;max-width:32ch}
.desafio-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner img{height:100%}
.hero picture img{height:100%}
.video{width:100%;margin-top:14px;background:#000;border-radius:4px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--gris-osc)}
.form .check input{margin-top:4px;width:18px;height:18px;accent-color:var(--verde-boton)}
.form [aria-invalid="true"]{border-color:#a3261c;box-shadow:0 0 0 2px rgba(163,38,28,.15)}
.form .error{background:#fbeceb;border-left:4px solid #a3261c;padding:10px 14px;color:#7c1d15}
.pie-dato{margin-top:16px}
.pie .marca{margin-bottom:4px}
.empresa{scroll-margin-top:calc(var(--cab) + 20px)}

@media (max-width:700px){.hero .marco{height:560px}}