@charset "UTF-8";
/*
// 1. Funciones de Bootstrap (necesarias para cálculos)
@import "../../node_modules/bootstrap/scss/functions";

// 2. Variables de Bootstrap (colores, breakpoints, espaciado, etc.)
@import "../../node_modules/bootstrap/scss/variables";

// 3. Mapas de Bootstrap (para iterar sobre breakpoints, colores, etc.)
@import "../../node_modules/bootstrap/scss/maps";

// 4. Mixins de Bootstrap (media queries, grid, etc.)
@import "../../node_modules/bootstrap/scss/mixins";

// 5. Utilidades de Bootstrap (helpers para generar clases)
@import "../../node_modules/bootstrap/scss/utilities";

// Grid system (make-row, make-col, etc.)
@import "../../node_modules/bootstrap/scss/grid";

// Containers (make-container, make-container-max-widths)
@import "../../node_modules/bootstrap/scss/containers";

// Buttons (para @extend .btn)
//@import "../../node_modules/bootstrap/scss/buttons";

// Forms (para @extend .form-control, etc.)
//@import "../../node_modules/bootstrap/scss/forms";

// Helpers (justify-content-center, d-flex, etc.)
@import "../../node_modules/bootstrap/scss/helpers";
*/
:root {
  --font-stack: "Franklin Gothic Book", "Libre Franklin", "Roboto", "Lato", "Montserrat", "Atkinson Hyperlegible", sans-serif;
  --color-primario: #13347D;
  --color-secundario: #2D5089;
  --color-terciario: #0b1f4a;
  --color-inverso: #ffffff;
  --color-primario-invertido: #AB1738;
  --color-cabecera: #0E1A4D;
  --color-pie: #0B1F4A;
  --color-cierre: #001032;
  --color-azul-claro: #5AF0FF;
  --color-verde: #41D886;
  --color-rojo: #AB1738;
  --color-rosa: #FF7B90;
  --color-amarillo: #FDDF73;
  --color-valladolid: #5534AE;
  --color-palencia: #93198F;
  --color-segovia: #ff9000;
  --color-soria: #AAD000;
  --color-texto: rgba(18, 18, 18, 0.8);
  --color-texto-principal: rgba(18, 18, 18, 0.8);
  --color-texto-secundario: rgba(18, 18, 18, 0.6);
  --color-texto-claro: #FFFFFF;
  --color-texto-enlace: #1464aa;
  --color-texto-error: #AD0000;
  --color-texto-pie: #FFFFFF;
  --color-fondo: #f2f2f2;
  --color-gris: #f2f2f2;
  --color-blanco: #ffffff;
  --color-primario-hover: #0e265c;
  --color-primario-active: #0c2251;
  --color-primario-light: #2059d6;
  --color-primario-dark: #09183b;
  --color-secundario-hover: #243f6c;
  --color-secundario-active: #203a63;
  --color-secundario-light: #5580c7;
  --color-valladolid-hover: #472b91;
  --color-valladolid-active: #422887;
  --color-valladolid-light: #8d73d5;
  --color-palencia-hover: #72136f;
  --color-palencia-active: #671265;
  --color-palencia-light: #dd35d7;
  --color-segovia-hover: #d97a00;
  --color-segovia-active: #cc7300;
  --color-segovia-light: #ffbc66;
  --color-soria-hover: #8baa00;
  --color-soria-active: #809d00;
  --color-soria-light: #daff37;
  --border-color: #c5c5c5;
  --border-radius: 0.5rem;
  --btn-bg: var(--color-primario);
  --btn-bg-hover: var(--color-primario-hover);
  --btn-bg-active: var(--color-primario-active);
  --btn-color: var(--color-texto-claro);
  --btn-border-radius: 0.375rem;
  --btn-border-color: #121212;
  --btn-padding-x: 1rem;
  --btn-padding-y: 0.5rem;
  --link-color: var(--color-texto-enlace);
  --link-color-hover: var(--color-primario);
  --link-color-invert: var(--color-texto-enlace);
  --link-color-hover: var(--color-primario);
  --link-decoration: underline;
  --card-bg: #FFFFFF;
  --card-border-color: #c5c5c5;
  --card-border-radius: 0.5rem;
  --card-padding: 1.5rem;
  --input-bg: #FFFFFF;
  --input-border-color: #c5c5c5;
  --input-border-radius: 0.375rem;
  --input-padding-x: 0.75rem;
  --input-padding-y: 0.5rem;
  --input-focus-border-color: var(--color-primario);
  --fondo-noticia-texto: var(--color-texto);
  --fondo-noticia: white;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow: rgba(19, 52, 125, 0.1);
  --shadow-hover: rgba(19, 52, 125, 0.25);
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  --transition-ultraslow: 1000ms ease-in-out;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

@keyframes moveArrow {
  0% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(5px);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/*
@mixin columnasgrid() {
  $values: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);



  display: grid;
  grid-gap: 10px;
  justify-content: stretch;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);

  @each $value in $values {
    &.columnastabla-# { $value} {
      @if ($value == 1) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(1fr) minmax(0, 1fr);
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: repeat(12, minmax(0, 1fr));
        }
      } @else if ($value == 2) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(1fr) minmax(0, 1fr);
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: repeat(6, minmax(0, 1fr));
        }
      } @else if ($value == 3) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @include media-breakpoint-up(lg) {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
      } @else if ($value == 4) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      } @else if ($value == 5) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(1fr) minmax(0, 1fr);
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      } @else if ($value == 6) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(1fr) minmax(0, 1fr);
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      } @else if ($value == 7) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(1fr) minmax(0, 1fr);
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: repeat(1, minmax(0, 1fr));
        }
      } @else if ($value == 8) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(1fr) minmax(0, 1fr);
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: repeat(8, minmax(0, 1fr));
        }
      } @else if ($value == 9) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(1fr) minmax(0, 1fr);
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: repeat(9, minmax(0, 1fr));
        }
      } @else if ($value == 10) {
        @include media-breakpoint-up(md) {
          @include make-col(10);
        }
      } @else if ($value == 11) {
        @include media-breakpoint-up(md) {
          @include make-col(11);
        }
      } @else if ($value == 12) {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 1fr);
        }
      } @else {
        @include media-breakpoint-down(sm) {
          grid-template-columns: minmax(1fr);
        }
        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 1fr);
        }
      }
    }
  }

  @each $value in $values {
    > .columnatabla-# { $value} {
      grid-column: span #  { $value};
    }
  }
}
*/
/*
@each $name, $values in $text-size {
  .texto-# { $name} {
    @include apply-text-size($name);
  }
}
  */
/**
 * Media query responsive - móvil primero
 * 
 * @param {String} $breakpoint - Punto de ruptura (sm, md, lg, xl, xxl)
 * @example
 *   .elemento {
 *     width: 100%;
 *     @include respond-to(md) {
 *       width: 50%;
 *     }
 *   }
 */
/**
 * Media query - escritorio primero
 * 
 * @param {String} $breakpoint - Punto de ruptura
 */
/**
 * Tipografía responsive fluida
 * 
 * @param {Number} $min-size - Tamaño mínimo
 * @param {Number} $max-size - Tamaño máximo
 * @param {Number} $min-width - Ancho mínimo (default: 320px)
 * @param {Number} $max-width - Ancho máximo (default: 1200px)
 * @example
 *   h1 {
 *     @include fluid-type(1.5rem, 3rem);
 *   }
 */
/**
 * Truncar texto con ellipsis
 * 
 * @param {Number} $lines - Número de líneas (default: 1)
 * @example
 *   .titulo {
 *     @include truncate(2);
 *   }
 */
/**
 * Centrar elemento absoluto
 * 
 * @param {String} $axis - Eje a centrar (both, x, y)
 * @example
 *   .modal {
 *     @include center(both);
 *   }
 */
/**
 * Flexbox centrado
 * 
 * @param {String} $direction - Dirección (row, column)
 * @example
 *   .container {
 *     @include flex-center(column);
 *   }
 */
/**
 * Grid responsive automático
 * 
 * @param {Number} $min-width - Ancho mínimo de columnas
 * @param {Number} $gap - Espacio entre columnas
 * @example
 *   .grid {
 *     @include auto-grid(250px, 2rem);
 *   }
 */
/*
@mixin columnasgrid() {
  display: grid !important;
  gap: $spacer-md; // O usa $spacer-md si está disponible

  // Base para móvil (fuerza 1 columna por defecto)
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;

  $values: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);

  @each $value in $values {
    &.columnastabla-# { $value} {
      @if ($value == 1) {
        // TABLET (Min-width: 576px) -> Equivalente a SM
        @media (min-width: $breakpoint-sm) {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        // DESKTOP (Min-width: 992px) -> Equivalente a LG
        @media (min-width: $breakpoint-lg) {
          grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        }



      }
       @else if ($value == 2) {
        // TABLET (Min-width: 576px) -> Equivalente a SM
        @media (min-width: $breakpoint-sm) {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        // DESKTOP (Min-width: 992px) -> Equivalente a LG
        @media (min-width: $breakpoint-lg) {
          grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        }
      }
      @else if ($value == 3) {
        // TABLET (Min-width: 576px) -> Equivalente a SM
        @media (min-width: $breakpoint-sm)  {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }

        // DESKTOP (Min-width: 992px) -> Equivalente a LG
        @media (min-width: $breakpoint-lg) {
          grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
      }

      @else if ($value == 4) {
        @media (min-width: $breakpoint-sm)  {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        @media (min-width: $breakpoint-lg) { // XL
          grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
      }

       @else if ($value == 5) {
        @media (min-width: $breakpoint-sm)  {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        @media (min-width: $breakpoint-lg) { // XL
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }

       @else if ($value == 6) {
        @media (min-width: $breakpoint-sm)  {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        @media (min-width: $breakpoint-lg) { // XL
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }

       @else if ($value == 7) {
        @media (min-width: $breakpoint-sm)  {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        @media (min-width: $breakpoint-lg) { // XL
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
      }

      // Añade aquí otros valores si los necesitas con la misma lógica
    }
  }
}
*/
/**
 * Botón base con variantes
 * 
 * @param {Color} $bg - Color de fondo
 * @param {Color} $color - Color del texto
 * @example
 *   .btn-custom {
 *     @include button($color-primario, white);
 *   }
 */
/**
 * Tarjeta base
 * 
 * @param {Color} $bg - Color de fondo
 * @param {Number} $padding - Padding interno
 * @example
 *   .card-custom {
 *     @include card(white, 2rem);
 *   }
 */
/**
 * Entrada de formulario
 * 
 * @example
 *   .input-custom {
 *     @include input();
 *   }
 */
/**
 * Ocultar elemento visualmente pero mantener accesibilidad
 * 
 * @example
 *   .sr-only {
 *     @include visually-hidden();
 *   }
 */
/**
 * Limpiar floats
 * 
 * @example
 *   .container {
 *     @include clearfix();
 *   }
 */
/**
 * Resetear lista
 * 
 * @example
 *   ul {
 *     @include reset-list();
 *   }
 */
/**
 * Aspecto ratio (mantener proporción)
 * 
 * @param {Number} $width - Ancho
 * @param {Number} $height - Alto
 * @example
 *   .video {
 *     @include aspect-ratio(16, 9);
 *   }
 */
/**
 * Sombra personalizada
 * 
 * @param {String} $size - Tamaño (sm, md, lg, xl)
 * @example
 *   .card {
 *     @include shadow(md);
 *   }
 */
/**
 * Hover con elevación
 * 
 * @example
 *   .card {
 *     @include hover-lift();
 *   }
 */
/**
 * Scroll suave
 * 
 * @example
 *   .contenedor {
 *     @include smooth-scroll();
 *   }
 */
/**
 * Focus visible accesible
 * 
 * @param {Color} $color - Color del outline
 * @example
 *   button {
 *     @include focus-visible(var(--color-primario));
 *   }
 */
/**
 * Aplicar tema de campus
 * 
 * @param {String} $campus - Nombre del campus (valladolid, palencia, segovia, soria)
 * @example
 *   .contenedor {
 *     @include campus-theme(valladolid);
 *   }
 */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes borderPulse {
  0% {
    border-color: var(--boton-borde-hover);
  }
  50% {
    border-color: var(--boton-borde-pulse);
  }
  100% {
    border-color: var(--boton-borde-hover);
  }
}
@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*

// Media queries
.elemento {
  width: 100%;

  @include respond-to(md) {
    width: 50%;
  }

  @include respond-to(lg) {
    width: 33.333%;
  }
}

// Tipografía responsive
h1 {
  @include fluid-type(2rem, 4rem);
}

// Truncar texto
.titulo {
  @include truncate(2);
}

// Layouts
.hero {
  @include flex-center(column);
  min-height: 100vh;
}

.grid-productos {
  @include auto-grid(300px, 2rem);
}

// Componentes
.mi-boton {
  @include button(var(--color-primario), white);
}

.mi-tarjeta {
  @include card();
  @include hover-lift();
}

// Utilidades
.lista-menu {
  @include reset-list();
}

.video-container {
  @include aspect-ratio(16, 9);
}

// Campus
.seccion-valladolid {
  @include campus-theme(valladolid);
  background: var(--color-tema);
}

*/
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
/**
 * Mixin para transiciones suaves
 */
/*
@mixin smooth-transition($properties: all) {
  transition: $properties $transition-duration ease-in-out;
}
  */
/**
 * Mixin para el efecto hover de tarjetas
 */
/**
 * Mixin para el punto del timeline
 */
/**
 * Mixin para animaciones de aparición
 */
/**
 * Mixin para diferentes delays de animación
 */
/**
 * Mixin para responsive mobile
 */
/**
 * Mixin para limpiar estilos de lista
 */
/**
 * Keyframes para animación de aparición
 */
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/**
 * Keyframes para pulso del punto
 */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(19, 52, 125, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(19, 52, 125, 0);
  }
}
@keyframes scrollAnimation {
  0% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 30px;
    opacity: 0;
  }
}
/**
 * MIXINS SCSS - DOCUMENTOS
 * Universidad de Valladolid
 * 
 * Mixins reutilizables para los diseños de enlaces a documentos
 * 
 * @author: Webmaster UVa
 * @date: 2025
 */
