:root {

    --navy: #0d1b2a;

    --turquesa: #17bebb;

    --coral: #ff6b6b;

    --dorado: #f2b705;

    --morado: #8e44ad;



    --fondo: #f7f8fb;

    --blanco: #ffffff;

    --texto: #182236;

    --gris: #667085;

    --borde: #e6e8ee;

}



* {

    box-sizing: border-box;

}



[hidden] {

    display: none !important;

}



body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: var(--fondo);

    color: var(--texto);

    max-width: 100%;

    overflow-x: clip;

}



button {

    font: inherit;

}





/* HEADER */



.header {

    height: 90px;

    background: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 clamp(18px,3vw,40px);

    border-bottom: 1px solid var(--borde);

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 4px 18px rgba(13,27,42,.06);

}



.marca {

    display: flex;

    align-items: center;

    gap: 12px;

}



.header-acciones {

    display: flex;

    gap: 10px;

    align-items: center;

}



.header-acciones > a,

.header-acciones .cuenta-header a {

    min-height: 38px;

    padding: 9px 15px;

    border: 1px solid #d9dee8;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #fff;

    color: #334155 !important;

    font-size: 13px;

    font-weight: 800;

    white-space: nowrap;

    transition: transform .2s ease,border-color .2s ease,background .2s ease;

}



.header-acciones > a:hover,

.header-acciones .cuenta-header a:hover {

    border-color: var(--turquesa);

    background: #effcfc;

    transform: translateY(-1px);

}



.header-acciones .cuenta-header-login {

    border-color: var(--navy);

    background: var(--navy);

    color: #fff !important;

}



.usuario {

    font-weight: 600;

}





/* ESTRUCTURA */



.constructor {

    width: min(1500px, calc(100% - 32px));

    max-width: 1500px;

    margin: 20px auto;

    padding: 0;



    display: grid;

    grid-template-columns:

        minmax(230px, 280px)

        minmax(0, 1fr)

        minmax(300px, 360px);



    gap: 18px;

}



.pasos,

.contenido,

.preview {

    min-width: 0;

    background: white;

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

    border-radius: 18px;

}



.pasos {

    padding: 25px 18px;

}



.pasos h1 {

    margin: 0;

    font-size: 26px;

}



.subtitulo-lateral {

    color: var(--gris);

    margin-bottom: 30px;

}





/* PASOS */



.paso {

    min-height: 85px;

    padding: 12px;

    border-radius: 12px;



    display: flex;

    gap: 14px;

    align-items: center;



    margin-bottom: 10px;

}



.paso.activo {

    background:

        linear-gradient(

            90deg,

            #f7f2ff,

            #fff

        );

}



.numero {

    flex: 0 0 40px;

    height: 40px;



    border-radius: 50%;



    display: grid;

    place-items: center;



    color: white;

    font-weight: 700;

}



.morado {

    background: var(--morado);

}



.turquesa {

    background: var(--turquesa);

}



.coral {

    background: var(--coral);

}



.dorado {

    background: var(--dorado);

}



.violeta {

    background: #7450a8;

}



.paso strong,

.paso small {

    display: block;

}



.paso small {

    margin-top: 6px;

    color: var(--gris);

}



.mensaje-facil {

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

    border-radius: 14px;



    margin-top: 35px;

    padding: 18px;



    background:

        linear-gradient(

            135deg,

            #faf8ff,

            #fff

        );

}



.mensaje-facil p {

    font-size: 13px;

    color: var(--gris);

}



