/*****************************************************************************************************************************************************************************/
/*                                                                                                                                                                           */
/*                                                                  Estilos para el Proyecto GeoFrame                                                                        */
/*                                                                                                                                                                           */
/*****************************************************************************************************************************************************************************/
/*                                                                                                                                                                           */
/* Autor: Magallanes López Carlos Gabriel                                                                                                                                    */
/* Versión del Proyecto: 1.0                                                                                                                                                 */
/* Correo: cgmagallanes23@gmail.com                                                                                                                                          */
/* Ultima Modificación: 23/03/2026                                                                                                                                           */
/*                                                                                                                                                                           */
/*****************************************************************************************************************************************************************************/


/* Propiedades Custom para HTML */
:root {

  --black: #000000;
  --near-black: #04050d;
  --blue-deep: #05091a;
  --blue-mid: #0a1535;
  --blue: #1245d6;
  --blue-bright: #2060ff;
  --blue-electric: #3d7fff;
  --blue-hairline: rgba(60,110,255,0.22);
  --white: #eef2ff;
  --white-dim: rgba(220,228,255,0.55);
  --mono: 'JetBrains Mono',monospace;
  --serif: 'Cormorant Garamond','EB Garamond',Georgia,serif;

}

/* Reset de Selector Global y sus PseudoElementos */
*,*::before,*::after{box-sizing: border-box; margin: 0; padding: 0}

/* Estilos Base, Tamaño de Fuente y Comportamiento del Scroll */
html{font-size: 16px; scroll-behavior: smooth}

/* Estilos para el Body, Fondo de Pantalla con Ruido Sutil y Scroll Horizontal Deshabilitado */
body{background: var(--black); color: var(--white); font-family: var(--serif); overflow-x: hidden; cursor: none}

/* Selector HTML y su Pseudoelemento para el Fondo de Pantalla con Ruido Sutil */
body::before{
    
    content: ''; 
    position: fixed; 
    inset: 0;                                                                                                    /* Cubre toda la pantalla */
    background-image:                                                                                            /* Imagen SVG para el BG */ 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); 
    opacity: 0.025;                                                                                                 
    pointer-events: none;                                                                                        /* Permite hacer clic a través del fondo */
    z-index: 1000                                                                                                /* Asegura que el fondo esté detrás de todo el contenido */

}

/* CURSOR */
.cursor{
    
    position: fixed; 
    width: 6px; height: 6px; 
    background: var(--blue-electric); 
    border-radius: 50%; 
    pointer-events: none;                                                                                        /* Permite hacer clic a través del fondo */
    z-index: 9999;                                                                                               /* Permite que el Cursor esté encima de otros elementos */
    transition: transform .15s ease;                                                                             /* Transición suave para el movimiento del cursor */
    mix-blend-mode: screen                                                                                       /* Mezcla el cursor con el fondo para un efecto de brillo */

}
.cursor-ring{
    
    position: fixed; 
    width: 28px; height: 28px; 
    border: 1px solid var(--blue-electric); border-radius: 50%; 
    pointer-events: none;                                                                                        /* Permite hacer clic a través del fondo */
    z-index: 9998;                                                                                               /* Permite que el Anillo del Cursor esta abajo del Cursor */
    opacity: .5; 
    transition: transform .35s ease, width .3s, height .3s, opacity .3s;                                         /* Transición suave para movimiento cursor y cambios tamaño/opacidad */
    mix-blend-mode: screen                                                                                       /* Mezcla el cursor con el fondo para un efecto de brillo */

}

/* HEADER */
header{
    
    position:fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;                                                                                                /* Asegura que el header esté por debajo del fondo y el cursor */                 
    display: flex;                                                                                               /* Utiliza Flexbox para alinear los elementos del header */   
    align-items: center; 
    justify-content: space-between;
    padding: 0 3.5rem; 
    height: 56px; 
    border-bottom: 1px solid var(--blue-hairline);
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(20px) saturate(1.5)                                                                    /* Efecto de desenfoque y saturación del header sobre el fondo */

}
    

