/* --------------------------------------------------------------####### colors */

/* basic colors */
:root {
    --black: rgba(0, 0, 0);
    --black_10: hsla(0, 0%, 0%, 0.1);
    --black_20: hsla(0, 0%, 0%, 0.2);
    --black_40: hsla(0, 0%, 0%, 0.4);
    --black_50: hsla(0, 0%, 0%, 0.5);
    --black_60: hsla(0, 0%, 0%, 0.6);
    --black_680: hsla(0, 0%, 0%, 0.8);
    --black_100: hsla(0, 0%, 0%, 1);

    --white: rgba(255, 255, 255);
    --white_100: hsl(0, 0%, 100%);
    --white_palette_01_20: rgba(241, 245, 240, 0.2);
    --white_palette_01_50: rgba(241, 245, 240, 0.5);
    --white_palette_01_70: rgba(241, 245, 240, 0.7);

    --esmeralda_100: rgb(5, 56, 16);
    --green_02_100: hsl(91, 88%, 55%);
    --green_120: hsl(101, 93%, 17%);
    --green_palette_01: #005242;

    --blue_60: hsla(229, 79%, 22%, 0.6);
    --blue_60-hover: hsla(229, 71%, 12%, 0.6);
    --blue_palette_01_50: rgba(18, 22, 59, 0.5);
    --blue_100: rgb(9, 15, 65);

    --orange_60: hsla(34, 79%, 22%, 0.6);
    --orange_60-hover: hsla(34, 79%, 22%, 0.6);

    --green-button-normal: hsla(108, 28%, 10%, 0.6);
    --green-button-hover: hsla(105, 38%, 6%, 0.6);
    --red-button-normal: hsla(0, 29%, 20%, 0.6);
    --red-hover-hover: hsla(0, 30%, 12%, 0.6);

    --accept-button2: hsla(109, 43%, 39%, 0.753);
    --accept-button2-hover: hsla(105, 83%, 61%, 0.842);

    --transparent: hsla(0, 0%, 0%, 0);

    --base: rgba(81, 175, 182, 1);
    --base_tr: rgba(81, 175, 182, 0.5);

    /* spot palette */
    --spot_01: #007a81;
    --spot_02: #befcff;
    --spot_03: #872200;

    /* Switch Palette */
    --switch_01: #00323a;
    --switch_02: #a53c00;
    --switch_03: #e6f4f1;

    /* Classy Palette */
    --classi_01: rgba(50, 75, 77, 1);
    --classi_02: rgba(148, 176, 178, 1);
    --classi_03: rgba(159, 156, 207, 1);
    --classi_04: rgba(107, 105, 153, 1);
  
    --classi_01_tr: rgba(50, 75, 77, 0.5);
    --classi_02_tr: rgba(148, 176, 178, 0.5);
    --classi_03_tr: rgba(159, 156, 207, 0.5);
    --classi_04_tr: rgba(107, 105, 153, 0.5);
}

/* alias colors */
:root {
    --background_header: white;

    --fondo-app: var(--white);
    --fondo-btn: var(--black_20);
    --menu-back-global: var(--transparent);
    --menu-back-left: var(--white);
    --menu-back-right: var(--black_50);
    --menu-close: var(--black_60);
    --menu-open: var(--black_40);
    --menu-txt: var(--green_palette_01);
    --pulse-01: var(--black_10);
    --pulse-02: var(--black_50); 
    --link-txt: var(--black_100);  

    /*---- card 10 */
    --c10-color-fnd1: var(--black);
    --c10-color-fnd2: var(--white);
    --c10-color-txt1: var(--white);
    --c10-color-txt2: var(--black);

    --c10-height: 12rem;
    --c10-width: 24rem;

    --c10-img-h: 12rem;
    --c10-img-w: 12rem;

    --c10-txt-h: 12rem;
    --c10-txt-w: 12rem;

    --titular-back: var(--white_palette_01_50); 

    /*---- color sections */
    --sec_news: var(--black_100);
    --sec_action:  var(--blue_100);
    --sec_asoc:  var(--esmeralda_100);
    --sec_socios:  var(--black_100);
}

/* --------------------------------------------------------------####### Fonts */

:root {
    --ttf-segoe: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

body {
    font-family: var(--ttf-segoe);
}

/* --------------------------------------------------------------####### CUSTOMIZE SCROLLBAR ONLY TO CHROME (AT THE MOMENT) */

::-webkit-scrollbar {
    width: 2em;
}
    
::-webkit-scrollbar-track  {
    background: hsl(120 75% 50% / 1);
    border-radius: 100vw;
    margin-block: 0.5em;
}

::-webkit-scrollbar-thumb {
    background: hsl(120 100% 20% / 1);
    border: .25em solid hsl(120 75% 50% / 1);
    border-radius: 100vw;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(120 100% 5% / 1);
}

/* --------------------------------------------------------------####### CUSTOMIZE SCROLLBAR ONLY TO FIREFOX (AT THE MOMENT) */

@supports (scrollbar-color: red blue) {
    * {
        scrollbar-color: hsl(120 75% 50% / 1) hsl(120 100% 20% / 1);
        scrollbar-width: thin;
    }
}

/* --------------------------------------------------------------#######  GLOBAL ADJUST */
  
a, a:visited {
    color: black;
    text-decoration: none;
}

.top-3 {
    margin-top: 3em;
}

.top-4 {
    margin-top: 7em;
}

.top-5 {
    margin-top: 10vh;
}

.logo-lateral {
    align-self:center;
    background: url("../img/logoCentral7.webp");
    background-position: center; 
    background-size: 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 1));
    height: 13rem;
    margin: 1.5rem;
    width: 13rem;
}

.globalContainer {
    margin-bottom: 0.5rem;
    min-height: 101vh;
}

.global-grid {
    animation: fadeIn  1s;
    display: grid;
    grid-row-gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2rem;
    max-width: 80vw;
}

