/* ==========================================================================
   Casa Mella-Russo
   --------------------------------------------------------------------------
   Dos familias y tres colores. Lucette (serif) titula y pone la voz de la
   casa; Vela Sans (palo seco) hace todo lo demás, con espaciado de letra
   generoso en mayúsculas. El verde es el color de la institución, el crema el
   papel, y el naranja aparece una sola vez, en noticias, para que signifique
   algo cuando aparece.
   ========================================================================== */
@font-face { font-family: "Lucette";        src: url("/assets/fonts/Lucette-Regular-c4258c43.ttf") format("truetype"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Lucette";        src: url("/assets/fonts/Lucette-Regularitalic-a90f9797.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-Light-a6ed7a69.ttf") format("truetype");     font-weight: 300; font-display: swap; }

@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-Regular-dfcc7bb1.ttf") format("truetype");   font-weight: 400; font-display: swap; }

@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-Medium-cbb3c63d.ttf") format("truetype");    font-weight: 500; font-display: swap; }

@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-SemiBold-96a2cc94.ttf") format("truetype");  font-weight: 600; font-display: swap; }

@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-Bold-64429428.ttf") format("truetype");      font-weight: 700; font-display: swap; }

@font-face { font-family: "Vela Sans";      src: url("/assets/fonts/VelaSans-ExtraBold-0977cd73.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --verde:       #084438;
  --verde-claro: #0d5c4a;
  --crema:       #ddc9a2;
  --papel:       #fff7eb;
  --blanco:      #ffffff;
  --tinta:       #213547;
  --gris:        #666666;
  --naranja:     #ffa500;

  --serif: "Lucette", Georgia, "Times New Roman", serif;
  --sans:  "Vela Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --ancho: 1180px;
  --radio: 2px;
  --nav-alto: 6.5rem;

  --sombra: 0 10px 30px rgba(8, 68, 56, .12);
  --transicion: 220ms cubic-bezier(.2, .6, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

input, textarea { font: inherit; color: inherit; }

/* El foco tiene que verse: media página es navegable con teclado. */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
}

.cmr-ico { width: 1.15em; height: 1.15em; flex: none; }

.cmr-muted { color: var(--gris); }

.cmr-error { color: #a3312a; font-weight: 500; }