/*==========================================
    PERITOS JUDICIALES TECNOLÓGICOS
    style.css
===========================================*/

:root{

    --primary:#0b1f3a;
    --secondary:#0f3f73;
    --accent:#ff9800;
    --accent-dark:#d97900;

    --white:#ffffff;
    --light:#f4f7fb;
    --gray:#666;
    --dark:#222;

    --shadow:0 15px 35px rgba(0,0,0,.12);
    --radius:14px;
    --transition:.35s;

}

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

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--light);

    color:var(--dark);

    line-height:1.7;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:min(1200px,92%);
    margin:auto;

}

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

header{

    position:fixed;

    top:0;

    width:100%;

    z-index:999;

    background:rgba(11,31,58,.95);

    backdrop-filter:blur(8px);

    box-shadow:0 3px 15px rgba(0,0,0,.12);

}

.nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.logo{

    color:white;

    font-size:1.3rem;

    font-weight:700;

    letter-spacing:.5px;

}

nav ul{

    display:flex;

    gap:35px;

}

nav a{

    color:white;

    font-weight:500;

    transition:.3s;

}

nav a:hover{

    color:var(--accent);

}

.btn-nav{

    background:var(--accent);

    color:white;

    padding:12px 22px;

    border-radius:40px;

    font-weight:600;

    transition:.3s;

}

.btn-nav:hover{

    background:var(--accent-dark);

    transform:translateY(-2px);

}

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

.hero{

    position:relative;

    padding-top:150px;

    padding-bottom:100px;

    background:
    linear-gradient(rgba(11,31,58,.80),
    rgba(11,31,58,.80)),
    url("../img/hero.jpg");

    background-size:cover;

    background-position:center;

    color:white;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.tag{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

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

    margin-bottom:20px;

    font-size:.9rem;

}

.hero h1{

    font-size:3.2rem;

    line-height:1.15;

    margin-bottom:25px;

}

.hero p{

    font-size:1.08rem;

    opacity:.92;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:40px;

}

.btn-primary{

    background:var(--accent);

    color:white;

    padding:15px 34px;

    border-radius:40px;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    background:var(--accent-dark);

    transform:translateY(-3px);

}

.btn-secondary{

    border:2px solid white;

    color:white;

    padding:15px 34px;

    border-radius:40px;

    transition:.35s;

}

.btn-secondary:hover{

    background:white;

    color:var(--primary);

}

/*==================================
SELLOS
==================================*/

.trust{

    display:grid;

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

    gap:18px;

}

.trust div{

    display:flex;

    align-items:center;

    gap:10px;

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

    padding:14px;

    border-radius:10px;

    font-size:.95rem;

}

.trust i{

    color:var(--accent);

    font-size:1.2rem;

}

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

.hero-image{

    animation:float 6s ease infinite;

}

.hero-image img{

    border-radius:25px;

    box-shadow:var(--shadow);

}

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

.stats{

    background:white;

    margin-top:-45px;

    position:relative;

    z-index:5;

}

.stats-grid{

    display:grid;

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

    gap:25px;

    text-align:center;

    background:white;

    padding:40px;

    border-radius:18px;

    box-shadow:var(--shadow);

}

.stats h2{

    color:var(--secondary);

    font-size:2.4rem;

}

.stats p{

    color:var(--gray);

}

/*==================================
SECCIONES
==================================*/

section{

    padding:90px 0;

}

section h2{

    text-align:center;

    font-size:2.4rem;

    color:var(--primary);

    margin-bottom:20px;

}

.subtitle{

    text-align:center;

    color:#666;

    max-width:700px;

    margin:0 auto 60px;

}

/*==================================
SERVICIOS
==================================*/

.services{

    background:#eef3f8;

}

.cards{

    display:grid;

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

    gap:35px;

}

.card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-12px);

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

}

.card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.card h3{

    color:var(--primary);

    font-size:1.35rem;

    padding:25px 25px 10px;

}

.card p{

    padding:0 25px 30px;

    color:var(--gray);

}

/*==================================
PROCESO
==================================*/

.process{

    background:white;

}

.steps{

    display:grid;

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

    gap:35px;

}

.step{

    text-align:center;

    padding:40px 25px;

    border-radius:18px;

    background:var(--light);

    transition:var(--transition);

}

.step:hover{

    transform:translateY(-10px);

    background:white;

    box-shadow:var(--shadow);

}

.step span{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    border-radius:50%;

    background:var(--accent);

    color:white;

    font-size:1.7rem;

    font-weight:700;

    margin-bottom:20px;

}

.step h3{

    color:var(--primary);

    margin-bottom:15px;

}

/*==================================
CONTACTO
==================================*/

