/* Lienzo de las noticias importadas de traulux.net: reproduce el subconjunto de
   Foundation + clases propias del CMS original para que cada artículo conserve
   su maquetación (bloques con fondo, dos columnas, imágenes, vídeos). */

.noticia-canvas {
  background: #fff; color: #0a0a0a;
  font-family: 'Poppins', sans-serif;
  font-size: 16px; line-height: 1.5;
  overflow-x: hidden;
}

/* rejilla Foundation */
.noticia-canvas .grid-container { max-width: 75rem; margin: 0 auto; padding: 0 0.9375rem; }
.noticia-canvas .grid-container.full { max-width: 100%; padding: 0; }
.noticia-canvas .grid-container.fluid { max-width: 100%; }
.noticia-canvas .grid-x { display: flex; flex-flow: row wrap; }
.noticia-canvas .cell { flex: 0 0 auto; min-width: 0; width: 100%; }
.noticia-canvas .grid-margin-x { margin-left: -0.9375rem; margin-right: -0.9375rem; }
.noticia-canvas .grid-margin-x > .cell { width: calc(100% - 1.875rem); margin-left: 0.9375rem; margin-right: 0.9375rem; }
.noticia-canvas .grid-padding-y > .cell { padding-top: 0.9375rem; padding-bottom: 0.9375rem; }
.noticia-canvas .grid-margin-y > .cell { margin-top: 0.9375rem; margin-bottom: 0.9375rem; }
.noticia-canvas .grid-margin-x > .small-4 { width: calc(33.3333% - 1.875rem); }
.noticia-canvas .grid-margin-x > .small-6 { width: calc(50% - 1.875rem); }
.noticia-canvas .grid-margin-x > .small-8 { width: calc(66.6666% - 1.875rem); }
.noticia-canvas .grid-margin-x.small-up-1 > .cell { width: calc(100% - 1.875rem); }
.noticia-canvas .grid-margin-x.small-up-2 > .cell { width: calc(50% - 1.875rem); }
.noticia-canvas .grid-margin-x > .small-1 { width: calc(8.3333% - 1.875rem); }
.noticia-canvas .grid-margin-x > .small-11 { width: calc(91.6666% - 1.875rem); }
@media (min-width: 640px) {
  .noticia-canvas .grid-margin-x.medium-up-2 > .cell { width: calc(50% - 1.875rem); }
  .noticia-canvas .grid-margin-x.medium-up-3 > .cell { width: calc(33.3333% - 1.875rem); }
  .noticia-canvas .grid-margin-x.medium-up-4 > .cell { width: calc(25% - 1.875rem); }
  .noticia-canvas .grid-margin-x.medium-up-5 > .cell { width: calc(20% - 1.875rem); }
  .noticia-canvas .grid-margin-x > .medium-3 { width: calc(25% - 1.875rem); }
  .noticia-canvas .grid-margin-x > .medium-6 { width: calc(50% - 1.875rem); }
  .noticia-canvas .grid-margin-x > .medium-9 { width: calc(75% - 1.875rem); }
}
.noticia-canvas .align-center { justify-content: center; }
.noticia-canvas .align-middle { align-items: center; }
.noticia-canvas .text-center { text-align: center; }
.noticia-canvas .text-right { text-align: right; }
.noticia-canvas .text-left { text-align: left; }

/* clases propias del CMS de Charmex (valores copiados de su CSS compilado) */
.noticia-canvas .mg_pd_blocks { padding-top: 2em !important; padding-bottom: 2em !important; }
.noticia-canvas .mg_bottom_10 { margin-bottom: 0.625em !important; }
.noticia-canvas .mg_top_10 { margin-top: 0.625em !important; }
.noticia-canvas .padding_subgrup { padding-left: 0.5em !important; padding-right: 0.5em !important; }
.noticia-canvas .grey { background-color: #f0f1f4 !important; }
.noticia-canvas .grey_dark { background-color: #e1e1e1 !important; }
.noticia-canvas .grey_black { background-color: #151515 !important; }
.noticia-canvas .foot_img { position: relative; }
/* los divs "equalizer" del CMS original igualan alturas con JS; sin él, mejor altura natural */

/* tipografía y medios */
.noticia-canvas h1, .noticia-canvas h2, .noticia-canvas h3,
.noticia-canvas h4, .noticia-canvas h5, .noticia-canvas h6 {
  font-family: inherit; line-height: 1.25; margin: 0 0 0.5rem;
}
.noticia-canvas h1 { font-size: 2.2rem; }
.noticia-canvas h2 { font-size: 1.8rem; }
.noticia-canvas h3 { font-size: 1.45rem; }
.noticia-canvas h4 { font-size: 1.2rem; }
.noticia-canvas p { margin: 0 0 1rem; }
.noticia-canvas a { color: #00a792; text-decoration: none; }
.noticia-canvas a:hover { text-decoration: underline; }
.noticia-canvas img { max-width: 100%; height: auto; display: inline-block; }
.noticia-canvas iframe { max-width: 100%; }
.noticia-canvas hr { border: 0; border-bottom: 1px solid #d4d4d4; margin: 1.25rem 0; }
.noticia-canvas ul, .noticia-canvas ol { margin: 0 0 1rem 1.25rem; }

/* botones Foundation/Charmex usados en los artículos */
.noticia-canvas .button {
  display: inline-block; vertical-align: middle; margin: 0 0 1rem;
  padding: 0.85em 1.2em; border: 1px solid transparent; border-radius: 0;
  font-family: inherit; font-size: 0.9rem; cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.noticia-canvas .button.success { background-color: #00a792; color: #fff; }
.noticia-canvas .button.success:hover { background-color: #008675; color: #fff; text-decoration: none; }
.noticia-canvas .button.charmex { background-color: #00a792; border-color: #00a792; color: #fff; }
.noticia-canvas .button.charmex:hover { background-color: #fff; border-color: #00a792; color: #000; text-decoration: none; }
.noticia-canvas .button.charmex_white { background-color: #fff; border: 1px solid #00a792; color: #000; }
.noticia-canvas .button.charmex_white:hover { background-color: #00a792; border-color: #fff; color: #fff; text-decoration: none; }
.noticia-canvas .button.floor { position: relative; margin-top: 10%; }
.noticia-canvas .button.hollow { background: transparent; }
.noticia-canvas .button.hollow.success { border: 1px solid #00a792; color: #00a792; }
.noticia-canvas .button.hollow.success:hover { border-color: #005449; color: #005449; }

/* acordeón de preguntas frecuentes del CMS (cardswhite_faq) */
.noticia-canvas .cardswhite_faq { background-color: #fafafc; margin-top: 5px; border-radius: 10px; padding: 0.5em; }
.noticia-canvas .cardswhite_faq h4 { font-size: 1.2em; color: #000; font-weight: 600; margin: 0.4em 0; }
.noticia-canvas .cp { cursor: pointer; color: grey; }
.noticia-canvas .checkoff {
  display: inline-block; transform: rotate(45deg); height: 10px; width: 10px;
  margin-left: 60%; margin-top: 12px; border-top: 2px solid #00a792; border-right: 2px solid #00a792;
  transition-duration: 0.5s;
}
.noticia-canvas .checkon { transform: rotate(135deg); transition-duration: 0.5s; }

/* en pantallas pequeñas, los desplazamientos laterales grandes del CMS se anulan */
@media (max-width: 640px) {
  .noticia-canvas [style*="margin-left: 120px"] { margin-left: 0 !important; }
  .noticia-canvas [style*="margin-right: 120px"] { margin-right: 0 !important; }
}