@keyframes flotacion-lenta {
  0% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-52%) translateX(600px);
  }
  100% {
    transform: translateY(-50%) translateX(0);
  }
}
@keyframes flotacion-lenta-big {
  0% {
    transform: scale(1) translateX(0);
  }
  50% {
    transform: scale(1.03) translateX(-500px);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}
@keyframes flotacion-lenta-bottom {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.02) translateY(-100px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: "Libre Franklin", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #1a1a1a;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: #13347d;
}

h1 {
  font-size: 3rem;
}
@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }
}

h2 {
  font-size: 2.25rem;
}
@media (max-width: 768px) {
  h2 {
    font-size: 1.875rem;
  }
}

h3 {
  font-size: 1.875rem;
}
@media (max-width: 768px) {
  h3 {
    font-size: 1.5rem;
  }
}

h4 {
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  h4 {
    font-size: 1.25rem;
  }
}

p {
  margin-bottom: 1rem;
}

a {
  color: #13347d;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
a.blanco {
  color: white !important;
}
a:hover, a:focus {
  color: #c6004c;
  text-decoration: underline;
}

.floating-box {
  position: fixed;
  top: 125px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  padding: 1rem;
  transition: opacity 0.5s ease;
  z-index: 9999;
}
.floating-box.hidden {
  opacity: 0;
  pointer-events: none;
}
.floating-box span {
  color: white;
}
.floating-box a {
  color: white;
}

.container {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (max-width: 1024px) {
  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (max-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}
@media (max-width: 640px) {
  .container {
    padding: 0 1rem;
  }
}

.hero-carousel {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #13347d 0%, #1a46a9 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-sm);
  padding: var(--space-sm);
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
}

.hero-slide-1 {
  background: linear-gradient(135deg, #13347d 0%, #1a46a9 100%);
}
.hero-slide-1 .hero-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.hero-slide-2,
.hero-slide-3,
.hero-slide-4,
.hero-slide-5 {
  background-color: #ffffff;
}

.hero-header {
  grid-row: 1;
  width: 100%;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #13347d 0%, #1a46a9 100%);
  text-align: center;
  border-radius: 0 0 var(--space-sm) var(--space-sm);
}
.hero-header h2 {
  color: #ffffff;
  font-size: 2.25rem;
  margin: 0 0 0.5rem 0;
  font-weight: 400;
  margin-top: 1.5rem;
}
.hero-header h2 strong {
  font-weight: 700;
}
.hero-header p {
  color: #ffffff;
  font-size: var(--text-base);
  margin: 0;
  opacity: 0.95;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .hero-header {
    max-height: 160px;
  }
}
@media (max-width: 768px) {
  .hero-header {
    min-height: 120px;
  }
}

.hero-content {
  grid-row: 2;
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  max-width: min(1200px, 80vw);
  margin: 0 auto;
  padding: var(--space-md);
  overflow-y: auto;
  overflow-x: visible;
}

.hero-title {
  font-size: 3rem;
  color: #ffffff;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  .hero-title {
    font-size: 2em;
  }
}

.hero-subtitle {
  font-size: var(--text-base);
  color: #ffffff;
  margin: 0;
  opacity: 0.95;
  line-height: 1.4;
}

.hero-logo {
  width: 100%;
  max-width: clamp(200px, 55vw, 700px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px var(--hero-shadow));
}

.hero-text {
  font-size: 1.25rem;
  color: #ffffff;
  margin-bottom: 3rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .hero-text {
    font-size: 1.125rem;
  }
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.hero-buttons .btn {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  white-space: nowrap;
}
.hero-buttons .btn .btn-icon {
  width: clamp(16px, 3vmin, 20px);
  height: clamp(16px, 3vmin, 20px);
}

.hero-footer {
  grid-row: 3;
  width: 100%;
  min-height: 60px;
  background: #0c2251;
  border-radius: var(--space-sm) var(--space-sm) 0 0;
}

.hero-footer-buttons {
  grid-row: 3;
  min-height: 60px;
  background: #0c2251;
  display: flex;
  gap: var(--space-md);
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-md);
  z-index: 2;
}
.hero-footer-buttons .btn {
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  transform: translateY(-100%);
}
.hero-footer-buttons .btn:hover {
  transform: translateY(-100%);
}
@media (max-width: 768px) {
  .hero-footer-buttons {
    min-height: 120px;
  }
  .hero-footer-buttons .btn {
    transform: translateY(-180%);
  }
  .hero-footer-buttons .btn:hover {
    transform: translateY(-180%);
  }
}

.logo-comparison {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: min(800px, 90vw);
  margin: 0 auto;
  padding: 1.5rem;
  max-height: calc(100% - 310px);
}
@media (max-width: 768px) {
  .logo-comparison {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    gap: 1.5rem;
    min-height: 40vh;
    justify-content: center;
    align-items: center;
  }
}
.logo-comparison .logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: clamp(120px, 25vw, 200px);
  max-width: 65vw;
}
@media (max-width: 768px) {
  .logo-comparison .logo-item {
    width: 100%;
    max-width: 95vw;
    min-width: unset;
    flex: 1 1 100%;
  }
}
.logo-comparison .logo-item .logo-image {
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 768px) {
  .logo-comparison .logo-item .logo-image {
    max-width: 70vw;
    max-height: 25vh;
    width: auto;
    height: auto;
  }
}
.logo-comparison .logo-item .logo-2008 {
  max-width: 250px;
}
@media (max-width: 768px) {
  .logo-comparison .logo-item .logo-2008 {
    max-width: 40vw;
    max-height: 20vh;
  }
}
@media (max-width: 768px) {
  .logo-comparison .logo-item.logo-item-extended {
    margin-top: 1.5rem;
  }
}
.logo-comparison .logo-item.logo-item-extended .logo-2025 {
  max-width: 50vw;
  width: 50vw;
}
@media (max-width: 768px) {
  .logo-comparison .logo-item.logo-item-extended .logo-2025 {
    max-width: 80vw;
    width: 80vw;
  }
}
.logo-comparison .logo-item .logo-label {
  font-size: 0.875rem;
  color: #666666;
  font-weight: 400;
  margin-top: 0.5rem;
  text-align: center;
}
@media (max-width: 768px) {
  .logo-comparison .logo-item .logo-label {
    font-size: 0.75rem;
    margin-top: 0.5rem;
  }
}
.logo-comparison .logo-arrow {
  flex-shrink: 0;
  width: clamp(30px, 5vw, 50px);
  height: auto;
}
@media (max-width: 768px) {
  .logo-comparison .logo-arrow {
    transform: rotate(90deg);
    width: 30px;
    margin: 1rem 0;
  }
}
.logo-comparison .logo-arrow svg {
  width: 100%;
  height: auto;
  fill: #13347d;
}

@media (max-width: 768px) {
  .hero-slide-2 .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: 100%;
    min-height: 50vh;
  }
}
@media (min-width: 768px) {
  .hero-slide-2 .hero-content {
    height: 60hv;
    margin-top: -160px;
    margin-bottom: -60px;
  }
}

.mockup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  width: 100%;
  padding: var(--space-md);
}

