/* ═══════════════════════════════════════════
   Weblink — Frontend
   Prefijo .wl- para no chocar con el tema
═══════════════════════════════════════════ */

/* ── BASE ── */
.wl-page {
    min-height:100vh !important;
    width:100% !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:40px 20px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    font-family:inherit;
}
.wl-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,.42);
    pointer-events:none; z-index:0;
}
.wl-wrap {
    position:relative; z-index:1; width:100%;
    animation:wlIn .4s ease both;
}
@keyframes wlIn {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── LOGO ── */
.wl-page .wl-logo-wrap {
    display:flex !important;
    justify-content:center !important;
    margin-bottom:18px !important;
}
.wl-page .wl-logo {
    border-radius:50% !important;
    object-fit:cover !important;
    display:block !important;
    border:none !important;
    box-shadow:none !important;
    transition:transform .3s;
    max-width:100%;
}
.wl-page .wl-logo-wrap {
    margin-top:20px !important;
    margin-bottom:20px !important;
}
.wl-page .wl-logo:hover { transform:scale(1.05); }

/* ── TEXTO ── */
.wl-page .wl-heading {
    margin:0 0 8px !important;
    text-align:center !important;
    font-weight:800 !important;
    line-height:1.2 !important;
}
.wl-page .wl-sub {
    margin:0 auto 28px !important;
    text-align:center !important;
    line-height:1.6 !important;
    max-width:340px;
}

/* ── REDES SOCIALES ── */
.wl-page .wl-socials {
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-top:28px !important;
    list-style:none !important;
    padding:0 !important;
}
.wl-page .wl-soc-icon {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-decoration:none !important;
    flex-shrink:0 !important;
    box-shadow:none !important;
    transition:transform .2s;
}
.wl-page .wl-soc-icon:hover { transform:scale(1.1); }
/* Modo personalizado: sin fondo */
.wl-page .wl-soc-icon.wl-soc-custom {
    background:transparent !important;
    width:auto !important; height:auto !important;
    border-radius:0 !important;
    padding:4px;
}

/* ── BOTÓN BASE ──
   box-shadow NUNCA. text-align viene del inline style del <a>.
── */
.wl-page .wl-btn {
    display:flex !important;
    align-items:center !important;
    text-decoration:none !important;
    font-weight:600 !important;
    cursor:pointer !important;
    box-shadow:none !important;
    transition:transform .2s, filter .15s;
}
.wl-page .wl-btn:hover { transform:translateY(-2px); filter:brightness(1.07); }
.wl-page .wl-btn:active { transform:translateY(0); }

/* El span hereda text-align del <a> padre */
.wl-page .wl-btn span {
    flex:1 !important;
    line-height:1.3 !important;
    text-align:inherit !important;
}

/* Ajustar justify-content del flex según alineación */
.wl-page .wl-btn[style*="text-align: left"],
.wl-page .wl-btn[style*="text-align:left"]   { justify-content:flex-start !important; }
.wl-page .wl-btn[style*="text-align: right"],
.wl-page .wl-btn[style*="text-align:right"]  { justify-content:flex-end !important; }
.wl-page .wl-btn[style*="text-align: center"],
.wl-page .wl-btn[style*="text-align:center"] { justify-content:center !important; }

/* ══════════════════════════════════════════
   VERTICAL
══════════════════════════════════════════ */
.wl-page.wl-layout-vertical .wl-wrap {
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
}
.wl-page.wl-layout-vertical .wl-btns {
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    width:100% !important;
}
.wl-page.wl-layout-vertical .wl-btn {
    width:100% !important;
    padding:14px 22px !important;
}

/* ══════════════════════════════════════════
   COLUMNS — 2 columnas
══════════════════════════════════════════ */
.wl-page.wl-layout-columns .wl-wrap {
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
}
.wl-page.wl-layout-columns .wl-btns {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    width:100% !important;
}
.wl-page.wl-layout-columns .wl-btn {
    padding:13px 16px !important;
}

/* ══════════════════════════════════════════
   GRID — cuadrícula cuadrada
══════════════════════════════════════════ */
.wl-page.wl-layout-grid .wl-wrap {
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
}
.wl-page.wl-layout-grid .wl-btns {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
    width:100% !important;
}
.wl-page.wl-layout-grid .wl-btn {
    flex-direction:column !important;
    align-items:center !important;
    padding:22px 12px !important;
    min-height:88px !important;
}

/* ══════════════════════════════════════════
   CARDS — tarjetas horizontales
══════════════════════════════════════════ */
.wl-page.wl-layout-cards .wl-wrap {
    margin:0 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
}
.wl-page.wl-layout-cards .wl-btns {
    display:flex !important;
    flex-direction:column !important;
    gap:11px !important;
    width:100% !important;
}
.wl-page.wl-layout-cards .wl-btn {
    padding:14px 20px !important;
}

/* ── RESPONSIVE ── */
@media (max-width:480px) {
    .wl-page { padding:36px 16px !important; }
    .wl-page.wl-layout-columns .wl-btns,
    .wl-page.wl-layout-grid    .wl-btns { grid-template-columns:1fr !important; }
}