/* Selector de Clase para el Logo del Header */
.logo{
    
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--blue-electric);
    display: flex;                                                                                               /* Utiliza Flexbox para alinear los elementos del header */   
    align-items: center;
    gap: 0.9rem

}

/* Selector de Clase para el Glifo del Logo dentro del Header */
.logo-glyph{
    
    width: 20px; height: 20px;
    flex-shrink: 0                                                                                               /* Evita que el glifo se reduzca de tamaño al ajustar el espacio del header */       

}

/* Asegura que el SVG dentro del glifo del logo ocupe todo el espacio asignado */
.logo-glyph svg{width: 100%; height: 100%}

/* Selector de Clase para el Texto del Centro del Header */
.header-center{
    
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    color: var(--white-dim);
    opacity: 0.6

}

/* Selector de Clase para el Contenedor de Enlaces del Header */
.header-right{display: flex; align-items: center; gap: 2.5rem}

/* Selector de Clase para los Enlaces dentro del Header */
.header-link{
    
    font-family: var(--mono);
    font-size: 0.6rem; 
    letter-spacing: 0.15em; 
    color: var(--white-dim); 
    text-decoration: none; 
    transition: color .2s                                                                                        /* Transición suave para el cambio de color al hacer hover */

}

/* Efecto Hover para los Enlaces del Header */
.header-link:hover{color: var(--white)}

/* Selector de Clase para el Botón de Descarga Principal */
.dl-btn{
    
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--black);
    background: var(--blue-electric);
    padding: 0.55rem 1.4rem;
    text-decoration: none;
    transition: background 0.2s,box-shadow 0.2s                                                                  /* Transición suave para cambio de fondo y sombra al hacer hover */

}

/* Efecto Hover para el Botón de Descarga Principal */
.dl-btn:hover{background: var(--white); box-shadow: 0 0 30px rgba(61,127,255,.5)}

/* Selector de Clase para la Sección Hero */
.hero{
    
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);                                                                       /* Divide el área del hero en dos columnas iguales*/
    position: relative;
    overflow: hidden                                                                                             /* Elementos animados no se desborden fuera del área del hero */

}

/* Selector de Clase para la Parte Izquierda del Hero, que contiene el Texto Principal y las Acciones */
.hero-left{
    
    display: flex;                                                                                               
    flex-direction: column;                                                                                      /* Organiza el contenido en una columna vertical */
    justify-content: flex-end;                                                                                   /* Alinea el contenido hacia la parte inferior del hero */
    padding: 8rem 3.5rem 5rem;
    border-right: 1px solid var(--blue-hairline);
    position: relative;
    z-index: 2                                                                                                   /* Contenido del hero encima de elementos decorativos fondo */

}
.hero-eyebrow{
    
    font-family: var(--mono); font-size: 0.62rem; font-weight: 300;                                                
    letter-spacing: 0.3em;
    color: var(--blue-electric);
    margin-bottom: 2rem;
    opacity: 0.8;
    animation: fadeUp 1s 0.2s both;                                                                              /* Animación aparición, desvanecimiento y movimiento arriba */

}

/* Selector de Clase para el Título Principal del Hero */
.hero-title{
    
    font-family: var(--serif); font-size: clamp(4rem,7vw,7.5rem); font-weight: 300;
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: var(--white);
    animation: fadeUp 1s 0.3s both;                                                                               /* Animación aparición, desvanecimiento y movimiento arriba */
    margin-bottom: 3rem

}

/* Estilos para el Elemento <em> dentro del Título Principal del Hero, para resaltar la palabra "GeoFrame" */
.hero-title em{
    
    font-style: italic;
    color: var(--blue-electric);
    display: block                                                                                               /* Texto ocupe toda la línea, creando efecto de bloque */

}

/* Selector de Clase para la Descripción del Hero, que es un párrafo debajo del título principal */
.hero-desc{
    
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--white-dim);
    line-height: 1.8;
    max-width: 380px;
    animation: fadeUp 1s 0.45s both;                                                                             /* Animación aparición, desvanecimiento y movimiento arriba */
    margin-bottom: 3.5rem;
    border-left:1px solid var(--blue-hairline);
    padding-left:1.5rem

}