.phone-mockup {
  position: relative;
  width: clamp(180px, 25vw, 280px);
  flex-shrink: 0;
}
.phone-mockup .phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/19.5;
  background: linear-gradient(145deg, #2c2c2c, #1a1a1a);
  border-radius: clamp(20px, 3vw, 35px);
  padding: clamp(8px, 1.5vw, 12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.phone-mockup .phone-notch {
  position: absolute;
  top: clamp(8px, 1.5vw, 12px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 12vw, 120px);
  height: clamp(18px, 2.5vw, 25px);
  background: #000;
  border-radius: 0 0 clamp(10px, 1.5vw, 15px) clamp(10px, 1.5vw, 15px);
  z-index: 1;
}
.phone-mockup .phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: clamp(15px, 2.5vw, 28px);
  overflow: hidden;
}
.phone-mockup .phone-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.phone-mockup .phone-image.active {
  opacity: 1;
}

.laptop-mockup {
  position: relative;
  width: clamp(300px, 45vw, 600px);
  flex-shrink: 0;
}
.laptop-mockup .laptop-container {
  position: relative;
  width: 100%;
}
.laptop-mockup .laptop-screen {
  position: relative;
  width: 538px;
  height: 331px;
  aspect-ratio: 16/10;
  background: #1a1a1a;
  border: clamp(8px, 1.5vw, 12px) solid #2c2c2c;
  border-bottom-width: clamp(2px, 0.5vw, 3px);
  border-radius: clamp(8px, 1.5vw, 12px) clamp(8px, 1.5vw, 12px) 0 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
@media (max-width: 768px) {
  .laptop-mockup .laptop-screen {
    width: 225px;
    height: 138px;
  }
}
.laptop-mockup .laptop-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.laptop-mockup .laptop-image.active {
  opacity: 1;
}
.laptop-mockup .laptop-base {
  width: 110%;
  height: clamp(15px, 2.5vw, 20px);
  background: linear-gradient(to bottom, #262626 0%, #333 50%, #4c4c4c 100%);
  border-radius: 0 0 8px 8px;
  margin: 0 -5%;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  .laptop-mockup .laptop-base {
    max-width: 250px;
    border-width: 8px;
    border-radius: 28px;
  }
}
.laptop-mockup .laptop-base::before {
  content: "";
  position: absolute;
  bottom: clamp(-6px, -1vw, -8px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 10vw, 80px);
  height: clamp(6px, 1vw, 8px);
  background: #1e1e1e;
  border-radius: 0 0 6px 6px;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  width: var(--control-size);
  height: var(--control-size);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.carousel-control svg {
  width: calc(var(--control-size) * 0.5);
  height: calc(var(--control-size) * 0.5);
  stroke: var(--hero-primary);
}
.carousel-control:hover, .carousel-control:focus {
  background-color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}
.carousel-control:focus {
  outline: 2px solid #c6004c;
  outline-offset: 2px;
}

.carousel-prev {
  left: var(--space-md);
}

.carousel-next {
  right: var(--space-md);
}

.carousel-indicators {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-sm);
  z-index: 10;
}

.indicator {
  width: var(--indicator-size);
  height: var(--indicator-size);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.indicator.active {
  background-color: #ffffff;
  transform: scale(1.2);
}
.indicator:hover, .indicator:focus {
  background-color: #ffffff;
  transform: scale(1.1);
}
.indicator:focus {
  outline: 2px solid #c6004c;
  outline-offset: 2px;
}

@media (max-height: 500px) {
  :root {
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.25rem;
    --text-xs: 0.7rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-lg: 1rem;
    --text-xl: 1.15rem;
    --text-2xl: 1.25rem;
    --text-3xl: 1.5rem;
    --hero-header-height: 50px;
    --hero-footer-height: 40px;
    --control-size: 32px;
    --indicator-size: 8px;
  }

  .hero-carousel {
    overflow-y: auto;
  }

  .hero-content {
    justify-content: flex-start;
  }

  .hero-header p {
    display: none;
  }

  .phone-mockup,
.laptop-mockup {
    transform: scale(0.7);
  }
}
@media (max-height: 400px) {
  :root {
    --text-3xl: 1.25rem;
    --text-2xl: 1.1rem;
    --control-size: 28px;
  }

  .hero-header {
    padding: var(--space-sm);
  }
  .hero-header h2 {
    font-size: var(--text-xl);
    margin-bottom: 0;
  }

  .hero-subtitle,
.logo-arrow {
    display: none;
  }

  .carousel-indicators {
    bottom: var(--space-xs);
    gap: var(--space-xs);
  }
}
@media (max-height: 450px) and (orientation: landscape) {
  .hero-slide {
    grid-template-rows: auto 1fr;
  }

  .hero-footer,
.hero-footer-buttons {
    display: none;
  }

  .hero-content {
    padding: var(--space-sm);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@keyframes growWidth {
  from {
    width: 0;
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    width: 80px;
    opacity: 1;
    transform: scaleX(1);
  }
}
@media (min-width: 768px) {
  .diversity-images {
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    overflow: hidden;
  }
  .diversity-images .diversity-image {
    flex: 1 1 auto;
    max-width: 100%;
    max-height: 10vh;
    object-fit: contain;
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  .diversity-images .diversity-image {
    max-height: 40vh;
  }
}
@media (max-width: 768px) {
  .diversity-images {
    width: min(500px, 80vw);
    max-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
  }
  .diversity-images .diversity-image {
    width: 100%;
    height: auto;
  }
}

.legacy-logo {
  max-width: 250px;
  height: auto;
  margin: 3rem auto;
}
@media (max-width: 640px) {
  .legacy-logo {
    max-width: 180px;
  }
}

.digital-showcase {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

.material-mockups-container {
  justify-items: center;
  align-items: center;
  margin: 3rem auto;
  max-width: 1200px;
  max-height: 40vh;
  width: 90%;
  height: 60%;
}
@media (min-width: 768px) {
  .material-mockups-container {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 3rem;
  }
}
@media (max-width: 768px) {
  .material-mockups-container {
    max-width: 450px;
    gap: 1.5rem;
  }
}

@media (min-width: 768px) {
  .material-mockup {
    min-width: 550px;
    height: 40vh;
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 768px) {
  .material-mockup {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1.5rem;
  }
}

.material-image {
  /*

  */
}
@media (min-width: 768px) {
  .material-image {
    position: absolute;
    opacity: 0;
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity 0.3s ease-in-out;
  }
  .material-image.active {
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .material-image {
    position: inherit;
    width: 60%;
    object-fit: contain;
    opacity: 1;
    max-height: 30vh;
  }
}

.digital-showcase {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

.digital-mockups-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  justify-items: center;
  align-items: center;
  margin: 3rem auto;
  max-width: 1200px;
  width: 90%;
}
@media (max-width: 1024px) {
  .digital-mockups-container {
    grid-template-columns: 1fr;
    max-width: 600px;
    gap: 3rem;
  }
}
@media (max-width: 768px) {
  .digital-mockups-container {
    max-width: 450px;
    gap: 0.5rem;
  }
}

.phone-mockup {
  flex: 0 1 auto;
  position: relative;
  width: 200px;
  aspect-ratio: 9/16;
  border: 10px solid #333333;
  border-radius: 35px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  justify-self: center;
}
@media (max-width: 1280px) {
  .phone-mockup {
    max-width: 250px;
    border-width: 9px;
    border-radius: 32px;
  }
}
@media (max-width: 1024px) {
  .phone-mockup {
    justify-self: center;
    max-width: 320px;
    border-width: 12px;
  }
}
@media (max-width: 768px) {
  .phone-mockup {
    max-width: 280px;
    border-width: 10px;
  }
}
@media (max-width: 768px) {
  .phone-mockup {
    max-width: 140px;
    border-width: 8px;
    border-radius: 28px;
  }
}

.mockup-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.mockup-image.active {
  opacity: 1;
}

.laptop-mockup {
  flex: 0 1 auto;
  position: relative;
  width: 550px;
  max-width: 650px;
  justify-self: center;
  flex-shrink: 0;
}
@media (max-width: 1280px) {
  .laptop-mockup {
    max-width: 580px;
  }
}
@media (max-width: 1024px) {
  .laptop-mockup {
    justify-self: center;
    max-width: 700px;
  }
}
@media (max-width: 768px) {
  .laptop-mockup {
    max-width: 600px;
  }
}
@media (max-width: 768px) {
  .laptop-mockup {
    max-width: 250px;
    border-width: 8px;
    border-radius: 28px;
  }
}

.laptop-screen {
  position: relative;
  width: 538px;
  height: 331px;
  background-color: #333333;
  border: 12px solid #333333;
  border-bottom: 4px solid #333333;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .laptop-screen {
    border-width: 10px;
    border-bottom-width: 3px;
    border-radius: 10px 10px 0 0;
  }
}
@media (max-width: 640px) {
  .laptop-screen {
    border-width: 8px;
    border-bottom-width: 2px;
    border-radius: 8px 8px 0 0;
  }
}
@media (max-width: 768px) {
  .laptop-screen {
    width: 250px;
    height: 153px;
  }
}

.laptop-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #ffffff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.laptop-image.active {
  opacity: 1;
}

.laptop-base {
  width: 110%;
  height: 20px;
  background: linear-gradient(to bottom, #262626 0%, #333333 50%, #4d4d4d 100%);
  border-radius: 0 0 8px 8px;
  margin: 0 -5%;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.laptop-base::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 8px;
  background-color: #1f1f1f;
  border-radius: 0 0 6px 6px;
}
@media (max-width: 640px) {
  .laptop-base::before {
    width: 60px;
    height: 6px;
  }
}
@media (max-width: 1024px) {
  .laptop-base {
    height: 18px;
  }
}
@media (max-width: 640px) {
  .laptop-base {
    height: 15px;
  }
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transition: background-color, transform 0.3s ease-in-out;
}
.carousel-control svg {
  width: 24px;
  height: 24px;
  stroke: #13347d;
}
.carousel-control:hover, .carousel-control:focus {
  background-color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}
.carousel-control:focus {
  outline: 2px solid #c6004c;
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .carousel-control {
    width: 40px;
    height: 40px;
  }
  .carousel-control svg {
    width: 20px;
    height: 20px;
  }
}

.carousel-prev {
  left: 2rem;
}
@media (max-width: 640px) {
  .carousel-prev {
    left: 1rem;
  }
}

.carousel-next {
  right: 2rem;
}
@media (max-width: 640px) {
  .carousel-next {
    right: 1rem;
  }
}

.carousel-indicators {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 10;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: background-color, transform 0.3s ease-in-out;
}
.indicator.active {
  background-color: #ffffff;
  transform: scale(1.2);
}
.indicator:hover, .indicator:focus {
  background-color: rgba(255, 255, 255, 0.8);
}
.indicator:focus {
  outline: 2px solid #c6004c;
  outline-offset: 2px;
}

.sticky-header {
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  background-color: #13347D;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}
.sticky-header.visible {
  top: 0;
}
@media (max-width: 768px) {
  .sticky-header {
    top: -200px;
  }
}

.sticky-header-content {
  max-width: 1024px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .sticky-header-content {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}
@media (max-width: 640px) {
  .sticky-header-content {
    padding: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

.sticky-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sticky-logo:hover {
  transform: scale(1.02);
}
.sticky-logo img {
  height: 50px;
  width: auto;
}
@media (max-width: 640px) {
  .sticky-logo img {
    height: 40px;
  }
}

.sticky-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  border-left: 2px solid white;
  padding-left: 1rem;
}
@media (max-width: 768px) {
  .sticky-title {
    font-size: 1.125rem;
  }
}
@media (max-width: 640px) {
  .sticky-title {
    font-size: 1rem;
  }
}

.sticky-nav {
  display: flex;
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .sticky-nav {
    width: 100%;
    justify-content: center;
    gap: 0.75rem;
  }
}
@media (max-width: 640px) {
  .sticky-nav {
    width: 100%;
    justify-content: center;
    gap: 1rem;
  }
}

[id] {
  scroll-margin-top: 80px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Libre Franklin", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color, transform, box-shadow 0.3s ease-in-out;
}
.btn:hover, .btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
.btn:focus {
  outline: 2px solid #c6004c;
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .btn {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
  }
}

.btn-icon {
  width: 20px;
  height: 20px;
}
@media (max-width: 640px) {
  .btn-icon {
    width: 16px;
    height: 16px;
  }
}

.btn-primary {
  background-color: #c6004c;
  color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: #930038;
  color: #ffffff;
}

.btn-secondary {
  background-color: #ffffff;
  color: #13347d;
  border: 2px solid #ffffff;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: transparent;
  color: #ffffff;
}

.btn-primary-small,
.btn-secondary-small {
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
}

.btn-primary-small {
  background-color: #c6004c;
  color: #ffffff;
}
.btn-primary-small:hover, .btn-primary-small:focus {
  background-color: #930038;
  color: #ffffff;
}

.btn-secondary-small {
  background-color: #ffffff;
  color: #13347d;
  border: 2px solid #13347d;
}
.btn-secondary-small:hover, .btn-secondary-small:focus {
  background-color: #13347d;
  color: #ffffff;
}

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: #13347d;
  border: 1px solid #13347d;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color, color 0.3s ease-in-out;
}
.btn-download:hover, .btn-download:focus {
  background-color: #13347d;
  color: #ffffff;
  text-decoration: none;
}

.btn-download-global {
  background-color: #c6004c;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 0 0;
  border-radius: 9999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-download-global:hover {
  background-color: #9d003c;
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.btn-download-global .icon {
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  .btn-download-global {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}

section {
  padding: 0 0;
}
@media (max-width: 768px) {
  section {
    padding: 0 0;
  }
}
@media (max-width: 640px) {
  section {
    padding: 0 0;
  }
}

.section-title {
  font-size: 2.5rem;
  color: #13347d;
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  padding-bottom: 1rem;
}
@media (max-width: 768px) {
  .section-title {
    margin-top: 1.5rem;
  }
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(135deg, #c6004c 0%, #f90060 100%);
  border-radius: 9999px;
}
@media (max-width: 1024px) {
  .section-title {
    font-size: 1.875rem;
    margin-bottom: 2.5rem;
  }
}
@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
}

.presentation-section {
  margin-top: 1.5rem;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}

.presentation-content {
  max-width: 900px;
  margin: 0 auto;
}
.presentation-content p {
  margin-bottom: 0.5rem;
  text-align: justify;
}
@media (max-width: 640px) {
  .presentation-content p {
    font-size: 1rem;
  }
}

.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 768px) {
  .two-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media (max-width: 768px) {
  .two-columns .order1 {
    order: 1;
  }
  .two-columns .order2 {
    order: 2;
  }
}

.column p {
  margin-bottom: 0.5rem;
}
.column img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.comparison-section {
  background-color: #ffffff;
}

.logo-comparison-large {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-radius: 1rem;
}
@media (max-width: 768px) {
  .logo-comparison-large {
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
  }
}
@media (max-width: 768px) {
  .logo-comparison-large {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.comparison-item {
  text-align: center;
}
.comparison-item img {
  max-width: 250px;
  height: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
}
@media (max-width: 640px) {
  .comparison-item img {
    max-width: 180px;
  }
}

.comparison-label {
  display: block;
  font-size: 1rem;
  color: #666666;
  font-weight: 700;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-arrow {
  font-size: 3rem;
  color: #13347d;
  font-weight: 700;
  animation: pulse 2s ease-in-out infinite;
}
@media (max-width: 768px) {
  .comparison-arrow {
    transform: rotate(90deg);
    font-size: 2.25rem;
  }
}
@media (max-width: 768px) {
  .comparison-arrow {
    transform: rotate(90deg);
  }
}

.typography-section {
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}

.font-samples {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}

.font-sample {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.font-sample:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.font-name {
  font-size: 1.5rem;
  color: #13347d;
  margin-bottom: 1.5rem;
}

.font-demo {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.font-demo.franklin-gothic {
  font-family: "Franklin Gothic", sans-serif;
}
.font-demo.libre-franklin {
  font-family: "Libre Franklin", sans-serif;
}
.font-demo.roboto {
  font-family: "Roboto", sans-serif;
}

.typography-showcase {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.showcase-logo {
  max-width: 400px;
  height: auto;
  margin-bottom: 0;
}

.showcase-example {
  font-size: 1.25rem;
  color: #13347d;
  margin-bottom: 1rem;
}

.showcase-headline {
  font-size: 2.5rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
}
@media (max-width: 640px) {
  .showcase-headline {
    font-size: 2rem;
  }
}

.showcase-motto {
  font-size: 1.125rem;
  color: #666666;
  font-style: italic;
  margin-bottom: 2rem;
}

.font-weights {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  flex-wrap: wrap;
}
.font-weights span {
  padding: 0.5rem 1.5rem;
  background-color: #e7e7e7;
  border-radius: 4px;
  font-size: 0.875rem;
}
.font-weights span.weight-light {
  font-weight: 300;
}
.font-weights span.weight-regular {
  font-weight: 400;
}
.font-weights span.weight-medium {
  font-weight: 500;
}
.font-weights span.weight-bold {
  font-weight: 700;
}

.applications-section {
  background-color: #ffffff;
}

.applications-carousel {
  position: relative;
}

.carousel-slide-container {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
@media (max-width: 640px) {
  .carousel-slide-container {
    height: 350px;
  }
}
@media (max-width: 768px) {
  .carousel-slide-container {
    height: 250px;
  }
}

.app-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.app-image.active {
  opacity: 1;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  padding: 0.75rem;
  background: #f5f5f5;
  border-radius: 9999px;
  display: inline-flex;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #dadada;
  border: none;
  cursor: pointer;
  transition: background-color, transform 0.3s ease-in-out;
}
.dot.active {
  background-color: #13347d;
  transform: scale(1.2);
}
.dot:hover, .dot:focus {
  background-color: #c6004c;
}

.transitional-section {
  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
}

.transitional-content {
  max-width: 900px;
  margin: 0 auto;
}
.transitional-content p {
  margin-bottom: 1.5rem;
  text-align: justify;
}
@media (max-width: 640px) {
  .transitional-content p {
    font-size: 1rem;
  }
}

.main-footer {
  background-color: #13347d;
  color: #ffffff;
  padding: 4rem 0 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

.footer-logo img {
  max-width: 200px;
  height: auto;
}

.footer-info p {
  margin-bottom: 0.5rem;
  color: #ffffff;
}
.footer-info a {
  color: #ffffff;
  text-decoration: underline;
}
.footer-info a:hover, .footer-info a:focus {
  color: #f4bf24;
}

.footer-links h3 {
  color: #ffffff;
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}
.footer-links ul {
  list-style: none;
}
.footer-links ul li {
  margin-bottom: 0.5rem;
}
.footer-links ul a {
  color: #ffffff;
  text-decoration: none;
}
.footer-links ul a:hover, .footer-links ul a:focus {
  color: #f4bf24;
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-bottom p {
  margin-bottom: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
}

.footer-motto {
  font-style: italic;
  color: #f4bf24 !important;
  font-weight: 700;
}

.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #c6004c;
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity, visibility, transform 0.3s ease-in-out;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover, .back-to-top:focus {
  transform: translateY(-4px);
  background-color: #930038;
}
.back-to-top:focus {
  outline: 2px solid #f4bf24;
  outline-offset: 2px;
}
.back-to-top svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
}
@media (max-width: 640px) {
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 45px;
    height: 45px;
  }
  .back-to-top svg {
    width: 20px;
    height: 20px;
  }
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #c6004c;
  color: #ffffff;
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;
}

*:focus-visible {
  outline: 2px solid #c6004c;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.text-center {
  text-align: center;
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.recursos-header {
  background-color: #13347d;
  padding: 1.5rem 0;
  margin-bottom: 0.5rem;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.5rem;
  }
}

.header-logo img {
  height: 60px;
  width: auto;
}
@media (max-width: 768px) {
  .header-logo img {
    height: 50px;
  }
}

.header-title h1 {
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 0;
}
@media (max-width: 768px) {
  .header-title h1 {
    font-size: 1.25rem;
    text-align: center;
  }
}

.recursos-main {
  min-height: calc(100vh - 300px);
  padding-bottom: 3rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  padding-top: 0.5rem;
}
@media (max-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }
}

.page-title {
  padding: 0;
  margin-top: 1.5rem;
}
.page-title h1 {
  margin-bottom: 0.5rem;
  font-size: 2.25rem;
}
@media (max-width: 768px) {
  .page-title h1 {
    font-size: 1.5rem;
  }
}
.page-title h2 {
  font-size: 1.75rem;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .page-title h2 {
    font-size: 1.5rem;
  }
}

.update-date {
  font-size: 0.875rem;
  color: #666666;
  text-align: right;
  font-weight: 500;
}

.intro-section {
  margin-bottom: 1.5rem;
  padding: 0;
}
.intro-section p {
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}
@media (max-width: 768px) {
  .intro-section p {
    font-size: 1rem;
  }
}
.intro-section a {
  color: #13347d;
  text-decoration: none;
  font-weight: 600;
}
.intro-section a:hover {
  text-decoration: underline;
  color: #c6004c;
}

.recursos-section {
  margin-bottom: 3rem;
}
.recursos-section p.small {
  margin-top: 8px;
  font-size: 0.8rem;
}

.section-header {
  background-color: #13347d;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .section-header {
    font-size: 1.25rem;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
  }
}
@media (max-width: 768px) {
  .section-header {
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
  }
}
.section-header > h2 > a  {
  color: white !important;
}
.section-header.aplicaciones {
  background-color: #13347d;
}
.section-header.aplicaciones > h2 > a  {
  color: white !important;
}
.section-header.digitales {
  background-color: #13347d;
}
.section-header.digitales > h2 > a  {
  color: white !important;
}

.recursos-list {
  list-style: none;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.recursos-list.principal {
  margin-bottom: 1.5rem;
}
.recursos-list.principal .recurso-icon {
  flex: 1 1 auto;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .recursos-list.principal .recurso-icon {
    flex-direction: column;
    justify-content: center;
  }
}
.recursos-list.principal .recurso-icon img {
  width: auto;
}
.recursos-list.principal .recurso-content {
  flex: 1 1 auto;
}

.recurso-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dadada;
  padding-left: 0.5rem;
  min-height: 85px;
}
.recurso-item:last-child {
  border-bottom: none;
}
.recurso-item:hover {
  background-color: #fafafa;
}
@media (max-width: 768px) {
  .recurso-item {
    flex-direction: column;
    margin-bottom: 0.25rem;
  }
}

.recurso-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s;
}
.recurso-link p {
  margin-block-start: 0em;
  margin-block-end: 0em;
}
@media (max-width: 768px) {
  .recurso-link {
    flex-direction: column;
    margin-bottom: 0.25rem;
    text-align: center;
  }
}
.recurso-link:first-child {
  padding-bottom: 0px;
}
.recurso-link:hover {
  background-color: rgba(19, 52, 125, 0.03);
}

.recurso-icon {
  width: 125px;
  height: 64px;
  margin-right: 1.25rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}
.recurso-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .recurso-icon {
    width: 100%;
    margin-right: 0;
    justify-content: center;
  }
}

.recurso-content {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.recurso-content h4 {
  color: #13347d;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
@media (max-width: 768px) {
  .recurso-content h4 {
    font-size: 0.9375rem;
  }
}
.recurso-content p span {
  padding-left: 0.5rem;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
}
.recurso-content p svg {
  margin-left: 8px;
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 768px) {
  .recurso-content {
    font-size: 0.9375rem;
    align-items: center;
  }
}

.recurso-meta {
  font-size: 0.875rem;
  color: #666666;
  margin: 0;
}

.recurso-badge {
  background-color: #c6004c;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.375rem 0.75rem;
  border-radius: 50px;
  display: inline-block;
}
@media (max-width: 768px) {
  .recurso-badge {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
  }
}
.recurso-badge.azul {
  background-color: #13347d;
}
.recurso-badge.rojo {
  background-color: #c6004c;
}

.aplicaciones-subtitle {
  color: #13347d;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.aplicaciones-list {
  list-style: none;
  columns: 2;
}
@media (max-width: 768px) {
  .aplicaciones-list {
    columns: 1;
  }
}
.aplicaciones-list li {
  padding: 0 0;
  border-bottom: 1px solid #dadada;
  display: flex;
  gap: 8px;
}
.aplicaciones-list li:last-child {
  border-bottom: none;
}
.aplicaciones-list li:hover {
  background-color: #fafafa;
  padding-left: 0.5rem;
}
.aplicaciones-list li a {
  color: #13347d;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.aplicaciones-list li a:hover {
  text-decoration: underline;
  color: #c6004c;
  transform: translateX(4px);
  cursor: pointer;
}
.aplicaciones-list li a span {
  display: flex;
}
.aplicaciones-list li a span svg {
  margin-left: 8px;
  width: 20px;
  height: auto;
  fill: #13347d;
}
.aplicaciones-list.digitales {
  columns: 2;
  column-gap: 3rem;
}
@media (max-width: 768px) {
  .aplicaciones-list.digitales {
    columns: 1;
  }
}

.download-icon {
  font-size: 1rem;
}

.detalle-page {
  background-color: #dadada;
}

.detalle-header {
  background-color: #c6004c;
  padding: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .detalle-header {
    padding: 1.5rem;
  }
}

.section-header-detalle {
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
}
@media (max-width: 768px) {
  .section-header-detalle {
    font-size: 1.5rem;
  }
}

.recurso-header {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  padding: 0 2rem;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .recurso-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

.recurso-title {
  color: #13347d;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}
@media (max-width: 768px) {
  .recurso-title {
    font-size: 1.25rem;
  }
}

.btn-download-global {
  background-color: #c6004c;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s, transform 0.2s;
}
.btn-download-global:hover {
  background-color: #9d003c;
  transform: translateY(-2px);
}
.btn-download-global .icon {
  font-size: 1.125rem;
}
@media (max-width: 768px) {
  .btn-download-global {
    width: 100%;
    justify-content: center;
    font-size: 0.9375rem;
    padding: 1rem 1.5rem;
  }
}

.versiones-section {
  background-color: #ffffff;
  padding: 1.5rem;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .versiones-section {
    padding: 1.5rem;
  }
}
.versiones-section#marcas-institucionales img {
  max-height: 64px;
  max-width: 325px;
  height: auto;
  max-width: 100%;
}

#marca-principal-vertical img {
  max-height: 100px;
}

#marca-secundaria img {
  max-height: 80px;
}

.versiones-title {
  /*padding: $spacer-md;
    background-color: $color-primary-blue;
    color: white;
    font-size: 2rem; //1.25rem;
    font-weight: 700;
    margin-bottom: $spacing-sm;

    @include mobile {
        font-size: 1.125rem;
    }
        */
  font-size: 2.5rem;
  color: #13347d;
  margin-bottom: 1rem;
  text-align: center;
  position: relative;
  padding-bottom: 1rem;
}
.versiones-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(135deg, #c6004c 0%, #f90060 100%);
  border-radius: 9999px;
}
@media (max-width: 1024px) {
  .versiones-title {
    font-size: 1.875rem;
    margin-bottom: 2.5rem;
  }
}
@media (max-width: 768px) {
  .versiones-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}
@media (max-width: 768px) {
  .versiones-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
}

.versiones-subtitle {
  font-size: 1.75rem;
  font-weight: 600;
  color: #13347d;
  text-align: center;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .versiones-subtitle {
    font-size: 1rem;
  }
}
.versiones-subtitle span {
  font-weight: 500;
}

.versiones-table-wrapper {
  overflow-x: auto;
  margin-bottom: 0;
}

.versiones-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}
.versiones-table thead tr {
  background-color: #13347d;
}
.versiones-table thead tr th {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.5rem 1.5rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.versiones-table thead tr th:last-child {
  border-right: none;
}
@media (max-width: 768px) {
  .versiones-table thead tr th {
    font-size: 0.8125rem;
    padding: 1rem;
  }
}
.versiones-table tbody .preview-row {
  background-color: #ffffff;
}
.versiones-table tbody .preview-row td {
  padding: 0.5rem;
  border-right: 1px solid #dadada;
  border-bottom: 2px solid #dadada;
}
.versiones-table tbody .preview-row td:last-child {
  border-right: none;
}
@media (max-width: 768px) {
  .versiones-table tbody .preview-row td {
    padding: 1.5rem;
  }
}
.versiones-table tbody .info-row td {
  padding: 0.5rem;
  border-right: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
}
.versiones-table tbody .info-row td:last-child {
  border-right: none;
}
@media (max-width: 768px) {
  .versiones-table tbody .info-row td {
    padding: 1.5rem;
  }
}
.versiones-table tbody .info-row .font-info p {
  margin-block-end: 0.5em;
}
.versiones-table tbody .info-row .font-info p:last-child {
  margin-block-end: 0em;
}
.versiones-table tbody .download-row:nth-child(even) {
  background-color: rgba(218, 218, 218, 0.5);
}
.versiones-table tbody .download-row td {
  border-right: 1px solid #dadada;
  font-size: 0.875rem;
  text-align: center;
  position: relative;
  align-content: center;
  justify-content: space-around;
}
.versiones-table tbody .download-row td .cell-content {
  display: flex;
  height: 100%;
}
@media (max-width: 768px) {
  .versiones-table tbody .download-row td .cell-content {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .versiones-table tbody .download-row td .cell-content {
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }
}
.versiones-table tbody .download-row td:last-child {
  border-right: none;
}
.versiones-table tbody .download-row td.movil {
  display: none;
}
@media (max-width: 768px) {
  .versiones-table tbody .download-row td {
    padding: 1rem;
    font-size: 0.8125rem;
  }
  .versiones-table tbody .download-row td.movil {
    display: block;
  }
}
@media (max-width: 768px) {
  .versiones-table thead {
    display: none;
  }
  .versiones-table tbody,
.versiones-table tr,
.versiones-table td {
    display: block;
  }
  .versiones-table tbody tr {
    margin-bottom: 2rem;
    border: 1px solid #dadada;
    border-radius: 8px;
    overflow: hidden;
  }
  .versiones-table tbody tr.preview-row td {
    border-right: none;
    border-bottom: 1px solid #dadada;
  }
  .versiones-table tbody tr.preview-row td:last-child {
    border-bottom: none;
  }
  .versiones-table tbody tr.preview-row td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #13347d;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
  }
  .versiones-table tbody tr.download-row td {
    border-right: none;
    border-bottom: 1px solid #dadada;
  }
  .versiones-table tbody tr.download-row td:last-child {
    border-bottom: none;
  }
  .versiones-table tbody tr.download-row td::before {
    content: attr(data-label) " - " attr(data-format);
    display: block;
    font-weight: 600;
    color: #666666;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
  }
}

.versiones-download {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.versiones-download:hover a {
  color: white;
}

.version-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}
.version-preview img {
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  min-width: 100%;
}
.version-preview.dark {
  background-color: #1a1a1a;
  padding: 1.5rem;
}

.download-link {
  color: #13347d;
  text-decoration: none;
  font-weight: 500;
  display: block;
}
.download-link:hover {
  text-decoration: underline;
  color: #0c2251;
}

.no-disponible {
  text-align: center;
  color: #666666;
  display: block;
  font-size: 1.25rem;
}

.version-download-actions {
  text-align: center;
}

.btn-download-version {
  background-color: #ffffff;
  color: #c6004c;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 1rem 2rem;
  border: 2px solid #c6004c;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}
.btn-download-version:hover {
  background-color: #c6004c;
  color: #ffffff;
}
.btn-download-version .icon {
  font-size: 1rem;
}
@media (max-width: 768px) {
  .btn-download-version {
    width: 100%;
    justify-content: center;
    font-size: 0.775rem;
    font-weight: 400;
    padding: 1rem 1.5rem;
  }
}

.versiones-table#marcas-institucionales img {
  max-height: 64px;
  height: 64px;
  width: auto;
  max-width: 100%;
}
.versiones-table#marcas-institucionales thead th:first-child {
  width: 25%;
  min-width: 200px;
}
.versiones-table#marcas-institucionales thead th:nth-child(2) {
  width: 15%;
  min-width: 120px;
}
.versiones-table#marcas-institucionales thead th:nth-child(3), .versiones-table#marcas-institucionales thead th:nth-child(4), .versiones-table#marcas-institucionales thead th:nth-child(5), .versiones-table#marcas-institucionales thead th:nth-child(6) {
  width: 15%;
  min-width: 100px;
}
.versiones-table#marcas-institucionales tbody .preview-row:hover {
  background-color: #fafafa;
}
.versiones-table#marcas-institucionales tbody .preview-row td {
  vertical-align: middle;
}
.versiones-table#marcas-institucionales tbody .preview-row td:first-child strong {
  color: #13347d;
  font-size: 1rem;
  line-height: 1.5;
}
.versiones-table#marcas-institucionales tbody .preview-row td:nth-child(2) .version-preview {
  min-height: 80px;
  padding: 0.5rem;
}
.versiones-table#marcas-institucionales tbody .preview-row td:nth-child(2) .version-preview img {
  max-height: 64px;
  width: auto;
  max-width: 100%;
}
.versiones-table#marcas-institucionales tbody .preview-row td:nth-child(3), .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(4), .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(5), .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(6) {
  text-align: center;
}
.versiones-table#marcas-institucionales tbody .preview-row td:nth-child(3) .cell-content, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(4) .cell-content, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(5) .cell-content, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(6) .cell-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.versiones-table#marcas-institucionales tbody .preview-row td:nth-child(3) .cell-content a, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(4) .cell-content a, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(5) .cell-content a, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(6) .cell-content a {
  color: #13347d;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: all 200ms;
}
.versiones-table#marcas-institucionales tbody .preview-row td:nth-child(3) .cell-content a:hover, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(4) .cell-content a:hover, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(5) .cell-content a:hover, .versiones-table#marcas-institucionales tbody .preview-row td:nth-child(6) .cell-content a:hover {
  background-color: #13347d;
  color: #ffffff;
  text-decoration: none;
}
@media (max-width: 768px) {
  .versiones-table#marcas-institucionales thead {
    display: none;
  }
  .versiones-table#marcas-institucionales tbody,
.versiones-table#marcas-institucionales tr,
.versiones-table#marcas-institucionales td {
    display: block;
  }
  .versiones-table#marcas-institucionales tbody tr {
    margin-bottom: 2rem;
    border: 2px solid #dadada;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td {
    border-right: none;
    border-bottom: 1px solid #dadada;
    padding: 1rem;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:last-child {
    border-bottom: none;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td::before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 700;
    color: #13347d;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:first-child {
    background-color: #fafafa;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:first-child::before {
    display: none;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:first-child strong {
    display: block;
    font-size: 1.125rem;
    color: #13347d;
    padding: 0.5rem 0;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(2) .version-preview {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background-color: #fafafa;
    border-radius: 0.375rem;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(2) .version-preview img {
    max-height: 120px;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(3) .cell-content, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(4) .cell-content, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(5) .cell-content, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(6) .cell-content {
    justify-content: flex-start;
    gap: 0.75rem;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(3) .cell-content a, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(4) .cell-content a, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(5) .cell-content a, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(6) .cell-content a {
    flex: 1;
    text-align: center;
    padding: 0.5rem 0.75rem;
    background-color: #f5f5f5;
    border: 1px solid #dadada;
    border-radius: 0.375rem;
  }
  .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(3) .cell-content a:hover, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(4) .cell-content a:hover, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(5) .cell-content a:hover, .versiones-table#marcas-institucionales tbody tr.preview-row td:nth-child(6) .cell-content a:hover {
    border-color: #13347d;
  }
}

.versiones-download {
  text-align: center;
  margin-top: 0;
  padding-top: 1.5rem;
}
@media (max-width: 768px) {
  .versiones-download {
    margin-top: 0;
    padding-top: 0.5rem;
  }
}

#escudo .versiones-download {
  padding-top: 0;
}

@media (max-width: 768px) {
  .versiones-table thead {
    display: none;
  }
  .versiones-table tbody,
.versiones-table tr,
.versiones-table td {
    display: block;
  }
  .versiones-table tbody tr {
    margin-bottom: 2rem;
    border: 1px solid #dadada;
    border-radius: 8px;
    overflow: hidden;
  }
  .versiones-table tbody tr.preview-row td {
    border-right: none;
    border-bottom: 1px solid #dadada;
  }
  .versiones-table tbody tr.preview-row td:last-child {
    border-bottom: none;
  }
  .versiones-table tbody tr.preview-row td::before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 700;
    color: #13347d;
    margin-right: 0.5rem;
    font-size: 0.875rem;
  }
  .versiones-table tbody tr.download-row td {
    border-right: none;
    border-bottom: 1px solid #dadada;
    padding: 0.5rem 1.5rem;
  }
  .versiones-table tbody tr.download-row td:last-child {
    border-bottom: none;
  }
  .versiones-table tbody tr.download-row td::before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 400;
    color: #1a1a1a;
    margin-right: 0.5rem;
    font-size: 0.775rem;
    white-space: nowrap;
  }
  .versiones-table tbody tr.download-row td .cell-content {
    display: inline-flex;
    gap: 0.25rem;
    vertical-align: middle;
  }
  .versiones-table tbody tr.download-row td a, .versiones-table tbody tr.download-row td span {
    display: inline;
    font-weight: 600;
    margin-right: 0.5rem;
    font-size: 0.875rem;
  }
}
.recursos-footer {
  background-color: #13347d;
  color: #ffffff;
  padding: 2rem 0;
  margin-top: 3rem;
  text-align: center;
}
.recursos-footer p {
  margin-bottom: 0.5rem;
}
.recursos-footer a {
  color: #ffffff;
  text-decoration: underline;
}
.recursos-footer a:hover {
  color: rgba(255, 255, 255, 0.8);
}

*:focus-visible {
  outline: 2px solid #c6004c;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.color-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 992px) {
  .color-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 768px) {
  .color-cards-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.color-card {
  background-color: #ffffff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.color-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.color-sample {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  min-height: 90px;
}
@media (max-width: 768px) {
  .color-sample {
    height: 160px;
    padding: 1rem;
  }
}
.color-sample.gray-dark {
  background-color: #333333;
}
.color-sample.gray-light {
  background-color: #dadada;
}

.color-label {
  color: #ffffff;
}
.color-label.dark-text {
  color: #1a1a1a;
}

.pantone-name {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
@media (max-width: 768px) {
  .pantone-name {
    font-size: 1rem;
  }
}

.color-info {
  padding: 0.5rem;
  background-color: #ffffff;
}
@media (max-width: 768px) {
  .color-info {
    padding: 1rem;
  }
}

.color-code {
  font-size: 0.8125rem;
  color: #666666;
  margin-bottom: 0.5rem;
}
.color-code p {
  margin-bottom: 0.5rem;
}
.color-code:last-child {
  margin-bottom: 0;
}
.color-code strong {
  color: #1a1a1a;
  font-weight: 700;
}
@media (max-width: 768px) {
  .color-code {
    font-size: 0.75rem;
  }
}

.gradients-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .gradients-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.gradient-bar {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gradient-content {
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem;
}
@media (max-width: 768px) {
  .gradient-content {
    height: 100px;
    padding: 1rem;
  }
}
.gradient-content.blue-gradient {
  background: linear-gradient(to right, #13347d 0%, rgba(19, 52, 125, 0.9) 10%, rgba(19, 52, 125, 0.8) 20%, rgba(19, 52, 125, 0.7) 30%, rgba(19, 52, 125, 0.6) 40%, rgba(19, 52, 125, 0.5) 50%, rgba(19, 52, 125, 0.4) 60%, rgba(19, 52, 125, 0.3) 70%, rgba(19, 52, 125, 0.2) 80%, rgba(19, 52, 125, 0.1) 90%, rgba(19, 52, 125, 0.05) 100%);
}
.gradient-content.burgundy-gradient {
  background: linear-gradient(to right, #c6004c 0%, rgba(198, 0, 76, 0.9) 10%, rgba(198, 0, 76, 0.8) 20%, rgba(198, 0, 76, 0.7) 30%, rgba(198, 0, 76, 0.6) 40%, rgba(198, 0, 76, 0.5) 50%, rgba(198, 0, 76, 0.4) 60%, rgba(198, 0, 76, 0.3) 70%, rgba(198, 0, 76, 0.2) 80%, rgba(198, 0, 76, 0.1) 90%, rgba(198, 0, 76, 0.05) 100%);
}

.gradient-label {
  color: #ffffff;
}

.gradient-text {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .gradient-text {
    font-size: 1rem;
  }
}

.gradient-info {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
}

.gradient-scale {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
}
.gradient-scale span {
  font-size: 0.6875rem;
  color: #666666;
  font-weight: 600;
}
@media (max-width: 768px) {
  .gradient-scale span {
    font-size: 0.625rem;
  }
}
@media (max-width: 768px) {
  .gradient-scale {
    padding: 0.5rem 1rem;
  }
}

.color-examples-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
@media (max-width: 992px) {
  .color-examples-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 768px) {
  .color-examples-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.color-example {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}
.color-example:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.example-visual {
  height: 150px;
}
@media (max-width: 992px) {
  .example-visual {
    height: 150px;
  }
}
@media (max-width: 768px) {
  .example-visual {
    height: 100px;
  }
}
.example-visual.solid-burgundy {
  background-color: #c6004c;
}
.example-visual.solid-blue {
  background-color: #13347d;
}
.example-visual.gradient-vertical {
  background: linear-gradient(to bottom, #c6004c 0%, rgba(198, 0, 76, 0.8) 30%, rgba(109, 26, 101, 0.6) 50%, rgba(19, 52, 125, 0.8) 70%, #13347d 100%);
}
.example-visual.gradient-diagonal {
  background: linear-gradient(135deg, #000000 0%, #0d1b3d 30%, #1a2f5a 50%, #4d2847 70%, rgba(198, 0, 76, 0.8) 85%, #c6004c 100%);
}

footer {
  margin-top: 70px;
  background-color: var(--color-pie);
}
footer .pie {
  color: var(--color-texto-pie);
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 0) {
  footer .pie {
    max-width: 540px;
  }
}
@media (min-width: 576px) {
  footer .pie {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  footer .pie {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  footer .pie {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  footer .pie {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  footer .pie {
    max-width: 1320px;
  }
}
@media (min-width: 576px) {
  footer .pie {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  footer .pie {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  footer .pie {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  footer .pie {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  footer .pie {
    max-width: 1320px;
  }
}
footer .pie > .mapa {
  border-top: 1px solid #c5c5c5;
  border-bottom: 1px solid #c5c5c5;
  background-color: #f2f2f2;
}
footer .pie > .mapa > .gmap {
  margin: 0;
  padding: 0;
}
footer .pie-contenido {
  background-color: var(--color-pie);
  color: var(--color-texto-pie);
  display: grid;
  grid-gap: 1.5rem;
  justify-content: stretch;
  gap: 1.5rem;
  grid-template-columns: minmax(1fr);
}
@media (min-width: 640px) {
  footer .pie-contenido {
    grid-template-columns: minmax(1fr) minmax(0, 1fr);
  }
}
@media (min-width: 768px) {
  footer .pie-contenido {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (min-width: 1024px) {
  footer .pie-contenido {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}
footer .pie-contenido-logo {
  margin-top: 20px;
}
footer .pie-contenido-logo img {
  width: 100%;
  height: auto;
}
footer .pie-contenido-enlaces h1 {
  color: var(--color-texto-pie);
  font-family: "Franklin Gothic Book", "Libre Franklin", "Roboto", "Lato", sans-serif;
  margin-top: 0px;
  padding: 5px 0px;
  font-size: 1.3em;
}
footer .pie-contenido-enlaces ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 11px;
}
footer .pie-contenido-enlaces li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 2em;
}
footer .pie-contenido-enlaces li > img {
  height: 20px;
  filter: brightness(0) invert(100%);
}
footer .pie-contenido-enlaces li > a {
  color: var(--color-texto-pie);
  text-decoration: none;
  font-weight: 500;
}
footer .pie-contenido-enlaces li > a > img {
  height: 20px;
  filter: brightness(0) invert(100%);
}
footer .pie-contenido-enlaces li > a:visited {
  color: var(--color-texto-pie);
}
footer .pie-contenido-enlaces li > a:hover, footer .pie-contenido-enlaces li > a:focus {
  text-decoration: underline;
}
footer .pie-contenido-enlaces li > a > img {
  height: auto;
  width: 24px;
  filter: invert(1);
}
footer .pie-redes {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  footer .pie-redes {
    flex-direction: row;
  }
}
footer .pie-redes-listado {
  flex: 1 0 40%;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
footer .pie-redes-listado a {
  font-size: 1.5em;
  color: var(--color-texto);
  text-decoration: none;
}
footer .pie-redes-listado img {
  height: 60px;
  filter: brightness(0) invert(1);
}
footer .pie-redes-lema {
  flex: 1 1 30%;
  text-align: left;
  line-height: 1;
  font-size: 28px;
}
footer .pie-politica {
  margin-top: 15px;
  color: white;
  background-color: var(--color-cierre);
  text-align: center;
}
footer .pie-politica-contenido {
  background-color: var(--color-cierre);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}
footer .pie-politica-contenido-direccion {
  margin-bottom: 5px;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
footer .pie-politica-contenido-direccion > span {
  color: var(--color-texto-pie);
  font-family: "Franklin Gothic Book", "Libre Franklin", "Roboto", "Lato", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  margin-top: 5px;
}
footer .pie-politica-contenido-direccion > span > a {
  color: white;
}
footer .pie-politica-contenido-direccion > span > a:hover, footer .pie-politica-contenido-direccion > span > a:focus {
  color: white;
}
footer .pie-politica-contenido-derechos {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
footer .pie-politica-contenido-derechos > p {
  color: white;
  font-size: "Roboto", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  margin-top: 5px;
}
footer .pie-politica-contenido-derechos > p > a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}
footer .pie-politica-contenido-derechos > p > a:hover, footer .pie-politica-contenido-derechos > p > a:focus {
  color: white;
  text-decoration: underline;
}

.imagencomparacion-comparacion {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}

.comparacion-contenido {
  position: relative;
  max-height: 45vh;
  width: 80%;
  aspect-ratio: 4/3;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-height: 250px;
}
.comparacion-contenido.columnas-1 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-1 {
    width: 8.3333333333%;
  }
}
.comparacion-contenido.columnas-2 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-2 {
    width: 16.6666666667%;
  }
}
.comparacion-contenido.columnas-3 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-3 {
    width: 25%;
  }
}
.comparacion-contenido.columnas-4 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-4 {
    width: 33.3333333333%;
  }
}
.comparacion-contenido.columnas-5 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-5 {
    width: 41.6666666667%;
  }
}
.comparacion-contenido.columnas-6 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-6 {
    width: 50%;
  }
}
.comparacion-contenido.columnas-7 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-7 {
    width: 58.3333333333%;
  }
}
.comparacion-contenido.columnas-8 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-8 {
    width: 66.6666666667%;
  }
}
.comparacion-contenido.columnas-9 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-9 {
    width: 75%;
  }
}
.comparacion-contenido.columnas-10 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-10 {
    width: 83.3333333333%;
  }
}
.comparacion-contenido.columnas-11 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-11 {
    width: 91.6666666667%;
  }
}
.comparacion-contenido.columnas-12 {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .comparacion-contenido.columnas-12 {
    width: 100%;
  }
}
.comparacion-contenido .imagenuno,
.comparacion-contenido .imagendos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: white;
}
.comparacion-contenido .imagenuno img,
.comparacion-contenido .imagendos img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  width: 80%;
  height: 80%;
}
.comparacion-contenido .imagenuno .imagen-etiqueta,
.comparacion-contenido .imagendos .imagen-etiqueta {
  position: absolute;
  top: 1.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 0.25rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 400;
}
.comparacion-contenido .imagen2 {
  clip-path: inset(0 0 0 50%);
}
.comparacion-contenido .comparacion-slider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  z-index: 10;
  cursor: ew-resize;
}
.comparacion-contenido .comparacion-slider .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}
.comparacion-contenido .comparacion-slider .slider-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}
.comparacion-contenido .comparacion-slider .slider-button::before, .comparacion-contenido .comparacion-slider .slider-button::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 100vh;
  background: #ffffff;
  transform: translateY(-50%);
}
.comparacion-contenido .comparacion-slider .slider-button::before {
  right: 20px;
}
.comparacion-contenido .comparacion-slider .slider-button::after {
  left: 20px;
}

.comparacion-controles {
  text-align: center;
  margin-top: 2rem;
}
.comparacion-controles .boton-animacion {
  background: #13347D;
  color: #ffffff;
  border: none;
  padding: 0.5rem 2rem;
  border-radius: 12px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 200ms;
}
.comparacion-controles .boton-animacion:hover {
  background: #2D5089;
  transform: translateY(-2px);
}
.comparacion-controles .boton-animacion svg {
  width: 20px;
  height: 20px;
}

/* Modal para el PDF */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: relative;
  margin: 2% auto;
  width: 90%;
  height: 90%;
}

.close {
  position: absolute;
  top: -40px;
  right: 0;
  color: white;
  font-size: 35px;
  cursor: pointer;
  padding: 10px 10px;
  margin: 3rem;
  background-color: #c6004c;
  border-radius: 99px;
  width: 48px;
  height: 48px;
  line-height: 1;
  text-align: center;
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Estilos para el banner RGPD */
.rgpd-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 9999;
  animation: slideUp 0.3s ease-out;
  background-color: #13347d;
}

/* Contenedor del contenido */
.rgpd-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* Texto del banner */
.rgpd-text {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: white;
}

.rgpd-text a {
  color: white;
  text-decoration: underline;
}

/* Contenedor de botones */
.rgpd-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Estilos de botones */
.rgpd-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.rgpd-btn-primary {
  background-color: #c6004c;
  color: #fff;
}

.rgpd-btn-primary:hover {
  background-color: #0052a3;
}

.rgpd-btn-secondary {
  background-color: #f0f0f0;
  color: #333;
}

.rgpd-btn-secondary:hover {
  background-color: #e0e0e0;
}

/* Animación de entrada */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
/* Responsive */
@media (max-width: 768px) {
  .rgpd-content {
    flex-direction: column;
    align-items: stretch;
  }

  .rgpd-buttons {
    justify-content: stretch;
  }

  .rgpd-btn {
    flex: 1;
  }
}

/*# sourceMappingURL=sitio.min.css.map */