/* ── fuentes, antes en /css/fonts.css ──────────────────────
   Era un pedido bloqueante de 1,6 KB y encadenado: HTML → CSS →
   woff2. Fusionado acá, el navegador hace una ida y vuelta menos
   en las 226 páginas. Las precargas del <head> se conservan.
   ─────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   HIDECA — fuentes auto-hospedadas (subset latin)
   Antes se pedian a fonts.googleapis.com + fonts.gstatic.com:
   dos conexiones externas en el camino critico del renderizado.
   font-display:swap muestra el texto de inmediato con la fuente
   del sistema y lo cambia cuando la propia termina de cargar.
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/dm-sans-latin-300-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/barlow-condensed-latin-900-normal.woff2') format('woff2');}

/* ═══════════════════════════════════════════════════════════
   HIDECA — base.css
   Reglas identicas que se repetian en 3 o mas paginas del sitio.
   Generado el 20/08/2026 a partir de los <style> inline.
   Las paginas que tienen una version distinta de alguna regla la
   conservan en su propio <style>, que va despues y por lo tanto gana.
   ═══════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:#fff;color:#0D0D0D;overflow-x:hidden;}
.logo-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:24px;color:#fff;letter-spacing:5px;line-height:1;}
.logo-sub{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:rgba(255,255,255,.3);font-weight:300;}
.nav-r{display:flex;align-items:center;gap:16px;}
.nav-back{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s;}
.nav-back:hover{color:#fff;}
.nav-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}
.nav-social{display:flex;gap:10px;}
.nav-social a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:.5px solid rgba(255,255,255,.12);border-radius:2px;transition:border-color .2s;}
.nav-social a:hover{border-color:var(--green);}
.nav-social a:hover svg{stroke:var(--green);}
.nav-social a.wa:hover svg{fill:#25D366;}
.nav-social a.wa:hover{border-color:#25D366;}
.nav-links a{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.4);text-decoration:none;cursor:pointer;transition:color .2s;}
.nav-links a:hover{color:#fff;}
.nav-links a.active,.drop-btn.active{color:var(--green);}
.nav-links > li{display:flex;align-items:center;}
.nav-links > li > a{display:flex;align-items:center;line-height:1;}
/* Mismo origen que el índice del artículo: el <nav> del encabezado trae
   justify-content:space-between, y las dos páginas de permisos de vuelco
   usan <nav class="breadcrumb"> dentro del hero, así que las migas se
   desparramaban de borde a borde de los 800px en vez de quedar juntas. */
