@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";
.chilango{
    --max-width:1200px;
    --primary-color:#4d4d4d;
    --primary-border-color:#000000;
    --secundary-color:#ED1A3B;
    --secundary-border-color:#ED1A3B;
    --bg-image:none;
    --h1-color:#000;
    --h1-shadow:none;
    --button-bg-color:#ED1A3B;
    --button-color:#fff;
    --email-input-bottom-border:solid 1px #000;
    --email-input-bg:#fff;
    --email-input-color:#000;
    --thanks-bg:#f1f1f1;
    --thanks-shadow:0px 0px 7px -2px rgba(0,0,0,0.5);
    --thanks-color:#000;
    --thanks-txt-shadow:none;
}
.maspormas{
    --max-width:1400px;
    --bg-image:url('/newsletter/images/maspormas/bg-thanks.png');
    --bg-color:#b42c70;
    --secundary-color:#b42c70;
    --h1-color:#fff;
    --h1-shadow:0px 0px 9px rgba(0,0,0,0.9);
    --email-input-bg:#fff;
    --email-input-color:#000;
    --button-border: solid 1px #fff;
    --button-color:#fff;
    --button-bg-color:rgba(0,0,0,0.2);
    --thanks-bg:rgba(0,0,0,0.3);
    --thanks-color:#fff;
}
.local{
    --max-width:1400px;
    --primary-color:#CC99FF;
    --primary-border-color:#CC99FF;
    --secundary-border-color:#CC99FF;
    --secundary-color:#CC99FF;
    --bg-image:url('/newsletter/images/local/bg-thanks.png');
    --h1-color:#fff;
    --h1-shadow:0px 0px 9px rgba(0,0,0,0.9);
    --button-bg-color:#CC99FF;
    --button-color:#fff;
    --email-input-bottom-border:none;
    --email-input-bg:#fff;
    --email-input-color:#000;
    --thanks-bg:rgba(0,0,0,0.3);
    --thanks-shadow:none;
    --thanks-color:#fff;
    --thanks-txt-shadow:0px 0px 4px #000;
}
.travesias{
    --max-width:1400px;
    --primary-border-color:#000000;
    --bg-color:#000;
    --button-bg-color:#000;
    --button-color:#fff;
    --secundary-color:#000;
    --thanks-color:#fff;
    --h1-color:#fff;
    --button-border: solid 1px #fff;
    --email-input-color:#fff;
}
.newsletter .btn {
    border:var(--button-border);
    background: var(--secundary-color);
    color: #fff;
    padding: .75rem; border-radius: 4px; font-size: 1rem; font-weight: bold; text-align: center; cursor:pointer; width: 80%; max-width: 400px; min-width: 200px;}