.aviso-guardado-lateral{

    display:flex;

    align-items:flex-start;

    gap:9px;

    margin-top:12px;

    padding:12px;

    border:1px solid #dfe8ec;

    border-radius:12px;

    background:linear-gradient(135deg,#f2fcfc,#fff);

}



.aviso-guardado-lateral strong{display:block;font-size:13px;color:var(--navy)}

.aviso-guardado-lateral p{margin:4px 0 0;color:var(--gris);font-size:11px;line-height:1.35}





/* CONTENIDO */



.contenido {

    padding: 28px;

}



.titulo-seccion {

    display: flex;

    gap: 15px;

    align-items: center;



    margin-bottom: 25px;

}



.titulo-seccion h2 {

    margin: 0;

    font-size: 25px;

}



.titulo-seccion p {

    margin: 5px 0 0;

    color: var(--gris);

}



.confeti {

    color: var(--dorado);

    font-size: 35px;

}





/* EVENTOS */



.eventos {

    display: grid;

    grid-template-columns:

        repeat(3, minmax(150px, 1fr));



    gap: 20px;

}



.evento-card {

    min-height: 235px;



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

    background: white;

    border-radius: 16px;



    cursor: pointer;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    position: relative;



    transition:

        transform .2s,

        box-shadow .2s,

        border-color .2s;

}



.evento-card:hover {

    transform: translateY(-4px);



    box-shadow:

        0 15px 35px

        rgba(13, 27, 42, .08);

}



.evento-card.seleccionado {

    border: 2px solid var(--turquesa);



    box-shadow:

        0 10px 30px

        rgba(23, 190, 187, .15);

}



.evento-icono {

    width: 90px;

    height: 90px;



    display: grid;

    place-items: center;



    border-radius: 50%;



    background:

        linear-gradient(

            135deg,

            #f8efff,

            #eefbfb

        );



    font-size: 44px;



    margin-bottom: 18px;

}



.evento-card strong {

    font-size: 19px;

}



.flecha {

    position: absolute;



    bottom: 16px;

    right: 16px;



    width: 30px;

    height: 30px;



    border-radius: 50%;



    display: grid;

    place-items: center;



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

    color: var(--coral);



    font-size: 24px;

}



.ayuda {

    margin-top: 35px;



    display: flex;

    gap: 12px;

    align-items: center;



    padding: 17px;



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

    border-radius: 14px;



    color: var(--gris);

}



.ayuda p {

    margin: 0;

}



.btn-continuar {

    width: 220px;

    height: 52px;



    margin: 25px 0 0 auto;



    border: none;

    border-radius: 12px;



    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;



    background:

        linear-gradient(

            90deg,

            var(--turquesa),

            var(--coral)

        );



    color: white;

    font-weight: 700;

    cursor: pointer;

}



.btn-continuar:disabled {

    opacity: .35;

    cursor: not-allowed;

}





/* PREVIEW */



.preview {

    padding: 20px;



    display: flex;

    flex-direction: column;

    align-items: center;

}



.preview-titulo {

    margin-bottom: 15px;

    font-weight: 600;

}



.preview-titulo span {

    color: var(--gris);

    font-weight: normal;

}



.telefono {

    width: 280px;

    height: 570px;



    padding: 10px;



    background: #06070b;



    border-radius: 45px;



    box-shadow:

        0 22px 45px

        rgba(0,0,0,.25);



    position: relative;

}



.telefono-notch {

    position: absolute;



    width: 130px;

    height: 27px;



    background: black;



    border-radius: 0 0 18px 18px;



    left: 50%;

    top: 7px;



    transform: translateX(-50%);



    z-index: 2;

}



.telefono-pantalla {

    height: 100%;



    border-radius: 36px;



    overflow: hidden;



    color: white;



    background:

        radial-gradient(

            circle at 10% 20%,

            rgba(142,68,173,.25),

            transparent 35%

        ),

        radial-gradient(

            circle at 90% 80%,

            rgba(23,190,187,.18),

            transparent 35%

        ),

        var(--navy);



    position: relative;

    isolation: isolate;

}



/* Conserva legibles los textos cuando la fotografía seleccionada es clara. */

.telefono-pantalla::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background: linear-gradient(

        180deg,

        rgba(4, 12, 24, .30) 0%,

        rgba(4, 12, 24, .08) 38%,

        rgba(4, 12, 24, .22) 100%

    );

}



.preview-logo {

    text-align: center;

    padding: 45px 10px 18px;



    font-weight: 800;

    font-size: 18px;

    color: #fff;

    text-shadow: 0 2px 5px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.45);

}