@media screen and (max-width: 60rem) {
    .global-grid {
        margin-left: 0;
        max-width: 100vw;
    }
}
  
/* --------------------------------------------------------------#######  GLOBAL ANIMATION */
  
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut{
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    80% {
        opacity: .9;
    }
    100% {
        opacity: 0;
    }
}
  
/* --------------------------------------------------------------#######  TITLES SECTIONS */
  
.directToIndex p {
    background: rgba(3, 54, 18, 0.37);
    box-shadow: inset 0.5rem 0.25rem 1.25rem 0.25rem black, 0.25rem 0.25rem 0.5rem 0.12rem rgba(0, 0, 0, 0.7);
    color: black;
    font-size: 2em;
    margin-right: 0.1rem; 
    padding: 0.9rem;
    transform: rotate(15deg);
    text-align: right;
    width: 20rem;
}

.TitSec h1 {
    background: rgba(0, 0, 0, 0.781);
    box-shadow: inset 0.5rem 0.25rem 1.25rem 0.25rem black, 0.25rem 0.25rem 0.5rem 0.12rem rgba(0, 0, 0, 0.7);
    color:  white;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: normal;
    height: auto;
    padding: 0.5rem;
    transform: rotate(-10deg);
    text-align: right;
    width: 8rem;
}

@media screen and (min-width: 60rem) {
    .directToIndex p {
        transform: rotate(0deg);
    }

    .TitSec h1 {
        transform: rotate(0deg);
        width: 12rem;
    }
}

.directToIndex :hover {
    background: rgba(102, 206, 6, 0.432);
}

.TitSec :hover {
    background: rgba(102, 206, 6, 0.432);
    box-shadow: inset 0.5rem 0.5rem 3rem 0.25rem black, 0.25rem 0.25rem 0.5rem 0.12rem rgba(0, 0, 0, 0.7);
}
  
/* ------------------------------------------------------------------------------------------------------->>>>> INDEX */
:root {
    --index-logo: 12rem;
    --index-logo-bef: 11rem;
}

.index-container {
    animation: fadeIn  1s;
    position: relative;
}

.index-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding-top: 0rem;
}

.logo-central {
    align-self: center;
    grid-column: 1;
    grid-row: 2;
    height: var(--index-logo);
    justify-self: center;
    position: relative;
    width: var(--index-logo);
    z-index: 5;
}

.logo-central::before {
    background: rgba(120, 170, 173, 0.9);
    border: 0.01rem;
    border-style: solid;
    border-color: rgba(120, 170, 173, 0.9);
    border-radius: 50%;
    box-shadow: 1rem 1rem 0.8rem 2rem rgba(120, 170, 173, 0.9);
    content:'';
    display:block;
    grid-column: 1;
    grid-row: 2;
    height: var(--index-logo-bef);
    margin: 0.2rem 0 0 -0.7rem;
    position:absolute;
    width: var(--index-logo-bef);
}

.logo-central::after {
    background: url("../img/logoCentral7.webp");
    background-position: center; 
    background-size: 90%;
    background-repeat: no-repeat;
    content:'';
    display:block;
    filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 1));
    height: var(--index-logo);
    position:absolute;
    width: var(--index-logo);
}

.title--00 {
    align-self: center;
    box-shadow: 0.3rem 0.3rem 0.8rem black;
    color: #fff;
    font-weight: lighter;
    font-size: 3rem;
    background: #214649a1;
    height: 7vh;
    letter-spacing: 0.1rem;
    padding: 1rem;
    user-select: none;
    z-index: 3;
}

.align-name-01 {
    text-align: right;
    grid-column: 1;
    grid-row: 1;
}

.align-name-02 {
    text-align: left;
    grid-column: 1;
    grid-row: 3;
}

@keyframes index-move-h {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        margin-left: 90%;
    }
}

@keyframes index-move-v {
    0%, 100% {
        margin-top: 0;
    }
    50% {
        margin-top: 40%;
    }
}

.index-img-01 {
    background: url("../img/index.webp") no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    opacity: 1;
    position:absolute;
    width: 100%;
}

.index-img-02,
.index-img-03 {
    background: url("../img/index02.webp") no-repeat center center fixed;
    background-size: cover;
    opacity: 0.4;
    position:absolute;
}

.index-img-02 {
    animation: index-move-h cubic-bezier(0.5, 0.2, 0.3, 1.0) 10s 0.5s alternate infinite;
    height: 100%;
    opacity: 0.5;
    width: 10%;
    z-index: 3;
}

.index-img-03 {
    animation: index-move-v  12s -0.5s alternate infinite;
    height: 10%;
    opacity: 0.5;
    width: 100%;
    z-index: 4;
}

@media screen and (min-width: 60rem) {
    :root {
        --index-logo: 22rem;
        --index-logo-bef: 21rem;
    }

    .index-grid {
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 80% 1fr;
        height: 101vh;
        padding-top: 0rem;
    }

    .align-name-01 {
        align-self: center;
        grid-column: 1;
        grid-row: 1;
    }

    .align-name-02 {
        align-self: center;
        grid-column: 3;
        grid-row: 1;
    }

    .logo-central {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
    }
}

.bloque1, .bloque2,
.bloque3, .bloque4 {
    content: '';
    display: block;
    height: 20rem;
    width: 100%;
}

.bloque1 {
    background: white;
    filter: drop-shadow(7px 7px 7px rgba(22, 21, 21, 0.77));
}

.bloque2 {
    background: url("../img/index02.webp") no-repeat center center fixed;
    background-size: cover;
}

.bloque4 {
    background: url("../img/index.webp") no-repeat center center fixed;
    background-size: cover;
}