/* Selector de Clase para el Contenedor de Acciones del Hero */
.hero-actions{
    
    display: flex;
    gap: 1.2rem;
    align-items: center;
    animation: fadeUp 1s 0.55s both                                                                              /* Animación aparición, desvanecimiento y movimiento arriba */

}

/* Selector de Clase para el Botón de Descarga Principal dentro del Hero */
.hero-dl{
    
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--black);
    background: var(--blue-electric);
    padding: 0.85rem 2rem;
    text-decoration: none;
    transition: all 0.25s;                                                                                       /* Transición suave para todas las propiedades al hacer hover */
    display: inline-block                                                                                        /* Permite aplicar padding y efectos bloque al botón descarga */

}

/* Selector de Clase y PseudoClase Hover para el Botón de Descarga Principal dentro del Hero */
.hero-dl:hover{background: var(--white); box-shadow: 0 0 40px rgba(61, 127, 255, 0.6)}

/* Selector de Clase para el Enlace a GitHub dentro del Hero */
.hero-gh{
    
    font-family:var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--blue-electric);
    text-decoration: none;
    border-bottom: 1px solid var(--blue-hairline);
    padding-bottom: 2px;
    transition: border-color 0.2s                                                                                /* Transición suave para cambio color del borde al hacer hover */

}

/* Selector de Clase y PseudoClase Hover para el Enlace a GitHub dentro del Hero */
.hero-gh:hover{border-color: var(--blue-electric)}

/* Selector de Clase para el Contenedor Derecho del Hero */
.hero-right{
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7rem 2rem 4rem;
    position: relative;
    background: radial-gradient(ellipse 70% 60% at 50% 50%,rgba(18,69,214, 0.12) 0%, transparent 70%);         /* Fondo radial degradado para el lado derecho del hero */
    overflow: hidden                                                                                             /* Elementos animados no se desborden fuera del área del hero */

}

/* Selector de Clase para el Contenedor de Anillos dentro del Lado Derecho del Hero */
.rings{
    
    position: absolute;
    inset: 0;                                                                                                    /* Abarca todo el contenedor derecho del hero */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none                                                                                         /* Evita interferencias con otros elementos interactivos del hero */

}

.ring{
    
    position: absolute;                                                                                          
    border-radius: 50%;        
    border: 1px solid var(--blue-hairline);
    animation: ringPulse 8s ease-in-out infinite                                                                 /* Animación de pulso para los anillos */

}
 
/* Estilos específicos a anillos, aumentando tamaño y retrasando animación para crear efecto onda expansiva */
.ring:nth-child(1){width: 140px;height: 140px;animation-delay: 0s}                                               /* Primer anillo, tamaño inicial y sin retraso en animación */
.ring:nth-child(2){width: 240px;height: 240px;animation-delay: 0.8s}                                             /* Segundo anillo, tamaño mayor y retraso para escalonar la animación respecto al primer anillo */
.ring:nth-child(3){width: 340px;height: 340px;animation-delay: 1.6s}                                             /* Tercer anillo, tamaño aún mayor y retraso adicional para continuar el efecto de onda expansiva */
.ring:nth-child(4){width: 440px;height: 440px;animation-delay: 2.4s}                                             /* Cuarto anillo, tamaño grande y retraso para seguir escalonando la animación */
.ring:nth-child(5){width: 540px;height: 540px;animation-delay: 3.2s}                                             /* Quinto anillo, tamaño máximo y retraso para completar el ciclo de animación de onda expansiva */

/* Animación de pulso para anillos, variando la opacidad para crear efecto de desvanecimiento y resurgimiento */
@keyframes ringPulse{0%, 100% {opacity: 0.3} 50% {opacity: 0.08}}

/* Selector de Clase para la Cruz de Guía dentro del Lado Derecho del Hero */
.crosshair{
    
    position: absolute;                                                                                          
    inset: 0;                                                                                                    /* Abarca todo el contenedor derecho del hero */
    pointer-events: none                                                                                         /* Evita interferencias con otros elementos interactivos del hero */

}