.preview-logo span {

    color: var(--coral);

}



.preview-logo small {

    display: block;



    margin-top: 7px;



    font-size: 7px;

    letter-spacing: 2px;

}



.invitacion-demo {

    margin: 10px 20px;



    padding: 28px 18px;



    border-radius: 18px;



    text-align: center;



    background: rgba(8, 20, 35, .34);



    box-shadow: 0 8px 22px rgba(0,0,0,.16);

    backdrop-filter: blur(2px);

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



    border:

        1px solid

        rgba(255,255,255,.24);

}



/* V20: dentro del teléfono solo se presenta la invitación del cliente. */

.telefono-pantalla.preview-cliente{

    box-sizing:border-box;

    padding-top:48px;

}

.telefono-pantalla.preview-cliente>.invitacion-demo{

    margin-top:8px;

}

@media (min-width:1201px) and (max-height:950px){

    .telefono-pantalla.preview-cliente{padding-top:38px}

}



/* V24: la muestra del fondo queda centrada dentro del teléfono. */

.telefono-pantalla.preview-fondo-centrado{

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;

    padding:30px 0 18px!important;

}

.telefono-pantalla.preview-fondo-centrado>.invitacion-demo{

    width:calc(100% - 28px)!important;

    margin:0 14px!important;

    box-sizing:border-box!important;

}



.invitacion-demo > p,

.invitacion-demo .fecha-demo {

    color: #fff;

    text-shadow: 0 2px 5px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.70);

}



.mini-confeti {

    color: var(--dorado);

}



.invitacion-demo h3 {

    font-size: 30px;



    background:

        linear-gradient(

            90deg,

            var(--morado),

            var(--coral),

            var(--dorado)

        );



    -webkit-background-clip: text;

    color: transparent;

}



.linea {

    width: 60px;

    height: 2px;



    margin: 20px auto;



    background: var(--turquesa);

}



.fecha-demo {

    display: flex;

    gap: 15px;



    align-items: center;

    justify-content: center;



    font-size: 18px;

}



.invitacion-demo button {

    margin-top: 20px;



    border: none;



    padding:

        12px 18px;



    border-radius: 25px;



    color: white;



    background:

        linear-gradient(

            90deg,

            var(--turquesa),

            var(--morado),

            var(--coral)

        );

}



.funciones-demo {

    margin-top: 28px;



    display: flex;

    justify-content: space-between;



    font-size: 20px;

}



.funciones-demo small {

    display: block;



    margin-top: 6px;



    font-size: 7px;

    text-transform: uppercase;

}



.guardado {

    margin-top: 18px;



    font-size: 13px;



    color: var(--gris);

}





/* FOOTER */



footer {

    min-height: 75px;



    display: flex;

    align-items: center;

    justify-content: center;



    background: var(--navy);



    color: white;



    font-size: 16px;

}





/* RESPONSIVE */



@media (max-width: 1200px) {



    .constructor {

        grid-template-columns:

            250px 1fr;

    }



    .preview {

        grid-column:

            1 / -1;

    }



}



@media (max-width: 780px) {



    .header {

        padding:

            15px 20px;



        height: auto;

        gap: 10px;

    }



    .header-acciones {

        display: flex;

        gap: 10px;

        font-size: 12px;

        margin-left:auto;

    }



    .logo-principal{width:210px}



    .constructor {

        grid-template-columns: 1fr;

    }



    .pasos {display:flex;gap:7px;padding:10px;overflow-x:auto;border-radius:14px;scroll-snap-type:x proximity}

    .pasos>h1,.pasos>.subtitulo-lateral,.pasos>.mensaje-facil{display:none}

    .pasos .paso{flex:0 0 145px;min-height:58px;margin:0;padding:8px;scroll-snap-align:start}

    .pasos .numero{flex-basis:30px;height:30px;font-size:12px}

    .pasos .paso strong{font-size:13px}.pasos .paso small{font-size:10px;margin-top:3px}



    .eventos {

        grid-template-columns:

            repeat(2, 1fr);

    }



    .evento-card {

        min-height: 170px;

    }



    .preview {

        display: none;

    }



    .publicar-preview{display:flex}.publicar-preview .telefono{width:min(315px,90vw);height:620px}

    .contenido{padding:20px 15px}.titulo-seccion h2{font-size:21px}

    .acciones-personalizar{position:sticky;bottom:0;z-index:8;padding:10px;background:rgba(255,255,255,.96);border-top:1px solid var(--borde)}

    .acciones-personalizar .btn-continuar{width:100%;margin:0}



}



