/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

body {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
    background-color: #ededed !important;
}

.center { text-align: center !important; }

.bkgcontain { background-size: contain !important; }

.container { max-width: 1920px !important; }
.padd0 { padding: 0 !important; } .padd3 { padding: 3% !important; } .padd5 { padding: 5% !important; } .padd8 { padding: 8% !important; }
.marg0 { margin: 0 !important; }

input, textarea, select {
    background-color: #ededed !important;
    font-weight: 500 !important;
    color: black !important;
    padding: 5px 15px !important;
    border-radius: 30px !Important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
label {
    padding-left: 15px !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.fcblack { color: black !important; } .fcwhite { color: white !important; }

.fs120 { font-size: 120px !important; } .fs90 { font-size: 90px !important; } .fs75 { font-size: 75px !important; } .fs60 { font-size: 60px !important; } .fs48 { font-size: 48px !important; } .fs45 { font-size: 45px !important; } .fs42 { font-size: 42px !important; } .fs39 { font-size: 39px !important; } .fs36 { font-size: 36px !important; } .fs30 { font-size: 30px !important; } .fs27 { font-size: 27px !important; } .fs24 { font-size: 24px !important; } .fs21 { font-size: 21px !important; } .fs18 { font-size: 18px !important; } .fs15 { font-size: 15px !important; }  .fs12 { font-size: 12px !important; }

.fw900 { font-weight: 900 !important; } .fw800 { font-weight: 800 !important; } .fw700 { font-weight: 700 !important; } .fw600 { font-weight: 600 !important; } .fw500 { font-weight: 500 !important; } .fw400 { font-weight: 400 !important; } .fw300 { font-weight: 300 !important; } .fw200 { font-weight: 200 !important; } .fw100 { font-weight: 100 !important; }

.lsp1 { letter-spacing: 1px !important; } .lsp2 { letter-spacing: 2px !important; }

.toupper { text-transform: uppercase !important; } .tolower { text-transform: lowercase!important; } .tocapitalize { text-transform: capitalize !important; }

.lh100 { line-height: 100% !important; }
.lh110 { line-height: 110% !important; }
.lh125 { line-height: 125% !important; }
.lh150 { line-height: 150% !important; }

.dview { display: block !important; }
.mview { display: none !important; }

.dviewcomics { max-height: 80vh !important; display: flex !important; justify-content: space-around !important; flex-wrap: nowrap !important; }
.mviewcomics { display: none !important; }

/* Form Styles */
.border30form {
    padding: 25px 35px;
    background-color: white;
    border-radius: 30px 0 0 30px;
}

/* Form title restyle */
.form-main-title {
    font-family: inherit; /* Inherit from body for consistency with labels */
    font-size: 27px;
    font-weight: 500;
    color: black;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: left; /* Ensure left alignment on all screens */
    letter-spacing: normal;
    text-transform: none;
}


#submit-ebook-button {
    padding: 12px 25px !important;
    transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
}

#submit-ebook-button:hover {
    transform: scale(1.02);
    filter: brightness(95%);
}


/* Desktop styles for .centermovdisp */
.centermovdisp {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items, good for when they wrap or are on one line */
    align-items: center;
    gap: 15px; /* Spacing between items */
    width: 100%;
}

.centermovdisp .cf-turnstile {
    min-width: 280px; /* Typical minimum width for Turnstile */
    flex-shrink: 1;   /* Allow Turnstile to shrink if container is very tight */
                      /* Its max-width is handled by Cloudflare's script */
}

.centermovdisp #submit-ebook-button {
    width: auto; /* Let content and padding define width initially */
    min-width: 350px; /* Ensure button is wide enough for text "Descargar E-Book Gratis" at 27px font */
    max-width: 400px; /* Preferred maximum width */
    flex-shrink: 1;   /* Allow button to shrink if needed */
    flex-grow: 0;     /* Do not let it grow disproportionately if Turnstile is small */
    text-align: center;
}


.text-red-highlight {
    color: #e30613 !important;
    font-weight: bold;
}


/* WhatsApp Button Styles */
#whatsapp-fijo-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background-color: #73f793;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    text-decoration: none !important;
}

#whatsapp-fijo-button:hover {
    transform: scale(1.1);
}

#whatsapp-fijo-button img {
    width: 45px;
    height: auto;
}

/* Error Tooltip Styles */
.input-error {
    border-color: #e30613 !important;
}
.error-tooltip {
    display: none;
    position: absolute;
    background-color: #e30613;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    z-index: 10;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.error-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #e30613 transparent transparent transparent;
}

/* Gracias Page E-book Download Links */
.download-trigger-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

a.download-ebook-link {
    display: inline-block;
    padding: 0;
    text-decoration: none;
    text-align: center;
}

a.download-ebook-link:focus,
a.download-ebook-link:active {
    outline: none; /* Remove browser default outline */
}

