*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;

background:#071421;

color:white;

display:flex;

justify-content:center;

align-items:flex-start;

min-height:100vh;

overflow-x:hidden;

overflow-y:auto;

}

.configurator{

width:100%;

padding:40px;

display:flex;

justify-content:center;

align-items:flex-start;
padding:60px 0;

}

.config-card{

max-width:1700px;
width:min(95vw,1700px);

margin:40px auto;

padding:60px;

background:#1d2d44;

border-radius:34px;

display:flex;
flex-direction:column;

gap:30px;

box-shadow:0 30px 80px rgba(0,0,0,.45);

opacity:0;
transform:translateY(40px);

transition:opacity .45s,transform .45s;

position:relative;

min-height:auto;

height:auto;

overflow:visible;

}

.config-card.show{

opacity:1;

transform:none;

}

.step{

display:inline-flex;

padding:10px 20px;

border-radius:999px;

background:rgba(0,213,255,.10);

color:#66ddff;

font-weight:600;

margin-bottom:30px;

}

.config-card h1{

font-size:clamp(48px,4vw,72px);

font-weight:800;

line-height:1.05;

margin-bottom:20px;

}

p{

font-size:22px;

line-height:1.7;

color:#cbd5e1;

max-width:700px;

margin:auto;

margin-bottom:50px;

}

button{

border:none;

cursor:pointer;

padding:22px 55px;

border-radius:18px;

font-size:22px;

font-weight:700;

background:#5fd7ff;

transition:.35s;

}

button:hover{

transform:translateY(-4px);

box-shadow:

0 0 35px rgba(95,215,255,.40);

}

.options{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:24px;

align-items:start;

width:100%;

margin-top:30px;

}

.option{

padding:22px;

font-size:22px;

font-weight:600;

border-radius:18px;

border:none;

background:#132b47;

color:white;

cursor:pointer;

transition:.30s;

}

.option:hover{

background:#5fd7ff;

color:#071421;

transform:translateY(-4px);

}

.progress{

width:100%;

height:12px;

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

border-radius:999px;

overflow:hidden;

margin:35px 0 60px;

}

.progress-fill{

height:100%;

width:0;

background:linear-gradient(
90deg,
#00d5ff,
#69e3ff
);

border-radius:999px;

transition:.45s ease;

box-shadow:

0 0 20px rgba(0,213,255,.35);

}

.option.selected{

background:#5fd7ff;

color:#071421;

transform:scale(1.02);

box-shadow:

0 0 35px rgba(95,215,255,.45);

}

.option-card{

position:relative;

display:flex;

flex-direction:column;

background:#223147;

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

border-radius:24px;

overflow:hidden;

cursor:pointer;

transition:.30s;

height:430px;

min-height:430px;

}

.option-card:hover{

transform:translateY(-8px);

border-color:#33d8ff;

box-shadow:
0 20px 60px rgba(0,0,0,.35);

}

.option-icon{

height:180px;

display:flex;

align-items:center;

justify-content:center;

font-size:72px;

margin-bottom:20px;

}

.option-card{

position:relative;

display:flex;

flex-direction:column;

background:linear-gradient(180deg,#223147 0%,#1a283b 100%);

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

border-radius:24px;

overflow:hidden;

cursor:pointer;

transition:.35s;

height:380px;

}

.option-card:hover{

transform:translateY(-10px);

border-color:#2dd8ff;

box-shadow:
0 20px 60px rgba(0,213,255,.18);

}

.option-card.selected{

border:2px solid #2dd8ff;

box-shadow:
0 0 35px rgba(0,213,255,.35);

}

.option-card::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
135deg,
transparent,
rgba(255,255,255,.05),
transparent
);

opacity:0;

transition:.35s;

}

.option-card:hover::before{

opacity:1;

}

.option-image{

width:100%;

height:170px;

object-fit:cover;

display:block;

transition:.35s;

}