/* Estilos para la Línea Horizontal de la Cruz de Guía */
.ch-h{
    
    position: absolute;
    top: 50%; left: 0; right: 0; 
    height: 1px;
    background:                                                                                                  /* Degradado lineal, efecto línea discontinua con transparencia en extremos y color sólido centro */
        linear-gradient(90deg,transparent 0%,var(--blue-hairline) 30%,var(--blue-hairline) 70%,transparent 100%);
    transform: translateY(-50%)                                                                                  /* Centrar la línea exactamente en el medio del contenedor */

}

/* Estilos para la Línea Vertical de la Cruz de Guía */
.ch-v{
    
    position: absolute;
    top: 0; bottom: 0; left: 50%;                                                                                
    width: 1px;
    background:                                                                                                  /* Degradado lineal, efecto línea discontinua con transparencia en extremos y color sólido centro */
        linear-gradient(180deg,transparent 0%,var(--blue-hairline) 30%,var(--blue-hairline)70%,transparent 100%);
    transform: translateY(-50%)                                                                                  /* Centrar la línea exactamente en el medio del contenedor */

}

/* Selector de Clase para el Contenedor del SVG de la Ventana Normanda dentro del Lado Derecho del Hero */
.window-svg-wrap{
    
    position: relative;
    z-index: 3;                                                                                                  /* SVG de ventana normanda encima de anillos y la cruz de guía */
    animation: fadeIn 1.5s 0.7s both;                                                                            /* Animación de aparición para un efecto de entrada suave */
    filter: drop-shadow(0 0 40px rgba(32, 96, 255, 0.35)) drop-shadow(0 0 80px rgba(32, 96, 255, 0.15))      /* Efecto resplandor SVG, simulando iluminación y resaltando figura */

}

/* Animación Fade In para el SVG de la Ventana Normanda */
@keyframes fadeIn{from {opacity: 0; transform: scale(0.94)} to {opacity: 1; transform: scale(1)}}

/* Selector de Clase para la Sección de Métricas debajo del Hero */
.metrics{
    
    display: grid; 
    grid-template-columns: repeat(4,1fr);                                                                        /* Divide el área de métricas en cuatro columnas iguales */
    border-top: 1px solid var(--blue-hairline) 

}
.metric{
    
    padding: 2.5rem 3.5rem;
    border-right: 1px solid var(--blue-hairline);
    position: relative; 
    overflow: hidden;                                                                                            /* Elementos animados no se desborden fuera del área del hero */
    transition: background 0.4s                                                                                  /* Transición suave para el cambio de fondo al hacer hover */

}

/* Ultimo elemento de métricas no tiene borde derecho para evitar doble borde al final */
.metric:last-child{border-right: none}

/* Efecto Hover para cada métrica, cambiando el fondo a un color azul muy transparente */
.metric:hover{background: rgba(18,69,214,.06)}
 
/* Pseudoelemento para crear línea animada debajo de métrica, inicialmente invisible y expande en hover */
.metric::before{
    
    content: '';
    position: absolute;
    bottom: 0; left: 3.5rem; right: 3.5rem; height:1px;
    background: var(--blue);
    transform: scaleX(0);                                                                                        /* Escala horizontal 0 para ocultar la línea inicialmente */
    transform-origin: left;                                                                                    
    transition: transform .5s ease                                                                               /* Transición suave para la expansión de la línea al hacer hover */

}

/* Pseudoclase Hover para el Pseudoelemento de la línea debajo de cada métrica*/
.metric:hover::before{transform: scaleX(1)}

/* Selector de Clase para el Valor Principal de cada Métrica, con un estilo destacado y un tamaño grande */
.metric-val{
    
    font-family: var(--serif);
    font-size: 3.2rem;
    font-weight: 300;
    color: var(--white);
    line-height: 1;
    margin-bottom: 0.6rem;
    letter-spacing: -0.03em

}

