/* ═══════════════════════════════════════════════════════════════════════════
   Newsletter Popup · al sistema de diseño del sitio

   Las variables (--canun-brand, --trm-oro-fuerte, --neutro*) vienen del :root
   del tema. Van con valor de reserva en cada uso para que el plugin siga
   viéndose bien si algún día se usa fuera de esta web.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Overlay ─────────────────────────────────────────────────────────────── */

.np-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 8, 0.64);
    backdrop-filter: blur(3px);
    z-index: 99999999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.np-overlay.np-active {
    display: flex;
}

/* ─── Popup ───────────────────────────────────────────────────────────────── */

.np-popup {
    background: #fff;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    animation: np-appear 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes np-appear {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .np-popup { animation: none; }
}

/* ─── Imagen lateral ──────────────────────────────────────────────────────── */

.np-popup-image {
    width: 44%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}

/* ─── Contenido ──────────────────────────────────────────────────────────── */

.np-popup-content {
    flex: 1;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow-y: auto;
}

/* ─── Botón cerrar ────────────────────────────────────────────────────────── */

.np-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #9a938c;
    padding: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s, color 0.15s;
}

.np-close:hover {
    background: #f4f1ec;
    color: var(--neutro2, #111);
}

/* ─── Texto ───────────────────────────────────────────────────────────────── */

/* El popup es interfaz: va en la fuente de texto, en negrita, como los títulos
   de sección. La de titulares se queda para portada, redes y ficha. */
.np-title {
    font-family: inherit;
    font-size: clamp(1.35rem, 2.4vw, 1.6rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: var(--neutro2, #111);
    text-transform: none;
    text-wrap: balance;
}

.np-subtitle {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--neutro4, #666);
    margin: 0 0 26px;
}

/* ─── Formulario CF7 dentro del popup ────────────────────────────────────── */

.np-form .wpcf7 {
    margin: 0;
}

.np-form .wpcf7-form p {
    margin: 0 0 14px;
}

.np-form .wpcf7-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--neutro4, #666);
    text-transform: uppercase;
}

.np-form .wpcf7-form input[type="email"],
.np-form .wpcf7-form input[type="text"] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--neutro2, #111);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.np-form .wpcf7-form input::placeholder {
    color: #a8a8a8;
}

.np-form .wpcf7-form input[type="email"]:focus,
.np-form .wpcf7-form input[type="text"]:focus {
    border-color: var(--trm-oro-fuerte, #175c60);
    box-shadow: 0 0 0 3px rgba(23, 92, 96, 0.18);
}

.np-form .wpcf7-form input[type="submit"] {
    width: 100%;
    height: 54px;
    padding: 0 30px;
    background: var(--trm-oro-fuerte, #175c60);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s;
}

.np-form .wpcf7-form input[type="submit"]:hover {
    background: var(--trm-oro-fuerte, #175c60);
    filter: brightness(0.92);
}

/* ─── Enviando ───────────────────────────────────────────────────────────── */


.np-submit-area {
    position: relative;
}

/* El z-index no es decorativo: el botón lleva la clase theme-btn del tema, que
   trae position:relative y z-index:1. Sin subir el aro por encima se pintaba
   detrás del botón, o sea debajo del dorado, y el envío parecía no hacer nada. */
.np-cargando {
    display: none;
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 18px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: np-girar 0.7s linear infinite;
}

.np-form .np-enviando .np-cargando {
    display: block;
}

/* El botón se apaga y deja de aceptar clics mientras dura el envío: sin eso no
   hay nada en pantalla que diga que está pasando algo y se pulsa dos veces. */
.np-form .np-enviando input[type="submit"],
.np-form .np-enviando button[type="submit"] {
    pointer-events: none;
    color: rgba(255, 255, 255, 0.45);
    filter: brightness(0.94);
}

@keyframes np-girar {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .np-cargando {
        animation-duration: 2s;
    }
}

/* ─── Avisos ─────────────────────────────────────────────────────────────── */

/*
 * CF7 le pone a esta caja un borde de 2px azul y márgenes de 2em desde su hoja,
 * con un selector de dos clases y un tipo. Por eso aquí van tres clases: hace
 * falta pasarle por delante para que el aviso entone con el popup.
 */
.np-form .wpcf7-form .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 11px 14px;
    border: 1px solid #e6c9c4;
    border-radius: 8px;
    background: #fdf3f2;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    color: #a32f22;
}

.np-form .wpcf7-form.sent .wpcf7-response-output {
    border-color: #f9c3bf;
    background: #fbf5e9;
    color: var(--trm-oro-fuerte, #175c60);
}

/* El aviso de cada campo. En bloque para que caiga debajo del suyo y no se
   meta en la fila del check de privacidad. */
.np-form .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}

.np-form .wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    color: #c0392b;
}

.np-form .wpcf7-form input.wpcf7-not-valid {
    border-color: #c0392b;
}

.np-form .wpcf7-form input.wpcf7-not-valid:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.16);
}

/* CF7 le mete a cada opción de lista un `margin: 0 0 0 1em` desde su propia
   hoja, y eso desplaza el check del consentimiento respecto al resto del
   formulario. Solo dentro del popup, a cero. */
.np-form .wpcf7-list-item {
    margin: 0 !important;
}

/* Acceptance (consentimiento) de CF7 dentro del popup */
.np-form .wpcf7-form .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
}

.np-form .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--trm-oro-fuerte, #175c60);
    cursor: pointer;
}

/* El texto del consentimiento no es una etiqueta de campo: se le quita el
   tratamiento de rótulo que llevan las de arriba. */
.np-form .wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label,
.np-form .wpcf7-form .wpcf7-acceptance label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--neutro4, #666);
    line-height: 1.55;
    text-transform: none;
    cursor: pointer;
}

