:root {
    --color-azulClaro: #0066A4;
    --color-azulOscuro: #000F18;
    --color-azulFondo: #001725;
    --confirm-color: white;
}

/*css reset file*/

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;
}

/*CSS formulario*/

.header {
    width: 100%;
    background-color: #001725;
    display: flex;
}

.header_img{
    width:100%;
}

.main{
    width:100%;
    height:auto;
    box-sizing: border-box;
    background-color: var(--color-azulFondo);
    display: flex;
    flex-direction: column;
}

.main_title {
    color: white;
    margin: 0;
    padding: 2rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display:flex;
    justify-content:center;
    text-align:center;
    font-size: 1.5rem;
}

.link_participa {
    text-decoration: none;
    color: white;
    width: 25%;
    background-color: var(--color-azulClaro);
    padding: 0.8rem 3rem 0.8rem 3rem;
    border-radius: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0 auto 2rem auto;
    display: flex;
    justify-content: center;
    letter-spacing: 0.6px;
   
}


.section1 {
    height: auto;
    background-color: var(--color-azulFondo);
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    gap:10px;
    width:100%;
    margin-bottom:40px;
}

.cashback_img1,
.cashback_img2,
.cashback_img3 {
    width: 30%; /* tamaño en desktop/fila */
    max-width: 100%;
    transition: all 0.3s ease;
}

/* --- Zigzag SOLO hasta 768px --- */
@media (max-width: 768px) {
    .section1 {
        flex-direction: column;
        align-items: flex-end; 
    }

    .cashback_img1,
    .cashback_img2,
    .cashback_img3 {
        width: 65%;
        margin-right: 20px;
    }

    .cashback_img2 {
        align-self: flex-start;
        margin-left: 20px;
    }

    .cashback_img1,
    .cashback_img3 {
        align-self: flex-end; 
        margin-right: 20px;
    }
}

.formBlock{
    display:flex;
    flex-direction:column;
}

.formImg {
    width: 100%;
}


.section2 {
    background-color: var(--color-azulOscuro);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Verdana;
    margin: auto;
 
}


.section2_formBoxes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    padding-bottom:3rem;
}

.section2_formBox {
  display:flex;
  gap:0.4rem;
  flex-direction:column;
  width:90%;
  align-items:left;
  margin-top:2rem;
}

/*#establecimiento  {
    color: gray;
}

#provincia {
    color: gray;
}

#fechaNacimiento {
    color:grey;
}*/
input::placeholder{
    color:white;
}
.section2_formBox--title {
    font-size: 2rem;
    color: --color-azulFondo;
    margin-bottom: 1.2rem;
    font-weight: 500;
    align-self: self-start;
}

.section2_formBox--label {
    line-height: 1.2rem;
    color: white;
    font-size: 1rem;
    letter-spacing: 0.08rem;
    font-weight: 700;
    align-self: flex-start;
    margin-top: 1rem;
    display: flex;
}

.section2_formBox--labelImg {
    color: var(--color-azulFondo);
    font-size: 1rem;
    letter-spacing: 0.08rem;
    font-weight: 700;
    align-self: flex-start;
    display: flex;
}

