/* ================= ASESORIA POSTVENTA ================= */

.postventa-section{
    background: transparent;
    color:#111;
    padding:80px 0;
    position:relative;
    overflow:hidden;
}

.postventa-title{
    font-size:3rem;
    font-weight:800;
    text-align:center;
    letter-spacing:4px;
    color:#FFD200;
    text-shadow:0 0 20px rgba(255,210,0,.4);
}

.postventa-sub{
    max-width:900px;
    margin:20px auto;
    text-align:center;
    font-size:1.1rem;
    line-height:1.8;
    opacity:.9;
}

.glow-line{
    width:200px;
    height:3px;
    background:linear-gradient(90deg,transparent,#FFD200,transparent);
    margin:25px auto;
    animation: glow 2s infinite alternate;
}

@keyframes glow{
    from{opacity:.3}
    to{opacity:1}
}

/* Cards */
.postventa-card{
    background:#ffffff;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px;
    padding:25px;
    text-align:center;
    transition:.4s;
    backdrop-filter: blur(6px);
    color:#111;
}

.postventa-card:hover{
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 0 25px rgba(255,210,0,.25);
}

.postventa-card i{
    font-size:2.5rem;
    color:#FFD200;
    margin-bottom:15px;
}

/* Imagen */
.postventa-img{
    border-radius:20px;
    box-shadow:0 0 40px rgba(255,210,0,.25);
}

/* Botón */
.btn-postventa{
    background:#FFD200;
    color:#000;
    font-weight:700;
    padding:12px 35px;
    border-radius:40px;
    text-decoration:none;
    transition:.3s;
}

.btn-postventa:hover{
    background:#fff;
    box-shadow:0 0 20px rgba(255,255,255,.6);
}

/* ===== Fondo decorativo dinámico ===== */
.postventa-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,210,0,.08), transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(255,210,0,.06), transparent 40%);
    z-index:0;
}

.postventa-section .container{
    position:relative;
    z-index:2;
}

/* ===== Marco visual del bloque ===== */
.postventa-section{
    border-top:1px solid rgba(0,0,0,.05);
    border-bottom:1px solid rgba(0,0,0,.05);
}

/* ===== Subbloque imagen + texto ===== */
.row.align-items-center.mt-5{
    background:rgba(255,255,255,.6);
    border-radius:30px;
    padding:35px;
    box-shadow:0 10px 40px rgba(0,0,0,.06);
    backdrop-filter: blur(8px);
}

/* ===== Cards pro ===== */
.postventa-card{
    position:relative;
    overflow:hidden;
}

.postventa-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent, rgba(255,210,0,.08), transparent);
    opacity:0;
    transition:.5s;
}

.postventa-card:hover::before{
    opacity:1;
}

/* ===== Animación entrada ===== */
.postventa-card,
.postventa-img,
.postventa-title,
.postventa-sub{
    opacity:0;
    transform:translateY(40px);
    transition:1s ease;
}

/* ===== Glow animado botón ===== */
.btn-postventa{
    position:relative;
    overflow:hidden;
}

.btn-postventa::after{
    content:"";
    position:absolute;
    inset:-50%;
    background:radial-gradient(circle, rgba(255,255,255,.6), transparent 60%);
    opacity:.4;
    animation: pulseGlow 3s infinite;
}

@keyframes pulseGlow{
    0%{transform:scale(0.8)}
    50%{transform:scale(1)}
    100%{transform:scale(0.8)}
}

