/* Papelek home — ajustes visuales v4 (2026-08-26)
   Blanco dominante, azul como detalle principal y verde como acento. */

/* Secciones limpias: el color queda en detalles, no en fondos completos. */
.section-nosotros,
.section-calidad,
.section-servicios {
    background: #fff;
    position: relative;
}

.section-nosotros::before,
.section-calidad::before,
.section-servicios::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 128px;
    height: 4px;
    transform: translateX(-50%);
    background: var(--papelek-blue);
    border-radius: 0 0 4px 4px;
    pointer-events: none;
}

.section-nosotros::after,
.section-calidad::after,
.section-servicios::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% + 32px);
    width: 32px;
    height: 4px;
    background: var(--papelek-green);
    border-radius: 0 0 4px 0;
    pointer-events: none;
}

/* Tarjetas: azul predominante y acentos verdes ya presentes en labels y listas. */
.value-card,
.capability-card,
.industry-card,
.certificacion-item,
.quality-card {
    background: #fff;
    border-color: rgba(0, 22, 137, 0.18);
}

.value-card,
.capability-card,
.certificacion-item {
    border-top: 3px solid var(--papelek-blue);
}

.value-card:hover {
    border-color: rgba(0, 22, 137, 0.28);
    border-top-color: var(--papelek-blue);
}

/* Misión, Visión y Valores: iconografía sólida y consistente. */
.value-card-icon {
    position: relative;
    background: var(--papelek-blue);
    color: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}

.value-card-icon::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--papelek-green);
}

.value-card-icon i,
.value-card-icon svg {
    color: inherit;
}

.quality-item-icon {
    background: var(--papelek-green);
    color: #fff;
    box-shadow: none;
}

.iso-badge-wrap {
    background: #fff;
}

/* Sustituye difuminados decorativos por trazos sólidos de marca. */
.about-image-wrap::after,
.quality-card::before {
    background: var(--papelek-blue);
}

.quality-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 4px;
    background: var(--papelek-green);
    pointer-events: none;
}

.industry-card-body {
    position: relative;
    border-top: 3px solid var(--papelek-blue);
}

.industry-card-body::before {
    content: '';
    position: absolute;
    top: -3px;
    right: 0;
    width: 24%;
    height: 3px;
    background: var(--papelek-green);
}

/* Flechas del carrusel sobre las tarjetas exteriores. */
.carousel-container {
    --carousel-arrow-size: 48px;
    padding-inline: 0;
    overflow: visible;
}

#carousel1,
#carousel2 {
    position: relative;
}

#carousel1 .carousel-inner,
#carousel2 .carousel-inner {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

#carousel1 .custom-control,
#carousel2 .custom-control {
    top: 50%;
    width: var(--carousel-arrow-size);
    height: var(--carousel-arrow-size);
    z-index: 5;
    opacity: 1;
    box-shadow: none;
}

#carousel1 .carousel-control-prev.custom-control,
#carousel2 .carousel-control-prev.custom-control {
    left: 0;
    transform: translate(-50%, -50%);
}

#carousel1 .carousel-control-next.custom-control,
#carousel2 .carousel-control-next.custom-control {
    right: 0;
    transform: translate(50%, -50%);
}

#carousel1 .carousel-control-prev.custom-control:hover,
#carousel2 .carousel-control-prev.custom-control:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

#carousel1 .carousel-control-next.custom-control:hover,
#carousel2 .carousel-control-next.custom-control:hover {
    transform: translate(50%, -50%) scale(1.05);
}

/* En Contacto y el pie solo quedan los controles integrados en el formulario. */
body.contact-cta-zone .whatsapp-btn,
body.contact-cta-zone .sticky-cta-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.92);
}

body.contact-cta-zone .navbar-papelek .btn-nav-cta {
    display: none !important;
}

@media (max-width: 768px) {
    .carousel-container {
        --carousel-arrow-size: 40px;
        padding-inline: 1rem;
    }

    #carousel1 .carousel-control-prev.custom-control,
    #carousel2 .carousel-control-prev.custom-control {
        left: 1rem;
    }

    #carousel1 .carousel-control-next.custom-control,
    #carousel2 .carousel-control-next.custom-control {
        right: 1rem;
    }
}

@media (max-width: 420px) {
    .carousel-container {
        --carousel-arrow-size: 36px;
    }
}