.option-card:hover .option-image{

transform:scale(1.05);

}

.option-icon{

height:170px;

display:flex;

align-items:center;

justify-content:center;

font-size:70px;

}

.option-title{

font-size:26px;

font-weight:800;

text-align:center;

margin:18px 18px 8px;

line-height:1.2;

}

.option-description{

padding:0 20px;

font-size:15px;

line-height:1.45;

text-align:center;

opacity:.85;

flex:1;

}

.option-badge{

display:inline-flex;

align-self:center;

margin-top:14px;

padding:8px 14px;

border-radius:999px;

background:#11435d;

color:#6be3ff;

font-size:13px;

font-weight:700;

}

.option-footer{

padding:18px;

text-align:center;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#67dfff;

}

.checkmark{

position:absolute;

top:14px;

right:14px;

width:36px;

height:36px;

border-radius:50%;

background:#2dd8ff;

color:#06141f;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

opacity:0;

transform:scale(.6);

transition:.30s;

}

.option-card.selected .checkmark{

opacity:1;

transform:scale(1);

}

.preview-gallery{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

gap:20px;

margin:40px 0;

}

.preview-card{

position:relative;

border-radius:20px;

overflow:hidden;

aspect-ratio:1/1;

background:#13263e;

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

}

.preview-card img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.remove-photo{

position:absolute;

top:10px;

right:10px;

width:34px;

height:34px;

border:none;

border-radius:50%;

background:#ef4444;

color:white;

font-weight:bold;

cursor:pointer;

}

/*=========================
FISH TOOLBAR
=========================*/

.fish-toolbar{

width:100%;

max-width:950px;

margin:35px auto;

display:flex;

flex-direction:column;

gap:18px;

}

.fish-search{

width:100%;

padding:18px 24px;

border:none;

border-radius:18px;

background:#24374f;

color:white;

font-size:18px;

outline:none;

transition:.3s;

}

.fish-search:focus{

box-shadow:0 0 20px #27d8ff55;

}

.fish-filters{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:12px;

}

.fish-filter{

padding:10px 18px;

border-radius:999px;

background:#24374f;

border:1px solid #2fd4ff55;

color:white;

cursor:pointer;

transition:.25s;

font-weight:600;

}

.fish-filter:hover{

background:#27d8ff;

color:#041826;

}

.fish-filter.active{

background:#27d8ff;

color:#041826;

}

.fish-image{
width:100%;
height:220px;
object-fit:cover;
display:block;
border-radius:18px 18px 0 0;
}

.summary-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-top:35px;
}

.summary-item{

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

border-radius:18px;

padding:20px;

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

}

.summary-item strong{

display:block;

margin-bottom:10px;

color:#5fd7ff;

}

.summary-item.full{

grid-column:1/-1;

}

.project-textarea{

width:100%;

height:220px;

background:#081826;

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

border-radius:18px;

padding:20px;

color:#fff;

font-size:16px;

resize:none;

margin-top:25px;

}

.textarea-subtitle{

margin-top:10px;

opacity:.8;

}

.bottom-actions{

display:flex;

justify-content:space-between;

margin-top:35px;

gap:20px;

}

.secondary-btn{

background:transparent;

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

color:white;

padding:14px 28px;

border-radius:14px;

cursor:pointer;

}

.secondary-btn:hover{

border-color:#00d5ff;

}


@media(max-width:1500px){

.options{

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

}

}

@media(max-width:1100px){

.options{

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

}

}

@media(max-width:700px){

.options{

grid-template-columns:1fr;

}

}

/* ==========================================================
   PATA Y ALETA - MASTER OVERRIDE
   ESTE BLOQUE SIEMPRE GANA
========================================================== */

.config-card{
    width:min(96vw,1650px)!important;
    max-width:1650px!important;
    padding:42px!important;
    min-height:auto!important;
    height:auto!important;
    gap:28px!important;
}