.section2_formBox--input {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    align-self: flex-start;
    border: 1px solid white;
    border-radius: 25px;
    background-color: var(--color-azulOscuro);
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


/*.tooltip {
    display: none;
    position: absolute;
    left: 0;
    max-width: 250px;
    color: darkgrey;
    background-color: #fff;
    font-family:Verdana;
    z-index: 100;
    top: 0;
    margin-left: 10px;
    font-size: 13px;
    width: max-content;
     padding: 20px;
     border: 2px solid darkgrey;
     font-weight: 500;
}*/
.tooltip_red {
    line-height: 1.5rem;
    display: none;
    position: absolute;
    left: 0;
    max-width: 250px;
    color: red;
    background-color: #fff;
    font-family: Verdana;
    z-index: 100;
    top: 0;
    margin-left: 10px;
    font-size: 13px;
    width: max-content;
    padding: 20px;
    border: 2px solid red;
    font-weight: 500;
}
.tooltip_pink {
    display: none;
    position: absolute;
    left: 0;
    max-width: 250px;
    color: var(--color-azulFondo);
    background-color: #fff;
    font-family: Verdana;
    z-index: 100;
    top: 0;
    margin-left: 10px;
    font-size: 13px;
    width: max-content;
    padding: 20px;
    border: 2px solid #013e62;
    font-weight: 500;
    line-height: 1.5rem;
}

.section2_formBox--tooltipBlock{
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    gap:10px;
}

.section2_formBox--span {
    text-decoration: underline;
}

.fileName {
    color: lightslategrey;
    width: 100%;
}


i {
    cursor: pointer;
    position: relative;
    display: flex;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    border: 1px solid #013e62;
    background-color: var(--confirm-color);
    
    color: var(--color-azulOscuro);
    justify-content: center;
    align-items: center;
    font-family: 'Lucida Sans';
    font-size: 0.9rem;
    align-self: flex-start;
    margin-top: 1.5rem;
    margin-right: 1.5rem;
}
/*
    i:hover .tooltip {
        display: block;
    }*/
    i:hover .tooltip_red {
        display: block;
    }
    i:hover .tooltip_pink {
        display: block;
    }

.selectFile {
    border-radius: 25px;
    background-color: white;
    color: var(--color-azulOscuro);
    padding: 10px 40px;
    display: flex;
    cursor: pointer;
   
}
  /*  .selectFile:hover {
        border: 2px solid var(--color-azulFondo);
        background-color: white;
        color: var(--color-azulFondo);
    }*/

.trash-group {
    display: flex;
    flex-direction: row;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
    background-color: var(--color-azulOscuro);
}

.icon-btn {
    --size: 35px;
    align-self: center;
    height: var(--size);
    background: transparent;
    border: none;
    cursor: pointer;
    color:var(--confirm-color);
    & svg *

{
    fill: var(--confirm-color);
    stroke: var(--confirm-color);
}

}

@media (prefers-reduced-motion: no-preference) {
    #delete-btn-ean, #delete-btn-ticket {
        --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
        --duration: 0.5s;
        --shake1: calc(var(--size) / 256);
        --shake2: calc(2 * var(--shake1));
        --shake3: calc(3 * var(--shake1));
        --shake-1: calc(-1 * var(--shake1));
        --shake-2: calc(-2 * var(--shake1));
        --shake-3: calc(-3 * var(--shake1));
        & svg

{
    overflow: visible;
    & *

{
    transition: fill 0.1s ease, stroke 0.1s ease;
}

}

& #cross, & #normal {
    display: none;
}

& #transition {
    stroke-dasharray: 11.35px 100;
    stroke-dashoffset: -120.5%;
}

& #cap {
    transition: translate 0.1s ease, rotate 0.1s ease;
}

&:hover {
    &:not(.confirm) #cap

{
    translate: 2px -5px;
    rotate: 10deg;
}

}

&.confirm {
    & svg *

{
    fill: var(--confirm-color);
    stroke: var(--confirm-color);
}

& #transition {
    animation: transition var(--duration) var(--easeInOutCubic) forwards;
}

& #cap {
    animation: cap-convert var(--duration) var(--easeInOutCubic);
}

& #body {
    animation: body-convert var(--duration) var(--easeInOutCubic);
}

& svg:hover {
    animation: shake 0.5s linear infinite;
}

}

@keyframes transition {
    0% {
        stroke-dashoffset: -120.5%;
    }

    100% {
        stroke-dashoffset: 0%;
    }
}

@keyframes cap-convert {
    0% {
        translate: 2px -5px;
        rotate: 10deg;
    }

    30%, 70% {
        translate: 12px -17px;
        rotate: 30deg;
    }

    100% {
        translate: 0 0;
        rotate: 0;
    }
}

@keyframes body-convert {
    0%, 100% {
        translate: 0 0;
    }

    50%, 80% {
        translate: 0 4px;
    }
}

@keyframes shake {
    0% {
        transform: translate(var(--shake1), var(--shake1)) rotate(0deg);
    }

    10% {
        transform: translate(var(--shake-1), var(--shake-2)) rotate(-1deg);
    }

    20% {
        transform: translate(var(--shake-3), 0px) rotate(1deg);
    }

    30% {
        transform: translate(var(--shake3), var(--shake2)) rotate(0deg);
    }

    40% {
        transform: translate(var(--shake1), var(--shake-1)) rotate(1deg);
    }

    50% {
        transform: translate(var(--shake-1), var(--shake2)) rotate(-1deg);
    }

    60% {
        transform: translate(var(--shake-3), var(--shake1)) rotate(0deg);
    }

    70% {
        transform: translate(var(--shake3), var(--shake1)) rotate(-1deg);
    }

    80% {
        transform: translate(var(--shake-1), var(--shake-1)) rotate(1deg);
    }

    90% {
        transform: translate(var(--shake1), var(--shake2)) rotate(0deg);
    }

    100% {
        transform: translate(var(--shake1), var(--shake-2)) rotate(-1deg);
    }
}

}
}

@media (prefers-reduced-motion: reduce) {
    #delete-btn-ean, #delete-btn-ticket {
        & #transition, & #cross

{
    display: none;
}

&.confirm {
    & svg *

{
    fill: var(--confirm-color);
    stroke: var(--confirm-color);
}

& #cross {
    display: block;
}

& #normal {
    display: none;
}

}
}
}

