/* =====================================================
   SISTEMA VISUAL UNIVERSAL
   Laura Bren
   Paleta revista editable
===================================================== */

:root {

  --obsidian: #151618;
  --charcoal-silk: #3C4449;
  --shadowed-ash: #62676B;
  --cool-concrete: #8D9295;
  --morning-mist: #CED3D6;

}

/* =====================
   Reset
===================== */

*{
  box-sizing:border-box;
}

/* =====================
   Base
===================== */

body{
  margin:0;
  background:#fff;
  color:var(--obsidian);
  font-family:'Montserrat',sans-serif;
  line-height:1.7;
}

/* =====================
   Enlaces
===================== */

a{
  color:var(--charcoal-silk);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/* =====================
   Layout
===================== */

main{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* =====================
   Header
===================== */

header{
  background:#fff;
}

.header-separator{
  height:2px;
  background:var(--shadowed-ash);
}

/* =====================
   Títulos
===================== */

h1{
  background:var(--obsidian);
  color:#fff;
  padding:16px 20px;
  font-size:30px;
  margin:40px 0 25px;
}

h2{
  background:var(--charcoal-silk);
  color:#fff;
  padding:10px 14px;
  font-size:22px;
  margin-top:30px;
  margin-bottom:15px;
}

h3{
  font-size:20px;
  font-weight:700;
  color:var(--obsidian);
  margin-top:20px;
  margin-bottom:10px;
  border-left:4px solid var(--shadowed-ash);
  padding-left:8px;
}

h4{
  font-size:16px;
  font-weight:600;
  color:var(--shadowed-ash);
  margin-top:15px;
  margin-bottom:8px;
}

/* =====================
   Texto
===================== */

p, li{
  font-size:17px;
  color:var(--obsidian);
}

ul{
  padding-left:20px;
}

small,
.meta{
  color:var(--cool-concrete);
}

/* =====================
   Citas
===================== */

q,
.quote{
  color:var(--shadowed-ash);
  font-style:italic;
}

/* =====================
   Botones
===================== */

.btn,
button,
.cta-link{

  display:inline-block;
  background:var(--charcoal-silk);
  color:#fff;
  padding:12px 24px;
  border-radius:4px;
  font-weight:600;
  font-size:16px;
  border:none;
  cursor:pointer;
  transition:0.3s;

}

.btn:hover,
button:hover,
.cta-link:hover{

  background:var(--obsidian);
  text-decoration:none;

}

/* =====================
   Contenedores
===================== */

.box{

  padding:16px 20px;
  border-radius:4px;
  margin:24px 0;
  box-shadow:0 3px 8px rgba(0,0,0,0.08);

}

.box--dark{

  background:var(--obsidian);
  color:#fff;

}

.box--dark p,
.box--dark li{

  color:#fff;

}

.box--editorial{

  background:var(--charcoal-silk);
  color:#fff;

}

/* =====================
   Blog
===================== */

.blog-article{
  max-width:860px;
  margin:40px auto;
}

.blog-header{
  margin-bottom:20px;
}

.blog-content{
  padding:0 8px;
}

/* =====================
   Tablas
===================== */

table{

  width:100%;
  border-collapse:collapse;
  margin:30px 0;

}

th, td{

  border:2px solid var(--cool-concrete);
  padding:12px 15px;
  text-align:left;
  vertical-align:top;

}

th{

  background:var(--obsidian);
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:1px;

}

td{

  font-size:16px;
  line-height:1.6;
  color:var(--obsidian);
  background:#fff;

}

/* =====================
   Layout columnas
===================== */

.two-col{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;

}

.two-col .col-left,
.two-col .col-right{

  min-width:0;

}

/* =====================
   Imágenes responsive
===================== */

img{

  max-width:100%;
  height:auto;
  display:block;

}

/* =====================
   Responsive
===================== */

@media (max-width:900px){

  main{
    padding:0 16px;
  }

  h1{
    font-size:24px;
  }

  h2{
    font-size:20px;
  }

  .two-col{
    grid-template-columns:1fr;
  }

  .blog-article{
    margin:24px auto;
  }

}
@media (max-width:600px){

  h1{
    font-size:22px;
    padding:12px 14px;
  }

  h2{
    font-size:19px;
    padding:8px 12px;
  }

  p, li{
    font-size:16px;
  }

  table{
    display:block;
    overflow-x:auto;
  }

  .btn,
  button,
  .cta-link{
    padding:10px 16px;
    font-size:15px;
  }

  .blog-content{
    padding:0 12px;
  }

}
.share{
  text-align:right;
}