@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap');

:root{
    --color-rosa-claro: #fdb4bf;
    --color-rosa-fuerte: #fc748c;
    --color-rosado: #ffbac9;
    --color-azul-claro: #E9F1FA;
    --color-azul-fuerte: #365D7E;
    --color-azul-brillante: #00ABE4;
    --color-hueso: #ecedeb;
    --color-gris: #cecace;
    --color-beige-claro: #F5F5DC;
    --color-beige-fuerte: #736B19;


    --color-dark:  #161616;
    --color-ocean:  #416dea;
    --color-grass: #3dd28d;
    --color-snow: #FFFFFF;
    --color-salmon: #F32C52;
    --color-sun: #feee7d;
    --color-alge: #7999a9;
    --color-flower: #353866;
    --color-smoke: #e4e4e4;

    --color-whatsapp: #2ecc71;
    --color-facebook: #0165E1;
    --color-tiktok: #ecedeb;
    --color-instagram: #E1306C;
}


    /* background: linear-gradient(to right, rgba(240, 255, 244, 0.5), rgba(224, 242, 241, 1), rgba(240, 255, 244, 0.5)); */

    /* background-color: var(--color-background); */
    /* background: -webkit-linear-gradient(180deg,#ecedeb,#ffbac9); 
    background: linear-gradient(180deg,#ecedeb,#ffbac9); */

    /* background: -webkit-linear-gradient(180deg,#ecedeb,#ffbac9); 
    background: linear-gradient(180deg, var(--color-hueso),var(--color-azul-claro)); */