@media (max-width: 500px) {



    .header{padding:10px 12px;align-items:center}

    .logo-principal{width:145px}

    .header-acciones{width:100%;justify-content:flex-end;overflow-x:auto;padding-bottom:2px}

    .header-acciones > a,.header-acciones .cuenta-header a{min-height:34px;padding:7px 10px;font-size:11px}



    .eventos {

        grid-template-columns: 1fr;

    }



}

.logo-principal {

    width: 280px;

    max-width: 100%;

    max-height: 78px;

    object-fit: contain;

    height: auto;

    display: block;

}



@media (min-width:1201px){

    .constructor>.pasos,

    .constructor>.preview{position:sticky;top:108px;align-self:start;max-height:calc(100vh - 126px);overflow:auto}

    .telefono{max-width:100%;margin-left:auto;margin-right:auto}

}



@media (max-width:780px){

    .header .logo-principal{width:210px}

    .constructor{width:min(100% - 20px,1500px)}

}



@media (max-width:500px){

    .header .logo-principal{width:145px}

}



.logo-icono-preview {

    width: 105px;

    height: auto;

    display: block;

    margin: 0 auto 12px;

}

.plantillas-grid {

    display: grid;

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

    gap: 14px;

}



.plantilla-card {

    padding: 0;

    overflow: hidden;

    background: #fff;

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

    border-radius: 18px;

    cursor: pointer;

    text-align: left;

    transition: .2s ease;

}



.plantilla-miniatura-boton{

    display:block;

    width:100%;

    padding:0;

    border:0;

    background:none;

    color:inherit;

    cursor:pointer;

}



.plantilla-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 35px rgba(13,27,42,.10);

}



.plantilla-card.seleccionada {

    border: 2px solid var(--turquesa);

    box-shadow: 0 12px 35px rgba(23,190,187,.18);

}



.plantilla-miniatura {

    height: 235px;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;



    gap: 15px;



    position: relative;

    background-size: cover;

    background-position: center;

}



.plantilla-miniatura:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.10));pointer-events:none}

.plantilla-miniatura>*{position:relative;z-index:1;text-shadow:0 1px 6px rgba(255,255,255,.85)}

.plantilla-miniatura .plantilla-demo-texto,