/* Estilos para el Elemento <sup> dentro del Valor Principal de cada Métrica */
.metric-val sup{font-size: 1.2rem; color: var(--blue-electric); vertical-align: super; font-weight: 400}

/* Selector de Clase para la Etiqueta de cada Métrica, con un estilo más sutil y un tamaño pequeño */
.metric-label{
    
    font-family: var(--mono); 
    font-size: 0.58rem; 
    font-weight: 300; 
    letter-spacing: 0.2em; 
    color: var(--white-dim); 
    line-height: 1.6

}

/* Selector de Clase para las Secciones Generales del Sitio */
.section{position: relative; z-index: 2; border-top: 1px solid var(--blue-hairline)}

/* Selector de Clase para el Número de Sección, con un estilo monoespaciado */
.section-num{
    
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: var(--blue-electric);
    opacity: 0.6;
    margin-bottom: 0.8rem

}

/* Selector de Clase para la Sección de Matemáticas */
.math-section{display: grid; grid-template-columns: repeat(2, 1fr)}

/* Selector de Clase para cada Columna dentro de la Sección de Matemáticas */
.math-col{padding: 6rem 3.5rem}

/* Primera columna sección de matemáticas tendrá un borde derecho para separar visualmente las dos columnas */
.math-col:first-child{border-right: 1px solid var(--blue-hairline)}

/* Selector de Clase para el Título de cada Sección, con un estilo destacado y un tamaño grande */
.section-heading{
    
    font-family: var(--serif); 
    font-size: clamp(2rem,3.5vw,3.2rem); 
    font-weight: 300; 
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--white);
    margin-bottom: 2.5rem

}

/* Estilos para el Elemento <em> dentro del Título de cada Sección, para resaltar la palabra "Matemáticas" */
.section-heading em{font-style: italic;color: var(--blue-electric)}

/* Selector de Clase para el Cuerpo del Texto dentro de la Sección de Matemáticas */
.math-body{
    
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 00;
    font-style: italic;
    color: var(--white-dim);
    line-height: 1.9;
    margin-bottom: 2.5rem

}

/* Selector de Clase para las Ecuaciones dentro de la Sección de Matemáticas */
.eq{
    
    margin: 1.2rem 0; 
    display: grid; 
    grid-template-columns: auto 1fr;                                                                             /* Divide área ecuación en 2 columnas, fórmula ocupa espacio restante */
    gap: 0 1.5rem;
    align-items: baseline                                                                                        /* Alinea fórmula y etiqueta ecuación por su línea base */

}

/* Selector de Clase para la Etiqueta de cada Ecuación, con un estilo monoespaciado y un tamaño pequeño */
.eq-tag{
    
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--blue-electric);
    opacity: 0.6;
    white-space: nowrap;                                                                                         /* Etiqueta ecuación no se divida en varias líneas */
    padding-top: 0.2rem

}

/* Selector de Clase para la Fórmula de cada Ecuación, con un estilo destacado y un tamaño mediano */
.eq-formula{
    
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--white);
    letter-spacing: 0.05em;
    line-height: 1.5;
    border-bottom: 1px solid var(--blue-hairline);
    padding-bottom: 1rem

}

/* Estilos para el Elemento <span class="hi"> dentro de la Fórmula de cada Ecuación*/
.eq-formula .hi{color:var(--blue-electric)}

/* Estilos para el Elemento <span class="result"> dentro de la Fórmula de cada Ecuación */
.eq-formula .result{color: var(--blue-electric); font-weight: 700; font-size:0.9rem}

/* Selector de Lista de Características */
.feat-list{list-style: none; margin-top: 1rem}

/* Selector de Clase para cada Elemento de la Lista de Características */
.feat-item{
    
    display: grid; 
    grid-template-columns: 28px 1fr;                                                                             /* Divide área de cada característica en dos columnas, número fijo */
    gap: 1rem; 
    align-items:start; 
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--blue-hairline)

}

/* Último elemento de la lista de características no tiene borde inferior para evitar doble borde al final */
.feat-item:last-child{border-bottom: none}

