/* Apariencia compartida con la portada para las páginas del antiguo blog. */
body {
  background: #fafafa;
  color: #333;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

.site-header {
  background-color: #333;
}

.custom-header {
  overflow: hidden;
  position: relative;
}

.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
.has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
  height: 100%;
  max-height: 100%;
}

.custom-header-media::before {
  background: rgba(0, 0, 0, 0.5);
}

.site-branding {
  text-align: center;
}

.site-title,
.site-title a,
.site-description {
  color: #fff !important;
}

.site-title {
  font-family: inherit;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.site-description {
  font-size: 1.1rem;
  font-weight: 300;
  opacity: 0.95;
}

.navigation-top {
  background: #fff;
  border: 0;
  bottom: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.main-navigation a {
  color: #333;
  font-family: inherit;
  font-weight: 500;
  text-transform: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
  background: #f0f0f0;
  color: #667eea;
}

.articles-navigation {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 58px;
}

.articles-navigation > a,
.articles-menu summary {
  color: #333;
  cursor: pointer;
  display: block;
  font-weight: 500;
  list-style: none;
  padding: 1rem 1.4rem;
  text-decoration: none;
}

.articles-menu summary::-webkit-details-marker {
  display: none;
}

.articles-menu summary::after {
  content: "\25BE";
  display: inline-block;
  margin-left: 0.55rem;
  transition: transform 0.2s ease;
}

.articles-menu[open] summary::after {
  transform: rotate(180deg);
}

.articles-navigation > a:hover,
.articles-navigation > a:focus,
.articles-menu summary:hover,
.articles-menu summary:focus-visible {
  background: #f0f0f0;
  color: #667eea;
  outline: none;
}

.articles-menu {
  position: relative;
}

.articles-menu ul {
  background: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  display: block;
  left: 0;
  list-style: none;
  margin: 0;
  min-width: min(90vw, 440px);
  padding: 0.5rem;
  position: absolute;
  top: 100%;
  z-index: 999;
}

.articles-menu li {
  border-bottom: 1px solid #eee;
}

.articles-menu li:last-child {
  border-bottom: 0;
}

.articles-menu li a {
  color: #333;
  display: block;
  line-height: 1.35;
  padding: 0.75rem 1rem;
  text-decoration: none;
}

.articles-menu li a:hover,
.articles-menu li a:focus {
  background: #f5f5f5;
  color: #667eea;
  outline: 2px solid transparent;
}

.site-content {
  padding-bottom: 3rem;
}

/* Una sola columna de contenido después de retirar la barra lateral. */
.has-sidebar:not(.error404) #primary,
.has-sidebar #primary,
.content-area {
  float: none;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.site-main {
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

/* La portada muestra una publicación por fila en cualquier resolución. */
.articles-grid {
  grid-template-columns: minmax(0, 1fr);
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

.article-card {
  width: 100%;
}

.site-main > article,
.page-header,
.widget {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.site-main > article {
  margin-bottom: 2rem;
}

.entry-title,
.entry-title a,
.page-title {
  color: #333;
  font-family: inherit;
}

.entry-title a:hover,
.entry-title a:focus,
.entry-content a,
.entry-summary a,
.widget a:hover,
.widget a:focus {
  color: #667eea;
}

.entry-content a,
.entry-summary a {
  box-shadow: inset 0 -1px 0 #667eea;
}

.entry-meta,
.entry-meta a {
  color: #888;
}

.widget-title {
  color: #333;
  font-family: inherit;
}

.site-footer {
  background: #333;
  border: 0;
  color: #fff;
  margin-top: 3rem;
}

.site-footer a,
.site-footer .site-info,
.site-footer .site-info a {
  color: #fff;
}

button,
input[type="button"],
input[type="submit"] {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 4px;
}

@media screen and (min-width: 48em) {
  .navigation-top {
    position: sticky;
    top: 0;
  }

  .has-sidebar:not(.error404) #primary,
  .has-sidebar #primary,
  .page-two-column .content-area {
    float: none;
    width: 100%;
  }
}

@media screen and (max-width: 47.999em) {
  .site-branding {
    padding: 3rem 1rem;
  }

  .site-main > article,
  .page-header,
  .widget {
    border-radius: 0;
    padding: 1.25rem;
  }

  .articles-navigation {
    align-items: stretch;
    display: block;
  }

  .articles-navigation > a,
  .articles-menu summary {
    padding: 0.9rem 1.25rem;
  }

  .articles-menu ul {
    border-radius: 0;
    box-shadow: inset 0 1px 0 #eee;
    min-width: 100%;
    position: static;
  }
}