/* ========================================
ESTILOS PARA DISPOSITIVOS MÓVILES
Media query para pantallas menores a 480px
IMPORTANTE: Este archivo utiliza variables CSS definidas en variables.css
Asegúrate de importar variables.css antes que este archivo:
======================================== */
@media (max-width: 480px) {
/* ========================================
ESTILOS GENERALES Y TIPOGRAFÍA
======================================== */
/* Configuración del cuerpo principal */
body {
background-image: url('Fondo.jpg'); /* Imagen de fondo */
background-size: 100vw 100vh; /* Cubrir toda la ventana */
background-attachment: fixed; /* Fondo fijo al hacer scroll */
color: var(--color-texto-principal); /* Color de texto principal (café oscuro) */
font: var(--fuente-mediana) Arial; /* Fuente por defecto */
margin: 0 auto; /* Centrar horizontalmente */
padding: 0; /* Sin relleno */
position: relative; /* Posición relativa para elementos hijos */
}
/* Estilos para todos los encabezados */
h1, h2, h3, h4, h5, h6 {
color: var(--color-texto-principal); /* Color consistente para títulos */
}
/* Texto pequeño */
small {
font-size: var(--fuente-pequena); /* Tamaño reducido para texto secundario */
}
/* Texto en negrita */
b, strong {
font-weight: bold; /* Énfasis en texto importante */
}
/* Enlaces sin decoración por defecto */
a {
text-decoration: none; /* Sin subrayado */
}
/* Efecto hover en enlaces */
a:hover {
text-decoration: underline; /* Subrayado al pasar el mouse */
}
/* ========================================
CLASES UTILITARIAS DE ALINEACIÓN
======================================== */
/* Alineación básica */
.left {
float: left; /* Flotación izquierda */
}
.right {
float: right; /* Flotación derecha */
}
/* Alineación con márgenes */
.alignleft {
float: left; /* Flotación izquierda */
margin-right: var(--espaciado-medio); /* Espacio a la derecha */
}
.alignright {
float: right; /* Flotación derecha */
margin-left: var(--espaciado-medio); /* Espacio a la izquierda */
}
/* Técnica clearfix para limpiar flotaciones */
.clearfix:after,
form:after {
content: "."; /* Contenido vacío */
display: block; /* Elemento de bloque */
height: 0; /* Sin altura */
clear: both; /* Limpiar flotaciones */
visibility: hidden; /* Ocultar contenido */
}
/* Contenedor principal */
.container {
margin: var(--espaciado-extra-grande) auto; /* Centrado con margen superior/inferior */
position: relative; /* Posición relativa */
width: 100%; /* Ancho completo */
}
/* ========================================
ÁREA DE CONTENIDO PRINCIPAL
======================================== */
/* Contenedor principal del contenido con efectos visuales */
#content {
/* Gradiente de fondo para un efecto visual suave */
background: var(--color-fondo-principal); /* Color de respaldo */
background: var(--gradiente-principal); /* Gradiente moderno */
/* Compatibilidad con navegadores antiguos */
background: -webkit-linear-gradient(top, var(--color-fondo-secundario) 0%, var(--color-fondo-principal) 100%);
background: -moz-linear-gradient(top, var(--color-fondo-secundario) 0%, var(--color-fondo-principal) 100%);
background: -o-linear-gradient(top, var(--color-fondo-secundario) 0%, var(--color-fondo-principal) 100%);
background: -ms-linear-gradient(top, var(--color-fondo-secundario) 0%, var(--color-fondo-principal) 100%);
/* Filtro para Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f9f9f9', GradientType=0);
/* Sombra interior para profundidad */
box-shadow: var(--sombra-caja-interna); /* Sombra interior blanca */
-webkit-box-shadow: var(--sombra-caja-interna); /* Safari/Chrome */
-moz-box-shadow: var(--sombra-caja-interna); /* Firefox */
/* Estructura y posicionamiento */
border: 1px solid var(--color-borde-principal); /* Borde café */
margin: 0 auto; /* Centrado horizontal */
padding: var(--espaciado-pequeno) 0 0; /* Relleno superior */
position: relative; /* Para pseudo-elementos */
text-align: center; /* Texto centrado */
text-shadow: var(--sombra-texto); /* Sombra de texto */
width: 100%; /* Ancho completo */
}
/* Título principal dentro del contenido */
#content h1 {
color: var(--color-texto-principal); /* Color café */
font: bold var(--fuente-titulo) Helvetica, Arial, sans-serif; /* Fuente grande y negrita */
letter-spacing: -0.05em; /* Espaciado de letras reducido */
line-height: 20px; /* Altura de línea */
margin: auto; /* Centrado */
}
/* Líneas decorativas antes y después del título */
#content h1:before,
#content h1:after {
content: ""; /* Contenido vacío */
height: 1px; /* Altura de línea */
position: absolute; /* Posición absoluta */
top: 10px; /* Posición vertical */
width: 27%; /* Ancho de línea */
}
/* Línea decorativa derecha */
#content h1:after {
background: var(--gradiente-linea-derecha); /* Gradiente izq-der */
right: 0; /* Posición derecha */
}
/* Línea decorativa izquierda */
#content h1:before {
background: var(--gradiente-linea-izquierda); /* Gradiente der-izq */
left: 0; /* Posición izquierda */
}
/* Pseudo-elementos para crear efecto de capas apiladas */
#content:after,
#content:before {
/* Mismo fondo que el contenido principal */
background: var(--color-fondo-principal);
background: var(--gradiente-principal);
/* Compatibilidad con navegadores antiguos */
background: -webkit-linear-gradient(top, var(--color-fondo-secundario) 0%, var(--color-fondo-principal) 100%);
background: -moz-linear-gradient(top, var(--color-fondo-secundario) 0%, var(--color-fondo-principal) 100%);
background: -o-linear-gradient(top, var(--color-fondo-secundario) 0%, var(--color-fondo-principal) 100%);
background: -ms-linear-gradient(top, var(--color-fondo-secundario) 0%, var(--color-fondo-principal) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f9f9f9', GradientType=0);
/* Propiedades de las capas */
border: 1px solid var(--color-borde-principal); /* Mismo borde */
content: ""; /* Contenido vacío */
display: block; /* Elemento de bloque */
height: 100%; /* Altura completa */
left: -1px; /* Desplazamiento izquierdo */
position: absolute; /* Posición absoluta */
width: 100%; /* Ancho completo */
}
/* Primera capa rotada (más visible) */
#content:after {
transform: rotate(2deg); /* Rotación 2 grados */
-webkit-transform: rotate(2deg); /* Safari/Chrome */
-moz-transform: rotate(2deg); /* Firefox */
-ms-transform: rotate(2deg); /* IE */
-o-transform: rotate(2deg); /* Opera */
top: 0; /* Posición superior */
z-index: -1; /* Detrás del contenido */
}
/* Segunda capa rotada (más atrás) */
#content:before {
transform: rotate(-3deg); /* Rotación -3 grados */
-webkit-transform: rotate(-3deg); /* Safari/Chrome */
-moz-transform: rotate(-3deg); /* Firefox */
-ms-transform: rotate(-3deg); /* IE */
-o-transform: rotate(-3deg); /* Opera */
top: 0; /* Posición superior */
z-index: -2; /* Más atrás que :after */
}
/* ========================================
ESTILOS DE BOTONES
======================================== */
/* Botón principal con gradiente */
.button {
/* Gradiente de fondo */
background: #f7f9fa; /* Color de respaldo */
background: var(--gradiente-boton);
/* Compatibilidad con navegadores antiguos */
background: -webkit-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
background: -moz-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
background: -o-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
background: -ms-linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0);
/* Sombra interior */
box-shadow: var(--sombra-caja-boton); /* Sombra interior sutil */
-webkit-box-shadow: var(--sombra-caja-boton);
-moz-box-shadow: var(--sombra-caja-boton);
/* Bordes redondeados solo en la parte inferior */
border-radius: 0 0 var(--radio-medio) var(--radio-medio); /* Esquinas inferiores redondeadas */
-webkit-border-radius: 0 0 var(--radio-medio) var(--radio-medio);
-moz-border-radius: 0 0 var(--radio-medio) var(--radio-medio);
border-top: 1px solid var(--color-borde-button); /* Borde superior */
padding: var(--espaciado-medio) 0; /* Relleno vertical */
}
/* Enlaces dentro del botón */
.button a {
background: url(https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat; /* Icono de fondo */
color: #7E7E7E; /* Color de texto gris */
font-size: var(--fuente-boton); /* Tamaño de fuente */
padding: 2px 0 2px 40px; /* Relleno para el icono */
text-decoration: none; /* Sin subrayado */
transition: var(--transicion-rapida); /* Transición suave */
-webkit-transition: var(--transicion-rapida);
-moz-transition: var(--transicion-rapida);
}
/* Efecto hover en enlaces del botón */
.button a:hover {
background-position: 0 -135px; /* Cambio de posición del icono */
color: var(--color-secundario); /* Color naranja en hover */
}
/* ========================================
ESTILOS DE INFORMACIÓN
======================================== */
/* Párrafos informativos */
.info p {
text-align: center; /* Texto centrado */
color: var(--color-texto-secundario); /* Color gris claro */
text-transform: none; /* Sin transformación de texto */
font-weight: 600; /* Peso de fuente semi-negrita */
font-size: var(--fuente-grande); /* Tamaño de fuente */
margin-top: 2px; /* Margen superior mínimo */
}
/* Iconos dentro de la información */
.info i {
color: var(--color-terciario); /* Color salmón para iconos */
}
/* ========================================
ESTILOS DE FORMULARIOS
======================================== */
/* Contenedor principal del formulario */
form {
border-radius: var(--radio-medio); /* Esquinas redondeadas */
max-width: var(--ancho-maximo-form); /* Ancho máximo */
width: 100%; /* Ancho completo hasta el máximo */
margin: 1% auto; /* Centrado con margen */
background-color: var(--color-fondo-principal); /* Fondo gris claro */
overflow: hidden; /* Ocultar contenido desbordante */
}
/* Spans dentro de párrafos (para errores) */
p span {
color: #F00; /* Color rojo para errores */
}
/* Párrafos generales */
p {
margin: 0; /* Sin margen */
font-weight: 500; /* Peso de fuente medio */
line-height: 2; /* Altura de línea doble */
color: var(--color-texto-principal); /* Color café */
}
/* ========================================
ESTILOS DE CAMPOS DE ENTRADA
======================================== */
/* Campos de entrada básicos */
input {
border-radius: 0 var(--radio-medio) var(--radio-medio) 0; /* Esquinas redondeadas a la derecha */
border: 1px solid var(--color-borde-secundario); /* Borde gris claro */
margin-bottom: var(--espaciado-medio); /* Margen inferior */
width: var(--ancho-campo-pequeno); /* Ancho por defecto */
height: var(--altura-campo); /* Altura estándar */
float: left; /* Flotación izquierda */
padding: 0 var(--espaciado-medio); /* Relleno horizontal */
}
/* Campos específicos con ancho mayor */
input#numeroTelefono,
input#correoParaDistribucion,
input#direccion,
input#otrosNombres,
input#nombre1,
input#apellido1,
input#apellido2,
input#razonSocial,
input#numeroDocumento,
input#pais {
width: var(--ancho-campo-grande); /* Ancho mayor para campos importantes */
}
/* Selectores con ancho mayor */
select#tipoContribuyente,
select#tipoDocumento,
select#departamento,
select#ciudad,
select#responsabilidadTributaria,
select#tipoDeResponsabilidad {
width: var(--ancho-campo-grande); /* Ancho mayor para selectores */
}
/* Eliminar controles de número en campos numéricos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; /* Ocultar flechas */
margin: 0; /* Sin margen */
}
/* Estilos para elementos select */
select {
border-radius: 0 var(--radio-medio) var(--radio-medio) 0; /* Esquinas redondeadas a la derecha */
border: 1px solid var(--color-borde-secundario); /* Borde gris claro */
margin-bottom: var(--espaciado-medio); /* Margen inferior */
width: var(--ancho-campo-normal); /* Ancho por defecto */
height: var(--altura-campo); /* Altura estándar */
float: left; /* Flotación izquierda */
padding: 0 var(--espaciado-medio); /* Relleno horizontal */
}
/* Redefinir estilos de enlaces para formularios */
a {
text-decoration: inherit; /* Heredar decoración */
}
/* Áreas de texto */
textarea {
border-radius: 0 var(--radio-medio) var(--radio-medio) 0; /* Esquinas redondeadas a la derecha */
border: 1px solid var(--color-borde-secundario); /* Borde gris claro */
margin: 0; /* Sin margen */
width: var(--ancho-campo-grande); /* Ancho amplio */
height: var(--altura-textarea); /* Altura específica */
float: left; /* Flotación izquierda */
padding: 0 var(--espaciado-medio); /* Relleno horizontal */
}
/* ========================================
ESTRUCTURA DEL FORMULARIO
======================================== */
/* Grupo de campos del formulario */
.form-group {
overflow: hidden; /* Limpiar flotaciones */
clear: both; /* Limpiar flotaciones anteriores */
}
/* Contenedor de iconos para campos */
.icon-case {
width: var(--ancho-icono); /* Ancho fijo */
float: left; /* Flotación izquierda */
border-radius: var(--radio-medio) 0 0 var(--radio-medio); /* Esquinas redondeadas a la izquierda */
background: var(--color-fondo-formulario); /* Fondo beige claro */
height: var(--altura-icono); /* Altura igual a los campos */
position: relative; /* Posición relativa */
text-align: center; /* Centrar icono */
line-height: 40px; /* Centrar verticalmente */
}
/* Iconos generales */
i {
color: var(--color-primario); /* Color café para iconos */
}
/* Contenedor del contenido del formulario */
.contentform {
padding: var(--espaciado-grande) var(--espaciado-medio); /* Relleno interno */
}
/* ========================================
BOTÓN DE CONTACTO
======================================== */
/* Botón principal de contacto */
.bouton-contact {
display: inline-block; /* Elemento en línea-bloque */
background: rgba(0,0,0,0); /* Fondo transparente */
color: var(--color-primario) !important; /* Color café (importante) */
text-align: center; /* Texto centrado */
width: var(--ancho-boton); /* Ancho del 90% */
border: 0; /* Sin borde */
padding: var(--espaciado-normal) var(--espaciado-medio); /* Relleno interno */
border-radius: var(--radio-normal); /* Esquinas redondeadas */
cursor: pointer; /* Cursor de mano */
margin-top: var(--espaciado-muy-grande); /* Margen superior */
font-size: var(--fuente-boton-contacto); /* Tamaño de fuente */
transition: var(--transicion-lenta); /* Transición suave */
position: relative; /* Posición relativa */
}
/* Efecto hover del botón de contacto */
.bouton-contact:hover {
background: var(--color-primario); /* Fondo café en hover */
color: var(--color-texto-blanco) !important; /* Texto blanco en hover */
}
/* ========================================
LAYOUT DE COLUMNAS
======================================== */
/* Columna izquierda del formulario */
.leftcontact {
width: var(--ancho-columna); /* Ancho del 49.5% */
float: left; /* Flotación izquierda */
border-right: 1px dotted var(--color-borde-separador); /* Borde punteado derecho */
box-sizing: border-box; /* Incluir borde en el ancho */
padding: 0 var(--espaciado-normal) 0 0; /* Relleno solo a la derecha */
}
/* Columna derecha del formulario */
.rightcontact {
width: var(--ancho-columna); /* Ancho del 49.5% */
float: right; /* Flotación derecha */
box-sizing: border-box; /* Incluir borde en el ancho */
padding: 0 0 0 2px; /* Relleno solo a la izquierda */
}
/* ========================================
MENSAJES DE VALIDACIÓN Y ESTADO
======================================== */
/* Mensajes de validación de errores */
.validation {
display: none; /* Oculto por defecto */
margin: 0 0 var(--espaciado-normal); /* Margen inferior */
font-weight: 400; /* Peso de fuente normal */
font-size: var(--fuente-normal); /* Tamaño de fuente pequeño */
color: var(--color-texto-error); /* Color rojo para errores */
}
/* Mensaje de éxito al enviar */
#sendmessage {
border: 1px solid var(--color-texto-blanco); /* Borde blanco */
display: none; /* Oculto por defecto */
text-align: center; /* Texto centrado */
margin: var(--espaciado-normal) 0; /* Margen vertical */
font-weight: 600; /* Peso de fuente semi-negrita */
margin-bottom: 30px; /* Margen inferior */
background-color: var(--color-fondo-exito); /* Fondo verde claro */
color: var(--color-texto-exito); /* Color verde oscuro */
border: 1px solid var(--color-borde-exito); /* Borde verde */
padding: 13px 40px 13px 18px; /* Relleno asimétrico */
border-radius: var(--radio-pequeno); /* Esquinas redondeadas */
box-shadow: var(--sombra-mensaje); /* Sombra sutil */
}
/* Clase para mostrar mensajes */
#sendmessage.show,
.show {
display: block; /* Mostrar elemento */
}
/* Color del texto en botones div */
div.button {
color: var(--color-primario); /* Color café */
}
/* ========================================
ESTILOS PARA RADIO BUTTONS
======================================== */
/* Contenedor de radio buttons */
.form-check {
display: flex; /* Usar flexbox */
align-items: left; /* Alinear a la izquierda */
flex-direction: row; /* Dirección horizontal */
margin-bottom: var(--espaciado-normal); /* Margen inferior */
}
/* Estilos personalizados para radio buttons */
input[type="radio"] {
-webkit-appearance: none; /* Quitar apariencia nativa */
-moz-appearance: none; /* Firefox */
appearance: none; /* Estándar */
background: var(--color-radio-default); /* Fondo gris */
width: var(--altura-radio); /* Ancho fijo */
height: var(--altura-radio); /* Altura fija */
border-radius: var(--radio-completo); /* Forma circular */
margin-left: var(--espaciado-normal); /* Espacio entre texto y radio */
}
/* Radio button seleccionado */
input[type="radio"]:checked {
background: var(--color-radio-checked); /* Fondo naranja cuando está seleccionado */
}
/* Etiqueta del radio button */
.form-check-label {
cursor: pointer; /* Cursor de mano para mejor usabilidad */
}
/* ========================================
FIN DE MEDIA QUERY PARA MÓVILES
======================================== */
}