/* ============================================
   VARIABLES CSS PERSONALIZADAS
   ============================================ */
:root {
  --primary-color: #513629;        /* Color principal del sitio */
  --background-light: #f9f9f9;     /* Fondo claro */
  --border-color: #eee;            /* Color de bordes */
  --text-gray: #999;               /* Texto gris */
  --error-color: #DE5959;          /* Color de errores */
  --success-color: #5F9025;        /* Color de éxito */
  --success-bg: #EBF6E0;           /* Fondo de éxito */
  --icon-bg: #fdf8e9;              /* Fondo de iconos */
  --hover-color: #ffa451;          /* Color de hover */
}

/* ============================================
   RESET Y ESTILOS BASE
   ============================================ */
body {
  background-image: url('Fondo.jpg');          /* Imagen de fondo del sitio */
  color: var(--primary-color);                 /* Color de texto principal */
  font: 14px Arial;                            /* Fuente por defecto */
  margin: 0 auto;                              /* Centrado horizontal */
  padding: 0;                                  /* Sin padding */
  position: relative;                          /* Posición relativa para elementos hijos */
  background-size: 100vw 100vh;                /* Fondo cubre toda la ventana */
  background-attachment: fixed;                /* Fondo fijo al hacer scroll */
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */
h1 { font-size: 28px; }                       /* Tamaño de título principal */
h2 { font-size: 26px; }                       /* Tamaño de subtítulo */
h3 { font-size: 18px; }                       /* Tamaño de título sección */
h4 { font-size: 16px; }                       /* Tamaño de título subsección */
h5 { font-size: 14px; }                       /* Tamaño de título menor */
h6 { font-size: 12px; }                       /* Tamaño de título mínimo */
h1, h2, h3, h4, h5, h6 { 
  color: var(--primary-color);                /* Color uniforme para títulos */
}

small { font-size: 10px; }                    /* Texto pequeño */
b, strong { font-weight: bold; }              /* Texto en negrita */

/* Enlaces */
a { text-decoration: none; }                  /* Sin subrayado por defecto */
a:hover { text-decoration: underline; }       /* Subrayado al pasar el mouse */

/* ============================================
   CLASES UTILITARIAS
   ============================================ */
.left { float: left; }                        /* Flotación izquierda */
.right { float: right; }                      /* Flotación derecha */
.alignleft { 
  float: left; 
  margin-right: 15px;                         /* Alineación izquierda con margen */
}
.alignright { 
  float: right; 
  margin-left: 15px;                          /* Alineación derecha con margen */
}

/* Clearfix para limpiar flotaciones */
.clearfix:after,
form:after {
  content: ".";                               /* Contenido invisible */
  display: block;                             /* Elemento en bloque */
  height: 0;                                  /* Sin altura */
  clear: both;                                /* Limpia flotaciones */
  visibility: hidden;                         /* Oculto visualmente */
}

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.container { 
  margin: 25px auto;                          /* Margen superior y centrado */
  position: relative;                         /* Posición relativa */
  width: 1000px;                              /* Ancho fijo del contenedor */
}
/* ============================================
   CONTENEDOR PRINCIPAL
   ============================================ */
#content {
  /* Fondo base */
  background: var(--background-light);
  
  /* Gradientes para múltiples navegadores */
  background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: -o-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  
  /* Filtro para IE */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f9f9f9', GradientType=0);
  
  /* Sombras internas para múltiples navegadores */
  -webkit-box-shadow: 0 1px 0 #fff inset;
  -moz-box-shadow: 0 1px 0 #fff inset;
  -ms-box-shadow: 0 1px 0 #fff inset;
  -o-box-shadow: 0 1px 0 #fff inset;
  box-shadow: 0 1px 0 #fff inset;
  
  /* Borde principal */
  border: 1px solid var(--primary-color);
  
  /* Posicionamiento y dimensiones */
  margin: 0 auto;                             /* Centrado horizontal */
  padding: 25px 0 0;                          /* Padding superior */
  position: relative;                         /* Posición relativa para pseudo-elementos */
  text-align: center;                         /* Texto centrado */
  text-shadow: 0 1px 0 #fff;                  /* Sombra de texto */
  width: 900px;                               /* Ancho fijo */
}

/* Estilo para títulos H1 dentro del contenido */
#content h1 {
  color: var(--primary-color);                /* Color del título */
  font: bold 25px Helvetica, Arial, sans-serif; /* Fuente y tamaño */
  letter-spacing: -0.05em;                    /* Espaciado entre letras */
  line-height: 20px;                          /* Altura de línea */
  margin: 10px 0 30px;                        /* Márgenes */
}

/* Líneas decorativas antes y después del H1 */
#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 desde arriba */
  width: 27%;                                 /* Ancho de línea */
}

/* Línea decorativa derecha */
#content h1:after {
  /* Gradiente de derecha a izquierda */
  background: rgb(126,126,126);
  background: -moz-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(left, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  right: 0;                                   /* Posicionado a la derecha */
}

