.elementor-492 .elementor-element.elementor-element-585da4d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-492 .elementor-element.elementor-element-585da4d.e-con{--e-con-transform-translateY:50px;}.elementor-492 .elementor-element.elementor-element-c216348{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}body.elementor-page-492:not(.elementor-motion-effects-element-type-background), body.elementor-page-492 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-492 .elementor-element.elementor-element-585da4d{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-585da4d *//* ============================================================
   PELISANIME — REGISTER PC
   2 PASOS
   ALTURA FIJA: 680PX
   CLASE PRINCIPAL: .register-pc

   ACTUALIZACIÓN: paleta dark-mode + estilos de formulario de
   pago según especificación (fondo casi negro, tarjetas con
   borde sutil, inputs semi-transparentes con iconos, botón con
   gradiente morado→violeta, resumen con acentos morado brillante).

   ACTUALIZACIÓN 2: se elimina el reescalado global del 10% que
   afectaba a TODO .rp-app (ambos pasos). En su lugar, solo el
   contenido interno del paso 2 (formulario de pago + resumen de
   compra) se reescala al 90%, dejando el paso 1 (cuenta + planes)
   a su tamaño real.
   ============================================================ */


/* ============================================================
   01. VARIABLES
   ============================================================ */

.register-pc{
    /* fondo principal: casi negro, ligeramente azulado */
    --rp-bg:#0b0b14;
    --rp-bg-2:#0f0f1a;

    /* tarjetas / paneles */
    --rp-card:#141424;
    --rp-card-2:#171728;
    --rp-field:#1a1a2e;

    /* bordes sutiles */
    --rp-border:rgba(255,255,255,.08);
    --rp-border-soft:rgba(255,255,255,.06);
    --rp-field-border:#2a2a40;

    --rp-text:#f7f7fb;
    --rp-muted:#9ca3af;
    --rp-muted-2:#a0a0c0;

    /* morado vivo (círculo activo, acentos) */
    --rp-purple:#8b5cf6;
    --rp-purple-2:#7c3aed;

    /* violeta brillante (línea de progreso, total, checks) */
    --rp-accent:#a855f7;

    /* botón: morado → azul/violeta */
    --rp-btn-from:#7c3aed;
    --rp-btn-to:#4f46e5;

    --rp-blue:#147cff;
    --rp-gold:#ffb21c;

    width:100%;
    height:660px;
    max-height:660px;
    min-height:660px;

    margin:0 auto;
    padding:0;

    position:relative;

    color:var(--rp-text);
    font-family:inherit;

    overflow:hidden;

    box-sizing:border-box;

    background:var(--rp-bg);
}


/* ============================================================
   02. BOX SIZING
   ============================================================ */

.register-pc *,
.register-pc *::before,
.register-pc *::after{
    box-sizing:border-box;
}


/* ============================================================
   03. ELEMENTOR
   ============================================================ */

.register-pc .elementor-widget-container{
    width:100%;
    height:660px;
    max-height:660px;
    min-height:660px;

    overflow:hidden !important;
}

.register-pc .elementor-shortcode{
    height:660px;
    max-height:660px;
}


/* ============================================================
   04. PMS ORIGINAL
   ============================================================ */

.register-pc #pms_register-form{
    width:100% !important;
    height:660px !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
}

.register-pc #pms_register-form > ul{
    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}


/* ============================================================
   05. APP
   ============================================================ */

.register-pc .rp-app{

    width:100%;
    height:660px;
    max-height:660px;

    margin:0 auto;

    position:relative;

    overflow:hidden;
}


/* ============================================================
   06. BARRA DE PROGRESO
   ============================================================ */

.register-pc .rp-progress{

    height:64px;

    display:flex;
    align-items:center;

    gap:16px;

    padding:0 8px 10px;

    position:relative;

    border-bottom:1px solid rgba(255,255,255,.07);

    margin-bottom:8px;
}


/* línea */
.register-pc .rp-progress-line{

    position:absolute;

    left:61px;
    right:61px;
    top:50%;

    transform:translateY(-50%);

    height:3px;

    border-radius:3px;

    background:rgba(255,255,255,.08);

    overflow:hidden;
}

.register-pc .rp-progress-fill{

    width:50%;
    height:100%;

    /* gradiente/color morado neón con brillo */
    background:
        linear-gradient(
            90deg,
            var(--rp-purple-2),
            var(--rp-accent)
        );

    box-shadow:
        0 0 12px rgba(168,85,247,.55);

    transition:width .35s ease;
}

