/* =========================================================
   PROACRÍLICOS
   LANDING BASE SYSTEM

   Responsabilidad:
   - Tipografía base de las landings
   - Normalización mínima
   - Herencia visual para componentes

   Los componentes NO deben declarar font-family.
   ========================================================= */


/* =========================================================
   DOCUMENT
   ========================================================= */

body.landing-template {
    margin: 0;

    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    line-height: 1.6;

    color: #17191d;
    background: #ffffff;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   BOX MODEL
   ========================================================= */

body.landing-template *,
body.landing-template *::before,
body.landing-template *::after {
    box-sizing: border-box;
}


/* =========================================================
   HEADINGS
   ========================================================= */

body.landing-template h1,
body.landing-template h2,
body.landing-template h3,
body.landing-template h4,
body.landing-template h5,
body.landing-template h6 {
    font-family: "Manrope", sans-serif;
}


/* =========================================================
   INTERACTIVE / UI
   ========================================================= */

body.landing-template button,
body.landing-template input,
body.landing-template textarea,
body.landing-template select {
    font: inherit;
}


/* =========================================================
   LINKS
   ========================================================= */

body.landing-template a {
    color: inherit;
}


/* =========================================================
   MEDIA
   ========================================================= */

body.landing-template img,
body.landing-template picture,
body.landing-template video,
body.landing-template svg {
    display: block;
    max-width: 100%;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

body.landing-template :focus-visible {
    outline-offset: 3px;
}