/* Línea decorativa izquierda */
#content h1:before {
  /* Gradiente de izquierda a derecha */
  background: rgb(126,126,126);
  background: -moz-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: -o-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(right, rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
  left: 0;                                    /* Posicionado a la izquierda */
}

/* Elementos pseudo para efecto de papel apilado */
#content:after,
#content:before {
  /* Mismo fondo que el contenido principal */
  background: var(--background-light);
  background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: -o-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  background: linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
  
  /* Filtro para IE */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f9f9f9', GradientType=0);
  
  /* Propiedades del pseudo-elemento */
  border: 1px solid var(--primary-color);     /* Borde igual al contenido */
  content: "";                                /* Contenido vacío */
  display: block;                             /* Elemento en bloque */
  height: 100%;                               /* Altura completa */
  left: -1px;                                 /* Posición ligeramente desplazada */
  position: absolute;                         /* Posición absoluta */
  width: 100%;                                /* Ancho completo */
}

/* Primer elemento pseudo (rotación positiva) */
#content:after {
  /* Rotación para múltiples navegadores */
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
  
  top: 0;                                     /* Posición desde arriba */
  z-index: -1;                                /* Detrás del contenido */
}

/* Segundo elemento pseudo (rotación negativa) */
#content:before {
  /* Rotación para múltiples navegadores */
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
  
  top: 0;                                     /* Posición desde arriba */
  z-index: -2;                                /* Más atrás que el anterior */
}

/* ============================================
   BOTONES
   ============================================ */
.button {
  /* Fondo base */
  background: rgb(247,249,250);
  
  /* Gradientes para múltiples navegadores */
  background: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
  background: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
  background: -o-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
  background: -ms-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
  background: linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
  
  /* Filtro para IE */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0);
  
  /* Sombras internas para múltiples navegadores */
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  -o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
  
  /* Bordes redondeados para múltiples navegadores */
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  -o-border-radius: 0 0 5px 5px;
  -ms-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  
  /* Borde superior */
  border-top: 1px solid #CFD5D9;
  
  /* Espaciado interno */
  padding: 15px 0;
}