/* pequeño brillo al final de la barra, indicando el avance */
.register-pc .rp-progress-fill::after{

    content:"";

    position:absolute;

    right:-4px;
    top:50%;

    width:11px;
    height:11px;

    transform:translateY(-50%);

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 10px 3px rgba(168,85,247,.8);
}


/* paso */
.register-pc .rp-progress-step{

    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:11px;

    min-width:0;

    color:#747c95;

    transition:.25s ease;
}

.register-pc .rp-progress-step:first-child{
    margin-right:auto;
}

.register-pc .rp-progress-step:last-child{
    margin-left:auto;
}


/* bloque de texto (título + subtítulo) */

.register-pc .rp-progress-text{

    display:flex;
    flex-direction:column;

    min-width:0;

    line-height:1.2;
}

.register-pc .rp-progress-text strong{

    display:block;

    color:inherit;

    font-size:13px;
    font-weight:700;

    white-space:nowrap;
}

.register-pc .rp-progress-text small{

    display:block;

    margin-top:2px;

    color:var(--rp-muted-2);

    font-size:10px;
    font-weight:500;

    white-space:nowrap;
}

.register-pc .rp-progress-step.rp-current .rp-progress-text small,
.register-pc .rp-progress-step.rp-completed .rp-progress-text small{

    color:#c9c9e0;

}


/* círculo */

.register-pc .rp-progress-number{

    width:34px;
    height:34px;
    min-width:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#11172a;

    border:1.5px solid rgba(255,255,255,.10);

    color:#7f879d;

    font-size:12px;
    font-weight:700;

    transition:.25s ease;
}


/* paso ACTIVO: círculo morado vivo con relleno + texto blanco
   (según spec — reemplaza el estilo anterior de "solo borde") */

.register-pc .rp-progress-step.rp-current{
    color:#fff;
}

.register-pc .rp-progress-step.rp-current
.rp-progress-number{

    color:#fff;

    border:2px solid var(--rp-purple);

    background:
        linear-gradient(
            145deg,
            var(--rp-purple),
            var(--rp-purple-2)
        );

    box-shadow:
        0 0 16px rgba(139,92,246,.45);
}


/* paso completado: relleno degradado + glow */

.register-pc .rp-progress-step.rp-completed{
    color:#fff;
}

.register-pc .rp-progress-step.rp-completed
.rp-progress-number{

    color:#fff;

    border-color:var(--rp-purple);

    background:
        linear-gradient(
            145deg,
            var(--rp-purple),
            var(--rp-purple-2)
        );

    box-shadow:
        0 0 18px rgba(139,92,246,.4);
}


/* paso INACTIVO: círculo oscuro con borde gris/morado apagado */

.register-pc .rp-progress-step:not(.rp-current):not(.rp-completed)
.rp-progress-number{

    background:#11172a;

    border:1.5px solid rgba(139,92,246,.22);

    color:#7f879d;
}


/* ============================================================
   07. PASOS
   ============================================================ */

.register-pc .rp-step{
    display:none;

    width:100%;

    height:588px;
    max-height:588px;

    overflow:hidden;
}

.register-pc .rp-step.rp-active{
    display:block;
}


/* ============================================================
   08. PASO 1 — GRID
   ============================================================ */

.register-pc .rp-register-layout{

    width:100%;
    height:588px;
    max-height:588px;

    display:grid;

    grid-template-columns:
        370px
        minmax(0,1fr);

    gap:18px;

    overflow:hidden;
}


/* ============================================================
   09. TARJETAS PRINCIPALES
   Fondo oscuro + borde sutil + radio 16-20px, según spec.
   ============================================================ */

.register-pc .rp-account-card,
.register-pc .rp-plans-card,
.register-pc .rp-payment-card,
.register-pc .rp-summary-card-main{

    position:relative;

    height:100%;
    min-height:0;

    overflow:hidden;

    border:1px solid var(--rp-border);

    border-radius:18px;

    background:

        linear-gradient(
            0deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.03)
        ),

        radial-gradient(
            circle at 15% 0%,
            rgba(139,92,246,.09),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            var(--rp-card),
            var(--rp-bg-2)
        );

    box-shadow:
        0 15px 45px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* ============================================================
   10. CUENTA
   ============================================================ */

.register-pc .rp-account-card{

    padding:20px 18px 16px;

    display:flex;
    flex-direction:column;
}


/* heading */

.register-pc .rp-account-heading{

    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:15px;

    flex-shrink:0;
}


/* icono */

