@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Lato:300,300italic,400,400italic,700,700italic|Merriweather:ital,wght@0,700;1,300&display=swap');

/* ==========================================================================
   VARIABLES CSS - Sistema de diseño centralizado
   ========================================================================== */

:root {
  /* Tipografías */
  --font-headline: 'Roboto Condensed', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-body-italic: 'Merriweather', serif;
  
  /* Paleta de colores base */
  --color-blue: #0d6efd;
  --color-indigo: #6610f2;
  --color-purple: #6f42c1;
  --color-pink: #F15D5B;
  --color-red: #83141D;
  --color-orange: #fd7e14;
  --color-yellow: #EEBE5A;
  --color-green: #198754;
  --color-teal: #20c997;
  --color-cyan: #2F96B4;
  --color-white: #fff;
  --color-black: #000814;
  
  /* Escala de grises */
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --gray-dark: #252A30;
  
  /* Colores semánticos */
  --color-primary: var(--color-blue);
  --color-secondary: var(--gray-600);
  --color-success: var(--color-green);
  --color-info: var(--color-cyan);
  --color-warning: #ffc107;
  --color-danger: var(--color-red);
  --color-light: #F9F7E9;
  --color-dark: #1C1C1C;
  
  /* Colores personalizados */
  --color-chiaroscuro: #B9B9B4;
  --color-bright: #F6412F;
  --color-opaque: var(--color-red);
  
  /* Tamaños de fuente */
  --font-size-base: 1rem;
  --font-size-small: 0.8em;
  --font-size-xs: 0.6em;
  --font-size-content: 1.1rem;
  --font-size-h1: 3.5rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.7rem;
  --font-size-nav: 2rem;
  --font-size-nav-desktop: 1rem;
  
  /* Alturas de línea */
  --line-height-base: 1.4rem;
  --line-height-content: 1.8rem;
  --line-height-tight: 1.1em;
  
  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  
  /* Padding para secciones */
  --padding-section: var(--spacing-2xl) 0;
  --padding-block: var(--spacing-lg) var(--spacing-xl);
  --padding-content: var(--spacing-2xl) var(--spacing-lg);
  
  /* Bordes */
  --border-radius: 6px;
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--color-white);
  
  /* Transiciones */
  --transition-speed: 0.5s;
  --transition-fast: 0.2s;
  --transition-timing: ease-out;
  
  /* Sombras y efectos */
  --opacity-hover: 0.8;
  --brightness-hover: 90%;
  --saturation-hover: 120%;
  --scale-hover: 0.98;
  
  /* Header */
  --header-height: 50px;
  --header-bg: rgba(0, 0, 0, 0.8);
  --nav-border-width: 7px;
  
  /* Hero */
  --hero-min-height: 500px;
  --hero-min-height-lg: 800px;
  --hero-min-height-md: 600px;
  --hero-min-height-sm: 450px;
  --hero-overlay: rgba(0, 0, 0, 0.3);
  --hero-gradient: linear-gradient(45deg, black 0%, transparent 100%);
  
  /* Layout */
  --content-max-width: 1600px;
  --content-offset: -350px;
  --content-padding-desktop: 12rem;
  --signature-column-padding: 3rem;
  
  /* Z-index layers */
  --z-header: 1000;
  --z-nav: 8000;
  --z-sticky: 2000;
  --z-overlay: 9000;
  --z-overlay-donations: 10000;
  --z-cookie: 999999;
  
  /* Redes sociales */
  --social-twitter: #28aae1;
  --social-facebook: #3B5998;
  --social-whatsapp: #0d9f16;
  --social-telegram: #33abdf;
}

/* ==========================================================================
   TIPOGRAFÍA
   ========================================================================== */

