@import "layout/header.css";
@import "layout/footer.css";
@import "layout/menu.css";
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
*::before,
*::after,
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
:root {
  --bg-white: #ffffff;
  --bg-light: #f9f9f9;
  --bg-black: #202020;
  --bg-black-light: #333333;
  --bg-gray-dark: #4a4a4a;
  --bg-gray-medium: #706f6f;
  --bg-gray-light: #fffcf7;
  --bg-gray: #b3b3b3;
  --bg-red: #b33a42;
  --bg-red-dark: #d3151d;
  --bg-gold: #f8eedb;
  --bg-blue: #0047ab;
  --bg-blue-light: #5e7982;
  --bg-orange: #f78d6b;
  --bg-card-list: #f8f9fa;
  --bg-card-list-border: #e9ecef;
  --bg-green: #49746b;
  --bg-green-dark: #084e4a;
  --bg-card-blue: #f0f4f8;
  --bg-card-gray: #f1f1f1;
  --bg-card-purple: #f6f3ff;
  --bg-border: #dcdcdc;

  --container-content-width: 1258px;
  --container-narrow-width: 800px;
  --container-safe-area: 2.5rem;

  --container-max-width: calc(
    var(--container-content-width) + var(--container-safe-area)
  );

  --container-narrow-max-width: calc(
    var(--container-narrow-width) + var(--container-safe-area)
  );

  --container-gutter: clamp(1rem, 0.5rem + 2.5vw, 1.25rem);

  --mt-sm: 0.75rem;
  --mt-md: 1.5rem;
}

.container,
.container-narrow,
.container-fluid {
  width: 100%;
  padding-inline: var(--container-gutter);
  box-sizing: border-box;
}

.container {
  margin-inline: auto;
  max-width: var(--container-max-width);
}

.container-narrow {
  margin-inline: auto;
  max-width: var(--container-narrow-max-width);
}

.container-fluid {
  max-width: 100%;
}
body {
  font-family: "EB Garamond", serif;

  font-weight: 400;
  line-height: 1.9rem;
  font-size: 22px;
  color: var(--bg-black);
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main {
  overflow: visible;
}
.node-1 .landing > section:first-child {
  padding-top: 0rem;
}
.landing {
  display: flex;
  flex-direction: column;
}
.node-229 .landing > section:first-child {
  padding-top: 0px;
  padding-bottom: 0;
}
.landing > section:first-child {
  padding-top: 7rem;
}
.landing > section:last-child {
  padding-bottom: 3rem;
}
.landing > section {
  padding: 3.5rem 0;
}
section[id] {
  scroll-margin-top: 60px;
}
.text-center {
  text-align: center;
}
a {
  text-decoration: none;
  color: var(--bg-red);
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--bg-black);
  margin-top: 0;
  margin-bottom: 1.25rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
}

h1 {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 2rem;
}

h2 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.034em;
}

