body{
    font-family: "Niconne", cursive;
    font-family: "Playfair Display", serif;

    font-family: 'DanteMTStd', 'Montserrat', sans-serif;
    font-weight: 400;
    color: #222;
    line-height: 1.6;
}


.cabecera-ayuda{
    height: 176px;
}

.cabecera{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: url(../images/linea.webp) no-repeat center center #284474;
    background-size: contain;
    padding-top: 10px;
    padding-bottom: 10px;

    box-shadow: 2px 2px 10px black;
}
.cabecera .container{
    position: relative;
}

.redes{
    position: absolute;
    top: 0;
    right: 47px;
    color: white;
    font-size: 22px;
}
.redes a{
    color: white;
    text-decoration: none;
}
.redes b{
    margin-left: 20px;
}

.logotipo img{
    width: 91%;
}


nav a{
    color: white;
    text-decoration: none;
}
nav ul{
    list-style: none;
    padding: 0;
}
nav ul li{
    width: 25%;
    float: left;
}
.menuR{
    display: none;
}
.menu, .menuR{
    color: white;
    text-align: center;
    font-size: 23px;
    line-height: 27px;
    cursor: pointer;
}
.menu:hover, .menuR:hover{
    font-weight: bold;
    color:blue;
}
.mUno{
    padding: 14px 0 13px;
}


.datos{
    text-align: center;
    color: white;
    font-size: 20px;
    line-height: 22px;
}
.datos img{
    width: 30px;
}


.efecto{
    padding: 0;
}


.categorias{
    padding-top: 40px;
    padding-bottom: 40px;
}

.titulo{
    text-align: center;
    font-size: 33px;
    font-weight: bold;
    margin-bottom: 40px;
}


.cate img{
    width: 100%;
    height: 300px;
    object-fit: cover;

    border-radius: 50px;
}
.cate strong{
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 20px;
    color: white;
    border-radius: 30px;
    display: inline-block;
    margin-top: -50px;
}


.color1 strong{background: #284474;}


.fondo{
    background: url(../images/fondo.webp) no-repeat center center;
    background-size: cover;
    background: #f7f7f7;
     background: linear-gradient(to bottom, #f7f7f7, #e0e0e0);
     background: linear-gradient(to bottom, #f7f7f7 0%, #eeeeee 50%, #dcdcdc 100%);
    padding-top: 40px;
    padding-bottom: 40px;
}

.imagen img{
    width: 100%;

    border-radius: 20px;
}


.pro{
    border: 1px solid #ddd;
    text-align: center;
    font-size: 17px;
    margin-bottom: 50px;
}
.pro img{
    width: 100%;
    height: 350px;

    object-fit: contain;

    border-radius: 20px;
}
.pro strong{
    width: 100%;
    font-size:22px;
    display: inline-block;
}
.pro span{
    width: 100%;
    font-size: 20px;
    display: inline-block;
    margin-bottom: 20px;
}

.dePrecios{
    text-align: center;
}

.precio{
    font-size: 26px;
    font-weight: bold;
}

.info b{
    width: 100%;
    display: inline-block;
}


.morado{
    background: url(../images/fondoMorado.webp) no-repeat center center;
    background-size: cover;
    background: #B1E4e3;
    color: #0181c9;
    font-size: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
}
.morado p{
    margin-bottom: 20px;
}
.morado strong{
    font-size: 23px;
    color: #007298;
}


.imagen img{
    width: 100%;
}



@media screen and (max-width:1400px){

}

@media screen and (max-width:1200px){
    .cabecera-ayuda{
        display: none;
    }
    .cabecera{
        background: #284474;
        position: relative;
    }
    nav{
        margin: 30px 0 !important;
    }
    .menu:hover, .menuR:hover{
        color: white;
    }
}

@media screen and (max-width:992px){

}

@media screen and (max-width:768px){
    .menuR{
        display: block;
        color: white;
    }
    nav ul{
        display: none;
    }
    nav ul li{
        width: 100%;
    }
    .menu{
        color: yellow;
        padding: 12px 0;
    }
}

@media screen and (max-width:576px){
    
}

.chat{
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    background: #24d366;
    font-weight: bold;
    font-size: 20px;
    color: white;
    padding: 6px 17px;
    border-radius: 20px;

    animation-name: pulse;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-delay: 0s;
    animation-iteration-count: 100;
}
@keyframes pulse {
    from,to {
        transform: scale3d(1,1,1)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05)
    }
}

.pulse {
    animation-name: pulse
}




/* ========= FOOTER ELEGANTE · GATO DULCE ========= */
.gd2-footer{
    background:#284474;
    /* degradado sutil + trama */
    background-image:
        radial-gradient(900px 480px at 120% -10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
        radial-gradient(800px 420px at -20% 110%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,0));
    position:relative;

    font-size: 20px;
    overflow:hidden;
}
.textoFooter h5{
    font-size: 30px !important;
}
.textoFooter p{
    font-size: 21px;
}
h6{
    font-size: 21px;
}
.gd2-topline{
    position:absolute; inset:0 auto auto 0; height:2px; width:100%;
    background:linear-gradient(90deg,#9fd3ff 0%, rgba(255,255,255,.6) 40%, rgba(255,255,255,0) 100%);
    opacity:.8;
}
.gd2-brand{ letter-spacing:.4px; font-size:1.05rem; }
.gd2-mark{
    width:12px; height:12px; border-radius:50%;
    background:conic-gradient(from 0deg, #9fd3ff, #ffffff, #9fd3ff);
    box-shadow:0 0 0 3px rgba(255,255,255,.18);
}
.gd2-lead{ line-height:1.7; font-size:1.02rem; }

/* Columnas con separador vertical responsivo (sin tarjetas) */
@media (min-width: 992px){
    .gd2-col{ position:relative; padding-right:28px; }
    .gd2-col + .gd2-col{ padding-left:28px; }
    .gd2-col + .gd2-col::before{
        content:""; position:absolute; left:-1px; top:6px; bottom:6px; width:1px;
        background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.22), rgba(255,255,255,.0));
    }
}

.gd2-rule{
    border:0; height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.25), rgba(255,255,255,.0));
}