.register-pc .rp-heading-icon{

    width:48px;
    height:48px;
    min-width:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#e8caff;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.30),
            rgba(87,24,171,.08) 70%
        );

    box-shadow:
        0 0 22px rgba(139,92,246,.20);
}

.register-pc .rp-heading-icon svg{
    width:25px;
    height:25px;
}


/* títulos */

.register-pc .rp-account-title{

    margin:0;

    color:#fff;

    font-size:25px;
    line-height:1.05;

    font-weight:800;

    letter-spacing:-.6px;
}

.register-pc .rp-account-title span{
    color:var(--rp-purple);
}

.register-pc .rp-account-subtitle{

    margin:5px 0 0;

    color:var(--rp-muted);

    font-size:12px;
}


/* ============================================================
   11. CAMPOS
   Inputs semi-transparentes muy oscuros, radio 10-12px,
   borde sutil, iconos integrados a la izquierda.
   ============================================================ */

.register-pc .rp-fields{

    display:flex;
    flex-direction:column;

    gap:7px;

    min-height:0;

    overflow:hidden;
}


/* campo */

.register-pc .rp-fields .pms-field{

    position:relative;

    width:100%;

    min-height:55px;
    max-height:55px;

    margin:0 !important;
    padding:8px 12px 7px 51px !important;

    list-style:none;

    border-radius:12px;

    border:1px solid var(--rp-field-border);

    background:rgba(0,0,0,.3);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.register-pc .rp-fields .pms-field:focus-within{

    border-color:rgba(139,92,246,.55);

    box-shadow:
        0 0 0 2px rgba(139,92,246,.10);
}


/* icono */

.register-pc .rp-field-icon{

    position:absolute;

    left:14px;
    top:50%;

    width:24px;
    height:24px;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#d4b5f9;

    pointer-events:none;
}

.register-pc .rp-field-icon svg{
    width:21px;
    height:21px;
}


/* labels */

.register-pc .rp-fields .pms-field > label{

    display:block !important;

    margin:0 0 2px !important;

    color:#eeeef5 !important;

    font-size:11px !important;
    line-height:1.1 !important;

    font-weight:650 !important;
}


/* inputs */

.register-pc .rp-fields input[type="text"],
.register-pc .rp-fields input[type="email"],
.register-pc .rp-fields input[type="password"]{

    width:100% !important;

    height:19px !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    color:#d4d6e2 !important;

    font-size:12px !important;

    border-radius:0 !important;
}

.register-pc .rp-fields input::placeholder{

    color:var(--rp-muted-2) !important;

    opacity:1;
}


/* ============================================================
   12. LOGIN
   ============================================================ */

.register-pc .rp-login{

    margin-top:auto;

    padding-top:12px;

    flex-shrink:0;

    text-align:center;

    color:#969caf;

    font-size:11px;
}

.register-pc .rp-login a{

    color:var(--rp-purple);

    text-decoration:none;
}


/* ============================================================
   13. PLANES
   ============================================================ */

.register-pc .rp-plans-card{

    padding:18px 18px 15px;

    display:flex;
    flex-direction:column;
}


/* encabezado */

.register-pc .rp-plan-top{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:15px;

    margin-bottom:13px;

    flex-shrink:0;
}

.register-pc .rp-plan-title{

    margin:0;

    color:#fff;

    font-size:26px;
    line-height:1;

    font-weight:800;

    letter-spacing:-.7px;
}

.register-pc .rp-plan-title span{
    color:var(--rp-purple);
}

.register-pc .rp-plan-subtitle{

    margin:5px 0 0;

    color:var(--rp-muted-2);

    font-size:11px;
}


/* ============================================================
   14. BENEFICIOS SUPERIORES
   ============================================================ */

.register-pc .rp-top-benefits{

    display:flex;

    gap:12px;

    align-items:center;
}

.register-pc .rp-top-benefit{

    display:flex;
    align-items:center;

    gap:7px;

    min-width:0;
}

.register-pc .rp-top-benefit-icon{

    width:32px;
    height:32px;
    min-width:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#fff;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.40),
            rgba(85,26,160,.13)
        );
}

.register-pc .rp-top-benefit-icon svg{

    width:15px;
    height:15px;
}

.register-pc .rp-top-benefit strong{

    display:block;

    color:#f4f3f8;

    font-size:10px;
    line-height:1.1;

    white-space:nowrap;
}

.register-pc .rp-top-benefit small{

    display:block;

    margin-top:2px;

    color:#898fa4;

    font-size:9px;

    white-space:nowrap;
}


/* ============================================================
   15. COLUMNAS PLANES
   ============================================================ */

