@import url("https://fonts.googleapis.com/css2?family=Cormorant&family=Raleway&display=swap");:root{--foreground-rgb:0,0,0;--background-srgb:color-mix(in srgb,var(--dlh-white) 30%,#fff 70%);--background-start-rgb:245,245,245;--background-end-rgb:245,245,245}
@media (prefers-color-scheme:dark){:root{--foreground-rgb:255,255,255;--background-srgb:color-mix(in srgb,var(--dlh-black) 90%,#000 10%);--background-start-rgb:20,20,20;--background-end-rgb:20,20,20}
}
body{color:rgb(var(--foreground-rgb));background:var(--background-srgb);--background:linear-gradient(to bottom,transparent,rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))}
:is(html,body,head,main,footer,section,article,div){font-family:Raleway,sans-serif;font-size:18px}
:is(h1,h2,h3,h4,h5,h6){font-family:Cormorant,serif;font-weight:700}
body.dlh--navigation{overflow:hidden}
.dlh-header svg[title=close],.dlh-header svg[title=hamburger]{transition:opacity .5s ease,transform .5s ease,visibility .5s ease}
.dlh-header.dlh-header--open svg[title=hamburger],.dlh-header:not(.dlh-header--open) svg[title=close]{opacity:0;transform:rotateY(90deg) scale(.75) skew(-45deg);visibility:hidden}
.dlh-menu{display:grid;transition:opacity .5s ease,transform .5s ease,visibility .5s ease}
.dlh-header:not(.dlh-header--open) .dlh-menu{opacity:0;transform:translateY(-100%);visibility:hidden}
.dlh-buttons{transition:transform .3s ease,visibility .15s ease,opacity .15s ease}
.dlh-toast--hidden{opacity:0;transform:translateY(-10rem);visibility:hidden}
/* ------------------------------------------ */
.divInit{opacity: 0;transform: translateY(100px);transition: opacity 0.5s ease-out, transform 0.5s ease-out;}
.zoom-in {opacity: 0;transform: scale(0.8);transition: transform 0.6s ease-out, opacity 0.6s ease-out;}
.zoom-out {opacity: 0;transform: scale(1.2);transition: transform 0.6s ease-out, opacity 0.6s ease-out;}
/* Estilo cuando el div aparece en pantalla */
.divInit.visible {opacity: 1;transform: translateY(0); /* Vuelve a su posición original */ }
.divInit.visible .zoom-in {opacity: 1;transform: scale(1);transition-delay: 0.2s;}
.divInit.visible .zoom-out {opacity: 1;transform: scale(1);transition-delay: 0.4s;}
/* ------------------------------------------ */
.dlh-text-reveal{transform:scale(.94);animation:scale 2s cubic-bezier(.5,1,.89,1) forwards}
@keyframes scale{to{transform:scale(1)}}
.dlh-text-reveal>span{display:inline-block;opacity:0;filter:blur(4px)}
.dlh-text-reveal>span:first-child{animation:fade-in .5s cubic-bezier(.11,0,.5,0) .1s forwards}
.dlh-text-reveal>span:nth-child(2){animation:fade-in .5s cubic-bezier(.11,0,.5,0) .2s forwards}
.dlh-text-reveal>span:nth-child(3){animation:fade-in .5s cubic-bezier(.11,0,.5,0) .3s forwards}
.dlh-text-reveal>span:nth-child(4){animation:fade-in .5s cubic-bezier(.11,0,.5,0) .4s forwards}
.dlh-text-reveal>span:nth-child(5){animation:fade-in .5s cubic-bezier(.11,0,.5,0) .5s forwards}
.dlh-text-reveal>span:nth-child(6){animation:fade-in .5s cubic-bezier(.11,0,.5,0) .6s forwards}
.dlh-text-reveal>span:nth-child(7){animation:fade-in .5s cubic-bezier(.11,0,.5,0) .7s forwards}
.dlh-text-reveal>span:nth-child(8){animation:fade-in .5s cubic-bezier(.11,0,.5,0) .8s forwards}
.dlh-text-reveal>span:nth-child(9){animation:fade-in .5s cubic-bezier(.11,0,.5,0) .9s forwards}
.dlh-text-reveal>span:nth-child(10){animation:fade-in .5s cubic-bezier(.11,0,.5,0) 1s forwards}
.dlh-text-reveal>span:nth-child(11){animation:fade-in .5s cubic-bezier(.11,0,.5,0) 1.1s forwards}
.dlh-text-reveal>span:nth-child(12){animation:fade-in .5s cubic-bezier(.11,0,.5,0) 1.2s forwards}
.dlh-text-reveal>span:nth-child(13){animation:fade-in .5s cubic-bezier(.11,0,.5,0) 1.3s forwards}
.dlh-text-reveal>span:nth-child(14){animation:fade-in .5s cubic-bezier(.11,0,.5,0) 1.4s forwards}
.dlh-text-reveal>span:nth-child(15){animation:fade-in .5s cubic-bezier(.11,0,.5,0) 1.5s forwards}
@keyframes fade-in{to{opacity:1;filter:blur(0)}}
/* ------------------------------------------ */
.divInit.visible .dlh-text-decoration{}
.divInit.visible .dlh-text-decoration-background{color: var(--dlh-black);background-color: var(--dlh-white); }
.divInit.visible .dlh-text-decoration-border{        border-color: 
color-mix(in srgb, var(--dlh-white) 70%, #000 30%);}
.divInit.visible .dlh-text-decoration-tracking{letter-spacing: .1em;}
/* ------------------------------------------ */
.divUp{opacity: 0;transform: translateY(30px);animation: slide-up 1s forwards;}
 @keyframes slide-up {
  0% {opacity: 0;transform: translateY(30px);}
  100% {opacity: 1;transform: translateY(0);}
}
/* ------------------------------------------ */
.animate-marquee {animation: marquee 60s linear infinite;}
@keyframes marquee {
    0% {transform: translateX(0);}
    to {transform: translateX(-100%);}
}
.animate-marquee-reverse {
    animation: marquee 60s linear infinite reverse
}
@keyframes pulse {
    50% {opacity: .5;}
}
/* ------------------------------------------ */
.dlh-budget-dialog {width: min(25rem, 100%);padding: 1rem;}
.dlh-budget-dialog::backdrop {background: #0008;}
.dlh-budget-dialog header {text-align: center;}
.dlh-budget-dialog section {margin-block: 0.5rem;}
.dlh-budget-dialog section h3 {font-size: 2rem;margin-bottom: 1rem;text-align: center;}
.dlh-budget-dialog section small {color: red;display: block;font-size: 0.9rem;margin-bottom: 1rem;text-align: center;}
.dlh-budget-dialog section div {font-size: 0.75rem;text-align: start;}
.dlh-budget-dialog footer {text-align: end;}
        
/* ------------------------------------------ */
#dlh-buttons {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#dlh-buttons.open {
    max-height: 500px;  /* Ajusta este valor según el tamaño esperado */
    opacity: 1;
}