@import url('https://tetunori.github.io/fluent-emoji-webfont/dist/FluentEmojiColor.css');

@font-face {
    font-family: 'Comfortaa';
    src: url('otros/Archivos/Fuentes/Comfortaa/font.woff2') format('woff2');
    font-display: swap;
}

:root {
    --font: 'Comfortaa', 'Fluent Emoji Color', sans-serif;
    --font-h: 'Libre Baskerville', 'Merriweather', 'Times New Roman', 'Georgia', 'Fluent Emoji Color', serif;
    color-scheme: only dark;
}

button, a, label, input {
    -webkit-tap-highlight-color: transparent;
}

Body {
    margin: 0;
    color: #fff;
    background: #000;
    font-family: var(--font);
    overscroll-behavior-y: none;
}

Body.mob {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
Body.mob .sel, Body.mob .sel * {
    user-select: text;
    -webkit-user-select: text;
}

Body::before{content:"";position:fixed;inset:0;height:110vh;z-index:-1;background:url('otros/Archivos/Imagenes/wallpaper.avif') no-repeat center/cover;transform:translateZ(0);will-change:transform}

#bg{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center}

blockquote {
    margin: 20px 0;
    padding: 15px;
    border-left: none;
    border-radius: 10px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

blockquote { background-color: rgba(0,0,0,0.5) }

blockquote:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

blockquote.red {
    background-color: rgba(0,0,0,0.336);
    animation: backgroundColorChange 5s infinite;
}

@keyframes backgroundColorChange {
    0%,100% { background-color: rgba(0,0,0,0.336) }
    50% { background-color: rgba(255,0,0,0.7) }
}


.loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 1000;
}

.loading-screen p {
    font-size: 2em;
    font-family: var(--font);
    animation: _LS1 1.4s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes _LS1 {
    0%,100% { transform: translateY(0) scale(1); opacity: 1 }
    50% { transform: translateY(-8px) scale(1.06); opacity: 0.6 }
}

.hide { display: none }

video#bg-video {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    min-height: 100dvh;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
    will-change: transform;
}

a { color: lightblue; cursor: pointer; text-decoration: none }
a:hover { text-decoration: underline }

a::after{
  opacity:1
}

h1,h2,h3,h4,h5{
  border-bottom:2px solid #1a73e8;
  font-family:var(--font-h);
  margin:.5rem 0
}
h1,h2{padding-bottom:.5rem}
h3,h4,h5{display:table}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
  color:inherit;
  text-decoration:none
}

code {
    font-family: monospace;
    border-radius: 5px;
    background-color: #232323;
    border-left: 5px solid #ccc;
    color: white;
    white-space: pre-wrap;
    word-wrap: break-word;
    display: block;
    padding: 10px;
    overflow-x: auto;
}

.content {
    background: rgba(20,20,20,0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 20px;
    max-width: 800px;
    margin: 50px auto -40px;
    box-shadow: 0 0 10px rgba(0,0,0,9);
    position: relative;
    z-index: 1;
    overflow-wrap: break-word;
}

.content * { max-width: 100%; box-sizing: border-box }

.view-all-button,
.back-button {
    display: inline-block;
    padding: 10px 20px;
    backdrop-filter: blur(0px) saturate(1.8);
    -webkit-backdrop-filter: blur(0px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    border-radius: 20px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    will-change: transform;
}

.view-all-button {
    margin-top: 20px;
    background: linear-gradient(135deg,rgba(26,115,232,0.3) 0%,rgba(26,115,232,0.15) 50%,rgba(26,115,232,0.25) 100%);
}

.view-all-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,115,232,0.4); text-decoration: none }

.back-button {
    margin: 20px;
    background: linear-gradient(135deg,rgba(102,102,102,0.3) 0%,rgba(102,102,102,0.15) 50%,rgba(102,102,102,0.25) 100%);
}

.back-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,102,102,0.4); text-decoration: none }



#disqus-container {
    background-color: rgba(0,0,0,0.6);
    padding: 20px;
    border-radius: 30px;
    max-width: 800px;
    margin: 50px auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
}

.BOTON-M1{
display:flex;
flex-wrap:wrap;
gap:14px;
margin:24px 0;
justify-content:center
}

.BOTON-M2{
position:relative;
width:92px;
height:92px;
display:flex;
align-items:center;
justify-content:center;
padding:8px;
border-radius:22px;
text-decoration:none;
color:rgba(255,255,255,.9);
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.14);
box-shadow:
0 6px 18px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.1),
inset 0 -1px 0 rgba(0,0,0,.2);
overflow:hidden;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
transform:perspective(600px) translateZ(0)
}

.BOTON-M2::before{
content:"";
position:absolute;
inset:-50%;
background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 55%);
opacity:.6;
transform:translateX(-30%) translateY(-30%);
pointer-events:none
}

.BOTON-M2::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.12),transparent 60%);
transform:translateX(-120%);
transition:.6s
}

.BOTON-M2:hover{
transform:perspective(600px) translateY(-3px) scale(1.04);
border-color:rgba(255,255,255,.22);
box-shadow:
0 12px 26px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.12)
}

.BOTON-M2:hover::after{
transform:translateX(120%)
}

.BOTON-M3{
text-align:center
}

.BOTON-M4{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 6px;
font-size:36px;
line-height:1;
filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))
}

.BOTON-M4 img{
width:100%;
height:100%;
object-fit:contain;
display:block
}

.BOTON-M5{
margin:0;
font-size:.74rem;
font-weight:500;
letter-spacing:.02em;
color:rgba(255,255,255,.85);
white-space:nowrap
}


@media (prefers-reduced-motion: reduce) {

    #disqus-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(0,0,0,0.481) !important;
    }
    .view-all-button,
    .back-button,
    .mariposas-section { backdrop-filter: none !important; -webkit-backdrop-filter: none !important }
    .view-all-button { background: rgba(26,115,232,0.4) }
    .back-button { background: rgba(102,102,102,0.4) }
    .view-all-button,
    .back-button { box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important }
    .view-all-button:hover,
    .back-button:hover,
    blockquote:hover { transform: none !important }
}

body.low-perf .content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(20,20,20,0.846) !important;
}

body.low-perf #disqus-container {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0,0,0,0.481) !important;
}

body.low-perf .loading-screen p {
    animation: none;
}