.register-pc .rp-plan-columns{

    flex:1;

    min-height:0;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;

    overflow:hidden;
}


/* ============================================================
   16. TARJETA DE PLAN
   ============================================================ */

.register-pc .rp-plan-card{

    position:relative;

    height:100%;
    min-height:0;

    padding:14px 12px 11px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border-radius:15px;

    border:1px solid rgba(255,255,255,.08);
}


/* BÁSICO */

.register-pc .rp-plan-card[data-group="basic"]{

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(139,92,246,.14),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            rgba(31,19,53,.96),
            rgba(13,13,29,.99)
        );

    border-color:rgba(139,92,246,.30);
}


/* ESTÁNDAR */

.register-pc .rp-plan-card[data-group="standard"]{

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(19,112,255,.13),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            rgba(13,30,54,.96),
            rgba(10,16,30,.99)
        );

    border-color:rgba(47,131,255,.28);
}


/* PREMIUM */

.register-pc .rp-plan-card[data-group="premium"]{

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(255,165,18,.12),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            rgba(46,34,18,.93),
            rgba(18,17,23,.99)
        );

    border-color:rgba(255,182,59,.27);
}


/* ============================================================
   17. HEADER PLAN
   ============================================================ */

.register-pc .rp-plan-header{

    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:8px;

    flex-shrink:0;
}

.register-pc .rp-plan-icon{

    width:43px;
    height:43px;
    min-width:43px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#fff;
}

.register-pc .rp-plan-icon svg{

    width:22px;
    height:22px;
}


/* colores */

.register-pc .rp-plan-card.basic
.rp-plan-icon,
.register-pc [data-group="basic"]
.rp-plan-icon{

    background:
        linear-gradient(
            145deg,
            var(--rp-purple),
            #58149d
        );

    box-shadow:
        0 0 22px rgba(139,92,246,.28);
}

.register-pc [data-group="standard"]
.rp-plan-icon{

    background:
        linear-gradient(
            145deg,
            #1680ff,
            #06458f
        );

    box-shadow:
        0 0 22px rgba(15,120,255,.25);
}

.register-pc [data-group="premium"]
.rp-plan-icon{

    background:
        linear-gradient(
            145deg,
            #ffb51e,
            #945900
        );

    box-shadow:
        0 0 22px rgba(255,169,20,.25);
}


.register-pc .rp-plan-header h3{

    margin:0 0 2px;

    color:#fff;

    font-size:17px;

    font-weight:750;
}

.register-pc .rp-plan-header p{

    margin:0;

    color:#a1a6ba;

    font-size:9px;
}


/* ============================================================
   18. OPCIONES
   ============================================================ */

.register-pc .rp-plan-options{

    flex:1;

    min-height:0;

    overflow:hidden;
}

.register-pc .rp-plan-option{

    position:relative;

    min-height:47px;

    display:grid;

    grid-template-columns:
        20px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:5px;

    padding:5px 3px;

    border-top:1px solid rgba(255,255,255,.065);

    cursor:pointer;

    transition:
        background .2s ease,
        opacity .2s ease;
}

.register-pc .rp-plan-option:first-child{
    border-top:0;
}

.register-pc .rp-plan-option:hover{

    background:rgba(255,255,255,.025);
}


/* radio */

.register-pc .rp-radio{

    width:17px;
    height:17px;

    border-radius:50%;

    border:1.5px solid #c4c8d7;

    position:relative;

    transition:.2s ease;
}

.register-pc .rp-plan-option.rp-selected
.rp-radio{

    border-color:var(--rp-purple);

    box-shadow:
        0 0 0 3px rgba(139,92,246,.09);
}

.register-pc .rp-plan-option.rp-selected
.rp-radio::after{

    content:"";

    position:absolute;

    width:8px;
    height:8px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:var(--rp-purple);
}


/* nombre */

.register-pc .rp-option-name{

    color:#f0f0f6;

    font-size:12px;

    font-weight:500;
}


/* precio */

.register-pc .rp-option-price{

    text-align:right;
}

.register-pc .rp-option-price strong{

    display:block;

    color:#fff;

    font-size:12px;

    font-weight:750;
}

.register-pc .rp-option-price small{

    display:block;

    margin-top:1px;

    color:#9ea4b8;

    font-size:8px;
}


/* ============================================================
   19. VIP
   ============================================================ */

