/* ============================================================
   Efectos y animaciones para las páginas de empresa
   (CMJJ, OBP, Comercio de Explosivos)
   Todo usa var(--guindo) / var(--dorado) / var(--fondo),
   así cada página se anima con SU propio color.
   ============================================================ */

html{ scroll-behavior: smooth; }

/* Título de sección con degradado del color propio de la página */
.titulo h2{
    background: linear-gradient(120deg, var(--guindo), var(--dorado));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--guindo);
    display: inline-block;
}

/* La línea decorativa crece suavemente al cargar la sección */
@keyframes linea-crece{
    from{ width:0; opacity:0; }
    to{ width:110px; opacity:1; }
}
.titulo .linea{
    animation: linea-crece .9s cubic-bezier(0.23,1,0.32,1) both;
    animation-delay: .15s;
}

/* Subrayado animado en el menú (además del resaltado ya existente) */
nav a{ position: relative; }
nav a::after{
    content:'';
    position:absolute;
    left:10px; right:10px; bottom:2px;
    height:2px;
    background: var(--guindo);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s cubic-bezier(0.23,1,0.32,1);
}
nav a:hover::after{ transform: scaleX(1); }

/* Logo con pequeño realce al pasar el mouse por el header */
.logo img{ transition: transform .45s cubic-bezier(0.23,1,0.32,1); }
header:hover .logo img{ transform: scale(1.05); }

/* Franja de color propia debajo del header (marca de la página) */
header::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:0;
    height:3px;
    background: linear-gradient(90deg, var(--guindo), var(--dorado));
    opacity:.85;
}

/* Íconos de tarjetas: "despiertan" al pasar el mouse */
.servicio_card .servicio_icon,
.capacidad_icon{
    transition: transform .5s cubic-bezier(0.23,1,0.32,1);
}
.servicio_card:hover .servicio_icon,
.capacidad_card:hover .capacidad_icon{
    transform: scale(1.12) rotate(-6deg);
}
.capacidad_card i,
.valor_card i,
.apoyo_item i{
    display: inline-block;
    transition: transform .5s cubic-bezier(0.23,1,0.32,1);
}
.capacidad_card:hover i,
.valor_card:hover i,
.apoyo_item:hover i{
    transform: scale(1.15) rotate(-6deg);
}

/* Tarjetas de proyectos y experiencia: brillo suave al pasar el mouse */
.proyecto_card,
.experiencia-card{ position: relative; }
.proyecto_card::after,
.experiencia-card::after{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 60%);
    opacity:0;
    transition: opacity .4s ease;
    pointer-events:none;
}
.proyecto_card:hover::after,
.experiencia-card:hover::after{ opacity:1; }

/* Botón flotante de WhatsApp: pulso suave para llamar la atención */
@keyframes whatsapp-pulso{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
    70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp{ animation: whatsapp-pulso 2.4s infinite; }

/* Botón "volver arriba" con leve rebote al pasar el mouse */
#arriba{ transition: transform .3s ease, box-shadow .3s ease; }
#arriba:hover{ transform: translateY(-4px) scale(1.06); }

/* Secciones alternas con un tinte muy sutil del color de marca */
.empresa-section.alt{
    background: linear-gradient(135deg, var(--fondo, #f4f6f8) 0%, #ffffff 100%);
}

/* Inputs del formulario: resaltan con el color propio al enfocar */
.contacto_empresa form input:focus,
.contacto_empresa form textarea:focus{
    outline: none;
    border-color: var(--guindo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--guindo) 18%, transparent);
}

/* El botón de enviar "respira" un poco al pasar el mouse */
.contacto_empresa form button{
    transition: transform .35s cubic-bezier(0.23,1,0.32,1), box-shadow .35s ease, background .35s ease;
}
.contacto_empresa form button:hover{
    transform: translateY(-3px) scale(1.02);
}