* {
  text-decoration: none !important;
}


/* Letra */

body {
  font-family: "Tagesschrift", system-ui;
}

/*=============================================
Colores
=============================================*/
:root {

    /* PRIMARIO - Azul salud y confianza */
    --primario:               #2a7fba;
    --primario-hover:         #3997d6;
    --primario-active:        #1d5e8c;
    --primario-subtle:        #e2f1fb;
    --primario-focus:         #2a7fba99; /* 60% opacidad */
    --primario-subtle-focus:  #c2e4f9;

    /* SECUNDARIO - Verde bienestar y frescura */
    --secundario:             #05693a;
    --secundario-hover:       #048c4b;
    --secundario-active:      #03502e;
    --secundario-subtle:      #d6f5e5;
    --secundario-focus:       #05693a99; /* 60% opacidad */
    --secundario-subtle-focus:#b2e5cc;

    /* primario - Blanco limpio con toque celeste*/
    --auxiliar:               #f3fbf9;        /* Casi blanco, fresco */
    --auxiliar-hover:         #e4f5f0;        /* Blanco con verde-agua tenue */
    --auxiliar-active:        #d2ece5;        /* Ligeramente más marcado */
    --auxiliar-subtle:        #f9fdfc;        /* Fondo casi imperceptible */
    --auxiliar-focus:         #f3fbf999;      /* 60% opacidad */
    --auxiliar-subtle-focus:  #e0f2ed;        /* Suave pero visible */


    /* PRIMARY */
    --primary:                  #41528a;
    --primary-soft:             #6b7ab0;
    --primary-subtle:           #dadde8;
    --primary-hover:            #354579;
    --primary-active:           #2c3a66;
    --primary-focus:            #354579;
    --primary-subtle-focus:     #c4c9dd;

    /* SECONDARY */
    --secondary:                #3577f2;
    --secondary-soft:           #6d9cf4;
    --secondary-subtle:         #dce7fc;
    --secondary-hover:          #2d67d1;
    --secondary-active:         #2659b5;
    --secondary-focus:          #2d67d1;
    --secondary-subtle-focus:   #c8dbfb;

    /* SUCCESS */
    --success:                  #0bb39c;
    --success-soft:             #44c6b3;
    --success-subtle:           #ceede9;
    --success-hover:            #099881;
    --success-active:           #077c6a;
    --success-focus:            #099881;
    --success-subtle-focus:     #b7e4dd;

    /* INFO */
    --info:                     #2a9ddb;
    --info-soft:                #5ab4e3;
    --info-subtle:              #d9eefa;
    --info-hover:               #248bc4;
    --info-active:              #1d78aa;
    --info-focus:               #248bc4;
    --info-subtle-focus:        #c6e4f8;

    /* WARNING */
    --warning:                  #f7b84a;
    --warning-soft:             #f9c76d;
    --warning-subtle:           #faeedc;
    --warning-hover:            #dea741;
    --warning-active:           #c89038;
    --warning-focus:            #dea741;
    --warning-subtle-focus:     #f8e0bc;

    /* DANGER */
    --danger:                   #f06448;
    --danger-soft:              #f48671;
    --danger-subtle:            #fce3de;
    --danger-hover:             #d7583f;
    --danger-active:            #bd4832;
    --danger-focus:             #d7583f;
    --danger-subtle-focus:      #f8cec7;

    /* LIGHT */
    --light:                    #f5f7fa;
    --light-soft:               #fafbfd;
    --light-subtle:             #ffffff;
    --light-hover:              #e4e6eb;
    --light-active:             #d5d8dd;
    --light-focus:              #e4e6eb;
    --light-subtle-focus:       #f0f2f6;

    /* DARK */
    --dark:                     #212529;
    --dark-soft:                #4a4f56; 
    --dark-subtle:              #d6d6d6; 
    --dark-hover:               #1a1e23;
    --dark-active:              #111417;
    --dark-focus:               #1a1e23;
    --dark-subtle-focus:        #c0c0c0;
}

/*=============================================
Redes Sociales
=============================================*/

.social-icons {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
}

.social-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.8rem;
  transition: transform 0.3s ease, background-color 0.3s, color 0.3s;
  text-decoration: none;
}

.social-icon i {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.social-icon:hover {
  transform: scale(1.2);
}

/* Clases modificadoras para color y borde */
/* .social-icon.primario {
  border: 2px solid var(--primario);
  color: var(--primario);
}

.social-icon.primario:hover {
  background-color: var(--primario);
  color: white;
} */

.socials-primario .social-icon {
  border: 2px solid var(--primario);
  color: var(--primario);
}

.socials-primario .social-icon:hover {
  background-color: var(--primario);
  color: white;
}


.socials-secundario .social-icon {
  border: 2px solid var(--secundario);
  color: var(--secundario);
}

.socials-secundario .social-icon:hover {
  background-color: var(--secundario);
  color: white;
}


.socials-auxiliar .social-icon {
  border: 2px solid var(--auxiliar);
  color: var(--auxiliar);
}

.socials-auxiliar .social-icon:hover {
  background-color: var(--auxiliar);
  color: var(--secundario);
}


/* Más grande en escritorio */
@media (min-width: 768px) {
  .social-icon {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1rem;
  }
}


    /*=============================================
    Ribbon
    =============================================*/
    .ribbon-box .ribbon {
        position: absolute;
        right: -5px;
        top: -5px;
        z-index: 1;
        overflow: hidden;
        width: 75px;
        height: 75px;
        text-align: left;
    }
    .ribbon-box .ribbon span {
        font-size: 13px;
        color: #fff;
        text-align: center;
        line-height: 20px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 100px;
        display: block;
        position: absolute;
        top: 19px;
        right: -21px;
        font-weight: 600;
    }
    .ribbon-box .ribbon span:before {
        content: "";
        position: absolute;
        right: 0;
        top: 100%;
        z-index: -1;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }
    .ribbon-box .ribbon span:after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        z-index: -1;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }


  .slide-box img {
    display: block;
    aspect-ratio: 4 / 3; /* o 16/9, según el formato de tus imágenes */
    width: 100%;
    height: auto;
  }

  .swiper-container {
    min-height: 300px;
  }