.register-pc .rp-vip{

    min-height:43px;

    margin-top:6px;

    padding:6px 8px;

    display:grid;

    grid-template-columns:
        35px
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:7px;

    border-radius:9px;

    border:1px solid rgba(139,92,246,.27);

    background:
        linear-gradient(
            120deg,
            rgba(124,58,237,.15),
            rgba(255,255,255,.025)
        );

    cursor:pointer;

    transition:.2s ease;
}

.register-pc .rp-vip:hover{

    background:
        linear-gradient(
            120deg,
            rgba(139,92,246,.22),
            rgba(255,255,255,.035)
        );
}

.register-pc [data-group="standard"]
.rp-vip{

    border-color:rgba(42,128,255,.25);

    background:
        linear-gradient(
            120deg,
            rgba(18,101,218,.15),
            rgba(255,255,255,.02)
        );
}


/* VIP badge */

.register-pc .rp-vip-badge{

    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            var(--rp-purple),
            #57129d
        );

    font-size:9px;

    font-weight:800;
}

.register-pc .rp-vip-name{

    color:#eeeef5;

    font-size:10px;

    font-weight:600;
}

.register-pc .rp-vip-price{

    color:#fff;

    font-size:11px;

    font-weight:750;
}


/* ============================================================
   20. DESHABILITADOS
   ESTÁNDAR + PREMIUM
   ============================================================ */

.register-pc .rp-plan-card.rp-disabled{

    cursor:not-allowed;
}


/* capa */

.register-pc .rp-plan-card.rp-disabled::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:20;

    display:flex;

    align-items:center;
    justify-content:center;

    text-align:center;

    color:#fff;

    font-size:17px;

    font-weight:800;

    letter-spacing:.2px;

    background:
        linear-gradient(
            145deg,
            rgba(7,10,22,.70),
            rgba(9,12,25,.82)
        );

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);

    opacity:0;

    pointer-events:none;

    transition:opacity .25s ease;
}


/* texto */

.register-pc .rp-plan-card.rp-disabled::before{

    content:"Próximamente";

    position:absolute;

    z-index:21;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        scale(.95);

    padding:10px 18px;

    border-radius:9px;

    color:#fff;

    font-size:16px;
    font-weight:800;

    background:
        linear-gradient(
            135deg,
            rgba(124,58,237,.88),
            rgba(69,31,140,.90)
        );

    border:1px solid rgba(190,113,255,.32);

    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        0 0 25px rgba(139,92,246,.20);

    opacity:0;

    z-index:22;

    pointer-events:none;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* hover */

.register-pc .rp-plan-card.rp-disabled:hover::after,
.register-pc .rp-plan-card.rp-disabled:hover::before{

    opacity:1;
}

.register-pc .rp-plan-card.rp-disabled:hover::before{

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* ============================================================
   21. BOTÓN CREAR CUENTA
   Gradiente morado → azul/violeta según spec.
   ============================================================ */

.register-pc .rp-create-button{

    width:100%;

    height:50px;

    min-height:48px;

    margin-top:10px;

    flex-shrink:0;

    border:0;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            var(--rp-btn-from),
            var(--rp-btn-to)
        );

    color:#fff;

    font-size:15px;

    font-weight:650;

    cursor:pointer;

    box-shadow:
        0 8px 25px rgba(124,58,237,.28);

    transition:
        opacity .2s ease,
        filter .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* deshabilitado */

.register-pc .rp-create-button:disabled{

    opacity:.38;

    cursor:not-allowed;

    filter:grayscale(.25);

    box-shadow:none;

    transform:none;
}


/* activo */

.register-pc .rp-create-button:not(:disabled):hover{

    transform:translateY(-1px);

    filter:brightness(1.08);

    box-shadow:
        0 11px 30px rgba(124,58,237,.38);
}


/* ============================================================
   22. PASO 2
   ============================================================ */

.register-pc .rp-payment-layout{

    width:100%;
    height:588px;

    display:grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(350px,.85fr);

    gap:18px;

    overflow:hidden;
}


/* ============================================================
   23. PAGO
   ============================================================ */

.register-pc .rp-payment-card,
.register-pc .rp-summary-card-main{

    padding:19px;

    overflow:hidden;
}


/* ============================================================
   23b. CONTENIDO INTERNO DEL FORMULARIO DE PAGO Y DEL RESUMEN
   AL 90%
   Se escala el contenido (no la tarjeta en sí, que conserva su
   fondo/borde/radio) para ganar aire y evitar recortes, sin
   tocar proporciones: mismo factor en ancho y alto. Solo afecta
   al paso 2 (pago + resumen); el paso 1 queda a su tamaño real.
   ============================================================ */

.register-pc .rp-payment-card > *,
.register-pc .rp-summary-card-main > *{

    transform:scale(.9);
    transform-origin:top left;
}


/* header */

.register-pc .rp-payment-heading,
.register-pc .rp-summary-heading{

    display:flex;
    align-items:center;

    gap:11px;

    padding-bottom:12px;

    border-bottom:1px solid rgba(255,255,255,.065);
}


/* insignia del icono */

.register-pc .rp-payment-heading-icon,
.register-pc .rp-summary-heading-icon{

    width:42px;
    height:42px;
    min-width:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            var(--rp-purple),
            var(--rp-purple-2)
        );

    box-shadow:
        0 0 18px rgba(139,92,246,.32);
}

.register-pc .rp-payment-heading-icon svg,
.register-pc .rp-summary-heading-icon svg{

    width:21px;
    height:21px;
}

.register-pc .rp-payment-heading h2,
.register-pc .rp-summary-heading h2{

    margin:0;

    color:#fff;

    font-size:18px;

    font-weight:750;
}

.register-pc .rp-payment-heading p{

    margin:3px 0 0;

    color:#969db3;

    font-size:10px;
}


/* ============================================================
   24. BILLING (Datos de facturación)
   ============================================================ */

.register-pc .rp-billing{

    padding:13px 0;

    border-bottom:1px solid rgba(255,255,255,.065);
}

.register-pc .rp-section-title{

    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:9px;

    color:#e7e6ef;

    font-size:12px;

    font-weight:650;
}

.register-pc .rp-section-title svg{

    width:17px;
    height:17px;

    color:var(--rp-purple);
}

.register-pc .rp-billing-grid{

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:8px;
}

.register-pc .rp-billing-box{

    padding:9px 11px;

    border-radius:10px;

    background:rgba(0,0,0,.3);

    border:1px solid var(--rp-field-border);
}

.register-pc .rp-billing-box small{

    display:block;

    margin-bottom:3px;

    color:#8d95aa;

    font-size:9px;
}

.register-pc .rp-billing-box strong{

    display:block;

    color:#e9e9f1;

    font-size:11px;
}


/* ============================================================
   24b. MÉTODO DE PAGO — CAMPOS PROPIOS
   (Número de tarjeta, Fecha de caducidad, CVC, País)
   Estilo según spec: fondo semi-transparente, borde sutil,
   radio 10-12px, iconos integrados a la derecha.
   ============================================================ */

.register-pc .rp-payment-fields{

    padding-top:13px;
}

.register-pc .rp-payment-fields .rp-field-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:8px;
}

