.elementor-43201 .elementor-element.elementor-element-bebf0f3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.22;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-43201 .elementor-element.elementor-element-bebf0f3:not(.elementor-motion-effects-element-type-background), .elementor-43201 .elementor-element.elementor-element-bebf0f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ad72617 );background-image:url("https://diabetescero.org/wp-content/uploads/2025/12/DiabetesCERO-hazte-socio-1.jpg");background-position:center left;background-repeat:no-repeat;background-size:cover;}.elementor-43201 .elementor-element.elementor-element-bebf0f3::before, .elementor-43201 .elementor-element.elementor-element-bebf0f3 > .elementor-background-video-container::before, .elementor-43201 .elementor-element.elementor-element-bebf0f3 > .e-con-inner > .elementor-background-video-container::before, .elementor-43201 .elementor-element.elementor-element-bebf0f3 > .elementor-background-slideshow::before, .elementor-43201 .elementor-element.elementor-element-bebf0f3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-43201 .elementor-element.elementor-element-bebf0f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-43201 .elementor-element.elementor-element-0d59a69{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:10px;}.elementor-43201 .elementor-element.elementor-element-0d59a69.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-43201 .elementor-element.elementor-element-a164dab .elementor-heading-title{font-size:40px;font-weight:bold;line-height:50px;text-shadow:0px 0px 20px rgba(0, 0, 0, 0.77);color:var( --e-global-color-astglobalcolor5 );}.elementor-43201 .elementor-element.elementor-element-37b1da9{--divider-border-style:solid;--divider-color:var( --e-global-color-astglobalcolor5 );--divider-border-width:2px;}.elementor-43201 .elementor-element.elementor-element-37b1da9 .elementor-divider-separator{width:19%;}.elementor-43201 .elementor-element.elementor-element-37b1da9 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-43201 .elementor-element.elementor-element-e6c1bba{text-align:start;}.elementor-43201 .elementor-element.elementor-element-e6c1bba .elementor-heading-title{font-size:31px;font-weight:400;line-height:50px;color:var( --e-global-color-astglobalcolor5 );}.elementor-43201 .elementor-element.elementor-element-4a1e6ce{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:solid;--border-style:solid;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:20px 20px 20px 20px;box-shadow:0px 0px 25px 0px rgba(0,0,0,0.5);}.elementor-43201 .elementor-element.elementor-element-4a1e6ce:not(.elementor-motion-effects-element-type-background), .elementor-43201 .elementor-element.elementor-element-4a1e6ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ad72617 );}.elementor-43201 .elementor-element.elementor-element-b72ae28{--spacer-size:10px;}.elementor-43201 .elementor-element.elementor-element-20c1c79{text-align:center;}.elementor-43201 .elementor-element.elementor-element-20c1c79 .elementor-heading-title{font-size:22px;font-weight:normal;text-transform:uppercase;color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-446d8ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:69px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-43201 .elementor-element.elementor-element-446d8ec:not(.elementor-motion-effects-element-type-background), .elementor-43201 .elementor-element.elementor-element-446d8ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ad72617 );}.elementor-43201 .elementor-element.elementor-element-3390ecc{text-align:center;}.elementor-43201 .elementor-element.elementor-element-3390ecc .elementor-heading-title{font-size:33px;color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-c18493f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-43201 .elementor-element.elementor-element-c18493f{text-align:center;line-height:29px;letter-spacing:0.1px;color:var( --e-global-color-text );}.elementor-43201 .elementor-element.elementor-element-d7f194a{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:0px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-43201 .elementor-element.elementor-element-d7f194a:not(.elementor-motion-effects-element-type-background), .elementor-43201 .elementor-element.elementor-element-d7f194a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ad72617 );}.elementor-43201 .elementor-element.elementor-element-4352de8 .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-43201 .elementor-element.elementor-element-4352de8.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-4352de8.elementor-view-framed .elementor-icon, .elementor-43201 .elementor-element.elementor-element-4352de8.elementor-view-default .elementor-icon{fill:var( --e-global-color-828f934 );color:var( --e-global-color-828f934 );border-color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-4352de8 .elementor-icon-box-title, .elementor-43201 .elementor-element.elementor-element-4352de8 .elementor-icon-box-title a{font-size:22px;font-weight:normal;line-height:25px;}.elementor-43201 .elementor-element.elementor-element-4352de8 .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-43201 .elementor-element.elementor-element-9edc987 .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-43201 .elementor-element.elementor-element-9edc987.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-9edc987.elementor-view-framed .elementor-icon, .elementor-43201 .elementor-element.elementor-element-9edc987.elementor-view-default .elementor-icon{fill:var( --e-global-color-828f934 );color:var( --e-global-color-828f934 );border-color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-9edc987 .elementor-icon-box-title, .elementor-43201 .elementor-element.elementor-element-9edc987 .elementor-icon-box-title a{font-size:22px;font-weight:normal;line-height:25px;}.elementor-43201 .elementor-element.elementor-element-9edc987 .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-43201 .elementor-element.elementor-element-3356bf1 .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-43201 .elementor-element.elementor-element-3356bf1.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-3356bf1.elementor-view-framed .elementor-icon, .elementor-43201 .elementor-element.elementor-element-3356bf1.elementor-view-default .elementor-icon{fill:var( --e-global-color-828f934 );color:var( --e-global-color-828f934 );border-color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-3356bf1 .elementor-icon-box-title, .elementor-43201 .elementor-element.elementor-element-3356bf1 .elementor-icon-box-title a{font-size:22px;font-weight:normal;line-height:25px;}.elementor-43201 .elementor-element.elementor-element-3356bf1 .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-43201 .elementor-element.elementor-element-e6f9a7e .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-43201 .elementor-element.elementor-element-e6f9a7e.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-e6f9a7e.elementor-view-framed .elementor-icon, .elementor-43201 .elementor-element.elementor-element-e6f9a7e.elementor-view-default .elementor-icon{fill:var( --e-global-color-828f934 );color:var( --e-global-color-828f934 );border-color:var( --e-global-color-828f934 );}.elementor-43201 .elementor-element.elementor-element-e6f9a7e .elementor-icon-box-title, .elementor-43201 .elementor-element.elementor-element-e6f9a7e .elementor-icon-box-title a{font-size:22px;font-weight:normal;line-height:25px;}.elementor-43201 .elementor-element.elementor-element-e6f9a7e .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-43201 .elementor-element.elementor-element-bc98bd9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-43201 .elementor-element.elementor-element-bc98bd9:not(.elementor-motion-effects-element-type-background), .elementor-43201 .elementor-element.elementor-element-bc98bd9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor5 );}.elementor-43201 .elementor-element.elementor-element-f900ae1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-43201 .elementor-element.elementor-element-f900ae1.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-43201 .elementor-element.elementor-element-f19a00d img{border-radius:8px 8px 8px 8px;}.elementor-43201 .elementor-element.elementor-element-81e6f41{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;border-style:none;--border-style:none;--border-radius:10px 10px 10px 10px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-43201 .elementor-element.elementor-element-81e6f41.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-43201 .elementor-element.elementor-element-2c9e9c8 .elementor-heading-title{font-size:28px;}.elementor-43201 .elementor-element.elementor-element-e9029ec{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;border-style:solid;--border-style:solid;border-width:0px 0px 0px 1px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:1px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:0px 0px 0px 0px;}.elementor-43201 .elementor-element.elementor-element-e9029ec.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-43201 .elementor-element.elementor-element-b62da68 > .elementor-widget-container{margin:35px 35px 35px 35px;}.elementor-43201 .elementor-element.elementor-element-b62da68 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(9px/2);}.elementor-43201 .elementor-element.elementor-element-b62da68 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(9px/2);}.elementor-43201 .elementor-element.elementor-element-b62da68 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(9px/2);}.elementor-43201 .elementor-element.elementor-element-b62da68 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-9px/2);}.elementor-43201 .elementor-element.elementor-element-b62da68 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-9px/2);}.elementor-43201 .elementor-element.elementor-element-b62da68 .elementor-icon-list-icon i{color:var( --e-global-color-828f934 );transition:color 0.3s;}.elementor-43201 .elementor-element.elementor-element-b62da68 .elementor-icon-list-icon svg{fill:var( --e-global-color-828f934 );transition:fill 0.3s;}.elementor-43201 .elementor-element.elementor-element-b62da68{--e-icon-list-icon-size:18px;--icon-vertical-offset:0px;}.elementor-43201 .elementor-element.elementor-element-b62da68 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-43201 .elementor-element.elementor-element-c322c47{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:50px;--padding-right:50px;}.elementor-43201 .elementor-element.elementor-element-c322c47:not(.elementor-motion-effects-element-type-background), .elementor-43201 .elementor-element.elementor-element-c322c47 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-ad72617 );}.elementor-43201 .elementor-element.elementor-element-cf8a8f0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );}.elementor-43201 .elementor-element.elementor-element-cf8a8f0.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-43201 .elementor-element.elementor-element-4bcdc95{text-align:start;}.elementor-43201 .elementor-element.elementor-element-4bcdc95 img{width:100%;}.elementor-43201 .elementor-element.elementor-element-c97a508{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-43201 .elementor-element.elementor-element-c97a508.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-43201 .elementor-element.elementor-element-66efe52{text-align:start;}.elementor-43201 .elementor-element.elementor-element-66efe52 .elementor-heading-title{font-size:15px;}.elementor-43201 .elementor-element.elementor-element-bdebefc > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-43201 .elementor-element.elementor-element-bdebefc{text-align:start;font-size:11px;}@media(max-width:1024px){.elementor-43201 .elementor-element.elementor-element-d7f194a{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-43201 .elementor-element.elementor-element-bebf0f3{--content-width:1200px;}.elementor-43201 .elementor-element.elementor-element-0d59a69{--width:54.183%;}.elementor-43201 .elementor-element.elementor-element-4a1e6ce{--width:55%;}.elementor-43201 .elementor-element.elementor-element-f900ae1{--width:20.319%;}.elementor-43201 .elementor-element.elementor-element-81e6f41{--width:48.779%;}.elementor-43201 .elementor-element.elementor-element-e9029ec{--width:32.242%;}.elementor-43201 .elementor-element.elementor-element-cf8a8f0{--width:15%;}.elementor-43201 .elementor-element.elementor-element-c97a508{--width:85%;}}@media(max-width:767px){.elementor-43201 .elementor-element.elementor-element-bebf0f3{--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-43201 .elementor-element.elementor-element-0d59a69{--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-43201 .elementor-element.elementor-element-a164dab > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-43201 .elementor-element.elementor-element-a164dab .elementor-heading-title{font-size:34px;}.elementor-43201 .elementor-element.elementor-element-4a1e6ce{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-43201 .elementor-element.elementor-element-446d8ec{--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-43201 .elementor-element.elementor-element-d7f194a{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-43201 .elementor-element.elementor-element-81e6f41{--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:18px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-43201 .elementor-element.elementor-element-e9029ec{border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-43201 .elementor-element.elementor-element-b62da68 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-43201 .elementor-element.elementor-element-c322c47{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for global, class: .elementor-global-42443 *//* Estilos generales */
body {
font-family: 'Poppins', sans-serif;
font-size: 20px; /* Tamaño de texto principal */
font-weight: normal;
line-height: 1.2;
}
.error-message {
color: red;
font-size: 12px;
}
/* Estilos para los botones de los pasos */
button {
display: flex; /* Cambiamos de block a flex para centrar contenido */
align-items: center; /* Centra verticalmente el texto */
justify-content: center; /* Centra horizontalmente el texto */
width: 100%; /* Ocupar todo el ancho del contenedor */
padding: 20px;
margin-top: 10px;
background-color: #1D75BB;
color: white;
border: none;
font-size: 20px; /* Aplicar Poppins a 20 puntos */
font-weight: bold; /* Usar negrita para los botones */
text-transform: uppercase;
cursor: pointer;
border-radius: 1px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* Hover effect para los botones */
button:hover {
background-color: #1D75BB;
}
/* Centrar los botones al medio */
button {
margin: 0 auto;
}
/* Estilos para quitar el borde de los fieldset */
fieldset {
border: none;
}
/* Estilos para los inputs dentro de los fieldsets */
fieldset input[type="text"],
fieldset input[type="email"],
fieldset input[type="tel"],
fieldset input[type="number"] {
width: 100%;
padding: 15px;
margin-bottom: 10px;
font-size: 20px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
line-height:1;
border: 0.25pt solid #666;
border-radius: 1px;
box-sizing: border-box;
}
/* Estilos para los select dentro de los fieldsets */
fieldset select {
width: 100%;
padding: 15px;
margin-bottom: 10px;
font-size: 13px; /* Aplicar Poppins a 13 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
line-height: 1;
border: 0.25pt solid #666;
border-radius: 1px;
box-sizing: border-box;
appearance: none; /* Elimina estilos predeterminados del navegador */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 10px;
padding-right: 40px; /* Espacio para la flecha */
}
/* Para navegadores que no soportan 'appearance' */
select::-ms-expand {
display: none;
}
/* Opcional: Ajustar para dispositivos IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select {
background-image: none;
padding-right: 15px;
}
}
/* Establecer un ancho máximo para el formulario */
#donation-form {
max-width: 600px;
margin: 0 auto; /* Centrar el formulario horizontalmente */
padding: 20px;
box-sizing: border-box;
}
/* ESTILO DE LOS PASOS DEL FORMULARIO /////////// */
/* Contenedor de los pasos en círculos */
.progress-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 50%; /* Limitar el ancho del conjunto de círculos al 70% del formulario */
margin: 0 auto 20px; /* Centrar y agregar espacio inferior */
position: relative;
}
/* Línea que conecta los círculos */
.progress-container::before {
content: '';
position: absolute;
top: 50%;
left: 10%; /* Ajuste para que la línea no sobresalga del primer círculo */
right: 10%; /* Ajuste para que la línea no sobresalga del último círculo */
height: 2px;
background-color: #ccc;
z-index: 0;
}
/* Estilos para los círculos */
.step-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ccc;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: bold;
z-index: 1; /* Para asegurarse de que el círculo esté por encima de la línea */
}
/* Estilo para el paso activo */
.step-circle.active {
background-color: #1D75BB;
/* Azul para el paso activo */
}
/* Espacio entre los círculos y los inputs */
fieldset {
margin-top: 20px;
}
/* Añadir espacio alrededor de los círculos para mayor separación */
.progress-container .step-circle {
margin: 0;
}
/* ESTILO MENSAJES PASOS ////////////////////// */
.head_text {
text-align: center; /* Centrar el texto horizontalmente */
font-size: 20px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
}
.message {
font-size: 13px; /* Texto pequeño para mensajes largos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
text-align: left;
margin: 0 5px;
line-height: 1.2;
}
#info-link {
color: #666;
text-decoration: none;
font-size: 13px; /* Texto pequeño para mensajes largos */
font-family: 'Poppins', sans-serif;
}
#info-link:hover,
#info-link:active {
color: #1D75BB;
}
/* Estilo para los textos pequeños, como avisos legales */
.text-small {
font-size: 10px; /* Poppins regular a 13 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
line-height: 1.2;
}
/* Clase para los enlaces de texto pequeño */
.text-small-link {
font-size: 10px; /* Poppins regular a 13 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
color: #666; /* Color del enlace */
text-decoration: none; /* Sin subrayado inicialmente */
transition: color 0.2s ease-in;
}
/* Efecto hover para los enlaces pequeños */
.text-small-link:hover {
text-decoration: underline; /* Subrayado al pasar el cursor */
color: #1D75BB; /* Cambiar el color en hover */
}
#amount-info #info-link { display: none !important; }
/* PAYMENT FREQUENCY ///////////////////// */
/* Contenedor flexible para los radio buttons */
#frequency {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0;
margin: 0;
border: none;
}
/* Ocultamos el radio nativo */
#frequency input[type="radio"] {
display: none;
}
/* Cada opción ocupa 1/3 del ancho */
#frequency label {
color: #666;
display: flex;
align-items: center;
justify-content: center;
width: 33.33%;
padding: 20px;
margin: 0 0 20px 0;
text-align: center;
background-color: #ffffff;
border: 0.25pt solid #666;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
box-sizing: border-box;
font-size: 20px; /* Poppins a 20 */
font-family: 'Poppins', sans-serif;
font-weight: bold;
}
/* Estado seleccionado */
#frequency input[type="radio"]:checked + label {
background-color: #fff;
color: #1D75BB;
border: 3.5pt solid #1D75BB;
}
/* (Opcional) En pantallas estrechas, que ocupen 100% */
@media (max-width: 480px) {
#frequency label { width: 100%; }
}
/* PAYMENT AMOUNT ///////////////////// */
/* Ocultar los radio buttons */
#amount-options input[type="radio"] {
position: absolute;
visibility: hidden;
}
/* Contenedor flexible para los radio buttons */
#amount-options {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
margin: 0;
}
/* Estilo para las etiquetas de las opciones de radio */
#amount-options label {
border: 0.25pt solid #666;
border-radius: 0px;
background-color: #fff;
display: flex; /* Cambiamos de block a flex para centrar vertical y horizontalmente */
align-items: center; /* Centra verticalmente el texto */
justify-content: center; /* Centra horizontalmente el texto */
padding: 28px 20px;
font-size: 20px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: bold;
transition: 0.2s all;
color: #666;
cursor: pointer;
text-align: center;
box-sizing: border-box;
flex: 0 0 25%; /* Cada opción ocupará aproximadamente el 25% del ancho */
margin: 5px 0;
}
/* Estilo cuando un radio button está seleccionado */
#amount-options input[type="radio"]:checked + label {
color: #1D75BB !important;
background-color: white;
border-width: 3.5pt;
border-color: #1D75BB;
box-sizing: border-box;
font-weight: bold; /* Negrita cuando está seleccionado */
}
/* Campo personalizado de importe inicialmente oculto */
#customAmount {
display: none;
margin-top: 10px;
padding: 10px;
font-size: 20px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
width: calc(100% - 22px); /* Para que ocupe el ancho completo con bordes */
border: 0.25pt solid #666;
border-radius: 5px;
}
/* Estilo mensajes de degravar */
.damount {
color: #1D75BB ;
font-weight: bold;
}
/* CUSTOMER TYPE ///////////////////// */
/* Contenedor flexible para los radio buttons solo en el fieldset con id 'contact_type' */
#contact_type {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0;
margin-bottom: 20px;
margin-top: 10px;
border: none;
color: #666;
}
/* Cada opción de radio ocupará el 50% del ancho dentro del fieldset con id 'contact_type' */
#contact_type input[type="radio"] {
display: none; /* Ocultamos el radio button original */
}
/* Estilo para las etiquetas de los radio buttons en el fieldset con id 'contact_type' */
#contact_type label {
display: flex; /* Cambiamos de inline-block a flex para centrar verticalmente */
align-items: center; /* Centrar verticalmente el contenido */
justify-content: center; /* Centrar horizontalmente el contenido */
width: 50%; /* Para ocupar el 50% del ancho */
padding: 20px;
margin: 0;
background-color: #ffffff;
border: 0.25pt solid #666;
cursor: pointer;
transition: background-color 0.3s, border-color 0.3s, color 0.3s;
box-sizing: border-box;
font-size: 20px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: bold;
}
/* Estilo cuando el radio button está seleccionado en el fieldset 'contact_type', excluyendo elementos con la clase 'text-small' */
#contact_type input[type="radio"]:checked + label:not(.text-small) {
background-color: #ffffff;
color: #1D75BB;
border: 3.5pt solid #1D75BB;
font-weight: bold;
}
/* PERSONAL DATA //////////
#personal_data {
margin: 0;
padding: 0;
border: none;
}
#personal_data input[type="text"],
#personal_data input[type="email"],
#personal_data input[type="tel"] {
width: 100%;
padding: 10px 10px;
margin: 0;
font-size: 13px;
font-family: 'Poppins', sans-serif;
font-weight: normal;
box-sizing: border-box;
border: 0.25pt solid #666;
border-radius: 0;
height: auto;
text-align: left;
}
#personal_data input::placeholder {
color: #666;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
#personal_data input:focus {
outline: none;
border-color: #1D75BB;
}
*/
.personal_data {
margin: 0;
padding: 0;
border: none;
}
.personal_data input[type="text"],
.personal_data input[type="email"],
.personal_data input[type="tel"] {
width: 100%;
padding: 10px 10px; /* Mismo padding que los campos de amount y frequency */
margin: 0;
font-size: 13px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
box-sizing: border-box;
border: 0.25pt solid #666;
border-radius: 0; /* Bordes cuadrados */
height: auto;
text-align: left;
}
/* Estilo para los placeholders */
.personal_data input::placeholder {
color: #666;
font-size: 13px; /* Aplicar Poppins a 13 puntos */
font-family: 'Poppins', sans-serif;
}
/* Estilo al enfocar los inputs */
.personal_data input:focus {
outline: none;
border-color: #1D75BB;
}
/* CIF DNI //////////////////// */
fieldset input[type="text"] {
width: 100%;
padding: 10px 10px; /* MISMO padding que personal_data */
margin: 0;
font-size: 13px;
font-family: 'Poppins', sans-serif;
font-weight: normal;
box-sizing: border-box;
border: 0.25pt solid #666;
border-radius: 0;
}
/* Ensure both fields appear side-by-side */
/* Ensure both fields appear side-by-side */
#doc_fields {
display: flex;
gap: 0;
width: 100%;
}
/* Each field takes up exactly 50% of the width */
#doc_fields .field {
width: 50%;
box-sizing: border-box;
}
/* Match height of select and input */
#doc_fields select,
#doc_fields input[type="text"] {
height: 42px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
font-weight: normal;
border: 0.25pt solid #666;
padding: 10px;
box-sizing: border-box;
border-radius: 0;
width: 100%;
margin-bottom: 0px;
}
/* Keep arrow on select */
#doc_fields select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 10px;
padding-right: 40px;
padding: 10px;
}
/* Estilo para los placeholders */
fieldset input::placeholder {
color: #666;
font-size: 20px;
font-family: 'Poppins', sans-serif;
}
/* Estilo al enfocar los inputs */
fieldset input:focus {
outline: none;
border-color: #1D75BB;
box-shadow: 0 0 5px rgba(29, 117, 187, 0.5);
}
/* Estilos para el fieldset de aceptación */
#acceptance {
margin-top: 20px; /* Ajusta el margen superior según tus necesidades */
}
/* Estilos para el label que contiene el checkbox y el mensaje */
.acceptance-label {
display: flex;
align-items: flex-start;
}
/* Estilos para el checkbox */
.acceptance-label input[type="checkbox"] {
margin-top: 4px;
margin-right: 4px; /* Ajusta este valor para alinear verticalmente el checkbox con el texto */
}
/* Estilos para el mensaje */
.acceptance-label .message {
margin-left: 10px; /* Espacio entre el checkbox y el texto */
font-size: 10px;
line-height: 1.5; /* Mejora la legibilidad del texto */
}
/* Estilos para el enlace dentro del mensaje */
.acceptance-label .message a {
font-size: 13px;
text-decoration: underline; /* Opcional: para destacar el enlace */
}
/* PAYMENT METHOD ///////////////////// */
/* Ocultar los radio buttons */
#payment-method input[type="radio"] {
position: absolute;
visibility: hidden;
}
/* Contenedor de las opciones en vertical, sin espacio */
#payment-method {
display: block;
padding: 0;
margin: 0;
border: none;
}
/* Estilo para las opciones de radio */
#payment-method label {
border: 0.25pt solid #666;
border-radius: 0;
background-color: #fff;
display: block;
padding: 20px 20px; /* Ajuste del padding para igualar el de las otras opciones */
font-size: 13px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
transition: 0.2s all;
color: #666;
cursor: pointer;
text-align: left;
box-sizing: border-box;
width: 100%; /* Asegura que ocupen el 100% del ancho */
margin: 0; /* Sin margen entre opciones */
line-height: 1; /* Asegura que no haya espacio extra entre líneas */
}
/* Estilo al hacer hover
#payment-method label:hover {
color: #1D75BB;
background-color: #fff;
border: 3.5pt solid #1D75BB;
transition: all 200ms ease-in;
}*/
/* Estilo cuando un radio button está seleccionado */
#payment-method input[type="radio"]:checked + label {
color: #1D75BB !important;
background-color: white;
border: 3.5pt solid #1D75BB;
box-sizing: border-box;
font-weight: bold; /* Negrita cuando está seleccionado */
}
#bizum-details p {
font-weight: normal;
}
#bank-details p {
font-weight: normal;
}
/* Asegurar que los inputs de los detalles bancarios ocupen el 100% del ancho, con estilo similar a personal_data */
#bank-details input[type="text"] {
width: 100%;
padding: 20px 20px; /* Mismo padding que los otros campos */
margin: 0;
font-size: 13px; /* Aplicar Poppins a 20 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
box-sizing: border-box;
border: 0.25pt solid #666;
border-radius: 0; /* Bordes cuadrados */
}
/* Estilo para los placeholders */
#bank-details input::placeholder {
color: #666;
font-size: 13px;
font-family: 'Poppins', sans-serif;
}
/* Estilo al enfocar los inputs */
#bank-details input:focus {
outline: none;
border: 0.25pt solid #1D75BB;
box-shadow: 0 0 5px rgba(29, 117, 187, 0.5);
}
/* Enlaces de retroceso */
.back-link {
display: inline-block;
margin-top: 10px;
text-align: left;
color: #666; /* Color del enlace */
text-decoration: none;
font-size: 13px; /* Poppins regular a 13 puntos */
font-family: 'Poppins', sans-serif;
font-weight: normal;
}
.back-link:hover {
text-decoration: underline;
color:black;
}
/* responsive */
/* Estilos generales para dispositivos móviles */
body {
font-family: 'Poppins', sans-serif;
font-size: 18px;
line-height: 1.1;
padding: 0;
margin: 0;
box-sizing: border-box;
}
#donation-form {
width: 100%;
padding: 15px;
box-sizing: border-box;
margin: 0 auto;
}
/* Ajuste de los campos de texto y botones para que ocupen el 100% en móviles */
fieldset input[type="text"],
fieldset input[type="email"],
fieldset input[type="tel"],
fieldset input[type="number"],
fieldset input[type="select"],
button {
width: 100%;
padding: 15px;
margin-bottom: 10px;
box-sizing: border-box;
}
/* Ajustes de los círculos de los pasos para pantallas pequeñas */
.progress-container {
width: 100%;
justify-content: space-between;
padding: 0 10px;
}
.step-circle {
width: 30px;
height: 30px;
font-size: 16px;
}
/* Estilos para los radios de amount-options */
#amount-options {
display: flex;
flex-direction: column;
align-items: stretch;
}
#amount-options label {
width: 100%;
margin: 0;
}
/* Para el contenedor de los pasos */
.progress-container::before {
left: 5%;
right: 5%;
}
/* Ajustes para pantallas más grandes (tablets, laptops) */
@media (min-width: 768px) {
body {
font-size: 20px;
}
#donation-form {
max-width: 600px;
padding: 20px;
}
/* Círculos de los pasos para pantallas más grandes */
.progress-container {
width: 70%;
}
.step-circle {
width: 40px;
height: 40px;
font-size: 20px;
}
#amount-options {
flex-direction: row;
justify-content: space-between;
}
#amount-options label {
flex: 0 0 25%; /* Ocupa un 23% en pantallas grandes */
}
}
/* Ajustes para pantallas de escritorio grandes */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
#donation-form {
max-width: 600px;
padding: 30px;
}
.progress-container {
width: 60%;
}
}
/* Ajustes campos de direccion */
#address_fields{
display:flex;
flex-wrap:wrap;
width:100%;
margin:0; /* sin sangrías extra */
padding:0;
}
/* cada celda ocupa 50% sin hueco */
#address_fields .field{
flex:0 0 50%;
max-width:50%;
padding:0; /* sin gutter */
box-sizing:border-box;
display:flex;
flex-direction:column;
}
/* mismos estilos que .personal_data, pero sin separación vertical */
#address_fields input[type="text"],
#address_fields select{
width:100%;
margin:0; /* filas sin espacio */
/* hereda padding, font-size, border de .personal_data */
}
/* error debajo del control, sin romper la fila */
#address_fields .error-message{
margin:4px 0 0;
min-height:14px; /* evita saltos cuando no hay error */
}
/* 1 columna en móvil */
@media (max-width:600px){
#address_fields .field{ flex-basis:100%; max-width:100%; }
}
/* Address: filas pegadas */
#address_fields { display:flex; flex-wrap:wrap; width:100%; margin:0; padding:0; }
#address_fields .field { flex:0 0 50%; max-width:50%; margin:0; padding:0; display:flex; flex-direction:column; }
/* sin margen bajo en los controles dentro de address */
#address_fields input[type="text"],
#address_fields select { margin:0 !important; }
/* los errores no ocupan espacio si están vacíos */
#address_fields .error-message { display:none; margin:0; height:0; }
#address_fields .error-message:not(:empty) { display:block; margin-top:6px; height:auto; }
/* móvil: 1 columna */
@media (max-width:600px){
#address_fields .field { flex-basis:100%; max-width:100%; }
}
/* Fix texto cortado en selects del bloque de dirección */
#address_fields select{
font-size: 13px !important;
line-height: 1.2 !important; /* evita el recorte (sobrescribe line-height:1) */
padding: 10px 20px 10px 10px; /* mismo padding que inputs */
min-height: 42px; /* asegura altura visual suficiente */
box-sizing: border-box;
background-position: right 10px center;
}/* End custom CSS */