h3,
.h3 {
  font-size: 1.3125rem;

  line-height: 1.125;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h5 {
  font-family: "Fraunces", serif;
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.028em;
}

h6 {
  font-size: 0.9rem;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gray-medium);
  letter-spacing: 0.05em;
}
.title-section {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 20px;
  width: 600px;
  margin: 0 auto 2rem auto;
  justify-content: center;

  color: var(--bg-black);
  font-size: 3.25rem;

  font-weight: normal;
}
p.small {
  font-size: 18px;
}
.text p a,
.field--name-field-text-item p a,
.content__body p a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.text ul,
.field--name-field-text-item ul,
.content__body ul {
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
}
.text ul li,
.field--name-field-text-item ul li,
.content__body ul li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  text-align: left;
  line-height: 1.5;
}
span.color-red {
  color: var(--bg-red);
  font-weight: 700;
}
.text ul li::before,
.field--name-field-text-item ul li::before,
.content__body ul li::before {
  background: url(/themes/custom/lacontroversia/images/arrow-right.svg)
    no-repeat center center;
  width: 19px;
  height: 14px;
  top: 10px;
  content: "";
  position: absolute;
  left: 0;
  background-size: 16px auto;
}

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 16px 24px;
  border: solid 1px var(--bg-red);
  background-color: var(--bg-red);
  color: var(--bg-white);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s;
  box-sizing: border-box;
  line-height: 1;
  transition: 0.3s;
}
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 16px 24px;
  border: solid 1px var(--bg-black);
  border-radius: 100px;
  color: var(--bg-white);
  background-color: var(--bg-black);
  font-weight: 500;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s;
  box-sizing: border-box;
  line-height: 1;
}
.button-white {
  background-color: var(--bg-white);
  border: solid 1px var(--bg-black);
  color: var(--bg-black);
  transition: 0.3s;
}
.primary:hover,
.secondary:hover,
.button-white:hover {
  background-color: var(--bg-red-dark);
  border: solid 1px var(--bg-red-dark);
  color: var(--bg-white);
}
.field__label {
  font-weight: 600;
}
.page-node-type-project .image__wrapper {
  background-color: var(--bg-blue-light);
  padding: 4.5rem 0 0 0 !important;
}
.buttons {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  margin: 2rem 0 0 0;
}
.buttons a {
  text-decoration: none !important;
}
.arrow-top {
  width: 55px;
  height: 55px;
  bottom: 3.4375rem;
  right: 3.4375rem;
  background: url(/themes/custom/lacontroversia/images/arrow-top.svg) no-repeat
    center center var(--bg-white);
  display: block;
  background-size: 37%;
  position: fixed;
  z-index: 30;
  font-size: 0;
  border-radius: 50%;
  -webkit-box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.1490196078);
  box-shadow: 0 4px 8px 3px #00000026;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  visibility: hidden;
  opacity: 0;
}
.t-center {
  text-align: center;
  font-size: 2rem;
  width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}
.number {
  font-size: 2rem;
  color: var(--bg-red);
}
#edit-comment-body-0-format {
  display: none;
}
#comment-form {
  border-top: solid 1px var(--bg-border);
  margin-top: 30px;
  padding-top: 30px;
}
#comment-form input {
  width: 100%;
  padding: 0.6rem 14px;
  border: 1px solid var(--bg-gray);
  background-color: var(--bg-white);
  box-sizing: border-box;
  color: var(--bg-black);
  transition: all 0.3s ease;
  font-size: 1rem;
  cursor: pointer;
}
#comment-form input[type="submit"] {
  border: solid 1px var(--bg-red);
  border-radius: 0;
  background-color: var(--bg-red);
  font-weight: 500;
  line-height: 1;
  font-size: 1rem;
  width: auto;
  color: var(--bg-white);
}
#comment-form .form-actions {
  display: flex;
  gap: 10px;
}

.other-color {
  color: var(--bg-white);
}
.tree-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 3rem;
}
.tree-col li::before {
  background: none !important;
}
.arrow-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.page-node-type-page .region-content {
  padding-bottom: 3.5rem;
}
.table-container {
  width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
}
/* El contenedor del botón "Aplicar" (#edit-actions) también trae la clase
   "js-hide" (y BEF se la vuelve a poner por JS aunque se le quite por PHP),
   así que sin esto el botón de arriba queda con display correcto pero
   invisible igual, porque su padre no pinta nada. Se limita a este bloque
   en concreto (el formulario expuesto de /archivos) para no afectar otros
   formularios del sitio que también usan el id genérico "edit-actions". */
#block-formularioexpuestoarticulosblock-1 #edit-actions {
  display: block !important;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card-list);
  margin: 2rem 0;
  border: 1px solid var(--bg-card-list-border);
  table-layout: fixed;
  overflow: hidden;
}

table thead th {
  text-align: left;
  font-weight: 600;
  padding: 1.2rem 1rem;
  background-color: var(--bg-light);
  color: var(--text-main);
}

table tbody td {
  padding: 1rem;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--bg-card-list-border);
  word-break: break-word;
}

table tbody tr:hover {
  background-color: var(--bg-light);
}
blockquote {
  position: relative;
  margin: 2rem 1.75rem;
  padding: 20px 20px 20px 40px;
  border: 1px solid var(--bg-red);
}

blockquote p {
  margin: 0;
}

