.graftivo-gform-wrapper {
    --graftivo-gform-btn: #0B132B;
    --graftivo-gform-accent: #2F8F83;
    --graftivo-gform-radius: 8px;
}
.graftivo-gform {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}
.graftivo-gform-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
}
.graftivo-gform-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 100%;
}
.graftivo-gform-field[hidden] {
    /* Sin esto, [hidden] pierde contra "display: flex" de arriba (misma especificidad,
       pero esta regla base gana por venir después en la cascada) y el campo condicional
       se queda visible aunque su input ya esté disabled por form.js. */
    display: none;
}
.graftivo-gform-field--width-half {
    flex: 1 1 calc(50% - 8px); /* 8px = mitad del gap de 16px de .graftivo-gform */
}
@media (max-width: 480px) {
    .graftivo-gform-field--width-half {
        flex: 1 1 100%; /* en móvil siempre apilados, nunca apretados */
    }
}
.graftivo-gform-field label,
.graftivo-gform-group-label {
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}
.graftivo-gform-field .req {
    color: #d63638;
}
.graftivo-gform-field input[type="text"],
.graftivo-gform-field input[type="email"],
.graftivo-gform-field input[type="tel"],
.graftivo-gform-field select,
.graftivo-gform-field textarea {
    font-size: 16px; /* Mínimo 16px: evita auto-zoom de iOS al enfocar */
    height: auto; /* cancela el height:40px fijo de Blocksy para que todos los campos tengan la misma altura natural */
    /* Blocksy pone line-height ~1.65 por defecto en inputs de texto — sin esta
       línea, ese valor se filtra aquí y agrega ~8px extra a la altura real
       (medido en vivo: 48.4px en vez de 40px), aunque el padding sea el mismo
       en todos los campos. "normal" iguala la altura real a 40px, la misma que
       ya usa el botón submit. */
    line-height: normal;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--graftivo-gform-radius);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.graftivo-gform-field input[type="file"] {
    font-size: 16px;
    height: auto;
    line-height: normal;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--graftivo-gform-radius);
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.graftivo-gform-field select {
    /* height: auto cancela el height:40px fijo que Blocksy aplica a todo select —
       sin esto el texto de 16px queda recortado a ~14px de espacio y se ve como guiones */
    height: auto;
    padding-right: 40px !important;
    /* appearance:none quita la flecha nativa (que se dibuja encima del texto con el
       padding-right de arriba) — se reemplaza por una flecha SVG propia. Sin esto,
       el texto choca con la flecha nativa del navegador. */
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    /* Sin esto, el line-height heredado (más alto que la caja del select una vez
       quitada la apariencia nativa) hace que el texto se renderice más arriba de
       lo que cabe y se vea con la mitad de arriba recortada. NO se toca el padding
       (se hereda el 10px compartido de arriba) para no romper la altura uniforme
       de 40px que tienen todos los campos. */
    line-height: 1.2 !important;
}
.graftivo-gform-field textarea {
    min-height: 84px; /* ~2× la altura de un campo normal */
    resize: none;
    overflow: hidden;
}
.graftivo-gform-field input:focus,
.graftivo-gform-field select:focus,
.graftivo-gform-field textarea:focus {
    outline: none;
    border-color: var(--graftivo-gform-accent);
}
.graftivo-gform-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
}
/* --- Submit button position / size variants ---
   Default (below + full): flex:1 1 100% forces a new row that stretches end to end.
   beside: button shrinks to its text; the :has() rule below makes the preceding
           field expand to fill the remaining space on the same row.
   size-auto: button only as wide as its label, even when position=below.
*/
/* Tamaño (padding/font-size/line-height/font-family/border) vive en esta regla base
   y NO se repite en los modificadores de posición — así "below" y "beside" siempre
   miden lo mismo (40px, igual que los inputs) sin tener que sincronizar dos reglas. */
.graftivo-gform-submit {
    flex: 1 1 100%;
    background: var(--graftivo-gform-btn);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--graftivo-gform-radius);
    font-family: inherit;
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.graftivo-gform-submit:hover {
    opacity: 0.9;
}
.graftivo-gform-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Beside position: solo layout (fila/ancho/alineación) — el tamaño ya viene de la
   regla base de arriba, así que "below" y "beside" quedan idénticos en altura. */
.graftivo-gform-submit--pos-beside {
    flex: 0 0 auto;
    width: auto;
    align-self: flex-end;
}
/* Make the last field grow to fill the space left by the beside button */
.graftivo-gform:has(.graftivo-gform-submit--pos-beside) .graftivo-gform-field:last-of-type {
    flex: 1 1 auto;
}

/* Fit content: button only as wide as its label (stays on its own row if all fields are full-width) */
.graftivo-gform-submit--size-auto {
    flex: 0 0 auto;
    width: auto;
}

@media (max-width: 480px) {
    /* On mobile, beside button always drops below (same as full-width) */
    .graftivo-gform-submit--pos-beside {
        flex: 1 1 100%;
        width: 100%;
    }
    .graftivo-gform:has(.graftivo-gform-submit--pos-beside) .graftivo-gform-field:last-of-type {
        flex: 1 1 100%;
    }
}

.graftivo-gform-error {
    flex: 1 1 100%; /* el padre ahora es flex-direction: row, así que esto evita que se encoja al ancho de su texto */
    background: #fde8e8;
    color: #9a1c1c;
    border: 1px solid #f5b5b5;
    border-radius: var(--graftivo-gform-radius);
    padding: 10px 14px;
    font-size: 14px;
}
.graftivo-gform-success {
    flex: 1 1 100%;
    font-size: 15px;
    line-height: 1.5;
}