#delete-btn-ean:hover:not(.confirm) svg * {
    fill: var(--confirm-color);
    stroke: var(--confirm-color);
}

#delete-btn-ticket:hover:not(.confirm) svg * {
    fill: var(--confirm-color);
    stroke: var(--confirm-color);
}


.bbll {
    width: 100%;
    /*padding: 20px;*/
    display: flex;
    flex-direction: column;
    color: white;
    margin-top: 1rem;
}
.checkboxContainerECI {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 0.5rem;
    color: var(--confirm-color);
}

.checkboxContainer a {
    color: red;
}
.checkboxContainer_label {
    color: var(--confirm-color);
}


.checkboxContainerECI input {
    margin-rigth: 10px;
    margin-top: 2px;
    color: var(--confirm-color);
}
    .checkboxContainerECI label {
        font-size: 1rem;
        color: var(--confirm-color);
    }
        .checkboxContainerECI label a {
            color: var(--confirm-color);
            text-decoration: underline;
        }

.checkboxContainerOTRO {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 0.5rem;
    color: var(--confirm-color);
}

    .checkboxContainerOTRO input {
        margin-rigth: 10px;
        margin-top: 2px;
        color: var(--confirm-color);
    }

    .checkboxContainerOTRO label {
        font-size: 1rem;
        color: var(--confirm-color);
    }

        .checkboxContainerOTRO label a {
            text-decoration: underline;
            color: var(--confirm-color);
        }



.btn_register {
    border-radius: 25px;
    width: 100%;
    background-color: var(--color-azulClaro);
    color: white;
    padding: 15px 10px;
    border: 2px solid var(--color-azulClaro);
    cursor: pointer;
    margin-top: 2rem;
}
    .btn_register:hover {
        border: 2px solid #013e62;
        background-color: white;
        color: var(--color-azulFondo);
    }
    .fieldsInfo{
        color:dimgrey;
        padding-top:12px;
        font-size:0.8rem;
        margin-left:1rem;
    }

.footer {
    background-color: var(--color-azulFondo);
    font-family: Verdana;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
  
    .footer_logo{
        margin-top:3rem;
      
        width:6rem;
    }
.footer a {
    text-decoration: none;
    color: white;
}

.socialMedia{
    width:2rem;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:0.5rem;
    margin-bottom:3rem;
    justify-content:center;
}



.socialMedia svg{
    height:1.5rem
}


@media (min-width: 768px) {
    .main_title{
        font-size:3rem;
    }
    .link_participa {
        width: 16%;
        padding: 1rem 3rem 1rem 3rem;
        font-size: 1.2rem;
    }
    .btn_register {
        width: 50%;
    }
}
@media (min-width: 1024px){
    .link_participa {
        font-size: 1.5rem;
    }
    .formImg {
        content: url("https://files.pdm.es/Images/Philips/Blackfriday&Navidad2025/form_imgDesktop.png");
        width: 30%;
        height: 100%;
        object-fit: contain;
     
        
    }
  
    .formBlock {
        /*display: grid;
        grid-template-columns: 1fr 2fr;*/
        align-items: self-start;
        width: 100%;
        display:flex;
        flex-direction:row;
        min-height: 300px;
        background-color: var(--color-azulOscuro);
        max-width: 1400x;
    }
    .section1_title {
        display:block;
        max-width: 750px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 3.2rem;
        align-items: flex-start;
        color: white;
        margin-left:-14rem;
    }
    .section1_steps {
        max-width: 1024px;
    
    }

    .section1_stepsGroup{
        width: 65%;
        margin-left:1rem;
    }

    .section1_steps--textBlock {
        text-align:left;
    }
    .section1_cashback__blockTitle {
        display:none;
       /* justify-content: left;
        margin-left: 8rem;
        max-width: 1024px;
        align-items: baseline;*/
    }
    .section1_cashback {
        justify-content: left;
        
        align-items: baseline;

    }
    .section1_cashback--table {
        max-width: 600px;
    }
    .section1_text {
        justify-content: left;
        margin-left: -16rem;
        max-width: 750px;
        text-align: left;
        margin-bottom: 3rem;
    }
    .section2 {
        display: flex;
      width:auto;
        padding: 0 20px;
        margin: auto;
    
    }
    .section2_formBoxes {
     
        margin-left:1rem;
  
        margin-bottom:5rem;
    }

    .section1_img{
        margin-right:5rem;
        display:flex;
        width: 33%;  
        position:absolute;
        right:0;
        transform: translate(18px, -79px);
    }
}

/*@media (min-width: 1440px) {
    .header{
        height:130vh;
    }
}*/