/* ===================================
            UI GLOBAL
      NEXATA INSIGHT MEDIA STUDIO
=================================== */

:root{

  /* =========================
            COLORES
  ========================= */

  --color-bg: #f0f2f5;
  --color-text: #111827;
  --color-title: #031A3D;
  --color-accent: #2563eb;

  /* =========================
          CONTENEDORES
  ========================= */

  --container-width: 800px;
  --container-padding: 20px;

  /* =========================
             BORDES
  ========================= */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* =========================
             SOMBRAS
  ========================= */

  --shadow-sm: 0 2px 8px rgba(0,0,0,.10);
  --shadow-md: 0 0 15px rgba(0,0,0,.10);
  --shadow-lg: 0 10px 25px rgba(0,0,0,.20);

  /* =========================
            FUENTES
  ========================= */

  --font-main: Arial, sans-serif;

  --font-base: 16px;
  --font-small: .875rem;

  --font-h1: 2rem;
  --font-h2: 1.5rem;
  --font-h3: 1.25rem;

  /* =========================
            ESPACIADO
  ========================= */

  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 20px;
  --space-lg: 40px;

  /* =========================
              CAPAS
  ========================= */

  --z-menu: 1000;
  --z-modal: 5000;
  --z-max: 9999;
}

/* ===================================
              RESET
=================================== */

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

/* ===================================
              BODY
=================================== */

body{
  font-family:var(--font-main);
  font-size:var(--font-base);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
}

/* ===================================
            ENLACES
=================================== */

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

a:hover{
  text-decoration:none;
}

/* ===================================
          CONTENEDOR GLOBAL
=================================== */

.container{
  max-width:var(--container-width);
  margin:25px auto;
  padding:var(--container-padding);
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
}

/* ===================================
            IMÁGENES
=================================== */

img{
  max-width:100%;
  height:auto;
}

img.destacada{
  width:100%;
  border-radius:var(--radius-md);
  margin-bottom:var(--space-md);
  display:block;
}

/* ===================================
             TITULOS
=================================== */

h1{
  font-size:var(--font-h1);
  margin-bottom:25px;
  line-height:1.3;
}

h2{
  font-size:var(--font-h2);
  color:var(--color-title);
  margin-top:var(--space-lg);
  margin-bottom:15px;
}

h3{
  font-size:var(--font-h3);
  margin-top:30px;
  margin-bottom:10px;
}

/* ===================================
            PÁRRAFOS
=================================== */

p{
  line-height:1.8;
  margin-bottom:25px;
}

/* ===================================
             LISTAS
=================================== */

ul,
ol{
  margin:15px 0;
  padding-left:25px;
}

li{
  margin-bottom:10px;
}

/* ===================================
             TABLAS
=================================== */

table{
  width:100%;
  border-collapse:collapse;
}

/* ===================================
              CITAS
=================================== */

blockquote{
  border-left:4px solid var(--color-title);
  padding-left:15px;
  margin:20px 0;
  font-style:italic;
}

/* ===================================
              CÓDIGO
=================================== */

code{
  background:#f3f4f6;
  padding:2px 6px;
  border-radius:var(--radius-sm);
}

/* ===================================
            RESPONSIVE
=================================== */

@media (max-width:768px){

  body{
    padding:10px;
  }

  .container{
    padding:15px;
    margin:15px auto;
  }

  h1{
    font-size:1.6rem;
  }

  h2{
    font-size:1.3rem;
  }

  h3{
    font-size:1.1rem;
  }

}