/* =========================================
   PLAYLISTER PRO - PROMOCION PARA ARTISTAS
========================================= */

:root{
--purple:#7D5AFC;
--text:#111;
--muted:#686868;
--border:#e8e8e8;
--surface:#ffffff;
}


/* HEADER */

.promo-hero{
text-align:center;
padding:55px 20px 40px;
}

.promo-hero h1{
font-family:'Bauhaus93', sans-serif;
font-size:50px;
color:var(--purple);
margin:0 0 8px;
line-height:1;
}

.promo-hero p{
font-size:16px;
color:var(--muted);
margin:0;
}


/* CONTAINER */

.promo-container{
width:90%;
max-width:1050px;
margin:auto;
}

.promo-section{
padding:80px 0;
border-top:1px solid var(--border);
}


/* LABELS */

.promo-label{
display:inline-block;

font-size:12px;
font-weight:700;
letter-spacing:1.4px;

color:var(--purple);

margin-bottom:12px;
}


/* INTRO */

.promo-intro{
padding:55px 0 90px;
}

.promo-intro > h2{
font-size:46px;
line-height:1.05;
letter-spacing:-1.5px;

margin:0 0 22px;

max-width:750px;
}

.promo-lead{
font-size:19px;
line-height:1.65;

color:var(--muted);

max-width:700px;
}


/* PLAYLIST HIGHLIGHT */

.playlist-highlight{
display:flex;
align-items:center;
gap:22px;

margin-top:45px;

background:white;

border:1px solid var(--border);
border-radius:22px;

padding:18px;

max-width:600px;

box-shadow:0 12px 35px rgba(0,0,0,.05);
}

.playlist-highlight img{
width:120px;
height:120px;

object-fit:cover;
border-radius:15px;
}

.playlist-highlight span{
font-size:11px;
font-weight:700;
letter-spacing:1px;
color:var(--purple);
}

.playlist-highlight h3{
font-size:21px;
margin:6px 0 5px;
}

.playlist-highlight p{
margin:0;
font-size:14px;
color:var(--muted);
}


/* SECTION HEADINGS */

.section-heading{
max-width:760px;
margin-bottom:38px;
}

.section-heading h2{
font-size:36px;
letter-spacing:-1px;

margin:0 0 14px;
}

.section-heading p{
font-size:17px;
line-height:1.7;

color:var(--muted);
margin:8px 0;
}


/* PRICING */

.pricing-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:14px;
}

.price-card{
background:white;

border:1px solid var(--border);
border-radius:18px;

padding:25px 18px;

display:flex;
flex-direction:column;

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

.price-card:hover{
transform:translateY(-4px);
box-shadow:0 15px 30px rgba(0,0,0,.07);
}

.price-card.featured{
border:2px solid var(--purple);
}

.price-position{
font-size:11px;
font-weight:700;
letter-spacing:.7px;

color:var(--muted);

margin-bottom:20px;
}

.price-card strong{
font-size:27px;
margin-bottom:5px;
}

.price-card > span:last-child{
font-size:13px;
color:var(--muted);
}

.availability-note{
display:flex;
align-items:flex-start;
gap:10px;

margin-top:24px;

padding:16px 18px;

background:rgba(125,90,252,.07);

border-radius:14px;
}

.availability-note > span{
color:var(--purple);
font-size:12px;
margin-top:4px;
}

.availability-note p{
margin:0;
font-size:14px;
line-height:1.55;
}


/* PAYMENTS */

.payment-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.info-card{
background:white;

border:1px solid var(--border);
border-radius:18px;

padding:25px;
}

.info-card h3{
margin:0 0 15px;
font-size:17px;
}

.info-card p{
font-size:14px;
line-height:1.6;

color:var(--muted);
margin:7px 0;
}


/* CONDITIONS */

.conditions{
display:flex;
flex-direction:column;
}

.condition-item{
display:grid;
grid-template-columns:60px 1fr;
gap:25px;

padding:32px 0;

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

.condition-item > span{
font-size:13px;
font-weight:700;
color:var(--purple);
}

.condition-item h3{
font-size:20px;
margin:0 0 12px;
}

.condition-item p{
font-size:16px;
line-height:1.75;

color:#555;

margin:8px 0;

max-width:800px;
}


/* CASE STUDIES */

.case-study{
padding:55px 0;

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

.case-header{
margin-bottom:25px;
}

.case-number{
font-size:11px;
font-weight:700;
letter-spacing:1.2px;
color:var(--purple);
}

.case-header h3{
font-size:31px;

margin:8px 0 5px;

letter-spacing:-.5px;
}

.case-header p{
margin:0;
color:var(--muted);
}


/* STATS */

.stats-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:14px;

margin:25px 0 30px;
}

.stats-grid > div{
background:white;

border:1px solid var(--border);
border-radius:16px;

padding:22px;

display:flex;
flex-direction:column;
}

.stats-grid strong{
font-size:28px;
}

.stats-grid span{
font-size:13px;
color:var(--muted);

margin-top:5px;
}


/* SCREENSHOTS */

.screenshots-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;

margin:30px 0;
}

.screenshots-grid img{
width:100%;

display:block;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);
}