.config-card h1{
    font-size:58px!important;
    line-height:1.08!important;
    margin:0 0 30px!important;
}

.progress{
    margin:18px 0 45px!important;
}

.options{

    display:grid!important;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;

    gap:24px!important;

    align-items:stretch!important;

}

.option-card{

    height:360px!important;

    min-height:360px!important;

    border-radius:22px!important;

    display:flex!important;

    flex-direction:column!important;

}

.option-image{

    width:100%!important;

    height:170px!important;

    object-fit:cover!important;

}

.option-icon{

    height:170px!important;

    display:flex!important;

    align-items:center!important;

    justify-content:center!important;

    font-size:64px!important;

}

.option-title{

    font-size:22px!important;

    margin:18px 18px 10px!important;

    text-align:center!important;

}

.option-description{

    font-size:16px!important;

    line-height:1.45!important;

    padding:0 18px!important;

    margin:0!important;

}

.option-badge{

    margin:18px auto 10px!important;

    font-size:13px!important;

}

.option-footer{

    margin-top:auto!important;

    margin-bottom:18px!important;

    text-align:center!important;

    font-size:13px!important;

}

textarea,
.project-textarea{

    height:180px!important;

}

@media (max-width:1200px){

.options{

grid-template-columns:repeat(2,1fr)!important;

}

}

@media (max-width:700px){

.options{

grid-template-columns:1fr!important;

}

.config-card h1{

font-size:40px!important;

}

}

/* =====================================================
   PREMIUM UI V2
===================================================== */

.configurator-screen{
    max-width:1400px;
    margin:40px auto;
    padding:40px;
    border-radius:30px;
}

.screen-title{
    font-size:clamp(42px,4vw,68px)!important;
    line-height:1;
    margin-bottom:20px!important;
}

.screen-subtitle{
    font-size:20px!important;
    max-width:760px;
    opacity:.85;
}

.options-grid{

display:grid!important;

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

gap:24px;

align-items:stretch;

margin-top:50px;

}

.option-card{

height:100%;

display:flex;

flex-direction:column;

justify-content:flex-start;

}

.option-image{

height:200px!important;

}

.option-content{

display:flex;

flex-direction:column;

flex:1;

}

.option-description{

flex:1;

}

.option-badge{

margin-top:auto;

}

.option-card{
    border-radius:22px!important;
    overflow:hidden;
    transition:.35s;
    min-height:auto!important;
}

.option-card img{
    height:220px!important;
    object-fit:cover;
}

.option-card:hover{
    transform:translateY(-8px) scale(1.02);
    box-shadow:0 20px 50px rgba(0,210,255,.20);
}

.option-content{
    padding:22px!important;
}

.option-title{
    font-size:28px!important;
}

.option-description{
    font-size:16px!important;
}

.option-badge{
    font-size:13px!important;
    padding:7px 14px!important;
}

.progress-wrapper{
    margin-bottom:45px!important;
}

.primary-button,
.next-button{
    padding:18px 42px!important;
    border-radius:16px!important;
    font-size:18px!important;
}

textarea{
    min-height:220px!important;
    font-size:18px!important;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.summary-card{
    padding:24px!important;
    border-radius:18px;
}

/* =========================================================
   PREMIUM GRID V2
========================================================= */

.premium-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:28px;

align-items:stretch;

margin-top:50px;

}



.premium-card{

background:#22314b;

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

border-radius:24px;

overflow:hidden;

cursor:pointer;

transition:.35s;

display:flex;

flex-direction:column;

height:100%;

position:relative;

}



.premium-card:hover{

transform:translateY(-10px);

border-color:#39d5ff;

box-shadow:

0 20px 45px rgba(0,0,0,.45),

0 0 35px rgba(57,213,255,.18);

}



.premium-card.selected{

border:2px solid #39d5ff;

box-shadow:

0 0 0 2px rgba(57,213,255,.2),

0 20px 45px rgba(0,0,0,.5);

}



