.preload, .preload *{transition:none !important;}

@font-face {
  font-family: 'bootstrap-icons';
  src: url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/fonts/bootstrap-icons.woff2?2820a38c237c5643a6d9627702e5c8e3') format('woff2');
  font-display: swap; /* Esta es la clave para el ahorro de tiempo */
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 10%;
  line-gap-override: 0%;
}
body{
    background-color:transparent; opacity:1;
    transition:opacity 0.4s ease-in-out;
    font-family: 'Inter', Arial, sans-serif;
}
body.preload{opacity:0; visibility:hidden;}
html{
    min-height:100vh;
    color:rgb(255, 255, 255);
    scrollbar-width:none;
    scroll-padding-top:100px;
    overflow-x:hidden;
    background-color:#000;
}
html.light-theme-init{
    background:none;
    background:linear-gradient(900deg, #d2d2d2, #d1d1d1);
    color:#000;
}
#home:target, body:not(:has(:target)) #home{display:block;}
body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    margin:0 5% 0 5%;
}


/* 1. Canvas decorativo */
canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    pointer-events: none; /* Esto es lo que permite que el usuario haga clic en los elementos del footer */
}

/* 2. Capa de fondo que maneja los colores según el tema*/
.strellatto_layer {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2; 
    transition: background 0.4s ease;
}

/* Modo Claro: El canvas se limpia por JS, aquí ponemos el fondo claro */
body.light-theme .strellatto_layer {
    background: linear-gradient(900deg, #d2d2d2, #d1d1d1);
}

/* Modo Oscuro: Fondo negro */
body:not(.light-theme) .strellatto_layer {
    background-color: #000000;
}/* 1. Canvas decorativo */
canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    pointer-events: none; /* Esto es lo que permite que el usuario haga clic en los elementos del footer */
}

/* 2. Capa de fondo que maneja los colores según el tema */
.strellatto_layer {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -2; /* Detrás del canvas*/
    transition: background 0.4s ease;
}