/* CASE EXPLANATION */

.case-explanation{
max-width:800px;
}

.case-explanation p{
font-size:16px;
line-height:1.8;

color:#4f4f4f;

margin:12px 0;
}


/* EDITORIAL TEXT */

.editorial-text{
max-width:820px;
}

.editorial-text > p{
font-size:17px;
line-height:1.85;

color:#4f4f4f;

margin:20px 0;
}

.highlight-quote{
border-left:4px solid var(--purple);

padding:8px 0 8px 28px;

margin:40px 0;
}

.highlight-quote p{
font-size:23px;
font-weight:600;
line-height:1.55;

margin:0;

letter-spacing:-.4px;
}


/* TRANSPARENCY */

.transparency-box{
background:#111;
color:white;

padding:55px;

border-radius:28px;
}

.transparency-box .promo-label{
color:#a98fff;
}

.transparency-box h2{
font-size:38px;
line-height:1.15;

margin:0 0 30px;
}

.transparency-box p{
font-size:16px;
line-height:1.8;

color:rgba(255,255,255,.72);

max-width:780px;
}

.transparency-box strong{
color:white;
}

.transparency-final{
padding-top:20px;
margin-top:25px !important;

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


/* TESTIMONIAL CAROUSEL */

.testimonial-carousel{
display:flex;
align-items:center;
justify-content:center;

gap:18px;

margin-top:35px;
}


/* VENTANA DEL CARRUSEL */

.carousel-viewport{
width:min(520px,100%);

/* El carrusel siempre es cuadrado */
aspect-ratio:1 / 1;

overflow:hidden;

border-radius:22px;
}


/* PISTA QUE SE DESPLAZA */

.carousel-track{
display:flex;

width:100%;
height:100%;

transition:transform .45s cubic-bezier(.22,.61,.36,1);
}


/* CADA TESTIMONIO */

.testimonial-slide{
flex:0 0 100%;

width:100%;
height:100%;

overflow:hidden;

border-radius:22px;
}


/* IMÁGENES */

.testimonial-slide img{
width:100%;
height:100%;

display:block;

object-fit:cover;

border-radius:22px;
}


/* VIDEOS */

.testimonial-slide video{
width:100%;
height:100%;

display:block;

object-fit:contain;

background:#000;

border-radius:22px;
}


/* BOTONES */

.carousel-button{
width:45px;
height:45px;

flex-shrink:0;

border:none;
border-radius:50%;

background:white;

box-shadow:0 5px 20px rgba(0,0,0,.1);

font-size:27px;

cursor:pointer;

transition:transform .2s ease;
}

.carousel-button:hover{
transform:scale(1.1);
}


/* INDICADORES */

.carousel-dots{
display:flex;
justify-content:center;

gap:7px;

margin-top:20px;
}

.carousel-dot{
width:7px;
height:7px;

padding:0;

border:0;
border-radius:50%;

background:#ccc;

cursor:pointer;

transition:width .25s ease, background .25s ease;
}

.carousel-dot.active{
width:22px;

border-radius:20px;

background:var(--purple);
}

.dolar-blue{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:12px;
    padding:11px 14px;

    background:#f5f3ff;
    border-radius:10px;

    font-size:14px;
}

.dolar-label{
    color:#666;
}

.dolar-blue strong{
    color:#7D5AFC;
    font-size:15px;
    font-weight:700;
}

/* PROMOTIONS */

.promotions-block{
margin-top:55px;
}

.promotions-heading{
margin-bottom:25px;
}

.promotions-heading h3{
font-size:26px;
letter-spacing:-.5px;

margin:4px 0 8px;
}

.promotions-heading p{
font-size:15px;
line-height:1.6;

color:var(--muted);

margin:0;

max-width:650px;
}


.promotions-grid{
display:grid;

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

gap:14px;
}


.promotion-card{
position:relative;

background:white;

border:1px solid var(--border);
border-radius:18px;

padding:27px 22px;

display:flex;
flex-direction:column;

min-height:145px;

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


.promotion-card:hover{
transform:translateY(-4px);

box-shadow:0 15px 30px rgba(0,0,0,.07);
}


.promotion-quantity{
font-size:11px;
font-weight:700;

letter-spacing:1px;

color:var(--muted);

margin-bottom:15px;
}


.promotion-card strong{
font-size:28px;

line-height:1.1;

letter-spacing:-.5px;

color:var(--purple);
}


.promotion-card p{
font-size:13px;
line-height:1.5;

color:var(--muted);

margin:12px 0 0;
}


/* PROMO DESTACADA */

.promotion-featured{
border:2px solid var(--purple);

background:rgba(125,90,252,.035);
}


.promotion-badge{
position:absolute;

top:-11px;
right:16px;

background:var(--purple);

color:white;

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

letter-spacing:.8px;

padding:6px 10px;

border-radius:20px;
}

/* TABLET */

@media(max-width:900px){

.pricing-grid{
grid-template-columns:repeat(2,1fr);
}

.payment-grid{
grid-template-columns:1fr;
}

}


/* MOBILE */

@media(max-width:520px){

.promo-hero{
padding:35px 20px 25px;
}

.promo-hero h1{
font-size:46px;
}

.promo-container{
width:86%;
}

.promo-intro{
padding:40px 0 65px;
}

.promo-intro > h2{
font-size:35px;
letter-spacing:-1px;
}

.promo-lead{
font-size:16px;
}

.playlist-highlight{
gap:15px;
padding:13px;
}

.playlist-highlight img{
width:85px;
height:85px;
}

.playlist-highlight h3{
font-size:16px;
}

.playlist-highlight p{
font-size:12px;
}

.promo-section{
padding:60px 0;
}

.section-heading h2{
font-size:29px;
}

.section-heading p{
font-size:15px;
}

.pricing-grid{
grid-template-columns:1fr 1fr;
gap:10px;
}

.price-card{
padding:20px 15px;
}

.price-card strong{
font-size:23px;
}

.payment-grid{
grid-template-columns:1fr;
}

.condition-item{
grid-template-columns:35px 1fr;
gap:12px;
}

.condition-item p{
font-size:15px;
}

.stats-grid{
grid-template-columns:repeat(3,1fr);
gap:7px;
}

.stats-grid > div{
padding:15px 9px;
}

.stats-grid strong{
font-size:19px;
}

.stats-grid span{
font-size:10px;
}

.screenshots-grid{

display:flex;

overflow-x:auto;

gap:12px;

scroll-snap-type:x mandatory;

padding:5px 7% 18px 0;

scrollbar-width:none;
}

.screenshots-grid::-webkit-scrollbar{
display:none;
}

.screenshots-grid img{

min-width:88%;

scroll-snap-align:start;

border-radius:16px;
}

.case-header h3{
font-size:27px;
}

.case-explanation p,
.editorial-text > p{
font-size:15px;
line-height:1.75;
}

.highlight-quote{
padding-left:18px;
}

.highlight-quote p{
font-size:19px;
}

.transparency-box{
padding:35px 25px;

border-radius:22px;
}

.transparency-box h2{
font-size:28px;
}

.transparency-box p{
font-size:15px;
}

.carousel-button{
display:none;
}

.carousel-viewport{
width:100%;
}

.testimonial-carousel{
display:block;
}
.promotions-block{
margin-top:45px;
}

.promotions-heading h3{
font-size:23px;
}

.promotions-grid{
grid-template-columns:1fr 1fr;

gap:10px;
}

.promotion-card{
padding:22px 17px;

min-height:130px;
}

.promotion-card strong{
font-size:24px;
}

.promotion-featured{
grid-column:1 / -1;

min-height:auto;
}

.promotion-featured strong{
font-size:27px;
}


}