.premium-card img{

width:100%;

aspect-ratio:16/10;

object-fit:cover;

display:block;

}



.premium-card h3{

font-size:28px;

font-weight:800;

padding:24px 26px 10px;

line-height:1.15;

}



.premium-card p{

padding:0 26px;

font-size:17px;

line-height:1.55;

color:#d2d9e7;

flex:1;

}



.premium-card .badge{

display:inline-flex;

align-self:flex-start;

margin:24px 26px 26px;

padding:10px 18px;

border-radius:999px;

background:#123f5f;

color:#54dcff;

font-weight:700;

font-size:14px;

}



@media(max-width:1200px){

.premium-grid{

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

}

}



@media(max-width:768px){

.premium-grid{

grid-template-columns:1fr;

}

}

/* =========================================================
   SPECIES UPLOAD — PREVIEW PECES Y CORALES
   ========================================================= */

.species-upload-preview{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:14px;

    width:min(960px,100%);
    margin:20px auto 6px;
    padding:0;

    background:transparent;
}

.species-upload-preview:empty{
    display:none;
}

/* =========================================================
   SPECIES UPLOAD — BOTON ELIMINAR FOTO
   ========================================================= */

.species-upload-item{
    position:relative;
    width:176px;
    height:132px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(88,211,255,.35);
    background:#0b2538;
}

.species-upload-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.species-upload-remove{
    position:absolute;
    top:8px;
    right:8px;

    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;

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

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

    border:1px solid rgba(255,255,255,.25) !important;
    border-radius:50% !important;

    background:rgba(7,29,45,.90) !important;
    color:#fff !important;

    font-size:20px !important;
    font-weight:700;
    line-height:1 !important;

    cursor:pointer;
    z-index:5;
}

/* =========================================================
   CORAL UPLOAD PREVIEW — FIX FINAL
   ========================================================= */

#coralPhotoPreview.species-upload-preview{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:14px;

    width:min(960px,100%);
    min-height:0;

    margin:18px auto 24px;
    padding:0;

    position:relative;
    z-index:10;

    overflow:visible;
}

#coralPhotoPreview.species-upload-preview:empty{
    display:none;
}

#coralPhotoPreview .species-upload-item{
    position:relative;

    flex:0 0 176px;

    width:176px;
    height:132px;

    border-radius:18px;
    overflow:hidden;

    border:1px solid rgba(88,211,255,.35);
    background:#0b2538;
}

#coralPhotoPreview .species-upload-item img{
    display:block;

    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    object-fit:cover;
}

#coralPhotoPreview .species-upload-remove{
    position:absolute;

    top:8px;
    right:8px;

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

    padding:0;
    margin:0;

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

    border-radius:50%;

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

    cursor:pointer;
    z-index:20;
}

/* =========================================================
   CORAL CATALOG — CARD SIZE FIX
   ========================================================= */

.step-corals .species-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    align-items:stretch;
    width:100%;
}

.step-corals .species-card{
    width:100%;
    height:390px !important;
    min-height:390px !important;
    max-height:390px !important;

    display:flex;
    flex-direction:column;

    padding:0 !important;
    margin:0;

    overflow:hidden;

    background:#0b293d;
    border:1px solid rgba(88,211,255,.18);
    border-radius:22px;

    text-align:left;
}

.step-corals .species-card-image{
    width:100%;
    height:210px !important;
    min-height:210px !important;
    max-height:210px !important;

    overflow:hidden;
    flex:0 0 210px;

    background:#102d42;
}

.step-corals .species-card-image img{
    display:block;

    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:center !important;
}

.step-corals .species-card-content{
    flex:1;
    min-height:0;

    display:flex;
    flex-direction:column;

    padding:18px 18px 16px;
}

.step-corals .species-card-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.step-corals .species-card-heading h3{
    margin:0 0 4px !important;
    padding:0 !important;

    font-size:18px !important;
    line-height:1.2 !important;
}