.download-ebook-image {
    width: 30%; /* Responsive width */
    max-width: 500px; /* Max cap for width */
    height: auto;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.download-ebook-text {
    color: black !important;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 0;
    text-decoration: none;
    text-shadow: none;
    transition: text-decoration 0.2s ease-in-out, text-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
}

a.download-ebook-link:hover .download-ebook-image {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

a.download-ebook-link:hover .download-ebook-text {
    color: #e30613 !important;
    text-decoration: underline;
    text-shadow: none !important;
}


@media (max-width: 1380px){
    #comic, #comic2, #comic3{ width: 950px !important; height: 760px !important; }
}
@media (max-width: 1060px){
    #comic, #comic2, #comic3{ width: 800px !important; height: 640px !important; }
}

@media (max-width: 1200px){
    .fs75 { font-size: 60px !important;}
    .fs45 { font-size: 36px !important;} /* Utility class for Innovacion CTA on mobile */
    .fs42 { font-size: 30px !important;}
    .fs36 { font-size: 30px !important;}
    /* .download-ebook-image { width: 220px; } */ /* Removed fixed width */
    .download-ebook-text { font-size: 22px; }

     .form-main-title {
        /* font-size: 24px; /* Example for tablet if needed */
    }
}

@media (max-width: 1200px) { /* Tablet and smaller */
    .dview { display: none !important; }
    .mview { display: block !important; }
    .mview.center { display: flex !important; }


    .border30form {
        padding: 25px 30px;
        border-radius: 30px !important;
        margin: 0 5%;
    }

    /* Mobile styles for .centermovdisp - these switch to column and center items */
    .centermovdisp {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }
    .centermovdisp .cf-turnstile {
        order: 2;
        max-width: 100%; /* Ensure turnstile fits mobile screen */
    }
    .centermovdisp #submit-ebook-button {
        order: 1;
        width: 400px;
        min-width: auto;
        max-width: 100%;
        flex-grow: 0;
        flex-shrink: 1;
    }

    /* Mobile CTA "Innovación" button */
    .mview.center > div { /* This is the red button background */
        padding-top: 21px;
        padding-bottom: 21px;
        padding-left: clamp(20px, 5vw, 45px); /* Responsive horizontal padding */
        padding-right: clamp(20px, 5vw, 45px);
        max-width: 90%; /* Prevent it from being too wide if parent's padding is small */
        margin-left: auto; /* Center it if max-width takes effect */
        margin-right: auto;
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }

    .mview.center > div > a { /* This is the link containing the text for mobile CTA */
        display: block; /* Make it block to allow text-align and control width if needed */
        text-align: center;
        white-space: normal; /* Allow text to wrap */
        word-wrap: break-word; /* Help break long words if any */
    }

     .form-main-title {
        text-align: center; /* Center form title on mobile */
    }
}

@media (max-width: 996px){
    #comic, #comic2, #comic3{ width: 675px !important; height: 540px !important; }
    .fs75 { font-size: 51px !important;}
    .fs42 { font-size: 27px !important;}
    .fs36 { font-size: 24px !important;}
    .fs18 { font-size: 15px !important;}
    input, textarea, select { font-size: 18px !important; } /* General form input text */
    label { font-size: 18px !important; } /* General form label text */
    .paddredbar { padding: 5% 7% 6% !important; }

    .form-main-title {
      /* font-size: 20px; /* Example if further reduction needed on smaller tablets */
    }

    /* Mobile Innovation CTA fs45 */
    .mview.center > div > a.fs45 {
        font-size: 30px !important; /* Override utility for this specific element */
    }
}

@media (max-width: 767px){ /* Mobile specific */
    .border30form {
        margin: 5% !important;
        padding: 25px 20px;
    }

    .centermov { text-align: center !important; } /* centermov utility for general use */
     .form-main-title { /* Keep form title centered on small mobile too */
        text-align: center;
    }

    .fs75 { font-size: 45px !important;}
    .fs36 { font-size: 20px !important;}
    .fs30 { font-size: 17px !important;}
    .fs27 { font-size: 16px !important;} /* General form labels/inputs will use this */
    .fs18 { font-size: 15px !important;}
    input, textarea, select { font-size: 16px !important; } /* Form input text on mobile */
    label { font-size: 16px !important; } /* Form label text on mobile */

    .posrelmov { position: relative !important; text-align: center !important; margin: 0 !important; }

    .imgtop { height: 80px !important;}
    .hgtop { height: 80px !important; }
    .poscontacto { top: 22px !important; }
    .paddcontacto { padding: 7px 12px 8px 6px !important; }
    .padimgth { padding: 5% !important; }
    .sizeicons { width: 75px !important; }
    /* .download-ebook-image { width: 180px; } */ /* Removed fixed width */
    .download-ebook-text { font-size: 18px; }

    .form-main-title {
        font-size: 22px; /* Adjust if 27px is too large on small mobile */
    }

    /* Mobile Innovation CTA fs45 */
    .mview.center > div > a.fs45 {
        font-size: 24px !important; /* Smaller for mobile phones */
    }
}

@media (max-width: 580px){
	.dviewcomics { display: none !important; }
	.mviewcomics { display: block !important; }
    .fs75 { font-size: 36px !important;}
    .fs36 { font-size: 20px !important;}
    .fs30 { font-size: 17px !important;}
    .imgtop { height: 60px !important;}
    .poscontacto { top: 15px !important; }
    .paddcontacto { padding: 9px 9px 9px 5px !important; }
    .form-group { padding: 0 !important; }
    .border30form { padding: 5% !important; }
    .sizeicons { width: 60px !important; }

     /* Mobile Innovation CTA fs45 */
    .mview.center > div > a.fs45 {
        font-size: 20px !important; /* Further adjustment for very small screens */
    }
}

@media (max-width: 480px){
    .fs75 { font-size: 33px !important;}
    .imgtop { height: 48px !important;}
    .poscontacto { top: 11px !important; }
    .paddcontacto { padding: 9px 9px 9px 5px !important; }
    .sizeicons { width: 45px !important; }
    /* .download-ebook-image { width: 150px; } */ /* Removed fixed width */
    .download-ebook-text { font-size: 16px; }

    /* Mobile Innovation CTA fs45 */
    .mview.center > div > a.fs45 {
        font-size: 18px !important; /* Final adjustment for smallest screens */
    }
}

/* Social Icon Hover for Gracias Page */
.social-icon-img-hoverable {
  filter: grayscale(100%) opacity(0.7);
  transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

a:hover .social-icon-img-hoverable {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.1);
}