blockquote::before {
  content: "";
  position: absolute;
  display: block;
  background-image: url("/themes/custom/lacontroversia/images/info.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-white);
  left: -1.5625rem;
  top: 46.6px;
  transform: translateY(-50%);
  width: 3.125rem;
  height: 4.5rem;
  background-size: contain;
}
.social-share {
}

pre {
  padding: 1.25rem;
  margin: 1.5rem 0;
  background: var(--bg-card-list);
  border: 1px solid var(--bg-card-list-border);
  overflow-x: auto;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  font-size: 0.9rem;
}

code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  white-space: pre-wrap;
  font-size: inherit;
}
p code {
  white-space: pre-wrap;
  word-break: break-word;
  display: inline-block;
  max-width: 100%;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.9em;
  padding: 0.2rem 0.4rem;
  vertical-align: middle;
}

/* Formulario de suscripción al newsletter (footer) */
#simplenews-subscriptions-block-footer-newsletter,
#simplenews-subscriptions-block-footer-newsletter--2 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  max-width: 30rem;
}

#simplenews-subscriptions-block-footer-newsletter label,
#simplenews-subscriptions-block-footer-newsletter--2 label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#simplenews-subscriptions-block-footer-newsletter > .form-item,
#simplenews-subscriptions-block-footer-newsletter--2 > .form-item,
#simplenews-subscriptions-block-footer-newsletter > .js-form-item,
#simplenews-subscriptions-block-footer-newsletter--2 > .js-form-item {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
}

/* El input de correo va en un <div class="field--name-mail form-wrapper">
   que SÍ es el hijo directo real del <form> (.form-item queda un nivel
   más adentro, dentro de este wrapper) -- por eso el "order" para
   colocarlo junto al botón se pone aquí y no en ".form-item". */
#simplenews-subscriptions-block-footer-newsletter > .field--name-mail,
#simplenews-subscriptions-block-footer-newsletter--2 > .field--name-mail {
  order: 1;
  flex: 1;
}

#simplenews-subscriptions-block-footer-newsletter input[type="email"],
#simplenews-subscriptions-block-footer-newsletter--2 input[type="email"] {
  flex: 1;
  width: 100%;
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
  color: var(--bg-black);
}

#simplenews-subscriptions-block-footer-newsletter input[type="email"]:focus,
#simplenews-subscriptions-block-footer-newsletter--2 input[type="email"]:focus {
  outline: none;
}

#simplenews-subscriptions-block-footer-newsletter
  input[type="email"]::placeholder,
#simplenews-subscriptions-block-footer-newsletter--2
  input[type="email"]::placeholder {
  color: var(--bg-gray-medium);
}

#simplenews-subscriptions-block-footer-newsletter input[type="submit"] {
  border: none;
  background-color: var(--bg-red);
  color: var(--bg-white);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

#simplenews-subscriptions-block-footer-newsletter--2 input[type="submit"] {
  border: none;
  background-color: var(--bg-black);
  color: var(--bg-white);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
}
#simplenews-subscriptions-block-footer-newsletter .form-item,
#simplenews-subscriptions-block-footer-newsletter--2 .form-item,
#simplenews-subscriptions-block-footer-newsletter .form-actions,
#simplenews-subscriptions-block-footer-newsletter--2 .form-actions {
  margin-top: 0em;
  margin-bottom: 0em;
}
#simplenews-subscriptions-block-footer-newsletter input[type="submit"]:hover,
#simplenews-subscriptions-block-footer-newsletter--2
  input[type="submit"]:hover {
  background-color: var(--bg-red-dark);
}

/* El botón "Suscribirse" (.form-actions) va en la misma fila, a la
   derecha del input de correo. */
#simplenews-subscriptions-block-footer-newsletter .form-actions,
#simplenews-subscriptions-block-footer-newsletter--2 .form-actions {
  order: 2;
}

/* reCAPTCHA: en el HTML llega antes que el botón "Suscribirse", pero se
   necesita debajo del input + botón, ocupando toda la fila. flex-basis:
   100% fuerza el salto de línea (el formulario ya tiene flex-wrap: wrap
   arriba) y "order" lo manda visualmente al final, sin tocar el markup
   que genera el módulo. */
#simplenews-subscriptions-block-footer-newsletter .captcha,
#simplenews-subscriptions-block-footer-newsletter--2 .captcha {
  order: 3;
  flex: 1 0 100%;
  margin-top: 1rem;
  border: none;
  padding: 0;
}

/* Oculta la leyenda "CAPTCHA" (viene del <legend> que agrega el propio
   módulo CAPTCHA); el widget de reCAPTCHA ya se entiende solo. */