.step-corals .species-card-heading em{
    display:block;

    font-size:13px;
    line-height:1.3;

    color:#91a8bb;
}

.step-corals .species-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;

    margin-top:12px;
}

.step-corals .species-tags span{
    display:inline-flex;

    padding:5px 9px;

    border-radius:999px;

    background:rgba(88,211,255,.09);
    border:1px solid rgba(88,211,255,.18);

    color:#b9dcea;

    font-size:11px;
    line-height:1;
}

.step-corals .species-price{
    display:block;

    margin-top:auto;
    padding-top:12px;

    color:#58d3ff;

    font-size:14px;
    font-weight:800;
}

@media(max-width:1200px){

    .step-corals .species-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}

@media(max-width:850px){

    .step-corals .species-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:560px){

    .step-corals .species-grid{
        grid-template-columns:1fr;
    }

}

/* =========================================================
   SAVED PROJECT — PREMIUM EXPERIENCE
   ========================================================= */

.saved-project-step{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:calc(100vh - 40px);
}

.saved-project-content{
    width:min(760px,100%);
    margin:0 auto;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
}


/* LOGO */

.saved-project-logo-wrap{
    width:118px;
    height:118px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:30px;
    background:rgba(255,255,255,.96);
    box-shadow:
        0 20px 55px rgba(0,0,0,.18),
        0 0 35px rgba(31,211,255,.08);
    overflow:hidden;
}

.saved-project-logo{
    width:105px;
    height:105px;
    object-fit:contain;
    display:block;
}


/* EYEBROW */

.saved-project-eyebrow{
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    color:#55dcff;
    margin-bottom:12px;
}


/* TITLE */

.saved-project-content h1{
    margin:0;
    max-width:720px;
    font-size:clamp(32px,4vw,48px);
    line-height:1.05;
}


/* DESCRIPTION */

.saved-project-description{
    max-width:620px;
    margin:18px auto 26px;
    font-size:18px;
    line-height:1.6;
    color:#b9c9da;
}


/* PROJECT CARD */

.saved-project-resume{
    width:100%;
    padding:22px;
    border-radius:24px;
    background:
        linear-gradient(
            145deg,
            rgba(22,49,72,.92),
            rgba(11,34,52,.92)
        );
    border:1px solid rgba(83,214,255,.17);
    box-shadow:
        0 20px 60px rgba(0,0,0,.16);
}


/* PROJECT NAME */

.saved-project-resume-main{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding-bottom:18px;
    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.saved-project-resume-label{
    font-size:11px;
    font-weight:800;
    letter-spacing:1.7px;
    color:#55dcff;
}

.saved-project-resume-main strong{
    font-size:21px;
    color:#fff;
}


/* STATS */

.saved-project-stats{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);
    gap:10px;
    margin-top:18px;
}

.saved-project-stats div{
    min-height:86px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:17px;
    background:
        rgba(255,255,255,.035);
}

.saved-project-stats span{
    font-size:20px;
}

.saved-project-stats strong{
    font-size:18px;
    color:#fff;
}

.saved-project-stats small{
    font-size:12px;
    color:#8fa7ba;
}


/* ACTIONS */

.saved-project-actions{
    width:100%;
    display:grid;
    grid-template-columns:
        1.5fr 1fr;
    gap:12px;
    margin-top:20px;
}

.saved-project-actions button{
    width:100%;
    min-height:56px;
    justify-content:center;
}


/* PRIVACY */

