:root{
--bg:#050816;
--bg-soft:#0b1228;

--card:rgba(255,255,255,.05);
--card-hover:rgba(255,255,255,.075);

--text:#f8fafc;
--muted:#94a3b8;

--primary:#3b82f6;
--primary-dark:#2563eb;
--accent:#22d3ee;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--border:rgba(255,255,255,.1);
--border-strong:rgba(255,255,255,.16);

--shadow:0 20px 50px rgba(0,0,0,.25);

}

/* ==========================================
RESET
========================================== */

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

html{
scroll-behavior:smooth;
}

body{
font-family:"Inter",Arial,sans-serif;
min-height:100vh;
color:var(--text);

background:
    radial-gradient(
        circle at top,
        #111c44 0%,
        #050816 65%
    );

padding:40px 20px;

}

/* ==========================================
CONTENEDOR
========================================== */

.container{
width:100%;
max-width:1100px;
margin:auto;
}

/* ==========================================
HEADER
========================================== */

header{
text-align:center;
margin-bottom:45px;
}

.logo{
display:inline-flex;
align-items:center;
justify-content:center;

font-size:1.5rem;
font-weight:900;
letter-spacing:4px;

color:var(--accent);

text-shadow:
    0 0 25px rgba(34,211,238,.5);

margin-bottom:22px;

}

header h1{
font-size:clamp(2rem,5vw,3.5rem);
margin-bottom:15px;
line-height:1.15;
}

header p{
max-width:680px;
margin:auto;

color:var(--muted);
line-height:1.7;

font-size:1rem;

}

/* ==========================================
FORMULARIO
========================================== */

.audit-form{
max-width:760px;
margin:0 auto 45px;

padding:12px;

background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.07),
        rgba(255,255,255,.03)
    );

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

border-radius:22px;

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

}

.input-group{
display:flex;
gap:12px;
}

input{
flex:1;

min-width:0;

padding:17px 18px;

border-radius:14px;

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

background:#080f22;

color:white;

font-size:1rem;

outline:none;

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

}

input:focus{
border-color:var(--accent);

background:#0b142b;

box-shadow:
    0 0 0 4px rgba(34,211,238,.08),
    0 0 20px rgba(34,211,238,.12);

}

input::placeholder{
color:#64748b;
}

/* ==========================================
BOTÓN PRINCIPAL
========================================== */

button{
position:relative;

display:inline-flex;

align-items:center;
justify-content:center;
gap:8px;

padding:16px 25px;

border:none;

border-radius:14px;

cursor:pointer;

font-family:inherit;

font-weight:800;

color:white;

background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );

box-shadow:
    0 10px 25px rgba(59,130,246,.25);

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

}

button:hover{
transform:translateY(-3px);

filter:brightness(1.08);

box-shadow:
    0 16px 35px rgba(34,211,238,.22);

}

button:active{
transform:translateY(0);
}

/* ==========================================
ERROR
========================================== */

.error{
max-width:760px;

margin:0 auto 30px;

padding:18px 20px;

border-radius:16px;

background:
    rgba(239,68,68,.1);

border:
    1px solid rgba(239,68,68,.3);

color:#fca5a5;

}

/* ==========================================
RESULTADOS
========================================== */

.results{
margin-top:30px;
}

/* ==========================================
PUNTUACIÓN PRINCIPAL
========================================== */

.score-card{
display:grid;

grid-template-columns:
    220px 1fr;

gap:30px;

align-items:center;

padding:32px;

background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.07),
        rgba(255,255,255,.035)
    );

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

border-radius:26px;

margin-bottom:22px;

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

}

.score{
width:175px;
height:175px;

border-radius:50%;

margin:auto;

display:flex;

flex-direction:column;

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

background:
    radial-gradient(
        circle,
        #111827 54%,
        var(--accent) 55%,
        #050816 64%
    );

box-shadow:
    0 0 40px rgba(34,211,238,.22);

}

.score strong{
font-size:3.2rem;
line-height:1;
}

.score span{
color:var(--muted);
margin-top:6px;
}

.result-label{
display:inline-block;

margin-bottom:8px;

font-size:.72rem;

font-weight:800;

letter-spacing:1.5px;

color:var(--accent);

}

.info h2{
margin-bottom:12px;

font-size:clamp(1.5rem,4vw,2.2rem);

}

.info p{
color:var(--muted);

word-break:break-word;

line-height:1.7;

margin-top:8px;

}

.info strong{
color:var(--text);
}

/* ==========================================
RESUMEN DE PROBLEMAS
========================================== */