#simplenews-subscriptions-block-footer-newsletter .captcha__title,
#simplenews-subscriptions-block-footer-newsletter--2 .captcha__title {
  display: none;
}
.content__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6rem;
  align-items: start;
}
.content__inner > div:nth-child(1) {
  grid-column: 3 / span 8;
}
.featured {
  font-size: 1.3125rem;
  letter-spacing: -0.025em;
  line-height: 1.4;
  font-weight: 600;
}
#newsletter__popout {
  background-color: var(--bg-green);
  position: fixed;
  width: 100%;
  bottom: 0;
}
#newsletter__popout button {
  border: none;
  outline: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 6px;
}
.popout__inner {
  position: relative;
  padding: 12px 0 6px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.filters__article {
  font-family: "Manrope";
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}
.filters__article input {
  border: 1px solid var(--bg-gray);
  padding: 14px 40px 14px 16px;
  cursor: pointer;
  font-size: 0.95rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.filters__article select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-white);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  border: 1px solid var(--bg-gray);
  color: var(--bg-black-light);
  font-size: 0.95rem;
  padding: 14px 40px 14px 16px;
  min-width: 200px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.filters__article select:hover {
  border-color: var(--bg-gray);
}

.filters__article select:focus,
.filters__article input:focus {
  outline: none;
  border-color: var(--bg-red);
  box-shadow: 0 0 0 3px rgba(179, 58, 66, 0.15);
}

.filters__article select::-ms-expand {
  display: none;
}

/* Botón "Aplicar": oculto visualmente, pero accesible por teclado
   y lectores de pantalla (auto-submit hace el envío real). Se excluye
   #edit-submit-articulos (el "Aplicar" del filtro de Firma en /archivos)
   porque ese campo no soporta auto-envío y necesita el botón visible; se le
   da estilo ".primary" desde el .theme en vez de dejarlo oculto aquí. */
.filters__article input[type="submit"]:not(#edit-submit-articulos),
.filters__article .form-submit:not(#edit-submit-articulos) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Que las etiquetas ("Categoría", "Firma") no rompan la línea del flex */
.filters__article .form-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filters__article label {
  font-size: 1rem;
  font-weight: 500;
}

/* Estado de carga sutil mientras llega el AJAX de Views */
.filters__article.views-ajax-loading,
.articles__content.views-ajax-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Oculta el throbber/gif genérico de Drupal, si aparece */
.filters__article .ajax-progress,
.filters__article .ajax-progress-throbber {
  display: none;
}
.paragraph--type--text ol li {
  margin-bottom: 2rem;
}
.paragraph--type--text ol li:last-child {
  margin-bottom: 0;
}
.field--name-comment footer {
  background: transparent;
  padding: 10px;
}
.field--name-comment .field--name-comment-body {
  font-size: 18px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .filters__article {
    flex-direction: column;
    align-items: stretch;
  }

  .filters__article select {
    width: 100%;
    min-width: 0;
  }
  .container-fluid {
    width: 100%;
    padding: 0 14px;
  }
}
@media screen and (max-width: 768px) {
  .t-center {
    text-align: center;
    font-size: 2rem;
    width: 100%;
    margin: 0 auto;
    line-height: 1.4;
  }
  .tree-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3rem;
  }
  .container-fluid {
    width: 100%;
    padding: 0 14px;
  }
  .content__inner {
    gap: 2rem;
  }

  .content__inner > div:nth-child(1) {
    grid-column: 1 / -1;
  }
  h1 {
    font-size: 2.25rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.1rem;
  }
  .title-section {
    width: 100%;
  }

  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  table {
    border: none;
    background: transparent;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid var(--bg-card-list-border);
    margin-bottom: 1.5rem;
    background: var(--bg-card-list);
    border-radius: 8px;
    overflow: hidden;
  }

  td {
    border: none;
    border-bottom: 1px solid var(--bg-card-list-border);
    position: relative;
    padding: 1rem 1rem 1rem 45% !important;
    text-align: right;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  td:last-child {
    border-bottom: none;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    width: 40%;
    padding-right: 10px;
    white-space: normal;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--bg-gray);
    display: flex;
    align-items: center;
    height: 100%;
    top: 0;
  }
  .landing > section:first-child {
    padding-top: 0rem;
  }
  .paragraph--type--box:has(#block-dynamicmenu) {
    display: none;
  }
  .landing > section:first-child {
    padding-top: 2rem;
  }
  .landing > section:last-child {
    padding-bottom: 2rem;
  }
  .landing > section {
    padding: 1rem 0;
  }
  .buttons {
    flex-direction: column;
  }
}

/* Letra capitular (estilo periódico) en el primer párrafo real del
   artículo. El párrafo correcto se marca con la clase
   "primera-letra-capitular" desde custom.js, porque el contenido puede
   venir con párrafos anidados dentro de blockquotes, grupos, etc. -- CSS
   por sí solo no puede identificar de forma fiable "el primer párrafo de
   todo el contenido" cuando hay wrappers de por medio. Esta regla solo
   afecta a la PRIMERA LETRA de ese párrafo, nada más. */
.content__body .primera-letra-capitular::first-letter {
  float: left;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 0.85;
  font-weight: 700;
  padding: 4px 10px 0 0;
  color: var(--bg-red);
}

/*Donar*/
/* Estilos del formulario de /donar. Reutiliza los mismos tokens de color
   y bordes que .contact (ver components/contact.css) para que todos los
   formularios del sitio se sientan de la misma familia visual. El wrapper
   de la página ya trae las clases "contact donar" juntas, así que .contact
   sigue poniendo la base (inputs, labels, botón "Enviar" en píldora) y
   aquí solo se añade lo específico de Donar: la tarjeta contenedora, las
   opciones de "Cantidad a donar" como chips seleccionables, el recuadro
   de la tarjeta de Stripe y el indicador de pasos del wizard. */

.donar #webform-submission-donar-add-form {
  max-width: 560px;
  margin: 0 auto 3rem auto;

  background-color: var(--bg-white);

  border-radius: 16px;
  box-sizing: border-box;
  font-family: "Manrope";
}

/* Tipografía Manrope solo para el formulario de Donar. Se repite en los
   controles (input, button, select, textarea, label) porque el stylesheet
   por defecto del navegador no hereda font-family en elementos de
   formulario: heredar desde el contenedor no basta. */
.donar #webform-submission-donar-add-form input,
.donar #webform-submission-donar-add-form button,
.donar #webform-submission-donar-add-form select,
.donar #webform-submission-donar-add-form textarea,
.donar #webform-submission-donar-add-form label {
  font-family: "Manrope";
}