.saved-project-note{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:12px;
    color:#7892a6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .saved-project-step{
        min-height:100svh;
        padding:
            max(18px,env(safe-area-inset-top))
            14px
            max(18px,env(safe-area-inset-bottom));
    }

    .saved-project-content{
        width:100%;
    }

    .saved-project-logo-wrap{
        width:88px;
        height:88px;
        border-radius:24px;
        margin-bottom:14px;
    }

    .saved-project-logo{
        width:80px;
        height:80px;
    }

    .saved-project-eyebrow{
        font-size:10px;
        letter-spacing:1.5px;
        margin-bottom:10px;
    }

    .saved-project-content h1{
        font-size:30px;
        line-height:1.08;
    }

    .saved-project-description{
        margin:13px auto 20px;
        font-size:15px;
        line-height:1.5;
    }

    .saved-project-resume{
        padding:17px;
        border-radius:20px;
    }

    .saved-project-resume-main{
        padding-bottom:14px;
    }

    .saved-project-resume-main strong{
        font-size:18px;
    }

    .saved-project-stats{
        margin-top:14px;
        gap:7px;
    }

    .saved-project-stats div{
        min-height:74px;
        border-radius:14px;
    }

    .saved-project-stats span{
        font-size:17px;
    }

    .saved-project-stats strong{
        font-size:16px;
    }

    .saved-project-stats small{
        font-size:10px;
    }

    .saved-project-actions{
        grid-template-columns:1fr;
        gap:9px;
        margin-top:16px;
    }

    .saved-project-actions button{
        min-height:52px;
    }

    .saved-project-note{
        margin-top:14px;
        font-size:10px;
    }

}

/* =========================================================
   NAV — CONFIGURADOR PREMIUM
   ========================================================= */

.nav-configurator{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:11px 18px;

    border:1px solid rgba(83,214,255,.45);
    border-radius:999px;

    color:#55dcff !important;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;

    background:
        linear-gradient(
            135deg,
            rgba(36,200,238,.10),
            rgba(36,200,238,.03)
        );

    box-shadow:
        0 0 0 rgba(83,214,255,0);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.nav-configurator:hover{
    transform:translateY(-2px);

    color:#fff !important;

    border-color:#55dcff;

    background:
        linear-gradient(
            135deg,
            rgba(36,200,238,.24),
            rgba(36,200,238,.08)
        );

    box-shadow:
        0 10px 30px rgba(36,200,238,.14);
}

.nav-configurator::before{
    content:"";
    width:6px;
    height:6px;

    border-radius:50%;
    background:#55dcff;

    box-shadow:
        0 0 10px rgba(85,220,255,.85);
}

/* =========================================================
   PATA Y ALETA — INTRO EXPERIENCE PREMIUM
   ========================================================= */

.intro-premium-step{
    position:relative;
    overflow:hidden;
    min-height:calc(100vh - 24px);
}

.intro-premium-shell{
    position:relative;
    isolation:isolate;
    width:min(1180px,100%);
    margin:0 auto;
    padding:18px 24px 10px;
    text-align:center;
}


/* =========================================================
   AMBIENTE / LUZ ACUÁTICA
   ========================================================= */

.intro-glow{
    position:absolute;
    z-index:-1;
    pointer-events:none;
    border-radius:50%;
    filter:blur(12px);
}

.intro-glow-one{
    width:420px;
    height:420px;
    top:-180px;
    left:-170px;
    background:
        radial-gradient(
            circle,
            rgba(63,213,255,.13) 0%,
            rgba(63,213,255,.04) 42%,
            transparent 72%
        );
}

.intro-glow-two{
    width:500px;
    height:500px;
    right:-220px;
    bottom:-250px;
    background:
        radial-gradient(
            circle,
            rgba(22,181,202,.11) 0%,
            rgba(22,181,202,.03) 45%,
            transparent 72%
        );
}


/* =========================================================
   BRAND
   ========================================================= */

.intro-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.intro-logo-shell{
    width:92px;
    height:92px;
    padding:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(239,249,252,.96)
        );

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

    box-shadow:
        0 18px 42px rgba(0,0,0,.24),
        0 0 34px rgba(69,210,244,.08);
}

