@font-face{font-family:'Manrope';src:url('../assets/fonts/manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/cormorant.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/cormorant-italic.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Caveat';src:url('../assets/fonts/caveat.woff2') format('woff2');font-weight:400 700;font-display:swap}

html,:root{color-scheme:dark}
body{margin:0;background:#0d0f13}
a{color:#e9bb63}a:hover{color:#f4d290}
html{scroll-behavior:smooth}
::selection{background:rgba(217,165,74,.35)}

@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-14px) rotate(.4deg)}}
@keyframes drift{0%{transform:translate(0,0) rotate(-18deg);opacity:0}10%{opacity:.9}90%{opacity:.75}100%{transform:translate(-140px,620px) rotate(32deg);opacity:0}}
@keyframes glow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
@keyframes ink{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
@keyframes sweep{0%{transform:rotate(-82deg)}55%{transform:rotate(38deg)}70%{transform:rotate(22deg)}100%{transform:rotate(28deg)}}
@keyframes chart{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes shine{from{background-position:-200% 0}to{background-position:200% 0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,165,74,.45)}50%{box-shadow:0 0 0 14px rgba(217,165,74,0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes peek{0%,18%,100%{transform:translateY(62%) rotate(-6deg)}28%,62%{transform:translateY(8%) rotate(3deg)}70%{transform:translateY(14%) rotate(-2deg)}}
@keyframes tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}

/* estela de plumitas: se anima desde el script (Web Animations), así no depende de las animaciones CSS */
h1,h2,h3{text-wrap:balance}
/* Curioso es negro: un borde claro de pegatina para que no se pierda sobre el fondo oscuro */
.stk{filter:drop-shadow(0 0 1.2px rgba(236,230,218,.9)) drop-shadow(0 0 1.2px rgba(236,230,218,.6)) drop-shadow(0 10px 14px rgba(0,0,0,.55))}
@media (max-width:480px){.hcta{display:none !important}.hnav{padding:10px 16px !important;gap:12px !important;flex-wrap:nowrap !important}}
.flink{background:none;border:0;padding:6px 0;font:inherit;color:#bdb6a8;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.flink:hover,.flink[aria-expanded="true"]{color:#f4d290}
.xbtn:hover{border-color:#d9a54a !important;color:#fff3dc !important}
/* la pluma que viaja de un cuervo a otro */

.h-in{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.22s}.d3{animation-delay:.36s}.d4{animation-delay:.5s}.d5{animation-delay:.7s}.d6{animation-delay:.95s}
.drift{position:absolute;pointer-events:none;opacity:0}
.inkline{stroke-dasharray:900;animation:ink 2.2s .6s cubic-bezier(.6,.1,.2,1) both}
.shine{background:linear-gradient(100deg,#e9bb63 20%,#fff1cf 40%,#e9bb63 60%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.cta{animation:pulse 2.8s ease-in-out infinite}
.cta:hover{transform:translateY(-2px);background:#f0c46e !important}
.ghost:hover{border-color:#d9a54a !important;color:#fff3dc !important}
.card:hover{transform:translateY(-4px);border-color:rgba(217,165,74,.55) !important}
.tab:hover{color:#fff3dc !important;border-color:rgba(217,165,74,.5) !important}
.mood:hover img{transform:translateY(-10px) rotate(-4deg) scale(1.06)}
.mood img{transition:transform .35s cubic-bezier(.2,.8,.2,1.4)}
.tilt,.perch{transform-origin:50% 90%}
.blink{transform-origin:50% 40%;animation:blink 5s infinite}
.needle{transform-origin:100px 100px;transform:rotate(28deg)}
.chartline{stroke-dasharray:1200;stroke-dashoffset:0}
.navlink:hover{color:#fff3dc !important}
.lang:hover{color:#fff3dc !important}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(45deg)}
.chev{transition:transform .25s}

@supports (animation-timeline: view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .gauge-on .needle{animation:sweep linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
  .chart-on .chartline{animation:chart linear both;animation-timeline:view();animation-range:entry 15% cover 50%}
  .par{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes par{from{transform:translateY(60px)}to{transform:translateY(-60px)}}
  .crossfly{animation:crossfly linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes crossfly{from{transform:translateX(-30vw) translateY(40px) rotate(-6deg)}to{transform:translateX(110vw) translateY(-50px) rotate(4deg)}}
}
@supports not (animation-timeline: view()){
  .needle{transform:rotate(28deg)}
  .chartline{stroke-dashoffset:0}
  .crossfly{display:none}
}


.stk{filter:none !important}