/* Selector de Clase para el Número de cada Característica, con un estilo monoespaciado y un tamaño pequeño */
.feat-n{
    
    font-family: var(--mono); 
    font-size: 0.58rem; 
    font-weight: 700; 
    color: var(--blue-electric); 
    padding-top: 0.35rem; letter-spacing: 0.1em}

/* Selector de Clase para el Título de cada Característica, con un estilo destacado y un tamaño mediano */
.feat-title{font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--white);margin-bottom: 0.4rem}

/* Selector de Clase para el Cuerpo del Texto de cada Característica, con un estilo más sutil y un tamaño pequeño */
.feat-body{font-family:var(--serif);font-size: 0.9rem;font-style: italic;font-weight: 300;color:var(--white-dim);line-height: 1.7}

/* Selector de Clase para la Sección de Figuras */
.figure-section{padding:5rem 3.5rem}

/* Selector de Clase para el Encabezado de cada Figura */
.figure-header{display: flex; align-items: baseline ; gap: 2rem; margin-bottom:3 rem}

/* Selector de Clase para la Etiqueta de cada Figura dentro del Encabezado */
.fig-label{
    
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    color: var(--blue-electric);
    opacity: 0.6;
    white-space: nowrap                                                                                          /* Etiqueta figura no se divida en varias líneas */

}

/* Selector de Clase para el Título de cada Figura dentro del Encabezado */
.fig-title{
    
    font-family: var(--serif);
    font-size: 1.1rem; 
    font-style: italic; 
    font-weight: 300;
    color: var(--white-dim)
    
}

/* Selector de Clase para la Línea Divisoria entre Figuras */
.figure-line{
    
    flex: 1;                                                                                                     /* Espacio restante título y etiqueta para crear división */
    height: 1px;
    background: var(--blue-hairline)

}

/* Selector de Clase para el Contenedor de cada Figura, con un borde y fondo para resaltar la imagen */
.app-figure{
    
    position: relative; 
    border: 1px solid var(--blue-hairline);
    overflow: hidden;
    background: var(--near-black)

}

/* Pseudoelemento para crear el título descriptivo debajo de cada figura */
.app-figure::before{
    
    content:'Fig. 1 — Interfaz de GeoFrame con P = 12 m';
    display: block;                                                                                              /* Pseudoelemento ocupe toda la línea, creando bloque debajo de figura */
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--white-dim);
    opacity: 0.5;
    padding: 0.9rem 1.4rem;
    border-bottom: 1px solid var(--blue-hairline)

}

/* Estilos para la Imagen dentro de cada Figura, con efecto de opacidad y saturación para un aspecto más suave */
.app-figure img{
    
    width: 100%;
    display: block;                                                                                              /* Elimina espacio debajo de imagen */
    opacity: 0.9;
    transition: opacity 0.4s;
    filter: saturate(0.9) brightness(0.95) contrast(1.05)                                                        /* Saturación, brillo y contraste para suavizar la imagen */

}

/* Efecto Hover para la Imagen dentro de cada Figura */
.app-figure:hover img{opacity: 1}

/* Selector de Clase para la Sección de Descarga */
.dl-section{display: grid; grid-template-columns: repeat(2, 1fr); min-height: 50vh}

/* Selector de Clase para el Lado Izquierdo de la Sección de Descarga */
.dl-left{
    
    padding: 6rem 3.5rem;
    display: flex;
    flex-direction: column;                                                                                      /* Organiza el contenido en una columna vertical */
    justify-content: space-between;
    border-right: 1px solid var(--blue-hairline);
    background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(18, 69, 214, 0.1) 0%,transparent 70%)

}

/* Selector de Clase para el Título Principal de la Sección de Descarga */
.dl-big{
    
    font-family: var(--serif);
    font-size: clamp(2.5rem,5vw,5rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--white);
    letter-spacing: -0.02em

}

/* Estilos para el Elemento <em> dentro del Título Principal de la Sección de Descarga */
.dl-big em{font-style: italic; color: var(--blue-electric); display: block}