body, p {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5,
header, footer, .btn,
.list-group, .breadcrumb, .pagination,
.alert, .author-name, .contributor,
.event-date, .pub-date, .pub-location,
.tag, .article-tags, .info, .form-text,
.gs-title, .subtitle, .read-more > a,
.copyright p, .sidebar, .sidebar p,
.form-floating label {
  font-family: var(--font-headline);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong,
.subscription-widget .typed-text {
  font-family: var(--font-headline);
  font-weight: 700;
}

/* Tamaños específicos */
.content-main p {
  font-size: var(--font-size-content);
  line-height: var(--line-height-content);
  margin-bottom: 2.2rem;
}

.content-main p em {
  font-family: var(--font-body-italic);
  font-weight: 300;
  font-size: var(--font-size-base);
}

.content-main li {
  font-size: var(--font-size-content);
  margin-bottom: var(--spacing-sm);
}

small, .small {
  font-size: var(--font-size-small);
}

footer, .footer, .copyright p,
.author-name, .contributor, .pub-location,
.breadcrumb, .pagination .page-link,
.tag, .article-tags,
.gs-bidi-start-align, .gs-snippet,
article.index-row p,
.pages-categories-section p {
  font-size: 0.9rem !important;
}

.pub-date, .form-text {
  font-size: 0.7rem !important;
}

/* ==========================================================================
   COLORES - Utilidades
   ========================================================================== */

/* Backgrounds */
.bg-transparent { background-color: transparent !important; }
.bg-white { background-color: var(--color-white) !important; color: var(--color-black) !important; }
.bg-black { background-color: var(--color-black) !important; }
.bg-light { background-color: var(--color-light) !important; }
.bg-dark { background-color: var(--color-dark) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-red { background-color: var(--color-red) !important; color: var(--color-white) !important; }
.bg-yellow { background-color: var(--color-yellow) !important; color: var(--color-black) !important; }
.bg-gray { background-color: var(--gray-600) !important; }
.bg-gray-dark { background-color: var(--gray-dark) !important; }
.bg-chiaroscuro { background-color: var(--color-chiaroscuro) !important; }
.bg-bright { background-color: var(--color-bright) !important; }
.bg-opaque { background-color: var(--color-opaque) !important; }

/* Text colors */
.text-white { color: var(--color-white) !important; }
.text-black { color: var(--color-black) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-info { color: var(--color-info) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-red { color: var(--color-red) !important; }
.text-pink { color: var(--color-pink) !important; }
.text-yellow { color: var(--color-yellow) !important; }
.text-teal { color: var(--color-teal) !important; }

/* Border colors */
.border-white { border-color: var(--color-white) !important; }
.right-border-style { border-right: var(--border-width) var(--border-style) var(--color-chiaroscuro); }

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn {
  transition: all var(--transition-speed) var(--transition-timing);
}

.btn-primary,
.btn-secondary {
  color: var(--color-white);
  border-width: var(--border-width);
  border-style: var(--border-style);
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-primary:hover,
.btn-secondary:hover {
  filter: brightness(var(--brightness-hover)) saturate(var(--saturation-hover));
  transform: scale(var(--scale-hover));
}

.btn-submit {
  background-color: var(--color-success);
  border-color: var(--color-success);
  padding: 0.75rem;
}

.btn-white,
.btn-white:hover {
  color: var(--color-black) !important;
  font-weight: 700 !important;
  background-color: var(--color-white);
  border-color: var(--color-white);
  padding: var(--spacing-md) 2.5rem;
  filter: none;
}

/* Botones de redes sociales */
.btn-twitter,
.btn-facebook,
.btn-whatsapp,
.btn-telegram {
  color: var(--color-white) !important;
}

.btn-twitter { background-color: var(--social-twitter) !important; }
.btn-facebook { background-color: var(--social-facebook) !important; }
.btn-whatsapp { background-color: var(--social-whatsapp) !important; }
.btn-telegram { background-color: var(--social-telegram) !important; }

.btn-twitter:hover { background-color: #177edb !important; }
.btn-facebook:hover { background-color: #30477A !important; }
.btn-whatsapp:hover { background-color: #3c9d37 !important; }
.btn-telegram:hover { background-color: #006aa8 !important; }

/* ==========================================================================
   ELEMENTOS GENERALES
   ========================================================================== */

body {
  padding-top: 0;
  background-color: var(--color-light);
  color: var(--color-black);
}

#main-wrapper {
  max-width: var(--content-max-width);
}

a, .a {
  color: inherit;
  text-decoration: none;
  transition: all var(--transition-speed);
}

a:hover {
  color: var(--color-bright);
}

p a {
  text-decoration: underline;
}

.content-main a {
  text-decoration: underline;
}

img {
  border: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

.main a:hover img {
  opacity: var(--opacity-hover);
  transition: all var(--transition-speed);
}

.rounded-circle {
  border-radius: 50% !important;
  max-width: 150px !important;
}

.shadow {
  margin: 0;
  padding-bottom: 30px;
  color: var(--color-white) !important;
}






/* ==========================================================================
   IMAGES
   ========================================================================== */
/* Contenedor principal */
.landing-posts-img {
  position: relative;
  height: 180px;
  width: 100%;
  overflow: visible;
}

.landing-posts-img .img-container,
.landing-posts-img .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: none; /* Sin corte por defecto */
}

/* Overlay gradient */
.landing-posts-img .img-container::after,
.landing-posts-img .video-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: var(--hero-gradient);
  z-index: 2;
  pointer-events: none;
}

/* Imagen centrada y fluida */
.landing-posts-img .img-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Video de YouTube/Vimeo centrado */
.landing-posts-img .video-container iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.77vh;
}

/* ========================================
   EFECTOS SOLO PARA TABLETS Y DESKTOP
   ======================================== */

/* Responsivo - Tablets */
@media (min-width: 768px) {
  .landing-posts-img {
    height: 280px;
  }
  
  /* CLASE .diagonal - Corte diagonal grande a la derecha */
  .col-odd.diagonal .landing-posts-img .img-container,
  .col-odd.diagonal .landing-posts-img .video-container {
    clip-path: polygon(
      0 0, 
      calc(100% - 40px) 0, 
      100% 50%, 
      calc(100% - 40px) 100%, 
      0 100%
    );
  }
  
  /* CLASE .diagonal - Corte diagonal grande a la izquierda */
  .col-even.diagonal .landing-posts-img .img-container,
  .col-even.diagonal .landing-posts-img .video-container {
    clip-path: polygon(
      40px 0, 
      100% 0, 
      100% 100%, 
      40px 100%, 
      0 50%
    );
  }
  
  /* CLASE .triangle - Punta de flecha pequeña a la derecha */
  .col-odd.triangle .landing-posts-img .img-container,
  .col-odd.triangle .landing-posts-img .video-container {
    clip-path: polygon(
      0 0, 
      100% 0, 
      100% calc(50% - 30px),
      calc(100% - 35px) 50%,
      100% calc(50% + 30px),
      100% 100%, 
      0 100%
    );
  }
  
  /* CLASE .triangle - Punta de flecha pequeña a la izquierda */
  .col-even.triangle .landing-posts-img .img-container,
  .col-even.triangle .landing-posts-img .video-container {
    clip-path: polygon(
      0 0,
      0 calc(50% - 30px),
      35px 50%,
      0 calc(50% + 30px),
      0 100%,
      100% 100%,
      100% 0
    );
  }
}

/* Responsivo - Desktop */
@media (min-width: 1024px) {
  .landing-posts-img {
    height: 350px;
  }
  
  /* CLASE .diagonal - Corte diagonal grande a la derecha */
  .col-odd.diagonal .landing-posts-img .img-container,
  .col-odd.diagonal .landing-posts-img .video-container {
    clip-path: polygon(
      0 0, 
      calc(100% - 50px) 0, 
      100% 50%, 
      calc(100% - 50px) 100%, 
      0 100%
    );
  }
  
  /* CLASE .diagonal - Corte diagonal grande a la izquierda */
  .col-even.diagonal .landing-posts-img .img-container,
  .col-even.diagonal .landing-posts-img .video-container {
    clip-path: polygon(
      50px 0, 
      100% 0, 
      100% 100%, 
      50px 100%, 
      0 50%
    );
  }
  
  /* CLASE .triangle - Punta de flecha pequeña a la derecha */
  .col-odd.triangle .landing-posts-img .img-container,
  .col-odd.triangle .landing-posts-img .video-container {
    clip-path: polygon(
      0 0, 
      100% 0, 
      100% calc(50% - 40px),
      calc(100% - 45px) 50%,
      100% calc(50% + 40px),
      100% 100%, 
      0 100%
    );
  }
  
  /* CLASE .triangle - Punta de flecha pequeña a la izquierda */
  .col-even.triangle .landing-posts-img .img-container,
  .col-even.triangle .landing-posts-img .video-container {
    clip-path: polygon(
      0 0,
      0 calc(50% - 40px),
      45px 50%,
      0 calc(50% + 40px),
      0 100%,
      100% 100%,
      100% 0
    );
  }
}

/* Ajustes para style-featured y style-index */
.wide-column .style-featured .picture {
  height: 485px !important;
}

.wide-column .style-index .picture {
  height: 385px;
  margin-bottom: var(--spacing-lg);
}

.wide-column .style-featured .picture,
.wide-column .style-featured .details,
.wide-column .style-index .picture,
.wide-column .style-index .details {
  flex: 0 0 auto;
  width: 50%;
}

.wide-column .style-featured .picture {
  width: 49%;
}

.wide-column .style-featured .details {
  width: 51%;
  height: 485px;
}

.wide-column .style-index .details {
  padding: var(--spacing-lg) !important;
  float: right;
}

.wide-column .style-featured .col-odd .picture,
.wide-column .style-index .picture {
  float: left;
}

.wide-column .style-featured .col-even .picture {
  float: right;
}


/* ==========================================================================
   COVER / HERO
   ========================================================================== */


















/* Hero sections */
.hero-section {
  position: relative;
  width: 100%;
  min-height: var(--hero-min-height);
  overflow: hidden;
  margin-bottom: 0;
}

.hero-section.hero-lg { min-height: var(--hero-min-height-lg); }
.hero-section.hero-md { min-height: var(--hero-min-height-md); }
.hero-section.hero-sm { min-height: var(--hero-min-height-sm); }

.hero-static-image,
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--hero-overlay);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  padding: var(--spacing-lg);
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

/* Eliminar spinners de números */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.form-control,
.form-select {
  border-radius: 0;
  transition: none;
}

.form-control:focus,
.form-select:focus {
  box-shadow: none;
  border-width: var(--border-width);
  border-style: var(--border-style) !important;
}

.form-control.is-invalid {
  border-width: 2px;
}

.form-floating > label {
  font-size: var(--font-size-small) !important;
  text-transform: uppercase;
  opacity: 0.6;
  color: var(--gray-900) !important;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control::placeholder {
  color: #BEBFBB;
  line-height: 2.4rem;
  height: 4.5rem;
}

.form-floating > .form-control:focus::placeholder {
  color: transparent;
}

label.active {
  color: #369FF4 !important;
  font-weight: 700;
}

.checkbox {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}

.form-check-privacy > .form-check-label {
  font-size: var(--font-size-small) !important;
  margin-top: -0.15em;
}

.form-check-privacy > .form-check-input {
  width: 0.8em;
  height: 0.8em;
  margin-top: 0.4em;
}

small.privacy-text {
  font-size: var(--font-size-xs) !important;
  line-height: 1.4em !important;
  padding: 0 1.7em;
  display: block;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
  padding-bottom: var(--spacing-lg) !important;
  background-color: var(--color-dark);
  color: var(--color-white);
}

footer li,
footer ul {
  margin-bottom: 5px;
  margin-left: 0;
  padding-left: 0;
}

footer .footer-navigation {
  width: 100% !important;
}

footer .footer-navigation li {
  display: block !important;
  text-align: center;
}

footer .footer-navigation li.footer-item {
  width: 100%;
}

footer .footer-item-headline {
  text-transform: uppercase;
  font-weight: 700;
  height: 3rem;
  color: var(--color-white);
}

footer .logo img {
  display: block;
  max-width: 250px;
}

footer .social-icons .list-inline-item:not(:last-child) {
  margin-right: var(--spacing-sm);
}

footer .location-info .list-inline-item:not(:last-child) {
  margin-right: var(--spacing-md);
}

footer .social-icons a,
footer .location-info a:not(.dropdown-item) {
  display: block;
  font-size: var(--font-size-base);
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  transition: all var(--transition-speed);
}

footer .social-icons a:hover,
footer .location-info a:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

footer p,
footer a {
  color: var(--color-white);
}

footer a:hover {
  color: var(--color-bright);
}

/* Footer invertido */
footer.invert {
  background-color: var(--color-light);
  color: var(--color-black);
}

footer.invert .footer-item-headline,
footer.invert p,
footer.invert a {
  color: var(--color-black);
}

footer.invert .social-icons a:hover,
footer.invert .location-info a:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

@media (min-width: 992px) {
  footer .footer-navigation {
    margin-left: var(--spacing-xl);
  }

  footer .footer-navigation li.footer-item {
    width: auto;
  }

  footer .footer-navigation li {
    text-align: left;
  }

  footer .footer-navigation li.footer-item:first-child,
  footer .footer-navigation li.footer-item:first-child li {
    text-align: right !important;
  }

  footer .footer-sponsors img {
    float: right;
  }
}

/* Copyright */
.copyright {
  background-color: var(--color-opaque);
  color: var(--color-white);
}

/* ==========================================================================
   LAYOUT - Sistema de columnas
   ========================================================================== */

.content-wrapper {
  position: relative;
  margin-top: var(--content-offset);
  z-index: 10;
}

/* Columna de firmas */
.signature-column {
  position: sticky;
  top: 0;
  padding-bottom: var(--spacing-lg);
  max-height: calc(100vh - 40px);
  z-index: 100;
}

.signature-column-left {
  order: 1;
  padding-left: var(--signature-column-padding);
}

.signature-column-right {
  order: 3;
  padding-right: var(--signature-column-padding);
}

/* Columnas de contenido */
.tight-column {
  padding-top: 18rem;
  order: 2;
}

.tight-column-left {
  padding-left: var(--signature-column-padding);
}

.tight-column-right {
  padding-right: var(--signature-column-padding);
}

.tight-column .container {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.tight-column .landing-block {
  margin-bottom: var(--spacing-md);
}

.tight-column .landing-block:last-child {
  margin-bottom: 0;
}

.wide-column {
  order: 4;
  width: 100%;
  clear: both;
}

.wide-column .wrapper {
  padding: var(--spacing-2xl) 0;
}

.wide-column .landing-block-content {
  padding: var(--spacing-xl) 0;
}

/* Responsive */
@media (max-width: 991.98px) {
  .content-wrapper {
    margin-top: 0;
  }

  .signature-column {
    position: relative;
    top: 0;
    max-height: none;
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    order: 2 !important;
  }

  .tight-column,
  .wide-column {
    order: 3 !important;
  }

  .signature-column-left,
  .signature-column-right,
  .tight-column-left,
  .tight-column-right {
    padding: 0 var(--spacing-lg);
  }

  .wide-column .landing-block-content {
    padding: var(--spacing-xl);
  }

  .hero-section,
  .hero-section.hero-lg,
  .hero-section.hero-md {
    min-height: 400px;
  }
}

@media (max-width: 767.98px) {
  .landing-block {
    padding: 0;
  }

  .signature-form-wrapper {
    padding: var(--spacing-md);
  }

  .hero-section,
  .hero-section.hero-lg,
  .hero-section.hero-md {
    min-height: 350px;
  }

  .hero-content {
    padding: var(--spacing-sm);
  }
}

/* ==========================================================================
   BLOQUES DE CONTENIDO
   ========================================================================== */

.landing-block {
  background-color: transparent;
}

.landing-block .landing-block-content {
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
}

.block-content {
  padding: var(--padding-block);
  margin-bottom: var(--spacing-sm) !important;
  border-radius: var(--border-radius);
  min-height: inherit;
}

.block-content h2 {
  padding-bottom: var(--spacing-xs);
  margin-bottom: 0.1rem;
  text-align: center;
  border-bottom: var(--border-width) solid var(--color-white);
}

.block-content p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-top: 0.8rem;
  margin-bottom: var(--spacing-sm);
}

.block-content p strong {
  font-weight: 800 !important;
}

.block-content p img {
  margin: 0 var(--spacing-md) var(--spacing-sm) 0;
  width: 200px;
  float: left;
}

.block-content p img.clear {
  margin: 0 0 var(--spacing-sm) 0;
  width: 100%;
  float: none;
}

.block-content p img.right {
  margin: 0 0 var(--spacing-sm) var(--spacing-md);
  width: 200px;
  float: right;
}

/* ==========================================================================
   BLOQUES ESPECÍFICOS
   ========================================================================== */

/* Prefix Block */
.prefix-row {
  justify-content: center !important;
}

.prefix-col {
  width: 100%;
}

.prefix-content p,
.prefix-content li {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.prefix-content p:last-child {
  margin-bottom: 0 !important;
}

/* Postfix Block */
.postfix-row {
  justify-content: center !important;
}

.postfix-col {
  width: 100%;
}

.postfix-content p,
.postfix-content li {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.postfix-content p:last-child {
  margin-bottom: 0 !important;
}

/* Content Block */
.content-row {
  justify-content: center !important;
}

.content-col {
  width: 100%;
}

.content-content {
  z-index: 10 !important;
}

.content-content p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.content-content p:last-child {
  margin-bottom: 0 !important;
}

@media (min-width: 1200px) {
  .wide-column .prefix-content,
  .wide-column .postfix-content,
  .wide-column .content-content {
    padding-right: var(--content-padding-desktop) !important;
    padding-left: var(--content-padding-desktop) !important;
  }

  .wide-column .container-fluid .prefix-content,
  .wide-column .container-fluid .postfix-content {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ==========================================================================
   BLOQUES DE POSTS
   ========================================================================== */

.landing-posts-wrapper {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-light);
  color: var(--color-black);
}

.landing-posts-wrapper.invert {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.landing-posts-txt h2 {
  font-size: 1.2em !important;
  line-height: var(--line-height-tight);
  font-weight: normal;
  margin: 8px 0;
  color: inherit;
}

.landing-posts-txt h2 a:hover {
  opacity: var(--opacity-hover);
}

.landing-posts-txt .date {
  align-self: flex-start;
  margin-top: -8px;
  margin-bottom: 5px;
}

.landing-posts-txt .descr {
  display: none;
}

.style-featured .landing-posts-txt h2,
.style-index .landing-posts-txt h2 {
  font-size: 2rem !important;
}

.style-featured .landing-posts-txt p:not(.date) {
  font-size: var(--font-size-content);
}

.style-featured .block-content,
.style-featured .block-content > * {
  background-color: var(--color-light);
  color: var(--color-black);
}

.style-featured.invert .block-content,
.style-featured.invert .block-content > * {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.style-columns .block-content,
.style-columns .block-content > * {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.style-columns.invert .block-content,
.style-columns.invert .block-content > * {
  background-color: var(--color-light);
  color: var(--color-black);
}

@media (min-width: 1200px) {
  .style-featured .landing-posts-txt .descr,
  .style-index .landing-posts-txt .descr {
    display: block;
  }
}

/* Estilos Featured/Index específicos */
.wide-column .style-featured .container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
}

.wide-column .style-featured .picture {
  height: 485px !important;
}

.wide-column .style-index .picture {
  height: 385px;
  margin-bottom: var(--spacing-lg);
}

.wide-column .style-featured .carousel-item img {
  width: 100%;
  height: 485px !important;
}

.wide-column .style-columns .details {
  padding: var(--spacing-sm) 0 !important;
}

.wide-column .style-featured .details {
  padding: var(--spacing-lg) !important;
}

.wide-column .style-index .details {
  padding: 0 var(--spacing-lg) !important;
}

.wide-column .details {
  margin-bottom: var(--spacing-lg) !important;
}

.wide-column .style-featured .details:after {
  border-color: transparent var(--color-light) transparent transparent !important;
}

.wide-column .style-featured .col-even .details:after {
  border-color: transparent transparent transparent var(--color-light) !important;
}

@media (min-width: 992px) {
  .wide-column .style-index .container {
    padding-right: 5rem;
    padding-left: 5rem;
  }

  .wide-column .details {
    margin-bottom: 0 !important;
  }

  .wide-column .style-featured .picture,
  .wide-column .style-featured .details,
  .wide-column .style-index .picture,
  .wide-column .style-index .details {
    flex: 0 0 auto;
    width: 50%;
  }

  .wide-column .style-featured .picture {
    width: 49%;
  }

  .wide-column .style-featured .details {
    width: 51%;
    height: 485px;
  }

  .wide-column .style-index .details {
    padding: var(--spacing-lg) !important;
    float: right;
  }

  .wide-column .style-featured .col-odd .picture,
  .wide-column .style-index .picture {
    float: left;
  }

  .wide-column .style-featured .col-even .picture {
    float: right;
  }

  .wide-column .style-featured .col-even .details {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) 8rem !important;
    float: right;
  }

  .wide-column .style-featured .col-odd .details {
    padding: var(--spacing-xl) 8rem var(--spacing-xl) var(--spacing-xl) !important;
    float: left;
  }

  .wide-column .style-featured .details:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: -60px;
    top: 50%;
    margin: -60px 0 0;
    border-width: 60px 60px 60px 0;
    border-color: transparent var(--color-light) transparent transparent !important;
    border-style: solid;
    z-index: 1;
  }

  .wide-column .style-featured .col-even .details:after {
    left: inherit;
    right: -60px;
    border-width: 60px 0 60px 60px;
    border-color: transparent transparent transparent var(--color-light) !important;
  }
}

/* ==========================================================================
   DONACIONES
   ========================================================================== */

.donations-wrapper {
  padding: var(--spacing-2xl) 0;
  margin: var(--spacing-sm) 0 0 0 !important;
}

.donations-wrapper:not(.overlay) {
  background-color: var(--color-bright);
  color: var(--color-white) !important;
}

.donations-wrapper:not(.overlay) .donations-options-card {
  border: none;
}

.donations-wrapper a,
.donations-wrapper .card-hero a,
.donations-wrapper .privacy-text a {
  text-decoration: underline !important;
}

.donations-wrapper a:hover {
  text-decoration: none !important;
}

.donations-wrapper h2 {
  margin-bottom: var(--spacing-xl);
  font-size: 4rem;
  line-height: 3.8rem;
  font-weight: 400;
  text-align: center;
}

.donations-wrapper p {
  font-size: 1.5rem;
  text-align: center;
}

.donations-wrapper h2 strong {
  font-weight: 700;
}

.donations-wrapper:not(.overlay) .card-hero,
.donations-wrapper:not(.overlay) .btn-donate-submit,
.donations-wrapper:not(.overlay) .btn-donate-next,
.donations-wrapper:not(.overlay) .donate-form-toggle .btn.active,
.donations-wrapper:not(.overlay) .amount-buttons-wrapper .btn-check + .btn-amount,
.donations-wrapper:not(.overlay) .amount-buttons-wrapper .btn-check + .btn-other-amount {
  background-color: var(--color-white) !important;
  border-color: var(--color-white) !important;
  color: var(--color-bright) !important;
}

.donations-wrapper:not(.overlay) h2,
.donations-wrapper:not(.overlay) .card,
.donations-wrapper:not(.overlay) .privacy-text,
.donations-wrapper:not(.overlay) .donation-benefits,
.donations-wrapper:not(.overlay) .btn-method {
  background-color: transparent !important;
  border-color: var(--color-white) !important;
  color: var(--color-white) !important;
}

.donations-wrapper.overlay p,
.donations-wrapper.overlay h3,
.donations-wrapper:not(.overlay) .card-hero,
.donations-wrapper:not(.overlay) .card-hero a {
  color: var(--color-black) !important;
}

.donation-bank {
  padding: 15px 20px 10px;
  border-radius: var(--border-radius);
  border-style: var(--border-style);
  border-width: var(--border-width);
  border-color: var(--color-white) !important;
}

.donation-bank p {
  margin-bottom: 5px;
}

.btn-donate strong {
  position: relative;
  top: 4px;
  font-size: 45px;
  line-height: 5px;
  padding: 0 0 0 10px;
}

.btn-donations {
  background-color: var(--color-success) !important;
}

.btn-donations:hover {
  background-color: var(--color-success);
}

@media (min-width: 768px) {
  .donations-wrapper h2,
  .donations-wrapper p {
    text-align: left;
  }
}

/* Donations Overlay */
.donations-wrapper.overlay {
  padding: var(--spacing-xs) !important;
  z-index: var(--z-overlay-donations);
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--color-white) !important;
}

.donations-wrapper.overlay .privacy-text {
  background-color: var(--color-white);
  color: var(--color-black);
}

.donations-wrapper.overlay.invert .privacy-text {
  background-color: var(--color-black);
  color: var(--color-white);
}

.donations-wrapper.overlay .card-body:first-child {
  padding: var(--spacing-xl) !important;
}

.donations-wrapper.overlay .card-body:first-child #donate-form-widget {
  margin-left: var(--spacing-xl) !important;
  margin-right: var(--spacing-xl) !important;
  margin-bottom: 0 !important;
}

.donations-wrapper.overlay .donation-descr-col,
.donations-wrapper.overlay .donation-option-member-col,
.donations-wrapper.overlay .donation-option-volunteer-col {
  display: none;
}

@media (min-width: 992px) {
  .donations-wrapper.overlay {
    padding: var(--spacing-xl) !important;
  }

  .donations-wrapper.overlay .donation-options-col {
    flex: 0 0 auto !important;
    width: 66.66666667% !important;
  }
}

@media (min-width: 1200px) {
  .donations-wrapper.overlay .donation-options-col {
    flex: 0 0 auto !important;
    width: 50%;
  }
}

/* ==========================================================================
   BARRAS Y STICKY BAR
   ========================================================================== */

.landing-bar-wrapper {
  padding: var(--spacing-xl) var(--spacing-lg) !important;
}

.landing-bar-wrapper h2 {
  font-weight: bold;
  font-size: var(--font-size-h1);
  line-height: 3rem;
  text-transform: uppercase;
  font-stretch: semi-condensed;
  margin: 0;
}

.landing-bar-wrapper h3 {
  font-weight: bold;
  font-size: var(--font-size-h2);
  line-height: 2rem;
  text-transform: uppercase;
  font-stretch: semi-condensed;
  margin: 0;
}

.landing-bar-wrapper p {
  font-weight: bold !important;
  font-size: 1.5rem;
  margin: 0;
}

.landing-bar-wrapper .btn-white,
.landing-bar-wrapper .btn-white:hover {
  margin: 1.8rem 0 var(--spacing-sm) 0;
}

.sticky-bar {
  position: sticky !important;
  bottom: 0 !important;
  z-index: var(--z-sticky);
  background-color: var(--color-bright);
  color: var(--color-white) !important;
}

.sticky-bar-wrapper {
  text-align: center;
  padding: 1.25rem var(--spacing-sm) !important;
}

.sticky-bar-wrapper h5 {
  font-weight: bolder;
  font-size: 2.2rem !important;
  line-height: 2rem !important;
  text-transform: uppercase;
  font-stretch: semi-condensed;
  margin: 0;
}

.sticky-bar-wrapper h6 {
  font-weight: normal;
  font-size: 2.2rem !important;
  line-height: 2rem !important;
  margin: 0;
}

.sticky-bar-wrapper .btn-close {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-sm);
  z-index: 2;
  padding: 0.2rem;
  width: 0.2rem !important;
  height: 0.2rem !important;
  filter: invert(30%);
}

.sticky-bar-wrapper .btn-close:hover {
  filter: invert(100%);
}

/* ==========================================================================
   CARTA / LETTER
   ========================================================================== */

.letter-content {
  padding: 2.5rem var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border-radius: var(--border-radius);
  background-color: var(--color-chiaroscuro);
  color: var(--color-black);
}

.letter-content h3 {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   OVERLAY GENERAL
   ========================================================================== */

.overlay {
  position: fixed !important;
  z-index: var(--z-overlay);
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--color-white) !important;
  color: var(--color-black);
}

.overlay.invert {
  background-color: var(--color-black) !important;
  color: var(--color-white);
}

.overlay-show {
  display: none !important;
}

.overlay .overlay-show {
  display: block !important;
}

.overlay .overlay-hide {
  display: none !important;
}

/* Success steps overlay */
.success-wrapper.share-wrapper .success-step-2,
.success-wrapper:not(.share-wrapper) .success-step-3 {
  display: none;
}

.success-wrapper:not(.share-wrapper) .success-step-2,
.success-wrapper.share-wrapper .success-step-3 {
  display: block;
}

/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */

.scroll-top-arrow {
  line-height: 28px;
  font-weight: bold;
  height: 30px;
  width: 30px;
  padding: 0;
  position: fixed;
  right: 45px;
  text-align: center;
  text-decoration: none;
  top: 91%;
  z-index: 900;
  border-radius: 100%;
  background-color: var(--color-opaque);
  color: var(--color-white);
  transition: all var(--transition-speed);
}

.scroll-top-arrow:hover {
  opacity: var(--opacity-hover);
  background-color: var(--color-bright);
  border-color: var(--color-bright) !important;
}

.scroll-top-arrow i {
  line-height: 30px;
  position: relative;
}

.scroll-top-arrow {
  display: none;
}

@media (min-width: 768px) {
  .scroll-top-arrow {
    display: block;
  }
}

/* ==========================================================================
   SLIDESHOW / FLEXSLIDER
   ========================================================================== */

/* Play button para videos */
.play {
  background-color: var(--color-white);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: all var(--transition-fast) var(--transition-timing);
  z-index: 1;
}

.play:after {
  content: '';
  border-style: solid;
  border-width: 12px 0 12px 17px;
  border-color: transparent transparent transparent var(--gray-900);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
}

.play:hover {
  cursor: pointer;
}

/* ==========================================================================
   UTILIDADES DE LAYOUT
   ========================================================================== */

.no-gutters-right { padding-right: 0; }
.no-gutters-left { padding-left: 0; }

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.left { float: left; }
.right { float: right; }
.text-right { text-align: right; }

.row-eq-height {
  display: flex;
}

.line {
  padding: 10px 0;
  margin-bottom: 0;
}

.youtube-space {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  clear: both;
}

.figure-caption {
  color: inherit !important;
}

/* ==========================================================================
   CONTENT MAIN - Estilos de contenido
   ========================================================================== */

.content-main p,
.content-main h1,
.content-main h2,
.content-main h3,
.content-main h4,
.content-main h5,
.content-main h6,
.content-main ul,
.content-main ol {
  padding-left: var(--spacing-2xl);
  padding-right: var(--spacing-2xl);
}

.content-main h2,
.content-main h3,
.content-main h4,
.content-main h5 {
  margin-top: var(--spacing-md) !important;
}

.summary h2,
.summary h3 {
  margin-top: 0.4rem !important;
}

.page-tail > p {
  font-size: var(--font-size-content) !important;
  line-height: 1.6rem !important;
}

.page-tail h3 {
  margin-bottom: 0.6rem;
  font-size: var(--font-size-h3);
  font-weight: 700;
  text-transform: uppercase;
}

/* ==========================================================================
   FORMULARIOS DE FIRMA
   ========================================================================== */

.form-verify {
  display: none !important;
}

#form-signatures .btn-donations {
  background-color: var(--color-bright);
  color: var(--color-white) !important;
}

#form-signatures .btn-donations:hover {
  background-color: var(--color-success);
}

.progress {
  border-color: var(--color-white) !important;
}

.progress-bar {
  background-color: var(--color-bright);
  color: var(--color-white) !important;
}

.total-bar,
.total-count {
  color: var(--color-white) !important;
}

/* ==========================================================================
   MEGA MENU
   ========================================================================== */

.mega-menu > li > a {
  background-color: var(--gray-dark) !important;
}

.mega-menu li:last-child a {
  background-color: var(--color-bright);
  color: var(--color-white) !important;
}

/* ==========================================================================
   BLOQUES DE PREFIJO/SUFIJO/CONTENIDO ESPECÍFICOS
   ========================================================================== */

.wide-column .landing-block-prefix .landing-block-section,
.wide-column .landing-block-postfix .landing-block-section,
.wide-column .landing-block-content .landing-block-section,
.landing-block-prefix .landing-block-content,
.landing-block-postfix .landing-block-content,
.landing-block-content .landing-block-content {
  background-color: var(--color-chiaroscuro);
  color: var(--color-black);
}

.wide-column .style-featured .block-content h2 {
  font-size: 2rem !important;
}

/* ==========================================================================
   INVERSIÓN DE COLORES (TEMA OSCURO/CLARO)
   ========================================================================== */

body.invert,
.invert .landing-posts-txt h2,
.invert .landing-posts-txt p {
  background-color: var(--color-dark);
  color: var(--color-white);
}

/* ==========================================================================
   COOKIE CONSENT
   ========================================================================== */

.cc-window {
  display: none !important;
}

.cc-revoke,
.cc-window {
  z-index: var(--z-cookie) !important;
}

/* ==========================================================================
   RESPONSIVE - Ajustes finales
   ========================================================================== */

@media (max-width: 767px) {
  .atss {
    display: none !important;
    left: -999999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden;
  }
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .signature-column {
    transition: top 0.3s ease-in-out;
  }
}

/* ==========================================================================
   HELPERS - Clases de utilidad
   ========================================================================== */

.hide-placeholder::placeholder {
  color: transparent !important;
}

.blocks-row {
  justify-content: center !important;
}

.blocks-col {
  flex: 0 0 auto;
  width: 100%;
}

time {
  display: block;
}

iframe,
img {
  border: 0;
  vertical-align: middle;
}