/* Enlaces e iconos */
.gd2-link{
    display:inline-flex; align-items:center; gap:10px;
    color:#fff; text-decoration:none; border-bottom:1px solid transparent;
    transition:border-color .2s ease, opacity .2s ease;
}
.gd2-link:hover{ border-bottom-color:rgba(255,255,255,.55); opacity:.95; }

.gd2-list{ list-style:none; padding-left:0; margin-bottom:0; }
.gd2-list li{ margin-bottom:.35rem; padding-left:18px; position:relative; }
.gd2-list li::before{
    content:""; width:7px; height:7px; border-radius:50%;
    background:#9fd3ff; position:absolute; left:0; top:.55rem;
}

/* Botones sociales sobrios */
.gd2-social{
    width:40px; height:40px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    transition:transform .2s ease, background .2s ease;
    text-decoration:none;
}
.gd2-social:hover{ transform:translateY(-2px); background:rgba(255,255,255,.18); }




/* ===============================
   FUENTES DANTE MT STD
   =============================== */

@font-face {
    font-family: 'DanteMTStd';
    src: url('fuentes/DanteMTStd-Regular.woff2') format('woff2'),
         url('fuentes/DanteMTStd-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DanteMTStd';
    src: url('fuentes/DanteMTStd-Italic.woff2') format('woff2'),
         url('fuentes/DanteMTStd-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DanteMTStd';
    src: url('fuentes/DanteMTStd-Medium.woff2') format('woff2'),
         url('fuentes/DanteMTStd-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DanteMTStd';
    src: url('fuentes/DanteMTStd-MediumItalic.woff2') format('woff2'),
         url('fuentes/DanteMTStd-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DanteMTStd';
    src: url('fuentes/DanteMTStd-Bold.woff2') format('woff2'),
         url('fuentes/DanteMTStd-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DanteMTStd';
    src: url('fuentes/DanteMTStd-BoldItalic.woff2') format('woff2'),
         url('fuentes/DanteMTStd-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}