.bloque-grid {
    column-gap: 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.indexCard {
    cursor: pointer;
    filter: drop-shadow(5px 5px 5px rgba(22, 21, 21, 0.75));
    height: 14rem;
    margin-top:3rem;
    width: 25rem;
    position: relative;
}

.indexCard img {
    height: 10rem;
    position: absolute;
    width: 10rem;
    z-index: 1;
}

.indexCard h3 {
    background: rgba(0, 0, 0, 0.589);
    color: white;
    font-size: 1.3em;
    font-weight: bold;
    margin: 5rem 0 0 1rem;
    padding: 0.5rem;
    position: absolute;
    text-align: left;
    z-index: 2;
}

.indexCard h2 {
    background: rgba(5, 77, 3, 0.623);
    color: white;
    font-size: 1.5em;
    font-weight: normal;
    margin: 7.5rem 0 0 6.5rem;
    padding: 0.5rem;
    position: absolute;
    text-align: left;
    z-index: 2;
}

.indexCard:hover {
    filter: drop-shadow(0.5px 0.5px 0.5px rgba(22, 21, 21, 0.75));
}

.indexCard:hover img {
    height: 11rem;
    margin: 0.5rem 0 0 0.5rem;
    width: 11rem;
}

.indexCard:hover h3 {
    background: rgba(0, 0, 0, 0.9);
    filter: drop-shadow(5px 5px 5px rgba(22, 21, 21, 0.75));
}

.indexCardLogo {
    cursor: pointer;
    filter: drop-shadow(5px 5px 5px rgba(22, 21, 21, 0.75));
    height: 7rem;
    margin-top:3rem;
    width: 7rem;
    padding: 0 5rem 0 5rem;
    position: relative;
}

.indexCardLogo img {
    height: 7rem;
    position: absolute;
    width: 7rem;
    z-index: 1;
}

.indexCardLogo:hover {
    filter: drop-shadow(0.5px 0.5px 0.5px rgba(22, 21, 21, 0.75));
}

.indexCardLogo:hover img {
    height: 8rem;
    margin: 0.5rem 0 0 0.5rem;
    width: 8rem;
}

.indexCardAlign0 {
    justify-self: end;
}

.indexCardAlign1 {
    justify-self: start;
}

.indexCardAlignCenter {
    grid-column: 1 / span 2;
    justify-self: center ;
}

@media screen and (max-width: 60rem) {
    .bloque-grid {
        grid-template-columns: 1fr;
    }

    .bloque1, .bloque2,
    .bloque3, .bloque4 {
        height: 40rem !important;
    }

    .indexCard {
        justify-self: center !important;
    }
}

/* ------------------------------------------------------------------------------------------------------->>>>> NOTICE */
  
.new-notice, .txt-notice {
    background:  var(--titular-back);
    margin-bottom: 5rem;
    margin: 0 auto;
    max-width: 50rem;
    min-width: 300px;
    padding: 3rem 3rem 5rem 3rem;
}

.new-notice h2, .txt-notice h2 {
    font-size: 1.7em;
    margin-bottom: 1.2rem;
}

.new-notice h3, .txt-notice h3 {
    font-size: 1.1em;
    margin-bottom: 1.2rem;
    text-align: left;
}

.new-notice p, .txt-notice p {
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5 ;
    margin-top: 1rem ;
    margin-bottom: 3rem ;
    padding: 1rem 1rem 3rem 1rem;
    text-align: justify;
    text-indent: 22px ;
}

.new-notice img, .txt-notice img {
    width: 100%;
}

.new-notice figcaption, .txt-notice figcaption{
    font-size: 0.9em;
}

@media screen and (min-width: 50rem) {
    .new-notice h2, .txt-notice h2 {
        font-size: 2.2em;
    }

    .new-notice h3, .txt-notice h3 {
        font-size: 1.5em;
    }
        
    .new-notice p, .txt-notice p {
        font-size: 1.2em;
    }
}

/* ------------------------------------------------------------------------------------------------------->>>>> ASOC */
  
.logos-hx {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.logo-paypal-02, .logo-bizum-02 {
    background-position: center center;
    cursor: pointer;
    margin-top: 2rem;
    min-height: 50px;
    max-height: 10vh;
    max-width: 14vw;
    justify-self: center;
}
  
/* ------------------------------------------------------------------------------------------------------->>>>> HELP */
  
.help-container {
    min-height: 101vh;
    margin-bottom: 0.5rem;
    width: 100%;
}

@keyframes help-move-h {
    0%, 100% {
        margin-left: 15%;
    }
    50% {
        margin-left: 85%;
    }
}

@keyframes help-move-v {
    0%, 100% {
        margin-top: 0;
    }
    50% {
        margin-top: 40%;
    }
}

.help-img-02,
.help-img-03 {
    background: url("../img/index02.webp") no-repeat center center fixed;
    background-size: cover;
    opacity: 0.4;
    position:absolute;
}

.help-img-02 {
    animation: help-move-h cubic-bezier(0.5, 0.2, 0.3, 1.0) 11s 0.5s alternate infinite;
    height: 100%;
    opacity: 0.5;
    width: 11vw;
    z-index: 1;
}

.help-img-03 {
    animation: help-move-v 15s -0.5s alternate infinite;
    height: 15vh;
    opacity: 0.5;
    width: 100%;
    z-index: 2;
}

.help-grid {
    display: grid;
    gap: 7rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    padding-top: 0rem;
}

.help0 {
    grid-column: 1;
    grid-row: 1;
    grid-column-end: span 2;
    height: 14rem;
    justify-self: center;
    margin-top: 2.5rem;
    position: relative;
    width: 25rem;
}

.help0 img {
    height: 5rem;
    position: absolute;
    width: 5rem;
}


.help0 h3 {
    background: rgba(0, 0, 0, 0.589);
    color: white;
    font-size: 1.3em;
    font-weight: bold;
    margin: 5rem 0 0 0;
    padding: 0.5rem;
    position: absolute;
    text-align: left;
    z-index: 2;
}

.help0 p {
    color: black;
    font-size: 1.3em;
    font-weight: normal;
    margin: 7.5rem 0 0 0rem;
    position: absolute;
    text-align: left;
    z-index: 2;
}

.help1 {
    cursor: pointer;
    grid-column: 1 / span 2;
    grid-row: 2;
    height: 14rem;
    justify-self: center;
    position: relative;
    width: 8rem;
}

.help1 img {
    filter: drop-shadow(5px 5px 5px #222);
    height: 8rem;
    position: absolute;
    width: 8rem;
    z-index: 7;
}

.help1 img:hover {
    filter: drop-shadow(0px 0px 0px #222);
    height: 8rem;
    padding: 0.5rem 0 0 0.5rem;
    width: 8rem;
}

@media screen and (max-width: 60rem) {
    .help-grid {
        gap: 0rem;
        grid-template-columns: 1fr;
    }

    .help0 {
        align-self: center;
        grid-column: 1;
        grid-row: 1;
        grid-column-end: span 1;
        justify-self: center;
        margin-bottom: 3rem;
        margin-top: 1.5rem;
    }

    .help1 {
        background: red;
        align-self: center;
        grid-column: 1;
        grid-row: 2;
        height: 5rem;
        justify-self: center;
    }

    .help1 {
        align-self: center;
        background: transparent;
        border-color: blue;
        border-style: solid;
        border-width: 0.2rem;
        height: 4rem;
        justify-self: center;
        padding: 1rem;
        width: 70%;
    }

    .help1 img {
        height: 3rem;
        position: absolute;
        width: 3rem;
    }
}

/* ------------------------------------------------------------------------------------------------------->>>>> BLOQUE: LEGAL */

.main-legal {
    min-height: 101vh;
    margin-left: auto;
    margin-right: auto;
    max-width: 90ch;
    padding: 3rem;
}

.form-2-button-flex {
    display: flex;
    gap: 5rem;
    justify-content: center;
    margin-top: 2rem;
}

.form-2-button-flex a {
    color: white !important;
}

@media screen and (max-width: 60rem) {
    .form-2-button-flex {
        display: grid;
        gap: 2rem;
        justify-content: center;
        margin-bottom: 3rem;
        margin-top: 2rem;
    }
}

/*--------------------------------------------------------- legal colors */

.white {
    color: var(--white_100);
}

.black {
    color: var(--black_100);
}

.background-accept {
    background-color: var(--green-button-normal);
}

.background-accept:hover {
    background-color: var(--green-button-hover);
}

.background-accept2 {
    background-color: var(--accept-button2);
}

.background-accept2:hover {
    background-color: var(--accept-button2-hover);
}

.background-reject {
    background-color: var(--red-button-normal);
}

.background-reject:hover {
    background-color: var(--red-hover-hover);
}

.background-blue {
    background-color: var(--blue_60);
}

.background-blue:hover {
    background-color: var(--blue_60-hover);
}

.background-orange {
    background-color: var(--orange_60);
}

.background-orange:hover {
    background-color: var(--orange_60-hover);
}

/*--------------------------------------------------------- legal grid */

.grid_02 {
    display: grid;
    grid-template-columns: 1fr minmax(100px, 2fr) minmax(100px, 2fr) 1fr;
    grid-template-rows: 2em auto 3em;
    margin-top: 5em;
}

.grid_02_a {
    align-self: center;
    grid-column: 2 / 3;
}

.grid_02_b {
    align-self: center;
    grid-column: 3 / 4;
}

/*--------------------------------------------------------- legal txt */

.title-legal-01 {
    font-size: 3em;
}

.txt-legal-01 {
    font-size: 1.2em;
    line-height: 1.3em;
}

.txt-legal-01 > p:first-child {
    padding-top: 2rem;
}

.txt-legal-01 > p {
    padding-bottom: 1rem;
}

.txt-legal-01 > ul {
    padding-bottom: 1rem;
    padding-left: 1rem;
    margin-top: -1rem;
}

/*--------------------------------------------------------- legal btn */

.button02 {
    border: 3px solid grey;
    border-radius:50px;
    border-style: ridge;
    color: white;
    cursor: pointer;
    filter: drop-shadow(4px 4px 2px var(--black_100));
    font-size: 1rem;
    min-width: 15ch;
    max-width: 25ch;
    padding: 1em;
    text-align:center;
}

.button02:hover {
    color: white;
    filter: drop-shadow(0px 0px 0.5px var(--black_100));
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}

.button02::after {
    margin-right: 5em;
}

/* ------------------------------------------------------------------------------------------------------->>>>> FORM */

#intro {
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
}

.form_01 {
    background-color:white;
    border-radius: 25px;
    border: 4px groove grey;
    -webkit-box-shadow: 3px 3px 5px 6px rgba(44, 46, 56, 0.507);
    box-shadow: 3px 3px 5px 6px rgba(44, 46, 56, 0.507);
    height: auto;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 2vw;
}

@media screen and (max-width: 60rem) {
    .form_01 {
        width: 80%;
    }
}

.field_01 {
    background-color: white;
    line-height: 250%;
    margin-bottom: 2em;
    text-align:left
}

.label_01 {
    background-color: white;
    font-size:large;
    font-weight:bold;
}

.input_01 {
    background-color: white;
    border-radius: 9px;
    border: 2px solid grey;
    height: 2rem;
    padding: 0.5em;
    width: 100%;
   
}

.check_01 {
    background-color: white;
    height: 2rem;
    margin-left: 1.5em;
    padding: 0.5em;
    width: auto;
}

.date_01 {
    background-color: white;
    border-radius: 9px;
    border: 2px solid grey;
    height: 2rem;
    margin-left: 1.5em;
    padding: 0.5em;
    width: auto;
}

.textarea_01 {
    background-color: white;
    border-radius: 9px;
    border: 2px solid grey;
    height: 10rem;
    padding: 0.5em;
    width: 100%;
   
}

.checkbox_01 {
    height: 2rem;
    width: 100%;
}

.field_group {
    width:100%;
    margin-left: -2vw;
}

/*--------------------------------------------------------- zona contacto */

#mailAviso {
    background: white;
    border: 4px groove hsl(251, 64%, 23%);
    border-radius: 25px;
    -webkit-box-shadow: 3px 3px 5px 6px rgba(44, 46, 56, 0.507);
    box-shadow: 3px 3px 5px 6px rgba(44, 46, 56, 0.507);
    height: calc(200px + 4vw);
    margin-left: 5vh;
    margin-top: 5vh;
    padding: 2em;
    padding-bottom: 5em;
    position: absolute;
    visibility: hidden;
    width: 25vw;
    z-index:99;
}

.message_cab_01 {
    font-size:1.5rem;
    text-align: center;
}

.message_txt_01 {
    margin-bottom: 2em;
    margin-top: 1em;
    font-size:1.3rem;
    text-align: center;
}

.message_button_01 {
    margin-left:40%;
}

/* ------------------------------------------------------------------------------------------------------->>>>> cookies */

#cookDiv {
    align-items: center;
    background: var(--black_60);
    bottom: 0;
    display: flex;
    justify-content: center;
    position:sticky;
    z-index: 777;
}

.txtCookies {
    color: var(--white_100);
    font-size: calc(12px + 0.3vw);
    height:calc(4rem + 4vh) !important;
    line-height: 200%;
    text-align:center;
    width: 100%;
}

.txtCookies ul {
    color: var(--green_02_100);
    cursor:pointer;
}

.txtCookies ul li {
    display: inline;
}

.txtCookies ul li:first-child {
    margin-left: 20%;
}

.txtCookies ul li:last-child {
    margin-right: 20%;
    float: right;
}

.txtCookies ul li:hover {
    color: var(--green_120);
    text-decoration: none;
}

.shadow-cook {
    filter: drop-shadow(5px 5px 2px var(--black_100));
}

/* ------------------------------------------------------------------------------------------------------->>>>> HEADER */

header {
    background: var(--background_header);
    -webkit-box-shadow: 1px 1px 5px 2px rgba(44, 46, 56, 0.507);
    box-shadow: 1px 1px 5px 2px rgba(44, 46, 56, 0.507);
    height: 3rem;
    position: sticky;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 999;
}

.logo-header {
    padding-top: 3px;
    max-height: 40px !important;
    min-height: 20px !important;
}

.horizontal_01 {
    background: var(--background_header);
    left: 0;
    position: absolute;
    text-align: left;
    top: 100%;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    transform-origin: top;
    transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
    width: 100%;
}

.horizontal_01 ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

.horizontal_01 li {
    margin-bottom: 1em;
    margin-left: 1em;
}

.horizontal_01 li:hover {
    background: rgba(14, 9, 61, 0.5);
}

.horizontal_01 a {
    color: black;
    text-decoration: none;
    font-size: 1.2rem;
    opacity: 0;
    text-transform: uppercase;
    transition: opacity 150ms ease-in-out;
}

.horizontal_01 a:hover {
    color: white;
}

.horizontal_01-toggle {
    display: none;
}

.horizontal_01-toggle:checked ~ nav {
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}

.horizontal_01-toggle:checked ~ nav a {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}

.horizontal_01-toggle-label {
    align-items: center;
    display: flex;
    height: 100%;
    left: 0;
    margin-left: 1em;
    position: absolute;
    top: 0;
}

.horizontal_01-toggle-label span,
.horizontal_01-toggle-label span::before,
.horizontal_01-toggle-label span::after {
    background: black;
    border-radius: 2px;
    display:block;
    height: 2px;
    position: relative;
    width: 2em;
}

.horizontal_01-toggle-label span::before,
.horizontal_01-toggle-label span::after {
    content: '';
    position:absolute;
}

.horizontal_01-toggle-label span::before {
    bottom: 7px;
}

.horizontal_01-toggle-label span::after {
    top: 7px;
}

.vertical ul {
    display: flex;
    justify-content: flex-end;
}

@media screen and (min-width: 1000px) {
    .horizontal_01-toggle-label {
        display: none;
    }

    header {
        display: grid;
        grid-template-columns: 20px auto minmax(600px, auto) 20px;
    }

    .logo-header {
        grid-column: 2 / 3;
        margin-top: 0px;
    }

    .horizontal_01 {
        align-items: center;
        display: flex;
        grid-column: 3 / 4;
        justify-content: flex-end;
        margin-top: -2.2em;
        transform: scale(1);
    }

    .horizontal_01 ul {
        display: flex;
        justify-content: flex-end;
    }

    .horizontal_01 li {
        margin-left: 3em;
        margin-bottom: 0;
    }

    .horizontal_01 li:hover {
        background: transparent;
    }

    .horizontal_01 a {
        opacity: 1;
        position: relative;
    }

    .horizontal_01 a:hover {
        color: white;
    }

    .horizontal_01 a::after {
        background: rgba(14, 9, 61, 0.5);
        content: '';
        height: 230%;
        left: -25%;
        position: absolute;
        top: -60%;
    -webkit-transform: scaleX(0);
        transform: scaleX(0);
    -webkit-transform-origin: left;
        transform-origin: left;
        transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
        width: 150%;
        z-index: -1;
    }

    .horizontal_01 a:hover::after {
    -webkit-transform: scaleX(1);
        transform: scaleX(1);
    -webkit-transform-origin: left ;
        transform-origin: left;
    }

}

.dropdown { 
    position: relative; 
    width: 100%; 
}
  
.dropdown li { 
    background: #ecf0f1;
    float: left; 
    width: 20ch; 
}
  
.dropdown a:hover{ 
    color: #000; 
}
  
.dropdown li a { 
    color: #34495e; 
    display: block; 
    font-weight: 300;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    z-index: 999; 
}

.dropdown li a:hover { 
    background: #3498db;
    color: #fff;
}

.drop:hover > .sub_menu {
    display:block;
}

.sub_menu {
    display: none;
}

/* ------------------------------------------------------------------------------------------------------->>>>> HEADER SECTION */

.section-header {
    margin-bottom: 5rem;
    position:fixed;
    width: 100%;
    z-index: 5;
}

.headerTitle {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    grid-template-rows: 1fr 1fr;
}

.headTitle {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.headSubTitle {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    margin-top: -0.7rem;
    margin-right: 60%;
}

@media screen and (min-width: 60rem) {
    .headTitle {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }

    .headSubTitle {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        margin-top: -0.7rem;
        margin-right: 20%;
    }
}

.section-botonera {
    display: grid;
    grid-template-columns: 1fr 54rem 1fr;
    justify-items: center;
    min-width: 380px;
    padding: 0rem 0 0.5rem 0;
    align-items: end;
    justify-content: end; 
}

.section-ant {
    border-top: 2rem solid transparent;
    border-right: 3rem solid rgb(15, 65, 11);
    border-bottom: 2rem solid transparent;
    grid-column-start: 1;
    justify-self: end;
    margin-left: 0.5rem;
    margin-top: 8rem;
    transition:all .3s ease-out;
}

.section-sig {
    border-top: 2rem solid transparent;
    border-left: 3rem solid rgb(15, 65, 11);
    border-bottom: 2rem solid transparent;
    grid-column-start: 3;
    justify-self: start;
    margin-right: 0.5rem;
    margin-top: 8rem;
    transition:all .3s ease-out;
}

.section-ant:hover {
    border-right: 3.5rem solid rgb(24, 124, 17);
}

.section-sig:hover {
    border-left: 3.5rem solid rgb(24, 124, 17);
}

@media screen and (max-width: 60rem) {
    .section-botonera {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .section-ant {
        border-top: 1.5rem solid transparent;
        border-right: 1.5rem solid rgb(15, 65, 11);
        border-bottom: 1.5rem solid transparent;
        justify-self: start;
    }
    
    .section-sig {
        border-top: 1.5rem solid transparent;
        border-left: 1.5rem solid rgb(15, 65, 11);
        border-bottom: 1.5rem solid transparent;
        justify-self: end;
    }
    
    .section-ant:hover {
        border-right: 1.5rem solid rgb(50, 230, 37);
    }
    
    .section-sig:hover {
        border-left: 1.5rem solid rgb(50, 230, 37);
    }
}

/* ------------------------------------------------------------------------------------------------------->>>>> RadioHeader */

.menu-radioButton-container {
    height: 0;
    margin: -0.5vh 0 0 -0.5vw;
    position: sticky;
    top: -0.5vh;
    z-index: 7;
}
  
@keyframes pulse-03 {
    0% {
        background-color: var(--pulse-01);
    }

    50% {
        background-color: var(--pulse-02);
    }

    100% {
        background-color: var(--pulse-01);
    }
}

.menu-radioButton-container a, a:visited {
    color: var(--link-txt);
    font-family: 'Urbanist', sans-serif;
    font-size: 1.7em;
    text-decoration:  none;
}

.menu-radioButton {
    background: var(--menu-back-global);
    display: none;
    grid-template-columns: minmax(30ch, 50ch) 1fr;
    height: 100vh;
    position: absolute;
    text-align: left;
    overflow-x: hidden;
    width: 100%;
}

.menu-radioButton-fnd-left {
    background: var(--menu-back-left);
}

.menu-radioButton-fnd-right {
    background: var(--menu-back-right);
}

.menu-radioButton ul {
    margin-top: 2em;
    list-style:none;
}

.menu-radioButton li {
    cursor: pointer;
}

.menu-radioButton li a {
    display: block;
    padding: 1em;
}

.menu-radioButton li:hover {
    background-color: var(--fondo-btn);
}

.menu-radioButton-active-01 {
    align-items: center;
    /*  animation: pulse-03 5s infinite; */
    background: var(--fondo-app);
    border: 0;
    border-left: 0;
    border-radius: 0% 0% 50% 0% / 0% 50% 50% 0%;
    box-shadow: inset 0 0 0.5rem #000000; 
    box-shadow: 0.3rem 0.3rem 0.8rem black;
    box-sizing: content-box;
    content: "";
    cursor: pointer;
    display: flex;
    font-size: 3em;
    height: 3rem;
    justify-content: center;
    padding: 0.5rem;
    width: 3.5rem;
}

.menu-mov-open,
.menu-mov-open::before,
.menu-mov-open::after {
    background: var(--menu-txt);
    border-radius: 2em;
    display:block;
    height: 0.10em;
    width: 2rem;
}

.menu-mov-open {
    position: relative;
}

.menu-mov-open::before,
.menu-mov-open::after {
    content: '';
    position:absolute;
}

.menu-mov-open::before {
    bottom: 1rem;
}

.menu-mov-open::after {
    top: 1rem;
}

.menu-mov-close,
.menu-mov-close:after {
    background: var(--menu-txt);
    border-radius: 2em;
    content: '';
    height: 2.5rem;
    width: 0.3rem;
}

.menu-mov-close {
    position: relative;
    transform: rotate(30deg);
}

.menu-mov-close:after {
    position: absolute;
    transform: rotate(-60deg);
}

.menu-radioButton-active-02 {
    cursor: pointer;
    height: 100%;
    position: absolute;
    width: 80%;
}

.menu-radioButton-show:checked ~ .menu-radioButton {
    display: grid;
    left: 0;
    margin-top: -4rem;
}

.menu-radioButton-show, 
.menu-radioButton-hide {
    display: none;
}

/* ------------------------------------------------------------------------------------------------------->>>>>  RadioHeaderList */

.rblContainer {
    margin: 0 0 0 0;
    position: sticky;
    top: 0;
    z-index: 7;
}

.rblContainer a, a:visited {
    color: var(--link-txt);
    font-family: 'Urbanist', sans-serif;
    font-size: 1.7em;
    text-decoration:  none;
}

.rbl-menu {
    background: var(--menu-back-global);
    display: none;
    grid-template-columns: minmax(30ch, 50ch) 1fr;
    height: 100vh;
    margin: 2.5rem 0 0 0;
    position: absolute;
    text-align: left;
    overflow-x: hidden;
    width: 100%;
}

.rbl_left {
    background: var(--menu-back-left);
}

.rbl_right {
    background: var(--menu-back-right);
}

.rbl_left ul {
    margin-top: 5rem;
    list-style:none;
}

.rbl_left li {
    cursor: pointer;
    margin-bottom: 0.2rem;
    width: 90%;
}

.rbl_left li:hover {
    background-color: var(--fondo-btn);
}

.rbl_left li a {
    display: grid;
    grid-template-columns: 5rem 1fr;
    padding: 0.2em;
}

.rbl_left li a img {
    grid-column: 1;
    height: 5rem;
    width: 5rem;
}

.rbl_left li a p {
    align-self: center;
    grid-column: 2;
    margin-left: 0.5rem;
}

.rblActive-01 {
    align-items: center;
    background: var(--fondo-app);
    border: 0;
    border-left: 0;
    border-radius: 0% 0% 40% 40% / 0% 0% 40% 40%;
    box-shadow: inset 0 0 0.5rem #000000; 
    box-shadow: 0.3rem 0.3rem 0.8rem black;
    box-sizing: content-box;
    content: "";
    cursor: pointer;
    display: flex;
    float: right; 
    font-size: 3em; 
    height: 2rem;
    justify-content: center;
    margin: 0 0.5rem 0 0;
    padding: 0.5rem;
    width: 1.5rem;
}

.rbl-open,
.rbl-open::after {
    background: var(--menu-txt);
    border-radius: 2em;
    content: '';
    display:block;
    height: 0.10em;
    width: 1.3rem;
}

.rbl-open {
    position: relative;
    transform: rotate(0deg);
}

.rbl-open::after {
    position: absolute;
    transform: rotate(-70deg);
}

.rbl-close,
.rbl-close:after {
    background: red;
    border-radius: 2em;
    content: '';
    height: 1.5rem;
    width: 0.3rem;
}

.rbl-close {
    float:right;
    position: relative;
    transform: rotate(30deg);
}

.rbl-close:after {
    position: absolute;
    transform: rotate(-60deg);
}

.rblActive-02 {
    cursor: pointer;
    height: 100%;
    position: absolute;
    width: 100%;
}

.rbl-show:checked ~ .rbl-menu {
    display: grid;
    left: 0;
    margin-top: 0rem;
}

.rbl-show, 
.rblHide {
    display: none;
}

/* ------------------------------------------------------------------------------------------------------->>>>>  footer */

.footerEww {
    background: white;
    column-count:3;
    column-width: 50ch;
    padding-top:5em;
    padding-bottom:5em;
    text-align: center;
}

.footerEww > a {
    text-decoration: none;
}

.footer-txt-01 {
    color: black;
    font-size: 1.2rem;
    line-height: 200%;
    padding: 0vw 2vw 0vw 2vw;
}

.footer-txt-01:hover {
    animation: color-trans 250ms forwards;
    color: white;
    cursor:pointer;
    text-decoration: none;
}

@keyframes color-trans {
    0% {
        color: black;
     }

    100% {
        color: white;
    }
}

.footer-button {
    cursor: pointer;
    border: 0;
    background: white;
    color: black;
    position: relative;
    z-index: 1;
}
  
.footer-button::after {
    background: rgba(0, 0, 0, 0.5);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
-webkit-transform: scaleX(0);
    transform: scaleX(0);
-webkit-transform-origin: right;
    transform-origin: right;
    transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
    width: 100%;
    z-index: -1;
}
  
.footer-button:hover::after {
-webkit-transform: scaleX(1);
    transform: scaleX(1);
-webkit-transform-origin: left;
    transform-origin: left;
}

/* ------------------------------------------------------------------------------------------------------->>>>>  COOKIES */

.Cooktxt {
    background: var(--black_60);
    bottom: 0;
    display: flex;
    font-size: 1.1em;
    height: auto; 
    margin-bottom:0;
    padding-bottom: 3rem;
    padding-top: 3rem;
    position:sticky;
    text-align: center;
    width: 100%;
    z-index: 20;
}

.Cooktxt p {
    color: white;
    line-height: 1.5rem;
}

.Cooktxt ul {
    color: var(--green_02_100);
}

.Cooktxt ul li {
    display: inline;
    cursor:pointer;
    margin-left: 2rem;
    margin-top: 1.5rem;
}

.Cooktxt ul li:hover {
    color: white;
    text-decoration: none;
}

@media screen and (max-width: 100rem) {
    .Cooktxt {
        flex-direction: column;
    }
    .Cooktxt ul li {
        display: flex;
        margin-left: 0rem;
        text-align: center !important;
    }
}

/*--------------------------------------------------------- sombras */

.box-shadow_01 {
    -webkit-box-shadow: 0 0 1em 1em var(--black_60);
    box-shadow: 0 0 1em 1em var(--black_60);
}

.filter-shadow_01 {
    filter: drop-shadow(5px 5px 2px var(--black_100));
}

.shadow_white {
    filter: drop-shadow(1px 1px 0.8px white);
}

.shadow_white_02 {
    filter: drop-shadow(3px 3px 1px white);
}

/* ------------------------------------------------------------------------------------------------------->>>>> CARD 10 */

.c10 {
    box-shadow: 0.2rem 0.2rem 0.2rem 0.2rem var(--card-02-shadow);
    cursor: pointer;
    filter: drop-shadow(5px 5px 5px rgba(22, 21, 21, 0.75));
    height: var(--c10-height);
    position: relative;
    width: var(--c10-width);
}

.c10::before {
 /*   background-image: url("../../img/new1.webp"); */
    background-size: 25% 25%;
    content: '';
    height: var(--c10-img-h);
    position: absolute;
    transition-property: background-size;
    transition-duration: 0.5s, 1s;
    width: var(--c10-img-w);
}

.c10-txt {
    background: var(--c10-color-fnd1); 
    color:  var(--c10-color-txt1);
    height: var(--c10-txt-h);
    margin-left: var(--c10-img-w);
    overflow: hidden;
    position: absolute;
    transition-property: background-color, color; 
    transition-duration: 0.5s, 1s;
    width: var(--c10-txt-w);
}

.back_news { 
    background: var(--sec_news); 
}

.back_action {
    background: var(--sec_action); 
}

.back_asoc {
    background: var(--sec_asoc); 
}

.c10-txt h3 {
    font-size: 1.3em;
    font-weight: bold;
    margin: 2rem 0.3rem 1rem 1rem;
    text-align: left;
}

.c10-txt p {
    font-size: 1em;
    margin: 0 0.5rem 0.5rem 1rem;
    text-align: left;
}

.c10:hover::before {
    background-size: 120% 120%;
}

.c10:hover > .c10-txt{
    background: var(--c10-color-fnd2);
    color:  var(--c10-color-txt2);
}

/* ------------------------------------------------------------------------------------------------------->>>>> INDEX ORIGEN */

#userNew {
    animation: fadeIn  1s;
    display: none;
    padding-bottom: 3rem;
    padding-top: 3rem;
}

#userNewFromAdmin {
    animation: fadeIn  1s;
    padding-bottom: 3rem;
    padding-top: 3rem;
}

#userLogin {
    animation: fadeIn  1s;
    display: block;
    padding-bottom: 3rem;
    padding-top: 3rem;
}