@media (max-width: 640px) {
  .donar #webform-submission-donar-add-form {
    padding: 24px;
    border-radius: 12px;
  }
}

/* Indicador de pasos (Uno / Dos / Complete). La librería externa
   progress-tracker.css trae sus propios colores por defecto; aquí se
   sobreescriben con los tokens del sitio para que combine. */
.donar .webform-progress {
  margin-bottom: 32px;
}
.donar .progress-marker {
  background-color: var(--bg-gray-light);
  border-color: var(--bg-gray-light);
}
.donar .progress-step.is-complete .progress-marker,
.donar .progress-step.is-active .progress-marker {
  background-color: var(--bg-red);
  border-color: var(--bg-red);
}
.donar .progress-title {
  color: var(--bg-gray-medium);
  font-size: 0.85rem;
}
.donar .progress-step.is-active .progress-title {
  color: var(--bg-black-light);
  font-weight: 600;
}

/* Armonía de etiquetas: "Nombre completo" y "Correo electrónico" usan
   <label> (ya estilado por .contact label en contact.css), pero "Cantidad
   a donar" es un fieldset y Drupal pinta su título como
   <span class="fieldset-legend"> dentro de un <legend>, no como <label>.
   Al no ser <label> no heredaba tamaño, peso ni margen: aquí se iguala
   para que las tres etiquetas del formulario se vean del mismo tamaño y
   con el mismo espacio antes del campo. */
.donar label,
.donar .fieldset-legend {
  display: block;
  margin-bottom: 0.75rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--gray-dark);
}
.donar fieldset {
  padding-top: 1rem;
}

/* Más aire entre cada conjunto "label + input" (Nombre completo,
   Correo electrónico, Cantidad a donar, Pago con tarjeta). Se pone el
   margen directamente en cada campo (en vez de depender de gap en el
   contenedor flex) para que funcione sin importar qué elemento sea
   realmente el contenedor flex de .contact. .contact .form-item fuerza
   margin-bottom: 0, así que aquí se sobreescribe (custom.css carga
   después de contact.css por el grupo "theme" de la librería). */