.np-form .wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label a,
.np-form .wpcf7-form .wpcf7-acceptance label a {
    color: var(--trm-oro-fuerte, #175c60);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* El aviso de la casilla de privacidad, el que sale al intentar enviar sin
   marcarla. El margen negativo lo sube contra el texto del consentimiento, que
   arrastra 16px de separación por debajo. */
.np-form .np-aviso-consentimiento {
    display: block;
    margin: -10px 0 14px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    color: #c0392b;
}

.np-form .np-aviso-consentimiento[hidden] {
    display: none;
}

.np-form .np-falta-consentimiento .wpcf7-acceptance input[type="checkbox"] {
    outline: 2px solid #c0392b;
    outline-offset: 2px;
}

/*
 * El indicador de CF7, apagado. Esta regla ya estaba aquí, y es la razón de que
 * al enviar no se viera nada girando: lleva !important y va la última, así que
 * cualquier intento de vestir ese elemento moría aquí. En su lugar se pinta el
 * aro propio (.np-cargando), que además se ancla al botón y no cambia de sitio
 * entre versiones de CF7.
 */
.np-form .wpcf7-spinner {
    display: none !important;
}

/* ─── Banner superior ─────────────────────────────────────────────────────── */

/* El hueco de la barra, reservado desde el CSS. La clase np-con-banner la pone
   el PHP en el <body>, así que el espacio existe desde el primer pintado y la
   página no pega el saltito de antes. El JS solo lo corrige si el alto real
   acaba siendo otro (por ejemplo con un mensaje larguísimo que parta línea). */
:root {
    --np-banner-h: 42px;
}

body.np-con-banner {
    padding-top: var(--np-banner-h);
}

/* El color lo manda la página de ajustes como estilo en línea. Estos valores
   son el punto de partida: negro del pie con el dorado de la casa. */
/* El top sale del alto real de la cabecera, que el tema publica en
   --trm-header-h (themes/canun/assets/css/sitio.css). Estaba a 95px a mano, y
   al adelgazar la cabecera quedó un hueco entre las dos. El 95px se queda de
   reserva por si esta hoja se usa alguna vez fuera de este tema. */
.np-banner {
    position: fixed;
    top: var(--trm-header-h, 95px);
    left: 0;
    width: 100%;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--np-banner-h);
    padding: 11px 48px;
    box-sizing: border-box;
    background: #0f4246;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.45;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 -1px 0 rgba(240, 128, 120, 0.24);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.np-banner strong,
.np-banner b {
    color: var(--canun-brand, #f08078);
    font-weight: 700;
}

.np-banner.np-banner-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.np-banner.np-banner-closed {
    display: none !important;
}

/* ─── Compensación barra admin WordPress ─────────────────────────────────── */

/* La barra de admin de WordPress mide 32px de escritorio y 46px por debajo de
   783px, y además ahí deja de ser fija. */
.admin-bar .np-banner {
    top: calc(var(--trm-header-h, 95px) + 37px);
}

@media screen and (max-width: 782px) {
    .admin-bar .np-banner {
        top: calc(var(--trm-header-h, 62px) + 0px);
    }
}

/* Los mensajes van apilados en la misma celda de la rejilla. Así la barra mide
   siempre lo que el mensaje más alto y no pega un salto al cambiar. */
.np-banner-viewport {
    display: grid;
    flex: 1;
    pointer-events: none;
}

.np-banner-msg {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.np-banner-msg.is-active {
    opacity: 1;
    transform: none;
}

.np-banner-icon {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--canun-brand, #f08078);
}

.np-banner-text {
    pointer-events: none;
}

.np-banner-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 4px 6px;
    transition: opacity 0.15s;
}

.np-banner-close:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .np-banner-msg {
        transform: none;
        transition: opacity 0.2s ease;
    }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 580px) {
    .np-popup {
        flex-direction: column;
        max-height: 95vh;
    }

    .np-popup-image {
        width: 100%;
        height: 170px;
    }

    .np-popup-content {
        padding: 28px 24px 30px;
    }

    .np-form .wpcf7-form input[type="email"],
    .np-form .wpcf7-form input[type="text"] {
        height: 48px;
    }

    .np-form .wpcf7-form input[type="submit"] {
        height: 50px;
    }

    :root {
        --np-banner-h: 38px;
    }

    .np-banner {
        padding: 10px 0;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
    }

    .np-banner-msg {
        gap: 8px;
    }

    .np-banner-icon {
        width: 15px;
        height: 15px;
    }

    .np-banner-close {
        display: none; /* solo se quita al suscribirse */
    }

    /* ── Cinta horizontal ──
       Con los mensajes en fila, la barra mide siempre una línea. La pista lleva
       dos copias del grupo y se desplaza el 50%: al terminar, la segunda copia
       está justo donde estaba la primera y el salto no se ve. */
    .np-banner--cinta {
        overflow: hidden;
        justify-content: flex-start;
    }

    .np-banner--cinta .np-banner-track {
        display: flex;
        width: max-content;
        animation: np-cinta 26s linear infinite;
    }

    .np-banner--cinta .np-banner-viewport {
        display: flex;
        width: auto;
        flex: none;
    }

    .np-banner--cinta .np-banner-msg {
        opacity: 1;
        transform: none;
        white-space: nowrap;
        transition: none;
        padding-right: 44px;
    }

    @keyframes np-cinta {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
    }

    /* Sin movimiento: se deja arrastrar con el dedo en vez de desfilar. */
    @media (prefers-reduced-motion: reduce) {
        .np-banner--cinta {
            overflow-x: auto;
            scrollbar-width: none;
        }

        .np-banner--cinta .np-banner-track {
            animation: none;
        }

        .np-banner--cinta::-webkit-scrollbar {
            display: none;
        }
    }
}