/* ===== SOMATIKA — Formulario newsletter (Contact Form 7) ===== */
:root {
  --cream: #ece5d7;
  --cream-dim: rgba(236, 229, 215, 0.45);
}

.somatika-newsletter {
  max-width: 460px;
  margin: 150px auto;
  font-family: "DM Mono", monospace;
}

/* CF7 mete input y botón dentro de un  con un :
   convertimos ese  en fila flex y ocultamos el  */
.somatika-row > p {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
}
.somatika-row br { display: none; }

.somatika-row .wpcf7-form-control-wrap {
  flex: 1;
  display: flex;
}

/* Input email: solo borde inferior (!important para ganar al tema) */
.somatika-newsletter input.wpcf7-email {
  flex: 1;
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--cream-dim) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--cream) !important;
  font-family: "DM Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 14px 4px;
  outline: none;
}
.somatika-newsletter input.wpcf7-email::placeholder { color: var(--cream-dim); }
.somatika-newsletter input.wpcf7-email:focus { border-bottom-color: var(--cream) !important; }

/* Botón Suscribirse: caja con borde completo */
.somatika-newsletter input.wpcf7-submit {
  flex: 0 0 auto;
  min-width: 135px;
  background: transparent !important;
  border: 1px solid var(--cream-dim) !important;
  border-radius: 0 !important;
  color: var(--cream) !important;
  font-family: "DM Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.somatika-newsletter input.wpcf7-submit:hover {
  background: var(--cream) !important;
  color: #8b8e96 !important;
}

/* Spinner de CF7 fuera del flujo para que no descuadre la fila */
.somatika-newsletter .wpcf7-spinner {
  position: absolute;
  margin-left: 8px;
  align-self: center;
}

/* Texto descriptivo */
.form-description {
  margin: 16px 0 0;
  color: var(--cream-dim);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-align: left;
}
.form-description br { display: none; }

/* Mensajes de respuesta de CF7 sin borde por defecto */
.somatika-newsletter .wpcf7-response-output {
  border: none;
  margin: 14px 0 0;
  padding: 0;
  color: var(--cream);
  font-size: 12px;
}

/* Móvil: apilar input y botón */
@media (max-width: 480px) {
  .somatika-row > p { flex-direction: column; gap: 12px; }
  .somatika-newsletter input.wpcf7-submit { width: 100%; }
}

/* =====================================================
   SOMATIKA – Fixes visuales (franja blanca + imagen)
   ===================================================== */

/* 1. Neutralizar los márgenes negativos automáticos de WordPress */
:root :where(.wp-block-post-content > div:first-child.alignfull) {
    margin-top: 0 !important;
}
:root :where(.wp-block-post-content > div:last-child.alignfull) {
    margin-bottom: 0 !important;
}

/* ── DESKTOP (≥ 782px): layout 50/50 sin scroll ── */
@media (min-width: 782px) {

    .wp-block-post-content > div:first-child.alignfull,
    .entry-content > div:first-child.alignfull {
        min-height: 100dvh;
        overflow: hidden;
    }

    .wp-block-post-content > div:first-child.alignfull .wp-block-columns {
        height: 100dvh;
        min-height: 0 !important;
        overflow: hidden;
        align-items: stretch;
        gap: 0 !important;
    }

    .wp-block-post-content > div:first-child.alignfull .wp-block-columns .wp-block-column {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        min-width: 0;
    }

    .wp-block-post-content > div:first-child.alignfull .wp-block-columns > .wp-block-column:first-child {
        align-self: stretch;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .wp-block-post-content > div:first-child.alignfull .wp-block-columns > .wp-block-column:first-child .wp-block-image {
        flex: 1;
        height: 100%;
        margin: 0;
        display: flex;
        overflow: hidden;
    }

    .wp-block-post-content > div:first-child.alignfull .wp-block-columns > .wp-block-column:first-child .wp-block-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
        max-width: none !important;
        aspect-ratio: unset !important;
        min-width: 0;
        min-height: 0;
    }


    /* En desktop: quitar el background-image del bloque (usamos la columna con ) */
    .wp-block-post-content > div:first-child.alignfull,
    .entry-content > div:first-child.alignfull {
        background-image: none !important;
    }
}

/* ── MOBILE (≤ 781px): foto de fondo a pantalla completa, contenido encima ── */
@media (max-width: 781px) {

    /* Bloque raíz: 100dvh exacto, sin scroll */
    .wp-block-post-content > div:first-child.alignfull,
    .entry-content > div:first-child.alignfull {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        background-size: cover !important;
        background-position: center 22% !important;
    }

    /* Columnas: apiladas, ocupan todo el alto */
    .wp-block-post-content > div:first-child.alignfull .wp-block-columns {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        gap: 0 !important;
    }

    /* Ocultar la primera columna (imagen como ):
       ya tenemos la foto como background del Group padre */
    .wp-block-post-content > div:first-child.alignfull .wp-block-columns > .wp-block-column:first-child {
        display: none !important;
    }

    /* Segunda columna: ocupa toda la pantalla sobre el fondo, contenido centrado */
    .wp-block-post-content > div:first-child.alignfull .wp-block-columns > .wp-block-column:last-child {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2rem !important;
        gap: 2rem !important;
        box-sizing: border-box !important;
        background: transparent !important;
    }

    /* Grupos internos: en columna, ancho completo, centrados */
    .wp-block-post-content > div:first-child.alignfull .wp-block-columns > .wp-block-column:last-child .wp-block-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
    }

    /* El fondo gris de la segunda columna: transparente en mobile */
    .wp-block-post-content > div:first-child.alignfull .wp-block-columns > .wp-block-column:last-child,
    .wp-block-post-content > div:first-child.alignfull .wp-block-columns > .wp-block-column:last-child > * {
        background-color: transparent !important;
    }

    /* Newsletter: sin margen, ancho completo */
    .wp-block-post-content > div:first-child.alignfull .somatika-newsletter {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fila email+botón: en columna */
    .wp-block-post-content > div:first-child.alignfull .somatika-row > p {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Wrap del input: ancho completo */
    .wp-block-post-content > div:first-child.alignfull .somatika-row .wpcf7-form-control-wrap {
        width: 100% !important;
        flex: none !important;
        display: block !important;
    }

    /* Input email: ancho completo */
    .wp-block-post-content > div:first-child.alignfull .somatika-newsletter input[type="email"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Botón submit: ancho completo */
    .wp-block-post-content > div:first-child.alignfull .somatika-newsletter input[type="submit"],
    .wp-block-post-content > div:first-child.alignfull .somatika-newsletter .wpcf7-submit {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Formulario: ancho completo */
    .wp-block-post-content > div:first-child.alignfull .somatika-newsletter .wpcf7,
    .wp-block-post-content > div:first-child.alignfull .somatika-newsletter form {
        width: 100% !important;
    }
}


.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  color: var(--cream-dim) !important;
  border: 0px;
  font-size: 13px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.2); /* necesita algo de transparencia */
}

.wpcf7-not-valid-tip{
  color: var(--cream-dim) !important;
  font-size: 12px;
}

.wpcf7 form.sent .wpcf7-response-output{
  color: var(--cream-dim) !important;
  border: 0px;
  font-size: 13px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.2); /* necesita algo de transparencia */
}