#userMod {
    animation: fadeIn  1s;
    display: block;
    margin-top: 3rem;
    padding-bottom: 3rem;
}

#userModForm {
    animation: fadeIn  1s;
    display: block;
    padding-bottom: 3rem;
    padding-top: 3rem;
}

#cartelGen, #cartelDel, #cartelBaja, #imgNecesaria {
    text-align: center;
    animation: fadeIn  1s;
    background:rgb(206, 206, 233);
    display: block;
    height: 4.5rem;
    left: 15vw;
    top: 10%;
    padding-top: 3rem;
    position: fixed;
    width: 70vw;
    z-index:10;
}

#cartelDel, #cartelBaja, #imgNecesaria {
    display: none;
}

@media screen and (min-width: 50rem) {
    #cartelGen, #cartelDel, #cartelBaja, #imgNecesaria {
        left: 40vw;
        width: 20vw;
    }
}

/* ------------------------------------------------------------------------------------------------------->>>>>  Admin */

.menuAdmin {
    height: 3rem;
    margin-bottom: 2rem;
    margin-top: 7rem;
    position: relative;
    z-index: 6;
}

.menuAdmin ul {
    background: deepskyblue;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}
  
.menuAdmin ul li {
    color: #fff;
    background: rgb(34, 56, 34);
    float: left;
    padding: 1rem;
    position: relative;
    transition-duration: 0.5s;
}
  