.problem-summary{
display:grid;

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

gap:15px;

margin-bottom:22px;

}

.problem-box{
position:relative;

overflow:hidden;

display:flex;

flex-direction:column;

gap:6px;

padding:24px;

border-radius:20px;

background:var(--card);

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

backdrop-filter:blur(15px);

transition:
    transform .25s,
    background .25s;

}

.problem-box:hover{
transform:translateY(-3px);

background:var(--card-hover);

}

.problem-box strong{
font-size:2rem;

line-height:1;

}

.problem-box span{
color:var(--muted);

font-size:.9rem;

}

.problem-box.danger{
border-color:
rgba(239,68,68,.25);
}

.problem-box.danger strong{
color:#f87171;
}

.problem-box.warning{
border-color:
rgba(245,158,11,.25);
}

.problem-box.warning strong{
color:#fbbf24;
}

.problem-box.success{
border-color:
rgba(34,197,94,.25);
}

.problem-box.success strong{
color:#4ade80;
}

/* ==========================================
ESTADÍSTICAS
========================================== */

.stats{
display:grid;

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

gap:15px;

margin-bottom:25px;

}

.stat{
padding:22px 16px;

text-align:center;

background:var(--card);

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

border-radius:18px;

backdrop-filter:blur(15px);

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

}

.stat:hover{
transform:translateY(-3px);

background:var(--card-hover);

border-color:var(--border-strong);

}

.stat strong{
display:block;

font-size:1.6rem;

margin-bottom:7px;

color:var(--text);

}

.stat span{
display:block;

color:var(--muted);

font-size:.82rem;

line-height:1.4;

}

/* ==========================================
ANÁLISIS
========================================== */

.analysis{
display:grid;

gap:14px;

}

.analysis > h2{
margin-top:10px;

font-size:1.8rem;

}

.analysis-intro{
color:var(--muted);

line-height:1.7;

margin-bottom:8px;

}

.analysis-item{
display:flex;

justify-content:space-between;

align-items:flex-start;

gap:25px;

padding:22px;

border-radius:18px;

background:var(--card);

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

backdrop-filter:blur(15px);

transition:
    transform .25s,
    background .25s;

}

.analysis-item:hover{
transform:translateY(-2px);

background:var(--card-hover);

}

.analysis-item h3{
margin-bottom:8px;

font-size:1rem;

line-height:1.4;

}

.analysis-item p{
color:var(--muted);

line-height:1.65;

font-size:.92rem;

}

/* ==========================================
STATUS
========================================== */

.status{
flex-shrink:0;

display:inline-flex;

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

padding:7px 10px;

border-radius:100px;

font-size:.68rem;

font-weight:900;

letter-spacing:.7px;

white-space:nowrap;

}

.error-item .status{
color:#fca5a5;

background:
    rgba(239,68,68,.12);

border:
    1px solid rgba(239,68,68,.25);

}

.warning .status{
color:#fcd34d;

background:
    rgba(245,158,11,.12);

border:
    1px solid rgba(245,158,11,.25);

}

.ok .status{
color:#86efac;

background:
    rgba(34,197,94,.12);

border:
    1px solid rgba(34,197,94,.25);

}

/* ==========================================
ESTADOS
========================================== */

.ok{
border-left:
4px solid var(--success);
}

.warning{
border-left:
4px solid var(--warning);
}

.error-item{
border-left:
4px solid var(--danger);
}

/* ==========================================
CTA COTIZAR SOLUCIÓN
========================================== */

.audit-cta{
display:flex;

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

gap:35px;

margin-top:35px;

padding:35px;

border-radius:25px;

background:
    linear-gradient(
        135deg,
        rgba(59,130,246,.15),
        rgba(34,211,238,.08)
    );

border:
    1px solid rgba(34,211,238,.2);

box-shadow:
    var(--shadow);

}

.audit-cta > div{
flex:1;
}

.audit-cta > div > span{
display:inline-block;

margin-bottom:10px;

color:var(--accent);

font-size:.8rem;

font-weight:800;

}

.audit-cta h2{
font-size:1.8rem;

margin-bottom:12px;

line-height:1.25;

}

.audit-cta p{
color:var(--muted);

line-height:1.7;

max-width:650px;

}

/* ==========================================
BOTÓN COTIZAR
========================================== */

.btn-primary{
flex-shrink:0;

display:inline-flex;

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

min-height:52px;

padding:16px 24px;

border-radius:14px;

text-decoration:none;

color:white;

font-weight:800;

background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );

box-shadow:
    0 12px 30px rgba(34,211,238,.2);

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

}