/* main{
    background-color: var(--color-azul-claro);
} */
.bg-hueso{background-color: var(--color-hueso);}
.bg-azul-claro{background-color: var(--color-azul-claro);}
.bg-roado{background-color: var(--color-rosado);}
.bg-coral{background-color: #f1889b;}
.bg-vdeg{
    background: linear-gradient(to top, rgba(240, 255, 244, 0.5), rgba(224, 242, 241, 1), rgba(240, 255, 244, 1));
}

.text-azul{color: var(--color-azul-fuerte)}

.text-coral{color: #f1889b;}
.text-rosa-fuerte{color: #fb7185;}

.text-gris-oscuro{color: #3b3b3b;}
.text-gris-carbon{color: #374151;}
.text-azul-fuerte{color: #1d3557;}
.text-azul-grisaceo{color: #1e293b;}




/* ################################################################################################# */
/* ##################    ######    #####          #####    ####  #####  #####  ##################### */
/* ##################  #  ####  #  #####  #############  #  ###  #####  #####  ##################### */
/* ##################  ##  ##  ##  #####      #########  ##  ##  #####  #####  ##################### */
/* ##################  ###    ###  #####  #############  ###  #  #####  #####  ##################### */
/* ##################  ##########  #####          #####  ####    #####         ##################### */
/* ################################################################################################# */

/* .bg-header{
    position: absolute;
    z-index: -10;
    top: 0;
   
    height: 500px;
    width: 100%;
    overflow: hidden;
}

.bg-header-wave{
    transform:rotate(180deg); 
    transition: 0.3s;
} */


.slogan{
    font-family: "Merienda", cursive;
    font-weight: bold;
    text-align: end;
    color: #fb7185;
}




.about{
    background-color: #0048bd;
    background: url('./images/fondo-waves.jpg')
    center top no-repeat #252746;
    background-size: cover;
    display: block;
    z-index: 0;
    top: 0;
    left: 0;
    border-radius: 15px;
}

.card{
    width: 300px;
    height: 500px;
}
.card-img{
    border-radius: 10px;
    /* overflow: hidden; */
}

.card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.card-buttons li {
    list-style: none;
    margin: 4px;
}
  
.card-buttons li a {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: transparent;
    font-size: 1.5em;
    color: #bdbdbd;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: 0.5s;
}
  
.card-buttons li a:hover {
    /* background: #03a9f4; */
    background: #ffbac9;
    color: #fff;
}








.pre-footer{
    background: linear-gradient(180deg, #f1889b, #fdb4bf);

    height: 200px;
}

.otro{
    height: 500px;
    background: linear-gradient(-150deg, #f1889b, #fdb4bf,  #fbf0f4  );
}

footer{

    background-color: var(--color-rosa-claro);
    color: var(--color-azul-fuerte);
}




.malla{
    background-image: radial-gradient(at 66.50266249731813% 66.64491177258675%, hsla(174.54545454545456, 33.33333333333333%, 67.64705882352942%, 1) 0%, hsla(174.54545454545456, 33.33333333333333%, 67.64705882352942%, 0) 100%), radial-gradient(at 85.09607992104691% 9.53096234635864%, hsla(225, 42.857142857142854%, 43.92156862745098%, 1) 0%, hsla(225, 42.857142857142854%, 43.92156862745098%, 0) 100%), radial-gradient(at 65.67412319990078% 41.34292522905583%, hsla(193.06666666666666, 92.59259259259261%, 52.352941176470594%, 1) 0%, hsla(193.06666666666666, 92.59259259259261%, 52.352941176470594%, 0) 100%), radial-gradient(at 78.3599399941105% 49.857937893343205%, hsla(349.4117647058824, 95.77464788732397%, 72.15686274509804%, 1) 0%, hsla(349.4117647058824, 95.77464788732397%, 72.15686274509804%, 0) 100%), radial-gradient(at 0.17558032211344443% 26.066433249443243%, hsla(212.5925925925926, 60.90225563909774%, 73.92156862745098%, 1) 0%, hsla(212.5925925925926, 60.90225563909774%, 73.92156862745098%, 0) 100%), radial-gradient(at 14.735697467382503% 96.4209671655944%, hsla(174.54545454545456, 33.33333333333333%, 67.64705882352942%, 1) 0%, hsla(174.54545454545456, 33.33333333333333%, 67.64705882352942%, 0) 100%), radial-gradient(at 8.268795938175622% 91.00877175828708%, hsla(225, 42.857142857142854%, 43.92156862745098%, 1) 0%, hsla(225, 42.857142857142854%, 43.92156862745098%, 0) 100%);
    height: 1500px;
    width: 100%;
}
.malla1{
    background-image: radial-gradient(at 22.75793358054752% 64.95356835600663%, hsla(0, 0%, 100%, 1) 0%, hsla(0, 0%, 100%, 0) 100%), radial-gradient(at 52.342043350752185% 45.15609010617674%, hsla(298.72340425531917, 48.45360824742267%, 80.98039215686275%, 1) 0%, hsla(298.72340425531917, 48.45360824742267%, 80.98039215686275%, 0) 100%), radial-gradient(at 80.05899522442112% 47.33654695866638%, hsla(246.96428571428572, 70.88607594936708%, 69.01960784313725%, 1) 0%, hsla(246.96428571428572, 70.88607594936708%, 69.01960784313725%, 0) 100%), radial-gradient(at 5.576576255927579% 42.69712591868986%, hsla(0, 0%, 100%, 1) 0%, hsla(0, 0%, 100%, 0) 100%), radial-gradient(at 25.622743983711405% 93.02421736544409%, hsla(298.72340425531917, 48.45360824742267%, 80.98039215686275%, 1) 0%, hsla(298.72340425531917, 48.45360824742267%, 80.98039215686275%, 0) 100%);

    height: 500px;
    rotate: 180deg;
}








/* Animación de entrada para secciones */
@keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .fade-up {
    animation: fadeUp 0.8s ease-out forwards;
  }
  
  /* Animación para íconos */
  @keyframes pulseIcon {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.85;
    }
  }
  
  .icon-animate {
    animation: pulseIcon 2s ease-in-out infinite;
  }
  
  /* Hover suave en tarjetas */
  .card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
  }