.contact-page{
max-width:1200px;                 /* ancho máximo de la página */
margin:0 auto;                    /* centra el contenido */
padding:140px 40px 120px;         /* espacio interior */
}

.contact-hero{
text-align:center;                /* centra el texto de cabecera */
margin-bottom:100px;              /* separación con el contenido */
}

.contact-kicker{
margin:0 0 14px 0;                /* margen inferior */
font-size:14px;                   /* tamaño pequeño */
letter-spacing:.12em;             /* separación entre letras */
text-transform:uppercase;         /* mayúsculas */
opacity:.65;                      /* ligera transparencia */
}

.contact-hero h1{
margin:0 0 24px 0;                /* separación inferior */
font-size:clamp(34px,5vw,64px);   /* tamaño adaptable */
line-height:1.05;                 /* altura entre líneas */
}

.contact-intro{
max-width:820px;                  /* limita el ancho del texto */
margin:0 auto;                    /* centra el bloque */
font-size:clamp(18px,2vw,24px);   /* tamaño adaptable */
line-height:1.6;                  /* separación entre líneas */
opacity:.85;                      /* ligera transparencia */
}

.contact-content{
display:grid;                     /* activa grid */
grid-template-columns:.9fr 1.1fr; /* dos columnas */
gap:60px;                         /* espacio entre columnas */
align-items:start;                /* alinea arriba */
}

.contact-info h2,
.contact-form-block h2{
margin:0 0 24px 0;                /* margen inferior */
font-size:clamp(26px,3vw,40px);   /* tamaño adaptable */
line-height:1.1;
}

.info-block{
margin-bottom:28px;               /* separación entre bloques */
}

.info-block h3{
margin:0 0 10px 0;                /* margen inferior */
font-size:18px;                   /* tamaño subtítulo */
}

.info-block p{
margin:0 0 8px 0;                 /* separación entre líneas */
font-size:18px;                   /* tamaño de texto */
line-height:1.6;                  /* altura entre líneas */
opacity:.85;                      /* transparencia suave */
}

.contact-form{
display:flex;                     /* activa flex */
flex-direction:column;            /* coloca elementos en columna */
gap:14px;                         /* espacio entre campos */
}

.contact-form label{
font-size:15px;                   /* tamaño de la etiqueta */
font-weight:700;                  /* grosor */
letter-spacing:.03em;             /* separación entre letras */
}

.contact-form input,
.contact-form textarea{
width:100%;                       /* ancho completo */
padding:14px 16px;                /* espacio interior */
background:transparent;           /* fondo transparente */
border:1px solid rgba(255,255,255,.18); /* borde sutil */
color:#faf7f7;                    /* color del texto */
font-family:'Courier Prime', monospace; /* misma tipografía */
font-size:16px;                   /* tamaño texto */
outline:none;                     /* elimina borde azul por defecto */
}

.contact-form input:focus,
.contact-form textarea:focus{
border-color:rgba(255,255,255,.45); /* resalta el borde al enfocar */
}

.contact-form textarea{
resize:vertical;                  /* permite redimensionar verticalmente */
min-height:160px;                 /* altura mínima */
}

.contact-form .btn{
margin-top:10px;                  /* separación respecto al último campo */
align-self:flex-start;            /* alinea el botón a la izquierda */
}

@media (max-width:900px){

.contact-page{
padding:110px 24px 90px;          /* reduce padding en móvil */
}

.contact-content{
grid-template-columns:1fr;        /* una sola columna */
gap:50px;                         /* separación entre bloques */
}

}