.intro-logo{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.intro-premium-mark{
    margin:0;
    color:#55daf7;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:3px;
}


/* =========================================================
   HERO
   ========================================================= */

.intro-hero{
    width:min(900px,100%);
    margin:0 auto;
}

.intro-eyebrow{
    margin-bottom:14px;
    color:rgba(206,224,239,.7);
    font-size:11px;
    font-weight:700;
    letter-spacing:3.2px;
}

.intro-hero h1{
    margin:0;
    color:#fff;
    font-size:clamp(42px,5vw,68px);
    line-height:.98;
    letter-spacing:-2.7px;
    font-weight:800;
}

.intro-hero h1 span{
    display:block;
    margin-top:7px;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #62ddf7 52%,
            #22bfdc 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.intro-description{
    width:min(720px,100%);
    margin:22px auto 0;
    color:#bdcad9;
    font-size:18px;
    line-height:1.55;
    font-weight:400;
}


/* =========================================================
   3 PILARES
   ========================================================= */

.intro-features{
    width:min(980px,100%);
    margin:30px auto 26px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.intro-feature{
    min-height:92px;
    padding:16px 17px;

    display:flex;
    align-items:center;
    gap:13px;

    text-align:left;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(25,57,82,.82),
            rgba(13,40,61,.78)
        );

    border:1px solid rgba(89,211,241,.14);

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

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

.intro-feature:hover{
    transform:translateY(-3px);
    border-color:rgba(89,211,241,.32);
    background:
        linear-gradient(
            145deg,
            rgba(29,65,92,.92),
            rgba(14,43,65,.88)
        );
}

.intro-feature-icon{
    flex:0 0 43px;
    width:43px;
    height:43px;

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

    border-radius:14px;

    color:#5de0fa;
    font-size:19px;

    background:rgba(80,213,244,.08);
    border:1px solid rgba(80,213,244,.16);
}

.intro-feature strong{
    display:block;
    margin-bottom:4px;
    color:#fff;
    font-size:14px;
    line-height:1.25;
}

.intro-feature small{
    display:block;
    color:#91a6b9;
    font-size:11px;
    line-height:1.4;
}


/* =========================================================
   CTA
   ========================================================= */

.intro-start-btn{
    width:min(720px,100%);
    min-height:62px;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;

    border-radius:18px;

    font-size:17px;
    font-weight:800;
    letter-spacing:-.2px;

    box-shadow:
        0 16px 38px rgba(51,199,233,.14);

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

.intro-start-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 20px 46px rgba(51,199,233,.22);

    filter:brightness(1.04);
}

.intro-arrow{
    font-size:22px;
    line-height:1;
    transition:transform .25s ease;
}

.intro-start-btn:hover .intro-arrow{
    transform:translateX(5px);
}


/* =========================================================
   MICROCOPY
   ========================================================= */

.intro-bottom-note{
    width:min(720px,100%);
    margin:16px auto 0;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    color:#71899e;
}

.intro-bottom-note > span{
    color:#55daf7;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
}

.intro-bottom-note > div{
    width:34px;
    height:1px;
    background:rgba(83,215,245,.32);
}

.intro-bottom-note p{
    margin:0;
    font-size:11px;
    line-height:1.4;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .intro-premium-shell{
        padding:16px 12px 8px;
    }

    .intro-features{
        grid-template-columns:1fr;
        width:min(620px,100%);
        margin-top:25px;
    }

    .intro-feature{
        min-height:76px;
    }

}


/* =========================================================
   MOBILE PREMIUM
   ========================================================= */

@media(max-width:600px){

    .intro-premium-step{
        min-height:100svh;
    }

    .intro-premium-shell{
        padding:10px 2px 4px;
    }

    .intro-brand{
        gap:10px;
        margin-bottom:17px;
    }

    .intro-logo-shell{
        width:76px;
        height:76px;
        padding:7px;
        border-radius:22px;
    }

    .intro-premium-mark{
        font-size:9px;
        letter-spacing:2.1px;
    }

    .intro-eyebrow{
        margin-bottom:11px;
        font-size:8px;
        letter-spacing:2px;
    }

    .intro-hero h1{
        font-size:clamp(37px,11vw,48px);
        line-height:1;
        letter-spacing:-1.8px;
    }

    .intro-hero h1 span{
        margin-top:5px;
    }

    .intro-description{
        width:94%;
        margin-top:17px;
        font-size:14px;
        line-height:1.5;
    }

    .intro-features{
        width:100%;
        margin:22px auto 20px;
        gap:8px;
    }

    .intro-feature{
        min-height:68px;
        padding:12px 13px;
        gap:11px;
        border-radius:17px;
    }

    .intro-feature-icon{
        flex-basis:38px;
        width:38px;
        height:38px;
        border-radius:12px;
        font-size:16px;
    }

    .intro-feature strong{
        font-size:12px;
    }

    .intro-feature small{
        font-size:9px;
    }

    .intro-start-btn{
        min-height:56px;
        border-radius:16px;
        font-size:14px;
    }

    .intro-bottom-note{
        margin-top:13px;
        gap:8px;
    }

    .intro-bottom-note > div{
        width:20px;
    }

    .intro-bottom-note p{
        font-size:9px;
    }

}

/* =========================================================
   PASO 1 — MOBILE FINAL PREMIUM
   iPhone 390 / 440
   SOLO PANTALLA DE BIENVENIDA
   ========================================================= */

@media (max-width:600px){

    .config-card.step-intro{
        width:calc(100% - 16px) !important;
        min-height:auto !important;
        margin:8px auto !important;
        padding:14px 14px 16px !important;
        border-radius:24px !important;
    }

    .config-card.step-intro .progress-wrapper{
        margin-bottom:0 !important;
    }

    .config-card.step-intro .intro-content{
        padding:18px 4px 8px !important;
        justify-content:flex-start !important;
    }

    .intro-premium-shell{
        width:100%;
        padding:0 !important;
    }

    .intro-brand{
        gap:9px !important;
        margin-bottom:14px !important;
    }

    .intro-logo-shell{
        width:70px !important;
        height:70px !important;
        padding:7px !important;
        border-radius:20px !important;
    }

    .intro-premium-mark{
        font-size:9px !important;
        letter-spacing:1.6px !important;
    }

    .intro-eyebrow{
        margin-bottom:10px !important;
        font-size:7px !important;
        letter-spacing:1.8px !important;
    }

    .intro-hero h1{
        font-size:clamp(34px,10vw,42px) !important;
        line-height:.98 !important;
        letter-spacing:-1.7px !important;
        margin:0 !important;
    }

    .intro-hero h1 span{
        display:block;
        margin-top:4px !important;
    }

    .intro-description{
        width:92% !important;
        max-width:340px !important;
        margin:15px auto 0 !important;
        font-size:13px !important;
        line-height:1.48 !important;
    }

    .intro-features{
        width:100% !important;
        margin:19px auto 17px !important;
        gap:8px !important;
    }

    .intro-feature{
        width:100% !important;
        min-height:62px !important;
        padding:10px 12px !important;
        gap:10px !important;
        border-radius:16px !important;
    }

    .intro-feature-icon{
        flex:0 0 36px !important;
        width:36px !important;
        height:36px !important;
        border-radius:11px !important;
        font-size:15px !important;
    }

    .intro-feature strong{
        font-size:11px !important;
        line-height:1.2 !important;
    }

    .intro-feature small{
        font-size:8px !important;
        line-height:1.3 !important;
    }

    .intro-start-btn{
        width:100% !important;
        min-height:54px !important;
        height:54px !important;
        margin:0 !important;
        border-radius:15px !important;
        font-size:13px !important;
    }

    .intro-bottom-note{
        margin-top:11px !important;
        gap:7px !important;
    }

    .intro-bottom-note > div{
        width:18px !important;
    }

    .intro-bottom-note p{
        font-size:8px !important;
        line-height:1.3 !important;
    }

}