/* Estilos de los documentos legales (terminos, privacidad, compromiso).
   Archivo aparte y no <style> en linea como index.html: son tres paginas que
   comparten TODO el diseno, y tenerlo una sola vez es la unica forma de que no
   se separen con el tiempo. Los tokens son los mismos de index.html a proposito:
   un documento legal que no se parece al sitio se lee como pegado de otra parte. */

:root{
  --pine:#1c5c49; --pine-lt:#7fc9ae; --pine-dk:#15493a;
  --night:#0d1110; --paper:#f7f7f5;
  --ink:#121514; --ink-2:#4a5250; --ink-3:#666e6b;
  --line:#d8d8d2; --line-dk:#2a3331;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem; --s8:4rem;
  --gutter:clamp(1.25rem,4.5vw,4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* --ink-3 es el gris de los rotulos chicos. Vale #666e6b y no algo mas claro
     porque es el valor mas tenue que aun da 4.5:1 sobre --paper Y sobre #eeeeea,
     los dos fondos claros del sitio. Aclararlo rompe AA en el pie. */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Transicion entre documentos (View Transitions API) ─────────────────────
   Ir de la portada a /terminos dejaba un parpadeo en blanco. Ahora el contenido
   cruza en fundido y la barra oscura con la marca NO se mueve: se queda
   anclada mientras el resto cambia.
   Eso es lo que hace view-transition-name. No es una animacion: es decirle al
   navegador que .brand de esta pagina y .brand de la otra son el MISMO
   elemento, asi que en vez de fundir uno sobre otro, lo transporta. El nombre
   tiene que ser unico por pagina, y .top y .brand aparecen una sola vez en cada
   una de las ocho.
   Sin soporte —hoy Firefox— no pasa absolutamente nada: navega como siempre.
   ⚠ Este bloque esta DUPLICADO en index.html y en legal.css. La portada lleva
   su CSS en linea y las internas cargan legal.css, igual que ya pasa con .top y
   .brand. Si se toca uno, hay que tocar el otro. */
@view-transition{navigation:auto}
.top{view-transition-name:barra}
.brand{view-transition-name:marca}
/* El que sale se va con un desenfoque corto; el que entra llega nitido. Es el
   unico blur que cubre toda la pantalla, y se banca: lo que se desenfoca es la
   CAPTURA de la pagina, una textura ya rasterizada, no el DOM vivo. Por eso 6px
   y 280 ms y no mas: a partir de ahi se nota el repintado en un telefono barato
   y el efecto deja de ser gratis. */
::view-transition-old(root){animation:vt-sale .28s var(--ease) both}
::view-transition-new(root){animation:vt-entra .32s var(--ease) both}
@keyframes vt-sale{to{opacity:0;filter:blur(6px)}}
@keyframes vt-entra{from{opacity:0;filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

body{margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;line-height:1.14;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--pine);outline-offset:4px}
.night :focus-visible{outline-color:var(--pine-lt)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:var(--s1);z-index:50;background:#fff;color:var(--ink);padding:.6rem 1rem}

.grid{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Barra ---------- */
.night{background:var(--night);color:#eef1ef}
.top{position:sticky;top:0;z-index:30;background:var(--night);color:#eef1ef;
  padding-block:.65rem;border-bottom:1px solid transparent}
.top.pegada{border-bottom-color:var(--line-dk)}
.top .grid{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  min-height:44px;
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:700;font-size:1.05rem;letter-spacing:.06em;white-space:nowrap}
.brand .isotipo{flex:none;margin-bottom:.1em}
.brand em{font-style:normal;font-weight:400;opacity:.62}
/* min-height 44px: minimo tactil. Ver la misma nota en index.html. */
.volver{text-decoration:none;font-size:.8125rem;color:#b9c4c0;white-space:nowrap;
  padding:.45rem .5rem;min-height:44px;display:inline-flex;align-items:center;
  transition:color .18s var(--ease)}
.volver:hover{color:#eef1ef}
@media (min-width:48rem){ .volver{font-size:.875rem} }
@media (max-width:47.99rem){ .brand{font-size:.95rem} }
[id]{scroll-margin-top:4.5rem}

/* ---------- Portada del documento ---------- */
.doc-cab{padding-block:clamp(var(--s6),8vw,var(--s8)) clamp(var(--s6),7vw,4.5rem);
  position:relative;overflow:hidden}
.doc-cab::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-dk) 1px,transparent 1px),linear-gradient(90deg,var(--line-dk) 1px,transparent 1px);
  background-size:clamp(48px,7vw,88px) clamp(48px,7vw,88px);
  -webkit-mask-image:radial-gradient(110% 85% at 82% 8%,#000 0%,transparent 66%);
  mask-image:radial-gradient(110% 85% at 82% 8%,#000 0%,transparent 66%)}
.doc-cab .grid{position:relative}
.doc-cab .rotulo{font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:#93a7a0}
.doc-cab h1{margin-top:var(--s3);font-weight:600;letter-spacing:-.024em;max-width:18ch;
  font-size:clamp(2rem,1.3rem + 3vw,3.6rem)}
.doc-cab .sumario{margin-top:var(--s4);max-width:56ch;color:#b9c4c0;
  font-size:clamp(1.02rem,1rem + .3vw,1.18rem)}

/* Version y vigencia arriba y no en letra chica al pie: es lo primero que mira
   quien tiene que decidir si el documento sirve para la carpeta de una licitacion. */
.vigencia{margin-top:clamp(var(--s6),6vw,3.5rem);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s3) clamp(1rem,2.5vw,2rem)}
.vigencia div{padding-top:var(--s2);border-top:1px solid var(--line-dk)}
.vigencia dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#93a7a0;margin-bottom:.45rem}
.vigencia dd{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:1.1rem;font-variant-numeric:tabular-nums}

/* ---------- Cuerpo: indice fijo + texto ---------- */
.doc{padding-block:clamp(var(--s6),7vw,var(--s8)) clamp(var(--s8),10vw,6rem)}
.doc .grid{display:grid;gap:var(--s6) clamp(1.5rem,4vw,4rem)}
@media (min-width:64rem){ .doc .grid{grid-template-columns:15rem minmax(0,1fr)} }

.indice{font-size:.875rem}
@media (min-width:64rem){ .indice{position:sticky;top:5rem;align-self:start;max-height:calc(100vh - 7rem);overflow-y:auto} }
.indice p{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line);margin-bottom:var(--s2)}
.indice ol{list-style:none;margin:0;padding:0;counter-reset:idx}
.indice li{counter-increment:idx}
.indice a{display:grid;grid-template-columns:1.9rem 1fr;gap:.3rem;
  padding:.4rem 0;text-decoration:none;color:var(--ink-2);line-height:1.35;
  transition:color .18s var(--ease)}
.indice a::before{content:counter(idx) ".";color:var(--ink-3);font-variant-numeric:tabular-nums}
.indice a:hover{color:var(--pine)}
.indice a:hover::before{color:var(--pine)}

.cuerpo{max-width:70ch;counter-reset:sec}
.cuerpo > section{counter-increment:sec;padding-top:clamp(var(--s6),5vw,3.25rem)}
.cuerpo > section:first-child{padding-top:0}
.cuerpo > section > h2{display:grid;grid-template-columns:2.4rem 1fr;gap:.4rem;
  font-weight:600;letter-spacing:-.016em;font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.cuerpo > section:first-child > h2{padding-top:0;border-top:0}
.cuerpo > section > h2::before{content:counter(sec) ".";color:var(--pine);
  font-variant-numeric:tabular-nums;font-size:.72em;padding-top:.32em}
.cuerpo h3{margin-top:var(--s4);font-weight:600;font-size:1.08rem;letter-spacing:-.008em}
.cuerpo p{margin-top:var(--s3)}
.cuerpo h2 + p,.cuerpo h3 + p{margin-top:var(--s2)}
.cuerpo a:not(.btn){color:var(--pine);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:#a8c9bc}
.cuerpo a:not(.btn):hover{text-decoration-color:var(--pine)}
.cuerpo strong{font-weight:600}

.cuerpo ul,.cuerpo ol.letras{margin:var(--s3) 0 0;padding:0;list-style:none}
.cuerpo ul > li,.cuerpo ol.letras > li{position:relative;padding-left:1.4rem;margin-top:var(--s2)}
.cuerpo ul > li::before{content:"";position:absolute;left:.28rem;top:.72em;
  width:.34rem;height:1px;background:var(--pine)}
.cuerpo ol.letras{counter-reset:ltr}
.cuerpo ol.letras > li{counter-increment:ltr}
.cuerpo ol.letras > li::before{content:counter(ltr,lower-alpha) ")";position:absolute;left:0;top:0;
  color:var(--pine);font-size:.9em}

/* Definiciones: el termino manda, la glosa se subordina. */
.defs{margin:var(--s3) 0 0}
.defs > div{padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid var(--line)}
.defs > div:first-child{margin-top:0}
.defs dt{font-weight:600}
.defs dd{margin:.35rem 0 0;color:var(--ink-2)}
/* El correo de la ficha de identificacion esta solo en su linea: es un objetivo
   tactil de verdad y va a 44px. Los enlaces DENTRO de un parrafo no se tocan:
   WCAG 2.5.5 exime los objetivos en linea dentro de un bloque de texto, y
   estirarlos romperia el interlineado del documento. */
.defs dd a{display:inline-flex;align-items:center;min-height:44px}

/* Bloque destacado: lo que la empresa se obliga a hacer, distinto del texto que
   solo describe la ley. Quien lee tiene que poder separarlos de un vistazo. */
.pacto{margin-top:var(--s4);padding:clamp(1.15rem,3vw,1.75rem);
  background:#eef2ef;border-left:3px solid var(--pine)}
.pacto > p:first-child{margin-top:0}
.pacto .et{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pine);margin-bottom:.6rem;font-weight:500}
.pacto ul{margin-top:var(--s2)}

.aviso{margin-top:var(--s4);padding:clamp(1.15rem,3vw,1.75rem);
  background:var(--night);color:#d7dedb}
.aviso > p:first-child{margin-top:0}
.aviso .et{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pine-lt);margin-bottom:.6rem;font-weight:500}
.aviso strong{color:#eef1ef}
.aviso a{color:var(--pine-lt)!important;text-decoration-color:#4d7d6c!important}

/* Tablas: en movil la cabecera se pierde, asi que cada celda lleva su rotulo. */
.tabla{margin-top:var(--s4);width:100%;border-collapse:collapse;font-size:.9375rem}
.tabla caption{text-align:left;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);padding-bottom:var(--s2)}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:.75rem .9rem .75rem 0}
.tabla thead th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line)}
.tabla tbody tr + tr td{border-top:1px solid var(--line)}
.tabla tbody th{font-weight:600;border-top:inherit}
.tabla tbody tr + tr th{border-top:1px solid var(--line)}
@media (max-width:47.99rem){
  .tabla thead{position:absolute;left:-9999px}
  .tabla tbody tr{display:block;padding-block:var(--s3);border-top:1px solid var(--line)}
  .tabla tbody tr + tr td,.tabla tbody tr + tr th{border-top:0}
  .tabla tbody th,.tabla tbody td{display:block;padding:0;border-top:0}
  .tabla tbody td{margin-top:.5rem;color:var(--ink-2)}
  .tabla tbody td::before{content:attr(data-rot);display:block;
    font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.15rem}
}

/* Separador de partes: lo usa /compromiso, que es un documento con dos mitades
   de naturaleza distinta (integridad y servicio). Sin una division visible se
   leen como una sola lista larga y la segunda mitad se pierde. */
.parte{margin-top:clamp(var(--s8),8vw,4.5rem);padding-top:var(--s4);border-top:3px solid var(--pine)}
.cuerpo > .parte:first-child{margin-top:0;padding-top:0;border-top:0}
.parte .et{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--pine);font-weight:500}
.parte h2{margin-top:var(--s2);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem)}
.parte p{margin-top:var(--s3);max-width:62ch;color:var(--ink-2)}
/* El separador queda fuera del contador de secciones, que sigue corriendo.
   La seccion que viene justo despues no repite linea: ya la puso el separador. */
.cuerpo > .parte + section > h2{border-top:0;padding-top:0}

.indice ol + p{margin-top:var(--s4)}

.correo-enlace{font-family:"Source Serif 4",Georgia,serif;font-weight:600;
  font-size:1.15rem;color:var(--pine);text-decoration:none;
  border-bottom:2px solid var(--pine);transition:color .2s var(--ease)}
.correo-enlace:hover{color:var(--pine-dk)}

.firma{margin-top:clamp(var(--s8),8vw,4.5rem);padding-top:var(--s4);
  border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem}
.firma p + p{margin-top:.5rem}

/* Navegacion entre los tres documentos: el que llega a uno suele necesitar otro. */
.hermanos{background:#eeeeea;border-block:1px solid var(--line);padding-block:clamp(var(--s6),6vw,3.5rem)}
.hermanos .grid{display:grid;gap:var(--s3) clamp(1rem,2.5vw,2rem)}
@media (min-width:48rem){ .hermanos .grid{grid-template-columns:repeat(3,1fr)} }
.hermanos .et{grid-column:1/-1;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hermanos a{display:block;text-decoration:none;padding-top:var(--s3);border-top:1px solid #cfcfc8;
  transition:border-color .2s var(--ease)}
.hermanos a:hover{border-top-color:var(--pine)}
.hermanos a b{display:block;font-family:"Source Serif 4",Georgia,serif;font-weight:600;
  font-size:1.15rem;letter-spacing:-.01em}
.hermanos a span{display:block;margin-top:.4rem;color:var(--ink-2);font-size:.9375rem}
.hermanos a[aria-current="page"]{border-top-color:var(--pine)}
.hermanos a[aria-current="page"] b::after{content:" · está aquí";font-family:Inter,sans-serif;
  font-size:.75rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--pine)}

/* ---------- Pie ---------- */
footer{padding-block:var(--s6) var(--s4);border-top:1px solid var(--line);
  font-size:.875rem;color:var(--ink-2)}
footer .grid{display:grid;gap:var(--s4) clamp(1rem,2.5vw,2rem)}
@media (min-width:48rem){ footer .grid{grid-template-columns:2fr 1fr 1fr} }
footer .sello{font-family:"Source Serif 4",Georgia,serif;font-size:1rem;color:var(--ink)}
footer .sello span{display:block;margin-top:.5rem;font-family:Inter,sans-serif;
  font-size:.8125rem;color:var(--ink-2);max-width:32ch;line-height:1.5}
footer .col p{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.75rem}
footer .col a{display:flex;align-items:center;min-height:44px;
  text-decoration:none;transition:color .18s var(--ease)}
footer .col a:hover{color:var(--pine)}
footer .legal{grid-column:1/-1;padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;
  font-size:.8125rem;color:var(--ink-3)}
footer .legal a{display:inline-flex;align-items:center;min-height:44px}
.indice a{min-height:44px;align-items:center}

@media print{
  .top,.hermanos,.indice,.skip,footer .col{display:none!important}
  html{scroll-behavior:auto}
  body{background:#fff;font-size:10.5pt;line-height:1.45}
  .night,.doc-cab{background:#fff!important;color:#000!important}
  .doc-cab::before{display:none}
  .doc-cab .rotulo,.doc-cab .sumario,.vigencia dt{color:#444!important}
  .vigencia div{border-top-color:#999}
  .doc .grid{display:block}
  .cuerpo{max-width:none}
  .cuerpo > section{break-inside:auto;page-break-inside:auto}
  .cuerpo > section > h2,.cuerpo h3{break-after:avoid;page-break-after:avoid}
  .aviso{background:#fff!important;color:#000!important;border:1px solid #999}
  .aviso .et{color:#000!important}
  .aviso a{color:#000!important}
  .pacto{background:#f2f2f2!important}
  .cuerpo a:not(.btn){color:#000;text-decoration:none}
  /* En papel una URL sin su destino es una referencia muerta. */
  .cuerpo a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#555;word-break:break-all}
  .tabla{font-size:9.5pt}
  .tabla thead{position:static!important;left:auto!important}
}