/* VARIABLES GLOBALES */
:root{
--bg:#020101;                 /* color de fondo principal */
--fg:#8d8c8c;                 /* color del texto principal */
--max:1100px;                 /* ancho máximo del contenido */
--pad:clamp(20px,4vw,56px);   /* padding adaptable */
--gap:clamp(12px,2vw,24px);   /* separación adaptable entre bloques */
}


/* RESET BASICO */
*{
box-sizing:border-box;        /* incluye padding y borde dentro del tamaño */
margin:0;                     /* elimina márgenes por defecto */
padding:0;                    /* elimina padding por defecto */
}


/* BODY PRINCIPAL */
body{
background:var(--bg);         /* aplica color de fondo */
color:var(--fg);              /* aplica color de texto */
font-family:'Courier Prime', monospace; /* tipografía principal */
line-height:1.5;              /* separación entre líneas */
}


/* CONTENEDOR GENERAL */
.container{
max-width:var(--max);         /* limita ancho del contenido */
margin:0 auto;                /* centra el contenido */
padding:var(--pad);           /* espacio interior */
}


/* TITULOS */
h1{
font-size:clamp(36px,5vw,64px); /* tamaño adaptable */
line-height:1.1;
}

h2{
font-size:clamp(26px,3vw,40px);
line-height:1.2;
}

h3{
font-size:22px;
}


/* PARRAFOS */
p{
font-size:18px;               /* tamaño de texto */
line-height:1.7;              /* separación entre líneas */
opacity:.9;                   /* ligera transparencia */
}


/* ENLACES */
a{
color:var(--fg);              /* color del texto */
text-decoration:none;         /* elimina subrayado */
transition:opacity .2s ease;  /* animación suave */
}


main{
padding-top:120px;   /* baja todo el contenido para que no lo tape el header fijo */
}

a:hover{
opacity:.7;                   /* efecto al pasar ratón */
}


/* BOTONES */
.btn{
display:inline-block;                        /* permite aplicar padding */
padding:10px 18px;                           /* espacio interior */
border:2px solid rgba(180,180,180,.6);       /* borde gris */
color:var(--fg);                             /* color texto */
text-decoration:none;                        /* sin subrayado */
font-weight:700;                             /* negrita */
background:transparent;                      /* fondo transparente */
transition:all .25s ease;                    /* transición suave */
}

.btn:hover{
border-color:#ffffff;                        /* cambia color del borde */
color:#ffffff;                               /* cambia color del texto */
}


/* IMAGENES */
img{
max-width:100%;               /* evita que sobresalgan del contenedor */
display:block;                /* elimina espacios extra */
}


/* SECCIONES */
section{
margin-bottom:clamp(60px,8vw,120px); /* separación entre secciones */
}


/* GRID GENERAL */
.grid{
display:grid;                 /* activa grid */
gap:var(--gap);               /* separación entre elementos */
}


/* GRID 3 COLUMNAS */
.grid-3{
grid-template-columns:repeat(3,1fr);
}


/* RESPONSIVE */
@media (max-width:900px){

.grid-3{
grid-template-columns:1fr;    /* una sola columna en móvil */
}

.container{
padding:30px 20px;
}

}

.confirmation-page{
max-width:900px;
margin:0 auto;
padding:180px 20px 100px;
}

.confirmation-box{
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.02);
padding:40px;
text-align:center;
}

.confirmation-box h1{
margin-bottom:24px;
}

.confirmation-box p{
max-width:700px;
margin:0 auto 18px auto;
}

.confirmation-box .btn{
margin-top:20px;
display:inline-block;
}