/* ----------------- COLOR MODE  ----------------- */
.on {
    display: block;
}

.off {
    display: none;
}

/* Light Color Scheme */
/*:root,
:root[data-force-color-mode="light"] {
    color-scheme: light dark;
    --text-color: #000;
    --background: #f9f6f6;
    --glass: rgba(56, 56, 56, 0.10);
    --mainshadow: -20px 24.4px 8.4px -5px rgba(0, 0, 0, 0.10), -20px 44.8px 43.7px -5px rgba(0, 0, 0, 0.15), -20px 68px 128px -5px rgba(0, 0, 0, 0.25);
}*/

:root {
    --text-color: #fff;
    --background: #1d201e;
    --glass: rgba(200, 200, 200, 0.10);
    --mainshadow: -20px 24.4px 8.4px -5px rgb(0 0 0 / 20%), -20px 44.8px 43.7px -5px rgb(0 0 0 / 30%), -20px 68px 128px -5px rgb(0 0 0 / 35%);
}

/* Dark Color Scheme */
@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #fff;
        --background: #1d201e;
        --glass: rgba(200, 200, 200, 0.10);
        --mainshadow: -20px 24.4px 8.4px -5px rgb(0 0 0 / 20%), -20px 44.8px 43.7px -5px rgb(0 0 0 / 30%), -20px 68px 128px -5px rgb(0 0 0 / 35%);
    }
}

:root[data-force-color-mode="dark"] {
    --text-color: #fff;
    --background: #1d201e;
    --glass: rgba(200, 200, 200, 0.10);
    --mainshadow: -20px 24.4px 8.4px -5px rgb(0 0 0 / 20%), -20px 44.8px 43.7px -5px rgb(0 0 0 / 30%), -20px 68px 128px -5px rgb(0 0 0 / 35%);
}


/* ----------------- DARYCOLORS https://learnui.design/tools/accessible-color-generator.html -----------------*/

:root {
    --daryred: #f27c67;
    --daryblue: #5eaec8;
    --darycyan: #b0e9e3;
    --darygreen: #60b389;
    --daryblack: #111;
    --darywhite: #fff;
}

/* ----------------- DARYBACKGROUNDS https://learnui.design/tools/gradient-generator.html -----------------*/

.backdaryblue {
    background: var(--daryblue);
}

.backdarycyan {
    background: var(--darycyan);
}

.backdaryred {
    background: var(--daryred);
}

.backdarygreen {
    background: var(--darygreen);
}

.backdaryblack {
    background: var(--daryblack);
}

.backdarytranswhite {
    background-color: hsla(250,100%,100%,0.9);
    color: black;
}

.glass {
    border-radius: 10px;
    background: var(--glass);
    backdrop-filter: blur(15px);
    padding: 3% 6% !important;
    box-shadow: var(--mainshadow);
}


/* ----------------- DARYPEOPLE -----------------*/

.objetivo01 {
    background: var(--daryblue);
    background-image: url(../Content/imagenes/objetivo01.png );
    background-size: cover;
}

.objetivo02 {
    background: var(--daryred);
    background-image: url(../Content/imagenes/objetivo12.png );
    background-size: cover;
}

.objetivo03 {
    background: var(--darygreen);
    background-image: url(../Content/imagenes/objetivo10.png );
    background-size: cover;
}

.equipo01 {
    background: var(--daryred);
    background-image: url(../Content/imagenes/equipo03.jfif );
    background-size: cover;
}

.equipo02 {
    background: var(--darycyan);
    background-image: url(../Content/imagenes/paye.png );
    background-size: cover;
}

.equipo03 {
    background: var(--darygreen);
    background-image: url(../Content/imagenes/equipo01.jfif );
    background-size: cover;
}

.servicios01 {
    background: var(--daryblue);
    background-image: url(../Content/imagenes/servicios011.png );
    background-size: cover;
}

.servicios02 {
    background: var(--darycyan);
    background-image: url(../Content/imagenes/servicios022.png );
    background-size: cover;
}

.servicios03 {
    background: var(--darygreen);
    background-image: url(../Content/imagenes/servicios03.png );
    background-size: cover;
}

.tarifas01 {
    background: var(--daryred);
    background-image: url(../Content/imagenes/objetivo02.png );
    background-size: cover;
}

.tarifas02 {
    background: var(--darycyan);
    background-image: url(../Content/imagenes/objetivo06.png );
    background-size: cover;
}

.tarifas03 {
    background: var(--daryblue);
    background-image: url(../Content/imagenes/objetivo03.png );
    background-size: cover;
}



/* ----------------- header ----------------- */
#darycookies {
    margin: 2rem auto;
    width: 37%;
    overflow: hidden;
    margin-top: 80vh;
}

.darycookiesbtn {
    background-color: #529016;
    border-color: #529016;
    display: inline-block;
    font-weight: 400;
    color: ghostwhite;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

#darylogo {
    top: 2rem;
    left: 2rem;
}

#daryoffice {
    top: 2rem;
    right: 2rem;
    color: var(--text-color);
    font-size: 0.8rem
}

#darycopyright {
    bottom: 1rem;
    left: 2rem;
}

#darymenu {
    bottom: 10px;
    right: 2rem;
}

.Darymonster {
    position: absolute;
    bottom: -32px;
    left: 2rem;
}

.daryesquina {
    z-index: 1;
}

    .daryesquina:hover {
        z-index: 1050;
    }