/* Modo Claro: El canvas se limpia por JS, aquí ponemos el fondo claro */
body.light-theme .strellatto_layer {
    background: linear-gradient(900deg, #d2d2d2, #d1d1d1);
}

/* Modo Oscuro: Fondo negro */
body:not(.light-theme) .strellatto_layer {
    background-color: #000;
}

.c{
    flex:1;
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:1;
    color:rgb(255, 255, 255);
    text-align:center;
    margin:0;
}
.light-theme .c{color:rgb(60, 60, 60);}
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 30px; margin: 0 0 10px; border-radius: 0 0 10px 10px;
    background: rgba(29, 29, 29, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Vital para Safari */
    user-select: none;
    font-family: "Michroma", sans-serif;
    will-change: transform; /* Sugerencia de optimización al navegador */
}
a h1{
    font-family:"Michroma";
    font-size:150%;
    transition:color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}
.light-theme header a h1{color:#131313b8;}
header a h1:hover{
    cursor:pointer;
    color:#ffffff; text-shadow:0 0 10px #ffffff40, 0 0 15px #4d4d4d6e;
}
.light-theme header a h1:hover{
    cursor:pointer;
    color:#000000; text-shadow:0 0 10px #5f5f5f58, 0 0 15px #4d4d4d6e;
}
header button, header i{
    font-size:15px;
    background-color:#d0d0d000;
    border:0;
    color:#ffff69;
    transition:transform 0.7s ease-in-out, text-shadow 0.3s ease-in-out;
}
header button:hover{
    cursor:pointer;
    color:#ffd900;
    text-shadow:0 0 20px #fdff7c, 0 0 30px #fcff53;
}
.light-theme header i {
    display: inline-block;
    color: rgb(193, 106, 0);
    text-shadow: none;
    transition: color 0.3s ease, transform 0.3s ease;
}
.light-theme header button i:hover {
    transition: transform 0.3s ease, color 0.3s ease;
    transform: rotate(30deg) scale(1.2);
    text-shadow: none;
    cursor: pointer;
}
.cont{display:flex;gap:1.3vw;}
nav{padding:1dvw;}
a {
    padding: 0 1dvw;
    font: 500 16px 'Epilogue', sans-serif;
    color: rgba(187, 187, 187, 0.73);
    text-align: center;
    text-decoration: none;
    transition: color 0.3s ease;
}
.light-theme a{color:#4a4a4a;}
nav a:hover {
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 10px #a8bfff, 0 0 20px #fff, 0 0 50px #fff;
    transition: text-shadow 0.3s ease, color 0.3s ease;
}
.light-theme a:hover{color:rgb(0, 0, 0);text-shadow:none;}
nav a.active{
    font-weight:800;
    color:rgb(255, 255, 255);
    text-shadow:0 0 10px #ffffff;
}
.light-theme nav a.active{color:rgba(0, 0, 0, 0.841);}
section{
    display:none;
    border-radius:10px;
    padding:20px 30px 20px 30px;
    margin-bottom:15px;
    margin-top:15px;
}
article, section:target{display:block;}
article {
    text-align:start;
    padding: 10px 20px 20px;
    margin: 20px 0 10px;    
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.68);
    font: 300 1rem 'Inter', sans-serif;
}
.light-theme article{background-color:rgba(255, 255, 255, 0.693);}
article h3{
    font-family:'Lexend';
    font-size:18px;
    font-weight:400;
    text-align:left;
    padding-left:5%;
}
.subsection_grid{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
}
.subarticle {
    font-family: 'Epilogue';
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; max-width: 300px;
    min-height: 400px;
    padding: 10px; margin: 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.2s ease;
    will-change: transform;
}
.subarticle p{
    font-family: 'Inter';
    text-align:left;
    hyphens:auto;
    font-size:14px;
    font-weight: 500;
    flex-grow:1;
}
.subarticle h2{
    font-size:15px;
    margin-bottom:12px;
    text-align:center;
    line-height:1.2;
}
.light-theme .subarticle{
    background:#ededed;
    box-shadow:inset 5px 5px 4px #b6b6b672, inset -5px -5px 4px #ffffff;
}
.subarticle img{
    cursor:pointer;
    align-self:center;
    border-radius:10px;
    user-select:none;
    max-width:100%;
    max-height:100%;
    margin-bottom:6px;
    width:auto;
    height:auto;
    transition:transform 0.2s ease-in-out;
    object-fit:contain;
}
.subarticle img:hover{transition-delay:0.3s;transform:scale(1.01);}
pre {
    padding: 6px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    overflow-x: auto;
}
.edi{font-weight:bolder; text-align:justify;}
form{
    display:flex;
    flex-direction:column;
    gap:1rem;
    padding:2rem;
    max-width:600px;
    margin:0 auto;
}
.campo{display:flex;flex-direction:column;}
.campo label{
    text-align:left;
    padding-left:5%;
    font-size:17px;
    font-weight:bold;
    margin-bottom:0.5rem;
}
.campo input, .campo textarea{
    color:#ffffff;
    font-family:'lexend', sans-serif;
    padding:0.75rem;
    border:1px solid #b8b8b8;
    border-radius:4px;
    font-size:1rem;
    resize:none;
    transition:box-shadow 0.5s ease;
    background-color:#000000;
}
.light-theme .campo input, .light-theme .campo textarea{
    transition-duration:5ms;
    color:#272727;
    border:#ffffff;
    background:#fefefe;
    box-shadow:inset 3px 3px 5px #d4d4d4, inset -3px -3px 5px #efefef;

}
.campo input:hover, .campo textarea:hover{
    box-shadow:0 0 10px #ffffff, 0 0 5px #7ba5ff, 0 0 3px #ffffff;
    backdrop-filter:contrast(180%);
}
.light-theme .campo input:hover, .light-theme .campo textarea:hover{
    color:#262626;
    background:#ffffff;
    box-shadow:inset 5px 5px 8px #6e6e6e83, inset 5px 5px 10px #f2f2f2;
    transition:1s;
}
.light-theme .campo input:focus, .light-theme .campo textarea:focus{
    transition-duration:5ms;
    color:#000000;
    border:#525252;
    background:#dbdbdb;
    transition:1s;
}
.contact button {
    margin: 0 30%;
    padding: 0.7rem;
    background-color: #5353538f;
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 4px;
    font: 500 1rem 'Epilogue', sans-serif;
    box-shadow: 0 0 20px #2a2a2a63;
    transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.light-theme .contact button{
    box-shadow:8px 8px 15px #acacac, 8px 8px 15px #f2f2f2;
    background:rgb(220, 220, 220);
    color:#000000;
}
.contact button:hover {
    font-weight: 500;
    cursor: pointer;
    color: #000;
    background-color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); 
    backdrop-filter: contrast(150%);
    transition: all 0.3s ease;
}
.light-theme .contact button:hover{
    transform:none;
    background:#cfcfcf;
    box-shadow:inset 5px 5px 10px #acacac, inset 5px 5px 10px #f2f2f2;
}
.contact button:active{
    color:#000000;
    transition-duration:0.3s;
    animation:77ms;
    background-color:#ffffff;
    box-shadow:0 0 100px #b3c8ff, 0 0 20px #feffc5, 0 0 15px #386dff, 0 0 8px #ff8400, 0 0 7px #b1ff90;
    filter:brightness(1.2);
}
.light-theme .contact button:active {
    background-color: #d8d8d8;
    font-weight: 900;
    transition: box-shadow 0.1s ease;
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.1),inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.content {  flex: 1; padding: 0 2rem; margin: 0 auto;
  width: 90%;max-width: 1200px;
}
/*
@keyframes fondo{ 0%{ background-position:0 0 } 100%{ background-position:0 -190%; }}
@keyframes brillar{ 0%, 100%{ opacity:1; filter:brightness(1);} 50%{ opacity:1; filter:brightness(1.6);}}
*/
::selection{color:#000000; background-color:#ffffff;}
.light-theme ::selection{
    color:rgb(0, 0, 0);
    background-color:#ffff00;
    text-shadow:none;
    animation:2s;
}
html::-webkit-scrollbar{display:none;}
header {
    box-shadow:inset 5px 5px 10px rgba(147, 147, 147, 0.177), inset 2px 2px 5px rgba(236, 236, 236, 0.307), inset -6px -6px 12px rgba(105, 105, 105, 0.175), inset -2px -2px 15px rgba(97, 97, 97, 0.297);
    background:rgba(29, 29, 29, 0.666);
    backdrop-filter:blur(15px) saturate(20%);
    border:1px solid rgba(55, 55, 55, 0.4);
}
footer, section{
    box-shadow:inset 5px 5px 10px rgba(147, 147, 147, 0.177), inset 2px 2px 5px rgba(236, 236, 236, 0.307), inset -6px -6px 12px rgba(105, 105, 105, 0.175), inset -2px -2px 15px rgba(97, 97, 97, 0.297);
    background:rgba(29, 29, 29, 0.666);
    backdrop-filter:blur(2px) saturate(20%);
    border:1px solid rgba(55, 55, 55, 0.4);
}
.light-theme header, .light-theme footer, .light-theme section{
    border:1px solid rgba(255, 255, 255, 0);
    background:#e9e9e9;
    box-shadow:5px 5px 10px rgba(81, 81, 81, 0.256), -5px -5px 10px #ffffff;
}
footer {
    display: block;
    border-radius: 10px 10px 0 0;
    padding: 0 30px;
    margin: 15px 0 0 0;
    user-select: none;
    font-weight: 300;
}
p{line-height:1.6;word-spacing:0.2em;}
.fin p {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font: 600 1.25rem 'Lexend', sans-serif;
    letter-spacing: 0.05rem;
    padding: 0 1rem;
    transition: all 0.6s ease;
}
.light-theme .fin p{ color:#000000;}
b{font-weight:900;}
/* Estilo base para el punto dentro de Gemini */
.link-gemini {
    color: rgb(212, 0, 255);
    text-decoration: underline;
    font-weight: 700;
}

/* AQUÍ ESTÁ EL TRUCO: */
.link-gemini span {
    color: white;             /* Color del punto en modo oscuro */
    text-decoration: none;    /* Quita el subrayado morado del punto */
    display: inline-block;    /* Evita que herede estilos de línea extraños */
}

/* Ajuste para el modo claro */
.light-theme .link-gemini span {
    color: black;             /* Color del punto en modo claro */
}
.light-theme .link-gemini  {
    color: rgb(212, 0, 255);
}

.light-theme b{color:#000000;}
.watermark {
    position: fixed;
    bottom: 20%;
    right: 10px;
    z-index: 9999;
    padding: 10px 5px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 12px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font: 200 12px 'Michroma', sans-serif;
    color: rgba(255, 255, 255, 0.71);
    pointer-events: none;
    user-select: none;
}

.light-theme .watermark{color:rgba(0, 0, 0, 0.418); border:0.8px solid rgba(20, 20, 20, 0.268);}
h2{font-family:'Lexend';font-size:20px;font-weight:200px;}
.light-theme h2{color:#000000;}
img{-webkit-user-drag:none; user-select:none; pointer-events:none;}
a img{ pointer-events:auto;}
@media (max-width:768px){
    body{margin:0 2% !important;}
    .subsection_grid{flex-direction:column;align-items:center;}
    .subarticle{width:95% !important;min-height:auto !important;}
    header{padding:10px;}
    .content{padding-left:1rem;padding-right:1rem;}
    .watermark{display:none;}
}
@media (pointer:coarse){.cards_section{display:none !important;}}
.solo-pc-aviso {
    display: none;
    padding: 10px;
    margin-top: 20px;
    border: 1.4px solid #ffca1b; border-radius: 10px;
    background-color: rgba(251, 255, 0, 0.22); 
    box-shadow: 0 0 10px rgba(255, 217, 67, 0.79);
    text-align: center;
    font: 600 1rem sans-serif;
}

@media (pointer: coarse) {.solo-pc-aviso {display: block;}}


canvas {
    filter: brightness(1.2) contrast(1.1);
    transition: filter 1s ease;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);

    filter: blur(0.5px) brightness(1.1);
}