/* Selector de Clase para el Contenedor Inferior del Lado Izquierdo de la Sección de Descarga */
.dl-bottom{
    
    display: flex;
    flex-direction: column;                                                                                      /* Organiza el contenido en una columna vertical */
    gap: 1rem

}

/* Selector de Clase para el Botón de Descarga Principal dentro del Lado Izquierdo de la Sección de Descarga */
.dl-main{
    
    font-family:var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--black);
    background: var(--blue-electric);
    padding: 1.2rem 2.5rem;
    text-decoration: none;
    display:inline-block;                                                                                        /* Permite aplicar padding y efectos bloque al botón descarga */
    transition:all 0.25s;                                                                                        /* Transición suave para todas las propiedades al hacer hover */
    align-self: flex-start                                                                                       /* Alinea botón al inicio del contenedor inferior */

}

/* Selector de Clase y PseudoClase Hover para el Botón de Descarga Principal */
.dl-main:hover{background: var(--white); box-shadow: 0 0 50px rgba(61,127,255,.5)}

/* Selector de Clase para la Nota de la Sección de Descarga */
.dl-note{
    
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    color: var(--white-dim);
    opacity: 0.5

}

/* Selector de Clase para el Lado Derecho de la Sección de Descarga */
.dl-right{
    
    padding: 6rem 3.5rem;
    display: flex;
    flex-direction: column;                                                                                      /* Organiza el contenido en una columna vertical */
    justify-content: center

}

/* Selector de Clase para la Tabla de Especificaciones dentro del Lado Derecho de la Sección de Descarga */
.spec-table{
    
    width:100%; 
    border-collapse: collapse                                                                                    /* Elimina espacio entre celdas para un borde uniforme */

}

/* Estilos para las Filas de la Tabla de Especificaciones, con un borde inferior para separar cada fila */
.spec-table tr{border-bottom: 1px solid var(--blue-hairline)}

/* Estilos para las Celdas de la Tabla de Especificaciones, con un estilo más sutil y un tamaño pequeño */
.spec-table td{padding: 1rem 0; font-size: 0.85rem}

/* Estilos específicos para la primera columna de la Tabla de Especificaciones */
.spec-table td:first-child{
    
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--blue-electric);
    opacity: 0.6;
    width: 40%;
    vertical-align: top;
    padding-top: 1.1rem

}

/* Estilos específicos para la segunda columna de la Tabla de Especificaciones */
.spec-table td:last-child{
    
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--white-dim)

}

/* Pie de Página */
footer{
    
    border-top: 1px solid var(--blue-hairline);
    padding: 2.5rem 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap                                                                                              /* Contenido ajuste pantallas pequeñas, evitando desbordamiento horizontal */

}

/* Selector de Clase para el Nombre del Pie de Página */
.footer-name{
    
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    color: var(--white-dim)

}

/* Selector de Clase para los Metadatos del Pie de Página, con un estilo monoespaciado y un tamaño pequeño */
.footer-meta{
    
    font-family: var(--mono);
    font-size: 0.55rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: var(--white-dim);
    opacity: 0.35;
    text-align: right;
    line-height: 2

}

/* Selector de Clase para el Efecto de Reveal */
.reveal{
    
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease,transform .8s ease

}

/* Selector de Clase para el Estado Visible del Efecto Reveal */
.reveal.visible{opacity: 1; transform: none}

/* Selectores de Clase para Retrasar Animación Reveal en Elementos Específicos */
.reveal.visible.d1{transition-delay: 0.1s}                                                                       /* Elementos con clase d1 tendrán un retraso de 0.1s */
.reveal.visible.d2{transition-delay: 0.2s}                                                                       /* Elementos con clase d2 tendrán un retraso de 0.2s */
.reveal.visible.d3{transition-delay: 0.3s}                                                                       /* Elementos con clase d3 tendrán un retraso de 0.3s */
.reveal.visible.d4{transition-delay: 0.4s}                                                                       /* Elementos con clase d4 tendrán un retraso de 0.4s */

/* Animación de Desvanecimiento hacia Arriba */
@keyframes fadeUp{ from {opacity: 0; transform: translateY(28px)}to {opacity: 1; transform: translateY(0)}}