.donar .form-item,
.donar .js-form-item,
.donar fieldset {
  margin-bottom: 1.75rem;
}
.donar .form-item:last-child,
.donar .js-form-item:last-child,
.donar fieldset:last-child {
  margin-bottom: 0;
}

/* "Cantidad a donar": convierte los radios nativos en chips clicables,
   sin depender de JS extra. El input real se oculta visualmente pero
   sigue siendo accesible por teclado (no se usa display:none). */
.donar .webform-type-radios_other .form-item,
.donar .js-form-type-radio {
  display: inline-flex;
  margin: 0 8px 8px 0;
}
.donar input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.donar input[type="radio"] + label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 12px 20px;
  border: 1px solid var(--bg-gray);
  border-radius: 100px;
  background-color: var(--bg-white);
  color: var(--bg-black-light);
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
  transition-property: border-color, background-color, color;
}
.donar input[type="radio"]:hover + label {
  border-color: var(--bg-gray);
}
.donar input[type="radio"]:checked + label {
  border-color: var(--bg-red);
  background-color: var(--bg-red);
  color: var(--bg-white);
}
.donar input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--bg-blue);
  outline-offset: 2px;
}

/* Campo "Otros" (importe libre): mismo look que el resto de inputs de
   texto de .contact, solo se ajusta el ancho porque es numérico. */
.donar input[type="number"] {
  width: 140px;
  padding: 0.75rem 20px;
  border: 1px solid var(--bg-gray);
  background-color: var(--bg-white);
  box-sizing: border-box;
  color: var(--bg-black);
  transition: border-color 0.3s ease;
}
.donar input[type="number"]:focus {
  outline: none;
  border-color: var(--bg-blue);
}

/* Recuadro de la tarjeta de Stripe: mismo marco que un input normal, con
   estados de foco/error a juego con el resto del formulario. Estas clases
   (StripeElement, StripeElement--focus, etc.) las añade el propio JS de
   Stripe al montar el campo, no hay que tocarlas desde el markup. */
.donar .drupal-stripe-element {
  padding: 14px 16px;
  border: 1px solid var(--bg-gray);
  border-radius: 4px;
  background-color: var(--bg-white);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.donar .drupal-stripe-element.StripeElement--focus {
  border-color: var(--bg-blue);
  box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.12);
}
.donar .drupal-stripe-element.StripeElement--invalid {
  border-color: var(--bg-red-dark);
}
.donar .drupal-stripe-errors {
  margin-top: 6px;
  color: var(--bg-red-dark);
  font-size: 0.85rem;
}

/* Botón "Enviar": mismo estilo que la clase ".primary" del sitio (CTA
   rojo, esquinas rectas) en vez del negro en píldora que trae
   .contact .form-submit por defecto. Se sobreescribe aquí en vez de
   añadir la clase "primary" al botón porque el markup lo genera el
   módulo Webform y la configuración de "donar" no está exportada como
   archivo (vive solo en la base de datos), así que no hay un YAML/twig
   editable donde agregar esa clase. */
.donar .form-submit:not(.js-hide) {
  border: solid 1px var(--bg-red);
  border-radius: 0;
  background-color: var(--bg-red);
  font-weight: 500;
  line-height: 1;
  font-size: 1rem;
}
.donar .form-submit:not(.js-hide):hover {
  background-color: var(--bg-red-dark);
  border-color: var(--bg-red-dark);
}

/* Botones del wizard: "Enviar" ya sale bien con la regla de arriba;
   aquí solo se estiliza "Anterior" en versión secundaria (borde, sin
   relleno) para que no compita visualmente con el botón principal. */