.menuAdmin ul li a {
    color: #fff;
}
  
.menuAdmin ul li:hover {
    background: rgb(13, 10, 61);
    cursor: pointer;
}
  
.menuAdmin ul li ul {
    visibility: hidden;
    opacity: 0;
    min-width: 5rem;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    display: none;
}
  
.menuAdmin ul li:hover > ul,
.menuAdmin ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
}
  
.menuAdmin ul li ul li {
    clear: both;
    width: 100%;
}

/*--------------------------------------------------------- Admin TXT intro */

.newsDatos {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-top: 10rem;
}

.newsInfo {
    grid-column-start: 2;
    grid-column-end: 3;
}

.newsForm {
    grid-column-start: 3;
    grid-column-end: 4;
}

.newsMenu {
    grid-column-start: 4;
    grid-column-end: 5;
}

.newsMenu ul li {
    border: 3px solid grey;
    border-radius:50px;
    border-style: ridge;
    color: black;
    cursor: pointer;
    font-size: 1rem;
    padding: 1em;
    text-align:center;
    width: 9rem !important;

    float: left;
    margin-bottom: 2rem;
    padding: 1rem;
    position: relative;
}

.newsMenu ul li:hover {
    color: white;
    filter: drop-shadow(0px 0px 0.5px var(--black_100));
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px);
}