.btn-primary:hover{
transform:translateY(-3px);

filter:brightness(1.08);

box-shadow:
    0 18px 40px rgba(34,211,238,.25);

}

/* ==========================================
BOTÓN VOLVER
========================================== */

.back{
display:inline-flex;

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

gap:10px;

margin-top:35px;

padding:13px 18px;

border-radius:14px;

color:#cbd5e1;

text-decoration:none;

font-weight:700;

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

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

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


}

.back:hover{
transform:translateX(-4px);


color:white;

background:
    rgba(59,130,246,.12);

border-color:
    rgba(59,130,246,.4);


}

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

@media(max-width:900px){


.container{
    max-width:760px;
}


.score-card{
    grid-template-columns:
        180px 1fr;

    gap:25px;
}


.score{
    width:155px;
    height:155px;
}


.score strong{
    font-size:2.8rem;
}


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


.audit-cta{
    align-items:flex-start;

    flex-direction:column;
}


.btn-primary{
    width:100%;
}

}

/* ==========================================
MÓVIL
========================================== */

@media(max-width:700px){


body{
    padding:25px 15px;
}


header{
    margin-bottom:30px;
}


.audit-form{
    padding:10px;

    margin-bottom:30px;

    border-radius:18px;
}


.input-group{
    flex-direction:column;

    gap:10px;
}


input{
    width:100%;

    padding:16px;
}


button{
    width:100%;

    min-height:52px;
}


.score-card{
    grid-template-columns:1fr;

    text-align:center;

    gap:20px;

    padding:25px 20px;

    border-radius:22px;
}


.score{
    width:150px;
    height:150px;
}


.info p{
    font-size:.88rem;
}


/* En móvil los problemas ocupan todo el ancho
   para evitar tarjetas demasiado estrechas */

.problem-summary{
    grid-template-columns:1fr;

    gap:10px;
}


.problem-box{
    flex-direction:row;

    align-items:center;

    gap:14px;

    padding:18px 20px;
}


.problem-box strong{
    min-width:45px;

    font-size:1.8rem;
}


/* Estadísticas en 2 columnas */

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

    gap:10px;
}


.stat{
    padding:17px 10px;

    border-radius:15px;
}


.stat strong{
    font-size:1.35rem;
}


.stat span{
    font-size:.72rem;
}


/* Análisis más cómodo */

.analysis{
    gap:11px;
}


.analysis > h2{
    font-size:1.5rem;
}


.analysis-item{
    flex-direction:column;

    gap:12px;

    padding:18px;

    border-radius:16px;
}


.analysis-item h3{
    font-size:.98rem;
}


.analysis-item p{
    font-size:.86rem;
}


.status{
    align-self:flex-start;

    padding:6px 9px;

    font-size:.63rem;
}


/* CTA */

.audit-cta{
    gap:22px;

    padding:25px 20px;

    border-radius:20px;
}


.audit-cta h2{
    font-size:1.45rem;
}


.audit-cta p{
    font-size:.9rem;
}


.btn-primary{
    min-height:54px;

    font-size:.95rem;
}


/* Botón volver centrado y más usable */

.back{
    width:100%;

    min-height:50px;

    margin-top:28px;

    justify-content:center;

    padding:14px 18px;
}

}

/* ==========================================
MÓVILES PEQUEÑOS
========================================== */

@media(max-width:420px){


body{
    padding:18px 10px;
}


.logo{
    font-size:1.15rem;

    letter-spacing:3px;
}


header h1{
    font-size:1.85rem;
}


header p{
    font-size:.86rem;

    line-height:1.6;
}


.audit-form{
    border-radius:16px;
}


input{
    font-size:.9rem;

    padding:15px 14px;
}


button{
    font-size:.9rem;
}


.score-card{
    padding:22px 15px;
}


.score{
    width:135px;
    height:135px;
}


.score strong{
    font-size:2.5rem;
}


.info h2{
    font-size:1.45rem;
}


/* Evita acumulación excesiva:
   mantenemos dos columnas compactas */

.stats{
    gap:8px;
}


.stat{
    padding:15px 7px;
}


.stat strong{
    font-size:1.2rem;
}


.stat span{
    font-size:.67rem;

    line-height:1.3;
}


.problem-box{
    padding:16px;
}


.problem-box strong{
    font-size:1.6rem;
}


.problem-box span{
    font-size:.82rem;
}


.analysis-item{
    padding:16px;
}


.audit-cta{
    padding:22px 17px;
}


.audit-cta h2{
    font-size:1.3rem;
}

}