.plantilla-miniatura small{color:var(--color-diseno,#182236);text-shadow:0 1px 5px rgba(255,255,255,.92),0 0 2px rgba(255,255,255,.9)}



.plantilla-demo-texto {

    font-size: 22px;

    font-weight: 600;

}



.plantilla-jardin-romantico {

    background:

        radial-gradient(circle at 20% 20%, #f7dce5, transparent 30%),

        radial-gradient(circle at 80% 80%, #dcebdd, transparent 35%),

        #fffaf8;



    color: #9c5670;

}



.plantilla-noche-elegante {

    background:

        radial-gradient(circle at 50% 10%, #293a55, transparent 35%),

        #0d1b2a;



    color: #f2b705;

}



.plantilla-minimal-dorado {

    background:

        linear-gradient(135deg, #fffdf7, #f8f2e4);



    color: #b58a2a;

}



.plantilla-corona-estelar{background:radial-gradient(circle at 50% 15%,#fff0b8,transparent 28%),linear-gradient(145deg,#4b176b,#be5cc7);color:#fff4c7}

.plantilla-confeti-alegre{background:radial-gradient(circle at 15% 20%,#ffd166 0 7%,transparent 8%),radial-gradient(circle at 85% 75%,#17bebb 0 8%,transparent 9%),linear-gradient(145deg,#fff7ea,#ffe4ec);color:#e74773}

.plantilla-cielo-de-paz{background:linear-gradient(150deg,#fafdff,#dcefff);color:#4c7da0}

.plantilla-dulce-espera{background:radial-gradient(circle at 20% 20%,#ffdce7,transparent 35%),radial-gradient(circle at 80% 80%,#dceeff,transparent 35%),#fffdf9;color:#9a6382}

.plantilla-meta-cumplida{background:linear-gradient(145deg,#0d1b2a,#244563);color:#f2b705}

.plantilla-mexico-de-fiesta{background:linear-gradient(110deg,#0b7a45 0 33%,#fff 33% 66%,#c92b35 66%);color:#16243a;text-shadow:0 1px 0 #fff}

.plantilla-noche-encantada{background:radial-gradient(circle at 75% 20%,#ffb000 0 9%,transparent 10%),linear-gradient(145deg,#160d25,#3a1763);color:#ffb347}

.plantilla-luz-de-navidad{background:radial-gradient(circle at 50% 15%,#ffe39a,transparent 24%),linear-gradient(145deg,#0b5136,#0d2d25);color:#fff0bf}



.preview-plantilla.corona-estelar{background:linear-gradient(145deg,#4b176b,#be5cc7);color:#fff}

.preview-plantilla.confeti-alegre{background:linear-gradient(145deg,#fff7ea,#ffe4ec);color:#9c3150}

.preview-plantilla.cielo-de-paz{background:linear-gradient(150deg,#fafdff,#dcefff);color:#365d79}

.preview-plantilla.dulce-espera{background:linear-gradient(145deg,#fff5f8,#eef7ff);color:#80526c}

.preview-plantilla.meta-cumplida{background:linear-gradient(145deg,#0d1b2a,#244563);color:#fff}

.preview-plantilla.mexico-de-fiesta{background:linear-gradient(120deg,#0b7a45,#fff 50%,#c92b35);color:#172033}

.preview-plantilla.noche-encantada{background:linear-gradient(145deg,#160d25,#3a1763);color:#fff}

.preview-plantilla.luz-de-navidad{background:linear-gradient(145deg,#0b5136,#0d2d25);color:#fff}



.plantilla-info {

    padding: 12px;



    display: flex;

    justify-content: center;

    align-items: center;

    min-height:54px;

    text-align:center;

}



.plantilla-nombre-avanzar{

    width:100%;

    padding:2px 0;

    border:0;

    background:none;

    color:var(--color-diseno,var(--navy));

    font-size:clamp(12px,1vw,14px);

    font-weight:800;

    text-align:center;

    cursor:pointer;

    line-height:1.15;

    overflow-wrap:anywhere;

}



.plantilla-nombre-avanzar:hover{color:#087f7d;text-decoration:underline}

.plantilla-nombre-avanzar:focus-visible{outline:2px solid var(--turquesa);outline-offset:4px;border-radius:4px}



.aviso-flotante-diseno{

    position:fixed;

    z-index:2000;

    padding:8px 11px;

    border:1px solid #fff1a8;

    border-radius:9px;

    background:linear-gradient(135deg,#FFE66D,#FFB84D);

    color:#273142;

    font-size:11px;

    font-weight:800;

    box-shadow:0 8px 22px rgba(13,27,42,.28);

    opacity:0;

    pointer-events:none;

    transition:opacity .16s ease;

    white-space:nowrap;

}



.aviso-flotante-diseno.visible{opacity:1}



.preview-tipo-evento{display:inline-block;margin-bottom:4px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.72);color:#334155;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;text-shadow:none}



.plantilla-info strong {

    font-size: 17px;

}



.plantilla-info span {

    color: var(--coral);

    font-size: 13px;

}



.acciones-plantilla {

    margin-top: 30px;



    display: flex;

    justify-content: space-between;

    align-items: center;

}



.btn-volver {

    color: var(--gris);

    text-decoration: none;

}



.preview-plantilla.jardin-romantico {

    background:

        radial-gradient(circle at 20% 20%, rgba(255,190,210,.20), transparent 35%),

        #fff8f6;



    color: #182236;

}



.preview-plantilla.noche-elegante {

    background: #0d1b2a;

    color: white;

}



.preview-plantilla.minimal-dorado {

    background:

        linear-gradient(160deg, #fffdf8, #f4ead4);



    color: #182236;

}



@media (max-width: 900px) {

    .plantillas-grid {

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

    }

}



@media (max-width:500px){

    .plantillas-grid{grid-template-columns:1fr}

    .plantilla-miniatura{height:280px}

    .aviso-flotante-diseno{white-space:normal;max-width:210px;text-align:center}

}

.form-personalizar {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.campo {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.campo-completo {

    grid-column: 1 / -1;

}



.campo label {

    font-weight: 700;

    color: var(--texto);

}



.campo input,

.campo textarea {

    width: 100%;

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

    border-radius: 12px;

    padding: 14px 15px;

    font: inherit;

    color: var(--texto);

    background: #fff;

    outline: none;

}



.campo input:focus,

.campo textarea:focus {

    border-color: var(--turquesa);

    box-shadow:

        0 0 0 3px

        rgba(23,190,187,.10);

}



.campo textarea {

    resize: vertical;

}



.colores-rapidos {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}



.color-opcion {

    width: 48px;

    height: 48px;



    border-radius: 50%;



    border: 3px solid white;



    background: var(--color);



    box-shadow:

        0 0 0 1px var(--borde);



    cursor: pointer;

}



.color-opcion.seleccionado {

    box-shadow:

        0 0 0 3px var(--navy);

}



.acciones-personalizar {

    margin-top: 30px;



    display: flex;

    justify-content: space-between;

    align-items: center;

}



.mensaje-preview {

    font-size: 13px;

    line-height: 1.5;

    opacity: .85;

    min-height: 38px;

}



@media (max-width: 700px) {



    .form-personalizar {

        grid-template-columns: 1fr;

    }



    .campo-completo {

        grid-column: auto;

    }



}

.selector-planes {

    display: grid;

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

    gap: 15px;

    margin-bottom: 20px;

}



.plan-card {

    min-height: 80px;

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

    border-radius: 15px;

    background: white;

    cursor: pointer;

    position: relative;

    font-size: 17px;

}



.plan-card.seleccionado {

    border: 2px solid var(--turquesa);

    background: #f2ffff;

    box-shadow:

        0 8px 25px

        rgba(23,190,187,.12);

}



.badge-plan {

    display: block;

    width: max-content;

    margin: 6px auto 0;

    padding: 4px 9px;

    border-radius: 20px;

    background: var(--navy);

    color: white;

    font-size: 10px;

}



.nota-plan {

    margin-bottom: 25px;

    padding: 13px 15px;

    background: #fffaf0;

    border: 1px solid #f3e4ba;

    border-radius: 12px;

    font-size: 13px;

    color: var(--gris);

}



.funciones-grid {

    display: grid;

    grid-template-columns:

        repeat(2, minmax(250px, 1fr));

    gap: 14px;

}



.funcion-card {

    min-height: 105px;

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

    border-radius: 15px;

    padding: 16px;



    display: grid;

    grid-template-columns:

        48px 1fr auto;



    gap: 12px;

    align-items: center;



    background: white;

}



.funcion-bloqueada {

    opacity: .48;

    background: #f8f8f8;

}



.funcion-icono {

    width: 44px;

    height: 44px;



    border-radius: 13px;



    display: grid;

    place-items: center;



    background:

        linear-gradient(

            135deg,

            #eefafa,

            #faf2ff

        );



    font-size: 21px;

}



.funcion-texto strong,

.funcion-texto small {

    display: block;

}



.funcion-texto small {

    margin-top: 5px;

    color: var(--gris);

    line-height: 1.35;

}



.funcion-control {

    text-align: center;

}



.bloqueada {

    font-size: 17px;

}





/* SWITCH */



.switch {

    position: relative;

    display: inline-block;

    width: 46px;

    height: 25px;

}



.switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.slider {

    position: absolute;

    cursor: pointer;



    inset: 0;



    background: #ccd0d8;



    border-radius: 25px;



    transition: .2s;

}



.slider::before {

    content: "";



    position: absolute;



    width: 19px;

    height: 19px;



    left: 3px;

    top: 3px;



    background: white;



    border-radius: 50%;



    transition: .2s;

}



.switch input:checked + .slider {

    background:

        linear-gradient(

            90deg,

            var(--turquesa),

            var(--morado)

        );

}



.switch input:checked + .slider::before {

    transform: translateX(21px);

}



.preview-funciones {

    margin-top: 20px;

    text-align: left;

}



.preview-funcion {

    padding: 7px 0;

    font-size: 11px;

    border-bottom:

        1px solid

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

}



@media (max-width: 900px) {



    .funciones-grid {

        grid-template-columns: 1fr;

    }



    .selector-planes {

        grid-template-columns: 1fr;

    }



}

.constructor-funciones {

    grid-template-columns:

        320px

        minmax(0, 1fr);



    max-width: 1450px;

}



.constructor-funciones .contenido {

    width: 100%;

}



@media (min-width: 1300px) {



    .constructor-funciones .funciones-grid {

        grid-template-columns:

            repeat(3, minmax(260px, 1fr));

    }



}



/* Paso 3 compacto: más funciones visibles en computadora sin reducir legibilidad. */

@media (min-width:1100px){

    .constructor-funciones{

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

        max-width:1500px;

    }

    .constructor-funciones .contenido{padding:18px 22px}

    .constructor-funciones .titulo-seccion{margin-bottom:12px}

    .constructor-funciones .selector-planes{gap:12px;margin-bottom:14px}

    .constructor-funciones .plan-card{

        min-height:98px;

        padding:11px 13px;

        gap:4px;

    }

    .constructor-funciones .plan-nombre strong{font-size:15px}

    .constructor-funciones .plan-precio strong{font-size:24px}

    .constructor-funciones .nota-plan{

        margin-bottom:14px;

        padding:9px 13px;

        font-size:11px;

        line-height:1.35;

    }

    .constructor-funciones .funciones-grid{

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

        gap:10px;

    }

    .constructor-funciones .funcion-card{

        min-height:78px;

        padding:10px;

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

        gap:9px;

        border-radius:12px;

    }

    .constructor-funciones .funcion-icono{

        width:36px;

        height:36px;

        border-radius:10px;

        font-size:17px;

    }

    .constructor-funciones .funcion-texto strong{

        display:block;

        font-size:13px;

        line-height:1.15;

    }

    .constructor-funciones .funcion-texto small{

        display:block;

        margin-top:3px;

        font-size:10px;

        line-height:1.25;

    }

    .constructor-funciones .acciones-personalizar{margin-top:14px}

}



/* Vista compacta para computadora al 100% */

@media (min-width:1201px){

    .header{height:76px}

    .header .logo-principal{width:225px;max-height:66px}

    .constructor{width:calc(100% - 28px);max-width:1500px;grid-template-columns:210px minmax(0,1fr) 300px;gap:14px;margin:14px auto}

    .constructor>.pasos,.constructor>.preview{top:90px;max-height:none;overflow:visible}

    .pasos{padding:16px 12px}

    .pasos h1{font-size:21px}

    .subtitulo-lateral{margin:7px 0 14px;font-size:13px;line-height:1.3}

    .paso{min-height:62px;padding:8px;gap:9px;margin-bottom:6px}

    .numero{flex-basis:32px;height:32px;font-size:13px}

    .paso strong{font-size:14px}

    .paso small{margin-top:3px;font-size:11px;line-height:1.2}

    .contenido{padding:22px}

    .titulo-seccion{margin-bottom:18px}

    .titulo-seccion h2{font-size:23px}

    .eventos{gap:14px}

    .evento-card{min-height:190px}

    .evento-icono{width:72px;height:72px;margin-bottom:12px;font-size:36px}

    .evento-card strong{font-size:17px}

    .preview{padding:14px}

    .preview-titulo{margin-bottom:10px;font-size:14px}

    .telefono{width:245px;height:500px;border-radius:38px;padding:8px}

    .telefono-pantalla{border-radius:31px}

    .telefono-notch{width:105px;height:22px}

    .preview-logo{padding:36px 8px 10px;font-size:15px}

    .logo-icono-preview{width:72px;margin-bottom:7px}

    .invitacion-demo{margin:7px 14px;padding:18px 12px}

    .invitacion-demo h3{font-size:24px}

    .linea{margin:14px auto}

    .fecha-demo{font-size:15px;gap:10px}

}



/* Ajuste vertical final: permite ver completo el catálogo de eventos */

@media (min-width:1201px) and (max-height:950px){

    .header{height:66px}

    .header .logo-principal{width:195px;max-height:58px}

    .constructor{margin:10px auto}

    .constructor>.pasos,.constructor>.preview{top:76px}

    .pasos{padding:13px 10px}

    .pasos h1{font-size:19px}

    .subtitulo-lateral{margin:5px 0 10px;font-size:12px}

    .paso{min-height:52px;padding:6px;margin-bottom:4px}

    .numero{flex-basis:28px;height:28px;font-size:12px}

    .paso strong{font-size:13px}

    .paso small{font-size:10px}

    .mensaje-facil{display:none}

    .contenido{padding:16px 18px}

    .titulo-seccion{margin-bottom:12px;gap:10px}

    .titulo-seccion h2{font-size:21px}

    .titulo-seccion p{font-size:13px}

    .confeti{font-size:28px}

    .eventos{gap:10px}

    .evento-card{min-height:145px}

    .evento-icono{width:55px;height:55px;margin-bottom:8px;font-size:28px}

    .evento-card strong{font-size:15px}

    .flecha{width:25px;height:25px;right:10px;bottom:10px;font-size:18px}

    .preview{padding:10px}

    .preview-titulo{font-size:13px;margin-bottom:7px}

    .telefono{width:220px;height:430px;border-radius:34px}

    .telefono-pantalla{border-radius:27px}

    .preview-logo{padding:30px 6px 7px;font-size:13px}

    .logo-icono-preview{width:58px;margin-bottom:5px}

    .invitacion-demo{margin:5px 11px;padding:13px 9px}

    .invitacion-demo h3{font-size:21px;margin:12px 0}

    .mensaje-preview{font-size:11px}

    .linea{margin:10px auto}

    .fecha-demo{font-size:13px}

    .invitacion-demo button{margin-top:12px;padding:9px 10px;font-size:11px}

}



/* Distribución final del paso Funciones: aprovecha todo el ancho disponible. */

@media (min-width:1201px){

    .constructor.constructor-funciones{

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

    }

    .constructor-funciones .funciones-grid{

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

        gap:9px;

    }

    .constructor-funciones .funcion-card{

        min-height:72px;

        padding:9px 8px;

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

        gap:7px;

    }

    .constructor-funciones .funcion-icono{

        width:31px;

        height:31px;

        border-radius:9px;

        font-size:15px;

    }

    .constructor-funciones .funcion-texto strong{

        font-size:11.5px;

        line-height:1.12;

    }

    .constructor-funciones .funcion-texto small{

        margin-top:2px;

        font-size:8.5px;

        line-height:1.2;

    }

    .constructor-funciones .switch{

        width:38px;

        height:21px;

    }

    .constructor-funciones .slider::before{

        width:15px;

        height:15px;

    }

    .constructor-funciones .switch input:checked + .slider::before{

        transform:translateX(17px);

    }

}