main {display: flex; justify-content:center; padding:20px;}

.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;             
    width: 700px;
    padding: 20px;
    gap: 0px; 
    background-color: #f7f7f7; /* Fondo de color suave */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */        
    border: 0px dashed red;
}

#extra-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 0px;
}


.label-container {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 3px;
    width: 100%;
}

.label-left {
    flex: 1 1 auto;         
    font-size: var(--fs-12);
    color: var(--gray-3);
}

.label-left span {
    font-size: var(--fs-12);
    color: var(--gray-2);  
}

.error-label-right {
    flex: 0 0 180px;             
    text-align: right;           
    color: var(--primary);
    font-size: var(--fs-12);
    white-space: nowrap;         
    min-height: 16px;            
}

input[type="text"], input[type="password"] {
    width: var(--w-100pct);
    padding: var(--p-7);
    font-size: var(--fs-16);
    font-weight: var(--fw-300);
    color: var(--gray-3);
    border: 1px solid var(--gray-4);
    border-radius: var(--br-4);
    transition: border 0.3s;
}

input[type="text"]:hover, input[type="password"]:hover {
    border: 1px solid var(--primary);
}

/* Modificación para el focus */
input[type="text"]:focus, input[type="password"]:focus {
    border: 1px solid var(--primary);
    outline: none;
}

textarea {
    width: var(--w-100pct);
    padding: var(--p-7);
    font-size: var(--fs-16);
    font-weight: var(--fw-300);
    color: var(--gray-3);
    border: 1px solid var(--gray-4);
    border-radius: var(--br-4);
    transition: border 0.3s;
    resize: vertical; /* Permite redimensionar solo en vertical (puedes cambiarlo a none, both, etc.) */
}

/* Cambio de borde al pasar el mouse */
textarea:hover {
    border: 1px solid var(--primary);
}

/* Modificación para el focus */
textarea:focus {
    border: 1px solid var(--primary);
    outline: none;
}

select {
    width: var(--w-100pct);
    padding: var(--p-9);
    font-size: var(--fs-16);
    font-weight: var(--fw-300);
    color: var(--gray-3);
    border: 1px solid var(--gray-4);
    border-radius: var(--br-4);
    transition: border 0.3s;
    background-color: var(--white);
    appearance: none; /* Oculta el estilo nativo del navegador */
    cursor: pointer;
    /* Restaurar el icono de la flecha */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Agregar flecha personalizada */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='%23666'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;    
}

/* Cambio de borde al pasar el mouse */
select:hover {
    border: 1px solid var(--primary);
}

/* Modificación para el focus */
select:focus {
    border: 1px solid var(--primary);
    outline: none;
}


input[type="checkbox"] {
    appearance: none; /* Quita el estilo por defecto */
    width: 14px;
    height: 14px;
    background-color: #fff; /* Fondo blanco */
    border: 1px solid #666; /* Borde dorado */
    border-radius: 2px; /* Bordes redondeados */
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="checkbox"]:checked {
    background-color: var(--white); /* Fondo dorado cuando está marcado */
    border-color: var(--primary);
}

input[type="checkbox"]:checked::after {
    content: "✔"; /* Símbolo de check */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary); /* Color del check */
    font-size: 10px;
    font-weight: bold;
}

input[type="checkbox"]:hover {
    border-color: var(--primary); /* Cambia el borde al pasar el cursor */
}

input::placeholder {
    color: var(--gray-5); /* Ajusta el color según tu diseño */
    font-weight: 200; /* Puedes cambiarlo a 300, 500, etc. según necesites */
}

::-webkit-input-placeholder { 
    color: var(--gray-5);
    font-weight: 200;
}
::-moz-placeholder { 
    color: var(--gray-5);
    font-weight: 200;
}
:-ms-input-placeholder { 
    color: var(--gray-5);
    font-weight: 200;
}
::-ms-input-placeholder { 
    color: var(--gray-5);
    font-weight: 200;
}

.contact-button-wrapper {
  display: flex;
  justify-content: center;   
  width: 100%;
}

#contactButton {
    display: block;
    width: fit-content;
    margin: 20px auto;
    text-align: center;
    background-color: var(--primary);
    color: var(--white);
    font-size: 16px;
    border: none;
    border-radius: 25px;
    padding: 10px 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#contactButton:hover {
    background-color: var(--primary-hover);
}

#nombre, #email, #asunto, #telefono, #comentario, select {
    margin-bottom: 20px;
}



#extra-content-n {
  width: 520px;
  margin: 50px auto 0;     
  display: flex;
  flex-direction: column;
  align-items: flex-start;  
  justify-content: flex-start;
  gap: 0;
}


.reg-wrap{display:flex;min-height:100vh;position:relative; margin-top:0px;}
.reg-left{width:60%;padding:5%;padding-top:100px;}
.reg-right{width:40%;padding:5%;padding-top:200px;}


.reg-right {
  position: relative;
  background-color: #f45557;
  overflow: hidden;
}

.reg-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://www.gimnasiatotal.com/assets/img/contact-bck.jpg")
              center / cover no-repeat;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

.reg-right > * {
  position: relative;
  z-index: 1;
}

.right-inner {
  max-width: 520px;
  margin: 0 auto;
}

.right-inner h2{
  font-size:24px;
  font-weight:500;
  color: #fff;
  line-height: 1.2;
}

.right-inner p{
  font-size:16px;
  font-weight:300;
  color: #fff;
  margin-bottom: 20px;
}

.right-inner p.fir{
    margin-top: 40px;
}

.right-inner p.hor{
    font-weight: 500 !important;
}

.right-inner p.res{
    font-size:20px;
    font-weight: 500 !important;
    margin-top: 40px;
}


@media (max-width: 1024px) {
   
  #extra-content-n {width:100%;}
  .reg-wrap{flex-direction:column; padding: 0 16px;}
  .reg-wrap{}
  .reg-left{width:100%;padding:60px 24px; padding-top:100px;}
  .reg-right{width:100%;padding:60px 24px;}
  .right-inner {width:100%;}
    
}

@media (max-width: 768px) { 
    .reg-wrap{
        padding: 0 !important;
        margin:-23px auto !important;
        margin-bottom: 55px !important;
    }
    .top-contact {
        text-align: center;
    }
}