/*Mis añadidos*/

.daryY {
    color: #097ce2;
}

::placeholder {
    color: white;
}

.darycard {
    z-index: 1040;
}

section {
    z-index: 1020;
}

#contacto {
    z-index: 1050;
    position: relative;
}

footer {
    z-index: 1050 !important;
}

#Privacidad {
    margin-top: 100vh;
}

.Privacidad {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: visible;
}

.Xunta {
    filter: grayscale(1);
}

.nav-link:hover {
    color: white;
}

.arroba {
    margin-right: 2px;
}

.modal-content {
    background-color: #e8e8e8 !important;
}

.modal code {
    font-size: 0.65em;
}

a code {
    font-size: 0.875em !important;
}

button code {
    font-size: 0.875em !important;
}

.modal-header {
    border-bottom: unset !important;
}

.modal-footer {
    border-top: unset !important;
}

.modal-content {
    font-size: 1.2em;
    text-align: justify;
    background-color: transparent !important;
}

.modal {
    background-color: rgb(27 26 26 / 92%);
}
/*.Movil{
    overflow-y: hidden;
    overflow-x: auto;
    width: auto;
    height: 26vh;
    padding: 10px;
    white-space: nowrap;
}
.darycard {
    height: 150px;
    padding: 0;
    margin-right: 20px;
    display: inline-block;
}*/
/* ----------------- animacion nav ----------------- */
.darycolors {
    background: repeating-linear-gradient(90deg, var(--daryred) 0 2.5%, var(--daryblue) 0 5%, var(--darycyan) 0 7.5%, var(--darygreen) 0 10%, black 0 12.5%) left bottom/4000% 0px no-repeat;
    transition: 0s;
}

    .darycolors:hover {
        font-weight: 800;
        background-position: bottom right;
        background-size: 4000% 3px;
        transition: 15s steps(39),background-size 0s;
    }



.shadow-text {
    text-shadow: 0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.16), 0 8px 8px rgba(0,0,0,0.20);
}



/* ----------------- apartados ----------------- */

.dary01000100 {
    color: transparent;
    text-shadow: var(--text-color) -1px 1px 2px, white 1px -1px 2px;
    white-space: initial;
    overflow: hidden;
    height: calc(100vh - 40vh);
    width: calc(100vw - 30vw);
    margin: auto;
    filter: opacity(1);
    font-size: 0.8rem;
    text-align: justify;
}

#index {
    /* width: 100vw;
    height: 100vh;*/
    z-index: -10000 !important;
}

    #index > img {
        top: 0;
        right: 40%;
        transition: all 0.5s ease;
    }

#servicios {
    margin-top: 50vh;
}

html {
    scroll-snap-type: y proximity;
}

#servicios, #objetivos, #equipo, #tarifas {
    display: flex;
    opacity: 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    overflow: visible;
    margin-top: 25vh;
}

#cookies {
    aspect-ratio: 8/1;
}

.inicio {
    width: 80%;
    aspect-ratio: 2/1;
}

.contenido, .inicio {
    scroll-snap-align: center;
    margin: 1vh;
}


#contacto {
    margin-top: 20vh;
}

/*.darycard {
    margin-bottom: 5rem !important;
}*/

.card {
    margin: 0;
    border: none;
    position: relative;
    /*padding-top: 20%;*/ /* 1:1 Aspect Ratio */
    overflow: hidden;
    max-width: 291.6px;
}

.card-body {
    color: var(--daryblack);
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.card-title {
    color: var(--daryblack);
    text-align: center;
    padding: 0.5rem;
    width: 100%;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
}



.reverso {
    color: black;
    position: absolute;
    top: 0;
    padding: 0;
    font-size: 16px;
    height: 100%;
    display: flex;
    align-items: center;
}

.card-text {
    /*font-size: 1.25rem;*/
    font-weight: 400;
    padding: 1rem;
    line-height: 1.5rem;
}

/*    .card-text::first-letter {
        font-size: 1.5rem;
        font-weight: 600;
    }*/


.keywords {
    margin: 0;
    position: absolute;
    bottom: 0.5rem;
    padding: 0.1rem;
    color: white;
    font-weight: 400;
    text-shadow: -1px 1px 10px rgb(0, 0, 0);
    animation: slide 20s linear infinite;
    white-space: pre;
}

@keyframes slide {
    0% {
        left: 0;
        transform: translateX(50%);
    }

    100% {
        left: 0;
        transform: translateX(-100%);
    }
}

.daryicon {
    filter: invert(1);
    max-width: 25px;
}

.btn-close {
    filter: invert(1);
}

/* lleva el scroll automáticamente hasta el centro de cada section*/
section {
    z-index: 2000 !important;
}

/* ----------------- opacidades ----------------- */

.opacity-0 {
    opacity: 0 !important;
}

.opacity-1 {
    opacity: 0.2 !important;
}

.opacity-2 {
    opacity: 0.4 !important;
}

.opacity-3 {
    opacity: 0.6 !important;
}

.opacity-4 {
    opacity: .8 !important;
}

.opacity-5 {
    opacity: 1 !important;
}


@media only screen and (min-width: 300px) and (max-width:900px) {
    #darycookies {
        top: 97px;
        min-height: 15vh;
        width: 80%;
    }

    .daryesquina {
        display: none;
    }
}

@media only screen and (min-width: 900px) {
    body {
        font-size: 20px;
    }
}