.register-pc .rp-payment-fields .rp-field-row:first-child{
    margin-top:0;
}

.register-pc .rp-payment-fields label{

    display:block;

    margin-bottom:5px;

    color:#c9c9e0;

    font-size:11px;

    font-weight:600;
}

.register-pc .rp-payment-fields .rp-input-wrap{

    position:relative;

    width:100%;
}

.register-pc .rp-payment-fields input,
.register-pc .rp-payment-fields select{

    width:100%;

    height:46px;

    padding:0 42px 0 14px;

    border-radius:12px;

    border:1px solid var(--rp-field-border);

    background:rgba(0,0,0,.3);

    color:#e5e5f0;

    font-size:13px;

    outline:0;

    appearance:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.register-pc .rp-payment-fields input::placeholder{

    color:var(--rp-muted-2);

    opacity:1;
}

.register-pc .rp-payment-fields input:focus,
.register-pc .rp-payment-fields select:focus{

    border-color:rgba(139,92,246,.55);

    box-shadow:0 0 0 2px rgba(139,92,246,.10);
}

/* iconos integrados a la derecha del input
   (calendario en fecha, candado/CVC en código, flecha en select) */

.register-pc .rp-payment-fields .rp-input-icon{

    position:absolute;

    right:14px;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;

    color:#8d95aa;

    pointer-events:none;
}

.register-pc .rp-payment-fields .rp-input-icon svg{
    width:18px;
    height:18px;
}

/* logos de tarjetas (Visa / Mastercard / Amex) alineados a la
   derecha dentro del input de "Número de tarjeta" */

.register-pc .rp-card-number-wrap .rp-card-brands{

    position:absolute;

    right:12px;
    top:50%;

    transform:translateY(-50%);

    display:flex;

    gap:5px;
}

.register-pc .rp-card-number-wrap .rp-card-brands img,
.register-pc .rp-card-number-wrap .rp-card-brands svg{

    height:16px;

    width:auto;

    border-radius:3px;
}


/* ============================================================
   25. STRIPE

   NOTA IMPORTANTE:
   Los campos internos (Número de tarjeta, Fecha de caducidad,
   CVC, País e iconos de Visa/Mastercard/Amex) los dibuja Stripe
   dentro de un <iframe> de otro dominio (js.stripe.com). El CSS
   de esta hoja NO puede modificar lo que hay dentro de ese
   iframe por seguridad del navegador (sandboxing de origen
   cruzado). Solo se puede afinar aquí el contenedor que lo
   envuelve (fondo, borde, radio, padding) — ver bloque 24b para
   una versión de los campos propia (no-Stripe) ya adaptada a la
   paleta nueva.

   Para que el interior de esos campos (colores, tipografía,
   radios) coincida exactamente con el tema oscuro/morado del
   sitio, hay que pasar un objeto de "appearance" a la Stripe
   Elements API en el momento en que se crea el elemento — eso
   ocurre en el script del addon Stripe Connect de Paid
   Membership Subscriptions, no en este archivo. Sugerencia de
   objeto appearance para ese addon (colores ya alineados a la
   nueva paleta):

   {
     theme: 'night',
     variables: {
       colorPrimary: '#8b5cf6',
       colorBackground: '#1a1a2e',
       colorText: '#e5e5f0',
       colorDanger: '#ff7084',
       borderRadius: '12px'
     },
     rules: {
       '.Input': {
         border: '1px solid #2a2a40',
         backgroundColor: 'rgba(0,0,0,.3)'
       },
       '.Input:focus': {
         border: '1px solid rgba(139,92,246,.55)',
         boxShadow: '0 0 0 2px rgba(139,92,246,.10)'
       }
     }
   }

   Revisa si ese addon expone alguna opción de tema/appearance,
   o contacta al soporte del plugin para pasar este objeto.
   ============================================================ */

.register-pc .rp-stripe{

    padding-top:13px;
}

.register-pc .rp-stripe-target{

    width:100%;

    max-height:270px;

    overflow:hidden;
}


/* contenedor real */

.register-pc .rp-stripe-target
#pms-stripe-connect{

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}

