/* RESET CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {	border-collapse: collapse; border-spacing: 0;}
input,textarea:focus{outline: none;box-sizing: border-box;}
/* End RESET CSS */

body { font-family: "DM Sans", sans-serif; font-optical-sizing: auto;font-weight: normal;font-style: normal;background-color: var(--text-color-light);}
a {text-decoration: none;}
:root {--link-primary-color:#1798e2; --link-secondary-color:#006CA9;--main-color:#111030;--shadow-color:#0479bd80;--text-color-light:#f0f8ff;}

/* header and content */
header {width: 100%;display: flex;box-sizing: border-box;border-bottom: 3px solid var(--main-color);}
.int-header {width: 100%;max-width: 70rem; margin: 0 auto;height: 4rem;box-sizing: border-box;display: inline-flex;justify-content: space-between;align-items: center;}
.logo {font-weight:500;color: var(--main-color);font-size: 2.7em;transition: all 0.1s linear;}
.logo:hover {color:var(--link-primary-color)}
nav a {margin: 0 1rem;padding: .2rem;color: var(--main-color); border-bottom: 3px solid transparent;font-weight: 600;transition: all 0.1s linear;}
nav a:hover {color: var(--link-primary-color); }
/* --- */

/* Home Items */
.main-home {box-shadow: 0px 0px 5vw var(--link-primary-color) inset;height: 100vh;}
.c { width: 100%;align-items: center;display: flex;text-align: center;box-sizing: border-box; }
.center-content {width: 90%;max-width: 1650px; line-height: 1.2;display: flex;margin: 0 auto;color: var(--main-color);flex-direction: column;align-items: center;}
.welcome h1, h1 {font-weight: 700; font-size: 7rem;margin-top: 4.5vh;}
.welcome span, span {font-weight: 500; color: var(--link-primary-color);}
.welcome h2, h2 {font-size: 2rem;line-height: 1.5;}
.welcome h3, h3 {max-inline-size: 65ch;}
.welcome h3 span {font-weight: 700;color: var(--main-color);}
.welcome h2 span, h2 span {font-weight: 700;color: var(--main-color); }

.btn-content {display: flex;align-items: center;justify-content: center;;margin-top: 2rem;margin-bottom: 3rem; width: 100%;}
.btn-primary {font-size: 2.5rem; border: none;border-radius: 50px;background-color: var(--main-color);color: var(--text-color-light); padding: .5rem .9rem;box-shadow: 0px 0px 5px var(--shadow-color);display: flex;align-items: center;text-align: center;}
.btn-primary:hover {background-color: #0479bd;transition: all 0.2s linear;} 
.btn-secondary {font-size:2.5rem; margin: 0 1rem;padding: .2rem;color: var(--main-color); border-bottom: 3px solid transparent;font-weight: 600;transition: all 0.1s linear;text-align: center;}
.btn-secondary:hover {border-bottom-color: var(--main-color);}

.btn-big {font-weight: 500;text-transform:capitalize;padding: 1.3rem 2.8rem 1.5rem 2rem;margin:1rem;font-size: 2.5rem;}
.btn-big svg{height: 2.3rem;margin:0 .5rem 0 0;}

.center-content h3 {font-size: 1.8rem;margin:1.2rem auto; font-weight: 500;}

/* "Comenzar App" */
.c-app {height: auto;box-sizing: border-box;display: block;margin-top: 1rem;}
.c-item {color: var(--main-color); box-sizing: border-box;width: 100%;height: 40%;display: flex;}

.c-item>div {height: 20rem;margin: .5rem;padding: 1rem;border: 3px solid var(--main-color);border-radius: 15px;}
.c-item>div:nth-child(odd) {}
.c-item>div:nth-child(even) {}

.distri-2-75-25>div {width: 35%;}
.distri-2-75-25>div:first-child {width: 65%;}

.distri-2-50-50>div {width: 50%;}

.item-title {display: flex;align-items: center;justify-content: center;text-align: center;width: 100%;line-height: 1;}
.item-title h1 {font-size: 2.5rem;font-weight: 600;width: 100%;position: relative;text-align: center;margin-top: 0;}


/* Formulario de Contacto */
iframe {width: 100%;min-height: 900px;}

.form-contact {display: flex; align-content: center; flex-wrap: nowrap; box-sizing: border-box; border: none; box-shadow: none; width: 100%; border-radius: 15px; padding: .2rem 1.2rem; margin: 0 auto; flex-direction: column; justify-content: center; align-items: center;}

.form-int-content {width: 100%; box-sizing: border-box; display: flex;}
.form-int-content-two {margin-top: 1rem;}

input.name-form-contact, input.email-form-contact, textarea.massage-form-contact {padding: .6rem;line-height: 1.6; font-family: "DM Sans", sans-serif ;border-left: 3px solid var(--main-color);font-size: 1rem;font-family: "DM Sans", sans-serif;box-sizing: border-box;}

input.name-form-contact, input.email-form-contact {display: block; width: 50%; height: 3.5rem;  border:none;}

textarea.massage-form-contact {width: 100%;min-height: 330px; margin: 0 auto; resize: none;border:none;}
.form-contact input:focus, .form-contact textarea:focus {box-shadow: none;border:none;}

#ContactForm1_contact-form-submit {font-size: 1.5rem; border: 3px solid var(--main-color);border-radius: 50px;background-color: transparent;color: var(--main-color); padding: .5rem .9rem;display: flex;align-items: center;font-weight: 600;margin:1rem;}
#ContactForm1_contact-form-submit:hover {background-color:var(--link-primary-color);color:var(--text-color-light);transition: all 0.2s linear;} 

@media (width <= 1210px) {
    .welcome h1, h1 {line-height: .9;font-size: 6rem;}
    .btn-primary, .btn-secondary, .btn-big {
      font-size: 2rem;
    }
}
@media (width <= 1050px) {
    .center-content {
      width: 100%;
      padding: 1rem;
    }
    .logo {text-indent: .6rem;font-size: 2.2em;}
}
@media (width <= 950px) {
    .welcome h1, h1 {line-height: .9;font-size: 4.8rem;}
    .welcome h2 {font-size: 1.6rem;margin-top: 1rem;}
    .btn-content {margin-top: .8rem;}
    .btn-big {font-size: 1.5rem;padding: 1.1rem 1.5rem 1.3rem 1.5rem;margin:1rem;}
    .btn-content .btn-secondary {font-size: 1.5rem;}
}
@media (width <= 800px) {
    .welcome h1 {line-height: .9;font-size: 4.2rem;}
}
@media (width <= 600px) {
    .welcome h1, h1 {line-height: .9;}
    .welcome h2 {font-size: 1.6rem;margin-top: 1rem;}
    .welcome h3 {display: none;}
    .btn-content {margin-top: 2rem;flex-direction: column;}
    .btn-big {font-size: 3.2rem;}
    .btn-content .btn-secondary {font-size: 2.8rem;width: 90%;padding: 1rem;text-align: start;border-bottom: 3px solid var(--main-color);}
    .btn-content .btn-secondary:hover {color:var(--link-primary-color);border-bottom: 3px solid var(--link-primary-color);}
}
@media (width <= 470px) {
    .center-content {padding: .5rem;}
    .welcome h1, h1 {line-height: .9;font-size: 2.7rem;}
    .welcome h2 {font-size: 1.2rem;margin-top: 1rem;}

    .btn-content {flex-direction: column;margin-bottom: 1rem;}
    .btn-content .btn-secondary, .btn-big {font-size: 1.9rem;}
    .btn-big {padding: 1rem 1.5rem 1.2rem .7rem;}

    .center-content h3 {font-size: 1.1rem;margin:.8rem auto;}
    .form-contact {padding: .2rem;}
    .form-contact #ContactForm1_contact-form-submit {margin: .5rem;}
    input.name-form-contact, input.email-form-contact {height: 3rem; font-size: .8rem;padding: .3rem;}
    .form-int-content-two {margin-top: .8rem;}
    #ContactForm1_contact-form-submit {font-size: .9rem;padding: .9rem .5rem;margin:0;}

}