/*
Theme Name:   MDZ
Description:  Block theme para MDZ - Landing Sorteo Mundial
Author:       Ingenima
Version:      1.1.6
Text Domain:  mdz
*/

:root {
    --celeste: #01a7e1;
    --azul: #0b1c33;
    --dorado: #e9c349;
    --dorado-hover: #d4aa35;
    --gris: #f2f2f2;
    --gris-input: #dcdedf;
    --celeste-claro: #97ccfe;
    --blanco: #ffffff;

    /* Layout */
    --container-max: 1440px;
    --container-inner: 1320px;

    /* Transitions */
    --transition-base: 0.2s ease;

    /* Fonts */
    --ffamily: 'Inter', sans-serif;
    --fsize: 1rem;
    --fsize--1: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);    /* 12–14px · letra chica */
    --fsize-0:  clamp(0.875rem, 0.8393rem + 0.1786vw, 1rem);        /* 14–16px · texto form */
    --fsize-1:  clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);        /* 16–18px · texto */
    --fsize-2:  clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem);     /* 18–20px · destacado */
    --fsize-3:  clamp(1.5rem, 1.3929rem + 0.5357vw, 1.875rem);      /* 24–30px · H3 */
    --fsize-4:  clamp(2.25rem, 2.0357rem + 1.0714vw, 3rem);         /* 36–48px · H2 */
    --fsize-5:  clamp(3rem, 2.6964rem + 1.5179vw, 4.0625rem);       /* 48–65px · numeros */
    --fsize-6:  clamp(3.5rem, 3.0714rem + 2.1429vw, 5rem);          /* 56–80px · hero */
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--azul);
}

/*
  ### Main Colors
*/

/*******
## BG Colors
*******/

.mdz-bg--celeste {
    background-color: var(--celeste, #01a7e1);
}

.mdz-bg--azul {
    background-color: var(--azul, #0b1c33);
}

.mdz-bg--dorado {
    background-color: var(--dorado, #e9c349);
}

.mdz-bg--gris {
    background-color: var(--gris, #f2f2f2);
}

.mdz-bg--blanco {
    background-color: var(--blanco, #ffffff);
}

/*******
## Text Colors
*******/

.mdz--celeste {
    color: var(--celeste, #01a7e1) !important;
}

.mdz--azul {
    color: var(--azul, #0b1c33) !important;
}

.mdz--dorado {
    color: var(--dorado, #e9c349) !important;
}

.mdz--gris {
    color: var(--gris, #f2f2f2) !important;
}

.mdz--blanco {
    color: var(--blanco, #ffffff) !important;
}

/*
## Font Sizes
*/

.fsize--1 {
    font-size: var(--fsize--1);
}

.fsize-0 {
    font-size: var(--fsize-0);
}

.fsize-1,
p {
    font-size: var(--fsize-1);
}

.fsize-2 {
    font-size: var(--fsize-2);
}

.fsize-3,
h3, h4, h5, h6 {
    font-size: var(--fsize-3);
}

.fsize-4,
h2 {
    font-size: var(--fsize-4);
}

.fsize-5 {
    font-size: var(--fsize-5);
}

.fsize-6,
h1 {
    font-size: var(--fsize-6);
}

/*******
## Buttons
*******/

.mdz-btn,
.gform_button {
    font-size: var(--fsize-0, 16px) !important;
    font-family: var(--ffamily, 'Inter', sans-serif) !important;
    color: var(--azul, #0b1c33) !important;
    background-color: var(--dorado, #e9c349) !important;
    height: 43px !important;
    width: 216px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    display: inline-block !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    align-content: center !important;
    text-transform: uppercase !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    -webkit-transition: var(--transition-base) !important;
    transition: var(--transition-base) !important;
}

.mdz-btn:hover,
.gform_button:hover {
    background-color: var(--dorado-hover, #d4aa35) !important;
    color: var(--azul, #0b1c33) !important;
}

/*--------------------------------------------------------------
# Gravity Forms — mdz-form
--------------------------------------------------------------*/

/* Ocultar "* indicates required fields" */
.mdz-form .gform_required_legend,
.mdz-form .gf-required-legend {
    display: none !important;
}

/* Labels: mayúsculas, negrita */
.mdz-form .gfield_label {
    font-family: var(--ffamily) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--azul) !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 6px !important;
}

/* Inputs y select: fondo gris, sin borde */
.mdz-form input[type="text"],
.mdz-form input[type="email"],
.mdz-form input[type="tel"],
.mdz-form input[type="number"],
.mdz-form select {
    background-color: var(--gris-input, #dcdedf) !important;
    border: none !important;
    padding: 12px 16px !important;
    font-family: var(--ffamily) !important;
    font-size: 15px !important;
    color: var(--azul) !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
    height: 53px !important;
    align-items:center !important;
}

.mdz-form input[type="text"]::placeholder,
.mdz-form input[type="email"]::placeholder,
.mdz-form input[type="tel"]::placeholder,
.mdz-form input[type="number"]::placeholder {
    color: #888ea0 !important;
    font-weight: 400 !important;
}

/* Select: quitar borde y flecha nativa */
.mdz-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Grid de campos */
.mdz-form .gform_fields {
    row-gap: 16px !important;
}

/* Botón */
.mdz-form .gform_footer,
.mdz-form .gform_page_footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 8px !important;
}

@media (min-width: 640px) {
    .mdz-form .gform_footer,
    .mdz-form .gform_page_footer {
        align-items: flex-end !important;
    }
}

/* Texto debajo del botón */
.mdz-form .gform_footer::after {
    content: "La redirección a la raspadita es automática.";
    display: block !important;
    font-family: var(--ffamily) !important;
    font-size: 13px !important;
    font-style: italic !important;
    color: #555 !important;
    margin-top: 8px !important;
}

/*--------------------------------------------------------------
# Layout Helpers
--------------------------------------------------------------*/

.mdz-sorteo-gradient {
    background: linear-gradient(180deg, #01a7e1 0%, #ffffff 100%);
}

.mdz-wysiwyg p {
    margin-bottom: 1em;
}

.mdz-wysiwyg p:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Scroll Animations
--------------------------------------------------------------*/

.mdz-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.mdz-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*--------------------------------------------------------------
# Hero Animations (stagger on page load)
--------------------------------------------------------------*/

@keyframes mdz-hero-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mdz-hero-el {
    opacity: 0;
    animation: mdz-hero-fadein 0.9s ease-out forwards;
}

.mdz-hero-el--1 { animation-delay: 0.15s; }
.mdz-hero-el--2 { animation-delay: 0.45s; }
.mdz-hero-el--3 { animation-delay: 0.7s;  }
.mdz-hero-el--4 { animation-delay: 0.95s; }

/*--------------------------------------------------------------
# WordPress Core Resets
--------------------------------------------------------------*/

.wp-site-blocks {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.editor-styles-wrapper {
    padding: 0 !important;
}

/* Remove default spacing between blocks */
.wp-block-group > * + * {
    margin-top: 0;
}

/* Quitar padding lateral que agrega el block theme en .has-global-padding */
.has-global-padding,
.is-layout-constrained > *,
.wp-block-post-content,
.wp-block-group.is-layout-constrained {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Quitar márgenes entre bloques */
.wp-block-post-content > * + *,
.entry-content > * + * {
    margin-top: 0 !important;
}