.register-pc .rp-stripe-target
#pms-stripe-payment-elements{

    width:100% !important;

    margin-top:7px !important;

    padding:14px !important;

    border-radius:12px !important;

    border:1px solid rgba(139,92,246,.28) !important;

    background:#0e1424 !important;

    box-sizing:border-box !important;
}


/* heading PMS */

.register-pc .rp-stripe-target
.pms-field-type-heading{

    display:none !important;
}


/* ============================================================
   26. SUBMIT / BOTÓN "Pagar y activar membresía"
   ============================================================ */

.register-pc .rp-submit-container{

    margin-top:10px;

    width:100%;
}

.register-pc .rp-submit-container
.pms-form-submit,
.register-pc .rp-pay-button{

    width:100% !important;

    min-height:48px !important;

    height:50px !important;

    margin:0 !important;

    padding:0 18px !important;

    border:0 !important;

    border-radius:12px !important;

    background:
        linear-gradient(
            135deg,
            var(--rp-btn-from),
            var(--rp-btn-to)
        ) !important;

    color:#fff !important;

    font-size:15px !important;

    font-weight:700 !important;

    cursor:pointer !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    box-shadow:
        0 8px 25px rgba(124,58,237,.28) !important;

    transition:
        filter .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}

.register-pc .rp-submit-container
.pms-form-submit:hover,
.register-pc .rp-pay-button:hover{

    filter:brightness(1.08);

    transform:translateY(-1px);

    box-shadow:
        0 11px 30px rgba(124,58,237,.38) !important;
}

/* texto de seguridad bajo el botón */

.register-pc .rp-secure-note{

    margin-top:9px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    text-align:center;

    color:#9ca3af;

    font-size:10px;
}

.register-pc .rp-secure-note svg{
    width:12px;
    height:12px;
}


/* volver */

.register-pc .rp-back{

    width:100%;

    height:34px;

    margin-top:7px;

    border:1px solid rgba(255,255,255,.09);

    border-radius:7px;

    background:transparent;

    color:#9da3b7;

    font-size:10px;

    cursor:pointer;
}


/* ============================================================
   27. RESUMEN
   ============================================================ */

.register-pc .rp-selected-plan{

    margin-top:12px;

    padding:13px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.055);

    background:
        linear-gradient(
            145deg,
            rgba(20,20,36,.95),
            rgba(15,15,26,.96)
        );
}