/* ----------las dimensiones final div son asignadas en la llamada al php insertar img------------------ */
#imgOrigenDiv {
    background-color:grey;
    position: relative;
}

/* ----------las dimensiones final div son asignadas en la llamada al php insertar img------------------ */
#imgFinalDiv {
    background-color:#00f;
    position: relative;
}

#canvas1, #canvas2 {
    position: absolute;
    z-index: 2;
}
 
#imgOrigen, #imgFinal {
    display:block;
    background-color:transparent;
    pointer-events: none;
    position: absolute;
}

/*---------------------------------------------------------  zona admin generico */

.admin-gen {
    background:  var(--titular-back);
    margin-bottom: 5rem;
    margin: 0 auto;
    max-width: 50rem;
    padding: 3rem 3rem 5rem 3rem;
}
  
.admin-gen h2 {
    font-size: 1.7em;
    margin-bottom: 1.2rem;
}

.admin-gen h3 {
    font-size: 1.1em;
    margin-bottom: 1.2rem;
    text-align: left;
}

.admin-gen p {
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5 ;
    margin-top: 1em ;
    margin-bottom: -3em ;
    padding: 1rem 1rem 3rem 1rem;
    text-align: justify;
    text-indent: 22px ;
}

.admin-gen img {
    width: 100%;
}

.admin-gen figcaption{
    font-size: 0.9em;
}

@media screen and (min-width: 50rem) {
    .admin-gen h2 {
        font-size: 2.2em;
    }

    .admin-gen h3 {
        font-size: 1.5em;
    }

    .admin-gen p {
        font-size: 1.2em;
    }
}

.btn_friPoc {
    color: white !important;
    font-weight: bold;
    height: 1em;
    width: 3em;
}