.contact{

    background:linear-gradient(135deg,#0b1f3a,#123a6d);

    color:white;

}

.contact h2{

    color:white;

    text-align:left;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:start;

}

.contact-info{

    margin-top:30px;

}

.contact-info p{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

    font-size:1.05rem;

}

.contact-info i{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border-radius:50%;

    color:var(--accent);

}

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

form{

    background:white;

    padding:40px;

    border-radius:18px;

    box-shadow:var(--shadow);

}

form input,

form textarea{

    width:100%;

    margin-bottom:20px;

    border:none;

    background:#f2f5f8;

    border-radius:10px;

    padding:16px;

    font-family:inherit;

    font-size:1rem;

}

form input:focus,

form textarea:focus{

    outline:2px solid var(--accent);

}

form button{

    width:100%;

    padding:16px;

    border:none;

    border-radius:50px;

    background:var(--accent);

    color:white;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

    transition:.3s;

}

form button:hover{

    background:var(--accent-dark);

}

/*==================================
FOOTER
==================================*/

footer{

    background:#071528;

    color:#d8d8d8;

    text-align:center;

    padding:35px 0;

}

footer p{

    font-size:.95rem;

}

/*==================================
WHATSAPP
==================================*/

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:2rem;

    box-shadow:0 15px 35px rgba(0,0,0,.3);

    transition:.3s;

    z-index:999;

}

.whatsapp:hover{

    transform:scale(1.12);

}

/*==================================
ANIMACIONES
==================================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}

/*==================================
SCROLLBAR
==================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ececec;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-image{

order:-1;

max-width:700px;

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.trust{

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

}

.contact-grid{

grid-template-columns:1fr;

}

.contact h2{

text-align:center;

}

.contact-info{

text-align:center;

}

.contact-info p{

justify-content:center;

}

}

@media(max-width:768px){

header{

position:relative;

}

.nav{

height:auto;

padding:20px 0;

flex-direction:column;

gap:20px;

}

nav ul{

flex-direction:column;

align-items:center;

gap:15px;

}

.hero{

padding-top:80px;

}

.hero h1{

font-size:2.3rem;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-secondary{

text-align:center;

}

.stats{

margin-top:0;

}

.stats-grid{

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

padding:25px;

}

.trust{

grid-template-columns:1fr;

}

.steps{

grid-template-columns:1fr;

}

.cards{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.hero h1{

font-size:2rem;

}

.stats-grid{

grid-template-columns:1fr;

}

.logo{

font-size:1.05rem;

}

section{

padding:70px 0;

}

form{

padding:25px;

}

.whatsapp{

width:58px;

height:58px;

font-size:1.7rem;

right:18px;

bottom:18px;

}

}

.advantages,
.certifications,
.faq,
.cta-final{

padding:100px 0;

}

.cert-grid{

display:grid;

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

gap:30px;

text-align:center;

}

.cert-grid div{

background:white;

padding:35px;

border-radius:15px;

box-shadow:var(--shadow);

transition:.3s;

}

.cert-grid div:hover{

transform:translateY(-8px);

}

.cert-grid i{

font-size:3rem;

color:var(--accent);

margin-bottom:20px;

}

.faq-item{

background:white;

padding:30px;

border-radius:15px;

margin-bottom:25px;

box-shadow:var(--shadow);

}

.faq-item h3{

color:var(--primary);

margin-bottom:12px;

}

.cta-final{

background:linear-gradient(135deg,#0b1f3a,#123d75);

text-align:center;

color:white;

}

.cta-final h2{

color:white;

font-size:2.7rem;

margin-bottom:20px;

}

.cta-final p{

max-width:700px;

margin:auto auto 35px;

font-size:1.15rem;

}

/*======================================
CASOS
======================================*/

.cases{

background:#eef3f8;

}

.case-grid{

display:grid;

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

gap:30px;

}

.case{

background:white;

padding:35px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.3s;

border-top:5px solid var(--accent);

}

.case:hover{

transform:translateY(-8px);

}

.badge{

display:inline-block;

background:var(--primary);

color:white;

padding:6px 14px;

border-radius:20px;

font-size:.8rem;

margin-bottom:18px;

}

/*======================================
TESTIMONIOS
======================================*/

.testimonials{

background:white;

}

.testimonial-slider{

max-width:850px;

margin:auto;

position:relative;

}

.testimonial{

display:none;

text-align:center;

padding:50px;

border-radius:20px;

background:var(--light);

box-shadow:var(--shadow);

}

.testimonial.active{

display:block;

animation:fadeSlide .6s;

}

.testimonial p{

font-size:1.2rem;

font-style:italic;

margin-bottom:20px;

}

.testimonial h4{

color:var(--secondary);

}

@keyframes fadeSlide{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================
MENU MOVIL
=========================*/

.menu-toggle{

display:none;

width:40px;

cursor:pointer;

}

.menu-toggle span{

display:block;

height:4px;

margin:7px 0;

background:white;

border-radius:20px;

transition:.3s;

}

@media(max-width:768px){

.menu-toggle{

display:block;

}

nav{

display:none;

width:100%;

}

nav.active{

display:block;

animation:fadeSlide .4s;

}

nav ul{

padding-top:20px;

}

}

/*=========================
MODO OSCURO
=========================*/

#darkMode{

background:none;

border:none;

color:white;

font-size:22px;

cursor:pointer;

margin-left:20px;

}

