/* =============================================================================
   piel.css - S&S Tire and Auto Repair. «La bahia a las siete de la manana».

   Lo que sale del negocio y solo de el. Se carga DESPUES de motor.css.
   Es el opuesto deliberado de Gumba's: alli negro CALIDO y luz de vela; aqui
   negro FRIO y hormigon, que es donde vive un taller.

   Contrastes medidos ANTES de escribir una linea:
     hormigon #EDECE8 sobre #12151A -> 15,48:1   (y al reves, igual)
     apagado  #9AA3AE sobre #12151A ->  7,16:1
     apagado  #5A6068 sobre #EDECE8 ->  5,37:1
     rojo     #B02E1E                             DECORATIVO
       · como fondo de boton, con hormigon encima ->  5,46:1
       · como TEXTO sobre hormigon                ->  5,46:1
       · como TEXTO sobre el negro frio           ->  2,84:1  ← FALLA
     tinta de acento en oscuro  #EA6D5A -> 5,95:1
     tinta de acento en claro   #9A2617 -> 6,67:1
   ========================================================================== */

/* -- las tipografias, alojadas aqui ------------------------------------
   Archivo es una grotesca de rotulo con eje de ANCHURA: se aprieta a 78 en
   los titulares y queda letra de taller, de las que se pintan en una pared,
   sin caer en las de siempre. IBM Plex Sans para el texto: se dibujo para
   documentacion tecnica y aqui lo que se lee son ocho servicios y un
   horario. Nada de Google Fonts en linea.                                */
@font-face{
  font-family:"Archivo"; src:url(../fonts/archivo-latin.woff2) format("woff2");
  font-weight:500 800; font-stretch:75% 100%; 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:"IBM Plex Sans"; src:url(../fonts/plex-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:"Archivo","Helvetica Neue","Arial Narrow",system-ui,sans-serif;
  --text:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --c-ink:#12151A;          /* negro frio: tecnico, taller */
  --c-paper:#EDECE8;        /* hormigon crudo */
  --c-surface:#1A1F26;
  --c-deep:#0C0F13;
  --c-muted-on-dark:#9AA3AE;
  --c-muted-on-light:#5A6068;

  --c-accent:#B02E1E;        /* el rojo de SUS cajas de herramienta */
  --on-accent:#EDECE8;       /* lo que va ENCIMA del rojo -> 5,46 (el negro da 2,84) */
  --c-accent-claro:#EA6D5A;  /* tinta de acento en tema oscuro -> 5,95 */
  --c-accent-oscuro:#9A2617; /* tinta de acento en tema claro  -> 6,67 */

  --c-ink-15:rgba(18,21,26,.15);
  --c-paper-15:rgba(237,236,232,.15);
  --c-paper-25:rgba(237,236,232,.25);

  --c-accent-t:#EA6D5A;
  /* El color del escenario es lo que se ve ANTES de que lleguen las fotos.
     El dominante medido de la foto es #596B72 y sobre el el texto del heroe
     da 4,71 -pasa por los pelos-. Se oscurece hasta 7,72 para que ese primer
     fotograma tambien tenga margen: es un color elegido, no la foto. */
  --hero-fondo:#3E4A50;

  --amarillo:#E8B33A;        /* la linea pintada del suelo. DECORATIVO */
}
.dolly__escena{background:var(--hero-fondo)}

/* Los titulares se aprietan: es letra de rotulo, no de revista. */
h1,h2,h3{font-stretch:78%; font-weight:700; letter-spacing:-.015em}
h4{font-stretch:84%; font-weight:600}
.dolly__titulo{font-stretch:76%; font-weight:800; letter-spacing:-.02em}

/* -- los ocho servicios, como una orden de trabajo ---------------------- */
.taller{display:grid; grid-template-columns:minmax(0,22em) minmax(0,1fr);
  gap:var(--s7); align-items:start}
.rueda{position:sticky; top:calc(var(--barra) + var(--s5))}
.rueda svg{width:100%; height:auto; display:block}
/* La rueda gira con el scroll, sin una linea de JavaScript: el navegador trae
   `animation-timeline: view()` de serie desde 2024.
   ⚠️ Muere dentro de un `overflow:hidden`, asi que esta banda NO puede tener
   uno: view() se ancla al contenedor de scroll mas cercano, y si ese no se
   mueve la animacion se queda clavada en un fotograma cualquiera. */
@keyframes gira{ from{ transform:rotate(-38deg) } to{ transform:rotate(202deg) } }
.rueda__gira{ transform-box:fill-box; transform-origin:50% 50%;
  animation:gira linear both; animation-timeline:view();
  animation-range:entry 10% exit 90% }

.orden{display:grid; gap:0}
.orden__fila{display:grid; grid-template-columns:auto 1fr auto; gap:var(--s3) var(--s4);
  align-items:baseline; padding:var(--s4) 0; border-bottom:1px solid var(--hairline)}
.orden__fila:first-child{border-top:1px solid var(--hairline)}
.orden__n{font-family:var(--display); font-stretch:100%; font-weight:600;
  font-size:var(--t-1); letter-spacing:.14em; color:var(--c-accent-t);
  font-variant-numeric:tabular-nums}
.orden__n::after{content:""; display:inline-block; width:1.6em; height:1px;
  background:var(--hairline); vertical-align:.28em; margin-left:var(--s3)}
.orden__q{font-family:var(--display); font-stretch:80%; font-weight:700;
  font-size:var(--t1); letter-spacing:-.01em; margin:0}
.orden__d{grid-column:2/-1; color:var(--fg-soft); font-size:.95em; margin:var(--s2) 0 0}
.orden__ir{font-size:var(--t-1); letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--c-accent-t); white-space:nowrap}
.orden__ir:hover{text-decoration:underline}
.orden__ir:active{opacity:.7}
@media (max-width:900px){
  .taller{grid-template-columns:minmax(0,1fr); gap:var(--s5)}
  .rueda{position:static; max-width:15em; margin-inline:auto}
}

/* -- el horario, que sabe si estan abiertos AHORA ----------------------- */
.horario{display:grid; gap:var(--s3); font-variant-numeric:tabular-nums}
.horario__fila{display:grid; grid-template-columns:1fr auto; gap:var(--s4);
  padding:var(--s2) 0; border-bottom:1px solid var(--hairline)}
.horario__fila[data-hoy="si"]{font-weight:600; color:var(--fg)}
.horario__fila:not([data-hoy="si"]){color:var(--fg-soft)}
.estado{display:inline-flex; align-items:center; gap:var(--s3);
  font-family:var(--display); font-stretch:88%; font-weight:600;
  font-size:var(--t-1); letter-spacing:.14em; text-transform:uppercase}
.estado__punto{width:.62em; height:.62em; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 .28em color-mix(in srgb, currentColor 22%, transparent)}
.estado[data-abierto="si"]{color:#3E9B5F}
.estado[data-abierto="no"]{color:var(--c-accent-t)}
.barra .estado{font-size:.66em}
@media (max-width:860px){ .barra .estado{display:none} }