* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/*background: linear-gradient(135deg, #3d5168 0%, #4a6179 100%);*/
background-image: url('../mexicorifa-img/background.jpg'); 
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}

/* Para Chrome, Safari, Opera, Edge */
input::placeholder {
text-align: center;
}

/* Para Firefox */
input::-moz-placeholder { /* Firefox 18- */
text-align: center;
}

/* Para IE 10+ */
input:-ms-input-placeholder {
text-align: center;
}

.container {
width: 100%;
max-width: 1400px;
/*background: #3d5168;*/
border-radius: 20px;
overflow: hidden;
/*box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);*/
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 600px;
}

.left-section {
/*background: linear-gradient(135deg, #3d5168 0%, #4a6179 100%);*/
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}

.person-image {
width: 100%;
/*max-width: 350px;*/
height: auto;
object-fit: cover;
border-radius: 10px;
margin-bottom: -216px;
}

.color-badge {
position: absolute;
background: #33425F;
color: #FFFFFF;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
border: 2px solid #FFFFFF;
}

.badge-top {
top: 80px;
right: 40px;
}

.social-sidebar {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}

.social-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
color: #FFFFFF;
font-size: 14px;
margin-bottom: -15px;
}

.social-icon {
width: 35px;
height: 35px;
/*background: #FFFFFF;*/
/*border-radius: 50%;*/
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease;
}

.social-icon:hover {
transform: scale(1.1);
}

.social-icon svg {
width: 20px;
height: 20px;
}

.right-section {
/*background: #FFFFFF;*/
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}

.form-header {
text-align: center;
margin-bottom: 30px;

}

.form-header h1 {
color: #fff;
font-size: 72px;
font-weight: bold;
margin-bottom: 5px;
}

.form-header h2 {
color: #fff;
font-size: 58px;
font-weight: 500;
margin-bottom: 20px;
}

.form-header p {
color: #7e99b8;
font-size: 16px;
line-height: 1.4;
}

.form-group {
margin-bottom: 20px;
}

.form-capture{

background: #efefef;
border-radius: 20px;
padding: 25px;
border: 6px solid #7E95C1;

}

.form-group input {
width: 100%;
padding: 15px 20px;
border: 2px solid #7E95C1;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
background: #f8fafc;
}

.form-group input:focus {
outline: none;
border-color: #7e95C1;
background: #FFFFFF;
}

#registrationForm p{
text-align: center;
color: #7e95C1;
font-size: 26px;
line-height: 1.4;
font-weight: bold;
padding: 20px 0;
}

.social-section {
margin: 25px 0;
}

.social-section h3 {
color: #7e95C1;
font-size: 25px;
font-weight: 500;
margin-bottom: 15px;
}

.social-input-group {
display: flex;
align-items: center;
margin-bottom: 15px;
gap: 10px;
}

.social-input-icon {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.social-input-icon.instagram {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-input-icon.tiktok {
background: #000000;
}

.social-input-icon.facebook {
background: #1877f2;
}

.social-input-icon svg {
width: 22px;
height: 22px;
fill: #FFFFFF;
}

.social-input-group input {
flex: 1;
width: 100%;
padding: 15px 20px;
border: 2px solid #7E95C1;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s ease;
background: #f8fafc
}

/*privacidaD*/
.privacy-checkbox {
display: flex;
align-items: flex-start;
margin: 25px 0;
gap: 12px;
}

.privacy-checkbox input[type="checkbox"] {
width: 20px;
height: 20px;
min-width: 20px;
margin-top: 2px;
cursor: pointer;
accent-color: #7e95c1;
}

.privacy-checkbox label {
color: #3d5168;
font-size: 14px;
line-height: 1.6;
cursor: pointer;
user-select: none;
}

.privacy-checkbox label a {
color: #7e95c1;
text-decoration: underline;
cursor: pointer;
font-weight: 600;
}

.privacy-checkbox label a:hover {
color: #6a83ad;
}

/*-----------------------*/

.submit-btn {
width: 100%;
background: #FFFFFF;
color: #7e95c1;
padding: 5px;
border: 4px solid #7e95C1;
border-radius: 8px;
font-size: 40px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
}

.submit-btn:hover {
background: #efefef;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(126, 149, 193, 0.3);
}

.color-indicator {
position: absolute;
bottom: 40px;
right: 40px;
background: #EFEFEF;
color: #3d5168;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
}


/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(61, 81, 104, 0.8);
animation: fadeIn 0.3s ease;
}

.modal.show {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.modal-content {
background: #FFFFFF;
padding: 40px;
/*border-radius: 15px;*/
max-width: 600px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
position: relative;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: slideDown 0.3s ease;
}

@keyframes slideDown {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 2px solid #e0e7ef;
}

.modal-header h2 {
color: #3d5168;
font-size: 28px;
font-weight: bold;
margin: 0;
}

.close-btn {
background: none;
border: none;
font-size: 32px;
color: #7e99b8;
cursor: pointer;
line-height: 1;
transition: color 0.3s ease;
padding: 0;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
}

.close-btn:hover {
color: #3d5168;
}

.modal-body {
color: #3d5168;
font-size: 15px;
line-height: 1.8;
}

.modal-body h3 {
color: #7e95c1;
font-size: 20px;
margin-top: 25px;
margin-bottom: 15px;
font-weight: 600;
text-align: justify;
}

.modal-body p {
margin-bottom: 15px;
text-align: justify;
}

.modal-body ul {
margin-left: 20px;
margin-bottom: 15px;
}

.modal-body li {
margin-bottom: 8px;
}

.accept-btn {
width: 100%;
background: #7e95c1;
color: #FFFFFF;
padding: 15px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 25px;
}

.accept-btn:hover {
background: #6a83ad;
transform: translateY(-2px);
}



@media (max-width: 968px) {
.container {
grid-template-columns: 1fr;
}

.left-section {
display: none;
}

.right-section {
padding: 40px 30px;
}

.form-header h1 {
font-size: 36px;
}

.form-header h2 {
font-size: 24px;
}
}

@media (max-width: 480px) {
body {
padding: 10px;
}

.right-section {
padding: 30px 20px;
}

.form-header h1 {
font-size: 32px;
}

.form-header h2 {
font-size: 20px;
}

.form-header p {
font-size: 14px;
}
}
</style>