/* =============================================================================
   piel.css - Keystone Tax and Accounting. El prototipo CALLADO.

   Los otros dos son cinematograficos. Este no debe serlo, y esa es justo la
   prueba que le faltaba al sistema: saber contenerse. La banda de
   Profesionales lo dice en una linea — ahi la mocion sobra antes que falta.

   La idea: un DOCUMENTO bien compuesto. Margenes generosos, jerarquia
   tipografica de verdad, numeros bien puestos y casi ninguna fotografia
   debajo del heroe. Cero apretones de manos de banco de imagenes.

   Contrastes medidos ANTES de escribir una linea:
     tinta   #141A17 sobre papel #F6F4EF -> 16,06:1
     verde   #1E5B45 sobre papel         ->  7,24:1   (y papel encima, 7,24)
     verde   #5FC49E sobre tinta         ->  8,30:1
     apagado #5A6360 sobre papel         ->  5,64:1
     apagado #9FA8A4 sobre tinta         ->  7,24:1
   Y sobre la FOTO del heroe:
     tinta sobre el yeso #E7E3DF         -> 13,83:1
     tinta sobre el suelo de roble       ->  3,68:1  ← por eso el velo ACLARA
   ========================================================================== */

/* -- las tipografias, alojadas aqui ------------------------------------
   Newsreader para titulares: cara de periodico serio, no de revista, y con
   eje optico, asi que a tamano grande el contraste del tipo sube solo.
   Public Sans para el texto: se dibujo para el sistema de diseno del
   gobierno de Estados Unidos, literalmente para que un formulario publico
   se entienda. En una oficina de impuestos la letra tiene una razon que se
   puede decir en voz alta, igual que Bodoni era italiano en Gumba's.      */
@font-face{
  font-family:"Newsreader"; src:url(../fonts/newsreader-latin.woff2) format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Public Sans"; src:url(../fonts/public-sans-latin.woff2) format("woff2");
  font-weight:400 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --text:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --c-ink:#141A17;           /* casi negro con una gota de verde */
  --c-paper:#F6F4EF;         /* papel calido, como un documento bien impreso */
  --c-surface:#1C2320;
  --c-deep:#0E1311;
  --c-muted-on-dark:#9FA8A4;
  --c-muted-on-light:#5A6360;

  --c-accent:#1E5B45;        /* verde profundo, no el azul marino de siempre */
  --on-accent:#F6F4EF;       /* lo que va ENCIMA del verde -> 7,24 */
  --c-accent-claro:#5FC49E;  /* tinta de acento en tema oscuro -> 8,30 */
  --c-accent-oscuro:#1E5B45; /* tinta de acento en tema claro  -> 7,24 */

  --c-ink-15:rgba(20,26,23,.15);
  --c-paper-15:rgba(246,244,239,.15);
  --c-paper-25:rgba(246,244,239,.25);

  --c-accent-t:#1E5B45;
  --hero-fondo:#E7E3DF;      /* el yeso: el primer pintado ya es el muro */

  /* El heroe abre en CLARO, que es la tercera apertura distinta del Estudio.
     La tinta va oscura, y el velo ACLARA por la izquierda en vez de oscurecer:
     asi el titular se apoya siempre en papel, tambien donde por debajo hay
     suelo de roble -que con tinta oscura daria 3,68:1-. */
  --hero-ink:#141A17;
  --hero-velo:linear-gradient(96deg,
     rgba(246,244,239,.95) 0%, rgba(246,244,239,.88) 26%,
     rgba(246,244,239,.52) 44%, rgba(246,244,239,.06) 62%,
     rgba(246,244,239,0) 100%);
}
.dolly__escena{background:var(--hero-fondo)}
body{-webkit-font-smoothing:auto}   /* una serif de texto no quiere adelgazarse */

/* -- el heroe quieto ---------------------------------------------------- */
.dolly{height:150vh}
@media (max-width:991px){ .dolly{height:130vh} }
.dolly__ui{place-items:center start; text-align:left;
  padding-inline:var(--canal) 0}
.dolly__titulo{font-size:clamp(2.4rem,5.6vw,4.6rem); font-weight:500;
  line-height:1.02; letter-spacing:-.028em; max-width:12ch; text-align:left}
/* SIN opacidad encima: es la trampa que este proyecto ya ha pagado cinco
   veces. El tono se elige, no se atenua. */
.dolly__pie{justify-content:flex-start; padding-inline:var(--canal);
  bottom:var(--s7); color:#3B4341}
/* El destino del rotulo va CENTRADO en la columna del titular, no pegado al
   canto: el motor calcula el vuelo de centro a centro, asi que con el destino
   en el borde el rotulo escalado se salia 60 px por la izquierda. */
.dolly__destino{left:27%; top:25%; transform:translate(-50%,-50%)}
@media (max-width:760px){
  .dolly__titulo{font-size:clamp(2rem,8vw,3rem); max-width:11ch}
  .dolly__destino{left:42%; top:20%}
}

/* -- los servicios, en dos mitades -------------------------------------- */
/* No es decoracion: es la arquitectura de conversion del negocio. Quien
   llega buscando un embargo del IRS no compra lo mismo que quien viene a
   hacer su declaracion, y hoy su sitio los mezcla. */
.mitad{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:var(--s6) var(--s7); align-items:start}
.mitad__intro h2{margin-bottom:var(--s4)}
.mitad__intro p{color:var(--fg-soft); max-width:34ch}
.lista{display:grid; gap:0; margin:0; padding:0; list-style:none}
.lista li{display:grid; grid-template-columns:auto 1fr; gap:var(--s4);
  align-items:baseline; padding:var(--s3) 0; border-bottom:1px solid var(--hairline)}
.lista li:first-child{border-top:1px solid var(--hairline)}
.lista b{font-family:var(--text); font-weight:500; font-size:var(--t-1);
  letter-spacing:.12em; color:var(--c-accent-t); font-variant-numeric:tabular-nums}
.lista span{font-family:var(--display); font-size:var(--t1); font-weight:400;
  letter-spacing:-.012em; line-height:1.2}
@media (max-width:860px){ .mitad{grid-template-columns:minmax(0,1fr); gap:var(--s5)} }

/* El panel del bloque partido va CLARO en este prototipo: es el unico de los
   tres que abre en claro, y una isla oscura ahi pelearia con la banda oscura
   de «cuando algo salio mal», que es la que si tiene que destacar. */
:root{
  --split-bg:#EDEAE2;
  --split-ink:#141A17;
  --split-soft:#5A6360;
  --split-line:rgba(20,26,23,.16);
  --split-accent:#1E5B45;
  --mapa-fondo:#EFEDE6;
}

/* -- las dos oficinas ---------------------------------------------------- */
.oficinas{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5)}
.oficina{padding:var(--s5); border:1px solid var(--hairline); border-radius:var(--r-md)}
.oficina h4{margin-bottom:var(--s3)}
.oficina p{margin:0 0 var(--s2); color:var(--fg-soft)}
.oficina a{color:var(--c-accent-t)}
@media (max-width:760px){ .oficinas{grid-template-columns:minmax(0,1fr)} }

/* -- el aviso en ambar de este rubro es VERDE, y con su propio peso ------ */
.aviso{color:var(--c-accent-t); font-weight:500}