/* ─── Secciones y componentes ────────────────────────────────────────────────
   Sección de soluciones, tarjeta de contacto, cobertura, footer y modal.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Sección debajo del hero en ambas páginas ── */
.solutions {
    padding: 8px 10% 6px;
    background:
        linear-gradient(145deg, rgba(15, 15, 15, 0.78) 0%, rgba(28, 28, 28, 0.72) 100%),
        url('../../images/red-global-conectividad-tecnologia-seguridad-mexico.png') center 22%/cover no-repeat;
    text-align: center;
}

.solutions-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 6px;
}

.solutions-right { display: flex; justify-content: center; }

/* ── Tarjeta genérica ── */
.card {
    padding: 16px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 100%;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Tarjeta de datos de contacto ── */
.contact-card {
    width: min(100%, 430px);
    min-height: auto;
    padding: 14px 18px;
    background: transparent;
    border: 2px solid var(--line-soft);
    box-shadow: var(--shadow-soft);
    color: var(--white);
    text-align: center;
    transition: transform var(--anim-mid) ease;
}

.contact-card:hover { transform: translateY(-2px); }

.contact-card h3 {
    color: var(--white);
    font-size: 1.35rem;
    margin-bottom: 4px;
    font-weight: 800;
}

.contact-card p { color: var(--white); font-size: 0.86rem; margin: 3px 0; line-height: 1.3; }

/* Cada dato con ícono alineado */
.contact-card .contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contact-card i { width: 20px; text-align: center; flex: 0 0 20px; }

.contact-card a {
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid var(--line-soft);
    transition: border-color var(--anim-fast) ease;
}

.contact-card a:hover { border-bottom-color: var(--white); }

/* ── Texto de cobertura ── */
.coverage-cities {
    display: block;
    width: 100%;
    font-size: 0.72rem;
    text-align: center;
    text-decoration: underline;
    color: var(--white);
    margin: 0;
}

.coverage-inline { margin-top: 8px; }

/* ── Pie de página ── */
footer {
    background: #0f0f0f;
    color: var(--white);
    text-align: center;
    padding: 8px 10%;
    font-size: 0.72rem;
}

.footer-text, footer p { margin: 0; }

/* ─── Modal de confirmación ──────────────────────────────────────────────────
   Se activa al enviar el formulario con éxito.
   JS añade/quita .is-open para mostrar/ocultar.
   ─────────────────────────────────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--anim-mid) ease;
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal-box {
    background: #1a1a1a;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 32px 40px;
    text-align: center;
    color: var(--white);
    max-width: 360px;
    width: 90%;
    transform: translateY(10px);
    transition: transform var(--anim-mid) ease;
}

.modal-overlay.is-open .modal-box { transform: translateY(0); }

.modal-icon { font-size: 2.4rem; margin-bottom: 12px; color: #7dd3fc; }

.modal-box h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }

.modal-box p { font-size: 0.88rem; margin-bottom: 20px; color: var(--text-main); }

.modal-close {
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 8px;
    padding: 8px 28px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--anim-fast) ease, transform var(--anim-fast) ease;
}

.modal-close:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-1px); }