body.dark{

background:#111;

color:#eee;

}

body.dark section{

background:#111!important;

}

body.dark .card,
body.dark .case,
body.dark .faq-item,
body.dark form{

background:#222;

color:#eee;

}

body.dark h2,
body.dark h3{

color:white;

}

/*=========================
FOOTER
=========================*/

.footer-links{

margin-top:20px;

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}

.footer-links a{

color:white;

opacity:.85;

transition:.3s;

}

.footer-links a:hover{

opacity:1;

color:var(--accent);

}

/*==================================
PÁGINAS LEGALES
==================================*/


.legal-header{

padding-top:150px;

padding-bottom:70px;

background:
linear-gradient(
135deg,
#0b1f3a,
#123d75
);

color:white;

text-align:center;

}


.legal-header h1{

color:white;

font-size:3rem;

margin-bottom:15px;

}


.legal-content{

background:white;

}


.legal-content h2{

text-align:left;

font-size:1.6rem;

margin-top:45px;

margin-bottom:15px;

}


.legal-content p{

color:#555;

margin-bottom:15px;

}


.legal-box{

background:#f4f7fb;

padding:25px;

border-left:5px solid var(--accent);

border-radius:10px;

margin:25px 0;

}


.legal-content a{

color:var(--secondary);

font-weight:600;

}


@media(max-width:768px){

.legal-header h1{

font-size:2.2rem;

}

}

.legal-list{

margin:20px 0 30px 25px;

color:#555;

}


.legal-list li{

margin-bottom:12px;

}


.legal-list li::marker{

color:var(--accent);

}

/*==================================
TABLA COOKIES
==================================*/


.cookie-table{

overflow-x:auto;

margin:30px 0;

}


.cookie-table table{

width:100%;

border-collapse:collapse;

background:white;

box-shadow:var(--shadow);

border-radius:12px;

overflow:hidden;

}


.cookie-table th{

background:var(--primary);

color:white;

padding:15px;

text-align:left;

}


.cookie-table td{

padding:15px;

border-bottom:1px solid #eee;

color:#555;

}


.cookie-table tr:last-child td{

border-bottom:none;

}


.cookie-table tr:hover{

background:#f7f9fc;

}

/*==================================
BANNER COOKIES
==================================*/


.cookie-banner{

position:fixed;

bottom:20px;

left:20px;

right:20px;

background:white;

border-radius:18px;

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

padding:30px;

z-index:9999;

display:none;

}


.cookie-content{

max-width:1100px;

margin:auto;

}


.cookie-content h3{

margin-bottom:15px;

color:var(--primary);

}


.cookie-content p{

color:#555;

line-height:1.6;

}



.cookie-buttons{

display:flex;

gap:15px;

margin-top:25px;

flex-wrap:wrap;

}



.cookie-btn{

border:none;

padding:12px 25px;

border-radius:30px;

cursor:pointer;

font-weight:600;

transition:.3s;

}


.cookie-btn:hover{

transform:translateY(-2px);

}


.cookie-btn.accept{

background:#0f3f73;

color:white;

}


.cookie-btn.reject{

background:#ddd;

color:#333;

}


.cookie-btn.settings{

background:#ff9800;

color:white;

}



/*=========================
MODAL COOKIES
=========================*/


.cookie-modal{

position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

z-index:10000;

}



.cookie-panel{

background:white;

width:90%;

max-width:600px;

border-radius:20px;

padding:40px;

}



.cookie-option{

background:#f5f7fa;

padding:20px;

border-radius:12px;

margin:20px 0;

}


.cookie-option label{

font-weight:700;

display:block;

margin-bottom:10px;

}


.cookie-option p{

font-size:.9rem;

color:#666;

}



.cookie-actions{

display:flex;

gap:15px;

justify-content:flex-end;

}



@media(max-width:600px){


.cookie-banner{

left:10px;

right:10px;

bottom:10px;

padding:20px;

}


.cookie-panel{

padding:25px;

}


.cookie-actions{

flex-direction:column;

}


}

/*==================================
FOOTER PROFESIONAL
==================================*/


footer{

background:#071528;

color:white;

padding:50px 0 25px;

}


.footer-main{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

flex-wrap:wrap;

}


footer h3{

color:white;

margin-bottom:15px;

}


footer p{

color:#cbd5e1;

}


.footer-links{

display:flex;

gap:25px;

flex-wrap:wrap;

}


.footer-links a{

color:white;

opacity:.85;

}


.footer-links a:hover{

color:var(--accent);

opacity:1;

}


.footer-bottom{

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

margin-top:35px;

padding-top:20px;

text-align:center;

}


@media(max-width:768px){


.footer-main{

flex-direction:column;

text-align:center;

}


}

/*==================================
ICONOS
==================================*/

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Teléfono */
.icon-phone {
    background-image: url("../img/icon-phone.svg");
}

/* WhatsApp */
.icon-whatsapp {
    background-image: url("../img/icon-whatsapp.svg");
}

/* Email */
.icon-email {
    background-image: url("../img/icon-email.svg");
}