/* Enlaces dentro de botones */
.button a {
  /* Imagen de fondo con sprite */
  background: url(https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;
  
  /* Estilo del texto */
  color: #7E7E7E;                             /* Color del texto */
  font-size: 17px;                            /* Tamaño de fuente */
  padding: 2px 0 2px 40px;                    /* Espaciado con espacio para icono */
  text-decoration: none;                      /* Sin subrayado */
  
  /* Transiciones para múltiples navegadores */
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Estado hover de enlaces en botones */
.button a:hover {
  background-position: 0 -135px;              /* Cambia posición del sprite */
  color: var(--hover-color);                  /* Color de hover */
}

/* Botón de contacto personalizado */
.bouton-contact {
  display: inline-block;                      /* Elemento en línea-bloque */
  background: rgba(0,0,0,0);                  /* Fondo transparente */
  color: var(--primary-color) !important;     /* Color del texto */
  text-align: center;                         /* Texto centrado */
  width: 50%;                                 /* Ancho del botón */
  border: 0;                                  /* Sin borde */
  padding: 10px 15px;                         /* Espaciado interno */
  border-radius: 40px;                        /* Bordes muy redondeados */
  cursor: pointer;                            /* Cursor pointer */
  margin-top: 40px;                           /* Margen superior */
  font-size: 18px;                            /* Tamaño de fuente */
  transition: all 1s ease;                    /* Transición suave */
  position: relative;                         /* Posición relativa */
}

/* Estado hover del botón de contacto */
.bouton-contact:hover {
  background: var(--primary-color);           /* Fondo del color principal */
  color: #fff !important;                     /* Texto blanco */
}

/* Estilo para divs con clase button */
div.button {
  color: var(--primary-color);               /* Color del texto */
}

/* ============================================
   INFORMACIÓN Y MENSAJES
   ============================================ */
.info p {
  text-align: center;                         /* Texto centrado */
  color: var(--text-gray);                    /* Color gris */
  text-transform: none;                       /* Sin transformación de texto */
  font-weight: 600;                           /* Peso de fuente semi-bold */
  font-size: 15px;                            /* Tamaño de fuente */
  margin-top: 2px;                            /* Margen superior mínimo */
}

/* Iconos dentro de información */
.info i {
  color: #F6AA93;                             /* Color coral para iconos */
}

/* ============================================
   FORMULARIOS
   ============================================ */
form {
  border-radius: 5px;                         /* Bordes redondeados */
  max-width: 900px;                           /* Ancho máximo */
  width: 100%;                                /* Ancho completo */
  margin: 1% auto;                            /* Margen automático centrado */
  background-color: var(--background-light);  /* Fondo claro */
  overflow: hidden;                           /* Oculta desbordamiento */
}

/* Contenedor del formulario */
.contentform {
  padding: 40px 40px;                         /* Espaciado interno generoso */
}

/* Grupo de campos de formulario */
.form-group {
  overflow: hidden;                           /* Limpia flotaciones */
  clear: both;                                /* Limpia flotaciones anteriores */
}

/* ============================================
   CAMPOS DE FORMULARIO
   ============================================ */
/* Campos de entrada de texto */
input {
  border-radius: 0px 5px 5px 0px;             /* Bordes redondeados a la derecha */
  border: 1px solid var(--border-color);      /* Borde sutil */
  margin-bottom: 15px;                        /* Margen inferior */
  width: 90%;                                 /* Ancho casi completo */
  height: 40px;                               /* Altura fija */
  float: left;                                /* Flotación izquierda */
  padding: 0px 15px;                          /* Espaciado interno */
  text-align: center;                         /* Texto centrado */
}

/* Oculta los controles de número en Chrome/Safari */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;                   /* Sin apariencia nativa */
  margin: 0;                                  /* Sin margen */
}

/* Campos de selección */
select {
  border-radius: 0px 5px 5px 0px;             /* Bordes redondeados a la derecha */
  border: 1px solid var(--border-color);      /* Borde sutil */
  margin-bottom: 15px;                        /* Margen inferior */
  width: 90%;                                 /* Ancho casi completo */
  height: 40px;                               /* Altura fija */
  float: left;                                /* Flotación izquierda */
  padding: 0px 15px;                          /* Espaciado interno */
  text-align: center;                         /* Texto centrado */
}

/* Campos de texto multilínea */
textarea {
  border-radius: 0px 5px 5px 0px;             /* Bordes redondeados a la derecha */
  border: 1px solid var(--border-color);      /* Borde sutil */
  margin: 0;                                  /* Sin margen */
  width: 100%;                                /* Ancho completo */
  height: 130px;                              /* Altura fija */
  float: left;                                /* Flotación izquierda */
  padding: 0px 15px;                          /* Espaciado interno */
}

/* Contenedor de iconos */
.icon-case {
  width: 35px;                                /* Ancho fijo */
  float: left;                                /* Flotación izquierda */
  border-radius: 5px 0px 0px 5px;             /* Bordes redondeados a la izquierda */
  background: var(--icon-bg);                 /* Fondo de iconos */
  height: 42px;                               /* Altura fija */
  position: relative;                         /* Posición relativa */
  text-align: center;                         /* Texto centrado */
  line-height: 40px;                          /* Altura de línea para centrar verticalmente */
}

/* Iconos generales */
i {
  color: var(--primary-color);                /* Color principal para iconos */
}

/* ============================================
   PÁRRAFOS Y TEXTO
   ============================================ */
p {
  margin: 0px;                                /* Sin margen */
  font-weight: 500;                           /* Peso de fuente medio */
  line-height: 2;                             /* Altura de línea doble */
  color: var(--primary-color);                /* Color principal */
}

/* Elementos span dentro de párrafos (para errores) */
p span {
  color: #F00;                                /* Color rojo para errores */
}

/* Enlaces heredan decoración */
a {
  text-decoration: inherit;                   /* Hereda decoración del padre */
}

/* ============================================
   VALIDACIÓN Y MENSAJES
   ============================================ */
/* Mensajes de validación (ocultos por defecto) */
.validation {
  display: none;                              /* Oculto por defecto */
  margin: 0 0 10px;                           /* Margen inferior */
  font-weight: 400;                           /* Peso de fuente normal */
  font-size: 13px;                            /* Tamaño de fuente pequeño */
  color: var(--error-color);                  /* Color de error */
}

/* Mensaje de envío exitoso */
#sendmessage {
  border: 1px solid #fff;                     /* Borde blanco */
  display: none;                              /* Oculto por defecto */
  text-align: center;                         /* Texto centrado */
  margin: 10px 0;                             /* Margen vertical */
  font-weight: 600;                           /* Peso de fuente semi-bold */
  margin-bottom: 30px;                        /* Margen inferior adicional */
  background-color: var(--success-bg);        /* Fondo de éxito */
  color: var(--success-color);                /* Color de éxito */
  border: 1px solid #B3DC82;                  /* Borde verde */
  padding: 13px 40px 13px 18px;               /* Espaciado interno */
  border-radius: 3px;                         /* Bordes ligeramente redondeados */
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03); /* Sombra sutil */
}

/* Clases para mostrar elementos */
#sendmessage.show,
.show {
  display: block;                             /* Mostrar como bloque */
}

/* ============================================
   CÓDIGO COMENTADO - LAYOUT DE CONTACTO
   ============================================ */
/*
.leftcontact {
  width: 49.5%;                               // Ancho de columna izquierda
  float: left;                                // Flotación izquierda
  border-right: 1px dotted #CCC;              // Borde divisorio
  box-sizing: border-box;                     // Incluye padding en el ancho
  padding: 0px 15px 0px 0px;                  // Espaciado interno
}

.rightcontact {
  width: 49.5%;                               // Ancho de columna derecha
  float: right;                               // Flotación derecha
  box-sizing: border-box;                     // Incluye padding en el ancho
  padding: 0px 0px 0px 15px;                  // Espaciado interno
}
*/

/* ============================================
   FINAL DEL ARCHIVO
   ============================================ */