/* ===== Tipografía energética ===== */
.postventa-title{
    background: linear-gradient(90deg, #FFD200, #ffea80, #FFD200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: energyText 4s linear infinite;
}

@keyframes energyText{
    0%{background-position:0%}
    100%{background-position:200%}
}

/* Subtítulo con estilo técnico */
.postventa-sub{
    color:#333;
    font-weight:500;
    letter-spacing:.5px;
    position:relative;
}

/* Línea energética decorativa */
.postventa-sub::after{
    content:"⚡ Energía continua · Respaldo técnico · Continuidad operativa";
    display:block;
    margin-top:12px;
    font-size:.85rem;
    color:#b08c00;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* ===== Títulos internos ===== */
.postventa-section h4{
    font-size:1.6rem;
    color:#111;
    position:relative;
}

.postventa-section h4::before{
    content:"⚡";
    margin-right:10px;
    color:#FFD200;
}

/* ===== Texto técnico ===== */
.postventa-section p{
    color:#444;
    font-size:1.05rem;
}

/* ===== Listas técnicas ===== */
.postventa-section ul li{
    list-style:none;
    margin-bottom:10px;
    position:relative;
    padding-left:28px;
    color:#333;
    font-weight:500;
}

.postventa-section ul li::before{
    content:"⚡";
    position:absolute;
    left:0;
    color:#FFD200;
}

/* ===== Cards texto ===== */
.postventa-card h5{
    font-weight:800;
    letter-spacing:1px;
    background: linear-gradient(90deg, #111, #FFD200);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.postventa-card p{
    color:#555;
    font-size:.95rem;
}

/* ===== Bloque continuidad ===== */
.postventa-section .col-lg-6 p{
    position:relative;
}

.postventa-section .col-lg-6 p::before{
    content:"";
    position:absolute;
    left:-15px;
    top:6px;
    width:4px;
    height:70%;
    background:linear-gradient(#FFD200, transparent);
}

/* ===== Identidad grupo electrógeno ===== */
.postventa-section::after{
    content:"GENERACIÓN · RESPALDO · CONTINUIDAD · POTENCIA · SEGURIDAD ENERGÉTICA";
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    font-size:.7rem;
    letter-spacing:4px;
    color:rgba(0,0,0,.15);
    text-transform:uppercase;
}

/* ===== Texto con vida energética ===== */
.postventa-section h4{
    background: linear-gradient(90deg,#FFD200,#fff1a8,#FFD200);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation: energyFlow 4s linear infinite;
    letter-spacing:1px;
}

@keyframes energyFlow{
    0%{background-position:0%}
    100%{background-position:200%}
}

/* ===== Párrafos energéticos ===== */
.postventa-section p{
    color:#4a4a4a;
    font-weight:500;
    position:relative;
}

/* línea de energía lateral */
.postventa-section p::after{
    content:"";
    position:absolute;
    left:-12px;
    top:6px;
    width:3px;
    height:80%;
    background:linear-gradient(#FFD200, transparent);
}

/* ===== Lista técnica pro ===== */
.postventa-section ul{
    margin-top:20px;
}

.postventa-section ul li{
    color:#333;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    font-size:.95rem;
    padding-left:38px;
    position:relative;
}

/* icono eléctrico animado */
.postventa-section ul li::before{
    content:"⚡";
    position:absolute;
    left:0;
    font-size:1.1rem;
    color:#FFD200;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);opacity:.7}
    50%{transform:scale(1.3);opacity:1}
    100%{transform:scale(1);opacity:.7}
}

/* ===== Bloque grande con caja visual ===== */
.big-energy-box{
    background:rgba(255,210,0,.05);
    border:1px solid rgba(255,210,0,.3);
    border-radius:25px;
    padding:35px;
    position:relative;
    overflow:hidden;
}

/* líneas animadas */
.big-energy-box::before{
    content:"";
    position:absolute;
    width:200%;
    height:2px;
    background:linear-gradient(90deg,transparent,#FFD200,transparent);
    top:0;
    left:-100%;
    animation:lineMove 4s linear infinite;
}

@keyframes lineMove{
    0%{left:-100%}
    100%{left:100%}
}

/* ===== Cards animadas ===== */
.postventa-card{
    position:relative;
    overflow:hidden;
}

.postventa-card::after{
    content:"";
    position:absolute;
    width:120%;
    height:120%;
    top:-110%;
    left:-110%;
    background:radial-gradient(circle,#FFD20055,transparent 60%);
    transition:.6s;
}

.postventa-card:hover::after{
    top:-10%;
    left:-10%;
}

/* ===== Texto cards ===== */
.postventa-card h5{
    background: linear-gradient(90deg,#FFD200,#111,#FFD200);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation: energyFlow 3s linear infinite;
}

/* ===== Identidad electrógena ===== */
.energy-label{
    display:inline-block;
    margin-top:15px;
    padding:6px 14px;
    border:1px solid #FFD200;
    border-radius:30px;
    font-size:.75rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#b08c00;
    background:rgba(255,210,0,.08);
}

.energy-particle{
    position:absolute;
    width:6px;
    height:6px;
    background:#FFD200;
    border-radius:50%;
    opacity:.4;
    animation: floatEnergy linear infinite;
}

@keyframes floatEnergy{
    0%{transform:translateY(0);opacity:.2}
    50%{opacity:.6}
    100%{transform:translateY(-120px);opacity:0}
}

.energy-label{
    display:inline-block;
    margin:6px 6px 0 0;
    transition:.3s;
}

.energy-label:hover{
    background:#FFD200;
    color:#000;
    transform:scale(1.05);
}

/* ===== BOTÓN CONTACTO EFECTO ENERGÉTICO ===== */

.btn-contact-glow{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.btn-contact-glow::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transition:.6s;
}

.btn-contact-glow:hover::before{
    left:100%;
}

.btn-contact-glow i{
    transition:.3s;
}

.btn-contact-glow:hover i{
    transform:translateX(6px);
}

/* ===== CAJA NEGRA WOW PARA TITULO ===== */

.postventa-title{
    display: table;              /* centra perfecto */
    margin: 0 auto 30px auto;    /* centra horizontal */
    padding: 20px 60px;
    background: rgba(0,0,0,0.80);
    border-radius: 20px;
    position: relative;
    backdrop-filter: blur(6px);

    /* 🔥 IMPORTANTE: restauramos el texto */
    color: #FFD200;
    -webkit-text-fill-color: #FFD200;

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

    animation: floatTitle 4s ease-in-out infinite;
}

/* centrar el bloque */
.postventa-section .postventa-title{
    margin: 0 auto;
}

/* borde energético animado */
.postventa-title::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:22px;
    background: linear-gradient(90deg, #FFD200, transparent, #FFD200);
    z-index:-1;
    opacity:.5;
    background-size:200% 100%;
    animation: borderFlow 4s linear infinite;
}

/* Animaciones */
@keyframes borderFlow{
    0%{background-position:0% 0}
    100%{background-position:200% 0}
}

@keyframes floatTitle{
    0%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
    100%{transform:translateY(0)}
}