.register-pc .rp-selected-plan-header{

    display:flex;
    align-items:center;

    gap:10px;
}

.register-pc .rp-summary-icon{

    width:50px;
    height:50px;
    min-width:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:var(--rp-accent);

    background:
        radial-gradient(
            circle,
            rgba(168,85,247,.26),
            rgba(58,20,95,.04)
        );

    border:1px solid rgba(168,85,247,.15);
}

.register-pc .rp-summary-icon svg{

    width:27px;
    height:27px;
}

.register-pc .rp-summary-name{

    margin:0 0 4px;

    color:#fff;

    font-size:16px;
}

.register-pc .rp-summary-duration{

    display:inline-block;

    padding:3px 7px;

    border-radius:4px;

    color:#c675ff;

    background:rgba(139,92,246,.15);

    font-size:9px;
}


/* beneficios */

.register-pc .rp-summary-benefits{

    display:flex;
    flex-direction:column;

    gap:7px;

    margin-top:12px;
}

.register-pc .rp-summary-benefit{

    display:flex;
    align-items:center;

    gap:7px;

    color:#d6d6e0;

    font-size:10px;
}

.register-pc .rp-check{

    width:15px;
    height:15px;
    min-width:15px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            var(--rp-purple),
            var(--rp-purple-2)
        );

    color:#fff;

    font-size:8px;
}


/* ============================================================
   28. DETALLE PEDIDO
   Total destacado en violeta brillante (--rp-accent).
   ============================================================ */

.register-pc .rp-order{

    margin-top:12px;

    padding-top:12px;

    border-top:1px solid rgba(255,255,255,.065);
}

.register-pc .rp-order h3{

    margin:0 0 7px;

    color:#fff;

    font-size:14px;
}

.register-pc .rp-order-row{

    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:12px;

    padding:4px 0;

    color:#969caf;

    font-size:10px;
}

.register-pc .rp-order-row strong{

    color:#dddde6;

    text-align:right;
}

.register-pc .rp-total{

    margin-top:6px;

    padding-top:9px;

    border-top:1px solid rgba(255,255,255,.07);

    font-size:12px;
}

.register-pc .rp-total strong{

    color:var(--rp-accent);

    font-size:21px;
}


/* ============================================================
   29. BARRA INFERIOR
   3 columnas con iconos morados (acceso, cancelación, soporte)
   ============================================================ */

.register-pc .rp-bottom-benefits{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:46px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:10px;

    padding:5px 15px;

    border:1px solid var(--rp-border);

    border-radius:10px;

    background:
        linear-gradient(
            145deg,
            rgba(18,18,32,.97),
            rgba(11,11,20,.98)
        );
}

.register-pc .rp-bottom-benefit{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;
}

.register-pc .rp-bottom-benefit-icon{

    width:29px;
    height:29px;
    min-width:29px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    color:var(--rp-purple);

    background:rgba(139,92,246,.10);
}

.register-pc .rp-bottom-benefit-icon svg{

    width:15px;
    height:15px;
}

.register-pc .rp-bottom-benefit strong{

    display:block;

    margin-bottom:1px;

    color:#eeeef4;

    font-size:10px;
}

.register-pc .rp-bottom-benefit span{

    display:block;

    color:#858ca1;

    font-size:8px;
}


/* ============================================================
   30. OCULTAR PMS ORIGINAL
   ============================================================ */

.register-pc .rp-original-hidden{
    display:none !important;
}


/* ============================================================
   31. ERRORES
   ============================================================ */

.register-pc .pms-field-error,
.register-pc .pms-error{

    color:#ff7084 !important;

    font-size:10px !important;
}

.register-pc .pms-form-errors-wrapper{

    margin:0 0 8px !important;

    padding:7px !important;

    border-radius:7px !important;

    background:rgba(255,67,96,.08) !important;

    border:1px solid rgba(255,67,96,.20) !important;
}


/* ============================================================
   32. SOLO PC
   ============================================================ */

@media(max-width:767px){

    .register-pc{
        display:none !important;
    }

}


/* ============================================================
   33. PANTALLAS PC PEQUEÑAS
   ============================================================ */

@media(min-width:768px) and (max-width:1200px){

    .register-pc .rp-register-layout{

        grid-template-columns:
            330px
            minmax(0,1fr);
    }

    .register-pc .rp-top-benefits{
        display:none;
    }

    .register-pc .rp-plan-columns{
        gap:8px;
    }

    .register-pc .rp-plan-card{
        padding-left:9px;
        padding-right:9px;
    }

}/* End custom CSS */