.breadcrumb{justify-content:flex-start;align-items:center;gap:9px;flex-wrap:wrap;}
.breadcrumb li{display:flex;align-items:center;}
.has-drop{position:relative;}
.hero-cta:hover{border-color:var(--green);color:var(--green);}
.breadcrumb a:hover{color:var(--green);}
.hero-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .2s;}
.art-hero{background:var(--dark);padding:clamp(34px,4vw,52px) var(--pad) clamp(30px,3.4vw,44px);position:relative;overflow:hidden;isolation:isolate;}
.drop-btn:hover{color:#fff;}
.hero-cta:hover svg{transform:translateX(4px);}
.breadcrumb .current{color:var(--green);}
.art-hero::before{content:'';position:absolute;inset:0;z-index:-1;background:#06090C;}
.drop-btn[aria-expanded="true"]{color:var(--green);}
.breadcrumb .sep{opacity:.3;}
.art-hero-img{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.drop-btn .caret{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round; transition:transform .2s;flex-shrink:0;}
.drop-btn[aria-expanded="true"] .caret{transform:rotate(180deg);}
.art-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.42;filter:saturate(.35) contrast(1.05) brightness(.9);}
.dropdown{position:absolute;top:calc(100% + 16px);left:-16px; min-width:250px; background:#fff; padding:8px 0; box-shadow:0 12px 40px -8px rgba(0,0,0,.45); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s; z-index:120;}
.art-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,#06090C 0%,rgba(6,9,12,.95) 28%,rgba(6,9,12,.6) 58%,rgba(4,6,9,.85) 88%,#020304 100%),linear-gradient(to top,#06090C 0%,rgba(6,9,12,.4) 40%,transparent 75%);}
.has-drop.open .dropdown{opacity:1;visibility:visible;transform:none;}
.art-hero-body{max-width:760px;position:relative;z-index:1;}
.dropdown a{display:block; padding:11px 22px; font-size:13px;letter-spacing:.2px;text-transform:none; color:#0D0D0D;text-decoration:none; transition:background .15s,padding-left .15s; white-space:nowrap;}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:16px;}
.dropdown a:hover,.dropdown a:focus-visible{background:#F2F2F0;padding-left:27px;color:#000;outline:none;}
.drop-btn:focus-visible{outline:1px solid var(--green);outline-offset:4px;}
.art-cat{color:var(--green);}
.art-hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(27px,3.4vw,42px);line-height:1.02;letter-spacing:-.3px;color:#fff;margin-bottom:14px;}
.art-lead{font-size:clamp(14px,1.35vw,16px);line-height:1.7;color:rgba(255,255,255,.55);font-weight:300;max-width:640px;}
.nav-toggle{display:none;flex-direction:column;gap:5px; background:none;border:0;padding:8px;cursor:pointer;margin-left:4px;}
.art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(34px,4.5vw,70px);max-width:1240px;margin:0 auto;padding:clamp(40px,5vw,64px) var(--pad);align-items:start;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:#fff;transition:transform .25s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.art-content{max-width:74ch;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.art-content p{font-size:16px;line-height:1.85;color:rgba(0,0,0,.66);font-weight:300;margin-bottom:20px;}
.art-content p strong{color:#0D0D0D;font-weight:500;}
@media(max-width:520px){.nav-social{display:none;}}
.art-content a{color:var(--blue);text-decoration:none;border-bottom:.5px solid rgba(59,127,212,.35);transition:color .2s,border-color .2s;}
.art-content a:hover{color:var(--green);border-color:var(--green);}
.sec-tag::before{content:'';width:18px;height:1px;background:var(--blue);}
.art-content h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(24px,2.6vw,32px);line-height:1.08;color:#0D0D0D;margin:44px 0 16px;scroll-margin-top:96px;}
.art-content h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(18px,1.8vw,21px);line-height:1.15;color:#0D0D0D;margin:30px 0 10px;scroll-margin-top:96px;}
.art-content ul,.art-content ol{margin:0 0 22px 0;padding-left:0;list-style:none;}
.sec-tag.green::before{background:var(--green);}
.art-content li{font-size:15.5px;line-height:1.75;color:rgba(0,0,0,.62);font-weight:300;padding:6px 0 6px 20px;position:relative;}
.art-content ul li::before{content:'';position:absolute;left:2px;top:15px;width:5px;height:5px;background:var(--green);border-radius:50%;}
.art-content ol{counter-reset:n;}
.art-content ol li{counter-increment:n;}
.art-content ol li::before{content:counter(n)'.';position:absolute;left:0;top:6px;color:var(--green);font-size:13px;font-weight:500;}
.art-fig{margin:30px 0;}
.eq-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:start;}
.art-fig img{width:100%;height:auto;display:block;background:#0D1117;border:.5px solid rgba(0,0,0,.08);}
.art-fig figcaption{font-size:12.5px;line-height:1.6;color:rgba(0,0,0,.42);font-weight:300;margin-top:9px;padding-left:2px;}
.eq-box{background:#fff;border:.5px solid rgba(0,0,0,.1);padding:clamp(22px,2.6vw,32px);}
.art-fig--ancha{margin-left:calc(-1 * clamp(0px,3vw,60px));margin-right:calc(-1 * clamp(0px,3vw,60px));}
/* ── Figuras dentro de una página de SERVICIO ─────────────────────────
   `.art-fig` se diseñó para la columna de una nota y funciona bien sola.
   Una sección de servicio es más ancha, así que una fila de fotos necesita
   su propia grilla. `.galeria` es sólo el contenedor: cada hijo sigue
   siendo un `.art-fig`, con el estilo que ya estaba probado.
   `.esquema` es lo mismo para un dibujo hecho en SVG, que a diferencia de
   una foto no lleva fondo oscuro ni tiene que ocupar todo el ancho.       */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.4vw,30px);margin:30px 0;}
.galeria .art-fig{margin:0;}
.esquema{margin:26px 0 0;}
.esquema svg{display:block;width:100%;height:auto;max-width:940px;margin:0 auto;background:#fff;border:.5px solid rgba(0,0,0,.1);}
.esquema figcaption{font-size:12.5px;line-height:1.6;color:rgba(0,0,0,.42);font-weight:300;margin:9px auto 0;padding-left:2px;max-width:940px;}
/* Las referencias del esquema van en HTML y no adentro del SVG: un dibujo de
   940 de ancho escalado a un teléfono de 400 reduce su tipografía a la mitad
   larga, y una referencia de 12 px se vuelve ilegible. Afuera, reflowea.     */
.esq-ref{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:13px 28px;max-width:940px;margin:20px auto 0;list-style:none;}
.esq-ref li{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.55;color:rgba(0,0,0,.6);font-weight:300;}
.esq-ref li b{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.esq-ref li.om b{background:var(--green);color:#06090C;}
.esq-ref li strong{color:#0D0D0D;font-weight:600;}
.eq-box.off{background:transparent;border-style:dashed;}
.btn-wa:hover{background:#1EBE5A;}
.eq-box h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(17px,1.6vw,20px);color:#0D0D0D;margin-bottom:6px;line-height:1.12;}
.btn-wa svg{width:15px;height:15px;fill:#06090C;flex-shrink:0;}
.art-divider{height:1px;background:rgba(0,0,0,.1);margin:34px 0;}
.eq-box .eq-lead{font-size:12.5px;line-height:1.65;color:rgba(0,0,0,.45);margin-bottom:16px;font-weight:300;}
.info-box,.tip-box{background:#F7F7F5;border-left:3px solid var(--blue);padding:22px 24px;margin:30px 0;}
.eq-box ul{list-style:none;}
.tip-box{border-left-color:var(--green);}
.eq-box li{font-size:13.5px;line-height:1.6;color:rgba(0,0,0,.58);padding:7px 0 7px 18px;position:relative;font-weight:300;border-bottom:.5px solid rgba(0,0,0,.06);}
.eq-box li:last-child{border-bottom:0;}
.box-label{font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);margin-bottom:9px;font-weight:500;}
.eq-box li::before{position:absolute;left:0;top:7px;font-size:13px;}
.tip-box .box-label{color:var(--green);}
.eq-box.on li::before{content:'+';color:var(--green);}
.info-box p,.tip-box p{font-size:14.5px;line-height:1.75;margin:0;color:rgba(0,0,0,.6);}
.nota{font-size:12.5px;line-height:1.75;color:rgba(0,0,0,.45);font-weight:300;margin-top:22px;border-top:.5px solid rgba(0,0,0,.09);padding-top:16px;}
.section-alt{background:#F7F7F5;}
.section-dark{background:var(--dark);}
.sec-tag.green{color:var(--green);}
.art-content details{border-bottom:.5px solid #E0E0E0;padding:18px 0;}
.art-content details:first-of-type{border-top:.5px solid #E0E0E0;}
.art-content summary{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;color:#0D0D0D;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;line-height:1.2;}
.art-content summary::-webkit-details-marker{display:none;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,90px);align-items:start;}
.art-content summary::after{content:'+';font-size:21px;color:var(--green);font-weight:300;margin-left:16px;font-family:'DM Sans',sans-serif;flex-shrink:0;}
.art-content details[open] summary::after{content:'\2013';}
.txt p{font-size:clamp(14px,1.4vw,16px);line-height:1.9;color:rgba(0,0,0,.55);font-weight:300;margin-bottom:18px;}
.art-content details p{font-size:14.5px;margin:11px 0 0;}
.txt p strong{color:#0D0D0D;font-weight:500;}
.art-sidebar{position:sticky;top:96px;}
.txt a{color:var(--blue);text-decoration:none;border-bottom:.5px solid rgba(59,127,212,.35);}
.txt a:hover{color:var(--green);border-color:var(--green);}
.sidebar-box{border:.5px solid rgba(0,0,0,.12);padding:20px 22px;margin-bottom:18px;}
.sidebar-title{font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);margin-bottom:12px;font-weight:500;}
.hl strong{color:#0D0D0D;font-weight:500;}
/* El <style> de cada página trae una regla `nav{display:flex;align-items:center;
   justify-content:space-between}` pensada para el encabezado. Como el índice del
   artículo TAMBIÉN es un <nav>, heredaba align-items:center y los ítems, al ser
   hijos de un flex en columna, se encogían a su ancho y quedaban centrados: el
   índice se veía escalonado en las 68 notas que lo tienen. Se restituye el
   estiramiento y la alineación al inicio. */
.sidebar-toc{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:static;background:none;padding:0;border:0;}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:#E6E6E6;}
.toc-item{font-size:13.5px;line-height:1.5;color:rgba(0,0,0,.55);text-decoration:none;padding:7px 0;border-bottom:.5px solid rgba(0,0,0,.07);transition:color .2s,padding-left .2s;font-weight:300;}
.card{background:#fff;padding:clamp(24px,3vw,36px);position:relative;transition:background .2s;}
.toc-item:last-child{border-bottom:0;}
.card:hover{background:#F7F7F5;}
.toc-item:hover{color:var(--green);padding-left:5px;}
.card-n{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:34px;color:rgba(0,0,0,.05);line-height:1;position:absolute;top:16px;right:20px;}
.sidebar-cta{background:var(--dark);padding:24px 22px;}
.card h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(17px,1.6vw,20px);color:#0D0D0D;margin-bottom:9px;line-height:1.1;}
.sc-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;color:#fff;line-height:1.1;margin-bottom:9px;}
.card p{font-size:13px;line-height:1.7;color:rgba(0,0,0,.45);}
.sidebar-cta p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.5);font-weight:300;margin-bottom:16px;}
.sidebar-cta a.sc-wa{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;background:#25D366;color:#06090C;padding:11px 18px;text-decoration:none;font-weight:500;transition:background .2s;}
.steps::before{content:'';position:absolute;left:20px;top:0;bottom:0;width:.5px;background:linear-gradient(to bottom,var(--green),transparent);}
.sidebar-cta a.sc-wa:hover{background:#1EBE5A;}
.sidebar-cta a.sc-wa svg{width:14px;height:14px;fill:#06090C;flex-shrink:0;}
.related{background:#F7F7F5;padding:clamp(44px,5.5vw,72px) var(--pad);}
.step-b{padding-top:6px;}
.related-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(24px,2.8vw,34px);color:#0D0D0D;margin-bottom:26px;line-height:1;}
.step-b h4,.step-b h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(16px,1.5vw,18px);color:#0D0D0D;margin-bottom:5px;line-height:1.15;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:#E2E2E0;max-width:1240px;margin:0 auto;}
.step-b p{font-size:13px;line-height:1.7;color:rgba(0,0,0,.45);}
.ci-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:5px;}
.rel-card{background:#fff;padding:24px 26px 26px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:background .2s;}
.ci-val{font-size:14px;color:rgba(255,255,255,.75);}
.rel-card:hover{background:#FAFAF8;}
details:first-of-type{border-top:.5px solid #E0E0E0;}
.ci-val a{color:var(--green);text-decoration:none;}
.rel-cat{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--green);}
.ci-val a:hover{text-decoration:underline;}
summary::-webkit-details-marker{display:none;}
.rel-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;line-height:1.15;color:#0D0D0D;}
.rel-more{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(0,0,0,.35);margin-top:auto;padding-top:8px;}
.foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,50px);max-width:1240px;margin:0 auto clamp(30px,3.5vw,44px);}
@media(max-width:840px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px;}}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:rgba(255,255,255,.08);margin-top:26px;}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr;}}
.rel a{background:var(--dark);padding:20px 22px;text-decoration:none;transition:background .2s;display:block;}
.fs{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:.5px solid rgba(255,255,255,.12);border-radius:2px;transition:border-color .2s;}.fs svg{width:13px;height:13px;fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.5;transition:stroke .2s;}.fs:hover{border-color:rgba(255,255,255,.3);}
.rel a:hover{background:#0D1117;}
.foot-sub{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.28);margin:5px 0 16px;}
.rel span{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--green);display:block;margin-bottom:7px;}
.rel strong{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;color:#fff;letter-spacing:.3px;}
.foot-desc{font-size:13px;line-height:1.7;color:rgba(255,255,255,.35);font-weight:300;max-width:34ch;}
.foot-col h4,.foot-col h2{font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--green);margin-bottom:14px;font-family:'DM Sans',sans-serif;font-weight:500;}
.foot-col a,.foot-col span{display:block;font-size:13px;line-height:1.55;color:rgba(255,255,255,.42);text-decoration:none;padding:5px 0;transition:color .2s;font-weight:300;}
.ci:first-child{border-top:.5px solid rgba(255,255,255,.07);}
.foot-col a:hover{color:var(--green);}
.ci-l{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:5px;}
.ci-v{font-size:14px;color:rgba(255,255,255,.72);}
.ci-v a{color:var(--green);text-decoration:none;}
.fs:hover svg{stroke:var(--green);}
.nav-social a.wa svg,.fs.wa svg{fill:rgba(255,255,255,.35);stroke:none;transition:fill .2s;}
.fs.wa:hover{border-color:#25D366;}
.foot-bottom{max-width:1240px;margin:0 auto;padding-top:22px;border-top:.5px solid rgba(255,255,255,.07);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;}
.fs.wa:hover svg{fill:#25D366;}
.foot-back{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35);text-decoration:none;transition:color .2s;}@media(min-width:761px){.foot-bottom{padding-right:70px;}}.foot-back:hover{color:var(--green);}
.art-author{display:flex;align-items:center;gap:14px;margin-top:40px;padding-top:22px;border-top:.5px solid rgba(0,0,0,.12);}
.aut-ini{width:46px;height:46px;flex-shrink:0;background:var(--dark);color:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:17px;letter-spacing:.5px;}
.aut-txt{min-width:0;}
.wa-float:hover{transform:scale(1.07);}
.wa-float svg{width:26px;height:26px;fill:#fff;}
.aut-lbl{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);margin-bottom:4px;}
.aut-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#0D0D0D;line-height:1.15;}
[data-reveal="left"]{transform:translateX(-28px);}
.aut-role{font-size:12.5px;line-height:1.5;color:rgba(0,0,0,.45);font-weight:300;margin-top:2px;}
[data-reveal="right"]{transform:translateX(28px);}
[data-reveal="up"]{transform:translateY(22px);}@media(max-width:760px){[data-reveal="left"],[data-reveal="right"]{transform:translateY(22px);}}
[data-reveal].shown{opacity:1;transform:none;}
[data-reveal][style*="--d"]{transition-delay:var(--d);}

/* ═══════════════════════════════════════════════════════════
   ACCESIBILIDAD DE CONTRASTE — 23/08/2026
   Los colores de acento funcionan sobre fondo oscuro (4,9 a 8,2)
   pero fallan como texto sobre fondo claro: --blue da 3,84 y
   --green 2,33. Se agregan variantes de texto y se suben las
   opacidades que estaban por debajo de 4,5:1.
   Los selectores llevan `body` delante para ganarle a las reglas
   de una sola clase que viven en el <style> de cada página.
   ═══════════════════════════════════════════════════════════ */
:root{--blue-txt:#3674C1;--green-txt:#007E97;}

/* texto tenue sobre fondo oscuro: .2–.35 → .45 */
body .foot-copy{color:rgba(255,255,255,.45);}
body .foot-sub{color:rgba(255,255,255,.45);}
body .foot-desc{color:rgba(255,255,255,.45);}
body .foot-back{color:rgba(255,255,255,.45);}
body .logo-sub{color:rgba(255,255,255,.45);}
body .ci-l,body .ci-label{color:rgba(255,255,255,.45);}
body .strip-l{color:rgba(255,255,255,.45);}
body .contact-p{color:rgba(255,255,255,.48);}
body .foot-col a,body .foot-col span{color:rgba(255,255,255,.48);}

/* texto tenue sobre fondo claro: .3–.45 → .53 */
body .svc-p{color:rgba(0,0,0,.53);}
body .bcard-exc{color:rgba(0,0,0,.53);}
body .bcard-date{color:rgba(0,0,0,.53);}

/* acentos como texto chico sobre fondo claro */
body .sec-tag{color:var(--green-txt);}
body .sec-tag.green{color:var(--green-txt);}
body .svc-more,body .bcard-more{color:var(--blue-txt);}
body .bcard-cat{color:var(--green-txt);}

/* ── segunda ronda: el resto del texto secundario ── */
body .foot-copy,body .foot-sub,body .foot-desc,body .foot-back,body .logo-sub,
body .ci-l,body .ci-label,body .strip-l,body .hero-p,body .cta-p,
body .art-meta span,body .c-soc span{color:rgba(255,255,255,.46);}
/* Los ítems del menú se separan de esa regla: eran texto de 10 px a 4,65:1,
   justo en el mínimo de WCAG AA, y se leían apagados. A .72 dan 10,27:1. */
body .drop-btn{color:rgba(255,255,255,.72);}
body .contact-p,body .foot-col a,body .foot-col span{color:rgba(255,255,255,.5);}

body .svc-p,body .bcard-exc,body .bcard-date,body .eq-lead,body .nota,
body .aut-role,body .card p,body .post-body p,body .rel-more,body .post-more,
body .filter-label,body .filter-btn,body .post-meta span,body .about-badge span{color:rgba(0,0,0,.54);}

body .rel-cat,body .post-cat{color:var(--green-txt);}
body .box-label,body .aut-lbl,body .sidebar-title{color:var(--blue-txt);}

/* ── tercera ronda: los últimos, y ajuste fino de las variantes ── */
:root{--blue-txt:#3169B3;--green-txt:#00768D;}
body .breadcrumb a{color:rgba(255,255,255,.55);}
body .nav-links a{color:rgba(255,255,255,.72);}   /* estaba en .55: dentro del mismo menú había dos grises distintos */
body .eq-lead{color:rgba(0,0,0,.58);}
body .hero-sub,body .art-lead{color:rgba(255,255,255,.62);}
body .art-content a{color:var(--blue-txt);}
body .txt,body .art-content p{color:rgba(0,0,0,.72);}

/* ── cuarta ronda: reglas que necesitaban más especificidad ── */
body .eq-box .eq-lead{color:rgba(0,0,0,.58);}
body details p{color:rgba(0,0,0,.58);}

/* ═══════════════════════════════════════
   SEGUNDO NIVEL DEL MENÚ
   Mismo patrón que el primer nivel: por clic, no por hover, para que
   se comporte igual en escritorio, en táctil y con teclado.
═══════════════════════════════════════ */
.has-sub{position:relative;}
.sub-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;
  font-family:'DM Sans',sans-serif;
  padding:11px 22px;
  font-size:13px;letter-spacing:.2px;text-transform:none;
  color:#0D0D0D;background:none;border:0;cursor:pointer;
  transition:background .15s,padding-left .15s;
}
.sub-btn:hover,.sub-btn:focus-visible{background:#F2F2F0;padding-left:27px;color:#000;outline:none;}
.sub-btn .caret{
  width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  flex-shrink:0;transform:rotate(90deg);transition:transform .2s;
}
.sub-btn[aria-expanded="true"] .caret{transform:none;}
/* Abre hacia la izquierda: Proyecto es el último grupo y a la derecha no hay lugar. */
.dropdown .submenu{
  position:absolute;top:-8px;right:100%;left:auto;
  min-width:250px;
  background:var(--drop-fondo,#fff);
  padding:8px 0;
  box-shadow:0 12px 40px -8px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateX(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:130;
}
.has-sub.open > .submenu{opacity:1;visibility:visible;transform:none;}
/* Cierre de cada desplegable: el catálogo completo, siempre a un clic. */
.dropdown .dd-todos{
  border-top:.5px solid rgba(0,0,0,.1);
  margin-top:6px;padding-top:14px;
  color:var(--blue,#3B7FD4);font-weight:500;
}
@media(prefers-reduced-motion:reduce){
  .dropdown .submenu,.sub-btn .caret{transition:none;}
}
@media(max-width:900px){
  /* En móvil el segundo nivel es una sublista indentada, no un panel lateral. */
  .sub-btn{
    padding:12px var(--pad) 12px calc(var(--pad) + 14px);
    color:rgba(255,255,255,.62);
  }
  .sub-btn:hover,.sub-btn:focus-visible{
    background:rgba(255,255,255,.05);color:#fff;padding-left:calc(var(--pad) + 20px);
  }
  .sub-btn .caret{transform:none;}
  .sub-btn[aria-expanded="true"] .caret{transform:rotate(180deg);}
  .dropdown .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    display:none;min-width:0;box-shadow:none;
    background:#111820;padding:2px 0 6px;
  }
  .has-sub.open > .submenu{display:block;}
  .dropdown .submenu a{padding-left:calc(var(--pad) + 30px);}
  .dropdown .submenu a:hover,.dropdown .submenu a:focus-visible{padding-left:calc(var(--pad) + 36px);}
  .dropdown .dd-todos{border-top-color:rgba(255,255,255,.08);color:var(--green,#00B4D8);}
}

/* ═══════════════════════════════════════
   CONTRASTE DE LOS DESPLEGABLES
   `body .nav-links a` de la ronda de contraste pintaba de blanco TODOS los
   enlaces del menú, incluidos los del panel desplegable, que es blanco.
   Resultado: los desplegables eran ilegibles en escritorio. Se reponen los
   colores del panel, con más especificidad que aquella regla.
═══════════════════════════════════════ */
body .dropdown a{color:#0D0D0D;}
body .dropdown a:hover,body .dropdown a:focus-visible{color:#000;}
body .nav-links .dropdown a.active{color:var(--green-txt);font-weight:500;}
body .dropdown .dd-todos{color:var(--blue-txt);}
body .nav-links > li > a.active,body .drop-btn.active{color:var(--green);}
@media(max-width:900px){
  /* En móvil el panel es oscuro y el texto vuelve a ser claro. */
  body .dropdown a{color:rgba(255,255,255,.62);}
  body .dropdown a:hover,body .dropdown a:focus-visible{color:#fff;}
  body .nav-links .dropdown a.active{color:var(--green);}
  body .dropdown .dd-todos{color:var(--green);}
}

/* ═══════════════════════════════════════
   TABLAS Y DESTACADOS DE LAS NOTAS
   `.tabla-wrap` y `.destacado` se venían usando en el cuerpo de las notas sin
   que ninguna hoja los definiera: las tablas salían sin estilo y el destacado
   era un párrafo más. Se les da el mismo lenguaje que `.norma-tabla`.
═══════════════════════════════════════ */
.tabla-wrap{overflow-x:auto;max-width:100%;margin:26px 0;-webkit-overflow-scrolling:touch;}
/* El cuerpo del artículo es celda de grid: sin min-width:0 no puede achicarse
   por debajo de su contenido y la tabla desborda la página en vez de scrollear
   dentro de su propio contenedor. */
.art-content{min-width:0;}
.tabla-wrap table{width:100%;min-width:460px;border-collapse:collapse;}
.tabla-wrap th{
  text-align:left;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--blue-txt,#3169B3);font-weight:500;
  padding:0 14px 11px 0;border-bottom:1px solid rgba(0,0,0,.12);
}
.tabla-wrap td{
  font-size:14px;line-height:1.7;color:rgba(0,0,0,.62);font-weight:300;
  padding:13px 14px 13px 0;border-bottom:.5px solid rgba(0,0,0,.08);
  vertical-align:top;
}
.tabla-wrap td:last-child,.tabla-wrap th:last-child{padding-right:0;}
.tabla-wrap td strong{color:#0D0D0D;font-weight:500;}

.destacado{
  background:#F4F6F6;
  border-left:2px solid var(--green-txt,#00768D);
  padding:18px 22px;margin:26px 0;
}
.destacado > :first-child{margin-top:0;}
.destacado > :last-child{margin-bottom:0;}
.destacado p{margin:0;}
.destacado p + p{margin-top:11px;}


/* ─────────────────────────────────────────────────────────────────
   CAJA DE ADVERTENCIA

   .warning-box se usa en 5 notas desde antes de esta tanda y nunca tuvo
   regla: renderizaba como un <div> pelado, así que la advertencia se leía
   como un párrafo más. Sigue el mismo patrón que .info-box y .tip-box —
   fondo, borde izquierdo y etiqueta— con el color de alerta, que es lo
   único que la diferencia de sus hermanas.
   ───────────────────────────────────────────────────────────────── */
.warning-box{background:#FCF6F0;border-left:3px solid #C05621;padding:22px 24px;margin:30px 0;}
.warning-box .box-label{color:#C05621;}
body .warning-box .box-label{color:#A8460F;}
.warning-box p{font-size:14.5px;line-height:1.75;margin:0;color:rgba(0,0,0,.6);}
.warning-box p + p{margin-top:12px;}


/* ─────────────────────────────────────────────────────────────────
   ETIQUETA DE COLUMNA EN LA TABLA APILADA

   Abajo de 620px `.norma-tabla` se apila: cada celda pasa a ser un
   bloque y el <thead> se oculta. Sin esta regla el lector ve cuatro
   valores sueltos —«≤ 200 mg/l, ≤ 50 mg/l, ≤ 200 mg/l»— sin saber a
   qué destino corresponde cada uno, que en una tabla de límites
   legales es peor que no mostrarla. El atributo data-l de cada celda
   lleva el nombre de la columna y acá se imprime delante del valor.

   Estaba escrita a mano en el <style> de cuatro notas y faltaba en la
   quinta. Vive acá para que cualquier tabla con data-l la herede.
   ───────────────────────────────────────────────────────────────── */
@media(max-width:620px){
  .norma-tabla td[data-l]::before{content:attr(data-l) " · ";color:var(--blue);font-weight:500;font-size:12px;letter-spacing:.5px;}
  /* El min-width:460px de `.tabla-wrap table` protege las columnas mientras la
     tabla ES una tabla. Abajo de 620px ya no lo es: cada celda pasa a bloque y
     no queda ninguna columna que proteger. Lo único que hacía el mínimo era
     dejar la tabla en 460px dentro de un contenedor de 342px, así que el texto
     de cada celda se cortaba en el borde de la pantalla y había que scrollear
     de costado para leerlo. Medido en un iPhone de 390px: `.tabla-wrap` 342,
     tabla 460. Afecta a todas las tablas del sitio, no sólo a las nuevas. */
  .tabla-wrap table{min-width:0;}
}


/* Aclaración menor dentro de una celda de tabla: el nombre coloquial de un
   instrumento, o el caso al que aplica la fila. Se define acá y no en el
   <style> de la nota por la misma razón que .warning-box y .tabla-wrap:
   una clase usada en el HTML sin regla en ninguna hoja renderiza como texto
   normal y la jerarquía visual que se quiso dar desaparece sin aviso. */
.mini{display:block;font-size:12px;line-height:1.5;color:rgba(0,0,0,.42);font-weight:300;margin-top:3px;}


/* Dos reglas que estaban en el <style> de casi todas las páginas que las usan
   y faltaban en tres: `.sec-head` en servicios/tren-de-tratamiento y
   `.foot-socials` en las dos páginas de permisos de vuelco. Mismo valor, en la
   hoja compartida, que es donde correspondía. */
.sec-head{margin-bottom:clamp(48px,6vw,72px);}
.foot-socials{display:flex;gap:8px;margin-top:14px;}


/* ═════════════════════════════════════════════════════════════════
   MENÚ — TAMAÑO DE ÍCONOS Y COMPORTAMIENTO EN MÓVIL

   Estas reglas vivían SÓLO en el <style> inline de cada página. Las dos
   páginas de permisos de vuelco salieron de otra plantilla y se quedaron sin
   ellas: los íconos sociales se dibujaban a 28×28 px dentro de una caja de
   30×30 —de ahí los «logos gigantes»— y en móvil no aparecía la hamburguesa,
   con lo cual la página no tenía menú.

   Suben acá para que ninguna página dependa de qué plantilla la generó. Las
   159 que ya las traen inline no cambian: son las mismas declaraciones y el
   <style> de la página va después de esta hoja.
   ═════════════════════════════════════════════════════════════════ */
.nav-social svg{width:13px;height:13px;fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.5;transition:stroke .2s;}
.nav-social a.wa svg{fill:rgba(255,255,255,.35);stroke:none;transition:fill .2s;}

@media(max-width:640px){
  .nav-social,.nav-back{display:none;}
}
@media(max-width:900px){
  .nav-toggle{display:flex;}
  .nav-links{
    display:block;
    position:fixed;top:69px;left:0;right:0;
    max-height:calc(100dvh - 69px);overflow-y:auto;
    background:#06090C;
    border-top:.5px solid rgba(255,255,255,.08);
    padding:8px 0 28px;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
    z-index:99;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none;}
  .nav-links > li{display:block;border-bottom:.5px solid rgba(255,255,255,.05);}
  .nav-links > li > a,.drop-btn{
    width:100%;padding:16px var(--pad);font-size:12px;letter-spacing:2px;
    justify-content:space-between;
  }
  .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    display:none;min-width:0;box-shadow:none;
    background:#0D1117;padding:4px 0 10px;
  }
  .has-drop.open .dropdown{display:block;}
  .dropdown a{color:rgba(255,255,255,.62);padding:12px var(--pad) 12px calc(var(--pad) + 14px);font-size:13px;}
  .dropdown a:hover,.dropdown a:focus-visible{background:rgba(255,255,255,.05);color:#fff;padding-left:calc(var(--pad) + 20px);}
  .nav-social{display:flex;}
  .nav-cta{display:none;}
}

/* Títulos de tarjeta que son enlaces. Existían desde agosto en gestion-de-residuos
   y plantas-de-tratamiento sin ninguna regla que los cubriera: el navegador los
   pintaba con su azul por defecto y subrayados, adentro de un encabezado que en
   el resto del sitio es #0D0D0D. */
.card h3 a,.eq-box h3 a,.card p a,.eq-box li a,.hl a,details p a{color:inherit;text-decoration:none;border-bottom:.5px solid rgba(59,127,212,.4);transition:color .2s,border-color .2s;}
.card h3 a:hover,.eq-box h3 a:hover,.card p a:hover,.eq-box li a:hover,.hl a:hover,details p a:hover{color:var(--blue);border-bottom-color:var(--blue);}
body .eq-box.on h3 a{border-bottom-color:rgba(46,184,154,.5);}
body .eq-box.on h3 a:hover{color:var(--green);border-bottom-color:var(--green);}

/* Línea de reuso bajo el epígrafe de un esquema. Es la forma más barata
   de convertir un dibujo en enlaces entrantes: quien lo reproduce cita. */
.esq-lic{display:block;margin-top:6px;font-size:11.5px;line-height:1.55;font-style:italic;opacity:.72;}
