/* tipografias propias: no dependemos de google, la web funciona offline */
@font-face { font-family: Inter; font-style: normal; font-weight: 200; font-display: swap; src: url(inter-latin-200-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 300; font-display: swap; src: url(inter-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url(ibm-plex-mono-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }

/* todo lo que va en mayuscula espaciada y las fichas tecnicas van en monoespaciada */
.mono, .specs p { font-family: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Ignacio Videla — hoja de estilos del sitio */

:root {
  --ink:    #0D0C0B;   /* negro */
  --paper:  #F2EFEA;   /* hueso */
  --accent: #C98A3C;   /* ambar */
  --wine:   #5A1E22;   /* vino */
  --muted:  #9C958B;
  --soft:   #CFC8BE;
  --faint:  #7E786F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; }

a { color: var(--paper); }
a:hover { color: var(--accent); }

.hair { border: 0; border-top: 1px solid rgba(242,239,234,0.14); margin: 0; }

input, textarea, select {
  width: 100%;
  background: transparent;
  color: var(--paper);
  border: 0;
  border-bottom: 1px solid rgba(242,239,234,0.26);
  padding: 12px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  min-height: 44px;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
select option { background: var(--ink); color: var(--paper); }

button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------
   AJUSTES SOLO PARA CELULAR
   Todo lo que esta aca adentro se aplica unicamente en pantallas
   de menos de 760px de ancho. Tocar aca no afecta la computadora.
   --------------------------------------------------------------- */
@media (max-width: 760px) {

  /* parrafos secundarios: en el celular no se muestran */
  .m-hide { display: none !important; }

  /* fotos de ancho fijo: a todo el ancho de la pantalla */
  .m-full { width: 100% !important; max-width: none !important; flex-basis: 100% !important; }

  /* videos verticales: mas chicos y centrados, si no ocupan media pagina */
  .m-vid { max-width: 250px !important; margin-left: auto !important; margin-right: auto !important; }
  .cl-video { flex-basis: 100% !important; }

  /* events: el texto arriba y el video debajo */
  .ev-video { order: 0 !important; }

  /* los cuatro pasos quedan como cuatro cuadritos, dos y dos */
  .steps { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* formats / what i need: dos columnas angostas en vez de dos listas largas */
  .specs p { font-size: 12.5px !important; line-height: 1.85 !important; }

  /* tiras de fotos: de a dos, en vez de una abajo de la otra */
  .gal { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .gal3 > :last-child { grid-column: span 2; }
}