.newsletter *,
.newsletter :before,
.newsletter :after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
.newsletter :before,:after{--tw-content: ""}
.newsletter .w-full{width:100%;}
html.newsletter{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}
.newsletter body{margin:0;line-height:inherit}
.newsletter header { position: sticky; top: 0; left: 0; width: 100vw; box-shadow: 0px 0px 3px rgba(0,0,0,0.4); background: #fff;}
.newsletter nav{padding:1rem;}
.newsletter img.w-24.h-auto { width: 7rem; margin: auto; display: block; }
.newsletter footer{ background: #000; padding: 1rem; }
.newsletter .footerTitle{ width: 100px; margin: auto; padding: 1rem 0 2rem; }
.newsletter .footerSites{ display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: center; }
.newsletter .app { width: 100vw; min-height: 100vh; padding: 0px; margin: 0px; display: flex; flex-direction: column; justify-content: space-between; }
.newsletter .userForm { max-width: var(--max-width); margin: auto; }
.newsletter .emailForm { max-width: var(--max-width); margin: auto; width: 90vw; text-align: center;background-color: var(--bg-color);background-image: var(--bg-image); background-size: cover; background-position: center; min-height: calc(100vh - 328px); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.newsletter .emailForm input { background: var(--email-input-bg);border-bottom: var(--email-input-bottom-border); color:var(--email-input-color); width: 100%; max-width: 500px; text-align: center; padding: 1rem; margin-top: 2rem; font-size: 1.3rem; }
.newsletter .emailForm input:focus { outline:none; }
.newsletter .emailForm .button,
.emailForm button { display: block; margin: 4rem auto; width: 90vw; max-width: 500px; padding: .8rem; font-size: 1rem; border:var(--button-border); color: var(--button-color); background: var(--button-bg-color); border-radius:5px; text-decoration:none; }
.newsletter .thanks {
    background: var(--thanks-bg);
    width: 90%;
    margin: auto;
    max-width: 720px;
    padding: 1rem;
    border-radius: 10px;
    color:var(--thanks-color);
    box-shadow: var(--thanks-shadow);
    text-shadow: var(--thanks-txt-shadow);
    font-weight: bold;
}
.newsletter h1{
    color:var(--h1-color);
    text-shadow:var(--h1-shadow);
    font-size: :1.5rem;
}
.newsletter h2 { border-bottom: solid 1px var(--primary-border-color); padding: 2rem 0 4rem; font-size: 2rem; color: var(--primary-color); }
.newsletter h3 { margin-bottom: .5rem; font-size: 1.5rem; line-height: 2rem; color:var(--primary-color); border-bottom: solid 2px var(--secundary-border-color); padding: 0 0 1rem; }
.newsletter .data .label{display: block; padding: 1rem 0;}
.newsletter .label span{ font-size: 1.1rem; color:#000; font-weight: bold; }
.newsletter .label input[type="text"] { display: block; border: solid 1px #000; width: 100%; height: 34px; padding: 1rem; font-size: 1.2rem; }
.newsletter .label input:focus{ outline: none; }
.newsletter .ageCols { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 2rem; }
.newsletter .ageCols { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 1rem; }
.newsletter .ageCols select { border: solid 1px #000; height: 34px; background: transparent; }
.newsletter .ageCols select:focus {outline: unset;}
.newsletter .ageCols select .legend{color:#333;}
.newsletter .selectors label{ display:block;}
.newsletter .selectors input{display: none;}
.newsletter .selectors input + span{position: relative;display: inline-block;}
.newsletter .selectors input + span::before { content: ''; display: inline-block; border: solid 1px #cdcdcd; width: 36px; height: 20px; position: relative; border-radius: 20px; }
.newsletter .selectors input + span::after { content: ''; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; background: #cdcdcd; border-radius: 50%; transition: all .5s; }
.newsletter .selectors input:checked + span::after { left: 17px; background: var(--secundary-color); }
.newsletter .selectors input:checked + span::before { border-color:#000; }
.newsletter .interesContent,
.newsletter .interesContent2 { padding-top:2rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
.newsletter .item { border: solid 1px #cdcdcd; border-radius: 5px; box-shadow: 0px 0px 3px rgba(0,0,0,0.3); width: max-content; padding: 1rem; margin: auto; display: block; cursor:pointer; transition: all .5s;}
.newsletter .item:hover { transform: translate(-5px, -5px); box-shadow: 4px 4px 8px rgba(0,0,0,0.5); }
.newsletter .itemImage,
.newsletter .itemImage img{width: 100%}
.newsletter .itemTitle{position: relative;}
.newsletter .itemTitle span{width: 100%; text-align: center; display: block; padding-top:1rem}
.newsletter .itemSelected{ display: none; position: absolute; top:10px; right: 0px; width: 30px; height: 30px; background: var(--secundary-color); border-radius: 50%; }
.newsletter .itemSelected svg { width: 23px; position: relative; height: 23px; fill: #fff; }
.newsletter .itemSelector{display: none;}
.newsletter .itemSelector:checked + .itemSelected{ display: flex; justify-content: center; align-items: center; }
.newsletter .control { width: 100%; display: flex; justify-content: center; padding: 4rem; }
.newsletter.top2{padding-top: 2rem;}
.newsletter.itemSites { display: flex; gap:10px; }
.newsletter.logoItem { border: solid 1px #cdcdcd; border-radius: 4px; margin-bottom: 10px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; }
.newsletter.logoItem img { width: 35px; height: 35px; object-fit: cover; }


@media (min-width:600px) {
    .newsletter .interesContent,
    .newsletter .interesContent2 { grid-template-columns: 1fr 1fr;}
}
@media (min-width:860px) {
    .newsletter .interesContent { padding-top:2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
    .newsletter .interesContent2 { padding-top:2rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
    .newsletter .UserCols { display: flex; width: 100%; gap: 8rem; }
    .newsletter .data{width: 30%}
    .newsletter .interes{width: 70%}
    .newsletter header{position: relative;box-shadow: unset;}
    .newsletter .footerCols{ display: flex; max-width: 1440px; margin: auto; justify-content: space-between; }
    .newsletter .footerTitle{ margin: unset; }
}
@media (min-width:1190px) {
    .newsletter .interesContent { grid-template-columns: 1fr 1fr 1fr;}
    .newsletter .interesContent2 { grid-template-columns: 1fr 1fr 1fr 1fr;}
}































/***/