.donar .form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.donar .webform-button--previous {
  background-color: transparent;
  color: var(--bg-black-light);
  border: solid 1px var(--bg-gray-light);
}
.donar .webform-button--previous:hover {
  background-color: var(--bg-gray-light);
  border-color: var(--bg-gray-light);
  color: var(--bg-black-light);
}
/*Fin donar*/
#views-exposed-form-articulos-block-1 #edit-actions {
  margin-bottom: 0;
  margin-top: 1.7rem;

  font-size: 0.8rem;
}
#views-exposed-form-articulos-block-1 #edit-actions input {
  text-transform: uppercase;
}
.klaro__custom {
  font-family: "Manrope";
}
.klaro__custom {
  & .cookie-modal .cm-btn,
  & .cookie-modal .cm-btn.cm-btn-info,
  & .cookie-modal .cm-btn.cm-btn-success,
  & .cookie-modal .cm-btn.cm-btn-decline,
  & .cookie-modal .cm-btn.cm-btn-danger,
  & .context-notice .cm-btn,
  & .context-notice .cm-btn.cm-btn-info,
  & .context-notice .cm-btn.cm-btn-success,
  & .context-notice .cm-btn.cm-btn-decline,
  & .context-notice .cm-btn.cm-btn-danger,
  & .cookie-notice .cm-btn,
  & .cookie-notice .cm-btn.cm-btn-info,
  & .cookie-notice .cm-btn.cm-btn-success,
  & .cookie-notice .cm-btn.cm-btn-decline,
  & .cookie-notice .cm-btn.cm-btn-danger,
  &.learn-more-as-button
    .cookie-notice:not(.cookie-modal-notice)
    a.cm-link.cn-learn-more {
    display: inline-block;
    width: fit-content;
    padding: var(--klaro-button-padding);
    color: var(--klaro-button-text-color);
    border: var(--klaro-button-border);
    border-radius: 0;
    background-color: var(--bg-red);
    box-shadow: var(--klaro-button-box-shadow);
    font-size: var(--klaro-button-font-size);
    font-weight: var(--klaro-button-font-weight);
    line-height: var(--klaro-button-line-height);
    border: none;
  }
}
.klaro__custom {
  & .cookie-modal,
  & .context-notice,
  & .cookie-notice {
    & .cm-list-input.required:checked + .cm-list-label .slider {
      background-color: var(--bg-red);
    }
  }
}
.klaro__custom {
  & .cookie-modal,
  & .context-notice,
  & .cookie-notice {
    & .cm-list-input:checked + .cm-list-label .slider {
      background-color: var(--bg-red);
    }
  }
}
.klaro__custom
  .cookie-modal
  .cm-list-input.only-required
  + .cm-list-label
  .slider,
.klaro__custom
  .context-notice
  .cm-list-input.only-required
  + .cm-list-label
  .slider,
.klaro__custom
  .cookie-notice
  .cm-list-input.only-required
  + .cm-list-label
  .slider {
  background-color: var(--bg-red);
  background-color: var(--bg-red);
  opacity: 1;
}
.klaro {
  & .cookie-modal,
  & .context-notice,
  & .cookie-notice {
    & a {
      color: var(--bg-red);
      text-decoration-style: var(--klaro-link-decoration);
      text-decoration-line: var(--klaro-link-decoration-line);
    }
  }
}
.klaro {
  & .cookie-modal .cm-btn,
  & .cookie-modal .cm-btn.cm-btn-info,
  & .cookie-modal .cm-btn.cm-btn-success,
  & .cookie-modal .cm-btn.cm-btn-decline,
  & .cookie-modal .cm-btn.cm-btn-danger,
  & .context-notice .cm-btn,
  & .context-notice .cm-btn.cm-btn-info,
  & .context-notice .cm-btn.cm-btn-success,
  & .context-notice .cm-btn.cm-btn-decline,
  & .context-notice .cm-btn.cm-btn-danger,
  & .cookie-notice .cm-btn,
  & .cookie-notice .cm-btn.cm-btn-info,
  & .cookie-notice .cm-btn.cm-btn-success,
  & .cookie-notice .cm-btn.cm-btn-decline,
  & .cookie-notice .cm-btn.cm-btn-danger,
  &.learn-more-as-button
    .cookie-notice:not(.cookie-modal-notice)
    a.cm-link.cn-learn-more {
    &:hover {
      color: var(--bg-white);
      background-color: var(--bg-red-dark);
      border: none;
    }
  }
}
.klaro {
  --klaro-primary-color: var(--bg-red);
  --klaro-dialog-focus-outline: none;
  --klaro-dialog-focus-box-shadow: none;
  --font-size: 14px;
  --font-family: inherit;
}