/* Selector de Clase para el Efecto de Dibujo de Trazos en SVG */
.draw-path{
    
    stroke-dasharray: 2000;                                                                                      /* Longitud total trazo para animación */
    stroke-dashoffset: 2000;                                                                                     /* Inicialmente oculta el trazo al establecer el desplazamiento igual a la longitud total del trazo */
    animation: drawPath 2.5s 0.8s ease forwards                                                                  /* Aplica la animación de dibujo de trazos */

}

/* Selector de Clase para una Variante Rápida del Efecto de Dibujo de Trazos en SVG */
.draw-path-fast{
    
    stroke-dasharray: 600;                                                                                      /* Longitud total trazo para animación */
    stroke-dashoffset: 600;                                                                                     /* Inicialmente oculta el trazo al establecer el desplazamiento igual a la longitud total del trazo */
    animation: drawPath 1.8s 1.2s ease forwards                                                                 /* Aplica la animación de dibujo de trazos */

}

/* Animación de Dibujo de Trazos SVG, animando el desplazamiento del trazo desde la longitud total hasta 0 */
@keyframes drawPath{ 
    
    to {stroke-dashoffset: 0}                                                                                    /* Desplazamiento del trazo en 0, revelando trazo SVG */

}

/* Botón Flotante de Cambio de Idioma */
#langToggleBtn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9997;
    background: var(--blue-electric);
    color: var(--black);
    border: none;
    border-radius: 0;
    padding: 12px 22px;
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    cursor: none;
    box-shadow: 0 0 30px rgba(61, 127, 255, 0.4);
    transition: all 0.25s;
}

#langToggleBtn:hover {
    background: var(--white);
    box-shadow: 0 0 50px rgba(61, 127, 255, 0.6);
}

/* Responsive Design */
@media(max-width: 900px){
  
  .hero{grid-template-columns: 1fr}                                                                              /* Principal: Adapta a 1 columna para pantallas pequeñas */
  .hero-right{min-height: 60vw}                                                                                  /* Principal Derecha: Aumenta altura mínima */
  .hero-left{border-right: none; padding-top: 6rem}                                                              /* Principal Izquierda: Elimina borde derecho, reduce padding superior */
  .metrics{grid-template-columns: repeat(2, 1fr)}                                                                /* Métricas: Adapta a 2 columnas para pantallas pequeñas */
  .math-section{grid-template-columns: 1fr}                                                                      /* Matemáticas: Adapta a 1 columna para pantallas pequeñas */
  .math-col:first-child{border-right: none; border-bottom: 1px solid var(--blue-hairline)}                       /* 1er columna Matemáticas: Elimina borde derecho, agrega borde inferior */
  .dl-section{grid-template-columns: 1fr}                                                                        /* Descarga: Adapta a 1 columna para pantallas pequeñas */
  .dl-left{border-right: none; border-bottom: 1px solid var(--blue-hairline)}                                    /* Descarga Izquierda: Elimina borde derecho, agrega borde inferior */
  header{padding: 0 1.5rem}                                                                                      /* Header: Reduce padding horizontal para pantallas pequeñas */
  .header-center, .header-link{display: none}                                                                    /* Header Centro y Enlaces: Oculta para pantallas pequeñas */
  .hero-left, .math-col, .dl-left, .dl-right, .figure-section{padding-left: 1.5rem; padding-right: 1.5rem}       /* Principal Izq., Matemáticas, Descarga Izq. y Der. y Figuras: Reduce padding horizontal */
  footer{padding: 2rem 1.5rem}                                                                                   /* Pie de Página: Reduce padding para pantallas pequeñas */
  .metric{padding: 2rem 1.5rem}                                                                                  /* Métricas: Reduce padding para pantallas pequeñas */
  .metric:nth-child(2){border-right: none}                                                                       /* Segunda métrica: Elimina borde derecho */
  #langToggleBtn {
        bottom: 16px;
        right: 16px;
        padding: 10px 16px;
        font-size: 0.6rem;
    }
  
}

/*****************************************************************************************************************************************************************************/