/*? === DOC ===  */
:root {
    /*! HEADER  */
    --header-bg-color   : #0f1720;
    --header-height     : 10dvh;
    --header-text-size  : 2.4vh;
    --header-text-color : #c7d2d9;
    --header-text-hover : #ffffff;
    --header-transition-duration : 0.28s;
    --header-transition-type     : cubic-bezier(.2,.9,.2,1);

    --supertitle-size   : 3vh;
    --title-size        : 2.3vh;
    --subtitle-size     : 2.0vh;
    --supertext-size    : 1.8vh;
    --text-size         : 1.5vh;

    /*! MAIN  */
    --main-bg-color   : #0b1220; /* fondo oscuro base */
    --main-height     : 90dvh;

    /* colores de uso */
    --accent: #3ddc97; /* ligero verde/acento */
    --muted: #98a2ad;
    --text-on-dark: #e6eef3;
    --bg-gradient-a: #071021;
    --bg-gradient-b: #122033;
}

@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    src: url("https://didag.net/Static/symbols.woff2") format("woff2");
}

.symbols {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga";
}

html * {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}

/*? === BODY ===  */

body {
    font-family: 'Arial', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    color: var(--text-on-dark);
    user-select: none;

    background: linear-gradient(135deg, var(--bg-gradient-a) 0%, var(--bg-gradient-b) 100%);
    opacity: 1;
    overflow-x: hidden;

    transition: background-color var(--header-transition-duration) var(--header-transition-type),
                color var(--header-transition-duration) var(--header-transition-type);
}

h1 { font-size: clamp(2.8rem, 8vw, 15vh); letter-spacing: -1px; }
h2 { font-size: clamp(1.8rem, 4.5vw, 5rem); }
h3 { font-size: clamp(1.2rem, 3.2vw, 2rem); }

/*? === HEADER ===  */

.section_header {
    height: var(--header-height);
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(20,28,38,0.9) 0%, rgba(34,47,63,0.95) 100%);
}

/*todo === HEADER LOGO ===  */

.section_header_logo {
    height: 100%;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.section_header_logo_img { height: 60%; }

.section_header_logo img { height: 100%; width: 100%; object-fit: contain; }

/*? === MAIN ===  */

.section_main {
    min-height: var(--main-height);
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 3vh 2vw;
    background: linear-gradient(45deg, rgba(10,16,26,0.6) 0%, rgba(18,32,48,0.65) 100%);
}

.section_main_error {
    height: auto;
    width: 40%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.4rem;
    color: var(--text-on-dark);
    padding: 1.5rem 1rem;
}

.section_main_error h1 {
    font-size: clamp(4rem, 12vw, 15vh);
    line-height: 0.9;
    margin: 0;
    color: var(--accent);
    text-shadow: 0 6px 22px rgba(3,10,18,0.6);
}

.section_main_error p {
    color: var(--muted);
    font-size: clamp(1rem, 2.2vw, 1.9rem);
    margin-top: 0.2rem;
}

.section_main_icon {
    height: auto;
    width: 40%;
    min-width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: clamp(6rem, 24vw, 40vh);
    filter: drop-shadow(0 14px 30px rgba(0,0,0,0.6));
}

.section_main_error a {
    display: inline-block;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(90deg, rgba(61,220,151,0.12), rgba(61,220,151,0.18));
    color: var(--accent);
    border-radius: 0.6rem;
    text-decoration: none;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease;
}

.section_main_error a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(17,24,39,0.35); }

@media (prefers-reduced-motion: reduce){
    .section_main_error a { transition: none; }
}

/* Responsive adjustments */
@media screen and (max-width: 1024px){
    .section_main { gap: 1.6rem; padding: 4vh 3vw; }
    .section_main_error { width: 48%; }
    .section_main_icon { width: 48%; font-size: clamp(5rem, 20vw, 34vh); }
}

@media screen and (max-width: 768px){
    /* pasar a columna para móviles, mantener proporciones visuales */
    .section_main { flex-direction: column; align-items: center; padding: 4vh 4vw; }
    .section_main_error { width: 92%; text-align: center; align-items: center; }
    .section_main_error h1 { font-size: clamp(3.6rem, 16vw, 11.5rem); }
    .section_main_error p { font-size: clamp(0.95rem, 3.6vw, 1.4rem); }
    .section_main_icon { width: 92%; font-size: clamp(5rem, 36vw, 24vh); margin-top: 1rem; }
}

@media screen and (max-width: 420px){
    .section_header { height: 9dvh; }
    .section_main_error { padding: 1rem; }
    .section_main_error h1 { font-size: clamp(3rem, 20vw, 8rem); }
    .section_main_icon { font-size: clamp(4rem, 40vw, 18rem); }
}

/* cierre de archivo */